:root {
  --world-surface-map-brightness: 1.08;
  --world-surface-map-contrast: 1.02;
  --world-surface-map-saturation: 1.04;
}

.world-surface-position-host {
  position: relative !important;
}

.world-surface-host {
  isolation: isolate;
}

.world-surface-overlay {
  mix-blend-mode: normal;
  pointer-events: none;
  position: absolute;
  z-index: 6;
  transition: opacity 160ms ease;
}

body.world-surface-active .world-surface-host > canvas:not(.world-surface-overlay) {
  filter:
    brightness(var(--world-surface-map-brightness))
    contrast(var(--world-surface-map-contrast))
    saturate(var(--world-surface-map-saturation));
}

body.world-surface-active.world-surface-strategic-mode .world-surface-host > canvas:not(.world-surface-overlay),
body.world-surface-active.world-surface-debug-cells .world-surface-host > canvas:not(.world-surface-overlay) {
  filter: none;
}

body.world-surface-active .map-grid,
body.world-surface-active .hex-grid,
body.world-surface-active [data-layer="grid"] {
  opacity: 0.14;
}

body.world-surface-active .fog,
body.world-surface-active .smoke,
body.world-surface-active .murk,
body.world-surface-active [data-layer="fog"],
body.world-surface-active [data-layer="smoke"] {
  opacity: 0.16;
  mix-blend-mode: normal;
}

body.world-surface-proof-mode .world-surface-host > canvas:not(.world-surface-overlay) {
  filter: none !important;
}

body.world-surface-proof-mode .map-grid,
body.world-surface-proof-mode .hex-grid,
body.world-surface-proof-mode [data-layer="grid"] {
  opacity: 0.06 !important;
}

body.world-surface-proof-mode .fog,
body.world-surface-proof-mode .smoke,
body.world-surface-proof-mode .murk,
body.world-surface-proof-mode [data-layer="fog"],
body.world-surface-proof-mode [data-layer="smoke"] {
  opacity: 0 !important;
}

body.world-surface-active .selected-cell,
body.world-surface-active .cell-selected,
body.world-surface-active [data-selected-cell="true"],
body.world-surface-active .hovered-cell,
body.world-surface-active .cell-hover,
body.world-surface-active [data-hovered-cell="true"] {
  filter: drop-shadow(0 0 6px rgba(255, 236, 153, 0.95));
}

.world-surface-version-badge {
  background: rgba(10, 17, 22, 0.72);
  border: 1px solid rgba(255, 244, 198, 0.24);
  border-radius: 4px;
  bottom: 8px;
  color: rgba(255, 246, 214, 0.86);
  font: 11px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  padding: 4px 6px;
  pointer-events: none;
  position: fixed;
  right: 8px;
  z-index: 2147483640;
}