:root {
  --ink: #3a2c1c;
  --ink-soft: #6d5a42;
  --paper: #efe3c8;
  --paper-2: #e3d2ae;
  --accent: #b4622a;
  --paper-deep: #d6c199;
  --fox: rgba(150, 106, 56, 0.16);
  --bg: #14110d;
  --d-fast: 160ms;
  --d-base: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  /* 桌面端：整页间距与字号都随书一起放大 */
  --page-pad: 48px;
  --ui: 1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ---------- 背景视频层 ---------- */
#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #14110d;                 /* 视频没加载出来时的兜底 */
}
#bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms linear;   /* 交叉淡化：无缝循环靠这个 */
}
#bg video.on { opacity: 1; }
/* 只压暗视频，不影响 3D 层 */
.bg-grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(128% 100% at 50% 42%,
    rgba(0, 0, 0, 0) 46%, rgba(10, 12, 6, 0.34) 100%);
}

#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 2;
  touch-action: manipulation;
  cursor: pointer;
}

/* ---------- 首屏海报（视频首帧） ---------- */
#poster {
  position: fixed;
  inset: 0;
  z-index: 1;
  transition: opacity 520ms var(--ease-out);
  background: #14110d;
}
#poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;                   /* 和视频同样的裁切方式，切换时无跳变 */
}
#poster.gone { opacity: 0; pointer-events: none; }

/* ---------- 对开双页（做旧纸张） ---------- */
.spread {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms var(--ease-out);
}
.spread.on { opacity: 1; pointer-events: auto; }

.book-spread {
  position: relative;
  width: var(--spread-w, 1200px);
  height: var(--spread-h, 88vh);
  display: grid;
  grid-template-columns: 1fr 1fr;
  perspective: 2600px;
  perspective-origin: 50% 50%;
  transform: translateZ(0);
  filter: drop-shadow(0 34px 60px rgba(10, 8, 4, 0.62));
}

/* 纸张：陈旧斑 + 边缘氧化 + 装订侧压痕，全部用多层背景叠出来 */
.page {
  position: relative;
  overflow: hidden;
  padding: var(--page-pad);
  color: var(--ink);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 6px 100%;
  background-image:
    radial-gradient(ellipse 11% 7% at 13% 16%, rgba(150, 106, 56, 0.19), transparent 72%),
    radial-gradient(ellipse 8% 5% at 78% 30%, rgba(140, 96, 48, 0.14), transparent 70%),
    radial-gradient(ellipse 14% 8% at 31% 78%, rgba(140, 96, 48, 0.13), transparent 74%),
    radial-gradient(ellipse 7% 4.5% at 87% 71%, rgba(150, 106, 56, 0.15), transparent 70%),
    radial-gradient(ellipse 34% 22% at 62% 44%, rgba(132, 92, 44, 0.09), transparent 78%),
    radial-gradient(142% 122% at 50% 50%, rgba(255, 250, 232, 0.42) 36%, rgba(150, 112, 60, 0.24) 100%),
    linear-gradient(178deg, var(--paper) 0%, var(--paper-2) 70%, var(--paper-deep) 100%),
    repeating-linear-gradient(to right,
      rgba(255, 250, 236, 0.85) 0 1px, rgba(158, 128, 84, 0.55) 1px 2px);
}
/* 纸纤维颗粒（SVG 湍流噪声，正片叠底） */
.page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");
}
/* 内侧氧化 + 装订侧压痕 */
.page::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 40px rgba(118, 82, 38, 0.26),
    inset 0 0 8px rgba(118, 82, 38, 0.20);
}
.page--left {
  border-radius: 3px 1px 1px 3px;
  background-position: center, center, center, center, center, center, center, left top;
  box-shadow: inset -30px 0 34px -30px rgba(86, 56, 22, 0.5);
}
.page--right {
  border-radius: 1px 3px 3px 1px;
  background-position: center, center, center, center, center, center, center, right top;
  box-shadow: inset 30px 0 34px -30px rgba(86, 56, 22, 0.5);
}

.page-inner { position: relative; height: 100%; z-index: 1; }
.page-folio {
  position: absolute;
  bottom: calc(var(--page-pad) * 0.40);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.14em;
  color: rgba(104, 78, 46, 0.62);
  z-index: 1;
}
.page--left .page-folio { left: var(--page-pad); }
.page--right .page-folio { right: var(--page-pad); }

/* 书脊沟：让两页看起来是一本书 */
.gutter {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 54px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(74, 46, 16, 0.30) 40%,
    rgba(52, 30, 8, 0.46) 50%,
    rgba(74, 46, 16, 0.30) 60%,
    rgba(0, 0, 0, 0) 100%);
  z-index: 3;
  pointer-events: none;
}

