:root{--bg:#08090b;--panel:#10141a;--panel2:#161c26;--border:#1e2a3a;--accent:#d4952a;--accent2:#4cc9f0;--red:#ef4444;--gold:#fbbf24;--purple:#a78bfa;--green:#4ade80;--blue:#60a5fa;--text:#c8d4e0;--dim:#4a5c72;}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Noto Sans SC',sans-serif;}
#app{display:flex;flex-direction:column;height:100vh;}
#topbar{flex-shrink:0;background:var(--panel);border-bottom:1px solid var(--border);padding:0 14px;height:46px;display:flex;align-items:center;gap:10px;position:relative;z-index:1000;}
#topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent) 70%,transparent);opacity:.4;}
.logo{font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;color:var(--accent);letter-spacing:3px;text-transform:uppercase;white-space:nowrap;}
.logo-sub{font-size:11px;color:var(--dim);letter-spacing:1px;margin-left:8px;font-weight:400;}
.sep{width:1px;height:24px;background:var(--border);flex-shrink:0;}
.filters{display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
.chip{display:flex;align-items:center;gap:5px;padding:3px 8px;border-radius:3px;border:1px solid var(--border);background:transparent;color:var(--dim);font-size:11px;cursor:pointer;transition:all .15s;font-family:'Noto Sans SC',sans-serif;white-space:nowrap;}
.chip .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .chip img{flex-shrink:0;}
.chip.on{background:rgba(255,255,255,.05);color:var(--text);border-color:rgba(255,255,255,.2);}
.chip:hover{border-color:var(--accent);}
.ml-auto{margin-left:auto;}
.coord-display{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--dim);background:var(--bg);border:1px solid var(--border);padding:3px 8px;border-radius:3px;white-space:nowrap;min-width:160px;text-align:center;}
#mapSwitcher{display:flex;border:1px solid var(--border);border-radius:3px;overflow:hidden;}
.mswitch{padding:3px 11px;border:none;background:transparent;color:var(--dim);font-family:'Noto Sans SC',sans-serif;font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.mswitch.active{background:rgba(212,149,42,.15);color:var(--accent);}
.mswitch:hover:not(.active){background:rgba(255,255,255,.05);color:var(--text);}
#topbar.undercrown-mode::after{background:linear-gradient(90deg,transparent,#a78bfa 30%,#a78bfa 70%,transparent);}
#body{flex:1;display:flex;overflow:hidden;}
#sidebar{width:190px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.sidebar-title{padding:8px 12px;font-family:'Rajdhani',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--border);flex-shrink:0;}
#regionList{overflow-y:auto;flex:1;}
#regionList::-webkit-scrollbar{width:3px;}
#regionList::-webkit-scrollbar-thumb{background:var(--border);}
.ritem{padding:6px 12px;cursor:pointer;border-left:2px solid transparent;transition:all .12s;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(30,42,58,.5);}
.ritem:hover{background:rgba(212,149,42,.06);border-left-color:rgba(212,149,42,.4);}  .ritem>div{flex:1;min-width:0;}
.ritem.active{background:rgba(212,149,42,.1);border-left-color:var(--accent);}
.rdot{width:8px;height:8px;border-radius:2px;flex-shrink:0;}
.rname{font-size:12px;font-weight:700;}
#map{flex:1;position:relative;}
.leaflet-container{background:#060810;}
.leaflet-control-zoom{border:1px solid var(--border)!important;background:var(--panel)!important;}
.leaflet-control-zoom a{background:var(--panel)!important;color:var(--text)!important;border-color:var(--border)!important;font-size:16px!important;line-height:26px!important;}
.leaflet-control-zoom a:hover{background:var(--panel2)!important;color:var(--accent)!important;}
.leaflet-top.leaflet-right{top:auto!important;bottom:40px!important;}
/* Icon hover effect */
.dysmap-icon div{
  transition:transform .2s cubic-bezier(0.34,1.56,0.64,1),filter .15s;
  transform-origin:center bottom;
}
@keyframes icon-pop-in{
  0%{transform:scale(0) translateY(10px);opacity:0;}
  70%{transform:scale(1.15) translateY(-2px);opacity:1;}
  100%{transform:scale(1) translateY(0);opacity:1;}
}
.dysmap-icon.leaflet-zoom-animated div{
  animation:icon-pop-in .25s cubic-bezier(0.34,1.56,0.64,1) both;
}
.dysmap-icon:hover div{transform:scale(1.35) !important;filter:brightness(1.5) drop-shadow(0 0 8px rgba(255,255,255,0.6)) !important;}
.dysmap-icon div:active{transform:scale(0.95) !important;}
/* Zoom-dependent icon sizing via CSS var */
.leaflet-marker-icon.dysmap-icon{
  transition:transform .2s ease;
}
.leaflet-popup-content-wrapper{background:var(--panel)!important;border:1px solid var(--border)!important;border-radius:4px!important;box-shadow:0 4px 20px rgba(0,0,0,.6)!important;color:var(--text)!important;padding:0!important;min-width:260px;max-width:340px;}
.leaflet-popup-tip{background:var(--border)!important;}
.leaflet-popup-content{margin:0!important;}
.pi{padding:12px 14px;}
.pt{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);margin-bottom:3px;}
.pn{font-size:15px;font-weight:700;color:var(--accent);margin-bottom:2px;font-family:'Rajdhani',sans-serif;}
.pr{font-size:11px;color:var(--dim);margin-bottom:6px;}
.pc{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--accent2);margin-bottom:7px;}
.pd{font-size:12px;line-height:1.6;color:var(--text);}
.pdiv{height:1px;background:var(--border);margin:9px 0;}
.pqt{font-size:12px;font-weight:700;color:var(--gold);margin-bottom:5px;}
.ps{font-size:11px;color:var(--dim);padding:2px 0 2px 12px;position:relative;line-height:1.55;}
.ps::before{content:'▸';position:absolute;left:0;color:var(--accent2);font-size:9px;top:3px;}
.prew{margin-top:6px;font-size:11px;color:var(--gold);}
.prew::before{content:'✦ 奖励: ';}
.pbadge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:2px;margin-bottom:5px;}
.bm{background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.3);}
.bs{background:rgba(96,165,250,.15);color:#60a5fa;border:1px solid rgba(96,165,250,.3);}
.bk{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.3);}
#questPanel{width:300px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.qpanel-top{flex-shrink:0;border-bottom:1px solid var(--border);}
#questPanelTitle{padding:8px 12px 6px;font-family:'Rajdhani',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:6px;}
#questPanelTitle .qcount{margin-left:auto;font-size:10px;letter-spacing:0;text-transform:none;color:var(--accent);font-family:'Share Tech Mono',monospace;}
.search-wrap{padding:6px 10px 8px;position:relative;}
.search-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:'Noto Sans SC',sans-serif;font-size:12px;padding:6px 30px 6px 30px;outline:none;transition:border-color .15s;}
.search-input::placeholder{color:var(--dim);}
.search-input:focus{border-color:var(--accent2);}
.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:13px;pointer-events:none;}
.search-clear{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:14px;cursor:pointer;padding:2px 4px;border-radius:3px;transition:color .15s;display:none;line-height:1;background:none;border:none;}
.search-clear:hover{color:var(--text);}
.search-clear.visible{display:block;}
.search-tabs{display:flex;gap:4px;padding:0 10px 8px;flex-wrap:wrap;}
.stab{font-size:10px;padding:2px 7px;border-radius:12px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--dim);font-family:'Noto Sans SC',sans-serif;transition:all .12s;white-space:nowrap;}
.stab.active{background:rgba(212,149,42,.15);border-color:var(--accent);color:var(--accent);}
.stab:hover{border-color:rgba(212,149,42,.5);}
.no-results{padding:24px 16px;text-align:center;color:var(--dim);font-size:12px;}
.no-results .nr-icon{font-size:28px;margin-bottom:8px;opacity:.4;}
.no-results .nr-kw{color:var(--accent);font-style:italic;}
.hl-match{background:rgba(212,149,42,.3);color:var(--accent);border-radius:2px;padding:0 1px;}
#questList{overflow-y:auto;flex:1;padding:7px;}
#questList::-webkit-scrollbar{width:3px;}
#questList::-webkit-scrollbar-thumb{background:var(--border);}
.qcard{background:var(--bg);border:1px solid var(--border);border-radius:4px;margin-bottom:6px;overflow:hidden;transition:border-color .15s;}
.qcard:hover{border-color:rgba(212,149,42,.3);}
.qcard.hl{border-color:var(--accent)!important;box-shadow:0 0 12px rgba(212,149,42,.25);}
.qcard.active-quest{border-color:var(--accent2)!important;box-shadow:0 0 14px rgba(76,201,240,.2);}
.qh{padding:7px 10px;cursor:pointer;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.02);user-select:none;}
.qh:hover{background:rgba(255,255,255,.04);}
.qt{font-size:9px;padding:1px 5px;border-radius:2px;flex-shrink:0;}
.qn{font-size:12px;font-weight:700;flex:1;}
.qa{font-size:10px;color:var(--dim);flex-shrink:0;}

