* {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;

  --bg: #06090d;
  --panel: #0b1118;
  --panel2: #101821;
  --line: #26313d;
  --text: #d7e0e7;
  --muted: #7f909d;

  --built-ground: #202832;
  --building: #3a4652;
  --building-edge: #596875;

  --road: #545b61;
  --road-edge: #909aa1;

  --park: #355846;
  --open-land: #2e4939;
  --marsh: #315c58;
  --water: #173d50;
  --deep-water: #0b2638;
  --open: #25251f;

  --accent: #00e5ff;
  --accent2: #ff3bd4;
  --poi: #ffd35a;
  --bridge: #87929b;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button {
  border: 1px solid var(--line);
  background: #111a23;
  color: var(--text);
  border-radius: 5px;
  padding: 8px 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

button:hover {
  border-color: #536372;
  background: #17232e;
}

button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.app-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topbar {
  min-height: 76px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: #080d12;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar h1 {
  margin: 2px 0 0;
  font-size: 25px;
  letter-spacing: 0.16em;
}

.eyebrow,
.card-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.status-pill {
  padding: 7px 10px;
  border: 1px solid #764d70;
  border-radius: 999px;
  color: #ff83e3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
}

.map-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

.toolbar {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 9px;
  border-bottom: 1px solid var(--line);
  background: #0a1016;
}

.toolbar-spacer {
  flex: 1;
}

.readout {
  color: var(--muted);
  font-family: monospace;
  font-size: 12px;
}

.map-viewport {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 40%,
      #111923 0,
      #070b0f 70%
    );
}

#cityMap {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  touch-action: none;
  cursor: grab;
}

#cityMap.dragging {
  cursor: grabbing;
}

.map-hint {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(4,8,12,0.78);
  color: #96a4af;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.info-panel {
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--line);
  background: var(--panel);
  padding: 11px;
}

.card {
  margin-bottom: 10px;
  padding: 12px;
  background: var(--panel2);
  border: 1px solid #1f2a34;
  border-radius: 6px;
}

.card p {
  margin: 8px 0 0;
  color: #aab7c1;
  font-size: 13px;
  line-height: 1.45;
}

.note {
  color: #93a1ab;
  font-size: 12px;
  line-height: 1.45;
}

.cell-data {
  margin-top: 9px;
  color: #b8c5ce;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.55;
  word-break: break-word;
}

.cell-data strong {
  color: #fff;
}

.legend {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: #b4c0c9;
}

.legend > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.swatch {
  width: 22px;
  height: 13px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 2px;
}

.swatch.built {
  background: var(--building);
}

.swatch.road {
  background: var(--road);
}

.swatch.park {
  background: var(--park);
}

.swatch.open-land {
  background: var(--open-land);
}

.swatch.marsh {
  background: var(--marsh);
}

.swatch.water {
  background: var(--water);
}

.swatch.deep-water {
  background: var(--deep-water);
}

.swatch.open {
  background: var(--open);
}

.test-position {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.4;
}

.player-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow:
    0 0 0 4px rgba(255,59,212,0.12),
    0 0 16px rgba(255,59,212,0.7);
}

.terrain-built_up {
  fill: var(--built-ground);
}

.terrain-road {
  fill: var(--road);
}

.terrain-park {
  fill: var(--park);
}

.terrain-open_land_vegetation {
  fill: var(--open-land);
}

.terrain-marsh_or_shallow_water {
  fill: var(--marsh);
}

.terrain-water {
  fill: var(--water);
}

.terrain-deep_water {
  fill: var(--deep-water);
}

.terrain-open_or_unmaterialized {
  fill: var(--open);
}

