/* ROTGRAVE — HUD + chrome. The 3D is all Three.js; this is the overlay. */

:root {
  --blood: #8a1c1c;
  --blood-bright: #c92a2a;
  --bone: #d8d2c4;
  --rot: #6b7a4f;
  --ink: #0a0c0a;
  --hud-dim: rgba(216, 210, 196, 0.55);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Consolas", "SF Mono", "Menlo", monospace;
  color: var(--bone);
  cursor: crosshair;
  user-select: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- HUD overlay ---- */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* Vitals (top-left) */
#vitals {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 260px;
}
.bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}
.bar-label {
  width: 34px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--hud-dim);
}
.bar {
  flex: 1;
  height: 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(216, 210, 196, 0.25);
  position: relative;
  overflow: hidden;
}
.fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transition: width 0.12s linear, background 0.3s;
}
.fill.health { background: linear-gradient(90deg, #6e1414, var(--blood-bright)); width: 100%; }
.fill.stamina { background: linear-gradient(90deg, #2f5d33, #74b07a); width: 100%; }
.fill.car { background: linear-gradient(90deg, #6a5212, #d2a24a); width: 100%; }
.fill.hunger { background: linear-gradient(90deg, #6a3a14, #d98a3a); width: 100%; }
.fill.thirst { background: linear-gradient(90deg, #134a6e, #4aa8d2); width: 100%; }
/* Low food/water flashes a warning so empty needs don't go unnoticed. */
.fill.hunger.low, .fill.thirst.low { animation: lowpulse 1s ease-in-out infinite; }
@keyframes lowpulse { 0%, 100% { opacity: 1; filter: none; } 50% { opacity: 0.55; filter: brightness(1.5); } }
.fill.infection { background: linear-gradient(90deg, #3a5a1a, #8fd24a); width: 0%; animation: infpulse 1.1s ease-in-out infinite; }
@keyframes infpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.bar-row.hidden { display: none; }
#weapon {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--hud-dim);
}
#weapon-name { color: var(--hud-bright, #e8e2d0); }

/* Stats (top-right) */
#stats {
  position: absolute;
  top: 18px;
  right: 18px;
  text-align: right;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1px;
  text-shadow: 0 1px 3px #000;
}
#clock { font-size: 22px; color: var(--bone); }
#kills { color: var(--blood-bright); }
#threat { color: var(--rot); }
#fps { color: var(--hud-dim); font-size: 11px; }

/* Minimap (bottom-right) */
#minimap {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(216, 210, 196, 0.25);
  background: rgba(0, 0, 0, 0.45);
  image-rendering: pixelated;
}

/* Crosshair */
#crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  opacity: 0.0; /* shown only while aiming on-foot; we draw a simple ring */
}

/* Contextual prompt */
#prompt {
  position: absolute;
  bottom: 122px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  letter-spacing: 1px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(216, 210, 196, 0.2);
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}
#prompt.show { opacity: 1; }
#prompt b { color: var(--blood-bright); }

/* Controls hint */
#controls {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--hud-dim);
  text-shadow: 0 1px 2px #000;
}
#controls b { color: var(--bone); }

/* Event log */
#log {
  position: absolute;
  left: 18px;
  bottom: 70px;
  width: 360px;
  font-size: 13px;
  line-height: 1.45;
  text-shadow: 0 1px 2px #000;
}
#log .line { opacity: 0; animation: logfade 6s forwards; }
#log .line.warn { color: var(--blood-bright); }
#log .line.good { color: #8fcf8f; }
@keyframes logfade {
  0% { opacity: 0; transform: translateX(-6px); }
  6% { opacity: 1; transform: translateX(0); }
  78% { opacity: 1; }
  100% { opacity: 0; }
}

/* Damage vignette */
#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 220px 40px rgba(120, 0, 0, 0);
  transition: box-shadow 0.25s ease-out;
}
#vignette.hit { box-shadow: inset 0 0 220px 70px rgba(140, 0, 0, 0.75); transition: box-shadow 0.05s; }

/* Full map viewer (toggle with M) */
#map-screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 5, 0.86);
  pointer-events: all;
}
#map-screen.hidden { display: none; }
.map-frame { text-align: center; }
.map-title {
  font-size: 18px;
  letter-spacing: 6px;
  color: var(--blood-bright);
  margin-bottom: 10px;
  text-shadow: 0 0 18px rgba(140, 0, 0, 0.5);
}
#mapcanvas {
  width: min(82vh, 82vw);
  height: min(82vh, 82vw);
  border: 1px solid rgba(216, 210, 196, 0.3);
  background: #0a0d0a;
  image-rendering: pixelated;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.75);
}
.map-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--hud-dim);
  letter-spacing: 2px;
}
.map-hint b { color: var(--bone); }

