/* ============================================================
   HEIST MAP — vertical trail of vault-door job nodes.
   Node / chest / Pixel positions come from inline --x (factor -1…1)
   and --y (px) custom properties set by js/ui/board.js.
============================================================ */
#screen-board .section-label,
#screen-board .daily-card,
#screen-board .rank-banner,
#screen-board > .row,
.heist-map,
.map-boss-wrap {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.heist-map {
  --map-off: 150px;
  --node: 76px;
  position: relative;
  display: block;
}

/* ---------- zone banner ---------- */
.map-zone { position: relative; }
.map-zone + .map-zone { margin-top: -8px; }

.map-zone-banner {
  --tone: var(--gold-2);
  --tone-ink: #241500;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--tone);
  color: var(--tone-ink);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), 0 14px 30px rgba(0, 0, 0, 0.3);
}
.tone-orange .map-zone-banner { --tone: #ff9f43; --tone-ink: #241500; }
.tone-cyan .map-zone-banner { --tone: #34e1ff; --tone-ink: #04202b; }
.tone-magenta .map-zone-banner { --tone: #ff4fd8; --tone-ink: #2b0626; }
.tone-purple .map-zone-banner { --tone: #8b7cff; --tone-ink: #0d0830; }
.tone-green .map-zone-banner { --tone: #2ee66b; --tone-ink: #03230f; }

.map-zone-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.map-zone-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.map-zone-name {
  font-size: clamp(19px, 4.6vw, 24px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
}
.map-zone-progress {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

/* ---------- trail + path ---------- */
.map-trail { position: relative; }

.map-path {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}
.map-path path { fill: none; stroke-linecap: round; }
.map-path-bed { stroke: #161c33; stroke-width: 16; }
.map-path-dots { stroke: #3a4569; stroke-width: 6; stroke-dasharray: 0.1 15; }
.map-path-done { stroke: var(--gold); stroke-width: 6; stroke-dasharray: 0.1 15; }
.map-path--narrow { display: none; }

/* ---------- node (vault door) ---------- */
#job-grid .map-node {
  position: absolute;
  top: calc(var(--y) - var(--node) / 2);
  left: calc(50% + var(--x) * var(--map-off));
  transform: translateX(-50%);
  z-index: 3;
  width: 176px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#job-grid .map-node:hover { transform: translateX(-50%); border: 0; box-shadow: none; }
#job-grid .map-node:focus-visible { outline: none; }

.map-vault {
  --ring: #3a4363;
  --ring-dark: #222941;
  --glyph: #8a93b8;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 54%, var(--ring) 55%, var(--ring) 66%, transparent 67%),
    radial-gradient(circle at 35% 30%, #2a3354, #141a2e 70%);
  border: 4px solid var(--ring);
  box-shadow: 0 6px 0 var(--ring-dark), inset 0 0 0 3px rgba(0, 0, 0, 0.35);
  color: var(--glyph);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* bolts around the door */
.map-vault::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 3px dotted var(--ring);
  opacity: 0.7;
}
.map-vault-face { position: relative; display: grid; place-items: center; }

.tier-bronze .map-vault { --ring: #d98a4e; --ring-dark: #7a4423; --glyph: #f2b07c; }
.tier-silver .map-vault { --ring: #c9d3e6; --ring-dark: #67718c; --glyph: #e6ecf8; }
.tier-gold .map-vault { --ring: #ffd166; --ring-dark: #b7862a; --glyph: #ffe39e; }
.tier-gold .map-vault { box-shadow: 0 6px 0 var(--ring-dark), 0 0 24px rgba(255, 209, 102, 0.35), inset 0 0 0 3px rgba(0, 0, 0, 0.35); }

#job-grid .map-node:hover .map-vault { transform: translateY(-3px); }
#job-grid .map-node:active .map-vault { transform: translateY(3px); box-shadow: 0 3px 0 var(--ring-dark); }
#job-grid .map-node:focus-visible .map-vault { outline: 3px solid var(--cyan); outline-offset: 5px; }
#job-grid .map-node:focus-visible .map-label { border-color: var(--cyan); }

/* recommended next node */
.is-next .map-vault { --ring: var(--cyan); --ring-dark: #1a8aa3; --glyph: var(--cyan); }
.is-next.tier-bronze .map-vault,
.is-next.tier-silver .map-vault,
.is-next.tier-gold .map-vault { --glyph: var(--cyan); }
.is-next .map-vault::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid var(--cyan);
  animation: map-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
.map-start-tag {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 11px;
  border-radius: 9px;
  background: #eef1ff;
  color: #0b0e1a;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.map-start-tag::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #eef1ff;
}

/* crown pips + label */
.map-pips {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 2px;
  margin-top: -10px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #0f1426;
  border: 1px solid var(--line);
  color: #586082;
}
.map-pip { display: inline-flex; }
.map-pip.is-earned { color: var(--gold); }

.map-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin-top: 6px;
  padding: 5px 12px 6px;
  border-radius: 12px;
  background: #141a2e;
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.map-name { font-size: 15px; font-weight: 800; line-height: 1.2; }
.map-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* ---------- chest stop ---------- */
.map-chest {
  position: absolute;
  top: calc(var(--y) - 22px);
  left: calc(50% + var(--x) * var(--map-off) - 22px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #141a2e;
  border: 2px solid #3a4363;
  color: #8a93b8;
}
.map-chest.is-open {
  border-color: var(--gold);
  color: var(--gold);
  background: #2a2212;
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.35);
}

/* ---------- Pixel "you are here" ---------- */
.map-pixel {
  position: absolute;
  top: calc(var(--y) - 58px);
  left: calc(50% + var(--x) * var(--map-off) + var(--side) * 88px - 42px);
  z-index: 2;
  width: 84px;
  height: 84px;
  pointer-events: none;
}

/* ---------- crown stamp on return ---------- */
.map-stamp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 3px 0 #0b0e1a);
}
.is-stamped .map-stamp { animation: map-stamp 1.1s ease-out both; }
.is-stamped .map-vault { animation: map-thud 1.1s ease-out both; }
.is-stamped .map-pip.is-earned { animation: map-pip-pop 0.4s 0.45s ease-out both; }

@keyframes map-pulse {
  from { transform: scale(0.9); opacity: 0.9; }
  to { transform: scale(1.25); opacity: 0; }
}
@keyframes map-stamp {
  0% { transform: scale(2.6) rotate(-14deg); opacity: 0; }
  35% { transform: scale(1) rotate(0); opacity: 1; }
  70% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(0.6) translateY(-18px); opacity: 0; }
}
@keyframes map-thud {
  0%, 30% { transform: none; }
  38% { transform: translateY(4px) scale(0.96); }
  50% { transform: translateY(-2px) scale(1.04); }
  65%, 100% { transform: none; }
}
@keyframes map-pip-pop {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ---------- boss gate ---------- */
.map-boss-wrap { position: relative; padding-top: 18px; }
.map-boss-connector {
  position: absolute;
  top: -24px;
  left: 50%;
  width: 6px;
  height: 46px;
  margin-left: -3px;
  background: radial-gradient(circle, #3a4569 2.5px, transparent 3px) 0 0 / 6px 15px repeat-y;
}
#screen-board .map-boss {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 10px;
  border-radius: 22px;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(255, 84, 112, 0.2), rgba(139, 124, 255, 0.16)),
    #1a1426;
  border: 2px solid rgba(255, 84, 112, 0.5);
  box-shadow: 0 6px 0 #3a1424, 0 18px 40px rgba(0, 0, 0, 0.4);
}
#screen-board .map-boss:hover { transform: translateY(-3px); border-color: var(--red); }
#screen-board .map-boss.locked { opacity: 1; filter: none; }
#screen-board .map-boss.locked .map-boss-art { filter: saturate(0.55) brightness(0.8); }
.map-boss-art { display: grid; place-items: center; width: 104px; height: 104px; }
.map-boss-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.map-boss-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff8aa0;
}
.map-boss-title {
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
}
.map-boss-progress { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.map-boss-bar { flex: 1 1 120px; height: 10px; }
.map-boss-bar > i { animation: none; background: linear-gradient(90deg, var(--red), var(--gold)); }
.map-boss-count { font-size: 13px; font-weight: 800; color: #eef1ff; white-space: nowrap; }
.map-boss-desc { font-size: 14px; color: #c7cce3; }
.map-boss-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; align-self: start; }
.map-boss-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #2b0710;
  background: var(--green);
  white-space: nowrap;
}
.map-boss.locked .map-boss-tag { color: #ffb3c0; background: rgba(255, 84, 112, 0.16); }
#screen-board .map-boss-trophies { position: static; color: var(--gold); font-weight: 800; }
#screen-board .map-boss-trophies:empty { display: none; }

/* ---------- loot result: boss / mixed (no crowns awarded) ---------- */
.loot-trophy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(52, 225, 255, 0.12);
  border: 1px solid rgba(52, 225, 255, 0.4);
  color: #34e1ff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- phone ---------- */
@media (max-width: 600px) {
  .heist-map { --map-off: 84px; --node: 70px; }
  .map-path--wide { display: none; }
  .map-path--narrow { display: block; }
  #job-grid .map-node { width: 156px; }
  .map-name { font-size: 14px; }
  #screen-board .map-boss {
    grid-template-columns: auto 1fr;
    padding: 12px 14px 12px 6px;
    gap: 8px;
  }
  .map-boss-art { width: 84px; height: 84px; }
  .map-boss-art .hr-char { width: 84px !important; height: 84px !important; }
  .map-boss-side {
    grid-column: 1 / -1;
    grid-row: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-self: auto;
    padding-left: 8px;
  }
  .map-boss-title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-next .map-vault::after { animation: none; opacity: 0.8; transform: none; }
  .map-stamp, .is-stamped .map-stamp, .is-stamped .map-vault, .is-stamped .map-pip.is-earned { animation: none !important; }
  .map-vault, #job-grid .map-node:hover .map-vault { transition: none; transform: none; }
}