/* Shape Drop is a full game scene, independent of the shared menu-panel shell. */
#shape-drop[data-view='play']{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-image:none;border-radius:0;box-shadow:none;background:#72c8e9;padding:max(14px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));overflow:hidden;isolation:isolate;grid-template:none;gap:0!important}
#shape-drop[data-view='play'][open]{display:flex;flex-direction:column}
#shape-drop[data-view='play']::backdrop{background:#66b9d2;backdrop-filter:none}
#shape-drop .drop-scenery{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#6bc5ec}
#shape-drop .drop-scenery::before{content:'';position:absolute;inset:-2%;background:url('assets/garden-v2.webp') center 58%/cover no-repeat;animation:drop-garden-drift 24s ease-in-out infinite alternate;transform:translate3d(0,0,0)}
#shape-drop .drop-scenery::after{content:'';position:absolute;inset:0;background:linear-gradient(#176b9f28,transparent 23%,transparent 75%,#084c4644)}
#shape-drop .drop-motes{position:absolute;inset:0;z-index:1}
#shape-drop .drop-motes i{position:absolute;width:5px;height:5px;background:#fffac6;border-radius:50%;box-shadow:0 0 8px #faffbf;opacity:0;animation:drop-mote-float 10s ease-in-out infinite}
#shape-drop[data-paused='true'] .drop-scenery::before,#shape-drop[data-paused='true'] .drop-motes i{animation-play-state:paused}
#shape-drop .drop-play-hud{position:relative;flex:none;width:min(560px,100%);height:88px;margin:0 auto;display:flex;justify-content:center;align-items:center}
/* Reuse the exact pause artwork and size from Endless and Adventure. */
#shape-drop .drop-play-hud .drop-icon-pause{position:absolute;left:13px;top:14px;width:56px;height:56px;background:transparent url('assets/pause-v30.webp') center/contain no-repeat;border:0;border-radius:50%;box-shadow:none}
#shape-drop .drop-live-score{font-size:clamp(52px,15vw,76px);font-weight:1000;line-height:1;color:#fff9da;-webkit-text-stroke:2px #266b79;paint-order:stroke fill;text-shadow:0 4px 0 #225d75,0 7px 14px #10466755;font-variant-numeric:tabular-nums;max-width:calc(100% - 138px);overflow:hidden;text-overflow:ellipsis}
#shape-drop[data-view='play'] .drop-stage{position:relative;flex:1;min-height:0;width:min(560px,100%);height:auto;margin:0 auto;grid-column:auto;grid-row:auto;overflow:visible}
#shape-drop[data-view='play'] .drop-canvas{border-radius:0;outline-offset:-3px}
#shape-drop .drop-gesture-hint{flex:none;min-height:25px;line-height:25px;margin:4px 0 0;color:#fff;font-size:12px;font-weight:900;text-shadow:0 1px 4px #114b45,0 1px 2px #114b45;pointer-events:none}
#shape-drop[data-view='play'] .drop-overlay{border-radius:0;background:#124d5570;backdrop-filter:blur(5px);padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom))}
#shape-drop[data-view='play'] .drop-panel{width:min(340px,100%);border:2px solid #ffffffd9;border-image:none;border-radius:30px;background:#f3fff4f5;padding:28px 20px;gap:15px;box-shadow:0 18px 50px #154c4566;color:#276c63}
#shape-drop[data-view='play'] .drop-panel h2{font-size:24px;color:#276c63;text-shadow:none}
#shape-drop[data-view='play'] .drop-result-score{font-size:78px;color:#2b8073;line-height:1}
#shape-drop[data-view='play'] .drop-result-best{font-size:14px;color:#63877a}
#shape-drop[data-view='play'] .drop-panel .drop-action{aspect-ratio:auto;min-height:52px;width:100%;background:#318b77;color:#fff;border:0;border-radius:18px;font-size:19px;text-shadow:none;padding:12px 20px;box-shadow:0 3px 0 #1b6756}
#shape-drop[data-view='play'] .drop-panel .drop-secondary{width:100%;border:1px solid #a9cbbd;border-radius:18px;background:transparent;color:#367363;box-shadow:none;font-size:16px}
#shape-drop[data-view='play'] .drop-reward{padding:7px 15px;font-size:13px;background:#e2f2d9;color:#59783f}
#shape-drop .drop-preview-board{background:linear-gradient(#f3fff3e8,#d9f0d9ee),url('assets/garden-v2.webp') center/cover;border:3px solid #71a995;box-shadow:none}
#shape-drop .drop-preview-trail{display:none}
@keyframes drop-garden-drift{from{transform:translate3d(-.7%,0,0) scale(1.02)}to{transform:translate3d(.7%,-.5%,0) scale(1.035)}}
@keyframes drop-mote-float{0%,100%{opacity:0;transform:translate3d(0,12px,0)}35%,65%{opacity:.6}85%{opacity:0;transform:translate3d(12px,-38px,0)}}
@media(max-height:650px){#shape-drop .drop-play-hud{height:76px}#shape-drop .drop-live-score{font-size:54px}#shape-drop .drop-play-hud .drop-icon-pause{top:8px}#shape-drop .drop-gesture-hint{font-size:11px;min-height:20px;line-height:20px}#shape-drop[data-view='play'] .drop-panel{padding:18px;gap:10px}}
@media(orientation:landscape) and (max-height:550px){#shape-drop[data-view='play']{padding-top:6px;padding-bottom:6px}#shape-drop .drop-play-hud{position:absolute;left:max(12px,env(safe-area-inset-left));top:12px;width:150px;height:150px;flex-direction:column;justify-content:flex-end;z-index:2}#shape-drop .drop-play-hud .drop-icon-pause{left:47px;top:0}#shape-drop .drop-live-score{max-width:100%;font-size:54px}#shape-drop[data-view='play'] .drop-stage{width:calc(100% - 330px);min-width:180px;flex:1}#shape-drop .drop-gesture-hint{position:absolute;right:14px;top:45%;width:145px;white-space:normal;line-height:1.7;margin:0}}
@media(prefers-reduced-motion:reduce){#shape-drop .drop-scenery::before,#shape-drop .drop-motes i{animation:none}}
body.reduce-motion #shape-drop .drop-scenery::before,body.reduce-motion #shape-drop .drop-motes i{animation:none}

#shape-drop .mini-run-coins{position:absolute;right:9px;top:33px}
@media(max-height:650px){#shape-drop .mini-run-coins{top:23px}}
@media(orientation:landscape) and (max-height:550px){#shape-drop .mini-run-coins{position:static;margin-top:8px}}