/* ===================================================================
   Wonderverse世界 · 世界总览地图（world.css）
   仅本页新增样式，基础系统复用 ../style.css
   =================================================================== */

/* 主区不再用 flex gap 默认，地图舞台占满 */
.main{gap:14px}

/* 顶栏：左面包屑 + 右次导航/头像 */
.topbar__crumb{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-mute)}
.topbar__crumb a{color:var(--ink-soft);text-decoration:none}
.topbar__crumb a:hover{color:#fff}
.topbar__crumb b{color:#fff;font-weight:600}
.crumb__sep{color:var(--ink-mute)}
.topbar{flex-wrap:nowrap}
.topbar__right{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
.topbar__nav a{padding:8px 13px;font-size:13px}

/* ===================== 地图舞台 ===================== */
.stage{position:relative;border-radius:30px;overflow:hidden;
  border:1px solid var(--brd);box-shadow:var(--shadow);
  background:linear-gradient(180deg,#241a5e 0%,#1d1450 100%)}

/* 标题悬浮在地图上方 */
.stage__head{position:absolute;top:18px;left:0;right:0;z-index:6;text-align:center;pointer-events:none}
.stage__title{font-family:var(--font-disp);font-weight:700;line-height:1;
  font-size:clamp(30px,4vw,52px);letter-spacing:1px;
  text-shadow:0 4px 26px rgba(60,30,140,.65);display:inline-flex;align-items:baseline;gap:2px}
.stage__title .grad{background:linear-gradient(100deg,#9fe0ff 0%,#cdb6ff 55%,#ffd6f4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stage__title .cn{color:#fff;letter-spacing:2px}
.stage__title .sparkle{font-size:.5em;color:#ffe07a;margin-left:6px;
  text-shadow:0 0 12px rgba(255,224,120,.8);align-self:flex-start}
.stage__sub{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px;
  color:var(--ink-soft);font-size:clamp(12px,1.2vw,15px);letter-spacing:1px}
.stage__sub .ln{height:1px;width:36px;background:linear-gradient(90deg,transparent,rgba(200,180,255,.7))}
.stage__sub .ln:last-child{background:linear-gradient(90deg,rgba(200,180,255,.7),transparent)}

/* 地图画布 —— 维持设计稿宽高比 */
.map{position:relative;width:100%;aspect-ratio:1298/1024;min-height:520px}
.map__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

/* ---------- 地点 pin 标记 ---------- */
.pin{position:absolute;transform:translate(-50%,-50%);z-index:4;cursor:pointer;
  width:38px;height:38px;border:none;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:17px;line-height:1;
  background:radial-gradient(circle at 35% 30%,#fff7,transparent 60%),
    linear-gradient(135deg,#a07bff,#7b54e0);
  box-shadow:0 8px 22px -6px rgba(80,40,160,.8),0 0 0 4px rgba(255,255,255,.25);
  animation:pinFloat 3s ease-in-out infinite}
.pin::after{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:#7b54e0;filter:drop-shadow(0 2px 1px rgba(80,40,160,.5))}
.pin:hover{transform:translate(-50%,-58%) scale(1.08)}
@keyframes pinFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-58%)}}
.pin--02{background:radial-gradient(circle at 35% 30%,#fff7,transparent 60%),linear-gradient(135deg,#7fd6a8,#3fae7e)}
.pin--02::after{border-top-color:#3fae7e}
.pin--03{background:radial-gradient(circle at 35% 30%,#fff7,transparent 60%),linear-gradient(135deg,#8fd0ff,#4a96f0)}
.pin--03::after{border-top-color:#4a96f0}
.pin--04{background:radial-gradient(circle at 35% 30%,#fff7,transparent 60%),linear-gradient(135deg,#ff9ec2,#f5638f)}
.pin--04::after{border-top-color:#f5638f}

/* ---------- 地点信息气泡卡 ---------- */
.spot{position:absolute;z-index:5;width:165px;padding:11px 14px 13px;
  border-radius:16px;
  background:linear-gradient(160deg,rgba(60,40,116,.82),rgba(40,26,84,.82));
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);
  box-shadow:0 14px 34px -14px rgba(10,4,40,.85);
  --accent:#b79bff}
.spot::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;
  background:var(--accent)}
.spot header{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.spot__no{font-family:var(--font-disp);font-weight:700;font-size:12px;color:#3a1f6e;
  background:linear-gradient(135deg,#ffe07a,#ffb13a);padding:1px 7px;border-radius:7px}
.spot h3{font-size:16px;font-weight:700;color:#fff}
.spot__tags{font-size:10.5px;color:var(--accent);margin-bottom:4px;font-weight:500}
.spot__desc{font-size:11px;line-height:1.5;color:var(--ink-soft)}
.spot--green{--accent:#86e3b0}
.spot--blue{--accent:#8fd0ff}
.spot--pink{--accent:#ff9ec2}
.spot--violet{--accent:#c4a4ff}

/* ---------- 右上：世界探索进度卡 ---------- */
.progress{position:absolute;right:2%;top:7.5%;z-index:7;width:206px;padding:16px 16px 18px;
  border-radius:20px;
  background:linear-gradient(165deg,rgba(245,238,255,.97),rgba(228,216,250,.95));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 22px 50px -16px rgba(20,10,60,.6)}
.progress__top{display:flex;align-items:center;justify-content:space-between}
.progress__top h4{font-size:14.5px;font-weight:700;color:#5a3aa0}
.progress__close{border:none;background:none;cursor:pointer;color:#b3a0d6;font-size:13px}
.progress__row{display:flex;align-items:center;gap:10px;margin:12px 0 12px}
.progress__compass{font-size:30px;filter:drop-shadow(0 4px 8px rgba(180,120,40,.4))}
.progress__pct{font-family:var(--font-disp);font-weight:700;font-size:34px;
  background:linear-gradient(135deg,#8a5cff,#c77bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.progress__bar{height:9px;border-radius:9px;background:#e3d6f5;overflow:hidden}
.progress__bar span{display:block;height:100%;border-radius:9px;
  background:linear-gradient(90deg,#9a6cff,#7fb0ff)}
.progress__hint{font-size:12px;color:#6e5aa0;margin:9px 0 12px}
.progress__hint b{color:#7b4cd6;font-weight:700}
.progress__btn{width:100%;border:none;cursor:pointer;padding:9px;border-radius:13px;
  font-size:13px;font-weight:700;color:#6a3c10;
  background:linear-gradient(135deg,#ffe07a,#ffb13a);
  box-shadow:0 8px 18px -6px rgba(255,176,58,.6);
  display:flex;align-items:center;justify-content:center;gap:6px}
.progress__btn span{font-size:16px}
.progress__btn:hover{transform:translateY(-1px)}

/* ---------- 右下：未来地图卡 ---------- */
.future{position:absolute;right:2%;bottom:15%;z-index:7;width:178px;padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(160deg,rgba(70,48,130,.7),rgba(48,32,96,.7));
  border:1px solid rgba(190,170,255,.4);backdrop-filter:blur(8px);
  box-shadow:0 16px 38px -14px rgba(10,4,40,.8)}
.future__head{display:flex;align-items:center;gap:9px;color:#fff;font-size:15px;font-weight:700}
.future__ico{font-size:19px}
.future__arrow{margin-left:auto;color:#cbb6ff;font-size:18px}
.future__desc{margin-top:7px;font-size:12px;line-height:1.5;color:var(--ink-soft)}

/* ---------- 底部：图例卡 ---------- */
.legend{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);z-index:6;
  display:flex;gap:8px;padding:10px 12px;border-radius:18px;
  background:linear-gradient(160deg,rgba(238,230,252,.94),rgba(224,212,248,.9));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 18px 44px -16px rgba(20,10,60,.6)}
.legend__item{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:12px;
  background:rgba(255,255,255,.55);border:1px solid rgba(180,150,240,.35)}
.legend__ico{width:30px;height:30px;flex:none;display:grid;place-items:center;font-size:16px;
  border-radius:9px;background:color-mix(in srgb,var(--lc) 24%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lc) 35%,transparent)}
.legend__item strong{display:block;font-size:12.5px;color:#4a3287;font-weight:700}
.legend__item small{font-size:10px;color:#7a68a8}

/* ===================== 响应式 ===================== */
@media(max-width:1180px){
  .spot{width:148px;padding:9px 11px 10px}
  .spot h3{font-size:14px}
  .progress{width:184px}
  .topbar__crumb{display:none}
}
@media(max-width:980px){
  .map{aspect-ratio:auto;min-height:0}
  .map__art{position:relative;height:auto}
  /* 小屏：气泡/卡片改为静态堆叠列表，避免重叠 */
  .pin{display:none}
  .spot,.progress,.future{position:static;width:auto;margin:8px 0;transform:none}
  .legend{position:static;transform:none;flex-wrap:wrap;justify-content:center;margin-top:10px}
  .stage__head{position:static;padding:18px 0 6px}
}