/* Pause / options menu (toggle with Esc) */
#menu-screen {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(20, 4, 4, 0.7), rgba(0, 0, 0, 0.93));
  pointer-events: all;
}
#menu-screen.hidden { display: none; }
.menu-frame { text-align: center; min-width: 300px; }
.menu-title {
  font-size: 56px;
  letter-spacing: 12px;
  color: var(--blood);
  font-weight: 900;
  text-shadow: 0 0 40px rgba(120, 0, 0, 0.55);
}
.menu-sub {
  font-size: 14px;
  letter-spacing: 8px;
  color: var(--hud-dim);
  margin: 6px 0 28px;
}
.menu-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.menu-btn {
  pointer-events: all;
  cursor: pointer;
  width: 260px;
  background: transparent;
  color: var(--bone);
  border: 1px solid rgba(216, 210, 196, 0.3);
  padding: 12px 24px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 3px;
  transition: all 0.18s;
}
.menu-btn:hover { background: var(--blood); border-color: var(--blood); color: #fff; }
.menu-hint {
  margin-top: 26px;
  font-size: 12px;
  color: var(--hud-dim);
  letter-spacing: 2px;
}
.menu-hint b { color: var(--bone); }

/* Death screen */
#death-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(40, 0, 0, 0.6), rgba(0, 0, 0, 0.92));
  pointer-events: all;
  z-index: 20;
}
#death-screen.hidden { display: none; }
#death-screen h1 {
  font-size: 84px;
  letter-spacing: 8px;
  color: var(--blood-bright);
  text-shadow: 0 0 30px rgba(160, 0, 0, 0.8);
  font-weight: 900;
}
#death-screen p { color: var(--hud-dim); margin: 12px 0 28px; font-size: 16px; }
#respawn-btn {
  pointer-events: all;
  cursor: pointer;
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--blood);
  padding: 12px 36px;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 3px;
  transition: all 0.2s;
}
#respawn-btn:hover { background: var(--blood); color: #fff; }

/* Loading screen */
#loading {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050605;
  transition: opacity 0.6s;
}
#loading.gone { opacity: 0; pointer-events: none; }
.loading-inner { text-align: center; }
.loading-inner h1 {
  font-size: 64px;
  letter-spacing: 14px;
  color: var(--blood);
  font-weight: 900;
  text-shadow: 0 0 40px rgba(120, 0, 0, 0.5);
}
#loading-text { color: var(--hud-dim); margin-top: 14px; letter-spacing: 2px; }

/* --- Main menu ------------------------------------------------------------ */
#menu-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 55;
  background: #0c0f12;
}

#main-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6vh 4vw 4vh;
  pointer-events: none;          /* let the backdrop show; children opt back in */
  /* Reinforce the 3D fog with a vignette + low blood haze for mood. */
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(0,0,0,0) 38%, rgba(4,3,3,0.55) 100%),
    linear-gradient(to bottom, rgba(8,6,6,0.55), rgba(4,4,5,0) 30%, rgba(60,6,6,0.12) 78%, rgba(4,4,5,0.7));
  opacity: 1;
  transition: opacity 0.5s ease;
}
#main-menu.leaving { opacity: 0; }

