:root {
  color-scheme: dark;
  --yaw: 0;
  --pitch: 0;
  --roll: 0deg;
  --scale: 1;
  --meter-yaw: 50%;
  --meter-pitch: 50%;
  --meter-blink: 0%;
  --o-center: 1;
  --o-micro-left: 0;
  --o-left-1: 0;
  --o-left-2: 0;
  --o-left-3: 0;
  --o-micro-right: 0;
  --o-right-1: 0;
  --o-right-2: 0;
  --o-right-3: 0;
  --o-micro-up: 0;
  --o-up-1: 0;
  --o-up-2: 0;
  --o-micro-down: 0;
  --o-down-1: 0;
  --o-down-2: 0;
  --o-micro-up-left: 0;
  --o-up-left: 0;
  --o-micro-up-right: 0;
  --o-up-right: 0;
  --o-micro-down-left: 0;
  --o-down-left: 0;
  --o-micro-down-right: 0;
  --o-down-right-medium: 0;
  --o-down-right-strong: 0;
  --o-quarter-blink: 0;
  --o-half-blink: 0;
  --o-full-blink: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #110d0a;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

button {
  font: inherit;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(30, 21, 14, 0.06), rgba(8, 6, 5, 0.62)),
    url("../assets/bg/desert-encounter-bg.jpg") center / cover no-repeat,
    #21150f;
}

.backdrop,
.ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.backdrop {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(183, 255, 209, 0.08), transparent 18rem),
    linear-gradient(180deg, rgba(255, 220, 155, 0.08), transparent 40%);
  mix-blend-mode: screen;
}

.ambient {
  z-index: 8;
  background:
    radial-gradient(circle at 50% 46%, transparent 32%, rgba(0, 0, 0, 0.54) 100%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.5));
}

.camera-panel {
  position: fixed;
  right: clamp(12px, 2.2vw, 28px);
  top: clamp(12px, 2.2vw, 28px);
  z-index: 20;
  width: clamp(150px, 18vw, 250px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(197, 255, 221, 0.22);
  border-radius: 8px;
  background: rgba(8, 10, 8, 0.62);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
}

.camera-feed,
.face-debug {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.camera-feed {
  opacity: 0.58;
}

.face-debug {
  mix-blend-mode: screen;
}

.mirror {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.alien-wrap {
  position: relative;
  width: clamp(360px, 52vw, 760px);
  aspect-ratio: 1;
  transform:
    translateY(5vh)
    translate3d(calc(var(--yaw) * -6px), calc(var(--pitch) * 5px), 0)
    scale(var(--scale));
  transform-origin: 50% 74%;
  will-change: transform;
}

.alien-shadow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 15%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.48);
  filter: blur(24px);
}

.alien-body {
  position: absolute;
  inset: 0;
  transform:
    rotate(calc(var(--roll) * -0.5))
    skewX(calc(var(--yaw) * -0.35deg));
  transform-origin: 50% 74%;
  animation: breathe 4s ease-in-out infinite;
  will-change: transform;
}

.alien-stack,
.alien-state,
.alien-accessible {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.alien-stack {
  filter:
    drop-shadow(0 28px 34px rgba(0, 0, 0, 0.46))
    saturate(0.98)
    contrast(1.04);
}

.alien-state,
.alien-accessible {
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
}

.alien-state {
  opacity: 0;
  transition: opacity 80ms linear;
  will-change: opacity;
}

.alien-accessible {
  opacity: 0;
  pointer-events: none;
}

.state-center { opacity: var(--o-center); }
.state-micro-left { opacity: var(--o-micro-left); }
.state-left-1 { opacity: var(--o-left-1); }
.state-left-2 { opacity: var(--o-left-2); }
.state-left-3 { opacity: var(--o-left-3); }
.state-micro-right { opacity: var(--o-micro-right); }
.state-right-1 { opacity: var(--o-right-1); }
.state-right-2 { opacity: var(--o-right-2); }
.state-right-3 { opacity: var(--o-right-3); }
.state-micro-up { opacity: var(--o-micro-up); }
.state-up-1 { opacity: var(--o-up-1); }
.state-up-2 { opacity: var(--o-up-2); }
.state-micro-down { opacity: var(--o-micro-down); }
.state-down-1 { opacity: var(--o-down-1); }
.state-down-2 { opacity: var(--o-down-2); }
.state-micro-up-left { opacity: var(--o-micro-up-left); }
.state-up-left { opacity: var(--o-up-left); }
.state-micro-up-right { opacity: var(--o-micro-up-right); }
.state-up-right { opacity: var(--o-up-right); }
.state-micro-down-left { opacity: var(--o-micro-down-left); }
.state-down-left { opacity: var(--o-down-left); }
.state-micro-down-right { opacity: var(--o-micro-down-right); }
.state-down-right-medium { opacity: var(--o-down-right-medium); }
.state-down-right-strong { opacity: var(--o-down-right-strong); }
.state-quarter-blink { opacity: var(--o-quarter-blink); }
.state-half-blink { opacity: var(--o-half-blink); }
.state-full-blink { opacity: var(--o-full-blink); }

.controls {
  position: fixed;
  left: clamp(12px, 2.2vw, 28px);
  bottom: clamp(12px, 2.2vw, 28px);
  z-index: 30;
  display: grid;
  gap: 10px;
  width: min(300px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid rgba(193, 255, 222, 0.18);
  border-radius: 8px;
  background: rgba(12, 10, 8, 0.72);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  color: rgba(238, 250, 239, 0.9);
  font-size: 13px;
}

.status-dot {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #8a826d;
  box-shadow: 0 0 14px rgba(138, 130, 109, 0.4);
}

.stage.is-live .status-dot {
  background: #8dffd5;
  box-shadow: 0 0 16px rgba(141, 255, 213, 0.72);
}

.start-button {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  color: #07100c;
  background: linear-gradient(180deg, #caffdf, #7dffc8);
  box-shadow: 0 10px 24px rgba(78, 255, 184, 0.18);
  cursor: pointer;
}

.meters {
  display: grid;
  gap: 7px;
}

.meters span {
  position: relative;
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.meters span::before {
  content: "";
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(112, 255, 203, 0.55), rgba(247, 255, 174, 0.92));
}

@keyframes breathe {
  0%,
  100% {
    transform:
      rotate(calc(var(--roll) * -0.5))
      skewX(calc(var(--yaw) * -0.35deg))
      scaleY(1);
    filter: brightness(1);
  }

  50% {
    transform:
      rotate(calc(var(--roll) * -0.5))
      skewX(calc(var(--yaw) * -0.35deg))
      scaleY(1.012);
    filter: brightness(1.035);
  }
}

@media (max-width: 760px) {
  .stage {
    min-height: 100svh;
  }

  .camera-panel {
    width: 134px;
  }

  .alien-wrap {
    width: clamp(330px, 92vw, 520px);
    transform:
      translateY(7vh)
      translate3d(calc(var(--yaw) * -4px), calc(var(--pitch) * 4px), 0)
      scale(var(--scale));
  }
}