/* ============================================================
   CITY OF THE GOD — happystoner5420 Games
   AAA dark-gold divine theme, 100% offline
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #05070d;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #e8e2d0;
  user-select: none;
  -webkit-user-select: none;
}

#game {
  position: fixed; inset: 0;
  display: block;
  cursor: crosshair;
  background: radial-gradient(ellipse at 50% 40%, #0b1a2e 0%, #060b14 70%, #03060c 100%);
}

/* soft cinematic vignette */
#vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%);
  z-index: 5;
}

.hidden { display: none !important; }

/* ============ OVERLAYS & MENUS ============ */
.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 12, 0.62);
  backdrop-filter: blur(3px);
  z-index: 50;
}

.menu-panel {
  text-align: center;
  padding: 46px 64px 40px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 196, 87, 0.14), transparent 60%),
    linear-gradient(160deg, rgba(24, 30, 46, 0.96), rgba(10, 13, 22, 0.97));
  border: 1px solid rgba(255, 196, 87, 0.35);
  box-shadow: 0 30px 90px rgba(0,0,0,0.8), inset 0 0 60px rgba(255,196,87,0.05);
  min-width: 380px;
  max-width: 92vw;
  max-height: 92vh;
  overflow: auto;
}

.title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 58px;
  letter-spacing: 6px;
  font-weight: 700;
  line-height: 1.05;
  background: linear-gradient(180deg, #ffe9b0 0%, #f2b94b 45%, #b97b1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(255, 196, 87, 0.35);
}
.title span { display: block; font-size: 26px; letter-spacing: 14px; color: #cfe3ff; -webkit-text-fill-color: #cfe3ff; background: none; }

.subtitle {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8fa3c4;
}

.menu-buttons { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }

.menu-btn {
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 1px;
  color: #f3ecd8;
  padding: 13px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 196, 87, 0.28);
  background: linear-gradient(180deg, rgba(46, 58, 84, 0.9), rgba(22, 28, 42, 0.95));
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.menu-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 26px rgba(0,0,0,0.55), 0 0 22px rgba(255, 196, 87, 0.25);
  border-color: rgba(255, 196, 87, 0.7);
}
.menu-btn:active { transform: translateY(0) scale(0.98); }
.menu-btn.primary {
  background: linear-gradient(180deg, #ffd98a, #e8a83c 55%, #b97b1c);
  color: #2a1c05;
  font-weight: 700;
  border-color: #ffe9b0;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

.gore-toggle {
  display: block;
  margin-top: 24px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #b7c4dd;
  cursor: pointer;
}
.gore-toggle input { accent-color: #c0392b; transform: scale(1.2); margin-right: 8px; vertical-align: middle; }
.gore-on {
  display: inline-block;
  margin-left: 6px;
  color: #ff6b6b;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 60, 60, 0.6);
}

.menu-note { margin-top: 18px; font-size: 11px; letter-spacing: 2px; color: #5d6b87; text-transform: uppercase; }

/* ============ MODALS ============ */
.modal {
  padding: 40px 46px;
  border-radius: 20px;
  max-width: 640px;
  max-height: 88vh;
  overflow: auto;
  text-align: center;
  background: linear-gradient(160deg, rgba(26, 32, 50, 0.98), rgba(12, 15, 26, 0.98));
  border: 1px solid rgba(255, 196, 87, 0.4);
  box-shadow: 0 30px 90px rgba(0,0,0,0.85);
}
.modal.small { max-width: 380px; }
.modal h2 {
  font-family: Georgia, serif;
  font-size: 34px;
  letter-spacing: 3px;
  color: #ffd98a;
  margin-bottom: 20px;
  text-shadow: 0 0 30px rgba(255, 196, 87, 0.4);
}
.modal .menu-btn { width: 100%; margin-top: 14px; }

.howto-body { text-align: left; font-size: 14.5px; line-height: 1.65; color: #cdd6e8; }
.howto-body p { margin: 12px 0; }
.howto-body ul { margin: 8px 0 8px 22px; }
.howto-body li { margin: 5px 0; }
.howto-body b { color: #ffd98a; }

.credits-big { font-size: 30px; letter-spacing: 3px; color: #ffd98a; margin-top: 8px; }
.credits-sub { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #8fa3c4; margin: 10px 0; }
.credits-title { font-family: Georgia, serif; font-size: 26px; letter-spacing: 6px; color: #e8e2d0; margin: 14px 0; }
.credits-thanks { font-size: 13px; color: #7d8aa8; line-height: 1.7; margin-top: 18px; }

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

#topbar {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 14px;
  pointer-events: auto;
}
.stat {
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(255, 196, 87, 0.25);
  border-radius: 12px;
  padding: 7px 16px;
  display: flex; flex-direction: column; align-items: center;
  min-width: 84px;
  backdrop-filter: blur(4px);
}
.stat span { font-size: 22px; font-weight: 700; color: #ffd98a; line-height: 1.1; }
.stat small { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #8fa3c4; }

#plague-icons { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.plague-chip {
  font-size: 17px;
  padding: 5px 9px;
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.6);
  border: 1px solid rgba(255, 196, 87, 0.15);
  filter: grayscale(1) opacity(0.45);
  transition: all 0.3s ease;
}
.plague-chip.active {
  filter: none;
  border-color: #ff6b6b;
  background: rgba(120, 20, 20, 0.55);
  box-shadow: 0 0 14px rgba(255, 60, 60, 0.5);
}

.topbtns { display: flex; gap: 8px; }
.topbtn {
  pointer-events: auto;
  font-size: 17px;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 196, 87, 0.3);
  background: linear-gradient(180deg, rgba(46, 58, 84, 0.92), rgba(20, 26, 40, 0.95));
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.2s ease;
}
.topbtn:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 0 16px rgba(255, 196, 87, 0.3); }
.topbtn.active { background: linear-gradient(180deg, #ffd98a, #e8a83c); }

/* ============ TOOLBAR ============ */
#toolbar {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap: 6px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(255, 196, 87, 0.25);
  backdrop-filter: blur(5px);
  pointer-events: auto;
  max-width: 96vw;
  overflow: hidden;
}
.tool-btn {
  font-size: 20px;
  width: 52px; height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(52, 64, 92, 0.85), rgba(26, 33, 50, 0.9));
  cursor: pointer;
  position: relative;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.tool-btn:hover { transform: translateY(-2px); box-shadow: 0 0 14px rgba(255, 196, 87, 0.35); border-color: rgba(255, 196, 87, 0.5); }
.tool-btn.active {
  background: linear-gradient(180deg, #ffd98a, #e8a83c);
  border-color: #fff2cc;
  box-shadow: 0 0 20px rgba(255, 196, 87, 0.6);
  transform: translateY(-2px);
}
.tool-btn .tlabel {
  position: absolute;
  bottom: -3px; left: 50%;
  transform: translateX(-50%);
  font-size: 7.5px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: #aeb9d0;
  text-shadow: 0 1px 2px #000;
}
.tool-btn.active .tlabel { color: #2a1c05; text-shadow: none; }

#hint {
  position: absolute;
  bottom: 156px; left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  letter-spacing: 1px;
  color: #e8e2d0;
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(255, 196, 87, 0.25);
  border-radius: 20px;
  padding: 8px 22px;
  max-width: 80vw;
  text-align: center;
  backdrop-filter: blur(4px);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#toast {
  position: absolute;
  top: 40%; left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #ffd98a;
  text-shadow: 0 0 30px rgba(255, 140, 0, 0.8), 0 4px 12px #000;
  opacity: 0;
  transition: opacity 0.4s ease;
  text-align: center;
  max-width: 92vw;
  pointer-events: none;
}
#toast.show { opacity: 1; }
#toast small { display: block; font-size: 16px; letter-spacing: 3px; color: #ff9d6b; }

#heatbar {
  position: absolute;
  top: 76px; right: 12px;
  width: 190px; height: 10px;
  border-radius: 8px;
  background: rgba(8, 12, 20, 0.7);
  border: 1px solid rgba(255, 196, 87, 0.25);
  overflow: hidden;
}
#heatfill {
  width: 0%; height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #ffb300, #ff5a00, #ff1e00);
  box-shadow: 0 0 14px rgba(255, 80, 0, 0.8);
  transition: width 0.5s ease;
}