/* dig.css — 重機演出の固定層とタイルの状態
   z-index は body 直下の同一スタッキングコンテキストで
   土 30/31 < 置かれたタイル 35 < 運搬中タイル 36 < 重機の部品 40〜 < 粒子 52 < ヘッダー 80 */

.dg-layer { pointer-events: none; visibility: hidden; }
.dg-layer.dg-ready { visibility: visible; }

.dg-soil {
  position: fixed; left: 0; right: 0; bottom: 0; height: 100px; z-index: 30;
  background: #1a1411 url("dig/soil.webp") center top / auto 100% repeat-x;
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.55);
}
.dg-soil::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.55)); }

/* 左側は一段高い土の段（右端が斜めに落ちる） */
.dg-soil-left {
  position: fixed; left: 0; bottom: 0; height: 160px; width: 40vw; z-index: 31;
  background: #1a1411 url("dig/soil.webp") center top / auto 100% repeat-x;
  clip-path: polygon(0 0, calc(100% - 90px) 0, 100% 100%, 0 100%);
  filter: drop-shadow(12px 0 24px rgba(0, 0, 0, 0.6));
}
.dg-soil-left::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.55)); }

.dg-machine { display: contents; }

.dg-piece {
  position: fixed; left: 0; top: 0; transform-origin: 0 0; will-change: transform;
  user-select: none; -webkit-user-drag: none; max-width: none;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.45));
}
.dg-base { z-index: 40; }
.dg-boom { z-index: 41; }
.dg-stickCylRod { z-index: 42; }
.dg-stickCylBarrel { z-index: 43; }
.dg-stick { z-index: 44; }
.dg-bucketCylRod { z-index: 45; }
.dg-bucketCylBarrel { z-index: 46; }
.dg-bucket { z-index: 48; }
.dg-boomCylRod { z-index: 49; }
.dg-boomCylBarrel { z-index: 50; }

/* ロッド（クロームの棒）は CSS で描く。長さが自由に変わる */
.dg-rod {
  position: fixed; left: 0; top: 0; transform-origin: 0 0; will-change: transform, width;
  border-radius: 999px;
  background: linear-gradient(to bottom, #5a5d62 0%, #d9dde3 22%, #ffffff 38%, #b8bcc2 55%, #6f7378 80%, #3a3d41 100%);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35);
}
.dg-rod::before {
  content: ""; position: absolute; left: -0.35em; top: 50%; width: 1.9em; height: 1.9em;
  transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a4d52, #1c1e21 60%, #0d0e10 100%);
  box-shadow: inset 0 0 0 0.18em #2a2c30, 0 4px 8px rgba(0, 0, 0, 0.4);
}

.dg-particles { position: fixed; left: 0; top: 0; z-index: 52; pointer-events: none; }

/* ---------- タイルの状態 ---------- */
[data-dig-root] .tile { position: relative; transform-origin: 50% 50%; }
[data-rig="on"] .tile[data-tile]:not([data-state]),
[data-rig="on"] .tile[data-state="hidden"] { visibility: hidden; }
[data-rig="on"] .tile[data-state="flight"] {
  z-index: 36; will-change: transform;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 40px 80px rgba(0, 0, 0, 0.7);
}
[data-rig="on"] .tile[data-state="placed"] { z-index: 35; }

@media (prefers-reduced-motion: reduce) {
  [data-rig="on"] .tile { visibility: visible !important; }
}