/* ============================================================
   老槐树玄事铺 · HUD 指挥中心风
   ============================================================ */
[hidden]{display:none !important}

:root{
  --bg:#0a0705;
  --bg2:#0d0906;
  --panel:rgba(20,14,9,.72);
  --panel-solid:#140e09;
  --accent:#e0a63f;
  --accent-dim:#b07d24;
  --cyan:#5b9bd5;
  --violet:#a892fe;
  --red:#e2543a;
  --gold:#ffcf5c;
  --text:#f0e6d2;
  --dim:#9a8570;
  --line:rgba(224,166,63,.16);
  --line2:rgba(224,166,63,.45);
  --mono:"Share Tech Mono","Consolas","Courier New",monospace;
  --disp:"ZCOOL QingKe HuangYou","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);font-family:var(--sans);
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono);letter-spacing:.5px}

/* 全局扫描线 + 暗角 */
#scanlines{
  position:fixed;inset:0;z-index:9;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.5;
}
#vig{position:fixed;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(circle at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%)}
/* CRT 扫描纹理：登录与地图各一层 */
#login::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
#mapWrap::after{content:"";position:absolute;inset:0;z-index:850;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
#fxCanvas{position:fixed;inset:0;z-index:2;pointer-events:none}

/* ============================================================ 登录 */
#login{
  position:fixed;inset:0;z-index:1000;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(224,166,63,.10), transparent 62%),
    radial-gradient(700px 480px at 80% 110%, rgba(91,155,213,.12), transparent 60%),
    radial-gradient(circle at 50% 50%, #0d0906 0%, #040302 72%);
}
.login-grid{
  position:absolute;inset:-2px;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(224,166,63,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,166,63,.07) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
  animation:gridPulse 6s ease-in-out infinite;
}
@keyframes gridPulse{0%,100%{opacity:.32}50%{opacity:.6}}
.login-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.o1{width:520px;height:520px;left:-8%;top:-6%;background:rgba(224,166,63,.20);animation:float1 18s ease-in-out infinite}
.o2{width:560px;height:560px;right:-10%;bottom:-12%;background:rgba(91,155,213,.18);animation:float1 24s ease-in-out infinite reverse}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-40px) scale(1.15)}}

.login-frame{
  position:relative;z-index:5;width:min(560px,92vw);padding:40px 40px 30px;
  background:linear-gradient(180deg, rgba(9,18,22,.82), rgba(5,10,13,.92));
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(224,166,63,.05), 0 30px 90px rgba(0,0,0,.75), inset 0 0 60px rgba(224,166,63,.04);
  animation:frameIn .8s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes frameIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* 边角括号 */
.fc,.mc,.dc{position:absolute;width:16px;height:16px;border:1px solid var(--accent);opacity:.9}
.fc.tl,.mc.tl,.dc.tl{left:-1px;top:-1px;border-right:0;border-bottom:0}
.fc.tr,.mc.tr,.dc.tr{right:-1px;top:-1px;border-left:0;border-bottom:0}
.fc.bl,.mc.bl,.dc.bl{left:-1px;bottom:-1px;border-right:0;border-top:0}
.fc.br,.mc.br,.dc.br{right:-1px;bottom:-1px;border-left:0;border-top:0}

.login-classify{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--red);
  border:1px solid rgba(226,84,58,.4);background:rgba(226,84,58,.08);
  padding:4px 12px;border-radius:2px;margin-bottom:18px;
}
.rec{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1.1s steps(2) infinite;display:inline-block}
@keyframes blink{50%{opacity:.15}}

.login-logo{text-align:center;margin-bottom:4px}
.login-logo .glyph{font-size:40px;color:var(--accent);text-shadow:0 0 22px rgba(224,166,63,.8),0 0 50px rgba(224,166,63,.4);display:inline-block;animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.login-title{
  position:relative;text-align:center;font-family:var(--disp);font-weight:400;
  font-size:clamp(38px,9vw,58px);letter-spacing:6px;color:#eafff2;
  text-shadow:0 0 18px rgba(224,166,63,.55),0 0 44px rgba(224,166,63,.28);
  animation:glitch 5s infinite;
}
@keyframes glitch{
  0%,92%,100%{transform:none}
  93%{transform:translate(2px,-2px) skewX(-1deg)}
  94%{transform:translate(-2px,1px)}
  95%{transform:translate(1px,2px) skewX(1deg)}
}
.login-en{text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:5px;color:var(--cyan);margin-top:6px;opacity:.85}
.login-cn{text-align:center;font-family:var(--serif);font-size:13px;letter-spacing:8px;color:var(--dim);margin:4px 0 20px}

/* 终端 */
.login-terminal{border:1px solid var(--line);background:rgba(3,8,10,.7);border-radius:3px;margin-bottom:22px;overflow:hidden}
.term-bar{display:flex;align-items:center;gap:6px;padding:7px 11px;border-bottom:1px solid var(--line);background:rgba(224,166,63,.04)}
.term-bar i{width:8px;height:8px;border-radius:50%;background:var(--dim);opacity:.6}
.term-bar i:first-child{background:var(--red)}
.term-bar span{margin-left:8px;font-size:11px;color:var(--dim)}
.boot-log{padding:13px 15px;font-size:12.5px;line-height:1.9;color:var(--accent);white-space:pre-wrap;min-height:104px;letter-spacing:.5px}
.boot-log .ok{color:var(--cyan)}
.boot-log .warn{color:var(--gold)}
.cursor{display:inline-block;width:8px;height:14px;background:var(--accent);vertical-align:-2px;animation:blink .8s steps(2) infinite}

/* 接入按钮 */
.enter-btn{
  display:flex;align-items:center;justify-content:center;gap:14px;width:100%;
  font-family:var(--disp);font-size:22px;letter-spacing:6px;color:#04130c;
  padding:15px;cursor:pointer;border:none;position:relative;overflow:hidden;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  box-shadow:0 0 26px rgba(224,166,63,.4);transition:.25s;
}
.enter-btn .bk{width:16px;height:1px;background:rgba(4,19,12,.6);position:relative}
.enter-btn .bk::before,.enter-btn .bk::after{content:"";position:absolute;width:1px;height:6px;background:rgba(4,19,12,.6);top:-2.5px}
.enter-btn .bk::before{left:0}.enter-btn .bk::after{right:0}
.enter-btn:hover{box-shadow:0 0 40px rgba(224,166,63,.75);transform:translateY(-2px)}
.enter-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg)}
.enter-btn:hover::after{animation:sheen .8s ease}
@keyframes sheen{from{left:-60%}to{left:130%}}
.login-note{text-align:center;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:1px;color:#3f524a}

/* ============================================================ 启动过场 */
#boot{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,#0d0906,#040302 80%)}
.boot-inner{text-align:center}
.boot-grant{font-family:var(--mono);font-size:clamp(26px,7vw,48px);letter-spacing:8px;color:var(--accent);
  text-shadow:0 0 24px rgba(224,166,63,.8);animation:grantPulse .9s ease both}
@keyframes grantPulse{0%{opacity:0;letter-spacing:26px;filter:blur(6px)}100%{opacity:1;letter-spacing:8px;filter:none}}
.boot-line{margin-top:14px;font-size:13px;color:var(--dim);letter-spacing:2px}
.boot-bar{width:min(320px,70vw);height:2px;margin:22px auto 0;background:rgba(224,166,63,.14);overflow:hidden;border-radius:2px}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-dim),var(--cyan));box-shadow:0 0 12px var(--accent);animation:load 1.4s cubic-bezier(.4,.1,.2,1) forwards}
@keyframes load{to{width:100%}}

