:root{
  --bg0:#07061a;--bg1:#120a2e;--ink:#f4f1ff;--mut:#a79fd0;--pink:#ff2e93;--cyan:#27e1ff;--gold:#ffc83d;--green:#3dff9a;--red:#ff4757;--violet:#7b4dff;
  --glass:rgba(22,14,52,.62);--line:rgba(160,140,255,.28);
  --cw:112px;--r:12px;
  --font-h:'Bangers','Impact',system-ui,sans-serif;--font-b:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:radial-gradient(1200px 800px at 70% 0%,#2a1160 0%,var(--bg1) 45%,var(--bg0) 100%);color:var(--ink);font-family:var(--font-b);overflow:hidden;user-select:none}
#bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:0}
#app{position:fixed;inset:0;z-index:1}
section{position:absolute;inset:0;display:none}
section.on{display:flex}
button{font-family:inherit;cursor:pointer}
.btn{border:0;border-radius:14px;padding:12px 20px;font-weight:800;font-size:16px;color:#fff;background:linear-gradient(135deg,var(--violet),var(--pink));box-shadow:0 6px 24px rgba(255,46,147,.35),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s,filter .15s,box-shadow .15s;letter-spacing:.2px}
.btn:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.1)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.alt{background:linear-gradient(135deg,#1c8cff,var(--cyan));box-shadow:0 6px 24px rgba(39,225,255,.3),inset 0 1px 0 rgba(255,255,255,.4);color:#04122a}
.btn.ghost{background:rgba(255,255,255,.08);box-shadow:none;border:1px solid var(--line)}
.btn.gold{background:linear-gradient(135deg,#ffb100,#ffe36b);color:#3b2300;box-shadow:0 6px 24px rgba(255,200,61,.4)}
.btn.dis{opacity:.55}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px}
input,select{font:inherit;color:var(--ink);background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:12px;padding:11px 14px;outline:none;width:100%}
input:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(39,225,255,.2)}
select option{color:#111}
label{font-size:12px;color:var(--mut);letter-spacing:.6px;text-transform:uppercase;font-weight:800;display:block;margin:0 0 6px}

/* ---------- carta ---------- */
.card{--w:var(--cw);width:var(--w);height:calc(var(--w)*1.466);position:relative;border-radius:calc(var(--w)*.06);background-color:#0b1a4a;background-repeat:no-repeat;
  background-size:calc(var(--w)*11.538) auto;
  background-position:calc(var(--w)*var(--bx)*-1) calc(var(--w)*var(--by)*-1);
  box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.25);transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;flex:none}
.card.back{background:radial-gradient(circle at 30% 20%,#7b4dff 0,#2a0f6b 55%,#12072f 100%);background-size:auto}
.card.back::after{content:"MK";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-h);font-size:calc(var(--w)*.42);color:rgba(255,255,255,.85);text-shadow:0 0 18px var(--pink)}
.card.back::before{content:"";position:absolute;inset:6%;border:2px solid rgba(255,255,255,.35);border-radius:8px}
.card .shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 62%);opacity:0;mix-blend-mode:overlay;transition:opacity .2s}
.card.tilt:hover .shine{opacity:1}
.card .stat{position:absolute;left:3%;right:3%;bottom:2.5%;height:15%;border-radius:8px;background:linear-gradient(180deg,rgba(10,6,34,.92),rgba(40,10,70,.95));border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:space-between;padding:0 6%;font-weight:900;font-size:calc(var(--w)*.115);box-shadow:0 2px 8px rgba(0,0,0,.6)}
.card .stat b{color:var(--gold)}
.card .stat i{font-style:normal;color:#fff}
.card .stat .lo{color:var(--red)}.card .stat .hi{color:var(--green)}
.card .tag{position:absolute;top:2%;left:2%;display:flex;gap:2px;flex-wrap:wrap;max-width:96%}
.card .tag span{font-size:calc(var(--w)*.085);font-weight:900;background:rgba(0,0,0,.72);border:1px solid var(--cyan);color:var(--cyan);padding:1px 5px;border-radius:7px}
.card .warn{position:absolute;top:2%;right:2%;width:calc(var(--w)*.16);height:calc(var(--w)*.16);border-radius:50%;background:#ff9f1c;color:#000;font-weight:900;font-size:calc(var(--w)*.12);display:grid;place-items:center;box-shadow:0 0 8px #ff9f1c;opacity:.9}
.card.hit{animation:hit .55s}
@keyframes hit{0%{filter:brightness(2.4) saturate(2)}10%{transform:translate(-8px,2px) rotate(-3deg)}25%{transform:translate(8px,-2px) rotate(3deg)}45%{transform:translate(-5px,1px)}65%{transform:translate(4px,0)}100%{filter:none;transform:none}}
.card.heal{animation:heal .7s}
@keyframes heal{0%,100%{filter:none}40%{filter:brightness(1.5) hue-rotate(60deg) saturate(1.6);box-shadow:0 0 40px var(--green)}}
.card.enter{animation:enter .85s cubic-bezier(.2,1.2,.3,1)}
@keyframes enter{0%{transform:translateY(-120px) rotateX(70deg) rotateY(180deg) scale(.4);opacity:0}60%{opacity:1;transform:translateY(8px) rotateX(0) rotateY(0) scale(1.12)}100%{transform:none}}
.card.die{animation:die 1s forwards}
@keyframes die{0%{filter:none}15%{filter:brightness(3) contrast(2)}100%{transform:translateY(60px) rotateZ(25deg) scale(.6);filter:grayscale(1) blur(6px);opacity:0}}
.card.morph{animation:morph 1.1s}
@keyframes morph{0%{filter:none}30%{filter:brightness(3) saturate(0);transform:scale(1.25) rotateY(90deg)}60%{filter:brightness(2) hue-rotate(180deg);transform:scale(1.2) rotateY(0)}100%{filter:none;transform:none}}
.card.lunge{z-index:50}
.card.glowT{box-shadow:0 0 0 3px var(--cyan),0 0 32px var(--cyan);cursor:pointer;animation:pulseT 1s infinite}
@keyframes pulseT{50%{box-shadow:0 0 0 4px var(--pink),0 0 44px var(--pink)}}
.card.sel{transform:translateY(-22px) scale(1.12)!important;box-shadow:0 0 0 3px var(--gold),0 14px 40px rgba(255,200,61,.5)}
.card.dim{filter:grayscale(.85) brightness(.55)}
.card.act{cursor:pointer;box-shadow:0 0 0 2px var(--green),0 0 22px rgba(61,255,154,.6)}
.card.act:hover{transform:translateY(-12px) scale(1.07)}
.card.small{--w:var(--cw-s)}

/* ---------- lobby ---------- */
#screen-lobby,#screen-room{align-items:center;justify-content:center;padding:16px;overflow:auto}
.panel{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.logo{font-family:var(--font-h);font-size:clamp(54px,12vw,112px);line-height:.9;text-align:center;letter-spacing:3px;margin:0;background:linear-gradient(180deg,#fff 0,var(--gold) 45%,var(--pink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 0 #4b1a8a) drop-shadow(0 0 30px rgba(255,46,147,.55));transform:rotate(-2deg);animation:logoF 4s ease-in-out infinite}
@keyframes logoF{50%{transform:rotate(1.5deg) translateY(-6px)}}
.sub{text-align:center;color:var(--mut);margin:8px 0 18px;font-weight:700}
.lobbywrap{width:min(920px,100%);display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.lobbywrap h3{margin:0 0 12px;font-family:var(--font-h);font-size:26px;letter-spacing:1px;color:var(--cyan)}
.row{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.row>*{flex:1}
.hero{grid-column:1/-1}
@media(max-width:720px){.lobbywrap{grid-template-columns:1fr}}
.plist{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.pl{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-weight:800}
.pl .av{font-size:26px}
.pl .tagh{margin-left:auto;font-size:11px;color:var(--gold);letter-spacing:.8px}
.linkbox{display:flex;gap:8px}
.linkbox input{font-size:13px}
.note{font-size:12px;color:var(--mut);line-height:1.45}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.06);font-weight:800;font-size:13px;cursor:pointer}
.chip.on{background:linear-gradient(135deg,var(--violet),var(--pink));border-color:transparent}

/* ---------- gioco ---------- */
#screen-game{--cw:clamp(72px,calc(var(--vh,1vh)*13),150px);--cw-s:clamp(52px,calc(var(--vh,1vh)*9.4),100px)}
#hud{display:flex;align-items:center;gap:10px;padding:8px 12px;z-index:5;flex:none}
#hud .t{font-family:var(--font-h);font-size:22px;letter-spacing:1.5px;color:var(--gold);text-shadow:0 2px 0 #4b1a8a}
#hud .sp{flex:1}
.pill{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;background:var(--glass);border:1px solid var(--line);font-weight:800;font-size:13px;backdrop-filter:blur(8px)}
.pill.scn{border-color:var(--gold);color:var(--gold);cursor:pointer}
.iconbtn{width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:var(--glass);color:var(--ink);font-size:17px}
#opps{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:4px 10px;flex:none;perspective:900px}
.seat{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 10px 10px;border-radius:18px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);min-width:calc(var(--cw-s)*1.55);transition:box-shadow .3s,border-color .3s,opacity .4s}
.seat.turn{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,200,61,.5),0 0 38px rgba(255,200,61,.35)}
.seat.out{opacity:.35;filter:grayscale(1)}
.seat .nm{font-weight:900;font-size:13px;display:flex;gap:6px;align-items:center;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .hearts{font-size:13px;letter-spacing:1px;color:var(--pink);text-shadow:0 0 8px rgba(255,46,147,.7)}
.seat .hearts .lost{color:#4a3a70;text-shadow:none}
.seat .slot{display:flex;align-items:center;justify-content:center;min-height:calc(var(--cw-s)*1.466)}
.seat .mini{display:flex;gap:4px;font-size:11px;font-weight:900;color:var(--mut)}
.seat .mini span{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:7px}
.seat .st{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;min-height:16px}
.seat .st span{font-size:10px;font-weight:900;padding:1px 6px;border-radius:7px;background:rgba(39,225,255,.15);border:1px solid var(--cyan);color:var(--cyan)}
#arena{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;perspective:1100px}
#arena .disc{position:absolute;width:min(78vw,640px);height:min(30vh,240px);border-radius:50%;background:radial-gradient(ellipse at center,rgba(123,77,255,.38) 0,rgba(255,46,147,.14) 45%,transparent 70%);border:2px solid rgba(255,255,255,.1);transform:rotateX(62deg);box-shadow:0 0 90px rgba(123,77,255,.45),inset 0 0 60px rgba(39,225,255,.2)}
#arena .disc::after{content:"";position:absolute;inset:9%;border-radius:50%;border:2px dashed rgba(255,255,255,.18);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#banner{position:relative;z-index:3;text-align:center;font-family:var(--font-h);font-size:clamp(20px,4vw,34px);letter-spacing:1.5px;text-shadow:0 3px 0 #4b1a8a,0 0 24px rgba(255,46,147,.7);min-height:44px;padding:0 12px;pointer-events:none}
#banner span{display:inline-block;animation:bannerIn .5s cubic-bezier(.2,1.3,.3,1)}
@keyframes bannerIn{from{transform:scale(2.4) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
#log{position:absolute;right:12px;bottom:6px;width:min(300px,42vw);max-height:42%;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;font-size:12px;font-weight:700;pointer-events:none;mask-image:linear-gradient(to top,#000 60%,transparent)}
#log div{background:rgba(7,6,26,.6);padding:3px 8px;border-radius:8px;animation:logIn .3s}
#log .warn{color:var(--gold)}#log .info{color:var(--cyan)}#log .bad{color:var(--red)}
@keyframes logIn{from{transform:translateX(20px);opacity:0}}
#me .mrow{display:flex;align-items:flex-end;justify-content:center;gap:22px;flex-wrap:wrap}
#me{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 8px 10px;position:relative}
#me .seat{flex-direction:row;gap:14px;padding:8px 16px;align-items:center}
#me .info{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
#hand{display:flex;gap:14px;align-items:flex-end;justify-content:center}
.hslot{display:flex;flex-direction:column;align-items:center;gap:4px}
.hslot .lbl{font-size:10px;font-weight:900;letter-spacing:1px;color:var(--mut);text-transform:uppercase}
#actions{display:flex;gap:8px;align-items:center;justify-content:center;min-height:42px;flex-wrap:wrap}
#hint{font-weight:800;font-size:14px;color:var(--gold);text-align:center;min-height:20px;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.turnmark{position:absolute;top:-14px;white-space:nowrap;z-index:2;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#ffb100,#ffe36b);color:#3b2300;font-weight:900;font-size:11px;letter-spacing:1px;padding:2px 10px;border-radius:99px;display:none;box-shadow:0 0 18px rgba(255,200,61,.7)}
.seat.turn .turnmark{display:block;animation:bob 1s infinite}
@keyframes bob{50%{transform:translateX(-50%) translateY(-4px)}}

/* ---------- modali ---------- */
#modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(5,3,20,.66);backdrop-filter:blur(6px);padding:14px}
#modal.on{display:flex;animation:fade .25s}
@keyframes fade{from{opacity:0}}
#modal.board{background:transparent;backdrop-filter:none;align-items:flex-end;pointer-events:none;padding-bottom:calc(var(--cw)*1.9)}
#modal.board .box{pointer-events:auto}
.box{width:min(560px,100%);max-height:88vh;overflow:auto;background:linear-gradient(180deg,rgba(40,22,92,.96),rgba(14,8,40,.97));border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 24px 80px rgba(0,0,0,.7);animation:pop .3s cubic-bezier(.2,1.3,.3,1)}
@keyframes pop{from{transform:scale(.85) translateY(20px);opacity:0}}
.box h4{margin:0 0 12px;font-family:var(--font-h);font-size:26px;letter-spacing:1px;color:var(--gold);font-weight:400}
.opts{display:grid;gap:8px}
.opts.grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.opt{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--ink);border-radius:14px;padding:10px 12px;font-weight:800;font-size:15px;transition:.15s}
.opt:hover{background:linear-gradient(135deg,rgba(123,77,255,.6),rgba(255,46,147,.5));transform:translateX(3px)}
.opt .card{--w:44px}
.opts.grid .opt{flex-direction:column;text-align:center;font-size:12px}
.opts.grid .opt .card{--w:86px}
.opt.good{border-color:var(--green)}.opt.bad{border-color:var(--red)}
.search{margin-bottom:10px}
.insp{position:fixed;z-index:60;pointer-events:none;display:none;width:min(300px,86vw);background:linear-gradient(180deg,rgba(40,22,92,.97),rgba(14,8,40,.98));border:1px solid var(--cyan);border-radius:16px;padding:12px;box-shadow:0 18px 60px rgba(0,0,0,.7),0 0 30px rgba(39,225,255,.25)}
.insp .card{--w:140px;margin:0 auto 8px}
.insp h5{margin:0 0 4px;font-size:16px;color:var(--gold)}
.insp p{margin:0 0 6px;font-size:12.5px;line-height:1.4;color:#e6e0ff;font-weight:600;user-select:text}
.insp .k{font-size:10px;letter-spacing:1px;color:var(--cyan);font-weight:900;text-transform:uppercase}
.insp.pin{pointer-events:auto}

/* ---------- fx ---------- */
#fx{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.float{position:absolute;font-family:var(--font-h);font-size:44px;letter-spacing:1px;transform:translate(-50%,-50%);animation:floatUp 1.3s cubic-bezier(.2,.8,.3,1) forwards;text-shadow:0 3px 0 rgba(0,0,0,.7),0 0 18px currentColor;white-space:nowrap}
.float.dmg{color:#ff4757}.float.heal{color:#3dff9a}.float.star{color:#ffc83d}.float.txt{font-size:30px;color:#27e1ff}.float.blk{color:#c8d3ff;font-size:34px}
@keyframes floatUp{0%{transform:translate(-50%,-30%) scale(.3);opacity:0}15%{transform:translate(-50%,-60%) scale(1.5);opacity:1}100%{transform:translate(-50%,-190%) scale(1);opacity:0}}
.ring{position:absolute;border-radius:50%;border:4px solid var(--c,#fff);transform:translate(-50%,-50%);animation:ring .7s ease-out forwards}
@keyframes ring{from{width:10px;height:10px;opacity:1}to{width:260px;height:260px;opacity:0}}
.flash{position:fixed;inset:0;background:#fff;opacity:0;animation:flash .9s}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
.part{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--c);animation:part var(--d) ease-out forwards}
@keyframes part{to{transform:translate(var(--x),var(--y)) scale(.1);opacity:0}}
.big{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:45}
.big div{font-family:var(--font-h);font-size:clamp(46px,12vw,130px);letter-spacing:4px;text-align:center;line-height:.95;background:linear-gradient(180deg,#fff,var(--gold) 50%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 0 #4b1a8a) drop-shadow(0 0 40px rgba(255,46,147,.8));animation:bigIn 2.2s forwards}
@keyframes bigIn{0%{transform:scale(3) rotate(-8deg);opacity:0}15%{transform:scale(1) rotate(-2deg);opacity:1}85%{transform:scale(1.05) rotate(1deg);opacity:1}100%{transform:scale(.6);opacity:0}}
.dice{position:fixed;left:50%;top:44%;width:92px;height:92px;margin:-46px 0 0 -46px;perspective:600px;z-index:46;pointer-events:none}
.dice .cube{position:absolute;inset:0;transform-style:preserve-3d;animation:roll 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.dice .f{position:absolute;inset:0;border-radius:16px;background:linear-gradient(135deg,#fff,#d9d4ff);color:#2b1060;display:grid;place-items:center;font-family:var(--font-h);font-size:56px;border:2px solid #6c46ff;box-shadow:inset 0 0 18px rgba(123,77,255,.4)}
.dice .f1{transform:translateZ(46px)}.dice .f2{transform:rotateY(90deg) translateZ(46px)}.dice .f3{transform:rotateY(180deg) translateZ(46px)}.dice .f4{transform:rotateY(-90deg) translateZ(46px)}.dice .f5{transform:rotateX(90deg) translateZ(46px)}.dice .f6{transform:rotateX(-90deg) translateZ(46px)}
.dice .why{position:absolute;top:104px;left:50%;transform:translateX(-50%);white-space:nowrap;font-weight:900;font-size:14px;color:var(--gold);text-shadow:0 2px 0 #000}
@keyframes roll{0%{transform:translateY(-240px) rotateX(0) rotateY(0) scale(.5)}50%{transform:translateY(0) rotateX(540deg) rotateY(360deg) scale(1.2)}100%{transform:translateY(0) rotateX(var(--rx)) rotateY(var(--ry)) scale(1)}}
.dice.out{animation:fade .5s reverse forwards}
#toasts{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(20,12,50,.95);border:1px solid var(--gold);color:var(--ink);padding:9px 16px;border-radius:14px;font-weight:800;animation:pop .3s,fade .4s 3.2s reverse forwards}
.over{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:radial-gradient(circle,rgba(60,20,120,.85),rgba(5,3,20,.95));animation:fade .6s}
.over h1{font-family:var(--font-h);font-size:clamp(50px,13vw,140px);margin:0;color:var(--gold);text-shadow:0 8px 0 #4b1a8a,0 0 50px var(--pink);animation:logoF 3s infinite;text-align:center;line-height:.95}
.rolls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------- mazzi ---------- */
#decks{display:flex;gap:clamp(10px,2.4vw,26px);z-index:3;align-items:flex-end;position:relative}
.dk{--dw:clamp(40px,calc(var(--vh,1vh)*7.4),70px);position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:0;color:var(--ink);font-weight:900;font-size:11px;letter-spacing:.5px;touch-action:manipulation}
.dk .pile{position:relative;width:var(--dw);height:calc(var(--dw)*1.466);transition:transform .2s}
.dk .pile .card{--w:var(--dw);position:absolute;left:0;top:0;box-shadow:0 2px 6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.25)}
.dk .pile .card:nth-child(1){transform:translate(-4px,4px)}.dk .pile .card:nth-child(2){transform:translate(-2px,2px)}
.dk .pile .card.back::after{content:attr(data-ic);font-family:var(--font-b);font-size:calc(var(--w)*.5)}
.dk .cnt{position:absolute;right:-8px;top:-8px;min-width:22px;height:22px;padding:0 5px;border-radius:99px;background:var(--gold);color:#3b2300;display:grid;place-items:center;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.6);z-index:2}
.dk .lb{color:var(--mut);text-transform:uppercase;font-size:10px}
.dk:hover .pile{transform:translateY(-3px)}
.dk.want .pile{animation:deckPulse .8s infinite;filter:drop-shadow(0 0 14px var(--gold))}
.dk.want .lb{color:var(--gold)}
.dk.empty{opacity:.4}
@keyframes deckPulse{50%{transform:translateY(-8px) scale(1.08)}}
.flycard{position:fixed;z-index:60;pointer-events:none;transition:transform .5s cubic-bezier(.3,.8,.3,1),opacity .5s}

/* ---------- griglia del tavolo (tutti gli schermi) ---------- */
#screen-game.on{display:grid;grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto;min-height:0;overflow:hidden}
#hud{grid-column:1/-1;grid-row:1}
#opps{grid-column:1/-1;grid-row:2;align-content:center}
#arena{grid-column:1/-1;grid-row:3;flex-direction:column;gap:4px;overflow:hidden}
#me,#me .mrow{display:contents}
#hint{grid-column:1/-1;grid-row:4;padding:0 8px}
#mySeat{grid-column:2;grid-row:5;align-self:end;margin:12px clamp(10px,2vw,22px) 0 0}
#hand{grid-column:3;grid-row:5;align-self:end}
#actions{grid-column:1/-1;grid-row:6;padding:4px 8px calc(8px + env(safe-area-inset-bottom,0px))}
#banner{min-height:0}

/* ---------- telefono in verticale: mazzi in colonna sul lato ---------- */
@media (orientation:portrait) and (max-width:900px){
  #screen-game{--cw:min(21vw,calc(var(--vh,1vh)*11.5));--cw-s:min(11.5vw,calc(var(--vh,1vh)*6.4))}
  #screen-game.on{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto}
  #hint{grid-row:4}
  #mySeat{grid-column:1;grid-row:5;justify-self:center;margin:12px 0 0}
  #hand{grid-column:1;grid-row:6;justify-self:center;gap:min(3vw,14px)}
  #actions{grid-row:7}
  #decks{position:absolute;right:12px;top:50%;transform:translateY(-50%);flex-direction:column;align-items:center}
  .dk{--dw:clamp(26px,calc(var(--vh,1vh)*4.8),46px)}
  .dk .lb{display:none}
  #decks{gap:12px}
  #banner{padding:0 64px 0 12px;font-size:clamp(18px,5vw,26px)}
  #arena .disc{width:86vw;height:min(20vh,150px)}
  #log{display:none}
}
/* ---------- telefono in orizzontale (schermo basso) ---------- */
@media (orientation:landscape) and (max-height:560px){
  #screen-game{--cw:min(calc(var(--vh,1vh)*17),12vw);--cw-s:min(calc(var(--vh,1vh)*11),7.5vw)}
  #screen-game.on{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto}
  #hud{padding:4px 10px}#hud .t{font-size:18px}.iconbtn{width:32px;height:32px;font-size:15px}.pill{padding:3px 9px;font-size:12px}
  #hint{grid-column:1/-1;grid-row:3;align-self:start;justify-self:center;z-index:4;pointer-events:none;font-size:12px;min-height:0;padding:0}
  #mySeat{grid-column:1;grid-row:4;margin:0 0 0 8px}
  #hand{grid-column:2;grid-row:4;justify-self:center;gap:min(1.4vw,12px)}
  #actions{grid-column:3;grid-row:4;flex-direction:column;align-items:stretch;padding:0 8px 6px 0;min-height:0;align-self:end;gap:5px}
  #actions .btn{font-size:12px;padding:7px 10px}
  #banner{font-size:clamp(18px,3.6vw,26px);min-height:0}
  #arena .disc{height:min(24vh,120px)}
  #log{display:none}
  .hslot .lbl{font-size:9px}
  #me .seat{padding:5px 8px;gap:8px}
  #me .info{gap:2px}
  .box{max-height:92vh}
  #modal.board{padding-bottom:calc(var(--cw)*1.6)}
}
/* ---------- schede avversari compatte (telefoni) ---------- */
@media (max-width:900px) and (orientation:portrait),(max-height:560px) and (orientation:landscape){
  #opps{gap:6px;padding:2px 6px;flex-wrap:wrap}
  #opps .seat{flex:1 1 150px;max-width:240px;min-width:0}
  .seat{min-width:0;padding:5px 8px}
  #opps .seat{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"slot nm" "slot hearts" "slot mini" "slot st";column-gap:8px;row-gap:2px;align-items:center;justify-items:start}
  #opps .seat .slot{grid-area:slot;min-height:0}
  #opps .seat .nm{grid-area:nm;max-width:96px;font-size:12px}
  #opps .seat .hearts{grid-area:hearts;font-size:12px}
  #opps .seat .mini{grid-area:mini;font-size:10px}
  #opps .seat .st{grid-area:st;min-height:0;justify-content:flex-start}
  #me .seat{padding:5px 10px;gap:8px}
}
@media (max-width:420px){.btn{padding:10px 14px}.box{padding:14px}}
@media (max-width:480px){#hud{gap:6px;padding:6px 8px}#hud .t{display:none}.iconbtn{width:34px;height:34px}}

/* più carte dello stesso tipo in mano (eccezioni di regola) */
.holder.multi{position:relative}
.holder.multi .card.stk{position:absolute;left:0;top:0;transform:translate(calc(var(--i)*14px),calc(var(--i)*-6px));z-index:calc(var(--i) + 1)}
.holder.multi .card.stk:first-child{position:relative}
.holder.multi .card.stk.sel,.holder.multi .card.stk:hover{z-index:20}
.holder .mbadge{position:absolute;right:-6px;top:-8px;z-index:30;background:var(--gold,#fc3);color:#000;font-weight:900;font-size:12px;border-radius:10px;padding:1px 6px;pointer-events:none}

/* retri personalizzati: b=bonus, s=speciali, m=mosse, p=personaggi */
.card.back[data-bk]{background-color:transparent;background-size:100% 100%;background-position:center;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.card.back[data-bk]::before,.card.back[data-bk]::after,.dk .pile .card.back[data-bk]::after{content:none;display:none}
.card.back[data-bk="b"]{background-image:url(../img/back-b.webp?v=2)}.card.back[data-bk="s"]{background-image:url(../img/back-s.webp?v=2)}
.card.back[data-bk="m"]{background-image:url(../img/back-m.webp?v=2)}.card.back[data-bk="p"]{background-image:url(../img/back-p.webp?v=2)}

/* personaggi supplementari in campo */
.seat .slot.multi{gap:8px}.seat .slot .card.co{margin-left:0;align-self:flex-end;box-shadow:0 0 0 2px var(--cyan),0 4px 14px rgba(0,0,0,.5);animation:plIn .5s cubic-bezier(.2,1.4,.4,1) both}
.seat .slot .card[data-nm]::after{content:attr(data-nm);position:absolute;left:50%;top:-9px;transform:translateX(-50%);white-space:nowrap;font:900 9px/1 system-ui;padding:2px 7px;border-radius:99px;background:#111c;color:#fff;border:1px solid var(--cyan);z-index:3}

/* barriera: tre sagome in campo */
.seat .slot .sagbox{display:flex;gap:5px;align-self:flex-end;margin-left:6px}
.card.sag{--w:calc(var(--cw-s)*.5);display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,#1c3b6e,#0b1a4a 70%);box-shadow:0 0 0 2px var(--cyan),0 0 12px rgba(39,225,255,.5);color:#fff;gap:0;cursor:default}
.card.sag .si{font-size:calc(var(--w)*.45)}.card.sag .sh{font:900 calc(var(--w)*.3)/1 system-ui;color:var(--gold)}.card.sag small{font:800 calc(var(--w)*.17)/1 system-ui;opacity:.8}