.character-button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.character-button:hover {
  border-color: rgba(224, 190, 108, .55);
  background: rgba(213, 174, 84, .09);
}

.character-button > span:last-child {
  display: grid;
  gap: 2px;
}

.character-button b { font: 600 11px Georgia, serif; }
.character-button small { color: var(--muted); font-size: 7px; letter-spacing: .12em; }

.character-initial {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid #9c7d45;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #765f41, #282018 60%, #10100d);
  color: #ecd699;
  font: 700 14px Georgia, serif;
}

.tile-stack,
.tile-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.tile-stack { z-index: 0; background: transparent; }
.tile-layer { pointer-events: none; }
.tile-layer[data-tile-layer="terrain"] { z-index: 0; }
.tile-layer[data-tile-layer="relief"] { z-index: 1; opacity: .32; mix-blend-mode: soft-light; }
.tile-layer[data-tile-layer="quests"],
.tile-layer[data-tile-layer="activities"],
.tile-layer[data-tile-layer="settlements"],
.tile-layer[data-tile-layer="trade"],
.tile-layer[data-tile-layer="realms"],
.tile-layer[data-tile-layer="resources"],
.tile-layer[data-tile-layer="players"] { z-index: 2; }

.map-tile {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  pointer-events: none;
  transform: translateZ(0);
}

.tile-status {
  position: absolute;
  z-index: 9;
  top: 18px;
  right: 18px;
  padding: 7px 10px;
  border: 1px solid rgba(218, 191, 126, .18);
  color: #a89d80;
  background: rgba(7, 13, 12, .76);
  font-size: 8px;
  letter-spacing: .12em;
  pointer-events: none;
}

.cartography-list {
  margin: -6px 0 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(218, 191, 126, .12);
}

.cartography-list > small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 7px;
  letter-spacing: .14em;
}

.cartography-list > div {
  min-height: 25px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  color: #bcb79e;
  font-size: 10px;
}

.cartography-list em {
  color: #776e57;
  font-size: 7px;
  font-style: normal;
}

.map-stage.is-fallback .tile-stack { opacity: .2; }

.viewport {
  --ocean-tile: none;
  --ocean-size: 256px 256px;
  --ocean-x: 50%;
  --ocean-y: 50%;
  background-color: #0a3145;
  background-image: var(--ocean-tile), radial-gradient(circle at 46% 42%, #1b5264 0, #0d3d53 45%, #082d42 100%);
  background-repeat: repeat, no-repeat;
  background-size: var(--ocean-size), cover;
  background-position: var(--ocean-x) var(--ocean-y), center;
}

.selection-grid {
  --grid-step: 128px;
  --grid-origin-x: 50%;
  --grid-origin-y: 50%;
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(238, 213, 151, .075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(238, 213, 151, .075) 1px, transparent 1px);
  background-size: var(--grid-step) var(--grid-step);
  background-position: var(--grid-origin-x) var(--grid-origin-y);
  box-shadow: inset 0 0 50px rgba(5, 13, 15, .22);
}

.selection-grid::before,
.selection-grid::after {
  content: '';
  position: absolute;
  z-index: 1;
  background: rgba(238, 213, 151, .24);
}

.selection-grid::before { left: var(--grid-origin-x); top: 0; bottom: 0; width: 1px; }
.selection-grid::after { top: var(--grid-origin-y); left: 0; right: 0; height: 1px; }

.grid-axis { position: absolute; z-index: 3; color: rgba(232, 222, 198, .46); font: 7px/1 var(--sans); letter-spacing: .04em; }
.grid-axis span { position: absolute; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.grid-axis span[data-major="true"] { color: rgba(231, 198, 118, .68); }
.grid-axis-x { left: 0; right: 0; top: 3px; height: 11px; }
.grid-axis-x span { transform: translateX(-50%); }
.grid-axis-y { left: 4px; top: 0; bottom: 0; width: 28px; }
.grid-axis-y span { transform: translateY(-50%); }

.coordinate-origin {
  position: absolute;
  z-index: 4;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(245, 211, 127, .88);
  border-radius: 50%;
  background: rgba(8, 18, 17, .88);
  box-shadow: 0 0 0 3px rgba(8, 18, 17, .55);
  color: rgba(244, 220, 157, .8);
  font-style: normal;
}
.coordinate-origin b,
.coordinate-origin small { position: absolute; left: 9px; white-space: nowrap; }
.coordinate-origin b { top: -7px; font: 7px/1 var(--sans); }
.coordinate-origin small { top: 3px; font: 6px/1 var(--sans); letter-spacing: .08em; }

.selection-grid > span {
  position: absolute;
  display: none;
  width: 12.5%;
  height: 16.6667%;
  border: 1px solid rgba(255, 222, 139, .48);
  background: rgba(215, 183, 101, .075);
  box-shadow: inset 0 0 28px rgba(215, 183, 101, .08), 0 0 12px rgba(0, 0, 0, .28);
}

.selection-grid > span.active { display: none; }

@media (max-width: 780px) {
  .character-button > span:last-child { display: none; }
  .character-button { padding: 3px; }
  .character-initial { width: 30px; height: 30px; }
  .tile-status { top: auto; right: 10px; bottom: 10px; }
  .cartography-list { display: none; }
}