/* PUBG Tactical Map — Tactical Console aesthetic */
:root{
  --bg:#0a0c10;
  --bg2:#0d1015;
  --panel:#12161d;
  --panel2:#171c25;
  --panel3:#1d232e;
  --line:#2a313d;
  --line2:#37404f;
  --ink:#e7e3d8;
  --ink-dim:#9aa0a8;
  --muted:#6c727b;
  --amber:#f2a900;
  --amber-2:#ffc14d;
  --amber-glow:rgba(242,169,0,.45);
  --olive:#8f9b3a;
  --red:#c0392b;
  --blue:#2f7dd1;
  --grid:rgba(242,169,0,.06);
  --shadow:0 10px 30px rgba(0,0,0,.55);
  --clip:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Rajdhani","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.block-title,.brand-text,.val,.lbl{font-family:"Oxanium","Rajdhani",sans-serif;letter-spacing:.04em}

/* 背景颗粒 */
.grain{position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

/* ===== 侧栏 ===== */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:286px;z-index:1000;
  background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .34s cubic-bezier(.6,.1,.2,1);
  box-shadow:var(--shadow);
}
.sidebar.open{transform:translateX(0)}
.sidebar::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--amber) 20%,var(--amber) 80%,transparent);
  opacity:.5}

.brand{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.brand-mark{width:30px;height:30px;flex:none;position:relative;
  background:var(--amber);clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%);
  box-shadow:0 0 14px var(--amber-glow)}
.brand-mark::after{content:"";position:absolute;inset:5px;background:var(--bg);
  clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%)}
.brand-mark::before{content:"";position:absolute;inset:10px;background:var(--amber);border-radius:2px}
.brand-text h1{font-size:18px;font-weight:800;line-height:1}
.brand-text h1 span{color:var(--amber)}
.brand-text p{font-size:11px;color:var(--ink-dim);letter-spacing:.18em;text-transform:uppercase;margin-top:3px}

.nav-toggle{position:absolute;top:20px;right:-18px;width:34px;height:54px;border:none;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);border-left:none;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);color:var(--amber);font-size:18px;display:flex;align-items:center;justify-content:center;padding-right:6px}
.sidebar.open .nav-toggle::after{content:"‹"}
.nav-toggle::after{content:"›";font-family:"Oxanium"}
.nav-toggle:hover{background:var(--panel3)}

.side-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 14px 14px}
.side-scroll::-webkit-scrollbar{width:6px}
.side-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}

.block{margin-top:14px}
.block-title{font-size:11px;font-weight:700;color:var(--amber);text-transform:uppercase;
  letter-spacing:.16em;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:8px}
.block-title em{color:var(--muted);font-style:normal;margin-left:6px;font-size:9px}

.map-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.map-btn{position:relative;text-align:left;background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);padding:9px 10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:.18s;overflow:hidden}
.map-btn:hover{border-color:var(--line2);background:var(--panel3)}
.map-btn.active{border-color:var(--amber);color:#fff;box-shadow:inset 0 0 0 1px var(--amber)}
.map-btn.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber)}
.map-btn .ct{font-size:9px;color:var(--muted);font-weight:400;display:block;margin-top:1px}
.map-btn.active .ct{color:var(--amber-2)}

.layer-list{display:flex;flex-direction:column;gap:3px}
.layer-row{display:flex;align-items:center;gap:9px;padding:6px 8px;cursor:pointer;
  border:1px solid transparent;border-radius:5px;transition:.15s}
.layer-row:hover{background:var(--panel2)}
.layer-row.off{opacity:.42}
.dot{width:12px;height:12px;flex:none;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.4) inset,0 0 7px var(--c)}
.layer-row .l-icon{width:18px;height:18px;flex:none;object-fit:contain;display:block}
.layer-name{flex:1;font-size:13px;font-weight:500}
.layer-n{font-size:11px;color:var(--muted);font-family:"Oxanium"}
.chk{width:14px;height:14px;flex:none;border:1px solid var(--line2);border-radius:3px;position:relative;transition:.15s}
.layer-row:not(.off) .chk{background:var(--amber);border-color:var(--amber)}
.layer-row:not(.off) .chk::after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;
  border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}

