/* Font ospitati sul sito (licenza SIL OFL, vedi fonts/): nessuna richiesta a server esterni. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/playfair-display-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url(fonts/playfair-display-latin-600-italic.woff2) format('woff2')}
:root{--ink:#06141b;--navy:#081b24;--navy-2:#0c2834;--felt:#0d4651;--felt-2:#0a3540;--cream:#f2eadc;--muted:#9baeb2;--gold:#d7a85c;--gold-light:#f0cf8b;--red:#a8473d;--line:rgba(231,215,183,.16);--shadow:0 24px 70px rgba(0,0,0,.36)}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% -10%,#164251 0,transparent 36%),linear-gradient(135deg,#071820,#041015 70%);color:var(--cream);font-family:'DM Sans',sans-serif}.grain{position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29' opacity='.28'/%3E%3C/svg%3E")}.topbar{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,64px);position:sticky;top:0;z-index:50;background:rgba(5,19,25,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;letter-spacing:.17em}.brand-mark{display:block;width:40px;height:40px;border-radius:10px;box-shadow:0 0 0 1px rgba(240,207,139,.35),0 6px 14px rgba(0,0,0,.35)}.brand b,.brand small{display:block}.brand b{font-size:.92rem}.brand small{font-size:.56rem;color:var(--muted);margin-top:3px}.game-switcher{display:flex;background:rgba(0,0,0,.22);padding:5px;border:1px solid var(--line);border-radius:99px}.switch{border:0;background:transparent;color:var(--muted);font:600 .88rem inherit;padding:10px 22px;border-radius:99px;cursor:pointer;transition:.2s}.switch.active{background:var(--cream);color:var(--navy);box-shadow:0 5px 18px rgba(0,0,0,.2)}button:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}.icon-button{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--cream);font:600 1rem inherit;cursor:pointer}.game-view{display:none;position:relative;max-width:1440px;margin:auto;padding:clamp(30px,4vw,60px) clamp(18px,4vw,64px) 70px}.game-view.active{display:block;animation:fade .4s ease}@keyframes fade{from{opacity:0;transform:translateY(8px)}}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.eyebrow{text-transform:uppercase;color:var(--gold);font-weight:700;letter-spacing:.2em;font-size:.68rem}.section-heading h1{font:italic 600 clamp(2.4rem,5vw,4.2rem)/.95 'Playfair Display',serif;margin:8px 0 0}.round-pill,.turn-pill{border:1px solid var(--line);border-radius:99px;padding:10px 16px;color:var(--muted);font-size:.82rem}.round-pill b,.turn-pill b{color:var(--cream);margin-left:6px}.round-pill span{margin-left:3px}.turn-pill i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cream);margin-right:7px;box-shadow:0 0 0 4px rgba(255,255,255,.08)}.panel{border:1px solid var(--line);box-shadow:var(--shadow)}.yahtzee-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,.72fr);gap:24px}.dice-table{min-height:590px;padding:26px;border-radius:22px;background:linear-gradient(140deg,rgba(10,73,84,.95),rgba(7,45,54,.98));position:relative;overflow:hidden}.dice-table:after{content:"";position:absolute;inset:14px;border:1px solid rgba(234,215,178,.15);border-radius:15px;pointer-events:none}.table-meta{display:flex;justify-content:space-between;color:#bed0d0;font-size:.78rem;letter-spacing:.04em;position:relative;z-index:1}.live-dot{font-size:.65rem;color:var(--gold-light)}.live-dot:before{content:"";display:inline-block;width:6px;height:6px;background:var(--gold);border-radius:50%;margin-right:7px}.dice-tray{min-height:365px;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,22px);position:relative;z-index:1;perspective:700px}.die{width:clamp(58px,7vw,88px);aspect-ratio:1;border:0;border-radius:16px;background:linear-gradient(145deg,#fffdf4,#ddd2bd);box-shadow:inset -5px -7px 12px rgba(76,56,31,.14),0 14px 25px rgba(0,0,0,.3);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:14px;cursor:pointer;transition:.22s;position:relative}.die:hover{transform:translateY(-5px)}.die.held{transform:translateY(-17px);box-shadow:0 0 0 3px var(--gold),0 22px 32px rgba(0,0,0,.34)}.die.held:after{content:"TENUTO";position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);font-size:.58rem;letter-spacing:.14em;color:var(--gold-light)}.pip{width:9px;height:9px;background:var(--navy);border-radius:50%;place-self:center}.roll-actions{display:flex;justify-content:center;align-items:center;gap:20px;position:relative;z-index:1}.primary-button,.secondary-button{border:0;border-radius:10px;font:700 .86rem inherit;cursor:pointer;transition:.2s}.primary-button{min-width:220px;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#182126;padding:15px 18px;box-shadow:0 8px 22px rgba(0,0,0,.22);display:inline-flex;align-items:center;justify-content:space-between}.primary-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled{opacity:.4;cursor:not-allowed;transform:none}.primary-button kbd{font:500 .6rem inherit;background:rgba(0,0,0,.12);padding:4px 6px;border-radius:5px}.button-die{font-size:1.15rem}.text-button{border:0;background:transparent;color:#c1d0d1;text-decoration:underline;text-underline-offset:4px;font:500 .76rem inherit;cursor:pointer}.hint{text-align:center;color:#a9bdbf;font-size:.75rem;margin:25px 0 0;position:relative;z-index:1}.score-card{border-radius:22px;background:linear-gradient(160deg,#f6efe1,#ded2bd);color:var(--navy);padding:24px;min-height:590px}.score-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid rgba(8,27,36,.14);padding-bottom:18px}.score-head h2{font:600 1.7rem 'Playfair Display',serif;margin:5px 0 0}.score-head strong{font:600 2.8rem 'Playfair Display',serif}.score-list{padding:10px 0}.score-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border-bottom:1px solid rgba(8,27,36,.1);min-height:35px;padding:0 5px}.score-row button{border:0;background:transparent;text-align:left;color:var(--navy);font:600 .76rem inherit;padding:8px 0;cursor:pointer;display:flex;justify-content:space-between;width:100%;gap:10px}.score-row button:disabled{cursor:default}.score-row .potential{color:#886926;font-style:normal}.score-row .locked{font-weight:700}.score-row .group{font-size:.57rem;letter-spacing:.12em;color:#7a8689}.score-footer{display:flex;justify-content:space-between;font-size:.69rem;color:#5f6c6f;padding-top:7px}.score-footer b{color:var(--navy);margin-left:3px}.backgammon-layout{display:block}.board-shell{background:linear-gradient(140deg,#6f4228,#351f18);border-color:rgba(239,204,143,.22);border-radius:22px;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.44),inset 0 0 40px rgba(255,200,100,.08)}.board-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:2px 8px 18px}.player-chip{display:flex;align-items:center;gap:10px;opacity:.48;transition:.2s}.player-chip:last-child{justify-content:flex-end}.player-chip.active{opacity:1}.player-chip small{display:block;font-size:.56rem;letter-spacing:.12em;color:#ccb38f}.player-chip b{font-size:.86rem}.player-chip em{font-style:normal;font-size:.68rem;color:#ccb38f;margin-left:10px}.mini-checker,.checker{border-radius:50%;display:block}.mini-checker{width:28px;height:28px}.ivory,.checker.W{background:radial-gradient(circle at 32% 28%,#fffdf4,#cfbea1 70%);border:2px solid #f7ead4;box-shadow:0 4px 8px rgba(0,0,0,.35)}.ink,.checker.B{background:radial-gradient(circle at 35% 30%,#4c5355,#111719 68%);border:2px solid #637074;box-shadow:0 4px 8px rgba(0,0,0,.55)}.dice-readout{display:flex;gap:8px}.dice-readout span{display:grid;place-items:center;width:42px;height:42px;border-radius:9px;background:var(--cream);color:var(--navy);font:700 1.05rem inherit;box-shadow:0 6px 12px rgba(0,0,0,.3)}.board{height:min(62vw,620px);min-height:410px;background:linear-gradient(90deg,#0b3b46 0 49.15%,#522e20 49.15% 50.85%,#0b3b46 50.85%);border:9px solid #9a6238;box-shadow:inset 0 0 0 3px #362017,inset 0 0 45px rgba(0,0,0,.48);position:relative;display:grid;grid-template-rows:1fr 1fr;overflow:hidden}.points-row{display:grid;grid-template-columns:repeat(12,1fr);grid-column:1;position:relative}.points-row.top{grid-row:1}.points-row.bottom{grid-row:2}.point{border:0;background:transparent;padding:0;position:relative;cursor:pointer;min-width:0}.point:before{content:"";position:absolute;left:8%;width:84%;height:82%;clip-path:polygon(50% 100%,0 0,100% 0)}.top .point:before{top:0}.bottom .point:before{bottom:0;transform:rotate(180deg)}.point:nth-child(odd):before{background:#d9b271}.point:nth-child(even):before{background:#8e3c35}.point.legal:before{filter:brightness(1.35);outline:2px solid var(--gold-light)}.point.selected:after{content:"";position:absolute;inset:3px;border:2px solid var(--gold-light);border-radius:6px}.stack{position:absolute;inset:3% 12%;display:flex;align-items:center;z-index:2}.top .stack{top:3%;bottom:auto;flex-direction:column}.bottom .stack{bottom:3%;top:auto;flex-direction:column-reverse}.checker{width:min(4.1vw,54px);height:min(4.1vw,54px);min-width:26px;min-height:26px;margin-top:calc(min(4.1vw,54px) * -.19);position:relative}.top .checker:first-child,.bottom .checker:first-child{margin-top:0}.count-badge{position:absolute;background:var(--gold);color:#1c1712;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font:700 .68rem inherit;z-index:4;left:50%;transform:translateX(-50%)}.top .count-badge{top:54%}.bottom .count-badge{bottom:54%}.point-number{position:absolute;z-index:4;left:50%;transform:translateX(-50%);font-size:.53rem;color:rgba(255,255,255,.5)}.top .point-number{top:3px}.bottom .point-number{bottom:3px}.bar{position:absolute;z-index:5;left:calc(50% - 14px);top:0;bottom:0;width:28px;background:linear-gradient(90deg,#321e16,#7f4c2f,#321e16);display:flex;align-items:center;justify-content:center}.bar>span{transform:rotate(-90deg);font-size:.5rem;letter-spacing:.2em;color:#d1aa78}.bar>div{position:absolute;left:1px}.bar #barWhite{top:18%}.bar #barBlack{bottom:18%}.bar .checker{width:26px;height:26px;margin-top:-8px}.board-actions{display:flex;align-items:center;justify-content:space-between;padding:18px 8px 2px}.board-actions p{margin:0;color:#e6d5bd;font-size:.82rem}.board-actions>div{display:flex;align-items:center;gap:10px}.primary-button.compact{min-width:145px;padding:12px 15px}.secondary-button{padding:12px 17px;background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--cream)}dialog{width:min(520px,calc(100% - 32px));border:1px solid rgba(215,168,92,.35);border-radius:20px;padding:32px;background:#0a222c;color:var(--cream);box-shadow:var(--shadow)}dialog::backdrop{background:rgba(1,9,12,.75);backdrop-filter:blur(5px)}dialog h2{font:600 2rem 'Playfair Display',serif;margin:8px 0 18px}dialog p,dialog li{color:#b8c8ca;line-height:1.6;font-size:.88rem}dialog li+li{margin-top:7px}.dialog-close{position:absolute;right:16px;top:14px;border:0;background:transparent;color:var(--cream);font-size:1.8rem;cursor:pointer}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,30px);background:var(--cream);color:var(--navy);padding:12px 18px;border-radius:9px;font-weight:700;font-size:.8rem;opacity:0;pointer-events:none;transition:.25s;z-index:20;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.anchored{white-space:nowrap;padding:9px 16px;border-radius:99px}
@media(max-width:900px){.yahtzee-layout{grid-template-columns:1fr}.dice-table{min-height:500px}.dice-tray{min-height:300px}.score-card{min-height:0}.board{height:66vw;min-height:360px}.checker{width:4.8vw;height:4.8vw}.board-actions{align-items:flex-start;gap:15px}.board-actions p{max-width:42%}}
@media(max-width:620px){.topbar{height:auto;min-height:76px;padding:12px 16px;flex-wrap:wrap;gap:10px}.brand{order:1}.icon-button{order:2}.game-switcher{order:3;width:100%}.switch{flex:1;padding:9px}.game-view{padding:28px 14px 50px}.section-heading{align-items:center}.section-heading h1{font-size:2.55rem}.dice-table{min-height:430px;padding:18px}.dice-tray{min-height:260px;gap:7px}.die{padding:9px;border-radius:11px}.pip{width:7px;height:7px}.roll-actions{flex-direction:column;gap:12px}.hint{display:none}.board-shell{padding:9px;border-radius:14px}.board-toolbar{gap:6px;padding:4px 2px 12px}.player-chip{gap:5px}.player-chip em,.player-chip small{display:none}.mini-checker{width:22px;height:22px}.dice-readout span{width:34px;height:34px}.board{height:86vw;min-height:340px;border-width:6px}.checker{min-width:21px;min-height:21px}.point-number{display:none}.bar{width:18px;left:calc(50% - 9px)}.board-actions{display:block}.board-actions p{max-width:none;margin-bottom:13px}.board-actions>div{justify-content:flex-end}.primary-button.compact{min-width:128px}.text-button{font-size:.68rem}}

/* Dadi 13 refinement: enamel dice + integrated club score rail */
.yahtzee-layout{grid-template-columns:minmax(0,1.42fr) minmax(390px,.78fr);gap:18px}
.dice-table{min-height:610px;padding:28px 30px;background:radial-gradient(ellipse at 50% 42%,rgba(30,112,112,.32),transparent 47%),linear-gradient(145deg,#0b5960,#083d47 78%);border:9px solid #6f432a;box-shadow:0 30px 75px rgba(0,0,0,.42),inset 0 0 0 2px #b47b48,inset 0 0 54px rgba(0,0,0,.4)}
.dice-table:before{content:"";position:absolute;inset:16px;border-radius:11px;box-shadow:inset 0 0 30px rgba(1,18,21,.38);pointer-events:none}
.dice-table:after{inset:11px;border-color:rgba(255,216,148,.2);border-radius:12px}
.table-meta{font-size:.82rem;padding:4px 2px 0}.live-dot{font-size:.72rem}
.dice-tray{min-height:375px;margin:12px 0 6px;border-radius:48%;background:radial-gradient(ellipse at center,rgba(2,25,29,.22),transparent 67%)}
.die{width:clamp(64px,7.2vw,96px);border-radius:19px;padding:16px;background:linear-gradient(145deg,#fffef8 2%,#efe7d8 56%,#c8bba4 100%);border:1px solid rgba(255,255,255,.82);box-shadow:inset 2px 2px 4px #fff,inset -7px -9px 13px rgba(84,59,31,.2),0 5px 0 #9e907b,0 18px 28px rgba(0,0,0,.35);transform:rotate(var(--rest,0deg));transform-origin:center;will-change:transform}
.die:nth-child(1){--rest:-4deg}.die:nth-child(2){--rest:2deg}.die:nth-child(3){--rest:-1deg}.die:nth-child(4){--rest:5deg}.die:nth-child(5){--rest:-2deg}
.die:hover{transform:translateY(-7px) rotate(var(--rest,0deg));filter:brightness(1.03)}
.die.held{transform:translateY(-20px) rotate(var(--rest,0deg));box-shadow:0 0 0 3px #e4bc72,0 5px 0 #9e907b,0 24px 34px rgba(0,0,0,.4)}
.die.held:before{content:"";position:absolute;inset:-8px;border:1px solid rgba(240,207,139,.55);border-radius:25px}
.die.held:after{bottom:-31px;font-size:.68rem;font-weight:700;background:#06343c;padding:3px 8px;border-radius:99px}
.pip{width:11px;height:11px;background:radial-gradient(circle at 35% 30%,#3e4647,#071114 62%);box-shadow:inset 1px 1px 2px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.7)}
.dice-tray.rolling .die{animation:dice-tumble .58s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes dice-tumble{0%{transform:translateY(-6px) rotate(-20deg) scale(.92)}36%{transform:translateY(-38px) rotate(135deg) scale(1.04)}72%{transform:translateY(6px) rotate(285deg) scale(.98)}100%{transform:translateY(0) rotate(var(--rest,0deg)) scale(1)}}
.roll-actions{border-top:1px solid rgba(235,214,179,.15);padding-top:22px}.primary-button{border-radius:99px;min-width:236px;padding:15px 20px}.button-die{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:rgba(8,27,36,.12)}
.hint{font-size:.82rem;color:#bed0cf}
.score-card{min-height:610px;border-radius:15px;background:linear-gradient(160deg,rgba(13,47,55,.98),rgba(7,29,37,.99));color:var(--cream);padding:0;overflow:hidden;border:1px solid rgba(240,207,139,.28);box-shadow:0 28px 65px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}
.score-head{align-items:center;padding:22px 22px 18px;border-bottom:1px solid rgba(240,207,139,.2);background:linear-gradient(90deg,rgba(215,168,92,.08),transparent)}
.score-head h2{font-size:1.45rem;color:var(--cream)}.score-head strong{display:grid;place-items:center;min-width:76px;height:58px;border:1px solid rgba(240,207,139,.42);border-radius:10px;color:var(--gold-light);font:600 2.2rem 'Playfair Display',serif;background:rgba(0,0,0,.16)}
.score-list{padding:7px 14px 5px}.score-row{min-height:39px;padding:0 9px;border-bottom:1px solid rgba(224,209,181,.09)}.score-row:has(.group){min-height:29px;border:0}.score-row .group{font-size:.66rem;color:#87a7aa;padding-top:8px}.score-row button{min-height:39px;color:#ecede7;font-size:.84rem;padding:7px 5px;border-radius:7px;align-items:center}.score-row button:not(:disabled):hover{background:rgba(215,168,92,.12);padding-left:10px;padding-right:10px}.score-row button:not(:disabled):focus-visible{outline-offset:-2px}.score-row .potential{min-width:32px;padding:4px 8px;border:1px solid rgba(215,168,92,.45);border-radius:99px;color:var(--gold-light);font-size:.74rem;text-align:center}.score-row .locked{min-width:32px;padding:4px 8px;border-radius:99px;background:var(--gold);color:#122128;text-align:center}.score-footer{min-height:46px;align-items:center;padding:0 22px;background:rgba(0,0,0,.18);border-top:1px solid rgba(240,207,139,.14);font-size:.76rem;color:#9db1b2}.score-footer b{color:var(--cream)}
@media(max-width:980px){.yahtzee-layout{grid-template-columns:1fr}.score-card{min-height:0}.dice-table{min-height:540px}}
@media(max-width:620px){.dice-table{min-height:450px;padding:18px 16px;border-width:6px}.dice-tray{min-height:270px;margin:4px 0}.die{width:clamp(51px,16vw,72px);padding:10px;border-radius:14px}.pip{width:8px;height:8px}.roll-actions{padding-top:16px}.score-head{padding:18px}.score-list{padding:6px 10px}.score-row button{font-size:.82rem}.score-footer{padding:0 16px}}

/* Social play and larger, friendlier typography */
html{font-size:18px}.topbar{gap:18px}.online-count{display:flex;align-items:center;gap:6px;padding:9px 13px;border:1px solid var(--line);border-radius:99px;color:#c7d5d5;font-size:.78rem;white-space:nowrap}.online-count i{width:9px;height:9px;border-radius:50%;background:#52d48a;box-shadow:0 0 0 4px rgba(82,212,138,.13)}.online-count b{color:#fff;font-size:.9rem}.section-heading{margin-bottom:20px}.play-controls{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:16px;margin-bottom:20px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(2,17,22,.45);backdrop-filter:blur(10px)}.mode-choice{display:flex;gap:5px;padding:4px;background:rgba(0,0,0,.24);border-radius:10px}.mode{border:0;border-radius:7px;background:transparent;color:#a9babb;font:600 .78rem inherit;padding:9px 13px;cursor:pointer}.mode.active{background:var(--cream);color:var(--navy);box-shadow:0 5px 14px rgba(0,0,0,.2)}.play-controls label{font-size:.76rem;color:#afc0c1;display:flex;align-items:center;gap:8px}.difficulty{appearance:none;background:#0b2a34;color:var(--cream);border:1px solid var(--line);border-radius:8px;padding:9px 30px 9px 11px;font:600 .78rem inherit;background-image:linear-gradient(45deg,transparent 50%,#d7a85c 50%),linear-gradient(135deg,#d7a85c 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat}.difficulty:disabled{opacity:.38}.win-meter{justify-self:end;display:flex;align-items:center;gap:9px;color:#aebfc0;font-size:.72rem}.win-meter>b{display:block;width:70px;height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}.win-meter>b i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:.4s}.win-meter strong{color:var(--cream)}.social-dialog{text-align:left}.social-dialog h2{margin-bottom:9px}.social-dialog .primary-button{width:100%;margin-top:10px}.social-dialog .text-button{display:block;margin:16px auto 0}.name-field{display:block;color:#b9c9ca;font-size:.82rem;margin:20px 0 8px}.name-field input{display:block;width:100%;margin-top:8px;padding:13px 14px;border-radius:9px;border:1px solid var(--line);background:#061820;color:white;font:500 .9rem inherit}.match-found{color:#64d798;font-weight:700}.score-row button{font-size:.9rem;min-height:43px}.score-row .group{font-size:.72rem}.score-footer,.hint,.board-actions p{font-size:.82rem}.player-chip b{font-size:.94rem}.primary-button,.secondary-button{font-size:.88rem}
@media(max-width:900px){.play-controls{grid-template-columns:1fr auto}.win-meter{grid-column:1/-1;justify-self:stretch;justify-content:flex-end}.topbar{gap:10px}.online-count span{display:none}}
@media(max-width:620px){html{font-size:17px}.online-count{order:2;margin-left:auto}.icon-button{order:2}.play-controls{display:block;padding:10px}.mode-choice{display:grid;grid-template-columns:repeat(3,1fr)}.mode{padding:9px 5px;font-size:.7rem}.play-controls label{margin-top:10px;justify-content:flex-end}.win-meter{margin-top:12px}.section-heading{margin-bottom:16px}}
.score-totals{display:flex;align-items:center;gap:12px}.score-totals>span{font-size:.7rem;color:#9fb3b4;text-align:right}.score-totals>span b{display:block;color:var(--gold-light);font-size:1.05rem;margin-top:2px}

/* Home lobby and cinematic Backgammon table */
[hidden]{display:none!important}.brand{border:0;background:transparent;font-family:inherit;cursor:pointer;text-align:left}.header-actions{display:flex;align-items:center;gap:10px}.home-button{border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.04);color:var(--cream);padding:10px 15px;font:700 .78rem inherit;cursor:pointer;transition:.2s}.home-button:hover{border-color:rgba(240,207,139,.55);background:rgba(215,168,92,.09)}
.home-view{display:none;max-width:1540px;min-height:calc(100vh - 88px);margin:auto;padding:clamp(54px,7vw,108px) clamp(22px,5vw,78px) 80px}.home-view.active{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(600px,1.28fr);align-items:center;gap:clamp(40px,6vw,100px);animation:home-in .6s cubic-bezier(.2,.8,.2,1)}.home-intro{max-width:540px}.home-intro h1{font:italic 600 clamp(3.2rem,6.2vw,6.4rem)/.9 'Playfair Display',serif;letter-spacing:-.045em;margin:18px 0 28px}.home-intro p{max-width:470px;color:#b6c7c8;font-size:clamp(1rem,1.45vw,1.24rem);line-height:1.7;margin:0}.game-gallery{display:grid;grid-template-columns:1fr;gap:20px}.game-card{min-height:260px;width:100%;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;gap:12px 26px;align-items:center;text-align:left;padding:30px 34px;border:1px solid rgba(240,207,139,.24);border-radius:25px;color:var(--cream);background:linear-gradient(135deg,rgba(15,65,75,.95),rgba(5,28,36,.98));box-shadow:0 28px 70px rgba(0,0,0,.28);cursor:pointer;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}.game-card:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 10%,rgba(240,207,139,.15),transparent 34%);opacity:.55;pointer-events:none}.game-card:hover{transform:translateY(-7px) scale(1.012);border-color:rgba(240,207,139,.62);box-shadow:0 38px 90px rgba(0,0,0,.42)}.game-card:focus-visible{outline-offset:5px}.backgammon-card{background:linear-gradient(135deg,rgba(91,47,31,.97),rgba(28,23,22,.99))}.card-number{grid-column:1;color:var(--gold);font:700 .72rem inherit;letter-spacing:.18em;align-self:start}.game-symbol{grid-column:3;grid-row:1/3;display:grid;place-items:center;width:90px;height:90px;border-radius:22px;background:linear-gradient(145deg,#fffdf4,#d4c5aa);color:var(--navy);font-size:3.4rem;box-shadow:0 14px 30px rgba(0,0,0,.32),inset -6px -8px 12px rgba(81,56,26,.14);transform:rotate(5deg);transition:transform .4s}.checker-symbol{border-radius:50%;background:radial-gradient(circle at 32% 28%,#fffaf0,#bca98d 70%);border:5px solid #ead9bd;color:transparent}.game-card:hover .game-symbol{transform:rotate(-4deg) translateY(-4px)}.card-copy{grid-column:1/3;display:block;align-self:center}.card-copy small,.card-copy strong,.card-copy em{display:block}.card-copy small{color:#c8ae83;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}.card-copy strong{font:italic 600 clamp(2rem,3.6vw,3.5rem)/1 'Playfair Display',serif}.card-copy em{font-style:normal;color:#b8c8c8;font-size:.88rem;line-height:1.5;margin-top:10px}.card-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(240,207,139,.14);padding-top:18px;font-size:.78rem}.availability{display:flex;align-items:center;gap:7px;color:#c3d0cf}.availability i{width:8px;height:8px;border-radius:50%;background:#52d48a;box-shadow:0 0 0 5px rgba(82,212,138,.1)}.availability b{color:#fff}.enter-game{color:var(--gold-light);font-weight:700}.enter-game b{display:inline-block;margin-left:8px;font-size:1rem;transition:transform .2s}.game-card:hover .enter-game b{transform:translateX(5px)}
.table-presence{justify-self:end;display:flex;align-items:center;gap:11px;color:#c3d0cf;font-size:.76rem}.table-presence b{color:#fff}.presence-faces{display:flex}.presence-faces i{width:30px;height:30px;margin-left:-7px;display:grid;place-items:center;border:2px solid #08202a;border-radius:50%;background:#d6a75d;color:#172126;font-style:normal;font-size:.62rem;font-weight:800}.presence-faces i:nth-child(2){background:#a7c4c2}.presence-faces i:nth-child(3){background:#c96a5c}
#backgammon.game-view{max-width:1660px;padding-left:clamp(14px,3vw,50px);padding-right:clamp(14px,3vw,50px)}#backgammon.active .board-shell{animation:table-rise .7s cubic-bezier(.16,1,.3,1) both}.backgammon-layout{perspective:1400px}.board-shell{padding:clamp(14px,1.8vw,26px);border-radius:28px;background:linear-gradient(145deg,#865336,#3a2117 68%);box-shadow:0 42px 100px rgba(0,0,0,.55),inset 0 0 55px rgba(255,202,112,.1)}.board-toolbar{padding:4px 12px 22px}.player-chip{padding:9px 12px;border-radius:14px}.player-chip.active{background:rgba(255,255,255,.065);box-shadow:inset 0 0 0 1px rgba(240,207,139,.14)}.player-chip.active .mini-checker{animation:active-checker 1.8s ease-in-out infinite}.dice-readout span{width:54px;height:54px;border-radius:12px;font-size:1.25rem}.dice-readout.rolling span{animation:bg-die-roll .62s cubic-bezier(.2,.8,.2,1) both}.dice-readout.rolling span:nth-child(2){animation-delay:.08s}.board{height:min(66vw,760px);min-height:560px;border-width:12px;border-radius:4px;box-shadow:inset 0 0 0 4px #362017,inset 0 0 65px rgba(0,0,0,.52),0 16px 34px rgba(0,0,0,.35)}.checker{width:min(4.8vw,68px);height:min(4.8vw,68px);animation:checker-arrive .25s cubic-bezier(.2,.8,.2,1) both}.point.legal:after{content:"";position:absolute;inset:5px;border:3px solid var(--gold-light);border-radius:8px;animation:legal-pulse 1.1s ease-in-out infinite}.point.selected:after{border-width:3px;box-shadow:0 0 22px rgba(240,207,139,.55)}.turn-pill i{animation:turn-pulse 1.8s ease-in-out infinite}.board-actions{padding:22px 10px 4px}.board-actions p{font-size:.94rem}.primary-button.compact{min-width:180px;padding:15px 20px}
@keyframes home-in{from{opacity:0;transform:translateY(18px)}}@keyframes table-rise{from{opacity:0;transform:rotateX(5deg) translateY(28px) scale(.985)}}@keyframes checker-arrive{from{opacity:.55;transform:translateY(-8px) scale(.92)}}@keyframes bg-die-roll{0%{transform:rotate(0) scale(1)}35%{transform:translateY(-18px) rotate(145deg) scale(1.12)}75%{transform:translateY(3px) rotate(300deg) scale(.96)}100%{transform:rotate(360deg) scale(1)}}@keyframes legal-pulse{50%{box-shadow:inset 0 0 34px rgba(240,207,139,.28);opacity:.68}}@keyframes turn-pulse{50%{box-shadow:0 0 0 8px rgba(255,255,255,.03)}}@keyframes active-checker{50%{transform:translateY(-2px);filter:brightness(1.1)}}
@media(max-width:1050px){.home-view.active{grid-template-columns:1fr;align-items:start}.home-intro{max-width:760px}.home-intro h1 br{display:none}.home-intro p{max-width:680px}.game-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.game-card{min-height:330px;display:flex;flex-direction:column;align-items:flex-start}.game-symbol{position:absolute;right:25px;top:24px;width:72px;height:72px;font-size:2.6rem}.card-copy{margin-top:auto}.card-footer{width:100%;margin-top:12px}.table-presence{grid-column:1/-1;justify-self:start}.board{min-height:500px}}
@media(max-width:700px){.home-view{padding-top:42px}.home-view.active{gap:34px}.home-intro h1{font-size:clamp(3rem,15vw,4.8rem)}.game-gallery{grid-template-columns:1fr}.game-card{min-height:270px;padding:25px}.card-copy strong{font-size:2.6rem}.game-symbol{width:62px;height:62px}.game-switcher{order:4}.header-actions{order:2}.home-button{padding:9px 12px}.board{height:92vw;min-height:390px;border-width:7px}.board-shell{padding:9px}.checker{width:5.9vw;height:5.9vw;min-width:20px;min-height:20px}.dice-readout span{width:42px;height:42px}.board-actions{display:flex;flex-direction:column;align-items:stretch}.board-actions p{max-width:none}.board-actions>div{justify-content:space-between;width:100%}.primary-button.compact{min-width:140px}.table-presence{margin-top:12px}.presence-faces{display:none}}

/* Dadi 13 gameplay pass */
.turn-guide{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;margin:20px auto 0;color:rgba(224,239,237,.48);font-size:.72rem;font-weight:700}.turn-guide span{display:flex;align-items:center;gap:7px;transition:.25s}.turn-guide span b{display:grid;place-items:center;width:24px;height:24px;border:1px solid rgba(255,255,255,.2);border-radius:50%;font-size:.66rem}.turn-guide i{width:34px;height:1px;background:rgba(255,255,255,.14)}.turn-guide span.active{color:#fff}.turn-guide span.active b{color:#172025;background:var(--gold-light);border-color:var(--gold-light);box-shadow:0 0 0 5px rgba(240,207,139,.1)}.turn-guide span.done{color:#a9c9c6}.turn-guide span.done b{color:#06272e;background:#9ac4bd;border-color:#9ac4bd}.table-meta{align-items:center}.table-meta #heldCount{color:var(--gold-light);font-weight:700}.die[aria-pressed="true"]{cursor:grab}.score-row button.recommended{position:relative;background:linear-gradient(90deg,rgba(215,168,92,.2),rgba(215,168,92,.06));box-shadow:inset 3px 0 0 var(--gold-light);padding-left:12px;padding-right:9px}.score-row button.recommended .potential{background:var(--gold-light);color:#102027;border-color:var(--gold-light)}.score-row .category-label{display:flex;align-items:center;gap:8px}.score-row .recommendation{padding:3px 6px;border-radius:99px;background:rgba(240,207,139,.14);color:var(--gold-light);font-size:.55rem;font-style:normal;letter-spacing:.08em;text-transform:uppercase}.summary-dialog{text-align:center;max-width:460px}.summary-dialog h2{margin-bottom:10px}.summary-score{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:18px 0}.summary-score strong{font:600 4.6rem/1 'Playfair Display',serif;color:var(--gold-light)}.summary-score span{color:#9fb2b3}.summary-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.summary-breakdown span{padding:12px 8px;border:1px solid var(--line);border-radius:10px;color:#9fb2b3;font-size:.7rem}.summary-breakdown b{display:block;margin-top:4px;color:#fff;font-size:1rem}.summary-dialog p{min-height:1.5em}.summary-dialog .primary-button{width:100%;margin-top:12px}.summary-dialog .text-button{display:block;margin:16px auto 0}@keyframes soft-pulse{50%{box-shadow:0 0 24px rgba(240,207,139,.18)}}
@media(max-width:620px){.turn-guide{gap:6px;margin-top:16px}.turn-guide i{width:14px}.turn-guide span{font-size:.62rem;gap:4px}.turn-guide span b{width:21px;height:21px}.table-meta #heldCount{display:none}.summary-breakdown{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Four-room lobby */
.game-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.game-card{min-height:310px;display:flex;flex-direction:column;align-items:flex-start}.game-symbol{position:absolute;right:25px;top:24px;width:72px;height:72px;font-size:2.6rem}.game-symbol img{display:block;width:70%;height:70%;object-fit:contain}.card-copy{margin-top:auto}.card-footer{width:100%;margin-top:12px}.card-symbol{color:#172126;transform:rotate(-5deg)}.marble-symbol{border-radius:50%;background:linear-gradient(145deg,#edf1ff,#aabbe1);border:4px solid rgba(255,255,255,.28)}.burraco-card{background:linear-gradient(135deg,rgba(23,83,62,.97),rgba(7,35,30,.99))}.chinese-card{background:linear-gradient(135deg,rgba(37,55,102,.97),rgba(15,23,52,.99))}.game-switcher{flex-wrap:wrap;justify-content:center}.switch{padding:9px 15px}

/* Burraco room */
#burraco.game-view,#chinese.game-view{max-width:1580px}.variant-choice{justify-self:end;display:flex;border:1px solid var(--line);border-radius:10px;padding:4px}.variant{border:0;background:transparent;color:#a9babb;padding:8px 11px;border-radius:7px;font:700 .72rem inherit;cursor:pointer}.variant.active{background:#1e7258;color:#fff}.burraco-table{border-radius:28px;padding:22px clamp(16px,3vw,42px) 26px;background:radial-gradient(circle at 50% 42%,rgba(37,133,99,.64),transparent 53%),linear-gradient(145deg,#145e49,#082e29);border:11px solid #75492f;box-shadow:0 38px 90px rgba(0,0,0,.48),inset 0 0 0 2px #b47a4d,inset 0 0 65px rgba(0,0,0,.4);min-height:680px}.bur-opponent{display:flex;align-items:center;gap:12px;max-width:420px;margin:auto;padding:10px 15px;border-radius:15px;background:rgba(0,0,0,.2)}.bur-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:#10221e;font-weight:800}.bur-opponent small,.bur-opponent b{display:block}.bur-opponent small{color:#a8c9bd;font-size:.58rem;letter-spacing:.13em}.bur-opponent b{font-size:.82rem;margin-top:3px}.card-count{margin-left:auto;color:#b6cec6;font-size:.7rem}.card-count b{display:inline}.meld-table{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center;min-height:325px}.meld-lane{min-width:0}.meld-lane>small{display:block;color:#a8c9bd;text-align:center;text-transform:uppercase;letter-spacing:.11em;font-size:.58rem;margin-bottom:12px}.meld-lane>div{min-height:105px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:13px}.table-center{display:flex;gap:15px;align-items:center}.card-pile{width:78px;height:108px;border-radius:9px;cursor:pointer;position:relative}.card-pile.stock{border:5px solid #f1e6d2;background:repeating-linear-gradient(45deg,#8d3f38 0 5px,#6f2b28 5px 10px);color:#fff;box-shadow:0 10px 20px rgba(0,0,0,.35)}.card-pile.stock span{display:grid;place-items:center;width:32px;height:32px;margin:auto;border-radius:50%;background:#f4ead7;color:#17352e;font-weight:800}.card-pile.stock small{position:absolute;top:calc(100% + 7px);left:0;right:0;color:#d4e2dc}.card-pile.discard{padding:0;border:1px dashed rgba(255,255,255,.3);background:rgba(0,0,0,.12)}.playing-card{flex:0 0 auto;width:74px;height:105px;border:0;border-radius:8px;background:linear-gradient(145deg,#fffef8,#e6dfd2);color:#172126;box-shadow:0 8px 17px rgba(0,0,0,.3);padding:8px;display:flex;flex-direction:column;align-items:flex-start;cursor:pointer;font-family:Georgia,serif;transition:.22s;animation:card-deal .32s cubic-bezier(.2,.8,.2,1) both}.playing-card b{font-size:1.25rem}.playing-card i{font-style:normal;font-size:1.7rem;margin:auto}.playing-card.red{color:#b33c34}.playing-card.selected{transform:translateY(-22px);box-shadow:0 0 0 3px var(--gold-light),0 20px 24px rgba(0,0,0,.38)}.playing-card.small{width:52px;height:74px;padding:5px;pointer-events:none}.playing-card.small b{font-size:.83rem}.playing-card.small i{font-size:1.05rem}.card-pile .playing-card.small{width:100%;height:100%}.table-meld{display:flex}.table-meld .playing-card+ .playing-card{margin-left:-29px}.empty-meld{color:rgba(223,239,233,.48);font-size:.78rem}.bur-status{text-align:center;color:#d7e6df;font-size:.84rem;margin:0 auto 14px}.card-hand{min-height:135px;display:flex;justify-content:center;align-items:flex-end;overflow-x:auto;padding:22px 14px 4px}.card-hand .playing-card+.playing-card{margin-left:-20px}.card-hand .playing-card:hover{transform:translateY(-12px)}.bur-actions{display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}.bur-actions>div{display:flex;gap:10px}.bur-actions .secondary-button{padding:13px 17px}
@keyframes card-deal{from{opacity:0;transform:translateY(-25px) rotate(-4deg)}}

/* Chinese checkers room */
.chinese-layout{display:grid;place-items:center}.chinese-shell{width:min(100%,1040px);padding:24px clamp(14px,3vw,38px);border-radius:30px;background:linear-gradient(145deg,#805334,#3a2419);border:1px solid rgba(240,207,139,.32);box-shadow:0 40px 95px rgba(0,0,0,.5),inset 0 0 50px rgba(255,207,126,.09)}.cc-player-row{display:grid;grid-template-columns:1fr minmax(220px,1.1fr) 1fr;align-items:center;gap:20px}.cc-player{display:flex;gap:10px;align-items:center;opacity:.48;padding:9px 12px;border-radius:14px}.cc-player:last-child{justify-content:flex-end}.cc-player.active{opacity:1;background:rgba(255,255,255,.06)}.cc-player small,.cc-player b{display:block}.cc-player small{font-size:.56rem;color:#d3b58c;letter-spacing:.1em}.cc-player b{font-size:.88rem}.cc-player-row p{text-align:center;color:#e5d5bd;font-size:.78rem}.cc-marble,.cc-hole.occupied{border-radius:50%;box-shadow:0 5px 9px rgba(0,0,0,.38),inset 2px 2px 4px rgba(255,255,255,.32)}.cc-marble{width:30px;height:30px}.cc-marble.red,.cc-hole.red{background:radial-gradient(circle at 30% 24%,#ff9385,#bd493d 63%,#792a26)}.cc-marble.blue,.cc-hole.blue{background:radial-gradient(circle at 30% 24%,#8cb6ff,#345aa0 63%,#1d315d)}.cc-board{width:min(82vw,760px);aspect-ratio:1.06;margin:5px auto 0;position:relative;filter:drop-shadow(0 20px 22px rgba(0,0,0,.3))}.cc-board:before{content:"";position:absolute;inset:4%;clip-path:polygon(50% 0,60% 25%,88% 22%,75% 43%,100% 58%,70% 61%,76% 88%,50% 72%,24% 88%,30% 61%,0 58%,25% 43%,12% 22%,40% 25%);background:linear-gradient(145deg,#e7c797,#a97042);box-shadow:inset 0 0 45px rgba(75,38,14,.38)}.cc-hole{position:absolute;z-index:2;left:calc(50% + var(--x)*6.45%);top:calc(2.5% + var(--y)*5.72%);transform:translate(-50%,-50%);width:clamp(15px,3.15vw,34px);height:clamp(15px,3.15vw,34px);border:2px solid rgba(75,43,25,.55);border-radius:50%;background:#765038;box-shadow:inset 0 3px 5px rgba(0,0,0,.48);cursor:pointer;transition:.18s}.cc-hole.occupied{border:2px solid rgba(255,255,255,.27);animation:marble-set .25s cubic-bezier(.2,.8,.2,1)}.cc-hole.occupied:hover{filter:brightness(1.13);transform:translate(-50%,-57%) scale(1.05)}.cc-hole.selected{outline:4px solid var(--gold-light);outline-offset:3px;transform:translate(-50%,-62%) scale(1.08)}.cc-hole.legal{background:#f5d98f;border-color:#fff2c8;box-shadow:0 0 0 5px rgba(245,217,143,.18),0 0 22px rgba(245,217,143,.75);animation:cc-legal 1s ease-in-out infinite}.cc-actions{display:flex;align-items:center;justify-content:space-between;color:#d6bea0;font-size:.76rem;padding-top:5px}.red-turn{background:#d45145!important}.blue-turn{background:#4269ad!important}@keyframes marble-set{from{opacity:.5;transform:translate(-50%,-80%) scale(.7)}}@keyframes cc-legal{50%{transform:translate(-50%,-50%) scale(.88);opacity:.72}}

@media(max-width:1050px){.home-view.active{grid-template-columns:1fr}.game-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.variant-choice{grid-column:1/-1;justify-self:start}.burraco-table{min-height:620px}.meld-table{min-height:290px}}
@media(max-width:700px){.game-gallery{grid-template-columns:1fr}.game-switcher{width:100%;display:grid;grid-template-columns:repeat(2,1fr);border-radius:16px}.switch{padding:8px 6px}.burraco-table{border-width:7px;padding:16px 10px}.meld-table{grid-template-columns:1fr;gap:12px;min-height:420px}.meld-lane{display:none}.playing-card{width:62px;height:91px}.card-hand{justify-content:flex-start}.bur-actions{align-items:flex-end}.bur-actions>div{flex-direction:column}.bur-actions .primary-button.compact{min-width:160px}.cc-player-row{grid-template-columns:1fr 1fr}.cc-player-row p{grid-row:2;grid-column:1/-1;margin:0}.cc-board{width:96vw;max-width:620px}.cc-hole{width:clamp(13px,4.2vw,29px);height:clamp(13px,4.2vw,29px)}.cc-actions{padding:0 8px}.table-presence{display:none}}

/* Standalone editions: no external fonts or platform assets required. */
body{font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.home-intro h1,.section-heading h1,.score-head h2,.score-head strong,dialog h2,.summary-score strong{font-family:Georgia,"Times New Roman",serif}
.mode:disabled{opacity:.38;cursor:not-allowed;text-decoration:line-through}
.edition-offline .availability i,.edition-offline .online-count i{background:var(--gold);box-shadow:0 0 0 4px rgba(215,168,92,.13)}
.privacy-note{margin-top:-2px!important;font-size:.72rem!important;color:#89a5a8!important}
button.table-meld{border:0;padding:6px;margin:0;background:transparent;border-radius:12px;cursor:pointer;transition:background .2s,box-shadow .2s}
button.table-meld:hover,button.table-meld:focus-visible{background:rgba(255,255,255,.1);box-shadow:0 0 0 2px var(--gold-light)}
.card-pile.discard{position:relative}
.pile-count{position:absolute;right:-8px;top:-8px;min-width:24px;height:24px;padding:0 6px;border-radius:99px;display:grid;place-items:center;background:var(--gold);color:#10221e;font-size:.7rem}

/* ===== Touch: telefono e tablet ===== */
/* Niente zoom da doppio tocco (selezionare e ritoccare una pila o un dado lo attivava) né riquadro grigio al tocco. */
html{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
.board,.dice-tray,.card-hand,.cc-board,.meld-table{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Sui dispositivi senza mouse l'effetto :hover resta "incollato" dopo il tocco: lo annullo. */
@media(hover:none){
  .die:not(.held):hover{transform:none}
  .card-hand .playing-card:not(.selected):hover{transform:none}
  .cc-hole.occupied:not(.selected):hover{transform:translate(-50%,-50%);filter:none}
  .game-card:hover,.primary-button:hover{transform:none}
  .primary-button kbd{display:none}
}

/* ===== Telefono ===== */
@media(max-width:700px){
  /* La barra in alto non resta fissa: lascia tutto lo schermo al tavolo. */
  .topbar{position:relative;min-height:0;padding:10px 14px;gap:8px}
  .switch{padding:7px 6px;font-size:.8rem}
  .game-view{padding:18px 12px 40px}
  .section-heading{flex-wrap:wrap;gap:8px;margin-bottom:12px}
  .section-heading h1{font-size:2.05rem}
  .round-pill,.turn-pill{padding:7px 12px;font-size:.74rem}
  .play-controls{margin-bottom:12px}

  /* Dadi 13: meno spazio vuoto sopra e sotto i dadi, così la scheda è subito sotto. */
  .dice-table{min-height:0;padding:14px 12px}
  .dice-tray{min-height:150px;margin:6px 0}
  
  .turn-guide{margin-top:10px}

  /* Backgammon: dadi e pulsanti sopra la tavola, così non si scorre avanti e indietro a ogni turno. */
  .board-shell{display:flex;flex-direction:column}
  .board-toolbar{order:0}
  .board-actions{order:1;padding:0 4px 10px}
  .board{order:2;height:min(96vw,calc(100svh - 190px));min-height:330px}
  .checker{width:6.6vw;height:6.6vw;min-width:22px;min-height:22px}

  /* Burraco: combinazioni di nuovo visibili e mano su due righe invece che nascosta a destra. */
  .burraco-table{min-height:0;padding:12px 8px}
  .meld-table{grid-template-columns:1fr;gap:10px;min-height:0}
  .meld-lane{display:block}
  .meld-lane>small{margin-bottom:6px}
  .meld-lane>div{min-height:56px;gap:8px}
  .meld-lane .playing-card.small{width:34px;height:50px;padding:3px}
  .meld-lane .playing-card.small b{font-size:.68rem}
  .meld-lane .playing-card.small i{font-size:.8rem}
  .table-meld .playing-card+.playing-card{margin-left:-16px}
  .table-center{justify-content:center;margin:4px 0 16px}
  .card-pile{width:62px;height:88px}
  .card-hand{flex-wrap:wrap;justify-content:center;overflow:visible;row-gap:12px;padding:18px 4px 4px;min-height:0}
  .playing-card{width:50px;height:74px;padding:5px}
  .playing-card b{font-size:1rem}
  .playing-card i{font-size:1.3rem}
  .card-hand .playing-card+.playing-card{margin-left:-14px}
  .playing-card.selected{transform:translateY(-12px)}
  .bur-actions{flex-wrap:wrap;gap:10px}
  .bur-actions>div{flex-direction:row;width:100%}
  .bur-actions>div>button{flex:1}

  /* Dama cinese: tavola a tutta larghezza e buche più grandi da toccare. */
  .cc-board{width:100%;max-width:560px}
  .cc-hole{width:5vw;height:5vw;min-width:17px;min-height:17px;border-width:1.5px}
  .cc-hole.selected{outline-width:3px;outline-offset:2px}
}
@media(max-width:700px){.brand-mark{width:34px;height:34px;border-radius:8px}}

/* ===== Dadi 13: scheda con colonna avversario e conferma dello zero ===== */
.score-list.versus .score-row{grid-template-columns:1fr 34px;gap:6px}
.rival-score{justify-self:center;font-size:.74rem;color:#9db1b2;font-variant-numeric:tabular-nums}
.rival-head{justify-self:center}
.score-row button.confirm-zero{background:rgba(168,71,61,.22);box-shadow:inset 0 0 0 1px rgba(255,150,130,.45)}
.score-row button.confirm-zero .recommendation{color:#ffb3a6}
.score-row button.confirm-zero .potential{border-color:#ff9f8f;color:#ffcabf}
.rival-last{margin:0;padding:8px 22px;font-size:.74rem;color:#bcd0d0;background:rgba(215,168,92,.07);border-bottom:1px solid rgba(240,207,139,.12)}
@media(max-width:700px){
  /* Scheda su due colonne: superiore a sinistra, combinazioni a destra; dadi e scheda stanno in uno schermo. */
  .score-list{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;padding:4px 6px}
  .score-row{min-height:0;padding:0 2px}
  .score-row:has(.group){min-height:22px}
  .score-row .group{font-size:.56rem;padding-top:4px}
  .score-row button{min-height:32px;font-size:.74rem;padding:4px 4px;gap:4px}
  .score-row .potential,.score-row .locked{min-width:26px;padding:2px 5px;font-size:.68rem}
  .score-row button.recommended:not(.confirm-zero) .recommendation{display:none}
  .score-row button .recommendation{font-size:.55rem}
  .score-list.versus .score-row{grid-template-columns:1fr 22px;gap:2px}
  .rival-score{font-size:.64rem}
  .score-head{padding:10px 14px}
  .score-head h2{font-size:1.1rem}
  .score-head strong{min-width:58px;height:42px;font-size:1.6rem}
  .rival-last{padding:6px 14px;font-size:.68rem}
  .score-footer{min-height:34px;font-size:.7rem}
  .yahtzee-layout{gap:10px}
  .dice-tray{min-height:120px}
  .turn-guide{display:none}
  .roll-actions{padding-top:10px;gap:6px}
}

/* ===== Backgammon: guida al tocco, trascinamento, dadi usati ===== */
.point.movable .stack .checker:last-child,.top .point.movable .stack .checker:last-child{box-shadow:0 0 0 3px rgba(240,207,139,.85),0 4px 10px rgba(0,0,0,.45)}
#bar.movable{box-shadow:0 0 0 2px var(--gold-light) inset;cursor:pointer}
#bar.selected{background:linear-gradient(90deg,#5a3521,#c38a52,#5a3521)}
.dice-readout span.used{opacity:.3;transform:scale(.88)}
.dice-readout span{transition:opacity .2s,transform .2s}
.board.drag-ready{touch-action:none}
.drag-ghost{position:fixed;z-index:100;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;box-shadow:0 12px 24px rgba(0,0,0,.5);opacity:.95}
#bgRoll.pulse{animation:soft-pulse 1.4s ease-in-out infinite}
.player-chip em span{white-space:nowrap}
@media(max-width:700px){
  .player-chip em{display:block;margin:2px 0 0;font-size:.58rem}
  .player-chip{flex-wrap:wrap}
  .board-actions>div{gap:6px}
  .board-actions .secondary-button{padding:10px 12px}
  .board-actions .primary-button.compact{min-width:118px}
}
@media(max-width:700px){
  /* Barra giocatori/dadi: sempre dentro lo schermo, anche con i quattro dadi del doppio. */
  .board-toolbar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;padding:4px 2px 10px}
  .player-chip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:6px;row-gap:0;min-width:0;padding:6px 8px}
  .player-chip .mini-checker{grid-row:1/3;width:20px;height:20px}
  .player-chip b{font-size:.8rem;display:block;overflow:hidden;text-overflow:ellipsis}
  .player-chip em{grid-column:2;margin:0}
  #blackChip{justify-content:initial}
  .dice-readout{gap:4px}
  .dice-readout span{width:34px;height:34px;font-size:.95rem}
  .dice-readout:has(span:nth-child(4)) span{width:27px;height:30px;font-size:.85rem;border-radius:7px}
  /* Il messaggio occupa sempre due righe: la tavola non si sposta mentre giochi. */
  .board-actions p{min-height:2.7em;display:flex;align-items:center}
}

/* ===== Backgammon: dadi veri con i puntini ===== */
.dice-readout{align-items:center;gap:10px;position:relative}
.dice-readout .bg-die{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:stretch;width:48px;height:48px;padding:8px;border-radius:11px;background:linear-gradient(145deg,#fffdf4,#ddd2bd);box-shadow:inset -3px -4px 8px rgba(76,56,31,.16),0 8px 14px rgba(0,0,0,.35);font-size:0}
.dice-readout .bg-die .pip{width:8px;height:8px}
.dice-readout .bg-die.idle{opacity:.35;box-shadow:none}
.dice-readout .bg-die.used{opacity:.32;transform:scale(.86);box-shadow:none}
.dice-readout.rolling .bg-die{animation:bg-die-tumble .21s ease-in-out infinite alternate}
.dice-readout.rolling .bg-die:nth-child(2){animation-direction:alternate-reverse;animation-duration:.17s}
.dice-readout.landed .bg-die:not(.used){animation:bg-die-land .42s cubic-bezier(.2,.9,.3,1.25)}
.dice-readout.landed .bg-die:nth-child(2){animation-delay:.05s}
@keyframes bg-die-tumble{0%{transform:translate(-4px,-10px) rotate(-28deg) scale(.94)}100%{transform:translate(4px,2px) rotate(24deg) scale(1.04)}}
@keyframes bg-die-land{0%{transform:translateY(-12px) rotate(-10deg) scale(1.08)}60%{transform:translateY(2px) rotate(3deg) scale(.97)}100%{transform:none}}
.bg-moves{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);display:flex;gap:5px}
.bg-moves i{width:7px;height:7px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 6px rgba(240,207,139,.6)}
.bg-moves i.used{background:rgba(255,255,255,.18);box-shadow:none}
@media(max-width:700px){
  .dice-readout{gap:6px}
  .dice-readout .bg-die{width:38px;height:38px;padding:6px;border-radius:9px}
  .dice-readout .bg-die .pip{width:6px;height:6px}
  .bg-moves{bottom:-10px;gap:4px}
  .bg-moves i{width:6px;height:6px}
}
@media(prefers-reduced-motion:reduce){.dice-readout.rolling .bg-die,.dice-readout.landed .bg-die{animation:none}}
@media(max-width:390px){
  .board-toolbar{gap:4px}
  .player-chip{padding:5px 6px;column-gap:4px}
  .player-chip .mini-checker{width:16px;height:16px}
  .player-chip b{font-size:.72rem}
  .player-chip em{font-size:.52rem}
  .dice-readout .bg-die{width:34px;height:34px;padding:5px}
  .board-actions>div{gap:4px}
  .board-actions .secondary-button{padding:9px 10px}
  .board-actions .primary-button.compact{min-width:0;padding:10px 14px}
}

/* ===== Backgammon: la barra centrale ha il suo spazio e non copre più le pedine ===== */
.board{--bar-w:28px}
.points-row{grid-template-columns:repeat(6,minmax(0,1fr)) var(--bar-w) repeat(6,minmax(0,1fr))}
.points-row .point:nth-child(7){grid-column:8}
.bar{width:var(--bar-w);left:calc(50% - var(--bar-w)/2)}
@media(max-width:700px){.board{--bar-w:16px}.bar{width:var(--bar-w);left:calc(50% - var(--bar-w)/2)}}

/* ===== Backgammon: i dadi rotolano sulla tavola, nella metà di chi è di turno ===== */
.board-toolbar{grid-template-columns:1fr 1fr}
.board-dice{position:absolute;z-index:6;top:50%;height:0;width:calc(50% - var(--bar-w)/2);display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none}
.board-dice.right{right:0}
.board-dice.left{left:0}
.board-dice .bg-die{pointer-events:auto}
.board-dice.can-roll .bg-die{cursor:pointer;opacity:.9;box-shadow:0 0 0 2px rgba(240,207,139,.75),0 0 18px rgba(240,207,139,.45);animation:soft-pulse 1.6s ease-in-out infinite}
.board-dice .roll-hint{position:absolute;top:30px;white-space:nowrap;font-size:.62rem;letter-spacing:.06em;color:var(--gold-light);pointer-events:none}
.board-dice.rolling.right .bg-die{animation:bg-die-in-right .63s cubic-bezier(.2,.8,.25,1) both,bg-die-tumble .16s ease-in-out infinite alternate}
.board-dice.rolling.left .bg-die{animation:bg-die-in-left .63s cubic-bezier(.2,.8,.25,1) both,bg-die-tumble .16s ease-in-out infinite alternate}
.board-dice.rolling .bg-die:nth-child(2){animation-delay:.05s,0s}
@keyframes bg-die-in-right{0%{translate:120px -30px}100%{translate:0 0}}
@keyframes bg-die-in-left{0%{translate:-120px -30px}100%{translate:0 0}}
.board-dice .bg-moves{bottom:auto;top:28px}
@media(max-width:700px){
  .board-dice{gap:8px}
  .board-dice .bg-die{width:34px;height:34px;padding:5px}
  .board-dice .roll-hint{top:24px;font-size:.55rem}
  .board-dice .bg-moves{top:24px}
}

/* ===== Piè di pagina e Home più compatta sul telefono ===== */
.win-meter[hidden]{display:none!important}
.site-footer{display:flex;justify-content:center;gap:18px;padding:26px 16px 34px;color:#6f8789;font-size:.78rem;border-top:1px solid var(--line)}
.site-footer a{color:#9db1b2}
@media(max-width:700px){
  .home-view{padding-top:22px}
  .home-intro h1{font-size:clamp(2.2rem,11vw,3rem)}
  .home-intro p{font-size:.92rem;margin-top:10px}
  .home-view.active{gap:20px}
  .game-card{min-height:0;padding:20px}
  .card-copy strong{font-size:2.1rem}
}

/* ===== Barra dei giochi in fondo (telefono) ===== */
.tab-bar{display:none}
@media(max-width:700px){
  .tab-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(5,19,25,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.35)}
  .tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border:0;border-radius:12px;background:transparent;color:#9fb2b3;font:600 .66rem/1.1 inherit;cursor:pointer}
  .tab img{width:30px;height:30px;padding:4px;border-radius:9px;background:linear-gradient(145deg,#f6efe1,#d8cbb2);opacity:.75}
  .tab.active{color:var(--cream);background:rgba(215,168,92,.14)}
  .tab.active img{opacity:1;box-shadow:0 0 0 2px var(--gold-light)}
  /* La barra in fondo sostituisce il selettore in alto e non copre la fine della pagina. */
  .game-switcher{display:none!important}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* ===== Dadi 13 sul telefono: più spazio ai dadi, pulsante compatto ===== */
@media(max-width:700px){
  .dice-tray{min-height:150px;padding:20px 0 16px;margin:4px 0;gap:8px}
  .die{width:clamp(46px,14vw,58px);padding:8px;border-radius:12px}
  .die .pip{width:7px;height:7px}
  .die.held{transform:translateY(-10px) rotate(var(--rest,0deg))}
  .die.held:before{inset:-5px;border-radius:16px}
  .die.held:after{bottom:-19px;font-size:.5rem;letter-spacing:.1em}
  .roll-actions{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;padding-top:10px}
  #rollBtn{min-width:0;flex:1;max-width:220px;height:44px;padding:0 16px;justify-content:center;gap:8px;font-size:.9rem}
  #rollBtn .button-die{display:none}
  #newYahtzee{flex:none}
}

/* ===== Dadi 13: punteggi senza bordi e caratteri più grandi ===== */
.score-row .potential{border:0;background:transparent;padding:2px 4px;font-size:.95rem;font-weight:700}
.score-row .locked{background:transparent;color:var(--gold-light);padding:2px 4px;font-size:1rem;font-weight:800}
.score-row button{font-size:1rem}
.score-row button.recommended .potential{background:transparent;color:var(--gold-light);border:0;text-decoration:underline;text-underline-offset:4px}
.score-row button.confirm-zero .potential{border:0;color:#ffb3a6}
.rival-score{font-size:.9rem}
.score-row .group{font-size:.72rem}
@media(max-width:700px){
  .score-row button{font-size:.92rem;min-height:36px}
  .score-row .potential{font-size:.95rem;min-width:24px;padding:0 2px}
  .score-row .locked{font-size:1rem;min-width:24px;padding:0 2px}
  .score-row .group{font-size:.62rem}
  .rival-score{font-size:.78rem}
}

/* ===== Dadi 13: zeri discreti e dadi tenuti in oro, ben riconoscibili ===== */
.score-row .potential.zero{color:#6f8a8c;font-weight:600}
.score-row .locked.zero{color:#9db1b2}
.die.held{background:linear-gradient(145deg,#ffe29a,#e0a93e 60%,#b9812a);box-shadow:0 0 0 3px #fff1c4,0 0 22px rgba(255,205,100,.75),0 5px 0 #8a5f1c,0 18px 28px rgba(0,0,0,.45)}
.die.held .pip{background:#3a2106}
.die.held:before{border-color:rgba(255,226,154,.9)}
.die.held:after{content:"TENUTO";color:#1b1206;background:#ffe29a;padding:2px 7px;border-radius:99px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.35)}
@media(max-width:700px){.die.held:after{bottom:-20px;padding:1px 6px}}

/* ===== Dadi 13: ripiano dei dadi tenuti ===== */
.dice-tray{flex-direction:column;justify-content:center;gap:14px}
.held-shelf{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:min(100%,560px);min-height:96px;padding:12px 10px 8px;border:1px dashed rgba(240,207,139,.45);border-radius:16px;background:rgba(255,215,130,.06)}
.held-shelf.empty{background:transparent;border-color:rgba(240,207,139,.22)}
.shelf-label{position:absolute;top:-9px;left:14px;padding:0 8px;background:#0a4a52;border-radius:99px;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light)}
.held-shelf.empty .shelf-label{font-weight:600;letter-spacing:.04em;text-transform:none;color:#8fb3b3;top:50%;left:50%;transform:translate(-50%,-50%);background:transparent;white-space:nowrap}
.free-row{display:flex;justify-content:center;gap:inherit;min-height:88px;align-items:center}
.held-shelf .die.held{transform:rotate(var(--rest,0deg))}
.held-shelf .die.held:after{display:none}
.dice-tray.rolling .held-shelf .die{animation:none}
@media(max-width:700px){
  .dice-tray{padding:14px 0 6px;gap:12px;min-height:0}
  .held-shelf{min-height:72px;padding:9px 6px 6px;gap:8px}
  .free-row{min-height:62px;gap:8px}
  .shelf-label{font-size:.56rem;top:-8px;left:10px}
}

/* ===== Telefono: il tavolo di gioco sta in una sola schermata ===== */
@media(max-width:700px){
  /* Il nome del gioco è già nella barra in basso: via il titolone. */
  .game-view .section-heading{display:none}
  .game-view{padding:8px 10px 16px}
  .topbar{padding:6px 12px}
  .brand-mark{width:30px;height:30px}
  /* Modalità e livello CPU su una sola riga. */
  .play-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:5px;margin-bottom:8px;border-radius:12px}
  .play-controls .mode-choice{padding:3px;gap:3px}
  .play-controls .mode{padding:7px 3px;font-size:.64rem;line-height:1.15}
  .play-controls label{margin:0;font-size:0;gap:0}
  .play-controls .difficulty{font-size:.66rem;padding:7px 24px 7px 8px}
  .play-controls .variant-choice,.play-controls .table-presence{grid-column:1/-1}
  /* Dadi 13 compatto. */
  .yahtzee-layout{gap:8px}
  .dice-table{padding:8px 10px;border-width:5px}
  .table-meta{font-size:.72rem;padding:2px 2px 0}
  .dice-tray{padding:10px 0 0;gap:8px}
  .held-shelf{min-height:62px;padding:7px 6px 5px}
  .free-row{min-height:56px}
  .die{width:clamp(44px,12.8vw,52px);padding:7px}
  .roll-actions{padding-top:6px}
  #rollBtn{height:40px}
  .score-head{padding:6px 12px;align-items:center}
  .score-head .eyebrow{display:none}
  .score-head h2{font-size:1rem;margin:0}
  .score-head strong{height:34px;min-width:50px;font-size:1.3rem}
  .rival-last{padding:4px 12px}
  .score-list{padding:2px 6px}
  .score-row:has(.group){min-height:18px}
  .score-row .group{padding-top:2px}
  .score-row button{min-height:29px;padding:1px 4px}
  .score-footer{min-height:26px;font-size:.66rem}
}
@media(max-width:700px){
  /* Backgammon: la tavola si adatta all'altezza disponibile, sopra la barra dei giochi. */
  .board{height:min(96vw,calc(100svh - 400px));min-height:290px}
  .board-shell{padding:8px}
  .board-toolbar{padding:2px 2px 6px}
  .board-actions{padding:0 2px 6px}
  .board-actions p{min-height:2.5em;font-size:.8rem;margin-bottom:4px}
  .board-actions .secondary-button,.board-actions .primary-button.compact{height:40px;padding-top:0;padding-bottom:0}
}
@media(max-width:700px){
  /* Barra dei giochi più bassa. */
  .tab-bar{padding:4px 6px calc(4px + env(safe-area-inset-bottom));gap:2px}
  .tab{flex-direction:row;justify-content:center;gap:5px;padding:5px 2px;border-radius:10px;font-size:.62rem}
  .tab img{width:24px;height:24px;padding:3px;border-radius:7px}
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(64px + env(safe-area-inset-bottom))}
  .board{height:min(96vw,calc(100svh - 376px))}
  .board-dice .roll-hint{display:none}
}
@media(max-width:380px){.tab span{display:none}.tab img{width:28px;height:28px}}
@media(max-width:700px){.tab{white-space:nowrap}}
@media(max-width:700px){
  /* Barra dei giochi: solo icone, più grandi. */
  .tab span{display:none}
  .tab{padding:5px 0;border-radius:12px}
  .tab img{width:38px;height:38px;padding:5px;border-radius:10px}
  .tab-bar{padding:5px 10px calc(5px + env(safe-area-inset-bottom))}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(72px + env(safe-area-inset-bottom))}
}
.mode .label-short{display:none}
@media(max-width:700px){.mode .label-full{display:none}.mode .label-short{display:inline}}

/* ===== Dadi 13 sul telefono: colonne della scheda più larghe, testo più grande ===== */
@media(max-width:700px){
  .score-list{gap:0 12px;padding:2px 4px}
  .score-row{padding:0}
  .score-row button{font-size:1rem;padding:1px 6px;gap:6px}
  .score-row .potential{font-size:1.05rem;min-width:28px}
  .score-row .locked{font-size:1.1rem;min-width:28px}
  .score-list.versus .score-row{grid-template-columns:1fr 28px;gap:2px}
  .rival-score{font-size:.9rem}
  .score-row .group{font-size:.66rem;padding-left:6px}
  .rival-score,.rival-head{justify-self:end;padding-left:0;padding-right:4px}
}

/* ===== Dama italiana e Scacchi ===== */
.dama-card{background:linear-gradient(135deg,rgba(112,38,38,.97),rgba(40,16,18,.99))}
.chess-card{background:linear-gradient(135deg,rgba(62,62,70,.97),rgba(20,21,26,.99))}
#dama.game-view,#chess.game-view{max-width:900px}
.grid-game-layout{display:grid;place-items:center}
.grid-game-shell{width:min(100%,640px);padding:18px clamp(12px,3vw,26px) 14px;border-radius:26px;border:1px solid rgba(240,207,139,.32);box-shadow:0 40px 95px rgba(0,0,0,.4)}
.dama-shell{background:linear-gradient(145deg,#6d3a24,#2e1a12)}
.chess-shell{background:linear-gradient(145deg,#3b3f46,#16181c)}
.grid-players{display:flex}
.grid-player{flex:1;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;opacity:.55;transition:.2s}
.grid-player.active{opacity:1;background:rgba(255,255,255,.08);box-shadow:inset 3px 0 0 var(--gold-light)}
.grid-player small,.grid-player b{display:block}
.grid-player small{font-size:.56rem;letter-spacing:.12em;color:#d3b58c}
.grid-player b{font-size:.9rem}
.grid-player em{margin-left:auto;font-style:normal;font-size:.78rem;color:#e5d5bd;display:flex;gap:4px;align-items:baseline}
.grid-player em b{display:inline;font-size:1rem;color:var(--cream)}
.grid-player>.dm-piece{width:28px;height:28px;flex:none}
.grid-player>.ch-piece{font-size:2rem;line-height:1;flex:none}
.grid-player .taken{font-family:"Apple Symbols","Segoe UI Symbol","DejaVu Sans",serif;font-size:1.05rem;letter-spacing:-.05em;color:#e8dcc8;max-width:62%;overflow:hidden;white-space:nowrap}
.grid-board{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;aspect-ratio:1;margin:8px 0;border-radius:8px;overflow:hidden;border:6px solid rgba(0,0,0,.35);box-shadow:0 18px 30px rgba(0,0,0,.35);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.grid-board .sq{position:relative;min-width:0;min-height:0;overflow:hidden;border:0;padding:0;margin:0;display:grid;place-items:center;cursor:pointer;aspect-ratio:1;-webkit-tap-highlight-color:transparent}
.grid-board .sq:disabled{cursor:default}
.dama-board .sq.light{background:#ecdcbc}
.dama-board .sq.dark{background:#3f7a52}
.chess-board .sq.light{background:#eedcb8}
.chess-board .sq.dark{background:#a97c52}
.grid-board .sq.last{box-shadow:inset 0 0 0 100vmax rgba(255,214,102,.28)}
.grid-board .sq.selected{box-shadow:inset 0 0 0 100vmax rgba(255,214,102,.5)}
.grid-board .sq.target:after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(20,30,25,.38);pointer-events:none}
.grid-board .sq.target.capture:after{width:88%;height:88%;background:transparent;border:4px solid rgba(20,30,25,.42);box-sizing:border-box}
.dama-board .sq.target:after{background:rgba(255,236,170,.75);box-shadow:0 0 12px rgba(255,220,120,.9)}
.dama-board .sq.target.capture:after{background:transparent;border-color:rgba(255,236,170,.9)}
.grid-board .sq.check{background:radial-gradient(circle,#ff6b5a 0,#d9432f 45%,transparent 80%),#a97c52}
.dama-board .sq.movable .dm-piece{box-shadow:0 0 0 3px rgba(255,220,120,.55),0 4px 7px rgba(0,0,0,.45),inset 0 -4px 6px rgba(0,0,0,.25)}
/* Pedine della dama */
.dm-piece{display:block;width:78%;height:78%;border-radius:50%;pointer-events:none;box-shadow:0 4px 7px rgba(0,0,0,.45),inset 0 -4px 6px rgba(0,0,0,.25);position:relative}
.dm-piece.w{background:radial-gradient(circle at 35% 30%,#fffdf6,#e9dcc4 60%,#bfae8e)}
.dm-piece.b{background:radial-gradient(circle at 35% 30%,#5b5f63,#24272a 60%,#0d0f10)}
.dm-piece:before{content:"";position:absolute;inset:18%;border-radius:50%;border:2px solid rgba(0,0,0,.14)}
.dm-piece.b:before{border-color:rgba(255,255,255,.12)}
.dm-piece.king:after{content:"♛\FE0E";position:absolute;inset:0;display:grid;place-items:center;font:700 min(5.2vw,30px)/1 "Apple Symbols","Segoe UI Symbol",serif;color:#c8912f;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.dm-piece.b.king:after{color:#f0cf8b}
/* Pezzi degli scacchi */
.ch-piece{font-family:"Apple Symbols","Segoe UI Symbol","DejaVu Sans",serif;line-height:1;pointer-events:none}
.chess-board .ch-piece{font-size:min(10.4vw,62px);transform:translateY(-3%)}
.ch-piece.w{color:#fffaf0;text-shadow:0 0 1px #1d1d1d,1px 1px 0 #1d1d1d,-1px -1px 0 #1d1d1d,1px -1px 0 #1d1d1d,-1px 1px 0 #1d1d1d,0 3px 5px rgba(0,0,0,.4)}
.ch-piece.b{color:#1d1f22;text-shadow:0 0 1px #fff4,0 3px 5px rgba(0,0,0,.35)}
.chess-board .sq.own{cursor:pointer}
.chess-board small{position:absolute;font:700 .58rem/1 inherit;opacity:.7;pointer-events:none}
.chess-board small.rank{left:3px;top:3px}
.chess-board small.file{right:3px;bottom:2px}
.chess-board .sq.light small{color:#a97c52}
.chess-board .sq.dark small{color:#eedcb8}
.ch-promo{position:absolute;inset:0;z-index:5;display:grid;place-content:center;gap:10px;background:rgba(10,14,16,.72);color:var(--cream);font-weight:700;text-align:center}
.ch-promo div{display:flex;gap:8px}
.ch-promo button{width:min(17vw,84px);aspect-ratio:1;border-radius:14px;border:2px solid var(--gold-light);background:#eedcb8;cursor:pointer;display:grid;place-items:center}
.ch-promo .ch-piece{font-size:min(12vw,58px)}
.grid-status{margin:4px 0 0;min-height:1.3em;text-align:center;color:#f0e4cf;font-size:.86rem}
.grid-actions{display:flex;justify-content:space-between;align-items:center;padding-top:6px}
.grid-actions .text-button:disabled{opacity:.35;cursor:default}
.turn-pill i.white-turn{background:#fffdf6}
.turn-pill i.black-turn{background:#24272a;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
@media(max-width:700px){
  .tab-bar{grid-template-columns:repeat(6,1fr)}
  .tab img{width:34px;height:34px}
  .grid-game-shell{padding:8px 6px 8px;border-radius:16px}
  .grid-board{margin:4px 0;border-width:4px;border-radius:6px}
  .grid-player{padding:4px 8px}
  .grid-player b{font-size:.84rem}
  .grid-status{font-size:.8rem}
  .play-controls.two-modes .mode-choice{grid-template-columns:repeat(2,1fr)}
}

/* ===== Dama cinese: griglia esagonale regolare, tavola a tutta larghezza e buche più grandi ===== */
.cc-board{width:100%;max-width:640px;aspect-ratio:14.5/16.356;margin:6px auto 0}
.cc-board:before{inset:0;clip-path:polygon(50.00% 0.31%,66.18% 25.15%,98.55% 25.15%,82.36% 50.00%,98.55% 74.85%,66.18% 74.85%,50.00% 99.69%,33.82% 74.85%,1.45% 74.85%,17.64% 50.00%,1.45% 25.15%,33.82% 25.15%)}
.cc-hole{left:calc((var(--x) + 7.25)/14.5*100%);top:calc((var(--y)*0.8660 + 1.25)/16.356*100%);width:6.34%;height:auto;aspect-ratio:1;min-width:0;min-height:0}
/* L'area da toccare copre tutto lo spazio attorno alla buca, non solo il cerchio. */
.cc-hole:after{content:"";position:absolute;inset:-9%;border-radius:50%}
.cc-hole.selected{outline-width:3px;outline-offset:2px}
@media(max-width:700px){
  #chinese.game-view{padding-left:4px;padding-right:4px}
  .chinese-shell{padding:8px 4px 10px;border-radius:18px}
  .cc-player-row{gap:4px 8px}
  .cc-player{padding:5px 8px}
  .cc-marble{width:22px;height:22px}
  .cc-player-row p{font-size:.8rem;min-height:2.4em;display:grid;place-items:center}
  .cc-hole{border-width:1.5px}
  .cc-actions{padding:6px 10px 0}
}

/* ===== Menu (☰) in alto a destra ===== */
.menu-button{display:grid;place-content:center;gap:4px;padding:0}
.menu-button i{display:block;width:17px;height:2px;border-radius:2px;background:currentColor}
.menu-button:hover{border-color:rgba(240,207,139,.55);background:rgba(215,168,92,.09)}
dialog.menu-sheet{margin:0 0 0 auto;width:min(440px,100%);height:100%;max-height:none;max-width:none;border-radius:0;border-width:0 0 0 1px;padding:calc(22px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
dialog.menu-sheet[open]{animation:menu-in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes menu-in{from{transform:translateX(40px);opacity:0}}
.menu-sheet h2{margin:6px 0 10px}
.menu-sheet h3{margin:22px 0 8px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light)}
.menu-sheet .dialog-close{top:calc(12px + env(safe-area-inset-top))}
.menu-rules details{border:1px solid rgba(240,207,139,.18);border-radius:12px;background:rgba(255,255,255,.03);margin-bottom:8px}
.menu-rules details[open]{background:rgba(215,168,92,.07);border-color:rgba(240,207,139,.4)}
.menu-rules summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;font-weight:700;list-style:none}
.menu-rules summary::-webkit-details-marker{display:none}
.menu-rules summary:after{content:"+";margin-left:auto;font-size:1.2rem;color:var(--gold-light)}
.menu-rules details[open] summary:after{content:"–"}
.menu-rules summary img{width:28px;height:28px;padding:3px;border-radius:8px;background:linear-gradient(145deg,#f6efe1,#d8cbb2)}
.menu-rules details>*:not(summary){margin:0 14px 12px}
.menu-rules ul{padding-left:18px}
.menu-list{margin:0;padding-left:18px}
.menu-list a{color:var(--gold-light)}
.menu-home{display:block;margin:24px 0 0}
.menu-copy{margin:14px 0 0;font-size:.75rem!important;color:#6f8789!important}
@media(max-width:700px){.cc-player-row p{min-height:2.8em}}
.menu-sheet h2:focus{outline:none}
/* Sei giochi nel selettore in alto: una sola riga, scorrevole se serve. */
.game-switcher{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
.game-switcher::-webkit-scrollbar{display:none}
.switch{white-space:nowrap;flex:none}
@media(max-width:1180px){.switch{padding:8px 11px;font-size:.78rem}}
/* Safari (iOS 26) colora la barra di stato e la barra degli indirizzi con il colore di sfondo della pagina:
   senza un colore pieno (solo gradiente) usa il bianco. */
html,body{background-color:#061319}
/* App installata sulla Home: la barra in alto scende sotto la barra di stato. */
.topbar{padding-top:env(safe-area-inset-top)}
@media(max-width:700px){.topbar{padding-top:max(12px,env(safe-area-inset-top))}}

/* ===== Home: intestazione sopra, sei giochi in griglia ===== */
.resume-card{display:flex;align-items:center;gap:12px;width:100%;max-width:420px;margin-top:22px;padding:10px 14px 10px 10px;border:1px solid rgba(240,207,139,.4);border-radius:16px;background:linear-gradient(135deg,rgba(215,168,92,.16),rgba(215,168,92,.04));color:var(--cream);text-align:left;cursor:pointer;transition:.2s}
.resume-card:hover{border-color:var(--gold-light);background:rgba(215,168,92,.2)}
.resume-card img{width:42px;height:42px;padding:6px;border-radius:11px;background:linear-gradient(145deg,#fffdf4,#d4c5aa)}
.resume-card small,.resume-card span b{display:block}
.resume-card small{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#c8ae83}
.resume-card span b{font-size:1rem}
.resume-card em{margin-left:auto;font-style:normal;font-weight:700;font-size:.82rem;color:var(--gold-light);white-space:nowrap}
.resume-card em b{margin-left:4px}
@media(min-width:1051px){
  .home-view.active{grid-template-columns:1fr;align-items:start;gap:44px;padding-top:56px}
  .home-intro{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:60px;align-items:end}
  .home-intro .eyebrow{grid-column:1/-1}
  .home-intro h1{margin:14px 0 0;font-size:clamp(3.4rem,5.4vw,5.6rem)}
  .home-intro h1 br{display:none}
  .home-intro p{max-width:520px}
  .resume-card{grid-column:2}
  .game-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
  .game-card{min-height:280px}
}
@media(max-width:700px){
  .home-view{padding:18px 14px 30px}
  .home-view.active{gap:18px}
  .home-intro .eyebrow{font-size:.6rem}
  .home-intro h1{font-size:clamp(2rem,9.6vw,2.6rem);margin:8px 0 8px}
  .home-intro p{font-size:.86rem;line-height:1.5;margin:0}
  .resume-card{margin-top:14px;max-width:none}
  /* Giochi in riquadri compatti, due per riga. */
  .game-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .game-card{min-height:0;padding:14px 12px 12px;border-radius:18px;gap:0}
  .game-card .card-number,.game-card .card-footer,.card-copy em{display:none}
  .game-card .game-symbol{position:static;width:48px;height:48px;border-radius:13px;margin-bottom:12px;transform:rotate(-3deg)}
  .card-copy{margin-top:0}
  .card-copy small{font-size:.55rem;letter-spacing:.1em;margin-bottom:3px}
  .card-copy strong{font-size:1.45rem;line-height:1.05}
  .game-card:after{background:radial-gradient(circle at 90% 0,rgba(240,207,139,.18),transparent 45%)}
}
@media(max-width:700px){
  .game-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left}
  .game-card .card-copy{align-self:stretch}
  .card-copy strong{font-size:1.3rem}
}

/* ===== Blackjack e Scopa ===== */
.blackjack-card{background:linear-gradient(135deg,rgba(18,94,60,.97),rgba(6,38,26,.99))}
.scopa-card{background:linear-gradient(135deg,rgba(150,98,24,.97),rgba(58,34,10,.99))}
#blackjack.game-view,#scopa.game-view{max-width:760px}
/* Carte francesi (blackjack) */
.pc{position:relative;flex:none;display:flex;flex-direction:column;width:70px;height:100px;padding:6px 7px;border-radius:9px;background:linear-gradient(160deg,#fffef9,#ece4d4);color:#1b1f22;box-shadow:0 6px 14px rgba(0,0,0,.35);font-family:Georgia,serif;animation:pc-in .32s cubic-bezier(.2,.8,.2,1)}
.pc b{font-size:1.15rem;line-height:1;display:flex;flex-direction:column;align-items:center;width:max-content}
.pc b small{font-size:.9rem;font-family:"Apple Symbols","Segoe UI Symbol",serif}
.pc i{font-style:normal;font-size:2.3rem;line-height:1;margin:auto;font-family:"Apple Symbols","Segoe UI Symbol",serif}
.pc.red{color:#c0392b}
.pc.back{background:repeating-linear-gradient(45deg,#1f4f8a 0 5px,#2a63a8 5px 10px);border:5px solid #f5f0e4}
.pc.ghost{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);animation:none}
@keyframes pc-in{from{transform:translateY(-26px) rotate(-6deg);opacity:0}}
.bj-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(2,17,22,.45)}
.bj-bank{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#c3d0cf}
.bj-bank i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#f6d27a 0 35%,#c9443a 36% 60%,#f5f0e4 61% 70%,#c9443a 71%);box-shadow:0 2px 4px rgba(0,0,0,.4)}
.bj-bank b{font-size:1.15rem;color:var(--gold-light)}
.bj-hint-toggle{display:flex;align-items:center;gap:7px;font-size:.8rem;color:#c3d0cf;cursor:pointer}
.bj-hint-toggle input{width:18px;height:18px;accent-color:var(--gold)}
.bj-table{position:relative;overflow:hidden;border-radius:26px;padding:22px 16px 18px;background:radial-gradient(ellipse at 50% 30%,#1c7a4f,#0e4a30 60%,#083121);border:8px solid #5b3a22;box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 0 60px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;gap:12px;min-height:560px}
.bj-shoe{position:absolute;right:14px;top:12px;display:flex;align-items:center;gap:6px;color:#e5f1ea;font-size:.8rem}
.bj-shoe span{width:20px;height:26px;border-radius:4px;background:repeating-linear-gradient(45deg,#1f4f8a 0 3px,#2a63a8 3px 6px);border:2px solid #f5f0e4;transform:rotate(-8deg)}
.bj-dealer,.bj-hand{display:flex;flex-direction:column;align-items:center;gap:8px}
.bj-cards{display:flex;justify-content:center;min-height:100px}
.bj-cards .pc+.pc{margin-left:-30px}
.bj-total{min-width:44px;padding:4px 12px;border-radius:99px;background:linear-gradient(#2e7bd6,#1b5bb0);color:#fff;font-weight:800;text-align:center;box-shadow:0 3px 0 #123f7c}
.bj-ribbon{text-align:center;color:rgba(246,226,170,.85);padding:6px 18px;border-top:1px solid rgba(246,226,170,.3);border-bottom:1px solid rgba(246,226,170,.3)}
.bj-ribbon span{display:block;font:italic 700 .95rem Georgia,serif;letter-spacing:.08em}
.bj-ribbon small{font-size:.66rem;opacity:.85}
.bj-hands{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;min-height:150px}
.bj-hand{padding:8px;border-radius:16px;transition:.2s}
.bj-hand.active{background:rgba(255,255,255,.09);box-shadow:0 0 0 2px var(--gold-light)}
.bj-hand-info{display:flex;align-items:center;gap:8px}
.bj-bet{padding:3px 10px;border-radius:99px;background:rgba(0,0,0,.3);color:var(--gold-light);font-weight:700;font-size:.8rem}
.bj-result{font-size:.78rem;padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.35)}
.bj-hand.res-win .bj-result{background:#2f9e5b;color:#fff}.bj-hand.res-lose .bj-result{background:#a8473d;color:#fff}.bj-hand.res-push .bj-result{background:#6b7c80;color:#fff}
.bj-status{margin:0;min-height:1.3em;color:#f3ecd9;font-size:.9rem;text-align:center}
.bj-controls{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.bj-bet-line{display:flex;align-items:baseline;gap:10px;color:#e5f1ea}
.bj-bet-line b{font-size:1.4rem;color:var(--gold-light)}
.bj-chips{display:flex;gap:12px}
.bj-chip{width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-weight:800;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 5px 0 rgba(0,0,0,.35),inset 0 0 0 5px rgba(255,255,255,.85),inset 0 0 0 9px currentColor;transition:transform .12s}
.bj-chip:active{transform:translateY(3px)}
.bj-chip:disabled{opacity:.35;cursor:not-allowed}
.bj-chip.c10{background:#2e6fc2;color:#fff}.bj-chip.c25{background:#2f9e5b}.bj-chip.c100{background:#1d1f22}.bj-chip.c500{background:#8e3fb0}
.bj-controls .primary-button,.bj-controls .secondary-button{min-width:220px}
.bj-actions{flex-direction:row;justify-content:center;gap:10px}
.bj-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:78px;height:78px;border-radius:50%;border:4px solid #e3b24a;color:#fff;font:800 .72rem inherit;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.35);transition:.15s}
.bj-action span{font-size:1.25rem;line-height:1}
.bj-action.split{background:#8e3fb0}.bj-action.stand{background:#1b5bb0}.bj-action.hit{background:#2f9e5b}.bj-action.double{background:#d38a1c}
.bj-action:disabled{opacity:.35;filter:grayscale(.6);cursor:not-allowed}
.bj-action.advised:not(:disabled){box-shadow:0 0 0 4px #fff3c4,0 0 22px rgba(255,230,140,.9);transform:translateY(-3px)}
/* Carte napoletane (scopa) */
.sc-table{position:relative;overflow:hidden;border-radius:26px;padding:12px 12px 14px;background:radial-gradient(ellipse at 50% 45%,#b07a3a,#7a4a1e 60%,#4b2b10);border:1px solid rgba(240,207,139,.35);box-shadow:0 30px 70px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:10px}
.sc-player{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-radius:12px;opacity:.6;transition:.2s}
.sc-player.active{opacity:1;background:rgba(0,0,0,.2);box-shadow:inset 3px 0 0 var(--gold-light)}
.sc-player small,.sc-player b{display:block}
.sc-player small{font-size:.7rem;color:#f3dcb4}
.sc-player strong{font:700 1.7rem Georgia,serif;color:var(--gold-light)}
.sc-hand{display:flex;justify-content:center;gap:10px;min-height:60px}
.sc-hand.opp{gap:6px}
.sc-hand.opp .sc-card{width:44px;height:66px}
.sc-center{display:flex;gap:12px;align-items:flex-start;min-height:210px;padding:12px;border-radius:18px;background:rgba(0,0,0,.14);box-shadow:inset 0 0 30px rgba(0,0,0,.25)}
.sc-deck{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:#f3dcb4;font-size:.8rem}
.sc-deck .sc-card{width:46px;height:70px}
.sc-table-cards{flex:1;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;justify-content:center}
.sc-empty{margin:auto;color:rgba(255,240,210,.55);font-style:italic}
.sc-card{position:relative;flex:none;width:66px;height:100px;padding:0;border:0;border-radius:9px;background:linear-gradient(160deg,#fffdf6,#efe3c9);box-shadow:0 5px 12px rgba(0,0,0,.35),inset 0 0 0 3px #fff,inset 0 0 0 4px rgba(120,80,30,.35);color:#2a1d10;cursor:pointer;font-family:Georgia,serif;transition:transform .18s,box-shadow .18s}
.sc-card b{position:absolute;left:7px;top:5px;font-size:1.1rem;line-height:1}
.sc-card b.flip{left:auto;top:auto;right:7px;bottom:5px;transform:rotate(180deg)}
.sc-card .sc-suit{position:absolute;inset:22% 16% 24%;background:center/contain no-repeat}
.sc-card em{position:absolute;left:0;right:0;bottom:7px;font:italic 700 .6rem Georgia,serif;text-align:center;color:#6e3b10}
.sc-card.back{background:repeating-linear-gradient(45deg,#8a2f26 0 5px,#6e241d 5px 10px);box-shadow:0 4px 10px rgba(0,0,0,.35),inset 0 0 0 3px #f3e6cc;cursor:default}
.sc-card.selected{transform:translateY(-14px);box-shadow:0 0 0 3px var(--gold-light),0 16px 22px rgba(0,0,0,.4)}
.sc-card.capturable{box-shadow:0 0 0 3px #ffe58a,0 0 18px rgba(255,220,120,.9)}
.sc-card.just-played{animation:pc-in .35s cubic-bezier(.2,.8,.2,1)}
.sc-hand.mine .sc-card{width:80px;height:122px}
.sc-hand.mine .sc-card b{font-size:1.35rem}
.sc-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:0}
.sc-actions:empty{display:none}
.sc-status{margin:0;text-align:center;color:#fff3dc;font-size:.86rem;min-height:2.5em;display:grid;place-items:center}
.sc-foot{display:flex;justify-content:space-between;align-items:center;padding:0 8px;color:#f3dcb4;font-size:.76rem}
.sc-cover{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(40,22,8,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--cream);text-align:center}
.sc-cover p{margin:0;color:#e9d3b0}
.sc-cover b{font:italic 700 2rem Georgia,serif}
.sc-summary{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:.9rem}
.sc-summary th,.sc-summary td{padding:7px 8px;border-bottom:1px solid rgba(240,207,139,.14);text-align:center}
.sc-summary tbody th{text-align:left;font-weight:600;color:#c9d6d6}
.sc-summary td.win{color:var(--gold-light);font-weight:800}
.sc-summary tr.round td,.sc-summary tr.total td{font-weight:800}
.sc-summary tr.total td{font-size:1.2rem;color:var(--gold-light)}
@media(max-width:700px){
  #blackjack.game-view,#scopa.game-view{padding-left:8px;padding-right:8px}
  .bj-table{border-width:5px;border-radius:18px;padding:16px 8px 14px;min-height:0;gap:10px}
  .pc{width:62px;height:90px}
  .bj-cards .pc+.pc{margin-left:-28px}
  .bj-ribbon span{font-size:.8rem}
  .bj-hands{gap:6px;min-height:130px}
  .bj-hands .bj-hand{padding:5px}
  .bj-chip{width:56px;height:56px}
  .bj-action{width:72px;height:72px;font-size:.66rem}
  .sc-table{padding:8px 6px 10px;border-radius:18px;gap:8px}
  .sc-center{min-height:190px;padding:8px;gap:8px}
  .sc-card{width:56px;height:86px}
  .sc-card b{font-size:.95rem}
  .sc-hand.mine .sc-card{width:84px;height:128px}
  .sc-hand.opp .sc-card{width:38px;height:58px}
  .tab-bar{grid-template-columns:repeat(8,1fr);padding-left:4px;padding-right:4px}
  .tab img{width:32px;height:32px;padding:4px}
  .game-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1280px){.game-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}.game-card .card-copy strong{font-size:2.4rem}}
@media(min-width:1051px) and (max-width:1279px){.game-card{padding:20px 18px}.game-card .card-copy small{margin-right:62px}.game-card .card-copy strong{font-size:1.75rem}.game-card .card-copy em{font-size:.8rem}}
.sc-card.s-D .sc-suit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='26' fill='%23e3a92b' stroke='%238a5a12' stroke-width='3'/%3E%3Ccircle cx='30' cy='30' r='17' fill='%23f6d27a' stroke='%23b5452f' stroke-width='3'/%3E%3Cpath fill='%23b5452f' d='M30 19l3.5 7.5 8 .7-6 5.3 1.8 8L30 36.3l-7.3 4.2 1.8-8-6-5.3 8-.7z'/%3E%3C/svg%3E")}
.sc-card.s-C .sc-suit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%23c9443a' stroke='%236e1f1a' stroke-width='2.5' d='M12 10h36c0 14-6 22-14 24v8c4 1 8 3 10 6H16c2-3 6-5 10-6v-8c-8-2-14-10-14-24z'/%3E%3Cpath fill='%23f0c055' d='M15 13h30c-1 6-3 10-6 13H21c-3-3-5-7-6-13z'/%3E%3Crect x='14' y='48' width='32' height='5' rx='2' fill='%23e3a92b' stroke='%236e1f1a' stroke-width='2'/%3E%3C/svg%3E")}
.sc-card.s-S .sc-suit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%233f6fb5' stroke='%231d3563' stroke-width='2.5' d='M30 3l5 8v31h-10V11z'/%3E%3Crect x='15' y='41' width='30' height='5' rx='2.5' fill='%23e3a92b' stroke='%237a5314' stroke-width='2'/%3E%3Crect x='27' y='46' width='6' height='8' fill='%23b5452f' stroke='%236e1f1a' stroke-width='1.5'/%3E%3Ccircle cx='30' cy='56' r='3' fill='%23e3a92b'/%3E%3C/svg%3E")}
.sc-card.s-B .sc-suit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%233f8a4e' stroke='%231e4a27' stroke-width='2.5' d='M24 56l-2-26c-4-2-6-6-5-11 1-6 6-13 13-15 7 2 12 9 13 15 1 5-1 9-5 11l-2 26z'/%3E%3Ccircle cx='25' cy='18' r='3' fill='%23c9443a'/%3E%3Ccircle cx='36' cy='26' r='3' fill='%23c9443a'/%3E%3Ccircle cx='28' cy='38' r='2.6' fill='%23c9443a'/%3E%3C/svg%3E")}
.bj-controls .primary-button,.bj-controls .secondary-button{justify-content:center;text-align:center}
.sc-card em{bottom:auto;top:62%;font-size:.58rem}
.sc-card .sc-suit{inset:20% 18% 34%}
@media(max-width:700px){.sc-center{min-height:120px}.sc-actions .primary-button,.sc-actions .secondary-button{padding:10px 16px;font-size:.85rem}}
/* ===== Audio ===== */
.sound-button{display:grid;place-items:center;padding:0}
.sound-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sound-button .spk{fill:currentColor}
.sound-button .off{display:none}
.sound-button.muted{color:#8aa0a2}
.sound-button.muted .on{display:none}
.sound-button.muted .off{display:inline}
.header-actions{gap:8px}
.menu-switches{display:grid;gap:8px}
.switch-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(240,207,139,.18);border-radius:12px;background:rgba(255,255,255,.03);cursor:pointer}
.switch-row span{flex:1}
.switch-row b,.switch-row small{display:block}
.switch-row small{color:#9fb2b3;font-size:.74rem;margin-top:2px}
.switch-row input{position:absolute;opacity:0;pointer-events:none}
.switch-row i{flex:none;position:relative;width:46px;height:28px;border-radius:99px;background:#34494d;transition:.2s}
.switch-row i:after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:.2s}
.switch-row input:checked+i{background:var(--gold)}
.switch-row input:checked+i:after{transform:translateX(18px)}
.switch-row input:focus-visible+i{outline:2px solid var(--gold-light);outline-offset:2px}
@media(max-width:700px){.header-actions{gap:6px}.header-actions .icon-button{width:36px;height:36px}}
/* Blackjack: il tavolo occupa tutta l'altezza fino alla barra dei giochi. */
@media(max-width:700px){
  #blackjack.game-view{padding-top:8px;padding-bottom:0}
  .bj-bar{margin-bottom:8px;padding:6px 10px}
  .bj-table{min-height:calc(100svh - var(--bj-offset,212px));justify-content:space-between}
  .bj-hands{flex:1;align-items:center}
  .bj-dealer{margin-top:8px}
}
@media(max-width:700px){
  /* Nei giochi il piè di pagina (© e privacy, già nel menu) non ruba spazio. */
  body:has(.game-view.active) .site-footer{display:none}
  .bj-table{min-height:calc(100svh - 184px - env(safe-area-inset-bottom))}
}

/* ===== Mazzi della Scopa (semi disegnati, colori e dorso per ogni mazzo) ===== */
.deck-napoletane{--f1:#c9443a;--f2:#2f6db3;--f3:#e3a92b}
.deck-napoletane .sc-card.back{background:#fff url(cards/napoletane/back.webp) center/cover;box-shadow:0 4px 10px rgba(0,0,0,.35),0 0 0 1px rgba(80,60,30,.25)}
.deck-bergamasche .sc-card.back{background:repeating-linear-gradient(45deg,#8a2f26 0 5px,#6e241d 5px 10px)}
.deck-napoletane .s-D .pip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Ccircle cx='20' cy='30' r='17' fill='%23e3a92b' stroke='%238a5a12' stroke-width='2'/%3E%3Ccircle cx='20' cy='30' r='11' fill='%23f6d27a' stroke='%23b5452f' stroke-width='2'/%3E%3Cpath fill='%23b5452f' d='M20 22l2.4 5 5.4.5-4 3.6 1.2 5.4-5-2.9-5 2.9 1.2-5.4-4-3.6 5.4-.5z'/%3E%3C/svg%3E")}
.deck-napoletane .s-C .pip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%23c9443a' stroke='%236e1f1a' stroke-width='1.6' d='M8 12h24c0 10-4 15-9.5 16.5V36c3 .7 5.5 2 7 4.5H10.5c1.5-2.5 4-3.8 7-4.5v-7.5C12 27 8 22 8 12z'/%3E%3Cpath fill='%23f0c055' d='M10.5 14h19c-.8 4-2.2 7-4.5 9h-10c-2.3-2-3.7-5-4.5-9z'/%3E%3Crect x='9.5' y='40.5' width='21' height='4' rx='1.6' fill='%23e3a92b' stroke='%236e1f1a' stroke-width='1.2'/%3E%3C/svg%3E")}
.deck-napoletane .s-S .pip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%233f6fb5' stroke='%231d3563' stroke-width='1.6' d='M20 3l3.4 5.5V41h-6.8V8.5z'/%3E%3Crect x='10' y='40' width='20' height='4' rx='2' fill='%23e3a92b' stroke='%237a5314' stroke-width='1.2'/%3E%3Crect x='18' y='44' width='4' height='8' fill='%23b5452f'/%3E%3Ccircle cx='20' cy='54' r='2.5' fill='%23e3a92b'/%3E%3C/svg%3E")}
.deck-napoletane .s-B .pip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%233f8a4e' stroke='%231e4a27' stroke-width='1.6' d='M16 57l-1.4-22c-3-1.6-4.2-4.6-3.6-8.4C11.8 20 15.6 12 20 6c4.4 6 8.2 14 9 20.6.6 3.8-.6 6.8-3.6 8.4L24 57z'/%3E%3Ccircle cx='17' cy='20' r='2.2' fill='%23c9443a'/%3E%3Ccircle cx='23.5' cy='27' r='2.2' fill='%23c9443a'/%3E%3Ccircle cx='19' cy='37' r='2' fill='%23c9443a'/%3E%3Ccircle cx='21' cy='47' r='1.8' fill='%23c9443a'/%3E%3C/svg%3E")}
.deck-trevisane{--f1:#2d5fa8;--f2:#c9443a;--f3:#f1c24a}
.deck-trevisane .sc-card.back{background:repeating-linear-gradient(0deg,#2d5fa8 0 4px,#f3ecdc 4px 8px),#2d5fa8}
.deck-trevisane .s-D .pip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Ccircle cx='20' cy='30' r='17' fill='%23f1c24a' stroke='%236b4a10' stroke-width='2'/%3E%3Ccircle cx='20' cy='30' r='12' fill='%232d5fa8'/%3E%3Cg fill='%23f6efe0'%3E%3Cellipse cx='20' cy='24' rx='2.6' ry='5'/%3E%3Cellipse cx='20' cy='36' rx='2.6' ry='5'/%3E%3Cellipse cx='14' cy='30' rx='5' ry='2.6'/%3E%3Cellipse cx='26' cy='30' rx='5' ry='2.6'/%3E%3C/g%3E%3Ccircle cx='20' cy='30' r='3' fill='%23c9443a'/%3E%3C/svg%3E")}
.deck-trevisane .s-C .pip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%23f1c24a' stroke='%236b4a10' stroke-width='1.6' d='M11 8h18c0 12-3 17-7 19v10c3 .8 5 2 6 4H12c1-2 3-3.2 6-4V27c-4-2-7-7-7-19z'/%3E%3Crect x='11' y='15' width='18' height='4' fill='%232d5fa8'/%3E%3Crect x='11' y='41' width='18' height='4' rx='1.5' fill='%232d5fa8'/%3E%3C/svg%3E")}
.deck-trevisane .s-S .pip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%23dfe6ef' stroke='%232d5fa8' stroke-width='1.8' d='M20 2l2.4 4v37h-4.8V6z'/%3E%3Cpath fill='%23f1c24a' stroke='%236b4a10' stroke-width='1.2' d='M9 42h22l-3 4H12z'/%3E%3Crect x='18.3' y='46' width='3.4' height='8' fill='%232d5fa8'/%3E%3Ccircle cx='20' cy='56' r='2.6' fill='%23f1c24a'/%3E%3C/svg%3E")}
.deck-trevisane .s-B .pip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Crect x='17.5' y='4' width='5' height='52' rx='2.5' fill='%239a6a34' stroke='%234d3214' stroke-width='1.4'/%3E%3Cpath fill='%233f8a4e' d='M22 16c6-4 9-3 11-1-3 3-6 4-11 3zM18 30c-6-4-9-3-11-1 3 3 6 4 11 3zM22 42c6-4 9-3 11-1-3 3-6 4-11 3z'/%3E%3C/svg%3E")}
.deck-piacentine{--f1:#3a78c9;--f2:#c9443a;--f3:#e8b73a}
.deck-piacentine .sc-card.back{background:repeating-linear-gradient(45deg,#b83a30 0 4px,transparent 4px 10px),repeating-linear-gradient(-45deg,#b83a30 0 4px,#f3e6cc 4px 10px)}
.deck-piacentine .s-D .pip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Ccircle cx='20' cy='30' r='17' fill='%23e8b73a' stroke='%238a2f26' stroke-width='2.2'/%3E%3Cg fill='%23c9443a'%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%280 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%2845 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%2890 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%28135 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%28180 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%28225 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%28270 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%28315 20 30%29'/%3E%3C/g%3E%3Ccircle cx='20' cy='30' r='4' fill='%23f6e2a0'/%3E%3C/svg%3E")}
.deck-piacentine .s-C .pip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%23c9443a' stroke='%235a1a14' stroke-width='1.6' d='M9 9c0 11 4 16 9 18v9c-3 .8-5.5 2.2-7 4.5h18c-1.5-2.3-4-3.7-7-4.5v-9c5-2 9-7 9-18z'/%3E%3Cpath fill='%23e8b73a' d='M9.5 9h21v4h-21zM11 40.5h18v4H11z'/%3E%3C/svg%3E")}
.deck-piacentine .s-S .pip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%233a78c9' stroke='%23173a6b' stroke-width='1.6' d='M16 42C10 30 14 14 26 3c-4 12-4 26-2 39z'/%3E%3Cpath fill='%23e8b73a' stroke='%236b4a10' stroke-width='1.2' d='M9 41h22v4H9z'/%3E%3Crect x='18' y='45' width='4' height='9' fill='%23c9443a'/%3E%3C/svg%3E")}
.deck-piacentine .s-B .pip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%23c9443a' stroke='%235a1a14' stroke-width='1.6' d='M15 57l-1-24c-3-2-4-6-2-10 2-5 5-10 8-16 3 6 6 11 8 16 2 4 1 8-2 10l-1 24z'/%3E%3Cpath fill='%233f8a4e' d='M13 24h14v3H13zM14 36h12v3H14z'/%3E%3C/svg%3E")}

.sc-card .pips{position:absolute;inset:17% 9% 7%}
.sc-card .pip{position:absolute;width:var(--w,36%);aspect-ratio:2/3;transform:translate(-50%,-50%);background:center/contain no-repeat;left:var(--x);top:var(--y)}
.sc-card .fig{position:absolute;inset:12% 14% 20%;width:auto;height:auto}
.sc-card .fig svg{width:100%;height:100%;display:block}
.sc-card .fig-pip{position:absolute;right:6%;bottom:15%;width:30%;aspect-ratio:2/3;background:center/contain no-repeat}
.sc-card em{top:auto;bottom:4%;font-size:.5rem}
.sc-hand.mine .sc-card em{font-size:.62rem}
.sc-card b{font-size:.9rem;left:6px;top:4px}
.sc-hand.mine .sc-card b{font-size:1.1rem}
.sc-card b.flip,.sc-card .sc-suit{display:none}
/* Scelta del mazzo nel menu */
.deck-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.deck-option{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid rgba(240,207,139,.2);border-radius:12px;background:rgba(255,255,255,.03);color:var(--cream);cursor:pointer;font:700 .8rem inherit}
.deck-option[aria-pressed="true"]{border-color:var(--gold-light);background:rgba(215,168,92,.14);box-shadow:inset 0 0 0 1px var(--gold-light)}
.deck-option .suits{display:flex;gap:2px}
.deck-option .suits span{width:20px;height:30px;background:center/contain no-repeat}
.deck-option small{font-weight:500;color:#9fb2b3;font-size:.66rem}
/* Mazzi con immagini vere: nel selettore i semi sono ritagliati dalle carte stesse, così l'anteprima corrisponde al mazzo. */
.deck-option.deck-napoletane .suits .s-D{background-image:url(cards/napoletane/seme-D.png)}
.deck-option.deck-napoletane .suits .s-C{background-image:url(cards/napoletane/seme-C.png)}
.deck-option.deck-napoletane .suits .s-S{background-image:url(cards/napoletane/seme-S.png)}
.deck-option.deck-napoletane .suits .s-B{background-image:url(cards/napoletane/seme-B.png)}
.deck-option.deck-trevisane .suits .s-D{background-image:url(cards/trevisane/seme-D.png)}
.deck-option.deck-trevisane .suits .s-C{background-image:url(cards/trevisane/seme-C.png)}
.deck-option.deck-trevisane .suits .s-S{background-image:url(cards/trevisane/seme-S.png)}
.deck-option.deck-trevisane .suits .s-B{background-image:url(cards/trevisane/seme-B.png)}
.deck-option.deck-piacentine .suits .s-D{background-image:url(cards/piacentine/seme-D.png)}
.deck-option.deck-piacentine .suits .s-C{background-image:url(cards/piacentine/seme-C.png)}
.deck-option.deck-piacentine .suits .s-S{background-image:url(cards/piacentine/seme-S.png)}
.deck-option.deck-piacentine .suits .s-B{background-image:url(cards/piacentine/seme-B.png)}
.deck-option.deck-bergamasche .suits .s-D{background-image:url(cards/bergamasche/seme-D.png)}
.deck-option.deck-bergamasche .suits .s-C{background-image:url(cards/bergamasche/seme-C.png)}
.deck-option.deck-bergamasche .suits .s-S{background-image:url(cards/bergamasche/seme-S.png)}
.deck-option.deck-bergamasche .suits .s-B{background-image:url(cards/bergamasche/seme-B.png)}
.deck-option.deck-triestine .suits .s-D{background-image:url(cards/triestine/seme-D.png)}
.deck-option.deck-triestine .suits .s-C{background-image:url(cards/triestine/seme-C.png)}
.deck-option.deck-triestine .suits .s-S{background-image:url(cards/triestine/seme-S.png)}
.deck-option.deck-triestine .suits .s-B{background-image:url(cards/triestine/seme-B.png)}
.deck-option.deck-sarde .suits .s-D{background-image:url(cards/sarde/seme-D.png)}
.deck-option.deck-sarde .suits .s-C{background-image:url(cards/sarde/seme-C.png)}
.deck-option.deck-sarde .suits .s-S{background-image:url(cards/sarde/seme-S.png)}
.deck-option.deck-sarde .suits .s-B{background-image:url(cards/sarde/seme-B.png)}
.deck-napoletane .suits .s-D,.deck-napoletane .fig-pip.s-D{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Ccircle cx='20' cy='30' r='17' fill='%23e3a92b' stroke='%238a5a12' stroke-width='2'/%3E%3Ccircle cx='20' cy='30' r='11' fill='%23f6d27a' stroke='%23b5452f' stroke-width='2'/%3E%3Cpath fill='%23b5452f' d='M20 22l2.4 5 5.4.5-4 3.6 1.2 5.4-5-2.9-5 2.9 1.2-5.4-4-3.6 5.4-.5z'/%3E%3C/svg%3E")}
.deck-napoletane .suits .s-C,.deck-napoletane .fig-pip.s-C{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%23c9443a' stroke='%236e1f1a' stroke-width='1.6' d='M8 12h24c0 10-4 15-9.5 16.5V36c3 .7 5.5 2 7 4.5H10.5c1.5-2.5 4-3.8 7-4.5v-7.5C12 27 8 22 8 12z'/%3E%3Cpath fill='%23f0c055' d='M10.5 14h19c-.8 4-2.2 7-4.5 9h-10c-2.3-2-3.7-5-4.5-9z'/%3E%3Crect x='9.5' y='40.5' width='21' height='4' rx='1.6' fill='%23e3a92b' stroke='%236e1f1a' stroke-width='1.2'/%3E%3C/svg%3E")}
.deck-napoletane .suits .s-S,.deck-napoletane .fig-pip.s-S{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%233f6fb5' stroke='%231d3563' stroke-width='1.6' d='M20 3l3.4 5.5V41h-6.8V8.5z'/%3E%3Crect x='10' y='40' width='20' height='4' rx='2' fill='%23e3a92b' stroke='%237a5314' stroke-width='1.2'/%3E%3Crect x='18' y='44' width='4' height='8' fill='%23b5452f'/%3E%3Ccircle cx='20' cy='54' r='2.5' fill='%23e3a92b'/%3E%3C/svg%3E")}
.deck-napoletane .suits .s-B,.deck-napoletane .fig-pip.s-B{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%233f8a4e' stroke='%231e4a27' stroke-width='1.6' d='M16 57l-1.4-22c-3-1.6-4.2-4.6-3.6-8.4C11.8 20 15.6 12 20 6c4.4 6 8.2 14 9 20.6.6 3.8-.6 6.8-3.6 8.4L24 57z'/%3E%3Ccircle cx='17' cy='20' r='2.2' fill='%23c9443a'/%3E%3Ccircle cx='23.5' cy='27' r='2.2' fill='%23c9443a'/%3E%3Ccircle cx='19' cy='37' r='2' fill='%23c9443a'/%3E%3Ccircle cx='21' cy='47' r='1.8' fill='%23c9443a'/%3E%3C/svg%3E")}
.deck-trevisane .suits .s-D,.deck-trevisane .fig-pip.s-D{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Ccircle cx='20' cy='30' r='17' fill='%23f1c24a' stroke='%236b4a10' stroke-width='2'/%3E%3Ccircle cx='20' cy='30' r='12' fill='%232d5fa8'/%3E%3Cg fill='%23f6efe0'%3E%3Cellipse cx='20' cy='24' rx='2.6' ry='5'/%3E%3Cellipse cx='20' cy='36' rx='2.6' ry='5'/%3E%3Cellipse cx='14' cy='30' rx='5' ry='2.6'/%3E%3Cellipse cx='26' cy='30' rx='5' ry='2.6'/%3E%3C/g%3E%3Ccircle cx='20' cy='30' r='3' fill='%23c9443a'/%3E%3C/svg%3E")}
.deck-trevisane .suits .s-C,.deck-trevisane .fig-pip.s-C{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%23f1c24a' stroke='%236b4a10' stroke-width='1.6' d='M11 8h18c0 12-3 17-7 19v10c3 .8 5 2 6 4H12c1-2 3-3.2 6-4V27c-4-2-7-7-7-19z'/%3E%3Crect x='11' y='15' width='18' height='4' fill='%232d5fa8'/%3E%3Crect x='11' y='41' width='18' height='4' rx='1.5' fill='%232d5fa8'/%3E%3C/svg%3E")}
.deck-trevisane .suits .s-S,.deck-trevisane .fig-pip.s-S{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%23dfe6ef' stroke='%232d5fa8' stroke-width='1.8' d='M20 2l2.4 4v37h-4.8V6z'/%3E%3Cpath fill='%23f1c24a' stroke='%236b4a10' stroke-width='1.2' d='M9 42h22l-3 4H12z'/%3E%3Crect x='18.3' y='46' width='3.4' height='8' fill='%232d5fa8'/%3E%3Ccircle cx='20' cy='56' r='2.6' fill='%23f1c24a'/%3E%3C/svg%3E")}
.deck-trevisane .suits .s-B,.deck-trevisane .fig-pip.s-B{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Crect x='17.5' y='4' width='5' height='52' rx='2.5' fill='%239a6a34' stroke='%234d3214' stroke-width='1.4'/%3E%3Cpath fill='%233f8a4e' d='M22 16c6-4 9-3 11-1-3 3-6 4-11 3zM18 30c-6-4-9-3-11-1 3 3 6 4 11 3zM22 42c6-4 9-3 11-1-3 3-6 4-11 3z'/%3E%3C/svg%3E")}
.deck-piacentine .suits .s-D,.deck-piacentine .fig-pip.s-D{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Ccircle cx='20' cy='30' r='17' fill='%23e8b73a' stroke='%238a2f26' stroke-width='2.2'/%3E%3Cg fill='%23c9443a'%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%280 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%2845 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%2890 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%28135 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%28180 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%28225 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%28270 20 30%29'/%3E%3Cellipse cx='20' cy='19' rx='3' ry='6' transform='rotate%28315 20 30%29'/%3E%3C/g%3E%3Ccircle cx='20' cy='30' r='4' fill='%23f6e2a0'/%3E%3C/svg%3E")}
.deck-piacentine .suits .s-C,.deck-piacentine .fig-pip.s-C{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%23c9443a' stroke='%235a1a14' stroke-width='1.6' d='M9 9c0 11 4 16 9 18v9c-3 .8-5.5 2.2-7 4.5h18c-1.5-2.3-4-3.7-7-4.5v-9c5-2 9-7 9-18z'/%3E%3Cpath fill='%23e8b73a' d='M9.5 9h21v4h-21zM11 40.5h18v4H11z'/%3E%3C/svg%3E")}
.deck-piacentine .suits .s-S,.deck-piacentine .fig-pip.s-S{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%233a78c9' stroke='%23173a6b' stroke-width='1.6' d='M16 42C10 30 14 14 26 3c-4 12-4 26-2 39z'/%3E%3Cpath fill='%23e8b73a' stroke='%236b4a10' stroke-width='1.2' d='M9 41h22v4H9z'/%3E%3Crect x='18' y='45' width='4' height='9' fill='%23c9443a'/%3E%3C/svg%3E")}
.deck-piacentine .suits .s-B,.deck-piacentine .fig-pip.s-B{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath fill='%23c9443a' stroke='%235a1a14' stroke-width='1.6' d='M15 57l-1-24c-3-2-4-6-2-10 2-5 5-10 8-16 3 6 6 11 8 16 2 4 1 8-2 10l-1 24z'/%3E%3Cpath fill='%233f8a4e' d='M13 24h14v3H13zM14 36h12v3H14z'/%3E%3C/svg%3E")}
@media(max-width:700px){.pc{width:74px;height:106px}.pc i{font-size:2.6rem}.bj-cards .pc+.pc{margin-left:-32px}}
.menu-label{margin:0 0 8px;font-weight:700;color:var(--cream)!important}
.sc-card .pips .pip{height:auto!important;min-height:0;border-radius:0!important;background-color:transparent!important;box-shadow:none!important;margin:0}
.sc-card .fig{inset:19% 16% 18%}

/* ===== Burraco nascosto (il codice resta) ===== */
.is-retired{display:none!important}

/* ===== Sudoku ===== */
.sudoku-card{background:linear-gradient(135deg,rgba(40,70,120,.97),rgba(14,26,52,.99))}
#sudoku.game-view{max-width:620px}
.su-controls{display:flex!important;justify-content:space-between;align-items:center}
.su-controls label{font-size:.8rem!important}
.su-shell{padding:14px 12px 16px;border-radius:24px;background:linear-gradient(170deg,#f8f4ea,#ece4d3);color:#1f2a33;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.su-score{text-align:center;font-weight:800;color:#2f62b3;font-size:1.05rem}
.su-score b{color:#2f62b3}
.su-meta{display:flex;justify-content:space-between;color:#6d747a;font-size:.8rem;margin:2px 2px 6px}
.su-meta b{color:#6d747a;font-weight:600}
.su-meta #suLevel{font-weight:700;color:#4d565d}
.su-board{position:relative}
.su-grid{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;border:2.5px solid #33404a;border-radius:6px;overflow:hidden;background:#fff;user-select:none;-webkit-user-select:none}
.su-cell{position:relative;border:0;border-right:1px solid #cfd4d8;border-bottom:1px solid #cfd4d8;background:#fff;color:#2f62b3;font:500 min(7.4vw,34px)/1 -apple-system,"SF Pro Rounded","Helvetica Neue",sans-serif;padding:0;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;transition:background .12s}
.su-cell:nth-child(9n){border-right:0}
.su-cell:nth-child(n+73){border-bottom:0}
.su-cell.br{border-right:2px solid #33404a}
.su-cell.bb{border-bottom:2px solid #33404a}
.su-cell.given{color:#1f2a33}
.su-cell.peer{background:#eef1f4}
.su-cell.same{background:#d6e3f7}
.su-cell.selected{background:#b8d2f8}
.su-cell.wrong{color:#d23b30;background:#fde3e0}
.su-cell.wrong.selected{background:#f9c9c3}
.su-cell .notes{position:absolute;inset:6%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:min(2.6vw,11px);color:#7a848c}
.su-cell .notes i{font-style:normal;display:grid;place-items:center;visibility:hidden}
.su-cell .notes i.on{visibility:visible}
.su-cell .notes i.hl{color:#fff;background:#2f62b3;border-radius:50%}
.su-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(248,244,234,.93);border-radius:6px;text-align:center;padding:20px}
.su-overlay b{font:italic 700 1.8rem Georgia,serif;color:#1f2a33}
.su-overlay p{margin:0;color:#4d565d}
.su-overlay .text-button{color:#2f62b3}
.su-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:14px 0 10px}
.su-tools button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;color:#4d565d;font:600 .74rem inherit;cursor:pointer;padding:6px 2px;border-radius:12px}
.su-tools button:active{background:rgba(47,98,179,.08)}
.su-tools button:disabled{opacity:.35;cursor:default}
.su-tools svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.su-tools em{position:absolute;top:0;left:58%;min-width:20px;padding:1px 6px;border-radius:99px;background:#9aa3aa;color:#fff;font:700 .62rem/1.4 inherit;font-style:normal}
.su-tools #suHintCount{background:#2f62b3}
.su-tools #suPencil.on{color:#2f62b3}
.su-tools #suPencil.on em{background:#2f62b3}
.su-pad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.su-pad button{display:flex;flex-direction:column;align-items:center;padding:8px 0 6px;border:0;border-radius:10px;background:#fff;color:#2f62b3;box-shadow:0 2px 6px rgba(31,42,51,.1);cursor:pointer;-webkit-tap-highlight-color:transparent}
.su-pad button b{font:500 min(8vw,36px)/1 -apple-system,"SF Pro Rounded","Helvetica Neue",sans-serif}
.su-pad button small{font-size:.66rem;color:#6d747a;margin-top:2px}
.su-pad button:active{transform:scale(.94);background:#e8f0fc}
.su-pad button.done{visibility:hidden}
@media(max-width:700px){
  #sudoku.game-view{padding-left:6px;padding-right:6px}
  .su-shell{padding:10px 6px 12px;border-radius:18px}
  .su-pad{gap:3px}
}
.deck-option .suits{background:#f6efe1;border-radius:8px;padding:4px 6px}
/* Home sul telefono: titolo su una riga e riquadri compatti, tutto in una schermata. */
@media(max-width:700px){
  .home-view{padding:12px 12px 16px}
  .home-view.active{gap:12px}
  .home-intro .eyebrow{display:none}
  .home-intro h1{font-size:clamp(1.35rem,6.4vw,1.75rem);margin:0;letter-spacing:-.02em}
  .home-intro h1 br{display:none}
  .home-intro p{display:none}
  .resume-card{margin-top:10px;padding:7px 12px 7px 7px}
  .resume-card img{width:34px;height:34px;padding:5px}
  .game-gallery{gap:8px}
  .game-card{padding:10px 11px;border-radius:16px}
  .game-card .game-symbol{width:38px;height:38px;border-radius:10px;margin-bottom:6px}
  .card-copy small{font-size:.5rem;margin-bottom:1px}
  .card-copy strong{font-size:1.2rem}
}
@media(max-width:700px){.home-view.active{align-content:start;min-height:0}}
/* Otto colori ben distinti: il Sudoku passa al viola, lontano dal blu della Dama cinese. */
.sudoku-card{background:linear-gradient(135deg,rgba(104,52,138,.97),rgba(40,16,58,.99))}

/* ===== Barra in fondo: 5 preferiti + "Tutti i giochi" ===== */
@media(max-width:700px){
  .tab-bar{grid-template-columns:repeat(6,1fr);padding-left:8px;padding-right:8px}
  .tab img{width:38px;height:38px;padding:5px}
}
.tab-all{position:relative}
.tab-all svg{width:38px;height:38px;padding:8px;border-radius:10px;fill:none;stroke:var(--gold-light);stroke-width:1.8;background:rgba(240,207,139,.1);box-shadow:inset 0 0 0 1px rgba(240,207,139,.35)}
/* Se il gioco aperto non è tra i preferiti, l'ultimo pulsante mostra la sua icona con il segno dell'elenco. */
.tab-all img+svg{position:absolute;right:calc(50% - 25px);bottom:0;width:20px;height:20px;padding:3px;border-radius:6px;background:#0d2530;stroke-width:2.4}
.games-note{margin:0 0 12px;color:#b7c6c6;font-size:.86rem;line-height:1.45}
.games-note b{color:var(--gold-light)}
.games-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.games-list li{display:flex;align-items:center;gap:4px;border:1px solid rgba(240,207,139,.14);border-radius:14px;background:rgba(255,255,255,.03)}
.games-list li.current{border-color:rgba(240,207,139,.45);background:rgba(215,168,92,.08)}
.games-open{flex:1;display:flex;align-items:center;gap:12px;min-width:0;padding:5px 10px 5px 6px;border:0;background:transparent;color:var(--cream);font:inherit;text-align:left;cursor:pointer;border-radius:14px}
.games-open img{flex:none;width:36px;height:36px;padding:4px;border-radius:10px;background:linear-gradient(145deg,#f6efe1,#d8cbb2)}
.games-open b{display:block;font-size:.95rem}
.games-open small{display:block;color:#8fa4a5;font-size:.72rem;margin-top:1px}
.games-star{flex:none;width:46px;height:44px;border:0;background:transparent;color:#6f8789;font-size:1.55rem;line-height:1;cursor:pointer;border-radius:12px}
.games-star.on{color:var(--gold-light)}
.games-star:active{transform:scale(.9)}
.games-open:focus-visible,.games-star:focus-visible{outline:2px solid var(--gold-light);outline-offset:-2px}

/* ===== Nuovi giochi in home ===== */
.g2048-card{background:linear-gradient(135deg,rgba(200,86,36,.97),rgba(74,24,8,.99))}
.incastri-card{background:linear-gradient(135deg,rgba(28,108,120,.97),rgba(8,40,48,.99))}
.mahjong-card{background:linear-gradient(135deg,rgba(150,40,70,.97),rgba(56,12,28,.99))}

/* ===== 2048 ===== */
#g2048.game-view{max-width:560px}
.t48-shell{--g:10px;padding:14px;border-radius:24px;background:linear-gradient(170deg,#f8f4ea,#ece4d3);color:#3b3128;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.t48-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.t48-score{flex:1;padding:6px 10px;border-radius:10px;background:#8c7a64;color:#fff;text-align:center}
.t48-score small{display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.t48-score b{font-size:1.2rem}
.t48-top .secondary-button{color:#3b3128;border-color:rgba(59,49,40,.3);padding:10px 12px}
.t48-top .secondary-button:disabled{opacity:.35}
.t48-top .primary-button.compact{min-width:0;padding:11px 16px;justify-content:center}
.t48-board{position:relative;aspect-ratio:1;border-radius:12px;background:#a8987f;touch-action:none;user-select:none;-webkit-user-select:none}
.t48-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);padding:var(--g)}
.t48-cells i{border-radius:8px;background:#c9bca6}
.t48-tiles{position:absolute;inset:0}
.t48-tile{position:absolute;left:var(--g);top:var(--g);width:calc((100% - 5*var(--g))/4);height:calc((100% - 5*var(--g))/4);display:grid;place-items:center;border-radius:8px;font:800 min(10vw,46px)/1 -apple-system,"SF Pro Rounded","Helvetica Neue",Arial,sans-serif;transform:translate(calc(var(--c)*(100% + var(--g))),calc(var(--r)*(100% + var(--g))));transition:transform .1s ease-in-out;background:#eee4da;color:#776e65}
.t48-tile.v8,.t48-tile.v16,.t48-tile.v32,.t48-tile.v64{color:#fff}
.t48-tile.v4{background:#ede0c8}
.t48-tile.v8{background:#f2b179}.t48-tile.v16{background:#f59563}.t48-tile.v32{background:#f67c5f}.t48-tile.v64{background:#f65e3b}
.t48-tile.v128,.t48-tile.v256,.t48-tile.v512{font-size:min(8vw,38px);color:#fff}
.t48-tile.v128{background:#edcf72}.t48-tile.v256{background:#edcc61}.t48-tile.v512{background:#edc850}
.t48-tile.big{font-size:min(6.4vw,30px);color:#fff}
.t48-tile.v1024{background:#edc53f;box-shadow:0 0 18px rgba(243,215,116,.4)}.t48-tile.v2048{background:#edc22e;box-shadow:0 0 26px rgba(243,215,116,.6)}.t48-tile.v4096{background:#2e3a40}
.t48-tile.fresh{animation:t48-in .16s .1s both}
.t48-tile.pop{animation:t48-pop .16s}
@keyframes t48-in{from{scale:0}}
@keyframes t48-pop{50%{scale:1.14}}
.t48-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;border-radius:12px;background:rgba(248,244,234,.9);text-align:center;animation:t48-fade .4s}
.t48-overlay.won{background:rgba(237,194,46,.82)}
.t48-overlay b{font:italic 700 2rem Georgia,serif;color:#3b3128}
.t48-overlay p{margin:0 0 6px;color:#5d5146}
.t48-overlay .primary-button{width:auto;min-width:200px;justify-content:center}
.t48-overlay .text-button{color:#3b3128;margin-top:4px;font-size:.8rem}
@keyframes t48-fade{from{opacity:0}}
.t48-hint{margin:10px 0 0;text-align:center;font-size:.76rem;color:#7a6d60}
@media(max-width:700px){#g2048.game-view{padding-left:8px;padding-right:8px}.t48-shell{--g:8px;padding:10px;border-radius:18px}.t48-hint{display:none}}

/* ===== Incastri ===== */
#incastri.game-view{max-width:620px}
.tt-shell{padding:12px;border-radius:22px;background:linear-gradient(160deg,#10303c,#081a22);border:1px solid var(--line)}
.tt-main{display:flex;justify-content:center;gap:10px}
.tt-well{position:relative;flex:none}
#ttCanvas{display:block;border-radius:6px;box-shadow:0 0 0 2px rgba(240,207,139,.22),0 18px 40px rgba(0,0,0,.4);touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.tt-side{flex:none;width:84px;display:flex;flex-direction:column;gap:6px;min-height:0}
.tt-box{display:block;width:100%;padding:5px 6px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04);color:inherit;font:inherit;text-align:left}
.tt-box small,.tt-stat small{display:block;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light)}
#ttNext{display:block;width:100%;height:118px}
#ttHold{display:block;width:100%;height:42px}
.tt-hold{cursor:pointer}
.tt-hold:disabled{cursor:default}
.tt-stat{padding:0 2px}
.tt-stat b{font-size:.98rem;color:#fff;font-variant-numeric:tabular-nums}
.tt-side .text-button{margin:auto 0 0;text-align:left}
.tt-side .text-button:disabled{opacity:.3}
.tt-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;border-radius:6px;background:rgba(6,20,27,.86);text-align:center}
.tt-overlay[hidden]{display:none}
.tt-overlay b{font:italic 700 2rem Georgia,serif;color:var(--gold-light)}
.tt-overlay p{margin:0 0 6px;color:#c7d5d5;font-size:.86rem}
.tt-overlay .primary-button{width:auto;min-width:150px;justify-content:center}
.tt-pad{display:none;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
.tt-pad button{height:54px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.06);color:var(--cream);font-size:1.3rem;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.tt-pad button:active{background:rgba(215,168,92,.25)}
.tt-pad [data-tt="drop"]{color:var(--gold-light)}
@media(max-width:700px),(pointer:coarse){.tt-pad{display:grid}}
@media(max-width:700px){#incastri.game-view{padding:6px 8px 0}#incastri .section-heading{display:none}.tt-shell{padding:8px;border-radius:16px}.tt-side{width:74px}.tt-pad{gap:6px;margin-top:8px}.tt-pad button{height:48px}}

/* ===== Mahjong ===== */
#mahjong.game-view{max-width:1100px}
.mj-controls{display:flex!important;justify-content:space-between;align-items:center}
.mj-controls label{font-size:.8rem!important}
.mj-shell{padding:12px;border-radius:24px;background:radial-gradient(circle at 50% 30%,#17705a,#0b3b31 75%);border:1px solid rgba(240,207,139,.2);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.mj-meta{display:flex;justify-content:space-between;gap:10px;color:#cfe3da;font-size:.8rem;margin:0 4px 8px}
.mj-meta b{color:#fff}
.mj-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:200px;padding:4px 0}
.mj-board{position:relative;margin:auto}
.mj-tile{position:absolute;width:var(--tw);height:var(--th);padding:calc(var(--tw)*.05);border:0;border-radius:calc(var(--tw)*.13);background:linear-gradient(155deg,#fffdf7,#efe5cf);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(120,96,50,.25),calc(var(--d)*.5) calc(var(--d)*.5) 0 #dccba5,var(--d) var(--d) 0 #a88a52,var(--d) var(--d) 5px rgba(0,0,0,.4);transition:transform .12s,opacity .16s,filter .15s;-webkit-tap-highlight-color:transparent}
.mj-tile svg{display:block;width:100%;height:100%}
.mj-tile:not(.free){filter:brightness(.78) saturate(.8);cursor:default}
.mj-tile.selected{background:linear-gradient(155deg,#fff4c9,#f3d98e);box-shadow:inset 0 0 0 2px var(--gold),calc(var(--d)*.5) calc(var(--d)*.5) 0 #dccba5,var(--d) var(--d) 0 #a88a52,0 0 14px rgba(240,207,139,.7);transform:translateY(-2px)}
.mj-tile.hint{animation:mj-hint 1s ease-in-out 3}
.mj-tile.leaving{opacity:0;transform:scale(.85)}
.mj-tile.shake{animation:mj-shake .25s}
@keyframes mj-hint{50%{background:#cdeedd;box-shadow:inset 0 0 0 2px #2f8a4c,0 0 16px rgba(120,230,170,.8)}}
@keyframes mj-shake{25%{translate:-2px 0}75%{translate:2px 0}}
.mj-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;border-radius:14px;background:rgba(6,30,24,.84);text-align:center}
.mj-overlay[hidden]{display:none}
.mj-overlay b{font:italic 700 2rem Georgia,serif;color:var(--gold-light)}
.mj-overlay p{margin:0 0 6px;color:#d7e6df;max-width:320px}
.mj-overlay .primary-button{width:auto;min-width:200px;justify-content:center}
.mj-overlay .text-button{margin-top:4px;font-size:.8rem}
.mj-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:10px 0 0}
.mj-tools button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;color:#e6efe9;font:600 .74rem inherit;cursor:pointer;padding:6px 2px;border-radius:12px}
.mj-tools button:active{background:rgba(255,255,255,.08)}
.mj-tools button:disabled{opacity:.35;cursor:default}
.mj-tools svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mj-tools em{position:absolute;top:0;left:58%;min-width:20px;padding:1px 6px;border-radius:99px;background:var(--gold);color:#182126;font:700 .62rem/1.4 inherit;font-style:normal}
@media(max-width:700px){#mahjong.game-view{padding-left:4px;padding-right:4px}.mj-shell{padding:8px 4px;border-radius:16px}.mj-controls{margin-bottom:8px}}
@media(max-width:700px){.games-sheet h2{margin:2px 0 6px}.games-sheet .eyebrow{display:none}}
.games-full{display:none;margin-top:6px;padding:6px 10px;border-radius:10px;background:rgba(168,71,61,.25);color:#ffd9d2;font-weight:600}
.games-note.warn .games-full{display:block;animation:games-warn 3.2s both}
@keyframes games-warn{0%,8%{transform:translateX(-4px)}4%,12%{transform:translateX(4px)}16%,85%{transform:none;opacity:1}100%{opacity:0}}

/* ===== Nuovi giochi: schede in home ===== */
.domino-card{background:linear-gradient(135deg,rgba(40,96,82,.97),rgba(10,38,32,.99))}
.sblocca-card{background:linear-gradient(135deg,rgba(96,116,48,.97),rgba(34,44,14,.99))}
.frecce-card{background:linear-gradient(135deg,rgba(84,92,110,.97),rgba(28,32,44,.99))}
.sagome-card{background:linear-gradient(135deg,rgba(120,82,40,.97),rgba(46,28,12,.99))}

/* ===== Domino ===== */
#domino.game-view{max-width:760px}
.do-controls{display:flex!important;justify-content:space-between;align-items:center}
.do-controls label{font-size:.8rem!important}
.do-table{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:24px;background:radial-gradient(circle at 50% 40%,#3f8a73,#1d4b40 80%);border:6px solid #5a3a22;box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 0 40px rgba(0,0,0,.25)}
.do-player{display:flex;align-items:center;gap:10px;color:#e7f1ec}
.do-player span{display:flex;flex-direction:column;min-width:0}
.do-player small{font-size:.58rem;letter-spacing:.14em;color:#bfe0d3}
.do-player b{font-size:.84rem}
.do-player strong{margin-left:auto;min-width:48px;padding:4px 10px;border-radius:10px;background:rgba(0,0,0,.28);font:700 1.2rem Georgia,serif;text-align:center;color:var(--gold-light)}
.do-backs{display:flex;gap:3px;flex-wrap:wrap}
.do-backs i{width:13px;height:24px;border-radius:3px;background:linear-gradient(160deg,#fbf6ea,#e2d6bd);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.do-center{position:relative;display:flex;align-items:center;gap:8px;min-height:30svh}
.do-chain{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;gap:2px;min-height:30svh}
.do-empty{margin:0;color:rgba(231,241,236,.55);font-style:italic}
.do-tile{display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.do-tile rect{fill:#fbf7ec;stroke:#c9bb98;stroke-width:.03}
.do-tile path{stroke:#9a8a68;stroke-width:.035}
.do-tile circle{fill:#1f2a2c}
.do-chain .do-tile.h{width:calc(var(--u)*2);height:var(--u)}
.do-chain .do-tile.v{width:var(--u);height:calc(var(--u)*2)}
.do-chain .do-tile.end rect{stroke:var(--gold);stroke-width:.06}
.do-slot{width:calc(var(--u)*2);height:var(--u);border:2px dashed var(--gold-light);border-radius:6px;background:rgba(240,207,139,.18);cursor:pointer;animation:do-pulse 1s ease-in-out infinite}
@keyframes do-pulse{50%{background:rgba(240,207,139,.4)}}
.do-stock{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:62px;padding:8px 4px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(0,0,0,.2);color:#e7f1ec;font:inherit;cursor:pointer}
.do-stock:disabled{opacity:.55;cursor:default}
.do-stock.ready{border-color:var(--gold-light);box-shadow:0 0 0 3px rgba(240,207,139,.25);animation:do-pulse 1.2s infinite}
.do-stock-pile{width:22px;height:36px;border-radius:4px;background:linear-gradient(160deg,#fbf6ea,#e2d6bd);box-shadow:3px 3px 0 #cdbf9f,5px 5px 0 #b9ab8b}
.do-stock b{font-size:.9rem}
.do-stock small{font-size:.62rem;font-weight:700;color:var(--gold-light)}
.do-status{margin:0;min-height:1.3em;text-align:center;color:#f0f6f3;font-size:.86rem}
.do-hand{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.do-hand-tile{padding:0;border:0;background:transparent;cursor:pointer;transition:transform .15s,opacity .15s}
.do-hand-tile .do-tile{width:38px;height:76px}
.do-hand-tile.playable{transform:translateY(-4px)}
.do-hand-tile.playable .do-tile rect{stroke:var(--gold);stroke-width:.05}
.do-hand-tile.dim{filter:brightness(.72) saturate(.6)}
.do-hand-tile.selected{transform:translateY(-10px)}
.do-hand-tile.selected .do-tile rect{fill:#fff4c9}
.do-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border-radius:18px;background:rgba(10,32,27,.88);text-align:center}
.do-overlay[hidden]{display:none}
.do-overlay b{font:italic 700 2rem Georgia,serif;color:var(--gold-light)}
.do-overlay p{margin:0 0 6px;color:#dbe9e3;max-width:340px;line-height:1.45}
.do-overlay .primary-button{width:auto;min-width:200px;justify-content:center}
@media(max-width:700px){#domino.game-view{padding-left:6px;padding-right:6px}.do-table{padding:8px;border-width:4px;border-radius:18px;gap:8px}.do-hand-tile .do-tile{width:34px;height:68px}.do-stock{width:52px}}

/* ===== Sblocca ===== */
#sblocca.game-view{max-width:560px}
.sb-controls{display:flex!important;justify-content:space-between;align-items:center}
.sb-controls label{font-size:.8rem!important}
.sb-shell{padding:14px;border-radius:24px;background:linear-gradient(160deg,#e8c99a,#c99c62);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.sb-top{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.sb-box{padding:6px 10px;border-radius:12px;background:#5a3a22;color:#f6e7cc;text-align:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.sb-box small{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.sb-box b{display:block;font:700 1.6rem/1.1 Georgia,serif}
.sb-box em{font-size:.7rem;font-style:normal;opacity:.85}
.sb-board{position:relative;aspect-ratio:1;margin:0 12px 0 0;border:8px solid #6b4526;border-radius:12px;background:linear-gradient(90deg,rgba(0,0,0,.22) 1px,transparent 1px) 0 0/calc(100%/6) calc(100%/6),linear-gradient(rgba(0,0,0,.22) 1px,transparent 1px) 0 0/calc(100%/6) calc(100%/6),#4a3120;box-shadow:inset 0 0 20px rgba(0,0,0,.5);touch-action:none;user-select:none;-webkit-user-select:none}
.sb-exit{position:absolute;right:-20px;top:calc(100%/6*2);width:16px;height:calc(100%/6);border-radius:0 8px 8px 0;background:#3b2718;box-shadow:inset 0 0 8px rgba(0,0,0,.6)}
.sb-exit:after{content:"";position:absolute;left:3px;top:50%;border:6px solid transparent;border-left-color:#e05a4a;transform:translateY(-50%)}
.sb-block{position:absolute;padding:3px;transition:left .15s,top .15s,transform .15s;cursor:grab}
.sb-block:before{content:"";position:absolute;inset:3px;border-radius:8px;background:linear-gradient(160deg,#f1cf98,#d4a462);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(120,70,20,.35),0 3px 6px rgba(0,0,0,.35)}
.sb-block.v:before{background:linear-gradient(90deg,#e7bf82,#d09a55)}
.sb-block.main:before{background:linear-gradient(160deg,#ef6b58,#b8342a);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -4px 0 rgba(90,10,5,.35),0 3px 6px rgba(0,0,0,.35)}
.sb-block.drag{transition:none;z-index:2;cursor:grabbing}
.sb-block.drag:before{filter:brightness(1.08)}
.sb-block.hint:before{animation:sb-hint .45s}
.sb-block.out{transform:translateX(160%);opacity:0;transition:transform .5s ease-in,opacity .5s .2s}
@keyframes sb-hint{50%{filter:brightness(1.4) drop-shadow(0 0 8px #fff)}}
.sb-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;border-radius:4px;background:rgba(40,24,12,.82);text-align:center;animation:t48-fade .4s}
.sb-overlay[hidden]{display:none}
.sb-overlay b{font:italic 700 2rem Georgia,serif;color:var(--gold-light)}
.sb-overlay p{margin:0 0 6px;color:#f3e3c6}
.sb-overlay .primary-button{width:auto;min-width:200px;justify-content:center}
.sb-tools,.fr-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:12px}
.sb-tools button,.fr-tools button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;color:#4a2f1a;font:600 .74rem inherit;cursor:pointer;padding:6px 2px;border-radius:12px}
.sb-tools button:disabled,.fr-tools button:disabled{opacity:.35;cursor:default}
.sb-tools svg,.fr-tools svg,.fr-icon svg,.sg-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sb-tools em,.fr-tools em,.sg-icon em{position:absolute;top:0;left:58%;min-width:20px;padding:1px 6px;border-radius:99px;background:#b8342a;color:#fff;font:700 .62rem/1.4 inherit;font-style:normal}
@media(max-width:700px){#sblocca.game-view{padding-left:8px;padding-right:8px}.sb-shell{padding:10px;border-radius:18px}.sb-board{border-width:6px}}

/* ===== Frecce ===== */
#frecce.game-view{max-width:600px}
.fr-shell{padding:14px;border-radius:24px;background:#f4ead8;color:#5a3a22;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.fr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid #d9c6a6}
.fr-level{font:700 1.3rem Georgia,serif;color:#c58a2b;letter-spacing:.04em;text-transform:uppercase}
.fr-icon,.sg-icon{position:relative;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:inherit;cursor:pointer}
.fr-icon:active,.sg-icon:active{background:rgba(0,0,0,.06)}
.fr-lives{display:flex;gap:6px;min-width:40px;justify-content:flex-end}
.fr-lives i{width:14px;height:19px;background:#3f9be0;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;clip-path:path('M7 0C7 0 0 9 0 12.5A7 6.5 0 0 0 14 12.5C14 9 7 0 7 0Z')}
.fr-lives i.lost{background:#d9c6a6}
.fr-stage{position:relative;padding:14px 0}
.fr-board{display:block;width:100%;max-width:520px;margin:auto;aspect-ratio:1;touch-action:manipulation}
.fr-arrow{cursor:pointer;transition:transform .5s cubic-bezier(.5,0,.9,.5),opacity .5s}
.fr-arrow.leaving{opacity:0;pointer-events:none}
.fr-arrow.bump{transition:transform .18s ease-out}
.fr-hit{fill:none;stroke:transparent;stroke-width:.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke}
.fr-line{fill:none;stroke:#6b4526;stroke-width:.1;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.fr-head{fill:#6b4526;pointer-events:none}
.fr-arrow.bump .fr-line,.fr-arrow.blocker .fr-line{stroke:#d23b30}.fr-arrow.bump .fr-head,.fr-arrow.blocker .fr-head{fill:#d23b30}
.fr-arrow.hint .fr-line{stroke:#2f8a4c;stroke-width:.16}.fr-arrow.hint .fr-head{fill:#2f8a4c}
.fr-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;background:rgba(244,234,216,.92);text-align:center;animation:t48-fade .4s}
.fr-overlay[hidden]{display:none}
.fr-overlay b{font:italic 700 2rem Georgia,serif;color:#5a3a22}
.fr-overlay p{margin:0 0 6px;color:#7a5a3c}
.fr-overlay .primary-button{width:auto;min-width:200px;justify-content:center}
.fr-tools{grid-template-columns:1fr 1fr;align-items:center;padding-top:8px;border-top:1px solid #d9c6a6}
.fr-tools span{font-size:.86rem;color:#8a6a48;padding-left:6px}
@media(max-width:700px){#frecce.game-view{padding-left:8px;padding-right:8px}.fr-shell{padding:10px;border-radius:18px}.fr-stage{padding:8px 0}}

/* ===== Sagome ===== */
#sagome.game-view{max-width:620px}
.sg-shell{padding:12px;border-radius:24px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 3px,transparent 3px 48px),linear-gradient(90deg,#b98450,#a36d3b);color:#3a2212;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.sg-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 8px}
.sg-icon{background:rgba(255,236,200,.35);box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.sg-level{font:700 1.05rem Georgia,serif;color:#fff3dc;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.sg-stage{position:relative;display:flex;justify-content:center;padding:8px 0}
.sg-board{position:relative}
.sg-hole{position:absolute;width:var(--c);height:var(--c);background:#4a2a14;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 2px 2px 4px rgba(0,0,0,.4)}
.sg-hole.preview{background:#7fa35a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.sg-piece{position:absolute;cursor:grab;touch-action:none}
.sg-tray .sg-piece{position:relative}
.sg-piece-cells{position:relative;display:block}
.sg-piece-cells i{position:absolute;width:var(--c);height:var(--c);background:linear-gradient(150deg,#f6dcaa,#e0b577);box-shadow:inset 0 0 0 1px rgba(120,70,20,.35),inset 0 2px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(120,70,20,.3)}
.sg-piece.tone1 i{background:linear-gradient(150deg,#f3d49c,#d9a866)}
.sg-piece.tone2 i{background:linear-gradient(150deg,#f8e2b8,#e6bf86)}
.sg-piece.tone3 i{background:linear-gradient(150deg,#efcd92,#d39f5c)}
.sg-piece.tone4 i{background:linear-gradient(150deg,#f5d8a4,#dcae6e)}
.sg-board .sg-piece{filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.sg-tray{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 16px;min-height:100px;padding:14px 8px;border-top:2px solid rgba(60,30,10,.35);background:rgba(60,30,10,.18);border-radius:0 0 16px 16px;touch-action:none}
.sg-tray .sg-piece{filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.sg-tray .sg-piece.picked{opacity:.25}
.sg-ghost{position:fixed;z-index:200;pointer-events:none;filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))}
.sg-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;border-radius:14px;background:rgba(60,34,14,.82);text-align:center;animation:t48-fade .4s}
.sg-overlay[hidden]{display:none}
.sg-overlay b{font:italic 700 2rem Georgia,serif;color:var(--gold-light)}
.sg-overlay p{margin:0 0 6px;color:#f3e3c6}
.sg-overlay .primary-button{width:auto;min-width:200px;justify-content:center}
@media(max-width:700px){#sagome.game-view{padding-left:6px;padding-right:6px}.sg-shell{padding:8px;border-radius:18px}}
.sg-tray .sg-piece.used{visibility:hidden;pointer-events:none}

/* ===== Scala 40 ===== */
.scala40-card{background:linear-gradient(135deg,rgba(30,70,120,.97),rgba(10,26,52,.99))}
#scala40.game-view{max-width:820px}
.s4-controls{display:flex!important;justify-content:space-between;align-items:center}
.s4-controls label{font-size:.8rem!important}
.s4-table{--w:50px;position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:24px;background:radial-gradient(circle at 50% 35%,#2f6f9a,#173a57 80%);border:6px solid #4a2f1c;box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 0 40px rgba(0,0,0,.25)}
.s4-player{display:flex;align-items:center;gap:10px;color:#e6eff6}
.s4-player span{display:flex;flex-direction:column;min-width:0}
.s4-player small{font-size:.58rem;letter-spacing:.14em;color:#b9d2e6}
.s4-player b{font-size:.84rem}
.s4-player strong{margin-left:auto;min-width:48px;padding:4px 10px;border-radius:10px;background:rgba(0,0,0,.28);font:700 1.2rem Georgia,serif;text-align:center;color:var(--gold-light)}
.s4-backs{display:flex}
.s4-backs i{width:14px;height:22px;margin-left:-5px;border-radius:3px;background:repeating-linear-gradient(45deg,#8a2b2b 0 3px,#a83a3a 3px 6px);border:2px solid #f5f0e4;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.s4-card{--cw:var(--w);position:relative;flex:none;display:flex;flex-direction:column;width:var(--cw);height:calc(var(--cw)*1.42);padding:3px 4px;border-radius:calc(var(--cw)*.13);background:linear-gradient(160deg,#fffef9,#ece4d4);color:#1b1f22;box-shadow:0 2px 5px rgba(0,0,0,.35);font-family:Georgia,serif;line-height:1;text-align:left}
.s4-card b{font-size:calc(var(--cw)*.34)}
.s4-card i{margin:auto;font-style:normal;font-size:calc(var(--cw)*.55);font-family:"Apple Symbols","Segoe UI Symbol",serif}
.s4-card.red{color:#c0392b}
.s4-card.joker{background:linear-gradient(160deg,#fff7df,#f1d98f);color:#7a3fa0}
.s4-card.joker i{font:800 calc(var(--cw)*.2) inherit;letter-spacing:.04em;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif}
.s4-card.back{background:repeating-linear-gradient(45deg,#8a2b2b 0 4px,#a83a3a 4px 8px);border:3px solid #f5f0e4}
.s4-card.ghost{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.s4-melds{display:flex;flex-wrap:wrap;gap:8px 12px;align-content:flex-start;min-height:92px;max-height:32svh;overflow-y:auto;padding:6px;border-radius:14px;background:rgba(0,0,0,.14)}
.s4-meld{display:flex;padding:3px 6px 3px 16px;border:0;border-radius:10px;background:transparent;cursor:pointer;--w:34px}
.s4-meld .s4-card{margin-left:-12px}
.s4-meld.me{box-shadow:inset 0 -3px 0 rgba(240,207,139,.6)}
.s4-meld.cpu{box-shadow:inset 0 -3px 0 rgba(255,255,255,.25)}
.s4-meld:active{background:rgba(240,207,139,.2)}
.s4-meld .s4-card.as{outline:2px solid #b07ad0;outline-offset:-2px}
.s4-empty{margin:auto;color:rgba(230,239,246,.55);font-style:italic;font-size:.86rem}
.s4-center{display:flex;align-items:center;gap:12px}
.s4-stock,.s4-pile{position:relative;padding:0;border:0;background:transparent;cursor:pointer;border-radius:8px}
.s4-stock b{position:absolute;inset:auto 0 -2px;font-size:.72rem;color:#fff;text-shadow:0 1px 2px #000}
.s4-stock.ready .s4-card,.s4-pile.ready .s4-card{box-shadow:0 0 0 3px var(--gold-light),0 0 14px rgba(240,207,139,.5)}
.s4-pending{flex:1;min-width:0;padding:6px 8px;border:1px dashed rgba(240,207,139,.6);border-radius:12px;background:rgba(240,207,139,.08);color:#f3e3c6}
.s4-pending[hidden]{display:none}
.s4-pending small{font-size:.68rem}
.s4-pending small b{color:var(--gold-light)}
.s4-pending>div:first-of-type{display:flex;flex-wrap:wrap;gap:4px 8px;margin:4px 0}
.s4-pending .s4-meld{padding-left:14px;cursor:default}
.s4-pending-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.s4-pending-actions .text-button{margin:0}
.s4-pending-actions .primary-button{min-width:0;padding:8px 16px;margin:0;width:auto}
.s4-pending-actions .primary-button:disabled{opacity:.45}
.s4-status{margin:0;min-height:1.3em;text-align:center;color:#eef5fa;font-size:.84rem}
.s4-hand{display:flex;justify-content:center;padding:10px 0 0;min-height:calc(var(--w)*1.42 + 14px)}
.s4-hand-card{padding:0;border:0;background:transparent;cursor:pointer;transition:transform .12s}
.s4-hand-card+.s4-hand-card{margin-left:calc(min(3px,(100% - var(--w)) / (var(--n) - 1) - var(--w)))}
.s4-hand-card.sel{transform:translateY(-12px)}
.s4-hand-card.sel .s4-card{box-shadow:0 0 0 2px var(--gold),0 6px 12px rgba(0,0,0,.4)}
.s4-hand-card.took .s4-card:after{content:"";position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:50%;background:#2fa36b}
.s4-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.s4-actions .text-button{margin:0 auto 0 0}
.s4-actions #s4PutBack{margin:0}
.s4-actions .secondary-button{padding:9px 16px;color:#fff}
.s4-actions .primary-button{min-width:0;width:auto;margin:0;padding:10px 18px}
.s4-actions button:disabled{opacity:.4}
.s4-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border-radius:18px;background:rgba(10,24,38,.9);text-align:center}
.s4-overlay[hidden]{display:none}
.s4-overlay b{font:italic 700 2rem Georgia,serif;color:var(--gold-light)}
.s4-overlay p{margin:0 0 6px;color:#dbe7f0;max-width:340px;line-height:1.45}
.s4-overlay .primary-button{width:auto;min-width:200px;justify-content:center}
@media(max-width:700px){#scala40.game-view{padding-left:4px;padding-right:4px}.s4-table{--w:46px;padding:8px 6px;border-width:4px;border-radius:18px;gap:8px}.s4-meld{--w:30px}.s4-meld .s4-card{margin-left:-11px}}
.s4-card{overflow:hidden}
.s4-meld .s4-card.joker i{display:none}
.s4-meld .s4-card.joker b{margin:auto 0}
/* Primo pulsante della barra: torna alla sala giochi. */
.tab-home svg{width:38px;height:38px;padding:8px;border-radius:10px;fill:none;stroke:var(--gold-light);stroke-width:1.8;stroke-linejoin:round;background:rgba(240,207,139,.1);box-shadow:inset 0 0 0 1px rgba(240,207,139,.35)}
.tab-home.active svg{background:var(--gold-light);stroke:#172126}

/* ===== Schermo pieno: ogni gioco occupa lo spazio fra intestazione e barra in fondo (--play-h, calcolato in app.js) ===== */
:root{--play-h:calc(100svh - 140px)}
.game-view.active{display:flex;flex-direction:column;min-height:var(--play-h)}
.game-view.active>.section-heading,.game-view.active>.play-controls,.game-view.active>.bj-bar{flex:none}
/* Il tavolo principale prende tutto lo spazio che avanza. */
#g2048 .t48-shell,#sblocca .sb-shell,#frecce .fr-shell,#sagome .sg-shell,#mahjong .mj-shell,#domino .do-table,#scala40 .s4-table,#incastri .tt-shell,
#sudoku .su-shell,#scopa .sc-table,#chess .grid-game-layout,#dama .grid-game-layout,#chinese .chinese-layout,#backgammon .backgammon-layout,#yahtzee .yahtzee-layout{flex:1 1 auto;min-height:0}
/* Griglie quadrate (2048, Sblocca, Frecce): il riquadro prende lo spazio che resta e app.js vi scrive --fit,
   il lato del quadrato = il minore fra larghezza e altezza. */
#g2048 .t48-shell,#sblocca .sb-shell,#frecce .fr-shell{flex:1 1 0}
.fit-square,.fr-stage{flex:1 1 0;min-height:240px;display:grid;place-items:center;overflow:hidden}
.t48-shell,.sb-shell,.fr-shell,.sg-shell,.mj-shell{display:flex;flex-direction:column}
.fit-square .t48-board{width:var(--fit,100%);height:auto}
.sb-fit{padding-right:20px}
.sb-fit .sb-board{width:var(--fit,100%);height:auto;margin:0}
.fr-stage .fr-board{width:var(--fit,100%);max-width:none;height:auto}
.mj-stage,.sg-stage{flex:1 1 auto}
.do-table,.s4-table{min-height:0}
.do-center{flex:1 1 auto;min-height:150px}
.do-chain{min-height:0;align-self:stretch}
.s4-table{--w:clamp(44px,calc(var(--play-h)*.072),76px)}
.s4-melds{flex:1 1 auto;max-height:none;min-height:100px}
/* Giochi a scacchiera e con tavolo fisso: il contenuto si distribuisce in altezza invece di lasciare un vuoto in fondo. */
#chess .grid-game-layout,#dama .grid-game-layout,#chinese .chinese-layout{display:flex;flex-direction:column}
#chess .grid-game-shell,#dama .grid-game-shell,#chinese .chinese-shell{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-evenly}
#sudoku .su-shell{display:flex;flex-direction:column;justify-content:space-evenly}
#scopa .sc-table{justify-content:space-between}
/* Scopa: il tavolo resta fermo mentre si gioca. Lo spazio libero va tutto al centro, e ogni fascia ha un'altezza fissa:
   la mano non si sposta quando compaiono i pulsanti di presa, cambia il messaggio o si svuota fra una smazzata e l'altra. */
#scopa .sc-center{flex:1 1 0;overflow-y:auto}
/* Pulsanti di presa e messaggio condividono la stessa fascia: quando ci sono i pulsanti, il messaggio si nasconde. */
#scopa .sc-dock{position:relative;height:44px;flex:none}
#scopa .sc-actions{position:absolute;inset:0;z-index:1;flex-wrap:nowrap;align-items:center;justify-content:safe center;overflow-x:auto}
#scopa .sc-actions button{flex:none}
#scopa .sc-status{height:100%;min-height:0;overflow:hidden;line-height:1.25}
#scopa .sc-actions:not(:empty)+.sc-status{visibility:hidden}
#scopa .sc-hand.opp{min-height:66px;flex:none}
#scopa .sc-hand.mine{min-height:122px;flex:none}
@media(max-width:700px){#scopa .sc-hand.opp{min-height:58px}#scopa .sc-hand.mine{min-height:128px}}
/* Su schermi grandi i giochi non restano più stretti di quanto l'altezza permetta. */
@media(min-width:701px){
  #g2048.game-view,#sblocca.game-view,#frecce.game-view{max-width:min(1100px,calc(var(--play-h)*.95))}
  #sudoku.game-view{max-width:min(900px,calc(var(--play-h)*.8))}
  #chess.game-view,#dama.game-view{max-width:min(1100px,calc(var(--play-h)*.95))}
  #domino.game-view,#scala40.game-view{max-width:1100px}
}
/* I numeri del 2048 crescono con la griglia. */
.fit-square .t48-tile{font-size:calc(var(--fit,360px)*.12)}
.fit-square .t48-tile.v128,.fit-square .t48-tile.v256,.fit-square .t48-tile.v512{font-size:calc(var(--fit,360px)*.1)}
.fit-square .t48-tile.big{font-size:calc(var(--fit,360px)*.08)}
.fit-square .t48-board{--g:calc(var(--fit,360px)*.025)}
/* Backgammon sul telefono: la tavola si allunga fino alla barra in fondo. */
@media(max-width:700px){
  #backgammon .backgammon-layout{display:flex;flex-direction:column}
  #backgammon .board-shell{flex:1 1 auto;display:flex;flex-direction:column}
  #backgammon .board{flex:1 1 auto;height:auto;min-height:min(96vw,calc(100svh - 376px))}
}

/* ===== Famiglie di giochi: un colore per tipo ===== */
:root{--cat-carte:#35a86a;--cat-strategia:#c2514c;--cat-tessere:#d9a23a;--cat-rompicapi:#4d86d6}
.game-gallery .game-card[data-cat="carte"]{background:linear-gradient(135deg,rgba(26,112,66,.97),rgba(7,44,26,.99))}
.game-gallery .game-card[data-cat="strategia"]{background:linear-gradient(135deg,rgba(128,36,38,.97),rgba(44,12,14,.99))}
.game-gallery .game-card[data-cat="tessere"]{background:linear-gradient(135deg,rgba(168,108,26,.97),rgba(62,38,8,.99))}
.game-gallery .game-card[data-cat="rompicapi"]{background:linear-gradient(135deg,rgba(40,84,160,.97),rgba(12,26,60,.99))}
.gallery-cat{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:14px 0 0;font:700 .72rem/1 inherit;letter-spacing:.16em;text-transform:uppercase;color:#c9d6d6}
.gallery-cat:first-child{margin-top:0}
.gallery-cat:before{content:"";width:12px;height:12px;border-radius:4px;background:var(--c)}
.gallery-cat:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--c),transparent);opacity:.5}
.cat-carte{--c:var(--cat-carte)}.cat-strategia{--c:var(--cat-strategia)}.cat-tessere{--c:var(--cat-tessere)}.cat-rompicapi{--c:var(--cat-rompicapi)}
[data-cat="carte"]{--c:var(--cat-carte)}[data-cat="strategia"]{--c:var(--cat-strategia)}[data-cat="tessere"]{--c:var(--cat-tessere)}[data-cat="rompicapi"]{--c:var(--cat-rompicapi)}
.games-list .games-cat{display:flex;align-items:center;gap:8px;margin:10px 2px 0;border:0;background:none;font:700 .66rem/1 inherit;letter-spacing:.16em;text-transform:uppercase;color:#c9d6d6}
.games-list .games-cat:first-child{margin-top:0}
.games-list .games-cat:before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.games-list li[data-cat]{box-shadow:inset 3px 0 0 var(--c)}
/* Nella barra in fondo, una lineetta del colore della famiglia sotto ogni icona. */
.tab[data-cat]{position:relative}
.tab[data-cat]:after{content:"";position:absolute;left:50%;bottom:1px;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:var(--c)}
@media(max-width:700px){.gallery-cat{margin-top:6px;font-size:.62rem}}

/* ===== Tresette ===== */
#tresette.game-view{max-width:820px}
.ts-controls,.nc-controls{display:flex!important;justify-content:space-between;align-items:center}
.ts-controls label,.nc-controls label{font-size:.8rem!important}
.ts-table{--cw:clamp(70px,calc(var(--play-h)*.13),124px);position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:24px;background:radial-gradient(circle at 50% 40%,#2f8a57,#154a2f 80%);border:6px solid #4a2f1c;box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 0 40px rgba(0,0,0,.25)}
.ts-player{display:flex;align-items:center;gap:10px;color:#e8f3ec}
.ts-player span{display:flex;flex-direction:column;min-width:0}
.ts-player small{font-size:.58rem;letter-spacing:.14em;color:#bfe0cc}
.ts-player b{font-size:.84rem}
.ts-player strong{margin-left:auto;min-width:48px;padding:4px 10px;border-radius:10px;background:rgba(0,0,0,.28);font:700 1.2rem Georgia,serif;text-align:center;color:var(--gold-light)}
.ts-backs{display:flex;padding-left:6px}
.ts-backs i{width:16px;height:26px;margin-left:-6px;border-radius:3px;background:repeating-linear-gradient(45deg,#7a2b22 0 3px,#963a2e 3px 6px);border:2px solid #f5ecd8;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.ts-center{flex:1 1 auto;display:grid;grid-template-columns:60px 1fr 60px;align-items:center;gap:6px;min-height:calc(var(--cw)*2)}
.ts-stock{position:relative;justify-self:start}
.ts-stock[hidden]{display:block;visibility:hidden}
.ts-stock .sc-card{display:block;width:46px;height:70px;cursor:default}
.ts-stock b{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-size:.72rem;color:#fff}
.ts-trick{display:flex;justify-content:center;gap:12px}
.ts-play.cpu{transform:translateY(calc(var(--cw)*-.18)) rotate(-4deg)}
.ts-play.me{transform:translateY(calc(var(--cw)*.18)) rotate(3deg)}
.ts-play .sc-card,.ts-slot{display:block;width:var(--cw);height:calc(var(--cw)*1.52);cursor:default}
.ts-slot{border-radius:9px;border:2px dashed rgba(255,255,255,.18)}
.ts-play .sc-card{animation:ts-in .25s ease-out}
@keyframes ts-in{from{opacity:0;scale:.8}}
.ts-shown{justify-self:end;display:flex;flex-direction:column;align-items:center;gap:3px;color:#d8ecdf;font-size:.56rem;text-align:center}
.ts-shown .sc-card{width:44px;height:67px;cursor:default}
.ts-status{margin:0;min-height:1.3em;text-align:center;color:#f0f7f2;font-size:.86rem}
.ts-hand{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;justify-items:center}
.ts-hand .sc-card{width:100%;max-width:calc(var(--cw)*1.05);height:auto;aspect-ratio:66/100;transition:transform .15s,filter .15s}
.ts-hand .sc-card.playable{transform:translateY(-4px);box-shadow:0 0 0 2px var(--gold-light),0 6px 12px rgba(0,0,0,.35)}
.ts-hand .sc-card.dim{filter:brightness(.68)}
.ts-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border-radius:18px;background:rgba(8,32,20,.9);text-align:center}
.ts-overlay[hidden]{display:none}
.ts-overlay b{font:italic 700 2rem Georgia,serif;color:var(--gold-light)}
.ts-overlay p{margin:0 0 6px;color:#dbece2;max-width:340px;line-height:1.45}
.ts-overlay .primary-button{width:auto;min-width:200px;justify-content:center}
@media(max-width:700px){#tresette.game-view{padding-left:4px;padding-right:4px}.ts-table{padding:8px 6px;border-width:4px;border-radius:18px;gap:8px}}

/* ===== Numeri incrociati ===== */
#incroci.game-view{max-width:820px}
.nc-shell{--gw:min(100vw - 40px,var(--play-h) - 200px,760px);display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:24px;background:#eef1f5;color:#1f2d3d;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.nc-top{display:flex;justify-content:space-between;font-size:.8rem;color:#56657a}
.nc-top b{color:#1f2d3d}
.nc-stage{position:relative;display:flex;justify-content:center}
.nc-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);width:var(--gw);aspect-ratio:1;gap:1px;padding:1px;background:#1f2d3d;border-radius:4px}
.nc-cell{display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;padding:0;border:0;background:#fff;color:#2f62b3;font:500 calc(var(--gw)/var(--n)*.58)/1 -apple-system,"SF Pro Rounded","Helvetica Neue",Arial,sans-serif;cursor:pointer}
.nc-cell.fixed{color:#1f2d3d;font-weight:700;background:#f4f6f9}
.nc-cell.sel{background:#d6e3f7}
.nc-cell.cur{background:#b8d2f8}
.nc-cell.bad{color:#d23b30;background:#fde3e0}
.nc-block{background:#2b3a4f}
.nc-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(238,241,245,.92);text-align:center}
.nc-overlay[hidden]{display:none}
.nc-overlay b{font:italic 700 1.9rem Georgia,serif}
.nc-overlay .primary-button{width:auto;min-width:200px;justify-content:center}
.nc-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.nc-tools button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:#4d565d;font:600 .72rem inherit;cursor:pointer;padding:4px 2px;border-radius:12px}
.nc-tools button:disabled{opacity:.35}
.nc-tools svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nc-tools em{position:absolute;top:0;left:58%;min-width:20px;padding:1px 6px;border-radius:99px;background:#2f62b3;color:#fff;font:700 .62rem/1.4 inherit;font-style:normal}
.nc-words{flex:1 1 auto;min-height:120px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.nc-group{flex:1 1 140px;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 2px 6px rgba(20,40,70,.12);transition:opacity .15s}
.nc-group.off{opacity:.4}
.nc-group small{display:block;padding:3px;text-align:center;background:#7a8aa0;color:#fff;font-size:.66rem;font-weight:700}
.nc-group>div{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;padding:4px 6px}
.nc-word{padding:4px 2px;border:0;background:transparent;color:#1f2d3d;font:600 1.02rem -apple-system,"SF Pro Rounded","Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums;cursor:pointer}
.nc-word.used{color:#b9c2cd;text-decoration:line-through}
@media(max-width:700px){#incroci.game-view{padding-left:6px;padding-right:6px}.nc-shell{padding:8px;border-radius:18px}}
#tresette .ts-table,#incroci .nc-shell{flex:1 1 auto;min-height:0}

/* ===== Backgammon: vassoio dei dadi sotto la tavola, pulsanti accanto, aiuto in fondo ===== */
.bg-tray{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 10px;min-height:70px;border-radius:16px;background:radial-gradient(circle at 30% 50%,#1d4a4c,#10302f 80%);box-shadow:inset 0 3px 10px rgba(0,0,0,.45),inset 0 0 0 1px rgba(240,207,139,.12)}
.bg-tray .bg-tray-dice{position:relative;flex:1;display:flex;align-items:center;gap:10px;min-height:52px;min-width:0}
.bg-tray .bg-tray-dice .bg-die{width:46px;height:46px;padding:7px}
.bg-tray .bg-tray-dice .bg-die .pip{width:8px;height:8px}
.bg-tray .bg-tray-dice.can-roll{cursor:pointer}
.bg-tray .bg-tray-dice.can-roll .bg-die{opacity:.9;box-shadow:0 0 0 2px rgba(240,207,139,.75),0 0 18px rgba(240,207,139,.45);animation:soft-pulse 1.6s ease-in-out infinite}
.bg-tray .bg-tray-dice .roll-hint{position:static;display:block;font-size:.66rem;letter-spacing:.04em;color:var(--gold-light);white-space:nowrap}
.bg-tray .bg-tray-dice .bg-moves{position:static}
/* I dadi arrivano rotolando dal lato del giocatore di turno. */
.bg-tray .bg-tray-dice.rolling.right .bg-die{animation:bg-tray-throw-r .6s cubic-bezier(.2,.8,.25,1) both,bg-die-tumble .16s ease-in-out infinite alternate}
.bg-tray .bg-tray-dice.rolling.left .bg-die{animation:bg-tray-throw-l .6s cubic-bezier(.2,.8,.25,1) both,bg-die-tumble .16s ease-in-out infinite alternate}
.bg-tray .bg-tray-dice.rolling .bg-die:nth-child(2){animation-delay:.05s,0s}
@keyframes bg-tray-throw-r{from{translate:220px -30px;rotate:320deg;opacity:0}}
@keyframes bg-tray-throw-l{from{translate:-120px -30px;rotate:-320deg;opacity:0}}
.bg-tray .board-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;padding:0;margin:0;flex:none}
.bg-tray .board-actions .text-button{margin:0;font-size:.72rem}
.bg-status{margin:8px 4px 0;text-align:center;color:#e6d5bd;font-size:.84rem}
.bg-status[hidden]{display:none}
@media(max-width:700px){
  /* Parte alta più compatta: più spazio alla tavola. */
  #backgammon .play-controls{margin-bottom:6px}
  #backgammon .board-shell{padding:6px 6px 8px}
  #backgammon .board-toolbar{padding:0 0 6px;gap:6px}
  #backgammon .player-chip{padding:4px 8px;border-radius:10px}
  #backgammon .player-chip b{font-size:.8rem}
  #backgammon .player-chip em{font-size:.54rem}
  .bg-tray{margin-top:8px;padding:6px 8px;min-height:62px;gap:6px}
  .bg-tray .bg-tray-dice .bg-die{width:42px;height:42px;padding:6px}
  .bg-tray .board-actions .secondary-button{padding:8px 10px;height:auto}
  .bg-tray .board-actions .primary-button.compact{min-width:0;padding:10px 12px;height:auto}
  .bg-status{margin-top:6px;font-size:.78rem}
}
/* Avviso di nuova versione, sopra la barra dei giochi. */
.update-bar{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:12px;width:min(520px,calc(100% - 24px));padding:10px 10px 10px 16px;border-radius:16px;background:#f2eadc;color:#172126;box-shadow:0 14px 40px rgba(0,0,0,.45);transform:translateX(-50%);font-size:.86rem;font-weight:600;animation:t48-fade .3s}
.update-bar[hidden]{display:none}
.update-bar span{flex:1}
.update-bar .primary-button.compact{min-width:0;margin:0;width:auto;padding:10px 16px}
@media(min-width:701px){.update-bar{bottom:24px}}
/* Ordine sul telefono: giocatori, tavola, vassoio dei dadi, aiuto. */
#backgammon .board-toolbar{order:0}
#backgammon .board{order:1}
#backgammon .bg-tray{order:2}
#backgammon .bg-status{order:3}
.bg-tray .bg-tray-dice .bg-die{flex:none}
.bg-tray .bg-tray-dice .roll-hint{display:none}
.bg-foot{order:3;display:flex;align-items:center;gap:10px;margin-top:6px;padding:0 4px;min-height:24px}
.bg-foot .bg-status{flex:1;margin:0;text-align:left}
.bg-foot .text-button{margin:0 0 0 auto;font-size:.74rem}

/* ===== Carte napoletane e piacentine vere (scansioni) ===== */
.sc-card.img{padding:0;overflow:hidden;background:#fff;box-shadow:0 5px 12px rgba(0,0,0,.35),0 0 0 1px rgba(80,60,30,.25)}
.sc-card.img img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none}
.sc-card.img.selected,.sc-card.img.playable{box-shadow:0 0 0 3px var(--gold-light),0 8px 16px rgba(0,0,0,.4)}
.sc-card.img.capturable{box-shadow:0 0 0 3px #ffe58a,0 0 18px rgba(255,220,120,.9)}
.sc-card.img.selected{box-shadow:0 0 0 3px var(--gold-light),0 16px 22px rgba(0,0,0,.4)}

/* ===== Chiudi la scatola ===== */
#scatola.game-view{max-width:640px}
#scatola .cs-shell,#minato .mn-shell{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.cs-shell,.mn-shell{padding:14px;border-radius:24px;background:linear-gradient(160deg,#e8c99a,#c99c62);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.cs-box{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:300px;border:8px solid #6b4526;border-radius:14px;background:radial-gradient(ellipse at 50% 40%,#2f8a58,#17563a 75%);box-shadow:inset 0 0 24px rgba(0,0,0,.5);overflow:hidden}
.cs-tiles{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;padding:12px 10px 14px;background:linear-gradient(#5a3a22,#4a2f1a);box-shadow:0 4px 10px rgba(0,0,0,.35);perspective:400px}
.cs-tile{aspect-ratio:.62;display:grid;place-items:center;padding:0;border:0;border-radius:7px;background:linear-gradient(170deg,#fff6e2,#e8cf9f);color:#3a2212;font:700 clamp(1.1rem,4.4vw,1.9rem) Georgia,serif;box-shadow:inset 0 -4px 0 rgba(120,70,20,.3),0 3px 5px rgba(0,0,0,.35);cursor:pointer;transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,.7,.3,1.2),opacity .3s,background .2s}
.cs-tile.sel{background:linear-gradient(170deg,#ffe39a,#f0b949);transform:translateY(-6px);box-shadow:inset 0 -4px 0 rgba(140,80,10,.35),0 8px 12px rgba(0,0,0,.35)}
.cs-tile.dim{opacity:.45;cursor:default}
.cs-tile.shut{transform:rotateX(78deg);opacity:.55;cursor:default;box-shadow:none;background:#2a1a0e}
.cs-tile.shut b{visibility:hidden}
.cs-felt{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:22px 12px}
.cs-dice{display:flex;gap:20px}
.cs-die{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:clamp(58px,15vw,86px);aspect-ratio:1;padding:13%;border-radius:18%;background:linear-gradient(150deg,#fffdf4,#e6dcc6);box-shadow:inset -4px -5px 8px rgba(81,56,26,.18),0 8px 16px rgba(0,0,0,.4)}
.cs-die i{width:74%;height:74%;place-self:center;border-radius:50%;background:#172126}
.cs-die.empty{opacity:.18}
.cs-dice.rolling .cs-die{animation:cs-roll .6s cubic-bezier(.3,.7,.4,1)}
.cs-dice.rolling .cs-die+.cs-die{animation-delay:.05s}
@keyframes cs-roll{0%{transform:translate(-60px,-30px) rotate(-200deg);opacity:0}60%{transform:translate(6px,4px) rotate(12deg);opacity:1}}
.cs-status{margin:0;min-height:1.4em;color:#f3e9d2;text-align:center;font-size:.98rem}
.cs-status b{color:var(--gold-light);font-size:1.2em}
.cs-actions{display:grid;grid-template-columns:auto 1fr 1.5fr;align-items:center;gap:10px;margin-top:12px}
.cs-actions .primary-button,.cs-actions .secondary-button{min-width:0;width:100%;justify-content:center}
.cs-actions .secondary-button{color:#4a2f1a;border-color:rgba(74,47,26,.4);padding:14px 10px}
.cs-actions .text-button{color:#4a2f1a;font-size:.86rem}
.cs-actions button:disabled{opacity:.4;cursor:default}
@media(max-width:700px){#scatola.game-view,#minato.game-view{padding-left:6px;padding-right:6px}.cs-shell,.mn-shell{padding:10px;border-radius:18px}.cs-box{border-width:6px}.cs-tiles{gap:3px;padding:10px 6px 12px}}

/* ===== Campo minato ===== */
#minato.game-view{max-width:600px}
@media(min-width:701px){#minato.game-view{max-width:min(900px,calc(var(--play-h)*.82))}}
#minato .fit-square{flex:1 1 0}
.mn-board{position:relative;width:var(--fit,100%);aspect-ratio:1;padding:5px;border-radius:12px;background:#6b4526;box-shadow:inset 0 0 10px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.3)}
.mn-cells{display:grid;grid-template:repeat(var(--n,9),minmax(0,1fr))/repeat(var(--n,9),minmax(0,1fr));gap:2px;width:100%;height:100%;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mn-cell{display:grid;place-items:center;border-radius:3px;background:linear-gradient(160deg,#8cc063,#5e9443);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.18);font:700 calc(var(--fit,360px)/var(--n,9)*.55)/1 Georgia,serif;cursor:pointer}
.mn-cell.open{background:#ecdcbc;box-shadow:inset 0 0 0 1px rgba(120,80,40,.12);cursor:default}
.mn-cell.n1{color:#1f5fbf}.mn-cell.n2{color:#2e7d32}.mn-cell.n3{color:#c62828}.mn-cell.n4{color:#283593}.mn-cell.n5{color:#8d2c12}.mn-cell.n6{color:#00838f}.mn-cell.n7{color:#222}.mn-cell.n8{color:#666}
.mn-cell.flag{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 21V4' stroke='%233a2212' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M8 4h10l-3 4 3 4H8z' fill='%23d23b30'/%3E%3C/svg%3E") center/62% no-repeat,linear-gradient(160deg,#8cc063,#5e9443)}
.mn-cell.flag.wrong{opacity:.45}
.mn-cell.mine,.mn-cell.boom{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4' stroke='%23172126' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='6' fill='%23172126'/%3E%3Ccircle cx='10' cy='10' r='1.6' fill='%23fff'/%3E%3C/svg%3E") center/70% no-repeat,#ecdcbc}
.mn-cell.boom{background-color:#e0503f}
.mn-cell.hint{animation:mn-hint .8s}
@keyframes mn-hint{0%,40%{box-shadow:inset 0 0 0 3px #f0b949}}
.mn-shell .sb-tools button[aria-pressed="true"]{background:rgba(90,58,34,.2);box-shadow:inset 0 0 0 2px rgba(90,58,34,.35)}

/* ===== Intestazione unica: niente barra in fondo né elenco dei giochi in alto =====
   Il logo in alto a sinistra riporta alla sala giochi; dentro un gioco accanto compare il suo nome. */
.tab-bar,.game-switcher,#homeBtn{display:none!important}
body{padding-bottom:env(safe-area-inset-bottom)!important}
.toast{bottom:calc(25px + env(safe-area-inset-bottom))!important}
.brand{min-width:0;flex:0 1 auto}
.brand>span:last-child{min-width:0}
.brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-back{display:none;width:22px;height:40px;margin-right:-6px;place-items:center}
.brand-back svg{width:22px;height:22px;fill:none;stroke:var(--gold-light);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.brand.in-game .brand-back{display:grid}
.brand.in-game b{letter-spacing:.02em;font:italic 600 1.25rem/1.1 'Playfair Display',Georgia,serif;text-transform:none}
.brand.in-game small{letter-spacing:.16em;color:var(--gold)}

/* ===== Scopa: panno verde, carte grandi, niente scritte in mezzo =====
   In alto le carte coperte dell'avversario, al centro il tavolo, a sinistra il mazzo, in basso la mano;
   le prese spuntano dal bordo come mazzetti coperti. Le misure (--my-w, --tb-w…) le calcola scFitTable(). */
#scopa .sc-table{--cr:.6;--my-w:96px;--opp-w:60px;--tb-w:72px;--deck-w:48px;--side:62px;position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;padding:0;overflow:hidden;border:0;border-radius:18px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 5px),radial-gradient(ellipse at 50% 42%,#23823f,#146129 58%,#0c4520);box-shadow:inset 0 0 70px rgba(0,0,0,.4),0 20px 50px rgba(0,0,0,.35)}
#scopa.deck-napoletane .sc-table{--cr:.605}#scopa.deck-piacentine .sc-table{--cr:.515}#scopa.deck-bergamasche .sc-table{--cr:.545}#scopa.deck-trevisane .sc-table{--cr:.5}#scopa.deck-triestine .sc-table{--cr:.546}#scopa.deck-sarde .sc-table{--cr:.707}
#scopa .sc-card{width:var(--tb-w);height:calc(var(--tb-w)/var(--cr));border-radius:7px}
#scopa .sc-hand{display:flex;justify-content:center;gap:10px;flex:none;min-height:0}
#scopa .sc-hand.opp{gap:8px;min-height:calc(var(--opp-w)/var(--cr))}
#scopa .sc-hand.opp .sc-card{width:var(--opp-w);height:calc(var(--opp-w)/var(--cr))}
#scopa .sc-hand.mine{min-height:calc(var(--my-w)/var(--cr));padding-bottom:2px}
#scopa .sc-hand.mine .sc-card{width:var(--my-w);height:calc(var(--my-w)/var(--cr))}
#scopa .sc-hand.mine .sc-card.selected{transform:translateY(-12px)}
#scopa .sc-pile{flex:none;position:relative;height:calc(var(--opp-w)*.5);display:flex;justify-content:center}
#scopa .sc-pile .sc-card{width:calc(var(--opp-w)/var(--cr));height:var(--opp-w);position:absolute}
#scopa .sc-pile.top .sc-card{bottom:0}
#scopa .sc-pile.bottom .sc-card{top:0}
#scopa .sc-mid{position:relative;flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 var(--side)}
#scopa .sc-table-cards{flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;max-width:100%;max-height:100%}
#scopa .sc-deck{position:absolute;left:8px;top:50%;transform:translateY(-50%);display:block}
#scopa .sc-deck .sc-card{width:var(--deck-w);height:calc(var(--deck-w)/var(--cr));display:block}
#scopa .sc-deck b{position:absolute;left:50%;top:-12px;transform:translateX(-50%);min-width:28px;padding:2px 6px;border-radius:99px;background:#0c4520;color:#f3e6cc;font:700 .8rem/1.2 inherit;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
#scopa .sc-chip{position:absolute;right:6px;width:54px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 3px;border-radius:14px;background:rgba(0,0,0,.24);color:#f3e6cc;opacity:.62;transition:opacity .2s,box-shadow .2s}
#scopa .sc-chip.top{top:6px}#scopa .sc-chip.bottom{bottom:6px}
#scopa .sc-chip.active{opacity:1;box-shadow:0 0 0 2px var(--gold-light)}
#scopa .sc-chip strong{font:700 1.45rem/1 Georgia,serif;color:var(--gold-light)}
#scopa .sc-chip b{max-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.64rem}
#scopa .sc-chip small{font-size:.56rem;color:#ffe58a}
#scopa .sc-note{position:absolute;left:50%;top:6px;transform:translateX(-50%);margin:0;padding:6px 12px;border-radius:99px;background:rgba(0,0,0,.4);color:#fff3dc;font-size:.8rem;white-space:nowrap;z-index:2}
#scopa .sc-card.capturable,#scopa .sc-card.taking{box-shadow:0 0 0 3px #e4f23b,0 6px 14px rgba(0,0,0,.35)}
#scopa .sc-card.incoming{box-shadow:0 0 0 3px var(--gold-light),0 10px 20px rgba(0,0,0,.45);animation:pc-in .35s cubic-bezier(.2,.8,.2,1)}
#scopa .sc-card.back{box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 0 0 3px #f3e6cc}
#scopa .sc-cover{border-radius:18px}

/* Segnapunti negli angoli (in alto l'avversario, in basso tu) e nuova partita come icona: il centro resta tutto al tavolo. */
#scopa .sc-mid{padding:0 10px 0 var(--side)}
#scopa .sc-chip{flex-direction:row;width:auto;gap:6px;padding:4px 10px 4px 8px;border-radius:99px;right:8px;z-index:3}
#scopa .sc-chip.top{top:8px}#scopa .sc-chip.bottom{top:auto;bottom:8px}
#scopa .sc-chip strong{font-size:1.1rem}
#scopa .sc-chip b{max-width:84px;font-size:.72rem}
#scopa .sc-table>.sc-chip{position:absolute}
#scopa .sc-new{position:absolute;left:8px;top:8px;z-index:3;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(0,0,0,.24);cursor:pointer}
#scopa .sc-new svg{width:18px;height:18px;fill:none;stroke:#f3e6cc;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ===== Scopa: panno verde, carte grandi, niente scritte in mezzo =====
   In alto le carte coperte dell'avversario, al centro il tavolo, a sinistra il mazzo, in basso la mano;
   le prese spuntano dal bordo come mazzetti coperti. Le misure (--my-w, --tb-w…) le calcola scFitTable(). */
#briscola .sc-table{--cr:.6;--my-w:96px;--opp-w:60px;--tb-w:72px;--deck-w:48px;--side:62px;position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;padding:0;overflow:hidden;border:0;border-radius:18px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 5px),radial-gradient(ellipse at 50% 42%,#23823f,#146129 58%,#0c4520);box-shadow:inset 0 0 70px rgba(0,0,0,.4),0 20px 50px rgba(0,0,0,.35)}
#briscola.deck-napoletane .sc-table{--cr:.605}#briscola.deck-piacentine .sc-table{--cr:.515}#briscola.deck-bergamasche .sc-table{--cr:.545}#briscola.deck-trevisane .sc-table{--cr:.5}#briscola.deck-triestine .sc-table{--cr:.546}#briscola.deck-sarde .sc-table{--cr:.707}
#briscola .sc-card{width:var(--tb-w);height:calc(var(--tb-w)/var(--cr));border-radius:7px}
#briscola .sc-hand{display:flex;justify-content:center;gap:10px;flex:none;min-height:0}
#briscola .sc-hand.opp{gap:8px;min-height:calc(var(--opp-w)/var(--cr))}
#briscola .sc-hand.opp .sc-card{width:var(--opp-w);height:calc(var(--opp-w)/var(--cr))}
#briscola .sc-hand.mine{min-height:calc(var(--my-w)/var(--cr));padding-bottom:2px}
#briscola .sc-hand.mine .sc-card{width:var(--my-w);height:calc(var(--my-w)/var(--cr))}
#briscola .sc-hand.mine .sc-card.selected{transform:translateY(-12px)}
#briscola .sc-pile{flex:none;position:relative;height:calc(var(--opp-w)*.5);display:flex;justify-content:center}
#briscola .sc-pile .sc-card{width:calc(var(--opp-w)/var(--cr));height:var(--opp-w);position:absolute}
#briscola .sc-pile.top .sc-card{bottom:0}
#briscola .sc-pile.bottom .sc-card{top:0}
#briscola .sc-mid{position:relative;flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 var(--side)}
#briscola .sc-table-cards{flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;max-width:100%;max-height:100%}
#briscola .sc-deck{position:absolute;left:8px;top:50%;transform:translateY(-50%);display:block}
#briscola .sc-deck .sc-card{width:var(--deck-w);height:calc(var(--deck-w)/var(--cr));display:block}
#briscola .sc-deck b{position:absolute;left:50%;top:-12px;transform:translateX(-50%);min-width:28px;padding:2px 6px;border-radius:99px;background:#0c4520;color:#f3e6cc;font:700 .8rem/1.2 inherit;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
#briscola .sc-chip{position:absolute;right:6px;width:54px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 3px;border-radius:14px;background:rgba(0,0,0,.24);color:#f3e6cc;opacity:.62;transition:opacity .2s,box-shadow .2s}
#briscola .sc-chip.top{top:6px}#briscola .sc-chip.bottom{bottom:6px}
#briscola .sc-chip.active{opacity:1;box-shadow:0 0 0 2px var(--gold-light)}
#briscola .sc-chip strong{font:700 1.45rem/1 Georgia,serif;color:var(--gold-light)}
#briscola .sc-chip b{max-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.64rem}
#briscola .sc-chip small{font-size:.56rem;color:#ffe58a}
#briscola .sc-note{position:absolute;left:50%;top:6px;transform:translateX(-50%);margin:0;padding:6px 12px;border-radius:99px;background:rgba(0,0,0,.4);color:#fff3dc;font-size:.8rem;white-space:nowrap;z-index:2}
#briscola .sc-card.capturable,#briscola .sc-card.taking{box-shadow:0 0 0 3px #e4f23b,0 6px 14px rgba(0,0,0,.35)}
#briscola .sc-card.incoming{box-shadow:0 0 0 3px var(--gold-light),0 10px 20px rgba(0,0,0,.45);animation:pc-in .35s cubic-bezier(.2,.8,.2,1)}
#briscola .sc-card.back{box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 0 0 3px #f3e6cc}
#briscola .sc-cover{border-radius:18px}

/* Segnapunti negli angoli (in alto l'avversario, in basso tu) e nuova partita come icona: il centro resta tutto al tavolo. */
#briscola .sc-mid{padding:0 10px 0 var(--side)}
#briscola .sc-chip{flex-direction:row;width:auto;gap:6px;padding:4px 10px 4px 8px;border-radius:99px;right:8px;z-index:3}
#briscola .sc-chip.top{top:8px}#briscola .sc-chip.bottom{top:auto;bottom:8px}
#briscola .sc-chip strong{font-size:1.1rem}
#briscola .sc-chip b{max-width:84px;font-size:.72rem}
#briscola .sc-table>.sc-chip{position:absolute}
#briscola .sc-new{position:absolute;left:8px;top:8px;z-index:3;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(0,0,0,.24);cursor:pointer}
#briscola .sc-new svg{width:18px;height:18px;fill:none;stroke:#f3e6cc;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}


/* Briscola: il mazzo con la briscola scoperta di traverso e le due carte della presa al centro. */
#briscola .sc-mid{padding:0 var(--side)}
#briscola .bs-deck{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:calc(var(--deck-w)/var(--cr) + 8px);height:calc(var(--deck-w)/var(--cr))}
#briscola .bs-deck .sc-card{position:absolute;width:var(--deck-w);height:calc(var(--deck-w)/var(--cr));cursor:default}
#briscola .bs-deck .bs-trump{left:calc(var(--deck-w)*.35);top:50%;transform:translateY(-50%) rotate(90deg)}
#briscola .bs-deck .back{left:0;top:0}
#briscola .bs-deck b{position:absolute;left:calc(var(--deck-w)/2);top:-12px;transform:translateX(-50%);z-index:2;min-width:28px;padding:2px 6px;border-radius:99px;background:#0c4520;color:#f3e6cc;font:700 .8rem/1.2 inherit;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
#briscola .bs-trick{display:flex;gap:14px;align-items:center;justify-content:center;min-height:calc(var(--tb-w)/var(--cr))}
#briscola .bs-slot{width:var(--tb-w);height:calc(var(--tb-w)/var(--cr))}
#briscola .bs-slot.cpu{transform:translateY(-10%) rotate(-4deg)}#briscola .bs-slot.me{transform:translateY(10%) rotate(3deg)}
#briscola .bs-played{animation:pc-in .3s cubic-bezier(.2,.8,.2,1)}
#briscola .bs-suit{position:absolute;left:10px;bottom:6px;font-size:.7rem;color:#e8f5d0;opacity:.75}
#briscola .sc-hand.mine .sc-card.trump{box-shadow:0 0 0 2px rgba(228,242,59,.55),0 5px 12px rgba(0,0,0,.35)}
#briscola .ts-overlay{border-radius:18px}
/* Dorso unico e classico per tutte le carte italiane coperte (bordeaux a rombi, cornice dorata). */
.sc-card.back,#scopa .sc-card.back,[class*="deck-"] .sc-card.back{background:url(cards/back.svg) center/100% 100% no-repeat;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.ts-backs i{background:url(cards/back.svg) center/100% 100% no-repeat;border:0}
/* Il nome del gioco è già in alto accanto al logo: il titolo grande sopra il tavolo non serve (restano solo gli indicatori di turno). */
.game-view .section-heading>div:first-child{display:none}
.game-view .section-heading:not(:has(>:nth-child(2))){display:none}

/* Durante il gioco il piè di pagina non serve e farebbe scorrere lo schermo. */
body:has(.game-view.active) .site-footer{display:none}

/* ===== Tresette, Scala 40 e Domino nello stile della Scopa =====
   Stesso panno verde senza cornice di legno, niente frasi in mezzo al tavolo, righe dei giocatori leggere
   e dorsi dell'avversario ben visibili. La nota compare solo quando la partita aspetta qualcosa (online). */
#tresette .ts-table,#scala40 .s4-table,#domino .do-table{border:0;border-radius:18px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 5px),radial-gradient(ellipse at 50% 42%,#23823f,#146129 58%,#0c4520);box-shadow:inset 0 0 70px rgba(0,0,0,.4),0 20px 50px rgba(0,0,0,.35)}
#tresette .ts-status,#scala40 .s4-status,#domino .do-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;margin:0;min-height:0;padding:6px 14px;border-radius:99px;background:rgba(0,0,0,.45);color:#fff3dc;font-size:.8rem;white-space:nowrap;pointer-events:none}
#tresette .ts-status:empty,#scala40 .s4-status:empty,#domino .do-status:empty{display:none}
#tresette .ts-player,#scala40 .s4-player,#domino .do-player{color:#f3e6cc;min-height:0}
#tresette .ts-player small,#scala40 .s4-player small,#domino .do-player small{color:#cfe6d4;letter-spacing:.12em}
#tresette .ts-player strong,#scala40 .s4-player strong,#domino .do-player strong{min-width:0;padding:3px 12px;border-radius:99px;background:rgba(0,0,0,.24);font-size:1.1rem}
#tresette .ts-player:not(.mine) .ts-backs,#scala40 .s4-player:not(.mine) .s4-backs{flex:1;justify-content:center;padding-left:20px}
#tresette .ts-backs i{width:34px;height:54px;margin-left:-20px;border-radius:5px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
#scala40 .s4-backs i{width:28px;height:42px;margin-left:-18px;border:0;border-radius:4px;background:url(cards/back.svg) center/100% 100% no-repeat;box-shadow:0 2px 6px rgba(0,0,0,.4)}
#scala40 .s4-card.back{background:url(cards/back.svg) center/100% 100% no-repeat;border:0}
#domino .do-backs{flex:1;justify-content:center}
#domino .do-backs i{width:20px;height:38px;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.4)}
#tresette .ts-overlay,#scala40 .s4-overlay,#domino .do-overlay{border-radius:18px}
/* Nuova partita come icona nell'angolo; le righe dei giocatori lasciano spazio all'icona. */
#tresette .sc-new,#scala40 .sc-new,#domino .sc-new{position:absolute;left:auto;right:8px;top:auto;bottom:8px;z-index:3;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(0,0,0,.24);cursor:pointer}
#tresette .sc-new svg,#scala40 .sc-new svg,#domino .sc-new svg{width:16px;height:16px;fill:none;stroke:#f3e6cc;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#tresette .ts-player.mine strong,#scala40 .s4-player.mine strong,#domino .do-player.mine strong{margin-right:40px}
/* Carte giocabili: niente cornice dorata, si scuriscono solo quelle che non si possono giocare. */
#tresette .ts-hand .sc-card.playable{transform:none;box-shadow:0 4px 10px rgba(0,0,0,.35)}
#tresette .ts-hand .sc-card.dim{filter:brightness(.55)}

/* ===== Mulino: tavola di legno chiaro, pedine avorio e noce ===== */
#mulino.game-view{max-width:760px}
#mulino .ml-table{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px;border-radius:18px;
  background:repeating-linear-gradient(94deg,rgba(120,70,20,.05) 0 3px,transparent 3px 9px),radial-gradient(ellipse at 40% 30%,#f0c98f,#d9a468 70%,#c48d52);box-shadow:inset 0 0 50px rgba(90,50,10,.35),0 20px 50px rgba(0,0,0,.35)}
#mulino .ml-players{display:flex;gap:10px;width:100%;padding-left:40px}
#mulino .ml-player{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:14px;background:rgba(90,50,15,.12);color:#3b2412;opacity:.6;transition:.2s}
#mulino .ml-player.active{opacity:1;background:rgba(90,50,15,.22);box-shadow:inset 0 0 0 2px #6b3f18}
#mulino .ml-player>span{display:flex;flex-direction:column;min-width:0}
#mulino .ml-player b{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mulino .ml-player em{margin-left:auto;font-style:normal}
#mulino .ml-player em b{font:700 1.15rem Georgia,serif}
#mulino .ml-dot{flex:none;width:22px;height:22px;border-radius:50%}
#mulino .ml-dot.w,#mulino .ml-hand i{background:radial-gradient(circle at 40% 35%,#f7ecd2,#c9ae7c)}
#mulino .ml-dot.b{background:radial-gradient(circle at 40% 35%,#5a4a3c,#1f1812)}
#mulino #mlBlackHand .ml-hand i{background:radial-gradient(circle at 40% 35%,#5a4a3c,#1f1812)}
#mulino .ml-hand{display:flex;gap:2px;min-height:9px;margin-top:2px}
#mulino .ml-hand i{width:9px;height:9px;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.35)}
#mulino .ml-status{margin:0;min-height:1.3em;color:#4a2c14;font:italic 600 .95rem Georgia,serif;text-align:center}
#mulino .ml-board{flex:1 1 0;min-height:0;width:100%;max-width:640px}
#mulino .ml-lines{fill:none;stroke:#7a4a22;stroke-width:6;stroke-linecap:round}
#mulino .ml-hole{fill:#e4b77c;stroke:#7a4a22;stroke-width:5}
#mulino .ml-hole.target{fill:#fff4d8;stroke:#3c7a3a;stroke-width:6}
#mulino .ml-hole.last{stroke:#b6461c}
#mulino .ml-piece circle:first-child{filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
#mulino .ml-piece .ring{stroke-width:1.6;opacity:.45}
#mulino .ml-piece.w .ring{stroke:#8d6d3c}#mulino .ml-piece.b .ring{stroke:#8a735f}
#mulino .ml-piece.movable circle:first-child{stroke:#3c7a3a;stroke-width:4}
#mulino .ml-piece.selected circle:first-child{stroke:#2f8f3c;stroke-width:7}
#mulino .ml-piece.removable circle:first-child{stroke:#c0392b;stroke-width:7;animation:ml-pulse 1s ease-in-out infinite}
#mulino .ml-piece.last circle:first-child{stroke:#b6461c;stroke-width:3}
@keyframes ml-pulse{50%{stroke-width:2}}
#mulino .ml-hit{fill:transparent;cursor:pointer}
#mulino .sc-new{position:absolute;left:8px;top:8px;z-index:3;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(90,50,15,.18);cursor:pointer}
#mulino .sc-new svg{width:17px;height:17px;fill:none;stroke:#4a2c14;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ===== Flipper: il tavolo riempie lo spazio disponibile, niente scorrimento durante il gioco ===== */
#flipper.game-view{max-width:720px}
#flipper .fp-table{position:relative;flex:1 1 auto;min-height:0;display:flex;padding:6px;border-radius:18px;background:#041219;box-shadow:0 20px 50px rgba(0,0,0,.4)}
#flipper .fp-stage{flex:1 1 0;min-height:0;display:grid;place-items:center;overflow:hidden}
#flipper canvas{display:block;border-radius:12px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#flipper .sc-new{position:absolute;left:10px;top:10px;z-index:3;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.08);cursor:pointer}
#flipper .sc-new svg{width:17px;height:17px;fill:none;stroke:#f3e6cc;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Nuova categoria della home: Arcade. */
:root{--cat-arcade:#9a5bd6}
.game-gallery .game-card[data-cat="arcade"]{background:linear-gradient(135deg,rgba(96,48,150,.97),rgba(30,12,52,.99))}
.cat-arcade,[data-cat="arcade"]{--c:var(--cat-arcade)}

/* Mattoncini: stesso contenitore del flipper, bordo di legno come nei giochi arcade. */
#mattoncini.game-view{max-width:720px}
#mattoncini .mt-table{background:#2a170a}
#mattoncini .sc-new{left:auto;right:10px;background:rgba(0,0,0,.25)}
#mattoncini .fp-table{position:relative;flex:1 1 auto;min-height:0;display:flex;padding:6px;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
#mattoncini .fp-stage{flex:1 1 0;min-height:0;display:grid;place-items:center;overflow:hidden}
#mattoncini canvas{display:block;border-radius:12px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#mattoncini .sc-new{position:absolute;top:10px;z-index:3;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer}
#mattoncini .sc-new svg{width:17px;height:17px;fill:none;stroke:#f3e6cc;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#mattoncini .sc-new{top:auto;bottom:12px;right:14px;width:28px;height:28px}
#flipper .sc-new{top:auto;bottom:12px;left:12px;width:28px;height:28px}

/* Flipper a tutto schermo: niente barra in alto, si torna alla sala giochi con la freccia nel tavolo. */
body:has(#flipper.game-view.active) .topbar{display:none}
#flipper.game-view.active{padding-top:max(6px,env(safe-area-inset-top));min-height:100svh}
#flipper .fp-table{min-height:calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
#flipper .fp-back{position:absolute;left:12px;top:12px;z-index:3;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.1);cursor:pointer}
#flipper .fp-back svg{width:18px;height:18px;fill:none;stroke:#f3e6cc;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Margine in basso: le dita restano lontane dal bordo del telefono, dove iOS cambia app o pagina. */
#flipper.game-view.active,#mattoncini.game-view.active{padding-bottom:calc(22px + env(safe-area-inset-bottom))}

/* ===== Giochi Arcade a tutto schermo: niente barra in alto, freccia per tornare alla sala, margine in basso lontano dal bordo del telefono ===== */
body:has(.arcade-view.active) .topbar{display:none}
.arcade-view.game-view{max-width:720px}
.arcade-view.game-view.active{padding:max(6px,env(safe-area-inset-top)) 8px calc(22px + env(safe-area-inset-bottom));min-height:100svh}
.arcade-view .section-heading{display:none}
.arcade-view .fp-table{position:relative;flex:1 1 auto;min-height:0;display:flex;padding:6px;border-radius:18px;background:#041219;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.arcade-view .fp-stage{flex:1 1 0;min-height:0;display:grid;place-items:center;overflow:hidden}
.arcade-view canvas{display:block;border-radius:12px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.arcade-view .fp-back,.arcade-view .sc-new{position:absolute;z-index:3;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.12);cursor:pointer}
.arcade-view .fp-back{left:12px;top:12px;width:32px;height:32px}
.arcade-view .sc-new{right:12px;top:12px;width:30px;height:30px}
.arcade-view .fp-back svg,.arcade-view .sc-new svg{width:17px;height:17px;fill:none;stroke:#f3e6cc;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
#mattoncini .fp-back{background:rgba(0,0,0,.25)}

/* Arcade: la pagina non scorre mai durante il gioco e il tavolo sta esattamente nello schermo. */
html:has(.arcade-view.active),body:has(.arcade-view.active){overflow:hidden;height:100%;overscroll-behavior:none}
.arcade-view.game-view.active{height:100svh;min-height:0;box-sizing:border-box;touch-action:none}
#flipper .fp-table,#mattoncini .fp-table{min-height:0}
/* Arcade da bordo a bordo: niente cornice né margini, restano solo le zone di sicurezza del telefono (isola in alto, barra in basso). */
.arcade-view.game-view.active{max-width:none;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);background:#05070d}
body:has(.arcade-view.active){background:#05070d}
.arcade-view .fp-table,#flipper .fp-table,#mattoncini .fp-table,#mattoncini .mt-table{padding:0;border-radius:0;box-shadow:none;background:#05070d}
.arcade-view canvas{border-radius:0}
.arcade-view .fp-back{top:8px;left:8px;background:rgba(0,0,0,.35)}
.arcade-view .sc-new{top:8px;right:8px;background:rgba(0,0,0,.35)}
#flipper .sc-new{top:auto;bottom:10px;left:8px}
#mattoncini .sc-new{top:auto;bottom:6px;right:8px}

/* ===== Quattro in fila: griglia blu classica su un tavolo scuro ===== */
#forza4.game-view{max-width:760px}
#forza4 .f4-table{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px;border-radius:18px;background:radial-gradient(ellipse at 50% 30%,#1b2d52,#0d1730 70%);box-shadow:0 20px 50px rgba(0,0,0,.35)}
#forza4 .f4-players{display:flex;gap:10px;width:100%;padding-left:40px}
#forza4 .f4-player{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:14px;background:rgba(255,255,255,.06);color:#e9eefc;opacity:.6;transition:.2s}
#forza4 .f4-player.active{opacity:1;box-shadow:inset 0 0 0 2px #7aa2ff}
#forza4 .f4-player>span{display:flex;flex-direction:column;min-width:0}
#forza4 .f4-player b{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#forza4 .f4-player small{font-size:.66rem;color:#9fb3e6}
#forza4 .f4-player em{margin-left:auto;font:700 1.15rem Georgia,serif;font-style:normal}
#forza4 .f4-dot{flex:none;width:22px;height:22px;border-radius:50%}
#forza4 .f4-dot.w{background:radial-gradient(circle at 38% 35%,#ff8a8a,#c81d25)}
#forza4 .f4-dot.b{background:radial-gradient(circle at 38% 35%,#fff0a0,#e0a800)}
#forza4 .f4-status{margin:0;min-height:1.3em;color:#dfe7ff;font:italic 600 .95rem Georgia,serif;text-align:center}
#forza4 .f4-board{flex:1 1 0;min-height:0;width:100%;max-width:620px;touch-action:none;cursor:pointer}
#forza4 .f4-disc.ghost{opacity:.55}
#forza4 .f4-disc.drop{animation:f4-drop .38s cubic-bezier(.45,0,.7,1.2)}
@keyframes f4-drop{from{transform:translateY(var(--from))}}
#forza4 .f4-disc.win circle:first-child{stroke:#fff;stroke-width:6;animation:f4-win .8s ease-in-out infinite}
@keyframes f4-win{50%{stroke-width:1}}
#forza4 .sc-new{position:absolute;left:8px;top:8px;z-index:3;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.1);cursor:pointer}
#forza4 .sc-new svg{width:17px;height:17px;fill:none;stroke:#e9eefc;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Quattro in fila: la griglia sta subito sotto il messaggio, senza spazio vuoto sopra. */
#forza4 .f4-table{justify-content:flex-start}
#forza4 .f4-board{flex:0 1 auto;height:auto;max-height:100%;aspect-ratio:740/634}
#forza4 .f4-board{margin:auto 0}
/* Blocchi e Tris di tessere: lo sfondo intorno al disegno ha lo stesso colore del gioco. */
#blocchi.game-view.active,body:has(#blocchi.active),#blocchi .fp-table{background:#2f1f14}
#tris.game-view.active,body:has(#tris.active),#tris .fp-table{background:#1f5139}
/* ===== Giochi a tutto schermo: niente barra in alto, solo una fascia con ←, i comandi del gioco e ☰ ===== */
body:has(.game-view.active) .topbar{display:none}
.game-view.active{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
.game-nav{flex:none;display:flex;align-items:center;gap:8px;min-height:40px;margin-bottom:8px}
.gn-mid{flex:1 1 auto;min-width:0}
.gn-btn{flex:none;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(2,17,22,.45);cursor:pointer}
.gn-btn svg{width:18px;height:18px;fill:none;stroke:var(--cream);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.game-nav .play-controls{margin:0}
/* Lo schermo resta fermo mentre si gioca: la pagina non scorre e non rimbalza. */
html:has(.game-view.active),body:has(.game-view.active){overflow:hidden;height:100%;overscroll-behavior:none}
/* Se un tavolo non entra (schermi molto bassi), scorre solo il gioco e mai la pagina. */
.game-view.active{height:100svh;min-height:0;max-height:100svh;overflow:hidden auto;overscroll-behavior:contain}
.arcade-view.game-view.active{overflow:hidden}
/* Niente titoli né etichette sopra il gioco. */
.game-view .section-heading{display:none!important}
.game-nav .mode{white-space:nowrap}
.game-nav .bj-bar{margin:0}
.game-nav .play-controls label{margin:0;font-size:0!important;gap:0}
.game-nav .play-controls label select{font-size:.72rem}
/* Dadi 13 in colonna (telefono e iPad in verticale): i dadi prendono lo spazio che serve, il punteggio il resto e scorre al suo interno. */
@media(max-width:980px){#yahtzee .yahtzee-layout{grid-template-rows:auto minmax(0,1fr)}#yahtzee .score-card{min-height:0;overflow:auto;overscroll-behavior:contain}}
/* A due colonne (iPad in orizzontale, schermi bassi) la scheda può essere più alta dello spazio: scorre, altrimenti Cinquina e Chance restano irraggiungibili. */
#yahtzee .score-card{overflow:auto;overscroll-behavior:contain}
/* Giochi autonomi in un riquadro (cartella giochi/): il riquadro occupa tutto lo schermo e il gioco ha i suoi comandi. */
.frame-view.game-view.active{padding:0;background:#05070d}
.frame-view .frame-game{display:block;flex:1 1 auto;width:100%;min-height:0;border:0;background:#05070d}
/* Flipper: selettore del tavolo in alto al centro (quello attivo è evidenziato), e il tavolo Nova (riquadro) al posto di quello classico. */
.fp-bar{flex:none;position:relative;display:flex;justify-content:center;margin:6px 0}
.fp-home{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.05);cursor:pointer}
.fp-home svg{width:17px;height:17px;fill:none;stroke:#f3e6cc;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.fp-tables{flex:none;display:flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:99px;background:rgba(255,255,255,.05)}
.fp-tables button{min-width:92px;height:30px;padding:0 16px;border:0;border-radius:99px;background:transparent;color:#b9c0d4;font:800 .72rem/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.fp-tables button.on{background:#f3e6cc;color:#1a1226;box-shadow:0 0 16px rgba(243,230,204,.35)}
#flipper.nova .fp-table{display:none}
#flipper:not(.nova) .fp-nova{display:none}
#flipper .fp-nova{display:block;flex:1 1 auto;width:100%;min-height:0;border:0;background:#05070d}
/* ===== Solitario: tavolo verde, carte francesi disegnate in pagina, posizioni calcolate in solitario.js ===== */
#solitario.game-view{max-width:900px}
.sl-felt{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:20px;background:radial-gradient(circle at 50% 35%,#2f8a57,#154a2f 80%);border:5px solid #4a2f1c;box-shadow:0 20px 50px rgba(0,0,0,.4),inset 0 0 40px rgba(0,0,0,.25);overflow:hidden}
.sl-table{--cw:48px;position:relative;flex:1 1 auto;min-height:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sl-slot{position:absolute;width:var(--cw);height:calc(var(--cw)*1.45);border-radius:calc(var(--cw)*.12);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);background:rgba(0,0,0,.08)}
.sl-found{display:grid;place-items:center}.sl-found span{font:700 calc(var(--cw)*.4) Georgia,serif;color:rgba(255,255,255,.2)}
.sl-col,.sl-waste{box-shadow:inset 0 0 0 2px rgba(255,255,255,.1)}
.sl-stock{cursor:pointer}.sl-stock.recycle::after{content:"↻";position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.55);font-size:calc(var(--cw)*.55)}
.sl-stock.hint{box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 0 0 3px #f0cf8b,0 0 16px rgba(240,207,139,.7)}
.sl-card{position:absolute;left:0;top:0;width:var(--cw);height:calc(var(--cw)*1.45);border-radius:calc(var(--cw)*.06);background:var(--face) center/100% 100% no-repeat;color:#1b1f22;box-shadow:0 1px 3px rgba(0,0,0,.45);font-family:Georgia,serif;transition:transform .18s ease;cursor:pointer;will-change:transform}
.sl-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sl-cor{position:absolute;left:calc(var(--cw)*.07);top:calc(var(--cw)*.04);display:flex;align-items:baseline;gap:1px;line-height:1}
.sl-cor b{font-size:calc(var(--cw)*.36);letter-spacing:-.04em}.sl-cor i{font-style:normal;font-size:calc(var(--cw)*.3);font-family:"Apple Symbols","Segoe UI Symbol",serif}
.sl-mid{position:absolute;right:calc(var(--cw)*.08);bottom:calc(var(--cw)*.04);font-size:calc(var(--cw)*.62);line-height:1;font-family:"Apple Symbols","Segoe UI Symbol",serif}
.sl-card.down{background:#8a2b2b url(cards/back.svg) center/cover;box-shadow:0 1px 3px rgba(0,0,0,.4),inset 0 0 0 2px #f5f0e4}
.sl-card.down>*{visibility:hidden}
.sl-card.drag{transition:none;box-shadow:0 10px 20px rgba(0,0,0,.45)}
.sl-card.hint{box-shadow:0 0 0 3px #f0cf8b,0 0 18px rgba(240,207,139,.8)}
.sl-card.shake{animation:sl-shake .3s}
@keyframes sl-shake{25%{margin-left:-4px}50%{margin-left:4px}75%{margin-left:-2px}}
.sl-table.dealing .sl-card{transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.sl-bar{flex:none;display:flex;align-items:center;gap:6px;padding:6px 8px;background:rgba(0,0,0,.22)}
.sl-bar button{display:flex;align-items:center;gap:5px;height:34px;padding:0 10px;border:0;border-radius:99px;background:rgba(255,255,255,.1);color:#f3e6cc;font:700 .72rem system-ui,sans-serif;cursor:pointer}
.sl-bar button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sl-bar button:disabled{opacity:.35}
.sl-bar .sl-auto{background:#f0cf8b;color:#2a1c0c}
.sl-stats{flex:1;display:flex;justify-content:center;gap:10px;color:#dfe9dd;font:600 .74rem system-ui,sans-serif;white-space:nowrap}
.sl-win{position:absolute;inset:0;z-index:2000;display:grid;place-content:center;justify-items:center;gap:6px;background:rgba(8,30,18,.72);color:#fff;text-align:center}
.sl-win[hidden]{display:none}.game-nav .sl-controls{display:flex;justify-content:center}
.sl-win b{font:700 2rem Georgia,serif}.sl-win p{margin:0 0 8px;color:#cfe3d4}
/* Blackjack a tutto schermo: il tavolo arriva fino in fondo. */
#blackjack.game-view.active{padding-bottom:max(8px,env(safe-area-inset-bottom))}
#blackjack .bj-table{flex:1 1 auto;min-height:0}
/* Blackjack: carte vere e grandi (proporzioni 5:7), la seconda si sovrappone a metà come al tavolo. */
#blackjack{--bjc:min(31vw,150px,calc(var(--play-h)*.155))}
#blackjack .pc{width:var(--bjc);height:calc(var(--bjc)*1.45);padding:0;border:0;border-radius:calc(var(--bjc)*.06)}
#blackjack .pc.img{background:var(--face) center/100% 100% no-repeat;box-shadow:0 6px 14px rgba(0,0,0,.35)}
#blackjack .pc.back{background:#8a2b2b url(cards/back.svg) center/cover;border:0;box-shadow:0 6px 14px rgba(0,0,0,.35),inset 0 0 0 3px #f5f0e4}
#blackjack .pc.ghost{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
#blackjack .bj-cards{min-height:calc(var(--bjc)*1.45)}
#blackjack .bj-cards .pc+.pc{margin-left:calc(var(--bjc)*-.52)}
#blackjack .bj-total{font-size:1.25rem;padding:5px 18px;min-width:58px}
#blackjack .bj-action{width:min(21vw,86px);height:min(21vw,86px);font-size:.72rem}
#blackjack .bj-action span{font-size:1.5rem}
/* Mani lunghe: le carte si sovrappongono di più. Mano divisa: carte più piccole, così le due mani stanno affiancate. */
#blackjack .bj-cards:has(.pc:nth-child(5)) .pc+.pc{margin-left:calc(var(--bjc)*-.66)}
#blackjack .bj-cards:has(.pc:nth-child(7)) .pc+.pc{margin-left:calc(var(--bjc)*-.76)}
#blackjack .bj-hands:has(.bj-hand+.bj-hand){--bjc:min(21vw,110px,calc(var(--play-h)*.14))}
/* Scala 40 con le carte francesi vere. */
.s4-card.img{padding:0;border-radius:calc(var(--cw)*.06);background:var(--face) center/100% 100% no-repeat;box-shadow:0 2px 5px rgba(0,0,0,.35)}
/* Blackjack, schermata della puntata: le sagome delle carte restano piccole e non coprono le scritte. */
#blackjack .bj-hand.placeholder{--bjc:min(20vw,90px,calc(var(--play-h)*.11))}
/* Blackjack: la puntata di ogni mano è una fiche uguale a quelle per puntare (stesso cerchio bianco, stesso colore per valore). */
#blackjack .bj-hand-info{align-items:center;gap:8px}
#blackjack .bj-bet{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;color:#fff;font-size:.74rem;cursor:default;box-shadow:0 3px 0 rgba(0,0,0,.35),inset 0 0 0 4px rgba(255,255,255,.85),inset 0 0 0 6px currentColor}
/* Punteggio più piccolo; sabot e carte rimaste più grandi e leggibili. */
#blackjack .bj-total{font-size:1rem;padding:3px 12px;min-width:44px}
#blackjack .bj-shoe{gap:8px;font-size:1.1rem;font-weight:800}
#blackjack .bj-shoe span{width:30px;height:40px;border-width:3px;border-radius:5px}
/* Mentre si punta (fiches e "Nuova mano" in basso) le carte si rimpiccioliscono un po', così nulla si sovrappone. */
#blackjack .bj-table:has(#bjBetBox:not([hidden])){--bjc:min(26vw,128px,calc(var(--play-h)*.125))}
.menu-version{margin:2px 0 0;text-align:center;font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.4)}
/* ===== Burraco come gli altri giochi di carte: tavolo a tutto schermo, carte vere, mano su una riga ===== */
#burraco .burraco-table{--bw:min(15vw,70px,calc(var(--play-h)*.095));flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;padding:10px 8px;border-width:5px;border-radius:18px}
#burraco .variant-choice{align-self:center;justify-self:auto;padding:3px}
#burraco .variant{padding:6px 12px;font-size:.72rem}
#burraco .meld-table{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
#burraco .playing-card.img{padding:0;border-radius:calc(var(--bw)*.06);background:var(--face) center/100% 100% no-repeat;box-shadow:0 4px 10px rgba(0,0,0,.3)}
#burraco .card-hand .playing-card{width:var(--bw);height:calc(var(--bw)*1.45)}
#burraco .card-hand{flex:none;min-height:0;flex-wrap:nowrap;justify-content:center;padding:18px 6px 2px}
#burraco .card-hand .playing-card+.playing-card{margin-left:calc(var(--bw)*-.52)}
#burraco .card-pile{width:calc(var(--bw)*.95);height:calc(var(--bw)*1.38)}
#burraco .card-pile.stock{border:0;background:url(cards/back.svg) center/cover;border-radius:6px}
#burraco .meld-lane .playing-card.small{width:calc(var(--bw)*.6);height:calc(var(--bw)*.87)}
#burraco .bur-actions{flex:none;align-items:center;padding-top:8px}
#burraco .bur-actions>div{flex-direction:row;gap:6px}
#burraco .bur-actions .secondary-button,#burraco .bur-actions .primary-button.compact{min-width:0;padding:10px 12px;font-size:.78rem}
/* ===== Blackjack: effetti presi dal Neon Blackjack ===== */
/* Le carte arrivano dal sabot (in alto a destra) e la carta coperta del banco si gira. */
#blackjack .pc.deal-in{animation:bj-deal .5s cubic-bezier(.12,.78,.22,1) both}
#blackjack .pc.flip{animation:bj-flip .6s cubic-bezier(.22,.72,.2,1) both}
@keyframes bj-deal{0%{opacity:0;transform:translate(42vw,-26vh) rotate(24deg) scale(.6)}75%{opacity:1;transform:translate(-3px,3px) rotate(-2deg) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes bj-flip{0%{transform:rotateY(90deg) scale(.96);filter:brightness(1.6)}60%{transform:rotateY(-8deg) scale(1.04)}100%{transform:none}}
/* Durante il turno del banco il tavolo "trattiene il respiro". */
#blackjack .bj-table.suspense{animation:bj-breathe 1.6s ease-in-out infinite}
@keyframes bj-breathe{50%{box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 0 90px rgba(246,207,105,.18)}}
/* Messaggio finale grande, al centro del tavolo, e coriandoli quando si vince. */
#blackjack .bj-banner{position:absolute;z-index:8;left:50%;top:44%;transform:translate(-50%,-50%) scale(.7);opacity:0;pointer-events:none;text-align:center;white-space:nowrap}
#blackjack .bj-banner.show{animation:bj-banner 2.3s ease both}
#blackjack .bj-banner b{display:block;color:#f6cf69;font:900 clamp(2.4rem,11vw,4.6rem)/.9 system-ui,sans-serif;letter-spacing:-.05em;text-transform:uppercase;text-shadow:0 0 30px rgba(246,207,105,.6),0 4px 0 rgba(0,0,0,.35)}
#blackjack .bj-banner span{display:inline-block;margin-top:10px;padding:5px 14px;border-radius:99px;background:rgba(0,0,0,.45);color:#fff;font-weight:800}
@keyframes bj-banner{12%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(1.05)}}
#blackjack .bj-spark{position:absolute;z-index:7;top:-20px;left:var(--x);width:8px;height:13px;background:var(--c);pointer-events:none;animation:bj-fall 1.6s ease-in forwards}
@keyframes bj-fall{to{top:105%;transform:translateX(var(--d)) rotate(600deg)}}
@media(prefers-reduced-motion:reduce){#blackjack .pc.deal-in,#blackjack .pc.flip,#blackjack .bj-table.suspense{animation:none}}
/* Fiches in stile Neon Blackjack: bordo bianco tratteggiato da casinò e anello interno, uguali per puntare e sul tavolo. */
#blackjack .bj-chip{border:4px dashed rgba(255,255,255,.7);color:#fff;font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.45)}
#blackjack .bj-chip.c10{background:#254b66;box-shadow:0 6px 14px rgba(0,0,0,.3),inset 0 0 0 3px #173143}
#blackjack .bj-chip.c25{background:#8c3047;box-shadow:0 6px 14px rgba(0,0,0,.3),inset 0 0 0 3px #5c1e2e}
#blackjack .bj-chip.c100{background:#6951a4;box-shadow:0 6px 14px rgba(0,0,0,.3),inset 0 0 0 3px #3e3062}
#blackjack .bj-chip.c500{background:#9a742b;box-shadow:0 6px 14px rgba(0,0,0,.3),inset 0 0 0 3px #604719}
#blackjack .bj-bet{border-width:3px}
/* Giochi della cartella moduli/: il componente riempie tutto lo spazio sotto la fascia con ← e ☰. */
.modulo-view .modulo-slot{position:relative;flex:1 1 auto;min-height:0;border-radius:18px;overflow:hidden;background:#07080d}
.modulo-view .modulo-slot>*{position:absolute;inset:0;height:100%}
.modulo-view.game-view{max-width:1200px}
/* Punteggi in stile Neon Blackjack: etichetta piccola e numero in una pillola sottile, sopra le carte. */
#blackjack .bj-total{display:inline-flex;align-items:center;gap:9px;margin:0 auto 8px;padding:0;min-width:0;border:0;background:none;box-shadow:none;color:#fff;font-size:inherit}
#blackjack .bj-total small{color:#93ada2;font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
#blackjack .bj-total b{display:grid;place-items:center;min-width:34px;height:27px;padding:0 9px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(0,0,0,.18);font-size:.9rem}
#blackjack .bj-hand{display:flex;flex-direction:column;align-items:center}
#blackjack .bj-dealer{display:flex;flex-direction:column;align-items:center}
/* Riga sopra la mano: punteggio, fiche della puntata ed esito, tutto insieme. */
#blackjack .bj-head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
#blackjack .bj-head .bj-total{margin:0}
#blackjack .bj-head .bj-bet{width:34px;height:34px;font-size:.66rem;border-width:3px}
/* ===== Sala giochi: scelta Categorie / A–Z ed elenco alfabetico con i preferiti in cima ===== */
.home-switch{display:flex;width:max-content;gap:4px;margin:4px 0 14px;padding:4px;border:1px solid var(--line);border-radius:99px;background:rgba(2,17,22,.45)}
.home-switch button{height:32px;padding:0 16px;border:0;border-radius:99px;background:transparent;color:#b9c7c7;font-family:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.home-switch button.on{background:#f3e6cc;color:#1a1226}
#home.az .game-gallery{display:none}
.az-list .az-head{margin:16px 0 8px;font-family:inherit;font-size:.72rem;font-weight:700;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:#c9d6d6}
.az-list .az-head:first-child{margin-top:0}
.az-list ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.az-list li{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04)}
.az-open{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px 10px;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.az-open img{width:38px;height:38px;padding:5px;border-radius:10px;background:#efe6d4}
.az-open span{display:flex;flex-direction:column;min-width:0}
.az-open b{font-size:1rem}
.az-open small{color:#9fb0b0;font-size:.72rem}
.az-star{flex:none;width:46px;height:46px;border:0;background:none;color:#8a9a9a;font-size:1.5rem;cursor:pointer}
.az-star.on{color:#f0cf8b}
.az-tip{margin:0 0 12px;color:#9fb0b0;font-size:.85rem}
/* I giochi della cartella moduli/ riempiono esattamente lo schermo: la vista non deve poter scorrere né slittare di lato. */
.modulo-view.game-view.active{overflow:clip}
.home-switch button[data-home-view="az"]{min-width:72px}
/* ===== Telefono: i giochi riempiono tutto lo schermo, da bordo a bordo e fino in fondo ===== */
@media(max-width:700px){
  .game-view.active:not(.arcade-view){padding-left:0!important;padding-right:0!important;padding-bottom:0!important;max-width:none}
  .game-view.active>.game-nav{padding:0 8px}
  .game-view.active:not(.arcade-view)>:not(.game-nav):not(.section-heading),
  .game-view.active:not(.arcade-view)>:not(.game-nav)>.panel{border-radius:0!important;border-left-width:0!important;border-right-width:0!important;margin-left:0!important;margin-right:0!important}
  /* L'ultimo riquadro scende fino al bordo: solo il contenuto lascia lo spazio per la barretta di iPhone. */
  .game-view.active:not(.arcade-view)>:last-child{border-bottom-width:0!important;padding-bottom:max(10px,env(safe-area-inset-bottom))!important;margin-bottom:0!important}
  .game-view.active:not(.arcade-view)>:last-child>.panel:last-child{border-bottom-width:0!important}
}
@media(max-width:700px){.grid-game-shell .grid-player,.grid-game-shell .grid-players,.grid-game-shell .grid-status,.grid-game-shell .grid-actions{margin-left:8px!important;margin-right:8px!important}}
/* Dadi 13 su telefono e tablet: «Lancia i dadi» e «Nuova partita» stanno in
   fondo allo schermo, nello spazio libero sotto il punteggio, dove il pollice
   ci arriva senza sforzo. Il punteggio lascia posto alla barra. */
@media(max-width:980px){
  #yahtzee .roll-actions{position:fixed;z-index:30;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));margin:0;padding:10px 12px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(235,214,179,.18);border-radius:22px;background:rgba(6,22,28,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
  #yahtzee .roll-actions .primary-button{flex:1;min-width:0}
  #yahtzee .score-card{padding-bottom:96px}
}
/* iPad: Safari nasconde e mostra le sue barre. Con svh (altezza a barre aperte) quando sono nascoste resterebbe un vuoto sotto il gioco. */
@media(min-width:768px){:root{--play-h:calc(100dvh - 140px)}.game-view.active,.arcade-view.game-view.active{height:100dvh;max-height:100dvh}}
/* Backgammon su tablet e computer: il tavolo prende l'altezza rimasta, così dadi e pulsanti restano sempre sullo schermo. */
@media(min-width:701px){#backgammon .backgammon-layout{display:flex;flex-direction:column}#backgammon .board-shell{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:8px 14px}#backgammon .board-toolbar{padding:0 0 6px}#backgammon .board{flex:1 1 0;height:auto;min-height:0}#backgammon .bg-tray{margin-top:6px;padding:4px 10px;min-height:0}#backgammon .bg-foot{margin-top:2px}}
/* Dama cinese: il tabellone non è mai più alto dello spazio; in orizzontale giocatori e pulsanti stanno di lato e lui prende tutta l'altezza. */
@media(min-width:701px){.cc-board{max-width:min(640px,calc((var(--play-h) - 130px)*.8866))}}
@media(min-width:701px) and (orientation:landscape) and (max-height:1000px){#chinese .chinese-shell{display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:8px 16px;padding:10px 16px}.cc-player-row{grid-column:1;grid-row:1;grid-template-columns:1fr;align-content:center;gap:14px}.cc-player:last-child{justify-content:flex-start}.cc-actions{grid-column:1;grid-row:2;flex-wrap:wrap;gap:6px}.cc-board{grid-column:2;grid-row:1/3;margin:auto;max-width:min(640px,calc((var(--play-h) - 24px)*.8866))}}
/* Dadi 13: su tablet e computer la scheda è in due colonne come sul telefono (Superiore e Combinazioni), così le tredici categorie si vedono tutte senza scorrere. */
@media(min-width:701px){#yahtzee .score-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}#yahtzee .score-card{min-height:0}}
@media(min-width:981px){#yahtzee .yahtzee-layout{grid-template-columns:minmax(0,1.2fr) minmax(430px,.9fr)}#yahtzee .dice-table{min-height:0}}
/* iPad in verticale: come sul telefono il tavolo prende solo lo spazio dei dadi e la scheda si vede intera. */
@media(min-width:701px) and (max-width:980px){#yahtzee .dice-table{min-height:0;padding:14px 20px}#yahtzee .dice-tray{min-height:0;margin:4px 0;gap:10px}#yahtzee .roll-actions .primary-button{justify-content:center;gap:10px}}
/* Backgammon: le pedine si misurano sull'altezza del tavolo, perché cinque (poi c'è il numero) stiano nella loro metà senza toccare quelle di fronte. */
@media(min-width:701px){#backgammon .board{container-type:size}#backgammon .stack .checker{--cs:min(68px,calc((50cqh - 22px)/4.5),calc(100cqw/13.5));width:var(--cs);height:var(--cs);min-width:0;min-height:0;margin-top:calc(var(--cs)*-.19)}#backgammon .stack .checker:first-child{margin-top:0}}
/* Tavolo Nova: il riquadro prende tutta la larghezza, perché i flipper si azionano toccando ovunque a sinistra o a destra (i pollici stanno ai bordi). */
#flipper.nova.game-view.active{max-width:none;padding-left:0;padding-right:0}