html, body {
  margin: 0; padding: 0;
  background: #000;
  overflow: hidden;
  height: 100%;
  font-family: 'Menlo', 'Monaco', monospace;
  color: #aaa;
  cursor: default;
}

canvas#c {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 100vw;
  height: 100vh;
}

#help {
  position: fixed;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 2px;
  color: #555;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

#vignette {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at center,
    transparent 40%, rgba(0, 0, 0, 0.55) 85%, rgba(0, 0, 0, 0.85) 100%);
  transition: background 0.32s ease-out;
}
#vignette.pulse {
  background: radial-gradient(ellipse at center,
    transparent 25%, rgba(90, 12, 12, 0.55) 75%, rgba(40, 0, 0, 0.88) 100%);
  transition: background 0.04s ease-in;
}

#flash {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 3;
  transition: background 80ms ease-out;
}

#minimap {
  position: fixed; top: 12px; left: 12px;
  width: 144px; height: 108px;
  image-rendering: pixelated;
  border: 2px solid #3a2812;
  background: rgba(0, 0, 0, 0.6);
  z-index: 4;
}

#level-name {
  position: fixed; top: 126px; left: 12px;
  background: rgba(10, 5, 2, 0.8);
  padding: 4px 10px;
  color: #f0c070;
  font-size: 11px;
  letter-spacing: 3px;
  border: 1px solid #3a2812;
  z-index: 4;
  user-select: none;
}

#kills-box {
  position: fixed; top: 14px; right: 14px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #2a1d0f, #120a04);
  border: 2px solid #5a4020;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
  z-index: 4;
  user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.kb-lbl {
  font-size: 10px; letter-spacing: 3px; color: #8a6040;
}
.kb-val {
  font-size: 22px; font-weight: bold; color: #f0c070;
  text-shadow: 0 0 6px rgba(240, 180, 80, 0.4);
  letter-spacing: 2px;
}

#hud {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px;
  background: linear-gradient(180deg, #2a1d0f, #120a04);
  border: 2px solid #5a4020;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85);
  z-index: 4;
  user-select: none;
}
.hud-col {
  display: flex; flex-direction: column; align-items: center; min-width: 66px;
}
.hud-lbl {
  font-size: 10px; letter-spacing: 3px; color: #8a6040; margin-bottom: 2px;
}
.hud-val {
  font-size: 24px; font-weight: bold; color: #f0c070;
  text-shadow: 0 0 6px rgba(240, 180, 80, 0.4);
  letter-spacing: 2px;
}
#face {
  width: 48px; height: 48px;
  image-rendering: pixelated;
  border: 1px solid #5a4020;
}

#overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  color: #ccc; font-size: 14px; letter-spacing: 6px;
  z-index: 10; cursor: pointer; user-select: none;
  transition: opacity 0.25s ease;
}
#overlay .overlay-text {
  display: none;
  padding: 14px 28px; border: 1px solid #444; background: rgba(20, 10, 5, 0.7);
  font-size: 16px; letter-spacing: 10px; min-width: 220px;
  text-align: center; color: #d8d8d8; text-transform: uppercase;
  text-shadow: 0 0 18px rgba(220, 220, 220, 0.45);
}
#overlay.intro-mode .overlay-text { display: inline-block; }
#overlay.intro-mode .title-card   { display: none; }

.title-card { text-align: center; color: #f0c070; user-select: none; }
.title-name {
  font-size: 56px; letter-spacing: 14px;
  text-shadow: 0 0 24px rgba(240, 180, 80, 0.45);
  margin-bottom: 6px;
}
.title-sub {
  font-size: 11px; letter-spacing: 5px; color: #8a6040;
  margin-bottom: 32px;
}
.title-ctrl {
  display: grid; grid-template-columns: auto auto;
  gap: 6px 22px; font-size: 12px; letter-spacing: 2px;
  color: #d0a878; margin: 0 auto 28px;
  width: fit-content; text-align: left;
}
.title-ctrl span:nth-child(2n) { color: #8a6040; text-transform: lowercase; }
.title-start {
  font-size: 14px; letter-spacing: 6px; color: #f0d070;
  padding: 10px 28px; border: 1px solid #6a4828;
  background: rgba(40, 20, 10, 0.4); display: inline-block;
}
#overlay.hidden { opacity: 0; pointer-events: none; }

.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 26px;
  background: rgba(10, 5, 2, 0.9);
  z-index: 20;
  color: #f0c070;
  font-family: inherit;
  user-select: none;
}
.screen.hidden { display: none; }
.screen h1 {
  font-size: 68px;
  letter-spacing: 14px;
  margin: 0;
  text-shadow: 0 0 32px rgba(240, 80, 40, 0.5), 0 0 8px rgba(240, 80, 40, 0.9);
}
#game-over h1 { color: #e04040; }
#victory h1   { color: #f0d070;
                text-shadow: 0 0 32px rgba(240, 200, 60, 0.5), 0 0 8px rgba(240, 200, 60, 0.9); }
#go-stats, #vic-stats {
  font-size: 14px; letter-spacing: 5px; color: #a8866a;
}
#retry-btn, #replay-btn {
  padding: 12px 42px;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 6px;
  background: #2a1d0f;
  color: #f0c070;
  border: 2px solid #5a4020;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#retry-btn:hover, #replay-btn:hover {
  background: #3a2814;
  color: #fff;
  border-color: #8a6030;
}