/* =========================================================
   奇幻地图 / base — 设计令牌・基座・头部
   ========================================================= */
:root{
  --paper:#f4ecdb; --paper-d:#e8dcbc;
  --bg0:#ccd8bc; --bg1:#e9ece0; --bg2:#bcc8a8; --bg3:#aab898;
  --line:#9eb088; --line-2:#8ea076;
  --brass:#4a5a32; --brass-d:#2e3a1a; --brass-dim:#6a7a52;
  --accent:#5a6e2e; --accent-d:#3a4e18;
  --txt:#2e3820; --txt-2:#465238; --txt-3:#768462;
  --ok:#4a7a30; --warn:#c07828;
  --r:6px; --r-s:4px;
  --sh:0 4px 20px rgba(0,0,0,.22);
  --zh:'Noto Serif SC','Songti SC','SimSun',serif;
  --la:'Georgia','Times New Roman',serif;
  --panelW:322px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--zh); color:var(--txt);
  background:radial-gradient(130% 100% at 18% -10%, #f2f6ea, #dee4d2 52%, #c8d0bc);
  min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button,input,select{font-family:inherit;color:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c8b888;border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* 头部 */
header{
  flex:none; display:flex; align-items:center; gap:14px;
  padding:11px 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(180,160,120,.15), rgba(180,160,120,.03));
  position:relative; z-index:30;
}
.brand{display:flex;align-items:baseline;gap:12px;min-width:0}
.brand h1{
  font-family:var(--zh); font-weight:700; letter-spacing:.26em;
  font-size:clamp(17px,2.6vw,26px); color:var(--brass); white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
.brand .sub{font-size:12.5px;color:var(--txt-3);letter-spacing:.04em;white-space:nowrap}
.hdr-sp{flex:1}
.hdr-ad{flex:none;width:468px;height:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--txt-3);background:rgba(180,200,170,.2);
  border-radius:4px;letter-spacing:.06em}
.hdr-acts{display:flex;gap:7px;align-items:center;flex:none}
.seal{
  font-family:var(--la);font-size:10.5px;letter-spacing:.3em;color:var(--brass-dim);
  border:1px solid var(--line-2);padding:5px 9px;border-radius:2px;white-space:nowrap;
}

/* 按钮 */
.ibtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 11px;background:rgba(240,225,200,.45);border:1px solid var(--line-2);
  color:var(--brass);border-radius:var(--r-s);cursor:pointer;font-size:12.5px;
  transition:background .15s,border-color .15s,color .15s;white-space:nowrap;
}
.ibtn:hover{border-color:var(--brass-d);color:var(--brass-d);background:rgba(240,225,200,.8)}
.ibtn:active{transform:translateY(1px)}
.ibtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ibtn.icon-only{width:34px;padding:0}
.ibtn:disabled{opacity:.32;cursor:default}
.ibtn:disabled:hover{border-color:var(--line-2);color:var(--brass);background:rgba(240,225,200,.45)}

.btn{width:100%;padding:11px;border-radius:var(--r-s);cursor:pointer;
  font-family:var(--zh);letter-spacing:.1em;font-size:13px;border:1px solid;transition:.15s}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-d));
  color:#fff3e3;border-color:var(--accent-d);font-weight:600}
.btn.primary:hover{filter:brightness(1.12)}
.btn.ghost{background:rgba(240,225,200,.45);color:var(--brass);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--brass);color:#f5ecd8;border-color:var(--brass)}
.btnrow{display:grid;gap:7px}
.btnrow.c2{grid-template-columns:1fr 1fr}
a.btn,a.ibtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* 布局 */
.wrap{flex:1;display:flex;min-height:0;position:relative;flex-direction:row-reverse}
.side-ad{flex:none;width:120px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(180,200,170,.15);
  font-size:10px;color:var(--txt-3);letter-spacing:.06em;
  writing-mode:vertical-rl;text-orientation:mixed}
.site-foot{flex:none;display:flex;align-items:center;justify-content:center;
  gap:16px;padding:8px 16px;border-top:1px solid var(--line);
  background:rgba(180,200,170,.12)}
.site-foot a{font-size:11px;color:var(--txt-3);text-decoration:none;letter-spacing:.04em}
.site-foot a:hover{color:var(--brass)}
main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;
  padding:16px 16px 12px;min-height:0;
  background:radial-gradient(ellipse at 55% 45%, #2a2014 0%, #18120a 100%);}

/* =========================================================
   响应式适配
   ========================================================= */
/* 面板切换按钮默认隐藏（桌面端面板常驻） */
.panel-toggle{display:none}
.panel-mask{display:none}

/* 平板：隐藏竖条广告与头部横幅，收窄面板 */
@media (max-width: 1024px){
  .side-ad{display:none}
  .hdr-ad{display:none}
  :root{--panelW:288px}
  .brand .sub{display:none}
}

/* 手机：面板变为抽屉，地图全屏 */
@media (max-width: 768px){
  :root{--panelW:min(86vw,340px)}
  .panel-toggle{display:inline-flex}
  .brand h1{font-size:16px;letter-spacing:.14em}
  header{padding:8px 10px;gap:8px}
  header .ibtn .lbl{display:none}   /* 头部按钮只留图标 */
  header .ibtn{height:32px;padding:0 8px}

  /* 面板抽屉 */
  aside{
    position:fixed;top:0;right:0;bottom:0;z-index:70;
    width:var(--panelW);
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.2,.7,.3,1);
    box-shadow:-6px 0 30px rgba(0,0,0,.35);
  }
  body.panel-open aside{transform:translateX(0)}
  .panel-mask{
    position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);
    opacity:0;transition:opacity .28s;
  }
  body.panel-open .panel-mask{display:block;opacity:1}

  /* 底部工具栏：允许换行、按钮更紧凑 */
  .stagebar{gap:5px;padding:8px 10px;margin-top:8px;border-radius:8px}
  .stagebar .sep{height:16px;margin:0 1px}
  .stagebar .ibtn{height:30px}
  .maptitle{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stagebar .zoomv{min-width:36px;font-size:12px}

  main{padding:8px 8px 6px}
  .site-foot{font-size:10px;padding:6px 10px}
}