/* 雁山 — one committed look: warm cream paper, ink text, lanyard blue accent, autumn leaf warm.
   Layout: a single portrait "screen" (#app) that fills a phone, centered as a 9:19.5 frame on wide screens. */
:root {
  --paper: #f5efe4;
  --paper-2: #ebe2d2;
  --paper-3: #ddd2bf;
  --ink: #2b2521;
  --ink-2: #6a6058;
  --ink-3: #9a8f84;
  --line: #d6cab6;
  --accent: #3d5a8a;
  --accent-2: #dfe6f1;
  --leaf: #c27a3e;
  --seal: #b4433a;
  --good: #4f7f5c;
  --night: #1d1a19;
  --f-title: 'Zhi Mang Xing', 'STXingkai', 'KaiTi', cursive;
  --f-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --f-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #3a332e;
  color: var(--ink);
  font-family: var(--f-serif);
  overflow: hidden;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

#app {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 100%;
  overflow: hidden;
  background: var(--paper);
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 700px) {
  #app { max-width: calc(100dvh * 9 / 19.5); box-shadow: 0 0 0 1px #00000040, 0 30px 80px #00000080; }
}
#stage { position: absolute; inset: 0; }
.layer { position: absolute; inset: 0; animation: fadein .45s ease both; }
.layer.out { animation: fadeout .4s ease both; }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeout { from { opacity: 1 } to { opacity: 0 } }

/* ---------- placeholders for images that are not generated yet ---------- */
.ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 16px;
  background:
    repeating-linear-gradient(135deg, #00000008 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #e9dcc6, #cdbb9f);
  color: #5b4e42;
  font: 13px/1.6 var(--f-sans);
  text-align: center;
}
.ph b { display: block; font-size: 12px; letter-spacing: .1em; color: #8a7663; margin-bottom: 4px; }
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Image-aligned frame: covers the box like object-fit:cover; children use % of the image itself. */
.fit { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.frame {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100cqw, calc(100cqh * var(--ar))); height: max(100cqh, calc(100cqw / var(--ar)));
}
.frame-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- title ---------- */
.title-screen { display: flex; flex-direction: column; background: var(--paper); }
.title-art { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.title-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 45%, var(--paper) 96%);
}
.title-art img, .title-art .ph { animation: slowpush 22s ease-out both; }
@keyframes slowpush { from { transform: scale(1.12) } to { transform: scale(1) } }
.title-name {
  position: absolute; z-index: 2; top: calc(28px + var(--safe-t)); right: 22px;
  writing-mode: vertical-rl;
  font: 96px/1 var(--f-title);
  color: #fffdf8;
  text-shadow: 0 2px 18px #0000006b;
  letter-spacing: .05em;
  margin: 0;
}
.title-seal {
  position: absolute; z-index: 2; top: calc(250px + var(--safe-t)); right: 34px;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--seal); color: #fff3ea; border-radius: 4px;
  font: 600 13px/1 var(--f-serif); writing-mode: vertical-rl;
  transform: rotate(-4deg);
}
.title-sub {
  position: absolute; z-index: 2; top: calc(32px + var(--safe-t)); right: 128px;
  writing-mode: vertical-rl; color: #fffdf8; text-shadow: 0 1px 8px #00000080;
  font: 14px/1.6 var(--f-serif); letter-spacing: .4em;
}
.title-panel { position: relative; z-index: 2; display: grid; gap: 12px; padding: 0 28px calc(28px + var(--safe-b)); margin-top: -40px; }
.title-panel label { font: 12px var(--f-sans); letter-spacing: .2em; color: var(--ink-2); }
.title-panel input {
  font: 600 20px var(--f-serif); text-align: center; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink-3);
  padding: 6px 0; border-radius: 0;
}
.btn {
  display: block; width: 100%; padding: 13px 16px; border-radius: 999px;
  font: 600 16px var(--f-serif); letter-spacing: .3em;
  background: var(--ink); color: var(--paper);
  transition: transform .15s ease, background .2s;
}
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.btn.small { width: auto; padding: 8px 18px; font-size: 14px; letter-spacing: .15em; }
.title-foot { text-align: center; font: 11px var(--f-sans); color: var(--ink-3); letter-spacing: .1em; }

/* ---------- chapter card ---------- */
.chapter-card { display: grid; place-items: center; background: var(--paper); text-align: center; }
.chapter-card .no { font: 14px var(--f-serif); letter-spacing: .6em; color: var(--ink-2); }
.chapter-card .big { font: 84px/1.1 var(--f-title); color: var(--ink); margin: 10px 0; }
.chapter-card .sub { font: 13px var(--f-sans); letter-spacing: .3em; color: var(--ink-3); }
.chapter-card .rule { width: 40px; height: 1px; background: var(--ink-3); margin: 18px auto; }

