/* Map Redesign Styles */
/* Boss preview (2026-09-24): this act's boss, drawn by seed, shown above the route. */
.boss-preview{display:flex;align-items:center;gap:.7rem;width:100%;max-width:880px;box-sizing:border-box;padding:.5rem .8rem;border-radius:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--boss-color) 26%,#15151f),#1a1a26 70%);border:1px solid color-mix(in srgb,var(--boss-color) 60%,transparent);color:#e8ecf6;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.boss-preview-figure{flex:0 0 auto;position:relative;display:block;width:64px;height:64px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--boss-color) 35%,#0d0d15),#0d0d15 70%);border:2px solid var(--boss-color)}
.boss-preview-figure .character-stage-host{position:absolute;inset:0}
.boss-preview-emblem{display:inline-grid;place-items:center;vertical-align:-3px;margin-right:4px;color:var(--boss-color);font-style:normal}
.boss-preview-emblem svg{width:14px;height:14px}
.boss-preview-body{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.boss-preview-body small{font-size:11px;letter-spacing:.08em;color:#aab3c8}
.boss-preview-body b{font-size:15px;color:#fff}
.boss-preview-body em{font-style:normal;font-size:12.5px;color:#d3dae8}
@media (max-width:520px){.boss-preview{padding:.4rem .6rem;gap:.5rem}.boss-preview-figure{width:52px;height:52px}.boss-preview-body b{font-size:14px}.boss-preview-body em{font-size:12px}}
.map-container {
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  background: radial-gradient(ellipse at 50% 35%, #32404833, transparent 65%);
}

.map-stage-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 880px;
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.map-quick-legend{max-width:880px;width:100%;box-sizing:border-box;text-align:center;color:#dbe6de;font-size:12px;line-height:1.4;letter-spacing:.03em}

.map-scroll {
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #313244;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 50%,#30344b,#181825 72%);
  padding: 1rem;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #45475a #1e1e2e;
}

.map-svg {
  display: block;
  margin: 0 auto;
  min-width: 0;
  height: auto;
  aspect-ratio: 400 / 1360;
  width: 100%;
}

.map-edge {
  stroke: #45475a;
  stroke-width: 2;
  fill: none;
  pointer-events: none;
}

.map-node {
  outline: none;
  pointer-events: all;
}

.map-node circle {
  fill: #313244;
  stroke: #585b70;
  stroke-width: 2;
  transition: fill 0.2s, stroke 0.2s, transform 0.2s;
  transform-origin: center;
  transform-box: fill-box;
}
.map-node .map-glyph { fill:#aeb5c9; font-size:20px; font-weight:700; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
.map-node.available .map-glyph { fill:#17243a; }
.map-node.kind-elite circle{stroke:#ad7373}.map-node.kind-boss circle{stroke:#c49c50}
.map-node.kind-elite.available circle{fill:#9e5c62;stroke:#f1afb3}.map-node.kind-boss.available circle{fill:#ad813e;stroke:#f6d989}
.map-node.kind-elite.available .map-glyph,.map-node.kind-boss.available .map-glyph{fill:#fff5e2}
.map-node.kind-boss .map-glyph{font-size:21px}
.map-node .map-choice-label { fill:#eff4ff; font-size:13px; font-weight:700; text-anchor:middle; paint-order:stroke; stroke:#141824; stroke-width:3px; pointer-events:none; }
.map-node.available .map-choice-label { fill:#eff4ff; }
.map-node.available .map-choice-label { opacity:0; transition:opacity .15s ease; }
.map-node.available:hover .map-choice-label,
.map-node.available:focus .map-choice-label { opacity:1; }

.map-node.available circle {
  fill: #89b4fa;
  stroke: #b4befe;
  cursor: pointer;
}

.map-node.available:hover circle,
.map-node.available:focus circle {
  fill: #74c7ec;
  stroke: #f9e2af;
  transform: scale(1.2);
}

.map-node.current circle {
  fill: #f9e2af;
  stroke: #fab387;
  stroke-width: 3;
}

.map-node.completed circle {
  fill: #a6e3a1;
  stroke: #94e2d5;
  opacity: 0.8;
}

.map-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
  width: 100%;
  max-width: 440px;
  color: #d8ddec;
  font-size: 0.72rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .4rem .5rem;
  background: #242838;
  border: 1px solid #48526b;
  border-radius: 6px;
  line-height: 1.35;
}
.legend-icon{flex:0 0 24px;display:grid;place-items:center;width:24px;height:24px;border:1px solid #a9b7d2;border-radius:50%;color:#f4d295;font-size:15px;font-weight:800}
.legend-item:nth-child(2) .legend-icon{border-color:#d88c8c;color:#f3a7a7}.legend-item:nth-child(6) .legend-icon{border-color:#e2c476;color:#f8de96}
@media(max-width:500px){.map-legend{grid-template-columns:1fr 1fr}.legend-item{font-size:.66rem;padding:.35rem;gap:.3rem}.legend-icon{flex-basis:20px;width:20px;height:20px}}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.current {
  background: #f9e2af;
  border: 2px solid #fab387;
}

.legend-dot.available {
  background: #89b4fa;
  border: 2px solid #b4befe;
}

.legend-dot.completed {
  background: #a6e3a1;
  border: 2px solid #94e2d5;
}

@media(min-width:900px){
  .map-container{display:grid;grid-template-columns:minmax(460px,560px) minmax(240px,300px);grid-template-rows:auto 1fr auto;justify-content:center;align-items:start;column-gap:18px;max-width:920px;margin:auto}
  .map-stage-info{grid-column:1 / -1;max-width:none}
  .map-scroll{grid-column:1;grid-row:2 / 4;max-height:calc(100dvh - 120px)}
  .map-legend{grid-column:2;grid-row:2;grid-template-columns:1fr;max-width:none;align-self:start}
  .node-details{grid-column:2;grid-row:3;max-width:none}
}

.node-details {
  width: 100%;
  max-width: 440px;
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.node-details strong {
  color: #f9e2af;
}

.node-details span {
  color: #a6adc8;
}

/* Desktop adjustments */
@media (min-width: 768px) {
  .map-container {
    max-width: 920px;
  }
  .map-scroll {
    max-height: 75vh;
  }
}

/* Give each tournament stop room to breathe and scroll the route itself. */
.map-container .map-scroll {
  max-width: 430px;
  height: min(72dvh, 680px);
  max-height: min(72dvh, 680px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: .55rem;
  scrollbar-color: #737587 #222638;
}
.map-container .map-svg {
  max-width: 400px;
  aspect-ratio: 400 / 1360;
}
.map-container .map-node:not(.available):not(.completed):not(.current) { opacity: .86; }
.map-container .map-edge { stroke: #81859a; stroke-width: 1.3; stroke-dasharray: 3 7; opacity: .7; }
.map-container .map-node circle { fill: #272e3e; stroke: #71798d; stroke-width: 1.5; }
.map-container .map-node.available circle { fill: #3a4552; stroke: #e0b76e; stroke-width: 2.5; }
.map-container .map-node.available .map-glyph { fill: #f6e8c6; }
.map-container .map-node.available:hover circle,
.map-container .map-node.available:focus circle { fill: #4b5c64; stroke: #f6d48b; transform: scale(1.08); }
.map-container .map-node.completed circle { fill: #344b46; stroke: #90ae9e; }
.map-container .map-node.kind-boss circle { stroke: #dfbf80; stroke-width: 2.5; }
@media (min-width: 900px) {
  .map-container { grid-template-columns: minmax(400px, 430px) minmax(240px, 300px); grid-template-rows: auto auto 1fr auto; gap: .35rem; max-width: 800px; }
  .map-container .guide-strip { grid-column: 1 / -1; grid-row: 1; }
  .map-container .map-stage-info { grid-column: 1 / -1; grid-row: 2; }
  .map-container .map-quick-legend { display: none; }
  .map-container .map-scroll { grid-column: 1; grid-row: 3 / 5; max-height: min(72dvh, 680px); }
  .map-container .map-legend { grid-column: 2; grid-row: 3; }
  .map-container .node-details { grid-column: 2; grid-row: 4; }
}
@media (max-width: 500px) {
  .map-container .map-scroll { height: 65dvh; max-height: 65dvh; }
}
/* Boss preview row on top of the desktop grid; the other rows move down one. */
@media (min-width: 900px) {
  .map-container { grid-template-rows: auto auto auto auto 1fr auto; }
  .map-container .boss-preview { grid-column: 1 / -1; grid-row: 1; max-width: none; }
  .map-container .guide-strip { grid-row: 2; }
  .map-container .map-stage-info { grid-row: 3; }
  .map-container .map-scroll { grid-row: 4 / 6; max-height: min(66dvh, 640px); height: min(66dvh, 640px); }
  .map-container .map-legend { grid-row: 4; }
  .map-container .node-details { grid-row: 5; }
}