:root{--navy: #25265a;--navy-2: #34357a;--gold: #c9a24b;--gold-2: #e2c27a;--tin: #e9a623;--cream: #fffff2;--cream-2: #f6efdc;--red: #c4362d;--ui-fg: var(--navy);--ui-bg: rgba(255, 255, 242, .86);--ui-line: rgba(37, 38, 90, .18);--cond: "Barlow Condensed", "Arial Narrow", sans-serif;--sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;--shadow: 0 10px 30px -12px rgba(37, 38, 90, .35)}body.night{--ui-fg: var(--cream);--ui-bg: rgba(28, 29, 58, .72);--ui-line: rgba(255, 255, 242, .22)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--cream)}body{font-family:var(--sans);color:var(--navy);-webkit-font-smoothing:antialiased}canvas{display:block;width:100%;height:100%;touch-action:none}canvas.hot{cursor:pointer}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}.cond{font-family:var(--cond);text-transform:uppercase;letter-spacing:.04em}svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#loader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:26px;background:var(--cream);color:var(--navy);transition:opacity .9s ease,visibility .9s}#loader.done{opacity:0;visibility:hidden}#loader .logo-img{width:min(260px,60vw)}#loader p{margin:0;font-weight:600;font-size:18px;letter-spacing:.12em}.pastiglie{display:flex;gap:10px}.pastiglie i{width:18px;height:14px;border-radius:6px/5px;background:#d9c7e6;box-shadow:inset 0 -3px #00000014;animation:hop 1.1s ease-in-out infinite}.pastiglie i:nth-child(2){background:#cfe9da;animation-delay:.12s}.pastiglie i:nth-child(3){background:#ecc4b6;animation-delay:.24s}.pastiglie i:nth-child(4){background:#f5eaa8;animation-delay:.36s}@keyframes hop{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-12px)}}.ui{position:fixed;z-index:10;transition:opacity .4s}body.video .ui,body.video .card,body.video .toast,body.video .tip,body.video #fps,body.tour .tip,body.tour #fps,body.tour [data-k=tweak]{display:none!important}.brand{top:18px;left:22px}.brand .logo-img{width:150px;display:block;filter:drop-shadow(0 2px 6px rgba(37,38,90,.18))}.pill{display:flex;gap:2px;padding:4px;background:var(--ui-bg);color:var(--ui-fg);border:1px solid var(--ui-line);border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow)}.icon-btn{width:36px;height:36px;padding:8px;border-radius:50%;transition:background .2s,color .2s}.icon-btn:hover{background:#c9a24b2e}.icon-btn.on{background:var(--navy);color:var(--cream)}body.night .icon-btn.on{background:var(--gold);color:var(--navy)}.dock{left:50%;bottom:24px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 24px)}.nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.btn{padding:10px 18px;border-radius:999px;background:var(--ui-bg);color:var(--ui-fg);border:1px solid var(--ui-line);font-family:var(--cond);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.06em;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow);transition:transform .15s,background .2s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--navy);color:var(--cream);border-color:var(--navy)}.btn.primary:hover{background:var(--navy-2)}body:not(.open) .open-only,body.open .closed-only,body.inside .out-only,body:not(.inside) .in-only{display:none}body.busy .dock,body.busy .game{pointer-events:none;opacity:.55}.ritual{display:none;gap:6px;padding:5px;border-radius:999px;background:var(--ui-bg);border:1px solid var(--ui-line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}body.inside .ritual{display:flex}.step{display:flex;align-items:center;gap:6px;padding:7px 12px 7px 9px;border-radius:999px;color:var(--ui-fg);transition:background .2s,color .2s}.step .sico{width:22px;height:22px;display:block}.step span{font-weight:600;font-size:15px}.step b{font-weight:800;color:var(--gold);margin-right:2px}.step:hover{background:#c9a24b29}.step.done{opacity:.55}.step.next{background:var(--navy);color:var(--cream)}.step.next b{color:var(--gold-2)}.step.next .sico{animation:nudge 1.6s ease-in-out infinite}@keyframes nudge{0%,to{transform:rotate(0)}50%{transform:rotate(-10deg) scale(1.08)}}body.night .step.next{background:var(--gold);color:var(--navy)}.flav-chip{display:flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;border-radius:999px;background:var(--ui-bg);border:1px solid var(--ui-line);color:var(--ui-fg);font-weight:700;font-size:15px}.flav-chip[hidden]{display:none}.flav-chip i{width:22px;height:16px;border-radius:7px/6px;background:var(--c);box-shadow:inset 0 -3px #00000026}body:not(.inside) .flav-chip{display:none}.hint{left:50%;bottom:150px;translate:-50% 0;font-size:15px;font-weight:600;letter-spacing:.1em;color:var(--ui-fg);padding:7px 14px;border-radius:999px;background:var(--ui-bg);transition:opacity .6s}.hint.gone{opacity:0;pointer-events:none}body.gaming .hint{display:none}.card{position:fixed;z-index:20;top:86px;right:22px;width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 210px);overflow:auto;padding:24px 24px 22px;background:var(--cream);color:var(--navy);border-radius:18px;border:1px solid rgba(201,162,75,.55);box-shadow:0 30px 60px -24px #25265a73,inset 0 0 0 5px var(--cream),inset 0 0 0 6px #c9a24b73;opacity:0;translate:16px 0;pointer-events:none;transition:opacity .25s,translate .25s}.card.show{opacity:1;translate:0 0;pointer-events:auto}.card.wide{width:min(460px,calc(100vw - 32px))}.card .close{position:absolute;top:14px;right:14px;width:28px;height:28px;padding:8px;border-radius:50%}.card .close:hover{background:#c9a24b33}.card .kicker{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--gold)}.card h2{margin:4px 0 10px;font-size:34px;line-height:1;font-weight:800;letter-spacing:.01em}.card p{margin:0 0 12px;font-size:15px;line-height:1.55}.card .steps{margin:0 0 12px;padding-left:20px;font-size:15px;line-height:1.7}.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.card .tags span{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--cream-2);border:1px solid rgba(201,162,75,.5)}.card .note{margin-top:12px;font-size:12.5px;opacity:.7}.timeline{list-style:none;margin:4px 0 0;padding:0;border-left:2px solid var(--gold)}.timeline li{position:relative;padding:0 0 12px 16px;font-size:14.5px;line-height:1.45}.timeline li:before{content:"";position:absolute;left:-6px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--cream);border:2px solid var(--gold)}.timeline b{display:block;font-size:18px;font-weight:800}.card .btn{margin-top:10px}.card.cert{text-align:center}.card.cert .seal{display:block;width:64px;height:64px;margin:0 auto 6px;fill:var(--navy);stroke:none;transform:rotate(-8deg);opacity:.9}.cert-box{margin:4px auto 10px;width:120px;height:150px;border-radius:6px;background:var(--c);color:#fff8e6;display:grid;place-content:end center;gap:2px;padding-bottom:16px;box-shadow:inset 0 0 0 4px var(--gold),0 12px 24px -10px #0006}.cert-box span{font-weight:800;font-size:16px}.cert-box small{font-size:11px;font-weight:600;opacity:.85}.stars{display:flex;justify-content:center;gap:4px;margin-bottom:8px}.stars i{width:30px;height:30px;color:var(--gold)}.stars i svg{stroke-width:1.4}.stars i.on svg{fill:var(--gold)}.quality{list-style:none;padding:0;margin:8px 0 12px;text-align:left;display:grid;gap:5px}.quality li{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:10px;font-size:13px}.quality b{height:7px;border-radius:4px;background:linear-gradient(90deg,var(--gold) var(--q),rgba(37,38,90,.1) var(--q))}.coll{margin:6px 0;font-size:13px;font-weight:700}.coll div{display:flex;justify-content:center;gap:5px;margin-top:6px;flex-wrap:wrap}.coll i{width:16px;height:20px;border-radius:3px;background:var(--c);box-shadow:inset 0 0 0 1.5px var(--gold)}.invite{margin:14px 0 4px;padding:14px 12px 12px;border-radius:12px;background:var(--cream-2);border:1px solid rgba(201,162,75,.5)}.invite>span{display:block;font-size:15px;font-weight:800;letter-spacing:.04em}.promo{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;margin:10px 0 4px;padding:8px 10px;border:1.5px dashed var(--gold);border-radius:8px;background:var(--cream);text-align:left}.promo small{grid-column:1 / -1;font-size:11.5px;opacity:.75}.promo b{font-size:22px;font-weight:800;letter-spacing:.08em}.card .promo .btn.copy{margin:0;padding:6px 12px;font-size:12px}.invite .links{display:grid;gap:6px;margin-top:4px}.invite .links .btn{display:block;text-decoration:none;text-align:center}.game{left:50%;bottom:128px;translate:-50% 0;width:min(400px,calc(100vw - 24px));padding:14px 16px 16px;border-radius:18px;background:var(--cream);color:var(--navy);border:1px solid rgba(201,162,75,.55);box-shadow:0 24px 50px -22px #25265a80;display:grid;gap:10px;justify-items:stretch}.game[hidden]{display:none}.glabel{font-size:24px;font-weight:800;line-height:1}.ghelp{font-size:13.5px;opacity:.75;margin-top:-6px}.gbar{position:relative;height:18px;border-radius:10px;background:var(--cream-2);border:1px solid rgba(37,38,90,.15);overflow:hidden}.gbar .zone{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,var(--gold-2),var(--gold));opacity:.85}.gbar .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#25265abf;mix-blend-mode:multiply}.gbar .needle{position:absolute;top:-3px;bottom:-3px;width:4px;margin-left:-2px;border-radius:2px;background:var(--navy);left:0}.gbar.beat{height:26px}.gbar.beat .zone{left:40%;width:20%}.gbar.speed.big{height:22px}.gbar.meter.thin{height:8px}.gbar.beat.flash{animation:flash .3s}@keyframes flash{0%{background:#fff6cf}to{background:var(--cream-2)}}.gbar.track{height:54px;overflow:visible;background:linear-gradient(180deg,#e8e4dc,#d9d4ca)}.gbar.track .sheet{position:absolute;left:0;top:14px;bottom:14px;width:18px;border-radius:4px;background:#f0e6ef;box-shadow:inset 0 0 0 1px #0000000f}.gbar.track .handle{position:absolute;top:3px;left:0;width:36px;height:46px;border-radius:10px;background:var(--navy);cursor:grab;touch-action:none;box-shadow:0 4px 10px -4px #00000080,inset 0 0 0 3px var(--gold)}.gbar.track .handle.on{cursor:grabbing;background:var(--navy-2)}.gbar.speed{height:12px}.glegend{display:flex;justify-content:space-between;font-size:12px;opacity:.6;margin-top:-6px}.gbtn{padding:12px 18px;border-radius:12px;background:var(--navy);color:var(--cream);font-family:var(--cond);font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.08em;box-shadow:inset 0 -3px #00000040;touch-action:none;-webkit-user-select:none;user-select:none}.gbtn.big{padding:16px;font-size:22px}.gbtn.on{transform:translateY(2px);box-shadow:inset 0 -1px #00000040;background:var(--navy-2)}.gbtn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}.grow{display:grid;grid-template-columns:1fr 1fr;gap:8px}.strokes{display:flex;justify-content:center;gap:8px}.strokes i{width:22px;height:16px;border-radius:7px/6px;background:#25265a1f}.strokes i[data-q=p]{background:var(--gold)}.strokes i[data-q=g]{background:#9fc3a8}.strokes i[data-q=b]{background:#e3a9a0}.gstats{display:flex;justify-content:space-between;font-size:18px;font-weight:600}.gstats b{font-size:26px;font-weight:800}.gweight{font-size:22px;font-weight:700}.gweight b{font-size:40px;font-weight:800}.gweight span{opacity:.55}.flavs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.flav{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:var(--cream-2);border:1px solid rgba(37,38,90,.12);font-weight:700;font-size:16px}.flav i{width:26px;height:20px;border-radius:8px/7px;background:var(--p);box-shadow:inset 0 0 0 3px var(--c)}.flav:hover{border-color:var(--c);background:#fff}.clock{position:fixed;z-index:15;left:50%;top:42%;translate:-50% -50%;display:grid;justify-items:center;gap:10px;pointer-events:none}.clock[hidden]{display:none}.clock .face{position:relative;width:120px;height:120px;border-radius:50%;background:var(--cream);border:4px solid var(--gold);box-shadow:var(--shadow)}.clock .face i{position:absolute;left:50%;bottom:50%;width:4px;margin-left:-2px;border-radius:2px;background:var(--navy);transform-origin:50% 100%}.clock .h{height:32px}.clock .m{height:46px;width:3px!important}.clock.run .h{animation:spin calc(var(--dur) * 1) linear}.clock.run .m{animation:spin calc(var(--dur) / 12) linear 12}.clock span{font-size:20px;font-weight:800;color:var(--navy);background:var(--cream);padding:4px 12px;border-radius:999px}@keyframes spin{to{transform:rotate(360deg)}}.tip{position:fixed;z-index:30;left:0;top:0;pointer-events:none;padding:6px 11px;border-radius:8px;background:var(--navy);color:var(--cream);font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.05em;text-transform:uppercase;opacity:0;transition:opacity .15s}.tip.show{opacity:1}.toast{position:fixed;z-index:30;left:50%;top:22px;translate:-50% -10px;padding:10px 18px;border-radius:999px;background:var(--navy);color:var(--cream);font-size:15px;font-weight:500;max-width:calc(100vw - 40px);text-align:center;opacity:0;transition:opacity .25s,translate .25s;pointer-events:none;box-shadow:var(--shadow)}.toast.show{opacity:1;translate:-50% 0}#fps{position:fixed;z-index:30;left:22px;bottom:40px;font:12px/1 ui-monospace,monospace;color:var(--navy);display:none}body.tweak #fps{display:block}.hidden-gui{display:none!important}.lil-gui.root{z-index:40;top:70px!important}@media (max-width: 760px){.brand .logo-img{width:110px}.dock{bottom:18px}.step span{display:none}.step{padding:8px}.card{top:auto;bottom:150px;right:16px;max-height:46vh}.game,.hint{bottom:140px}}
