/* =========================================================
   UMNOGRAD V9 — PRECISE MAP HOTSPOTS
   Only map hit areas and decorative locks are corrected.
   Course content and lesson logic are unchanged.
   ========================================================= */

/* Keep all transparent lesson buttons tied to the exact plaque geometry
   of assets/city-map-v9.jpg (899 × 802). */
.dashboard-viewport .game-dashboard .city-node {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  outline: 0;
  background: transparent;
  box-shadow: none;
  transform: none !important;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.dashboard-viewport .game-dashboard .city-node:hover:not(:disabled),
.dashboard-viewport .game-dashboard .city-node:focus-visible {
  z-index: 9;
  border: 0;
  outline: 0;
  transform: none !important;
  background: rgba(69, 188, 255, .08);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.98),
    inset 0 0 0 7px rgba(63,197,255,.96);
}

.dashboard-viewport .game-dashboard .city-node.next-node:not(.complete):not(.locked) {
  border: 0;
  outline: 0;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.98),
    inset 0 0 0 7px rgba(255,218,57,.98);
}

.dashboard-viewport .game-dashboard .city-node.next-node:not(.complete):not(.locked):hover,
.dashboard-viewport .game-dashboard .city-node.next-node:not(.complete):not(.locked):focus-visible {
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.98),
    inset 0 0 0 7px rgba(63,197,255,.96);
}

/* Closed student lessons use one small badge on their own plaque.
   Decorative padlocks that were baked into the map artwork were removed. */
.dashboard-viewport .game-dashboard .city-node.locked {
  opacity: 1;
  filter: none;
  background: rgba(31,38,49,.18);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.dashboard-viewport .game-dashboard .city-node.locked::after {
  content: "🔒";
  position: absolute;
  inset: auto 5px 5px auto;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(34,44,58,.90);
  border: 2px solid rgba(255,255,255,.9);
  font-size: 15px;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

/* Exact plaque bounds in the 899×802 reference image. */
.dashboard-viewport .game-dashboard .node-1  { left: 4.783%;  top: 15.461%; width: 12.236%; height: 10.973%; }
.dashboard-viewport .game-dashboard .node-2  { left: 29.700%; top: 15.586%; width: 11.902%; height: 11.347%; }
.dashboard-viewport .game-dashboard .node-3  { left: 56.396%; top: 16.085%; width: 11.457%; height: 10.349%; }
.dashboard-viewport .game-dashboard .node-4  { left: 79.755%; top: 19.825%; width: 12.681%; height: 10.848%; }
.dashboard-viewport .game-dashboard .node-5  { left: 12.347%; top: 43.267%; width: 13.014%; height: 10.100%; }
.dashboard-viewport .game-dashboard .node-6  { left: 43.159%; top: 43.267%; width: 11.457%; height: 10.100%; }
.dashboard-viewport .game-dashboard .node-7  { left: 60.178%; top: 48.628%; width: 11.568%; height: 10.973%; }
.dashboard-viewport .game-dashboard .node-8  { left: 78.087%; top: 48.753%; width: 14.349%; height: 11.097%; }
.dashboard-viewport .game-dashboard .node-9  { left: 2.892%;  top: 67.332%; width: 13.793%; height: 10.848%; }
.dashboard-viewport .game-dashboard .node-10 { left: 32.369%; top: 70.449%; width: 13.793%; height: 10.599%; }
.dashboard-viewport .game-dashboard .node-11 { left: 56.396%; top: 72.818%; width: 15.350%; height: 11.097%; }
.dashboard-viewport .game-dashboard .node-12 { left: 78.309%; top: 73.940%; width: 14.461%; height: 10.723%; }

/* The map itself keeps the same approved artwork and proportions. */
.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;
}