#map-effects,
[data-win-effects] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#map-effects { z-index: 3; }
[data-win-effects] { border-radius: inherit; }

#shovel-dialog[open] { animation: fx-dialog-enter 170ms ease-out; }
#win-dialog[open] { animation: fx-dialog-enter 230ms ease-out; }

.fx-impact {
  --tool-size: clamp(30px, 5.6vw, 54px);
  --impact-delay: var(--delay, 0s);
  position: absolute;
  left: var(--x);
  top: var(--y);
}

.fx-impact::before,
.fx-impact::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  translate: -50% -50%;
  border-radius: 50%;
}

.fx-impact::before {
  width: clamp(14px, 2.8vw, 24px);
  height: 10px;
  background: #75412378;
  box-shadow: 0 1px 0 #fff4ce, 0 -2px 0 #62472e80;
  animation: fx-ground 440ms ease-out calc(var(--impact-delay) + 130ms) both;
}

.fx-impact::after {
  width: clamp(20px, 4vw, 33px);
  height: clamp(14px, 2.5vw, 23px);
  border: 1px solid #885227;
  box-shadow: 0 0 0 1px #fff1c7ae;
  animation: fx-impact-ring 420ms ease-out calc(var(--impact-delay) + 150ms) both;
}

.fx-impact.is-excavator { --tool-size: clamp(44px, 8vw, 74px); }
.fx-impact.is-cash::after { border-color: #63762b; box-shadow: 0 0 0 2px #fff1ac; }
.fx-impact.is-tool-only::before,
.fx-impact.is-tool-only::after { display: none; }

.fx-impact.is-blast-origin::before {
  width: clamp(24px, 4.6vw, 54px);
  height: clamp(17px, 3.1vw, 34px);
  border: 2px solid #a14d27;
  background: none;
  box-shadow: 0 0 0 1px #fff0bb;
  animation: fx-blast-ring 600ms ease-out 90ms both;
}

.fx-impact.is-blast-origin::after {
  width: clamp(27px, 5.2vw, 60px);
  height: clamp(19px, 3.5vw, 38px);
  border: 3px solid #eab45a;
  box-shadow: 0 0 0 1px #a14d27b3;
  animation: fx-blast-ring 560ms ease-out both;
}

.is-blast-edge::before { background: #b4754285; }
.is-blast-edge::after { border-color: #b97538; }
.is-blast-edge.is-cash::after { border-color: #63762b; }

.fx-blast-burst,
.fx-blast-spark,
.fx-blast-label {
  position: absolute;
  top: 0;
  left: 0;
  translate: -50% -50%;
}

.fx-blast-burst {
  width: clamp(35px, 7vw, 80px);
  aspect-ratio: 1;
  background: radial-gradient(#ffe9a9 10%, #f8c669 36%, #b9602d 68%);
  clip-path: polygon(50% 0, 61% 30%, 86% 14%, 78% 40%, 100% 50%, 74% 60%, 89% 82%, 61% 74%, 50% 100%, 40% 73%, 13% 83%, 24% 59%, 0 50%, 25% 39%, 13% 14%, 40% 28%);
  animation: fx-blast-burst 430ms ease-out both;
}

.fx-blast-spark {
  z-index: 1;
  width: 11px;
  height: 3px;
  border-radius: 50%;
  background: #f0b947;
  box-shadow: 0 0 0 1px #a35935;
  animation: fx-blast-spark 520ms ease-out var(--delay) both;
}

.fx-blast-spark:nth-child(3n) { width: 8px; background: #fcdf8d; }

.fx-blast-label {
  --label-offset-y: 23px;
  z-index: 2;
  padding: 3px 7px 4px;
  border: 1px solid #862e1c;
  border-radius: 4px;
  color: #7c281a;
  background: #ffde92;
  box-shadow: 0 2px #79382095;
  font: 800 clamp(.8rem, 2.4vw, 1.25rem)/1 var(--display);
  animation: fx-blast-label 850ms cubic-bezier(.2, .7, .26, 1) 40ms both;
}

.fx-impact[data-edge="left"] .fx-blast-label { translate: -14% -50%; }
.fx-impact[data-edge="right"] .fx-blast-label { translate: -86% -50%; }
.fx-impact[data-edge-y="bottom"] .fx-blast-label { --label-offset-y: -15px; }
.fx-impact[data-edge-y="top"].is-cash .fx-blast-label { --label-offset-y: 46px; }

.fx-tool {
  position: absolute;
  z-index: 1;
  left: calc(var(--tool-size) * -.25);
  top: calc(var(--tool-size) * -.75);
  width: var(--tool-size);
  aspect-ratio: 1;
  transform-origin: 25% 75%;
  filter: drop-shadow(1px 0 #fff1cd) drop-shadow(-1px -1px #fff1cd) drop-shadow(0 2px #35271ca6);
  animation: fx-shovel 580ms cubic-bezier(.23, .74, .3, 1) var(--impact-delay) both;
}

.fx-tool::before,
.fx-tool::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--tool-color, #a54c22) 53%, #563721 78%);
  mask: url(shovel-mark.svg) center / contain no-repeat;
}

.fx-tool::after { display: none; }

.is-excavator .fx-tool {
  left: calc(var(--tool-size) * -.76);
  top: calc(var(--tool-size) * -.8);
  transform-origin: 82% 70%;
  animation-name: fx-excavator;
}

.is-excavator .fx-tool::before,
.is-excavator .fx-tool::after {
  background: linear-gradient(#c99127 12%, var(--tool-color, #9c6713) 70%, #4d3622 71%);
  mask-image: url(excavator-mark.svg);
}

.is-broken .fx-tool { animation: fx-broken-tool 940ms ease-out var(--impact-delay) both; }
.is-broken .fx-tool::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  animation: fx-broken-handle 750ms ease-out calc(var(--impact-delay) + 150ms) both;
}

.is-broken .fx-tool::after {
  display: block;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  animation: fx-broken-blade 750ms ease-out calc(var(--impact-delay) + 150ms) both;
}

.is-excavator.is-broken .fx-tool { animation-name: fx-excavator-stall; }
.is-excavator.is-broken .fx-tool::before { clip-path: none; animation: none; }
.is-excavator.is-broken .fx-tool::after {
  inset: 12% auto auto 29%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #504f42;
  mask: none;
  clip-path: none;
  animation: fx-engine-smoke 650ms ease-out 160ms both;
}

.fx-dust,
.fx-banknote {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
}

.fx-dust {
  width: 7px;
  height: 5px;
  border-radius: 65% 35% 52% 48%;
  background: #a36938;
  box-shadow: 0 1px 0 #69422a80;
  animation: fx-dust 440ms cubic-bezier(.18, .6, .28, 1) var(--delay, .15s) both;
}

.fx-dust:nth-child(3n) { width: 5px; height: 3px; background: #69452c; }
.fx-dust:nth-child(3n + 1) { width: 9px; height: 7px; background: #c6915c; }

.fx-banknote {
  z-index: 2;
  width: clamp(16px, 3vw, 24px);
  height: clamp(10px, 1.8vw, 14px);
  border: 1px solid #4d5f2a;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 34%, #fbe6a9 34% 62%, transparent 62%), #9eb364;
  box-shadow: inset 0 0 0 1px #deed9f, 1px 2px 0 #577038, 1px 3px 0 #37461e;
  animation: fx-banknote 850ms ease-out var(--delay, .15s) both;
}

.fx-cash {
  --cash-align: -50%;
  --cash-start: -26px;
  --cash-stop: -39px;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  translate: var(--cash-align) 0;
  min-width: max-content;
  padding: 4px 8px;
  border: 1px solid #435324;
  border-radius: 5px;
  background: #ffedb3;
  color: #32431e;
  box-shadow: 0 2px 0 #435324a6;
  font: 800 clamp(.75rem, 2.1vw, 1.04rem)/1 var(--display);
  white-space: nowrap;
  animation: fx-cash 1050ms cubic-bezier(.17, .66, .27, 1) calc(var(--impact-delay) + 150ms) both;
}

.fx-impact[data-edge="left"] .fx-cash { --cash-align: -14%; }
.fx-impact[data-edge="right"] .fx-cash { --cash-align: -86%; }
.fx-impact[data-edge-y="top"] .fx-cash { --cash-start: 6px; --cash-stop: 19px; }

.fx-politician {
  position: absolute;
  z-index: 4;
  left: var(--x);
  top: var(--y);
  width: clamp(36px, 7vw, 60px);
  aspect-ratio: 1;
  translate: -50% -78%;
  animation: fx-politician 2170ms cubic-bezier(.45, 0, .3, 1) both;
}

.fx-politician::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  width: 88%;
  height: 18%;
  margin: auto;
  border-radius: 50%;
  background: #62432955;
}

.fx-politician-avatar {
  position: absolute;
  inset: 0;
  background: url(politikus.svg) center / contain no-repeat;
  filter: drop-shadow(0 1px 0 #ffedb3);
  font-size: 0;
  animation: fx-politician-step 245ms ease-in-out 125ms 7 alternate both;
}

.fx-politician-name {
  position: absolute;
  top: 92%;
  left: 50%;
  translate: -50% 0;
  padding: 3px 6px;
  border: 1px solid #71452c;
  border-radius: 4px;
  background: #fff1cf;
  color: #633619;
  box-shadow: 0 1px 0 #69412584;
  font: 800 clamp(.63rem, 1.6vw, .88rem)/1 var(--display);
  white-space: nowrap;
}

.fx-politician-bag {
  position: absolute;
  left: calc(37% - var(--facing, 1) * 35%);
  top: 61%;
  display: grid;
  width: 48%;
  height: 37%;
  place-items: center;
  border: 1px solid #513822;
  border-radius: 24% 26% 31% 33%;
  background: #a56731;
  color: #ffe4a2;
  box-shadow: inset 0 1px #e0ab65;
  font-size: 0;
  animation: fx-bag 2170ms ease-out both;
}

.fx-politician-bag::before {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 48%;
  height: 35%;
  border: 1px solid #513822;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.fx-politician-bag::after {
  content: "Ft";
  font: 800 clamp(.54rem, 1.3vw, .71rem)/1 var(--display);
}

.fx-search-dog,
.fx-search-dog-paw,
.fx-search-dog-sniff {
  position: absolute;
  left: var(--x);
  top: var(--y);
  pointer-events: none;
}

.fx-search-dog {
  z-index: 6;
  display: grid;
  place-items: center;
  width: clamp(39px, 8vw, 65px);
  aspect-ratio: 1;
  translate: -50% -83%;
}

.fx-search-dog::before {
  content: "";
  position: absolute;
  inset: auto 9% 10%;
  height: 18%;
  border-radius: 50%;
  background: #3b281d50;
  animation: fx-dog-shadow 145ms ease-in-out alternate infinite;
}

.fx-search-dog-facing {
  width: 100%;
  height: 100%;
  animation: fx-dog-arrive var(--dog-sniff-time) ease-out var(--dog-walk-time) both;
}

.fx-search-dog-body {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform-origin: 50% 72%;
  animation: fx-dog-trot calc(var(--dog-walk-time) / 8) ease-in-out 8 alternate,
    fx-dog-dip var(--dog-sniff-time) ease-in-out var(--dog-walk-time) forwards;
}

.fx-search-dog-sprite {
  display: block;
  margin-top: -5%;
  font-size: clamp(35px, 7.2vw, 58px);
  line-height: 1;
  filter: drop-shadow(0 1px 0 #ffefcf) drop-shadow(0 2px 1px #45332153);
}

.fx-search-dog-tag {
  position: absolute;
  left: 25%;
  top: 54%;
  width: clamp(5px, 1.2vw, 8px);
  aspect-ratio: 1;
  border: 1px solid #6c4b1d;
  border-radius: 50%;
  background: #f3c86a;
  box-shadow: 0 -2px #a44e35, 0 0 0 1px #fff2d0;
}

.fx-search-dog-paw {
  z-index: 4;
  width: 12px;
  height: 12px;
  translate: calc(-50% + var(--paw-side)) -50%;
  color: #6d4b30;
  animation: fx-dog-paw 640ms ease-out var(--paw-delay) both;
}

.fx-search-dog-paw::before,
.fx-search-dog-paw::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: currentColor;
}

.fx-search-dog-paw::before { inset: 48% 21% 9%; }
.fx-search-dog-paw::after {
  width: 3px;
  height: 3px;
  left: 1px;
  top: 4px;
  box-shadow: 3px -3px, 6px -2px, 8px 1px;
}

.fx-search-dog-sniff {
  z-index: 5;
  width: clamp(29px, 5.5vw, 48px);
  aspect-ratio: 1.7;
  translate: -50% -50%;
}

.fx-search-dog-sniff::before,
.fx-search-dog-sniff::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed #966434;
  border-radius: 50%;
  animation: fx-dog-sniff 370ms ease-out var(--dog-walk-time) both;
}

.fx-search-dog-sniff::after {
  border-color: #fdf0bd;
  animation-delay: calc(var(--dog-walk-time) + 75ms);
}

.fx-confetti {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  width: 8px;
  height: 4px;
  border-radius: 1px;
  background: var(--color, #9b3e1d);
  box-shadow: 0 1px #3d301c50;
  animation: fx-confetti 2050ms cubic-bezier(.11, .65, .46, 1) var(--delay, 0s) both;
}

.fx-confetti:nth-child(3n) { width: 6px; height: 6px; border-radius: 50%; }
.fx-confetti:nth-child(5n) { width: 10px; height: 3px; }
.fx-confetti.is-banknote {
  width: 17px;
  height: 10px;
  border: 1px solid #4d5f2a;
  border-radius: 2px;
  background: linear-gradient(90deg, #9eb364 36%, #fbe6a9 36% 64%, #9eb364 64%);
}

.clue-area.is-signaling::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid #a94d21;
  border-radius: inherit;
  animation: fx-sonar 650ms cubic-bezier(.1, .7, .33, 1) 2 both;
}

@keyframes fx-dialog-enter {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes fx-ground {
  0% { opacity: 0; scale: .3; }
  25% { opacity: 1; scale: 1.25; }
  100% { opacity: 0; scale: 1.05; }
}

@keyframes fx-impact-ring {
  0% { opacity: 1; scale: .5; }
  100% { opacity: 0; scale: 1.95; }
}

@keyframes fx-blast-ring {
  0% { opacity: .9; scale: .45; }
  75% { opacity: .6; }
  100% { opacity: 0; scale: 3; }
}

@keyframes fx-blast-burst {
  0% { opacity: .7; scale: .15; rotate: -13deg; }
  32% { opacity: .94; scale: 1.1; }
  100% { opacity: 0; scale: 1.32; rotate: 11deg; }
}

@keyframes fx-blast-spark {
  0% { opacity: 0; transform: rotate(var(--spin)) scale(.3); }
  15% { opacity: 1; }
  80% { opacity: .88; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)) scale(.45); }
}

@keyframes fx-blast-label {
  0% { opacity: 0; transform: translateY(calc(var(--label-offset-y) * .7)) rotate(-12deg) scale(.64); }
  26% { opacity: 1; transform: translateY(var(--label-offset-y)) rotate(-6deg) scale(1.14); }
  43%, 75% { opacity: 1; transform: translateY(var(--label-offset-y)) rotate(-5deg); }
  100% { opacity: 0; transform: translateY(calc(var(--label-offset-y) - 5px)) rotate(-5deg) scale(.93); }
}

@keyframes fx-shovel {
  0% { opacity: 0; transform: translate(6px, -14px) rotate(-53deg) scale(.75); }
  18% { opacity: 1; transform: translate(1px, -11px) rotate(-40deg); }
  32% { opacity: 1; transform: translateY(2px) rotate(19deg); }
  58% { opacity: 1; transform: translateY(-6px) rotate(-12deg) scale(1.04); }
  100% { opacity: 0; transform: translateY(-12px) rotate(-30deg) scale(.8); }
}

@keyframes fx-excavator {
  0% { opacity: 0; transform: translate(-18px, -4px) rotate(-7deg); }
  21% { opacity: 1; transform: translate(-3px, -2px) rotate(-6deg); }
  32% { opacity: 1; transform: translate(0, 4px) rotate(10deg) scaleY(.92); }
  58% { opacity: 1; transform: translate(2px, 0) rotate(-6deg); }
  100% { opacity: 0; transform: translate(-11px, -3px) rotate(-8deg) scale(.88); }
}

@keyframes fx-broken-tool {
  0% { opacity: 0; transform: translateY(-13px) rotate(-38deg) scale(.83); }
  11% { opacity: 1; transform: translateY(-9px) rotate(-28deg); }
  17% { opacity: 1; transform: translateY(3px) rotate(18deg); }
  73% { opacity: 1; transform: translateY(3px) rotate(18deg); }
  100% { opacity: 0; transform: translateY(5px) rotate(18deg); }
}

@keyframes fx-broken-handle {
  40% { transform: translate(16px, -18px) rotate(43deg); }
  100% { transform: translate(23px, 9px) rotate(64deg); }
}

@keyframes fx-excavator-stall {
  0% { opacity: 0; transform: translateX(-16px) rotate(-7deg); }
  20% { opacity: 1; transform: translateY(4px) rotate(12deg); }
  30% { transform: rotate(-6deg); }
  45%, 75% { opacity: 1; transform: translateY(2px) rotate(5deg); }
  100% { opacity: 0; transform: translateY(2px) rotate(5deg); }
}

@keyframes fx-engine-smoke {
  from { opacity: 0; transform: scale(.5); }
  24% { opacity: .78; }
  to { opacity: 0; transform: translate(3px, -26px) scale(2.25); }
}

@keyframes fx-broken-blade {
  40% { transform: translate(-13px, -6px) rotate(-27deg); }
  100% { transform: translate(-22px, 13px) rotate(-43deg); }
}

@keyframes fx-dust {
  0% { opacity: 0; transform: scale(.38); }
  17% { opacity: 1; }
  68% { opacity: .8; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 8px)) rotate(var(--spin)) scale(.54); }
}

@keyframes fx-banknote {
  0% { opacity: 0; transform: translateY(2px) rotate(-18deg) scale(.3); }
  15% { opacity: 1; }
  59% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 17px)) rotate(calc(var(--spin) + 38deg)) scale(.78); }
}

@keyframes fx-cash {
  0% { opacity: 0; transform: translateY(var(--cash-start)) scale(.65); }
  16% { opacity: 1; transform: translateY(var(--cash-stop)) scale(1.12) rotate(-4deg); }
  31%, 78% { opacity: 1; transform: translateY(var(--cash-stop)) rotate(-4deg); }
  100% { opacity: 0; transform: translateY(calc(var(--cash-stop) - 6px)) rotate(-4deg) scale(.96); }
}

@keyframes fx-politician {
  0% { opacity: 0; transform: scale(.65); }
  12% { opacity: 1; transform: scale(1); }
  83% { left: var(--to-x); top: var(--to-y); opacity: 1; transform: scale(1); }
  100% { left: var(--to-x); top: var(--to-y); opacity: 0; transform: scale(.84); }
}

@keyframes fx-politician-step {
  from { transform: translateY(1px) rotate(-6deg); }
  to { transform: translateY(-7px) rotate(6deg); }
}

@keyframes fx-bag {
  0%, 15%, 36%, 58% { transform: rotate(-9deg); }
  25%, 47%, 73% { transform: translateY(-5px) rotate(10deg); }
  87% { transform: translate(3px, 5px) rotate(-14deg); }
  100% { opacity: 0; transform: translate(3px, 11px) rotate(-14deg) scale(.65); }
}

@keyframes fx-dog-trot {
  from { transform: translateY(1px) rotate(-4deg); }
  to { transform: translateY(-5px) rotate(5deg); }
}

@keyframes fx-dog-shadow {
  from { opacity: .8; transform: scaleX(1.05); }
  to { opacity: .46; transform: scaleX(.88); }
}

@keyframes fx-dog-arrive {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fx-dog-dip {
  0%, 62%, 100% { transform: none; }
  37%, 83% { transform: translateY(3px) rotate(-14deg); }
}

@keyframes fx-dog-paw {
  0% { opacity: .7; transform: rotate(-16deg) scale(.68); }
  18% { opacity: .69; transform: rotate(-16deg) scale(1); }
  100% { opacity: 0; transform: rotate(-16deg) scale(.86); }
}

@keyframes fx-dog-sniff {
  from { opacity: .8; scale: .45; }
  to { opacity: 0; scale: 1.7; }
}

@keyframes fx-confetti {
  0% { opacity: 0; transform: scale(.2); }
  10% { opacity: 1; }
  31% { transform: translate(calc(var(--dx) * .58), calc(var(--dy) * -.6)) rotate(calc(var(--spin) * .46)); }
  73% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); }
}

@keyframes fx-sonar {
  from { opacity: .76; transform: scale(.86); }
  to { opacity: 0; transform: scale(1.48); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-impact::before,
  .fx-impact::after,
  .fx-tool,
  .fx-dust,
  .fx-blast-burst,
  .fx-blast-spark,
  .fx-banknote,
  .fx-politician,
  .fx-search-dog,
  .fx-search-dog-paw,
  .fx-search-dog-sniff,
  .fx-confetti,
  .clue-area.is-signaling::after { display: none; }

  #shovel-dialog[open],
  #win-dialog[open],
  .fx-cash,
  .fx-blast-label { animation: none; }
  .fx-cash { transform: translateY(var(--cash-stop)); }
  .fx-blast-label { transform: translateY(var(--label-offset-y)); }
}