/* Show-on-map button */
.qmap-btn{
  font-size:10px;padding:2px 7px;border-radius:3px;cursor:pointer;
  border:1px solid var(--border);background:rgba(76,201,240,.08);
  color:var(--accent2);font-family:'Noto Sans SC',sans-serif;
  transition:all .15s;white-space:nowrap;flex-shrink:0;
  display:flex;align-items:center;gap:3px;
}
.qmap-btn:hover{background:rgba(76,201,240,.18);border-color:var(--accent2);}
.qmap-btn.active{background:rgba(76,201,240,.22);border-color:var(--accent2);color:#fff;}

.qb{padding:0 10px 9px;display:none;}
.qb.open{display:block;}
.qco{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--accent2);margin:4px 0 5px;}
.qst{font-size:11px;color:var(--dim);padding:2px 0 2px 12px;position:relative;line-height:1.5;}
.qst::before{content:'▸';position:absolute;left:0;color:var(--accent2);font-size:9px;top:3px;}
.qrw{margin-top:6px;font-size:11px;color:var(--gold);}
.qrw::before{content:'✦ 奖励: ';}

/* ── QUEST LOCATION MARKERS on map ── */
/* Numbered step markers */
.step-marker-wrap{
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:2.5px solid;
  font-family:'Rajdhani',sans-serif;font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.7);
  cursor:pointer;
}
/* Pickup marker (star shape) */
.pickup-marker{
  display:flex;align-items:center;justify-content:center;
  font-size:16px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8));
  cursor:pointer;
}
/* Quest connector line pulse */
@keyframes dash-anim{to{stroke-dashoffset:-20;}}