/* ---------- 翻页纸片（同一套做旧纸张） ---------- */
.sheet {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}
.sheet-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  padding: var(--page-pad);
  color: var(--ink);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-image:
    radial-gradient(ellipse 11% 7% at 13% 16%, rgba(150, 106, 56, 0.19), transparent 72%),
    radial-gradient(ellipse 8% 5% at 78% 30%, rgba(140, 96, 48, 0.14), transparent 70%),
    radial-gradient(ellipse 14% 8% at 31% 78%, rgba(140, 96, 48, 0.13), transparent 74%),
    radial-gradient(ellipse 7% 4.5% at 87% 71%, rgba(150, 106, 56, 0.15), transparent 70%),
    radial-gradient(142% 122% at 50% 50%, rgba(255, 250, 232, 0.42) 36%, rgba(150, 112, 60, 0.24) 100%),
    linear-gradient(178deg, var(--paper) 0%, var(--paper-2) 70%, var(--paper-deep) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g2'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23g2)' opacity='0.34'/></svg>");
  box-shadow: inset 0 0 34px rgba(118, 82, 38, 0.24);
  border-radius: 1px 3px 3px 1px;
}
.sheet-back { transform: rotateY(180deg); border-radius: 3px 1px 1px 3px; }
.sheet-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 12, 2, 0.4), rgba(0, 0, 0, 0) 58%);
  opacity: 0;
  pointer-events: none;
}

