:root {
  --ink: #e5e8e5;
  --muted: #9ca5a2;
  --dim: #68716f;
  --night-0: #030507;
  --night-1: #080d13;
  --night-2: #111925;
  --cold: #94aaa8;
  --moss: #53685c;
  --soil-0: #17110d;
  --soil-1: #2a1d14;
  --soil-2: #3a281a;
  --soil-3: #4a3523;
  --panel: rgba(9, 13, 17, 0.72);
  --panel-solid: #0c1116;
  --line: rgba(219, 231, 226, 0.13);
  --line-strong: rgba(219, 231, 226, 0.24);
  --shadow: rgba(0, 0, 0, 0.72);
  --progress: 0;
  --time-progress: 1;
  --shaft-height: 17%;
  --shaft-scale: 0.32;
  --shaft-opacity: 0.2;
  --mouth-scale: 0.9;
  --pile-scale: 0.62;
  --pile-shift: 0px;
  --pile-shift-left: 0px;
  --darkness-opacity: 0.48;
  --marks-opacity: 0.1;
  --target-scale: 1;
  --target-x: 50%;
  --target-y: 43%;
  --beat-duration: 920ms;
  --p1x: 0px;
  --p1y: 0px;
  --p2x: 0px;
  --p2y: 0px;
  --p3x: 0px;
  --p3y: 0px;
  --p4x: 0px;
  --p4y: 0px;
  --shovel-x: calc(50vw + 180px);
  --shovel-y: 24vh;
  --safe-top: max(14px, env(safe-area-inset-top));
  --safe-right: max(14px, env(safe-area-inset-right));
  --safe-bottom: max(10px, env(safe-area-inset-bottom));
  --safe-left: max(14px, env(safe-area-inset-left));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--night-0);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--night-0);
}

body {
  min-width: 300px;
  min-height: 420px;
  -webkit-tap-highlight-color: transparent;
}

button,
dialog {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
dialog:focus-visible {
  outline: 2px solid rgba(207, 224, 217, 0.92);
  outline-offset: 4px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

[hidden] {
  display: none !important;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--night-0);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.scene,
.scene > * {
  pointer-events: none;
}

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--night-0);
  z-index: -5;
}

.sky {
  position: absolute;
  inset: 0 0 36%;
  background:
    radial-gradient(circle at 68% 18%, rgba(109, 135, 151, 0.16), transparent 19%),
    radial-gradient(ellipse at 50% 100%, rgba(42, 54, 62, 0.24), transparent 48%),
    linear-gradient(180deg, #060a0f 0%, #0b1119 46%, #111820 100%);
}

.sky::before,
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sky::before {
  opacity: 0.32;
  background-image:
    radial-gradient(circle at 11% 26%, rgba(213, 226, 222, 0.46) 0 0.7px, transparent 1px),
    radial-gradient(circle at 28% 17%, rgba(213, 226, 222, 0.34) 0 0.65px, transparent 1px),
    radial-gradient(circle at 42% 31%, rgba(213, 226, 222, 0.28) 0 0.6px, transparent 1px),
    radial-gradient(circle at 72% 8%, rgba(213, 226, 222, 0.42) 0 0.7px, transparent 1px),
    radial-gradient(circle at 86% 28%, rgba(213, 226, 222, 0.28) 0 0.7px, transparent 1px);
}

.sky::after {
  background: linear-gradient(105deg, transparent 0 45%, rgba(128, 152, 163, 0.035) 52%, transparent 60%);
}

.parallax-layer {
  will-change: transform;
}

.moon-wrap {
  position: absolute;
  top: 9%;
  left: 67%;
  width: clamp(76px, 9vw, 142px);
  aspect-ratio: 1;
  transform: translate3d(var(--p1x), var(--p1y), 0);
  filter: drop-shadow(0 0 35px rgba(171, 193, 201, 0.16));
  opacity: 0.82;
}

.moon {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 38% 32%, #bec8c8 0 7%, transparent 8%),
    radial-gradient(circle at 60% 62%, rgba(53, 68, 72, 0.34) 0 11%, transparent 12%),
    radial-gradient(circle at 46% 48%, #a5b2b2, #657578 72%, #344248 100%);
  box-shadow:
    0 0 0 1px rgba(205, 220, 219, 0.12),
    0 0 50px rgba(130, 157, 166, 0.18),
    0 0 110px rgba(112, 140, 151, 0.12);
}

.moon::after {
  content: "";
  position: absolute;
  inset: -4%;
  background: linear-gradient(103deg, transparent 47%, rgba(8, 13, 17, 0.58) 64%, rgba(8, 13, 17, 0.82) 100%);
  border-radius: 50%;
}

.moon-crater {
  position: absolute;
  border-radius: 50%;
  background: rgba(39, 53, 57, 0.22);
  box-shadow: inset 2px 2px 2px rgba(25, 34, 37, 0.2), 1px 1px 1px rgba(235, 243, 240, 0.08);
}

.moon-crater--one { width: 18%; height: 18%; left: 22%; top: 52%; }
.moon-crater--two { width: 10%; height: 10%; left: 52%; top: 22%; }
.moon-crater--three { width: 13%; height: 13%; left: 58%; top: 52%; }

.clouds {
  position: absolute;
  inset: -5% -20% 38%;
  opacity: 0.25;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(76, 91, 100, 0.48) 0 13%, transparent 28%),
    radial-gradient(ellipse at 42% 58%, rgba(60, 74, 82, 0.5) 0 17%, transparent 33%),
    radial-gradient(ellipse at 72% 34%, rgba(70, 84, 91, 0.46) 0 15%, transparent 29%),
    radial-gradient(ellipse at 92% 67%, rgba(73, 87, 94, 0.42) 0 15%, transparent 31%);
  filter: blur(20px);
  will-change: transform;
}

.clouds--far {
  animation: cloud-drift-far 72s linear infinite alternate;
  transform: translate3d(var(--p1x), var(--p1y), 0);
}

.clouds--near {
  inset: 5% -25% 29%;
  opacity: 0.19;
  filter: blur(27px);
  animation: cloud-drift-near 48s linear infinite alternate-reverse;
  transform: translate3d(var(--p2x), var(--p2y), 0);
}

@keyframes cloud-drift-far {
  from { translate: -3% 0; }
  to { translate: 5% 2%; }
}

@keyframes cloud-drift-near {
  from { translate: 4% -1%; }
  to { translate: -5% 2%; }
}

.tree-line {
  position: absolute;
  left: -3%;
  bottom: 33%;
  width: 106%;
  height: 39%;
  color: #090e12;
  opacity: 0.95;
  transform: translate3d(var(--p2x), var(--p2y), 0);
  filter: drop-shadow(0 -8px 18px rgba(0, 0, 0, 0.46));
}

.tree {
  position: absolute;
  bottom: 24%;
  width: min(33vw, 430px);
  height: min(78vh, 820px);
  color: #050809;
  opacity: 0.97;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.7));
}

.tree--left {
  left: -5%;
  transform: translate3d(var(--p4x), var(--p4y), 0);
}

.tree--right {
  right: -5%;
  transform: translate3d(var(--p4x), var(--p4y), 0);
}

.cemetery {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0.88;
  pointer-events: none;
}

.cemetery--far {
  inset: 38% 0 33%;
  opacity: 0.55;
  transform: translate3d(var(--p2x), calc(var(--p2y) - 4px), 0);
}

.cemetery--mid {
  inset: 45% 0 23%;
  opacity: 0.9;
  transform: translate3d(var(--p3x), var(--p3y), 0);
}

.cemetery-foreground {
  position: absolute;
  inset: 56% 0 4%;
  z-index: 9;
  opacity: 0.9;
  pointer-events: none;
  transform: translate3d(var(--p4x), calc(var(--p4y) * 0.35), 0);
}

.cemetery::after,
.cemetery-foreground::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -6%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(169, 184, 179, 0.08) 0 18%, rgba(170, 184, 180, 0.05) 24%, transparent 68%);
  filter: blur(18px);
  opacity: 0.8;
}

.graveyard-fence {
  position: absolute;
  inset: 48% -3% 22%;
  z-index: 2;
  opacity: 0.45;
  pointer-events: none;
  transform: translate3d(var(--p3x), var(--p3y), 0);
}

.graveyard-fence::before,
.graveyard-fence::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}

.graveyard-fence::before {
  top: 22%;
  bottom: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 14px,
      rgba(10, 14, 17, 0.96) 14px 18px,
      transparent 18px 62px),
    linear-gradient(180deg, transparent 0 52%, rgba(3, 5, 7, 0.6) 52% 60%, transparent 60%),
    linear-gradient(180deg, transparent 0 70%, rgba(5, 7, 9, 0.74) 70% 78%, transparent 78%);
  -webkit-mask-image: linear-gradient(to top, black 0 85%, transparent 100%);
  mask-image: linear-gradient(to top, black 0 85%, transparent 100%);
}

.graveyard-fence::after {
  inset: auto 4% 0;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.36) 0 40%, transparent 72%);
  filter: blur(12px);
}

.grave-stone,
.grave-cross {
  position: absolute;
  bottom: 0;
  display: block;
  color: #0b1012;
  background:
    linear-gradient(180deg, rgba(88, 99, 98, 0.09) 0%, rgba(33, 40, 42, 0.08) 22%, rgba(11, 16, 18, 0.96) 23%, #090d0f 100%);
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.7));
}

.grave-stone {
  width: clamp(26px, 4.2vw, 66px);
  height: clamp(44px, 8vw, 112px);
  border-radius: 48% 48% 7% 7% / 28% 28% 7% 7%;
  box-shadow:
    inset 4px 0 0 rgba(72, 84, 81, 0.08),
    inset -2px 0 0 rgba(175, 193, 187, 0.05),
    inset 0 12px 10px rgba(138, 152, 151, 0.05);
}

