:root {
  --peach: #f4a07a;
  --peach-deep: #e27b58;
  --cream: #fbe7c8;
  --cream-2: #f6d7a4;
  --ink: #4a2e22;
  --terracotta: #c45c3e;
  --leaf: #6fbf3a;
  --leaf-dark: #3f8a28;
  --sky: #f6b896;
  --wood: #8a5a32;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #e8886a;
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  user-select: none;
  touch-action: none;
}

canvas#c {
  display: block;
  width: 100%;
  height: 100%;
}

#vignette {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(90, 40, 20, 0.28) 100%);
  z-index: 2;
}

#hurt {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(180, 30, 20, 0.55) 100%);
  opacity: 0;
  z-index: 3;
  transition: opacity 80ms linear;
}

.hidden { display: none !important; }

#hud {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.hud-tl {
  position: absolute;
  top: 22px;
  left: 24px;
}

.hearts {
  display: flex;
  gap: 6px;
  filter: drop-shadow(0 4px 0 rgba(74, 46, 34, 0.18));
}

.heart {
  width: 54px;
  height: 48px;
  object-fit: contain;
  transform-origin: center;
  transition: filter 160ms, transform 160ms, opacity 160ms;
}

.heart:not(.on) {
  filter: grayscale(1) brightness(0.7);
  opacity: 0.4;
  transform: scale(0.86);
}

.leafbar {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff6e4;
  border: 4px solid #fff;
  outline: 3px solid rgba(74, 46, 34, 0.18);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  width: 230px;
  box-shadow: 0 6px 0 rgba(74, 46, 34, 0.12);
}

.leaf-ico {
  width: 34px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}

.leafbar-track {
  flex: 1;
  height: 16px;
  background: #e7d3ae;
  border-radius: 999px;
  overflow: hidden;
}

.leafbar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(#b6e25a, #5aaa32);
  border-radius: 999px;
  transform-origin: left center;
  transition: transform 80ms linear;
}

.hud-tc {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.wave-chip, .score-chip {
  font-weight: 900;
  letter-spacing: 0.04em;
  background: #fff6e4;
  border: 3px solid #fff;
  outline: 3px solid rgba(74, 46, 34, 0.14);
  border-radius: 999px;
  padding: 4px 16px;
  box-shadow: 0 5px 0 rgba(74, 46, 34, 0.1);
}

.wave-chip { font-size: 15px; color: var(--terracotta); }
.score-chip { font-size: 20px; }

.hud-tr {
  position: absolute;
  top: 18px;
  right: 22px;
}

.clock {
  position: relative;
  width: 86px;
  height: 86px;
}

.clock-face {
  width: 78px;
  height: 78px;
  background: radial-gradient(circle at 35% 30%, #fff, #f3e2c0);
  border: 5px solid #fff;
  outline: 3px solid rgba(74, 46, 34, 0.16);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 6px 0 rgba(74, 46, 34, 0.12);
}

.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
  background: var(--ink);
  border-radius: 2px;
}
.hand.hour { width: 4px; height: 18px; margin-left: -2px; }
.hand.minute { width: 3px; height: 26px; margin-left: -1.5px; background: var(--terracotta); }
.clock-dot {
  position: absolute;
  width: 8px; height: 8px;
  background: var(--ink);
  border-radius: 50%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

.sun {
  position: absolute;
  right: -10px;
  top: -8px;
  width: 28px;
  height: 28px;
  background: #ffd15a;
  border-radius: 50%;
  box-shadow:
    0 0 0 4px #ffe9a4,
    0 0 18px #ffd15a;
}

.sun::before {
  content: "";
  position: absolute;
  inset: -8px;
  background:
    conic-gradient(from 0deg, transparent 0 18deg, #ffd15a 0 22deg, transparent 0 48deg, #ffd15a 0 52deg, transparent 0);
  border-radius: 50%;
  z-index: -1;
}

.crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
}

.crosshair span {
  display: block;
  width: 8px;
  height: 8px;
  margin: 5px;
  background: #fff6e4;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(74, 46, 34, 0.25);
}

.popup {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, 0);
  font-family: "Luckiest Guy", system-ui;
  font-size: 42px;
  color: #fff6e4;
  text-shadow: 0 4px 0 var(--ink);
  opacity: 0;
  pointer-events: none;
}

#usePrompt {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff6e4;
  color: var(--ink);
  font-weight: 900;
  padding: 8px 16px;
  border-radius: 999px;
  border: 3px solid #fff;
  outline: 3px solid rgba(74, 46, 34, 0.14);
  box-shadow: 0 5px 0 rgba(74, 46, 34, 0.12);
}
#usePrompt.hidden { display: none !important; }
#usePrompt kbd {
  background: var(--terracotta);
  color: #fff6e4;
  padding: 2px 8px;
  border-radius: 8px;
  font-family: "Nunito", system-ui;
  font-weight: 900;
}

.tool.ready {
  outline: 4px solid #e24b3b;
}

