:root{--felt:#1f5e3b;--felt2:#143f27;--ink:#1d1d1b;--cream:#fbf6ea;--gold:#e0b13a;--cw:62px;--ch:96px}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{min-height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:radial-gradient(ellipse at 50% 0%,#2b7d4e,var(--felt) 45%,var(--felt2));background-attachment:fixed;color:#f4efe2;-webkit-tap-highlight-color:transparent}
.wrap{max-width:560px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));min-height:100vh;display:flex;flex-direction:column}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:12px 16px;background:var(--gold);color:#2a1d00;font-weight:700}
button.alt{background:rgba(255,255,255,.14);color:#f4efe2}
button.ghost{background:rgba(255,255,255,.12);color:#f4efe2;font-weight:600;padding:8px 12px;font-size:14px}
button.mini{padding:6px 10px;font-size:13px;border-radius:9px}
button:disabled{opacity:.45}
a{color:var(--gold)}
h1{font-family:Georgia,"Times New Roman",serif;font-size:42px;letter-spacing:.5px}
h2{font-family:Georgia,serif;font-size:24px;margin-bottom:8px}
h3.sec{font-size:13px;text-transform:uppercase;letter-spacing:1px;opacity:.75;margin:20px 0 8px}
small{opacity:.8}
input{font:inherit;border:0;border-radius:12px;padding:12px 14px;background:var(--cream);color:var(--ink);width:100%}
.s0{--sc:#a8740a}.s1{--sc:#b3261e}.s2{--sc:#1f4f99}.s3{--sc:#2b6e2f}

/* carte */
.card{--paper:#fbf6ea;width:var(--cw);height:var(--ch);background:var(--paper);border-radius:9px;position:relative;flex:0 0 auto;border:1px solid #e3d7bb;color:var(--sc);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 2px 0 rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.28);transition:transform .15s;user-select:none;-webkit-user-select:none}
.card .cr{position:absolute;font:700 16px/1 Georgia,serif;color:var(--sc)}
.card .tl{top:6px;left:6px}.card .br{bottom:6px;right:6px;transform:rotate(180deg)}
.card .pip{width:56%}.card .pip svg{width:100%;height:auto;display:block}
.card .fg{font:700 9px/1 system-ui;text-transform:uppercase;letter-spacing:.6px;margin-top:4px;color:var(--sc)}
.card.back{background:repeating-linear-gradient(45deg,#8e2a22 0 6px,#a8362c 6px 12px);border:3px solid var(--cream)}
.card.empty{background:transparent;border:2px dashed rgba(255,255,255,.3);box-shadow:none}
.card.sm{--cw:48px;--ch:74px;border-radius:7px}.card.sm .cr{font-size:13px;top:4px;left:4px}.card.sm .br{display:none}.card.sm .fg{font-size:7px}
.card.xs{--cw:30px;--ch:45px;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.3)}.card.xs .cr{font-size:10px;top:3px;left:3px}.card.xs .br,.card.xs .fg{display:none}.card.xs .pip{width:62%;margin-top:6px}
.hand .card{--cw:78px;--ch:118px}
.hand.many .card{--cw:58px;--ch:90px;margin:0 -6px}
.hand.many .card .cr{font-size:14px}
.hand .card.play{cursor:pointer}
.hand .card.play:hover{transform:translateY(-6px)}
.hand .card.play:active{transform:translateY(-10px)}
.hand .card.sel{transform:translateY(-14px);outline:3px solid var(--gold);outline-offset:1px}
.hand.wait .card{filter:brightness(.86)}
.hand.myturn{filter:drop-shadow(0 0 10px rgba(224,177,58,.45))}
.mb{display:inline-block;width:11px;height:16px;border-radius:2px;background:repeating-linear-gradient(45deg,#8e2a22 0 3px,#a8362c 3px 6px);border:1.5px solid var(--cream);vertical-align:-3px;margin-right:2px}

/* home */
.hero{text-align:center;padding:22px 0 14px}
.fan{height:120px;position:relative;margin:0 auto 12px;width:200px}

.hero p{opacity:.88;margin-top:6px;line-height:1.4}
.field{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.field span{font-size:13px;opacity:.8}
.gpick{display:flex;flex-direction:column;gap:8px}
.gp{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.08);border:2px solid transparent;border-radius:16px;padding:12px;cursor:pointer}
.gp.on{border-color:var(--gold);background:rgba(255,255,255,.14)}
.gp .gt{flex:1;display:flex;flex-direction:column;gap:3px}
.gp .gt b{font-family:Georgia,serif;font-size:18px}
.gp .ns{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.nchip{padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.12);color:#f4efe2;font-weight:600;font-size:14px}
.nchip.on{background:var(--gold);color:#2a1d00}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.chk{display:flex;gap:8px;align-items:center;font-size:14px;opacity:.85}
.chk input{width:auto}
.join{display:flex;gap:8px;margin-top:16px}
.join input{text-transform:uppercase;letter-spacing:4px;font-weight:700;text-align:center;flex:1}
.publist{display:flex;flex-direction:column;gap:6px}
.pubrow{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.18);border-radius:12px;padding:10px 12px;font-size:14px}
.pubrow span{flex:1}
.empty-note{opacity:.6;font-size:14px;padding:6px 2px}
.foot{margin-top:auto;padding-top:24px;text-align:center;font-size:12px;opacity:.65;line-height:1.6}

/* pubblicità */
.ad{margin:18px auto 0;width:100%;min-height:100px;display:flex;align-items:center;justify-content:center}
.ad-ph{width:100%;min-height:100px;border:1px dashed rgba(255,255,255,.3);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:.55;letter-spacing:1px;text-transform:uppercase}
.ad-banner{min-height:50px;margin-top:10px}
.ad-banner .ad-ph{min-height:50px;max-width:320px}

/* lobby */
.gh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gh b{font-family:Georgia,serif;font-size:19px;text-align:center}
.gh .ttl{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.gh .ttl small{font-size:12px}
.codebox{margin-top:16px;background:rgba(0,0,0,.2);border-radius:18px;padding:16px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.code{font:700 44px/1 ui-monospace,Menlo,monospace;letter-spacing:8px;color:var(--gold)}
.share{display:flex;gap:8px}
.link{font-size:12px;word-break:break-all}
.note2{font-size:13px;opacity:.8;margin-top:12px;text-align:center}
.seats{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.seat{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border-radius:14px;padding:10px 12px}
.seat b{flex:1}
.seat i{flex:1;opacity:.6}
.av{width:34px;height:34px;border-radius:50%;background:var(--gold);color:#2a1d00;display:flex;align-items:center;justify-content:center;font-weight:800}
.av.bot{background:#d8d0bd}
.av.free{background:transparent;border:2px dashed rgba(255,255,255,.35);color:#fff}
.tag{font-size:11px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.15);margin-left:4px;font-weight:600}
.tag.a{background:#2e8b57}.tag.b{background:#8e2a22}

/* partita */
.game{gap:7px}
.players{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pc{position:relative;background:rgba(0,0,0,.22);border:2px solid transparent;border-radius:12px;padding:6px 8px;min-width:76px;flex:1;max-width:140px;font-size:12px;display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;transition:border-color .2s}
.pc.turn{border-color:var(--gold);box-shadow:0 0 14px rgba(224,177,58,.35)}
.pc.ally{background:rgba(46,139,87,.35)}
.pc .pn{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pc .pi{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:center}
.pc.off{opacity:.6}
.bub{position:absolute;top:-14px;right:-6px;font-size:26px;animation:pop 2.4s forwards;pointer-events:none}
@keyframes pop{0%{transform:scale(.3);opacity:0}12%{transform:scale(1.2);opacity:1}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
.tbl{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:190px;background:rgba(0,0,0,.12);border-radius:18px;padding:10px;border:1px solid rgba(255,255,255,.06)}
.tcards{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.hint{opacity:.5;font-size:14px;padding:14px;text-align:center}
.bz{display:flex;align-items:center;gap:14px;width:100%;justify-content:center;flex-wrap:wrap}
.deckz{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px}
.stack{position:relative;width:86px;height:80px}
.stack .brc{position:absolute;left:22px;top:3px;transform:rotate(90deg)}
.stack .top{position:absolute;left:0;top:3px}
.trick{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.tp{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;max-width:64px;text-align:center}
.tp small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px}
.tp.win .card{outline:3px solid var(--gold)}
.ms{--paper:#fbf6ea;display:inline-flex;align-items:center;justify-content:center;background:var(--paper);border-radius:6px;padding:2px;color:var(--sc);width:22px;height:22px;vertical-align:middle}
.ms svg{width:16px;height:16px}
.infobar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:13px;background:rgba(0,0,0,.2);border-radius:10px;padding:6px 10px;align-items:center}
.infobar b{color:var(--gold)}
.scorebar{display:flex;gap:8px;justify-content:center;width:100%;flex-wrap:wrap}
.scorebar span{display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,.2);border-radius:10px;padding:5px 10px;font-size:12px;min-width:80px}
.scorebar span.me{outline:2px solid rgba(224,177,58,.6)}
.scorebar b{font-size:20px;color:var(--gold)}
.auc{background:rgba(0,0,0,.25);border-radius:14px;padding:12px 16px;text-align:center;line-height:1.5}
.piles{display:flex;gap:24px}
.pl{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px}
.lbl{font-size:14px;opacity:.95}
.msg{min-height:44px;text-align:center;font-size:14px;line-height:1.35;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.msg .b{font-weight:800;color:var(--gold)}
.msg .yt{font-weight:800;color:var(--gold);font-size:13px;letter-spacing:.5px;text-transform:uppercase}
.mv{display:flex;align-items:center;gap:4px;justify-content:center;flex-wrap:wrap}
.mv .ar{opacity:.7;margin:0 3px}
.row{display:flex;justify-content:center;gap:8px;align-items:center}
.hand.many{gap:0}
.hand{min-height:130px;padding-top:12px}
.ctl{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ctl button{display:flex;align-items:center;gap:6px;padding:10px 14px}
.opt{display:flex;gap:4px}
.emotes{display:flex;justify-content:center;gap:4px}
.emotes button{background:transparent;font-size:22px;padding:4px 7px;border-radius:10px}
.emotes button:active{background:rgba(255,255,255,.15)}

/* overlay */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:18px;z-index:10;animation:f .2s}
@keyframes f{from{opacity:0}}
.box{background:var(--cream);color:var(--ink);border-radius:20px;padding:20px;max-width:440px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.box p{line-height:1.5;margin-bottom:10px;font-size:15px}
.box .note{font-size:13px;opacity:.75}
.box h3{font-size:15px;margin:12px 0 4px}
.btns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btns button{flex:1}
.btns button.alt{background:#e9e1cc;color:var(--ink)}
.st{width:100%;border-collapse:collapse;margin:8px 0;font-size:14px}
.st td,.st th{padding:6px 4px;border-bottom:1px solid #e6dcc4;text-align:center}
.st td:first-child,.st th:first-child{text-align:left}
.st tr.w td{color:#1f7a3f;font-weight:800}
.st tr.tot td{font-weight:800}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#111c;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;z-index:20;max-width:90vw;text-align:center}

/* mazzi regionali */
.card.dk-piacentine{--paper:#fff;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4.5px #b3261e,0 2px 0 rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.28)}
.card.dk-siciliane{--paper:#fff3d6;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4.5px #24527a,inset 0 0 0 6px var(--paper),inset 0 0 0 7px #24527a,0 2px 0 rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.28)}
.card.dk-trevisane{--paper:#fffdf7;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 5px #b8860b,0 2px 0 rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.28)}
.card.dk-bergamasche{--paper:#fbfaf3;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4.5px #2e7d32,0 2px 0 rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.28)}
.card.xs[class*="dk-"]{box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px var(--sc),0 1px 3px rgba(0,0,0,.3)}
.card.xs.dk-napoletane{box-shadow:0 1px 3px rgba(0,0,0,.3)}
.card.back.dk-piacentine{background:repeating-conic-gradient(#2a4f9a 0 25%,#3b66b8 0 50%) 0 0/12px 12px}
.card.back.dk-siciliane{background:repeating-linear-gradient(45deg,#1f5e3b 0 6px,#2f7a50 6px 12px);border-color:#fff3d6}
.card.back.dk-trevisane{background:repeating-linear-gradient(60deg,#1e5aa8 0 5px,#fffdf7 5px 7px,#c0392b 7px 12px)}
.card.back.dk-bergamasche{background:repeating-linear-gradient(-45deg,#2e7d32 0 6px,#3f9a44 6px 12px)}
.card.dk-piacentine .fg,.card.dk-trevisane .fg,.card.dk-bergamasche .fg,.card.dk-siciliane .fg{font-family:Georgia,serif;text-transform:none;letter-spacing:0;font-style:italic}
.decks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:4px 2px 6px}
.decks::-webkit-scrollbar{display:none}
.dk{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(255,255,255,.08);color:#f4efe2;border:2px solid transparent;border-radius:14px;padding:10px 10px 8px;font-weight:600;font-size:13px}
.dk.on{border-color:var(--gold);background:rgba(255,255,255,.16)}
.dk .dkp{display:flex}
.dk .dkp .card{margin-left:-10px}.dk .dkp .card:first-child{margin-left:0}
.box .decks .dk{background:#efe7d2;color:var(--ink)}
.box .decks .dk.on{border-color:#b8860b;background:#fff6dd}
.card[class*="dk-"]:not(.dk-napoletane):not(.xs) .tl{top:9px;left:9px}
.card[class*="dk-"]:not(.dk-napoletane):not(.xs) .br{bottom:9px;right:9px}
.card.sm[class*="dk-"]:not(.dk-napoletane) .tl{top:7px;left:7px}