.water-texture {
  color: #70a7bd;
  fill: url(#waterPattern);
}

.marsh-texture {
  color: #8bb5a5;
  fill: url(#marshPattern);
}

.open-land-texture {
  color: #93ac79;
  fill: url(#openLandPattern);
}

.building {
  fill: var(--building);
  stroke: var(--building-edge);
  stroke-width: 0.8;
}

.building-detail {
  fill: rgba(255,255,255,0.05);
}

.road-edge {
  stroke: var(--road-edge);
  stroke-width: 1.6;
  stroke-linecap: square;
  opacity: 0.7;
}

.bridge-cell {
  fill: var(--bridge);
  stroke: #c0c8ce;
  stroke-width: 1.3;
  filter: url(#bridgeShadow);
}

.road-label {
  fill: #d2d7db;
  stroke: #22282d;
  stroke-width: 3px;
  paint-order: stroke;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-anchor: middle;
  pointer-events: none;
}

.poi-marker {
  fill: var(--poi);
  stroke: #261e05;
  stroke-width: 2;
  cursor: pointer;
}

.poi-label {
  fill: #f6df91;
  stroke: #151719;
  stroke-width: 3px;
  paint-order: stroke;
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}

.grid-line {
  stroke: rgba(0,229,255,0.28);
  stroke-width: 0.7;
  pointer-events: none;
}

.grid-label {
  fill: rgba(0,229,255,0.7);
  font-size: 8px;
  font-family: monospace;
  pointer-events: none;
}

.player-marker-ring {
  fill: rgba(255,59,212,0.13);
  stroke: rgba(255,59,212,0.42);
  stroke-width: 2;
}

.player-marker {
  fill: var(--accent2);
  stroke: #fff;
  stroke-width: 2;
}

.player-marker-label {
  fill: #fff;
  stroke: #1c0b19;
  stroke-width: 4px;
  paint-order: stroke;
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

.cell-hit {
  fill: transparent;
  cursor: crosshair;
}

.cell-hit:hover {
  fill: rgba(0,229,255,0.08);
}

@media (max-width: 850px) {
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(520px, 68vh) auto;
  }

  .info-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}


/* ==================================================================
   MAPLAB-1D — VISUAL POLISH PASS #1
   ================================================================== */

/*
 * Terrain remains canonical.
 * These rules change presentation only.
 */

.terrain-open_or_unmaterialized {
  fill: #2b2c27;
}


/*
 * Remove visible SVG rectangle seams at ordinary zoom levels.
 */

#terrainLayer rect,
#terrainTextureLayer rect {
  shape-rendering: geometricPrecision;
}


/*
 * Urban parcels now span logical-cell boundaries where contiguous
 * built_up terrain permits it.
 */

.building {
  fill: #3b4854;
  stroke: #667582;
  stroke-width: 0.75;
}

.building-large {
  fill: #3e4c59;
  stroke: #6d7c88;
  stroke-width: 0.9;
}

.building-detail {
  fill: rgba(219, 232, 239, 0.09);
  pointer-events: none;
}


/*
 * Sidewalk is deliberately broader and underneath the curb.
 */

.road-sidewalk {
  stroke: #777d7f;
  stroke-width: 7;
  stroke-linecap: square;
  opacity: 0.82;
  pointer-events: none;
}

.road-edge {
  stroke: #b0b5b7;
  stroke-width: 1.35;
  stroke-linecap: square;
  opacity: 0.88;
  pointer-events: none;
}


/*
 * Elevated bridge presentation.
 *
 * Internal bridge-cell boundaries are not drawn.
 * Only the outside of the elevated deck receives heavy structure.
 */

.bridge-cell {
  fill: #7c878f;
  stroke: none;
}

.bridge-under-edge {
  stroke: #10161b;
  stroke-width: 10;
  stroke-linecap: square;
  opacity: 0.82;
  pointer-events: none;
}

.bridge-edge {
  stroke: #c4ccd1;
  stroke-width: 2.4;
  stroke-linecap: square;
  opacity: 0.95;
  pointer-events: none;
}


/*
 * At close zoom, rooftop detail becomes more readable.
 */

@media (min-width: 700px) {
  .building-detail {
    opacity: 0.9;
  }
}


/* ==================================================================
   MAPLAB-1E — CARTOGRAPHIC LABEL / POI HIERARCHY
   ================================================================== */

/*
 * open_or_unmaterialized is valid mapped ground, not visual void.
 */
.terrain-open_or_unmaterialized {
  fill: #343832;
}


/*
 * Label sizes below are intentionally large in SVG world units.
 * MAPLAB-1E counter-scales them against map zoom so their SCREEN size
 * stays approximately stable rather than becoming gigantic when zoomed.
 */

.road-label {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0.045em;
  stroke-width: 4px;
}

.poi-label {
  font-size: 34px;
  font-weight: 800;
  stroke-width: 4px;
}

.poi-label-major {
  fill: #ffe394;
}

.poi-label-medium {
  fill: #ffd35a;
}

.poi-label-local {
  fill: #e6c86d;
}

.player-marker-label {
  font-size: 34px;
  font-weight: 900;
  stroke-width: 5px;
}


/*
 * Presentation-only marker hierarchy.
 * Canonical POI identity/state is unchanged.
 */

.poi-marker-major {
  fill: #ffe47a;
  stroke-width: 2.8;
}

.poi-marker-medium {
  fill: #ffd35a;
  stroke-width: 2.2;
}

.poi-marker-local {
  fill: #d7b84b;
  stroke-width: 1.8;
}


/*
 * Labels should never eat mouse interaction intended for map cells.
 */

.road-label-anchor,
.poi-label-anchor,
.player-label-anchor {
  pointer-events: none;
}


/* ==================================================================
   MAPLAB-1F — ROAD CARTOGRAPHY / POI CONTRAST
   ================================================================== */


/*
 * POI markers are intentionally DARK so pale label text never
 * disappears against the marker.
 */

.poi-marker-major {
  fill: #3b203b;
  stroke: #ffd55d;
  stroke-width: 2.4;
}

.poi-marker-medium {
  fill: #203948;
  stroke: #ffd55d;
  stroke-width: 2.2;
}

.poi-marker-local {
  fill: #28322f;
  stroke: #cdb85d;
  stroke-width: 1.8;
}

.poi-label-major {
  fill: #fff1b3;
}

.poi-label-medium {
  fill: #ffe18a;
}

.poi-label-local {
  fill: #e9d58b;
}


/*
 * Canonical-road center line.
 *
 * It is only emitted for confidently straight single-road sections.
 * Intersection cells are explicitly excluded in JS.
 */

.road-centerline {
  stroke: #d7b85c;
  stroke-width: 1.6;
  stroke-dasharray: 11 9;
  stroke-linecap: butt;
  opacity: 0.72;
  pointer-events: none;
}


/*
 * Do not let labels interact with mouse hit-testing.
 */

.road-label,
.poi-label {
  pointer-events: none;
}


/* ==================================================================
   MAPLAB-1G — INTERSECTION GAP / POI CONTRAST
   ================================================================== */

/*
 * POI NAMES remain warm.
 *
 * POI MARKERS switch to a completely different cool palette so the
 * marker and its label cannot visually merge.
 */

.poi-marker-major {
  fill: #0b1720;
  stroke: #00e5ff;
  stroke-width: 2.4;
}

.poi-marker-medium {
  fill: #101b22;
  stroke: #66e0c2;
  stroke-width: 2.2;
}

.poi-marker-local {
  fill: #151b20;
  stroke: #8ba8b7;
  stroke-width: 1.8;
}


.poi-label-major {
  fill: #fff0aa;
}

.poi-label-medium {
  fill: #ffd86b;
}

.poi-label-local {
  fill: #e8cf83;
}


/*
 * Center line remains road-colored yellow, but approach segments now
 * stop short of canonical intersection footprints.
 */

.road-centerline {
  stroke: #d6b65b;
  stroke-width: 1.55;
  stroke-dasharray: 11 9;
  opacity: 0.68;
}


/* ==================================================================
   MAPLAB-POI-2B — UNIFIED POI + MONORAIL SYMBOLS
   ================================================================== */

/*
 * ALL numbered surface POIs use one consistent symbol.
 *
 * Importance may still control LABEL visibility, but not marker color
 * or marker size.
 */

.poi-marker,
.poi-marker-major,
.poi-marker-medium,
.poi-marker-local {
  fill: #07171c;
  stroke: #00e5ff;
  stroke-width: 2.5;
}


/*
 * Monorail is a separate transit layer, not a numbered POI.
 */

.monorail-symbol {
  fill: #d99b22;
  stroke: #fff0b4;
  stroke-width: 1.8;
}

.monorail-symbol-text {
  fill: #14110a;
  font-size: 10px;
  font-weight: 950;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.monorail-label {
  fill: #ffc857;
  stroke: #16130c;
  stroke-width: 4px;
  paint-order: stroke;
  font-size: 34px;
  font-weight: 850;
  pointer-events: none;
}

.transit-symbol-anchor,
.transit-label-anchor {
  pointer-events: none;
}



/* MAP-GFX-DIRECT-2 — integrated webclient surface */

html,
body,
.app-shell,
.workspace,
.map-panel,
.map-viewport {
    background: #071018 !important;
}