* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0708; }
body { font-family: "Share Tech Mono", monospace; color: #e8dcc8; user-select: none; }
#c { display: block; width: 100%; height: 100%; }
#boot {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    linear-gradient(180deg, rgba(8,5,6,0.55), rgba(8,5,6,0.88)),
    url("../assets/bg-mine.jpg") center / cover;
  z-index: 10;
}
.card { width: min(520px, 92vw); text-align: center; }
.kicker { letter-spacing: 0.28em; font-size: 0.72rem; color: #c45a2a; }
h1 {
  font-family: "Cinzel", serif; font-size: clamp(3rem, 10vw, 5.2rem);
  color: #f0e6d4; text-shadow: 0 6px 0 #3a1010;
}
.blurb { margin: 10px 0 18px; color: #b8a890; line-height: 1.45; }
#start {
  border: 2px solid #c45a2a; background: #2a1010; color: #f0e6d4;
  font: 700 1rem "Cinzel", serif; letter-spacing: 0.2em;
  padding: 12px 28px; cursor: pointer;
}
#start:hover { background: #4a1810; }
.keys { margin: 18px auto 0; text-align: left; width: max-content; color: #8a7a68; font-size: 0.78rem; }
.parks { margin-top: 16px; font-size: 0.75rem; }
.parks a { color: #c45a2a; }
.hidden { display: none !important; }
#hud { position: absolute; inset: 0; pointer-events: none; }
#health { position: absolute; top: 14px; left: 16px; display: flex; gap: 6px; }
.pip { width: 18px; height: 18px; border: 2px solid #6a2010; background: #3a0808; transform: rotate(45deg); }
.pip.on { background: #c81e1e; box-shadow: 0 0 8px #c81e1e; }
#inv { position: absolute; top: 14px; right: 16px; color: #d4b06a; font-size: 0.85rem; }
#msg {
  position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
  font-family: "Cinzel", serif; font-size: 1.4rem; color: #f0e6d4;
  text-shadow: 0 3px 0 #3a1010; text-align: center;
}
#hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; color: #8a7a68; }