.grave-stone::before {
  content: "";
  position: absolute;
  inset: 18% 20% auto;
  height: 14%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0 12%, rgba(173, 186, 182, 0.12) 12% 88%, transparent 88%);
  opacity: 0.65;
}

.grave-stone::after,
.grave-cross::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -6px;
  height: 10px;
  border-radius: 50%;
  background: #070a0b;
}

.grave-stone--1 { left: 4%; transform: rotate(-5deg) scale(0.44); opacity: 0.65; }
.grave-stone--2 { left: 15%; transform: rotate(3deg) scale(0.38); opacity: 0.5; }
.grave-stone--3 { left: 28%; transform: rotate(-2deg) scale(0.48); opacity: 0.62; }
.grave-stone--4 { left: 43%; transform: rotate(4deg) scale(0.4); opacity: 0.5; }
.grave-stone--5 { right: 39%; transform: rotate(-4deg) scale(0.44); opacity: 0.58; }
.grave-stone--6 { right: 24%; transform: rotate(5deg) scale(0.42); opacity: 0.54; }
.grave-stone--7 { right: 12%; transform: rotate(-6deg) scale(0.5); opacity: 0.68; }
.grave-stone--8 { right: 2%; transform: rotate(2deg) scale(0.36); opacity: 0.5; }

.grave-stone--9 { left: 3%; transform: rotate(-4deg) scale(0.96); }
.grave-stone--10 { left: 17%; transform: rotate(2deg) scale(0.62); opacity: 0.82; }
.grave-stone--11 { left: 34%; transform: rotate(-3deg) scale(0.84); }
.grave-stone--12 { right: 35%; transform: rotate(4deg) scale(0.68); opacity: 0.86; }
.grave-stone--13 { right: 18%; transform: rotate(-6deg) scale(0.98); }
.grave-stone--14 { right: 4%; transform: rotate(2deg) scale(0.72); opacity: 0.88; }
.grave-stone--15 { left: 9%; transform: rotate(-3deg) scale(0.32); opacity: 0.42; }
.grave-stone--16 { left: 23%; transform: rotate(2deg) scale(0.3); opacity: 0.38; }
.grave-stone--17 { left: 49%; transform: rotate(-5deg) scale(0.34); opacity: 0.44; }
.grave-stone--18 { right: 31%; transform: rotate(3deg) scale(0.32); opacity: 0.42; }
.grave-stone--19 { right: 8%; transform: rotate(-3deg) scale(0.34); opacity: 0.47; }
.grave-stone--20 { right: 18%; transform: rotate(5deg) scale(0.29); opacity: 0.35; }
.grave-stone--21 { left: 10%; transform: rotate(-4deg) scale(0.78); opacity: 0.92; }
.grave-stone--22 { left: 29%; transform: rotate(2deg) scale(0.56); opacity: 0.78; }
.grave-stone--23 { left: 47%; transform: rotate(-4deg) scale(0.88); opacity: 0.96; }
.grave-stone--24 { right: 45%; transform: rotate(3deg) scale(0.58); opacity: 0.76; }
.grave-stone--25 { right: 28%; transform: rotate(-5deg) scale(0.84); opacity: 0.92; }
.grave-stone--26 { right: 12%; transform: rotate(4deg) scale(0.58); opacity: 0.8; }

.grave-stone--near-left {
  left: -2%;
  bottom: 2%;
  width: clamp(76px, 10vw, 120px);
  height: clamp(122px, 18vw, 188px);
  transform: rotate(-6deg);
  opacity: 0.88;
}

.grave-stone--near-right {
  right: -1%;
  bottom: 0;
  width: clamp(86px, 11vw, 132px);
  height: clamp(138px, 19vw, 200px);
  transform: rotate(7deg);
  opacity: 0.9;
}

.grave-stone--near-center-left {
  left: 17%;
  bottom: 1%;
  width: clamp(72px, 9vw, 108px);
  height: clamp(114px, 15vw, 168px);
  transform: rotate(-3deg);
  opacity: 0.82;
}

.grave-stone--near-center-right {
  right: 18%;
  bottom: 0;
  width: clamp(76px, 9.5vw, 114px);
  height: clamp(118px, 15.5vw, 174px);
  transform: rotate(4deg);
  opacity: 0.84;
}

.grave-stone--near-far-left {
  left: 29%;
  bottom: 2%;
  width: clamp(58px, 7.8vw, 88px);
  height: clamp(94px, 12vw, 138px);
  transform: rotate(2deg);
  opacity: 0.72;
}

.grave-stone--near-far-right {
  right: 30%;
  bottom: 1%;
  width: clamp(62px, 8vw, 92px);
  height: clamp(98px, 12.5vw, 144px);
  transform: rotate(-4deg);
  opacity: 0.74;
}

.grave-cross {
  width: 14px;
  height: clamp(64px, 9vw, 130px);
  transform-origin: 50% 100%;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06);
}

.grave-cross::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 13px;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  background: inherit;
  box-shadow: inherit;
}

.grave-cross--1 { left: 22%; transform: rotate(-5deg) scale(0.44); opacity: 0.56; }
.grave-cross--2 { left: 51%; transform: rotate(4deg) scale(0.36); opacity: 0.42; }
.grave-cross--3 { right: 17%; transform: rotate(-4deg) scale(0.5); opacity: 0.58; }
.grave-cross--4 { left: 25%; transform: rotate(-6deg) scale(0.82); opacity: 0.86; }
.grave-cross--5 { right: 26%; transform: rotate(5deg) scale(0.72); opacity: 0.84; }
.grave-cross--6 { left: 37%; transform: rotate(-2deg) scale(0.34); opacity: 0.42; }
.grave-cross--7 { right: 41%; transform: rotate(5deg) scale(0.38); opacity: 0.46; }
.grave-cross--8 { left: 5%; transform: rotate(-6deg) scale(0.64); opacity: 0.78; }
.grave-cross--9 { left: 57%; transform: rotate(3deg) scale(0.58); opacity: 0.72; }
.grave-cross--10 { right: 2%; transform: rotate(6deg) scale(0.68); opacity: 0.8; }

.grave-cross--near-left {
  left: 11%;
  bottom: 2%;
  width: 16px;
  height: clamp(128px, 17vw, 210px);
  transform: rotate(-5deg);
  opacity: 0.78;
}

.grave-cross--near-right {
  right: 13%;
  bottom: 1%;
  width: 17px;
  height: clamp(138px, 18vw, 220px);
  transform: rotate(6deg);
  opacity: 0.8;
}

.grave-cross--near-center-left {
  left: 39%;
  bottom: 2%;
  width: 14px;
  height: clamp(112px, 14vw, 176px);
  transform: rotate(-2deg);
  opacity: 0.7;
}

.grave-cross--near-center-right {
  right: 40%;
  bottom: 2%;
  width: 14px;
  height: clamp(116px, 14vw, 182px);
  transform: rotate(3deg);
  opacity: 0.7;
}

.ground {
  position: absolute;
  inset: 56% -5% -10%;
  background:
    radial-gradient(ellipse at 48% 9%, rgba(57, 69, 60, 0.18), transparent 42%),
    linear-gradient(180deg, #111713 0%, #0b0f0d 26%, #070908 65%, #040505 100%);
  transform: perspective(700px) rotateX(2deg);
  transform-origin: 50% 0;
}

.ground::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(ellipse at 12% 18%, rgba(76, 89, 72, 0.21) 0 2%, transparent 4%),
    radial-gradient(ellipse at 86% 28%, rgba(72, 85, 68, 0.18) 0 2%, transparent 4%),
    radial-gradient(ellipse at 32% 70%, rgba(44, 53, 43, 0.2) 0 1.5%, transparent 3%),
    radial-gradient(ellipse at 70% 82%, rgba(56, 66, 53, 0.16) 0 1.2%, transparent 2.8%);
  background-size: 260px 170px, 310px 190px, 190px 140px, 240px 160px;
}

.ground-texture {
  position: absolute;
  inset: 58% 0 0;
  opacity: 0.27;
  background:
    repeating-linear-gradient(171deg, transparent 0 18px, rgba(99, 111, 88, 0.055) 19px 20px, transparent 21px 39px),
    repeating-linear-gradient(8deg, transparent 0 27px, rgba(22, 32, 26, 0.18) 28px 29px, transparent 30px 61px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 24%);
  mask-image: linear-gradient(to bottom, transparent, black 24%);
}

