/* ═══════════════════════════════════════════════════════════
   themes.css —— 三套视觉主题
   ① tabloid 街头小报：吵架上社会新闻版面。米纸、油墨、印章红。
   ② chat    聊天实录：一切名场面都发生在对话框里。浅灰、气泡、微信绿的远房亲戚。
   ③ arena   深夜擂台：格斗游戏选人界面。夜幕蓝黑、荧光黄、霓虹粉。
   变量契约见 base.css 顶部注释。
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────── ① 街头小报 ───────────────────────── */

[data-theme="tabloid"] {
  --font-body: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --display-weight: 900;
  --display-style: normal;

  --bg: #f2ecdd;
  --ink: #221d18;
  --ink-soft: #40382f;
  --muted: #857a6a;
  --line: #d8cfba;
  --line-strong: #a99c85;
  --accent: #b8321f;
  --accent-contrast: #f8f3e6;
  --title-ink: #221d18;
  --title-shadow: none;

  --radius-card: 2px;
  --radius-btn: 2px;
  --radius-opt: 2px;
  --radius-chip: 2px;

  --card-bg: #f8f3e6;
  --card-border: 1px solid #221d18;
  --card-shadow: 3px 3px 0 rgba(34, 29, 24, .16);

  --btn-bg: #221d18;
  --btn-ink: #f8f3e6;
  --btn-border: 1px solid #221d18;
  --btn-shadow: 3px 3px 0 rgba(184, 50, 31, .55);

  --bar-h: 6px;
  --bar-track: #e0d7c2;
  --bar-fill: #b8321f;

  --role-bg: transparent;
  --role-ink: #857a6a;
  --role-border: 1px solid #a99c85;

  --opt-bg: #f8f3e6;
  --opt-border: 1px solid #baaf99;
  --opt-shadow: none;
  --opt-hover-shadow: 3px 3px 0 rgba(34, 29, 24, .14);

  --said-bg: #221d18;
  --said-ink: #f8f3e6;
  --said-border: 1px solid #221d18;

  --after-bg: transparent;
  --after-border: none;
  --after-left: 3px solid #b8321f;
  --tone-bg: #b8321f;
  --tone-ink: #f8f3e6;
  --tone-border: none;

  --award-bg: #f8f3e6;
  --award-border: 1px solid #221d18;
  --award-shadow: 0 0 0 4px #f8f3e6, 0 0 0 5px #221d18, 6px 8px 0 rgba(34, 29, 24, .14);
  --shine: rgba(255, 253, 245, .55);

  --code-bg: transparent;
  --code-ink: #b8321f;
  --code-border: 2px solid #b8321f;

  --track-h: 8px;
  --track-bg: #e6ddc8;
  --track-border: 1px solid #baaf99;
  --dot-size: 18px;
  --dot-bg: #b8321f;
  --dot-border: 2px solid #f8f3e6;
  --dot-shadow: 0 0 0 1px #221d18;

  --fab-bg: #221d18;
  --fab-ink: #f8f3e6;
  --fab-border: 2px solid #f8f3e6;

  --chip-on-border: 2px solid #221d18;
  --chip-on-shadow: 3px 3px 0 rgba(184, 50, 31, .5);
}

/* 纸面细纹 */
[data-theme="tabloid"] body,
body[data-theme-host="tabloid"] {
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(34, 29, 24, .012) 3px 4px);
}

/* 报头：双线夹标题 */
[data-theme="tabloid"] .intro-masthead {
  border-top: 6px double var(--ink);
  border-bottom: 6px double var(--ink);
  margin-top: 1rem;
}
[data-theme="tabloid"] .masthead-title { letter-spacing: .14em; text-indent: .14em; }

/* 场景标题带油墨下划线；印章式题号 */
[data-theme="tabloid"] .scene-arena {
  padding-bottom: .45rem;
  border-bottom: 3px solid var(--ink);
  display: inline-block;
}

/* 战斗基因码：印章歪斜 */
[data-theme="tabloid"] .type-code b { transform: rotate(-3deg); }
[data-theme="tabloid"] .type-code .cell:nth-child(2n) b { transform: rotate(2.5deg); }

