/* Wawalu · CLAUDE-003 · 七号雨巷 */
:root {
  --bg: #080a14; --bg2: #0e1122; --ink: #f3ecdf; --ink2: #b9b3c9; --ink3: #7f7a93;
  --line: rgba(255, 255, 255, .09); --glass: rgba(14, 16, 32, .72); --glass2: rgba(22, 24, 46, .86);
  --pink: #ff5fa2; --amber: #ffb347; --teal: #4de3d4; --yellow: #ffd23f; --red: #ff4b5c;
  --r: 16px; --font: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --serif: "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "STSong", serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
/* 英文（共用语言开关 lang.mjs 把 html lang 设成 en）：正文用系统无衬线、标题用系统衬线（不加在线字体服务），汉字落到后面原来的中文字体 */
:root:lang(en) {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "DejaVu Sans", system-ui, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", "Noto Serif", "Liberation Serif", "DejaVu Serif", "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "STSong", serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; }
p { margin: 0; }
img.pt { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c, #888) 40%, #1a1d33), #0c0e1c); border: 2px solid var(--c, #666); display: block; flex: none; }
img.pt.mini { width: 26px; height: 26px; border-width: 1.5px; }
img.pt.big { width: 84px; height: 84px; border-width: 3px; }

/* ───────── 世界页 ───────── */
body.world { height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-columns: 1fr 380px; }
#stageWrap { position: relative; overflow: clip; min-height: 0; background: #07080f; }
#c { width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
#labels .bubble { z-index: 2; } #labels .tag { z-index: 1; }   /* 台词气泡永远在名字牌上面：别人的名字牌不压住正在说的话 */
.tag { position: absolute; left: 0; top: 0; pointer-events: auto; padding: 3px 9px 3px 7px; border-radius: 99px; background: rgba(8, 10, 20, .7); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); font-size: 12px; line-height: 16px; white-space: nowrap; backdrop-filter: blur(6px); transform-origin: 50% 100%; display: flex; align-items: center; gap: 5px; box-shadow: 0 0 12px color-mix(in srgb, var(--c) 30%, transparent); will-change: transform; }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.tag.sel { background: color-mix(in srgb, var(--c) 34%, rgba(8, 10, 20, .8)); font-weight: 700; }
.tag.has-mail::after { content: attr(data-mail); font-size: 10.5px; padding: 0 5px; border-radius: 6px; background: #f6efdf; color: #2a2230; font-weight: 700; }
.tag .emo { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translate(-50%, 6px) scale(.6); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff8ec; color: #d63a6a; font-style: normal; font-weight: 800; font-size: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.tag .emo.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.bubble { position: absolute; left: 0; top: 0; max-width: 230px; padding: 7px 11px; border-radius: 14px; background: rgba(250, 246, 236, .96); color: #1c1a26; font-size: 13px; line-height: 1.45; opacity: 0; transition: opacity .35s; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); font-family: var(--serif); }
.bubble.on { opacity: 1; }
/* 英文台词气泡（按台词标 lang="en"）：更宽、只在词间换行（超长词才断），正文字体；位置按实际宽度夹在屏幕内（lang.mjs bubbleX） */
.bubble[lang="en"] { max-width: 260px; overflow-wrap: break-word; hyphens: auto; font-family: var(--font); line-height: 1.4; }
.bubble.fold { padding: 3px 10px; min-width: 0; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: rgba(250, 246, 236, .96); }
/* AI 台词标记：小号、半透明的薄荷色，跟在台词后面（行内，不压字；收成"…"时不带） */
.ai-mark { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 4px; font: 600 9px/13px system-ui, sans-serif; letter-spacing: .04em; font-style: normal; vertical-align: 1px; white-space: nowrap; color: #7ee0c3; border: 1px solid rgba(126, 224, 195, .5); opacity: .8; }
.bubble .ai-mark { color: #1d5a49; background: rgba(126, 224, 195, .55); border-color: transparent; opacity: .85; }
.f-say { display: block; margin-top: 2px; } .f-say q { display: inline; margin: 0; }
/* 工作台：AI 驱动人物的状态行（运行中带薄荷色圆点） */
.ai-state { margin: 6px 0 2px; font-size: 13px; line-height: 1.5; color: var(--ink2); overflow-wrap: anywhere; }
.ai-log { margin: 8px 0 4px; } .ai-log h5 { margin: 0 0 4px; font-size: 13px; } .ai-log ol { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.ai-log li { padding: 5px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.ai-log-h { display: flex; gap: 6px; align-items: baseline; color: var(--ink2); } .ai-log-h time { font-variant-numeric: tabular-nums; } .ai-log-h i { font-style: normal; font-size: 11px; padding: 0 4px; border-radius: 3px; background: rgba(255,255,255,.1); }
.ai-log-r { display: block; color: #f0c27a; } .ai-log li.c-adopted .ai-log-r { color: #7ee0c3; } .ai-log q { display: block; color: var(--ink2); opacity: .8; font-size: 11px; }
.ai-state.on { color: #7ee0c3; } .ai-state.on::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #7ee0c3; vertical-align: 1px; }
.mark { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; padding: 5px 10px 6px; border-radius: 10px; font-size: 12px; line-height: 1.35; text-align: center; white-space: nowrap; pointer-events: none; transition: opacity .3s; }
.mark small { font-size: 10.5px; opacity: .85; }
.mark::after { content: ""; position: absolute; bottom: -7px; left: 50%; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; }
.mark.mine-lantern { background: linear-gradient(135deg, #ff6f5a, #ffb347); color: #22100a; box-shadow: 0 0 24px rgba(255, 140, 70, .7); animation: markIn .6s cubic-bezier(.3, 1.6, .5, 1); }
.mark.mine-lantern::after { border-top-color: #ffa24c; }
.mark.mine-note { background: #f6efdf; color: #2a2230; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); animation: markIn .6s cubic-bezier(.3, 1.6, .5, 1); }
.mark.mine-note::after { border-top-color: #f6efdf; }
@keyframes markIn { from { transform: scale(.4); opacity: 0; } }
.paper-fly { position: fixed; left: -13px; top: -10px; width: 26px; height: 20px; z-index: 40; pointer-events: none; background: linear-gradient(135deg, #fff 0 48%, #e6dcc4 50% 100%); border-radius: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.letterbox i { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 2; transition: height .7s cubic-bezier(.4, 0, .2, 1); pointer-events: none; }
.letterbox i:first-child { top: 0; } .letterbox i:last-child { bottom: 0; }
.letterbox.on i { height: 6.5vh; }

.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 14px 16px 30px; background: linear-gradient(rgba(6, 7, 14, .78), rgba(6, 7, 14, 0)); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.back { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; font-size: 26px; line-height: 1; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); padding-bottom: 3px; flex: none; }
.ttl { display: flex; flex-direction: column; line-height: 1.2; margin-right: 6px; }
.ttl b { font-family: var(--serif); font-size: 21px; letter-spacing: .08em; white-space: nowrap; }
.ttl span { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: 12.5px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); backdrop-filter: blur(8px); white-space: nowrap; position: relative; }
.chip.off { border-color: rgba(255, 90, 90, .5); color: #ffb4b4; background: rgba(120, 20, 30, .35); }
.chip.sound.on { border-color: rgba(143, 211, 255, .6); color: #cfe9ff; background: rgba(40, 90, 140, .35); }
.chip i[id] { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.on { background: #44ff88; box-shadow: 0 0 8px #44ff88; } .dot.off { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.chip.glow i { font-style: normal; color: var(--ink2); }
.chip.glow b { width: 48px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); position: relative; overflow: hidden; }
.chip.glow b::after { content: ""; position: absolute; inset: 0; width: var(--v); background: linear-gradient(90deg, #ff7a3d, #ffd23f); box-shadow: 0 0 8px #ffb347; }
.chip.glow span { color: var(--amber); }
.top-r { margin-left: auto; display: flex; gap: 6px; align-items: center; }
/* 语言按钮（共用开关 lang.mjs）：世界页页头（返回键旁）与工作台页头同一个样式；aria-pressed=true 表示当前是中文。
   点按区域 44×44；看得见的圆片 36px（与返回键一样大），上下用负外边距，不把页头撑高 */
.lang-btn { flex: none; position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -4px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.lang-btn::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); z-index: -1; }
.lang-btn[aria-pressed="true"] { color: var(--yellow); }
.lang-btn[aria-pressed="true"]::before { border-color: rgba(255, 210, 63, .75); background: rgba(255, 210, 63, .14); }
.lang-btn:focus-visible { outline: none; } .lang-btn:focus-visible::before { outline: 2px solid var(--yellow); outline-offset: 1px; }
.feed-btn { display: none; }

/* 剧情字幕卡 */
.caption { position: absolute; z-index: 6; top: 72px; left: 16px; width: min(440px, 46%); opacity: 0; transform: translateY(-10px); transition: opacity .5s, transform .5s; pointer-events: none; }
.caption.on { opacity: 1; transform: none; pointer-events: auto; }
.cap-in { display: flex; gap: 12px; padding: 14px 16px 14px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(42, 19, 48, .92), rgba(22, 20, 50, .92)); border: 1px solid rgba(255, 95, 162, .45); box-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 0 30px rgba(255, 95, 162, .15); backdrop-filter: blur(10px); cursor: pointer; position: relative; }
.cap-pts { display: flex; flex-direction: column; gap: 4px; } .cap-pts img.pt.mini { width: 34px; height: 34px; }
.cap-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 95, 162, .2); color: var(--pink); flex: none; }
.cap-k { font-size: 11px; letter-spacing: .08em; color: #ff9ecb; }
.caption h3 { font-family: var(--serif); font-size: 20px; letter-spacing: .06em; margin: 3px 0 4px; }
.cap-t { font-size: 14px; line-height: 1.65; }
.cap-r { font-size: 13px; line-height: 1.6; color: #ffd9a8; margin-top: 5px; }
.cap-x, .e-x { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border-radius: 50%; color: var(--ink3); font-size: 16px; }
/* 参与的回响 */
.echoes { position: absolute; z-index: 7; top: 72px; right: 16px; width: min(360px, 42%); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.echo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 30px 12px 12px; border-radius: 14px; background: #f7f0e0; color: #2a2230; box-shadow: 0 12px 36px rgba(0, 0, 0, .45); font-size: 13px; line-height: 1.55; position: relative; pointer-events: auto; cursor: pointer; opacity: 0; transform: translateX(20px) rotate(.6deg); transition: opacity .45s, transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.echo.on { opacity: 1; transform: rotate(-.4deg); }
.echo b { font-size: 14px; font-family: var(--serif); }
.echo p { margin-top: 2px; }
.echo q { display: block; margin-top: 4px; font-family: var(--serif); color: #7a3a5a; }
.echo .why { color: #4a5a78; } .echo .why i { background: rgba(60, 100, 160, .14); color: #2a5a9a; }
.e-icon { font-size: 18px; line-height: 26px; }
.echo img.pt.mini { width: 30px; height: 30px; }
/* 字幕 */
.subtitle { position: absolute; z-index: 4; left: 470px; right: 20px; bottom: 112px; text-align: center; font-size: 14px; line-height: 1.55; color: #f6efe2; text-shadow: 0 2px 8px #000, 0 0 2px #000; opacity: 0; transition: opacity .5s; pointer-events: none; }
.subtitle.on { opacity: 1; }
.subtitle b { margin-right: 8px; } .subtitle span { color: #ffd9a8; }

/* 底部：焦点卡 + 人物条 */
.hud { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: calc(14px + var(--safe-b)); display: flex; align-items: flex-end; gap: 12px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.focus { width: 430px; flex: none; padding: 12px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.focus.person { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.f-head { display: flex; align-items: center; gap: 8px; }
.f-kicker { font-size: 11px; letter-spacing: .14em; color: var(--pink); text-shadow: 0 0 10px rgba(255, 95, 162, .6); margin-right: auto; }
img.pt.f-pt { width: 38px; height: 38px; }
.f-name { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; min-width: 0; }
.f-name b { font-family: var(--serif); font-size: 18px; letter-spacing: .06em; }
.f-name small { font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-chip { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c, #ff5fa2) 22%, transparent); color: color-mix(in srgb, var(--c, #ff5fa2) 70%, white); white-space: nowrap; }
.f-mini { font-size: 12px; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .09); white-space: nowrap; }
.f-mini:hover { background: rgba(255, 255, 255, .16); }
.f-now { margin-top: 9px; font-size: 14px; line-height: 1.5; }
.f-now span { color: var(--ink2); font-size: 12.5px; }
.f-now q { display: block; font-family: var(--serif); color: #fff1d6; margin-top: 2px; font-size: 14.5px; }
.f-sit { margin-top: 6px; font-size: 13px; line-height: 1.6; color: #e8dcc8; padding-left: 9px; border-left: 2px solid color-mix(in srgb, var(--c, #ff5fa2) 70%, transparent); }
.f-more { display: none; margin-top: 8px; }
.focus.open .f-more { display: block; }
.focus:not(.open) .f-more:has(.receipts) { display: block; }
.focus:not(.open) .f-more > :not(.receipts) { display: none; }
.f-prog { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink2); margin-top: 6px; }
.f-prog span { white-space: nowrap; } .f-prog i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); position: relative; overflow: hidden; }
.f-prog i::after { content: ""; position: absolute; inset: 0; width: var(--v); background: linear-gradient(90deg, var(--teal), var(--yellow)); }
.receipts { list-style: none; margin: 8px 0 0; padding: 8px 10px; border-radius: 12px; background: rgba(246, 239, 223, .08); border: 1px dashed rgba(246, 239, 223, .25); font-size: 12.5px; line-height: 1.6; display: grid; gap: 3px; }
.receipts .h { font-size: 11px; color: var(--ink3); letter-spacing: .1em; }
@media (max-width: 899px) { .focus:not(.open) .receipts { display: flex; gap: 6px; align-items: baseline; } .focus:not(.open) .receipts .h { flex: none; } .focus:not(.open) .receipts li:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.receipts .pending { color: #f6efdf; } .receipts .done { color: #bfe8c8; }
.mail-n { color: var(--ink3); font-size: 11.5px; margin-left: 4px; }
.f-watch { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-top: 8px; font-size: 14px; line-height: 1.55; }
.f-watch img.pt.mini { width: 40px; height: 40px; }
.f-watch em { font-style: normal; margin-left: auto; color: var(--pink); font-size: 12px; white-space: nowrap; }
.f-acts { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.f-acts .act { padding: 8px 13px; font-size: 13px; }
.act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 18px; border-radius: 99px; font-size: 14px; font-weight: 600; background: var(--glass2); border: 1px solid var(--line); backdrop-filter: blur(10px); transition: transform .15s, box-shadow .2s; white-space: nowrap; }
.act:hover { transform: translateY(-1px); }
.act.lantern { background: linear-gradient(135deg, #ff5f6d, #ffb347); color: #1d0f08; border: 0; box-shadow: 0 6px 22px rgba(255, 110, 80, .4); }
.act.note { background: #f6efdf; color: #2a2230; border: 0; }
.act.ghost { background: rgba(255, 255, 255, .07); }
.act.primary { background: var(--ink); color: #14121e; }
.lan { width: 13px; height: 17px; border-radius: 45%; background: radial-gradient(circle at 50% 40%, #fff3c4, var(--lc, #ff4b3a) 60%); box-shadow: 0 0 10px var(--lc, #ff4b3a); display: inline-block; position: relative; flex: none; }
.act.lantern .lan { --lc: #c3261a; }
.cast { display: flex; gap: 4px; padding: 6px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); margin: 0 auto; box-sizing: border-box; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.cast::-webkit-scrollbar { display: none; }
body.calm .cast button { flex: 0 0 auto; }
.cast button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 76px; padding: 6px 4px 5px; border-radius: 15px; transition: background .2s; }
.cast button:hover, .cast button.sel { background: color-mix(in srgb, var(--c) 20%, transparent); }
.cast button.sel { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent); }
.cast button img.pt { width: 44px; height: 44px; }
.cast button b { font-size: 13px; }
.cast button .st { font-size: 10.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cast button.away img { filter: grayscale(.7) brightness(.65); }
/* 七号雨巷简化双语：中文名后的英文名 / 关键剧情的英文小字——只在英文界面显示（中文界面隐藏）；作品内容仍标 data-content */
.en-name, .sub-en { display: none; }
html[lang="en"] .en-name { display: inline; margin-left: .38em; font-size: .82em; font-weight: 400; opacity: .72; letter-spacing: .01em; }
html[lang="en"] .sub-en { display: block; margin-top: 2px; font-size: .8em; font-weight: 400; font-style: normal; line-height: 1.35; opacity: .62; }
html[lang="en"] .cast button .en-name { display: block; margin: .5px 0 0; font-size: 10.5px; line-height: 1.15; opacity: .66; }
html[lang="en"] .tag .en-name { font-size: .8em; opacity: .66; }
/* 手机可点区 ≥44px：世界里的主要动作按钮与面板标签（密集的顶栏小胶囊是沉浸式设计，保持紧凑） */
@media (max-width: 899px) {
  .act { min-height: 44px; }
  .panel .tabs button { min-height: 44px; }
  .sheet-close { width: 44px; height: 44px; }
}
.badge { position: absolute; top: 3px; right: 12px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; font-style: normal; font-size: 11px; font-weight: 800; line-height: 17px; display: none; }
.badge.hot { display: block; background: var(--pink); color: #fff; box-shadow: 0 0 10px var(--pink); animation: pulse 1.6s infinite; }
.badge.mail { display: block; background: #f6efdf; color: #2a2230; }
@keyframes pulse { 50% { transform: scale(1.18); } }

.intro { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 1s; background: radial-gradient(ellipse at center, rgba(5, 6, 12, .55), rgba(5, 6, 12, 0) 70%); }
.intro.on { opacity: 1; }
.intro-in { text-align: center; padding: 20px; max-width: 560px; }
.intro .kicker { font-size: 11px; letter-spacing: .3em; color: var(--pink); }
.intro h1 { font-family: var(--serif); font-size: clamp(40px, 7vw, 76px); letter-spacing: .18em; margin: 10px 0 6px; text-shadow: 0 0 30px rgba(255, 95, 162, .5), 0 2px 0 rgba(0, 0, 0, .4); }
.intro .meta { color: var(--ink2); font-size: 14px; }
.intro .line { margin-top: 18px; font-size: 16px; line-height: 1.6; }
.loading { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 14px; background: #07080f; color: var(--ink2); transition: opacity .8s; font-size: 14px; }
.loading.done { opacity: 0; pointer-events: none; }
.rain-loader { width: 60px; height: 40px; background: repeating-linear-gradient(100deg, transparent 0 6px, rgba(160, 200, 255, .6) 6px 7px); background-size: 200% 200%; animation: rainl .5s linear infinite; mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
@keyframes rainl { to { background-position: 30px 60px; } }
.net { position: absolute; z-index: 8; left: 50%; top: 70px; transform: translateX(-50%); padding: 6px 14px; border-radius: 99px; background: #5a1a22; font-size: 12.5px; }

/* 右侧面板 */
.panel { display: flex; flex-direction: column; min-height: 0; background: linear-gradient(180deg, #0d1022, #090b17); border-left: 1px solid var(--line); }
.panel-grab { display: none; }
.tabs { display: flex; gap: 4px; padding: 14px 16px 0; }
.tabs button { padding: 9px 14px; border-radius: 12px 12px 0 0; color: var(--ink3); font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; position: relative; }
.tabs button.on { color: var(--ink); border-color: var(--pink); }
.tabs button i { position: absolute; top: 6px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.filter { display: flex; gap: 6px; padding: 10px 16px 6px; border-top: 1px solid var(--line); align-items: center; }
.filter button { font-size: 12px; padding: 4px 10px; border-radius: 99px; color: var(--ink3); border: 1px solid var(--line); }
.filter button.on { color: var(--ink); background: rgba(255, 255, 255, .08); }
.feed-who { margin-left: auto; }
.feed { flex: 1; overflow-y: auto; padding: 6px 12px 20px; scrollbar-width: thin; scrollbar-color: #2a2d45 transparent; }
.panel-foot { padding: 10px 16px calc(12px + var(--safe-b)); font-size: 11px; color: var(--ink3); border-top: 1px solid var(--line); line-height: 1.6; }
.empty { color: var(--ink3); font-size: 13.5px; line-height: 1.8; padding: 20px 6px; text-align: center; }

.ev { display: flex; gap: 10px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.ev.fresh { animation: fresh 2.4s ease-out; }
@keyframes fresh { from { background: rgba(255, 95, 162, .14); } to { background: transparent; } }
.ev-side { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; width: 28px; flex: none; align-items: center; }
.ev-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--ink2); font-size: 13px; flex: none; }
.ev-main { flex: 1; min-width: 0; }
.ev-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink3); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.src { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; border: 1px solid currentColor; opacity: .85; white-space: nowrap; }
.src-script { color: #ff9ecb; } .src-rule { color: #8fd3ff; } .src-viewer { color: #ffcf7a; } .src-system { color: #9a96ad; }
.ev h4 { font-size: 15px; font-family: var(--serif); margin: 2px 0 4px; color: #fff; letter-spacing: .03em; }
.ev .txt { font-size: 13.5px; line-height: 1.65; }
.ev.s3 { background: linear-gradient(90deg, rgba(255, 95, 162, .08), transparent 70%); border-left: 2px solid var(--pink); padding-left: 10px; }
.ev.s3 .txt { font-size: 14px; }
.ev.s0, .ev.s1 .txt { color: var(--ink2); }
.ev.k-talk .txt { display: none; }
.why { margin-top: 5px; font-size: 12.5px; line-height: 1.6; color: #a9b8d8; }
.why i, .then i { font-style: normal; font-size: 10.5px; padding: 0 5px; margin-right: 6px; border-radius: 4px; background: rgba(143, 211, 255, .14); color: #8fd3ff; }
.res { margin-top: 5px; font-size: 13px; line-height: 1.6; color: #ffd9a8; }
.res::before { content: "→ "; opacity: .6; }
.dlg { margin: 2px 0; display: flex; flex-direction: column; gap: 3px; }
.dlg p { font-size: 13.5px; line-height: 1.55; }
.dlg b { font-weight: 600; margin-right: 8px; font-size: 12px; }

/* 你的足迹：三步追踪 */
.tracker { display: flex; gap: 10px; padding: 14px 6px; border-bottom: 1px solid var(--line); }
.t-main { flex: 1; min-width: 0; }
.tracker h4 { font-size: 14px; line-height: 1.5; font-family: var(--serif); }
.tracker h4 small { display: block; font-family: var(--font); font-size: 11px; color: var(--ink3); font-weight: 400; }
.tracker ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.tracker li { display: flex; gap: 10px; position: relative; padding-bottom: 10px; }
.tracker li::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: rgba(255, 255, 255, .1); }
.tracker li:last-child::before { display: none; }
.tracker li > i { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; flex: none; border: 2px solid var(--ink3); }
.tracker li.ok > i { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 8px rgba(255, 179, 71, .6); }
.tracker li b { font-size: 12.5px; }
.tracker li.wait b { color: var(--ink3); font-weight: 500; }
.tracker li p { font-size: 12.5px; line-height: 1.6; color: var(--ink2); }
.tracker li p small { color: #a9b8d8; }
.t-look { font-size: 12px; padding: 5px 11px; border-radius: 99px; background: rgba(255, 255, 255, .08); }

/* 抽屉 */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: flex-end; }
.sheet[hidden] { display: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(3, 4, 10, .45); animation: fade .25s; }
.sheet-panel { position: relative; width: min(520px, 100%); height: 100%; background: linear-gradient(180deg, #121530, #0b0d1c); border-left: 1px solid var(--line); animation: slideIn .32s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; }
.sheet.char .sheet-scrim, .sheet.note .sheet-scrim, .sheet.lantern .sheet-scrim { background: rgba(3, 4, 10, .15); }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.sheet-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 22px; z-index: 2; }
.sheet-body { overflow-y: auto; padding: 24px 22px calc(28px + var(--safe-b)); flex: 1; }
.sheet-title { font-family: var(--serif); font-size: 24px; letter-spacing: .06em; margin-bottom: 8px; padding-right: 40px; }
.sheet-sub { color: var(--ink2); font-size: 13.5px; line-height: 1.75; margin-bottom: 18px; }
.sheet-sub b { color: var(--ink); }
.small { font-size: 12px; color: var(--ink3); line-height: 1.7; }
.card-head { display: flex; gap: 16px; align-items: center; padding: 6px 40px 18px 0; border-bottom: 1px solid var(--line); }
.card-head h3 { font-family: var(--serif); font-size: 28px; letter-spacing: .08em; }
.card-head h3 small { font-family: var(--font); font-size: 12.5px; color: var(--ink2); margin-left: 10px; letter-spacing: 0; font-weight: 400; }
.bio { font-size: 13.5px; line-height: 1.7; color: var(--ink2); margin-top: 6px; }
.card-grid { display: grid; gap: 4px; }
.card-grid section { padding: 16px 0 10px; border-bottom: 1px solid var(--line); }
.card-grid h5 { font-size: 11.5px; letter-spacing: .16em; color: var(--ink3); margin-bottom: 9px; }
.now-block .act-l { font-size: 17px; font-weight: 700; }
.now-block .act-l span { font-weight: 400; color: var(--ink2); font-size: 13px; }
.now-block .line { font-family: var(--serif); font-size: 16px; margin-top: 6px; color: #fff4dc; }
.meters { display: flex; gap: 18px; margin-top: 12px; }
.meters label { flex: 1; font-size: 12px; color: var(--ink3); display: flex; flex-direction: column; gap: 5px; }
.meters b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.meters i, .prog, .rels i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); position: relative; overflow: hidden; }
.meters i::after, .rels i::after { content: ""; position: absolute; inset: 0; width: var(--v); background: linear-gradient(90deg, var(--pink), var(--amber)); }
.prog { height: 7px; margin: 10px 0 7px; } .prog i { display: block; height: 100%; width: var(--v); background: linear-gradient(90deg, var(--teal), var(--yellow)); }
.desire { font-family: var(--serif); font-size: 17px; }
.fear { margin-top: 2px; }
.rels, .mem { list-style: none; padding: 0; margin: 0; }
.rels li { display: grid; grid-template-columns: 26px 54px 50px 1fr; grid-template-rows: auto 4px; align-items: center; gap: 2px 8px; padding: 6px 0; font-size: 13px; }
.rels li img { grid-row: span 2; }
.rels li i { grid-column: 2 / -1; height: 3px; }
.rels em { font-style: normal; color: var(--ink3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw { font-size: 11px; padding: 1px 6px; border-radius: 6px; text-align: center; }
.calm .rels li { grid-template-columns: 26px minmax(0, 1fr) max-content; grid-template-rows: auto auto 3px; gap: 4px 8px; }
.calm .rels li img { grid-column: 1; grid-row: 1 / 4; }
.calm .rels li > b { grid-column: 2; grid-row: 1; min-width: 0; }
.calm .rels li > .rw { grid-column: 3; grid-row: 1; }
.calm .rels li > em { grid-column: 2 / -1; grid-row: 2; white-space: normal; line-height: 1.4; }
.calm .rels li > i { grid-column: 2 / -1; grid-row: 3; }
.rw-hi { background: rgba(255, 95, 162, .18); color: #ffb3d4; } .rw-mid { background: rgba(143, 211, 255, .12); color: #a9d8ff; } .rw-lo { background: rgba(255, 80, 80, .16); color: #ff9c9c; }
.mem li { font-size: 13px; line-height: 1.6; padding: 5px 0 5px 12px; border-left: 2px solid rgba(255, 255, 255, .12); margin-bottom: 4px; }
.mem li.pos { border-color: rgba(255, 210, 63, .6); } .mem li.neg { border-color: rgba(127, 184, 255, .5); }
.mem li span { color: var(--ink3); font-size: 11px; margin-right: 8px; }
.mini-feed .ev { padding: 8px 0; } .mini-feed .ev-side { display: none; }
.card-acts { display: flex; gap: 10px; padding-top: 18px; flex-wrap: wrap; }
.card-acts .act { flex: 1; min-width: 150px; }
.card-loading { padding: 40px; text-align: center; color: var(--ink3); }

.lantern-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lantern-pick button { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); text-align: left; transition: background .2s, border-color .2s; }
.lantern-pick button:hover { background: color-mix(in srgb, var(--lc) 14%, transparent); border-color: color-mix(in srgb, var(--lc) 60%, transparent); }
.lantern-pick .lan { width: 20px; height: 26px; margin-bottom: 4px; }
.lantern-pick b { font-size: 14.5px; } .lantern-pick small { font-size: 11.5px; color: var(--ink3); line-height: 1.5; }
.note-honest { margin-top: 16px; }
.who-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.who-tabs button { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border-radius: 99px; border: 1px solid var(--line); font-size: 13px; }
.who-tabs button.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.who-ctx { font-size: 13px; color: var(--ink2); line-height: 1.7; margin-bottom: 12px; }
.note-opts { display: flex; flex-direction: column; gap: 8px; }
.note-opts button { text-align: left; padding: 14px 16px; border-radius: 12px; background: #f6efdf; color: #2a2230; font-family: var(--serif); font-size: 16px; box-shadow: 2px 3px 0 rgba(0, 0, 0, .25); transform: rotate(-.4deg); transition: transform .15s; }
.note-opts button:nth-child(2) { transform: rotate(.5deg); }
.note-opts button:hover { transform: rotate(0) translateY(-2px); }
.how { display: grid; gap: 14px; }
.how section { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.how h5 { margin-bottom: 8px; font-size: 14px; }
.how p { font-size: 13.5px; line-height: 1.75; color: var(--ink2); margin-top: 6px; }
.how b { color: var(--ink); }
.digest-mine { margin-bottom: 12px; border-radius: 14px; background: rgba(255, 179, 71, .06); padding: 4px 10px; border: 1px solid rgba(255, 179, 71, .2); }
.digest-mine h5, .digest-changes h5, .digest-key h5 { font-size: 12px; color: var(--ink3); margin: 10px 0 6px; letter-spacing: .1em; }
#digestGo { width: 100%; margin-top: 18px; }
.digest-changes { margin-bottom: 12px; padding: 4px 12px 10px; border-radius: 14px; background: rgba(77, 227, 212, .06); border: 1px solid rgba(77, 227, 212, .2); }
.digest-changes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.digest-changes li { display: grid; grid-template-columns: 26px 48px 1fr 14px 1fr; align-items: center; gap: 6px; font-size: 12.5px; }
.digest-changes .was { color: var(--ink3); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.2); }
.digest-changes .now { color: #aef5ec; }
.digest-changes i { font-style: normal; color: var(--ink3); }
.dk { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dk small { font-size: 11px; color: var(--ink3); display: block; }
.dk b { font-family: var(--serif); font-size: 15px; display: block; margin: 1px 0 2px; }
.dk p { font-size: 13.5px; line-height: 1.6; }

.toast { position: fixed; z-index: 30; left: 50%; bottom: 140px; transform: translate(-50%, 20px); max-width: min(560px, 92vw); padding: 12px 18px; border-radius: 14px; background: rgba(250, 246, 236, .96); color: #1c1a26; font-size: 14px; line-height: 1.6; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

body.portrait-mode .topbar, body.portrait-mode .hud, body.portrait-mode .panel, body.portrait-mode #labels, body.portrait-mode .intro, body.portrait-mode .caption, body.portrait-mode .echoes, body.portrait-mode .subtitle { display: none !important; }
body.portrait-mode { grid-template-columns: 1fr; }
body.shot .loading { display: none; }

/* 手机：舞台占满全屏，信息收进底部焦点卡；动态是抽屉 */
@media (max-width: 899px) {
  body.world { display: block; }
  #stageWrap { position: fixed; inset: 0; height: 100dvh; }
  .topbar { padding: 8px 10px 22px; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
  .back { width: 32px; height: 32px; font-size: 22px; }
  .ttl b { font-size: 17px; } .ttl span { font-size: 11px; }
  .chips { order: 3; width: 100%; gap: 5px; }
  .chip { padding: 4px 9px; font-size: 11.5px; }
  .chip.glow i { display: none; } .chip.glow b { width: 30px; }
  .top-r { gap: 5px; } .top-r .chip { padding: 6px 9px; }
  .feed-btn { display: inline-flex; }
  .how-btn { font-size: 0; width: 30px; justify-content: center; padding: 6px 0 !important; } .how-btn::before { content: "?"; font-size: 13px; }
  .caption { top: 92px; left: 8px; right: 8px; width: auto; }
  .cap-in { padding: 11px 12px; } .caption h3 { font-size: 17px; } .cap-t { font-size: 13px; } .cap-r { font-size: 12.5px; }
  .echoes { top: 92px; left: 8px; right: 8px; width: auto; transition: top .4s; }
  .caption.on ~ .echoes { top: 200px; }
  .echo { font-size: 12.5px; padding: 10px 28px 10px 10px; }
  .subtitle { left: 10px; right: 10px; bottom: calc(var(--hud-h, 190px) + 14px); font-size: 13px; }
  .hud { left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); flex-direction: column; align-items: stretch; gap: 6px; }
  .focus { width: auto; padding: 10px 12px; border-radius: 16px; }
  img.pt.f-pt { width: 32px; height: 32px; }
  .f-name b { font-size: 16px; } .f-name small { font-size: 11px; }
  .f-mini { padding: 5px 9px; font-size: 11.5px; }
  .f-now { margin-top: 6px; font-size: 13px; }
  .f-now q { display: inline; margin-left: 6px; font-size: 13px; }
  .f-say { display: inline; margin: 0 0 0 6px; } .f-say q { margin: 0; }
  .f-sit { font-size: 12.5px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .focus.open .f-sit { -webkit-line-clamp: unset; }
  .focus:not(.open) .receipts li:not(.h):not(:last-child) { display: none; }
  .receipts { padding: 6px 9px; font-size: 12px; margin-top: 6px; }
  .f-watch { font-size: 13px; margin-top: 6px; } .f-watch img.pt.mini { width: 34px; height: 34px; }
  .f-acts { margin-top: 8px; gap: 6px; flex-wrap: nowrap; }
  .f-acts .act { padding: 8px 10px; font-size: 12.5px; flex: 1 1 auto; min-width: 0; }
  .focus.overview .f-acts .act { flex: 1; }
  .cast { width: 100%; justify-content: space-between; padding: 4px; gap: 2px; border-radius: 16px; margin: 0; }
  .cast button { width: auto; flex: 1; padding: 4px 2px; gap: 1px; }
  .cast button img.pt { width: 36px; height: 36px; }
  .cast button b { font-size: 11px; }
  .cast button .st { display: none; }
  .badge { right: calc(50% - 26px); top: 0; }
  .panel { position: fixed; left: 0; right: 0; bottom: 0; height: 80svh; z-index: 15; border: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; transform: translateY(105%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); }
  body.panel-open .panel { transform: none; }
  .panel-grab { display: block; position: relative; height: 8px; }
  .panel-grab .sheet-close { top: 8px; }
  .tabs { padding-top: 12px; }
  .sheet { align-items: flex-end; }
  .sheet-panel { width: 100%; height: 86vh; height: 86svh; border-radius: 22px 22px 0 0; border: 0; border-top: 1px solid var(--line); animation: slideUp .32s cubic-bezier(.2, .8, .2, 1); }
  .sheet.char .sheet-panel { height: 78svh; } .sheet.note .sheet-panel, .sheet.lantern .sheet-panel { height: auto; max-height: 86svh; }
  @keyframes slideUp { from { transform: translateY(60px); opacity: 0; } }
  .sheet-body { padding: 20px 16px calc(24px + var(--safe-b)); }
  .card-head h3 { font-size: 24px; } .card-head img.pt.big { width: 68px; height: 68px; }
  .toast { bottom: auto; top: 96px; }
  .bubble { max-width: 170px; font-size: 12px; }
  .bubble[lang="en"] { max-width: min(210px, calc(100vw - 24px)); }
  .intro h1 { font-size: 44px; }
  .lantern-pick { grid-template-columns: 1fr 1fr; }
  .letterbox.on i { height: 4.5vh; }
}
@media (max-width: 360px) { .f-acts .act.ghost:not(.f-toggle) { display: none; } }

/* ───────── 发现页 ───────── */
body.discover { background: radial-gradient(1200px 600px at 70% -10%, #1d1438 0%, transparent 60%), var(--bg); }
.site { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(16px, 4vw, 48px); }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; font-weight: 800; font-size: 24px; letter-spacing: -.01em; }
.brand small { font-size: 12px; color: var(--ink2); font-weight: 500; letter-spacing: .1em; }
.logo { width: 22px; height: 26px; align-self: center; border-radius: 45%; background: radial-gradient(circle at 50% 40%, #fff3c4, #ff5a3c 62%); box-shadow: 0 0 18px #ff5a3c; }
.site nav { display: flex; gap: 22px; font-size: 14px; }
.site nav a { text-decoration: none; color: var(--ink2); }
.site nav a.on { color: var(--ink); }
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-img { position: absolute; inset: 0; background: #0a0b16 url(../img/cover-wide.jpg) center 40% / cover no-repeat; animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.1) translate(-1%, -1%); } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 7, 14, .9) 0%, rgba(6, 7, 14, .55) 38%, rgba(6, 7, 14, 0) 70%), linear-gradient(0deg, var(--bg) 0%, rgba(8, 10, 20, 0) 35%); }
.hero-in { position: relative; z-index: 2; padding: 0 clamp(18px, 5vw, 64px) clamp(56px, 10vh, 110px); max-width: 680px; }
.live { display: inline-flex; align-items: center; gap: 0; font-size: 13px; color: var(--ink2); padding: 6px 12px; border-radius: 99px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.live span { margin-left: 6px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #44ff88; box-shadow: 0 0 10px #44ff88; margin-right: 8px; animation: blink 1.6s infinite; }
.kicker { margin-top: 26px; font-size: 12px; letter-spacing: .32em; color: var(--pink); text-shadow: 0 0 12px rgba(255, 95, 162, .6); }
.hero h1 { font-family: var(--serif); font-size: clamp(56px, 9vw, 112px); letter-spacing: .14em; line-height: 1.05; margin: 10px 0 14px; text-shadow: 0 0 40px rgba(255, 95, 162, .35), 0 4px 0 rgba(0, 0, 0, .3); }
.tagline { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.8; color: #e9e1d2; }
.now-line { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 12px 16px; border-radius: 16px; background: rgba(12, 14, 28, .66); border: 1px solid rgba(255, 95, 162, .32); text-decoration: none; backdrop-filter: blur(10px); max-width: 560px; font-size: 15px; line-height: 1.6; }
.now-line:empty { display: none; }
.now-line i { font-style: normal; color: var(--pink); font-size: 12px; margin-right: 8px; letter-spacing: .1em; }
.now-line em { font-style: normal; margin-left: auto; color: var(--pink); font-size: 20px; }
.now-line img.pt.mini { width: 36px; height: 36px; }
.cta-row { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; border-radius: 99px; background: linear-gradient(135deg, #ff5f6d, #ffb347); color: #1d0f08; font-weight: 800; font-size: 17px; text-decoration: none; box-shadow: 0 10px 40px rgba(255, 110, 80, .45); transition: transform .2s, box-shadow .2s; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 14px 50px rgba(255, 110, 80, .6); }
.cta::after { content: "→"; }
.cta-sub { font-size: 13px; color: var(--ink3); }
.back-banner { position: absolute; z-index: 3; top: 76px; left: 50%; transform: translateX(-50%); }
.back-banner a { display: block; padding: 9px 16px; border-radius: 99px; background: rgba(255, 179, 71, .16); border: 1px solid rgba(255, 179, 71, .4); color: #ffd9a8; font-size: 13.5px; text-decoration: none; backdrop-filter: blur(8px); white-space: nowrap; }
.band { padding: clamp(40px, 7vw, 80px) clamp(16px, 5vw, 64px) 0; max-width: 1280px; margin: 0 auto; }
.band-head { margin-bottom: 22px; }
.band-head h2 { font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); letter-spacing: .06em; }
.band-head p { color: var(--ink2); margin-top: 8px; font-size: 14.5px; }
.watch-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.watch-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r); text-decoration: none; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, #11142a), #0c0e1c); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); transition: transform .2s; }
.watch-card:hover { transform: translateY(-3px); }
.watch-card img.pt { width: 52px; height: 52px; }
.watch-card b { font-size: 15px; } .watch-card p { font-size: 14px; line-height: 1.65; color: var(--ink2); margin-top: 4px; }
.people { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.person { text-decoration: none; padding: 20px 16px; border-radius: var(--r); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, #10132a), #0b0d1b); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; transition: transform .2s, border-color .2s; }
.person:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.person img.pt.big { width: 96px; height: 96px; margin-bottom: 8px; }
.person h4 { font-family: var(--serif); font-size: 21px; letter-spacing: .06em; }
.person h4 small { font-family: var(--font); font-size: 12px; color: var(--ink3); margin-left: 8px; letter-spacing: 0; font-weight: 400; }
.person .desire { font-size: 13px; line-height: 1.6; color: #efe6d6; min-height: 42px; }
.person .state { font-size: 12.5px; color: var(--ink2); display: flex; align-items: center; gap: 6px; }
.person .state .dot { background: #666; }
.person .bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); margin-top: 6px; overflow: hidden; }
.person .bar i { display: block; height: 100%; width: var(--v); background: linear-gradient(90deg, var(--c), #fff3); }
.split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.recent .ev { padding: 12px 0; } .recent .ev-side { width: 26px; }
.how-card { padding: 26px; border-radius: 20px; background: linear-gradient(160deg, #1a1433, #0e1022); border: 1px solid rgba(255, 95, 162, .22); }
.how-card h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 14px; }
.how-card ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.how-card li { font-size: 14px; line-height: 1.75; color: var(--ink2); padding-left: 38px; position: relative; counter-increment: s; }
.how-card li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(255, 95, 162, .2); color: var(--pink); }
.how-card li b { display: block; color: var(--ink); font-size: 15px; }
.how-card em { font-style: normal; color: #8fd3ff; }
.honest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.honest-grid > div { padding: 18px; border-radius: var(--r); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.honest-grid p { font-size: 13.5px; line-height: 1.75; color: var(--ink2); margin-top: 10px; }
.honest-grid b { color: var(--ink); }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.concept { position: relative; padding: 120px 20px 20px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); min-height: 240px; }
.concept span { position: absolute; top: 14px; left: 14px; font-size: 11px; padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .35); color: var(--ink2); }
.concept h4 { font-family: var(--serif); font-size: 21px; letter-spacing: .06em; position: relative; }
.concept p { font-size: 13.5px; line-height: 1.7; color: var(--ink2); margin-top: 6px; position: relative; }
.concept.c1 { background: radial-gradient(circle at 70% 25%, #f4efd9 0 34px, rgba(244, 239, 217, .15) 36px, transparent 90px), linear-gradient(180deg, #1b2140, #0c0e1c 70%); }
.concept.c2 { background: radial-gradient(ellipse at 30% 30%, rgba(255, 95, 162, .5), transparent 50%), radial-gradient(ellipse at 75% 35%, rgba(77, 227, 212, .35), transparent 45%), linear-gradient(180deg, #1e1030, #0c0e1c 70%); }
.concept.c3 { background: radial-gradient(ellipse at 50% 38%, rgba(255, 190, 120, .35), transparent 45%), repeating-linear-gradient(0deg, rgba(120, 170, 220, .12) 0 2px, transparent 2px 14px), linear-gradient(180deg, #13263a, #0c0e1c 70%); }
.center { text-align: center; margin-top: 14px; }
.site-foot { margin-top: 80px; padding: 26px; text-align: center; font-size: 12.5px; color: var(--ink3); border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .people { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .honest-grid { grid-template-columns: 1fr 1fr; } .split { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .site nav { gap: 14px; font-size: 13px; } .site nav .old { display: none; }
  .hero { min-height: 92svh; }
  .hero-img { background-image: url(../img/cover-tall.jpg); background-position: center 30%; }
  .hero-shade { background: linear-gradient(0deg, var(--bg) 8%, rgba(8, 10, 20, .75) 45%, rgba(8, 10, 20, .1) 75%); }
  .hero-in { padding-bottom: 36px; }
  .people { grid-template-columns: 1fr 1fr; gap: 10px; }
  .person { padding: 14px 12px; } .person img.pt.big { width: 72px; height: 72px; }
  .person h4 { font-size: 18px; } .person h4 small { display: block; margin: 2px 0 0; }
  .honest-grid, .more-grid { grid-template-columns: 1fr; }
  .concept { min-height: 180px; padding-top: 80px; }
  .back-banner { top: 64px; } .back-banner a { font-size: 12px; }
}

/* ───────── 设计说明页 ───────── */
body.review .site { position: static; }
.doc { max-width: 1040px; margin: 0 auto; padding: 20px clamp(16px, 4vw, 40px) 40px; }
.doc h1 { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 48px); letter-spacing: .04em; margin: 12px 0 16px; line-height: 1.3; }
.doc .kicker { margin-top: 10px; }
.doc .lead { font-size: 16.5px; line-height: 1.9; color: #e6ddcd; max-width: 820px; }
.doc section { margin-top: 48px; }
.doc h2 { font-family: var(--serif); font-size: 26px; margin-bottom: 16px; letter-spacing: .04em; }
.try { padding: 22px 26px; border-radius: 20px; background: linear-gradient(160deg, #1a1433, #0e1022); border: 1px solid rgba(255, 95, 162, .25); }
.try ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.try li { font-size: 15px; line-height: 1.75; color: var(--ink2); }
.try b { color: var(--ink); } .try em { font-style: normal; color: #8fd3ff; }
.shots { display: grid; gap: 14px; margin-bottom: 14px; }
.shots.two { grid-template-columns: 1fr 1fr; } .shots.three { grid-template-columns: repeat(3, 1fr); max-width: 820px; }
.shots figure { margin: 0; }
.shots img { width: 100%; display: block; border-radius: 14px; border: 1px solid var(--line); background: #0c0e1c; }
.shots figcaption { font-size: 12.5px; color: var(--ink3); margin-top: 7px; line-height: 1.6; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.cards > div { padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.cards h4 { font-size: 16px; margin-bottom: 8px; }
.cards p { font-size: 14px; line-height: 1.8; color: var(--ink2); }
.truth { width: 100%; border-collapse: collapse; font-size: 14px; }
.truth th, .truth td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.7; }
.truth th { color: var(--ink3); font-weight: 500; font-size: 12.5px; }
.truth td:first-child { white-space: nowrap; font-weight: 600; }
.truth td:nth-child(2) { white-space: nowrap; }
.truth td:last-child { color: var(--ink2); }
.plain { padding-left: 20px; color: var(--ink2); line-height: 1.9; font-size: 14.5px; }
@media (max-width: 700px) { .shots.two, .shots.three { grid-template-columns: 1fr; } .truth td:nth-child(2) { white-space: normal; } .truth td:first-child { white-space: normal; } }

/* ───────── 003：导播、看现场、弹幕、弹出面板、来源标签、回顾、牵挂 ───────── */
:root { --dm-h: 0px; --dm-top: 62px; }
.chip.live { color: #bfe9d9; background: rgba(40, 120, 90, .22); border-color: rgba(120, 230, 190, .28); cursor: default; }
.chip.live .dot { width: 7px; height: 7px; } .chip.live b { font-weight: 700; margin-right: -2px; }
.chip.dir.on { border-color: rgba(255, 95, 162, .6); background: rgba(160, 40, 100, .35); color: #ffd3e7; }
body.directing #stageWrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 0 0 0 2px rgba(255, 95, 162, .22); }
.caption, .echoes { transform-origin: top; }
.caption { top: calc(72px + var(--dm-h)); } .echoes { top: calc(72px + var(--dm-h)); }
.cap-go, .e-go { display: inline-block; margin-top: 8px; font-size: 12.5px; font-style: normal; font-weight: 700; color: #ffd3e7; padding: 4px 10px; border-radius: 99px; background: rgba(255, 95, 162, .2); border: 1px solid rgba(255, 95, 162, .45); }
.e-go { color: #8a2d5c; background: rgba(255, 95, 162, .12); }
.cap-k .srcs { margin-right: 6px; }
/* 看现场提示：顶部居中的一颗小胶囊，点了才动镜头 */
.fx-hint { position: absolute; z-index: 8; right: 24px; bottom: 160px; display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 14px; border-radius: 99px; background: rgba(20, 16, 40, .86); border: 1px solid rgba(255, 210, 120, .45); font-size: 13px; box-shadow: 0 8px 30px rgba(0, 0, 0, .4); animation: hintIn .4s cubic-bezier(.3, 1.4, .5, 1); backdrop-filter: blur(8px); }
.fx-hint em { font-style: normal; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: linear-gradient(90deg, #ff7a3d, #ffd23f); color: #2a1a10; }
@keyframes hintIn { from { opacity: 0; transform: translateY(8px); } }
/* 弹幕：顶栏下方的窄带 */
.danmaku { position: absolute; z-index: 4; left: 0; right: 0; top: var(--dm-top); height: var(--dm-h); overflow: hidden; pointer-events: none; }
.danmaku[data-mode="off"] { display: none; }
.dm { position: absolute; left: 0; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 4px; border-radius: 99px; background: rgba(8, 10, 20, .5); border: 1px solid rgba(255, 255, 255, .1); font-size: 13px; white-space: nowrap; color: #f5efe4; text-shadow: 0 1px 3px #000; will-change: transform; }
.dm.host { border-color: rgba(255, 210, 63, .55); background: rgba(60, 44, 8, .6); }
.dm.mine { border-color: rgba(143, 211, 255, .6); }
.dm-r { font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #d8d3e6; text-shadow: none; flex: none; }
.dm-r.host { background: #ffd23f; color: #2a2000; font-weight: 700; }
.dm-r.me { background: #8fd3ff; color: #06243a; font-weight: 700; }
/* 弹出面板 */
.pop { position: absolute; z-index: 12; top: 60px; right: 16px; width: min(340px, calc(100% - 20px)); padding: 14px; border-radius: 16px; background: var(--glass2); border: 1px solid var(--line); box-shadow: 0 16px 50px rgba(0, 0, 0, .5); backdrop-filter: blur(14px); font-size: 13px; }
.pop h5 { font-size: 15px; margin-bottom: 10px; } .pop h5 small { display: block; font-size: 11.5px; color: var(--ink3); font-weight: 400; margin-top: 2px; }
.pop h5 { padding-right: 42px; }
.pop-tools { position: sticky; top: 0; height: 0; z-index: 2; }
.pop-close { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 24px; color: var(--ink2); background: #16182ef5; }
.pop-close:hover, .pop-close:focus-visible { background: #ffffff12; color: var(--ink); }
.pop-note { font-size: 11.5px; line-height: 1.6; color: var(--ink3); margin-top: 10px; }
.pop-toggle { width: 100%; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-weight: 700; margin-bottom: 10px; }
.pop-toggle.on { background: rgba(40, 90, 140, .45); color: #cfe9ff; }
.pop-range { display: grid; grid-template-columns: 52px 1fr 30px; align-items: center; gap: 8px; margin: 6px 0; }
.pop-range input { width: 100%; accent-color: var(--amber); } .pop-range b { text-align: right; font-weight: 500; color: var(--ink2); font-size: 12px; }
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.seg button { flex: 1; padding: 6px; border-radius: 9px; font-size: 13px; }
.seg button.on { background: rgba(255, 179, 71, .3); color: #ffe3b8; font-weight: 700; }
.dm-send { display: flex; gap: 6px; margin-top: 10px; }
.dm-send input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--ink); font: inherit; }
.dm-send .act { padding: 8px 14px; }
.dm-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.dm-presets button { font-size: 12px; padding: 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); }
.host-acts { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255, 210, 63, .35); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.host-acts b { color: #ffd23f; font-size: 12px; margin-right: 4px; }
.host-acts button { font-size: 12px; padding: 5px 10px; border-radius: 99px; background: rgba(255, 210, 63, .14); border: 1px solid rgba(255, 210, 63, .4); }
.fixture-banner { position: absolute; z-index: 9; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 5px 12px; border-radius: 99px; background: #6a4a00; color: #fff3cc; font-size: 12px; white-space: nowrap; }
/* 来源标签 */
.srcs { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.src-host { color: #ffd23f; } .src-self { color: #b8f2c8; } .src-decl { color: #c9b8ff; } .src-cele { color: #ffb0d8; border-style: dashed; }
.src-more { margin-top: 4px; font-size: 11px; color: var(--ink3); padding: 1px 0; text-decoration: underline dotted; }
.srcx { display: none; list-style: none; margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: 12px; line-height: 1.6; color: var(--ink2); }
.srcx b { display: inline-block; min-width: 34px; color: var(--ink); font-size: 11px; margin-right: 6px; }
.ev.open .srcx { display: block; }
.k-surprise .txt { color: #ffe7c2; }
.k-declined .txt { color: #d9d0ff; }
/* 牵挂 */
.f-mini.care.on { background: rgba(255, 210, 63, .2); color: #ffe38a; }
.f-mini.f-back { background: rgba(255, 95, 162, .18); color: #ffd3e7; }
.cast button.cared::after { content: "★"; position: absolute; left: 6px; top: 2px; font-size: 11px; color: #ffd23f; text-shadow: 0 0 6px rgba(255, 210, 63, .8); }
/* 回顾（与实时画面区分：暖色纸面底 + "回顾"角标） */
.sheet.recap .sheet-panel { background: linear-gradient(180deg, #221a2e, #15101e); border-left-color: rgba(255, 179, 71, .25); }
.recap-badge { display: inline-block; font-size: 11px; letter-spacing: .12em; padding: 3px 10px; border-radius: 99px; background: rgba(255, 179, 71, .16); color: #ffd9a0; border: 1px solid rgba(255, 179, 71, .4); margin-bottom: 10px; }
.dg-sec { margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.dg-sec h5 { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); margin-bottom: 6px; letter-spacing: .06em; }
.dg-sec h5 span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(255, 179, 71, .22); color: #ffd9a0; }
.dg-empty { font-size: 13px; color: var(--ink2); line-height: 1.7; padding: 4px 0; }
.dg-sec .dk { position: relative; padding-right: 72px; }
.dg-go { position: absolute; right: 0; top: 10px; font-size: 12px; padding: 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, .08); white-space: nowrap; align-self: flex-start; flex: none; }
.dg-care { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 6px 70px 8px 0; }
.dg-care > b { font-family: var(--serif); }
.dg-kv { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink2); }
.dg-kv i { font-style: normal; display: inline-block; min-width: 46px; color: var(--ink3); font-size: 11.5px; }
.dg-kv .was { color: var(--ink3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); } .dg-kv .now { color: var(--ink); }
.dg-care .dg-go { top: 6px; } .dg-away { position: absolute; right: 0; top: 10px; font-size: 11.5px; color: var(--ink3); }
.dg-all { margin: 4px 0 14px; } .dg-all summary { cursor: pointer; font-size: 13px; color: var(--ink2); padding: 6px 0; }
.dg-acts { display: flex; gap: 8px; } .dg-acts .act { flex: 1; }
.tracker li.note-li > i { border-style: dashed; }
/* 弹幕列表 */
.chat-li { display: flex; gap: 8px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.chat-li span { flex: 1; word-break: break-all; } .chat-li small { color: var(--ink3); font-size: 11px; white-space: nowrap; }
@media (max-width: 899px) {
  :root { --dm-top: 90px; }
  .caption { top: calc(92px + var(--dm-h)); } .echoes { top: calc(92px + var(--dm-h)); }
  .caption.on ~ .echoes { top: calc(200px + var(--dm-h)); }
  .top-r .chip.live { padding: 6px 7px; font-size: 11px; gap: 3px; } .lv-l { display: none; }
  .ttl { min-width: 0; } .ttl b { white-space: nowrap; }
  body:not(.calm) :is(.dir, .dm-btn, .sound) { font-size: 0 !important; width: 32px; justify-content: center; padding: 6px 0 !important; }
  body:not(.calm) .dir::before { content: "▶"; font-size: 12px; } body:not(.calm) .dir.on::before { content: "■"; color: #ffd3e7; }
  body:not(.calm) .dm-btn::before { content: "评"; font-size: 12.5px; } body:not(.calm) .sound::before { content: "♪"; font-size: 13px; } body:not(.calm) .sound.on::before { color: #cfe9ff; }
  :root:lang(en) body:not(.calm) .dm-btn::before { content: "\1F4AC"; font-size: 13px; }
  .pop { top: 52px; right: 8px; left: 8px; width: auto; }
  .dm { height: 24px; font-size: 12px; }
  .fx-hint { font-size: 12.5px; max-width: calc(100% - 20px); right: 10px; bottom: calc(var(--hud-h, 190px) + 56px); }
  .dg-sec .dk { padding-right: 0; } .dg-go { position: static; display: inline-block; margin-top: 4px; }
  .dg-care { padding-right: 0; flex-wrap: wrap; } .dg-away { position: static; }
}
.recap-open { width: 100%; margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; text-align: left; font-size: 13px; background: rgba(255, 179, 71, .1); border: 1px solid rgba(255, 179, 71, .3); color: #ffd9a0; }
.dg-sec .dg-detail { display: none; margin-top: 6px; }
.dg-sec.open .dg-detail { display: block; }
.dg-more { margin-left: auto; font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .07); color: var(--ink2); letter-spacing: 0; }
.dg-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.dg-sum li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.5; min-width: 0; }
.dg-sum li small { flex: none; color: var(--ink3); font-size: 11px; }
.dg-sum li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--ink2); }
.dg-sum li b { color: var(--ink); }
.dg-sum1 { font-size: 13px; line-height: 1.65; color: var(--ink2); }
.dg-sum1 > b { margin-right: 6px; }
.dg-inl { font-size: 12px; padding: 2px 9px; border-radius: 99px; background: rgba(255, 255, 255, .09); color: var(--ink); margin-left: 4px; }
.dg-acts { align-items: stretch; } .dg-acts .act { margin: 0; justify-content: center; }
/* 900–1240 像素的小笔记本/窄桌面：右栏收窄，焦点卡和人物条收紧，保证五个人物与顶部控制都能点到 */
@media (min-width: 900px) and (max-width: 1240px) {
  body.world { grid-template-columns: 1fr 320px; }
  .focus { width: min(360px, 50%); }
  .cast { padding: 5px; gap: 2px; }
  .cast button { width: 54px; padding: 5px 2px 4px; }
  .cast button img.pt { width: 38px; height: 38px; }
  .cast button .st { display: none; }
  .cast button b { font-size: 12px; }
  .hud { flex-wrap: wrap; }
  .top-r { gap: 4px; } .top-r .chip { padding: 6px 8px; }
  .how-btn { font-size: 0; width: 30px; justify-content: center; padding: 6px 0 !important; } .how-btn::before { content: "?"; font-size: 13px; }
  .lv-l { display: none; }
  .chip.glow i { display: none; } .chip.glow b { width: 34px; }
  .subtitle { left: 390px; }
  .f-name b { white-space: nowrap; } .f-name small { display: none; } .f-chip { display: none; }
}
/* 焦点卡头部按钮多时换行，不互相压住（"回到 X"/全景） */
.f-head { flex-wrap: wrap; row-gap: 6px; }
.f-head .f-kicker { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-head .f-mini { flex: none; }

/* ───────── PRODUCT-001：作者头像、导演/支持入口、封面载入、预览条、支持面板、工作台 ───────── */
.author { pointer-events: auto; display: flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); text-decoration: none; font-size: 12.5px; color: var(--ink2); flex: none; }
.author span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #3b4b8f, #c2508f); color: #fff; font-size: 13px; font-weight: 700; flex: none; }
.chip.host-btn { border-color: rgba(255, 179, 71, .5); color: #ffd79a; }
.chip.support-btn { border-color: rgba(77, 227, 212, .45); color: #9ff3ea; }
.loading.cover { background: linear-gradient(rgba(7, 8, 15, .55), rgba(7, 8, 15, .8)), url(../img/cover-wide.jpg) center / cover no-repeat, #07080f; color: var(--ink); }
.preview-banner { background: #1c3f73; color: #dbe9ff; top: 64px; bottom: auto; white-space: normal; max-width: 90%; text-align: center; }
.notice { background: rgba(255, 179, 71, .12); border: 1px solid rgba(255, 179, 71, .35); color: #ffd79a; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.55; }
.sheet .split { font-size: 15px; line-height: 1.6; }
.sheet .split small { display: block; color: var(--ink3); font-size: 12px; }
.sheet input[type=number] { width: 120px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--ink); font: inherit; }
.profile-note { color: var(--ink3); }
.badge-na { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: var(--ink2); margin-right: 6px; vertical-align: 1px; }
.editor { display: none; }
body.creating { grid-template-columns: 1fr 400px; }
body.creating #panel { display: none; }
body.creating .editor { display: block; grid-column: 2; grid-row: 1; min-height: 0; overflow-y: auto; background: linear-gradient(180deg, #0d1022, #090b17); border-left: 1px solid var(--line); padding: 14px 16px 40px; font-size: 13.5px; }
body.creating .f-acts .lantern, body.creating .f-acts .note, body.creating #dmBtn, body.creating #feedBtn { display: none; }
.ed-head { display: flex; justify-content: space-between; font-size: 13px; }
.ed-head a { color: var(--ink2); text-decoration: none; }
.ed-title { font-family: var(--serif); font-size: 22px; margin: 10px 0 4px; }
.ed-status { color: var(--ink2); font-size: 12.5px; line-height: 1.6; margin: 0 0 10px; }
.ed-status .warn, .warn { color: #ffb86b; }
.ed-pv { background: rgba(47, 91, 211, .2); border: 1px solid rgba(120, 160, 255, .35); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.55; }
.ed-actions { display: flex; gap: 8px; margin: 8px 0; }
.ed-actions .act { flex: 1; }
.act:disabled { opacity: .45; cursor: default; }
.ed-hint { color: var(--ink3); font-size: 11.5px; line-height: 1.55; margin: 0 0 8px; }
.ed-sec { border-top: 1px solid var(--line); padding: 12px 0 6px; }
.ed-sec h4 { margin: 0 0 10px; font-size: 14px; }
.ed-sec h4 small { color: var(--ink3); font-weight: 400; font-size: 11.5px; }
.ed-sec label { display: grid; gap: 4px; margin-bottom: 10px; color: var(--ink2); font-size: 12.5px; }
.ed-sec label.ck { display: flex; align-items: center; gap: 8px; }
.ed-sec label small, .ed-note { color: var(--ink3); font-size: 11px; }
.ed-sec input:not([type=checkbox]):not([type=radio]), .ed-sec textarea, .ed-sec select { width: 100%; font: inherit; font-size: 13.5px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--ink); }
.ed-sec input[type=color] { height: 34px; padding: 2px; }
.ed-sec select option { background: #14172b; }
.ed-char { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.ed-char summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ed-char summary i { width: 12px; height: 12px; border-radius: 50%; }
.ed-char summary small { margin-left: auto; color: var(--ink3); }
.ed-char[open] summary { margin-bottom: 8px; }
.ed-versions { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.ed-versions li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 9px; background: rgba(255, 255, 255, .04); font-size: 12.5px; }
.ed-versions li.cur { outline: 1px solid rgba(77, 227, 212, .45); }
.ed-versions small { color: var(--ink3); flex-basis: 100%; }
.ed-versions em { font-style: normal; color: #9ff3ea; margin-left: auto; }
.vb { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: rgba(255, 184, 107, .15); color: #ffcf99; }
.vb.ok { background: rgba(77, 227, 212, .15); color: #9ff3ea; }
.act.sm { padding: 4px 9px; font-size: 12px; margin-left: auto; }
.ed-intents { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: 12.5px; }
.ed-intents small { display: block; color: var(--ink3); }
.ed-err { color: #ffb86b; }
@media (max-width: 899px) {
  body.creating .editor { position: fixed; left: 0; right: 0; bottom: 0; height: 52vh; z-index: 15; border-left: 0; border-top: 1px solid var(--line); }
  .author > span:not(.av) { display: none; }
}
.chip.follow-btn.on { border-color: rgba(255, 210, 63, .55); color: #ffe38a; }
@media (max-width: 1600px) { .top-r { gap: 6px; } .top-r .chip { padding: 6px 9px; } }
/* 英文版底座：页头左侧多了语言按钮，1241–1400 宽（舞台约 860–1020）右侧按钮组再紧一点，「说明」不被面板切掉 */
@media (min-width: 1241px) and (max-width: 1400px) { .top-r { gap: 4px; } .top-r .chip { padding: 6px 7px; } }
@media (min-width: 900px) and (max-width: 1360px) { body.world .ttl span { font-size: 11px; } .topbar .author > span:not(.av) { display: none; } .topbar .author { padding-right: 3px; } }

/* B4：恢复与天亮的独立表现 */
.recover-tag{position:fixed;left:50%;top:calc(var(--top-h,56px) + 10px);transform:translate(-50%,-6px);z-index:30;margin:0;padding:5px 12px;border-radius:999px;font-size:12px;letter-spacing:.02em;color:#dfe8f2;background:rgba(18,22,34,.78);border:1px solid rgba(160,190,230,.28);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.recover-tag.on{opacity:1;transform:translate(-50%,0)}
.night-card{position:fixed;inset:0;z-index:29;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;background:radial-gradient(ellipse at center,rgba(6,8,16,.62),rgba(6,8,16,.2) 70%);opacity:0;transition:opacity .7s}
.night-card.on{opacity:1}
.night-card b{font-size:30px;font-weight:700;color:#f3ead8;letter-spacing:.12em;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.night-card span{font-size:13px;color:#c9cfdc;letter-spacing:.08em}

/* B5：说明里的操作表 */
.how-keys{width:100%;border-collapse:collapse;margin:4px 0 14px;font-size:13px}
.how-keys th,.how-keys td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}
.how-keys th{color:#9aa4b8;font-weight:600;font-size:12px}
.how-keys td:first-child{color:#cfd6e4;white-space:nowrap;width:5.5em}

/* B1：支持面板 */
.sup-steps{margin:8px 0 10px;padding-left:1.3em;display:flex;flex-direction:column;gap:12px;font-size:14px}
.sup-steps small{color:#9aa4b8;line-height:1.5}
.sup-amts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.sup-amts .chip.on{background:#ff7aa8;color:#1a0f18;border-color:#ff7aa8}
.sup-amts input{width:6em;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:inherit}
.sup-split{width:100%;border-collapse:collapse;margin:6px 0;font-size:13px}
.sup-split td{padding:5px 6px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
.sup-split tr.sum td{border-bottom:none}
.sup-split code{font-size:12px}

.ed-bal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 10px}
.ed-bal div{background:rgba(255,255,255,.05);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.ed-bal small{color:#9aa4b8;font-size:11px}.ed-bal b{font-size:18px}
.ed-ledger{font-size:12px}.ed-ledger code{font-size:11px}
.ed-spend{display:flex;flex-wrap:wrap;gap:6px;align-items:end;margin-top:8px}.ed-spend input{padding:5px 7px}

.dg-times{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;font-size:11px;color:#c9d2e6;background:rgba(255,255,255,.08)}

/* B3：共享参与进度 */
.part-sec{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;margin:10px 0}
.part-sec h5{margin:0 0 6px;font-size:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.part-sec em.off,.part-sec .off{font-style:normal;font-size:12px;color:#ffb3a1}
.prow{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0}.prow>span:first-child{width:3em;color:#9aa4b8}
.pbar{flex:1;max-width:220px;height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}.pbar i{display:block;height:100%;background:linear-gradient(90deg,#ff8a3d,#ff4d8d)}
.prow .me{color:#ffd27a}
.prow2{border-top:1px solid rgba(255,255,255,.06);padding:6px 0;display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center}.prow2 p{grid-column:1/2;margin:0;font-size:13px}.prow2 button{grid-row:1/3;grid-column:2}

.pop-layers{display:flex;gap:12px;margin:6px 0 2px;font-size:13px}.pop-layers label{display:flex;gap:4px;align-items:center}

/* B7：手机窄屏时右侧的按钮组可以横向滑动（不再有被切掉的按钮），右缘淡出提示还能滑 */
@media (max-width: 520px) {
  .top-r { min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 18px; }
  .top-r::-webkit-scrollbar { display: none; }
  .top-r .chip { flex: none; }
}
/* 电脑（舞台 + 右侧面板）：页头只占舞台那一栏。一行放不下时（英文按钮更长，或登录后按钮更多），右侧按钮组整组换到第二行、靠右；
   第二行还放不下就在组内再换行。按钮不再伸到右侧面板下面。页头多出来的高度 --tb-x 由 common.mjs watchStageLayout 量出，
   弹幕带、剧情字幕卡、回响、弹出面板、预览条一起往下让。
   字幕：放在人物条上方（--cast-h 是人物条顶端到舞台底的距离），整句不被人物条压住 */
@media (min-width: 900px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .chips { flex: 1 1 0; min-width: min-content; }   /* 天气/电/灯光小标签先在第一行里收窄换行，按钮组真放不下才去第二行（中文多数宽度仍是一行） */
  .top-r { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; min-width: 0; max-width: 100%; }
  .top-r .chip { flex: none; }
  .danmaku { top: calc(var(--dm-top) + var(--tb-x, 0px)); }
  .caption, .echoes { top: calc(72px + var(--dm-h) + var(--tb-x, 0px)); }
  .pop { top: calc(60px + var(--tb-x, 0px)); }
  .preview-banner { top: calc(64px + var(--tb-x, 0px)); }
  .subtitle { bottom: calc(var(--cast-h, 124px) + 10px); }
  /* 小提示（第一次来的镜头操作说明、牵挂/点灯等回执）：摆在字幕上方，不盖住字幕（--sub-h 是字幕当前内容的高度，没字幕时为 0） */
  body.world .toast { bottom: calc(var(--cast-h, 124px) + 22px + var(--sub-h, 0px)); }
}

/* ───────── worldspec 作品页（body.ws）：人物没有画像，用作品颜色的首字圆标；渲染失败提示与网络提示分开 ───────── */
.ws-av{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c,#888);color:#10131c;font-weight:800;font-size:15px;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 0 12px color-mix(in srgb,var(--c,#888) 55%,transparent);flex:none}
.ws-av.mini{width:24px;height:24px;font-size:12px}
.ws-av.f-pt{width:44px;height:44px;font-size:19px}
body.ws .cast button .ws-av{margin:0 auto 2px}
.render-fail{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:30;max-width:min(92vw,560px);background:rgba(60,40,20,.92);color:#ffe9c8;border:1px solid rgba(255,200,120,.45);border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.5;text-align:center}
body.no3d #stageWrap{background:radial-gradient(ellipse at 50% 30%,#1a2440,#070a14)}
.ws-spec{width:100%;min-height:260px;font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;background:#0b0e18;color:#cfe0ff;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:8px;box-sizing:border-box;resize:vertical}
.ed-err ul{margin:6px 0 0;padding-left:18px;max-height:220px;overflow:auto}
.ed-err code,.ed-status code,.ed-versions code{font-size:11px;opacity:.85}

/* ───── A2 · 对话工作台（worldspec）───── */
body.creating.ws { grid-template-columns: 1fr 440px; }
.editor.wb { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.blank-stage { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 8px; padding: 40px; color: var(--ink2); background: radial-gradient(ellipse at 50% 40%, #1a2146, #080a16 70%); }
.blank-stage b { font-family: var(--serif); font-size: 26px; color: var(--ink); }
.blank-stage p { max-width: 420px; line-height: 1.7; margin: 0 auto; }
.cx-channel { margin: 0; font-size: 12px; color: var(--ink2); line-height: 1.55; background: rgba(255,255,255,.04); border-radius: 9px; padding: 6px 9px; }
.cx-channel b { color: var(--ink); margin-right: 6px; }
.cx-channel.off { background: rgba(255, 170, 90, .12); border: 1px solid rgba(255, 170, 90, .35); }
.insp-ch { margin: 0; font-size: 12px; color: var(--ink2); line-height: 1.55; background: rgba(255,255,255,.04); border-radius: 9px; padding: 6px 9px; }
.insp-ch b { color: var(--ink); margin-right: 6px; }
.insp-ch.off { background: rgba(255, 170, 90, .12); border: 1px solid rgba(255, 170, 90, .35); }
.cx-channel em { font-style: normal; color: #9ff3ea; }
.cx-usage { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--ink3); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.cx-usage b { color: var(--ink2); font-weight: 600; }
.cx-usage small { flex-basis: 100%; font-size: 10.5px; }
.cx-log { flex: 1 1 auto; min-height: 220px; max-height: 58vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.msg { max-width: 92%; border-radius: 12px; padding: 8px 11px; font-size: 13.5px; line-height: 1.6; }
.msg p { margin: 0; white-space: pre-wrap; }
.msg small { display: block; color: var(--ink3); font-size: 10.5px; margin-top: 4px; }
.msg.me { align-self: flex-end; background: rgba(77, 140, 255, .22); }
.msg.me.unsent { opacity: .7; outline: 1px dashed rgba(255,255,255,.3); }
.msg.ai { align-self: flex-start; background: rgba(255,255,255,.06); }
.msg .qs { margin: 6px 0 0; padding-left: 18px; color: #ffe2a8; }
.linkish { background: none; border: 0; color: #9fc3ff; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.plan-card { margin-top: 8px; border: 1px solid rgba(120, 200, 255, .35); background: rgba(20, 40, 80, .45); border-radius: 11px; padding: 9px 11px; }
.plan-card.stale { opacity: .6; }
.plan-card .pc-h { display: flex; flex-direction: column; margin-bottom: 4px; }
.plan-card .pc-h small { color: var(--ink3); }
.plan-card h5 { margin: 8px 0 2px; font-size: 12px; color: #9fd8ff; }
.plan-card ul { margin: 0; padding-left: 18px; font-size: 12.5px; }
.plan-card .unc { color: var(--ink3); font-size: 11.5px; }
.plan-card .rough { font-style: normal; font-size: 10.5px; border: 1px solid rgba(255,200,120,.5); color: #ffd08a; border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.plan-card .pc-budget { font-size: 11px; color: var(--ink3); line-height: 1.5; margin: 8px 0; }
.plan-card .pc-go { width: 100%; }
.task-card { border: 1px solid var(--line); border-radius: 11px; padding: 8px 10px; background: rgba(255,255,255,.03); font-size: 12.5px; }
.task-card.s-failed, .task-card.s-rejected { border-color: rgba(255, 120, 100, .45); }
.task-card.s-paused, .task-card.s-stopping { border-color: rgba(255, 200, 120, .45); }
.task-card.s-done.k-build { border-color: rgba(77, 227, 212, .45); }
.tk-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.tk-h small { flex-basis: 100%; color: var(--ink3); font-size: 10.5px; }
.tk-st { font-size: 11px; padding: 0 6px; border-radius: 6px; background: rgba(255,255,255,.08); }
.stages { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 3px; }
.stages li { display: grid; grid-template-columns: 16px auto; gap: 0 6px; }
.stages li small { grid-column: 2; color: var(--ink3); font-size: 11px; }
.stages .st-active i { color: #9fd8ff; animation: pulse 1.2s infinite; }
.stages .st-done i { color: #6fe3b0; }
.stages .st-failed i { color: #ff8a7a; }
.stages .st-paused i, .stages .st-stopped i { color: #ffd08a; }
@keyframes pulse { 50% { opacity: .35; } }
.tk-err { color: #ffb86b; margin: 4px 0; }
.tk-errs ul { margin: 4px 0; padding-left: 16px; font-size: 11px; }
.tk-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cx-apply { border-top: 1px solid var(--line); padding-top: 6px; }
.cx-apply p { margin: 0 0 4px; }
.cx-input { display: flex; gap: 6px; align-items: flex-end; }
.cx-input textarea { flex: 1; font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--ink); resize: vertical; min-height: 44px; }
.adv summary { cursor: pointer; color: var(--ink2); font-size: 12.5px; }
.adv h5 { margin: 10px 0 4px; }
.ed-cands { font-size: 11.5px; color: var(--ink3); padding-left: 16px; }
.small.ok, .ok { color: #6fe3b0; }
@media (max-width: 899px) { body.creating.ws .editor.wb { height: 62vh; } .cx-log { max-height: none; } }
body.blank .chips, body.blank #clock, body.blank #hud, body.blank #howBtn { display: none; }

/* A2C：设置变更提案（模型改了支持/参与设置，未生效）；通道行里的信任说明 */
.cx-proposal{border:1px solid rgba(217,179,108,.55);background:rgba(217,179,108,.08);padding:8px 10px;border-radius:8px;margin:8px 0}
.cx-proposal .small{margin:2px 0}
.cx-channel small.muted{display:block;margin-top:2px}

/* ───── B1/B2：可收起工作台（四个分页）· 宽屏三栏（世界 / 动态 / 对话）· 手机底部"创作"面板 ───── */
body.creating.ws { grid-template-columns: 1fr 440px; }
body.creating.ws #panel { display: none; }
body.creating.ws.feed-col { grid-template-columns: 1fr 300px 420px; }
body.creating.ws:not(.feed-col) { grid-template-columns: 1fr 420px; }
body.creating.ws.feed-col #panel { display: flex; grid-column: 2; grid-row: 1; }
body.creating.ws .editor.wb { grid-column: 2; grid-row: 1; }
body.creating.ws.feed-col .editor.wb { grid-column: 3; }
body.creating.ws.wb-collapsed:not(.feed-col) { grid-template-columns: 1fr; }
body.creating.ws.wb-collapsed.feed-col { grid-template-columns: 1fr 300px; }
body.creating.ws.wb-collapsed .editor.wb { display: none; }
body.creating.ws #feedBtn { display: inline-flex; }
body.creating #panel .tabs [data-tab="chat"], body.creating #panel .tabs [data-tab="mine"], body.creating #panel .panel-foot { display: none; }
body.world.panel-closed:not(.creating) { grid-template-columns: 1fr; }
body.world.panel-closed:not(.creating) #panel { display: none; }
body.creating .editor.wb { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.wb-top { flex: none; padding: 12px 14px 0; }
.wb-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.wb-head a { color: var(--ink2); text-decoration: none; white-space: nowrap; }
.wb-ttl { flex: 1; min-width: 0; font-family: var(--serif); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-fold { flex: none; font-size: 12px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink2); background: rgba(255,255,255,.05); }
.wb-fold:hover { color: var(--ink); border-color: rgba(160,190,255,.5); }
.wb-tabs { display: flex; gap: 2px; margin-top: 8px; border-bottom: 1px solid var(--line); }
.wb-tabs button { padding: 7px 12px 8px; font-size: 13.5px; color: var(--ink3); border-bottom: 2px solid transparent; position: relative; font-weight: 600; }
.wb-tabs button.on { color: var(--ink); border-color: #7aa0ff; }
.wb-tabs button i { position: absolute; top: 5px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.wb-notices:empty { display: none; }
.wb-notice { margin: 6px 0 0; font-size: 12px; line-height: 1.5; padding: 6px 9px; border-radius: 9px; }
.wb-notice b { display: inline-block; margin-right: 7px; font-size: 10.5px; padding: 0 6px; border-radius: 5px; color: #fff; letter-spacing: .05em; }
.wb-notice.net { background: rgba(120, 20, 30, .5); border: 1px solid rgba(255, 110, 120, .55); color: #ffd6da; }
.wb-notice.net b { background: #c0404c; }
.wb-notice.model { background: rgba(255, 255, 255, .04); border: 1px dashed rgba(180, 170, 255, .35); color: var(--ink2); }
.wb-notice.model.hard { background: rgba(90, 50, 150, .35); border: 1px solid rgba(190, 150, 255, .6); color: #eadcff; }
.wb-notice.model b { background: #6c50b0; }
.wb-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 14px 14px; }
.wb-pane[data-pane="chat"] { display: flex; flex-direction: column; gap: 8px; overflow: hidden; padding-bottom: 10px; }
.wb-pane[data-pane="chat"][hidden] { display: none; }
.wb-pane .ed-status { margin: 0 0 4px; }
.cx-log { flex: 1 1 auto; min-height: 120px; max-height: none; }
#cxExtra { flex: none; max-height: 34%; overflow-y: auto; }
#cxExtra:empty { display: none; }
.cx-dock { flex: none; }
.cx-stage { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; font-size: 11.5px; color: var(--ink2); }
.cx-stage i { width: 7px; height: 7px; border-radius: 50%; background: #555a75; flex: none; }
.cx-stage i.on { background: #9fd8ff; box-shadow: 0 0 8px #9fd8ff; animation: pulse 1.2s infinite; }
.cx-usage .linkish { font-size: 11px; }
.wb-open { display: none; }
body.creating.wb-collapsed .wb-open { display: flex; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 12; flex-direction: column; align-items: center; gap: 8px; padding: 16px 9px; background: linear-gradient(180deg, #2b3576, #1a1f48); border: 1px solid rgba(140, 170, 255, .55); border-right: 0; border-radius: 14px 0 0 14px; color: #fff; box-shadow: -6px 0 26px rgba(0, 0, 0, .45); }
body.creating.wb-collapsed.feed-col .wb-open { right: 300px; }
.wb-open b { writing-mode: vertical-rl; font-size: 15px; letter-spacing: .25em; }
.wb-open::before { content: "‹"; font-size: 22px; line-height: 1; color: #cfd8ff; }
body.creating.wb-collapsed .wb-open { padding: 14px 11px; cursor: pointer; }
body.creating.wb-collapsed .wb-open:hover { background: linear-gradient(180deg, #34409a, #20265a); }
.wb-open-stage { writing-mode: vertical-rl; font-size: 11.5px; max-height: 38vh; overflow: hidden; color: #cdd6ff; }
.wb-open.busy b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: #9fd8ff; animation: pulse 1.2s infinite; }
.stage-badge.live { border-color: rgba(77, 227, 212, .55); color: #b8f5ee; }
.stage-badge.draft { border-color: rgba(255, 190, 110, .55); color: #ffd9a8; }
.preview-banner.ended { background: #5a3a14; color: #ffe2b8; }
.preview-banner a { color: #fff; }
.wb-h { font-size: 15px; margin: 4px 0 8px; } .wb-h small { color: var(--ink3); font-weight: 400; font-size: 11.5px; margin-left: 6px; }
.wb-h2 { font-size: 13px; margin: 14px 0 6px; color: var(--ink2); }
.wb .tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0; }
.wb .tbl th, .wb .tbl td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.wb .tbl th { color: var(--ink3); font-weight: 600; font-size: 11.5px; }
.wb .rough { font-style: normal; font-size: 10.5px; border: 1px solid rgba(255,200,120,.5); color: #ffd08a; border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.u-box { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; margin: 8px 0; }
.u-box h4 { font-size: 13px; margin: 0 0 6px; }
.u-box.sub { border-color: rgba(120, 170, 255, .35); }
.u-box p { margin: 4px 0; line-height: 1.55; }
.u-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 6px; }
.u-grid div { background: rgba(255,255,255,.05); border-radius: 9px; padding: 6px 8px; display: flex; flex-direction: column; }
.u-grid small { color: var(--ink3); font-size: 10.5px; } .u-grid b { font-size: 17px; } .u-grid em { font-style: normal; font-size: 10.5px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-list { padding-left: 16px; line-height: 1.7; }
.insp-form fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px 8px; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.insp-form legend { font-size: 12px; color: var(--ink2); padding: 0 4px; }
.insp-form .ck { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink2); }
.insp-form .ck.big { font-size: 13px; color: var(--ink); flex-wrap: wrap; }
.insp-form .ck small { color: var(--ink3); font-size: 11px; }
.insp-form .ck.na { opacity: .75; }
.na-tag { font-size: 10.5px; padding: 0 6px; border-radius: 6px; background: rgba(255,255,255,.12); color: #ffd08a; }
.insp-row { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; color: var(--ink2); margin: 6px 0; }
.insp-row label { display: flex; align-items: center; gap: 5px; }
.insp-row select { font: inherit; font-size: 12.5px; padding: 3px 6px; border-radius: 7px; border: 1px solid var(--line); background: #14172b; color: var(--ink); }
.insp-state { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; font-size: 12.5px; }
.insp-state b { margin-right: 8px; }
.insp-report { border: 1px solid rgba(120, 200, 255, .3); border-radius: 11px; padding: 8px 10px; margin: 10px 0; background: rgba(20, 40, 80, .3); font-size: 12.5px; }
.insp-report header small { display: block; color: var(--ink3); font-size: 11px; }
.insp-man summary { cursor: pointer; color: var(--ink2); font-size: 12px; margin: 6px 0; }
.insp-man ul { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 3px; font-size: 11.5px; }
.insp-man li b { display: inline-block; min-width: 7.5em; color: var(--ink2); font-weight: 600; }
.insp-man li.m-not_collected, .insp-man li.m-not_observed { color: #ffcf99; }
.insp-man li small { color: var(--ink3); }
.insp-prop { border-top: 1px dashed var(--line); padding: 7px 0 3px; }
.insp-prop p { margin: 2px 0; line-height: 1.55; }
.insp-prop p > b { display: inline-block; min-width: 4.8em; color: #9fd8ff; font-weight: 600; font-size: 11.5px; }
.ev-refs code { font-size: 11px; padding: 0 5px; border-radius: 5px; background: rgba(255,255,255,.08); margin-right: 3px; }
.msg.from-insp { border: 1px solid rgba(120,200,255,.3); }
@media (max-width: 899px) {
  body.creating.ws .editor.wb { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 88svh; z-index: 16; border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.55); transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility .3s; }
  body.creating.ws.wb-collapsed .editor.wb { display: flex; transform: translateY(105%); visibility: hidden; }
  /* 预览页手机端："动态"打开底部动态面板（宽屏是第二栏 feed-col；手机上原来一直 display:none，点了没反应） */
  body.creating.ws.panel-open #panel { display: flex; }
  /* 观众页手机端同理：窄屏默认带 panel-closed（桌面右栏收起），"动态"加的 panel-open 要能把底部抽屉打开 */
  body.world.panel-closed.panel-open:not(.creating) #panel { display: flex; }
  body.creating.wb-collapsed .wb-open { top: auto; bottom: calc(8px + var(--safe-b)); left: 8px; right: 8px; transform: none; flex-direction: row; justify-content: flex-start; padding: 11px 14px; border: 1px solid rgba(140,170,255,.55); border-radius: 16px; gap: 10px; touch-action: pan-y; }
  body.creating.wb-collapsed.feed-col .wb-open { right: 8px; }
  .wb-open b, .wb-open-stage { writing-mode: horizontal-tb; }
  .wb-open b { font-size: 15px; letter-spacing: .1em; } .wb-open::before { content: "▴"; font-size: 15px; }
  .wb-open-stage { max-height: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; }
  .wb-open::after { content: "‹ 滑动切换作品 ›"; font-size: 10px; color: #8f9bd0; white-space: nowrap; }
  :root:lang(en) .wb-open::after { content: "‹ swipe to switch works ›"; }
  body.creating .hud { bottom: calc(66px + var(--safe-b)); }
  body.creating .subtitle { bottom: calc(var(--hud-h, 190px) + 70px); }
  body.creating.wb-expanded .hud, body.creating.wb-expanded .subtitle { visibility: hidden; }
  .wb-top { padding-top: 10px; }
  .wb-fold { font-size: 0; width: 34px; height: 30px; padding: 0; } .wb-fold::before { content: "▾"; font-size: 15px; }
  .cx-input textarea { font-size: 16px; }
  /* 键盘弹出：面板贴住可见区域；只留提示、对话、当前阶段、输入与发送 */
  /* iOS：可见区域缩小（visualViewport）→ wb-kb；Android：布局视口本身缩小 → 输入框聚焦（wb-typing）或矮屏同样进入紧凑模式 */
  body.wb-kb.creating.ws .editor.wb { top: var(--vvtop, 0px); bottom: auto; height: var(--vvh, 60svh); border-radius: 0; }
  body.wb-kb .wb-head, body.wb-kb .wb-tabs, body.wb-kb .wb-status, body.wb-kb #cxExtra,
  body.wb-typing .wb-head, body.wb-typing .wb-tabs, body.wb-typing .wb-status, body.wb-typing #cxExtra { display: none; }
  body.wb-typing:not(.wb-kb).creating.ws .editor.wb { height: calc(100svh - 56px); }
  body.wb-kb .cx-log, body.wb-typing .cx-log { min-height: 48px; }
  body.creating .ed-hint { display: none; }
  .ttl { touch-action: pan-y; }
}
@media (max-width: 899px) and (max-height: 560px) {
  body.creating.ws .editor.wb { height: calc(100svh - 44px); }
  .wb-status, #cxExtra .ed-hint { display: none; }
  .wb-tabs button { padding: 4px 10px 5px; }
  .cx-log { min-height: 48px; }
}
/* 手机可点区补充：关闭 X 与返回键 ≥44px（放文件末尾以覆盖上面较早的 .sheet-close 定义；密集的顶栏小胶囊是沉浸式设计，保持紧凑） */
@media (max-width: 899px) {
  .sheet-close { width: 44px; height: 44px; }
  .topbar .back { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
/* ───── 工作台人话版（design/workbench-v1，2026-10-14 批准）：改世界 / 体检 / 额度 / 设置 ───── */
.wb { --wb-y: #ffe36e; --wb-mint: #7ee0c3; --wb-pink: #ff8fb1; --wb-card: #15151c; }
.wb-tabs { gap: 0; }
.wb-tabs button { flex: 1; min-height: 44px; padding: 8px 6px; font-size: 14.5px; border-bottom-width: 3px; }
.wb-tabs button.on { border-color: var(--wb-y); }
.wb-tech { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--ink3); display: flex; justify-content: center; align-items: center; gap: 4px; }
.wb-tech .linkish { color: var(--ink2); min-height: 44px; padding: 0 6px; font-size: 12px; }
.cx-dock .wb-tech { margin: 0; }
.cx-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.cx-suggest:empty { display: none; }
.cx-suggest .sug { min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.cx-suggest .sug:hover { border-color: rgba(255, 227, 110, .5); }
.cx-input .act { min-height: 44px; }
/* 方案卡 */
.plan-card { border-color: rgba(255, 227, 110, .35); background: var(--wb-card); border-radius: 14px; padding: 12px 14px; }
.plan-card h5 { color: var(--wb-y); }
.plan-card .pc-time { font-size: 12.5px; color: var(--ink2); margin: 10px 0 8px; }
.plan-card .pc-go { min-height: 48px; background: var(--wb-y); color: #1a1708; border: 0; font-size: 15px; }
.tk-more { margin-top: 8px; font-size: 12px; color: var(--ink2); }
.tk-more > summary { cursor: pointer; color: var(--ink3); font-size: 12px; min-height: 32px; display: flex; align-items: center; list-style: none; }
.tk-more > summary::before { content: "›"; display: inline-block; margin-right: 6px; transition: transform .15s; }
.tk-more[open] > summary::before { transform: rotate(90deg); }
.tk-more > summary::-webkit-details-marker { display: none; }
/* 进度卡 */
.task-card.prog-card { background: var(--wb-card); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; }
.prog-card .pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prog-card .pc-top b { font-size: 16px; }
.prog-card .pc-step { color: var(--wb-y); font-size: 18px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.wb-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin: 10px 0; }
.wb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wb-mint), var(--wb-y)); transition: width .4s; }
.wb-bar.gold i { background: var(--wb-y); } .wb-bar.pink i { background: var(--wb-pink); }
.pstages { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.pstages li { display: flex; align-items: baseline; gap: 6px; color: var(--ink2); }
.pstages i { font-style: normal; width: 14px; flex: none; text-align: center; color: var(--ink3); }
.pstages .st-done i { color: var(--wb-mint); } .pstages .st-done { color: var(--ink); }
.pstages .st-active i { color: var(--wb-y); animation: pulse 1.2s infinite; } .pstages .st-active { color: var(--ink); font-weight: 600; }
.pstages .st-failed i { color: #ff8a7a; }
.tk-time { margin: 8px 0 0; font-size: 12.5px; color: var(--ink3); }
.tk-why { margin: 6px 0 0; color: #ffcf8a; }
.task-card .tk-acts .act.sm { min-height: 40px; padding: 6px 14px; font-size: 13px; margin-left: 0; }
.line-card .tk-line { margin: 0; display: flex; align-items: center; gap: 8px; }
.line-card .tk-line i { width: 8px; height: 8px; border-radius: 50%; background: #555a75; flex: none; }
.line-card .tk-line i.on { background: var(--wb-y); box-shadow: 0 0 8px var(--wb-y); animation: pulse 1.2s infinite; }
@media (max-width: 380px) { .pstages { grid-template-columns: 1fr; } }
/* 预览 / 发布两个大按钮 */
.cx-apply .ed-actions .act { min-height: 50px; border-radius: 14px; font-size: 15px; }
.cx-apply #edPublish { background: var(--wb-y); color: #1a1708; border: 0; }
.cx-apply #edPublish:disabled { background: rgba(255, 227, 110, .35); }
/* 体检 */
.hc-top { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--wb-card); border: 1px solid var(--line); margin: 4px 0 10px; }
.hc-top > i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 22px; font-weight: 700; flex: none; background: rgba(255,255,255,.08); }
.hc-top b { display: block; font-size: 18px; } .hc-top small { display: block; color: var(--ink2); font-size: 12.5px; margin-top: 2px; }
.hc-top.ok { background: rgba(126, 224, 195, .1); border-color: rgba(126, 224, 195, .45); } .hc-top.ok > i { background: var(--wb-mint); color: #0d2a22; }
.hc-top.warn > i { background: var(--wb-y); color: #2a2208; } .hc-top.busy > i { animation: pulse 1.2s infinite; }
.hc-seen { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.55; }
.hc-seen li { display: flex; gap: 10px; } .hc-seen li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--wb-mint); flex: none; margin-top: 6px; }
.wb-issue { background: var(--wb-card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 8px 0; font-size: 13.5px; }
.wb-issue p { margin: 0 0 6px; line-height: 1.55; } .wb-issue p > i { font-style: normal; color: var(--wb-y); margin-right: 8px; }
.wb-two { display: flex; gap: 8px; } .wb-two .act { flex: 1; min-height: 48px; border-radius: 12px; }
.wb-issue .act.primary { background: var(--wb-y); color: #1a1708; border: 0; }
.wb-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 14px; border-radius: 14px; background: var(--wb-card); border: 1px solid var(--line); margin: 10px 0; cursor: pointer; }
.wb-card .wb-switch-row { background: none; border: 0; padding: 0; margin: 0; }
.wb-switch-row b { display: block; font-size: 15px; } .wb-switch-row small { display: block; color: var(--ink2); font-size: 12.5px; margin-top: 3px; line-height: 1.5; }
.sw { appearance: none; -webkit-appearance: none; width: 52px; height: 30px; border-radius: 99px; background: #3a3d55; position: relative; flex: none; margin: 0; cursor: pointer; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .2s; }
.sw:checked { background: var(--wb-mint); } .sw:checked::after { left: 25px; }
.sw:disabled { opacity: .55; cursor: default; }
.act.wide { display: flex; width: 100%; min-height: 50px; border-radius: 14px; font-size: 15px; box-sizing: border-box; text-decoration: none; }
a.act.primary.wide { background: var(--wb-y); color: #1a1708; border: 0; margin-top: 12px; }
.wb-note { font-size: 12.5px; color: #ffcf8a; background: rgba(255, 170, 90, .1); border: 1px solid rgba(255, 170, 90, .3); border-radius: 12px; padding: 9px 12px; margin: 8px 0; line-height: 1.55; }
.wb-note:empty { display: none; }
.wb-adv { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 6px; }
.wb-adv > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--ink2); list-style: none; }
.wb-adv > summary::after { content: "›"; font-size: 18px; transition: transform .15s; } .wb-adv[open] > summary::after { transform: rotate(90deg); }
.wb-adv > summary::-webkit-details-marker { display: none; }
.wb-pane .insp-state { border-top: 0; margin: 0 0 8px; padding: 0; font-size: 12.5px; color: var(--ink2); }
/* 额度 */
.wb-card { background: var(--wb-card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 0 0 10px; }
.wb-card .wc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wb-card .wc-h b, .wb-card .wc-t { font-size: 14px; color: var(--ink); display: block; } .wb-card .wc-h small { color: var(--ink3); font-size: 12px; white-space: nowrap; }
.wb-card .wc-big { font-size: 28px; font-weight: 800; margin: 6px 0 2px; letter-spacing: .01em; }
.wb-card .wc-big span { font-size: 14px; font-weight: 400; color: var(--ink2); }
.wb-card .wc-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--ink2); line-height: 1.55; }
.wb-card.welcome { background: linear-gradient(135deg, rgba(255, 143, 177, .16), rgba(21, 21, 28, .9)); border-color: rgba(255, 143, 177, .45); }
.wb-card.welcome .wc-kick { color: var(--wb-pink); font-size: 12.5px; font-weight: 600; display: block; overflow-wrap: anywhere; }
.wb-card.welcome > b { display: block; font-size: 19px; line-height: 1.45; margin: 6px 0; }
.wb-card.bal { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wb-card.bal .act { min-height: 48px; border-radius: 14px; flex: none; max-width: 46%; white-space: normal; text-align: center; }
.wb-list { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 6px; font-size: 12.5px; }
.wb-list small { display: block; color: var(--ink3); }
/* 设置 */
.seg { display: flex; gap: 4px; background: rgba(0,0,0,.35); border-radius: 12px; padding: 4px; margin: 10px 0 4px; }
.seg button { flex: 1; min-height: 44px; border-radius: 9px; border: 0; background: none; color: var(--ink2); font: inherit; font-size: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.seg button.on { background: rgba(255,255,255,.12); color: var(--ink); font-weight: 700; }
.seg button:disabled { cursor: default; } .seg button small { font-size: 10px; color: var(--ink3); }
.wb-card .ai-state { margin: 8px 0 0; } .wb-card .ai-state.on { color: var(--wb-mint); }
.wb-card .ai-state.on::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wb-mint); margin-right: 6px; }
/* 复制不了时的手动复制框 */
.wb-techbox { position: fixed; z-index: 60; left: 12px; right: 12px; top: 12%; max-width: 640px; margin: 0 auto; background: #15151c; border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.wb-techbox textarea { width: 100%; height: 40vh; box-sizing: border-box; font: 11px/1.4 ui-monospace, monospace; background: #0d0d10; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.wb-techbox .act { margin-top: 8px; }
@media (max-width: 899px) {
  body.wb-kb .cx-suggest, body.wb-typing .cx-suggest, body.wb-kb #cxTech, body.wb-typing #cxTech { display: none; }
  .cx-apply .ed-actions .act { min-height: 48px; }
}
@media (max-width: 899px) and (max-height: 560px) { .wb-tabs button { min-height: 40px; padding: 4px 6px; } .cx-suggest { display: none; } }
/* 工作台页头与卡片里的小按钮：可点区 ≥44px */
.wb-head .ed-back { min-height: 44px; display: inline-flex; align-items: center; }
.wb-fold { min-height: 44px; min-width: 44px; }
.tk-more > summary { min-height: 44px; }
.task-card .tk-acts .act.sm, .cx-proposal .tk-acts .act.sm { min-height: 44px; }
@media (max-width: 899px) { .wb-fold { width: 44px; height: 44px; } }
.cx-proposal .pc-diff { margin: 4px 0; font-size: 13px; color: var(--ink); line-height: 1.5; }

/* 模型画的场景（沙箱 iframe）：铺满画面区；观察者 / 第一人称切换；工作台"画面"小节 */
.scene-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.chip.scene-mode { padding: 2px; gap: 0; }
.chip.scene-mode button { font: inherit; color: inherit; background: none; border: 0; border-radius: 99px; padding: 4px 10px; cursor: pointer; opacity: .75; }
.chip.scene-mode button.on { background: rgba(255, 255, 255, .16); opacity: 1; }
.wb-picture { margin: 8px 12px 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 13px; display: grid; gap: 6px; }
.wb-picture h4 { margin: 0; font-size: 13px; letter-spacing: .04em; opacity: .8; }
.wb-picture p { margin: 0; }
.wb-picture .wbp-cost, .wb-picture .wbp-note { opacity: .7; font-size: 12px; }
.wb-picture .wbp-st.on { color: #cfe9ff; }
.wb-picture .wbp-st.ok { color: #b9f3c9; }
.wb-picture .wbp-st.bad { color: #ffb4b4; }
.wb-picture .act { justify-self: start; }
.wb-picture .wbp-tech pre { white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow: auto; margin: 6px 0; font-size: 11px; opacity: .8; }
.wb-channels{padding:10px 14px;border-bottom:1px solid #ffffff18}.wb-channels>span{display:block;color:#b5b3c0;font-size:12px;margin-bottom:6px}.wb-channels>div{display:flex;gap:8px}.wb-channels button{flex:1;min-width:0;border:1px solid #ffffff2a;border-radius:10px;background:#ffffff05;color:inherit;padding:8px;text-align:left;cursor:pointer}.wb-channels button[aria-pressed=true]{border-color:#ffe36b;background:#ffe36b12}.wb-channels b,.wb-channels small{display:block}.wb-channels small{color:#b5b3c0;font-size:11px;margin-top:3px}

/* ───────── 七号雨巷 · 安静布局（场景优先）与私聊同伴 ───────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.more-btn { display: none; }
body.calm .more-btn { display: inline-flex; gap: 6px; font-size: 16px; line-height: 1; }
body.calm .more-btn .mb-l { font-size: 12.5px; }
body.calm .more-btn[aria-expanded="true"] { border-color: rgba(255, 95, 162, .6); background: rgba(255, 95, 162, .16); }
.more-menu { position: absolute; top: 58px; right: 12px; z-index: 14; width: min(340px, calc(100vw - 24px)); max-height: calc(100dvh - 84px); overflow: auto; padding: 12px; border-radius: 18px;
  background: var(--glass2); border: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: 10px; }
.more-menu[hidden] { display: none; }
body.calm .topbar .more-menu .mm-status { display: flex; flex-wrap: wrap; gap: 6px; width: auto; order: 0; flex: none; }
.more-menu .mm-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.more-menu .mm-acts .chip { justify-content: flex-start; padding: 9px 11px; min-height: 40px; font-size: 13px; white-space: normal; text-align: left; }
.more-menu .mm-acts .chip[hidden] { display: none; }
body.calm .more-menu .feed-btn { display: inline-flex; }
body.calm .more-menu .how-btn { font-size: 13px; width: auto; justify-content: flex-start; padding: 9px 11px !important; }
body.calm .more-menu .how-btn::before { content: none; }
body.calm .topbar { padding-bottom: 26px; }
body.calm .topbar .ttl span { opacity: .8; }
.cp-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 1px 7px; border-radius: 99px; font-style: normal; vertical-align: 1px; text-shadow: none; }
.cp-tag.pub { background: rgba(77, 227, 212, .14); color: #8ff3e8; border: 1px solid rgba(77, 227, 212, .35); }
.cp-tag.priv { background: rgba(255, 95, 162, .14); color: #ffb3d3; border: 1px solid rgba(255, 95, 162, .35); }
body.calm .focus { width: 400px; }
body.calm .focus .f-kicker { letter-spacing: .1em; }
.f-moment { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-top: 8px; padding: 9px 11px; border-radius: 14px; font-size: 14px; line-height: 1.45; color: var(--ink);
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(255, 95, 162, .08)); border: 1px solid color-mix(in srgb, var(--c) 42%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 16%, transparent); }
.f-moment img.pt.mini { width: 40px; height: 40px; flex: none; }
.f-moment em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--c); white-space: nowrap; font-size: 13px; }
.f-moment:hover, .f-moment:focus-visible { box-shadow: 0 0 30px color-mix(in srgb, var(--c) 30%, transparent); }
.f-also { margin-top: 4px; font-size: 13px; opacity: .82; }
.f-also img.pt.mini { width: 30px; height: 30px; }
body.calm .focus .f-head .care, body.calm .focus .f-head [data-go="follow"], body.calm .focus .f-head [data-go="free"] { display: none; }
body.calm .focus .f-acts-more { margin-top: 8px; flex-wrap: wrap; }
body.calm .focus .act.care.on { color: #ffd23f; }
body.calm .cast button .st { display: none; }
body.calm.companion-open .hud { visibility: hidden; }
body.companion-open .cam-cue { display: none; }
/* 私聊时收起别人的公共浮层：名字牌不压在她脸上，别人的台词气泡、弹幕变淡（公共生活仍在继续）；关掉私聊就恢复 */
body.companion-open #labels .tag { opacity: 0; pointer-events: none; transition: opacity .3s; }
body.companion-open #labels .bubble.on:not([data-who="ling"]) { opacity: .45; }
body.companion-open .danmaku { opacity: .3; }
body.calm.companion-open .subtitle, body.calm.companion-open .echoes { opacity: .35; }
.cam-cue { position: absolute; z-index: 7; left: 50%; top: 84px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 99px; font-size: 12.5px;
  color: var(--ink2); background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); animation: cueIn .4s ease-out; }
.cam-cue button { width: 26px; height: 26px; border-radius: 50%; color: var(--ink2); }
.cam-cue button:hover { background: rgba(255, 255, 255, .08); }
@keyframes cueIn { from { opacity: 0; transform: translate(-50%, -6px); } }
@media (min-width: 900px) {
  body.world.calm { grid-template-columns: 1fr; }
  body.calm .panel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; z-index: 15; transform: translateX(105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); box-shadow: -20px 0 50px rgba(0, 0, 0, .45); visibility: hidden; }
  body.calm.panel-open .panel { transform: none; visibility: visible; }
  body.calm .panel-grab { display: block; position: relative; height: 8px; }
  body.calm .panel-grab .sheet-close { top: 8px; }
  body.calm .cast button { width: 62px; }
}

/* 私聊面板：桌面 = 场景右侧浮起的一张卡；手机 = 底部抽屉 */
.companion { position: fixed; z-index: 16; right: 16px; top: 70px; bottom: 16px; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: linear-gradient(180deg, rgba(24, 17, 44, .95), rgba(10, 11, 24, .97)); border: 1px solid rgba(255, 210, 63, .28); backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(255, 95, 162, .1), 0 24px 70px rgba(0, 0, 0, .55), 0 0 70px rgba(255, 95, 162, .12); animation: cpIn .28s cubic-bezier(.2, .8, .2, 1); }
.companion[hidden], .cp-scrim[hidden] { display: none; }
@keyframes cpIn { from { opacity: 0; transform: translateY(14px); } }
.cp-scrim { display: none; }
.cp-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.cp-head::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 210, 63, .55), rgba(255, 95, 162, .45), transparent); }
.cp-head img.pt.f-pt { width: 48px; height: 48px; flex: none; box-shadow: 0 0 18px rgba(255, 210, 63, .35); border-radius: 50%; }
.cp-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cp-name b { font-family: var(--serif); font-size: 20px; letter-spacing: .06em; }
.cp-name small { color: var(--ink3); font-size: 12px; }
.cp-name .en-name { color: var(--ink2); }
.cp-tools { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.cp-tool { min-width: 36px; height: 36px; padding: 0 11px; border-radius: 99px; font-size: 13px; color: var(--ink2); border: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.cp-tool.on { color: #14121e; background: var(--yellow); border-color: transparent; }
.cp-close { font-size: 20px; padding: 0; width: 36px; }
.cp-tool:focus-visible, .cp-chip:focus-visible, .cp-link:focus-visible, .f-moment:focus-visible, .cp-reflect:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.cp-moment { display: flex; gap: 8px; align-items: baseline; margin: 0; padding: 9px 14px; font-size: 13px; line-height: 1.5; color: var(--ink2); background: rgba(77, 227, 212, .05); }
.cp-moment q { color: var(--ink); }
.cp-profile { margin: 8px 14px 0; font-size: 13px; color: var(--ink2); }
.cp-profile summary { cursor: pointer; color: var(--ink3); font-size: 12px; }
.cp-profile p { margin: 6px 0; line-height: 1.55; }
.cp-hist { color: var(--ink3); font-size: 12px; }
.cp-log { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: #2a2d45 transparent; }
.cp-empty { margin: auto 0; text-align: center; color: var(--ink3); font-size: 13.5px; line-height: 1.7; padding: 20px 8px; }
.cp-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 90%; }
.cp-msg p { margin: 0; padding: 9px 12px; border-radius: 16px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-msg.me { align-self: flex-end; }
.cp-msg.me p { background: rgba(255, 255, 255, .09); border: 1px solid var(--line); border-bottom-right-radius: 5px; }
.cp-msg.her { align-self: flex-start; }
.cp-msg.her p { background: linear-gradient(160deg, rgba(255, 210, 63, .11), rgba(255, 95, 162, .07)); border: 1px solid rgba(255, 210, 63, .22); border-bottom-left-radius: 5px; }
.cp-msg.her img.pt.mini { width: 28px; height: 28px; flex: none; }
.cp-intent { display: block; font-style: normal; font-size: 10.5px; color: var(--yellow); margin-bottom: 2px; }
.cp-mood { display: block; margin-top: 4px; font-size: 11px; color: var(--ink3); }
.cp-status { align-self: flex-end; margin: -2px 0 2px; max-width: 90%; font-size: 12px; line-height: 1.5; color: var(--ink2); text-align: right; }
.cp-st { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.cp-st.queued { color: #cfd8ff; } .cp-st.running { color: var(--yellow); } .cp-st.paused, .cp-st.uncertain { color: var(--amber); } .cp-st.failed { color: #ff8a95; }
.cp-dots { width: 18px; height: 6px; background: radial-gradient(circle, currentColor 2px, transparent 2.5px) 0 50% / 6px 6px repeat-x; animation: cpDots 1s steps(3) infinite; }
@keyframes cpDots { 0% { clip-path: inset(0 66% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.cp-link { font-size: 12px; color: var(--pink); text-decoration: underline; text-underline-offset: 2px; padding: 2px 4px; }
.cp-reflect { margin: 0 14px 8px; display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 14px; font-size: 13px; text-align: left; color: var(--ink);
  background: rgba(77, 227, 212, .08); border: 1px dashed rgba(77, 227, 212, .45); }
.cp-foot { display: flex; gap: 8px; align-items: center; padding: 6px 14px 0; color: var(--ink3); font-size: 11.5px; border-top: 1px solid var(--line); padding-top: 8px; }
.cp-form { padding: 8px 12px calc(12px + var(--safe-b)); }
.cp-chips { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.cp-chip { font-size: 12px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink2); background: rgba(255, 255, 255, .03); }
.cp-chip.on { color: #14121e; background: var(--yellow); border-color: transparent; font-weight: 700; }
.cp-input { display: flex; gap: 8px; align-items: flex-end; }
.cp-input textarea { flex: 1; min-width: 0; resize: none; min-height: 44px; max-height: 130px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.5; }
.cp-input textarea:focus-visible { outline: 2px solid rgba(255, 95, 162, .7); outline-offset: 1px; }
.cp-send { padding: 10px 16px; min-height: 44px; }
.cp-send[disabled] { opacity: .45; cursor: default; }
.cp-hint, .cp-err { margin: 6px 2px 0; font-size: 12px; color: var(--ink3); }
.cp-err { color: #ff9aa5; }
.cp-gate { padding: 12px 14px calc(14px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cp-gate p { margin: 0; font-size: 14px; line-height: 1.6; }
.cp-gate small { color: var(--ink3); font-size: 12px; }
.cp-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 18px; }
.cp-pane h3 { margin: 4px 0 8px; font-family: var(--serif); font-size: 18px; letter-spacing: .06em; }
.cp-pane h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .1em; color: var(--yellow); }
.cp-pane ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-pane li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; }
.cp-pane li small { grid-column: 1; color: var(--ink3); font-size: 11px; }
.cp-pane li .cp-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.cp-bond { margin: 0; font-size: 13px; color: var(--ink2); display: flex; flex-direction: column; gap: 2px; }
.cp-bond b { color: var(--ink); }
.cp-bond small { color: var(--ink3); font-size: 11.5px; }
.cp-note { margin: 14px 0 10px; font-size: 12px; color: var(--ink3); line-height: 1.6; }
.cp-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-size: 12.5px; color: var(--ink2); }
.cp-field select { padding: 9px 10px; border-radius: 10px; background: #15172b; color: var(--ink); border: 1px solid var(--line); font: inherit; }
.cp-back { margin-top: 10px; }
@media (max-width: 899px) {
  /* 手机：抽屉只占下面一半多一点，上方留出能看到她脸的画面（镜头把她放在露出来的区域中间）；矮屏幕优先保证输入区 */
  .companion { left: 0; right: 0; bottom: 0; top: auto; width: auto; height: clamp(340px, 58svh, calc(100svh - 40px)); max-height: calc(100dvh - 40px); border-radius: 22px 22px 0 0; border-width: 1px 0 0; animation: slideUp .32s cubic-bezier(.2, .8, .2, 1); }
  /* 遮罩不再盖住场景：只在抽屉上沿给一点渐暗；点上方的场景收起抽屉（world.mjs 的 onTap），拖动/双指照常操作镜头 */
  .cp-scrim { display: block; position: fixed; inset: 0; z-index: 15; pointer-events: none; background: linear-gradient(180deg, transparent 0 40%, rgba(4, 5, 12, .28)); }
  /* 键盘弹出：抽屉贴着可见区域的底部；可见区域还够时上方仍留一条画面，不够就整块给输入 */
  body.cp-kb .companion { bottom: auto; top: calc(var(--cp-vvtop, 0px) + var(--cp-vvh, 60svh) - min(var(--cp-vvh, 60svh), max(320px, calc(var(--cp-vvh, 60svh) - 210px)))); height: min(var(--cp-vvh, 60svh), max(320px, calc(var(--cp-vvh, 60svh) - 210px))); max-height: none; animation: none; }
  body.cp-kb .companion .cp-moment, body.cp-kb .companion .cp-profile-slot { display: none; }
  .cp-input textarea { font-size: 16px; }
  .cp-tool { min-width: 44px; height: 44px; }
  .cp-close { width: 44px; }
  .cp-chip { min-height: 36px; }
  body.calm .focus { width: auto; }
  .more-menu { top: 52px; right: 8px; }
  .cam-cue { top: 64px; }
}

/* A small story doorway in the calm HUD; existing ambience remains opt-in. */
.story-link{border:0;background:none;padding:2px 0;color:#d7b5d5;cursor:pointer;text-align:left}
.story-now{margin:4px 0 10px;color:#e0d8cd;font-size:12px;line-height:1.6;max-width:44ch}
.story-sound{margin-left:auto;white-space:nowrap}
.alley-story-cast{display:grid;gap:10px;margin:20px 0}
.alley-story-cast button{display:flex;align-items:center;gap:12px;width:100%;padding:12px;text-align:left;background:#ffffff08;color:inherit;border:1px solid #ffffff14;border-radius:14px;cursor:pointer}
.alley-story-cast span{flex:1}.alley-story-cast small{display:block;margin-top:4px;line-height:1.6;color:#c9c3cc}.alley-story-cast em{font-style:normal}
.story-present{padding:12px 0;border-top:1px solid #ffffff14;line-height:1.7}
body.calm .calm-moment .f-head{flex-wrap:wrap;gap:8px}
/* 七号雨巷「今晚的事」：焦点卡里一行入口 + 一张安静的面板（web/game.mjs） */
.f-tonight { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; margin: 0 0 6px; padding: 7px 11px; border-radius: 12px; font-size: 13px; line-height: 1.35; color: var(--ink);
  background: color-mix(in srgb, var(--c) 9%, rgba(20, 16, 30, .55)); border: 1px dashed color-mix(in srgb, var(--c) 45%, transparent); }
.f-tonight .ft-k { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--c); text-transform: uppercase; }
.f-tonight .ft-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-tonight .ft-p { flex: none; font-variant-numeric: tabular-nums; color: #e0d8cd; font-size: 12px; }
.f-tonight .ft-p i { font-style: normal; margin-left: 6px; color: var(--c); }
.f-tonight em { font-style: normal; color: var(--c); font-weight: 700; }
.f-tonight.done { border-style: solid; }
.f-tonight:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.sheet.tonight .gm-k { margin: 0 0 4px; font-size: 12px; color: #c9bfb2; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sheet.tonight .gm-line { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; }
.sheet.tonight .gm-line q { color: var(--c); }
.sheet.tonight .gm-prog { margin: 10px 0 8px; font-size: 13px; color: #e0d8cd; }
.gm-choices { display: grid; gap: 8px; margin: 6px 0 10px; }
.gm-choice { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 9px 12px; text-align: left; border-radius: 12px; color: var(--ink); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); }
.gm-choice:not([disabled]):hover, .gm-choice:focus-visible { border-color: var(--pink); }
.gm-choice[disabled] { opacity: .78; cursor: default; }
.gm-choice.mine { border-color: color-mix(in srgb, #7fe0b0 55%, transparent); }
.gm-choice .gm-ic { flex: none; width: 26px; text-align: center; font-size: 18px; }
.gm-choice .gm-cl { flex: 1; display: grid; gap: 2px; }
.gm-choice .gm-cl small { color: #c9bfb2; font-size: 12px; line-height: 1.4; }
.gm-choice .gm-n { flex: none; font-size: 12px; color: #c9bfb2; font-variant-numeric: tabular-nums; }
.gm-receipt { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: rgba(127, 224, 176, .1); font-size: 13px; line-height: 1.5; }
.gm-err { margin: 6px 0; color: #ffb4a8; font-size: 13px; }
.gm-result { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 210, 63, .08); border: 1px solid rgba(255, 210, 63, .25); }
.gm-result h5 { margin: 0 0 6px; } .gm-result h5 small { font-weight: 400; color: #c9bfb2; margin-left: 6px; }
.gm-result p, .gm-result li { font-size: 13px; line-height: 1.55; }
.gm-src { display: block; color: #a99f93; font-size: 11px; margin-top: 2px; }
.gm-chat { margin: 4px 0 8px; }
.gm-more { margin-top: 6px; } .gm-more summary { cursor: pointer; font-size: 13px; color: #c9bfb2; }
.orig-tag { margin-left: 6px; font-size: 10px; color: #a99f93; border: 1px solid rgba(255, 255, 255, .2); border-radius: 6px; padding: 0 4px; vertical-align: middle; }
.gm-see { justify-self: end; margin: -4px 4px 2px 0; padding: 4px 8px; font-size: 12px; color: var(--pink); background: none; border: 0; cursor: pointer; }
.gm-see:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Keep language switching available inside the modal, above its scrim. */
.sheet-panel > .sheet-lang { position: absolute; top: 12px; right: 64px; width: 44px; height: 44px; z-index: 2; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 12px; }
.sheet-lang ~ .sheet-body > .sheet-title, .sheet-lang ~ .sheet-body > .gm-k { padding-right: 100px; }

/* Memory trail: a quiet invitation, then one clue at a time in the alley. */
.f-memory { --c: #a6ecff; }
.memory-next { border-color: #8ed7de66; background: #19454d; color: #e6fcff; min-height: 44px; }
.memory-focus .memory-next { width: 100%; }
.memory-points { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.memory-pin { position: absolute; top: 0; left: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px; background: none; border: 0; color: #e7ffff; cursor: pointer; }
.memory-pin[hidden] { display: none; }
.memory-pin i { font-style: normal; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #102c37e8; border: 1px solid #aff7ff; box-shadow: 0 0 22px #6ad2e866, inset 0 0 12px #6ad2e833; font-size: 27px; }
.memory-pin span { background: #0a1625e8; border: 1px solid #91d5df55; padding: 4px 10px; border-radius: 15px; font-size: 12px; white-space: nowrap; }
.memory-pin.found i { color: #b8d6d8; box-shadow: none; font-size: 20px; border-style: dashed; }
.memory-pin:focus-visible i { outline: 3px solid #fff; outline-offset: 4px; }
.sheet.memory .sheet-body { max-width: 530px; }
.sheet.memory .gm-k, .sheet.memory .sheet-title { padding-right: 100px; }
.memory-body { font-size: 16px; line-height: 1.85; color: #e0e7eb; margin: 18px 0; }
.sheet.memory .act { margin: 6px 8px 6px 0; white-space: normal; text-align: left; }
.memory-options { display: grid; gap: 6px; }
.memory-options .act { margin-right: 0; padding: 13px 16px; }
.memory-route { display: grid; gap: 8px; margin: 20px 0; }
.memory-route button { display: flex; align-items: center; gap: 14px; width: 100%; border: 1px solid #8dd2dd33; background: #14303a66; border-radius: 12px; color: #e4f5f8; padding: 13px; text-align: left; cursor: pointer; }
.memory-route i { border: 1px solid #8dd2dd66; border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; font-style: normal; }
.memory-route small { display: block; color: #a9b8c3; font-size: 12px; margin-top: 3px; }
.memory-route em { margin-left: auto; font-style: normal; }
.memory-witness { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-top: 1px solid #a0d9dc33; }
.memory-witness small { color: #afcbd4; }.memory-witness p { line-height: 1.8; margin: 8px 0; }
.memory-echo { border-left: 2px solid #8dd2dd99; padding-left: 16px; line-height: 1.9; color: #afcbd4; }
.memory-art { width: 100%; height: 150px; margin: 22px auto; overflow: hidden; position: relative; border-radius: 8px; }
.memory-art.photo { width: 215px; background: #78928d; border: 9px solid #d8d0b5; border-bottom-width: 23px; border-radius: 2px; transform: rotate(-3deg); box-shadow: 0 6px 24px #0005; }
.old-sky { height: 82px; background: linear-gradient(#80a6ab, #bac1ac); }.old-roofs { position: absolute; bottom: -8px; font-size: 65px; letter-spacing: -13px; color: #344d4b; white-space: nowrap; transform: skewY(-4deg); }
.memory-art.voice { width: 240px; height: 132px; background: linear-gradient(135deg, #466372, #172735); border: 2px solid #7b8d97; box-shadow: 0 8px 24px #0005; display: grid; place-items: center; }
.tape-reels { border-radius: 50px; border: 1px solid #8bafb966; padding: 8px 12px; color: #cbd7d9; font-size: 37px; white-space: nowrap; }.tape-reels span { font-size: 20px; color: #9aa8a7; }
.memory-art.name { display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse, #29546588, transparent 70%); }
.old-name { font-family: serif; color: #c8f3f4; font-size: 42px; letter-spacing: 8px; text-shadow: 0 0 30px #6ad2e866; }.name-rain { letter-spacing: 19px; color: #71a8b04d; }
@media (max-width: 600px) { .sheet.memory .sheet-body { padding-bottom: max(24px, env(safe-area-inset-bottom)); }.memory-art { margin: 16px auto; height: 120px; }.memory-body { font-size: 15px; }.memory-witness { padding: 12px 0; }.f-memory .ft-t { font-size: 13px; } }

/* Public presence is descriptive, not a disabled character button. */
body.calm .cast button.away img { filter: grayscale(.2) brightness(.88); }
.cast .presence-mark { position:absolute; right:3px; top:2px; padding:1px 4px; border-radius:8px; background:#202738; color:#e6dfd0; border:1px solid #ffffff30; font-size:10px; line-height:1.25; pointer-events:none; }
.cast .presence-mark[hidden] { display:none; }

/* Seven Alley entry: one invitation, with optional activities in a separate sheet. */
body.calm .entry-card { width: 400px; }
.entry-card .story-now { color: #eee6da; font-size: 14px; line-height: 1.55; margin: 9px 0 12px; max-width: none; }
.entry-actions { display: flex; align-items: center; gap: 12px; }
.entry-primary { flex: 1; min-height: 44px; white-space: normal; text-align: left; justify-content: space-between; line-height: 1.4; }
.entry-more { background: none; padding: 10px 2px; flex: none; font-size: 13px; color: #d8ccd9; text-decoration: underline; text-underline-offset: 4px; }
.entry-more:focus-visible, .explore-story:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
body.calm .focus.person .f-name small, body.calm .focus.person .f-chip,
body.calm .focus.person .f-now q, body.calm .focus.person .orig-tag,
body.calm .focus.person .f-sit, body.calm .focus.person .f-more { display: none; }
body.calm .focus.person .f-now { margin: 8px 0 0; }
body.calm .focus.person .f-toggle { flex: none; background: transparent; }
body.calm .ttl span { color: #e3daca; }
.explore-activities { display: grid; gap: 8px; }
.explore-activities .f-tonight { margin: 0; min-height: 52px; border-style: solid; }
.explore-story { display: block; background: none; text-align: left; margin-top: 14px; padding: 12px 0; color: #dfc1df; font-size: 14px; }
.resident-line, .resident-progress { color: #ded4cf; font-size: 14px; line-height: 1.7; margin: 12px 0; }
.resident-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.resident-actions .act { white-space: normal; min-height: 44px; padding: 10px; }
.sheet.explore .sheet-panel, .sheet.resident-detail .sheet-panel { height: auto; max-height: min(720px, calc(100dvh - 32px)); align-self: center; margin-right: 16px; border: 1px solid var(--line); border-radius: 22px; }
.sheet.explore .sheet-body, .sheet.resident-detail .sheet-body { flex: 0 1 auto; }
.sheet.explore .sheet-title, .sheet.resident-detail .sheet-title { padding-right: 96px; font-size: 21px; }
body.calm .cast .presence-mark { top: 26px; }
@media (max-width: 899px) {
  body.calm .topbar { flex-wrap: nowrap; gap: 6px; padding: 10px 10px 22px; align-items: center; }
  body.calm .topbar .back { min-width: 36px; min-height: 40px; width: 36px; height: 40px; }
  body.calm .topbar .ttl { min-width: 0; flex: 1; margin-right: 0; }
  body.calm .topbar .ttl b { font-size: 15px; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; }
  body.calm .topbar .ttl span { font-size: 11px; }
  body.calm .topbar .top-r { margin-left: 0; flex: none; }
  body.calm .topbar .more-btn { width: 40px; height: 40px; justify-content: center; padding: 0; font-size: 22px; }
  body.calm .more-btn .mb-l { display: none; }
  body.calm .cam-cue { top: 72px; width: max-content; max-width: calc(100% - 24px); font-size: 11.5px; }
  body.calm .cam-cue button { flex: none; }
  body.calm .entry-card { width: auto; padding: 11px 12px; }
  body.calm .entry-card .f-kicker { font-size: 10px; letter-spacing: .02em; }
  body.calm .entry-card .story-sound { font-size: 11px; padding: 5px 7px; }
  body.calm .entry-card .story-now { font-size: 13px; margin: 7px 0 10px; line-height: 1.5; }
  body.calm .entry-primary { font-size: 13px; padding: 10px 12px; }
  body.calm .entry-more { font-size: 12px; }
  body.calm .cast { padding: 3px 4px; }
  body.calm .cast button img.pt { width: 30px; height: 30px; }
  body.calm .cast button b { font-size: 10.5px; }
  body.calm .cast .presence-mark { top: 22px; font-size: 9px; padding: 0 3px; }
  body.calm .sheet.explore .sheet-panel, body.calm .sheet.resident-detail .sheet-panel { align-self: flex-end; margin: 0; max-height: 65svh; width: 100%; border-radius: 22px 22px 0 0; }
  body.calm .sheet.explore .f-moment { font-size: 13px; }
  body.calm .sheet.explore .f-moment em { white-space: normal; }
}

body.calm:has(.sheet.explore.open) .hud, body.calm:has(.sheet.resident-detail.open) .hud { visibility: hidden; }

/* Mobile controls: readable labels, generous touch areas, one foreground panel. */
body.calm.menu-open .topbar { z-index: 14; }
body.calm.menu-open .cam-cue, body.calm:has(.pop:not([hidden])) .cam-cue { visibility: hidden; }
body.calm .more-menu, body.calm .pop { background: rgba(22, 24, 46, .97); overscroll-behavior: contain; }
@media (max-width: 899px) {
  body.calm .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
  body.calm .topbar .back, body.calm .topbar .more-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  body.calm .topbar .ttl b { font-size: 16px; }
  body.calm .topbar .ttl span { font-size: 12px; }
  body.calm .more-menu { top: calc(max(10px, env(safe-area-inset-top)) + 52px); right: max(8px, env(safe-area-inset-right)); width: min(380px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: calc(100dvh - 78px - env(safe-area-inset-top) - var(--safe-b)); padding: 12px; }
  body.calm .more-menu .mm-acts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  body.calm .more-menu .mm-acts .chip { width: auto; min-width: 0; min-height: 48px; padding: 10px; border-radius: 12px; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
  body.calm .more-menu .mm-status .chip { font-size: 13px; }
  body.calm .more-menu .mm-status a { min-height: 44px; min-width: 44px; }
  body.calm .pop { position: fixed; z-index: 16; top: calc(var(--cp-vvtop, 0px) + max(10px, env(safe-area-inset-top)) + 52px); right: max(8px, env(safe-area-inset-right)); left: max(8px, env(safe-area-inset-left)); width: auto; max-height: calc(var(--cp-vvh, 100dvh) - 78px - env(safe-area-inset-top) - var(--safe-b)); overflow-y: auto; padding: 16px; font-size: 15px; line-height: 1.5; }
  body.calm .pop h5 { font-size: 17px; line-height: 1.4; }
  body.calm .pop h5 small, body.calm .pop-note { font-size: 13px; line-height: 1.6; color: #b9b3c9; }
  body.calm .pop-toggle { min-height: 48px; }
  body.calm .pop-range { grid-template-columns: 72px minmax(0, 1fr) 26px; gap: 6px; margin: 2px 0; min-height: 48px; }
  body.calm .pop-range input { height: 44px; margin: 0; }
  body.calm .pop-range b { font-size: 13px; }
  body.calm .pop-layers { flex-wrap: wrap; gap: 6px; font-size: 15px; }
  body.calm .pop-layers label { min-height: 44px; padding: 6px 10px; gap: 7px; border-radius: 10px; background: #ffffff08; }
  body.calm .pop-layers input { width: 18px; height: 18px; margin: 0; accent-color: var(--amber); }
  body.calm .pop .seg button { min-height: 44px; font-size: 15px; }
  body.calm .dm-send input { font-size: 16px; min-height: 48px; }
  body.calm .dm-send .act { min-height: 48px; font-size: 15px; }
  body.calm .dm-presets { gap: 8px; }
  body.calm .dm-presets button { min-height: 44px; font-size: 14px; padding: 8px 12px; text-align: left; line-height: 1.4; }
  body.calm .pop-note a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 3px; }
  body.calm.cp-kb .pop[data-kind="dm"] :is(h5 small, .dm-presets, .pop-note) { display: none; }
  body.calm:has(.pop:not([hidden])) .hud, body.calm.menu-open .hud { visibility: hidden; }
  body.calm .entry-card .story-now, body.calm .f-now, body.calm .f-now q { font-size: 15px; }
  body.calm .entry-primary, body.calm .f-acts .act { min-height: 48px; font-size: 15px; }
  body.calm .entry-more, body.calm .f-mini, body.calm .entry-card .story-sound { min-height: 44px; font-size: 13px; }
  body.calm .f-sit { font-size: 14px; }
  body.calm .cast button { min-height: 48px; }
  body.calm .cast button b { font-size: 12px; }
  body.calm .sheet :is(input:not([type=checkbox]):not([type=radio]), textarea, select) { font-size: 16px; }
  body.calm .sheet-close { width: 44px; height: 44px; }
}
@media (max-width: 899px) and (max-height: 500px) {
  body.calm .pop[data-kind="dm"] :is(h5 small, .dm-presets, .pop-note) { display: none; }
}

/* Personal night walk: one stop at a time; the scene stays visible on mobile. */
.f-nightwalk { border-color: #d8bb8355; }
.nightwalk-pin i { border-color: #f3d69d; color: #ffe9bd; background: #352e24ed; box-shadow: 0 0 20px #e7bb6944; }
.nightwalk-pin span { border-color: #d8bb8355; }
.sheet.nightwalk .sheet-panel { height: auto; max-height: min(760px, calc(100dvh - 32px)); align-self: center; margin-right: 16px; border: 1px solid var(--line); border-radius: 22px; }
.sheet.nightwalk .sheet-body { flex: 0 1 auto; }
.sheet.nightwalk .gm-k, .sheet.nightwalk .sheet-title { padding-right: 96px; }
.sheet.nightwalk .sheet-title { font-size: 22px; }
.sheet.nightwalk .act { margin-top: 12px; white-space: normal; min-height: 44px; }
.nightwalk-route, .nightwalk-observations { list-style: none; padding: 0; margin: 20px 0; }
.nightwalk-route { display: grid; gap: 14px; }
.nightwalk-route li { display: flex; align-items: center; gap: 12px; color: #dccfb8; }
.nightwalk-route i { display: grid; place-items: center; border: 1px solid #cbb58377; border-radius: 50%; width: 28px; height: 28px; font: inherit; }
.nightwalk-route .visited { color: #90b9b4; }
.nightwalk-story { line-height: 1.8; color: #b7c5ce; }
.nightwalk-observation { border-left: 2px solid #d6b370; padding: 10px 14px; background: #d6b3700c; margin: 18px 0 4px; line-height: 1.8; }
.nightwalk-observation small { color: #d6bb8e; }
.nightwalk-observation p { margin: 7px 0; }
.nightwalk-observations li { border-bottom: 1px solid #ffffff14; padding: 12px 0; }
.nightwalk-observations li > span { color: #d6bb8e; font-size: 13px; display: flex; justify-content: space-between; gap: 12px; }
.nightwalk-observations p, .nightwalk-compare { font-size: 14px; line-height: 1.8; }
.nightwalk-history { margin-top: 22px; }.nightwalk-history summary { cursor: pointer; min-height: 32px; color: #d6bb8e; }
.nightwalk-history h4 { font-weight: 500; line-height: 1.6; }
body.calm:has(.sheet.nightwalk.open) .hud { visibility: hidden; }
@media (max-width: 899px) {
  body.calm .sheet.nightwalk .sheet-panel { align-self: flex-end; margin: 0; width: 100%; max-height: 70svh; border-radius: 22px 22px 0 0; }
  .sheet.nightwalk .sheet-title { font-size: 20px; }
}

/* Audience co-created keepsakes: one scene action, personal records folded away. */
.gm-growth { margin:20px 0; padding:16px; border:1px solid #cba36a40; border-radius:14px; background:linear-gradient(135deg,#c99c5212,transparent); overflow-wrap:anywhere; }
.gm-growth h5 { margin:0 0 12px; color:#d8bb8c; font-size:13px; font-weight:500; }
.gm-growth p { line-height:1.6; margin:8px 0; }
.gm-growth .act { min-height:44px; font-size:15px; }
.gm-keepsakes { border-top:1px solid #ffffff18; margin-top:14px; padding-top:4px; }
.gm-keepsakes summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:14px; }

.mark.keepsake { width:260px; max-width:calc(100vw - 32px); box-sizing:border-box; white-space:normal; overflow-wrap:anywhere; padding:12px 16px; background:#211c2ef2; border:1px solid #d9b57966; color:#fff1d7; box-shadow:0 4px 24px #0008; font-size:15px; line-height:1.5; }
.mark.keepsake small { font-size:13px; margin-top:4px; }
.mark.keepsake::after { border-top-color:#211c2e; }

/* One shared goal, an optional idea box, and a private creator desk. */
.community-entry{border-color:#719a754d!important;background:linear-gradient(110deg,#37655426,#22332b26)!important}.community-entry .ft-k{color:#a9d5ab}.community .sheet-body{max-width:660px}.community .act{min-height:44px}.community .act+.act{margin-left:8px}.garden-progress{list-style:none;padding:0;margin:18px 0;display:grid;gap:10px}.garden-progress li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.5;color:#bfc4c3}.garden-progress li.done{color:#d8edcc}.garden-progress small{margin-left:auto;color:#a8cfb1;font-size:11px}.garden-progress li>span{width:22px;color:#a6c79a}.garden-story{font-size:16px;line-height:1.9}.garden-options{display:grid;gap:10px;margin:20px 0}.garden-options .act{margin:0!important;text-align:left;width:100%;padding:12px 14px}.garden-note{border-left:2px solid #86b38b;margin:22px 0;padding:4px 0 4px 16px;font-size:15px;line-height:1.9;color:#d5e1cf}.garden-secondary{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 10px;border-top:1px solid #ffffff15;padding-top:16px}.garden-secondary .act+.act{margin:0}.garden-saved{line-height:1.8}.garden-saved a{color:#b8d9ad}.garden-pin i{color:#a8d3a4!important;background:#203a2de8!important}.community-edit{display:grid;gap:14px;margin:20px 0}.community-edit label{display:grid;gap:7px;font-size:13px;color:#ccd4cf}.community-edit input,.community-edit select,.community-edit textarea{width:100%;font:inherit;font-size:16px;color:#f2f2e8;background:#151e1c;border:1px solid #8ea99a55;border-radius:9px;padding:12px;min-height:44px;box-sizing:border-box}.community-edit textarea{resize:vertical}.community-edit .garden-check{display:flex;align-items:flex-start;gap:10px;line-height:1.6}.garden-check input{width:20px;min-height:20px;margin:3px 0}.community-update{padding:15px 0;border-bottom:1px solid #ffffff18;overflow-wrap:anywhere}.community-update small{color:#aecbb1;font-size:12px}.community-update h5{font-size:15px;margin:8px 0}.community-update p{font-size:14px;line-height:1.8;margin:8px 0}.community-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.community-stats>div{padding:15px;border:1px solid #ffffff18;border-radius:10px}.community-stats b{display:block;font-size:25px;color:#d8ecc8}.community-stats small{display:block;font-size:12px;margin-top:7px;line-height:1.5}.community button:focus-visible,.community input:focus-visible,.community textarea:focus-visible,.community select:focus-visible{outline:2px solid #add2a9;outline-offset:3px}
@media(max-width:600px){.community .sheet-body{padding-bottom:max(24px,env(safe-area-inset-bottom))}.community .act{margin:8px 0 0!important}.community .sheet-body>.act,.community .garden-secondary>.act{width:100%}.garden-progress small{max-width:58px}.garden-story{font-size:15px}.garden-secondary{display:grid;grid-template-columns:1fr}.community-entry .ft-t{font-size:12px}.community-entry{margin-top:8px!important}.community-stats{gap:8px}}

/* Leave a separate row for language and close controls, including 320px screens. */
.sheet.community .gm-k{font-size:11px;line-height:1.5;min-height:38px;margin:0 0 5px;color:#b9c8bc;padding-right:100px}.sheet.community .sheet-title{padding-right:0;font-size:23px;line-height:1.4;letter-spacing:.02em}.sheet.community .sheet-body{overscroll-behavior:contain}

/* A persistent front door to creator submissions, independent of the current scene task. */
.community-launcher{position:absolute;z-index:6;right:16px;top:78px;display:flex;align-items:center;gap:12px;width:282px;min-height:60px;padding:11px 15px;border:1px solid #eff1c7;border-radius:16px;color:#202d26;background:linear-gradient(120deg,#d9e8c7,#f6e7ba);box-shadow:0 8px 30px #03080d60;text-align:left;cursor:pointer;touch-action:manipulation}
.community-launcher[hidden]{display:none}.community-launcher strong{display:block;font-size:16px;font-weight:750;letter-spacing:.03em;line-height:1.35}.community-launcher small{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:#405147}.community-launch-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#405c4520;font-size:24px}.community-launch-arrow{margin-left:auto;font-size:22px}.community-launcher:hover{filter:brightness(1.06)}.community-launcher:focus-visible{outline:3px solid #fff4ba;outline-offset:4px}
body.calm:has(.community-launcher:not([hidden])) .cam-cue{top:152px}
.community-visibility{margin:0;color:#c7d5c9;font-size:12px;line-height:1.7}.community .community-edit .act{width:100%;margin:0!important}.community-wall{margin-top:26px;border-top:1px solid #ffffff20;padding-top:8px}.community h4{font-size:16px;margin:18px 0 10px;line-height:1.5}.community-idea-meta{display:flex;justify-content:space-between;align-items:center;gap:10px}.community-status{font-size:11px;color:#d5dfb5;background:#a7bd6620;border:1px solid #c7df8e25;padding:4px 8px;border-radius:99px;white-space:nowrap}.community-update p{white-space:pre-wrap}.community-update .act{font-size:12px;min-height:44px;padding:8px 12px}.community-empty{border:1px dashed #bdd8bb45;border-radius:14px;padding:20px;font-size:14px;line-height:1.8;color:#c2d0c0}.community-mine{border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;margin:22px 0;padding:5px 0}.community-mine summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;color:#d6e1d3}
@media(max-width:600px){.community-launcher{left:10px;right:10px;top:calc(max(10px,env(safe-area-inset-top)) + 54px);width:auto;min-height:58px;padding:9px 13px;border-radius:14px}.community-launcher strong{font-size:15px}.community-launcher small{font-size:12px}body.calm:has(.community-launcher:not([hidden])) .cam-cue{top:calc(max(10px,env(safe-area-inset-top)) + 124px)}.community-edit textarea{font-size:16px}}
/* Connection status must stay readable without covering the creator entry. */
body.calm:has(.community-launcher:not([hidden])) .net{top:150px;max-width:min(420px,calc(100% - 32px));pointer-events:none;box-sizing:border-box}
body.calm:has(.community-launcher:not([hidden])):has(.net:not([hidden])) .cam-cue{display:none}
@media(max-width:600px){body.calm:has(.community-launcher:not([hidden])) .net{top:calc(max(10px,env(safe-area-inset-top)) + 124px)}}

/* Rain Alley: a small live interface, with pictures and short labels. */
.ui-icon{width:20px;height:20px;flex:none;vertical-align:middle;display:inline-block}.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px;border-radius:50%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.calm .hud{bottom:calc(78px + var(--safe-b));gap:12px}body.calm .focus:empty{display:none}body.calm .focus.compact-person{width:290px;padding:12px}body.calm .compact-person .f-name small{display:block!important;color:var(--ink3);font-size:12px;line-height:1.5}body.calm .compact-person .f-head{gap:8px}body.calm .compact-person .f-name{flex:1;min-width:0}body.calm .compact-person .f-name b{font-size:16px}body.calm .compact-person .f-acts{margin-top:10px;display:flex}body.calm .compact-person .f-acts .act{gap:7px;min-height:42px}body.calm .compact-person [data-go=follow],body.calm .compact-person [data-go=free]{display:inline-flex}body.calm .compact-person .f-mini{min-width:38px;min-height:38px;padding:7px}
body.calm .cast{padding:4px;border-radius:20px;flex:none}body.calm .cast button{width:54px;min-height:54px;padding:4px 2px;gap:2px}body.calm .cast button img.pt{width:32px;height:32px}body.calm .cast button b{font-size:11px;white-space:nowrap}body.calm .cast button .en-name{display:none}body.calm .cast .presence-mark{top:20px;font-size:9px}body.calm .live-moment{width:auto;max-width:300px;padding:8px}.live-show{display:flex;align-items:center;gap:10px;text-align:left}.live-show span{display:flex;align-items:center;gap:6px;font-size:13px}.live-show .pt{width:34px;height:34px}
.live-dock{position:absolute;z-index:7;bottom:calc(14px + var(--safe-b));left:50%;transform:translateX(-50%);width:min(540px,calc(100% - 24px));display:flex;align-items:center;gap:5px;padding:5px;border:1px solid #ffffff25;border-radius:22px;background:#151821ee;box-shadow:0 6px 25px #0004;backdrop-filter:blur(14px);box-sizing:border-box}.live-dock form{display:flex;flex:1;min-width:0;align-items:center}.live-dock input{background:transparent;border:0;color:var(--ink);font-size:16px;min-width:0;width:100%;padding:10px 2px;outline-offset:-2px}.live-dock .icon-button{color:#d8d8d9;background:transparent;border:0;flex:none}.live-dock button:disabled{opacity:.4}.live-dock .community-launcher{position:static;transform:none;display:flex;width:auto;min-height:44px;gap:6px;padding:8px 12px;border-radius:16px;box-shadow:none;flex:none}.live-dock .community-launcher[hidden]{display:none}.live-dock .community-launcher strong{font-size:13px;letter-spacing:0}.live-dock .community-launcher .ui-icon{width:19px;height:19px}.joint-quick{position:absolute;z-index:6;top:78px;left:16px;display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:18px;background:#292332e8;color:#ffe1a0;border:1px solid #f1c58255;min-height:44px}.joint-quick[hidden]{display:none}.joint-quick small{color:#e0d6c6;font-size:11px}.live-comments{max-height:260px;overflow:auto;font-size:14px;overflow-wrap:anywhere}.live-comments p{padding:9px 0;margin:0;border-bottom:1px solid #fff1}.dm-options{margin-top:14px}.dm-options summary{font-size:12px;color:var(--ink3);cursor:pointer}body.calm:has(.sheet.open) .live-dock,body.calm.companion-open .live-dock,body.calm.panel-open .live-dock{visibility:hidden}body.calm:has(.sheet.open) .joint-quick,body.calm.companion-open .joint-quick{display:none}body.calm:has(.community-launcher:not([hidden])) .cam-cue{top:74px}body.calm:has(.community-launcher:not([hidden])) .net{top:76px;font-size:12px;max-width:280px}body.calm .top-r #quickSound{padding:8px;background:#161820cc}
.ideas-intro{color:var(--ink3);font-size:14px;margin:6px 0 18px}.sheet.community .gm-k:empty{display:none}.sheet.community .sheet-title{font-size:24px;padding-right:60px}.ideas-tabs{display:flex;align-items:center;gap:6px;margin:22px 0 10px}.ideas-tabs button{border-radius:12px;padding:10px 12px;color:var(--ink3);font-size:13px;min-height:44px}.ideas-tabs [aria-pressed=true]{background:#fff1;color:var(--ink)}.ideas-tabs>span{margin-left:auto;color:var(--ink3);font-size:12px}.community-wall{margin:0!important;border:0!important;padding:0!important;display:grid;gap:8px}.idea-card{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;border:1px solid #ffffff17;border-radius:17px;padding:13px 12px;background:#ffffff04}.idea-card p{margin:0;font-size:14px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}.idea-mark{color:#bccfae;background:#d6e9b710;border-radius:10px;display:grid;place-items:center;width:32px;height:36px}.idea-like{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:44px;min-height:48px;color:#c6c2cc;border-radius:13px;background:#ffffff07}.idea-like b{font-size:12px}.idea-like.liked{color:#f5a0b4;background:#f795ae15}.idea-like.liked .ui-icon{fill:#f5a0b430}.idea-withdraw{grid-column:2/4;justify-self:start;color:var(--ink3);font-size:11px;min-height:32px}.community-empty{display:grid;justify-items:center;padding:24px!important;border:1px dashed #ffffff25;border-radius:18px;color:var(--ink3);text-align:center}.community-empty>.ui-icon{width:42px;height:42px;color:#e4d5a4}.community-empty p{margin:10px 0 0;font-size:13px}.idea-compose{margin:16px 0 8px}.idea-new{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border-radius:15px;background:#e2e9cc;color:#25312a;font-weight:650}.community-edit{margin:0}.community-edit textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:90px;border-radius:14px;font-size:16px;padding:12px}.idea-form-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}.idea-form-foot small{font-size:11px;color:var(--ink3)}.idea-form-foot .act{display:inline-flex;align-items:center;gap:6px;min-height:44px}.idea-help{margin:15px 0;color:var(--ink3);font-size:12px;line-height:1.7}.idea-help summary{cursor:pointer;min-height:30px}.idea-help>div{display:flex;gap:7px;flex-wrap:wrap}.idea-help .act{font-size:12px;min-height:40px;padding:8px 12px}.build-card{display:flex;align-items:center;gap:13px;border:1px solid #ebd19b40;border-radius:18px;padding:10px;background:#ebd19b0b;margin:12px 0}.build-card img{width:88px;height:88px;object-fit:cover;border-radius:12px}.build-card p{font-size:14px;line-height:1.6;margin:6px 0;overflow-wrap:anywhere}.build-state{display:flex;align-items:center;gap:5px;font-size:12px;color:#eed5a6}.garden-preview{width:100%;display:flex;align-items:center;gap:13px;text-align:left;background:linear-gradient(120deg,#26473a55,#1a243f55);border:1px solid #b5d3bc35;border-radius:18px;padding:12px;color:#e2e8d9}.garden-art{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:14px;background:radial-gradient(circle at 35% 25%,#e9d6a830,transparent 70%),#1c3533;color:#ddd2a0}.garden-art>.ui-icon{width:42px;height:42px}.garden-preview small{display:flex;align-items:center;gap:4px;color:#b3d8b9;font-size:11px}.garden-preview small .ui-icon{width:14px;height:14px}.garden-preview strong{display:block;margin-top:5px;font-size:15px}.garden-preview>.ui-icon{margin-left:auto}.community-update small .ui-icon{width:14px;height:14px;margin-right:4px}.community-update p{overflow-wrap:anywhere}.community-mine summary{font-size:13px;min-height:40px;padding-top:10px}.community-mine .community-update h5{font-size:15px;margin:6px 0}.sheet.community .sheet-body{padding-bottom:30px}
@media(max-width:600px){body.calm .hud{left:10px;right:10px;bottom:calc(78px + var(--safe-b));gap:8px;align-items:center}body.calm .focus.compact-person{width:100%;max-width:360px;box-sizing:border-box}body.calm .cast{width:auto;max-width:100%;margin:0 auto;padding:3px}body.calm .cast button{width:48px;min-height:52px}body.calm .cast button b{font-size:10px}body.calm .cast button img.pt{width:30px;height:30px}.live-dock{width:calc(100% - 20px);gap:1px;padding:4px}.live-dock .icon-button{min-width:36px;padding:7px}.live-dock .community-launcher{padding:8px 10px;gap:4px;left:auto;right:auto;top:auto;min-height:44px}.live-dock .community-launcher strong{font-size:12px}.live-dock .community-launcher .ui-icon{width:18px;height:18px}.joint-quick{left:10px;top:calc(max(10px,env(safe-area-inset-top)) + 54px);padding:8px 10px;font-size:12px}.joint-quick small{font-size:10px}body.calm:has(.community-launcher:not([hidden])) .cam-cue{top:calc(max(10px,env(safe-area-inset-top)) + 58px)}body.calm:has(.community-launcher:not([hidden])) .net{top:calc(max(10px,env(safe-area-inset-top)) + 58px)}.sheet.community .sheet-panel{align-self:flex-end;margin:0;width:100%;max-height:85svh;border-radius:24px 24px 0 0}.sheet.community .sheet-body{padding:22px 16px 30px}.sheet.community .sheet-title{font-size:23px;margin-top:12px}.idea-card{gap:8px;padding:10px}.idea-card p{font-size:14px}.build-card img{width:64px;height:72px}.community-empty{padding:20px!important}}
@media(max-width:899px){body.calm.cp-kb:has(#liveCommentText:focus) .live-dock{position:fixed;top:calc(var(--cp-vvtop,0px) + var(--cp-vvh,100svh) - 66px);bottom:auto}body.calm.cp-kb:has(#liveCommentText:focus) .hud{visibility:hidden}.sheet.community:has(textarea:focus) .sheet-panel{max-height:calc(var(--cp-vvh,100svh) - 16px)}}
/* Keep drawer controls outside the scrolling content, including on short phones. */
.sheet.community .sheet-panel{padding-top:58px;box-sizing:border-box}.sheet.community .sheet-body{padding-top:0}.sheet.community .sheet-title{padding-right:0;margin-top:0}

/* Launch: compact community invitation and creator controls. */
.community-round{display:grid;gap:7px;padding:14px 16px;margin:0 0 16px;border:1px solid #d7dfb92e;border-radius:14px;background:#d7dfb908}.community-round small{font-size:11px;color:#b6c3a5}.community-round strong{font-size:15px;font-weight:500;line-height:1.55;overflow-wrap:anywhere}.community-round span{font-size:12px;color:#aab9aa}.community-campaign-edit{margin-bottom:20px}.community-campaign-edit summary{min-height:44px;cursor:pointer;line-height:1.6}.moderation-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}.moderation-actions .act{min-height:44px}.moderation-actions span{font-size:12px;overflow-wrap:anywhere}.moderation-list p{overflow-wrap:anywhere}

/* Player presence: one compact entry, all customization stays in its sheet. */
.player-hud{position:absolute;z-index:6;top:calc(78px + env(safe-area-inset-top,0px));right:16px;display:flex;align-items:center;gap:3px;padding:3px;border:1px solid #ffffff25;border-radius:18px;background:#141d24e8;backdrop-filter:blur(12px);box-shadow:0 4px 18px #0003}
.player-hud[hidden]{display:none}.player-hud button{display:flex;gap:7px;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:8px 11px;border-radius:14px;color:#e5ece7;font-size:13px}.player-hud button:hover{background:#ffffff10}.player-hud svg{width:19px;height:19px}.player-hud #playerCount{color:#b8c8bd;font-variant-numeric:tabular-nums}.player-hud #playerCount>span{color:#9bcbb0;font-size:9px}.player-hud #playerFollow{font-size:24px;padding:3px}
.player-labels{position:absolute;inset:0;pointer-events:none;z-index:4}.player-labels button{position:absolute;left:0;top:0;pointer-events:auto;min-height:32px;max-width:130px;padding:5px 10px;color:#e4e9e5;background:#172324cc;border:1px solid #a2bfac55;border-radius:12px;font-size:11px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;box-shadow:0 2px 10px #0005}.player-labels button.mine{border-color:#a4ddbd;color:#c5f2d7}.player-labels [hidden]{display:none}
body.calm:has(.sheet.open) .player-hud,body.calm:has(.sheet.open) .player-labels,body.calm.companion-open .player-hud,body.calm.companion-open .player-labels,body.calm.panel-open .player-hud,body.calm.menu-open .player-hud{visibility:hidden}
.sheet.player .sheet-panel{height:auto;max-height:calc(100dvh - 24px);align-self:center;margin-right:16px;border:1px solid var(--line);border-radius:22px}.sheet.player .sheet-body{flex:0 1 auto;overscroll-behavior:contain}.sheet.player .sheet-title{padding-right:96px;font-size:21px;line-height:1.4}.player-preview{display:grid;place-items:center;margin:12px auto;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle,#91bda727,#3f596407);border:1px solid #ffffff0c}.player-preview svg{width:84px;height:94px}.sheet.player form{display:grid;gap:14px}.sheet.player label{display:grid;gap:6px;font-size:13px;color:#d0d9d2}.sheet.player input:not([type=checkbox]){width:100%;min-height:44px;padding:10px 12px;background:#152021;color:#f1eee7;border:1px solid #71887c77;border-radius:10px;box-sizing:border-box;font-size:16px;font-family:inherit}.player-options,.player-colors,.player-places{display:flex;gap:6px;justify-content:space-between}.player-options button,.player-places button{flex:1;padding:10px 8px;min-height:44px;border-radius:10px;border:1px solid #ffffff22;font-size:13px}.player-options [aria-pressed=true]{background:#8cbda922;border-color:#a1cfb4;color:#cdf0d7}.player-colors button{width:44px;height:44px;min-width:34px;border-radius:50%;background:var(--swatch);border:4px solid #192321;color:#172e26;font-size:19px}.player-colors [aria-pressed=true]{outline:2px solid #d9eee1;outline-offset:1px}.sheet.player label.player-accessory{display:flex;align-items:center;gap:10px;min-height:44px}.player-accessory input{width:22px;height:22px;accent-color:#9ac7ad}.player-submit{width:100%;min-height:46px}.player-places{margin:18px 0 8px}.sheet.player .act{min-height:44px}.sheet.player .small{line-height:1.7;font-size:13px;overflow-wrap:anywhere}.sheet.player a{color:#b6dbbf}.player-roster{display:grid;gap:8px;margin:16px 0}.player-roster button{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border:1px solid #ffffff16;border-radius:12px;text-align:left}.player-roster svg{width:32px;height:42px;flex:none}.player-roster span{overflow-wrap:anywhere}.player-roster small{margin-left:auto;flex:none;color:#b2cabb;font-size:12px}.player-hud button:focus-visible,.player-labels button:focus-visible,.sheet.player :is(button,input,a):focus-visible{outline:2px solid #c3e1b6;outline-offset:3px}#playerLimit{padding-top:18px;border-top:1px solid #fff2}
@media(max-width:600px){.player-hud{right:10px;top:calc(78px + env(safe-area-inset-top,0px))}.player-hud button{padding:7px 9px;font-size:12px}.player-hud .player-main{gap:5px}.player-hud svg{width:17px;height:17px}.sheet.player .sheet-panel{align-self:flex-end;margin:0;width:100%;max-height:calc(100dvh - 24px);border-radius:22px 22px 0 0}.sheet.player .sheet-body{padding-bottom:max(20px,env(safe-area-inset-bottom))}.player-labels button{min-height:36px}.player-preview{width:96px;height:96px;margin:8px auto}.player-preview svg{height:78px}.player-options button,.player-places button{padding:10px 5px;font-size:12px}body.calm:has(.player-hud:not([hidden])) .joint-quick{top:136px;left:10px}body.calm:has(.player-hud:not([hidden])) .net{top:136px;max-width:calc(100% - 24px)}body.calm:has(.player-hud:not([hidden])) .cam-cue{top:136px}}
@media(prefers-reduced-motion:reduce){.player-hud,.player-labels button{backdrop-filter:none}}

@media(max-width:600px){body.calm.player-walking .toast{top:calc(144px + env(safe-area-inset-top,0px));bottom:auto}}

/* Notes stay at their place after a visitor leaves; replies stay in their inbox. */
.player-hud .trace-journal{position:relative}.trace-journal svg{width:21px;height:21px}.trace-journal b{position:absolute;top:0;right:0;min-width:16px;height:16px;display:grid;place-items:center;border-radius:9px;background:#e2bb74;color:#1d2822;font-size:10px;padding:0 2px}.trace-journal.unread{color:#f5ce8a;background:#e5b76a18}
.trace-pins{position:absolute;inset:0;pointer-events:none;z-index:5}.trace-pins>button{position:absolute;left:0;top:0;pointer-events:auto;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ddbd7c80;border-radius:15px;background:#233030e8;color:#e6ca97;box-shadow:0 3px 12px #0007}.trace-pins svg{width:24px;height:24px}.trace-pins b{position:absolute;top:-5px;right:-5px;min-width:16px;padding:2px;border-radius:10px;background:#e3c292;color:#1b2e26;font-size:10px}.trace-pins .near{border-color:#f4db9d;box-shadow:0 0 14px #e0be6a44}.trace-pins[hidden],.trace-pins>button[hidden]{display:none}body.calm:has(.sheet.open) .trace-pins,body.calm.companion-open .trace-pins,body.calm.panel-open .trace-pins,body.calm.menu-open .trace-pins{visibility:hidden}
.sheet.traces .sheet-panel{height:auto;max-height:calc(100dvh - 24px);align-self:center;margin-right:16px;border:1px solid var(--line);border-radius:22px}.sheet.traces .sheet-body{flex:0 1 auto;overscroll-behavior:contain;max-width:600px}.trace-top{display:flex;gap:8px;align-items:center;padding-right:94px;margin:-9px 0 8px;min-height:44px;color:#bac7bf}.trace-top>button{flex:none;width:32px;height:44px;border-radius:10px;font-size:28px}.trace-top>span{font-size:12px;line-height:1.4}.sheet.traces .sheet-title{font-size:22px;line-height:1.4;padding-right:0;letter-spacing:0}.trace-destinations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:22px 0}.trace-destinations button{display:grid;justify-items:center;align-content:start;gap:8px;padding:14px 5px;border-radius:17px;border:1px solid #ffffff1f;background:#ffffff04;min-height:130px}.trace-destinations strong{font-size:14px}.trace-destinations small{font-size:12px;color:#b1c0b8}.trace-glyph{display:grid;place-items:center;border-radius:14px;color:var(--trace-color,#dec69a);background:#ffffff07;width:44px;height:48px}.trace-glyph svg{width:28px;height:28px}.trace-inbox{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:12px;border:1px solid #a8c7b62e;border-radius:14px;background:#8bbba90a;text-align:left;font-size:14px}.trace-inbox svg{width:22px;height:22px;flex:none}.trace-inbox span{flex:1}.trace-inbox b{color:#e9c98f}
.trace-list{display:grid;gap:10px;margin:18px 0;max-width:100%}.trace-card{display:flex;gap:12px;text-align:left;padding:13px 10px;border:1px solid #ffffff1b;border-radius:15px;background:#ffffff04;min-width:0;width:100%}.trace-card>.trace-glyph{flex:none;width:35px;height:42px}.trace-card>span:last-child{min-width:0;flex:1}.trace-card strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:14px;line-height:1.6;font-weight:400;margin:8px 0}.trace-card small{font-size:12px;color:#aebdb3}.trace-card.unread{border-color:#e7bd7866}.trace-card.unread small{color:#e9c38c}.trace-author{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:12px;line-height:1.5;color:#becfc3;min-width:0;overflow-wrap:anywhere}.trace-author i{width:9px;height:9px;border-radius:50%;background:var(--trace-color);flex:none}.trace-author time{color:#8e9f94;font-size:11px;margin-left:auto}.trace-empty{text-align:center;padding:22px 10px;color:#bac9be;font-size:14px;line-height:1.8}.trace-empty>svg{width:40px;height:40px;color:#bdc9b7}.trace-letter{margin:20px 0;padding:16px;border-radius:18px;background:linear-gradient(140deg,#d7b88b15,#66867608);border:1px solid #bfa87844}.trace-letter-gift{display:grid;place-items:center;color:var(--trace-color);height:66px}.trace-letter-gift svg{width:44px;height:44px}.trace-letter p,.trace-response p{font-size:15px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0}.trace-letter>small{color:#a6b7a9;font-size:11px}.trace-letter-head{display:flex;align-items:start;gap:4px}.trace-letter-head>.trace-author{flex:1}.trace-replies{display:grid;gap:10px}.trace-response{padding:12px 14px;border-left:2px solid #9abbab55;background:#ffffff04;border-radius:0 12px 12px 0}.trace-response p{font-size:14px}.hidden-note{opacity:.6}.trace-options{position:relative;flex:none}.trace-options>summary{display:grid;place-items:center;list-style:none;width:36px;min-height:44px;cursor:pointer;border-radius:10px}.trace-options>summary::-webkit-details-marker{display:none}.trace-options[open]>div{position:absolute;top:42px;right:0;z-index:3;width:200px;padding:6px;background:#222b29;border:1px solid #5b6c60;border-radius:12px;box-shadow:0 6px 24px #0009}.trace-options button{width:100%;min-height:44px;text-align:left;padding:9px;font-size:13px}.trace-options button:hover{background:#ffffff0a}.trace-location{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:12px 0;color:#b6c7b8}.trace-location button{min-height:44px;padding:8px 0;font-size:12px}.trace-location [data-copy]{width:44px;display:grid;place-items:center}.trace-location svg{width:21px;height:21px}
.trace-compose{display:grid;gap:8px;margin:18px 0 0;border-top:1px solid #ffffff16;padding-top:18px}.trace-compose label{font-size:12px;line-height:1.6;color:#b9c6bb}.trace-compose textarea{width:100%;box-sizing:border-box;min-height:88px;resize:vertical;padding:12px;background:#151f20;border:1px solid #798e7d77;border-radius:12px;font:16px/1.6 inherit;color:#f0ece0;font-family:inherit;font-size:16px;line-height:1.6}.trace-public{font-size:11px;line-height:1.6;color:#96a99a;margin:0 0 3px}.sheet.traces .act{min-height:46px;white-space:normal}.trace-compose .act,.sheet.traces>[data-travel]{width:100%}.trace-error{color:#e5bc96;font-size:13px;line-height:1.7}.sheet.traces :is(button,input,textarea,a,summary):focus-visible,.trace-pins>button:focus-visible{outline:2px solid #ddcba5;outline-offset:3px}.trace-compose button:disabled{opacity:.6}
@media(max-width:600px){.sheet.traces .sheet-panel{align-self:flex-end;margin:0;width:100%;max-height:calc(100dvh - 20px);border-radius:22px 22px 0 0}.sheet.traces .sheet-body{padding-bottom:max(24px,env(safe-area-inset-bottom))}.trace-top{gap:4px}.trace-top>span{font-size:11px}.trace-destinations{gap:6px}.trace-destinations small{font-size:11px}.trace-author time{font-size:10px}.trace-card{gap:8px;padding:12px 9px}.trace-letter{padding:14px}.trace-card .trace-author time{width:100%;margin-left:14px}.trace-compose textarea{font-size:16px}.sheet.traces .sheet-title{font-size:21px}}

/* Walking exploration: one compass, one contextual action, no persistent task wall. */
.explore-nearby{position:absolute;z-index:7;left:50%;bottom:calc(154px + var(--safe-b));transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);min-height:44px;padding:10px 16px;border:1px solid #bfdbb687;border-radius:24px;background:#1d322eee;color:#e8efd7;box-shadow:0 5px 24px #0005;font-size:14px;white-space:nowrap}.explore-nearby[hidden]{display:none}.explore-nearby .ui-icon{width:20px;height:20px}.explore-nearby .ui-icon:last-child{width:16px}
.sheet.exploration .sheet-panel{height:auto;max-height:calc(100dvh - 24px);align-self:center;margin-right:16px;border:1px solid var(--line);border-radius:22px}.sheet.exploration .sheet-body{flex:0 1 auto;overscroll-behavior:contain}.sheet.exploration .sheet-title{font-size:23px;line-height:1.4;padding-right:80px}.explore-quest{display:flex;align-items:center;gap:12px;width:100%;padding:16px 12px;margin:16px 0;border:1px solid #b4c99b60;border-radius:16px;background:linear-gradient(120deg,#435e453d,#9a85582b);text-align:left}.explore-quest>span:nth-child(2){flex:1}.explore-quest strong{display:block;font-size:15px;line-height:1.5}.explore-quest small{display:block;margin-top:5px;color:#c5cfb8;font-size:13px}.explore-glyph{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;background:#a7c3b015;color:#b6d6be}.explore-glyph .ui-icon{width:26px;height:26px}.explore-places{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.explore-places button{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:90px;padding:12px;border:1px solid #ffffff18;border-radius:14px;background:#a1b7b405;text-align:left}.explore-places strong{font-size:14px;font-weight:550;flex:1;min-width:50px}.explore-places button>.ui-icon{width:15px;color:#98b2a3}.explore-boundary-art{display:grid;place-items:center;height:140px;border-radius:16px;background:radial-gradient(ellipse at 35% 0,#c5ac6c40,transparent 55%),linear-gradient(145deg,#293e44,#18252e 65%,#0c1720);border:1px solid #76939730;margin-top:20px}.explore-boundary-art svg{width:58px;height:58px;stroke-width:1;color:#d8caa4}.explore-build-path{font-size:12px;line-height:1.8;color:#a4b5b2;margin:18px 0}.sheet.exploration .act{min-height:44px}.sheet.exploration :is(button,a):focus-visible,.explore-nearby:focus-visible{outline:2px solid #c3e1b6;outline-offset:3px}.sheet.exploration .sheet-sub{line-height:1.8;font-size:14px}.sheet.exploration .ui-icon{flex-shrink:0}
@media(max-width:600px){.player-hud{max-width:calc(100% - 20px)}.player-hud button{padding-left:7px;padding-right:7px}.player-hud .player-main span{max-width:94px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sheet.exploration .sheet-panel{width:100%;align-self:flex-end;margin:0;border-radius:22px 22px 0 0}.sheet.exploration .sheet-body{padding:22px 16px max(24px,env(safe-area-inset-bottom))}.explore-places button{padding:10px;gap:6px}.explore-places .explore-glyph{width:32px;height:36px}.explore-places strong{font-size:13px}.explore-nearby{font-size:13px}}

/* Direct walking controls stay off text inputs and modal surfaces. */
.walk-stick{position:absolute;z-index:8;left:max(14px,env(safe-area-inset-left));bottom:calc(156px + var(--safe-b));width:102px;height:102px;border-radius:50%;border:1px solid #d5e3cd55;background:radial-gradient(circle,#6f8f7d28,#182a3299);box-shadow:inset 0 0 20px #101e2840,0 5px 20px #0003;touch-action:none;user-select:none;-webkit-user-select:none;display:grid;place-items:center;cursor:grab}.walk-stick[hidden],.walk-keys[hidden]{display:none}.walk-stick-cross{font-size:44px;font-weight:200;color:#d3ddcd30;line-height:1;pointer-events:none}.walk-stick-knob{position:absolute;width:42px;height:42px;border-radius:50%;border:1px solid #d2e4c78c;background:#8bb09b70;box-shadow:0 3px 12px #0003;transform:translate(var(--stick-x,0px),var(--stick-y,0px));pointer-events:none}.walk-stick.held{border-color:#d1e9bb99;background:#2d4a45aa}.walk-stick.held .walk-stick-knob{background:#b3d0aeb0}.walk-stick:focus-visible{outline:2px solid #d1e9bb;outline-offset:4px}.walk-keys{position:absolute;z-index:5;left:20px;bottom:calc(168px + var(--safe-b));padding:8px 12px;border-radius:12px;background:#15232bcc;color:#c1d4c4;font:12px/1.6 system-ui;pointer-events:none}.walk-stick-visible .explore-nearby{left:auto;right:12px;transform:none;max-width:calc(100% - 140px);gap:7px;padding:10px 12px}.walk-stick-visible .explore-nearby span{overflow:hidden;text-overflow:ellipsis}.walk-stick-visible .explore-nearby .ui-icon{flex:none}.walk-stick-visible .explore-nearby .ui-icon:last-child{display:none}body:has(.sheet.open) :is(.walk-stick,.walk-keys),body:is(.companion-open,.menu-open,.panel-open,.cp-kb) :is(.walk-stick,.walk-keys){visibility:hidden}@media(max-height:500px){.walk-stick{bottom:calc(96px + var(--safe-b));width:86px;height:86px}.walk-keys{bottom:calc(146px + var(--safe-b))}}

/* Explicit life delegation and touch actions share the existing character sheet. */
.player-labels button.delegated{border-style:dashed;color:#c3c6d9}
.stay-memories{display:grid;gap:12px;margin:16px 0}.stay-memories article{padding:14px;border:1px solid #ffffff20;border-radius:14px;background:#ffffff05}.stay-memories p{line-height:1.65;margin:7px 0}.stay-memories time,.stay-memories small{color:#adbdb6;font-size:12px}.stay-memories article>div{display:flex;gap:12px}.stay-memories button{min-height:44px;padding:8px 10px;color:#c9e7cf}
.walk-actions{position:absolute;z-index:7;right:14px;bottom:calc(156px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;gap:10px;touch-action:none;user-select:none}.walk-actions[hidden]{display:none}.walk-actions button{width:52px;height:52px;border-radius:50%;border:1px solid #c6dfcf66;background:#283b3bbd;color:#e8f4e8;font-size:13px;touch-action:none;backdrop-filter:blur(6px)}.walk-actions .walk-jump{width:64px;height:64px;font-size:16px}.walk-actions [aria-pressed=true]{background:#acc9b6;color:#182a22}.walk-actions button:focus-visible{outline:2px solid #d2f6db;outline-offset:3px}
@media(max-height:500px) and (orientation:landscape){.walk-actions{bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
.walk-stick-visible .explore-nearby{bottom:calc(232px + var(--safe-b))}
body:has(.sheet.open) .walk-actions,body:is(.companion-open,.menu-open,.panel-open,.cp-kb) .walk-actions{visibility:hidden}
@media(max-height:500px) and (orientation:landscape){.walk-stick-visible .explore-nearby{bottom:calc(174px + var(--safe-b))}}

.player-hud .player-main{position:relative}.player-new{position:absolute;top:-2px;right:4px;color:#f3ca89;font-size:20px;line-height:1}

/* One optional personal route and one nearby action; the scene stays playable. */
.walk-goal{position:absolute;z-index:6;top:calc(138px + env(safe-area-inset-top,0px));right:16px;display:flex;align-items:center;width:290px;max-width:calc(100% - 20px);border:1px solid #a7c69b50;border-radius:16px;background:#192b2bea;box-shadow:0 4px 18px #0003;color:#e2ecd7}.walk-goal[hidden],.walk-goal-pin[hidden]{display:none}.walk-goal-main{display:flex;align-items:center;gap:10px;min-width:0;min-height:60px;flex:1;padding:9px 4px 9px 12px;text-align:left}.walk-goal-main>span:not(.garden-journey-progress){flex:1;min-width:0}.walk-goal strong,.walk-goal small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.walk-goal strong{font-size:13px;font-weight:550}.walk-goal small{font-size:11px;color:#adc2b4;margin-top:4px}.walk-goal-main>.ui-icon{width:16px;flex:none}.walk-goal-hide{display:grid;place-items:center;width:44px;min-height:50px;flex:none;color:#a6b9ac}.walk-goal-hide .ui-icon{width:16px}.garden-journey-progress{display:flex;justify-content:center;align-items:center;gap:14px;margin:18px 0}.garden-journey-progress>[role=listitem]{position:relative;display:grid;place-items:center;width:42px;height:42px;border:1px solid #a0b79e30;border-radius:14px;color:#849489;background:#93ac8c08}.garden-journey-progress .ui-icon{width:24px;height:24px}.garden-journey-progress>.current{color:#f1d59d;border-color:#d7bd7866;background:#d7bd7815}.garden-journey-progress>.done{color:#b9dca9;border-color:#b9dca966}.garden-journey-progress b{position:absolute;right:-5px;bottom:-4px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#b9dca9;color:#18251c}.garden-journey-progress b .ui-icon{width:12px;height:12px}.walk-goal .garden-journey-progress{gap:3px;margin:0;flex:none}.walk-goal .garden-journey-progress>[role=listitem]{width:20px;height:25px;border-radius:7px;border-color:transparent}.walk-goal .garden-journey-progress .ui-icon{width:16px;height:16px}.walk-goal .garden-journey-progress b{width:10px;height:10px;right:-1px;bottom:-1px}.walk-goal .garden-journey-progress b .ui-icon{width:8px;height:8px}.walk-goal-pin{position:absolute;z-index:5;top:0;left:0;display:grid;place-items:center;width:44px;height:44px;border:1px solid #eddca28c;border-radius:14px;background:#283f35ed;color:#f1dba2;box-shadow:0 4px 16px #0005}.walk-goal-pin .ui-icon{width:25px;height:25px}.explore-nearby kbd{display:grid;place-items:center;width:23px;height:23px;border:1px solid #d1ddbc66;border-radius:6px;font:12px system-ui;flex:none}.walk-goal button:focus-visible,.walk-goal-pin:focus-visible,.garden-choice:focus-visible{outline:2px solid #dbebc1;outline-offset:3px}
.sheet.community.garden-walk .sheet-panel{height:auto;width:380px;max-height:calc(100dvh - 24px);align-self:center;margin-right:16px;border-radius:22px;border:1px solid #b3cba238}.garden-walk .sheet-body{padding:25px 22px;flex:0 1 auto;overscroll-behavior:contain}.garden-walk .gm-k{display:none}.garden-walk .sheet-title{font-size:21px;line-height:1.45;padding-right:92px;margin:8px 0 16px}.garden-walk .garden-story,.garden-walk-line{font-size:14px;line-height:1.7;margin:14px 0 18px;color:#ced9c9}.garden-walk .garden-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.garden-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:132px;padding:14px 9px;border:1px solid #b8c7b044;border-radius:16px;background:radial-gradient(ellipse at 50% 15%,#8eaa7133,#23322c50);color:#dce6cd}.garden-choice:disabled{opacity:.45}.garden-choice>span{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#c0cda70c;color:#d5bc8d}.garden-choice .ui-icon{width:42px;height:42px;stroke-width:1.3}.garden-choice strong{font-size:13px;font-weight:550;line-height:1.5}.garden-choice.choice-awning>span{color:#9cabbb}.garden-choice.choice-soup>span{color:#ddae8c}.choice-moon{color:#fff0d6}.choice-sun{color:#f1bf63}.garden-choice.choice-moon>span{color:#fff0d6}.garden-choice.choice-sun>span{color:#f1bf63}.garden-finish-art{height:105px;display:grid;place-items:center;background:radial-gradient(ellipse,#92af602b,transparent 68%)}.garden-finish-art .ui-icon{width:70px;height:70px;stroke-width:1.2}.garden-walk .act{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;box-sizing:border-box;margin-top:10px}.garden-walk .gm-receipt{font-size:13px;line-height:1.65;margin-bottom:0}.garden-walk .garden-saved{font-size:12px;line-height:1.6;margin:15px 0 0}.garden-walk .garden-saved a{color:#b9dca9}
@media(max-width:600px){.walk-goal{right:10px;width:280px}.garden-guided .joint-quick,body.calm.garden-guided:has(.player-hud:not([hidden])) :is(.net,.cam-cue){top:calc(210px + env(safe-area-inset-top,0px))}body.calm.player-walking.garden-guided .toast{top:calc(214px + env(safe-area-inset-top,0px))}.sheet.community.garden-walk .sheet-panel{width:100%;align-self:flex-end;margin:0;border-radius:22px 22px 0 0}.garden-walk .sheet-body{padding:22px 16px max(24px,env(safe-area-inset-bottom))}.garden-walk .garden-options{gap:10px}}
@media(any-pointer:coarse){.explore-nearby kbd{display:none}}
@media(max-height:500px) and (orientation:landscape){.walk-goal{top:calc(134px + env(safe-area-inset-top,0px));width:260px}.walk-goal-main{min-height:48px}.garden-walk .garden-options{gap:8px}.garden-choice{min-height:96px;flex-direction:row}.garden-choice>span{width:36px;height:36px;flex:none}.garden-choice .ui-icon{width:30px;height:30px}.garden-finish-art{height:60px}.garden-finish-art .ui-icon{width:48px;height:48px}}
.player-hud #playerCount{white-space:nowrap;flex:none;gap:5px;padding-inline:6px}.player-hud .player-main{min-width:0}.player-hud .player-main svg{flex:none}.walk-keys{max-width:calc(100% - 40px)}
@media(max-width:600px){body:has(.explore-nearby:not([hidden])) .walk-keys{bottom:calc(210px + var(--safe-b))}}
@media(max-height:500px){body:has(.explore-nearby:not([hidden])) .walk-keys{display:none}}
.sheet.river .sheet-panel{height:auto;align-self:center;margin:16px;max-height:calc(100dvh - 32px);border:1px solid var(--line);border-radius:22px}.sheet.river .sheet-body{flex:0 1 auto}.sheet.river .sheet-title{padding-right:80px}.river-notes{display:flex;gap:12px;margin:24px 0}.river-note{display:grid;place-items:center;flex:1;min-height:112px;border:1px solid #b1cbbb44;border-radius:18px;background:#253935;color:#9cb9b2}.river-note svg{width:32px;height:32px}.river-note span{font-size:22px;letter-spacing:4px}.river-note.note-0{color:#e7bd71}.river-note.note-1{color:#8cd3c7}.river-note.note-2{color:#c5a2db}.river-note.played{box-shadow:inset 0 0 25px #e7bd712d;border-color:currentColor}.river-note:focus-visible{outline:2px solid currentColor;outline-offset:4px}.river-status{font-size:13px;line-height:1.7;color:#b9cfc2}.sheet.river .sheet-sub{font-size:14px;line-height:1.7}.sheet.river .act{min-height:44px}@media(max-width:600px){.sheet.river .sheet-panel{align-self:flex-end;margin:0;width:100%;max-height:calc(100dvh - 24px);border-radius:22px 22px 0 0}.river-notes{gap:9px}.river-note{min-height:100px}}