.hud-bot {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.tool {
  width: 74px;
  height: 74px;
  background: radial-gradient(circle at 35% 30%, #fff, #f3e0b8);
  border: 5px solid #f7ecd0;
  outline: 3px solid rgba(74, 46, 34, 0.16);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 7px 0 rgba(74, 46, 34, 0.14);
}

.tool img, .tool svg {
  width: 46px;
  height: 46px;
}

.tool.selected {
  width: 88px;
  height: 88px;
  outline: 4px solid #e2a23a;
  transform: translateY(-6px);
}

.tool.selected img { width: 58px; height: 58px; }

#title, #pause, #over, #load {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
}

#title {
  background: linear-gradient(to top, rgba(74, 30, 16, 0.46) 0%, transparent 46%);
}

.title-stack {
  text-align: center;
  color: #fff6e4;
  text-shadow: 0 4px 0 rgba(74, 46, 34, 0.45);
  padding: 24px;
}

.kicker {
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.title-stack h1 {
  font-family: "Luckiest Guy", system-ui;
  font-size: clamp(56px, 10vw, 108px);
  line-height: 0.88;
  font-weight: 400;
  color: #fff3d6;
  -webkit-text-stroke: 2px #5a2e1c;
  paint-order: stroke fill;
}

.year-badge {
  display: inline-grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 12px auto 10px;
  background: radial-gradient(circle at 35% 30%, #ffe27a, #f0b43a);
  border: 6px solid #fff6e4;
  border-radius: 50%;
  box-shadow: 0 8px 0 rgba(74, 46, 34, 0.25);
  transform: rotate(-8deg);
}

.year-badge span {
  font-family: "Luckiest Guy", system-ui;
  font-size: 28px;
  color: var(--ink);
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.tag {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 18px;
}

#playBtn, #retryBtn {
  pointer-events: auto;
  cursor: pointer;
  font-family: "Luckiest Guy", system-ui;
  font-size: 28px;
  color: var(--ink);
  background: #fff3d6;
  border: 0;
  border-radius: 16px;
  padding: 12px 28px 10px;
  box-shadow: 0 7px 0 #c45c3e;
}

#playBtn:hover, #retryBtn:hover { transform: translateY(1px); box-shadow: 0 6px 0 #c45c3e; }
#playBtn:active, #retryBtn:active { transform: translateY(6px); box-shadow: 0 1px 0 #c45c3e; }

.controls {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.92;
  text-shadow: 0 2px 0 rgba(74, 46, 34, 0.35);
}

.controls span { opacity: 0.55; padding: 0 6px; }

#pause, #over {
  background: rgba(58, 28, 16, 0.35);
}

.plaque {
  background: #fff3d6;
  color: var(--ink);
  text-align: center;
  padding: 28px 36px;
  border-radius: 28px;
  box-shadow: 0 10px 0 rgba(74, 46, 34, 0.25);
  outline: 6px solid #f0c27a;
}

.plaque h2 {
  font-family: "Luckiest Guy", system-ui;
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 8px;
}

.plaque p { font-weight: 800; margin-bottom: 16px; }

#load {
  background: #e8886a;
  z-index: 10;
}

.load-inner { width: min(320px, 70vw); text-align: center; color: #fff6e4; }
.load-name {
  font-family: "Luckiest Guy", system-ui;
  font-size: 22px;
  margin-bottom: 14px;
}
.load-track {
  height: 14px;
  background: rgba(74, 46, 34, 0.25);
  border-radius: 999px;
  overflow: hidden;
}
.load-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(#b6e25a, #5aaa32);
}

#mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 820px), (pointer: coarse) {
  #mobile { display: block; }
  .hud-tc {
    top: 86px;
    left: 18px;
    transform: none;
    align-items: flex-start;
    bottom: auto;
  }
  .hud-bot { bottom: 168px; }
  .tool:not(.selected) { display: none; }
  #jumpBtn { bottom: 140px; right: 30px; }
}

#stick {
  pointer-events: auto;
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 120px;
  height: 120px;
  background: rgba(255, 246, 228, 0.35);
  border: 3px solid rgba(255, 246, 228, 0.7);
  border-radius: 50%;
}

#knob {
  width: 54px;
  height: 54px;
  background: #fff6e4;
  border-radius: 50%;
  position: absolute;
  left: 33px;
  top: 33px;
  box-shadow: 0 4px 0 rgba(74, 46, 34, 0.2);
}

#fireBtn, #jumpBtn {
  pointer-events: auto;
  position: absolute;
  right: 24px;
  width: 86px;
  height: 86px;
  border: 0;
  border-radius: 50%;
  font-family: "Luckiest Guy", system-ui;
  color: var(--ink);
  box-shadow: 0 6px 0 rgba(74, 46, 34, 0.25);
}

#fireBtn {
  bottom: 28px;
  background: #7ec8f0;
  font-size: 18px;
}

#jumpBtn {
  bottom: 128px;
  width: 64px;
  height: 64px;
  right: 36px;
  background: #fff3d6;
  font-size: 14px;
}

#eatBtn {
  bottom: 210px;
  width: 64px;
  height: 64px;
  right: 36px;
  background: #e24b3b;
  color: #fff6e4;
  font-size: 14px;
}

@media (max-width: 700px) {
  .heart { width: 40px; height: 36px; }
  .leafbar { width: 170px; }
  .tool { width: 58px; height: 58px; }
  .tool.selected { width: 70px; height: 70px; }
  .title-stack h1 { font-size: 56px; }
  .hud-bot { bottom: 150px; }
}