/* 选项残角报纸感 */
[data-theme="tabloid"] .option { border-style: solid dashed solid solid; }

/* ───────────────────────── ② 聊天实录 ───────────────────────── */

[data-theme="chat"] {
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --display-weight: 700;
  --display-style: normal;

  --bg: #ececec;
  --ink: #1a1a1a;
  --ink-soft: #3d3d3d;
  --muted: #8a8a8a;
  --line: #dcdcdc;
  --line-strong: #bdbdbd;
  --accent: #10a35a;
  --accent-contrast: #ffffff;
  --title-ink: #1a1a1a;
  --title-shadow: none;

  --radius-card: 12px;
  --radius-btn: 10px;
  --radius-opt: 14px;
  --radius-chip: 99px;

  --card-bg: #ffffff;
  --card-border: 1px solid rgba(0, 0, 0, .045);
  --card-shadow: 0 1px 4px rgba(0, 0, 0, .05);

  --btn-bg: #10a35a;
  --btn-ink: #ffffff;
  --btn-border: none;
  --btn-shadow: 0 4px 14px rgba(16, 163, 90, .3);

  --bar-h: 5px;
  --bar-track: #dcdcdc;
  --bar-fill: #10a35a;

  --role-bg: #e2f4ea;
  --role-ink: #0d7c45;
  --role-border: none;

  --opt-bg: #ffffff;
  --opt-border: 1px solid rgba(0, 0, 0, .05);
  --opt-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  --opt-hover-shadow: 0 3px 10px rgba(0, 0, 0, .1);

  --said-bg: #a9ea7a;
  --said-ink: #163b0d;
  --said-border: none;

  --after-bg: #ffffff;
  --after-border: 1px solid rgba(0, 0, 0, .05);
  --after-left: 1px solid rgba(0, 0, 0, .05);
  --tone-bg: #f0f0f0;
  --tone-ink: #6b6b6b;
  --tone-border: none;

  --award-bg: #ffffff;
  --award-border: none;
  --award-shadow: 0 6px 24px rgba(0, 0, 0, .08);
  --shine: rgba(169, 234, 122, .35);

  --code-bg: #e2f4ea;
  --code-ink: #0d7c45;
  --code-border: none;

  --track-h: 10px;
  --track-bg: #e4e4e4;
  --track-border: none;
  --dot-size: 20px;
  --dot-bg: #10a35a;
  --dot-border: 3px solid #ffffff;
  --dot-shadow: 0 2px 6px rgba(0, 0, 0, .2);

  --fab-bg: #ffffff;
  --fab-ink: #1a1a1a;
  --fab-border: 1px solid rgba(0, 0, 0, .08);

  --chip-on-border: 2px solid #10a35a;
  --chip-on-shadow: 0 3px 12px rgba(16, 163, 90, .25);
}

/* 场景 = 系统提示条 + 对话页蒙皮 */
[data-theme="chat"] .scene-card { text-align: left; }
[data-theme="chat"] .scene-arena {
  font-size: 1.15rem;
  text-align: center;
  display: block;
}
[data-theme="chat"] .scene-arena::before { content: '— '; color: var(--muted); font-weight: 400; }
[data-theme="chat"] .scene-arena::after { content: ' —'; color: var(--muted); font-weight: 400; }
[data-theme="chat"] .scene-role { display: table; margin: .55rem auto .8rem; }

/* 选项 = 右侧草稿气泡（带小尾巴缺角） */
[data-theme="chat"] .options { padding-left: 2.2rem; }
[data-theme="chat"] .option { border-radius: 16px 4px 16px 16px; }

/* 你说 = 绿色已发送气泡；走向 = 左侧来信气泡 */
[data-theme="chat"] .aftermath-said {
  margin-left: 2.2rem;
  border-radius: 16px 4px 16px 16px;
}
[data-theme="chat"] .aftermath-panel {
  margin-right: 2.2rem;
  border-radius: 4px 16px 16px 16px;
}

