:root{font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;color:#275654;background:#b9e8df;font-synthesis:none;--ink:#285955;--cream:#fff7df;--mint:#298b87;--gold:#edb443;--deck:#e4a65b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}
body{position:relative;isolation:isolate;user-select:none;-webkit-user-select:none}
button,a{font:inherit;touch-action:manipulation}
button{cursor:pointer;border:0;color:inherit}button:focus-visible,a:focus-visible{outline:4px solid #ef9d36;outline-offset:4px}
button:disabled{cursor:default}[hidden]{display:none!important}
#harbor{position:absolute;inset:0;z-index:-2;background:#bce8e4 url('assets/harbor-v1.webp') center/cover no-repeat}
#harbor::after{content:'';position:absolute;inset:0;background:linear-gradient(#effbf55c 0%,transparent 35%,#236c6712 90%,#eef9e981)}
.topbar{height:104px;display:flex;align-items:center;gap:17px;padding:16px max(22px,env(safe-area-inset-right)) 8px max(22px,env(safe-area-inset-left));position:relative;z-index:12}
.round-button{width:54px;height:54px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fff9e9ed;box-shadow:0 4px 0 #43928d26,0 5px 20px #346e4f14;border:2px solid #fffdf6;text-decoration:none;color:var(--ink);transition:transform .14s,background .14s}
.round-button:active{transform:translateY(3px) scale(.96)}.round-button svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.title{min-width:0}.eyebrow{display:block;font-size:10px;letter-spacing:2px;font-weight:bold;opacity:.72;margin:0 0 3px 1px}.title h1{font-size:clamp(21px,2.8vw,35px);margin:0;font-weight:900;letter-spacing:-1px;text-shadow:0 2px #ffffff70}
.sound-controls{display:flex;gap:8px;margin-left:auto;align-items:center}.round-button.small{width:42px;height:42px;background:#fff9e9bb}.small svg{width:25px;height:25px}
.mute-line{display:none}.muted .mute-line{display:block}.muted{opacity:.7}.speaking #replay{background:#ecffc9;box-shadow:0 0 0 5px #ffffff65,0 5px 18px #21696018}.audio-failed #replay{outline:3px solid #e8b261}
.counter{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 20px 8px 9px;min-width:170px;height:73px;position:absolute;left:50%;transform:translateX(-50%);top:20px;border:3px solid #fffdf1;border-radius:26px;background:#fff9e9ec;box-shadow:0 7px 0 #74a49b26,0 12px 30px #47856c10;font-variant-numeric:tabular-nums}
.counter strong{font-size:43px;line-height:1;color:#247e7c;min-width:26px;text-align:center}.counter .slash{font-size:25px;color:#90a797;font-weight:normal}.counter #capacity-count{font-size:26px;font-weight:bold;color:#899b7b}.counter .counter-duck{width:44px;height:51px;margin-right:0;flex:none}
.counter.count-pop strong{animation:number-pop .45s ease-out}.counter.complete{background:#fff0ad;border-color:#fff8d6}.counter.complete #capacity-count{color:#877236}
#play-area{position:absolute;inset:112px 18px 105px;display:grid;grid-template-columns:minmax(245px,30%) 1fr;align-items:center;gap:28px;max-width:1400px;margin:auto}
.dock{position:relative;align-self:center;isolation:isolate;z-index:3;padding:8px 0 32px}.dock-board{background:repeating-linear-gradient(0deg,#f0c385 0,#f0c385 42px,#e8b474 43px,#bc814449 45px,#f8d09a 47px);border:6px solid #e4ad65;border-top-color:#ffdda4;border-left-color:#fbd49a;border-radius:24px;box-shadow:0 12px 0 #b57842,0 18px 0 #8e664240,0 25px 25px #246e5130;padding:25px 14px 13px;position:relative}
.dock-sign{position:absolute;top:-25px;left:50%;transform:translateX(-50%) rotate(-2deg);white-space:nowrap;display:flex;align-items:center;gap:18px;border:3px solid #f7e5b6;background:#fff5d8;box-shadow:0 4px 0 #b88449;border-radius:13px;padding:9px 14px;color:#528a75;font-size:12px;letter-spacing:2px;font-weight:900}.dock-sign i{font-style:normal;font-size:25px;line-height:18px;color:#ce8e3d}
.queue{display:grid;grid-template-columns:repeat(var(--queue-cols,3),minmax(0,1fr));align-content:start;min-height:98px;gap:4px 2px;position:relative;z-index:2}
.duck-button{display:block;position:relative;aspect-ratio:.85;width:100%;min-height:57px;padding:0;background:transparent;border-radius:35%;transition:opacity .15s;touch-action:none;outline-offset:0!important}
.duck-button::after{content:'';position:absolute;inset:auto 15% 7%;height:10%;border-radius:50%;background:#9666332b;z-index:-1}.duck-button:disabled{opacity:1}.duck-button.queued{filter:saturate(.88);animation:queue-wiggle .7s ease-in-out infinite alternate}.duck-button.boarding{visibility:hidden;pointer-events:none}.duck-button.aboard{display:none}
.duck{display:block;width:100%;height:100%;background-image:url('assets/duck-poses-v1.webp');background-size:300% 100%;background-position:0 50%;background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 3px 1px #6d613614)}
.duck-button .duck{position:absolute;left:50%;top:0;width:auto;height:100%;aspect-ratio:256/280;max-width:100%;transform:translateX(-50%);transform-origin:50% 95%;animation:duck-breathe 2.8s ease-in-out infinite;animation-delay:calc(var(--duck-index,0)*-.23s)}.duck.step{background-position:50% 50%}.duck.happy{background-position:100% 50%}
.duck-button.coach::before{content:'';position:absolute;inset:18% 10% 3%;border:4px solid #fff9d1;border-radius:48%;animation:coach-ring 1.9s ease-out infinite;pointer-events:none;z-index:-1}
.dock-bolts{position:absolute;inset:10px;border:0;pointer-events:none}.dock-bolts::before,.dock-bolts::after{content:'';position:absolute;bottom:0;width:6px;height:6px;border:2px solid #b98a4c77;border-radius:50%;background:#f7d498}.dock-bolts::after{right:0}.pier-post{position:absolute;width:24px;height:65px;bottom:0;border-radius:12px;background:linear-gradient(90deg,#a77140,#e0aa65 55%,#b27f4b);z-index:-1;border-top:9px solid #f2ca90;box-shadow:0 8px 12px #1b59452b}.post-one{left:18px}.post-two{right:18px}
.water{height:100%;width:100%;min-width:0;position:relative;display:grid;place-items:center;isolation:isolate}
.boat{width:100%;max-width:810px;aspect-ratio:1.5;position:relative;isolation:isolate;will-change:transform;filter:drop-shadow(0 16px 8px #287d7240)}
.boat-art{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;pointer-events:none;user-select:none}
.seats{position:absolute;left:15%;right:16%;top:30%;bottom:31%;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));grid-template-rows:repeat(var(--rows,3),minmax(0,1fr));gap:7px 10px;align-items:center;z-index:2}
.seat{position:relative;align-self:stretch;display:grid;place-items:center;min-height:0;border-radius:40%;background:radial-gradient(ellipse,#f9eac77d 0 50%,#dda45e30 72%);isolation:isolate}
.seat::before{content:'';position:absolute;width:70%;height:44%;bottom:9%;border-radius:50%;border:3px dashed #a57a416e;box-shadow:0 3px 0 #fceac052;background:#fff5d64a}
.seat-number{position:absolute;bottom:16%;font-size:clamp(11px,1.3vw,17px);font-weight:bold;color:#9d774883;z-index:1}.seat.occupied::before{border-style:solid;border-color:#70aa9155;background:#c4e3a285}.seat.occupied .seat-number{visibility:hidden}.seat .duck{position:absolute;left:50%;bottom:4%;width:auto;height:140%;min-height:38px;max-height:136px;max-width:110%;aspect-ratio:256/280;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 3px 1px #725d3020)}
.seat.occupied{cursor:pointer}.seat.landed .duck{animation:seat-land .4s ease-out}.seat.recount::before{background:#fff4a4;border-color:#fffdeb;box-shadow:0 0 12px #fff9b2}
.boat-glow{position:absolute;inset:8% 4% 13%;border:5px solid transparent;border-radius:44%;pointer-events:none;z-index:4;transition:border-color .2s,box-shadow .2s}.drop-ready .boat-glow{border-color:#fff9c3;box-shadow:0 0 0 8px #fffcaa44,0 0 35px #fffade77}
.wake{position:absolute;left:-9%;right:0;top:63%;height:20%;z-index:-1;border-radius:50%;border-bottom:10px solid #eeffff65;box-shadow:0 12px 0 -7px #e7ffff88,0 24px 0 -15px #fff9;opacity:0;transition:opacity .3s}.sailing .wake{opacity:1}
.water-ripple{position:absolute;border:3px solid #e6fff584;border-left-color:transparent;border-right-color:transparent;border-radius:50%;width:75%;height:25%;top:57%;z-index:-1;animation:ripple 4s ease-out infinite}.ripple-two{animation-delay:-2s;top:61%;width:60%}
.celebration{position:absolute;left:50%;top:2%;transform:translate(-50%,10px) scale(.9);opacity:0;display:flex;gap:14px;align-items:center;white-space:nowrap;color:#936732;text-shadow:0 3px #fffaf0;pointer-events:none;transition:transform .3s,opacity .3s;z-index:6}.celebration strong{font-size:clamp(25px,3.3vw,43px);font-weight:900;letter-spacing:-1px}.celebration span{font-size:38px;color:#edb348}.celebration.show{opacity:1;transform:translate(-50%,0) scale(1)}
.lesson{position:absolute;left:15px;right:15px;bottom:max(12px,env(safe-area-inset-bottom));text-align:center;z-index:8;pointer-events:none}.spoken-card{display:inline-flex;gap:14px;align-items:center;justify-content:center;max-width:95%;min-height:54px;background:#fff9e7ec;border:2px solid #fffdf3;box-shadow:0 5px 0 #79aaa42c;padding:11px 23px;border-radius:23px;color:#446e62;font-size:clamp(17px,2vw,25px);font-weight:bold}.lesson p{font-size:12px;margin:10px 0 0;color:#356e63;text-shadow:0 1px #eafff0}
.sound-bars{display:flex;gap:3px;align-items:center;height:20px;flex:none}.sound-bars i{display:block;width:4px;height:5px;border-radius:4px;background:#74a596}.speaking .sound-bars i{animation:sound-bar .6s ease-in-out infinite alternate}.speaking .sound-bars i:nth-child(2){animation-delay:-.3s}.speaking .sound-bars i:nth-child(3){animation-delay:-.15s}
.loading{position:absolute;z-index:30;left:50%;top:48%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;max-width:90%;padding:20px 24px;border-radius:24px;background:#fff9e9f5;box-shadow:0 8px 25px #346b572e;color:#416e5b;font-weight:bold;text-align:center}.loading button{border-radius:12px;background:#e7bd6c;padding:12px;white-space:nowrap}.spinner{width:20px;height:20px;flex:none;border:3px solid #acd0bc;border-top-color:#398476;border-radius:50%;animation:turn 1s linear infinite}
.sound-note{position:absolute;right:20px;top:105px;z-index:20;background:#fff5dcf0;border:1px solid #f3d298;border-radius:14px;padding:9px 12px;font-size:12px;box-shadow:0 3px 12px #6b745512}
.flying-duck,.drag-duck{position:fixed;z-index:25;pointer-events:none;transform-origin:50% 90%;filter:drop-shadow(0 9px 4px #4d765a35)}.flying-duck{transform-origin:0 0}.flying-duck .duck,.drag-duck .duck{animation:none!important}.drag-source{opacity:.28}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
@keyframes duck-breathe{50%{transform:translateX(-50%) translateY(-3%) rotate(1deg)}}@keyframes queue-wiggle{to{transform:translateY(-4px)}}@keyframes seat-land{0%{transform:translateX(-50%) scale(.88,.94)}50%{transform:translateX(-50%) scale(1.07,1.03)}}@keyframes number-pop{45%{transform:scale(1.3);color:#d79c30}}@keyframes coach-ring{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.23)}}@keyframes sound-bar{to{height:18px}}@keyframes ripple{0%{opacity:0;transform:scale(.82)}35%{opacity:.65}100%{opacity:0;transform:scale(1.17)}}@keyframes turn{to{transform:rotate(360deg)}}
@media(max-width:760px) and (min-height:541px){
 .topbar{height:93px;padding:12px 13px;gap:10px}.round-button{width:44px;height:44px}.round-button svg{width:25px;height:25px}.round-button.small{width:35px;height:35px}.small svg{width:23px;height:23px}.sound-controls{gap:5px}.eyebrow{font-size:8px;letter-spacing:1px}.title h1{font-size:23px;letter-spacing:-.6px}
 .counter{top:87px;height:56px;min-width:140px;padding:3px 17px 3px 7px;border-radius:20px;gap:6px}.counter strong{font-size:34px}.counter #capacity-count{font-size:23px}.counter .counter-duck{width:34px;height:40px}
 #play-area{inset:156px 12px 102px;display:flex;flex-direction:column;gap:14px;justify-content:center}.water{order:0;flex:1;min-height:0;max-height:48vh}.boat{max-width:510px;width:min(100%,calc((100dvh - 340px)*1.5));min-width:280px}.dock{order:1;width:min(96%,475px);padding-bottom:17px;flex:none}.dock-board{padding:15px 9px 7px;border-width:5px;border-radius:20px}.dock-sign{top:-20px;font-size:9px;padding:5px 12px;letter-spacing:1.5px}.dock-sign i{transform:rotate(-90deg);font-size:21px}.queue{grid-template-columns:repeat(var(--phone-cols,6),minmax(0,1fr));min-height:58px;gap:0}.duck-button{min-height:46px;max-height:78px;aspect-ratio:.88}.pier-post{height:38px;width:20px}.celebration{top:-4%;}.celebration strong{font-size:27px}.celebration span{font-size:27px}
 .seats{gap:5px 5px}.seat::before{border-width:2px}.seat-number{font-size:11px}.lesson{bottom:max(10px,env(safe-area-inset-bottom))}.spoken-card{font-size:18px;padding:10px 16px;min-height:49px;border-radius:18px;gap:9px}.lesson p{font-size:11px;margin-top:9px}.sound-note{top:148px;right:8px;font-size:10px;max-width:48%}
}
@media(max-height:540px){
 .topbar{height:65px;padding:7px 13px;gap:9px}.round-button{height:41px;width:41px}.round-button.small{height:33px;width:33px}.title h1{font-size:23px}.eyebrow{font-size:8px;letter-spacing:.9px}.counter{top:9px;min-width:128px;height:49px;border-radius:18px;padding:2px 13px 2px 4px;gap:5px}.counter strong{font-size:29px}.counter .counter-duck{height:37px;width:32px}.counter #capacity-count{font-size:22px}
 #play-area{inset:68px 22px 74px;grid-template-columns:minmax(155px,30%) 1fr;gap:30px}.boat{max-width:calc((100dvh - 141px)*1.5)}.dock{padding:7px 0 15px}.dock-board{padding:15px 9px 3px;border-width:4px}.dock-sign{top:-18px;font-size:9px;padding:5px 10px;letter-spacing:1px}.queue{grid-template-columns:repeat(var(--land-cols,4),minmax(0,1fr));min-height:40px;gap:0}.duck-button{min-height:39px;max-height:62px}.pier-post{height:32px;width:18px}.seats{gap:3px 5px}.seat::before{border-width:2px}.seat-number{font-size:11px}.celebration{top:-1%}.celebration strong{font-size:25px}.celebration span{font-size:25px}.lesson{bottom:6px}.spoken-card{font-size:17px;min-height:39px;padding:7px 18px;border-radius:17px}.lesson p{font-size:10px;margin-top:6px}.sound-note{top:65px;font-size:10px;right:10px}
}
@media(max-width:360px) and (min-height:541px){.title h1{font-size:20px}.eyebrow{display:none}.topbar{gap:7px}.round-button{width:40px;height:40px}.sound-controls{gap:4px}#play-area{inset:148px 8px 94px;gap:13px}.counter{top:80px}.boat{min-width:270px}.dock-board{padding-top:12px}.duck-button{min-height:43px}.spoken-card{font-size:16px}.queue{min-height:45px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}