.hint{font-size:11px;color:var(--ink-dim);margin-top:8px;line-height:1.5;
  padding:7px 9px;border:1px dashed var(--line);border-radius:5px}

/* 点位图层：显示全部/清空/重置 */
.view-actions{display:grid;grid-template-columns:1.5fr 1fr;gap:6px;margin-top:9px}
.view-actions .mini-btn{margin-top:0}
.mini-btn.clear{margin-top:6px}
.mini-btn.clear:hover{border-color:var(--red);color:#e06a5c}

/* 开发者：新增类型 */
.add-type{display:flex;gap:6px;align-items:center;margin:6px 0 2px}
.add-type .dev-pwd{margin:0}
.color-in{width:34px;height:30px;flex:none;background:var(--panel2);border:1px solid var(--line2);
  border-radius:4px;padding:2px;cursor:pointer}
.color-in::-webkit-color-swatch-wrapper{padding:0}
.color-in::-webkit-color-swatch{border:none;border-radius:2px}
.add-type .mini-btn{margin-top:0;flex:none;width:auto;padding:6px 10px}
.mini-btn.solid{background:rgba(242,169,0,.16);border-color:var(--amber);color:var(--amber-2)}
.mini-btn.solid:hover{background:rgba(242,169,0,.28);color:#fff}
.chip-del{margin-left:5px;font-size:12px;color:var(--red);font-weight:700;line-height:1}
.type-chip:hover .chip-del{color:#e06a5c}

.measure-panel{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:9px}
.measure-panel.empty .mp-row{opacity:.4}
.mp-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:13px}
.mp-row span{color:var(--ink-dim);font-size:12px}
.mp-row b{font-family:"Oxanium";font-weight:600}
.mp-row.big{margin-top:6px;padding:8px 10px;
  background:linear-gradient(90deg,rgba(242,169,0,.18),rgba(242,169,0,.05));
  border:1px solid var(--amber);border-left:4px solid var(--amber);border-radius:6px}
.mp-row.big b{color:var(--amber-2);font-size:24px;text-shadow:0 0 12px var(--amber-glow)}
.mini-btn{margin-top:8px;width:100%;background:transparent;border:1px solid var(--line2);color:var(--ink-dim);
  padding:6px;font-family:inherit;font-size:12px;cursor:pointer;letter-spacing:.06em;transition:.15s}
.mini-btn:hover{border-color:var(--amber);color:var(--amber)}
.dev-pwd-row{align-items:stretch}
.dev-pwd-row .mini-btn{margin-top:0;align-self:stretch;flex:none;width:auto;padding:6px 14px}

.side-foot{padding:9px 16px;font-size:10px;color:var(--muted);border-top:1px solid var(--line);
  letter-spacing:.04em}

/* ===== 开发者选项 ===== */
.dev-switch-row{display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--ink-dim);padding:2px 0 4px}
.switch{position:relative;width:42px;height:21px;flex:none;background:var(--panel3);
  border:1px solid var(--line2);border-radius:21px;cursor:pointer;transition:.2s;padding:0}
.switch i{position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:50%;
  background:var(--muted);transition:.2s}
.switch:hover{border-color:var(--amber)}
.switch.on{background:rgba(242,169,0,.22);border-color:var(--amber)}
.switch.on i{left:23px;background:var(--amber);box-shadow:0 0 9px var(--amber-glow)}
.dev-sub{font-size:10.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin:8px 0 6px}
.type-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.type-chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel2);
  border:1px solid var(--line);color:var(--ink-dim);font-family:inherit;font-size:11.5px;
  padding:4px 8px;border-radius:4px;cursor:pointer;transition:.15s}