/* Clear button in map */
#clearQuestBtn{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  z-index:900;background:rgba(10,14,20,.92);border:1px solid var(--accent2);
  color:var(--accent2);padding:5px 14px;border-radius:4px;cursor:pointer;
  font-family:'Noto Sans SC',sans-serif;font-size:12px;display:none;
  gap:6px;align-items:center;transition:all .15s;
  box-shadow:0 2px 12px rgba(0,0,0,.5);
}
#clearQuestBtn.visible{display:flex;}
#clearQuestBtn:hover{background:rgba(76,201,240,.15);}

/* Quest map tooltip */
.quest-loc-tooltip{
  background:rgba(10,14,20,.95)!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
  border-radius:4px!important;
  font-family:'Noto Sans SC',sans-serif!important;
  font-size:11px!important;
  padding:4px 8px!important;
  box-shadow:0 2px 8px rgba(0,0,0,.5)!important;
  white-space:nowrap!important;
}
.region-label{background:transparent;border:none;box-shadow:none;}

/* ── MARKER CLUSTER ── */
.marker-cluster{
  background-clip:padding-box;
  border-radius:50%;
  transition:transform .15s, opacity .2s;
}
.marker-cluster div{
  width:34px;height:34px;margin:3px;
  border-radius:50%;
  text-align:center;
  font:bold 13px/34px 'Rajdhani','Noto Sans SC',sans-serif;
  color:#fff;
  border:2px solid rgba(255,255,255,0.25);
  box-shadow:0 2px 10px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.1);
}
.marker-cluster span{line-height:34px;}
/* Cluster pulse ring */
@keyframes cluster-pulse{
  0%{transform:scale(1);opacity:.6;}
  50%{transform:scale(1.12);opacity:.25;}
  100%{transform:scale(1);opacity:.6;}
}
/* Small cluster (< 10) */
.marker-cluster-small{background:rgba(76,201,240,0.15);animation:cluster-pulse 2.5s ease-in-out infinite;}
.marker-cluster-small div{background:linear-gradient(135deg,rgba(76,201,240,0.9),rgba(56,181,220,0.85));border-color:rgba(76,201,240,0.5);}
/* Medium cluster (10-99) */
.marker-cluster-medium{background:rgba(212,149,42,0.15);animation:cluster-pulse 2.8s ease-in-out infinite;}
.marker-cluster-medium div{background:linear-gradient(135deg,rgba(212,149,42,0.9),rgba(192,129,22,0.85));border-color:rgba(212,149,42,0.5);}
/* Large cluster (100+) */
.marker-cluster-large{background:rgba(239,68,68,0.15);animation:cluster-pulse 2.2s ease-in-out infinite;}
.marker-cluster-large div{background:linear-gradient(135deg,rgba(239,68,68,0.9),rgba(220,50,50,0.85));border-color:rgba(239,68,68,0.5);}
/* Cluster hover */
.marker-cluster:hover{animation:none!important;}
.marker-cluster:hover div{filter:brightness(1.3);transform:scale(1.08);}
/* Cluster animation - smooth zoom in/out */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow{
  transition:transform .35s cubic-bezier(0.23,1,0.32,1), opacity .3s ease-in;
}
.leaflet-cluster-anim .leaflet-marker-icon.leaflet-zoom-animated{
  will-change:transform,opacity;
}
/* Cluster hover effect */
.leaflet-marker-icon:not(.dysmap-icon):hover div{
  transform:scale(1.15)!important;
}
/* Cluster appear animation */
@keyframes cluster-appear{
  from{transform:scale(0.3);opacity:0;}
  to{transform:scale(1);opacity:1;}
}
.marker-cluster{animation:cluster-appear .2s ease-out;}

