*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#0b2a45;color:#fff}main{max-width:980px;margin:0 auto;padding:16px}h1{margin:0 0 12px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;align-items:end}.controls label{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:.85rem;font-weight:600}.controls select{width:100%}.controls .vote,.controls #go{grid-column:1/-1}@media(min-width:700px){.controls{display:flex;flex-wrap:wrap;align-items:flex-end}.controls select{width:auto}}select,button{font:inherit;padding:10px 14px;border-radius:10px;border:2px solid #fff3;background:#12395c;color:#fff}button{background:#ffd400;color:#222;font-weight:800;font-size:1.2rem;cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #fff;outline-offset:2px}#timer{font-size:clamp(3rem,14vw,6rem);font-weight:900;text-align:center;font-variant-numeric:tabular-nums}.layout{display:flex;gap:16px;flex-wrap:wrap}.paper,.pond{--ink:#111;--paper:#fbfaf4;--water:#2b6cb0;background:var(--paper);color:var(--ink);border-radius:14px;border:3px solid var(--ink)}.paper button:focus-visible,.paper select:focus-visible{outline:3px solid var(--ink);outline-offset:2px}aside{flex:1 1 180px;max-width:100%;padding:8px 16px}@media(min-width:700px){aside{flex:0 0 264px}}aside h2,.stats h2{margin:6px 0;font-size:1.1rem}#board{padding-left:22px;margin:0 0 8px}#board li{padding:3px 0;font-size:.9rem}#board .row{display:flex;align-items:baseline;gap:6px}#board .row svg{flex:none;width:22px;height:22px;overflow:visible}#board .nm{flex:1;min-width:0}#board .pc{font-weight:700;font-variant-numeric:tabular-nums}#board li.mine{font-weight:800}.pond{--duck:46px;--bar:16px;flex:1 1 300px;min-width:0;position:relative;overflow:hidden;padding:0 44px 0 8px}@media(min-width:700px){.pond{--duck:56px;--bar:19px}}.pond:empty{min-height:calc(6*(var(--duck) + var(--bar) + 12px) + 18px)}.wave{position:relative;height:12px;margin:0 -44px 0 -8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cg fill='none' stroke='%232b6cb0' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 4q4.5-3.5 9 0t9 0'/%3E%3Cpath d='M21 9.5q4.5-3.5 9 0t9 0'/%3E%3C/g%3E%3C/svg%3E") 0 50%/40px 12px repeat-x}.racing .wave{animation:flow 1.6s linear infinite}.racing .wave:nth-child(4n+1){animation-duration:2.3s}@keyframes flow{to{background-position-x:-40px}}.rock{position:absolute;bottom:-1px;height:17px;width:auto;overflow:visible}.lane{position:relative}.course{position:relative;height:var(--duck)}.duck{position:absolute;left:0;top:0;width:var(--duck);height:var(--duck);will-change:transform}.duck svg{display:block;width:100%;height:100%;overflow:visible}.ink{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.stone{fill:var(--paper)}.ripple{fill:none;stroke:var(--water);stroke-width:1.6;stroke-linecap:round}.bubble{position:absolute;left:30px;top:-7px;font-size:.6rem;font-weight:800;font-style:italic;background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;padding:0 5px;white-space:nowrap;opacity:0}.bar{position:relative;height:var(--bar);border:2px solid var(--ink);border-radius:9px;background:var(--paper);overflow:hidden;font-size:.68rem;line-height:12px;font-weight:800}.bar .fill{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(135deg,#1116 0 1.5px,#1112 1.5px 5px);border-right:2px solid var(--ink)}.bar .who,.bar .pct{position:absolute;top:0;padding:0 6px;white-space:nowrap;text-shadow:0 0 2px var(--paper),1px 0 var(--paper),-1px 0 var(--paper),0 1px var(--paper),0 -1px var(--paper),1px 1px var(--paper),-1px -1px var(--paper),1px -1px var(--paper),-1px 1px var(--paper)}.bar .who{left:0}.bar .who.mine{font-weight:900}.bar .pct{right:0;font-variant-numeric:tabular-nums}@media(min-width:700px){.bar{font-size:.76rem;line-height:15px}}.finish{position:absolute;top:0;bottom:0;right:10px;width:26px;border:solid var(--ink);border-width:0 2px;background:conic-gradient(var(--ink) 25%,#fff 0 50%,var(--ink) 0 75%,#fff 0) 0 0/16px 16px;display:flex;align-items:center;justify-content:center}.finish span{writing-mode:vertical-rl;text-orientation:upright;background:var(--paper);border:2px solid var(--ink);border-radius:6px;padding:5px 1px;font-size:.72rem;font-weight:900;letter-spacing:.02em;line-height:1}@keyframes hop{0%,to{transform:translateY(0)}40%{transform:translateY(-9px) rotate(-7deg)}75%{transform:translateY(1px)}}.duck[data-action=hop] svg{animation:hop .6s ease-out}@keyframes flap{0%,to{transform:rotate(0)}25%,75%{transform:rotate(40deg)}50%{transform:rotate(-8deg)}}.duck[data-action=flap] .wing{transform-origin:31px 39px;animation:flap .45s ease-in-out 2}@keyframes dip{0%,to{transform:rotate(0)}35%,65%{transform:rotate(42deg)}}.duck[data-action=dip] .top{transform-origin:35px 34px;animation:dip .9s ease-in-out}@keyframes quack{0%,to{transform:rotate(0)}30%,70%{transform:rotate(26deg)}50%{transform:rotate(8deg)}}.duck[data-action=quack] .bill-low{transform-origin:45.5px 26px;animation:quack .45s 2}.duck[data-action=quack] .bubble{opacity:1}@keyframes shake{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-8deg)}40%,80%{transform:rotate(8deg)}}.duck[data-action=shake] svg{transform-origin:50% 85%;animation:shake .5s linear}@keyframes tip{0%,to{transform:translate(0) rotate(0)}40%,60%{transform:translate(3px,-6px) rotate(16deg)}}.duck[data-action=tip] .hat{transform-origin:40px 17px;animation:tip .9s ease-in-out}@keyframes look{0%,to{transform:scaleX(1)}20%,80%{transform:scaleX(-1)}}.duck[data-action=look] .top{transform-origin:38px 22px;animation:look 1s steps(1,end)}#result{text-align:center;font-size:1.6rem;font-weight:800;min-height:3rem;margin-top:12px}#result button{margin-left:10px}.stats{margin-top:12px;padding:8px 16px 12px}.stats table{width:100%;border-collapse:collapse;font-size:.85rem}.stats th,.stats td{padding:4px 3px;text-align:left;border-bottom:1.5px solid var(--ink)}.stats thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em}.stats tbody th{position:relative;padding-left:32px;font-weight:700;overflow-wrap:anywhere}.stats tbody th svg{position:absolute;left:2px;top:50%;width:22px;height:22px;margin-top:-13px;overflow:visible}.stats .races,.stats .wins,.stats td.rate{font-variant-numeric:tabular-nums}.stats td.rate{white-space:nowrap}.meter{display:inline-block;width:36px;height:9px;border:2px solid var(--ink);border-radius:5px;margin-left:6px;vertical-align:middle;overflow:hidden}.meter b{display:block;height:100%;width:0;background:var(--ink)}.stats-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 4px}.stats button{font-size:1rem;padding:6px 12px;border:2px solid var(--ink)}.hint{margin:4px 0 0;font-size:.75rem}.piece{position:fixed;top:-12px;width:10px;height:14px;animation:fall linear forwards;pointer-events:none}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}@media(prefers-reduced-motion:reduce){.piece{display:none}.racing .wave,.racing .wave:nth-child(4n+1){animation:none}.duck,.duck *{animation:none!important}}.badge{margin-top:16px;text-align:center;font-size:.8rem;opacity:.7;letter-spacing:.04em}.foot{margin-top:16px}.legal{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:.85rem}.legal a{color:#ffd400}.legal a:focus-visible{outline:3px solid #fff;outline-offset:2px}.copy{margin:8px 0 0;text-align:center;font-size:.8rem}.badge{margin-top:8px}