/* ---------- 排版：油墨色 + 衬线 ---------- */
.p-kicker {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.p-title {
  font-family: 'Songti SC', 'SimSun', 'Noto Serif SC', serif;
  font-size: 38px;
  margin: 0 0 6px;
  letter-spacing: 0.03em;
  color: #2f2210;
}
.p-sub { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 20px; }
.p-rule {
  height: 1px;
  margin: 16px 0 22px;
  background: linear-gradient(90deg, rgba(96, 68, 34, 0.42), rgba(96, 68, 34, 0));
}
.p-note {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed rgba(96, 68, 34, 0.28);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.p-note-h {
  display: block;
  font-family: 'Songti SC', 'SimSun', serif;
  font-size: 14px;
  color: #5c4118;
  margin-bottom: 3px;
}

.p-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.p-chip--warn { background: rgba(176, 124, 42, 0.2); color: #6d4c14; box-shadow: inset 0 0 0 1px rgba(176, 124, 42, 0.3); }

/* 进度环 */
.p-rings { display: flex; gap: 26px; margin: 24px 0 8px; }
.p-rings--one { justify-content: center; margin-top: 8px; }
.p-ring-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.p-ring-label { font-size: 13px; color: #4b3a22; letter-spacing: 0.08em; }
.p-ring {
  --p: 50%;
  --c: #2f5d86;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(var(--c) var(--p), rgba(120, 92, 54, 0.22) 0);
  box-shadow: 0 0 0 1px rgba(120, 92, 54, 0.2), inset 0 0 12px rgba(60, 40, 12, 0.18);
}
.p-ring::after {
  content: '';
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #f7eed6, #e6d6b2);
  box-shadow: inset 0 1px 4px rgba(90, 64, 30, 0.28);
}
.p-ring > span {
  position: relative;
  z-index: 1;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #2c2110;
}
.p-ring > span small { font-size: 13px; font-weight: 400; margin-left: 1px; }
.p-ring-sub { font-size: 12px; color: var(--ink-soft); }
.p-ring-streak { font-size: 12px; color: #7a5a2a; }

/* 战报对比条 */
.p-compare { margin-top: 18px; }
.p-compare-bar {
  display: flex;
  height: 9px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(70, 48, 20, 0.3);
}
.p-compare-bar i { background: linear-gradient(180deg, #4a7ba6, #2f5d86); }
.p-compare-bar b { background: linear-gradient(180deg, #cf8b45, #b4622a); }
.p-compare-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 12px;
  color: var(--ink-soft);
}

.p-stat { flex: 1; }
.p-stat b { display: block; font-size: 28px; color: #2c2110; }
.p-stat b small { font-size: 12px; font-weight: 400; color: var(--ink-soft); margin-left: 2px; }
.p-stat span { font-size: 12px; color: var(--ink-soft); }
.p-row { display: flex; gap: 22px; margin: 18px 0 4px; }

.p-card {
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 252, 240, 0.42);
  box-shadow: inset 0 0 0 1px rgba(96, 68, 34, 0.2);
  margin-bottom: 10px;
}
.p-card b { font-size: 15px; color: #2c2110; }
.p-card span { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 3px; }

/* 列表按钮 */
.p-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.p-item {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 14px 17px;
  border: none;
  border-radius: 9px;
  background: rgba(255, 252, 240, 0.38);
  box-shadow: inset 0 0 0 1px rgba(96, 68, 34, 0.22);
  color: #2c2110;
  font-size: 15.5px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.p-item:hover { background: rgba(255, 255, 248, 0.66); transform: translateX(2px); }
.p-item:active { transform: scale(0.988); }
.p-item .ic { width: 26px; text-align: center; font-size: 18px; }
.p-item .tx { flex: 1; }
.p-item .tx em { display: block; font-style: normal; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.p-item .go { color: rgba(96, 68, 34, 0.5); font-size: 18px; }
.p-item.primary {
  color: #f6ecd6;
  background: linear-gradient(168deg, #c1743a 0%, #a85a22 60%, #8f4a18 100%);
  box-shadow: 0 7px 16px rgba(120, 60, 20, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.p-item.primary .tx em { color: rgba(246, 236, 214, 0.8); }
.p-item.primary .go { color: rgba(246, 236, 214, 0.7); }

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  font-size: 12.5px;
  color: rgba(240, 228, 208, 0.72);
  letter-spacing: 0.02em;
  pointer-events: none;
}
#hud button { pointer-events: auto; }

/* ---------- 暗角 ----------
 * 视频背景 + 3D 层本来是两张皮：视频有它自己的景深和虚化，3D 物件是"贴"在上面的。
 * 一层很轻的暗角能把两边压进同一个镜头，同时把视线收到画面中间。
 * 别调重 —— 重了就变成滤镜，而不是"光"。 */
#vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 76% at 52% 46%, rgba(0, 0, 0, 0) 42%, rgba(18, 12, 5, 0.34) 100%),
    linear-gradient(180deg, rgba(12, 8, 3, 0.16) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 74%, rgba(12, 8, 3, 0.22) 100%);
}

/* ---------- 静置自动隐藏 ----------
 * 调试串、fps、判据面板一直挂在画面上，等于永远隔着一层玻璃看场景。
 * 4.5 秒没有输入就淡到 12%（不是消失：还要让人知道能叫出来），一动就回来。
 * `?dev=1` 会钉住不淡 —— 调参和截图时需要它一直在。 */
#hud, #live { transition: opacity 900ms var(--ease-out); }
body.chrome-idle #hud,
body.chrome-idle #live { opacity: 0.12; }
/* 右边（视口/性能/账号/按钮）不许换行、不许被压缩；
 * 左边那串调试信息可以缩，缩不下就省略号 —— 它本来就是给自己看的。 */
.hud-right { flex: 0 0 auto; white-space: nowrap; }
.hud-left { flex: 0 1 auto; min-width: 0; }
#debug { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-left, .hud-right {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 翻开后跨页几乎铺满屏，HUD 需要自己的底以免压在纸上读不清 */
  padding: 6px 13px;
  border-radius: 999px;background: rgba(8, 6, 4, 0.46);
  backdrop-filter: blur(7px);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #c1743a; box-shadow: 0 0 10px #c1743a; }
.dot.ready { background: #6fbf73; box-shadow: 0 0 10px #6fbf73; }
.dot.warn { background: #d8a13a; box-shadow: 0 0 10px #d8a13a; }
.hud-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(240, 228, 208, 0.3);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(248, 238, 222, 0.92);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--d-fast) var(--ease-out);
}
.hud-btn:hover { background: rgba(0, 0, 0, 0.5); }
/* 环境音开着的时候给个明确的"正在响"状态（用的是 <audio> 的真实事件，不是自己的布尔值） */
.hud-btn.on {
  color: #fdf6e6;
  border-color: rgba(246, 236, 214, 0.55);
  background: rgba(150, 104, 50, 0.6);
}
.hud-btn.on:hover { background: rgba(170, 120, 58, 0.72); }

/* ---------- 玩偶实时判据（真实业务数据 → 姿态的推导过程） ---------- */
#live {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 6;
  min-width: 272px;
  padding: 12px 15px 13px;
  border-radius: 13px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(240, 228, 208, 0.78);
  background: rgba(8, 6, 4, 0.5);
  backdrop-filter: blur(7px);
  pointer-events: none;
}
.live-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(240, 228, 208, 0.6);
}
.live-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.live-row span { opacity: 0.55; }
.live-row b { font-weight: 500; color: rgba(248, 238, 222, 0.95); }
.live-vd {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(240, 228, 208, 0.16);
}
.live-vd b { font-size: 13.5px; letter-spacing: 0.04em; color: #e6d3a8; }
.live-vd span { opacity: 0.62; }
.live-hint {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(240, 228, 208, 0.12);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(230, 211, 168, 0.72);
}

/* ---------- 搭子面板（点玩偶打开） ----------
 * 复用 .page 那套做旧纸张：面板就是"浮在场景上的一张纸"，
 * 和书页同一个视觉语言，不另起一套皮。
 */
#partner,
#journal,
#agree,
#wheel,
#login,
#punishConfig {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
#partner.on,
#journal.on,
#agree.on,
#wheel.on,
#login.on,
#punishConfig.on { opacity: 1; }
/* ⚠ 必须显式写这条：#partner 的 display 优先级高于 UA 的 [hidden]{display:none}，
 *   不写的话 hidden 属性根本挡不住它，面板一上来就是可见的。 */
#partner[hidden],
#journal[hidden],
#agree[hidden],
#wheel[hidden],
#login[hidden],
#punishConfig[hidden] { display: none; }
/* 登录页挡在一切前面：它上面不该还能点到别的面板 */
#login { z-index: 20; }
.pt-veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 4, 0.46);
  backdrop-filter: blur(3px);
}
.pt-card {
  position: relative;
  width: min(1040px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 26px 38px 22px;
  border-radius: 4px;
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(255, 250, 232, 0.5) inset;
  transform: translateY(10px) scale(0.985);
  transition: transform 240ms var(--ease-out);
}
#partner.on .pt-card,
#journal.on .pt-card,
#agree.on .pt-card,
#wheel.on .pt-card,
#login.on .pt-card,
#punishConfig.on .pt-card { transform: none; }
/* 约定和转盘都比搭子面板窄得多：内容是单列的一块，铺满 1040px 会散 */
.ag-card { width: min(560px, 94vw); }
.pw-card { width: min(620px, 94vw); }
.lg-card { width: min(460px, 94vw); }
.pc-card { width: min(700px, 94vw); }
/* 内容仍然可能比视口高（比如窗口很扁），给一条细滚动条，别用系统那条 */
.pt-card::-webkit-scrollbar { width: 9px; }
.pt-card::-webkit-scrollbar-thumb {
  background: rgba(96, 68, 34, 0.26);
  border-radius: 5px;
}

/* 桌面三栏：谁读得多 ｜ 房间 ｜ 绑定管理。
 * 正式端是手机竖排，照搬会把"惩罚转盘"顶到折叠线以下、邀请表单也挤没了。 */
.pt-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 336px;
  gap: 26px;
  align-items: start;
}
.pt-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 0 7px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: #6d4c14;
  text-transform: none;
}
.pt-col > .pt-h:first-child { margin-top: 4px; }

/* 环是按书页尺寸做的（132px），面板比书页窄，缩一档 */
#partner .p-ring { width: 96px; height: 96px; }
#partner .p-ring::after { inset: 10px; }
#partner .p-ring > span { font-size: 23px; }
#partner .p-rings { gap: 10px; margin: 6px 0 10px; }
#partner .p-ring-label { font-size: 12px; }
#partner .p-ring-sub,
#partner .p-ring-streak { font-size: 11px; }
#partner .p-note { margin-top: 12px; }
#partner .p-strip { margin-top: 10px; }

/* ---------- 我的专属 ID ---------- */
.pt-idrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 9px;
  background: rgba(255, 252, 240, 0.5);
  box-shadow: inset 0 0 0 1px rgba(120, 92, 54, 0.22);
}
.pt-idtx { flex: 1; }
.pt-idtx em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.pt-idtx b { font-size: 21px; letter-spacing: 0.1em; color: #2c2110; }

/* ---------- 我的搭子 ---------- */
.pt-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(255, 252, 240, 0.5);
  box-shadow: inset 0 0 0 1px rgba(120, 92, 54, 0.22);
}
.pt-av {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
  color: #f6ecd6;
  background: linear-gradient(160deg, #7a5a3a, #5d4327);
}
.pt-person-tx b { display: block; font-size: 15px; color: #2c2110; }
.pt-person-tx em { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }

/* 解绑的两步确认 */
.pt-arm {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #7a3a22;
  background: rgba(176, 74, 42, 0.1);
  box-shadow: inset 0 0 0 1px rgba(176, 74, 42, 0.22);
}
.pt-arm-act { display: flex; gap: 6px; margin-left: auto; flex: none; }

/* ---------- 绑定新搭子 ---------- */
.pt-field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}
.pt-field > span {
  flex: none;
  width: 62px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.pt-field > input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  color: #2c2110;
  background: rgba(255, 252, 240, 0.62);
  box-shadow: inset 0 0 0 1px rgba(120, 92, 54, 0.24);
  outline: none;
}
.pt-field > input:focus {
  background: rgba(255, 253, 245, 0.92);
  box-shadow: inset 0 0 0 1px rgba(168, 90, 34, 0.55);
}
.pt-field > input::placeholder { color: rgba(109, 90, 66, 0.55); }

/* ---------- 按钮 ---------- */
.pt-btn {
  padding: 9px 16px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  /* 不加 nowrap 的话，行内空间紧张时"拒绝"会被压成竖排两个字 */
  white-space: nowrap;
  color: #3a2c1c;
  background: rgba(255, 252, 240, 0.6);
  box-shadow: inset 0 0 0 1px rgba(120, 92, 54, 0.3);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.pt-btn:hover { background: rgba(255, 253, 245, 0.92); }
.pt-btn:active { transform: scale(0.98); }
.pt-btn--primary {
  width: 100%;
  margin-top: 4px;
  color: #f6ecd6;
  background: linear-gradient(168deg, #c1743a 0%, #a85a22 60%, #8f4a18 100%);
  box-shadow: 0 6px 14px rgba(120, 60, 20, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.pt-btn--primary:hover { background: linear-gradient(168deg, #cd7f42 0%, #b3622a 60%, #98511c 100%); }
.pt-btn--mini { padding: 6px 12px; font-size: 12px; }
.pt-btn--ghost { width: 100%; margin-top: 10px; color: rgba(96, 68, 34, 0.75); }
.pt-btn--danger { color: #f6ecd6; background: linear-gradient(168deg, #a8523a, #8a3d28); }
.pt-btn--danger:hover { background: linear-gradient(168deg, #b45c42, #97452e); }

.pt-tip {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- 申请行 ---------- */
.pt-req {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  margin-bottom: 7px;
  border-radius: 9px;
  background: rgba(255, 252, 240, 0.42);
  box-shadow: inset 0 0 0 1px rgba(120, 92, 54, 0.18);
}
.pt-req-tx { flex: 1; min-width: 0; }
.pt-req-tx b { display: block; font-size: 13.5px; color: #2c2110; }
.pt-req-tx em { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.pt-quote {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: #7a5a2a;
}
.pt-req-act { display: flex; gap: 6px; flex: none; }

/* ---------- 动作反馈 ---------- */
.pt-notice {
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}
.pt-notice--ok {
  color: #37502f;
  background: rgba(96, 132, 84, 0.14);
  box-shadow: inset 0 0 0 1px rgba(96, 132, 84, 0.24);
}
.pt-notice--err {
  color: #8a3d28;
  background: rgba(176, 74, 42, 0.11);
  box-shadow: inset 0 0 0 1px rgba(176, 74, 42, 0.24);
}
.pt-x {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  font-size: 15px;
  color: rgba(96, 68, 34, 0.7);
  background: rgba(255, 252, 240, 0.5);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out);
}
.pt-x:hover { background: rgba(255, 252, 240, 0.9); }

.hint {
  position: fixed;
  left: 50%;
  bottom: 8vh;
  transform: translateX(-50%);
  z-index: 6;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: rgba(244, 232, 210, 0.75);
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out);
  animation: breathe 2.6s ease-in-out infinite;
}
/* 注意：animation 会覆盖普通声明，所以隐藏时必须同时关掉动画 */
.hint.off { animation: none; opacity: 0; }
@keyframes breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } }

/* 小尺寸桌面窗口（笔记本 1366×768 之类）等比收敛，不做手机适配。
   注意：这里不要覆盖 .book-spread 的宽高 —— 尺寸由 JS 按宽高比统一算。 */
@media (max-width: 1400px) {
  :root { --page-pad: 38px; }
  .p-title { font-size: 32px; }
  .p-big { font-size: 50px; }
  .p-item { font-size: 15px; padding: 13px 16px; }
}
@media (max-width: 1100px) {
  :root { --page-pad: 30px; }
  .p-title { font-size: 27px; }
  .p-big { font-size: 42px; }
  .p-item { font-size: 14px; padding: 11px 14px; }
  .p-stat b { font-size: 23px; }
}

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

/* ---------- 记录本 ----------
 * 书里原来那 4 个 Tab（今天 / 书架 / 动态 / 我的）已移除，现在整本书 = 一本记录本：
 * 每一页是一条记录（照片 + 感想），第一页是空白页。书页本体用 .page 那套纸，
 * 编辑器是浮在场景上的另一张 .pt-card（和搭子面板同一套皮）。
 */

/* 页内是"上中下"三段：中段可滚，页脚的翻页按钮永远在底部。
 * padding-top 是为了让页头别顶到顶部的状态条底下（书几乎铺满整屏）。 */
.page-inner { display: flex; flex-direction: column; padding-top: 22px; }
.jr-body { flex: 1; min-height: 0; overflow-y: auto; }

.jr-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.jr-av {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Songti SC', 'SimSun', serif;
  font-size: 15px;
  color: #f3e7cd;
}
.jr-av--me { background: radial-gradient(circle at 36% 30%, #4a7ba6, #2f5d86); }
.jr-av--pa { background: radial-gradient(circle at 36% 30%, #cf8b45, #a85a22); }
.jr-who { flex: 1; min-width: 0; }
.jr-who b { display: block; font-size: 15px; color: #2c2110; }
.jr-who em { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.jr-x {
  flex: none;
  width: 26px; height: 26px;
  border: none; border-radius: 50%;
  font-size: 12px;
  color: rgba(96, 68, 34, 0.5);
  background: rgba(255, 252, 240, 0.5);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.jr-x:hover { color: #8a3d28; background: rgba(255, 252, 240, 0.95); }

.jr-photos { display: grid; gap: 7px; margin-bottom: 13px; min-height: 0; }
/* ⚠ 尺寸一律写在 <img> 上，**不要靠容器**。踩过两次：
 *   容器上的 max-height 走过"页 → flex 中段(.jr-body, overflow:auto) → grid 容器"
 *   这条百分比链，实测**不生效**，照片照样铺满整页；
 *   而直接给 <img> 写 max-height + max-width + height:auto 是稳的，不需要父级配合。
 * 目标：**整块照片区 ≈ 半个书高**。书高 = 视口 × SPREAD_H(0.95)，所以半个书高 ≈ 47vh。
 *   单张      47vh（正好半个书高）
 *   2~4 张    两列，每张 22vh（4 张两行 ≈ 44vh）
 *   5 张以上  三列，每张 15vh（最多三行 ≈ 45vh） */
.jr-photos--1 { grid-template-columns: 1fr; }
.jr-photos--2 { grid-template-columns: 1fr 1fr; }
.jr-photos--3 { grid-template-columns: repeat(3, 1fr); }
.jr-photo { display: block; overflow: hidden; border-radius: 3px; background: rgba(96, 68, 34, 0.1); }
.jr-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 多张：两列/三列时逐张封顶（配合上面的分档，整块仍是半个书高左右） */
.jr-photos--2 .jr-photo img { max-height: 22vh; }
.jr-photos--3 .jr-photo img { max-height: 15vh; }

/* 单张：**宽度铺满 + 高度封顶在半个书高**。
 * ⚠ 上一版写的是 width:auto（为了"不放大、不裁图"），结果是：
 *   图片本身的像素尺寸小，就真的按原尺寸渲染 —— 又小又空（用户反馈"怎么还是这么小"）。
 *   现在 width:100% 让它**该大就大**，max-height 保证再高也不超过半个书高。 */
.jr-photos--1 .jr-photo img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  max-height: 47vh;
  margin: 0 auto;
  object-fit: contain;
}
/* 单张时容器不要底色：照片是"贴在纸上"的，背后留一条灰色带子很突兀 */
.jr-photos--1 .jr-photo {
  background: transparent;
}

/* ⚠ `[hidden]` 打不过 `display:flex` —— 这一条必须显式写。
 *   #live（玩偶·实时）和 #debug（取景调试串）本来都带 hidden 属性，
 *   但 CSS 里的 display:flex 把它们又显示出来了，于是画面上永远挂着两个黑框。
 *   现在：默认不可见；`?dev=1` 时才由 JS 摘掉 hidden（调参要用）。 */
#live[hidden],
#debug[hidden] {
  display: none !important;
}

/* 视口 / 帧率 / 面数同样是仪器信息（给自己量尺寸用的），默认不显示；
 * ?dev=1 时 main.js 会给 body 加 .dev，它们才回来。 */
#vp,
#perf {
  display: none;
}
body.dev #vp,
body.dev #perf {
  display: inline;
}

.jr-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: #43331d;
  /* 用户敲的换行是内容的一部分，不能吃掉 */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 第一页：粒子标题。canvas 由 titleparticles.js 驱动，尺寸每帧跟着页面走 */
.jr-title {
  flex: 1;
  display: grid;
  place-items: stretch;
  min-height: 0;
}
.jr-title-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 撕掉这一页：两步确认 */.jr-arm {
  margin-top: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #7a3a22;
  background: rgba(176, 74, 42, 0.1);
  box-shadow: inset 0 0 0 1px rgba(176, 74, 42, 0.22);
}
.jr-arm-act { display: flex; gap: 8px; margin-top: 9px; }
.jr-turn-btn {
  padding: 6px 13px;
  border: none; border-radius: 999px;
  font: inherit; font-size: 12.5px;
  color: #3a2c1c;
  background: rgba(255, 252, 240, 0.6);
  box-shadow: inset 0 0 0 1px rgba(120, 92, 54, 0.3);
  cursor: pointer;
}
.jr-turn-btn--danger { color: #f6ecd6; background: linear-gradient(168deg, #a8523a, #8a3d28); }

/* 空白页：打开就能写 */
.jr-blank {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
.jr-plus {
  font-size: 46px;
  line-height: 1;
  color: rgba(120, 92, 54, 0.32);
}
.jr-blank-h { margin: 10px 0 0; font-size: 17px; color: #4b3a22; }
.jr-blank-s { margin: 0 0 20px; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.jr-blank .p-menu { width: 100%; min-width: 230px; }

/* 页脚翻页 */
.jr-pager {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.jr-turn {
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  font-size: 16px; line-height: 1;
  color: rgba(96, 68, 34, 0.8);
  background: rgba(255, 252, 240, 0.5);
  box-shadow: inset 0 0 0 1px rgba(96, 68, 34, 0.2);
  cursor: pointer;
}
.jr-turn:hover:not(:disabled) { background: rgba(255, 253, 245, 0.95); }
.jr-turn:disabled { opacity: 0.28; cursor: default; }

/* ---------- 记录本编辑器 ---------- */
.pt-field--block { display: block; }
.pt-field--block > span { display: block; width: auto; margin-bottom: 6px; }
.pt-field--block > textarea {
  width: 100%;
  padding: 11px 13px;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.62;
  color: #2c2110;
  background: rgba(255, 252, 240, 0.62);
  box-shadow: inset 0 0 0 1px rgba(120, 92, 54, 0.24);
  outline: none;
  resize: vertical;
}
.pt-field--block > textarea:focus {
  background: rgba(255, 253, 245, 0.92);
  box-shadow: inset 0 0 0 1px rgba(168, 90, 34, 0.55);
}
.pt-field--block > textarea::placeholder { color: rgba(109, 90, 66, 0.55); }

.jr-pick { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.jr-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.jr-previews:empty { display: none; }
.jr-prev {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(120, 92, 54, 0.24);
}
.jr-prev img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-prev-x {
  position: absolute;
  top: 3px; right: 3px;
  width: 20px; height: 20px;
  border: none; border-radius: 50%;
  font-size: 11px; line-height: 1;
  color: #f6ecd6;
  background: rgba(40, 24, 10, 0.62);
  cursor: pointer;
}
.jr-prev-x:hover { background: rgba(140, 50, 28, 0.9); }

/* ---------- 我们的约定 ----------
 * 定的数会落到真实的每日/每周/每月目标上（惩罚结算的基准），所以这块纸
 * 读起来要像"签了字的东西"：数字大、动作少、旁边就写着后果。
 */
.ag-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.ag-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px 9px;
  border: none;
  border-radius: 8px;
  font: inherit;
  color: #4b3a22;
  background: rgba(255, 252, 240, 0.42);
  box-shadow: inset 0 0 0 1px rgba(96, 68, 34, 0.18);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out);
}
.ag-tab b { font-size: 14px; font-weight: 600; }
.ag-tab em { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.ag-tab:hover { background: rgba(255, 253, 245, 0.8); }
.ag-tab.on {
  color: #f6ecd6;
  background: linear-gradient(168deg, #a8763f, #8a5a28);
  box-shadow: 0 6px 14px rgba(80, 50, 16, 0.28), inset 0 1px 0 rgba(255, 240, 210, 0.3);
}
.ag-tab.on em { color: rgba(246, 236, 214, 0.8); }

.ag-set {
  padding: 18px 20px 16px;
  border-radius: 10px;
  background: rgba(255, 252, 240, 0.42);
  box-shadow: inset 0 0 0 1px rgba(96, 68, 34, 0.18);
}
.ag-set-h { display: block; font-size: 13px; color: #4b3a22; letter-spacing: 0.06em; }
.ag-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 12px 0 14px;
}
.ag-btn {
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  font-size: 20px; line-height: 1;
  color: #4b3a22;
  background: rgba(255, 255, 250, 0.72);
  box-shadow: inset 0 0 0 1px rgba(96, 68, 34, 0.22), 0 2px 6px rgba(60, 40, 12, 0.12);
  cursor: pointer;
}
.ag-btn:hover:not(:disabled) { background: #fffdf5; }
.ag-btn:disabled { opacity: 0.45; cursor: default; }
.ag-val {
  min-width: 190px;
  text-align: center;
  font-family: 'Songti SC', 'SimSun', serif;
  font-size: 28px;
  color: #2c2110;
}
.ag-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.ag-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
.ag-pair-me, .ag-pair-pa { display: flex; align-items: baseline; gap: 6px; }
.ag-pair-me em, .ag-pair-pa em { font-style: normal; font-size: 12px; }
.ag-pair-me b, .ag-pair-pa b { font-size: 15px; color: #2c2110; font-weight: 600; }
.ag-pair-pa b { color: #8a5a28; }
.ag-pair-sum { margin-left: auto; }
.ag-pair-sum b { color: #2c2110; }
.ag-save { width: 100%; margin-top: 12px; }

/* ---------- 惩罚转盘 ---------- */
.pw-counts {
  display: flex;
  gap: 22px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.pw-counts b { font-size: 19px; color: #2c2110; margin-right: 3px; }
.pw-counts .hot b { color: #a8523a; }

.pw-choose-h { margin: 0 0 8px; font-size: 13px; color: #4b3a22; }
.pw-pick { margin-top: 16px; }
.pw-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pw-chip {
  padding: 6px 13px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  color: #4b3a22;
  background: rgba(255, 252, 240, 0.5);
  box-shadow: inset 0 0 0 1px rgba(96, 68, 34, 0.22);
  cursor: pointer;
}
.pw-chip:hover:not(:disabled) { background: rgba(255, 253, 245, 0.95); }
.pw-chip.on {
  color: #f6ecd6;
  background: linear-gradient(168deg, #a8763f, #8a5a28);
  box-shadow: 0 4px 10px rgba(80, 50, 16, 0.26);
}
.pw-chip:disabled { opacity: 0.55; cursor: default; }
.pw-choose-sel { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.pw-choose-sel b { color: #4b3a22; }
.pw-choose-sel em { font-style: normal; margin-left: 6px; }

.pw-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 2px 0 4px;
}
.pw-wheel { position: relative; width: 260px; height: 260px; }
.pw-pointer {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 24px solid #b3462c;
  filter: drop-shadow(0 2px 3px rgba(60, 30, 10, 0.3));
  z-index: 3;
}
.pw-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  /* ⚠ 过渡必须挂在**元素本身**上：整块 innerHTML 重建出来的 disc 一出生就带着
     最终角度，不会触发过渡（过渡要的是同一个元素的值发生变化）。 */
  transition-property: transform;
  transition-duration: 4600ms;
  transition-timing-function: cubic-bezier(0.17, 0.67, 0.12, 0.99);
  box-shadow: inset 0 0 0 7px rgba(255, 252, 240, 0.9), 0 10px 26px rgba(40, 26, 10, 0.3);
}
.pw-sec {
  position: absolute;
  width: 62px;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1.2;
  pointer-events: none;
}
.pw-sec i { display: block; font-size: 17px; font-style: normal; }
.pw-sec b { display: block; font-size: 11px; font-weight: 600; color: #33240f; overflow-wrap: anywhere; }
.pw-sec b.off { color: rgba(51, 36, 15, 0.42); font-weight: 400; }
.pw-hub {
  position: absolute;
  top: 50%; left: 50%;
  width: 50px; height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Songti SC', 'SimSun', serif;
  font-size: 18px;
  color: #8a5a28;
  background: #fffdf5;
  box-shadow: 0 3px 10px rgba(40, 26, 10, 0.28);
  z-index: 2;
}
.pw-go { min-width: 200px; }
.pw-go:disabled { opacity: 0.5; cursor: default; }

.pw-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 10px;
  text-align: center;
  background: rgba(168, 90, 34, 0.1);
  box-shadow: inset 0 0 0 1px rgba(168, 90, 34, 0.28);
}
.pw-result-k { font-size: 12px; letter-spacing: 0.2em; color: #8a5a28; }
.pw-result-v { display: flex; align-items: center; gap: 9px; }
.pw-result-v i { font-size: 24px; font-style: normal; }
.pw-result-v b { font-family: 'Songti SC', 'SimSun', serif; font-size: 23px; color: #2c2110; }
.pw-result-acts { display: flex; gap: 10px; margin-top: 6px; }

.pw-empty { text-align: center; padding: 8px 0 16px; }
/* 取数没回来时的过渡态：不能让它长得像"没有惩罚" */
.pw-loading {
  padding: 46px 0 52px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
}
/* 替搭子确认：搭子认罚之后轮到我了 */
.pw-confirm {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 9px;
  background: rgba(96, 132, 84, 0.12);
  box-shadow: inset 0 0 0 1px rgba(96, 132, 84, 0.24);
}
.pw-cf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.pw-cf-row + .pw-cf-row { border-top: 1px dashed rgba(96, 68, 34, 0.2); }
.pw-cf-row .pw-item-tx b { font-size: 14px; }.pw-empty-ic { font-size: 30px; }
.pw-empty p { margin: 6px 0; font-size: 15px; color: #3a2c1c; }
.pw-empty .pt-tip { display: block; }

/* 搭子面板里那张「今日约定」卡片现在可以点开 */
.p-card--go {
  display: block;
  width: 100%;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out);
}
.p-card--go:hover { background: rgba(255, 255, 248, 0.62); }
.p-card-go { float: right; color: #a8763f; font-weight: 400; }
.p-card-cta { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: #a8763f; }

/* ---------- 登入 ----------
 * 这是唯一"在场景之外"的界面：还没有身份时，玩偶/搭子/记录本都没有意义。
 * 用的还是那套做旧纸张，因为它就是浮在同一片森林上的一张纸。
 */
.lg-head { margin-bottom: 18px; }
.lg-tabs { margin-bottom: 18px; }
.lg-form { display: flex; flex-direction: column; gap: 14px; }
.lg-form .pt-field--block > input {
  width: 100%;
  padding: 11px 13px;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: #2c2110;
  background: rgba(255, 252, 240, 0.62);
  box-shadow: inset 0 0 0 1px rgba(120, 92, 54, 0.24);
  outline: none;
}
.lg-form .pt-field--block > input:focus {
  background: rgba(255, 253, 245, 0.95);
  box-shadow: inset 0 0 0 1px rgba(168, 90, 34, 0.55);
}
.lg-form .pt-field--block > input::placeholder { color: rgba(109, 90, 66, 0.55); }
.lg-remember { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #4b3a22; }
.lg-remember input { width: 15px; height: 15px; accent-color: #a8763f; }
.lg-go { width: 100%; margin-top: 2px; }
.lg-go:disabled { opacity: 0.6; cursor: default; }

/* HUD 上的"当前账号 / 退出" */
.who {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  padding: 3px 4px 3px 11px;
  border-radius: 999px;
  background: rgba(20, 14, 6, 0.42);
  font-size: 12.5px;
  color: #f0e6d2;
}
.who-tx { opacity: 0.9; }
.who-btn {
  padding: 3px 9px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  color: #f0e6d2;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
}
.who-btn:hover { background: rgba(255, 255, 255, 0.24); }
.who-btn--danger { background: rgba(168, 60, 34, 0.75); }
.who-btn--danger:hover { background: rgba(196, 72, 40, 0.9); }
/* ⚠ 又是这条：类里的 display:flex 会盖掉 UA 的 [hidden]{display:none}，
 *   不写这句的话退出登录之后这枚账号条还挂在 HUD 上（面板那边踩过两次，这里也一样）。 */
.who[hidden] { display: none; }

/* ---------- 设置转盘词条 ----------
 * 6 行，一行一格：编号 / 图标 / 内容 / 配色 / 开关。
 * 行内元素多，所以每行用 grid 定好列宽，别让长内容把配色挤走。
 */
.pc-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pc-row {
  display: grid;
  grid-template-columns: 26px 52px 1fr auto 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(255, 252, 240, 0.42);
  box-shadow: inset 0 0 0 1px rgba(96, 68, 34, 0.18);
  transition: opacity var(--d-fast) var(--ease-out);
}
.pc-row.off { opacity: 0.5; }
.pc-no {
  font-family: 'Songti SC', 'SimSun', serif;
  font-size: 15px;
  color: #8a5a28;
  text-align: center;
}
.pc-emoji, .pc-content {
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  font: inherit;
  font-size: 13.5px;
  color: #2c2110;
  background: rgba(255, 253, 245, 0.72);
  box-shadow: inset 0 0 0 1px rgba(120, 92, 54, 0.22);
  outline: none;
}
.pc-emoji { text-align: center; }
.pc-emoji:focus, .pc-content:focus {
  background: #fffdf5;
  box-shadow: inset 0 0 0 1px rgba(168, 90, 34, 0.55);
}
.pc-colors { display: flex; gap: 5px; }
.pc-dot {
  width: 18px; height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(60, 40, 12, 0.25);
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out);
}
.pc-dot:hover { transform: scale(1.15); }
.pc-dot.on {
  box-shadow: 0 0 0 2px #fffdf5, 0 0 0 3.5px rgba(60, 40, 12, 0.5);
}
.pc-toggle {
  padding: 6px 0;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  color: #3a2c1c;
  background: rgba(255, 253, 245, 0.75);
  box-shadow: inset 0 0 0 1px rgba(120, 92, 54, 0.3);
  cursor: pointer;
}
.pc-row.off .pc-toggle { color: #f6ecd6; background: rgba(120, 92, 54, 0.6); }
.pc-hint { margin: 0 0 14px; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.pc-save { width: 100%; }