*{box-sizing:border-box}body{margin:0;background:#f2f7e9;color:#153e45;font:16px system-ui,-apple-system,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-weight:850;cursor:pointer;border:2px solid #ffffffaa;border-radius:18px;padding:14px 22px;min-height:48px;color:#153e45;background:#effbf0}button:focus-visible,a:focus-visible{outline:4px solid #ffda4b;outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;padding:12px 4%;gap:12px;background:#f9fff3}header a{color:inherit;font-size:14px;font-weight:750;text-decoration:none}#ocean{height:calc(100svh - 76px);min-height:520px;max-height:900px;position:relative;overflow:hidden;background:#168da3}#view,#view canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#view canvas{touch-action:manipulation}#loading{padding:200px 10px;text-align:center}.heading{position:absolute;left:4%;top:26px;color:#fffce9;text-shadow:0 2px 8px #00445488;pointer-events:none}.heading span{font-size:10px;font-weight:850;letter-spacing:2px}.heading h1{font-size:clamp(28px,4vw,48px);letter-spacing:-1.5px;margin:7px 0}.heading p{font-size:14px;font-weight:750}#basket{position:absolute;right:4%;top:24px;background:#faffebee;padding:16px;border-radius:20px;font-size:23px}.instructions{position:absolute;bottom:25px;left:5%;right:5%;text-align:center}.instructions p{margin:0 auto 13px;width:fit-content;max-width:100%;padding:12px 18px;border-radius:18px;background:#073e50e8;color:#fffef0;font-weight:750}#clawButton{background:#8af448;color:#1b3c13;border:4px solid #ffffffaa;box-shadow:0 6px 0 #37864d;font-size:25px;min-width:230px;min-height:76px}#clawButton:disabled{opacity:.8;cursor:wait}#finish{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}#finish[hidden]{display:none}#finish a{padding:18px;background:#8af448;color:#1b3c13;font-weight:850;border-radius:18px;text-decoration:none}footer{max-width:850px;padding:20px 5%;margin:auto;font-size:13px;line-height:1.6}footer p:last-child{font-size:12px;color:#547473}@media(max-width:600px){header{padding:10px 4%;flex-wrap:wrap}header strong{display:none}#ocean{min-height:560px}.heading{top:18px}.heading h1{font-size:28px;max-width:220px}.heading p{max-width:205px;font-size:12px}#basket{font-size:18px;padding:12px;top:18px}.instructions p{font-size:13px}#clawButton{font-size:23px;width:90%}}

.claw-pad{position:absolute;right:20px;top:43%;display:flex;flex-direction:column;align-items:center;gap:5px}.claw-pad div{display:flex;gap:36px}.claw-pad button{padding:8px;min-width:42px;min-height:42px;background:#e9fff2dc;border:1px solid #fff9;border-radius:13px;color:#15566a}.claw-pad button:active{background:#a4f477}@media(max-width:600px){.claw-pad{top:auto;bottom:170px;right:14px}.claw-pad div{gap:26px}.claw-pad button{min-width:38px;min-height:38px;padding:6px}}

#pause{position:absolute;right:4%;top:100px;min-height:44px;padding:10px 14px;font-size:13px;background:#f9fff0eb}#pause[aria-pressed=true]{background:#dcf99d}@media(max-width:600px){#pause{top:85px;right:4%;font-size:12px}}

@media(max-width:600px){.claw-pad{left:14px;right:auto;bottom:180px}}