.beach-game{--beach-ink:#f2ead7;--beach-coral:#d49b68;min-height:100dvh;color:var(--beach-ink);font-family:var(--font-body);background-color:#192f2d;background-image:linear-gradient(110deg,#10231f12,#10231f3b),url(/games/beach-change/art/bookcloth-v2.webp);background-position:50%;background-size:cover;padding:12px clamp(12px,2vw,32px) 24px;position:relative}.beach-game *{box-sizing:border-box}.beach-game h1{font-family:Georgia,Times New Roman,serif;font-weight:500}.beach-game button,.beach-game summary{cursor:pointer}.beach-game button{min-height:48px;font:inherit;border:0;border-radius:10px;padding:12px 24px;font-weight:650}.beach-game button:disabled{cursor:wait;opacity:.55}.beach-game :focus-visible{outline-offset:5px;outline:3px solid #e4ba80}.beach-game h1:focus{outline:none}.beach-toolbar{z-index:3;position:absolute;top:16px;right:clamp(12px,2vw,32px)}.beach-toolbar nav{gap:10px;display:flex}.beach-toolbar nav button{width:44px;min-height:44px;color:var(--beach-ink);background:#13292599;border:1px solid #e1d4af40;padding:0;font-size:25px}.beach-game .beach-primary{background:var(--beach-coral);color:#1c302a;border:1px solid #f1c89a80}.beach-game .beach-secondary{color:#24372e;background:#edf0e4;border:1px solid #9cae9d}.beach-eyebrow{color:#d6bd91;letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:11px;font-weight:650;line-height:1.6}.beach-intro{grid-template-columns:.8fr 1.2fr;align-items:center;gap:48px;max-width:1440px;margin:75px auto 35px;display:grid}.beach-intro h1{letter-spacing:-.045em;margin:18px 0 26px;font-size:clamp(38px,4.6vw,72px);line-height:1.08}.beach-intro-copy>p:not(.beach-eyebrow){max-width:510px;font-size:20px;line-height:1.65}.beach-intro .beach-primary{margin:18px 0}.beach-intro details{max-width:490px;margin-top:24px;font-size:14px;line-height:1.7}.beach-intro summary{text-underline-offset:5px;text-decoration:underline}.beach-intro-art{background:#263d34;border:3px solid #eee1c5;border-radius:14px;overflow:hidden;box-shadow:0 22px 65px #07181370}.beach-picture{aspect-ratio:3/2;width:100%;position:relative;overflow:hidden}.beach-picture>img:first-child{object-fit:cover;width:100%;height:100%;display:block}.beach-picture .beach-prop{visibility:hidden;object-fit:contain;pointer-events:none;width:24%;height:auto;position:absolute;top:49%;left:47%}.beach-prop[data-visible=true]{visibility:visible}.beach-picture--octopus .beach-prop{width:20%;top:38%;left:49%}.beach-picture--crab .beach-prop{width:28%;top:41%;left:49%}.beach-play{max-width:1600px;margin:auto}.beach-scene-column{min-width:0}.beach-round-row{align-items:center;gap:22px;min-height:48px;padding:0 124px 0 5px;font-size:13px;font-weight:800;display:flex}.beach-round-row>span{white-space:nowrap}.beach-muted{color:#bdc8b5}.beach-progress{gap:8px;display:flex}.beach-progress span{background:#d6dcc34d;border-radius:50%;width:6px;height:6px}.beach-progress .current{background:#ecc48d;box-shadow:0 0 0 4px #ecc48d1c}.beach-progress .done{background:#a9b798}.beach-stage{isolation:isolate;border:3px solid #eee1c5;border-radius:14px;width:100%;margin:auto;position:relative;overflow:hidden;box-shadow:0 16px 45px #07181366}.beach-scene-tag{color:#2b3f33;background:#f3ead8f2;border-radius:6px;padding:8px 15px;font-size:12px;font-weight:650;position:absolute;top:14px;left:14px}.beach-response{max-width:940px;margin:18px auto 0;padding:18px 8px}.beach-prompt{text-align:center}.beach-prompt h1{letter-spacing:-.02em;margin:10px 0 18px;font-size:clamp(29px,2.6vw,38px);line-height:1.23}.beach-prompt>p:last-child{margin:10px 0 20px;font-size:15px;line-height:1.6}.beach-prompt .beach-sentence-cue{color:#d6bd91;margin:20px 0 0;font-size:16px}.beach-navigation{flex-direction:column;justify-content:center;align-items:center;min-height:80px;margin-top:26px;display:flex}.beach-game .beach-next{color:#24392f;background:#eee1c4;border:1px solid #fff4da;border-radius:50%;place-items:center;width:72px;height:72px;padding:0;display:grid;box-shadow:0 5px 16px #081b1840}.beach-next svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:30px;height:30px}.beach-next:hover:not(:disabled){background:#fff1d3}.beach-loading{color:#c1c6b2;margin:12px 0 0;font-size:12px}.beach-tools{border-top:1px solid #d6bd9133;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;margin-top:24px;padding-top:14px;display:flex}.beach-game .beach-tool-button{color:#e3dbc7;background:0 0;align-items:center;gap:8px;padding:8px 3px;font-size:13px;font-weight:500;display:inline-flex}.beach-tool-button span{color:#d6bd91;font-size:19px}.beach-tool-button:hover{text-underline-offset:5px;text-decoration:underline}.beach-adult-hint{color:#24392f;text-align:left;background:#f1e8d3;border:1px solid #ede0c1;border-radius:7px;max-width:650px;margin:14px auto 0;padding:17px}.beach-adult-hint p{margin:0;font-size:16px;line-height:1.55}.beach-adult-hint .beach-short-answer{color:#77512e;margin-bottom:8px;font-size:14px;font-weight:650}.beach-wave{z-index:2;pointer-events:none;will-change:transform;animation:beach-wave-in var(--beach-wave-duration) ease-out both;position:absolute;inset:-30% -40%}.beach-wave svg{width:100%;height:100%;display:block}.beach-wave[data-revealing=true]{animation-name:beach-wave-out;animation-timing-function:ease-in-out}.beach-game[data-wave-paused=true] .beach-wave{animation-play-state:paused}@keyframes beach-wave-in{0%{transform:translate(-112%,-7%)rotate(-8deg)}90%,to{transform:translate(0,0)rotate(0)}}@keyframes beach-wave-out{0%{transform:translate(0,0)rotate(0)}15%{transform:translate(4%)rotate(3deg)}90%,to{transform:translate(112%,7%)rotate(8deg)}}.beach-finale{text-align:center;max-width:1200px;margin:80px auto 30px}.beach-finale h1{letter-spacing:-.03em;font-size:clamp(32px,4vw,52px)}.beach-finale>p{line-height:1.6}.beach-friends{justify-content:center;gap:20px;margin:35px 0;display:flex}.beach-friends img{border:3px solid #eee1c5;border-radius:14px;width:30%;height:auto}.beach-notice{z-index:4;color:#24392f;background:#f1e8d3;border-radius:10px;max-width:900px;margin:60px auto 12px;padding:14px;position:relative}.beach-gate{color:#24392f;background:#f1e8d3;border-radius:16px;max-width:440px;padding:30px}.beach-gate form>div{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.beach-gate input{max-width:100%;font:inherit;border:1px solid #8ba6b0;border-radius:12px;margin:10px 0;padding:12px;display:block}.beach-gate-error{color:#a34131;display:block}@media (min-width:1100px),(min-width:740px) and (max-height:700px) and (orientation:landscape){.beach-play{grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:28px;display:grid}.beach-round-row{padding-right:0}.beach-stage{max-width:min(100%,150dvh - 132px)}.beach-response{width:100%;margin:48px 0 0;padding:24px 8px}.beach-prompt h1{font-size:33px}.beach-prompt>p:last-child{font-size:14px}}@media (min-width:740px) and (max-width:1099px) and (max-height:700px) and (orientation:landscape){.beach-play{grid-template-columns:minmax(0,1fr) 250px;gap:18px}.beach-response{padding:14px}.beach-prompt h1{font-size:24px}}@media (max-width:760px){.beach-intro{flex-direction:column-reverse;gap:25px;margin:65px auto 15px;display:flex}.beach-intro-art{border-width:3px;border-radius:14px;width:min(100%,560px)}.beach-intro-copy{text-align:center;width:100%}.beach-intro h1{margin:13px 0 20px;font-size:42px}.beach-intro-copy>p:not(.beach-eyebrow){margin:0 auto;font-size:16px;line-height:1.6}.beach-intro details{text-align:left}.beach-round-row{gap:15px;font-size:12px}.beach-progress{gap:6px}.beach-progress span{width:7px;height:7px}.beach-stage{border-width:3px;border-radius:12px}.beach-scene-tag{padding:6px 10px;font-size:10px;top:8px;left:8px}.beach-response{margin-top:16px;padding:18px 10px}.beach-prompt h1{font-size:30px}.beach-prompt>p:last-child{font-size:14px}.beach-navigation{margin-top:20px}.beach-tools{margin-top:18px}.beach-finale{margin:70px auto 20px}.beach-friends{gap:7px}.beach-friends img{border-width:3px;border-radius:18px}}@media (prefers-reduced-motion:reduce){.beach-wave{will-change:opacity;animation-name:beach-wave-soft-in}.beach-wave[data-revealing=true]{animation-name:beach-wave-soft-out}@keyframes beach-wave-soft-in{0%{opacity:0}60%,to{opacity:1}}@keyframes beach-wave-soft-out{0%,15%{opacity:1}80%,to{opacity:0}}}