:root{--cream: #fff8e8;--cream-2: #fff1d2;--ink: #4a3426;--ink-soft: #7b604c;--yellow: #ffd23f;--yellow-deep: #f2a91d;--orange: #ff8f2e;--teal: #23a59a;--teal-deep: #178479;--pink: #ff6f91;--red: #ef5a3c;--panel: rgba(255, 249, 235, .94);--shadow: 0 18px 50px rgba(60, 38, 18, .28), 0 4px 12px rgba(60, 38, 18, .16);--font: "Fredoka", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#dcebe2;font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none}#app{position:fixed;inset:0}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}#ui-root{position:absolute;inset:0;pointer-events:none}#ui-root:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(40,30,20,.22) 100%)}.ui-layer{position:absolute;inset:0;z-index:5}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:scale(1.03);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;pointer-events:none}.screen.visible{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease;pointer-events:auto}.menu-screen{background:linear-gradient(90deg,#fff4d6b8,#fff4d659 38%,#fff4d600 62%);justify-content:flex-start;padding-left:clamp(24px,7vw,120px)}.panel-screen{background:#30241861;backdrop-filter:blur(3px)}.menu-card{display:flex;flex-direction:column;align-items:flex-start;gap:26px;max-width:440px;animation:floatIn .8s cubic-bezier(.2,.9,.3,1.2) both}.logo{position:relative}.logo-duck{width:120px;height:auto;display:block;margin-bottom:-10px;margin-left:6px;filter:drop-shadow(0 6px 10px rgba(80,50,10,.25));animation:bob 2.6s ease-in-out infinite}.logo h1{margin:0;display:flex;flex-direction:column;line-height:.88;font-size:clamp(56px,8.5vw,104px);font-weight:700;letter-spacing:.01em;color:var(--yellow);-webkit-text-stroke:3px #b9651a;paint-order:stroke fill;text-shadow:0 6px 0 #c4701f,0 12px 26px rgba(90,50,10,.35)}.logo h1 span:last-child{color:#ffe68a;margin-left:.18em}.subtitle{margin:14px 0 0 6px;font-size:clamp(18px,2vw,24px);font-weight:600;color:var(--teal-deep);background:#ffffffbf;display:inline-block;padding:6px 16px;border-radius:999px;box-shadow:0 4px 12px #28503c26}.menu-buttons{display:flex;flex-direction:column;gap:12px;min-width:260px}.menu-buttons.row{flex-direction:row;flex-wrap:wrap;justify-content:center;min-width:0}.btn{font-family:var(--font);font-size:19px;font-weight:600;color:var(--ink);background:var(--cream);border:none;border-radius:16px;padding:13px 26px;cursor:pointer;box-shadow:0 5px #e2cfa6,0 8px 18px #462d142e;transition:transform .12s ease,box-shadow .12s ease,background .2s;outline:none}.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 7px #e2cfa6,0 12px 22px #462d1438;background:#fffdf6}.btn:active{transform:translateY(3px);box-shadow:0 2px #e2cfa6,0 4px 10px #462d1433}.btn.primary{background:linear-gradient(180deg,#ffe066 0%,var(--yellow) 100%);box-shadow:0 5px 0 var(--yellow-deep),0 10px 22px #c8780a4d}.btn.primary:hover,.btn.primary:focus-visible{background:linear-gradient(180deg,#ffe885,#ffd94f);box-shadow:0 7px 0 var(--yellow-deep),0 14px 26px #c8780a57}.btn.primary:active{box-shadow:0 2px 0 var(--yellow-deep)}.btn.big{font-size:26px;padding:16px 30px}.btn.ghost{background:transparent;box-shadow:inset 0 0 0 2px #4a342640}.btn.ghost:hover{background:#ffffff80;box-shadow:inset 0 0 0 2px #4a342666}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.level-card{display:flex;flex-direction:column;gap:8px;min-width:260px}.level-item{font-family:var(--font);color:var(--ink);text-align:left;border:none;cursor:pointer;background:#ffffffc7;border-radius:18px;padding:12px 18px;box-shadow:0 6px 18px #3c281421,inset 0 0 0 2px transparent;transition:transform .12s ease,box-shadow .15s ease,background .2s}.level-item:hover:not(:disabled){transform:translate(4px);background:#ffffffeb}.level-item.selected{background:#fffdf4;box-shadow:0 8px 22px #3c28142e,inset 0 0 0 3px var(--teal)}.level-item.locked{opacity:.6;cursor:not-allowed}.lc-title{font-weight:700;font-size:18px}.lc-sub{color:var(--ink-soft);font-size:14px;margin-top:2px}.lc-meta{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:14px;color:var(--ink-soft)}.lc-stars{display:inline-flex;gap:2px}.lc-stars .star{width:20px;height:20px}.menu-footer{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:13px;color:#4a3426b3}.panel{background:var(--panel);border-radius:28px;padding:30px 36px;box-shadow:var(--shadow);width:min(560px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:auto;text-align:center;animation:popIn .4s cubic-bezier(.2,.9,.3,1.25) both}.panel.narrow{width:min(360px,calc(100vw - 40px))}.panel h2{margin:0 0 16px;font-size:34px;font-weight:700;color:var(--ink)}.panel .menu-buttons{margin:0 auto}.panel>.btn{margin-top:18px;min-width:160px}.lead{color:var(--ink-soft);font-size:17px;line-height:1.45;margin:0 0 18px}.note{color:var(--ink-soft);font-size:13px;margin:12px 0 0}.keys{display:grid;gap:8px;text-align:left;margin:0 auto 14px;max-width:470px}.keys>div{display:flex;align-items:center;gap:6px;font-size:16px}.keys span{margin-left:8px;color:var(--ink-soft)}kbd{font-family:var(--font);font-weight:700;font-size:14px;min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;background:#fff;border-radius:8px;box-shadow:0 3px #dcc9a3,0 0 0 1px #ead9b8 inset;color:var(--ink)}kbd.wide{min-width:64px}.tips{text-align:left;margin:0 auto;padding-left:20px;max-width:470px;color:var(--ink-soft);font-size:15px;line-height:1.5}.tips b{color:var(--ink)}.settings-grid{display:grid;gap:10px;text-align:left}.setting{display:grid;grid-template-columns:1fr 1.4fr 52px;align-items:center;gap:12px;background:#ffffffb3;padding:10px 14px;border-radius:14px;font-size:16px;font-weight:500}.setting.toggle{grid-template-columns:1fr auto;cursor:pointer}.setting output{text-align:right;color:var(--ink-soft);font-size:14px}.setting>div.seg{grid-column:2 / span 2}input[type=range]{width:100%;accent-color:var(--orange);cursor:pointer}input[type=checkbox]{width:22px;height:22px;accent-color:var(--teal);cursor:pointer}.seg{display:flex;background:#f1e3c6;border-radius:12px;padding:3px;gap:3px}.seg button{flex:1;font-family:var(--font);font-size:15px;font-weight:600;border:none;background:transparent;color:var(--ink-soft);padding:7px 10px;border-radius:10px;cursor:pointer}.seg button.active{background:#fff;color:var(--ink);box-shadow:0 2px 6px #50321426}.complete-level{margin:0;font-weight:600;color:var(--teal-deep);letter-spacing:.04em;text-transform:uppercase;font-size:14px}.celebrate{font-size:38px!important;margin:6px 0 10px!important}.stars{display:flex;justify-content:center;gap:10px;margin:6px 0 18px}.star-wrap{display:inline-block;animation:starPop .55s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--d)}.star{width:54px;height:54px}.star path{stroke-width:1.6;stroke-linejoin:round}.star.on path{fill:var(--yellow);stroke:#e0901a}.star.off path{fill:#eadfc8;stroke:#d6c6a4}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}.stat{background:#fffc;border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}.stat span{font-size:13px;color:var(--ink-soft)}.stat b{font-size:22px}.badge{font-style:normal;font-size:12px;background:var(--pink);color:#fff;padding:2px 8px;border-radius:999px;vertical-align:middle;margin-left:6px}.hud{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .4s ease;pointer-events:none}.hud.visible{opacity:1}.hud-tl{position:absolute;top:18px;left:20px;max-width:min(420px,40vw)}.hud-level{display:inline-block;font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--teal);padding:5px 14px;border-radius:999px;box-shadow:0 4px 12px #145a504d}.hud-objective{margin-top:8px;background:#fffaeeeb;border-radius:16px;padding:10px 14px;box-shadow:0 6px 18px #3c281429;display:flex;flex-direction:column;gap:2px}.obj-main{font-size:18px}.obj-sub{font-size:14px;color:var(--ink-soft)}.hud-tc{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}.hud-timer{font-size:22px;font-weight:700;background:#fffaeee6;padding:4px 16px;border-radius:999px;box-shadow:0 4px 14px #3c281426;font-variant-numeric:tabular-nums}.toasts{display:flex;flex-direction:column;align-items:center;gap:6px}.toast{font-size:17px;font-weight:600;padding:9px 18px;border-radius:14px;background:#fffaeef5;box-shadow:0 6px 18px #3c281433;animation:toastIn .35s cubic-bezier(.2,1.3,.4,1) both;white-space:nowrap;transition:opacity .4s,transform .4s}.toast.good{background:linear-gradient(180deg,#fffbe0,#fff2b3)}.toast.warn{background:linear-gradient(180deg,#ffe6dc,#ffd0c0);color:#8a2c14}.toast.out{opacity:0;transform:translateY(-8px)}.hud-tr{position:absolute;top:16px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.counter{display:flex;align-items:baseline;gap:4px;background:linear-gradient(180deg,#ffe066,var(--yellow));padding:6px 16px;border-radius:18px;box-shadow:0 5px 0 var(--yellow-deep),0 8px 18px #c8780a40}.counter.bump{animation:bump .45s cubic-bezier(.2,1.6,.4,1)}.counter-num{font-size:34px;font-weight:700;line-height:1}.counter-den{font-size:20px;font-weight:700;color:var(--ink-soft)}.counter-lbl{font-size:13px;font-weight:600;margin-left:4px;color:var(--ink-soft)}.roster{display:flex;flex-direction:column;gap:6px}.chip{display:flex;align-items:center;gap:8px;background:#fffaeee6;border-radius:999px;padding:4px 12px 4px 4px;box-shadow:0 3px 10px #3c281424;min-width:150px;transition:background .3s,transform .3s}.chip .dface{width:30px;height:30px;flex:none}.chip-txt{display:flex;flex-direction:column;line-height:1.1}.chip-txt b{font-size:14px}.chip-txt small{font-size:12px;color:var(--ink-soft)}.chip[data-state=unknown] .dface{filter:grayscale(1) brightness(.75) opacity(.6)}.chip[data-state=unknown] b{color:#a08a76}.chip[data-state=following],.chip[data-state=distracted]{background:#fff6c8f2}.chip[data-state=following] small{color:var(--teal-deep)}.chip[data-state=scared] small{color:var(--orange)}.chip[data-state=lost]{background:#ffd9cc;animation:pulseRed 1s ease-in-out infinite}.chip[data-state=lost] small{color:var(--red);font-weight:600}.chip[data-state=rescued]{background:linear-gradient(90deg,#fff2b3,#ffe48a)}.chip[data-state=rescued] small{color:#a26d00;font-weight:600}.hud-bottom{position:absolute;bottom:22px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:18px}.quack-meter{position:relative;width:64px;height:64px;display:flex;align-items:center;justify-content:center}.quack-meter svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.qm-bg{fill:#fffaeeeb;stroke:#4a342626;stroke-width:4}.qm-fg{fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-dasharray:125.66;transition:stroke .2s}.quack-meter.ready .qm-fg{stroke:var(--teal)}.qm-key{position:relative;font-size:22px;font-weight:700}.qm-lbl{position:absolute;bottom:-18px;font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}.quack-meter.pulse{animation:quackPulse .4s cubic-bezier(.2,1.6,.4,1)}.sprint-meter{position:relative;width:120px;height:14px;border-radius:999px;background:#fffaeed9;overflow:hidden;box-shadow:0 3px 10px #3c281426;transition:opacity .4s}.sprint-meter.full{opacity:.55}.sm-fill{position:absolute;inset:0;background:linear-gradient(90deg,#7ddc6a,#2fbf8f);transform-origin:left center}.sprint-meter.exhausted .sm-fill{background:linear-gradient(90deg,#ff9c6a,#ef5a3c)}.sprint-meter span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#281e14b3;letter-spacing:.08em;text-transform:uppercase}.hud-hints,.hud-look{position:absolute;left:50%;transform:translate(-50%);font-size:14px;color:#fff;background:#281e1480;padding:6px 14px;border-radius:999px;opacity:0;transition:opacity .6s;white-space:nowrap}.hud-hints{bottom:108px}.hud-look{bottom:144px}.hud.show-hints .hud-hints{opacity:1}.hud.show-look .hud-look{opacity:.9}.hud-fps{position:absolute;bottom:10px;right:14px;font-size:12px;color:#281e14b3;font-variant-numeric:tabular-nums}.minimap{position:absolute;left:18px;bottom:18px;border-radius:50%;padding:5px;background:#fffaeeeb;box-shadow:0 8px 22px #3c281440;line-height:0}.minimap canvas{border-radius:50%;display:block}.mm-north{position:absolute;left:5px;top:5px;width:14px;height:16px;line-height:16px;text-align:center;font-size:11px;font-weight:700;color:#fff;background:var(--red);border-radius:6px}.arrows{position:absolute;inset:0}.arrow{position:absolute;left:0;top:0;margin:-22px 0 0 -22px;width:44px;height:44px;display:none;align-items:center;justify-content:center;flex-direction:column;transition:transform .08s linear}.arrow-head{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000040}.arrow-head:after{content:"";width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #fff;margin-left:4px}.arrow span{position:absolute;top:44px;font-size:12px;font-weight:700;color:#fff;background:#281e1499;padding:2px 8px;border-radius:999px;white-space:nowrap}.arrow.lost .arrow-head{background:var(--red);animation:pulseRed .9s ease-in-out infinite}.arrow.nest .arrow-head{background:var(--yellow-deep)}.arrow.hint .arrow-head{background:#fff6;border:2px dashed #fff}.fatal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#fff8e8;z-index:100;padding:24px;text-align:center}.fatal h2{margin:0 0 8px}@keyframes floatIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes popIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}@keyframes bob{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}@keyframes starPop{0%{opacity:0;transform:scale(.2) rotate(-40deg)}to{opacity:1;transform:none}}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:none}}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes quackPulse{0%{transform:scale(1)}40%{transform:scale(1.22)}to{transform:scale(1)}}@keyframes pulseRed{0%,to{box-shadow:0 0 #ef5a3c8c}50%{box-shadow:0 0 0 8px #ef5a3c00}}@media (max-width: 900px){.roster{display:none}.hud-tl{max-width:52vw}.obj-sub{display:none}.stats{grid-template-columns:1fr}}@media (max-height: 640px){.logo-duck{width:80px}.menu-card{gap:14px}.chip{min-width:0;padding-right:8px}.chip-txt small{display:none}}