/* ============================================================
 * RobinGo · home.css —— 地图页
 * SLIPPY 风格：地图嵌在纸卡里，清单在纸卡上，橙色主按钮
 * ============================================================ */
body{ overflow:hidden; }

/* 底栏是 fixed 66px，地图页要把这块留出来，否则内容被压到栏下面 */
.view[data-view="home"]{ padding-bottom:calc(66px + env(safe-area-inset-bottom)); }

/* ---------------- 地图外框（纸卡） ---------------- */
.mapwrap{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  margin:14px 14px 0;
  border-radius:12px;
  overflow:hidden;
  background:var(--paper);
  border:3px solid var(--carbon);
  box-shadow:var(--hard);
}
#map{ position:absolute; inset:0; }
.maplibregl-ctrl-attrib{
  font-size:9px;
  opacity:.5;
  background:rgba(244,233,210,.85) !important;
  color:var(--carbon) !important;
  font-family:var(--font-body);
}
.maplibregl-ctrl-attrib a{ color:var(--carbon) !important; }

/* ---------------- 定位按钮 ---------------- */
.locate{
  position:absolute;
  right:12px;
  bottom:12px;
  width:44px;
  height:44px;
  border:2px solid var(--carbon);
  border-radius:10px;
  background:var(--paper);
  box-shadow:var(--hard-sm);
  color:var(--carbon);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
}
.locate:active{ transform:translate(2px,2px); box-shadow:none; }
.locate svg{ width:20px; height:20px; }

