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

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #2b1f16;
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  user-select: none; -webkit-user-select: none;
}

#game { position: fixed; inset: 0; display: block; }

#vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(60, 35, 15, 0.45) 100%);
}

.hidden { display: none !important; }

/* ---------- overlays: warm recipe-card paper ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  background: rgba(240, 228, 202, 0.93);
  backdrop-filter: blur(4px);
  color: #4a3524;
  text-align: center;
}

#logo {
  width: min(540px, 84vw);
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(60, 35, 15, 0.35));
}

.overlay .sub { color: #7a5f45; font-size: 16px; font-style: italic; margin-top: -10px; }

.overlay h2 {
  font-size: 52px; font-weight: 900; letter-spacing: 2px;
  color: #a8352a; text-shadow: 2px 3px 0 rgba(140, 95, 55, 0.25);
}

#death-by { color: #7a5f45; font-size: 17px; font-style: italic; margin-top: -8px; }

#name-input {
  width: 280px; padding: 13px 16px;
  font-size: 17px; text-align: center; font-weight: 600;
  font-family: inherit;
  color: #3a2418; background: rgba(255, 250, 238, 0.85);
  border: 2px solid #b09268; border-radius: 8px;
  outline: none;
}
#name-input::placeholder { color: #a08560; }
#name-input:focus { border-color: #a8452f; }

.overlay button {
  width: 280px; padding: 14px;
  font-size: 20px; font-weight: 800; letter-spacing: 2px;
  font-family: inherit;
  color: #f7ecd8; background: linear-gradient(180deg, #b95c42, #96412c);
  border: 2px dashed rgba(247, 236, 216, 0.65); border-radius: 10px;
  outline: 3px solid #7a3a26;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(90, 50, 25, 0.4);
  transition: transform 0.08s ease, filter 0.08s ease;
}
.overlay button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.overlay button:active { transform: translateY(1px); }

#respawn-btn { background: linear-gradient(180deg, #a8703a, #855426); outline-color: #6b4420; }

#conn { font-size: 13px; font-style: italic; }
#conn.on { color: #3f7d33; }
#conn.off { color: #a8542f; }
#conn.wait { color: #8a7458; }

#ro-wait { font-size: 14px; font-style: italic; color: #8a7458; }

.controls {
  display: flex; gap: 22px; margin-top: 8px;
  color: #8a7458; font-size: 14px;
}
.controls b { color: #4a3020; }

.death-stats { display: flex; gap: 34px; margin: 8px 0; }
.death-stats div { display: flex; flex-direction: column; }
.death-stats span { font-size: 32px; font-weight: 800; color: #4a3020; }
.death-stats label { font-size: 12px; color: #8a7458; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- HUD: needlepoint & butcher paper ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; color: #4a3524; }

#leaderboard {
  position: absolute; top: 14px; right: 14px;
  min-width: 195px; padding: 10px 14px;
  background: rgba(240, 228, 202, 0.92); border-radius: 8px;
  border: 1px solid rgba(110, 75, 45, 0.55);
  box-shadow: 0 2px 10px rgba(60, 35, 15, 0.25);
}
.lb-title { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #8a7458; margin-bottom: 6px; }
#lb-list { list-style: none; }
#lb-list li {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 13px; padding: 2px 0; color: #4a3524;
}
#lb-list li.me { color: #a8452f; font-weight: 700; }
#lb-list li .rank { color: #a08560; margin-right: 6px; }
#lb-list li .score { color: #8a7458; }
#lb-list li.me .score { color: #a8452f; }

#killfeed {
  position: absolute; top: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
}
#killfeed .kf {
  padding: 5px 10px; border-radius: 6px;
  background: rgba(240, 228, 202, 0.92);
  border: 1px solid rgba(110, 75, 45, 0.45);
  color: #5c4630;
  animation: kf-in 0.18s ease;
}
#killfeed .kf b { color: #3a2418; }
#killfeed .kf .skull { color: #a8352a; margin: 0 5px; }
#killfeed .kf.gold {
  background: rgba(232, 185, 60, 0.35);
  border-color: rgba(168, 117, 42, 0.7);
  color: #6b4e10;
}
@keyframes kf-in { from { opacity: 0; transform: translateX(-8px); } }

#bottom {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  width: min(420px, 70vw);
  display: flex; flex-direction: column; gap: 5px; align-items: center;
}
#weapon-name {
  font-size: 14px; font-weight: 700; letter-spacing: 1.5px;
  color: #4a3020; text-shadow: 0 1px 0 rgba(250, 244, 228, 0.8);
}

.bar {
  position: relative; width: 100%; height: 16px;
  background: rgba(70, 45, 25, 0.5); border-radius: 8px;
  border: 1px solid rgba(90, 60, 30, 0.6); overflow: hidden;
}
.bar.xp { height: 10px; width: 86%; }
.bar div { height: 100%; border-radius: 7px; transition: width 0.12s ease; }
#hp-fill { width: 100%; background: linear-gradient(180deg, #86b356, #5e8a34); }
#hp-fill.low { background: linear-gradient(180deg, #c96a4a, #a8352a); }
#xp-fill { width: 0%; background: linear-gradient(180deg, #e0a83c, #b3762a); }
.bar span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
  color: #f7ecd8; text-shadow: 0 1px 2px rgba(50, 30, 10, 0.8);
}
#stat-line { font-size: 13px; color: #5c4630; text-shadow: 0 1px 0 rgba(250, 244, 228, 0.7); }
#stat-kills { color: #a8452f; }

#minimap {
  position: absolute; bottom: 18px; right: 16px;
  border-radius: 8px;
  background: rgba(240, 228, 202, 0.88);
  border: 2px solid #8a5f3c;
  box-shadow: 0 2px 10px rgba(60, 35, 15, 0.25);
}

#hint {
  position: absolute; bottom: 8px; left: 12px;
  font-size: 11px; color: #6b543a; text-shadow: 0 1px 0 rgba(250, 244, 228, 0.6);
}

#timer {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-size: 28px; font-weight: 800; letter-spacing: 2px;
  color: #4a3020; text-shadow: 0 1px 0 rgba(250, 244, 228, 0.8), 0 3px 8px rgba(60, 35, 15, 0.3);
  font-variant-numeric: tabular-nums;
}
#timer.urgent { color: #a8352a; animation: timer-pulse 1s infinite; }
@keyframes timer-pulse { 50% { opacity: 0.5; } }

/* ---------- round over ---------- */
#roundover h2 { color: #8a5f2a; }
#roundover h2.lost { color: #a8352a; }
#ro-winner { font-size: 18px; color: #5c4630; font-style: italic; margin-top: -6px; }
#ro-list {
  list-style: none; width: 300px; margin: 6px 0;
  display: flex; flex-direction: column; gap: 4px;
}
#ro-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 14px; border-radius: 6px;
  background: rgba(110, 75, 45, 0.12);
  border: 1px solid rgba(110, 75, 45, 0.25);
  font-size: 15px; color: #4a3524;
}
#ro-list li.me { color: #a8452f; font-weight: 700; background: rgba(168, 69, 47, 0.12); }
#ro-list li:first-child { background: rgba(200, 150, 60, 0.28); color: #5c3a10; font-weight: 700; }
#ro-list li .rank { color: #a08560; margin-right: 8px; }