.fog {
  position: absolute;
  left: -25%;
  width: 150%;
  border-radius: 50%;
  opacity: 0.4;
  filter: blur(20px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  background:
    radial-gradient(ellipse at 10% 50%, rgba(145, 164, 160, 0.16) 0 8%, transparent 26%),
    radial-gradient(ellipse at 32% 40%, rgba(132, 151, 148, 0.14) 0 12%, transparent 31%),
    radial-gradient(ellipse at 56% 60%, rgba(156, 172, 170, 0.13) 0 10%, transparent 32%),
    radial-gradient(ellipse at 82% 42%, rgba(134, 155, 151, 0.16) 0 10%, transparent 30%);
}

.fog--back {
  height: 22%;
  bottom: 26%;
  opacity: 0.26;
  animation: fog-drift-back 38s ease-in-out infinite alternate;
}

.fog--middle {
  height: 26%;
  bottom: 9%;
  opacity: 0.34;
  animation: fog-drift-middle 29s ease-in-out infinite alternate-reverse;
}

.fog--front {
  height: 25%;
  bottom: -7%;
  opacity: 0.45;
  filter: blur(27px);
  animation: fog-drift-front 24s ease-in-out infinite alternate;
}

@keyframes fog-drift-back {
  from { transform: translate3d(-5%, 0, 0) scaleX(1); opacity: 0.2; }
  to { transform: translate3d(7%, 2%, 0) scaleX(1.06); opacity: 0.31; }
}

@keyframes fog-drift-middle {
  from { transform: translate3d(5%, 1%, 0) scaleX(1.02); }
  to { transform: translate3d(-7%, -1%, 0) scaleX(0.96); }
}

@keyframes fog-drift-front {
  from { transform: translate3d(-4%, 0, 0) scale(1.03); }
  to { transform: translate3d(6%, -2%, 0) scale(0.98); }
}

.ambient-leaves {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ambient-leaves span {
  position: absolute;
  top: -8%;
  width: 9px;
  height: 4px;
  border-radius: 70% 0 70% 0;
  background: #546056;
  opacity: 0;
  filter: blur(0.2px);
  animation: leaf-fall 13s linear infinite;
}

.ambient-leaves span:nth-child(1) { left: 8%; animation-delay: -2s; animation-duration: 16s; }
.ambient-leaves span:nth-child(2) { left: 23%; animation-delay: -9s; animation-duration: 20s; transform: scale(0.7); }
.ambient-leaves span:nth-child(3) { left: 52%; animation-delay: -5s; animation-duration: 15s; }
.ambient-leaves span:nth-child(4) { left: 73%; animation-delay: -12s; animation-duration: 22s; transform: scale(0.75); }
.ambient-leaves span:nth-child(5) { left: 88%; animation-delay: -7s; animation-duration: 18s; }
.ambient-leaves span:nth-child(6) { left: 39%; animation-delay: -15s; animation-duration: 24s; transform: scale(0.55); }

@keyframes leaf-fall {
  0% { transform: translate3d(-6vw, -6vh, 0) rotate(0deg); opacity: 0; }
  12% { opacity: 0.4; }
  45% { transform: translate3d(6vw, 48vh, 0) rotate(260deg); }
  78% { opacity: 0.26; }
  100% { transform: translate3d(-3vw, 108vh, 0) rotate(620deg); opacity: 0; }
}

.vignette {
  position: absolute;
  inset: -1px;
  z-index: 20;
  background: radial-gradient(ellipse at 50% 45%, transparent 36%, rgba(0, 0, 0, 0.28) 67%, rgba(0, 0, 0, 0.72) 100%);
}

.grain {
  position: absolute;
  inset: -40%;
  z-index: 21;
  width: 180%;
  height: 180%;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: grain-shift 0.24s steps(2) infinite;
  mix-blend-mode: soft-light;
}

@keyframes grain-shift {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(2%, -3%, 0); }
  50% { transform: translate3d(-3%, 1%, 0); }
  75% { transform: translate3d(1%, 3%, 0); }
  100% { transform: translate3d(-1%, -2%, 0); }
}

.location-mark {
  position: absolute;
  z-index: 34;
  left: var(--safe-left);
  bottom: max(24px, calc(var(--safe-bottom) + 10px));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100vw - var(--safe-left) - var(--safe-right));
  padding: 7px 10px;
  border: 1px solid rgba(205, 220, 214, 0.11);
  border-radius: 999px;
  color: rgba(197, 209, 204, 0.76);
  background: rgba(5, 9, 11, 0.34);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 700ms ease, transform 700ms ease;
  pointer-events: none;
}

.location-mark svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.location-mark span {
  overflow: hidden;
  font-size: 0.64rem;
  line-height: 1;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app[data-state="playing"] .location-mark,
.app[data-state="finishing"] .location-mark {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.app[data-state="finished"] .location-mark {
  opacity: 0.34;
  transform: translate3d(0, 0, 0);
}

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
  pointer-events: none;
}

.topbar > * {
  pointer-events: auto;
}

.depth-meter {
  display: grid;
  grid-template-columns: auto minmax(74px, 18vw) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(7, 11, 14, 0.58);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: blur(14px) saturate(0.8);
  backdrop-filter: blur(14px) saturate(0.8);
}

.depth-meter__label,
.round-timer__label,
.stat__label,
.intro-card__kicker,
.result-card__kicker,
.dialog-kicker,
.finding-toast__eyebrow {
  font-size: 0.64rem;
  line-height: 1;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--muted);
}

.depth-meter__label {
  font-size: 0.64rem;
}

.depth-meter__track {
  position: relative;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(216, 228, 223, 0.12);
}

.depth-meter__fill {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--progress));
  transform-origin: 0 50%;
  border-radius: inherit;
  background: linear-gradient(90deg, #758a82, #bdcbc6);
  box-shadow: 0 0 12px rgba(166, 191, 181, 0.3);
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.depth-meter__value {
  min-width: 47px;
  text-align: right;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: #d6dedb;
}

.round-timer {
  position: absolute;
  left: 50%;
  top: var(--safe-top);
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto 3px;
  align-items: center;
  justify-content: center;
  column-gap: 11px;
  row-gap: 6px;
  min-width: 148px;
  min-height: 48px;
  padding: 7px 15px 8px;
  border: 1px solid rgba(218, 230, 225, 0.17);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(12, 17, 22, 0.86), rgba(5, 8, 11, 0.76));
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  -webkit-backdrop-filter: blur(15px) saturate(0.78);
  backdrop-filter: blur(15px) saturate(0.78);
  transform: translateX(-50%);
  transition: border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
}

.round-timer__label {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
}

.round-timer__value {
  min-width: 58px;
  text-align: right;
  font-size: 1.18rem;
  line-height: 1;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.045em;
  color: #e2e8e5;
  text-shadow: 0 0 18px rgba(178, 201, 192, 0.13);
}

.round-timer__track {
  position: relative;
  grid-column: 1 / -1;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(216, 228, 223, 0.11);
}

.round-timer__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #6d837b, #bdcbc6);
  box-shadow: 0 0 12px rgba(166, 191, 181, 0.27);
  transform: scaleX(var(--time-progress));
  transform-origin: 0 50%;
  will-change: transform;
}

.app.is-time-warning .round-timer {
  border-color: rgba(183, 150, 111, 0.4);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.4), 0 0 24px rgba(147, 106, 70, 0.12);
}

.app.is-time-warning .round-timer__value {
  color: #ddc8ad;
}