/* ---------- comic ---------- */
.comic {
  background:
    radial-gradient(120% 80% at 50% 0%, #fbf7f0 0%, transparent 60%),
    var(--paper);
}
.comic-page {
  position: absolute; inset: 0;
  padding: calc(14px + var(--safe-t)) 14px calc(14px + var(--safe-b));
  display: flex; flex-direction: column;
  animation: fadein .6s ease both;
}
.comic-page.out { animation: fadeout .45s ease both; }
.comic-head { text-align: center; padding: 8px 0 14px; }
.comic-head .t { font: 40px/1.1 var(--f-title); color: var(--ink); }
.comic-head .s { font: 12px var(--f-serif); letter-spacing: .35em; color: var(--ink-2); margin-top: 6px; }
.panel {
  position: relative; flex: 1 1 0; min-height: 0; overflow: hidden;
  --tl: 0px; --tr: 0px; --bl: 0px; --br: 0px;
  clip-path: polygon(0 var(--tl), 100% var(--tr), 100% calc(100% - var(--br)), 0 calc(100% - var(--bl)));
  background: var(--paper-3);
  opacity: 0;
}
.panel.on { animation: panelin .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes panelin { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.cam { position: absolute; inset: 0; transform-origin: 50% 50%; }
.panel.on .cam { animation-duration: 9s; animation-timing-function: cubic-bezier(.25,.1,.25,1); animation-fill-mode: both; }
.panel.on .cam-push { animation-name: cam-push; }
.panel.on .cam-pull { animation-name: cam-pull; }
.panel.on .cam-pan-l { animation-name: cam-pan-l; }
.panel.on .cam-pan-r { animation-name: cam-pan-r; }
.panel.on .cam-pan-u { animation-name: cam-pan-u; }
.panel.on .cam-pan-d { animation-name: cam-pan-d; }
.panel.on .cam-still { animation-name: cam-still; }
@keyframes cam-push { from { transform: scale(1.02) } to { transform: scale(1.14) } }
@keyframes cam-pull { from { transform: scale(1.16) } to { transform: scale(1.02) } }
@keyframes cam-pan-l { from { transform: scale(1.14) translateX(4%) } to { transform: scale(1.14) translateX(-4%) } }
@keyframes cam-pan-r { from { transform: scale(1.14) translateX(-4%) } to { transform: scale(1.14) translateX(4%) } }
@keyframes cam-pan-u { from { transform: scale(1.14) translateY(5%) } to { transform: scale(1.14) translateY(-5%) } }
@keyframes cam-pan-d { from { transform: scale(1.14) translateY(-6%) } to { transform: scale(1.14) translateY(5%) } }
@keyframes cam-still { from { transform: scale(1.03) } to { transform: scale(1.05) } }
.ov-text { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; color: #2b2521; text-align: center; line-height: 1.25; }
.ov-text.serif { font-family: var(--f-serif); font-weight: 600; }
.ov-text.hand { font-family: var(--f-title); }
.ov-notif { position: absolute; display: flex; flex-direction: column; gap: 4px; overflow: hidden; padding: 6px; }
.ov-notif .n {
  background: #ffffffe6; border-radius: 8px; padding: 5px 7px;
  font: 10px/1.35 var(--f-sans); color: #333; box-shadow: 0 1px 4px #0002;
  animation: notifin .35s ease both;
}
.ov-notif .n b { font-weight: 700; margin-right: 4px; }
.ov-notif .count {
  align-self: flex-end; background: var(--seal); color: #fff; border-radius: 999px;
  font: 700 11px var(--f-sans); padding: 2px 8px; margin-bottom: 2px;
}
@keyframes notifin { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
.comic-note {
  position: absolute; writing-mode: vertical-rl;
  font: 15px/2 var(--f-serif); letter-spacing: .25em; color: var(--ink);
  opacity: 0; transition: opacity 1s ease;
}
.comic-note.on { opacity: 1; }
.comic-sub {
  position: absolute; left: 16px; right: 16px; bottom: calc(22px + var(--safe-b));
  padding: 10px 14px; border-radius: 6px;
  background: #fbf7f0ee; box-shadow: 0 4px 20px #00000026;
  font: 16px/1.6 var(--f-serif); color: var(--ink); text-align: center;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.comic-sub.on { opacity: 1; transform: none; }
.comic-sub .who { display: block; font: 600 12px var(--f-sans); color: var(--accent); letter-spacing: .1em; }
.comic-sub.narr { font-style: normal; color: var(--ink-2); letter-spacing: .1em; }
.comic-titledrop {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(closest-side, #f5efe4d9, #f5efe400);
}
.comic-titledrop span { font: 120px/1 var(--f-title); color: var(--ink); animation: titledrop 2.4s ease both; }
@keyframes titledrop { from { opacity: 0; letter-spacing: .4em; filter: blur(8px) } to { opacity: 1; letter-spacing: .05em; filter: blur(0) } }
.skip-btn {
  position: absolute; z-index: 5; top: calc(12px + var(--safe-t)); right: 12px;
  font: 12px var(--f-sans); letter-spacing: .2em; color: var(--ink-2);
  padding: 6px 12px; border-radius: 999px; background: #f5efe4cc; box-shadow: inset 0 0 0 1px var(--line);
}
.tap-hint {
  position: absolute; right: 18px; bottom: calc(8px + var(--safe-b)); z-index: 4;
  font: 11px var(--f-sans); color: var(--ink-3); letter-spacing: .2em;
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .3 } }

/* ---------- dialog ---------- */
.dialog { background: var(--night); }
.dialog .bg { position: absolute; inset: 0; }
.dialog .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, #00000000 40%, #0000008a 100%); }
.portrait {
  position: absolute; left: 50%; bottom: 150px; width: 92%; aspect-ratio: 3 / 4;
  transform: translateX(-50%);
  /* Portraits have a plain beige backdrop; fading all four edges blends them into the scene. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 70%, transparent 98%), linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 70%, transparent 98%), linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
  transition: opacity .35s ease, transform .35s ease;
}
.portrait.hide { opacity: 0; transform: translateX(-50%) translateY(10px); }
.portrait img, .portrait .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.textbox {
  position: absolute; left: 12px; right: 12px; bottom: calc(14px + var(--safe-b));
  min-height: 132px; padding: 22px 18px 16px;
  background: #f8f3eaf2; border-radius: 6px;
  box-shadow: 0 10px 30px #00000059;
}
.textbox .name {
  position: absolute; top: -14px; left: 14px;
  padding: 4px 14px; border-radius: 3px;
  background: var(--ink); color: var(--paper);
  font: 600 14px var(--f-serif); letter-spacing: .12em;
}
.textbox .name small { font: 11px var(--f-sans); opacity: .7; margin-left: 6px; letter-spacing: 0; }
.textbox .text { font: 17px/1.75 var(--f-serif); color: var(--ink); min-height: 60px; }
.textbox.narr .text { color: var(--ink-2); font-size: 16px; }
.textbox.think .text { color: var(--accent); }
.textbox .more { position: absolute; right: 14px; bottom: 8px; font-size: 11px; color: var(--ink-3); animation: blink 1.4s infinite; }
.dlg-tools { position: absolute; z-index: 3; right: 12px; bottom: calc(158px + var(--safe-b)); display: flex; gap: 6px; }
.tool {
  font: 12px var(--f-sans); letter-spacing: .1em; color: #fff;
  padding: 6px 12px; border-radius: 999px; background: #00000055; backdrop-filter: blur(6px);
}
.tool.on { background: var(--accent); }
.choices {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 24px 20px calc(24px + var(--safe-b)); background: #1d1a19b3; animation: fadein .3s ease both;
}
.choices .q { color: #f5efe4; font: 14px var(--f-sans); letter-spacing: .2em; text-align: center; margin-bottom: 6px; opacity: .8; }
.choice-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; padding: 14px 16px; border-radius: 6px;
  background: var(--paper); color: var(--ink); font: 16px/1.5 var(--f-serif);
  box-shadow: 0 6px 18px #0000004d; animation: choicein .4s ease both;
}
.choice-btn:nth-child(3) { animation-delay: .06s } .choice-btn:nth-child(4) { animation-delay: .12s } .choice-btn:nth-child(5) { animation-delay: .18s }
@keyframes choicein { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.choice-btn:active { transform: scale(.98); }
.choice-btn:disabled { opacity: .5; cursor: not-allowed; }
.cost { flex: none; font: 600 11px var(--f-sans); color: var(--leaf); padding: 3px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- HUD ---------- */
#hud { position: absolute; z-index: 20; top: calc(10px + var(--safe-t)); right: 10px; display: flex; gap: 6px; }
.hud-chip, .hud-btn {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: #1d1a19a6; color: #f5efe4; backdrop-filter: blur(6px);
  font: 12px var(--f-sans); letter-spacing: .05em;
}
.hud-btn { width: 30px; padding: 0; justify-content: center; font-size: 16px; }
.hud-sep { opacity: .5; }
.hud-energy { display: inline-flex; gap: 2px; margin-left: 4px; }
.hud-energy i { width: 5px; height: 10px; border-radius: 2px; background: #f5efe4; }
.hud-energy i.used { background: #f5efe433; }
/* On the phone the status bar already shows the time, so the HUD shrinks to energy + menu below it. */
body.hud-light #hud { top: calc(34px + var(--safe-t)); }
body.hud-light #hud-term, body.hud-light #hud-date, body.hud-light .hud-sep { display: none; }
body.hud-light .hud-chip, body.hud-light .hud-btn { background: #f5efe4d9; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
body.hud-light .hud-energy i { background: var(--ink); }
body.hud-light .hud-energy i.used { background: #2b252126; }

/* ---------- toasts ---------- */
#toasts { position: absolute; z-index: 40; left: 0; right: 0; top: calc(52px + var(--safe-t)); display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.toast {
  padding: 7px 14px; border-radius: 999px; background: #1d1a19e6; color: #f5efe4;
  font: 13px var(--f-sans); letter-spacing: .05em; box-shadow: 0 6px 20px #0000004d;
  animation: toast 2.8s ease both;
}
.toast .up { color: #9fd3a8; } .toast .down { color: #f0a493; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px) } 10%, 85% { opacity: 1; transform: none } 100% { opacity: 0 } }

/* ---------- sheets (stats, menu, settings) ---------- */
.sheet-bg { position: absolute; inset: 0; z-index: 50; background: #1d1a1999; animation: fadein .25s ease both; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 86%; overflow: auto;
  padding: 18px 20px calc(24px + var(--safe-b)); border-radius: 16px 16px 0 0;
  background: var(--paper); animation: sheetin .3s cubic-bezier(.2,.8,.2,1) both;
  font-family: var(--f-sans);
}
@keyframes sheetin { from { transform: translateY(100%) } to { transform: none } }
.sheet h3 { margin: 4px 0 14px; font: 600 18px var(--f-serif); letter-spacing: .1em; }
.sheet h4 { margin: 18px 0 8px; font: 600 12px var(--f-sans); letter-spacing: .2em; color: var(--ink-2); }
.sheet .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: -6px auto 12px; }
.stat-row { display: grid; grid-template-columns: 3.2em 1fr 2.4em; align-items: center; gap: 10px; font-size: 14px; padding: 4px 0; }
.stat-row .bar { height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.stat-row .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.stat-row b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rel-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--paper-3); font-size: 14px; }
.rel-row img, .rel-row .av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.rel-row small { display: block; color: var(--ink-3); font-size: 11px; }
.rel-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.clue-row { padding: 10px 12px; border-radius: 6px; background: var(--paper-2); font-size: 13px; line-height: 1.6; margin-bottom: 6px; }
.clue-row b { display: block; font-family: var(--f-serif); font-size: 14px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--paper-3); font-size: 14px; }
.set-row input[type=range] { width: 50%; accent-color: var(--accent); }
.switch { width: 44px; height: 26px; border-radius: 13px; background: var(--paper-3); position: relative; transition: background .2s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .2s; }
.switch[aria-checked=true] { background: var(--accent); }
.switch[aria-checked=true]::after { transform: translateX(18px); }
.menu-list { display: grid; gap: 8px; margin-top: 8px; }

/* ---------- log ---------- */
.log-item { padding: 8px 0; border-bottom: 1px solid var(--paper-3); font: 15px/1.6 var(--f-serif); }
.log-item small { display: block; font: 600 11px var(--f-sans); color: var(--accent); }

/* ---------- phone ---------- */
.phone { background: #ece7df; font-family: var(--f-sans); color: #222; display: flex; flex-direction: column; }
.statusbar {
  flex: none; height: calc(30px + var(--safe-t)); padding: var(--safe-t) 18px 0;
  display: flex; align-items: center; justify-content: space-between; font: 600 13px var(--f-sans);
  position: relative; z-index: 3;
}
.statusbar .icons { display: flex; align-items: center; gap: 6px; }
.sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.sig i { width: 3px; background: currentColor; border-radius: 1px; }
.batt { width: 22px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; position: relative; }
.batt::before { content: ''; position: absolute; left: 2.5px; top: 2.5px; bottom: 2.5px; width: 60%; background: currentColor; border-radius: 1px; }
.batt::after { content: ''; position: absolute; right: -3px; top: 3.5px; width: 2px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0; }
.phone-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.phone-screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: #f4f2ee; animation: slidein .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes slidein { from { transform: translateX(30%); opacity: .4 } to { transform: none; opacity: 1 } }
.phone-home { position: absolute; inset: 0; color: #fff; }
.phone-home .wall { position: absolute; inset: 0; }
.phone-home .wall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#00000033, #00000059); }
.phone-home .clock { position: relative; text-align: center; padding-top: 34px; text-shadow: 0 2px 12px #0006; }
.phone-home .clock b { display: block; font: 300 64px/1 var(--f-sans); letter-spacing: .02em; }
.phone-home .clock span { font-size: 14px; letter-spacing: .1em; }
.apps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 8px; padding: 46px 22px 0; }
.app { display: grid; justify-items: center; gap: 6px; font-size: 11px; text-shadow: 0 1px 4px #0008; position: relative; }
.app .ic {
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  font: 700 22px var(--f-sans); color: #fff; box-shadow: 0 4px 12px #0003;
}
.app.dim .ic { filter: saturate(.3) brightness(.85); }
.badge {
  position: absolute; top: -6px; right: 4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: #e5483b; color: #fff; font: 700 11px/20px var(--f-sans); text-align: center; text-shadow: none;
}
.phone-prompt {
  position: absolute; left: 16px; right: 16px; bottom: calc(96px + var(--safe-b));
  padding: 10px 14px; border-radius: 12px; background: #f8f3eae6; color: var(--ink);
  font: 14px/1.5 var(--f-serif); text-align: center; text-shadow: none; box-shadow: 0 6px 20px #0004;
}
.dock-done {
  position: absolute; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%);
  padding: 12px 26px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 600 15px var(--f-serif); letter-spacing: .2em; box-shadow: 0 8px 24px #0005; animation: fadein .4s both;
  z-index: 5; white-space: nowrap;
}
.p-head {
  flex: none; height: 48px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
  background: #f4f2ee; border-bottom: 1px solid #00000012; font: 600 16px var(--f-sans); text-align: center;
}
.p-head button { font-size: 22px; height: 48px; }
.p-head small { display: block; font: 11px var(--f-sans); color: #888; }
.thread-list { flex: 1; overflow: auto; background: #fff; }
.thread-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 10px 16px; text-align: left; border-bottom: 1px solid #0000000d; }
.thread-row .meta { min-width: 0; }
.thread-row .nm { font-size: 16px; }
.thread-row .pv { font-size: 13px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-row .tm { font-size: 11px; color: #aaa; display: grid; justify-items: end; gap: 6px; }
.thread-row .tm .badge { position: static; }
.av { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; color: #fff; font: 600 16px var(--f-sans); overflow: hidden; flex: none; }
.av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.msgs { flex: 1; overflow: auto; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 12px; background: #eeebe5; scroll-behavior: smooth; }
.msg { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; animation: msgin .3s ease both; }
@keyframes msgin { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.msg .av { width: 38px; height: 38px; border-radius: 6px; font-size: 14px; }
.msg .col { min-width: 0; max-width: 74%; }
.msg .from { font-size: 11px; color: #888; margin: 0 0 3px 2px; }
.bubble { display: inline-block; padding: 9px 12px; border-radius: 8px; background: #fff; font-size: 15px; line-height: 1.5; word-break: break-word; box-shadow: 0 1px 1px #0000000d; }
.msg.me { flex-direction: row-reverse; }
.msg.me .bubble { background: #cfe0f7; }
.msg.me .col { display: grid; justify-items: end; }
.bubble.voice { display: inline-flex; align-items: center; gap: 8px; min-width: 90px; cursor: pointer; }
.bubble.voice .wave { display: inline-flex; gap: 2px; align-items: center; }
.bubble.voice .wave i { width: 2px; border-radius: 1px; background: #555; }
.bubble.voice.playing .wave i { animation: wave .8s ease-in-out infinite; }
.bubble.voice.playing .wave i:nth-child(2) { animation-delay: .1s } .bubble.voice.playing .wave i:nth-child(3) { animation-delay: .2s }
@keyframes wave { 50% { transform: scaleY(.4) } }
.bubble .dur { font-size: 12px; color: #777; }
.bubble.typing { color: #999; letter-spacing: .2em; }
.sys { align-self: center; font-size: 11px; color: #999; background: #00000010; padding: 2px 8px; border-radius: 4px; }
.reply-bar { flex: none; padding: 8px 10px calc(10px + var(--safe-b)); background: #f7f6f3; border-top: 1px solid #0000000f; display: grid; gap: 8px; }
.reply-bar .hint { font-size: 11px; color: #999; text-align: center; letter-spacing: .1em; }
.reply-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; padding: 10px 12px; border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.45; box-shadow: 0 1px 2px #0000001a; }
.reply-opt:active { background: #f0f0f0; }
.reply-opt:disabled { opacity: .45; }
.input-fake { height: 38px; border-radius: 6px; background: #fff; display: flex; align-items: center; padding: 0 12px; color: #bbb; font-size: 13px; }

/* call */
.call { position: absolute; inset: 0; z-index: 6; color: #fff; display: flex; flex-direction: column; align-items: center; background: #1d1a19; }
.call .statusbar { align-self: stretch; }
.call .blur { position: absolute; inset: -20px; background-size: cover; background-position: 50% 20%; filter: blur(24px) brightness(.55); transform: scale(1.1); }
.call .who { position: relative; margin-top: calc(80px + var(--safe-t)); text-align: center; }
.call .ava { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; box-shadow: 0 0 0 3px #ffffff33; }
.call .ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.call .nm { font: 600 26px var(--f-sans); }
.call .st { font-size: 13px; opacity: .75; margin-top: 6px; letter-spacing: .1em; }
.call .ringing .ava { animation: ring 1.4s ease-in-out infinite; }
@keyframes ring { 0%, 100% { box-shadow: 0 0 0 3px #ffffff33 } 50% { box-shadow: 0 0 0 14px #ffffff10 } }
.call .subs { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; padding: 20px 28px; text-align: center; font: 18px/1.7 var(--f-serif); text-shadow: 0 2px 10px #0008; }
.call .subs small { display: block; font: 600 12px var(--f-sans); opacity: .7; letter-spacing: .1em; margin-bottom: 4px; }
.call .btns { position: relative; display: flex; gap: 70px; padding-bottom: calc(60px + var(--safe-b)); }
.call .rb { display: grid; justify-items: center; gap: 8px; font-size: 12px; }
.call .rb span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; }
.call .rb.no span { background: #e5483b; } .call .rb.yes span { background: #3fb35f; }

/* ---------- explore / archive ---------- */
.explore { background: var(--night); }
.explore .scene { position: absolute; inset: 0; }
.hotspot { position: absolute; border-radius: 10px; }
.hotspot::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 1.5px solid #fff8; box-shadow: 0 0 10px #fff6; animation: pulse 2.4s ease-in-out infinite;
}
.hotspot.glow { box-shadow: 0 0 0 2px #ffe3a8cc, 0 0 30px #ffd88a99 inset; animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 2px #ffe3a855, 0 0 10px #ffd88a44 inset } }
@keyframes pulse { 0%, 100% { transform: scale(.8); opacity: .5 } 50% { transform: scale(1.15); opacity: 1 } }
.explore .label {
  position: absolute; left: 50%; top: calc(56px + var(--safe-t)); transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px; background: #1d1a19a6; color: #f5efe4;
  font: 12px var(--f-sans); letter-spacing: .2em; white-space: nowrap;
}
.thought {
  position: absolute; left: 14px; right: 14px; bottom: calc(18px + var(--safe-b)); z-index: 12;
  padding: 14px 16px; border-radius: 6px; background: #f8f3eaf2; color: var(--accent);
  font: 16px/1.7 var(--f-serif); box-shadow: 0 10px 30px #0006; animation: fadein .25s both;
}
.thought small { display: block; font: 600 11px var(--f-sans); color: var(--ink-3); letter-spacing: .15em; margin-bottom: 2px; }
.bulb {
  position: absolute; z-index: 7; top: calc(12px + var(--safe-t)); left: 12px;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #1d1a19a6; color: #f5efe466; font-size: 18px;
}
.bulb.ready { color: #ffd88a; box-shadow: 0 0 0 2px #ffd88a88, 0 0 18px #ffd88a66; animation: glow 1.4s ease-in-out infinite; }
.back-btn {
  position: absolute; z-index: 7; bottom: calc(18px + var(--safe-b)); left: 50%; transform: translateX(-50%);
  padding: 9px 22px; border-radius: 999px; background: #1d1a19b3; color: #f5efe4; font: 13px var(--f-sans); letter-spacing: .2em;
}
.cabinet {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #1d1a19cc; animation: fadein .3s both;
}
.cabinet .front {
  width: 74%; padding: 14px; border-radius: 6px; display: grid; gap: 10px;
  background: linear-gradient(90deg, #3e5a4c, #4b6a5a 50%, #3e5a4c); box-shadow: 0 20px 50px #000a, inset 0 0 0 2px #ffffff14;
}
.drawer {
  position: relative; height: 82px; border-radius: 4px; display: grid; place-items: center;
  background: linear-gradient(#557a68, #46685a); box-shadow: inset 0 0 0 1px #00000040, inset 0 2px 0 #ffffff1a;
}
.drawer .tag { padding: 4px 12px; background: #efe7d6; color: #3b332c; font: 600 13px var(--f-serif); border-radius: 2px; box-shadow: 0 1px 2px #0005; }
.drawer .handle { position: absolute; bottom: 12px; width: 40px; height: 6px; border-radius: 3px; background: #c9c3b3; box-shadow: 0 1px 2px #0006; }
.drawer.glow { box-shadow: 0 0 0 2px #ffe3a8, 0 0 24px #ffd88a99; }
.pages-tray {
  position: absolute; left: 0; right: 0; bottom: calc(76px + var(--safe-b)); z-index: 4;
  display: flex; gap: 10px; overflow-x: auto; padding: 10px 16px 14px; scroll-snap-type: x mandatory;
}
.page-card {
  flex: none; width: 112px; height: 150px; scroll-snap-align: center; position: relative;
  padding: 10px 9px; border-radius: 3px; background: #f2e8d2; color: #4a3f35; text-align: left;
  box-shadow: 0 6px 16px #0007; font: 10px/1.45 var(--f-serif); overflow: hidden;
}
.page-card b { display: block; font-size: 11px; margin-bottom: 4px; }
.page-card .lines i { display: block; height: 4px; margin: 5px 0; background: #4a3f3526; border-radius: 2px; }
.page-card .pn { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 10px; color: #6b5e51; }
.page-card.glow .pn { color: var(--seal); font-weight: 700; text-shadow: 0 0 8px #ffd88a; }
.reader { position: absolute; inset: 0; z-index: 8; background: #1d1a19e6; display: flex; flex-direction: column; animation: fadein .25s both; }
.reader .sheetpaper {
  position: relative; margin: calc(60px + var(--safe-t)) 18px 12px; flex: 1; min-height: 0; overflow: auto;
  padding: 22px 20px 44px; border-radius: 3px; background: #f4ead5; color: #3b332c; font: 14px/1.85 var(--f-serif);
  box-shadow: 0 20px 50px #000a;
}
.reader .sheetpaper h5 { margin: 0 0 10px; font: 700 17px var(--f-serif); text-align: center; letter-spacing: .1em; }
.reader .sheetpaper table { width: 100%; border-collapse: collapse; font-size: 13px; }
.reader .sheetpaper td { border: 1px solid #3b332c40; padding: 4px 6px; }
.reader .sheetpaper .pn { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 12px; color: #6b5e51; }
.reader .sheetpaper .stamp { display: inline-block; margin-top: 10px; padding: 4px 10px; color: var(--seal); box-shadow: inset 0 0 0 2px var(--seal); border-radius: 4px; transform: rotate(-6deg); font-weight: 700; }
.reader .rbar { display: flex; gap: 10px; justify-content: center; padding: 0 16px calc(18px + var(--safe-b)); }
.reader .rbar button { padding: 10px 16px; border-radius: 999px; background: #f5efe41a; color: #f5efe4; font: 14px var(--f-sans); box-shadow: inset 0 0 0 1px #f5efe455; }
.reader .rbar .mark { background: var(--seal); box-shadow: none; }

/* clue card */
.clue-card { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: #1d1a19cc; padding: 24px; animation: fadein .3s both; }
.clue-card .card {
  position: relative; width: 100%; padding: 28px 22px 22px; border-radius: 4px; background: var(--paper);
  box-shadow: 0 24px 60px #000b; animation: cluein .6s cubic-bezier(.2,.8,.2,1) both; font-family: var(--f-serif);
}
@keyframes cluein { from { transform: rotate(-3deg) scale(.9); opacity: 0 } to { transform: rotate(-1deg); opacity: 1 } }
.clue-card .seal { position: absolute; top: -14px; right: 18px; padding: 6px 10px; background: var(--seal); color: #fff3ea; font: 700 12px var(--f-sans); letter-spacing: .1em; border-radius: 3px; transform: rotate(4deg); }
.clue-card .k { font: 12px var(--f-sans); color: var(--ink-3); letter-spacing: .3em; }
.clue-card h4 { margin: 6px 0 10px; font: 700 22px var(--f-serif); }
.clue-card p { margin: 0 0 18px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }

/* end card */
.endcard { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 32px 28px calc(32px + var(--safe-b)); background: var(--paper); overflow: auto; }
.endcard .big { font: 64px/1 var(--f-title); text-align: center; }
.endcard p { margin: 0; font: 14px/1.8 var(--f-serif); color: var(--ink-2); text-align: center; }
.endcard .box { padding: 14px 16px; border-radius: 8px; background: var(--paper-2); font-family: var(--f-sans); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 第一阶段新界面 ---------- */
.thought.narr { color: var(--ink-2); }
.thought.speech { color: var(--ink); }
.thought.speech small { color: var(--accent); }
.app-screen { background: #f4f2ee; }
.app-content { flex: 1; overflow: auto; padding: 14px 14px calc(96px + var(--safe-b)); display: grid; align-content: start; gap: 12px; }
.sched-head { padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #0000000f; }
.sched-energy { display: flex; align-items: baseline; gap: 8px; }
.sched-energy b { font: 700 40px/1 var(--f-sans); color: var(--leaf); font-variant-numeric: tabular-nums; }
.sched-energy span { font-size: 13px; color: #888; }
.sched-head p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: #666; }
.sched-moments { justify-self: start; padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 13px; color: var(--accent); box-shadow: 0 1px 2px #0000001a; }
.sched-list { display: grid; gap: 10px; }
.sched-card { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px transparent, 0 1px 2px #0000001a; transition: box-shadow .15s, opacity .15s; }
.sched-card.on { box-shadow: inset 0 0 0 1.5px var(--accent), 0 1px 2px #0000001a; background: #f2f6fc; }
.sched-card.must { background: #fbf5ec; box-shadow: inset 0 0 0 1.5px var(--leaf); }
.sched-card:disabled { opacity: .45; }
.sc-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.sc-top b { font-size: 15px; }
.sc-when { font-size: 11px; color: #999; }
.sc-desc { font-size: 13px; color: #555; line-height: 1.55; }
.moments { position: absolute; inset: 0; z-index: 4; }
.feed { flex: 1; overflow: auto; background: #fff; }
.post { display: grid; grid-template-columns: 42px 1fr; gap: 10px; padding: 14px 14px; border-bottom: 1px solid #0000000d; text-align: left; }
.post.tappable { cursor: pointer; }
.post .av { width: 42px; height: 42px; border-radius: 6px; }
.post .pc { min-width: 0; display: grid; gap: 6px; }
.post b { color: #576b95; font-size: 15px; }
.post .pt { font-size: 15px; line-height: 1.5; }
.post .pimg { position: relative; width: 62%; aspect-ratio: 1; border-radius: 4px; overflow: hidden; }
.post .pimg img, .post .pimg .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; font-size: 10px; }
.post .pempty { font-size: 12px; color: #aaa; }
.post .ptime { font-size: 11px; color: #b2b2b2; }
.oa-card { padding: 16px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #0000001a; display: grid; gap: 6px; }
.oa-card b { font-size: 16px; }
.oa-tag { justify-self: start; font: 700 11px var(--f-sans); color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 4px; }
.oa-card.overdue .oa-tag, .oa-card.alert .oa-tag { background: var(--seal); }
.oa-from { font-size: 12px; color: #999; }
.oa-body { font-size: 14px; line-height: 1.7; color: #444; white-space: pre-line; }
.oa-result { padding: 14px 16px; border-radius: 12px; background: #fbf5ec; font: 15px/1.75 var(--f-serif); color: var(--ink); box-shadow: inset 0 0 0 1px #e6d7bf; animation: fadein .4s both; }
.xg-title { font: 600 15px var(--f-sans); padding: 2px 2px 0; }
.xg-wrap { overflow-x: auto; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px #0000001a; }
.xg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.xg-table th, .xg-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #0000000d; white-space: nowrap; }
.xg-table th { font-weight: 600; color: #888; font-size: 12px; background: #fafafa; }
.xg-table tr.hl td { background: #fff7e6; font-weight: 600; }
.xg-note { margin: 0; font-size: 12px; color: #999; text-align: center; }
.tabs { display: flex; gap: 6px; overflow-x: auto; }
.tab { flex: none; padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 13px; box-shadow: 0 1px 2px #0000001a; }
.tab.on { background: var(--accent); color: #fff; }
.tab-pane { padding: 16px; border-radius: 12px; background: #fff; font: 15px/1.8 var(--f-serif); box-shadow: 0 1px 2px #0000001a; min-height: 120px; }
.tab-pane .hl { background: #fff1c9; padding: 0 2px; }
.dorm .dark {
  position: absolute; inset: 0; z-index: 3; touch-action: none;
  background: radial-gradient(circle at var(--x) var(--y), transparent 0, transparent 70px, rgba(8,7,10,.55) 95px, rgba(8,7,10,.96) 150px);
}
.dorm .label { z-index: 4; }
.dark-tip { position: absolute; z-index: 4; left: 50%; bottom: 30%; transform: translateX(-50%); color: #f5efe4cc; font: 13px var(--f-sans); letter-spacing: .2em; transition: opacity .6s; pointer-events: none; }
.dorm .back-btn { z-index: 8; }
.report { align-items: center; }
.report-paper {
  position: relative; width: 100%; padding: 22px 20px 26px; border-radius: 4px; background: #fbf7ef;
  box-shadow: 0 1px 0 #0000000d, 0 12px 30px #0000001f; font-family: var(--f-sans); transform: rotate(-.6deg);
}
.rp-head { display: grid; gap: 4px; text-align: center; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.rp-head b { font: 700 20px var(--f-serif); letter-spacing: .1em; }
.rp-head span { font-size: 12px; color: var(--ink-3); }
.report-paper h4 { margin: 16px 0 6px; font: 600 12px var(--f-sans); letter-spacing: .2em; color: var(--ink-2); }
.report-paper ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.report-paper p { text-align: left; margin: 0; font-size: 13px; }
.report-paper .stat-row b { white-space: nowrap; }
.up { color: var(--good); font-size: 11px; } .down { color: var(--seal); font-size: 11px; } .flat { color: var(--ink-3); font-size: 11px; }
.rp-rel { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.rp-comment { margin-top: 16px; padding: 10px 12px; background: var(--paper-2); border-radius: 4px; font: 15px/1.7 var(--f-title); font-size: 20px; }
.rp-comment small { display: block; font: 11px var(--f-sans); color: var(--ink-3); letter-spacing: .2em; }
.rp-seal { position: absolute; right: 18px; bottom: 18px; padding: 6px 8px; border-radius: 50%; width: 64px; height: 64px; display: grid; place-items: center; color: var(--seal); box-shadow: inset 0 0 0 2px var(--seal); font: 700 12px var(--f-serif); transform: rotate(-12deg); opacity: .85; }

/* ---------- 账号 ---------- */
.acc-bar { display: flex; justify-content: space-between; align-items: center; font: 12px var(--f-sans); color: var(--ink-2); }
.acc-bar b { color: var(--ink); }
.acc-swap { font: 13px var(--f-sans); color: var(--accent); padding: 6px 0; }
.acc-msg { padding: 8px 12px; border-radius: 6px; background: var(--paper-2); font: 13px/1.6 var(--f-sans); color: var(--ink-2); }
.acc-form { display: grid; gap: 10px; }
.acc-input { font: 16px var(--f-sans); padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.acc-input:focus { border-color: var(--accent); outline: none; }
.acc-err { min-height: 1em; font: 13px var(--f-sans); color: var(--seal); }
.acc-note { margin: 4px 0 0; font: 12px/1.6 var(--f-sans); color: var(--ink-3); }
.acc-confirm { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 13px var(--f-sans); color: var(--seal); }

/* ---------- 第二学期：危机谈话 ---------- */
.crisis { background: #0d0f16; }
.crisis .bg { position: absolute; inset: 0; }
.crisis .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#0d0f16cc, #0d0f1622 30%, #0d0f1655 55%, #0d0f16e6 100%); }
.cr-meter { position: absolute; z-index: 3; left: 18px; right: 18px; top: calc(18px + var(--safe-t)); color: #f5efe4; font-family: var(--f-sans); }
.cr-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .2em; opacity: .85; margin-bottom: 8px; }
.cr-top b { font: 700 22px var(--f-sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cr-bar { position: relative; height: 8px; border-radius: 4px; background: #f5efe42e; }
.cr-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #9fb7d9; transition: width .8s ease, background .4s; }
.cr-meter.ok .cr-bar i { background: #f1c27d; }
.cr-goal { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #f5efe4aa; }
.cr-pop { position: absolute; right: 0; top: 46px; font: 700 18px var(--f-sans); animation: crpop 1.4s ease both; }
.cr-pop.up { color: #f1c27d; } .cr-pop.down { color: #e88a7f; }
@keyframes crpop { from { opacity: 0; transform: translateY(6px) } 20% { opacity: 1; transform: none } 80% { opacity: 1 } to { opacity: 0; transform: translateY(-10px) } }
.cr-line {
  position: absolute; z-index: 3; left: 18px; right: 18px; top: 30%;
  padding: 14px 16px; border-radius: 6px; background: #f8f3eaf0; color: var(--ink);
  font: 17px/1.75 var(--f-serif); box-shadow: 0 10px 30px #0008; animation: fadein .3s both;
}
.cr-line small { display: block; font: 600 11px var(--f-sans); letter-spacing: .15em; color: var(--ink-3); margin-bottom: 2px; }
.cr-line.me small { color: var(--accent); }
.cr-line.narr { background: #1d1a19cc; color: #f5efe4cc; font-size: 15px; }
.cr-choices {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px calc(22px + var(--safe-b)); animation: fadein .3s both;
}
.cr-choices .choice-btn { font-size: 15px; padding: 12px 14px; }
.cr-timer { height: 3px; border-radius: 2px; background: #f5efe42e; overflow: hidden; margin-bottom: 2px; }
.cr-timer i { display: block; height: 100%; background: #e88a7f; transform-origin: left; animation: crtime linear both; }
@keyframes crtime { from { transform: scaleX(1) } to { transform: scaleX(0) } }

/* ---------- 第二学期：借阅登记本 ---------- */
.reader.ledger { z-index: 6; }
.ledger-paper { touch-action: none; }
.ledger-paper.blank { overflow: hidden; background: repeating-linear-gradient(#f4ead5 0 31px, #c9b99a55 31px 32px) #f4ead5; }
.ledger-paper .rub { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.ledger-table th { font: 600 12px var(--f-sans); color: #6b5e51; border-bottom: 1px solid #3b332c40; padding: 4px; text-align: left; }
.ledger-table td { padding: 8px 4px; border-bottom: 1px solid #3b332c26; font-size: 13px; }
.ledger-table .ink { background: #1d1a19; color: transparent; border-radius: 2px; box-shadow: 0 0 0 2px #1d1a19; user-select: none; }
.reader .rbar .pencil.on { background: #f5efe4; color: var(--ink); }
.reader .rbar button.glow { box-shadow: 0 0 0 2px #ffe3a8, 0 0 18px #ffd88a99; }
.reader .rbar button:disabled { opacity: .35; }

/* ---------- 提示卡、年度考核 ---------- */
.notice { align-items: center; }
.notice-card { padding: 22px 20px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px #0000001a; font: 16px/1.9 var(--f-serif); color: var(--ink); text-align: center; }
.notice-card b { display: block; font: 600 13px var(--f-sans); letter-spacing: .2em; color: var(--ink-3); margin-bottom: 6px; }
.notice-card p { margin: 0; }
.rp-miss { color: var(--seal); }
.rp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rp-table td { padding: 4px 0; }
.rp-table td:first-child { width: 5.5em; color: var(--ink-2); }
.rp-table td:last-child { width: 2.5em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-table .bar { margin: 0 10px; }
.rp-table .avg td { border-top: 1px dashed var(--line); padding-top: 6px; }
.rp-grade { display: inline-block; margin: 12px 0 6px; padding: 4px 14px; border-radius: 4px; font: 700 22px var(--f-serif); letter-spacing: .3em; color: var(--seal); box-shadow: inset 0 0 0 2px var(--seal); transform: rotate(-3deg); }
.rp-grade.g-0 { color: var(--good); box-shadow: inset 0 0 0 2px var(--good); }
.rp-red { color: var(--seal); font-weight: 600; }
.rp-peer { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--line); font: 14px/1.7 var(--f-serif); color: var(--ink-2); }
.rp-peer small { display: block; font: 11px var(--f-sans); color: var(--ink-3); letter-spacing: .2em; }
.rp-table .bar { height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.rp-table .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* ---------- 人物登场卡 ---------- */
.meet { position: absolute; inset: 0; z-index: 28; display: grid; place-items: center; padding: 28px; background: #1d1a19b8; animation: fadein .3s both; }
.meet.out { animation: fadeout .26s both; }
.meet-card {
  position: relative; width: 100%; max-width: 320px; padding: 22px 22px 18px; border-radius: 8px; background: var(--paper);
  text-align: center; box-shadow: 0 20px 50px #000a; animation: choicein .4s ease both;
}
.meet-pic { width: 96px; height: 96px; margin: -62px auto 10px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; color: #fff; font: 700 34px var(--f-serif); box-shadow: 0 0 0 4px var(--paper), 0 8px 20px #0006; }
.meet-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.meet-k { font: 600 11px var(--f-sans); letter-spacing: .4em; color: var(--seal); }
.meet-card h4 { margin: 4px 0 2px; font: 700 26px var(--f-serif); letter-spacing: .12em; }
.meet-role { font: 12px var(--f-sans); color: var(--ink-3); letter-spacing: .1em; }
.meet-card p { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font: 15px/1.8 var(--f-serif); color: var(--ink-2); text-align: left; }
.meet-tap { margin-top: 12px; font: 11px var(--f-sans); color: var(--ink-3); letter-spacing: .3em; }