@font-face { font-family: "LuBrush"; src: url("fonts/LuBrush-fe9c6f6b3552.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "LuSerif"; src: url("fonts/LuSerif-c7535315b9f5.woff2") format("woff2"); font-display: swap; font-weight: 500 900; }
@font-face { font-family: "LuLatin"; src: url("fonts/LuLatin-c286446d74f5.woff2") format("woff2"); font-display: swap; font-weight: 400 900; font-style: italic; }
/* 引擎的底子：舞台（1280×720 起，手机横屏更扁时变宽，最多 1720；缩放 < 0.5 换大号字 #stage.big）、按钮、面板。颜色和字体由书的 theme.css 给（:root 的变量）。 */
/* 打底：页面放到哪里（自己的域名、微信里打开、claude.ai 试玩页外面套的壳）都不吃外面加的规矩，图的大小、盒子、字体、边距只由引擎和书自己的样式定。
   出处：试玩页的壳带 img{max-width:100%}，比外框宽的立绘被横向挤窄（17.1，pitfalls 第 143 条）；壳还给根元素加了 border-box（box-sizing 不往下传，只改根元素就够；下面各元素照旧各自写）和安全区内边距、给 body 定了 14px 字。 */
:root { box-sizing: content-box; padding: 0; scroll-padding: 0; color-scheme: light; }   /* 写 :root 不写 html：外面写的是 :root，html 压不过它 */
img { max-width: none; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; background: #171513; overflow: hidden; font: 400 16px/normal var(--body); color: var(--ink); -webkit-tap-highlight-color: transparent; }
#stage { --fb: 26px; --fl: 22px; --ft: 30px; --bw: 760px; --cw: 478px; position: fixed; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden; overflow: clip; background: #000; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#stage.big { --fb: 32px; --fl: 28px; --ft: 34px; --bw: 1000px; }
button { font: 700 var(--fl) var(--body); border: 0; border-radius: 14px; padding: 10px 22px; min-height: 54px; cursor: pointer; background: var(--mint); color: #fff; box-shadow: 0 5px 0 var(--mintd); }
button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--mintd); }
button:focus-visible { outline: 4px solid var(--gold); outline-offset: 2px; }
button.ghost { background: rgba(255,255,255,.94); color: var(--dim); border: 2px solid var(--line); box-shadow: none; }
button.gold { background: linear-gradient(180deg, #f6c766, #d9942a); box-shadow: 0 5px 0 #9a5f12; color: #46280a; }
button:disabled { opacity: .4; cursor: default; }
.panel { background: var(--paper); border: 3px solid #8fb3a2; border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
/* 按下反馈（core/press.js，拍板总账 F17）：按下立刻缩一下、压暗一点，至少亮 110 毫秒。用 scale 属性、不写 transition，不和元素自己的 transform / 过渡打架 */
.pressed { scale: .94; filter: brightness(.88) saturate(1.1); }
.row.pressed, .je.pickable.pressed, .chr.pressed { scale: .97; }

/* 舞台：背景、立绘、右上工具栏和「第几节 · 哪天 · 几点」、横幅、对话框、新手引导、地点卡和黑场、弹层。 */
/* ═══ 背景：同一机位多张叠着，靠透明度切换；账本翻开时压暗虚化 ═══ */
#bgs { position: absolute; inset: 0; z-index: 0; isolation: isolate; transition: filter .5s ease; }
.bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity var(--fade, 1200ms) ease; }
.bg.on { opacity: 1; }
/* 舞台比 16:9 宽（#stage.wide，scale.js）：cover 会裁掉图的上下，人物的头和脚被切（owner 10-18 宽窗口报的）。改成整张按高放在中间（::after），
   两边用同一张图放大模糊补（::before）；元素自己的底图不画（尺寸 0），图只靠 background-image: inherit 传给两层。主界面的 .tbg 同一套（menu.css） */
#stage.wide .bg:not(.wideimg), #stage.wide #s-title .tbg { background-size: 0 0; background-repeat: no-repeat; }
#stage.wide .bg:not(.wideimg)::before, #stage.wide .bg:not(.wideimg)::after, #stage.wide #s-title .tbg::before, #stage.wide #s-title .tbg::after { content: ""; position: absolute; background-image: inherit; background-repeat: no-repeat; background-position: center; pointer-events: none; }
#stage.wide .bg:not(.wideimg)::before, #stage.wide #s-title .tbg::before { inset: -40px; background-size: cover; filter: blur(22px) brightness(.72); }
#stage.wide .bg:not(.wideimg)::after, #stage.wide #s-title .tbg::after { inset: 0; background-size: auto 100%;
  /* 整张图左右两边各羽化 32px 接进模糊的边，不留一道硬线；底图都是 16:9（test.mjs 查），所以遮罩按 1280×720 放在中间 */
  -webkit-mask: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent) center / 1280px 100% no-repeat;
          mask: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent) center / 1280px 100% no-repeat; }
/* 宽幅底图（class wideimg，assets.js 按图的比例加；2.4:1，中间 1600×900 就是原图）：不用 cover 而是按高铺满、水平居中，
   16:9 的舞台露出中间那块，舞台越宽露出两边越多真画面；舞台最宽 1720（≈2.39:1）也盖得满，所以不需要模糊补边 */
.bg.wideimg { background-size: auto 100%; background-position: center; background-repeat: no-repeat; }
#rain { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 1.6s; }
#rain.on { opacity: 1; }
#stage.bookopen #bgs, #stage.bookopen #rain { filter: blur(4px) brightness(.6) saturate(.85); }

/* ═══ 立绘：半身贴底边；说话的人亮、别人压暗 ═══ */
.char { position: absolute; bottom: 0; height: 627px; z-index: 10; opacity: 0; pointer-events: none; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1), left .6s cubic-bezier(.3,.1,.3,1), filter .3s ease; }
.char img { position: absolute; left: 0; top: 0; height: 100%; opacity: 0; transition: opacity .22s ease; }
.char img.on { opacity: 1; }
.char.off-l { transform: translateX(-260px); } .char.off-r { transform: translateX(260px); }
.char.on { opacity: 1; transform: none; }
.char.dim { filter: brightness(.58) saturate(.8); }
.char.talk img.on { animation: talk .32s ease; }
@keyframes talk { 40% { transform: translateY(-8px); } }
#stage.dusk .char:not(.dim) { filter: brightness(.86) saturate(.85); }
#stage.night .char:not(.dim) { filter: brightness(.8) saturate(.8) hue-rotate(-8deg); }
/* 账本翻开时：说话的人站到左边那一栏，往下挪，脸在对话框和角落格子之间 */
#stage.bookopen .char.side { transform: translateY(var(--sideY, 90px)) scale(var(--sideK, .85)); transform-origin: 50% 0; }   /* --sideK：旧图缩到 0.85；伙伴包写了 stage 的新图不缩（膝上取景，缩了图的下沿会露出来），cast.js 设 */
.char.guide { height: 300px; bottom: 90px; }
#stage.bookopen .char.guide { height: 260px; }
/* ═══ 右上：工具栏 + 地点时间 ═══ */
#top { position: absolute; right: 14px; top: 8px; display: flex; gap: 8px; z-index: 36; align-items: center; }
#top .chip, #top .tb { font: 700 var(--fl) var(--body); background: rgba(255,255,255,.94); border: 2px solid var(--line); border-radius: 999px; padding: 6px 14px; white-space: nowrap; color: var(--ink); min-height: 0; box-shadow: none; }
#top .tb { border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-height: 52px; min-width: 52px; }
#stage.big #top .tb { min-height: max(64px, calc(44px / var(--k, 1))); min-width: max(64px, calc(44px / var(--k, 1))); }   /* 手机横屏：屏幕上至少 44 像素高（手指按得准的下限，ludisce-be 10-18；舞台缩放 0.42 时约 105 舞台像素） */
#stage.big #top .tb { font-size: calc(var(--fl) + 8px); padding: 6px 16px; }
#stage.big #where { top: calc(16px + max(64px, 44px / var(--k, 1))); }   /* 工具栏变高了：写「第几节 · 哪天」的那条跟着往下 */
#stage.big:has(#c-npc.on) #where { opacity: 0; }   /* 手机上它落到来人脸的高度：有人来时先让开（没人时照常写着） */
#top .tb.off { text-decoration: line-through; color: var(--dim); }
/* 方案 C（stage/galui.js）：「≡」收着的那几样；自动 / 快进开着时上面当中一个小标记；第一次进游戏的手势提示；长按隐藏对话框 */
#menuBtn { display: flex; align-items: center; } #menuBtn svg { width: 1.3em; height: 1.3em; display: block; }
#menuBtn.on { background: var(--mint); color: #fff; border-color: var(--mint); }
#cmenu { position: absolute; right: 14px; top: 64px; z-index: 37; display: flex; flex-direction: column; padding: 8px; gap: 4px; min-width: 250px; }
#cmenu[hidden] { display: none; }
#cmenu button { display: flex; align-items: center; gap: 12px; background: none; border: 0; box-shadow: none; border-radius: 12px; padding: 8px 16px; min-height: 52px; font: 700 var(--fl) var(--body); color: var(--deep); text-align: left; }
#cmenu button[hidden] { display: none; }
#cmenu button:hover { background: #f3eadb; }
#cmenu button.on { background: var(--mint); color: #fff; }
#cmenu hr { border: 0; border-top: 2px dashed var(--line); margin: 2px 6px; }
#mode { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 37; display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; background: rgba(30,22,16,.78); color: #fff; font: 700 var(--fl) var(--body); border: 2px solid rgba(255,255,255,.5); cursor: pointer; white-space: nowrap; }
#mode[hidden] { display: none; }
#mode small { font-size: 1em; font-weight: 500; opacity: .75; }
#mode .ic { color: #9fe0cf; letter-spacing: -.1em; animation: mblink 1.2s ease-in-out infinite; }
@keyframes mblink { 50% { opacity: .35; } }
#hint { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 37; padding: 8px 22px; border-radius: 999px; background: rgba(30,22,16,.78); color: #fff; font: 500 var(--fl) var(--body); white-space: nowrap; pointer-events: none; transition: opacity .6s; }
#hint[hidden] { display: none; } #hint.fade { opacity: 0; }
#stage.boxoff #box, #stage.boxoff #next { opacity: 0; pointer-events: none; }
#stage.big #cmenu { top: calc(16px + max(64px, 44px / var(--k, 1))); min-width: 320px; } #stage.big #cmenu button { min-height: 60px; }
#ink.bump { animation: ibump .5s; }
@keyframes ibump { 30% { transform: scale(1.25); background: #fde3dc; } }
#where { position: absolute; right: 14px; top: 80px; z-index: 36; font: 500 var(--fl) var(--body); padding: 4px 16px; border-radius: 14px; background: rgba(255,251,244,.9); color: var(--ink); opacity: 0; transition: opacity .4s; white-space: nowrap; pointer-events: none; }
#where.on { opacity: 1; }
#stage.bookopen #where { opacity: 0; }
.ff { position: absolute; z-index: 42; left: 50%; top: 42%; transform: translate(-50%, -50%); font: 800 52px var(--body); color: #fff; letter-spacing: .1em; text-shadow: 0 4px 0 var(--deep), 0 0 30px rgba(0,0,0,.4); pointer-events: none; animation: ffin 1.8s forwards; white-space: nowrap; }
@keyframes ffin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 20%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; } }
/* ═══ 对话框 ═══ */
#box { position: absolute; left: 53px; right: 53px; bottom: 20px; min-height: 168px; box-sizing: border-box; padding: 34px 50px 28px 40px; z-index: 24; transition: opacity .3s, transform .3s; cursor: pointer; }
#box.hide { opacity: 0; transform: translateY(20px); pointer-events: none; }
#name { position: absolute; left: 30px; top: -26px; height: 46px; padding: 0 26px; border-radius: 16px; background: var(--accent); color: #fff; font: 700 calc(var(--fl) + 4px)/46px var(--body); letter-spacing: .08em; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
#box.narr #name { display: none; }
#text { font-size: var(--ft); line-height: 1.55; letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
#box.narr #text { color: #5d5048; }
#text b { color: var(--accentd); font-weight: 800; }   /* 台词里的重点（结论、关键的数）用 <b>：一句最多一两处 */ #text em { color: var(--berry); font-style: normal; font-weight: 700; }
#next { position: absolute; right: 26px; bottom: 16px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 16px solid var(--accent); opacity: 0; }
#next.on { opacity: 1; animation: nudge .9s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }
#box.guide { cursor: default; } #box.guide #next { display: none; }
#stage.bookopen #box { left: 14px; right: auto; width: var(--cw); bottom: 10px; padding: 30px 22px 22px 24px; min-height: calc(var(--fb) * 1.45 * 4 + 52px); }
#stage.bookopen #text { font-size: var(--fb); line-height: 1.45; }
#box:active:not(.guide) { transform: scale(.99); }
/* 新手引导 */
#gRing { position: absolute; z-index: 55; display: none; box-sizing: border-box; pointer-events: none; border: 4px solid var(--gold); border-radius: 16px; box-shadow: 0 0 0 5px rgba(226,167,46,.3), 0 0 26px rgba(226,167,46,.7); animation: gring 1s infinite; }
@keyframes gring { 50% { box-shadow: 0 0 0 10px rgba(226,167,46,.12), 0 0 26px rgba(226,167,46,.4); } }
#gHand { position: absolute; z-index: 56; display: none; pointer-events: none; font-size: 56px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); animation: gpoke .8s infinite; }
@keyframes gpoke { 50% { transform: translate(var(--dx, 0), var(--dy, 0)); } }

/* 地点卡、黑场 */
#loc { position: absolute; left: 0; right: 0; top: 270px; height: 100px; display: flex; align-items: center; justify-content: center; font: 700 44px var(--body); color: #fff; letter-spacing: .2em; text-shadow: 0 2px 12px rgba(0,0,0,.55); background: linear-gradient(90deg, transparent, rgba(20,16,14,.5) 25%, rgba(20,16,14,.5) 75%, transparent); opacity: 0; transition: opacity .6s; z-index: 40; pointer-events: none; white-space: nowrap; }
#loc.on { opacity: 1; }
#black { position: absolute; inset: 0; background: #000; opacity: 1; transition: opacity var(--bf, 900ms) ease; z-index: 35; pointer-events: none; }
#black.clear { opacity: 0; }
/* 弹层：本周要答、复测提醒 */
#modal { position: absolute; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgba(30,22,16,.45); }
#modal.on { display: flex; }
/* 弹窗题开着时（pitfalls 154，stage/dialog.js 的 quizUp）：工具栏、「≡」菜单、价目牌浮在弹窗底上面能点；弹窗内容往下让到工具栏底下（--topH，手机上按钮变高也跟着）。
   不闭卷时翻开账本、正式报表、记录、日历，题先收到底下（.under 只是不显示，答到哪一步都留着），关上再露出来 */
#stage.quizup #top, #stage.quizup #cmenu, #stage.quizup #pbCard { z-index: 88; }
#stage.quizup #modal { padding-top: calc(var(--topH, 20px) - 12px); box-sizing: border-box; }
#modal.on.under { display: none; }
#modal .mb { width: min(860px, calc(100% - 40px)); max-height: calc(100% - 40px); overflow-y: auto; padding: 22px 28px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; font-size: var(--fb); line-height: 1.45; }
#modal .mb > * { flex-shrink: 0; }
#modal h3 { margin: 0; font: 800 calc(var(--fb) + 6px) var(--body); color: var(--deep); }
#modal .qq { display: flex; gap: 12px; align-items: flex-start; background: #fff7e3; border: 2px solid #f0d9a2; border-radius: 14px; padding: 8px 14px; }
#modal .qq b { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--warm); color: #fff; font: 700 22px var(--body); }
#modal .note { color: var(--dim); }
#modal .qs { display: flex; flex-direction: column; gap: 10px; }
#stage.big #modal .mb { width: min(1400px, calc(100% - 40px)); padding: 16px 24px; gap: 10px; }
#stage.big #modal .qs { display: grid; grid-template-columns: 1fr 1fr; }
#stage.big #modal .note { display: none; }
#modal .row2 { display: flex; justify-content: center; gap: 16px; }
#modal .row2 button { font-size: var(--fb); padding: 10px 36px; }
/* 先盖住、答完翻开（core/cover.js，F28 补）：盖着时一块浅底的「？」，宽度大致和数一样，表不跳；答对那一刻翻开（绕横轴转下来、淡入），底色褪掉 */
.cov { display: inline-block; min-width: 3.2em; padding: 0 .3em; border-radius: 6px; background: #e8dfcf; color: #8a7a68; text-align: center; font-weight: 800; box-sizing: border-box; }
.cov.open { background: transparent; color: inherit; font-weight: inherit; min-width: 0; padding: 0; animation: covFlip .55s cubic-bezier(.2,.8,.3,1.2); }
@keyframes covFlip { 0% { transform: perspective(300px) rotateX(90deg); opacity: 0; background: #ffe39a; } 60% { opacity: 1; background: #ffe39a; } 100% { transform: none; background: transparent; } }

/* 玩法：记账。左上角的格子、东西飞进飞出、前后对比卡、「动手」按钮、账本（流水本、秤、右页的行、加减框）、金额牌和盖章。 */
/* ═══ 左上：场上有的实物（格子，world.ledger.slots），记账时就点这里 ═══ */
#hud { position: absolute; left: 14px; top: 8px; display: flex; gap: 10px; z-index: 36; align-items: flex-start; }
.slot { position: relative; display: none; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; min-height: 64px; box-sizing: border-box; border-radius: 18px; background: rgba(255,251,244,.94); border: 3px solid rgba(143,179,162,.9); box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .35s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.slot.on { display: flex; opacity: 1; transform: none; pointer-events: auto; animation: slotin .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes slotin { from { opacity: 0; transform: scale(.5); } }
.slot > img { height: 50px; width: 50px; object-fit: contain; flex: none; }
.slot .lb { font: 500 var(--fl)/1.1 var(--body); color: var(--dim); white-space: nowrap; }
.slot .nm { font: 800 calc(var(--fl) + 6px)/1.15 var(--body); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.slot.bump > img { animation: sbump .22s ease; }
@keyframes sbump { 50% { transform: scale(1.22) rotate(-6deg); } }
.items { display: grid; grid-template-columns: auto auto; gap: 0 10px; margin-left: 4px; }
.items span { display: flex; align-items: center; gap: 2px; font: 700 var(--fl)/1.2 var(--body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.items img { height: calc(var(--fl) + 4px); width: calc(var(--fl) + 4px); object-fit: contain; }
/* 两行的格子（比如借款 + 应付账款）：第二行那样东西出现以前照旧，出现以后两条各占一行 */
.slot .liab.hid, .slot.two .liab.hid { display: none; }
.slot.two .liab { display: flex; align-items: baseline; gap: 8px; }
.slot.two .liab .lb { font-size: var(--fl); color: var(--dim); }
.slot.two .liab .nm { font-size: calc(var(--fl) + 2px); line-height: 1.2; }
.slot.two .nk { display: none; }
/* 左上格子和右上工具栏挤到一起时：先把工具栏的字收起来只留图标，还挤就收起格子名后面的游戏叫法，再挤（第 4 节起五个格子、电脑上）把格子排紧一点（fitTop 量了再定） */
#stage.tbi #top .tb:not(.keep) .tt { display: none; }
#stage.tbk #top .tb.keep .tt { display: none; }   /* 最后一档才收账本、正式报表的字 */
#stage.hudt .slot .nk { display: none; }
#stage.hudc #hud { gap: 5px; }
#stage.hudc .slot { padding: 3px 7px 3px 3px; gap: 4px; }
#stage.hudc .slot > img { width: 40px; height: 40px; }
#stage.hudc .slot .lb { font-size: calc(var(--fl) - 3px); }
#stage.hudc .slot .nm { font-size: calc(var(--fl) + 2px); }
#stage.hudc .slot .pg { font-size: calc(var(--fl) - 3px); }
#stage.hudc .items { gap: 0 6px; margin-left: 0; }
#stage.hudc .items span { font-size: calc(var(--fl) - 3px); }
#stage.hudc .items img { width: calc(var(--fl) + 1px); height: calc(var(--fl) + 1px); }
#stage.hudc .slot.two .liab { gap: 6px; }
#stage.hudc .slot.two .liab .lb { font-size: calc(var(--fl) - 3px); }
#stage.hudc .slot.two .liab .nm { font-size: calc(var(--fl) - 1px); }
/* 手机横屏（big）字本来就压到下限附近：排紧时只收间距和图标，字不缩 */
#stage.big.hudc .slot .lb, #stage.big.hudc .slot .pg, #stage.big.hudc .items span, #stage.big.hudc .slot.two .liab .lb { font-size: var(--fl); }
#stage.big.hudc .slot .nm { font-size: calc(var(--fl) + 6px); }
#stage.big.hudc .slot.two .liab .nm { font-size: calc(var(--fl) + 2px); }
/* 第 5 节起格子多了：hudz 数是 0 的格子只剩图标和数；hudl 所有格子的名字都收起来 */
#stage.hudz .slot.zero .lb, #stage.hudl .slot:not(.two) .lb { display: none; }
#stage.hudz .slot.zero.two .l1, #stage.hudz .slot.zero.two .l2 { gap: 0; }
#stage.hudi .items, #stage.hudi .slot .pg { display: none; }
#stage.hudn #hud { gap: 3px; } #stage.hudn .slot { padding: 2px 6px 2px 2px; gap: 3px; } #stage.hudn .slot > img { width: 34px; height: 34px; }
#stage.hudn .slot .nm { font-size: var(--fl); } #stage.hudn .slot.two .liab .nm { font-size: calc(var(--fl) - 3px); } #stage.hudn .slot .wear { min-width: 70px; }
/* 按份算的格子：数后面小字写还剩几份（world.ledger.slots 的 count） */
.slot .nmr { display: flex; align-items: baseline; gap: 6px; }
.slot .pg { font: 700 var(--fl)/1.1 var(--body); color: var(--dim); white-space: nowrap; }
.slot.can { outline: 4px dashed rgba(226,167,46,.95); outline-offset: 3px; cursor: pointer; }
.slot.hl { outline: 5px solid var(--gold); outline-offset: 4px; }
.ptag { position: absolute; left: 6px; top: calc(100% + 6px); display: flex; gap: 4px; z-index: 2; }
.ptag span, .row .pend span { font: 700 var(--fl) var(--body); border-radius: 8px; padding: 0 10px; color: #fff; cursor: pointer; animation: pop .25s; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptag span.p, .row .pend span.p { background: var(--good); } .ptag span.m, .row .pend span.m { background: var(--berry); }
@keyframes pop { from { transform: scale(.3); } }
.delta { position: absolute; z-index: 41; font: 800 calc(var(--fl) + 8px) var(--body); pointer-events: none; text-shadow: 0 2px 0 #fff, 0 0 10px rgba(255,255,255,.9); white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--good); } .delta.down { color: var(--berry); }
/* ═══ 物件：弹出、飞向角落 ═══ */
.drop { position: absolute; left: 0; top: 0; width: 76px; height: 76px; margin: -38px 0 0 -38px; pointer-events: none; z-index: 40; filter: drop-shadow(0 0 10px rgba(255,236,160,.95)) drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.drop img { width: 100%; height: 100%; object-fit: contain; }
.gain { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; font: 900 calc(var(--fb) + 8px) var(--body); color: #fff; letter-spacing: .03em; pointer-events: none; z-index: 41; text-shadow: 0 0 2px #7a4a12, 0 0 2px #7a4a12, 0 3px 0 #7a4a12, 0 0 16px rgba(255,200,80,.9); }
.gain.out { text-shadow: 0 0 2px #6a2a1e, 0 0 2px #6a2a1e, 0 3px 0 #6a2a1e, 0 0 16px rgba(255,120,90,.8); }
#phone { position: absolute; z-index: 16; width: 120px; height: 120px; left: 0; top: 150px; display: none; pointer-events: none; filter: drop-shadow(0 0 14px rgba(255,236,160,.95)); }
#phone.on { display: block; animation: buzz .5s 3; }
@keyframes buzz { 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
#phone img { width: 100%; height: 100%; object-fit: contain; }

/* 停在结果：前后对比卡 */
/* 账本按钮旁那一小堆（18.1，event.js 的 pile）：这件事动到的东西的图标，发光、不带字；账本翻开时落进托盘（.tray，--tx / --ty 是到托盘的位移） */
#pile { position: absolute; z-index: 37; transform: translate(-50%, -50%); display: none; gap: 2px; padding: 4px; border-radius: 50%; cursor: pointer; filter: drop-shadow(0 0 10px rgba(255,226,140,.95)) drop-shadow(0 0 4px rgba(255,200,80,.9)); }
#pile.on { display: flex; animation: pglow 1.4s ease-in-out infinite; }
#pile img { width: 44px; height: 44px; object-fit: contain; } #pile img + img { margin-left: -18px; }
#stage.big #pile img { width: 60px; height: 60px; }
#pile.bump { animation: pbump .25s ease; }
#pile.tray { animation: none; transition: transform .45s ease-in, opacity .45s ease-in; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(.7); opacity: .2; }
#stage.viewing #pile { visibility: hidden; }
@keyframes pglow { 50% { filter: drop-shadow(0 0 16px rgba(255,226,140,1)) drop-shadow(0 0 6px rgba(255,200,80,1)); } }
@keyframes pbump { 50% { transform: translate(-50%, -50%) scale(1.18); } }
#res { position: absolute; z-index: 15; left: calc(50% + 40px); top: 124px; transform: translateX(-50%); padding: 10px 22px; display: none; flex-direction: column; gap: 4px; font: 700 var(--fb)/1.35 var(--body); background: #fff; border: 3px solid var(--gold); border-radius: 16px; box-shadow: 0 8px 20px rgba(60,40,20,.3); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
#res.low { top: 352px; }   /* 立绘的脸在框的上面四成里（自测按这个量）：放在它下面、对话框上面 */
#stage.big #res:not(.low) { top: calc(80px + max(64px, 44px / var(--k, 1))); }   /* 手机上工具栏和「第几节 · 哪天」那条变高了：上面那档跟着往下 */
#res.on { display: flex; animation: resin .4s cubic-bezier(.2,1.5,.4,1); }
@keyframes resin { from { transform: translateX(-50%) scale(.4); opacity: 0; } }
#res em { font-style: normal; color: var(--good); } #res em.m { color: var(--berry); }
#res .h { font-size: var(--fl); color: var(--warm); }
#sold { position: absolute; z-index: 15; left: 50%; top: 124px; transform: translateX(-50%); font: 700 calc(var(--fb) + 4px) var(--body); background: rgba(255,250,240,.96); border: 3px solid var(--warm); border-radius: 14px; padding: 4px 20px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
#stage.big #sold { top: calc(116px + max(64px, 44px / var(--k, 1))); }   /* 手机上工具栏变高、账本按钮下那一堆（18.1）也跟着往下：「已卖几杯」那条放在它们下面 */
#actBtn { position: absolute; z-index: 18; left: 50%; top: 560px; transform: translateX(-50%); font: 700 calc(var(--fb) + 4px) var(--body); padding: 12px 34px; min-height: 70px; border-radius: 999px; animation: actp 1.1s infinite; white-space: nowrap; }
@keyframes actp { 50% { box-shadow: 0 5px 0 #9a5f12, 0 0 0 12px rgba(226,167,46,.28); } }
/* ═══ 账本（界面层，右边翻开） ═══ */
/* 账本按钮在右上工具栏里（pitfalls 152）：比别的按钮显眼一点（金边），第一次出现闪两下；伙伴叫你翻开时一直闪（pulse） */
#top #bookBtn { border-color: var(--gold); }
#bookBtn:not(.on) { display: none; }
#bookBtn img { height: 32px; width: 32px; object-fit: contain; }
#stage.big #bookBtn img { height: 64px; width: 64px; }
#bookBtn.pulse { animation: bpulse 1s infinite; } #bookBtn.flash { animation: bpulse 1s 2; }
@keyframes bpulse { 50% { box-shadow: 0 0 0 8px rgba(226,167,46,.55), 0 4px 14px rgba(0,0,0,.18); } }
/* 账本随时翻开只看（F26）：开着时这件事里的来人、向导、结果卡、「动手」、指引的圈都先藏起来，合上原样回来；手机上按钮放大（屏幕上约 44px 高） */
#stage.viewing #c-npc, #stage.viewing .char.guide, #stage.viewing #res, #stage.viewing #actBtn, #stage.viewing #gRing, #stage.viewing #gHand, #stage.viewing #sold { visibility: hidden; }
#bookPeek { min-height: 40px; padding: 0 14px; font-size: var(--fl); }
/* 打不开时的一句提示（合上账本答题时）：按钮下面，2.6 秒后淡出 */
#bTip { position: absolute; z-index: 95; max-width: 420px; padding: 10px 16px; border-radius: 14px; background: rgba(46,34,24,.94); color: #fff; font: 600 var(--fl)/1.4 var(--body); pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }   /* 弹窗题、认表开着时点工具栏打不开，这句也要盖在它们上面（pitfalls 154） */
#bTip.on { opacity: 1; transform: none; }
#book { position: absolute; right: 14px; top: 88px; width: var(--bw); height: 622px; z-index: 22; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; border-radius: 12px 18px 18px 12px; background: #8a5634; padding: 10px; box-sizing: border-box; box-shadow: 0 16px 40px rgba(20,10,5,.5); transform: translateY(780px) rotate(4deg); transition: transform .55s cubic-bezier(.3,1.2,.4,1); }
#book.open { transform: none; }
.page { background: var(--page); min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#pgL { border-radius: 8px 0 0 8px; box-shadow: inset -14px 0 18px -14px rgba(90,60,30,.45); }
#pgR { border-radius: 0 8px 8px 0; box-shadow: inset 14px 0 18px -14px rgba(90,60,30,.45); position: relative; }
.ph { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 2px; font: 800 calc(var(--fb) + 2px) var(--body); color: var(--deep); flex: none; }
.ph button { min-height: 0; padding: 4px 12px; font-size: var(--fl); }
#jr { flex: 1; overflow-y: auto; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.wk { align-self: center; font: 700 var(--fl) var(--body); color: var(--warm); margin-top: 4px; }
#jr .wkg { display: flex; flex-direction: column; gap: 6px; }
#jr .wk { position: sticky; top: 0; z-index: 1; align-self: stretch; text-align: center; background: var(--page); padding: 2px 0; margin-top: 0; }   /* 往上滚时周标题粘在顶上，不被切掉半截（10-17 主控核） */
.je { flex: none; background: #fff; border-radius: 8px; padding: 6px 10px; border: 3px solid transparent; box-shadow: 0 2px 6px rgba(90,60,35,.12); }
.je .d { font: 700 var(--fl) var(--body); color: var(--warm); display: flex; align-items: center; gap: 6px; }
.je .d img { height: 30px; width: 30px; object-fit: contain; } .je .d .amt { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.je .t { font: 500 var(--fb)/1.38 var(--body); }
.je .pt { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.je .pt span { font: 700 var(--fl) var(--body); background: #f1e9db; border-radius: 8px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.je.now { border-color: var(--gold); }
.je.pickable { cursor: pointer; } .je.on { border-color: var(--mint); background: #e8f5f1; } .je.hint { box-shadow: 0 0 0 4px rgba(226,167,46,.6); } .je.dim { opacity: .45; }
#claims { flex: 1; display: flex; flex-direction: column; padding: 0 10px 8px; gap: 6px; min-height: 0; }
/* 秤的画框按最大倾角留够（横梁最多转 8°、过渡冲过头约 10°，托盘四角转过去最远到 y≈80、x≈-4…234；10-17 owner 截图：托盘被裁掉）。
   viewBox 在 page.html：-8 -4 246 86，这里的宽高和它一样比例 */
#scaleBox { position: relative; height: 86px; margin: 0 auto 0; width: 246px; flex: none; }
#scale { width: 246px; height: 86px; display: block; overflow: visible; }
#scale .beam { transition: transform .6s cubic-bezier(.3,1.5,.5,1); transform-origin: 115px 20px; }
#scale text { font: 700 18px var(--body); }
#scale circle { transition: fill .3s; } #scaleBox.even #scale circle { fill: #3fae6a; }
#scaleBox.bump #scale { animation: scBump .35s ease-out; } @keyframes scBump { 40% { transform: translateY(-3px) scale(1.03); } }
.sclbl { display: flex; justify-content: space-between; font: 700 var(--fl) var(--body); color: var(--dim); padding: 0 4px; flex: none; }
.sclbl b { color: var(--left); } .sclbl i { font-style: normal; color: var(--right); }
.rows { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; scroll-snap-type: y mandatory; } .rows > * { scroll-snap-align: start; }   /* 滚停在整行上，顶上不露半截（底下垫的空见 book.js rowsPad） */
.row { position: relative; flex: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 1px 10px; border-radius: 12px; background: #fff; border: 3px solid transparent; border-left: 8px solid var(--right); cursor: pointer; box-sizing: border-box; }
.row .nm { font: 700 var(--fb)/1.15 var(--body); flex: 1; min-width: 0; }
.row .nm small { font: 500 calc(var(--fl) - 2px) var(--body); color: var(--dim); margin-left: 8px; }
.row .rv { text-align: right; } .row .val { font: 700 var(--fb) var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .pend { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.row.can { border-top-color: #f0cf86; border-right-color: #f0cf86; border-bottom-color: #f0cf86; background: #fffaea; }
.row.hl { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(226,167,46,.35); }
.grp-h { font: 700 var(--fl)/1.25 var(--body); color: var(--right); padding: 2px 4px 0; flex: none; } .grp-h .eqr { display: inline-block; }
.row.sub { border-left-color: #b9a6e6; min-height: 46px; }
#claims.dense > .ph { display: none; } .row .nm small { display: inline-block; white-space: nowrap; }
.rows.more, #rc.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), rgba(0,0,0,.25)); mask-image: linear-gradient(#000 calc(100% - 40px), rgba(0,0,0,.25)); }
.rows.dense { gap: 3px; } .rows.dense .row, .rows.dense .row.sub { min-height: 42px; }
.ask { position: absolute; z-index: 45; display: flex; gap: 8px; padding: 8px; background: #fff; border-radius: 16px; box-shadow: 0 8px 20px rgba(60,40,20,.3); animation: pop .2s; }
.ask button { min-height: 54px; padding: 0 16px; font-size: var(--fb); box-shadow: none; white-space: nowrap; }
.ask .p { background: var(--good); } .ask .m { background: var(--berry); } .ask .x { background: #ece6dc; color: var(--dim); }
.row .ask { inset: -3px; padding: 3px; gap: 4px; border-radius: 12px; animation: none; } .row .ask button { flex: 2; min-height: 0; height: 100%; padding: 0 4px; font-size: var(--fl); } .row .ask .x { flex: .8; }
#tray { grid-column: 1 / 3; display: flex; align-items: center; gap: 10px; padding: 10px 6px 2px; min-height: 84px; box-sizing: border-box; }
#tray .lbl2 { font: 700 var(--fl)/1.15 var(--body); color: #f5e3c8; width: 2.3em; }
#chips { flex: 1; display: flex; gap: 8px; align-items: center; min-width: 0; }
.mchip { min-width: 92px; height: 66px; padding: 0 10px; flex: none; box-sizing: border-box; border-radius: 14px; display: flex; align-items: center; justify-content: center; font: 700 var(--fb) var(--body); color: #5a3510; cursor: pointer; background: linear-gradient(180deg, #fff6dc, #f3d79a); border: 3px dashed #c9964a; box-shadow: 0 5px 0 #b07a32; transition: transform .15s; animation: pop .3s; font-variant-numeric: tabular-nums; }
.mchip.sel { transform: translateY(-8px) scale(1.05); box-shadow: 0 12px 16px rgba(150,95,30,.45); outline: 4px solid var(--mint); }
.mchip.used { visibility: hidden; }
/* 一叠钞票（entry.js 的 chipHTML，书给了 --bill 才用）：钞票面按九宫格画（border-image）——左边 230、右边 45、上下 18（原图像素，480×234 那张）不拉伸，
   中间空白处拉长，所以数字多了牌子变宽、左边图案不变形也不被压；底下几张往右下错开 4px、5px，稍暗；选中抬起来加绿框 */
.mchip.bill { position: relative; display: block; width: auto; min-width: 0; height: auto; padding: calc((var(--n) - 1) * 5px) calc((var(--n) - 1) * 4px) 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: #3b2a1a; }
.mchip.bill .top, .mchip.bill i { box-sizing: border-box; height: 64px; border-style: solid; border-width: 5px 12px 5px 63px; border-image: var(--bill) 18 45 18 230 fill / 5px 12px 5px 63px stretch; }
.mchip.bill i { position: absolute; left: calc(var(--k) * 4px); top: calc((var(--n) - 1 - var(--k)) * 5px); right: calc((var(--n) - 1 - var(--k)) * 4px); filter: brightness(.93) drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.mchip.bill .top { position: relative; display: flex; align-items: center; justify-content: flex-end; min-width: 132px; padding: 0 4px 0 10px; filter: drop-shadow(0 4px 0 rgba(60,45,30,.28)); }
.mchip.bill b { font: 800 var(--fb)/1 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; color: #3b2a1a; text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 2px #fff; }
.mchip.bill.sel { transform: translateY(-10px); box-shadow: none; outline: 0; }
.mchip.bill.sel .top { outline: 4px solid var(--mint); outline-offset: 2px; }
#stampBtn { width: 130px; height: 74px; font: 800 30px var(--body); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ef7b68, #c4503f 60%, #8c3126); box-shadow: 0 6px 0 #6b231b; flex: none; }
#undoBtn { min-height: 54px; font-size: var(--fl); padding: 4px 12px; flex: none; }
#tray.off { display: none; }
#stamp { position: absolute; z-index: 54; display: none; font: 800 40px var(--body); color: var(--good); border: 6px solid var(--good); border-radius: 14px; padding: 4px 18px; transform: rotate(-12deg) scale(2.4); opacity: 0; pointer-events: none; background: rgba(255,255,255,.85); white-space: nowrap; }
#stamp.bad { color: var(--berry); border-color: var(--berry); }
#stamp.go { display: block; animation: stampin .32s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes stampin { to { transform: rotate(-12deg) scale(1); opacity: .95; } }
.float { position: absolute; z-index: 52; pointer-events: none; font: 800 34px var(--body); text-shadow: 0 2px 0 #fff, 0 0 10px #fff; animation: up 1.2s ease-out forwards; font-variant-numeric: tabular-nums; white-space: nowrap; }
.float.p { color: var(--good); } .float.m { color: var(--berry); }
@keyframes up { 0% { transform: translateY(10px) scale(.6); opacity: 0; } 20% { transform: translateY(0) scale(1.1); opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
/* 伙伴代记、抽查（audit.js）：结果卡下面一行小字；抽查时账本底下一条：提示 + 「都对」 */
#res .byp { margin-top: 4px; font: 600 var(--fl) var(--body); color: var(--accentd); } #stage.big #res .byp { font-size: var(--fb); }   /* 手机上小字号不到 12px（真实速度自测才看得到这张卡） */
#audBar { grid-column: 1 / 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 2px; min-height: 84px; box-sizing: border-box; }
#audBar[hidden] { display: none; }
#audTip { font: 600 var(--fl)/1.3 var(--body); color: #f5e3c8; } #stage.big #audTip { font-size: var(--fb); }
#audBar button { min-height: 60px; padding: 0 30px; flex: none; }
/* 设备格的磨损条（hud.js wearTo）：绿的是还剩的格数；旁边小字原值和用掉几格 */
.slot .wear { height: 7px; margin-top: 3px; border-radius: 4px; background: #e4d9c6; overflow: hidden; min-width: 90px; }
.slot .wear i { display: block; height: 100%; background: var(--mint); border-radius: 4px; transition: width .6s; }
.slot .wc { font: 600 calc(var(--fl) - 6px)/1.2 var(--body); color: var(--dim); white-space: nowrap; margin-top: 2px; }
#stage.hudc .slot .wc, #stage.hudl .slot .wc { display: none; }
/* 第 8 节：左页三家店的表（shops.js） */
#jr .shops { display: flex; flex-direction: column; gap: 6px; }
#jr .shops .note { font: 500 calc(var(--fl) - 2px)/1.35 var(--body); color: var(--dim); }
#jr .shops table { width: 100%; border-collapse: collapse; background: #fff; font: 500 calc(var(--fl) - 2px)/1.3 var(--body); }
#jr .shops th { position: sticky; top: 0; background: #fff7e3; padding: 4px 4px; text-align: right; font-weight: 700; } #jr .shops th:first-child { text-align: left; }
#jr .shops td { padding: 3px 4px; border-bottom: 1px solid #eee; } #jr .shops td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#jr .shops tr.sec td { font-weight: 700; color: var(--warm); padding-top: 8px; } #jr .shops tr.tot td { font-weight: 700; border-top: 1px solid #222; }
#jr .shops td.pickable { cursor: pointer; } #jr .shops td.pickable:hover { background: #fff4d6; } #jr .shops td.pick { background: #dff2ea; } #jr .shops td.bad { background: #f8dcd8; }
#stage.big #jr .shops table, #stage.big #jr .shops .note { font-size: var(--fb); }   /* 手机上 ≥ 13px（清单 13 第 1 条） */
/* 三家的表放不下（10-17 发布前看截图：积云那列被截掉；揭出云朵真账后四列，手机上数挤成一串）：表自己上下左右滚（.tw），
   名称列钉在左边、表头钉在顶上，数不折行；手机上放不下就左右滑。流水本那一栏这时不滚（滚的是表） */
#jr:has(> .shops) { overflow: hidden; } #jr .shops { flex: 1; min-height: 0; } #jr .shops .tw { flex: 1; min-height: 0; overflow: auto; }
#jr .shops td { background: #fff; } #jr .shops tr > :first-child { position: sticky; left: 0; z-index: 1; min-width: 4.5em; max-width: 5em; box-shadow: 1px 0 0 #eee; }
#jr .shops { position: relative; } #jr .shops.more::after { content: ""; position: absolute; right: 0; bottom: 0; height: calc(100% - 4em); width: 22px; background: linear-gradient(to left, rgba(90,60,30,.32), rgba(90,60,30,0)); pointer-events: none; z-index: 4; }
#jr .shops th { z-index: 2; } #jr .shops th:first-child { z-index: 3; }   /* 表头压在钉住的名称列上面（不然往下滚时被盖一半） */
/* 三家（三列数）在电脑、手机上都不用滑就并排看全；揭出云朵的真账多一列时才要左右滑 */
#jr .shops td.n { padding: 3px 4px; font-size: calc(var(--fl) - 4px); letter-spacing: -.02em; } #stage.big #jr .shops td.n { font-size: var(--fb); padding: 3px 2px; } #stage.big #jr .shops tr > :first-child { min-width: 2.6em; max-width: 3em; }   /* 手机：字到 13.5px，名称列窄到三个字一行，第三家差一点就左右滑 */
/* 第二幕：左页标题旁「流水本 / 月报」切换（book.js jrToggle）；月报的表沿用三家的表那一套（.shops），合计几行加粗 */
#pgL .ph .jrv { display: inline-flex; gap: 4px; margin-left: 8px; } #pgL .ph .jrv[hidden] { display: none; }
#pgL .ph .jrv button { min-height: 34px; padding: 0 10px; font-size: calc(var(--fl) - 4px); }
#stage.big #pgL .ph .jrv button { font-size: var(--fl); }
#jr .stores tr.tot td { font-weight: 700; border-top: 1px solid var(--ink); }
/* 价目牌（price.js）：工具栏一项，点开的牌在右上（工具栏底下），不挡左边的搭档；账本翻开、复测时收起来 */
#pbCard { position: absolute; right: 14px; top: 126px; z-index: 35; padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; background: #3c2f26; color: #fbf3e4; border-color: #8a5634; font: 500 var(--fl)/1.4 var(--body); max-width: 560px; cursor: pointer; }
#pbCard[hidden], #stage.bookopen #pbCard, #stage.retest #pbCard { display: none; }
#pbCard .pbh { font: 800 var(--fb) var(--body); color: #f6c766; }
#pbCard .pbn { display: flex; justify-content: space-between; gap: 18px; font-size: var(--fb); } #pbCard b { font-variant-numeric: tabular-nums; }
#pbCard .pbk { color: #e6d6bd; }
#stage.big #pbCard { top: calc(76px + max(64px, 44px / var(--k, 1))); font-size: var(--fb); max-width: 760px; }
#stage.retest #pbBtn { visibility: hidden; }

/* 玩法：合上账本回忆（账本右页换成回忆题）。 */
#rc { display: none; flex: 1; flex-direction: column; gap: 10px; padding: 4px 12px 10px; min-height: 0; overflow-y: auto; }
#pgR.recall #claims { display: none; } #pgR.recall #rc { display: flex; }
#book.recall .je .pt { display: none; }
#rc .q { font: 500 var(--fb)/1.45 var(--body); background: #fff7e3; border: 2px solid #f0d9a2; border-radius: 12px; padding: 8px 12px; }
#rc .note { font: 500 var(--fb)/1.4 var(--body); color: var(--dim); }
#rc .ans { align-self: center; min-width: 160px; text-align: center; font: 700 calc(var(--fb) + 6px) var(--body); border: 3px solid var(--mint); border-radius: 12px; padding: 2px 12px; background: #fff; color: var(--mintd); font-variant-numeric: tabular-nums; }
#rc .pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#rc .pad button { min-height: 50px; padding: 0; font-size: var(--fb); background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 3px 0 #d8c6a6; }
#rc .pad button.ok { grid-column: span 2; background: var(--mint); color: #fff; border-color: var(--mint); box-shadow: 0 3px 0 var(--mintd); }
#rc .prog { font: 700 var(--fl) var(--body); color: var(--warm); }
#rc > * { flex-shrink: 0; }
#rc .mine { max-height: 6.2em; overflow-y: auto; }
/* 说理由的题：自己写几句，再和要点对照（原型不调模型判，不计红墨水） */
#rc textarea { flex: none; box-sizing: border-box; width: 100%; min-height: 5.6em; resize: none; font: 500 var(--fb)/1.4 var(--body); color: var(--ink); background: #fff; border: 3px solid var(--line); border-radius: 12px; padding: 8px 10px; user-select: text; -webkit-user-select: text; }
#rc textarea:focus { outline: none; border-color: var(--mint); }
#rc .mine { font: 500 var(--fb)/1.4 var(--body); background: #fff; border: 2px dashed var(--line); border-radius: 12px; padding: 6px 10px; white-space: pre-wrap; }
#rc .kp { font: 500 var(--fb)/1.4 var(--body); background: #e8f5f1; border-left: 6px solid var(--mint); border-radius: 8px; padding: 6px 10px; color: #1f5f50; }
#rc .kp b, #rc .wc b { display: block; font: 700 var(--fl) var(--body); }
#rc .wc { font: 500 var(--fb)/1.4 var(--body); background: #fbe9e5; border-left: 6px solid var(--berry); border-radius: 8px; padding: 6px 10px; color: #8a3326; }
#rc .ms span { flex: 1; min-width: 0; }
#rc .ms { display: flex; gap: 10px; align-items: flex-start; min-height: 0; padding: 6px 10px; font: 500 var(--fb)/1.35 var(--body); text-align: left; background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: none; border-radius: 12px; }
#rc .ms::before { content: ""; flex: none; width: 1em; height: 1em; margin-top: .15em; border: 3px solid var(--line); border-radius: 6px; background: #fff; }
#rc .ms.on { border-color: var(--mint); background: #e8f5f1; } #rc .ms.on::before { background: var(--mint); border-color: var(--mint); }
/* 三天后复测（retest.js）：同一本账本，左页是别的店的那几笔；场上这本书的格子、红墨水、账本按钮收起（复测不是这一节的进度） */
#stage.retest #hud, #stage.retest #ink, #stage.retest #bookBtn, #stage.retest #stmtBtn, #stage.retest #calBtn { visibility: hidden; }
#rc .kp.no { background: #fbe9e5; border-left-color: var(--berry); color: #8a3326; }
#book.recall #jr .wk { white-space: normal; line-height: 1.4; }
/* 分三筐、拼桥（types.js）：右页一张张卡，往下滚 */
#rc .srt, #rc .brc { display: flex; flex-direction: column; gap: 8px; }
#rc .sc, #rc .bc { background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 6px 10px; display: flex; flex-direction: column; gap: 6px; }
#rc .sc .st { font: 500 var(--fl)/1.3 var(--body); display: flex; flex-wrap: wrap; gap: 0 8px; } #rc .sc .st b { color: var(--warm); } #rc .sc .st span { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
#rc .sb { display: flex; gap: 6px; } #rc .sb button, #rc .yn2 button { flex: 1; min-height: 46px; padding: 0 6px; font-size: var(--fl); background: #fff; color: var(--ink); border: 2px solid var(--line); box-shadow: none; }
#rc .sb button.on, #rc .yn2 button.on { background: var(--mint); color: #fff; border-color: var(--mint); }
#rc .brs { display: flex; flex-wrap: wrap; gap: 6px; } #rc .bst { flex: 1 1 30%; background: #fff7e3; border: 2px solid #f0d9a2; border-radius: 10px; padding: 4px 8px; display: flex; flex-direction: column; font: 500 calc(var(--fl) - 2px)/1.25 var(--body); }
#rc .bst span { font: 700 var(--fb) var(--body); font-variant-numeric: tabular-nums; } #rc .bst.stop { background: #e8f5ef; border-color: var(--mint); }
#rc .bc .bt { font: 600 var(--fl)/1.3 var(--body); } #rc .bq { display: flex; align-items: center; gap: 8px; font: 500 calc(var(--fl) - 2px) var(--body); } #rc .bq > span:first-child { flex: 1; }
#rc .yn2 { display: flex; gap: 6px; flex: 0 0 auto; min-width: 46%; } #rc .bs { font: 700 var(--fl) var(--body); color: var(--accentd); min-height: 1.2em; }
#rc .bc.bad { border-color: var(--berry); animation: shake .4s; }
/* 拼好以后的阶梯图（types.js bridgeChart）：一行一级，标签 | 柱子 | 数；竖的虚线是 0 */
#rc .wf { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
#rc .wr { display: grid; grid-template-columns: 50% 1fr auto; align-items: center; gap: 8px; padding: 2px 6px; border-radius: 8px; animation: wrIn .35s both; }
@keyframes wrIn { from { opacity: 0; transform: translateX(-10px); } }
#rc .wl { font: 500 calc(var(--fl) - 3px)/1.2 var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#rc .wt { position: relative; height: 18px; background: linear-gradient(90deg, transparent calc(var(--z) - 1px), #cdbb9c calc(var(--z) - 1px), #cdbb9c calc(var(--z) + 1px), transparent calc(var(--z) + 1px)); }
#rc .wt i { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; }
#rc .wr b { min-width: 4.2em; text-align: right; font: 700 calc(var(--fl) - 1px) var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
#rc .wr.up i { background: #5fae8f; } #rc .wr.up b { color: #2f7a62; }
#rc .wr.dn i { background: #d8786a; } #rc .wr.dn b { color: #b2463a; }
#rc .wr.end i { background: #8a5a33; top: 0; bottom: 0; } #rc .wr.end .wl, #rc .wr.end b { font-weight: 800; }
#rc .wr.stop { background: #e8f5ef; } #rc .wr.stop i { background: var(--accentd); }
#rc .wr.big { background: #fff3cf; box-shadow: inset 0 0 0 2px var(--gold); }
#rc .wo { font: 500 calc(var(--fl) - 4px)/1.35 var(--body); color: #8a7a68; margin-top: 6px; }
#stage.big #rc .wl, #stage.big #rc .wr b, #stage.big #rc .wo { font-size: var(--fb); }   /* 手机上 --fl 只有 11.8px（清单 13 第 1 条要 ≥ 13） */
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
#stage.big #rc .sc .st, #stage.big #rc .bc .bt, #stage.big #rc .bq, #stage.big #rc .bst, #stage.big #rc .sb button, #stage.big #rc .yn2 button { font-size: var(--fb); }
/* 几家各填一个数、挑几项（types.js） */
#rc .nfs { display: flex; flex-direction: column; gap: 6px; }
#rc .nf { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 4px 12px; background: #fff; color: var(--ink); border: 2px solid var(--line); box-shadow: none; font: 600 var(--fl) var(--body); }
#rc .nf.on { border-color: var(--mint); background: #e8f5f1; } #rc .nf b { font: 700 var(--fb) var(--body); color: var(--mintd); font-variant-numeric: tabular-nums; }
#rc .evs { display: flex; flex-direction: column; gap: 6px; }
#rc .ev { text-align: left; min-height: 50px; padding: 6px 12px; background: #fff; color: var(--ink); border: 2px solid var(--line); box-shadow: none; font: 600 var(--fl)/1.3 var(--body); }
#rc .ev.on { border-color: var(--mint); background: #e8f5f1; }
#stage.big #rc .nf, #stage.big #rc .ev { font-size: var(--fb); }
/* 几家各填一个数：几格横排一行（名字在上、数在下），省出来的高度给键盘，「就这些」不用往下滚（10-17 发布前看截图） */
#rc .nfs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
#rc .nf { flex-direction: column; justify-content: center; align-items: stretch; gap: 2px; min-height: 0; padding: 4px 6px; text-align: center; }
#rc .nf span { font: 600 calc(var(--fl) - 4px)/1.15 var(--body); } #stage.big #rc .nf span { font-size: var(--fb); }
#rc .nfs + .pad { grid-template-columns: repeat(5, 1fr); } #rc .nfs + .pad button { min-height: 42px; }   /* 题目长（第 8 节第 5 题五行，手机上六行）时「就这些」也放得下：一行 5 个，0–9 两行、⌫ − . 和「就这些」一行 */
/* 手机上这种题还差一行：题目行距、键盘行距和按钮高度、填空格内边距都收一点（字号不动，已经到下限） */
#stage.big #rc:has(.nfs) .q { line-height: 1.25; padding: 4px 10px; } #stage.big #rc .nfs + .pad { gap: 3px; } #stage.big #rc .nfs + .pad button { min-height: 32px; } #stage.big #rc .nf { padding: 2px 4px; gap: 0; } #stage.big #rc .nf span { line-height: 1.1; }
#rc .nfs .nf b { font-size: var(--fl); letter-spacing: -.02em; } #stage.big #rc .nfs .nf b { font-size: var(--fb); }   /* 横排每格窄：「−24,000」放得下 */
/* 手机上算数题的数字键盘一行 5 个、键高 50px（17.1 在发布包里加的两行，10-18 补回源码：第 7 节题目四行时「就是它」原来要往下滚） */
#stage.big #rc .pad { grid-template-columns: repeat(5, 1fr); gap: 5px; }
#stage.big #rc .pad button, #stage.big #rc .nfs + .pad button { min-height: 50px; }
/* 第一次给「资产负债表」名字前摆出来的那页纸（ledger/index.js 的 bsCard）：两栏、底下合计相等 */
#rc .bsc { background: #fff; border: 3px solid var(--gold); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; font: 600 var(--fb)/1.3 var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
#rc .bsc .bh { font: 800 var(--fb) var(--body); color: var(--deep); text-align: center; }
#rc .bsc .bcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#rc .bsc .bt { font: 800 var(--fb)/1.25 var(--body); padding-bottom: 4px; border-bottom: 2px solid var(--line); margin-bottom: 4px; }
#rc .bsc .bl .bt { color: var(--left); } #rc .bsc .br .bt { color: var(--right); }
#rc .bsc .bcols > div > div:not(.bt):not(.bsum), #rc .bsc .bsum > div { display: flex; justify-content: space-between; gap: 8px; }
#rc .bsc .bsum { margin-top: 4px; padding-top: 4px; border-top: 2px solid var(--ink); font-weight: 800; }
/* 说理由题 AI 判卷（10-18）：结论 / 提示句，和输入框下面的小字（今天还能判几次） */
#rc .jres { font: 500 var(--fb)/1.4 var(--body); background: #fff6df; border-left: 6px solid #e8b64a; border-radius: 8px; padding: 6px 10px; color: #6b4b12; }
#rc .jres.fail { background: #fbe9e5; border-left-color: var(--berry); color: #8a3326; }
#rc .jres b { margin-right: .3em; }
#rc .jtl { font: 500 calc(var(--fb) * .8)/1.3 var(--body); color: #7a7467; text-align: right; }

/* 玩法：认表。正式报表面板、几种格式（中国格式左右两栏 / 上下排 / 英文 / 手机简表 / 附注版）。 */
#fsv { position: absolute; inset: 0; z-index: 82; display: none; align-items: center; justify-content: center; background: rgba(30,22,16,.55); }
#fsv.on { display: flex; }
#stage.quizup #fsv { padding-top: calc(var(--topH, 20px) - 8px); box-sizing: border-box; } #stage.quizup #fsv .lbx { max-height: calc(100% - 12px); }   /* 认表、点证据时工具栏浮在上面（pitfalls 154）：表让到它底下 */
#fsv.on.under { display: none; }   /* 认表时翻开账本：表先收到底下，合上再露出来 */
#fsv .lbx { width: min(1180px, calc(100% - 40px)); height: 690px; display: flex; flex-direction: column; overflow: hidden; }
#fsv .lh { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px; border-bottom: 2px dashed var(--line); font: 800 28px var(--body); color: var(--deep); flex: none; }
#fsv .lh button { min-height: 0; padding: 8px 22px; }
#fsv.quiz #fsX, #fsv.quiz .fsbar { display: none; }
.fsbar { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 18px 0; flex: none; }
.fsbar .sseg button { min-height: 46px; padding: 4px 16px; }
#fsQ { display: none; padding: 8px 18px; background: #fff7e3; border-bottom: 2px solid #f0d9a2; font: 700 var(--fb)/1.4 var(--body); flex: none; }
#fsv.quiz #fsQ { display: block; }
#fsQ .fb { font-weight: 500; color: var(--berry); margin-top: 2px; } #fsQ .fb.ok { color: var(--good); }
#fsQ .pg { font: 700 var(--fl) var(--body); color: var(--warm); margin-right: 10px; }
#fsBody { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 18px; display: flex; flex-direction: column; gap: 14px; }
#fsNote { flex: none; padding: 6px 18px 12px; font: 500 var(--fl)/1.4 var(--body); color: var(--accentd); min-height: 1.4em; }
.fs { background: #fff; border: 1px solid #cfc6b8; border-radius: 4px; padding: 10px 16px 12px; font-family: "Songti SC", "SimSun", "Noto Serif SC", serif; color: #222; flex: none; }
.fs .fh { text-align: center; } .fs .fh b { display: block; font-size: calc(var(--fb) + 4px); letter-spacing: .1em; }
.fs .fh span { display: flex; justify-content: space-between; font-size: var(--fl); color: #555; border-bottom: 2px solid #222; padding-bottom: 2px; margin-top: 2px; }
.fs .fh i { font-style: normal; }
.fs table { width: 100%; border-collapse: collapse; font-size: var(--fl); }
.fs th { font-weight: 700; border-bottom: 1px solid #222; padding: 3px 6px; text-align: right; white-space: nowrap; } .fs th:first-child { text-align: left; }
.fs td { padding: 3px 6px; border-bottom: 1px solid #eee; white-space: nowrap; } .fs td.n { text-align: right; font-variant-numeric: tabular-nums; width: 7.5em; }
.fs tr.sec td { font-weight: 700; padding-top: 8px; } .fs tr.tot td { font-weight: 700; border-top: 1px solid #222; } .fs tr.gtot td { font-weight: 700; border-top: 1px solid #222; border-bottom: 3px double #222; }
#stage.big .fs table { font-size: var(--fb); }
.fs .en { display: block; white-space: normal; font-size: .78em; line-height: 1.25; color: #555; }   /* 科目名括号里的英文另起一行小字，长了在空格处折；中文科目名和数照旧不换行 */
#stage.big .fs .en { font-size: 1em; } #stage.big .fs .acct td.n { width: 5.2em; }   /* 手机：英文不缩字（主控 10-17：缩了读不清）；账户式两栏并排时数那两栏收窄，给科目名让地方 */
#stage.big .fs .acct:has(.en) { grid-template-columns: 1fr; gap: 14px; } #stage.big .fs .acct:has(.en) table:first-child { border-right: 0; }   /* 带英文的账户式在手机上放不下两栏：上下排，往下滚 */
#stage.big #fsv .lbx { width: min(1520px, calc(100% - 40px)); } #stage.big .fs.app { max-width: 690px; }   /* 手机横屏：表里的字渲染后不小于 13px */
.fs tr[data-k] { cursor: pointer; } .fs tr[data-k]:hover td { background: #f6f1e6; }
.fs tr.pick td { background: #e8f5f1 !important; } .fs tr.bad td { background: #fbe9e5 !important; } .fs tr.hint td { box-shadow: inset 0 0 0 3px var(--gold); }
.fs .acct { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; } .fs .acct table:first-child { border-right: 1px solid #222; }
/* 银行 App 里的简表：手机卡片式、千元一位小数（第 3 周的认表） */
.appw { display: flex; gap: 22px; justify-content: center; align-items: flex-start; flex-wrap: wrap; flex: none; }
.fs.app { font-family: var(--body); flex: 1 1 420px; min-width: 0; max-width: 540px; box-sizing: border-box; border: 8px solid #2c3038; border-radius: 30px; background: #eef2f6; padding: 10px 12px 14px; color: #1d2733; }
.fs.app .fh { text-align: left; background: linear-gradient(135deg, #2f6fd0, #4f9ee8); color: #fff; border-radius: 16px; padding: 8px 14px; margin-bottom: 8px; }
.fs.app .fh b { font-size: calc(var(--fb) + 2px); letter-spacing: .02em; }
.fs.app .fh span { border: 0; color: #e3eeff; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; justify-content: flex-start; }
.fs.app .fh i { white-space: nowrap; }
.fs.app table { border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 14px; overflow: hidden; }
.fs.app th { border: 0; color: #7b8794; font-weight: 500; padding: 4px 10px; }
.fs.app td { border-bottom: 1px solid #edf0f4; padding: 5px 10px; } .fs.app td.n { width: 3.4em; }
.fs.app tr.sec td { background: #f6f8fb; color: #2f6fd0; padding-top: 6px; }
.fs.app tr.tot td, .fs.app tr.gtot td { border-top: 0; border-bottom: 1px solid #edf0f4; color: #2f6fd0; }
.fs.app tr.gtot td { background: #eaf2ff; }
.fs.app td.n.neg { color: #c4503f; }
/* 附注版（第 4 周起）：项目后面一栏附注编号，表下面是附注（每条一句说明 + 一张小表，不能点） */
.fs th.nt, .fs td.nt { text-align: center; width: 3em; color: #6a5a48; font-variant-numeric: tabular-nums; }
.fs.fnotes { font-size: var(--fl); }
.fs.fnotes .fn { margin-top: 10px; }
.fs.fnotes .fn > b { display: block; font-size: calc(var(--fl) + 2px); }
.fs.fnotes .fn p { margin: 2px 0 4px; line-height: 1.45; color: #333; }
.fs.fnotes .fn table { width: auto; min-width: min(460px, 100%); margin-left: 1.2em; }
.fs.fnotes .fn td { border-bottom: 1px dotted #ddd; }
#stage.big .fs.fnotes, #stage.big .fs.fnotes .fn p { font-size: var(--fb); }
#stage.big .fs.fnotes .fn > b { font-size: calc(var(--fb) + 2px); }
/* 认表题的追问（F28）：表不收、点对的那一行一直亮着，表下面一行数字键盘（手机上和表在一屏里，参照 pitfalls 148） */
#fsPad { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 18px 10px; background: #fff7e3; border-top: 2px solid #f0d9a2; }
#fsPad[hidden] { display: none; }
#fsPad .npa { flex: none; min-width: 150px; text-align: center; font: 800 calc(var(--fb) + 2px) var(--body); color: var(--ink); background: #fff; border: 3px solid var(--line); border-radius: 12px; padding: 4px 10px; font-variant-numeric: tabular-nums; }
#fsPad .npad { flex: 1; display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; }
#fsPad .npad button { min-height: 52px; padding: 0; background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 3px 0 #d8c6a6; font-size: var(--fb); }
#fsPad .npad .ok { grid-column: span 2; min-width: 0; background: var(--mint); color: #fff; border-color: var(--mint); font-size: var(--fl); }
#stage.big #fsPad .npad { grid-template-columns: repeat(8, 1fr); } #stage.big #fsPad .npad button { min-height: 56px; } #stage.big #fsPad .npad .ok { font-size: var(--fb); }   /* 手机上字渲染后不小于 13px */
#fsv.then #fsNote { display: none; }
#fsBody tr.keep td { background: #fff1c6; }

/* 玩法：日历 */
#calv { position: absolute; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; background: rgba(30,22,16,.5); }
#calv.on { display: flex; }
#calv .lbx { width: min(1100px, calc(100% - 60px)); height: 660px; display: flex; flex-direction: column; overflow: hidden; }
#calv .lh { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 2px dashed var(--line); font: 800 30px var(--body); color: var(--deep); }
#calv .lh button { min-height: 0; padding: 8px 22px; }
#calBody { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 18px 16px; gap: 12px; }
.cgrid { display: grid; grid-template-columns: 5.2em repeat(8, 1fr); gap: 6px; flex: none; }
.cgrid .wk { align-self: center; margin: 0; font: 700 var(--fl) var(--body); color: var(--warm); }
.cgrid .dh { text-align: center; font: 700 var(--fl) var(--body); color: var(--dim); }
.cday { min-height: 64px; border-radius: 12px; border: 3px solid var(--line); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; cursor: pointer; box-shadow: none; color: var(--ink); font: 700 var(--fl) var(--body); }
.cday .ic { display: flex; gap: 2px; } .cday .ic img { width: 26px; height: 26px; object-fit: contain; }
.cday.none { background: #f4eee4; color: #b9ab98; cursor: default; }
.cday.sel { border-color: var(--mint); background: #e8f5f1; }
.cday.today { box-shadow: 0 0 0 3px rgba(226,167,46,.6); }
#calList { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.cev { display: flex; gap: 12px; align-items: flex-start; background: #fff7e3; border-left: 6px solid var(--warm); border-radius: 8px; padding: 6px 12px; font: 500 var(--fb)/1.45 var(--body); }
.cev img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.cev .when { flex: none; min-width: 3em; font-weight: 700; color: var(--warm); }
.cev .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cev .tags span { font: 700 var(--fl) var(--body); background: #e8f5f1; color: #1f5f50; border-radius: 8px; padding: 0 8px; }
.cev .tags span.no { background: #f1e9db; color: var(--dim); }

/* 玩法：记录（回看） */
#logv { position: absolute; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; background: rgba(30,22,16,.5); }
#logv.on { display: flex; }
#logv .lbx { width: min(1000px, calc(100% - 60px)); height: 660px; display: flex; flex-direction: column; overflow: hidden; }
#logv .lh { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 2px dashed var(--line); font: 800 30px var(--body); color: var(--deep); }
#logv .lh button { min-height: 0; padding: 8px 22px; }
#logList { flex: 1; overflow-y: auto; padding: 12px 22px 22px; font-size: var(--fb); line-height: 1.5; display: flex; flex-direction: column; gap: 8px; }
#logList b { color: var(--accentd); } #logList em { color: var(--berry); font-style: normal; font-weight: 700; }
.lg-sep { align-self: center; font: 700 var(--fb) var(--body); color: var(--warm); margin-top: 8px; }
.lg-line { display: flex; gap: 12px; } .lg-line .nm { flex: none; min-width: 4.4em; font-weight: 700; color: var(--dim); }
.lg-rec { background: #e8f5f1; border-left: 6px solid var(--mint); border-radius: 8px; padding: 4px 12px; color: #1f5f50; font-weight: 500; }
.lg-bad { background: #fbe9e5; border-left: 6px solid var(--berry); border-radius: 8px; padding: 4px 12px; color: #8a3326; font-weight: 500; }
.lg-ev { background: #fff7e3; border-left: 6px solid var(--warm); border-radius: 8px; padding: 4px 12px; }

/* 先猜、揭晓（mechanics/steps）；小键盘 .npad 和回忆题的 #rc .pad 一个样子 */
#modal .pq { font: 700 var(--fb)/1.4 var(--body); color: var(--ink); }
#modal .opts { display: flex; flex-direction: column; gap: 10px; }
#modal .opt { text-align: left; min-height: 60px; padding: 8px 18px; background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 3px 0 #d8c6a6; font: 600 var(--fb)/1.3 var(--body); }
#modal .yn { display: flex; align-items: center; gap: 10px; } #modal .yn span { flex: 1; font: 600 var(--fb)/1.3 var(--body); }
#modal .yn button { min-width: 96px; min-height: 54px; background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: none; } #modal .yn button.on { background: var(--mint); color: #fff; border-color: var(--mint); }
#modal .rv2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #modal .rv2 > div { background: #fff7e3; border: 2px solid #f0d9a2; border-radius: 14px; padding: 8px 14px; }
#modal .rv2 > div.tr { background: #e8f5ef; border-color: var(--mint); } #modal .rv2 p { margin: 4px 0 0; font: 600 var(--fb)/1.35 var(--body); }
.npw { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.npa { align-self: center; min-width: 180px; text-align: center; font: 700 calc(var(--fb) + 6px) var(--body); border: 3px solid var(--mint); border-radius: 12px; padding: 2px 12px; background: #fff; color: var(--mintd); }
.npad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.npad button { min-height: 50px; padding: 0; font-size: var(--fb); background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 3px 0 #d8c6a6; }
.npad button.ok { grid-column: span 2; background: var(--mint); color: #fff; border-color: var(--mint); box-shadow: 0 3px 0 var(--mintd); }
/* 反推 + 滑块 */
#modal .tip { color: var(--dim); font: 500 var(--fb)/1.4 var(--body); } #modal .tip:empty { display: none; } #modal .tip.bad { color: var(--berry); font-weight: 600; }   /* 手机上 .note 小字整段收起（stage.css），答错说明、解释要看得见，用 .tip */
#modal input[type=range] { width: 100%; accent-color: var(--mint); height: 40px; }
#modal .sltk { display: flex; justify-content: space-between; font: 600 var(--fb) var(--body); color: var(--dim); margin-top: -6px; }
#modal .slv { font: 700 var(--fb)/1.4 var(--body); color: var(--deep); background: #fff7e3; border: 2px solid #f0d9a2; border-radius: 14px; padding: 8px 14px; }
/* 真年报那一页（real.js）：宽一点的卡；只亮这节要用的几行，别的灰掉 */
#modal.wide .mb { width: min(1120px, calc(100% - 40px)); }
#modal .real { display: flex; flex-direction: column; gap: 10px; } #modal .real > *, #modal .npw > *, #modal .cf2 > * { flex-shrink: 0; }   /* 手机上卡比屏幕高：不挤扁，整张往下滚 */
#modal .rl { font: 500 var(--fb)/1.45 var(--body); color: var(--ink); }
#modal .rt-t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 700 var(--fl) var(--body); color: var(--deep); } #modal .rt-t span { color: var(--dim); font-weight: 500; }
#modal .rtab { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #cfc6b8; font: 500 var(--fl)/1.35 var(--body); }
#modal .rtab th { text-align: right; padding: 4px 10px; border-bottom: 1px solid #222; } #modal .rtab td { padding: 5px 10px; border-bottom: 1px solid #eee; color: #9a9088; }
#modal .rtab td.v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#modal .rtab tr.hl td { color: #1d1a16; font-weight: 700; background: #fff4d6; }
#modal .rtab tr.pk { cursor: pointer; } #modal .rtab tr.pk td { color: #1d1a16; } #modal .rtab tr.ok td { background: #dff2ea; } #modal .rtab tr.no td { background: #f8dcd8; }
#modal .rsrc { font: 500 calc(var(--fl) - 3px)/1.4 var(--body); color: var(--dim); } #modal .rsrc a { color: var(--accentd); }
/* 体检卡（checkup.js）：四格，这周没变化的灰着，正在答的那格描边 */
#modal .ckg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#modal .ck { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; font: 500 var(--fl)/1.3 var(--body); }
#modal .ck b { color: var(--deep); } #modal .ck em { font-style: normal; font-weight: 700; color: var(--mintd); }
#modal .ck.off { opacity: .45; } #modal .ck.cur { border-color: var(--warm); box-shadow: 0 0 0 3px rgba(226,167,46,.3); }
#modal .opts.orow { flex-direction: row; flex-wrap: wrap; } #modal .opts.orow .opt { flex: 1 1 180px; text-align: center; }
#modal .opt.ok { background: #dff2ea; border-color: var(--mint); } #modal .opt.no { background: #f8dcd8; border-color: var(--berry); }
/* 对质（confront.js）：左边对方的话，右边证据卡；顶回去的那句划掉 */
#modal .cfi { font: 600 var(--fl) var(--body); color: var(--berry); }
#modal .cf2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: start; }
#modal .cfs, #modal .cfe { display: flex; flex-direction: column; gap: 8px; }
#modal .cs, #modal .ce { text-align: left; min-height: 54px; padding: 6px 14px; background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: none; font: 600 var(--fl)/1.3 var(--body); }
#modal .cs.on { border-color: var(--warm); background: #fff4d6; } #modal .cs.done { text-decoration: line-through; opacity: .5; }
#modal .ce { background: #f4f8ff; border-color: #c9d7ee; } #modal .ce:disabled { opacity: .55; }
/* 手机（#stage.big）：这些卡上的小字放到正文字号，不小于自测的下限 */
#stage.big #modal .rt-t, #stage.big #modal .rtab, #stage.big #modal .rsrc, #stage.big #modal .ck, #stage.big #modal .cfi, #stage.big #modal .cs, #stage.big #modal .ce { font-size: var(--fb); }
/* 真年报页答对后的解释（课程 real.explain）一行一条，用 
 分行（10-17 F22：长解释拆成两三行短句） */
#rTip .kp { white-space: pre-line; }
/* 四周并一月（merge.js）：四周一行一行，「这个月」两格点了用下面的键盘填 */
#modal .mtab { width: 100%; border-collapse: collapse; font: 500 var(--fl)/1.3 var(--body); font-variant-numeric: tabular-nums; margin: 6px 0; }
#modal .mtab th { text-align: right; font-weight: 700; color: var(--dim); padding: 4px 8px; } #modal .mtab th:first-child { text-align: left; }
#modal .mtab td { padding: 4px 8px; border-bottom: 1px solid #eee; } #modal .mtab td.v { text-align: right; }
#modal .mtab tr.mo td { font-weight: 800; border-top: 2px solid var(--ink); }
#modal .mc { width: 100%; min-height: 46px; text-align: right; background: #fff; color: var(--ink); border: 3px dashed var(--line); box-shadow: none; font: 800 var(--fb) var(--body); }
#modal .mc.on { border-color: var(--mint); border-style: solid; background: #e8f5f1; }
#modal .mpad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; } #modal .mpad button { min-height: 46px; padding: 0; background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 3px 0 #d8c6a6; font-size: var(--fb); }
#modal .mpad .ok { grid-column: span 2; background: var(--mint); color: #fff; border-color: var(--mint); }
#stage.big #modal .mtab { font-size: var(--fb); }
/* 拨杯数（slider.js）：一家一行——店名 | 滑块 | 每天几杯 | 多赚 | 利润从多少到多少（涨几成） */
#modal .srs { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
#modal .sr { display: grid; grid-template-columns: 6.5em 1fr auto; grid-template-areas: "n r v" "x x p"; align-items: center; gap: 4px 12px; padding: 8px 12px; background: #fff; border: 2px solid var(--line); border-radius: 12px; font: 500 var(--fl)/1.3 var(--body); font-variant-numeric: tabular-nums; }
#modal .sr b { grid-area: n; } #modal .sr input { grid-area: r; width: 100%; accent-color: var(--mint); } #modal .sr .sv { grid-area: v; font-weight: 700; }
#modal .sr .sx { grid-area: x; color: var(--accentd); } #modal .sr .sp { grid-area: p; text-align: right; font-weight: 700; } #modal .sr .sp em { font-style: normal; color: var(--berry); margin-left: 4px; }
#stage.big #modal .sr { font-size: var(--fb); }


/* 设置面板 */
#setv { position: absolute; inset: 0; z-index: 85; display: none; align-items: center; justify-content: center; background: rgba(30,22,16,.5); }
#setv.on { display: flex; }
#setv .sbx { width: min(800px, calc(100% - 60px)); max-height: calc(100% - 40px); display: flex; flex-direction: column; overflow: hidden; }
#setv .sbody { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 20px; }
.sgh { margin: 16px 24px 0; font: 800 var(--fl) var(--body); color: var(--warm); letter-spacing: .06em; }
#setName { width: 9em; min-width: 0; box-sizing: border-box; font: 700 var(--fb) var(--body); color: var(--ink); background: #fff; border: 3px solid var(--line); border-radius: 12px; padding: 8px 12px; user-select: text; -webkit-user-select: text; }
#setName:focus, #nameIn:focus { outline: none; border-color: var(--mint); }
#setNameOk { min-height: 56px; font-size: var(--fl); padding: 6px 22px; }
.sok { font: 700 var(--fl) var(--body); color: var(--good); }
#setProg .srow button { font-size: var(--fl); min-height: 56px; padding: 6px 22px; }
#setv .lh { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 2px dashed var(--line); font: 800 30px var(--body); color: var(--deep); }
#setv .lh button { min-height: 0; padding: 8px 22px; }
.srow { display: flex; align-items: center; gap: 16px 20px; padding: 12px 24px 0; flex-wrap: wrap; }
.srow .sl { width: 6.5em; font: 700 var(--fb) var(--body); color: var(--ink); flex: none; }
.sseg { display: flex; gap: 10px; flex-wrap: wrap; }
.sseg button { font-size: var(--fl); min-height: 56px; padding: 6px 22px; background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: none; }
.sseg button.on { background: var(--mint); color: #fff; border-color: var(--mint); }
.snote { margin: 10px 24px 0; font: 500 var(--fl)/1.45 var(--body); color: var(--dim); }

/* 主界面、章节、选伙伴、关于、弹框、结尾、请把手机横过来 */
/* 标题、结尾 */
.cover { position: absolute; inset: 0; z-index: 70; display: none; }
.cover.on { display: block; }
/* 主界面（拍板总账 L3，照 experiments/menu-ui 小样 v1）：竖排毛笔字书名、菜单只有「继续」加三个词；字体 LuBrush / LuSerif / LuLatin 是打包时切的子集（tools/lib/fonts.mjs），没有就退回系统字体 */
#stage { --brush: "LuBrush", "STKaiti", "KaiTi", "Kaiti SC", serif; --serif: "LuSerif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif; --latin: "LuLatin", Georgia, serif; --cream: #fbf3e4; --mute: #e6dac4; --brass: #f0c27a; }
#s-title { color: var(--cream); overflow: hidden; background: #1a120c; }
#s-title .tbg { position: absolute; inset: 0; background: var(--menu-bg) center/cover no-repeat; transition: opacity .5s; }
#s-title .tshade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20,12,6,.82) 0, rgba(20,12,6,.5) 22%, rgba(20,12,6,0) 40%); }
#s-title.solo .tshade { background: linear-gradient(90deg, rgba(14,12,24,.82) 0, rgba(14,12,24,.5) 26%, rgba(14,12,24,0) 48%); }
.tlogo { position: absolute; left: 64px; top: 34px; display: flex; gap: 14px; align-items: flex-start; z-index: 3; }
.tlogo h1 { margin: 0; writing-mode: vertical-rl; font: 400 120px/1 var(--brush); color: var(--cream); letter-spacing: .02em; white-space: nowrap; text-shadow: 0 4px 0 rgba(120,70,30,.55), 0 0 40px rgba(0,0,0,.45); }
.tlogo .ten { writing-mode: vertical-rl; font: italic 700 26px var(--latin); color: var(--brass); letter-spacing: .32em; margin-top: 14px; text-shadow: 0 2px 10px rgba(0,0,0,.6); text-transform: uppercase; }
/* 英文：书名横排、用拉丁斜体 */
#stage:lang(en) .tlogo { flex-direction: column; gap: 4px; }
#stage:lang(en) .tlogo h1 { writing-mode: horizontal-tb; font: italic 900 92px/1 var(--latin); }
#stage:lang(en) .tlogo .ten { writing-mode: horizontal-tb; margin: 0; }
.tmenu { position: absolute; left: 64px; top: 432px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tmenu button { background: none; border: 0; box-shadow: none; min-height: 0; border-radius: 0; color: var(--cream); text-align: left; }
.tmenu button:active { transform: none; box-shadow: none; }
.tmenu .go { padding: 0 0 6px; position: relative; }
.tmenu .go b { display: block; font: 900 64px/1.05 var(--serif); letter-spacing: .14em; text-shadow: 0 3px 18px rgba(0,0,0,.55); }
.tmenu .go small { display: block; margin-top: 6px; font: 600 26px var(--serif); color: var(--brass); letter-spacing: .08em; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.tmenu .go small:empty { display: none; }
.tmenu .go::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; background: var(--brass); transition: width .3s; }
.tmenu .go:hover::after { width: 100%; }
.tmenu .go:disabled { opacity: .7; }
.tmenu .go2 { margin-top: 8px; padding: 6px 18px; border-radius: 999px; border: 2px solid var(--brass); background: rgba(20,12,6,.55); color: var(--brass); font: 900 26px var(--serif); letter-spacing: .08em; }
.tmenu .sub { display: flex; gap: 30px; margin-top: 22px; }
.tmenu .sub button { padding: 6px 0; color: var(--mute); font: 600 30px var(--serif); letter-spacing: .2em; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.tmenu .sub button:hover { color: var(--cream); }
/* 四个词（10-18 加「伙伴」）：手机上每个至少 44 个屏幕像素高（--tap 是舞台坐标，menu.js 按缩放算） */
.tmenu .sub button { min-height: var(--tap, 54px); }
/* 英文：四个词一行太长、会伸到向导身上，排成两行两个；书名横排只占一行，菜单往上挪出这一行的地方。「Open the shop」字距收窄 */
#stage:lang(en) .tmenu, #stage.big:lang(en) .tmenu { top: 340px; }
#stage:lang(en) .tmenu .sub { display: grid; grid-template-columns: auto auto; gap: 0 40px; margin-top: 12px; }
#stage:lang(en) .tmenu .sub button { letter-spacing: .04em; }
#stage:lang(en) .tmenu .go b { letter-spacing: .02em; }
/* 选了伙伴：一个人的大立绘、向导在脚边、一句问候（点了听她说） */
.mchar { position: absolute; z-index: 2; cursor: pointer; display: none; filter: drop-shadow(0 10px 24px rgba(0,0,0,.4)); }
#s-title.solo .mchar { display: block; }
.mchar img { display: block; height: 100%; }
.mchar.partner { height: 1000px; bottom: -260px; left: 64%; transform: translateX(-50%); }
.mchar.guide { height: 230px; bottom: 8px; left: calc(64% - 330px); }
#s-title.night .mchar { filter: brightness(.86) saturate(.85) drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
.mchar.hop img { animation: mhop .45s ease; }
@keyframes mhop { 35% { transform: translateY(-16px); } 70% { transform: translateY(2px); } }
.tgreet { position: absolute; left: calc(64% + 150px); top: 120px; z-index: 4; display: none; flex-direction: column; align-items: flex-start; background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; text-align: left; color: var(--cream); max-width: 380px; }
#s-title.solo .tgreet { display: flex; }
.tgreet .gn { font: 400 44px var(--brush); color: var(--who, var(--brass)); text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 0 14px rgba(0,0,0,.5); }
.tgreet .gt { margin-top: 4px; font: 900 32px/1.4 var(--serif); color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 0 18px rgba(0,0,0,.5); }
.tgreet .gp { margin-top: 8px; font: 600 26px var(--serif); color: var(--brass); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
/* 新立绘（膝上取景，10-17）宽的伙伴（滑板、大衣）会伸到问候这一块底下：垫一层半透明深色，字压在人身上也读得清 */
#s-title .tgreet { background: linear-gradient(90deg, rgba(16,20,30,.62), rgba(16,20,30,.38)); padding: 10px 18px 12px; border-radius: 14px; backdrop-filter: blur(2px); }
#s-title .tgreet .gn { background: var(--who, var(--brass)); color: #fff; font-size: 36px; line-height: 1.2; padding: 0 12px; border-radius: 10px; text-shadow: none; }   /* 有的名字色深，压在深底上看不见：和对话框的名牌一样，色块白字 */
.tgreet:active { transform: none; box-shadow: none; }
.tgreet.play { animation: tpop .4s; } @keyframes tpop { 40% { scale: 1.05; } }
#tTop { position: absolute; right: 26px; top: 22px; z-index: 4; display: flex; gap: 10px; align-items: center; }
#acct { display: flex; gap: 10px; align-items: center; }
/* 右上这一排（喇叭、账号层放的按钮）压在封面任何地方都要看得清（10-18 owner：「右上角完全看不清楚」）：深字浅底（--ink 对这个底约 12:1），带一圈阴影和底图分开 */
#tTop button.ghost { color: var(--ink); background: rgba(255,251,244,.96); border-color: var(--line); box-shadow: 0 2px 10px rgba(30,20,10,.35); }
/* 喇叭（10-18 owner）：样子和账号那两个圆角按钮一样；还没点过画面时带一句「点一下开声音」 */
#tSnd { display: inline-flex; align-items: center; gap: 8px; min-height: 0; justify-content: center; padding: 6px 14px; font: 700 var(--fl) var(--body); border-radius: 999px; }
#tSnd .si { font-size: 1.15em; line-height: 1; }
#tSnd.wait { animation: tsnd 2.4s ease-in-out infinite; } @keyframes tsnd { 50% { box-shadow: 0 0 0 6px rgba(240,194,122,.35); } }
#stage.big .tlogo h1 { font-size: 116px; }
#stage.big .tmenu { top: 430px; }
#stage.big .tmenu .go b { font-size: 70px; }
#stage.big .tmenu .go small, #stage.big .tmenu .go2 { font-size: 32px; }
#stage.big .tmenu .sub button { font-size: 36px; }
#stage.big .tgreet { max-width: 440px; } #stage.big #s-title .tgreet .gn { font-size: 46px; } #stage.big .tgreet .gt { font-size: 38px; } #stage.big .tgreet .gp { font-size: 32px; }
#stage.big #aboutv .lbx { width: min(1500px, calc(100% - 60px)); }
#stage.big #setv .sbx { width: min(1100px, calc(100% - 60px)); max-height: calc(100% - 16px); }
#stage.big #setv .sbody { padding-bottom: 12px; } #stage.big #setv .srow { padding-top: 6px; } #stage.big #setv .sgh { margin-top: 8px; } #stage.big #setv .snote { margin-top: 4px; }
#stage.big #setv .sseg button, #stage.big #setNameOk, #stage.big #setProg .srow button { min-height: 50px; padding-top: 2px; padding-bottom: 2px; } #stage.big #setName { padding: 4px 12px; } #stage.big #setv .lh { padding: 6px 18px; }
#stage.big #dlg .dbx { width: min(1040px, calc(100% - 60px)); } #stage.big #dlg .dbx.small { width: min(820px, calc(100% - 60px)); }
/* 章节（照 menu-ui 小样 v1）：整屏，背景是当中那张卡的图虚化；一节一张海报卡，当中那张大、两边小 */
#chv { position: absolute; inset: 0; z-index: 84; display: none; overflow: hidden; background: #1a120c; color: var(--cream); }
#chv.on { display: block; }
#chv .cbg { position: absolute; inset: -40px; background: center/cover no-repeat; filter: blur(22px) brightness(.5) saturate(1.1); }
#chv .cvig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%); pointer-events: none; }
#chv .ctop { position: absolute; left: 40px; right: 40px; top: 22px; display: flex; align-items: center; gap: 18px; z-index: 5; }
#chv .back { width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid rgba(251,243,228,.5); background: rgba(10,8,6,.3); box-shadow: none; color: var(--cream); font: 700 40px/1 var(--body); }
#chv h2 { margin: 0; font: 400 52px var(--brush); letter-spacing: .1em; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
#chv .cprog { margin-left: auto; font: italic 700 30px var(--latin); color: var(--brass); letter-spacing: .06em; }
#chv .cprog i { font: normal 600 26px var(--serif); color: var(--mute); margin-left: 8px; letter-spacing: .1em; }
#chList { position: absolute; left: 0; right: 0; top: 96px; height: 540px; touch-action: pan-y; z-index: 2; }
.chr { position: absolute; left: 0; top: 50%; width: 360px; height: 520px; margin: -260px 0 0 -180px; border-radius: 18px; overflow: hidden; padding: 0; cursor: pointer; background: #2a1f18 center/cover no-repeat; color: var(--cream); box-shadow: 0 18px 40px rgba(0,0,0,.55); transition: transform .45s cubic-bezier(.25,.8,.3,1), filter .45s, opacity .45s; }
.chr::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 36%, rgba(12,8,5,.6) 62%, rgba(12,8,5,.93) 100%); }
.chr.f { box-shadow: 0 0 0 3px var(--brass), 0 22px 50px rgba(0,0,0,.6); }
.chr.lock { filter: saturate(.5) brightness(.75); }
.chr.lock.f { filter: saturate(.75) brightness(.9); }
.chr .cn { position: absolute; left: 24px; top: 12px; font: italic 900 72px/1 var(--latin); color: rgba(255,255,255,.93); text-shadow: 0 3px 16px rgba(0,0,0,.55); }
.chr .cn.fin { font: 400 70px/1 var(--brush); }
.chr .ct { position: absolute; left: 24px; right: 20px; bottom: 22px; }
.chr .ctt { display: block; font: 400 min(48px, calc(300px / var(--tl, 5))) /1.12 var(--brush); letter-spacing: .03em; text-shadow: 0 2px 12px rgba(0,0,0,.7); word-break: keep-all; overflow-wrap: normal; }
#stage:lang(en) .chr .ctt { font: italic 900 38px/1.1 var(--latin); word-break: normal; }
.chr .ch { display: block; margin-top: 8px; font: 600 26px/1.35 var(--serif); color: var(--brass); letter-spacing: .03em; }
.chr .cs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font: 600 24px/1.3 var(--serif); color: var(--mute); }
.chr .stars { color: #ffd36b; letter-spacing: .1em; }
.chr .lk { position: absolute; right: 18px; top: 18px; width: 54px; height: 54px; border-radius: 50%; background: rgba(15,10,6,.6); display: grid; place-items: center; border: 2px solid rgba(240,194,122,.7); font-size: 26px; }
.chr .nowt { position: absolute; right: 18px; top: 20px; padding: 4px 14px; border-radius: 999px; background: var(--brass); color: #2b211b; font: 900 24px var(--serif); letter-spacing: .1em; }
.chr .rt { position: absolute; right: 16px; top: 16px; z-index: 2; min-height: 0; padding: 6px 14px; border-radius: 999px; font: 900 24px var(--serif); background: var(--berry); box-shadow: 0 3px 0 #8c3126; color: #fff; }
#chv .arw { position: absolute; top: 50%; margin-top: -32px; z-index: 6; width: 64px; height: 64px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid rgba(251,243,228,.45); background: rgba(10,8,6,.45); box-shadow: none; color: var(--cream); font: 700 40px/1 var(--body); }
#chv .arw:disabled { opacity: .2; cursor: default; }
#chPrev { left: 24px; } #chNext { right: 24px; }
#chv .cact { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 18px; }
#chv .cact button { min-width: 240px; height: 62px; min-height: 0; border-radius: 999px; border: 0; padding: 0 30px; background: linear-gradient(180deg, #f8d58c, #d99a3c); color: #3a220c; font: 900 30px var(--serif); letter-spacing: .2em; box-shadow: 0 6px 20px rgba(0,0,0,.4); white-space: nowrap; }
#chv .cact button.rtb { background: var(--berry); color: #fff; letter-spacing: .1em; }
#chv .cact button:disabled { background: rgba(20,14,10,.75); color: var(--brass); border: 2px solid var(--brass); letter-spacing: .1em; opacity: 1; }
#stage.big #chv .cact button { height: 66px; font-size: 34px; }
/* 手机（舞台缩到一半以下）：卡片放大、字放大，屏幕上正文不小于 13px */
#stage.big #chList { top: 84px; height: 570px; }
#stage.big .chr { width: 410px; height: 560px; margin: -280px 0 0 -205px; }
#stage.big .chr .ctt { font-size: min(58px, calc(350px / var(--tl, 5))); }
#stage.big .chr .ch { font-size: 33px; } #stage.big .chr .cs { font-size: 30px; } #stage.big .chr .nowt, #stage.big .chr .rt { font-size: 30px; }
#stage.big #chv h2 { font-size: 60px; } #stage.big #chv .cprog { font-size: 36px; } #stage.big #chv .cprog i { font-size: 32px; }
/* 鉴赏（menu/gallery.js）：和记录、日历一样的面板；标题旁一排三栏（立绘、章节图、问候），下面一格格，点一张看大图。
   手机横屏（844×390 缩到 0.54）：字都按 var(--fb) 起（屏幕上不小于 13px），按钮高 --tap */
#galv { position: absolute; inset: 0; z-index: 85; display: none; align-items: center; justify-content: center; background: rgba(30,22,16,.5); }
#galv.on { display: flex; }
#galv .lbx { position: relative; width: min(1180px, calc(100% - 60px)); height: 680px; max-height: calc(100% - 24px); display: flex; flex-direction: column; overflow: hidden; }
#galv .lh { display: flex; align-items: center; gap: 18px; padding: 8px 18px; border-bottom: 2px dashed var(--line); font: 800 30px var(--body); color: var(--deep); flex: none; }
#galTabs { flex: 1; justify-content: center; }
#galv .sseg button { font-size: var(--fb); min-height: var(--tap, 54px); padding: 4px 22px; }
#galX { min-height: var(--tap, 54px); padding: 4px 22px; font-size: var(--fb); }
#galBody { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 22px 22px; }
#galv .gnote { margin: 0 0 12px; font: 500 var(--fb)/1.4 var(--body); color: var(--dim); }
#galv .gnote b { margin-left: 16px; color: var(--warm); }
#galv .gwho { margin-bottom: 14px; }
#galv .gwho button.on { background: var(--who, var(--mint)); border-color: var(--who, var(--mint)); }
.gfaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gface { height: 240px; min-height: 0; padding: 0; overflow: hidden; background: #fff; border: 3px solid var(--line); border-radius: 16px; box-shadow: none; cursor: zoom-in; }
.gface:hover { border-color: var(--mint); }
.gface img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
/* 章节图：和章节页的海报卡一个样子，小一号；没学完的压暗、去色、上锁 */
.gchs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.gch { position: relative; aspect-ratio: 360 / 520; min-height: 0; padding: 0; overflow: hidden; border-radius: 14px; background: #2a1f18 center/cover no-repeat; color: var(--cream); box-shadow: 0 6px 16px rgba(0,0,0,.3); text-align: left; cursor: zoom-in; }
.gch::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(12,8,5,.6) 66%, rgba(12,8,5,.93) 100%); }
.gch.lock { cursor: default; }
.gch.lock::before { background: rgba(26,18,12,.66); backdrop-filter: grayscale(1) blur(3px); -webkit-backdrop-filter: grayscale(1) blur(3px); }
.gch .cn { position: absolute; left: 14px; top: 8px; font: italic 900 46px/1 var(--latin); color: rgba(255,255,255,.93); text-shadow: 0 3px 12px rgba(0,0,0,.55); }
.gch .cn.fin { font: 400 44px/1 var(--brush); }
.gch .lk { position: absolute; right: 12px; top: 12px; width: 46px; height: 46px; border-radius: 50%; background: rgba(15,10,6,.6); display: grid; place-items: center; border: 2px solid rgba(240,194,122,.7); font-size: 26px; }
.gch .ct { position: absolute; left: 14px; right: 12px; bottom: 12px; font: 400 28px/1.15 var(--brush); text-shadow: 0 2px 10px rgba(0,0,0,.7); }
#stage:lang(en) .gch .ct { font: italic 900 24px/1.15 var(--latin); }
.gch.lock .ct { font: 600 24px/1.3 var(--serif); color: var(--brass); }
/* 问候：一位一行（小头像、名牌、几句） */
.gvs { display: flex; flex-direction: column; gap: 12px; }
.gv { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: #fff; border: 3px solid var(--line); border-radius: 16px; }
.gv img { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 6%; background: #f1e9db; }
.gv b { flex: none; min-width: 4em; padding: 0 12px; border-radius: 10px; background: var(--who, var(--mint)); color: #fff; font: 800 var(--fb)/1.4 var(--body); text-align: center; }
.gv span { font: 500 var(--fb) var(--body); color: var(--dim); }
.gv button.play { animation: tpop .4s; }
/* 大图：盖住整个面板，点哪都关上 */
#galZoom { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; background: rgba(24,18,12,.94); cursor: zoom-out; }
#galZoom[hidden] { display: none; }
#galZoom img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; }
#galZoom span { flex: none; font: 600 var(--fb) var(--serif); color: var(--cream); }
#galZoom:not(.cap) span { display: none; }
#stage.big #galv .lbx { width: min(1500px, calc(100% - 40px)); }
#stage.big .gface { height: 220px; }
#stage.big .gch .ct { font-size: 32px; } #stage.big .gch.lock .ct { font-size: 28px; }
/* 关于 */
#aboutv { position: absolute; inset: 0; z-index: 86; display: none; align-items: center; justify-content: center; background: rgba(30,22,16,.5); }
#aboutv.on { display: flex; }
#aboutv .lbx { width: min(1120px, calc(100% - 60px)); max-height: calc(100% - 40px); display: flex; flex-direction: column; overflow: hidden; }
#aboutv .lh { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 2px dashed var(--line); font: 800 30px var(--body); color: var(--deep); flex: none; }
#aboutv .lh button { min-height: 0; padding: 8px 22px; }
#abBody { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 26px 20px; font-size: var(--fb); line-height: 1.55; user-select: text; -webkit-user-select: text; }
#abBody h3 { margin: 10px 0 4px; font: 800 calc(var(--fb) + 4px) var(--body); color: var(--deep); }
#abBody h4 { margin: 14px 0 4px; font: 800 var(--fb) var(--body); color: var(--warm); }
#abBody p { margin: 6px 0; } #abBody ul { margin: 4px 0; padding-left: 1.2em; } #abBody li { margin: 4px 0; } #abBody b { color: var(--accentd); }
#dlg { position: absolute; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; background: rgba(30,22,16,.5); }
#dlg.on { display: flex; }
#dlg .dbx { width: min(760px, calc(100% - 60px)); max-height: calc(100% - 40px); overflow-y: auto; box-sizing: border-box; padding: 22px 30px 24px; display: flex; flex-direction: column; gap: 14px; font-size: var(--fb); line-height: 1.5; }
#dlg .dbx.small { width: min(600px, calc(100% - 60px)); text-align: center; }
#dlg h3 { margin: 0; font: 800 calc(var(--fb) + 6px) var(--body); color: var(--deep); }
#dlg p { margin: 0; } #dlg .dn { color: var(--dim); }
#dlg .row2 { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
#dlg .row2 button { font-size: var(--fb); padding: 10px 36px; min-width: 160px; }
#nameIn { font: 700 calc(var(--fb) + 2px) var(--body); color: var(--ink); background: #fff; border: 3px solid var(--line); border-radius: 12px; padding: 10px 14px; user-select: text; -webkit-user-select: text; box-sizing: border-box; width: 100%; }
#s-end { background: rgba(20,16,14,.6); }
#s-end .wrap { position: absolute; inset: 40px 30px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
#s-end .card { padding: 18px 22px; overflow-y: auto; align-self: start; max-height: 100%; box-sizing: border-box; }
#s-end h1 { margin: 0 0 6px; font: 800 40px var(--body); color: var(--deep); }
#s-end .stars { font-size: 46px; color: var(--gold); letter-spacing: 4px; }
#s-end p { font-size: var(--fb); line-height: 1.55; margin: 8px 0; }
#s-end .btns { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
#s-end .bal { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: var(--fb); font-variant-numeric: tabular-nums; }
#s-end .bal div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); }
#s-end .bal .sum { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 800; }
#rotate { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: #f3ece0; color: #3a3226; }
/* 只有手机竖着拿才请人横过来（stage/scale.js 按屏幕短边 < 600 判）；iPad 等大屏竖着也照常显示（owner 10-16） */
.ask-rotate #rotate { display: flex; }
/* 选伙伴：一张卡一位；伙伴包没做好的灰着、标「准备中」 */
#dlg .pks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
#dlg .pk { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; padding: 10px 8px 12px; background: #fff; color: var(--ink); border: 3px solid var(--line); border-radius: 16px; box-shadow: none; font: 700 var(--fb) var(--body); }
#dlg .pk img { height: 150px; width: 100%; object-fit: cover; object-position: 50% 8%; border-radius: 10px; }
#dlg .pk i { display: block; height: 150px; width: 100%; border-radius: 10px; background: #f1e9db; }
#dlg .pk span { font: 500 var(--fl)/1.3 var(--body); color: var(--dim); text-align: center; }
#dlg .pk.on { border-color: var(--mint); background: #e8f5f1; }
/* 开在哪：两张卡（menu.js 的 askRegion） */
#dlg .rgs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#dlg .rg { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 16px 18px; background: #fff; color: var(--ink); border: 3px solid var(--line); border-radius: 16px; box-shadow: none; text-align: left; }
#dlg .rg b { font: 800 calc(var(--fb) + 6px) var(--body); color: var(--deep); }
#dlg .rg span { font: 500 var(--fl)/1.4 var(--body); color: var(--dim); }
#dlg .rg.on { border-color: var(--mint); background: #e8f5f1; }
#dlg .pk .pkb { font: 700 var(--fl) var(--body); font-style: normal; color: var(--warm); background: #fbf1dc; border-radius: 8px; padding: 0 8px; }
#dlg .pk.wip { background: #f4eee4; opacity: 1; }
#dlg .pk.wip b { color: #9a8b78; }
/* 主界面的「伙伴」（10-18 单独一个词）：手机横屏缩到 0.54 时一句介绍、好感也不小于 13px，「关闭」至少 44px 高 */
#dlg .pk span, #dlg .pk .pkb { font-size: max(var(--fl), 24px); }
#pkX { min-height: var(--tap, 54px); }
#stage.big #dlg .pk img, #stage.big #dlg .pk i { height: 120px; }
#stage.big #dlg .pk span { font-size: var(--fb); }
/* 开店（F25）：开店前 / 送走了两张卡，一行一位（名字 | 第几节、第几轮或下次哪天） */
#dlg .shopl { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
#dlg .shopl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; background: #fff; border: 2px solid var(--line); border-radius: 12px; font: 500 var(--fl)/1.35 var(--body); }
#dlg .shopl b { white-space: nowrap; color: var(--accentd); } #dlg .shopl span { text-align: right; }
#dlg .shq { margin: 4px 0 0; font: 600 var(--fb)/1.4 var(--body); color: var(--ink); }
#stage.big #dlg .shopl > div { font-size: var(--fb); }

/* 快进自测（?fast=1）和「减少动态效果」：动画、过渡压到接近 0。放在最后。 */
html.fast *, html.fast *::before, html.fast *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 1ms !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* 这本书的配色、字体和两张图（钱的小图标、主界面背景）。引擎的样式只用这里的变量，不写死颜色。 */
:root {
  --ink: #3a2e28; --dim: #85715f; --paper: rgba(255, 251, 244, .95); --page: #fdf6e6; --line: #e3d1b4; --warm: #c8873a; --deep: #6b3f24;
  --accent: #4f7f68; --accentd: #36604d;
  --mint: #4f9e8c; --mintd: #2f7565; --berry: #c4503f; --good: #2f8a57; --gold: #e2a72e; --left: #4f9e8c; --right: #7a5bc8;
  --body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --coin: url(assets/icons/coin.webp);
  --bill: url(assets/money/bill.webp);   /* 金额牌的钞票面（拍板总账 F18，art/money/bill-a 那张，owner 10-17 选的） */
  --menu-bg: url(assets/backgrounds/menu.webp);
  color-scheme: light;
}