/* 小物の山（public/pile.js）。フッターのすぐ上、画面の幅いっぱい。小物はフッターの線の上に積もる。
   積もった小物は帯の中だけに描く。canvas は帯の上へはみ出す（高さと位置は pile.js が決める）：降ってくる間は画面のいちばん上まで、
   そのあとはパソコンだけ少し（投げた小物が上へ飛び出して見えるように）。はみ出した所は押せない（pointer-events: none）。JS がないときは出さない */
.pile {
  position: relative;
  height: clamp(360px, 30vw, 460px);
  margin-top: 24px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* ダブルタップで拡大しない（続けて押すと、ぽんぽん跳ねる）。スクロールはできる */
  touch-action: manipulation;
}
.pile canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pile.is-over { cursor: grab; }
.pile.is-grabbing { cursor: grabbing; }
html:not(.js) .pile, .pile.is-failed { display: none; }
/* スマホは帯を大きく（画面の高さの 80%。低い画面でも 480px）。小物をつかんで遊べる広さに */
@media (max-width: 699px) {
  .pile { height: max(480px, 80vh); height: max(480px, 80svh); margin-top: 32px; }
}