/* Map button, the square maze chart, level progress readout. */

/* ---------- treasure / web map ---------- */
#map-btn {
  position: fixed; left: 0.85rem; bottom: 0.85rem; z-index: 300;
  width: 52px; height: 52px; border-radius: 4px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,240,200,0.35), transparent 50%),
    linear-gradient(145deg, #c9a86a, #8a6230);
  border: 2px solid #5a3d18;
  box-shadow: 2px 2px 0 #3a2610, inset 0 0 0 1px rgba(255,230,180,0.35);
  cursor: pointer; display: none;
}
#journey.on ~ #map-btn, body:has(#journey.on) #map-btn { display: block; }
#map-btn::before {
  content: ""; position: absolute; inset: 8px;
  background:
    linear-gradient(#5a3d18, #5a3d18) center/70% 1px no-repeat,
    linear-gradient(#5a3d18, #5a3d18) center/1px 70% no-repeat,
    radial-gradient(circle at 30% 40%, #5a3d18 2px, transparent 3px),
    radial-gradient(circle at 70% 65%, #5a3d18 2px, transparent 3px),
    radial-gradient(circle at 55% 25%, #5a3d18 2px, transparent 3px);
  opacity: 0.85;
}
#chart {
  position: fixed; left: 0.85rem; bottom: 4.2rem; z-index: 300;
  width: min(380px, calc(100vw - 1.7rem));
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.15), transparent 40%),
    linear-gradient(160deg, #e8d5a3 0%, #c9a86a 45%, #b8925a 100%);
  color: #2a1a0a;
  border: 3px solid #5a3d18;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.45), inset 0 0 40px rgba(90,60,20,0.15);
  padding: 0.75rem 0.75rem 0.85rem;
  display: none;
  font-family: "Times New Roman", Times, serif;
}
#chart.open { display: block; }
#chart .chart-bar {
  display: flex; justify-content: space-between; align-items: center;
  font-family: Tahoma, sans-serif; font-size: 10px;
  background: #000080; color: #fff; margin: -0.75rem -0.75rem 0.65rem;
  padding: 5px 7px; border-bottom: 2px solid #5a3d18;
}
#chart .chart-scroll {
  border: 2px solid #5a3d18;
  background: #3a2814;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(255,240,200,0.2);
}
#chart svg { width: 100%; height: auto; display: block; aspect-ratio: 1; }
/* maze: carved floor, rock, corridors */
#chart .maze-ground { fill: #d9c08a; }
#chart .maze-grid { stroke: rgba(90,60,20,0.16); stroke-width: 1; }
#chart .maze-rock {
  fill: #4a321a;
  stroke: #2e1e0e; stroke-width: 1;
}
#chart .maze-frame { fill: none; stroke: #2e1e0e; stroke-width: 3; }
#chart .maze-wall,
#chart .maze-floor,
#chart .web-link { fill: none; stroke-linejoin: round; stroke-linecap: square; }
#chart .maze-wall { stroke: #3a2410; stroke-width: 17; }
#chart .maze-floor { stroke: #efdfb4; stroke-width: 12; }
#chart .web-link {
  stroke: #8a6a3a; stroke-width: 1.6; stroke-dasharray: 3 4;
  transition: stroke 0.3s, stroke-width 0.3s;
}
#chart .web-link.on { stroke: #000080; stroke-width: 3; stroke-dasharray: none; }
#chart .web-link.next { stroke: #cc0000; stroke-width: 2.4; stroke-dasharray: 5 3; animation: chart-march 0.9s linear infinite; }
#chart .web-link.on.next { stroke: #000080; stroke-dasharray: 5 3; }
@keyframes chart-march { to { stroke-dashoffset: -16; } }
/* rooms */
#chart .web-node { cursor: pointer; outline: none; }
#chart .web-node .room {
  fill: #f6ecd0; stroke: #3a2410; stroke-width: 2;
  transition: fill 0.3s, stroke 0.3s, opacity 0.3s;
}
#chart .web-node text {
  pointer-events: none;
  font: 600 8px Tahoma, sans-serif; fill: #2a1a0a;
}
#chart .dead-x { stroke: #7a2410; stroke-width: 2; stroke-linecap: round; fill: none; }
#chart .web-node.visited .room { fill: #caa96a; }
#chart .web-node.next .room { stroke: #cc0000; stroke-width: 2.6; }
#chart .web-node.off-route .room { fill: #c2ad84; stroke: #7a6040; stroke-dasharray: 3 2; }
#chart .web-node.off-route text { fill: #5a4428; }
#chart .web-node.locked .room { fill: #e2d4b0; stroke: #9a8560; }
#chart .web-node.locked text { fill: #8a7550; }
#chart .web-node.here .room { fill: #fff3c4; stroke: #000080; stroke-width: 3; }
#chart .web-node:hover .room,
#chart .web-node:focus-visible .room { fill: #fff8de; }
#chart #chart-you {
  fill: none; stroke: #cc0000; stroke-width: 2.4; stroke-dasharray: 6 3;
  pointer-events: none;
  transition: x 0.45s ease, y 0.45s ease;
  animation: chart-march 1.2s linear infinite;
}
#chart .legend {
  display: flex; gap: 0.35rem 0.7rem; flex-wrap: wrap;
  margin-top: 0.45rem; font-family: Tahoma, sans-serif; font-size: 9px; color: #3a2410;
}
#chart .legend i { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
#chart .legend .lg { display: inline-block; width: 10px; height: 10px; border: 1.5px solid #3a2410; background: #f6ecd0; }
#chart .legend .lg-visited { background: #caa96a; }
#chart .legend .lg-next { border-color: #cc0000; }
#chart .legend .lg-off { background: #c2ad84; border-style: dashed; }
#chart .web-node.stop .room { stroke-dasharray: 5 2.5; }
#chart .legend .lg-stop { border-style: dashed; }
#chart .legend .lg-dead {
  border: 0; background: #efdfb4;
  font: 700 9px/10px Tahoma, sans-serif; color: #7a2410; text-align: center;
}
#chart .legend .lg-you { background: #fff3c4; border-color: #000080; outline: 1.5px dashed #cc0000; outline-offset: 1px; }
#chart .you {
  margin-top: 0.3rem; font-family: Tahoma, sans-serif; font-size: 11px;
  color: #3a2410;
}
#chart .you b { color: #000080; }
#chart .chart-msg {
  margin-top: 0.25rem; min-height: 1.1em;
  font-family: Tahoma, sans-serif; font-size: 10px; color: #7a2410;
}

/* level progress readout (shared by the levels) */
.level-progress {
  position: absolute; top: 2.1rem; left: 50%; transform: translateX(-50%); z-index: 40;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(240,236,228,0.85);
  padding: 0.3rem 0.75rem;
  background: rgba(0,0,0,0.45);
  pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.strip.blocker.moved { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)) brightness(0.72) saturate(0.6); }