/* World-map controls and framing. The GPU renderer owns the geographic scene. */
.world-map-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #080808;
}
.world-map-panel .map-heading {
  min-height: 60px;
  height: auto;
  padding: 11px 16px;
  background: #0e0e0e;
}
.world-map-panel .map-heading h2 { font-size: 15px; font-weight: 300; }
.world-map-panel .map-heading .panel-detail { font-size: 11px; line-height: 1.5; }
.world-map-panel .map-head-actions { gap: 5px; }
.world-map-panel .map-filter { min-height: 28px; padding-inline: 10px; }
#world-map-panel, #hotspot-inspector { scroll-margin-top: calc(var(--chrome-height) + 16px); }
.world-selected-summary { display: none; }
.world-selected-summary button, .hotspot-inspector button[data-back-to-map] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #555555;
  border-radius: 0;
  background: #202020;
  color: #e9e9e9;
  font: 400 11px/1.5 var(--font);
}
.world-selected-summary button:hover, .hotspot-inspector button[data-back-to-map]:hover { border-color: #999999; background: #303030; }
.hotspot-inspector button[data-back-to-map] { display: none; margin-left: auto; }
.world-selected-summary > span { min-width: 0; font-size: 11px; line-height: 1.5; color: #b4b4b4; overflow-wrap: anywhere; }
.world-selected-summary button { flex-shrink: 0; }

.world-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 55px;
  padding: 10px 16px;
  border-bottom: 1px solid #252525;
  background: #0c0c0c;
  flex-shrink: 0;
}
.world-view-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #444444;
  min-height: 32px;
  flex-shrink: 0;
}
.world-view-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 12px;
  color: #aaaaaa;
  background: #101010;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 0;
}
.world-view-switch button + button { border-left: 1px solid #444444; }
.world-view-switch button[aria-pressed="true"] { background: #e9e9e9; color: #101012; }
.world-view-switch button:hover:not([aria-pressed="true"]) { color: #ffffff; background: #242424; }
.world-view-switch .icon { width: 14px; height: 14px; }
.world-view-switch button:focus-visible { position: relative; z-index: 1; outline-offset: 3px; }

.world-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 32px;
  align-items: center;
  gap: 0;
  width: min(370px, 50%);
  min-width: 180px;
  margin-left: auto;
}
.world-search label { font-size: 11px; color: #aaaaaa; padding-right: 9px; white-space: nowrap; }
.world-search input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid #444444;
  border-radius: 0;
  background: #101010;
  color: #e9e9e9;
  padding: 0 10px;
  font: 12px var(--font);
  caret-color: #ffffff;
}
.world-search input::placeholder { color: #999999; opacity: 1; }
.world-search input:focus-visible { outline-offset: 2px; position: relative; z-index: 2; }
.world-search button {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #555555;
  border-left: 0;
  border-radius: 0;
  background: #202020;
  color: #e9e9e9;
}
.world-search button:hover { background: #383838; }
.world-search button .icon { height: 14px; width: 14px; }

.world-region-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 43px;
  padding: 0 16px;
  border-bottom: 1px solid #252525;
  background: #0c0c0c;
  flex-shrink: 0;
}
.world-region-bar .theatre-tabs { min-height: 42px; gap: 17px; }
.world-region-bar .theatre-tabs button { min-height: 42px; font-size: 11px; }
.world-region-bar #hotspot-count { margin-left: auto; color: #a7a7a7; }
#world-relief {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid #444444;
  border-radius: 0;
  color: #aaaaaa;
  background: #121212;
  font-size: 11px;
  white-space: nowrap;
}
#world-relief[aria-pressed="true"] { color: #e9e9e9; background: #242424; border-color: #666666; }
#world-relief:hover { border-color: #999999; background: #303030; }
#world-relief .icon { width: 12px; height: 12px; }
#world-relief:disabled { opacity: .42; cursor: not-allowed; }

.hotspot-workspace .map-panel #map-canvas.world-stage {
  position: relative;
  display: block;
  flex: 1 0 560px;
  width: 100%;
  height: 560px;
  min-height: 560px;
  background: #080808;
  overflow: hidden;
  isolation: isolate;
  cursor: grab;
  touch-action: none;
}
.hotspot-workspace .map-panel #map-canvas.world-stage.is-panning { cursor: grabbing; }
#world-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  transform: none;
  touch-action: none;
}
#world-canvas:focus-visible { outline: 2px solid #e9e9e9; outline-offset: -4px; }
.world-stage .map-controls { z-index: 6; right: 15px; bottom: 16px; border-color: #555555; }
.world-stage .map-controls .icon-button { width: 31px; height: 31px; color: #cfcfcf; }
.world-stage .map-controls .icon-button:hover { color: #ffffff; background: #303030; }
.world-stage .map-controls .icon { width: 14px; height: 14px; }
#world-north { font-size: 11px; font-weight: 450; letter-spacing: .3px; }

.world-location {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  max-width: 44%;
  padding: 9px 11px;
  background: #080808;
  border: 1px solid #303030;
  color: #e9e9e9;
  pointer-events: none;
}
.world-location strong, .world-location h3 {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -.15px;
  margin: 0;
}
.world-location > span, .world-location p, .world-location small {
  display: block;
  margin: 4px 0 0;
  color: #aaaaaa;
  font: 11px/1.5 var(--font);
}
.world-stage #map-coordinate {
  top: 16px;
  right: 16px;
  bottom: auto;
  max-width: 41%;
  padding: 7px 9px;
  border: 1px solid #303030;
  background: #080808;
  color: #aaaaaa;
  font: 11px/1.5 var(--mono);
  text-align: right;
  overflow-wrap: anywhere;
  z-index: 4;
}
.world-status-bar {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 12px;
  max-width: calc(100% - 88px);
  padding: 8px 10px;
  border: 1px solid #303030;
  background: #090909;
  color: #aaaaaa;
  pointer-events: none;
  font: 11px/1.5 var(--font);
}
#world-render-status { color: #cfcfcf; }
#world-detail-status { color: #999999; font-variant-numeric: tabular-nums; }
.world-hint { color: #999999; font-size: 11px; line-height: 1.5; }
.world-status-bar .world-hint { border-left: 1px solid #444444; padding-left: 12px; }

.world-loading {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  color: #e9e9e9;
  background: #080808;
  text-align: center;
}
.world-loading strong { font-size: 15px; font-weight: 300; }
.world-loading span, .world-loading p { max-width: 42ch; font-size: 12px; color: #aaaaaa; line-height: 1.65; margin: 0; }
.world-loading:before { content: ""; width: 30px; height: 1px; background: #999999; margin-bottom: 6px; }
.world-loading[aria-busy="false"] { pointer-events: none; }
.world-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  min-width: 145px;
  max-width: 215px;
  padding: 10px 11px;
  border: 1px solid #666666;
  border-radius: 0;
  background: #111111;
  color: #e9e9e9;
  box-shadow: 0 8px 20px #00000060;
  z-index: 8;
  pointer-events: none;
  font: 11px/1.5 var(--font);
}
.world-tooltip strong, .world-tooltip b { display: block; font-size: 12px; font-weight: 450; }
.world-tooltip span, .world-tooltip p { display: block; margin: 3px 0 0; color: #b4b4b4; font-size: 11px; }
.world-tooltip .tooltip-meta { color: #999999; font-variant-numeric: tabular-nums; }

.hotspot-workspace #hotspot-inspector {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  background: #0e0e0e;
}
.hotspot-workspace #hotspot-inspector > .panel-heading,
.hotspot-workspace #hotspot-inspector > .inspector-cell,
.hotspot-workspace #hotspot-inspector > .inventory-section { width: 100%; }
.world-country-summary { padding: 12px 16px; border-bottom: 1px solid #303030; }
.world-country-summary strong, .world-country-summary h3 { display: block; font-size: 16px; font-weight: 300; line-height: 1.4; margin: 0; }
.world-country-summary span, .world-country-summary p { display: block; margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: #aaaaaa; }
.cell-browse { display: flex; align-items: center; gap: 7px; padding: 0 16px 8px; }
.cell-browse button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-height: 29px;
  padding: 4px 8px;
  border: 1px solid #444444;
  border-radius: 0;
  background: #121212;
  color: #cfcfcf;
  font-size: 11px;
}
.cell-browse button:hover { color: #ffffff; background: #242424; border-color: #777777; }
.cell-browse button:disabled { opacity: .4; cursor: not-allowed; }
.cell-browse .icon { width: 12px; height: 12px; }
.cell-picker-note { color: #999999; font-size: 11px; line-height: 1.5; margin: -3px 16px 13px; }
.world-empty { padding: 24px 16px; color: #b4b4b4; font-size: 12px; line-height: 1.7; }
.world-empty h3, .world-empty strong { display: block; color: #e9e9e9; font-size: 17px; font-weight: 300; line-height: 1.4; margin: 0 0 10px; }
.world-empty p { margin: 0 0 12px; }
.world-empty button { margin-top: 5px; }

/* Expanding the workspace releases the main inline-size containing block. */
main:has(.hotspot-workspace.world-fullscreen) { container-type: normal; }
.hotspot-workspace.world-fullscreen {
  position: fixed;
  top: calc(var(--chrome-height) + 12px);
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 25;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 15px;
  padding: 0;
  margin: 0;
  background: #050506;
  min-width: 0;
  min-height: 0;
}
.world-fullscreen .world-map-panel { height: 100%; min-height: 0; }
.hotspot-workspace.world-fullscreen .map-panel #map-canvas.world-stage { flex: 1 1 0; height: 0; min-height: 220px; }
.hotspot-workspace.world-fullscreen #hotspot-inspector { height: 100%; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.world-fullscreen .hotspot-legend { flex-shrink: 0; }
.world-fullscreen .world-toolbar { min-height: 54px; }

@container (max-width: 1100px) {
  .world-toolbar { gap: 12px; padding-inline: 13px; }
  .world-search { width: min(335px, 53%); }
  .world-region-bar { gap: 10px; padding-inline: 13px; }
  .world-region-bar .theatre-tabs { gap: 13px; }
  .hotspot-workspace .map-panel #map-canvas.world-stage { min-height: 520px; height: 520px; flex-basis: 520px; }
  .world-status-bar { gap: 4px 10px; }
}
@container (max-width: 820px) {
  .world-selected-summary {
    position: sticky;
    bottom: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    border-top: 1px solid #3b3b3b;
    border-bottom: 1px solid #303030;
    background: #0e0e0e;
    flex-shrink: 0;
  }
  .hotspot-inspector button[data-back-to-map] { display: inline-flex; }
  .world-toolbar { gap: 12px; }
  .world-search { width: auto; flex: 1; }
  .world-search label { padding-right: 7px; }
  .world-region-bar { flex-wrap: wrap; }
  .world-region-bar #hotspot-count { font-size: 11px; }
  .hotspot-workspace .map-panel #map-canvas.world-stage { min-height: 500px; height: 500px; flex: none; }
  .world-status-bar .world-hint { display: none; }
}
@media (max-width: 900px) {
  .world-fullscreen .world-selected-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 11px;
    border-top: 1px solid #3b3b3b;
    border-bottom: 1px solid #303030;
    background: #0e0e0e;
    flex-shrink: 0;
  }
  .world-fullscreen .hotspot-inspector button[data-back-to-map] { display: inline-flex; }
  .hotspot-workspace.world-fullscreen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  .hotspot-workspace.world-fullscreen #hotspot-inspector { height: auto; max-height: min(30dvh, 240px); overflow-y: auto; }
  .world-fullscreen .world-toolbar { padding-block: 8px; }
  .world-fullscreen .world-map-panel .map-heading { min-height: 52px; padding-block: 8px; }
  .hotspot-workspace.world-fullscreen .map-panel #map-canvas.world-stage { min-height: 170px; }
}
@media (max-width: 650px) {
  .world-selected-summary { gap: 9px; padding: 9px 10px; }
  .world-map-panel .map-heading { min-height: 66px; padding: 10px 11px; }
  .world-map-panel .map-heading h2 { font-size: 14px; }
  .world-map-panel .map-head-actions { gap: 2px; }
  .world-map-panel .map-filter { padding-inline: 6px; min-height: 28px; }
  .world-toolbar { flex-wrap: wrap; padding: 10px; gap: 9px; }
  .world-view-switch { width: 100%; }
  .world-view-switch button { flex: 1; min-height: 31px; }
  .world-search { width: 100%; min-width: 0; flex: 1 0 100%; }
  .world-search label { font-size: 11px; padding-right: 8px; }
  .world-search input { font-size: 12px; }
  .world-region-bar { gap: 8px; padding: 0 10px; min-height: 42px; }
  .world-region-bar .theatre-tabs { gap: 13px; min-height: 40px; flex: 1; }
  .world-region-bar .theatre-tabs button { min-height: 40px; }
  .world-region-bar #hotspot-count { display: none; }
  #world-relief { padding-inline: 7px; height: 26px; margin: 7px 0; }
  .hotspot-workspace .map-panel #map-canvas.world-stage { min-height: 390px; height: 390px; flex: none; }
  .world-stage .map-controls { right: 10px; bottom: 12px; }
  .world-stage .map-controls .icon-button { width: 30px; height: 31px; }
  .world-location { left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 7px 9px; }
  .world-location strong, .world-location h3 { font-size: 14px; }
  .world-location > span, .world-location p, .world-location small { margin-top: 2px; font-size: 11px; }
  .world-stage #map-coordinate { display: none; }
  .world-status-bar { left: 10px; bottom: 12px; max-width: calc(100% - 64px); padding: 7px 8px; gap: 3px 8px; }
  #world-render-status, #world-detail-status { font-size: 11px; }
  .world-status-bar .world-hint { display: none; }
  .world-tooltip { min-width: 130px; max-width: 190px; padding: 8px 9px; }
  .world-country-summary { padding: 12px 16px; }
  .hotspot-workspace #hotspot-inspector > .hotspot-picker-label { align-self: auto; }
  .cell-browse { gap: 8px; }
  .world-fullscreen .world-toolbar { gap: 6px; padding-block: 7px; }
  .world-fullscreen .world-view-switch button { min-height: 27px; }
  .world-fullscreen .world-search input, .world-fullscreen .world-search button { height: 29px; }
  .world-fullscreen .world-region-bar .theatre-tabs { min-height: 34px; }
  .world-fullscreen .world-region-bar .theatre-tabs button { min-height: 34px; }
  .world-fullscreen .world-region-bar { min-height: 35px; }
  .world-fullscreen .hotspot-legend { padding-block: 6px; min-height: 37px; }
  .hotspot-workspace.world-fullscreen .map-panel #map-canvas.world-stage { min-height: 170px; flex: 1 1 0; height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .world-map-panel *, .world-map-panel *:before, .world-map-panel *:after { transition: none; animation: none; }
}
/* Geographic resource callouts keep the projected position and named units. */
.world-region-tools{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}.world-region-tools #hotspot-count{margin:0}
.world-resource-markers{position:absolute;inset:0;pointer-events:none;z-index:3}.world-resource-label{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:146px;height:32px;display:flex;align-items:center;gap:6px;padding:4px 7px;background:#e9e9e9;color:#101012;border:1px solid #fff;border-radius:0;white-space:nowrap}.world-resource-label span{font-size:11px;max-width:76px;overflow:hidden;text-overflow:ellipsis;color:#444}.world-resource-label b{font-size:11px;font-weight:450}.world-resource-label:hover{background:#fff}.world-resource-label[hidden]{display:none!important}
@media(max-width:650px){.world-region-tools{margin-left:0}.world-region-tools #hotspot-count{display:none}}