/* 广以社团嘉年华 · 活动地图 —— 移动端优先 */
:root{
  --bg:#f4f2ed; --ink:#2f342f; --ink-2:#6b7269; --line:#e0ddd4;
  --card:#fffefb; --npc:#c9762f; --club:#2f7d68; --me:#2b6cd4;
  --shadow:0 6px 26px rgba(60,55,40,.16);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 作者样式里的 display 会盖掉 UA 对 [hidden] 的 display:none，必须显式兜底 */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font:15px/1.55 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);background:var(--bg);
  overscroll-behavior:none;
}
#map{position:fixed;inset:0;background:var(--bg)}
.leaflet-container{background:var(--bg);font-family:inherit}

/* ── 顶栏 ───────────────────────────────────────── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:600;
  padding:calc(var(--safe-t) + 10px) 12px 10px;
  background:linear-gradient(#f4f2edf2 62%,#f4f2ed00);
  pointer-events:none;
}
.topbar-row{display:flex;align-items:center;gap:10px;pointer-events:auto}
.brand{flex:1;min-width:0;line-height:1.25}
.brand strong{display:block;font-size:17px;letter-spacing:.2px}
.brand span{display:block;font-size:11.5px;color:var(--ink-2)}
.icon-btn{
  flex:none;width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:11px;background:var(--card);
  color:var(--ink);cursor:pointer;box-shadow:0 2px 8px rgba(60,55,40,.08);
}
.icon-btn:active{transform:scale(.94)}
.filters{display:flex;gap:7px;margin-top:9px;pointer-events:auto;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 13px;min-height:36px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink-2);font-size:13px;font-weight:500;
  cursor:pointer;box-shadow:0 2px 8px rgba(60,55,40,.07);
}
.chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip span{opacity:.65;font-size:11.5px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot-npc{background:var(--npc)} .dot-club{background:var(--club)}

/* ── 地图标记 ───────────────────────────────────── */
.pin{position:relative;width:34px;height:42px;cursor:pointer}
.pin-body{
  position:absolute;left:1px;top:0;width:32px;height:32px;border-radius:50% 50% 50% 4px;
  transform:rotate(-45deg);border:2.5px solid #fff;
  box-shadow:0 3px 9px rgba(50,44,30,.32);
}
.pin-npc  .pin-body{background:var(--npc)}
.pin-club .pin-body{background:var(--club)}
.pin-ico{
  position:absolute;left:0;top:0;width:34px;height:32px;display:grid;place-items:center;
  color:#fff;font-size:14px;font-weight:700;line-height:1;pointer-events:none;
}
.pin-label{
  position:absolute;top:41px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:11px;font-weight:600;color:var(--ink);
  background:#fffefbe6;padding:1px 6px;border-radius:6px;
  border:1px solid var(--line);box-shadow:0 1px 4px rgba(60,55,40,.12);
}
.pin-label{transition:opacity .15s}
body.z-far .pin-label{opacity:0;pointer-events:none}
body.z-far .pin.is-active .pin-label{opacity:1}
.pin.is-active{z-index:900!important}
.pin.is-active .pin-body{transform:rotate(-45deg) scale(1.16);box-shadow:0 5px 14px rgba(50,44,30,.42)}
.me-dot{width:20px;height:20px;border-radius:50%;background:var(--me);
  border:3px solid #fff;box-shadow:0 0 0 1px #2b6cd455,0 2px 8px rgba(0,0,0,.3)}
.me-dot.is-sim{background:#8b5cd6}

/* ── 导航条 ─────────────────────────────────────── */
/* 放顶部而不是底部：底部会被详情卡（z 700）整条盖住，
   而导航过程中用户随时会点开摊位看小游戏规则和银票数。
   顶栏的筛选 chip 在导航时让位，两者不会叠。 */
.navbar{
  position:fixed;left:12px;right:12px;top:calc(var(--safe-t) + 56px);z-index:640;
  display:flex;align-items:center;gap:11px;
  padding:9px 10px 9px 11px;border-radius:15px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  animation:drop .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
body.nav-on .filters{display:none}

.nav-arrow{
  flex:none;width:38px;height:38px;padding:4px;box-sizing:border-box;
  border-radius:50%;background:var(--me);color:#fff;
  transition:transform .2s linear;
}
.nav-arrow.is-idle{background:var(--line);color:var(--ink-2)}
.navbar.is-arrived .nav-arrow{background:var(--club)}

.nav-txt{flex:1;min-width:0}
.nav-row1{display:flex;align-items:baseline;gap:8px;min-width:0}
#nav-dist{flex:none;font-size:18px;font-weight:700;letter-spacing:.2px}
#nav-dist.is-wait{font-size:14px;font-weight:600;color:var(--ink-2)}
.navbar.is-arrived #nav-dist{color:var(--club)}
#nav-name{flex:1;min-width:0;font-size:13px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nav-hint{display:block;margin-top:1px;font-size:11.5px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav-stop{
  flex:none;min-height:36px;padding:0 13px;border-radius:10px;
  border:1px solid var(--line);background:#f4f2ed;color:var(--ink-2);
  font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;
}
.nav-stop:active{transform:scale(.94)}

/* 地图上的路线。虚线朝目标方向流动，一眼看出「往哪走」 */
.nav-line{animation:dash 1.1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-17}}
.nav-halo{animation:halo 1.7s ease-out infinite}
@keyframes halo{0%{opacity:.95}70%{opacity:.18}100%{opacity:.95}}

/* 详情卡的主操作按钮 */
.sheet-act{padding:14px 0 2px}
.btn-nav{
  width:100%;min-height:46px;border-radius:13px;border:none;
  background:var(--me);color:#fff;font-size:15px;font-weight:600;
  font-family:inherit;cursor:pointer;
}
.btn-nav:active{transform:scale(.985);filter:brightness(.94)}
.btn-nav.is-on{background:#f4f2ed;color:var(--ink-2);border:1px solid var(--line)}

/* ── 右下角按钮 ─────────────────────────────────── */
.fabs{
  position:fixed;right:13px;bottom:calc(var(--safe-b) + 20px);z-index:600;
  display:flex;flex-direction:column;gap:10px;
}
.fab{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  cursor:pointer;box-shadow:var(--shadow);
}
.fab:active{transform:scale(.93)}
.fab-primary{background:var(--me);border-color:var(--me);color:#fff}
.fab-primary.is-off{background:var(--card);color:var(--ink-2);border-color:var(--line)}

/* ── 定位状态条 ─────────────────────────────────── */
.gps-bar{
  position:fixed;left:12px;right:12px;bottom:calc(var(--safe-b) + 20px);z-index:590;
  padding:9px 14px;border-radius:12px;background:#3a3f39ee;color:#fff;
  font-size:12.5px;line-height:1.45;box-shadow:var(--shadow);
  max-width:calc(100% - 78px);
}
.gps-bar.is-warn{background:#8a4b2aee}
.gps-bar b{font-weight:600}

/* ── 底部详情卡 ─────────────────────────────────── */
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:700;
  background:var(--card);border-radius:18px 18px 0 0;
  box-shadow:0 -8px 34px rgba(60,55,40,.2);
  padding:0 16px calc(var(--safe-b) + 18px);
  animation:up .22s cubic-bezier(.2,.9,.3,1);
  max-height:66vh;max-height:66dvh;overflow:auto;
}
@keyframes up{from{transform:translateY(102%)}to{transform:none}}
.sheet-grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:9px auto 4px}
.sheet-head{display:flex;align-items:center;gap:9px;padding:2px 0 10px;flex-wrap:wrap}
.sheet-head h2{flex:1;margin:0;font-size:19px;letter-spacing:.2px}
.sheet-x{width:32px;height:32px;border:none;background:#f0eee8}
.tag{
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;color:#fff;letter-spacing:.4px;
}
.tag-npc{background:var(--npc)} .tag-club{background:var(--club)}
.sheet-body dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 14px;align-items:baseline}
.sheet-body dt{color:var(--ink-2);font-size:12.5px;white-space:nowrap}
.sheet-body dd{margin:0;font-size:14.5px}
.dist{
  display:inline-flex;align-items:center;gap:5px;margin-top:12px;
  padding:7px 12px;border-radius:10px;background:#eef3f8;color:#2b5a94;
  font-size:13px;font-weight:600;
}
.dist.is-none{background:#f2f0ea;color:var(--ink-2);font-weight:500}
.cost{color:var(--npc);font-weight:600}

/* ── 面板（列表 / 设置）───────────────────────── */
.panel{
  position:fixed;left:0;right:0;bottom:0;top:auto;z-index:800;
  background:var(--card);border-radius:18px 18px 0 0;
  box-shadow:0 -8px 34px rgba(60,55,40,.24);
  max-height:82vh;max-height:82dvh;display:flex;flex-direction:column;
  animation:up .24s cubic-bezier(.2,.9,.3,1);
}
.panel-head{
  display:flex;align-items:center;gap:10px;padding:15px 16px 11px;
  border-bottom:1px solid var(--line);
}
.panel-head h2{flex:1;margin:0;font-size:16.5px}
.panel-body{overflow:auto;padding:8px 16px calc(var(--safe-b) + 18px);-webkit-overflow-scrolling:touch}
.muted{color:var(--ink-2);font-weight:400;font-size:12px;margin-left:7px}

.li{
  display:flex;align-items:center;gap:11px;padding:13px 4px;min-height:48px;
  border-bottom:1px solid #f0eee7;cursor:pointer;
}
.li:active{background:#faf8f3}
.li-ico{
  flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  color:#fff;font-size:13px;font-weight:700;
}
.li-ico.npc{background:var(--npc)} .li-ico.club{background:var(--club)}
.li-txt{flex:1;min-width:0}
.li-txt b{display:block;font-size:14.5px;font-weight:600}
.li-txt small{display:block;color:var(--ink-2);font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-dist{flex:none;font-size:12px;color:#2b5a94;font-weight:600}
.li-group{padding:14px 4px 6px;font-size:12px;font-weight:700;color:var(--ink-2);letter-spacing:.6px}

.row-toggle,.row-slider{
  display:flex;align-items:center;gap:14px;padding:13px 2px;
  border-bottom:1px solid #f0eee7;cursor:pointer;
}
.row-toggle span,.row-slider span{flex:1}
.row-toggle b,.row-slider b{display:block;font-size:14.5px;font-weight:600}
.row-toggle small,.row-slider small{display:block;color:var(--ink-2);font-size:12px;margin-top:2px}
.row-toggle input{width:44px;height:26px;flex:none;accent-color:var(--me)}
.row-slider{flex-wrap:wrap}
.row-slider input{width:100%;accent-color:var(--me)}
.diag{margin-top:16px;padding:12px 13px;background:#f7f5f0;border-radius:12px}
.diag h3{margin:0 0 8px;font-size:12.5px;color:var(--ink-2);letter-spacing:.5px}
.diag dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12.5px}
.diag dt{color:var(--ink-2)}
.diag dd{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;word-break:break-all}
.diag dd.bad{color:#b4442c;font-weight:600}
.diag dd.good{color:#2f7d68}
.foot{margin:14px 0 0;font-size:11.5px;color:var(--ink-2);line-height:1.7}
.foot code{background:#f0eee8;padding:1px 5px;border-radius:4px;font-size:11px}

.scrim{position:fixed;inset:0;z-index:750;background:rgba(45,42,34,.34);animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}

.toast{
  position:fixed;left:50%;bottom:calc(var(--safe-b) + 86px);transform:translateX(-50%);
  z-index:900;padding:10px 16px;border-radius:11px;background:#3a3f39f2;color:#fff;
  font-size:13px;max-width:84vw;text-align:center;box-shadow:var(--shadow);
  animation:fade .18s;
}

@media (min-width:720px){
  .sheet,.panel{left:auto;right:16px;width:392px;bottom:16px;border-radius:18px}
  .topbar,.navbar{max-width:430px}
  .navbar{right:auto}
}

/* 横屏：竖直空间只剩 400~500 px，面板占 82dvh 会把地图挤没。
   顶栏压扁、面板改成从右侧起的窄卡片。 */
@media (orientation:landscape) and (max-height:520px){
  /* 详情卡/面板变成右侧竖卡片，左边那一栏留给导航条和状态条。
     两者必须共用同一个宽度基准，否则导航条的右缘会压进卡片左缘
     —— 812×375 下实测重叠 30 px。 */
  :root{--side-w:min(400px,58vw);--left-w:min(420px,calc(100vw - min(400px,58vw) - 34px))}
  .topbar{padding-top:calc(var(--safe-t) + 6px);padding-bottom:6px}
  .brand strong{font-size:15px}
  .brand span{display:none}
  .filters{margin-top:6px}
  .navbar{top:calc(var(--safe-t) + 48px);left:12px;right:auto;width:var(--left-w)}
  .sheet,.panel{left:auto;right:10px;width:var(--side-w);
    max-height:calc(100dvh - 20px);bottom:8px;border-radius:16px}
  .fabs{bottom:calc(var(--safe-b) + 12px)}
  .gps-bar{left:12px;right:auto;width:var(--left-w);max-width:none;
    bottom:calc(var(--safe-b) + 12px)}
}

/* 系统开了「减弱动效」就别再让虚线爬、光圈闪 —— 这类持续动画是晕动症诱因 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}