@font-face{font-family:Barlow;font-style:normal;font-weight:200;font-display:swap;src:url(../assets/fonts/barlow-latin-200-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/barlow-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/barlow-latin-400-normal.woff2) format('woff2')}
:root{--tx:#d3e3ec;--dim:#5f7484;--dis:#3f5462;--cy:#1f93c4;--bl:#0f4ea3;--or:#c8730f;--gr:#5a6d72;--red:#dc2035;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:#02060b;font:300 16px Barlow,system-ui,sans-serif;color:var(--tx)}
.bg{position:fixed;inset:0;pointer-events:none}
.bg{background:
 radial-gradient(circle at 5% 30%,rgba(130,215,235,.30),transparent 9%),
 radial-gradient(circle at 9% 72%,rgba(60,170,205,.28),transparent 11%),
 radial-gradient(ellipse 24% 80% at 0% 50%,rgba(35,145,185,.5),transparent 72%),
 linear-gradient(104deg,transparent 12%,rgba(200,225,240,.09) 22%,transparent 32%),
 radial-gradient(ellipse 60% 50% at 70% 100%,rgba(20,70,110,.35),transparent 70%),
 linear-gradient(180deg,#020a13,#07142200 ,#06121f);background-color:#03080f;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{background-position:14px 6px,-10px 8px,0 0,30px 0,0 0,0 0}}
.stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px;transform:scale(var(--s,1))}
.a{position:absolute}
#ch{position:absolute;inset:0;z-index:1;pointer-events:none}
#w{position:absolute;inset:0;z-index:2}
.tx{white-space:nowrap;transform:translateY(-50%);line-height:1}
.tx.c{transform:translate(-50%,-50%)}.tx.r{transform:translate(-100%,-50%)}
.k{background:#e6eef2}
.ln{background:linear-gradient(90deg,rgba(170,205,225,.5),rgba(170,205,225,.1))}
.ln2{background:rgba(170,205,225,.3)}
.glow{background:linear-gradient(90deg,transparent,rgba(90,220,235,.9))}
.ti{font-size:40px;font-weight:200;letter-spacing:1px;line-height:54px;color:#e4eef4;white-space:nowrap}.ti b{font-size:54px;font-weight:200}
.mk{background:#aebdc6}
.sq{width:28px;height:28px;border:1.2px solid var(--tx)}
.sq::after{content:"";position:absolute;left:8px;top:8px;width:10px;height:10px;border:1.2px solid var(--tx);border-radius:50%}
.red{background:var(--red);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;letter-spacing:.5px}
.seg{background:#1b5fb0}
.ic{background:#bfe6ec;color:#0c2a3a;display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px}.ic svg{width:21px;height:21px;fill:currentColor}
.ic.gear{background:#1a56b8;color:#cfeef6;width:32px;clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%)}.ic.gear svg{fill:none;stroke:currentColor}
.hr{display:flex;gap:6px;align-items:center}.hr>:last-child{flex:1}
.num{font-size:38px;font-weight:200;line-height:1;transform:translateY(-50%);white-space:nowrap;letter-spacing:2px;color:#c4eef6}.num u{text-decoration:none;color:#3f5a6c}
.ci{border:1.2px solid var(--tx);border-radius:50%}
.cb{border:1px solid rgba(170,205,225,.25)}
.gs{background:var(--gr);font-size:10px;letter-spacing:1.5px;color:#e6eef2;padding-left:6px;line-height:16px;font-weight:400}
.pc{background:rgba(8,20,32,.85);border:1px solid rgba(170,205,225,.3)}
/* widget interattivi: si inclinano da soli */
.t{cursor:pointer;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--z,0px));transition:transform .12s ease-out,background .15s,filter .15s}
.t:hover{--z:16px}.t *{pointer-events:none}
.m{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--tx)}
.m b{font-weight:300;font-size:25px;letter-spacing:.6px}.m i{display:none;font-style:normal;font-size:14px;color:rgba(255,255,255,.62)}
.m.dis{color:var(--dis)}
.m.sel{background:var(--cy);box-shadow:inset -5px 0 0 rgba(0,20,50,.35);color:#fff}.m.sel b{font-size:26px}.m.sel i{display:block}
.it{display:flex;align-items:center;justify-content:center;font-size:25px;letter-spacing:.6px}.it:hover{background:rgba(31,147,196,.2)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:20px;color:#fff;background:var(--c)}
.bar.f{background:linear-gradient(90deg,var(--c) 55%,rgba(0,0,0,.25))}.bar:hover{filter:brightness(1.25)}
.bar em{font-style:normal;font-size:18px;opacity:.75}
.tab{display:flex;align-items:center;padding-left:14px;font-size:27px}
.tab.on{background:var(--bl);color:#fff;font-size:26px}.tab:hover:not(.on){background:rgba(31,147,196,.18)}
.card{opacity:1}.card.d{opacity:.4}.stage .card:hover{opacity:1;background:rgba(31,147,196,.2)}
.bx{position:absolute;left:45px;top:10px;width:84px;height:54px;border:1px solid var(--tx);background:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(211,227,236,.8) 5px 6px)}
.card small{position:absolute;left:8px;top:82px;font-size:11px;letter-spacing:1.6px;font-weight:400}
.card span{position:absolute;left:8px;top:99px;font-size:16px}.card u{position:absolute;left:8px;top:122px;font-size:12px;color:var(--dim);text-decoration:none}
.conf:hover{background:rgba(31,147,196,.22)}
.conf div{position:absolute;left:0;right:0;height:1px;background:rgba(170,205,225,.35)}
.conf b{position:absolute;left:0;right:0;top:16px;text-align:center;font-weight:300;font-size:32px;color:#fff;letter-spacing:.5px}
.conf span{position:absolute;left:0;right:0;top:54px;text-align:center;font-size:16px}
.back{font-size:20px;letter-spacing:2px;text-align:right;line-height:40px}.back:hover{color:#fff}
.veil{inset:0;z-index:20}
.mod{background:rgba(0,0,0,.95)}
.ok{background:#0e6a8e;display:flex;align-items:center;justify-content:center;font-size:24px;letter-spacing:1px;color:#fff}.ok:hover{background:#1690bd}
#toasts{position:absolute;left:800px;bottom:34px;width:320px;z-index:30;display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none}
.toast{background:rgba(0,8,16,.92);border-left:3px solid var(--cy);padding:13px 16px;font-size:15px;animation:ts 2.6s forwards}
@keyframes ts{0%{opacity:0;transform:translateX(30px)}10%,85%{opacity:1;transform:none}100%{opacity:0}}

/* ---- versione mobile / portrait ---- */
body{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
#mb{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(130px + env(safe-area-inset-bottom,0px))}
.mw{max-width:640px;margin:0 auto}
.mhd{position:relative;border-bottom:1px solid rgba(170,205,225,.35);padding-bottom:12px;margin-bottom:16px}
.msub{font-size:14px;padding-right:70px}
.mti{font-size:28px;font-weight:200;letter-spacing:1px;line-height:1.15;margin-top:6px;color:#e4eef4}.mti b{font-size:38px;font-weight:200}
.mon{position:absolute;right:0;top:0;font-size:11px;letter-spacing:4px}
.mi{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:22px;letter-spacing:.5px;padding:6px 8px;cursor:pointer}
.mi b{font-weight:300}.mi i{display:none;font-style:normal;font-size:13px;color:rgba(255,255,255,.62)}
.mi.dis{color:var(--dis)}.mi.sel{background:var(--cy);color:#fff;box-shadow:inset -5px 0 0 rgba(0,20,50,.35)}.mi.sel i{display:block}
.mi:active,.mbar:active,.mtab:active,.mcard:active,.mconf:active{filter:brightness(1.3)}
.mdiv{height:1px;background:rgba(170,205,225,.3);margin:8px 0}
.mlb{text-align:center;color:var(--dis);font-size:20px;margin:14px 0 4px}
.mmk{display:flex;align-items:center;gap:8px;font-size:19px;margin:24px 0 10px}.mmk::before{content:"";width:7px;height:22px;background:#aebdc6}
.mpc{position:relative;width:min(100%,290px);height:162px;overflow:hidden;background:rgba(8,20,32,.85);border:1px solid rgba(170,205,225,.3)}
.mln{font-size:16px;line-height:1.6;padding-left:8px}
.mmat{display:flex;gap:22px;flex-wrap:wrap;padding-left:8px;font-size:17px}.mmat span{display:flex;align-items:center;gap:8px}.mmat .ci{width:18px;height:18px}
.mtab{min-height:52px;display:flex;align-items:center;padding:8px 14px;font-size:20px;margin-bottom:4px;cursor:pointer}.mtab.on{background:var(--bl);color:#fff}
.mgs{display:flex;justify-content:space-between;padding-right:8px;margin-top:16px}
.mbar{min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:19px;color:#fff;background:var(--c);margin-top:4px;cursor:pointer}
.mbar.f{background:linear-gradient(90deg,var(--c) 55%,rgba(0,0,0,.25))}.mbar em{font-style:normal;opacity:.75}
.msb{font-size:14px;padding:6px 8px 2px}.msb.dim{color:var(--dim)}
.mrow{display:flex;gap:10px;overflow-x:auto;padding:12px 0 6px}
.mcard{position:relative;flex:0 0 170px;height:150px;cursor:pointer}.mcard.d{opacity:.65}
.mconf{position:relative;height:84px;margin-top:24px;cursor:pointer}
.mback{text-align:right;padding:18px 4px;font-size:19px;letter-spacing:2px;cursor:pointer}
#mh{display:none;position:fixed;left:0;right:0;bottom:0;z-index:5;gap:14px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(0deg,rgba(2,8,14,.96) 72%,transparent)}
.hb{flex:1;display:grid;gap:6px;max-width:320px}.hbr{height:26px;background:var(--red);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px}
.hsg{display:flex;gap:4px;height:22px}.hsg i{flex:1;background:#1b5fb0}
.hn{margin-left:auto;text-align:right;line-height:1.1}.nm{font-size:28px;font-weight:200;letter-spacing:1px;white-space:nowrap;color:#c4eef6}.nm u{text-decoration:none;color:#3f5a6c}.nm small{font-size:12px;margin-left:3px;color:var(--tx)}
#mt{position:fixed;left:16px;right:16px;bottom:calc(104px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;max-width:420px;margin:0 auto}
.mveil{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:20px}
.mmod{background:#000;padding:26px 20px 20px;max-width:420px;width:100%;border:1px solid rgba(170,205,225,.25);text-align:center;font-size:18px;line-height:1.4}
.mok{margin-top:22px;height:56px;background:#0e6a8e;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;cursor:pointer}.mok:active{background:#1690bd}


/* ---- contenuti cosplay ---- */
.pn{left:762px;top:214px;width:956px;height:686px;overflow-y:auto;padding:18px 24px 18px 18px;background:rgba(2,8,14,.62);box-shadow:0 0 30px 22px rgba(2,8,14,.62);scrollbar-width:thin;scrollbar-color:#2c4a5c transparent}
.ms{background:#5a6d72;display:flex;align-items:center;gap:12px;padding-left:12px;font-size:20px;color:#e6eef2;clip-path:polygon(0 0,100% 0,100% 78%,calc(100% - 12px) 100%,0 100%)}.mms{height:46px;margin-bottom:4px}
.pn .mmk{font-size:22px;margin:14px 0 8px}.pn .mmk:first-child{margin-top:0}
.kv{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 8px;border-bottom:1px solid rgba(170,205,225,.25);font-size:18px}
.kv b{font-weight:300;color:#fff;text-align:right}
.tbd{color:var(--dim);font-style:italic}
.ct{cursor:pointer}.ct:hover{background:var(--cy);color:#fff}
.dv{display:flex;gap:20px;align-items:flex-start}.sl{flex:0 0 340px;display:grid;gap:6px}
.spot{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:rgba(15,78,163,.5);font-size:19px}.spot b{font-weight:300}.spot span{font-size:14px;opacity:.8}
.spot.on{background:var(--bl)}.spot:hover{filter:brightness(1.25)}
.pcol{flex:1;min-width:0}
.ph{aspect-ratio:16/10;background:repeating-linear-gradient(-45deg,rgba(211,227,236,.07) 0 8px,transparent 8px 16px),rgba(8,20,32,.85);background-size:cover;background-position:center;border:1px solid rgba(170,205,225,.3);display:grid;place-items:center;text-align:center;letter-spacing:3px;font-size:14px;color:var(--dim)}
.ph small{display:block;margin-top:8px;font-size:12px;letter-spacing:1px}
.cap{margin-top:10px;font-size:15px;line-height:1.4}.cap b{display:block;font-weight:300;font-size:20px;color:#fff}
.lk{display:flex;align-items:center;justify-content:center;height:90px;margin:8px 0 14px;background:var(--cy);color:#fff;font-size:28px;letter-spacing:1px}
.m:not(.sel):not(.dis):hover{background:rgba(31,147,196,.18)}
.mcont{padding:2px 0 10px}.mcont .dv{flex-direction:column;width:100%}.mcont .sl{flex:none;width:100%}.mcont .pcol{width:100%}
#pn>*,.mcont>*{animation:wi .3s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*35ms)}

/* ---- Mi piace (timer + spam) ---- */
.lkp{padding:6px 8px 14px}
.lkc{font-size:96px;font-weight:200;line-height:1;letter-spacing:4px;color:#fff;text-align:center}.lkc u{text-decoration:none;color:#3f5a6c}
.lkc.bump{animation:bump .12s ease-out}
@keyframes bump{from{transform:scale(1.14)}to{transform:scale(1)}}
.lkt{height:10px;background:rgba(170,205,225,.2);margin-top:12px}.lkt i{display:block;height:100%;width:0;background:var(--or)}
.lks{text-align:center;font-size:16px;margin-top:8px}
.lk{position:relative;gap:14px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.lk.live{background:#d98a1f}.lk.hit{filter:brightness(1.4)}.lk.cd{background:#34495a;color:#8ea2ae;cursor:not-allowed}
.fl{position:absolute;pointer-events:none;margin:-14px 0 0 -12px;font-size:22px;color:#fff;text-shadow:0 0 8px rgba(255,200,80,.9);animation:fl .7s ease-out forwards}
@keyframes fl{to{transform:translateY(-64px);opacity:0}}
/* ---- animazioni: cambio pagina e popup ---- */
:root{--dx:40px;--dr:24deg}
@keyframes wi{from{opacity:0;transform:perspective(700px) translateX(var(--dx)) rotateY(var(--dr)) rotateX(6deg)}to{opacity:1;transform:perspective(700px) translateX(0) rotateY(0) rotateX(0)}}


@keyframes wo{to{opacity:0;transform:perspective(700px) translateX(calc(var(--dx)*-.6)) rotateY(calc(var(--dr)*-.8))}}
@keyframes pg{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:perspective(700px) rotateX(-20deg) rotateY(16deg) scale(.84)}60%{opacity:1}to{opacity:1;transform:perspective(700px) rotateX(0) rotateY(0) scale(1)}}
@keyframes pout{to{opacity:0;transform:perspective(700px) rotateX(12deg) rotateY(-10deg) scale(.9)}}
#w>*,.mw>*{animation:wi .3s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*16ms)}
#ch.in{animation:pg .3s ease-out}
#w.lv>*,#mb.lv .mw>*{animation:wo .11s ease-in forwards;animation-delay:0s}
#ch.lv{animation:pg .11s reverse forwards}
.veil .mod,.veil .ok,.mmod{animation:pop .17s cubic-bezier(.2,.9,.3,1.25) backwards}.veil .ok{animation-delay:.05s}
.mveil{animation:pg .12s ease-out}
.veil.out,.mveil.out{pointer-events:none}
.veil.out .mod,.veil.out .ok,.mveil.out .mmod{animation:pout .12s ease-in forwards}
.mveil.out{animation:pg .12s reverse forwards}
@media(prefers-reduced-motion:reduce){.t{transition:none}.bg{animation:none}#w>*,.mw>*,#pn>*,.mcont>*,#ch,.mod,.ok,.mmod,.mveil,.fl,.lkc{animation:none!important}}