/* ============================================================
   cityhunt.css — 城市定位 + 城市特辑（寻宝）
   1:1 移植自 uiux/cityhunt.css
   ============================================================ */

/* setup 顶部城市栏 */
.df-city { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.df-city-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 13px 6px 11px; font-family: var(--font-cn); font-size: 13px; color: var(--ink); cursor: pointer; }
.df-city-btn b { font-weight: 700; }
.df-city-btn em { font-style: normal; color: var(--ink-faint); font-size: 11px; }
.df-city-btn .chev { color: var(--ink-faint); font-size: 11px; }
.df-city-hint { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--accent-green); }

/* 模式切换 */
.df-mode { display: flex; background: #efe7d4; border-radius: 11px; padding: 3px; gap: 3px; margin: 0 0 18px; }
.df-modeb { flex: 1; border: none; background: none; padding: 9px 0; border-radius: 8px; font-family: var(--font-cn); font-size: 13.5px; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.df-modeb.is-on { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.df-modeb .nd { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-orange); }

/* ---------------- 城市选择 sheet ---------------- */
.ch-sheet-wrap { position: absolute; inset: 0; z-index: 60; background: rgba(20, 16, 12, 0.34); display: flex; align-items: flex-end; animation: chfade 0.18s ease both; }
@keyframes chfade { from { opacity: 0; } to { opacity: 1; } }
.ch-sheet { width: 100%; background: var(--paper); border-radius: 22px 22px 0 0; padding: 10px 18px calc(10px + var(--safe-bottom)); max-height: 88%; overflow-y: auto; animation: chrise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes chrise { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.ch-sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 16px; }
.ch-locate { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; background: var(--ink); color: var(--paper); border: none; border-radius: 13px; font-family: var(--font-cn); font-weight: 700; font-size: 14px; cursor: pointer; }
.ch-sheet-lab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin: 20px 0 10px; }
.ch-citylist { display: flex; flex-direction: column; gap: 2px; }
.ch-cityrow { display: flex; align-items: center; gap: 10px; padding: 13px 8px; background: none; border: none; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.ch-cityrow:hover { background: rgba(0, 0, 0, 0.02); }
.ch-cityname { flex: 1; font-family: var(--font-cn); font-weight: 700; font-size: 15px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.ch-cityname em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--ink-faint); }
.ch-livetag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--accent-green); border: 1px solid var(--accent-green); border-radius: 999px; padding: 2px 8px; }
.ch-soontag { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-faint); }
.ch-citycheck { color: var(--accent-orange); font-weight: 700; }
.ch-cityrow.is-on .ch-cityname { color: var(--accent-orange); }

/* ---------------- 特辑浏览 ---------------- */
.ch-browse { padding: 2px 0 8px; display: flex; flex-direction: column; gap: 14px; }
.ch-browse-intro h3 { font-family: var(--font-serif-cn); font-weight: 700; font-size: 19px; margin: 0 0 5px; }
.ch-browse-intro p { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 4px; line-height: 1.5; }
.ch-feat { text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 15px; overflow: hidden; cursor: pointer; padding: 0; transition: all 0.14s; }
.ch-feat:hover { border-color: var(--ink-faint); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.ch-feat.is-soon { opacity: 0.72; cursor: default; }
.ch-feat-cover { position: relative; height: 120px; background: linear-gradient(135deg, #e9dec3, #d8c9a6); background-size: cover; background-position: center; }
.ch-feat-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-feat-tag { position: absolute; top: 10px; left: 10px; background: var(--brand-yellow); color: var(--ink); font-family: var(--font-cn); font-weight: 700; font-size: 11px; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--ink); }
.ch-feat-soon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20, 16, 12, 0.34); color: #fff; font-family: var(--font-cn); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; }
.ch-feat-body { padding: 12px 14px 14px; }
.ch-feat-titrow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ch-feat-titrow b { font-family: var(--font-serif-cn); font-weight: 700; font-size: 16px; }
.ch-feat-sub { font-size: 12px; color: var(--ink-soft); }
.ch-feat-meta { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); margin: 7px 0; }
.ch-feat-dot { color: var(--line); }
.ch-feat-partner { font-size: 11.5px; color: var(--accent-green); font-weight: 500; }
.ch-browse-foot { text-align: center; font-size: 12px; color: var(--ink-faint); margin: 6px 0 0; }
.ch-browse-foot em { font-style: normal; color: var(--accent-blue); }