/* ── ZOOM-REACTIVE ICON SIZING ─────────────────────── */
#map.zoom-lv1 .dysmap-icon img,
#map.zoom-lv2 .dysmap-icon img{ width:18px!important;height:18px!important; }
#map.zoom-lv3 .dysmap-icon img{ width:24px!important;height:24px!important; }
#map.zoom-lv4 .dysmap-icon img{ width:30px!important;height:30px!important; }
#map.zoom-lv5 .dysmap-icon img{ width:34px!important;height:34px!important; }
#map.zoom-lv6 .dysmap-icon img,
#map.zoom-lv7 .dysmap-icon img{ width:40px!important;height:40px!important; }
#map.zoom-lv1 .dysmap-icon>div,
#map.zoom-lv2 .dysmap-icon>div{ width:18px!important;height:18px!important; }
#map.zoom-lv3 .dysmap-icon>div{ width:24px!important;height:24px!important; }
#map.zoom-lv4 .dysmap-icon>div{ width:30px!important;height:30px!important; }
#map.zoom-lv5 .dysmap-icon>div{ width:34px!important;height:34px!important; }
#map.zoom-lv6 .dysmap-icon>div,
#map.zoom-lv7 .dysmap-icon>div{ width:40px!important;height:40px!important; }
/* Leaflet compensates iconAnchor based on iconSize; for CSS-only resize we just scale the div */
#map.zoom-lv1 .leaflet-marker-icon.dysmap-icon,
#map.zoom-lv2 .leaflet-marker-icon.dysmap-icon{ transform-origin:center center; filter:opacity(.7); }
#map.zoom-lv6 .leaflet-marker-icon.dysmap-icon,
#map.zoom-lv7 .leaflet-marker-icon.dysmap-icon{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }

/* ── ICON BOUNCE ANIMATION ─────────────────────── */
@keyframes icon-bounce{
  0%  { transform:scale(1)   translateY(0); }
  30% { transform:scale(1.4) translateY(-10px); }
  60% { transform:scale(.92) translateY(-2px); }
  100%{ transform:scale(1)   translateY(0); }
}
.dysmap-icon.pop>div{ animation:icon-bounce .4s cubic-bezier(.36,.07,.19,.97); }

