[hidden]{display:none!important}
img{max-width:100%}
/* Layout: panorama notturno del Polo Nord con gli edifici cliccabili; ogni edificio apre una scena a schermo pieno. Look volutamente notturno (blu notte, rosso Babbo, oro delle luci). */
:root{
  --night:#0b1230; --night-2:#16224c; --panel:#121c42; --panel-2:#1b2958;
  --snow:#f3f8ff; --muted:#aab8e2; --red:#d6312e; --red-d:#a62220; --pine:#2d7a4d; --gold:#ffc84a; --wood:#b97b45;
  --line:rgba(255,255,255,.15);
  --f-display:'Mountains of Christmas','Segoe Script','Brush Script MT',cursive;
  --f-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--night);background-image:linear-gradient(180deg,var(--night) 0,var(--night-2) 100%);background-attachment:fixed;color:var(--snow);font-family:var(--f-body);font-size:16px;line-height:1.45;min-height:100%}
body.lock{overflow:hidden}
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.app{position:relative;z-index:1;max-width:1560px;margin:0 auto;padding-block:18px 30px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.top>div{min-width:0}
h1{font:700 clamp(2.1rem,6.4vw,3.6rem)/1 var(--f-display);margin:0;text-wrap:balance;text-shadow:0 3px 0 rgba(214,49,46,.65)}
.sub{margin:8px 0 0;color:var(--muted)}
.hud{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px 12px;min-width:94px;display:flex;flex-direction:column;color:var(--snow);font:inherit;text-align:left}
.chip span{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.chip b{font-size:1.3rem;font-variant-numeric:tabular-nums;line-height:1.2}
button.chip{cursor:pointer;border-color:var(--gold)}
button.chip:hover{background:var(--panel-2)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.hint{margin:8px 2px 0;color:var(--muted);font-size:.85rem}
.news{margin:12px 0 0;padding:10px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);min-height:44px;display:flex;align-items:center}
.news.pop{animation:pop .5s}
.foot{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;color:var(--muted);font-size:.85rem}

/* bottoni */
.btn{font:800 1rem var(--f-body);background:var(--red);color:#fff;border:0;border-radius:999px;padding:10px 20px;cursor:pointer;box-shadow:0 4px 0 var(--red-d);transition:transform .08s,box-shadow .08s,filter .15s}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--red-d)}
.btn.sm{padding:6px 12px;font-size:.88rem}
.btn.big{padding:14px 28px;font-size:1.15rem}
.btn.gold{background:var(--gold);color:#3a2300;box-shadow:0 4px 0 #b88a1d}
.btn.ghost{background:transparent;color:var(--snow);border:1.5px solid var(--line);box-shadow:none}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.sw{display:inline-flex;gap:10px;align-items:center;cursor:pointer;font-weight:600}
.sw input{width:20px;height:20px;accent-color:var(--gold)}

/* modale */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(3,6,20,.78);padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.sheet{width:min(1020px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;animation:rise .25s ease-out}
.sheet header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.sheet h2{margin:0;font:700 clamp(1.5rem,4vw,2.1rem)/1.1 var(--f-display)}
.x{font:800 1.2rem var(--f-body);width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--snow);cursor:pointer;flex:none}
.x:hover{background:var(--red)}
#mBody{padding:18px;overflow:auto;min-height:0}
h3{margin:0 0 6px;font:800 1.1rem var(--f-body)}
.lead{margin:0 0 14px;color:var(--muted)}
.muted{color:var(--muted)}
small{color:var(--muted);font-weight:600}
.bar{height:14px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;border:1px solid var(--line)}
.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb03a,#ffe27a);border-radius:99px;transition:width .2s}
.bar.thin{height:6px;margin-top:10px}
.bar.t>i{background:linear-gradient(90deg,#3dbf7a,#9cf0b4)}
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.tab{font:800 .95rem var(--f-body);padding:8px 16px;border-radius:99px;border:1.5px solid var(--line);background:transparent;color:var(--snow);cursor:pointer}
.tab.on{background:var(--gold);color:#3a2300;border-color:var(--gold)}

/* fabbrica */
.fac-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:14px}
.steps{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.steps li{display:flex;gap:8px;align-items:center;padding:5px 12px 5px 6px;border-radius:99px;border:1.5px solid var(--line);color:var(--muted);font-weight:700;font-size:.88rem}
.steps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.12);font-size:.8rem}
.steps li.on{border-color:var(--gold);color:var(--snow)}
.steps li.on b{background:var(--gold);color:#3a2300}
.steps li.done{color:#9cf0b4;border-color:#3dbf7a}
.steps li.done b{background:#3dbf7a;color:#06240f}
.orders{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.order{background:linear-gradient(#6f4a2a,#563a20);border:3px solid #3b2410;border-radius:16px;color:#fff;font:800 1rem var(--f-body);padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center;transition:transform .15s}
.order:hover{transform:translateY(-4px) rotate(-1deg)}
.order svg{width:100%;max-width:130px}
.work{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:center}
.bench{background:linear-gradient(#6f4a2a,#563a20);border:3px solid #3b2410;border-radius:18px;min-height:270px;display:grid;place-items:center;position:relative;padding:16px;overflow:hidden}
.bench>svg,.toybox svg{width:min(100%,340px);height:auto;display:block}
.plank{position:relative;width:min(100%,340px);cursor:pointer;background:repeating-linear-gradient(90deg,#d8a96d 0 24px,#cf9e60 24px 26px);border-radius:8px;padding:12px;box-shadow:inset 0 0 0 3px #a8733d}
.toyghost svg{width:100%;display:block}
.elfw{position:absolute;left:8px;bottom:6px;width:74px;display:flex;align-items:flex-end;pointer-events:none;z-index:2}
.elfw .tool{width:46px;margin-left:-12px;margin-bottom:34px;transform-origin:10% 70%}
.elfw.hit .tool{animation:swing .3s}
.elfw.hit .elf{animation:bob .3s}
.side p{color:var(--muted);margin:4px 0 12px}
.count{font-weight:800;margin:6px 0 0}
.toybox{position:relative;width:min(100%,340px)}
.nail{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 35%,#e8edf7,#7f8aa3);box-shadow:0 2px 0 #2b3347,0 0 0 4px rgba(255,200,74,.55);cursor:pointer;animation:pulse 1.2s infinite}
.nail.in{animation:none;box-shadow:inset 0 3px 4px #2b3347;transform:scale(.55);cursor:default;opacity:.8}
.p{cursor:pointer;transition:filter .15s}
.p:hover{filter:brightness(1.18)}
.p.todo{animation:todo 1.1s ease-in-out infinite}
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 14px}
.swatch{width:42px;height:42px;border-radius:50%;border:3px solid transparent;box-shadow:0 0 0 2px var(--line);cursor:pointer;padding:0}
.swatch.on{border-color:#fff;box-shadow:0 0 0 3px var(--gold)}
.swatch.sq{border-radius:10px}
.partlist{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.partlist span{font-size:.85rem;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.1)}
.partlist span.ok{background:#3dbf7a;color:#06240f}
.wrapstage{position:relative;width:min(100%,260px);height:240px}
.wrapstage .gtoy{position:absolute;left:50%;top:0;width:150px;margin-left:-75px;transition:transform .7s ease-in,opacity .7s}
.wrapstage .gbox{position:absolute;left:50%;bottom:0;width:190px;margin-left:-95px}
.wrapstage.wrapping .gtoy{transform:translateY(120px) scale(.4);opacity:0}
.wrapstage.wrapping .gbox{animation:pop .8s .5s}
.shelf{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.inv{display:flex;flex-wrap:wrap;gap:8px;min-height:50px;align-items:center}
.inv-i{width:54px}
.inv-i svg{width:100%;display:block}

/* santa / lettere */
.santa-grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:20px;align-items:start}
.santa-box{text-align:center}
.santa-box svg{width:min(100%,200px);height:auto;cursor:pointer}
.santa-box svg.bounce{animation:bounce .6s}
.bubble{position:relative;background:#fff;color:#1a2140;border-radius:16px;padding:10px 14px;font-weight:700;margin-bottom:14px;min-height:62px;display:flex;align-items:center;justify-content:center}
.bubble::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-9px;border:9px solid transparent;border-top-color:#fff;border-bottom:0}
.letters{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.letter{background:#f5ead2;color:#3a2a14;border-radius:6px;padding:14px;box-shadow:0 4px 0 rgba(0,0,0,.25);display:flex;flex-direction:column;gap:8px;transform:rotate(var(--r,0deg));min-width:0}
.letter p{margin:0;font:600 1.05rem/1.3 var(--f-display)}
.letter .from{font:800 .8rem var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:#7a5a2a}
.letter.done{opacity:.6}
.letter .btn{align-self:flex-start}

/* sartoria */
.knit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
.knit svg.big{width:100%;max-width:300px;display:block;margin:0 auto}
.wardrobe{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ward{width:84px;text-align:center;font-size:.72rem;color:var(--muted)}
.ward svg{width:100%;display:block}
.suit-grid{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:20px;align-items:start}
.suit-grid svg{width:100%;max-width:210px;display:block;margin:0 auto}
.piece{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.piece b{font-weight:800}
.needle{display:inline-block;width:14px;height:2px;background:#e8edf7;position:relative;margin-right:6px;vertical-align:middle;transform:rotate(-30deg)}

/* stalla */
.stable-top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:16px;background:var(--panel-2);padding:10px 14px;border-radius:16px}
.elfrow{display:flex;gap:12px;align-items:center;min-width:0}
.elfrow svg{width:44px;flex:none}
.elfrow p{margin:0;color:var(--muted);font-size:.9rem}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.rcard{background:var(--panel-2);border:1px solid var(--line);border-radius:16px;padding:12px;min-width:0;overflow:hidden}
.rcard h4{margin:4px 0 8px;font:800 1.05rem var(--f-body)}
.tag{font-size:.7rem;background:#ff3b30;color:#fff;border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:middle}
.rart{background:linear-gradient(#27407f,#3c5ba3 70%,#dbe7fb 70%);border-radius:12px;padding:4px 8px 0;overflow:hidden}
.rart svg{width:100%;display:block;max-height:120px}
.meter{margin:5px 0}
.meter span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.rcard.run .rart svg{animation:dash 1.6s ease-in-out}
.rcard.run .rd{animation:gallop .22s infinite}
.rcard.eat .rd{animation:munch .3s 3}
.halo{animation:glowp 1.4s ease-in-out infinite}

/* cucina */
.cook{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
.cookie{background:#e9d2b0;border-radius:18px;padding:14px;display:grid;place-items:center;cursor:crosshair}
.cookie svg{width:min(100%,260px);display:block}
.shapes{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.shp{width:58px;height:58px;border-radius:12px;border:2px solid var(--line);background:rgba(255,255,255,.06);cursor:pointer;padding:6px}
.shp.on{border-color:var(--gold);background:rgba(255,200,74,.2)}
.shp svg{width:100%;height:100%}
.plate{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.plate svg{width:44px}
.oven{display:grid;place-items:center;gap:8px}
.oven svg{width:min(100%,260px)}

/* magia */
.magic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
.pot svg{width:min(100%,300px);display:block;margin:0 auto}
.ings{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0 14px}
.ing{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:12px;border:1.5px solid var(--line);background:rgba(255,255,255,.06);color:var(--snow);font:700 .95rem var(--f-body);cursor:pointer;text-align:left}
.ing i{width:18px;height:18px;border-radius:50%;flex:none;border:2px solid rgba(255,255,255,.5)}
.ing:hover{border-color:var(--gold)}
.ing[disabled]{opacity:.4;cursor:default}
.scroll{background:#f5ead2;color:#3a2a14;border-radius:10px;padding:10px 14px;margin:6px 0 10px}
.scroll b{font-family:var(--f-display);font-size:1.3rem}
.scroll ul{margin:4px 0 0;padding-left:20px}
.scroll li.ok{text-decoration:line-through;color:#2d7a4d}
.vials{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.puff{animation:puff .7s}

/* albero */
.treebox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px);gap:20px;align-items:start}
.treebox svg.tree{width:100%;max-width:430px;display:block;margin:0 auto;cursor:copy;background:radial-gradient(circle at 50% 40%,#1c2f6e,#0e1738);border-radius:18px}
.orns{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.orn{width:50px;height:50px;border-radius:12px;border:2px solid var(--line);background:rgba(255,255,255,.06);cursor:pointer;padding:5px}
.orn.on{border-color:var(--gold);background:rgba(255,200,74,.2)}
.orn svg{width:100%;height:100%}
.bulb{animation:bulb 1.4s ease-in-out infinite}
.off .bulb{animation:none;opacity:.25}
.starglow{animation:glowp 1.6s ease-in-out infinite}

/* vigilia */
.checks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.checks li{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 14px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line)}
.checks .tick{width:24px;height:24px;border-radius:50%;border:2px solid var(--muted)}
.checks li.ok{border-color:#3dbf7a}
.checks li.ok .tick{background:#3dbf7a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2306240f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;border-color:#3dbf7a}
.checks em{font-style:normal;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.launchbox{text-align:center}
.sky{position:relative;height:min(62vh,420px);border-radius:18px;overflow:hidden;background:linear-gradient(#050a22,#2a3f84);display:grid;place-items:end center}
.sky::before{content:"";position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 90px 80px,#fff,transparent),radial-gradient(2px 2px at 160px 40px,#fff,transparent),radial-gradient(1.5px 1.5px at 240px 120px,#fff,transparent);background-size:260px 160px;opacity:.9}
.convoy{position:absolute;top:30%;left:0;display:flex;align-items:flex-end;width:max-content;animation:fly 7s ease-in-out forwards,wave 1.2s ease-in-out infinite}
.convoy svg{height:64px;width:auto;flex:none}
.convoy .sleigh{height:90px}
.fly-msg{position:relative;font:700 clamp(1.4rem,5vw,2.4rem) var(--f-display);margin:0 0 18px;text-shadow:0 2px 0 var(--red)}
.finale{text-align:center;padding:20px 8px}
.finale h3{font:700 clamp(2.2rem,8vw,3.6rem) var(--f-display);margin:0 0 10px;color:var(--gold)}
.finale p{max-width:56ch;margin:0 auto 14px}

/* village svg */
.star{fill:#fff;animation:twinkle 3s ease-in-out infinite}
.aurora{filter:blur(14px);animation:drift 10s ease-in-out infinite alternate}
.glow{filter:drop-shadow(0 0 5px rgba(255,205,90,.9));animation:flick 4s infinite}
.bulb{transform-box:fill-box}
.smoke{fill:#e8eefc;opacity:0;animation:smoke 4.5s linear infinite}
.gear{transform-box:fill-box;transform-origin:center;animation:spin 8s linear infinite}
.belt-box{animation:belt 4s linear infinite}
.walk{transform-box:fill-box;transform-origin:center}
.w1{animation:walk 22s linear infinite}
.w2{animation:walk 28s linear infinite reverse}
.w3{animation:walk 18s linear infinite}
.walk svg{animation:bob .5s ease-in-out infinite alternate}
.bld,.clk{cursor:pointer;outline:none}
.bld .body{transition:transform .2s,filter .2s}
.bld:hover .body,.bld:focus-visible .body{transform:translateY(-5px);filter:drop-shadow(0 0 14px rgba(255,200,74,.85))}
.sign rect{fill:rgba(8,13,38,.88);stroke:var(--gold);stroke-width:1.6;transition:fill .2s}
.sign text{fill:var(--snow);font:800 14px var(--f-body);letter-spacing:.08em}
.bld:hover .sign rect,.bld:focus-visible .sign rect{fill:var(--red)}
.snowman:hover{filter:drop-shadow(0 0 8px #fff)}
.sparkle{animation:twinkle 1.6s infinite}
.pt{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:120;animation:ptf .7s ease-out forwards}
#toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--snow);color:#14204a;font-weight:800;padding:10px 20px;border-radius:99px;z-index:130;opacity:0;pointer-events:none;transition:.25s;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#toast.on{opacity:1;transform:translate(-50%,0)}

@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes flick{0%,100%{opacity:1}50%{opacity:.85}60%{opacity:1}}
@keyframes drift{from{transform:translateX(-30px);opacity:.28}to{transform:translateX(30px);opacity:.5}}
@keyframes smoke{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.7}100%{transform:translate(18px,-70px) scale(2);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes belt{from{transform:translateX(0)}to{transform:translateX(86px)}}
@keyframes walk{0%{transform:translateX(0) scaleX(1)}49.9%{transform:translateX(260px) scaleX(1)}50%{transform:translateX(260px) scaleX(-1)}99.9%{transform:translateX(0) scaleX(-1)}100%{transform:translateX(0) scaleX(1)}}
@keyframes bob{to{transform:translateY(-3px)}}
@keyframes bulb{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes glowp{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes pulse{50%{box-shadow:0 2px 0 #2b3347,0 0 0 9px rgba(255,200,74,.2)}}
@keyframes todo{50%{filter:brightness(1.35)}}
@keyframes swing{0%{transform:rotate(0)}40%{transform:rotate(-28deg)}100%{transform:rotate(0)}}
@keyframes pop{0%{transform:scale(.9)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px)}}
@keyframes dash{0%{transform:translateX(0)}45%{transform:translateX(55%)}55%{transform:translateX(55%) scaleX(-1)}100%{transform:translateX(0) scaleX(-1)}}
@keyframes gallop{50%{transform:translateY(-5px)}}
@keyframes munch{50%{transform:translateY(3px) rotate(2deg)}}
@keyframes puff{0%{filter:brightness(2);transform:scale(1.08)}100%{filter:none;transform:none}}
@keyframes ptf{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes fly{from{transform:translateX(-110%)}to{transform:translateX(calc(100vw))}}
@keyframes wave{50%{margin-top:-18px}}
@keyframes liq{50%{transform:translateY(-3px)}}
@media (max-width:760px){
  .work,.knit,.cook,.magic,.treebox,.santa-grid,.suit-grid{grid-template-columns:minmax(0,1fr)}
  .checks li{grid-template-columns:28px minmax(0,1fr) auto}
  .checks li button{grid-column:2/4;justify-self:start}
  .piece{grid-template-columns:80px minmax(0,1fr) auto}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;animation-iteration-count:1!important;transition:none!important}.convoy{animation:none!important;left:30%}}

/* ===== personaggi nel villaggio ===== */
#me{pointer-events:none}
#me.walking .mebody{animation:wbob .22s ease-in-out infinite alternate}
.bld.near .sign rect{fill:var(--pine)}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.role{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px;border-radius:16px;border:2px solid var(--line);background:var(--panel-2);color:var(--snow);font:inherit;cursor:pointer;transition:transform .15s,border-color .15s}
.role:hover{transform:translateY(-3px);border-color:var(--gold)}
.role.on{border-color:var(--gold);background:rgba(255,200,74,.14)}
.role svg{height:110px;width:auto;max-width:100%}
.role b{font-size:1.1rem}
.role span{color:var(--muted);font-size:.88rem}
@keyframes wbob{to{transform:translateY(-2.5px)}}
@keyframes sawm{from{transform:translateX(-7px)}to{transform:translateX(7px)}}
@keyframes hamm{0%{transform:rotate(-35deg)}55%{transform:rotate(15deg)}100%{transform:rotate(-35deg)}}
@keyframes brm{from{transform:rotate(-18deg)}to{transform:rotate(14deg) translateY(3px)}}
@keyframes needm{from{transform:rotate(-12deg)}to{transform:rotate(10deg)}}
@keyframes trot{0%{transform:translateX(0) scaleX(1)}49.9%{transform:translateX(120px) scaleX(1)}50%{transform:translateX(120px) scaleX(-1)}99.9%{transform:translateX(0) scaleX(-1)}100%{transform:translateX(0) scaleX(1)}}

/* ===== advent ===== */
.doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;margin-top:14px}
.door{position:relative;aspect-ratio:1/1.1;border-radius:14px;border:3px solid #3b2410;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:var(--f-body);transition:transform .15s}
.door b{font:700 2.2rem/1 var(--f-display)}
.door span{font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;min-height:34px;text-align:center}
.door.open{background:linear-gradient(160deg,#c0392f,#8e2620);box-shadow:inset 0 0 0 3px rgba(255,255,255,.18)}
.door.open:hover{transform:translateY(-4px) rotate(-1.2deg)}
.door.done{background:linear-gradient(160deg,#2d7a4d,#1d5c3d)}
.door.locked{background:linear-gradient(160deg,#3b4468,#2b3354);color:var(--muted);cursor:not-allowed}
.collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.slot{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;background:var(--panel);border:1px solid var(--line);text-align:center;min-width:0}
.slot svg{filter:grayscale(1) brightness(.35)}
.slot.got svg{filter:none}
.slot small{font-size:.68rem;line-height:1.2}
.inp{font:600 1rem var(--f-body);padding:10px 14px;border-radius:12px;border:2px solid var(--line);background:var(--night);color:var(--snow);min-width:0;flex:1 1 200px}
.opts{display:grid;gap:10px;margin:14px 0;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.opt{text-align:left;border-radius:14px}
.opt[disabled]{opacity:.35}
.gstat{display:flex;justify-content:space-between;font-size:1.2rem;margin-bottom:8px}
.arena{position:relative;height:260px;border-radius:16px;background:linear-gradient(#0a1438,#2a3f84);overflow:hidden;margin-bottom:12px;border:1px solid var(--line)}
.gstar{position:absolute;width:48px;height:48px;border:0;background:none;cursor:pointer;padding:0;animation:pop .3s}
.gstar svg{width:100%;height:100%;filter:drop-shadow(0 0 8px #ffc84a)}
.mem{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:440px}
.mcard{aspect-ratio:1;border-radius:12px;border:2px solid var(--line);background:var(--red);color:#ffd34d;font-size:1.8rem;cursor:pointer;position:relative;padding:0;display:grid;place-items:center}
.mcard .face{display:none}
.mcard.on .face,.mcard.ok .face{display:grid}
.mcard.on .back,.mcard.ok .back{display:none}
.mcard.on,.mcard.ok{background:#f4f9ff}
.mcard.ok{outline:3px solid #3dbf7a}
.pads{display:grid;grid-template-columns:repeat(2,minmax(0,140px));gap:12px;margin:12px 0}
.pad{height:100px;border-radius:50%;border:4px solid rgba(255,255,255,.25);background:var(--c);opacity:.45;cursor:pointer;transition:opacity .1s,transform .1s}
.pad.lit{opacity:1;transform:scale(1.08);box-shadow:0 0 30px var(--c)}
.reward{text-align:center;padding:12px 0}
.reward h3{font:700 2.2rem var(--f-display);color:var(--gold);margin:8px 0}

/* ===== santa tracker ===== */
.mapwrap{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#0a1438}
.mapwrap svg{display:block;width:100%;height:auto}
.clab{fill:#e8eefc;font:700 11px var(--f-body);paint-order:stroke;stroke:#0a1438;stroke-width:3px}
.cty{cursor:pointer;outline:none}
.cty .cdot{transition:fill .3s}
.cty.seen .cdot{fill:#ffc84a}
.cty:hover .cdot,.cty:focus-visible .cdot{r:8}
.trk-ctl{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:14px 0}
.seg{display:inline-flex;gap:4px}
.trk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px}
@media (max-width:760px){.trk-grid{grid-template-columns:minmax(0,1fr)}}
.now{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}
.wx{display:flex;gap:12px;align-items:center}
.wx small{color:var(--muted)}
.clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cit{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:.88rem;min-width:0}
.cit span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cit em{font-style:normal;color:var(--gold);font-variant-numeric:tabular-nums}
.cit.seen{border-color:#3dbf7a}
.cit.next{border-color:var(--gold);background:rgba(255,200,74,.12)}

/* ===== Christmas Kingdom: shell e barra laterale ===== */
.shell{position:relative;z-index:1;display:grid;grid-template-columns:262px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:18px;padding:22px 16px 18px max(16px,env(safe-area-inset-left,0px));background:linear-gradient(180deg,rgba(8,13,40,.96),rgba(14,22,64,.96));border-right:1px solid var(--line)}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;color:var(--snow);cursor:pointer;padding:0;text-align:center;font:700 2rem/1 var(--f-display);text-shadow:0 2px 0 rgba(214,49,46,.7)}
.brand img{width:92px;height:92px;border-radius:50%;display:block;box-shadow:0 0 0 3px rgba(255,200,74,.5),0 10px 30px rgba(0,0,0,.5);transition:transform .3s}
.brand:hover img{transform:rotate(-8deg) scale(1.05)}
.links{display:flex;flex-direction:column;gap:6px}
.links button{display:flex;align-items:center;gap:12px;font:800 1rem var(--f-body);background:transparent;color:var(--muted);border:0;border-radius:14px;padding:12px 14px;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.links button svg{width:22px;height:22px;flex:none}
.links button:hover{color:var(--snow);background:rgba(255,255,255,.08)}
.links button.on{background:var(--red);color:#fff;box-shadow:0 4px 0 var(--red-d)}
.side-card{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.side-card small{text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}
.side-card b{font-size:1.2rem}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.78rem}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:0;z-index:40;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));border-right:0;border-bottom:1px solid var(--line)}
  .brand{flex-direction:row;font-size:1.3rem}.brand img{width:38px;height:38px}
  .links{flex-direction:row;margin-left:auto}.links button{padding:8px 12px;font-size:.88rem}
  .side-card,.side-foot{display:none}
}

/* ===== mondo ===== */
.stage{position:relative;aspect-ratio:1200/660;max-height:calc(100vh - 220px);width:100%;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#060b24;box-shadow:0 18px 50px rgba(0,0,0,.5);margin-inline:auto}
.stage svg{display:block;width:100%;height:100%}
.prompt{position:absolute;left:50%;bottom:18px;transform:translate(-50%,10px);background:rgba(8,13,38,.92);border:1.5px solid var(--gold);padding:9px 18px;border-radius:99px;font-weight:800;pointer-events:none;opacity:0;transition:.15s;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.prompt.on{opacity:1;transform:translate(-50%,0)}
kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;margin:0 4px 0 0;border-radius:7px;background:#e8edf7;color:#14204a;font:800 .82rem var(--f-body);box-shadow:0 3px 0 #8a96b8}
.roomtag{position:absolute;left:16px;top:14px;display:flex;flex-direction:column;gap:2px;background:rgba(8,13,38,.82);border:1px solid var(--line);padding:8px 14px;border-radius:14px;pointer-events:none}
.roomtag b{font:700 1.3rem var(--f-display)}
.roomtag span{font-size:.78rem;color:var(--muted)}
.fade{position:absolute;inset:0;background:#02051a;opacity:0;pointer-events:none;transition:opacity .28s}
.fade.on{opacity:1}
.keys{display:flex;flex-wrap:wrap;gap:8px 22px;margin:12px 2px 0;color:var(--muted);font-size:.88rem;align-items:center}
.keys span{display:inline-flex;align-items:center;gap:2px}
.plab rect{fill:rgba(8,13,38,.9);stroke:#ffc84a;stroke-width:1.4}
.plab text{fill:#f3f8ff;font:800 11px var(--f-body)}
.sign rect{fill:rgba(8,13,38,.9)}
.bld.near .body{filter:drop-shadow(0 0 16px rgba(255,200,74,.85))}
.bld.near .sign rect{fill:var(--pine)}
.flick{animation:flick 3.5s infinite}
.flake{fill:#fff;animation:flakefall 4.5s linear infinite}
.steam{fill:#e8eefc;opacity:0;animation:smoke 3s linear infinite}
.dust{fill:#e9c28d;opacity:0;animation:dustf .9s ease-out infinite}
.spark{fill:#ffd34d;animation:sparkf .45s infinite alternate}
.mist{opacity:.3;animation:mistf 1.2s ease-in-out infinite alternate}
.bub{animation:bubf 2s ease-in infinite;transform-box:fill-box}
.graze{transform-box:fill-box;transform-origin:50% 100%;animation:grazef 3.2s ease-in-out infinite}
.graze.g2{animation-delay:-1s}.graze.g3{animation-delay:-2s}
.walkw{animation:walkx 30s linear infinite}
.wbobg{animation:wbob .5s ease-in-out infinite alternate}
.leg{transform-box:fill-box;transform-origin:50% 0}
#me.walking .l1{animation:legA .26s ease-in-out infinite alternate}
#me.walking .l2{animation:legA .26s ease-in-out infinite alternate-reverse}
#me.walking .mebody{animation:wbob .2s ease-in-out infinite alternate}
.rock{transform-box:fill-box;transform-origin:50% 100%;animation:rockf 2.4s ease-in-out infinite alternate}
.flames{transform-box:fill-box;transform-origin:50% 100%;animation:flamef .45s ease-in-out infinite alternate}
.tread{stroke-dasharray:12 12;animation:tread 1s linear infinite}
.cloud{animation:cloudf 70s linear infinite alternate}.cloud.c2{animation-duration:95s}
.aurora2{filter:blur(16px);animation:drift 14s ease-in-out infinite alternate-reverse}
.clk{cursor:pointer}
@keyframes flakefall{from{transform:translateY(0);opacity:1}to{transform:translateY(var(--h,100px));opacity:.2}}
@keyframes dustf{0%{transform:translate(0,0);opacity:.9}100%{transform:translate(-18px,-26px);opacity:0}}
@keyframes sparkf{from{opacity:.2}to{opacity:1}}
@keyframes mistf{from{opacity:.15;transform:scale(.9)}to{opacity:.5;transform:scale(1.15)}}
@keyframes bubf{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:.8}100%{transform:translateY(-38px) scale(1.1);opacity:0}}
@keyframes grazef{0%,100%{transform:rotate(0)}50%{transform:rotate(2.5deg) translateY(2px)}}
@keyframes walkx{0%{transform:translateX(0) scaleX(1)}49.9%{transform:translateX(var(--d)) scaleX(1)}50%{transform:translateX(var(--d)) scaleX(-1)}99.9%{transform:translateX(0) scaleX(-1)}100%{transform:translateX(0) scaleX(1)}}
@keyframes legA{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes rockf{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes flamef{from{transform:scaleY(.9) scaleX(1.05)}to{transform:scaleY(1.1) scaleX(.95)}}
@keyframes tread{to{stroke-dashoffset:-24}}
@keyframes cloudf{from{transform:translateX(0)}to{transform:translateX(200px)}}

.runner .rd{animation:gallop .22s infinite}
.runner.tired .rd{animation:none}

/* ===== gioco a tutto schermo ===== */
.app{padding-block:12px}
.stage{width:min(100%,max(760px,calc((100vh - 24px)*1.8182)));max-height:none}
.ov{position:absolute;z-index:3;margin:0}
.hud.ov{top:12px;right:12px;gap:6px;justify-content:flex-end;max-width:66%;pointer-events:none}
.hud.ov .chip{background:rgba(8,13,38,.78);min-width:64px;padding:3px 10px;border-radius:12px;pointer-events:auto}
.hud.ov .chip b{font-size:1.02rem;line-height:1.15}
.hud.ov .chip span{font-size:.6rem}
.news.ov{left:12px;bottom:12px;max-width:34%;min-height:0;padding:7px 14px;font-size:.82rem;background:rgba(8,13,38,.78);border-radius:12px;pointer-events:none}
.keys.ov{right:12px;bottom:12px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 12px;max-width:40%;background:rgba(8,13,38,.7);padding:7px 12px;border-radius:12px;font-size:.7rem;color:var(--muted);pointer-events:none}
.keys.ov kbd{min-width:20px;height:20px;font-size:.66rem;padding:0 5px;margin-right:2px;box-shadow:0 2px 0 #8a96b8}
.prompt{bottom:64px;font-size:1.02rem}
#wsnow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.roomtag{z-index:3}
.print{fill:rgba(88,108,168,.5);animation:pfade 18s linear forwards}
.sbob{animation:sbob 1.5s ease-in-out infinite alternate}
.bokeh{opacity:0;animation:bokeh 6s ease-in-out infinite alternate}
.hit{animation:hitf .45s}
.lg{transform-box:fill-box;transform-origin:50% 0}
.runner:not(.still) .lg1,.runner:not(.still) .lg4{animation:legG .26s ease-in-out infinite alternate}
.runner:not(.still) .lg2,.runner:not(.still) .lg3{animation:legG .26s ease-in-out infinite alternate-reverse}
.runner.still .rd,.runner.tired .rd{animation:none}
@keyframes pfade{0%,70%{opacity:.5}100%{opacity:0}}
@keyframes sbob{from{transform:translateY(0)}to{transform:translateY(-9px)}}
@keyframes bokeh{0%{opacity:0;transform:translateY(0)}50%{opacity:.75}100%{opacity:.1;transform:translateY(-34px)}}
@keyframes hitf{0%{filter:brightness(2.4)}100%{filter:none}}
@keyframes legG{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
@media (max-width:1100px){.news.ov,.keys.ov{display:none}}

.app{width:100%}

.stage.inroom .hud.ov{display:none}
.roomtag{max-width:60%}

/* ===== Villaggio (home) ===== */
.hero{position:relative;border-radius:22px;overflow:hidden;height:min(46vh,440px);min-height:300px;border:1px solid var(--line)}
.hero svg{width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,34,.85),rgba(6,10,34,.2) 60%,rgba(6,10,34,0))}
.hero-t{position:absolute;z-index:2;left:28px;bottom:26px;max-width:min(560px,88%)}
.hero-t h1{font:700 clamp(2.4rem,5vw,4rem)/1 var(--f-display);margin:0 0 8px;text-shadow:0 3px 0 rgba(214,49,46,.8)}
.hero-t p{margin:0 0 14px;color:#dbe6ff;font-size:1.05rem}
.hero-b{display:flex;gap:10px;flex-wrap:wrap}
.hstats{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.hh{font:700 1.7rem var(--f-display);margin:18px 0 10px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.place{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:16px;background:var(--panel);border:1.5px solid var(--line);color:var(--snow);font:inherit;cursor:pointer;transition:transform .15s,border-color .15s}
.place:hover{transform:translateY(-3px);border-color:var(--gold)}
.place .pic{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.07)}
.place .ptx{display:flex;flex-direction:column;min-width:0}
.place .ptx small{color:var(--muted)}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
@media (max-width:1100px){.hgrid{grid-template-columns:minmax(0,1fr)}}
.quests{display:flex;flex-direction:column;gap:8px}
.quest{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.quest .bar{margin-top:6px;height:8px}
.quest.got{opacity:.55}
.qv{font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.qp{font-weight:800;color:var(--muted);font-size:.85rem}
.newsl{margin:0;padding-left:18px;color:var(--muted)}
.tip{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:rgba(255,200,74,.12);border:1px solid rgba(255,200,74,.3)}
.hlinks{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 8px}
/* ===== dialoghi ===== */
.dlg{position:absolute;z-index:5;left:50%;bottom:16px;transform:translateX(-50%);width:min(720px,92%);display:flex;gap:14px;align-items:center;padding:12px 18px;border-radius:18px;background:rgba(8,13,38,.94);border:2px solid var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.dport{flex:none;width:64px;height:86px;border-radius:12px;background:linear-gradient(#27407f,#3c5ba3);overflow:hidden;display:grid;place-items:end center}
.dport svg{width:100%;height:100%}
.dtxt{min-width:0}.dtxt p{margin:2px 0 6px;font-size:1.05rem}.dtxt small{color:var(--muted)}
.stage.inroom{--lit:1!important}
#scene [fill="url(#gGlow)"]{opacity:calc(var(--lit,1)*.75)}
#scene [fill="url(#gSpill)"]{opacity:var(--lit,1)}

.skates{display:none}
#me.onice .skates{display:block}
.pwob{transform-box:fill-box;transform-origin:50% 100%;animation:pwob 2.2s ease-in-out infinite alternate}
@keyframes pwob{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}

/* ===== prestazioni ===== */
.star,.flick,.aurora,.aurora2,.cloud,.sparkle{animation:none!important;filter:none}
.glow{filter:none;animation:none}
#scene.bl0 .p0,#scene.bl1 .p1{opacity:.3}
#scene.bl0 .sparkle:nth-child(odd){opacity:.3}
#scene.bl1 .sparkle:nth-child(even){opacity:.3}
.aurora,.aurora2{opacity:1}

/* ===== missione di Babbo Natale ===== */
.pr{transition:transform 1.9s ease-in-out}
.pel{opacity:0;transition:opacity .6s}
.pel.on{opacity:1}
.tr{animation:trf .9s linear forwards}
@keyframes trf{from{opacity:.9}to{opacity:0;transform:translateX(-60px)}}
.flyhud{position:absolute;inset:0;pointer-events:none;z-index:4}
.fh-top{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:min(520px,70%);text-align:center;background:rgba(8,13,38,.88);border:1.5px solid var(--gold);border-radius:16px;padding:8px 16px;display:flex;flex-direction:column;gap:3px}
.fh-top b{font:700 1.4rem var(--f-display)}
.fh-top span{color:#dbe6ff;font-size:.9rem}
.fh-top small{color:var(--muted)}
.fh-top .bar{height:10px}
.fh-keys{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:5px;background:rgba(8,13,38,.82);padding:8px 12px;border-radius:12px;font-size:.78rem;color:var(--muted)}
.fh-keys kbd{min-width:20px;height:20px;font-size:.66rem;padding:0 5px;margin-right:2px;box-shadow:0 2px 0 #8a96b8}

/* ===== tema oro, come il mockup ===== */
:root{--gold:#e6c26a;--gold-2:#f7e3a1;--gold-3:#a8761f;--f-gold:'Playfair Display','Cinzel',Georgia,serif;--f-cap:'Cinzel','Playfair Display',Georgia,serif}
body{background:#060b22;background-image:radial-gradient(ellipse at 20% 0%,#16245a 0,transparent 55%),radial-gradient(ellipse at 90% 100%,#2a1633 0,transparent 50%),linear-gradient(180deg,#070c26,#0a1236)}
.side{position:sticky;background:linear-gradient(180deg,#070c24,#0b1334 60%,#0a1030);border-right:1px solid rgba(230,194,106,.35);padding:26px 22px 22px;gap:14px;box-shadow:inset -1px 0 0 rgba(0,0,0,.5)}
.side::before{content:"";position:absolute;inset:7px;border:1px solid rgba(230,194,106,.28);border-radius:14px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2044%2044'%3E%3Cg%20fill%3D'none'%20stroke%3D'%2523e6c26a'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M2%2042V14Q2%202%2014%202h28'%2F%3E%3Cpath%20d%3D'M8%2042V18Q8%208%2018%208h24'%20opacity%3D'.6'%2F%3E%3Cpath%20d%3D'M14%2014q8%200%208%208'%2F%3E%3Ccircle%20cx%3D'14'%20cy%3D'14'%20r%3D'2'%20fill%3D'%2523e6c26a'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top left/44px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2044%2044'%3E%3Cg%20transform%3D'matrix(-1%200%200%201%2044%200)'%20fill%3D'none'%20stroke%3D'%2523e6c26a'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M2%2042V14Q2%202%2014%202h28'%2F%3E%3Cpath%20d%3D'M8%2042V18Q8%208%2018%208h24'%20opacity%3D'.6'%2F%3E%3Cpath%20d%3D'M14%2014q8%200%208%208'%2F%3E%3Ccircle%20cx%3D'14'%20cy%3D'14'%20r%3D'2'%20fill%3D'%2523e6c26a'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top right/44px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2044%2044'%3E%3Cg%20transform%3D'matrix(1%200%200%20-1%200%2044)'%20fill%3D'none'%20stroke%3D'%2523e6c26a'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M2%2042V14Q2%202%2014%202h28'%2F%3E%3Cpath%20d%3D'M8%2042V18Q8%208%2018%208h24'%20opacity%3D'.6'%2F%3E%3Cpath%20d%3D'M14%2014q8%200%208%208'%2F%3E%3Ccircle%20cx%3D'14'%20cy%3D'14'%20r%3D'2'%20fill%3D'%2523e6c26a'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom left/44px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2044%2044'%3E%3Cg%20transform%3D'matrix(-1%200%200%20-1%2044%2044)'%20fill%3D'none'%20stroke%3D'%2523e6c26a'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M2%2042V14Q2%202%2014%202h28'%2F%3E%3Cpath%20d%3D'M8%2042V18Q8%208%2018%208h24'%20opacity%3D'.6'%2F%3E%3Cpath%20d%3D'M14%2014q8%200%208%208'%2F%3E%3Ccircle%20cx%3D'14'%20cy%3D'14'%20r%3D'2'%20fill%3D'%2523e6c26a'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom right/44px no-repeat}
.brand{gap:10px;font:600 2rem/1.05 var(--f-gold);letter-spacing:.01em;text-shadow:none;position:relative}
.brand span{background:linear-gradient(180deg,#fbe9a6,#d8aa4a 60%,#a8761f);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;text-align:center}
.brand img{width:112px;height:112px;box-shadow:0 0 0 2px rgba(230,194,106,.7),0 0 26px rgba(230,194,106,.35)}
.bline{display:block;width:80%;height:1px;background:linear-gradient(90deg,transparent,#e6c26a,transparent);margin-top:2px}
.links{gap:10px;margin-top:6px}
.links button{font:700 1.08rem var(--f-body);color:#eef2ff;padding:13px 16px;border-radius:14px;border:1.5px solid transparent;gap:14px}
.links button svg{width:30px;height:30px;color:initial}
.links button:hover{background:rgba(230,194,106,.08);color:#fff}
.links button.on{background:linear-gradient(180deg,#b5282a,#7a1218);border-color:#e6c26a;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 0 18px rgba(214,49,46,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#fff}
.sdiv{display:flex;align-items:center;justify-content:center;height:12px;margin:4px 6px}
.sdiv i{display:block;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(230,194,106,.7),transparent);position:relative}
.sdiv i::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;background:#e6c26a;transform:translateX(-50%) rotate(45deg)}
.side-card{background:none;border:0;padding:0;align-items:center;text-align:center;gap:10px;margin-top:2px}
.side-card small{font:600 .95rem var(--f-cap);letter-spacing:.06em;color:#e6c26a;text-transform:uppercase}
.avatar{width:96px;height:96px;border-radius:50%;border:3px solid #e6c26a;overflow:hidden;background:radial-gradient(circle at 50% 30%,#4a6aa8,#18285a 70%);box-shadow:0 0 0 3px rgba(0,0,0,.4),0 0 22px rgba(230,194,106,.3)}
.avatar svg{width:100%;height:100%;display:block}
.side-card b{font:600 1.5rem var(--f-gold);color:#f2dfa5}
.btn-red,.btn-o,.btn-gold,.btn-glass{font:700 1rem var(--f-body);border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .12s,filter .15s}
.btn-red{width:100%;padding:12px 16px;color:#fff;background:linear-gradient(180deg,#c42f2c,#84151a);border:1.5px solid #e6c26a;box-shadow:0 0 14px rgba(214,49,46,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-o{width:100%;padding:11px 16px;color:#eef2ff;background:rgba(8,14,40,.6);border:1.5px solid rgba(230,194,106,.6)}
.btn-o.big{padding:16px 20px;font-size:1.15rem;border-radius:20px;gap:12px}
.btn-red:hover,.btn-o:hover,.btn-gold:hover,.btn-glass:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-gold{padding:15px 28px;font-size:1.12rem;color:#3b2400;background:linear-gradient(180deg,#fbe9a6,#e0b550 55%,#b88426);border:1.5px solid #fff1c0;box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-gold svg{width:22px;height:22px}
.btn-glass{padding:15px 28px;font-size:1.12rem;color:#fff;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.btn-glass svg{width:26px;height:26px}
#snd::before,#rst::before,#rst2::before{content:"";width:24px;height:24px;flex:none;background:center/contain no-repeat}
#snd::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6c26a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%23e6c26a'/%3E%3Cpath d='M16 9a4 4 0 010 6M18.5 6.5a8 8 0 010 11'/%3E%3C/svg%3E")}
#rst::before,#rst2::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6c26a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 11-2.5-5.8'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")}
.app{padding:22px 26px 28px}
/* hero */
.hero{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:2.35/1;min-height:300px;border:1.5px solid rgba(230,194,106,.45);box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.4)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,8,30,.72),rgba(4,8,30,.12) 62%,rgba(4,8,30,.05)),linear-gradient(0deg,rgba(4,8,30,.7),transparent 55%)}
.hero-pill{position:absolute;z-index:3;top:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 36px;border-radius:999px;background:rgba(6,10,34,.72);border:1.5px solid rgba(230,194,106,.7);white-space:nowrap}
.hero-pill b{font:600 1.55rem var(--f-cap);letter-spacing:.08em;color:#f2dfa5}
.hero-pill span{font-size:.86rem;color:#eef2ff}
.hero-t{position:absolute;z-index:3;left:34px;bottom:30px;max-width:min(680px,90%)}
.hero-t h1{font:600 clamp(2.2rem,4.4vw,3.6rem)/1.05 var(--f-gold);margin:0 0 10px;color:#f6e6b0;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hero-t p{margin:0 0 18px;color:#fff;font-weight:600;font-size:1.05rem;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.hero-b{display:flex;gap:14px;flex-wrap:wrap}
/* schede statistiche */
.srow4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:22px 0 16px}
.srow3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:8px}
.scard{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;padding:16px 12px 14px;min-height:150px;text-align:center;border-radius:22px;border:1.5px solid rgba(230,194,106,.55);background:linear-gradient(180deg,rgba(16,24,64,.82),rgba(6,10,34,.92));box-shadow:inset 0 0 22px rgba(230,194,106,.07),0 8px 22px rgba(0,0,0,.35)}
.scard::before{content:"";position:absolute;inset:5px;border-radius:17px;border:1px solid rgba(230,194,106,.18);pointer-events:none}
.sl{font:600 1rem var(--f-cap);letter-spacing:.03em;color:#f0d68a;text-transform:uppercase}
.sn{font:700 3.6rem/1 var(--f-gold);background:linear-gradient(180deg,#fbe9a6,#dcae4e 60%,#b88426);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:lining-nums}
.sn.sm2{font-size:1.5rem;line-height:1.1;color:#f0d68a;background:none;-webkit-text-fill-color:#f0d68a;font-family:var(--f-body);font-weight:800}
.sn.sm3{font-size:2.4rem}
.si{display:block;width:46px;height:40px}
.si svg{width:100%;height:100%}
.scard.wide{flex-direction:row;justify-content:flex-start;gap:16px;padding:16px 22px;min-height:104px;text-align:left}
.scard.wide>div{display:flex;flex-direction:column;gap:4px}
.scard.wide .si{width:54px;height:54px;flex:none}
.scard.wide .sn.sm3{font-size:2.3rem}
.homefoot{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.fnote{text-align:center;color:#f0d68a;font-weight:700;margin:20px 0 0;font-size:.95rem}
.hh{font:600 1.7rem var(--f-gold);color:#f2dfa5}
.hlinks .btn-o{width:auto}
.place,.quest,.chip,.news.ov,.hud.ov .chip{border-color:rgba(230,194,106,.4)}
.chip span{font-family:var(--f-cap);color:#f0d68a}
.btn.gold{background:linear-gradient(180deg,#fbe9a6,#e0b550 55%,#b88426);color:#3b2400;box-shadow:0 3px 0 #8a5e14}
#mTitle,.sheet h2{font:600 1.9rem var(--f-gold);color:#f2dfa5}
@media (max-width:1100px){.srow4{grid-template-columns:repeat(2,minmax(0,1fr))}.srow3{grid-template-columns:minmax(0,1fr)}.homefoot{grid-template-columns:1fr}.hero-pill b{font-size:1.1rem}}
@media (max-width:900px){.side::before{display:none}.avatar{display:none}.brand img{width:44px;height:44px}.brand{font-size:1.2rem}.bline{display:none}}

.app{min-width:0}
.hero-pill{max-width:92%;white-space:normal;text-align:center}
.hero-pill span{font-size:.8rem}
.shell{overflow-x:clip}

/* ===== layout come il mockup 3 ===== */
body{background:#050914 url(assets/village.webp) center top/cover fixed no-repeat}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,6,18,.84) 0,rgba(3,6,18,.5) 36%,rgba(3,6,18,.12) 78%),linear-gradient(0deg,rgba(3,6,18,.94) 0,rgba(3,6,18,.6) 40%,transparent 68%)}
body[data-view=village]::before{background:rgba(3,6,18,.55)}
.shell{grid-template-columns:268px minmax(0,1fr)}
.side{margin:12px 0 12px 12px;height:calc(100vh - 24px);border-radius:24px;background:rgba(7,10,26,.76);border:1px solid rgba(255,255,255,.12);padding:22px 16px 18px;gap:12px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.side::before{display:none}
.brand img{width:120px;height:120px;box-shadow:0 0 0 2px rgba(230,194,106,.6),0 0 24px rgba(230,194,106,.25)}
.brand span{font:700 2.05rem/1.02 var(--f-gold)}
.bline{display:flex;align-items:center;gap:10px;width:86%;height:auto;margin-top:0;background:none;color:#e6c26a;font-style:normal;font-size:.9rem}
.bline::before,.bline::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#e6c26a)}
.bline::after{background:linear-gradient(270deg,transparent,#e6c26a)}
.links{gap:3px;margin-top:10px}
.links button{font:600 1.02rem var(--f-body);color:#eef2ff;padding:10px 14px;border-radius:12px;border:1px solid transparent;gap:14px;box-shadow:none}
.links button svg{width:28px;height:28px}
.links button.on{background:linear-gradient(180deg,#c5302c,#8d1419);border-color:#ff6e62;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 14px rgba(214,49,46,.35);color:#fff}
.sdiv{display:none}
.side-card{margin-top:auto;position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:0 14px 14px;gap:2px}
.avatar{display:block;width:96px;height:96px;margin:-52px auto 6px;padding:0;cursor:pointer;border-radius:50%;border:3px solid #e6c26a;overflow:hidden;background:radial-gradient(circle at 50% 30%,#4a6aa8,#18285a 70%);box-shadow:0 0 0 3px rgba(0,0,0,.4)}
.side-card b{font:700 1.6rem var(--f-gold);color:#fff3cf}
.rt{color:#c9d3ee;font-size:.9rem}
.xprow{width:100%;display:flex;flex-direction:column;gap:4px;margin-top:8px;text-align:left}
.xprow small{color:#eef2ff;font-size:.82rem}.xprow .r{text-align:right;color:#c9d3ee}
.xbar{height:9px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.xbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f3d98c,#d4a02f);border-radius:99px;transition:width .3s}
.app{padding:16px 34px 30px}
.topbar{display:flex;justify-content:flex-end;gap:12px;margin-bottom:6px;min-height:58px;position:relative;z-index:2}
body[data-view=village] .topbar{display:none}
.pill{position:relative;display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:14px;background:rgba(8,12,30,.72);border:1px solid rgba(255,255,255,.16);color:#fff;font:700 1.12rem var(--f-body);cursor:pointer;height:52px}
.pill svg{width:24px;height:24px}
.pill.sq{width:52px;padding:0;justify-content:center}
.pill.av{width:56px;height:56px;padding:0;border-radius:50%;border:2px solid #e6c26a;overflow:hidden;background:radial-gradient(circle at 50% 30%,#4a6aa8,#18285a 70%)}
.pill.av svg{width:100%;height:100%}
.pill .dot{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:#e8352f;border:2px solid #0a1030}
.coinic{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a6,#d4a02f 60%,#8a5e14);box-shadow:inset 0 0 0 2px #f9d77a}
.cap{font:600 .95rem var(--f-cap);letter-spacing:.3em;color:#e6c26a;text-transform:uppercase;display:block}
.hero2{padding:34px 0 22px;max-width:780px}
.hero2 h1{font:700 clamp(3rem,7.2vw,6.2rem)/.96 var(--f-gold);margin:8px 0 18px;background:linear-gradient(180deg,#fff8e0,#f3d98c 72%,#c9a24e);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
.hero2 p{margin:0 0 24px;font-size:1.28rem;line-height:1.4;color:#fff;max-width:560px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.hero-b{display:flex;gap:16px;flex-wrap:wrap}
.btn-gold svg{width:24px;height:24px}
.btn-gold{padding:17px 30px;font-size:1.2rem}
.btn-glass{padding:17px 30px;font-size:1.2rem;background:rgba(10,16,40,.55);border:1.5px solid rgba(255,255,255,.4)}
.chips5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:20px 0}
.chip5{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;background:rgba(8,12,30,.7);border:1px solid rgba(255,255,255,.14);min-width:0}
.chip5 i{display:block;width:46px;height:46px;flex:none}.chip5 i svg{width:100%;height:100%}
.chip5 b{display:block;font:700 2rem/1 var(--f-gold);color:#fff}
.chip5 span{color:#c9d3ee;font-size:.95rem}
.row2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px}
.card-next{position:relative;text-align:left;border-radius:22px;min-height:250px;padding:24px 26px;overflow:hidden;border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer;font:inherit;display:flex;align-items:flex-end;background:linear-gradient(0deg,rgba(6,10,28,.88),rgba(6,10,28,.15) 70%),url(assets/village.webp) 42% 72%/cover}
.cn-t{max-width:78%}
.cn-t h2{font:700 clamp(1.8rem,3vw,2.5rem)/1.05 var(--f-gold);margin:6px 0 8px;color:#fff3cf}
.cn-t p{margin:0;font-size:1.05rem}
.roundgo{position:absolute;right:26px;bottom:26px;width:62px;height:62px;border-radius:50%;border:2px solid #e6c26a;background:rgba(40,28,6,.72);display:grid;place-items:center;color:#f3d98c}
.roundgo svg{width:28px;height:28px}
.glass{background:rgba(8,12,30,.72);border:1px solid rgba(255,255,255,.14);border-radius:20px}
.padx{padding:20px}
.prog{padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.ph{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ph b{display:block;font:700 1.35rem var(--f-body);margin-top:6px}
.emb{display:block;width:64px;height:68px}.emb svg{width:100%;height:100%}
.xb{height:14px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.xb i{display:block;height:100%;background:linear-gradient(90deg,#f3d98c,#d4a02f);border-radius:99px}
.xt{text-align:right;color:#c9d3ee;font-size:.9rem}
.pl{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.pl li{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid rgba(255,255,255,.1)}
.pl i{display:block;width:26px;height:26px}.pl i svg{width:100%;height:100%}
.pl em{font-style:normal;color:#c9d3ee}
.promo3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.promo{position:relative;border-radius:22px;padding:22px 24px;min-height:240px;overflow:hidden;border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.promo h3{font:700 1.9rem/1.08 var(--f-gold);margin:2px 0 4px;color:#fff3cf}
.promo p{margin:0 0 auto;max-width:260px;color:#eef2ff}
.p-red{background:linear-gradient(90deg,rgba(70,10,18,.9),rgba(70,10,18,.4)),url(assets/village.webp) 20% 88%/cover}
.p-amb{background:linear-gradient(90deg,rgba(46,28,8,.9),rgba(46,28,8,.35)),url(assets/village.webp) 62% 70%/cover}
.p-blu{background:linear-gradient(90deg,rgba(8,22,56,.9),rgba(8,22,56,.3)),url(assets/village.webp) 90% 40%/cover}
.btn-o2{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;border:1.5px solid #e6c26a;background:rgba(0,0,0,.28);color:#fff;font:700 1rem var(--f-body);cursor:pointer}
.btn-o2 svg{width:18px;height:18px}
.btn-o2.red{background:linear-gradient(180deg,#c42f2c,#84151a);border-color:#ff6e62}
.btn-o2:hover{filter:brightness(1.15)}
.evh{display:flex;align-items:center;gap:10px;margin:26px 0 12px}.evh i{display:block;width:22px;height:22px}.evh .cap{letter-spacing:.2em}
.events4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ev{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 18px;border-radius:16px;background:rgba(8,12,30,.7);border:1px solid rgba(255,255,255,.14);color:#fff;font:inherit;cursor:pointer;min-width:0}
.ev:hover,.chip5:hover,.place:hover{border-color:rgba(230,194,106,.7)}
.ev i{display:block;width:42px;height:42px;flex:none}.ev i svg{width:100%;height:100%}
.ev b{display:block;font-size:1rem}.ev span{color:#c9d3ee;font-size:.85rem}
.hh2{font:700 1.9rem var(--f-gold);color:#fff3cf;margin:30px 0 12px}
.vt{font:700 clamp(2.4rem,5vw,3.6rem)/1.05 var(--f-gold);margin:14px 0 6px;color:#fff3cf}
.vs{color:#dbe6ff;margin:0 0 20px;font-size:1.1rem}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.rolegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.rc{padding:20px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.rc.on{border-color:#e6c26a}
.rc p{color:#c9d3ee;margin:0 0 8px;font-size:.92rem}
.rav{width:112px;height:112px;border-radius:50%;border:3px solid #e6c26a;overflow:hidden;background:radial-gradient(circle at 50% 30%,#4a6aa8,#18285a 70%)}
.rav svg{width:100%;height:100%}
.rav.sec{display:grid;place-items:center}
.rank{list-style:none;margin:0;padding:0}
.rank li{display:grid;grid-template-columns:40px 1fr auto;gap:10px;padding:12px 8px;border-top:1px solid rgba(255,255,255,.1);align-items:center}
.rank li.me{background:rgba(230,194,106,.12);border-radius:10px}
.rank b{font:700 1.4rem var(--f-gold);color:#f3d98c}.rank em{font-style:normal;color:#c9d3ee}
.setrow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.top .hud .chip{background:rgba(8,12,30,.7)}
@media (max-width:1180px){.chips5{grid-template-columns:repeat(2,minmax(0,1fr))}.row2,.promo3,.cols2{grid-template-columns:minmax(0,1fr)}.events4{grid-template-columns:repeat(2,minmax(0,1fr))}.setrow{grid-template-columns:1fr}}
@media (max-width:900px){.side{margin:0;height:auto;border-radius:0}.side-card{display:none}.shell{grid-template-columns:minmax(0,1fr)}.app{padding:12px 16px}}

.links{margin-bottom:58px}
@media (max-height:900px){.brand img{width:84px;height:84px}.brand span{font-size:1.7rem}.links button{padding:7px 12px}.links button svg{width:24px;height:24px}.avatar{width:80px;height:80px;margin-top:-44px}.links{margin-bottom:50px}}

/* ===== gioco a schermo quasi pieno, barra nascondibile ===== */
.c3d{position:absolute;inset:0;width:100%;height:100%;display:none;touch-action:none}
.stage.three .c3d{display:block}
.stage.three #vsvg{display:none}
body[data-view=village]{overflow:hidden}
body[data-view=village] .app{padding:0;max-width:none}
body[data-view=village] .stage{width:100%;height:100vh;max-height:none;aspect-ratio:auto;border-radius:0;border:0;margin:0;box-shadow:none;background:#060b24}
body[data-view=village] .garland{display:none}
body.nonav .shell{grid-template-columns:minmax(0,1fr)}
body.nonav .side{display:none}
.navtoggle{position:fixed;left:12px;top:12px;z-index:70;width:46px;height:46px;border-radius:14px;border:1.5px solid rgba(230,194,106,.7);background:rgba(8,12,30,.82);cursor:pointer;display:none;place-items:center;padding:0}
.navtoggle svg{width:24px;height:24px}
.navtoggle.mbtn{left:66px}
body[data-view=village] .navtoggle{display:grid}
body:not(.nonav)[data-view=village] .navtoggle{left:284px}
body:not(.nonav)[data-view=village] .navtoggle.mbtn{left:338px}
.navtoggle:hover{border-color:#fff1c0}
.side{overflow:hidden}
@media (max-height:920px){.brand img{width:84px;height:84px}.brand span{font-size:1.6rem}.links button{padding:6px 12px}.links button svg{width:24px;height:24px}.links{margin-bottom:46px}.avatar{width:76px;height:76px;margin-top:-42px}.side-card b{font-size:1.3rem}.side{padding:14px 14px 12px;gap:8px}}
@media (max-height:700px){.links button{padding:4px 10px;font-size:.92rem}.brand img{width:64px;height:64px}.bline{display:none}}
.hud.ov{top:1.4%;right:1.2%;left:auto;width:auto;max-width:62%;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.7vw;pointer-events:none}
.stage.inroom .hud.ov{display:none}
.hud.ov .chip.hc{position:static;display:flex;flex-direction:row;align-items:center;gap:.8vw;min-width:0;padding:.6vw 1.2vw .6vw .9vw;border-radius:.9vw;background:linear-gradient(180deg,rgba(20,16,18,.92),rgba(8,8,12,.95));border:.14vw solid #d8aa4a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 0 0 .22vw rgba(216,170,74,.2),0 .3vw .9vw rgba(0,0,0,.55);text-align:left;pointer-events:auto;height:auto;width:auto}
.hud.ov .chip.hc .hi{display:block;width:2.4vw;height:2.4vw;min-width:26px;min-height:26px;flex:none}
.hud.ov .chip.hc .hi svg{width:100%;height:100%}
.hud.ov .chip.hc span{display:block;font:600 max(10px,.72vw) var(--f-cap);letter-spacing:.04em;color:#f0e2b8;text-transform:uppercase;white-space:nowrap}
.hud.ov .chip.hc b{display:block;font:600 max(16px,1.7vw)/1.05 var(--f-gold);color:#fff;white-space:nowrap}
.keys.ov{max-width:50%}
.news.ov{max-width:38%}
/* ===== atmosfera natalizia ===== */
.garland{position:fixed;top:0;left:0;right:0;height:22px;z-index:6;pointer-events:none;background:radial-gradient(circle at 12px 9px,#ff4d4d 5px,transparent 6px) 0 0/96px 22px repeat-x,radial-gradient(circle at 36px 11px,#ffd34d 5px,transparent 6px) 0 0/96px 22px repeat-x,radial-gradient(circle at 60px 9px,#4dd2ff 5px,transparent 6px) 0 0/96px 22px repeat-x,radial-gradient(circle at 84px 11px,#6dff7a 5px,transparent 6px) 0 0/96px 22px repeat-x;filter:drop-shadow(0 0 5px rgba(255,220,120,.7));animation:gl 1.6s steps(2) infinite}
.garland::before{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:linear-gradient(90deg,#173a24,#2d7a4d,#173a24);opacity:.9}
@keyframes gl{50%{opacity:.55}}
.vt{background:linear-gradient(180deg,#fff8e0,#f3d98c 70%,#d6312e);-webkit-background-clip:text;background-clip:text;color:transparent}
.side{box-shadow:0 10px 40px rgba(0,0,0,.45),inset 0 2px 0 #d6312e}
.pill.mus{font-size:.9rem;padding:0 14px}
.pill.mus span{white-space:nowrap}
.view{position:relative}

.prs{display:grid;grid-template-columns:1fr 280px;gap:16px;height:calc(100vh - 190px);min-height:380px}
.prs-stage{position:relative;overflow:hidden;padding:0}
.prs-stage canvas{width:100%;height:100%;display:block}
.prs-cnt{position:absolute;left:14px;top:12px;padding:6px 12px;border-radius:14px;background:rgba(8,12,30,.7);border:1px solid rgba(230,194,106,.5);font-weight:800;color:#f6e6b0}
.prs-side{overflow:auto}.prs-side h3{margin:0 0 10px;font-family:var(--f-display);color:#f6e6b0}
.prs-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prs-list button{padding:9px 6px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#e8eefc;font:700 13px var(--f-body,Nunito),sans-serif;cursor:pointer}
.prs-list button.on{background:linear-gradient(#f6d77a,#c8961f);color:#3a1e0a;border-color:#f6e6b0}
.prs-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.prs-tip{font-size:12px;opacity:.7;margin-top:12px}
.prs-err{padding:30px;text-align:center}
@media(max-width:900px){.prs{grid-template-columns:1fr;height:auto}.prs-stage{height:55vh}}

body[data-view=village],body[data-view=presepe],.stage,.prs-stage,.hud{-webkit-user-select:none;user-select:none}
body[data-view=village] input,body[data-view=village] textarea{-webkit-user-select:text;user-select:text}

.mp{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:18px;align-items:start}
.mp-card{text-align:center}.mp-art{width:130px;height:130px;margin:6px auto 12px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.mp-card h2{margin:0;font-family:var(--f-display);font-size:1.6rem;color:#f6e6b0}.mp-card p{margin:4px 0 14px;opacity:.75}
.mp-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.14);cursor:pointer;overflow:hidden}.mp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f6d77a,#c8961f)}
.mp-time{font-size:.85rem;opacity:.75;margin:6px 0 12px}
.mp-ctl{display:flex;justify-content:center;align-items:center;gap:14px}
.mp-ctl button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#e8eefc;cursor:pointer;display:grid;place-items:center;padding:0}
.mp-ctl button svg{width:22px;height:22px}.mp-ctl button.on{color:#3a1e0a;background:linear-gradient(#f6d77a,#c8961f)}
.mp-ctl button.big{width:66px;height:66px;color:#3a1e0a;background:linear-gradient(#f6d77a,#c8961f)}.mp-ctl button.big svg{width:30px;height:30px}
.mp-vol{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:16px;font-size:.9rem}.mp-vol input{width:55%}
.mp-list h3{margin:0 0 10px;font-family:var(--f-display);color:#f6e6b0}.mp-list ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:60vh;overflow:auto}
.mp-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid transparent;cursor:pointer}
.mp-list li span{opacity:.6;font-size:.85rem;text-align:right}.mp-list li:hover{background:rgba(255,255,255,.1)}
.mp-list li.on{border-color:#f0c15a;background:rgba(240,193,90,.14)}
@media(max-width:900px){.mp{grid-template-columns:1fr}}

#order{position:absolute;left:50%;top:78px;transform:translateX(-50%);z-index:6;max-width:min(560px,60%);text-align:center;padding:9px 18px;border-radius:16px;background:rgba(8,12,30,.78);border:1px solid rgba(240,193,90,.6);box-shadow:0 4px 18px rgba(0,0,0,.4);pointer-events:none}
#order[hidden]{display:none}
#order b{display:block;font:800 .98rem var(--f-body);color:#f6e6b0}
#order span{display:block;font:600 .8rem var(--f-body);opacity:.8;margin-top:2px}

html.locked .app{visibility:hidden}
#login{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at 50% 20%,#1b2a66 0%,#0b1026 70%)}
.lg-card{width:min(420px,100%);text-align:center;padding:30px 26px;border-radius:24px;background:rgba(10,16,44,.92);border:1px solid rgba(240,193,90,.6);box-shadow:0 20px 60px rgba(0,0,0,.6);color:#f4ecd2}
.lg-card img{border-radius:50%;border:2px solid #c8961f}
.lg-card h1{margin:10px 0 12px;font-family:var(--f-display);color:#f6e6b0;font-size:2rem}
.lg-card p{margin:0 0 14px;opacity:.85;line-height:1.4}
.lg-card input{width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:600 1.05rem var(--f-body);margin-bottom:12px;text-align:center}
#lgNum{font-size:1.8rem;letter-spacing:.35em;font-family:monospace}
.lg-btn{width:100%;padding:14px;border-radius:30px;border:0;cursor:pointer;font:800 1.05rem var(--f-body);color:#3a1e0a;background:linear-gradient(#f6d77a,#c8961f)}
.lg-alt{margin-top:14px!important;font-size:.9rem}
.lg-links{display:flex;gap:10px;justify-content:center}
.lg-links button{background:none;border:0;color:#9fb8ff;text-decoration:underline;cursor:pointer;font:600 .9rem var(--f-body)}
.lg-msg{min-height:1.2em;margin:12px 0 0!important;color:#ffd9a0}
.lg-out{margin:10px 14px 14px;padding:8px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#e8eefc;cursor:pointer;font:700 .9rem var(--f-body);text-align:center}
.lg-out small{display:block;opacity:.6;font-weight:600;font-size:.72rem;overflow:hidden;text-overflow:ellipsis}
.adm-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-bottom:6px}
.adm-form input{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:600 1rem var(--f-body)}
.adm-tab{width:100%;border-collapse:collapse;margin-top:10px}.adm-tab th,.adm-tab td{text-align:left;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.1);font-size:.92rem}
.adm-del{background:none;border:1px solid rgba(255,120,120,.6);color:#ffb0b0;border-radius:10px;padding:5px 12px;cursor:pointer}
@media(max-width:700px){.adm-form{grid-template-columns:1fr}}

#ytWrap{position:fixed;z-index:20;border-radius:14px;overflow:hidden;background:#000}
#ytWrap iframe{width:100%;height:100%;border:0;display:block}
#ytWrap.yt-hide{left:-20px;top:-20px;width:2px;height:2px;opacity:0;pointer-events:none}
.yt-slot{aspect-ratio:16/9;border-radius:14px;background:#000;display:grid;place-items:center;color:#9fb0e0;margin-bottom:12px;font-size:.9rem}
.mp-yt{display:inline-block;margin-top:10px;color:#9fb8ff}

.vt2{font-family:var(--f-display);color:#f6e6b0;margin:22px 0 10px;font-size:1.4rem}
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dl{display:grid;gap:8px;text-align:center;justify-items:center}.dl b{font-size:1.15rem;color:#f6e6b0}.dl span{opacity:.75;font-size:.9rem}
.dl .btn-gold{display:inline-block;text-decoration:none;padding:12px 22px;border-radius:30px}
@media(max-width:700px){.dl-grid{grid-template-columns:1fr}}

#touchpad{display:none;position:absolute;left:0;right:0;bottom:0;z-index:7;padding:14px;justify-content:space-between;align-items:flex-end;pointer-events:none}
body[data-view=village] #touchpad{display:flex}
#touchpad button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;width:58px;height:58px;border-radius:50%;border:2px solid rgba(240,193,90,.7);background:rgba(8,12,30,.55);color:#f6e6b0;font:800 18px var(--f-body);backdrop-filter:blur(4px)}
#touchpad button.on{background:rgba(240,193,90,.55);color:#3a1e0a}
.tp-dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);gap:6px}
.tp-dpad button[data-k=up]{grid-column:2;grid-row:1}.tp-dpad button[data-k=left]{grid-column:1;grid-row:2}.tp-dpad button[data-k=down]{grid-column:2;grid-row:2}.tp-dpad button[data-k=right]{grid-column:3;grid-row:2}
.tp-act{display:flex;gap:10px;align-items:flex-end}.tp-act button{font-size:14px}.tp-act button[data-a=e]{width:70px;height:70px;font-size:24px}