:root{
  --bg:#14151a; --panel:#1e2027; --panel2:#181a20; --line:#2e313b;
  --text:#e8e6e3; --sub:#9aa0a8; --accent:#4a90d9; --accent2:#e0a53a;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--text);font-size:17px;font-family:"Noto Sans TC",system-ui,"Microsoft JhengHei",sans-serif;}
a{color:var(--sub);text-decoration:none;} a:hover{color:var(--text);}
.topbar{display:flex;align-items:center;gap:14px;padding:9px 16px;background:#101116;border-bottom:1px solid var(--line);}
.topbar .title{font-weight:700;font-size:1.05em;margin-right:auto;}
.topbar .gen{color:var(--sub);font-size:.8em;}

.layout{display:flex;height:calc(100vh - 44px);}
.side{width:270px;flex:0 0 270px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;}
.mapwrap{flex:1;position:relative;min-width:0;}
#map{position:absolute;inset:0;background:#0c0d11;}

.regions{display:flex;gap:6px;padding:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);}
.region-btn{flex:1;min-width:70px;padding:9px 6px;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;color:var(--sub);cursor:pointer;font-size:1em;font-family:inherit;text-align:center;}
.region-btn:hover{color:var(--text);border-color:var(--accent);}
.region-btn.active{color:#fff;background:var(--accent);border-color:var(--accent);font-weight:700;}

.searchbox{padding:10px;border-bottom:1px solid var(--line);}
.searchbox input{width:100%;padding:9px 11px;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;color:var(--text);font-family:inherit;font-size:1em;}
.searchbox input:focus{outline:none;border-color:var(--accent);}
.results{max-height:180px;overflow:auto;margin-top:6px;}
.results .r{padding:7px 8px;border-radius:6px;cursor:pointer;font-size:.95em;display:flex;gap:6px;align-items:center;}
.results .r:hover{background:var(--panel2);}
.results .r .ic{width:18px;text-align:center;}
.results .r .rt{color:var(--sub);font-size:.85em;margin-left:auto;}

.filters{padding:10px;overflow:auto;flex:1;}
.filters h4{margin:2px 0 8px;font-size:.9em;color:var(--sub);font-weight:600;letter-spacing:.05em;}
.flt{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer;user-select:none;}
.flt:hover{background:var(--panel2);}
.flt input{accent-color:var(--accent);width:15px;height:15px;}
.flt .ic{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;font-size:.95em;}
.flt .nm{flex:1;font-size:1.02em;}
.flt .ct{color:var(--sub);font-size:.88em;}

/* marker icons */
.qm-ic{display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:2px solid rgba(0,0,0,.45);box-shadow:0 1px 3px rgba(0,0,0,.5);
  font-size:15px;width:25px;height:25px;background:#333;color:#fff;line-height:1;}
.qm-lbl{position:absolute;left:50%;top:100%;transform:translateX(-50%);
  white-space:nowrap;font-size:26px;color:#fff;text-shadow:0 1px 3px #000,0 0 4px #000,0 0 4px #000;
  margin-top:2px;pointer-events:none;font-weight:700;line-height:1;}
.qm-textonly{overflow:visible;}
.qm-zlbl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  white-space:nowrap;font-size:26px;color:#fff;text-shadow:0 1px 3px #000,0 0 4px #000,0 0 4px #000;
  pointer-events:none;font-weight:700;line-height:1;}
.qm-dim{opacity:.8;}
.leaflet-container{background:#0c0d11;}
.leaflet-popup-content-wrapper{background:var(--panel);color:var(--text);border-radius:10px;}
.leaflet-popup-tip{background:var(--panel);}
.leaflet-popup-content{margin:10px 12px;font-size:.9em;line-height:1.5;}
.leaflet-popup-content b{color:#fff;} .leaflet-popup-content .co{color:var(--sub);font-size:.86em;}
.qm-cluster{background:rgba(40,44,54,.85);border:2px solid var(--accent);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.5);}
.coordbar{position:absolute;bottom:8px;right:10px;z-index:500;background:rgba(16,17,22,.8);
  padding:4px 9px;border-radius:6px;font-size:.8em;color:var(--sub);pointer-events:none;}
@media(max-width:720px){
  .layout{flex-direction:column;height:calc(100vh - 44px);}
  .side{width:100%;flex:0 0 auto;max-height:44vh;border-right:0;border-bottom:1px solid var(--line);}
  .mapwrap{min-height:56vh;}
}

/* 線上玩家位置 */
.qm-player{overflow:visible !important;}
.qm-face{width:26px;height:26px;image-rendering:pixelated;background-repeat:no-repeat,no-repeat;
  border:2px solid #fff;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.65);box-sizing:content-box;
  background-color:#20232b;}
.qm-face-fallback{background:#4a6f9a;color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;line-height:1;}
.qm-plbl{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;
  white-space:nowrap;font-size:13px;font-weight:700;color:#8fd8ff;
  text-shadow:0 1px 3px #000,0 0 3px #000,0 0 3px #000;pointer-events:none;line-height:1;}