*{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:flex;gap:12px;flex-wrap:wrap;align-items:center}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}.pond{flex:1 1 300px;min-width:0;background:linear-gradient(#2aa3e8,#1473b8);border-radius:14px;padding:6px 0;position:relative;overflow:hidden}.lane{height:54px;position:relative;border-bottom:2px dashed #ffffff40}.lane:last-child{border-bottom:0}.lane:after{content:"";position:absolute;right:12px;top:0;bottom:0;width:6px;background:repeating-linear-gradient(#fff 0 6px,#222 6px 12px)}.duck{position:absolute;top:4px;left:0;width:46px;height:46px;will-change:transform}.duck span{position:absolute;left:0;top:-4px;font-size:.65rem;white-space:nowrap;opacity:.85}aside{flex:1 1 180px;max-width:100%;background:#12395c;border-radius:14px;padding:8px 16px}@media(min-width:700px){aside{flex:0 0 220px}}aside h2{margin:6px 0;font-size:1.1rem}#board{padding-left:22px;margin:0 0 8px}#board li{padding:3px 0}.dot{display:inline-block;width:.8em;height:.8em;border-radius:50%;margin-right:6px;border:1px solid #0006}#result{text-align:center;font-size:1.6rem;font-weight:800;min-height:3rem;margin-top:12px}#result button{margin-left:10px}.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}}