:root{--bg:#061416;--panel:#0e262af0;--edge:#2f6a5e;--purple:#6a3fe0;--purple-hi:#8660f5;--gold:#ffd54a;--text:#f4fbf8;--muted:#9fc7bf;--danger:#e0475b;--s:1;--u:1px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-user-select:none;user-select:none;touch-action:none;margin:0;font-family:Arial Rounded MT Bold,Segoe UI Semibold,Segoe UI,system-ui,Arial,sans-serif;font-weight:700;overflow:hidden}canvas#app{outline:none;width:100%;height:100%;display:block;position:fixed;inset:0}#design-wrap{pointer-events:none;position:fixed;inset:0}#design{width:1280px;height:720px;transform:translate(-50%, -50%) scale(var(--s));transform-origin:50%;pointer-events:none;position:absolute;top:50%;left:50%}#design>*{pointer-events:auto}html.typing #design{top:30%}#design .screen{pointer-events:none;position:absolute;inset:0}#design .screen>*{pointer-events:auto}.dim-left{background:linear-gradient(90deg,#051214f7 15%,#051214cc 100%);position:fixed;inset:0;pointer-events:none!important}.card{background:var(--panel);border:2px solid var(--edge);border-radius:22px;padding:12px 20px;box-shadow:0 8px 28px #00000073}.btn{font:inherit;color:var(--text);cursor:pointer;background:#17474a;border:2px solid #ffffff4d;border-radius:14px;min-height:50px;padding:0 22px;font-size:24px;transition:background .12s,transform 60ms,border-color .12s;box-shadow:0 4px 10px #0006}.btn:hover{background:#22666a;border-color:#ffffff8c}.btn:active{transform:translateY(2px);box-shadow:0 1px 3px #0006}.btn.primary{background:var(--purple);border-color:#ffffff8c}.btn.primary:hover{background:var(--purple-hi)}.btn.gold{color:#1a1204;background:#c99a1a;border-color:#fff9;font-size:26px}.btn.gold:hover{background:#e8b82a}.btn.ghost{background:#ffffff0f;border-color:#ffffff38;font-size:20px}.btn.ghost:hover{background:#ffffff24}.btn:disabled{color:#ffffff59;cursor:default;box-shadow:none;background:#1f3338e6;border-color:#ffffff14}input.field{font:inherit;color:var(--text);-webkit-user-select:text;user-select:text;touch-action:auto;background:#08171af2;border:2px solid #59998c99;border-radius:12px;outline:none;width:100%;min-height:52px;padding:10px 18px;font-size:24px}input.field:focus{border-color:var(--gold);background:#0a1e22}input.field::placeholder{color:#ffffff4d}.pill{background:var(--purple);color:#fff;border-radius:20px;padding:3px 14px;font-size:16px;display:inline-block}.muted{color:var(--muted)}.stroke{-webkit-text-stroke:10px #021012;paint-order:stroke fill}.menu-left{flex-direction:column;gap:6px;width:480px;display:flex;position:absolute;top:26px;left:84px}.logo-1{color:var(--gold);-webkit-text-stroke:12px #021012;paint-order:stroke fill;letter-spacing:1px;font-size:92px;line-height:1.05}.logo-2{color:var(--text);-webkit-text-stroke:9px #021012;paint-order:stroke fill;margin-bottom:14px;font-size:60px;line-height:1.05}.menu-card{flex-direction:column;gap:12px;display:flex}.row{align-items:center;gap:10px;display:flex}.row>.grow{flex:1}.menu-status{color:#ff8fa8;min-height:30px;margin-top:6px;font-size:20px}.stage-slot{position:absolute;pointer-events:none!important}.code-row{justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;top:18px;left:0;right:0}.code-caption{text-align:left;line-height:1.25}.code-caption b{color:var(--muted);font-size:18px;display:block}.code-caption span{color:#ffffff73;font-size:16px}.code-box{border:3px solid var(--gold);width:94px;height:110px;color:var(--gold);-webkit-text-stroke:10px #021012;paint-order:stroke fill;background:#08191cf5;border-radius:14px;justify-content:center;align-items:center;font-size:64px;display:flex;box-shadow:0 4px 12px #00000073}.warn-banner{border:3px solid var(--gold);color:var(--gold);white-space:nowrap;background:#402b05f2;border-radius:18px;padding:8px 22px;font-size:30px;position:absolute;top:130px;left:50%;transform:translate(-50%);box-shadow:0 4px 14px #00000080}.slot-card{width:228px;padding:0 0 10px;position:absolute;top:520px;overflow:hidden}.slot-card .bar{height:5px;margin-bottom:10px}.slot-card .name{white-space:nowrap;text-overflow:ellipsis;padding:0 16px;font-size:24px;overflow:hidden}.slot-card .sub{color:var(--muted);padding:0 16px;font-size:16px}.slot-card.empty{opacity:.6}.slot-card.empty .name{color:#fff6}.lobby-bar{align-items:center;gap:12px;display:flex;position:absolute;bottom:26px;left:50px;right:50px}.lobby-bar .grow{flex:1}.lobby-status{text-align:center;color:#ff8fa8;font-size:20px;position:absolute;bottom:90px;left:0;right:0}.tuto-wrap{z-index:20;pointer-events:auto;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.tuto-card{box-shadow:none;background:0 0;border:none;gap:20px;padding:0;display:flex}.tuto-monita{width:300px;height:420px}.tuto-text{border:2px solid var(--edge);background:#0c2328f7;border-radius:22px;flex-direction:column;gap:14px;width:620px;padding:18px 28px;display:flex;box-shadow:0 8px 28px #00000073}.tuto-title{color:var(--gold);-webkit-text-stroke:8px #021012;paint-order:stroke fill;font-size:40px;line-height:1.1}.tuto-body{white-space:pre-line;min-height:210px;font-size:25px;line-height:1.3}.dots{align-items:center;gap:8px;height:12px;display:flex}.dots i{background:#ffffff40;border-radius:3px;width:10px;height:10px;display:block}.dots i.on{background:var(--gold);width:26px}.tuto-btns{gap:12px;display:flex}.tuto-btns .grow{flex:1}.tuto-btns .btn{font-size:22px}.tuto-ready{color:var(--gold);min-height:26px;font-size:20px}#hud{pointer-events:none;display:none;position:fixed;inset:0}#hud.on{display:block}.vignette{opacity:0;background:radial-gradient(#d90d4000 45%,#d90d40f2 125%);position:absolute;inset:0}.hud-top{top:calc(var(--u) * 14);align-items:center;gap:calc(var(--u) * 6);flex-direction:column;display:flex;position:absolute;left:50%;transform:translate(-50%)}.timer{border:calc(var(--u) * 3) solid #ffffffd9;border-radius:calc(var(--u) * 22);padding:calc(var(--u) * 6) calc(var(--u) * 20);font-size:calc(var(--u) * 34);-webkit-text-stroke:calc(var(--u) * 6) #021012;paint-order:stroke fill;background:#5a2fb8}.ghostbar{align-items:center;gap:calc(var(--u) * 10);font-size:calc(var(--u) * 20);color:#d9d2ff;display:flex}.ghostbar .track{width:calc(var(--u) * 380);height:calc(var(--u) * 24);border-radius:calc(var(--u) * 12);border:calc(var(--u) * 2) solid #ffffff80;background:#0d081fd9;overflow:hidden}.ghostbar .fill{border-radius:calc(var(--u) * 12);background:#a65cff;width:100%;height:100%;transition:width .15s linear}.hud-bottom{bottom:calc(var(--u) * 14);align-items:center;gap:calc(var(--u) * 6);flex-direction:column;display:flex;position:absolute;left:50%;transform:translate(-50%)}.hearts{gap:calc(var(--u) * 4);display:flex}.hearts svg{width:calc(var(--u) * 34);height:calc(var(--u) * 34);filter:drop-shadow(0 0 calc(var(--u) * 2) #000)}.battery{align-items:center;gap:calc(var(--u) * 10);font-size:calc(var(--u) * 30);-webkit-text-stroke:calc(var(--u) * 6) #021012;paint-order:stroke fill;display:flex}.battery .icon{width:calc(var(--u) * 60);height:calc(var(--u) * 30);border:calc(var(--u) * 3) solid #ffffffe6;background:#0a0d14d9;position:relative}.battery .icon:after{content:"";right:calc(var(--u) * -9);top:calc(var(--u) * 6);width:calc(var(--u) * 6);height:calc(var(--u) * 12);background:#ffffffe6;position:absolute}.battery .lvl{left:calc(var(--u) * 3);top:calc(var(--u) * 3);bottom:calc(var(--u) * 3);background:#57e86b;position:absolute}.hud-msg{text-align:center;font-size:calc(var(--u) * 96);color:#fff;-webkit-text-stroke:calc(var(--u) * 20) #021012;paint-order:stroke fill;opacity:0;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.hud-msg.pop{animation:.28s cubic-bezier(.2,1.6,.4,1) pop}@keyframes pop{0%{transform:translateY(-50%)scale(1.5)}to{transform:translateY(-50%)scale(1)}}.hud-wait{top:calc(var(--u) * 150);border:calc(var(--u) * 2) solid var(--edge);border-radius:calc(var(--u) * 22);padding:calc(var(--u) * 12) calc(var(--u) * 24);font-size:calc(var(--u) * 30);color:var(--gold);white-space:nowrap;background:#0e262af2;display:none;position:absolute;left:50%;transform:translate(-50%)}#touch{pointer-events:none;display:none;position:fixed;inset:0}#touch.on{display:block}.stick{pointer-events:auto;touch-action:none;background:#ffffff14;border:3px solid #ffffff4d;border-radius:50%;width:30vmin;height:30vmin;position:absolute;bottom:7vh}.stick.left{left:5vw}.stick.right{right:5vw}.stick .knob{background:#ffffff59;border:3px solid #ffffffb3;border-radius:50%;width:38%;height:38%;margin:-19% 0 0 -19%;position:absolute;top:50%;left:50%}.stick .tag{text-align:center;color:#fff9;font-size:2.6vmin;position:absolute;top:-3.2vmin;left:0;right:0}#toast{border:2px solid var(--edge);opacity:0;pointer-events:none;z-index:30;background:#0e262af2;border-radius:16px;padding:10px 22px;font-size:20px;transition:opacity .2s;position:fixed;bottom:14vh;left:50%;transform:translate(-50%)}#toast.on{opacity:1}.hidden{display:none!important}#rotate{z-index:100;text-align:center;color:var(--gold);background:#061416;justify-content:center;align-items:center;padding:8vw;font-size:7vw;line-height:1.3;display:none;position:fixed;inset:0}#rotate span{color:var(--muted);margin-top:2vw;font-size:4.5vw;display:block}@media (orientation:portrait) and (max-width:900px){#rotate{display:flex}}.view-card{flex-direction:column;gap:6px;width:255px;padding:10px 10px 12px;display:flex;position:absolute;top:20px;left:1005px}.view-title{color:var(--muted);padding:0 6px;font-size:15px}.lampbtn{width:17vmin;height:17vmin;color:var(--gold);pointer-events:auto;touch-action:none;background:#ffd54a2e;border:3px solid #ffd54abf;border-radius:50%;justify-content:center;align-items:center;font-size:3vmin;display:none;position:absolute;bottom:calc(7vh + 34vmin);right:7vw}.lampbtn:active{background:#ffd54a73}.lampdot{width:calc(var(--u) * 18);height:calc(var(--u) * 18);margin-left:calc(var(--u) * 6);border:calc(var(--u) * 2) solid #ffffff8c;background:#ffffff1f;border-radius:50%;transition:background .1s,box-shadow .1s}.lampdot.on{box-shadow:0 0 calc(var(--u) * 12) #f6f09a;background:#f6f09a;border-color:#fff}.look-area{pointer-events:auto;touch-action:none;position:absolute;inset:0}.lampbtn{z-index:2;width:19vmin;height:19vmin;font-size:3.2vmin;display:flex;bottom:9vh;right:6vw}.lampbtn.on{color:#1a1204;background:#ffd54ab3;box-shadow:0 0 4vmin #ffd54abf}