.app.is-time-warning .round-timer__fill {
  background: linear-gradient(90deg, #78583f, #c7a477);
}

.app.is-time-critical .round-timer {
  border-color: rgba(184, 105, 86, 0.56);
  background: linear-gradient(145deg, rgba(30, 15, 14, 0.9), rgba(8, 7, 8, 0.82));
  animation: timer-urgency 760ms ease-in-out infinite alternate;
}

.app.is-time-critical .round-timer__value {
  color: #e2b2a5;
}

.app.is-time-critical .round-timer__fill {
  background: linear-gradient(90deg, #6d332a, #bd7664);
  box-shadow: 0 0 16px rgba(185, 94, 72, 0.34);
}

@keyframes timer-urgency {
  from { transform: translateX(-50%) scale(1); box-shadow: 0 14px 42px rgba(0, 0, 0, 0.4), 0 0 8px rgba(163, 76, 59, 0.08); }
  to { transform: translateX(-50%) scale(1.025); box-shadow: 0 14px 42px rgba(0, 0, 0, 0.42), 0 0 30px rgba(163, 76, 59, 0.22); }
}

.top-actions {
  display: flex;
  gap: 8px;
}

.icon-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #c7d1cd;
  background: rgba(7, 11, 14, 0.58);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(14px) saturate(0.75);
  backdrop-filter: blur(14px) saturate(0.75);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.icon-button:hover {
  border-color: var(--line-strong);
  background: rgba(19, 26, 31, 0.72);
  transform: translateY(-1px);
}

.icon-button:active {
  transform: translateY(1px) scale(0.97);
}

.icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button__badge {
  position: absolute;
  right: -2px;
  top: -3px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid #090d11;
  border-radius: 99px;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  color: #101614;
  background: #a9b9b2;
}

.sound-on { display: none; }
.sound-off { display: block; }
.icon-button[aria-pressed="true"] .sound-on { display: block; }
.icon-button[aria-pressed="true"] .sound-off { display: none; }

.game-shell {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.game-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: layout paint;
}

.grave-zone.is-shaking {
  animation: grave-shake 230ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

@keyframes grave-shake {
  0%, 100% { transform: translate3d(-50%, 0, 0); }
  22% { transform: translate3d(calc(-50% - 2px), 2px, 0); }
  45% { transform: translate3d(calc(-50% + 3px), -1px, 0); }
  68% { transform: translate3d(calc(-50% - 1px), 1px, 0); }
}

.hud {
  position: absolute;
  z-index: 32;
  left: var(--safe-left);
  top: max(76px, calc(var(--safe-top) + 58px));
  display: grid;
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  width: min(260px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(14, 19, 24, 0.74), rgba(7, 10, 13, 0.6));
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: blur(16px) saturate(0.78);
  backdrop-filter: blur(16px) saturate(0.78);
  pointer-events: none;
}

.stat {
  min-width: 0;
  min-height: 64px;
  padding: 12px 13px 10px;
  border-right: 1px solid rgba(219, 231, 226, 0.08);
  border-bottom: 1px solid rgba(219, 231, 226, 0.08);
}

.stat:nth-child(even) { border-right: 0; }
.stat:nth-last-child(-n+2) { border-bottom: 0; }

.stat__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.64rem;
}

.stat__value {
  display: block;
  overflow: hidden;
  font-size: clamp(0.94rem, 1.7vw, 1.18rem);
  line-height: 1.1;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e0e6e3;
  text-shadow: 0 1px 16px rgba(198, 216, 209, 0.08);
}

.stat--score .stat__value,
.stat--multiplier .stat__value {
  color: #c6d5cf;
}

.grave-zone {
  position: absolute;
  z-index: 18;
  left: 50%;
  bottom: -3%;
  width: min(92vw, 1080px);
  height: min(72vh, 820px);
  padding: 0;
  border: 0;
  outline-offset: -14px;
  color: inherit;
  background: transparent;
  transform: translateX(-50%);
  will-change: transform;
  cursor: crosshair;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.grave-zone:focus-visible {
  outline: none;
}

.grave-zone:focus-visible .grave-mouth {
  z-index: 8;
  left: 20.5%;
  top: 38.5%;
  width: 59%;
  height: 17.5%;
  overflow: hidden;
  border-radius: 5% 5% 14% 14% / 9% 9% 26% 26%;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, #3d2819 0 5%, #120d09 9%, #020303 22% 78%, #120d09 91%, #3d2819 95% 100%);
  box-shadow:
    0 20px 30px rgba(0, 0, 0, 0.74),
    inset 0 7px 9px rgba(118, 78, 45, 0.18),
    inset 0 -15px 22px rgba(0, 0, 0, 0.9);
  transform: perspective(720px) rotateX(62deg) scale(var(--mouth-scale));
  transform-origin: 50% 0;
  transition: transform 340ms cubic-bezier(0.22, 0.75, 0.25, 1);
}

.grave-zone:focus-visible .target-spot__ring {
  border-color: rgba(211, 229, 220, 0.9);
}

.grave-zone::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 17%;
  bottom: 2%;
  border-radius: 45%;
  background: radial-gradient(ellipse at 50% 54%, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.14) 42%, transparent 70%);
  filter: blur(18px);
}

.grave-mouth,
.grave-rim,
.grave-shaft,
.dirt-pile,
.tool-marks,
.footprints,
.target-spot,
.impact-mark {
  position: absolute;
  display: block;
  pointer-events: none;
}

.grave-shaft {
  z-index: 6;
  left: 24%;
  top: 47%;
  width: 52%;
  height: 68%;
  min-height: 0;
  overflow: hidden;
  opacity: var(--shaft-opacity);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  background:
    linear-gradient(90deg, #3f291a 0 10%, #1e1510 22%, #090807 38%, #040505 50%, #090807 62%, #1e1510 78%, #3f291a 90% 100%);
  box-shadow:
    inset 22px 0 26px rgba(0, 0, 0, 0.48),
    inset -22px 0 26px rgba(0, 0, 0, 0.48),
    inset 0 -34px 44px rgba(0, 0, 0, 0.86),
    0 18px 28px rgba(0, 0, 0, 0.56);
  transform: scaleY(var(--shaft-scale));
  transform-origin: 50% 0;
  transition: transform 360ms cubic-bezier(0.22, 0.75, 0.25, 1), opacity 360ms ease;
  contain: layout paint;
}

.soil-layer {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  height: 16%;
  opacity: 0.62;
  background:
    repeating-linear-gradient(174deg, rgba(126, 89, 52, 0.2) 0 2px, transparent 3px 9px),
    linear-gradient(90deg, transparent, rgba(149, 103, 59, 0.12), transparent);
  border-top: 1px solid rgba(139, 96, 58, 0.12);
}

.soil-layer--one { top: 13%; }
.soil-layer--two { top: 34%; opacity: 0.45; }
.soil-layer--three { top: 57%; opacity: 0.31; }
.soil-layer--four { top: 78%; opacity: 0.18; }

.grave-wall {
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 35%;
  background:
    repeating-linear-gradient(176deg, rgba(169, 112, 64, 0.18) 0 2px, transparent 3px 12px),
    repeating-linear-gradient(91deg, transparent 0 19px, rgba(25, 16, 11, 0.22) 20px 22px, transparent 23px 39px),
    linear-gradient(180deg, #674329 0%, #49301f 28%, #302017 61%, #17110d 100%);
}

.grave-wall--left {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 53% 100%, 0 100%);
  box-shadow: inset -16px 0 20px rgba(0, 0, 0, 0.54), inset 5px 0 8px rgba(177, 117, 68, 0.13);
}

.grave-wall--right {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%);
  box-shadow: inset 16px 0 20px rgba(0, 0, 0, 0.54), inset -5px 0 8px rgba(177, 117, 68, 0.13);
}

.grave-floor {
  z-index: 2;
  left: 25%;
  right: 25%;
  bottom: 0;
  height: 32%;
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(ellipse at 50% 12%, rgba(70, 45, 28, 0.24), transparent 48%),
    linear-gradient(180deg, #16100d 0%, #070706 43%, #010202 100%);
  box-shadow: inset 0 15px 22px rgba(0, 0, 0, 0.72);
}

.grave-darkness {
  z-index: 6;
  position: absolute;
  inset: 42% 31% 0;
  display: block;
  background: linear-gradient(180deg, rgba(2, 3, 3, 0.1), rgba(1, 2, 2, 0.98));
  opacity: var(--darkness-opacity);
  box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.52);
}

.grave-mouth {
  z-index: 6;
  left: 18%;
  top: 24%;
  width: 64%;
  height: 25%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 43%, #020303 0 34%, #0a0807 50%, #271a11 64%, #0d0b08 72%, transparent 73%);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.72),
    inset 0 13px 28px rgba(68, 44, 27, 0.18),
    inset 0 -18px 25px rgba(0, 0, 0, 0.82);
  transform: perspective(560px) rotateX(61deg) scale(var(--mouth-scale));
  transform-origin: 50% 50%;
  transition: transform 340ms cubic-bezier(0.22, 0.75, 0.25, 1);
}

.grave-mouth::before {
  content: "";
  position: absolute;
  inset: 9% 6% 5%;
  border-radius: 4% 4% 15% 15% / 7% 7% 27% 27%;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(0, 0, 0, 0.96) 0 43%, transparent 67%),
    repeating-linear-gradient(173deg, transparent 0 13px, rgba(133, 88, 49, 0.07) 14px 16px, transparent 17px 29px);
}

.grave-rim {
  z-index: 9;
  left: 17.5%;
  top: 36.5%;
  width: 65%;
  height: 20%;
  border-radius: 0;
  transform: none;
  filter: drop-shadow(0 10px 9px rgba(0, 0, 0, 0.4));
}