.mm-top { text-align: center; pointer-events: none; }
.mm-kicker {
  font-size: clamp(11px, 1.6vw, 16px);
  letter-spacing: 0.7em;
  color: var(--hud-dim);
  text-indent: 0.7em;                 /* balance the trailing letter-spacing */
  margin-bottom: 6px;
  text-shadow: 0 2px 6px #000;
}
.mm-title {
  font-size: clamp(54px, 12vw, 150px);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: var(--blood);
  text-shadow:
    0 0 8px rgba(0,0,0,0.9),
    0 0 42px rgba(140,0,0,0.55),
    0 6px 30px rgba(0,0,0,0.8);
  animation: mm-flicker 5.5s infinite;
}
@keyframes mm-flicker {
  0%, 100% { opacity: 1; }
  47% { opacity: 1; }
  48% { opacity: 0.72; }
  49% { opacity: 1; }
  72% { opacity: 0.85; }
  73% { opacity: 1; }
}
.mm-tagline {
  margin-top: 14px;
  font-size: clamp(12px, 1.8vw, 17px);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--bone);
  opacity: 0.78;
  text-shadow: 0 2px 8px #000;
}

.mm-panel {
  pointer-events: auto;
  align-self: flex-start;
  width: min(440px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: rgba(8, 9, 8, 0.5);
  border: 1px solid rgba(216, 210, 196, 0.16);
  border-radius: 10px;
  backdrop-filter: blur(3px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.6);
}

.mm-field { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.mm-field-label {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--hud-dim);
}
.mm-seed { display: flex; gap: 8px; }
.mm-seed input {
  flex: 1;
  min-width: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(216, 210, 196, 0.25);
  border-radius: 5px;
  color: var(--bone);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.12em;
  padding: 11px 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mm-seed input::placeholder { color: rgba(216, 210, 196, 0.35); }
.mm-seed input:focus {
  border-color: var(--blood-bright);
  box-shadow: 0 0 0 1px rgba(201, 42, 42, 0.4), 0 0 16px rgba(201, 42, 42, 0.25);
}
#mm-seed-random {
  flex: 0 0 46px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(216, 210, 196, 0.25);
  border-radius: 5px;
  color: var(--bone);
  font-size: 20px;
  line-height: 1;
  transition: all 0.15s;
}
#mm-seed-random:hover { background: var(--blood); border-color: var(--blood); color: #fff; transform: rotate(90deg); }

.mm-buttons { width: 100%; display: flex; flex-direction: column; gap: 11px; }
.mm-btn {
  pointer-events: auto;
  cursor: pointer;
  width: 100%;
  background: transparent;
  color: var(--bone);
  border: 1px solid rgba(216, 210, 196, 0.32);
  border-radius: 5px;
  padding: 13px 24px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  transition: all 0.16s;
}
.mm-btn:hover { background: var(--blood); border-color: var(--blood); color: #fff; box-shadow: 0 0 22px rgba(140,0,0,0.45); }
.mm-btn-primary {
  border-color: var(--blood);
  color: #fff;
  background: linear-gradient(180deg, rgba(138,28,28,0.85), rgba(90,14,14,0.85));
  font-size: 18px;
  font-weight: 800;
  padding: 15px 24px;
}
.mm-btn-primary:hover {
  background: linear-gradient(180deg, var(--blood-bright), var(--blood));
  box-shadow: 0 0 30px rgba(201,42,42,0.6);
}
.mm-btn-small { font-size: 12px; padding: 9px 18px; letter-spacing: 0.2em; text-indent: 0.2em; }

.mm-settings {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid rgba(216, 210, 196, 0.14);
}
.mm-settings.hidden { display: none; }
.mm-settings-title {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--hud-dim);
  margin: 4px 0 2px;
}
.mm-toggle {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--bone);
  border: 1px solid rgba(216, 210, 196, 0.2);
  border-radius: 5px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.22em;
  transition: all 0.15s;
}
.mm-toggle:hover { border-color: var(--bone); }
.mm-toggle span {
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #8fcf8f;
}
.mm-toggle.off span { color: var(--hud-dim); }

