:root { --bg:#f6f1e8; --card:#fffdf8; --ink:#33302b; --mute:#8a8378; --accent:#c8794a; --line:#e4dccd; --soft:#efe7d8; --ok:#6b9a6b; }
:root[data-theme=dark] { --bg:#201e1b; --card:#2b2825; --ink:#ece6da; --mute:#9a9286; --accent:#e09468; --line:#3c3833; --soft:#35312c; --ok:#86b486; }
html { background:var(--bg); }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.6 system-ui,"PingFang SC","Microsoft YaHei",sans-serif; }
button, select, input, textarea { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:5px 12px; }
button { cursor:pointer; } button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.icon { padding:3px 10px; font-size:17px; line-height:1.2; }
textarea { width:100%; min-height:110px; resize:vertical; }
input[type=checkbox] { padding:0; }
h1 { font-size:20px; margin:0; } h2 { font-size:16px; margin:24px 0 8px; } h3 { font-size:14px; margin:14px 0 6px; color:var(--mute); font-weight:600; }
a { color:var(--accent); }
.mute { color:var(--mute); }

header { display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; padding:16px 20px 0; max-width:980px; margin:0 auto; }
header .tools { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
main { max-width:980px; margin:0 auto; padding:14px 20px 80px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.bar2 { margin:10px 0 0; }
.bar { height:5px; background:var(--soft); border-radius:3px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--accent); }
.bar.mood > i { background:var(--ok); }
.srow2 .bar:not(.bad):not(.mood) > i { background:var(--ok); }
.pill { font-size:12px; padding:0 8px; border-radius:10px; background:var(--soft); color:var(--mute); white-space:nowrap; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.chip { border-radius:14px; padding:2px 12px; font-size:14px; } .chip.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.stat { font-size:13px; margin-bottom:6px; }

/* 时间线与说过的话 */
.tl { padding:2px 0; display:flex; gap:8px; align-items:baseline; line-height:1.4; }
.tl .t { color:var(--mute); font-size:12px; white-space:nowrap; } .tl .who { color:var(--accent); white-space:nowrap; } .tl .x { flex:1; }
.said-you { color:var(--ok) !important; }
details { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:6px 12px; margin-bottom:6px; }
summary { cursor:pointer; }

/* 房间 */
.room { position:relative; background:linear-gradient(var(--card) 55%, var(--soft)); border:1px solid var(--line); border-radius:16px; min-height:330px; padding:176px 16px 14px; }
.stage { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:flex-end; }
body.pip { margin:0; } body.pip .room { border:none; border-radius:0; min-height:100vh; }
.cx { position:relative; width:136px; cursor:pointer; text-align:center; }
.cx .body { height:178px; }
.cx .av { width:100%; height:100%; animation:breathe 4s ease-in-out infinite; transform-origin:50% 100%; }
.cx.frail .av { filter:saturate(.55); opacity:.85; transform:rotate(-3deg) translateY(4px); animation:none; }
.cx.sel .nm b { color:var(--accent); }
.cx .nm { font-size:13px; padding:0 14px; position:relative; }
.cx .nm .bar { margin-top:2px; }
.cx .away { display:none; position:absolute; right:6px; top:0; color:var(--mute); cursor:pointer; line-height:1; }
.cx:hover .away { display:block; }
.cx .tail { animation:wag 2.4s ease-in-out infinite; transform-origin:78px 112px; }
.cx .eyes { animation:blink 5s infinite; transform-origin:50% 50%; }
@keyframes breathe { 0%,100% { transform:rotate(0) scaleY(1); } 25% { transform:rotate(-1.4deg) scaleY(1.012); } 50% { transform:rotate(0) scaleY(1.03); } 75% { transform:rotate(1.4deg) scaleY(1.012); } }
@keyframes wag { 50% { transform:rotate(10deg); } }
@keyframes blink { 0%,94%,100% { transform:scaleY(1); } 96% { transform:scaleY(.1); } }
.badges { position:absolute; top:-4px; left:0; right:0; display:flex; gap:2px; justify-content:center; pointer-events:none; z-index:1; }
.badges span { font-size:15px; background:var(--card); border:1px solid var(--line); border-radius:50%; width:24px; height:24px; display:grid; place-items:center; }
.badges span.urgent { border-color:var(--accent); animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { transform:scale(1.15); } }
.slot { position:absolute; left:50%; bottom:100%; width:0; z-index:5; }
.bubble { position:absolute; bottom:6px; left:0; transform:translateX(-50%); width:190px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 10px; font-size:13px; line-height:1.5; box-shadow:0 2px 10px #0002; text-align:left; }
.bubble.gift { border-color:var(--ok); } .bubble.reveal { border-color:var(--accent); font-size:14px; width:230px; }
.bubble .btns { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; } .bubble .btns button { padding:2px 10px; font-size:12px; }
.bubble .btns button.opt { width:100%; text-align:left; border-radius:8px; }
.bubble .row2 { display:flex; gap:6px; width:100%; }
.bubble:not(.chip)::after { content:''; position:absolute; left:calc(50% - var(--dx, 0px)); bottom:-6px; width:10px; height:10px; background:var(--card); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:translateX(-50%) rotate(45deg); }
.bubble.chip { width:auto; padding:3px 9px; cursor:pointer; font-size:14px; }
.bubble .cd { height:2px; background:var(--accent); margin-top:6px; border-radius:1px; }
#hold { position:fixed; width:64px; height:64px; margin:-32px 0 0 -32px; pointer-events:none; z-index:50; display:none; }
#hold circle { fill:none; stroke-width:5; } #hold .bg { stroke:var(--line); } #hold .fg { stroke:var(--accent); stroke-linecap:round; transform:rotate(-90deg); transform-origin:32px 32px; }

/* 弹窗 */
.modal { position:fixed; inset:0; background:#0007; display:none; place-items:center; z-index:60; padding:12px; overflow:auto; }
.modal .box { background:var(--card); border-radius:14px; padding:16px; width:min(440px,94vw); max-height:94vh; overflow:auto; }
.modal .box.wide { width:min(640px,96vw); }
.preset { display:block; width:100%; text-align:left; margin-bottom:6px; padding:8px 12px; border-radius:10px; }
.addgrid { display:grid; grid-template-columns:130px 1fr; gap:14px; align-items:start; } @media (max-width:520px) { .addgrid { grid-template-columns:1fr; } }
.addgrid .prev svg { width:130px; height:170px; }
.sws { display:inline-flex; gap:5px; flex-wrap:wrap; vertical-align:middle; }
.sw { width:20px; height:20px; border-radius:50%; border:2px solid var(--line); cursor:pointer; } .sw.on { border-color:var(--ink); }
.sform { padding-right:6px; }
.srow { display:grid; grid-template-columns:150px 200px 1fr; gap:8px; align-items:center; margin-bottom:4px; } .srow .n { font-size:12px; line-height:1.4; }
@media (max-width:640px) { .srow { grid-template-columns:1fr; } }
.gate { max-width:520px; margin:80px auto; padding:0 20px; }
body.pip .room { padding-top:170px; }
body.pip .cx { width:108px; } body.pip .cx .body { height:140px; } body.pip .stage { gap:6px; }
body.pip .bubble { width:170px; }

/* 昼夜：房间上的一层色调，颜色和透明度由脚本设置 */
.room::after { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--tint, transparent); pointer-events:none; transition:background 2s; z-index:3; }
.cx { z-index:4; } .cx.talk { z-index:8; } .slot { z-index:6; }
.dots { display:inline-flex; gap:4px; vertical-align:middle; }

/* 动作动画 */
.cx .body { position:relative; z-index:1; }
.fx { position:absolute; left:0; right:0; top:0; height:178px; pointer-events:none; z-index:2; }
.fx svg { width:100%; height:100%; overflow:visible; }
.fx .p { transform-box:fill-box; transform-origin:center; }
.fx .rise { animation:rise 1.8s ease-out 1 both; }
.fx .pulse { animation:pulse2 .9s ease-in-out 3 both; }
.fx .cup { animation:cup 2.6s ease-in-out 1 both; }
.fx .spoon { animation:spoon 2.6s ease-in-out 1 both; }
.fx .ball { animation:bounce .65s ease-in-out 5 both; }
.fx .zz { animation:rise 2.4s ease-out 2 both; }
.fx .pill { animation:pillmove 2.6s ease-in-out 1 both; }
.fx .spark { animation:twinkle 1.2s ease-in-out 1 1.6s both; }
.fx .glow { animation:glowp 1.1s ease-out 3 both; }
.fx .paw { animation:fade 1.6s ease-in-out 1 both; }
.fx .dot { animation:dotb .7s ease-in-out 4 both; }
.fx .ripple { animation:ripple 1s ease-out 3 both; }
@keyframes rise { 0% { transform:translateY(0) scale(.5); opacity:0; } 25% { opacity:1; } 100% { transform:translateY(-30px) scale(1.15); opacity:0; } }
@keyframes pulse2 { 0%,100% { transform:scale(.75); opacity:.35; } 50% { transform:scale(1.1); opacity:.9; } }
@keyframes cup { 0% { transform:translate(80px,100px); } 30% { transform:translate(56px,60px); } 55% { transform:translate(52px,58px) rotate(-28deg); } 80% { transform:translate(56px,60px); } 100% { transform:translate(80px,100px); } }
@keyframes spoon { 0% { transform:translate(72px,114px); } 45% { transform:translate(34px,82px); } 60% { transform:translate(34px,82px); } 100% { transform:translate(72px,114px); } }
@keyframes bounce { 0%,100% { transform:translate(78px,118px); } 50% { transform:translate(86px,78px); } }
@keyframes pillmove { 0% { transform:translate(82px,96px) scale(.6); opacity:0; } 20% { opacity:1; transform:translate(78px,92px) scale(1); } 65% { transform:translate(52px,66px); opacity:1; } 85% { transform:translate(52px,66px) scale(.2); opacity:0; } 100% { opacity:0; } }
@keyframes twinkle { 0% { transform:scale(0) rotate(0); opacity:0; } 50% { transform:scale(1.2) rotate(45deg); opacity:1; } 100% { transform:scale(0) rotate(90deg); opacity:0; } }
@keyframes glowp { 0% { transform:scale(.7); opacity:.55; } 100% { transform:scale(1.35); opacity:0; } }
@keyframes fade { 0% { opacity:0; } 30% { opacity:.85; } 100% { opacity:0; } }
@keyframes dotb { 0%,100% { transform:translateY(0); opacity:.4; } 50% { transform:translateY(-4px); opacity:1; } }
@keyframes ripple { 0% { transform:scale(.5); opacity:1; } 100% { transform:scale(1.5); opacity:0; } }
.cx[data-fx=pet] .av { animation:squish .5s ease-in-out 3; }
.cx[data-fx=hand] .av { animation:sway 1.4s ease-in-out 2; }
.cx[data-fx=play] .av, .cx[data-fx=walk] .av { animation:hop .45s ease-in-out 6; }
.cx[data-fx=water] .av { animation:sip 1.3s ease-in-out 2; }
.cx[data-fx=feed] .av { animation:chew .35s ease-in-out 8; }
.cx[data-fx=talk] .av, .cx[data-fx=medicine] .av { animation:nod .6s ease-in-out 3; }
.cx[data-fx=soothe] .av, .cx[data-fx=rest] .av { animation:sway 2s ease-in-out 2; }
@keyframes squish { 50% { transform:scale(1.04,.94); } }
@keyframes hop { 50% { transform:translateY(-8px); } }
@keyframes sip { 50% { transform:rotate(-3deg); } }
@keyframes chew { 50% { transform:scaleY(.985); } }
@keyframes nod { 50% { transform:translateY(3px); } }
@keyframes sway { 25% { transform:rotate(2.5deg); } 75% { transform:rotate(-2.5deg); } }
@keyframes bob { 50% { transform:translateY(-4px); } }

/* 问答气泡：三个预设加一个自己写的 */
.bubble.ask { width:220px; }
.bubble .own { display:flex; gap:4px; width:100%; }
.bubble .own input { flex:1; min-width:0; padding:2px 8px; font-size:12px; }
.bubble .own button { flex:none; }

/* 其余 */
button.danger { color:#c0453d; border-color:#c0453d; } button.danger:disabled { opacity:.4; cursor:default; }
.warn { color:#c0453d; font-size:13px; margin:4px 0; } .ok { color:var(--ok); }
.chips.inl { display:inline-flex; margin:0; }
.foot { margin-top:36px; font-size:12px; text-align:center; }
.aboutbody { max-height:56vh; overflow:auto; font-size:14px; } .aboutbody p { margin:0 0 10px; }
.clock { font-variant-numeric:tabular-nums; }

:root { color-scheme:light; } :root[data-theme=dark] { color-scheme:dark; }

/* 照顾的代价 */
.stagenote { font-size:12px; margin:-2px 0 6px; }
.cx .tears { display:none; position:absolute; left:0; right:0; top:0; height:178px; pointer-events:none; z-index:3; }
.cx .tears svg { width:100%; height:100%; } .cx .tears .drop { fill:#7ec0ee; animation:tear 1s ease-in infinite; } .cx .tears .d2 { animation-delay:.4s; }
.cx.top .nm b::after { content:" ●"; color:var(--accent); font-size:10px; }
.cx.nanny .nm b::before { content:"👩 "; font-size:11px; }
@keyframes tear { 0% { transform:translateY(0); opacity:0; } 20% { opacity:1; } 100% { transform:translateY(26px); opacity:0; } }
@keyframes shake { 25% { transform:translateX(-1.5px) rotate(-1deg); } 75% { transform:translateX(1.5px) rotate(1deg); } }

@keyframes fall { 0% { transform:translateY(0); opacity:0; } 20% { opacity:1; } 100% { transform:translateY(44px); opacity:0; } }

/* 房间背景 */
.scene { position:absolute; inset:0; border-radius:inherit; overflow:hidden; z-index:0; }
.scene svg { width:100%; height:100%; display:block; }
.room.hasscene { background:none; }
.room .stage { position:relative; z-index:4; }
.room::after { z-index:3; }
.cx.sleeping .eyes { animation:none; transform:scaleY(.12); }
.cx.sleeping .av { animation:none; filter:brightness(.92); }
.cx .zzz, .cx .sick { font-size:11px; margin-left:3px; }
.bubble.self { border-style:dashed; font-style:italic; color:var(--mute); }
.cx .nm { text-shadow:0 0 3px var(--card), 0 0 3px var(--card); }
/* 现实、故事、暂停 */
.seg { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.seg button { border:none; border-radius:0; padding:4px 12px; background:var(--card); } .seg button + button { border-left:1px solid var(--line); }
.seg button.on { background:var(--accent); color:#fff; }
.seg button.on[data-m=paused] { background:#8a8378; }
#sceneSel { margin-left:auto; }
.statgrid { display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:start; } .statgrid .prev svg { width:120px; height:156px; }
.srow2 { display:flex; align-items:center; gap:8px; margin:3px 0; font-size:13px; } .srow2 .l { width:110px; } .srow2 .bar { flex:1; }
.tag { font-size:12px; padding:0 8px; border-radius:10px; background:var(--soft); color:var(--ink); margin-right:4px; display:inline-block; }
.taskrow { display:inline-flex; gap:6px; align-items:center; } .taskrow.paused { opacity:.6; } .taskrow .bar { width:80px; }

.tlbox { max-height:320px; overflow-y:auto; padding-right:6px; } .tlbox.short { max-height:200px; }
.archbox { display:inline-block; vertical-align:top; } .archbox summary { cursor:pointer; color:var(--mute); font-size:13px; } .archbox .row { gap:10px; margin:4px 0; }
button.danger { color:#b3261e; }

/* 斜视的房子：只在斜视的页面里，房间是固定比例的画面，小人按格子位置摆在上面。全家总览页保持原来的样子 */
.room.iso { padding:0; min-height:0; aspect-ratio:800 / 520; container-type:inline-size; width:100%; overflow:hidden; }
.room.iso .stage { position:absolute; inset:0; display:block; pointer-events:none; z-index:4; }
.room.iso .cx { position:absolute; width:calc(8cqw * var(--fig, 1)); transform:translate(-50%, -88%); pointer-events:auto; z-index:calc(10 + var(--z, 0)); }
.room.iso .cx.talk { z-index:calc(1000 + var(--z, 0)); }
.room.iso .cx .body { height:calc(10.4cqw * var(--fig, 1)); } 
.room.iso .cx .nm { font-size:clamp(9px, 1.35cqw, 12px); padding:0 2px; white-space:nowrap; }
.room.iso .cx .badges { top:-8px; } .room.iso .cx .badges span { width:18px; height:18px; font-size:11px; }
.room.iso .cx.player { pointer-events:none; } .room.iso .cx.player .nm { color:var(--mute); }
.room:not(.iso) .placenav .here, .room:not(.iso) .roster { display:none; }
.room:not(.iso) { padding-top:176px; }
.placenav { position:absolute; left:10px; top:8px; z-index:20; display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:13px; }
.placenav button { padding:2px 9px; background:var(--card); }
/* 换场景的大箭头：贴在画面左右两边，垂直居中，位置固定，可以连续点 */
.navarrow { position:absolute; top:50%; transform:translateY(-50%); z-index:25; width:44px; height:96px; padding:0; border:0; border-radius:14px; background:var(--card); color:var(--ink); font-size:34px; line-height:1; opacity:.55; cursor:pointer; }
.navarrow:hover, .navarrow:focus-visible { opacity:1; }
.navarrow.l { left:4px; } .navarrow.r { right:4px; }
@media (max-width:520px) { .navarrow { width:34px; height:80px; font-size:28px; } }
.placenav .here { color:var(--mute); margin-left:6px; background:var(--card); border-radius:8px; padding:1px 8px; }
.placenav .travel { position:relative; overflow:hidden; background:linear-gradient(90deg, var(--accent) calc(var(--k, 0) * 100%), var(--card) calc(var(--k, 0) * 100%)); }
.roster { position:absolute; left:8px; bottom:8px; z-index:30; display:flex; flex-wrap:wrap; gap:5px; max-width:46%; max-height:38%; overflow-y:auto; overflow-x:hidden; padding:5px 5px 2px 5px; }   /* 呼叫时的提示用外圈光晕，不放大，所以不会被裁掉 */
.rcard { position:relative; width:52px; background:var(--card); border:1px solid var(--line); border-radius:9px; padding:2px 3px 3px; text-align:center; cursor:pointer; font-size:10px; line-height:1.25; opacity:.96; }
.rcard:hover { border-color:var(--accent); } .rcard.sel { border-color:var(--accent); } .rcard.calling { animation:pulseRing 1.4s infinite; border-color:var(--accent); }
@keyframes pulseRing { 0%,100% { box-shadow:0 0 0 0 transparent; } 50% { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } }
.rcard .av { height:38px; } .rcard .av svg { width:100%; height:100%; }
.rcard .rn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rcard .bar { height:3px; margin:1px 2px; }
.rcard .rb { position:absolute; left:-4px; top:-4px; font-size:11px; background:var(--card); border:1px solid var(--line); border-radius:50%; width:17px; height:17px; display:grid; place-items:center; } .rcard .rb.urgent { border-color:var(--accent); }
.rcard .ri { position:absolute; right:1px; top:0; font-size:10px; color:var(--mute); } .rcard .ri:hover { color:var(--accent); }
.taskrow[draggable=true] { cursor:grab; }
.fftag { background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:1px 8px; font-size:13px; }

.plist { max-height:50vh; overflow:auto; }
.prow { display:flex; gap:8px; align-items:center; padding:5px 0; border-bottom:1px solid var(--line); }
.prow .pav { width:34px; height:44px; flex:none; } .prow .pav svg { width:100%; height:100%; } .prow .pn { flex:1; min-width:0; }

/* 窄屏：房间里只留头像和徽标，名单变成底部一排可横滑的小卡片 */
@media (max-width: 640px) {
  .room.iso .cx { width:calc(10cqw * var(--fig, 1)); } .room.iso .cx .nm { display:none; }
  .room.iso .cx .badges span { width:14px; height:14px; font-size:9px; }
  .room.iso { overflow:visible; margin-bottom:70px; }
  .room.iso .scene { border-radius:16px; overflow:hidden; }
  .roster { left:0; right:0; top:calc(100% + 8px); bottom:auto; max-width:none; max-height:none; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; padding:2px; }
  .rcard { flex:none; width:44px; }
  .placenav .here { display:none; }
  header .tools { gap:6px; }
}

/* 环形菜单：图标一圈，需求对应的是彩色，其余灰色但也能点，中间显示名字 */

/* 标题：一颗被托着的心，斜体衬线，for 小一点，用主题色 */
header h1.brand { display:flex; align-items:center; gap:10px; margin:0; font-family:Georgia, "Palatino Linotype", "Songti SC", "Noto Serif CJK SC", serif; font-style:italic; font-weight:600; font-size:38px; letter-spacing:.5px; line-height:1.1; }
header h1.brand .mark { width:44px; height:44px; flex:none; }
header h1.brand em { font-size:.58em; color:var(--accent); font-weight:500; margin:0 .08em; }
@media (max-width: 640px) { header h1.brand { font-size:30px; } header h1.brand .mark { width:36px; height:36px; } }
header { align-items:center; }

/* 宝宝这类一直要人的角色，需求超过一半就一直亮着 */

/* 角色在房间里慢慢走：位置变化是一段长的滑动，主角跟着你的操作走得快些 */
.room.iso .cx { transition:left 7s ease-in-out, top 7s ease-in-out; }
.room.iso .cx.lead, .room.iso .cx.player { transition-duration:1.2s; }

/* 手机上房间很小，气泡收小一点 */
@media (max-width: 640px) {
  .bubble { width:150px; font-size:12px; padding:6px 8px; } .bubble.ask { width:180px; } .bubble.reveal { width:190px; }
  .bubble .btns button { font-size:11px; padding:2px 8px; }
}

@keyframes stroll { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2.5%); } }
.room.iso .cx.walking .body { animation:stroll calc(.8s / var(--tempo, 1)) ease-in-out infinite; }
.room.iso .cx { transition:left calc(7s / var(--tempo, 1)) ease-in-out, top calc(7s / var(--tempo, 1)) ease-in-out; }
.room.iso .cx.lead, .room.iso .cx.player { transition-duration:calc(1.2s / var(--tempo, 1)); }

/* 画面上的动态：叶子和花摇动，角色和宠物轻轻起伏呼吸，窗外有风，白天有蝴蝶飞过。快慢都乘 --tempo，体现当前的时间倍率 */
@keyframes leafSway { from { transform:rotate(-2.5deg) translateX(-1px); } to { transform:rotate(2.5deg) translateX(1px); } }
.scene svg .leaf { transform-box:fill-box; transform-origin:50% 100%; animation:leafSway calc(3.2s / var(--tempo, 1)) ease-in-out infinite alternate; }
/* 角色和宠物本来就有呼吸起伏（.av 的 breathe），这里只让快慢跟着倍率；没有动画的状态（睡着，哭，疲惫）不受影响 */
.room.iso .cx .av { animation-duration:calc(4s / var(--tempo, 1)); }
.room.iso .cx:nth-child(2n) .av { animation-delay:-1.1s; } .room.iso .cx:nth-child(3n) .av { animation-delay:-2.2s; }
/* 窗外的风：窗格里有几道风丝和一片被吹过的叶子，沿着窗子的方向飘过去，快慢跟着 --tempo */
@keyframes gust { 0% { transform:translate(0, 0); opacity:0; } 15% { opacity:.85; } 85% { opacity:.85; } 100% { transform:translate(var(--dx), var(--dy)); opacity:0; } }
.scene svg .wgust { animation:gust calc(3.4s / var(--tempo, 1)) ease-in-out infinite; opacity:0; }
.scene svg .wleaf { animation:gust calc(4.6s / var(--tempo, 1)) ease-in-out infinite; opacity:0; }

/* 减少动态效果：不要慢慢滑动和起伏 */
@media (prefers-reduced-motion: reduce) {
  .room.iso .cx, .room.iso .cx.lead, .room.iso .cx.player { transition:none; }
  .room.iso .cx.walking .body, .scene svg .leaf { animation:none; }
  *, *::before, *::after { animation:none !important; }   /* 系统要求减少动态时，所有循环动画都停：风丝，叶子，呼吸，眼泪，红点 */
}

.cardtext { max-height:55vh; overflow:auto; background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px; line-height:1.45; white-space:pre-wrap; margin:0; }
.obhead { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.tile { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:8px 10px; border-radius:10px; }
.tile.on { border-color:var(--accent); } .tile b { font-size:14px; } .tile .mute { font-size:12px; line-height:1.35; }
@media (max-width:480px) { .tiles { grid-template-columns:1fr; } }
.corner { position:absolute; top:8px; z-index:9; padding:3px 10px; border-radius:12px; font-size:13px; background:color-mix(in srgb, var(--card) 82%, transparent); border:1px solid var(--line); font-variant-numeric:tabular-nums; line-height:1.4; }
#cornerTime { cursor:pointer; user-select:none; } .cornerbox { position:absolute; top:8px; right:10px; z-index:9; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:calc(100% - 20px); }
header .tagline { flex:1; margin:0 0 0 18px; color:var(--mute); font-size:14px; font-style:italic; align-self:center; min-width:0; }
@media (max-width:760px) { header .tagline { flex-basis:100%; margin:2px 0 0 4px; font-size:13px; } }   /* 窄屏一句话排在标题下面，不隐藏 */
.cpop { position:absolute; z-index:40; width:max-content; min-width:340px; max-width:calc(100vw - 24px); padding:10px 12px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 6px 18px #0003; font-size:13px; display:grid; gap:8px; }
.cpop .prow2 { white-space:nowrap; display:flex; align-items:center; justify-content:space-between; gap:10px; } .cpop input[type=range] { flex:1; min-width:120px; margin:0; } .cpop .tsel select { font:inherit; padding:1px 2px; } .cpop .tsel { white-space:nowrap; } .cpop input[type=time] { font:inherit; width:104px; } .cpop .prow2 > span:last-child { white-space:nowrap; } .cpop .seg button { white-space:nowrap; }
.cpop .seg { display:flex; gap:4px; } .cpop .seg button { padding:1px 7px; } .cpop .seg button.on { background:var(--accent); color:#fff; }
.cornerbox .corner { position:static; top:auto; cursor:pointer; }   /* 日期格有未读红点时被 button.corner.unread 改成 relative，top:8px 会把它推歪 */ #cornerMusic.off { opacity:.55; }
.money.big { font-size:22px; font-weight:600; }
/* 豆子造型：整张图的呼吸换成豆子本身，走路时脚和手交替，照顾时手抬起 */
.cx .av:has(.bean) { animation:none; }
.cx .bean, .cx .foot, .cx .hand { transform-box:fill-box; transform-origin:50% 100%; }
.cx .bean { animation:breathe 4s ease-in-out infinite; }
.cx.walking .bean { animation:bob .44s ease-in-out infinite; }
.cx.walking .foot.l { animation:stepL .44s ease-in-out infinite; } .cx.walking .foot.r { animation:stepR .44s ease-in-out infinite; }
.cx.walking .hand.l { animation:swingL .44s ease-in-out infinite; } .cx.walking .hand.r { animation:swingR .44s ease-in-out infinite; }
.cx[data-fx] .hand.r { animation:raise 1.2s ease-in-out 2; }
@keyframes bob { 0%,100% { transform:translateY(0) rotate(-3deg); } 25%,75% { transform:translateY(-3px) rotate(0); } 50% { transform:translateY(0) rotate(3deg); } }
@keyframes stepL { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes stepR { 0%,100% { transform:translateY(-5px); } 50% { transform:translateY(0); } }
@keyframes swingL { 0%,100% { transform:translateY(2px); } 50% { transform:translateY(-3px); } }
@keyframes swingR { 0%,100% { transform:translateY(-3px); } 50% { transform:translateY(2px); } }
@keyframes raise { 0%,100% { transform:translateY(0); } 50% { transform:translate(-6px,-14px); } }
/* 头上弹出的事件 */
.cx .pops { position:absolute; left:0; right:0; top:-8px; height:0; z-index:8; pointer-events:none; }
.pop { position:absolute; left:50%; top:-30px; min-width:30px; height:30px; padding:0 6px; border-radius:16px; display:grid; place-items:center; font-size:18px; line-height:1; background:var(--card); border:1px solid var(--line); box-shadow:0 2px 6px #0002; transform:translateX(-50%); animation:popin 4s ease-out both; }
.pop.ask::after { content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; margin-left:-4px; background:var(--card); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); }
.pop.done { background:#6fae78; border-color:#5a9a63; color:#fff; font-weight:700; animation-duration:2.6s; }
.pop.event { background:#fff4c8; border-color:#e5d38a; animation-duration:3s; }
@keyframes popin { 0% { transform:translate(-50%,10px) scale(.3); opacity:0; } 8% { transform:translate(-50%,-3px) scale(1.18); opacity:1; } 16% { transform:translate(-50%,0) scale(1); } 78% { transform:translate(-50%,-8px); opacity:1; } 100% { transform:translate(-50%,-20px); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .pop { animation:none; } }

/* 悬停的人轻轻亮一圈，重叠时看得出要弹谁的菜单；坐在电脑前的人，两只手轮流敲键盘 */
.cx.hov .body { filter:drop-shadow(0 0 6px var(--accent)); }
.cx.working .hand.l { animation:typeL .34s ease-in-out infinite; } .cx.working .hand.r { animation:typeR .34s ease-in-out infinite; }
@keyframes typeL { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes typeR { 0%,100% { transform:translateY(-3px); } 50% { transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cx.working .hand { animation:none !important; } }

.obs { display:flex; align-items:center; gap:8px; margin:3px 0; font-size:14px; } .obs .l { min-width:84px; color:var(--mute); } .obs .v { flex:1; }
.obs-ok { color:var(--ok); } .obs-watch { color:#c28a2e; } .obs-alert { color:var(--accent); } .spark { flex:none; }
.settle-line { margin:.5em 0; line-height:1.6; }
.calgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:10px 0; text-align:center; }
.calday { padding:6px 0; border-radius:8px; border:1px solid transparent; background:var(--card); color:var(--ink); }
.calday.off { opacity:.35; }
.calday.unread { position:relative; } .calday.unread::after, button.corner.unread::after { content:''; position:absolute; top:3px; right:4px; width:7px; height:7px; border-radius:50%; background:#ff8a5c; animation:dnpulse 1.6s ease-in-out infinite; }
button.corner.unread { position:relative; }
.cornerbox button.corner.unread { top:auto; }
@keyframes dnpulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.5); opacity:.6; } }
.daynote { position:fixed; z-index:30; right:16px; top:96px; width:min(320px, calc(100vw - 32px)); padding:12px 14px 14px; background:var(--card); color:var(--ink); border:1px solid var(--line, #0003); border-radius:12px; box-shadow:0 6px 24px #0005; cursor:pointer; }
.daynote .dn-t { font-weight:600; margin-bottom:6px; } .daynote p { margin:4px 0; } .daynote .dn-tap { font-size:.82em; margin-top:6px; }
.daynote .dn-bar { height:3px; background:#0002; border-radius:2px; margin-top:8px; overflow:hidden; }
.daynote .dn-bar i { display:block; height:100%; background:var(--accent); width:100%; transform-origin:left; animation-name:dnbar; animation-timing-function:linear; animation-fill-mode:forwards; }
@keyframes dnbar { from { transform:scaleX(1); } to { transform:scaleX(0); } }
.calday.on { border-color:var(--accent); font-weight:600; }
.calbody { min-height:5em; }
.vcard { display:flex; gap:12px; margin:10px 0; align-items:flex-start; }
.vcard .prev { width:96px; flex:none; }
.vinfo { flex:1; }
.giftgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
.gift { background:var(--card); border:1px solid var(--line, #0002); border-radius:10px; padding:8px; text-align:center; font-size:.92em; }
.gift > div:first-child { font-size:1.5em; }
.gift.pick { cursor:pointer; }
.gift.pick.on { border-color:var(--accent); }

/* 头顶只有一个槽：一个图标，多的需求用 +N 表示，完整的在操作面板里 */
.badges span { position:relative; }
.badges span.done { background:#6fae78; border-color:#5a9a63; color:#fff; font-weight:700; animation:donepop 1.3s ease-out both; }
@keyframes donepop { 0% { transform:scale(.3); opacity:0; } 20% { transform:scale(1.25); opacity:1; } 35% { transform:scale(1); } 85% { opacity:1; } 100% { opacity:0; } }
.badges .n { position:absolute; right:-9px; top:-6px; font-size:10px; font-style:normal; line-height:1; background:var(--accent); color:#fff; border-radius:8px; padding:1px 4px; }
.cx.donenow .slot .chip { visibility:hidden; }
.bubble.chip.on { border-color:var(--accent); }
.bubble:not(.chip):not(.card) { max-width:150px; width:max-content; font-size:12px; line-height:1.4; padding:5px 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bubble:not(.chip):not(.card)::after { display:none; }

/* 身体上一次只演一种持续的动画：做动作 > 哭 > 有事找人 > 虚弱。有事找人是柔和的光，隔几秒才闪一下，不一直闪 */
.cx[data-st=cry] .av { animation:shake .35s ease-in-out infinite; }
.cx[data-st=cry] .tears { display:block; }
.cx[data-st=need] .body { animation:needyglow 6s ease-in-out infinite; }
.cx[data-st=act] .av, .cx[data-st=act] .body { animation:none; filter:none; }
@keyframes needyglow { 0%, 62%, 100% { filter:none; } 78% { filter:drop-shadow(0 0 9px var(--accent)); } }
.room.iso .cx .tears { height:calc(10.4cqw * var(--fig, 1)); }
@media (prefers-reduced-motion: reduce) { .cx[data-st=need] .body, .cx[data-st=cry] .av { animation:none; } }

/* 对话卡：固定在房间底部，一次一张，选项横着排，不盖住太多场景 */
.dlgcard { position:absolute; right:10px; bottom:10px; width:clamp(300px, 54%, 520px); z-index:30; }
.dlgcard:empty { display:none; }
.dlgcard .bubble { position:static; transform:none; width:auto; max-width:none; font-size:14px; line-height:1.45; padding:8px 12px 10px; display:block; overflow:visible; background:color-mix(in srgb, var(--card) 96%, transparent); }
.dlgcard .bubble::after { display:none; }
.dlgcard .bubble > b { font-size:12px; color:var(--mute); margin-right:8px; font-weight:600; }
.dlgcard .bubble > div:first-of-type { display:inline; }
.dlgcard .bubble .btns { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.dlgcard .bubble .btns button, .dlgcard .bubble .btns button.opt { width:auto; font-size:13px; padding:3px 12px; text-align:left; }
.dlgcard .bubble .own { flex:1 1 180px; width:auto; }

/* 操作面板：贴在角色旁边，不盖住人 */
.opanel { position:fixed; z-index:40; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px 10px; box-shadow:0 4px 18px #0003; }
.opanel .ophead { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.opanel .ophead b { flex:1; font-size:15px; }
.opanel .ophead .hb { font-size:12px; padding:1px 8px; }
.opanel .ophead .x { padding:0 8px; font-size:16px; line-height:1.3; border:none; background:none; color:var(--mute); }
.opanel .ophint { font-size:12px; line-height:1.4; margin-top:6px; }
.opanel .opneeds { display:flex; flex-wrap:wrap; gap:4px 8px; font-size:12px; color:var(--mute); margin-bottom:4px; }
.opanel .opneeds .urgent { color:var(--accent); font-weight:600; }
.opanel .oplabel { min-height:20px; font-size:13px; line-height:1.5; } .opanel .oplabel small { color:var(--mute); margin-left:6px; }
.opanel .opgrid { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; justify-items:center; }
.opanel button.ico { padding:0; width:38px; height:38px; border-radius:50%; font-size:20px; line-height:1; display:grid; place-items:center; background:var(--card); touch-action:none; }
.opanel button.ico .e { display:block; transition:filter .15s, opacity .15s; }
.opanel button.ico.calm .e { filter:grayscale(1); opacity:.55; }
.opanel button.ico.calm:hover .e, .opanel button.ico.calm:focus-visible .e { filter:none; opacity:1; }
.opanel button.ico.urgent { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.opanel .opmore { margin-top:6px; border-top:1px solid var(--line); padding-top:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.opanel .opmore .tog { border:none; background:none; color:var(--mute); padding:0 6px; }
.opanel .opmore .items { display:none; gap:4px; flex-wrap:wrap; } .opanel .opmore.open .items { display:flex; }
.opanel .opmore .items button { font-size:12px; padding:2px 8px; }
.opanel.sheet { border-radius:16px; }
.opanel.sheet .opgrid { grid-template-columns:repeat(6, 1fr); }
/* 面板开着：场景里别人的头顶标记和闲聊都收起，只留底部的对话卡 */
.room.ring-open .cx .badges, .room.ring-open .cx .slot { visibility:hidden; }

@media (max-width:640px) { .dlgcard { position:fixed; left:8px; right:8px; bottom:8px; transform:none; width:auto; max-height:55vh; overflow:auto; } }

/* 房间镜头：场景和舞台各有一层外壳负责裁剪，里面的层做缩放平移。人和字不跟着放大 */
.room:not(.iso) .scenewrap, .room:not(.iso) .stagewrap { display:contents; }
.room.iso .scenewrap { position:absolute; inset:0; overflow:hidden; border-radius:inherit; z-index:0; }
.room.iso .stagewrap { position:absolute; inset:0; overflow:hidden; border-radius:inherit; z-index:4; pointer-events:none; }
.room.iso .scene, .room.iso .stage { transform-origin:0 0; transition:transform .8s ease-in-out; will-change:transform; }
.room.iso .cx .nm .bar { display:none; }
.room.iso .cx .nm { transform:scale(calc(1 / var(--zoom, 1))); transform-origin:50% 0; }
.room.iso .cx .nm b { font-weight:600; color:var(--mute); }
.room.iso .cx.sel .nm b, .room.iso .cx.hov .nm b { color:var(--ink); }
.room.iso .cx .badges { top:calc(var(--hd, 0) * 10.4cqw * var(--fig, 1) - 6px); transform:scale(calc(1 / var(--zoom, 1))); transform-origin:50% 100%; }
.room.iso .cx .slot { margin-bottom:calc(var(--hd, 0) * -10.4cqw * var(--fig, 1)); transform:scale(calc(1 / var(--zoom, 1))); transform-origin:0 100%; }
.placenav .zones { display:inline-flex; gap:4px; margin-left:4px; }
.placenav .zone { position:relative; padding:1px 8px; font-size:15px; line-height:1.4; background:var(--card); }
.placenav .zone.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, var(--card)); }
.placenav .zone i { font-style:normal; font-size:10px; color:var(--mute); margin-left:3px; }
.placenav .zone.call::after { content:""; position:absolute; right:-2px; top:-2px; width:9px; height:9px; border-radius:50%; background:var(--accent); border:2px solid var(--card); }
.room.iso .scene svg image { filter:saturate(.8); }
.room.iso .cx .body { --ol:drop-shadow(0 0 .6px #4a3320aa) drop-shadow(0 0 .6px #4a3320aa); filter:var(--ol); }
.room.iso .cx.hov .body { filter:var(--ol) drop-shadow(0 0 6px var(--accent)); }
.cx[data-st=need] .body { animation-name:needyglow2; }
@keyframes needyglow2 { 0%, 62%, 100% { filter:var(--ol, none); } 78% { filter:var(--ol, none) drop-shadow(0 0 9px var(--accent)); } }
.cx[data-st=act] .body { filter:var(--ol, none); }

/* 翻页的时候旧页的复制，滑走后删掉 */
.room.iso .ghost { pointer-events:none; }
/* 别处有人在叫：箭头上亮一个点，名单里不在这一页的人标上所在的页 */
.navarrow.call::after { content:""; position:absolute; right:3px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--accent); border:2px solid var(--card); animation:pulseRing 1.4s infinite; }
.rcard.away { opacity:.8; }
.rcard .rl { display:block; font-size:9px; color:var(--accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 知识页 */
.kn { border-top:1px solid var(--line); padding:6px 0; }
.kn summary { cursor:pointer; }
.kn .kbody { padding:4px 0 2px 14px; font-size:13px; }
.kn .krefs { margin:4px 0 0; padding-left:18px; font-size:12px; color:var(--mute); }
.kbadge { font-size:11px; padding:0 6px; border-radius:8px; border:1px solid var(--line); margin-left:4px; }
.kbadge.sourced { border-color:var(--accent); color:var(--accent); }
.kbadge.derived { border-color:var(--accent); }

.srow2 .pc { min-width:34px; text-align:right; font-size:12px; }
.statgrid .intro { margin:8px 0; padding:6px 8px; border-left:3px solid var(--line); }

/* 百科：左边条目，右边当前的设计；窄屏先列表后正文 */
a.pl { text-decoration: underline; text-underline-offset: 2px; cursor: pointer; color: inherit; }
a.pl:hover { color: var(--accent); }
.pedia { display: grid; grid-template-columns: 210px 1fr; gap: 12px; height: min(68vh, 560px); }
.pedia .pnav { overflow-y: auto; border-right: 1px solid var(--line); padding-right: 8px; }
.pedia .psearch { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.pedia .pgh { font-size: 12px; color: var(--mute); margin: 8px 0 2px; letter-spacing: .04em; }
.pedia .pi { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 4px 8px; border-radius: 6px; cursor: pointer; color: inherit; font: inherit; }
.pedia .pi:hover { background: var(--soft); }
.pedia .pi.on { background: var(--soft); color: var(--accent); font-weight: 600; }
.pedia .pbody { overflow-y: auto; padding-right: 4px; }
.pedia .pbody h3 { margin-top: 0; font-size: 18px; color: var(--ink); }
.pedia .pbody h4 { margin: 14px 0 4px; }
.pedia .pf { display: flex; gap: 10px; margin: 4px 0; align-items: baseline; }
.pedia .pk { flex: 0 0 6.5em; color: var(--mute); font-size: 13px; }
.pedia .pback { display: none; margin-bottom: 8px; }
@media (max-width: 640px) {
  .pedia { grid-template-columns: 1fr; height: 62vh; }
  .pedia .pbody { display: none; }
  .pedia.show-body .pnav { display: none; }
  .pedia.show-body .pbody { display: block; }
  .pedia .pback { display: inline-block; }
}
/* 设置里数据位置：按钮加一句说明 */
.drows { display: grid; gap: 8px; }
.drow { display: grid; grid-template-columns: minmax(9em, 12em) 1fr; gap: 10px; align-items: center; }
@media (max-width: 520px) { .drow { grid-template-columns: 1fr; } }

/* 商店格子：说明放进弹窗，格子只留图标名字价格，点一下看说明 */
.shoptile { position: relative; cursor: pointer; }
.shoptile .tinfo { position: absolute; top: 4px; right: 6px; font-size: 12px; color: var(--mute); }
.shoptile:hover { border-color: var(--accent); }
/* 贡献统计表，开发者面板里的内部界面 */
.ltab { border-collapse: collapse; font-size: 13px; margin: 4px 0; }
.ltab th, .ltab td { border: 1px solid var(--line); padding: 3px 8px; text-align: center; }
.ltab th { font-weight: 600; background: var(--soft); }

/* 游戏窗体里的记录：收起时底部一行最新的事，展开成面板盖住窗体下半部分 */
.logwin { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; flex-direction: column; border-radius: 0 0 16px 16px; background: color-mix(in srgb, var(--card) 94%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(3px); }
.logbar { display: flex; gap: 8px; align-items: baseline; padding: 7px 12px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; }
.logbar .t { color: var(--mute); font-size: 12px; } .logbar .who { color: var(--accent); } .logbar .x { flex: 1; overflow: hidden; text-overflow: ellipsis; } .logbar .chev { color: var(--mute); }
.logbody { display: none; padding: 4px 14px 12px; max-height: min(46vh, 360px); overflow-y: auto; border-top: 1px solid var(--line); }
.logwin.open .logbody { display: block; }
.logwin .tlbox { max-height: none; overflow: visible; }
.logwin #feed h2 { margin: 6px 0; font-size: 15px; }
.ltab .sel { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ltab a { color: inherit; text-decoration: underline; }
.lfocus { margin: 6px 0; padding: 6px 8px; border-left: 3px solid var(--accent); background: var(--soft); }
.lgtab h3 { font-size: 14px; margin: 12px 0 4px; }

/* 窄屏：窗体底部右侧的角落按钮让到记录条上面；记录展开时按钮回到上面，不盖住记录 */
/* 宽屏：窗体左下角的角色头像让到记录条上面；记录展开时先收起，不盖住记录 */
@media (min-width:641px) { .room .roster { bottom: 46px; } .room.logopen .roster { display: none; } }
.logwin { z-index: 25; } .logwin.open { background: var(--card); } .room .cornerbox { z-index: 30; }

/* 开发者模式的小标 */
.devtag { font: 600 11px/1 system-ui, sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #c0392b; border-radius: 4px; padding: 2px 5px; margin-left: 6px; vertical-align: middle; }
/* 嵌入模式：页面头部整个不要，设置和关于在窗体角落里；窗体顶到页面上缘 */
body.embed header { display: none; }
body.embed main { padding-top: 6px; }
.cornerbox .tools { display: flex; gap: 6px; margin: 0; }
.cornerbox .tools .icon { width: 30px; height: 30px; padding: 0; }
body.embed main { padding-bottom: 0; } body.embed #roomBar:empty { display: none; } body.embed { min-height: 0; }

/* 一句话提示：窗体里面，上方居中，几秒后消失，不挡操作 */
.room .toast { display: none; position: absolute; left: 50%; top: 46px; transform: translateX(-50%); z-index: 40; max-width: 70%; padding: 6px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.15); font-size: 13px; text-align: center; pointer-events: none; }

/* 来客名录 */
.vbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 56vh; overflow-y: auto; }
.vbk { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; text-align: center; font-size: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: inherit; }
.vbk b { font-size: 13px; } .vbk .vbi { font-size: 28px; line-height: 1.2; }
.vbk.dark { cursor: default; opacity: .55; } .vbk.dark .vbi { filter: brightness(0); opacity: .45; }
.gift-react { margin: 6px 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); border-radius: 6px; }

/* 商店说明气泡：悬停或聚焦在格子上出现，在弹窗之上，不挡鼠标 */
.shoptip { display: none; position: fixed; z-index: 100; width: 260px; max-width: calc(100vw - 16px); padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.2); font-size: 13px; line-height: 1.5; pointer-events: none; }
.shoptip p { margin: 4px 0; } .shoptip .money { margin-top: 4px; }

/* 照顾统计：饼图和图例 */
.spie { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.sleg { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; line-height: 1.7; }
.sleg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* 状态面板里的两张饼图并排，窄了就上下排 */
.spair { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.spie.v { flex-direction: column; align-items: flex-start; gap: 6px; }
.spie.v .sleg { grid-template-columns: 12px 1fr auto auto; }

/* 手机（640 以内）：时间，钱，按钮在窗口右上，人物卡在窗口左下；记录是贴底的抽屉，展开最多占六成屏幕，点它的标题条收起，不再顶到上面和按钮叠在一起；记录由 U.layoutNarrow 搬到页面最外层，因为场景容器里的 fixed 不相对窗口 */
@media (max-width: 640px) {
  /* 窗口比场景高：上面留一条放标题和按钮，下面留一条放人物卡，都在窗口里面，和桌面一样；场景保持 800 比 520 的比例，放在中间 */
  .room.iso { aspect-ratio: auto; height: calc((100vw - 40px) * .65 + 190px); margin-bottom: 0; overflow: hidden; }
  .room.iso .scenewrap, .room.iso .stagewrap { inset: auto; left: 0; right: 0; top: 100px; height: 65cqw; }
  .room .cornerbox { top: 34px; bottom: auto; left: 8px; right: 8px; justify-content: flex-end; }
  .roster { left: 8px; right: 8px; top: auto; bottom: 8px; }
  .logwin { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; border-radius: 14px 14px 0 0; border: 1px solid var(--line); border-bottom: none; box-shadow: 0 -4px 16px #0002; background: var(--card); padding-bottom: env(safe-area-inset-bottom); }
  .logbar { padding: 10px 12px; }
  main { padding-bottom: 84px; }
}

/* 记录展开：不显示收起时的那一条，最上面是固定的标签行，折叠按钮在最右；下面的列表单独滚动，不含标签；整个展开不超过四成高，底部半透明 */
.logwin.open { display: flex; flex-direction: column; max-height: 40%; background: color-mix(in srgb, var(--card) 84%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.logwin.open .logbar { display: none; }
.logwin.open .logbody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: none; overflow: hidden; border-top: none; padding: 8px 12px 6px; }
.loghead { flex: none; } .logrow { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.logrow .chips { flex: 1; min-width: 0; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .logrow .chips::-webkit-scrollbar { display: none; }
.logrow .chip { flex: none; white-space: nowrap; font-size: 13px; padding: 1px 10px; }
.logfold { flex: none; padding: 0 10px; font-size: 14px; line-height: 1.6; border-radius: 14px; color: var(--mute); }
.logscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.logscroll .stat { font-size: 12px; margin: 2px 0 4px; }
@media (max-width: 640px) {
  .logwin.open { max-height: 40vh; }
  .logwin .logbody { max-height: none; }
  .tl .pill { display: none; }
}

/* 标题旁的一句话换句时淡出淡入 */
header .tagline { transition: opacity .6s; }