/* =========================================================
   SICILOPOLI — stile 2D "da tavolo"
   Layout: barra in alto · giocatori a sinistra · tabellone · pannello a destra
   ========================================================= */
:root{
  --bg:#0f1b2b; --bg2:#16263b; --bg3:#1d3250;
  --paper:#fffdf8; --paper2:#f5f1e8; --line:#e4ddcd; --ink:#16212e; --muted:#6d7684;
  --red:#cf1f2e; --red2:#a8131f; --gold:#f2b632; --green:#1f9d55; --blue:#1f6fd1;
  --board:#dfeedd; --cell:#f7f6ee; --cellink:#1b1b1b;
  --f-display:'Archivo Black',Impact,sans-serif; --f-body:Inter,system-ui,sans-serif; --f-label:'Barlow Condensed','Arial Narrow',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--f-body);color:#fff;background:var(--bg);
  background-image:radial-gradient(circle at 20% 0%,#1d3a5c 0,transparent 55%),radial-gradient(circle at 100% 100%,#2a1520 0,transparent 45%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 4l20 20-20 20L4 24z' fill='none' stroke='%23ffffff' stroke-opacity='.035'/%3E%3C/svg%3E");
  background-attachment:fixed}
button{font-family:inherit;cursor:pointer;border:0;border-radius:8px;padding:10px 14px;font-weight:700;font-size:14px;background:#ebe6da;color:var(--ink);transition:transform .08s,filter .15s,box-shadow .15s;box-shadow:0 2px 0 #0002}
button:hover:not(:disabled){filter:brightness(1.06)}button:active:not(:disabled){transform:translateY(1px);box-shadow:none}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn-red{background:var(--red);color:#fff;box-shadow:0 3px 0 var(--red2)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 3px 0 #137a40}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 3px 0 #1553a0}
.btn-gold{background:var(--gold);color:#3a2a00;box-shadow:0 3px 0 #c48d14}
.btn-sm{padding:6px 10px;font-size:12.5px;border-radius:7px}
.btn-ghost{background:transparent;color:#cfd8e3;box-shadow:none;border:1px solid #ffffff22}
input,select{font-family:inherit;font-size:15px;padding:10px 12px;border-radius:8px;border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:13px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.err{color:var(--red);font-weight:600;margin-top:8px}
.msg{font-size:14px;line-height:1.4}

/* ---------- menu e sala d'attesa ---------- */
.screen{max-width:600px;margin:0 auto;padding:28px 16px 60px;position:relative;z-index:1}
.logo{font-family:var(--f-display);background:var(--red);color:#fff;padding:12px 28px;font-size:46px;letter-spacing:3px;text-align:center;margin:18px auto 4px;width:max-content;max-width:100%;border-radius:6px;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--red),0 14px 30px #0008;position:relative;overflow:hidden;animation:logoin .8s cubic-bezier(.2,1.5,.4,1)}
.logo::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,#fff6 50%,transparent 60%);background-size:250% 100%;animation:sheen 3.5s linear infinite}
.sub{text-align:center;color:#c4cfdc;margin:16px 0 22px;letter-spacing:.04em}
.card{background:var(--paper);color:var(--ink);border-radius:14px;padding:18px;margin-bottom:14px;box-shadow:0 12px 30px #0006;animation:rise .45s ease-out both}
.card h3{margin:0 0 10px;font-size:16px}
.card:nth-child(3){animation-delay:.06s}.card:nth-child(4){animation-delay:.12s}.card:nth-child(5){animation-delay:.18s}
.pawns{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.pawn-opt{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:3px solid transparent;transition:transform .15s}
.pawn-opt:hover{transform:translateY(-3px)}
.pawn-opt .pz{--tz:40px}
.pawn-opt.sel{border-color:var(--red);background:#cf1f2e14}
.pawn-opt.taken{opacity:.25;cursor:not-allowed}
.code{font-family:var(--f-display);font-size:42px;letter-spacing:8px;color:var(--red);text-align:center}
.plist .pl{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--paper2);margin-bottom:6px}
.lab{display:block;font-weight:700;font-size:13px;margin:12px 0 4px;color:#3c4654}

/* ---------- pedine piatte ---------- */
.pz{--tz:30px;--pc:#c9a227;width:var(--tz);height:var(--tz);border-radius:50%;flex:none;display:grid;place-items:center;position:relative;
  background:var(--pc);border:calc(var(--tz)*.09) solid #fff;box-shadow:0 calc(var(--tz)*.07) 0 #0005}
.pz span{font-size:calc(var(--tz)*.52);line-height:1;filter:drop-shadow(0 1px 0 #0004)}
.pz.jailed::after{content:'';position:absolute;inset:-2px;border-radius:50%;background:repeating-linear-gradient(90deg,transparent 0 22%,#1b1b1bcc 22% 30%)}

/* ---------- partita: layout ---------- */
#game{min-height:100vh;display:flex;flex-direction:column}
#topbar{display:flex;align-items:center;gap:14px;padding:8px 16px;background:#0b1522e6;border-bottom:1px solid #ffffff14;position:sticky;top:0;z-index:40;backdrop-filter:blur(6px)}
#topbar .brand{font-family:var(--f-display);background:var(--red);padding:4px 12px;border-radius:4px;letter-spacing:2px;font-size:16px;box-shadow:0 0 0 2px #fff}
#topbar .stat{font-size:13px;color:#c9d3df;display:flex;gap:14px;flex-wrap:wrap}
#topbar .stat b{color:#fff}
#topbar .tb-r{margin-left:auto;display:flex;gap:6px}
#gwrap{flex:1;display:grid;grid-template-columns:272px auto 310px;gap:14px;padding:12px;justify-content:center;align-items:start}
.panel{background:var(--paper);color:var(--ink);border-radius:12px;box-shadow:0 10px 26px #0005;overflow:hidden}
.panel+.panel{margin-top:12px}
.ph{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7b8594;padding:10px 14px 6px}
#lpanel,#rpanel{max-height:calc(100vh - 80px);overflow:auto;scrollbar-width:thin}

/* ---------- schede giocatori ---------- */
#players{padding:4px 10px 10px;display:flex;flex-direction:column;gap:8px}
.pcard{border-radius:10px;background:var(--paper2);padding:10px 10px 8px;border-left:6px solid var(--pc);cursor:pointer;transition:transform .15s,box-shadow .2s;position:relative}
.pcard:hover{transform:translateX(2px)}
.pcard.cur{background:#fff;box-shadow:0 0 0 2px var(--pc),0 6px 16px #0002}
.pcard.cur::before{content:'IN GIOCO';position:absolute;top:-7px;right:10px;background:var(--pc);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.1em;padding:2px 7px;border-radius:99px}
.pcard.bk{opacity:.45;filter:grayscale(1)}
.ptop{display:flex;align-items:center;gap:9px}
.pname{flex:1;min-width:0;line-height:1.15}
.pname b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pname small{color:var(--muted);font-size:11.5px}
.money{font-family:var(--f-label);font-weight:700;font-size:21px;color:#0e7a3a;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .3s}
.money.neg{color:var(--red)}
.money.up{animation:mup .8s}.money.down{animation:mdown .8s}
.psets{display:flex;gap:4px;margin:8px 0 5px;flex-wrap:wrap}
.gset{display:flex;gap:2px;padding:2px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px #0000000f}
.gset i{width:9px;height:13px;border-radius:2px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--gc);opacity:.45}
.gset i.on{background:var(--gc);opacity:1;box-shadow:none}
.gset i.on.m{opacity:.4;background:repeating-linear-gradient(45deg,var(--gc) 0 2px,#fff 2px 4px)}
.gset.full{box-shadow:0 0 0 1.5px var(--gc)}
.pfoot{font-size:11.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.pfoot b{color:var(--ink)}
#bankinfo{padding:4px 14px 12px;font-size:13px;color:#3c4654;display:grid;grid-template-columns:1fr 1fr;gap:6px}
#bankinfo div{background:var(--paper2);border-radius:8px;padding:7px 9px}
#bankinfo b{display:block;font-family:var(--f-label);font-size:19px;color:var(--ink)}

/* ---------- tabellone ---------- */
#boardwrap{--S:min(calc(100vh - 88px),calc(100vw - 640px));width:var(--S);height:var(--S);position:relative}
#stage{width:100%;height:100%}
#board{width:var(--S);height:var(--S);flex:none;display:grid;grid-template-columns:1.6fr repeat(9,1fr) 1.6fr;grid-template-rows:1.6fr repeat(9,1fr) 1.6fr;background:var(--board);border:calc(var(--S)*.006) solid #1a1a1a;color:var(--cellink);position:relative;box-shadow:0 0 0 calc(var(--S)*.012) #f7f3e6,0 0 0 calc(var(--S)*.016) #1a1a1a,0 24px 60px #000a;font-size:calc(var(--S)*.0128);border-radius:2px}
.cell{border:1px solid #1a1a1acc;position:relative;display:flex;overflow:hidden;cursor:pointer;background:var(--cell)}
.cell:hover{z-index:5;box-shadow:0 0 0 3px var(--gold);}
.cell.b{flex-direction:column}.cell.t{flex-direction:column-reverse}.cell.l{flex-direction:row-reverse}.cell.r{flex-direction:row}
.bar{flex:0 0 21%;border:0 solid #1a1a1a;display:flex;align-items:center;justify-content:center;gap:3%;flex-wrap:wrap}
.cell.b .bar{border-bottom-width:1px}.cell.t .bar{border-top-width:1px}.cell.l .bar{border-left-width:1px;flex-direction:column}.cell.r .bar{border-right-width:1px;flex-direction:column}
.info{flex:1;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:3% 3%;text-align:center;line-height:1.02;min-width:0;position:relative}
.cell.b .info{padding-bottom:calc(var(--S)*.025)}.cell.t .info{padding-top:calc(var(--S)*.025)}.cell.l .info{padding-left:calc(var(--S)*.025)}.cell.r .info{padding-right:calc(var(--S)*.025)}
.nm{font-family:var(--f-label);font-weight:700;text-transform:uppercase;font-size:1em;letter-spacing:.01em;word-break:break-word;hyphens:auto}
.pr{font-family:var(--f-label);font-weight:600;font-size:.98em;white-space:nowrap}
.pr.rent{color:#0e6b33;font-weight:700}
.ic{font-size:2.1em;line-height:1}
.im{flex:1 1 0;min-height:0;width:100%;object-fit:cover;border-radius:2px;margin:3% 0;display:block;background:#e9e6dc}
.corner .im{flex:none;width:84%;height:44%}
.house{width:calc(var(--S)*.016);height:calc(var(--S)*.016);background:#1fa64f;clip-path:polygon(50% 0,100% 42%,100% 100%,0 100%,0 42%)}
.hotel{width:calc(var(--S)*.034);height:calc(var(--S)*.019);background:#d32f2f;clip-path:polygon(15% 0,85% 0,100% 30%,100% 100%,0 100%,0 30%)}
.own{position:absolute;background:var(--oc);z-index:2;display:grid;place-items:center}
.own .pz{--tz:calc(var(--S)*.02);border-width:1.5px;box-shadow:none}
.cell.b .own{left:0;right:0;bottom:0;height:calc(var(--S)*.022)}.cell.t .own{left:0;right:0;top:0;height:calc(var(--S)*.022)}
.cell.l .own{left:0;top:0;bottom:0;width:calc(var(--S)*.022)}.cell.r .own{right:0;top:0;bottom:0;width:calc(var(--S)*.022)}
.cell.mort .info::after{content:'IPOTECATA';position:absolute;inset:0;display:grid;place-items:center;background:#ffffffc8;color:#b3121f;font-family:var(--f-label);font-weight:800;font-size:1em;letter-spacing:.06em}
.corner{flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--f-label);font-weight:700;text-transform:uppercase;padding:5%;font-size:1.15em;line-height:1.05}
.corner .ic{font-size:2.8em}
.toks{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;gap:2px;pointer-events:none;z-index:3}
#toklayer{position:absolute;inset:0;pointer-events:none;z-index:7}
.tk{position:absolute;left:0;top:0;width:0;height:0;transition:transform .18s cubic-bezier(.3,.7,.4,1)}
#toklayer.nt .tk{transition:none}
.tk .pz{--tz:calc(var(--S)*.046);position:absolute;left:calc(var(--tz)/-2);top:calc(var(--tz)/-2)}
.tk .pz.me{animation:glow 1.6s ease-in-out infinite}
.tk .pz.hop{animation:hop .19s ease-out}

/* ---------- centro del tabellone ---------- */
#center{grid-area:2/2/11/11;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2.2%;padding:4% 6%;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#f3f8f0 0,var(--board) 70%)}
.brandbox{display:flex;align-items:center;gap:3%;width:100%;justify-content:center}
.cimg{width:16%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;border:3px solid #fff;box-shadow:0 4px 10px #0003}
.biglogo{font-family:var(--f-display);background:var(--red);color:#fff;padding:.18em .6em;font-size:3.1em;letter-spacing:.06em;border-radius:4px;box-shadow:0 0 0 .14em #fff,0 0 0 .26em var(--red),0 8px 18px #0004;position:relative;overflow:hidden}
.biglogo::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,#fff7 50%,transparent 60%);background-size:250% 100%;animation:sheen 4s linear infinite}
.tagline{font-family:var(--f-label);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#4d6b55;font-size:1.05em;margin-top:-1%}
.deck{position:absolute;width:21%;aspect-ratio:1.55;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:var(--f-display);font-size:1.05em;text-transform:uppercase;color:#fff;transform:rotate(-10deg);box-shadow:3px 3px 0 #0002,6px 6px 0 #0001}
.deck span{font-size:1.9em;line-height:1}
.deck.ch{left:4%;top:34%;background:repeating-linear-gradient(45deg,#e8730c 0 10px,#f08a2a 10px 20px)}
.deck.cc{right:4%;top:34%;background:repeating-linear-gradient(45deg,#1565c0 0 10px,#1e7ad8 10px 20px);transform:rotate(10deg)}
.cinfo{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:1%}
.turnlab{background:#fff;padding:.35em 1em .35em .4em;border-radius:99px;font-weight:800;font-size:1.25em;box-shadow:0 3px 10px #0002;display:flex;align-items:center;gap:.5em;color:var(--ink)}
.dice{display:flex;gap:calc(var(--S)*.025)}
.die{--ds:calc(var(--S)*.072);width:var(--ds);height:var(--ds);background:#fff;border-radius:18%;box-shadow:0 4px 0 #c9c2b2,0 8px 14px #0003;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:13%;border:1px solid #ddd5c4}
.die .pip{width:70%;height:70%;border-radius:50%;background:#1b1b1b;place-self:center}
.die.d1 .pip{background:var(--red)}
.die.toss{animation:tumble .8s cubic-bezier(.25,1.3,.5,1)}
@keyframes tumble{0%{transform:translate(-120%,-140%) rotate(-200deg) scale(.6)}50%{transform:translate(8%,6%) rotate(20deg) scale(1.08)}70%{transform:translate(-4%,-10%) rotate(-8deg)}100%{transform:none}}
#actions{background:#fff;border-radius:12px;box-shadow:0 8px 24px #0002;padding:1.1em;display:flex;flex-direction:column;gap:.7em;color:var(--ink);font-size:max(13px,calc(var(--S)*.0175));width:calc(var(--S)*.58);pointer-events:auto;animation:actin .35s ease-out}
#actions:empty{display:none}
#actions .row button{flex:1}
#acttitle{font-family:var(--f-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7b8594;font-size:.85em}
.bigroll{font-size:1.25em;padding:.75em;animation:rollpulse 1.4s ease-in-out infinite}
.auction{background:#fff8e3;border:2px solid var(--gold);border-radius:10px;padding:.8em}
.timer{font-family:var(--f-display);font-size:1.5em;color:var(--red)}
.buyrow{display:flex;gap:.8em;align-items:center}
.buyimg{width:42%;aspect-ratio:3/2;flex:none;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0003}
.buyimg img{width:100%;height:100%;object-fit:cover;display:block}
.potchip{position:absolute;bottom:3%;left:4%;background:#fff;color:#1b5e20;font-weight:800;padding:.3em .8em;border-radius:99px;box-shadow:0 3px 10px #0002;font-size:1em}


/* ---------- pannello destro ---------- */
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;background:none;box-shadow:none;border-radius:0;color:var(--muted);font-size:13px;padding:11px 6px;border-bottom:3px solid transparent}
.tabs button.on{color:var(--ink);border-bottom-color:var(--red)}
.tab{padding:10px 12px;max-height:calc(100vh - 170px);overflow:auto}
#chatbadge{background:var(--red);color:#fff;border-radius:99px;font-size:10px;padding:1px 6px;margin-left:4px}
#chatbadge:empty{display:none}
.mp{display:flex;align-items:center;gap:6px;padding:8px 4px;border-bottom:1px solid #eee8db;font-size:13px;flex-wrap:wrap}
.mp .nmx{flex:1 1 55%}
.mp button{flex:none}
.mp .sw{width:10px;align-self:stretch;border-radius:3px;flex:none}
.mp .nmx{font-weight:700;min-width:0}
.grouphd{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a93a0;margin:10px 0 2px}
#log{font-size:12.5px;line-height:1.45}
#log div{border-bottom:1px solid #f0ebe0;padding:4px 0}
#chatlog{font-size:13px;line-height:1.45;min-height:120px}
#chatlog div{padding:3px 0}
#chatf{display:flex;gap:6px;margin-top:8px}
#chatf input{flex:1;min-width:0;padding:8px 10px;font-size:13px}
.chip{width:9px;height:9px;border-radius:2px;border:1px solid #0004;display:inline-block}

/* ---------- finestre ---------- */
.modal{position:fixed;inset:0;background:#06101bcc;display:grid;place-items:center;z-index:60;padding:16px;animation:fadein .2s}
.modal .card{max-width:540px;width:100%;max-height:90vh;overflow:auto}
.deed{width:280px;margin:0 auto;border:2px solid #1a1a1a;background:#fff;color:#111;padding:8px;border-radius:4px}
.deed .hd{text-align:center;padding:10px;border:2px solid #1a1a1a;margin-bottom:8px}
.deed .hd small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.deed .hd b{font-family:var(--f-label);font-size:21px;text-transform:uppercase}
.deed table{width:100%;font-size:13px;border-collapse:collapse}.deed td{padding:2px 0}.deed td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.tcols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tcols label{display:flex;gap:6px;align-items:center;font-size:13px;padding:3px 0}
.banner{position:fixed;top:64px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 18px;border-radius:99px;font-weight:700;z-index:70;box-shadow:0 8px 20px #0007;border:2px solid var(--gold)}
.eimg{width:120px;height:80px;border-radius:8px;background:#eee;display:grid;place-items:center;overflow:hidden}
.eimg img{width:100%;height:100%;object-fit:cover}
.btn-like{display:inline-block;background:#ebe6da;color:var(--ink);border-radius:8px;padding:8px 12px;font-weight:700;font-size:13px;cursor:pointer}
.plist2{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.credits a{color:var(--blue);word-break:break-all}

/* ---------- editor ---------- */
#edside{display:none;padding:14px}
#game.editing #lpanel,#game.editing #rpanel>.panel:not(#edside),#game.editing #actions,#game.editing .dice{display:none!important}
#game.editing #rpanel>#edside{display:block}
#game.editing .cell:hover{outline:3px solid var(--gold);z-index:5;transform:scale(1.05)}

/* ---------- effetti ---------- */
.cell.cin{animation:cellin .5s cubic-bezier(.2,1.4,.4,1) both}
.cell.land{animation:land .9s ease-out;z-index:4}
.stamp{position:absolute;inset:0;display:grid;place-items:center;z-index:6;pointer-events:none}
.stamp b{border:3px solid var(--sc);color:var(--sc);background:#fffe;padding:2px 6px;border-radius:5px;font-family:var(--f-display);font-size:1.05em;transform:rotate(-14deg);animation:stamp .5s cubic-bezier(.2,1.8,.4,1) both,fadeout .6s 1.7s forwards}
.floaty{position:fixed;font-family:var(--f-label);font-weight:800;font-size:22px;pointer-events:none;z-index:80;animation:floatup 1.7s ease-out forwards;text-shadow:0 2px 4px #000a}
.confetti{position:fixed;top:-14px;width:9px;height:14px;z-index:90;pointer-events:none;animation:fall linear forwards;border-radius:2px}
.ribbon{position:absolute;left:0;right:0;top:40%;z-index:9;background:var(--rc);color:#fff;text-align:center;font-family:var(--f-display);font-size:2.2em;padding:.35em 0;animation:ribbon 1.7s ease-in-out forwards;pointer-events:none;letter-spacing:.04em;box-shadow:0 6px 0 #0002}
.card3d{width:56%;aspect-ratio:1.6;position:relative;transform-style:preserve-3d;animation:cardfly 1s cubic-bezier(.2,1.1,.3,1) forwards,cardout .5s 4.2s forwards}
.card3d.ch{--fx:-75%;--fy:-10%}.card3d.cc{--fx:75%;--fy:-10%}
.cf{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5%;gap:6px;box-shadow:0 18px 40px #0007;font-size:1.4em}
.cf.back{transform:rotateY(180deg);color:#fff;font-family:var(--f-display);text-transform:uppercase}
.cf.back div{font-size:2.6em;line-height:1}
.card3d.ch .cf.back{background:repeating-linear-gradient(45deg,#e8730c 0 14px,#f39019 14px 28px)}
.card3d.cc .cf.back{background:repeating-linear-gradient(45deg,#1565c0 0 14px,#1e88e5 14px 28px)}
.cf.front{background:#fff;border:6px solid;color:var(--ink)}
.card3d.ch .cf.front{border-color:#e8730c}.card3d.cc .cf.front{border-color:#1565c0}
.cf.front h4{margin:0;font-family:var(--f-display);text-transform:uppercase;font-size:1.05em}
.card3d.ch h4{color:#e8730c}.card3d.cc h4{color:#1565c0}
.postcard{width:56%;background:#fffdf5;padding:3% 3% 2%;border-radius:4px;box-shadow:0 18px 40px #0008;transform:rotate(-4deg);animation:pcin 2.3s cubic-bezier(.2,1.3,.4,1) forwards;position:relative}
.postcard img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:2px}
.postcard::before{content:'';position:absolute;right:4%;top:-6%;width:14%;aspect-ratio:3/4;background:repeating-linear-gradient(45deg,var(--red) 0 4px,#fff 4px 8px);border:3px solid #fff;box-shadow:0 2px 6px #0004;transform:rotate(8deg)}
.pc-cap{display:flex;align-items:baseline;gap:.4em;justify-content:center;padding-top:2%;color:var(--red)}
.pc-cap span{font-family:Pacifico,cursive;font-size:1.5em}
.pc-cap b{font-family:var(--f-display);font-size:1.6em;text-transform:uppercase;color:#0f2a44}
.note{position:fixed;z-index:85;font-size:26px;pointer-events:none;filter:drop-shadow(0 3px 3px #0006)}
.flydeed{position:fixed;z-index:86;pointer-events:none;width:72px;background:#fff;border:2px solid #111;border-radius:3px;box-shadow:0 8px 20px #0007;font:700 10px var(--f-label);color:#111;text-align:center;text-transform:uppercase;padding-bottom:4px}
.flydeed div{height:16px;border-bottom:2px solid #111;margin-bottom:3px}
#board.siren{animation:siren .4s 4}
.gavel{position:absolute;inset:0;display:grid;place-items:center;z-index:11;pointer-events:none}
.gavel span{font-size:6em;animation:bang .5s cubic-bezier(.5,0,.5,1.5) 2;transform-origin:80% 80%}
.gavel b{position:absolute;margin-top:9em;font-family:var(--f-display);font-size:1.8em;color:var(--red);background:#fff;padding:.2em .6em;border-radius:8px;box-shadow:0 6px 18px #0005;animation:stamp .4s .5s both}
.burst{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:1.6em;z-index:8;pointer-events:none;text-shadow:0 0 6px #fff,0 0 12px #fff;animation:burst 1.4s ease-out forwards}
.podium{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.prow{display:flex;align-items:center;gap:10px;background:var(--paper2);border-radius:12px;padding:8px 10px;animation:rise .5s both}
.prow .pos{font-size:26px;width:36px;text-align:center}
.pbar{height:8px;background:#e5dfcf;border-radius:9px;margin-top:4px;overflow:hidden}
.pbar i{display:block;height:100%;border-radius:9px;animation:grow 1s both}
.mutebtn{display:none}

@keyframes sheen{from{background-position:150% 0}to{background-position:-100% 0}}
@keyframes logoin{from{transform:scale(.3) rotate(-12deg);opacity:0}}
@keyframes rise{from{transform:translateY(16px);opacity:0}}
@keyframes fadein{from{opacity:0}}
@keyframes glow{50%{box-shadow:0 0 0 3px #fff,0 0 16px 6px var(--pc)}}
@keyframes hop{50%{transform:translateY(-55%) scale(1.15)}}
@keyframes cellin{from{opacity:0;transform:scale(.3)}}
@keyframes land{0%{box-shadow:inset 0 0 0 0 var(--gold)}30%{box-shadow:inset 0 0 0 5px var(--gold),0 0 22px var(--gold);transform:scale(1.08)}100%{box-shadow:inset 0 0 0 0 var(--gold)}}
@keyframes stamp{from{transform:rotate(-14deg) scale(3);opacity:0}}
@keyframes fadeout{to{opacity:0}}
@keyframes floatup{0%{transform:translateY(0) scale(.6)}20%{transform:translateY(-10px) scale(1.2)}to{transform:translateY(-70px);opacity:0}}
@keyframes fall{to{transform:translate(var(--dx),108vh) rotate(var(--rot))}}
@keyframes ribbon{0%{transform:translateX(-110%)}20%,80%{transform:translateX(0)}100%{transform:translateX(110%)}}
@keyframes cardfly{0%{transform:translate(var(--fx),var(--fy)) rotate(-12deg) rotateY(180deg) scale(.38)}45%{transform:translate(0,-4%) rotate(-4deg) rotateY(180deg) scale(1.04)}100%{transform:rotate(-1deg) rotateY(0) scale(1)}}
@keyframes cardout{to{transform:translateY(-30%) scale(.6);opacity:0}}
@keyframes pcin{0%{transform:translateY(120%) rotate(12deg) scale(.5);opacity:0}18%{transform:translateY(0) rotate(-4deg) scale(1);opacity:1}85%{transform:rotate(-3deg);opacity:1}100%{transform:translateY(-20%) rotate(-6deg) scale(.9);opacity:0}}
@keyframes siren{0%,100%{box-shadow:0 0 0 calc(var(--S)*.012) #f7f3e6,0 0 0 calc(var(--S)*.016) #1a1a1a}25%{box-shadow:0 0 0 calc(var(--S)*.012) #f7f3e6,0 0 60px 14px #ff1744}75%{box-shadow:0 0 0 calc(var(--S)*.012) #f7f3e6,0 0 60px 14px #2979ff}}
@keyframes bang{0%{transform:rotate(-50deg)}60%{transform:rotate(15deg)}100%{transform:rotate(0)}}
@keyframes burst{0%{transform:scale(.2);opacity:0}25%{transform:scale(1.5);opacity:1}100%{transform:translateY(-60%) scale(1);opacity:0}}
@keyframes grow{from{width:0}}
@keyframes mup{30%{transform:scale(1.25);color:#19b35a}}
@keyframes mdown{30%{transform:scale(1.2) rotate(-3deg);color:var(--red)}}
@keyframes rollpulse{50%{transform:scale(1.03);box-shadow:0 3px 0 var(--red2),0 0 0 6px #cf1f2e33}}

/* ---------- schermi più piccoli ---------- */
@media (max-width:1180px){
  #gwrap{grid-template-columns:1fr;justify-items:center}
  #boardwrap{--S:min(calc(100vw - 24px),calc(100vh - 80px))}
  #lpanel,#rpanel{width:100%;max-width:760px;max-height:none}
  #lpanel{order:2}#rpanel{order:3}
  #players{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .tab{max-height:50vh}
}
@media (max-width:700px){
  #topbar .stat span:nth-child(n+3){display:none}
  #actions{font-size:1.25em;width:96%}
  .biglogo{font-size:2.3em}.deck{display:none}
  .logo{font-size:34px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* =================== OVERLAY (carte ed eventi, sempre dritti) =================== */
#overlay{position:absolute;inset:0;pointer-events:none;z-index:30;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:17%;font-size:calc(var(--S)*.0128)}
body.v3d #overlay{padding-bottom:0}
body.v3d #actions{width:calc(var(--S)*.66);padding:.7em .9em;gap:.5em;font-size:max(12px,calc(var(--S)*.016))}
body.v3d #actions .bigroll{padding:.55em}
#cardpop,#evpop{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
#evpop{z-index:2}
@keyframes actin{from{transform:translateY(20px);opacity:0}}
.evcard{pointer-events:auto;width:calc(var(--S)*.4);background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 30px 70px #000b,0 0 0 4px #fff;overflow:hidden;animation:evin .7s cubic-bezier(.2,1.3,.35,1) both;transform-origin:50% 100%;font-size:max(13px,calc(var(--S)*.018))}
.evcard.out{animation:evout .4s ease-in forwards}
@keyframes evin{0%{transform:perspective(900px) translateY(60%) rotateX(80deg) scale(.5);opacity:0}60%{transform:perspective(900px) rotateX(-8deg) scale(1.03);opacity:1}100%{transform:perspective(900px) rotateX(0) scale(1)}}
@keyframes evout{to{transform:perspective(900px) translateY(-30%) rotateX(-60deg) scale(.6);opacity:0}}
.evcard .evhd{padding:.7em 1em;color:#fff;text-align:center;position:relative}
.evcard .evhd small{display:block;font-size:.7em;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.evcard .evhd b{font-family:var(--f-label);font-size:1.7em;text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
.evcard .evimg{height:calc(var(--S)*.17);overflow:hidden;position:relative}
.evcard .evimg img{width:100%;height:100%;object-fit:cover;display:block;animation:kenburns 6s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.15)}to{transform:scale(1)}}
.evcard .evbody{padding:.8em 1em 1em;display:flex;flex-direction:column;gap:.6em}
.evcard table{width:100%;font-size:.85em;border-collapse:collapse}.evcard td{padding:1px 0}.evcard td:last-child{text-align:right;font-weight:700}
.evcard .evbtns{display:flex;gap:.6em}.evcard .evbtns button{flex:1;font-size:1em;padding:.7em}
.evcard .big{font-family:var(--f-display);font-size:2em;text-align:center;line-height:1}
.evcard .who{display:flex;align-items:center;justify-content:center;gap:.6em;font-weight:700}
.evcard .arrow{font-size:1.6em;animation:arrowmove 1s ease-in-out infinite}
@keyframes arrowmove{50%{transform:translateX(6px)}}
.card3d{width:46%}
.postcard{width:44%}

/* =================== DADI 3D =================== */
.die3d{--ds:calc(var(--S)*.07);width:var(--ds);height:var(--ds);transform-style:preserve-3d;position:relative}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.8,.25,1)}
.face{position:absolute;inset:0;background:linear-gradient(145deg,#fff,#ece6d8);border-radius:14%;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:13%;border:1px solid #d6cdb9;backface-visibility:hidden;box-shadow:inset 0 0 calc(var(--ds)*.1) #0002}
.face .pip{width:70%;height:70%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#555,#000);place-self:center}
.face.f1 .pip{background:radial-gradient(circle at 35% 35%,#ff6b6b,#a00010)}
.f1{transform:translateZ(calc(var(--ds)/2))}.f6{transform:rotateY(180deg) translateZ(calc(var(--ds)/2))}
.f2{transform:rotateY(90deg) translateZ(calc(var(--ds)/2))}.f5{transform:rotateY(-90deg) translateZ(calc(var(--ds)/2))}
.f3{transform:rotateX(90deg) translateZ(calc(var(--ds)/2))}.f4{transform:rotateX(-90deg) translateZ(calc(var(--ds)/2))}
.die3d.toss{animation:toss2d 1.1s cubic-bezier(.3,1.1,.4,1)}
@keyframes toss2d{0%{transform:translate(-160%,-200%) scale(.5)}40%{transform:translate(10%,8%) scale(1.15)}60%{transform:translate(-4%,-18%)}80%{transform:translate(0,2%)}100%{transform:none}}

/* =================== PEDINE (2D e 3D) =================== */
.tk .lift{position:absolute;left:0;top:0;transform-style:preserve-3d}
.tk .stand{position:absolute;--tz:calc(var(--S)*.046);width:var(--tz);left:calc(var(--tz)/-2);top:calc(var(--tz)/-2);display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%}
.tk .stand .pz{--tz:calc(var(--S)*.046)}
.tk .pbody,.tk .shadow{display:none}
.tk .lift.hop{animation:hop2d .19s ease-out}
@keyframes hop2d{50%{transform:translateY(calc(var(--S)*-.022)) scale(1.12)}}

/* =================== VISTA 3D =================== */
body.v3d #stage{perspective:calc(var(--S)*2.2);perspective-origin:50% 0%}
body.v3d #board{transform-origin:50% 50%;transform-style:preserve-3d;box-shadow:0 0 0 calc(var(--S)*.012) #f7f3e6,0 0 0 calc(var(--S)*.016) #1a1a1a,0 calc(var(--S)*.05) 0 calc(var(--S)*.008) #2c2216,0 calc(var(--S)*.1) 80px #000c}
body.v3d #center{overflow:visible;transform-style:preserve-3d}
body.v3d .cinfo,body.v3d .dice{transform-style:preserve-3d}
body.v3d .die3d{transform:translateZ(calc(var(--ds)/2))}
body.v3d .die3d.toss{animation:toss3d 1.15s cubic-bezier(.3,.9,.4,1)}
@keyframes toss3d{0%{transform:translate3d(-180%,-260%,calc(var(--S)*.3))}35%{transform:translate3d(-20%,-40%,calc(var(--S)*.12))}55%{transform:translate3d(5%,10%,calc(var(--ds)/2))}70%{transform:translate3d(8%,4%,calc(var(--S)*.04))}85%{transform:translate3d(0,0,calc(var(--ds)/2))}100%{transform:translateZ(calc(var(--ds)/2))}}
body.v3d .turnlab{transform:rotateX(-40deg);transform-origin:50% 100%}
body.v3d #toklayer,body.v3d .tk{transform-style:preserve-3d}
body.v3d .tk .stand{top:auto;bottom:0;transform:rotateZ(calc(var(--rot,0deg)*-1)) rotateX(calc(var(--tilt,38deg)*-1))}
body.v3d .tk .stand .pz{--tz:calc(var(--S)*.05);border-width:calc(var(--tz)*.08);box-shadow:none;z-index:1}
body.v3d .tk .pbody{display:block;width:calc(var(--S)*.062);height:calc(var(--S)*.058);margin-top:calc(var(--S)*-.006);background:linear-gradient(90deg,color-mix(in srgb,var(--pc) 70%,#000),var(--pc) 40%,color-mix(in srgb,var(--pc) 60%,#fff) 60%,var(--pc) 75%,color-mix(in srgb,var(--pc) 65%,#000));clip-path:polygon(32% 0,68% 0,74% 55%,100% 85%,100% 100%,0 100%,0 85%,26% 55%);border-radius:0 0 4px 4px}
body.v3d .tk .shadow{display:block;position:absolute;width:calc(var(--S)*.05);height:calc(var(--S)*.05);left:calc(var(--S)*-.025);top:calc(var(--S)*-.025);border-radius:50%;background:radial-gradient(#0007,transparent 70%)}
body.v3d .tk .lift.hop{animation:hop3d .19s ease-out}
@keyframes hop3d{50%{transform:translateZ(calc(var(--S)*.04))}}
body.v3d .tk .pz.me{animation:none;box-shadow:0 0 0 2px #fff,0 0 14px 4px var(--pc)}
body.v3d .deck{transform:translateZ(2px) rotate(-10deg)}
body.v3d .cell:hover{transform:translateZ(6px)}

#overlay .ribbon,#overlay .gavel{pointer-events:none}
#overlay .ribbon{font-size:calc(var(--S)*.028)}
#overlay .gavel{font-size:calc(var(--S)*.0128)}

/* =================== PROPRIETÀ PIÙ CHIARE =================== */
.cell.owned{background:color-mix(in srgb,var(--oc) 16%,#fff);box-shadow:inset 0 0 0 calc(var(--S)*.004) var(--oc)}
.cell.owned .nm{color:color-mix(in srgb,var(--oc) 55%,#000)}
.cell.forsale .pr{color:#5b6470}
.cell{transition:filter .25s,opacity .25s}
.cell.dim{filter:grayscale(.9);opacity:.35}
.own{box-shadow:0 0 0 1px #0003}
.ogrp{border-left:6px solid var(--gc);background:var(--paper2);border-radius:8px;margin-bottom:8px;padding:6px 8px}
.oghd{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#59626e;margin-bottom:3px}
.ofull{color:#fff;background:var(--gc);border-radius:99px;padding:1px 7px;margin-left:4px;letter-spacing:0;text-transform:none}
.orow{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 0;border-top:1px solid #0000000a;cursor:pointer}
.orow:hover{background:#fff}
.onm{flex:1;font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ohs{font-size:10px}
.oown{display:flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--pc) 15%,#fff);color:color-mix(in srgb,var(--pc) 60%,#000);border:1px solid color-mix(in srgb,var(--pc) 45%,#fff);border-radius:99px;padding:1px 7px 1px 2px;font-weight:700;font-size:11.5px;white-space:nowrap}
.oown .pz{border-width:1.5px;box-shadow:none}
.ofree{color:#7a8592;font-size:11.5px;white-space:nowrap}
/* =================== CHAT =================== */
#chatpanel{display:flex;flex-direction:column}
#chatlog{height:190px;overflow:auto;padding:4px 12px;display:flex;flex-direction:column;gap:6px}
.cmsg{display:flex;gap:7px;align-items:flex-start;font-size:13px;line-height:1.3}
.cmsg>div{background:var(--paper2);border-radius:4px 12px 12px 12px;padding:5px 9px;max-width:85%}
.cmsg b{display:block;font-size:11px}
.cmsg.mine{flex-direction:row-reverse}
.cmsg.mine>div{background:#e3efff;border-radius:12px 4px 12px 12px}
#chatpanel .quick{display:flex;gap:4px;padding:6px 12px 0;flex-wrap:wrap}
.qk{background:var(--paper2);box-shadow:none;padding:3px 7px;font-size:15px;border-radius:7px}
#chatf{padding:6px 12px 12px;margin:0}
.chatbub{position:absolute;left:2%;max-width:42%;display:flex;gap:8px;align-items:flex-start;background:#fff;color:var(--ink);border-left:5px solid var(--pc);border-radius:10px;padding:8px 12px;box-shadow:0 10px 26px #0005;font-size:max(12px,calc(var(--S)*.016));z-index:5;animation:bubin .4s cubic-bezier(.2,1.4,.4,1);transition:top .3s,opacity .4s,transform .4s;pointer-events:none}
.chatbub b{display:block;font-size:.85em;color:var(--pc)}
.chatbub.out{opacity:0;transform:translateX(-30px)}
@keyframes bubin{from{transform:translateX(-60px) scale(.8);opacity:0}}
#rpanel .tab{max-height:calc(100vh - 470px);min-height:160px}

/* =================== TELECAMERA =================== */
#stage{overflow:hidden;border-radius:6px;touch-action:none;cursor:grab}
#stage:active{cursor:grabbing}
#board{transition:transform 1s cubic-bezier(.3,.7,.3,1)}
.tk .stand{transform:rotateZ(calc(var(--rot,0deg)*-1))}
.own .pz{transform:rotateZ(calc(var(--rot,0deg)*-1))}
#camctl{position:absolute;top:1.2%;right:1.2%;display:flex;gap:4px;pointer-events:auto;z-index:6;background:#0b1522cc;padding:4px;border-radius:10px;backdrop-filter:blur(4px)}
#camctl button{background:transparent;color:#fff;box-shadow:none;padding:5px 9px;font-size:15px;border-radius:7px}
#camctl button:hover{background:#ffffff22}
#camauto{font-size:12.5px!important;font-weight:800}
#camauto.on{background:var(--red)!important}

/* =================== CASELLE ORIENTATE COME UN VERO TABELLONE =================== */
.cell.l,.cell.r,.cell.t{display:block}
.rotw{position:absolute;left:50%;top:50%;width:calc(var(--S)*.081);height:calc(var(--S)*.1296);display:flex;flex-direction:column}
.rw-l{transform:translate(-50%,-50%) rotate(90deg)}
.rw-t{transform:translate(-50%,-50%) rotate(180deg)}
.rw-r{transform:translate(-50%,-50%) rotate(-90deg)}
.rotw .bar{border-bottom-width:1px!important;flex-direction:row!important;border-left-width:0!important;border-right-width:0!important;border-top-width:0!important}
.rotw .info{padding:3% 3% calc(var(--S)*.025)!important}
.rotw .own{left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;height:calc(var(--S)*.022)!important}
.cell.mort .rotw .info::after{transform:none}

/* =================== PEDINE IN METALLO =================== */
.pz{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--pc) 55%,#fff),var(--pc) 70%)}
.pz .psvg{width:78%;height:78%;filter:drop-shadow(0 1px 1px #0008)}
.pz>span{font-size:calc(var(--tz)*.5)}
.pawn-opt{position:relative}
.pawn-opt.locked .pz{filter:grayscale(.2) brightness(.85)}
.pawn-opt .lk{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);background:#1b1b1bdd;color:#ffd75a;font-size:9.5px;padding:1px 5px;border-radius:99px;white-space:nowrap}
.pawn-opt.gold .pz{box-shadow:0 0 0 2px #f2b632,0 3px 0 #0005}
/* 3D: la pedina in metallo sta in piedi su una base del colore del giocatore */
body.v3d .tk .stand .pz{--tz:calc(var(--S)*.075);background:none;border:0;box-shadow:none}
body.v3d .tk .stand .pz .psvg{width:100%;height:100%;filter:drop-shadow(0 2px 2px #0007)}
body.v3d .tk .pbody{width:calc(var(--S)*.05);height:calc(var(--S)*.012);margin-top:calc(var(--S)*-.008);background:var(--pc);clip-path:none;border-radius:50%;box-shadow:inset 0 -2px 0 #0004}
body.v3d .tk .pz.me{box-shadow:none;filter:drop-shadow(0 0 6px var(--pc))}
/* =================== FOTO PROFILO =================== */
.avz{--tz:34px;width:var(--tz);height:var(--tz);border-radius:50%;position:relative;flex:none;box-shadow:0 0 0 3px var(--pc),0 3px 6px #0004}
.avz img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avz .avpawn{position:absolute;right:-5px;bottom:-5px;width:46%;height:46%;border-radius:50%;background:var(--pc);border:2px solid #fff;display:grid;place-items:center}
.avz .avpawn .psvg{width:80%;height:80%}
.bigav{width:72px;height:72px;border-radius:50%;background:var(--paper2);position:relative;cursor:pointer;flex:none;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--red)}
.bigav img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.bigav span{display:grid;place-items:center;width:100%;height:100%}.bigav span .psvg{width:70%;height:70%}
.bigav i{position:absolute;right:-4px;bottom:-4px;background:#fff;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-style:normal;font-size:14px;box-shadow:0 2px 6px #0003}
/* =================== TARÌ E NEGOZIO =================== */
.tari{display:flex;align-items:center;gap:6px;font-family:var(--f-label);font-weight:800;font-size:22px;color:#8a5a00;background:#fff4d1;border:1px solid #f2d27a;border-radius:99px;padding:3px 12px 3px 4px;white-space:nowrap}
.coin{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#e2b23a 55%,#a87a12);color:#6b4500;font:900 12px var(--f-display);box-shadow:inset 0 0 0 2px #c48d14;vertical-align:middle}
.coin.big{width:46px;height:46px;font-size:22px}
.btn-sm .coin{width:16px;height:16px;font-size:9px}
.shop{max-width:640px!important}
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.sitem{background:var(--paper2);border-radius:10px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:12.5px}
.sitem.gold{background:linear-gradient(160deg,#fff6d8,#f5e3ac)}
.sitem.focus{box-shadow:0 0 0 3px var(--red);animation:rise .4s}
.sprev{width:64px;height:64px;display:grid;place-items:center}.sprev .psvg{width:100%;height:100%;filter:drop-shadow(0 2px 2px #0005)}
.acc{background:linear-gradient(135deg,#fffdf8,#fff3e0)}

/* pedine renderizzate in 3D (immagini) */
img.psvg{object-fit:contain;display:block;pointer-events:none}
.pz img.psvg{width:86%;height:86%}
.pz{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--pc) 45%,#fff),var(--pc) 75%)}
body.v3d .tk .stand .pz{--tz:calc(var(--S)*.08)}
body.v3d .tk .stand .pz img.psvg{width:100%;height:100%}
.sprev img.psvg{width:100%;height:100%}
.pawn-opt .pz{--tz:46px}
/* pedine 3D più grandi e leggibili sul tabellone */
body.v3d .tk .stand .pz{--tz:calc(var(--S)*.11)}
body.v3d .tk .stand .pz img.psvg{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 4px 3px #000b)}
body.v3d .tk .pbody{width:calc(var(--S)*.07);height:calc(var(--S)*.016);margin-top:calc(var(--S)*-.012)}
body.v3d .tk .shadow{width:calc(var(--S)*.08);height:calc(var(--S)*.06);left:calc(var(--S)*-.04);top:calc(var(--S)*-.03)}
.tk .stand .pz{--tz:calc(var(--S)*.052)}
/* ===== pedine realistiche (livello sopra il tabellone) ===== */
#stage{position:relative}
#anclayer{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
#anclayer i{position:absolute;width:10px;height:10px;visibility:hidden}
#pawnlayer{position:absolute;inset:0;pointer-events:none;z-index:8}
.pw{position:absolute;left:0;top:0;width:0;height:0;--ps:40px;--pc:#c9a227}
.pwbase{position:absolute;width:calc(var(--ps)*.86);height:calc(var(--ps)*.3);left:calc(var(--ps)*-.43);top:calc(var(--ps)*-.15);border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--pc) 45%,#fff),var(--pc) 55%,color-mix(in srgb,var(--pc) 55%,#000));
  box-shadow:0 0 0 calc(var(--ps)*.03) #fff,0 calc(var(--ps)*.05) calc(var(--ps)*.1) #000a}
body.v3d .pwbase{height:calc(var(--ps)*.24);top:calc(var(--ps)*-.12)}
.pwin{position:absolute;width:var(--ps);height:var(--ps);left:calc(var(--ps)*-.5);bottom:calc(var(--ps)*.02);transform-origin:50% 100%}
.pwin img.psvg{width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 calc(var(--ps)*.04) calc(var(--ps)*.03) #000a)}
.pwin.hop{animation:pwhop .19s ease-out}
@keyframes pwhop{50%{transform:translateY(-30%) scale(1.06)}}
.pw.me .pwbase{box-shadow:0 0 0 calc(var(--ps)*.035) #fff,0 0 calc(var(--ps)*.18) calc(var(--ps)*.05) var(--pc),0 calc(var(--ps)*.05) calc(var(--ps)*.1) #000a}
.pwarrow{display:none;position:absolute;left:calc(var(--ps)*-.14);bottom:calc(var(--ps)*1.08);width:calc(var(--ps)*.28);height:calc(var(--ps)*.22);
  background:var(--pc);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 0 1px #fff);animation:pwbob 1s ease-in-out infinite}
.pw.turn .pwarrow{display:block}
@keyframes pwbob{50%{transform:translateY(-35%)}}
.pwtag{display:none;position:absolute;left:50%;bottom:calc(var(--ps)*1.22);transform:translateX(-50%);white-space:nowrap;background:var(--pc);color:#fff;
  font:700 max(10px,calc(var(--ps)*.2))/1.25 system-ui,sans-serif;padding:.1em .5em;border-radius:99px;box-shadow:0 0 0 1.5px #fff,0 2px 4px #0006;text-shadow:0 1px 1px #0006}
.pw.turn .pwtag{display:block}
.pwbars{display:none;position:absolute;inset:8% 6% 0;background:repeating-linear-gradient(90deg,transparent 0 18%,#222d 18% 26%);border-radius:4px}
.pw.jailed .pwbars{display:block}

/* ===================== NOVITÀ: case 3D, timer, scambi, classifica, amici, negozio, telefono ===================== */
/* case e alberghi in rilievo */
.bld{position:absolute;left:0;top:0;width:0;height:0;--hs:16px;pointer-events:none}
.bld{display:block}
.bld::before{content:'';position:absolute;left:calc(var(--hs)*-1.1);width:calc(var(--hs)*2.2);top:calc(var(--hs)*.12);height:calc(var(--hs)*.5);border-radius:50%;background:radial-gradient(#0006,transparent 70%)}
.bld>i{position:absolute;bottom:calc(var(--hs)*-.3);width:var(--hs);height:var(--hs);display:block;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 2px 2px #0008)}
.bld>i svg{width:100%;height:100%;display:block;overflow:visible}
.bld>i.hs:nth-child(1){left:calc(var(--hs)*-.5)}
.bld>i.hs:nth-child(1):nth-last-child(2){left:calc(var(--hs)*-1)}.bld>i.hs:nth-child(2):nth-last-child(1){left:0}
.bld>i.hs:nth-child(1):nth-last-child(3){left:calc(var(--hs)*-1.45)}.bld>i.hs:nth-child(2):nth-last-child(2){left:calc(var(--hs)*-.5)}.bld>i.hs:nth-child(3):nth-last-child(1){left:calc(var(--hs)*.45)}
.bld.n4>i.hs:nth-child(1){left:calc(var(--hs)*-1.9)}.bld.n4>i.hs:nth-child(2){left:calc(var(--hs)*-.95)}.bld.n4>i.hs:nth-child(3){left:0}.bld.n4>i.hs:nth-child(4){left:calc(var(--hs)*.95)}
.bld>i.htl{width:calc(var(--hs)*1.9);height:calc(var(--hs)*1.56);left:calc(var(--hs)*-.95)}
.bld>i.drop{animation:bdrop .7s cubic-bezier(.3,1.25,.45,1) both}
.bld>i.drop::after{content:'';position:absolute;left:-30%;right:-30%;bottom:-10%;height:40%;border-radius:50%;background:radial-gradient(#fff9,transparent 70%);animation:dust .8s ease-out both;animation-delay:inherit}
@keyframes bdrop{0%{transform:translateY(-320%) rotate(-12deg);opacity:0}45%{opacity:1}65%{transform:translateY(0) scale(1.15,.8)}82%{transform:translateY(-14%) scale(.95,1.06)}100%{transform:none}}
@keyframes dust{0%,55%{transform:scale(.2);opacity:0}70%{opacity:1}100%{transform:scale(1.6);opacity:0}}

/* timer del turno e giocatore assente */
.tbar{position:relative;height:22px;border-radius:99px;background:#eef1f5;overflow:hidden;font-size:12px;font-weight:700;color:#3b4654}
.tbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#4caf50,#8bc34a);transition:width .25s linear;border-radius:99px}
.tbar i.low{background:linear-gradient(90deg,#e53935,#ff7043);animation:tblink .5s steps(2) infinite}
.tbar span{position:relative;display:block;text-align:center;line-height:22px}
.tbar.mine{box-shadow:0 0 0 2px #4caf5055}
@keyframes tblink{50%{opacity:.6}}
.awaymsg{background:#fff4d6;border:2px solid #f2b632;border-radius:10px;padding:8px 10px;font-size:13.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:space-between;animation:rise .4s}

/* scambi */
.trade2{max-width:820px!important}
.tgrid{display:grid;grid-template-columns:1fr 34px 1fr;gap:8px;margin-top:12px;align-items:stretch}
.tswap{align-self:center;font-size:24px;color:#9aa4b1;text-align:center}
.tcol{background:var(--paper2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tch{display:flex;align-items:center;gap:8px}.tch small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.tch .money{font-size:16px}
.tzone{min-height:96px;border:2px dashed #c9bfa8;border-radius:10px;padding:6px;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;background:#fff;transition:background .15s,border-color .15s}
.tzone.over,.tpool.over{background:#e9f7ee;border-color:var(--green)}
.tzh{width:100%;text-align:center;color:#a3a9b1;font-size:13px;padding:16px 0}
.tpl{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tpool{display:flex;flex-wrap:wrap;gap:6px;max-height:170px;overflow:auto;border:2px solid transparent;border-radius:10px;padding:2px}
.mdeed{width:84px;background:#fff;border-radius:7px;box-shadow:0 2px 5px #0003,0 0 0 1px #0002;overflow:hidden;cursor:grab;font-size:11px;line-height:1.1;text-align:center;user-select:none;transition:transform .15s;animation:rise .25s}
.mdeed:hover{transform:translateY(-3px) rotate(-1.5deg)}.mdeed.drag{opacity:.4}
.mdeed .mdh{height:12px}.mdeed b{display:block;padding:4px 3px 1px;font-family:var(--f-label);text-transform:uppercase;font-size:12px;word-break:break-word}.mdeed small{display:block;color:var(--muted);padding-bottom:4px}
.mdeed.m{opacity:.7;background:repeating-linear-gradient(45deg,#fff 0 6px,#fbe9e9 6px 12px)}
.mdeed.sm{width:70px;cursor:default;font-size:10px}.mdeed.sm b{font-size:11px}
.tmoney{background:#e8f5e9;color:#1b5e20;font-weight:800;border-radius:7px;padding:8px 10px;font-size:13px;align-self:center}
.tmrow{display:flex;align-items:center;gap:6px;font-size:13px;flex-wrap:wrap}.tmrow input[type=range]{flex:1;min-width:80px}.tmrow input[type=number]{width:84px;padding:5px 7px}
.tval{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px}.tvbar{flex:1;height:10px;border-radius:99px;background:#1f6fd1;overflow:hidden}.tvbar i{display:block;height:100%;background:var(--red);transition:width .3s}
.tradebox{background:#eef5ff!important;border-color:#1565c0!important}
.tbx{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;margin-top:6px;align-items:start}.tbx>div{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.tbx small{font-weight:700;color:#3b4654}
.tbl{display:flex;flex-wrap:wrap;gap:4px}
@media (max-width:640px){.tgrid{grid-template-columns:1fr}.tswap{transform:rotate(90deg)}}

/* menu: gioca subito, statistiche, badge */
.quickc{text-align:center;background:linear-gradient(160deg,#fff,#fff3e6)}
.bigq{width:100%;font-size:22px;padding:16px;letter-spacing:.02em;animation:qglow 1.6s ease-in-out infinite}
@keyframes qglow{50%{box-shadow:0 3px 0 var(--red2),0 0 0 7px #cf1f2e40}}
.quickc .muted{margin-top:8px}
.accstats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px}
.accstats div{background:var(--paper2);border-radius:8px;padding:6px 4px;text-align:center;font-size:10.5px;color:var(--muted);line-height:1.2}
.accstats b{display:block;font-size:15px;color:var(--ink);font-family:var(--f-label)}
@media (max-width:480px){.accstats{grid-template-columns:repeat(3,1fr)}.accstats div:nth-child(n+4){display:none}}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:99px;background:var(--red);color:#fff;font-size:11px;padding:0 5px;margin-left:4px}
.pubc .msg{font-size:16px;margin:6px 0}

/* negozio */
.shoptabs{margin:10px -18px 12px;overflow-x:auto;scrollbar-width:none}.shoptabs button{white-space:nowrap;flex:1 0 auto}
.shopbody{min-height:200px}
.thprev{width:64px;height:64px;border-radius:6px;position:relative;display:grid;grid-template:1fr 2fr 1fr/1fr 2fr 1fr;border:3px solid #1a1a1a;background:var(--pb,#dfeedd);overflow:hidden}
.thprev i{background:var(--pc2,#f7f6ee);border:1px solid #0003}.thprev i:nth-child(1){grid-area:1/1/2/4}.thprev i:nth-child(2){grid-area:3/1/4/4}.thprev i:nth-child(3){grid-area:1/1/4/2}.thprev i:nth-child(4){grid-area:1/3/4/4}
.thprev b{grid-area:2/2;place-self:center;font-family:var(--f-display);color:#fff;background:var(--red);padding:0 4px;font-size:12px;border-radius:2px}
.thprev.th-notte{--pb:radial-gradient(#fff 1px,transparent 1.5px) 0 0/9px 9px,#13203b;--pc2:#22345a}
.thprev.th-estate{--pb:linear-gradient(#55d0d6,#2aa3c9);--pc2:#fff2cf}
.thprev.th-maiolica{--pb:repeating-conic-gradient(#1b4f9c 0 25%,#f4c430 0 50%) 0 0/12px 12px;--pc2:#fbf8ef}
.dprev{display:flex!important;gap:6px;height:56px;align-items:center}
.dprev .die3d{--ds:40px;width:40px;height:40px;position:relative;transform:rotate(-8deg)}.dprev .die3d+.die3d{transform:rotate(10deg)}
.dprev .face{box-shadow:0 3px 6px #0004}
.fprev{height:64px;display:grid;place-items:center}

/* dadi personalizzati */
.dice[data-skin=dc_oro] .face{background:linear-gradient(145deg,#fff4b8,#e2b23a 55%,#a87a12);border-color:#8a6510}
.dice[data-skin=dc_oro] .face .pip{background:radial-gradient(circle at 35% 35%,#7a5200,#2b1a00)}
.dice[data-skin=dc_maiolica] .face{background:radial-gradient(circle,transparent 30%,#1b4f9c22 31% 34%,transparent 35%),repeating-conic-gradient(#fff 0 25%,#eef3ff 0 50%) 0 0/50% 50%;border:2px solid #1b4f9c}
.dice[data-skin=dc_maiolica] .face .pip{background:radial-gradient(circle at 35% 35%,#4f86d9,#123a7a)}
.dice[data-skin=dc_maiolica] .face.f1 .pip{background:radial-gradient(circle at 35% 35%,#ffd54f,#e09b00)}
.dice[data-skin=dc_lava] .face{background:linear-gradient(145deg,#4a4a4a,#1c1c1c);border-color:#000}
.dice[data-skin=dc_lava] .face .pip{background:radial-gradient(circle at 40% 40%,#fff3a0,#ff7a00 45%,#c41d00);box-shadow:0 0 6px #ff6a00}
.dice[data-skin=dc_corallo] .face{background:linear-gradient(145deg,#ffb3a7,#e8503a 60%,#b8301e);border-color:#8f2414}
.dice[data-skin=dc_corallo] .face .pip{background:radial-gradient(circle at 35% 35%,#fff,#f3e3d6)}

/* cornici della foto */
.avz.fr,.pz.fr{overflow:visible}
.avz.fr::after,.pz.fr::after{content:'';position:absolute;inset:calc(var(--tz)*-.16);border-radius:50%;padding:calc(var(--tz)*.1);background:var(--frg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;z-index:2}
.fr.fr-oro{--frg:conic-gradient(#fff3b0,#e2b23a,#a87a12,#ffe08a,#e2b23a,#fff3b0)}
.fr.fr-trinacria{--frg:linear-gradient(135deg,#f6c200 0 50%,#d5281b 50% 100%)}
.fr.fr-limoni{--frg:repeating-conic-gradient(#f9e04b 0 30deg,#3e9b3a 30deg 45deg)}
.fr.fr-mare{--frg:repeating-conic-gradient(#0e74c9 0 20deg,#5fd0e8 20deg 40deg,#fff 40deg 46deg)}
.fr.fr-trinacria::before,.fr.fr-limoni::before{position:absolute;top:calc(var(--tz)*-.32);left:calc(var(--tz)*-.18);font-size:calc(var(--tz)*.38);z-index:3;line-height:1}
.fr.fr-limoni::before{content:'🍋'}.fr.fr-trinacria::before{content:'☀️'}

/* tabelloni a tema */
body.th-notte{--board:#14213d;--cell:#1d2b4b;--cellink:#eef2ff}
body.th-notte #center{background:radial-gradient(circle at 70% 20%,#fff8 0 2%,transparent 2.5%),radial-gradient(#fff 1px,transparent 1.5px) 0 0/22px 22px,radial-gradient(#fff9 1px,transparent 1.5px) 11px 13px/31px 31px,radial-gradient(circle at 50% 120%,#2b4c8a,#0d1730 70%)}
body.th-notte .cell{border-color:#7f93c255}body.th-notte .im{filter:brightness(.85) saturate(1.1)}body.th-notte .pr.rent{color:#7ef0a4}body.th-notte .tagline{color:#cfd8ff}
body.th-estate{--board:#bfe9ea;--cell:#fff6dc;--cellink:#3b2a12}
body.th-estate #center{background:radial-gradient(circle at 80% 15%,#ffe066 0 6%,#ffd16633 9%,transparent 14%),linear-gradient(180deg,#8fdcf0 0,#3fb7d6 55%,#f3dca4 56%,#ecd08f 100%)}
body.th-maiolica{--board:#f4efe2;--cell:#fbf8ef;--cellink:#14295a}
body.th-maiolica #center{background:radial-gradient(circle,#fbf8ef 0 18%,transparent 19%) 0 0/60px 60px,repeating-conic-gradient(#1b4f9c 0 25%,#fbf8ef 0 50%) 0 0/30px 30px;background-blend-mode:normal}
body.th-maiolica .cell{border-color:#1b4f9c88}

/* classifica e amici */
.lbl{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto}
.lbr{display:flex;align-items:center;gap:10px;background:var(--paper2);border-radius:10px;padding:7px 10px;animation:rise .35s both}
.lbr.me{box-shadow:0 0 0 2px var(--red);background:#fff1f1}
.lbr small{display:block;color:var(--muted);font-size:11px}.lbp{width:26px;text-align:center;font-weight:800;font-size:16px}.lbv{font-family:var(--f-label);font-size:20px;font-weight:800}
.friends .ph{padding:12px 0 6px}
.frow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}.frow small{display:block;color:var(--muted);font-size:11.5px}
.dot{width:10px;height:10px;border-radius:50%;background:#b8bec6;flex:none}.dot.on{background:#2ecc71;box-shadow:0 0 0 3px #2ecc7133}
#toasts{position:fixed;top:12px;right:12px;z-index:400;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 24px))}
.toast{background:#fff;color:var(--ink);border-radius:12px;padding:10px 12px;box-shadow:0 12px 30px #0007;display:flex;gap:10px;align-items:center;font-size:14px;animation:toastin .45s cubic-bezier(.2,1.3,.4,1)}
.toast.out{animation:toastout .35s ease-in forwards}.toast .tav{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;font-size:24px;background:var(--paper2)}
@keyframes toastin{from{transform:translateX(120%)}}@keyframes toastout{to{transform:translateX(120%);opacity:0}}

/* ===================== TELEFONO (verticale) ===================== */
#mtabs{display:none}
@media (max-width:760px){
  #game{padding-bottom:60px}
  #topbar{padding:6px 8px;gap:6px}
  #topbar .brand{font-size:12px;padding:3px 7px}
  #topbar .stat{font-size:11px;gap:8px}#topbar .stat span:nth-child(n+2){display:none}
  #topbar .tb-r{gap:3px}#topbar .tb-r button{padding:5px 7px;font-size:12px}#trules{display:none}
  #gwrap{display:block;padding:4px 0 0}
  #boardwrap{--S:min(calc(100vw - 10px),calc(100dvh - 44px - 60px - 150px));margin:0 auto}
  #lpanel,#rpanel{position:fixed;left:0;right:0;bottom:58px;max-height:70dvh;overflow:auto;z-index:55;background:#0b1522;padding:8px;border-radius:18px 18px 0 0;box-shadow:0 -12px 30px #000a;transform:translateY(115%);transition:transform .32s cubic-bezier(.3,.8,.3,1);width:auto;max-width:none;display:block}
  #lpanel::before,#rpanel::before{content:'';display:block;width:44px;height:5px;border-radius:9px;background:#ffffff40;margin:0 auto 8px}
  body[data-m=players] #lpanel,body[data-m=props] #rpanel,body[data-m=chat] #rpanel{transform:none}
  body[data-m=props] #chatpanel{display:none}
  body[data-m=chat] #rpanel>.panel:first-child{display:none}
  body[data-m=chat] #chatpanel{margin-top:0}
  #rpanel .tab{max-height:52dvh}
  #chatlog{max-height:40dvh}
  #players{display:flex;flex-direction:column;gap:8px}
  #mtabs{display:flex;position:fixed;left:0;right:0;bottom:0;height:58px;background:#0b1522;border-top:1px solid #ffffff1c;z-index:60;padding-bottom:env(safe-area-inset-bottom)}
  #mtabs button{flex:1;background:none;border:0;color:#8c9bb0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;gap:1px;position:relative;box-shadow:none;border-radius:0;padding:0}
  #mtabs button span{font-size:10.5px;font-weight:700}
  #mtabs button.on{color:#fff}#mtabs button.on::after{content:'';position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--red)}
  #chatbadge{position:absolute;top:6px;left:56%;background:var(--red);color:#fff;font-size:10px;min-width:17px;height:17px;border-radius:99px;display:grid;place-items:center;padding:0 4px}
  #overlay{padding-bottom:0;overflow:visible}
  #actions,body.v3d #actions{position:fixed;left:6px;right:6px;bottom:64px;width:auto;font-size:14px;padding:10px 12px;gap:8px;z-index:50;max-height:42dvh;overflow:auto;box-shadow:0 -6px 24px #0008}
  #actions .bigroll{padding:12px;font-size:17px}
  .evcard{width:min(86vw,340px)!important;font-size:14px!important}
  .card3d{transform:scale(1.4)}
  #camctl{transform:scale(.85);transform-origin:top right}
  .chatbub{font-size:12px}
  .modal{padding:8px}.modal .card{max-height:calc(100dvh - 16px);padding:14px}
  .screen{padding:14px 10px 40px}
  .logo{font-size:30px;padding:8px 18px}
  .bigq{font-size:19px}
}
.dprev .face{transform:none!important;backface-visibility:visible}
@media (max-width:760px){
  #actions,body.v3d #actions{position:absolute;top:calc(100% + 8px);bottom:auto;left:0;right:0;max-height:none;box-shadow:0 8px 24px #0006}
  #boardwrap{margin-bottom:190px}
  #camctl{transform:scale(.72)}
}

/* ===== logo: schermata di caricamento e centro del tabellone ===== */
#splash{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#0b1522;overflow:hidden;transition:opacity .6s,visibility .6s}
#splash.out{opacity:0;visibility:hidden}#splash.gone{display:none}
.splbg{position:absolute;inset:-30px;background:url(img/splash.jpg) center/cover no-repeat;filter:blur(10px) brightness(.55) saturate(1.2);transform:scale(1.08);animation:splzoom 9s ease-out both}
.splin{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;width:min(92vw,900px)}
.spllogo{width:100%;height:auto;filter:drop-shadow(0 20px 40px #000c);animation:splin 1s cubic-bezier(.2,1.4,.4,1) both,splfloat 3.2s ease-in-out 1s infinite}
.splbar{width:min(70vw,420px);height:10px;border-radius:99px;background:#ffffff26;overflow:hidden;box-shadow:0 0 0 2px #ffffff1a}
.splbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#f6c200,#ffde59,#d5281b);transition:width .3s;box-shadow:0 0 12px #f6c200}
.spltxt{font-family:var(--f-label);font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#ffe9a8;font-size:15px;text-shadow:0 2px 6px #000}
@keyframes splin{0%{transform:scale(.4) rotate(-6deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes splfloat{50%{transform:translateY(-10px) scale(1.015)}}
@keyframes splzoom{from{transform:scale(1.25)}}
.cblogo{display:none}
#center.haslogo .brandbox,#center.haslogo .tagline{display:none}
#center.haslogo{padding:3% 5% 4%;gap:1.5%}
#center.haslogo .cblogo{display:block;width:64%;aspect-ratio:1672/941;position:relative;z-index:1;pointer-events:none;flex:none;animation:cblogo 5s ease-in-out infinite;filter:drop-shadow(0 calc(var(--S)*.01) calc(var(--S)*.016) #0007)}
#center.haslogo .cblogo img{width:100%;height:100%;display:block}
#center.haslogo .cblogo::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#fff9 48%,#fff0 60%) no-repeat;background-size:250% 100%;animation:sheen 3.8s linear infinite;
  -webkit-mask:url(img/logo-small.webp) center/100% 100% no-repeat;mask:url(img/logo-small.webp) center/100% 100% no-repeat}
#center.haslogo .deck{top:47%;width:19%}
#center.haslogo .deck.ch{left:5%}#center.haslogo .deck.cc{right:5%}
#center.haslogo .cinfo{margin-top:0}
body.v3d #center.haslogo .cinfo{flex-direction:column-reverse;gap:14px}
body.v3d #center.haslogo .turnlab{transform:rotateX(-40deg) translateY(10%)}
@keyframes cblogo{50%{transform:translateY(-1.2%) scale(1.01)}}
body.v3d #center.haslogo .cblogo{transform:translateZ(2px)}
.mlogo{display:block;width:min(100%,560px);height:auto;margin:0 auto -6px;filter:drop-shadow(0 16px 30px #000b);animation:splin .9s cubic-bezier(.2,1.4,.4,1) both}

/* ===== dove sono i giocatori + animazioni in più ===== */
.cell.here{box-shadow:inset 0 0 0 calc(var(--S)*.004) var(--hc)}
.cell.herecur{box-shadow:inset 0 0 0 calc(var(--S)*.006) var(--hc),0 0 calc(var(--S)*.02) var(--hc);z-index:4;animation:herepulse 1.3s ease-in-out infinite}
@keyframes herepulse{50%{box-shadow:inset 0 0 0 calc(var(--S)*.009) var(--hc),0 0 calc(var(--S)*.035) var(--hc)}}
.cell.herecur::before{content:'';position:absolute;inset:0;background:var(--hc);opacity:.13;pointer-events:none;z-index:3}
.pwtag small{display:block;font-size:.78em;font-weight:600;opacity:.95;text-align:center}
.pwtag{text-align:center;line-height:1.15;padding:.18em .7em}
.pw.step .pwbase::after{content:'';position:absolute;inset:-25%;border-radius:50%;border:calc(var(--ps)*.03) solid var(--pc);animation:steppuff .45s ease-out forwards}
@keyframes steppuff{from{transform:scale(.6);opacity:.9}to{transform:scale(1.5);opacity:0}}
.ripple{position:absolute;width:var(--rs);height:calc(var(--rs)*.55);margin:calc(var(--rs)*-.275) 0 0 calc(var(--rs)*-.5);border-radius:50%;border:3px solid var(--pc);box-shadow:0 0 12px var(--pc);pointer-events:none;animation:ripple 1s ease-out both;z-index:9000}
@keyframes ripple{from{transform:scale(.2);opacity:1}to{transform:scale(1.6);opacity:0}}
.landchip{position:absolute;left:50%;top:9%;transform:translateX(-50%);background:#fff;color:var(--ink);border-radius:99px;padding:.35em 1em .35em .4em;display:flex;align-items:center;gap:.5em;font-size:max(12px,calc(var(--S)*.019));box-shadow:0 0 0 3px var(--pc),0 10px 24px #0006;white-space:nowrap;z-index:5;animation:chipin .45s cubic-bezier(.2,1.4,.4,1) both;pointer-events:none}
.landchip b{color:var(--ink)}.landchip.out{animation:chipout .4s ease-in forwards}
@keyframes chipin{from{transform:translate(-50%,-150%) scale(.7);opacity:0}}@keyframes chipout{to{transform:translate(-50%,-80%);opacity:0}}
#boardwrap.thud{animation:thud .35s ease-out}
@keyframes thud{25%{transform:translateY(3px)}50%{transform:translateY(-2px)}75%{transform:translateY(1px)}}
.pcard.cur{animation:curglow 1.8s ease-in-out infinite}
@keyframes curglow{50%{box-shadow:0 0 0 2px var(--pc),0 0 18px color-mix(in srgb,var(--pc) 60%,transparent)}}
.pcard .money{transition:color .3s}
@media (max-width:760px){.landchip{top:4%;font-size:12px}}
.landcard{position:absolute;left:50%;top:6%;width:calc(var(--S)*.25);min-width:170px;background:#fff;color:var(--ink);border-radius:12px;overflow:hidden;box-shadow:0 0 0 3px var(--pc),0 18px 40px #000a;z-index:5;pointer-events:none;
  transform:translateX(-50%);animation:lcin .55s cubic-bezier(.2,1.4,.4,1) both;font-size:max(12px,calc(var(--S)*.017))}
.landcard.out{animation:lcout .4s ease-in forwards}
.lch{font-family:var(--f-label);font-weight:800;text-transform:uppercase;text-align:center;padding:.45em .5em;font-size:1.25em;letter-spacing:.03em}
.lci{height:calc(var(--S)*.11);min-height:70px;background:#eee}.lci img{width:100%;height:100%;object-fit:cover;display:block}.lcic{display:grid;place-items:center;font-size:2.6em;background:var(--paper2)}
.lcb{display:flex;align-items:center;gap:.6em;padding:.5em .7em;line-height:1.25}.lcb small{display:block;color:#3b4654;font-size:.9em}
@keyframes lcin{0%{transform:translateX(-50%) translateY(-40%) rotateX(70deg) scale(.6);opacity:0}100%{transform:translateX(-50%)}}
@keyframes lcout{to{transform:translateX(-50%) translateY(-30%) scale(.8);opacity:0}}
@media (max-width:760px){.landcard{top:3%;min-width:150px;font-size:12px}}

/* ===== ranghi: targhette LGM / GM e pannello admin ===== */
.rtag{display:inline-flex;align-items:center;gap:.25em;font:800 10.5px/1 var(--f-body);letter-spacing:.06em;padding:.32em .55em;border-radius:5px;margin-left:.45em;vertical-align:middle;background:#e3e7ee;color:#37465a;white-space:nowrap;text-transform:uppercase}
.rtag.lgm{background:linear-gradient(135deg,#e8202d,#8e0b1f);color:#ffe27a;text-shadow:0 1px 1px #0008;box-shadow:0 0 0 1.5px #f2b632,0 0 10px #f2b63299;position:relative;overflow:hidden}
.rtag.lgm::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#fff9 50%,transparent 65%);background-size:300% 100%;animation:sheen 2.6s linear infinite}
.rtag.gm{background:linear-gradient(135deg,#4fa3ff,#1f5fd1);color:#fff;box-shadow:0 0 0 1px #123f8f;text-shadow:0 1px 1px #0006}
.rtag.ban{background:#b00020;color:#fff}
.pwtag .rtag{font-size:.75em;margin:0 .2em 0 0}
.cmsg .rtag,.chatbub .rtag{font-size:9px;padding:.25em .4em}
.btn-admin{width:100%;margin-top:8px;background:linear-gradient(135deg,#1a1a1a,#3a2a00);color:#ffd75e;box-shadow:0 3px 0 #000,0 0 0 1px #f2b63266;letter-spacing:.03em}
.admin{max-width:820px!important}
.astats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px}
.astats div{background:#16212e;color:#9fb0c6;border-radius:8px;padding:8px 4px;text-align:center;font-size:11px}.astats b{display:block;color:#ffd75e;font:800 20px var(--f-label)}
.abody{min-height:240px}
.alist{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;margin-top:8px}
.aurow{background:var(--paper2);border-radius:10px;padding:8px 10px}.aurow.ban{background:#fdecec}.aurow small{display:block;color:var(--muted);font-size:11.5px}
.aact{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px;align-items:center}.aact input,.aact select{padding:5px 7px;font-size:12.5px}
.tari.sm{font-size:14px;padding:2px 8px}
.alog div{font-size:13px;padding:5px 0;border-bottom:1px solid var(--line)}.alog small{color:var(--muted)}
.toast.announce{box-shadow:0 0 0 3px #c8102e,0 12px 30px #0007}
@media (max-width:600px){.astats{grid-template-columns:repeat(3,1fr)}.astats div:nth-child(n+4){display:none}}

.pname small .rtag{margin:0 .4em 0 0;font-size:9.5px}

/* ===================== GIOCATORI (nuovo stile) ===================== */
#players{display:flex;flex-direction:column;gap:10px;padding:4px 12px 12px}
.pcard{background:#fff;border:1px solid var(--line);border-left:5px solid var(--pc);border-radius:12px;padding:10px 12px 9px;box-shadow:0 1px 2px #0000000d}
.pcard:hover{transform:none;box-shadow:0 4px 14px #0000001a}
.pcard.cur{background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 7%,#fff),#fff);box-shadow:0 0 0 2px var(--pc),0 6px 18px color-mix(in srgb,var(--pc) 25%,transparent)}
.pcard.cur::before{display:none}
.pcard .ptop{display:flex;align-items:center;gap:10px}
.pname{flex:1;min-width:0}
.pn1{display:flex;align-items:center;gap:6px;min-width:0}.pn1 b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.youchip{font-size:9.5px;font-weight:800;letter-spacing:.08em;background:var(--ink);color:#fff;border-radius:4px;padding:2px 5px;flex:none}
.pn2{display:flex;align-items:center;gap:5px;margin-top:3px;flex-wrap:wrap}
.pn2 .rtag{margin:0}
.pst{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#5c6878;white-space:nowrap}
.pst i{width:7px;height:7px;border-radius:50%;background:#b9c0c9}
.pst.live{color:#0e7a3a}.pst.live i{background:#1fbf5b;box-shadow:0 0 0 3px #1fbf5b33;animation:livedot 1.2s ease-in-out infinite}
.pst.on i{background:#1fbf5b}.pst.bot i{background:#7c8aa0}.pst.off i{background:#c7ccd3}
.pst.jail{color:#8a5a00}.pst.jail i{background:#f2b632}.pst.away{color:#1f5fd1}.pst.away i{background:#4fa3ff}.pst.bk{color:var(--red)}.pst.bk i{background:var(--red)}
@keyframes livedot{50%{box-shadow:0 0 0 6px #1fbf5b00}}
.pmoney{text-align:right;flex:none}.pmoney .money{font-size:22px;line-height:1}.pmoney small{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;white-space:nowrap}
.pprops{display:flex;flex-wrap:wrap;gap:4px;margin:9px 0 7px;min-height:20px;align-items:center}
.pchip{display:inline-flex;align-items:center;gap:2px;height:20px;padding:0 7px;border-radius:5px;background:color-mix(in srgb,var(--gc) 16%,#fff);color:color-mix(in srgb,var(--gc) 70%,#000);border:1.5px solid var(--gc);font:700 11px/1 var(--f-body)}
.pchip.full{background:var(--gc);color:var(--gt);box-shadow:0 2px 6px color-mix(in srgb,var(--gc) 50%,transparent)}
.pchip.alt{--gc:#455a64}
.pnone{font-size:11.5px;color:#a3a9b1}
.pfoot2{display:flex;gap:12px;font-size:11.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:6px;flex-wrap:wrap}.pfoot2 b{color:var(--ink)}
#bankinfo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 12px 12px}
#bankinfo .bk1{background:var(--paper2);border-radius:9px;padding:7px 9px 9px;position:relative;overflow:hidden}
#bankinfo .bk1 span{display:block;font-size:11px;color:var(--muted);font-weight:600}
#bankinfo .bk1 b{font:800 20px var(--f-label);color:var(--ink)}#bankinfo .bk1 b small{font-size:12px;color:var(--muted);font-weight:600}
#bankinfo .bk1 i{position:absolute;left:0;bottom:0;height:3px;width:var(--w);background:linear-gradient(90deg,#1fbf5b,#8bc34a);transition:width .6s}

/* ===================== CHAT (nuovo stile) ===================== */
#chatlog{height:220px;padding:8px 12px;gap:2px}
#chatlog div{padding:0}
.cmsg{display:flex;gap:8px;align-items:flex-end;margin-top:8px;animation:cmin .3s ease-out}
.cmsg.cont{margin-top:2px}
.cav{width:30px;flex:none}.cav .avz,.cav .pz{--tz:30px}
.cavb{width:30px;height:auto;display:block}.cavx{width:30px;height:30px;border-radius:50%;background:var(--pc);color:#fff;display:grid;place-items:center;font-weight:800}
.cbody{max-width:80%;background:var(--paper2);border-radius:14px 14px 14px 4px;padding:6px 10px 7px;border-left:3px solid var(--pc)}
.chead{display:flex;align-items:center;gap:5px;margin-bottom:2px;flex-wrap:wrap}
.chead b{font-size:12px;color:var(--pc);display:inline}.chead .rtag{margin:0;font-size:9px;padding:.2em .4em}
.chead time{font-size:10px;color:#9aa3ae;margin-left:auto;padding-left:6px}
.ctext{font-size:13.5px;line-height:1.35;color:var(--ink);word-break:break-word;white-space:pre-wrap}
.cmsg.mine{flex-direction:row-reverse}
.cmsg.mine .cbody{background:#e6f0ff;border-left:0;border-right:3px solid var(--pc);border-radius:14px 14px 4px 14px}
.cmsg.staff .cbody{background:linear-gradient(135deg,#fff8e1,#fff);box-shadow:0 0 0 1px #f2b63266}
.cmsg.staff.lgm .cbody{border-color:#c8102e}
.cann{display:flex;gap:10px;align-items:center;margin:10px 0;padding:8px 10px;border-radius:12px;background:linear-gradient(135deg,#2b1055,#5b1a8a);color:#fff;box-shadow:0 4px 14px #5b1a8a55;animation:cmin .4s}
.cann .sbadge{width:40px;height:auto;flex:none}.cann .chead b{color:#ffd75e}.cann .ctext{color:#fff;font-weight:600}.cann time{color:#d9c9ff}
.cempty{text-align:center;color:#9aa3ae;font-size:13px;padding:40px 0}
@keyframes cmin{from{transform:translateY(8px);opacity:0}}
#chatf{display:flex;gap:6px;padding:8px 12px 12px}#chatf input{flex:1;min-width:0}#chatf input:disabled{background:#f3f0e8;color:#999}
.chatbub .chead b{color:var(--pc)}

/* ===================== STAFF: targhette, pannello, annunci ===================== */
.rtag img{height:1.9em;width:auto;margin:-.6em .1em -.6em -.35em;filter:drop-shadow(0 1px 1px #0006)}
.rtag.mute{background:#5c6878;color:#fff}.rtag.warn{background:#f2b632;color:#3a2a00}.rtag.live{background:#1fbf5b;color:#fff}
.ib{height:18px;vertical-align:middle;margin-right:3px}
.sbadge{width:90px;height:auto;filter:drop-shadow(0 6px 14px #0008)}
.btn-admin{background:linear-gradient(135deg,#2b1055,#5b1a8a);color:#ffd75e;box-shadow:0 3px 0 #1a0833,0 0 0 1px #f2b63266;display:flex;align-items:center;justify-content:center;gap:8px}
.admin{max-width:880px!important;padding:0!important;overflow:hidden}
.admin>*:not(.ahero){margin-left:18px;margin-right:18px}
.ahero{display:flex;align-items:center;gap:16px;padding:16px 20px;background:radial-gradient(circle at 15% 30%,#7a2bb8,#2b1055 60%,#150630);color:#fff;position:relative;overflow:hidden}
.ahero::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,#ffffff22 50%,transparent 60%);background-size:250% 100%;animation:sheen 4s linear infinite}
.ahero .sbadge.hero{width:84px;animation:badgefloat 3s ease-in-out infinite}
.ahero h3{font-family:var(--f-display);font-size:24px;letter-spacing:.04em;color:#ffd75e}.ahsub{color:#d9c9ff;font-size:13px}
@keyframes badgefloat{50%{transform:translateY(-4px) rotate(-2deg)}}
.admin .astats div{background:linear-gradient(160deg,#2b1055,#16212e)}
.admin .abody{min-height:300px}
.aurow{border:1px solid var(--line);background:#fff}.aurow.open{box-shadow:0 0 0 2px #5b1a8a55}
.chev{color:#9aa3ae;font-size:12px;padding-left:6px}
.adet{margin-top:8px;border-top:1px dashed var(--line);padding-top:6px;display:flex;flex-direction:column;gap:6px;animation:cmin .25s}
.agrp{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center}.agrp>b{font-size:12.5px}
.aact{margin-top:0}
.aurow.room.paused{background:#fff8e1}
.rcode{font-family:var(--f-label);font-size:20px;letter-spacing:3px}
.aplist{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.apl{display:flex;justify-content:space-between;align-items:center;gap:6px;background:var(--paper2);border-radius:8px;padding:5px 8px;font-size:13px;flex-wrap:wrap}.apl.bk{opacity:.5}
.annprev{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#fff8e1,#fff);border:1px solid #f2d27a;border-radius:12px;padding:10px}.annprev .sbadge{width:64px}
.atxt{width:100%;font:inherit;font-size:15px;padding:10px;border-radius:10px;border:1.5px solid var(--line);margin-top:10px;resize:vertical}
.staffgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:6px}
.scard{border-radius:14px;padding:10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;background:linear-gradient(160deg,#2b1055,#16212e);color:#fff}
.scard.gm{background:linear-gradient(160deg,#123f8f,#16212e)}.scard .sbadge{width:80px}.scard small{color:#c9b8ff}
.perm{display:flex;flex-direction:column;gap:8px;margin-top:12px}.perm>div{display:flex;gap:10px;align-items:center;background:var(--paper2);border-radius:10px;padding:8px}.perm .sbadge{width:56px}
/* annuncio a schermo intero */
#annov{position:fixed;inset:0;z-index:900;display:grid;place-items:center;background:radial-gradient(circle,#2b1055cc,#0b0418ee);animation:fadein .35s;backdrop-filter:blur(3px)}
#annov.out{animation:fadeout .5s forwards}
.annrays{position:absolute;width:160vmax;height:160vmax;background:repeating-conic-gradient(#ffd75e18 0 8deg,transparent 8deg 20deg);animation:spin 18s linear infinite}
.anncard{position:relative;width:min(560px,90vw);background:linear-gradient(170deg,#fff,#fff6dd);color:var(--ink);border-radius:22px;padding:70px 26px 22px;text-align:center;box-shadow:0 0 0 4px #f2b632,0 0 0 9px #5b1a8a,0 30px 80px #000c;animation:annin .8s cubic-bezier(.2,1.4,.4,1)}
.annbadge{position:absolute;left:50%;top:-80px;transform:translateX(-50%)}.annbadge .sbadge{width:150px;animation:badgefloat 2.6s ease-in-out infinite}
.annlab{font:800 13px var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#5b1a8a;margin-top:8px}
.anntext{font:400 clamp(20px,4vw,30px)/1.25 var(--f-display);margin:12px 0;min-height:1.3em;color:#1a0833}
.annby{color:var(--muted);margin-bottom:14px}
@keyframes annin{from{transform:scale(.3) rotate(-8deg);opacity:0}}@keyframes fadein{from{opacity:0}}@keyframes fadeout{to{opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}
/* partita sospesa */
#pauseov{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#0b1522b8;backdrop-filter:blur(3px) grayscale(.6);pointer-events:auto;animation:fadein .4s}
#pauseov.out{animation:fadeout .4s forwards}
.pcard2{text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;max-width:80%;animation:annin .7s cubic-bezier(.2,1.4,.4,1)}
.pcard2 .sbadge{width:120px;animation:badgefloat 2.6s ease-in-out infinite}
.pbig{font:400 clamp(20px,calc(var(--S)*.05),40px) var(--f-display);letter-spacing:.06em;color:#ffd75e;text-shadow:0 4px 0 #5b1a8a,0 0 30px #f2b63288;animation:pulse 1.6s ease-in-out infinite}
.preason{font-size:18px;font-style:italic;background:#ffffff14;border-radius:10px;padding:6px 14px}.psub{color:#cfd8e3;font-size:13px}
@keyframes pulse{50%{transform:scale(1.04)}}
/* entrata dello staff */
.staffin{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:800;display:flex;align-items:center;gap:12px;padding:8px 22px 8px 10px;border-radius:99px;background:linear-gradient(135deg,#2b1055,#5b1a8a);color:#fff;box-shadow:0 0 0 3px #f2b632,0 14px 40px #000a;animation:staffin .7s cubic-bezier(.2,1.4,.4,1)}
.staffin.gm{background:linear-gradient(135deg,#123f8f,#1f6fd1)}.staffin .sbadge{width:58px;margin:-14px 0}.staffin small{display:block;color:#ffd75e;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.staffin b{font-size:18px}
.staffin.out{animation:fadeout .6s forwards}
@keyframes staffin{from{transform:translate(-50%,-150%) scale(.6);opacity:0}}
/* avvisi dello staff */
.snotice{max-width:420px!important;text-align:center}.snic{display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:6px}.snic .sbadge{width:90px}.snic span{font-size:46px}
.snotice.ban h3,.snotice.kick h3{color:var(--red)}.snotice.warn h3{color:#a86b00}
/* animazioni generali in più */
button:not(:disabled){position:relative;overflow:hidden}
button:not(:disabled)::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,#fff6 0 10%,transparent 11%) center/0 0 no-repeat;transition:background-size .5s}
button:not(:disabled):active::after{background-size:900% 900%;transition:0s}
.card{transition:box-shadow .25s}
.sitem,.lbr,.frow,.aurow{transition:transform .15s,box-shadow .2s}.sitem:hover{transform:translateY(-3px);box-shadow:0 8px 18px #0002}
@media (max-width:640px){.agrp{grid-template-columns:1fr}.ahero .sbadge.hero{width:60px}.annbadge .sbadge{width:110px}.anncard{padding-top:50px}.annbadge{top:-60px}}

/* ===================== SCHERMATA INIZIALE ===================== */
#menu.screen{max-width:1080px;padding-top:0}
.mhero{position:relative;margin:0 -16px 18px;padding:26px 16px 22px;border-radius:0 0 28px 28px;overflow:hidden;text-align:center;isolation:isolate}
.mhbg{position:absolute;inset:0;z-index:-1;background:url(img/splash.jpg) center 35%/cover;filter:brightness(.42) saturate(1.15) blur(2px);transform:scale(1.06);animation:herozoom 22s ease-in-out infinite alternate}
.mhbg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0f1b2b00 40%,#0f1b2b 100%),radial-gradient(circle at 50% 30%,transparent 30%,#0f1b2b99 80%)}
@keyframes herozoom{to{transform:scale(1.14) translateY(-2%)}}
.mhin{max-width:720px;margin:0 auto}
.mhero .mlogo{width:min(100%,600px);margin-bottom:0}
.mhero .sub{margin:4px 0 16px;font-size:16px;color:#e8eef6;text-shadow:0 2px 6px #000}.mhero .sub b{color:#ffd75e}
.mhero .quickc{background:none;box-shadow:none;padding:0;margin:0 auto;max-width:520px}
.mhero .bigq{font-size:24px;padding:18px;border-radius:14px}
.qinfo{color:#d6dee8;font-size:13px;margin-top:8px;text-shadow:0 1px 3px #000}
.mfeat{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.mfeat span{background:#ffffff14;border:1px solid #ffffff26;backdrop-filter:blur(6px);color:#fff;border-radius:99px;padding:6px 12px;font-size:12.5px;font-weight:600;animation:rise .5s both}
.mfeat span:nth-child(2){animation-delay:.08s}.mfeat span:nth-child(3){animation-delay:.16s}.mfeat span:nth-child(4){animation-delay:.24s}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.mcol .card{margin-bottom:16px}
.mcol .card h3{display:flex;align-items:center;gap:6px}
.mcol:nth-child(1) .card{animation-delay:.05s}.mcol:nth-child(2) .card{animation-delay:.12s}
.mlinks{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:4px 0 18px}
.mlinks .btn-sm{background:#ffffff12;color:#dfe7f1;border:1px solid #ffffff22;box-shadow:none}
.creator{display:flex;align-items:center;gap:12px;cursor:pointer;background:linear-gradient(135deg,#16212e,#2b1055)!important;color:#fff!important}
.creator small{display:block;color:#c9b8ff;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.creator b{display:block;font-size:18px}.creator span{font-size:12.5px;color:#d6dee8}
.creator:hover{box-shadow:0 0 0 2px #f2b632,0 12px 30px #0006}.creator .chev{margin-left:auto;font-size:26px;color:#ffd75e}
.cmono{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;font:400 20px var(--f-display);color:#2b1055;background:conic-gradient(from 200deg,#ffe58a,#f2b632,#c8102e,#f2b632,#ffe58a);box-shadow:0 0 0 3px #fff3,0 4px 14px #0006;letter-spacing:.02em}
.cmono.big{width:84px;height:84px;font-size:32px}
.mfoot{text-align:center;color:#9fb0c6;font-size:12.5px;display:flex;flex-direction:column;gap:6px;padding:16px 0 10px;border-top:1px solid #ffffff1a}
.mfoot b{color:#fff}.mfoot a{color:#ffd75e;text-decoration:none}.mfoot a:hover{text-decoration:underline}
.mdisc{font-size:11px;color:#7f8fa5;max-width:640px;margin:0 auto}
.creatorm{max-width:560px!important}.crhead{display:flex;gap:16px;align-items:center;margin-bottom:10px}.crhead h3{margin:2px 0 6px;font-family:var(--f-display);font-size:26px}
.crhead small{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.crtags{display:flex;flex-wrap:wrap;gap:6px}.crtags span{background:var(--paper2);border-radius:99px;padding:4px 10px;font-size:12px;font-weight:600}
.creatorm p{line-height:1.55}.crsig{font-family:Pacifico,cursive;font-size:28px;color:#5b1a8a;text-align:right;margin:4px 8px 10px;transform:rotate(-3deg)}
.legal{max-width:640px!important}.legalb{max-height:58vh;overflow:auto;padding-right:6px}.legalb h4{margin:14px 0 4px;color:#5b1a8a}.legalb p{margin:0 0 6px;line-height:1.5;font-size:14px}
.consent{margin-top:12px;font-size:12.5px;line-height:1.4;align-items:flex-start;flex-wrap:nowrap;color:var(--ink)}.consent input{margin-top:3px;width:18px;height:18px;flex:none}.consent a{color:var(--blue)}
@media (max-width:860px){.mgrid{grid-template-columns:1fr}.mhero{margin:0 -10px 14px}.mhero .bigq{font-size:20px}}

.anncard{padding-top:96px}.annbadge{top:-70px}
.pfoot2{gap:10px}
.rtag img{height:1.7em;margin:-.5em .15em -.5em -.3em}

/* ===== badge dello staff ben visibili ===== */
.rtag{height:22px;padding:0 9px 0 30px;position:relative;font-size:11.5px;letter-spacing:.08em;overflow:visible}
.rtag img{position:absolute;left:-8px;top:50%;transform:translateY(-50%);height:36px!important;width:auto;margin:0!important;filter:drop-shadow(0 2px 3px #0008)}
.rtag:not(.lgm):not(.gm){padding:0 8px}
.rtag.lgm{background:linear-gradient(135deg,#6a1fa8,#2b1055);color:#ffd75e;box-shadow:0 0 0 1.5px #f2b632,0 0 12px #f2b63288}
.rtag.gm{background:linear-gradient(135deg,#2f7be0,#123f8f);color:#fff;box-shadow:0 0 0 1.5px #9cc7ff}
.rtag.lgm::after{display:none}
.avz.hasrole,.pz.hasrole{overflow:visible}
.avrole{position:absolute;left:-34%;top:-38%;width:86%;height:auto;z-index:3;filter:drop-shadow(0 2px 3px #000a);pointer-events:none;animation:badgefloat 3s ease-in-out infinite}
.avz .avrole{display:block}.pz .avrole{display:block}
.pcard:has(.hasrole){border-left-width:5px;background:linear-gradient(135deg,#fffaf0,#fff)}
.chead .rtag{height:18px;font-size:9.5px;padding-left:24px}.chead .rtag img{height:28px!important;left:-6px}
.pn2 .rtag{margin-left:6px}
.pwtag .rtag{height:16px;font-size:.62em;padding-left:20px}.pwtag .rtag img{height:24px!important}
.btn-staff{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#6a1fa8,#2b1055);color:#ffd75e;box-shadow:0 0 0 1.5px #f2b632,0 0 12px #f2b63266;padding:4px 10px 4px 6px}
.btn-staff img{height:24px;margin:-6px 0}
.sbadge.mini{width:28px;margin:-8px 0;vertical-align:middle}
.gsgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.gsbox{background:var(--paper2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px}.gsbox p{margin:0}
.pstaff{margin-top:12px;background:linear-gradient(135deg,#f6efff,#fff);border:1.5px solid #c9b8ff;border-radius:12px;padding:10px}.psth{display:flex;align-items:center;gap:8px;margin-bottom:6px}.psth .sbadge{width:44px}
#gstaffm>*:not(.ahero){margin-left:18px;margin-right:18px}#gstaffm{padding-bottom:16px!important}
@media (max-width:640px){.gsgrid{grid-template-columns:1fr}#tstaff{padding:4px 6px}}

/* ===== scheda giocatori: versione pulita ===== */
.pcard{padding:11px 12px 10px;border-left-width:4px}
.pcard .avrole{display:none}
.pcard .ptop{gap:11px}
.pcard .avz,.pcard .ptop>.pz{--tz:42px!important}
.pn1 b{font-size:15.5px;font-weight:800}
.pn2{margin-top:4px;gap:6px}
.pn2 .rtag{margin-left:8px;height:20px;font-size:10.5px}
.pmoney .money{font-size:24px;letter-spacing:-.01em}
.pmoney small{font-size:11px;color:var(--muted)}
.pprops{margin:10px 0 9px;gap:6px;min-height:18px}
.dgrp{display:inline-flex;gap:2px;padding:2px;border-radius:5px}
.dgrp.full{background:#fff4d1;box-shadow:0 0 0 1px #f2b632}
.dgrp i{width:12px;height:17px;border-radius:3px;background:var(--gc);box-shadow:inset 0 -3px 0 #0002,0 1px 1px #0003;position:relative;display:grid;place-items:center}
.dgrp i.m{background:repeating-linear-gradient(45deg,var(--gc) 0 3px,#fff 3px 5px);opacity:.6}
.dgrp i em{font-style:normal;font-size:9px;font-weight:800;color:#fff;text-shadow:0 1px 1px #000a}
.pnone{font-size:12px;color:#a7adb5;font-style:italic}
.pstats{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:4px;border-top:1px solid var(--line);padding-top:8px}
.pstats div{display:flex;flex-direction:column;line-height:1.15}
.pstats small{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:#9aa3ae;font-weight:700}
.pstats b{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.pfoot2{display:none}
.pcard.cur{border-color:var(--pc)}
.pmoney .money{font-size:21px}
.pn1{gap:5px}.pn1 b{font-size:15px;flex:0 1 auto;min-width:0}
.youchip{font-size:8.5px;padding:2px 4px}
.pstats{grid-template-columns:1.7fr 1fr 1fr 1fr}.pstats small{letter-spacing:.03em}
.pn2{row-gap:4px}
/* badge staff nella scheda: filigrana che sfuma + mini badge accanto al nome */
.pcard{overflow:hidden;isolation:isolate}
.pcard>*{position:relative;z-index:1}
.pcard .pwm{position:absolute;z-index:0;right:-14px;top:50%;width:132px;height:auto;transform:translateY(-50%) rotate(-12deg);opacity:.1;pointer-events:none;animation:wmfade 5s ease-in-out infinite;filter:saturate(1.2)}
@keyframes wmfade{0%,100%{opacity:.07;transform:translateY(-50%) rotate(-12deg) scale(.96)}50%{opacity:.26;transform:translateY(-50%) rotate(-8deg) scale(1.04)}}
.pcard.staffc.lgm{background:linear-gradient(120deg,#fff 40%,#f7f0ff)}
.pcard.staffc.gm{background:linear-gradient(120deg,#fff 40%,#eef5ff)}
.pnbadge{height:30px;width:auto;margin:-8px 0 -8px 2px;filter:drop-shadow(0 2px 3px #0005);animation:pnpop 4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes pnpop{0%,70%,100%{transform:scale(1) rotate(0)}76%{transform:scale(1.35) rotate(-10deg)}82%{transform:scale(.95) rotate(6deg)}88%{transform:scale(1.1) rotate(0)}}
.pstaffl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:linear-gradient(90deg,#5b1a8a,#8e3fd1);color:#ffd75e;background-size:200% 100%;animation:stfl 3s linear infinite}
.pstaffl.gm{background:linear-gradient(90deg,#123f8f,#2f7be0);color:#fff;background-size:200% 100%}
@keyframes stfl{50%{background-position:100% 0}}
.pnbadge{height:26px;margin:-6px 0}
.pn2:has(.pnbadge){flex-wrap:nowrap}.pstaffl{font-size:9.5px;padding:2px 6px}
/* badge staff: spunta dal bordo in alto della scheda */
.pcard{overflow:visible}
.pcard.staffc{margin-top:26px;background:#fff}
.pcard.staffc.cur{background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 7%,#fff),#fff)}
.pcard .ppeek{position:absolute;z-index:3;right:92px;top:-36px;width:62px;height:auto;filter:drop-shadow(0 5px 6px #0007);animation:peek 3.2s ease-in-out infinite;transform-origin:50% 100%;pointer-events:auto}
@keyframes peek{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-5deg)}}
#players{padding-top:8px}
.pcard.staffc,.pcard.staffc.lgm,.pcard.staffc.gm{margin-top:42px;background:#fff}
.pcard .ppeek{right:18px;top:-46px;width:54px}
.pcard.staffc,.pcard.staffc.lgm,.pcard.staffc.gm{margin-top:34px}
.pcard .ppeek{top:-36px;right:20px;width:52px}
.pcard.staffc .pmoney{padding-top:12px}

/* ===================== NOMI PERSONALIZZATI ===================== */
.avrole{display:none!important}
.ntag{display:inline-block;font:800 .72em/1 var(--f-body);letter-spacing:.04em;color:#fff;background:var(--tc);border-radius:4px;padding:.28em .45em;margin-right:.35em;vertical-align:.12em;box-shadow:0 1px 0 #0003,inset 0 1px 0 #fff4;text-shadow:0 1px 1px #0005;white-space:nowrap}
.ntag::before{content:'['}.ntag::after{content:']'}
.uname{position:relative}
.ns-oro{background:linear-gradient(90deg,#a87a12,#ffe58a,#d4a017,#fff3b0,#a87a12);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nsflow 3s linear infinite;filter:drop-shadow(0 1px 0 #7a520055)}
.ns-arcobaleno{background:linear-gradient(90deg,#ff3b3b,#ff9f1a,#ffe23b,#2ecc71,#2f9bff,#9b59ff,#ff3b3b);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nsflow 4s linear infinite}
.ns-fuoco{background:linear-gradient(0deg,#b31200,#ff5a00,#ffb300,#fff2a8);background-size:100% 250%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nsfire 1.2s ease-in-out infinite alternate;filter:drop-shadow(0 0 3px #ff6a0088)}
.ns-ghiaccio{background:linear-gradient(90deg,#3aa7ff,#e6f7ff,#7fd3ff,#ffffff,#3aa7ff);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nsflow 4s linear infinite;filter:drop-shadow(0 0 2px #7fd3ffaa)}
.ns-neon{color:var(--nc,#ff2bd6);text-shadow:0 0 4px var(--nc,#ff2bd6),0 0 10px var(--nc,#ff2bd6);animation:nsneon 1.8s ease-in-out infinite}
.ns-staff{background:linear-gradient(90deg,#5b1a8a,#c79bff,#f2b632,#fff3b0,#8e3fd1,#5b1a8a);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nsflow 3.5s linear infinite;font-weight:900}
.ns-colore{color:var(--nc,#c8102e)}
@keyframes nsflow{to{background-position:-250% 0}}@keyframes nsfire{to{background-position:0 100%}}@keyframes nsneon{50%{text-shadow:0 0 2px var(--nc,#ff2bd6),0 0 18px var(--nc,#ff2bd6)}}
.pwtag .uname[class*=ns-]{filter:drop-shadow(0 0 1px #000)}
.nprev{height:64px;display:grid;place-items:center;font-size:17px;font-weight:800;text-align:center;padding:0 4px}
.lookrow{flex-wrap:wrap}.lkprev{background:var(--paper2);border-radius:8px;padding:5px 10px;font-weight:800;min-width:120px}
.lookrow input[type=color]{width:34px;height:30px;padding:2px}
.fr.fr-etna{--frg:conic-gradient(#ff3d00,#ffb300,#1a1a1a,#ff3d00,#ff6d00,#1a1a1a,#ff3d00)}
.fr.fr-etna::after{animation:spin 6s linear infinite}

/* ===================== FINESTRA GIOCATORE ===================== */
.pmodal{max-width:520px!important;position:relative;overflow:visible!important;border-top:5px solid var(--pc)}
.pmodal .ppeek{right:24px;top:-52px;width:70px}
.pmhead{display:flex;align-items:center;gap:14px}
.pmhead h3{margin:0 0 4px;font-size:22px}
.pmmoney{text-align:right}.pmmoney small{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}.pmmoney .money{font-size:28px}
.pmstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px;margin-top:12px}
.pmstats div{background:var(--paper2);border-radius:10px;padding:7px 9px;animation:rise .35s both}.pmstats div:nth-child(2){animation-delay:.05s}.pmstats div:nth-child(3){animation-delay:.1s}.pmstats div:nth-child(4){animation-delay:.15s}
.pmstats small{display:block;font-size:9.5px;color:#9aa3ae;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.pmstats b{font-size:15px}
.plist2 .mp{animation:rise .3s both}

/* ===================== ANIMAZIONI IN PIÙ ===================== */
.modal:not(.hidden){animation:fadein .25s ease-out}
.modal:not(.hidden)>.card{animation:modalin .45s cubic-bezier(.2,1.25,.4,1) both}
@keyframes modalin{from{transform:translateY(30px) scale(.94);opacity:0}}
#lpanel .panel,#rpanel .panel{animation:panelin .6s cubic-bezier(.2,1,.3,1) both}
#rpanel .panel{animation-name:panelinr}#rpanel .panel+.panel,#lpanel .panel+.panel{animation-delay:.12s}
@keyframes panelin{from{transform:translateX(-30px);opacity:0}}@keyframes panelinr{from{transform:translateX(30px);opacity:0}}
#players .pcard{animation:rise .45s both}#players .pcard:nth-child(2){animation-delay:.06s}#players .pcard:nth-child(3){animation-delay:.12s}#players .pcard:nth-child(4){animation-delay:.18s}#players .pcard:nth-child(5){animation-delay:.24s}#players .pcard:nth-child(6){animation-delay:.3s}
.dgrp i{animation:deedin .4s cubic-bezier(.2,1.5,.4,1) both}
@keyframes deedin{from{transform:translateY(-8px) scale(.4);opacity:0}}
.cell:hover{transform:translateY(-2px);transition:transform .15s}
.btn-red:not(:disabled):hover,.btn-gold:not(:disabled):hover,.btn-green:not(:disabled):hover,.btn-blue:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 5px 14px #0003,0 3px 0 #0003}
.tabs button{transition:color .2s,border-color .2s,background .2s}.tabs button:hover{background:#00000006}
.tab:not(.hidden){animation:fadein .3s}
.money{display:inline-block}
#topbar .brand{animation:brandglow 4s ease-in-out infinite}
@keyframes brandglow{50%{box-shadow:0 0 0 2px #fff,0 0 16px #cf1f2e}}
.turnlab{animation:rise .4s both}
.toast{transition:transform .2s}.toast:hover{transform:translateX(-4px)}
.pmodal .ppeek{position:absolute;z-index:3;filter:drop-shadow(0 5px 6px #0007);animation:peek 3.2s ease-in-out infinite;transform-origin:50% 100%}
.pn2 .ntag{font-size:9.5px;margin-right:0}

/* ===================== LIVELLI ===================== */
.lvchip{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;margin-right:5px;font:800 10.5px/1 var(--f-body);color:#fff;vertical-align:middle;flex:none;
  background:linear-gradient(160deg,#7c8aa0,#4a5568);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);text-shadow:0 1px 1px #0006}
.lvchip.l5{background:linear-gradient(160deg,#4caf50,#1b7a35)}.lvchip.l10{background:linear-gradient(160deg,#2f7be0,#123f8f)}.lvchip.l20{background:linear-gradient(160deg,#ffe58a,#c8901a);color:#3a2a00;text-shadow:none}
.lbv .lvchip{min-width:30px;height:28px;font-size:14px}
.lvbar{display:flex;align-items:center;gap:8px;margin-top:10px}.lvbar .lvchip{min-width:30px;height:28px;font-size:13px}
.lvtrack{flex:1;height:10px;border-radius:99px;background:#ebe6da;overflow:hidden;box-shadow:inset 0 1px 2px #0002}
.lvtrack i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f2b632,#ffd75e,#f2b632);background-size:200% 100%;animation:nsflow 2.5s linear infinite;transition:width 1s}
.lvbar>span:last-child{font-size:11px;color:var(--muted);white-space:nowrap;font-weight:600}
#lvov{position:fixed;inset:0;z-index:950;display:grid;place-items:center;background:radial-gradient(circle,#1d3a5ccc,#06101bee);animation:fadein .3s}#lvov.out{animation:fadeout .5s forwards}
.lvcard{position:relative;text-align:center;color:#fff;animation:annin .8s cubic-bezier(.2,1.4,.4,1)}
.lvbig{width:150px;height:150px;margin:0 auto;display:grid;place-items:center;font:400 72px var(--f-display);color:#3a2a00;background:linear-gradient(160deg,#fff3b0,#f2b632 50%,#b8860b);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);filter:drop-shadow(0 0 30px #f2b632);animation:pulse 1.4s ease-in-out infinite}
.lvt{font:400 44px var(--f-display);letter-spacing:.06em;color:#ffd75e;text-shadow:0 4px 0 #8e0b1f;margin-top:14px}.lvs{font-size:18px;margin:8px 0 16px}

/* ===================== TORNEI ===================== */
.mtour{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}.mtour small{display:block;color:var(--muted);font-size:11.5px}
.toursc h3{margin-bottom:4px}
.tours{max-width:760px!important}.tours .aurow{margin-top:8px}
.twin{margin-top:6px;background:linear-gradient(90deg,#fff4d1,#fff);border-radius:8px;padding:6px 10px}
.bracket{display:flex;gap:14px;overflow-x:auto;margin-top:8px;padding-bottom:4px}
.bround{display:flex;flex-direction:column;gap:8px;min-width:170px}.brt{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#5b1a8a}
.btable{background:var(--paper2);border-radius:10px;padding:6px 8px;font-size:12.5px;display:flex;flex-direction:column;gap:3px;border-left:3px solid #c9b8ff}
.btable.done{border-left-color:#1fbf5b}.btable .bw{font-weight:800}.btable .bl{opacity:.45;text-decoration:line-through}
.tcreate{background:linear-gradient(135deg,#f6efff,#fff);border:1.5px solid #c9b8ff;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px}
.tcreate label{font-size:13px;display:flex;align-items:center;gap:4px}.tcreate input,.tcreate select{padding:6px 8px;font-size:13px}
.tourc{background:linear-gradient(160deg,#fff8e1,#fff)}
/* segnalazioni */
.rreasons{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}.rreasons label{background:var(--paper2);border-radius:8px;padding:7px 9px;font-size:13px;cursor:pointer}
.rchat{font-size:12px;background:var(--paper2);border-radius:8px;padding:6px 8px;margin-top:4px;max-height:140px;overflow:auto}
.aurow.done{opacity:.6}

/* ===================== SCELTA DEL TABELLONE ===================== */
.bchoose{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bopt{position:relative;text-align:left;display:flex;flex-direction:column;gap:3px;padding:12px;min-height:118px;border-radius:14px;color:#fff;background:linear-gradient(180deg,#0006,#000c),var(--bi) center/cover,#334;box-shadow:0 0 0 2px transparent,0 6px 16px #0003;transition:transform .2s,box-shadow .2s;overflow:hidden;justify-content:flex-end}
.bopt:hover{transform:translateY(-3px) scale(1.01)}
.bopt.on{box-shadow:0 0 0 3px var(--gold),0 10px 24px #f2b63355}
.bopt.on::before{content:'✔';position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#3a2a00;display:grid;place-items:center;font-size:13px;animation:modalin .4s}
.bopt .bic{font-size:26px;position:absolute;top:8px;right:10px;filter:drop-shadow(0 2px 3px #000)}
.bopt b{font-family:var(--f-display);font-size:20px;letter-spacing:.03em;text-shadow:0 2px 4px #000}
.bopt small{font-size:11.5px;line-height:1.3;color:#e8eef6;text-shadow:0 1px 2px #000}
.bopt em{position:absolute;top:10px;right:46px;font:800 9.5px var(--f-body);font-style:normal;letter-spacing:.1em;background:var(--red);padding:3px 6px;border-radius:5px;animation:pulse 1.5s infinite}
#cedition{font:400 calc(var(--S)*.024) var(--f-display);letter-spacing:.12em;color:#fff;background:linear-gradient(90deg,#8e0b1f,#c8102e,#8e0b1f);padding:.25em 1.2em;border-radius:99px;box-shadow:0 0 0 .14em #f2b632,0 6px 14px #0004;margin:-1% 0 1%;position:relative;z-index:2;animation:edin 1s cubic-bezier(.2,1.4,.4,1) both}
@keyframes edin{from{transform:scale(.3) rotate(-8deg);opacity:0}}

/* ===================== PEDINE: salto ad arco ===================== */
.pwin{transform:translateY(var(--hy,0px));transition:none}
.pwin.hop{animation:none}
.pwbase{transform:scale(calc(1 - var(--hk,0)*.35));opacity:calc(1 - var(--hk,0)*.45)}
.pw.landed .pwin img{animation:squash .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes squash{0%{transform:scale(1.18,.8)}55%{transform:scale(.94,1.08)}100%{transform:none}}
.pwin img.psvg{transform-origin:50% 100%}
.pw.turn .pwin img{animation:idlebob 2.4s ease-in-out infinite}
.pw.turn.landed .pwin img{animation:squash .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes idlebob{50%{transform:translateY(-4%) rotate(-2deg)}}
.pw.turn .pwbase{box-shadow:0 0 0 calc(var(--ps)*.03) #fff,0 0 calc(var(--ps)*.25) calc(var(--ps)*.06) var(--pc)}
.pw.turn .pwbase::before{content:'';position:absolute;inset:-18%;border-radius:50%;border:calc(var(--ps)*.025) dashed color-mix(in srgb,var(--pc) 70%,#fff);animation:spin 6s linear infinite}

/* scintille, riflettore */
.spark{position:absolute;width:7px;height:7px;margin:-3.5px;background:var(--c);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);z-index:9500;pointer-events:none;animation:spark .9s cubic-bezier(.2,.8,.3,1) both;filter:drop-shadow(0 0 3px var(--c))}
@keyframes spark{0%{transform:translate(0,0) scale(.3) rotate(0)}60%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.3) rotate(180deg);opacity:0}}
.spot{position:absolute;width:var(--s);height:calc(var(--s)*.6);margin:calc(var(--s)*-.3) 0 0 calc(var(--s)*-.5);border-radius:50%;background:radial-gradient(color-mix(in srgb,var(--pc) 55%,transparent),transparent 70%);z-index:9000;pointer-events:none;animation:spot 1.5s ease-out both}
@keyframes spot{0%{transform:scale(.2);opacity:0}30%{opacity:1}100%{transform:scale(1.8);opacity:0}}

/* ===================== PRIGIONE ===================== */
.jailfx{position:absolute;inset:0;z-index:25;display:grid;place-items:center;pointer-events:none;animation:fadein .3s}
.jailfx.out{animation:fadeout .6s forwards}
.jlights{position:absolute;inset:0;animation:jlights .42s steps(1) infinite;mix-blend-mode:screen}
@keyframes jlights{0%{background:radial-gradient(circle at 0% 50%,#ff1744aa,transparent 55%),radial-gradient(circle at 100% 50%,#2979ff33,transparent 55%)}50%{background:radial-gradient(circle at 0% 50%,#ff174433,transparent 55%),radial-gradient(circle at 100% 50%,#2979ffaa,transparent 55%)}}
.jcar{position:absolute;bottom:10%;font-size:calc(var(--S)*.09);animation:jcar 1.4s cubic-bezier(.4,0,.3,1) both;filter:drop-shadow(0 6px 6px #0008)}
@keyframes jcar{from{left:-20%}to{left:110%}}
.jbox{display:flex;flex-direction:column;align-items:center;gap:6px;background:#0b1522e6;border-radius:20px;padding:18px 26px;box-shadow:0 0 0 4px #263238,0 0 0 7px #ff1744,0 30px 60px #000c;animation:annin .7s .25s cubic-bezier(.2,1.4,.4,1) both;font-size:max(13px,calc(var(--S)*.018));color:#fff;text-align:center}
.jcell{position:relative;width:calc(var(--S)*.16);height:calc(var(--S)*.16);border-radius:14px;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--pc) 45%,#000),#111);overflow:hidden;box-shadow:inset 0 0 20px #000}
.jpawn{position:absolute;inset:12% 12% 6%;animation:jshake .35s 1.1s 3}.jpawn img{width:100%;height:100%;object-fit:contain}
@keyframes jshake{25%{transform:translateX(-6%) rotate(-4deg)}75%{transform:translateX(6%) rotate(4deg)}}
.jbars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 11%,#90a4ae 11% 15%,#eceff1 15% 16.5%,#455a64 16.5% 19%),linear-gradient(#546e7a,#546e7a) top/100% 9% no-repeat,linear-gradient(#546e7a,#546e7a) bottom/100% 7% no-repeat;animation:jbars .45s 1s cubic-bezier(.5,0,.75,0) both;filter:drop-shadow(0 4px 4px #000)}
@keyframes jbars{from{transform:translateY(-110%)}to{transform:none}}
.jbars.up{animation:jbarsup .7s .35s cubic-bezier(.5,0,.3,1) both}
@keyframes jbarsup{to{transform:translateY(-110%)}}
.jtxt{font:400 calc(var(--S)*.05) var(--f-display);letter-spacing:.06em;color:#ff5252;text-shadow:0 4px 0 #000;animation:stampin .4s 1.2s cubic-bezier(.2,1.6,.4,1) both}
.free .jtxt{color:#69f0ae;animation-delay:.6s}.free .jbox{box-shadow:0 0 0 4px #263238,0 0 0 7px #2ecc71,0 30px 60px #000c;animation-delay:0s}
@keyframes stampin{from{transform:scale(2.6) rotate(-10deg);opacity:0}}
.jname{font-weight:700}.jsub{color:#b0bec5;font-size:.85em}

/* ===================== ATMOSFERA ===================== */
#game{position:relative}
#motes{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#motes i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#ffd75e;box-shadow:0 0 8px #ffd75e;animation:mote var(--d) linear infinite}
@keyframes mote{0%{transform:translate(0,0)}25%{transform:translate(30px,-60px)}50%{transform:translate(-20px,-120px)}75%{transform:translate(25px,-180px)}100%{transform:translate(0,-240px);opacity:0}}
#gwrap,#topbar{position:relative;z-index:1}
#topbar{z-index:40}
.die3d .face{transition:box-shadow .3s}
.die3d.toss .face{box-shadow:inset 0 0 calc(var(--ds)*.1) #0002,0 0 18px #fff8}
.dice{filter:drop-shadow(0 calc(var(--S)*.01) calc(var(--S)*.008) #0005)}
.landcard{animation-duration:.6s}
.ribbon{animation-timing-function:cubic-bezier(.2,1,.3,1)!important}
.mlive{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0 0}
.mlive span{background:#0b1522aa;border:1px solid #ffffff22;border-radius:99px;padding:5px 12px;font-size:12.5px;color:#dfe7f1;display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(6px);animation:rise .5s both}
.mlive b{color:#fff}.mlive i{width:8px;height:8px;border-radius:50%;background:#1fbf5b;box-shadow:0 0 0 3px #1fbf5b44;animation:livedot 1.2s infinite}
.mlive .dailyhint{background:linear-gradient(90deg,#f2b632,#ffd75e);color:#3a2a00;font-weight:800;border:0;animation:pulse 1.4s infinite}
.mhfloat{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mhfloat i{position:absolute;bottom:-40px;font-size:28px;font-style:normal;opacity:.55;filter:drop-shadow(0 4px 6px #0008);animation:hfloat 14s linear infinite}
@keyframes hfloat{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(-560px) rotate(calc(var(--r)*360deg));opacity:0}}
.mhero .bigq{position:relative;overflow:hidden}
.mhero .bigq::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#fff6 50%,transparent 65%);background-size:250% 100%;animation:sheen 2.8s linear infinite}
/* carta della casella che compare sul tabellone */
.bcard{position:absolute;left:50%;top:56%;width:36%;z-index:6;background:#fff;color:var(--ink);border-radius:calc(var(--S)*.012);overflow:hidden;
  box-shadow:0 0 0 calc(var(--S)*.004) var(--pc),0 calc(var(--S)*.02) calc(var(--S)*.05) #0007;font-size:calc(var(--S)*.016);
  transform:translate(-50%,-50%) rotate(var(--rot));animation:bcin .75s cubic-bezier(.2,1.2,.35,1) both;pointer-events:none}
body.v3d .bcard{transform:translate(-50%,-50%) translateZ(calc(var(--S)*.03)) rotate(var(--rot))}
@keyframes bcin{0%{transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) rotate(var(--rot)) scale(.12) rotateY(180deg);opacity:.4}60%{opacity:1}100%{transform:translate(-50%,-50%) rotate(var(--rot))}}
.bcard.out{animation:bcout .5s ease-in forwards}
@keyframes bcout{to{transform:translate(-50%,-30%) rotate(var(--rot)) scale(.6);opacity:0}}
.bch{background:var(--hc);text-align:center;padding:.5em .4em .45em;font-family:var(--f-label);text-transform:uppercase;line-height:1.05}
.bch small{display:block;font-size:.62em;letter-spacing:.12em;opacity:.85;font-weight:700}.bch b{font-size:1.45em;font-weight:800}
.bci{height:calc(var(--S)*.13);background:#ddd}.bci img{width:100%;height:100%;object-fit:cover;display:block}.bcic{display:grid;place-items:center;font-size:3em;background:var(--paper2)}
.bcb{display:flex;align-items:center;gap:.6em;padding:.55em .7em;line-height:1.25}.bcb small{display:block;color:#4a5568;font-size:.88em}
.bcp{position:absolute;right:.5em;top:calc(var(--S)*.06 + 1.6em);background:var(--red);color:#fff;font:800 1.1em var(--f-label);padding:.15em .55em;border-radius:6px;box-shadow:0 3px 8px #0005;animation:stampin .4s .6s cubic-bezier(.2,1.6,.4,1) both}
.bcard{z-index:20}
body.v3d .bcard{transform:translate(-50%,-50%) translateZ(calc(var(--S)*.06)) rotate(var(--rot))}
#center .cinfo,#center .deck{transition:opacity .3s}
#center.hascard .cinfo,#center.hascard .deck{opacity:0}
.bcard{top:46%}body.v3d .bcard{top:56%}