/* Discardia: estilos */
:root{
  --bg:#16122a; --table:#231c3f; --ink:#f0eaff; --muted:#a597c7; --line:#3a3062; --panel:#1d1735; --accent:#a28aff; --accent-ink:#16122a; --arrow:#6b5aa8;
  --cr:#e0433a; --cy:#f0b21f; --cg:#2c9a57; --cb:#2b6bd6; --ck:#1d1829; --cgray:#8e8a98;
  /* escala única: 1 --u = 1px num celular de 390×800; cresce e diminui com a largura e a altura da tela */
  --u:clamp(.75px,min(calc(100vw/390),calc(100dvh/800)),1.3px);
  --cw0:calc(60*var(--u));--cw:var(--cw0);--cwMao:var(--cw0);
  font-size:calc(16*var(--u));
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
.rulestrip{display:flex;justify-content:safe center;gap:0.375rem;padding:0.5rem 0.75rem;margin-bottom:-0.375rem;overflow-x:auto;scrollbar-width:none;min-height:3rem} /* folga de 0.5rem: o ícone novo pulsa (scale 1.35) sem ser cortado */
.rulestrip::-webkit-scrollbar{display:none}
/* a faixa mantém a altura de uma linha de ícones mesmo sem regras (Clássico), para a interface não mudar */
.ri{flex:0 0 auto;width:2rem;height:2rem;padding:0;border-radius:50%;overflow:hidden;white-space:nowrap;border:1.5px solid var(--line);background:var(--panel);display:grid;place-items:center;font-size:1rem;line-height:1;font-weight:700;transition:border-color 1.2s ease,box-shadow 1.2s ease}
.ri.pre{display:none}
.ri.txt{font-size:.7rem;letter-spacing:-.02em}
.ri.fresh{animation:riIn 1.2s cubic-bezier(.2,.9,.3,1.3);border-color:var(--accent)}
@keyframes riIn{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.35)}100%{transform:none}}
.dica{position:fixed;z-index:29;max-width:min(80vw,20rem);background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.9rem;line-height:1.3;text-align:center;padding:0.5rem 0.75rem;border-radius:0.875rem;box-shadow:0 0.375rem 1.25rem rgba(20,10,50,.35);cursor:pointer;animation:noteIn .4s cubic-bezier(.2,.9,.3,1.2)}
.dica[hidden]{display:none}
.notices{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 3.25rem);transform:translateX(-50%);width:min(92vw,26.25rem);z-index:29;display:flex;flex-direction:column;gap:0.5rem;pointer-events:none}
.notice{pointer-events:auto;background:var(--panel);color:var(--ink);border:2px solid var(--accent);border-radius:1.125rem;padding:0.75rem 0.875rem;box-shadow:0 0.625rem 1.875rem rgba(20,10,50,.3);display:grid;grid-template-columns:auto 1fr;gap:0.25rem 0.75rem;animation:noteIn .4s cubic-bezier(.2,.9,.3,1.2)}
.notice.gone{border-color:var(--muted)}
.notice .ni{grid-row:span 3;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:1.4rem;font-weight:700}
.notice.gone .ni{background:var(--muted)}
.notice .nt{font-weight:700;font-size:1rem}
.notice .nb{font-size:.78rem;color:var(--muted);font-weight:600}
.notice .nd{font-size:.88rem;line-height:1.35}
.notice{position:relative;cursor:pointer}
.notice.pointed{animation:noteDrop .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes noteDrop{from{transform:translateY(-0.5rem);opacity:0}}
@keyframes noteIn{from{transform:translateY(-1rem) scale(.95);opacity:0}}
:root.bgmerge:not(.x):not(.y){--cb:#13a3ad;--cg:#13a3ad}
.act-group{font-weight:600;font-size:.82rem;color:var(--accent);margin:0.875rem 0 0.25rem}
.act{padding:0.5rem 2px;border-bottom:1px solid var(--line)}
.act b{font-weight:600}
.act span{display:block;font-size:.84rem;color:var(--muted)}
.act .new{display:inline-block;margin-left:0.375rem;font-size:.7rem;font-weight:600;color:#fff;background:var(--accent);border-radius:999px;padding:1px 0.5rem;vertical-align:2px}
.act .gone{background:var(--muted)}
.act-basics{display:flex;flex-wrap:wrap;gap:0.375rem;margin:0.25rem 0 0.375rem}
.topbtns{display:flex;gap:0.375rem}
.wxl{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.wxl>div{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease}
.table.wxnow .wxl>div{transition:none}
.table[data-weather="sun"] .w-sun,.table[data-weather="storm"] .w-storm,.table[data-weather="fog"] .w-fog,.table[data-weather="blizzard"] .w-snow{opacity:1}
.w-sun{background:radial-gradient(circle at 100% 0,rgba(255,196,80,.34),rgba(255,160,60,.12) 40%,transparent 72%)}
.w-sun i{position:absolute;inset:0;background:radial-gradient(circle at 100% 0,rgba(255,226,140,.5),rgba(255,190,90,.18) 30%,transparent 58%);animation:sunPulse 4.5s ease-in-out infinite}
@keyframes sunPulse{0%,100%{opacity:.3}50%{opacity:1}}
.w-storm{background:linear-gradient(180deg,rgba(40,40,80,.35),transparent 75%)}
/* Neblina: névoa rasteira em camadas largas e sem contorno, mais densa nas bordas da mesa (o centro fica legível). Cada lado
   entra pela sua lateral quando o clima começa, e a névoa se desfaz (some aos poucos) quando ele muda */
.w-fog{background:linear-gradient(180deg,rgba(215,212,235,.07),rgba(215,212,235,.13));
  -webkit-mask-image:radial-gradient(ellipse 62% 52% at 50% 48%,rgba(0,0,0,.3) 0%,rgba(0,0,0,.5) 45%,#000 92%);mask-image:radial-gradient(ellipse 62% 52% at 50% 48%,rgba(0,0,0,.3) 0%,rgba(0,0,0,.5) 45%,#000 92%)}
.fg-lado{position:absolute;inset:0}
.fg-esq{-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent 85%);mask-image:linear-gradient(90deg,#000 30%,transparent 85%)}
.fg-dir{-webkit-mask-image:linear-gradient(270deg,#000 30%,transparent 85%);mask-image:linear-gradient(270deg,#000 30%,transparent 85%)}
.table[data-weather="fog"] .fg-esq{animation:fogEntraEsq 2.8s cubic-bezier(.2,.7,.3,1) both}
.table[data-weather="fog"] .fg-dir{animation:fogEntraDir 2.8s cubic-bezier(.2,.7,.3,1) both}
.table.wxnow .fg-lado{animation:none!important}
@keyframes fogEntraEsq{from{transform:translateX(-75%);opacity:0}}
@keyframes fogEntraDir{from{transform:translateX(75%);opacity:0}}
/* cada camada repete um ladrilho de tamanho fixo (--fgW × --fgH), então as manchas têm a mesma forma em qualquer tela; a
   camada é um ladrilho mais larga que a mesa e anda um ladrilho, o que emenda sem pulo. As manchas ficam dentro do ladrilho
   (centro mais ou menos 70% do raio entre 0 e 100%), senão o corte na borda aparece */
.w-fog{--fgW:42rem;--fgH:13rem}
.fg-lado i{position:absolute;left:0;width:calc(100% + var(--fgW));top:var(--y);height:calc(var(--fgH)*var(--e,1));opacity:var(--o);
  background:radial-gradient(ellipse 34% 34% at 30% 55%,rgba(232,229,246,.42),transparent 70%),radial-gradient(ellipse 28% 26% at 66% 42%,rgba(232,229,246,.36),transparent 70%),radial-gradient(ellipse 19% 32% at 85% 62%,rgba(232,229,246,.32),transparent 70%);
  background-size:var(--fgW) 100%;background-repeat:repeat-x;animation:fogDeriva var(--d) linear var(--dl) infinite var(--dir,normal)}
.fg-esq i:nth-child(1){--y:-6%;--o:.9;--d:70s;--dl:-10s}
.fg-esq i:nth-child(2){--y:30%;--o:.7;--d:95s;--dl:-40s;--dir:reverse;--e:.9}
.fg-esq i:nth-child(3){--y:62%;--o:.85;--d:80s;--dl:-25s;--e:1.1}
.fg-dir i:nth-child(1){--y:8%;--o:.75;--d:88s;--dl:-60s;--dir:reverse;--e:.95}
.fg-dir i:nth-child(2){--y:44%;--o:.8;--d:66s;--dl:-5s}
.fg-dir i:nth-child(3){--y:74%;--o:.7;--d:100s;--dl:-70s;--dir:reverse;--e:.9}
@keyframes fogDeriva{to{transform:translateX(calc(var(--fgW)*-1))}}
.wxl>.w-snow{transition-duration:2.5s}
.w-snow i{position:absolute;top:-1rem;left:var(--x);width:var(--sz);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 45%,rgba(150,185,230,.7) 60%,transparent 72%);opacity:var(--o);animation:snowfall var(--d) linear var(--dl) infinite,snowsway var(--sd) ease-in-out var(--dl) infinite alternate}
@keyframes snowfall{from{top:-1rem}to{top:calc(100% + 1rem)}}
@keyframes snowsway{from{translate:calc(var(--sw)*-1) 0}to{translate:var(--sw) 0}}
.fxin.roul{animation:none}
.roul .fxg{min-width:1.2em;text-align:center}
.seat .nm{margin-bottom:3px}
.fan{position:relative;height:2.125rem;margin:-2px auto 0;width:100%}
/* leque (js/leque.js): as cartinhas se abrem e se fecham devagar quando --n e --k mudam; a mão inteira que chega fica
   fechada (--abre 0) até se abrir no lugar. 'vem' e 'fora' são espaços de cartas que estão voando ou sendo mostradas */
.fan i{position:absolute;top:2px;left:50%;width:0.9375rem;height:1.375rem;margin-left:-0.4688rem;border-radius:3px;border:1.5px solid #fff;background:var(--verso-mini,repeating-linear-gradient(135deg,#3b2f6b 0 3px,#46397d 3px 0.375rem));box-shadow:0 1px 2px rgba(0,0,0,.25);
  transform-origin:50% 230%;transform:rotate(calc((var(--k) - (var(--n) - 1) / 2) * min(9deg, 46deg / var(--n)) * var(--abre,1)));transition:transform .28s cubic-bezier(.3,.7,.3,1)}
.fan i.vem,.fan i.fora{visibility:hidden}
.fan.chegando .cnt{z-index:28} /* uma carta voando até o leque passa por baixo do número */
.side-b .fan i{background:var(--verso-mini,repeating-linear-gradient(135deg,#1a0f2e 0 3px,#4a2a7a 3px 0.375rem));border-color:#0b0712}
.fan .mist{position:absolute;left:50%;top:0.5rem;width:1.875rem;height:1.125rem;margin-left:-0.9375rem;border-radius:50%;background:radial-gradient(ellipse,rgba(235,232,245,.9) 0,rgba(235,232,245,.55) 50%,rgba(235,232,245,0) 75%);filter:blur(1px);pointer-events:none;z-index:1}
.fan.fog i{filter:saturate(.7) brightness(1.05)}
.fan .cnt{position:absolute;left:50%;top:1.125rem;transform:none;translate:-50% -50%;z-index:2;font-size:2rem;font-weight:900;line-height:1;color:#fff;text-align:center;white-space:nowrap;
  text-shadow:0 0 2px #1d1435,1px 1px 0 #1d1435,-1px -1px 0 #1d1435,1px -1px 0 #1d1435,-1px 1px 0 #1d1435,0 2px 3px rgba(0,0,0,.4)}
.fan .cnt.low,.minhas .cnt.low{color:#ffd24d}
.fan .cnt small,.minhas .cnt small{font-size:.5em}
/* última carta: o número some (guardando o lugar) e a carta ganha uma aura. Com o Estouro, o limite vai ao lado, menor */
.fan .cnt.ultima,.minhas .cnt.ultima{visibility:hidden}
.fan i.aura{transform-origin:50% 50%;width:1.5rem;height:2.25rem;margin-left:-0.75rem;top:-0.0625rem;border-radius:0.25rem;border-color:#ffe58a;animation:auraMini 1.6s ease-in-out infinite}
/* perto do limite do Estouro: as cartas brilham em vermelho, mais forte quanto mais perto de 10 (--lv, de 1/3 a 1) */
.fan i.perigo{border-color:#ffb3ad;animation:perigoMini 1.6s ease-in-out infinite}
@keyframes perigoMini{0%,100%{box-shadow:0 0 0 1px rgba(255,80,70,calc(.35 + .65*var(--lv))),0 0 calc(0.2rem + 0.35rem*var(--lv)) calc(0.05rem + 0.15rem*var(--lv)) rgba(255,60,50,calc(.3 + .5*var(--lv)))}50%{box-shadow:0 0 0 1.5px rgba(255,110,100,calc(.5 + .5*var(--lv))),0 0 calc(0.3rem + 0.6rem*var(--lv)) calc(0.1rem + 0.25rem*var(--lv)) rgba(255,60,50,calc(.45 + .5*var(--lv)))}}
/* a última carta dos adversários cresce e diminui no ritmo do brilho */
@keyframes auraMini{0%,100%{box-shadow:0 0 0 1px #ffd24d,0 0 0.375rem 0.125rem rgba(255,200,60,.65);scale:1}50%{box-shadow:0 0 0 1.5px #ffe58a,0 0 0.75rem 0.3rem rgba(255,200,60,.95);scale:1.14}}
.tag{z-index:4}
#mystat{top:-0.6875rem;bottom:auto;cursor:pointer;font-family:inherit;z-index:6;height:auto}
.tops{position:absolute;left:50%;top:-0.6875rem;transform:translateX(-50%);display:flex;gap:0.1875rem;z-index:4}
.tag.top{position:static;transform:none;font-size:.72rem;padding:0 0.4375rem;border-color:var(--accent);color:var(--ink)}
.rail.many .tag.top{font-size:.62rem;padding:0 0.25rem}
.seat{cursor:pointer}
.notice.seatinfo{display:block;cursor:pointer}
.notice.hov{pointer-events:none}
.si-head{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.375rem}
.si-head b{font-size:1rem}
.si-head em{font-style:normal;font-size:.72rem;color:#fff;background:var(--cr);border-radius:999px;padding:1px 0.5rem}
.si-av{width:1.625rem;height:1.625rem;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.8rem}
.si-row{display:flex;gap:0.625rem;align-items:flex-start;padding:0.25rem 0;font-size:.88rem;line-height:1.35}
.si-ic{flex:none;width:1.625rem;text-align:center;font-size:1.05rem}
.tag.stat{font-size:.7rem;padding:0 0.4375rem;color:var(--ink);border-color:var(--accent);white-space:nowrap;max-width:calc(100% + 0.625rem);overflow:hidden;text-overflow:ellipsis}
.tag.outic{font-size:.85rem;padding:0 0.5rem;border-color:var(--cr)}
.rail.many .tag.stat{font-size:.62rem;padding:0 0.25rem}
.pring{position:fixed;z-index:9;pointer-events:none}
.pring i{position:absolute;inset:0;border-radius:50%;border:3px solid #8a4fd8;box-shadow:0 0 0.75rem #8a4fd8,inset 0 0 0.75rem rgba(22,179,194,.6);opacity:0;animation:pring .9s ease-out forwards}
.pring i:nth-child(2){animation-delay:.25s;border-color:#16b3c2}
.pring i:nth-child(3){animation-delay:.5s;border-color:#e8479a}
@keyframes pring{0%{transform:scale(.25);opacity:0}30%{opacity:1}100%{transform:scale(1.1);opacity:0}}
.pcover{position:fixed;inset:0;z-index:50;pointer-events:all;background:radial-gradient(circle at var(--px,50%) var(--py,50%),#4a2a86 0,#24124a 35%,#120a22 80%)}
.installbox{display:grid;grid-template-columns:auto 1fr;gap:0.375rem 0.75rem;align-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--panel)),var(--panel));border:1.5px solid var(--accent);border-radius:1rem;padding:0.75rem;margin:0.25rem 0 0.75rem}
.installbox[hidden]{display:none}
.ib-ic{width:3rem;height:3rem;border-radius:0.75rem;overflow:hidden;display:grid;place-items:center;font-size:1.6rem;background:var(--accent)}
.ib-ic img{width:100%;height:100%;display:block}
.ib-tx b{display:block;font-size:.98rem}
.ib-tx span{font-size:.82rem;color:var(--muted)}
.ib-bt{grid-column:1/-1;display:flex;gap:0.5rem}
.ib-bt .btn{padding:0.5625rem 0.625rem;font-size:.92rem}
.iossteps{margin:0.375rem 0 0;padding-left:1.375rem;display:flex;flex-direction:column;gap:0.625rem;font-size:.95rem}
.ios-ic{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:0.375rem;background:var(--bg);border:1.5px solid var(--line);font-weight:700;margin-left:2px}
.side-b{--cr:#e8479a;--cy:#f28a1c;--cg:#16b3c2;--cb:#8a4fd8}
.side-b .card{border-color:#15101f}
.side-b .card::before{border-color:rgba(0,0,0,.55)}
.side-b .card .cn{color:#15101f}
.side-b .card .face{color:#15101f;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.side-b .card .wheel span{color:#15101f;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.side-b .c-w{--cc:#f6f4fb;color:#15101f}
.side-b .c-w .face{text-shadow:none}
.side-b .wheel,.side-b .mw{border-color:#15101f}
.side-b .wxf{border-color:rgba(0,0,0,.7)}
.side-b .back{--cc:#1a0f2e;background:var(--verso,repeating-linear-gradient(135deg,#1a0f2e 0 0.4375rem,#4a2a7a 0.4375rem 0.875rem));border-color:#0b0712;box-shadow:0 3px 0 rgba(0,0,0,.5),0 0 0.875rem rgba(138,79,216,.55)}
.side-b .back::before{border-color:rgba(22,179,194,.7)}
.side-b .back .face{background:#16b3c2;color:#140c22;text-shadow:none}
.side-a{--cr:#e0433a;--cy:#f0b21f;--cg:#2c9a57;--cb:#2b6bd6}
.side-a .card{border-color:#fff}
.side-a .card::before{border-color:rgba(255,255,255,.33)}
.side-a .card .cn{color:#fff}
.side-a .c-w{--cc:var(--ck);color:#fff}
.side-a .card .face{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.side-a .card .wheel span{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.side-a .wheel,.side-a .mw{border-color:#fff}
.hside{font-size:.7rem;font-weight:600;color:#8a4fd8;margin-left:0.25rem}
.seat .mini.oside{color:#8a4fd8}
.table.portaling{animation:portalIn .9s cubic-bezier(.3,.7,.3,1)}
@keyframes portalIn{0%{transform:scale(.9) rotate(-3deg);filter:blur(0.25rem) hue-rotate(90deg);opacity:.4}60%{transform:scale(1.02) rotate(.5deg);filter:blur(0)}100%{transform:none;opacity:1}}
.seg[data-key=diff] button[data-v=master][aria-pressed="true"]{background:linear-gradient(90deg,#f0b21f,#ffd36b,#f0b21f);background-size:200% 100%;color:#4a3300;font-weight:700;animation:shimmer 2.5s linear infinite;box-shadow:0 0 0 2px #b88400,0 0 0.75rem rgba(240,178,31,.7)}
.tip.unlock{background:linear-gradient(90deg,#fff3cf,#ffe39a);border-color:#f0b21f;color:#4a3300}
.tip.unlock b{color:#9a6a00}
/* balão de pensar (balaoNovo, ui.js): da largura da cadeira (--bw) e sempre com a mesma proporção; tudo dentro é medido
   em --e, uma fração dessa largura (--f, calculada para o conteúdo caber), então o balão inteiro acompanha a cadeira */
.think{position:fixed;z-index:27;width:var(--bw);aspect-ratio:2/1;display:grid;place-items:center;box-sizing:border-box;background:var(--panel);border:1.5px solid var(--accent);border-radius:calc(var(--bw)*.09);box-shadow:0 0.25rem 0.75rem rgba(20,10,50,.2);pointer-events:none;animation:noteIn .25s}
.think .tin{--e:calc(var(--bw)*var(--f,.1));display:flex;align-items:center;gap:calc(var(--e)*.3)}
.think .tdots{font-size:calc(var(--e)*.9);line-height:1}
.think .tis{display:grid;gap:calc(var(--e)*.25);justify-items:center;align-items:center}
.think .ti{width:calc(var(--e)*1.25);height:calc(var(--e)*1.25);border-radius:calc(var(--e)*.375);display:grid;place-items:center;font-size:calc(var(--e)*.72);font-weight:700;color:#fff;transition:transform .12s,box-shadow .12s;background:var(--line)}
.think .ti.pl{border-radius:50%}
.think .ti.rl{background:var(--bg);color:var(--ink);font-size:calc(var(--e)*.8)}
.think .ti.cd{width:var(--e);height:calc(var(--e)*1.5);border-radius:calc(var(--e)*.25);border:calc(var(--e)*.09) solid #fff;box-sizing:border-box;background:var(--cc)}
.think .ti.cd b{font-size:calc(var(--e)*.55);text-shadow:0 1px 0 rgba(0,0,0,.3)}
.think .ti.back{background:var(--verso-mini,repeating-linear-gradient(135deg,#3b2f6b 0 3px,#46397d 3px 0.375rem))}
.think .ti.hl{transform:scale(1.2);box-shadow:0 0 0 calc(var(--e)*.12) var(--accent)}
.think .ti.pick{transform:scale(1.25);box-shadow:0 0 0 calc(var(--e)*.12) var(--cg),0 0 calc(var(--e)*.5) var(--cg)}
.think .ti.bad{background:var(--cr)!important;box-shadow:0 0 0 calc(var(--e)*.12) var(--cr)}
.simon-dots i{display:grid;place-items:center;font-size:.6rem;color:#fff;font-weight:700}
.simon-dots i.bad{background:var(--cr)}
#simonBtns button{height:4rem;font-size:.85rem}
.swaps.row{flex-direction:row;flex-wrap:wrap;justify-content:center}
/* escolher um jogador: as cadeiras descem até a janela (as de verdade somem enquanto isso) */
#swapOv.alvos .sheet{animation:none;overflow:visible;padding-left:0;padding-right:0;text-align:center}
.alvo-rail{padding:0.75rem 0 0.25rem;overflow:visible}
.alvo-rail .seat{cursor:pointer}
.alvo-rail .seat[role=button]:hover,.alvo-rail .seat[role=button]:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);outline:none}
.alvo-rail .seat.nao{opacity:.4;filter:grayscale(.7);cursor:default}
#swapOv.voltando .sheet h2,#swapOv.voltando .sheet .sub,#swapOv.voltando .alvo-eu{opacity:0;transition:opacity .15s}
#swapOv.voltando .sheet{background:transparent;box-shadow:none;transition:background .2s,box-shadow .2s}
.rail.escolhendo .seat{visibility:hidden}
.rail.alvo-voo{position:fixed;left:0;top:0;width:0;height:0;padding:0;overflow:visible;z-index:32;pointer-events:none}
.seat.alvo-voando{position:fixed;margin:0;z-index:32;pointer-events:none;transform-origin:0 0;box-sizing:border-box}
.alvo-eu{display:block;margin:0.75rem auto 0;min-width:9rem;text-align:center;justify-content:center}
.swaps.row button{flex-direction:column;align-items:center;gap:0.25rem;min-width:5.375rem;flex:0 1 6.875rem;text-align:center;padding:0.625rem 0.5rem}
.swaps.row button>small{margin:0}
/* Teia: a teia cobre a cadeira do adversário e cada carta da sua mão */
/* o desenho da teia (também nos pedaços dela quando quem estava preso se livra: .teia-fio, teiaRasgaFx) */
:root{--teia:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23f4f0ff' stroke-width='1.1'%3E%3Cpath d='M50 0V100M0 50H100M5 5L95 95M95 5L5 95'/%3E%3Cpath d='M50 12L77 23 88 50 77 77 50 88 23 77 12 50 23 23Z'/%3E%3Cpath d='M50 26L67 33 74 50 67 67 50 74 33 67 26 50 33 33Z'/%3E%3Cpath d='M50 38L58 42 62 50 58 58 50 62 42 58 38 50 42 42Z'/%3E%3C/svg%3E")}
.seat.webbed::after,.handwrap.webbed .hand .card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.8;background:var(--teia) center/cover no-repeat}
.teia-fio{position:fixed;margin:0;pointer-events:none;z-index:26;background:var(--teia) center/cover no-repeat;opacity:.8}
.handwrap.webbed .hand .card::after{opacity:.75;z-index:2}
.tip{background:color-mix(in srgb,var(--accent) 12%,var(--panel));border:1.5px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:0.875rem;padding:0.625rem 0.75rem;margin:0.25rem 0 0.875rem;font-size:.86rem;line-height:1.4}
.tip b{display:block;font-size:.78rem;color:var(--accent);margin-bottom:2px}
.discard{cursor:pointer}
.hrow{display:flex;gap:0.75rem;align-items:flex-start;padding:0.625rem 2px;border-bottom:1px solid var(--line)}
.hrow .card{flex:none;pointer-events:none}
.hbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:.85rem}
.hbody b{font-size:.95rem}
.hbody span{color:var(--muted)}
.rulestrip{cursor:grab}
.card .cb.bad{border-color:var(--cr);background:#fde8e6;color:#8a1f18}
.deckbtn.frozen{background-image:linear-gradient(160deg,rgba(235,247,255,.85),rgba(160,210,250,.55) 55%,rgba(210,236,255,.8)),repeating-linear-gradient(135deg,#3b2f6b 0 0.4375rem,#46397d 0.4375rem 0.875rem);border-color:#d8efff;box-shadow:0 0 0 2px #9fd3ff,0 0 1rem rgba(120,190,255,.7),0 3px 0 rgba(0,0,0,.22)}
.deckbtn.frozen:not(.reveal) .face{background:#e8f6ff;color:#2b6bd6}
/* com a Revelação, a carta do topo aparece pela camada de gelo, mais fina: as cores e o símbolo dela continuam legíveis */
.deckbtn.frozen.reveal{background-image:linear-gradient(160deg,rgba(235,247,255,.55),rgba(160,210,250,.25) 55%,rgba(210,236,255,.5))}
.deckbtn.frozen::after{content:"";position:absolute;left:6%;right:6%;top:-3px;height:0.75rem;background:repeating-linear-gradient(90deg,#e8f6ff 0 0.375rem,transparent 0.375rem 0.6875rem);clip-path:polygon(0 0,100% 0,100% 30%,95% 100%,88% 30%,80% 90%,70% 30%,62% 100%,52% 30%,44% 80%,35% 30%,26% 100%,18% 30%,10% 85%,0 30%);pointer-events:none}
.thorns{position:absolute;left:calc(var(--cw)*-.08);top:calc(var(--cw)*-.075);width:calc(var(--cw)*1.16);height:calc(var(--cw)*1.65);z-index:2;pointer-events:none;
  opacity:0;scale:.82;transition:opacity .3s,scale .45s cubic-bezier(.2,.9,.3,1.35),translate .18s;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.thorns.on{opacity:1;scale:1}
/* selos do monte: irmãos do monte, por cima dos espinhos; sobem junto com o monte no mouse */
.pile .cb.deckcb{z-index:3;transition:translate .18s}
.pile .deckcb[hidden]{display:none}
.deckbtn.can:hover~.thorns,.deckbtn.can:hover~.deckcb{translate:0 -3px}
.thorns svg{display:block;width:100%;height:100%}
.deckbtn.gone{background:transparent!important;border:3px dashed var(--muted);box-shadow:none}
.deckbtn.gone::before{border-color:transparent}
.deckbtn.gone .face,.deckbtn.gone .cn,.deckbtn.gone .wheel,.deckbtn.gone .eye{visibility:hidden}
.card .cb,.pile .deckcb{position:absolute;top:-0.8125rem;left:50%;transform:translateX(-50%);font-size:.72rem;font-weight:700;line-height:1.35;background:var(--panel);color:var(--ink);border:1.5px solid var(--accent);border-radius:999px;padding:0 0.375rem;white-space:nowrap;text-shadow:none;z-index:2;pointer-events:none;box-shadow:0 2px 0.25rem rgba(0,0,0,.15)}
.dizzytag{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:3;background:linear-gradient(90deg,#c2477f,#8e5bd0,#2b9aa0,#c2477f);background-size:300% 100%;color:#fff;font-weight:700;font-size:.74rem;padding:2px 0.75rem;border-radius:999px;white-space:nowrap;pointer-events:none;animation:dzbg 3s linear infinite}
@keyframes dzbg{to{background-position:-300% 0}}
/* Confusão: as cartas balançam, cada uma no seu ritmo (duração e fase vêm do número da carta, postas pela tela), sem mudar
   de cor e sem usar o translate (que é o deslize da mão ao redesenhar): o balanço não recomeça nem pula quando a mão muda */
.hand.dizzy .card{animation:dizzy var(--dzd,2.2s) ease-in-out var(--dzt,0s) infinite}
@keyframes dizzy{0%,100%{rotate:calc(var(--ang,0deg) - 5deg);filter:brightness(var(--esc,1)) blur(0)}25%{rotate:calc(var(--ang,0deg) + 4deg);filter:brightness(var(--esc,1)) blur(.4px)}50%{rotate:calc(var(--ang,0deg) - 3deg);filter:brightness(var(--esc,1)) blur(0)}75%{rotate:calc(var(--ang,0deg) + 6deg);filter:brightness(var(--esc,1)) blur(.5px)}}
.wxf{position:absolute;inset:calc(var(--cw)*.05);border-radius:calc(var(--cw)*.09);border:max(1px,calc(var(--cw)*.026)) dashed rgba(255,255,255,.85);pointer-events:none}
.card:has(.wxf)::before{display:none}
.hand .card.calm .face,.hand .card.calm .cn,.hand .card.calm .wheel{opacity:.55;filter:saturate(.5)}
#fx3d{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:24}
.sheet{scrollbar-width:thin;scrollbar-color:var(--accent) transparent;overscroll-behavior:contain}
.sheet::-webkit-scrollbar{width:0.5rem}
.sheet::-webkit-scrollbar-track{background:transparent;margin:1.125rem 0}
.sheet::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 70%,transparent);border-radius:999px;border:2px solid var(--panel)}
.sheet::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.ov.lite .sheet{overflow-x:hidden}
.sv{display:inline-block;font-style:normal}
/* selo voando: fora do lugar até o ícone chegar (mede: medido por um instante, sem aparecer) */
.sv.oculto,.tst.oculto{display:none}.sv.oculto.mede,.tst.oculto.mede{display:inline-block;visibility:hidden}
.tag.stat.oculto{visibility:hidden}
.pend{position:absolute;left:50%;bottom:calc(100% + 1rem);transform:translateX(-50%);z-index:7;pointer-events:none;display:flex;flex-direction:column;align-items:center}
.pend[hidden]{display:none}
.pend b{font-size:calc(var(--cw)*.85);line-height:1;font-weight:800;color:var(--cr);text-shadow:0 3px 0 rgba(0,0,0,.2),0 0 1.125rem rgba(224,67,58,.55);animation:pendPulse 1.1s ease-in-out infinite}
.pend span{font-size:.72rem;font-weight:700;color:#fff;background:var(--cr);border-radius:999px;padding:1px 0.5625rem;margin-top:2px;white-space:nowrap}
.pend.bump b{animation:pendBump .5s cubic-bezier(.2,.9,.3,1.4),pendPulse 1.1s ease-in-out .5s infinite}
@keyframes pendPulse{50%{transform:scale(1.08)}}
@keyframes pendBump{0%{transform:scale(2.2);opacity:0}100%{transform:none;opacity:1}}
/* com 4 ou 5 adversários no celular as cadeiras só ficam mais estreitas: a altura é a mesma (o nome menor guarda a altura da linha) */
.rail.many .seat{padding-left:3px;padding-right:3px;border-radius:0.75rem}
.rail.many .seat .nm{font-size:.74rem;line-height:calc(.85rem*1.35)}
.rail.many .seat .ct{font-size:.68rem}
.rail.many{padding-left:0.375rem;padding-right:0.375rem}
.seat .ct b{font-size:1.05em}
.seat .ct.c4{color:#c98a00;font-weight:600}
.seat .ct.c3{color:#e07a10;font-weight:700}
.seat .ct.c2{color:#e0433a;font-weight:700;font-size:.85rem}
.seat .ct.c1{color:#fff;background:var(--cr);font-weight:700;border-radius:999px;padding:0 0.375rem;display:inline-block;font-size:.85rem;animation:pop .35s}
.ov.lite{background:rgba(15,10,30,.12);align-items:flex-end;padding-top:calc(env(safe-area-inset-top,0px) + 3.125rem);padding-bottom:var(--liteBottom,13.75rem);pointer-events:none}
.ov.lite .sheet{pointer-events:auto;border-radius:1.375rem;width:min(94vw,32.5rem);max-height:calc(100dvh - 3.75rem - var(--liteBottom,13.75rem));padding:0.875rem 1rem 1rem;box-shadow:0 0.875rem 2.5rem rgba(20,10,50,.35)}
.ov.lite .sheet h2{font-size:1.15rem}
.ov.lite .sheet p.sub{margin-bottom:0.5rem}
.colors .cpick{height:auto;background:var(--bg);color:var(--ink);border:3px solid var(--pc);border-radius:1rem;padding:0.625rem 0.25rem 0.5rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem;font-size:.9rem;box-shadow:none}
.colors .cpick small{font-size:.7rem;color:var(--muted);font-weight:500}
.colors .cpick:hover .card,.colors .cpick:focus-visible .card{transform:translateY(-0.25rem) rotate(-3deg)}
.colors .cpick .card{pointer-events:none}
.mi{flex:none;width:2rem;height:2rem;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);display:grid;place-items:center;font-size:1rem;line-height:1;font-weight:700}
.mi.txt{font-size:.72rem}
.act-i{display:flex;gap:0.75rem;align-items:flex-start}
.act-i>div{flex:1;min-width:0}
.legend{margin:0.5rem 2px 0;font-size:.82rem;color:var(--muted);line-height:1.35}
.legend.warn{color:var(--cy);font-weight:500}
.act-basics+.legend{margin:0 2px 0.375rem}
.row2.stick{position:sticky;bottom:calc(-1.125rem - env(safe-area-inset-bottom,0px));background:var(--panel);margin:0 -1.125rem calc(-1.125rem - env(safe-area-inset-bottom,0px));padding:0.75rem 1.125rem calc(0.75rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);z-index:2}
@media (min-width:600px){.row2.stick{bottom:-1.25rem;margin-bottom:-1.25rem;padding-bottom:0.875rem}}
.pk{display:flex;gap:0.75rem;align-items:flex-start;padding:0.625rem 2px;border-bottom:1px solid var(--line)}
.pk-ic{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);display:grid;place-items:center;font-size:1.25rem;line-height:1;font-weight:700}
.pk-ic.txt{font-size:.75rem}
.pk-body{flex:1;min-width:0}
.pk-head{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;min-height:2.5rem}
.pk-head b{font-weight:600}
.pk-head .new{font-style:normal;font-size:.7rem;font-weight:600;color:#fff;background:var(--accent);border-radius:999px;padding:1px 0.5rem}
.pk-body p{margin:0;font-size:.84rem;color:var(--muted)}
@media (max-width:430px){.brand small{display:none}.iconbtn{padding:0.3125rem 0.625rem}}
html{overflow:hidden;height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family:"Fredoka","Nunito","Trebuchet MS",system-ui,sans-serif;font-size:1rem;line-height:1.35;
  display:grid;grid-template-rows:auto auto auto 1fr auto auto;grid-template-columns:minmax(0,1fr);overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none; /* nada de texto selecionável (só os campos de digitar) */
}
input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.top{display:flex;align-items:center;justify-content:space-between;padding:0.625rem 0.875rem 0.25rem}
.brand{font-weight:700;font-size:1.15rem}
.brand small{font-weight:500;color:var(--muted);font-size:.8rem;margin-left:0.25rem}
.iconbtn{background:none;border:1.5px solid var(--line);border-radius:999px;padding:0.3125rem 0.75rem;font-size:.9rem;font-weight:500}

/* turn-order rail */
.rail{position:relative;padding:0.5rem 0.625rem 1rem;overflow-x:auto;scrollbar-width:none}
.seatrow{display:flex;align-items:center;justify-content:center;gap:0.375rem;width:100%}
.rail::-webkit-scrollbar{display:none}
.seat{flex:1 1 0;min-width:0;max-width:8.25rem;background:var(--panel);border:2px solid var(--line);border-radius:0.875rem;padding:0.4375rem 0.375rem 0.375rem;position:relative;text-align:center;transition:border-color .2s,transform .25s,opacity .3s}
.seat.on .av{animation:bob 1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.marker{position:absolute;left:0;top:0;width:0;height:0;border:3px solid var(--accent);border-radius:1.0625rem;pointer-events:none;z-index:3;opacity:0;
  box-shadow:0 0 1rem color-mix(in srgb,var(--accent) 55%,transparent),inset 0 0 0.625rem color-mix(in srgb,var(--accent) 30%,transparent);
  transition:left .42s cubic-bezier(.3,.8,.3,1),top .42s,width .42s,height .42s,opacity .25s}
.marker.noanim{transition:none}
.marker.again{animation:again .45s}
@keyframes again{50%{transform:scale(1.12)}}
.ct.shiny{color:var(--ink);font-weight:700}
.ct.shiny::before{content:'✨ '}
@keyframes shimmer{to{background-position:-200% 0}}
.tdot{position:absolute;top:0.375rem;left:0.375rem;width:0.5625rem;height:0.5625rem;border-radius:50%}
.seat.partner{border-style:dashed;border-color:var(--accent)}
.swaps{display:flex;flex-direction:column;gap:0.5rem;margin-top:0.375rem}
.swaps button{display:flex;align-items:center;gap:0.75rem;border:2px solid var(--line);background:var(--bg);border-radius:0.875rem;padding:0.625rem 0.75rem;font-weight:600;text-align:left}
.swaps .av{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700}
.swaps button>small{margin-left:auto;color:var(--muted);font-weight:500} /* (só nos botões: as cópias das cadeiras na escolha de jogador têm o "/10" do Estouro num small) */
.seat.out{opacity:.35}
.seat .av{width:2rem;height:2rem;border-radius:50%;margin:0 auto 2px;display:grid;place-items:center;font-weight:700;color:#fff;font-size:.95rem}
.seat .nm{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .ct{font-size:.75rem;color:var(--muted);height:2.125rem;margin-top:-2px;display:flex;align-items:center;justify-content:center} /* do tamanho do leque: a cadeira não encolhe */
.tag{position:absolute;left:50%;bottom:-0.6875rem;transform:translateX(-50%);font-size:.68rem;font-weight:600;padding:1px 0.5rem;border-radius:999px;white-space:nowrap;background:var(--bg);border:1.5px solid var(--line);color:var(--muted)}
.tag.next{border-color:var(--accent);color:var(--accent)}
.badge{position:absolute;top:-0.5rem;right:-0.25rem;background:var(--cr);color:#fff;font-weight:700;font-size:.7rem;padding:2px 0.4375rem;border-radius:999px;transform:rotate(6deg);animation:pop .35s}
@keyframes pop{0%{transform:scale(.4) rotate(6deg)}70%{transform:scale(1.2) rotate(6deg)}}

/* table */
/* --chevH: o que as setas ocupam nas bordas de cima e de baixo da mesa; --bandH: a faixa dos botões da mesa, logo acima delas */
:root{--bandH:2.375rem;--chevH:calc(var(--cw0)*.316 + 0.5rem)}
.table{container-type:size;position:relative;margin:0.25rem 0 0;border-radius:0;background:var(--table);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem;min-height:0;padding:calc(var(--chevH) - 0.25rem) 0.75rem var(--chevH);overflow:hidden}
/* lugar guardado para os botões da mesa (que ficam fora dela, acima das partículas 3D): nada da mesa fica embaixo deles */
.mesa-espaco{flex:none;height:var(--bandH);margin-top:auto;pointer-events:none}
/* acima da área central, o espaço do +N que passa por cima dela (com o espaço entre os itens, 1,25rem) */
.mesa-topo{flex:none;height:0.625rem;margin-top:auto;pointer-events:none}
/* o centro da mesa (monte, descarte, círculo, +2/+4) nunca passa da altura da mesa */
/* altura da mesa: a área quadrada (3,9 cartas) + o +N que passa por cima dela (1,25rem) + os dois espaços (1,25rem) + o texto
   de situação com até duas linhas (2,9rem) + a faixa dos botões */
.arena{--cw:min(var(--cw0),calc((100cqh - 3.95rem - var(--bandH))/3.9));position:relative;display:grid;place-items:center;flex:none;width:min(calc(var(--cw)*3.9),80vw);aspect-ratio:1}
/* sentido do jogo: fila de chevrons no topo da mesa (sentido em que a vez passa pelos adversários) e embaixo (oposto).
   Andam pela mask-position, controlada por chevLoop() no ui.js; .ccw vira as duas filas */
.chevs{position:relative;margin:calc(0.25rem + var(--cw0)*.083) 0 calc(var(--cw0)*.083);pointer-events:none;opacity:.32;z-index:25}
/* tamanho proporcional à carta (no celular de referência: 22×14, igual a antes) */
/* ao inverter (--chb, de 1 a 0 enquanto desaceleram) as setas ficam amarelas e mais visíveis */
.chevs{opacity:calc(.32 + .4*var(--chb,0))}
.chev{--chw:calc(var(--cw0)*.367);position:absolute;left:0;right:0;height:calc(var(--cw0)*.233);background:color-mix(in srgb,var(--cy) calc(var(--chb,0)*100%),var(--arrow));
  -webkit-mask:var(--chevsvg) 0 0/var(--chw) 100% repeat-x;mask:var(--chevsvg) 0 0/var(--chw) 100% repeat-x;
  --chevsvg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M7 2l6 5-6 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.chev{-webkit-mask-position:calc(var(--chx,0)*var(--chw)) 0;mask-position:calc(var(--chx,0)*var(--chw)) 0}
.chev.ctop{top:0}
.chev.cbot{bottom:0;transform:scaleX(-1)}
.chevs.ccw .chev.ctop{transform:scaleX(-1)}
.chevs.ccw .chev.cbot{transform:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes burst{50%{opacity:.2}}
.piles{position:relative;display:flex;align-items:center;gap:1.625rem}
.pile{position:relative}
.pile{--stk:0px}
.pile .stack{position:absolute;left:0;top:var(--stk);width:var(--cw);aspect-ratio:2/3;border-radius:calc(var(--cw)*.14);z-index:0;pointer-events:none;
  background:#9d93c4;box-shadow:0 3px 0 rgba(0,0,0,.25);transition:top .35s ease}
.side-b .pile .stack{background:#6d5196}
.pile .deckbtn{z-index:1}
.discard{width:var(--cw);aspect-ratio:2/3;position:relative}
.discard::before{content:"";position:absolute;inset:-1.375rem;border-radius:50%;background:var(--ring,transparent);opacity:.6;filter:blur(0.75rem);transition:background .35s}
.dc{position:absolute;inset:0;transform:rotate(var(--rot))}
.meta{position:absolute;left:50%;top:calc(50% + var(--cw)*.75 + 1.625rem);transform:translateX(-50%);display:flex;gap:0.375rem;flex-wrap:nowrap;justify-content:center;z-index:2;white-space:nowrap}
.meta .tst{background:var(--panel);border:1.5px solid var(--line);border-radius:999px;padding:1px 0.5rem;font-size:.8rem;font-weight:700;cursor:pointer;color:var(--ink)}
.meta .tst.warn{border-color:var(--cr)}
.chip{background:var(--panel);border:1.5px solid var(--line);border-radius:999px;padding:3px 0.6875rem;font-size:.84rem;font-weight:500;display:flex;align-items:center;gap:0.375rem}
.chip .dot{width:0.6875rem;height:0.6875rem;border-radius:50%}
.chip.warn{background:var(--cr);color:#fff;border-color:transparent;font-weight:600}
/* uma linha só (a mesa reserva só uma): o que passar disso termina em "…" */
.status{font-weight:600;font-size:1.02rem;text-align:center;min-height:1.4em;padding:0 0.5rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log{font-size:.8rem;color:var(--muted);text-align:center;min-height:2.2em;max-width:36ch}
.log div:first-child{color:var(--ink)}
/* card effects */
.fx{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:8}
.fxin{display:flex;flex-direction:column;align-items:center;gap:0.25rem;animation:fxout 1.25s ease-in forwards}
.fxg{font-size:calc(var(--cw)*1.5);font-weight:700;line-height:1;color:var(--fxc);text-shadow:0 0.25rem 0 rgba(0,0,0,.25),0 0 1.5rem var(--fxc)}
.fxg svg{width:calc(var(--cw)*2.4);height:calc(var(--cw)*2.4);display:block;filter:drop-shadow(0 0 0.625rem var(--fxc))}
.fxcap{background:var(--fxc);color:#fff;font-weight:700;font-size:.95rem;padding:0.25rem 0.875rem;border-radius:1rem;white-space:normal;text-align:center;max-width:min(78vw,18.125rem);box-shadow:0 3px 0 rgba(0,0,0,.2)}
.k-stamp{animation:stamp .45s cubic-bezier(.2,.9,.3,1.3)}
.k-roll{animation:roll .3s linear infinite}
@keyframes roll{25%{transform:rotate(25deg) translateY(-0.375rem)}50%{transform:rotate(0) translateY(0)}75%{transform:rotate(-25deg) translateY(-0.375rem)}}
.k-slam{animation:slam .5s cubic-bezier(.2,.9,.3,1.4)}
.k-cw svg{animation:rot 1s cubic-bezier(.3,.7,.3,1)}
.k-ccw svg{transform:scaleX(-1)}.k-ccw svg g{animation:rot 1s cubic-bezier(.3,.7,.3,1);transform-origin:100px 100px}
.k-cw svg g{transform-origin:100px 100px}
@keyframes stamp{0%{transform:scale(2.6) rotate(-25deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes slam{0%{transform:translateY(-3.75rem) scale(.4);opacity:0}60%{transform:translateY(0.375rem) scale(1.15)}100%{transform:none;opacity:1}}
@keyframes rot{from{transform:rotate(-270deg) scale(.5);opacity:0}to{transform:none;opacity:1}}
@keyframes fxout{0%,70%{opacity:1}100%{opacity:0;transform:scale(.9)}}
.burst{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:1;border-radius:50%;border:0.5rem solid var(--fxc);transform:translate(-50%,-50%);animation:burst2 .8s ease-out forwards;pointer-events:none;z-index:4}
@keyframes burst2{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(-50%,-50%) scale(4);opacity:0;border-width:2px}}
.stamp{position:fixed;z-index:26;display:grid;place-items:center;pointer-events:none;border-radius:1rem;background:color-mix(in srgb,var(--fxc) 22%,transparent);color:var(--fxc);font-weight:700;animation:stampSeat 1.1s ease-out forwards;text-shadow:0 0 0.75rem var(--fxc)}
@keyframes stampSeat{0%{transform:scale(1.8) rotate(-20deg);opacity:0}25%{transform:none;opacity:1}75%{opacity:1}100%{opacity:0}}
.handwrap{position:relative;z-index:5;transition:background .4s}
.handwrap.yourturn{background:linear-gradient(to top,color-mix(in srgb,var(--accent) 24%,transparent),transparent 90%)}
/* Mão Colorida: faixas diagonais que correm sem parar. O ladrilho tem o tamanho exato de um período do padrão
   (16rem na diagonal = 22.6274rem na horizontal e na vertical), então as emendas não aparecem; a fase vem do relógio
   (animation-delay posto pela tela), então redesenhar a cadeira não recomeça a animação */
:root{--shinyA:24%;--shinyP:22.6274rem}
.seat.shiny{--shinyG:repeating-linear-gradient(135deg,color-mix(in srgb,var(--cr) var(--shinyA),transparent) 0,color-mix(in srgb,var(--cy) var(--shinyA),transparent) 4rem,color-mix(in srgb,var(--cg) var(--shinyA),transparent) 8rem,color-mix(in srgb,var(--cb) var(--shinyA),transparent) 12rem,color-mix(in srgb,var(--cr) var(--shinyA),transparent) 16rem);animation:shinyFlow 14s linear infinite;background-size:var(--shinyP) var(--shinyP)}
.seat.shiny{background-image:var(--shinyG)}
@keyframes shinyFlow{from{background-position:0 0}to{background-position:var(--shinyP) 0}}
.handwrap.arrive::before{content:"";position:absolute;left:0;right:0;top:0;height:0.25rem;border-radius:0.25rem;background:var(--accent);box-shadow:0 0 0.875rem var(--accent);transform-origin:var(--sweep,right);animation:sweep .5s .25s ease-out backwards,fade 1.4s .75s forwards}
@keyframes sweep{from{transform:scaleX(0)}}
@keyframes fade{to{opacity:0}}
/* weather */
.table{transition:background .6s}
.table::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .6s}
.table.bolt::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;pointer-events:none;animation:bolt .7s ease-out forwards;z-index:4}
@keyframes bolt{0%,20%{opacity:.45}10%,40%{opacity:0}30%{opacity:.3}100%{opacity:0}}
.table.flick::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;pointer-events:none;animation:flick 1.1s ease-out forwards;z-index:4}
@keyframes flick{0%{opacity:0}8%{opacity:.16}16%{opacity:.03}26%{opacity:.11}100%{opacity:0}}
.toast{z-index:8;position:absolute;top:calc(var(--chevH) + 0.25rem);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:0.375rem 1rem;border-radius:999px;font-weight:700;font-size:.95rem;opacity:0;pointer-events:none;white-space:nowrap;z-index:3}
.toast.show{animation:toast 1.5s ease-out}
/* aviso da Carta do Rei: selo dourado logo abaixo do aviso rápido, para os dois aparecerem juntos */
.toast.king{top:calc(var(--chevH) + 2.5rem);background:#b8860b;color:#fff}
.toast.king.show{animation-duration:1.9s}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-0.5rem) scale(.85)}12%{opacity:1;transform:translate(-50%,0) scale(1.05)}20%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0}}

/* cards: as camadas do baralho vêm de variáveis (js/arte.js); sem nada definido, é o baralho de hoje.
   --carta-camadas: moldura e textura (imagens); --carta-mistura: como a textura se mistura com a cor da carta */
.card{width:var(--cw);aspect-ratio:2/3;border-radius:calc(var(--cw)*var(--carta-raio,.14));background-color:var(--cc);background-image:var(--carta-camadas,none);background-size:var(--carta-tamanhos,cover);background-position:center;background-blend-mode:var(--carta-mistura,normal);border:max(1.5px,calc(var(--cw)*.04)) solid var(--carta-borda,#fff);box-sizing:border-box;position:relative;color:var(--sim-cor,#fff);font-weight:700;display:grid;place-items:center;padding:0;flex:0 0 auto;box-shadow:0 3px 0 rgba(0,0,0,.22);transition:transform .18s,opacity .18s,box-shadow .18s}
.card::before{content:"";position:absolute;inset:calc(var(--cw)*.05);border-radius:calc(var(--cw)*.09);border:max(1px,calc(var(--cw)*.026)) solid var(--carta-filete,rgba(255,255,255,.33));pointer-events:none}
/* símbolo desenhado: o PNG é um molde (só o formato conta) pintado com a cor do texto da carta; a sombra fica na face */
.sim{display:block;width:1em;height:1em;background:currentColor;-webkit-mask:var(--img) center/contain no-repeat;mask:var(--img) center/contain no-repeat}
.card .face.arte,.card .d4s.arte,.card .wheel>.arte{text-shadow:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}
.side-b .card .face.arte{filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
/* coringa desenhado: o molde preenchido com as 4 cores; o +4 fica por cima */
.wheel.arte,.mw.arte{border:none;border-radius:0;-webkit-mask:var(--img) center/contain no-repeat;mask:var(--img) center/contain no-repeat}
.d4c{position:relative;width:58%;aspect-ratio:1;display:grid;place-items:center}
.d4c .wheel{position:absolute;inset:0;width:100%}
.d4s{position:relative;font-size:calc(var(--cw)*.26)}
/* combo com desenho: os dois símbolos lado a lado */
.combo{display:inline-flex;align-items:center;gap:.04em}
.combo .sim{display:inline-block}
.card .face{font-size:calc(var(--cw)*.44);line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.card .face.sym{font-size:calc(var(--cw)*.4)}
.card .face.sp.sm{font-size:calc(var(--cw)*.27);letter-spacing:-.02em}
.card .cn.sm{font-size:calc(var(--cw)*.13)}
.peekc{position:fixed;z-index:27;pointer-events:none;animation:peek 2.8s ease forwards}
@keyframes peek{0%{opacity:0;transform:translateY(-0.75rem) scale(.6)}12%{opacity:1;transform:scale(1)}85%{opacity:1}100%{opacity:0}}
.mini{font-size:.7rem;font-weight:600;display:block}
.simon-dots{display:flex;gap:0.375rem;justify-content:center;margin:0.375rem 0 0.25rem}
.simon-dots i{width:0.875rem;height:0.875rem;border-radius:50%;background:var(--line)}
.simon-dots i.on{background:var(--accent)}
.card .face.sp{font-size:calc(var(--cw)*.36);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.card .cn{position:absolute;top:calc(var(--cw)*.065);left:calc(var(--cw)*.09);font-size:calc(var(--cw)*.19);line-height:1}
.card .cn.br{top:auto;left:auto;bottom:calc(var(--cw)*.065);right:calc(var(--cw)*.09);transform:rotate(180deg)}
.mw{display:inline-block;width:calc(var(--cw)*.17);aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--cr) 0 25%,var(--cy) 0 50%,var(--cg) 0 75%,var(--cb) 0);border:1px solid #fff;vertical-align:top}
.c-k{--cc:var(--cgray)}.c-r{--cc:var(--cr)}.c-y{--cc:var(--cy)}.c-g{--cc:var(--cg)}.c-b{--cc:var(--cb)}.c-w{--cc:var(--ck)}
.wheel{width:58%;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--cr) 0 25%,var(--cy) 0 50%,var(--cg) 0 75%,var(--cb) 0);display:grid;place-items:center;border:max(1px,calc(var(--cw)*.026)) solid #fff}
.wheel span{font-size:calc(var(--cw)*.26);text-shadow:0 1px 0 rgba(0,0,0,.5)}
.back{--cc:#3b2f6b;background:var(--verso,repeating-linear-gradient(135deg,#3b2f6b 0 0.4375rem,#46397d 0.4375rem 0.875rem))}
.back .face{font-size:calc(var(--cw)*.2);background:#fff;color:#3b2f6b;padding:3px 0.375rem;border-radius:0.375rem;text-shadow:none;transform:rotate(-12deg);opacity:var(--verso-rotulo,1)}
button.card:disabled,.deckbtn.off{cursor:default}
.deckbtn.can:hover{transform:translateY(-3px)}
/* na sua vez, sem carta para jogar: o monte pulsa para lembrar que é nele que se compra */
.deckbtn.chama{animation:chama 1.3s ease-in-out infinite}
@keyframes chama{50%{box-shadow:0 0 0 3px var(--accent),0 0 1.125rem var(--accent),0 3px 0 rgba(0,0,0,.22)}}
.deckbtn.reveal{opacity:.95}
.flyclone{z-index:27;box-shadow:0 0.5rem 1.125rem rgba(20,10,50,.3)!important}
/* carta voando por cima da tela (lqVoo, js/leque.js): face e verso, para virar no caminho */
.cartavoo{position:fixed;z-index:27;pointer-events:none}
/* vitória: onda dourada saindo da pilha (vitoriaFx) */
.onda-vitoria.clarao{border:none;box-shadow:none;background:radial-gradient(circle,rgba(255,236,150,.95) 0,rgba(255,210,77,.55) 35%,rgba(255,210,77,0) 70%)}
.onda-vitoria{position:fixed;z-index:26;pointer-events:none;border-radius:50%;border:0.25rem solid #ffd24d;box-shadow:0 0 1.25rem #ffd24d,inset 0 0 1rem rgba(255,210,77,.6)}
.cartavoo .giro{position:absolute;inset:0;transform-style:preserve-3d}
.cartavoo .card{position:absolute;left:0;top:0;margin:0;transition:none;animation:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0.375rem 0.875rem rgba(20,10,50,.28)}
.cartavoo .card.tras{transform:rotateY(180deg)}
.ghost{position:fixed;z-index:26;pointer-events:none;margin:0}

/* hand */
.handwrap{padding:0.25rem 0 0;min-height:calc(var(--cw)*1.5 + 2.125rem)}
.hand{display:flex;align-items:flex-start;justify-content:safe center;overflow-x:auto;overflow-y:hidden;padding:1.75rem 0.875rem calc(0.25rem + var(--cw)*.3);scrollbar-width:none;min-height:calc(var(--cw)*1.8 + 2rem)} /* (embaixo, a queda das pontas do leque) */
.hand::-webkit-scrollbar{display:none}
.hand .card+.card{margin-left:var(--ov,0.375rem)}
/* com a mão rolando, as cartas que sairiam da tela param nas bordas, uma pilha em cada lado (maoAjusta) */
.hand .card{position:sticky;left:calc(var(--k,0)*var(--ps,0px));right:calc((var(--n,1) - 1 - var(--k,0))*var(--ps,0px))}
.hand.myturn .card.ok{transform:translateY(-0.625rem)}
.hand.myturn .card.ok:hover{transform:translateY(-0.875rem)} /* (um pouco acima das outras, na direção da inclinação dela: o translate vem depois do rotate) */
/* a sua última carta: uma aura dourada que respira (some atrás da marca do Corte, que é mais importante) */
.hand .card.ultima{animation:auraCarta 1.6s ease-in-out infinite}
.hand .card.ultima.shake{animation:shake .3s,auraCarta 1.6s ease-in-out infinite}
.hand .card.perigo{animation:perigoCarta 1.6s ease-in-out infinite}
.hand .card.perigo.shake{animation:shake .3s,perigoCarta 1.6s ease-in-out infinite}
@keyframes perigoCarta{0%,100%{box-shadow:0 0 0 calc(1px + 2px*var(--lv)) rgba(255,80,70,calc(.3 + .7*var(--lv))),0 0 calc(0.3rem + 0.6rem*var(--lv)) calc(0.05rem + 0.2rem*var(--lv)) rgba(255,60,50,calc(.25 + .5*var(--lv))),0 3px 0 rgba(0,0,0,.22)}50%{box-shadow:0 0 0 calc(1px + 2px*var(--lv)) rgba(255,120,110,calc(.45 + .55*var(--lv))),0 0 calc(0.5rem + 1rem*var(--lv)) calc(0.1rem + 0.4rem*var(--lv)) rgba(255,60,50,calc(.4 + .55*var(--lv))),0 3px 0 rgba(0,0,0,.22)}}
@keyframes auraCarta{0%,100%{box-shadow:0 0 0 3px #ffd24d,0 0 0.75rem 0.2rem rgba(255,200,60,.6),0 3px 0 rgba(0,0,0,.22)}50%{box-shadow:0 0 0 3px #ffe58a,0 0 1.5rem 0.5rem rgba(255,200,60,.9),0 3px 0 rgba(0,0,0,.22)}}
.hand .card.jump{transform:translateY(-0.625rem);box-shadow:0 0 0 3px var(--cy),0 3px 0 rgba(0,0,0,.22);animation:wiggle .9s ease-in-out infinite}
/* fora da sua vez as cartas ficam escurecidas (menos as que podem entrar na jogada, com o Corte) */
.hand .card{filter:brightness(var(--esc,1));transition:transform .18s,opacity .18s,box-shadow .18s,filter .3s,rotate .18s,margin-top .18s,margin-bottom .18s}
/* leque da mão: cada carta inclina pela posição na tela (--ang, --cai: maoInclina), girando na base; o que sobe (jogável,
   mouse) sobe na direção da inclinação. Rolando a mão, a inclinação acompanha sem atraso */
.hand .card{transform-origin:50% 100%;rotate:var(--ang,0deg);margin-top:var(--cai,0px);margin-bottom:calc(-1*var(--cai,0px))} /* (a de baixo compensa: a mão não cresce) */
.hand.rolando .card{transition:transform .18s,opacity .18s,box-shadow .18s,filter .3s}
.hand.espera .card:not(.jump){--esc:.6}
/* a última carta escurece menos, para a aura continuar à vista */
.hand.espera .card.ultima:not(.jump),.hand.espera .card.perigo:not(.jump){--esc:.85}
.shake{animation:shake .3s}
@keyframes shake{25%{translate:-0.375rem 0}75%{translate:0.375rem 0}}
@keyframes wiggle{0%,100%{rotate:var(--ang,0deg)}50%{rotate:calc(var(--ang,0deg) + 3deg)}}

.btn{flex:1;border:none;border-radius:1rem;padding:0.8125rem 0.625rem;font-weight:600;font-size:1rem;background:var(--panel);border:2px solid var(--line)}
.btn.main{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn.mull{flex:0 0 auto}
.btn:disabled{opacity:.4;cursor:default}
/* botões da mesa: os da vez centralizados, o seu número de cartas no canto direito */
body>.mesabtns{grid-row:4;grid-column:1;align-self:end;position:relative;z-index:25;height:var(--bandH);margin-bottom:var(--chevH);display:flex;align-items:center;justify-content:center;padding:0 4.25rem;pointer-events:none;justify-self:center;width:100%;max-width:calc(7*var(--cwMao) + 36px + 1rem)}
.mb-meio{display:flex;gap:0.5rem;justify-content:center;min-width:0;max-width:100%}
.mb-meio .btn{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;padding:0.375rem 1rem;font-size:.95rem;border-radius:999px;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.22)}
/* a faixa é centrada e vai, no máximo, até a ponta de uma mão de 7 cartas (7 cartas e 6 espaços de 6px), então os
   emojis não ficam longe. O seu número de cartas fica centralizado embaixo da mão */
.minhas{position:absolute;left:50%;bottom:0.2rem;translate:-50% 0;pointer-events:none;z-index:2}
.minhas[hidden]{display:none}
.minhas .cnt{display:block;font-size:1.5rem;font-weight:900;line-height:1;color:#fff;white-space:nowrap;text-shadow:0 0 2px #1d1435,1px 1px 0 #1d1435,-1px -1px 0 #1d1435,1px -1px 0 #1d1435,-1px 1px 0 #1d1435}
/* emojis (multiplayer): o botão acima do seu número de cartas e o menu que rola, subindo dele */
.emojis{position:absolute;right:0.5rem;width:3.25rem;bottom:0.375rem;pointer-events:auto;display:flex;flex-direction:column;align-items:center}
.emojis[hidden],.emoji-menu[hidden]{display:none}
.emoji-btn{width:2.5rem;height:2.5rem;border-radius:50%;border:1.5px solid var(--line);background:var(--panel);font-size:1.35rem;line-height:1;display:grid;place-items:center;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.emoji-btn.txt,.emoji-menu .txt{font-size:.85rem;font-weight:800;letter-spacing:.02em}
.emoji-menu{position:absolute;bottom:calc(100% + 0.375rem);display:flex;flex-direction:column;align-items:center;gap:0.125rem;width:3rem;max-height:calc(6*2.5rem + 0.5rem);overflow-y:auto;padding:0.25rem 0;background:var(--panel);border:1.5px solid var(--accent);border-radius:1.5rem;box-shadow:0 0.5rem 1.5rem rgba(10,5,30,.45);scrollbar-width:none;overscroll-behavior:contain}
.emoji-menu::-webkit-scrollbar{display:none}
.emoji-menu button{flex:none;width:2.5rem;height:2.5rem;border:none;background:none;border-radius:50%;font-size:1.4rem;line-height:1;display:grid;place-items:center;padding:0}
.emoji-menu button:hover,.emoji-menu button:focus-visible{background:color-mix(in srgb,var(--accent) 25%,transparent);outline:none}
.emoji-menu hr{flex:none;width:60%;border:none;border-top:1.5px solid var(--line);margin:0.125rem 0}
.emo-balao{position:fixed;z-index:27;pointer-events:none;min-width:2.75rem;height:2.75rem;padding:0 0.25rem;border-radius:999px;background:var(--panel);border:2px solid var(--accent);display:grid;place-items:center;font-size:1.6rem;line-height:1;box-shadow:0 0.375rem 1rem rgba(10,5,30,.4);animation:emoPop .45s cubic-bezier(.2,.9,.3,1.4)}
.emo-balao.meu{height:3.25rem;min-width:3.25rem;font-size:2rem}
.emo-balao.txt{font-size:1rem;font-weight:800}
.emo-balao.some{opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s}
@keyframes emoPop{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
/* quantos estão assistindo, ao lado do menu */
.assistindo{align-self:center;font-size:.85rem;font-weight:700;color:var(--muted);padding:0 0.25rem}
.assistindo[hidden]{display:none}
/* espaço embaixo da mão, do tamanho que tinham os botões; a barra do tempo fica no alto dele */
/* a área da mão continua embaixo das cartas (com o mesmo fundo), com a barra do tempo para jogar */
body>.handwrap{padding-bottom:1.5rem}

.ov{position:fixed;inset:0;background:rgba(15,10,30,.55);display:none;align-items:flex-end;justify-content:center;z-index:30;padding-top:env(safe-area-inset-top,0px)}
.ov.show{display:flex}
.sheet{background:var(--panel);color:var(--ink);width:100%;max-width:32.5rem;max-height:92%;overflow-y:auto;border-radius:1.5rem 1.5rem 0 0;padding:1.25rem 1.125rem calc(1.125rem + env(safe-area-inset-bottom,0px));animation:rise .28s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(2.5rem);opacity:0}}
@media (min-width:600px){.ov:not(.lite){align-items:center}.sheet{border-radius:1.5rem;padding-bottom:1.25rem}}
.sheet h2{margin:0 0 0.25rem;font-size:1.4rem}
.sheet p.sub{margin:0 0 1rem;color:var(--muted);font-size:.92rem}
.field{margin-bottom:1rem}
.field>.lb{font-weight:600;margin-bottom:0.4375rem;font-size:.95rem}
.group{font-weight:600;font-size:.82rem;color:var(--accent);margin:0.75rem 0 2px}
.seg{display:flex;background:var(--bg);border-radius:0.75rem;padding:3px;gap:3px}
.seg button{flex:1;border:none;background:none;padding:0.5rem 0.25rem;border-radius:0.5625rem;font-weight:500;font-size:.88rem}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
/* idiomas (Opções): muitos para uma linha só, em três colunas */
#idiomaSeg{display:grid;grid-template-columns:repeat(3,1fr)}
.rule{display:flex;gap:0.75rem;align-items:flex-start;padding:0.5625rem 0.25rem;border-bottom:1px solid var(--line);cursor:pointer}
.rule input{margin-top:3px;width:1.25rem;height:1.25rem;accent-color:var(--accent);flex:none}
.rule b{font-weight:600;display:block}
.rule span{font-size:.84rem;color:var(--muted)}
.rule.off{opacity:.45;cursor:default}
.rule em{font-style:normal;font-size:.75rem;color:var(--muted);display:block;margin-top:2px}
.rmore{display:block;margin-top:0.25rem;padding:0.125rem 0;border:none;background:none;color:var(--accent);font-size:.8rem;font-weight:600}
/* listas do Dado, da Maldição e dos climas (uma possibilidade por linha) */
.rlist{display:block;margin-top:0.375rem}
.rlist .rl{display:flex;align-items:center;gap:0.5rem;margin-top:0.25rem;font-size:.84rem;line-height:1.3;text-align:left;color:inherit}
.rlist .rl>i{flex:none;width:1.25rem;display:grid;place-items:center;font-style:normal;line-height:1}
.rlist .rl>span{font-size:inherit;color:inherit}
.colors{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:0.625rem}
.colors button{border:none;border-radius:1.125rem;height:5.25rem;color:#fff;font-weight:700;font-size:1.05rem;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.picks{display:flex;gap:0.875rem;justify-content:center;padding:0.875rem 0 0.375rem;overflow:hidden}
.score{width:100%;border-collapse:collapse;margin:0.5rem 0 1.125rem;font-size:.95rem}
.score td{padding:0.375rem 0.25rem;border-bottom:1px solid var(--line)}
.score td:last-child{text-align:right;font-weight:600}
.row2{display:flex;gap:0.625rem}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.ci-desc{margin:0 0 0.25rem;font-size:.9rem;line-height:1.35}
.rfilter{position:sticky;top:-1px;z-index:2;background:var(--panel);padding:0.375rem 0 0.5rem;margin-bottom:2px}
.rfilter input{width:100%;font:inherit;font-size:.92rem;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:0.75rem;padding:0.5rem 0.75rem;outline:none}
.rfilter input:focus{border-color:var(--accent)}
.rcats{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.5rem}
.rcats::-webkit-scrollbar{display:none}
.rcat{flex:none;font:inherit;font-size:.8rem;font-weight:500;color:var(--ink);background:transparent;border:1.5px solid var(--line);border-radius:999px;padding:0.25rem 0.6875rem;cursor:pointer}
.rcat[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rnone{text-align:center;margin:0.875rem 0}
.rule[hidden],.group[hidden]{display:none}
/* telas grandes (computador): coluna central maior, mesmo arranjo do celular */
/* Telas mais largas que um celular (mais de 3/4 da altura), antes do layout de tela grande: a escala ainda vem da
   altura, mas sobra largura e altura na mesa. As cartas do centro da mesa crescem até ocupar a altura dela (até 45% a
   mais, com o centro mais largo que alto) e as da mão 15% (a área da mão cresce junto e a mesa cede o espaço que sobrava). No celular e em telas baixas (menos de 640), nada muda */
@media (min-aspect-ratio:3/4) and (max-width:899.98px) and (min-height:640px){
  :root{--cwMao:calc(var(--cw0)*1.15)}
  .handwrap{--cw:var(--cwMao)}
  /* o centro da mesa fica mais largo que alto (3,9 por 3 cartas), para as cartas crescerem com a altura que a mesa tem */
  .arena{--cw:min(calc(var(--cw0)*1.45),calc((100cqh - 3.95rem - var(--bandH))/3));aspect-ratio:3.9/3}
}
@media (min-width:900px) and (min-height:560px){
  /* textos, ícones e selos do tamanho que teriam num celular da mesma altura (16px a cada 800px): 20 --u daqui */
  :root{--u:clamp(.55px,min(calc(100dvh/1000),calc(100vw/1222)),1.3px);--cw0:calc(104*var(--u));font-size:calc(20*var(--u));--cwMao:calc(86*var(--u))}
  /* as cartas da mão um pouco menores que as 104 --u da mesa, para sobrar altura para a mesa com os textos maiores */
  .handwrap{--cw:var(--cwMao)}
  /* com a raiz 1,25x maior, os tamanhos do celular já ficam maiores aqui: só as larguras das colunas mudam (62,5rem de antes = 50rem) */
  .rail,.rulestrip{width:min(50rem,100%);margin-left:auto;margin-right:auto}
  .seat{max-width:8.6rem}
  .hand{max-width:50rem;margin:0 auto}
  .notices{width:min(92vw,23rem)}
}
.w-snow i{animation-play-state:paused}
.table[data-weather="blizzard"] .w-snow i,.table.nevando .w-snow i{animation-play-state:running}
/* cada parte na sua linha da grade (a faixa de regras pode sumir sem a mesa perder a linha flexível) */
/* em telas altas e estreitas a mesa tem altura máxima e a sobra fica entre a barra do topo e as cadeiras,
   aproximando os adversários da mesa */
@media (max-aspect-ratio:10/19){
  body{grid-template-rows:1fr auto auto minmax(0,calc(430*var(--u))) auto auto}
  body>.top{align-self:start}
}
/* Terminar e descobrir vencedor: aviso por cima de tudo enquanto o resto da partida é calculado */
.turbo{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:1rem;text-align:center;font-weight:600;font-size:1.15rem;background:color-mix(in srgb,var(--bg) 78%,transparent)}
.turbo[hidden]{display:none}
body>.top{grid-row:1}body>.rulestrip{grid-row:2}body>.rail{grid-row:3}body>.table{grid-row:4;grid-column:1}body>.chevs{grid-row:4;grid-column:1}
/* camadas: setas 25 (acima das partículas 3D, 24); efeitos que voam 26–28; avisos 29; janelas 30 */
body>.handwrap{grid-row:5}

/* chuva, trovão e carta da regra */
.raincard{position:fixed;z-index:27;pointer-events:none;margin:0}
.raindrop{position:fixed;z-index:26;width:2px;border-radius:2px;background:linear-gradient(to bottom,rgba(150,200,255,0),rgba(170,215,255,.9));pointer-events:none}
.rainsplash{position:fixed;z-index:27;width:3rem;height:1rem;margin:-0.5rem 0 0 -1.5rem;border-radius:50%;border:2px solid rgba(170,215,255,.9);pointer-events:none;animation:rainsplash .45s ease-out forwards}
@keyframes rainsplash{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
.boltsvg{position:fixed;left:0;top:0;z-index:28;pointer-events:none;animation:boltflick .55s steps(1,end) forwards}
.boltsvg polyline{fill:none;stroke-linejoin:round;stroke-linecap:round}
.boltsvg .glow{stroke:rgba(255,230,120,.55);stroke-width:12px;filter:blur(4px)}
.boltsvg .core{stroke:#fffbe6;stroke-width:3.5px}
@keyframes boltflick{0%{opacity:1}15%{opacity:.2}30%{opacity:1}55%{opacity:.6}75%{opacity:1}100%{opacity:0}}
.dropcard{position:fixed;z-index:27;pointer-events:none;margin:0}
.fxin.ruleshow{animation:rulein .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes rulein{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.rulefly{position:fixed;z-index:28;pointer-events:none;line-height:1;transform:translate(-50%,-50%)}

/* tela inicial */
.home{position:fixed;inset:0;z-index:29;background:radial-gradient(ellipse at 50% 40%,var(--table),var(--bg) 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:1rem}
.home[hidden]{display:none}
.home-fan{position:relative;width:calc(var(--cw)*3.6);height:calc(var(--cw)*1.9)}
.home-fan .card{position:absolute;left:50%;bottom:0;margin-left:calc(var(--cw)*-.5);transform-origin:50% 130%;transform:rotate(calc((var(--k) - 2)*14deg));animation:homeFloat 3.2s ease-in-out infinite;animation-delay:calc(var(--k)*-.6s)}
@keyframes homeFloat{0%,100%{translate:0 0}50%{translate:0 -0.4rem}}
.home-logo{font-weight:700;font-size:2.8rem;letter-spacing:-.02em;line-height:1}
.home-logo small{font-size:1.1rem;font-weight:600;color:var(--accent);margin-left:.2rem}
.home-btns{display:flex;flex-direction:column;gap:0.625rem;width:min(16rem,100%)}
.home-btns .btn{font-size:1.15rem}
/* Banimento e Mágica: cartas mostradas perto da cadeira (como na Clarividência) ou na mão */
.showc{position:fixed;z-index:27;pointer-events:none;display:flex;align-items:center;gap:0.1875rem}
.showc .card{flex:none}
/* Banimento: carta solta (não usa .showc, que é flex e desalinharia os símbolos da carta) */
.banc{position:fixed;z-index:27;pointer-events:none}
.showc .xn{font-weight:800;font-size:.8rem;color:#fff;background:var(--cr);border-radius:999px;padding:0 0.3125rem;margin-left:0.125rem}
/* Mágica: nuvem de fumaça e faíscas no "puf" (o centro da carta fica em left/top; --s é a largura da carta) */
.puff{position:fixed;z-index:28;width:0;height:0;pointer-events:none}
.puff i,.puff b{position:absolute;left:0;top:0;border-radius:50%}
.puff i{width:calc(var(--s)*.8);height:calc(var(--s)*.8);margin:calc(var(--s)*-.4) 0 0 calc(var(--s)*-.4);background:radial-gradient(circle,rgba(255,255,255,.95),rgba(225,220,245,.7) 45%,rgba(225,220,245,0) 70%);animation:puffSmoke .8s ease-out both}
.puff b{width:0.3125rem;height:0.3125rem;margin:-0.15625rem 0 0 -0.15625rem;background:#fff;box-shadow:0 0 0.375rem #fff,0 0 0.75rem var(--accent);animation:puffSpark .6s ease-out both}
@keyframes puffSmoke{0%{transform:translate(0,0) scale(.35);opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1.7);opacity:0}}
@keyframes puffSpark{0%{transform:translate(0,0) scale(1.3);opacity:1}100%{transform:translate(var(--x),var(--y)) scale(.3);opacity:0}}
/* Dado: dado pequeno rolando perto do adversário */
.minidie{position:fixed;z-index:27;pointer-events:none;width:2.125rem;height:2.125rem;animation:noteIn .2s}
.minidie svg{width:100%!important;height:100%!important}

/* ---------- jogar com amigos (sala) ---------- */
/* barra do tempo para jogar: na divisa da área da mão com a mesa, por trás dos seus selos; diminui das pontas para o centro */
.handwrap>.tempo{position:absolute;left:0;right:0;top:-0.15625rem;height:0.3125rem;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden;pointer-events:none;z-index:3}
.tempo[hidden]{display:none}
.tempo b{display:block;height:100%;transform-origin:center}
.sem-sinal{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 3.25rem);transform:translateX(-50%);z-index:29;background:var(--cr);color:#fff;border-radius:999px;padding:0.375rem 0.875rem;font-weight:600;font-size:.85rem;box-shadow:0 0.25rem 1rem rgba(0,0,0,.4)}
.sem-sinal[hidden]{display:none}
.sala-input{width:100%;box-sizing:border-box;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:0.75rem;padding:0.625rem 0.75rem;font:inherit}
.sala-input:focus{outline:none;border-color:var(--accent)}
.sala-lugares{list-style:none;margin:0 0 0.75rem;padding:0;display:flex;flex-direction:column;gap:0.375rem}
.sala-lugares li{display:flex;align-items:center;gap:0.5rem;background:var(--bg);border-radius:0.75rem;padding:0.5rem 0.625rem;font-weight:600;font-size:.92rem}
.sala-lugares li .av{width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.8rem;flex:0 0 auto}
.sala-lugares li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sala-lugares li .tg{font-size:.75rem;font-weight:500;color:var(--muted)}
.sala-lugares li .tg.ok{color:#5fd38d}
.sala-lugares li.bot{color:var(--muted);font-weight:500}
.sala-lugares li.convida{cursor:pointer}
.sala-lugares li.convida .tg{color:var(--accent)}
.sala-lugares li button{flex:0 0 auto;border:2px solid var(--line);background:var(--panel);color:var(--ink);border-radius:0.5rem;width:2rem;height:2rem;font-size:.9rem;padding:0}
.sala-lugares li button:disabled{opacity:.3}
.sala-check{display:flex;align-items:center;gap:0.5rem;font-size:.9rem;margin:0 0 1rem}
.sala-check input{accent-color:var(--accent);width:1.1rem;height:1.1rem}
.sala-convite{background:var(--bg);border-radius:1rem;padding:0.75rem;margin-bottom:0.75rem;display:flex;flex-direction:column;gap:0.625rem;align-items:stretch}
.sala-qr{align-self:center;border-radius:0.5rem;background:#fff;max-width:100%}
#salaResposta,#salaLerConvite,#salaDentro{display:flex;flex-direction:column;gap:0.625rem}
#salaResposta[hidden],#salaLerConvite[hidden],#salaDentro[hidden]{display:none}
.sala-sem summary{cursor:pointer;color:var(--muted);font-size:.85rem}
.sala-sem[open]{display:flex;flex-direction:column;gap:0.5rem}
.sala-codigo-campo{text-transform:uppercase;letter-spacing:.4em;font-weight:800;font-size:1.75rem;text-align:center;padding:0.75rem;margin:0.25rem 0 0.25rem}
.sala-largo{width:100%}
.sala-largo{margin-top:0.25rem}
/* linhas de botões e o botão largo também somem com hidden (o display delas passava por cima) */
.sala-largo[hidden],.row2[hidden]{display:none}
.sala-online{background:var(--bg);border-radius:1rem;padding:0.75rem;margin-bottom:0.875rem;display:flex;flex-direction:column;gap:0.5rem}
.sala-cod{display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem}
.sala-cod b{font-size:2rem;letter-spacing:.25em;font-weight:800;color:var(--accent)}
.sala-link{word-break:break-all;margin:0}
.sala-online[hidden],.sala-criando[hidden],.sala-convite[hidden]{display:none}
.sala-criando{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem 0}
.sala-roda{width:2.5rem;height:2.5rem;border-radius:50%;border:0.25rem solid var(--line);border-top-color:var(--accent);animation:salaRoda .9s linear infinite}
@keyframes salaRoda{to{transform:rotate(360deg)}}
/* a pergunta (confirmaJogo) fica acima de qualquer janela (30), inclusive a que a abriu */
#confirmOv{z-index:31}
/* desafio: a carta de antes inclinada e o +4 (ou +99) reto por cima, um pouco à direita, quase cobrindo */
.confirm-cartas{position:relative;width:calc(var(--cw)*1.5);height:calc(var(--cw)*1.65);margin:0.5rem auto 0.25rem;--cw:4.5rem}
.confirm-cartas .card{position:absolute;top:calc(var(--cw)*.07);left:0;box-shadow:0 0.25rem 0.75rem rgba(0,0,0,.35)}
.confirm-cartas .card:first-child{transform:rotate(-10deg)}
.confirm-cartas .card:last-child{left:calc(var(--cw)*.42)}
.menu-btns{display:flex;flex-direction:column;gap:0.625rem}
.menu-btns .btn[hidden]{display:none}
.fim-menu[hidden]{display:none}
.fim-menu{display:block;width:100%;margin-top:0.625rem;background:none;border:none;color:var(--muted);font:inherit;font-weight:600;font-size:.9rem;padding:0.5rem;cursor:pointer}
.sala-regras{list-style:none;margin:0.625rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem}
.sala-regras li{background:var(--bg);border-radius:999px;padding:0.25rem 0.625rem;font-size:.8rem;font-weight:600}
.sala-estado{min-height:1.2em;font-size:.88rem;margin:0.25rem 0 0.75rem;color:var(--muted)}
.sala-estado.ok{color:#5fd38d}
.sala-estado.erro{color:#ff8a84}
.sala-cam .sheet{display:flex;flex-direction:column;gap:0.625rem}
.sala-cam video{width:100%;border-radius:1rem;background:#000;aspect-ratio:4/3;object-fit:cover}

/* campo magnético do Ímã enquanto puxa as cartas (imaCampo): ondas que se fecham sobre ele, com um brilho azulado */
.ima-campo{position:fixed;z-index:26;pointer-events:none;border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(120,190,255,.28),rgba(120,190,255,0) 62%);animation:imaPulsa .45s ease-in-out infinite alternate}
.ima-campo i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(170,215,255,.9);box-shadow:0 0 .6rem rgba(110,180,255,.75),inset 0 0 .6rem rgba(110,180,255,.5);opacity:0;animation:imaOnda .9s cubic-bezier(.45,0,.9,.6) infinite}
.ima-campo i:nth-child(2){animation-delay:.3s}.ima-campo i:nth-child(3){animation-delay:.6s}
@keyframes imaOnda{0%{transform:scale(1.15);opacity:0}30%{opacity:.9}100%{transform:scale(.3);opacity:0}}
@keyframes imaPulsa{from{scale:.92}to{scale:1.05}}