/* v19 — fixed full-scene excavation frames and a hand-held photo shovel.
   The grave is never represented by a rectangular card. Every excavation
   layer is a full-size transparent overlay aligned with the base photograph. */

.app {
  --hole-first-opacity: 0;
  --hole-shallow-opacity: 0;
  --hole-medium-opacity: 0;
  --hole-deep-opacity: 0;
  --pile-left-photo-opacity: 0;
  --pile-right-photo-opacity: 0;
  --pile-left-photo-offset: 18px;
  --pile-right-photo-offset: 18px;
  --photo-depth-shade: 0;
}

.game-stage {
  background: #050607;
  overflow: clip;
}

.game-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050607;
  transform: translateZ(0);
  transform-origin: 50% 64%;
}

.game-art__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.game-art__base {
  z-index: 0;
  filter: saturate(.83) contrast(1.045) brightness(.93);
}

.grave-inscriptions {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  display: block;
  width: max(100%, calc(100dvh * 1.94924));
  height: auto;
  aspect-ratio: 1536 / 788;
  overflow: visible;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
}

.grave-inscription {
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: rgba(9, 11, 10, .88);
  border-radius: 42% 38% 45% 39% / 24% 27% 31% 28%;
  text-align: center;
  text-shadow: 0 1px rgba(185, 188, 178, .12), 0 -1px rgba(0, 0, 0, .2);
}

.grave-inscription::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("/assets/img/dig-stage-00.webp?v=20260720T201831") var(--patch-background-position) / var(--patch-background-size) no-repeat;
  filter: blur(2.8px) saturate(.83) contrast(1.045) brightness(.9);
}

.grave-inscription strong,
.grave-inscription small {
  position: relative;
  z-index: 1;
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .65px;
  opacity: .9;
}

.grave-inscription strong {
  max-width: 88%;
  font-size: clamp(8px, max(.64vw, 1.2vh), 12px);
}

.grave-inscription small {
  margin-top: 6%;
  font-size: clamp(7px, max(.52vw, .98vh), 10px);
  font-weight: 600;
  letter-spacing: .45px;
  opacity: .74;
}

.grave-inscription--near-left {
  --patch-background-size: 1562.5% 961.54%;
  --patch-background-position: 2.3% 51.23%;
  left: 2.15%;
  top: 45.9%;
  width: 6.4%;
  height: 10.4%;
  transform: rotate(-4deg);
}

.grave-inscription--far-left {
  --patch-background-size: 2816.9% 1265.82%;
  --patch-background-position: 34.06% 33.44%;
  left: 32.85%;
  top: 30.8%;
  width: 3.55%;
  height: 7.9%;
  transform: rotate(-1deg);
}

.grave-inscription--center {
  --patch-background-size: 2040.82% 1219.51%;
  --patch-background-position: 47.48% 33.39%;
  left: 45.15%;
  top: 30.65%;
  width: 4.9%;
  height: 8.2%;
}

.grave-inscription--far-right {
  --patch-background-size: 1904.76% 1162.79%;
  --patch-background-position: 69.6% 38.68%;
  left: 65.95%;
  top: 35.35%;
  width: 5.25%;
  height: 8.6%;
  transform: rotate(3deg);
}

.grave-inscription--near-right {
  --patch-background-size: 1526.72% 934.58%;
  --patch-background-position: 97.43% 51.62%;
  left: 91.05%;
  top: 46.1%;
  width: 6.55%;
  height: 10.7%;
  transform: rotate(5deg);
}

.grave-inscription--near-left strong,
.grave-inscription--near-right strong {
  font-size: clamp(10px, max(.78vw, 1.48vh), 15px);
}

.grave-inscription--near-left small,
.grave-inscription--near-right small {
  font-size: clamp(8px, max(.62vw, 1.16vh), 12px);
}

.game-art__hole {
  z-index: 2;
  opacity: 0;
  filter: saturate(.9) contrast(1.045) brightness(.96);
  transition: opacity 150ms linear;
  will-change: opacity;
}

.game-art__hole--first { opacity: var(--hole-first-opacity); }
.game-art__hole--shallow { opacity: var(--hole-shallow-opacity); }
.game-art__hole--medium { opacity: var(--hole-medium-opacity); }
.game-art__hole--deep { opacity: var(--hole-deep-opacity); }

.game-art__pile {
  z-index: 3;
  opacity: 0;
  filter: saturate(.88) contrast(1.055) brightness(.92);
  transition: opacity 180ms linear, transform 210ms cubic-bezier(.2,.72,.2,1);
  will-change: opacity, transform;
}

