:root{--vio:#a78bfa;--blue:#60a5fa;--pink:#f0abfc;--text:#ece8ff;--mut:#a79fc9;--panel:#120d22;--line:#2a1f4d}
*{box-sizing:border-box}
/* Everything is sized in rem, so the whole page (text, cards, buttons) grows with the screen: a bit larger on big screens, and fit() below shrinks it further if anything would need scrolling. */
html{font-size:clamp(14px,min(1.1vw,2vh),44px)}
body{margin:0;min-height:100vh;color:var(--text);font-family:'DM Sans',system-ui,sans-serif;
background:radial-gradient(56.25rem 37.5rem at 85% 0,rgba(124,58,237,.32),transparent 70%),radial-gradient(50rem 37.5rem at 0 25%,rgba(37,99,235,.22),transparent 70%),#090612}
[hidden]{display:none!important}
a{color:var(--mut);text-decoration:none}
:focus-visible{outline:0.1875rem solid var(--blue);outline-offset:0.1875rem}
.wrap{max-width:75rem;margin:0 auto;padding:0 2rem}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 0}
.logo{font-family:Syne,sans-serif;font-weight:800;font-size:1.625rem;color:var(--text)}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 1.5rem}
button{font:inherit;cursor:pointer}
.nl{background:none;border:0;color:var(--mut);font-size:1rem;min-height:2.75rem;padding:0 0.25rem}
.nl:hover{color:var(--text)}
.pill{background:var(--text);color:#090612;border:0;font-weight:700;padding:0 1.375rem;min-height:2.75rem;border-radius:62.4375rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:0 1.875rem;border-radius:0.75rem;font-weight:700;font-size:1.125rem;border:2px solid var(--vio);background:var(--vio);color:#090612}
.btn.ghost{background:none;color:var(--text);border-color:#3b2d6b}
.btn:disabled{opacity:.45;cursor:not-allowed}
.tag{margin:0 0 1rem;font-weight:700;letter-spacing:.14em;font-size:0.875rem;text-transform:uppercase;color:var(--vio)}
h1,h2{font-family:Syne,sans-serif;font-weight:800;margin:0}
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:3rem;padding:3rem 0 5rem}
.hero>div:first-child{flex:1 1 27.5rem;min-width:18.75rem}
.hero h1{font-size:clamp(2.75rem,7vw,4.75rem);line-height:1.02;margin-bottom:1.5rem}
.hero p.sub{margin:0 0 2.25rem;font-size:1.25rem;line-height:1.55;color:var(--mut);max-width:33.75rem}
.row{display:flex;flex-wrap:wrap;gap:1rem}
label.s{display:block;font-size:0.875rem;color:var(--mut);margin:1.75rem 0 0.5rem}
input,select{font:inherit;min-height:3rem;padding:0 1rem;border-radius:0.625rem;border:2px solid #3b2d6b;background:var(--panel);color:var(--text);font-size:1rem}
#code-in{width:12.5rem;letter-spacing:.2em;text-transform:uppercase}
.err{margin:0.625rem 0 0;min-height:1.375rem;color:#fda4af;font-size:0.9375rem}
#fan{position:relative;width:21.25rem;height:23.75rem;margin:0 auto;flex:1 1 22.5rem}
.pc{position:absolute;width:10.625rem;height:15rem;background:#150f2b;border:2px solid;border-radius:1.125rem;font-family:Syne,sans-serif;padding:0.875rem 1rem}
.pc b{font-size:2rem;line-height:1}
.pc i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:5.25rem;font-style:normal}
footer{padding:3rem 0;color:var(--mut);font-size:0.9375rem}
/* lobby */
.lobby{max-width:47.5rem;margin:0 auto;padding:2rem 0 5rem;text-align:center}
.code{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(3.5rem,14vw,6.5rem);letter-spacing:.14em;color:var(--blue);line-height:1;margin:0.5rem 0}
.link{color:var(--mut);margin:0 0 1.25rem;word-break:break-all}
.seats{list-style:none;padding:0;margin:2.25rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13.75rem,1fr));gap:0.875rem;text-align:left}
.seat{display:flex;align-items:center;gap:0.75rem;background:var(--panel);border:1px solid var(--line);border-radius:0.875rem;padding:0.875rem 1rem;min-height:4.25rem}
.seat.empty{border-style:dashed;color:var(--mut);background:none}
.av{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--vio);color:#090612;display:grid;place-items:center;font-weight:800;flex:none}
.nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd{font-size:0.75rem;padding:0.1875rem 0.5625rem;border-radius:6.1875rem;border:1px solid var(--vio);color:var(--vio)}
.bd.me{border-color:var(--blue);color:var(--blue)}
.note{color:var(--mut);margin:1rem 0}
/* popup boxes */
dialog{padding:0;border:1px solid #6d4aff;border-radius:1.375rem;background:var(--panel);color:var(--text);width:min(53.75rem,92vw);max-height:86vh;box-shadow:0 0 5.625rem rgba(124,92,255,.3)}
dialog::backdrop{background:rgba(5,3,12,.72);backdrop-filter:blur(0.25rem)}
.in{padding:2.25rem 2rem 2rem}
.x{position:absolute;top:0.75rem;right:0.75rem;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line);background:none;color:var(--text);font-size:1.5rem}
dialog h2{font-size:clamp(1.75rem,4vw,2.5rem);margin-bottom:0.75rem}
dialog h4{margin:2rem 0 0.75rem;font-size:0.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.lead{color:var(--mut);line-height:1.55;font-size:1.125rem;margin:0 0 1.5rem}
.g{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.75rem,1fr));gap:1rem}
.k{background:#0e0a1c;border:1px solid var(--line);border-radius:0.875rem;padding:1.375rem}
.k h3{margin:0 0 0.5rem;font-size:1.25rem}
.k p{margin:0;color:var(--mut);line-height:1.55;font-size:1rem}
.big{font-family:Syne,sans-serif;font-weight:800;font-size:3rem;line-height:1;margin-bottom:0.625rem}
.lnk{background:none;border:0;color:var(--blue);text-decoration:underline;padding:0;font:inherit}
.chk{display:flex;gap:0.625rem;align-items:flex-start;margin:1.125rem 0;color:var(--mut);line-height:1.5}
.chk input{min-height:0;width:1.375rem;height:1.375rem;margin-top:2px;flex:none}
.f{width:100%;max-width:26.25rem}
.cb{position:relative}
.cb input{width:100%}
.cb ul{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 0.25rem);margin:0;padding:0.375rem;list-style:none;max-height:14.375rem;overflow:auto;background:#0e0a1c;border:1px solid #6d4aff;border-radius:0.75rem;box-shadow:0 0.75rem 2.5rem rgba(0,0,0,.6)}
.cb li{padding:0.6875rem 0.75rem;min-height:2.75rem;display:flex;align-items:center;border-radius:0.5rem;cursor:pointer}
.cb li[aria-selected=true]{background:#2a1f4d}
.cb li.no{color:var(--mut);cursor:default}
.av.lg{width:4.5rem;height:4.5rem;font-size:1.75rem}
img.av{object-fit:cover;display:block;background:#2a1f4d}
#ckb{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:51.25rem;margin:0 auto;z-index:30;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;background:#120d22;border:1px solid #6d4aff;border-radius:1rem;padding:1.125rem 1.25rem;box-shadow:0 0 3.75rem rgba(124,92,255,.3)}
#ckb p{margin:0;flex:1 1 22.5rem;line-height:1.5;color:var(--mut)}#ckb b{color:var(--text)}
.bd.rd{background:var(--vio);border-color:var(--vio);color:#090612}
/* game board */
.gm{display:grid;gap:1.375rem;padding:0.5rem 0 6.25rem}
.ops{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center}
.op{background:var(--panel);border:2px solid var(--line);border-radius:1rem;padding:0.75rem 0.875rem;min-width:9.375rem;display:grid;gap:0.375rem;justify-items:center;text-align:center}
.op.turn,.me.turn{border-color:var(--blue);box-shadow:0 0 1.875rem rgba(96,165,250,.35)}
.op.out{opacity:.5}.op small,.stack small,.need small{color:var(--mut)}
.row2{display:flex;gap:0.25rem;justify-content:center;flex-wrap:wrap;min-height:2px}
.cd{position:relative;display:inline-block;width:var(--cw,4.75rem);aspect-ratio:5/7;border-radius:0.5rem;padding:0;border:2px solid transparent;background:none;flex:none;vertical-align:top;color:inherit}
.cd.sm{--cw:2.5rem}.cd.md{--cw:5.5rem}.cd.lg{--cw:5.25rem}
button.cd{cursor:pointer;transition:transform .12s}
button.cd:disabled{cursor:not-allowed}
.cd img,.cd .fb{width:100%;height:100%;object-fit:contain;display:block;border-radius:0.375rem}
.fb{display:grid;place-items:center;background:#ece8ff;color:#090612;font:800 1.25rem Syne,sans-serif}
.fb.red{color:#c0301c}.fb.bk{background:repeating-linear-gradient(45deg,#2a1f4d,#2a1f4d 0.375rem,#3b2d6b 0.375rem,#3b2d6b 0.75rem);border:2px solid #6d4aff}
.cd.sel{transform:translateY(-0.875rem);border-color:var(--vio);box-shadow:0 0 1.5rem rgba(167,139,250,.6)}
.cd.dim{opacity:.4}.cd.empty{border:2px dashed var(--line)}
.fl{position:absolute;left:0;right:0;bottom:-2px;background:#090612e6;color:var(--text);font:700 0.6875rem 'DM Sans',sans-serif;text-align:center;border-radius:0.25rem}
.mid{display:flex;flex-wrap:wrap;gap:2.25rem;align-items:center;justify-content:center}
.stack{display:grid;gap:0.5rem;justify-items:center}
.pile{display:flex}.pile .cd{margin-left:-2.875rem}.pile .cd:first-child{margin-left:0}
.need{display:grid;gap:0.25rem;text-align:center;max-width:13.75rem}.need b{font:800 1.625rem Syne,sans-serif;color:var(--blue)}
.ev{text-align:center;color:var(--text);min-height:1.5rem;margin:0}
.me{display:grid;gap:1rem;justify-items:center;background:var(--panel);border:2px solid var(--line);border-radius:1.25rem;padding:1.25rem 0.875rem}
.hand{display:flex;flex-wrap:wrap;gap:0.625rem;justify-content:center;padding-top:0.875rem}
.res{list-style:none;padding:0;margin:0;display:grid;gap:0.5rem;text-align:left;min-width:15rem}
.res li{background:#0e0a1c;border:1px solid var(--line);border-radius:0.625rem;padding:0.75rem 1rem}
/* face-up cards sit on top of the face-down cards, leaving the bottom of the back showing */
.slots{display:flex;gap:0.625rem;justify-content:center}
.slot{position:relative;width:var(--cw);height:calc(var(--cw) * 1.4 + var(--peek))}
.slot.lg{--cw:5.25rem;--peek:1.375rem}.slot.sm{--cw:2.5rem;--peek:0.5625rem}
.slot .cd{position:absolute;left:0}
.slot .cd.over{top:0;z-index:2}.slot .cd.under{top:var(--peek);z-index:1}.slot .cd.under.solo{top:0}
/* chat */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#chat{margin:1.75rem auto 0;max-width:35rem;text-align:left}
#chat-t{display:none}
.cbox{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:0.75rem}
#clog{list-style:none;margin:0 0 0.625rem;padding:0;height:11.875rem;overflow:auto;display:grid;align-content:start;gap:0.375rem;font-size:0.9375rem}
#clog li{overflow-wrap:anywhere;line-height:1.4}#clog b{color:var(--blue)}#clog li.mine b{color:var(--vio)}#clog li.sys{color:var(--mut);font-style:italic}
#cf{display:flex;gap:0.5rem}#cf input{flex:1;min-width:0}
#chat.float{position:fixed;right:1rem;bottom:1rem;width:min(21.25rem,calc(100vw - 2rem));margin:0;z-index:25}
#chat.float #chat-t{display:block;margin-left:auto}
#chat.float .cbox{display:none;margin-top:0.5rem}
#chat.float.open .cbox{display:block}
#chat.float #clog{height:13.75rem}
/* compact table so the whole game fits one screen (it all scales with the root size) */
body.ingame .top{padding:.5rem 0}
.gm{gap:.8rem;padding:.2rem 0 1rem}
.op{grid-template-columns:auto auto;justify-items:start;align-items:center;gap:.15rem .8rem;padding:.6rem .9rem;min-width:0;text-align:left}
.op>*:not(.slots){grid-column:1}
.op .slots{grid-column:2;grid-row:1 / span 3;justify-self:end}
.op .av{width:2rem;height:2rem;font-size:.9rem}
.cd.md{--cw:4.25rem}.cd.lg{--cw:4.5rem}
.slot.lg{--cw:4.5rem;--peek:1.1rem}
.pile .cd{margin-left:-2.6rem}
.mid{gap:2rem}
.me{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:.8rem 2rem;padding:1rem}
.hand{gap:.5rem;padding-top:.9rem}
.ctl{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:center}
.ctl .btn{min-height:2.6rem;font-size:1.05rem;padding:0 1.4rem}
/* hand sits below the face-up / face-down cards; everything stays compact so it fits the screen */
.me{display:grid;justify-items:center;gap:.5rem;padding:.9rem}
.cd.lg{--cw:4.25rem}.slot.lg{--cw:4.25rem;--peek:1rem}
.hand{padding-top:.9rem}
body.ingame footer{display:none}
.hero{padding:1.5rem 0 2rem}
footer{padding:1rem 0}
.code{font-size:clamp(3.5rem,14vw,4.5rem)}
.lobby{max-width:72rem;padding:.5rem 0 1rem}
.seats{margin:1rem 0}
#lobby:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 22rem;column-gap:2rem;align-items:start}
#lobby>*{grid-column:1}
#lobby>#chat{grid-column:2;grid-row:1 / span 12;margin:0;max-width:none}
#clog{height:20rem}
@media (max-width:900px){#lobby:not([hidden]){display:block}#lobby>#chat{margin:1.5rem auto 0;max-width:35rem}}
/* the cookie notice sits in the page (not over it), so it never covers a button and the page still fits */
#ckb{position:static;margin:.8rem auto 0;padding:.6rem 1rem;gap:.6rem 1rem}
#ckb p{font-size:.9rem;line-height:1.4}
#ckb .btn{min-height:2.4rem!important;font-size:1rem!important;padding:0 1.2rem}
/* chat: a small box in the corner that starts closed, in the lobby and in the game */
#chat{position:fixed;right:1rem;bottom:1rem;width:min(21.5rem,calc(100vw - 2rem));margin:0;max-width:none;z-index:25;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:.5rem}
#chat #chat-t{display:block}
#chat .cbox{display:none;width:100%}
#chat.open .cbox{display:block}
#clog{height:14rem}
#lobby:not([hidden]){display:block}
.lobby{max-width:48rem}
/* profile tabs */
[role=tablist] .btn{padding:0 1.4rem}
/* bigger, slightly lower play area */
.cd.lg{--cw:5rem}.slot.lg{--cw:5rem;--peek:1.2rem}
.me{margin-top:.9rem}
/* poo emoji above the S**tHead of the last game */
.avw{position:relative;display:inline-block;flex:none}
.poo{position:absolute;top:-.95rem;left:50%;transform:translateX(-50%);font-style:normal;font-size:1.35rem;line-height:1}
/* turn history: mirrors the chat, bottom left */
#hist{position:fixed;left:1rem;bottom:1rem;width:min(21.5rem,calc(100vw - 2rem));z-index:25;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:.5rem}
#hist .cbox{display:none;width:100%}#hist.open .cbox{display:block}
#hlog{list-style:none;margin:0;padding:0;height:18rem;overflow:auto;display:grid;align-content:start;gap:.35rem;font-size:.92rem}
#hlog li{overflow-wrap:anywhere;line-height:1.35}#hlog li b{color:var(--mut);margin-right:.4rem;font-weight:700}
/* leaderboard on the home page */
#side{flex:1 1 22rem;display:grid;gap:1rem;justify-items:center;align-content:start}
#fan{flex:none;width:21.25rem;height:23.75rem;transform:scale(.55);transform-origin:top center;margin:0 0 -10.7rem}
#lb{width:100%;max-width:26rem;background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:.9rem 1.1rem}
#lb h2{font-size:1.25rem;margin:0 0 .6rem}
#lbl{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.95rem}
#lbl li{display:grid;grid-template-columns:1.4rem 1.8rem 1fr auto;gap:.6rem;align-items:center}
#lbl .av{width:1.8rem;height:1.8rem;font-size:.85rem}
#lbl .n{color:var(--mut)}#lbl .c{color:var(--pink);font-weight:700}
/* session scoreboard in the lobby */
#sess{margin:1rem auto;max-width:34rem;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:.8rem 1rem}
#sess h3{margin:0 0 .4rem;font-size:1.05rem}
#sess table{width:100%;border-collapse:collapse;font-size:.95rem}
#sess th{color:var(--mut);font-weight:500;text-align:right;padding:.2rem .5rem}
#sess td{padding:.3rem .5rem;text-align:right;border-top:1px solid var(--line)}
#sess th:first-child,#sess td:first-child{text-align:left}
/* spectators see every hand */
.op .hrow{grid-column:1 / span 2;grid-row:auto;display:flex;flex-wrap:wrap;gap:.2rem;justify-content:flex-start}
#net{position:fixed;top:.6rem;left:50%;transform:translateX(-50%);z-index:40;margin:0;background:#2a1f4d;border:1px solid #6d4aff;border-radius:999px;padding:.4rem 1rem;font-size:.95rem}
.pill.ghost{background:none;color:var(--text);border:1px solid #3b2d6b}
.dia{width:1em;height:1em;vertical-align:-.12em;fill:var(--blue)}
.np-gold{border-color:#f5c542!important;box-shadow:0 0 1.1rem rgba(245,197,66,.45)}
.np-emerald{border-color:#34d399!important;box-shadow:0 0 1.1rem rgba(52,211,153,.45)}
.np-royal{border-color:#a855f7!important;box-shadow:0 0 1.1rem rgba(168,85,247,.5),inset 0 0 .8rem rgba(168,85,247,.25)}
.seat[data-user]{cursor:pointer}.seat[data-user]:hover{border-color:var(--vio)}
.ach{background:#0e0a1c;border:1px solid var(--line);border-radius:.8rem;padding:.8rem 1rem}
.ach .ah{display:flex;justify-content:space-between;gap:1rem}
.bar{height:.4rem;background:#2a1f4d;border-radius:99px;margin:.5rem 0;overflow:hidden}.bar i{display:block;height:100%;background:var(--vio)}
.tiers{display:flex;gap:.25rem;flex-wrap:wrap}.tier{font-size:.75rem;border:1px solid var(--line);border-radius:99px;padding:.05rem .45rem;color:var(--mut)}
.tier.on{background:var(--vio);border-color:var(--vio);color:#090612;font-weight:700}
.items{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.8rem}
.item{background:#0e0a1c;border:1px solid var(--line);border-radius:.8rem;padding:1rem;display:grid;gap:.5rem;justify-items:center;text-align:center}
.item .gl{font-size:2rem;line-height:1}
.swatch{width:4rem;height:2.4rem;border-radius:.5rem;border:2px solid var(--line);background:#150f2b}
.dm{height:16rem;overflow:auto;display:grid;align-content:start;gap:.4rem;background:#0e0a1c;border:1px solid var(--line);border-radius:.8rem;padding:.6rem}
.dm div{max-width:80%;padding:.4rem .7rem;border-radius:.7rem;background:#2a1f4d;overflow-wrap:anywhere;justify-self:start}
.dm div.mine{justify-self:end;background:var(--vio);color:#090612}
.pillrow{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1rem}
.frow{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;border-top:1px solid var(--line)}.frow .nm{flex:1}
.kick{background:none;border:1px solid #6b3d57;color:#fda4af;border-radius:.5rem;padding:.1rem .6rem;font-size:.8rem;min-height:1.6rem}
.kick:hover{background:#3a1626}
.op .kick{grid-column:1;justify-self:start}
.tg{font-size:.7rem;padding:.05rem .45rem;border-radius:99px;font-weight:700;margin-left:.35rem;vertical-align:middle;color:#090612;white-space:nowrap}
.tg-owner{background:#f5c542}.tg-coowner{background:#fb923c}.tg-beta{background:#60a5fa}.tg-donor{background:#34d399}
#tour{width:100%;max-width:26rem;background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:.9rem 1.1rem}
#tour h2{font-size:1.25rem;margin:0 0 .6rem}
#totl{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.95rem}
#totl li{display:grid;grid-template-columns:1.4rem 1.8rem 1fr auto;gap:.6rem;align-items:center}
#totl .av{width:1.8rem;height:1.8rem;font-size:.85rem}
#totl .n{color:var(--mut)}#totl .c{color:var(--blue);font-weight:700}
.rl{margin:.3rem 0 1rem 1.2rem;padding:0;color:var(--mut);line-height:1.6}.rl li{margin:.15rem 0}
.rankgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.6rem}
.hand.cheat{gap:0;padding:.9rem 1.4rem 0}.hand.cheat .cd{--cw:3.8rem;margin-left:-1.4rem}.hand.cheat .cd.sel{z-index:3}
.bs{background:#f87171;border-color:#f87171;color:#090612}
#invite{position:fixed;top:4.5rem;right:1rem;z-index:45;background:var(--panel);border:1px solid #6d4aff;border-radius:1rem;padding:.9rem 1.1rem;max-width:22rem;box-shadow:0 0 40px rgba(124,92,255,.35)}

.odds{width:100%;border-collapse:collapse}.odds td{padding:.35rem .5rem;border-top:1px solid var(--line,#2a1f4d)}.odds td:nth-child(2){color:var(--mut)}
.pkico{width:1.1rem;height:auto;max-height:1.55rem;vertical-align:middle;margin-right:.15rem;border-radius:.15rem}

#dealfx{position:fixed;inset:0;z-index:9999;background:#09061a;display:grid;place-items:center;cursor:pointer;transition:background .45s}
#dealfx.clear{background:rgba(9,6,18,0)}
#dealfx p{position:absolute;top:12%;margin:0;font-family:Syne,sans-serif;font-weight:800;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--text)}
#dealfx small{position:absolute;top:calc(12% + 3.6rem);color:var(--mut)}
.fxc{position:absolute;left:50%;top:50%;width:calc(3.6rem * var(--fxs,1));height:calc(5.04rem * var(--fxs,1));margin:calc(-2.52rem * var(--fxs,1)) 0 0 calc(-1.8rem * var(--fxs,1));border-radius:.4rem;border:1px solid rgba(255,255,255,.25);
  background:#3b2a7a center/cover no-repeat;box-shadow:0 2px 8px rgba(0,0,0,.45);will-change:transform}

#gname{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:1rem;padding:1.4rem;width:min(26rem,92vw)}
#gname::backdrop{background:rgba(5,3,12,.75)}
#gname h2{margin:0;font-family:Syne,sans-serif;font-size:1.5rem}
#gname .row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
#gname label{display:block;margin:0 0 .3rem}

#rj{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:1rem;padding:1.4rem;width:min(26rem,92vw)}
#rj::backdrop{background:rgba(5,3,12,.75)}
#rj h2{margin:0;font-family:Syne,sans-serif;font-size:1.5rem}
#rj .row{display:flex;gap:.6rem;flex-wrap:wrap}
#cardfx{position:fixed;inset:0;z-index:800;pointer-events:none;overflow:hidden}

/* ---- special card effects ---- */
#specfx{position:fixed;inset:0;z-index:850;pointer-events:none;overflow:hidden}
#specfx>*{position:fixed}
.sfx-flash{width:10rem;height:10rem;margin:0;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.85) 30%,rgba(255,255,255,0) 70%);opacity:0}
.sfx-fire{width:9rem;height:9rem;border-radius:50%;background:radial-gradient(circle,#fff 0%,#ffe27a 24%,#ff8a1f 52%,rgba(255,60,0,.0) 72%);opacity:0;mix-blend-mode:screen}
.sfx-ring{width:6rem;height:6rem;border-radius:50%;border:.28rem solid #fb923c;opacity:0;box-shadow:0 0 18px currentColor}
.sfx-spark{border-radius:50%;opacity:0;box-shadow:0 0 8px rgba(255,170,60,.9)}
.sfx-glyph{font-size:5.5rem;line-height:1;font-family:Syne,sans-serif;font-weight:800;opacity:0;text-shadow:0 0 22px rgba(103,232,249,.9)}
.sfx-beam{background:linear-gradient(to bottom,rgba(96,165,250,0),rgba(96,165,250,.42));border-radius:.6rem;opacity:0}
.sfx-chev{font-size:3rem;line-height:1;font-weight:800;color:#93c5fd;opacity:0;text-shadow:0 0 14px rgba(96,165,250,.95)}
.sfx-skip{font-size:3.2rem;line-height:1;color:#fca5a5;opacity:0;text-shadow:0 0 16px rgba(248,113,113,.95)}
.sfx-stamp{padding:.2rem .9rem;border:.28rem solid #ef4444;border-radius:.5rem;color:#ef4444;font-family:Syne,sans-serif;font-weight:800;font-size:2rem;letter-spacing:.08em;background:rgba(20,6,10,.6);opacity:0;white-space:nowrap;box-shadow:0 0 22px rgba(239,68,68,.6)}
.sfx-pill{transform:translate(-50%,0);opacity:0;padding:.3rem .9rem;border-radius:2rem;font-weight:700;font-size:.95rem;white-space:nowrap;background:rgba(20,14,40,.92);border:1px solid rgba(255,255,255,.2);color:#fff;box-shadow:0 4px 18px rgba(0,0,0,.45)}
.sfx-pill b{letter-spacing:.06em}
.sfx-pill.cy{border-color:#67e8f9;color:#a5f3fc}.sfx-pill.ice{border-color:#bfe3ff;color:#e0f2fe}.sfx-pill.blue{border-color:#60a5fa;color:#bfdbfe}
.sfx-pill.red{border-color:#ef4444;color:#fecaca}.sfx-pill.fire{border-color:#fb923c;color:#fed7aa}.sfx-pill.gold{border-color:#facc15;color:#fde68a}.sfx-pill.steel{border-color:#94a3b8;color:#e2e8f0}
/* Joker coin: a ridged chip. Heads is gold, tails is silver; each has a metal rim, a ring of ridged segments and a polished centre. */
.sfx-coinwrap{width:7rem;height:7rem;perspective:800px;opacity:0;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}
.sfx-coin{position:absolute;inset:0;transform-style:preserve-3d}
.sfx-face{--rim:#fde68a;--c1:#b7791f;--c2:#fde68a;--hi:#fff6c8;--mid:#facc15;--lo:#9a6412;--ink:#5a3d05;--glow:rgba(250,204,21,.55);
  position:absolute;inset:0;border-radius:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Syne,sans-serif;line-height:1;
  background:radial-gradient(circle 1.5rem at 40% 34%,var(--hi),transparent),radial-gradient(circle at 50% 50%,var(--mid) 0,var(--mid) 22%,var(--lo) 54%,var(--rim) 54.5% 56.5%,transparent 57%),repeating-conic-gradient(from 7.5deg,var(--c1) 0 15deg,var(--c2) 15deg 30deg);
  border:.34rem solid var(--rim);box-shadow:inset 0 0 0 .14rem var(--lo),inset 0 .35rem .6rem rgba(255,255,255,.35),inset 0 -.4rem .8rem rgba(0,0,0,.35),0 0 1.4rem var(--glow)}
.sfx-face::before{content:'';position:absolute;inset:.32rem;border-radius:50%;border:.1rem dashed rgba(255,255,255,.45);pointer-events:none}
.sfx-face::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:140% 0;animation:sfxshine 1.1s ease-in-out 1.6s forwards;pointer-events:none}
@keyframes sfxshine{to{background-position:-60% 0}}
.sfx-face b{position:relative;font-size:2.5rem;font-weight:800;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 0 rgba(0,0,0,.25);margin-top:.1rem}
.sfx-face i{position:relative;font-style:normal;font-size:.95rem;color:var(--ink);margin-top:.08rem;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.sfx-face small{position:relative;font-size:.5rem;letter-spacing:.2em;margin-top:.18rem;font-weight:800;color:var(--ink)}
.sfx-face.tails{--rim:#e2e8f0;--c1:#64748b;--c2:#e2e8f0;--hi:#ffffff;--mid:#cbd5e1;--lo:#64748b;--ink:#1e293b;--glow:rgba(203,213,225,.45);transform:rotateX(180deg)}
/* Per-pack Joker coins. The coin wrapper carries data-pack (the deck in play); the main pack (neon art) uses the neon coin below; the gold/silver chip above is the fallback for packs without their own coin (e.g. classic).
   Each face has an <em> layer that themes use for extra art. Galaxy, Red galaxy, Glitch and Hypnotic are animated. */
.sfx-face em{display:none;position:absolute;inset:0;border-radius:50%;pointer-events:none}
.sfx-coinwrap[data-pack] .sfx-face b,.sfx-coinwrap[data-pack] .sfx-face i,.sfx-coinwrap[data-pack] .sfx-face small{z-index:2}
.sfx-coinwrap[data-pack="main"] .sfx-face{--rim:#f0abfc;--ink:#fde7ff;--glow:rgba(217,70,239,.7);background:radial-gradient(circle at 50% 40%,#2a1d52,#150f2b 72%);border:.24rem solid var(--rim);box-shadow:0 0 .5rem var(--glow),0 0 1.6rem var(--glow),inset 0 0 .9rem var(--glow)}
.sfx-coinwrap[data-pack="main"] .sfx-face.tails{--rim:#60a5fa;--ink:#dbeafe;--glow:rgba(59,130,246,.7)}
.sfx-coinwrap[data-pack="main"] .sfx-face::before{inset:.5rem;border:.12rem solid var(--rim);opacity:.6;box-shadow:0 0 .45rem var(--glow),inset 0 0 .45rem var(--glow)}
.sfx-coinwrap[data-pack="main"] .sfx-face b,.sfx-coinwrap[data-pack="main"] .sfx-face i,.sfx-coinwrap[data-pack="main"] .sfx-face small{color:var(--ink);text-shadow:0 0 .3rem var(--rim),0 0 .9rem var(--glow)}
.sfx-coinwrap[data-pack="matrix"] .sfx-face{--rim:#1fdc6e;--ink:#3dff8f;--glow:rgba(0,255,110,.55);background:repeating-linear-gradient(90deg,rgba(31,220,110,.16) 0 .12rem,transparent .12rem .55rem),radial-gradient(circle,#03110a,#010302 75%);border:.22rem solid var(--rim);box-shadow:0 0 1.2rem var(--glow),inset 0 0 .9rem rgba(0,255,110,.3)}
.sfx-coinwrap[data-pack="matrix"] .sfx-face.tails{--rim:#d6ffe6;--ink:#d6ffe6;--glow:rgba(214,255,230,.45)}
.sfx-coinwrap[data-pack="matrix"] .sfx-face::before{inset:.5rem;border:.1rem dashed var(--rim);opacity:.55}
.sfx-coinwrap[data-pack="matrix"] .sfx-face b,.sfx-coinwrap[data-pack="matrix"] .sfx-face i,.sfx-coinwrap[data-pack="matrix"] .sfx-face small{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink);text-shadow:0 0 .4rem var(--glow)}
.sfx-coinwrap[data-pack="retrowave"] .sfx-face{--rim:#ff2bd6;--ink:#140f35;--glow:rgba(255,43,214,.6);background:repeating-linear-gradient(to bottom,transparent 0 .42rem,#140f35 .42rem .58rem) bottom/100% 23% no-repeat,linear-gradient(#ffe27a,#ff7a7a 50%,#ff2bd6);border:.24rem solid var(--rim);box-shadow:0 0 1.2rem var(--glow),0 0 0 .14rem #4de3ff,inset 0 0 .6rem rgba(255,255,255,.35)}
.sfx-coinwrap[data-pack="retrowave"] .sfx-face.tails{--rim:#4de3ff;--glow:rgba(77,227,255,.55);background:repeating-linear-gradient(to bottom,transparent 0 .42rem,#140f35 .42rem .58rem) bottom/100% 23% no-repeat,linear-gradient(#ff2bd6,#d98bff 55%,#4de3ff);box-shadow:0 0 1.2rem var(--glow),0 0 0 .14rem #ff2bd6,inset 0 0 .6rem rgba(255,255,255,.35)}
.sfx-coinwrap[data-pack="retrowave"] .sfx-face::before{display:none}
.sfx-coinwrap[data-pack="retrowave"] .sfx-face b,.sfx-coinwrap[data-pack="retrowave"] .sfx-face i,.sfx-coinwrap[data-pack="retrowave"] .sfx-face small{color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.sfx-coinwrap[data-pack="steampunk"] .sfx-face{--rim:#c4943a;--t1:#6b4518;--t2:#f6dc8c;--hi:#fff6c8;--mid:#e3b45a;--lo:#7a4c1c;--ink:#2a1608;--glow:rgba(196,148,58,.5);background:radial-gradient(circle 1.5rem at 40% 34%,var(--hi),transparent),radial-gradient(circle at 50% 50%,var(--mid) 0 24%,var(--lo) 52%,#2a1608 52.5% 54.5%,transparent 55%),repeating-conic-gradient(var(--t1) 0 6deg,var(--t2) 6deg 12deg);border:.3rem solid var(--rim);box-shadow:inset 0 0 0 .16rem #2a1608,inset 0 .3rem .6rem rgba(255,255,255,.3),0 0 1.2rem var(--glow)}
.sfx-coinwrap[data-pack="steampunk"] .sfx-face.tails{--rim:#b4532a;--t1:#4e1d0a;--t2:#f0a070;--hi:#ffd9bd;--mid:#c8683a;--lo:#5a1f0c;--glow:rgba(180,83,42,.5)}
.sfx-coinwrap[data-pack="steampunk"] .sfx-face::before{inset:.28rem;border:0;background:radial-gradient(circle .2rem at 50% 9%,#fff2c0,#c4943a 45%,#4a2c0c 70%,transparent 75%),radial-gradient(circle .2rem at 91% 50%,#fff2c0,#c4943a 45%,#4a2c0c 70%,transparent 75%),radial-gradient(circle .2rem at 50% 91%,#fff2c0,#c4943a 45%,#4a2c0c 70%,transparent 75%),radial-gradient(circle .2rem at 9% 50%,#fff2c0,#c4943a 45%,#4a2c0c 70%,transparent 75%),radial-gradient(circle .2rem at 21% 21%,#fff2c0,#c4943a 45%,#4a2c0c 70%,transparent 75%),radial-gradient(circle .2rem at 79% 21%,#fff2c0,#c4943a 45%,#4a2c0c 70%,transparent 75%),radial-gradient(circle .2rem at 79% 79%,#fff2c0,#c4943a 45%,#4a2c0c 70%,transparent 75%),radial-gradient(circle .2rem at 21% 79%,#fff2c0,#c4943a 45%,#4a2c0c 70%,transparent 75%)}
.sfx-coinwrap[data-pack="steampunk"] .sfx-face b,.sfx-coinwrap[data-pack="steampunk"] .sfx-face i,.sfx-coinwrap[data-pack="steampunk"] .sfx-face small{color:var(--ink);text-shadow:0 1px 0 rgba(255,240,200,.6),0 -1px 0 rgba(0,0,0,.3)}
.sfx-coinwrap[data-pack="cyber"] .sfx-face{--rim:#3dff86;--ink:#3dff86;--glow:rgba(61,255,134,.55);background:radial-gradient(circle,rgba(61,255,134,.35) .05rem,transparent .08rem) 0 0/.38rem .38rem,radial-gradient(circle,#04140b,#010603 75%);border:.2rem solid var(--rim);box-shadow:0 0 1.1rem var(--glow),inset 0 0 .9rem rgba(61,255,134,.25)}
.sfx-coinwrap[data-pack="cyber"] .sfx-face.tails{--rim:#ff4d7d;--ink:#ff4d7d;--glow:rgba(255,77,125,.55);background:radial-gradient(circle,rgba(255,77,125,.35) .05rem,transparent .08rem) 0 0/.38rem .38rem,radial-gradient(circle,#140409,#060103 75%);box-shadow:0 0 1.1rem var(--glow),inset 0 0 .9rem rgba(255,77,125,.25)}
.sfx-coinwrap[data-pack="cyber"] .sfx-face::before{inset:.45rem;border:.14rem dashed var(--rim);opacity:.7}
.sfx-coinwrap[data-pack="cyber"] .sfx-face b,.sfx-coinwrap[data-pack="cyber"] .sfx-face i,.sfx-coinwrap[data-pack="cyber"] .sfx-face small{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink);text-shadow:0 0 .35rem var(--glow)}
.sfx-coinwrap[data-pack="holy"] .sfx-face{--rim:#5a4334;--ink:#17100c;--glow:rgba(255,211,106,.6);background:radial-gradient(circle at 50% 50%,#fffbe6 0,#ffe08a 30%,#e59a1f 57%,#17100c 57.5% 59.5%,transparent 60%),conic-gradient(from 8deg,#2b5fd9 0.0deg 28.4deg,#17100c 28.4deg 30.0deg,#b01e3a 30.0deg 58.4deg,#17100c 58.4deg 60.0deg,#e59a1f 60.0deg 88.4deg,#17100c 88.4deg 90.0deg,#7a3fd1 90.0deg 118.4deg,#17100c 118.4deg 120.0deg,#1f8f8a 120.0deg 148.4deg,#17100c 148.4deg 150.0deg,#d8452b 150.0deg 178.4deg,#17100c 178.4deg 180.0deg,#2b5fd9 180.0deg 208.4deg,#17100c 208.4deg 210.0deg,#b01e3a 210.0deg 238.4deg,#17100c 238.4deg 240.0deg,#e59a1f 240.0deg 268.4deg,#17100c 268.4deg 270.0deg,#7a3fd1 270.0deg 298.4deg,#17100c 298.4deg 300.0deg,#1f8f8a 300.0deg 328.4deg,#17100c 328.4deg 330.0deg,#d8452b 330.0deg 358.4deg,#17100c 358.4deg 360.0deg);border:.3rem solid var(--rim);box-shadow:inset 0 0 0 .12rem #ffd36a,0 0 1.3rem var(--glow)}
.sfx-coinwrap[data-pack="holy"] .sfx-face.tails{background:radial-gradient(circle at 50% 42%,#eef4ff 0,#9fb6ff 30%,#3d4fd6 57%,#17100c 57.5% 59.5%,transparent 60%),conic-gradient(from 8deg,#2b5fd9 0.0deg 28.4deg,#17100c 28.4deg 30.0deg,#b01e3a 30.0deg 58.4deg,#17100c 58.4deg 60.0deg,#e59a1f 60.0deg 88.4deg,#17100c 88.4deg 90.0deg,#7a3fd1 90.0deg 118.4deg,#17100c 118.4deg 120.0deg,#1f8f8a 120.0deg 148.4deg,#17100c 148.4deg 150.0deg,#d8452b 150.0deg 178.4deg,#17100c 178.4deg 180.0deg,#2b5fd9 180.0deg 208.4deg,#17100c 208.4deg 210.0deg,#b01e3a 210.0deg 238.4deg,#17100c 238.4deg 240.0deg,#e59a1f 240.0deg 268.4deg,#17100c 268.4deg 270.0deg,#7a3fd1 270.0deg 298.4deg,#17100c 298.4deg 300.0deg,#1f8f8a 300.0deg 328.4deg,#17100c 328.4deg 330.0deg,#d8452b 330.0deg 358.4deg,#17100c 358.4deg 360.0deg);--glow:rgba(159,182,255,.55)}
.sfx-coinwrap[data-pack="holy"] .sfx-face::before{inset:.25rem;border:.1rem solid rgba(23,16,12,.8)}
.sfx-coinwrap[data-pack="holy"] .sfx-face b,.sfx-coinwrap[data-pack="holy"] .sfx-face i,.sfx-coinwrap[data-pack="holy"] .sfx-face small{color:var(--ink);text-shadow:0 0 .4rem rgba(255,255,255,.7)}
.sfx-coinwrap[data-pack="unholy"] .sfx-face{--rim:#4a2a20;--ink:#ffd166;--glow:rgba(232,52,12,.65);background:radial-gradient(circle at 50% 50%,#ffd166 0,#e8340c 28%,#7a0808 56%,#ffd166 56.5% 58.5%,#17100c 58.5% 60%,transparent 60.5%),conic-gradient(from 8deg,#ff7a1a 0.0deg 24.1deg,#17100c 24.1deg 25.7deg,#c81e0a 25.7deg 49.8deg,#17100c 49.8deg 51.4deg,#ffb23a 51.4deg 75.5deg,#17100c 75.5deg 77.1deg,#e8340c 77.1deg 101.3deg,#17100c 101.3deg 102.9deg,#ffd166 102.9deg 127.0deg,#17100c 127.0deg 128.6deg,#7a0808 128.6deg 152.7deg,#17100c 152.7deg 154.3deg,#ff7a1a 154.3deg 178.4deg,#17100c 178.4deg 180.0deg,#c81e0a 180.0deg 204.1deg,#17100c 204.1deg 205.7deg,#ffb23a 205.7deg 229.8deg,#17100c 229.8deg 231.4deg,#e8340c 231.4deg 255.5deg,#17100c 255.5deg 257.1deg,#ffd166 257.1deg 281.3deg,#17100c 281.3deg 282.9deg,#7a0808 282.9deg 307.0deg,#17100c 307.0deg 308.6deg,#ff7a1a 308.6deg 332.7deg,#17100c 332.7deg 334.3deg,#c81e0a 334.3deg 358.4deg,#17100c 358.4deg 360.0deg);border:.3rem solid var(--rim);box-shadow:inset 0 0 0 .12rem #e8340c,0 0 1.4rem var(--glow)}
.sfx-coinwrap[data-pack="unholy"] .sfx-face.tails{--ink:#f1e3e8;background:radial-gradient(circle at 50% 42%,#9a8090 0,#2e1a28 30%,#0b0508 56%,#ffd166 56.5% 58.5%,#17100c 58.5% 60%,transparent 60.5%),conic-gradient(from 8deg,#ff7a1a 0.0deg 24.1deg,#17100c 24.1deg 25.7deg,#c81e0a 25.7deg 49.8deg,#17100c 49.8deg 51.4deg,#ffb23a 51.4deg 75.5deg,#17100c 75.5deg 77.1deg,#e8340c 77.1deg 101.3deg,#17100c 101.3deg 102.9deg,#ffd166 102.9deg 127.0deg,#17100c 127.0deg 128.6deg,#7a0808 128.6deg 152.7deg,#17100c 152.7deg 154.3deg,#ff7a1a 154.3deg 178.4deg,#17100c 178.4deg 180.0deg,#c81e0a 180.0deg 204.1deg,#17100c 204.1deg 205.7deg,#ffb23a 205.7deg 229.8deg,#17100c 229.8deg 231.4deg,#e8340c 231.4deg 255.5deg,#17100c 255.5deg 257.1deg,#ffd166 257.1deg 281.3deg,#17100c 281.3deg 282.9deg,#7a0808 282.9deg 307.0deg,#17100c 307.0deg 308.6deg,#ff7a1a 308.6deg 332.7deg,#17100c 332.7deg 334.3deg,#c81e0a 334.3deg 358.4deg,#17100c 358.4deg 360.0deg)}
.sfx-coinwrap[data-pack="unholy"] .sfx-face::before{inset:.25rem;border:.1rem solid rgba(23,16,12,.85)}
.sfx-coinwrap[data-pack="unholy"] .sfx-face b,.sfx-coinwrap[data-pack="unholy"] .sfx-face i,.sfx-coinwrap[data-pack="unholy"] .sfx-face small{color:var(--ink);text-shadow:0 0 .2rem #17100c,0 0 .2rem #17100c,0 0 .7rem rgba(232,52,12,.8)}
.sfx-coinwrap[data-pack="galaxy"] .sfx-face{--rim:#c084fc;--ink:#fff;--glow:rgba(192,132,252,.65);background:radial-gradient(circle,#1a0840,#04010f 75%);border:.22rem solid var(--rim);box-shadow:0 0 1.2rem var(--glow),inset 0 0 1rem var(--glow);animation:cg-pulse 2.4s ease-in-out infinite}
.sfx-coinwrap[data-pack="galaxy"] .sfx-face.tails{--rim:#8fa2ff;--glow:rgba(143,162,255,.65)}
.sfx-coinwrap[data-pack="galaxy"] .sfx-face em{display:block;inset:-25%;border-radius:0;background:radial-gradient(ellipse 60% 40% at 35% 35%,rgba(123,47,247,.75),transparent 70%),radial-gradient(ellipse 55% 45% at 68% 62%,rgba(255,107,240,.6),transparent 70%),radial-gradient(ellipse 35% 30% at 50% 50%,rgba(243,227,255,.6),transparent 70%),radial-gradient(ellipse 40% 30% at 25% 70%,rgba(75,107,255,.6),transparent 70%);animation:cg-spin 7s linear infinite}
.sfx-coinwrap[data-pack="galaxy"] .sfx-face::before{inset:0;border:0;background:radial-gradient(circle 0.07rem at 22% 30%,#fff,transparent),radial-gradient(circle 0.06rem at 70% 22%,#fff,transparent),radial-gradient(circle 0.08rem at 80% 62%,#fff,transparent),radial-gradient(circle 0.06rem at 30% 74%,#fff,transparent),radial-gradient(circle 0.05rem at 55% 85%,#fff,transparent),radial-gradient(circle 0.05rem at 40% 15%,#fff,transparent),radial-gradient(circle 0.06rem at 15% 55%,#fff,transparent),radial-gradient(circle 0.04rem at 62% 45%,#fff,transparent),radial-gradient(circle 0.05rem at 86% 38%,#fff,transparent);animation:cg-twinkle 1.7s ease-in-out infinite alternate;z-index:1}
.sfx-coinwrap[data-pack="galaxy"] .sfx-face b,.sfx-coinwrap[data-pack="galaxy"] .sfx-face i,.sfx-coinwrap[data-pack="galaxy"] .sfx-face small{color:var(--ink);text-shadow:0 0 .35rem var(--rim),0 0 1rem var(--glow)}
.sfx-coinwrap[data-pack="galaxy-red"] .sfx-face{--rim:#ff6b6b;--ink:#fff;--glow:rgba(255,59,78,.65);background:radial-gradient(circle,#3a0509,#0a0103 75%);border:.22rem solid var(--rim);box-shadow:0 0 1.2rem var(--glow),inset 0 0 1rem var(--glow);animation:cg-pulse 2.4s ease-in-out infinite}
.sfx-coinwrap[data-pack="galaxy-red"] .sfx-face.tails{--rim:#ffc77a;--glow:rgba(255,179,138,.65)}
.sfx-coinwrap[data-pack="galaxy-red"] .sfx-face em{display:block;inset:-25%;border-radius:0;background:radial-gradient(ellipse 60% 40% at 35% 35%,rgba(255,42,61,.75),transparent 70%),radial-gradient(ellipse 55% 45% at 68% 62%,rgba(255,106,43,.6),transparent 70%),radial-gradient(ellipse 35% 30% at 50% 50%,rgba(255,230,214,.6),transparent 70%),radial-gradient(ellipse 40% 30% at 25% 70%,rgba(179,0,27,.7),transparent 70%);animation:cg-spin 7s linear infinite}
.sfx-coinwrap[data-pack="galaxy-red"] .sfx-face::before{inset:0;border:0;background:radial-gradient(circle 0.07rem at 22% 30%,#fff,transparent),radial-gradient(circle 0.06rem at 70% 22%,#fff,transparent),radial-gradient(circle 0.08rem at 80% 62%,#fff,transparent),radial-gradient(circle 0.06rem at 30% 74%,#fff,transparent),radial-gradient(circle 0.05rem at 55% 85%,#fff,transparent),radial-gradient(circle 0.05rem at 40% 15%,#fff,transparent),radial-gradient(circle 0.06rem at 15% 55%,#fff,transparent),radial-gradient(circle 0.04rem at 62% 45%,#fff,transparent),radial-gradient(circle 0.05rem at 86% 38%,#fff,transparent);animation:cg-twinkle 1.7s ease-in-out infinite alternate;z-index:1}
.sfx-coinwrap[data-pack="galaxy-red"] .sfx-face b,.sfx-coinwrap[data-pack="galaxy-red"] .sfx-face i,.sfx-coinwrap[data-pack="galaxy-red"] .sfx-face small{color:var(--ink);text-shadow:0 0 .35rem var(--rim),0 0 1rem var(--glow)}
@keyframes cg-spin{to{transform:rotate(360deg)}}
@keyframes cg-twinkle{0%{opacity:.35}100%{opacity:1}}
@keyframes cg-pulse{0%,100%{box-shadow:0 0 .8rem var(--glow),inset 0 0 .8rem var(--glow)}50%{box-shadow:0 0 1.8rem var(--glow),inset 0 0 1.3rem var(--glow)}}
.sfx-coinwrap[data-pack="glitch"] .sfx-face{--rim:#f4f4f8;--ink:#f4f4f8;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),radial-gradient(circle,#15151c,#060609 75%);border:.2rem solid var(--rim);animation:cg-gl-rim 2.2s steps(1,end) infinite}
.sfx-coinwrap[data-pack="glitch"] .sfx-face.tails{--rim:#ff6b86;--ink:#ff6b86}
.sfx-coinwrap[data-pack="glitch"] .sfx-face::before{inset:.45rem;border:.1rem solid var(--rim);opacity:.4}
.sfx-coinwrap[data-pack="glitch"] .sfx-face em{display:block;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(0,229,255,.55) 30% 34%,transparent 34% 61%,rgba(255,42,85,.55) 61% 64%,transparent 64%);opacity:0;animation:cg-gl-bar 2.2s steps(1,end) infinite}
.sfx-coinwrap[data-pack="glitch"] .sfx-face b,.sfx-coinwrap[data-pack="glitch"] .sfx-face i,.sfx-coinwrap[data-pack="glitch"] .sfx-face small{color:var(--ink);text-shadow:-.12rem 0 #ff2a55,.12rem 0 #00e5ff;animation:cg-gl-txt 2.2s steps(1,end) infinite}
@keyframes cg-gl-txt{0%,70%,100%{transform:none;text-shadow:-.12rem 0 #ff2a55,.12rem 0 #00e5ff}74%{transform:translateX(.25rem) skewX(-8deg);text-shadow:-.35rem 0 #ff2a55,.3rem 0 #00e5ff}78%{transform:translateX(-.3rem);text-shadow:.3rem 0 #ff2a55,-.35rem 0 #00e5ff}82%{transform:translateX(.12rem) skewX(6deg)}86%{transform:none}}
@keyframes cg-gl-bar{0%,70%,90%,100%{opacity:0;transform:none}72%{opacity:1;transform:translateX(.6rem)}78%{transform:translateX(-.5rem)}84%{opacity:1;transform:translateX(.3rem)}}
@keyframes cg-gl-rim{0%,70%,100%{box-shadow:-.15rem 0 0 rgba(255,42,85,.7),.15rem 0 0 rgba(0,229,255,.7),0 0 1rem rgba(255,255,255,.25)}74%{box-shadow:-.45rem 0 0 rgba(255,42,85,.85),.4rem 0 0 rgba(0,229,255,.85),0 0 1rem rgba(255,255,255,.25)}80%{box-shadow:.35rem 0 0 rgba(255,42,85,.85),-.4rem 0 0 rgba(0,229,255,.85),0 0 1rem rgba(255,255,255,.25)}}
.sfx-coinwrap[data-pack="hypnotic"] .sfx-face{--rim:#f1ece2;--ink:#f1ece2;background:#0b0a0c;border:.22rem solid #0b0a0c;box-shadow:0 0 0 .12rem var(--rim),0 0 1.2rem rgba(241,236,226,.35)}
.sfx-coinwrap[data-pack="hypnotic"] .sfx-face em{display:block;inset:-12%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%230b0a0c'/%3E%3Cpath d='M50.0 50.0L51.1 50.1L51.9 50.5L52.2 50.8L52.0 51.0L51.5 51.0L50.9 50.8L50.5 50.6L50.3 50.5L50.4 50.7L50.5 51.2L50.5 51.9L50.3 52.5L50.0 52.7L49.7 52.6L49.5 52.2L49.4 51.7L49.3 51.4L49.1 51.3L48.7 51.6L47.8 52.0L46.7 52.4L45.5 52.4L44.6 52.2L44.1 51.6L44.2 50.8L44.7 50.1L45.4 49.6L46.1 49.1L46.4 48.7L46.4 48.2L46.2 47.5L46.0 46.6L46.0 45.7L46.3 45.0L46.9 44.5L47.7 44.4L48.5 44.5L49.2 44.6L49.8 44.4L50.5 43.9L51.4 43.2L52.6 42.4L53.9 42.0L55.1 42.0L56.1 42.6L56.7 43.6L56.8 44.9L56.7 46.1L56.6 47.2L56.8 48.0L57.2 48.8L57.9 49.7L58.7 50.7L59.3 51.9L59.5 53.1L59.1 54.3L58.4 55.2L57.5 56.0L56.6 56.8L55.8 57.6L55.1 58.7L54.4 59.9L53.4 61.2L52.2 62.3L50.7 63.0L49.1 62.9L47.7 62.2L46.5 61.2L45.5 60.0L44.6 58.9L43.6 58.1L42.4 57.6L40.9 57.1L39.3 56.5L37.9 55.5L36.8 54.2L36.2 52.6L36.1 50.9L36.4 49.2L36.8 47.7L37.1 46.1L37.3 44.4L37.5 42.6L37.9 40.7L38.6 38.8L39.8 37.3L41.5 36.3L43.4 35.8L45.4 35.9L47.2 36.1L49.0 36.3L50.6 36.2L52.4 35.8L54.3 35.3L56.4 34.9L58.7 35.0L60.7 35.7L62.5 37.0L63.8 38.7L64.8 40.6L65.5 42.6L66.2 44.5L67.0 46.4L67.9 48.4L68.6 50.6L69.0 52.9L68.8 55.3L67.9 57.4L66.4 59.3L64.6 60.8L62.8 62.0L61.1 63.3L59.6 64.7L58.1 66.4L56.4 68.2L54.4 69.9L52.1 71.2L49.5 71.9L46.9 71.7L44.4 70.9L42.1 69.7L40.0 68.2L38.0 66.7L35.9 65.3L33.8 63.8L31.8 62.2L30.0 60.1L28.6 57.7L28.0 55.1L27.9 52.4L28.4 49.7L29.0 47.2L29.6 44.7L30.0 42.2L30.4 39.5L30.9 36.6L31.8 33.7L33.3 30.9L35.5 28.7L38.1 27.2L41.1 26.3L44.2 26.0L47.1 26.0L50.0 26.1L52.9 26.1L55.9 26.2L58.9 26.5L61.9 27.2L64.7 28.5L67.2 30.4L69.2 32.8L70.8 35.5L72.1 38.2L73.3 41.0L74.7 43.7L76.1 46.6L77.4 49.7L78.3 53.1L78.4 56.7L77.7 60.1L76.1 63.3L73.8 66.0L71.2 68.3L68.5 70.2L65.8 72.1L63.1 73.9L60.3 75.8L57.3 77.6L54.1 78.9L50.6 79.6L47.0 79.6L43.6 78.8L40.3 77.5L37.1 76.0L34.1 74.3L31.0 72.6L27.8 70.7L24.7 68.5L21.9 65.8L19.6 62.5L18.2 58.8L17.7 54.9L18.1 51.0L19.0 47.2L20.1 43.7L21.3 40.2L22.4 36.7L23.7 33.2L25.3 29.6L27.3 26.2L30.0 23.3L33.3 20.9L36.9 19.2L40.8 18.1L44.7 17.5L48.6 17.0L52.6 16.7L56.7 16.5L61.0 16.7L65.2 17.6L69.2 19.2L72.8 21.7L75.7 25.0L77.9 28.7L79.6 32.6L81.0 36.4L82.2 40.3L83.5 44.1L84.8 48.2L85.7 52.4L86.0 56.8L85.6 61.3L84.2 65.6L82.0 69.5L79.2 73.0L76.0 76.1L72.7 79.0L69.2 81.8L65.5 84.5L61.5 86.8L57.2 88.5L52.5 89.5L47.8 89.4L43.2 88.4L38.8 86.6L34.8 84.4L31.0 82.0L27.3 79.5L23.6 76.9L19.8 74.1L16.2 70.9L13.1 67.1L10.7 62.8L9.2 58.0L8.7 53.1L9.0 48.1L9.9 43.3L11.1 38.6L12.6 33.9L14.3 29.3L16.5 24.8L19.4 20.6L22.9 16.9L27.1 14.0L31.8 11.9L36.7 10.6L41.6 9.8L46.5 9.4L51.4 9.1L56.4 8.9L61.6 9.0L66.8 9.6L72.0 11.1L76.9 13.5L81.1 16.9L84.7 21.0L87.5 25.7L89.7 30.5L91.5 35.5L93.0 40.6L94.3 45.7L95.1 51.1L95.2 56.6L94.4 62.0L92.6 67.2L90.0 72.0L86.6 76.4L82.9 80.3L78.9 83.9L74.8 87.4L70.5 90.7L65.9 93.9L60.7 96.6L55.2 98.4L49.3 99.2L43.5 98.7L37.8 97.2L32.5 94.8L27.5 91.9L22.8 88.6L18.3 85.2L14.0 81.4L10.0 77.2L6.5 72.5L3.7 67.3L1.9 61.6L1.1 55.8L1.2 49.9L1.8 44.1L2.9 38.4L4.3 32.7L6.0 27.0L8.2 21.3L11.2 15.8L15.0 10.8L19.8 6.6L25.3 3.5L31.2 1.4L37.4 0.2L43.5 -0.3L49.6 -0.4L55.6 -0.2L61.7 0.3L67.8 1.4L73.8 3.2L79.6 6.0L84.7 9.7L89.2 14.3L92.9 19.4L96.1 24.9L98.8 30.6L101.1 36.4L103.1 42.6L104.6 49.0L105.2 55.6L104.8 62.3L103.1 68.8L100.2 74.9L96.3 80.4L91.7 85.2L86.8 89.5L81.6 93.4L76.3 97.0L70.7 100.4L64.8 103.3L58.4 105.5L51.7 106.8L44.9 106.8L38.1 105.7L31.6 103.7L25.4 100.8L19.5 97.5L13.8 93.8L8.4 89.6L3.3 84.8L-1.2 79.4L-4.9 73.2L-7.3 66.5L-8.5 59.5L-8.5 52.4L-7.6 45.4L-6.0 38.7L-4.1 32.1L-1.9 25.6L0.7 19.2L4.0 12.9L8.1 6.9L13.2 1.7L19.1 -2.6L25.6 -5.9L32.6 -8.1L39.7 -9.5L46.9 -10.2L54.1 -10.4L61.4 -10.0L68.8 -8.9L75.9 -6.8L82.8 -3.6L88.9 0.7L94.3 6.0L98.7 12.0L102.3 18.5L105.3 25.2L107.8 32.0L110.1 38.9L111.9 46.1L113.0 53.6L113.1 61.3L111.9 69.0L109.4 76.4L105.7 83.2L101.0 89.4L95.7 95.0L89.8 100.0L83.6 104.5L77.1 108.5L70.1 111.9L62.6 114.5L54.8 115.9L46.9 116.0L39.1 114.7L31.6 112.4L24.5 109.2L17.7 105.5L11.2 101.3L4.9 96.8L-1.1 91.7L-6.7 85.9L-11.5 79.3L-15.2 71.9L-17.5 64.0L-18.4 55.8L-18.1 47.5L-16.8 39.5L-14.8 31.7L-12.1 24.0L-8.9 16.6L-5.0 9.4L-0.2 2.7L5.6 -3.3L12.3 -8.2L19.7 -12.1L27.5 -14.8L35.5 -16.6L43.6 -17.7L51.7 -18.3L60.0 -18.3L68.4 -17.6L76.7 -15.9L84.9 -13.1L92.5 -8.9L99.2 -3.4L105.0 3.2L109.6 10.5L113.4 18.2L116.4 26.1L118.8 34.2L120.6 42.5' fill='none' stroke='%23f1ece2' stroke-width='4.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100%;animation:cg-spin 3.2s linear infinite reverse}
.sfx-coinwrap[data-pack="hypnotic"] .sfx-face.tails em{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%230b0a0c'/%3E%3Cpath d='M50.0 50.0L51.1 50.1L51.9 50.5L52.2 50.8L52.0 51.0L51.5 51.0L50.9 50.8L50.5 50.6L50.3 50.5L50.4 50.7L50.5 51.2L50.5 51.9L50.3 52.5L50.0 52.7L49.7 52.6L49.5 52.2L49.4 51.7L49.3 51.4L49.1 51.3L48.7 51.6L47.8 52.0L46.7 52.4L45.5 52.4L44.6 52.2L44.1 51.6L44.2 50.8L44.7 50.1L45.4 49.6L46.1 49.1L46.4 48.7L46.4 48.2L46.2 47.5L46.0 46.6L46.0 45.7L46.3 45.0L46.9 44.5L47.7 44.4L48.5 44.5L49.2 44.6L49.8 44.4L50.5 43.9L51.4 43.2L52.6 42.4L53.9 42.0L55.1 42.0L56.1 42.6L56.7 43.6L56.8 44.9L56.7 46.1L56.6 47.2L56.8 48.0L57.2 48.8L57.9 49.7L58.7 50.7L59.3 51.9L59.5 53.1L59.1 54.3L58.4 55.2L57.5 56.0L56.6 56.8L55.8 57.6L55.1 58.7L54.4 59.9L53.4 61.2L52.2 62.3L50.7 63.0L49.1 62.9L47.7 62.2L46.5 61.2L45.5 60.0L44.6 58.9L43.6 58.1L42.4 57.6L40.9 57.1L39.3 56.5L37.9 55.5L36.8 54.2L36.2 52.6L36.1 50.9L36.4 49.2L36.8 47.7L37.1 46.1L37.3 44.4L37.5 42.6L37.9 40.7L38.6 38.8L39.8 37.3L41.5 36.3L43.4 35.8L45.4 35.9L47.2 36.1L49.0 36.3L50.6 36.2L52.4 35.8L54.3 35.3L56.4 34.9L58.7 35.0L60.7 35.7L62.5 37.0L63.8 38.7L64.8 40.6L65.5 42.6L66.2 44.5L67.0 46.4L67.9 48.4L68.6 50.6L69.0 52.9L68.8 55.3L67.9 57.4L66.4 59.3L64.6 60.8L62.8 62.0L61.1 63.3L59.6 64.7L58.1 66.4L56.4 68.2L54.4 69.9L52.1 71.2L49.5 71.9L46.9 71.7L44.4 70.9L42.1 69.7L40.0 68.2L38.0 66.7L35.9 65.3L33.8 63.8L31.8 62.2L30.0 60.1L28.6 57.7L28.0 55.1L27.9 52.4L28.4 49.7L29.0 47.2L29.6 44.7L30.0 42.2L30.4 39.5L30.9 36.6L31.8 33.7L33.3 30.9L35.5 28.7L38.1 27.2L41.1 26.3L44.2 26.0L47.1 26.0L50.0 26.1L52.9 26.1L55.9 26.2L58.9 26.5L61.9 27.2L64.7 28.5L67.2 30.4L69.2 32.8L70.8 35.5L72.1 38.2L73.3 41.0L74.7 43.7L76.1 46.6L77.4 49.7L78.3 53.1L78.4 56.7L77.7 60.1L76.1 63.3L73.8 66.0L71.2 68.3L68.5 70.2L65.8 72.1L63.1 73.9L60.3 75.8L57.3 77.6L54.1 78.9L50.6 79.6L47.0 79.6L43.6 78.8L40.3 77.5L37.1 76.0L34.1 74.3L31.0 72.6L27.8 70.7L24.7 68.5L21.9 65.8L19.6 62.5L18.2 58.8L17.7 54.9L18.1 51.0L19.0 47.2L20.1 43.7L21.3 40.2L22.4 36.7L23.7 33.2L25.3 29.6L27.3 26.2L30.0 23.3L33.3 20.9L36.9 19.2L40.8 18.1L44.7 17.5L48.6 17.0L52.6 16.7L56.7 16.5L61.0 16.7L65.2 17.6L69.2 19.2L72.8 21.7L75.7 25.0L77.9 28.7L79.6 32.6L81.0 36.4L82.2 40.3L83.5 44.1L84.8 48.2L85.7 52.4L86.0 56.8L85.6 61.3L84.2 65.6L82.0 69.5L79.2 73.0L76.0 76.1L72.7 79.0L69.2 81.8L65.5 84.5L61.5 86.8L57.2 88.5L52.5 89.5L47.8 89.4L43.2 88.4L38.8 86.6L34.8 84.4L31.0 82.0L27.3 79.5L23.6 76.9L19.8 74.1L16.2 70.9L13.1 67.1L10.7 62.8L9.2 58.0L8.7 53.1L9.0 48.1L9.9 43.3L11.1 38.6L12.6 33.9L14.3 29.3L16.5 24.8L19.4 20.6L22.9 16.9L27.1 14.0L31.8 11.9L36.7 10.6L41.6 9.8L46.5 9.4L51.4 9.1L56.4 8.9L61.6 9.0L66.8 9.6L72.0 11.1L76.9 13.5L81.1 16.9L84.7 21.0L87.5 25.7L89.7 30.5L91.5 35.5L93.0 40.6L94.3 45.7L95.1 51.1L95.2 56.6L94.4 62.0L92.6 67.2L90.0 72.0L86.6 76.4L82.9 80.3L78.9 83.9L74.8 87.4L70.5 90.7L65.9 93.9L60.7 96.6L55.2 98.4L49.3 99.2L43.5 98.7L37.8 97.2L32.5 94.8L27.5 91.9L22.8 88.6L18.3 85.2L14.0 81.4L10.0 77.2L6.5 72.5L3.7 67.3L1.9 61.6L1.1 55.8L1.2 49.9L1.8 44.1L2.9 38.4L4.3 32.7L6.0 27.0L8.2 21.3L11.2 15.8L15.0 10.8L19.8 6.6L25.3 3.5L31.2 1.4L37.4 0.2L43.5 -0.3L49.6 -0.4L55.6 -0.2L61.7 0.3L67.8 1.4L73.8 3.2L79.6 6.0L84.7 9.7L89.2 14.3L92.9 19.4L96.1 24.9L98.8 30.6L101.1 36.4L103.1 42.6L104.6 49.0L105.2 55.6L104.8 62.3L103.1 68.8L100.2 74.9L96.3 80.4L91.7 85.2L86.8 89.5L81.6 93.4L76.3 97.0L70.7 100.4L64.8 103.3L58.4 105.5L51.7 106.8L44.9 106.8L38.1 105.7L31.6 103.7L25.4 100.8L19.5 97.5L13.8 93.8L8.4 89.6L3.3 84.8L-1.2 79.4L-4.9 73.2L-7.3 66.5L-8.5 59.5L-8.5 52.4L-7.6 45.4L-6.0 38.7L-4.1 32.1L-1.9 25.6L0.7 19.2L4.0 12.9L8.1 6.9L13.2 1.7L19.1 -2.6L25.6 -5.9L32.6 -8.1L39.7 -9.5L46.9 -10.2L54.1 -10.4L61.4 -10.0L68.8 -8.9L75.9 -6.8L82.8 -3.6L88.9 0.7L94.3 6.0L98.7 12.0L102.3 18.5L105.3 25.2L107.8 32.0L110.1 38.9L111.9 46.1L113.0 53.6L113.1 61.3L111.9 69.0L109.4 76.4L105.7 83.2L101.0 89.4L95.7 95.0L89.8 100.0L83.6 104.5L77.1 108.5L70.1 111.9L62.6 114.5L54.8 115.9L46.9 116.0L39.1 114.7L31.6 112.4L24.5 109.2L17.7 105.5L11.2 101.3L4.9 96.8L-1.1 91.7L-6.7 85.9L-11.5 79.3L-15.2 71.9L-17.5 64.0L-18.4 55.8L-18.1 47.5L-16.8 39.5L-14.8 31.7L-12.1 24.0L-8.9 16.6L-5.0 9.4L-0.2 2.7L5.6 -3.3L12.3 -8.2L19.7 -12.1L27.5 -14.8L35.5 -16.6L43.6 -17.7L51.7 -18.3L60.0 -18.3L68.4 -17.6L76.7 -15.9L84.9 -13.1L92.5 -8.9L99.2 -3.4L105.0 3.2L109.6 10.5L113.4 18.2L116.4 26.1L118.8 34.2L120.6 42.5' fill='none' stroke='%23d1132f' stroke-width='4.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.sfx-coinwrap[data-pack="hypnotic"] .sfx-face.tails{--rim:#d1132f;--ink:#f1ece2}
.sfx-coinwrap[data-pack="hypnotic"] .sfx-face::before{inset:17%;border:.12rem solid var(--rim);background:#0b0a0c;z-index:1;animation:cg-br 2.4s ease-in-out infinite}
.sfx-coinwrap[data-pack="hypnotic"] .sfx-face b{font-size:1.8rem}.sfx-coinwrap[data-pack="hypnotic"] .sfx-face small{font-size:.42rem}
.sfx-coinwrap[data-pack="hypnotic"] .sfx-face b,.sfx-coinwrap[data-pack="hypnotic"] .sfx-face i,.sfx-coinwrap[data-pack="hypnotic"] .sfx-face small{color:var(--ink);z-index:1}
@keyframes cg-br{0%,100%{transform:scale(.94)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.sfx-coinwrap[data-pack] .sfx-face,.sfx-coinwrap[data-pack] .sfx-face *,.sfx-coinwrap[data-pack] .sfx-face::before{animation:none!important}}
@keyframes sfxshake{0%,100%{transform:none}15%{transform:translate(-6px,3px)}30%{transform:translate(5px,-4px)}45%{transform:translate(-4px,-2px)}60%{transform:translate(4px,3px)}80%{transform:translate(-2px,1px)}}
.sfx-shake{animation:sfxshake .45s linear}

/* ---- whose turn it is: a pulsing ring and a badge, in the player's name plate colour when they have one ---- */
.op,.me{position:relative;--ring:#60a5fa}
.op.turn::after,.me.turn::after{content:'';position:absolute;inset:-4px;border:2px solid var(--ring);border-radius:1.25rem;pointer-events:none;animation:turnring 1.5s ease-out infinite}
.op.turn::before,.me.turn::before{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);padding:.1rem .7rem;border-radius:1rem;background:var(--ring);color:#0b0818;font-weight:800;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;z-index:2}
.op.turn::before{content:'\25B6  Turn'}.me.turn::before{content:'Your turn'}
@keyframes turnring{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.07,1.16)}}
.np-gold{--ring:#f5c542}.np-emerald{--ring:#34d399}.np-royal{--ring:#a855f7}
.op.turn.np-gold,.me.turn.np-gold{box-shadow:0 0 1.9rem rgba(245,197,66,.55)}
.op.turn.np-emerald,.me.turn.np-emerald{box-shadow:0 0 1.9rem rgba(52,211,153,.55)}
.op.turn.np-royal,.me.turn.np-royal{box-shadow:0 0 1.9rem rgba(168,85,247,.6),inset 0 0 .8rem rgba(168,85,247,.25)}
@media (prefers-reduced-motion:reduce){.op.turn::after,.me.turn::after{animation:none;opacity:.6}}

/* ---- finishing banners ---- */
#endfx{position:fixed;inset:0;z-index:900;display:grid;place-content:center;justify-items:center;gap:.6rem;pointer-events:none;overflow:hidden;animation:efbg 4.2s ease both}
#endfx.win{background:radial-gradient(circle,rgba(245,197,66,.28),rgba(8,5,20,.78) 70%)}
#endfx.loss{background:radial-gradient(circle,rgba(120,72,30,.35),rgba(8,5,20,.82) 70%)}
.ef-ico{font-size:clamp(5rem,22vw,9rem);line-height:1;animation:efpop 4.2s cubic-bezier(.2,1.3,.3,1) both}
#endfx.win .ef-ico{filter:drop-shadow(0 0 1.5rem rgba(245,197,66,.9))}
#endfx.loss .ef-ico{animation-name:efdrop}
.ef-txt{font-weight:900;font-size:clamp(1.5rem,6vw,2.8rem);text-align:center;padding:0 1rem;animation:eftxt 4.2s ease both}
#endfx.win .ef-txt{color:#fde68a;text-shadow:0 0 1.2rem rgba(245,197,66,.8)}
#endfx.loss .ef-txt{color:#d6a86b}
.ef-rays{position:absolute;width:150vmax;height:150vmax;left:50%;top:50%;margin:-75vmax 0 0 -75vmax;background:repeating-conic-gradient(from 0deg,rgba(245,197,66,.22) 0 10deg,transparent 10deg 20deg);animation:efspin 4.2s linear both;-webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%)}
.ef-conf{position:absolute;top:-2rem;left:var(--x);width:.7rem;height:1.1rem;background:hsl(var(--h) 90% 60%);animation:efconf 2.8s var(--d) ease-in both}
@keyframes efbg{0%{opacity:0}10%,82%{opacity:1}100%{opacity:0}}
@keyframes efpop{0%{transform:translateY(-60vh) scale(.4) rotate(-25deg);opacity:0}25%{transform:none;opacity:1}30%{transform:scale(1.15)}36%,100%{transform:none;opacity:1}}
@keyframes efdrop{0%{transform:translateY(-60vh) scale(.5);opacity:0}22%{transform:translateY(0) scale(1.1,.85);opacity:1}30%{transform:scale(1)}100%{transform:none;opacity:1}}
@keyframes eftxt{0%,20%{opacity:0;transform:translateY(1rem)}35%,100%{opacity:1;transform:none}}
@keyframes efspin{to{transform:rotate(50deg)}}
@keyframes efconf{to{transform:translateY(110vh) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.ef-ico,.ef-rays,.ef-conf,.ef-txt{animation:none}}

/* ---- the 3: a see-through card ---- */
.sfx-ghostcard{border-radius:.4rem;border:1.5px solid rgba(120,175,240,.95);background:linear-gradient(135deg,rgba(90,150,230,.18),rgba(120,175,245,.42) 50%,rgba(90,150,230,.16));box-shadow:0 0 14px rgba(120,185,255,.7),inset 0 0 12px rgba(150,200,255,.6);opacity:0}
.sfx-ghostshine{border-radius:.4rem;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);background-size:60% 100%;background-repeat:no-repeat;background-position:-160% 0;opacity:0;transform:translate(-50%,-50%) scale(.8);mix-blend-mode:screen}
.sfx-mote{border-radius:50%;background:#e0f2fe;box-shadow:0 0 6px rgba(190,225,255,.95);opacity:0}

/* ---- more name plates: solid colours (200) ---- */
.np-crimson{--ring:#ef4444;border-color:#ef4444!important;box-shadow:0 0 1.1rem rgba(239,68,68,.45)}
.op.turn.np-crimson,.me.turn.np-crimson{box-shadow:0 0 1.9rem rgba(239,68,68,.55)}
.np-sapphire{--ring:#3b82f6;border-color:#3b82f6!important;box-shadow:0 0 1.1rem rgba(59,130,246,.45)}
.op.turn.np-sapphire,.me.turn.np-sapphire{box-shadow:0 0 1.9rem rgba(59,130,246,.55)}
.np-rose{--ring:#f472b6;border-color:#f472b6!important;box-shadow:0 0 1.1rem rgba(244,114,182,.45)}
.op.turn.np-rose,.me.turn.np-rose{box-shadow:0 0 1.9rem rgba(244,114,182,.55)}
.np-sunset{--ring:#fb923c;border-color:#fb923c!important;box-shadow:0 0 1.1rem rgba(251,146,60,.45)}
.op.turn.np-sunset,.me.turn.np-sunset{box-shadow:0 0 1.9rem rgba(251,146,60,.55)}
.np-lagoon{--ring:#2dd4bf;border-color:#2dd4bf!important;box-shadow:0 0 1.1rem rgba(45,212,191,.45)}
.op.turn.np-lagoon,.me.turn.np-lagoon{box-shadow:0 0 1.9rem rgba(45,212,191,.55)}
.np-lime{--ring:#a3e635;border-color:#a3e635!important;box-shadow:0 0 1.1rem rgba(163,230,53,.45)}
.op.turn.np-lime,.me.turn.np-lime{box-shadow:0 0 1.9rem rgba(163,230,53,.55)}
.np-silver{--ring:#cbd5e1;border-color:#cbd5e1!important;box-shadow:0 0 1.1rem rgba(203,213,225,.45)}
.op.turn.np-silver,.me.turn.np-silver{box-shadow:0 0 1.9rem rgba(203,213,225,.55)}

/* ---- animated name plates (300): pulse, glow and colour cycles ---- */
.np-heart{--ring:#fb7185;animation:npheart 1.3s ease-in-out infinite}
@keyframes npheart{0%,100%{border-color:#f43f5e;box-shadow:0 0 .5rem rgba(244,63,94,.3)}14%{border-color:#fda4af;box-shadow:0 0 1.9rem rgba(244,63,94,.9)}28%{border-color:#f43f5e;box-shadow:0 0 .7rem rgba(244,63,94,.4)}42%{border-color:#fda4af;box-shadow:0 0 1.6rem rgba(244,63,94,.8)}70%{border-color:#f43f5e;box-shadow:0 0 .5rem rgba(244,63,94,.3)}}
.np-neon{--ring:#22d3ee;animation:npneon 2.2s ease-in-out infinite}
@keyframes npneon{0%,100%{border-color:#22d3ee;box-shadow:0 0 .6rem rgba(34,211,238,.45),inset 0 0 .4rem rgba(34,211,238,.2)}50%{border-color:#a5f3fc;box-shadow:0 0 2.1rem rgba(34,211,238,.95),inset 0 0 1rem rgba(34,211,238,.35)}}
.np-aurora{--ring:#34d399;animation:npaurora 6s linear infinite}
@keyframes npaurora{0%,100%{border-color:#34d399;box-shadow:0 0 1.3rem rgba(52,211,153,.55)}33%{border-color:#22d3ee;box-shadow:0 0 1.3rem rgba(34,211,238,.55)}66%{border-color:#a78bfa;box-shadow:0 0 1.3rem rgba(167,139,250,.55)}}
.np-prism{--ring:#facc15;animation:npprism 5s linear infinite}
@keyframes npprism{0%,100%{border-color:#ef4444;box-shadow:0 0 1.3rem rgba(239,68,68,.55)}17%{border-color:#fb923c;box-shadow:0 0 1.3rem rgba(251,146,60,.55)}33%{border-color:#facc15;box-shadow:0 0 1.3rem rgba(250,204,21,.55)}50%{border-color:#4ade80;box-shadow:0 0 1.3rem rgba(74,222,128,.55)}67%{border-color:#60a5fa;box-shadow:0 0 1.3rem rgba(96,165,250,.55)}84%{border-color:#c084fc;box-shadow:0 0 1.3rem rgba(192,132,252,.55)}}
/* ---- animated plates ---- */
.np-ember,.np-frost,.np-comet,.np-venom,.np-sakura,.np-thunder,.swatch,.seat{position:relative}
.np-ember.turn::before,.np-frost.turn::before,.np-comet.turn::before,.np-venom.turn::before,.np-sakura.turn::before,.np-thunder.turn::before{z-index:6}
.fx{position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;z-index:4}
.fx b{position:absolute;left:var(--x);top:var(--y);opacity:0;animation-delay:var(--d);animation-iteration-count:infinite}
/* Ember: static ring of fire */
.np-ember{--ring:#f97316;border-color:#f97316!important;box-shadow:0 0 1.2rem rgba(249,115,22,.6)}
.op.turn.np-ember,.me.turn.np-ember{box-shadow:0 0 1.9rem rgba(249,115,22,.7)}
/* Ember flame ring: stacked glowing rings run through an animated turbulence filter so they lick up like one connected flame */
.svgdef{position:absolute;width:0;height:0;overflow:hidden}
.fx-ember s{position:absolute;inset:0;border-radius:inherit;filter:url(#flameF)}
.fx-ember u{position:absolute;border-radius:inherit;border-style:solid}
.fx-ember u:nth-child(1){inset:-.5rem;border-width:.6rem;border-color:rgba(220,38,38,.7);filter:blur(2.5px)}
.fx-ember u:nth-child(2){inset:-.36rem;border-width:.48rem;border-color:#f97316;filter:blur(1.5px)}
.fx-ember u:nth-child(3){inset:-.22rem;border-width:.34rem;border-color:#fbbf24;filter:blur(1px)}
.fx-ember u:nth-child(4){inset:-.1rem;border-width:.2rem;border-color:#fff1a8;filter:blur(.6px)}
.fx-ember b{z-index:1;width:var(--s);height:calc(var(--s)*1.6);margin:-.3rem 0 0 -.2rem;background:radial-gradient(circle at 50% 70%,#fff7c2 0,#fbbf24 40%,#f97316 75%,transparent 100%);border-radius:50% 50% 50% 50%/68% 68% 32% 32%;mix-blend-mode:screen;animation-name:emrise;animation-duration:var(--t);animation-timing-function:ease-out}
@keyframes emrise{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.15)}}
/* Frostbite: icy ring with glittering sparkles */
.np-frost{--ring:#a5f3fc;border-color:#a5f3fc;animation:npfrost 3.2s ease-in-out infinite}
@keyframes npfrost{0%,100%{border-color:#bae6fd;box-shadow:0 0 .9rem rgba(125,211,252,.45),inset 0 0 .6rem rgba(186,230,253,.12)}50%{border-color:#ecfeff;box-shadow:0 0 1.7rem rgba(165,243,252,.75),inset 0 0 1rem rgba(186,230,253,.22)}}
.fx-frost b{width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);background:radial-gradient(circle,#fff 0,#e0f7ff 25%,rgba(125,211,252,.0) 70%);clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);animation-name:emtwink;animation-duration:var(--t);animation-timing-function:ease-in-out}
@keyframes emtwink{0%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1;transform:scale(1) rotate(45deg)}100%{opacity:0;transform:translateY(.7rem) scale(.3) rotate(90deg)}}
/* Comet: two light arcs chasing round the border */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.np-comet{--ring:#7dd3fc;border-color:rgba(125,211,252,.35);box-shadow:0 0 1.2rem rgba(125,211,252,.35)}
.fx-comet{padding:2px;background:conic-gradient(from var(--a),transparent 0 62%,rgba(56,189,248,.15) 66%,#38bdf8 90%,#fff 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:emspin 2.6s linear infinite}
.fx-comet::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from calc(var(--a) + 180deg),transparent 0 74%,rgba(192,132,252,.2) 80%,#c084fc 96%,#fff 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@keyframes emspin{to{--a:360deg}}
/* Venom: toxic green glow with bubbles drifting off the top */
.np-venom{--ring:#84cc16;border-color:#84cc16;animation:npvenom 2.4s ease-in-out infinite}
@keyframes npvenom{0%,100%{border-color:#65a30d;box-shadow:0 0 .9rem rgba(132,204,22,.4)}50%{border-color:#bef264;box-shadow:0 0 1.8rem rgba(163,230,53,.75),0 .4rem 1.2rem rgba(132,204,22,.35)}}
.fx-venom b{top:0;width:var(--s);height:var(--s);margin-left:calc(var(--s)/-2);border-radius:50%;border:1.5px solid rgba(190,242,100,.9);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),rgba(163,230,53,.25) 60%,rgba(132,204,22,.1));animation-name:emfume;animation-duration:var(--t);animation-timing-function:ease-out}
@keyframes emfume{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:.95}85%{opacity:.6}100%{opacity:0;transform:translate(var(--dx),-2.6rem) scale(1.25)}}
/* Sakura: soft pink glow, petals falling past the plate */
.np-sakura{--ring:#f9a8d4;border-color:#f9a8d4;animation:npsakura 3.4s ease-in-out infinite}
@keyframes npsakura{0%,100%{border-color:#fbcfe8;box-shadow:0 0 1rem rgba(244,114,182,.4)}50%{border-color:#f472b6;box-shadow:0 0 1.7rem rgba(244,114,182,.7)}}
.fx-sakura b{top:0;width:var(--s);height:calc(var(--s)*.7);background:linear-gradient(135deg,#fff1f6,#f9a8d4 60%,#ec4899);border-radius:100% 0 100% 0;animation-name:emfall;animation-duration:var(--t);animation-timing-function:ease-in-out}
@keyframes emfall{0%{opacity:0;transform:translate(0,-.2rem) rotate(0)}12%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),3.2rem) rotate(var(--r))}}
/* Thunder: violet-white lightning cracking across the plate */
.np-thunder{--ring:#a78bfa;border-color:#8b5cf6;animation:npthunder 2.2s steps(1,end) infinite}
@keyframes npthunder{0%{border-color:#8b5cf6;box-shadow:0 0 1rem rgba(139,92,246,.45)}5%{border-color:#fff;box-shadow:0 0 2.4rem rgba(221,214,254,1)}8%{border-color:#6d28d9;box-shadow:0 0 .8rem rgba(109,40,217,.35)}11%{border-color:#ddd6fe;box-shadow:0 0 2rem rgba(196,181,253,.9)}15%{border-color:#8b5cf6;box-shadow:0 0 1rem rgba(139,92,246,.45)}60%{border-color:#fff;box-shadow:0 0 2.4rem rgba(221,214,254,1)}63%{border-color:#5b21b6;box-shadow:0 0 .8rem rgba(91,33,182,.3)}66%{border-color:#c4b5fd;box-shadow:0 0 1.8rem rgba(167,139,250,.85)}70%{border-color:#8b5cf6;box-shadow:0 0 1rem rgba(139,92,246,.45)}}
.fx-thunder svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 1.5px #ddd6fe) drop-shadow(0 0 5px #8b5cf6)}
.fx-thunder path{fill:none;stroke:#fff;stroke-width:1.7;vector-effect:non-scaling-stroke;stroke-linejoin:miter;stroke-linecap:round;opacity:0}
.fx-thunder path.a{animation:zapA 2.2s steps(1,end) infinite}
.fx-thunder path.b{animation:zapB 2.2s steps(1,end) infinite}
.fx-thunder path:nth-child(2){animation-delay:.03s}.fx-thunder path:nth-child(3){animation-delay:.07s}.fx-thunder path:nth-child(5){animation-delay:.03s}.fx-thunder path:nth-child(6){animation-delay:.06s}
@keyframes zapA{0%,4%{opacity:0}5%{opacity:1}7%{opacity:.25}9%{opacity:1}11%{opacity:.5}13%,100%{opacity:0}}
@keyframes zapB{0%,59%{opacity:0}60%{opacity:1}62%{opacity:.3}64%{opacity:1}67%{opacity:.4}69%,100%{opacity:0}}
.fx-ember b:nth-child(1){--x:8%;--y:0%;--s:0.4rem;--d:-0.17s;--t:1.34s;--dx:-0.18rem;--dy:-1.38rem}
.fx-ember b:nth-child(2){--x:31%;--y:0%;--s:0.32rem;--d:-1.07s;--t:1.42s;--dx:-0.02rem;--dy:-1.38rem}
.fx-ember b:nth-child(3){--x:49%;--y:0%;--s:0.4rem;--d:-1.12s;--t:1.77s;--dx:-0.19rem;--dy:-1.38rem}
.fx-ember b:nth-child(4){--x:71%;--y:0%;--s:0.32rem;--d:-0.34s;--t:1.29s;--dx:-0.21rem;--dy:-1.38rem}
.fx-ember b:nth-child(5){--x:91%;--y:0%;--s:0.6rem;--d:-0.59s;--t:1.57s;--dx:-0.13rem;--dy:-1.38rem}
.fx-ember b:nth-child(6){--x:100%;--y:22%;--s:0.4rem;--d:-1.15s;--t:1.50s;--dx:1.17rem;--dy:-0.44rem}
.fx-ember b:nth-child(7){--x:100%;--y:52%;--s:0.6rem;--d:-1.18s;--t:1.43s;--dx:1.12rem;--dy:-0.44rem}
.fx-ember b:nth-child(8){--x:100%;--y:83%;--s:0.32rem;--d:-1.27s;--t:1.35s;--dx:0.98rem;--dy:-0.44rem}
.fx-ember b:nth-child(9){--x:13%;--y:100%;--s:0.5rem;--d:-0.05s;--t:1.55s;--dx:-0.17rem;--dy:1.10rem}
.fx-ember b:nth-child(10){--x:31%;--y:100%;--s:0.32rem;--d:-1.52s;--t:1.41s;--dx:0.20rem;--dy:1.10rem}
.fx-ember b:nth-child(11){--x:48%;--y:100%;--s:0.32rem;--d:-0.38s;--t:1.84s;--dx:-0.20rem;--dy:1.10rem}
.fx-ember b:nth-child(12){--x:68%;--y:100%;--s:0.6rem;--d:-1.76s;--t:1.42s;--dx:-0.19rem;--dy:1.10rem}
.fx-ember b:nth-child(13){--x:93%;--y:100%;--s:0.4rem;--d:-1.40s;--t:1.32s;--dx:-0.18rem;--dy:1.10rem}
.fx-ember b:nth-child(14){--x:0%;--y:23%;--s:0.5rem;--d:-0.03s;--t:1.43s;--dx:-0.91rem;--dy:-0.44rem}
.fx-ember b:nth-child(15){--x:0%;--y:52%;--s:0.4rem;--d:-0.44s;--t:1.18s;--dx:-1.29rem;--dy:-0.44rem}
.fx-ember b:nth-child(16){--x:0%;--y:85%;--s:0.6rem;--d:-0.32s;--t:1.55s;--dx:-1.12rem;--dy:-0.44rem}
.fx-frost b:nth-child(1){--x:28%;--y:0%;--s:0.65rem;--d:-1.03s;--t:2.83s}
.fx-frost b:nth-child(2){--x:20%;--y:0%;--s:0.5rem;--d:-0.11s;--t:1.98s}
.fx-frost b:nth-child(3){--x:57%;--y:0%;--s:0.95rem;--d:-0.67s;--t:2.73s}
.fx-frost b:nth-child(4){--x:86%;--y:0%;--s:0.8rem;--d:-2.16s;--t:2.26s}
.fx-frost b:nth-child(5){--x:100%;--y:64%;--s:0.5rem;--d:-0.23s;--t:2.50s}
.fx-frost b:nth-child(6){--x:100%;--y:29%;--s:0.65rem;--d:-0.04s;--t:2.24s}
.fx-frost b:nth-child(7){--x:100%;--y:65%;--s:0.95rem;--d:-0.33s;--t:2.50s}
.fx-frost b:nth-child(8){--x:57%;--y:100%;--s:0.65rem;--d:-2.25s;--t:2.02s}
.fx-frost b:nth-child(9){--x:31%;--y:100%;--s:0.65rem;--d:-0.81s;--t:2.07s}
.fx-frost b:nth-child(10){--x:4%;--y:100%;--s:0.65rem;--d:-1.89s;--t:1.99s}
.fx-frost b:nth-child(11){--x:38%;--y:100%;--s:0.65rem;--d:-1.79s;--t:2.27s}
.fx-frost b:nth-child(12){--x:0%;--y:53%;--s:0.95rem;--d:-1.57s;--t:2.31s}
.fx-frost b:nth-child(13){--x:0%;--y:17%;--s:0.5rem;--d:-0.28s;--t:2.41s}
.fx-frost b:nth-child(14){--x:0%;--y:41%;--s:0.8rem;--d:-0.62s;--t:2.65s}
.fx-venom b:nth-child(1){--x:12%;--s:0.8rem;--d:-1.98s;--t:2.36s;--dx:-0.21rem}
.fx-venom b:nth-child(2){--x:20%;--s:0.35rem;--d:-0.30s;--t:2.23s;--dx:0.15rem}
.fx-venom b:nth-child(3){--x:32%;--s:0.35rem;--d:-0.67s;--t:2.71s;--dx:-0.30rem}
.fx-venom b:nth-child(4){--x:37%;--s:0.35rem;--d:-0.65s;--t:2.19s;--dx:-0.44rem}
.fx-venom b:nth-child(5){--x:47%;--s:0.65rem;--d:-0.89s;--t:2.33s;--dx:-0.37rem}
.fx-venom b:nth-child(6){--x:57%;--s:0.5rem;--d:-2.14s;--t:2.78s;--dx:0.16rem}
.fx-venom b:nth-child(7){--x:69%;--s:0.5rem;--d:-1.42s;--t:2.72s;--dx:-0.03rem}
.fx-venom b:nth-child(8){--x:75%;--s:0.65rem;--d:-2.31s;--t:1.72s;--dx:0.14rem}
.fx-venom b:nth-child(9){--x:85%;--s:0.35rem;--d:-1.75s;--t:2.05s;--dx:0.50rem}
.fx-venom b:nth-child(10){--x:91%;--s:0.8rem;--d:-1.31s;--t:2.51s;--dx:0.40rem}
.fx-sakura b:nth-child(1){--x:18%;--s:0.7rem;--d:-2.39s;--t:3.55s;--dx:0.82rem;--r:295deg}
.fx-sakura b:nth-child(2){--x:26%;--s:0.5rem;--d:-2.96s;--t:3.10s;--dx:-1.28rem;--r:266deg}
.fx-sakura b:nth-child(3){--x:33%;--s:0.7rem;--d:-2.25s;--t:3.06s;--dx:-1.05rem;--r:140deg}
.fx-sakura b:nth-child(4){--x:43%;--s:0.7rem;--d:-0.39s;--t:2.91s;--dx:1.16rem;--r:219deg}
.fx-sakura b:nth-child(5){--x:58%;--s:0.7rem;--d:-1.98s;--t:3.13s;--dx:-0.97rem;--r:251deg}
.fx-sakura b:nth-child(6){--x:63%;--s:0.6rem;--d:-2.04s;--t:3.18s;--dx:-1.36rem;--r:148deg}
.fx-sakura b:nth-child(7){--x:76%;--s:0.7rem;--d:-2.24s;--t:3.18s;--dx:-0.83rem;--r:156deg}
.fx-sakura b:nth-child(8){--x:88%;--s:0.7rem;--d:-0.69s;--t:2.80s;--dx:1.09rem;--r:233deg}
.fx-sakura b:nth-child(9){--x:96%;--s:0.5rem;--d:-1.11s;--t:3.40s;--dx:-1.07rem;--r:171deg}
@media (prefers-reduced-motion:reduce){
  .fx{display:none}
  .eg{animation:none!important}

  .np-frost,.np-venom,.np-sakura,.np-thunder{animation:none}
  .np-heart{animation:none;border-color:#fb7185!important;box-shadow:0 0 1.2rem rgba(244,63,94,.6)}
  .np-neon{animation:none;border-color:#22d3ee!important;box-shadow:0 0 1.4rem rgba(34,211,238,.7)}
  .np-aurora{animation:none;border-color:#34d399!important;box-shadow:0 0 1.3rem rgba(52,211,153,.55)}
  .np-prism{animation:none;border-color:#facc15!important;box-shadow:0 0 1.3rem rgba(250,204,21,.55)}
}

/* ---- spin wheels ---- */
.wheelwrap{position:relative;width:var(--sz);height:var(--sz);margin:1.2rem auto .4rem}
.wheel{position:absolute;inset:0;border-radius:50%;border:4px solid #4c3a8a;box-shadow:0 0 2rem rgba(139,92,246,.35),inset 0 0 1.5rem rgba(0,0,0,.45);will-change:transform}
.wchip{position:absolute;left:50%;top:50%;width:2.4rem;height:1.5rem;margin:-.75rem 0 0 -1.2rem;display:grid;place-items:center;transform:rotate(var(--a)) translateY(calc(var(--sz) / -2 + 1.7rem))}
.wchip .swatch{width:2.4rem;height:1.5rem;border-radius:.3rem;border-width:2px}
.wg{font-size:1.5rem;line-height:1}
.wptr{position:absolute;left:50%;top:-.7rem;transform:translateX(-50%);z-index:3;border:.7rem solid transparent;border-top:1.3rem solid #fbbf24;border-bottom:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.whub{position:absolute;left:50%;top:50%;width:4.4rem;height:4.4rem;margin:-2.2rem 0 0 -2.2rem;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:800;font-size:.9rem;letter-spacing:.04em;background:radial-gradient(circle at 35% 30%,#7c5bd6,#3b2a78);border:3px solid #fbbf24;color:#fff;z-index:2;box-shadow:0 0 1rem rgba(0,0,0,.5)}
.swatch.big{width:9rem;height:3.6rem;margin:1rem auto}
.wreveal{text-align:center;background:#0e0a1c;border:2px solid var(--line);border-radius:1rem;padding:1rem;margin:0 auto 1rem;max-width:26rem;animation:wpop .5s cubic-bezier(.2,1.4,.4,1)}
.wreveal .gl{font-size:3rem;line-height:1.2}
.wreveal.tier-rare{border-color:#60a5fa;box-shadow:0 0 1.5rem rgba(96,165,250,.45)}
.wreveal.tier-epic{border-color:#c084fc;box-shadow:0 0 2rem rgba(192,132,252,.6)}
.wreveal.tier-legend{border-color:#fbbf24;box-shadow:0 0 2.2rem rgba(251,191,36,.65)}
@keyframes wpop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.rar{font-size:.75rem;font-weight:700;padding:.1rem .45rem;border-radius:99px;border:1px solid currentColor}
.rar.r-common{color:#94a3b8}.rar.r-rare{color:#60a5fa}.rar.r-epic{color:#c084fc}.rar.r-legend{color:#fbbf24}

/* ---- rare emotes: glow, pulse, drawn halo and horns ---- */
.eg{display:inline-block;--c:#a78bfa}
.eg.gold{--c:#fbbf24}.eg.cyan{--c:#22d3ee}.eg.pink{--c:#f472b6}.eg.red{--c:#ef4444}.eg.green{--c:#4ade80}.eg.violet{--c:#a78bfa}.eg.white{--c:#f8fafc}.eg.blue{--c:#60a5fa}.eg.yellow{--c:#fde047}
.eg.neon{filter:drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 7px var(--c));animation:emneon 1.8s ease-in-out infinite alternate}
@keyframes emneon{from{filter:drop-shadow(0 0 1px var(--c)) drop-shadow(0 0 4px var(--c))}to{filter:drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 12px var(--c))}}
.eg.float{animation:emneon 1.8s ease-in-out infinite alternate,embob 2.4s ease-in-out infinite}
@keyframes embob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.18rem)}}
.eg.beat{animation:emneon 1.8s ease-in-out infinite alternate,embeat 1.1s ease-in-out infinite}
@keyframes embeat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
.eg.flicker{animation:emneon 1.8s ease-in-out infinite alternate,emflk 1.7s steps(1,end) infinite}
@keyframes emflk{0%,40%,46%,100%{opacity:1}42%{opacity:.25}44%{opacity:.8}70%{opacity:.4}72%{opacity:1}}
.eg.fade{animation:emneon 1.8s ease-in-out infinite alternate,emfade 2.6s ease-in-out infinite}
@keyframes emfade{0%,100%{opacity:1}50%{opacity:.35}}
.eg.strobe{animation:emneon 1.8s ease-in-out infinite alternate,emhue 2.4s linear infinite}
@keyframes emhue{to{filter:hue-rotate(360deg) drop-shadow(0 0 6px var(--c))}}
.eg.rainbow{animation:emhue 3s linear infinite}
.eg.fire{filter:drop-shadow(0 0 3px #f97316) drop-shadow(0 -2px 8px #ef4444);animation:emfire .45s ease-in-out infinite alternate;transform-origin:50% 100%}
.eg.fire.red{filter:drop-shadow(0 0 3px #ef4444) drop-shadow(0 -2px 9px #b91c1c)}
@keyframes emfire{from{transform:scale(1,.92) rotate(-3deg);filter:brightness(1)}to{transform:scale(.95,1.1) rotate(3deg);filter:brightness(1.3)}}
.eg.sparkle{position:relative}
.eg.sparkle::after{content:"✦";position:absolute;right:-.45rem;top:-.35rem;font-size:.6em;color:#fff;text-shadow:0 0 5px var(--c,#fff);animation:emtw 1.5s ease-in-out infinite}
@keyframes emtw{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(90deg)}}
/* neon halo and devil horns are drawn, not emoji */
.eg.halo{width:1.9rem;height:.6rem;margin-top:-.1rem;border:2px solid #fff;border-radius:50%;box-shadow:0 0 3px var(--c),0 0 9px var(--c),inset 0 0 3px var(--c);filter:none}
.eg.horns{position:relative;width:2.5rem;height:1.25rem;margin-top:.05rem;filter:drop-shadow(0 0 2px #ef4444) drop-shadow(0 0 7px #ef4444)}
.eg.horns::before,.eg.horns::after{content:"";position:absolute;bottom:0;width:.8rem;height:1.25rem;background:linear-gradient(#ff9a9a,#e11d48 55%,#7f1d1d);clip-path:polygon(0 100%,0 55%,45% 0,100% 100%)}
.eg.horns::before{left:0;transform:rotate(-10deg)}
.eg.horns::after{right:0;transform:scaleX(-1) rotate(-10deg)}
.wg .eg,.wreveal .gl .eg{font-size:inherit}
.wreveal .gl .eg.halo{width:3.4rem;height:1.1rem;margin-top:.8rem}.wreveal .gl .eg.horns{width:4rem;height:2rem;margin-top:.4rem}
.wreveal .gl .eg.horns::before,.wreveal .gl .eg.horns::after{width:1.3rem;height:2rem}
.wg .eg.halo{width:1.1rem;height:.4rem;margin-top:.2rem;border-width:1.5px}.wg .eg.horns{width:1.4rem;height:.8rem;margin:0}.wg .eg.horns::before,.wg .eg.horns::after{width:.45rem;height:.8rem}
.wheelwrap{--sz:min(24rem,90vw)}
.wchip .wg{font-size:var(--fs,1.5rem)}
.wchip .pkico{max-height:none;margin:0;width:1.15rem;height:1.6rem;border-radius:.15rem;box-shadow:0 1px 4px rgba(0,0,0,.6)}
.wreveal .gl .pkico{max-height:none;margin:0;width:3.2rem;height:4.5rem;border-radius:.3rem;box-shadow:0 4px 14px rgba(0,0,0,.6)}
/* first-game coach */
.coach{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;max-width:44rem;margin:.2rem auto;padding:.8rem 1rem;border-radius:1rem;border:1.5px solid #6d5bd0;background:linear-gradient(135deg,rgba(109,91,208,.22),rgba(240,171,252,.1));box-shadow:0 0 1.6rem rgba(139,92,246,.25);animation:cin .35s ease both}
.coach .ctext{flex:1 1 16rem;min-width:0;display:grid;gap:.15rem}.coach small{color:var(--pink);font-weight:700;letter-spacing:.03em}.coach .ctext>b{font:800 1.05rem Syne,sans-serif}.coach p b{font:inherit;font-weight:600;color:#f3e8ff;background:rgba(240,171,252,.16);padding:0 .3em;border-radius:.3em;white-space:nowrap}.coach p{margin:0;color:var(--text);font-size:.95rem;line-height:1.55}
.coach .cact{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}
.cstep{display:flex;flex-direction:column;gap:.3rem}.cstep i{width:.55rem;height:.55rem;border-radius:50%;background:#3b2d6b}.cstep i.done{background:var(--vio)}.cstep i.on{background:var(--pink);box-shadow:0 0 .6rem var(--pink)}
.cd.cpick{border-color:#f0abfc;box-shadow:0 0 1.1rem rgba(240,171,252,.75);animation:cpulse 1.6s ease-in-out infinite}
.cd.sel.cpick{border-color:var(--vio)}
.cwhy{position:absolute;left:50%;bottom:-1.15rem;transform:translateX(-50%);white-space:nowrap;font:700 .66rem/1 'DM Sans',sans-serif;font-style:normal;color:#1a1033;background:#f0abfc;padding:.18rem .45rem;border-radius:.6rem;pointer-events:none;z-index:4}
.hand:has(.cwhy){padding-bottom:1.3rem}
@keyframes cin{from{opacity:0;transform:translateY(-.4rem)}to{opacity:1;transform:none}}
@keyframes cpulse{50%{box-shadow:0 0 1.8rem rgba(240,171,252,1)}}
@media (prefers-reduced-motion:reduce){.coach,.cd.cpick{animation:none}}
@media (max-height:640px),(max-width:480px){.coach{padding:.5rem .75rem;gap:.4rem .7rem}.coach p{font-size:.8rem;line-height:1.35}.coach .ctext>b{font-size:.95rem}.cstep{display:none}.cd.cpick{animation:none}}
.coach.cnew{border-color:#f0abfc;background:linear-gradient(135deg,rgba(240,171,252,.2),rgba(109,91,208,.18))}.coach.cnew .cd{--cw:3.4rem;flex:none}
/* ---- layout polish: chat button, lobby seats, game-mode picker, bigger cards ---- */
#chat-t{min-height:3rem;padding:0 1.4rem;font:800 1.05rem/1 inherit;color:#fff;background:linear-gradient(135deg,#8b5cf6,#6366f1);border:0;box-shadow:0 6px 22px rgba(139,92,246,.55),inset 0 0 0 2px rgba(255,255,255,.14)}
#chat-t::before{content:'💬 '}
#chat-t:hover{filter:brightness(1.12)}
#chat-t.unread{background:linear-gradient(135deg,#ec4899,#8b5cf6);animation:chatpulse 1.4s ease-in-out infinite}
@keyframes chatpulse{50%{box-shadow:0 6px 30px rgba(236,72,153,.95),inset 0 0 0 2px rgba(255,255,255,.14)}}
@media (prefers-reduced-motion:reduce){#chat-t.unread{animation:none}}
#chat .cbox{background:#171033;border:2px solid #6d5bd0;border-radius:1rem;padding:.8rem;box-shadow:0 14px 40px rgba(0,0,0,.65)}
#chat #clog{font-size:.95rem}
.seats{display:flex;flex-wrap:wrap;justify-content:center}
.seat{flex:1 1 13.75rem;min-width:max-content;max-width:100%}
#modebox{text-align:center}
#modesel{display:inline-block;min-width:16rem;max-width:100%}#modesel .dd{max-width:none}
.cd.lg{--cw:6.25rem}.slot.lg{--cw:6.25rem;--peek:1.45rem}.cd.md{--cw:5.5rem}.cd.sm{--cw:3.1rem}.slot.sm{--cw:3.1rem;--peek:.7rem}
.pile .cd{margin-left:-3.4rem}
.me{width:fit-content;max-width:100%;margin-inline:auto}
#copy{margin-top:.7rem}

.me .hand{zoom:var(--hs,1)}

.seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:.875rem}
.seat{min-width:0;max-width:none;flex:none}



.dd{position:relative;max-width:18rem;margin:0 auto;text-align:left}
.dd-btn{display:flex;align-items:center;gap:.55rem;width:100%;cursor:pointer}
.dd-btn:disabled{cursor:default;opacity:.9}.dd-btn span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dd-btn i{font-style:normal;color:var(--mut)}
.dd img{width:1.1rem;aspect-ratio:5/7;border-radius:.15rem;object-fit:cover;flex:none}
.dd-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + .25rem);margin:0;padding:.3rem;list-style:none;max-height:15rem;overflow:auto;background:#0e0a1c;border:1px solid #6d4aff;border-radius:.7rem;box-shadow:0 .8rem 2rem rgba(0,0,0,.55)}
.dd-list li{display:flex;align-items:center;gap:.55rem;padding:.4rem .5rem;border-radius:.5rem;cursor:pointer;font-size:.9rem}
.dd-list li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dd-list li small{color:var(--mut);font-size:.7rem;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-list li:hover{background:rgba(109,91,208,.3)}.dd-list li.on{background:rgba(96,165,250,.2);font-weight:700}

.dd{max-width:11.5rem}
.dd-btn{min-height:0;height:2.1rem;padding:.2rem .6rem;font-size:.85rem;gap:.45rem}
.dd-list{min-width:13.5rem;right:auto}
.dd-list li{padding:.3rem .5rem;font-size:.85rem}
#deckwho{font-size:.78rem}

.dd-btn span{text-align:left}

/* The tips are speech bubbles beside the table when there's room, so they never squash the middle. */
@media (min-width:1400px){
  .coach{position:fixed;z-index:60;top:8rem;left:auto;right:calc(50% + 28.5rem);width:min(21rem,calc(50vw - 29.5rem));max-width:none;margin:0;flex-direction:column;align-items:stretch;gap:.6rem;padding:.9rem 1.1rem;border-radius:1.2rem;pointer-events:none;background:linear-gradient(135deg,rgba(40,30,86,.96),rgba(58,34,92,.96))}
  .coach button{pointer-events:auto}
  .coach .cstep{display:none}.coach .ctext{flex:none}.coach .cact{margin-left:0}
  .coach::after{content:"";position:absolute;right:-.7rem;top:2rem;width:1.2rem;height:1.2rem;background:#3a225c;border-top:1.5px solid #6d5bd0;border-right:1.5px solid #6d5bd0;transform:rotate(45deg);border-radius:0 .25rem 0 0}
  .coach.cnew{right:auto;left:calc(50% + 28.5rem);top:8rem;background:linear-gradient(135deg,rgba(70,34,86,.96),rgba(40,30,86,.96));border-color:#f0abfc}
  .coach.cnew::after{right:auto;left:-.7rem;transform:rotate(-135deg);background:#46225a;border-color:#f0abfc}
  .coach.cnew .cd{align-self:flex-start}
}

/* Discord Activity: no home page (players go straight to their voice channel's lobby), no leave / private / pack / bot-row buttons */
html.in-discord.d-joining #home:not([hidden]),html.in-discord.d-fail #home:not([hidden]){display:grid;place-items:center;min-height:70vh}
html.in-discord.d-joining #home:not([hidden])>*,html.in-discord.d-fail #home:not([hidden])>*{display:none}
html.in-discord.d-joining #home:not([hidden])::before,html.in-discord.d-fail #home:not([hidden])::before{content:"Joining your voice channel’s lobby…";font:700 1.2rem Syne,sans-serif;color:var(--text);text-align:center}
html.in-discord.d-fail #home:not([hidden])::before{content:"Couldn’t reach the lobby. Close the Activity and open it again."}
html.in-discord #invbtn,html.in-discord #privbtn,html.in-discord #packs{display:none!important}
#botbox{display:none!important}   /* bots are added from the empty seats now */
.seat.empty{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.seat.empty .seatbot{font:700 .78rem 'DM Sans',sans-serif;padding:.3rem .7rem;border-radius:.6rem;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}
.seat.empty .seatbot:hover{border-color:var(--vio)}
.seat.empty .lvls{display:flex;gap:.3rem}.seat.empty .lvls button{font:700 .75rem 'DM Sans',sans-serif;padding:.28rem .55rem;border-radius:.55rem;border:1px solid var(--vio);background:rgba(109,91,208,.25);color:var(--text);cursor:pointer}

html.in-discord #copy,html.in-discord #ltag{display:none!important}
html.in-discord #lcode{font-size:clamp(1.6rem,5vw,2.8rem);letter-spacing:.02em;margin:.4rem 0 1rem}

/* the card deck box looks just like the game mode box */
.dd{max-width:16rem}
.dd-btn{height:auto;min-height:2.6rem;padding:0 2.8rem 0 1rem;font:inherit;font-size:1rem;gap:.6rem;border-radius:.625rem;border:2px solid #3b2d6b;background:var(--panel);color:var(--text);
  background-image:linear-gradient(45deg,transparent 50%,#a78bfa 50%),linear-gradient(135deg,#a78bfa 50%,transparent 50%);background-position:calc(100% - 1.5rem) 52%,calc(100% - 1.1rem) 52%;background-size:.42rem .42rem;background-repeat:no-repeat}
.dd-btn i{display:none}
.dd-btn img{width:1.2rem}
.dd-list{min-width:100%}

/* drop-down lists float above everything (position set by script) so Discord mobile and small panels cannot clip or hide them */
.dd-list{position:fixed!important;right:auto!important;z-index:1000!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.dd-list[hidden]{display:none!important}
.dd-list li{min-height:2.2rem;touch-action:manipulation}
.dd-btn{touch-action:manipulation}

/* Discord: small "main menu" text link next to the game name while in a lobby or game (the home page is still there, but players start in the lobby) */
.dmenu{display:none;font:600 .78rem 'DM Sans',sans-serif;color:var(--mut);background:none;border:0;padding:.25rem .3rem;cursor:pointer;text-decoration:underline;text-underline-offset:.15em;margin-right:auto}
.dmenu:hover{color:var(--text)}
html.in-discord:has(#home[hidden]) .dmenu{display:inline-block}

.modeview{margin:0;font-weight:700;color:var(--text)}
/* ---- Hall of Fame, November 2026: Scorpio (exclusive). Plate, three emotes and the Scorpio deck's coin. ---- */
.np-scorpio{--ring:#c084fc;border-color:#a855f7;animation:npscorpio 3.6s ease-in-out infinite}
@keyframes npscorpio{0%,100%{border-color:#a855f7;box-shadow:0 0 1rem rgba(168,85,247,.55),inset 0 0 .5rem rgba(94,234,212,.15)}50%{border-color:#f0abfc;box-shadow:0 0 1.9rem rgba(217,70,239,.8),0 0 .6rem rgba(94,234,212,.5),inset 0 0 .9rem rgba(94,234,212,.25)}}
.np-scorpio{position:relative}.np-scorpio.turn::before{z-index:6}
.fx-scorpio::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--a),transparent 0 64%,rgba(94,234,212,.15) 72%,#5eead4 92%,#fff 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:emspin 3.4s linear infinite}
.fx-scorpio::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from calc(var(--a) + 180deg),transparent 0 74%,rgba(240,171,252,.2) 80%,#f0abfc 96%,#fff 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:emspin 3.4s linear infinite}
.fx-scorpio b{width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);background:radial-gradient(circle,#fff 0,#fde68a 35%,#f59e0b 75%);clip-path:polygon(50.0% 0.0%,58.0% 30.6%,85.4% 14.6%,69.4% 42.0%,100.0% 50.0%,69.4% 58.0%,85.4% 85.4%,58.0% 69.4%,50.0% 100.0%,42.0% 69.4%,14.6% 85.4%,30.6% 58.0%,0.0% 50.0%,30.6% 42.0%,14.6% 14.6%,42.0% 30.6%);filter:drop-shadow(0 0 3px #fbbf24);animation-name:npstar;animation-duration:var(--t);animation-timing-function:ease-in-out}
@keyframes npstar{0%,100%{opacity:.2;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(45deg)}}
.fx-scorpio s{position:absolute;left:50%;top:0;z-index:1;transform:translate(-50%,-55%);text-decoration:none;font:700 .78rem/1.15 system-ui,sans-serif;color:#5eead4;padding:0 .32rem;background:#140a33;border:1px solid rgba(94,234,212,.55);border-radius:.45rem;text-shadow:0 0 4px #5eead4,0 0 10px #14b8a6;animation:npsigil 3.6s ease-in-out infinite}
.fx-scorpio s::after{content:"\264F\FE0E"}
@keyframes npsigil{0%,100%{box-shadow:0 0 .3rem rgba(94,234,212,.3)}50%{box-shadow:0 0 .9rem rgba(94,234,212,.75)}}
.fx-scorpio b:nth-child(2){--x:0%;--y:0%;--s:0.75rem;--d:0s;--t:2.6s}
.fx-scorpio b:nth-child(3){--x:100%;--y:0%;--s:0.75rem;--d:-0.9s;--t:2.9s}
.fx-scorpio b:nth-child(4){--x:100%;--y:100%;--s:0.75rem;--d:-1.7s;--t:2.7s}
.fx-scorpio b:nth-child(5){--x:0%;--y:100%;--s:0.75rem;--d:-0.4s;--t:3.1s}
.fx-scorpio b:nth-child(6){--x:0%;--y:50%;--s:0.5rem;--d:-1.2s;--t:2.4s}
.fx-scorpio b:nth-child(7){--x:100%;--y:50%;--s:0.5rem;--d:-2.1s;--t:2.5s}
.eg.orbit{position:relative}
.eg.orbit::after{content:"\2726";position:absolute;left:50%;top:50%;font-size:.45em;line-height:1;color:#fde68a;text-shadow:0 0 4px #fbbf24,0 0 8px #f59e0b;animation:emorbit 2.8s linear infinite}
.eg.orbit::before{content:"\263E";position:absolute;left:50%;top:50%;font-size:.42em;line-height:1;color:#ede9fe;text-shadow:0 0 4px #c4b5fd;animation:emorbit 2.8s linear infinite;animation-delay:-1.4s}
@keyframes emorbit{from{transform:translate(-50%,-50%) rotate(0) translateX(.95em) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg) translateX(.95em) rotate(-360deg)}}
.eg.sigil{position:relative;color:#5eead4;font-weight:700}
.eg.sigil::before{content:"";position:absolute;inset:-.28em;border-radius:50%;border:.09em dotted #5eead4;box-shadow:0 0 .35em rgba(94,234,212,.5);animation:emring 6s linear infinite}
.eg.sigil::after{content:"\2726";position:absolute;right:-.42em;top:-.3em;font-size:.45em;color:#fde68a;text-shadow:0 0 5px #fbbf24;animation:emtw 1.8s ease-in-out infinite}
@keyframes emring{to{transform:rotate(360deg)}}
.eg.sting{position:relative;animation:emneon 1.8s ease-in-out infinite alternate,emsting 2.4s ease-in-out infinite}
@keyframes emsting{0%,58%,100%{transform:rotate(0)}62%{transform:rotate(-16deg) translateX(-.05em)}66%{transform:rotate(11deg)}70%{transform:rotate(-7deg)}74%{transform:rotate(0)}}
/* (sting drop colour is set below for the tinted version) */
.eg.sting::after{content:"";position:absolute;left:62%;top:30%;width:.2em;height:.27em;background:radial-gradient(circle at 50% 70%,#f5d0fe,#c026d3);border-radius:50% 50% 50% 50%/62% 62% 38% 38%;box-shadow:0 0 .25em #d946ef;opacity:0;animation:emdrip 2.4s ease-in infinite}
@keyframes emdrip{0%,64%{opacity:0;transform:translateY(0)}70%{opacity:1}100%{opacity:0;transform:translateY(1em)}}
.sfx-coinwrap[data-pack="scorpio"] .sfx-face{--rim:#c084fc;--ink:#fdf4ff;--glow:rgba(168,85,247,.65);background:radial-gradient(circle closest-side,#2a0f63 0,#170838 62%,#a855f7 62.5% 64.5%,#120530 65%);border:.24rem solid var(--rim);box-shadow:0 0 1.3rem var(--glow),inset 0 0 .9rem rgba(94,234,212,.25);animation:cg-pulse 3s ease-in-out infinite}
.sfx-coinwrap[data-pack="scorpio"] .sfx-face.tails{--rim:#f472b6;--glow:rgba(236,72,153,.6);background:radial-gradient(circle closest-side,#4a0f4f 0,#22062a 62%,#f472b6 62.5% 64.5%,#1a0420 65%)}
.sfx-coinwrap[data-pack="scorpio"] .sfx-face em{display:block;inset:.18rem;background:repeating-conic-gradient(from 0deg,rgba(168,85,247,.9) 0 1.2deg,transparent 1.2deg 30deg);-webkit-mask:radial-gradient(circle closest-side,transparent 66%,#000 67% 97%,transparent 98%);mask:radial-gradient(circle closest-side,transparent 66%,#000 67% 97%,transparent 98%);animation:cg-spin 14s linear infinite}
.sfx-coinwrap[data-pack="scorpio"] .sfx-face::before{inset:.95rem;border:.13rem dotted #5eead4;opacity:.85;animation:cg-spin 9s linear infinite reverse;z-index:1}
.sfx-coinwrap[data-pack="scorpio"] .sfx-face b,.sfx-coinwrap[data-pack="scorpio"] .sfx-face i,.sfx-coinwrap[data-pack="scorpio"] .sfx-face small{color:var(--ink);text-shadow:0 0 .35rem var(--rim),0 0 1rem var(--glow)}
.sfx-coinwrap[data-pack="scorpio"] .sfx-face i{color:#fde68a;text-shadow:0 0 .4rem #fbbf24}
@keyframes emneonp{from{filter:hue-rotate(255deg) saturate(1.5) drop-shadow(0 0 1px var(--c)) drop-shadow(0 0 4px var(--c))}to{filter:hue-rotate(255deg) saturate(1.5) drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 12px var(--c))}}
.eg.scorpt{filter:hue-rotate(255deg) saturate(1.5)}
.eg.scorpt.float{animation:emneonp 1.8s ease-in-out infinite alternate,embob 2.4s ease-in-out infinite}
.eg.scorpt.sting{animation:emneonp 1.8s ease-in-out infinite alternate,emsting 2.4s ease-in-out infinite}
.eg.scorpt.orbit::after{color:#7df0c0;text-shadow:0 0 4px #34d399,0 0 8px #10b981}
.eg.scorpt.orbit::before{color:#f5f3ff;text-shadow:0 0 4px #a7f3d0}
.eg.scorpt.sting::after{background:radial-gradient(circle at 50% 70%,#fde68a,#f59e0b);box-shadow:0 0 .25em #fbbf24}
@media (prefers-reduced-motion:reduce){.np-scorpio,.fx-scorpio::before,.fx-scorpio::after,.fx-scorpio s,.eg.orbit::before,.eg.orbit::after,.eg.sigil::before,.eg.sigil::after,/* (sting drop colour is set below for the tinted version) */
.eg.sting::after{animation:none!important}}
/* ---- Hall of Fame, Year of the Fire Horse 2026 (yearly exclusive). Plate, three emotes and the Fire Horse deck's coin. ---- */
.np-firehorse{--ring:#fbbf24;position:relative;border-color:#f5c542;color:#fff7e0;
  background:radial-gradient(circle at 50% 100%,transparent 0 .22rem,rgba(232,66,74,.32) .22rem .27rem,transparent .27rem .44rem,rgba(232,66,74,.32) .44rem .49rem,transparent .49rem) 0 0/1.3rem .65rem,
    radial-gradient(130% 160% at 50% 0%,#c8141f 0,#8e0b14 55%,#4f050b 100%);
  animation:npfirehorse 3s ease-in-out infinite}
@keyframes npfirehorse{0%,100%{border-color:#d69e1a;box-shadow:0 0 .9rem rgba(249,115,22,.45),inset 0 0 .6rem rgba(253,230,138,.12)}50%{border-color:#fde68a;box-shadow:0 0 1.8rem rgba(251,191,36,.7),0 0 .5rem rgba(239,68,68,.6),inset 0 0 1rem rgba(253,230,138,.22)}}
.np-firehorse.turn::before{z-index:6}
.op.turn.np-firehorse,.me.turn.np-firehorse{box-shadow:0 0 2rem rgba(251,191,36,.75)}
/* a gold shine sweeping across, and a thin inner gold line like the cards' double frame */
.fx-firehorse::before{content:"";position:absolute;inset:2px;border-radius:inherit;background:linear-gradient(105deg,transparent 38%,rgba(255,240,180,.0) 42%,rgba(255,240,180,.38) 50%,rgba(255,240,180,0) 58%,transparent 62%) 0 0/260% 100% no-repeat;animation:npfhshine 4.2s ease-in-out infinite}
@keyframes npfhshine{0%,40%{background-position:130% 0}100%{background-position:-60% 0}}
.fx-firehorse::after{content:"";position:absolute;inset:.24rem;border-radius:.62rem;border:1px solid rgba(253,230,138,.5);pointer-events:none}
/* the 馬 seal on the top edge */
.fx-firehorse s{position:absolute;left:50%;top:0;z-index:1;transform:translate(-50%,-55%);text-decoration:none;font:700 .8rem/1.1 KaiTi,STKaiti,"Kaiti SC","Noto Serif CJK SC","Microsoft YaHei",serif;color:#fde68a;padding:.04rem .3rem;background:#7d0811;border:1px solid #f5c542;border-radius:.3rem;text-shadow:0 0 4px #f59e0b;animation:npfhseal 3s ease-in-out infinite}
.fx-firehorse s::after{content:"\99AC"}
@keyframes npfhseal{0%,100%{box-shadow:0 0 .25rem rgba(251,191,36,.35)}50%{box-shadow:0 0 .8rem rgba(251,191,36,.85)}}
/* two little lanterns swinging from the top corners */
.fx-firehorse u{position:absolute;top:var(--top);width:.82rem;height:.74rem;border-radius:45%;background:radial-gradient(circle at 40% 38%,#ffe1a0 0,#f43f2e 36%,#b3101c 78%);border-top:.11rem solid #f5c542;border-bottom:.11rem solid #f5c542;box-shadow:0 0 .55rem rgba(249,115,22,.8);transform-origin:50% calc(-1 * var(--top));animation:npfhlan 3.2s ease-in-out infinite}
.fx-firehorse u::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:calc(var(--top) + .1rem);background:#f5c542}
.fx-firehorse u::after{content:"";position:absolute;left:50%;bottom:-.4rem;width:.18rem;height:.3rem;margin-left:-.09rem;background:linear-gradient(#f5c542,#b7791f);border-radius:0 0 .1rem .1rem}
.fx-firehorse u:nth-of-type(1){--top:.32rem;right:1.7rem;animation-delay:-1.6s}
.fx-firehorse u:nth-of-type(2){--top:.7rem;right:.6rem}
@keyframes npfhlan{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}
/* embers rising off the plate */
.fx-firehorse b{z-index:1;width:var(--s);height:var(--s);margin:-.15rem 0 0 -.15rem;border-radius:50%;background:radial-gradient(circle,#fff7c2 0,#fbbf24 40%,#f97316 70%,transparent 100%);mix-blend-mode:screen;animation-name:emrise;animation-duration:var(--t);animation-timing-function:ease-out}
.fx-firehorse b:nth-of-type(1){--x:12%;--y:100%;--s:.32rem;--d:-.2s;--t:1.9s;--dx:-.2rem;--dy:-1.6rem}
.fx-firehorse b:nth-of-type(2){--x:27%;--y:100%;--s:.24rem;--d:-1.1s;--t:2.2s;--dx:.15rem;--dy:-1.9rem}
.fx-firehorse b:nth-of-type(3){--x:44%;--y:100%;--s:.3rem;--d:-.6s;--t:2s;--dx:-.1rem;--dy:-1.7rem}
.fx-firehorse b:nth-of-type(4){--x:61%;--y:100%;--s:.22rem;--d:-1.6s;--t:2.4s;--dx:.2rem;--dy:-2rem}
.fx-firehorse b:nth-of-type(5){--x:76%;--y:100%;--s:.3rem;--d:-.9s;--t:1.8s;--dx:-.15rem;--dy:-1.5rem}
.fx-firehorse b:nth-of-type(6){--x:90%;--y:100%;--s:.26rem;--d:-1.4s;--t:2.1s;--dx:.1rem;--dy:-1.8rem}
.fx-firehorse b:nth-of-type(7){--x:0%;--y:70%;--s:.22rem;--d:-.4s;--t:2.3s;--dx:-.6rem;--dy:-1.2rem}
.fx-firehorse b:nth-of-type(8){--x:100%;--y:70%;--s:.22rem;--d:-1.9s;--t:2.3s;--dx:.6rem;--dy:-1.2rem}

/* ---- emotes ---- */
/* Golden Gallop (win): the horse turned to gold, rocking in a gallop with sparks flying off its hooves */
@keyframes emneonh{from{filter:sepia(1) saturate(3.2) hue-rotate(-8deg) brightness(1.12) drop-shadow(0 0 1px var(--c)) drop-shadow(0 0 4px var(--c))}to{filter:sepia(1) saturate(3.2) hue-rotate(-8deg) brightness(1.12) drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 12px var(--c))}}
.eg.horset{position:relative;filter:sepia(1) saturate(3.2) hue-rotate(-8deg) brightness(1.12)}
.eg.horset.gallop{animation:emneonh 1.8s ease-in-out infinite alternate,emgallop .9s ease-in-out infinite;transform-origin:50% 90%}
@keyframes emgallop{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-.12em) rotate(-7deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-.05em) rotate(4deg)}}
.eg.gallop::before,.eg.gallop::after{content:"";position:absolute;left:62%;bottom:.04em;width:.13em;height:.13em;border-radius:50%;background:#fff3b0;box-shadow:0 0 .12em .04em #f97316,-.18em .06em 0 -.02em #fde68a,-.32em -.02em 0 -.03em #fb923c;opacity:0;animation:emspark .9s ease-out infinite}
.eg.gallop::after{left:30%;animation-delay:-.45s}
@keyframes emspark{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(.35em,-.45em) scale(1.1)}}
/* Lucky Lantern (normal): swings from a gold cord, glows warm, a lucky sparkle twinkles */
.eg.lantern{position:relative;transform-origin:50% -.3em;animation:emneon 1.8s ease-in-out infinite alternate,emlantern 2.6s ease-in-out infinite}
@keyframes emlantern{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-9deg)}}
.eg.lantern::before{content:"";position:absolute;left:50%;top:-.32em;width:.05em;height:.36em;margin-left:-.025em;background:linear-gradient(#fde68a,#d69e1a)}
.eg.lantern::after{content:"\2726";position:absolute;right:-.38em;top:.05em;font-size:.42em;color:#fde68a;text-shadow:0 0 5px #fbbf24;animation:emtw 1.6s ease-in-out infinite}
/* Damp Squib (loss): the firecracker's fuse sparks, sputters out in a puff of smoke, and the cracker droops */
.eg.squib{position:relative;transform-origin:50% 85%;animation:emneon 1.8s ease-in-out infinite alternate,emdroop 3s ease-in-out infinite}
@keyframes emdroop{0%,40%{transform:rotate(0)}55%,88%{transform:rotate(16deg) translateY(.04em)}100%{transform:rotate(0)}}
.eg.squib::after{content:"\2738";position:absolute;right:-.2em;top:-.32em;font-size:.5em;color:#fff3b0;text-shadow:0 0 4px #fbbf24,0 0 9px #f97316;animation:emfuse 3s steps(1,end) infinite}
@keyframes emfuse{0%{opacity:1;transform:scale(1) rotate(0)}6%{opacity:.6;transform:scale(1.25) rotate(20deg)}12%{opacity:1;transform:scale(.85) rotate(-15deg)}18%{opacity:.75;transform:scale(1.2) rotate(30deg)}24%{opacity:1;transform:scale(.9)}30%{opacity:.5;transform:scale(1.1) rotate(10deg)}36%{opacity:.25;transform:scale(.6)}42%,100%{opacity:0}}
.eg.squib::before{content:"";position:absolute;right:-.12em;top:-.3em;width:.32em;height:.32em;border-radius:50%;background:radial-gradient(circle,rgba(226,232,240,.85),rgba(148,163,184,.35) 60%,transparent 72%);opacity:0;animation:emsmoke 3s ease-out infinite}
@keyframes emsmoke{0%,40%{opacity:0;transform:translate(0,0) scale(.4)}50%{opacity:.95}90%{opacity:0;transform:translate(.15em,-.6em) scale(1.9)}100%{opacity:0}}

/* ---- the Fire Horse deck's Joker coin: red lacquer and gold, with a turning ring of gold studs ---- */
.sfx-coinwrap[data-pack="firehorse"] .sfx-face{--rim:#f5c542;--ink:#fde68a;--glow:rgba(251,191,36,.6);background:radial-gradient(circle closest-side,#c8141f 0,#8e0b14 60%,#f5c542 61% 63.5%,#5c060d 64.5%);border:.24rem solid var(--rim);box-shadow:0 0 1.3rem var(--glow),inset 0 0 .9rem rgba(253,230,138,.3);animation:cg-pulse 3s ease-in-out infinite}
.sfx-coinwrap[data-pack="firehorse"] .sfx-face.tails{--rim:#d69e1a;--glow:rgba(249,115,22,.6);background:radial-gradient(circle closest-side,#3a0a0a 0,#1c0404 60%,#f5c542 61% 63.5%,#5c060d 64.5%)}
.sfx-coinwrap[data-pack="firehorse"] .sfx-face em{display:block;inset:.18rem;background:repeating-conic-gradient(from 0deg,#fde68a 0 3deg,transparent 3deg 15deg,#d69e1a 15deg 18deg,transparent 18deg 30deg);-webkit-mask:radial-gradient(circle closest-side,transparent 68%,#000 69% 95%,transparent 96%);mask:radial-gradient(circle closest-side,transparent 68%,#000 69% 95%,transparent 96%);animation:cg-spin 16s linear infinite}
.sfx-coinwrap[data-pack="firehorse"] .sfx-face::before{inset:.95rem;border:.12rem dashed #fde68a;opacity:.8;animation:cg-spin 10s linear infinite reverse;z-index:1}
.sfx-coinwrap[data-pack="firehorse"] .sfx-face b,.sfx-coinwrap[data-pack="firehorse"] .sfx-face i,.sfx-coinwrap[data-pack="firehorse"] .sfx-face small{color:var(--ink);text-shadow:0 0 .35rem #f59e0b,0 1px 0 #5c060d}

@media (prefers-reduced-motion:reduce){.np-firehorse,.fx-firehorse::before,.fx-firehorse s,.fx-firehorse u,.fx-firehorse b,.eg.gallop::before,.eg.gallop::after,.eg.lantern,.eg.lantern::after,.eg.squib,.eg.squib::before,.eg.squib::after,.eg.horset.gallop,.sfx-coinwrap[data-pack="firehorse"] .sfx-face,.sfx-coinwrap[data-pack="firehorse"] .sfx-face em,.sfx-coinwrap[data-pack="firehorse"] .sfx-face::before{animation:none!important}}