/* ==========================================================================
   map.css — 公会大厅地图：区域节点、连线、光标
   ========================================================================== */

.map {
  position: relative;
  display: grid;
  align-content: center;
  padding: var(--sp-3) 0 var(--sp-5);
}

.map__paths {
  position: absolute; inset: 0 0 6% 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0.5;
}
.map__paths line,
.map__paths path {
  stroke: rgba(160, 195, 255, 0.3);
  stroke-width: 1;
  stroke-dasharray: 4 8;
  animation: dash 12s linear infinite;
}
.map__paths path.is-lit {
  stroke: rgba(232, 201, 121, 0.75);
  stroke-width: 1.4;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 6px rgba(232, 201, 121, 0.5));
}

@keyframes dash { to { stroke-dashoffset: -160; } }

.map__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.7vw, 26px);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------------------------- 区域节点 ---------------------------- */

.node {
  --node-accent: var(--accent);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(10px, 1.3vw, 18px);
  padding: clamp(12px, 1.5vw, 20px);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(22, 32, 58, 0.86), rgba(8, 12, 24, 0.9));
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  /* 默认就是可见的：动画只是增强，动画不生效时内容照样看得见 */
  opacity: 1;
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}

/* 入场动画：只在「用户没有要求减少动态效果」时启用。
   关键点：卡片默认 opacity:1，动画里也**不碰 opacity**，
   所以哪怕动画完全不执行（老浏览器、动画被策略禁用、无头环境冻结动画时钟），
   卡片内容也永远可见，不会出现「只剩虚线框」。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .node { animation: nodeIn var(--t-slow) var(--ease) backwards; }
  }
}

@keyframes nodeIn {
  from { transform: translateY(16px) scale(0.97); }
  to { transform: none; }
}

.node::before {
  /* 悬停时浮现的斜向高光 */
  content: "";
  position: absolute; inset: -40% -10%;
  background: linear-gradient(115deg, transparent 38%, var(--node-accent) 50%, transparent 62%);
  opacity: 0; transform: translateX(-30%);
  transition: opacity var(--t-mid), transform var(--t-slow) var(--ease);
  mix-blend-mode: screen; z-index: -1;
}
.node::after {
  /* 底部能量条 */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--node-accent), transparent);
  opacity: 0.35;
  transition: opacity var(--t-mid), height var(--t-mid);
}

.node:hover,
.node:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--node-accent) 60%, transparent);
  box-shadow: var(--shadow-2),
              0 0 0 1px color-mix(in srgb, var(--node-accent) 30%, transparent),
              0 0 42px -8px var(--node-accent);
  background: linear-gradient(180deg, rgba(32, 46, 80, 0.92), rgba(10, 15, 30, 0.94));
}
.node:hover::before,
.node:focus-visible::before { opacity: 0.16; transform: translateX(18%); }
.node:hover::after,
.node:focus-visible::after { opacity: 1; height: 3px; }

.node:active { transform: translateY(-2px) scale(0.995); }

.node__emblem {
  position: relative;
  width: clamp(46px, 4.6vw, 62px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--node-accent) 45%, transparent);
  background: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.1), rgba(8, 12, 24, 0.9) 70%);
  box-shadow: inset 0 0 18px -6px var(--node-accent);
  color: var(--node-accent);
}
.node__emblem svg { width: 56%; height: 56%; }
.node__emblem::after {
  /* 环绕符文环 */
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--node-accent) 42%, transparent);
  opacity: 0.55;
  transition: opacity var(--t-mid), transform 1.1s var(--ease);
}
.node:hover .node__emblem::after { opacity: 1; transform: rotate(140deg); }

.node__text { min-width: 0; display: grid; gap: 2px; }

.node__index {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.24em; color: var(--ink-faint);
}
.node__name {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.35vw, 19px);
  letter-spacing: 0.1em;
  color: var(--ink);
}
.node__en {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--node-accent) 80%, var(--ink-dim));
}
.node__tagline {
  font-size: 12px; color: var(--ink-faint);
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.node__status {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  padding: 2px 7px; border-radius: 99px;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  background: rgba(6, 10, 20, 0.7);
}
.node__status.is-new { color: #ffe6a3; border-color: rgba(232, 201, 121, 0.5); }

.node__cursor {
  position: absolute; right: 14px; bottom: 10px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--node-accent); opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t-mid), transform var(--t-mid) var(--ease);
}
.node:hover .node__cursor,
.node:focus-visible .node__cursor { opacity: 1; transform: none; }

/* 已浏览标记 */
.node.is-visited .node__emblem::after { border-style: solid; opacity: 0.85; }
.node.is-visited .node__status { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }

.map__hint {
  text-align: center; margin-top: var(--sp-4);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-faint);
}

/* ---------------------------- 响应式 ---------------------------- */

@media (max-width: 980px) {
  .map__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
  .map__paths { display: none; }
}

@media (max-width: 620px) {
  .map__grid { grid-template-columns: 1fr; max-width: 460px; }
  .map__hint { display: none; }
  .node__tagline { -webkit-line-clamp: 3; }
}

/* ==========================================================================
   降级层：不支持 color-mix() 的旧浏览器
   @layer 的优先级低于未分层的普通规则，所以现代浏览器会继续用上面的 color-mix，
   而旧浏览器（不认识 color-mix）会忽略上面的声明、使用这里的 rgba 回退色。
   ========================================================================== */

@layer fallbacks {
  .node:hover,
  .node:focus-visible {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-2);
  }
  .node__emblem { border-color: rgba(255, 255, 255, 0.22); }
  .node__emblem::after { border-color: rgba(255, 255, 255, 0.18); }
  .node__en { color: var(--ink-dim); }
  .node.is-visited .node__status { border-color: rgba(232, 201, 121, 0.45); }
}