: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:rgba(9,6,18,.78);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(2px)}
#dealfx p{position:absolute;top:24%;margin:0;font-family:Syne,sans-serif;font-weight:800;font-size:1.6rem;color:var(--text)}
#dealfx small{position:absolute;top:calc(24% + 2.6rem);color:var(--mut)}
.fxc{position:absolute;left:50%;top:50%;width:3.6rem;height:5.04rem;margin:-2.52rem 0 0 -1.8rem;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-tint{inset:0}
.sfx-glass{left:0;top:0;fill:none;stroke:rgba(255,255,255,.92);stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(190,225,255,.95))}
.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}
.sfx-coinwrap{width:6.5rem;height:6.5rem;perspective:800px;opacity:0;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.sfx-coin{position:absolute;inset:0;transform-style:preserve-3d}
.sfx-face{position:absolute;inset:0;border-radius:50%;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}
.sfx-face b{font-size:2.8rem}.sfx-face small{font-size:.62rem;letter-spacing:.14em;margin-top:.15rem;font-weight:700}
.sfx-face.heads{background:radial-gradient(circle at 35% 30%,#fff2a8,#facc15 45%,#b7791f);border:.3rem solid #fde68a;color:#6b4a06;box-shadow:inset 0 0 0 .22rem rgba(120,80,0,.28)}
.sfx-face.tails{background:radial-gradient(circle at 35% 30%,#f1f5f9,#a5b4c8 45%,#5b6b82);border:.3rem solid #e2e8f0;color:#1e293b;transform:rotateX(180deg);box-shadow:inset 0 0 0 .22rem rgba(30,41,59,.28)}
@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}}