body[data-cursor="asparagus"] {
  cursor: url("/assets/asparagus_cursor.png") 8 8, auto;
}

body[data-cursor="butterknife"] {
  cursor: url("/assets/butterknife_cursor.png") 8 8, auto;
}

body[data-cursor="chainmail"] {
  cursor: url("/assets/chainmail_cursor.png") 8 8, auto;
}

body[data-cursor="cheeseblock"] {
  cursor: url("/assets/cheeseblock_cursor2.png") 8 8, auto;
}

body[data-cursor="eurostrainer"] {
  cursor: url("/assets/eurostrainer_cursor.png") 8 8, auto;
}

body[data-cursor="middlefinger"] {
  cursor: url("/assets/middle_finger_cursor.png") 8 8, auto;
}

body[data-cursor="shoe"] {
  cursor: url("/assets/shoe_cursor.png") 8 8, auto;
}

body[data-cursor="staranis"] {
  cursor: url("/assets/star_anis_cursor.png") 8 8, auto;
}

body[data-cursor="whisker"] {
  cursor: url("/assets/whisker_cursor.png") 8 8, auto;
}

body[data-cursor="whiskeybarrell"] {
  cursor: url("/assets/whiskey_barrell_cursor.png") 8 8, auto;
}

body[data-cursor="asparagus"] a,
body[data-cursor="asparagus"] button,
body[data-cursor="asparagus"] .bingo-cell,
body[data-cursor="asparagus"] input,
body[data-cursor="asparagus"] select,
body[data-cursor="asparagus"] textarea {
  cursor: url("/assets/asparagus_cursor.png") 8 8, pointer;
}

body[data-cursor="butterknife"] a,
body[data-cursor="butterknife"] button,
body[data-cursor="butterknife"] .bingo-cell,
body[data-cursor="butterknife"] input,
body[data-cursor="butterknife"] select,
body[data-cursor="butterknife"] textarea {
  cursor: url("/assets/butterknife_cursor.png") 8 8, pointer;
}

body[data-cursor="chainmail"] a,
body[data-cursor="chainmail"] button,
body[data-cursor="chainmail"] .bingo-cell,
body[data-cursor="chainmail"] input,
body[data-cursor="chainmail"] select,
body[data-cursor="chainmail"] textarea {
  cursor: url("/assets/chainmail_cursor.png") 8 8, pointer;
}

body[data-cursor="cheeseblock"] a,
body[data-cursor="cheeseblock"] button,
body[data-cursor="cheeseblock"] .bingo-cell,
body[data-cursor="cheeseblock"] input,
body[data-cursor="cheeseblock"] select,
body[data-cursor="cheeseblock"] textarea {
  cursor: url("/assets/cheeseblock_cursor2.png") 8 8, pointer;
}

body[data-cursor="eurostrainer"] a,
body[data-cursor="eurostrainer"] button,
body[data-cursor="eurostrainer"] .bingo-cell,
body[data-cursor="eurostrainer"] input,
body[data-cursor="eurostrainer"] select,
body[data-cursor="eurostrainer"] textarea {
  cursor: url("/assets/eurostrainer_cursor.png") 8 8, pointer;
}

body[data-cursor="middlefinger"] a,
body[data-cursor="middlefinger"] button,
body[data-cursor="middlefinger"] .bingo-cell,
body[data-cursor="middlefinger"] input,
body[data-cursor="middlefinger"] select,
body[data-cursor="middlefinger"] textarea {
  cursor: url("/assets/middle_finger_cursor.png") 8 8, pointer;
}

body[data-cursor="shoe"] a,
body[data-cursor="shoe"] button,
body[data-cursor="shoe"] .bingo-cell,
body[data-cursor="shoe"] input,
body[data-cursor="shoe"] select,
body[data-cursor="shoe"] textarea {
  cursor: url("/assets/shoe_cursor.png") 8 8, pointer;
}

body[data-cursor="staranis"] a,
body[data-cursor="staranis"] button,
body[data-cursor="staranis"] .bingo-cell,
body[data-cursor="staranis"] input,
body[data-cursor="staranis"] select,
body[data-cursor="staranis"] textarea {
  cursor: url("/assets/star_anis_cursor.png") 8 8, pointer;
}

body[data-cursor="whisker"] a,
body[data-cursor="whisker"] button,
body[data-cursor="whisker"] .bingo-cell,
body[data-cursor="whisker"] input,
body[data-cursor="whisker"] select,
body[data-cursor="whisker"] textarea {
  cursor: url("/assets/whisker_cursor.png") 8 8, pointer;
}

body[data-cursor="whiskeybarrell"] a,
body[data-cursor="whiskeybarrell"] button,
body[data-cursor="whiskeybarrell"] .bingo-cell,
body[data-cursor="whiskeybarrell"] input,
body[data-cursor="whiskeybarrell"] select,
body[data-cursor="whiskeybarrell"] textarea {
  cursor: url("/assets/whiskey_barrell_cursor.png") 8 8, pointer;
}

.active-cursor {
  background: #da50c3;
  color: #fff;
}

.cursor-roach-nav {
  position: fixed;
  left: 40px;
  top: 160px;
  z-index: 9999;
  width: 72px;
  height: 72px;
  user-select: none;
}

.cursor-roach-toggle {
  position: relative;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  padding: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: grab;
}