.mm-footer {
  pointer-events: none;
  font-size: clamp(10px, 1.4vw, 13px);
  letter-spacing: 0.2em;
  color: var(--hud-dim);
  text-shadow: 0 2px 6px #000;
}

/* --- Hotbar + inventory --------------------------------------------------- */
#hotbar {
  position: fixed;
  left: 50%;
  bottom: 54px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 12;
  pointer-events: auto;
}
.slot {
  position: relative;
  width: 52px;
  height: 52px;
  border: 2px solid rgba(216, 210, 196, 0.22);
  background: rgba(10, 12, 10, 0.62);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.1s, transform 0.08s, box-shadow 0.1s;
}
.slot.filled { background: rgba(20, 24, 18, 0.78); }
.slot.selected {
  border-color: var(--blood-bright) !important;
  box-shadow: 0 0 14px rgba(201, 42, 42, 0.5);
  transform: translateY(-3px);
}
.slot .key {
  position: absolute;
  top: 1px;
  left: 4px;
  font-size: 10px;
  color: var(--hud-dim);
}
.slot .qty {
  position: absolute;
  bottom: 1px;
  right: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bone);
  text-shadow: 0 1px 2px #000;
}
.slot .glyph { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
.slot.dragging { opacity: 0.4; }
.slot.drag-over { border-color: var(--bone); box-shadow: 0 0 10px rgba(216, 210, 196, 0.45); }

#inv-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 6, 5, 0.78);
  backdrop-filter: blur(2px);
  pointer-events: auto;   /* #hud disables pointer events; re-enable for the overlay */
}
#inv-screen.hidden { display: none; }
.inv-frame {
  border: 2px solid rgba(216, 210, 196, 0.25);
  background: rgba(10, 12, 10, 0.92);
  padding: 24px 28px;
  border-radius: 10px;
  text-align: center;
}
.inv-title {
  font-size: 22px;
  letter-spacing: 8px;
  color: var(--blood-bright);
  margin-bottom: 18px;
  font-weight: 800;
}
#inv-grid {
  display: grid;
  grid-template-columns: repeat(6, 52px);
  gap: 6px;
  justify-content: center;
}
.inv-hint { margin-top: 18px; color: var(--hud-dim); font-size: 12px; letter-spacing: 1px; }

/* ---- Body damage / triage screen (toggle H) ---- */
#body-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 6, 5, 0.78);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
#body-screen.hidden { display: none; }
.body-frame {
  border: 2px solid rgba(216, 210, 196, 0.25);
  background: rgba(10, 12, 10, 0.92);
  padding: 22px 30px;
  border-radius: 10px;
  text-align: center;
}
.body-title {
  font-size: 22px;
  letter-spacing: 8px;
  color: var(--blood-bright);
  margin-bottom: 16px;
  font-weight: 800;
}
.body-cols {
  display: flex;
  align-items: center;
  gap: 28px;
}
#body-svg {
  width: 190px;
  height: 304px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.bpart {
  fill: hsl(110, 62%, 42%);
  stroke: rgba(8, 10, 8, 0.85);
  stroke-width: 2.5;
  cursor: pointer;
  transition: fill 0.2s, opacity 0.2s;
}
.bpart:hover { opacity: 0.82; stroke: var(--bone); }
.bpart.bleeding { stroke: var(--blood-bright); stroke-width: 3; animation: bleedpulse 0.9s ease-in-out infinite; }
@keyframes bleedpulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.25; } }
#body-legend {
  min-width: 168px;
  text-align: left;
}
.leg-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(216, 210, 196, 0.12);
}
.leg-name { color: var(--hud-dim); }
.leg-stat { font-weight: 700; }
.leg-stat.ok { color: var(--rot); }
.leg-stat.hurt { color: #d98a3a; }
.leg-stat.bleeding { color: var(--blood-bright); animation: infpulse 1.1s ease-in-out infinite; }
.body-hint { margin-top: 18px; color: var(--hud-dim); font-size: 12px; letter-spacing: 1px; }