.region-hero {
  background:
    radial-gradient(circle at 82% 34%, rgba(212, 175, 88, .17), transparent 19rem),
    linear-gradient(132deg, rgba(45, 111, 129, .13), transparent 48%),
    var(--surface);
}

.region-hero::after {
  content: "⌖";
  right: clamp(22px, 6vw, 70px);
  top: 28px;
  color: rgba(212, 175, 88, .13);
  font-size: clamp(88px, 16vw, 178px);
}

kbd {
  display: inline-block;
  min-width: 1.7em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0 .35em;
  background: var(--surface-2);
  color: var(--ink);
  font: .78em/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: center;
}

.region-map {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #071017;
  box-shadow: var(--shadow);
}

.region-map__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 11px 13px;
  background: linear-gradient(180deg, #11161b, #0b0f13);
}

.region-map__back,
.region-map__actions button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
}

.region-map__back {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  text-decoration: none;
}

.region-map__actions { display: flex; gap: 7px; }
.region-map__actions button { min-width: 42px; padding: 7px 13px; cursor: pointer; }
.region-map__actions button[data-map-action="reset"] { min-width: 78px; }
.region-map__back:hover,
.region-map__back:focus-visible,
.region-map__actions button:hover,
.region-map__actions button:focus-visible {
  border-color: var(--line-strong);
  background: rgba(212, 175, 88, .09);
  color: var(--ink);
  outline: none;
}
.region-map__actions button:disabled { opacity: .45; cursor: not-allowed; }

.region-map__viewport {
  position: relative;
  height: clamp(520px, 72vh, 790px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(39, 102, 122, .24), transparent 60%),
    #061018;
  cursor: grab;
  touch-action: none;
  outline: none;
  user-select: none;
}
.region-map__viewport.is-dragging { cursor: grabbing; }
.region-map__viewport:focus-visible { box-shadow: inset 0 0 0 3px var(--gold); }

.region-map__transform {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.region-map__transform img {
  display: block;
  width: 3072px;
  height: 3072px;
  max-width: none;
  pointer-events: none;
}

.region-map__loading,
.region-map__badge,
.region-map__zoom {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(212, 175, 88, .28);
  background: rgba(7, 13, 18, .82);
  color: var(--gold-soft);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.region-map__loading { left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 999px; padding: 8px 13px; }
.region-map__loading[hidden] { display: none; }
.region-map__badge { left: 13px; bottom: 13px; border-radius: 999px; padding: 7px 11px; font-size: .64rem; font-weight: 850; letter-spacing: .07em; }
.region-map__zoom { right: 13px; bottom: 13px; border-color: rgba(116, 181, 201, .32); border-radius: 9px; padding: 7px 10px; color: #c4e4eb; font: .75rem ui-monospace, SFMono-Regular, Consolas, monospace; }

.region-map__status {
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 10px 14px 13px;
  color: var(--muted);
  font-size: .76rem;
}

.region-layer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.region-layer-grid article {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 19px;
  background: var(--surface);
}
.region-layer-grid article > span { color: var(--gold); font-size: 1.3rem; }
.region-layer-grid h3 { margin: 5px 0; }
.region-layer-grid p { margin: 0; color: var(--muted); }

@media (max-width: 700px) {
  .region-map { border-radius: 15px; }
  .region-map__toolbar { align-items: stretch; flex-direction: column; }
  .region-map__back { justify-content: center; }
  .region-map__actions { display: grid; grid-template-columns: 1fr 1.5fr 1fr; }
  .region-map__viewport { height: min(76vh, 620px); }
  .region-map__badge { max-width: calc(100% - 100px); font-size: .56rem; }
  .region-layer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .region-map__transform { will-change: auto; }
}