:root {
  color-scheme: dark;
  --bg-rootwork: #131313;
  --bg-kowrotor: #212fb2;
  --bg-wokrowrot: #2e0e57;
  --bg: var(--bg-rootwork);
  --active-bg: var(--bg-rootwork);
  --ink: #ffffff;
  --soft: rgba(255, 255, 255, 0.7);
}

@font-face {
  font-family: "Bitcrusher Crushed";
  font-style: normal;
  font-weight: 700;
  src: url("assets/bitcrusher-crushed-bold.ttf") format("truetype");
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--active-bg);
  color: var(--ink);
  font-family: Arial Black, Arial, Helvetica, sans-serif;
}

body.disco-active {
  animation: disco-background 560ms linear infinite;
}

.stage {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: clamp(18px, 4vw, 52px);
  place-items: center;
  isolation: isolate;
  animation: drunk-stage 9.5s ease-in-out infinite;
  transform-origin: 50% 52%;
  will-change: transform;
}

.rotor-frame {
  position: relative;
  width: min(68vw, 74svh);
  aspect-ratio: 1 / 1;
  transform-origin: 50% 50%;
  z-index: 4;
  contain: layout paint;
}

.rotor {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}

.triangle-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
}

.mark-lines {
  pointer-events: none;
}

.split-rays {
  pointer-events: none;
  opacity: 1;
}

.split-rays line {
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: square;
  opacity: 0.9;
  vector-effect: non-scaling-stroke;
}

.tunnel {
  opacity: 0.26;
  pointer-events: none;
}

.tunnel-triangle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 0.48;
  stroke-linejoin: miter;
  transform-box: view-box;
  transform-origin: 50% 49.34%;
  animation: tunnel-grow 4.2s linear infinite;
}

.tunnel-triangle-one {
  animation-delay: -1.4s;
}

.tunnel-triangle-two {
  animation-delay: -2.8s;
}

.tunnel-triangle-three {
  animation-delay: -4.2s;
}