.type-chip i{width:8px;height:8px;flex:none;border-radius:50%}
.type-chip .chip-icon{width:17px;height:17px;flex:none;object-fit:contain;display:block}
.type-chip:hover{border-color:var(--line2);color:var(--ink)}
.type-chip.active{border-color:var(--amber);color:#fff;box-shadow:inset 0 0 0 1px var(--amber);
  background:rgba(242,169,0,.1)}
.dev-stat{font-size:12px;color:var(--ink-dim);margin:8px 0 7px}
.dev-stat b{color:var(--amber);font-family:"Oxanium";font-size:14px}
.dev-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dev-actions .mini-btn{margin-top:0}
.mini-btn.danger:hover{border-color:var(--red);color:#e06a5c}
#map.dev-cursor{cursor:crosshair!important}

/* 开发者密码锁 */
.dev-pwd-row{display:flex;gap:6px;margin:6px 0}
.dev-pwd{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:13px;padding:6px 9px;border-radius:4px;
  outline:none;transition:.15s}
.dev-pwd::placeholder{color:var(--muted)}
.dev-pwd:focus{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber-glow)}
.dev-pwd-wrap{position:relative;flex:1;min-width:0}
.dev-pwd-wrap .dev-pwd{width:100%;padding-right:34px;font-size:14px;padding-top:8px;padding-bottom:8px}
.pwd-toggle{position:absolute;right:3px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--muted);cursor:pointer;border-radius:4px;padding:0;line-height:1}
.pwd-toggle:hover{color:var(--amber);background:rgba(242,169,0,.12)}
.pwd-err{color:#e07b72;font-size:12px;margin:2px 0 6px}
.dev-lock .hint{margin-top:6px}

/* 保存状态 */
.dev-save{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-dim);margin:2px 0 8px}
.save-idle{color:var(--muted)}
.save-saving{color:var(--amber-2)}
.save-saved{color:#7fc98b}
.save-error{color:#e07b72}
.dev-lock-row{margin-top:10px;grid-template-columns:1fr}

/* ===== 主台 ===== */
#stage{position:absolute;left:0;top:0;right:0;bottom:0;transition:left .34s cubic-bezier(.6,.1,.2,1)}
body.side-open #stage{left:286px}
#map{position:absolute;inset:0;background:#05070a}
.leaflet-container{background:#05070a;font-family:inherit}
.leaflet-pane{will-change:transform}
.leaflet-tile{filter:none}

.topbar{position:absolute;top:14px;left:14px;right:14px;z-index:600;display:flex;gap:10px;
  align-items:stretch;pointer-events:none}
.topbar > *{pointer-events:auto}
.readout{background:rgba(12,15,20,.82);backdrop-filter:blur(8px);border:1px solid var(--line);
  padding:6px 12px;border-radius:6px;display:flex;flex-direction:column;min-width:0;
  clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px)}
.readout .lbl{font-size:8.5px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase}
.readout .val{font-size:14px;font-weight:700;color:var(--ink);font-family:"Oxanium";line-height:1.2}
.readout.map-name .val{color:var(--amber)}
.info-btn{margin-left:auto;width:38px;background:rgba(12,15,20,.82);backdrop-filter:blur(8px);
  border:1px solid var(--line);color:var(--amber);font-size:20px;cursor:pointer;border-radius:6px;transition:.15s}
.info-btn:hover{border-color:var(--amber);box-shadow:0 0 14px var(--amber-glow)}

.zoom-ctl{position:absolute;right:14px;bottom:14px;z-index:600;display:flex;flex-direction:column;gap:6px}
.zoom-ctl button{width:42px;height:42px;background:rgba(12,15,20,.85);backdrop-filter:blur(8px);
  border:1px solid var(--line);color:var(--ink);font-size:20px;font-family:"Oxanium";cursor:pointer;
  border-radius:6px;transition:.15s;display:flex;align-items:center;justify-content:center;line-height:1}
.zoom-ctl button:hover{border-color:var(--amber);color:var(--amber);box-shadow:0 0 14px var(--amber-glow)}
.zoom-ctl button:active{transform:scale(.94)}

.toast{position:absolute;left:50%;bottom:24px;transform:translate(-50%,12px);z-index:700;
  background:rgba(12,15,20,.92);border:1px solid var(--amber);color:var(--ink);padding:9px 16px;
  border-radius:6px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;letter-spacing:.04em;
  box-shadow:0 0 22px var(--amber-glow)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Leaflet 标记样式 */
.marker-label{background:rgba(12,15,20,.9);border:1px solid var(--amber);color:var(--amber);
  font-family:"Oxanium";font-weight:700;font-size:16px;padding:4px 10px;border-radius:4px;
  white-space:nowrap;transform:translate(-50%,-150%);box-shadow:0 0 10px var(--amber-glow);pointer-events:none}
.leaflet-popup-content-wrapper{background:rgba(12,15,20,.95);color:var(--ink);
  border:1px solid var(--amber);border-radius:6px;box-shadow:0 0 18px rgba(0,0,0,.6)}
.leaflet-popup-content{margin:10px 13px;font-size:12px;line-height:1.5}
.leaflet-popup-content b{color:var(--amber);font-family:"Oxanium"}
.leaflet-popup-tip{background:rgba(12,15,20,.95)}
.leaflet-popup-close-button{color:var(--ink-dim)!important}

/* 测距标记 */
.measure-pt{width:14px;height:14px;border-radius:50%;background:var(--amber);border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 12px var(--amber);transform:translate(-50%,-50%);pointer-events:none}
.measure-pt.b{background:#fff;border-color:var(--amber)}

/* ===== 弹窗 ===== */
.modal{position:fixed;inset:0;z-index:3000;background:rgba(4,6,9,.78);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s}
.modal[hidden]{display:none}
.modal-card{position:relative;width:520px;max-width:100%;max-height:88vh;overflow:auto;
  background:linear-gradient(180deg,var(--panel2),var(--bg2));border:1px solid var(--amber);
  border-radius:10px;box-shadow:0 0 50px rgba(0,0,0,.6),0 0 30px var(--amber-glow);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.modal-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--ink-dim);
  font-size:16px;cursor:pointer}
.modal-x:hover{color:var(--amber)}
.modal-head{padding:22px 24px 12px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:20px;font-weight:800}
.modal-head h2::after{content:"";display:block;width:40px;height:3px;background:var(--amber);margin-top:8px}
.modal-head p{font-size:11px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-top:6px}
.modal-body{padding:16px 24px 24px}
.about-author{display:flex;gap:14px;align-items:center;padding:14px;margin-bottom:6px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:10px}
.author-avatar{width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover;
  border:2px solid var(--amber);box-shadow:0 0 12px var(--amber-glow)}
.author-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.author-name{font-weight:700;font-size:15px;color:var(--amber-2)}
.author-line,.author-gh{color:var(--ink-dim);font-size:13px;text-decoration:none;word-break:break-all}
.author-line:hover{color:var(--amber)}
.author-gh{color:var(--amber-2)}
.author-gh:hover{text-decoration:underline}
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv span{color:var(--ink-dim)}
.kv b{font-family:"Oxanium";font-weight:600}
.note{margin-top:16px;font-size:12px;line-height:1.7;color:var(--ink-dim);
  padding:12px;border:1px dashed var(--line2);border-radius:6px}
.note strong{color:var(--amber-2)}
.note a{color:var(--amber-2)}

@keyframes fade{from{opacity:0}to{opacity:1}}

@media (max-width:720px){
  .sidebar{width:240px}
  body.side-open #stage{left:240px}
  .readout.map-name{display:none}
  .brand-text h1{font-size:15px}
}