html,body{background:#000;height:100%;margin:0;font-family:system-ui,sans-serif;overflow:hidden}canvas{display:block}#hud{color:#fff;white-space:pre-line;pointer-events:none;background:#00000080;border-radius:6px;padding:6px 10px;font-size:13px;position:fixed;top:12px;left:50%;transform:translate(-50%)}#hud:empty{display:none}#hotbar{pointer-events:none;gap:8px;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}#hotbar canvas{z-index:1;position:absolute;inset:0}#hotbar .slot{box-sizing:border-box;background:#00000073;border:2px solid #ffffff26;border-radius:10px;width:64px;height:64px;transition:border-color .15s,background .15s;position:relative}#hotbar .slot.selected{background:#1fc8ff40;border-color:#fff}#hotbar .slot.empty{opacity:.45}#hotbar .slot i,#hotbar .slot span{z-index:2;color:#fff;text-shadow:0 1px 2px #000;font-style:normal;font-weight:700;position:absolute}#hotbar .slot i{opacity:.6;font-size:11px;top:3px;left:6px}#hotbar .slot span{font-size:15px;bottom:3px;right:6px}#crosshair{filter:drop-shadow(0 1px 1.5px #00000059);pointer-events:none;z-index:6;width:30px;height:30px;position:fixed;top:calc(50% - 6.875px);left:calc(50% - 12.5px)}#crosshair:after{content:"";background:#fff;border-radius:50%;width:5px;height:5px;position:absolute;top:4.375px;left:10px;box-shadow:0 0 0 1px #0000008c}#crosshair.active:after,#crosshair:not(.active) svg{display:none}#crosshair svg,#hotbar .slot .pointer svg{width:100%;height:100%;display:block}#hotbar .slot .pointer{pointer-events:none;position:absolute;inset:12px 14px 16px 10px}#block-menu{z-index:5;pointer-events:none;background:#fff;border-radius:14px;gap:6px;padding:6px;display:none;position:fixed;transform:translate(-50%,calc(-100% - 10px));box-shadow:0 6px 18px #141a2038}#block-menu.show{display:flex}#block-menu button{background:#eef1f3;border:0;border-radius:10px;place-items:center;width:46px;height:46px;padding:0;display:grid}#block-menu button svg{width:26px;height:26px}#block-menu button.hover{background:#dfe5e9;transform:scale(1.08)}#block-menu button[data-act=remove].hover{background:#ffe3e3}#toast{z-index:5;color:#fff;opacity:0;pointer-events:none;background:#00000080;border-radius:6px;padding:6px 12px;font-size:14px;transition:opacity .3s;position:fixed;bottom:100px;left:50%;transform:translate(-50%)}#toast.show{opacity:1}#paused{color:#fff;pointer-events:none;background:#00000080;border-radius:8px;padding:8px 16px;font-size:15px;display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,40px)}#paused.show{display:block}body.menu #hud,body.menu #hotbar,body.menu #crosshair{display:none}@keyframes spin{to{transform:rotate(360deg)}}#spectate{pointer-events:none;opacity:0;background:repeating-linear-gradient(#ffffff09 0 1px,#0000 1px 4px);transition:opacity .4s;position:fixed;inset:0;box-shadow:inset 0 0 160px 40px #0a1428bf,inset 0 0 0 3px #78c8ff80}#spectate.show{opacity:1}#spectate .label{letter-spacing:.04em;color:#8fd8ff;-webkit-text-stroke:2px #1c1c1c;text-shadow:0 4px #1c1c1c;white-space:nowrap;font:900 30px Impact,sans-serif;animation:2s ease-in-out infinite spectate-pulse;position:absolute;top:56px;left:50%;transform:translate(-50%)}#spectate .sub{color:#fff;white-space:nowrap;background:#00000080;border-radius:6px;padding:6px 12px;font-size:14px;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}@keyframes spectate-pulse{50%{opacity:.6}}body.spectating #hotbar,body.spectating #crosshair{display:none}@font-face{font-family:Fredoka;src:url(/quacktory/fonts/Fredoka.ttf)format("truetype");font-weight:700;font-display:swap}@font-face{font-family:Fredoka;src:url(/quacktory/fonts/Fredoka-Medium.ttf)format("truetype");font-weight:500;font-display:swap}#start{z-index:10;color:#1c2126;flex-direction:column;align-items:center;padding:16px;font:15px/1.4 system-ui,sans-serif;display:flex;position:fixed;inset:0;overflow-y:auto}#start main{flex-direction:column;flex:1;align-items:center;width:min(440px,100%);padding-top:12vh;display:flex}#start .logo{color:#ffd23c;-webkit-text-stroke:3px #1c2126;paint-order:stroke fill;text-shadow:0 6px #1c2126;letter-spacing:-.01em;margin:0;font:700 clamp(56px,12vw,104px)/1 Fredoka,system-ui,sans-serif}#start .tagline{color:#2b3035;text-shadow:0 0 12px #fff,0 0 4px #fff;margin:14px 0 32px;font-size:17px}#start .play{color:#1c2126;cursor:pointer;background:#ffd23c;border:3px solid #1c2126;border-radius:16px;padding:14px 64px 12px;font:700 30px/1 Fredoka,system-ui,sans-serif;box-shadow:0 5px #1c2126}#start .play:hover{background:#ffdb5c}#start .play:active{transform:translateY(3px);box-shadow:0 2px #1c2126}#start .level-now{color:#2b3035;text-shadow:0 0 10px #fff,0 0 4px #fff;margin:12px 0 18px;font-size:14px}#start details.levels{width:100%}#start details.levels>summary{cursor:pointer;background:#ffffffbf;border-radius:999px;width:max-content;margin:0 auto;padding:6px 14px;font-weight:600;list-style:none;display:block}#start details.levels>summary::-webkit-details-marker{display:none}#start .card{background:#ffffffeb;border-radius:14px;flex-direction:column;gap:12px;margin-top:12px;padding:14px;display:flex}#start label.check{color:#3a4148;cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex}#start .card details{color:#3a4148;font-size:13px}#start .card summary{cursor:pointer}#start dl{grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0 0;display:grid}#start dt{font-weight:600}#start dd{margin:0}#start .by{color:#fff;background:#1c2126;border-radius:8px;margin:-16px 0 30px;padding:9px 18px 8px;font:500 20px/1 Fredoka,system-ui,sans-serif;text-decoration:none;transform:rotate(-4deg)}#start .by:hover{background:#3a4148}#corner{z-index:5;align-items:center;gap:12px;display:flex;position:fixed;top:14px;left:14px}#corner .back{color:#1c2126;cursor:pointer;background:#ffd23c;border:3px solid #1c2126;border-radius:12px;place-items:center;width:40px;height:40px;padding:0;display:grid;box-shadow:0 4px #1c2126}#corner .back:hover{background:#ffdb5c}#corner .back:active{transform:translateY(2px);box-shadow:0 2px #1c2126}#corner .logo{color:#ffd23c;-webkit-text-stroke:2px #1c2126;paint-order:stroke fill;text-shadow:0 3px #1c2126;pointer-events:none;font:700 30px/1 Fredoka,system-ui,sans-serif}body.menu #corner{display:none}#complete{color:#fff;pointer-events:none;opacity:0;background:#0c101699;flex-direction:column;justify-content:center;align-items:center;gap:6px;font-family:system-ui,sans-serif;transition:opacity .35s;display:flex;position:fixed;inset:0}#complete.show{opacity:1}#complete h1{margin:0;font-size:32px;font-weight:600}#complete small{opacity:.7;font-size:15px}#complete p{opacity:.8;font-variant-numeric:tabular-nums;margin:0;font-size:15px}#picker-menu{z-index:8;background:#fff;border-radius:18px;padding:20px;display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 40px #141a2047}#picker-menu.show{display:block}#picker-menu div{grid-template-columns:repeat(3,52px);gap:12px;display:grid}#picker-menu button[data-color]{background:var(--c);cursor:pointer;border:3px solid #fff;border-radius:50%;width:52px;height:52px;box-shadow:0 0 0 2px #d9dee2}#picker-menu button[data-color]:hover{box-shadow:0 0 0 3px #1c2126}#picker-menu button.off{color:#1c2126;background:#eef1f3;border-radius:12px;font:600 14px system-ui,sans-serif}#hint{z-index:6;color:#fff;pointer-events:none;opacity:0;background:#00000073;border-radius:6px;padding:3px 9px;font:600 13px system-ui,sans-serif;transition:opacity .12s;position:fixed;top:calc(50% + 22px);left:calc(50% + 16px)}#hint.show{opacity:1}body.menu #hint{display:none}#floor-menu{z-index:8;color:#1c2126;background:#fff;border-radius:18px;width:min(360px,100vw - 32px);padding:20px;font:16px/1.3 system-ui,sans-serif;display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 40px #141a2047}#floor-menu.show{display:block}:is(#picker-menu,#floor-menu) button.close{color:#1c2126;cursor:pointer;background:#fff;border:0;border-radius:50%;place-items:center;width:36px;height:36px;padding:0;display:grid;position:absolute;top:-14px;right:-14px;box-shadow:0 3px 10px #141a2040}:is(#picker-menu,#floor-menu) button.close:hover{background:#eef1f3}:is(#picker-menu,#floor-menu) button.close svg{width:18px;height:18px}#floor-menu p{margin:0 0 14px;font:700 26px/1 Fredoka,system-ui,sans-serif}#floor-menu div{gap:8px;display:grid}#floor-menu button{color:inherit;text-align:left;cursor:pointer;background:#eef1f3;border:0;border-radius:12px;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:8px 12px;font:600 16px system-ui,sans-serif;display:grid}#floor-menu button:hover{background:#dfe5e9}#floor-menu button.here{box-shadow:inset 0 0 0 2px #1c2126}#floor-menu button b{background:#ffd23c;border-radius:50%;place-items:center;width:34px;height:34px;font:700 18px/1 Fredoka,system-ui,sans-serif;display:grid}#floor-menu button i{color:#6b737a;font-size:13px;font-style:normal}#floor-menu button[disabled]{color:#8a949c;cursor:default}#floor-menu button[disabled]:hover{background:#eef1f3}#floor-menu button[disabled] b{background:#d9dee2}#floor-menu button svg{width:18px;height:18px}body:has(#floor-menu.show,#picker-menu.show) #crosshair{display:none}