/* ───────────────────────── ③ 深夜擂台 ───────────────────────── */

[data-theme="arena"] {
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --display-weight: 900;
  --display-style: italic;

  --bg: #10101a;
  --ink: #f1f1f6;
  --ink-soft: #c9c9d6;
  --muted: #7f7f93;
  --line: #2a2a3a;
  --line-strong: #43435a;
  --accent: #ffd23e;
  --accent-contrast: #191919;
  --title-ink: #ffd23e;
  --title-shadow: 3px 3px 0 rgba(255, 77, 122, .85);

  --radius-card: 8px;
  --radius-btn: 6px;
  --radius-opt: 8px;
  --radius-chip: 4px;

  --card-bg: #191926;
  --card-border: 1px solid #2e2e42;
  --card-shadow: 0 4px 20px rgba(0, 0, 0, .4);

  --btn-bg: #ffd23e;
  --btn-ink: #191919;
  --btn-border: none;
  --btn-shadow: 0 0 0 1px rgba(255, 210, 62, .35), 0 6px 22px rgba(255, 210, 62, .22);

  --bar-h: 6px;
  --bar-track: #2323334;
  --bar-track: #232334;
  --bar-fill: linear-gradient(90deg, #ffd23e, #ff4d7a);

  --role-bg: rgba(255, 77, 122, .14);
  --role-ink: #ff88a8;
  --role-border: 1px solid rgba(255, 77, 122, .4);

  --opt-bg: #191926;
  --opt-border: 1px solid #2e2e42;
  --opt-shadow: none;
  --opt-hover-shadow: 0 0 0 1px rgba(255, 210, 62, .4), 0 4px 18px rgba(255, 210, 62, .12);

  --said-bg: #241a2c;
  --said-ink: #ffd9e4;
  --said-border: 1px solid rgba(255, 77, 122, .5);

  --after-bg: #14141f;
  --after-border: 1px solid #2e2e42;
  --after-left: 3px solid #ff4d7a;
  --tone-bg: rgba(255, 210, 62, .12);
  --tone-ink: #ffd23e;
  --tone-border: 1px solid rgba(255, 210, 62, .4);

  --award-bg: #191926;
  --award-border: 1px solid #43435a;
  --award-shadow: 0 0 0 1px rgba(255, 210, 62, .25), 0 10px 40px rgba(0, 0, 0, .5);
  --shine: rgba(255, 255, 255, .09);

  --code-bg: #232334;
  --code-ink: #ffd23e;
  --code-border: 1px solid rgba(255, 210, 62, .5);

  --track-h: 10px;
  --track-bg: #232334;
  --track-border: 1px solid #2e2e42;
  --dot-size: 18px;
  --dot-bg: linear-gradient(135deg, #ffd23e, #ff4d7a);
  --dot-border: 2px solid #10101a;
  --dot-shadow: 0 0 10px rgba(255, 210, 62, .55);

  --fab-bg: #232334;
  --fab-ink: #ffd23e;
  --fab-border: 1px solid rgba(255, 210, 62, .5);

  --chip-on-border: 2px solid #ffd23e;
  --chip-on-shadow: 0 0 14px rgba(255, 210, 62, .35);
}

/* 夜场斜纹 */
[data-theme="arena"] body,
body[data-theme-host="arena"] {
  background-image: repeating-linear-gradient(135deg, transparent 0 16px, rgba(255, 255, 255, .014) 16px 17px);
}

/* 标题斜体大字距 */
[data-theme="arena"] .masthead-title,
[data-theme="arena"] .interlude-title { letter-spacing: .12em; }

/* 场景卡霓虹左棱 */
[data-theme="arena"] .scene-card { border-left: 3px solid #ffd23e; }
[data-theme="arena"] .scene-arena { font-style: italic; }

/* 选项编号棱条 */
[data-theme="arena"] .option { border-left: 3px solid #2e2e42; }
@media (hover: hover) {
  [data-theme="arena"] .option:hover { border-left-color: #ff4d7a; }
}

/* toast 反色修正（暗底主题下 ink/bg 直接互换即可，天然成立） */