/* ─── 渡口 · Home ───
   9.8 从 /dukou.html 骨架搬进来。纸上渡口原则：东西放进画里，不开卡片。
   底图铺满 Home（cover），天上彩虹=心情、舵盘=纪念日、五张牌=门、岸上房子=房间。 */

#home-view.active { overflow: hidden; position: relative; -webkit-user-select: none; user-select: none; background: #1b2a44; }

/* 舞台：按底图比例 853:1844，宽撑满、高不够就上下裁（尺寸由 dukou.js 按 home-view 实际大小算，写在 style 上） */
.dk-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
            background: url(/img/dukou/bg-river.jpg) center / 100% 100% no-repeat; overflow: hidden; touch-action: none; }

/* 渡口页：底部导航浮在画上，不再是一条实心栏 */
body.dk-home #tab-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  background: linear-gradient(to bottom, rgba(14, 24, 44, 0) 0%, rgba(14, 24, 44, .55) 45%, rgba(14, 24, 44, .78) 100%);
  border-top: 0; }
body.dk-home .tab-item { color: rgba(243, 233, 216, .5); }
body.dk-home .tab-item.active { color: #efd7a0; }

/* 牌轮 */
.dk-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.dk-card { position: absolute; left: 50%; top: 0; width: 22%; aspect-ratio: 600 / 1001; margin-left: -11%;
           border-radius: 3%; pointer-events: auto; cursor: pointer;
           box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .18) inset;
           background: #e9dcc3 center / cover no-repeat; transform-origin: 50% 50%;
           transition: transform .55s cubic-bezier(.22, .8, .3, 1), opacity .4s; will-change: transform; }
.dk-ring.drag .dk-card { transition: none; }

/* 舵盘 + 圆盘天数 */
.dk-wheel { position: absolute; left: 2%; top: var(--dk-wt, 60%); width: 96%; aspect-ratio: 1; transform: rotate(0deg);   /* 9.8 居中用 left 不用 translateX(-50%)：iOS 冷启动时动画把 -50% 按零宽算死，舵盘会停在右半边 */
            background: url(/img/dukou/wheel.png?v=0908) center / contain no-repeat; cursor: grab;
            transform-origin: 50.03% 49.30%;   /* 绕圆盘的真实圆心转，和数字同一个点（茶茶 9.7 抓的） */
            filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); will-change: transform; z-index: 3; }
.dk-wheel.sway { animation: dk-sway 9s ease-in-out infinite; }
@keyframes dk-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.dk-days { position: absolute; left: 50%; top: var(--dk-wt, 60%); width: 96%; aspect-ratio: 1; pointer-events: none; z-index: 4;
           transform: translate(calc(-50% + 0.03%), -0.70%); display: flex; align-items: center; justify-content: center; }
.dk-disc { width: 23%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; }
.dk-disc canvas { width: 100%; height: 100%; display: block; }

/* 天上的彩虹：心情条（9.8 定稿：left 42 top 15 width 59 角度 0，不裁） */
.dk-rainbow { position: absolute; left: 42%; top: 15%; width: 59%; aspect-ratio: 3.702;
              background: url(/img/dukou/rainbow.png) center / contain no-repeat; pointer-events: none; z-index: 1; opacity: .95; }
/* 彩虹上的爪印：心情 0→10 从左脚走到右脚 */
.dk-paw { position: absolute; width: 6%; aspect-ratio: 1; margin: -3% 0 0 -3%; background: url(/img/dukou/paw-ink.png) center / contain no-repeat;
          filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); cursor: pointer; z-index: 6; display: none; }
.dk-paw::after { content: ''; position: absolute; inset: -60%; }   /* 手指好点：热区比印子大 */
.dk-paw.on { display: block; }

/* 岸上的房子：看不见的热区 */
.dk-house { position: absolute; left: 8%; top: 17%; width: 30%; height: 11%; z-index: 2; cursor: pointer; }

/* 落下来的纸 */
.dk-paper-wrap { position: fixed; inset: 0; z-index: 250; display: none; align-items: flex-start; justify-content: center;
                 padding-top: max(14vh, calc(env(safe-area-inset-top) + 10vh)); background: rgba(10, 18, 32, 0); transition: background .3s; }
.dk-paper-wrap.on { display: flex; background: rgba(10, 18, 32, .35); }
.dk-paper { width: min(86vw, 380px); max-height: 66vh; overflow: auto; padding: 18px 20px 16px; box-sizing: border-box;
            background: #efe5d2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
            border-radius: 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(90, 60, 30, .15) inset;
            color: #4a3a28; font: 15px/1.7 "Songti SC", "Noto Serif CJK SC", Georgia, serif;
            transform: translateY(-30px) rotate(-1.2deg); opacity: 0; transition: transform .45s cubic-bezier(.22, .8, .3, 1), opacity .35s; }
