/* =========================================================
   UMNOGRAD V10 — STABLE HOTSPOTS + BUILDING REVEAL
   The approved city map and all course tasks are unchanged.
   ========================================================= */

/* The map artwork is the approved v9 image. */
.dashboard-viewport .game-dashboard .city-map {
  background-image: url('./assets/city-map-v9.jpg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

/* Transparent hit areas never draw a moving frame around baked-in plaques. */
.dashboard-viewport .game-dashboard .city-node {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  outline: 0;
  background: transparent;
  box-shadow: none;
  transform: none !important;
  transition: background-color .12s ease;
}
.dashboard-viewport .game-dashboard .city-node:hover:not(:disabled) {
  z-index: 9;
  transform: none !important;
  background: rgba(255,255,255,.025);
  box-shadow: none;
}
.dashboard-viewport .game-dashboard .city-node:focus-visible {
  outline: 3px solid rgba(255,224,67,.95);
  outline-offset: -4px;
  transform: none !important;
}
.dashboard-viewport .game-dashboard .city-node.next-node:not(.complete):not(.locked),
.dashboard-viewport .game-dashboard .city-node.next-node:not(.complete):not(.locked):hover {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.dashboard-viewport .game-dashboard .city-node.locked {
  opacity: 1;
  filter: none;
  background: transparent;
  box-shadow: none;
}
.dashboard-viewport .game-dashboard .city-node.locked::after { display: none; }

/* Stable clickable plaque rectangles. They are invisible, so the baked-in
   plaque itself always remains visually aligned at every viewport size. */
.dashboard-viewport .game-dashboard .node-1  { left: 3.0%;  top: 8.7%;  width: 13.4%; height: 15.0%; }
.dashboard-viewport .game-dashboard .node-2  { left: 25.8%; top: 9.2%;  width: 14.0%; height: 15.6%; }
.dashboard-viewport .game-dashboard .node-3  { left: 51.1%; top: 9.2%;  width: 14.0%; height: 15.0%; }
.dashboard-viewport .game-dashboard .node-4  { left: 76.7%; top: 11.1%; width: 14.3%; height: 16.6%; }
.dashboard-viewport .game-dashboard .node-5  { left: 11.4%; top: 34.4%; width: 14.9%; height: 15.7%; }
.dashboard-viewport .game-dashboard .node-6  { left: 36.2%; top: 35.1%; width: 15.7%; height: 15.6%; }
.dashboard-viewport .game-dashboard .node-7  { left: 58.7%; top: 40.3%; width: 15.0%; height: 16.3%; }
.dashboard-viewport .game-dashboard .node-8  { left: 77.2%; top: 40.9%; width: 15.5%; height: 16.0%; }
.dashboard-viewport .game-dashboard .node-9  { left: 2.3%;  top: 59.1%; width: 15.5%; height: 16.4%; }
.dashboard-viewport .game-dashboard .node-10 { left: 28.8%; top: 61.8%; width: 16.8%; height: 17.0%; }
.dashboard-viewport .game-dashboard .node-11 { left: 52.5%; top: 64.0%; width: 17.4%; height: 16.7%; }
.dashboard-viewport .game-dashboard .node-12 { left: 76.3%; top: 65.2%; width: 16.8%; height: 16.5%; }

/* Object state layers duplicate the same map exactly, then clip only the
   building region. This keeps roads, rivers and plaques untouched. */
.city-object-states,
.final-city-buildings {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.city-object-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  transform: translateZ(0);
}
.city-object-layer.unbuilt {
  filter: grayscale(1) brightness(.48) contrast(1.18);
}
.city-object-layer.colorized {
  filter: sepia(.82) saturate(3.3) hue-rotate(150deg) brightness(1.12) contrast(1.05);
}

/* Building-only masks; plaque areas intentionally stay outside the masks. */
.city-object-layer.object-1  { clip-path: ellipse(10.0% 8.7% at 10.3% 26.0%); }
.city-object-layer.object-2  { clip-path: ellipse(11.0% 9.0% at 34.0% 26.6%); }
.city-object-layer.object-3  { clip-path: ellipse(9.4% 8.6% at 57.0% 26.0%); }
.city-object-layer.object-4  { clip-path: ellipse(10.6% 9.2% at 82.8% 29.0%); }
.city-object-layer.object-5  { clip-path: ellipse(8.0% 12.4% at 8.6% 49.0%); }
.city-object-layer.object-6  { clip-path: ellipse(11.3% 11.4% at 39.0% 51.2%); }
.city-object-layer.object-7  { clip-path: ellipse(10.4% 9.4% at 62.8% 59.1%); }
.city-object-layer.object-8  { clip-path: ellipse(10.3% 10.7% at 84.0% 56.7%); }
.city-object-layer.object-9  { clip-path: ellipse(10.9% 9.2% at 10.4% 74.2%); }
.city-object-layer.object-10 { clip-path: ellipse(11.4% 9.2% at 36.9% 79.0%); }
.city-object-layer.object-11 { clip-path: ellipse(12.0% 9.3% at 61.5% 81.7%); }
.city-object-layer.object-12 { clip-path: ellipse(10.9% 10.0% at 83.5% 82.0%); }

/* Decorative buildings that are not lesson objects are permanently colored. */
.city-object-layer.decor-center {
  clip-path: ellipse(10.0% 8.2% at 65.9% 37.2%);
  filter: sepia(.92) saturate(4) hue-rotate(165deg) brightness(1.08) contrast(1.08);
}
.city-object-layer.decor-bottom-left {
  clip-path: ellipse(8.0% 7.2% at 26.2% 89.0%);
  filter: sepia(.9) saturate(3.2) hue-rotate(78deg) brightness(1.15);
}
.city-object-layer.decor-bottom-mid {
  clip-path: ellipse(8.2% 7.0% at 48.5% 90.0%);
  filter: sepia(.9) saturate(3.4) hue-rotate(178deg) brightness(1.13);
}

/* Keep interactive controls above building state layers. */
.dashboard-viewport .game-dashboard .city-nodes { z-index: 5; }
.dashboard-viewport .game-dashboard .city-progress-box { z-index: 8; }

/* Final state: clickable plaques disappear. Small illustrated buildings cover
   the baked plaques, giving a fully colorful, label-free celebratory city. */
.city-complete .city-nodes { display: none; }
.city-complete .city-object-states { display: none; }
.final-city-buildings { z-index: 7; }
.final-building {
  position: absolute;
  width: 20%;
  height: auto;
  filter: drop-shadow(0 8px 7px rgba(10,42,39,.35));
}
.final-building-1  { left: -0.5%; top: 3.4%; }
.final-building-2  { left: 22.6%; top: 4.0%; }
.final-building-3  { left: 48.2%; top: 4.2%; }
.final-building-4  { left: 73.8%; top: 6.0%; }
.final-building-5  { left: 7.2%;  top: 29.0%; }
.final-building-6  { left: 33.4%; top: 29.8%; }
.final-building-7  { left: 55.5%; top: 34.8%; }
.final-building-8  { left: 74.4%; top: 35.2%; }
.final-building-9  { left: -0.7%; top: 54.1%; }
.final-building-10 { left: 25.7%; top: 56.8%; }
.final-building-11 { left: 49.3%; top: 59.0%; }
.final-building-12 { left: 73.5%; top: 60.0%; }
.city-complete .city-progress-box { display: none; }
.city-complete .city-finale-banner {
  z-index: 12;
  left: 50%;
  top: 3%;
  bottom: auto;
  transform: translateX(-50%);
}

/* V10.1 refinements: keep plaques bright; grayscale only visible building bodies. */
.city-object-layer.object-1  { clip-path: polygon(0% 21%,19% 21%,19% 36%,0% 38%); }
.city-object-layer.object-2  { clip-path: polygon(23% 22%,45% 22%,45% 38%,23% 38%); }
.city-object-layer.object-3  { clip-path: polygon(47% 21%,68% 21%,68% 37%,47% 37%); }
.city-object-layer.object-4  { clip-path: polygon(72% 24%,96% 24%,96% 40%,72% 40%); }
.city-object-layer.object-5  { clip-path: polygon(0% 31%,14% 31%,15% 60%,0% 61%); }
.city-object-layer.object-6  { clip-path: polygon(26% 48%,53% 48%,53% 65%,26% 65%); }
.city-object-layer.object-7  { clip-path: polygon(50% 56%,75% 56%,75% 70%,50% 70%); }
.city-object-layer.object-8  { clip-path: polygon(73% 55%,98% 55%,98% 69%,73% 69%); }
.city-object-layer.object-9  { clip-path: polygon(0% 70%,22% 70%,22% 87%,0% 87%); }
.city-object-layer.object-10 { clip-path: polygon(23% 77%,51% 77%,51% 92%,23% 92%); }
.city-object-layer.object-11 { clip-path: polygon(45% 79%,75% 79%,75% 95%,45% 95%); }
.city-object-layer.object-12 { clip-path: polygon(72% 79%,100% 79%,100% 97%,72% 97%); }

/* Permanent color replacements for decorative gray buildings. */
.decor-object-sprite,
.built-object-sprite {
  position: absolute;
  z-index: 3;
  object-fit: cover;
  pointer-events: none;
  border-radius: 22px;
  filter: saturate(1.25) brightness(1.05) drop-shadow(0 5px 7px rgba(0,33,64,.28));
  -webkit-mask-image: radial-gradient(ellipse at center, #000 60%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 60%, transparent 75%);
}
.decor-object-sprite.decor-center { left: 58.2%; top: 28.4%; width: 17.2%; height: 17.0%; }
.decor-object-sprite.decor-bottom-left { left: 17.1%; top: 80.0%; width: 17.0%; height: 17.0%; }
.decor-object-sprite.decor-bottom-mid { left: 39.2%; top: 81.0%; width: 17.0%; height: 17.0%; }
.built-object-sprite.built-object-2 { left: 23.5%; top: 19.2%; width: 21.5%; height: 20.4%; }

/* Map-style final patches replace the lesson plaques without flat UI cards. */
.final-building {
  width: 20.5%;
  border-radius: 22px;
  filter: saturate(1.15) brightness(1.03) drop-shadow(0 6px 8px rgba(10,42,39,.3));
}
.final-building-1  { left: -0.8%; top: 3.0%; }
.final-building-2  { left: 22.5%; top: 3.5%; }
.final-building-3  { left: 47.8%; top: 3.6%; }
.final-building-4  { left: 73.4%; top: 5.4%; }
.final-building-5  { left: 6.8%; top: 28.5%; }
.final-building-6  { left: 33.0%; top: 29.0%; }
.final-building-7  { left: 55.1%; top: 34.0%; }
.final-building-8  { left: 74.0%; top: 34.3%; }
.final-building-9  { left: -1.0%; top: 53.2%; }
.final-building-10 { left: 25.4%; top: 55.7%; }
.final-building-11 { left: 49.0%; top: 57.8%; }
.final-building-12 { left: 73.2%; top: 58.8%; }

/* V10.2: tighter object masks and a separate clean final map. */
.city-object-layer.object-1  { clip-path: polygon(0% 19%,18.5% 19%,18.5% 31.5%,15.5% 34%,2% 34%,0% 30%); }
.city-object-layer.object-2  { clip-path: polygon(23% 22%,45% 22%,45% 31%,41% 35%,27% 35%,23% 30%); }
.city-object-layer.object-3  { clip-path: polygon(48% 20%,66% 20%,66% 29%,62% 34%,51% 33%,48% 28%); }
.city-object-layer.object-4  { clip-path: polygon(74% 23%,97% 23%,97% 31%,91% 36%,77% 36%,74% 30%); }
.city-object-layer.object-5  { clip-path: polygon(0% 30%,12% 28%,15% 45%,13% 59%,2% 60%,0% 50%); }
.city-object-layer.object-6  { clip-path: polygon(27% 43%,50% 40%,53% 51%,48% 63%,29% 62%,26% 52%); }
.city-object-layer.object-7  { clip-path: polygon(52% 53%,73% 50%,76% 61%,70% 70%,53% 70%,49% 62%); }
.city-object-layer.object-8  { clip-path: polygon(76% 47%,98% 46%,99% 60%,94% 69%,77% 68%,73% 59%); }
.city-object-layer.object-9  { clip-path: polygon(0% 66%,20% 65%,22% 80%,18% 87%,0% 87%); }
.city-object-layer.object-10 { clip-path: polygon(25% 74%,50% 72%,51% 84%,47% 91%,28% 91%,23% 84%); }
.city-object-layer.object-11 { clip-path: polygon(47% 76%,74% 75%,76% 88%,70% 95%,50% 94%,45% 87%); }
.city-object-layer.object-12 { clip-path: polygon(75% 75%,100% 72%,100% 91%,95% 97%,79% 95%,74% 87%); }

.city-object-layer.decor-center {
  clip-path: polygon(57% 27%,74% 27%,76% 38%,70% 44%,59% 43%,55% 36%);
  filter: sepia(.9) saturate(4) hue-rotate(155deg) brightness(1.12) contrast(1.08);
}
.city-object-layer.decor-bottom-left {
  clip-path: polygon(18% 82%,34% 82%,35% 94%,31% 98%,20% 97%,17% 91%);
  filter: sepia(.9) saturate(3.4) hue-rotate(76deg) brightness(1.16);
}
.city-object-layer.decor-bottom-mid {
  clip-path: polygon(40% 83%,56% 83%,57% 95%,53% 99%,42% 98%,39% 92%);
  filter: sepia(.9) saturate(3.5) hue-rotate(170deg) brightness(1.15);
}

/* Remove experimental replacement sprites from the in-progress map. */
.decor-object-sprite,
.built-object-sprite,
.final-city-buildings { display: none !important; }

/* After all twelve lessons, switch to a dedicated bright map with no lesson plaques. */
.dashboard-viewport .game-dashboard .city-map.city-complete {
  background-image: url('./assets/city-map-final.png') !important;
  background-size: 100% 100%;
  background-position: center;
}
.city-complete .city-nodes,
.city-complete .city-object-states,
.city-complete .city-progress-box { display: none !important; }