.game-art__pile--left {
  opacity: var(--pile-left-photo-opacity);
  transform: translate3d(0, var(--pile-left-photo-offset), 0);
}

.game-art__pile--right {
  opacity: var(--pile-right-photo-opacity);
  transform: translate3d(0, var(--pile-right-photo-offset), 0);
}

.game-art__depth-shade {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 61%;
  width: min(58vw, 850px);
  height: min(46vh, 430px);
  border-radius: 48%;
  opacity: var(--photo-depth-shade);
  background:
    radial-gradient(ellipse at 50% 52%, rgba(0,0,0,.78) 0 16%, rgba(0,0,0,.42) 38%, rgba(0,0,0,.08) 67%, transparent 76%);
  transform: translate3d(-50%, -39%, 0);
  filter: blur(4px);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.game-art__vignette {
  position: absolute;
  z-index: 11;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), transparent 24%, transparent 70%, rgba(0,0,0,.32)),
    radial-gradient(ellipse at 50% 55%, transparent 38%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.55) 112%);
  pointer-events: none;
}

.app[data-state="playing"] .scene,
.app[data-state="finishing"] .scene,
.app[data-state="finished"] .scene {
  opacity: 0;
  transition: opacity 350ms ease;
}

.dig-canvas {
  z-index: 11 !important;
  visibility: visible !important;
  opacity: .78 !important;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.game-stage.is-impacting .game-art {
  animation: ground-impact-v20 220ms cubic-bezier(.2, .72, .2, 1);
}

@keyframes ground-impact-v20 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  34% { transform: translate3d(-.8px, 1.8px, 0) scale(1.0012); }
  62% { transform: translate3d(.6px, -.5px, 0) scale(1.0005); }
}

.grave-zone {
  z-index: 12;
  left: 50%;
  bottom: -2%;
  width: min(96vw, 1320px);
  height: min(79vh, 860px);
  cursor: none;
}

.grave-zone::before,
.grave-zone::after,
.grave-ground,
.grave-mouth,
.grave-shaft,
.grave-rim,
.tool-marks,
.footprints,
.dirt-pile {
  visibility: hidden !important;
  opacity: 0 !important;
  display: block !important;
  animation: none !important;
  transition: none !important;
}

.target-spot {
  z-index: 15;
  width: 46px;
  height: 34px;
  opacity: .12;
  filter: blur(.1px);
  transition: left 420ms ease, top 420ms ease, opacity 180ms ease;
}

.target-spot__ring {
  border-color: rgba(214, 139, 83, .35);
  box-shadow: 0 0 18px rgba(202, 91, 47, .12), inset 0 0 10px rgba(0,0,0,.4);
}

.target-spot__core {
  background: rgba(223, 104, 58, .34);
  box-shadow: 0 0 14px rgba(223, 104, 58, .28);
}

.app[data-has-dug="true"] .target-spot { opacity: .07; }

.soil-clod {
  width: calc(var(--particle-size) * 1.65);
  height: calc(var(--particle-size) * 1.08);
  box-shadow:
    inset 1px 1px 2px rgba(171, 118, 70, .14),
    inset -1px -1px 2px rgba(0, 0, 0, .22),
    0 3px 5px rgba(0, 0, 0, .3);
}

.soil-clod::before {
  width: 26%;
  height: 32%;
}

.soil-clod::after {
  width: 22%;
  height: 28%;
}

/* The photographic shovel follows the pointer. The image contains the hand,
   forearm, shaft and blade, so the stroke reads as one connected body rather
   than several unrelated vector blocks. */
.shovel-anchor {
  z-index: 28;
  width: clamp(225px, 25vw, 390px) !important;
  height: auto !important;
  aspect-ratio: 443 / 589;
  transform:
    translate3d(var(--shovel-x), calc(var(--shovel-y) + var(--shovel-reach)), 0)
    rotate(var(--shovel-angle));
  transform-origin: 54% 77%;
  filter: none !important;
  /* The moving tool must be allowed to paint outside its resting box.
     `contain: paint` clipped the blade during the throw, leaving only a hand
     on screen and making the stroke look like a rigid rectangular sprite. */
  contain: layout;
  overflow: visible;
}

.shovel-anchor::before {
  display: none !important;
}

.shovel-tool {
  --shovel-stroke-duration: 690ms;
  position: relative;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0) rotate(0deg);
  transform-origin: 58% 78% !important;
  backface-visibility: hidden;
  will-change: transform, filter;
}

.shovel-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  filter: drop-shadow(9px 15px 11px rgba(0,0,0,.5));
  transform-origin: 58% 78%;
  clip-path: inset(0 0 0 0);
  will-change: transform, clip-path;
  pointer-events: none;
  -webkit-user-drag: none;
}

