/* lane-drag.css: owned by the drag lane. Placement-feel visuals: preview scale-in, rotate pulse, bag ghost contents,
   refusal label + bin head-shake, touch rotate button. JS skips the preview classes under reduced motion; the media query covers the OS flag. */
@keyframes pvIn { from { transform: scale(.55); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes pvPulse { 0% { transform: scale(1); } 40% { transform: scale(1.18); filter: brightness(1.5); } 100% { transform: scale(1); } }
.preview.pv-in { animation: pvIn 90ms ease-out; }
.preview.pv-pulse { animation: pvPulse 160ms ease-out; }

/* a loaded bag's ghost: contents ride on top at their relative cells */
.piece.dragging.has-contents .ghost-part { position: absolute; pointer-events: none; z-index: 4; opacity: 1; filter: none; }

@keyframes binShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-.6deg); } 45% { transform: translateX(6px) rotate(.6deg); } 70% { transform: translateX(-3px); } }
[data-zone="storage"].bin-shake { animation: binShake 380ms ease-in-out; }

@keyframes dragLabelUp { from { transform: translate(-50%, 0); opacity: 0; } 15% { opacity: 1; } to { transform: translate(-50%, -26px); opacity: 0; } }
.drag-label { position: fixed; z-index: 900; pointer-events: none; transform: translate(-50%, 0); padding: 4px 10px; border-radius: 999px;
  background: rgba(24, 14, 8, .92); color: #ffd9a8; border: 1px solid #a8532e; font: 700 13px/1.2 system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .55); animation: dragLabelUp 1000ms ease-out forwards; }

/* touch: persistent rotate button while an item is held (a second-finger tap on it rotates) */
.drag-rotate-btn { position: fixed; z-index: 900; right: max(16px, env(safe-area-inset-right)); bottom: max(96px, calc(env(safe-area-inset-bottom) + 80px));
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid #c9a24a; background: rgba(32, 20, 10, .92); color: #ffe7b0;
  font-size: 32px; line-height: 1; display: grid; place-items: center; padding: 0; touch-action: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .65); }
.drag-rotate-btn:active { background: #5a3a14; transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  .preview.pv-in, .preview.pv-pulse, [data-zone="storage"].bin-shake { animation: none; }
  .drag-label { animation: none; transform: translate(-50%, 0); }
}

/* ware ghost over a valid board spot: a price tag on the ghost (data-buy = "Buy · 4g" | "Need 4g") */
.piece.dragging[data-buy]::after { content: attr(data-buy); position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px);
  white-space: nowrap; font: bold 12px/1 var(--font-ui, system-ui, sans-serif); color: #fff8e6; background: rgba(28,16,6,.92);
  border: 1px solid #c9a24a; border-radius: 6px; padding: 4px 7px; pointer-events: none; z-index: 5; text-shadow: 0 1px 0 #000; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.piece.dragging.cant-afford[data-buy]::after { color: #ffb3a7; border-color: #a33; }
@media (pointer: coarse) { .piece.dragging[data-buy]::after { transform: translate(-50%, -10px); font-size: 13px; } }