/* 旅行青蛙 · 样式（全部变量化，零外部字体 / 图片 / 网络请求）
 * 布局：#app 纵向 flex → #stage（画布 + DOM 覆盖层） + #nav（底部导航）
 * 面板：桌面居中卡片（max-width 560px），移动端底部抽屉（transform 过渡）
 */

:root{
  /* 配色：米纸 / 木色 / 草绿 */
  --paper:      #f6efdc;
  --paper-2:    #efe4c8;
  --wood:       #b98a52;
  --wood-d:     #8a6132;
  --grass:      #6cb84f;
  --grass-d:    #4e8b3a;
  --ink:        #4a3b28;
  --ink-2:      #7a6a52;
  --gold:       #e8c25c;
  --red:        #e05a4a;
  --blue:       #5f9fd8;
  --pink:       #f2a6b8;

  /* 面板 */
  --panel-bg:     rgba(44,36,26,.94);
  --panel-bg-2:   rgba(58,48,35,.96);
  --panel-line:   rgba(255,255,255,.10);
  --panel-fg:     #f3ead3;
  --panel-fg-dim: rgba(243,234,211,.62);

  /* 形状 */
  --r:      16px;
  --r-s:    10px;
  --r-xs:   8px;
  --sh:     0 10px 30px rgba(30,20,10,.35);
  --sh-s:   0 3px 10px rgba(30,20,10,.22);

  /* 尺寸 */
  --tap:    44px;
  --speed:  .22s;

  /* 安全区 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #e0d3ae;
  color: var(--ink);
  font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#app{
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--safe-t) var(--safe-r) 0 var(--safe-l);
}

#stage{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #e0d3ae;
}

#c{
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: default;
}

#ui{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#ui > .hud,
#ui > .status,
#ui > .modal{ pointer-events: auto; }
.toasts{ pointer-events: none; }

/* ---------------- 顶部 HUD ---------------- */
.hud{
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
}
.hud-chips{ display: flex; gap: 8px; }
.chip{
  display: flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 12px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  box-shadow: var(--sh-s);
  color: var(--panel-fg);
  font-size: 15px; font-weight: 700;
  line-height: 1;
}
.chip canvas{ display: block; }
.chip b{ font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right; }

/* 天气 / 时段芯片 */
button.chip-weather{ cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 0 10px; gap: 6px; }
.chip-weather:active{ transform: translateY(1px); }
.chip-weather .w-ic{
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-style: normal; font-weight: 800;
  background: rgba(255,255,255,.14);
}
.chip-weather .w-tx{ font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.chip-weather.w-sunny .w-ic{ background: rgba(255,214,110,.22); color: #ffd76a; }
.chip-weather.w-cloudy .w-ic{ background: rgba(200,210,225,.20); color: #cfd8e6; }
.chip-weather.w-rain  .w-ic{ background: rgba(120,175,225,.24); color: #8ec6f2; }
.chip-weather.w-snow  .w-ic{ background: rgba(225,240,255,.24); color: #e8f3ff; }
.chip-weather.p-night{ background: rgba(30,42,78,.92); }

.hud-btns{ display: flex; gap: 6px; }
.ibtn{
  height: 36px; min-width: 52px; padding: 0 10px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--panel-fg);
  font-size: 13px; font-weight: 700;
  box-shadow: var(--sh-s);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ibtn:active{ transform: translateY(1px); }

/* ---------------- 左下状态卡 ---------------- */
.status{
  position: absolute;
  left: 12px; bottom: 12px;
  width: 176px;
  padding: 10px 12px;
  border-radius: var(--r-s);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  box-shadow: var(--sh-s);
  color: var(--panel-fg);
}
.st-title{ font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.st-row{ display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.st-lab{ font-size: 11px; color: var(--panel-fg-dim); width: 26px; flex: 0 0 auto; }
.bar{
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  overflow: hidden;
}
.bar-i{
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: 999px;
  will-change: transform;
  transition: transform .25s linear;
}
.b-mood{ background: linear-gradient(90deg,#f2a6b8,#f28aa0); }
.b-stam{ background: linear-gradient(90deg,#9fd07a,#6cb84f); }
.fps{
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--panel-fg-dim);
  font-variant-numeric: tabular-nums;
}

/* ---------------- Toast ---------------- */
.toasts{
  position: absolute;
  top: 54px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.toast{
  max-width: min(78%, 380px);
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  box-shadow: var(--sh-s);
  color: var(--panel-fg);
  font-size: 13px; font-weight: 600;
  text-align: center;
  animation: pop .22s ease-out;
  transition: opacity .3s linear, transform .3s ease-out;
}
@keyframes pop{
  from{ transform: translateY(-8px) scale(.96); opacity: 0; }
  to{ transform: none; opacity: 1; }
}
.t-info{ border-left: 4px solid var(--blue); }
.t-rare{ border-left: 4px solid var(--gold); background: rgba(72,54,20,.95); }
.t-mail{ border-left: 4px solid var(--pink); }
.t-buy { border-left: 4px solid var(--grass); }
.t-go  { border-left: 4px solid #8fc46a; }
.t-home{ border-left: 4px solid var(--gold); }
.t-snail{ border-left: 4px solid #c9604f; }
.t-tip { border-left: 4px solid #9aa4b0; }
.t-ach { border-left: 4px solid var(--gold); background: rgba(84,62,20,.96); }

/* ---------------- 面板（覆盖层） ---------------- */
#ui > .overlay{ pointer-events: none; }
#ui > .overlay.open{ pointer-events: auto; }

.overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--speed) ease;
}
.overlay.open{ opacity: 1; }
.mask{
  position: absolute;
  inset: 0;
  background: rgba(24,16,8,.48);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.panel{
  position: relative;
  width: min(560px, calc(100% - 24px));
  max-height: min(76%, 620px);
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  color: var(--panel-fg);
  overflow: hidden;
  transform: translateY(14px) scale(.985);
  transition: transform var(--speed) ease;
  will-change: transform;
}
.overlay.open .panel{ transform: none; }

.p-head{
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
}
.p-title{ margin: 0; font-size: 17px; font-weight: 800; letter-spacing: .5px; }
.p-close{
  height: 34px; min-width: 58px; padding: 0 12px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--panel-fg);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.p-tabs{
  flex: 0 0 auto;
  display: flex; gap: 6px;
  padding: 10px 12px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab{
  height: 36px; padding: 0 14px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--panel-fg-dim);
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.tab.on{ background: var(--wood); border-color: var(--wood); color: #2f2618; }

.p-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 14px 18px;
  touch-action: pan-y;
}

/* ---------------- 通用内容块 ---------------- */
.sec{
  margin: 14px 0 8px;
  font-size: 12px; font-weight: 800;
  color: var(--panel-fg-dim);
  letter-spacing: 1px;
}
.note{
  margin: 12px 0 6px;
  padding: 8px 12px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.07);
  font-size: 13px; font-weight: 600;
}
.tip{ margin: 10px 2px 0; font-size: 12px; line-height: 1.7; color: var(--panel-fg-dim); }
.empty{
  padding: 46px 10px; text-align: center;
  font-size: 13px; line-height: 1.8; color: var(--panel-fg-dim);
}
.danger{ background: var(--red); border-color: var(--red); color: #fff; }

.btn{
  height: 38px; min-width: 64px; padding: 0 14px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: var(--wood);
  color: #2f2618;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn.ghost{ background: rgba(255,255,255,.10); color: var(--panel-fg); }
.btn.sm{ height: 30px; min-width: 48px; padding: 0 10px; font-size: 12px; }
.btn.big{ height: var(--tap); min-width: 132px; font-size: 15px; }
.btn.off, .btn:disabled{ opacity: .42; cursor: not-allowed; }
.btn.seg{ min-width: 52px; padding: 0 8px; }
.btn.seg.on{ background: var(--gold); }
.btn:active:not(:disabled){ transform: translateY(1px); }

/* ---------------- 行囊 ---------------- */
.slots{ display: flex; gap: 10px; flex-wrap: wrap; }
.slot{
  flex: 1 1 96px;
  max-width: 152px;
  min-height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 6px;
  border-radius: var(--r-s);
  border: 1px dashed rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
  color: var(--panel-fg);
  cursor: pointer;
}
.slot.filled{ border-style: solid; background: rgba(232,194,92,.12); border-color: rgba(232,194,92,.45); }
.slot .s-ph{ font-size: 26px; line-height: 1; color: var(--panel-fg-dim); }
.slot .s-n{ font-size: 12px; font-weight: 700; }
.slot .s-x{ font-size: 11px; color: var(--panel-fg-dim); }
.slot canvas{ display: block; }

.picker{
  margin-top: 12px;
  padding: 10px;
  border-radius: var(--r-s);
  background: rgba(0,0,0,.22);
  border: 1px solid var(--panel-line);
}
.pk-h{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 800; margin-bottom: 8px;
}
.plist{ display: flex; flex-direction: column; gap: 6px; }
.prow{
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 6px 10px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.06);
  border: 1px solid transparent;
  color: var(--panel-fg);
  text-align: left;
  cursor: pointer;
}
.prow:active{ border-color: var(--wood); }
.prow .p-m{ flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prow .p-m b{ font-size: 13px; }
.prow .p-m em{ font-size: 11px; font-style: normal; color: var(--panel-fg-dim); line-height: 1.5; }
.prow .p-n{ font-size: 12px; color: var(--panel-fg-dim); }
.prow .p-add{
  flex: 0 0 auto; padding: 5px 10px;
  border-radius: 999px; background: var(--wood); color: #2f2618;
  font-size: 12px; font-weight: 800;
}
.s-ic{ display: inline-flex; flex: 0 0 auto; }
.s-ic canvas{ display: block; }

/* ---------------- 商店 ---------------- */
.glist{ display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.goods{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-s);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--panel-line);
}
.goods .g-ic{ flex: 0 0 auto; }
.goods canvas{ display: block; }
.g-m{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.g-m b{ font-size: 14px; display: flex; align-items: center; gap: 8px; }
.g-own{ font-style: normal; font-size: 11px; color: var(--panel-fg-dim); }
.g-m em{ font-style: normal; font-size: 11px; color: var(--panel-fg-dim); line-height: 1.6; }
.g-a{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.g-c{ font-size: 14px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.b-buy{ height: 34px; min-width: 62px; }

.lot{ display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0 4px; }
.lot-n{ font-size: 14px; }
.lot-n b{ color: var(--gold); font-size: 20px; }
.lot-res{ font-size: 13px; color: var(--panel-fg-dim); text-align: center; }
.lot-pool{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.lp{
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.07);
  font-size: 11px; color: var(--panel-fg-dim);
}

/* ---------------- 信件 ---------------- */
.mlist{ display: flex; flex-direction: column; gap: 8px; }
.mrow{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 76px; padding: 8px 12px 8px 8px;
  border-radius: var(--r-s);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--panel-line);
  color: var(--panel-fg);
  text-align: left;
  cursor: pointer;
}
.mrow.unread{ border-color: rgba(232,194,92,.5); background: rgba(232,194,92,.10); }
.mrow .m-pc canvas, .m-sh canvas{ display: block; border-radius: var(--r-xs); }
.m-pc{ flex: 0 0 auto; line-height: 0; }
.m-pc canvas{ width: 112px; height: auto; }
.m-sh{
  flex: 0 0 auto; width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs); background: rgba(0,0,0,.22);
}
.m-m{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.m-m b{ font-size: 13px; }
.m-m em{
  font-style: normal; font-size: 11px; color: var(--panel-fg-dim);
  line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dot{
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

/* ---------------- 图鉴 ---------------- */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.cell{
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 6px;
  border-radius: var(--r-s);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--panel-line);
}
.cell .c-img{ line-height: 0; }
.cell .c-img canvas{ display: block; width: 100%; height: auto; border-radius: var(--r-xs); }
.cell .c-q{
  width: 100%; aspect-ratio: 268 / 186;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs);
  background: rgba(0,0,0,.28);
  color: var(--panel-fg-dim);
  font-size: 24px; font-weight: 800;
}
.cell.lock{ opacity: .68; }
.cell .c-n{ font-size: 11px; text-align: center; color: var(--panel-fg); line-height: 1.4; }

/* ---------------- 成就 ---------------- */
.alist{ display: flex; flex-direction: column; gap: 8px; }
.arow{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-s);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--panel-line);
  opacity: .55;
}
.arow.on{ opacity: 1; border-color: rgba(232,194,92,.45); background: rgba(232,194,92,.10); }
.a-ic{ flex: 0 0 auto; }
.a-ic canvas{ display: block; }
.a-m{ flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a-m b{ font-size: 13px; }
.a-m em{ font-style: normal; font-size: 11px; color: var(--panel-fg-dim); line-height: 1.5; }
.a-st{ flex: 0 0 auto; font-size: 11px; color: var(--panel-fg-dim); }

/* ---------------- 设置 ---------------- */
.setlist{ display: flex; flex-direction: column; gap: 8px; }
.srow{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 8px 12px;
  border-radius: var(--r-s);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--panel-line);
}
.s-l{ font-size: 14px; font-weight: 600; }
.s-r{ display: flex; gap: 6px; align-items: center; }
.s-val{ font-size: 12px; color: var(--panel-fg-dim); }
.tips{ margin: 8px 0 0; padding-left: 20px; }
.tips li{ font-size: 12px; line-height: 1.9; color: var(--panel-fg-dim); }

/* ---------------- 弹层（明信片 / 喂食） ---------------- */
#ui > .modal{ pointer-events: none; opacity: 0; transition: opacity var(--speed) ease; }
#ui > .modal.open{ pointer-events: auto; opacity: 1; }
.modal{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,10,4,.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.mbox{
  width: min(560px, calc(100% - 28px));
  max-height: min(84%, 640px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px;
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--sh);
  color: var(--ink);
  transform: scale(.96);
  transition: transform var(--speed) ease;
}
.modal.open .mbox{ transform: none; }
.mbox-in{ display: flex; flex-direction: column; gap: 10px; }
.mbox h4{ margin: 2px 0; font-size: 16px; }
.pc-big{ line-height: 0; }
.pc-big canvas{ display: block; width: 100%; height: auto; border-radius: var(--r-xs); background: #fdf8ec; }
.pc-text{
  margin: 4px 2px 0;
  font-size: 14px; line-height: 1.9; color: var(--ink-2);
  padding: 10px 12px;
  border-radius: var(--r-xs);
  background: var(--paper-2);
}
.mail-big{ display: flex; justify-content: center; }
.sv-row{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sv-i{ display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sv-i em{ font-style: normal; font-size: 11px; color: var(--ink-2); }
.mbox-act{ display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.mbox .btn.ghost{ background: rgba(0,0,0,.08); color: var(--ink); }
.mbox .tip{ color: var(--ink-2); }
.mbox .plist .prow{ background: rgba(0,0,0,.05); color: var(--ink); }
.mbox .prow .p-m em{ color: var(--ink-2); }
.mbox .prow .p-n{ color: var(--ink-2); }

/* ---------------- 右下互动基座 ---------------- */
.dock{
  position: absolute;
  right: 10px; bottom: calc(10px);
  display: flex; gap: 6px;
  pointer-events: auto;
}
.dockb{
  position: relative;
  width: 46px; height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  background: var(--panel-bg);
  color: var(--panel-fg);
  box-shadow: var(--sh-s);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--speed) ease, opacity var(--speed) ease;
  will-change: transform;
}
.dockb:active:not(.off){ transform: scale(.94); }
.dockb .d-l{ font-size: 12px; font-weight: 800; line-height: 1.1; }
.dockb .d-s{
  font-style: normal; font-size: 9px; line-height: 1.1;
  color: var(--panel-fg-dim);
  max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dockb.off{ opacity: .45; }
.dockb.d-water .d-l{ color: #8ec6f2; }
.dockb.d-pet   .d-l{ color: var(--pink); }
.dockb.d-treat .d-l{ color: var(--gold); }
.dockb.d-guest .d-l{ color: var(--grass); }
.dockb.hot{
  border-color: rgba(232,194,92,.7);
  box-shadow: 0 0 0 2px rgba(232,194,92,.28), var(--sh-s);
  animation: dockPulse 1.4s ease-in-out infinite;
}
@keyframes dockPulse{
  0%,100%{ transform: scale(1); }
  50%    { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce){
  .dockb.hot{ animation: none; }
}

/* ---------------- 旅行手记 ---------------- */
.jlist{ display: flex; flex-direction: column; gap: 10px; }
.jrow{
  padding: 10px 12px;
  border-radius: var(--r-s);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--panel-line);
}
.jrow .j-h{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.jrow .j-h b{ font-size: 14px; color: var(--panel-fg); }
.jrow .j-t{ font-size: 11px; color: var(--panel-fg-dim); white-space: nowrap; }
.jrow .j-meta{ margin-top: 4px; font-size: 12px; color: var(--panel-fg-dim); }
.jrow .sv-row{ margin-top: 8px; justify-content: flex-start; }
.jrow .sv-i em{ color: var(--panel-fg-dim); }
.j-ev{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.jev{
  display: inline-block;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: #ffdf9a;
  background: rgba(232,194,92,.14);
  border: 1px solid rgba(232,194,92,.30);
}
.jev.dim{ color: var(--panel-fg-dim); background: rgba(255,255,255,.05); border-color: var(--panel-line); }

/* ---------------- 弹层里的访客 / 青蛙头图 ---------------- */
.g-hero{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.g-hero .g-hi{ flex: 0 0 auto; line-height: 0; }
.g-hero .g-hi canvas{ display: block; }
.g-hm{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.g-hm b{ font-size: 15px; }
.g-hm em{ font-style: normal; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.g-tag{
  align-self: flex-start; margin-top: 2px;
  font-style: normal; font-size: 11px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
  color: #6b4a1c; background: rgba(232,194,92,.55);
}
.prow.dim{ opacity: .72; }
.prow .p-ok, .prow .p-no{
  margin-left: 6px; font-style: normal; font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 999px; vertical-align: 1px;
}
.prow .p-ok{ color: #2f6b23; background: rgba(108,184,79,.32); }
.prow .p-no{ color: #7a6a52; background: rgba(122,106,82,.20); }
.goods.off{ opacity: .62; }

/* ---------------- 跑酷 / 布置 控件条 ---------------- */
/* 容器不拦截画布手势，仅按钮可点 */
.runbar{
  position: absolute;
  left: 0; right: 0;
  bottom: calc(62px + var(--safe-b));
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  pointer-events: none;
  z-index: 6;
}
.decobar{
  position: absolute;
  left: 8px; right: 8px; top: 52px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  pointer-events: none;
  z-index: 6;
}
.decosel{
  position: absolute;
  left: 0; right: 0;
  bottom: calc(62px + var(--safe-b));
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  pointer-events: none;
  z-index: 6;
}
.rb, .db, .ds{
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  border: 1px solid var(--panel-line);
  box-shadow: var(--sh-s);
  background: var(--panel-bg);
  color: var(--panel-fg);
  transition: transform var(--speed) ease, opacity var(--speed) ease;
  will-change: transform;
}
.rb{
  width: 64px; height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 50%;
}
.rb-k{ font-size: 22px; font-weight: 800; line-height: 1; }
.rb-l{ font-size: 11px; color: var(--panel-fg-dim); }
.rb.r-jump{ border-color: rgba(108,184,79,.6); }
.rb.r-roll{ border-color: rgba(95,159,216,.6); }
.rb:active{ transform: scale(.9); }
.db{
  height: 38px; min-width: 64px; padding: 0 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 800;
}
.db.on{ background: var(--wood); border-color: var(--wood); color: #2f2618; }
.db:active{ transform: translateY(1px); }
.ds{
  height: 38px; min-width: 72px; padding: 0 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 800;
}
.ds:active{ transform: translateY(1px); }

.nav-exit{ color: var(--gold); }
.nav-exit.on{ background: rgba(232,194,92,.14); }

/* 跑酷结算 */
.run-stat{
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--panel-line);
  font-size: 14px; font-weight: 700;
  color: var(--panel-fg);
}
.run-stat + .run-stat{ margin-top: 8px; }
.run-stat b{ color: var(--gold); font-size: 18px; font-variant-numeric: tabular-nums; }

/* ---------------- 底部导航 ---------------- */
#nav{
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 4px 4px calc(4px + var(--safe-b));
  background: var(--panel-bg);
  border-top: 1px solid var(--panel-line);
}
.navb{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: var(--tap);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-xs);
  background: transparent;
  color: var(--panel-fg-dim);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.navb.on{ background: rgba(255,255,255,.10); color: var(--gold); }
.navb:active{ background: rgba(255,255,255,.14); }
.navb .dot{
  position: absolute; top: 6px; right: 50%;
  margin-right: -18px;
  box-shadow: 0 0 0 2px rgba(44,36,26,.9);
}

/* ---------------- 加载 / 错误 ---------------- */
#loading{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg,#f6efdc,#e0d3ae);
  z-index: 60;
  transition: opacity .3s ease;
}
#loading.done{ opacity: 0; pointer-events: none; }
.ld-card{ width: min(320px, 78vw); text-align: center; }
.ld-title{
  font-size: 26px; font-weight: 800; color: var(--ink);
  letter-spacing: 4px; margin-bottom: 6px;
}
.ld-sub{ font-size: 12px; color: var(--ink-2); margin-bottom: 16px; }
.ld-bar{
  height: 10px; border-radius: 999px;
  background: rgba(90,70,40,.16);
  overflow: hidden;
}
.ld-bar i{
  display: block; height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--grass), var(--grass-d));
  transition: width .12s linear;
}
.ld-num{ margin-top: 8px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

#fatal{
  position: fixed; inset: 0;
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: #2b2419;
  color: #f3ead3;
  font-size: 14px; line-height: 1.9;
  white-space: pre-wrap;
  text-align: center;
}
#fatal[hidden]{ display: none; }

/* ---------------- 移动端：面板改为底部抽屉 ---------------- */
@media (max-width: 640px){
  .overlay{ align-items: flex-end; }
  .panel{
    width: 100%;
    max-width: none;
    max-height: 78%;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    transform: translateY(102%);
  }
  .status{ width: 168px; padding: 8px 10px; }
  .chip{ height: 34px; padding: 0 10px; font-size: 14px; }
  .ibtn{ min-width: 46px; padding: 0 8px; font-size: 12px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
  .toasts{ top: 52px; }
  .slot{ min-height: 96px; }
  .navb{ font-size: 11px; }
  .dock{ right: 8px; bottom: 8px; gap: 5px; }
  .dockb{ width: 42px; height: 44px; border-radius: 12px; }
  .dockb .d-l{ font-size: 11px; }
  .dockb .d-s{ font-size: 8px; max-width: 40px; }
  .runbar{ bottom: calc(56px + var(--safe-b)); gap: 9px; }
  .rb{ width: 56px; height: 56px; }
  .rb-k{ font-size: 19px; }
  .decobar{ top: 48px; gap: 6px; }
  .db{ height: 34px; min-width: 56px; padding: 0 12px; font-size: 12px; }
  .decosel{ bottom: calc(56px + var(--safe-b)); gap: 8px; }
  .ds{ height: 34px; min-width: 62px; padding: 0 14px; font-size: 12px; }
}
@media (max-width: 380px){
  .status{ width: 148px; }
  .chip-weather .w-tx{ display: none; }
}

@media (max-height: 460px){
  .status{ bottom: 8px; }
  .hud{ padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}