.dk-paper-wrap.on .dk-paper { transform: translateY(0) rotate(-1.2deg); opacity: 1; }
.dk-paper h3 { margin: 0 0 6px; font: 600 13px/1 -apple-system, system-ui, sans-serif; letter-spacing: .12em; color: #8a6a45; display: flex; align-items: center; }
.dk-paper .dk-hist-btn { margin-left: auto; padding: 2px 4px; background: none; border: none; color: #8a6a45; font: 12px/1 -apple-system, system-ui, sans-serif; letter-spacing: 0; }
.dk-paper .big { font-size: 17px; margin: 2px 0 10px; }
.dk-paper .tag { display: inline-block; padding: 2px 10px; border-radius: 12px; background: #6f86a0; color: #f6efe2; font: 600 12px/1.6 -apple-system, system-ui, sans-serif; margin-left: 8px; vertical-align: 2px; }
.dk-paper .dim { font: 12px/1.4 -apple-system, system-ui, sans-serif; color: #8a6a45; }
.dk-paper hr { border: 0; border-top: 1px dashed rgba(120, 90, 50, .35); margin: 10px 0; }
.dk-paper ul { margin: 0; padding-left: 18px; } .dk-paper li { margin: 2px 0; }
.dk-paper .muted { color: #9a8466; font-size: 12px; }
.dk-paper .mood-ecg { margin: 6px 0 2px; }
.dk-paper .mood-ecg-empty { color: #9a8466; }

.dk-toast { position: fixed; left: 50%; bottom: 16vh; transform: translateX(-50%); padding: 8px 14px; border-radius: 20px;
            background: rgba(20, 30, 50, .85); color: #f3e9d8; font: 14px/1.4 -apple-system, system-ui, sans-serif;
            opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap; z-index: 260; }
.dk-toast.show { opacity: 1; }

/* 门：全屏页，从右边推进来。情绪表门里装的是原来首页那块面板（feel / 驱动 / 念头 / 镜子卡 / 留言），home.js 原样渲染 */
.dk-door { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; overflow: hidden;
           --text: #1F1E1D; --text2: #6E6D66; --text3: #A8A79F; --border: rgba(96, 80, 58, .16); color: var(--text);   /* 9.11 门是纸底，深色模式下变量会翻成浅字，钉死成浅色模式的值 */
           background: #EEE0D5 url('/art/paper.jpg?v=64') center / cover no-repeat;
           transform: translateX(100%); transition: transform .3s ease; }
.dk-door.open { transform: translateX(0); }
.dk-door-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dk-door-scroll::-webkit-scrollbar { display: none; }
.dk-door .home-inner { padding-top: 14px; }

/* 情绪表门：条子和心电图统一行高（26 + 2 间距），切换时总高不跳；理本子、镜子卡挪到驱动下面要有间距 */
.dk-door .hw-desire-bars { gap: 2px; }
.dk-door .desire-bar-item { height: 26px; }
.dk-door .ecg-container { gap: 2px; }
.dk-door .ecg-row { height: 26px; }
.dk-door .ecg-canvas-wrap { height: 22px; }
.dk-door .hw-maintenance:not(:empty), .dk-door .hw-next-card:not(:empty) { margin-top: 14px; }

/* ─── 碎碎念门（9.11）：喷泉牌进来。照 Bunny & Elliott 的 Moments 做的，轻：小圆头像、今天 · 16:50、谁赞了、评论链带时间、底下留一句 ─── */
#dk-door-wall .dk-door-scroll { padding-bottom: 96px; }
.wl-banner { position: relative; height: 150px; margin: 0; overflow: hidden; border-bottom: 1px solid var(--border); }
.wl-fox { position: absolute; right: 14px; bottom: 4px; height: 118px; width: auto; }
.wl-sig { position: absolute; left: 20px; bottom: 26px; }
.wl-sig1 { font: italic 600 20px/1.3 Georgia, "Songti SC", "Noto Serif CJK SC", serif; color: #6b5a44; }
.wl-sig2 { font: 11px/1.4 -apple-system, system-ui, sans-serif; letter-spacing: .1em; color: #a48f74; margin-top: 4px; }
.wl-h { position: absolute; color: #e6b8b8; font-style: normal; font-size: 14px; opacity: .8; }
.wl-h.a { left: 44%; top: 18px; } .wl-h.b { left: 14px; top: 30px; font-size: 10px; } .wl-h.c { right: 38%; bottom: 20px; font-size: 11px; }
.wl-list { padding: 0 16px; }
.wl-item { position: relative; padding: 14px 0 10px; border-bottom: 1px solid var(--border); }
.wl-head { display: flex; align-items: center; gap: 8px; }
.wl-ava { width: 26px; height: 26px; border-radius: 50%; background: url('/avatar-xiaodu.jpg') center/cover no-repeat; flex: none; }
.wl-ava.usr { background-image: url('/avatar-zhijian.jpg'); }
.wl-name { font: 500 12px/1 -apple-system, system-ui, sans-serif; letter-spacing: .04em; } /* 9.15 她定：跟点赞那行一样大，不加粗 */
.wl-name.ai { color: #5B9BD5; } .wl-name.usr { color: #c9a25a; }
.wl-time { font: italic 12px/1 Georgia, serif; color: var(--text3); }
.wl-del { margin-left: auto; background: none; border: none; font-size: 11px; color: var(--text3); padding: 4px 0 4px 8px; -webkit-tap-highlight-color: transparent; }
.wl-text { margin: 10px 0 0 34px; font-size: 15px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.wl-imgs { margin: 8px 0 0 34px; display: flex; flex-wrap: wrap; gap: 4px; }
.wl-imgs img { width: calc(33.3% - 3px); aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.wl-imgs.one img { width: 62%; aspect-ratio: auto; max-height: 260px; }
.wl-acts { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 34px; padding-top: 6px; border-top: 1px dashed rgba(120, 90, 50, .18); font-size: 12px; color: var(--text3); }
.wl-like { background: none; border: none; font-size: 15px; color: #d9a0a0; padding: 0 2px; -webkit-tap-highlight-color: transparent; }
.wl-like.on { color: #e05a5a; }
.wl-liked i { font-style: normal; } .wl-liked i.ai { color: #5B9BD5; } .wl-liked i.usr { color: #c9a25a; }
.wl-reply { margin-left: auto; background: none; border: none; font-size: 12px; color: var(--text3); -webkit-tap-highlight-color: transparent; }
.wl-cmts { margin: 6px 0 0 34px; }
.wl-cmt { padding: 6px 0 6px 10px; border-left: 2px solid transparent; }
.wl-cmt.ai { border-left-color: rgba(91, 155, 213, .35); } .wl-cmt.usr { border-left-color: rgba(201, 162, 90, .4); }
.wl-cname { font: italic 600 13px/1 Georgia, "Songti SC", "Noto Serif CJK SC", serif; }
.wl-cmt.ai .wl-cname { color: #5B9BD5; } .wl-cmt.usr .wl-cname { color: #c9a25a; }
.wl-ctext { font-size: 14px; line-height: 1.7; margin-top: 3px; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.wl-ctime { font: 11px/1 -apple-system, system-ui, sans-serif; color: var(--text3); display: block; margin-top: 4px; }
.wl-pending { margin: 6px 0 0 44px; font-size: 11px; color: var(--text3); }
.wl-pending::before { content: '• '; color: #e6b8b8; }
.wl-cin { display: flex; gap: 6px; margin: 8px 0 0 34px; }
.wl-cin[hidden] { display: none; }
.wl-cin input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255, 255, 255, .5); font-size: 14px; color: var(--text); }
.wl-cin button { background: none; border: none; color: var(--accent); font-size: 14px; }
.wl-compose { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, #EEE0D5 72%, rgba(238, 224, 213, 0)); }
.wl-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-radius: 22px; background: rgba(255, 255, 255, .78); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.wl-cam { font-size: 17px; cursor: pointer; line-height: 1; }
.wl-row input[type=text] { flex: 1; min-width: 0; border: none; background: none; font-size: 14px; outline: none; color: var(--text); }
.wl-row button { background: none; border: none; color: var(--accent); font-size: 14px; padding: 4px 6px; }
.wl-draft { display: flex; gap: 6px; margin-bottom: 8px; }
.wl-draft[hidden] { display: none; }
.wl-dimg { position: relative; }
.wl-dimg img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; display: block; }
.wl-dimg b { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: rgba(20, 30, 50, .8); color: #fff; font: 12px/18px sans-serif; text-align: center; }
.wl-empty { padding: 48px 0; text-align: center; color: var(--text3); font-size: 13px; }

/* 9.11 她定：月亮 banner 从瞬间搬过来，狐狸挪到列表底下（刷到底一只背影） */
.wl-mbanner > img { width: 100%; height: auto; display: block; margin: 0; padding: 0; object-fit: unset; } /* 9.15 她定：撑满宽 */
.wl-mbanner .moments-sig { position: absolute; top: 2.2%; left: 12%; right: auto; bottom: auto; padding: 0; text-align: left; line-height: 1; pointer-events: none; } /* 落款一行，她 9.15 定：画顶上边框线上方，左对齐（红线位置） */
.wl-mbanner { position: relative; border-bottom: 1px solid var(--border); }
.wl-mbanner .moments-sig-names, .wl-mbanner .moments-sig-line { display: inline; font-size: 10.5px; margin: 0; font-weight: 500; letter-spacing: .02em; }
.wl-mbanner .moments-sig span[style*="5B9BD5"] { color: #A8C3DD !important; } /* 她 9.15 定：落款要暗戳戳的，蓝调到跟暖黄一样淡 */
.wl-mbanner .moments-sig { opacity: .85; }
.wl-mbanner .moments-sig-line::before { content: " · "; color: var(--text3); }
.wl-tail { text-align: center; padding: 30px 0 12px; }
.wl-tail img { height: 96px; width: auto; opacity: .92; }