/* ============================================================ 顶栏 */
#app{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;animation:fade .5s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
#topbar{
  height:60px;flex:0 0 60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;z-index:30;
  background:linear-gradient(180deg,rgba(8,15,19,.96),rgba(5,10,13,.92));
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(224,166,63,.08),0 8px 26px rgba(0,0,0,.5);
}
.brand{display:flex;align-items:center;gap:11px}
.brand-glyph{font-size:26px;color:var(--accent);text-shadow:0 0 16px rgba(224,166,63,.9);animation:spin 14s linear infinite}
.brand-name{font-family:var(--disp);font-size:20px;letter-spacing:3px;color:#eafff2;line-height:1.1}
.brand-sub{font-size:10px;letter-spacing:3px;color:var(--cyan);opacity:.8}
.topbar-mid{display:flex;gap:16px;align-items:center}
.stat{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:6px}
.stat b{color:var(--accent);font-weight:400}
.stat b.g{color:var(--gold)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.live{background:#46b39a;box-shadow:0 0 10px #46b39a;animation:blink 1.6s infinite}
.topbar-right{display:flex;align-items:center;gap:10px}
.clock{font-size:14px;color:var(--accent);letter-spacing:1px}
.chip{
  font-family:var(--mono);font-size:12px;padding:5px 11px;letter-spacing:1px;
  color:var(--accent);border:1px solid var(--line2);background:rgba(224,166,63,.07);
  border-radius:2px;box-shadow:inset 0 0 14px rgba(224,166,63,.09);
}
.chip.gold{color:var(--gold);border-color:rgba(255,207,92,.4);background:rgba(255,207,92,.07);box-shadow:inset 0 0 14px rgba(255,207,92,.09)}
.hud-btn{
  font-family:var(--mono);font-size:13px;letter-spacing:2px;color:var(--accent);cursor:pointer;
  padding:7px 15px;background:rgba(224,166,63,.06);border:1px solid var(--line2);
  border-radius:2px;position:relative;transition:.2s;
}
.hud-btn:hover{background:rgba(224,166,63,.16);box-shadow:0 0 18px rgba(224,166,63,.35);color:#eafff2}

/* ============================================================ 布局 */
.layout{flex:1;display:flex;min-height:0}
#sidebar{
  width:312px;flex:0 0 312px;overflow-y:auto;padding:12px;
  display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(180deg,rgba(7,13,17,.95),rgba(4,8,11,.98));
  border-right:1px solid var(--line);
}
#sidebar::-webkit-scrollbar{width:5px}
#sidebar::-webkit-scrollbar-thumb{background:rgba(224,166,63,.3)}
#mapWrap{flex:1;position:relative;min-width:0;overflow:hidden;background:#04080a}

/* 面板 */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:13px;
  box-shadow:inset 0 0 30px rgba(224,166,63,.03);transition:border-color .25s;
}
.panel:hover{border-color:var(--line2)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;font-size:11px;letter-spacing:1px;color:var(--accent)}
.panel-head .rec{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.hint{font-size:11px;letter-spacing:.5px;color:var(--dim);line-height:1.7;margin-bottom:10px}

/* narrator */
.narrator{display:flex;gap:12px}
.narrator-glyph{font-size:26px;line-height:1;filter:drop-shadow(0 0 10px rgba(224,166,63,.6));animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.narrator-text{font-size:13.5px;line-height:2;color:var(--text);text-align:justify;min-height:78px;transition:opacity .3s}

/* 时辰 */
.shichen-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px}
.shichen-picker button{
  font-family:var(--mono);font-size:14px;padding:8px 0;cursor:pointer;color:var(--dim);
  background:rgba(224,166,63,.03);border:1px solid var(--line);border-radius:2px;transition:.15s;
}
.shichen-picker button:hover{color:var(--accent);border-color:var(--line2)}
.shichen-picker button.active{
  color:#04130c;background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 16px rgba(224,166,63,.6);font-weight:bold;
}
.mini-btn{
  width:100%;font-size:12px;padding:8px;cursor:pointer;color:var(--dim);
  background:transparent;border:1px dashed rgba(224,166,63,.28);border-radius:2px;transition:.18s;
}
.mini-btn:hover{color:var(--accent);border-color:var(--accent)}

/* 方术 */
.fangshu-row{display:flex;gap:10px}
.fangshu-btn{flex:1;padding:11px 0;font-size:14px}

/* 地市 */
.city-nav{display:flex;flex-wrap:wrap;gap:7px}
.city-nav button{
  font-family:var(--mono);font-size:12px;padding:6px 11px;cursor:pointer;color:var(--dim);
  background:rgba(224,166,63,.03);border:1px solid var(--line);border-radius:2px;transition:.15s;
}
.city-nav button:hover{color:var(--accent);border-color:var(--line2);box-shadow:0 0 10px rgba(224,166,63,.25)}

/* ============================================================ 地图 */
#map{position:absolute;inset:0;background:#04080a}
/* 高德瓦片 → 暗色战术风 */
.leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.86) contrast(1.06) sepia(.32) saturate(1.1)}
.leaflet-control-attribution{background:rgba(5,9,12,.7)!important;color:#3f524a!important}
.leaflet-control-attribution a{color:#5f7a70!important}

.map-hud{position:absolute;inset:0;z-index:900;pointer-events:none;
  background:
    radial-gradient(circle at 50% 45%,transparent 55%,rgba(3,2,1,.5) 100%),
    linear-gradient(rgba(224,166,63,.05),rgba(224,166,63,.05))}
.mc{position:absolute;width:22px;height:22px;border:1px solid rgba(224,166,63,.55)}
.mc.tl{left:14px;top:14px;border-right:0;border-bottom:0}
.mc.tr{right:14px;top:14px;border-left:0;border-bottom:0}
.mc.bl{left:14px;bottom:14px;border-right:0;border-top:0}
.mc.br{right:14px;bottom:14px;border-left:0;border-top:0}
.map-tag{position:absolute;left:44px;top:18px;font-size:11px;letter-spacing:2px;color:var(--accent);opacity:.8;text-shadow:0 0 10px rgba(224,166,63,.5)}
.coord{position:absolute;left:44px;bottom:20px;font-size:11px;letter-spacing:1px;color:var(--cyan);opacity:.8}
.scan{position:absolute;left:0;right:0;height:2px;top:0;background:linear-gradient(90deg,transparent,rgba(224,166,63,.6),transparent);box-shadow:0 0 14px rgba(224,166,63,.6);animation:scanmove 5.5s linear infinite}
@keyframes scanmove{0%{top:4%}100%{top:96%}}
/* 雷达 */
.radar{position:absolute;right:44px;bottom:44px;width:74px;height:74px;border:1px solid rgba(224,166,63,.35);border-radius:50%;opacity:.75}
.radar-ring{position:absolute;inset:14px;border:1px solid rgba(224,166,63,.25);border-radius:50%}
.radar-sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(224,166,63,.42),transparent 32%);animation:sweep 3.4s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}

.map-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:950;
  font-size:12px;letter-spacing:2px;color:var(--accent);background:rgba(3,8,10,.82);
  padding:10px 20px;border:1px solid var(--line2);border-radius:2px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.map-legend-lite{display:none;
  position:absolute;right:44px;bottom:130px;z-index:950;flex-direction:column;gap:6px;
  font-size:11px;color:var(--dim);background:rgba(4,8,10,.6);padding:8px 10px;border:1px solid var(--line)}
.map-legend-lite .ld{display:inline-block;width:9px;height:9px;margin-right:6px;transform:rotate(45deg)}
.ld.xiong{background:var(--red);box-shadow:0 0 8px var(--red)}
.ld.ping{background:#46b39a;box-shadow:0 0 8px #46b39a}
.ld.ji{background:var(--gold);box-shadow:0 0 8px var(--gold)}

/* 标记：瞄准菱形 + 脉冲环 */
.xs-marker{position:relative;cursor:pointer}
.rt-core{position:absolute;left:5px;top:5px;width:12px;height:12px;transform:rotate(45deg);
  background:var(--c);box-shadow:0 0 12px var(--c),0 0 3px #000}
.rt-ring{position:absolute;left:0;top:0;width:22px;height:22px;border:1px solid var(--c);opacity:.7;
  animation:ping 2.1s ease-out infinite;border-radius:2px}
@keyframes ping{0%{transform:scale(.4);opacity:.85}100%{transform:scale(1.9);opacity:0}}
.xs-marker:hover .rt-core{transform:rotate(45deg) scale(1.35)}
.rt-label{position:absolute;left:27px;top:0;font-family:var(--mono);font-size:11px;white-space:nowrap;
  color:#dff7ea;text-shadow:0 0 6px #000,0 0 2px #000}
.leaflet-popup-content-wrapper{background:rgba(5,12,15,.97);color:var(--text);border:1px solid var(--line2);border-radius:2px}
.leaflet-popup-tip{background:rgba(5,12,15,.97)}
.xs-popup-title{font-family:var(--disp);color:var(--accent);font-size:15px;margin-bottom:4px}
.xs-popup-sub{font-family:var(--mono);font-size:11px;color:var(--dim)}

/* ============================================================ 玄事录 */
.drawer{
  position:fixed;top:60px;right:0;bottom:0;width:356px;z-index:1200;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(7,13,17,.98),rgba(3,7,10,.99));
  border-left:1px solid var(--line2);box-shadow:-16px 0 50px rgba(0,0,0,.7);
  animation:slideR .3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes slideR{from{transform:translateX(100%)}to{transform:none}}
.drawer-head{padding:16px;border-bottom:1px solid var(--line);position:relative}
.drawer-title{font-size:13px;letter-spacing:2px;color:var(--accent);margin-bottom:12px}
.filter-row{display:flex;gap:8px}
.filter-btn{font-size:11px;padding:6px 14px;cursor:pointer;color:var(--dim);background:rgba(224,166,63,.04);border:1px solid var(--line);border-radius:2px;transition:.15s}
.filter-btn:hover{color:var(--accent)}
.filter-btn.active{color:#04130c;background:var(--accent);border-color:var(--accent);box-shadow:0 0 14px rgba(224,166,63,.5)}
.drawer-close{position:absolute;top:14px;right:15px;background:none;border:none;color:var(--dim);font-size:17px;cursor:pointer;transition:.2s}
.drawer-close:hover{color:var(--red);transform:rotate(90deg)}
.lu-list{list-style:none;overflow-y:auto;flex:1;padding:9px}
.lu-list::-webkit-scrollbar{width:5px}
.lu-list::-webkit-scrollbar-thumb{background:rgba(224,166,63,.3)}
.lu-item{display:flex;align-items:center;gap:11px;padding:11px 12px;margin-bottom:8px;cursor:pointer;
  border:1px solid var(--line);background:rgba(224,166,63,.02);transition:.18s;position:relative}
.lu-item:hover{border-color:var(--line2);background:rgba(224,166,63,.07);transform:translateX(-3px)}
.lu-dot{width:9px;height:9px;transform:rotate(45deg);flex:0 0 9px}
.lu-main{flex:1;min-width:0}
.lu-title{font-family:var(--serif);font-size:14.5px;color:var(--text)}
.lu-sub{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:3px}
.lu-seal{font-family:var(--mono);font-size:10px;padding:2px 7px;border:1px solid transparent}
.lu-seal.on{color:var(--accent);border-color:rgba(224,166,63,.4);background:rgba(224,166,63,.08)}
.lu-seal.off{color:#5a6b61;border-color:rgba(90,107,97,.4)}

/* ============================================================ 弹窗 */
.modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(2,5,7,.72);backdrop-filter:blur(3px);animation:fade .2s both}
.modal-card{position:relative;max-width:560px;width:100%;max-height:86vh;overflow-y:auto;padding:30px 30px 26px;
  background:linear-gradient(180deg,rgba(8,16,20,.98),rgba(4,8,11,.99));
  border:1px solid var(--line2);border-radius:2px;
  box-shadow:0 30px 90px rgba(0,0,0,.8),inset 0 0 60px rgba(224,166,63,.04);
  animation:modalIn .3s cubic-bezier(.18,.9,.3,1) both;
}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.modal-card::-webkit-scrollbar{width:5px}
.modal-card::-webkit-scrollbar-thumb{background:rgba(224,166,63,.3)}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--dim);font-size:17px;cursor:pointer;transition:.2s}
.modal-close:hover{color:var(--red);transform:rotate(90deg)}

.dossier-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;color:var(--red);margin-bottom:16px;padding-right:26px}
.detail-pins{display:flex;gap:8px;margin-bottom:10px}
.pin-tag{font-family:var(--mono);font-size:11px;padding:3px 10px;border:1px solid}
.pin-凶{color:var(--red);border-color:rgba(226,84,58,.5);background:rgba(226,84,58,.08)}
.pin-平{color:#46b39a;border-color:rgba(70,179,154,.5);background:rgba(70,179,154,.08)}
.pin-吉{color:var(--gold);border-color:rgba(255,207,92,.5);background:rgba(255,207,92,.08)}
.detail-title{font-family:var(--disp);font-size:26px;letter-spacing:2px;color:#eafff2;text-shadow:0 0 16px rgba(224,166,63,.35)}
.dossier-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:16px 0;background:var(--line);border:1px solid var(--line)}
.dg-cell{background:var(--panel-solid);padding:9px 12px}
.dg-k{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:1px}
.dg-v{font-family:var(--mono);font-size:13px;color:var(--accent);margin-top:3px}
.detail-body{font-family:var(--serif);font-size:15px;line-height:2.05;color:var(--text);text-align:justify;white-space:pre-line;margin:14px 0}
.detail-item{font-size:12px;line-height:1.9;color:var(--gold);padding:12px 14px;border:1px solid rgba(255,207,92,.28);background:rgba(255,207,92,.05)}
.detail-seal{margin-top:15px;font-size:11px;line-height:1.9;color:var(--dim);letter-spacing:.5px}
.detail-seal.warn{color:var(--red)}

/* 抽签 */
.qian-card{text-align:center}
.qian-head{font-size:11px;letter-spacing:2px;color:var(--red);margin-bottom:16px}
.qian-level{font-family:var(--disp);font-size:26px;letter-spacing:6px;color:var(--gold);margin:6px 0 16px;text-shadow:0 0 18px rgba(255,207,92,.5)}
.qian-text{font-family:var(--serif);font-size:16px;line-height:2.1;color:var(--text);margin-bottom:22px;min-height:60px}

/* ============================================================ 响应式 */
@media (max-width:840px){
  .layout{flex-direction:column}
  #sidebar{width:auto;flex:0 0 auto;max-height:38vh;border-right:none;border-bottom:1px solid var(--line);
    flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:10px}
  #sidebar .panel{flex:0 0 240px;min-width:240px}
  .drawer{width:92%}
  .topbar-mid{display:none}
  .brand-name{font-size:16px;letter-spacing:1px}
  .clock{display:none}
  .login-frame{padding:30px 22px 24px}
  .radar{width:56px;height:56px;right:44px;bottom:40px}
  #topbar{padding:0 10px;gap:8px;overflow:hidden}
  .brand{gap:7px;min-width:0;flex:0 1 auto}
  .brand-glyph{font-size:19px}
  .brand-name{font-size:15px;letter-spacing:1px;white-space:nowrap}
  .brand-sub{display:none}
  #jieqiBadge{display:none}
  .topbar-right{gap:6px;flex:0 0 auto}
  .topbar-right .chip{font-size:10px;padding:4px 7px;letter-spacing:.5px}
  .topbar-right .hud-btn{font-size:11px;padding:6px 9px;letter-spacing:1px}
}
/* ============================================================ 认证表单 */
.auth-tabs{display:flex;gap:8px;margin:14px 0 12px}
.auth-tab{flex:1;font-family:var(--mono);font-size:13px;letter-spacing:2px;padding:9px 0;cursor:pointer;
  color:var(--dim);background:rgba(224,166,63,.04);border:1px solid var(--line);border-radius:2px;transition:.18s}
.auth-tab:hover{color:var(--accent)}
.auth-tab.active{color:#1a1206;background:var(--accent);border-color:var(--accent);box-shadow:0 0 16px rgba(224,166,63,.5)}
.auth-form{display:flex;flex-direction:column;gap:10px}
.af{display:flex;flex-direction:column;gap:5px}
.af-k{font-size:10px;letter-spacing:1px;color:var(--dim)}
.af input{width:100%;padding:10px 12px;font-family:var(--mono);font-size:14px;color:var(--text);
  background:rgba(3,2,1,.58);border:1px solid var(--line);border-radius:2px;outline:none;transition:.18s}
.af input:focus{border-color:var(--accent);box-shadow:0 0 14px rgba(224,166,63,.25)}
.af input::placeholder{color:#5f5343}
.auth-msg{min-height:16px;font-size:12px;letter-spacing:.5px;color:var(--dim)}
.auth-msg.err{color:var(--red)}
.auth-msg.ok{color:#46b39a}
.auth-links{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.link-btn{background:none;border:none;color:var(--dim);font-size:12px;cursor:pointer;letter-spacing:1px;transition:.15s}
.link-btn:hover{color:var(--accent)}
.dot-sep{color:#4a3f31}
.cfg-banner{margin-top:12px;font-size:11px;line-height:1.7;color:#e0b465;text-align:left;
  background:rgba(224,166,63,.07);border:1px solid rgba(224,166,63,.3);border-radius:2px;padding:8px 10px}
.collect-btn{width:100%;margin-top:16px;font-size:14px;letter-spacing:2px;padding:11px;border-radius:2px;cursor:pointer;
  color:#1a1206;background:linear-gradient(90deg,var(--accent-dim),var(--accent));border:none;
  box-shadow:0 0 20px rgba(224,166,63,.35);transition:.2s}
.collect-btn:hover{box-shadow:0 0 30px rgba(224,166,63,.6)}
.collect-btn.on{background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none}
.collect-btn:disabled{opacity:.6;cursor:wait;box-shadow:none}

/* ============================================================ 社区 · 事件 / 论坛 / 发布 */
.cm-drawer{width:392px}
.cm-tabs .cm-tab b{font-weight:400;color:var(--accent);margin-left:4px}
.cm-tab.active b{color:#1a1206}
.cm-body{flex:1;overflow-y:auto;padding:12px;display:block}
.cm-body::-webkit-scrollbar{width:5px}
.cm-body::-webkit-scrollbar-thumb{background:rgba(224,166,63,.3)}

.cm-form{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;
  padding:12px;border:1px solid var(--line);background:rgba(224,166,63,.035);border-radius:2px}
.cm-input{width:100%;padding:9px 11px;font-family:var(--mono);font-size:13px;color:var(--text);
  background:rgba(3,2,1,.6);border:1px solid var(--line);border-radius:2px;outline:none;transition:.18s;resize:vertical}
.cm-input:focus{border-color:var(--accent);box-shadow:0 0 12px rgba(224,166,63,.22)}
.cm-input::placeholder{color:#5f5343}
select.cm-input{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--accent-dim) 50%),
  linear-gradient(135deg,var(--accent-dim) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cm-row{display:flex;gap:8px;align-items:center}
.cm-row .cm-input{flex:1;min-width:0}
.cm-row .hud-btn,.cm-row .mini-btn{white-space:nowrap;flex:0 0 auto;width:auto}
.cm-note{font-size:10.5px;line-height:1.75;color:var(--dim);letter-spacing:.3px}
.cm-loc{color:#d9b877;word-break:break-word}
.cm-empty{padding:26px 14px;text-align:center;font-size:12px;color:var(--dim);
  border:1px dashed var(--line);border-radius:2px;letter-spacing:1px}
.cm-mode{margin-bottom:10px}
.cm-live,.cm-warn{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.4px;
  padding:4px 9px;border-radius:2px;line-height:1.5}
.cm-live{color:#7fd8c0;background:rgba(70,179,154,.1);border:1px solid rgba(70,179,154,.32)}
.cm-warn{color:#e0b465;background:rgba(224,166,63,.08);border:1px solid rgba(224,166,63,.3)}
.cm-warn::before{content:"!";font-weight:700}

/* --- 事件卡 --- */
.ev-card{position:relative;padding:12px 13px;margin-bottom:10px;border:1px solid var(--line);border-radius:2px;
  background:linear-gradient(180deg,rgba(224,166,63,.055),rgba(224,166,63,.015));transition:.18s}
.ev-card:hover{border-color:var(--line2);box-shadow:0 0 18px rgba(224,166,63,.12)}
.ev-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);opacity:.55}
.ev-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.ev-title{font-size:14px;line-height:1.4;color:var(--text)}
.ev-st{flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:1px;padding:2px 7px;
  border:1px solid currentColor;border-radius:2px;opacity:.95}
.st-open{color:var(--gold)}
.st-accepted{color:var(--cyan)}
.st-done{color:#46b39a}
.st-abandoned{color:#7a6a58}
.ev-desc{font-size:12.5px;line-height:1.75;color:#cbbda6;margin-bottom:8px;word-break:break-word}
.ev-meta{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--dim);
  letter-spacing:.4px;margin-bottom:3px}
.ev-meta span:first-child{color:#d9b877}
.ev-contact{margin-top:7px;padding-top:7px;border-top:1px dashed rgba(224,166,63,.18);
  font-size:11px;color:var(--dim);word-break:break-all}
.ev-actions{display:flex;gap:8px;margin-top:10px}
.ev-actions .hud-btn,.ev-actions .mini-btn{flex:1;padding:7px 0;font-size:12px}

/* --- 论坛 --- */
.cm-list{display:flex;flex-direction:column;gap:10px}
.po-card{padding:12px 13px;border:1px solid var(--line);border-radius:2px;background:rgba(224,166,63,.03)}
.po-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.po-title{font-size:14px;color:var(--accent);line-height:1.4}
.po-author{flex:0 0 auto;font-size:10px;color:var(--dim);letter-spacing:.3px}
.po-body{font-size:12.5px;line-height:1.8;color:#cbbda6;word-break:break-word}
.po-xian{margin-top:6px;font-size:10.5px;color:var(--cyan);opacity:.85}
.po-comments{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.po-cm{font-size:11.5px;line-height:1.6;color:#b8a992;padding-left:9px;border-left:1px solid rgba(224,166,63,.25);
  word-break:break-word}
.po-cm span{color:var(--accent);margin-right:4px;font-size:10px}
.po-card .cm-row{margin-top:9px}
.cm-cm-input{font-size:11.5px;padding:6px 9px;min-width:0;border-color:rgba(224,166,63,.28)}
.cm-cm-btn{padding:6px 12px;font-size:11px}

/* ============================================================ 轻提示 */
.toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:3000;max-width:min(560px,88vw);
  padding:11px 20px;font-size:12.5px;letter-spacing:1px;line-height:1.6;text-align:center;
  color:#1a1206;background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  border-radius:2px;box-shadow:0 6px 30px rgba(0,0,0,.7),0 0 24px rgba(224,166,63,.35);
  animation:toastIn .22s cubic-bezier(.2,.8,.2,1) both}
.toast.warn{color:#ffe7e2;background:linear-gradient(90deg,#8c2e1e,var(--red));box-shadow:0 6px 30px rgba(0,0,0,.7),0 0 24px rgba(226,84,58,.4)}
.toast.ok{color:#d8fff0;background:linear-gradient(90deg,#1f6b58,#46b39a);box-shadow:0 6px 30px rgba(0,0,0,.7),0 0 24px rgba(70,179,154,.35)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* 方术按钮：次数用尽 */
.fangshu-btn.used{color:#7a6a58;border-color:rgba(122,106,88,.4);background:rgba(122,106,88,.08);box-shadow:none}

@media (max-width:840px){
  .cm-drawer{width:92%}
  .cm-body{padding:10px}
  .toast{bottom:96px;font-size:12px;padding:10px 15px}
}


@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;animation-iteration-count:1 !important}
}

/* ============================================================ 图片上传 / 展示 */
.cm-imgs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cm-thumbs{display:flex;flex-wrap:wrap;gap:7px}
.cm-thumb{position:relative;width:58px;height:58px;border:1px solid var(--line2);border-radius:2px;overflow:hidden;background:#0b0704}
.cm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cm-thumb-x{position:absolute;top:0;right:0;width:16px;height:16px;line-height:16px;text-align:center;
  font-style:normal;font-size:10px;color:#fff;background:rgba(226,84,58,.9);cursor:pointer}
.cm-thumb-load{display:flex;align-items:center;justify-content:center;border-style:dashed}
.spin{width:16px;height:16px;border:2px solid rgba(224,166,63,.25);border-top-color:var(--accent);
  border-radius:50%;display:block;animation:spin .8s linear infinite}
.cm-img-btn{font-size:11px}
.cm-file{position:absolute;left:-9999px}

.cm-imgs-view{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.cm-imgs-view img{width:78px;height:78px;object-fit:cover;border:1px solid var(--line);border-radius:2px;
  cursor:zoom-in;transition:.18s}
.cm-imgs-view img:hover{border-color:var(--accent);box-shadow:0 0 14px rgba(224,166,63,.3)}

.img-view{position:fixed;inset:0;z-index:3500;background:rgba(4,2,1,.93);display:flex;
  align-items:center;justify-content:center;cursor:zoom-out;animation:fade .2s both}
.img-view img{max-width:92vw;max-height:88vh;border:1px solid var(--line2);box-shadow:0 0 60px rgba(0,0,0,.9)}

/* ============================================================ 事件评论 */
.ev-cbar{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(224,166,63,.18)}
.ev-cbar .mini-btn{font-size:11px;padding:5px 10px}
.ev-cbox{margin-top:9px;display:flex;flex-direction:column;gap:8px}
.evc-list{display:flex;flex-direction:column;gap:8px}
.evc-item{padding:8px 10px;border-left:2px solid rgba(224,166,63,.3);background:rgba(224,166,63,.03)}
.evc-top{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-bottom:4px}
.evc-top span:first-child{color:var(--accent)}
.evc-text{font-size:12.5px;line-height:1.7;color:#cbbda6;word-break:break-word}
.evc-img{max-width:100%;max-height:180px;object-fit:cover;margin-top:6px;border:1px solid var(--line);cursor:zoom-in}
.cm-empty.mini{padding:12px;font-size:11px}

/* ============================================================ 悬赏 · 福袋 */
.q-bar{margin-bottom:10px}
.q-bar .hud-btn{flex:1}
.q-pub{margin-bottom:16px}
.q-kinds{gap:6px}
.q-kinds .mini-btn{flex:1;font-size:11px}
.q-kinds .mini-btn.active{color:#1a1206;background:var(--gold);border-color:var(--gold);box-shadow:0 0 14px rgba(255,207,92,.4)}

.q-card{position:relative;padding:12px 13px;margin-bottom:10px;border:1px solid var(--line);border-radius:2px;
  background:linear-gradient(180deg,rgba(224,166,63,.05),rgba(224,166,63,.012));transition:.18s}
.q-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);opacity:.6}
.q-card.k-shourong::before{background:var(--violet);opacity:.7}
.q-card.k-bounty::before{background:var(--cyan);opacity:.7}
.q-card.q-closed{opacity:.62}
.q-card:hover{border-color:var(--line2)}
.q-top{display:flex;align-items:flex-start;gap:7px;margin-bottom:7px}
.q-kind{flex:0 0 auto;font-size:9.5px;letter-spacing:1px;padding:2px 6px;border-radius:2px;
  color:#1a1206;background:var(--gold)}
.k-shourong .q-kind{background:var(--violet);color:#140a2a}
.k-bounty .q-kind{background:var(--cyan);color:#04121c}
.q-title{flex:1;font-size:14px;line-height:1.4;color:var(--text);word-break:break-word}
.q-st{flex:0 0 auto;font-size:10px;color:var(--gold);letter-spacing:.5px}
.q-cover{margin:0 0 8px}
.q-cover img{width:100%;max-height:150px;object-fit:cover;border:1px solid var(--line);border-radius:2px;cursor:zoom-in}
.q-desc{font-size:12.5px;line-height:1.75;color:#cbbda6;margin-bottom:7px;word-break:break-word}
.q-hint{font-size:11.5px;line-height:1.7;color:var(--gold);background:rgba(255,207,92,.07);
  border:1px dashed rgba(255,207,92,.3);border-radius:2px;padding:6px 9px;margin-bottom:6px;word-break:break-word}
.q-area{font-size:10.5px;color:var(--dim);margin-bottom:5px}
.q-reward{font-size:11.5px;color:#7fd8c0;margin-bottom:6px}
.q-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--dim)}

.q-claim-box{margin-top:10px;padding:10px;border:1px solid var(--line2);border-radius:2px;
  background:rgba(3,2,1,.4);display:flex;flex-direction:column;gap:8px}
.q-note{font-size:12px;padding:7px 10px}
.q-submit{width:100%;padding:9px 0;font-size:13px}

.q-myclaim{margin-top:9px;padding:9px 10px;border:1px solid var(--line);border-radius:2px;
  display:flex;flex-direction:column;gap:6px;font-size:11px}
.q-myclaim.st-pending{border-color:rgba(255,207,92,.4);background:rgba(255,207,92,.05)}
.q-myclaim.st-approved{border-color:rgba(70,179,154,.45);background:rgba(70,179,154,.07)}
.q-myclaim.st-rejected{border-color:rgba(226,84,58,.4);background:rgba(226,84,58,.05)}
.q-myclaim img{max-width:100%;max-height:140px;object-fit:cover;border:1px solid var(--line);cursor:zoom-in}
.q-myclaim b{color:#7fd8c0;font-weight:400}
.q-myclaim em{color:var(--dim);font-style:normal;font-size:10.5px}

.q-review{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:9px}
.q-claim{padding:9px;border:1px solid var(--line);border-radius:2px;display:flex;flex-direction:column;gap:6px;background:rgba(224,166,63,.03)}
.q-claim.st-approved{border-color:rgba(70,179,154,.4)}
.q-claim.st-rejected{opacity:.6}
.q-claim-top{display:flex;justify-content:space-between;font-size:10px;color:var(--dim)}
.q-claim-top span:first-child{color:var(--accent)}
.q-claim img{max-width:100%;max-height:170px;object-fit:cover;border:1px solid var(--line);cursor:zoom-in}
.q-claim-note{font-size:12px;color:#cbbda6;line-height:1.6}
.q-claim-dist,.q-claim-st{font-size:10px;color:var(--dim)}
.q-claim-btns{display:flex;gap:7px}
.q-claim-btns .hud-btn,.q-claim-btns .mini-btn{flex:1;padding:7px 0;font-size:12px}

@media (max-width:840px){
  .q-cover img{max-height:120px}
  .cm-imgs-view img{width:66px;height:66px}
}

/* ============================================================
   舆图层 ATLAS · 省界遮罩 / 四色标记 / 鬼蜮 / 详情卡
   ============================================================ */

/* ---- 地图标记：通用圆点 ---- */
.atlas-pin { display: flex; align-items: center; justify-content: center; }
.atlas-pin > i {
  display: block; border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, .55);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}
.atlas-pin > b {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  margin-left: 4px; font: 400 10px/1.2 'Share Tech Mono', monospace;
  color: #f0e2c8; white-space: nowrap; text-shadow: 0 0 4px #000;
}

/* 灵异 · 红（带呼吸） */
.atlas-pin.pin-anom > i {
  background: radial-gradient(circle at 35% 30%, #ff8a6e, #e2543a 62%, #8f2414);
  animation: pinPulse 2.4s ease-in-out infinite;
}
/* 求助 · 紫 */
.atlas-pin.pin-help > i {
  background: radial-gradient(circle at 35% 30%, #c9b8ff, #a892fe 62%, #5b46a8);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 10px rgba(168, 146, 254, .8);
}
/* 留言 · 绿 */
.atlas-pin.pin-note > i {
  background: radial-gradient(circle at 35% 30%, #8fe6cf, #46b39a 62%, #1f6b5b);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35), 0 0 9px rgba(70, 179, 154, .85);
}
/* 带图 · 黄 */
.atlas-pin.pin-note-img > i {
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #ffcf5c 62%, #a8801d);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35), 0 0 11px rgba(255, 207, 92, .9);
}
/* 小鬼 · 黑 */
.atlas-pin.pin-grem > i {
  background: #0a0908; border-color: rgba(255, 120, 90, .55);
  box-shadow: 0 0 6px rgba(0, 0, 0, .9), 0 0 3px rgba(255, 90, 60, .5);
}
/* 厉鬼 · 红（闪烁） */
.atlas-pin.pin-fierce > i {
  background: radial-gradient(circle at 40% 35%, #ff9b7a, #ff3b21 60%, #7d1206);
  animation: fierceBlink 1.3s steps(2, end) infinite;
}
/* 草稿点 */
.atlas-pin.pin-draft > i {
  background: transparent; border: 2px dashed rgba(224, 166, 63, .9);
  box-shadow: 0 0 10px rgba(224, 166, 63, .55);
  animation: pinPulse 1.6s ease-in-out infinite;
}
@keyframes pinPulse { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.18); opacity: .7; } }
@keyframes fierceBlink { 0% { opacity: 1; } 50% { opacity: .35; } 100% { opacity: 1; } }

/* 鬼蜮区域名 */
.realm-label { pointer-events: none !important; }
.realm-label span {
  display: block; font: 400 12px/1.3 'ZCOOL QingKe HuangYou', sans-serif;
  color: #ffb3a6; letter-spacing: 2px; text-align: center;
  text-shadow: 0 0 8px rgba(201, 32, 42, .95), 0 0 2px #000;
}
.realm-label em {
  display: block; font: 400 9px/1.2 'Share Tech Mono', monospace;
  font-style: normal; text-align: center; color: rgba(255, 179, 166, .6);
}

/* ---- 图层切换 ---- */
.map-modes {
  /* 让开左上角的缩放控件 */
  position: absolute; left: 48px; top: 14px; z-index: 960;
  display: flex; align-items: center; gap: 6px;
}
.mode-btn {
  padding: 6px 12px; cursor: pointer;
  background: rgba(10, 7, 5, .9); color: var(--dim);
  border: 1px solid rgba(224, 166, 63, .28); border-radius: 2px;
  font: 400 11px/1 'Share Tech Mono', monospace; letter-spacing: 1px;
  transition: all .18s;
}
.mode-btn:hover { color: var(--accent); border-color: rgba(224, 166, 63, .6); }
.mode-btn.active {
  color: #120c06; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 14px rgba(224, 166, 63, .45);
}
.atlas-count { font-size: 10px; color: rgba(240, 226, 200, .5); margin-left: 4px; }

/* ---- 四色图例 ---- */
.map-legend4 {
  /* 抬高一档，避免压住左下角的坐标读数 */
  position: absolute; left: 14px; bottom: 46px; z-index: 960;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 7px 11px; max-width: 260px;
  background: rgba(8, 6, 4, .86); border: 1px solid rgba(224, 166, 63, .22);
  border-radius: 2px; font-size: 10px; color: rgba(240, 226, 200, .78);
}
.map-legend4 .lg-sep { width: 1px; height: 10px; background: rgba(224, 166, 63, .25); }
.map-legend4 span { display: inline-flex; align-items: center; gap: 4px; }
.p4 { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.p-anom { background: #e2543a; box-shadow: 0 0 6px #e2543a; }
.p-help { background: #a892fe; box-shadow: 0 0 6px #a892fe; }
.p-note { background: #46b39a; box-shadow: 0 0 6px #46b39a; }
.p-img { background: #ffcf5c; box-shadow: 0 0 6px #ffcf5c; }
.p-grem { background: #111; border: 1px solid rgba(255, 120, 90, .6); }
.p-fierce { background: #ff3b21; box-shadow: 0 0 6px #ff3b21; }
/* 鬼蜮模式下只留鬼蜮相关图例 */
.map-legend4[data-mode="ghost"] span:not(.lg-sep):not(:nth-child(n+5)) { display: none; }

.ghost-tip {
  position: absolute; left: 50%; transform: translateX(-50%); top: 14px; z-index: 960;
  padding: 6px 14px; background: rgba(30, 4, 4, .9);
  border: 1px solid rgba(201, 32, 42, .55); border-radius: 2px;
  font-size: 10px; color: #ffb3a6; letter-spacing: 1px; white-space: nowrap;
}
.ghost-tip b { color: #ff5a45; font-size: 12px; }

/* ---- 选点提示条 ---- */
.pick-bar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 70px; z-index: 970;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; background: rgba(10, 7, 5, .95);
  border: 1px solid var(--accent); border-radius: 2px;
  font-size: 11px; color: var(--accent);
  box-shadow: 0 0 22px rgba(224, 166, 63, .35);
}
.pick-bar .mini-btn { border-color: rgba(224, 166, 63, .5); color: var(--accent); }

/* ---- 详情卡 ---- */
.pin-card {
  position: absolute; right: 14px; bottom: 14px; z-index: 980;
  width: 330px; max-height: calc(100% - 90px); overflow-y: auto;
  padding: 14px 15px 12px;
  background: linear-gradient(180deg, rgba(16, 11, 7, .98), rgba(9, 7, 5, .98));
  border: 1px solid rgba(224, 166, 63, .3); border-radius: 3px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .5) inset;
  animation: pinIn .18s ease-out;
}
@keyframes pinIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pin-x {
  position: absolute; right: 8px; top: 6px; width: 22px; height: 22px;
  background: none; border: none; color: rgba(240, 226, 200, .45);
  font-size: 13px; cursor: pointer; line-height: 1;
}
.pin-x:hover { color: var(--xiong); }
.pin-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-right: 22px; }
.pin-kind {
  font: 400 10px/1 'Share Tech Mono', monospace; padding: 3px 7px; border-radius: 2px;
  letter-spacing: 1px; border: 1px solid;
}
.pin-kind.k-anom { color: #ff8a6e; border-color: rgba(226, 84, 58, .6); background: rgba(226, 84, 58, .12); }
.pin-kind.k-help { color: #c9b8ff; border-color: rgba(168, 146, 254, .6); background: rgba(168, 146, 254, .12); }
.pin-kind.k-note { color: #8fe6cf; border-color: rgba(70, 179, 154, .6); background: rgba(70, 179, 154, .12); }
.pin-kind.k-img { color: #ffe9a8; border-color: rgba(255, 207, 92, .6); background: rgba(255, 207, 92, .12); }
.pin-meta { font-size: 10px; color: rgba(240, 226, 200, .48); }
.pin-title {
  font: 400 15px/1.4 'Noto Serif SC', serif; color: #f4ead8;
  margin: 2px 0 8px; letter-spacing: .5px;
}
.pin-body { font-size: 12px; line-height: 1.7; color: rgba(240, 226, 200, .8); white-space: pre-wrap; }
.pin-reward, .pin-contact {
  margin-top: 8px; font-size: 10px; padding: 5px 8px;
  border-left: 2px solid rgba(224, 166, 63, .5); background: rgba(224, 166, 63, .07);
  color: rgba(240, 226, 200, .82);
}
.pin-contact.dim { border-left-color: rgba(240, 226, 200, .2); color: rgba(240, 226, 200, .4); }
.pin-sep { height: 1px; background: rgba(224, 166, 63, .16); margin: 12px 0 10px; }
.pin-img { margin: 8px 0; }
.pin-img img {
  width: 100%; border-radius: 2px; border: 1px solid rgba(224, 166, 63, .2);
  cursor: zoom-in; display: block;
}
.pin-hint { font-size: 10px; color: rgba(226, 84, 58, .85); margin: 8px 0 0; }

.pin-cmts { display: flex; flex-direction: column; gap: 8px; max-height: 190px; overflow-y: auto; }
.pin-cmt {
  font-size: 11px; line-height: 1.6; color: rgba(240, 226, 200, .8);
  padding-bottom: 7px; border-bottom: 1px solid rgba(224, 166, 63, .08); position: relative;
}
.pin-cmt > .mono { color: var(--accent); font-size: 10px; margin-right: 5px; }
.pin-cmt img {
  display: block; margin-top: 5px; max-width: 100%; border-radius: 2px;
  border: 1px solid rgba(224, 166, 63, .18); cursor: zoom-in;
}
.cmt-x {
  background: none; border: none; color: rgba(240, 226, 200, .28);
  font-size: 10px; cursor: pointer; padding: 0 2px; margin-left: 6px;
  vertical-align: middle; line-height: 1;
}
.cmt-x:hover { color: var(--xiong); }
.mini-btn.danger { color: #ff8a6e; border-color: rgba(226, 84, 58, .45); }
.mini-btn.danger:hover { background: rgba(226, 84, 58, .16); }

/* ---- 事件类型色条 ---- */
.ev-kind-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.ev-kind-dot.k-anom { background: #e2543a; box-shadow: 0 0 7px #e2543a; }
.ev-kind-dot.k-help { background: #a892fe; box-shadow: 0 0 7px #a892fe; }
.ev-card.ev-anom { border-left: 2px solid rgba(226, 84, 58, .55); }
.ev-card.ev-help { border-left: 2px solid rgba(168, 146, 254, .55); }
.ev-kinds { gap: 8px; margin-bottom: 4px; }
.ev-kind { display: inline-flex; align-items: center; gap: 5px; }
.ev-kind.active {
  border-color: var(--accent); color: var(--accent);
  background: rgba(224, 166, 63, .12);
}

@media (max-width: 840px) {
  .pin-card { width: calc(100% - 20px); right: 10px; bottom: 10px; max-height: 52%; }
  .map-legend-lite { display: none; }
  .map-tag { display: none; }
  .map-legend4 {
    left: 10px; bottom: 54px; gap: 5px 9px; padding: 6px 8px;
    font-size: 9.5px; letter-spacing: 0; max-width: 170px;
  }
  .map-legend4 .lg-sep { width: 100%; height: 0; background: none; }
  .map-legend4, .map-modes { z-index: 900; }
  .map-modes { top: 8px; left: 44px; }
  .mode-btn { padding: 5px 9px; font-size: 10px; }
  .atlas-count { display: none; }
}

/* 动态点存在时，玄事底图标记退到后景 */
#map.atlas-has-pins .xs-marker { opacity: .22; filter: grayscale(.55) saturate(.3); }

/* ============================================================
   移动端：顶栏收敛 + 侧栏折成一条 chip，点开成浮层
   ============================================================ */
@media (max-width:840px){
  #topbar { padding: 0 10px; gap: 8px; }
  .brand-sub { display: none; }
  .brand-name { font-size: 15px; letter-spacing: 1px; }
  .brand-glyph { font-size: 15px; }
  #jieqiBadge { display: none; }
  .topbar-right { gap: 6px; }
  .topbar-right .hud-btn { padding: 5px 8px; font-size: 11px; letter-spacing: 1px; }
  .topbar-right .chip { padding: 4px 7px; font-size: 11px; letter-spacing: 1px; }

  #sidebar {
    flex-direction: row; align-items: center; gap: 7px;
    height: 46px; min-height: 46px; max-height: 46px;
    padding: 0 10px; overflow-x: auto; overflow-y: hidden;
    border-bottom: 1px solid var(--line);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #sidebar::-webkit-scrollbar { display: none; }
  #sidebar .panel {
    flex: 0 0 auto; height: 30px; min-width: 0;
    padding: 0; overflow: hidden; cursor: pointer;
    border: 1px solid var(--line); border-radius: 2px;
    background: rgba(224, 166, 63, .05);
  }
  #sidebar .panel > *:not(.panel-head) { display: none; }
  #sidebar .panel .panel-head {
    height: 28px; padding: 0 11px; margin: 0; border-bottom: none;
    display: flex; align-items: center; white-space: nowrap;
  }
  #sidebar .panel .panel-head .mono { font-size: 10.5px; letter-spacing: .5px; }
  #sidebar .panel .rec { display: none; }
  #sidebar .panel.open {
    position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto; z-index: 930;
    width: auto; height: auto; max-height: 64vh; overflow-y: auto;
    padding: 14px; border-radius: 3px; cursor: default;
    border: 1px solid var(--line2); background: var(--panel-solid);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .78);
  }
  #sidebar .panel.open > *:not(.panel-head) { display: block; }
  #sidebar .panel.open .narrator { display: flex; }
  #sidebar .panel.open .shichen-picker { display: grid; }
  #sidebar .panel.open .fangshu-row { display: flex; }
  #sidebar .panel.open .city-nav { display: flex; }
  #sidebar .panel.open .panel-head {
    border-bottom: 1px solid var(--line); margin-bottom: 12px; padding: 0 0 9px;
  }
  #sidebar .panel.open .panel-head::after {
    content: "收起 ✕"; margin-left: auto; padding-left: 14px;
    font-family: var(--mono); font-size: 10px; color: var(--dim);
  }
  #sidebar.mask::before {
    content: ""; position: fixed; inset: 0; z-index: 920;
    background: rgba(0, 0, 0, .62);
  }
  .pin-card { max-height: 56%; }
}