/* =========================================================
   smabo — interactive roadmap / skill-tree
   ========================================================= */

.roadmap-hero {
  background:
    radial-gradient(1100px 480px at 85% -20%, var(--bg-tint), transparent 60%),
    radial-gradient(820px 420px at 5% 0%, #e6fbff, transparent 55%);
  padding-block: 56px 24px;
}
.roadmap-hero h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.8rem);
  margin: 0 0 14px;
}
.roadmap-hero p { margin: 0; color: var(--ink-soft); max-width: 680px; }

/* ----- the canvas ----- */
.rmap-wrap {
  padding: 4px 0 32px;
}
.rmap-svg {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  font-family: var(--font);
}

/* phase bands */
.band { stroke: none; }
.band--app      { fill: rgb(255, 255, 255); }
.band--esp32    { fill: rgb(255, 255, 255); }
.band--brain    { fill: rgb(255, 255, 255); }
.band--brainros { fill: rgba(255, 255, 255); }
.band-sep { stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 7; }
.band-label {
  fill: var(--muted); font-weight: 800;
  font-size: 21px;
}
.band-label .req { fill: var(--muted); font-size: 15px; font-weight: 700; }
.band-label--app,
.band-label--app .req,
.band-label--esp32,
.band-label--esp32 .req,
.band-label--brain,
.band-label--brain .req,
.band-label--brainros,
.band-label--brainros .req { fill: var(--ink); }

/* edges */
.edge {
  fill: none;
  stroke: var(--line);
  stroke-width: 2.4;
  transition: stroke 0.18s ease, stroke-width 0.18s ease, opacity 0.18s ease;
}
.edge-arrow { fill: context-stroke; }
.rmap--hovering .edge { opacity: 0.25; }
/* past path (toward prerequisites): completed indigo trail — settled, no motion */
.edge.is-prereq { stroke: #9498d8; stroke-width: 2.8; opacity: .9; stroke-dasharray: 9 7; }
/* future path (toward unlocks): energised, flowing forward */
.edge.is-unlock { stroke: var(--cyan);   stroke-width: 3.4; opacity: 1; stroke-dasharray: 9 7; animation: flow 0.7s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -16; } }

/* nodes */
.node { cursor: pointer; transition: transform 0.15s ease; }
.node:hover  { transform: translateY(-2px); }
.node:active { transform: translateY(1px); }
.node__box {
  fill: var(--card);
  stroke: var(--line);
  stroke-width: 2;
  filter: drop-shadow(0 2px 6px rgba(40,42,90,.13));
  transition: fill 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease;
}
.node__label { fill: var(--ink); font-size: 14px; font-weight: 700; pointer-events: none; }
.node__sub   { fill: var(--muted); font-size: 11px; font-weight: 600; pointer-events: none; }
.node__icon  { font-size: 18px; pointer-events: none; }

/* hover relationships */
.rmap--hovering .node { opacity: 0.32; transition: opacity 0.18s ease, transform 0.15s ease; }
.rmap--hovering .node.is-hover,
.rmap--hovering .node.is-prereq,
.rmap--hovering .node.is-unlock { opacity: 1; }

.node.is-hover .node__box  { fill: var(--indigo); stroke: var(--indigo-dark); stroke-width: 3.2; filter: drop-shadow(0 8px 20px rgba(79,70,229,.45)); }
.node.is-hover .node__label,
.node.is-hover .node__sub  { fill: #fff; }
/* past (prerequisites): completed indigo trail — flat & "stamped", clearly
   distinct from the greyed-out unrelated nodes */
.node.is-prereq .node__box   { stroke: var(--indigo); stroke-width: 2.4; fill: #d6d8f7; filter: none; }
.node.is-prereq .node__label { fill: var(--indigo-dark); }
.node.is-prereq .node__sub   { fill: var(--indigo); }
/* future (unlocks): bright & glowing — "opens up ahead" */
.node.is-unlock .node__box   { stroke: var(--cyan); stroke-width: 3.4; fill: #dffaff; filter: drop-shadow(0 4px 14px rgba(6,182,212,.35)); }

/* tooltip (吹き出し) */
.rmap-tooltip {
  position: fixed;
  z-index: 200;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(40,42,90,.12);
  padding: 10px 12px;
  width: 320px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
}
.rmap-svg.has-tooltip { pointer-events: none; }
.rmap-svg.has-tooltip .node { pointer-events: none; }
.rmap-tooltip { cursor: grab; }
.rmap-tooltip.is-dragging { cursor: grabbing; user-select: none; }
.rmap-tooltip__handle {
  display: flex;
  justify-content: center;
  margin: -2px 0 8px;
  color: var(--line);
  transition: color 0.15s ease;
}
.rmap-tooltip:hover .rmap-tooltip__handle { color: var(--muted); }
.rmap-tooltip__link { cursor: pointer; }
.rmap-tooltip__label {
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.rmap-tooltip__body {
  font-size: 0.72rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}
.rmap-tooltip__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 10px;
}
.rmap-tooltip__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-top: 6px;
  margin-bottom: 4px;
}
.rmap-tip-btn {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--indigo);
  text-decoration: none;
  border: 1.5px solid var(--indigo);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 8px 2px 12px 0;
  transition: background .15s ease, color .15s ease;
}
.rmap-tip-btn:hover { background: var(--indigo); color: #fff; }

.rmap-tip-sysmap {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 520;
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.rmap-tooltip__title {
  display: none;
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 40px 14px 0;
  color: var(--ink);
}

.rmap-tooltip__close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 4px;
  line-height: 1;
  border-radius: 6px;
}
.rmap-tooltip__close:hover { color: var(--ink); }

@media (max-width: 600px) {
  /* inset modal, not a full-screen cover — leaves a margin on every side so
     the roadmap stays visible behind it */
  .rmap-tooltip--fullscreen {
    top: 20px !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    border-radius: 18px !important;
    overflow-y: auto;
    touch-action: pan-y;
    box-shadow: 0 10px 40px rgba(20, 20, 40, .3);
  }
  .rmap-tooltip--fullscreen .rmap-tooltip__handle {
    display: none;
  }
  .rmap-tooltip--fullscreen .rmap-tooltip__title {
    display: block;
  }
  .rmap-tooltip--fullscreen .rmap-tooltip__close {
    display: block;
  }
}