.grave-rim--back {
  z-index: 7;
  clip-path: polygon(8% 39%, 17% 25%, 29% 31%, 39% 18%, 50% 26%, 61% 17%, 72% 29%, 84% 23%, 93% 38%, 87% 49%, 72% 44%, 61% 51%, 49% 43%, 38% 51%, 26% 44%, 13% 50%);
  background:
    radial-gradient(circle at 25% 35%, #765034 0 2.5%, transparent 3.1%),
    radial-gradient(circle at 69% 30%, #4b301f 0 2.8%, transparent 3.4%),
    linear-gradient(180deg, #735035 0%, #4b301e 54%, #271a12 100%);
}

.grave-rim--front {
  z-index: 10;
  top: 44.5%;
  height: 22%;
  clip-path: polygon(0 48%, 8% 34%, 18% 41%, 28% 29%, 39% 44%, 50% 32%, 61% 45%, 72% 29%, 83% 42%, 93% 34%, 100% 49%, 94% 72%, 84% 78%, 72% 72%, 61% 84%, 49% 76%, 37% 86%, 25% 73%, 13% 81%, 5% 69%);
  background:
    radial-gradient(circle at 13% 54%, #714a2e 0 2.1%, transparent 2.7%),
    radial-gradient(circle at 36% 49%, #3d281a 0 2.3%, transparent 2.9%),
    radial-gradient(circle at 64% 53%, #805638 0 2.2%, transparent 2.8%),
    radial-gradient(circle at 87% 48%, #472d1d 0 2.3%, transparent 2.9%),
    linear-gradient(180deg, #735037 0%, #503321 41%, #291b13 76%, #160f0b 100%);
  box-shadow: inset 0 -7px 0 rgba(17, 11, 8, 0.42), 0 12px 13px rgba(0, 0, 0, 0.42);
}

.grave-rim--front::after,
.grave-rim--back::after {
  content: "";
  position: absolute;
  inset: -2% 1%;
  opacity: 0.55;
  background:
    radial-gradient(circle at 12% 58%, rgba(42, 27, 18, 0.85) 0 1.6%, transparent 2.1%),
    radial-gradient(circle at 36% 37%, rgba(96, 63, 37, 0.5) 0 1.5%, transparent 2%),
    radial-gradient(circle at 58% 64%, rgba(40, 26, 17, 0.8) 0 1.8%, transparent 2.3%),
    radial-gradient(circle at 82% 46%, rgba(101, 67, 40, 0.45) 0 1.7%, transparent 2.2%);
}


 .dirt-pile {
  z-index: 11;
  width: 47%;
  height: 35%;
  transform: scale(var(--pile-scale));
  transform-origin: 50% 100%;
  transition: transform 420ms cubic-bezier(0.22, 0.75, 0.2, 1), translate 420ms ease;
  filter: drop-shadow(0 18px 14px rgba(0, 0, 0, 0.45));
  will-change: transform, translate;
}

.dirt-pile::before {
  content: "";
  position: absolute;
  inset: 2% 0 0;
  border-radius: 50% 50% 28% 28% / 74% 72% 26% 25%;
  clip-path: polygon(0 73%, 6% 48%, 16% 37%, 26% 32%, 39% 15%, 50% 21%, 61% 13%, 74% 30%, 84% 27%, 93% 42%, 100% 70%, 97% 100%, 0 100%);
  background:
    radial-gradient(circle at 13% 54%, rgba(93, 61, 35, 0.54) 0 3%, transparent 3.8%),
    radial-gradient(circle at 29% 42%, rgba(138, 92, 51, 0.3) 0 2.4%, transparent 3.1%),
    radial-gradient(circle at 45% 24%, rgba(77, 51, 30, 0.58) 0 2.8%, transparent 3.6%),
    radial-gradient(circle at 61% 34%, rgba(138, 94, 53, 0.24) 0 2.3%, transparent 3%),
    radial-gradient(circle at 76% 44%, rgba(58, 38, 23, 0.6) 0 3%, transparent 3.8%),
    radial-gradient(circle at 88% 58%, rgba(126, 84, 48, 0.22) 0 2.2%, transparent 2.9%),
    repeating-linear-gradient(165deg, transparent 0 12px, rgba(124, 84, 48, 0.07) 13px 15px, transparent 16px 26px),
    linear-gradient(167deg, #694528 0%, #4a311f 38%, #2a1c13 72%, #110d0a 100%);
  box-shadow: inset 0 8px 11px rgba(148, 102, 58, 0.13), inset 0 -13px 20px rgba(0, 0, 0, 0.48);
}

.dirt-pile::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 18%;
  bottom: 6%;
  height: 34%;
  border-radius: 44% 56% 34% 33% / 66% 63% 37% 34%;
  clip-path: polygon(0 78%, 10% 52%, 22% 40%, 36% 32%, 52% 17%, 67% 24%, 82% 36%, 92% 56%, 100% 79%, 100% 100%, 0 100%);
  background:
    radial-gradient(circle at 28% 45%, rgba(147, 98, 56, 0.18) 0 3%, transparent 3.9%),
    radial-gradient(circle at 69% 39%, rgba(56, 36, 22, 0.42) 0 3.2%, transparent 4%),
    linear-gradient(170deg, rgba(98, 65, 38, 0.84), rgba(56, 36, 24, 0.92) 56%, rgba(25, 17, 12, 0.98));
  box-shadow: inset 0 5px 8px rgba(154, 107, 62, 0.08), inset 0 -10px 16px rgba(0, 0, 0, 0.36);
}

.dirt-pile i {
  position: absolute;
  z-index: 2;
  display: block;
  width: 16%;
  aspect-ratio: 1.8;
  border-radius: 50%;
  background: #412a19;
  box-shadow: inset 1px 2px 2px rgba(139, 93, 50, 0.18), 0 4px 5px rgba(0, 0, 0, 0.24);
}

.dirt-pile i:nth-child(1) { left: 14%; bottom: 20%; transform: rotate(14deg); }
.dirt-pile i:nth-child(2) { left: 38%; bottom: 42%; transform: rotate(-9deg) scale(0.8); }
.dirt-pile i:nth-child(3) { right: 17%; bottom: 24%; transform: rotate(7deg) scale(1.2); }
.dirt-pile i:nth-child(4) { left: 55%; bottom: 12%; transform: rotate(-18deg) scale(0.65); }
.dirt-pile i:nth-child(5) { left: 24%; bottom: 8%; transform: rotate(5deg) scale(0.72); }

.dirt-pile--left {
  left: 4%;
  top: 43%;
  translate: var(--pile-shift-left) 0;
  rotate: -5deg;
}

.dirt-pile--right {
  right: 4%;
  top: 41%;
  translate: var(--pile-shift) 0;
  rotate: 4deg;
}

.tool-marks {
  z-index: 9;
  width: 90px;
  height: 36px;
  opacity: var(--marks-opacity);
  background: repeating-linear-gradient(8deg, transparent 0 11px, rgba(10, 8, 6, 0.5) 12px 14px, transparent 15px 23px);
  filter: blur(0.3px);
}

.tool-marks--left { left: 20%; top: 62%; transform: rotate(8deg); }
.tool-marks--right { right: 18%; top: 60%; transform: rotate(-12deg); }

.footprints {
  z-index: 2;
  width: 42px;
  height: 86px;
  opacity: 0.22;
  background:
    radial-gradient(ellipse at 50% 17%, rgba(0, 0, 0, 0.7) 0 20%, transparent 22%),
    radial-gradient(ellipse at 50% 65%, rgba(0, 0, 0, 0.62) 0 26%, transparent 28%);
  filter: blur(1px);
}

.footprints--left { left: 18%; bottom: 6%; transform: rotate(18deg); }
.footprints--right { right: 18%; bottom: 7%; transform: rotate(-15deg) scaleX(-1); }

.target-spot {
  z-index: 14;
  left: var(--target-x);
  top: var(--target-y);
  width: clamp(48px, 7vw, 78px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(var(--target-scale));
  opacity: 0;
  transition: left 290ms cubic-bezier(0.2, 0.72, 0.2, 1), top 290ms cubic-bezier(0.2, 0.72, 0.2, 1), opacity 220ms ease;
}

.app[data-state="playing"] .target-spot {
  opacity: 0.72;
}

.target-spot__ring,
.target-spot__core {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
}

.target-spot.is-resetting .target-spot__ring {
  animation: none;
}

.target-spot__ring {
  border: 1px solid rgba(181, 202, 193, 0.55);
  box-shadow: 0 0 24px rgba(153, 181, 170, 0.12), inset 0 0 14px rgba(153, 181, 170, 0.08);
  animation: target-pulse var(--beat-duration) linear infinite;
}

.target-spot__core {
  inset: 38%;
  background: rgba(189, 207, 199, 0.5);
  box-shadow: 0 0 14px rgba(182, 204, 194, 0.25);
}

@keyframes target-pulse {
  0% { transform: scale(1.78); opacity: 0.05; }
  58% { opacity: 0.56; }
  72% { transform: scale(0.72); opacity: 0.88; }
  82% { transform: scale(0.64); opacity: 0.25; }
  100% { transform: scale(1.78); opacity: 0; }
}

.target-spot.is-hit .target-spot__core {
  animation: target-hit 300ms ease-out;
}

@keyframes target-hit {
  0% { transform: scale(1); opacity: 0.8; }
  45% { transform: scale(2.8); opacity: 0.55; }
  100% { transform: scale(4); opacity: 0; }
}

.impact-mark {
  z-index: 13;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 26px;
  border: 2px solid rgba(72, 46, 27, 0.74);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5) rotate(-8deg);
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4);
}

.impact-mark.is-active {
  animation: impact-mark 510ms ease-out;
}

@keyframes impact-mark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.45) rotate(-8deg); }
  28% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15) rotate(-8deg); }
}

.shovel-anchor {
  position: absolute;
  z-index: 28;
  left: 0;
  top: 0;
  width: clamp(118px, 11.8vw, 174px);
  height: clamp(340px, 49vh, 570px);
  transform: translate3d(var(--shovel-x), var(--shovel-y), 0);
  transform-origin: 50% 10%;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(14px 18px 18px rgba(0, 0, 0, 0.28));
}

.shovel-anchor::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4%;
  bottom: -3%;
  width: 104%;
  height: 25%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.42) 0 18%, rgba(0, 0, 0, 0.2) 44%, transparent 72%);
  transform: translate3d(-2%, 8%, 0) rotate(-8deg);
}

.shovel-tool {
  width: 100%;
  height: 100%;
  transform: rotate(9deg);
  transform-origin: 50% 9%;
  will-change: transform;
}

.shovel-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.shovel-tool.is-digging-left {
  animation: shovel-dig-left 650ms cubic-bezier(0.18, 0.74, 0.19, 1);
}

.shovel-tool.is-digging-right {
  animation: shovel-dig-right 650ms cubic-bezier(0.18, 0.74, 0.19, 1);
}

@keyframes shovel-dig-left {
  0% { transform: rotate(9deg) translate3d(0, 0, 0); }
  18% { transform: rotate(-9deg) translate3d(-8px, 22px, 0); }
  40% { transform: rotate(-29deg) translate3d(-18px, 106px, 0) scale(0.98); }
  54% { transform: rotate(-25deg) translate3d(-16px, 116px, 0) scale(0.98); }
  70% { transform: rotate(34deg) translate3d(-86px, 20px, 0); }
  82% { transform: rotate(26deg) translate3d(-62px, -3px, 0); }
  100% { transform: rotate(9deg) translate3d(0, 0, 0); }
}

@keyframes shovel-dig-right {
  0% { transform: rotate(9deg) translate3d(0, 0, 0); }
  18% { transform: rotate(-9deg) translate3d(-8px, 22px, 0); }
  40% { transform: rotate(-29deg) translate3d(-18px, 106px, 0) scale(0.98); }
  54% { transform: rotate(-25deg) translate3d(-16px, 116px, 0) scale(0.98); }
  70% { transform: rotate(58deg) translate3d(72px, 8px, 0); }
  82% { transform: rotate(32deg) translate3d(42px, -8px, 0); }
  100% { transform: rotate(9deg) translate3d(0, 0, 0); }
}

.app.is-intro .shovel-anchor {
  --shovel-x: min(77vw, calc(50vw + 330px));
  --shovel-y: 19vh;
  transform: translate3d(var(--shovel-x), var(--shovel-y), 0) rotate(-8deg) scale(1.06);
  opacity: 0.92;
}

.app.is-finished .shovel-anchor {
  opacity: 0.38;
  transform: translate3d(calc(50vw + 250px), 47vh, 0) rotate(46deg) scale(0.82);
  transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.2s ease;
}

