/* One soft contact shadow for every loose tool; lifted tools stay equally subtle. */
#beach{--toy-light:brightness(1) saturate(1)}
[data-beach-light=dusk] #beach{--toy-light:brightness(.7) saturate(.4)}
.sand-tools{--toy-shadow:drop-shadow(-1px 2px 2px #59432c26);--toy-shadow-lifted:drop-shadow(-2px 4px 3px #59432c2e)}
.sand-tools.toy-tray{height:65px;gap:3px;padding:0 12px;bottom:calc(24px + env(safe-area-inset-bottom,0px));border-radius:18px;background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.sand-tools.toy-tray::before{content:none}
.toy-tray .sand-toy{position:relative;align-self:end;width:65px;height:95px;border-radius:12px 12px 0 0;background:transparent;overflow:visible}
.toy-tray .sand-toy img{width:64px;height:95px;object-fit:contain;pointer-events:none;transform-origin:50% 95%;transform:translateY(3px) rotate(var(--lean,-4deg));filter:var(--toy-light) var(--toy-shadow);transition:transform .32s cubic-bezier(.2,.8,.25,1.4),filter .25s}
.toy-tray .sand-toy:nth-child(2){--lean:5deg}.toy-tray .sand-toy:nth-child(3){--lean:-3deg}.toy-tray .sand-toy:nth-child(4){--lean:8deg}
.sand-tools.toy-tray .sand-toy:hover:not(:disabled),.sand-tools.toy-tray .sand-toy:active:not(:disabled){background:transparent;box-shadow:none;transform:none}
.toy-tray .sand-toy::after{content:none}
.toy-tray .sand-toy span{position:absolute;bottom:119px;left:50%;transform:translate(-50%,5px);background:#fff9ed;padding:5px 10px;border-radius:6px;font-size:11px;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .15s,transform .15s;box-shadow:0 3px 8px #594b3720}
.toy-tray .sand-toy:hover span,.toy-tray .sand-toy:focus-visible span{opacity:1;transform:translate(-50%,0)}
.toy-actions{border-left:1px solid #afa38b55;margin-left:9px;padding-left:7px;display:flex;flex-direction:column;gap:1px}
.toy-tray .toy-actions button,.toy-tray #clear-drawing{width:30px;height:27px;padding:0;border-radius:6px}
.toy-tray .toy-actions .icon{width:16px;height:16px}
.toy-tray .toy-hint{position:absolute;bottom:calc(100% + 52px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;letter-spacing:.2px;color:#514a3d;background:#fff7e6d9;padding:5px 11px;border-radius:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.toy-tray:focus-within .toy-hint{opacity:1}
#sand-drawing[data-tool=shovel]{cursor:url('assets/sand-toys/shovel-cursor.png') 48 100,crosshair}
#sand-drawing[data-tool=castle],#sand-drawing[data-tool=star]{cursor:crosshair}
@media(max-width:700px){.sand-tools.toy-tray{bottom:calc(30px + env(safe-area-inset-bottom,0px));height:58px;padding:0 7px;gap:0}.toy-tray .sand-toy{width:55px;height:84px}.toy-tray .sand-toy img{width:54px;height:84px}.toy-actions{margin-left:5px;padding-left:5px}.toy-tray .sand-toy span{bottom:105px}}
@media(prefers-reduced-motion:reduce){.toy-tray .sand-toy img,.toy-tray .sand-toy span,.toy-tray .toy-hint{transition:none}}

/* Keep the enlarged stick anchored at rest. */
.toy-tray .sand-toy[data-sand-tool=stick] img{transform-origin:50% 100%;transform:translateY(6px) rotate(-4deg) scale(1.8,1.25)}
/* Blender-rendered hollow toys: roomy hit areas and a consistent contact shadow. */
.toy-tray .sand-toy{width:73px;height:100px}
.toy-tray .sand-toy img{width:73px;height:100px;filter:var(--toy-light) var(--toy-shadow)}
.toy-tray .sand-toy[data-sand-tool=castle] img,.toy-tray .sand-toy[data-sand-tool=star] img{height:86px;width:78px}

.toy-tray .sand-toy span{bottom:104px}
@media(max-width:700px){.toy-tray .sand-toy{width:55px;height:86px}.toy-tray .sand-toy img{width:55px;height:86px}.toy-tray .sand-toy[data-sand-tool=castle] img,.toy-tray .sand-toy[data-sand-tool=star] img{width:59px;height:72px}}

/* The relief belongs to the beach surface, below every loose object. */
#shore{z-index:-2}
#sand-drawing{z-index:-1}
.finds,.beach-title,.shell,.pebble{z-index:1}
/* Keep instructions available to assistive technology without floating labels. */
.toy-tray .toy-hint{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.toy-tray .sand-toy span{display:none}

/* A real tool follows the scoop, dipping into the cut and lifting on release. */
#scooping-shovel{position:absolute;z-index:0;pointer-events:none;width:116px;height:139px;object-fit:contain;margin-left:-58px;margin-top:-121px;transform-origin:58px 121px;filter:var(--toy-light) drop-shadow(-2px 4px 3px #59432c2e);will-change:transform}
#scooping-shovel[hidden]{display:none}
#sand-drawing.scooping{cursor:none}
@media(prefers-reduced-motion:reduce){#scooping-shovel{display:none}}

/* Lift the object itself, leaving its hit area still and its background clear.
   Individual transforms preserve each tool's resting pose and stick scale. */
.toy-tray .sand-toy img{translate:0 0;rotate:0deg;transition:translate .42s cubic-bezier(.22,1,.36,1),rotate .42s cubic-bezier(.22,1,.36,1),filter .3s ease}
@media(hover:hover) and (pointer:fine){
  .toy-tray .sand-toy:hover img{translate:0 -10px;rotate:-7deg;filter:var(--toy-light) var(--toy-shadow-lifted)}
}
.toy-tray .sand-toy:focus-visible img{translate:0 -10px;rotate:-7deg;filter:var(--toy-light) var(--toy-shadow-lifted)}
@media(prefers-reduced-motion:reduce){
  .toy-tray .sand-toy img{transition:none}
  .toy-tray .sand-toy:hover img,.toy-tray .sand-toy:focus-visible img{translate:0 0;rotate:0deg}
}

/* Generous, tangible tools. Selection is a grounded shadow on the object. */
.sand-tools.toy-tray{height:110px;gap:8px}
.toy-tray .sand-toy{width:112px;height:148px}
.toy-tray .sand-toy[data-sand-tool=shovel]{left:-14px}
.toy-tray .sand-toy img{width:112px;height:148px}
.toy-tray .sand-toy[data-sand-tool=castle] img,
.toy-tray .sand-toy[data-sand-tool=star] img{width:120px;height:132px}
.toy-tray .sand-toy[aria-pressed=true]{
  --toy-shadow:drop-shadow(-3px 7px 5px #60432266);
  --toy-shadow-lifted:drop-shadow(-4px 11px 7px #60432266);
}
[data-beach-light=dusk] .toy-tray .sand-toy[aria-pressed=true]{
  --toy-shadow:drop-shadow(-3px 7px 5px #13152388);
  --toy-shadow-lifted:drop-shadow(-4px 11px 7px #13152388);
}
@media(max-width:700px){
  .sand-tools.toy-tray{height:92px;gap:3px}
  .toy-tray .sand-toy{width:clamp(62px,20vw,80px);height:118px}
  .toy-tray .sand-toy[data-sand-tool=shovel]{left:-10px}
  .toy-tray .sand-toy img{width:100%;height:118px}
  .toy-tray .sand-toy[data-sand-tool=castle] img,
  .toy-tray .sand-toy[data-sand-tool=star] img{width:105%;height:110px}
}

/* Light drawing cursors stay legible on the dusk sand. */
[data-beach-light=dusk] #sand-drawing:not([data-tool]),
[data-beach-light=dusk] #sand-drawing[data-tool=stick]{cursor:url('assets/sand-cursor-light.svg') 12 3,crosshair}
[data-beach-light=dusk] #sand-drawing[data-tool=castle],
[data-beach-light=dusk] #sand-drawing[data-tool=star]{cursor:url('assets/sand-crosshair-light.svg') 12 12,crosshair}