.key-bin{border:2px solid #72dbe7;border-top-width:6px;border-radius:3px 3px 6px 6px}.key-bin:after{content:"♻";position:absolute;inset:-3px 0 0;display:grid;place-items:center;color:#d5ff57;font-size:13px}.key-wave{border-top:4px solid #eaffff;border-radius:50%;transform:translateY(8px)}.key-wave:after{content:"";position:absolute;left:2px;top:5px;width:20px;height:8px;border-top:3px solid #69d2e7;border-radius:50%}.beach-callout[data-kind="rescue"]{max-width:min(92%,560px);border-radius:16px;background:#d5ff57;color:#08283a;white-space:normal;text-align:center}.beach-callout[data-kind="wave"]{background:#0c7187}.beach-stage canvas{cursor:pointer}.beach-stage canvas:active{cursor:pointer}@media(max-width:700px){.beach-callout{top:62px;font-size:11px}.beach-overlay>p:not(.eyebrow){margin:6px 0 2px;font-size:12px}.beach-key{margin-top:12px}.beach-key span{padding:8px}}
.key-general:after{content:"▰";color:#f3f6f4}.beach-sort-guide{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 4px 0}.beach-sort-guide span{position:relative;display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 14px 10px 48px;border:1px solid #cddbd7;border-radius:14px;background:#fff;color:#64787e;font-size:11px}.beach-sort-guide span:before{position:absolute;left:14px;display:grid;place-items:center;width:25px;height:29px;border:3px solid #083849;border-top-width:7px;border-radius:3px 3px 7px 7px;color:#fff;font-size:12px}.beach-sort-guide .recycle:before{content:"♻";background:#0c8891}.beach-sort-guide .general:before{content:"▰";background:#59666b}.beach-sort-guide b{color:#08283a;font-size:12px}.beach-sort-guide small{grid-column:1/-1;padding:0 4px;color:#72858b;font-size:9px}@media(max-width:560px){.beach-sort-guide{grid-template-columns:1fr;padding:12px 12px 0}.beach-sort-guide small{grid-column:auto}.beach-sort-guide span{min-height:44px}}
.beach-callout[data-kind="rogue"]{max-width:min(92%,590px);border:2px solid #ffd16b;border-radius:16px;background:#a43e32;color:#fff7d6;white-space:normal;text-align:center;box-shadow:0 8px 26px #56181066}
.beach-pause{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;line-height:1}.beach-pause:before{content:"Ⅱ";font-size:18px;font-weight:900;letter-spacing:-3px;transform:translateX(-1px)}.beach-pause.is-paused:before{content:"▶";font-size:15px;letter-spacing:0;transform:translateX(1px)}
@media(max-width:700px){.beach-stage{width:calc(100% - 20px);margin:0 10px;border-radius:0 0 18px 18px}.beach-sort-guide{margin:0 10px;padding-left:0;padding-right:0}.beach-options{margin:0 10px}}
.beach-live-hud{position:absolute;z-index:4;left:15px;right:108px;top:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none}.beach-health,.beach-tide-next{min-width:150px;padding:8px 11px;border:1px solid #ffffff70;border-radius:13px;background:#08283ad9;color:#fff;box-shadow:0 6px 18px #05212d33}.beach-health span,.beach-tide-next span{display:block;color:#8ee7ef;font-size:8px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.beach-health b,.beach-tide-next b{display:block;margin-top:2px;font-size:12px}.beach-health i{display:block;width:100%;height:5px;margin-top:6px;overflow:hidden;border-radius:99px;background:#ffffff24}.beach-health em{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff8b73,#ffd16b 42%,#d5ff57 72%);transform-origin:left;transition:transform .22s ease}.beach-tide-next{text-align:right}.beach-tide-next small{display:block;margin-top:2px;color:#c9e4e6;font-size:9px}.beach-callout[data-kind="bird"]{max-width:min(92%,520px);border:2px solid #fff1a8;border-radius:16px;background:#4b3a68;color:#fff;white-space:normal;text-align:center}@media(max-width:700px){.beach-live-hud{left:10px;right:10px;top:10px;display:block}.beach-health,.beach-tide-next{box-sizing:border-box;min-width:0;padding:7px 9px}.beach-health{width:calc(100% - 84px)}.beach-tide-next{width:min(210px,calc(100% - 36px));margin:7px auto 0;text-align:center}.beach-health b,.beach-tide-next b{font-size:10px}.beach-tide-next small{font-size:8px}.beach-callout{top:118px;max-width:calc(100% - 28px);white-space:normal;text-align:center}}@media(max-width:360px){.beach-health{width:calc(100% - 78px)}.beach-tide-next{width:min(194px,calc(100% - 24px))}}