.particle-layer {
  position: absolute;
  inset: 0;
  z-index: 26;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.dirt-particle,
.dust-particle,
.score-particle {
  position: absolute;
  left: var(--particle-x);
  top: var(--particle-y);
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
}

.dirt-particle {
  z-index: 30;
  width: var(--particle-size);
  aspect-ratio: 1.4;
  border-radius: 48% 52% 45% 55%;
  background: var(--particle-color, #5a3921);
  box-shadow: inset 1px 1px 1px rgba(177, 119, 66, 0.16), 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: dirt-flight var(--particle-duration) cubic-bezier(0.14, 0.62, 0.3, 1) forwards;
}

@keyframes dirt-flight {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7); opacity: 0; }
  9% { opacity: 0.95; }
  48% { transform: translate3d(var(--particle-mid-x), var(--particle-mid-y), 0) rotate(var(--particle-mid-rot)) scale(1); }
  100% { transform: translate3d(var(--particle-dx), var(--particle-dy), 0) rotate(var(--particle-rot)) scale(0.72); opacity: 0; }
}


.soil-clod {
  z-index: 31;
  width: calc(var(--particle-size) * 2.5);
  height: calc(var(--particle-size) * 1.5);
  border-radius: 56% 44% 52% 48% / 56% 41% 59% 44%;
  background:
    radial-gradient(circle at 28% 35%, rgba(143, 99, 57, 0.36) 0 22%, transparent 23%),
    radial-gradient(circle at 64% 74%, rgba(22, 14, 10, 0.55) 0 18%, transparent 19%),
    linear-gradient(165deg, #5f3f28 0%, #3d2819 38%, #24170f 68%, #120d09 100%);
  box-shadow:
    inset 2px 2px 3px rgba(171, 118, 70, 0.18),
    inset -2px -2px 3px rgba(0, 0, 0, 0.24),
    0 5px 8px rgba(0, 0, 0, 0.34);
  animation: soil-clod-flight var(--particle-duration) cubic-bezier(0.16, 0.66, 0.25, 1) forwards;
}

.soil-clod::before,
.soil-clod::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  background: rgba(73, 48, 30, 0.82);
}

.soil-clod::before {
  width: 34%;
  height: 42%;
  left: 12%;
  top: 16%;
}

.soil-clod::after {
  width: 28%;
  height: 36%;
  right: 15%;
  bottom: 10%;
}

@keyframes soil-clod-flight {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7); opacity: 0; }
  10% { opacity: 1; }
  56% { transform: translate3d(var(--particle-mid-x), var(--particle-mid-y), 0) rotate(var(--particle-mid-rot)) scale(1.04); opacity: 1; }
  86% { opacity: 0.98; }
  100% { transform: translate3d(var(--particle-dx), var(--particle-dy), 0) rotate(var(--particle-rot)) scale(0.94); opacity: 0; }
}

.dust-particle {
  z-index: 29;
  width: var(--particle-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(144, 111, 82, 0.36);
  filter: blur(2.3px);
  animation: dust-rise var(--particle-duration) ease-out forwards;
}

@keyframes dust-rise {
  from { transform: translate3d(0, 0, 0) scale(0.4); opacity: 0; }
  18% { opacity: 0.6; }
  to { transform: translate3d(var(--particle-dx), var(--particle-dy), 0) scale(2.2); opacity: 0; }
}

.score-particle {
  z-index: 40;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(213, 225, 220, 0.9);
  text-shadow: 0 2px 8px #000;
  animation: score-rise 720ms ease-out forwards;
}

@keyframes score-rise {
  from { transform: translate3d(-50%, -10px, 0) scale(0.8); opacity: 0; }
  22% { opacity: 1; }
  to { transform: translate3d(-50%, -74px, 0) scale(1); opacity: 0; }
}

.status-message {
  position: absolute;
  z-index: 35;
  left: 50%;
  bottom: max(16%, calc(var(--safe-bottom) + 66px));
  max-width: min(88vw, 520px);
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(0.92rem, 1.6vw, 1.08rem);
  font-style: italic;
  text-align: center;
  color: rgba(211, 219, 215, 0.86);
  background: rgba(7, 10, 12, 0.1);
  text-shadow: 0 2px 18px #000;
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease, transform 350ms ease;
}

.status-message.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.finding-toast {
  position: absolute;
  z-index: 42;
  right: max(18px, var(--safe-right));
  top: max(92px, calc(var(--safe-top) + 76px));
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  width: min(460px, calc(100vw - 24px));
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(20, 27, 31, 0.92), rgba(8, 12, 15, 0.91));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transform: translate3d(25px, 0, 0) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease;
}

.finding-toast.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

.finding-toast__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(205, 219, 213, 0.14);
  border-radius: 14px;
  color: #a5b6ae;
  background: radial-gradient(circle at 35% 30%, rgba(151, 174, 163, 0.15), rgba(7, 10, 12, 0.4));
}

.finding-toast__icon svg {
  width: 34px;
  height: 34px;
}

.finding-toast__copy {
  min-width: 0;
  align-self: start;
}

.finding-toast__copy > * {
  display: block;
}

.finding-toast__copy strong {
  margin: 5px 0 3px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(0.88rem, 1.9vw, 0.98rem);
  line-height: 1.2;
  font-weight: 600;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.finding-toast__copy span:last-child {
  font-size: 0.72rem;
  color: var(--muted);
}

.rare-flash {
  position: absolute;
  inset: 0;
  z-index: 36;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%, rgba(174, 197, 187, 0.13), transparent 33%);
}

.rare-flash.is-active {
  animation: rare-flash 920ms ease-out;
}

@keyframes rare-flash {
  0% { opacity: 0; backdrop-filter: blur(0); }
  24% { opacity: 1; backdrop-filter: blur(2px) saturate(0.72); }
  48% { opacity: 0.55; }
  100% { opacity: 0; backdrop-filter: blur(0); }
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: calc(var(--safe-top) + 42px) var(--safe-right) calc(var(--safe-bottom) + 28px) var(--safe-left);
}

.overlay__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 53%, rgba(8, 12, 14, 0.12) 0 32%, rgba(2, 4, 5, 0.62) 76%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 40% 60%, rgba(0, 0, 0, 0.42));
  -webkit-backdrop-filter: blur(1.5px) saturate(0.82);
  backdrop-filter: blur(1.5px) saturate(0.82);
}

.overlay--intro {
  justify-items: center;
}

.intro-card {
  position: relative;
  width: min(840px, 96vw);
  padding: 42px clamp(26px, 6vw, 66px) 36px;
  text-align: center;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.85);
}

.intro-card::before,
.intro-card::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 78px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194, 212, 204, 0.42), transparent);
  transform: translateX(-50%);
}

.intro-card::before { top: 12px; }
.intro-card::after { bottom: 10px; }

.intro-card__kicker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45em;
  margin: 0 0 18px;
  color: #8d9d97;
}

.intro-card h1 {
  margin: 0;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(2.65rem, 6.5vw, 6rem);
  line-height: 0.84;
  letter-spacing: -0.048em;
  font-weight: 500;
  color: #e3e7e4;
}

.intro-card h1 span {
  display: block;
  white-space: nowrap;
}

.intro-card__subtitle {
  margin: 25px 0 28px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 2.7vw, 1.45rem);
  font-style: italic;
  color: #abb6b2;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.primary-button {
  border: 1px solid rgba(218, 231, 225, 0.6);
  color: #0b100e;
  background: linear-gradient(180deg, #cedbd5, #9daea6);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 36px rgba(0, 0, 0, 0.46), 0 0 22px rgba(185, 207, 197, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.primary-button:active {
  transform: translateY(1px) scale(0.985);
}

.primary-button svg,
.secondary-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.secondary-button {
  border: 1px solid var(--line-strong);
  color: #d8dfdc;
  background: rgba(15, 21, 25, 0.6);
}

.secondary-button:hover {
  border-color: rgba(218, 231, 225, 0.38);
  background: rgba(27, 35, 39, 0.78);
  transform: translateY(-2px);
}

.secondary-button:active {
  transform: translateY(1px) scale(0.985);
}

.intro-card__hint {
  max-width: 370px;
  margin: 20px auto 0;
  font-size: 0.74rem;
  line-height: 1.55;
  color: #78837f;
}

.overlay--result {
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(3, 5, 6, 0.3);
}

.result-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(340px, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
  width: min(970px, 96vw);
  max-width: 100%;
  min-width: 0;
  max-height: 100%;
}

.result-stone-wrap {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: end center;
  min-height: 430px;
  perspective: 700px;
}

.result-stone {
  position: relative;
  width: min(280px, 72vw);
  height: 390px;
  display: grid;
  place-items: center;
  padding: 58px 32px 40px;
  overflow: hidden;
  border: 1px solid rgba(180, 191, 184, 0.17);
  border-radius: 46% 46% 10% 10% / 24% 24% 7% 7%;
  color: rgba(44, 49, 46, 0.86);
  background:
    radial-gradient(circle at 32% 18%, rgba(194, 199, 192, 0.1) 0 2%, transparent 3%),
    radial-gradient(circle at 70% 46%, rgba(25, 29, 27, 0.14) 0 3%, transparent 4%),
    repeating-linear-gradient(83deg, transparent 0 17px, rgba(15, 18, 17, 0.055) 18px 19px),
    linear-gradient(125deg, #5f6864 0%, #88918c 18%, #555e5a 54%, #343b38 100%);
  box-shadow:
    inset 12px 10px 26px rgba(235, 239, 235, 0.07),
    inset -18px -16px 30px rgba(8, 10, 9, 0.38),
    0 34px 60px rgba(0, 0, 0, 0.62);
  transform: translateY(110%) rotateX(-5deg);
  animation: stone-rise 1.8s 320ms cubic-bezier(0.16, 0.82, 0.22, 1) forwards;
}

.result-stone::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.48;
  background: linear-gradient(90deg, transparent, rgba(228, 232, 228, 0.06) 38%, transparent 54%);
}

