@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Bebas+Neue&display=swap";:root{--uo-green: #154733;--uo-green-deep: #0d2f22;--uo-yellow: #fee123;--uo-yellow-hot: #ffd000;--cream: #fff8e7;--ink: #0f1f18;--water: #3b82c4;--water-deep: #1e4d7b;--font: "Fredoka", system-ui, sans-serif;--display: "Bebas Neue", Impact, sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--uo-green-deep);color:var(--cream);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}#app{min-height:100dvh;display:flex;flex-direction:column}.shell{flex:1;display:flex;flex-direction:column;max-width:960px;width:100%;margin:0 auto;min-height:100dvh}.title-screen{flex:1;display:grid;place-items:center;padding:1.25rem;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(254,225,35,.25),transparent 55%),radial-gradient(ellipse 60% 40% at 80% 80%,rgba(59,130,196,.2),transparent 50%),linear-gradient(165deg,#0d2f22,#154733 45%,#0a1f18)}.title-card{width:min(420px,100%);text-align:center;padding:1.75rem 1.5rem;border-radius:20px;border:3px solid var(--uo-yellow);background:#0d2f22eb;box-shadow:0 0 0 4px var(--uo-green),0 20px 50px #00000073,0 0 40px #fee12326}.kicker{font-family:var(--display);letter-spacing:.18em;font-size:.95rem;color:#154733;margin:0 auto .5rem;padding:.45rem .9rem;display:inline-block;background:linear-gradient(180deg,#ffe94a,#fee123,#f0c800);border-radius:8px;border:2px solid #154733;box-shadow:0 2px #0d2f22,0 0 14px #fee12359}.kicker-btn{cursor:default;pointer-events:none;position:relative;color:#154733!important;-webkit-text-fill-color:#154733!important;background:linear-gradient(180deg,#ffe94a,#fee123 45%,#e6c200);text-shadow:0 1px 0 rgba(255,248,231,.35);animation:kicker-light 1.6s ease-in-out infinite}.kicker-btn.quack{animation:kicker-flash-safe .7s ease;color:#154733!important;-webkit-text-fill-color:#154733!important}@keyframes kicker-light{0%,to{color:#154733;-webkit-text-fill-color:#154733;box-shadow:0 2px #0d2f22,0 0 8px #fee12373,0 0 20px #fee12340,inset 0 0 12px #ffffff40}50%{color:#1a5c40;-webkit-text-fill-color:#1a5c40;box-shadow:0 2px #0d2f22,0 0 16px #fee123f2,0 0 40px #fee123a6,0 0 70px #fff8b466,inset 0 0 14px #fff6}}@keyframes kicker-bob{0%,to{transform:scale(1) rotate(-.8deg)}50%{transform:scale(1.05) rotate(.8deg)}}@keyframes kicker-flash{0%{transform:scale(1);filter:brightness(1);box-shadow:0 0 10px #fee123}20%{transform:scale(1.14);filter:brightness(1.45);box-shadow:0 0 30px #fff8e7,0 0 60px #fee123,0 0 90px #fee123cc}50%{transform:scale(1.08);filter:brightness(1.35);color:#154733;-webkit-text-fill-color:#154733;box-shadow:0 0 28px #fee123,0 0 56px #fee123bf}to{transform:scale(1);filter:brightness(1)}}.go-ducks-toast{position:fixed;left:50%;top:18%;transform:translate(-50%) scale(.8);z-index:50;pointer-events:none;font-family:var(--display);font-size:clamp(1.6rem,8vw,2.4rem);letter-spacing:.06em;color:#154733;-webkit-text-fill-color:#154733;background:var(--uo-yellow);border:3px solid #154733;border-radius:14px;padding:.55rem 1.15rem;box-shadow:0 8px 28px #00000059,0 0 24px #fee12380;opacity:0;transition:opacity .2s,transform .25s;display:flex;align-items:center;justify-content:center;gap:.65rem;white-space:nowrap}.go-ducks-toast .mascot-img{flex-shrink:0}.go-ducks-toast.show{opacity:1;transform:translate(-50%) scale(1)}.mascot-img{display:inline-block;width:2.4rem;height:2.4rem;object-fit:contain;vertical-align:middle;flex-shrink:0;image-rendering:auto;pointer-events:none;-webkit-user-select:none;user-select:none}.mascot-img.xs{width:1.35rem;height:1.35rem;margin-right:.2rem}.mascot-img.sm{width:1.75rem;height:1.75rem}.mascot-img.lg{width:clamp(5.5rem,22vw,7.5rem);height:clamp(5.5rem,22vw,7.5rem);filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));flex-shrink:0}.mascot-img.inline{width:1.6rem;height:1.6rem;margin:0 .15em}.mascot-img.flip{transform:scaleX(-1)}.title-mascot-solo{display:flex;justify-content:center;margin:0 0 .35rem;min-height:clamp(5.5rem,22vw,7.5rem)}.title-mascot-solo .mascot-img{animation:mascot-bob 2.4s ease-in-out infinite}.title-card .kicker{margin-left:auto;margin-right:auto;margin-bottom:.65rem}@keyframes mascot-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes kicker-flash-safe{0%,to{filter:brightness(1);box-shadow:0 2px #0d2f22,0 0 10px #fee123}40%{filter:brightness(1.35);box-shadow:0 2px #0d2f22,0 0 22px #fee123,0 0 40px #fee123b3}}.go-ducks-toast .toast-label{flex:0 1 auto;padding:0 .15rem;line-height:1}.confetti-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:40;overflow:hidden}.confetti-bit{position:absolute;top:-12px;width:10px;height:14px;border-radius:2px;animation:confetti-fall linear forwards}@keyframes confetti-fall{to{transform:translateY(110vh) rotate(720deg);opacity:.85}}.title-card h1{font-family:var(--display);font-size:clamp(2.4rem,10vw,3.4rem);line-height:.95;margin:0 0 .5rem;color:#154733;text-shadow:0 0 0 #fee123,2px 2px 0 #fee123,-1px -1px 0 #fee123,1px -1px 0 #fee123,-1px 1px 0 #fee123,0 3px 0 #0d2f22}.title-card h1 span{color:#154733;text-shadow:2px 2px 0 #fee123,-1px -1px 0 #fee123,1px -1px 0 #fee123,-1px 1px 0 #fee123,0 3px 0 #0d2f22}.music-note{font-size:.85rem!important;opacity:.85;margin-top:-.35rem!important}.mobile-tip{font-size:.8rem!important;line-height:1.45!important}.safari-banner{position:relative;z-index:5;margin:0 .75rem .75rem;padding:.75rem 1rem;border-radius:12px;background:#fee1232e;border:2px solid rgba(254,225,35,.55);color:#fff8e7;font-size:.9rem;line-height:1.4;text-align:center;max-width:420px;width:calc(100% - 1.5rem)}.safari-dismiss{display:block;margin:.5rem auto 0;border:2px solid #fee123;background:#154733;color:#fee123;border-radius:999px;padding:.4rem 1rem;font:inherit;font-weight:600;cursor:pointer}.title-screen{align-content:center;justify-items:center}.music-unlock-hint{position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));transform:translate(-50%);z-index:60;padding:.55rem 1rem;border-radius:999px;background:#fee123f2;color:#154733;font-family:var(--font);font-weight:600;font-size:.9rem;border:2px solid #154733;box-shadow:0 6px 20px #00000059;pointer-events:none;animation:music-hint-pulse 1.4s ease-in-out infinite}@keyframes music-hint-pulse{0%,to{opacity:.85}50%{opacity:1}}.tagline{margin:0 0 1.25rem;color:#fff8e7d9;font-size:1rem;line-height:1.45}.go-btn{width:100%;border:none;border-radius:999px;padding:1rem 1.25rem;font-family:var(--display);font-size:1.35rem;letter-spacing:.08em;cursor:pointer;color:var(--uo-green-deep);background:linear-gradient(180deg,var(--uo-yellow-hot),var(--uo-yellow));box-shadow:0 6px #c4a000,0 12px 24px #0000004d}.go-btn:active{transform:translateY(3px);box-shadow:0 3px #c4a000}.how{margin:1rem 0 0;font-size:.88rem;color:#fff8e7b3;line-height:1.5;text-align:left}.play{flex:1;display:flex;flex-direction:column;background:var(--uo-green-deep)}.hud{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.55rem .75rem;padding-top:max(.55rem,env(safe-area-inset-top));background:linear-gradient(180deg,#0d2f22,#154733);border-bottom:3px solid var(--uo-yellow);font-size:.9rem;flex-wrap:wrap}.hud b{color:var(--uo-yellow);font-family:var(--display);font-size:1.25rem;letter-spacing:.04em}.badge{background:var(--uo-yellow);color:var(--uo-green-deep);font-weight:700;padding:.2rem .55rem;border-radius:999px;font-size:.8rem;max-width:min(46vw,280px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge.qa{background:linear-gradient(90deg,#fee123,#fff8e7,#fee123);background-size:200% auto;animation:qa-badge .6s linear infinite;box-shadow:0 0 12px #fee12399}@keyframes qa-badge{to{background-position:200% center}}.canvas-wrap{flex:1;position:relative;min-height:0;display:flex;align-items:stretch;justify-content:center;background:#0a1a14}#game{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.hint-bar{text-align:center;font-size:.78rem;padding:.45rem;padding-bottom:max(.45rem,env(safe-area-inset-bottom));background:#00000073;color:#fff8e7bf}.hi-score-banner{margin:0 0 .65rem;padding:.45rem .7rem;border-radius:10px;background:#fee1232e;border:2px solid rgba(254,225,35,.55);color:#fee123;font-size:.92rem;font-weight:600}.hi-score-banner b{font-family:var(--display);font-size:1.25rem;letter-spacing:.04em;color:#fff8e7}.scoreboard{list-style:none;margin:0 0 1rem;padding:.4rem .55rem;border-radius:12px;background:#00000047;border:1px solid rgba(254,225,35,.25);text-align:left;max-height:11rem;overflow:auto}.scoreboard.empty{text-align:center;color:#fff8e78c;font-size:.88rem;padding:.65rem;margin-bottom:1rem}.scoreboard li{display:grid;grid-template-columns:2.2rem 1fr auto;gap:.35rem;align-items:center;padding:.28rem .2rem;font-size:.9rem;color:#fff8e7e0;border-bottom:1px solid rgba(255,255,255,.06)}.scoreboard li:last-child{border-bottom:none}.scoreboard li.best{color:#fee123;font-weight:700}.scoreboard .rank{font-family:var(--display);opacity:.75;letter-spacing:.04em}.scoreboard .pts{font-family:var(--display);font-size:1.1rem;color:#fee123}.record-banner{margin:.35rem 0 .5rem;font-size:.95rem;color:#fff8e7d9}.record-banner.new{color:#fee123;font-weight:700;font-size:1.05rem;text-shadow:0 0 12px rgba(254,225,35,.5);animation:record-pop .8s ease}@keyframes record-pop{0%{transform:scale(.9);opacity:.5}50%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}.name-row{display:flex;flex-direction:column;gap:.3rem;text-align:left;margin:.75rem 0 .5rem;font-size:.85rem;color:#fff8e7bf}.name-row input{border:2px solid #fee123;border-radius:10px;padding:.55rem .7rem;font-family:var(--font);font-size:1rem;font-weight:600;color:#154733;background:#fff8e7;outline:none}.go-btn.secondary{margin-top:.55rem;background:linear-gradient(180deg,#1a5c40,#154733);color:#fee123;box-shadow:0 6px #0a281c,0 12px 24px #0000004d;border:2px solid #fee123}#board-wrap{margin:.65rem 0 .25rem}#board-wrap .scoreboard{margin-bottom:0}.end-screen{flex:1;display:grid;place-items:center;padding:1.25rem;background:linear-gradient(165deg,#0d2f22,#154733 60%,#1e4d7b)}.end-card{width:min(400px,100%);text-align:center;padding:1.75rem 1.5rem;border-radius:20px;border:3px solid var(--uo-yellow);background:#0d2f22f2}.end-card h1{font-family:var(--display);font-size:2.6rem;margin:0 0 .35rem;color:#154733;text-shadow:2px 2px 0 #fee123,-1px -1px 0 #fee123}.score-xl{font-family:var(--display);font-size:3.5rem;color:var(--cream);margin:.25rem 0 1rem}.ghost{margin-top:.5rem;width:100%;border:2px solid rgba(254,225,35,.4);background:transparent;color:var(--cream);border-radius:999px;padding:.75rem;font-family:var(--font);font-weight:600;cursor:pointer}