:root {
  --rarity-common: #908880;
  --rarity-uncommon: #4caf50;
  --rarity-rare: #4090e0;
  --rarity-epic: #a060d0;
  --rarity-legendary: #ff9800;
}

:root {
  --theme-bg: #0c0908;
  --theme-text: #ede4d6;
  --theme-surface: #141110;
  --theme-border: #2e2418;
  --theme-surface-hi: #1c1814;
  --theme-surface-up: #241f18;
  --theme-border-hi: #46341e;
  --theme-text-mid: #b8a888;
  --theme-text-dim: #9b7946;
  --theme-text-faint: #6b583e;
  --bag-of-holding: #c87830;
  --void-satchel: #b070e0;
  --gold: #f2c040;
  --gold-lo: #c09020;
  --gold-dim: #6e4c10;
  --danger: #b83020;
  --danger-hi: #e04030;
  --success: #2e7a3a;
  --success-hi: #3aaa4a;
}

body:has(.crawl-view) {
  overflow: hidden;
}

body:has(.break-screen) {
  overflow: hidden;
}

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

html, body {
  height: 100%;
  background: var(--theme-bg);
  color: var(--theme-text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(120, 80, 30, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 80, 30, 0.1) 1px, transparent 1px), linear-gradient(rgba(80, 50, 15, 0.07) 2px, transparent 2px), linear-gradient(90deg, rgba(80, 50, 15, 0.07) 2px, transparent 2px);
  background-size: 24px 24px, 24px 24px, 96px 72px, 96px 72px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 45% at 50% 8%, rgba(200, 100, 20, 0.28) 0%, rgba(140, 70, 10, 0.12) 40%, transparent 70%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.65) 100%);
}

#app_wrapper {
  height: 100%;
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}