/* ===== 剧本杀：编辑器 ===== */
.ve { max-width:760px; margin:0 auto; padding:0 0 40px; }
.ve-head { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px; padding:10px 4px; background:var(--bar); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.ve-head .ve-back { width:38px; height:38px; padding:0; border:0; background:none; font-size:26px; line-height:1; border-radius:50%; }
.ve-saved { flex:1; min-width:0; text-align:right; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ve-head .ve-more { width:34px; height:38px; padding:0; border:0; background:none; font-size:20px; }
.ve-menu { position:absolute; right:4px; top:48px; min-width:150px; padding:6px; border-radius:14px; background:var(--card); border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:30; }
.ve-menu button { display:block; width:100%; text-align:left; border:0; background:none; padding:10px 12px; border-radius:10px; }
.ve-menu button.danger { color:#e5484d; }
.ve-tabs { display:flex; border-bottom:1px solid var(--border); margin:0 -2px; }
.ve-tabs button { flex:1; border:0; border-radius:0; background:none; padding:12px 4px; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; white-space:nowrap; }
.ve-tabs button:hover { transform:none; }
.ve-tabs button.on { color:var(--fg); border-bottom-color:var(--accent2); }
.ve-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:14px 0 6px; }
.ve-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:10px; font-size:13.5px; background:rgba(229,72,77,.12); color:#e5484d; }
.ve-chip i { width:15px; height:15px; border-radius:50%; background:#e5484d; color:#fff; font-style:normal; font-size:11px; font-weight:800; display:grid; place-items:center; }
.ve-chip.ok { background:rgba(46,160,67,.13); color:#2ea043; } .ve-chip.ok i { background:#2ea043; }
.ve-hint { text-align:center; color:var(--muted); font-size:13px; padding:4px 0 12px; border-bottom:1px solid var(--border); }
.ve-count { text-align:center; color:var(--muted); font-size:13px; padding:10px 0; border-bottom:1px solid var(--border); }
.ve-sec { padding:22px 2px; border-bottom:1px solid var(--border); }
.ve-sec:last-of-type { border-bottom:0; }
.ve-sec h3 { margin:0 0 14px; font-size:21px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ve-sec h3 small { font-size:13px; font-weight:500; color:var(--muted); }
.ve-sec label.ve-l { display:block; margin:16px 0 6px; font-weight:600; font-size:15px; }
.ve-sec label.ve-l small { font-weight:400; color:var(--muted); }
.ve-seg { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ve-seg.three { grid-template-columns:repeat(3,1fr); }
.ve-seg button { padding:14px 8px; border-radius:14px; background:var(--card2); border:1px solid var(--border); font-size:16px; }
.ve-seg button.on { border-color:var(--accent2); background:color-mix(in srgb,var(--accent2) 14%,var(--card2)); font-weight:600; }
.ve-note { color:var(--accent2); font-size:14px; margin:10px 0 0; }
.ve-wide { width:100%; margin-bottom:10px; }
.ve-ta { position:relative; }
.ve-ta textarea { padding-bottom:30px; }
.ve-ta .ve-cnt { position:absolute; right:14px; bottom:9px; font-size:12.5px; color:var(--muted); pointer-events:none; }
.ve-empty { text-align:center; padding:26px 16px; border-radius:20px; background:var(--card2); border:1px solid var(--border); }
.ve-empty .ico { font-size:42px; line-height:1.2; } .ve-empty p { color:var(--muted); margin:8px 0 14px; }
.ve-empty .btns { display:flex; gap:10px; } .ve-empty .btns button { flex:1; }
.ve-need { color:#e5484d; font-size:13px; margin:8px 0 0; text-align:center; }
.ve-list { display:grid; gap:10px; margin-bottom:12px; }
.ve-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; background:var(--card2); border:1px solid var(--border); }
.ve-item .av { width:48px; height:48px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center; background:var(--card); font-size:24px; }
.ve-item .av img { width:100%; height:100%; object-fit:cover; }
.ve-item .tx { flex:1; min-width:0; } .ve-item .tx b { display:block; } .ve-item .tx small { display:block; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ve-item button { width:34px; height:34px; padding:0; border-radius:50%; border:0; background:none; }
.ve-bgs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.ve-bg { position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden; background:var(--card2); border:1px solid var(--border); }
.ve-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.ve-bg span { position:absolute; left:0; right:0; bottom:0; padding:16px 8px 6px; font-size:12.5px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.7)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ve-bg button { position:absolute; top:6px; right:6px; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:13px; }
.ve-nav { display:flex; gap:10px; padding-top:22px; } .ve-nav button { flex:1; padding:14px; }
.ve-turn { padding:12px; border-radius:16px; background:var(--card2); border:1px solid var(--border); margin-bottom:10px; }
.ve-turn .row { display:flex; gap:8px; margin-bottom:8px; align-items:center; } .ve-turn select { flex:1; min-width:0; padding:8px 10px; font-size:14px; }
.ve-turn .row button { width:32px; height:32px; padding:0; border:0; border-radius:50%; background:none; flex:none; }
.ve-turn textarea { background:var(--card); }
.ve-choice { border-radius:16px; background:var(--card2); border:1px solid var(--border); margin-bottom:10px; overflow:hidden; }
.ve-choice .hd { display:flex; align-items:center; gap:10px; padding:12px 14px; }
.ve-choice .hd b { flex:1; } .ve-choice .hd button { width:32px; height:32px; padding:0; border:0; background:none; border-radius:50%; }
.ve-choice .bd { padding:0 14px 14px; }
.ve-sw { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 2px; cursor:pointer; }
.ve-sw .tt { flex:1; min-width:0; } .ve-sw .tt b { display:block; font-size:17px; font-weight:600; } .ve-sw .tt small { display:block; color:var(--muted); margin-top:3px; line-height:1.5; }
.ve-sw input { position:relative; appearance:none; -webkit-appearance:none; width:46px; height:28px; padding:0; flex:none; border-radius:999px; background:var(--border); border:0; cursor:pointer; transition:background .15s; }
.ve-sw input::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.ve-sw input:checked { background:var(--accent2); } .ve-sw input:checked::after { transform:translateX(18px); }
.ve-sub { margin:0 0 6px; padding:12px; border-radius:14px; background:var(--card2); border:1px solid var(--border); }
.ve-tags { display:flex; flex-wrap:wrap; gap:8px; }
.ve-tags .tg { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:var(--card2); border:1px solid var(--border); font-size:14px; }
.ve-tags .tg button { padding:0; border:0; background:none; width:18px; height:18px; line-height:1; color:var(--muted); }
.ve-cover { display:flex; gap:14px; align-items:flex-start; } .ve-cover .cvprev { width:112px; }
.ve-ov { }
.ve-ov .cap-top { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); }
.ve-ov .cap-top b { font-size:17px; } .ve-ov .cap-top button.x { width:40px; padding:6px; border:0; background:none; font-size:24px; line-height:1; }
.ve-ov .cap-top button.ok { padding:8px 16px; font-size:15px; background:var(--grad); color:#fff; }
.ve-ov .ve-body { flex:1; overflow-y:auto; padding:6px 16px 30px; }
.ve-otabs { display:flex; gap:22px; border-bottom:1px solid var(--border); margin:14px 0; }
.ve-otabs button { border:0; border-radius:0; background:none; padding:10px 0; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; }
.ve-otabs button.on { color:var(--fg); border-bottom-color:var(--accent2); }
.ve-outfits { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; align-items:center; }
.ve-outfits button { flex:none; white-space:nowrap; padding:8px 14px; border-radius:999px; }
.ve-outfits button.on { border-color:var(--accent2); background:color-mix(in srgb,var(--accent2) 14%,var(--card2)); font-weight:600; }
.ve-sprite { width:150px; aspect-ratio:3/4; border-radius:16px; overflow:hidden; background:var(--card2); border:1px dashed var(--border); display:grid; place-items:center; color:var(--muted); font-size:13px; text-align:center; }
.ve-sprite img { width:100%; height:100%; object-fit:cover; }
.ve-lib { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ve-lib button { padding:0; aspect-ratio:3/4; border-radius:12px; overflow:hidden; } .ve-lib img { width:100%; height:100%; object-fit:cover; display:block; }
.ve-lib button.on { outline:3px solid var(--accent2); }
.ve-src { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px; margin-bottom:8px; border-radius:14px; }
.ve-src .ic { width:44px; height:44px; border-radius:10px; overflow:hidden; display:grid; place-items:center; background:var(--card); font-size:22px; flex:none; } .ve-src .ic img { width:100%; height:100%; object-fit:cover; }
.ve-src small { display:block; color:var(--muted); }

/* ===== 剧本杀：游玩 ===== */
body.chatpage main:has(.vp) { padding:0; }
.vp { --size:62%; position:relative; width:100%; max-width:560px; height:100dvh; margin:0 auto; overflow:hidden; background:#0b0a12; color:#fff; user-select:none; -webkit-user-select:none; display:flex; flex-direction:column; }
@media (min-width:721px) { .vp { height:calc(100dvh - 32px); margin-top:16px; border-radius:26px; box-shadow:0 20px 60px rgba(0,0,0,.4); } }
.vp.size-s { --size:46%; } .vp.size-l { --size:80%; }
.vp-bg { position:absolute; inset:0; background:#14121f center/cover no-repeat; transition:opacity .6s; }
.vp-bg.b { opacity:0; } .vp-bg.b.show { opacity:1; }
.vp-shade { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.55) 0,transparent 18%,transparent 40%,rgba(0,0,0,.78) 100%); pointer-events:none; }
.vp-top { position:relative; z-index:5; display:flex; align-items:center; gap:6px; padding:calc(10px + env(safe-area-inset-top)) 10px 6px; }
.vp-top button { width:38px; height:38px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.4); color:#fff; font-size:18px; position:relative; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vp-top .ttl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:15px; text-shadow:0 1px 4px rgba(0,0,0,.6); padding-left:4px; }
.vp-top .dot[hidden] { display:none; } .vp-top .dot { display:block; position:absolute; top:5px; right:5px; width:10px; height:10px; border-radius:50%; background:#ff4d6d; }
.vp-date { position:relative; z-index:5; align-self:center; padding:4px 14px; border-radius:999px; background:rgba(0,0,0,.45); font-size:13px; margin-bottom:4px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vp-gauge { position:relative; z-index:5; margin:4px 16px; padding:8px 12px; border-radius:14px; background:rgba(120,20,40,.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-size:13px; }
.vp-gauge .bar { height:8px; border-radius:6px; background:rgba(255,255,255,.2); overflow:hidden; margin-top:6px; } .vp-gauge .bar i { display:block; height:100%; background:linear-gradient(90deg,#ffb347,#ff4d6d); transition:width .5s; }
.vp-stage { position:relative; flex:1; min-height:0; display:flex; align-items:flex-end; justify-content:center; padding:0 6px; pointer-events:none; }
.vp-sp { height:100%; width:var(--size); max-width:100%; display:flex; align-items:flex-end; justify-content:center; }
.vp-stage.dual .vp-sp { width:calc(var(--size) * .78); }
.vp-sp { padding:0 6px 22px; }      /* 底部留出空隙，不被名字牌压住 */
.vp-sp img { max-height:100%; max-width:100%; object-fit:contain; }
.vp-sp img.cut { filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); transition:filter .35s; }      /* 透明底立绘：说话的提亮 + 微光，其余的压暗 */
.vp-sp:not(.dim) img.cut { filter:brightness(1.1) drop-shadow(0 0 14px rgba(255,235,200,.4)) drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.vp-sp.dim img.cut { filter:saturate(.3) brightness(.5) drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
/* 白底立绘不抠图：放进卡片——渐变描边的外框 + 暖纸色底，图片用正片叠底，白色就变成纸色，和暗色场景更协调 */
.vp-card { max-height:100%; max-width:100%; aspect-ratio:3/4; padding:4px; border-radius:50%; display:flex; background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,206,150,.7) 45%,rgba(176,132,255,.85)); box-shadow:0 10px 28px rgba(0,0,0,.55); transition:filter .35s, transform .35s, box-shadow .35s; }
.vp-card .pane { flex:1; min-width:0; border-radius:inherit; overflow:hidden; isolation:isolate; background:radial-gradient(120% 90% at 50% 25%,#fffaf1 0%,#f3e7d4 70%,#e6d5bb 100%); box-shadow:inset 0 0 0 1px rgba(120,80,40,.15), inset 0 -26px 36px -22px rgba(120,80,40,.28); }
.vp-card img { display:block; box-sizing:border-box; width:100%; height:100%; padding:7% 9%; object-fit:contain; mix-blend-mode:multiply; }      /* 内边距：椭圆边缘收窄，别让头和脚顶到边 */
.vp-sp:not(.dim) .vp-card { box-shadow:0 0 26px rgba(255,214,160,.5), 0 10px 28px rgba(0,0,0,.55); }      /* 说话的提亮 + 微光 */
/* 没说话的角色：不要卡片，直接正片叠底到场景里（白底消失），去色退到背景里。卡片、外框、isolation、filter、transform 都会隔离混合，这里全部关掉 */
.vp-sp.dim .vp-card { background:none; box-shadow:none; padding:0; border-radius:0; filter:none; transform:none; }
.vp-sp.dim .vp-card .pane { background:none; box-shadow:none; isolation:auto; overflow:visible; border-radius:0; }
.vp-sp.dim .vp-card img { filter:saturate(.35); }
.vp-sp .ph { transition:opacity .35s; } .vp-sp.dim .ph { opacity:.5; }
.vp-sp .ph { width:96px; height:96px; border-radius:50%; margin-bottom:30px; display:grid; place-items:center; font-size:42px; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vp-box { position:relative; z-index:6; margin:0 12px 8px; padding:18px 16px 14px; min-height:132px; border-radius:20px; background:rgba(14,12,24,.82); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); cursor:pointer; }
.vp-name { position:absolute; left:14px; top:-15px; padding:4px 16px; border-radius:999px; background:var(--grad); font-weight:700; font-size:14px; box-shadow:0 4px 12px rgba(0,0,0,.35); }
.vp-text { font-size:16.5px; line-height:1.75; white-space:pre-wrap; max-height:34dvh; overflow-y:auto; }
.vp-text.nar { color:#d8d4ea; font-style:italic; }
.vp-next { position:absolute; right:14px; bottom:8px; font-size:13px; opacity:.7; animation:vpbob 1s infinite; }
@keyframes vpbob { 50% { transform:translateY(3px); } }
.vp-act { position:relative; z-index:6; padding:0 12px calc(12px + env(safe-area-inset-bottom)); display:grid; gap:8px; }
.vp-ch { padding:13px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.18); background:rgba(40,34,70,.78); color:#fff; text-align:left; font-size:15.5px; line-height:1.5; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.vp-ch:hover { background:rgba(80,60,140,.85); } .vp-ch .dc { margin-right:6px; }
.vp-free { display:flex; gap:8px; align-items:flex-end; }
.vp-free textarea { flex:1; min-height:46px; max-height:120px; resize:none; border-radius:16px; background:rgba(20,18,34,.85); color:#fff; border:1px solid rgba(255,255,255,.18); padding:12px 14px; }
.vp-free button, .vp-modes button { height:46px; padding:0 16px; border-radius:16px; border:0; background:var(--grad); color:#fff; font-weight:600; }
.vp-modes { display:flex; gap:8px; } .vp-modes button { flex:1; height:36px; background:rgba(255,255,255,.12); font-weight:500; font-size:13.5px; }
.vp-dice { padding:14px; border-radius:16px; border:0; background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; font-weight:700; font-size:16px; }
.vp-roll { text-align:center; padding:14px; border-radius:16px; background:rgba(14,12,24,.85); border:1px solid rgba(255,255,255,.14); }
.vp-roll .n { font-size:46px; font-weight:800; line-height:1.1; } .vp-roll.ok .n { color:#34d399; } .vp-roll.bad .n { color:#f87171; }
.vp-timer { height:6px; border-radius:6px; background:rgba(255,255,255,.18); overflow:hidden; } .vp-timer i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#ffb347,#ff4d6d); }
.vp-wait { text-align:center; padding:14px; color:#cfc9ee; font-size:14px; }
.vp-polish { padding:12px; border-radius:16px; background:rgba(14,12,24,.9); border:1px solid rgba(255,255,255,.16); }
.vp-polish p { margin:0 0 10px; line-height:1.6; } .vp-polish .btns { display:flex; gap:8px; } .vp-polish .btns button { flex:1; }
.vp-ov { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; justify-content:flex-end; background:rgba(0,0,0,.55); }
.vp-pn { max-height:78%; display:flex; flex-direction:column; border-radius:26px 26px 0 0; background:#222; padding:10px 16px calc(16px + env(safe-area-inset-bottom)); }
.vp-pn .grip { width:44px; height:4px; border-radius:4px; background:#555; margin:0 auto 10px; flex:none; }
.vp-pn h4 { margin:4px 2px 12px; font-size:18px; display:flex; justify-content:space-between; align-items:center; } .vp-pn h4 button { padding:4px 10px; border:0; background:none; color:#aaa; font-size:20px; }
.vp-pn .bd { overflow-y:auto; }
.vp-q { display:flex; align-items:center; gap:10px; padding:12px 4px; border-bottom:1px solid rgba(255,255,255,.08); } .vp-q.done span { text-decoration:line-through; color:#888; } .vp-q span { flex:1; } .vp-q button { border:0; background:none; color:#999; padding:4px 8px; }
.vp-log p { margin:0 0 10px; line-height:1.65; font-size:14.5px; } .vp-log b { color:#c4b5fd; } .vp-log .me { text-align:right; color:#93c5fd; }
.vp-ph-list button { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 8px; border:0; border-bottom:1px solid rgba(255,255,255,.08); border-radius:0; background:none; color:#fff; }
.vp-ph-list .av { width:42px; height:42px; border-radius:50%; background:#444; overflow:hidden; display:grid; place-items:center; flex:none; } .vp-ph-list .av img { width:100%; height:100%; object-fit:cover; }
.vp-ph-list small { color:#999; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw; }
.vp-ph-list .u { width:10px; height:10px; border-radius:50%; background:#ff4d6d; margin-left:auto; flex:none; }
.vp-msgs { display:flex; flex-direction:column; gap:8px; min-height:140px; }
.vp-m { max-width:80%; padding:9px 13px; border-radius:16px; line-height:1.55; background:#3a3a44; align-self:flex-start; } .vp-m.mine { align-self:flex-end; background:#6d4cff; }
.vp-end { position:absolute; inset:0; z-index:30; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vp-endc { width:100%; max-width:420px; padding:28px 22px; border-radius:24px; text-align:center; background:linear-gradient(160deg,#2b2350,#171326); border:1px solid rgba(255,255,255,.14); }
.vp-endc .k { font-size:13px; letter-spacing:3px; color:#c4b5fd; } .vp-endc h2 { margin:8px 0 14px; font-size:28px; } .vp-endc p { color:#d6d2ea; line-height:1.8; text-align:left; margin:0 0 22px; }
.vp-endc .btns { display:grid; gap:10px; } .vp-endc button { padding:13px; }
.vp-load { position:absolute; inset:0; z-index:40; display:grid; place-items:center; background:#0b0a12; }
.vp-menu { position:absolute; right:10px; top:calc(54px + env(safe-area-inset-top)); z-index:25; min-width:170px; padding:6px; border-radius:14px; background:#262332; border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.vp-menu button { display:block; width:100%; text-align:left; border:0; background:none; color:#fff; padding:11px 12px; border-radius:10px; } .vp-menu button:hover { background:rgba(255,255,255,.08); transform:none; }

/* 类型标记 / 筛选 */
.flag.vn { background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; }
.kindtabs { display:flex; gap:18px; margin:2px 0 14px; border-bottom:1px solid var(--border); }
.kindtabs button { border:0; border-radius:0; background:none; padding:10px 2px; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; }
.kindtabs button.on { color:var(--fg); border-bottom-color:var(--accent2); }
.kindtabs button:hover { transform:none; }
.typecards { display:grid; gap:12px; }
.typecards button { text-align:left; padding:16px; border-radius:18px; display:block; width:100%; }
.typecards b { display:block; font-size:17px; margin-bottom:4px; } .typecards small { color:var(--muted); line-height:1.5; display:block; }

.pp-chips .vnchip { background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; font-weight:600; }
.vn-scenes { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
.vn-scenes figure { margin:0; flex:none; width:128px; }
.vn-scenes img { width:128px; aspect-ratio:3/4; object-fit:cover; border-radius:14px; display:block; background:var(--card2); }
.vn-scenes figcaption { margin-top:6px; font-size:12.5px; color:var(--muted); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vp-sp .ph.pic { width:150px; height:150px; margin-bottom:26px; padding:0; overflow:hidden; border:3px solid rgba(255,255,255,.75); box-shadow:0 6px 18px rgba(0,0,0,.45); }
.vp-sp .ph.pic img { width:100%; height:100%; max-height:none; max-width:none; object-fit:cover; mix-blend-mode:normal; filter:none; }
.vp-sp.dim .ph.pic img { filter:saturate(.4) brightness(.75); }
.pp-main { min-width:0; }      /* 否则横向滑动的场景栏会把详情页右侧栏撑宽，内容溢出屏幕 */
.vn-scenes { max-width:100%; min-width:0; }

.cv-strip { position:absolute; inset:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.cv-strip::-webkit-scrollbar { display:none; }
.cv-strip > * { flex:none; width:100%; height:100%; scroll-snap-align:center; object-fit:cover; }
.cv-strip .cv-emoji { display:grid; place-items:center; font-size:110px; color:#fff; }
.cv-dots { position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.cv-dots i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45); } .cv-dots i.on { background:#fff; }
.intro-text.md { white-space:normal; } .md-h { margin:14px 0 6px; } .md-p { margin:0 0 10px; } .md-ul { margin:0 0 10px; padding-left:20px; } .md-img { display:block; max-width:100%; border-radius:14px; margin:8px 0; }
.wb-cards { display:grid; gap:10px; }
.wb-card { position:relative; display:block; width:100%; text-align:left; padding:14px 40px 14px 16px; border-radius:16px; background:var(--card2); border:1px solid var(--border); }
.wb-card b { display:block; font-size:16px; } .wb-card small { display:block; color:var(--muted); margin-top:3px; line-height:1.5; } .wb-card i { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-style:normal; font-size:22px; color:var(--muted); }

.dicebar { padding:6px 12px 0; } .dicebar .vp-dice { width:100%; }
.vp-dice { padding:14px; border-radius:16px; border:0; background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; font-weight:700; font-size:16px; }
.vp-ph-list button { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 8px; border:0; border-bottom:1px solid rgba(255,255,255,.08); border-radius:0; background:none; color:#fff; }
.vp-ph-list .av { width:42px; height:42px; border-radius:50%; background:#444; overflow:hidden; display:grid; place-items:center; flex:none; } .vp-ph-list .av img { width:100%; height:100%; object-fit:cover; }
.vp-ph-list small { color:#999; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw; }
.vp-msgs { display:flex; flex-direction:column; gap:8px; min-height:100px; } .vp-m { max-width:80%; padding:9px 13px; border-radius:16px; line-height:1.55; background:#3a3a44; color:#fff; align-self:flex-start; } .vp-m.mine { align-self:flex-end; background:#6d4cff; }
.vp-free { display:flex; gap:8px; align-items:flex-end; } .vp-free textarea { flex:1; min-height:46px; max-height:120px; resize:none; border-radius:16px; padding:12px 14px; } .vp-free button { height:46px; padding:0 16px; border-radius:16px; border:0; background:var(--grad); color:#fff; font-weight:600; }

.home-top { display:flex; gap:12px; align-items:center; justify-content:space-between; margin:4px 0 12px; }
.home-top .tabs2 { display:flex; gap:18px; align-items:baseline; flex:none; }
.home-top b { font-size:22px; font-weight:800; color:var(--fg); cursor:pointer; white-space:nowrap; }
.hsearch { display:flex; align-items:center; gap:8px; flex:1; max-width:300px; min-width:0; padding:0 14px; height:40px; border-radius:999px; background:var(--card2); border:1px solid var(--border); color:var(--muted); }
.hsearch input { border:0; background:none; padding:0; height:100%; min-width:0; box-shadow:none; } .hsearch input:focus { box-shadow:none; } .hsearch .qclr { flex:none; border:0; background:none; padding:4px; font-size:14px; line-height:1; color:var(--muted); box-shadow:none; } .hsearch .qclr[hidden] { display:none; }
.tagrow[hidden] { display:none; } .tagrow { display:flex; gap:8px; overflow-x:auto; margin:0 0 14px; scrollbar-width:none; } .tagrow::-webkit-scrollbar { display:none; }
.tagrow button { flex:none; border-radius:999px; padding:6px 14px; font-size:13.5px; background:var(--card); border:1px solid var(--border); }
.cats { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:10px; scrollbar-width:none; } .cats::-webkit-scrollbar { display:none; }
.cats button { flex:none; border-radius:999px; padding:8px 14px; font-size:14.5px; font-weight:600; background:var(--card2); color:var(--muted); border:0; }
.cats button.on { background:var(--accent2); color:#fff; }

.cats-row { display:flex; align-items:center; gap:8px; margin:6px 0 10px; } .cats-row .cats { flex:1; min-width:0; margin:0; }
.hicons { display:flex; gap:6px; flex:none; } .hicons button { width:36px; height:36px; padding:0; border-radius:50%; display:grid; place-items:center; font-size:17px; background:var(--card2); border:1px solid var(--border); color:var(--fg); }

/* ---- 动态（Feed） ---- */
.post-card { padding:14px 2px; border-bottom:1px solid var(--border); cursor:pointer; }
.post-date { color:var(--muted); font-size:14px; margin-bottom:6px; }
.post-text { line-height:1.65; word-break:break-word; } .post-text .md-p { margin:0 0 4px; } .post-text a { color:var(--accent2); text-decoration:underline; }
.post-imgs { display:grid; gap:6px; margin-top:8px; } .post-imgs.n1 { grid-template-columns:1fr; } .post-imgs.n2 { grid-template-columns:1fr 1fr; } .post-imgs.n3 { grid-template-columns:repeat(3,1fr); }
.post-imgs img { width:100%; border-radius:12px; object-fit:cover; max-height:360px; aspect-ratio:1; cursor:zoom-in; } .post-imgs.n1 img { aspect-ratio:auto; }
.post-acts { display:flex; align-items:center; gap:20px; margin-top:10px; }
.post-acts .pa { display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:4px 0; color:var(--text); font-weight:700; cursor:pointer; } .post-acts .pa.on { color:#ff5d7a; }
.post-tools { position:sticky; bottom:0; display:flex; align-items:center; gap:6px; padding:10px 0; border-top:1px solid var(--border); background:var(--bg); overflow-x:auto; }
.post-tools button { background:none; border:0; color:var(--muted); font-size:17px; padding:6px 10px; cursor:pointer; white-space:nowrap; } .post-tools .sep { width:1px; height:22px; background:var(--border); }
.post-edit-imgs { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; } .post-edit-imgs .pi { position:relative; } .post-edit-imgs img { width:84px; height:84px; object-fit:cover; border-radius:10px; }
.post-edit-imgs .pi button { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:0; background:#000a; color:#fff; padding:0; cursor:pointer; }
.post-sort { margin:14px 0 6px; padding-top:10px; border-top:8px solid var(--card2); } .post-sort select { background:none; border:0; color:var(--muted); font-size:15px; padding:0; width:auto; }
.post-cmt { display:flex; gap:10px; padding:12px 0; align-items:flex-start; } .post-cact { display:flex; flex-direction:column; align-items:flex-end; gap:4px; } .post-cact button { background:none; border:0; color:var(--muted); display:inline-flex; gap:4px; align-items:center; padding:2px; cursor:pointer; } .post-cact button.on { color:#ff5d7a; }
.post-cbar { position:sticky; bottom:0; display:flex; gap:8px; padding:10px 0; background:var(--bg); } .post-cbar[hidden] { display:none; } .post-cbar input { flex:1; border-radius:999px; padding:12px 16px; } .post-cbar button { width:44px; border-radius:50%; flex:none; }

/* ---- 信息栏 / 日历与时钟 ---- */
.pg-chips { display:flex; flex-wrap:wrap; gap:8px; } .pg-chips button { padding:6px 12px; border-radius:999px; font-size:13.5px; background:var(--card); border:1px solid var(--border); color:var(--text); cursor:pointer; } .pg-chips button.on { background:var(--accent2); border-color:var(--accent2); color:#fff; }
.clockbar { display:flex; justify-content:center; padding:6px 14px; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--muted); border-bottom:1px solid var(--border); background:var(--bar); } .clockbar[hidden] { display:none; }
.infobox { margin-top:10px; display:grid; grid-template-columns:auto 1fr; gap:3px 12px; padding:9px 12px; border-radius:12px; font-size:12.5px; line-height:1.5; background:color-mix(in srgb,var(--accent) 8%,transparent); border:1px solid color-mix(in srgb,var(--accent) 28%,transparent); }
.infobox b { color:var(--muted); font-weight:600; white-space:nowrap; } .infobox span { word-break:break-word; }
.vp-info { position:relative; z-index:5; align-self:center; max-width:92%; margin:0 0 6px; padding:6px 12px; background:rgba(0,0,0,.5); border-color:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .vp-info[hidden] { display:none; } .vp-info b { color:rgba(255,255,255,.7); }

/* ---- 剧情插件：任务 / 突发事件 / 恋爱线 / 日记 / 插图 / 直播 / 结局 ---- */
.plugbar { display:flex; flex-direction:column; gap:6px; padding:6px 12px; border-bottom:1px solid var(--border); background:var(--bar); } .plugbar[hidden] { display:none; }
.pl-chips { display:flex; gap:8px; flex-wrap:wrap; } .pl-chips button { padding:5px 12px; border-radius:999px; font-size:13px; background:var(--card); border:1px solid var(--border); color:var(--text); cursor:pointer; white-space:nowrap; } .pl-chips button.on { background:var(--accent2); border-color:var(--accent2); color:#fff; }
.pl-lock { width:100%; display:flex; align-items:center; gap:10px; text-align:left; padding:8px 12px; border-radius:12px; font-size:13px; background:color-mix(in srgb,#f5a623 16%,transparent); border:1px solid color-mix(in srgb,#f5a623 40%,transparent); color:var(--text); cursor:pointer; }
.pl-lock .lk-main { flex:1; min-width:0; } .pl-lock .lk-t { display:block; font-weight:600; } .pl-lock .lk-l { display:block; margin-top:2px; font-size:12.5px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }      /* 用了哪些插件：一行，放不下省略 */
.pl-lock .lk-btn { flex:none; padding:5px 12px; border-radius:999px; border:0; font-size:12.5px; font-weight:600; background:#f5a623; color:#fff; box-shadow:none; }
.pl-gauge { font-size:13px; } .pl-gauge span { float:right; font-weight:700; } .pl-gauge.success span { color:#2ea043; } .pl-gauge.failed span { color:#e5484d; }
.bar { height:6px; border-radius:99px; background:rgba(128,128,128,.25); overflow:hidden; margin-top:5px; } .bar i { display:block; height:100%; background:linear-gradient(90deg,#8a5cff,#ff5da2); border-radius:99px; }
.pl-list { display:flex; flex-direction:column; gap:10px; } .pl-q { padding:12px 14px; border-radius:12px; background:#333; color:#eee; } .pl-q.done { opacity:.55; text-decoration:line-through; }
.pl-love, .pl-diary { padding:12px 14px; border-radius:14px; background:#333; color:#eee; } .pl-love em { font-style:normal; margin-left:8px; padding:2px 10px; border-radius:99px; background:rgba(255,93,162,.2); color:#ff8cc0; font-size:12.5px; } .pl-love small, .pl-diary small { display:block; color:#9a9aa5; margin-top:5px; }
.pl-diary p { margin:8px 0 0; line-height:1.7; }
.pl-cuts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .pl-cuts button, .pl-cuts .lock { display:flex; flex-direction:column; gap:4px; padding:0; border:0; background:none; color:#ddd; cursor:pointer; } .pl-cuts img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; } .pl-cuts .lock { aspect-ratio:3/4; align-items:center; justify-content:center; border-radius:12px; background:#333; cursor:default; } .pl-cuts .lock span { font-size:26px; } .pl-cuts small { font-size:12px; text-align:center; }
.pmarks { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; } .pmarks span { padding:3px 10px; border-radius:99px; font-size:12px; background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); }
.livebox { margin-top:10px; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.55; background:rgba(20,20,28,.78); color:#eee; } .livebox .lv-h { display:flex; justify-content:space-between; margin-bottom:6px; font-weight:700; } .livebox .lv-live { color:#ff4d6a; } .livebox b { color:#9ad; margin-right:6px; } .livebox .gift { color:#ffd166; }
.cutcard { margin-top:10px; border-radius:14px; overflow:hidden; background:var(--card2); text-align:center; padding:10px; font-size:13px; color:var(--muted); } .cutcard img { display:block; width:100%; max-height:420px; object-fit:cover; border-radius:10px; cursor:zoom-in; } .cutcard small { display:block; margin-top:6px; }
.endcard { margin:10px 0; padding:14px 16px; border-radius:16px; background:linear-gradient(135deg,rgba(138,92,255,.16),rgba(255,93,162,.12)); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); } .endcard b { font-size:16px; } .endcard em { font-style:normal; margin-left:8px; padding:2px 10px; border-radius:99px; font-size:12px; background:rgba(128,128,128,.25); } .endcard em.good { background:rgba(46,160,67,.22); color:#2ea043; } .endcard em.bad { background:rgba(229,72,77,.2); color:#e5484d; } .endcard p { margin:8px 0; line-height:1.7; } .endcard button { padding:7px 14px; border-radius:99px; }
.mdl-plug { display:block; font-size:12px; margin-top:6px; color:#9a9aa5; } .mdl-plug.ok { color:#8fd19e; }
.vp-lock { position:relative; z-index:6; align-self:center; max-width:92%; margin:0 0 4px; padding:6px 12px; border-radius:12px; font-size:12.5px; background:rgba(245,166,35,.25); border:1px solid rgba(245,166,35,.55); color:#fff; cursor:pointer; backdrop-filter:blur(6px); }
.vp-live { position:absolute; right:10px; top:104px; z-index:7; width:min(46%,220px); padding:8px 10px; border-radius:12px; font-size:12px; line-height:1.5; background:rgba(0,0,0,.6); color:#eee; backdrop-filter:blur(6px); } .vp-live[hidden] { display:none; } .vp-live .h { display:flex; justify-content:space-between; font-weight:700; margin-bottom:4px; } .vp-live .r { color:#ff4d6a; } .vp-live b { color:#9ad; margin-right:4px; } .vp-live .g { color:#ffd166; }
.vp-cutc { max-width:min(92%,420px); text-align:center; } .vp-cutc img { width:100%; max-height:62vh; object-fit:cover; border-radius:16px; } .vp-cutc .k { margin-bottom:10px; font-weight:800; letter-spacing:.1em; } .vp-cutc small { color:#aaa; }
.vp-lv { padding:12px 14px; margin-bottom:10px; border-radius:14px; background:#333; color:#eee; } .vp-lv em { font-style:normal; margin-left:8px; padding:2px 10px; border-radius:99px; background:rgba(255,93,162,.2); color:#ff8cc0; font-size:12.5px; } .vp-lv small { display:block; color:#9a9aa5; margin-top:5px; }
.vp-cuts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .vp-cuts button, .vp-cuts .lock { display:flex; flex-direction:column; gap:4px; padding:0; border:0; background:none; color:#ddd; } .vp-cuts img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; } .vp-cuts .lock { aspect-ratio:3/4; align-items:center; justify-content:center; border-radius:12px; background:#333; } .vp-cuts .lock span { font-size:26px; } .vp-cuts small { font-size:12px; text-align:center; }
.vp-wh { display:flex; gap:8px; flex-wrap:wrap; } .vp-wh button { padding:5px 12px; border-radius:99px; border:1px solid #555; background:#333; color:#eee; } .vp-wh button.on { background:var(--accent2); border-color:var(--accent2); }
.vp-mdl { display:flex; justify-content:space-between; align-items:center; width:100%; margin-bottom:8px; padding:14px 16px; border-radius:14px; border:1px solid #444; background:#2c2c2c; color:#eee; } .vp-mdl.on { border-color:var(--accent2); } .vp-mdl span { font-size:12.5px; color:#9a9aa5; }
.plugbar .pl-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .plugbar .pl-chips::-webkit-scrollbar { display:none; }
/* 短信「正在输入中…」：三个跳动的点 */
.vp-m.typing { display:flex; align-items:center; gap:5px; color:#bbb; font-size:13px; }
.vp-m.typing i { width:6px; height:6px; border-radius:50%; background:#bbb; animation:vptyp 1.1s infinite; }
.vp-m.typing i:nth-child(2) { animation-delay:.18s; } .vp-m.typing i:nth-child(3) { animation-delay:.36s; } .vp-m.typing span { margin-left:4px; }
@keyframes vptyp { 0%, 80%, 100% { opacity:.3; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
.vp-qhint { margin:0 0 10px; color:#aaa; font-size:12.5px; line-height:1.6; }