.shovel-svg {
  visibility: hidden !important;
  opacity: 0 !important;
}

.shovel-load-photo {
  position: absolute;
  z-index: 4;
  left: 8%;
  top: 7%;
  width: 43%;
  height: 18%;
  opacity: 0;
  background: url("/assets/img/shovel-soil-load.webp") 50% 54% / 100% 100% no-repeat;
  clip-path: polygon(3% 79%, 9% 48%, 24% 22%, 44% 7%, 66% 11%, 86% 35%, 98% 69%, 83% 93%, 19% 96%);
  filter: drop-shadow(2px 5px 4px rgba(0,0,0,.48));
  transform-origin: 58% 68%;
  pointer-events: none;
  will-change: transform, opacity;
}

.shovel-load-photo::before,
.shovel-load-photo::after,
.shovel-load-photo > i {
  display: none !important;
}

.shovel-tool.is-digging-left,
.shovel-tool.is-digging-right {
  animation-duration: var(--shovel-stroke-duration) !important;
  animation-timing-function: cubic-bezier(.18,.7,.16,1) !important;
  animation-fill-mode: both !important;
}

.shovel-tool.is-digging-left { animation-name: shovel-body-left-v19 !important; }
.shovel-tool.is-digging-right { animation-name: shovel-body-right-v19 !important; }


.shovel-tool.is-digging-left .shovel-photo {
  animation: shovel-photo-left-v19 var(--shovel-stroke-duration) linear both;
}

.shovel-tool.is-digging-right .shovel-photo {
  animation: shovel-photo-right-v19 var(--shovel-stroke-duration) linear both;
}

.shovel-tool.is-digging-left .shovel-load-photo {
  animation: shovel-load-left-v19 var(--shovel-stroke-duration) linear both;
}

.shovel-tool.is-digging-right .shovel-load-photo {
  animation: shovel-load-right-v19 var(--shovel-stroke-duration) linear both;
}

@keyframes shovel-body-left-v19 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); filter: brightness(1); }
  12% { transform: translate3d(11px, -25px, 0) rotate(4deg); }
  31% { transform: translate3d(-4px, 73px, 0) rotate(-5deg); }
  41% { transform: translate3d(-7px, 96px, 0) rotate(-7deg); filter: brightness(.92); }
  54% { transform: translate3d(-20px, 55px, 0) rotate(-12deg); }
  70% { transform: translate3d(-49px, -6px, 0) rotate(-21deg); }
  83% { transform: translate3d(-102px, -57px, 0) rotate(-40deg); filter: brightness(1.035); }
  92% { transform: translate3d(-23px, -15px, 0) rotate(-8deg); }
}

@keyframes shovel-body-right-v19 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); filter: brightness(1); }
  12% { transform: translate3d(-11px, -25px, 0) rotate(-4deg); }
  31% { transform: translate3d(4px, 73px, 0) rotate(5deg); }
  41% { transform: translate3d(7px, 96px, 0) rotate(7deg); filter: brightness(.92); }
  54% { transform: translate3d(20px, 55px, 0) rotate(12deg); }
  70% { transform: translate3d(49px, -6px, 0) rotate(21deg); }
  83% { transform: translate3d(102px, -57px, 0) rotate(40deg); filter: brightness(1.035); }
  92% { transform: translate3d(23px, -15px, 0) rotate(8deg); }
}


@keyframes shovel-photo-left-v19 {
  0%, 24%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); clip-path: inset(0 0 0 0); }
  33% { transform: translate3d(1px, 3px, 0) rotate(.4deg); clip-path: inset(2% 0 0 0); }
  40% { transform: translate3d(2px, 6px, 0) rotate(.8deg); clip-path: inset(8% 0 0 0); }
  51% { transform: translate3d(-1px, 2px, 0) rotate(-.8deg); clip-path: inset(3% 0 0 0); }
  69% { transform: translate3d(-4px, -3px, 0) rotate(-1.6deg); clip-path: inset(0 0 0 0); }
  82% { transform: translate3d(-9px, -5px, 0) rotate(-3deg); clip-path: inset(0 0 0 0); }
  92% { transform: translate3d(-2px, -1px, 0) rotate(-.6deg); clip-path: inset(0 0 0 0); }
}

