:root {
  --bg: #07080c;
  --stone: #4a4a52;
  --line: #3a3a44;
  --ink: #ece6d6;
  --muted: #a8a294;
  --gold: #e8c45a;
  --blood: #c0302a;
  --leaf: #6aa84f;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: "VT323", "Courier New", monospace;
  font-size: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 48px),
    radial-gradient(ellipse at 50% 30%, #1a1c26, var(--bg) 70%);
  background-color: var(--bg);
}

.stage {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #2a2a30, 0 20px 60px rgba(0, 0, 0, 0.8);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  cursor: crosshair;
}

/* ---------- HUD ---------- */

.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 5, 8, 0.85), rgba(4, 5, 8, 0));
}

.hud .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}

.hud a, .hud button { pointer-events: auto; }

h1 {
  margin: 0;
  font-family: "Pixelify Sans", "VT323", monospace;
  font-weight: 700;
  font-size: clamp(16px, 3.4vmin, 24px);
  color: var(--gold);
  text-shadow: 2px 2px 0 #2a1a00;
}

.links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats {
  margin-top: 4px;
  font-size: clamp(16px, 3vmin, 22px);
  color: var(--muted);
}

.stats b {
  color: var(--ink);
  font-weight: 400;
}

.wall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bar {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.bar span {
  display: block;
  width: clamp(10px, 3vmin, 20px);
  height: 100%;
  border: 1px solid #000;
  background: linear-gradient(180deg, #8a8a94, #5a5a64);
  box-shadow: 0 0 0 1px var(--stone);
  transition: height 0.2s;
}

.bar span.low { background: linear-gradient(180deg, #e04a3a, #8a1a14); }

.notice {
  margin: 6px 0 0;
  text-align: center;
  font-family: "Pixelify Sans", "VT323", monospace;
  font-size: clamp(14px, 3vmin, 20px);
  color: var(--gold);
  text-shadow: 2px 2px 0 #000;
}

button {
  font-family: "VT323", "Courier New", monospace;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  background: rgba(10, 10, 14, 0.8);
  border: 2px solid var(--line);
  border-radius: 0;
  padding: 4px 8px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
}

button:hover { border-color: #5a5a66; }

button:disabled { opacity: 0.4; cursor: default; }

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.home {
  color: var(--muted);
  text-decoration: none;
  font-size: 18px;
}

.home:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Overlays ---------- */

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 3, 6, 0.55);
}

.card {
  width: min(400px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 18px 18px 20px;
  background: #121318;
  border: 3px solid var(--stone);
  box-shadow: 5px 5px 0 #000, inset 0 0 0 2px #000;
  text-align: center;
}

.card h2 {
  margin: 0 0 10px;
  font-family: "Pixelify Sans", "VT323", monospace;
  font-weight: 700;
  font-size: clamp(20px, 5vmin, 30px);
  color: var(--gold);
  text-shadow: 3px 3px 0 #2a1a00;
}

.card p { margin: 0 0 10px; font-size: 20px; }

.card ul {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 18px;
  color: var(--muted);
}

.card li { margin: 5px 0; }

.card li b { color: var(--ink); font-weight: 400; }

.card .small { font-size: 18px; color: var(--muted); }

button.primary {
  margin-top: 6px;
  font-family: "Pixelify Sans", "VT323", monospace;
  font-weight: 700;
  font-size: 20px;
  padding: 10px 18px;
  color: #1a1000;
  background: var(--gold);
  border-color: #fff0b0;
  box-shadow: 3px 3px 0 #000;
}

button.primary:hover { background: #f4d470; }

button.primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }