/* ============================================================
   像素海南 PIXEL HAINAN — 视觉系统
   风格参考：Stardew Valley 的暖木色像素 UI
   ============================================================ */

/* 主像素字体：Cubic 11（俐方體11号，OFL）——覆盖 10268 字 */
@font-face {
  font-family: 'PixelCN';
  src: url('../fonts/cubic11.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* 兜底像素字体：主字体未收录的字用这两层补，视觉仍为像素风 */
@font-face {
  font-family: 'PixelFill9';
  src: url('../fonts/pixelfill9.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PixelFill7';
  src: url('../fonts/pixelfill7.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* 主字体：Fusion Pixel 12（Fusion Pixel Font，OFL）——12px 原生网格，
   全站字号归 12/24/48 网格，100%/125%/150% 缩放下均按整数像素渲染，不再发糊 */
@font-face {
  font-family: 'Fusion Pixel 12';
  src: url('../fonts/fusion-pixel-12-subset.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 描边 / 墨色 */
  --outline:   #3a2412;
  --outline-2: #5c3a1e;
  --ink:       #2b1a0c;
  --ink-soft:  #6b4a2a;

  /* 面板 / 纸张 */
  --panel:     #f8e9c6;
  --panel-2:   #f0dcae;
  --panel-3:   #e7cd96;
  --paper:     #fdf5e0;

  /* 木质 */
  --wood:      #b5793f;
  --wood-d:    #7d4a1e;
  --wood-w:    #d6a565;

  /* 金 / 高光 */
  --gold:      #e8b551;
  --gold-l:    #f7dc9a;

  /* 海 */
  --sea-1:     #a8e6f2;
  --sea-2:     #5cc4e0;
  --sea-3:     #2f9dc8;
  --sea-4:     #1d6d97;

  /* 陆 */
  --grass-1:   #a8dd7a;
  --grass-2:   #6dbb5a;
  --grass-3:   #3d8f45;
  --grass-4:   #26663a;
  --sand-1:    #f7dfa6;
  --sand-2:    #eec37a;
  --sand-3:    #d7a35c;

  /* 强调 */
  --coral:     #ef6b4a;
  --red:       #d9424a;
  --red-d:     #a32a33;
  --purple:    #7a5aa8;
  --teal:      #2f8f7e;

  --px-clip: polygon(
    9px 0, calc(100% - 9px) 0, calc(100% - 9px) 3px, calc(100% - 6px) 3px,
    calc(100% - 6px) 6px, calc(100% - 3px) 6px, calc(100% - 3px) 9px, 100% 9px,
    100% calc(100% - 9px), calc(100% - 3px) calc(100% - 9px), calc(100% - 3px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 3px),
    calc(100% - 9px) calc(100% - 3px), calc(100% - 9px) 100%, 9px 100%,
    9px calc(100% - 3px), 6px calc(100% - 3px), 6px calc(100% - 6px),
    3px calc(100% - 6px), 3px calc(100% - 9px), 0 calc(100% - 9px), 0 9px,
    3px 9px, 3px 6px, 6px 6px, 6px 3px, 9px 3px
  );
  --px-clip-sm: polygon(
    6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px),
    calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%,
    6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px),
    0 6px, 3px 6px, 3px 3px, 6px 3px
  );
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #f6e6c2;
}

body {
  position: relative;
  font-family: 'Fusion Pixel 12', 'PixelCN', 'PixelFill9', 'PixelFill7', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-size: 12px;
  line-height: 2;
  color: var(--ink);
  -webkit-font-smoothing: none;
  font-smooth: never;
  /* 像素字体禁止浏览器合成粗体/斜体——合成笔画会糊掉像素网格 */
  font-synthesis: none;
  font-synthesis-weight: none;
  font-synthesis-style: none;
  letter-spacing: 0px;
  overflow-x: hidden;
}

b, strong { font-weight: normal; }
button { font-family: inherit; font-size: inherit; }

/* 页面背景：暖沙纸色（随文档滚动），保证正文可读 */
.page-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  min-height: 100%;
  z-index: -2;
  background:
    linear-gradient(180deg,
      #fdf4dc 0%, #faeed0 26%, #f6e6c2 52%, #f0dcae 78%, #e9d3a2 100%);
}
.page-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(125,74,30,.05) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(125,74,30,.05) 0 2px, transparent 2px 4px);
  pointer-events: none;
}

img { image-rendering: pixelated; }
canvas { image-rendering: pixelated; }

/* ============ 通用像素面板 ============ */
.px {
  clip-path: var(--px-clip);
  filter: drop-shadow(0 4px 0 rgba(43,26,12,.32));
}
.px-sm {
  clip-path: var(--px-clip-sm);
  filter: drop-shadow(0 3px 0 rgba(43,26,12,.30));
}
.panel {
  background: var(--panel);
  border: 3px solid var(--outline);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(125,74,30,.20),
    inset 3px 0 0 rgba(255,255,255,.30),
    inset -3px 0 0 rgba(125,74,30,.14);
}
.panel-dark {
  background: var(--wood-d);
  border: 3px solid var(--outline);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.16), inset 0 -3px 0 rgba(0,0,0,.28);
}

/* ============ 顶栏 ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  background: linear-gradient(180deg, #c98b4b 0%, #a86a33 45%, #8c5323 100%);
  border-bottom: 3px solid var(--outline);
  box-shadow: 0 4px 0 rgba(43,26,12,.28), inset 0 2px 0 rgba(255,255,255,.28);
}
.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 9px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.brand-mark {
  width: 34px; height: 34px;
  background: var(--panel);
  border: 3px solid var(--outline);
  display: grid; place-items: center;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6);
}
.brand-mark canvas { width: 22px; height: 22px; }
.brand-txt { line-height: 28px; }
.brand-txt b {
  display: block;
  font-size: 24px;
  color: #fff6de;
  text-shadow: 2px 2px 0 var(--outline), -1px -1px 0 var(--outline);
  letter-spacing: 1px;
}
.brand-txt span {
  font-size: 12px;
  color: #ffe6b8;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 rgba(43,26,12,.7);
}

.nav { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }
.nav-btn {
  font-family: inherit;
  font-size: 12px;
  color: #fff3d8;
  background: linear-gradient(180deg, #d09a58 0%, #a86a33 100%);
  border: 3px solid var(--outline);
  padding: 6px 13px 7px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 3px 0 rgba(43,26,12,.45), inset 0 2px 0 rgba(255,255,255,.32);
  text-shadow: 1px 1px 0 rgba(43,26,12,.6);
  transition: none;
  clip-path: var(--px-clip-sm);
}
.nav-btn:hover { background: linear-gradient(180deg, #e0aa66 0%, #b87a3d 100%); }
.nav-btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 2px 0 rgba(255,255,255,.2); }
.nav-btn.on {
  background: linear-gradient(180deg, #f7dc9a 0%, #e8b551 100%);
  color: var(--ink);
  text-shadow: none;
}
.nav-btn .cnt {
  display: inline-block;
  min-width: 17px;
  margin-left: 5px;
  padding: 0 3px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--outline);
  vertical-align: 1px;
}

/* ============ Hero ============ */
.hero {
  position: relative;
  border-bottom: 4px solid var(--outline);
  overflow: hidden;
  background: #8ed3e8;
}
.hero canvas { display: block; width: 100%; height: auto; }
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(20px, 6vw, 84px);
  pointer-events: none;
}
.hero-badge {
  align-self: flex-start;
  font-size: 12px;
  letter-spacing: 2px;
  color: #fff8e6;
  background: rgba(58,36,18,.72);
  border: 3px solid var(--outline);
  padding: 3px 10px 4px;
  margin-bottom: 12px;
  box-shadow: 0 3px 0 rgba(0,0,0,.28);
}
.hero-title {
  margin: 0;
  /* 36px 是该像素字体在 Chromium 的安全上限（≥40px 会出现横向断行渲染缺陷），
     大字号视觉由 app.js 用 36px 离屏渲染 + 最邻近×2 放大的 canvas 呈现 */
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 3px;
  color: #fffaf0;
  text-shadow:
     4px  0 0 var(--outline), -4px  0 0 var(--outline),
     0  4px 0 var(--outline),  0 -4px 0 var(--outline),
     4px  4px 0 var(--outline), -4px -4px 0 var(--outline),
     4px -4px 0 var(--outline), -4px  4px 0 var(--outline),
     9px 9px 0 rgba(43,26,12,.30);
  max-width: 15ch;
}
.hero-title .ht-text {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.hero-title .ht-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(8px 8px 0 rgba(43,26,12,.30));
}
.hero-title em {
  font-style: normal;
  color: var(--gold-l);
  display: block;
}
.hero-slogan {
  margin: 14px 0 0;
  font-size: 24px;
  letter-spacing: 3px;
  line-height: 28px;
  color: var(--gold-l);
  text-shadow:
     3px  0 0 var(--outline), -3px  0 0 var(--outline),
     0  3px 0 var(--outline),  0 -3px 0 var(--outline),
     3px  3px 0 var(--outline), -3px -3px 0 var(--outline),
     3px -3px 0 var(--outline), -3px  3px 0 var(--outline),
     6px 6px 0 rgba(43,26,12,.28);
}
#jStat { display: flex; margin-top: 11px; }
.hero-sub {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 2;
  color: #fff6e4;
  text-shadow: 2px 2px 0 rgba(43,26,12,.75), -1px -1px 0 rgba(43,26,12,.6);
  max-width: 46ch;
}
.hero-cta {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  pointer-events: auto;
}
.hero-stats {
  position: absolute;
  right: clamp(14px, 4vw, 54px);
  bottom: 20px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.stat {
  background: rgba(253, 245, 224, .94);
  border: 3px solid var(--outline);
  padding: 6px 11px 7px;
  text-align: center;
  box-shadow: 0 3px 0 rgba(43,26,12,.35);
  min-width: 76px;
}
.stat b { display: block; font-size: 24px; line-height: 28px; color: var(--wood-d); }
.stat span { font-size: 12px; letter-spacing: 1px; color: var(--ink-soft); }

/* ============ 按钮 ============ */
.btn {
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  border: 3px solid var(--outline);
  padding: 7px 16px 8px;
  background: linear-gradient(180deg, #e8b551 0%, #c98b2c 100%);
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(43,26,12,.42), inset 0 3px 0 rgba(255,255,255,.45);
  clip-path: var(--px-clip-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 18px;
  transition: none;
  white-space: nowrap;
}
.btn:hover { background: linear-gradient(180deg, #f7cd78 0%, #d89c38 100%); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,0); }
.btn-ghost {
  background: linear-gradient(180deg, #fdf5e0 0%, #e9d4a5 100%);
}
.btn-ghost:hover { background: linear-gradient(180deg, #fffdf5 0%, #f2e2ba 100%); }
.btn-sea {
  background: linear-gradient(180deg, #6fd0e8 0%, #2f9dc8 100%);
  color: #06303f;
}
.btn-sea:hover { background: linear-gradient(180deg, #8ee0f2 0%, #3fb0da 100%); }
.btn-red {
  background: linear-gradient(180deg, #ef6f6f 0%, #cf3b45 100%);
  color: #fff4f4;
  text-shadow: 1px 1px 0 rgba(90,10,15,.6);
}
.btn-red:hover { background: linear-gradient(180deg, #ff8b8b 0%, #e04a54 100%); }
.btn-sm { font-size: 12px; padding: 5px 11px 6px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }
.btn[disabled]:active { transform: none; }

/* ============ 区块 ============ */
.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 46px 16px 10px;
}
.sec-head { margin-bottom: 20px; }
.sec-kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 3px;
  color: #fff8e6;
  background: var(--wood-d);
  border: 3px solid var(--outline);
  padding: 2px 9px 3px;
  box-shadow: 0 3px 0 rgba(43,26,12,.28);
  margin-bottom: 10px;
}
.sec-title {
  margin: 0;
  font-size: 24px;
  letter-spacing: 2px;
  color: #fffaf0;
  text-shadow:
    3px 0 0 var(--outline), -3px 0 0 var(--outline),
    0 3px 0 var(--outline), 0 -3px 0 var(--outline),
    3px 3px 0 var(--outline), -3px -3px 0 var(--outline),
    3px -3px 0 var(--outline), -3px 3px 0 var(--outline),
    6px 6px 0 rgba(43,26,12,.26);
  line-height: 28px;
}
.sec-desc {
  margin: 9px 0 0;
  font-size: 12px;
  color: #5c3a1e;
  max-width: 78ch;
  line-height: 2;
}
.sec-desc b { color: var(--red-d); }

/* ============ 地图 ============ */
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.map-stage {
  position: relative;
  background: #2f9dc8;
  border: 4px solid var(--outline);
  box-shadow: 0 6px 0 rgba(43,26,12,.32), inset 0 0 0 3px #a8e6f2;
  overflow: hidden;
}
.map-stage canvas { display: block; width: 100%; height: auto; }
.map-markers { position: absolute; inset: 0; }
.mk {
  position: absolute;
  transform: translate(-50%, -100%);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.mk-pin {
  display: block;
  width: 17px; height: 17px;
  background: var(--red);
  border: 3px solid var(--outline);
  box-shadow: 0 3px 0 rgba(43,26,12,.45);
  image-rendering: pixelated;
}
.mk:hover .mk-pin, .mk.on .mk-pin { background: var(--gold); transform: translateY(-3px); }
.mk-label {
  position: absolute;
  left: 50%;
  top: -13px;
  transform: translate(-50%, -100%);
  font-size: 12px;
  white-space: nowrap;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--outline);
  padding: 2px 6px 3px;
  opacity: 0;
  pointer-events: none;
  transition: none;
  box-shadow: 0 3px 0 rgba(43,26,12,.3);
}
.mk:hover .mk-label, .mk.on .mk-label { opacity: 1; }
.mk.done .mk-pin { background: #2f8f7e; }
.mk-city span {
  position: absolute;
  left: 50%; top: 100%;
  transform: translate(-50%, 2px);
  font-size: 12px;
  color: #fffaf0;
  text-shadow: 1px 1px 0 var(--outline), -1px -1px 0 var(--outline),
               1px -1px 0 var(--outline), -1px 1px 0 var(--outline);
  white-space: nowrap;
  pointer-events: none;
}
.mk-city .mk-pin { width: 13px; height: 13px; background: #f8e9c6; }

.map-side { display: flex; flex-direction: column; gap: 13px; }
.map-toolbar { padding: 11px 12px 13px; }
.map-toolbar h4 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--wood-d);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: inherit;
  font-size: 12px;
  border: 3px solid var(--outline);
  padding: 3px 9px 4px;
  cursor: pointer;
  background: var(--panel-2);
  color: var(--ink);
  box-shadow: 0 3px 0 rgba(43,26,12,.28);
  clip-path: var(--px-clip-sm);
}
.chip:hover { background: var(--gold-l); }
.chip.on { background: var(--gold); box-shadow: 0 3px 0 rgba(43,26,12,.45), inset 0 2px 0 rgba(255,255,255,.5); }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--ink-soft); }
.legend i {
  display: inline-block; width: 11px; height: 11px;
  border: 2px solid var(--outline); vertical-align: -1px; margin-right: 4px;
}

/* 详情卡（图鉴 / 地图共用） */
.detail { padding: 0; overflow: hidden; }
.pd-hero {
  position: relative;
  aspect-ratio: 16 / 10;
  border-bottom: 3px solid var(--outline);
  background: linear-gradient(180deg, #8ed3e8, #2f9dc8);
  overflow: hidden;
}
.pd-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pd-hero img.pd-px { image-rendering: pixelated; }
.pd-hero .pd-fallback {
  position: absolute; inset: 0; display: none;
  place-items: center;
}
.pd-hero.noimg .pd-fallback { display: grid; }
.pd-hero.noimg .pd-photo, .pd-hero.noimg .pd-px { display: none !important; }
.pd-hero .pd-fallback canvas { width: 64px; height: 64px; filter: drop-shadow(3px 4px 0 rgba(43,26,12,.35)); }
.pd-toggle {
  position: absolute; right: 8px; bottom: 8px;
  font: inherit; font-size: 12px; letter-spacing: 1px;
  color: var(--ink); cursor: pointer;
  background: var(--paper);
  border: 3px solid var(--outline);
  box-shadow: 2px 2px 0 rgba(43,26,12,.35);
  padding: 3px 9px 4px;
}
.pd-toggle:hover { background: var(--gold-l); }
.pd-toggle:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(43,26,12,.35); }
.cat-flag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 12px; letter-spacing: 1px;
  border: 2px solid var(--outline);
  padding: 1px 6px 2px;
  background: var(--paper);
  box-shadow: 2px 2px 0 rgba(43,26,12,.3);
}
.done-flag {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: 12px; letter-spacing: 1px;
  border: 2px solid var(--outline);
  padding: 1px 6px 2px;
  background: var(--teal);
  color: #f0fffa;
  box-shadow: 2px 2px 0 rgba(43,26,12,.3);
}
.detail-body { padding: 13px 14px 15px; }
.detail h3 { margin: 0 0 3px; font-size: 24px; letter-spacing: 1px; color: var(--wood-d); }
.detail .city {
  font-size: 12px; letter-spacing: 1px; color: var(--ink-soft);
  display: inline-block; margin-bottom: 9px;
}
.detail .tagline {
  font-size: 12px; color: var(--coral);
  border-left: 4px solid var(--coral);
  padding-left: 8px; margin: 0 0 10px; line-height: 2;
}
.detail .desc { font-size: 12px; line-height: 2; color: #4a3320; margin: 0 0 12px; }
.kv { display: grid; grid-template-columns: 62px 1fr; gap: 3px 9px; font-size: 12px; margin-bottom: 11px; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; color: var(--ink); }
.detail .tip {
  font-size: 12px; line-height: 2;
  background: #fff6de;
  border: 3px dashed #c9a05c;
  padding: 8px 10px;
  margin: 0 0 12px;
}
.detail .tip b { color: var(--red-d); }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============ 图鉴：工具栏 ============ */
.atlas-tools {
  padding: 12px 14px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 14px;
  margin-bottom: 18px;
}
.atlas-search { position: relative; flex: 1 1 250px; min-width: 215px; }
.atlas-search input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 12px; color: var(--ink);
  background: #fffaf0;
  border: 3px solid var(--outline);
  box-shadow: inset 2px 2px 0 rgba(43,26,12,.1), 3px 3px 0 rgba(43,26,12,.28);
  padding: 7px 32px 8px 10px; outline: none;
}
.atlas-search input::placeholder { color: #b08d5e; }
.atlas-search input:focus { background: #ffffff; }
.atlas-search-clear {
  position: absolute; right: 6px; top: 9px;
  width: 22px; height: 22px; padding: 0;
  font: inherit; font-size: 12px; line-height: 1;
  color: var(--ink-soft); cursor: pointer;
  background: var(--paper); border: 2px solid var(--outline);
  display: none; place-items: center;
}
.atlas-search.has-q .atlas-search-clear { display: grid; }
.atlas-count { font-size: 12px; color: var(--ink-soft); margin-left: auto; white-space: nowrap; }

/* ============ 图鉴：主从布局 ============ */
.atlas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 18px;
  align-items: start;
}
.atlas-side { position: sticky; top: 74px; }
.atlas-side .detail { scroll-margin-top: 74px; }

/* ============ 图鉴网格 ============ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px;
}
.card { overflow: hidden; cursor: pointer; display: flex; flex-direction: column; position: relative; }
.card:hover { filter: drop-shadow(0 6px 0 rgba(43,26,12,.4)) brightness(1.02); }
.card.sel { box-shadow: 0 0 0 3px var(--red), 0 7px 0 rgba(43,26,12,.42); }
.card-thumb {
  height: auto;
  aspect-ratio: 16 / 10;
  border-bottom: 3px solid var(--outline);
  position: relative;
  overflow: hidden;
  display: block;
}
.card-thumb img.cover {
  width: 100%; height: 100%; object-fit: cover; display: block;
  image-rendering: pixelated;
  background: #cfb98a;
}
.card-thumb .ph-fallback {
  position: absolute; inset: 0; display: none; place-items: center;
}
.card-thumb.noimg img.cover { display: none; }
.card-thumb.noimg .ph-fallback { display: grid; }
.card-thumb .ph-fallback canvas { width: 56px; height: 56px; filter: drop-shadow(3px 4px 0 rgba(43,26,12,.3)); }
.card:hover .card-thumb .ph-fallback canvas { transform: translateY(-3px); }
.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin: 0 0 2px; font-size: 12px; color: var(--wood-d); letter-spacing: 1px; }
.card-body .tl { font-size: 12px; color: var(--coral); margin: 0 0 7px; line-height: 2; }
.card-body .mini { font-size: 12px; color: var(--ink-soft); line-height: 2; flex: 1; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: 9px; padding-top: 9px;
  border-top: 2px dashed #c9a05c;
}
.card-foot .b { font-size: 12px; color: var(--ink-soft); }

/* ============ 图鉴：移动端抽屉 ============ */
.drawer-mask { display: none; }

/* ============ 手账 ============ */
.journal-wrap { position: relative; }
.journal-book {
  background:
    radial-gradient(rgba(125,74,30,.16) 1px, transparent 1px) 0 0 / 13px 13px,
    linear-gradient(180deg, #fdf5e0, #f6e8c8);
  border: 4px solid var(--outline);
  box-shadow: 0 7px 0 rgba(43,26,12,.32), inset 0 0 0 3px #e8cfa0;
  padding: 20px clamp(14px, 3vw, 30px) 26px;
  position: relative;
}
.journal-book::before {
  content: '';
  position: absolute; left: 27px; top: 0; bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(217,66,74,.34) 0 6px, transparent 6px 12px);
  pointer-events: none;
}
.j-head {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding-bottom: 13px; margin-bottom: 18px;
  border-bottom: 3px double var(--wood);
}
.j-head h3 { margin: 0; font-size: 24px; color: var(--wood-d); letter-spacing: 2px; }
.j-head .j-sub { font-size: 12px; color: var(--ink-soft); }
.j-progress { margin-left: auto; min-width: 178px; }
.j-progress .bar {
  height: 15px;
  border: 3px solid var(--outline);
  background: #e2cda2;
  position: relative;
  overflow: hidden;
}
.j-progress .bar i {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, #5fbf6a 0 6px, #4aa855 6px 12px);
  transition: none;
}
.j-progress .lbl { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }

.j-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.j-card {
  position: relative;
  background: #fffdf4;
  border: 3px solid var(--outline);
  padding: 13px 13px 11px;
  box-shadow: 4px 5px 0 rgba(43,26,12,.22);
  clip-path: var(--px-clip-sm);
}
/* 便签不做 rotate——旋转会让文字重栅格化而发糊，改用贴纸胶带营造手作感 */
.j-washi {
  position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 92px; height: 21px;
  background: repeating-linear-gradient(45deg,
    rgba(232,181,81,.85) 0 5px, rgba(247,220,154,.85) 5px 10px);
  border-left: 2px solid rgba(58,36,18,.35);
  border-right: 2px solid rgba(58,36,18,.35);
  opacity: .95;
}
.j-washi.p2 { background: repeating-linear-gradient(45deg, rgba(111,208,232,.8) 0 5px, rgba(168,230,242,.8) 5px 10px); }
.j-washi.p3 { background: repeating-linear-gradient(45deg, rgba(239,107,74,.75) 0 5px, rgba(255,190,160,.8) 5px 10px); }
.j-washi.p4 { background: repeating-linear-gradient(45deg, rgba(122,90,168,.7) 0 5px, rgba(200,180,230,.8) 5px 10px); }
.j-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.j-stamp {
  width: 54px; height: 54px; flex: 0 0 54px;
  border: 3px solid var(--red-d);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--red-d);
  transform: rotate(-9deg);
  opacity: .9;
  position: relative;
}
.j-stamp::after {
  content: '';
  position: absolute; inset: 3px;
  border: 2px dashed currentColor;
  border-radius: 50%;
  opacity: .6;
}
.j-stamp span { font-size: 12px; line-height: 12px; text-align: center; letter-spacing: 1px; }
.j-stamp canvas { width: 30px; height: 30px; }
.j-meta { flex: 1; min-width: 0; }
.j-meta h4 { margin: 0 0 2px; font-size: 12px; color: var(--wood-d); }
.j-meta .d { font-size: 12px; color: var(--ink-soft); letter-spacing: 1px; }
.j-note {
  font-size: 12px;
  line-height: 2;
  color: #4a3320;
  min-height: 40px;
  background-image: repeating-linear-gradient(180deg, transparent 0 23px, rgba(125,74,30,.20) 23px 24px);
  padding: 0 2px 6px;
  word-break: break-word;
  white-space: pre-wrap;
}
.j-note.empty { color: #a08a6c; }
.j-acts { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }
.j-empty {
  text-align: center;
  padding: 34px 16px 40px;
  color: var(--ink-soft);
}
.j-empty canvas { width: 74px; height: 74px; margin-bottom: 12px; }
.j-empty p { margin: 6px 0 14px; font-size: 12px; }

/* ============ 行程助手 ============ */
.planner { padding: 18px clamp(14px, 3vw, 24px) 22px; }
.opt-row { margin-bottom: 15px; }
.opt-row > label {
  display: block; font-size: 12px; letter-spacing: 2px;
  color: var(--wood-d); margin-bottom: 7px;
}
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.opt {
  font-family: inherit;
  text-align: left;
  border: 3px solid var(--outline);
  background: var(--panel-2);
  padding: 8px 11px 9px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(43,26,12,.28);
  clip-path: var(--px-clip-sm);
  line-height: 18px;
}
.opt b { display: block; font-size: 12px; color: var(--wood-d); }
.opt span { font-size: 12px; color: var(--ink-soft); }
.opt:hover { background: var(--gold-l); }
.opt.on { background: var(--gold); box-shadow: 0 3px 0 rgba(43,26,12,.5), inset 0 2px 0 rgba(255,255,255,.5); }
.opt.on b { color: var(--ink); }

.plan-out { margin-top: 18px; }
.plan-day { margin-bottom: 12px; }
.plan-day .ph {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; color: #fff6de;
  background: linear-gradient(180deg, #b5793f, #8c5323);
  border: 3px solid var(--outline);
  padding: 4px 11px 5px;
  clip-path: var(--px-clip-sm);
  box-shadow: 0 3px 0 rgba(43,26,12,.28);
}
.plan-day .ph b { letter-spacing: 1px; }
.plan-day .ph em { font-style: normal; font-size: 12px; color: #ffe6b8; margin-left: auto; }
.plan-stop {
  display: grid;
  grid-template-columns: 30px 44px 1fr auto;
  gap: 10px;
  align-items: start;
  background: #fffdf4;
  border: 3px solid var(--outline);
  border-top: 0;
  padding: 8px 11px 9px;
}
.plan-stop .st-thumb {
  width: 44px; height: 32px;
  object-fit: cover;
  border: 2px solid var(--outline);
  image-rendering: pixelated;
  background: #cfb98a;
  margin-top: 1px;
}
.plan-stop .idx {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--gold);
  border: 3px solid var(--outline);
  font-size: 12px;
  margin-top: 3px;
}
.plan-stop .st-name { font-size: 12px; color: var(--wood-d); }
.plan-stop .st-desc { font-size: 12px; color: var(--ink-soft); line-height: 2; }
.plan-stop .st-meta { font-size: 12px; color: var(--coral); white-space: nowrap; text-align: right; margin-top: 3px; }
.plan-sum {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 3px double var(--wood);
}
.plan-sum .stat { background: #fff9e8; }

/* ============ 提示 / 弹层 ============ */
.toast-wrap {
  position: fixed;
  left: 0; right: 0; bottom: 26px;
  z-index: 200;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  background: #fff9e8;  border: 3px solid var(--outline);
  padding: 8px 16px 9px;
  font-size: 12px;
  box-shadow: 0 5px 0 rgba(43,26,12,.4);
  clip-path: var(--px-clip-sm);
  display: flex; align-items: center; gap: 9px;
  animation: tin .22s steps(3);
  max-width: 84vw;
}
.toast canvas { width: 22px; height: 22px; flex: 0 0 22px; }
.toast.good { background: #e6f7ea; }
.toast.warn { background: #fff0dc; }
@keyframes tin { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(29,63,92,.7);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  overflow: auto;
}
.modal.on { display: flex; }
.modal-card {
  width: min(520px, 100%);
  background: var(--paper);
  border: 4px solid var(--outline);
  box-shadow: 0 8px 0 rgba(43,26,12,.4), inset 0 0 0 3px #e8cfa0;
  clip-path: var(--px-clip);
  max-height: 90vh;
  overflow: auto;
}
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #c98b4b, #a86a33);
  border-bottom: 3px solid var(--outline);
  position: sticky; top: 0; z-index: 2;
}
.modal-head h3 { margin: 0; font-size: 24px; color: #fff6de; text-shadow: 2px 2px 0 var(--outline); letter-spacing: 1px; }
.modal-head .x {
  margin-left: auto;
  font-family: inherit; font-size: 12px;
  width: 27px; height: 27px;
  background: var(--red); color: #fff;
  border: 3px solid var(--outline);
  cursor: pointer; line-height: 1;
}
.modal-body { padding: 14px; }
.modal-body textarea {
  width: 100%; min-height: 108px;
  font-family: inherit; font-size: 12px; line-height: 2;
  border: 3px solid var(--outline);
  background: #fffdf4;
  padding: 9px 11px;
  resize: vertical;
  outline: none;
  color: var(--ink);
}
.modal-body textarea:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--gold); }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.hint { font-size: 12px; color: var(--ink-soft); margin: 0 0 9px; line-height: 2; }

/* ============ 小助手 ============ */
.guide {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  display: flex; align-items: flex-end; gap: 9px;
  pointer-events: none;
}
.guide-bubble {
  max-width: 232px;
  background: #fff9e8;
  border: 3px solid var(--outline);
  padding: 8px 11px 9px;
  font-size: 12px;
  line-height: 2;
  box-shadow: 0 4px 0 rgba(43,26,12,.35);
  clip-path: var(--px-clip-sm);
  pointer-events: auto;
  position: relative;
}
.guide-bubble::after {
  content: '';
  position: absolute; right: -9px; bottom: 13px;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left-color: var(--outline);
}
.guide-av {
  width: 50px; height: 50px;
  background: var(--panel);
  border: 3px solid var(--outline);
  display: grid; place-items: center;
  box-shadow: 0 4px 0 rgba(43,26,12,.35);
  pointer-events: auto;
  animation: bob 1.5s steps(2) infinite;
}
.guide-av canvas { width: 34px; height: 34px; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ============ 页脚 ============ */
.foot {
  margin-top: 52px;
  border-top: 4px solid var(--outline);
  background: linear-gradient(180deg, #a86a33, #7d4a1e);
  color: #ffe6b8;
  padding: 22px 16px 28px;
  font-size: 12px;
  line-height: 2;
}
.foot-inner { max-width: 1180px; margin: 0 auto; }
.foot b { color: #fff6de; }
.foot .row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; color: #e8c88a; }

/* ============ 照片工坊 ============ */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: start;
}
.st-stage { padding: 0; overflow: hidden; }
.st-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    repeating-conic-gradient(#e9ddba 0 25%, #fdf5e0 0 50%) 0 0 / 22px 22px;
  border-bottom: 3px solid var(--outline);
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
  overflow: hidden;
}
.st-viewport canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#stOut { image-rendering: pixelated; }
.st-divider {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 3px solid var(--outline);
  pointer-events: none;
}
.st-divider i {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 38px;
  background: linear-gradient(180deg, #f7dc9a, #e8b551);
  border: 3px solid var(--outline);
  box-shadow: 0 3px 0 rgba(43,26,12,.4), inset 0 2px 0 rgba(255,255,255,.5);
}
.st-divider i::after {
  content: '◀▶';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  letter-spacing: -2px;
  color: var(--ink);
}
.st-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 2;
  padding: 20px;
}
.st-empty b {
  font-size: 12px;
  color: var(--wood-d);
  border: 3px dashed #c9a05c;
  padding: 8px 18px;
  background: rgba(253, 245, 224, .7);
}
.st-stagebar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: var(--panel-2);
  font-size: 12px;
  color: var(--ink-soft);
}
.st-stagebtns { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.st-scale { font-size: 12px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 5px; }

/* 像素风下拉框 */
select {
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--outline);
  padding: 3px 6px 4px;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6);
  outline: none;
  max-width: 100%;
}
select:focus { box-shadow: inset 0 0 0 2px var(--gold); }

/* 控制台 */
.st-rail {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--panel);
}
.st-drop {
  border: 3px dashed #b58a52;
  background: var(--paper);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  line-height: 2;
  position: relative;
}
.st-drop b { display: block; font-size: 12px; color: var(--wood-d); }
.st-drop span { font-size: 12px; color: var(--ink-soft); }
.st-drop:hover, .st-drop.over { background: #fff6de; border-color: var(--gold); }
.st-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.st-group > label {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--wood-d);
  margin-bottom: 7px;
}
.st-group > label em { font-style: normal; font-size: 12px; color: var(--ink-soft); letter-spacing: 0px; margin-left: 5px; }

/* 预设段选 */
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.seg-btn {
  font-family: inherit;
  text-align: left;
  border: 3px solid var(--outline);
  background: var(--panel-2);
  padding: 6px 9px 7px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(43,26,12,.28);
  clip-path: var(--px-clip-sm);
  line-height: 16px;
}
.seg-btn b { display: block; font-size: 12px; color: var(--wood-d); }
.seg-btn span { font-size: 12px; color: var(--ink-soft); }
.seg-btn:hover { background: var(--gold-l); }
.seg-btn.on {
  background: var(--gold);
  box-shadow: 0 3px 0 rgba(43,26,12,.45), inset 0 2px 0 rgba(255,255,255,.5);
}
.seg-btn.on b { color: var(--ink); }
.seg-inline { grid-template-columns: 1fr 1fr; }
.seg-inline button {
  font-family: inherit;
  font-size: 12px;
  border: 3px solid var(--outline);
  background: var(--panel-2);
  padding: 5px 9px 6px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(43,26,12,.28);
  clip-path: var(--px-clip-sm);
}
.seg-inline button:hover { background: var(--gold-l); }
.seg-inline button.on { background: var(--gold); box-shadow: 0 3px 0 rgba(43,26,12,.45), inset 0 2px 0 rgba(255,255,255,.5); }

/* 像素滑块 */
.st-slider { margin-bottom: 11px; }
.st-sl { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.st-sl label { font-size: 12px; color: var(--ink); letter-spacing: 1px; }
.st-sl em { font-style: normal; font-size: 12px; color: #a08a6c; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-sl output { font-size: 12px; color: var(--wood-d); }
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: none;
  cursor: pointer;
  margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 14px;
  border: 3px solid var(--outline);
  background: repeating-linear-gradient(90deg, #e2cda2 0 8px, #d7bd8d 8px 16px);
  box-shadow: inset 0 3px 0 rgba(43,26,12,.22);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 24px;
  margin-top: -8px;
  border: 3px solid var(--outline);
  background: linear-gradient(180deg, #f7dc9a 0%, #e8b551 100%);
  box-shadow: 0 3px 0 rgba(43,26,12,.45), inset 0 2px 0 rgba(255,255,255,.55);
}
input[type=range]:active::-webkit-slider-thumb { background: linear-gradient(180deg, #fff0c0 0%, #f0c060 100%); }
input[type=range]::-moz-range-track {
  height: 8px;
  border: 3px solid var(--outline);
  background: repeating-linear-gradient(90deg, #e2cda2 0 8px, #d7bd8d 8px 16px);
}
input[type=range]::-moz-range-thumb {
  width: 9px;
  height: 18px;
  border: 3px solid var(--outline);
  border-radius: 0;
  background: linear-gradient(180deg, #f7dc9a 0%, #e8b551 100%);
  box-shadow: 0 3px 0 rgba(43,26,12,.45);
}

/* 贴进手账 */
.st-target {
  border-top: 3px dashed #c9a05c;
  padding-top: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}
.st-target label {
  grid-column: 1 / -1;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--wood-d);
}
.st-target select { width: 100%; }
.st-reset-row { display: flex; justify-content: flex-end; }

/* ============ 手账照片位 ============ */
.j-slot {
  font-family: inherit;
  width: 100%;
  border: 3px dashed #c9a05c;
  background: rgba(253, 245, 224, .6);
  color: #a08a6c;
  padding: 12px 8px;
  margin-bottom: 10px;
  cursor: pointer;
  line-height: 2;
  display: grid;
  justify-items: center;
  gap: 2px;
}
.j-slot b { font-size: 24px; line-height: 1; color: #c9a05c; }
.j-slot span { font-size: 12px; }
.j-slot:hover { border-color: var(--coral); color: var(--coral); background: #fff6de; }
.j-slot:hover b { color: var(--coral); }

.j-photo {
  position: relative;
  background: #fffdf6;
  border: 3px solid var(--outline);
  padding: 5px 5px 7px;
  margin: 2px 2px 12px;
  box-shadow: 3px 4px 0 rgba(43,26,12,.2);
}
.j-photo::before {
  content: '';
  display: block;
  padding-top: 66%;
  background:
    repeating-conic-gradient(#d8cdb4 0 25%, #efe8d4 0 50%) 0 0 / 12px 12px;
}
.j-photo .jph {
  position: absolute;
  inset: 5px 5px 7px;
  width: calc(100% - 10px);
  height: calc(100% - 12px);
  object-fit: cover;
  image-rendering: pixelated;
  display: block;
}
.jph-tape {
  position: absolute;
  top: -10px; right: 14px;
  width: 64px; height: 18px;
  transform: rotate(4deg);
  background: repeating-linear-gradient(45deg,
    rgba(111,208,232,.82) 0 5px, rgba(200,240,250,.82) 5px 10px);
  border-left: 2px solid rgba(58,36,18,.35);
  border-right: 2px solid rgba(58,36,18,.35);
}

/* ============ 响应式 ============ */
@media (max-width: 900px) {
  .map-layout { grid-template-columns: 1fr; }
  .studio { grid-template-columns: 1fr; }
  .st-rail { order: 2; }
  .hero-stats { position: static; margin: 16px 0 0; justify-content: flex-start; }
  .hero-overlay { position: relative; padding: 26px 20px 22px; background: rgba(29,63,92,.45); }
  .hero canvas { position: absolute; inset: 0; height: 100%; object-fit: cover; }
  .hero { min-height: 420px; }
}
@media (max-width: 1020px) {
  /* 图鉴：右侧详情收进底部抽屉 */
  .atlas-layout { grid-template-columns: 1fr; }
  .atlas-side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    z-index: 96; max-height: 84vh; overflow: auto;
    padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateY(108%);
    transition: transform .26s steps(5);
  }
  .atlas-side.open { transform: none; }
  .atlas-side::before {
    content: ''; display: block;
    width: 52px; height: 6px; margin: 0 auto 8px;
    background: rgba(43,26,12,.35);
    border: 2px solid rgba(43,26,12,.25);
  }
  .drawer-mask {
    display: block; position: fixed; inset: 0; z-index: 95;
    background: rgba(30,20,8,.48);
    opacity: 0; pointer-events: none; transition: opacity .22s;
  }
  .drawer-mask.open { opacity: 1; pointer-events: auto; }
}
@media (max-width: 640px) {
  body { font-size: 12px; }
  .topbar-inner { padding: 8px 10px; gap: 9px; }
  .brand-txt b { font-size: 24px; }
  .brand-txt span { display: none; }
  .hero-title { font-size: 36px; }
  .nav { width: 100%; margin-left: 0; order: 3; }
  .nav-btn { font-size: 12px; padding: 5px 9px 6px; }
  .section { padding: 32px 11px 6px; }
  .journal-book::before { display: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
  .card-thumb .ph-fallback canvas { width: 44px; height: 44px; }
  .atlas-tools { gap: 8px 10px; padding: 10px 11px; }
  .atlas-count { flex-basis: 100%; margin-left: 0; }
  .guide { right: 8px; bottom: 8px; }
  .guide-bubble { max-width: 168px; font-size: 12px; }
  .plan-stop { grid-template-columns: 26px 36px 1fr; }
  .plan-stop .st-thumb { width: 36px; height: 26px; }
  .plan-stop .st-meta { grid-column: 2 / -1; text-align: left; }
}

@media print {
  .topbar, .nav, .guide, .toast-wrap, .hero-cta, .map-side, .planner, .j-acts,
  .st-rail, .st-stagebar, .st-divider, #sec-photo, .j-slot,
  .atlas-tools, .atlas-side, .drawer-mask { display: none !important; }
  .journal-book { box-shadow: none; }
  .j-card { break-inside: avoid; }
  body { background: #fff; }
}

/* ============ 海岛之声（环境音面板） ============ */
.snd-wrap { position: relative; flex: 0 0 auto; }
.snd-btn {
  width: 34px; height: 34px;
  padding: 0;
  background: linear-gradient(180deg, #d09a58 0%, #a86a33 100%);
  border: 3px solid var(--outline);
  box-shadow: 0 3px 0 rgba(43,26,12,.45), inset 0 2px 0 rgba(255,255,255,.32);
  cursor: pointer;
  display: grid; place-items: center;
  clip-path: var(--px-clip-sm);
}
.snd-btn svg { width: 18px; height: 18px; }
.snd-btn .spk { fill: #fff3d8; }
.snd-btn .wv { fill: #f7dc9a; opacity: 0; }
.snd-btn.on { background: linear-gradient(180deg, #f7dc9a 0%, #e8b551 100%); }
.snd-btn.on .spk { fill: var(--outline); }
.snd-btn.on .wv { opacity: 1; fill: var(--outline-2); }
.snd-btn.armed { animation: sndPulse 1.6s steps(2, jump-none) infinite; }
@keyframes sndPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}
.snd-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 236px;
  padding: 10px 12px 12px;
  background: var(--paper);
  border: 3px solid var(--outline);
  box-shadow: 4px 4px 0 rgba(43,26,12,.35);
  display: none;
  z-index: 96;
}
.snd-panel.open { display: block; }
.snd-title {
  font-size: 12px;
  color: var(--ink);
  padding-bottom: 7px;
  margin-bottom: 2px;
  border-bottom: 2px dashed var(--panel-3);
  letter-spacing: 2px;
}
.snd-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--ink);
  margin-top: 10px;
  cursor: default;
}
.snd-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  background: var(--panel-3);
  border: 2px solid var(--outline);
  outline: none;
  cursor: pointer;
}
.snd-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  background: var(--gold);
  border: 2px solid var(--outline);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55);
  cursor: pointer;
}
.snd-row input[type="range"]::-moz-range-thumb {
  width: 10px; height: 10px;
  background: var(--gold);
  border: 2px solid var(--outline);
  border-radius: 0;
}
.snd-switch {
  position: relative;
  width: 44px; height: 20px;
  padding: 0;
  background: var(--panel-3);
  border: 2px solid var(--outline);
  box-shadow: 0 2px 0 rgba(43,26,12,.35);
  cursor: pointer;
}
.snd-switch i {
  position: absolute;
  left: 2px; top: 2px;
  width: 16px; height: 12px;
  background: var(--wood);
  border: 2px solid var(--outline);
}
.snd-switch[aria-pressed="true"] { background: var(--sea-2); }
.snd-switch[aria-pressed="true"] i { left: 22px; background: var(--gold-l); }
.snd-tip {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .snd-panel {
    position: fixed;
    left: 10px; right: 10px; bottom: 12px;
    top: auto;
    width: auto;
  }
}
@media print {
  .snd-wrap { display: none !important; }
}