/* ---------------- 寻宝详情 ---------------- */
.ch-detail { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--paper); }
.ch-detail-scroll { flex: 1; overflow-y: auto; }
.ch-detail-scroll::-webkit-scrollbar { width: 0; }
.ch-hero { position: relative; height: 188px; background: linear-gradient(135deg, #b9a987, #8d7d5d); background-size: cover; background-position: center; padding: var(--safe-top) 18px 16px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.ch-hero-back { position: absolute; top: var(--safe-top); left: 14px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 17px; cursor: pointer; }
.ch-hero-tags { display: flex; gap: 7px; margin-bottom: 8px; }
.ch-hero-tags span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(4px); padding: 3px 9px; border-radius: 999px; }
.ch-hero-title { font-family: var(--font-serif-cn); font-weight: 700; font-size: 25px; margin: 0 0 4px; }
.ch-hero-sub { font-size: 12.5px; opacity: 0.9; margin: 0; }

.ch-reward { display: flex; align-items: center; gap: 13px; margin: 16px 18px; padding: 13px 15px; background: #fffdf6; border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--brand-yellow); }
.ch-reward-coin { flex: 0 0 auto; font-family: var(--font-serif-cn); font-weight: 900; font-size: 24px; color: var(--ink); width: 50px; height: 50px; border-radius: 50%; border: 2px dashed var(--brand-yellow-deep); display: flex; align-items: center; justify-content: center; }
.ch-reward-coin i { font-style: normal; font-size: 13px; color: var(--ink-faint); }
.ch-reward-txt { display: flex; flex-direction: column; gap: 3px; }
.ch-reward-txt b { font-size: 13px; }
.ch-reward-txt span { font-size: 12px; color: var(--ink-soft); line-height: 1.4; text-wrap: pretty; }

/* 集印路线 */
.ch-trail { padding: 4px 18px 24px; }
.ch-stop { display: flex; gap: 13px; }
.ch-stop-rail { flex: 0 0 52px; display: flex; flex-direction: column; align-items: center; }
.ch-stop-stamp { width: 52px; height: 52px; }
.ch-stop-stamp .ch-stamp-svg { width: 100%; height: 100%; display: block; }
.ch-stop-line { flex: 1; width: 2px; background: repeating-linear-gradient(var(--line) 0 4px, transparent 4px 9px); margin: 3px 0; min-height: 26px; }
.ch-stop.is-on .ch-stop-line { background: repeating-linear-gradient(var(--accent-green) 0 4px, transparent 4px 9px); }
.ch-stop-body { flex: 1; padding-bottom: 20px; }
.ch-stop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ch-stop-head b { font-family: var(--font-serif-cn); font-weight: 700; font-size: 15.5px; }
.ch-stop-dist { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.ch-stop-task { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; color: var(--ink); line-height: 1.45; margin: 6px 0 10px; text-wrap: pretty; }
.ch-stop-ic { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; display: inline-flex; }
.ch-stop-ic svg { width: 100%; height: 100%; }
.ch-stop-btn { background: var(--ink); color: var(--paper); border: none; border-radius: 9px; padding: 9px 16px; font-family: var(--font-cn); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.ch-stop-btn:hover { background: #000; }
.ch-stop-done { font-size: 12px; color: var(--accent-green); font-weight: 700; }

/* 底栏并入常驻 .df-foot（见 styles.css）；原 .ch-detail-foot / .ch-rcpt-footbar 已移除 */

/* ---------------- 寻宝小票 ---------------- */
.ch-rcpt-screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: #efe7d4; }
.ch-rcpt-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--safe-top) 18px 12px; background: var(--paper); flex: 0 0 auto; }
.ch-rcpt-scroll { flex: 1; overflow-y: auto; padding: 16px; display: flex; justify-content: center; }
.ch-rcpt-scroll::-webkit-scrollbar { width: 0; }
.ch-rcpt { width: 300px; align-self: flex-start; background: #fbf7ec; padding: 18px 18px 16px; font-family: var(--font-mono); color: var(--rcpt-ink); box-shadow: 0 2px 4px rgba(40, 34, 20, 0.12), 0 24px 46px -22px rgba(40, 34, 20, 0.45); }
.ch-rcpt-top { display: flex; justify-content: space-between; align-items: center; }
.ch-rcpt-no { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 700; color: var(--accent-orange); }
.ch-rcpt-title { font-family: var(--font-serif-cn); font-weight: 700; font-size: 21px; margin: 11px 0 5px; }
.ch-rcpt-meta { font-size: 10.5px; color: #6b6453; letter-spacing: 0.03em; }
.ch-rcpt-rule { border-top: 1.5px solid #1d1c1a; margin: 13px 0; }
.ch-rcpt-rule.dash { border-top: 1.5px dashed #c8bb9c; }
.ch-rcpt-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; justify-items: center; padding: 2px 0; }
.ch-rcpt-stamp { width: 72px; height: 72px; }
.ch-rcpt-stamp .ch-stamp-svg { width: 100%; height: 100%; }
.ch-rcpt-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 7px; }
.ch-rcpt-list li { font-family: var(--font-cn); font-size: 11.5px; color: var(--rcpt-ink); line-height: 1.4; }
.ch-rcpt-list b { font-family: var(--font-mono); font-weight: 700; margin-right: 6px; }

/* 兑换券 */
.ch-coupon { position: relative; display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px dashed #1d1c1a; border-radius: 6px; padding: 13px 14px; margin: 2px 0 14px; overflow: hidden; }
.ch-coupon-perfL, .ch-coupon-perfR { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fbf7ec; border: 1.5px dashed #1d1c1a; transform: translateY(-50%); }
.ch-coupon-perfL { left: -8px; }
.ch-coupon-perfR { right: -8px; }
.ch-coupon-l { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ch-coupon-k { font-family: var(--font-cn); font-size: 9.5px; letter-spacing: 0.04em; color: var(--accent-orange); font-weight: 700; }
.ch-coupon-l b { font-family: var(--font-serif-cn); font-weight: 700; font-size: 15px; color: #1d1c1a; }
.ch-coupon-exp { font-size: 9px; color: #6b6453; }
.ch-coupon-r { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ch-coupon-r span { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; }
.ch-rcpt-sign { display: flex; flex-direction: column; }
.ch-rcpt-sign .ps-signmark { font-family: var(--font-serif-cn); font-weight: 700; font-size: 16px; }
.ch-rcpt-signsub { font-size: 9px; letter-spacing: 0.18em; color: #b07a2a; margin-top: 1px; }