.result-stone strong {
  position: relative;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 2.5vw, 1.4rem);
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 1px 0 rgba(196, 203, 198, 0.18), 0 -1px 0 rgba(21, 24, 22, 0.5);
}

.result-stone__crack {
  position: absolute;
  top: 5%;
  left: 54%;
  width: 2px;
  height: 130px;
  background: #303633;
  transform: rotate(18deg);
  opacity: 0.55;
  box-shadow: 9px 34px 0 -0.5px #303633, -7px 77px 0 -0.5px #303633;
}

.result-stone__moss {
  position: absolute;
  top: 8%;
  left: 4%;
  width: 54%;
  height: 19%;
  border-radius: 70% 28% 54% 19%;
  background: radial-gradient(ellipse at 35% 55%, rgba(62, 84, 70, 0.52), rgba(40, 58, 47, 0.12) 63%, transparent 70%);
  filter: blur(1px);
}

.result-stone__fog {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -8%;
  height: 27%;
  background: radial-gradient(ellipse, rgba(157, 176, 168, 0.25), transparent 66%);
  filter: blur(16px);
  opacity: 0;
  animation: result-fog 2s 0.8s ease forwards;
}

@keyframes stone-rise {
  0% { transform: translateY(110%) rotateX(-5deg); filter: blur(3px); opacity: 0; }
  25% { opacity: 0.75; }
  100% { transform: translateY(0) rotateX(0); filter: blur(0); opacity: 1; }
}

@keyframes result-fog {
  to { opacity: 1; }
}

.result-card {
  position: relative;
  min-width: 0;
  max-width: 100%;
  padding: clamp(25px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(17, 23, 27, 0.91), rgba(7, 10, 13, 0.88));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(22px) saturate(0.78);
  backdrop-filter: blur(22px) saturate(0.78);
  animation: card-enter 850ms 700ms cubic-bezier(0.18, 0.8, 0.2, 1) both;
}

@keyframes card-enter {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.result-card__kicker {
  margin: 0 0 10px;
}

.result-card h2 {
  margin: 0 0 23px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 500;
  color: #e2e7e4;
}

.result-score {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.result-score span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--muted);
}

.result-score strong {
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: #dce4e0;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 18px 0 24px;
}

.result-grid div {
  min-width: 0;
  padding: 11px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.result-grid div:nth-child(3n) { border-right: 0; }
.result-grid div:nth-last-child(-n+3) { border-bottom: 0; }

.result-grid dt {
  margin-bottom: 5px;
  font-size: 0.65rem;
  color: var(--muted);
}

.result-grid dd {
  margin: 0;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d6ddda;
}

.result-findings {
  margin: -6px 0 22px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.result-findings__label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--muted);
}

.result-findings__list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 29px;
}

.result-finding {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid rgba(216, 229, 223, 0.11);
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1.15;
  color: #c8d2ce;
  background: rgba(255, 255, 255, 0.025);
}

.result-finding svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.result-finding span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-finding strong {
  color: #e2e7e4;
  font-variant-numeric: tabular-nums;
}

.result-findings__empty {
  font-size: 0.72rem;
  color: var(--dim);
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.result-actions > * {
  flex: 1 1 170px;
}

.collection-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(78dvh, 720px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(210, 224, 217, 0.17);
  border-radius: 22px;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(18, 24, 29, 0.98), rgba(7, 10, 13, 0.985));
  box-shadow: 0 30px 110px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

.collection-dialog[open] {
  animation: dialog-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.collection-dialog::backdrop {
  background: rgba(1, 3, 4, 0.78);
  -webkit-backdrop-filter: blur(8px) saturate(0.7);
  backdrop-filter: blur(8px) saturate(0.7);
}

@keyframes dialog-in {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--line);
}

.dialog-head h2 {
  margin: 5px 0 0;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 4vw, 2rem);
  font-weight: 500;
}

.dialog-kicker {
  margin: 0;
}

.icon-button--close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
}

.collection-summary {
  margin: 0;
  padding: 16px 24px 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: calc(min(78dvh, 720px) - 138px);
  padding: 16px 24px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.collection-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(218, 231, 225, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.023);
}

.collection-item.is-locked {
  opacity: 0.38;
  filter: grayscale(1);
}

.collection-item__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(218, 231, 225, 0.1);
  border-radius: 12px;
  color: #9fb0a8;
  background: rgba(7, 10, 12, 0.45);
}

.collection-item__icon svg {
  width: 27px;
  height: 27px;
}

.collection-item__copy {
  min-width: 0;
}

.collection-item__copy strong,
.collection-item__copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-item__copy strong {
  font-size: 0.82rem;
  font-weight: 650;
  color: #d6ddda;
}

.collection-item__copy span {
  margin-top: 4px;
  font-size: 0.65rem;
  color: var(--dim);
}

.collection-item__count {
  position: absolute;
  right: 8px;
  top: 7px;
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 99px;
  font-size: 0.58rem;
  text-align: center;
  color: #aab7b2;
  background: rgba(0, 0, 0, 0.28);
}

.footer {
  position: absolute;
  z-index: 30;
  left: var(--safe-left);
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  text-align: center;
  font-size: 0.63rem;
  letter-spacing: 0.04em;
  color: rgba(155, 166, 161, 0.48);
  pointer-events: none;
}

.noscript-message {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: #e3e7e4;
  background: #080b10;
}

.app[data-state="playing"] .overlay--intro {
  animation: intro-out 620ms ease forwards;
  pointer-events: none;
}

@keyframes intro-out {
  to { opacity: 0; visibility: hidden; }
}

.app[data-state="finished"] .fog--back,
.app[data-state="finished"] .fog--middle,
.app[data-state="finished"] .fog--front {
  animation-duration: 75s;
  opacity: 0.22;
  transition: opacity 1.8s ease;
}

.app.is-slow-motion .scene,
.app.is-slow-motion .shovel-tool,
.app.is-slow-motion .dirt-particle {
  animation-duration: 1.4s !important;
}

/* Rendering budget: preserve depth with gradients and shadows while keeping
   continuously moving layers on the compositor-friendly path. */
* {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.app *,
.collection-dialog,
.collection-dialog::backdrop,
.error-app * {
  filter: none !important;
  mix-blend-mode: normal !important;
}

.scene {
  contain: layout paint;
}

.clouds {
  filter: none;
  animation: none;
}

.fog {
  filter: none;
  mix-blend-mode: normal;
  contain: layout paint;
}

.fog--back,
.fog--front {
  animation: none;
}

.fog--middle {
  animation-duration: 36s;
  animation-timing-function: steps(60, end);
}

.grain {
  inset: -12%;
  width: 124%;
  height: 124%;
  opacity: 0.026;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(226, 234, 231, 0.42) 0 0.45px, transparent 0.7px),
    radial-gradient(circle at 75% 65%, rgba(226, 234, 231, 0.28) 0 0.4px, transparent 0.68px),
    repeating-linear-gradient(17deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px);
  background-size: 4px 4px, 5px 5px, 7px 7px;
  animation: none;
  mix-blend-mode: normal;
}

.ambient-leaves span {
  filter: none;
  animation: none;
  will-change: transform, opacity;
}

.ambient-leaves span:nth-child(1),
.ambient-leaves span:nth-child(2) {
  animation-name: leaf-fall;
  animation-timing-function: steps(90, end);
  animation-iteration-count: infinite;
}

@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .ambient-leaves span:nth-child(n + 3) {
    display: none;
  }
}

@media (max-width: 840px) {
  :root {
    --shovel-x: calc(50vw + 92px);
    --shovel-y: 30vh;
  }

  .tree {
    width: min(46vw, 360px);
    bottom: 28%;
  }
  .graveyard-fence {
    inset: 50% -8% 18%;
    opacity: 0.36;
  }

  .cemetery--mid {
    inset: 46% 0 22%;
  }

  .cemetery-foreground {
    inset: 58% 0 3%;
    opacity: 0.76;
  }


  .hud {
    top: max(72px, calc(var(--safe-top) + 54px));
    left: var(--safe-left);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100vw - var(--safe-left) - var(--safe-right));
    border-radius: 14px;
  }

  .stat {
    min-height: 53px;
    padding: 9px 9px 8px;
  }

  .stat:nth-child(even) { border-right: 1px solid rgba(219, 231, 226, 0.08); }
  .stat:nth-child(3n) { border-right: 0; }
  .stat:nth-last-child(-n+3) { border-bottom: 0; }
  .stat:nth-child(4) { border-bottom: 0; }

  .stat__label { font-size: 0.64rem; margin-bottom: 5px; }
  .stat__value { font-size: clamp(0.82rem, 3.4vw, 1rem); }

  .grave-zone {
    width: min(118vw, 860px);
    height: min(66vh, 700px);
    bottom: -3%;
  }

  .shovel-anchor {
    width: clamp(94px, 16vw, 128px);
    height: clamp(300px, 40vh, 430px);
  }

  .finding-toast {
    top: max(92px, calc(var(--safe-top) + 78px));
    right: max(10px, var(--safe-right));
    bottom: auto;
    width: min(68vw, 320px);
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 11px;
    padding: 10px 12px 10px 10px;
    transform: translate3d(16px, 0, 0) scale(0.97);
  }

  .finding-toast.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .status-message {
    bottom: max(14%, calc(var(--safe-bottom) + 56px));
  }

  .result-layout {
    grid-template-columns: 1fr;
    width: min(580px, 100%);
    gap: 0;
    padding: 12px 0 28px;
  }

  .result-stone-wrap {
    position: absolute;
    inset: -50px 0 auto;
    min-height: 270px;
    opacity: 0.3;
    filter: blur(1px);
  }

  .result-stone {
    width: 210px;
    height: 285px;
  }

  .result-stone__fog {
    left: 0;
    right: 0;
  }

  .result-card {
    z-index: 2;
    margin-top: 14px;
  }
}