.cursor-roach-toggle:hover {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

.cursor-roach-toggle:active {
  cursor: grabbing;
}

.cursor-roach-toggle img {
  display: block;
  width: 80px;
  height: 80px;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.cursor-roach-menu {
  position: absolute;
  left: 36px;
  top: 36px;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cursor-roach-nav.open .cursor-roach-menu {
  pointer-events: auto;
}

.roach-label {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #ff00aa;
  background: #fff3b0;
  padding: 2px 4px;
  border: 1px solid #000;
  white-space: nowrap;
  animation: blinkText 1s steps(2, end) infinite;
}

.cursor-roach-nav.open .roach-label {
  display: none;
}

.cursor-wheel-option {
  position: absolute;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -34px;
  padding: 1px;
  border: 1px solid #000;
  background: #fff3b0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
  transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}

.cursor-wheel-option img {
  display: block;
  max-width: 110%;
  max-height: 110%;
  image-rendering: pixelated;
  pointer-events: none;
}

.cursor-roach-nav.open .cursor-wheel-option {
  opacity: 1;
}

.cursor-wheel-option:hover {
  background: #ff8ec7;
}

.cursor-wheel-option.active-cursor {
  background: #ff00aa;
}

body[data-theme="dark"] .cursor-wheel-option {
  background: #2a3038;
  border-color: #000;
}

body[data-theme="dark"] .cursor-wheel-option:hover {
  background: #ff8ec7;
}

body[data-theme="dark"] .cursor-wheel-option.active-cursor {
  background: #ff00aa;
}

@keyframes blinkText {
  50% {
    opacity: 0;
  }
}

/* trails */

.whiskeybarrell-crumb {
  position: fixed;
  left: 0;
  top: 0;
  width: 12px;
  height: 10px;
  pointer-events: none;
  z-index: 9998;
  opacity: 1;
  border-radius: 45% 55% 40% 60%;
  background: linear-gradient(135deg, #5a331d 0%, #3a1f12 55%, #24120b 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 210, 160, 0.18),
    inset -1px -1px 0 rgba(0, 0, 0, 0.28),
    1px 1px 0 rgba(35, 18, 10, 0.35);
  transform: translate(-50%, -50%) rotate(var(--crumb-rotate, 0deg));
  animation: whiskeybarrellCrumbFade 1600ms cubic-bezier(0.5, 0.8, 0.5, 1) forwards;
}

.whiskeybarrell-crumb.small {
  width: 9px;
  height: 8px;
}

.whiskeybarrell-crumb.tiny {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

@keyframes whiskeybarrellCrumbFade {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) rotate(var(--crumb-rotate, 0deg)) scale(1);
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--crumb-drift-x, 0px)),
        calc(-50% + var(--crumb-drift-y, 8px))
      )
      rotate(calc(var(--crumb-rotate, 0deg) + 18deg))
      scale(0.55);
  }
}

.cheeseblock-crumb {
  position: fixed;
  left: 0;
  top: 0;
  width: 14px;
  height: 12px;
  pointer-events: none;
  z-index: 9998;
  opacity: 1;
  background: var(--cheese-color, #f6c945);
  border-radius: var(--cheese-radius, 1px);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 210, 0.5),
    inset -1px -1px 0 rgba(180, 120, 20, 0.35),
    1px 1px 0 rgba(120, 80, 10, 0.2);
  transform: translate(-50%, -50%) rotate(var(--crumb-rotate, 0deg));
  animation: cheeseblockCrumbFade 1200ms cubic-bezier(0.4, 0.8, 0.4, 1) forwards;
}

.cheeseblock-crumb.small {
  width: 10px;
  height: 8px;
}

.cheeseblock-crumb.tiny {
  width: 6px;
  height: 6px;
}

.cheeseblock-crumb::after {
  content: "";
  position: absolute;
  width: var(--cheese-hole-size, 3px);
  height: var(--cheese-hole-size, 3px);
  background: rgba(180, 110, 20, 0.45);
  border-radius: 50%;
  top: var(--cheese-hole-top, 2px);
  left: var(--cheese-hole-left, 3px);
  opacity: 0.7;
}

@keyframes cheeseblockCrumbFade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--crumb-rotate, 0deg)) scale(1);
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--crumb-drift-x, 0px)),
        calc(-50% + var(--crumb-drift-y, 10px))
      )
      rotate(calc(var(--crumb-rotate, 0deg) + 25deg))
      scale(0.5);
  }
}

.middlefinger-blood {
  position: fixed;
  left: 0;
  top: 0;
  width: 10px;
  height: 14px;
  pointer-events: none;
  z-index: 9998;
  opacity: 1;
  background: var(--blood-color, #9b0000);
  border-radius: 50% 50% 55% 55%;
  clip-path: polygon(50% 0%, 78% 28%, 92% 55%, 82% 82%, 50% 100%, 18% 82%, 8% 55%, 22% 28%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 120, 120, 0.2),
    inset -1px -1px 0 rgba(60, 0, 0, 0.35),
    1px 1px 0 rgba(40, 0, 0, 0.15);
  transform: translate(-50%, -50%) rotate(var(--blood-rotate, 0deg)) scale(1);
  animation: middlefingerBloodFade 1600ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards;
}

.middlefinger-blood.small {
  width: 7px;
  height: 10px;
}

.middlefinger-blood.tiny {
  width: 5px;
  height: 7px;
}

.middlefinger-blood::after {
  content: "";
  position: absolute;
  width: 35%;
  height: 35%;
  left: 22%;
  top: 20%;
  border-radius: 50%;
  background: rgba(255, 160, 160, 0.18);
}

@keyframes middlefingerBloodFade {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) rotate(var(--blood-rotate, 0deg)) scale(1);
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--blood-drift-x, 0px)),
        calc(-50% + var(--blood-drift-y, 14px))
      )
      rotate(calc(var(--blood-rotate, 0deg) + 12deg))
      scale(0.55);
  }
}