/* The page is the shore. All signs sit in front of the sky, not above it. */
.beach .museum-header{position:fixed;inset:0 0 auto;height:76px;padding:12px 20px;pointer-events:none;z-index:8;justify-content:flex-end;background:none}
.beach .museum-header .mobile-toggle{pointer-events:auto}
.beach .beach-page{padding:0;margin:0}
.beach .beach-scene{height:100svh;min-height:520px;margin:0}
.beach .beach-heading{position:absolute;top:max(12px,env(safe-area-inset-top));left:22px;right:100px;z-index:4;display:block;padding:0;margin:0;max-width:none;pointer-events:none}
.beach .pocket-stones{display:flex;flex-wrap:wrap;gap:5px 12px;min-height:44px;width:fit-content;max-width:100%;padding:0;margin:0;pointer-events:auto}
.beach .pocket-slot{width:40px;height:44px;flex:0 0 40px;padding:0}
.beach .pocket-slot .stone-object{width:40px;height:40px}
.beach .pocket-stones:hover .pocket-slot{transform:translateY(2px)}
.beach .beach-zoom{margin:0}
.shore-water.shore-water-v22{top:280px;height:240px}
.shore-gull{position:absolute;left:0;top:0;width:64px;height:auto;z-index:1;pointer-events:none;opacity:.86;will-change:transform}
.beach #stone-dialog{padding:46px 24px 125px;touch-action:pan-y pinch-zoom}
.beach #stone-dialog #stone-reading{min-height:calc(100svh - 190px)}
.beach #stone-dialog .reading-image{padding:0;cursor:pointer;transition:transform .3s ease;touch-action:manipulation}
.beach #stone-dialog .reading-image:hover{transform:translateY(4px)}
.beach #stone-dialog .reading-verse{font-size:clamp(16px,2.35svh,20px)}
.reading-neighbours{position:relative;display:grid;grid-template-columns:64px minmax(80px,240px) 64px;justify-content:center;align-items:center;gap:24px;max-width:520px;margin:24px auto 0;min-height:64px}
.reading-neighbours>button{min-width:44px;min-height:56px;padding:4px}
#stone-prev{grid-column:1}#show-collection{grid-column:2}#stone-next{grid-column:3}
.reading-neighbours .stone-object{width:48px;height:48px}.reading-neighbours img{width:100%;height:100%;object-fit:contain}
.reading-handful{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px}
.reading-handful .pocket-slot{width:20px;height:24px;flex-basis:20px}.reading-handful .pocket-slot .stone-object{width:20px;height:24px}
.beach #tray-dialog{position:fixed;inset:0;margin:0;padding:65px 24px 35px;width:100%;height:100svh;max-height:100dvh;max-width:100%;border:0;box-shadow:none;background:radial-gradient(ellipse at center,#fffffff0 0%,#ffffffe0 30%,#ffffff73 58%,#fff0 90%);color:#293c35;overflow:auto}
.beach #tray-dialog::backdrop{background:#e6ebe526;backdrop-filter:blur(3px)}
.beach .tray-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;gap:24px 38px;max-width:700px;min-height:calc(100svh - 210px);margin:0 auto}
.beach .tray-grid button{width:90px;height:90px;flex:0 0 90px;padding:0;aspect-ratio:1}
.beach .tray-grid button:nth-child(3n+1){margin-top:24px}.beach .tray-grid button:nth-child(3n+2){margin-bottom:18px}
.beach #tray-dialog .actions{justify-content:center;gap:30px;opacity:.65;margin:24px auto 0}.beach #tray-dialog .actions:focus-within,.beach #tray-dialog .actions:hover{opacity:1}
.beach #tray-status{max-width:600px;margin:24px auto;font-size:14px}.beach #tray-empty{text-align:center}
.shore-return:focus-visible{position:fixed;left:20px;top:20px;width:auto;height:auto;clip-path:none;overflow:visible;padding:10px 16px;background:white;z-index:9}
@media(max-width:700px){.beach .museum-header{padding:10px 12px}.beach .beach-heading{left:12px;right:78px;top:8px}.beach .pocket-stones{gap:1px 5px}.beach .pocket-slot{width:32px;height:34px;flex-basis:32px}.beach .pocket-slot .stone-object{width:32px;height:34px}.beach #stone-dialog{padding:42px 16px 70px}.beach #stone-dialog #stone-reading{min-height:calc(100svh - 185px);gap:24px}.beach #stone-dialog .reading-image{flex-basis:82px}.beach #stone-dialog .reading-image img{width:82px;height:82px}.beach #stone-dialog .reading-text{gap:16px}.reading-neighbours{grid-template-columns:48px minmax(80px,180px) 48px;gap:10px;margin-top:10px}.reading-handful .pocket-slot{width:17px;height:22px;flex-basis:17px}.reading-handful .pocket-slot .stone-object{width:17px;height:22px}.beach .tray-grid{gap:14px 22px}.beach .tray-grid button{width:68px;height:68px;flex-basis:68px}}
@media(prefers-reduced-motion:reduce){.shore-gull{display:none}.beach #stone-dialog .reading-image{transition:none}}
html[data-motion=reduce] .shore-gull{display:none}