:root{--sky-top:#8fd3ff;--sky-bottom:#e6f6ff;--grass:#5fb85a;--grass-dark:#3f8f3d;--water:#2f8fd8;--water-deep:#1f6fb4;--ink:#1b2a3a;--muted:#5a6b7c;--card:#fff;--accent:#ff8a1f;--accent-dark:#e06d00;--gold:#ffd23f;--danger:#d6336c;--finish:88%;--label-w:clamp(5.5rem, 24vw, 10rem);--header-h:3.75rem;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{color:var(--ink);background:linear-gradient(var(--sky-top), var(--sky-bottom));min-height:100dvh;font-family:Fredoka,system-ui,sans-serif}[hidden]{display:none!important}.btn{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:.75rem 1.5rem;font-size:1.05rem;font-weight:600;transition:transform .1s,background .15s,box-shadow .15s}.btn:active{transform:translateY(2px)}.btn:focus-visible,textarea:focus-visible{outline:3px solid var(--water-deep);outline-offset:2px}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-dark)}.btn-primary:hover{background:#ff9a3d}.btn-secondary{color:var(--ink);background:#eef3f8;box-shadow:0 4px #cdd8e3}.btn-ghost{color:var(--ink);background:#ffffffb3;padding:.45rem 1rem;font-size:.95rem}.title-screen{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:100dvh;padding:2rem 16px;display:flex}.logo{text-align:center}.logo-duck{--duck:var(--gold);width:140px;margin:0 auto -.5rem;animation:2.2s ease-in-out infinite bob}.logo h1{letter-spacing:.01em;color:#fff;text-shadow:0 4px 0 var(--water-deep), 0 8px 18px #0000002e;margin:0;font-size:clamp(2.6rem,10vw,4.5rem);font-weight:700}.tagline{color:var(--water-deep);margin:.5rem 0 0;font-size:1.1rem}.names-form{background:var(--card);border-radius:1.5rem;flex-direction:column;gap:.75rem;width:min(100%,28rem);padding:1.5rem;display:flex;box-shadow:0 12px 32px #1f6fb433}.names-form label{font-size:1.2rem;font-weight:600}.hint{color:var(--muted);font-size:.9rem;font-weight:400;display:block}textarea{font:inherit;resize:vertical;min-height:10rem;color:var(--ink);background:#f8fbfe;border:2px solid #d5e2ee;border-radius:1rem;padding:.75rem 1rem;font-size:1.05rem}.form-row{justify-content:space-between;gap:1rem;min-height:1.4em;font-size:.95rem;display:flex}.name-count{color:var(--muted);font-variant-numeric:tabular-nums}.name-count.over,.form-error{color:var(--danger);font-weight:600}.race-screen{--log-strip:0px;--lane-h:clamp(22px, calc((100dvh - var(--header-h) - var(--log-strip) - 1rem) / var(--lanes,6)), 100px);flex-direction:column;height:100dvh;display:flex;overflow:hidden}.race-header{height:var(--header-h);flex:none;justify-content:space-between;align-items:center;gap:1rem;padding:0 16px;display:flex}.race-actions{gap:.5rem;display:flex}.race-brand{color:#fff;text-shadow:0 2px 0 var(--water-deep);white-space:nowrap;align-items:center;gap:.4rem;font-size:1.2rem;font-weight:700;display:flex}.mini-duck{--duck:var(--gold);width:2.2rem}.track{grid-template-columns:var(--label-w) 1fr minmax(15rem, 20rem);background:linear-gradient(var(--grass), var(--grass-dark));border-top:6px solid var(--grass-dark);flex:1;grid-template-rows:minmax(0,1fr);display:grid;position:relative}.labels{z-index:3;background:var(--grass-dark);position:relative;box-shadow:4px 0 #0000001f}.lane-label{height:var(--lane-h);color:#fff;font-weight:600;font-size:clamp(11px, calc(var(--lane-h) * .36), 17px);border-bottom:1px solid #0000001f;align-items:center;gap:.35rem;padding:0 .5rem;transition:opacity .3s,background .3s;display:flex}.lane-dot{background:var(--duck);border-radius:50%;flex:none;width:.7em;height:.7em;box-shadow:0 0 0 2px #fff9}.lane-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.lane-status{flex:none;font-size:.9em}.lane-label.is-out{background:#b3243f}.lane-label.is-out .lane-name{opacity:.6;text-decoration:line-through}.lane-label.is-winner{background:var(--gold);color:var(--ink)}.river{background:repeating-linear-gradient(100deg, transparent 0 46px, #ffffff1f 46px 52px, transparent 52px 110px), linear-gradient(var(--water), var(--water-deep));background-size:220px 100%,100% 100%;animation:3s linear infinite flow;position:relative;box-shadow:inset 0 6px #ffffff40,inset 0 -6px #00000026}.river:after{content:"";top:0;bottom:0;left:var(--finish);background:repeating-conic-gradient(#fff 0 25%, #1b2a3a 0 50%) 0 0 / 12px 12px;opacity:.9;z-index:0;width:12px;position:absolute}.lane{height:var(--lane-h);border-bottom:2px dashed #ffffff47;transition:background-color .3s;position:relative}.lane.is-out{background-color:#e61e3c8c}.lane:last-child{border-bottom:0}.duck{--h:max(calc(var(--lane-h) * 1.45), 44px);z-index:1;left:0;top:calc((var(--lane-h) - var(--h)) / 2);height:var(--h);width:calc(var(--h) * 4 / 3);will-change:transform;position:absolute}.duck-body{transform-origin:50% 70%;filter:drop-shadow(0 2px #0003);width:100%;height:100%;animation:.45s ease-in-out infinite alternate paddle}.duck-svg{width:100%;height:100%;display:block}.duck-fx{font-size:calc(var(--h) * .42);pointer-events:none;place-items:center;line-height:1;display:grid;position:absolute;inset:0}.duck.winner{z-index:2}.duck.winner .duck-body{filter:drop-shadow(0 0 8px var(--gold)) drop-shadow(0 0 2px #fff);animation:.5s ease-in-out infinite alternate celebrate}.out-shot .duck-body{animation:1.3s ease-out forwards shot}.out-shot .duck-fx{animation:1.3s ease-out forwards pop}.out-tired .duck-body{filter:grayscale(.5);animation:2.4s ease-in-out infinite sleepy}.out-tired .duck-fx{font-size:calc(var(--h) * .27);place-items:start end;animation:1.8s ease-out infinite snooze}.out-croc .duck-body{animation:.9s ease-in forwards gulp}.out-croc .duck-fx{font-size:calc(var(--h) * .57);animation:2.2s ease-in-out forwards croc}.out-bread{animation:1s ease-in 2.6s forwards fade-out}.out-bread .duck-body{animation:.5s ease-in-out forwards turn-around}.out-bread .duck-fx{font-size:calc(var(--h) * .3);place-items:center start;animation:.6s ease-in 1.6s forwards fade-out;transform:translate(-90%)}.out-whirlpool .duck-body{animation:2s ease-in forwards spin-out}.out-whirlpool .duck-fx{z-index:-1;font-size:calc(var(--h) * .66);animation:2.6s linear forwards whirl}.out-ufo .duck-body{animation:1.8s ease-in .5s forwards beam-up}.out-ufo .duck-fx{font-size:calc(var(--h) * .48);place-items:start center;animation:2.8s ease-in-out forwards ufo}.out-shark .duck-body{animation:1s ease-in .4s forwards gulp}.out-shark .duck-fx{font-size:calc(var(--h) * .57);animation:2.2s ease-in-out forwards shark}.out-eagle .duck-body{animation:1.4s ease-in .75s forwards carried}.out-eagle .duck-fx{font-size:calc(var(--h) * .55);animation:2.2s ease-in-out forwards eagle}.out-lightning .duck-body{animation:2s ease-out forwards zap}.out-lightning .duck-fx{font-size:calc(var(--h) * .6);place-items:start center;animation:.9s ease-out forwards strike}.out-hook .duck-body{animation:1.8s ease-in forwards yank}.out-hook .duck-fx{place-items:start center;animation:1.8s ease-in forwards hook}.out-octopus .duck-body{animation:2.2s ease-in forwards dragged}.out-octopus .duck-fx{font-size:calc(var(--h) * .55);animation:2.4s ease-in-out forwards octopus}.out-rock .duck-body{animation:1.2s ease-out forwards crash}.out-rock .duck-fx{font-size:calc(var(--h) * .45);place-items:center end;transform:translate(75%)}.out-rocket .duck-body{animation:1.6s ease-in forwards launch}.out-rocket .duck-fx{animation:1.6s ease-in forwards rocket}.out-frozen .duck-body{animation:.6s ease-out forwards freeze}.out-frozen .duck-fx{font-size:calc(var(--h) * .85);opacity:.7;animation:.4s ease-out pop-in}.out-tornado .duck-body{animation:2.4s ease-in forwards swept}.out-tornado .duck-fx{font-size:calc(var(--h) * .6);animation:2.4s ease-in-out forwards tornado}.out-love{animation:1s ease-in 3.2s forwards fade-out}.out-love .duck-body{animation:.5s ease-in-out .3s forwards turn-around}.out-love .duck-fx{font-size:calc(var(--h) * .3);place-items:start end;animation:1.6s ease-out infinite snooze}.out-selfie .duck-body{animation:1.4s ease-out forwards selfie}.out-selfie .duck-fx{font-size:calc(var(--h) * .35);place-items:start end;animation:.4s ease-out pop-in}.out-disqualified .duck-body{animation:1.2s ease-out forwards benched}.out-disqualified .duck-fx{font-size:calc(var(--h) * .4);place-items:start center;animation:.8s ease-out forwards red-card}.out-chicken .duck-body{animation:.5s ease-in forwards gulp}.out-chicken .duck-fx{font-size:calc(var(--h) * .7);animation:.6s ease-out .25s both chicken}.out-magic .duck-body{animation:1.3s ease-in forwards vanish}.out-magic .duck-fx{font-size:calc(var(--h) * .5);animation:1.9s ease-in-out forwards magic-hat}@keyframes shark{0%{opacity:0;transform:translate(160%)}40%,70%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-60%,40%)}}@keyframes eagle{0%{opacity:0;transform:translate(-150%,-180%)}35%{opacity:1;transform:translateY(-60%)}to{opacity:0;transform:translate(180%,-260%)}}@keyframes carried{to{opacity:0;transform:translate(180%,-200%)rotate(-20deg)}}@keyframes zap{10%{filter:brightness(3);transform:translate(-4%)}20%{filter:brightness(.15);transform:translate(4%)}30%{transform:translate(-3%)}to{filter:brightness(.15);opacity:.6;transform:translateY(15%)rotate(8deg)}}@keyframes strike{0%{transform:translateY(-90%)scale(0)}20%{transform:translateY(-60%)scale(1.6)}to{opacity:0;transform:translateY(-60%)scale(1)}}@keyframes hook{0%{opacity:0;transform:translateY(-220%)}35%,55%{opacity:1;transform:translateY(-55%)}to{opacity:0;transform:translateY(-420%)}}@keyframes yank{0%,55%{transform:none}62%{transform:translateY(-10%)rotate(-15deg)}to{opacity:0;transform:translateY(-420%)rotate(-30deg)}}@keyframes octopus{0%{opacity:0;transform:translateY(90%)}30%,65%{opacity:1;transform:translateY(30%)}to{opacity:0;transform:translateY(130%)}}@keyframes dragged{0%,30%{transform:rotate(0)}15%{transform:rotate(-10deg)}45%{transform:rotate(10deg)translateY(10%)}to{opacity:0;transform:translateY(90%)scale(.8)}}@keyframes crash{15%{transform:translate(-10%)rotate(-14deg)}30%{transform:rotate(9deg)}45%{transform:rotate(-5deg)}to{filter:grayscale(.6);opacity:.75;transform:rotate(-20deg)translateY(10%)}}@keyframes rocket{0%{opacity:0;transform:translateY(40%)scale(.5)}20%{opacity:1;transform:translateY(30%)scale(1)}to{opacity:0;transform:translateY(-650%)}}@keyframes launch{0%,18%{transform:translate(0)}6%{transform:translate(-4%)}12%{transform:translate(4%)}to{opacity:0;transform:translateY(-650%)rotate(720deg)}}@keyframes freeze{to{filter:saturate(.25)brightness(1.5)drop-shadow(0 0 6px #bfe9ff);transform:none}}@keyframes pop-in{0%{transform:scale(0)}70%{transform:scale(1.2)}}@keyframes tornado{0%{opacity:0;transform:translate(-140%)}30%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(140%,-140%)}}@keyframes swept{0%,25%{transform:none}to{opacity:0;transform:translate(140%,-260%)rotate(900deg)scale(.4)}}@keyframes selfie{25%{filter:brightness(2.6);transform:rotate(-8deg)}32%{filter:brightness()}55%{filter:brightness(2.6)}62%{filter:brightness()}to{transform:rotate(-8deg)}}@keyframes benched{to{filter:grayscale();opacity:.35;transform:none}}@keyframes red-card{0%{transform:translateY(-70%)scale(0)rotate(-30deg)}40%{transform:translateY(-70%)scale(1.3)rotate(10deg)}to{transform:translateY(-70%)scale(1)rotate(0)}}@keyframes chicken{0%{opacity:0;transform:scale(-.3,.3)}70%{opacity:1;transform:scale(-1.2,1.2)}to{opacity:1;transform:scaleX(-1)}}@keyframes vanish{0%,45%{transform:none}55%{filter:brightness(2.2);transform:scale(1.15)}to{opacity:0;transform:scale(0)rotate(30deg)}}@keyframes magic-hat{0%{opacity:0;transform:translateY(-160%)}35%,70%{opacity:1;transform:translateY(-25%)}to{opacity:0;transform:translateY(-160%)}}.event-log{color:#fff;background:#14283f;flex-direction:column;min-height:0;font-size:.9rem;display:flex;box-shadow:-4px 0 #0000001f}.event-log-title{letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin:0;padding:.5rem .85rem .35rem;font-size:.75rem;font-weight:600}.event-log-list{scrollbar-width:thin;margin:0;padding:0 .85rem .6rem;list-style:none;overflow-y:auto}.event-log-list li{padding:.2rem 0;line-height:1.6;animation:.3s ease-out slide-in}.event-log-list time{opacity:.65;font-variant-numeric:tabular-nums;min-width:2.8em;margin-right:.4rem;display:inline-block}.log-name,.log-action{border-radius:.4em;padding:0 .45em;font-weight:700;line-height:1.4;display:inline-block}.log-action-out{background:var(--danger);color:#fff}.log-action-won{background:var(--gold);color:var(--ink)}.countdown{z-index:40;color:#fff;text-shadow:0 6px 0 var(--accent-dark), 0 12px 30px #0000004d;pointer-events:none;place-items:center;font-size:clamp(4rem,22vw,11rem);font-weight:700;display:grid;position:fixed;inset:0}.countdown.pop{animation:.7s ease-out count}.overlay{z-index:50;background:#0f28468c;place-items:center;padding:16px;animation:.3s ease-out fade-in;display:grid;position:fixed;inset:0}.winner-card{background:var(--card);text-align:center;border-radius:2rem;width:min(100%,26rem);padding:2rem 1.5rem 1.75rem;animation:.6s cubic-bezier(.2,1.4,.4,1) card-in;box-shadow:0 20px 50px #0000004d}.trophy{font-size:3rem;line-height:1}.winner-duck{width:9rem;margin:.5rem auto 0;animation:.5s ease-in-out infinite alternate celebrate}.winner-kicker{color:var(--muted);margin:.75rem 0 0;font-size:1.1rem}.winner-name{overflow-wrap:anywhere;color:var(--accent-dark);margin:.25rem 0 1.5rem;font-size:clamp(2rem,9vw,3rem);line-height:1.1}.actions{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}@keyframes bob{50%{transform:translateY(-8px)rotate(-3deg)}}@keyframes paddle{0%{transform:translateY(0)rotate(-3deg)}to{transform:translateY(-6%)rotate(3deg)}}@keyframes celebrate{0%{transform:translateY(0)rotate(-6deg)scale(1)}to{transform:translateY(-12%)rotate(6deg)scale(1.08)}}@keyframes flow{to{background-position:-220px 0,0 0}}@keyframes slide-in{0%{opacity:0;transform:translateY(-6px)}}@keyframes shot{20%{transform:translateY(-35%)rotate(-30deg)}60%{transform:translateY(0)rotate(180deg)}to{opacity:.55;filter:grayscale();transform:translateY(10%)rotate(180deg)}}@keyframes pop{0%{transform:scale(0)}25%{transform:scale(1.5)}70%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(1.3)}}@keyframes sleepy{50%{transform:rotate(8deg)translateY(4%)}}@keyframes snooze{0%{opacity:0;transform:translate(10%,20%)scale(.6)}30%{opacity:1}to{opacity:0;transform:translate(40%,-60%)scale(1.1)}}@keyframes gulp{0%,45%{transform:none}to{opacity:0;transform:translateY(40%)scale(0)}}@keyframes croc{0%{opacity:0;transform:translateY(70%)}25%,70%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(60%)}}@keyframes turn-around{to{transform:scaleX(-1)}}@keyframes fade-out{to{opacity:0}}@keyframes fade-in{0%{opacity:0}}@keyframes spin-out{to{opacity:0;transform:rotate(1080deg)scale(0)}}@keyframes whirl{0%{opacity:0;transform:rotate(0)scale(.4)}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:rotate(-1440deg)scale(.2)}}@keyframes beam-up{to{opacity:0;transform:translateY(-160%)scale(.4)}}@keyframes ufo{0%{opacity:0;transform:translate(-120%,-140%)}20%,75%{opacity:1;transform:translateY(-110%)}to{opacity:0;transform:translate(220%,-220%)}}@keyframes count{0%{opacity:0;transform:scale(2.2)}40%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.85)}}@keyframes card-in{0%{opacity:0;transform:scale(.6)translateY(30px)}}@media (width<=600px){.btn-label{display:none}}@media (width<=899px){.race-screen{--log-strip:6.5rem}.track{grid-template-columns:var(--label-w) 1fr;grid-template-rows:minmax(0, 1fr) var(--log-strip)}.event-log{grid-column:1/-1;padding-top:.5rem;font-size:.8rem;box-shadow:0 -4px #0000001f}.event-log-list{flex-direction:column-reverse;justify-content:flex-end;display:flex}}@media (prefers-reduced-motion:reduce){.river,.logo-duck,.duck-body{animation:none}}
