html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;

  font-family: 'Spectral', Georgia, serif;
}

/* Tiled parchment background */
#parchment-bg {
  position: fixed;
  inset: 0;
  background-image: url('../assets/Parchment_Tile.png');
  background-repeat: repeat;
  background-size: auto;
  z-index: 0;
}

/* Leaflet map layer */
#map {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: transparent;
}

/* Remove Leaflet default gray */
.leaflet-container {
  background: transparent;
}

/* Soft hex glow */
.hex-glow {
  filter: blur(2px);
}

/* Themed scrollbars */
#codex-content,
#panel-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(94, 55, 22, 0.52) rgba(232, 196, 137, 0.28);
}

#codex-content::-webkit-scrollbar,
#panel-content::-webkit-scrollbar {
  width: 12px;
}

#codex-content::-webkit-scrollbar-track,
#panel-content::-webkit-scrollbar-track {
  background: rgba(232, 196, 137, 0.28);
  border-radius: 999px;
}

#codex-content::-webkit-scrollbar-thumb,
#panel-content::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      rgba(111, 66, 26, 0.72),
      rgba(64, 36, 13, 0.62)
    );
  border: 3px solid rgba(232, 196, 137, 0.42);
  border-radius: 999px;
}

#codex-content::-webkit-scrollbar-thumb:hover,
#panel-content::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      rgba(126, 74, 29, 0.82),
      rgba(64, 36, 13, 0.72)
    );
}

option {
  background: #ecd6a7;
  color: #3a2614;
}