/* ---------------- 钱包/定位状态条 ---------------- */
.gatebar{
  position:absolute;
  left:12px;
  top:12px;
  display:flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  background:var(--paper);
  border:2px solid var(--carbon);
  box-shadow:var(--hard-sm);
  font-family:var(--font-title);
  font-size:11px;
  letter-spacing:.5px;
  color:var(--carbon);
  max-width:calc(100% - 24px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:3;
}
.dot{ width:8px; height:8px; border-radius:50%; background:#b3aa96; flex:0 0 auto; }
.dot.ok{ background:var(--green); }
.dot.bad{ background:var(--red); }

/* ---------------- 地图标记 ---------------- */
.mk-treasure{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--paper);
  border:3px solid var(--red);
  box-shadow:0 3px 0 0 var(--carbon);
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  transition:border-color .2s;
}
.mk-treasure.near{
  border-color:var(--orange);
  animation:pulse 1.5s infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 3px 0 0 var(--carbon), 0 0 0 0 rgba(245,163,0,.5); }
  55%{ box-shadow:0 3px 0 0 var(--carbon), 0 0 0 13px rgba(245,163,0,0); }
}
.mk-me{
  width:52px; height:52px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.mk-me .me-avatar{
  width:40px; height:40px; border-radius:50%;
  background:var(--blue); color:#fff;
  border:3px solid var(--paper);
  box-shadow:0 3px 0 0 var(--carbon), 0 0 0 7px rgba(61,132,234,.18);
  display:flex; align-items:center; justify-content:center;
  font-family:'Titan One', var(--font-head, sans-serif);
  font-size:19px; line-height:1;
  overflow:hidden;
}
.mk-me .me-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px dashed rgba(61,132,234,.55);
  animation:spinring 9s linear infinite;
  pointer-events:none;
}
@keyframes spinring{ to{ transform:rotate(360deg); } }
.mk-me .me-heading{
  position:absolute;
  transform:rotate(0deg);
  left:50%; top:50%;
  width:0; height:0;
  transform-origin:0 0;
  will-change:transform;
  pointer-events:none;
}
.mk-me .me-heading::before{
  content:'';
  position:absolute;
  left:-9px; top:-42px;
  width:0; height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:17px solid var(--orange);
  filter:drop-shadow(0 2px 0 var(--carbon));
}
.mk-treasure.inrange{
  border-color:var(--green, #2fbf71);
  box-shadow:0 3px 0 0 var(--carbon), 0 0 0 8px rgba(47,191,113,.25);
}

/* ---------------- 宝藏弹窗 ---------------- */
.ts-mask{
  position:fixed; inset:0;
  visibility:hidden;
  background:rgba(15,22,38,.42);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:55;
}
.ts-mask.show{ opacity:1; visibility:visible; pointer-events:auto; }
.ts-sheet{
  position:fixed;
  left:0; right:0;
  margin:0 auto;
  max-width:560px;
  /* 固定贴在导航栏(66px)上沿 */
  bottom:calc(66px + env(safe-area-inset-bottom));
  z-index:60;
  background:var(--paper);
  color:var(--carbon);
  border-top:3px solid var(--carbon);
  border-radius:22px 22px 0 0;
  box-shadow:0 -8px 24px rgba(15,22,38,.28);
  padding:16px 18px 20px;
  /* 收起态：彻底隐藏，不能用 translateY 往下推（会压到导航栏上） */
  opacity:0;
  visibility:hidden;
  transform:translateY(20px);
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.9,.25,1), visibility .24s;
  will-change:transform;
}
.ts-sheet.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.ts-head{ display:flex; align-items:center; gap:12px; }
.ts-ico{
  width:46px; height:46px; flex:0 0 auto;
  border-radius:12px; background:#fff;
  border:3px solid var(--carbon);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
}
.ts-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ts-info b{ font-size:16px; }
.ts-info span{ font-size:12px; opacity:.62; }
.ts-x{
  margin-left:auto;
  width:32px; height:32px; flex:0 0 auto;
  border-radius:50%; background:#fff;
  border:2px solid var(--carbon);
  font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.ts-progress{ margin:16px 0 14px; }
.ts-track{
  height:14px; border-radius:999px;
  background:rgba(15,22,38,.10);
  border:2px solid var(--carbon);
  overflow:hidden;
}
.ts-track i{
  display:block; height:100%; width:0;
  background:repeating-linear-gradient(45deg, var(--orange) 0 8px, #ffbf45 8px 16px);
  transition:width .28s ease;
}
.ts-meta{
  display:flex; align-items:baseline; gap:8px;
  margin-top:8px;
}
.ts-meta strong{
  font-family:'Titan One', var(--font-head, sans-serif);
  font-size:20px; line-height:1;
}
.ts-meta span{ font-size:12px; opacity:.68; }
.ts-actions{ display:flex; gap:10px; }
.ts-actions .btn.ghost{
  background:#fff;
  color:var(--carbon);
  border:3px solid var(--carbon);
  box-shadow:0 4px 0 0 var(--carbon);
}
.ts-actions .btn{ flex:1; }
.ts-actions .btn:disabled{
  background:rgba(15,22,38,.14);
  color:rgba(15,22,38,.45);
  border-color:rgba(15,22,38,.25);
  box-shadow:none;
  cursor:not-allowed;
}

/* ---------------- 底部宝藏清单（纸卡） ---------------- */
.dock{
  flex:0 0 auto;
  margin:14px 14px 0;
  padding:16px 16px 20px;
  background:var(--paper);
  color:var(--carbon);
  border:3px solid var(--carbon);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  box-shadow:var(--hard);
}
.dock-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.dock-head h2{
  font-family:var(--font-title);
  font-size:18px;
  margin:0;
  color:var(--carbon);
  display:flex;
  align-items:center;
  gap:9px;
}
.dock-head h2::before{
  content:'';
  width:11px;height:11px;
  background:var(--orange);
  border:2px solid var(--carbon);
  border-radius:3px;
}
.dock-head .chip{
  background:var(--paper3);
  color:var(--carbon);
  border:2px solid var(--carbon);
}
.dock-list{
  max-height:132px;
  overflow-y:auto;
  margin-bottom:12px;
}
.dock-list::-webkit-scrollbar{ width:0; }

.trow{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 0;
  border-bottom:2px solid rgba(20,16,9,.1);
}
.trow:last-child{ border-bottom:0; }
.trow .ico{
  width:38px; height:38px;
  border-radius:10px;
  background:var(--paper3);
  border:2px solid var(--carbon);
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  flex:0 0 auto;
}
.trow .txt{ flex:1; min-width:0; }
.trow .txt b{
  font-size:14px;
  font-weight:800;
  display:block;
  color:var(--carbon);
}
.trow .txt span{
  font-size:11.5px;
  font-weight:600;
  color:rgba(20,16,9,.55);
}
.trow .dist{
  font-family:var(--font-title);
  font-size:12px;
  color:rgba(20,16,9,.55);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.trow .dist.near{ color:var(--red); }

/* maplibre 画布铺满容器 */
#map{ position:absolute; inset:0; }

/* ================= 地图内导航面板 ================= */
.nav-panel{
  position:absolute; left:12px; right:12px; top:12px; z-index:35;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  background:var(--paper,#f4e9d2);
  border:3px solid #0b1020;
  border-radius:14px;
  box-shadow:4px 5px 0 #0b1020;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-panel.show{ opacity:1; visibility:visible; transform:translateY(0); }

.np-arrow{
  width:42px; height:42px; flex:0 0 42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:#f5a300;
  border:3px solid #0b1020; color:#0b1020;
  will-change:transform;
}
.np-arrow svg{ width:24px; height:24px; }
/* 箭头：0°=正上方(前)，顺时针 */
.np-arrow svg{ transform:rotate(0deg); }
.np-arrow .np-needle{ transform-origin:center; }

.np-body{ display:flex; flex-direction:column; min-width:0; flex:1; }
.np-body b{ font-size:14px; line-height:1.2; color:#0b1020; }
.np-body span{ font-size:12px; color:#5a5140; line-height:1.3; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.np-dist{
  font-family:"Titan One",system-ui,sans-serif;
  font-size:18px; color:#0b1020; white-space:nowrap;
}

.np-close{
  width:26px; height:26px; flex:0 0 26px; padding:0;
  border-radius:50%; border:2px solid #0b1020;
  background:#fff; color:#0b1020; font-size:12px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* 定位精度圈：告诉用户"我大概在这个圆里"，不是精确到点 */
.acc-circle {
  border-radius: 50%;
  border: 2px solid rgba(54, 142, 255, .5);
  background: rgba(54, 142, 255, .10);
  pointer-events: none;
  box-sizing: border-box;
}

/* 底图加载慢时的可见提示 */
.map-warn{
  position:absolute; left:50%; top:16px; transform:translateX(-50%);
  z-index:30; padding:7px 14px;
  background:rgba(11,16,32,.86); color:#f4e9d2;
  font:600 12px/1.4 var(--font-body, system-ui); border-radius:999px;
  pointer-events:none; white-space:nowrap;
}