@keyframes shovel-photo-right-v19 {
  0%, 24%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); clip-path: inset(0 0 0 0); }
  33% { transform: translate3d(-1px, 3px, 0) rotate(-.4deg); clip-path: inset(2% 0 0 0); }
  40% { transform: translate3d(-2px, 6px, 0) rotate(-.8deg); clip-path: inset(8% 0 0 0); }
  51% { transform: translate3d(1px, 2px, 0) rotate(.8deg); clip-path: inset(3% 0 0 0); }
  69% { transform: translate3d(4px, -3px, 0) rotate(1.6deg); clip-path: inset(0 0 0 0); }
  82% { transform: translate3d(9px, -5px, 0) rotate(3deg); clip-path: inset(0 0 0 0); }
  92% { transform: translate3d(2px, -1px, 0) rotate(.6deg); clip-path: inset(0 0 0 0); }
}

@keyframes shovel-load-left-v19 {
  0%, 34% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  42% { opacity: .56; }
  50%, 68% { opacity: .66; transform: translate3d(0, 0, 0) rotate(0deg); }
  78% { opacity: .5; transform: translate3d(-3px, -3px, 0) rotate(-7deg); }
  86% { opacity: 0; transform: translate3d(-56px, -38px, 0) rotate(-29deg); }
  100% { opacity: 0; }
}

@keyframes shovel-load-right-v19 {
  0%, 34% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  42% { opacity: .56; }
  50%, 68% { opacity: .66; transform: translate3d(0, 0, 0) rotate(0deg); }
  78% { opacity: .5; transform: translate3d(3px, -3px, 0) rotate(7deg); }
  86% { opacity: 0; transform: translate3d(56px, -38px, 0) rotate(29deg); }
  100% { opacity: 0; }
}

@media (max-width: 760px) {
  .hud {
    top: max(70px, calc(var(--safe-top) + 54px));
    left: max(8px, var(--safe-left));
    width: min(204px, 54vw);
    opacity: .88;
  }

  .stat { min-height: 52px; padding: 9px 10px 8px; }
  .stat__label { font-size: .55rem; }
  .stat__value { font-size: .88rem; }

  .shovel-anchor {
    width: clamp(220px, 48vw, 350px) !important;
  }

  .game-art__depth-shade {
    top: 66%;
    width: 86vw;
    height: 39vh;
  }

  .grave-zone {
    width: 100vw;
    height: 75vh;
    bottom: 0;
  }
}

@media (max-aspect-ratio: 4 / 5) {
  .game-art__layer { object-position: 50% 50%; }
  .shovel-anchor { width: clamp(230px, 51vw, 360px) !important; }
  .game-art__depth-shade { top: 68%; }
}

@media (prefers-reduced-motion: reduce) {
  .game-art__hole,
  .game-art__pile { transition: none !important; }
  .game-stage.is-impacting .game-art { animation: none !important; }
  .shovel-tool { --shovel-stroke-duration: 260ms; }
}


/* v19 fixed-frame excavation renderer.
   Each frame is a complete 1536×788 scene. Nothing is translated or scaled;
   only the opacity of the next full-scene frame changes. */
.app {
  --scene-stage-01-opacity: 0;
  --scene-stage-02-opacity: 0;
  --scene-stage-03-opacity: 0;
  --scene-stage-04-opacity: 0;
  --scene-stage-05-opacity: 0;
  --scene-stage-06-opacity: 0;
  --scene-stage-07-opacity: 0;
  --scene-stage-08-opacity: 0;
  --scene-stage-09-opacity: 0;
}

.game-art__stage {
  opacity: 0;
  transform: none !important;
  filter: saturate(.83) contrast(1.045) brightness(.93);
  transition: opacity 120ms linear;
  will-change: opacity;
}

.game-art__stage--01 { z-index: 1; opacity: var(--scene-stage-01-opacity); }
.game-art__stage--02 { z-index: 2; opacity: var(--scene-stage-02-opacity); }
.game-art__stage--03 { z-index: 3; opacity: var(--scene-stage-03-opacity); }
.game-art__stage--04 { z-index: 4; opacity: var(--scene-stage-04-opacity); }
.game-art__stage--05 { z-index: 5; opacity: var(--scene-stage-05-opacity); }
.game-art__stage--06 { z-index: 6; opacity: var(--scene-stage-06-opacity); }
.game-art__stage--07 { z-index: 7; opacity: var(--scene-stage-07-opacity); }
.game-art__stage--08 { z-index: 8; opacity: var(--scene-stage-08-opacity); }
.game-art__stage--09 { z-index: 9; opacity: var(--scene-stage-09-opacity); }
.game-art__vignette { z-index: 11; }

/* Only brief impact marks and settling dust are painted over the fixed
   photographic frames. They never move or scale the excavation itself. */
.dig-canvas {
  z-index: 11 !important;
  visibility: visible !important;
  opacity: .78 !important;
}

/* There is no vector fallback in the v19 markup. */
.shovel-svg { display: none !important; }