.mark-lines polygon {
  fill: none;
  stroke: var(--ink);
  stroke-width: 20;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.triangle-cover {
  fill: var(--active-bg);
  pointer-events: none;
  transition: opacity 240ms ease;
}

body.riff-active .triangle-cover {
  opacity: 0;
}

.riff-video {
  position: absolute;
  left: 7.5%;
  top: 2.66%;
  z-index: 1;
  width: 85%;
  height: 73.4%;
  overflow: hidden;
  background: #000000;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

body.riff-active .riff-video {
  opacity: 1;
  pointer-events: auto;
}

.riff-video iframe {
  display: block;
  width: 160%;
  height: 100%;
  border: 0;
  transform: translateX(-18.75%);
}

body.riff-active .kow-hover {
  pointer-events: none;
}

.svg-hit-mark {
  fill: transparent;
  cursor: pointer;
}

.svg-label {
  cursor: pointer;
  outline: none;
}

.svg-label rect {
  fill: transparent;
}

.svg-label text {
  fill: var(--ink);
  font-family: "Bitcrusher Crushed", Arial Black, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.48em;
  text-anchor: middle;
  dominant-baseline: middle;
  text-transform: uppercase;
  user-select: none;
}

.svg-label:hover text,
.svg-label:focus-visible text {
  text-decoration: underline;
}

.svg-label-kowrotor {
  transform: translate(20px, 32.7px) rotate(120deg);
}

.svg-label-wokrowrot {
  transform: translate(80px, 32.7px) rotate(-120deg);
}

.svg-label-rootwork {
  transform: translate(50px, 83.7px);
}

body.fighter-unlocked .svg-label-kowrotor text {
  font-size: 7px;
  letter-spacing: 0.32em;
}

body.autoclicker-active:not(.fighter-unlocked) .svg-label-kowrotor text {
  font-size: 6.5px;
  letter-spacing: 0.24em;
}

.kow-hover {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 5;
  width: min(28vw, 31svh);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  animation: helicopter-hover 3.8s ease-in-out infinite;
  will-change: transform;
  transition: opacity 320ms ease;
}

body.kow-released .kow-hover {
  animation: released-kow 7.5s ease-in-out infinite;
  z-index: 11;
}

.kow-hover img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.confetti-bit {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  aspect-ratio: 1;
  background: var(--confetti-color);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translate(var(--start-x), var(--start-y))
    rotate(var(--start-rotation));
  animation: bum-confetti var(--duration) cubic-bezier(0.12, 0.8, 0.18, 1)
  forwards;
  will-change: transform, opacity;
}

.fighter-layer {
  position: fixed;
  inset: 0;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

body.fighter-active .fighter-layer,
body.fighter-ended .fighter-layer {
  opacity: 1;
}

.asteroid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fighter-ship {
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  color: var(--ink);
  opacity: 0;
  overflow: visible;
  transform-origin: 50% 50%;
}

body.fighter-active .fighter-ship {
  opacity: 1;
}

.fighter-ship path {
  fill: rgba(255, 255, 255, 0.08);
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.fighter-ship path + path {
  fill: none;
  stroke-width: 2;
}

.fighter-hud {
  position: fixed;
  left: clamp(14px, 3vw, 38px);
  top: clamp(14px, 3vw, 38px);
  display: none;
  max-width: min(420px, calc(100vw - 28px));
  gap: 10px;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--active-bg) 76%, #000000);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(0.9rem, 2vw, 1.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body.fighter-active .fighter-hud,
body.fighter-ended .fighter-hud {
  display: grid;
}

.fighter-fire-button {
  position: fixed;
  right: clamp(18px, 6vw, 44px);
  bottom: clamp(18px, 6vw, 44px);
  display: none;
  width: 92px;
  height: 92px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: color-mix(in srgb, var(--active-bg) 62%, transparent);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  touch-action: manipulation;
}

body.fighter-active .fighter-fire-button {
  display: grid;
  place-items: center;
  pointer-events: auto;
}

.clicker-hud {
  position: fixed;
  left: 50%;
  bottom: clamp(18px, 4vw, 44px);
  z-index: 12;
  display: flex;
  gap: clamp(18px, 4vw, 44px);
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--active-bg) 78%, #000000);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 2.7vw, 2.2rem);
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate(-50%, 18px);
  transition: opacity 240ms ease, transform 240ms ease;
  white-space: nowrap;
}

.clicker-hud strong {
  font: inherit;
}

.autoclicker-button {
  display: none;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.62em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}

.autoclicker-button:hover,
.autoclicker-button:focus-visible {
  background: var(--ink);
  color: var(--active-bg);
  outline: none;
}

.upgrade-menu {
  position: fixed;
  top: clamp(16px, 4vw, 44px);
  right: clamp(16px, 4vw, 44px);
  z-index: 12;
  display: grid;
  width: min(360px, calc(100vw - 32px));
  gap: 10px;
  padding: 14px;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--active-bg) 78%, #000000);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(0.85rem, 1.6vw, 1.25rem);
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translateX(18px);
  transition: opacity 240ms ease, transform 240ms ease;
}

body.clicker-active .upgrade-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

body.fighter-active .upgrade-menu,
body.fighter-ended .upgrade-menu {
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
}

.upgrade-button {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.upgrade-button:hover:not(:disabled),
.upgrade-button:focus-visible:not(:disabled) {
  background: var(--ink);
  color: var(--active-bg);
  outline: none;
}

.upgrade-button:disabled {
  cursor: not-allowed;
  opacity: 0.34;
}

body.upgrade-disco-bought .upgrade-button[data-upgrade="disco"],
body.upgrade-disable-disco-bought .upgrade-button[data-upgrade="disableDisco"],
body.upgrade-release-kow-bought .upgrade-button[data-upgrade="releaseKow"] {
  display: none;
}

body.autoclicker-offered .autoclicker-button {
  display: inline-grid;
  place-items: center;
}

body.autoclicker-active .autoclicker-button {
  display: inline-grid;
  opacity: 0.72;
  pointer-events: none;
}

body.clicker-active .clicker-hud {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

body.fighter-active .clicker-hud,
body.fighter-ended .clicker-hud {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
}

.mirrorball {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 3;
  width: min(24vw, 180px);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -112%);
  transition: opacity 400ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mirrorball line,
.mirrorball circle,
.mirrorball path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
}

body.disco-active .mirrorball {
  opacity: 0.9;
  transform: translate(-50%, -14%);
}

.achievement-toast {
  position: fixed;
  right: clamp(16px, 4vw, 48px);
  top: clamp(16px, 4vw, 48px);
  z-index: 13;
  display: grid;
  width: min(430px, calc(100vw - 32px));
  gap: 8px;
  padding: 18px 20px;
  border: 2px solid var(--ink);
  background: #107c10;
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.42);
  color: var(--ink);
  font-family: Arial Black, Arial, Helvetica, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-24px);
  transition: opacity 280ms ease, transform 280ms ease;
}

.achievement-toast strong {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.achievement-toast span {
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.22;
}

body.achievement-visible .achievement-toast {
  opacity: 1;
  transform: translateY(0);
}

h1,
.tagline {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

h1 {
  top: clamp(18px, 4vw, 46px);
  font-size: clamp(1.25rem, 4vw, 3.8rem);
}

.tagline {
  bottom: clamp(14px, 3vw, 34px);
  color: var(--soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.78rem, 1.5vw, 1rem);
}

.orbit {
  display: none;
}

.shard {
  position: absolute;
  width: clamp(90px, 16vw, 260px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.22);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.shard-one {
  left: 17%;
  top: 16%;
}

.shard-two {
  right: 10%;
  top: 24%;
  transform: rotate(61deg);
}

.shard-three {
  left: 11%;
  bottom: 15%;
  transform: rotate(201deg);
}

.shard-four {
  right: 25%;
  bottom: 7%;
  transform: rotate(129deg);
}

.shard-five {
  left: 47%;
  top: 41%;
  transform: rotate(300deg);
}

@keyframes helicopter-hover {
  0%,
  100% {
    transform: translate(-50%, -50%) translate(0, 0);
  }

  25% {
    transform: translate(-50%, -50%) translate(1.3%, -4%);
  }

  50% {
    transform: translate(-50%, -50%) translate(-0.8%, -7%);
  }

  75% {
    transform: translate(-50%, -50%) translate(-1.5%, -3%);
  }
}

@keyframes released-kow {
  0%,
  100% {
    transform: translate(-50%, -50%) translate(-38vw, -26vh) rotate(-7deg);
  }

  20% {
    transform: translate(-50%, -50%) translate(28vw, -31vh) rotate(9deg);
  }

  44% {
    transform: translate(-50%, -50%) translate(34vw, 22vh) rotate(-3deg);
  }

  68% {
    transform: translate(-50%, -50%) translate(-31vw, 26vh) rotate(12deg);
  }

  84% {
    transform: translate(-50%, -50%) translate(5vw, -2vh) rotate(-10deg);
  }
}

@keyframes disco-background {
  0% {
    background: #ff006e;
  }

  16% {
    background: #fbff12;
  }

  33% {
    background: #00f5d4;
  }

  50% {
    background: #8338ec;
  }

  66% {
    background: #ff5400;
  }

  83% {
    background: #3a86ff;
  }

  100% {
    background: #ff006e;
  }
}

@keyframes drunk-stage {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  18% {
    transform: translate3d(0.9vw, -0.6vh, 0) rotate(1deg) scale(1.008);
  }

  37% {
    transform: translate3d(-0.7vw, 0.5vh, 0) rotate(-0.7deg) scale(0.996);
  }

  61% {
    transform: translate3d(0.5vw, 0.8vh, 0) rotate(0.75deg) scale(1.004);
  }

  82% {
    transform: translate3d(-1vw, -0.3vh, 0) rotate(-1deg) scale(1.006);
  }
}

@keyframes tunnel-grow {
  0% {
    transform: scale(1.01);
  }

  100% {
    transform: scale(6.2);
  }
}

@keyframes bum-confetti {
  100% {
    opacity: 0;
    transform: translate(
        calc(var(--start-x) + var(--travel-x)),
        calc(var(--start-y) + var(--travel-y))
      )
      rotate(var(--end-rotation));
  }
}

@media (max-width: 700px) {
  body {
    overflow: hidden;
  }

  .stage {
    min-height: 100svh;
    padding: 4rem 1rem 3rem;
  }

  .rotor {
    position: absolute;
  }

  .rotor-frame {
    width: min(94vw, 86svh);
  }

  .kow-hover {
    width: min(20vw, 19svh);
  }

  .clicker-hud {
    flex-direction: column;
    gap: 8px;
    width: calc(100vw - 32px);
    font-size: 1rem;
  }

  .upgrade-menu {
    top: 14px;
    right: 14px;
    width: min(280px, calc(100vw - 28px));
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage {
    animation: none;
  }

  .kow-hover {
    animation: none;
  }

  body.kow-released .kow-hover {
    animation: none;
  }

  .tunnel-triangle {
    animation: none;
    opacity: 0.24;
    transform: scale(0.45);
  }

}