@media (max-width: 560px) {
  .topbar {
    gap: 6px;
  }

  .depth-meter {
    grid-template-columns: auto;
    width: auto;
    min-width: 64px;
    gap: 0;
    min-height: 44px;
    padding: 7px 10px;
  }

  .depth-meter__track,
  .depth-meter__label { display: none; }
  .depth-meter__value { min-width: 40px; text-align: center; font-size: 0.72rem; }

  .round-timer {
    min-width: 108px;
    min-height: 44px;
    padding: 6px 10px 7px;
    column-gap: 7px;
  }

  .round-timer__label { font-size: 0.64rem; letter-spacing: 0.1em; }
  .round-timer__value { min-width: 46px; font-size: 1rem; }

  .icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .top-actions { gap: 6px; }

  .hud {
    top: max(64px, calc(var(--safe-top) + 48px));
    width: min(244px, calc(100vw - 24px));
  }

  .grave-zone {
    width: 118vw;
    max-width: 720px;
    height: 59vh;
    min-height: 355px;
    bottom: 1%;
  }
  .grave-stone--near-left,
  .grave-stone--near-right {
    width: clamp(60px, 18vw, 88px);
    height: clamp(102px, 26vw, 144px);
    opacity: 0.72;
  }

  .grave-cross--near-left,
  .grave-cross--near-right {
    height: clamp(102px, 24vw, 148px);
    opacity: 0.68;
  }


  .grave-shaft { left: 23%; width: 54%; top: 45%; }
  .grave-mouth { left: 19.5%; width: 61%; top: 39%; height: 15%; }
  .grave-rim { left: 17.5%; width: 65%; top: 37.5%; }

  .dirt-pile { width: 46%; }
  .dirt-pile--left { left: 1%; top: 43%; }
  .dirt-pile--right { right: 0; top: 41%; }

  .target-spot { width: 58px; }

  .shovel-anchor {
    width: 104px;
    height: 330px;
  }

  .app.is-intro .shovel-anchor {
    --shovel-x: 72vw;
    --shovel-y: 26vh;
    opacity: 0.52;
  }

  .intro-card {
    padding: 32px 18px 28px;
  }

  .intro-card h1 {
    font-size: clamp(2.1rem, 11.2vw, 3.45rem);
    line-height: 0.88;
  }

  .intro-card__subtitle {
    margin: 20px 0 24px;
  }

  .intro-card__hint {
    max-width: 290px;
  }

  .primary-button,
  .secondary-button {
    min-height: 52px;
    font-size: 0.73rem;
  }

  .result-card {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .result-card h2 {
    margin-bottom: 17px;
  }

  .result-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .result-grid div,
  .result-grid div:nth-child(3n) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .result-grid div:nth-child(even) { border-right: 0; }
  .result-grid div:nth-last-child(-n+2) { border-bottom: 0; }

  .result-findings {
    margin-bottom: 17px;
    padding-top: 12px;
  }

  .result-finding {
    font-size: 0.68rem;
  }

  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 14px;
  }

  .dialog-head {
    padding-inline: 18px;
  }

  .collection-summary {
    padding-inline: 18px;
  }

  .collection-item {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    min-height: 65px;
    padding: 9px;
  }

  .collection-item__icon {
    width: 38px;
    height: 38px;
  }

  .footer {
    font-size: 0.64rem;
  }
}

@media (max-width: 360px) {
  .depth-meter {
    min-width: 86px;
    padding-inline: 8px;
    gap: 5px;
  }

  .depth-meter__label {
    max-width: 33px;
    overflow: hidden;
    text-overflow: clip;
    font-size: 0.64rem;
  }

  .round-timer {
    min-width: 100px;
    padding-inline: 7px;
    column-gap: 5px;
  }

  .round-timer__label { font-size: 0.64rem; }
  .round-timer__value { min-width: 42px; font-size: 0.94rem; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .topbar {
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .depth-meter {
    min-height: 36px;
    height: 36px;
  }

  .round-timer {
    top: max(8px, env(safe-area-inset-top));
    min-height: 36px;
    height: 36px;
    padding-block: 5px;
    grid-template-rows: auto 2px;
    row-gap: 3px;
  }

  .round-timer__value { font-size: 0.98rem; }

  .icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .location-mark {
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .hud {
    top: max(50px, calc(env(safe-area-inset-top) + 44px));
    left: var(--safe-left);
    width: min(460px, 62vw);
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .stat {
    min-height: 43px;
    padding: 7px 7px 6px;
    border-right: 1px solid rgba(219, 231, 226, 0.08) !important;
    border-bottom: 0 !important;
  }

  .stat:last-child { border-right: 0 !important; }
  .stat__label { font-size: 0.64rem; letter-spacing: 0.09em; }
  .stat__value { font-size: 0.82rem; }

  .grave-zone {
    width: min(78vw, 760px);
    height: 76vh;
    left: 58%;
    bottom: -14%;
  }

  .shovel-anchor {
    height: 78vh;
    width: auto;
  }

  .intro-card {
    padding: 15px 24px;
  }

  .intro-card h1 {
    font-size: clamp(2rem, 7.4vh, 3.45rem);
  }

  .intro-card__subtitle {
    margin: 12px 0 15px;
  }

  .intro-card__hint {
    margin-top: 10px;
  }

  .result-layout {
    grid-template-columns: 0.55fr 1fr;
    width: min(940px, 95vw);
  }

  .result-stone-wrap {
    position: relative;
    inset: auto;
    min-height: 290px;
    opacity: 0.76;
  }

  .result-stone {
    width: 190px;
    height: 270px;
  }

  .result-card {
    margin: 0;
    padding: 20px 24px;
  }

  .result-card h2 { margin-bottom: 12px; }
  .result-score { padding: 10px 0; }
  .result-grid { margin: 10px 0 12px; }
  .result-grid div { padding: 7px 9px; }
  .result-findings { margin: -4px 0 12px; padding-top: 10px; }
  .result-findings__label { margin-bottom: 7px; }
  .result-finding { padding: 5px 8px; }

  .footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .clouds,
  .fog,
  .ambient-leaves span,
  .grain,
  .target-spot__ring,
  .round-timer {
    animation: none !important;
  }

  .parallax-layer {
    transform: none !important;
  }

  .location-mark {
    transition: none !important;
  }

  .grave-zone.is-shaking {
    animation: none;
  }

  .shovel-tool.is-digging-left,
  .shovel-tool.is-digging-right {
    animation-duration: 250ms;
    animation-timing-function: ease-out;
  }

  .result-stone,
  .result-card,
  .result-stone__fog {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }

  .dirt-particle,
  .dust-particle,
  .score-particle {
    animation-duration: 280ms !important;
  }
}

/* Samostatná stránka 404 */
.error-app {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  padding: 32px 18px;
  background:
    radial-gradient(circle at 68% 17%, rgba(109, 135, 151, 0.14), transparent 17%),
    linear-gradient(180deg, #060a0f 0%, #0d141b 54%, #050706 100%);
}

.error-app::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  bottom: -23%;
  width: 130%;
  height: 63%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 14%, rgba(48, 61, 51, 0.2), transparent 38%),
    linear-gradient(180deg, #111712, #050706 70%);
  transform: translateX(-50%);
}

.error-app::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 25%, rgba(0, 0, 0, 0.68) 100%);
}

.error-moon {
  position: absolute;
  top: 10%;
  right: 16%;
  width: clamp(70px, 10vw, 126px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.62;
  background: radial-gradient(circle at 37% 33%, #b8c4c3, #607176 72%, #2f3b40);
  box-shadow: 0 0 60px rgba(132, 159, 168, 0.15);
}

.error-fog {
  position: absolute;
  z-index: 1;
  left: -20%;
  right: -20%;
  bottom: 4%;
  height: 31%;
  opacity: 0.3;
  filter: blur(24px);
  background:
    radial-gradient(ellipse at 16% 50%, rgba(145, 164, 160, 0.19), transparent 28%),
    radial-gradient(ellipse at 47% 58%, rgba(132, 151, 148, 0.16), transparent 30%),
    radial-gradient(ellipse at 78% 42%, rgba(156, 172, 170, 0.15), transparent 30%);
  animation: fog-drift-front 34s ease-in-out infinite alternate;
}

.error-content {
  position: relative;
  z-index: 6;
  width: min(590px, 94vw);
  text-align: center;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.85);
}

.error-code {
  display: block;
  margin-bottom: 10px;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.28em;
  color: #87958f;
}

.error-content h1 {
  margin: 0;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 11vw, 7rem);
  line-height: 0.94;
  font-weight: 500;
  letter-spacing: -0.045em;
}

.error-content p {
  max-width: 420px;
  margin: 22px auto 28px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-style: italic;
  color: #a3afaa;
}

.error-content .primary-button {
  text-decoration: none;
}

.error-footer {
  position: absolute;
  z-index: 6;
  left: 16px;
  right: 16px;
  bottom: max(12px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 0.62rem;
  color: rgba(155, 166, 161, 0.48);
}