/* Map group: IsraelMapCanvas, RegionInspectorCard, CausalTooltipManager, SpotlightTutorialOverlay. */

/* IsraelMapCanvas (240,52)-(1680,994). Paper map sheet background (theme application; the
 * Godot Control has no background). */
.map-canvas { overflow: hidden; background: #CBD8D5; }
.map-svg { position: absolute; left: 0; top: 0; display: block; cursor: default; touch-action: none; user-select: none; }
.map-svg.panning { cursor: grabbing; }
.map-svg text { font-family: var(--font-title); pointer-events: none; }
.map-region-fill { cursor: pointer; }
.map-region-fill:hover { filter: brightness(1.06) saturate(1.1); }
/* Paper grain + vignette over the whole sheet (static image, multiply). */
.map-grain {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background-image:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 58%, rgba(70, 50, 25, 0.16) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.27  0 0 0 0 0.16  0 0 0 0.16 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.36  0 0 0 0 0.22  0 0 0 0.22 -0.04'/></filter><rect width='600' height='600' filter='url(%23m)'/></svg>");
}

/* Labels (screen-space, paper halo via paint-order). */
.map-label text { paint-order: stroke; stroke-linejoin: round; }
.map-region-name {
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em; fill: #1E1C1A;
  stroke: #F4EFE6; stroke-width: 3.2px; stroke-opacity: 0.92;
}
.map-label-region.big .map-region-name { font-size: 17px; letter-spacing: 0.4em; }
.map-label-region.selected .map-region-name { fill: #7A4E08; }
.map-leader { stroke: #1E1C1A; stroke-width: 0.7; stroke-opacity: 0.8; }
.map-leader-dot { fill: #1E1C1A; }
.map-country-zh {
  font-size: 19px; letter-spacing: 0.55em; fill: #5E4C36; stroke: #E9DFC8; stroke-width: 3px; stroke-opacity: 0.8;
}
.map-country-en {
  font-size: 9.5px; letter-spacing: 0.42em; fill: #6E5B42; font-variant: small-caps;
  stroke: #E9DFC8; stroke-width: 2.5px; stroke-opacity: 0.8;
}
.map-sea-zh { font-size: 30px; font-style: italic; letter-spacing: 0.9em; fill: #3F5E64; fill-opacity: 0.85; stroke: #CBD8D5; stroke-width: 4px; }
.map-sea-en { font-size: 11px; font-style: italic; letter-spacing: 0.55em; fill: #3F5E64; fill-opacity: 0.85; stroke: #CBD8D5; stroke-width: 3px; }
.map-sea-mid { font-size: 20px; font-style: italic; letter-spacing: 0.6em; fill: #3F5E64; fill-opacity: 0.85; stroke: #CBD8D5; stroke-width: 3px; }
.map-sea-small { font-size: 12px; font-style: italic; letter-spacing: 0.15em; fill: #3F5E64; stroke: #CBD8D5; stroke-width: 3px; }
.map-lake { font-size: 10.5px; font-style: italic; fill: #2F5463; stroke: #E9DFC8; stroke-width: 2.6px; stroke-opacity: 0.9; }

/* Pins. */
.map-pin { cursor: help; }
.map-pin-halo { fill: #F4EFE6; fill-opacity: 0.75; }
.map-pin-dot { stroke: #1E1C1A; stroke-width: 1.1; }
.map-pin:hover .map-pin-dot { stroke-width: 1.8; }

/* Sheet ornaments. */
.map-deg { font-size: 10px; font-style: italic; fill: #2E2924; paint-order: stroke; stroke: #F2EADB; stroke-width: 2.5px; }
.map-compass-n { font-size: 17px; font-weight: 700; fill: #2E2924; }
.map-compass-zh { font-size: 10px; fill: #2E2924; }
.map-cartouche-title { font-size: 22px; font-weight: 700; letter-spacing: 0.14em; fill: #1E1C1A; }
.map-cartouche-sub { font-size: 9.5px; letter-spacing: 0.3em; fill: #3A332B; font-style: italic; }
.map-cartouche-sub2 { font-size: 10px; letter-spacing: 0.25em; fill: #3A332B; }
.map-scale-num, .map-scale-unit { font-size: 10px; fill: #2E2924; }

/* Zoom controls (bottom-left, inside the neat line). */
.map-zoom-controls { position: absolute; left: 22px; bottom: 22px; display: flex; gap: 4px; }
.map-zoom-btn.btn {
  background: #F2EADB; font-family: var(--font-title); font-size: 15px; line-height: 20px;
  min-width: 30px; padding: 2px 6px; box-shadow: inset 0 0 0 2px #F2EADB, inset 0 0 0 3px rgba(30, 28, 26, 0.5);
}
.map-focus-btn.btn { font-size: 13px; letter-spacing: 0.1em; padding: 2px 10px; }

.map-legend {
  position: absolute; right: 24px; top: 24px; pointer-events: none;
  background: #F2EADB; border: 1px solid var(--ink); padding: 3px 10px; font-size: 13px;
  font-family: var(--font-title); letter-spacing: 0.06em;
  box-shadow: inset 0 0 0 2px #F2EADB, inset 0 0 0 3px rgba(30, 28, 26, 0.5);
}

/* RegionInspectorCard: PanelContainer, 240 wide, grows with content. */
.region-inspector { padding: 6px 8px 8px; }
.region-inspector-box { width: 100%; }
.region-inspector-title { font-family: var(--font-title); font-weight: 700; padding-right: 22px; white-space: pre-wrap; }
.region-inspector .region-metric { color: var(--blue); cursor: pointer; text-decoration: underline dotted; }
.region-inspector .region-metric:hover { color: var(--amber); }
.region-inspector .option-button { width: 100%; }
.region-inspector-close { position: absolute; right: 4px; top: 4px; padding: 0 6px; line-height: 18px; font-size: 16px; }

/* CausalTooltipManager (980,80), 300 wide; container ignores the mouse, cards do not. */
.causal-tooltips { pointer-events: none !important; }
.causal-tooltip { pointer-events: auto; padding: 6px 8px; box-shadow: 0 2px 6px rgba(30, 28, 26, 0.25); }
.causal-tooltip.locked { border: 2px solid #C89D54; }
.causal-tooltip-head { align-items: center; }
.causal-tooltip-lockline { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.causal-tooltip-btn { font-size: 12px !important; padding: 0 6px !important; line-height: 18px !important; }
.causal-tooltip-body { margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.causal-tooltip .sparkline { display: block; }

/* SpotlightTutorialOverlay (1300,900)-(1660,980). */
.onboarding-overlay { padding: 6px 8px; overflow: hidden; }
.onboarding-box { height: 100%; justify-content: space-between; }
.onboarding-buttons { justify-content: flex-end; }
.onboarding-buttons .btn { padding: 1px 10px; }
.onboarding-spotlight {
  pointer-events: none !important; border: 3px solid var(--amber); border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(244, 239, 230, 0.7), 0 0 14px rgba(200, 138, 30, 0.6);
}