/* screens.css — 屏幕专用样式 */

/* —— 引导三屏 —— */
.onboard-track { display:flex; flex:1; transition: none; touch-action: pan-y; }
.onboard-panel { min-width: 100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 0 36px; text-align:center; }
.ink-logo {
  position: relative; width: 200px; height: 200px; display:grid; place-items:center; margin-bottom: 8px;
}
.ink-logo .blot {
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 48%, #1f1c17 0%, #2c2820 40%, rgba(44,40,32,.5) 60%, transparent 74%);
  filter: url(#inkblot);
  opacity:.92;
}
.ink-logo .word { position:relative; color:#f3ead8; font-size: 40px; letter-spacing: 6px; font-weight: 700; font-family: var(--font-serif); }
.page-dots { display:flex; gap:14px; justify-content:center; padding: 18px 0; }
.page-dots .dot { width:7px; height:7px; border-radius:50%; background: var(--ink-faint); position:relative; }
.page-dots .dot.active { background: var(--cinnabar); }
.page-dots .hit { position:absolute; inset:-18px; }
.skip { position:absolute; top: 22px; right: 22px; color: var(--ink-faint); font-size: var(--fs-small); letter-spacing:2px; z-index:5; }

/* —— 角色选择 —— */
.role-cards { display:flex; gap: 20px; justify-content:center; padding: 0 24px; }
.role-card {
  flex:1; max-width: 150px; aspect-ratio: 3/4; position: relative;
  border: 1px solid var(--ink-hair-2); background: var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding: 0 0 26px;
  transition: opacity .8s var(--ease), transform .3s var(--ease);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.role-card { padding-bottom: 56px; }
.role-card .rname { font-size: 20px; letter-spacing: 4px; color: var(--ink-strong); background: rgba(44,40,32,.06); padding: 8px 16px; }
.role-card .rdesc { font-size: var(--fs-mini); color: var(--ink-light); letter-spacing: 1px; margin-top: 12px; padding: 0 10px; }
.role-card .stampbox { position:absolute; right:12px; bottom:12px; width:26px; height:26px; border:1px dashed var(--ink-hair-2); border-radius:3px; display:grid; place-items:center; }
.role-card.selected { border-color: var(--cinnabar-faint); }
.role-card.dim { opacity:.4; }

/* —— 通用：居中信纸主体 —— */
.sheet-center { flex:1; display:flex; flex-direction:column; justify-content:center; padding: 0 var(--pad-screen); }
.field-rows { margin: 8px 0; }

/* —— 演示悬浮菜单 —— */
.dev-fab { position:absolute; bottom: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(154,43,31,.16); z-index: 90; opacity:.5; }
.dev-panel { position:absolute; inset: 0; background: rgba(20,16,12,.6); z-index: 91; display:flex; flex-direction:column; padding: 30px 16px; overflow-y:auto; }
.dev-panel h4 { color:#f3ead8; font-size: 13px; letter-spacing:2px; margin: 14px 4px 6px; opacity:.7; }
.dev-grid { display:grid; grid-template-columns: 1fr 1fr; gap:6px; }
.dev-grid button { background: rgba(241,233,214,.9); color: var(--ink); font-size: 12px; padding: 9px 6px; border-radius: 6px; letter-spacing:1px; }
.dev-row { display:flex; gap:8px; margin: 8px 4px; }
.dev-row button { flex:1; background: var(--cinnabar); color:#f6ece0; padding: 10px; border-radius:6px; font-size:13px; }

/* —— 配对 —— */
.qr-box { width: 180px; height: 180px; margin: 0 auto; background: var(--paper); border:1px solid var(--ink-hair-2); display:grid; place-items:center; }
.cred-row { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; border-bottom: 1px solid var(--ink-hair); }
.cred-row .k { color: var(--ink-light); font-size: var(--fs-small); letter-spacing:2px; }
.cred-row .v { color: var(--ink); font-size: var(--fs-lead); letter-spacing:1px; }
.person-card { display:flex; align-items:center; gap:14px; padding: 16px; border:1px solid var(--ink-hair); background: var(--paper); }
.person-card .ava { width:46px; height:46px; border-radius:50%; background: var(--paper-2); display:grid; place-items:center; color: var(--ink-faint); }

/* —— 时间轴 —— */
.timeline { position: relative; padding: 8px var(--pad-screen) 0; flex:1; }
.tl-axis { position:absolute; left: 50%; top: 0; bottom: 0; width:1px; background: var(--ink-hair); }
.tl-item { position: relative; margin: 18px 0; display:flex; }
.tl-node { position:absolute; left:50%; top:18px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background: var(--ink-mid); }
.tl-node.draft { background: transparent; border:1px solid var(--ink-mid); }
.tl-node.latest { background: var(--cinnabar); }
.tl-card { width: 64%; }
.tl-card.right { margin-left:auto; }
.big-drop { display:flex; flex-direction:column; align-items:center; gap:10px; padding: 16px 0 6px; }

/* —— 写信 —— */
.photo-slot { width: 84px; height: 84px; border:1px dashed var(--ink-hair-2); display:grid; place-items:center; color: var(--ink-faint); font-size: var(--fs-small); }
.excerpt { padding: 14px 0; }
.excerpt .label { font-size: var(--fs-small); color: var(--ink-light); letter-spacing:2px; margin-bottom:6px; }
.excerpt .label.joan { color: var(--cinnabar-soft); }
.excerpt .text { font-size: var(--fs-lead); color: var(--ink); line-height: 1.7; }
.excerpt .more { font-size: var(--fs-small); color: var(--ink-light); text-align:right; }
.voice-toggle { display:flex; gap:16px; align-items:center; font-size: var(--fs-small); }
.voice-toggle .opt { color: var(--ink-faint); letter-spacing:1px; }
.voice-toggle .opt.on { color: var(--ink); }
.voice-toggle .opt.on::after { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background: var(--cinnabar); margin-left:5px; vertical-align: middle; }

/* —— 列表卡（孩子端家书集 / 收藏）—— */
.collection-hero { border:1px solid var(--ink-hair-2); background: var(--paper); padding: 22px 20px; margin: 6px var(--pad-screen) 18px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.scroll-card { display:flex; align-items:flex-start; gap:10px; margin: 10px var(--pad-screen); padding: 14px 16px; border:1px solid var(--ink-hair); background: var(--paper); position:relative; }
.scroll-card .roll { width:6px; align-self:stretch; background: repeating-linear-gradient(var(--ink-hair) 0 2px, transparent 2px 5px); }
.lock-entry { display:flex; align-items:center; gap:6px; color: var(--ink-light); font-size: var(--fs-small); }

/* —— 树洞 —— */
.confide-line { margin: 16px var(--pad-screen); }
.confide-line.mine { text-align: right; color: var(--ink-strong); font-size: var(--fs-lead); }
.confide-line.joan { }
.mood-dots { display:flex; gap:10px; align-items:center; justify-content:center; padding: 10px 0; }
.mood-dots .md { border-radius:50%; background: var(--ink); }

/* —— 画像 —— */
.mood-scale { position:relative; height: 26px; margin: 18px 0; }
.mood-scale .track { position:absolute; top:50%; left:0; right:0; height:3px; margin-top:-1.5px; background: linear-gradient(90deg, var(--ink-faint), var(--ink)); border-radius:2px; opacity:.5; }
.mood-scale .knob { position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background: radial-gradient(circle at 38% 34%,#4a443c,#14110d); }

/* —— 设置目录 —— */
.catalog-row { display:flex; align-items:center; justify-content:space-between; padding: 17px var(--pad-screen); border-bottom: 1px solid var(--ink-hair); }
.catalog-row .lab { font-size: var(--fs-lead); color: var(--ink); letter-spacing: 2px; }
.catalog-row .arrow { color: var(--ink-faint); }
.catalog-group { color: var(--ink-light); font-size: var(--fs-small); letter-spacing: 3px; padding: 22px var(--pad-screen) 6px; position:relative; }
.catalog-group.you::before { content:''; position:absolute; left: calc(var(--pad-screen) - 12px); top: 26px; width:5px; height:5px; border-radius:50%; background: var(--cinnabar); }

/* —— 墨拨开关 —— */
.ink-switch { width: 46px; height: 26px; border-radius: 14px; background: var(--paper-2); border:1px solid var(--ink-hair-2); position:relative; transition: background .3s var(--ease); }
.ink-switch .knob { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background: var(--ink-faint); transition: left .26s var(--ease), background .26s var(--ease); }
.ink-switch.on { background: rgba(154,43,31,.12); }
.ink-switch.on .knob { left: 22px; background: var(--cinnabar); }

/* —— 书架 —— */
.shelf { display:flex; align-items:flex-end; gap: 14px; justify-content:center; padding: 30px var(--pad-screen); }
.book-spine { width: 46px; height: 180px; background: var(--paper); border:1px solid var(--ink-hair-2); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding: 14px 0; writing-mode: vertical-rl; }
.book-spine .bt { font-size: 15px; letter-spacing: 3px; color: var(--ink-strong); }
.book-spine.cover { width: 120px; }