.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; }
}

/* Globe world level (MapLibre) */
.globe-container {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #020407 url("globe/sevastan-space-v1.jpg") center / cover no-repeat;
}
.globe-container[hidden] { display: none; }
.globe-map { position: absolute; inset: 0; background: transparent; }

.viewport.is-globe .map-stage,
.viewport.is-globe .selection-grid,
.viewport.is-globe .tile-status,
.viewport.is-globe .zoom-tools,
.viewport.is-globe .zoom-hint {
  display: none;
}
.viewport.is-globe { cursor: default; }

.globe-actions {
  position: absolute;
  z-index: 7;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
}
.globe-actions button {
  padding: 9px 12px;
  color: #f3e4b5;
  border: 1px solid var(--line);
  background: rgba(3, 12, 18, .84);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.globe-actions button:hover { border-color: var(--gold); background: rgba(26, 35, 31, .9); }

.globe-status {
  position: absolute;
  z-index: 7;
  left: 14px;
  bottom: 14px;
  max-width: 60%;
  color: #cdd8d8;
  font: 700 10px/1.4 ui-monospace, monospace;
  letter-spacing: .08em;
  pointer-events: none;
}
.globe-status.is-error { color: #ff9488; }

.globe-port-marker {
  width: 18px;
  height: 18px;
  border: 3px solid #f0d77e;
  border-radius: 50%;
  background: #173a35;
  box-shadow: 0 0 0 5px rgba(3, 12, 18, .76), 0 0 24px rgba(240, 215, 126, .55);
  cursor: pointer;
}

.globe-container .maplibregl-ctrl-top-right { top: 10px; right: 10px; }
.globe-container .maplibregl-ctrl-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(3, 12, 18, .84);
}
.globe-container .maplibregl-ctrl-group button { background-color: transparent; filter: invert(1) sepia(.25); }
.globe-container .maplibregl-popup-content {
  color: #dfe8e6;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(3, 12, 18, .94);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}
.globe-container .maplibregl-popup-tip { border-top-color: rgba(3, 12, 18, .94) !important; }
.globe-container .maplibregl-popup-close-button { color: #f3e4b5; }

.globe-town-marker {
  transform: translateY(-2px);
  pointer-events: none;
}
.globe-town-marker::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  border: 2px solid #f0d77e;
  border-radius: 50%;
  background: #173a35;
  box-shadow: 0 0 8px rgba(240, 215, 126, .5);
}
.globe-town-marker span {
  display: block;
  margin-top: 2px;
  color: #f3e4b5;
  font: 700 9px/1.2 ui-monospace, monospace;
  letter-spacing: .1em;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(3, 12, 18, .9);
  white-space: nowrap;
}

/* Territory 3D level (Babylon) — mirrors the globe container pattern */
.territory3d-container {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #07100f;
}
.territory3d-container[hidden] { display: none; }
.territory3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
}

.viewport.is-territory3d .map-stage,
.viewport.is-territory3d .selection-grid,
.viewport.is-territory3d .tile-status,
.viewport.is-territory3d .zoom-tools,
.viewport.is-territory3d .zoom-hint {
  display: none;
}
.viewport.is-territory3d { cursor: default; }

.territory3d-status {
  position: absolute;
  z-index: 7;
  left: 14px;
  bottom: 14px;
  max-width: 60%;
  color: #cdd8d8;
  font: 700 10px/1.4 ui-monospace, monospace;
  letter-spacing: .08em;
  pointer-events: none;
}
.territory3d-status.is-error { color: #ff9488; }

/* Chat panel */
.chat-toggle {
  border: 1px solid rgba(218, 186, 112, .35);
  background: rgba(11, 24, 25, .82);
  color: #e3c77e;
  padding: .68rem .9rem;
  font: 700 .72rem/1 inherit;
  letter-spacing: .08em;
  cursor: pointer;
}
.chat-toggle:hover { border-color: #d9bd6a; }

.chat-panel {
  position: fixed;
  z-index: 40;
  right: 0;
  top: 64px;
  bottom: 0;
  width: min(360px, 100vw);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(218, 191, 126, .23);
  background: rgba(6, 15, 21, .92);
  backdrop-filter: blur(14px);
  box-shadow: -18px 0 60px rgba(0, 0, 0, .4);
}
.chat-panel[hidden] { display: none; }
.chat-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(218, 191, 126, .18);
}
.chat-panel__head b { color: #f1dfaa; font: 600 13px Georgia, serif; letter-spacing: .12em; }
.chat-panel__close {
  border: 0;
  background: none;
  color: #e8dec8;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.chat-panel__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Quest journal panel */
.quest-toggle {
  border: 1px solid rgba(218, 186, 112, .35);
  background: rgba(11, 24, 25, .82);
  color: #e3c77e;
  padding: .68rem .9rem;
  font: 700 .72rem/1 inherit;
  letter-spacing: .08em;
  cursor: pointer;
}
.quest-toggle:hover { border-color: #d9bd6a; }

.quest-panel {
  position: fixed;
  z-index: 40;
  right: 0;
  top: 64px;
  bottom: 0;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(218, 191, 126, .23);
  background: rgba(6, 15, 21, .92);
  backdrop-filter: blur(14px);
  box-shadow: -18px 0 60px rgba(0, 0, 0, .4);
}
.quest-panel[hidden] { display: none; }
.quest-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(218, 191, 126, .18);
}
.quest-panel__head b { color: #f1dfaa; font: 600 13px Georgia, serif; letter-spacing: .12em; }
.quest-panel__close { border: 0; background: none; color: #e8dec8; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.quest-panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; }

.quest-profile {
  color: #b7a876;
  font: 700 10px ui-monospace, monospace;
  letter-spacing: .1em;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(218, 191, 126, .14);
  margin-bottom: 10px;
}
.quest-section { color: #c9a95f; font: 700 10px var(--sans, sans-serif); letter-spacing: .18em; margin: 14px 0 8px; }
.quest-card {
  border: 1px solid rgba(218, 191, 126, .22);
  background: rgba(10, 20, 19, .75);
  padding: 12px;
  margin-bottom: 10px;
}
.quest-card__title { margin: 0 0 4px; color: #f3dda0; font: 600 15px Georgia, serif; }
.quest-card__kind { display: block; color: #8a937f; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.quest-card__step { color: #e8dec6; font-size: 13px; margin: 6px 0; }
.quest-card__text { color: rgba(225, 235, 238, .72); font-size: 12px; line-height: 1.5; margin: 4px 0 8px; }
.quest-card__locked { color: #e78c80; font-size: 12px; }
.quest-card__status { color: #b7a876; font-size: 12px; letter-spacing: .08em; }
.quest-card__rewards { display: block; color: #9fb88a; font-size: 11px; margin-top: 6px; }
.quest-card__accept,
.quest-card__choice {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid #d7b86f;
  background: rgba(215, 184, 111, .12);
  color: #f3e4b5;
  font: 700 11px inherit;
  letter-spacing: .08em;
  cursor: pointer;
  text-align: left;
}
.quest-card__accept { text-align: center; background: #d7b86f; color: #12201f; }
.quest-card__accept:disabled,
.quest-card__choice:disabled { opacity: .38; cursor: default; }
.quest-card__choice:hover:not(:disabled) { background: rgba(215, 184, 111, .28); }

.ce-3d-link {
  display: inline-block;
  margin-top: 8px;
  color: #d9bd6a;
  font: 700 10px ui-monospace, monospace;
  letter-spacing: .12em;
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 189, 106, .4);
}
.ce-3d-link:hover { color: #f3e4b5; border-bottom-color: #f3e4b5; }

.globe-segment-card{position:absolute;left:18px;bottom:18px;z-index:7;width:min(360px,calc(100% - 36px));padding:14px 16px;border:1px solid rgba(222,190,104,.45);background:rgba(5,10,8,.92);box-shadow:0 12px 40px rgba(0,0,0,.36);backdrop-filter:blur(10px)}
.globe-segment-card small{display:block;color:#89938a;font:8px ui-monospace,monospace;letter-spacing:.08em}.globe-segment-card b{display:block;color:#e6c66f;font:700 16px ui-monospace,monospace;margin-top:4px}.globe-segment-card p{margin:3px 0 9px;color:#aab1a8;font-size:10px}.globe-segment-card div{display:flex;gap:7px}.globe-segment-card button{border:1px solid rgba(222,190,104,.45);background:#111812;color:#dfc475;padding:7px 11px;font:800 8px ui-monospace,monospace;letter-spacing:.1em}.globe-segment-card img{display:block;width:100%;max-height:220px;object-fit:cover;margin-top:11px;border:1px solid rgba(222,190,104,.28)}.globe-segment-card img[hidden]{display:none}