/* ============================================================
   THEME — restyle the whole map by editing these variables.
   ============================================================ */
:root {
  --sea:         #151619;   /* matte charcoal-black background */
  --grid:        rgba(255, 255, 255, 0.045);  /* faint grey gridlines */
  --grid-size:   38px;

  --land:        #f5f6f7;   /* white land tiles */
  --land-hover:  #d7efe8;   /* hovered state (soft teal tint) */
  --land-active: #ffcc33;   /* selected state (flag-yellow nod) */
  --stroke:      #313640;   /* clean dark border around the white tiles */
  --stroke-w:    1.2;       /* state border width, NON-scaling (screen px) */

  --district:    #ffffff;   /* district fill when its state is drilled in */
  --carve:       #c4cad2;   /* light-grey carve line between districts */
  --carve-w:     0.75;      /* district border width, NON-scaling (screen px) */
  --district-hi: #ffcc33;   /* hovered / selected district */

  --label:       #1b1d22;   /* dark text — reads on white tiles */
  --label-dim:   rgba(27, 29, 34, 0.5);
  --pin:         #ff5d6c;
  --pin-ring:    rgba(255, 93, 108, 0.55);
  --accent:      #34c3a6;
  --panel-bg:    #122031;   /* flat, solid */
  --panel-edge:  #1e3a44;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sea);
  font-family: var(--font);
  color: var(--label);
}

/* ---- full-screen stage (flat charcoal + faint grid) ---- */
#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: var(--sea);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

#map {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
#map:active { cursor: grabbing; }

/* ---- land (flat) ---- */
.state {
  fill: var(--land);
  stroke: var(--stroke);
  stroke-width: var(--stroke-w);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* borders stay crisp at any zoom */
  transition: fill .2s ease, opacity .5s ease, transform .6s ease;
  transform-box: fill-box;
  transform-origin: center;
  cursor: pointer;
}
.state.is-hover  { fill: var(--land-hover); }
.state.is-active { fill: var(--land-active); }

/* intro: states fade + rise in, staggered via inline --i */
.state.intro {
  opacity: 0;
  transform: translateY(8px) scale(.985);
}

/* choropleth mode sets per-state fill via inline style; let it win over gradient */
.state[data-fill] { fill: var(--data-fill); }

/* dim the rest of the country while one state is drilled into */
.land.drilled .state:not(.is-active) { opacity: .28; }
/* the drilled state is fully covered by its districts; blend the underlay so
   coastline slivers (ADM1 vs ADM2 mismatch) don't flash the selection colour */
.land.drilled .state.is-active { fill: var(--district); }

/* ---- districts (drill-down layer, flat) ---- */
.district {
  fill: var(--district);
  stroke: var(--carve);
  stroke-width: var(--carve-w);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, fill .15s ease;
  cursor: pointer;
}
.district.show { opacity: 1; pointer-events: auto; }
.district.is-hover  { fill: var(--district-hi); }
.district.is-active { fill: var(--district-hi); }

/* ---- labels ---- */
.label {
  fill: var(--label);
  font-size: var(--label-fs, 9px);
  font-weight: 600;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0,0,0,.55);
  stroke-width: var(--label-sw, 2.4px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.labels.show .label { opacity: 1; }
.label.ft { fill: var(--label-dim); font-size: 7.5px; }

/* ---- pins ---- */
.pin-dot {
  fill: var(--pin);
  stroke: #fff;
  stroke-width: 1.2;
  cursor: pointer;
}
.pin-ring {
  fill: none;
  stroke: var(--pin-ring);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse {
  0%   { transform: scale(.4); opacity: .9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.pin-label {
  fill: #fff; font-size: 8px; font-weight: 600; text-anchor: middle;
  paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 2.4px;
  pointer-events: none;
}

/* ---- tooltip ---- */
#tooltip {
  position: fixed;
  z-index: 20;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #eafffa;
  background: var(--panel-bg);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: opacity .12s ease;
  white-space: nowrap;
}
#tooltip.show { opacity: 1; }

/* ---- title + hud ---- */
#hud {
  position: fixed; z-index: 15; left: 22px; top: 18px;
  pointer-events: none;
}
#hud h1 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--accent);
}
#hud p { margin: 4px 0 0; font-size: 12px; color: var(--label-dim); }

/* ---- info panel (slides in on select) ---- */
#panel {
  position: fixed; z-index: 16; right: 0; top: 0; bottom: 0;
  width: min(320px, 84vw);
  padding: 26px 24px;
  background: var(--panel-bg);
  border-left: 1px solid var(--panel-edge);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
#panel.open { transform: translateX(0); }
#panel .kicker { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
#panel h2 { margin: 6px 0 2px; font-size: 26px; color: #fff; }
#panel .sub { font-size: 13px; color: var(--label-dim); margin-bottom: 18px; }
#panel .row { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.07); font-size: 14px; }
#panel .row span:last-child { color: #fff; font-weight: 600; }
#panel .close { position: absolute; top: 16px; right: 18px; cursor: pointer; color: var(--label-dim); font-size: 22px; line-height: 1; pointer-events: auto; }
#panel .close:hover { color: #fff; }

/* ---- controls ---- */
#controls {
  position: fixed; z-index: 15; left: 22px; bottom: 20px;
  display: flex; gap: 8px;
}
#controls button {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--label); background: var(--panel-bg);
  border: 1px solid var(--panel-edge); border-radius: 8px;
  padding: 8px 12px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
#controls button:hover { color: #fff; border-color: var(--accent); }