:root {
  --bg: #0f0f12;
  --panel: #15161b;
  --text: #d6deeb;
  --muted: #8a98b0;
  --accent: #7aa2f7;
  --danger: #f7768e;
  --success: #9ece6a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(1200px 800px at 50% 30%, #171922, var(--bg) 60%);
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.ui {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* allow wrapping on small widths */
  background: linear-gradient(180deg, rgba(122,162,247,0.08), rgba(21,22,27,0.8));
  border: 1px solid rgba(122,162,247,0.2);
  border-radius: 10px;
  padding: 10px 14px;
  backdrop-filter: blur(6px);
}

.title {
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  row-gap: 6px;
}
.stats #health { color: var(--success); }
.stats #floor { color: var(--accent); }

.help {
  color: var(--muted);
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#game {
  display: block;
  margin: 80px auto 12px;
  background: #0b0c10;
  border-radius: 12px;
  border: 1px solid rgba(122,162,247,0.2);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 0 60px rgba(122,162,247,0.05);
}

/* Responsive tweaks for very small screens */
@media (max-width: 900px) {
  .title { font-size: 14px; }
  .stats { gap: 10px; }
  .stats #health, .stats #floor { font-size: 12px; }
  .help { font-size: 11px; }
}

.log {
  max-width: 960px;
  margin: 0 auto 24px;
  min-height: 50px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid rgba(122,162,247,0.15);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Right-side log mirror */
.log.side {
  position: fixed;
  right: 10px;
  top: 80px;
  width: 300px;
  max-height: calc(100% - 120px);
  overflow: auto;
  margin: 0;           /* override centered layout */
  z-index: 12;         /* above canvas */
  opacity: 0.95;
}

/* Hide side log on smaller screens */
@media (max-width: 1200px) {
  .log.side {
    display: none;
  }
}
.log .entry { margin: 2px 0; }
.log .entry.info { color: #cbd5e1; } /* neutral info */
.log .entry.block { color: var(--accent); font-weight: 500; }
.log .entry.notice { color: #718918; font-weight: 500; } /* informational: custom */
.log .entry.warn { color: #eab308; font-weight: 600; } /* warning: amber */
.log .entry.error, .log .entry.bad { color: #ff9e64; font-weight: 700; text-shadow: 0 0 6px rgba(255,158,100,0.25); } /* error: orange */
.log .entry.fatal, .log .entry.crit, .log .entry.death { color: #ff4c4c; font-weight: 700; text-shadow: 0 0 8px rgba(255,76,76,0.35); } /* fatal: red */
.log .entry.good { color: var(--success); }
.log .entry.flavor { color: #b4f9f8; } /* teal for flavor text */

/* Status/injury tones */
.log .entry.warn[data-cat="combat"][data-tone="bleed"] { color: #f87171; font-weight: 700; }  /* player bleed ticks */
.log .entry.flavor[data-cat="combat"][data-tone="bleed"] { color: #f87171; font-weight: 600; } /* enemy bleed ticks and start bleed */
.log .entry.flavor[data-cat="combat"][data-tone="injury"] { color: #ff9e64; font-weight: 600; font-style: italic; } /* corpse injury descriptions */
.log .entry .detail-toggle { margin-left: 6px; color: #718918; cursor: pointer; font-size: 11px; }
.log .entry .details { margin-top: 4px; padding: 6px 8px; background: #0f1117; border: 1px solid #253047; border-radius: 6px; color: #cbd5e1; font-size: 11px; white-space: pre-wrap; }

/* Combat-specific coloring by side */
.log .entry.info[data-cat="combat"][data-side="player"] { color: var(--success); } /* player normal hits: green */
.log .entry.info[data-cat="combat"][data-side="enemy"] { color: #eab308; }        /* enemy normal hits: amber */
.log .entry.crit[data-side="player"] { color: var(--success); font-weight: 700; text-shadow: 0 0 6px rgba(158,206,106,0.35); } /* player crit: bright green */
.log .entry.crit[data-side="enemy"] { color: #ff4c4c; font-weight: 700; text-shadow: 0 0 8px rgba(255,76,76,0.35); }           /* enemy crit: red */
/* blocks remain blue via .entry.block */

/* category accents for info-level only (subtle left border) */
.log .entry.info[data-cat="world"],
.log .entry.info[data-cat="worldgen"] { border-left: 3px solid #5cc9f5; padding-left: 6px; }
.log .entry.info[data-cat="town"],
.log .entry.info[data-cat="townstate"],
.log .entry.info[data-cat="towngen"] { border-left: 3px solid #8ec07c; padding-left: 6px; }
.log .entry.info[data-cat="dungeon"],
.log .entry.info[data-cat="dungeonstate"] { border-left: 3px solid #c678dd; padding-left: 6px; }
.log .entry.info[data-cat="encounter"] { border-left: 3px solid #d3869b; padding-left: 6px; }
.log .entry.info[data-cat="combat"] { border-left: 3px solid #e06c75; padding-left: 6px; }
.log .entry.info[data-cat="shop"] { border-left: 3px solid #d4b483; padding-left: 6px; }
.log .entry.info[data-cat="prefabs"] { border-left: 3px solid #ff9e64; padding-left: 6px; }
.log .entry.info[data-cat="palette"] { border-left: 3px solid #7aa2f7; padding-left: 6px; }
.log .entry.info[data-cat="render"] { border-left: 3px solid #89ddff; padding-left: 6px; }
.log .entry.info[data-cat="rng"] { border-left: 3px solid #7e83e1; padding-left: 6px; }
.log .entry.info[data-cat="services"] { border-left: 3px solid #a3a3a3; padding-left: 6px; }
.log .entry.info[data-cat="occupancy"] { border-left: 3px solid #c9a26b; padding-left: 6px; }
.log .entry.info[data-cat="movement"] { border-left: 3px solid #94a3b8; padding-left: 6px; }
.log .entry.info[data-cat="region"] { border-left: 3px solid #5cc9f5; padding-left: 6px; }
.log .entry.info[data-cat="items"] { border-left: 3px solid #d7ba7d; padding-left: 6px; }
.log .entry.info[data-cat="enemies"] { border-left: 3px solid #e06c75; padding-left: 6px; }
.log .entry.info[data-cat="buff"] {
  color: #ffd700;
  font-weight: 600;
  border-left: 3px solid #ffd700;
  padding-left: 6px;
}

.loot-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 260px;
  max-width: 420px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(21,22,27,0.95), rgba(21,22,27,0.9));
  border: 1px solid rgba(122,162,247,0.25);
  border-radius: 12px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6);
  z-index: 10;
  transition: opacity 180ms ease, transform 180ms ease;
}

.loot-title {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}

#loot-list {
  margin: 0 0 6px 0;
  padding-left: 18px;
  color: var(--text);
  max-height: 200px;
  overflow: auto;
}

.loot-hint {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.gameover-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 280px;
  max-width: 460px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(27,29,36,0.98), rgba(21,22,27,0.96));
  border: 1px solid rgba(247,118,142,0.35);
  border-radius: 12px;
  box-shadow: 0 24px 90px rgba(0,0,0,0.65);
  z-index: 20;
  transition: opacity 200ms ease, transform 180ms ease;
}

.gameover-summary {
  color: var(--text);
  margin: 4px 0 10px 0;
  font-size: 13px;
}

.btn {
  background: linear-gradient(180deg, rgba(122,162,247,0.25), rgba(122,162,247,0.15));
  color: var(--text);
  border: 1px solid rgba(122,162,247,0.45);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: filter 120ms ease, transform 80ms ease;
}
.btn:hover {
  filter: brightness(1.08);
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}

.inv-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 520px;
  max-width: 680px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(21,22,27,0.96), rgba(21,22,27,0.94));
  border: 1px solid rgba(122,162,247,0.3);
  border-radius: 12px;
  box-shadow: 0 24px 90px rgba(0,0,0,0.6);
  z-index: 15;
  transition: opacity 180ms ease, transform 180ms ease;
}

.inv-title {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}

.inv-stats {
  color: var(--text);
  font-size: 12px;
  margin: 2px 0 10px 0;
}

.inv-subtitle {
  color: var(--muted);
  font-size: 12px;
  margin: 10px 0 6px 0;
}

.equip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px 16px;
  padding: 6px 0 4px 0;
  border-bottom: 1px solid rgba(122,162,247,0.15);
}

.slot {
  padding: 6px 8px;
  background: rgba(122,162,247,0.06);
  border: 1px solid rgba(122,162,247,0.15);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
}

.slot .name {
  color: var(--text);
}
.slot .empty {
  color: var(--muted);
}

.inv-list {
  margin: 0;
  padding-left: 18px;
  max-height: 220px;
  overflow: auto;
  color: var(--text);
}

.inv-list li {
  cursor: pointer;
  margin: 4px 0;
  transition: color 120ms ease;
}
.inv-list li:hover {
  color: var(--accent);
}

/* Buffed items: subtle visual indicator without cluttering the main label */
.inv-list li.has-buffs::after {
  content: " *";
  color: #ffd700;
  font-weight: 500;
}

/* Make GOD panel scrollable on constrained viewports */
#god-panel {
  max-height: 80vh;
  overflow: auto;
}

/* GOD panel layout helpers */
.god-section {
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1px solid rgba(15,23,42,0.9);
}

.god-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}