*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#7cc4f2;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:system-ui,"Trebuchet MS","Segoe UI",Roboto,sans-serif}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}
.mute{position:fixed;top:max(10px,env(safe-area-inset-top));right:10px;width:48px;height:48px;border-radius:50%;border:3px solid #4a2412;background:#fff6dc;font-size:22px;cursor:pointer;z-index:5;box-shadow:0 3px 0 #4a2412}
.duckBtn{position:fixed;right:16px;bottom:max(18px,env(safe-area-inset-bottom));width:92px;height:92px;border-radius:50%;border:4px solid #4a2412;background:rgba(255,246,220,.85);color:#4a2412;font-size:30px;font-weight:900;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;touch-action:none;box-shadow:0 4px 0 #4a2412}
.duckBtn span{font-size:15px;margin-top:2px}
.duckBtn.on{transform:translateY(3px);box-shadow:0 1px 0 #4a2412;background:#ffd84a}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;padding:16px;background:rgba(30,20,10,.25)}
.card{background:#fff6dc;border:4px solid #4a2412;border-radius:24px;padding:18px 22px 16px;text-align:center;max-width:380px;width:100%;box-shadow:0 8px 0 #4a2412,0 14px 40px rgba(0,0,0,.3);color:#4a2412}
h1{font-size:clamp(26px,7vw,34px);line-height:1.05;color:#e8661c;text-shadow:2px 2px 0 #4a2412;letter-spacing:.5px}
h2{font-size:24px;line-height:1.15;color:#e8661c;text-shadow:1px 1px 0 #4a2412}
.sub{font-weight:800;font-size:18px;color:#1f8f86;margin-top:4px}
.heroImg{width:min(200px,50vw);height:auto;margin:8px auto 4px;display:block;animation:bob .5s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-8px) rotate(2deg)}}
.big{display:block;width:100%;margin:10px 0 8px;padding:14px;font-size:26px;font-weight:900;color:#fff;background:#f07c22;border:4px solid #4a2412;border-radius:18px;cursor:pointer;box-shadow:0 5px 0 #4a2412;font-family:inherit}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #4a2412}
.small{padding:8px 14px;font-size:15px;font-weight:800;color:#4a2412;background:#bfe9e4;border:3px solid #4a2412;border-radius:12px;cursor:pointer;font-family:inherit;margin-top:6px}
.best{font-size:18px;font-weight:700}
.help{font-size:14px;margin-top:6px;opacity:.85}
.newbest{font-weight:900;color:#1f8f86;font-size:20px;margin-top:6px;animation:pop .6s ease-in-out infinite alternate}
@keyframes pop{from{transform:scale(1)}to{transform:scale(1.1)}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 4px}
.stats div{background:#ffe7a8;border:3px solid #4a2412;border-radius:12px;padding:6px 4px}
.stats span{display:block;font-size:13px;font-weight:700}
.stats b{font-size:22px}