:root {
  --ink: #2a1810;
  --cream: #ffe9b8;
  --gold: #ffd24a;
  --mint: #3ecf7a;
  --leaf: #2f8a4a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: radial-gradient(circle at 50% 20%, #5aaa3a, #1d4a28 70%);
  color: var(--cream);
  font-family: "Press Start 2P", monospace;
}
.hidden { display: none !important; }

.wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
}
.bar {
  width: min(720px, 94vw);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  text-shadow: 2px 2px 0 #000;
}
canvas {
  width: min(720px, 94vw);
  height: auto;
  background: #f4e2b0;
  border: 6px solid #ffe9b8;
  border-radius: 16px;
  box-shadow: 0 10px 0 #163018;
  image-rendering: pixelated;
}
.hint { font-size: 8px; opacity: 0.8; text-align: center; }

#title, #over {
  position: fixed; inset: 0; z-index: 5;
  display: grid; place-items: center; text-align: center;
  background: linear-gradient(to top, rgba(20,40,18,.82), rgba(20,40,18,.25));
  font-family: "Luckiest Guy", system-ui;
}
h1, h2 {
  font-size: clamp(64px, 14vw, 110px);
  line-height: 0.85;
  color: var(--gold);
  -webkit-text-stroke: 4px #1d3018;
  paint-order: stroke fill;
  font-weight: 400;
}
.kicker { font-family: "Press Start 2P", monospace; font-size: 10px; margin-bottom: 8px; }
.year {
  width: 72px; height: 72px; margin: 8px auto 12px;
  border-radius: 50%; background: var(--mint); color: #163018;
  display: grid; place-items: center; font-size: 26px;
  box-shadow: 0 6px 0 #163018;
}
.blurb { max-width: 28ch; margin: 0 auto 16px; font-weight: 800; }
button {
  font-family: "Luckiest Guy", system-ui; font-size: 26px;
  background: var(--gold); color: #163018; border: 0; border-radius: 12px;
  padding: 10px 22px; box-shadow: 0 6px 0 #8a6a12; cursor: pointer;
}

#pad {
  display: none;
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  z-index: 4; gap: 6px; flex-direction: column; align-items: center;
}
#pad button {
  width: 64px; height: 48px; font-size: 18px; box-shadow: 0 4px 0 #8a6a12;
}
#pad .mid { display: flex; gap: 48px; }
@media (pointer: coarse), (max-width: 820px) {
  #pad { display: flex; }
  .hint { display: none; }
}