/* pdx-map.css — Trainer Teams as a roguelite run map (Slay-the-Spire style). */

/* scroll canvas */
.runmap { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; }

/* ── Biome background (shifts by level band) + scrim ───────────────────── */
.map-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg,
    #0e2018 0%,            /* early — grass route */
    #0c1a1e 24%,
    #121324 46%,           /* mid — cave */
    #1a1430 66%,           /* late — plateau */
    #25122a 84%,           /* elite */
    #2a0f17 100%); }       /* boss — champion arena */
.map-bg::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 22% at 18% 12%, rgba(82,198,106,.18), transparent 70%),
    radial-gradient(50% 18% at 84% 30%, rgba(95,208,224,.12), transparent 70%),
    radial-gradient(70% 20% at 30% 70%, rgba(176,124,255,.14), transparent 70%),
    radial-gradient(80% 24% at 60% 96%, rgba(255,40,40,.16), transparent 70%); }
/* faint silhouettes */
.map-bg::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background:
    radial-gradient(40% 8% at 20% 20%, rgba(0,0,0,.5), transparent 70%),
    radial-gradient(50% 9% at 78% 52%, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(45% 10% at 35% 88%, rgba(0,0,0,.5), transparent 70%); }
.map-scrim { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 60% at 50% 0%, rgba(5,8,10,.35), rgba(5,8,10,.62));
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }

/* ── Path ──────────────────────────────────────────────────────────────── */
.run-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.run-path-base { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 2 14; }
.run-path-lit { fill: none; stroke: var(--glow); stroke-width: 3; stroke-linecap: round; opacity: .9;
  filter: drop-shadow(0 0 6px var(--glow)); stroke-dasharray: 26 600; }
@media (prefers-reduced-motion: no-preference) {
  .run-path-lit { animation: runComet calc(7s / var(--motion,1)) linear infinite; }
}
@keyframes runComet { from { stroke-dashoffset: 626; } to { stroke-dashoffset: 0; } }

/* ── Band dividers ─────────────────────────────────────────────────────── */
.band-divider { position: absolute; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 0 18px; transform: translateY(-50%); pointer-events: none; }
.band-divider .ln { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--bc, var(--glow)), transparent); opacity: .5; }
.band-divider .lbl { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--bc, var(--glow)); text-shadow: 0 0 10px color-mix(in oklab, var(--bc, var(--glow)) 50%, transparent);
  white-space: nowrap; }

/* ── Nodes ─────────────────────────────────────────────────────────────── */
.rnode { position: absolute; transform: translate(-50%, -50%); z-index: 4; appearance: none; border: 0; cursor: pointer;
  background: none; padding: 0; display: grid; place-items: center; }
.rnode-disc { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 38% 32%, color-mix(in oklab, var(--spec) 40%, #0c1414), #070d0c 78%);
  border: 2.5px solid var(--spec); color: #fff;
  box-shadow: 0 0 0 4px rgba(7,13,12,.7), 0 0 16px color-mix(in oklab, var(--spec) calc(45% * var(--motion)), transparent), inset 0 -3px 6px rgba(0,0,0,.5);
  transition: transform .18s cubic-bezier(.3,.9,.3,1), box-shadow .18s; }
.rnode-emblem { width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, color-mix(in oklab, var(--spec) 55%, #fff), var(--spec) 64%, color-mix(in oklab, var(--spec) 70%, #000));
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.6); }
.rnode-lv { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--font-lcd); font-size: 13px; line-height: 1; color: var(--spec); background: #070d0c;
  border: 1px solid color-mix(in oklab, var(--spec) 50%, transparent); border-radius: 999px; padding: 2px 7px;
  box-shadow: 0 0 8px rgba(0,0,0,.6); }
.rnode-name { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); z-index: 1;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--ink-2); white-space: nowrap;
  text-shadow: 0 1px 3px #000; pointer-events: none; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

.rnode:hover .rnode-disc, .rnode:focus-visible .rnode-disc { transform: scale(1.16);
  box-shadow: 0 0 0 4px rgba(7,13,12,.7), 0 0 26px color-mix(in oklab, var(--spec) 70%, transparent), inset 0 -3px 6px rgba(0,0,0,.5); }
.rnode:focus-visible { outline: none; }

/* boss / gym leader */
.rnode.boss .rnode-disc { width: 66px; height: 66px; border-width: 3px;
  box-shadow: 0 0 0 5px rgba(7,13,12,.7), 0 0 24px color-mix(in oklab, var(--spec) 60%, transparent), inset 0 -3px 8px rgba(0,0,0,.5); }
