:root {
  --bg: #050505;
}

@font-face {
  font-family: "Volter Goldfish";
  src: url("Volter-Goldfish.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: var(--bg);
}

body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.screen {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

[hidden] {
  display: none !important;
}

.intro,
.menu,
.grass-game {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(91, 82, 67, 0.24), transparent 48%),
    #050505;
}

.skeleton-art {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: block;
  width: min(100vw, 100dvh);
  height: min(100vw, 100dvh);
  object-fit: contain;
  opacity: 0.18;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.menu-title {
  position: relative;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: 0.15em 0.45em 0.2em;
  border: 1px solid rgba(245, 233, 206, 0.7);
  border-radius: 0.12em;
  background: rgba(5, 5, 5, 0.82);
  color: #fff8e8;
  font-family: "Volter Goldfish", sans-serif;
  font-size: clamp(3rem, 10vw, 6rem);
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 3px 0 #382d24, 0 0 20px rgba(245, 233, 206, 0.7);
}

.menu-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 4vh, 2rem);
  padding: 2rem 1rem;
}

.play-button,
.back-button {
  min-width: 9rem;
  padding: 0.65rem 1.25rem 0.75rem;
  border: 1px solid rgba(245, 233, 206, 0.8);
  border-radius: 0.12em;
  background: rgba(5, 5, 5, 0.88);
  color: #fff8e8;
  font-family: "Volter Goldfish", sans-serif;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  letter-spacing: 0.08em;
  text-shadow: 0 0 12px rgba(245, 233, 206, 0.5);
  cursor: pointer;
}

.play-button:hover,
.back-button:hover {
  background: rgba(75, 65, 48, 0.92);
}

.play-button:focus-visible,
.back-button:focus-visible {
  outline: 3px solid #fff8e8;
  outline-offset: 4px;
}

.grass-game {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(76, 106, 46, 0.28), transparent 58%),
    #10150d;
}

.grass-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.grass-canvas.is-looking {
  cursor: grabbing;
}

.blood-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(49, 0, 0, 0.18) 70%, rgba(32, 0, 0, 0.72) 100%),
    radial-gradient(ellipse at 4% 38%, rgba(111, 5, 10, 0.72), transparent 24%),
    radial-gradient(ellipse at 96% 66%, rgba(111, 5, 10, 0.68), transparent 23%),
    radial-gradient(ellipse at 28% 0%, rgba(95, 0, 0, 0.6), transparent 19%),
    radial-gradient(ellipse at 79% 100%, rgba(95, 0, 0, 0.55), transparent 21%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s ease;
}

.blood-overlay.is-hit {
  animation: hit-flash 320ms ease-out;
}

.blood-overlay.is-bleeding {
  opacity: 0.88;
}

.vision-blink {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: #030303;
  opacity: 0;
  pointer-events: none;
}

.vision-blink.is-blinking {
  animation: vision-blink 2.6s steps(1, end) both;
}

.animatronic-death {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(4, 3, 3, 0.88);
}

.death-card {
  width: min(100%, 32rem);
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid rgba(174, 57, 45, 0.8);
  background: radial-gradient(ellipse at 50% 0%, rgba(99, 15, 14, 0.32), transparent 70%), #090706;
  color: #f5e9ce;
  text-align: center;
  box-shadow: 0 0 3rem rgba(95, 0, 0, 0.35);
}

.death-kicker {
  margin: 0;
  color: #b66e60;
  font: 0.8rem monospace;
  letter-spacing: 0.2em;
}

.death-card h2 {
  margin: 0.7rem 0;
  color: #fff1df;
  font-family: "Volter Goldfish", sans-serif;
  font-size: clamp(2.8rem, 12vw, 5rem);
  letter-spacing: 0.08em;
  text-shadow: 0 0 20px rgba(166, 24, 18, 0.8);
}

.death-card p:not(.death-kicker) {
  margin: 0 0 1.5rem;
  font: 1rem/1.6 monospace;
}

@keyframes hit-flash {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.88;
  }
}

@keyframes vision-blink {
  0%,
  7%,
  19%,
  29%,
  41%,
  50%,
  71%,
  81%,
  100% {
    opacity: 0;
  }

  8%,
  18%,
  30%,
  40%,
  51%,
  70%,
  82%,
  88% {
    opacity: 1;
  }
}

.grass-reticle {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 0.35rem;
  height: 0.35rem;
  border: 1px solid rgba(255, 248, 232, 0.9);
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.45);
  box-shadow: 0 0 5px #000;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.grass-status {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 50%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: #fff8e8;
  font-family: "Volter Goldfish", sans-serif;
  font-size: 1rem;
  text-align: center;
  text-shadow: 0 1px 5px #000;
  transform: translateX(-50%);
}

.grass-status:empty {
  display: none;
}

.grass-status[data-error="true"] {
  color: #ffd0c7;
}

.grass-controls {
  position: absolute;
  z-index: 1;
  bottom: 1rem;
  left: 50%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(245, 233, 206, 0.45);
  border-radius: 0.12em;
  background: rgba(5, 5, 5, 0.55);
  color: #fff8e8;
  font-family: "Volter Goldfish", sans-serif;
  font-size: 1rem;
  text-align: center;
  text-shadow: 0 1px 5px #000;
  transform: translateX(-50%);
  pointer-events: none;
}

.back-button {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  min-width: auto;
  font-size: 1rem;
}

.intro {
  overflow: hidden;
}

#title {
  margin: 0;
  color: #f5f5f5;
  font-family: "Creepster", cursive;
  font-size: clamp(2rem, 7vw, 3rem);
  letter-spacing: 0.08em;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.25), 0 0 30px rgba(255, 255, 255, 0.3);
  animation: title-intro 2.2s ease-in-out both;
  user-select: none;
}

@keyframes title-intro {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }

  40% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  75% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-4px) scale(1.02);
  }
}