/* ── CLUSTER PULSE on first render ─────────────────────── */
@keyframes cluster-pop{
  0%  { transform:scale(0) rotate(-10deg); opacity:0; }
  60% { transform:scale(1.15) rotate(3deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
.leaflet-marker-icon:not(.dysmap-icon){ animation:cluster-pop .25s cubic-bezier(.34,1.56,.64,1); }

/* ══════════════════════════════════════════════════
   全屏模式
══════════════════════════════════════════════════ */
#fullscreenBtn{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border-radius:3px;
  border:1px solid var(--border);background:transparent;
  color:var(--dim);font-size:15px;cursor:pointer;
  transition:all .15s;flex-shrink:0;
}
#fullscreenBtn:hover{border-color:var(--accent2);color:var(--accent2);}

#fullscreenExitBtn{
  display:none;position:absolute;top:10px;right:10px;z-index:900;
  background:rgba(10,14,20,.92);border:1px solid var(--border);
  color:var(--dim);padding:5px 12px;border-radius:4px;cursor:pointer;
  font-family:'Noto Sans SC',sans-serif;font-size:12px;
  align-items:center;gap:5px;transition:all .15s;
  box-shadow:0 2px 12px rgba(0,0,0,.5);
}
#fullscreenExitBtn:hover{border-color:var(--accent2);color:var(--accent2);}

#app.fullscreen #topbar,
#app.fullscreen #sidebar,
#app.fullscreen #questPanel{ display:none !important; }
#app.fullscreen #body{ height:100vh; }
#app.fullscreen #fullscreenExitBtn{ display:flex; }

/* ══════════════════════════════════════════════════
   移动端 FAB 按钮（桌面默认隐藏）
══════════════════════════════════════════════════ */
.mob-fab{
  display:none;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border-radius:3px;
  border:1px solid var(--border);background:transparent;
  color:var(--dim);font-size:14px;cursor:pointer;
  transition:all .15s;flex-shrink:0;
}
.mob-fab:hover{border-color:var(--accent);color:var(--accent);}
.mob-fab.active{border-color:var(--accent);color:var(--accent);background:rgba(212,149,42,.12);}

/* 移动端半透明遮罩 */
#mobileOverlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);z-index:1499;
  backdrop-filter:blur(2px);
}
#mobileOverlay.show{ display:block; }

/* ══════════════════════════════════════════════════
   响应式：≤ 768px（平板竖屏 / 手机横屏）
══════════════════════════════════════════════════ */
@media (max-width:768px){
  /* 顶栏：精简 */
  .logo-sub{ display:none; }
  .sep{ display:none; }
  #coordDisplay{ display:none; }
  .mob-fab{ display:flex; }

  /* 过滤芯片：顶栏下方独立一行，横向可滚动 */
  #topbar{ flex-wrap:wrap;height:auto;padding:6px 10px;gap:6px; }
  #filterBar{
    order:10;width:100%;
    overflow-x:auto;flex-wrap:nowrap;
    padding:2px 0 4px;
    scrollbar-width:none;
  }
  #filterBar::-webkit-scrollbar{ display:none; }

  /* 地图占满主内容区 */
  #body{ position:relative; }
  #map{ flex:1;width:100%; }

  /* 侧栏：固定左侧抽屉 */
  #sidebar{
    position:fixed;left:-200px;top:0;height:100%;
    width:200px;z-index:1500;
    transition:left .25s ease;
    border-right:1px solid var(--border);
    box-shadow:4px 0 20px rgba(0,0,0,.5);
  }
  #sidebar.open{ left:0; }

  /* 任务面板：固定右侧抽屉 */
  #questPanel{
    position:fixed;right:-310px;top:0;height:100%;
    width:310px;z-index:1500;
    transition:right .25s ease;
    border-left:1px solid var(--border);
    box-shadow:-4px 0 20px rgba(0,0,0,.5);
  }
  #questPanel.open{ right:0; }

  /* 弹窗宽度适配小屏 */
  .leaflet-popup-content-wrapper{ min-width:220px;max-width:280px; }
}

/* ══════════════════════════════════════════════════
   响应式：≤ 480px（手机竖屏）
══════════════════════════════════════════════════ */
@media (max-width:480px){
  #topbar{ padding:5px 8px;gap:5px; }
  .logo{ font-size:16px;letter-spacing:2px; }

  /* 地图切换器：横向可滚动，不换行 */
  #mapSwitcher{
    overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;max-width:calc(100vw - 140px);
  }
  #mapSwitcher::-webkit-scrollbar{ display:none; }
  .mswitch{ padding:3px 8px;font-size:10px; }

  /* 更紧凑的聚合按钮 */
  #clusterToggle{ padding:3px 7px;font-size:10px; }
  #clusterLabel{ display:none; }

  /* 任务面板全宽 */
  #questPanel{ width:100%;right:-100%; }
  #questPanel.open{ right:0; }

  /* 侧栏全宽 */
  #sidebar{ width:220px;left:-220px; }

  /* 弹窗适配小屏 */
  .leaflet-popup-content-wrapper{ min-width:180px;max-width:calc(100vw - 40px); }
}