:root{
  --bg:#1b1035; --bg2:#2a1850; --card:#ffffff12; --card2:#ffffff1f; --line:#ffffff26;
  --tx:#fff7ec; --mu:#cbbde6; --acc:#ffb703; --acc2:#ff5d8f; --ok:#4ade80; --bad:#f87171; --sky:#7dd3fc;
  --r:1rem;
}
*{box-sizing:border-box;margin:0}
html,body{background:var(--bg);color:var(--tx);font-family:'Baloo 2',system-ui,sans-serif;line-height:1.25}
body{min-height:100vh;background:radial-gradient(ellipse at 15% 0%,#4a2580 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#6b1d52 0,transparent 50%),var(--bg);background-attachment:fixed}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{line-height:1.1}
.muted{color:var(--mu)}
.center{text-align:center}
b{font-weight:800}

/* ---------------- TV ---------------- */
body.tv{font-size:2.25vh;overflow:hidden;height:100vh}
.tv #app{height:100vh;display:flex;flex-direction:column;padding:1.6rem 2.4rem 1rem}
.fatal{margin:auto;text-align:center}
.fatal h1{font-size:3rem}
.top{display:flex;align-items:center;gap:1.5rem;margin-bottom:1rem}
.brand{font-size:1.6rem;font-weight:600}
.brand b{color:var(--acc)}
.gname{flex:1;font-size:1.4rem;color:var(--mu)}
.gname b{color:var(--tx);letter-spacing:.1em}
.sign{position:fixed;right:1rem;bottom:.4rem;font-size:.8rem;opacity:.45;letter-spacing:.08em}
.tvmain{flex:1;min-height:0;display:flex;flex-direction:column;gap:1rem;overflow:hidden}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem}
.card h3{font-size:1.15rem;margin-bottom:.6rem;color:var(--acc)}
.f{background:var(--card2);border:3px solid transparent;border-radius:.9rem;padding:.6rem 1.2rem;font-size:1.1rem;font-weight:700;transition:transform .12s,border-color .12s,background .12s}
.f.big{font-size:1.45rem;padding:.8rem 1.8rem;background:linear-gradient(135deg,var(--acc),#fb8500);color:#2a1300}
.f.small{font-size:.95rem;padding:.35rem .9rem}
.f.focus{border-color:#fff;transform:scale(1.06);box-shadow:0 0 0 .35rem #ffffff33,0 .6rem 1.6rem #0008}
.btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.chip{background:var(--card2);border-radius:2rem;padding:.25rem .9rem;font-size:1.05rem;white-space:nowrap}
.chip.ok{background:#4ade8033}
.chip.dead{opacity:.45;text-decoration:line-through}
.hero{text-align:center}
.hero h1{font-size:3.2rem;color:var(--acc)}
.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.95rem;color:var(--mu)}
.big-msg{font-size:1.8rem;font-weight:700;margin:1rem auto;max-width:48rem}
.big-msg small{font-size:1.1rem;font-weight:500;color:var(--mu)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.timer{display:inline-block;font-weight:800;font-size:2.2rem;color:var(--acc);min-width:3ch;text-align:center}
.timer.low{color:var(--bad);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
#toast{position:fixed;left:50%;top:1.5rem;transform:translate(-50%,-160%);background:#fff;color:#1b1035;font-size:1.5rem;font-weight:700;padding:.8rem 1.8rem;border-radius:1rem;box-shadow:0 1rem 2rem #0009;transition:transform .35s;z-index:9;max-width:80vw;text-align:center}
#toast.on{transform:translate(-50%,0)}
.rank{list-style:none;padding:0;display:flex;flex-direction:column;gap:.3rem}
.rank li{display:flex;align-items:center;gap:.6rem;background:#ffffff0c;border-radius:.6rem;padding:.2rem .7rem;font-size:1.1rem}
.rank .pos{width:1.8rem;text-align:center}
.rank .pn{flex:1}
.rank b{color:var(--acc)}
.order{font-size:1.5rem;padding-left:2rem}
.feed{list-style:none;padding:0;display:flex;flex-direction:column;gap:.3rem;font-size:1.1rem}
.feed li{background:#ffffff0c;border-radius:.5rem;padding:.2rem .7rem}
.feed li.ok{background:#4ade8033;font-weight:700}
.feed em{color:var(--acc);font-style:normal;font-weight:800}
.endv{display:flex;flex-direction:column;gap:1rem;overflow:auto}
.endv h1{text-align:center;font-size:3rem;color:var(--acc)}

/* menu */
.menu{display:grid;grid-template-columns:19rem 1fr 17rem;gap:1.3rem;height:100%;min-height:0}
.join{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;overflow:hidden}
#qr{background:#fff;padding:.7rem;border-radius:.8rem;width:13rem;height:13rem}
#qr img,#qr canvas{width:100%!important;height:100%!important}
.jointxt{font-size:1rem;color:var(--mu)}
.jointxt b{color:var(--tx)}
.code{font-size:3rem;font-weight:800;letter-spacing:.25em;color:var(--acc);line-height:1}
.games{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:1rem;align-content:start;min-height:0}
.game{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.2rem;padding:1rem .8rem;min-height:12.5rem;background:linear-gradient(160deg,#ffffff1e,#ffffff08)}
.game .ic{font-size:3.2rem;line-height:1.1}
.game b{font-size:1.25rem}
.game small{font-size:.9rem;font-weight:500;color:var(--mu);line-height:1.15}
.game em{font-size:.8rem;font-style:normal;color:var(--acc);font-weight:600}
.game.focus{background:linear-gradient(160deg,#ffb70355,#ff5d8f33)}
.board{overflow:auto;display:flex;flex-direction:column;gap:.6rem}

/* tombola */
.tomb{display:grid;grid-template-columns:20rem 1fr 15rem;gap:1.4rem;align-items:center;height:100%}
.tleft{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.ball{width:13rem;height:13rem;border-radius:50%;display:grid;place-items:center;font-size:6.5rem;font-weight:800;color:#2a1300;background:radial-gradient(circle at 35% 30%,#fff,#ffd166 30%,#f77f00 85%);box-shadow:0 1rem 2.5rem #000a,inset -.6rem -.8rem 1.4rem #0003}
.ball.pop{animation:pop .5s}
@keyframes pop{0%{transform:scale(.4) rotate(-40deg)}70%{transform:scale(1.1)}}
.smorfia b{display:block;font-size:1.9rem;color:var(--acc)}
.smorfia span{font-size:1.2rem;color:var(--mu)}
.tabellone{display:grid;grid-template-columns:repeat(10,1fr);gap:.35rem}
.tabellone span{aspect-ratio:1.25;display:grid;place-items:center;border-radius:.45rem;background:#ffffff0d;font-size:1.25rem;font-weight:700;color:#ffffff55}
.tabellone span.on{background:#e63946;color:#fff}
.tabellone span.last{background:var(--acc);color:#2a1300;transform:scale(1.15);box-shadow:0 0 1rem var(--acc)}
.prize{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid var(--line);font-size:1.15rem}
.prize.won b{color:var(--ok)}

/* disegna */
.draw-tv{display:grid;grid-template-columns:1fr 22rem;gap:1.4rem;flex:1;min-height:0}
.canvas-wrap{display:flex;align-items:center;justify-content:center;min-height:0}
#live{background:#fff;border-radius:1rem;height:100%;max-height:100%;aspect-ratio:4/3;width:auto;max-width:100%;box-shadow:0 1rem 2rem #0008}
.side{display:flex;flex-direction:column;gap:.8rem;align-items:center;text-align:center}
.mask{font-size:2.2rem;font-weight:800;letter-spacing:.1em;word-break:break-word}
.word{font-size:2.8rem;color:var(--acc)}

/* lupus */
.night .hero h1{color:var(--sky)}

/* mercante */
.howto{font-size:1.2rem;padding-left:1.3rem;display:flex;flex-direction:column;gap:.4rem}
.event{margin-top:.8rem;background:var(--acc);color:#2a1300;font-weight:800;border-radius:.8rem;padding:.6rem 1rem;font-size:1.3rem;text-align:center}
.mres{display:flex;flex-direction:column;gap:.3rem;font-size:1.15rem}

/* telefono senza fili */
.chain{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;flex:1;min-height:0;overflow:auto}
.link{width:17rem;display:flex;flex-direction:column;gap:.3rem}
.link.new{animation:pop .5s}
.link .who{font-size:.95rem;color:var(--mu)}
.bubble{background:#fff;color:#1b1035;border-radius:1rem;padding:1rem;font-size:1.35rem;font-weight:700;min-height:6rem;display:flex;align-items:center;justify-content:center;text-align:center}
.sk{width:100%;aspect-ratio:4/3;background:#fff;border-radius:.8rem;display:block}
.arrow{font-size:1.8rem;color:var(--acc)}

/* visioni */
.clue{font-size:2.6rem;color:var(--acc)}
.backs{display:flex;gap:.8rem;justify-content:center}
.back{width:6rem;height:9rem;border-radius:.7rem;background:linear-gradient(135deg,#6d28d9,#db2777);display:grid;place-items:center;font-size:2.5rem;box-shadow:0 .5rem 1rem #0007}
.table-cards{display:flex;gap:1rem;justify-content:center;flex:1;min-height:0;align-items:center}
.tc{position:relative;height:100%;max-height:30rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:0}
.tc img{height:calc(100% - 3.5rem);max-width:100%;object-fit:cover;aspect-ratio:2/3;border-radius:.8rem;box-shadow:0 .6rem 1.4rem #000a}
.tc .num{position:absolute;top:.4rem;left:.4rem;background:var(--acc);color:#2a1300;font-weight:800;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-size:1.3rem}
.tc.nar img{outline:.35rem solid var(--acc)}
.tc .own{font-size:1rem;font-weight:700}
.tc .vts{font-size:1.3rem;min-height:1.6rem}
.mini-rank{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;align-items:center}

/* ---------------- TELEFONO ---------------- */
body.phone{font-size:17px}
.phone #app{max-width:520px;margin:0 auto;padding:0 14px 40px}
.phone header{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 2px;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:12px}
.phone header .me{flex:1;font-weight:700;font-size:18px}
.phone header .code{font-size:13px;opacity:.6;letter-spacing:.15em}
#hs{font-weight:800;color:var(--acc)}
.pmain{display:flex;flex-direction:column;gap:14px}
.phone h2{font-size:24px}
.phone h3{font-size:18px;color:var(--acc);margin:6px 0}
.bigicon{font-size:56px;line-height:1.1}
.joinbox{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:14px;text-align:center}
.joinbox .logo{font-size:64px}
.joinbox h1{font-size:36px}
.joinbox h1 b{color:var(--acc)}
.joinbox form{display:flex;flex-direction:column;gap:14px;text-align:left}
.joinbox label{display:flex;flex-direction:column;gap:4px;font-weight:600}
.joinbox .sign{position:static}
.warn{background:#f8717133;border-radius:10px;padding:8px}
input,textarea{font:inherit;font-size:18px;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:#ffffff14;color:var(--tx);width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--acc)}
textarea{min-height:90px;resize:none}
#jc{text-transform:uppercase;letter-spacing:.3em;font-weight:800;font-size:24px;text-align:center}
.phone button{border:0;border-radius:12px;padding:12px 16px;background:var(--card2);font-weight:700;font-size:17px}
.phone button:disabled{opacity:.4}
.phone button.primary{background:linear-gradient(135deg,var(--acc),#fb8500);color:#2a1300}
.phone button.ghost{background:transparent;border:1px solid var(--line);font-weight:500;opacity:.8}
.phone button.wide{width:100%}
.row{display:flex;gap:8px}
.row input{flex:1}
.plist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.plist button{padding:16px 10px;font-size:18px}
.plist.sm button{padding:10px 6px;font-size:15px}
.plist button.on{background:var(--acc);color:#2a1300}
.ptoast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#fff;color:#1b1035;padding:10px 18px;border-radius:12px;font-weight:700;z-index:9}
.secret{position:relative;border-radius:16px;background:var(--card);border:2px dashed var(--line);min-height:120px;user-select:none;-webkit-user-select:none;touch-action:none}
.secret .cover{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:18px;color:var(--mu)}
.secret .inner{visibility:hidden;padding:16px}
.secret.show{border-style:solid;border-color:var(--acc)}
.secret.show .cover{visibility:hidden}
.secret.show .inner{visibility:visible}
.role{text-align:center}
.role h1{font-size:40px;color:var(--acc)}
.role.imp h2{color:var(--acc2)}
.lastn{text-align:center;background:var(--card);border-radius:14px;padding:8px}
.lastn b{font-size:42px;color:var(--acc);display:block;line-height:1}
.lastn span{color:var(--mu)}
.cart{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;background:#fff;padding:5px;border-radius:12px}
.cart span{aspect-ratio:.8;display:grid;place-items:center;font-weight:800;font-size:16px;border-radius:5px}
.cart .n{background:#fdf0d5;color:#1b1035}
.cart .e{background:#e9e3f5}
.cart .on{background:#e63946;color:#fff}
.cart .last{outline:3px solid var(--acc)}
.prizes-p{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prizes-p button:last-child{grid-column:span 2}
.prizes-p .ready{background:linear-gradient(135deg,var(--ok),#16a34a);color:#052e14;animation:pulse 1s infinite}
.prizes-p .won{display:flex;flex-direction:column;opacity:.6}
.prizes-p small{font-size:13px;font-weight:500}
.phone .mask{font-size:26px;text-align:center}
.drawtop{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:18px}
.drawtop b{color:var(--acc);font-size:22px}
.phone .timer{font-size:22px}
.pad{width:100%;aspect-ratio:4/3;background:#fff;border-radius:12px;touch-action:none;display:block}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;justify-content:center}
.tools .col{width:30px;height:30px;padding:0;border-radius:50%;border:3px solid #ffffff44}
.tools .col.on{border-color:var(--acc);transform:scale(1.15)}
.tools .sz,.tools .undo,.tools .clr{padding:6px 10px;font-size:14px}
.tools .sz.on{background:var(--acc);color:#2a1300}
.goal{background:linear-gradient(135deg,#ffb70333,#ff5d8f33);border-radius:14px;padding:12px;font-size:18px;text-align:center}
.inv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.inv .it{background:var(--card);border-radius:12px;padding:8px;text-align:center;display:flex;flex-direction:column}
.inv .it span{font-size:30px}
.inv .it b{font-size:22px}
.inv .it small{color:var(--mu);font-size:13px}
.inv .zero{opacity:.35}
.offer,.sentbox{background:var(--card2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.offer .row button{flex:1}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.cols h4{margin-bottom:4px;color:var(--mu)}
.stp{display:flex;align-items:center;gap:4px;margin-bottom:4px}
.stp span{font-size:22px;width:30px}
.stp button{padding:4px 12px!important}
.stp b{min-width:22px;text-align:center}
.hand{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hand.one{grid-template-columns:1fr;max-width:220px;margin:0 auto}
.hc{position:relative;padding:0!important;background:none!important;border:3px solid transparent!important;border-radius:12px!important;overflow:hidden}
.hc img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
.hc.on{border-color:var(--acc)!important;transform:scale(1.04)}
.hc.dis{opacity:.25}
.hc .num{position:absolute;top:4px;left:4px;background:var(--acc);color:#2a1300;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-weight:800;font-size:15px}
.phone .clue{font-size:26px;color:var(--acc)}
.phone .rank li{font-size:16px}
.phone .feed{font-size:15px}