.rnode.boss .rnode-emblem { width: 24px; height: 24px; }
/* flared ring */
.rnode.boss .rnode-disc::before { content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px dashed color-mix(in oklab, var(--spec) 60%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .rnode.boss .rnode-disc::before { animation: bossSpin calc(14s / var(--motion,1)) linear infinite; }
  .rnode.boss .rnode-disc { animation: bossPulse calc(2.6s / var(--motion,1)) ease-in-out infinite; }
}
@keyframes bossSpin { to { transform: rotate(360deg); } }
@keyframes bossPulse { 0%,100% { box-shadow: 0 0 0 5px rgba(7,13,12,.7), 0 0 20px color-mix(in oklab, var(--spec) 50%, transparent), inset 0 -3px 8px rgba(0,0,0,.5); }
  50% { box-shadow: 0 0 0 5px rgba(7,13,12,.7), 0 0 34px color-mix(in oklab, var(--spec) 85%, transparent), inset 0 -3px 8px rgba(0,0,0,.5); } }

/* final boss */
.rnode.final .rnode-disc { width: 84px; height: 84px; border-width: 3px; }
.rnode.final .rnode-emblem { width: 30px; height: 30px; }
.rnode.final .rnode-crown { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 20px;
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--spec) 70%, transparent)); }
.rnode.final .rnode-flair { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--spec);
  white-space: nowrap; text-shadow: 0 0 10px color-mix(in oklab, var(--spec) 60%, transparent); }

/* start-here pulse on first node */
.rnode.start .rnode-disc::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--spec); }
@media (prefers-reduced-motion: no-preference) {
  .rnode.start .rnode-disc::after { animation: startPing calc(1.8s / var(--motion,1)) ease-out infinite; }
}
@keyframes startPing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

/* filter dim */
.rnode.dim { opacity: .26; filter: grayscale(.6); }
.rnode.dim .rnode-name { opacity: 0; }

/* node entrance */
@media (prefers-reduced-motion: no-preference) {
  .rnode { animation: nodePop calc(.5s * var(--motion,1)) cubic-bezier(.2,1,.4,1) both; animation-delay: var(--d, 0s); }
}
@keyframes nodePop { 0% { opacity: .25; transform: translate(-50%,-50%) scale(.5); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

/* ── Hover tooltip (sprite-first team) ─────────────────────────────────── */
.run-tip { position: fixed; z-index: 70; width: 540px; max-width: calc(100vw - 24px); pointer-events: none;
  border-radius: 16px; padding: 16px; background: color-mix(in oklab, var(--s1) 96%, transparent);
  border: 1px solid color-mix(in oklab, var(--spec) 40%, var(--line));
  box-shadow: 0 24px 60px -22px #000, 0 0 0 1px rgba(0,0,0,.4), 0 0 30px -10px color-mix(in oklab, var(--spec) 50%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (prefers-reduced-motion: no-preference) { .run-tip { animation: tipIn .18s ease; } }
@keyframes tipIn { from { transform: translateY(7px); } to { transform: none; } }
.tip-head { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tip-head-main { flex: 1 1 auto; min-width: 0; }
.tip-name { font-family: var(--font-display); font-size: 17px; font-weight: 800; line-height: 1; }
.tip-title { font-size: 10.5px; color: var(--ink-3); font-style: italic; margin-top: 2px; }
.tip-lv { font-family: var(--font-lcd); font-size: 16px; color: var(--spec); line-height: 1; flex: 0 0 auto; }
.tip-flair { font-family: var(--font-display); font-size: 8px; font-weight: 800; letter-spacing: .12em; color: var(--spec);
  border: 1px solid color-mix(in oklab, var(--spec) 50%, transparent); border-radius: 4px; padding: 2px 5px; white-space: nowrap; }

.tip-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.tip-mem { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line); }
.tip-mem .spr { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px;
  background: radial-gradient(80% 70% at 50% 30%, color-mix(in oklab, var(--spec) 12%, transparent), transparent 70%), var(--s1); }
.tip-mem .spr img { width: 92%; height: 92%; }
.tip-mem-name { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; text-align: center; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tip-mem .role-pill { font-size: 9px; height: 17px; padding: 0 8px; }
.tip-mem-peek { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); text-align: center; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.tip-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tip-tags .core-tag { height: 19px; font-size: 9.5px; }
.tip-tags .role { font-size: 9px; height: 16px; }
.tip-hint { margin-top: 9px; font-size: 9.5px; color: var(--ink-3); text-align: center; letter-spacing: .03em; }

@media (max-width: 720px) {
  .rnode-name { font-size: 10px; max-width: 90px; }
  .run-tip { width: 340px; padding: 12px; }
  .tip-team { gap: 7px; }
}