.beach-float{left:50%;top:calc(var(--horizon) + (var(--shore) - var(--horizon)) * .9);width:clamp(76px,22vw,116px);position:absolute;translate:-50% -100%}.beach-bottle{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;width:100%;padding:0;transition:transform .35s cubic-bezier(.2,1.4,.4,1);display:block;position:relative}.beach-bottle:before{content:"";position:absolute;inset:-18% -45%}.beach-bottle:hover{transform:translateY(-6px)rotate(-3deg)}.beach-bottle:active{transition-duration:.12s;transform:scale(1.08,.9)}.beach-bottle:focus-visible{outline-offset:10px;border-radius:24px}.beach-bottle .bob{display:block;position:relative}.nudge{transform-origin:50% 90%;animation:7s ease-in-out 2.5s infinite nudge;display:block}@keyframes nudge{0%,84%,to{transform:none}87%{transform:translateY(-9%)rotate(-9deg)scale(1.03,.98)}90%{transform:translateY(-4%)rotate(8deg)}93%{transform:translateY(-6%)rotate(-5deg)}96%{transform:rotate(2deg)}}.bottle-spark{color:#fff;opacity:0;filter:drop-shadow(0 0 5px #ffffffe6);pointer-events:none;width:22%;animation:4.2s ease-in-out 1s infinite bottle-spark;position:absolute;top:38%;left:20%}@keyframes bottle-spark{0%,62%,to{opacity:0;transform:scale(.2)rotate(0)}72%{opacity:1;transform:scale(1)rotate(45deg)}82%{opacity:0;transform:scale(.3)rotate(90deg)}}.beach-float .ring{top:92%}.bubble{color:var(--color-ink);font-family:var(--font-text);white-space:nowrap;pointer-events:none;transform-origin:0 100%;background:#fff;border-radius:16px 16px 16px 4px;padding:6px 14px 7px;font-size:clamp(17px,4.6vw,21px);font-weight:600;line-height:1.3;animation:.7s cubic-bezier(.2,1.5,.4,1) 1.4s both bubble-in,3.6s ease-in-out 2.1s infinite bubble-float;position:absolute;bottom:98%;left:74%;box-shadow:0 10px 24px -12px #08142880}.bubble:after{content:"";clip-path:polygon(0 0,100% 0,0 100%);background:#fff;width:12px;height:10px;position:absolute;bottom:-6px;left:2px}@keyframes bubble-in{0%{opacity:0;transform:scale(.3)rotate(-12deg)}to{opacity:1;transform:scale(1)rotate(-4deg)}}@keyframes bubble-float{0%,to{transform:rotate(-4deg)translateY(0)}50%{transform:rotate(2deg)translateY(-5px)}}.beach-welcome{z-index:5;left:50%;top:max(76px, calc(env(safe-area-inset-top) + 66px));background:var(--glass-bg);max-width:calc(100% - 40px);color:var(--glass-ink);-webkit-backdrop-filter:blur(12px);font-family:var(--font-text);text-align:center;animation:hint-in 1.2s var(--ease-tide) .6s both;border-radius:999px;padding:8px 16px;font-size:clamp(17px,4.4vw,20px);position:absolute;translate:-50%}.beach-ashore{left:30%;bottom:calc((100% - var(--shore)) * .22);pointer-events:auto;cursor:pointer;width:clamp(64px,17vw,96px);transition:rotate .4s cubic-bezier(.2,1.4,.4,1);position:absolute;rotate:-74deg}.beach-ashore:hover{rotate:-66deg}.far-bottle{width:calc(clamp(18px, 5vw, 26px) * (.8 + var(--p,0) * .9));pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:top 2s var(--ease-tide);position:absolute;left:27%;translate:-50% -100%}.far-bottle:before{content:"";position:absolute;inset:-60% -120%}.far-bottle .bob{display:block}.tide-card{z-index:5;left:50%;top:max(70px, calc(env(safe-area-inset-top) + 60px));width:min(100% - 28px,420px);color:var(--glass-ink);background:var(--glass-bg);-webkit-backdrop-filter:blur(16px)saturate(1.3);border-radius:24px;padding:14px 18px 10px;animation:.9s cubic-bezier(.2,1.2,.4,1) both card-drop;position:absolute;translate:-50%;box-shadow:inset 0 0 0 1px #ffffff38,0 24px 50px -30px #00000073}@keyframes card-drop{0%{opacity:0;transform:translateY(-16px)scale(.97)}}.tide-card h1{font-family:var(--font-text);font-size:clamp(20px,5.4vw,25px);font-weight:600;line-height:1.35}.tide-card p{color:var(--glass-soft);margin-top:0;font-size:14px;line-height:1.9}.tide-card strong{color:var(--glass-ink);font-weight:700}.tide-actions{flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:6px;display:flex}.tide-actions .btn{min-height:42px;color:var(--glass-ink);padding-inline:14px;font-size:14px}.tide-actions .btn-ghost{box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--glass-ink) 35%, transparent);background:0 0}.tide-track{height:32px;margin:8px 0 0;position:relative}.tide-track-line,.tide-track-done{top:12px;height:8px;position:absolute;inset-inline-start:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4q3-4 6 0t6 0 6 0 6 0' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/24px 8px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4q3-4 6 0t6 0 6 0 6 0' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/24px 8px repeat-x}.tide-track-line{background:color-mix(in oklab, var(--glass-ink) 28%, transparent);inset-inline-end:0}.tide-track-done{background:var(--color-firoozeh);transition:width 1s var(--ease-tide)}.tide-track-bottle{background:var(--color-firoozeh);color:#fff;width:30px;height:30px;transition:inset-inline-start 1s var(--ease-tide);border-radius:50%;place-items:center;animation:2.4s ease-in-out infinite tide-track-bob;display:grid;position:absolute;top:0;translate:50%;box-shadow:0 6px 14px -6px #00000080}@keyframes tide-track-bob{0%,to{transform:translateY(0)rotate(-8deg)}50%{transform:translateY(-3px)rotate(8deg)}}.tide-track-end{color:var(--glass-soft);font-size:11px;position:absolute;top:24px}.tide-track-sea{inset-inline-start:0}.tide-track-shore{inset-inline-end:0}@media (min-width:900px){.tide-card{top:84px;left:32px;translate:none}.beach-welcome{top:84px}:root[data-phase=night] .tide-card,:root[data-phase=dawn] .tide-card{left:auto;right:32px}}