:root {
  --field-green: rgb(185, 236, 55);
  --hot-red: rgba(255, 0, 90, 0.2);
  --cold-blue: rgba(0, 122, 255, 0.18);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--field-green);
  cursor: none;
}

body {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.pixel-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--field-green);
  cursor: none;
  isolation: isolate;
}

.pixel-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(20, 80, 0, 0.035) 0 1px, transparent 1px 6px);
  mix-blend-mode: soft-light;
  opacity: 0.7;
}

.pixel-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, transparent 0 58%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(90deg, var(--hot-red), transparent 8%, transparent 92%, var(--cold-blue));
  mix-blend-mode: multiply;
  opacity: 0.36;
}

.scene-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.chroma {
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.15;
}

.chroma-red {
  transform: translate(2px, -1px);
  filter: sepia(1) saturate(8) hue-rotate(-35deg);
}

.chroma-blue {
  transform: translate(-2px, 1px);
  filter: sepia(1) saturate(9) hue-rotate(155deg);
  opacity: 0.13;
}

.cursor-bee {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 64px;
  height: 64px;
  pointer-events: none;
  background: url("./assets/pixel/spr_bee.png") center / contain no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: translate3d(-80px, -80px, 0);
  filter:
    drop-shadow(2px 0 0 rgba(255, 0, 76, 0.55))
    drop-shadow(-2px 0 0 rgba(0, 132, 255, 0.48))
    drop-shadow(3px 4px 0 rgba(54, 80, 0, 0.2));
  will-change: transform;
}

body.cursor-hand .cursor-bee {
  background-image: url("./assets/pixel/spr_hand.png");
  filter:
    drop-shadow(2px 0 0 rgb(254, 118, 168))
    drop-shadow(-2px 0 0 rgba(0, 132, 255, 0.4))
    drop-shadow(3px 4px 0 rgba(54, 80, 0, 0.18));
}

body.cursor-catching .cursor-bee {
  background-image: url("./assets/pixel/spr_hand_catch.png");
  filter:
    drop-shadow(2px 0 0 rgb(254, 118, 168))
    drop-shadow(-2px 0 0 rgba(0, 132, 255, 0.4))
    drop-shadow(3px 4px 0 rgba(54, 80, 0, 0.18));
}

body.cursor-hammer .cursor-bee {
  background-image: url("./assets/pixel/spr_hammer.png");
  filter:
    drop-shadow(2px 0 0 rgb(254, 118, 168))
    drop-shadow(-2px 0 0 rgba(0, 132, 255, 0.42))
    drop-shadow(3px 4px 0 rgba(54, 80, 0, 0.2));
}