/* Theme: magic-night (剧院/派对) * 由 gen-theme.cjs 生成 · 题材候选池采样 + 对比度自校验 * 启用方式： * 或运行时切换：document.documentElement.dataset.theme = 'magic-night'; */ :root[data-theme="magic-night"] { /* 主色板 */ --bg: #120d10; --bg2: #191216; --panel: #23181d; --panel2: #2c1f25; --panel3: #362830; --line: #48343d; --line2: #624750; --text: #e8d5d0; --muted: #ad959c; --dim: #765f66; /* 强调色 */ --blood: #962233; --blood2: #751828; --gold: #d5ad65; --gold2: #a78548; /* 状态色 */ --ok: #95865a; --info: #9b86a4; --warn: #d5ad65; --danger: #a8293c; /* 字体 */ --font-disp: 'Playfair Display', Georgia, 'Songti SC', serif; --font-body: Georgia, 'Songti SC', serif; --font-mono: 'SFMono-Regular', Consolas, monospace; /* 装饰 */ --radius: 10px; --radius-sm: 7px; --shadow: 0 8px 30px rgba(0, 0, 0, .6); --shadow-lg: 0 14px 52px rgba(0, 0, 0, .72); --ornament: '✦'; } /* 氛围层 */ [data-theme="magic-night"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; background: repeating-linear-gradient(92deg, transparent 0 26px, rgba(150, 34, 51, 0.03) 26px 27px, transparent 27px 60px, rgba(150, 34, 51, 0.03) 60px 61px), radial-gradient(ellipse at 50% 30%, rgba(238, 219, 180, 0.06) 0%, transparent 55%), conic-gradient(from 90deg at 50% -20%, transparent 40%, rgba(238, 219, 180, 0.06) 50%, transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(150, 34, 51, 0.05) 0%, transparent 60%); } /* 顶部栏 */ [data-theme="magic-night"] .topbar { background: rgba(18, 13, 16, 0.92); border-bottom: 1px solid var(--line2); } [data-theme="magic-night"] .brand .logo { font-family: var(--font-disp); letter-spacing: 3px; color: var(--gold); } [data-theme="magic-night"] .side-sub { color: var(--muted); letter-spacing: 4px; font-family: var(--font-disp); font-size: 11px; } /* 卡片 */ [data-theme="magic-night"] .card { background: linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%); border: 1px solid var(--line2); position: relative; } [data-theme="magic-night"] .card::before, [data-theme="magic-night"] .card::after { content: var(--ornament); position: absolute; color: var(--gold); font-size: 13px; opacity: .35; } [data-theme="magic-night"] .card::before { top: 4px; left: 7px; } [data-theme="magic-night"] .card::after { bottom: 4px; right: 7px; } /* AP 行动点 */ [data-theme="magic-night"] .ap-pill { border: 1px solid var(--gold); background: var(--panel); color: var(--gold); font-family: var(--font-disp); letter-spacing: 2px; } /* code chip */ [data-theme="magic-night"] .code-chip { font-family: var(--font-mono); background: rgba(0, 0, 0, .3); color: var(--gold); border: 1px dashed var(--gold); } /* 真相 · 封印 */ [data-theme="magic-night"] .truth-card { background: linear-gradient(180deg, var(--panel) 0%, var(--bg2) 100%); border: 2px double var(--blood); position: relative; } [data-theme="magic-night"] .truth-card::before { content: "T R U T H"; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--bg); padding: 0 14px; font-family: var(--font-disp); letter-spacing: 12px; color: var(--blood); font-size: 14px; } /* 未解锁 · 帷幕 */ [data-theme="magic-night"] .lock-mask { background: rgba(18, 13, 16, 0.62); border: 1px dashed var(--gold2); color: var(--gold); } /* 揭示提示 */ [data-theme="magic-night"] .toast.reveal { border: 1px double var(--blood); background: linear-gradient(180deg, rgba(150, 34, 51, 0.16) 0%, rgba(18, 13, 16, 0.96) 100%), radial-gradient(circle at center, rgba(232, 213, 208, 0.08), transparent 70%); box-shadow: 0 0 32px rgba(213, 173, 101, 0.22); } /* 投票卡片 */ [data-theme="magic-night"] .vote-card.suspect { border-left: 3px solid var(--blood); } [data-theme="magic-night"] .vote-card.mine { border-left: 3px solid var(--gold); } /* 特色动画 */ /* 移动端适配（继承 reference 07 断点行为，只做视觉增强） */ @media (max-width: 820px) { [data-theme="magic-night"] .ap-pill { padding: 4px 10px; font-size: 12px; } [data-theme="magic-night"] .topbar { padding-left: 12px; } [data-theme="magic-night"] .chip { padding: 3px 8px; font-size: 11px; } } /* 角色主题色覆盖（可选微调） * 说明：以下按剧本角色 id 微调 .cname 高亮色，生成时按 data.json 的 * characters[].id / .color 替换。若不想微调可整段删除——style.css 的 * .cname[data-color] 已用内联 --c 变量兜底角色主题色。 * 示例： * [data-theme="magic-night"] .cname[data-color="角色id"] { color: var(--gold); } */