/* ========================================
   民间秘事调查档案 - 中国现代COC模组网站样式
   ======================================== */
/* 装饰字体自托管（v2.14.52）：以前从 Google Fonts 拉（单个 TTF 6MB，大陆还基本连不上），
   现在只带站点用得到的字、裁成 woff2 放本地 —— 谁打开都一样，不依赖外网。
   产物由 tools/build-fonts.js 生成；子集里没有的字会回退到下面的思源宋体 / 宋体。 */
@font-face {
    font-family: 'ZCOOL XiaoWei';
    src: url('fonts/zcool-xiaowei-subset.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* 基础变量 */
:root {
    --bg-primary: #0c0c0e;
    --bg-secondary: #141418;
    --bg-card: rgba(20, 20, 26, 0.75);
    --bg-hover: rgba(30, 30, 38, 0.85);
    --accent-red: #a03040;
    --accent-red-bright: #d44d5e;
    --accent-red-dim: #6b202c;
    --accent-gold: #c99e4a;
    --accent-gold-dim: #8b7355;
    --text-primary: #eceae6;
    --text-secondary: #a8a095;
    --text-muted: #5a554e;
    --border-color: rgba(255, 255, 255, 0.06);
    --border-light: rgba(255, 255, 255, 0.12);
    --glass-bg: rgba(16, 16, 20, 0.65);
    --glass-border: rgba(255, 255, 255, 0.08);
    --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'SimSun', serif;
    --font-display: 'ZCOOL XiaoWei', 'Noto Serif SC', 'Source Han Serif SC', 'SimSun', serif;
    --font-body: 'Noto Sans SC', 'Source Han Sans SC', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    --font-mono: 'Courier New', 'SimSun', monospace;
    /* 数字专用字体：显示字体（ZCOOL 小薇 / Noto Serif）里的「1」又窄又细，
       同一行里 11 / 13 看着就比 65 / 40 小一圈。数字改走笔画均匀、等宽数字（tnum）的字体。 */
    --font-num: 'Bahnschrift', 'DIN Alternate', 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
    --z-noise: 1;
    --z-vignette: 2;
    --z-grain: 3;
    --z-flicker: 4;
    --z-nav: 100;
    --z-modal: 200;
    --z-close: 210;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 30px rgba(160, 48, 64, 0.15);
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* 视觉动效统一节奏：微交互 / 面板 / 页面 */
    --motion-fast: 160ms;
    --motion-base: 240ms;
    --motion-slow: 380ms;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}
/* 重置与基础 */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    /* 始终预留滚动条位置：切换标签/展开目录时，滚动条出现或消失不会让整页左右晃 */
    scrollbar-gutter: stable;
}
/* 深邃背景：多层近黑渐变 + 静态径向暗角（零动画开销，画面清晰深邃） */
body {
    font-family: var(--font-serif);
    background:
        radial-gradient(ellipse 120% 90% at 50% -10%, rgba(60, 50, 90, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #0a0a0c 0%, #0e0e12 40%, #101016 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: 1.8;
    overflow-x: hidden;
    min-height: 520px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* 静态暗角聚焦层（无噪点、无动画，仅增加画面纵深感） */
.vignette-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-noise);
    pointer-events: none;
    background: radial-gradient(ellipse 75% 70% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.42) 100%);
}

/* ========================================
   首页滚动驱动序列帧背景
   ======================================== */
.seq-anim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;   /* 背景层：在所有正常内容之下，但仍在 body 背景之上 */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);   /* 强制独立合成层，确保 fixed 不随滚动失效 */
    will-change: transform;
}
.seq-anim.show { opacity: 1; }
.seq-anim img {
    /* 高度优先填满视口：上下正好满屏，宽度按 16:9 比例自适应；
       宽屏时图片宽度超出视口，居中、左右边缘被 mask 淡出，不顶满 */
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    display: block;
    /* 左右边缘柔和过渡：多色标缓动曲线，渐变更宽更缓，避免阶梯感；
       filter:blur 轻微羽化消除色阶 banding */
    -webkit-mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.08) 4%,
        rgba(0,0,0,0.35) 10%,
        rgba(0,0,0,0.7) 18%,
        rgba(0,0,0,0.92) 28%,
        #000 38%,
        #000 62%,
        rgba(0,0,0,0.92) 72%,
        rgba(0,0,0,0.7) 82%,
        rgba(0,0,0,0.35) 90%,
        rgba(0,0,0,0.08) 96%,
        rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.08) 4%,
        rgba(0,0,0,0.35) 10%,
        rgba(0,0,0,0.7) 18%,
        rgba(0,0,0,0.92) 28%,
        #000 38%,
        #000 62%,
        rgba(0,0,0,0.92) 72%,
        rgba(0,0,0,0.7) 82%,
        rgba(0,0,0,0.35) 90%,
        rgba(0,0,0,0.08) 96%,
        rgba(0,0,0,0) 100%);
    /* 轻微暗化，让图片融入网站近黑底色 */
    filter: brightness(0.92);
}

/* ========================================
   导航栏
   ======================================== */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 2.5rem;
    height: 68px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid var(--glass-border);
    transition: all var(--transition-smooth);
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.875rem; flex-shrink: 0;
}
/* 站标（v2.14.65）：换成美术给的 LOGO 位图（public/img/logo.png，256×256 带透明圆角）。
   原来这里是「CSS 画的红方块 + 秘字」，现在只留尺寸与对齐，图自己带圆角和投影。 */
.seal {
    display: block;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.brand-text {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.nav-links {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    margin: 0 auto;
}
.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    transition: all var(--transition-fast);
    position: relative;
    padding: 0.25rem 0;
}
.nav-link-btn {
    color: var(--text-secondary);
    background: none;
    border: none;
    font-size: 0.9rem;
    font-family: var(--font-serif);
    letter-spacing: 0.12em;
    cursor: pointer;
    padding: 0.25rem 0;
    transition: all var(--transition-fast);
    position: relative;
}
.nav-link-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--accent-red-bright), transparent);
    transition: all var(--transition-fast);
    transform: translateX(-50%);
}
.nav-link-btn:hover,
.nav-link-btn.active {
    color: var(--text-primary);
}
.nav-link-btn:hover::after,
.nav-link-btn.active::after {
    width: 80%;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--accent-red-bright), transparent);
    transition: all var(--transition-fast);
    transform: translateX(-50%);
}
.nav-links a:hover,
.nav-links a.active {
    color: var(--text-primary);
}
.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0.5rem;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: all 0.3s;
    border-radius: 1px;
}
/* ========================================
   页面切换
   ======================================== */
.page {
    display: none;
    padding-top: 68px;
    min-height: 520px;
}
.page.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* ========================================
   首页 Hero
   ======================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: visible;
}
.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
/* 眼睛符号 */
.eye-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border: 1px solid rgba(160, 48, 64, 0.08);
    border-radius: 80% 20% 55% 45% / 55% 45% 80% 20%;
    animation: eyeMorph 15s ease-in-out infinite;
}
.eye-symbol::before {
    content: '';
    position: absolute;
    inset: 30px;
    border: 1px solid rgba(160, 48, 64, 0.06);
    border-radius: 45% 55% 20% 80% / 80% 20% 55% 45%;
    animation: eyeMorph 12s ease-in-out infinite reverse;
}
.eye-symbol::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(160, 48, 64, 0.12), transparent 70%);
    border-radius: 50%;
    animation: pupilPulse 4s ease-in-out infinite;
}
@keyframes eyeMorph {
    0%, 100% { border-radius: 80% 20% 55% 45% / 55% 45% 80% 20%; }
    25% { border-radius: 45% 55% 20% 80% / 80% 20% 55% 45%; }
    50% { border-radius: 20% 80% 45% 55% / 45% 55% 20% 80%; }
    75% { border-radius: 55% 45% 80% 20% / 20% 80% 45% 55%; }
}
@keyframes pupilPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.3; }
}
/* 卢恩符文 */
.rune {
    position: absolute;
    font-size: 2rem;
    color: rgba(160, 48, 64, 0.08);
    font-family: var(--font-mono);
    animation: runeFloat 8s ease-in-out infinite;
}
.rune-1 { top: 20%; left: 15%; animation-delay: 0s; }
.rune-2 { top: 60%; right: 20%; animation-delay: 2.5s; }
.rune-3 { bottom: 25%; left: 25%; animation-delay: 5s; }
@keyframes runeFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.06; }
    50% { transform: translateY(-15px) rotate(5deg); opacity: 0.12; }
}
/* Hero 内容 */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
    padding: 0 2rem;
}
.glitch-text {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-display);
}
.vertical-text {
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 900;
    color: var(--text-primary);
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.3em;
    text-shadow: 0 0 40px rgba(160, 48, 64, 0.2), 0 4px 8px rgba(0,0,0,0.5);
    animation: titleReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
    display: inline-block;
    position: relative;
}
.vertical-text:nth-child(1) { animation-delay: 0.2s; }
.vertical-text:nth-child(2) {
    animation-delay: 0.4s;
    color: var(--accent-red-bright);
    animation: titleReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards, glitch 3s infinite;
}
.vertical-text:nth-child(3) { animation-delay: 0.6s; }
@keyframes glitch {
    0%, 90%, 100% { transform: translate(0); }
    92% { transform: translate(-3px, 2px); }
    94% { transform: translate(3px, -2px); }
    96% { transform: translate(-2px, 0); }
}
@keyframes titleReveal {
    to { opacity: 1; transform: translateY(0); }
}
.subtitle {
    font-size: 1.1rem;
    color: var(--accent-gold);
    letter-spacing: 0.3em;
    margin-bottom: 1.5rem;
    font-weight: 400;
    animation: fadeIn 1s ease 0.8s both;
}
.hero-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 2;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeIn 1s ease 1s both;
}
/* 统计 */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin-bottom: 3rem;
    animation: fadeIn 1s ease 1.2s both;
}
.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.stat-num {
    font-family: var(--font-display);
    font-size: 4.4rem;
    font-weight: 700;
    color: var(--accent-red-bright);
    text-shadow: 0 0 20px rgba(160, 48, 64, 0.3);
    line-height: 1;
}
.stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.15em;
}
/* CTA 按钮 */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, rgba(160, 48, 64, 0.15), rgba(160, 48, 64, 0.05));
    border: 1px solid rgba(160, 48, 64, 0.3);
    color: var(--accent-red-bright);
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.2em;
    border-radius: 4px;
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
    animation: fadeIn 1s ease 1.4s both;
    backdrop-filter: blur(4px);
}
.cta-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(160, 48, 64, 0.25), rgba(160, 48, 64, 0.1));
    opacity: 0;
    transition: opacity var(--transition-smooth);
}
.cta-button:hover {
    border-color: var(--accent-red-bright);
    box-shadow: var(--shadow-glow), 0 0 60px rgba(160, 48, 64, 0.1);
    transform: translateY(-2px);
}
.cta-button:hover::before {
    opacity: 1;
}
.cta-button span:first-child {
    position: relative;
    z-index: 1;
}
.cta-line {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--accent-red-bright);
    transition: width var(--transition-smooth);
    position: relative;
    z-index: 1;
}
.cta-button:hover .cta-line {
    width: 40px;
}
/* ========================================
   页面标题
   ======================================== */
.page-header {
    text-align: center;
    padding: 5rem 2rem 3rem;
    position: relative;
}
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 3rem;
    background: linear-gradient(to bottom, transparent, var(--accent-red-dim));
}
.page-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    margin-bottom: 1rem;
    text-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.page-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    letter-spacing: 0.15em;
}
/* ========================================
   分区标题
   ======================================== */
.section-title {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.75rem;
    letter-spacing: 0.25em;
    margin-bottom: 3rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}
.title-deco {
    color: var(--accent-red-dim);
    font-size: 0.6rem;
    opacity: 0.6;
}
/* ========================================
   卡片通用样式
   ======================================== */
.timeline-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-smooth);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.timeline-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 50%, rgba(160,48,64,0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-smooth);
}
.timeline-card:hover {
    transform: translateY(-10px);
    border-color: rgba(201, 158, 74, 0.45);
    box-shadow: 
        0 20px 60px rgba(0,0,0,0.7),
        0 0 50px rgba(180, 40, 55, 0.3),
        0 0 100px rgba(160, 48, 64, 0.12);
}
.timeline-card:hover::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(201,158,74,0.12), transparent 40%, rgba(160,48,64,0.15));
}
.module-image {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.module-icon {
    font-size: 3.5rem;
    opacity: 0.7;
    transition: all var(--transition-smooth);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.timeline-card:hover .module-icon {
    transform: scale(1.1);
    opacity: 0.9;
}
.module-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-card), transparent 60%);
}
.module-info {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;
}
.module-info p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.85rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}
.module-meta {
    margin-top: auto;
    padding-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid rgba(255,255,255,0.04);
    position: relative;
    z-index: 1;
}
/* 来源 / 分类徽章统一尺寸与低调底色 */
.module-tag,
.module-origin {
    display: inline-flex;
    align-items: center;
    height: 24px;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 0;
    border-radius: 3px;
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.module-tag {
    color: #9a7478;
    background: rgba(160, 48, 64, 0.045);
    border: 1px solid rgba(160, 48, 64, 0.15);
}
.timeline-card h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    letter-spacing: 0.1em;
}
.timeline-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.25rem;
}
.module-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: auto;
    flex-shrink: 0;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.04);
    position: relative;
    z-index: 1;
}
/* ===== ???? ?????????===== */
.meta-diff {
    font-size: 0.72rem;
    color: rgba(201, 158, 74, 0.6);
    letter-spacing: 0.15em;
    font-family: var(--font-display);
}
.meta-dur, .meta-ply {
    color: rgba(180, 170, 150, 0.6);
    font-size: 0.75rem;
    white-space: nowrap;
}
/* ===== ???? ?????????===== */
.module-era-stamp {
    position: absolute;
    bottom: -55px;
    right: -55px;
    width: 220px;
    height: 220px;
    transform: rotate(-15deg);
    pointer-events: none;
    opacity: 0.42;
    transition: opacity 0.5s ease;
    z-index: 2;
    line-height: 0;
}
.module-era-stamp svg {
    width: 100%;
    height: 100%;
    display: block;
}
.timeline-card:hover .module-era-stamp {
    opacity: 0.58;
}.difficulty {
    color: var(--accent-gold-dim);
}
/* ========================================
   模组档案页
   ======================================== */
/* ========================================
   模态框
   ======================================== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 2rem;
    overflow-y: auto;
    animation: modalFadeIn 0.3s ease;
}
.modal.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    max-width: 850px;
    width: 100%;
    position: relative;
    margin: 2rem auto;
    animation: modalSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: var(--shadow-md), 0 0 80px rgba(0,0,0,0.4);
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 10;
}
.modal-close:hover {
    background: rgba(160, 48, 64, 0.15);
    border-color: rgba(160, 48, 64, 0.3);
    color: var(--accent-red-bright);
}
.modal-header {
    padding: 2.5rem 2.5rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(160, 48, 64, 0.05), transparent);
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.modal-header .modal-id { flex-basis: 100%; }
.modal-header .modal-title { flex: 1; min-width: 0; }
.modal-id {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
}
.modal-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 0.15em;
}
.modal-body {
    padding: 2rem 2.5rem 2.5rem;
}
.modal-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.meta-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}
.meta-value {
    font-size: 0.95rem;
    color: var(--text-primary);
}
/* ========================================
   模组详情 - 标签页
   ======================================== */
.modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(160, 48, 64, 0.2);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.modal-tab {
    padding: 0.6rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--text-muted);
    font-family: var(--font-serif);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.modal-tab:hover {
    color: var(--text-secondary);
    border-bottom-color: rgba(160, 48, 64, 0.3);
}
.modal-tab.active {
    color: var(--accent-red-bright);
    border-bottom-color: var(--accent-red-bright);
}
.modal-tab-panels {
    min-height: 200px;
    max-height: 55vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(201,158,74,0.1) transparent;
}
.modal-tab-panels::-webkit-scrollbar{width:3px}
.modal-tab-panels::-webkit-scrollbar-track{background:transparent}
.modal-tab-panels::-webkit-scrollbar-thumb{background:rgba(201,158,74,0.12);border-radius:2px}
.modal-tab-panel {
    display: none;
}
.modal-tab-panel.active {
    display: block;
    animation: tabFadeIn 0.3s ease;
}
.modal-tab-panel h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--accent-gold);
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.modal-tab-panel h3::before {
    content: "";
    width: 4px;
    height: 16px;
    background: var(--accent-red);
    border-radius: 2px;
}
.modal-tab-panel p {
    color: var(--text-secondary);
    line-height: 1.9;
    margin-bottom: 0.75rem;
}
.modal-tab-panel ul {
    list-style: none;
    padding: 0;
}
.modal-tab-panel ul li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text-secondary);
    line-height: 1.8;
    position: relative;
    padding-left: 1.5rem;
}
.modal-tab-panel ul li::before {
    content: "\25C6";
    position: absolute;
    left: 0;
    color: var(--accent-red-dim);
    font-size: 0.6rem;
    top: 1rem;
}
.modal-tab-panel ul li:last-child {
    border-bottom: none;
}
.modal-tab-panel ul li strong {
    color: var(--text-primary);
    font-weight: 600;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}.modal-section {
    margin-bottom: 2rem;
}
.modal-section:last-child {
    margin-bottom: 0;
}
.modal-section h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--accent-gold);
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.modal-section h3::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--accent-red);
    border-radius: 2px;
}
.modal-section p {
    font-family: var(--font-body);
    color: var(--text-secondary);
    line-height: 2;
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
}
.modal-section ul {
    list-style: none;
    padding: 0;
}
.modal-section ul li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text-secondary);
    line-height: 1.9;
    position: relative;
    padding-left: 1.5rem;
    font-family: var(--font-body);
}
.modal-section ul li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--accent-red-dim);
    font-size: 0.6rem;
    top: 1rem;
}
.modal-section ul li:last-child {
    border-bottom: none;
}
.modal-section ul li strong {
    color: var(--text-primary);
    font-weight: 600;
}
/* 地图按钮 */
.map-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: rgba(160, 48, 64, 0.1);
    border: 1px solid rgba(160, 48, 64, 0.25);
    color: var(--accent-red-bright);
    font-family: var(--font-serif);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    border-radius: 6px;
    transition: all var(--transition-fast);
    margin-top: 1rem;
}
.map-btn:hover {
    background: rgba(160, 48, 64, 0.2);
    border-color: var(--accent-red-bright);
    transform: translateY(-1px);
}
/* 地图模态框 */
.map-modal-content {
    max-width: 90vw;
    width: 90vw;
}
.map-container {
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    overflow-x: auto;
}
/* 地图弹窗中的图片 */
.map-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.map-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.map-container::-webkit-scrollbar-track {
    background: transparent;
}
.map-container::-webkit-scrollbar-thumb {
    background: rgba(160, 48, 64, 0.3);
    border-radius: 3px;
}
/* 地图选项卡 */
.map-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.map-tab {
    padding: 0.4rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    color: #5a554e;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: "Noto Serif SC", serif;
    transition: all 0.2s ease;
}
.map-tab:hover {
    background: rgba(201,158,74,0.08);
    border-color: rgba(201,158,74,0.25);
    color: #c99e4a;
}
.map-tab.active {
    background: rgba(160,48,64,0.12);
    border-color: rgba(160,48,64,0.35);
    color: #d44d5e;
}
/* 地图导航箭头 */
.map-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    color: #a8a095;
    font-size: 1.5rem;
    width: 40px;
    height: 60px;
    cursor: pointer;
    border-radius: 4px;
    z-index: 10;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-nav:hover {
    background: rgba(160,48,64,0.2);
    border-color: rgba(160,48,64,0.4);
    color: #d44d5e;
}
.map-nav-prev {
    left: 0.5rem;
}
.map-nav-next {
    right: 0.5rem;
}
/* Make map modal body position relative for nav arrows */
#map-modal-body {
    position: relative;
}.map-container svg {
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: contain;
}
/* ========================================
   神话图鉴
   ======================================== */
.mythos-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.4rem;
}
.mythos-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: all var(--transition-smooth);
    max-width: 100%;
    cursor: pointer;
}
.mythos-card:hover {
    border-color: rgba(201,158,74,0.35);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(201,158,74,0.15);
    transform: translateY(-3px);
}
/* 图框固定 3:2（v2.19.9）：桌面原来写死 240px、手机写死 120px —— 手机上那一块是 3.6:1 的扁条，
   3:2 的插画会被 cover 裁掉六成、只剩中间一条。改成等比之后，同一张图在桌面 / 平板 / 手机
   都按 3:2 显示，和「主图建议 3:2」这条口径对齐（推荐出图 1600×1067，见后台与投稿表单的提示）。 */
.mythos-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1a0f0f, #2a1f1f);
    position: relative;
    overflow: hidden;
}
.mythos-image.mythos-has-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 主图铺满后必须把 emoji 占位收掉。
   以前这里没有任何隐藏规则，.mythos-icon 一直挂在图片底下：
   图片有透明边或还没加载完时就从下面透出来，看起来像「换了图符号还在」。
   JS 在 img.onload 里也会兜一次（防 CSS 被缓存覆盖）。 */
.mythos-image.mythos-has-img .mythos-icon { display: none; }
.mythos-icon {
    font-size: 5rem;
    opacity: 0.7;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
}
.mythos-card:hover .mythos-icon {
    transform: scale(1.12);
}
/* .mythos-more（卡片上的「详情 N 项 ›」）已按用户要求删除：卡片本身可点、
   图鉴里每条都有详情，那个计数不提供信息。样式保留无害，需要时可启用。 */
.mythos-info {
    padding: 1.2rem 1.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mythos-info h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin-bottom: 0.25rem;
    letter-spacing: 0.06em;
}
.mythos-class {
    font-size: 0.74rem;
    color: var(--accent-gold);
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}
.mythos-info > p:last-of-type {
    font-family: var(--font-body);
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.75;
    margin-bottom: 0.7rem;
}
.mythos-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin-top: auto;
}
.mythos-stats div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.12rem;
    background: var(--bg-primary);
    border-radius: 3px;
    border: 1px solid var(--border-color);
}
.mythos-stats div span:first-child {
    font-size: 0.62rem;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}
.mythos-stats div span:last-child {
    font-size: 0.78rem;
    color: var(--accent-red-bright);
    font-weight: 600;
    font-family: var(--font-mono);
}
.mythos-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* === 神话图鉴详情浮窗（图片 + 详情，五类共用） ===
   之前只当看图用：图直接撑到 1600px，靠 90vh 的框硬裁，下面只有一行名字。
   现在「图区自适应剩余高度 + 详情区滚动」，整块不超过 90vh：
   - 用 flex 而不是写死 max-height:65vh，窗口矮的时候图跟着缩；
   - 图区默认按 3:2 占位（和卡片图框一致），图片 onload 后换成真实比例，
     换图时不会跳版，也不会出现「先撑满再缩回去」的闪动。 */
.mythos-img-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.88);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.mythos-img-overlay.show { display: flex; }
.mythos-img-modal {
    background: #1a1a1e;
    border: 1px solid #2a2a2e;
    border-radius: 12px;
    /* 用 dvh 兜手机地址栏收起/展开的高度变化，vh 会跳 */
    max-height: 80vh;
    max-height: min(80dvh, calc(100dvh - 32px));
    /* 宽度收到 620px（原 1040px）：那是我为了「详情显得宽敞」加的，结果整块悬浮在
       屏幕中间、图片限高后两侧全是黑边，反而更空。620px 与站内 600–700px 的正文列
       同宽，读起来也不至于一行太长。 */
    width: min(620px, 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    overflow: hidden;
}
.mythos-img-close {
    position: absolute;
    top: 8px; right: 10px;
    width: 32px; height: 32px;
    line-height: 1;
    background: rgba(12,12,14,0.72);
    border: 1px solid #2a2a2e;
    border-radius: 50%;
    color: #c8c8c0;
    font-size: 22px;
    cursor: pointer;
    z-index: 5;
}
.mythos-img-close:hover { color: #ff8a95; border-color: #7a3a42; background: rgba(30,14,16,0.9); }
/* 唯一滚动容器：图片区固定在上，详情在下面滚 */
.mythos-img-scroll {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mythos-img-media {
    width: 100%;
    background: #0e0e10;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 图鉴插画统一 3:2：宽度跟满浮窗，高度按原比例撑开，避免两侧黑边。
       JS 在图片加载后会写入真实比例，极端比例的图也不会被裁切。 */
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 0;
}
.mythos-img-media img.mythos-img-main {
    /* 宽度占满容器（原来 width:auto，窄弹窗里只剩中间一条、两侧全是黑边），
       高度由 max-height 约束、比例由 object-fit: contain 保证不裁切。 */
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* 图挂了就别留一块黑 */
.mythos-img-media.is-broken { aspect-ratio: auto; min-height: 0; padding: 0; }
.mythos-img-media.is-broken img.mythos-img-main { display: none; }
/* 条目名：这是标题，不是图注——给它标题级字号与分量，
   并在两侧带细金线收束，和下面的正文拉开层次（原来只有 15px，看图时几乎看不见）。 */
.mythos-img-caption {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ece2cd;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    margin: 16px 0 4px;
    padding: 0 20px;
    /* 标题也不用网站特殊字体（用户要求），靠字号与字重做层级 */
    font-family: var(--font-body);
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.mythos-img-caption::before,
.mythos-img-caption::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,158,74,0.45), rgba(201,158,74,0.15));
}
.mythos-img-caption::after { background: linear-gradient(90deg, rgba(201,158,74,0.15), rgba(201,158,74,0.45), transparent); }
.mythos-img-caption:empty { display: none; }
.mythos-img-thumbs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 16px 10px;
}
/* 单图条目不给小预览：容器清空后把留白也收掉 */
.mythos-img-thumbs:empty { padding: 0; }
.mythos-thumb {
    width: 64px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    background: #111;
}
.mythos-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mythos-thumb:hover { border-color: #8a8a80; }
.mythos-thumb.active { border-color: #c99e4a; }

/* === 详情区 === */
/* 详情整体统一用正文无衬线体（用户要求：这个页面不要用网站的特殊字体）。
   原先标题走 --font-display（ZCOOL XiaoWei / 宋体系）、数值走 --font-mono，
   看久了累眼。这里一次性覆盖，内部各元素不再单独指定字体族。 */
.mythos-img-detail,
.mythos-img-detail h4,
.mythos-img-detail p,
.mythos-img-detail strong,
.mythos-img-detail span,
.mythos-img-detail b,
.mythos-img-detail em,
.mythos-img-detail small,
.mythos-img-detail div {
    font-family: var(--font-body);
}
.mythos-img-detail {
    padding: 6px 22px 26px;
    border-top: 1px solid #26262a;
    margin-top: 4px;
}
.mythos-img-detail:empty { padding: 0; border-top: none; }

/* 生物详情：简介之外的所有内容只保留这一个折叠 */
.mythos-keeper {
    margin: 24px 0 8px;
    text-align: center;
}
/* 小型封存签：借用首页「查阅档案」的暗红渐变、光晕和扫光。 */
.mythos-keeper > summary.mythos-keeper-summary {
    position: relative;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 160px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 11px 30px 9px;
    list-style: none;
    cursor: pointer;
    overflow: hidden;
    color: var(--accent-red-bright, #e25b5b) !important;
    background: linear-gradient(135deg,
        rgba(160, 48, 64, .15) 0%,
        rgba(160, 48, 64, .05) 100%) !important;
    border: 1px solid rgba(160, 48, 64, .32) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    animation: mkGlow 4.8s ease-in-out infinite;
    transition: color .28s ease, background .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.mythos-keeper-summary::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 42%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 120, 120, .12), transparent);
    animation: mkShine 5.5s ease-in-out infinite;
}
.mythos-keeper-summary::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 18px;
    height: 1px;
    transform: translateX(-50%);
    pointer-events: none;
    background: var(--accent-red-bright, #e25b5b);
    transition: width .35s cubic-bezier(.22, .8, .25, 1);
}
.mk-label {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.35;
    letter-spacing: .20em;
    text-indent: .20em;
}
.mk-sub {
    position: relative;
    z-index: 1;
    margin-top: 1px;
    font-family: var(--font-body);
    font-size: 9.5px;
    line-height: 1.35;
    letter-spacing: .14em;
    color: #a35b62;
    transition: color .28s ease;
}
.mythos-keeper > summary.mythos-keeper-summary:hover {
    color: #ff8b83 !important;
    background: linear-gradient(135deg,
        rgba(160, 48, 64, .25) 0%,
        rgba(160, 48, 64, .10) 100%) !important;
    border-color: var(--accent-red-bright, #e25b5b) !important;
    box-shadow: var(--shadow-glow, 0 0 24px rgba(160, 48, 64, .24)), 0 0 60px rgba(160, 48, 64, .10) !important;
    transform: translateY(-2px);
}
.mythos-keeper > summary.mythos-keeper-summary:hover::after { width: 44px; }
.mythos-keeper > summary.mythos-keeper-summary:hover .mk-sub { color: #c47a80; }
.mythos-keeper > summary::-webkit-details-marker { display: none; }
.mythos-keeper > summary::marker { content: ""; }
.mythos-keeper > summary.mythos-keeper-summary:focus-visible {
    outline: 2px solid rgba(220, 90, 80, .55);
    outline-offset: 3px;
}
.mythos-keeper[open] > summary.mythos-keeper-summary {
    border-color: rgba(201, 158, 74, .30) !important;
}
.mythos-keeper[open] > summary.mythos-keeper-summary,
.mythos-keeper[open] > summary.mythos-keeper-summary::before { animation-play-state: paused; }
.mythos-keeper-body {
    padding: 16px 6px 6px;
    text-align: left;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 0;
    transition: height 0.46s cubic-bezier(0.22, 0.8, 0.25, 1),
                opacity 0.32s ease,
                transform 0.42s cubic-bezier(0.22, 0.8, 0.25, 1);
}
.mythos-keeper-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 38, 48, .22);
    border-left: 2px solid rgba(190, 55, 64, .60);
    background: rgba(120, 20, 28, .18);
    color: #b8797c;
    font-size: 11px;
    letter-spacing: .08em;
    line-height: 1.6;
}
.mk-warn-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border: 1px solid rgba(190, 65, 74, .55);
    color: #c86a72;
    font-size: 10px;
    line-height: 1;
}
@keyframes mkGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(160, 48, 64, 0); }
    50% { box-shadow: 0 0 22px rgba(160, 48, 64, .18); }
}
@keyframes mkShine {
    0%, 70% { transform: translateX(-120%); opacity: 0; }
    80% { opacity: .8; }
    100% { transform: translateX(280%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mythos-keeper-summary,
    .mythos-keeper-summary::before { animation: none !important; }
    .mythos-keeper-body { transition: none; }
}
.mythos-refs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 4px 0 14px;
}
.mythos-refs-label { color: #b9a884; font-size: .85rem; white-space: nowrap; }
.mythos-refs button {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    padding: 5px 10px;
    margin: 0;
    border: 1px solid #33302a;
    border-radius: 999px;
    background: rgba(201,158,74,0.06);
    color: #e3d4b4;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: .85rem;
    line-height: 1.4;
}
.mythos-refs button:hover { border-color: #c99e4a; background: rgba(201,158,74,0.12); }

/* 生态标签 */
.mythos-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 4px;
}
.mythos-chip {
    font-size: 0.82rem;
    color: #b4aca0;
    background: #141418;
    border: 1px solid #2a2a30;
    border-radius: 999px;
    padding: 0.26rem 0.75rem;
}
.mythos-chip b { color: var(--accent-gold); font-weight: 600; margin-right: 0.3rem; }

/* 生态标签（.mythos-chips / .mythos-chip）与来源小字（.mythos-note）已停止渲染：
   用户要求删掉这些元信息（与简介、攻击说明重复）。CSS 保留无害，日后需要可直接启用。 */

/* 浮窗里的概述（卡片上那句简介） */
.mythos-lead {
    color: #cfc8ba;
    font-size: 0.98rem;
    line-height: 1.85;
    margin: 14px 0 2px;
    padding-left: 0.8rem;
    border-left: 2px solid rgba(201,158,74,0.5);
}

/* 理智损失 */
.mythos-san {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 14px 0 2px;
    padding: 0.7rem 0.95rem;
    background: linear-gradient(90deg, rgba(212,77,94,0.13), rgba(212,77,94,0.03));
    border-left: 3px solid #d44d5e;
    border-radius: 0 6px 6px 0;
}
.mythos-san span { font-size: 0.84rem; color: #b4aca0; letter-spacing: 0.08em; }
/* 数值不用等宽字体，靠字号和颜色突出 */
.mythos-san strong { color: #ff8a95; font-size: 1.18rem; font-weight: 700; }

/* 小节 */
.mythos-sec { margin-top: 22px; }
.mythos-sec h4 {
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--accent-gold);
    margin-bottom: 0.7rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #2a2a30;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* 小节标题旁的一句注解（如技能段的「括号内为困难 / 极难档」）：
   不要抢标题的分量，只当脚注用。 */
.mythos-h4note {
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0;
    color: #8b8880;
}
/* 正文：整体调大（原来 0.84rem 在看图时太小），行距略收，读起来更紧凑 */
.mythos-body {
    color: #c6c0b4;
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 0.6rem;
}
.mythos-body em { color: #e6ddca; font-style: normal; font-weight: 600; }
/* 数值类文字不再用等宽字体（用户要求）：详情整体统一字体，只加字距强调 */
.mythos-mono { color: #cfc8ba; font-size: 0.93rem; letter-spacing: 0.03em; }
.mythos-note { color: #8b8880; font-size: 0.8rem; line-height: 1.6; margin-top: 0.55rem; }

/* 六维属性 */
.mythos-attrs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}
.mythos-attr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.5rem 0.1rem;
    background: #141418;
    border: 1px solid #26262a;
    border-radius: 6px;
}
.mythos-attr .k {
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    color: #9b978e;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
}
.mythos-attr .k small { font-size: 0.68rem; color: #7a7872; letter-spacing: 0; }
/* 属性数值不用等宽字体（用户要求统一字体），靠字号与颜色区分层级 */
.mythos-attr .v {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ff8a95;
}
/* 派生数值 */
.mythos-derived {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}
/* 竖排「标签在上 / 数值在下」：原来横排 space-between 时，「伤害加成」这种四字标签
   在窄列里会被折成两行（截图里那个「伤害加/成」）。竖排就不会挤。 */
.mythos-dv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.5rem 0.55rem;
    background: #121216;
    border: 1px solid #24242a;
    border-radius: 6px;
}
.mythos-dv .k { font-size: 0.78rem; color: #9b978e; letter-spacing: 0.04em; white-space: nowrap; }
.mythos-dv .v { font-size: 1.05rem; font-weight: 700; color: #c99e4a; }

/* 攻击 / 能力 / 法术条目 */
.mythos-atk, .mythos-ab, .mythos-spell {
    padding: 0.7rem 0.9rem;
    margin-bottom: 7px;
    background: #141418;
    border: 1px solid #26262a;
    border-left: 3px solid #3a3a42;
    border-radius: 0 6px 6px 0;
}
.mythos-atk { border-left-color: #a8465a; }
.mythos-ab { border-left-color: #6b5aa8; }
.mythos-spell { border-left-color: #4a8a7a; }
.mythos-atk-line { color: #ddd5c6; font-size: 0.95rem; line-height: 1.7; margin-bottom: 0.2rem; }
.mythos-atk-line strong { color: var(--accent-gold); font-weight: 600; }
.mythos-atk-note { color: #9e988e; font-size: 0.88rem; line-height: 1.7; }
.mythos-ab-name, .mythos-spell-name {
    color: #e0d8c8;
    font-family: var(--font-body);
    font-size: 0.96rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.3rem;
}
.mythos-spell-name { color: #7fc9b4; }
.mythos-ab-name { color: #b0a2e8; }
.mythos-atk .mythos-body:last-child,
.mythos-ab .mythos-body:last-child,
.mythos-spell .mythos-body:last-child { margin-bottom: 0; }

/* .mythos-rolls（官方掷骰区间）已停止渲染：用户反馈「这一行 ROLL 值没用」。
   CSS 保留无害，数据字段 statsRoll 也仍在 mythos.json 里备查。 */

/* .mythos-conf / .mythos-src 已不再渲染（卡片底部不再展示核对状态与规则出处），
   CSS 保留无害，供日后需要时直接启用。 */

/* 窄屏：属性两行三列，图区不再固定 3:2 抢高度 */
@media (max-width: 640px) {
    .mythos-img-overlay { padding: 10px; }
    .mythos-img-modal {
        max-height: 88vh;
        max-height: min(88dvh, calc(100dvh - 20px));
        border-radius: 10px;
    }
    .mythos-img-detail { padding: 4px 13px 18px; }
    .mythos-attrs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mythos-img-caption { font-size: 21px; letter-spacing: 0.06em; gap: 10px; }
}
/* ========================================
   调查员
   ======================================== */
.investigator-sections {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 2rem 6rem;
}
.inv-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    transition: all var(--transition-smooth);
}
.inv-card:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
}
.inv-card h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.inv-icon {
    font-size: 1.5rem;
    opacity: 0.7;
}
.inv-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.inv-card p strong {
    color: var(--accent-gold);
    font-weight: 600;
}
/* 「想换年代也跑得通」这类补充说明：弱一档，别和正文抢注意力 */
.inv-card p.inv-card-alt {
    color: #7d7360;
    font-size: 0.92rem;
    border-left: 2px solid rgba(201,158,74,0.28);
    padding-left: 0.75rem;
    margin-bottom: 0;
}
.inv-card ul {
    list-style: none;
}
.inv-card ul li {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 0.95rem;
}
.inv-card ul li:last-child {
    border-bottom: none;
}
.inv-card ul li strong {
    color: var(--accent-gold);
    font-weight: 600;
}
/* 「特殊规则」卡片的一句话前言：说清这些房规挂在哪些 7E 机制上 */
.inv-card p.inv-card-lead {
    color: #8a7f68;
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 0.9rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px dashed rgba(201,158,74,0.18);
}
.inv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    max-width: 700px;
    margin: 0 auto 3rem;
}
.inv-grid .inv-card {
    margin-bottom: 0;
}
/* 时代背景 + 特殊规则合成一张大卡（v2.14.11 合并；v2.14.18 改单列；v2.14.38 默认折叠） */
.inv-grid.inv-grid-single { grid-template-columns: 1fr; max-width: 820px; }
/* 折叠头：整行可点，右边一个小箭头；hover 时标题转金、底色微亮 */
.inv-merged-head {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
    padding: 4px 6px; margin: -4px -6px;
    border-radius: 8px;
    transition: background .2s;
}
.inv-merged-head:hover { background: rgba(255,255,255,0.03); }
.inv-merged-head:focus-visible { outline: 1px solid rgba(201,158,74,0.6); outline-offset: 2px; }
.inv-merged-head .inv-icon { font-size: 1.15rem; }
.inv-card-merged h2 { margin: 0; font-size: 1.15rem; transition: color .2s; }
.inv-merged-head:hover h2 { color: var(--accent-gold); }
.inv-merged-sum { font-size: 12.5px; color: #7d7466; letter-spacing: .04em; margin-left: 4px; }
.inv-merged-caret {
    margin-left: auto; flex: none;
    font-size: 13px; color: #8a7a60; line-height: 1;
    transition: transform .3s cubic-bezier(.4,0,.2,1), color .2s;
}
.inv-merged-head:hover .inv-merged-caret { color: var(--accent-gold); }
.inv-card-merged:not(.is-folded) .inv-merged-caret { transform: rotate(180deg); }
/* 正文：默认收成 0 高（只留标题行），点开才铺开；高度由 JS 量好写进内联样式 */
.inv-merged-body {
    max-height: 0; overflow: hidden;
    transition: max-height .38s cubic-bezier(.4,0,.2,1);
}
.inv-card-merged:not(.is-folded) .inv-merged-body { margin-top: 1.1rem; }
.inv-merged-body .inv-merged-cols { padding-bottom: 2px; }
.inv-merged-col { min-width: 0; }
.inv-merged-col + .inv-merged-col {
    margin-top: 1.6rem;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(201,158,74,0.16);
}
.inv-merged-col h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--accent-gold);
    letter-spacing: 0.12em;
    margin: 0 0 0.8rem;
}
/* 「车卡房规」高亮块：进车卡前先看这一块，放在特殊规则最前面 */
.inv-rule-warn {
    background: rgba(212,77,94,0.07);
    border: 1px solid rgba(212,77,94,0.32);
    border-left: 3px solid #d44d5e;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 1.1rem;
}
.inv-rule-warn-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e0707f;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.inv-rule-warn-list { list-style: none; margin: 0; }
.inv-rule-warn-list li {
    position: relative;
    padding-left: 14px;
    font-size: 0.9rem;
    line-height: 1.75;
    color: #c8b9b2;
}
.inv-rule-warn-list li::before { content: '·'; position: absolute; left: 2px; color: #d44d5e; }
.inv-rule-warn-list li strong { color: #e8b06a; font-weight: 600; }
.inv-rule-warn-foot { font-size: 0.82rem; color: #8a7a70; margin: 8px 0 0; line-height: 1.6; }
.inv-rule-warn-foot code { color: #a89368; font-size: 0.95em; }
/* 职业表格 */
.job-table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.job-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.job-table th,
.job-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.job-table th {
    color: var(--accent-gold);
    font-weight: 400;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
    background: var(--bg-primary);
    text-transform: uppercase;
}
.job-table td {
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.job-table tr:hover td {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.job-table tbody tr:last-child td {
    border-bottom: none;
}
/* ========================================
   世界设定
   ======================================== */
.lore-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem 6rem;
}
.lore-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
    /* 标签不换行、不压缩：放不下就横向滚动（以前六个标签被挤成两行竖字） */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.lore-tabs::-webkit-scrollbar { height: 0; }
.lore-tab {
    flex: 0 0 auto;              /* 不许被压窄 */
    white-space: nowrap;         /* 「神话地点」不拆成两行 */
    padding: 1.25rem 2rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.lore-tab:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.02);
}
#submit .lore-tabs { justify-content: center; gap: 2px; }
#submit .lore-tab { padding: 1rem 1.15rem; font-size: 0.92rem; letter-spacing: 0.08em; border-radius: 8px 8px 0 0; }
#submit .lore-tab.active { background: rgba(160, 48, 64, 0.07); }
@media (max-width: 720px) {
    #submit .lore-tabs { justify-content: flex-start; }
    #submit .lore-tab { padding: 0.85rem 0.9rem; font-size: 0.88rem; letter-spacing: 0.04em; }
}
.lore-tab.active {
    color: var(--accent-red-bright);
    border-bottom-color: var(--accent-red);
    background: rgba(160, 48, 64, 0.05);
}
.lore-panel {
    display: none;
    animation: fadeIn 0.5s ease;
}
.lore-panel.active {
    display: block;
}
/* 面板内的子标签（v2.14.65 遭遇页：遭遇 / NPC / 追逐）
   沿用顶层 .lore-tab 的样式语言，但体型小一档、间距收紧，看不出是「第二个标签条」 */
.kpv2-subtabs { margin: 2px 0 16px; }
.kpv2-subtab { padding: 0.6rem 1.3rem; font-size: 0.88rem; letter-spacing: 0.1em; }
.kpv2-subpanel { animation: fadeIn 0.35s ease; }
.lore-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: all var(--transition-smooth);
    position: relative;
    border-radius: 8px;
}
.lore-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, var(--accent-red), var(--accent-red-dim));
    opacity: 0;
    transition: opacity var(--transition-smooth);
    border-radius: 8px 0 0 8px;
}
.lore-item:hover {
    border-color: var(--border-light);
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}
.lore-item:hover::before {
    opacity: 1;
}
.lore-item h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}
.lore-class {
    font-size: 0.8rem;
    color: var(--accent-gold);
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}
.lore-item p:last-child {
    color: var(--text-secondary);
    line-height: 1.9;
    font-size: 0.95rem;
}
/* ========================================
   页脚
   ======================================== */
.main-footer {
    padding: 2.5rem 2rem 3rem;
    background: transparent;   /* 透明背景，直接压在主页背景上 */
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.footer-brand .seal {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.footer-brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
.footer-brand-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.28em;
    margin: 0;
    color: var(--text-primary);
    font-weight: 400;
}
.footer-brand-sub {
    font-size: 0.72rem;
    color: var(--accent-gold);
    letter-spacing: 0.42em;
    margin: 0;
    font-family: var(--font-serif);
    opacity: 0.85;
}
.footer-copy {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.8;
    max-width: 720px;
    opacity: 0.9;
}
.footer-copy p {
    margin: 0;
}
.footer-copy .footer-version {
    margin-top: 0.55rem;
    font-family: var(--font-serif);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    opacity: 0.55;
}
.footer-copy .footer-version span {
    color: var(--accent-gold);
    opacity: 0.9;
    letter-spacing: 0.12em;
}
/* ========================================
   响应式
   ======================================== */
.kpv2-char-tab-file { padding: 5px 12px; background: rgba(180,60,60,0.06); border: 1px solid #2a2210; border-radius: 4px; color: #8a7a60; font-size: 13px; cursor: pointer; transition: all 0.2s; font-family: var(--font-display); letter-spacing: 0.05em; }
.kpv2-char-tab-file:hover { border-color: #c99e4a; color: #c99e4a; background: rgba(201,158,74,0.1); }
.kpv2-char-tab-clear { border-color: rgba(180,60,70,0.15) !important; font-size: 15px; padding: 5px 9px; }
.kpv2-char-tab-clear:hover { border-color: #d44d5e !important; color: #d44d5e !important; background: rgba(180,60,70,0.1) !important; }
@media (max-width: 768px) {.mythos-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem 4rem;
    }
    .mythos-card {
        flex-direction: column;
    }
    .mythos-image {
        width: 100%;
        aspect-ratio: 3 / 2;
        height: auto;
    }
}
@media (max-width: 768px) {
    .main-nav {
        padding: 0 1.5rem;
        height: 60px;
    }
.nav-links {
        flex-direction: column;
        background: rgba(10, 10, 12, 0.97);
        padding: 1.5rem;
        gap: 1.5rem;
        border-bottom: 1px solid var(--border-color);
        backdrop-filter: blur(20px);
        margin: 0;
    }
    .nav-links.active {
        display: flex;
    }
    .nav-toggle {
        display: flex;
    }
    .vertical-text {
        font-size: 3rem;
    }
    .hero-stats {
        gap: 2rem;
    }
    .stat-num {
        font-size: 3.5rem;
    }    .modules-grid,
    .mythos-grid,
    .investigator-sections,
    .lore-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }.mythos-card {
        flex-direction: column;
    }
    .mythos-image {
        width: 100%;
        aspect-ratio: 3 / 2;
        height: auto;
    }
    .inv-grid {
        grid-template-columns: 1fr;
    }
    .mythos-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    .lore-tabs {
        flex-wrap: wrap;
    }
    .lore-tab {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
    .modal {
        padding: 1rem;
    }
    .modal-content {
        margin: 0.5rem auto;
    }
    .modal-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-title {
        font-size: 1.75rem;
    }
    .section-title {
        font-size: 1.25rem;
    }
    .map-container {
        padding: 0.75rem;
    }
}
@media (max-width: 480px) {
    .filter-btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.85rem;
    }
    .modal-meta-grid {
        grid-template-columns: 1fr;
    }
    .hero-desc {
        font-size: 0.9rem;
    }
    .subtitle {
        font-size: 0.9rem;
        letter-spacing: 0.2em;
    }
}
/* ========================================
   地图缩放控制
   ======================================== */
/* ========================================
   诡秘动画增强
   ======================================== */
/* 闪烁叠加层 */
.flicker-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-flicker);
    pointer-events: none;
    background: rgba(160, 48, 64, 0.01);
    animation: flicker 7s infinite;
}
@keyframes flicker {
    0%, 100% { opacity: 0; }
    5% { opacity: 0.02; }
    6% { opacity: 0; }
    15% { opacity: 0; }
    16% { opacity: 0.015; }
    17% { opacity: 0; }
    45% { opacity: 0; }
    46% { opacity: 0.01; }
    47% { opacity: 0; }
    92% { opacity: 0; }
    93% { opacity: 0.025; }
    94% { opacity: 0; }
}
/* 文字故障效果增强 */
/* 卡片诡秘悬停 */
@keyframes subtleDistort {
    0%, 100% { filter: none; }
    25% { filter: saturate(1.1) contrast(1.05); }
    50% { filter: saturate(0.95) contrast(1.1); }
    75% { filter: saturate(1.05) contrast(0.95); }
}
/* 模态框诡秘出现 */
.modal-content {
    animation: modalEmerge 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modalEmerge {
    0% { opacity: 0; transform: translateY(40px) scale(0.97) rotateX(2deg); filter: blur(8px); }
    60% { filter: blur(2px); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: blur(0); }
}
/* 导航栏诡秘闪烁 */
.main-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160, 48, 64, 0.3), transparent);
    animation: navPulse 4s ease-in-out infinite;
}
@keyframes navPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}
/* 滚动提示诡秘呼吸 */
.scroll-line {
    animation: scrollBreath 3s ease-in-out infinite;
}
@keyframes scrollBreath {
    0%, 100% { opacity: 0.2; transform: scaleY(0.5); }
    50% { opacity: 0.9; transform: scaleY(1.2); }
}
/* 页面切换：只做透明度，避免整页 filter/transform 给 fixed 子元素换 containing block */
.page {
    animation: pageIn var(--motion-slow) var(--ease-soft) both;
}
@keyframes pageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.page.active .page-header,
.page.active .section-title {
    animation: pageHeadIn var(--motion-base) var(--ease-out) both;
}
@keyframes pageHeadIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 统计数字发光 */
.stat-num {
    animation: numPulse 4s ease-in-out infinite;
}
.stat-num:nth-child(2) { animation-delay: 1s; }
@keyframes numPulse {
    0%, 100% { text-shadow: 0 0 20px rgba(160, 48, 64, 0.2); }
    50% { text-shadow: 0 0 30px rgba(160, 48, 64, 0.4), 0 0 60px rgba(160, 48, 64, 0.1); }
}
/* ========================================
   背景类
   ======================================== */
.bg-subway { background: linear-gradient(135deg, #1a0f0f 0%, #2d1f1f 100%); }
.bg-village { background: linear-gradient(135deg, #1a2a1a, #2a3a2a); }
.bg-hospital { background: linear-gradient(135deg, #1a1a2a, #2a2a3a); }
.bg-school { background: linear-gradient(135deg, #2a1a1a, #3a2a2a); }
.bg-factory { background: linear-gradient(135deg, #2a2a1a, #3a3a2a); }
.bg-theater { background: linear-gradient(135deg, #1a1a1a, #2d2d2d); }
.bg-tomb { background: linear-gradient(135deg, #1a1a0a, #2a2a1a); }
.bg-internet { background: linear-gradient(135deg, #0a0a1a, #1a1a2a); }
.bg-river { background: linear-gradient(135deg, #0a1a1a, #1a2a2a); }
.bg-mythos-1 { background: linear-gradient(135deg, #0a0a1a, #1a1a2a); }
.bg-mythos-2 { background: linear-gradient(135deg, #1a0a0a, #2a1a1a); }
.bg-mythos-3 { background: linear-gradient(135deg, #0a1a0a, #1a2a1a); }
.bg-mythos-4 { background: linear-gradient(135deg, #1a1a0a, #2a2a1a); }
.bg-mythos-5 { background: linear-gradient(135deg, #0a0a0a, #1a0a1a); }
.bg-mythos-6 { background: linear-gradient(135deg, #0a1a1a, #1a2a2a); }
/* ========================================
   筛选栏
   ======================================== */
.filter-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2rem auto 3rem;
    max-width: 1200px;
    padding: 0 2rem;
}
.filter-btn {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    padding: 0.55rem 1.4rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
}
.filter-btn:hover {
    color: #ffffff;
    background: rgba(180, 45, 55, 0.12);
    border-color: rgba(220, 50, 60, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 24px rgba(180, 40, 55, 0.25);
}
.filter-btn.active {
    color: var(--text-primary);
    background: rgba(160, 48, 64, 0.15);
    border-color: rgba(200, 55, 65, 0.5);
    box-shadow: 0 0 20px rgba(160, 48, 64, 0.22), inset 0 0 14px rgba(160, 48, 64, 0.08);
}
/* ===== ????????? ===== */
.filter-btn-d {
    border-color: rgba(110,100,95,0.35) !important;
    color: #9a9590 !important;
    background: rgba(90,82,78,0.04) !important;
}
.filter-btn-d:hover {
    border-color: rgba(140,115,108,0.55) !important;
    color: #b5ada5 !important;
    box-shadow: 0 0 12px rgba(100,90,85,0.1) !important;
}
.filter-btn-d.active {
    border-color: rgba(120,105,98,0.5) !important;
    background: rgba(100,90,85,0.1) !important;
    color: #c0b8b0 !important;
    box-shadow: 0 0 18px rgba(100,90,85,0.18), inset 0 0 10px rgba(100,90,85,0.05) !important;
}
.filter-btn-c {
    border-color: rgba(150,65,58,0.35) !important;
    color: #b07868 !important;
    background: rgba(120,65,60,0.04) !important;
}
.filter-btn-c:hover {
    border-color: rgba(180,75,65,0.55) !important;
    color: #c09085 !important;
    box-shadow: 0 0 14px rgba(140,70,65,0.15) !important;
}
.filter-btn-c.active {
    border-color: rgba(160,80,72,0.5) !important;
    background: rgba(140,75,70,0.12) !important;
    color: #d0a098 !important;
    box-shadow: 0 0 20px rgba(150,65,58,0.28), inset 0 0 10px rgba(140,70,65,0.08) !important;
}
.filter-btn-b {
    border-color: rgba(175,42,40,0.38) !important;
    color: #c05850 !important;
    background: rgba(145,45,43,0.04) !important;
}
.filter-btn-b:hover {
    border-color: rgba(210,40,38,0.55) !important;
    color: #d06860 !important;
    box-shadow: 0 0 16px rgba(155,50,48,0.2) !important;
}
.filter-btn-b.active {
    border-color: rgba(185,55,52,0.5) !important;
    background: rgba(165,50,48,0.12) !important;
    color: #e08070 !important;
    box-shadow: 0 0 22px rgba(175,42,40,0.35), inset 0 0 12px rgba(155,50,48,0.1) !important;
}
.filter-btn-a {
    border-color: rgba(195,32,35,0.4) !important;
    color: #c84038 !important;
    background: rgba(165,35,37,0.04) !important;
}
.filter-btn-a:hover {
    border-color: rgba(230,30,32,0.6) !important;
    color: #e05048 !important;
    box-shadow: 0 0 18px rgba(175,38,40,0.25) !important;
}
.filter-btn-a.active {
    border-color: rgba(205,40,42,0.5) !important;
    background: rgba(185,38,40,0.14) !important;
    color: #f06050 !important;
    box-shadow: 0 0 26px rgba(195,32,35,0.42), inset 0 0 14px rgba(175,38,40,0.14) !important;
}
.filter-btn.active:hover {
    border-color: var(--accent-red);
    box-shadow: 0 0 20px rgba(160, 48, 64, 0.25), inset 0 0 16px rgba(160, 48, 64, 0.1);
}
/* ========================================
   时间轴
   ======================================== */
.timeline-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 6rem;
    position: relative;
}
.timeline-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--accent-red-dim), transparent);
    transform: translateX(-50%);
    animation: timelinePulse 4s ease-in-out infinite;
}
@keyframes timelinePulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}
.timeline-tier {
    position: relative;
    margin-bottom: 4rem;
}
.timeline-tier:last-child {
    margin-bottom: 0;
}
.tier-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 2rem;
    position: relative;
    z-index: 5;
    border: 2px solid;
    font-family: var(--font-display);
    flex-direction: column;
}
.tier-letter {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}
.tier-label {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    opacity: 0.8;
}
.tier-D {
    background: rgba(100, 120, 100, 0.1);
    border-color: rgba(100, 120, 100, 0.4);
    color: #8a9a8a;
    box-shadow: 0 0 20px rgba(100, 120, 100, 0.15);
}
.tier-C {
    background: rgba(180, 160, 80, 0.1);
    border-color: rgba(180, 160, 80, 0.4);
    color: #c9b060;
    box-shadow: 0 0 20px rgba(180, 160, 80, 0.15);
}
.tier-B {
    background: rgba(180, 120, 60, 0.1);
    border-color: rgba(180, 120, 60, 0.4);
    color: #d4964a;
    box-shadow: 0 0 20px rgba(180, 120, 60, 0.15);
}
.tier-A {
    background: rgba(160, 48, 64, 0.1);
    border-color: rgba(160, 48, 64, 0.4);
    color: var(--accent-red-bright);
    box-shadow: 0 0 25px rgba(160, 48, 64, 0.2);
}
.tier-S {
    background: rgba(200, 30, 40, 0.15);
    border-color: rgba(255, 60, 60, 0.6);
    color: #ff4444;
    box-shadow: 0 0 30px rgba(255, 40, 40, 0.3);
    animation: tierFlash 1.5s ease-in-out infinite;
}
@keyframes tierFlash {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 40, 40, 0.3); border-color: rgba(255, 60, 60, 0.6); }
    50% { box-shadow: 0 0 50px rgba(255, 40, 40, 0.6), 0 0 80px rgba(255, 0, 0, 0.2); border-color: rgba(255, 100, 100, 0.9); }
}
.timeline-line {
    display: none;
}
.timeline-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}
.timeline-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-smooth);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.timeline-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 50%, rgba(160,48,64,0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-smooth);
}
.timeline-card:hover {
    transform: translateY(-10px);
    border-color: rgba(201, 158, 74, 0.45);
    box-shadow: 
        0 20px 60px rgba(0,0,0,0.7),
        0 0 50px rgba(180, 40, 55, 0.3),
        0 0 100px rgba(160, 48, 64, 0.12);
}
.timeline-card:hover::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(201,158,74,0.12), transparent 40%, rgba(160,48,64,0.15));
}
.timeline-image {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1a0f0f 0%, #2d1f1f 100%);
}
/* 时间轴筛选隐藏 */
.timeline-tier.hidden {
    display: none;
}
/* 响应式 */
@media (max-width: 768px) {
    .timeline-container {
        padding: 0 1rem 4rem;
    }
    .filter-bar {
        gap: 0.5rem;
        padding: 0 1rem;
        margin: 1.5rem auto 2rem;
    }
    .filter-btn {
        font-size: 0.85rem;
        padding: 0.45rem 1rem;
    }
    .timeline-container::before {
        left: 24px;
        transform: none;
    }
    .tier-badge {
        margin: 0 0 1.5rem 0;
        width: 60px;
        height: 60px;
    }
    .tier-letter {
        font-size: 1.4rem;
    }
    .timeline-cards {
        grid-template-columns: 1fr;
        padding-left: 48px;
    }
}
@media (max-width: 480px) {
    .timeline-cards {
        padding-left: 40px;
    }
    .filter-btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.85rem;
    }
    .timeline-card {
        min-height: auto;
    }
}
/* ========================================
   触手导航区域
   ======================================== */
/* ========================================
   心率导航区域
   ======================================== */
.ecg-nav-section { padding-top: 14px;
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 100vw;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: radial-gradient(ellipse at 50% 60%, rgba(160,50,55,0.06) 0%, rgba(10,8,8,0.25) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(160,48,64,0.06);
}
.ecg-nav-section.expanded {
    opacity: 1;
    pointer-events: auto;
    max-height: 40vh;
    overflow-y: auto;
    padding: 2rem 0.5rem 1.5rem;
}
.archive-buttons-row {
    display: flex;
    gap: 0.6rem;
    padding: 0 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
/* ========================================
   档案袋按钮 - Dossier Style
   ======================================== */
.archive-buttons-row .nav-sigil-btn {
    position: relative;
    width: 105px;
    height: 75px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    opacity: 0;
    transform: translateY(20px);
    /* 档案袋底色 */
    background: linear-gradient(180deg,
        rgba(20, 18, 16, 0.95) 0%,
        rgba(16, 14, 12, 0.95) 50%,
        rgba(12, 10, 8, 0.95) 100%);
    border: 1px solid rgba(160, 48, 64, 0.15);
    border-left: 1px solid rgba(160, 48, 64, 0.05);
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* 纸质纹理感 */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02),
                inset 0 -1px 0 rgba(0,0,0,0.3),
                0 2px 8px rgba(0,0,0,0.4);
    overflow: visible;
}
/* 扫描线纹理 */
.archive-buttons-row .nav-sigil-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(0,0,0,0.03) 1px,
        rgba(0,0,0,0.03) 3px
    );
    pointer-events: none;
    z-index: 1;
    border-radius: 0 4px 4px 0;
}
/* 归档印章 */
.sigil-stamp {
    position: absolute;
    top: 6px;
    right: 6px;
    font-family: var(--font-display);
    font-size: 0.55rem;
    color: rgba(200, 60, 80, 0.5);
    border: 1px solid rgba(201, 158, 74, 0.3);
    padding: 1px 5px;
    letter-spacing: 0.1em;
    transform: rotate(6deg);
    opacity: 0;
    transition: all 0.3s;
    z-index: 2;
    border-radius: 2px;
}
.nav-sigil-btn:hover .sigil-stamp {
    opacity: 1;
    color: rgba(220, 80, 100, 0.8);
    border-color: rgba(220, 80, 100, 0.5);
}
/* 图标 */
.archive-buttons-row .sigil-icon {
    font-size: 1.6rem;
    color: rgba(220, 80, 100, 0.85);
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(160,48,64,0.2));
    transition: all 0.3s;
}
.nav-sigil-btn:hover .sigil-icon {
    opacity: 0.9;
    filter: drop-shadow(0 0 14px rgba(200,60,80,0.4));
    transform: translateY(-2px);
}
/* 标题 */
.archive-buttons-row .sigil-text {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    color: #e8d5d0;
    z-index: 2;
    transition: color 0.3s;
}
.nav-sigil-btn:hover .sigil-text {
    color: var(--accent-red-bright);
}
/* 编号 */
.sigil-code {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    opacity: 0;
    z-index: 2;
    transition: all 0.3s;
    margin-top: 0.15rem;
}
.nav-sigil-btn:hover .sigil-code {
    opacity: 0.6;
    color: var(--accent-gold-dim);
}
/* 悬浮发光 */
.nav-sigil-btn:hover {
    border-left-color: rgba(200, 60, 80, 0.6);
    border-left-width: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02),
                inset 0 -1px 0 rgba(0,0,0,0.3),
                0 0 30px rgba(160, 48, 64, 0.2),
                0 4px 16px rgba(0,0,0,0.5);
    transform: translateY(-3px);
}
/* ========================================
   入场 + 信号干扰
   ======================================== */
.archive-buttons-row .nav-sigil-btn.revealed {
    animation: dossierIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
               glitchFlicker 3s steps(1) infinite 0.45s;
}
@keyframes dossierIn {
    0% { opacity: 0; transform: translateY(30px) scale(0.9); filter: blur(4px); }
    60% { opacity: 1; transform: translateY(-2px) scale(1.01); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes glitchFlicker {
    0%, 90%, 92%, 100% { opacity: 1; transform: none; }
    91% { opacity: 0.4; transform: skewX(-2deg) translateX(-2px); }
    91.5% { opacity: 0.8; transform: skewX(1deg) translateX(1px); }
}
.archive-buttons-row .nav-sigil-btn:nth-child(1).revealed { animation-delay: 0s, 0.35s; }
.archive-buttons-row .nav-sigil-btn:nth-child(2).revealed { animation-delay: 0.07s, 0.5s; }
.archive-buttons-row .nav-sigil-btn:nth-child(3).revealed { animation-delay: 0.14s, 0.65s; }
.archive-buttons-row .nav-sigil-btn:nth-child(4).revealed { animation-delay: 0.21s, 0.45s; }
.archive-buttons-row .nav-sigil-btn:nth-child(5).revealed { animation-delay: 0.28s, 0.6s; }
.archive-buttons-row .nav-sigil-btn:nth-child(6).revealed { animation-delay: 0.35s, 0.55s; }
/* 悬浮时聚焦 */
.archive-buttons-row:hover .nav-sigil-btn:not(:hover) {
    opacity: 0.3;
    filter: blur(1px);
}/* 空白档案 */
/* 迷雾之间：原来这里是一个会呼吸的骰子占位（pupilPulse 动画）+ 说明文字，
   用户要求删掉；现在只留一段留白，让页面保持安静。 */
.mist-silence {
    height: 34vh;
}
/* 响应式 - 档案导航 */
@media (max-width: 900px) {
    .archive-buttons-row { gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
    .archive-buttons-row .nav-sigil-btn { width: 90px; height: 65px; }
    .archive-buttons-row .sigil-icon { font-size: 1rem; }
    .archive-buttons-row .sigil-text { font-size: 0.8rem; }
    .ecg-nav-section.expanded { padding: 1.5rem 0.3rem 1rem; max-height: 50vh; overflow-y: auto; }
}
@media (max-width: 600px) {
    .archive-buttons-row { gap: 0.3rem; }
    .archive-buttons-row .nav-sigil-btn { width: 72px; height: 58px; }
    .archive-buttons-row .sigil-icon { font-size: 0.85rem; }
    .archive-buttons-row .sigil-text { font-size: 0.7rem; }
    .sigil-code { display: none; }
    .ecg-nav-section.expanded { padding: 1rem 0.2rem 0.8rem; max-height: 45vh; overflow-y: auto; }
}
/* 模组标签页 - 响应式 */
@media (max-width: 768px) {
    .modal-tab { font-size: 0.75rem; padding: 0.5rem 0.7rem; }
    .modal-tab-panels { max-height: 45vh; }
}
@media (max-width: 480px) {
    .modal-tab { font-size: 0.7rem; padding: 0.4rem 0.5rem; }
    .modal-tab-panels { max-height: 40vh; }
}
/* ========================================
   详情弹窗标签页
   ======================================== */
.detail-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #2a2a2e;
}
.dm-item {
    font-size: 13px;
    color: #a8a095;
    white-space: nowrap;
}
.dm-san { color: #d44d5e; }
.detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #2a2a2e;
    margin-bottom: 20px;
    overflow-x: auto;
}
.dtab {
    padding: 10px 18px;
    background: none;
    border: none;
    color: #888880;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all .2s;
    white-space: nowrap;
}
.dtab:hover { color: #c8c8c0; }
.dtab.active {
    color: #c99e4a;
    border-bottom-color: #c99e4a;
}
.detail-panels { }
.dpanel { display: none; }
.dpanel.active { display: block; }
/* 自适应模态框宽度 */
#module-modal .modal-content {
    max-width: min(900px, 95vw);
    max-height: 85vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(201,158,74,0.12) transparent;
}
#module-modal .modal-content::-webkit-scrollbar{width:3px}
#module-modal .modal-content::-webkit-scrollbar-track{background:transparent}
#module-modal .modal-content::-webkit-scrollbar-thumb{background:rgba(201,158,74,0.15);border-radius:2px}
#module-modal .modal-content::-webkit-scrollbar-thumb:hover{background:rgba(201,158,74,0.25)}
@media (max-width: 600px) {
    .detail-meta-bar { gap: 8px; }
    .dm-item { font-size: 12px; }
    .dtab { padding: 8px 12px; font-size: 13px; }
}
/* 隐藏详情标签页滚动条 */
.detail-tabs::-webkit-scrollbar { height: 0; }
.detail-tabs { scrollbar-width: none; }
/* 模组卡片标题截断 */
.timeline-card .module-info h3 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.timeline-card .module-info p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 卡片封面图 */
.card-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.card-has-cover {
    position: relative;
}
.card-has-cover .module-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%);
    z-index: 1;
}
.card-has-cover .module-icon {
    display: none;
}
/* ========================================
   骰子投掷器 · 命运骰盅
   ======================================== */
.dice-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}
.dice-tray {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 32px;
}
.dice-btn {
    width: 110px;
    padding: 18px 12px 14px;
    background: rgba(20, 20, 26, 0.9);
    border: 1px solid #2a2a2e;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    font-family: inherit;
    color: #c8c8c0;
    position: relative;
    overflow: hidden;
}
.dice-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(201,158,74,0.06) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}
.dice-btn:hover {
    border-color: #c99e4a;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.5), 0 0 20px rgba(201,158,74,0.1);
}
.dice-btn:hover::before { opacity: 1; }
.dice-btn:active {
    transform: translateY(-1px);
    border-color: #d44d5e;
    box-shadow: 0 0 30px rgba(212,77,94,0.2);
}
.dice-icon {
    display: block;
    font-size: 28px;
    margin-bottom: 6px;
    transition: transform 0.2s;
}
.dice-btn:hover .dice-icon { transform: rotate(15deg) scale(1.1); }
.dice-label {
    display: block;
    font-size: 20px;
    font-weight: bold;
    font-family: var(--font-display);
    color: #c99e4a;
    letter-spacing: 2px;
}
.dice-desc {
    display: block;
    font-size: 11px;
    color: #666660;
    margin-top: 2px;
}
/* 骰子按钮按下动画 */
.dice-btn.rolling {
    animation: diceShake 0.4s ease;
    border-color: #d44d5e !important;
    box-shadow: 0 0 40px rgba(212,77,94,0.3) !important;
}
@keyframes diceShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-6px) rotate(-3deg); }
    20% { transform: translateX(6px) rotate(3deg); }
    30% { transform: translateX(-5px) rotate(-2deg); }
    40% { transform: translateX(5px) rotate(2deg); }
    50% { transform: translateX(-3px) rotate(-1deg); }
    60% { transform: translateX(3px) rotate(1deg); }
    70% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}
/* 结果区域 */
.dice-result-area {
    text-align: center;
    margin-bottom: 24px;
    padding: 28px 20px;
    background: rgba(20, 20, 26, 0.6);
    border: 1px solid #2a2a2e;
    border-radius: 12px;
}
.dice-result-label {
    font-size: 12px;
    color: #5a554e;
    letter-spacing: 3px;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.dice-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 80px;
    justify-content: center;
}
.result-num {
    font-size: 64px;
    font-weight: bold;
    font-family: var(--font-display);
    color: #c99e4a;
    text-shadow: 0 0 30px rgba(201,158,74,0.4);
    line-height: 1;
}
.result-num.pop {
    animation: numPop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes numPop {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}
.result-num.crit {
    color: #d44d5e;
    text-shadow: 0 0 40px rgba(212,77,94,0.6), 0 0 80px rgba(212,77,94,0.3);
    animation: critPulse 0.8s ease-in-out 3;
}
@keyframes critPulse {
    0%, 100% { text-shadow: 0 0 40px rgba(212,77,94,0.6), 0 0 80px rgba(212,77,94,0.3); }
    50% { text-shadow: 0 0 60px rgba(212,77,94,0.9), 0 0 120px rgba(212,77,94,0.5); }
}
.result-num.fail {
    color: #5a554e;
    text-shadow: 0 0 10px rgba(90,85,78,0.3);
}
.result-type {
    font-size: 13px;
    color: #888880;
    letter-spacing: 1px;
}
/* 历史记录 */
.dice-history {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}
.dice-history::-webkit-scrollbar { width: 3px; }
.dice-history::-webkit-scrollbar-thumb { background: #2a2a2e; border-radius: 2px; }
.h-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.015);
    border-radius: 6px;
    border: 1px solid transparent;
    animation: hSlideIn 0.3s ease;
    font-size: 13px;
}
@keyframes hSlideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.h-row.h-latest { border-color: rgba(201,158,74,0.15); background: rgba(201,158,74,0.04); }
.h-row.h-crit { border-color: rgba(212,77,94,0.2); background: rgba(212,77,94,0.05); }
.h-row.h-crit .h-val { color: #d44d5e; font-weight: bold; }
.h-row.h-fumble { border-color: rgba(90,85,78,0.2); background: rgba(90,85,78,0.04); }
.h-row.h-fumble .h-val { color: #5a554e; font-weight: bold; }
.h-die {
    font-family: var(--font-display);
    color: #c99e4a;
    font-size: 12px;
    min-width: 38px;
    letter-spacing: 1px;
}
.h-val {
    font-size: 15px;
    font-weight: bold;
    color: #a8a095;
    min-width: 36px;
    text-align: right;
}
.h-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.04);
    border-radius: 2px;
    overflow: hidden;
}
.h-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: rgba(201,158,74,0.3);
    transition: width 0.4s ease;
}
.h-crit .h-fill { background: rgba(212,77,94,0.5); }
.h-fumble .h-fill { background: rgba(90,85,78,0.4); }
/* Crit Toast */
.dice-toast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 40px;
    font-weight: bold;
    font-family: var(--font-display);
    pointer-events: none;
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
    opacity: 0;
    text-shadow: 0 0 40px currentColor;
}
.dice-toast.show { transform: translate(-50%, -50%) scale(1); opacity: 1; animation: toastBounce 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.dice-toast.crit { color: #d44d5e; }
.dice-toast.fumble { color: #5a554e; }
@keyframes toastBounce {
    0% { transform: translate(-50%, -50%) scale(0); }
    60% { transform: translate(-50%, -50%) scale(1.15); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
.dice-result-area { position: relative; }
/* 快速按钮 */
.quick-rolls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
}
.qr-btn {
    padding: 10px 24px;
    background: rgba(201,158,74,0.1);
    border: 1px solid rgba(201,158,74,0.3);
    color: #c99e4a;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.2s;
}
.qr-btn:hover {
    background: rgba(201,158,74,0.2);
    border-color: #c99e4a;
}
.qr-clear {
    background: rgba(255,255,255,0.03);
    border-color: #2a2a2e;
    color: #888880;
}
.qr-clear:hover { border-color: #5a554e; color: #a8a095; }
/* KP面板 */
.kp-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px 40px;
}
.kp-panel {
    background: rgba(20, 20, 26, 0.6);
    border: 1px solid #2a2a2e;
    border-radius: 10px;
    padding: 20px;
}
.kp-title {
    color: #c99e4a;
    font-size: 16px;
    font-family: var(--font-display);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a2a2e;
    letter-spacing: 1px;
}
.kp-subtitle {
    color: #a8a095;
    font-size: 14px;
    margin: 14px 0 8px;
    letter-spacing: 1px;
}
.kp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.kp-table th {
    color: #5a554e;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid #1a1a1e;
    font-weight: normal;
    letter-spacing: 1px;
}
.kp-table td {
    padding: 6px 8px;
    color: #888880;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.kp-table tr:hover td { color: #a8a095; }
@media (max-width: 800px) {
    .kp-panels { grid-template-columns: 1fr; }
    .dice-btn { width: 90px; padding: 14px 8px 10px; }
    .dice-label { font-size: 16px; }
    .result-num { font-size: 48px; }
}
/* 骰子SVG图标 */
.dice-svg { width: 40px; height: 40px; display: block; margin: 0 auto; }
.dice-btn:hover .dice-svg { transform: rotate(12deg) scale(1.1); transition: transform 0.2s; }
/* 随机职业按钮 */
.random-job-btn {
    display: inline-block;
    margin-left: 12px;
    padding: 4px 14px;
    background: rgba(201,158,74,0.1);
    border: 1px solid rgba(201,158,74,0.3);
    color: #c99e4a;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    vertical-align: middle;
    transition: all 0.2s;
}
.random-job-btn:hover {
    background: rgba(201,158,74,0.2);
    border-color: #c99e4a;
}
.random-job-btn:active {
    background: rgba(201,158,74,0.3);
    transform: scale(0.97);
}
/* ========================================
   COC 7E 车卡系统
   ======================================== */
.cc-container { max-width: 860px; margin: 0 auto 40px; padding: 0 16px; }
/* 步骤指示器 */
.cc-steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; padding: 14px 0; }
.cc-step { font-size: 14px; color: #5a554e; padding: 6px 16px; border-radius: 20px; background: rgba(255,255,255,0.02); border: 1px solid #2a2a2e; font-family: var(--font-display); letter-spacing: 1px; transition: all 0.3s; cursor: pointer; user-select: none; }
.cc-step:hover { border-color: #5a554e; color: #a8a095; background: rgba(255,255,255,0.04); }
.cc-step.active { color: #c99e4a; border-color: #c99e4a; background: rgba(201,158,74,0.08); }
.cc-step.active:hover { border-color: #e0b860; box-shadow: 0 0 10px rgba(201,158,74,0.12); }
.cc-step.done { color: #6a9a4e; border-color: #4a7a3a; background: rgba(106,154,78,0.04); }
.cc-step.done:hover { color: #8ac06e; border-color: #6a9a4e; background: rgba(106,154,78,0.08); box-shadow: 0 0 8px rgba(106,154,78,0.1); }
.cc-step-arrow { color: #3a3a3e; font-size: 18px; }
.cc-panel { display: none; }
.cc-panel.active { display: block; animation: ccFadeIn 0.4s ease; }
@keyframes ccFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* ====== 基本信息区 ====== */
.cc-info-section {
    margin-bottom: 1.5rem;
    padding: 14px 16px;
    background: rgba(255,255,255,0.015);
    border: 1px solid #252529;
    border-radius: 10px;
}
.cc-info-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    color: #c0b8a8;
}
.cc-info-title span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cc-btn-sm {
    font-size: 11px;
    padding: 5px 12px;
    background: rgba(201,158,74,0.12);
    border: 1px solid rgba(201,158,74,0.2);
    border-radius: 5px;
    color: #c99e4a;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
/* 切换车卡步骤：新面板上滑淡入（不再靠滚动页面把视线带过去，v2.14.41） */
@keyframes ccPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cc-panel.cc-panel-in { animation: ccPanelIn .32s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .cc-panel.cc-panel-in { animation: none !important; } }

.cc-btn-sm:hover { background: rgba(201,158,74,0.2); border-color: #c99e4a; }

/* ====== 自绘悬停提示（取代浏览器原生 title 浮窗，v2.14.44）======
   原生浮窗是系统样式（浅黄底、字号小），这里换成暗色金调卡片：
   字 13px / 行高 1.7，支持 title 里的换行（pre-line），始终浮在最上层。 */
#ccTip {
    position: fixed; left: 0; top: 0; z-index: 40000;
    max-width: 340px; padding: 9px 13px;
    background: linear-gradient(180deg, rgba(28,28,34,0.985), rgba(18,18,22,0.985));
    border: 1px solid rgba(201,158,74,0.4); border-radius: 9px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.35) inset;
    color: #d4cbbb; font-family: var(--font-body); font-size: 13px; line-height: 1.7;
    letter-spacing: .02em; text-align: left;
    white-space: pre-line;                     /* 保留 title 里的换行 */
    pointer-events: none; opacity: 0; transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease;
}
#ccTip.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { #ccTip { transition: none !important; } }
/* 性别这类二选一：按钮选择，不用下拉（v2.14.39） */
.cc-seg { display: inline-flex; gap: 6px; }
.cc-seg-btn {
    min-width: 46px; padding: 7px 14px;
    background: #1a1a1e; border: 1px solid #2a2a2e; border-radius: 6px;
    color: #9a9080; font-family: inherit; font-size: 14px; cursor: pointer;
    transition: color .18s, border-color .18s, background .18s;
}
.cc-seg-btn:hover { color: #c8c0b0; border-color: #3d3d45; }
.cc-seg-btn.is-on {
    color: #e8cf9a; border-color: rgba(201,158,74,0.55); background: rgba(201,158,74,0.12);
}
.cc-seg-btn:focus-visible { outline: 1px solid rgba(201,158,74,0.6); outline-offset: 2px; }
.cc-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
}
.cc-info-field {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cc-info-field label { font-size: 13px; color: #a8a095; flex-shrink: 0; min-width: 40px; text-align: right; }
.cc-info-field input,.cc-info-field select {
    flex: 1;
    padding: 6px 10px;
    font-size: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid #2a2a2e;
    border-radius: 5px;
    color: #c8c0b0;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    min-width: 0;
}
.cc-info-field input:focus,
.cc-info-field select:focus { border-color: #5a554e; }
.cc-info-field input::placeholder { color: #5a554e; font-size: 13px; }
.cc-info-field select option { background: #1a1a1e; color: #c8c0b0; }
.cc-hint { color: #888880; font-size: 13px; text-align: center; margin-bottom: 20px; line-height: 1.6; }
/* 属性网格 */
.attr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.attr-card { background: rgba(20,20,26,0.7); border: 1px solid #2a2a2e; border-radius: 10px; padding: 16px 10px 12px; text-align: center; transition: all 0.3s; }
.attr-card.a-rolled { border-color: #3a3a3e; }
.attr-card.a-pop { animation: attrPop 0.4s cubic-bezier(0.4,0,0.2,1); }
@keyframes attrPop { 0%{transform:scale(0.9);opacity:0.5} 50%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
.a-name { font-size: 14px; color: #a8a095; font-family: var(--font-display); letter-spacing: 1px; }
.a-val { font-size: 36px; font-weight: bold; color: #c99e4a; line-height: 1.2; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.a-val:empty::after { content: "--"; color: #3a3a3e; }
.a-label { font-size: 11px; color: #5a554e; margin: 2px 0 8px; }
.a-roll-btn { padding: 4px 16px; border: 1px solid #3a3a3e; background: rgba(201,158,74,0.08); color: #c99e4a; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 12px; transition: all 0.2s; }
.a-roll-btn:hover { background: rgba(201,158,74,0.18); border-color: #c99e4a; }
/* 衍生属性 */
/* 派生值：12 栏网格。第一行三格（生命/理智/魔法，各占 4 栏），第二行四格（幸运/移动/体格/伤害加值，各占 3 栏）。
   这样两行都是整行铺满，不会出现「最后一行孤零零一张卡」。 */
.derived-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.der-card { grid-column: span 3; background: rgba(20,20,26,0.5); border: 1px solid #2a2a2e; border-radius: 8px; padding: 12px; text-align: center; position: relative; }
.der-card.der-wide { grid-column: span 4; }
.der-card span { display: block; font-size: 11px; color: #5a554e; margin-bottom: 4px; }
.der-card strong { font-size: 22px; color: #d4a855; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.d-roll { position: absolute; bottom: 6px; right: 8px; font-size: 10px; padding: 2px 8px; }
/* 按钮 */
.cc-btn { padding: 10px 28px; border: 1px solid #3a3a3e; background: rgba(255,255,255,0.03); color: #a8a095; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 14px; transition: all 0.2s; display: inline-block; margin-top: 8px; }
.cc-btn:hover { border-color: #5a554e; color: #c8c8c0; }
.cc-btn-primary { background: rgba(201,158,74,0.12); border-color: rgba(201,158,74,0.3); color: #c99e4a; }
.cc-btn-primary:hover { background: rgba(201,158,74,0.22); border-color: #c99e4a; }
/* --- 自定义职业技能选择器 --- */
.cc-custom-header { font-size: 14px; color: #8a7a60; margin-bottom: 10px; font-family: var(--font-display); }
.cc-custom-count { color: #c99e4a; font-size: 18px; }
.cc-custom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 10px; }
.cc-custom-chip { padding: 5px 6px; text-align: center; background: rgba(20,20,26,0.6); border: 1px solid #24242a; border-radius: 4px; color: #8a8070; font-size: 12px; cursor: pointer; transition: all 0.15s; user-select: none; }
.cc-custom-chip:hover { border-color: #5a5a5e; color: #c0b8a8; background: rgba(40,40,50,0.5); }
.cc-custom-chip-on { border-color: #c99e4a; background: rgba(201,158,74,0.1); color: #c99e4a; }
/* --- 自定义技能 --- */
.cc-custom-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; margin: 2px 0; background: rgba(20,20,26,0.3); border: 1px solid rgba(201,158,74,0.06); border-radius: 4px; font-size: 14px; flex-wrap: wrap; }
.cc-custom-name { color: #a8a090; min-width: 90px; font-size: 13px; }
.cc-custom-tag { font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: bold; }
.cc-custom-tag-occ { background: rgba(201,158,74,0.15); color: #c99e4a; border: 1px solid rgba(201,158,74,0.3); }
.cc-custom-tag-int { background: rgba(140,130,110,0.12); color: #a09070; border: 1px solid rgba(140,130,110,0.25); }
.cc-custom-del { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(180,60,70,0.2); background: transparent; color: #7a5050; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; padding: 0; line-height: 1; }
.cc-custom-del:hover { border-color: #d44d5e; color: #d44d5e; background: rgba(180,60,70,0.1); }
.cc-custom-add-row { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.cc-custom-input { width: 130px; padding: 5px 8px; background: #0e0e14; border: 1px solid #2a2a2e; border-radius: 4px; color: #b0a090; font-size: 13px; }
.cc-custom-input:focus { border-color: #c99e4a; outline: none; }
.cc-custom-select { padding: 5px 6px; background: #0e0e14; border: 1px solid #2a2a2e; border-radius: 4px; color: #b0a090; font-size: 12px; }
.cc-custom-select:focus { border-color: #c99e4a; outline: none; }
.cc-custom-add-btn { padding: 5px 12px; background: rgba(201,158,74,0.1); border: 1px solid rgba(201,158,74,0.25); border-radius: 4px; color: #c99e4a; font-size: 12px; cursor: pointer; transition: all 0.2s; }
.cc-custom-add-btn:hover { background: rgba(201,158,74,0.2); }
/* 帷幕中自定义技能特殊颜色 */
.kpv2-check-skill-custom .kpv2-check-skill-row-name { color: #6ab8a8 !important; }
.kpv2-check-skill-custom .kpv2-check-skill-row-val { color: #5a9a8a !important; }
.kpv2-check-skill-custom:hover { background: rgba(106,184,168,0.08) !important; }
.cc-custom-chip-on:hover { border-color: #e0b860; background: rgba(201,158,74,0.18); }
.cc-custom-alloc { margin-top: 8px; }
/* --- 随机属性按钮强化 --- */
.cc-btn-roll { background: rgba(201,158,74,0.15); border-color: rgba(201,158,74,0.4); color: #c99e4a; font-size: 16px; padding: 14px 44px; position: relative; overflow: hidden; }
.cc-btn-roll::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(201,158,74,0.08), transparent); animation: kpv2-scan 3s linear infinite; }
.cc-btn-roll:hover { background: rgba(201,158,74,0.25); border-color: #c99e4a; color: #e0c870; box-shadow: 0 0 20px rgba(201,158,74,0.15); transform: translateY(-1px); }
/* 技能面板：第二步顶部的「点数 / 职业 / 规则」设置区（v2.14.34 重排）
   三行共用一条左侧标签栏（点数 / 职业 / 规则），右栏内容左边缘对齐成一条竖线，
   行间用细线分隔；点数用大字金色数字，两个规则开关长得完全一样（不再一个金一个灰）。 */
.cc-setup { margin-bottom: 18px; padding: 2px 18px; background: rgba(20,20,26,0.5); border: 1px solid #2a2a2e; border-radius: 10px; }
.cc-setup-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 4px 16px; padding: 13px 0; }
.cc-setup-row + .cc-setup-row { border-top: 1px solid #232327; }
.cc-setup-key { font-size: 11.5px; letter-spacing: .16em; color: #6a6040; }
.cc-setup-body { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; min-width: 0; }
/* 点数：标签小字 + 金色大字数字 + 公式注脚 */
.cc-stat { display: inline-flex; align-items: baseline; gap: 8px; }
.cc-stat + .cc-stat { padding-left: 18px; border-left: 1px solid #26262b; }
.cc-stat em { font-style: normal; font-size: 12.5px; color: #8a7a60; letter-spacing: .04em; }
.cc-stat strong { font-family: var(--font-num); font-size: 22px; line-height: 1; color: #c99e4a; font-variant-numeric: tabular-nums; }
.cc-setup select { padding: 7px 12px; background: #1a1a1e; border: 1px solid #2a2a2e; color: #c8c8c0; border-radius: 6px; font-family: inherit; font-size: 14px; max-width: 100%; }
.cc-setup select:focus { outline: none; border-color: #c99e4a; }
/* 规则开关：两个同款，勾选由自绘复选框（金色实心 + 深色 ✓）与文字提亮表达 */
.cc-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cc-switch + .cc-switch { padding-left: 18px; border-left: 1px solid #26262b; }
.cc-switch input[type="checkbox"] { width: 15px; height: 15px; }
.cc-switch-text { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; color: #9a9184; transition: color .2s; }
.cc-switch-text b { font-family: var(--font-display); font-size: 16px; color: #b9a06a; transition: color .2s; }
.cc-switch-text em { font-style: normal; font-size: 11px; color: #5f594d; }
.cc-switch:hover .cc-switch-text { color: #b8ae9c; }
.cc-switch input:checked ~ .cc-switch-text { color: #d8cdb4; }
.cc-switch input:checked ~ .cc-switch-text b { color: #e8cf9a; }
/* --- 职业下拉视觉引导 --- */
.cc-occ-glow { border-color: #c99e4a !important; box-shadow: 0 0 14px rgba(201,158,74,0.25), 0 0 28px rgba(201,158,74,0.08); animation: cc-occ-pulse 2s ease-in-out infinite; }
@keyframes cc-occ-pulse { 0%,100% { box-shadow: 0 0 14px rgba(201,158,74,0.25), 0 0 28px rgba(201,158,74,0.08); } 50% { box-shadow: 0 0 22px rgba(201,158,74,0.4), 0 0 40px rgba(201,158,74,0.15); } }
.cc-credit { font-size: 12px; color: #c99e4a; }
.cc-placeholder { color: #5a554e; text-align: center; padding: 20px; }
.cc-skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.cc-skill-col { background: rgba(20,20,26,0.4); border: 1px solid #2a2a2e; border-radius: 8px; padding: 12px; }
.cc-skill-col h3 { color: #c99e4a; font-size: 13px; font-family: var(--font-display); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #2a2a2e; letter-spacing: 1px; }
.sk-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; margin-bottom: 2px; font-size: 13px; }
.sk-row:hover { background: rgba(255,255,255,0.02); }
.sk-row.sk-used { background: rgba(201,158,74,0.04); }
.sk-name { flex: 1; color: #a8a095; min-width: 100px; font-size: 13px; }
.sk-base { color: #7a756e; font-size: 12px; min-width: 24px; text-align: center; }
.sk-alloc { color: #c99e4a; min-width: 28px; text-align: center; font-size: 12px; }
.sk-total { color: #e0e0d8; font-weight: bold; min-width: 32px; text-align: right; font-size: 13px; }
.sk-btn { width: 22px; height: 22px; border: 1px solid #3a3a3e; background: rgba(255,255,255,0.02); color: #888880; border-radius: 3px; cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.sk-btn:hover:not(:disabled) { border-color: #c99e4a; color: #c99e4a; }
.sk-btn:disabled { opacity: 0.2; cursor: default; }
/* 导出卡片 */
.cc-export-card { background: rgba(20,20,26,0.6); border: 1px solid #2a2a2e; border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.cc-export-card h2 { color: #c99e4a; font-family: var(--font-display); font-size: 20px; color: #d4a855; text-align: center; margin-bottom: 16px; letter-spacing: 3px; }
.cc-export-name { text-align: center; margin-bottom: 16px; }
.cc-export-name label { color: #c0b8a8; font-size: 15px; }
.cc-export-name input { padding: 6px 12px; background: #1a1a1e; border: 1px solid #2a2a2e; color: #e0e0d8; border-radius: 4px; font-family: inherit; font-size: 16px; width: 200px; text-align: center; }
.cc-export-name input:focus { outline: none; border-color: #c99e4a; }
.cc-tbl { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.cc-tbl td { text-align: center; padding: 6px; border: 1px solid #2a2a2e; }
.cc-tbl small { display: block; font-size: 12px; color: #888880; }
.cc-tbl strong { font-size: 20px; color: #c99e4a; font-family: var(--font-display); }
.cc-der-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 16px; }
.cc-der-row span { font-size: 14px; color: #a8a095; background: rgba(255,255,255,0.02); padding: 4px 10px; border-radius: 4px; border: 1px solid #2a2a2e; }
.cc-der-row strong { color: #d4a855; }
.cc-sk-export { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; }
.cc-sk-export span { font-size: 13px; color: #a8a095; }
.cc-sk-export strong { color: #c99e4a; }
.cc-sk-ch { display: inline-block; padding: 2px 8px; background: rgba(255,255,255,0.04); border: 1px solid #252529; border-radius: 3px; margin: 2px 4px 2px 0; font-size: 13px; color: #a8a095; }
.cc-export-btns { display: flex; gap: 10px; justify-content: center; }
/* 响应式 */
@media (max-width: 700px) {
    .attr-grid { grid-template-columns: repeat(2, 1fr); }
    /* 窄屏：第一行三格仍是三连（各占 4 栏），下面四格两两一行（各占 6 栏） */
    .der-card { grid-column: span 6; }
    .der-card.der-wide { grid-column: span 4; }
    .cc-skill-grid { grid-template-columns: 1fr; }
    /* 窄屏：设置区的标签栏挪到内容上方 */
    .cc-setup-row { grid-template-columns: 1fr; gap: 6px; }
    .cc-setup-key { letter-spacing: .1em; }
    .cc-stat strong { font-size: 19px; }
}
.sk-row.sk-used { background: rgba(201,158,74,0.06); border-left: 2px solid rgba(201,158,74,0.3); }
.sk-row.sk-other { background: rgba(90,130,90,0.04); border-left: 2px solid rgba(90,130,90,0.2); }
/* 带提示的元素给个 help 光标；title 会在启动时迁成 data-tip，所以两个都要匹配（v2.14.46） */
.sk-row[title], .sk-row[data-tip] { cursor: help; }
.sk-total.sk-used { color: #c99e4a; }
.sk-total.sk-other { color: #8ab88a; }
.sk-int-tag { font-size: 10px; background: rgba(106,184,168,0.12); color: #6ab8a8; padding: 1px 5px; border-radius: 3px; margin-left: 5px; white-space: nowrap; }
.attr-card[title], .attr-card[data-tip] { cursor: help; }
/* 可读性提升 */
.cc-hint { font-size: 15px !important; color: #b0b0a8 !important; line-height: 1.7; }
.a-name { font-size: 15px !important; }
.a-val { font-size: 44px !important; }
.a-label { font-size: 12px !important; color: #8a7a5a !important; }
.der-card span { font-size: 13px !important; color: #a0a098 !important; }
.der-card strong { font-size: 26px !important; }
/* 信用评级区间提示（第二步头部 + 信用评级行）：超出职业区间给软提示 */
.cc-cr-range { font-size: 12.5px; color: #8a7a60; display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
/* 职业点公式小字（如「（教育×2 + （敏捷×2 或 力量×2））」） */
.cc-pts-formula { font-size: 11.5px; color: #6a6040; margin-left: 6px; font-weight: normal; white-space: nowrap; }
.cc-cr-range b { color: #c99e4a; font-size: 14px; }
.cc-cr-range em { font-style: normal; color: #6a6040; }
.cc-cr-range.is-out b { color: #e0707f; }
.cc-cr-warn { color: #e0707f; background: rgba(212,77,94,0.12); border: 1px solid rgba(212,77,94,0.35); border-radius: 8px; padding: 1px 8px; font-size: 11.5px; white-space: nowrap; }
/* 还没买信用评级：温和提示（别用红字，0 分只是「还没分配」） */
.cc-cr-todo { color: #a89878; background: rgba(255,255,255,0.04); border: 1px solid #33333a; border-radius: 8px; padding: 1px 8px; font-size: 11.5px; white-space: nowrap; }
.sk-cr { font-size: 11px; color: #7a7050; border: 1px solid #3a3528; border-radius: 8px; padding: 0 6px; margin-left: 6px; white-space: nowrap; }
.sk-cr-out { color: #e0707f; border-color: rgba(212,77,94,0.45); background: rgba(212,77,94,0.1); }
/* ====== 深色底上的复选框：自绘，不用原生控件 ======
   原生 checkbox 在暗底上是**一块白框**，非常刺眼（物品格尤其明显）。
   统一规则：未选 = 暗底 + 细边；悬停 = 金色边；已选 = 金色实心 + 深色 ✓。 */
.eq-tile input[type="checkbox"],
.cc-switch input[type="checkbox"],
.cc-buy input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    border: 1px solid #3a3a42; border-radius: 5px;
    background-color: rgba(255,255,255,0.03);
    background-position: center; background-repeat: no-repeat; background-size: 11px 11px;
    cursor: pointer; flex: none; margin: 0; padding: 0;
    transition: background-color .18s, border-color .18s, box-shadow .18s;
}
.eq-tile input[type="checkbox"]:hover,
.cc-switch input[type="checkbox"]:hover,
.cc-buy input[type="checkbox"]:hover { border-color: rgba(201,158,74,0.6); background-color: rgba(201,158,74,0.08); }
.eq-tile input[type="checkbox"]:checked,
.cc-switch input[type="checkbox"]:checked,
.cc-buy input[type="checkbox"]:checked {
    border-color: #c99e4a;
    background-color: #c99e4a;
    box-shadow: 0 0 8px rgba(201,158,74,0.28);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.4 2.4L9.8 3.6' fill='none' stroke='%2316161a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.eq-tile input[type="checkbox"]:disabled,
.cc-switch input[type="checkbox"]:disabled,
.cc-buy input[type="checkbox"]:disabled { opacity: 0.32; cursor: not-allowed; box-shadow: none; }
.eq-tile input[type="checkbox"]:focus-visible,
.cc-switch input[type="checkbox"]:focus-visible,
.cc-buy input[type="checkbox"]:focus-visible { outline: 1px solid rgba(201,158,74,0.6); outline-offset: 2px; }

/* 点数购买法（官方 Option 4）：打钩才启用，勾上才铺出八个输入框（v2.14.30） */
.cc-buy { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 6px; padding: 10px 14px; border: 1px solid #2a2a2e; border-radius: 10px; background: rgba(255,255,255,0.012); cursor: pointer; }
.cc-buy:hover { border-color: #3a3528; }
.cc-buy.is-on { border-color: rgba(201,158,74,0.45); background: rgba(201,158,74,0.05); }
.cc-buy input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; }
.cc-buy-title { font-size: 13px; color: #a89878; line-height: 1.5; }
.cc-buy.is-on .cc-buy-title { color: #c9b98a; }
.cc-buy-title em { display: block; font-style: normal; font-size: 11.5px; color: #6f6858; margin-top: 2px; }
.cc-buy-body { margin: 0 0 22px; padding: 12px 14px; border: 1px solid #2a2a2e; border-radius: 10px; background: rgba(255,255,255,0.012); }
.cc-buy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
.cc-buy-cell { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #8a7a60; }
.cc-buy-cell input { width: 100%; min-width: 0; padding: 6px 8px; background: #1a1a1e; border: 1px solid #2a2a2e; border-radius: 6px; color: #d4c8b0; font-family: inherit; font-size: 13px; }
.cc-buy-cell input:focus { outline: none; border-color: #c99e4a; }
.cc-buy-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cc-buy-foot .cc-btn { margin-top: 0; }
.cc-buy-left { font-size: 12.5px; color: #b9a06a; margin-right: auto; }
.cc-buy-left.is-ok { color: #8ab88a; }
.cc-buy-left.is-over { color: #e0707f; }
@media (max-width: 700px) { .cc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 官方技能标记 Ω 现代纪元限定 / T 冷门技能 */
.sk-mark { display: inline-block; font-size: 10px; line-height: 1.5; padding: 0 5px; margin-left: 4px; border-radius: 7px; vertical-align: middle; }
.sk-mark-modern { color: #7fb0c8; background: rgba(90,150,180,0.14); border: 1px solid rgba(90,150,180,0.35); }
.sk-mark-rare { color: #b09a6a; background: rgba(201,158,74,0.12); border: 1px solid rgba(201,158,74,0.3); }
/* 帷幕侧的小按钮（属性 / 技能编辑、幸运） */
.kpv2-skill-mini { background: rgba(255,255,255,0.03); border: 1px solid #33333a; color: #8a8a80; border-radius: 5px; font-size: 11px; padding: 1px 6px; margin-left: 4px; cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s, opacity .15s; }
.kpv2-skill-mini:hover { border-color: #c99e4a; color: #c99e4a; }
.kpv2-attr-tools { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.kpv2-check-luck-btn { display: block; width: calc(100% - 24px); margin: 10px 12px 0; padding: 8px 10px; border-radius: 8px; font-family: inherit; font-size: 13px; cursor: pointer; }
.kpv2-check-luck-btn { background: rgba(120,90,180,0.16); border: 1px solid rgba(150,120,200,0.45); color: #c9b6e8; }
.kpv2-check-luck-btn em { font-style: normal; color: #8a7aa0; font-size: 11.5px; }
.kpv2-check-luck-btn:hover { background: rgba(120,90,180,0.26); }
/* 年龄调整说明（车卡第一步）：告诉玩家年龄改了什么，别让人以为骰值出错 */
.cc-age-note {
    margin: -10px 0 18px;
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #b9a06a;
    background: rgba(201,158,74,0.07);
    border-left: 2px solid rgba(201,158,74,0.4);
    border-radius: 0 4px 4px 0;
}
.cc-age-note:empty { display: none; }
/* 派生值卡片：数字下面挂一行小字（如 SAN 上限），别把卡片撑高 */
.der-card .der-max { display: block; font-size: 11px; font-style: normal; color: #8a7a60; margin-top: 2px; letter-spacing: 0.5px; }
.der-card span { line-height: 1.4; }
.cc-skill-col h3 { font-size: 15px !important; }
.sk-name { font-size: 13px !important; color: #c0c0b8 !important; }
.sk-base { font-size: 12px !important; color: #7a7a70 !important; }
.sk-alloc { font-size: 14px !important; }
.sk-total { font-size: 15px !important; color: #d0d0c8 !important; }
.cc-credit { font-size: 14px !important; }
.cc-btn { font-size: 15px; padding: 12px 34px; }
.cc-step { font-size: 15px !important; cursor: pointer; }
.cc-step-arrow { font-size: 20px; }
.sk-row.sk-used { background: rgba(80,160,80,0.08); border-left: 2px solid rgba(80,160,80,0.4); }
.sk-row.sk-other { background: rgba(201,158,74,0.04); border-left: 2px solid rgba(201,158,74,0.15); }
.sk-total.sk-used { color: #6ac46a; }
.sk-total.sk-other { color: #d4a855; }
.sk-tag { font-size: 10px; background: rgba(200,60,60,0.2); color: #e05050; padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle; }
.sk-tag-pro { background: rgba(201,158,74,0.15); color: #c99e4a; }
.sk-alloc { color: #6ac46a; }
.cc-eq-area { margin-bottom: 24px; }
.cc-eq-area h3, .cc-bg-area h3 { color: #c99e4a; font-size: 15px; font-family: var(--font-display); margin: 0 0 8px; letter-spacing: 1px; }
.cc-occ-items { margin-bottom: 8px; }
/* 物品区容器：以前用 flex 让多个分类块横向并排；现在内容拆成「常用 / 自定义 / 全部」三块竖排，
   必须回到 block——否则每块都被当成 flex 项挤成一条窄列，格子里只剩单列文字（v2.14.21 修） */
.cc-common-items { display: block; }
.cc-eq-block, .cc-eq-more, .cc-eq-all, .cc-common-items > .eq-cat { width: 100%; }
/* ====== 物品选择区 ====== */
.eq-cat {
    margin-bottom: 0.8rem;
    border: 1px solid #1e1e22;
    border-radius: 10px;
    background: rgba(255,255,255,0.01);
}
.eq-cat[open] { border-color: #2a2a2e; }
.eq-cat-summary {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: #a8a095;
    padding: 9px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.eq-cat-summary:hover { color: #c0b8a8; background: rgba(255,255,255,0.02); }
.eq-cat-summary::-webkit-details-marker { display: none; }
.eq-cat-summary::before {
    content: '▸';
    display: inline-block;
    font-size: 10px;
    transition: transform 0.2s;
    color: #5a554e;
    width: 12px;
}
.eq-cat[open] > .eq-cat-summary::before { transform: rotate(90deg); }
.eq-cat-special { color: #d44d5e; }
.eq-cat-custom { border-color: rgba(201,158,74,0.25); border-style: dashed; }
/* 枪械这一类：默认折叠 + 整体红字提醒「本背景不推荐携带」（v2.14.9） */
.eq-cat-warn { border-color: rgba(212,77,94,0.28); }
.eq-cat-summary-warn { color: #d44d5e; }
.eq-cat-summary-warn:hover { color: #e07080; background: rgba(212,77,94,0.06); }
.eq-cat-summary small { font-size: 11px; color: #6a6040; letter-spacing: 0; margin-left: auto; }
.eq-cat-note {
    margin: 0 14px 10px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.7;
    color: #c08a92;
    background: rgba(212,77,94,0.07);
    border-left: 2px solid rgba(212,77,94,0.4);
    border-radius: 0 4px 4px 0;
}
.eq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 8px;
    padding: 0 14px 12px;
}
/* === Tile Card === */
.eq-tile {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255,255,255,0.015);
    border: 1px solid #252529;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    position: relative;
}
.eq-tile:hover {
    border-color: #4a4540;
    background: rgba(255,255,255,0.03);
    z-index: 2;
}
.eq-tile.eq-checked {
    border-color: rgba(106,196,106,0.35);
    background: rgba(106,196,106,0.05);
}
.eq-tile.eq-special { border-color: rgba(212,77,94,0.18); }
.eq-tile.eq-special.eq-checked { border-color: rgba(212,77,94,0.4); background: rgba(212,77,94,0.06); }
.eq-tile.eq-custom { border-style: dashed; border-color: rgba(201,158,74,0.3); }
/* 尺寸与摆放只写在这里；配色/勾选样式见上面的「深色底复选框」统一规则 */
.eq-tile input[type="checkbox"] {
    width: 18px; height: 18px;
    flex-shrink: 0;
    order: 1;
    margin-left: auto;
}
.eq-tile input[type="checkbox"]:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.eq-tile-top {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 0;
    flex: 1;
    min-width: 0;
}
.eq-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    line-height: 1;
}
.eq-title {
    font-size: 15px;
    font-weight: 600;
    color: #c8c0b0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eq-special .eq-title { color: #d0a0a0; }
.eq-checked .eq-title { color: #b8d0b8; }
.eq-special.eq-checked .eq-title { color: #d8b0b0; }
/* ====== Backpack Selector ====== */
.eq-container-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1rem;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid #252529;
    border-radius: 8px;
    flex-wrap: wrap;
}
.eq-ct-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid #2a2a2e;
    border-radius: 5px;
    color: #888;
    cursor: pointer;
    font-size: 12.5px;
    font-family: inherit;
    transition: all 0.15s;
}
.eq-ct-btn:hover { border-color: #5a554e; color: #b0b0b0; }
.eq-ct-btn.eq-ct-active { border-color: #c99e4a; color: #c99e4a; background: rgba(201,158,74,0.1); }
.eq-ct-icon { font-size: 16px; }
.eq-ct-btn small { font-size: 10px; opacity: 0.6; margin-left: 2px; }
.eq-count {
    margin-left: auto;
    font-size: 12.5px;
    color: #888;
}
.eq-count strong { color: #c99e4a; font-size: 15px; }
/* === Tooltip === */
.eq-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    max-width: 320px;
    background: #1a1a20;
    border: 1px solid #4a3035;
    border-radius: 8px;
    padding: 12px 14px;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,77,94,0.1);
    pointer-events: none;
}
.eq-tooltip strong {
    display: block;
    font-size: 13px;
    color: #d0c0b0;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}
.eq-tooltip p {
    font-size: 12px;
    color: #989088;
    line-height: 1.6;
    margin: 0;
}
.eq-tooltip-mech {
    display: block;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #3a3035;
    font-size: 11.5px;
    color: #c99e4a;
}
.eq-tooltip-spec { display: block; margin-top: 4px; font-size: 11.5px; color: #9aa0a8; }
.eq-tooltip-warn { display: block; margin-top: 6px; font-size: 11.5px; color: #d44d5e; }
/* 枪械格子：图标压灰一点，右上角挂「不推荐」标记 */
.eq-firearm .eq-icon { filter: grayscale(0.35); }
/* 物品区：常用一小撮铺开，其余收进「全部物品」里（v2.14.10） */
.cc-eq-block { margin-bottom: 14px; }
.cc-eq-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cc-eq-block-head h4 { font-size: 13px; color: #c99e4a; letter-spacing: 1px; margin: 0; font-weight: 600; }
.cc-eq-block-note { font-size: 11.5px; color: #6a6040; }
.cc-eq-more { display: block; margin: 6px 0 14px; }
/* 整条「展开全部物品」入口：金色描边 + 件数徽章，做得显眼一点（v2.14.22） */
.cc-eq-more-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #e6c87c;
    background: linear-gradient(90deg, rgba(201,158,74,0.16), rgba(201,158,74,0.05));
    border: 1px solid rgba(201,158,74,0.45);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s;
}
.cc-eq-more-btn:hover {
    background: linear-gradient(90deg, rgba(201,158,74,0.26), rgba(201,158,74,0.10));
    border-color: #c99e4a;
    color: #f0d89a;
    box-shadow: 0 0 16px rgba(201,158,74,0.18);
}
.cc-eq-more-icon { font-size: 15px; line-height: 1; transition: transform 0.18s; }
.cc-eq-more.is-open .cc-eq-more-icon { transform: rotate(90deg); }
.cc-eq-more-count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    color: #f0d89a;
    background: rgba(201,158,74,0.18);
    border: 1px solid rgba(201,158,74,0.35);
    letter-spacing: 0;
}
.cc-eq-all { border-top: 1px dashed rgba(201,158,74,0.18); padding-top: 12px; margin-bottom: 4px; }
.cc-eq-search {
    width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 8px 12px;
    background: #1a1a1e; border: 1px solid #2a2a2e; border-radius: 8px;
    color: #c8c8c0; font-family: inherit; font-size: 13px;
}
.cc-eq-search:focus { outline: none; border-color: #c99e4a; }
.cc-eq-empty { font-size: 12.5px; color: #6a6040; padding: 10px 2px; }
.eq-warn {
    flex-shrink: 0;
    font-size: 10px;
    line-height: 1.5;
    padding: 1px 6px;
    border-radius: 8px;
    color: #e08a95;
    background: rgba(212,77,94,0.12);
    border: 1px solid rgba(212,77,94,0.35);
    white-space: nowrap;
}
.eq-tile:hover .eq-tooltip { display: block; animation: eqFadeIn 0.15s ease; }
@keyframes eqFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
/* === Custom item input === */
.eq-custom-add {
    margin-top: 1rem;
    padding: 12px 14px;
    border: 1px solid #252529;
    border-radius: 10px;
    background: rgba(255,255,255,0.01);
}
.eq-custom-add h4 {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: #c99e4a;
    margin: 0 0 8px;
    letter-spacing: 0.08em;
}
.eq-custom-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.eq-custom-row input {
    flex: 1 1 140px;
    min-width: 110px;
    padding: 7px 10px;
    font-size: 12.5px;
    background: rgba(255,255,255,0.025);
    border: 1px solid #2a2a2e;
    border-radius: 5px;
    color: #c0c0c0;
    outline: none;
    transition: border-color 0.15s;
}
.eq-custom-row input:focus { border-color: #5a554e; }
.eq-custom-row input::placeholder { color: #4a4a4a; font-size: 12px; }
.eq-custom-row .cc-btn { flex-shrink: 0; font-size: 12px; padding: 7px 14px; }
.eq-del {
    width: 18px; height: 18px;
    background: none; border: 1px solid #3a2830;
    border-radius: 3px;
    color: #a06060; font-size: 11px;
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    transition: all 0.15s;
}
.eq-del:hover { background: rgba(212,77,94,0.2); color: #e06060; border-color: #5a3035; }
.cc-bg-area textarea { width: 100%; padding: 12px; background: #1a1a1e; border: 1px solid #2a2a2e; border-radius: 8px; color: #c8c8c0; font-family: inherit; font-size: 14px; resize: vertical; line-height: 1.7; }
.cc-bg-area textarea:focus { outline: none; border-color: #c99e4a; }

/* ====== 车卡每步顶部的操作条（v2.14.9） ======
   一键随机这类按钮统一放在阶段指示器正下方、用一条横线和内容分开；
   提示文字跟在按钮右侧同一行，不再单独占一段。 */
.cc-actionbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(201,158,74,0.16);
}
.cc-actionbar .cc-btn { margin-top: 0; }
.cc-actionbar .cc-btn-roll { padding: 11px 30px; font-size: 15px; }
.cc-actionbar .cc-hint {
    flex: 1 1 240px;
    min-width: 190px;
    margin: 0;
    text-align: left;
    font-size: 13px !important;
    color: #8a8579 !important;
    line-height: 1.6;
}
/* 「只重抽背景」：原来的 ghost 灰太不显眼了，改成金色描边 + 悬停发光（仍与主按钮区分：不填满） */
.cc-btn-reroll { font-size: 12.5px; padding: 7px 15px; background: rgba(201,158,74,0.13); border: 1px solid rgba(201,158,74,0.5); color: #e2c68a; font-weight: 600; letter-spacing: .04em; }
.cc-btn-reroll:hover { background: rgba(201,158,74,0.24); border-color: #c99e4a; color: #f2dc9f; box-shadow: 0 0 16px rgba(201,158,74,0.2); }
/* 人物背景十栏（人物介绍 / 形象描述 / … / 精神症状 / 背景故事）—— 两列，窄屏一列；「背景故事」横跨整行 */
.cc-bg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cc-bg-head h3 { margin: 0; }
.cc-bg-head .cc-btn { margin-top: 0; white-space: nowrap; }
.cc-bg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.cc-bg-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* 「背景故事」是官方卡上最长的一栏，横跨整行 */
.cc-bg-field.cc-bg-wide { grid-column: 1 / -1; }
.cc-bg-field label { font-size: 12px; color: #8a7a60; letter-spacing: 0.5px; }
.cc-bg-field textarea {
    width: 100%; min-height: 52px; padding: 8px 10px;
    background: #1a1a1e; border: 1px solid #2a2a2e; border-radius: 8px;
    color: #c8c8c0; font-family: inherit; font-size: 13px; line-height: 1.6; resize: vertical;
}
.cc-bg-field textarea:focus { outline: none; border-color: #c99e4a; }
/* 生活水平（信用评级 → 现金 / 资产 / 每日消费额，官方 p.47）：两行紧凑版，放在人物背景信息最上面 */
.cc-credit-card { margin: 8px 0 12px; padding: 10px 14px; border: 1px solid #2a2a2e; border-radius: 10px; background: rgba(255,255,255,0.012); }
.cc-credit-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: #a89878; margin-bottom: 8px; }
.cc-credit-head span { font-size: 12.5px; color: #7d7466; }
.cc-credit-head b { color: #d4a855; }
.cc-credit-hint { margin-left: auto; font-size: 11px !important; color: #5f594d !important; }
.cc-credit-stats { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.cc-credit-stats span { display: flex; flex-direction: column; gap: 1px; }
.cc-credit-stats em { font-style: normal; font-size: 11.5px; color: #6f6858; letter-spacing: .06em; }
.cc-credit-stats strong { font-family: var(--font-num); font-size: 18px; line-height: 1.2; color: #d4a855; font-variant-numeric: tabular-nums; }
.cc-credit-stats small { font-size: 11px; color: #6f6858; }
.cc-credit-note { margin: 8px 0 0; font-size: 11.5px; color: #6f6858; line-height: 1.6; }
.cc-credit-note b { color: #b9a06a; }
@media (max-width: 700px) { .cc-bg-grid { grid-template-columns: 1fr; } }
.cc-btn-restart { background: rgba(255,255,255,0.03); border-color: #3a3035; color: #a09090; }
.cc-btn-restart:hover { background: rgba(212,77,94,0.1); border-color: #5a3035; color: #d08080; }
#ciAge::-webkit-outer-spin-button, #ciAge::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#ciAge { -moz-appearance: textfield; }
/* ====== 自定义确认框 ====== */
.coc-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 10090;
    display: flex; align-items: center; justify-content: center;
    animation: ccFadeIn 0.18s ease;
}
.coc-modal-overlay.danger-bg { background: rgba(0,0,0,0.85); }
@keyframes ccFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
.coc-modal {
    background: #1a1a20;
    border: 1px solid #3a3035;
    border-radius: 12px;
    padding: 28px 32px 20px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: modalIn 0.25s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
/* Type: warning — gold pulse */
.coc-modal.warning {
    border-color: rgba(201,158,74,0.25);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,158,74,0.12);
    animation: modalIn 0.25s cubic-bezier(0.34,1.56,0.64,1) forwards, goldPulse 2s ease-in-out infinite;
}
@keyframes goldPulse {
    0%, 100% { box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,158,74,0.08), 0 0 20px rgba(201,158,74,0); }
    50% { box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,158,74,0.25), 0 0 28px rgba(201,158,74,0.08); }
}
/* Type: danger — red heartbeat + scan line */
.coc-modal.danger {
    border-color: rgba(212,77,94,0.3);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,77,94,0.15);
    animation: modalIn 0.25s cubic-bezier(0.34,1.56,0.64,1) forwards, redHeartbeat 1.2s ease-in-out infinite;
}
.coc-modal.danger::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(212,77,94,0.015) 3px, rgba(212,77,94,0.015) 4px);
    pointer-events: none;
    animation: scanLine 3s linear infinite;
    border-radius: 12px;
}
@keyframes redHeartbeat {
    0%, 100% { box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,77,94,0.1), 0 0 20px rgba(212,77,94,0); }
    15% { box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,77,94,0.35), 0 0 40px rgba(212,77,94,0.12); }
    30% { box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,77,94,0.1), 0 0 20px rgba(212,77,94,0); }
    45% { box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,77,94,0.3), 0 0 35px rgba(212,77,94,0.1); }
}
@keyframes scanLine {
    from { transform: translateY(-100%); }
    to { transform: translateY(100%); }
}
/* Type: info — subdued */
.coc-modal.info,
.coc-modal.plain {
    border-color: rgba(150,150,160,0.2);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
/* Type: plain — 内容自带标题，无图标，允许更高更宽 */
.coc-modal.plain {
    max-width: 440px;
    padding: 24px 26px 18px;
}
.coc-modal.plain .coc-modal-msg {
    max-height: 62vh;
    overflow-y: auto;
    text-align: left;
}
.coc-modal.plain .coc-modal-msg::-webkit-scrollbar { width: 6px; }
.coc-modal.plain .coc-modal-msg::-webkit-scrollbar-thumb { background: #33333a; border-radius: 3px; }
.coc-modal-icon { font-size: 36px; margin-bottom: 10px; display: block; }
.coc-modal.warning .coc-modal-icon { text-shadow: 0 0 12px rgba(201,158,74,0.5); }
.coc-modal.danger .coc-modal-icon { text-shadow: 0 0 16px rgba(212,77,94,0.6); animation: iconGlow 1.2s ease-in-out infinite; }
@keyframes iconGlow { 0%, 100% { text-shadow: 0 0 10px rgba(212,77,94,0.3); } 50% { text-shadow: 0 0 22px rgba(212,77,94,0.7); } }
.coc-modal-msg {
    font-size: 15px; color: #b0a898; line-height: 1.8; margin-bottom: 22px;
    position: relative; z-index: 1;
}
.coc-modal-btns { display: flex; gap: 12px; justify-content: center; position: relative; z-index: 1; }
.coc-modal-btn {
    padding: 9px 28px; border-radius: 6px; font-size: 14px; cursor: pointer;
    font-family: inherit; transition: all 0.18s; border: 1px solid #2a2a2e;
    background: rgba(255,255,255,0.03); color: #888;
}
.coc-modal-btn:hover { border-color: #5a554e; color: #b8b8b8; }
.coc-modal-btn-cancel:hover { border-color: #4a4040; color: #a09090; }
.coc-modal-btn-confirm {
    background: rgba(212,77,94,0.14); border-color: #4a3035; color: #d09090; font-weight: bold;
}
.coc-modal-btn-confirm:hover { background: rgba(212,77,94,0.25); border-color: #6a3035; color: #f0a0a0; box-shadow: 0 0 16px rgba(212,77,94,0.15); }
.coc-modal.warning .coc-modal-btn-confirm { background: rgba(201,158,74,0.12); border-color: #4a3820; color: #d4b880; }
.coc-modal.warning .coc-modal-btn-confirm:hover { background: rgba(201,158,74,0.22); border-color: #6a4a28; color: #e8c898; box-shadow: 0 0 14px rgba(201,158,74,0.15); }
.coc-modal.danger .coc-modal-btn-confirm {
    background: rgba(212,77,94,0.16); border-color: #4a3035; color: #d09090;
    animation: dangerBtnPulse 1.2s ease-in-out infinite;
}
.coc-modal.danger .coc-modal-btn-confirm:hover { background: rgba(212,77,94,0.28); border-color: #7a3035; color: #f0a0a0; box-shadow: 0 0 20px rgba(212,77,94,0.2); }
@keyframes dangerBtnPulse { 0%, 100% { box-shadow: 0 0 0 rgba(212,77,94,0); } 50% { box-shadow: 0 0 12px rgba(212,77,94,0.15); } }
/* ====== Toast notification ====== */
.cc-toast {
    position: fixed; top: 28px; left: 50%; transform: translateX(-50%) translateY(-120px);
    z-index: 99999; padding: 10px 24px; border-radius: 8px;
    font-size: 14px; font-family: inherit;
    pointer-events: none; opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
    white-space: nowrap;
}
.cc-toast-show { transform: translateX(-50%) translateY(0); opacity: 1; }
.cc-toast-hide { transform: translateX(-50%) translateY(-120px); opacity: 0; }
.cc-toast-success {
    background: rgba(24,22,16,0.95); border: 1px solid rgba(201,158,74,0.3);
    color: #d4b860; box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,158,74,0.08);
}
.cc-toast-error {
    background: rgba(28,20,20,0.95); border: 1px solid rgba(212,77,94,0.3);
    color: #e09090; box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,77,94,0.08);
}
.cc-export-card h4, .cc-sk-export h4 { color: #c0b098; font-size: 14px; margin: 12px 0 4px; font-family: var(--font-display); letter-spacing: 0.05em; }
.cc-sk-export p { color: #a8a095; font-size: 13px; line-height: 1.7; }
#ccExportAttr > div span { color: #b0a898; }
#ccExportAttr > div strong { color: #d4c8a8; }
/* ========================================
   守密人帷幕 kpv2 — 全隔离样式
   绝不触碰任何已有CSS类
   ======================================== */
/* --- 首页骰子区 --- */
.kpv2-home-dice { margin-top: 4px; padding-top: 8px; padding-bottom: 40px; }
.kpv2-home-dice-header { text-align: center; margin-bottom: 20px; }
.kpv2-home-dice-header h2 { color: #c99e4a; font-family: var(--font-display); font-size: 22px; letter-spacing: 0.1em; }
.kpv2-home-dice-header p { color: #6a6040; font-size: 13px; margin-top: 4px; }
/* --- 骰子按钮 --- */
.kpv2-dice-tray { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.kpv2-dice-btn { width: 100px; padding: 14px 8px 10px; background: rgba(20,20,26,0.9); border: 1px solid #2a2a2e; border-radius: 10px; cursor: pointer; transition: all 0.25s ease; text-align: center; color: #c8c8c0; position: relative; overflow: hidden; }
.kpv2-dice-btn::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(201,158,74,0.06) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s; }
.kpv2-dice-btn:hover { border-color: #c99e4a; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.5), 0 0 20px rgba(201,158,74,0.1); }
.kpv2-dice-btn:hover::before { opacity: 1; }
.kpv2-dice-btn:active { transform: translateY(-1px); border-color: #d44d5e; box-shadow: 0 0 30px rgba(212,77,94,0.2); }
.kpv2-dice-btn.kpv2-rolling { animation: kpv2-diceShake 0.4s ease; border-color: #d44d5e !important; box-shadow: 0 0 40px rgba(212,77,94,0.3) !important; }
@keyframes kpv2-diceShake { 0%,100%{transform:translateX(0)} 10%{transform:translateX(-6px) rotate(-3deg)} 20%{transform:translateX(6px) rotate(3deg)} 30%{transform:translateX(-4px) rotate(-2deg)} 40%{transform:translateX(4px) rotate(2deg)} 50%{transform:translateX(-2px)} 60%{transform:translateX(2px)} 70%{transform:translateX(-1px)} 100%{transform:translateX(0)} }
.kpv2-dice-icon { display: block; margin-bottom: 4px; }
.kpv2-dice-icon svg { width: 40px; height: 40px; display: block; margin: 0 auto; }
.kpv2-dice-btn:hover .kpv2-dice-icon svg { transform: rotate(12deg) scale(1.1); transition: transform 0.2s; }
.kpv2-dice-label { display: block; font-size: 22px; font-weight: bold; font-family: var(--font-display); color: #c99e4a; letter-spacing: 0.05em; }
.kpv2-dice-result-area { text-align: center; margin: 16px 0; }
.kpv2-dice-result-label { color: #5a5540; font-size: 12px; margin-bottom: 8px; }
.kpv2-dice-result { font-size: 56px; color: #c0a060; font-family: var(--font-display); }
.kpv2-result-num { font-size: 72px; font-weight: bold; font-family: var(--font-display); color: #c99e4a; text-shadow: 0 0 30px rgba(201,158,74,0.4); line-height: 1; }
.kpv2-result-num.pop { animation: kpv2-numPop 0.5s cubic-bezier(0.4,0,0.2,1); }
@keyframes kpv2-numPop { 0%{transform:scale(0.3);opacity:0} 50%{transform:scale(1.2)} 100%{transform:scale(1);opacity:1} }
.kpv2-result-num.crit {
    color: #f0d060;
    text-shadow: 0 0 20px #f0d060, 0 0 60px rgba(240,208,96,0.6), 0 0 100px rgba(240,180,40,0.4), 0 0 160px rgba(240,160,20,0.2);
    animation: kpv2-critBurst 1s ease-out;
}
@keyframes kpv2-critBurst {
    0% { transform: scale(0.4); opacity: 0; text-shadow: 0 0 10px #f0d060; }
    30% { transform: scale(1.3); opacity: 1; text-shadow: 0 0 40px #f0d060, 0 0 120px rgba(240,208,96,0.8), 0 0 200px rgba(240,180,40,0.5); }
    60% { transform: scale(0.95); }
    80% { transform: scale(1.05); }
    100% { transform: scale(1); text-shadow: 0 0 20px #f0d060, 0 0 60px rgba(240,208,96,0.4); }
}
.kpv2-result-num.fail {
    color: #ff2020;
    text-shadow: 0 0 15px #ff2020, 0 0 50px rgba(255,32,32,0.5), 0 0 90px rgba(200,0,0,0.3);
    animation: kpv2-failShake 0.6s ease-out;
}
@keyframes kpv2-failShake {
    0% { transform: translateX(0); }
    10% { transform: translateX(-12px) rotate(-2deg); color: #000; text-shadow: 0 0 30px #ff0000; }
    20% { transform: translateX(10px) rotate(2deg); }
    30% { transform: translateX(-8px) rotate(-1deg); }
    40% { transform: translateX(6px); }
    50% { transform: translateX(-4px); color: #ff4040; }
    60% { transform: translateX(3px); }
    70% { transform: translateX(-2px); }
    80% { transform: translateX(1px); }
    100% { transform: translateX(0); color: #ff2020; }
}
/* 骰子结果区屏幕闪光 */
.kpv2-dice-result-area { position: relative; }
.kpv2-dice-result-area.kpv2-flash-crit::after {
    content: ""; position: absolute; inset: -20px -60px; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(240,208,96,0.15) 0%, transparent 70%);
    animation: kpv2-flashFade 0.8s ease-out forwards;
    z-index: 0;
}
.kpv2-dice-result-area.kpv2-flash-fail::after {
    content: ""; position: absolute; inset: -20px -60px; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(200,20,20,0.12) 0%, transparent 70%);
    animation: kpv2-flashFade 0.6s ease-out forwards;
    z-index: 0;
}
@keyframes kpv2-flashFade { 0% { opacity: 1; } 100% { opacity: 0; } }
.kpv2-result-type { display: block; font-size: 14px; color: #8a7a60; margin-top: 4px; }
.kpv2-dice-toast { text-align: center; font-size: 22px; font-weight: bold; min-height: 34px; opacity: 0; transition: opacity 0.3s; letter-spacing: 0.1em; }
.kpv2-dice-toast.show { opacity: 1; }
.kpv2-dice-toast.crit { color: #f0d060; text-shadow: 0 0 20px rgba(240,208,96,0.6); animation: kpv2-toastPop 0.5s ease-out; }
.kpv2-dice-toast.fumble { color: #ff2020; text-shadow: 0 0 20px rgba(255,32,32,0.6); animation: kpv2-toastShake 0.5s ease-out; }
@keyframes kpv2-toastPop { 0%{transform:scale(0.5);opacity:0} 60%{transform:scale(1.2)} 100%{transform:scale(1);opacity:1} }
@keyframes kpv2-toastShake { 0%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} 100%{transform:translateX(0)} }
.kpv2-dice-history { max-width: 400px; margin: 12px auto; }
.kpv2-quick-rolls { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.kpv2-qr-btn { padding: 8px 20px; background: rgba(255,255,255,0.03); border: 1px solid #2a2520; color: #8a7a60; font-size: 13px; cursor: pointer; border-radius: 4px; transition: all 0.3s; }
.kpv2-qr-btn:hover { background: rgba(201,158,74,0.08); color: #c99e4a; }
.kpv2-qr-clear { color: #6a5040; }
/* --- 折叠面板 --- */
.kpv2-ref-toggle-wrap { text-align: center; margin: 16px 0 8px; }
.kpv2-ref-toggle-btn { background: rgba(201,158,74,0.06); border: 1px solid #3a3020; color: #a09060; padding: 8px 22px; font-size: 14px; cursor: pointer; border-radius: 4px; font-family: var(--font-display); transition: all 0.3s; }
.kpv2-ref-toggle-btn:hover { background: rgba(201,158,74,0.12); color: #c99e4a; }
.kpv2-panels-collapsed { max-height: 0 !important; overflow: hidden !important; opacity: 0; }
.kpv2-panels:not(.kpv2-panels-collapsed) { max-height: 3000px; opacity: 1; }
.kpv2-panels { overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s; max-width: 750px; margin: 0 auto; }
.kpv2-panel { background: rgba(255,255,255,0.02); border: 1px solid #2a2520; border-radius: 6px; padding: 14px 16px; margin-bottom: 12px; }
.kpv2-panel-title { color: #c99e4a; font-size: 15px; font-family: var(--font-display); margin: 0 0 8px 0; }
/* --- 工具通用 --- */
.kpv2-tool-header { text-align: center; margin-bottom: 16px; }
.kpv2-npc-header { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 1050px; margin: 0 auto 16px; }
.kpv2-opt-row { display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; }
.kpv2-opt-label { color: #8a7a60; font-size: 13px; letter-spacing: 0.05em; }
.kpv2-opt-group { display: inline-flex; gap: 6px; padding: 3px; background: rgba(20,20,26,0.5); border: 1px solid #2a2520; border-radius: 6px; }
.kpv2-opt-btn { padding: 5px 14px; background: transparent; border: 1px solid transparent; border-radius: 4px; color: #a8a095; font-size: 13px; cursor: pointer; font-family: inherit; transition: all .2s; white-space: nowrap; }
.kpv2-opt-btn:hover { color: #c99e4a; background: rgba(201,158,74,0.08); }
.kpv2-opt-btn.active { background: rgba(201,158,74,0.16); border-color: rgba(201,158,74,0.45); color: #e0b860; font-weight: bold; box-shadow: 0 0 10px rgba(201,158,74,0.12); }
/* 检定角色选择器（遭遇/追逐/NPC 共用）：每行 3 个（未指定 + 最多 8 名调查员 = 3 行），左对齐 */
.kpv2-enc-char-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
/* 检定角色选择卡片：尺寸/字号与人物卡页的玩家卡片完全一致，仅去掉删除按钮、并补「未指定」卡片 */
.kpv2-char-card-pick { text-align: left; }
.kpv2-char-card-pick .kpv2-char-card-stats > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpv2-char-card-none { grid-template-columns: 64px minmax(0, 1fr); }
.kpv2-char-card-none .kpv2-char-card-avatar { background: rgba(20,20,26,0.9); }
.kpv2-char-card-none .kpv2-char-card-ph { -webkit-mask-image: none; mask-image: none; }
.kpv2-char-card-none .kpv2-char-card-name { color: #8a8a80; }
.kpv2-gen-btn { background: rgba(201,158,74,0.1); border: 1px solid #4a3520; color: #c99e4a; padding: 10px 22px; font-size: 15px; cursor: pointer; border-radius: 4px; font-family: var(--font-display); transition: all 0.3s; display: inline-block; }
.kpv2-gen-btn:hover { background: rgba(201,158,74,0.18); border-color: #8a5530; color: #e0b860; }
.kpv2-filter-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.kpv2-filter-row label { color: #8a7a60; font-size: 15px; }
.kpv2-filter-row select { background: #1a1510; border: 1px solid #3a3020; color: #c0a080; padding: 6px 12px; border-radius: 3px; font-size: 15px; cursor: pointer; }
/* --- NPC三列网格 --- */
.kpv2-npc-card { max-width: 1050px; margin: 0 auto; }
.kpv2-npc-placeholder { color: #5a5040; text-align: center; font-size: 14px; padding: 40px 0; }
.kpv2-npc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpv2-npc-card-item { background: rgba(255,255,255,0.02); border: 1px solid #2a2520; border-radius: 6px; padding: 14px; animation: kpv2-chaseIn 0.35s ease-out both; }
.kpv2-npc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.kpv2-npc-name { font-size: 20px; color: #c99e4a; font-family: var(--font-display); margin: 0; }
.kpv2-npc-badge { font-size: 12px; color: #8a7a60; background: rgba(201,158,74,0.08); border: 1px solid rgba(201,158,74,0.15); padding: 2px 8px; border-radius: 12px; white-space: nowrap; }
.kpv2-npc-summary { font-size: 12px; color: #8a7a60; line-height: 1.6; margin-bottom: 8px; }
.kpv2-npc-detail-rows { margin-top: 4px; }
.kpv2-npc-row { display: flex; padding: 4px 0; font-size: 13px; color: #b0a090; }
.kpv2-npc-row span:first-child { width: 48px; color: #8a7a60; flex-shrink: 0; font-size: 12px; }
.kpv2-npc-weak-hint { margin-top: 8px; padding: 7px 10px; background: rgba(201,158,74,0.06); border: 1px solid rgba(201,158,74,0.18); border-left: 2px solid #c99e4a; border-radius: 4px; font-size: 12px; color: #b8945a; line-height: 1.6; animation: kpv2-chaseIn 0.3s ease-out both; }
.kpv2-npc-attrs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(201,158,74,0.12); }
.kpv2-npc-attrs span { font-size: 12px; color: #8a7a60; }
.kpv2-npc-attrs b { color: #c0a060; margin-left: 2px; font-size: 13px; }
.kpv2-npc-attrs .kpv2-npc-attr-max { color: #e0b860; }
.kpv2-npc-attrs .kpv2-npc-attr-max b { color: #f0d070; text-shadow: 0 0 8px rgba(201,158,74,0.35); }
.kpv2-npc-derived { display: flex; gap: 12px; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,0.03); flex-wrap: wrap; }
.kpv2-npc-derived span { font-size: 12px; color: #6a8060; }
.kpv2-npc-derived b { color: #8ab870; margin-left: 2px; font-size: 13px; }
.kpv2-npc-act-label { margin-top: 10px; font-size: 11px; color: #8a7a60; letter-spacing: 0.1em; }
.kpv2-npc-skill-label { margin-top: 10px; font-size: 11px; color: #8a7a60; letter-spacing: 0.1em; }
.kpv2-npc-skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px 8px; margin-top: 6px; padding: 8px 10px; background: rgba(20,20,26,0.4); border: 1px solid rgba(201,158,74,0.1); border-radius: 4px; }
.kpv2-npc-skill-grid span { font-size: 12px; color: #8a7a60; display: flex; justify-content: space-between; gap: 6px; }
.kpv2-npc-skill-grid b { color: #c0a060; font-size: 12px; }
.kpv2-npc-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.kpv2-npc-act-btn { padding: 6px 4px; background: rgba(20,20,26,0.6); border: 1px solid rgba(201,158,74,0.2); border-radius: 4px; color: #b0a080; font-size: 13px; cursor: pointer; font-family: inherit; transition: all .2s; white-space: nowrap; }
.kpv2-npc-act-btn:hover { border-color: #c99e4a; color: #c99e4a; background: rgba(201,158,74,0.12); box-shadow: 0 0 10px rgba(201,158,74,0.15); transform: translateY(-1px); }
.kpv2-npc-act-btn:active { transform: scale(0.95); }
@media (max-width: 768px) { .kpv2-npc-grid { grid-template-columns: 1fr; } }
/* --- 遭遇三列网格 --- */
.kpv2-encounter-card { max-width: 1050px; margin: 0 auto; }
.kpv2-encounter-placeholder { color: #5a5040; text-align: center; font-size: 14px; padding: 40px 0; }
.kpv2-encounter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpv2-encounter-card-item { background: rgba(255,255,255,0.03); border: 1px solid #3a3028; border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.kpv2-encounter-scene { font-size: 13px; color: #b08040; background: rgba(201,158,74,0.1); padding: 3px 8px; border-radius: 3px; display: inline-block; margin-bottom: 8px; font-family: var(--font-display); align-self: flex-start; }
.kpv2-encounter-text { font-size: 15px; color: #e0d0b8; line-height: 1.7; margin-bottom: 8px; }
.kpv2-encounter-check { font-size: 13px; color: #b0a080; background: rgba(201,158,74,0.06); padding: 7px 10px; border-radius: 3px; border-left: 2px solid #c99e4a; display: flex; align-items: center; gap: 8px; }
.kpv2-encounter-roll { display: inline-block; padding: 2px 10px; background: rgba(201,158,74,0.15); border: 1px solid rgba(201,158,74,0.4); color: #c99e4a; border-radius: 3px; cursor: pointer; font-size: 12px; transition: all .2s; margin-left: auto; }
.kpv2-encounter-roll:hover { background: rgba(201,158,74,0.3); box-shadow: 0 0 10px rgba(201,158,74,0.2); }
.kpv2-encounter-success { font-size: 13px; color: #8ab89a; background: rgba(90,160,110,0.07); border-left: 2px solid #6a9a4e; padding: 7px 10px; border-radius: 3px; line-height: 1.6; }
.kpv2-encounter-fail { font-size: 13px; color: #d4a090; background: rgba(160,60,60,0.07); border-left: 2px solid #a04040; padding: 7px 10px; border-radius: 3px; line-height: 1.6; }
.kpv2-encounter-san { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #d08080; background: rgba(160,48,64,0.08); border: none; border-left: 2px solid #c86a6a; padding: 7px 10px; border-radius: 3px; margin-top: 8px; }
.kpv2-encounter-san .kpv2-encounter-roll { flex-shrink: 0; white-space: nowrap; margin-left: auto; }
.kpv2-encounter-san-title { color: #e0a0a0; font-weight: bold; letter-spacing: 0.08em; white-space: nowrap; }
.kpv2-encounter-san-formula { color: #d08080; font-family: "Consolas", "Courier New", monospace; font-size: 13px; white-space: nowrap; }
.kpv2-encounter-san-formula small { color: #8a6060; font-size: 10px; margin-left: 6px; font-family: inherit; letter-spacing: 0.05em; }
@media (max-width: 480px) { .kpv2-encounter-san .kpv2-encounter-roll { margin-left: 0; } }
/* 检定角色选择器（遭遇/追逐/NPC 共用）：每行最多 4 个，左对齐，超出后换行左起 */
/* ---------- 遭遇页：统一栏宽（v2.17.0）----------
   选人栏 / 场景行 / 遭遇卡此前各用各的宽度（选人栏铺满整页、卡片 1050 居中），
   视觉上互相错位、上下贴在一起像「重叠」。现在全页共用一条 1050px 栏，并且行与行之间留足间距。 */
.kpv2-enc-wrap { max-width: 1050px; margin: 0 auto 14px; }
.kpv2-enc-wrap .kpv2-enc-char-row { align-items: flex-start; margin-top: 0; gap: 6px; }
.kpv2-enc-wrap .kpv2-filter-row { justify-content: flex-start; margin: 0; }
.kpv2-enc-wrap .kpv2-npc-card, .kpv2-enc-wrap .kpv2-chase-card { margin: 0; }
.kpv2-filter-sep { width: 1px; height: 18px; background: #2a2a32; margin: 0 6px; }
.kpv2-enc-char-bar { min-height: 84px; }
.kpv2-enc-char-row { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; width: 100%; }
.kpv2-enc-char-label { font-size: 12px; color: #8a7a60; letter-spacing: 0.06em; white-space: nowrap; }
@media (max-width: 900px) { .kpv2-enc-char-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kpv2-enc-char-bar { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .kpv2-encounter-grid { grid-template-columns: 1fr; } }
/* --- 速查：默认收起的折叠块（v2.13.1 从遭遇卡里搬出来，抽卡时不再跟着重建/回滚） --- */
.kpv2-enc-ref { max-width: 1050px; margin: 18px auto 0; }
.kpv2-enc-ref-head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 14px; cursor: pointer; font-family: inherit; text-align: left;
    background: rgba(201,158,74,0.04); border: 1px solid #2a2520; border-radius: 6px;
    transition: all .2s;
}
.kpv2-enc-ref-head:hover { border-color: #4a3a24; background: rgba(201,158,74,0.08); }
.kpv2-enc-ref-arrow { color: #8a7a60; font-size: 11px; width: 10px; flex-shrink: 0; }
.kpv2-enc-ref-title { color: #b0a090; font-size: 14px; font-family: var(--font-display); letter-spacing: .04em; }
.kpv2-enc-ref-hint { margin-left: auto; color: #5a5040; font-size: 12px; white-space: nowrap; }
.kpv2-enc-ref-body { padding: 0 4px; }
/* --- 横线 + 间距：把「遭遇」和并入本页的「NPC 生成」分开 --- */
.kpv2-enc-divider {
    display: flex; align-items: center; gap: 14px;
    max-width: 1050px; margin: 36px auto 20px; color: #8a7a60;
    font-size: 14px; font-family: var(--font-display); letter-spacing: .08em;
}
.kpv2-enc-divider::before, .kpv2-enc-divider::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,158,74,.22), transparent);
}
.kpv2-enc-divider span { white-space: nowrap; }
/* --- 追逐卡片 --- */
.kpv2-chase-card { max-width: 1050px; margin: 0 auto; }
.kpv2-chase-placeholder { color: #5a5040; text-align: center; font-size: 14px; padding: 40px 0; }
.kpv2-chase-step { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,0.02); border: 1px solid #2a2520; border-radius: 4px; margin: 0; animation: kpv2-chaseIn 0.35s ease-out both; }
.kpv2-chase-start { border-left: 3px solid #c99e4a; }
.kpv2-chase-obs { border-left: 3px solid #d44d5e; }
.kpv2-chase-short { border-left: 3px solid #6a9040; }
.kpv2-chase-end { border-left: 3px solid #6a80c0; }
.kpv2-chase-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(201,158,74,0.12); color: #c99e4a; font-size: 13px; font-weight: bold; flex-shrink: 0; }
.kpv2-chase-label { width: 44px; font-size: 13px; color: #8a7a60; flex-shrink: 0; }
.kpv2-chase-arrow { text-align: center; color: #4a4030; font-size: 16px; padding: 1px 0; animation: kpv2-chaseIn 0.3s ease-out both; }
@keyframes kpv2-chaseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.kpv2-chase-check { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-size: 13px; color: #b0a080; display: inline-flex; align-items: center; gap: 8px; }
.kpv2-chase-check .kpv2-encounter-roll { margin-left: 0; }
.kpv2-chase-desc { font-size: 15px; color: #c0b090; line-height: 1.5; flex: 1; min-width: 0; }
@media (max-width: 480px) { .kpv2-chase-step { flex-wrap: wrap; } .kpv2-chase-check { margin-left: 0; width: 100%; justify-content: flex-end; } }
/* --- SAN面板 --- */
.kpv2-san-panels { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
/* 疯狂速查并入骰子页后，与上方骰盘/规则速查拉开距离，并加一条淡金分隔线 + 小标题 */
#kpDice .kpv2-san-panels {
    margin-top: 60px; padding-top: 46px;
    position: relative;
}
#kpDice .kpv2-san-panels::before {
    content: '疯 狂'; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-display); font-size: 12px; color: #7a6a48; letter-spacing: 0.3em;
}
#kpDice .kpv2-san-panels::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent, rgba(201,158,74,0.18) 18%, rgba(201,158,74,0.18) 82%, transparent);
}

/* ---- 守密人笔记 ---- */
.kpv2-notes-card { grid-template-columns: 64px minmax(0, 1fr) auto; }
.kpv2-char-card-stats .nt { color: #9ab0c8; font-weight: bold; font-size: 14px; }
.kpv2-char-card-stats .nt.off { color: #55524a; font-weight: normal; font-size: 12px; }
.kpv2-notes-wrap { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.kpv2-notes-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kpv2-notes-title { font-family: var(--font-display); font-size: 16px; color: #d4b880; letter-spacing: 0.05em; }
.kpv2-notes-meta { font-size: 12px; color: #7a7060; }
.kpv2-notes-spacer { flex: 1 1 auto; }
.kpv2-notes-btn {
    padding: 6px 14px; font-size: 13px; font-family: inherit; cursor: pointer;
    color: #b0a080; background: rgba(20,20,26,0.6);
    border: 1px solid rgba(201,158,74,0.2); border-radius: 5px;
    transition: all 0.2s;
}
.kpv2-notes-btn:hover { border-color: #c99e4a; color: #c99e4a; background: rgba(201,158,74,0.1); }
.kpv2-notes-btn.danger { border-color: rgba(180,60,70,0.18); color: #9a7060; }
.kpv2-notes-btn.danger:hover { border-color: #d44d5e; color: #d44d5e; background: rgba(180,60,70,0.1); }
.kpv2-notes-area {
    width: 100%; box-sizing: border-box; min-height: 420px; resize: vertical;
    padding: 16px 18px; font-size: 14px; line-height: 1.9; font-family: inherit;
    color: #d0d0c8; background: rgba(16,16,20,0.72);
    border: 1px solid #2a2a30; border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.kpv2-notes-area:focus { outline: none; border-color: rgba(201,158,74,0.5); box-shadow: 0 0 0 1px rgba(201,158,74,0.14), 0 0 18px rgba(201,158,74,0.06); }
.kpv2-notes-area::placeholder { color: #5a554e; }
.kpv2-notes-area::-webkit-scrollbar { width: 8px; }
.kpv2-notes-area::-webkit-scrollbar-thumb { background: #33333a; border-radius: 4px; }

/* ---- 笔记：颜色标签工具条 + 富文本编辑器 ---- */
.kpv2-notes-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px;
    background: rgba(20,20,26,0.5); border: 1px solid #23232a; border-radius: 8px;
}
.kpv2-notes-tb-label { font-size: 12px; color: #8a7a60; letter-spacing: 0.06em; white-space: nowrap; }
.kpv2-notes-tb-hint { font-size: 11px; color: #56524a; white-space: nowrap; }
.kpv2-notes-color {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; font-size: 13px; font-family: inherit; cursor: pointer;
    background: rgba(16,16,20,0.6); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 999px; transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.kpv2-notes-color i {
    width: 9px; height: 9px; border-radius: 50%; background: currentColor;
    box-shadow: 0 0 8px currentColor; flex: 0 0 auto;
}
.kpv2-notes-color:hover { background: rgba(255,255,255,0.05); border-color: currentColor; transform: translateY(-1px); }
.kpv2-notes-color:active { transform: translateY(0); }

.kpv2-notes-editor {
    width: 100%; box-sizing: border-box; min-height: 420px; max-height: 62vh; overflow-y: auto;
    padding: 16px 18px; font-size: 14px; line-height: 1.9; font-family: inherit;
    color: #d0d0c8; background: rgba(16,16,20,0.72);
    border: 1px solid #2a2a30; border-radius: 10px;
    white-space: pre-wrap; word-break: break-word; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.kpv2-notes-editor:focus { border-color: rgba(201,158,74,0.5); box-shadow: 0 0 0 1px rgba(201,158,74,0.14), 0 0 18px rgba(201,158,74,0.06); }
.kpv2-notes-editor.is-empty::before {
    content: attr(data-ph); color: #5a554e; white-space: pre-wrap; pointer-events: none;
}
.kpv2-notes-editor::-webkit-scrollbar { width: 8px; }
.kpv2-notes-editor::-webkit-scrollbar-thumb { background: #33333a; border-radius: 4px; }
.kpv2-notes-editor b, .kpv2-notes-editor strong { font-weight: 700; }
.kpv2-notes-editor span[style*="color"] { font-weight: 600; }
/* 插入的玩家姓名：固定在正文里最跳的米白色，**不随周围文字颜色走** */
.kpv2-notes-editor b.nm {
    color: #fdf3d8;
    font-weight: 700;
    background: rgba(253,243,216,0.09);
    border-radius: 3px;
    padding: 0 3px;
    box-shadow: 0 0 0 1px rgba(253,243,216,0.13);
}

/* 当前"打字颜色"高亮 */
.kpv2-notes-color.active { background: rgba(255,255,255,0.09); border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; }
.kpv2-notes-name {
    padding: 5px 12px; font-size: 13px; font-family: inherit; cursor: pointer;
    color: #c0b090; background: rgba(16,16,20,0.6);
    border: 1px solid rgba(201,158,74,0.22); border-radius: 6px;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
}
.kpv2-notes-name:hover { background: rgba(201,158,74,0.14); border-color: rgba(201,158,74,0.55); color: #e8d8b0; transform: translateY(-1px); }
.kpv2-notes-name:active { transform: translateY(0); }
.kpv2-notes-foot { display: flex; justify-content: flex-end; }
.kpv2-notes-saved { font-size: 12px; color: #6a6040; transition: color 0.2s; }
.kpv2-notes-saved.ok { color: #7a9a70; }
@media (max-width: 640px) {
    .kpv2-notes-area { min-height: 300px; }
    .kpv2-notes-editor { min-height: 300px; }
    .kpv2-notes-spacer { display: none; }
    #kpDice .kpv2-san-panels { margin-top: 36px; padding-top: 24px; }
}
.kpv2-san-section { background: rgba(255,255,255,0.02); border: 1px solid #2a2520; border-radius: 6px; padding: 16px 18px; }
.kpv2-san-section-title { font-size: 18px; color: #c99e4a; font-family: var(--font-display); margin: 0 0 10px 0; padding-bottom: 6px; border-bottom: 1px solid #2a2520; }
.kpv2-san-section p { color: #b0a090; font-size: 15px; line-height: 1.7; }
/* --- 疯狂检定按钮 + Glitch --- */
.kpv2-madness-roll-wrap { text-align: center; margin-bottom: 18px; }
/* 两个判定按钮之间留出间隙（inline-block 且标签相邻会贴在一起） */
.kpv2-madness-btn + .kpv2-madness-btn { margin-left: 12px; }
@media (max-width: 560px) { .kpv2-madness-btn + .kpv2-madness-btn { margin-left: 0; margin-top: 10px; } }
.kpv2-madness-btn { background: rgba(180,40,50,0.12); border: 1px solid rgba(180,40,50,0.25); color: #d08080; padding: 16px 40px; font-size: 18px; cursor: pointer; border-radius: 4px; font-family: var(--font-body, "Microsoft YaHei", sans-serif); letter-spacing: 0.02em; position: relative; overflow: hidden; }
.kpv2-madness-btn:hover { background: rgba(180,40,50,0.2); border-color: #803040; color: #e0a0a0; box-shadow: 0 0 18px rgba(180,40,50,0.12); }
.kpv2-madness-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent); animation: kpv2-scan 3s linear infinite; }
@keyframes kpv2-scan { 0% { left: -100% } 100% { left: 100% } }
.kpv2-madness-btn.kpv2-glitching { animation: kpv2-shake 0.3s ease, kpv2-noise 0.15s steps(5) 3; }
@keyframes kpv2-shake { 0%,100%{transform:translate(0)} 15%{transform:translate(-3px,2px)} 30%{transform:translate(3px,-1px)} 45%{transform:translate(-2px,-2px)} 60%{transform:translate(2px,1px)} 75%{transform:translate(-1px,2px)} 90%{transform:translate(1px,-2px)} }
@keyframes kpv2-noise { 0%{filter:brightness(1)} 20%{filter:brightness(1.5) contrast(0.8)} 40%{filter:brightness(0.6) contrast(1.3) saturate(0.5)} 60%{filter:brightness(1.8) hue-rotate(20deg)} 80%{filter:brightness(0.5) contrast(1.5)} 100%{filter:brightness(1)} }
.kpv2-madness-result { max-width: 480px; margin: 16px auto 0; }
.kpv2-madness-card { background: rgba(180,40,50,0.06); border: 1px solid rgba(180,40,50,0.15); border-radius: 6px; padding: 20px 26px; }
.kpv2-madness-result.kpv2-show .kpv2-madness-card { animation: kpv2-madnessIn 0.55s ease-out; }
.kpv2-madness-num { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; background: rgba(180,40,50,0.15); color: #d44d5e; font-size: 20px; font-weight: bold; margin-right: 12px; vertical-align: middle; }
.kpv2-madness-name { font-size: 22px; color: #d08080; font-family: var(--font-display); vertical-align: middle; }
.kpv2-madness-desc { font-size: 16px; line-height: 1.8; color: #b0a090; margin: 6px 0 0; line-height: 1.6; }
.kpv2-glitch-text { animation: kpv2-flicker 0.45s ease-out; }
@keyframes kpv2-flicker {
    0% { text-shadow: 2px 0 #d44d5e, -2px 0 #4080c0; opacity: 0.7; }
    15% { text-shadow: -3px 1px #ff2040, 2px -2px #2040ff; opacity: 1; }
    30% { text-shadow: 1px -1px #d44d5e, -1px 2px #4080c0; opacity: 0.5; }
    45% { text-shadow: -2px 0 #ff2040, 3px 1px #2040ff; opacity: 1; }
    60% { text-shadow: 1px 0 #d44d5e, -2px -1px #4080c0; opacity: 0.8; }
    75% { text-shadow: -1px 1px #ff2040, 1px -1px #2040ff; opacity: 1; }
    90% { text-shadow: 0.5px 0 #d44d5e, -0.5px 0 #4080c0; opacity: 0.9; }
    100% { text-shadow: none; opacity: 1; }
}
/* --- 规则速查 --- */
.kpv2-rule-ref { margin-top: 14px; }
.kpv2-rule-title { font-size: 15px; color: #8a7a60; font-family: var(--font-display); padding: 6px 0 8px; border-bottom: 1px solid #1a1a1e; margin-bottom: 8px; }
/* --- lore-tabs 居中 (scope to kptools) --- */
#kptabs.lore-tabs { justify-content: center; }
.kpv2-dice-history { max-width: 520px; margin: 8px auto; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding: 2px; }
.kpv2-hist-chip { display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 14px; font-family: var(--font-display); background: rgba(255,255,255,0.03); border: 1px solid #2a2520; color: #8a7a60; white-space: nowrap; }
.kpv2-hist-chip.kpv2-hist-latest { border-color: #c99e4a; color: #c0a060; }
.kpv2-hist-chip.kpv2-hist-crit { border-color: #4a8; color: #4a8; }
.kpv2-hist-chip.kpv2-hist-fumble { border-color: #d44d5e; color: #d44d5e; }
@keyframes kpv2-madnessIn {
    0% { opacity: 0; transform: translateY(-12px) scale(0.9); filter: brightness(2) blur(2px); }
    15% { opacity: 0.3; filter: brightness(0.5) contrast(2) hue-rotate(-15deg); }
    30% { opacity: 0.7; transform: translateY(2px) scale(1.02); filter: brightness(1.5) blur(0.5px); }
    45% { opacity: 0.5; filter: brightness(0.7) contrast(1.5) saturate(0.5); }
    60% { opacity: 0.9; transform: translateY(-1px) scale(0.99); filter: brightness(1.2); }
    75% { opacity: 0.8; filter: brightness(1.1) blur(0.3px); }
    90% { opacity: 1; filter: brightness(0.9) contrast(1.1); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) blur(0); }
}
.kpv2-madness-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.kpv2-madness-roll { font-size: 14px; color: #8a7a60; font-family: var(--font-display); }
.kpv2-madness-roll b { color: #f0d060; font-size: 18px; text-shadow: 0 0 8px rgba(240,208,96,0.3); }
.kpv2-rule-ref .kp-table { font-size: 15px; }
.kpv2-rule-ref .kp-table th { color: #b0a090; padding: 8px 10px; font-size: 14px; }
.kpv2-rule-ref .kp-table td { color: #c0b8a8; padding: 7px 10px; }
.kpv2-rule-ref .kp-table td:last-child { color: #d4c060; cursor: pointer; transition: color 0.2s; }
.kpv2-rule-ref .kp-table td:last-child:hover { color: #f0d860; text-shadow: 0 0 6px rgba(240,216,96,0.3); }
.kpv2-dice-roll-btn { display: inline-block; cursor: pointer; width: 28px; height: 28px; background: #1a1a20; border: 1.5px solid #3a3a3e; border-radius: 5px; position: relative; transition: all 0.2s ease; vertical-align: middle; }
.kpv2-dice-roll-btn::before { content: ""; position: absolute; inset: 0; border-radius: 5px; background: radial-gradient(circle 2.5px at 25% 25%, #c99e4a 100%, transparent), radial-gradient(circle 2.5px at 75% 25%, #c99e4a 100%, transparent), radial-gradient(circle 2.5px at 25% 75%, #c99e4a 100%, transparent), radial-gradient(circle 2.5px at 75% 75%, #c99e4a 100%, transparent); transition: all 0.2s ease; }
.kpv2-dice-roll-btn:hover { border-color: #c99e4a; transform: scale(1.15); box-shadow: 0 0 10px rgba(201,158,74,0.2); }
.kpv2-dice-roll-btn:hover::before { background: radial-gradient(circle 2.5px at 25% 25%, #e0b860 100%, transparent), radial-gradient(circle 2.5px at 75% 25%, #e0b860 100%, transparent), radial-gradient(circle 2.5px at 25% 75%, #e0b860 100%, transparent), radial-gradient(circle 2.5px at 75% 75%, #e0b860 100%, transparent); }
.kpv2-dice-roll-btn:active { transform: scale(0.95); border-color: #d44d5e; }
.kpv2-dice-roll-btn.kpv2-diceShake { animation: kpv2-diceShake 0.4s ease; }
.kpv2-rule-ref .kp-table th:last-child { text-align: center; }
.kpv2-san-result { min-width: 36px; text-align: center; font-size: 16px; font-weight: bold; color: #ff6b6b !important; text-shadow: 0 0 6px rgba(255,107,107,0.5); }
.kpv2-san-pop { animation: kpv2-popIn 0.4s ease-out; }
@keyframes kpv2-popIn { 0%{transform:scale(0.3);opacity:0} 60%{transform:scale(1.2);opacity:1} 100%{transform:scale(1);opacity:1} }
/* ====== 技能检定 v2 (kpv2-check) ====== */
.kpv2-check-wrap { max-width: 860px; margin: 0 auto; padding: 10px 0; }
/* --- 技能检定操作栏 --- */
.kpv2-check-action-bar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; margin-bottom: 14px; background: rgba(20,20,26,0.5); border: 1px solid #1e1e24; border-radius: 8px; flex-wrap: wrap; }
.kpv2-check-action-btn { padding: 9px 18px; background: rgba(20,20,26,0.6); border: 1px solid rgba(201,158,74,0.18); border-radius: 5px; color: #b0a080; font-size: 15px; cursor: pointer; transition: all 0.22s; font-family: var(--font-display); letter-spacing: 0.05em; white-space: nowrap; }
.kpv2-check-action-btn:hover { border-color: #c99e4a; color: #c99e4a; background: rgba(201,158,74,0.1); box-shadow: 0 0 14px rgba(201,158,74,0.12); transform: translateY(-1px); }
.kpv2-check-action-btn-danger { border-color: rgba(180,60,70,0.15); color: #9a7060; }
.kpv2-check-action-btn-danger:hover { border-color: #d44d5e; color: #d44d5e; background: rgba(180,60,70,0.1); box-shadow: 0 0 14px rgba(212,77,94,0.15); }
/* 动作栏分区竖线：隔开左侧「导入」区与右侧「导出·重置」区 */
.kpv2-check-action-divider {
    align-self: stretch; width: 1px; flex: 0 0 1px; margin: 0 4px;
    background: linear-gradient(to bottom, rgba(201,158,74,0) 0%, rgba(201,158,74,0.28) 50%, rgba(201,158,74,0) 100%);
}
.kpv2-drop-over { border-color: #c99e4a !important; background: rgba(201,158,74,0.08) !important; box-shadow: 0 0 16px rgba(201,158,74,0.2) !important; }
/* --- 角色切换标签行（卡片式，一行 3 个） --- */
.kpv2-check-char-tabs-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 10px; padding: 0; margin-bottom: 14px; }
@media (max-width: 900px) { .kpv2-check-char-tabs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpv2-check-char-tabs-row { grid-template-columns: 1fr; } }
/* 卡片：头像贴左满高填充，无外框，右侧用 mask 渐变淡出到卡片底色（渐变在文字开始前结束） */
.kpv2-char-card { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; padding: 10px 22px 10px 0; background: rgba(20,20,26,0.6); border: 1px solid #2a2a30; border-radius: 8px; cursor: pointer; transition: all .22s; overflow: hidden; text-align: left; }
.kpv2-char-card:hover { border-color: rgba(201,158,74,0.45); background: rgba(26,26,32,0.85); transform: translateY(-1px); }
.kpv2-char-card-active { border-color: #d44d5e; background: rgba(212,77,94,0.08); box-shadow: 0 0 18px rgba(212,77,94,0.2), 0 0 36px rgba(212,77,94,0.08); }
.kpv2-char-card-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #d44d5e; z-index: 3; }
.kpv2-char-card-avatar { position: absolute; left: 0; top: 0; bottom: 0; width: 64px; background: #141418; display: flex; align-items: center; justify-content: center; }
.kpv2-char-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%); mask-image: linear-gradient(to right, #000 55%, transparent 100%); }
.kpv2-char-card-ph { font-size: 30px; color: #4a4030; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%); mask-image: linear-gradient(to right, #000 55%, transparent 100%); }
.kpv2-char-card-info { min-width: 0; grid-column: 2; }
.kpv2-char-card-name { font-size: 15px; color: #d0c0a0; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpv2-char-card-active .kpv2-char-card-name { color: #e8a8a8; }
.kpv2-char-card-occ { font-size: 12px; color: #8a7a60; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpv2-char-card-stats { grid-column: 3; display: flex; flex-direction: column; gap: 4px; font-size: 16px; text-align: right; white-space: nowrap; }
.kpv2-char-card-stats .hp { color: #e89090; font-weight: bold; }
.kpv2-char-card-stats .san { color: #9cc090; font-weight: bold; }
.kpv2-char-card-stats small { color: #8a8070; font-size: 12px; font-weight: normal; }
.kpv2-char-card .kpv2-char-tab-del { position: absolute; top: 5px; right: 5px; z-index: 3; }
/* ============================================================
   人物卡槽位与截断规则（v2.14.6）—— 往里加东西前先读这段
   三列：头像(64) | 信息(minmax(72px,1fr)) | 统计(auto)
   信息列里只允许这四种槽位，各自都有明确的溢出策略：
     .kpv2-char-card-name  姓名     单行 + 省略号（完整值挂在卡片 title 上）
     .kpv2-char-card-occ   职业/身份 单行 + 省略号
     .kpv2-char-card-attr  属性明细  单行 + 省略号（值多的用 title 兜底）
     .kpv2-char-card-badge 徽标/标签 可换行、不省略（数量不定）
   绝不要把标签做成绝对定位压到统计列上：那会叠字（v2.14.5 踩过）。
   也绝不要把标签塞进 name/occ/attr——那三行是 nowrap+省略号，会被切掉。
   ============================================================ */
.kpv2-char-card { grid-template-columns: 64px minmax(72px, 1fr) auto; }
.kpv2-char-card-info { display: flex; flex-direction: column; min-width: 0; }
.kpv2-char-card-info > * { min-width: 0; }
.kpv2-char-card-name,
.kpv2-char-card-occ,
.kpv2-char-card-attr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpv2-char-card-attr { font-size: 11.5px; color: #6f6555; margin-top: 2px; }
.kpv2-char-card-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; line-height: 1.5; }
.kpv2-char-card-stats { flex: 0 0 auto; }
.kpv2-check-action-reset { margin-left: auto; }
/* ===== 检定修正控件（奖励骰 / 惩罚骰） ===== */
.kpv2-dice-mod-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px; margin-bottom: 12px; background: rgba(20,20,26,0.45); border: 1px solid #1e1e24; border-radius: 8px; }
.kpv2-mod-label { font-size: 13px; color: #8a7a60; letter-spacing: 0.05em; white-space: nowrap; }
.kpv2-mod-btn { padding: 5px 12px; background: rgba(20,20,26,0.6); border: 1px solid #2a2a30; border-radius: 20px; color: #8a8a80; font-size: 13px; font-family: inherit; cursor: pointer; transition: all .2s; white-space: nowrap; }
.kpv2-mod-btn.bonus:hover { border-color: rgba(201,158,74,0.5); color: #c99e4a; background: rgba(201,158,74,0.08); }
.kpv2-mod-btn.penalty:hover { border-color: rgba(212,77,94,0.5); color: #d44d5e; background: rgba(180,60,70,0.08); }
.kpv2-mod-btn.bonus.active { border-color: #c99e4a; color: #e0b860; background: rgba(201,158,74,0.16); font-weight: bold; box-shadow: 0 0 12px rgba(201,158,74,0.18); }
.kpv2-mod-btn.penalty.active { border-color: #d44d5e; color: #e88090; background: rgba(180,60,70,0.16); font-weight: bold; box-shadow: 0 0 12px rgba(212,77,94,0.18); }
.kpv2-mod-net { margin-left: auto; font-size: 12px; color: #6a6040; white-space: nowrap; }
.kpv2-mod-net.active { color: #c99e4a; font-weight: bold; }
/* ===== 结果卡骰子明细（仅有修正时显示） ===== */
.kpv2-dice-detail { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 10px; padding: 8px 12px; background: rgba(201,158,74,0.05); border: 1px solid rgba(201,158,74,0.15); border-radius: 7px; animation: kpv2-chaseIn 0.3s ease-out both; }
.kpv2-dice-badge { font-size: 12px; font-weight: bold; letter-spacing: 0.05em; }
.kpv2-dice-badge.bonus { color: #e0b860; }
.kpv2-dice-badge.penalty { color: #d48a90; }
.kpv2-dice-vals { font-size: 12px; color: #a8a095; font-family: "Consolas", "Courier New", monospace; }
.kpv2-dice-vals b { color: #c99e4a; }
.kpv2-dice-src { font-size: 11px; color: #8a7a60; }
@media (max-width: 560px) { .kpv2-check-action-reset { margin-left: 0; } }
.kpv2-check-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: rgba(20,20,26,0.7); border: 1px solid #24242a; border-radius: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.kpv2-check-hero-left { display: flex; align-items: center; gap: 10px; }
.kpv2-check-hero-icon { font-size: 24px; }
.kpv2-check-hero-title { font-size: 18px; font-weight: bold; color: #c99e4a; font-family: var(--font-display); letter-spacing: 0.04em; }
.kpv2-check-hero-desc { font-size: 14px; color: #8a7a60; margin-left: 10px; }
.kpv2-check-hero-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kpv2-check-char-slot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpv2-check-char-empty { font-size: 13px; color: #5a5540; }
.kpv2-check-import-btn { padding: 6px 14px; background: rgba(201,158,74,0.08); border: 1px solid rgba(201,158,74,0.25); border-radius: 5px; color: #c99e4a; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.kpv2-check-import-btn:hover { background: rgba(201,158,74,0.18); border-color: #c99e4a; box-shadow: 0 0 12px rgba(201,158,74,0.15); }
.kpv2-check-char-info { display: flex; align-items: center; gap: 8px; }
.kpv2-check-char-select { padding: 5px 10px; background: #14141a; border: 1px solid #2a2a2e; border-radius: 4px; color: #c99e4a; font-size: 13px; cursor: pointer; min-width: 180px; }
.kpv2-check-char-select:focus { border-color: #c99e4a; outline: none; }
.kpv2-check-char-del { background: none; border: 1px solid rgba(212,77,94,0.2); border-radius: 50%; color: #9a6060; cursor: pointer; width: 24px; height: 24px; font-size: 12px; line-height: 1; transition: all 0.2s; }
.kpv2-check-char-del:hover { border-color: #d44d5e; color: #d44d5e; }
/* --- Character tabs bar --- */
.kpv2-char-tab-del { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 11px; color: #7a5050; transition: all 0.15s; cursor: pointer; }
.kpv2-char-tab-del:hover { color: #d44d5e; background: rgba(212,77,94,0.1); }
.kpv2-char-tab-import { padding: 6px 14px; background: rgba(201,158,74,0.08); border: 1px solid rgba(201,158,74,0.25); border-radius: 5px; color: #c99e4a; cursor: pointer; font-size: 14px; transition: all 0.2s; white-space: nowrap; }
.kpv2-char-tab-import:hover { background: rgba(201,158,74,0.18); border-color: #c99e4a; box-shadow: 0 0 12px rgba(201,158,74,0.15); }
/* --- Attribute stat cards --- */
.kpv2-attr-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 16px; min-width: 64px; background: rgba(20,20,26,0.6); border: 1px solid #24242a; border-radius: 7px; color: #c0a060; font-size: 22px; font-weight: bold; font-family: var(--font-display); cursor: pointer; transition: all 0.22s; }
.kpv2-attr-btn:hover { border-color: #c99e4a; background: rgba(201,158,74,0.1); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(201,158,74,0.1); }
.kpv2-attr-btn:active { transform: scale(0.96); }
.kpv2-attr-val { line-height: 1.1; }
.kpv2-attr-label { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: #a09070; letter-spacing: 0.06em; font-weight: normal; }
.kpv2-attr-label em { font-style: normal; font-size: 14px; color: #c0a060; font-weight: normal; }
.kpv2-attr-static { color: #6a6040; cursor: default; }
.kpv2-check-quick-label { font-size: 14px; color: #8a7a60; font-family: var(--font-display); letter-spacing: 0.05em; margin-bottom: 10px; }
.kpv2-check-quick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px; }
.kpv2-check-skill-card { background: rgba(20,20,26,0.6); border: 1px solid #24242a; border-radius: 8px; padding: 10px 8px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; }
.kpv2-check-skill-card:hover { border-color: #c99e4a; background: rgba(201,158,74,0.06); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.kpv2-check-skill-card:active { transform: scale(0.96); border-color: #d44d5e; }
.kpv2-check-skill-name { display: block; font-size: 15px; color: #b8b0a0; margin-bottom: 4px; }
.kpv2-check-skill-val { display: block; font-size: 18px; font-weight: bold; color: #6a6040; font-family: var(--font-display); }
.kpv2-check-skill-val.kpv2-check-has-char { color: #c99e4a; }
/* ===== 统一折叠组件（全部技能 / 携带物品 / 人物设定 共用同一套样式） ===== */
.kpv2-fold { border: 1px solid #1e1e24; border-radius: 8px; background: rgba(20,20,26,0.4); overflow: hidden; margin-top: 8px; transition: border-color .2s; }
.kpv2-fold:hover { border-color: #26262e; }
.kpv2-fold-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; background: none; border: none; color: #b0a080; font-size: 14px; font-family: inherit; cursor: pointer; text-align: left; transition: all .2s; }
.kpv2-fold-head:hover { color: #c99e4a; background: rgba(201,158,74,0.05); }
.kpv2-fold-arrow { display: inline-block; transition: transform .3s cubic-bezier(.4,0,.2,1); font-size: 12px; color: #8a7a60; flex-shrink: 0; }
.kpv2-fold.open .kpv2-fold-arrow { transform: rotate(90deg); color: #c99e4a; }
.kpv2-fold-title { font-weight: bold; letter-spacing: 0.05em; white-space: nowrap; }
.kpv2-fold-summary { margin-left: auto; font-size: 12px; color: #6a6040; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpv2-fold-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); }
.kpv2-fold.open .kpv2-fold-body { grid-template-rows: 1fr; }
.kpv2-fold-inner { overflow: hidden; min-height: 0; padding: 0 14px; }
.kpv2-fold.open .kpv2-fold-inner { padding-bottom: 14px; }
.kpv2-fold-inner > .kpv2-check-all-grid { padding: 0 0 4px; }
.kpv2-info-sections { margin-top: 8px; }
/* 携带物品 */
.kpv2-gear-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.kpv2-gear-container-btn { padding: 6px 12px; background: rgba(201,158,74,0.08); border: 1px solid rgba(201,158,74,0.25); border-radius: 5px; color: #c99e4a; font-size: 13px; font-family: inherit; cursor: pointer; transition: all .2s; }
.kpv2-gear-container-btn:hover { background: rgba(201,158,74,0.16); border-color: #c99e4a; box-shadow: 0 0 10px rgba(201,158,74,0.12); }
.kpv2-gear-container-btn em { color: #8a7a60; font-style: normal; font-size: 12px; }
.kpv2-gear-warn { font-size: 12px; color: #d44d5e; }
.kpv2-gear-add-btn { padding: 6px 12px; background: rgba(20,20,26,0.6); border: 1px dashed rgba(201,158,74,0.35); border-radius: 5px; color: #a09070; font-size: 13px; font-family: inherit; cursor: pointer; transition: all .2s; }
.kpv2-gear-add-btn:hover { border-color: #c99e4a; color: #c99e4a; background: rgba(201,158,74,0.08); }
.kpv2-gear-bar .kpv2-gear-add-btn { margin-left: auto; }
.kpv2-gear-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.kpv2-gear-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(20,20,26,0.6); border: 1px solid #24242a; border-radius: 6px; cursor: pointer; transition: all .2s; }
.kpv2-gear-item:hover { border-color: rgba(201,158,74,0.4); background: rgba(26,26,32,0.85); transform: translateY(-1px); }
.kpv2-gear-icon { font-size: 16px; flex-shrink: 0; }
.kpv2-gear-name { font-size: 13px; color: #d0c0a0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpv2-gear-mech { font-size: 11px; color: #8a7a60; flex-shrink: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpv2-gear-del { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(212,77,94,0.25); background: rgba(180,60,70,0.08); color: #d48a90; font-size: 13px; line-height: 1; cursor: pointer; flex-shrink: 0; transition: all .2s; }
.kpv2-gear-del:hover { background: rgba(212,77,94,0.25); color: #ff9090; transform: scale(1.1); }
/* 物品快捷检定按钮（技能检定 / 武器攻击） */
.kpv2-gear-acts { display: inline-flex; gap: 5px; flex-shrink: 0; }
.kpv2-gear-act { padding: 3px 9px; background: rgba(201,158,74,0.08); border: 1px solid rgba(201,158,74,0.25); border-radius: 4px; color: #c99e4a; font-size: 11px; font-family: inherit; cursor: pointer; transition: all .2s; white-space: nowrap; }
.kpv2-gear-act:hover { background: rgba(201,158,74,0.2); border-color: #c99e4a; box-shadow: 0 0 8px rgba(201,158,74,0.15); }
.kpv2-gear-act:active { transform: scale(0.95); }
.kpv2-gear-act.atk { color: #d48a90; border-color: rgba(212,77,94,0.3); background: rgba(180,60,70,0.08); }
.kpv2-gear-act.atk:hover { background: rgba(212,77,94,0.2); border-color: #d44d5e; box-shadow: 0 0 8px rgba(212,77,94,0.15); }
/* 攻击伤害显示（结果卡内） */
.kpv2-attack-dmg { margin-top: 10px; padding: 10px 12px; background: rgba(180,60,70,0.08); border-left: 3px solid #d44d5e; border-radius: 0 6px 6px 0; font-size: 13px; color: #d0a0a0; text-align: left; line-height: 1.7; }
.kpv2-attack-dmg b { color: #ff9090; font-size: 17px; }
.kpv2-gear-empty { padding: 18px; text-align: center; color: #5a5540; font-size: 13px; grid-column: 1 / -1; }
/* 人物设定 */
.kpv2-persona-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 4px; }
.kpv2-persona-cell { background: rgba(20,20,26,0.5); border: 1px solid #202026; border-radius: 5px; padding: 7px 10px; }
.kpv2-persona-cell span { display: block; font-size: 11px; color: #6a6040; margin-bottom: 3px; }
.kpv2-persona-cell b { font-size: 13px; color: #c0a060; font-weight: normal; }
.kpv2-persona-bg-label { margin-top: 12px; font-size: 11px; color: #8a7a60; letter-spacing: 0.1em; }
.kpv2-persona-bg { margin-top: 6px; padding: 10px 12px; background: rgba(20,20,26,0.5); border-left: 2px solid rgba(201,158,74,0.3); border-radius: 0 5px 5px 0; font-size: 13px; color: #a8a095; line-height: 1.8; max-height: 200px; overflow-y: auto; }
.kpv2-persona-empty { color: #5a5540; font-style: italic; }
.kpv2-persona-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 700px) { .kpv2-gear-list { grid-template-columns: 1fr; } .kpv2-persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 通用表单弹窗 */
.kpv2-form-box { background: rgba(20,20,26,0.98); border: 1px solid rgba(201,158,74,0.25); border-radius: 12px; padding: 22px 24px; width: 460px; max-width: 92vw; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.7); animation: kpv2-check-popIn 0.3s ease-out; }
.kpv2-form-title { font-size: 16px; color: #c99e4a; font-family: var(--font-display); letter-spacing: 0.05em; margin-bottom: 6px; }
.kpv2-form-hint { font-size: 12px; color: #6a6040; margin-bottom: 14px; line-height: 1.6; }
.kpv2-form-field { display: block; margin-bottom: 12px; }
.kpv2-form-field > span { display: block; font-size: 12px; color: #8a7a60; margin-bottom: 5px; }
.kpv2-form-field input, .kpv2-form-field textarea, .kpv2-form-field select { width: 100%; padding: 8px 11px; background: #141418; border: 1px solid #24242a; border-radius: 5px; color: #d0d0c8; font-size: 13px; font-family: inherit; box-sizing: border-box; }
.kpv2-form-field textarea { resize: vertical; line-height: 1.7; }
.kpv2-form-field input:focus, .kpv2-form-field textarea:focus, .kpv2-form-field select:focus { outline: none; border-color: rgba(201,158,74,0.65); box-shadow: 0 0 0 1px rgba(201,158,74,0.2); }
.kpv2-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
/* ===== 物品选择弹窗（复用车卡物品库：分类浏览 + 点击放入背包） ===== */
.kpv2-picker-box { background: rgba(20,20,26,0.98); border: 1px solid rgba(201,158,74,0.25); border-radius: 12px; width: 720px; max-width: 94vw; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.75); animation: kpv2-check-popIn 0.3s ease-out; }
.kpv2-picker-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
.kpv2-picker-title { font-size: 16px; color: #c99e4a; font-family: var(--font-display); letter-spacing: 0.05em; }
.kpv2-picker-sub { font-size: 12px; color: #6a6040; margin-left: auto; white-space: nowrap; }
.kpv2-picker-close { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #2a2a30; background: none; color: #8a7a60; font-size: 13px; cursor: pointer; transition: all .2s; flex-shrink: 0; }
.kpv2-picker-close:hover { border-color: #d44d5e; color: #d44d5e; }
.kpv2-picker-search { margin: 0 18px 12px; padding: 9px 13px; background: #141418; border: 1px solid #24242a; border-radius: 6px; color: #d0d0c8; font-size: 13px; font-family: inherit; }
.kpv2-picker-search:focus { outline: none; border-color: rgba(201,158,74,0.65); box-shadow: 0 0 0 1px rgba(201,158,74,0.2); }
.kpv2-picker-body { flex: 1; overflow-y: auto; padding: 0 6px 6px; }
.kpv2-picker-body .eq-cat { margin: 0 12px 8px; }
.kpv2-picker-body .eq-grid { padding: 0 8px 10px; }
.kpv2-picker-body .eq-tile { cursor: pointer; }
.kpv2-picker-owned { order: 1; margin-left: auto; color: #6ac46a; font-size: 13px; font-weight: bold; flex-shrink: 0; }
.kpv2-picker-empty { padding: 40px 20px; text-align: center; color: #5a5540; font-size: 13px; }
.kpv2-picker-actions { display: flex; gap: 8px; align-items: center; padding: 12px 18px 16px; border-top: 1px solid #1e1e24; }
.kpv2-picker-actions .kpv2-check-import-confirm { margin-left: auto; }
@media (max-width: 560px) { .kpv2-picker-body .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpv2-check-all-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 0 10px 10px; }
/* --- 技能分类折叠 --- */
.kpv2-skill-cat { margin-bottom: 6px; border: 1px solid rgba(201,158,74,0.08); border-radius: 6px; background: rgba(20,20,26,0.3); overflow: hidden; transition: border-color 0.2s; }
.kpv2-skill-cat:hover { border-color: rgba(201,158,74,0.15); }
.kpv2-skill-cat[open] { border-color: rgba(201,158,74,0.12); }
.kpv2-skill-cat-custom { border-color: rgba(106,184,168,0.15) !important; }
.kpv2-skill-cat-custom:hover { border-color: rgba(106,184,168,0.3) !important; }
/* 分类标题：用**正文字体**（原来那个装饰字体 + 大字距，KP 反馈看不清），右侧带上该类技能数 */
.kpv2-skill-cat-summary { padding: 8px 12px; font-size: 14px; color: #c8bfa8; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.02em; cursor: pointer; list-style: none; outline: none; display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
.kpv2-skill-cat-summary:hover { color: #e0b860; }
.kpv2-skill-cat-count { margin-left: auto; font-size: 11.5px; font-weight: 400; color: #6f6858; background: rgba(255,255,255,0.04); border: 1px solid #2b2b32; border-radius: 8px; padding: 0 7px; }
.kpv2-skill-cat-summary::-webkit-details-marker { display: none; }
.kpv2-skill-cat-custom .kpv2-skill-cat-summary { color: #6ab8a8; }
.kpv2-skill-cat-custom .kpv2-skill-cat-summary:hover { color: #8ad8c8; }
.kpv2-skill-cat .kpv2-check-all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 3px 10px; padding: 4px 10px 8px; }
/* 技能行（v2.14.50 重做）：
   ① 技能名**不截断**（列宽够长名字，如「射击(步枪/霰弹)」；宁可少一栏也不省略）
   ② 骰子**常显**——它就是「点这行检定」的标识，不再等悬停才出现
   ③ ✎ 与主区隔开、默认隐形、**延迟 0.12s 才浮现**：手快划过一行时不会正好点到「编辑」 */
.kpv2-check-skill-row { display: flex; align-items: center; gap: 8px; padding: 6px 9px 6px 10px; cursor: pointer; border-radius: 6px; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; }
.kpv2-check-skill-row:hover { background: rgba(201,158,74,0.07); border-color: rgba(201,158,74,0.22); }
.kpv2-check-skill-row-name { font-size: 14.5px; color: #b0a898; flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.kpv2-check-skill-row:hover .kpv2-check-skill-row-name { color: #d8cfbc; }
.kpv2-check-skill-row-val { font-size: 15px; color: #8a8060; font-weight: bold; flex: none; min-width: 34px; text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.kpv2-check-skill-row-val.kpv2-check-has-char { color: #c99e4a; }
.kpv2-check-skill-row-dice { flex: none; width: 22px; text-align: center; font-size: 13px; opacity: 0.55; transition: opacity 0.15s, transform 0.15s; }
.kpv2-check-skill-row:hover .kpv2-check-skill-row-dice { opacity: 1; transform: scale(1.12); }
.kpv2-skill-edit {
    flex: none; width: 24px; height: 22px; margin-left: 4px; padding: 0;
    background: rgba(255,255,255,0.03); border: 1px solid #33333a; border-radius: 5px;
    color: #9a9184; font-size: 11px; font-family: inherit; cursor: pointer;
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s ease 0.12s, color 0.15s, border-color 0.15s;
}
.kpv2-check-skill-row:hover .kpv2-skill-edit { opacity: 1; pointer-events: auto; }
.kpv2-skill-edit:hover { border-color: #c99e4a; color: #e0c070; background: rgba(201,158,74,0.12); }
/* 搜索框 */
.kpv2-skill-search-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px 2px; }
.kpv2-skill-search { flex: 1; min-width: 0; padding: 8px 11px; background: #14141a; border: 1px solid #2a2a32; border-radius: 7px; color: #d8cdb4; font-family: inherit; font-size: 13px; }
.kpv2-skill-search:focus { outline: none; border-color: rgba(201,158,74,0.55); box-shadow: 0 0 0 2px rgba(201,158,74,0.1); }
.kpv2-skill-search-clear { flex: none; width: 30px; height: 32px; padding: 0; background: rgba(255,255,255,0.03); border: 1px solid #2f2f36; border-radius: 7px; color: #8a8272; font-family: inherit; cursor: pointer; transition: color .15s, border-color .15s; }
.kpv2-skill-search-clear:hover { color: #d8d0c0; border-color: #3f3f47; }
.kpv2-skill-nores { padding: 14px 12px; color: #7d7466; font-size: 13px; }
/* 导入弹窗 */
.kpv2-check-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 10030; display: flex; align-items: center; justify-content: center; animation: kpv2-fadeIn 0.2s ease; }
@keyframes kpv2-fadeIn { from{opacity:0} to{opacity:1} }
.kpv2-check-import-box { background: #1a1a22; border: 1px solid rgba(201,158,74,0.25); border-radius: 12px; padding: 24px; width: 90%; max-width: 600px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.kpv2-check-import-title { font-size: 18px; color: #c99e4a; font-weight: bold; margin-bottom: 6px; }
.kpv2-check-import-hint { font-size: 13px; color: #6a6040; margin-bottom: 14px; }
.kpv2-check-import-textarea { width: 100%; height: 200px; background: #0e0e14; border: 1px solid #2a2a2e; border-radius: 6px; color: #b0a090; font-size: 13px; padding: 12px; resize: vertical; font-family: monospace; }
.kpv2-check-import-textarea:focus { border-color: #c99e4a; outline: none; }
.kpv2-check-import-actions { display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end; }
.kpv2-check-import-confirm { padding: 8px 20px; background: rgba(201,158,74,0.12); border: 1px solid #c99e4a; border-radius: 5px; color: #c99e4a; cursor: pointer; font-size: 14px; transition: all 0.2s; }
.kpv2-check-import-confirm:hover { background: rgba(201,158,74,0.25); }
.kpv2-check-import-cancel { padding: 8px 20px; background: transparent; border: 1px solid #3a3a3e; border-radius: 5px; color: #888; cursor: pointer; font-size: 14px; transition: all 0.2s; }
.kpv2-check-import-cancel:hover { border-color: #666; color: #aaa; }
/* 结果浮层 */
.kpv2-check-result-card { background: rgba(20,20,26,0.98); border: 1px solid rgba(201,158,74,0.25); border-radius: 14px; padding: 28px 36px; text-align: center; min-width: 260px; box-shadow: 0 20px 60px rgba(0,0,0,0.7); animation: kpv2-check-popIn 0.35s ease-out; }
@keyframes kpv2-check-popIn { 0%{transform:scale(0.8);opacity:0} 100%{transform:scale(1);opacity:1} }
.kpv2-check-result-skill { font-size: 16px; color: #8a7a60; margin-bottom: 8px; }
.kpv2-check-result-skill em { color: #c99e4a; font-style: normal; }
.kpv2-check-hint { font-size: 12px; color: #c99e4a; background: rgba(201,158,74,0.08); border: 1px solid rgba(201,158,74,0.2); border-radius: 6px; padding: 7px 10px; margin-bottom: 10px; line-height: 1.6; }
.kpv2-san-loss { font-size: 15px; color: #d48a90; margin-top: 10px; font-weight: bold; letter-spacing: 0.05em; }
.kpv2-check-outcome { display: flex; align-items: flex-start; gap: 8px; text-align: left; margin-top: 12px; padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 1.7; }
.kpv2-check-outcome.ok { background: rgba(80,140,90,0.1); border-left: 3px solid #6a9a4e; color: #9ab89a; }
.kpv2-check-outcome.fail { background: rgba(180,60,70,0.1); border-left: 3px solid #d44d5e; color: #d0a0a0; }
.kpv2-check-outcome-icon { font-weight: bold; flex-shrink: 0; }
.kpv2-check-outcome.ok .kpv2-check-outcome-icon { color: #8ab89a; }
.kpv2-check-outcome.fail .kpv2-check-outcome-icon { color: #d48a90; }
/* 对抗检定对比布局（玩家 vs NPC） */
.kpv2-check-vs-card { min-width: 340px; }
.kpv2-check-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin-top: 6px; }
.kpv2-check-vs-side { padding: 12px 14px; border-radius: 8px; text-align: center; animation: kpv2-chaseIn 0.3s ease-out both; }
.kpv2-check-vs-side.player { background: rgba(201,158,74,0.07); border: 1px solid rgba(201,158,74,0.25); }
.kpv2-check-vs-side.npc { background: rgba(180,60,70,0.07); border: 1px solid rgba(180,60,70,0.25); animation-delay: 0.08s; }
.kpv2-check-vs-name { font-size: 14px; color: #d0c0a0; font-weight: bold; margin-bottom: 4px; }
.kpv2-check-vs-side.npc .kpv2-check-vs-name { color: #d0a0a0; }
.kpv2-check-vs-skill { font-size: 12px; color: #8a7a60; margin-bottom: 6px; }
.kpv2-check-vs-skill em { color: #c99e4a; font-style: normal; }
.kpv2-check-vs-side.npc .kpv2-check-vs-skill em { color: #d48a90; }
.kpv2-check-vs-roll { font-size: 40px; font-weight: bold; font-family: var(--font-display); color: #c0a060; line-height: 1.1; animation: kpv2-numPop 0.35s ease-out both; }
.kpv2-check-vs-side.npc .kpv2-check-vs-roll { color: #c07070; animation-delay: 0.12s; }
.kpv2-check-vs-level { font-size: 12px; color: #8a7a60; margin-top: 6px; }
.kpv2-check-vs-desc { font-size: 11px; color: #6a6040; margin-top: 4px; line-height: 1.5; }
.kpv2-check-vs-mid { display: flex; align-items: center; color: #5a5040; font-size: 13px; font-weight: bold; letter-spacing: 0.05em; }
.kpv2-check-vs-result { margin-top: 12px; font-size: 20px; font-weight: bold; font-family: var(--font-display); letter-spacing: 0.1em; animation: kpv2-chaseIn 0.3s ease-out both; }
.kpv2-check-vs-result.player { color: #c99e4a; text-shadow: 0 0 12px rgba(201,158,74,0.3); }
.kpv2-check-vs-result.npc { color: #d44d5e; text-shadow: 0 0 12px rgba(212,77,94,0.3); }
.kpv2-check-vs-result.stalemate { color: #8a8a80; }
.kpv2-check-outcome.stalemate { background: rgba(120,120,120,0.08); border-left: 3px solid #8a8a80; color: #a8a8a0; }
@media (max-width: 480px) { .kpv2-check-vs-card { min-width: 0; } .kpv2-check-vs { gap: 6px; } .kpv2-check-vs-roll { font-size: 30px; } }
.kpv2-check-result-roll { font-size: 64px; font-weight: bold; font-family: var(--font-display); color: #c0a060; line-height: 1.1; }
.kpv2-check-result-level { font-size: 22px; font-weight: bold; margin-top: 8px; }
.kpv2-check-level-desc { font-size: 12px; color: #8a7a60; margin-top: 4px; line-height: 1.6; }
.kpv2-check-thresholds { display: flex; gap: 14px; justify-content: center; margin-top: 10px; font-size: 14px; color: #8a7a60; }
/* Result level styles */
.kpv2-check-crit { border-color: #c99e4a !important; }
.kpv2-check-crit .kpv2-check-result-roll { color: #f0d860; text-shadow: 0 0 20px rgba(201,158,74,0.6); animation: kpv2-check-glow 1.2s ease-in-out infinite; }
.kpv2-check-crit .kpv2-check-result-level { color: #f0d860; text-shadow: 0 0 12px rgba(201,158,74,0.5); }
@keyframes kpv2-check-glow { 0%,100%{text-shadow:0 0 20px rgba(201,158,74,0.4)} 50%{text-shadow:0 0 40px rgba(201,158,74,0.9)} }
.kpv2-check-extreme .kpv2-check-result-roll { color: #a0d080; text-shadow: 0 0 12px rgba(160,208,128,0.3); }
.kpv2-check-extreme .kpv2-check-result-level { color: #8ab870; }
.kpv2-check-extreme { border-color: rgba(160,208,128,0.3) !important; }
.kpv2-check-hard .kpv2-check-result-roll { color: #80b0c0; text-shadow: 0 0 10px rgba(128,176,192,0.25); }
.kpv2-check-hard .kpv2-check-result-level { color: #7a9aaa; }
.kpv2-check-hard { border-color: rgba(128,176,192,0.25) !important; }
.kpv2-check-ok .kpv2-check-result-roll { color: #a0a090; }
.kpv2-check-ok .kpv2-check-result-level { color: #7a9a6a; }
.kpv2-check-fail .kpv2-check-result-roll { color: #a06060; }
.kpv2-check-fail .kpv2-check-result-level { color: #a06060; }
.kpv2-check-fumble { border-color: rgba(212,77,94,0.5) !important; }
.kpv2-check-fumble .kpv2-check-result-roll { color: #d44d5e; text-shadow: 0 0 16px rgba(212,77,94,0.5); animation: kpv2-check-fumble-pulse 0.8s ease-in-out infinite; }
.kpv2-check-fumble .kpv2-check-result-level { color: #d44d5e; text-shadow: 0 0 8px rgba(212,77,94,0.4); }
@keyframes kpv2-check-fumble-pulse { 0%,100%{text-shadow:0 0 12px rgba(212,77,94,0.3)} 50%{text-shadow:0 0 28px rgba(212,77,94,0.8)} }
@media (max-width: 700px) {
    .kpv2-check-quick-grid { grid-template-columns: repeat(3, 1fr); }
    .kpv2-check-all-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 属性栏 */
.kpv2-check-attr-bar { margin-bottom: 16px; padding: 12px 16px; background: rgba(20,20,26,0.5); border: 1px solid #1e1e24; border-radius: 8px; }
.kpv2-attr-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.kpv2-attr-derived { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(201,158,74,0.1); }
.kpv2-attr-item { font-size: 15px; color: #c0a060; }
.kpv2-attr-item em { font-style: normal; font-size: 13px; color: #8a7a60; margin-right: 3px; }
/* --- HP/SAN/Luck/MOV 可编辑控件 --- */
.kpv2-der-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.kpv2-der-item { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; background: rgba(20,20,26,0.5); border: 1px solid #1e1e24; border-radius: 7px; transition: border-color 0.2s; }
.kpv2-der-item:hover { border-color: #2a2a30; }
.kpv2-der-col { display: flex; flex-direction: column; align-items: center; min-width: 22px; }
.kpv2-der-label { font-size: 12px; color: #b0a070; line-height: 1.1; }
.kpv2-der-val { font-size: 17px; font-weight: bold; color: #c0a060; font-family: var(--font-display); line-height: 1.2; }
/* 「HP 12/12」「SAN 44/99」后面的上限：小一号、压暗，别跟当前值抢 */
.kpv2-der-val em { font-size: 11px; font-style: normal; font-weight: normal; color: #8a7a60; }
.kpv2-der-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #2a2a2e; background: rgba(201,158,74,0.05); color: #a09070; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; padding: 0; line-height: 1; user-select: none; }
.kpv2-der-btn:hover { border-color: #c99e4a; color: #c99e4a; background: rgba(201,158,74,0.12); }
.kpv2-der-btn:active { transform: scale(0.92); }/* ============================================================
   战斗标签 v2.14
   结构：顶部主按钮 → 战场沙盘（含下一位）→ 时间轴（当前展开）→ 战报
   配色：友方绿 / 敌方红 / 当前行动金色发光 —— 三套视觉语言互不混用
   ============================================================ */
.kpv2-cb-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.kpv2-cb-roundwrap { min-width: 0; }
.kpv2-cb-round { font-size: 21px; color: #c99e4a; font-family: var(--font-display); letter-spacing: 0.1em; line-height: 1.1; }
.kpv2-cb-cur { font-size: 13px; color: #8a7a60; margin-top: 3px; }
.kpv2-cb-cur b { color: #d8c49a; font-weight: normal; }
.kpv2-cb-cur em { font-style: normal; color: #6a6040; margin-left: 6px; font-size: 12px; }
.kpv2-cb-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpv2-cb-div { width: 1px; height: 22px; background: linear-gradient(180deg, transparent, rgba(201,158,74,0.3), transparent); margin: 0 2px; }
.kpv2-cb-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; font-size: 13px; font-family: inherit; cursor: pointer;
    color: #a8a096; background: rgba(255,255,255,0.03);
    border: 1px solid #2a2a30; border-radius: 7px;
    transition: all 0.18s ease;
}
.kpv2-cb-btn .ic { font-size: 14px; line-height: 1; }
.kpv2-cb-btn:hover { color: #e0d6c4; border-color: #4a4438; background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.kpv2-cb-btn:active { transform: translateY(0) scale(0.98); }
.kpv2-cb-btn.is-pc { color: #9dc9a8; border-color: rgba(90,160,110,0.28); background: rgba(90,160,110,0.07); }
.kpv2-cb-btn.is-pc:hover { color: #b8e0c2; border-color: rgba(90,160,110,0.5); background: rgba(90,160,110,0.13); }
.kpv2-cb-btn.is-mob { color: #d99aa4; border-color: rgba(180,70,90,0.28); background: rgba(180,70,90,0.07); }
.kpv2-cb-btn.is-mob:hover { color: #efb4bd; border-color: rgba(180,70,90,0.5); background: rgba(180,70,90,0.13); }
.kpv2-cb-btn.is-npc { color: #c0b088; border-color: rgba(201,158,74,0.25); background: rgba(201,158,74,0.06); }
.kpv2-cb-btn.is-npc:hover { color: #e0cf9a; border-color: rgba(201,158,74,0.5); }
.kpv2-cb-btn.is-next { color: #e8cf94; border-color: rgba(201,158,74,0.45); background: linear-gradient(180deg, rgba(201,158,74,0.18), rgba(201,158,74,0.07)); font-weight: bold; }
.kpv2-cb-btn.is-next:hover { background: linear-gradient(180deg, rgba(201,158,74,0.3), rgba(201,158,74,0.12)); border-color: #c99e4a; color: #ffe6ae; box-shadow: 0 0 16px rgba(201,158,74,0.22); }
.kpv2-cb-btn.is-soft { color: #8fa6b0; border-color: #26303a; }
.kpv2-cb-btn.is-soft:hover { color: #b0ccd8; border-color: #3a4a58; }
.kpv2-cb-btn.is-danger { color: #a06a6a; border-color: #3a2528; background: rgba(212,77,94,0.05); }
.kpv2-cb-btn.is-danger:hover { color: #d48a90; border-color: #5a3038; background: rgba(212,77,94,0.12); }

/* ---------- 沙盘 ---------- */
.kpv2-cb-boardwrap { margin-bottom: 16px; }
.kpv2-cb-boardhead {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 14px; background: rgba(255,255,255,0.02);
    border: 1px solid #24242a; border-radius: 9px; color: #b0a898;
    font-family: inherit; font-size: 13px; cursor: pointer; text-align: left;
    transition: all 0.18s ease;
}
.kpv2-cb-boardhead:hover { border-color: #3a3035; color: #c99e4a; background: rgba(201,158,74,0.04); }
.kpv2-cb-boardarrow { font-size: 11px; color: #6a6040; width: 10px; }
.kpv2-cb-boardtitle { letter-spacing: 0.04em; }
.kpv2-cb-boardmeta { margin-left: auto; font-size: 11px; color: #6a6040; }
.kpv2-cb-boardbody { margin-top: 9px; }
.kpv2-combat-board {
    position: relative; height: 430px; overflow: hidden;
    border: 1px solid #26262e; border-radius: 12px;
    background: #17171d;
    cursor: grab; touch-action: none; user-select: none;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.55);
}
.kpv2-combat-board:active { cursor: grabbing; }
.kpv2-combat-board.is-aiming { cursor: crosshair; }
.kpv2-combat-boardinner {
    position: absolute; left: 0; top: 0; width: 1600px; height: 900px;
    transform-origin: 0 0; background-repeat: no-repeat; background-size: 100% 100%;
    /* 底图由 JS 用内联样式铺（contain，保持比例）；这里的 100% 100% 只管下面这 4 层网格兜底。
       铺了底图时内联的 background-image 会整体替换掉这 4 层网格，所以两者不会打架。 */
    background-color: #1e1e26;
    background-image:
        repeating-linear-gradient(to right, rgba(201,158,74,0.15) 0 1px, transparent 1px 200px),
        repeating-linear-gradient(to bottom, rgba(201,158,74,0.15) 0 1px, transparent 1px 200px),
        repeating-linear-gradient(to right, rgba(201,158,74,0.06) 0 1px, transparent 1px 50px),
        repeating-linear-gradient(to bottom, rgba(201,158,74,0.06) 0 1px, transparent 1px 50px);
}
/* 棋子 */
.kpv2-combat-token {
    position: absolute; width: 58px; margin: -31px 0 0 -29px;
    text-align: center; cursor: grab;
    transition: transform 0.16s cubic-bezier(.34,1.4,.64,1), opacity 0.2s ease, filter 0.2s ease;
    /* 原来有 will-change: transform：棋子被提成独立合成层，按缩放前尺寸光栅化，沙盘放大就成了拉伸位图（糊），hover 才重画变清晰 */
    will-change: auto;
}
.kpv2-combat-token:hover { transform: scale(1.09); z-index: 3; }
/* 巨型（敌方）：整体放大两倍。用 transform 缩放，位移/拖动仍是同一套网格坐标，
   hover 的 1.09 倍、拖动过渡、死亡淡出都跟着一起放大，不会大小跳变 */
.kpv2-combat-token.is-giant {
    transform: scale(2);
    transform-origin: 29px 31px;      /* 围绕棋子的锚点放大，位置不跑 */
    z-index: 2;
}
.kpv2-combat-token.is-giant:hover { transform: scale(2.09); z-index: 4; }
.kpv2-combat-token.is-giant.is-dead { transform: scale(2); filter: grayscale(1); }
/* 巨型棋子的名字/血条文字也放大一点，别在 116px 的圆里显小 */
.kpv2-combat-token.is-giant .kpv2-combat-token-hp { height: 4px; }
.kpv2-combat-token-face {
    position: relative;
    width: 54px; height: 54px; margin: 0 auto; border-radius: 50%;
    border: 2px solid #4a443c; background: #17171f; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; color: #c99e4a;
    box-shadow: 0 3px 10px rgba(0,0,0,0.55);
    transition: border-color 0.18s ease, box-shadow 0.22s ease;
}
.kpv2-combat-token-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kpv2-combat-token.is-ally .kpv2-combat-token-face { border-color: #4f8a63; }
.kpv2-combat-token.is-foe .kpv2-combat-token-face { border-color: #a8465a; }
.kpv2-combat-token:hover .kpv2-combat-token-face { box-shadow: 0 0 0 2px rgba(255,255,255,0.09), 0 4px 14px rgba(0,0,0,0.6); }
/* 当前行动：金色发光 + 旋转虚线圈 + 「▶ 当前」标（不动边框色，免得跟阵营色打架） */
.kpv2-combat-token.is-cur { z-index: 4; }
.kpv2-combat-token.is-cur::before {
    content: ""; position: absolute; left: -6px; top: -7px;
    width: 70px; height: 70px; border-radius: 50%;
    border: 2px dashed rgba(201,158,74,0.55);
    animation: ctCurSpin 9s linear infinite;
    pointer-events: none;
}
.kpv2-tk-cur {
    position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    white-space: nowrap; pointer-events: none;
    font-size: 10px; font-weight: bold; letter-spacing: 0.04em;
    color: #ffe6ae; background: rgba(60,44,12,0.85);
    border: 1px solid rgba(201,158,74,0.6); border-radius: 999px;
    padding: 1px 7px; box-shadow: 0 0 12px rgba(201,158,74,0.45);
    animation: ctCurBob 1.8s ease-in-out infinite;
}
.kpv2-combat-token.is-cur .kpv2-combat-token-face {
    border-color: #e0b357 !important;
    box-shadow: 0 0 0 3px rgba(201,158,74,0.55), 0 0 26px rgba(201,158,74,0.6),
                0 0 52px rgba(201,158,74,0.26), 0 3px 10px rgba(0,0,0,0.5);
    animation: ctCurPulse 2.4s ease-in-out infinite;
}
.kpv2-combat-token.is-cur .kpv2-combat-token-name {
    color: #ffe6ae; font-weight: bold;
    text-shadow: 0 0 8px rgba(201,158,74,0.55), 0 1px 3px #000, 0 0 2px #000;
}
@keyframes ctCurSpin { to { transform: rotate(360deg); } }
@keyframes ctCurBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -3px); } }
@keyframes ctCurPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(201,158,74,0.45), 0 0 18px rgba(201,158,74,0.4), 0 3px 10px rgba(0,0,0,0.5); }
    50% { box-shadow: 0 0 0 5px rgba(201,158,74,0.8), 0 0 34px rgba(201,158,74,0.7), 0 0 60px rgba(201,158,74,0.3), 0 3px 10px rgba(0,0,0,0.5); }
}
.kpv2-combat-token.is-dead { opacity: 0.42; }
.kpv2-combat-token.is-dead .kpv2-combat-token-face { filter: grayscale(1); border-color: #43323a; }
.kpv2-combat-token.is-acted { opacity: 0.62; }
.kpv2-combat-token.is-acted.is-cur { opacity: 1; }
.kpv2-combat-token-hp { height: 5px; margin: 3px 8px 0; background: #14141a; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.6); }
.kpv2-combat-token-hp i { display: block; height: 100%; border-radius: 3px; transition: width 0.35s ease, background 0.35s ease; }
/* 棋子标签（v2.19.8）：名字**独占一行且不截断**（以前「名字 · 状态」挤一行，长一点就被 … 吃掉，
   用户完全看不出藏了什么），下面单独一行写「HP 当前/上限」+ 状态 / 标签。
   两行都用「left:50% + translateX(-50%)」相对棋子居中，所以标签可以比棋子宽，往两边溢出去也不裁。 */
.kpv2-combat-token-name, .kpv2-combat-token-hptxt {
    position: relative; left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 176px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpv2-combat-token-name {
    font-size: 10px; color: #ada48c; margin-top: 3px; line-height: 1.3;
    text-shadow: 0 1px 3px #000, 0 0 7px #000, 0 0 2px #000;
}
.kpv2-combat-token-hptxt {
    margin-top: 1px; font-size: 10px; line-height: 1.25; font-family: var(--font-num);
    letter-spacing: 0.01em; text-shadow: 0 1px 3px #000, 0 0 7px #000;
}
.kpv2-combat-token-hptxt b { font-weight: bold; }
.kpv2-combat-token-hptxt i { font-style: normal; margin-left: 5px; color: #ff9aa9; }
.kpv2-combat-token.is-dead .kpv2-combat-token-hptxt i { color: #9a8a90; }
.kpv2-tk-buff {
    position: absolute; right: -2px; bottom: -2px;
    width: 17px; height: 17px; border-radius: 50%;
    font-size: 10px; line-height: 17px; text-align: center; color: #fff;
    border: 1px solid rgba(0,0,0,0.5);
}
.kpv2-tk-buff.major { background: #b4602e; }
.kpv2-tk-buff.mad { background: #7a4fb0; }
/* 瞄准状态：可选目标呼吸红圈、友方降透明、攻击者金色、悬停放大 */
.kpv2-combat-board.is-aiming .kpv2-combat-token { cursor: crosshair; }
.kpv2-combat-board.is-aiming .kpv2-combat-token.is-foe .kpv2-combat-token-face { animation: tkBreath 1.6s ease-in-out infinite; }
.kpv2-combat-board.is-aiming .kpv2-combat-token.is-ally { opacity: 0.42; }
.kpv2-combat-board.is-aiming .kpv2-combat-token.is-from { opacity: 1; }
.kpv2-combat-board.is-aiming .kpv2-combat-token.is-from .kpv2-combat-token-face {
    box-shadow: 0 0 0 3px rgba(201,158,74,0.6), 0 0 26px rgba(201,158,74,0.5);
}
@keyframes tkBreath {
    0%, 100% { box-shadow: 0 0 0 1px rgba(200,60,80,0.35), 0 0 10px rgba(200,60,80,0.18); }
    50% { box-shadow: 0 0 0 4px rgba(220,70,95,0.5), 0 0 22px rgba(220,70,95,0.4); }
}
/* 悬停到可打目标：跳一下 + 强光（友方用橙色提醒是误伤） */
.kpv2-combat-board.is-aiming .kpv2-combat-token.is-hover { transform: scale(1.16); z-index: 5; }
/* 巨型棋子瞄准悬停：按 2 倍基准放大，别掉回 1.16（会突然缩小） */
.kpv2-combat-board.is-aiming .kpv2-combat-token.is-hover.is-giant { transform: scale(2.32); }
.kpv2-combat-board.is-aiming .kpv2-combat-token.is-hover .kpv2-combat-token-face {
    animation: none;
    box-shadow: 0 0 0 4px rgba(255,90,115,0.6), 0 0 30px rgba(255,60,90,0.6);
}
.kpv2-combat-board.is-aiming .kpv2-combat-token.is-hover.is-ally .kpv2-combat-token-face {
    box-shadow: 0 0 0 4px rgba(240,170,70,0.6), 0 0 30px rgba(240,150,50,0.55);
}
/* 已确认的攻击者 / 目标：面板打开期间一直亮着 */
.kpv2-combat-token.is-attacker .kpv2-combat-token-face {
    border-color: #c99e4a !important;
    box-shadow: 0 0 0 3px rgba(201,158,74,0.55), 0 0 22px rgba(201,158,74,0.45);
}
.kpv2-combat-token.is-target .kpv2-combat-token-face {
    border-color: #ff5a76 !important;
    box-shadow: 0 0 0 4px rgba(255,90,118,0.6), 0 0 34px rgba(255,60,90,0.6);
    animation: tkTargetPulse 1.3s ease-in-out infinite;
}
.kpv2-combat-token.is-target::after {
    content: "🎯"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    font-size: 14px; filter: drop-shadow(0 1px 3px #000);
    animation: tkMarkDrop 0.3s cubic-bezier(.34,1.5,.64,1) both;
}
@keyframes tkTargetPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255,90,118,0.45), 0 0 22px rgba(255,60,90,0.45); }
    50% { box-shadow: 0 0 0 6px rgba(255,90,118,0.7), 0 0 40px rgba(255,60,90,0.7); }
}
@keyframes tkMarkDrop { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* 瞄准层：SVG 只负责画线，不吃鼠标事件 */
.kpv2-board-aim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.kpv2-board-aim .aim-core { stroke-dasharray: 11 7; animation: aimFlow 0.55s linear infinite; }
@keyframes aimFlow { to { stroke-dashoffset: -18; } }
.kpv2-board-aim .aim-dot { animation: aimDotPulse 1s ease-in-out infinite; }
@keyframes aimDotPulse { 0%, 100% { opacity: 0.75; r: 4.5; } 50% { opacity: 1; r: 6; } }
.kpv2-board-aim .aim-ring { animation: aimRingPulse 1.2s ease-in-out infinite; }
.kpv2-board-aim .aim-ring.on-target { stroke: #ff8fa3; stroke-width: 3; }
@keyframes aimRingPulse { 0%, 100% { opacity: 0.55; stroke-width: 2.5; } 50% { opacity: 1; stroke-width: 3.4; } }
.kpv2-board-hint {
    position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
    z-index: 7; pointer-events: none; white-space: nowrap;
    padding: 7px 16px; border-radius: 999px; font-size: 12px; color: #ffd8de;
    background: rgba(60,14,24,0.82); border: 1px solid rgba(255,90,118,0.5);
    box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 22px rgba(255,60,90,0.22);
    animation: ctPopIn 0.2s ease both;
}
@keyframes ctPopIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.kpv2-board-legend {
    position: absolute; left: 12px; top: 12px; z-index: 5; pointer-events: none;
    display: flex; gap: 12px; font-size: 11px; color: #9a9284;
    background: rgba(12,12,16,0.72); border: 1px solid #26262e; border-radius: 8px; padding: 5px 10px;
}
.kpv2-board-legend span { display: inline-flex; align-items: center; gap: 5px; }
.kpv2-board-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #666; }
.kpv2-board-legend .lg-ally::before { border-color: #4f8a63; }
.kpv2-board-legend .lg-foe::before { border-color: #a8465a; }
.kpv2-board-legend .lg-cur::before { border-color: #c99e4a; box-shadow: 0 0 7px rgba(201,158,74,0.7); }
.kpv2-board-next {
    /* 让到「全屏」按钮左侧：14(右边距) + 96(全屏最小宽) + 10(间距) */
    position: absolute; right: calc(14px + 70px + 8px); bottom: 14px; z-index: 7;
    padding: 7px 15px; font-size: 12.5px; font-weight: bold; font-family: inherit; cursor: pointer;
    color: #ffe6ae; border-radius: 999px;
    border: 1px solid rgba(201,158,74,0.5);
    background: linear-gradient(180deg, rgba(201,158,74,0.24), rgba(120,90,30,0.24));
    box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 14px rgba(201,158,74,0.14);
    transition: all 0.18s ease;
    backdrop-filter: blur(3px);
}
.kpv2-board-next:hover { transform: translateY(-1px); border-color: #e0b357; box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 22px rgba(201,158,74,0.34); }
.kpv2-board-next:active { transform: translateY(0) scale(0.97); }
.kpv2-combat-board.is-aiming .kpv2-board-next { opacity: 0.2; pointer-events: none; }
.kpv2-combat-board.is-aiming .kpv2-board-legend { opacity: 0.22; }
/* 自动推进开关：开着的时候是金色 */
.kpv2-cb-autonext.is-on { color: #e0c084; border-color: rgba(201,158,74,0.42); background: rgba(201,158,74,0.1); }
.kpv2-cb-autonext.is-on:hover { border-color: #c99e4a; background: rgba(201,158,74,0.18); }
.kpv2-cb-boardtools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.kpv2-cb-mini {
    padding: 5px 11px; font-size: 12px; font-family: inherit; cursor: pointer;
    color: #8a8070; background: rgba(255,255,255,0.03);
    border: 1px solid #24242a; border-radius: 6px; transition: all 0.16s ease;
}
.kpv2-cb-mini:hover { color: #c99e4a; border-color: #4a4038; background: rgba(201,158,74,0.07); }
.kpv2-cb-mini:disabled { opacity: .38; cursor: default; color: #6a6458; border-color: #22222a; background: transparent; }
.kpv2-cb-mini:disabled:hover { color: #6a6458; border-color: #22222a; background: transparent; }
.kpv2-cb-minihint { margin-left: auto; font-size: 11px; color: #4e4838; }
.kpv2-ct-empty { text-align: center; padding: 34px 20px; color: #6a6040; font-size: 14px; }
.kpv2-ct-empty span { display: block; font-size: 12px; color: #4a4030; margin-top: 7px; }

/* ---------- 时间轴 ---------- */
.kpv2-ct-wrap { margin-bottom: 10px; }
/* 时间轴（v2.14.59 横向 + 轴线）：所有人「站」在**同一条金色水平轴线**上，节点落在线上。
   当前行动的人是一枚横向小卡（头像 + 名字 + 身份 + 血量，版式参考「选人标签」，走金色系），
   待行动的人是**正方形小方块**（只有头像 + 血量），一屏能排下更多人。
   人多只横向滚，整条高度固定，不把战斗页往下撑。
   卡上不放动作按钮——攻击 / 扣血 / 急救都在点开后的血量浮窗里。 */
.kpv2-ct-strip { overflow-x: auto; overflow-y: hidden; padding: 2px 2px 3px; }
.kpv2-ct-strip::-webkit-scrollbar { height: 7px; }
.kpv2-ct-strip::-webkit-scrollbar-thumb { background: #2f2f36; border-radius: 4px; }
/* 轴线在这一层：宽度跟着内容走，人少也要铺满可视区；padding-bottom 给节点留位置 */
.kpv2-ct-track {
    position: relative; display: flex; align-items: flex-end; gap: 8px;
    width: max-content; min-width: 100%; padding: 4px 4px 18px;
}
.kpv2-ct-track::before {
    content: ""; position: absolute; left: 4px; right: 4px; bottom: 8px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(201,158,74,0.4), rgba(201,158,74,0.18) 55%, rgba(201,158,74,0.05));
}
.kpv2-ct-row { position: relative; flex: none; cursor: pointer;
    transition: transform .16s ease, border-color .18s ease, background .18s ease, box-shadow .22s ease; }
/* 每个人在轴线上的节点（bottom 值配合 .kpv2-ct-track 的 padding-bottom: 18px 压在线上） */
.kpv2-ct-row::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -14px;
    width: 10px; height: 10px; border-radius: 50%; background: #14141a; border: 2px solid #45454f;
}
/* 轴线上的节点按阵营上色：一眼看出谁是自己人 */
.kpv2-ct-row.is-ally::after { border-color: #4f8a63; }
.kpv2-ct-row.is-foe::after { border-color: #a8465a; }
.kpv2-ct-row.is-acted { opacity: 0.55; }
.kpv2-ct-row.is-dead { opacity: 0.5; }

/* ---- 待行动：正方形小方块，只有头像 + 血量（v2.14.59） ---- */
.kpv2-ct-row.is-mini { display: block; }
.kpv2-ct-row.is-mini:hover { transform: translateY(-2px); }
.kpv2-ct-sq {
    position: relative; width: 62px; height: 62px; border-radius: 10px; overflow: hidden;
    background: #141418; border: 1px solid #33333c; transition: border-color .2s;
}
.kpv2-ct-row.is-mini.is-ally .kpv2-ct-sq { border-color: rgba(79,138,99,0.6); }
.kpv2-ct-row.is-mini.is-foe .kpv2-ct-sq { border-color: rgba(168,70,90,0.6); }
.kpv2-ct-row.is-mini:hover .kpv2-ct-sq { border-color: rgba(201,158,74,0.7); }
.kpv2-ct-sq-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #6a5c40; }
.kpv2-ct-sq-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.kpv2-ct-sq-hp {
    position: absolute; left: 0; right: 0; bottom: 0; text-align: center; color: #c8bda6;
    font-size: 11px; line-height: 1.1; padding: 10px 0 3px;
    background: linear-gradient(180deg, rgba(8,8,10,0), rgba(8,8,10,0.9));
    font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.kpv2-ct-sq-hp b { font-weight: bold; }
.kpv2-ct-sq-hp small { color: #a89e8c; font-size: 10px; }
.kpv2-ct-row.is-mini .kpv2-ct-flag { position: absolute; top: 2px; right: 2px; z-index: 2;
    font-size: 9.5px; padding: 1px 4px; }
.kpv2-ct-row.is-dead .kpv2-ct-sq { border-color: rgba(120,60,70,0.6); }
.kpv2-ct-row.is-dead .kpv2-ct-sq-face { filter: grayscale(1); }

/* ---- 当前行动：一枚横向小卡（版式参考「选人标签」，配色走金色系） ---- */
.kpv2-ct-row.is-cur {
    display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px;
    width: 228px; height: 64px; padding: 0 12px 0 70px; border-radius: 10px;
    border: 1px solid rgba(201,158,74,0.55);
    background: linear-gradient(90deg, rgba(201,158,74,0.1), rgba(20,20,26,0.94) 62%);
    box-shadow: 0 0 22px rgba(201,158,74,0.16), inset 0 1px 0 rgba(201,158,74,0.2);
    animation: ctCurIn .28s cubic-bezier(.34,1.3,.64,1) both, ctCurGlow 2.6s ease-in-out .3s infinite;
}
.kpv2-ct-row.is-cur:hover { border-color: rgba(224,179,87,0.8); }
.kpv2-ct-row.is-cur::after {
    bottom: -16px; width: 13px; height: 13px; background: #e0b357; border-color: #ffe6ae;
    box-shadow: 0 0 0 4px rgba(201,158,74,0.16), 0 0 14px rgba(201,158,74,0.85);
}
/* 头像贴左、右侧渐隐融进卡片（和「选人标签」同一手法）；自身 overflow 才裁圆角，
   卡片本身不裁 —— 否则轴线上那颗节点会被裁掉 */
.kpv2-ct-face { position: absolute; left: 0; top: 0; bottom: 0; width: 64px; overflow: hidden;
    border-radius: 9px 0 0 9px; background: rgba(20,20,28,0.55);
    display: flex; align-items: center; justify-content: center; font-size: 24px; color: #c99e4a; }
.kpv2-ct-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
    -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%);
    mask-image: linear-gradient(to right, #000 62%, transparent 100%); }
.kpv2-ct-info { min-width: 0; }
.kpv2-ct-name { display: flex; align-items: baseline; gap: 6px; min-width: 0;
    font-size: 15px; font-weight: bold; color: #e6dcc4; }
.kpv2-ct-mark { flex: none; font-style: normal; font-size: 9px; color: #e0b357; }
/* 名字要给异常字让位：宁可省略号收尾，也不许被挤成一字一行 */
.kpv2-ct-nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpv2-ct-role { font-size: 11px; color: #8a7a60; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpv2-ct-hp { text-align: right; white-space: nowrap; font-size: 15px; color: #c8bda6;
    font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.kpv2-ct-hp i { font-style: normal; font-size: 11px; opacity: .65; }
.kpv2-ct-hp b { font-weight: bold; }
.kpv2-ct-hp small { color: #8a8070; font-size: 11px; }
.kpv2-ct-flag { font-size: 10px; line-height: 1; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
    color: #e09155; background: rgba(210,120,50,0.16); border: 1px solid rgba(210,120,50,0.3); flex: none; }
.kpv2-ct-row.is-dead .kpv2-ct-flag { color: #e8727f; background: rgba(212,77,94,0.18); border-color: rgba(212,77,94,0.35); }
.kpv2-ct-row.is-dead .kpv2-ct-face { filter: grayscale(1); }
.kpv2-ct-row.is-dead .kpv2-ct-name { text-decoration: line-through; }
@keyframes ctCurIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ctCurGlow {
    0%, 100% { box-shadow: 0 0 22px rgba(201,158,74,0.14), inset 0 1px 0 rgba(201,158,74,0.18); }
    50% { box-shadow: 0 0 38px rgba(201,158,74,0.32), inset 0 1px 0 rgba(201,158,74,0.28); }
}
.kpv2-ct-bar { position: relative; height: 7px; background: #14141a; border-radius: 4px; overflow: visible; margin-top: 7px; box-shadow: 0 0 0 1px rgba(0,0,0,0.5); }
.kpv2-ct-bar.big { height: 9px; }
.kpv2-ct-bar i { display: block; height: 100%; border-radius: 4px; transition: width 0.35s ease, background 0.35s ease; }
.kpv2-ct-bar u {
    position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px;
    background: rgba(255,90,110,0.85); box-shadow: 0 0 6px rgba(255,60,90,0.7);
}
.kpv2-ct-tag {
    font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap;
    background: rgba(140,140,150,0.12); color: #a0a0ae; border: 1px solid rgba(140,140,150,0.2);
}
.kpv2-ct-st-healthy { background: rgba(90,160,110,0.13); color: #8fc98a; border-color: rgba(90,160,110,0.28); }
.kpv2-ct-st-wounded { background: rgba(201,158,74,0.13); color: #d4b26a; border-color: rgba(201,158,74,0.28); }
.kpv2-ct-st-major { background: rgba(210,120,50,0.16); color: #e09155; border-color: rgba(210,120,50,0.32); }
.kpv2-ct-st-dying { background: rgba(212,77,94,0.18); color: #e8727f; border-color: rgba(212,77,94,0.35); animation: ctTagPulse 1.6s ease-in-out infinite; }
.kpv2-ct-st-unconscious { background: rgba(120,120,145,0.16); color: #9e9eb6; border-color: rgba(120,120,145,0.3); }
.kpv2-ct-st-dead { background: rgba(70,36,44,0.4); color: #8a5560; border-color: rgba(120,60,70,0.4); }
.kpv2-ct-st-insane { background: rgba(130,80,190,0.16); color: #b79ae0; border-color: rgba(130,80,190,0.32); animation: ctTagPulse 1.6s ease-in-out infinite; }
.kpv2-ct-st-prone, .kpv2-ct-st-held { background: rgba(201,158,74,0.12); color: #c99e4a; border-color: rgba(201,158,74,0.24); }
@keyframes ctTagPulse { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
/* 时间轴下面的图例（v2.14.56 起只解释颜色，不放动作按钮，也不写说明文案） */
.kpv2-ct-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; padding: 7px 12px; font-size: 11px; color: #7a7160; background: rgba(255,255,255,0.015); border: 1px dashed #26262c; border-radius: 8px; }
.kpv2-ct-legend span { display: inline-flex; align-items: center; gap: 5px; }
.kpv2-ct-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #666; flex-shrink: 0; }
.kpv2-ct-lg-ally::before { border-color: #4f8a63 !important; }
.kpv2-ct-lg-foe::before { border-color: #a8465a !important; }
.kpv2-ct-lg-cur::before { border-color: #c99e4a !important; box-shadow: 0 0 7px rgba(201,158,74,0.7); }
.kpv2-ct-lg-acted::before { border-color: #3a3a42 !important; background: #3a3a42; }
/* 窄屏：当前那张卡收窄一档，方块也小一号，免得一屏只剩两三个人 */
@media (max-width: 768px) {
    .kpv2-ct-row.is-cur { width: 196px; height: 58px; padding: 0 10px 0 64px; }
    .kpv2-ct-face { width: 58px; }
    .kpv2-ct-sq { width: 54px; height: 54px; }
    .kpv2-ct-track { gap: 7px; }
}

/* 坐标标尺（v2.14.66）：画在世界层里，跟着地图一起平移缩放 —— 玩家能说「我在 D5」 */
.kpv2-bd-ruler { position: absolute; inset: 0; pointer-events: none; }
.kpv2-bd-col, .kpv2-bd-row {
    position: absolute; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-num); font-size: 20px; color: rgba(224,179,87,0.5);
    text-shadow: 0 1px 3px rgba(0,0,0,0.9); pointer-events: none;
}
.kpv2-bd-col { top: 0; height: 30px; border-bottom: 1px solid rgba(201,158,74,0.14); }
.kpv2-bd-row { left: 0; width: 34px; border-right: 1px solid rgba(201,158,74,0.14); }
/* 拖动时跟着光标的距离浮窗 */
.kpv2-bd-dist {
    position: absolute; z-index: 8; pointer-events: none;
    padding: 5px 10px; border-radius: 7px; white-space: nowrap;
    background: rgba(12,12,16,0.92); border: 1px solid rgba(201,158,74,0.45);
    color: #e6dcc4; font-size: 12.5px; font-family: var(--font-num);
    box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
.kpv2-bd-dist b { color: #e0b357; font-weight: bold; margin-right: 4px; }
.kpv2-bd-dist i { font-style: normal; color: #8a8070; margin-left: 4px; }
.kpv2-bd-dist i b.over { color: #e8727f; }
.kpv2-bd-dist em { font-style: normal; color: #6a9ec8; margin-left: 4px; }

/* KP 画笔（v2.14.67）：画在世界层里、**在棋子下层**，平移缩放自动跟随 */
.kpv2-bd-ink { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; pointer-events: none; overflow: visible; }
.kpv2-combat-board.is-ink-draw { cursor: crosshair; }
.kpv2-combat-board.is-ink-draw .kpv2-combat-token { cursor: crosshair; }
.kpv2-combat-board.is-ink-erase { cursor: cell; }
.kpv2-combat-board.is-ink-erase .kpv2-combat-token { cursor: cell; }
.kpv2-ink-colors { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px; }
.kpv2-ink-sw {
    width: 16px; height: 16px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.18); transition: transform .15s, box-shadow .15s;
}
.kpv2-ink-sw:hover { transform: scale(1.12); }
.kpv2-ink-sw.is-on { box-shadow: 0 0 0 2px rgba(201,158,74,0.75); border-color: #ffe6ae; }
.kpv2-ink-tool.is-on { border-color: rgba(201,158,74,0.65); background: rgba(201,158,74,0.12); color: #e0b357; }

/* ---------- 沙盘：模式条与探索模式（v2.15.0） ---------- */
.kpv2-bd-modebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 9px 12px;
    background: rgba(255,255,255,0.02); border: 1px solid #24242a; border-radius: 9px; }
.kpv2-bd-mode { padding: 6px 14px; border-radius: 7px; border: 1px solid #2c2c34; background: none; color: #9a9186;
    font-family: inherit; font-size: 13px; cursor: pointer; transition: all .18s; }
.kpv2-bd-mode.is-on { border-color: rgba(201,158,74,0.55); background: rgba(201,158,74,0.1); color: #e0b357; }
.kpv2-bd-mode.is-go { border-color: rgba(212,77,94,0.5); color: #e8727f; }
.kpv2-bd-mode.is-go:hover { background: rgba(212,77,94,0.12); transform: translateY(-1px); }
.kpv2-bd-hint { font-size: 12px; color: #6a6040; margin-left: auto; }
.kpv2-bd-mode.is-proj { border-color: #2f3a44; color: #9ec4d8; }
.kpv2-bd-mode.is-proj:hover { border-color: rgba(158,196,216,0.55); color: #cfe6f2; }
.kpv2-bd-hint.is-proj { color: #6ac46a; margin-left: 0; }

.kpv2-exp-scenetabs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.kpv2-exp-scene { padding: 6px 12px; border-radius: 999px; border: 1px solid #2c2c34; background: rgba(20,20,26,0.7);
    color: #b0a898; font-family: inherit; font-size: 13px; cursor: pointer; transition: all .18s; }
.kpv2-exp-scene em { font-style: normal; margin-left: 6px; font-size: 11px; color: #7a7160; }
.kpv2-exp-scene:hover { border-color: rgba(201,158,74,0.35); color: #ded2b8; }
.kpv2-exp-scene.is-on { border-color: #c99e4a; background: rgba(201,158,74,0.12); color: #ffd080; }
.kpv2-exp-scene.is-add { border-style: dashed; color: #8a7a60; }
.kpv2-exp-sceneacts { display: inline-flex; gap: 5px; margin-left: 6px; }
.kpv2-exp-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.kpv2-exp-marks { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 8px;
    background: rgba(255,255,255,0.02); border: 1px solid #24242a; }
.kpv2-exp-mark { width: 26px; height: 26px; border-radius: 7px; border: 1px solid #33333c; background: rgba(16,16,22,0.8);
    font-size: 14px; line-height: 1; cursor: pointer; transition: all .16s; }
.kpv2-exp-mark:hover { transform: translateY(-1px); }
.kpv2-exp-mark.is-on { box-shadow: 0 0 0 2px rgba(201,158,74,0.5); }
.kpv2-cb-mini.is-on { border-color: rgba(201,158,74,0.6); background: rgba(201,158,74,0.12); color: #e0b357; }

.kpv2-exp-checkbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.kpv2-exp-quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpv2-exp-skill { padding: 5px 10px; border-radius: 6px; border: 1px solid #2c2c34; background: rgba(20,20,26,0.7);
    color: #c8bfa8; font-family: inherit; font-size: 12.5px; cursor: pointer; }
.kpv2-exp-skill em { font-style: normal; margin-left: 6px; color: #c99e4a; font-family: var(--font-num); }
.kpv2-exp-skill:hover { border-color: rgba(201,158,74,0.4); }
.kpv2-exp-skillinput { padding: 5px 10px; border-radius: 6px; border: 1px solid #24242a; background: #141418;
    color: #d0d0c8; font-family: inherit; font-size: 12.5px; width: 150px; }
.kpv2-exp-skillinput:focus { outline: none; border-color: rgba(201,158,74,0.6); }
.kpv2-exp-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; color: #8a7a60; }
.kpv2-exp-notelabel { color: #6a6040; }
.kpv2-exp-noteinput { flex: 1; min-width: 180px; padding: 6px 10px; border-radius: 6px; border: 1px solid #24242a;
    background: #141418; color: #d0d0c8; font-family: inherit; font-size: 12.5px; }
.kpv2-exp-noteinput:focus { outline: none; border-color: rgba(201,158,74,0.6); }
.kpv2-exp-caption { display: inline-flex; align-items: center; gap: 5px; }
.kpv2-exp-notehint { margin-left: auto; color: #5a5540; }
.kpv2-exp-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #b0a898; margin: 8px 0; }
.kpv2-exp-actrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.kpv2-exp-in { padding: 6px 9px; border-radius: 6px; border: 1px solid #24242a; background: #141418;
    color: #d0d0c8; font-family: inherit; font-size: 13px; min-width: 120px; }
.kpv2-exp-ta { width: 100%; min-height: 70px; padding: 8px 10px; border-radius: 6px; border: 1px solid #24242a;
    background: #141418; color: #d0d0c8; font-family: inherit; font-size: 13px; resize: vertical; }

/* 探索棋子（v2.16.0）：**和战斗棋子共用一套样式**（.kpv2-combat-token），
   这里只放两者不同的那几处：标记圆点、隐藏态、「在战斗名单里」的小剑。
   ⚠️ 旧版那套 .kpv2-exp-token / -face / -hp / -name 已删除，别再往回调。 */
.kpv2-exp-infight { position: absolute; top: 1px; right: 1px; width: 15px; height: 15px; border-radius: 50%;
    background: rgba(168,70,90,0.92); color: #ffe6c0; font-size: 9px; font-style: normal; line-height: 15px;
    text-align: center; box-shadow: 0 0 0 1px rgba(0,0,0,0.5); z-index: 2; }
.kpv2-combat-token.is-hidden { opacity: 0.42; }
.kpv2-combat-token.is-hidden .kpv2-combat-token-face { border-style: dashed; }
.kpv2-combat-token.is-mark { width: 40px; margin: -20px 0 0 -20px; }
.kpv2-combat-token.is-mark .kpv2-exp-mark-dot { margin: 0 auto; }
.kpv2-combat-token.is-mark.is-hidden .kpv2-exp-mark-dot { border-style: dashed; opacity: 0.6; }
.kpv2-exp-mark-dot { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    margin: 0 auto; border-radius: 50%; border: 2px solid #666; background: rgba(12,12,16,0.85);
    font-size: 15px; line-height: 1; font-family: var(--font-num); }
/* 探索棋子的名字比战斗稍亮一点：探索时它们是「场景里的谁」，不是排队等行动的人 */
.kpv2-combat-token.is-exp .kpv2-combat-token-name { color: #ded2b8; font-size: 10.5px; }
.kpv2-combat-token.is-exp.is-dead .kpv2-combat-token-name { text-decoration: line-through; }
.kpv2-exp-label { position: absolute; transform: translate(-50%, -50%); max-width: 240px; padding: 4px 9px;
    border-radius: 7px; background: rgba(12,12,16,0.72); border: 1px solid rgba(201,158,74,0.28);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; text-shadow: 0 1px 4px rgba(0,0,0,0.85); }
.kpv2-exp-label.is-hidden { opacity: 0.45; border-style: dashed; }
.kpv2-combat-board.is-placing { cursor: crosshair; }

/* ---------- 沙盘版式（v2.16.0）：左边一个区名，右边内容，一行一件事 ---------- */
.kpv2-bd-line { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kpv2-bd-lab { flex: 0 0 auto; min-width: 34px; font-size: 11.5px; color: #7a7160; letter-spacing: 0.1em;
    text-align: right; }
.kpv2-bd-linebody { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.kpv2-bd-toollab { font-size: 11px; color: #6a6040; letter-spacing: 0.08em; margin: 0 2px 0 4px; }
.kpv2-bd-line .kpv2-filter-row { margin-top: 0; justify-content: flex-start; }
.kpv2-cb-boardhint { font-size: 11.5px; color: #5a5540; margin-top: 6px; }

/* ---------- 沙盘左上角的场景切换器（v2.18.0）----------
   画在棋盘内（和战斗图例同一个位置概念），最多 4 个场景，所以做成小 chip 一行。
   容器本身不吃鼠标事件（不然拖不动棋盘），只有 chip 自己收事件。 */
.kpv2-bd-scenes { position: absolute; left: 12px; top: 12px; z-index: 6; pointer-events: none;
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap; max-width: calc(100% - 24px);
    padding: 5px 7px; border-radius: 9px;
    background: rgba(12,12,16,0.78); border: 1px solid #2a2a32; box-shadow: 0 4px 16px rgba(0,0,0,0.45); }
.kpv2-bd-scene { pointer-events: auto; height: 26px; padding: 0 10px; border-radius: 6px; cursor: pointer;
    font-family: inherit; font-size: 12px; white-space: nowrap;
    color: #a8a08e; background: rgba(255,255,255,0.03); border: 1px solid #2c2c34; transition: all .15s; }
.kpv2-bd-scene em { font-style: normal; margin-left: 5px; font-size: 10.5px; color: #7a7160; font-family: var(--font-num); }
.kpv2-bd-scene:hover { color: #ded2b8; border-color: rgba(201,158,74,0.4); }
.kpv2-bd-scene.is-on { color: #ffd080; border-color: rgba(201,158,74,0.7); background: rgba(201,158,74,0.14); }
.kpv2-bd-scene.is-on em { color: #c99e4a; }
.kpv2-bd-scene.is-add { color: #8a7a60; border-style: dashed; padding: 0 8px; }
.kpv2-bd-sceneacts { pointer-events: auto; display: inline-flex; gap: 3px; margin-left: 3px;
    padding-left: 5px; border-left: 1px solid #2a2a32; }
.kpv2-bd-scenebtn { width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 12px;
    color: #8a7a60; background: transparent; border: 1px solid #2a2a32; transition: all .15s; }
.kpv2-bd-scenebtn:hover { color: #ded2b8; border-color: rgba(201,158,74,0.45); background: rgba(201,158,74,0.1); }

/* ---------- 上传底图时的网格兜底（v2.17.0）----------
   预设底图是内联 SVG、自带网格线；上传的底图（maps/）没有，铺上就看不见格子了。
   所以只在 maps/ 底图上叠这一层网格（和 .kpv2-combat-boardinner 的兜底网格同参数）。 */
.kpv2-bd-grid { position: absolute; inset: 0; pointer-events: none;
    background-image:
        repeating-linear-gradient(to right, rgba(201,158,74,0.20) 0 1px, transparent 1px 200px),
        repeating-linear-gradient(to bottom, rgba(201,158,74,0.20) 0 1px, transparent 1px 200px),
        repeating-linear-gradient(to right, rgba(201,158,74,0.10) 0 1px, transparent 1px 50px),
        repeating-linear-gradient(to bottom, rgba(201,158,74,0.10) 0 1px, transparent 1px 50px); }

/* ---------- 棋盘下的浮窗（v2.17.0 重做 / v2.17.2 统一按钮与行距） ----------
   四个浮窗（调查员 / 标记 / NPC·怪物 / 标注）共用同一套：.kpv2-pop 外壳 + .kpv2-prow 行 +
   .kpv2-pact 操作行 + .kpv2-pbtn 按钮。**按钮只有一种尺寸**，只有颜色分主/次/危险。
   背景与文字色都写死，不依赖继承 —— 免得在别的主题/反色环境下变成浅色底黑字。 */
.kpv2-pop { display: flex; flex-direction: column; gap: 12px; width: 400px; max-width: 92vw;
    background: linear-gradient(180deg, #1c1c23, #16161c); color: #ded2b8;
    border: 1px solid #2e2e36; border-radius: 12px; padding: 20px 22px 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6); }
.kpv2-pop, .kpv2-pop * { box-sizing: border-box; }
.kpv2-pop-title { font-family: var(--font-display); font-size: 16px; color: #e6dcc4; letter-spacing: 0.04em;
    display: flex; align-items: baseline; gap: 8px; padding: 0 0 10px 0; border-bottom: 1px solid #2a2a32;
    position: relative; }
/* 原来这里有一条 3×14 的黄色装饰竖线（用户问「这个黄色竖线是什么」）——去掉，留白给标题 */
.kpv2-pop-title::before { display: none; }
/* 标题可能被右上角按钮挤到裁切：包一层 span，超长用省略号，名字字号 17px */
.kpv2-pop-title > .kpv2-pop-title-t {
    flex: 1 1 auto; min-width: 0; font-size: 17px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpv2-pop-title-acts .kpv2-pcacts { flex: 0 0 auto; }
.kpv2-pop-title em { font-style: normal; font-size: 11.5px; color: #8a7a60; letter-spacing: 0.08em; }
.kpv2-pop-stats { display: flex; gap: 14px; font-size: 12.5px; color: #9a9284; font-family: var(--font-num); }
.kpv2-pop-stats b { color: #e0c084; font-size: 14px; }
.kpv2-pop-sep { color: #6a6040; }
.kpv2-pop-hint { font-size: 11.5px; color: #5a5540; text-align: center; padding-top: 2px; }
.kpv2-pop-empty { font-size: 12.5px; color: #6a6040; padding: 14px 0; text-align: center; }
.kpv2-pop-tip { font-size: 11px; color: #6a6040; margin-left: 6px; }
/* ---------- 调查员浮窗（v2.19.0 / 头部与属性 v2.19.3）：普通信息布局，不用「选人卡片」那套 ---------- */
#expPcBox { width: 580px; max-width: 94vw; max-height: 88vh; overflow-y: auto; }
.kpv2-pchead { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid #2a2a32; }
.kpv2-pcav { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: #14141a;
    border: 1px solid #2e2e36; display: flex; align-items: center; justify-content: center; }
.kpv2-pcav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kpv2-pcav .ph { font-size: 34px; color: #4a4030; }
.kpv2-pcinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.kpv2-pcinfo .nm { font-size: 20px; color: #e6dcc4; font-family: var(--font-display); letter-spacing: 0.03em;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kpv2-pcinfo .nm em { font-style: normal; font-size: 12.5px; color: #8a7a60; }
/* ⚠️ 这一行以前没给 em 定样式，于是 HP/SAN/MP/MOV 用**斜体**渲染 ——
   --font-num 里的 Bahnschrift 是窄体、又没有真斜体，浏览器倾斜出来的字比它的字宽还宽，
   结果标签就和数字叠在一起（用户截图报的「HP 那些字符重叠」）。
   现在改成 inline-flex + gap 排布：间距由布局给，不再看字体脸色。 */
.kpv2-pcinfo .st { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #9a9284; font-family: var(--font-num); }
.kpv2-pcinfo .st span { display: inline-flex; align-items: baseline; }
.kpv2-pcinfo .st em { font-style: normal; font-size: 11.5px; letter-spacing: 0.08em; color: #8a7a60; margin-right: 5px; }
.kpv2-pcinfo .st b { font-size: 16px; }
.kpv2-pcinfo .st .hp b { color: #e89090; }
.kpv2-pcinfo .st .san b { color: #9cc090; }
.kpv2-pcinfo .st .mp b { color: #9ab0c8; }
.kpv2-pcinfo .st .mov b { color: #e0c084; }
.kpv2-pcacts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.kpv2-pcacts .kpv2-pbtn { height: 30px; padding: 0 12px; font-size: 12px; }
.kpv2-pcpop-attrs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.kpv2-pcattr { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; cursor: pointer;
    padding: 6px 9px; border-radius: 7px; font-family: inherit; font-size: 12px; color: #a8a08e;
    background: rgba(255,255,255,0.03); border: 1px solid #26262e; transition: all .15s; }
.kpv2-pcattr em { font-style: normal; font-size: 13px; color: #ded2b8; font-family: var(--font-num); font-weight: bold; }
.kpv2-pcattr:hover { color: #ffd080; border-color: rgba(201,158,74,0.5); background: rgba(201,158,74,0.12); }
.kpv2-pcattr:hover em { color: #ffd080; }
.kpv2-pcpop-sec { display: flex; flex-direction: column; gap: 8px; }
.kpv2-pcpop-seclab { display: flex; align-items: center; font-size: 11.5px; color: #8a7a60; letter-spacing: 0.08em; }
.kpv2-pcpop-more { margin-left: auto; height: 24px; padding: 0 10px; border-radius: 6px; cursor: pointer;
    font-family: inherit; font-size: 11.5px; color: #8a7a60; background: transparent; border: 1px solid #2a2a32; }
.kpv2-pcpop-more:hover, .kpv2-pcpop-more.is-on { color: #e0b357; border-color: rgba(201,158,74,0.5); background: rgba(201,158,74,0.1); }
.kpv2-pcpop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kpv2-pcpop-morebox { display: flex; flex-direction: column; gap: 8px; }
/* 「其他技能」下拉展开（v2.18.0）：常用技能直接点，剩下的在这里筛 */
.kpv2-exp-skill.is-more.is-on { border-color: rgba(201,158,74,0.6); background: rgba(201,158,74,0.14); color: #ffd080; }
.kpv2-exp-skillmore { margin-top: 8px; padding: 10px 12px; border-radius: 10px;
    background: rgba(16,16,22,0.72); border: 1px solid #26262e; }
.kpv2-exp-morehead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
    font-size: 12px; color: #8a7a60; }
.kpv2-exp-morefind { margin-left: auto; width: 180px; padding: 5px 8px; border-radius: 6px;
    background: #14141a; border: 1px solid #2a2a32; color: #d0c8b8; font-family: inherit; font-size: 12px; }
.kpv2-exp-morefind:focus { border-color: #5a4530; outline: none; }
.kpv2-exp-morelist { max-height: 168px; }
/* 操作行：主按钮靠右，危险按钮靠左（两者尺寸完全一致） */
.kpv2-pact { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.kpv2-pact .is-primary, .kpv2-pact .kpv2-pbtn:last-child { margin-left: auto; }
.kpv2-pact .kpv2-pbtn:first-child:not(.is-primary) { margin-left: 0; }
.kpv2-pbtn { height: 34px; padding: 0 18px; border-radius: 8px; font-size: 13px; font-family: inherit;
    cursor: pointer; white-space: nowrap; transition: all .16s;
    color: #a8a08e; background: rgba(255,255,255,0.04); border: 1px solid #2c2c34; }
.kpv2-pbtn:hover { color: #ded2b8; border-color: #4a4438; background: rgba(255,255,255,0.08); }
.kpv2-pbtn.is-primary { color: #ffd080; border-color: rgba(201,158,74,0.55);
    background: linear-gradient(180deg, rgba(201,158,74,0.22), rgba(201,158,74,0.08)); }
.kpv2-pbtn.is-primary:hover { border-color: #e0b357; background: linear-gradient(180deg, rgba(201,158,74,0.32), rgba(201,158,74,0.14)); }
.kpv2-pbtn.is-danger { color: #e8727f; border-color: rgba(212,77,94,0.42); background: rgba(212,77,94,0.08); }
.kpv2-pbtn.is-danger:hover { border-color: #d44d5e; background: rgba(212,77,94,0.18); }
.kpv2-pop .kpv2-cb-field { display: flex; align-items: center; gap: 8px; }
.kpv2-pop .kpv2-cb-flabel { width: 34px; }
.kpv2-pop .kpv2-exp-ta { width: 100%; min-height: 66px; padding: 9px 11px; border-radius: 8px;
    background: #111116; border: 1px solid #2a2a32; color: #d8d0c0; font-family: inherit; font-size: 13px;
    line-height: 1.6; resize: vertical; }
.kpv2-pop .kpv2-exp-ta:focus { border-color: #5a4530; outline: none; }
.kpv2-pop .kpv2-exp-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #a8a08e; }
.kpv2-exp-in.is-num { width: 76px; text-align: center; }
.kpv2-cb-mini.is-danger { border-color: rgba(212,77,94,0.45); color: #e8727f; }
.kpv2-cb-mini.is-danger:hover { background: rgba(212,77,94,0.14); }
.kpv2-cb-mini.is-accent { border-color: rgba(201,158,74,0.45); color: #e0b357; }
.kpv2-cb-mini.is-accent:hover { background: rgba(201,158,74,0.14); }
/* 没有内容可清的按钮淡一点（仍然可点，点了会说明） */
.kpv2-cb-mini.is-off { opacity: 0.45; }
/* 技能列表：两列紧凑按钮，点一下就检定 */
.kpv2-pop-skilllist { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; max-height: 260px;
    overflow-y: auto; padding-right: 4px; }
.kpv2-pop-skill { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px; border-radius: 7px; border: 1px solid #2a2a32; background: rgba(20,20,26,0.7);
    color: #b8b0a0; font-size: 12.5px; cursor: pointer; font-family: inherit; text-align: left; transition: all .15s; }
.kpv2-pop-skill em { font-style: normal; font-family: var(--font-num); color: #8a7a60; }
.kpv2-pop-skill.is-own { border-color: rgba(201,158,74,0.35); color: #e0c084; }
.kpv2-pop-skill.is-own em { color: #c99e4a; }
.kpv2-pop-skill:hover { border-color: rgba(201,158,74,0.6); background: rgba(201,158,74,0.12); color: #ffd080; }
/* 探索模式里的选人栏比遭遇页小一档：它只是「检定角色」，不需要占一整屏 */
.kpv2-exp-char-bar { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); min-height: 0; }
.kpv2-exp-char-bar .kpv2-char-card { padding: 7px 16px 7px 0; }
.kpv2-exp-char-bar .kpv2-char-card-avatar { width: 48px; }
.kpv2-exp-char-bar .kpv2-char-card { grid-template-columns: 48px minmax(72px, 1fr) auto; }

/* ---------- 投影窗口（v2.15.2） ----------
   独立页面 projector.html：复用上面的棋子 / 标注 / 标尺样式，只是把交互全部关掉。
   直播时工具条会自动淡出；OBS 用 ?clean=1 直接不显示。 */
.proj-body { margin: 0; height: 100vh; overflow: hidden; background: #08080b; }
.proj-body.is-clear { background: transparent; }
.proj-stage { position: fixed; inset: 0; overflow: hidden; }
.proj-stage .kpv2-combat-boardinner.is-proj { background-size: contain; background-position: center; }
.proj-stage .kpv2-exp-label {
    cursor: default; pointer-events: none; }
/* 棋子与标记必须能吃指针事件，否则浏览器不弹原生 title（悬停浮窗看不到）；它们没有绑定任何交互 */
.proj-stage .kpv2-combat-token, .proj-stage .proj-mark {
    cursor: help; pointer-events: auto; }
.proj-stage .kpv2-combat-token:hover { transform: none; }
.proj-stage .kpv2-combat-token.is-giant { transform: scale(2); }        /* 投屏也要看到巨型 */
.proj-stage .kpv2-combat-token.is-giant:hover { transform: scale(2); }
.proj-stage .kpv2-bd-ruler { opacity: 0.85; }
.proj-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; text-align: center; pointer-events: none; }
.proj-empty-logo { width: 72px; height: 72px; opacity: 0.5; filter: grayscale(0.4); }
.proj-empty-title { font-size: 20px; letter-spacing: 0.12em; color: #8a7a60; }
.proj-empty-hint { font-size: 12.5px; color: #5a5348; max-width: 420px; line-height: 1.7; }
.proj-badge { position: absolute; left: 16px; top: 14px; padding: 5px 12px; border-radius: 8px;
    background: rgba(12,12,16,0.78); border: 1px solid rgba(201,158,74,0.3);
    color: #d8c9a4; font-size: 13px; font-family: var(--font-num); letter-spacing: 0.04em;
    pointer-events: none; }
.proj-note { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: 76%;
    padding: 8px 18px; border-radius: 10px; text-align: center;
    background: rgba(10,10,14,0.82); border: 1px solid rgba(201,158,74,0.35);
    color: #efe4cb; font-size: 17px; line-height: 1.6; pointer-events: none; }
.proj-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20;
    display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px;
    background: rgba(14,14,19,0.92); border: 1px solid #2a2a33;
    box-shadow: 0 6px 22px rgba(0,0,0,0.5); transition: opacity .5s ease; }
.proj-bar.is-dim { opacity: 0; pointer-events: none; }
.proj-bar-title { font-size: 11.5px; color: #6a6040; margin: 0 2px; }
.proj-bar-sep { width: 1px; height: 16px; background: #2a2a33; margin: 0 4px; }
/* 「· 已连接（N 秒前更新）」秒数每秒都在变宽度，会让整条工具条一会儿宽一会儿窄（用户报）：
   留一个够 2 位数的固定宽度 + 等宽数字，秒数跳动时条子纹丝不动 */
.proj-bar-status { font-size: 11.5px; color: #5a5348; margin-left: 4px; font-family: var(--font-num);
    min-width: 11.6em; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.proj-btn { padding: 5px 11px; border-radius: 7px; border: 1px solid #2c2c34; background: rgba(20,20,26,0.8);
    color: #a8a08e; font-size: 12px; cursor: pointer; transition: all .15s; }
.proj-btn:hover { border-color: rgba(201,158,74,0.45); color: #ded2b8; }
.proj-btn.is-on { border-color: #c99e4a; background: rgba(201,158,74,0.14); color: #ffd080; }

/* ---------- 战斗结果卡（v2.16.0 重排）：谁打谁 → 结论 → 判定对比 → 伤害血量 → 状态 ---------- */
.kpv2-atkres { display: flex; flex-direction: column; gap: 10px; }
.kpv2-ar-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpv2-ar-name { font-size: 16px; font-weight: bold; letter-spacing: 0.02em; }
.kpv2-ar-name.is-atk { color: #ffd080; }
.kpv2-ar-name.is-def { color: #ff9aa9; }
.kpv2-ar-arrow { color: #6a6040; }
.kpv2-ar-weap { margin-left: auto; font-size: 12px; color: #a89878; font-family: var(--font-num);
    padding: 3px 9px; border-radius: 6px; border: 1px solid #2c2c34; background: rgba(20,20,26,0.7); }
.kpv2-ar-verdict { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 9px;
    border: 1px solid rgba(201,158,74,0.4); background: rgba(201,158,74,0.1); }
.kpv2-ar-verdict b { font-size: 22px; color: #ffd080; letter-spacing: 0.04em; }
.kpv2-ar-verdict-kind { font-size: 12px; color: #8a7a60; }
.kpv2-atkres.is-miss .kpv2-ar-verdict { border-color: rgba(150,150,170,0.35); background: rgba(150,150,170,0.08); }
.kpv2-atkres.is-miss .kpv2-ar-verdict b { color: #b8b8c8; }
.kpv2-atkres.is-dodge .kpv2-ar-verdict { border-color: rgba(106,196,106,0.4); background: rgba(106,196,106,0.1); }
.kpv2-atkres.is-dodge .kpv2-ar-verdict b { color: #9ee09e; }
.kpv2-atkres.is-counter .kpv2-ar-verdict { border-color: rgba(212,77,94,0.45); background: rgba(212,77,94,0.12); }
.kpv2-atkres.is-counter .kpv2-ar-verdict b { color: #ff8ba0; }
.kpv2-ar-versus { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpv2-ar-col { padding: 9px 12px; border-radius: 8px; border: 1px solid #26262e; background: rgba(18,18,24,0.72); }
.kpv2-ar-col.is-win { border-color: rgba(201,158,74,0.5); background: rgba(201,158,74,0.08); }
.kpv2-ar-col.is-lose { opacity: 0.72; }
.kpv2-ar-colhead { font-size: 11.5px; color: #8a7a60; margin-bottom: 5px; }
.kpv2-ar-roll { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-num); }
.kpv2-ar-roll b { font-size: 26px; color: #e8e0cc; line-height: 1.05; }
.kpv2-ar-roll span { font-size: 11.5px; color: #8a7a60; }
.kpv2-ar-lv { margin-top: 3px; font-size: 13px; color: #c0a080; }
.kpv2-ar-col.is-win .kpv2-ar-lv { color: #ffd080; font-weight: bold; }
.kpv2-ar-dmg { padding: 10px 12px; border-radius: 8px; border: 1px solid #2c2c34; background: rgba(20,20,26,0.6);
    display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #c8c0b0; }
.kpv2-ar-dmgrow { display: flex; gap: 10px; }
.kpv2-ar-dmgrow .k { flex: 0 0 34px; color: #7a7160; }
.kpv2-ar-dmgrow .v b { color: #ff9aa9; font-size: 15px; }
.kpv2-ar-hp { display: flex; align-items: center; gap: 10px; font-family: var(--font-num); }
.kpv2-ar-hp .who { color: #d8c9a4; }
.kpv2-ar-hp .num b { color: #ff9aa9; font-size: 15px; }
.kpv2-ar-hp .bar { flex: 1 1 auto; height: 6px; border-radius: 4px; background: #14141a; overflow: hidden; }
.kpv2-ar-hp .bar i { display: block; height: 100%; }
.kpv2-ar-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.kpv2-ar-tags span { padding: 3px 10px; border-radius: 999px; font-size: 12px; color: #ffb3c0;
    border: 1px solid rgba(212,77,94,0.5); background: rgba(212,77,94,0.12); }
.kpv2-ar-note { font-size: 12px; color: #9a9284; }
.kpv2-ar-hint { font-size: 12px; color: #7a7160; line-height: 1.6; }

/* ---------- 投影端：战斗特效（v2.16.0）：攻击指向 / 伤害飘字 / 结果横幅 ----------
   ⚠️ 这里**故意不用 CSS 动画**：投影端每秒会重绘，动画会被反复重启（用户报的「动画循环往复播放」）。
   淡入淡出全由 JS 按**存活时间**写 inline opacity / transform（见 projFxOpacity / projFxSvg）。 */
.proj-fx { position: absolute; left: 0; top: 0; pointer-events: none; }
.proj-fx-line { stroke-linecap: round; fill: none; }
.proj-aim-core { stroke-dasharray: 11 7; animation: aimFlow 0.55s linear infinite; }
.proj-aim-reticle circle { animation: aimRingPulse 1.2s ease-in-out infinite; }
.proj-aim-reticle.on-target circle { stroke: #ff8fa3; stroke-width: 3; }
/* 飘字：深色底 + 类型色描边（原来是整块纯色药丸，用户觉得不搭主题） */
.proj-fx-dmg {
    position: absolute; transform: translate(-50%, -50%); pointer-events: none;
    padding: 3px 12px 4px; border-radius: 9px; font-size: 18px; font-weight: bold; font-family: var(--font-num);
    color: #ff9aa9; background: rgba(16,11,13,0.9); border: 1px solid rgba(212,77,94,0.6);
    box-shadow: 0 4px 16px rgba(0,0,0,0.66); white-space: nowrap; letter-spacing: 0.02em; }
.proj-fx-dmg.is-miss { color: #c3c3d4; border-color: rgba(150,150,170,0.5); font-size: 14px; }
.proj-fx-dmg.is-dodge, .proj-fx-dmg.is-ok { color: #9ee09e; border-color: rgba(106,196,106,0.55); font-size: 14px; }
.proj-fx-dmg.is-crit { color: #ffd080; border-color: rgba(201,158,74,0.8); background: rgba(26,19,10,0.92); }
/* 结果条（v2.19.8 重做）：原来贴在**画面最上方**（top:16px）像一行系统提示，用户嫌太靠上、样式也不搭。
   现在改成**画面下方居中**的结果卡：上面一行小字写「谁打谁 / 谁在检定」，下面一行大字写最终结论，
   这句话与沙盘里的结果卡（.kpv2-ar-verdict）**逐字相同**，配色也照抄那一套（金=命中 / 红=反击 / 灰=未命中 / 绿=闪避）。 */
.proj-fx-banner {
    position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 240px; max-width: 84%; padding: 10px 26px 12px; border-radius: 12px;
    background: linear-gradient(180deg, rgba(28,22,15,0.94), rgba(14,11,9,0.94));
    border: 1px solid rgba(201,158,74,0.45); border-left: 3px solid #c99e4a;
    box-shadow: 0 10px 34px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.045);
    text-align: center; pointer-events: none; }
.proj-fx-banner-who { font-size: 12.5px; color: #a89878; letter-spacing: 0.06em; font-family: var(--font-num); }
.proj-fx-banner-main { font-size: 21px; font-weight: bold; color: #ffd080; letter-spacing: 0.05em; line-height: 1.3; }
.proj-fx-banner-roll { margin-left: 10px; font-size: 13px; font-weight: normal; color: #b8b0a0; font-family: var(--font-num); }
.proj-fx-banner.is-miss { border-color: rgba(150,150,170,0.4); border-left-color: #8f8fa8; }
.proj-fx-banner.is-miss .proj-fx-banner-main { color: #c3c3d4; }
.proj-fx-banner.is-dodge { border-color: rgba(106,196,106,0.42); border-left-color: #6ac46a; }
.proj-fx-banner.is-dodge .proj-fx-banner-main { color: #9ee09e; }
.proj-fx-banner.is-counter { border-color: rgba(212,77,94,0.5); border-left-color: #d44d5e; }
.proj-fx-banner.is-counter .proj-fx-banner-main { color: #ff8ba0; }
.proj-fx-banner.is-check .proj-fx-banner-main { color: #ffe0a0; }
.proj-stage .kpv2-combat-token.is-attacker .kpv2-combat-token-face {
    border-color: #c99e4a; box-shadow: 0 0 0 3px rgba(201,158,74,0.55), 0 0 22px rgba(201,158,74,0.45); }
.proj-stage .kpv2-combat-token.is-target .kpv2-combat-token-face {
    border-color: #ff5a76; box-shadow: 0 0 0 4px rgba(255,90,118,0.6), 0 0 30px rgba(255,60,90,0.55); }

/* ---------- 本轮小结 ---------- */
.kpv2-cb-sumwrap { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(160,48,64,0.08); }
.kpv2-cb-summary { display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow-y: auto; }
.kpv2-cb-sum-empty { font-size: 12px; color: #4a4030; }
.kpv2-cb-sum-row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 6px 10px; border-radius: 7px;
    background: rgba(255,255,255,0.02); border: 1px solid #212127;
    font-size: 12.5px; line-height: 1.65; color: #a8a08e;
}
.kpv2-cb-sum-row .r { flex-shrink: 0; color: #7d7360; font-size: 11px; white-space: nowrap; }
.kpv2-cb-sum-row .r em {
    font-style: normal; margin-left: 5px; color: #e0c084;
    background: rgba(201,158,74,0.12); border: 1px solid rgba(201,158,74,0.28);
    border-radius: 999px; padding: 0 6px; font-size: 10px;
}
.kpv2-cb-sum-row .t { min-width: 0; word-break: break-word; }
.kpv2-cb-sum-row.is-cur { border-color: rgba(201,158,74,0.3); background: rgba(201,158,74,0.05); color: #cfc4ae; }
/* ---------- 战报 ---------- */
.kpv2-cb-logwrap { border-top: 1px solid rgba(160,48,64,0.08); padding-top: 12px; }
.kpv2-cb-loghead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.kpv2-cb-logacts { display: flex; align-items: center; gap: 6px; }
.kpv2-exp-log { max-height: 168px; }   /* 探索的检定日志：比战报矮一点，别把沙盘挤下去 */
.kpv2-cb-logtitle { font-size: 12px; color: #6a6040; letter-spacing: 0.1em; }
.kpv2-combat-log { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.65; }
.kpv2-combat-log-empty { color: #4a4030; font-size: 12px; }
.kpv2-combat-log-row { color: #8a8070; }
.kpv2-combat-log-row span { color: #5a5548; margin-right: 8px; font-size: 11px; }
.kpv2-combat-log-info { color: #7a8a90; }
.kpv2-combat-log-good { color: #7fae7f; }
.kpv2-combat-log-warn { color: #c9a055; }
.kpv2-combat-log-bad { color: #c0707c; }
.kpv2-combat-log-round { color: #c99e4a; border-top: 1px solid rgba(201,158,74,0.12); margin-top: 4px; padding-top: 4px; }

/* ---------- 血量 / 状态小面板 ---------- */
.kpv2-combat-pop {
    position: fixed; z-index: 10005; width: 272px; padding: 13px 14px 14px;
    background: linear-gradient(180deg, #1d1d24, #16161c);
    border: 1px solid #33333c; border-radius: 12px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.03) inset;
    animation: ctPopIn2 0.18s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes ctPopIn2 { from { opacity: 0; transform: translateY(-4px) scale(0.97); } to { opacity: 1; transform: none; } }
.kpv2-pop-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 9px; }
.kpv2-pop-head b { font-size: 15px; color: #ded2b8; }
.kpv2-pop-head em { font-style: normal; font-size: 11px; color: #7d7360; }
.kpv2-pop-x {
    margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid #2e2e36; background: transparent; color: #6a6050;
    font-size: 11px; cursor: pointer; line-height: 1; transition: all 0.16s ease;
}
.kpv2-pop-x:hover { color: #d44d5e; border-color: #5a3038; background: rgba(212,77,94,0.12); }
.kpv2-pop-hp { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 13px; color: #8a8070; }
.kpv2-pop-hp b { font-size: 21px; font-variant-numeric: tabular-nums; }
.kpv2-pop-hp { cursor: text; }
.kpv2-pop-hp span { margin-left: auto; font-size: 11px; color: #9c5a66; }
.kpv2-pop-tags { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0 10px; min-height: 18px; }
/* 一排血量快进钮：左扣右回，中间一道细线 */
.kpv2-pop-chips { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; }
.kpv2-pop-chips .sep {
    width: 1px; height: 18px; flex: 0 0 1px; margin: 0 2px;
    background: linear-gradient(180deg, transparent, rgba(201,158,74,0.4), transparent);
}
.kpv2-pop-chip {
    flex: 1 1 0; min-width: 0; padding: 8px 0;
    font-size: 11.5px; font-family: inherit; cursor: pointer; white-space: nowrap;
    color: #a09a8c; background: rgba(255,255,255,0.035); border: 1px solid #2a2a32; border-radius: 6px;
    transition: all 0.15s cubic-bezier(.34,1.3,.64,1);
}
.kpv2-pop-chip:hover { transform: translateY(-1px); color: #e0d6c4; border-color: #4a4438; background: rgba(255,255,255,0.08); }
.kpv2-pop-chip:active { transform: translateY(0) scale(0.95); }
.kpv2-pop-chip.dmg { color: #d898a0; border-color: #3a262b; background: rgba(212,77,94,0.09); }
.kpv2-pop-chip.dmg:hover { color: #ffc0c8; border-color: #6a3038; background: rgba(212,77,94,0.24); }
.kpv2-pop-chip.heal { color: #97c4a0; border-color: #26382c; background: rgba(90,160,110,0.09); }
.kpv2-pop-chip.heal:hover { color: #c4e8cb; border-color: #2f5a3a; background: rgba(90,160,110,0.24); }
/* 环境伤害入口（坠落 / 溺水 / 火焰）：独立于那 8 个血量快进钮 */
.kpv2-pop-env {
    width: 100%; padding: 7px 0;
    font-size: 11.5px; font-family: inherit; cursor: pointer; white-space: nowrap;
    color: #9cb4c8; background: rgba(90,140,180,0.10); border: 1px solid #26333f; border-radius: 6px;
    transition: all 0.15s cubic-bezier(.34,1.3,.64,1);
}
.kpv2-pop-env:hover { transform: translateY(-1px); color: #cfe4f4; border-color: #35506a; background: rgba(90,140,180,0.22); }
.kpv2-pop-env:active { transform: translateY(0) scale(0.97); }
/* 血量只能点快进钮（v2.14.48 去掉了自定义输入框） */
/* 血量只能点快进钮（v2.14.48 去掉了自定义输入框与旧的分行控件） */
.kpv2-pop-btn {
    padding: 7px 11px; font-size: 12px; font-family: inherit; cursor: pointer; white-space: nowrap;
    color: #b0a898; background: rgba(255,255,255,0.04); border: 1px solid #2e2e36; border-radius: 6px;
    transition: all 0.17s ease;
}
.kpv2-pop-btn:hover { transform: translateY(-1px); }
/* 攻击：最常用，所以最大最显眼，独占一行放最上面 */
.kpv2-pop-btn.atk.is-big {
    width: 100%; box-sizing: border-box; margin-bottom: 9px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 14px; font-size: 14.5px; font-weight: bold; letter-spacing: 0.03em;
    border-radius: 9px;
}
.kpv2-pop-btn.atk.is-big .ic { font-size: 16px; }
.kpv2-pop-btn.atk.is-big em {
    font-style: normal; font-size: 10px; font-weight: normal;
    color: rgba(255,222,228,0.62); letter-spacing: 0;
}
/* 底排的次要操作（v2.14.47）：左边小号「急救」，右边放大一档的「移出战斗」。
   原来急救是个通栏大按钮（太抢眼），而移出战斗只是标题栏一个小垃圾桶图标（太小看不见）。 */
.kpv2-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #26262c; }
.kpv2-pop-mini {
    flex: none; padding: 6px 12px; cursor: pointer;
    background: rgba(255,255,255,0.03); border: 1px solid #2f2f36; border-radius: 6px;
    color: #8f8676; font-family: inherit; font-size: 12px; letter-spacing: .02em;
    transition: color .18s, border-color .18s, background .18s, box-shadow .18s;
}
.kpv2-pop-mini:hover { color: #d8d0c0; border-color: #3f3f47; background: rgba(255,255,255,0.07); }
.kpv2-pop-mini.danger { color: #b07a80; border-color: rgba(212,77,94,0.28); background: rgba(212,77,94,0.05); }
.kpv2-pop-mini.danger:hover { color: #e88a94; border-color: rgba(212,77,94,0.55); background: rgba(212,77,94,0.14); }
/* 右下角那颗「移出战斗」：比急救大一档、加粗、危险色更实，一眼能看见 */
.kpv2-pop-mini.danger.is-strong {
    padding: 9px 16px; font-size: 13px; font-weight: 600;
    color: #e0888f; border-color: rgba(212,77,94,0.5); background: rgba(212,77,94,0.13);
}
.kpv2-pop-mini.danger.is-strong:hover {
    color: #ffb3ba; border-color: #d44d5e; background: rgba(212,77,94,0.24);
    box-shadow: 0 0 14px rgba(212,77,94,0.24);
}
.kpv2-pop-btn.atk { flex: 1; color: #ffdfe4; border-color: rgba(212,77,94,0.5); background: linear-gradient(180deg, rgba(212,77,94,0.3), rgba(150,40,55,0.22)); }
.kpv2-pop-btn.atk:hover { border-color: #ff6b82; box-shadow: 0 0 18px rgba(255,80,110,0.3); }
/* 头像加载失败时的兜底首字 */
.kpv2-tk-ph { align-items: center; justify-content: center; width: 100%; height: 100%; }
.kpv2-pop-sec { display: flex; align-items: baseline; gap: 7px; margin: 11px 0 6px; font-size: 11px; color: #6a6040; letter-spacing: 0.06em; border-top: 1px solid #26262c; padding-top: 9px; }
.kpv2-pop-sec em { font-style: normal; font-size: 10px; color: #4e4838; }
.kpv2-pop-toggles { display: flex; gap: 5px; flex-wrap: wrap; }
.kpv2-pop-tg {
    padding: 5px 9px; font-size: 11px; font-family: inherit; cursor: pointer;
    color: #8a8070; background: rgba(255,255,255,0.03); border: 1px solid #2a2a32; border-radius: 5px;
    transition: all 0.16s ease;
}
.kpv2-pop-tg:hover { color: #c0b6a2; border-color: #4a4438; }
.kpv2-pop-tg.on { color: #d0b6e8; border-color: rgba(130,80,190,0.5); background: rgba(130,80,190,0.16); box-shadow: 0 0 12px rgba(130,80,190,0.2); }

/* ---------- 覆盖层与弹窗 ---------- */
.kpv2-combat-overlay {
    position: fixed; inset: 0; z-index: 10020; background: rgba(0,0,0,0.75);
    display: flex; align-items: center; justify-content: center;
    animation: ccFadeIn 0.15s ease;
}
/* 攻击面板：浮窗贴在被选中的棋子上，背板全透明，棋盘与目标高亮保持可见 */
.kpv2-combat-overlay.is-side { background: transparent; }
.kpv2-combat-bestiary {
    background: linear-gradient(180deg, #1c1c23, #16161c);
    border: 1px solid #2e2e36; border-radius: 12px;
    padding: 20px 22px; max-width: 640px; width: 92%; max-height: 82vh; overflow-y: auto;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}
.kpv2-cb-sidebox {
    position: fixed;
    width: 430px; max-width: 94vw; max-height: 88vh;
    border-radius: 12px;
    border: 1px solid rgba(201,158,74,0.3);
    background: linear-gradient(180deg, rgba(28,26,30,0.97), rgba(18,16,20,0.98));
    box-shadow: 0 20px 56px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5);
    backdrop-filter: blur(7px);
    animation: ctPopIn2 0.2s cubic-bezier(.34,1.4,.64,1) both;
    pointer-events: auto;
}
.kpv2-cb-wide { max-width: 880px; }
.kpv2-combat-bes-title { font-size: 16px; color: #c99e4a; font-family: var(--font-display); margin-bottom: 10px; text-align: center; letter-spacing: 0.04em; }
.kpv2-cb-pickhint { text-align: center; font-size: 11px; color: #5f5848; margin: -4px 0 12px; }
/* 选择器里的搜索框（怪物多了要能搜） */
.kpv2-cb-search {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 11px; margin-bottom: 9px;
    background: #111116; border: 1px solid #2a2a32; border-radius: 8px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.kpv2-cb-search:focus-within { border-color: #5a4a2a; box-shadow: 0 0 0 2px rgba(201,158,74,0.12); }
.kpv2-cb-search .ic { font-size: 13px; color: #6a6040; flex-shrink: 0; }
.kpv2-cb-search input {
    flex: 1; min-width: 0; padding: 0; border: none; background: transparent;
    color: #d8cdb4; font-family: inherit; font-size: 13px;
}
.kpv2-cb-search input:focus { outline: none; }
.kpv2-cb-search input::placeholder { color: #554f42; }
.kpv2-cb-search input::-webkit-search-cancel-button { filter: invert(0.6); cursor: pointer; }
.kpv2-cb-search .cnt { font-size: 11px; color: #8a7a58; white-space: nowrap; flex-shrink: 0; }
.kpv2-cb-nohit { text-align: center; padding: 26px 16px; color: #6a6040; font-size: 13px; grid-column: 1 / -1; }
.kpv2-cb-nohit span { display: block; font-size: 11px; color: #4e4838; margin-top: 7px; }
.kpv2-cb-pickgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-bottom: 12px; }
.kpv2-cb-pickgrid .kpv2-char-card { padding: 9px 18px 9px 0; }
.kpv2-cb-pickgrid .kpv2-char-card-stats { font-size: 14px; }
/* 选择器里的敌方条目给一点红调，方便区分 */
.kpv2-cb-pickgrid .kpv2-char-card.is-foe { border-color: rgba(168,70,90,0.28); }
.kpv2-cb-pickgrid .kpv2-char-card.is-foe:hover { border-color: rgba(200,80,105,0.5); }
.kpv2-cb-more {
    display: block; margin: 0 auto 10px; padding: 7px 16px; font-size: 12px; font-family: inherit; cursor: pointer;
    color: #8a8070; background: transparent; border: 1px dashed #33333c; border-radius: 7px;
    transition: all 0.17s ease;
}
.kpv2-cb-more:hover { color: #c99e4a; border-color: rgba(201,158,74,0.4); }
.kpv2-combat-bes-custom { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.kpv2-combat-bes-custom input, .kpv2-combat-npcbox input {
    padding: 8px 10px; background: #111116; border: 1px solid #2a2a32; border-radius: 6px;
    color: #b8ae98; font-family: inherit; font-size: 13px;
}
.kpv2-combat-bes-custom input:focus, .kpv2-combat-npcbox input:focus { border-color: #5a4530; outline: none; }
.kpv2-combat-bes-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.kpv2-combat-bes-stats label { font-size: 10px; color: #6a6040; display: flex; flex-direction: column; gap: 3px; }
.kpv2-combat-bes-stats input {
    padding: 6px 8px; background: #111116; border: 1px solid #2a2a32; border-radius: 5px;
    color: #b8ae98; font-family: inherit; font-size: 12px; width: 100%; box-sizing: border-box;
}
.kpv2-combat-bes-add {
    padding: 9px 22px; background: linear-gradient(180deg, rgba(201,158,74,0.2), rgba(201,158,74,0.08));
    border: 1px solid #4a3a18; color: #e0c084; border-radius: 7px; cursor: pointer;
    font-family: inherit; font-size: 13px; transition: all 0.18s ease; display: block; margin: 4px auto 0;
}
.kpv2-combat-bes-add:hover { background: linear-gradient(180deg, rgba(201,158,74,0.32), rgba(201,158,74,0.14)); border-color: #7a5a20; color: #ffe6ae; box-shadow: 0 0 18px rgba(201,158,74,0.2); }
.kpv2-combat-bes-close {
    display: block; margin: 12px auto 0; padding: 7px 22px;
    background: transparent; border: 1px solid #2e2e36; color: #6a6a6a;
    border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 12px;
    transition: all 0.17s ease;
}
.kpv2-combat-bes-close:hover { border-color: #4a4438; color: #b0a898; }
.kpv2-combat-bes-divider { text-align: center; color: #4a4030; font-size: 12px; margin: 14px 0 10px; }
.kpv2-combat-npcbox {
    background: linear-gradient(180deg, #1c1c23, #16161c); border: 1px solid #2e2e36; border-radius: 12px;
    padding: 20px 22px; max-width: 400px; width: 92%; display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}
.kpv2-cb-field { display: flex; align-items: center; gap: 10px; }
.kpv2-cb-flabel { font-size: 12px; color: #8a7a60; letter-spacing: 0.05em; width: 34px; flex-shrink: 0; }
.kpv2-cb-pickbtn {
    flex: 1; display: flex; align-items: baseline; gap: 8px; text-align: left;
    padding: 8px 11px; font-size: 13px; font-family: inherit; cursor: pointer;
    color: #c0b49a; background: #111116; border: 1px solid #2a2a32; border-radius: 6px;
    transition: all 0.17s ease;
}
.kpv2-cb-pickbtn em { font-style: normal; font-size: 11px; color: #6a6040; }
.kpv2-cb-pickbtn:hover { border-color: #4a4038; color: #e0d0a8; }
.kpv2-combat-pcbox {
    background: linear-gradient(180deg, #1c1c23, #16161c); border: 1px solid #2e2e36; border-radius: 12px;
    padding: 20px 22px; max-width: 820px; width: 92%; max-height: 82vh; overflow-y: auto;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}
.kpv2-pc-wrap { position: relative; }
.kpv2-pc-wrap.is-in { opacity: 0.62; }
/* 选人浮窗顶部那行「本场景已有谁」（v2.19.5）：卡片标记之外的第二重提示 */
.kpv2-pick-note { grid-column: 1 / -1; font-size: 12px; color: #9a9284; padding: 2px 2px 8px;
    border-bottom: 1px solid #24242a; margin-bottom: 4px; }
/* 卡内徽标（如「已入场 · 本场景」）：**绝对定位贴卡片右上角**，不占文档流。
   以前它在流里单独占一行 → 只有「已入场」那张卡比别人高出一截（用户报的「突然高一截」）。
   徽标现在回到文档流，但**每张卡都保留这一行**（kpCharCardHtml 总是输出 .kpv2-char-card-badge），
   所以「已入场」那张不会再比别人高一截，也不会像绝对定位那样压住右侧血量。 */
.kpv2-char-card-badge {
    margin-top: 3px; min-height: 16px; line-height: 16px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.kpv2-pc-in-tag {
    display: inline-block; white-space: nowrap; margin: 0;
    font-size: 10px; line-height: 16px; color: #d8b46a;
    background: rgba(56,42,14,0.92); border: 1px solid rgba(201,158,74,0.42);
    border-radius: 999px; padding: 0 7px;
}
/* ---------- 攻击面板 ---------- */
.kpv2-atk-sec { margin-bottom: 13px; }
.kpv2-atk-label { font-size: 11px; color: #6a6040; letter-spacing: 0.08em; margin-bottom: 6px; }
.kpv2-atk-opts { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.kpv2-atk-opt {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 7px 13px; background: rgba(255,255,255,0.03); border: 1px solid #2a2a32;
    color: #9a9088; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 13px;
    transition: all 0.17s ease; text-align: left;
}
.kpv2-atk-opt em { font-style: normal; font-size: 10px; color: #5f5a50; }
.kpv2-atk-opt:hover { border-color: #4a4038; color: #c0b8a8; transform: translateY(-1px); }
.kpv2-atk-opt.on { border-color: rgba(201,158,74,0.5); color: #e0c084; background: rgba(201,158,74,0.1); box-shadow: 0 0 14px rgba(201,158,74,0.14); }
.kpv2-atk-opt.on em { color: #8a7a58; }
.kpv2-atk-none { font-size: 11px; color: #5a5448; }
.kpv2-atk-mods {
    font-size: 12px; color: #8a8070; line-height: 1.75; margin: 12px 0 4px;
    border-top: 1px solid rgba(160,48,64,0.1); padding-top: 11px;
}
.kpv2-atk-mods b { color: #c0b49a; font-weight: normal; }
.kpv2-atk-warn { color: #d49555; }
.kpv2-atk-hint { color: #5a5448; font-size: 11px; }
.kpv2-atk-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 14px; }
.kpv2-atk-actions .kpv2-combat-bes-close { margin: 0; }
.kpv2-atk-line { font-size: 12px; color: #9a9088; margin-top: 6px; line-height: 1.75; }
.kpv2-atk-line span { color: #6a6040; margin-right: 8px; }
.kpv2-atk-line b { color: #ded2b8; }
.kpv2-atk-note { color: #c9a055; padding-left: 8px; }
.kpv2-atk-who { color: #ded2b8; }
.kpv2-atk-who.def { color: #ff9aa6; }
.kpv2-atk-arrow { color: #d44d5e; margin: 0 4px; }
/* ---------- 底图选择 ---------- */
.kpv2-board-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 6px; }
.kpv2-board-preset {
    border: 1px solid #26262e; border-radius: 8px; padding: 7px;
    background: rgba(20,20,26,0.5); cursor: pointer; transition: all 0.17s ease;
}
.kpv2-board-preset:hover { border-color: rgba(201,158,74,0.35); background: rgba(201,158,74,0.05); transform: translateY(-1px); }
.kpv2-board-preset.on { border-color: rgba(201,158,74,0.55); background: rgba(201,158,74,0.09); box-shadow: 0 0 16px rgba(201,158,74,0.14); }
.kpv2-board-thumb { height: 76px; border-radius: 5px; background-size: cover; background-position: center; border: 1px solid #26262e; }
.kpv2-board-preset-name { font-size: 12px; color: #b0a898; margin-top: 6px; text-align: center; }
@media (max-width: 820px) {
    .kpv2-combat-board { height: 320px; }
    .kpv2-cb-pickgrid { grid-template-columns: 1fr; }
    .kpv2-cb-sidebox { width: 100%; max-width: 100%; }
    .kpv2-board-grid { grid-template-columns: 1fr; }
    .kpv2-combat-pop { width: 250px; }
}
@media (max-width: 560px) {
    .kpv2-combat-bes-stats { grid-template-columns: repeat(2, 1fr); }
    .kpv2-cb-head { align-items: flex-start; }
    .kpv2-cb-actions { width: 100%; }
    .kpv2-cb-btn { flex: 1 1 auto; justify-content: center; }
    .kpv2-cb-minihint { display: none; }
}
.filter-btn-s {
    border-color: rgba(180,60,60,0.22) !important;
    color: #c07070 !important;
    background: rgba(160,48,64,0.04) !important;
    position: relative;
    overflow: hidden;
    animation: sRgbSplit 0.8s steps(1) infinite, sVhsWobble 1.8s ease-in-out infinite;
}
/* Scan bars overlay */
.filter-btn-s::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(200,60,60,0.05) 2px,
        rgba(200,60,60,0.05) 3px
    );
    animation: sNoiseBars 2.5s steps(1) infinite;
    opacity: 0.6;
}
/* VHS afterimage + block artifacts */
.filter-btn-s::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: transparent;
    animation: sBlockArtifacts 3.2s steps(1) infinite;
}
.filter-btn-s:hover {
    border-color: rgba(220,60,60,0.5) !important;
    color: #ff5050 !important;
    box-shadow: 0 0 16px rgba(220,60,60,0.2) !important;
}
.filter-btn-s.active {
    border-color: rgba(220,50,50,0.6) !important;
    background: rgba(200,40,40,0.14) !important;
    color: #ff4040 !important;
    animation: sRgbSplit 0.8s steps(1) infinite, sVhsWobble 1.8s ease-in-out infinite, sFaultPulse 1.8s ease-in-out infinite;
    box-shadow: 0 0 24px rgba(220,50,50,0.35), inset 0 0 14px rgba(220,50,50,0.1);
}
/* Red fault pulse for active S button */
@keyframes sFaultPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(220,50,50,0.25), inset 0 0 10px rgba(220,50,50,0.06); }
    50% { box-shadow: 0 0 32px rgba(255,40,40,0.5), inset 0 0 18px rgba(255,40,40,0.14); }
}
/* RGB channel split */
@keyframes sRgbSplit {
    0%, 88%, 91%, 100% {
        text-shadow: none;
    }
    89% {
        text-shadow:
            -2px 0 rgba(220,60,60,0.7),
            2px 0 rgba(60,180,200,0.5);
    }
    90% {
        text-shadow:
            1px -1px rgba(220,60,60,0.8),
            -1px 1px rgba(60,180,200,0.6);
    }
}
/* VHS tracking wobble + brightness spike */
@keyframes sVhsWobble {
    0%, 82%, 88%, 100% {
        transform: translateX(0);
        filter: brightness(1);
        box-shadow: none;
    }
    84% {
        transform: translateX(-4px);
        filter: brightness(1.6);
        box-shadow: -6px 0 8px rgba(200,60,60,0.3), -12px 0 4px rgba(200,60,60,0.1);
    }
    85% {
        transform: translateX(3px);
        filter: brightness(0.9);
        box-shadow: 4px 0 6px rgba(200,60,60,0.2);
    }
    86% {
        transform: translateX(-1px);
        filter: brightness(1.1);
        box-shadow: none;
    }
}
/* Noise bars */
@keyframes sNoiseBars {
    0%, 82%, 84%, 100% {
        background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(200,60,60,0.05) 2px, rgba(200,60,60,0.05) 3px);
        box-shadow: none;
    }
    83% {
        background: repeating-linear-gradient(
            0deg,
            transparent 0px, transparent 4px,
            rgba(0,0,0,0.7) 4px, rgba(0,0,0,0.7) 6px,
            transparent 6px, transparent 10px,
            rgba(0,0,0,0.8) 10px, rgba(0,0,0,0.8) 13px,
            transparent 13px, transparent 16px,
            rgba(0,0,0,0.5) 16px, rgba(0,0,0,0.5) 17px,
            transparent 17px, transparent 100px
        );
        box-shadow: inset 0 0 20px rgba(200,60,60,0.15);
    }
}
/* Block artifacts */
@keyframes sBlockArtifacts {
    0%, 78%, 81%, 100% {
        box-shadow: none;
    }
    79% {
        box-shadow:
            8px 2px 0 rgba(180,50,50,0.6),
            -10px -4px 0 rgba(0,0,0,0.8),
            3px 8px 0 rgba(0,0,0,0.7);
    }
    80% {
        box-shadow:
            4px -3px 0 rgba(180,50,50,0.5),
            -6px 1px 0 rgba(0,0,0,0.7);
    }
}
/* S button active state override — red theme */
.nda-gate{position:relative;overflow:hidden;background:rgba(10,8,8,0.96);border:1px solid rgba(160,40,50,0.1);border-left:none;border-right:none;border-radius:6px;text-align:center;padding:0;box-shadow:0 0 40px rgba(160,30,40,0.08),0 0 80px rgba(140,30,40,0.04),inset 0 0 60px rgba(0,0,0,0.3)}
.nda-texture{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0.05;background-image:url("data:image/svg+xml,%3Csvg viewBox=\'0 0 256 256\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'g\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.7\' numOctaves=\'3\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23g)\' opacity=\'0.5\'/%3E%3C/svg%3E")}
.nda-scanline{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0.04;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(200,40,50,0.06) 3px,rgba(200,40,50,0.06) 4px);animation:ndaScanline 5s linear infinite}
.nda-inner{position:relative;z-index:3;padding:42px 38px 32px}
.nda-classification{font-family:var(--font-display),serif;font-size:2rem;color:rgba(190,65,55,0.5);letter-spacing:0.25em;margin-bottom:20px;font-weight:300}
.nda-title{font-family:var(--font-display),serif;font-size:1.6rem;color:#c09888;letter-spacing:0.5em;margin:0 0 28px;font-weight:400}
.nda-body{text-align:center;max-width:460px;margin:0 auto 24px}
.nda-body p{font-size:0.95rem;color:#b0a098;line-height:2;margin:0 0 8px}
.nda-body .nda-em{color:#d8a098;font-weight:600}
.nda-divider{width:260px;height:1px;background:linear-gradient(90deg,transparent,rgba(180,45,50,0.3) 15%,rgba(180,45,50,0.3) 85%,transparent);margin:0 auto 24px}
.nda-oath{font-size:0.85rem;color:#8a7870;font-family:var(--font-display),serif;letter-spacing:0.08em;margin-bottom:28px;font-style:italic}
.nda-sign-btn{display:inline-block;padding:13px 46px;font-family:var(--font-display),serif;font-size:1rem;color:#d08070;background:rgba(150,35,40,0.1);border:1px solid rgba(180,40,48,0.25);border-radius:3px;cursor:pointer;letter-spacing:0.2em;transition:all 0.35s ease;position:relative;overflow:hidden}
.nda-sign-btn::after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:rgba(220,50,55,0.5);transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);transform:translateX(-50%)}
.nda-sign-btn:hover::after{width:70%}
.nda-sign-btn:hover{color:#f09080;border-color:rgba(220,45,50,0.45);background:rgba(170,38,42,0.18);box-shadow:0 0 24px rgba(180,40,45,0.18),inset 0 0 12px rgba(180,40,45,0.06);transform:translateY(-1px)}
.nda-sign-btn.bursting{animation:ndaBurst 0.5s ease-out forwards;pointer-events:none}
.nda-sign-btn.slide-out{display:none}
.nda-footer{position:relative;z-index:3;padding:0 0 22px;color:rgba(140,100,85,0.42);font-size:0.7rem;letter-spacing:0.35em}
@keyframes ndaScanline{0%{background-position:0 0}100%{background-position:0 50px}}
@keyframes ndaBurst{0%{transform:scale(1);opacity:1}25%{transform:scale(1.04);box-shadow:0 0 50px rgba(200,35,40,0.7);filter:brightness(1.6)}100%{transform:scale(0.96);opacity:0.4;filter:brightness(0.5)}}
.nda-slide-out{animation:ndaSlideOut 0.35s ease-in forwards;pointer-events:none}
@keyframes ndaSlideOut{0%{transform:translateX(0);opacity:1;filter:blur(0)}100%{transform:translateX(-60px);opacity:0;filter:blur(4px)}}
.nda-slide-in{animation:ndaSlideIn 0.4s ease-out forwards}
@keyframes ndaSlideIn{0%{transform:translateX(40px);opacity:0;filter:blur(2px)}100%{transform:translateX(0);opacity:1;filter:blur(0)}}
.keeper-layout{display:flex;flex-direction:column;gap:0}
.ch-main-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid rgba(160,48,64,0.15)}
.ch-main-tab{padding:7px 15px;font-family:var(--font-display),serif;font-size:0.82rem;color:#8a7068;background:rgba(20,16,14,0.6);border:1px solid rgba(100,80,70,0.2);border-radius:5px;cursor:pointer;transition:all 0.25s ease;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis;letter-spacing:0.06em}
.ch-main-tab:hover{border-color:rgba(160,48,64,0.4);color:#c09080;background:rgba(30,20,18,0.8)}
.ch-main-tab.active{color:#c99e4a;border-color:rgba(201,158,74,0.5);background:rgba(201,158,74,0.08);box-shadow:0 0 12px rgba(201,158,74,0.1)}
.ch-npc-tab{border-color:rgba(100,140,120,0.2);color:#7a9a8a}
.ch-npc-tab.active{border-color:rgba(120,180,150,0.5);color:#8ab89a;background:rgba(100,160,130,0.08);box-shadow:0 0 12px rgba(100,160,130,0.08)}
.ch-truth-tab{border-color:rgba(180,60,50,0.2);color:#c06050}
.ch-truth-tab.active{border-color:rgba(220,40,40,0.5);color:#e04040;background:rgba(200,30,30,0.1);box-shadow:0 0 12px rgba(200,30,30,0.12)}
.ch-sub-tabs{display:flex;gap:5px;padding:4px 0 8px 12px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,0.03)}
.ch-sub-tab{padding:3px 13px;font-size:0.72rem;color:#7a7068;background:transparent;border:1px solid transparent;border-radius:30px;cursor:pointer;transition:all 0.2s ease;letter-spacing:0.04em}
.ch-sub-tab:hover{color:#a09080;background:rgba(255,255,255,0.03)}
.ch-sub-tab.active{color:#d06060;background:rgba(160,48,64,0.1);border-color:rgba(160,48,64,0.2)}
.ch-content-area{min-height:100px;padding:4px 0}
.ch-chapter-title{font-family:var(--font-display),serif;font-size:1.15rem;color:#c99e4a;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(201,158,74,0.12);letter-spacing:0.1em}
.ch-chapter-body{font-family:var(--font-body);font-size:0.92rem;color:#c6beb6;line-height:2;letter-spacing:0.02em}
.ch-chapter-body p{margin:0 0 12px}
.ch-empty{color:#5a5540;font-size:0.82rem;font-style:italic}
/* === ???????? === */
.ch-figure{max-width:100%;margin:10px 0;border:1px solid #2a2a2e;border-radius:6px;overflow:hidden;display:block;background:#1a1a1e;position:relative}.ch-figure:hover 
.ch-figure img{display:block;max-width:100%;height:auto;pointer-events:none}
.ch-figure figcaption{padding:6px 10px;font-size:12px;color:#8a8a80;text-align:center;background:#121216;border-top:1px solid #2a2a2e;outline:none;min-width:60px}
.ch-figure figcaption:empty::before{content:attr(data-placeholder);color:#555}
/* === ????????? === */
.ch-chapter-body figure{max-width:100%;margin:12px 0;border:1px solid #2a2a2e;border-radius:6px;overflow:hidden;background:rgba(0,0,0,0.2)}
.ch-chapter-body figure img{display:block;max-width:100%;height:auto;cursor:pointer;transition:opacity .2s}
.ch-chapter-body figure img:hover{opacity:.85}
/* 前端隐藏插图删除按钮 */
.ch-chapter-body 
.ch-chapter-body figcaption{padding:6px 12px;font-size:0.78rem;color:#8a8070;text-align:center;background:rgba(0,0,0,0.3);border-top:1px solid #1e1e24}
.ch-clue-list{list-style:none;padding:0;margin:0}.ch-clue-list li::marker{content:none;display:none}.ch-clue-list li{display:block}
.ch-clue-list li{padding:10px 12px;margin-bottom:6px;background:rgba(20,20,26,0.5);border:1px solid rgba(255,255,255,0.04);border-radius:6px;color:#b0a090;font-family:var(--font-body);font-size:0.85rem;line-height:1.75;transition:all .35s ease}
@keyframes cluePulse {
  0%,100% { box-shadow:0 0 6px rgba(212,77,94,0.2),0 0 18px rgba(212,77,94,0.06),inset 0 0 12px rgba(212,77,94,0.02); }
  50%     { box-shadow:0 0 14px rgba(212,77,94,0.45),0 0 36px rgba(212,77,94,0.15),inset 0 0 24px rgba(212,77,94,0.05); }
}
.ch-clue-list li:hover{animation:cluePulse 1.6s ease-in-out infinite;border-color:rgba(212,77,94,0.45);color:#d4a090;background:rgba(30,20,22,0.7);transform:translateX(3px) scale(1.01);cursor:default}
.ch-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.ch-img-caption{display:block;font-size:0.7rem;color:#8a7a60;text-align:center;margin-top:4px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ch-npc-source{display:block;font-size:0.7rem;color:#6a6040;font-style:italic;margin-bottom:4px}
.ch-img-thumb{position:relative;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);cursor:pointer;aspect-ratio:4/3;transition:all 0.3s ease}
.ch-img-thumb:hover{border-color:rgba(201,158,74,0.3);transform:scale(1.03)}
.ch-img-thumb img{width:100%;height:100%;object-fit:cover}
.ch-img-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;font-size:1.5rem;opacity:0;transition:opacity 0.3s ease}
.ch-img-thumb:hover .ch-img-overlay{opacity:1}
.ch-npc-block{margin-top:12px;padding-top:12px;border-top:1px solid rgba(100,140,120,0.12)}
.ch-npc-card{padding:10px 12px;margin-bottom:8px;background:rgba(20,20,26,0.4);border:1px solid rgba(255,255,255,0.05);border-radius:6px}
.ch-npc-card strong{display:block;color:#8ab89a;font-size:0.9rem;margin-bottom:4px;font-family:var(--font-display),serif}
.ch-npc-card p{font-family:var(--font-body);color:#a8a095;font-size:0.84rem;line-height:1.75;margin:0}
.ch-truth-content{font-family:var(--font-body);font-size:0.92rem;color:#d2b8a8;line-height:2;letter-spacing:0.02em}
.ch-truth-content p{margin:0 0 12px}
.nda-tab{border-color:rgba(160,48,64,0.3)!important;color:#c06050!important}
.nda-tab.active{background:rgba(160,48,64,0.12)!important}
.img-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s ease}
.img-lightbox.active{opacity:1;pointer-events:auto}
.img-lightbox-bg{position:absolute;inset:0;background:rgba(0,0,0,0.88);backdrop-filter:blur(6px)}
.img-lightbox-wrap{position:relative;z-index:1;max-width:90vw;max-height:90vh;animation:lbZoomIn 0.3s ease}
.img-lightbox-wrap img{max-width:100%;max-height:85vh;border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.08)}
.img-lightbox-caption{text-align:center;color:#c0a870;font-size:1.1rem;padding:10px 16px 0;max-width:100%;line-height:1.5}
.img-lightbox-close{position:absolute;top:-40px;right:0;width:36px;height:36px;background:rgba(160,48,64,0.3);border:1px solid rgba(160,48,64,0.4);border-radius:50%;color:#d44d5e;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}
.img-lightbox-close:hover{background:rgba(200,40,50,0.5);color:#ff6060}
@keyframes lbZoomIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}
/* ========================================
   会员系统样式
   ======================================== */
/* --- 导航用户状态栏 --- */
.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.nav-submit-btn { padding: 6px 16px; background: rgba(180,50,50,0.08); border: 1px solid rgba(212,77,94,0.25); border-radius: 5px; color: #d44d5e; cursor: pointer; font-size: 15px; font-family: var(--font-display); transition: all 0.22s; white-space: nowrap; }
.nav-submit-btn:hover { background: rgba(212,77,94,0.15); border-color: #d44d5e; box-shadow: 0 0 18px rgba(212,77,94,0.45), 0 0 36px rgba(212,77,94,0.15); }
.nav-user-badge { display: flex; align-items: center; flex-shrink: 0; }
.nav-login-btn { padding: 6px 16px; background: rgba(180,50,50,0.08); border: 1px solid rgba(212,77,94,0.25); border-radius: 5px; color: #d44d5e; cursor: pointer; font-size: 14px; font-family: var(--font-display); transition: all 0.22s; white-space: nowrap; }
.nav-login-btn:hover { background: rgba(212,77,94,0.15); border-color: #d44d5e; box-shadow: 0 0 18px rgba(212,77,94,0.45), 0 0 36px rgba(212,77,94,0.15); }
.user-dropdown { position: relative; }
.user-dropdown-btn { padding: 6px 14px; background: rgba(20,20,26,0.5); border: 1px solid #2a2a2e; border-radius: 5px; color: #b0a080; cursor: pointer; font-size: 14px; font-family: var(--font-display); transition: all 0.2s; }
.user-dropdown-btn:hover { border-color: #c99e4a; color: #c99e4a; }
.user-dropdown-menu { position: absolute; top: 100%; right: 0; margin-top: 6px; padding: 6px 0; background: #1a1a22; border: 1px solid #2a2a2e; border-radius: 6px; min-width: 176px; z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.6); overflow: hidden; }
.dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; background: none; border: none; color: #b0a080; font-size: 14px; font-family: var(--font-display); text-align: left; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.dd-ico { flex: 0 0 20px; width: 20px; text-align: center; font-size: 15px; line-height: 1; }
.dd-txt { flex: 1 1 auto; text-align: left; line-height: 1.5; }
.dd-count { display: none; flex: 0 0 auto; min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 5px; margin-left: auto; border-radius: 999px; background: #d44d5e; color: #fff; font-family: var(--font-body, sans-serif); font-size: 10px; line-height: 16px; text-align: center; letter-spacing: 0; }
.dropdown-item:hover { background: rgba(201,158,74,0.08); color: #c99e4a; }
.user-dropdown-menu a { display: block; padding: 10px 16px; color: #a8a095; font-size: 14px; text-decoration: none; transition: all 0.15s; border-bottom: 1px solid rgba(201,158,74,0.04); }
.user-dropdown-menu a:last-child { border-bottom: none; }
.user-dropdown-menu a:hover { background: rgba(201,158,74,0.08); color: #c99e4a; }
/* --- 登录/注册弹窗 --- */
.auth-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.78); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: modalFadeIn 0.2s ease; }
.auth-overlay::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(120,20,20,0.04) 0%, transparent 70%); pointer-events: none; animation: authFlicker 3s infinite; }
.auth-modal { background: linear-gradient(135deg, #16161c 0%, #1a1216 100%); border: 1px solid rgba(212,77,94,0.15); border-radius: 12px; padding: 28px 30px; width: 380px; max-width: 90vw; box-shadow: 0 0 24px rgba(212,40,40,0.06), 0 0 50px rgba(180,30,30,0.02), inset 0 1px 0 rgba(255,255,255,0.02); animation: authRedPulse 3s ease-in-out infinite, modalSlideUp 0.25s ease; }
@keyframes authRedPulse { 0%, 100% { box-shadow: 0 0 24px rgba(212,40,40,0.06), 0 0 50px rgba(180,30,30,0.02); } 50% { box-shadow: 0 0 32px rgba(212,40,40,0.1), 0 0 60px rgba(180,30,30,0.04); } }
.auth-modal-header { text-align: center; margin-bottom: 18px; }
.auth-modal-logo { display: block; width: 44px; height: 44px; margin: 0 auto 10px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
.auth-modal-brand { font-size: 18px; color: #c0a090; font-family: var(--font-display); letter-spacing: 0.15em; margin-bottom: 2px; }
.auth-modal-title { display: block; font-size: 15px; color: #d44d5e; font-family: var(--font-display); letter-spacing: 0.08em; margin-top: 6px; }
.auth-modal-sub { display: none; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 13px; color: #a07070; margin-bottom: 5px; }
.auth-field input { width: 100%; padding: 10px 12px; background: #111118; border: 1px solid rgba(212,77,94,0.12); border-radius: 6px; color: #c0a0a0; font-size: 15px; font-family: var(--font-display); outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.auth-field input:focus { border-color: #d44d5e; box-shadow: 0 0 10px rgba(212,77,94,0.18); }
.auth-error { background: rgba(212,77,94,0.06); border: 1px solid rgba(212,77,94,0.15); border-radius: 5px; padding: 8px 12px; color: #d44d5e; font-size: 13px; margin-bottom: 12px; }
.auth-switch-link { color: #c99e4a; cursor: pointer; font-size: 13px; transition: color 0.2s; }
.auth-switch-link:hover { color: #e8b85a; text-decoration: underline; }
.auth-submit-btn { width: 100%; padding: 11px; background: linear-gradient(135deg, rgba(212,77,94,0.15), rgba(160,40,40,0.08)); border: 1px solid rgba(212,77,94,0.3); border-radius: 6px; color: #d06060; font-size: 16px; cursor: pointer; font-family: var(--font-display); letter-spacing: 0.1em; transition: all 0.22s; }
.auth-submit-btn:hover { background: linear-gradient(135deg, rgba(212,77,94,0.25), rgba(160,40,40,0.14)); border-color: #e05050; box-shadow: 0 0 20px rgba(212,77,94,0.25); color: #e07070; }
.auth-switch { text-align: center; margin-top: 14px; font-size: 13px; color: #8a6060; }
.auth-switch a { color: #d44d5e; text-decoration: none; margin-left: 4px; }
.auth-switch a:hover { text-decoration: underline; color: #e06060; }
/* --- 评论 --- */
.comment-list { margin-bottom: 16px; }
.comment-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid #1e1e24; }
.comment-item:last-child { border-bottom: none; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(201,158,74,0.08); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.comment-body { flex: 1; }
.comment-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.comment-author { font-size: 14px; color: #c99e4a; font-weight: bold; }
.comment-time { font-size: 11px; color: #5a5540; }
.comment-text { font-family: var(--font-body); font-size: 14px; color: #a8a095; line-height: 1.7; }
.comment-empty, .comment-loading, .comment-error { text-align: center; padding: 20px; color: #6a6040; font-size: 14px; }
.comment-submit-btn { padding: 8px 20px; background: rgba(201,158,74,0.1); border: 1px solid rgba(201,158,74,0.3); border-radius: 5px; color: #c99e4a; cursor: pointer; font-size: 14px; font-family: var(--font-display); transition: all 0.2s; margin-top: 8px; }
.comment-submit-btn:hover { background: rgba(201,158,74,0.18); border-color: #c99e4a; box-shadow: 0 0 10px rgba(201,158,74,0.12); }
.comment-input-area { border-top: 1px solid #1e1e24; padding-top: 14px; }
.comment-input-area textarea { width: 100%; background: #1a1a20; border: 1px solid #2a2a2e; color: #b0a090; border-radius: 5px; padding: 8px; resize: vertical; font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.comment-input-area textarea:focus { border-color: #c99e4a; }
.ch-comment-tab { color: #8a7a60 !important; }
.ch-comment-tab:hover, .ch-comment-tab.active { color: #c99e4a !important; }
/* ========================================
   个人资料面板 (v1.3)
   ======================================== */
.profile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.78); z-index: 9998; display: flex; align-items: center; justify-content: center; animation: modalFadeIn 0.2s ease; }
.profile-panel { background: linear-gradient(135deg, #16161c 0%, #1a1216 100%); border: 1px solid rgba(212,77,94,0.15); border-radius: 12px; padding: 28px 30px; width: 400px; max-width: 90vw; box-shadow: 0 0 40px rgba(212,40,40,0.08); animation: modalSlideUp 0.25s ease; }
.profile-header { text-align: center; margin-bottom: 20px; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: rgba(212,77,94,0.1); border: 2px solid rgba(212,77,94,0.25); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 28px; cursor: pointer; transition: all 0.2s; overflow: hidden; background-size: cover; background-position: center; position: relative; }
.profile-avatar:hover { border-color: #d44d5e; box-shadow: 0 0 14px rgba(212,77,94,0.2); }
.profile-avatar-hint { margin: -4px 0 10px; color: #7d6a68; font-size: 11px; letter-spacing: 0.04em; }
.profile-avatar.is-uploading { pointer-events: none; }
.profile-avatar.is-uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,.22);
    border-top-color: #e0b860;
    border-radius: 50%;
    animation: profileAvatarSpin .8s linear infinite;
}
@keyframes profileAvatarSpin { to { transform: rotate(360deg); } }
.profile-name { font-size: 18px; color: #c0a090; font-family: var(--font-display); letter-spacing: 0.08em; }
.profile-body { }
.profile-section-title { font-size: 14px; color: #8a6060; font-family: var(--font-display); letter-spacing: 0.06em; margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid rgba(212,77,94,0.08); }
.profile-section-toggle { font-size: 14px; color: #8a6060; font-family: var(--font-display); letter-spacing: 0.06em; margin: 18px 0 10px; padding: 10px 0 10px 0; border-top: 1px solid rgba(212,77,94,0.08); cursor: pointer; transition: color 0.2s; user-select: none; }
.profile-section-toggle:hover { color: #d44d5e; }
.auth-remember { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 13px; color: #8a6060; }
.auth-remember input[type=checkbox] { accent-color: #d44d5e; }
.comment-actions { margin-left: auto; font-size: 12px; }
.comment-actions a { color: #8a7a60; text-decoration: none; cursor: pointer; }
.comment-actions a:hover { color: #c99e4a; }
.comment-dtab { color: #8a7a60; }
.comment-dtab:hover, .comment-dtab.active { color: #c99e4a !important; border-color: #c99e4a !important; }
.comment-ta { width:100%;background:#1a1a20;border:1px solid #2a2a2e;color:#b0a090;border-radius:5px;padding:8px;resize:vertical;font-family:inherit; }
.comment-dtab { color: #8a7a60; }
.comment-dtab:hover, .comment-dtab.active { color: #c99e4a !important; }
.comment-ta { width:100%;background:#1a1a20;border:1px solid #2a2a2e;color:#b0a090;border-radius:5px;padding:8px;resize:vertical;font-family:inherit; }

/* === 章节编辑器通用 === */
.ch-manager{border:1px solid #2a2a2e;border-radius:6px;overflow:hidden;margin-bottom:8px}
.ch-tab-bar{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;background:#1a1a1e;border-bottom:1px solid #2a2a2e;min-height:42px;align-items:center}
.ch-tab-btn{padding:6px 14px;border:1px solid #2a2a2e;background:#1e1e22;color:#a8a095;border-radius:4px;cursor:pointer;font-size:13px;font-family:inherit;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;transition:all .2s}
.ch-tab-btn:hover{border-color:#c99e4a;color:#c99e4a}
.ch-tab-btn.active{background:rgba(201,158,74,0.12);border-color:#c99e4a;color:#c99e4a}
.ch-tab-btn.fixed{padding-left:6px}
.ch-tab-btn .ch-tab-del{margin-left:6px;color:#8b3a3a;font-size:14px;cursor:pointer;line-height:1}
.ch-tab-btn .ch-tab-del:hover{color:#d44d5e}
.ch-tab-btn.fixed .ch-tab-del{display:none}
.ch-add-btn{padding:6px 14px;font-size:16px;line-height:1;flex-shrink:0;margin-left:auto;border:1px solid rgba(201,158,74,0.3);background:rgba(201,158,74,0.06);color:#c99e4a;border-radius:4px;cursor:pointer;transition:all .25s;font-weight:bold}.ch-add-btn:hover{border-color:#c99e4a;color:#ffd080;background:rgba(201,158,74,0.15);box-shadow:0 0 12px rgba(201,158,74,0.2);transform:scale(1.05)}
.ch-panel{padding:12px}
.ch-panel .ch-label{color:#888880;font-size:11px;margin-bottom:3px;display:block;margin-top:14px}.ch-panel .ch-label:first-child{margin-top:0}
.ch-panel input[type="text"],.ch-panel textarea{width:100%;padding:8px 10px;background:#141418;border:1px solid #222226;border-radius:4px;color:#d0d0c8;font-size:13px;font-family:inherit;margin-bottom:10px}
.ch-panel textarea{min-height:180px;resize:vertical;font-family:"Courier New",monospace;font-size:13px;line-height:1.5}
.ch-clue-row,.ch-img-row,.ch-npc-row{display:flex;gap:6px;align-items:center;margin-bottom:4px}
.ch-add-row-btn{padding:4px 10px;border:1px solid rgba(201,158,74,0.25);background:rgba(201,158,74,0.06);color:#b8945a;border-radius:4px;cursor:pointer;font-size:13px;margin-top:3px;margin-left:auto;transition:all .2s;display:inline-flex;align-items:center;gap:3px}.ch-add-row-btn:hover{border-color:#c99e4a;color:#c99e4a;background:rgba(201,158,74,0.15);box-shadow:0 0 6px rgba(201,158,74,0.1)}
.ch-add-row-btn::before{content:"+ ";font-size:15px;font-weight:bold}
.ch-upload-label{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid rgba(201,158,74,0.25);background:rgba(201,158,74,0.08);color:#c99e4a;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s;white-space:nowrap;user-select:none}
.ch-upload-label:hover{border-color:#c99e4a;background:rgba(201,158,74,0.15);box-shadow:0 0 8px rgba(201,158,74,0.15);transform:translateY(-1px)}
.ch-upload-label:active{transform:scale(0.95)}
.ch-upload-label::before{content:"📁 ";font-size:13px}
.ch-rt-bar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;align-items:center}
.ch-rt-btn{padding:3px 7px;border:1px solid #2a2a2e;background:#1e1e22;color:#a8a095;border-radius:3px;cursor:pointer;font-size:12px;font-family:inherit;transition:all .15s}
.ch-rt-btn:hover{background:#2a2a30;border-color:#c99e4a;color:#c99e4a}
.ch-rt-btn.rt-bold{font-weight:bold}
.ch-rt-btn.rt-italic{font-style:italic}
.ch-rt-btn.rt-ul{text-decoration:underline}
.ch-rt-btn.rt-img{font-size:14px;padding:3px 6px}
.ch-rt-sep{width:1px;background:#2a2a2e;margin:0 2px;align-self:stretch}
.ch-rt-select{padding:3px 4px;min-width:12px;border:1px solid #2a2a2e;background:#1e1e22;color:#a8a095;border-radius:3px;cursor:pointer;font-size:12px;font-family:inherit}.ch-rt-select:hover{border-color:#c99e4a}.ch-rt-select:focus{outline:none;border-color:#c99e4a}
.ch-rt-swatch{width:16px;height:16px;border-radius:2px;cursor:pointer;border:1px solid transparent;flex-shrink:0;align-self:center;transition:all .15s}.ch-rt-swatch:hover{transform:scale(1.25);border-color:#c99e4a;box-shadow:0 0 4px rgba(201,158,74,0.3)}
.ch-content[contenteditable]{min-height:300px;max-height:500px;overflow-y:auto;padding:14px;background:#141418;border:1px solid #222226;border-radius:4px;color:#d0d0c8;font-size:14px;line-height:1.7;outline:none;transition:border-color .2s}
.ch-content[contenteditable]:focus{border-color:#c99e4a}
.ch-content[contenteditable]:empty::before{content:attr(placeholder);color:#555;font-style:italic}
.ch-content[contenteditable] p{margin:0 0 6px}
.ch-content[contenteditable] u{text-decoration:underline;text-underline-offset:3px}
.ch-content[contenteditable] ul{padding-left:20px;margin:4px 0}
.ch-content[contenteditable] li{margin:2px 0}
/* === 图片插入弹窗 === */
.ch-img-modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:9999;align-items:center;justify-content:center}
.ch-img-modal-overlay.show{display:flex}
.ch-img-modal{background:#1a1a1e;border:1px solid #2a2a2e;border-radius:8px;padding:20px;width:520px;max-width:95vw;box-shadow:0 8px 32px rgba(0,0,0,0.5)}
.ch-img-modal h3{color:#c99e4a;font-size:15px;margin:0 0 14px;font-family:serif}
.ch-img-modal-body{display:flex;gap:14px}
.ch-img-modal-right{flex:1;min-width:0}
.ch-img-modal label{display:block;color:#8a8a80;font-size:12px;margin-bottom:4px}
.ch-img-modal input[type="text"]{width:100%;padding:7px 10px;background:#111;border:1px solid #2a2a2e;color:#d0d0c8;border-radius:4px;font-size:13px;margin-bottom:10px;box-sizing:border-box}
.ch-img-modal input[type="text"]:focus{border-color:#c99e4a;outline:none}
.ch-img-preview-large{max-width:100%;max-height:220px;margin:4px 0;border-radius:4px;border:1px solid #2a2a2e;display:block;object-fit:contain}
.ch-img-picker{width:170px;flex-shrink:0;max-height:320px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.ch-img-picker-item{width:48px;height:48px;border-radius:4px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .15s;background:#111}
.ch-img-picker-item img{width:100%;height:100%;object-fit:cover}
.ch-img-picker-item:hover{border-color:#8a8a80}
.ch-img-picker-item.selected{border-color:#c99e4a;box-shadow:0 0 8px rgba(201,158,74,0.3)}
.ch-img-picker-empty{color:#555;font-size:11px;padding:10px 0;width:100%;text-align:center}
.ch-img-modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.ch-img-modal-btns button{padding:6px 16px;border-radius:4px;border:1px solid #333;cursor:pointer;font-size:13px;font-family:inherit}
.ch-img-btn-cancel{background:#1a1a1e;color:#8a8a80}
.ch-img-btn-cancel:hover{background:#25252a}
.ch-img-btn-insert{background:rgba(201,158,74,0.15);color:#c99e4a;border-color:#4a3520}
.ch-img-btn-insert:hover{background:rgba(201,158,74,0.25)}
/* === 交互地图 === */
.map-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:start;padding:8px 0;border-bottom:1px solid #1a1a1e}
.map-col{display:flex;flex-direction:column;gap:4px}
.map-preview{max-height:50px;max-width:80px;border-radius:3px;margin-top:2px}
/* === 模组档案搜索 === */
.timeline-card.hidden-by-search{display:none!important}
.mythos-card.hidden-by-search{display:none!important}
.module-search-bar{position:relative;max-width:600px;margin:0 auto 0.5rem;padding:0 2rem}
.module-search-bar input{width:100%;padding:10px 40px 10px 16px;background:rgba(255,255,255,0.03);border:1px solid #2a2a2e;border-radius:100px;color:#c8c0b0;font-size:14px;font-family:var(--font-serif);outline:none;transition:border-color 0.2s,box-shadow 0.2s,background-color 0.2s;box-sizing:border-box}
.module-search-bar input:focus,
.module-search-bar input:focus-visible{
  outline:none;
  border-color:rgba(201,158,74,0.7);
  background:rgba(201,158,74,0.035);
  box-shadow:0 0 18px rgba(201,158,74,0.10);
}
.module-search-bar input::placeholder{color:#5a554e}
.module-search-icon{position:absolute;right:calc(2rem + 14px);top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;opacity:0.4}
.module-search-icon.is-clickable{pointer-events:auto;cursor:pointer;background:none;border:0;padding:0;color:inherit;line-height:1;opacity:0.55}
.module-search-icon.is-clickable:hover,.module-search-icon.is-clickable:focus-visible,.module-search-bar:focus-within .module-search-icon.is-clickable{opacity:1}
@media(max-width:768px){.module-search-bar{padding:0 1rem}.module-search-bar input{font-size:13px;padding:8px 36px 8px 12px}.module-search-icon{right:calc(1rem + 10px)}}


/* === 投稿独立页面样式 === */
#submit.page .page-header { padding: 4rem 2rem 2rem; }
#submit.page .section-title { font-size:1.6rem; margin-bottom:0.5rem; }
#submit.page .section-desc { color:var(--text-secondary); font-size:0.95rem; text-align:center; letter-spacing:0.1em; margin-bottom:2rem; }
.submit-page-body { max-width:1100px; margin:0 auto; padding:0 24px 60px; }
#submit.page .submit-body { padding:24px; background:rgba(16,16,22,0.5); border:1px solid rgba(212,77,94,0.1); border-radius:8px; }
#submit.page .sf-row { margin-bottom:14px; }
#submit.page .sf-row label { display:block; font-size:13px; color:#a07070; margin-bottom:4px; }
#submit.page .sf-row input,
#submit.page .sf-row select,
#submit.page .sf-row textarea { width:100%; padding:9px 12px; background:#111118; border:1px solid rgba(212,77,94,0.12); border-radius:6px; color:#c0a0a0; font-family:inherit; font-size:14px; box-sizing:border-box; outline:none; transition:border-color 0.2s; }
#submit.page .sf-row input:focus,
#submit.page .sf-row select:focus,
#submit.page .sf-row textarea:focus { border-color:#d44d5e; box-shadow:0 0 8px rgba(212,77,94,0.1); }
#submit.page .sf-row textarea { resize:vertical; }
#submit.page .sf-inline { display:flex; gap:10px; }
#submit.page .sf-col { flex:1; min-width:0; }
#submit.page .sf-col label { font-size:12px; }
#submit.page .sf-col input,
#submit.page .sf-col select { width:100%; }
#submit.page .sf-actions { display:flex; gap:10px; margin-top:20px; justify-content:center; padding-top:16px; border-top:1px solid rgba(255,255,255,0.06); }
#submit.page .sform { display:none; }
#submit.page .sform.active { display:block; }
#submit.page .sform-cancel { padding:10px 24px; background:rgba(20,20,26,0.5); border:1px solid #2a2a2e; border-radius:6px; color:#8a7a60; cursor:pointer; font-size:14px; font-family:var(--font-display); transition:all 0.2s; }
#submit.page .sform-cancel:hover { border-color:#3a3a3e; color:#b0a090; }
#submit.page .sform-placeholder { text-align:center; padding:60px 20px; }
#submit.page .sform-placeholder span { font-size:48px; display:block; margin-bottom:12px; opacity:0.4; }
#submit.page .sform-placeholder p { font-size:15px; color:#6a6040; }
.auth-submit-btn { width:100%; padding:11px; background:linear-gradient(135deg, rgba(212,77,94,0.15), rgba(160,40,40,0.08)); border:1px solid rgba(212,77,94,0.3); border-radius:6px; color:#d06060; font-size:16px; cursor:pointer; font-family:var(--font-display); letter-spacing:0.1em; transition:all 0.22s; }
.auth-submit-btn:hover { background:linear-gradient(135deg, rgba(212,77,94,0.25), rgba(160,40,40,0.15)); border-color:#d44d5e; box-shadow:0 0 18px rgba(212,77,94,0.2); }

/* 投稿手机适配 */
@media (max-width:640px) {
  .submit-page-body { padding:0 12px 40px; }
  #submit.page .sf-inline { flex-direction:column; gap:8px; }
  #submit.page .sf-actions { flex-direction:column; }
  #submit.page .sf-actions button { width:100%; }
}

/* === 投稿草稿列表 === */
#draftListView.active{display:block}
#draftListView{display:none;margin-bottom:40px}
#submitBody.active{display:block}
.sf-draft-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:14px 18px;background:rgba(16,16,22,0.5);border:1px solid rgba(212,77,94,0.1);border-radius:8px}
.sf-draft-count{color:#a07070;font-size:15px;font-family:var(--font-display)}
.sf-new-btn{padding:8px 18px;background:rgba(201,158,74,0.08);border:1px solid rgba(201,158,74,0.25);border-radius:6px;color:#c99e4a;cursor:pointer;font-size:14px;font-family:var(--font-display);transition:all 0.2s;white-space:nowrap}
.sf-new-btn:hover{background:rgba(201,158,74,0.16);border-color:#c99e4a}
.draft-grid{display:flex;flex-direction:column;gap:10px}
.draft-card{display:flex;gap:14px;padding:14px;background:rgba(20,20,26,0.5);border:1px solid rgba(255,255,255,0.06);border-left:3px solid rgba(201,158,74,0.4);border-radius:8px;transition:all 0.2s}
.draft-card:hover{border-color:rgba(201,158,74,0.3);border-left-color:#c99e4a;background:rgba(24,24,30,0.6);box-shadow:0 4px 16px rgba(0,0,0,0.3)}
.draft-card-cover{width:80px;height:60px;border-radius:4px;object-fit:cover;flex-shrink:0;background:#1a1a20}
.draft-card-cover-placeholder{width:80px;height:60px;border-radius:4px;flex-shrink:0;background:#1a1a20;display:flex;align-items:center;justify-content:center;color:#3a3a3e;font-size:20px}
.draft-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;justify-content:center}
.draft-card-title{color:#c0a090;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draft-card-summary{color:#8a7a60;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draft-card-time{color:#6a6040;font-size:11px}
.draft-card-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;padding-left:8px}
.draft-card-actions button{padding:5px 12px;border-radius:4px;border:1px solid;cursor:pointer;font-size:12px;font-family:inherit;transition:all 0.15s}
.draft-card-edit{border-color:rgba(201,158,74,0.25);background:rgba(201,158,74,0.06);color:#b8945a}
.draft-card-edit:hover{border-color:#c99e4a;color:#c99e4a;background:rgba(201,158,74,0.12)}
.draft-card-del{border-color:rgba(200,40,40,0.2);background:rgba(200,40,40,0.06);color:#d44d5e}
.draft-card-del:hover{border-color:#d44d5e;background:rgba(200,40,40,0.12)}
/* 被拒绝的投稿（取回编辑） */
.rejected-box{margin-bottom:18px;padding:14px 16px;background:rgba(32,14,16,0.55);border:1px solid rgba(212,77,94,0.22);border-radius:8px}
.rejected-box[hidden]{display:none!important}
.rejected-box-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px;color:#d44d5e;font-size:14px;font-family:var(--font-display)}
.rejected-box-head small{color:#8a7a60;font-size:11px;font-family:inherit}
.rejected-count{color:#c99e4a}
.rejected-list{display:flex;flex-direction:column;gap:8px}
.rejected-item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;background:rgba(16,16,22,0.5);border:1px solid rgba(255,255,255,0.06);border-left:3px solid rgba(212,77,94,0.55);border-radius:6px}
.rejected-info{flex:1;min-width:0}
.rejected-title{color:#c0a090;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rejected-type{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:3px;background:rgba(212,77,94,0.1);color:#d44d5e;font-size:11px;font-weight:normal}
.rejected-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;color:#8a7a60;font-size:12px}
.rejected-note{color:#d48a94}
.rejected-actions{display:flex;gap:6px;flex-shrink:0}
.rejected-actions button{padding:6px 12px;border-radius:4px;border:1px solid;cursor:pointer;font-size:12px;font-family:inherit;transition:all 0.15s}
.rejected-restore{border-color:rgba(201,158,74,0.35);background:rgba(201,158,74,0.1);color:#c99e4a}
.rejected-restore:hover{border-color:#c99e4a;background:rgba(201,158,74,0.18);color:#e0b96a}
.rejected-ignore{border-color:rgba(255,255,255,0.1);background:transparent;color:#8a7a60}
.rejected-ignore:hover{border-color:rgba(212,77,94,0.45);color:#d44d5e;background:rgba(212,77,94,0.08)}
.draft-card-type{display:inline-block;margin-right:6px;color:#c99e4a;font-size:11px;font-weight:normal}
@media(max-width:640px){.rejected-item{flex-direction:column;align-items:stretch}.rejected-actions{justify-content:flex-end}}

/* === 通用按钮（章节编辑器/通知弹窗等） === */
.btn{padding:8px 16px;border:1px solid #3a3a3e;background:#222228;color:#c8c8c0;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.btn:hover{background:#2a2a30;border-color:#c99e4a}
.btn-primary{background:#c99e4a;color:#141416;border-color:#c99e4a;font-weight:bold}
.btn-primary:hover{background:#d4a855}
.btn-danger{border-color:#8b3a3a;color:#d44d5e}
.btn-danger:hover{background:#2a1a1a}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-green{background:#4a7a3a;color:#fff;border-color:#4a7a3a}
.btn-green:hover{background:#5a8a4a}

/* === 移动端导航（修复菜单始终可见） === */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: column;
    background: rgba(10,10,12,0.97);
    padding: 1.5rem;
    gap: 1.2rem;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
    margin: 0;
    z-index: var(--z-nav);
  }
  .nav-links.active { display: flex; }
  .nav-right { margin-left: auto; }
}

/* === 拖拽上传区域 === */
.drag-drop-zone {
    border: 1px dashed rgba(201,158,74,0.3);
    border-radius: 6px;
    padding: 10px 14px;
    transition: all 0.2s;
    position: relative;
}
.drag-drop-zone.drag-over {
    border-color: #c99e4a;
    background: rgba(201,158,74,0.08);
    box-shadow: 0 0 12px rgba(201,158,74,0.15);
}
.ch-img-row .drag-drop-zone {
    border: none;
    padding: 0;
}
.ch-img-row .drag-drop-zone.drag-over {
    border: 1px dashed #c99e4a;
    border-radius: 4px;
    background: rgba(201,158,74,0.08);
    padding: 3px 6px;
}

/* === 拖拽上传高亮提示文字 === */
.drag-hint {
    color: #c99e4a;
    font-size: 11px;
    display: block;
    width: 100%;
    margin-top: 2px;
    opacity: 0.9;
}

/* === 黄页：城市夹页 / 分类瀑布流 === */
.yellow-page-shell {
    background:
        radial-gradient(ellipse 55% 40% at 50% 0%, rgba(201,158,74,0.05), transparent 70%),
        transparent;
}
.yellow-shell {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4.5rem;
}
.yellow-masthead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 20px 20px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(201,158,74,0.18);
}
.yellow-masthead h1 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    letter-spacing: .18em;
    color: #e8dfcb;
    font-weight: 400;
}
.yellow-masthead p {
    margin: 0;
    color: #8e877b;
    font-size: 13px;
    letter-spacing: .04em;
}
.yellow-masthead-san {
    flex: 0 0 auto;
    padding-bottom: 4px;
    color: #c99e4a;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* composer */
.yellow-composer {
    position: relative;
    padding: 16px 18px;
    margin-bottom: 18px;
    background: linear-gradient(155deg, rgba(201,158,74,.065), rgba(20,20,26,.82) 55%);
    border: 1px solid rgba(201,158,74,.24);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.yellow-composer::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 14px solid rgba(201,158,74,.18);
    border-left: 14px solid transparent;
}
.yellow-compose-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.yellow-compose-head strong {
    display: block;
    color: #e3d6bc;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: .08em;
    font-weight: 400;
}
.yellow-compose-head small {
    display: block;
    margin-top: 3px;
    color: #7f7869;
    font-size: 11px;
}
.yellow-cat-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.yellow-cat-picker button,
.yellow-filter button {
    appearance: none;
    cursor: pointer;
    font-family: var(--font-body);
    color: #958c7c;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11.5px;
    line-height: 1.5;
    transition: color .18s, border-color .18s, background .18s, transform .15s;
}
.yellow-cat-picker button:hover,
.yellow-filter button:hover { color: #e2d4b8; border-color: rgba(201,158,74,.4); }
.yellow-cat-picker button:active,
.yellow-filter button:active { transform: scale(.97); }
.yellow-cat-picker button.is-active,
.yellow-filter button.is-active {
    color: var(--yc, #d8c49a);
    border-color: var(--yc, rgba(201,158,74,.7));
    background: var(--yc-bg, rgba(201,158,74,.1));
}
.yellow-cat-picker button[data-cat="note"],
.yellow-filter button[data-cat="note"] { --yc:#c9a227; --yc-bg:rgba(201,162,74,.08); }
.yellow-cat-picker button[data-cat="recruit"],
.yellow-filter button[data-cat="recruit"] { --yc:#d45b5b; --yc-bg:rgba(180,60,60,.1); }
.yellow-cat-picker button[data-cat="help"],
.yellow-filter button[data-cat="help"] { --yc:#7fa9c9; --yc-bg:rgba(90,140,180,.1); }
.yellow-cat-picker button[data-cat="share"],
.yellow-filter button[data-cat="share"] { --yc:#8fb59a; --yc-bg:rgba(90,150,110,.1); }

#yellowInput,
.yellow-reply-input textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 64px;
    padding: 10px 12px;
    color: #d8d3c8;
    background: rgba(10,10,14,.6);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.75;
    transition: border-color .18s, box-shadow .18s;
}
#yellowInput:focus,
.yellow-reply-input textarea:focus {
    outline: none;
    border-color: rgba(201,158,74,.55);
    box-shadow: 0 0 0 2px rgba(201,158,74,.08);
}
.yellow-compose-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 7px;
    color: #756d5f;
    font-family: var(--font-mono);
    font-size: 10.5px;
}
.yellow-tools {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.yellow-tool-btn {
    display: inline-block;
    user-select: none;
    padding: 2px 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 4px;
    background: rgba(255,255,255,.02);
    color: #8d8170;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.6;
    transition: color .18s, border-color .18s, background .18s;
}
.yellow-tool-btn:hover { color: #e0c48a; border-color: rgba(201,158,74,.4); background: rgba(201,158,74,.05); }
.yellow-upload-status { color: #a48e62; font-family: var(--font-body); font-size: 10.5px; }
.yellow-file-input { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.yellow-image-preview { margin-top: 7px; }
.yellow-image-preview[hidden] { display: none !important; }
.yellow-image-preview-inner {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border: 1px solid rgba(201,158,74,.28);
    border-radius: 6px;
    overflow: hidden;
    background: #111;
}
.yellow-image-preview img { display: block; max-width: 180px; max-height: 120px; object-fit: cover; }
.yellow-image-x {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    background: rgba(0,0,0,.68);
    color: #e6d8bb;
    cursor: pointer;
    font-size: 14px;
    line-height: 16px;
    padding: 0;
}
.yellow-image-x:hover { background: rgba(180,60,60,.8); }
.yellow-emoji-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
    gap: 2px;
    margin-top: 6px;
    padding: 7px;
    border: 1px solid rgba(201,158,74,.16);
    border-radius: 6px;
    background: rgba(10,10,14,.72);
}
.yellow-emoji-panel[hidden] { display: none !important; }
.yellow-emoji-panel button {
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1.5;
    padding: 2px 0;
}
.yellow-emoji-panel button:hover { background: rgba(201,158,74,.14); }
.yellow-btn {
    padding: 7px 18px;
    background: rgba(201,158,74,.09);
    border: 1px solid rgba(201,158,74,.35);
    border-radius: 5px;
    color: #d8b56a;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: .06em;
    transition: background .18s, border-color .18s, color .18s, transform .15s;
}
.yellow-btn:hover:not(:disabled) { background: rgba(201,158,74,.18); border-color: #c99e4a; color: #f0d9a8; }
.yellow-btn:active:not(:disabled) { transform: scale(.98); }
.yellow-btn:disabled { opacity: .45; cursor: default; }
.yellow-btn-sm { padding: 4px 10px; font-size: 11.5px; }
.yellow-guest-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 2px;
}
.yellow-guest-cta[hidden] { display: none !important; }
.yellow-guest-cta strong { color: #e3d6bc; font-family: var(--font-display); font-size: 15px; font-weight: 400; }
.yellow-guest-cta small { color: #7f7869; font-size: 11.5px; }
.yellow-guest-cta .yellow-btn { margin-left: auto; }
.yellow-composer.is-guest .yellow-compose-head,
.yellow-composer.is-guest .yellow-cat-picker,
.yellow-composer.is-guest #yellowInput,
.yellow-composer.is-guest .yellow-tools,
.yellow-composer.is-guest .yellow-image-preview,
.yellow-composer.is-guest .yellow-emoji-panel,
.yellow-composer.is-guest .yellow-compose-foot { display: none; }

/* feed head / filters */
.yellow-feed-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 22px 0 12px;
}
.yellow-feed-head h2 {
    margin: 0;
    font-family: var(--font-display);
    color: #d9cdb6;
    font-size: 16px;
    letter-spacing: .16em;
    font-weight: 400;
}
.yellow-filter { display: flex; gap: 5px; flex-wrap: wrap; }
.yellow-filter button { padding: 3px 9px; font-size: 11px; }
#yellowShown { margin-left: auto; color: #776f61; font-family: var(--font-mono); font-size: 10.5px; }

/* pinned */
.yellow-pinned-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.yellow-pinned-section .yellow-note { margin-bottom: 0; }
.yellow-pinned-head {
    color: #b99a5b;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding-left: 2px;
}

/* note cards: xiaohongshu-style masonry */
.yellow-feed {
    column-count: 3;
    column-gap: 12px;
}
.yellow-note {
    --yc: #c9a227;
    --yc-bg: rgba(201,162,74,.06);
    position: relative;
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 12px;
    padding: 13px 14px 11px;
    background: linear-gradient(145deg, var(--yc-bg), rgba(20,20,26,.55) 45%);
    border: 1px solid rgba(255,255,255,.065);
    border-left: 2px solid var(--yc);
    border-radius: 8px;
    animation: yellowNoteIn .28s var(--ease-out) backwards;
}
.yellow-note[data-cat="recruit"] { --yc:#d45b5b; --yc-bg:rgba(180,60,60,.075); }
.yellow-note[data-cat="help"] { --yc:#7fa9c9; --yc-bg:rgba(90,140,180,.06); }
.yellow-note[data-cat="share"] { --yc:#8fb59a; --yc-bg:rgba(90,150,110,.06); }
.yellow-note.is-pinned {
    --yc:#c99e4a;
    --yc-bg:rgba(201,158,74,.075);
    border-color: rgba(201,158,74,.25);
    border-top: 2px solid #c99e4a;
}
.yellow-note:hover { border-color: rgba(201,158,74,.25); }
@keyframes yellowNoteIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.yellow-note-main { min-width: 0; }
.yellow-note-head { display: flex; align-items: flex-start; gap: 9px; min-width: 0; flex-wrap: wrap; }
.yellow-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    overflow: hidden;
    border: 1px solid var(--yc, rgba(201,158,74,.5));
    border-radius: 10px;
    background: rgba(12,12,16,.75);
    color: #d8c49a;
    font-family: var(--font-display);
    font-size: 16px;
}
.yellow-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.yellow-avatar-ph { position: relative; z-index: 0; }
.yellow-avatar.is-small { width: 26px; height: 26px; flex-basis: 26px; border-radius: 7px; font-size: 11px; }
.yellow-who { min-width: 0; flex: 1; line-height: 1.4; }
.yellow-who b { display: block; color: #d9c9a9; font-family: var(--font-display); font-size: 13px; font-weight: 400; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yellow-who span { display: block; margin-top: 3px; color: #776f61; font-size: 10.5px; }
.yellow-cat-chip {
    display: inline-block;
    margin-left: 0;
    padding: 1px 6px;
    border: 1px solid var(--yc, rgba(201,158,74,.35));
    border-radius: 999px;
    color: var(--yc, #c9a227);
    background: var(--yc-bg, rgba(201,158,74,.06));
    font-style: normal;
    font-size: 10px;
    line-height: 1.4;
}
.yellow-pin-badge {
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid rgba(201,158,74,.55);
    border-radius: 3px;
    color: #e4c278;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
}
.yellow-note-admin { display: flex; gap: 4px; margin-left: auto; opacity: .5; transition: opacity .18s; }
.yellow-note:hover .yellow-note-admin { opacity: 1; }
.yellow-note-admin button,
.yellow-mini-del {
    padding: 2px 6px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 3px;
    background: transparent;
    color: #8d8170;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 10px;
}
.yellow-note-admin button:hover,
.yellow-mini-del:hover { color: #e0c48a; border-color: rgba(201,158,74,.45); }
.yellow-note-admin button.is-danger:hover,
.yellow-mini-del:hover { color: #e09090; border-color: rgba(212,77,94,.5); }
.yellow-note-content {
    margin: 9px 0 7px;
    color: #cec8bc;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}
.yellow-note-content.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.yellow-note-image {
    display: block;
    margin: 8px 0;
    max-height: 360px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    background: #111;
}
.yellow-note-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yellow-reply-image { display: block; margin-top: 5px; max-width: 100%; }
.yellow-reply-image img { display: block; max-width: 100%; max-height: 220px; object-fit: cover; border: 1px solid rgba(255,255,255,.08); border-radius: 5px; }
.yellow-long-toggle {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #b99a5b;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 11px;
}
.yellow-long-toggle:hover { color: #e4c278; text-decoration: underline; text-underline-offset: 3px; }
.yellow-note-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,.045);
    color: #6f685b;
    font-size: 10.5px;
}
.yellow-reply-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: #a48e62;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0;
}
.yellow-reply-toggle:hover { color: #e4c278; }
.yellow-replies { margin: 8px 0 0; padding: 7px 0 0; border-top: 1px dashed rgba(201,158,74,.16); }
.yellow-reply { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.yellow-reply-body { min-width: 0; flex: 1; }
.yellow-reply-head { display: flex; align-items: baseline; gap: 8px; color: #7d7465; font-size: 10px; }
.yellow-reply-head b { color: #c3b18d; font-family: var(--font-display); font-size: 12px; font-weight: 400; }
.yellow-reply-head .yellow-mini-del { margin-left: auto; }
.yellow-reply-content { margin-top: 3px; color: #aaa397; font-family: var(--font-body); font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.yellow-reply-input { margin-top: 8px; }
.yellow-reply-input textarea { min-height: 58px; font-size: 12.5px; }
.yellow-reply-input .yellow-compose-foot { margin-top: 2px; }
.yellow-reply-input .yellow-btn { font-family: var(--font-body); font-size: 12px; font-weight: 400; letter-spacing: 0; }

.yellow-loading, .yellow-empty {
    column-span: all;
    padding: 36px 18px;
    text-align: center;
    color: #756d5f;
    font-size: 12.5px;
    border: 1px dashed rgba(255,255,255,.07);
    border-radius: 8px;
}
.yellow-more-wrap { display: flex; justify-content: center; margin-top: 16px; }
.yellow-more {
    padding: 8px 24px;
    border: 1px dashed rgba(201,158,74,.35);
    border-radius: 999px;
    background: transparent;
    color: #a48e62;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px;
    transition: color .18s, border-color .18s, background .18s;
}
.yellow-more:hover { color: #e4c278; border-color: #c99e4a; background: rgba(201,158,74,.06); }

@media (max-width: 760px) {
    .yellow-shell { padding: 1rem 12px 3.5rem; }
    .yellow-masthead { align-items: flex-start; flex-direction: column; gap: 8px; padding: 18px 10px 15px; }
    .yellow-masthead-san { padding-bottom: 0; }
    .yellow-composer { padding: 14px 13px; }
    .yellow-guest-cta .yellow-btn { margin-left: 0; }
    .yellow-feed { column-count: 2; column-gap: 8px; }
    .yellow-note { margin-bottom: 8px; padding: 11px 10px 10px; }
    .yellow-avatar { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; font-size: 14px; }
    .yellow-note-content { font-size: 12.5px; }
    .yellow-note-admin { opacity: 1; }
    .yellow-feed-head { gap: 8px; }
    #yellowShown { margin-left: 0; width: 100%; }
}
@media (max-width: 420px) {
    .yellow-note-head { gap: 7px; }
    .yellow-note-admin button { padding: 2px 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .yellow-note { animation: none; }
    .yellow-btn, .yellow-more, .yellow-cat-picker button, .yellow-filter button { transition: none; }
}

/* ========================================
   视觉升级 v2：反馈动画 / 深邃微光 / 无障碍降级
   ======================================== */

/* --- 通用按钮反馈：按压反馈（全局） --- */
.btn:active, .cta-button:active, .nav-link-btn:active, .filter-btn:active,
.ch-tab-btn:active, .ch-add-btn:active, .review-tab:active, .admin-nav-btn:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}

/* --- 导航按钮：hover 金色下划线滑入 --- */
.nav-link-btn {
    position: relative;
    transition: color var(--transition-fast);
}
.nav-link-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}
.nav-link-btn:hover::after, .nav-link-btn.active::after {
    width: 70%;
}
.nav-link-btn:hover { color: var(--accent-gold); text-shadow: 0 0 14px rgba(201, 158, 74, 0.35); }

/* --- 主按钮扫光（GPU 友好：transform 平移） --- */
.btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
    opacity: 0;
    pointer-events: none;
}
.btn-primary:hover::after {
    opacity: 1;
    animation: btnSweep 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes btnSweep {
    from { left: -80%; }
    to { left: 130%; }
}

/* --- 骰子：crit/fumble 辉光加强（事件触发，一次性） --- */
.kpv2-dice-btn.kpv2-rolling { animation: kpv2-diceShake 0.4s ease; }
.kpv2-dice-result.crit-glow .kpv2-result-num {
    color: #c9a24a;
    text-shadow: 0 0 24px rgba(240, 208, 96, 0.9), 0 0 60px rgba(240, 208, 96, 0.4);
    animation: kpv2-critBurst 0.9s ease-out;
}
.kpv2-dice-result.fumble-glow .kpv2-result-num {
    color: #ff3030;
    text-shadow: 0 0 24px rgba(255, 48, 48, 0.8), 0 0 60px rgba(212, 77, 94, 0.4);
    animation: kpv2-failShake 0.7s ease-out;
}

/* --- 收藏 ❤ 弹跳 --- */
.fav-bounce { animation: favBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes favBounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.5); }
    70% { transform: scale(0.85); }
    100% { transform: scale(1); }
}
.modal-fav {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    transition: color 0.2s ease, transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
    margin-right: 12px;
    padding: 3px 12px;
    border: 1px solid rgba(201, 158, 74, 0.25);
    border-radius: 20px;
    background: rgba(201, 158, 74, 0.05);
    user-select: none;
    white-space: nowrap;
    align-self: center;
}
.modal-fav:hover {
    color: #f0d860;
    border-color: rgba(201, 158, 74, 0.6);
    background: rgba(201, 158, 74, 0.12);
    text-shadow: 0 0 12px rgba(240, 208, 96, 0.6);
    transform: scale(1.06);
}
.modal-fav.fav-on {
    color: #f0d860;
    border-color: rgba(240, 208, 96, 0.55);
    background: rgba(240, 208, 96, 0.12);
    text-shadow: 0 0 10px rgba(240, 208, 96, 0.5);
}

/* --- 弹窗关闭淡出 --- */
.coc-modal-overlay.closing, .modal.closing, .auth-overlay.closing, .profile-overlay.closing {
    animation: modalFadeOut 0.25s ease forwards;
}
@keyframes modalFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* --- 表单输入聚焦金边 --- */
.form-group input:focus, .form-group textarea:focus, .form-group select:focus,
.ch-panel input:focus, .ch-panel textarea:focus, .comment-ta:focus,
.yellow-reply-input textarea:focus, #submit input:focus, #submit textarea:focus, #submit select:focus {
    border-color: rgba(201, 158, 74, 0.65);
    box-shadow: 0 0 0 1px rgba(201, 158, 74, 0.25), 0 0 16px rgba(201, 158, 74, 0.1);
    outline: none;
}

/* --- 输入错误抖动 --- */
.shake-error {
    animation: shakeX 0.4s ease;
    border-color: var(--accent-red-bright) !important;
}
@keyframes shakeX {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* --- 通知徽章弹跳 --- */
.notif-badge-pop { animation: notifPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes notifPop {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* --- 后台：审核操作反馈 --- */
.btn-flash-ok { animation: flashOk 0.8s ease; }
@keyframes flashOk {
    0% { box-shadow: 0 0 0 rgba(106, 154, 78, 0); }
    40% { box-shadow: 0 0 24px rgba(106, 154, 78, 0.6); }
    100% { box-shadow: 0 0 0 rgba(106, 154, 78, 0); }
}

/* --- 移动端触控按压反馈 --- */
@media (hover: none) {
    .btn:active, .nav-link-btn:active, .filter-btn:active, .timeline-card:active {
        transform: scale(0.97);
        transition: transform 0.08s ease;
    }
}

/* --- 无障碍降级：用户偏好减少动态时关闭全部动画 --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
}

/* --- 滚动条与选中文字（暗色金边） --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0c0c0e; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2a2a30, #1e1e24);
    border-radius: 5px;
    border: 2px solid #0c0c0e;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(201,158,74,.5), #2a2a30); }
::selection {
    background: rgba(201, 158, 74, 0.3);
    color: #fff;
    text-shadow: 0 0 6px rgba(201, 158, 74, 0.5);
}

/* ========================================
   移动端适配 v2
   ======================================== */

/* 触摸目标最小 44px + 安全区 */
@media (max-width: 768px) {
    .nav-link-btn, .nav-login-btn, .nav-submit-btn, .filter-btn, .btn, .cta-button {
        min-height: 44px;
    }
    .main-footer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
    body { padding-bottom: env(safe-area-inset-bottom); }
}

/* 导航抽屉：滑入动画 + 下拉层级 */
@media (max-width: 768px) {
    .main-nav { position: relative; }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        flex-direction: column;
        background: rgba(8, 8, 10, 0.98);
        padding: 1.2rem 1.5rem;
        gap: 0.4rem;
        border-bottom: 1px solid rgba(201, 158, 74, 0.2);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
        z-index: var(--z-nav);
        transform-origin: top;
        animation: navSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @keyframes navSlideIn {
        from { opacity: 0; transform: translateY(-8px) scaleY(0.98); }
        to { opacity: 1; transform: translateY(0) scaleY(1); }
    }
    .nav-links.active { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links .nav-link-btn {
        width: 100%;
        text-align: left;
        padding: 12px 8px;
        font-size: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        background: none;
        border-left: 2px solid transparent;
        border-radius: 0;
    }
    .nav-links .nav-link-btn.active {
        border-left-color: var(--accent-gold);
        color: var(--accent-gold);
        background: rgba(201, 158, 74, 0.06);
    }
    .nav-right { margin-left: auto; }
}

/* 首页装饰移动端降级：隐藏部分高频装饰，降低资源占用 */
@media (max-width: 768px) {
    .rune-3, .rune-4, .rune-5 { display: none; }
    .hero h1 { font-size: 2.6rem !important; }
    .hero-stats { gap: 1.2rem; }
}

/* 卡片/网格移动端单列 */
@media (max-width: 640px) {
    .timeline-cards { grid-template-columns: 1fr !important; }
    .mythos-grid { grid-template-columns: 1fr !important; }
    .form-row-4, .form-row-2, .form-row { grid-template-columns: 1fr !important; }
    .detail-meta-bar { flex-wrap: wrap; gap: 6px 12px; }
    .ch-editor-row { flex-direction: column; }
}

/* 弹窗移动端全屏化（底部抽屉式） */
@media (max-width: 640px) {
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        margin: 0 !important;
        border-radius: 14px 14px 0 0 !important;
        position: fixed;
        bottom: 0;
        left: 0;
    }
    .modal { align-items: flex-end; padding: 0; }
    .modal-header { padding: 1.5rem 1.5rem 1rem; }
    .modal-body { padding: 1.2rem 1.5rem 2rem; max-height: 76vh; overflow-y: auto; }
    .coc-modal { width: 92vw; max-width: 92vw; }
}

/* 守密人工具移动端 */
@media (max-width: 768px) {
    .keeper-layout { flex-direction: column; }
    .ch-main-nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
    .ch-main-tab { white-space: nowrap; flex-shrink: 0; }
    .ch-sub-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ch-sub-tab { white-space: nowrap; flex-shrink: 0; }
    .kpv2-npc-grid, .kpv2-encounter-grid, .kpv2-cb-pickgrid { grid-template-columns: 1fr !important; }
    .cc-attr-grid, .attr-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 投稿移动端 */
@media (max-width: 640px) {
    #sform-module .form-row-4, #sform-module .form-row-2 { grid-template-columns: 1fr !important; }
    .sf-draft-bar { flex-wrap: wrap; }
    .draft-card { flex-direction: column; align-items: stretch !important; }
    .draft-card-cover, .draft-card-cover-placeholder { width: 100% !important; max-width: 100% !important; }
}

/* 后台管理移动端 */
@media (max-width: 768px) {
    .admin-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .admin-nav-btn { white-space: nowrap; flex-shrink: 0; padding: 10px 14px; }
    main { padding: 16px 12px 60px; }
    header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    header .actions { flex-wrap: wrap; }
    .module-item { flex-direction: column; align-items: flex-start; gap: 8px; }
    .module-item .btns { width: 100%; justify-content: flex-end; }
    .form-row-4, .form-row-2, .form-row { grid-template-columns: 1fr 1fr !important; }
    .ch-tab-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .ch-tab-btn { flex-shrink: 0; }
}

/* 防滚动链 */
body, .modal, .ch-img-modal { overscroll-behavior: contain; }

/* 守密人导入文件区 */
.kpv2-import-file-zone { margin-top: 10px; padding: 14px; border: 1px dashed rgba(201,158,74,0.35); border-radius: 6px; text-align: center; color: #8a7a60; font-size: 13px; cursor: pointer; transition: all .2s; }
.kpv2-import-file-zone:hover { border-color: #c99e4a; color: #c99e4a; background: rgba(201,158,74,0.05); }
.kpv2-import-file-zone.drag-over { border-color: #c99e4a; background: rgba(201,158,74,0.1); box-shadow: 0 0 12px rgba(201,158,74,0.15); }
/* 导入弹窗内结果提示（成功后停留弹窗，可继续导入或取消关闭） */
.kpv2-import-status { margin-top: 10px; padding: 9px 12px; border-radius: 6px; font-size: 13px; line-height: 1.6; animation: kpv2-chaseIn 0.3s ease-out both; }
.kpv2-import-status.ok { background: rgba(80,140,90,0.12); border-left: 3px solid #6a9a4e; color: #9ab89a; }
.kpv2-import-status.err { background: rgba(180,60,70,0.12); border-left: 3px solid #d44d5e; color: #d0a0a0; }

/* ========================================
   我的角色库
   ======================================== */
.inv-roster { margin: 0 auto 24px; max-width: 900px; }
.inv-roster-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.inv-roster-head h2 { color: #c99e4a; font-size: 17px; font-family: var(--font-display); letter-spacing: .06em; }
.inv-roster-valhalla-link { color: #8a7a60; font-size: 13px; cursor: pointer; transition: color .2s; }
.inv-roster-valhalla-link:hover { color: #d4a090; }
.inv-search { width: 100%; max-width: 420px; padding: 9px 14px; background: rgba(20,20,26,0.8); border: 1px solid #2a2a2e; border-radius: 8px; color: #d0d0c8; font-size: 13px; font-family: inherit; margin-bottom: 14px; box-sizing: border-box; transition: border-color .2s, box-shadow .2s; }
.inv-search:focus { outline: none; border-color: rgba(201,158,74,.65); box-shadow: 0 0 0 1px rgba(201,158,74,.2), 0 0 14px rgba(201,158,74,.08); }
.inv-search::placeholder { color: #6a6040; }
.inv-search-empty { color: #6a6040; padding: 24px; text-align: center; font-size: 14px; }
.inv-roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.inv-roster-card { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "av info" "actions actions"; gap: 10px 12px; padding: 12px 14px; background: rgba(20,20,26,0.6); border: 1px solid #2a2a2e; border-radius: 10px; transition: border-color .2s, transform .15s; align-items: start; }
.inv-roster-card:hover { border-color: rgba(201,158,74,0.35); transform: translateY(-1px); }
.inv-roster-card.dead { filter: grayscale(1); background: rgba(16,16,18,0.8); border-color: #333; opacity: .85; }
.inv-roster-card.dead:hover { border-color: #555; }
.inv-card-avatar { grid-area: av; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(201,158,74,0.3); background: #141418; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inv-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.inv-card-avatar-ph { font-size: 26px; color: #6a6040; }
.inv-roster-card.dead .inv-card-avatar { border-color: #444; }
.inv-card-info { grid-area: info; min-width: 0; }
.inv-card-title { color: #d0d0c8; font-weight: bold; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv-card-badge { font-size: 10px; padding: 1px 8px; border-radius: 10px; }
.inv-card-badge.alive { background: rgba(90,160,110,0.15); color: #8ab89a; border: 1px solid rgba(90,160,110,0.3); }
.inv-card-badge.dead { background: rgba(120,120,120,0.15); color: #aaa; border: 1px solid #555; }
.inv-card-meta { color: #8a7a60; font-size: 12px; margin-top: 2px; }
.inv-card-stats { color: #6a6040; font-size: 11px; margin-top: 3px; }
.inv-card-epitaph { color: #a09080; font-size: 12px; font-style: italic; margin-top: 4px; }
.inv-card-actions { grid-area: actions; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; padding-top: 2px; border-top: 1px solid rgba(255,255,255,0.04); }
.inv-card-actions .btn { white-space: nowrap; }
.inv-death-btn { border-color: #8b3a3a; color: #d44d5e; }
.inv-death-btn:hover { background: rgba(139,58,58,0.15); }
.inv-roster-empty { text-align: center; padding: 30px 0; color: #6a6040; }
.inv-roster-empty p { margin: 4px 0; }
.inv-roster-hint { font-size: 13px; color: #5a554e; }
.inv-roster-login-hint { font-size: 12px; color: #c99e4a; }

/* ---- 角色库工具栏：搜索 + 导入角色卡 ---- */
.inv-roster-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.inv-roster-toolbar .inv-search { flex: 1 1 240px; margin-bottom: 0; max-width: none; }
.inv-import-card-btn {
    margin-left: auto; flex: 0 0 auto;
    padding: 9px 16px; font-size: 13px; font-family: inherit; cursor: pointer;
    color: #d4b880; background: rgba(201,158,74,0.1);
    border: 1px solid rgba(201,158,74,0.35); border-radius: 8px;
    transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.inv-import-card-btn:hover { background: rgba(201,158,74,0.2); border-color: rgba(201,158,74,0.6); color: #f0d8a0; transform: translateY(-1px); }
.inv-import-card-btn:active { transform: translateY(0); }

/* ---- 导入角色卡弹窗 ---- */
.inv-cardimp-box { width: 640px; }
.inv-cardimp-body { padding: 0 18px 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.inv-cardimp-body::-webkit-scrollbar { width: 6px; }
.inv-cardimp-body::-webkit-scrollbar-thumb { background: #33333a; border-radius: 3px; }
.inv-cardimp-card {
    display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center;
    padding: 12px 14px; text-align: left;
    background: rgba(201,158,74,0.06); border: 1px solid rgba(201,158,74,0.22); border-radius: 10px;
}
.inv-cardimp-avatar { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #14141a; display: flex; align-items: center; justify-content: center; border: 1px solid #2a2a2e; }
.inv-cardimp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.inv-cardimp-avatar .kpv2-char-card-ph { font-size: 28px; color: #4a4538; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.inv-cardimp-name { font-size: 16px; color: #e6d8b8; font-weight: 600; }
.inv-cardimp-occ { font-size: 12px; color: #8a7a60; margin-top: 2px; }
.inv-cardimp-stats { font-size: 13px; color: #c0b090; margin-top: 6px; }
.inv-cardimp-stats small { color: #7a7060; font-size: 11px; }
.inv-cardimp-sub { font-size: 12px; color: #6a6040; margin-top: 4px; }
.inv-cardimp-q { font-size: 14px; color: #d0d0c8; margin: 18px 0 10px; text-align: left; }
.inv-cardimp-q2 { font-size: 12px; color: #8a7a60; margin: 18px 0 10px; text-align: left; }
.inv-cardimp-q2 span { color: #6a6040; }
.inv-cardimp-choice {
    display: block; width: 100%; box-sizing: border-box;
    padding: 13px 16px; font-size: 14px; font-family: inherit; cursor: pointer;
    color: #d4b880; background: rgba(201,158,74,0.1);
    border: 1px solid rgba(201,158,74,0.35); border-radius: 10px;
    transition: background .2s, border-color .2s, color .2s;
}
.inv-cardimp-choice:hover { background: rgba(201,158,74,0.2); border-color: rgba(201,158,74,0.6); color: #f0d8a0; }
.inv-cardimp-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 640px) {
    .inv-cardimp-list { grid-template-columns: 1fr; }
    .inv-import-card-btn { margin-left: 0; width: 100%; }
}
.cc-btn-save { background: rgba(201,158,74,0.12); border-color: #c99e4a; color: #ffd080; }
.cc-btn-save:hover { background: rgba(201,158,74,0.2); }
@media (max-width: 640px) {
    .inv-roster-grid { grid-template-columns: 1fr; }
}

/* ========================================
   调查员页：三卡片目录
   ======================================== */
.inv-dir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; margin: 0 auto 26px;
    /* 选中视图后整块收起来（高度由 JS 量一次写死，动画才跟得上实际高度）。
       overflow 只在收起态才开——默认状态开着会把 hover 的上浮与阴影裁掉（v2.14.35 修的） */
    max-height: 1200px;
    transition: max-height .34s cubic-bezier(.4,0,.2,1), opacity .24s ease,
                transform .34s cubic-bezier(.4,0,.2,1), margin-bottom .34s cubic-bezier(.4,0,.2,1);
}
.inv-dir.is-collapsed { max-height: 0 !important; overflow: hidden; opacity: 0; transform: translateY(-10px) scale(.98); margin-bottom: 0; pointer-events: none; }
/* 三张入口大卡：竖长 + 底图（v2.14.54）
   整块是一张照片，下半部渐隐到页面底色，标题压在深色区上——像三张立在桌上的档案封套。
   底图放在独立的 .inv-dir-bg 里，这样悬停能用 transform 放大（不改 background-size，性能好）。 */
.inv-dir-card { position: relative; overflow: hidden; aspect-ratio: 3 / 4; cursor: pointer; text-align: center;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 16px 16px 20px; border: 1px solid #2a2a2e; border-radius: 12px; background: #0e0e11;
    transition: border-color .25s, transform .18s, box-shadow .25s; }
.inv-dir-bg { position: absolute; inset: 0; background-position: center 34%; background-size: cover; background-repeat: no-repeat;
    transition: transform .55s cubic-bezier(.2,.7,.3,1), filter .3s; }
.dir-create .inv-dir-bg { background-image: url('img/dir-create.jpg'); background-image: image-set(url('img/dir-create.webp') type('image/webp'), url('img/dir-create.jpg') type('image/jpeg')); }
.dir-roster .inv-dir-bg { background-image: url('img/dir-roster.jpg'); background-image: image-set(url('img/dir-roster.webp') type('image/webp'), url('img/dir-roster.jpg') type('image/jpeg')); }
.dir-valhalla .inv-dir-bg { background-image: url('img/dir-valhalla.jpg'); background-image: image-set(url('img/dir-valhalla.webp') type('image/webp'), url('img/dir-valhalla.jpg') type('image/jpeg')); }
/* 下半部渐隐：38% 起开始压暗，到 88% 已是页面底色，文字就压在纯深色上 */
.inv-dir-card::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,10,12,0) 36%, rgba(10,10,12,0.55) 60%, rgba(10,10,12,0.92) 82%, #0c0c0e 100%); }
.inv-dir-card > .inv-dir-title, .inv-dir-card > .inv-dir-desc { position: relative; z-index: 1; }
.inv-dir-card:hover { border-color: rgba(201,158,74,0.45); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.inv-dir-card:hover .inv-dir-bg { transform: scale(1.05); }
.inv-dir-card.active { border-color: #c99e4a; box-shadow: 0 0 22px rgba(201,158,74,0.14); }
.inv-dir-card.active .inv-dir-bg { filter: brightness(1.06); }
.inv-dir-title { font-family: var(--font-display); font-size: 18px; color: #e6dcc4; letter-spacing: .12em; margin-bottom: 7px; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.inv-dir-title::before { content: ''; display: block; width: 26px; height: 1px; margin: 0 auto 9px; background: rgba(201,158,74,0.6); }
.inv-dir-card.active .inv-dir-title { color: #ffd080; }
.inv-dir-desc { font-size: 12px; color: #8b8371; line-height: 1.65; text-shadow: 0 1px 8px rgba(0,0,0,0.8); }

/* ====== 选中视图后的标签条：替代三张大卡，占一行，随时换视图 ======
   样式对齐帷幕的 .lore-tabs（一条底边线 + 当前项下划线），**不做成胶囊**——
   胶囊跟下面「1. 骰点属性 → 2. 职业与技能 …」的步骤指示器太像，会互相混淆。
   这里只在配色上保留本页的金色主调（帷幕那边是红）。 */
.inv-viewbar {
    display: flex; gap: 0; justify-content: center;
    max-width: 900px; margin: 0 auto;
    border-bottom: 1px solid var(--border-color);
    max-height: 0; opacity: 0; transform: translateY(-8px); overflow: hidden;
    transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .26s ease,
                transform .3s cubic-bezier(.4,0,.2,1), margin-bottom .3s ease;
    transition-delay: 0s;
}
/* 顶出来的时候晚 60ms，让三张大卡先收一点，两段动画看起来是一口气的 */
.inv-viewbar.is-on { max-height: 72px; opacity: 1; transform: none; margin-bottom: 20px; transition-delay: .06s; }
.inv-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 13px 26px; background: none; border: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    color: var(--text-secondary);
    font-family: var(--font-serif); font-size: 14px; letter-spacing: .12em;
    transition: color .2s, background .2s, border-color .2s;
}
.inv-tab .vb-icon { font-size: 15px; line-height: 1; filter: grayscale(1); transition: filter .2s; }
.inv-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.02); }
.inv-tab:hover .vb-icon { filter: none; }
.inv-tab.active {
    color: #e8cf9a;
    border-bottom-color: #c99e4a;
    background: rgba(201,158,74,0.05);
}
.inv-tab.active .vb-icon { filter: none; }
.inv-tab:focus-visible { outline: 1px solid rgba(201,158,74,0.6); outline-offset: -3px; }
/* 切换视图时内容轻轻浮上来，避免生硬跳变 */
@keyframes invViewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.inv-view.view-in { animation: invViewIn .3s cubic-bezier(.4,0,.2,1); }
@media (max-width: 700px) {
    .inv-tab { padding: 11px 12px; font-size: 13px; letter-spacing: .04em; }
    .inv-tab .vb-icon { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .inv-dir, .inv-viewbar, .inv-tab { transition: none !important; }
    .inv-view.view-in { animation: none !important; }
}
.inv-view { display: none; }
.inv-view.active { display: block; }
/* 英灵殿视图 */
.inv-valhalla { max-width: 900px; margin: 0 auto 24px; }
.inv-valhalla-list { display: flex; flex-direction: column; gap: 10px; }
.inv-valhalla-card { display: flex; gap: 14px; padding: 14px 16px; background: rgba(16,16,18,0.85); border: 1px solid #2a2a2e; border-radius: 10px; filter: grayscale(1); }
.inv-valhalla-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid #444; background: #181818; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inv-valhalla-avatar img { width: 100%; height: 100%; object-fit: cover; }
.inv-valhalla-ph { font-size: 28px; color: #555; }
.inv-valhalla-info { flex: 1; min-width: 0; }
.inv-valhalla-name { color: #b0b0b0; font-weight: bold; font-size: 15px; }
.inv-valhalla-owner { font-size: 11px; color: #666; font-weight: normal; }
.inv-valhalla-meta { font-size: 12px; color: #8a7a60; margin-top: 2px; }
.inv-valhalla-epitaph { font-size: 13px; color: #a09080; font-style: italic; margin-top: 6px; }
.inv-valhalla-cause { font-size: 12px; color: #7a6a5a; margin-top: 4px; }
.inv-valhalla-bio { margin-top: 6px; }
.inv-valhalla-bio summary { font-size: 12px; color: #8a7a60; cursor: pointer; }
.inv-valhalla-bio div { font-size: 13px; color: #a8a095; line-height: 1.8; margin-top: 6px; padding: 8px 10px; background: rgba(0,0,0,0.2); border-radius: 6px; white-space: pre-wrap; max-height: 200px; overflow-y: auto; }
.inv-valhalla-incense { font-size: 12px; color: #6a5a4a; margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.inv-incense-pop { display: inline-block; animation: invIncensePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); color: #d4a855; }
@keyframes invIncensePop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
.inv-valhalla-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; flex-shrink: 0; }
@media (max-width: 768px) {
    .inv-dir { grid-template-columns: 1fr; }
    /* 窄屏三张竖长卡会拖很长：改成偏横的比例，并把取景抬高一点（人脸/主体别被裁掉） */
    .inv-dir-card { aspect-ratio: 4 / 3; }
    .inv-dir-bg { background-position: center 30%; }
    .inv-valhalla-card { flex-direction: column; }
    .inv-valhalla-actions { flex-direction: row; }
}

/* ========================================
   调查员头像：上传 / 裁剪 / 预览
   ======================================== */
.cc-info-head-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.cc-avatar-zone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border: 1px dashed rgba(201,158,74,0.3); border-radius: 10px; background: rgba(20,20,26,0.4); min-width: 180px; }
.cc-avatar-zone.drag-over { border-color: #c99e4a; background: rgba(201,158,74,0.08); box-shadow: 0 0 12px rgba(201,158,74,0.15); }
/* 头像框按角色卡上的档案照比例（110×154 = 35:49），JS 也会按同一比例算一次 */
.cc-avatar-preview { width: 110px; height: 154px; border-radius: 10px; overflow: hidden; border: 2px solid rgba(201,158,74,0.35); background: #141418; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, width .2s, height .2s; }
.cc-avatar-preview:hover { border-color: #c99e4a; }
.cc-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.cc-avatar-placeholder { text-align: center; color: #6a6040; font-size: 12px; line-height: 1.5; }
.cc-btn-sm { padding: 5px 12px; font-size: 12px; }
.cc-btn-danger { border-color: #8b3a3a; color: #d44d5e; }
.cc-btn-danger:hover { background: rgba(139,58,58,0.15); }
.cc-crop-body { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cc-crop-stage { position: relative; width: 100%; height: 320px; background: repeating-conic-gradient(#111 0% 25%, #1a1a1e 0% 50%) 50% / 24px 24px; border: 1px solid #2a2a2e; border-radius: 8px; overflow: hidden; touch-action: none; cursor: grab; }
.cc-crop-stage:active { cursor: grabbing; }
.cc-crop-mask { position: absolute; border: 2px solid rgba(201,158,74,0.8); box-shadow: 0 0 0 9999px rgba(0,0,0,0.55); pointer-events: none; }
.cc-crop-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cc-crop-controls label { font-size: 12px; color: #8a7a60; display: flex; align-items: center; gap: 6px; }
.cc-crop-controls input[type=range] { width: 140px; }
.cc-crop-hint { color: #5a554e; font-size: 11px; }
@media (max-width: 640px) { .cc-crop-stage { height: 220px; } .cc-info-head-row { flex-direction: column; align-items: center; } }

/* 帷幕/人物卡：加过点（职业点或兴趣点）的技能给一层浅金底，和默认技能区分开 */
.kpv2-check-skill-row.kpv2-skill-invested {
    background: linear-gradient(90deg, rgba(201, 158, 74, 0.14) 0%, rgba(201, 158, 74, 0.05) 70%, transparent 100%);
    border-left: 2px solid rgba(201, 158, 74, 0.55);
}
.kpv2-check-skill-card.kpv2-skill-invested {
    background: linear-gradient(180deg, rgba(201, 158, 74, 0.16) 0%, rgba(201, 158, 74, 0.05) 100%);
    border-color: rgba(201, 158, 74, 0.45);
}
.kpv2-check-skill-row.kpv2-skill-invested .kpv2-check-skill-row-val,
.kpv2-check-skill-card.kpv2-skill-invested .kpv2-check-skill-val { color: #e8cf94; }

/* 棋子脸：兜底字在下、头像在上（头像加载失败时露出字，不再出现空白脸） */
.kpv2-combat-token .kpv2-tk-face-ph,
.kpv2-combat-token .kpv2-tk-face-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
}
.kpv2-combat-token .kpv2-tk-face-ph {
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: #d8cdb6; letter-spacing: 0;
}
.kpv2-combat-token .kpv2-tk-face-img { object-fit: cover; }

/* 弹窗标题行：右侧放动作按钮（与人物详情右上角同一套位置与风格） */
.kpv2-pop-title-acts { display: flex; align-items: center; gap: 10px; }
.kpv2-pop-title-acts .kpv2-pcacts { margin-left: auto; display: inline-flex; gap: 8px; }

/* 表Ⅷ 结果卡里的「自动掷出的子判定」逐条清单 */
.kpv2-madness-extra { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.9; color: #cfc6b4; }
.kpv2-madness-extra li { margin: 3px 0; }
.kpv2-madness-extra b { color: #e8cf94; }

/* 沙盘选人弹窗：已经在沙盘里的调查员盖一层红色纯色蒙版（一眼看出「已入场」）
   蒙版 pointer-events:none，点击仍然有效（点一下可以把人从别的场景移过来） */
.kpv2-pc-wrap { position: relative; }
.kpv2-pc-wrap.is-onboard::after {
    content: ''; position: absolute; inset: 0; border-radius: 10px;
    background: rgba(196, 42, 54, .26);   /* 更柔和的纯色红：能看出入场，又不抢卡片内容 */
    border: 1px solid rgba(212, 90, 100, .45);
    pointer-events: none; z-index: 2;
}
.kpv2-pc-wrap.is-onboard > * { position: relative; z-index: 1; }
/* 注意：这里**不能**写 position:relative —— 会把上面那条「贴右上角」的绝对定位覆盖掉，
   徽标就回到文档流里、又把这行卡片顶高一截（正是用户报的现象）。 */
.kpv2-pc-wrap.is-onboard .kpv2-pc-in-tag {
    z-index: 4; background: rgba(150, 24, 34, .92); color: #ffe3e3;
    border-color: rgba(255, 140, 140, .5); font-weight: bold;
}

/* 环境伤害弹窗：原生 select / number 在深色主题里是白底方块，很扎眼 —— 统一外观 */
.kpv2-env-in, .kpv2-env-sel {
    font-family: inherit; font-size: 14px; color: #e6dcc4;
    background: #1b1b22; border: 1px solid rgba(201, 158, 74, .35); border-radius: 6px;
    padding: 8px 10px; line-height: 1.4; outline: none;
}
.kpv2-env-in { width: 84px; text-align: center; }
.kpv2-env-in:focus, .kpv2-env-sel:focus { border-color: var(--gold, #c99e4a); box-shadow: 0 0 0 2px rgba(201, 158, 74, .15); }
/* 数字输入框的上下箭头在深色底上很脏，去掉 */
.kpv2-env-in::-webkit-outer-spin-button, .kpv2-env-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kpv2-env-in { -moz-appearance: textfield; appearance: textfield; }
.kpv2-env-sel {
    appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, #c99e4a 50%), linear-gradient(135deg, #c99e4a 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.kpv2-env-sel option { background: #1b1b22; color: #e6dcc4; }
.kpv2-env-unit { font-size: 13px; color: #9a9284; margin: 0 4px; }
/* 结算按钮：文字别贴边 */
.kpv2-env-go { min-height: 34px; padding: 7px 18px; font-size: 14px; line-height: 1.4; }

/* ===== 环境伤害弹窗（重排）=====
   结构：标题 + 三张「一行一块」的卡片（左：名称/一行提示；右：控件 + 主按钮）+ 底部关闭。
   原来三块规则文字与按钮混排，读起来乱；现在一屏看完、一眼知道点哪儿。 */
.kpv2-env-card {
    width: min(92vw, 480px); background: #16161c; border: 1px solid #2c2c36;
    border-radius: 12px; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px;
}
.kpv2-env-title {
    font-size: 15px; color: #e6dcc4; letter-spacing: .06em; text-align: center;
    padding-bottom: 10px; border-bottom: 1px solid #26262e;
}
.kpv2-env-title em { font-style: normal; color: #c99e4a; margin-left: 6px; }
.kpv2-env-sec {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 12px; border: 1px solid #26262e; border-radius: 8px; background: #1b1b22;
}
.kpv2-env-l { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kpv2-env-name { font-size: 14px; color: #e6dcc4; }
.kpv2-env-hint { font-size: 12px; color: #8d8676; line-height: 1.5; }
.kpv2-env-r { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; margin-left: auto; }
.kpv2-env-foot { display: flex; justify-content: flex-end; padding-top: 6px; }
.kpv2-env-close { min-height: 32px; padding: 6px 16px; font-size: 13px; opacity: .8; }
.kpv2-env-close:hover { opacity: 1; }
@media (max-width: 480px) {
    .kpv2-env-sec { flex-direction: column; align-items: stretch; }
    .kpv2-env-r { justify-content: flex-end; }
}

/* 环境伤害的「结算框」：掷骰结果、HP 变化、下一步提示 */
.kpv2-env-res { padding: 12px 14px; border: 1px solid #2c2c36; border-radius: 8px; background: #1b1b22; display: flex; flex-direction: column; gap: 8px; }
.kpv2-env-res-line { font-size: 14px; color: #d8cdb6; line-height: 1.7; }
.kpv2-env-res-hp { font-size: 15px; color: #e6dcc4; }
.kpv2-env-res-hp b { color: #d46a70; }
.kpv2-env-res-tip { font-size: 12.5px; color: #8d8676; line-height: 1.6; }
.kpv2-env-m { font-size: 12px; color: #8d8676; margin-left: 2px; }

/* 添加怪物列表：已经放进沙盘的怪物 → 红色蒙版 + 右上角「已入场 ×N」徽标 */
.kpv2-char-card { position: relative; }
.kpv2-char-card.is-onboard::after {
    content: ''; position: absolute; inset: 0; border-radius: 10px;
    background: rgba(196, 42, 54, .30);
    border: 1px solid rgba(232, 110, 120, .65);
    pointer-events: none; z-index: 2;
}
/* 注意：**不能**给所有子元素加 position —— 头像 .kpv2-char-card-avatar 本身是 position:absolute
   （64px 铺在卡片左侧），被改成 relative 就会挤进栅格、图片错位变形（用户报的「选中后图片变这样」）。
   只抬高文字块，蒙版留在它们下面。 */
.kpv2-char-card.is-onboard .kpv2-char-card-info,
.kpv2-char-card.is-onboard .kpv2-char-card-stats { position: relative; z-index: 3; }
.kpv2-char-card.is-onboard .kpv2-char-card-name { z-index: 3; }
.kpv2-char-card.is-onboard .kpv2-char-card-on-tag {
    display: inline-block; margin-left: 8px; vertical-align: 2px;
    position: relative; z-index: 3;
    background: #b8222f; color: #fff; border: 1px solid rgba(255, 170, 175, .55);
    border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: bold;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* ===== 怪物 / NPC 编辑弹窗的头部 =====
   头像铺在头部当背景，底部用 mask 渐隐；名字压在下半部、字号更大，类型跟在名字后面。
   按钮仍在右上角（.kpv2-pcacts）。 */
.kpv2-pop-hero { position: relative; overflow: hidden; border-radius: 10px 10px 0 0; margin: -18px -18px 6px; }
.kpv2-pop-hero-bg {
    position: absolute; left: 0; right: 0; top: 0; height: 132px;
    background-size: cover; background-position: center 22%; opacity: .85;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.75) 45%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.75) 45%, rgba(0,0,0,0) 100%);
}
.kpv2-pop-hero .kpv2-pop-title { position: relative; z-index: 1; border-bottom: 0; padding-top: 52px; align-items: center; }
.kpv2-pop-hero.has-avatar .kpv2-pop-title { padding-top: 96px; }
.kpv2-pop-hero.has-avatar .kpv2-pop-hero-bg { height: 180px; }
.kpv2-pop-hero .kpv2-pop-title-t { font-size: 23px; line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.kpv2-pop-hero .kpv2-pop-title em { font-size: 13px; color: #b9a884; align-self: flex-end; padding-bottom: 3px; }

/* 头部顶部的暗角：让按钮与标题在亮图上也有足够对比 */
.kpv2-pop-hero::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 88px; z-index: 1;
    background: linear-gradient(to bottom, rgba(8, 8, 12, .72) 0%, rgba(8, 8, 12, .28) 60%, rgba(8, 8, 12, 0) 100%);
    pointer-events: none;
}
/* 按钮组本身不加底板（用户：只要按钮自己有深色背景就行） */
.kpv2-pop-hero .kpv2-pcacts { background: none; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* 每个按钮各自带半透明深色底，压在图上也看得清 */
.kpv2-pop-hero .kpv2-pbtn {
    color: #f0e6d0; background: rgba(12, 12, 16, .74);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.kpv2-pop-hero .kpv2-pbtn.is-primary { color: #ffe6b0; border-color: rgba(201, 158, 74, .65); }
.kpv2-pop-hero .kpv2-pbtn.is-danger { color: #ffb8bd; border-color: rgba(212, 90, 100, .6); }
.kpv2-pop-title-acts .kpv2-pcacts { flex-direction: row; align-items: center; gap: 6px; }
.kpv2-pop-title-acts .kpv2-pbtn { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; letter-spacing: .02em; -webkit-font-smoothing: antialiased; }

/* 沙盘右下角的「网页全屏」按钮：默认低调，悬停才亮，避免挡住底图细节 */
.kpv2-board-full {
    /* 放回右下角原位；给固定最小宽度，让左侧的「下一位」用 calc 偏移时不会因文案变化而重叠 */
    position: absolute; right: 14px; bottom: 14px; z-index: 7;
    min-width: 70px; text-align: center;
    padding: 5px 10px; font-size: 12px; font-family: inherit; cursor: pointer;
    color: #d8cdb6; background: rgba(12, 12, 16, .62); border: 1px solid rgba(201, 158, 74, .38);
    border-radius: 7px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: .68; transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.kpv2-board-full:hover { opacity: 1; color: #ffe6b0; border-color: rgba(201, 158, 74, .75); }
/* 网页全屏 + 沙盘铺满视口：整页全屏（浮层/瞄准线都在同一棵树里，天然可见），
   再把沙盘 fixed 盖满屏幕，视觉上等同"沙盘全屏"，但交互一点不少。 */
body.is-boardfs { overflow: hidden; }
body.is-boardfs #combatBoard {
    position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 5;
    border-radius: 0; margin: 0;
}
body.is-boardfs .kpv2-board-full { opacity: .9; z-index: 8; }
/* 浮层压在最上层，全屏时也照常弹 */
body.is-boardfs .kpv2-combat-overlay,
body.is-boardfs .kpv2-check-overlay { position: fixed; z-index: 2147483000; }

/* 投屏端的标记（战斗沙盘里「也显示」的那些） */
.proj-mark {
    position: absolute; transform: translate(-50%, -50%);
    /* 正圆：固定宽高 + 50% 圆角（之前用 min-width+padding+999px 会变成胶囊/椭圆） */
    width: 26px; height: 26px; padding: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; line-height: 1; color: var(--mk, #c99e4a);
    background: rgba(10, 10, 14, .78); border: 2px solid var(--mk, #c99e4a);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5); box-sizing: border-box;
}

/* 编辑弹窗里的布尔项：用滑块开关（比勾选框更清楚「开/关」，也不那么扎眼） */
.kpv2-exp-check {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    font-size: 13px; color: #9a9284; transition: color .15s ease;
}
.kpv2-exp-check:hover { color: #c9bea8; }
.kpv2-exp-check:has(input:checked) { color: #e0d3b2; }
.kpv2-exp-check input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; margin: 0; flex: 0 0 auto; cursor: pointer;
    position: relative; width: 36px; height: 20px; border-radius: 999px;
    background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
    transition: background .18s ease, border-color .18s ease;
}
.kpv2-exp-check input[type="checkbox"]:hover { border-color: rgba(201, 158, 74, .55); }
/* 滑块：关闭时偏灰白，开启时深色（与金色轨道形成对比） */
.kpv2-exp-check input[type="checkbox"]::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #cfc7b6; box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    transition: transform .18s cubic-bezier(.4, 0, .2, 1), background .18s ease;
}
.kpv2-exp-check input[type="checkbox"]:checked {
    background: linear-gradient(180deg, rgba(201, 158, 74, .95), rgba(150, 112, 40, .95));
    border-color: rgba(232, 207, 148, .85);
}
.kpv2-exp-check input[type="checkbox"]:checked::after {
    transform: translateX(16px); background: #1b1b22;
}
.kpv2-exp-check input[type="checkbox"]:focus-visible { outline: 2px solid rgba(201, 158, 74, .5); outline-offset: 2px; }

/* 投屏的自定义悬停浮窗（替代原生 title） */
.proj-tip {
    position: fixed; z-index: 2147483000; pointer-events: none;
    max-width: 320px; padding: 7px 11px; border-radius: 8px;
    background: rgba(14, 14, 18, .96); color: #ddd4c2;
    border: 1px solid rgba(201, 158, 74, .45);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
    font-size: 13px; line-height: 1.6; letter-spacing: .02em;
    white-space: pre-line; word-break: break-word;
}

/* 沙盘底部工具栏：三行（视角工具 / 画笔 / 标记）统一排版
   原来三行各自 flex + 不同 margin，标签宽度也不一，看起来参差。 */
.kpv2-cb-boardtools,
.kpv2-exp-tools,
#bdMarkBar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0; padding: 0;
}
/* 只有「没有标签的第一行」需要左内边距；画笔那行（#bdInkTools）自己带标签，不能二次偏移 */
.kpv2-cb-boardtools { padding-left: 0; }
.kpv2-cb-boardtools:not(#bdInkTools) { padding-left: 52px; }
/* 画笔行与标记行：标签 + 内容同一基线 */
#bdInkTools { margin-top: 8px; }
/* 行间距统一 */
.kpv2-cb-boardtools + .kpv2-exp-tools,
.kpv2-cb-boardtools + #bdMarkBar,
.kpv2-exp-tools + #bdMarkBar { margin-top: 8px; }
/* 标签列：固定宽度 + 右对齐，三行标签起点/正文起点都一致 */
.kpv2-bd-lab,
.kpv2-bd-toollab {
    flex: 0 0 44px; width: 44px; text-align: right;
    font-size: 11.5px; color: #6a6040; letter-spacing: .08em; margin: 0;
}
/* 行内容统一最小高度，按钮高低不一时不跳动 */
.kpv2-cb-boardtools > button,
.kpv2-exp-tools > button,
#bdMarkBar > button { min-height: 26px; }
@media (max-width: 720px) {
    .kpv2-cb-boardtools { padding-left: 0; }
    .kpv2-bd-lab, .kpv2-bd-toollab { flex: 0 0 auto; width: auto; text-align: left; }
}

/* 沙盘工具栏：三行统一（覆盖 .kpv2-bd-line 与 .kpv2-bd-toollab 两种结构）
   行结构不同是排版乱的根源：标记行用 .kpv2-bd-line（自带 margin-bottom），
   画笔行用 .kpv2-bd-toollab + 直接子按钮。这里把它们拉到同一套尺寸上。 */
.kpv2-cb-boardtools:not(#bdInkTools) { margin-top: 12px; }   /* 与棋盘拉开距离 */
#bdInkTools, #bdMarkBar, #expTools { margin: 8px 0 0; min-height: 30px; }
#bdInkTools > .kpv2-bd-toollab,
.kpv2-bd-line > .kpv2-bd-lab {
    flex: 0 0 44px; width: 44px; min-width: 44px; text-align: right;
    font-size: 11.5px; letter-spacing: .08em; margin: 0;
}
.kpv2-bd-line { margin: 0; gap: 8px; align-items: center; }
.kpv2-bd-linebody { gap: 8px; }
/* 画笔/标记行的按钮与图标统一高度 */
#bdInkTools .kpv2-cb-mini, #bdMarkBar .kpv2-cb-mini, #expTools .kpv2-cb-mini { min-height: 26px; }
.kpv2-exp-marks { padding: 2px 6px; }
.kpv2-exp-mark { width: 26px; height: 26px; }

/* 探索模式下 #bdMarkBar 是空容器（标记行渲染在 #expTools 里）：
   空着时不要占位，否则画笔行与标记行之间会多出一大段空白。 */
#bdMarkBar:empty { display: none; margin: 0; min-height: 0; }

/* ===== 全屏（body.is-boardfs）下的工具栏布局 =====
   用户要求「全屏下一切交互效果都要能看到」：以前 #combatBoard 是 fixed 铺满整屏，
   而模式条 / 主操作行 / 三行工具栏都在棋盘**外面**，被整块压住 —— 全屏后「适配 / 底图 /
   画笔 / 标记」全都点不到。现在把它们浮到视口上下两端，棋盘自己上下各让出一块高度，
   互不遮挡（只留一点呼吸间隙），行距保持一致。 */
body.is-boardfs {
    --bd-fs-top: 108px;      /* 顶部两块：模式条 + 主操作行（压缩后） */
    --bd-fs-bottom: 112px;   /* 底部三行：32px×3 + 2px×2 + 上下留白 */
}
body.is-boardfs #combatBoard { inset: var(--bd-fs-top) 0 var(--bd-fs-bottom) 0; height: auto; }

/* 顶部：模式条（探索⇄战斗 / 投影窗口）+ 主操作行（加人 / 下一位 / 结束并记录） */
body.is-boardfs #boardModeBar,
body.is-boardfs #bdCombatHead,
body.is-boardfs #bdExploreScene {
    position: fixed; left: 20px; right: 20px; z-index: 6; margin: 0;
    padding: 4px 12px; border-radius: 10px;
    background: #0f0f14; border: 1px solid rgba(201, 158, 74, .3);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
}
body.is-boardfs #boardModeBar { top: 6px; }
body.is-boardfs #bdCombatHead,
body.is-boardfs #bdExploreScene { top: 52px; }

/* 底部三行：视角工具（适配 / 底图 / 清除底图 / 重排站位 / 自动下一位）、画笔、标记
   压缩版：每行 32px 高、行间 2px（720p 窗口下棋盘可视高度从 358px 提到 ~420px），三条都在 z-index:6 */
body.is-boardfs .kpv2-cb-boardtools,
body.is-boardfs #bdMarkBar,
body.is-boardfs #expTools {
    position: fixed; left: 20px; right: 20px; z-index: 6; margin: 0;
    padding: 2px 12px; border-radius: 10px; min-height: 0;
    /* 三行统一高度，行距才真的一致（内容更宽时横向滚动，不会把行撑高错位） */
    height: 32px; box-sizing: border-box;
    background: #0f0f14; border: 1px solid rgba(201, 158, 74, .3);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
}
body.is-boardfs .kpv2-cb-boardtools:not(#bdInkTools) { bottom: 76px; }
body.is-boardfs #bdInkTools { bottom: 42px; }
body.is-boardfs #bdMarkBar,
body.is-boardfs #expTools { bottom: 8px; }
/* 空行一定不占位：探索模式下标记行在 #expTools 里，#bdMarkBar 是空的 */
body.is-boardfs #bdMarkBar:empty { display: none; }

/* 全屏专用的模式切换按钮（探索 ⇄ 战斗）：棋盘内部浮动，永远压在棋盘之上。
   全屏时外面那条 #boardModeBar 有可能被 fixed 棋盘或祖先的包含块挡住看不到，
   这份是兜底：位置固定在棋盘顶部中央，z-index 拉满。 */
.kpv2-bd-modefab { display: none; }
body.is-boardfs .kpv2-bd-modefab {
    display: flex; align-items: center; gap: 8px;
    position: fixed; top: calc(var(--bd-fs-top, 108px) + 8px); left: 50%;
    transform: translateX(-50%); z-index: 2147483000; pointer-events: auto;
}
body.is-boardfs .kpv2-bd-modefab .kpv2-bd-mode {
    background: rgba(14, 14, 18, .92); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(201, 158, 74, .45); border-radius: 999px;
    padding: 5px 14px; font-size: 12.5px; color: #d8c9a8; font-family: inherit;
    cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
body.is-boardfs .kpv2-bd-modefab .kpv2-bd-mode:hover {
    border-color: rgba(232, 207, 148, .9); color: #ffeccb;
    background: rgba(26, 24, 20, .95);
}

/* ===== 全屏：模式条与三行工具栏（JS 实测高度定位） =====
   之前用写死的 --bd-fs-top/bottom 换算台高度，换分辨率或页头占位不同就会压住左上角文字；
   改成弹性列后，真实 DOM 的父级高度链不可靠，棋盘反而塌成 0 高。
   最终方案：这些条都 fixed 贴边，位置由 combatBoardFsLayout() 实测后写 top/bottom，
   棋盘用 inset 占中间的剩余区间 —— 任何分辨率都不会遮挡。 */
body.is-boardfs header,
body.is-boardfs .site-header,
body.is-boardfs .kpv2-kp-tabs,
body.is-boardfs .lore-tabs { display: none !important; }

body.is-boardfs #boardModeBar,
body.is-boardfs #bdCombatHead,
body.is-boardfs #bdExploreScene {
    position: fixed; left: 20px; right: 20px; z-index: 6; margin: 0;
    padding: 4px 12px; border-radius: 10px;
    background: #0f0f14; border: 1px solid rgba(201, 158, 74, .3);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
}
body.is-boardfs .kpv2-cb-boardtools,
body.is-boardfs #bdMarkBar,
body.is-boardfs #expTools {
    position: fixed; left: 20px; right: 20px; z-index: 6; margin: 0;
    padding: 2px 12px; border-radius: 10px; min-height: 0;
    height: 32px; box-sizing: border-box;
    background: #0f0f14; border: 1px solid rgba(201, 158, 74, .3);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
}
body.is-boardfs #bdMarkBar:empty { display: none; }
/* 棋盘：位置由 JS 写 inline style（inset），这里只兜底 */
body.is-boardfs #combatBoard { border-radius: 10px; margin: 0; }
/* 模式切换按钮：贴棋盘顶部中央（JS 写 top） */
body.is-boardfs .kpv2-bd-modefab {
    display: flex; align-items: center; gap: 8px;
    position: fixed; left: 50%; transform: translateX(-50%);
    z-index: 2147483000; pointer-events: auto;
}

/* 标记工具栏与下方时间轴（战斗）之间留一点空隙：两行贴太紧，看着像挤在一起。
   探索模式下 #bdMarkBar 是空容器（display:none），这条不影响探索布局。 */
#bdMarkBar { margin-bottom: 12px; }
/* 战斗时间轴（棋子条）自身不需要额外上边距，间距由上面那条统一给 */
#bdCombatFlow { margin-top: 0; }

/* 投屏端：帧与帧之间用过渡插值，避免「一跳一跳」的卡顿感。
   KP 每 250ms 发布一帧，这里用 260ms 的 linear 过渡把两个位置连起来，视觉上就是连续移动。 */
.proj-stage .kpv2-combat-token,
.proj-stage .proj-mark,
.proj-stage .kpv2-exp-label {
    transition: left .26s linear, top .26s linear, opacity .2s linear;
}
/* 正在做攻击/瞄准特效时不要过渡（否则线和棋子会脱节） */
.proj-stage.is-fx .kpv2-combat-token { transition: opacity .12s linear; }

/* 投屏结果条：用透明度+位移做淡入淡出（以前是 display 硬切，看着一闪一闪） */
.proj-fx-banner {
    opacity: 0; transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease;
}
.proj-fx-banner.is-on { opacity: 1; transform: translateY(0); }

/* ===== 投屏结果条：按检定等级上色 + 动画（与站点暗金主题一致） =====
   等级：5 大成功 / 4 极难 / 3 困难 / 2 常规 / 1 失败 / 0 大失败。
   以前只有一种颜色、无动画，玩家看不出成败；现在用**描边 + 光晕 + 轻微动效**区分，
   大成功/大失败额外加一次脉冲，疯狂用紫红（发作）与冷紫（总结）两套。 */

/* 基础：默认常规成功（暖金） */
.proj-fx-banner.is-check {
    border-color: rgba(201, 158, 74, .55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55), inset 0 0 22px rgba(201, 158, 74, .12);
}
.proj-fx-banner.is-check .proj-fx-banner-main { color: #f0d9a6; }

/* 常规成功：金 */
.proj-fx-banner.is-check.is-ok { border-color: rgba(201, 158, 74, .6); }
/* 困难成功：青绿 */
.proj-fx-banner.is-check.is-hard {
    border-color: rgba(120, 200, 160, .6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55), inset 0 0 22px rgba(120, 200, 160, .14);
}
.proj-fx-banner.is-check.is-hard .proj-fx-banner-main { color: #a8e8c8; }
/* 极难成功：亮青 */
.proj-fx-banner.is-check.is-extreme {
    border-color: rgba(110, 200, 220, .7);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55), inset 0 0 26px rgba(110, 200, 220, .18);
}
.proj-fx-banner.is-check.is-extreme .proj-fx-banner-main { color: #b6ecf6; }
/* 大成功：金 + 脉冲 */
.proj-fx-banner.is-check.is-crit {
    border-color: rgba(240, 210, 130, .95);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .6), 0 0 26px rgba(240, 210, 130, .35), inset 0 0 26px rgba(240, 210, 130, .22);
    animation: projCritPulse 1.1s ease-in-out 2;
}
.proj-fx-banner.is-check.is-crit .proj-fx-banner-main { color: #ffe9b8; }
/* 失败：灰 */
.proj-fx-banner.is-check.is-fail {
    border-color: rgba(150, 150, 170, .45);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55), inset 0 0 22px rgba(150, 150, 170, .1);
}
.proj-fx-banner.is-check.is-fail .proj-fx-banner-main { color: #bfbccb; }
/* 大失败：暗红 + 抖动 */
.proj-fx-banner.is-check.is-fumble {
    border-color: rgba(212, 77, 94, .8);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .6), 0 0 24px rgba(212, 77, 94, .35), inset 0 0 26px rgba(212, 77, 94, .2);
    animation: projFumbleShake .5s ease-in-out 1;
}
.proj-fx-banner.is-check.is-fumble .proj-fx-banner-main { color: #ff9fae; }

@keyframes projCritPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-3px) scale(1.035); }
}
@keyframes projFumbleShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    45% { transform: translateX(5px); }
    70% { transform: translateX(-3px); }
}

/* ===== 疯狂：两套特殊样式 ===== */
/* 发作（此刻）：紫红 + 呼吸光 + 极轻微抖动（比大失败克制，避免刷屏时晃眼） */
.proj-fx-banner.is-madness.is-onset {
    border-color: rgba(178, 96, 210, .85);
    background: linear-gradient(180deg, rgba(46, 20, 54, .96), rgba(26, 14, 30, .96));
    box-shadow: 0 10px 34px rgba(0, 0, 0, .62), 0 0 28px rgba(178, 96, 210, .32), inset 0 0 26px rgba(178, 96, 210, .18);
    animation: projMadnessBreath 2.2s ease-in-out infinite;
}
.proj-fx-banner.is-madness.is-onset .proj-fx-banner-who { color: #d8a8ee; }
.proj-fx-banner.is-madness.is-onset .proj-fx-banner-main { color: #f0c8ff; }
.proj-fx-banner.is-madness.is-onset .proj-fx-banner-roll { color: #c79ae8; }

/* 总结症状（事后）：冷紫 + 雾化（更沉、更慢） */
.proj-fx-banner.is-madness.is-summary {
    border-color: rgba(120, 140, 210, .8);
    background: linear-gradient(180deg, rgba(24, 26, 48, .96), rgba(16, 18, 30, .96));
    box-shadow: 0 10px 34px rgba(0, 0, 0, .62), 0 0 30px rgba(120, 140, 210, .28), inset 0 0 30px rgba(120, 140, 210, .16);
    animation: projMadnessHaze 3.4s ease-in-out infinite;
}
.proj-fx-banner.is-madness.is-summary .proj-fx-banner-who { color: #a8b6e8; }
.proj-fx-banner.is-madness.is-summary .proj-fx-banner-main { color: #d6e0ff; }
.proj-fx-banner.is-madness.is-summary .proj-fx-banner-roll { color: #93a6d8; }

@keyframes projMadnessBreath {
    0%, 100% { box-shadow: 0 10px 34px rgba(0,0,0,.62), 0 0 22px rgba(178,96,210,.26), inset 0 0 24px rgba(178,96,210,.16); }
    50% { box-shadow: 0 10px 34px rgba(0,0,0,.62), 0 0 34px rgba(178,96,210,.44), inset 0 0 30px rgba(178,96,210,.24); }
}
@keyframes projMadnessHaze {
    0%, 100% { filter: blur(0px); opacity: .96; }
    50% { filter: blur(.4px); opacity: 1; }
}

/* 头顶飘字同理：按等级区分颜色（失败/大失败偏红灰，成功偏青金） */
.proj-fx-dmg.is-hard { color: #a8e8c8; }
.proj-fx-dmg.is-extreme { color: #b6ecf6; }
.proj-fx-dmg.is-crit { color: #ffe9b8; text-shadow: 0 0 14px rgba(240, 210, 130, .75); }
.proj-fx-dmg.is-fail { color: #b9b6c6; }
.proj-fx-dmg.is-fumble { color: #ff9fae; text-shadow: 0 0 14px rgba(212, 77, 94, .7); }

/* ===== 理智检定：底部操作条 + 拉线 + 选中高亮 ===== */
.kpv2-sanbar {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; z-index: 30;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(14, 14, 18, .94); border: 1px solid rgba(178, 96, 210, .55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 22px rgba(178, 96, 210, .22);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.kpv2-sanbar-t { font-size: 12.5px; color: #e6d6f5; }
.kpv2-sanbar-n { font-size: 12px; color: #b98fd6; }
/* 拉线：一条细紫线 + 轻微流动 */
.kpv2-sanlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; }
.kpv2-sanline {
    stroke: rgba(200, 130, 240, .8); stroke-width: 2; stroke-dasharray: 7 6;
    stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(178, 96, 210, .55));
    animation: kpv2SanFlow 1.1s linear infinite;
}
@keyframes kpv2SanFlow { to { stroke-dashoffset: -26; } }
/* 选中的调查员棋子：紫色外圈提示 */
.kpv2-combat-token.is-san-pick .kpv2-combat-token-face {
    box-shadow: 0 0 0 3px rgba(190, 120, 240, .85), 0 0 18px rgba(178, 96, 210, .55);
}
/* 弹窗里的理智检定按钮 */
.kpv2-pbtn.is-san { border-color: rgba(178, 96, 210, .6); color: #dcb6f5; }
.kpv2-pbtn.is-san:hover { border-color: rgba(210, 150, 250, .9); color: #f0d6ff; }

/* 怪物弹窗底部的「理智检定」动作行：独立一整行，不再和保存/移出挤在右上角 */
.kpv2-sanrow {
    /* 自适应：公式长了就换行，按钮不许被挤出卡片 */
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px 12px; flex-wrap: wrap;
    margin: 14px 0 4px; padding: 10px 12px; border-radius: 10px;
    background: linear-gradient(180deg, rgba(40, 22, 48, .55), rgba(22, 18, 28, .55));
    border: 1px solid rgba(178, 96, 210, .38);
}
.kpv2-sanrow-t {
    font-size: 12.5px; color: #c9b6dc;
    flex: 1 1 190px; min-width: 0;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.75;
}
.kpv2-sanrow-t b { color: #e6c8ff; font-size: 13.5px; margin: 0 4px; }
.kpv2-sanrow-t em { font-style: normal; font-size: 11px; color: #8f7fa8; margin-left: 2px; }
/* 多条理智损失：每条一行，标签淡紫、骰式亮紫 */
.kpv2-sanrow-lb { font-style: normal; color: #c9b6dc; margin-right: 6px; }
.kpv2-sanrow + .kpv2-sanrow { margin-top: 8px; }
/* 图鉴详情里的多条理智损失 */
.mythos-san.is-multi { display: block; }
.mythos-san-row { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.mythos-san-lb { color: #b8a8cc; font-size: 12.5px; }
.mythos-san-row strong { color: #e6c8ff; }
.kpv2-sanrow-btn {
    padding: 6px 12px; border-radius: 8px; flex: 0 0 auto; margin-left: auto; cursor: pointer; font-family: inherit; font-size: 12.5px;
    color: #f0d6ff; background: rgba(120, 60, 150, .32); border: 1px solid rgba(190, 120, 240, .55);
    transition: all .15s ease; white-space: nowrap;
}
.kpv2-sanrow-btn:hover { background: rgba(150, 80, 190, .45); border-color: rgba(220, 160, 255, .85); }
/* 只写了触发条件、没写骰式：明确标出来，按钮禁用 */
.kpv2-sanrow-miss { color: #d0a060; font-weight: 600; }
.kpv2-sanrow-btn.is-off { opacity: .45; cursor: not-allowed; }
.kpv2-sanrow-btn.is-off:hover { background: rgba(120, 60, 150, .32); border-color: rgba(190, 120, 240, .55); }
/* 窄屏（手机 / 侧栏）：按钮单独占一行，公式占满宽度 */
@media (max-width: 560px) {
    .kpv2-sanrow { padding: 10px; }
    .kpv2-sanrow-btn { width: 100%; margin-left: 0; text-align: center; }
}

/* 投屏端：理智检定的紫线 + 目标环（与主屏同一套视觉） */
.proj-sanline {
    stroke: rgba(200, 130, 240, .85); stroke-width: 4; stroke-dasharray: 14 12;
    stroke-linecap: round; animation: projSanFlow 1.1s linear infinite;
}
.proj-sanring {
    fill: none; stroke: rgba(214, 150, 255, .9); stroke-width: 4;
    filter: drop-shadow(0 0 10px rgba(178, 96, 210, .8));
    animation: projSanRing 1.6s ease-in-out infinite;
}
@keyframes projSanFlow { to { stroke-dashoffset: -52; } }
@keyframes projSanRing { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* ===== 理智检定结果面板（替换原来那段纯灰字 + 无意义的 ⓘ） =====
   每人一行：名字 / 理智条 / 前后数值 / 骰值 / 等级 / 损失，等级沿用投影那套配色。 */
.kpv2-sanres { text-align: left; }
.kpv2-sanres-head { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(201, 158, 74, .22); }
.kpv2-sanres-title { font-size: 16px; font-weight: bold; color: #f0d9a6; letter-spacing: .04em; }
.kpv2-sanres-sub { margin-top: 4px; font-size: 12.5px; color: #a99e8c; }
.kpv2-sanres-sub em { font-style: normal; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    color: #e6c8ff; background: rgba(120, 60, 150, .3); border: 1px solid rgba(190, 120, 240, .45); font-size: 11.5px; }
.kpv2-sanres-row {
    display: grid; grid-template-columns: minmax(72px, 1fr) 86px auto auto auto auto;
    align-items: center; gap: 10px; padding: 7px 10px; margin-bottom: 4px;
    border-radius: 8px; background: rgba(255, 255, 255, .025); border-left: 3px solid rgba(150, 150, 170, .5);
}
.kpv2-sanres-name { font-size: 13.5px; color: #e0d6c2; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpv2-sanres-bar { position: relative; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.kpv2-sanres-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #6ac46a; }
.kpv2-sanres-num { font-size: 13px; color: #cfc6b4; font-variant-numeric: tabular-nums; }
.kpv2-sanres-num span { color: #6a6040; margin: 0 4px; }
.kpv2-sanres-roll { font-size: 12px; color: #9a9284; font-variant-numeric: tabular-nums; }
.kpv2-sanres-lv { font-size: 12.5px; font-weight: bold; }
.kpv2-sanres-loss { font-size: 13px; font-weight: bold; color: #d44d5e; font-variant-numeric: tabular-nums; }
.kpv2-sanres-note { margin: -2px 0 8px 13px; font-size: 11.5px; color: #9a9284; line-height: 1.5; }

/* 等级配色（与投影结果条一致） */
.kpv2-sanres-row.is-crit { border-left-color: #f0d282; background: rgba(240, 210, 130, .1); }
.kpv2-sanres-row.is-crit .kpv2-sanres-lv { color: #ffe9b8; }
.kpv2-sanres-row.is-extreme { border-left-color: #6ec8dc; background: rgba(110, 200, 220, .09); }
.kpv2-sanres-row.is-extreme .kpv2-sanres-lv { color: #b6ecf6; }
.kpv2-sanres-row.is-hard { border-left-color: #78c8a0; background: rgba(120, 200, 160, .08); }
.kpv2-sanres-row.is-hard .kpv2-sanres-lv { color: #a8e8c8; }
.kpv2-sanres-row.is-ok { border-left-color: #c99e4a; }
.kpv2-sanres-row.is-ok .kpv2-sanres-lv { color: #f0d9a6; }
.kpv2-sanres-row.is-fail { border-left-color: #9696aa; }
.kpv2-sanres-row.is-fail .kpv2-sanres-lv { color: #bfbccb; }
.kpv2-sanres-row.is-fumble { border-left-color: #d44d5e; background: rgba(212, 77, 94, .1); }
.kpv2-sanres-row.is-fumble .kpv2-sanres-lv { color: #ff9fae; }
.kpv2-sanres-note.is-fumble, .kpv2-sanres-note.is-fail { color: #c9a2a6; }

/* 通知窗口（重新设计）：头部标题+未读徽标+全部已读，卡片式条目，底部单个关闭。
   与站点暗金主题一致；窄屏自适应。 */
.notif-wrap {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    font-family: var(--font-body, 'Noto Sans SC', 'Microsoft YaHei', sans-serif);
}
.notif-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(201, 158, 74, .18);
}
.notif-title {
    font-size: 16px;
    color: #e6dcc4;
    letter-spacing: .04em;
}
.notif-badge {
    font-size: 11.5px;
    padding: 2px 8px;
    border-radius: 999px;
    color: #ffd080;
    border: 1px solid rgba(201, 158, 74, .45);
    background: rgba(201, 158, 74, .12);
}
.notif-badge.is-zero {
    color: #7a8a76;
    border-color: rgba(122, 138, 118, .4);
    background: rgba(122, 138, 118, .08);
}
.notif-head-sp { flex: 1 1 auto; }
.notif-readall {
    font-family: inherit;
    font-size: 12.5px;
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
    color: #c9b48a;
    border: 1px solid rgba(201, 158, 74, .3);
    background: rgba(201, 158, 74, .06);
    transition: all .18s;
}
.notif-readall:hover { color: #ffd080; border-color: rgba(201, 158, 74, .65); background: rgba(201, 158, 74, .14); }

.notif-list {
    max-height: min(58vh, 460px);
    overflow-y: auto;
    padding: 10px 2px 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.notif-list::-webkit-scrollbar { width: 8px; }
.notif-list::-webkit-scrollbar-thumb { background: rgba(201, 158, 74, .25); border-radius: 4px; }

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #24242a;
    background: #16161c;
    transition: border-color .18s, background .18s, transform .18s;
}
.notif-item.is-unread {
    border-color: rgba(201, 158, 74, .34);
    background: linear-gradient(90deg, rgba(201, 158, 74, .10), rgba(201, 158, 74, .02));
}
.notif-item.is-link { cursor: pointer; }
.notif-item:hover { border-color: rgba(201, 158, 74, .55); background: rgba(201, 158, 74, .07); }
.notif-item.is-link:hover { transform: translateX(2px); }

.notif-ico {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 15px;
    background: rgba(201, 158, 74, .10);
    border: 1px solid rgba(201, 158, 74, .22);
}
.notif-body { flex: 1 1 auto; min-width: 0; }
.notif-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #8a8272;
    margin-bottom: 3px;
}
.notif-meta b { color: #d8cbb0; font-weight: 600; font-size: 12.5px; }
.notif-kind {
    font-size: 11px;
    color: #c99e4a;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(201, 158, 74, .10);
}
.notif-time { margin-left: auto; color: #6f6a60; font-size: 11.5px; }
.notif-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: #cfc7b8;
    word-break: break-word;
}
.notif-go {
    flex: 0 0 auto;
    align-self: center;
    color: rgba(201, 158, 74, .55);
    font-size: 20px;
    line-height: 1;
}
.notif-item.is-link:hover .notif-go { color: #ffd080; }

.notif-foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    margin-top: 6px;
    border-top: 1px solid rgba(201, 158, 74, .14);
}
.notif-close {
    font-family: inherit;
    font-size: 13px;
    padding: 8px 22px;
    border-radius: 8px;
    cursor: pointer;
    color: #e6dcc4;
    border: 1px solid rgba(201, 158, 74, .35);
    background: rgba(201, 158, 74, .12);
    transition: all .18s;
}
.notif-close:hover { background: rgba(201, 158, 74, .22); border-color: rgba(201, 158, 74, .7); }

.notif-empty {
    text-align: center;
    padding: 28px 10px 18px;
    color: #8a8272;
    font-size: 13.5px;
}
.notif-empty-ico { font-size: 30px; margin-bottom: 8px; }

@media (max-width: 560px) {
    .notif-meta { font-size: 11.5px; }
    .notif-text { font-size: 13px; }
    .notif-list { max-height: 56vh; }
    .notif-item { padding: 9px 10px; }
    .notif-ico { flex-basis: 26px; width: 26px; height: 26px; font-size: 13px; }
}

/* 通知弹窗：比通用弹窗宽一些，紧跟站点暗金主题 */
.coc-modal.plain.coc-modal--notif {
    max-width: 560px;
    width: min(560px, 94vw);
    padding: 46px 22px 16px; /* 给右上角 X 留出整行高度，避免和「全部已读 / 被拒」重叠 */
    text-align: left;
}
.coc-modal--notif .coc-modal-msg { max-height: none; overflow: visible; }
@media (max-width: 560px) {
    .coc-modal.plain.coc-modal--notif { padding: 42px 14px 12px; }
}

.mysub-loading { padding: 30px 12px; text-align: center; color: #a8a095; font-size: 13px; letter-spacing: .08em; }
/* ===== 「我的投稿」列表（复用通知窗口的头部/列表骨架） ===== */
.mysub-wrap .notif-list { max-height: min(60vh, 520px); }
.mysub-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #24242a;
    border-radius: 10px;
    background: #16161c;
    transition: border-color .18s, background .18s;
}
.mysub-item:hover { border-color: rgba(201, 158, 74, .45); background: rgba(201, 158, 74, .05); }
.mysub-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mysub-title { font-size: 14px; color: #e6dcc4; font-weight: 600; }
.mysub-chip {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.mysub-chip.is-ok { color: #9ee09e; border-color: rgba(106, 196, 106, .45); background: rgba(106, 196, 106, .1); }
.mysub-chip.is-no { color: #ff9aa9; border-color: rgba(212, 77, 94, .45); background: rgba(212, 77, 94, .1); }
.mysub-chip.is-pending { color: #ffd080; border-color: rgba(201, 158, 74, .45); background: rgba(201, 158, 74, .1); }
.mysub-note {
    margin-top: 5px;
    font-size: 12px;
    color: #d8a0a8;
    background: rgba(212, 77, 94, .07);
    border-left: 2px solid rgba(212, 77, 94, .5);
    padding: 3px 8px;
    border-radius: 0 4px 4px 0;
}
.mysub-note.is-dim { color: #8a8272; background: rgba(255, 255, 255, .03); border-left-color: rgba(255, 255, 255, .15); }
.mysub-acts { display: flex; gap: 12px; flex: 0 0 auto; align-self: center; }
.mysub-act {
    font-family: inherit;
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 7px;
    cursor: pointer;
    color: #e6dcc4;
    border: 1px solid rgba(201, 158, 74, .4);
    background: rgba(201, 158, 74, .1);
    white-space: nowrap;
    transition: all .18s;
}
.mysub-act:hover { background: rgba(201, 158, 74, .22); border-color: rgba(201, 158, 74, .75); }
.mysub-stat { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; }
.mysub-stat.is-pending { color: #ffd080; background: rgba(201, 158, 74, .1); }
.mysub-stat.is-ok { color: #9ee09e; background: rgba(106, 196, 106, .1); }
.mysub-stat.is-no { color: #ff9aa9; background: rgba(212, 77, 94, .1); }

/* ===== 审核预览（后台）：大窗 + 固定头尾 + 可滚动正文 ===== */
@media (max-width: 720px) {
    .subp-modal { width: 100%; height: 92vh; }
    .subp-body { padding: 12px 12px 6px; }
    .mysub-acts { align-self: flex-start; }
}

/* 已取回的投稿：按钮置灰不可点 */
.mysub-act.is-done,
.mysub-act[disabled] {
    cursor: default;
    color: #7a8a76;
    border-color: rgba(122, 138, 118, .4);
    background: rgba(122, 138, 118, .08);
}
.mysub-act.is-done:hover,
.mysub-act[disabled]:hover {
    color: #7a8a76;
    border-color: rgba(122, 138, 118, .4);
    background: rgba(122, 138, 118, .08);
}


/* 作者主页弹窗 */
.author-wrap { max-width: 560px; }
.author-head { display: flex; gap: 12px; align-items: flex-start; padding: 4px 2px 12px; border-bottom: 1px solid rgba(201, 158, 74, .16); }
.author-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mod-border); flex: 0 0 auto; }
.author-avatar.is-text {
    display: flex; align-items: center; justify-content: center;
    background: rgba(201, 158, 74, .14); color: #ffd080; font-size: 22px; font-weight: 600;
}
.author-info { min-width: 0; }
.author-name { font-size: 16px; color: #e6dcc4; font-weight: 600; }
.author-sub { font-size: 12px; color: #8a8272; margin-top: 3px; }
.author-bio { font-size: 13px; color: #cfc7b8; line-height: 1.7; margin-top: 8px; }
.author-mods { padding: 12px 2px 4px; }
.author-mods-t { font-size: 12px; color: #8a7a60; letter-spacing: .08em; margin-bottom: 8px; }
.author-mod {
    display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
    padding: 9px 12px; margin-bottom: 8px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--mod-border); background: #16161c; font-family: inherit;
    transition: border-color .18s, background .18s;
}
.author-mod:hover { border-color: rgba(201, 158, 74, .55); background: rgba(201, 158, 74, .07); }
.author-mod-t { font-size: 13.5px; color: #e6dcc4; }
.author-mod-s { font-size: 12px; color: #8a8272; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* 车卡头像：预设头像选择面板（35:49 竖版头像） */
.avatar-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 12060;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .78);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 20px;
}
.avatar-picker-overlay.show { display: flex; }
.avatar-picker {
    width: min(720px, 96vw);
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    background: #14141a;
    border: 1px solid #2a2a32;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
    overflow: hidden;
}
.avatar-picker-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #24242a;
    background: linear-gradient(180deg, #191920, #14141a);
}
.avatar-picker-t { font-size: 15px; color: #e6dcc4; font-weight: 600; }
.avatar-picker-hint { font-size: 12px; color: #8a8272; }
.avatar-picker-up {
    font-family: inherit;
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 7px;
    cursor: pointer;
    color: #e6dcc4;
    border: 1px solid rgba(201, 158, 74, .4);
    background: rgba(201, 158, 74, .1);
}
.avatar-picker-up:hover { background: rgba(201, 158, 74, .22); border-color: rgba(201, 158, 74, .75); }
.avatar-picker-x {
    width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
    border: 1px solid #2a2a32; background: transparent; color: #a8a095;
}
.avatar-picker-x:hover { color: #ffd080; border-color: rgba(201, 158, 74, .5); }
.avatar-picker-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 12px;
}
.avatar-picker-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    border-radius: 10px;
    cursor: pointer;
    background: #16161c;
    border: 1px solid #24242a;
    font-family: inherit;
    transition: border-color .18s, transform .18s, background .18s;
}
.avatar-picker-item:hover { border-color: rgba(201, 158, 74, .6); transform: translateY(-2px); background: rgba(201, 158, 74, .06); }
.avatar-picker-item.is-on { border-color: #c99e4a; box-shadow: 0 0 0 1px rgba(201, 158, 74, .5) inset; background: rgba(201, 158, 74, .12); }
.avatar-picker-item img {
    width: 100%;
    aspect-ratio: 35 / 49;
    object-fit: cover;
    border-radius: 7px;
    display: block;
}
.avatar-picker-label {
    font-size: 11px;
    color: #a8a095;
    text-align: center;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avatar-picker-loading { grid-column: 1 / -1; padding: 26px; text-align: center; color: #8a8272; font-size: 13px; }
.avatar-picker-foot {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 1px solid #24242a;
    background: #16161c;
}
.avatar-picker-cancel {
    font-family: inherit;
    font-size: 13px;
    padding: 7px 18px;
    border-radius: 8px;
    cursor: pointer;
    color: #cfc7b8;
    border: 1px solid #2f2f38;
    background: transparent;
}
.avatar-picker-cancel:hover { border-color: rgba(201, 158, 74, .6); color: #ffd080; }
@media (max-width: 560px) {
    .avatar-picker-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; padding: 12px; }
    .avatar-picker { max-height: 88vh; }
}


/* 投稿页底部操作栏重排：三个按钮一行放得下、不换行、字看得清
   （原来 .auth-submit-btn 是 width:100%，把另外两个按钮挤成竖排小字） */
#submit.page .sf-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding: 18px 4px 4px;
    border-top: 1px solid rgba(201, 158, 74, .16);
}
#submit.page .sf-actions .sform-cancel {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 11px 18px;
    font-size: 14px;
    font-family: var(--font-body);
    color: #c9b48a;
    border: 1px solid rgba(201, 158, 74, .3);
    border-radius: 8px;
    background: rgba(201, 158, 74, .06);
    transition: all .18s;
}
#submit.page .sf-actions .sform-cancel:hover {
    color: #ffd080;
    border-color: rgba(201, 158, 74, .7);
    background: rgba(201, 158, 74, .14);
}
/* 返回列表放最左，和保存/提交分开 */
#submit.page .sf-actions #backToListBtn { margin-right: auto; }

#submit.page .sf-actions .auth-submit-btn {
    width: auto;
    flex: 0 1 auto;
    min-width: 176px;
    white-space: nowrap;
    padding: 11px 30px;
    font-size: 14.5px;
    font-family: var(--font-body);
    letter-spacing: .04em;
    border-radius: 8px;
    color: #ffb3bf;
}
#submit.page .sf-actions .auth-submit-btn:hover { color: #ffe0e6; }

@media (max-width: 560px) {
    #submit.page .sf-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    #submit.page .sf-actions .sform-cancel,
    #submit.page .sf-actions .auth-submit-btn { width: 100%; margin: 0; }
}

/* ===== 修订横幅（我的投稿 → 编辑） ===== */
.mysub-rev-banner {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 18px; padding: 12px 14px; border-radius: 10px;
    background: rgba(201, 158, 74, .08);
    border: 1px solid rgba(201, 158, 74, .38);
}
.mysub-rev-banner[hidden] { display: none; }
.mysub-rev-ico { font-size: 16px; color: #e0b25a; }
.mysub-rev-txt { display: flex; flex-direction: column; gap: 2px; min-width: 220px; flex: 1; }
.mysub-rev-txt b { color: #f0e3c8; font-size: 14px; font-weight: 600; }
.mysub-rev-txt small { color: #a89a80; font-size: 12px; }
.mysub-rev-note {
    flex: 0 0 220px; padding: 7px 10px; border-radius: 7px;
    background: #14141a; border: 1px solid #2e2e36; color: #d8d2c4;
    font-family: inherit; font-size: 13px;
}
.mysub-rev-cancel {
    flex: 0 0 auto; padding: 7px 12px; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 12.5px;
    background: transparent; border: 1px solid #3a3a44; color: #b0a090;
}
.mysub-rev-cancel:hover { color: #f0e3c8; border-color: #5a5a66; }

/* 我的投稿：修订中标记 + 底部次级入口 */
.mysub-chip.is-orphan { color: #c9a06a; border-color: rgba(201, 160, 106, .45); background: rgba(201, 160, 106, .1); }

/* 「我的作品」卡片对齐：左侧信息块可收缩、右侧按钮垂直居中且不互相挤 */
.mysub-item { align-items: center; }
.mysub-item .notif-body { min-width: 0; }
.mysub-item .mysub-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.mysub-item .mysub-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mysub-item .notif-meta { margin-top: 4px; }
.mysub-chip.is-rev { color: #e0b25a; border-color: rgba(201, 158, 74, .5); background: rgba(201, 158, 74, .12); }
.mysub-foot { display: flex; justify-content: center; padding: 10px 4px 2px; }
.mysub-foot-link {
    background: transparent; border: none; cursor: pointer; font-family: inherit;
    color: #8a7a60; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px;
}
.mysub-foot-link:hover { color: #c9b48a; }
@media (max-width: 620px) {
    .mysub-rev-note { flex: 1 1 100%; }
}

/* 「已入场 N 只」旁边的一次性移除按钮（点一次移出一只） */
.kpv2-char-card-on-tag { display: inline-flex; align-items: center; gap: 4px; }
.kpv2-char-card-on-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; line-height: 1; padding: 0;
    border-radius: 50%; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700;
    background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .45); color: #fff;
}
.kpv2-char-card-on-x:hover { background: #b3261e; border-color: #ff8a80; }

.meta-social { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.mod-like-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 12px; line-height: 1.4; white-space: nowrap;
    color: #a86a70; background: rgba(160, 48, 64, .06);
    border: 1px solid rgba(160, 48, 64, .22);
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.mod-like-btn:hover { color: #ff8b95; border-color: rgba(212, 77, 94, .65); background: rgba(160, 48, 64, .12); }
.mod-like-btn:active { transform: scale(.96); }
.mod-like-btn.is-on { color: #ff7b86; border-color: rgba(212, 77, 94, .65); background: rgba(212, 77, 94, .14); }
.mod-like-btn .social-count, .mod-fav-btn .social-count { font-size: 12px; letter-spacing: .02em; }
@media (max-width: 560px) {
    .meta-social { gap: 5px; }
    .mod-like-btn, .mod-fav-btn { padding: 2px 7px; font-size: 11.5px; }
}
/* ===== 模组卡片右上角的收藏按钮（分类行右侧） ===== */
.module-tagbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: .85rem; }
.mod-fav-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 12px; line-height: 1.4; white-space: nowrap;
    color: #b0a080; background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(201, 158, 74, .35);
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.mod-fav-btn:hover { color: #ffd080; border-color: rgba(201, 158, 74, .85); background: rgba(201, 158, 74, .1); }
.mod-fav-btn:active { transform: scale(.96); }
.mod-fav-btn.is-on { color: #e8c57a; border-color: rgba(201, 158, 74, .72); background: rgba(201, 158, 74, .12); }
.mod-fav-btn.is-on:hover { color: #ffd98f; border-color: rgba(201, 158, 74, .95); }
@media (max-width: 560px) {
    .mod-fav-btn { font-size: 11.5px; padding: 3px 8px; }
}

/* ===== 我的收藏（沿用「我的作品」的卡片列表，补一点自己的细节） ===== */
.myfav-wrap .notif-head { gap: 10px; }
.myfav-item { align-items: center; }
.myfav-item .notif-ico {
    width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    background: rgba(201, 158, 74, .1); border: 1px solid rgba(201, 158, 74, .22); font-size: 16px;
}
.myfav-item .mysub-title { font-size: 15px; }
.myfav-item .mysub-acts .mysub-act { min-width: 58px; }
/* 移除按钮：暗红，别抢「查看」的注意力 */
.mysub-act.is-danger { color: #d08a92; border-color: rgba(212, 77, 94, .35); }
.mysub-act.is-danger:hover { color: #ff8a95; border-color: rgba(212, 77, 94, .8); background: rgba(212, 77, 94, .1); }

/* ===== 模组来源徽章（原创 / 改编 / 转载） ===== */
.module-tagbar-l{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.module-origin{color:#9f8a69;background:rgba(201,158,74,.045);border:1px solid rgba(201,158,74,.16)}
.module-origin-original{color:#83987f;border-color:rgba(120,170,110,.18);background:rgba(120,170,110,.045)}
.module-origin-adapted{color:#9f8a69;border-color:rgba(201,158,74,.18);background:rgba(201,158,74,.045)}
.module-origin-reprint{color:#8398ae;border-color:rgba(120,150,190,.18);background:rgba(120,150,190,.045)}

/* ---------- 沙盘右下角：撤销（不占工具行） ---------- */
.kpv2-board-undo {
    margin-left: auto; padding: 5px 11px; font-size: 12px; font-family: inherit; cursor: pointer;
    color: #d8cdb6; background: rgba(12, 12, 16, .62); border: 1px solid rgba(201, 158, 74, .38);
    border-radius: 6px; transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.kpv2-board-undo:hover { color: #ffe6b0; border-color: rgba(201, 158, 74, .75); background: rgba(201, 158, 74, .1); }
.kpv2-board-undo:disabled { opacity: .34; cursor: default; color: #8a8070; border-color: rgba(255,255,255,.08); }
.kpv2-board-undo:disabled:hover { color: #8a8070; border-color: rgba(255,255,255,.08); background: rgba(12,12,16,.62); }

/* ---------- 沙盘工具行右侧：快捷骰（与左侧工具分隔） ---------- */
.kpv2-board-dice {
    margin-left: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    padding-left: 12px; border-left: 1px solid #2a2a30;
}
.kpv2-board-dice-lab { font-size: 11px; color: #6a6458; letter-spacing: .08em; margin-right: 2px; }
.kpv2-dice-mini {
    min-width: 38px; height: 26px; padding: 0 7px; font: 11px/1 inherit; cursor: pointer;
    color: #c9b98f; background: rgba(255,255,255,0.02);
    border: 1px solid #2c2c34; border-radius: 5px; transition: all .15s ease;
}
.kpv2-dice-mini:hover { color: #ffe6ae; border-color: rgba(201,158,74,.55); background: rgba(201,158,74,.08); }
.kpv2-board-dice-out { min-width: 68px; font-size: 12px; color: #c99e4a; font-variant-numeric: tabular-nums; }
.kpv2-board-dice-out.pop { animation: kpv2DicePop .28s ease; }
@keyframes kpv2DicePop { 0% { transform: scale(.82); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- 底图弹窗：底部操作区 ---------- */
.kpv2-bg-actions { display: flex; align-items: stretch; gap: 9px; margin-top: 12px; }
.kpv2-bg-actions .kpv2-combat-bes-add {
    flex: 1 1 0; min-width: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; padding: 10px 14px; white-space: nowrap;
}
.kpv2-bg-actions .kpv2-combat-bes-add em { font-style: normal; font-size: 11px; opacity: .6; }
.kpv2-bg-clear {
    flex: 0 0 auto !important;
    background: rgba(212, 77, 94, .06) !important;
    border-color: rgba(212, 77, 94, .38) !important;
    color: #cf8d98 !important;
}
.kpv2-bg-clear:hover { background: rgba(212, 77, 94, .14) !important; border-color: rgba(212, 77, 94, .65) !important; color: #ffb6c0 !important; }
.kpv2-bg-foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.kpv2-bg-foot .kpv2-combat-bes-close { margin: 10px 0 0; }
@media (max-width: 520px) {
    .kpv2-bg-actions { flex-wrap: wrap; }
    .kpv2-bg-actions .kpv2-combat-bes-add { flex: 1 1 100%; }
}

/* ---------- 技能选择面板 ---------- */
.skill-sheet { min-width: 320px; max-width: 420px; color: #d8cdb6; }
.skill-sheet-head { display: flex; align-items: baseline; gap: 8px; padding-right: 22px; }
.skill-sheet-head b { font-size: 15px; color: #e8cf9a; font-weight: 600; }
.skill-sheet-head span { font-size: 11px; color: #7a7162; letter-spacing: .08em; }
.skill-sheet-x {
    position: absolute; top: 10px; right: 12px; width: 24px; height: 24px;
    border: 0; border-radius: 6px; background: transparent; color: #7a7162;
    font-size: 13px; line-height: 1; cursor: pointer;
}
.skill-sheet-x:hover { color: #e8cf9a; background: rgba(201,158,74,.1); }
.skill-sheet-hint { margin: 7px 0 12px; font-size: 11px; color: #6f6656; }
.skill-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skill-sheet-btn {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    padding: 9px 10px; border-radius: 7px; cursor: pointer;
    border: 1px solid #2c2c34; background: rgba(255,255,255,.025);
    color: #cfc3ab; font-family: inherit; font-size: 12.5px; text-align: left;
    transition: all .15s ease;
}
.skill-sheet-btn:hover { border-color: rgba(201,158,74,.55); background: rgba(201,158,74,.08); color: #ffe6ae; }
.skill-sheet-btn.is-atk { border-color: rgba(196,72,88,.5); background: rgba(160,48,64,.07); }
.skill-sheet-btn.is-atk .skill-sheet-ic { color: #d4626e; }
.skill-sheet-btn.is-atk:hover { border-color: rgba(220,92,108,.75); background: rgba(160,48,64,.15); color: #ffc3cb; }
.skill-sheet-nm em { font-style: normal; font-size: 10.5px; color: #8f8470; margin-left: 5px; }
.skill-sheet-ic { color: #c99e4a; font-size: 11px; flex: 0 0 auto; }
.skill-sheet-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-sheet-val { flex: 0 0 auto; color: #e0c084; font-variant-numeric: tabular-nums; font-size: 12px; }
@media (max-width: 480px) { .skill-sheet { min-width: 0; } .skill-sheet-grid { grid-template-columns: 1fr; } }

/* ========================================
   帷幕：沙盘 / 战役 目录卡（复用调查员页 .inv-dir 折叠动画）
   ======================================== */
.kp-mode-dir { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-bottom: 18px; }
.kp-dir-sandbox .inv-dir-bg {
    background-image:
        radial-gradient(ellipse at 50% 28%, rgba(201,158,74,.16), transparent 60%),
        repeating-linear-gradient(0deg, rgba(201,158,74,.06) 0 1px, transparent 1px 38px),
        repeating-linear-gradient(90deg, rgba(201,158,74,.06) 0 1px, transparent 1px 38px),
        linear-gradient(180deg, #16151a, #0c0c0e);
}
.kp-dir-campaign .inv-dir-bg {
    background-image:
        radial-gradient(ellipse at 50% 26%, rgba(160,48,64,.20), transparent 62%),
        radial-gradient(ellipse at 20% 80%, rgba(201,158,74,.08), transparent 55%),
        linear-gradient(180deg, #171217, #0c0c0e);
}
.kp-modebar { max-width: 760px; }
.kp-mode-dir .inv-dir-card { aspect-ratio: 16 / 9; }
.kp-mode-dir .inv-dir-title { font-size: 21px; }
.kp-mode-dir .inv-dir-desc { font-size: 12.5px; }

/* 战役页顶部：本机保存说明 */
.kp-campaign-bar {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin: 4px 0 14px; padding: 10px 14px; border-radius: 9px;
    border: 1px solid rgba(201,158,74,.18); background: rgba(201,158,74,.05);
}
.kp-campaign-kicker { color: #e8cf9a; font-size: 12.5px; letter-spacing: .1em; }
.kp-campaign-note { color: #8b8371; font-size: 12px; }

/* 线索 / 房间占位 */
.kp-stage-empty {
    max-width: 640px; margin: 30px auto; padding: 38px 26px; text-align: center;
    border: 1px dashed rgba(201,158,74,.22); border-radius: 12px; background: rgba(255,255,255,.015);
}
.kp-stage-icon { font-size: 26px; color: #c99e4a; opacity: .8; margin-bottom: 10px; }
.kp-stage-empty h3 { font-family: var(--font-display); font-size: 18px; color: #e6dcc4; letter-spacing: .12em; margin-bottom: 10px; }
.kp-stage-empty p { color: #8b8371; font-size: 13px; line-height: 1.9; max-width: 480px; margin: 0 auto 16px; }
.kp-stage-tags { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.kp-stage-tags span {
    padding: 4px 9px; border-radius: 999px; font-size: 11px; color: #a89c86;
    border: 1px solid rgba(201,158,74,.24); background: rgba(201,158,74,.05);
}
.lore-panel.view-in { animation: invViewIn .3s cubic-bezier(.4,0,.2,1); }
@media (max-width: 640px) {
    .kp-mode-dir { grid-template-columns: 1fr; }
    .kp-mode-dir .inv-dir-card { aspect-ratio: 3 / 2; }
}

/* ====== 战役：选择模组 / 当前战役条 ====== */
.kp-campaign-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    max-width: 1000px; margin: 4px auto 14px; padding: 10px 14px;
    border: 1px solid rgba(201,158,74,.22); border-radius: 10px;
    background: linear-gradient(180deg, rgba(201,158,74,.07), rgba(201,158,74,.02));
}
.kp-campaign-head-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kp-campaign-cover { width: 54px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(201,158,74,.25); }
.kp-campaign-head-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kp-campaign-kicker { color: #8b8371; font-size: 11px; letter-spacing: .12em; }
.kp-campaign-head-txt b { color: #e8cf9a; font-family: var(--font-display); font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-campaign-change {
    flex: 0 0 auto; padding: 6px 12px; border-radius: 6px; cursor: pointer;
    font-family: inherit; font-size: 12px; color: #b6a98f; background: transparent;
    border: 1px solid rgba(201,158,74,.3);
}
.kp-campaign-change:hover { color: #ffe6ae; border-color: rgba(201,158,74,.65); background: rgba(201,158,74,.08); }

.kp-campaign-pick {
    max-width: 1000px; margin: 6px auto 20px; padding: 20px 20px 16px;
    border: 1px solid rgba(201,158,74,.2); border-radius: 12px;
    background: linear-gradient(180deg, rgba(24,23,28,.92), rgba(14,14,17,.92));
}
.kp-campaign-pick-head { text-align: center; margin-bottom: 16px; }
.kp-campaign-pick-head h3 { font-family: var(--font-display); font-size: 20px; color: #e6dcc4; letter-spacing: .14em; margin-bottom: 8px; }
.kp-campaign-pick-head p { color: #8b8371; font-size: 12.5px; line-height: 1.8; max-width: 620px; margin: 0 auto; }
.kp-campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.kp-campaign-card {
    display: flex; align-items: stretch; gap: 12px; text-align: left; cursor: pointer;
    padding: 10px; border-radius: 9px; border: 1px solid #2a2a30;
    background: rgba(255,255,255,.02); color: inherit; font-family: inherit;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.kp-campaign-card:hover { border-color: rgba(201,158,74,.55); background: rgba(201,158,74,.06); transform: translateY(-1px); }
.kp-campaign-card-cover, .kp-campaign-card-ph {
    flex: 0 0 68px; width: 68px; height: 86px; border-radius: 6px; object-fit: cover;
    border: 1px solid rgba(201,158,74,.18); background: rgba(201,158,74,.05);
}
.kp-campaign-card-ph { display: flex; align-items: center; justify-content: center; color: #c99e4a; font-size: 22px; }
.kp-campaign-card-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kp-campaign-card-info b { color: #e6dcc4; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-campaign-card-info em { color: #8b8371; font-style: normal; font-size: 11px; letter-spacing: .04em; }
.kp-campaign-card-info > span { color: #7d7566; font-size: 11.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kp-campaign-loading { grid-column: 1 / -1; text-align: center; color: #7d7566; font-size: 12.5px; padding: 24px 10px; }
@media (max-width: 640px) {
    .kp-campaign-head { flex-wrap: wrap; }
    .kp-campaign-grid { grid-template-columns: 1fr; }
}

/* 公墓：私密标记 + 死亡登记公开勾选 */
.inv-valhalla-private {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    font-size: 10.5px; color: #8a7a60; border: 1px solid rgba(138,122,96,.45);
    vertical-align: middle;
}
.inv-death-public {
    display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 2px;
    font-size: 12px; line-height: 1.7; color: #8a7a60; cursor: pointer;
}
.inv-death-public input { margin-top: 3px; accent-color: #c99e4a; }

/* #play：战役准备 */
.play-box { max-width: 760px; margin: 0 auto; }
.play-empty {
    padding: 42px 24px; text-align: center; color: #8b8371; font-size: 13px;
    border: 1px dashed rgba(201,158,74,.24); border-radius: 12px; background: rgba(255,255,255,.015);
}
.play-ready {
    margin-top: 12px; padding: 10px 14px; border-radius: 8px;
    border: 1px solid rgba(110,170,120,.28); background: rgba(110,170,120,.06);
    color: #9fc0a2; font-size: 12px; line-height: 1.7;
}
.play-card-undo { border-color: rgba(201,158,74,.4); color: #d7b06a; }
.play-camp, .play-need-camp, .play-char {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 11px;
    border: 1px solid rgba(201,158,74,.2); background: rgba(255,255,255,.02); margin-bottom: 12px;
}
.play-camp-cover { width: 68px; height: 52px; object-fit: cover; border-radius: 7px; border: 1px solid rgba(201,158,74,.24); }
.play-camp-ph { width: 68px; height: 52px; display: flex; align-items: center; justify-content: center; color: #c99e4a; font-size: 22px; border: 1px solid rgba(201,158,74,.2); border-radius: 7px; }
.play-camp-info, .play-char-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.play-kicker { color: #8b8371; font-size: 11px; letter-spacing: .12em; }
.play-camp-info b, .play-char-info b { color: #e6dcc4; font-family: var(--font-display); font-size: 17px; }
.play-camp-info span, .play-char-info > span { color: #8b8371; font-size: 12px; line-height: 1.7; }
.play-need-camp { flex-direction: column; align-items: flex-start; border-style: dashed; }
.play-need-camp b { color: #e8cf9a; font-size: 14px; }
.play-need-camp span { color: #8b8371; font-size: 12.5px; }
.play-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(201,158,74,.3); flex: 0 0 auto; }
.play-avatar-ph { display: flex; align-items: center; justify-content: center; font-size: 26px; color: #c99e4a; background: rgba(201,158,74,.05); }
.play-stats { display: flex; gap: 14px; margin-top: 4px; color: #8b8371; font-size: 12px; }
.play-stats b { color: #e8cf9a; font-weight: 600; }
.play-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.play-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.inv-join-btn { border-color: rgba(201,158,74,.35); }

/* 战役房间（阶段 5） */
.kp-room-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 4px 0 14px; }
.kp-room-head h3 { font-family: var(--font-display); font-size: 19px; color: #e6dcc4; letter-spacing: .1em; margin-bottom: 6px; }
.kp-room-head p { color: #8b8371; font-size: 12.5px; line-height: 1.8; max-width: 640px; }
.kp-room-badge { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; color: #c9b48a; border: 1px solid rgba(201,158,74,.3); }
.kp-room-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.kp-room-or { color: #6a6040; font-size: 12px; }
.kp-room-code-in { width: 150px; padding: 8px 10px; background: #111118; border: 1px solid #2a2a2e; color: #d0d0c8; border-radius: 6px; font-family: inherit; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; }
.kp-room-box { min-height: 120px; padding: 18px; border: 1px solid rgba(201,158,74,.18); border-radius: 11px; background: rgba(255,255,255,.015); }
.kp-room-empty { color: #7d7566; font-size: 12.5px; text-align: center; padding: 20px 10px; }
.kp-room-live { display: flex; flex-direction: column; gap: 8px; }
.kp-room-code { font-family: var(--font-display); font-size: 34px; letter-spacing: .24em; color: #ffd080; line-height: 1.1; }
.kp-room-title { color: #8b8371; font-size: 12.5px; }
.kp-room-linkrow { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.kp-room-linkrow input { flex: 1 1 260px; min-width: 0; padding: 8px 10px; background: #111118; border: 1px solid #2a2a2e; color: #a8a095; border-radius: 6px; font-size: 12px; }
.kp-room-hint { color: #6a6040; font-size: 11.5px; }

/* 战役线索（阶段 6） */
.kp-clue-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 4px 0 14px; }
.kp-clue-head h3 { font-family: var(--font-display); font-size: 19px; color: #e6dcc4; letter-spacing: .1em; margin-bottom: 6px; }
.kp-clue-head p { color: #8b8371; font-size: 12.5px; line-height: 1.8; max-width: 620px; }
.kp-clue-form { padding: 14px; border: 1px solid rgba(201,158,74,.18); border-radius: 11px; background: rgba(255,255,255,.015); margin-bottom: 14px; }
.kp-clue-form input, .kp-clue-form textarea {
    width: 100%; box-sizing: border-box; padding: 9px 11px; margin-bottom: 8px; border-radius: 7px;
    background: #111118; border: 1px solid #2a2a2e; color: #d0d0c8; font-family: inherit; font-size: 13px; resize: vertical;
}
.kp-clue-form textarea { min-height: 76px; line-height: 1.7; }
.kp-clue-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kp-clue-form-foot span { color: #7d7566; font-size: 11.5px; }
.kp-clue-list { display: flex; flex-direction: column; gap: 9px; }
.kp-clue-card { padding: 12px 14px; border: 1px solid rgba(201,158,74,.2); border-radius: 9px; background: rgba(201,158,74,.04); }
.kp-clue-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.kp-clue-card-head b { color: #e8cf9a; font-size: 14px; }
.kp-clue-card-head span { color: #7d7566; font-size: 11px; }
.kp-clue-card p { color: #b6a98f; font-size: 12.5px; line-height: 1.8; white-space: normal; }
.kp-clue-card-foot { margin-top: 8px; text-align: right; }
.play-clue-list { margin: -4px 0 12px; }
.kp-room-pass { align-self:flex-start; padding:3px 10px; border-radius:999px; font-size:12px; color:#e8cf9a; border:1px solid rgba(201,158,74,.35); background:rgba(201,158,74,.08); }
.kp-room-feed { margin-top:14px; border-top:1px solid rgba(201,158,74,.14); padding-top:10px; display:flex; flex-direction:column; gap:5px; }
.kp-room-feed-empty { color:#6a6040; font-size:12px; text-align:center; padding:8px; }
.kp-room-msg { display:flex; gap:8px; align-items:baseline; font-size:12px; line-height:1.7; }
.kp-room-msg-type { flex:0 0 auto; color:#c99e4a; border:1px solid rgba(201,158,74,.25); border-radius:999px; padding:0 6px; font-size:10.5px; }
.kp-room-msg-who { flex:0 0 auto; color:#8b8371; }
.kp-room-msg-txt { color:#b6a98f; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-clue-form-row { display:flex; gap:8px; margin-bottom:8px; }
.kp-clue-form-row input, .kp-clue-form-row select { flex:1 1 0; margin-bottom:0; }
.kp-clue-form-row select { padding:9px 11px; border-radius:7px; background:#111118; border:1px solid #2a2a2e; color:#d0d0c8; font-family:inherit; font-size:13px; }
.kp-clue-img { max-width:100%; max-height:180px; border-radius:7px; margin:6px 0; border:1px solid rgba(201,158,74,.2); }
.play-board { margin: -4px 0 12px; border:1px solid rgba(201,158,74,.2); border-radius:10px; overflow:hidden; background:#0e0e11; }
.play-board-head { display:flex; justify-content:space-between; padding:8px 12px; color:#8b8371; font-size:12px; border-bottom:1px solid rgba(201,158,74,.12); }
.play-board-head b { color:#e8cf9a; font-weight:600; }
.play-board-canvas { position:relative; height:220px; background: radial-gradient(circle at 50% 40%, rgba(201,158,74,.08), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 24px); }
.play-board-token { position:absolute; transform:translate(-50%,-50%); padding:2px 6px; border:1px solid rgba(201,158,74,.7); border-radius:999px; background:#15151a; color:#d8d2c4; font-size:10.5px; white-space:nowrap; }
.kp-p2p-overlay { position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; padding:20px; }
.kp-p2p-modal { width:min(560px,100%); max-height:86vh; overflow:auto; padding:18px; border-radius:12px; background:#111116; border:1px solid rgba(201,158,74,.32); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.kp-p2p-modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:#e6dcc4; }
.kp-p2p-x { background:none; border:0; color:#8b8371; cursor:pointer; font-size:16px; }
.kp-p2p-modal p { color:#8b8371; font-size:12.5px; line-height:1.8; margin-bottom:10px; }
.kp-p2p-modal textarea { width:100%; box-sizing:border-box; min-height:74px; margin-bottom:8px; padding:9px 10px; border-radius:7px; background:#0d0d10; border:1px solid #2a2a2e; color:#d0d0c8; font-family:monospace; font-size:11px; resize:vertical; }
.kp-p2p-actions { display:flex; gap:7px; flex-wrap:wrap; }
.kp-p2p-status { margin-top:9px; color:#e8cf9a; font-size:12px; }
.kp-p2p summary { color:#8b8371; font-size:12px; cursor:pointer; margin-top:10px; list-style:none; }
.kp-p2p summary::-webkit-details-marker { display:none; }
.kp-p2p summary:hover { color:#e8cf9a; }

/* 战役头：房间入口 + 房间浮窗 */
.kp-campaign-head-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.kp-room-entry {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 38px; padding: 9px 22px; border-radius: 7px; cursor: pointer; font-family: inherit;
    font-size: 14px; font-weight: 600; letter-spacing: .06em; color: #e8cf9a; background: rgba(201,158,74,.10);
    border: 1px solid rgba(201,158,74,.5);
}
.kp-room-entry:hover { background: rgba(201,158,74,.16); }
.kp-room-entry.is-on { border-color: rgba(201,158,74,.7); box-shadow: 0 0 12px rgba(201,158,74,.12); }
.kp-room-overlay { position: fixed; inset: 0; z-index: 88; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; padding: 20px; }
.kp-room-modal {
    width: min(620px, 100%); max-height: 86vh; overflow-y: auto; padding: 18px;
    border-radius: 12px; background: #111116; border: 1px solid rgba(201,158,74,.32);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.kp-room-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kp-room-modal-head b { font-family: var(--font-display); font-size: 18px; color: #e6dcc4; letter-spacing: .12em; }
.kp-room-desc { color: #8b8371; font-size: 12.5px; line-height: 1.8; margin-bottom: 12px; }

/* 线索：笔记 / 分发线索 两个小标签 */
.kp-subtabs { display: flex; gap: 6px; border-bottom: 1px solid rgba(201,158,74,.16); margin: 2px 0 14px; }
.kp-subtab {
    background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: 8px 12px; cursor: pointer; color: #8b8371; font-family: inherit; font-size: 13px;
}
.kp-subtab:hover { color: #e6dcc4; }
.kp-subtab.active { color: #e8cf9a; border-bottom-color: #c99e4a; }
.kp-clue-subpane { min-height: 60px; }
#kpNotes.kp-notes-subpanel { padding: 0; background: transparent; border: 0; }

/* 剧本详情：本地备团编辑 */
.kp-script-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 4px 0 12px; flex-wrap: wrap; }
.kp-script-head h3 { font-family: var(--font-display); font-size: 19px; color: #e6dcc4; letter-spacing: .1em; margin-bottom: 5px; }
.kp-script-head p { color: #8b8371; font-size: 12.5px; line-height: 1.8; max-width: 560px; }
.kp-script-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.kp-script-view {
    padding: 18px 20px; border: 1px solid rgba(201,158,74,.18); border-radius: 10px;
    background: #111116; color: #d0d0c8; font-size: 14px; line-height: 1.9;
    max-height: 62vh; overflow-y: auto;
}
.kp-script-view h1, .kp-script-view h2, .kp-script-view h3 { color: #e8cf9a; margin: 16px 0 8px; }
.kp-script-view p { margin: 8px 0; }
.kp-script-view img { max-width: 100%; border-radius: 6px; }
.kp-script-editor {
    width: 100%; box-sizing: border-box; min-height: 58vh; padding: 14px 16px; border-radius: 10px;
    background: #0e0e12; border: 1px solid rgba(201,158,74,.35); color: #d0d0c8;
    font-family: "Cascadia Mono", "Consolas", monospace; font-size: 13px; line-height: 1.8; resize: vertical;
}
.kp-script-hint { color: #7d7566; font-size: 11.5px; margin-top: 8px; }
.kp-script-empty { color: #7d7566; text-align: center; padding: 30px 10px; }

/* 线索图库 */
.kp-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 9px; max-height: 60vh; overflow-y: auto; margin-top: 8px; }
.kp-img-item { padding: 6px; border-radius: 8px; border: 1px solid #2a2a30; background: rgba(255,255,255,.02); cursor: pointer; color: #8b8371; font-family: inherit; }
.kp-img-item:hover { border-color: rgba(201,158,74,.55); }
.kp-img-item img { width: 100%; height: 88px; object-fit: cover; border-radius: 5px; display: block; margin-bottom: 4px; }
.kp-img-item span { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.kp-room-presence { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 11px; border-radius: 8px; border: 1px solid rgba(201,158,74,.14); background: rgba(255,255,255,.02); }
.kp-room-presence-label { color: #8b8371; font-size: 11.5px; letter-spacing: .1em; }
#kpRoomPresenceList { display: flex; gap: 6px; flex-wrap: wrap; color: #b6a98f; font-size: 12px; }
.kp-presence-player { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(201,158,74,.24); background: rgba(201,158,74,.05); }
.kp-presence-player em { font-style: normal; color: #c99e4a; font-size: 10px; margin-left: 4px; }

/* 战役「模组」：阅读器 + 本地草稿编辑 */
.kp-mod-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 2px 0 12px; }
.kp-mod-bar-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kp-mod-bar-info b { color: #e6dcc4; font-family: var(--font-display); font-size: 17px; letter-spacing: .08em; }
.kp-mod-bar-info span { color: #8b8371; font-size: 11.5px; }
.kp-mod-bar-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.kp-mod-reader { min-height: 240px; }
.kp-mod-reader .mod-root { padding: 0; }
.kp-mod-editor { margin-top: 4px; }
.kp-mod-tools { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 9px; }
.kp-mod-tool-hint { color: #7d7566; font-size: 11px; }
.kp-mod-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kp-mod-text {
    width: 100%; box-sizing: border-box; min-height: 62vh; padding: 14px; border-radius: 9px;
    background: #0e0e12; border: 1px solid rgba(201,158,74,.32); color: #d0d0c8;
    font-family: "Cascadia Mono", "Consolas", monospace; font-size: 12.5px; line-height: 1.8; resize: vertical;
}
.kp-mod-preview {
    min-height: 62vh; max-height: 62vh; overflow-y: auto; padding: 14px 16px; border-radius: 9px;
    background: #111116; border: 1px solid rgba(201,158,74,.18); color: #d0d0c8; font-size: 13.5px; line-height: 1.9;
}
.kp-mod-preview h1, .kp-mod-preview h2, .kp-mod-preview h3 { color: #e8cf9a; margin: 14px 0 7px; }
.kp-mod-preview img { max-width: 100%; border-radius: 5px; }
.kp-mod-preview blockquote { border-left: 2px solid rgba(201,158,74,.45); margin: 8px 0; padding: 2px 10px; color: #b6a98f; background: rgba(201,158,74,.05); }
@media (max-width: 860px) { .kp-mod-edit-grid { grid-template-columns: 1fr; } .kp-mod-preview { max-height: 46vh; min-height: 30vh; } }

/* 玩家战役角色卡 */
.play-card-box { margin: 0 0 12px; padding: 14px 16px; border: 1px solid rgba(201,158,74,.22); border-radius: 11px; background: rgba(201,158,74,.03); }
.play-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.play-card-head b { color: #e6dcc4; font-size: 14px; }
.play-card-head span { color: #7d7566; font-size: 11.5px; }
.play-card-now { display: flex; align-items: center; gap: 12px; }
.play-card-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(201,158,74,.3); flex: 0 0 auto; }
.play-card-avph { display: flex; align-items: center; justify-content: center; color: #c99e4a; background: rgba(201,158,74,.06); font-size: 24px; }
.play-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.play-card-info b { color: #e8cf9a; font-size: 15px; }
.play-card-info > span { color: #8b8371; font-size: 12px; }
.play-card-stats b { color: #e8cf9a; }
.play-card-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.play-card-empty { color: #7d7566; font-size: 12.5px; line-height: 1.8; }
.play-roster-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin-bottom: 6px; padding: 9px 12px; border-radius: 7px; border: 1px solid #2a2a2e; background: #111116; color: #d0d0c8; cursor: pointer; font-family: inherit; text-align: left; }
.play-roster-item:hover { border-color: rgba(201,158,74,.55); }
.play-roster-item b { color: #e8cf9a; }
.play-roster-item span { color: #8b8371; font-size: 11.5px; }
.play-card-edit label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; color: #8b8371; font-size: 12px; }
.play-card-edit input { padding: 8px 10px; border-radius: 6px; background: #111118; border: 1px solid #2a2a2e; color: #d0d0c8; font-family: inherit; font-size: 13px; }

/* KP：战役人物卡里的玩家上传卡 */
.kp-player-cards { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(201,158,74,.2); border-radius: 10px; background: rgba(201,158,74,.03); }
.kp-player-cards-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.kp-player-cards-head b { color: #e6dcc4; font-size: 14px; }
.kp-player-cards-head span { color: #8b8371; font-size: 11.5px; flex: 1 1 auto; }
.kp-player-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.kp-player-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; border: 1px solid #2a2a30; background: #111116; cursor: pointer; color: inherit; font-family: inherit; text-align: left; }
.kp-player-card:hover { border-color: rgba(201,158,74,.55); }
.kp-player-card img, .kp-player-card-ph { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid rgba(201,158,74,.24); }
.kp-player-card-ph { display: flex; align-items: center; justify-content: center; color: #c99e4a; }
.kp-player-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kp-player-card-info b { color: #e8cf9a; font-size: 13px; }
.kp-player-card-info em, .kp-player-card-info > span { color: #8b8371; font-style: normal; font-size: 11px; }
.kp-player-stats { display: flex; justify-content: center; gap: 16px; margin: 8px 0; color: #8b8371; font-size: 12px; }
.kp-player-stats b { color: #e8cf9a; }
.kp-player-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; border-top: 1px solid #24242a; padding-top: 10px; }
.kp-player-skill { padding: 2px 7px; border-radius: 5px; background: rgba(201,158,74,.06); border: 1px solid rgba(201,158,74,.16); color: #b6a98f; font-size: 11px; }
.kp-player-skill b { color: #e8cf9a; }

.kp-preview-modal { width: min(860px, 100%); }
.kp-preview-body { display: flex; flex-direction: column; gap: 12px; }
.kp-preview-camp { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 9px; background: rgba(201,158,74,.05); border: 1px solid rgba(201,158,74,.18); }
.kp-preview-kicker { color: #8b8371; font-size: 10.5px; letter-spacing: .12em; }
.kp-preview-camp b { color: #e8cf9a; font-size: 16px; }
.kp-preview-camp span { color: #7d7566; font-size: 11px; }
.kp-preview-section h4 { color: #e6dcc4; font-size: 13px; margin-bottom: 6px; font-weight: 600; }
.kp-preview-board { height: 150px; border-radius: 8px; border: 1px solid rgba(201,158,74,.18); }
.kp-preview-sub { color: #7d7566; font-size: 11.5px; margin-top: 4px; }
.kp-preview-cards { display: flex; flex-wrap: wrap; gap: 7px; }
.kp-preview-card { display: flex; flex-direction: column; gap: 2px; min-width: 140px; padding: 8px 10px; border-radius: 7px; border: 1px solid #2a2a30; background: #111116; }
.kp-preview-card b { color: #e8cf9a; font-size: 13px; }
.kp-preview-card span, .kp-preview-card em { color: #8b8371; font-style: normal; font-size: 11px; }
.kp-preview-clues { display: flex; flex-direction: column; gap: 7px; }
.kp-preview-clue { padding: 8px 10px; border-radius: 7px; background: rgba(201,158,74,.04); border: 1px solid rgba(201,158,74,.14); }
.kp-preview-clue b { color: #e8cf9a; font-size: 12.5px; }
.kp-preview-clue p { color: #b6a98f; font-size: 12px; line-height: 1.7; margin-top: 3px; }
.kp-preview-clue img { max-width: 100%; max-height: 120px; border-radius: 5px; margin-top: 4px; }
.kp-preview-note { color: #7d7566; font-size: 11px; line-height: 1.7; border-top: 1px solid rgba(201,158,74,.12); padding-top: 8px; }

/* 房间码 / 口令复制 */
.kp-room-creds { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.kp-room-cred { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kp-room-cred .kp-room-code { font-size: 28px; }
.kp-room-cred .kp-room-pass { align-self: flex-start; font-size: 15px; letter-spacing: .16em; }
.kp-copy-btn {
    margin-top: 2px; padding: 3px 9px; border-radius: 5px; cursor: pointer;
    border: 1px solid rgba(201,158,74,.3); background: rgba(201,158,74,.06);
    color: #c9ae78; font-family: inherit; font-size: 11px;
}
.kp-copy-btn:hover { border-color: rgba(201,158,74,.65); color: #ffd99a; }
.kp-room-linklabel { color: #8b8371; font-size: 11.5px; line-height: 1.6; }

/* 玩家视角预览：按玩家页面重排，不再列所有玩家 */
.kp-preview-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 2px 2px; }
.kp-preview-pick { color: #8b8371; font-size: 12px; }
.kp-preview-pick select { margin: 0 3px; padding: 4px 7px; border-radius: 5px; background: #111118; border: 1px solid #33333d; color: #e8cf9a; font-family: inherit; font-size: 12px; }
.kp-preview-pick b { color: #e8cf9a; }
.kp-preview-badge { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(201,158,74,.22); color: #8b7350; font-size: 10.5px; }
.kp-preview-page { display: flex; flex-direction: column; gap: 10px; }
.kp-preview-page .play-card-box { margin-bottom: 0; }
.kp-preview-page .play-board { margin-bottom: 0; }


/* 模组可视化编辑器 */
.kp-mod-edit-grid { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
.kp-mod-visual {
    min-height: 62vh; max-height: 68vh; overflow-y: auto; padding: 16px 18px; border-radius: 9px;
    background: #111116; border: 1px solid rgba(201,158,74,.32); color: #d0d0c8;
    font-size: 14px; line-height: 1.9; outline: none;
}
.kp-mod-visual:focus { border-color: rgba(201,158,74,.65); box-shadow: 0 0 0 1px rgba(201,158,74,.12); }
.kp-mod-visual h1, .kp-mod-visual h2, .kp-mod-visual h3, .kp-mod-visual h4 { color: #e8cf9a; margin: 14px 0 7px; }
.kp-mod-visual blockquote { border-left: 2px solid rgba(201,158,74,.5); margin: 8px 0; padding: 4px 10px; background: rgba(201,158,74,.05); color: #c9c0af; }
.kp-mod-visual img { max-width: 100%; border-radius: 5px; }
.kp-mod-visual p { margin: 7px 0; }
.kp-mod-outline { position: sticky; top: 8px; max-height: 68vh; overflow-y: auto; border: 1px solid rgba(201,158,74,.2); border-radius: 9px; background: #0f0f13; }
.kp-mod-outline-head { padding: 9px 11px; color: #e6dcc4; font-size: 12.5px; border-bottom: 1px solid rgba(201,158,74,.16); letter-spacing: .08em; }
.kp-mod-outline-body { padding: 8px; }
.kp-outline-sec { margin-bottom: 10px; }
.kp-outline-title { color: #8b8371; font-size: 10.5px; letter-spacing: .12em; margin: 4px 0 4px; }
.kp-outline-item {
    display: block; width: 100%; text-align: left; border: 0; background: transparent; color: #b6a98f;
    padding: 5px 7px; border-radius: 5px; cursor: pointer; font-family: inherit; font-size: 11.5px; line-height: 1.5;
}
.kp-outline-item:hover { background: rgba(201,158,74,.08); color: #e8cf9a; }
.kp-outline-mark { display: flex; gap: 5px; align-items: baseline; }
.kp-outline-mark-style { flex: 0 0 auto; font-size: 9.5px; padding: 0 5px; border-radius: 999px; border: 1px solid currentColor; }
.kp-outline-empty { color: #6a6040; font-size: 11px; padding: 4px 6px; }
.kp-note { background: rgba(201,158,74,.07); }
.kp-mark { border-radius: 3px; padding: 0 3px; color: #f6efe2; border-bottom: 1px solid currentColor; }
.kp-mark-btn[data-mark="key"] { color: #e8cf9a; border-color: rgba(232,207,154,.45); background: rgba(232,207,154,.06); }
.kp-mark-btn[data-mark="clue"] { color: #d9b06a; border-color: rgba(217,176,106,.45); background: rgba(217,176,106,.06); }
.kp-mark-btn[data-mark="foreshadow"] { color: #9db8d8; border-color: rgba(157,184,216,.45); background: rgba(157,184,216,.06); }
.kp-mark-btn[data-mark="question"] { color: #d99aa4; border-color: rgba(217,154,164,.45); background: rgba(217,154,164,.06); }
.kp-mark-btn[data-mark="note"] { color: #b9b2a4; border-color: rgba(185,178,164,.4); background: rgba(185,178,164,.06); }
.kp-mark-key { background: rgba(232,207,154,.30); border-color: #e8cf9a; }
.kp-mark-clue { background: rgba(217,176,106,.30); border-color: #d9b06a; }
.kp-mark-foreshadow { background: rgba(157,184,216,.32); border-color: #9db8d8; }
.kp-mark-question { background: rgba(217,154,164,.32); border-color: #d99aa4; }
.kp-mark-note { background: rgba(185,178,164,.30); border-color: #b9b2a4; }
.kp-mark-btn { border: 1px solid rgba(201,158,74,.3); border-radius: 999px; padding: 4px 9px; background: transparent; color: #b6a98f; cursor: pointer; font-family: inherit; font-size: 11.5px; }
.kp-mark-btn:hover { background: rgba(201,158,74,.1); color: #e8cf9a; }
.kp-mod-tool-label { color: #8b8371; font-size: 11px; }
.kp-mod-jump { animation: kpModJump 0.9s ease; }
@keyframes kpModJump { 0% { background: rgba(201,158,74,.35); } 100% { background: transparent; } }
@media (max-width: 900px) { .kp-mod-edit-grid { grid-template-columns: 1fr; } .kp-mod-outline { position: static; max-height: 220px; } }

.kp-mod-outline-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; color: #e6dcc4; font-size: 12px; border-bottom: 1px solid rgba(201,158,74,.16); }
.kp-mod-outline-head > span { letter-spacing: .08em; }
.kp-outline-tabs { display: flex; gap: 3px; }
.kp-outline-tab { padding: 3px 8px; border-radius: 5px; border: 1px solid transparent; background: transparent; color: #8b8371; cursor: pointer; font-family: inherit; font-size: 11px; }
.kp-outline-tab:hover { color: #e6dcc4; }
.kp-outline-tab.active { color: #e8cf9a; border-color: rgba(201,158,74,.35); background: rgba(201,158,74,.09); }
.kp-outline-mark-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-om-key { color: #e8cf9a; }
.kp-om-clue { color: #d9b06a; }
.kp-om-foreshadow { color: #9db8d8; }
.kp-om-question { color: #d99aa4; }
.kp-om-note { color: #b9b2a4; }
.kp-outline-mark .kp-outline-mark-style { border-color: currentColor; }

/* 目录 / 标记：胶囊切换 */
.kp-outline-switch {
    position: relative; display: inline-flex; align-items: stretch;
    width: 116px; padding: 2px; border-radius: 999px;
    background: #17171c; border: 1px solid rgba(201,158,74,.24);
    flex: 0 0 auto;
}
.kp-outline-thumb {
    position: absolute; top: 2px; bottom: 2px; left: 2px;
    width: calc(50% - 2px); border-radius: 999px;
    background: rgba(201,158,74,.18);
    box-shadow: inset 0 0 0 1px rgba(201,158,74,.26);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.kp-outline-switch[data-mode="marks"] .kp-outline-thumb { transform: translateX(100%); }
.kp-outline-switch .kp-outline-tab {
    position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
    padding: 4px 0; border: 0; border-radius: 999px; background: transparent;
    color: #8b8371; cursor: pointer; font-family: inherit; font-size: 11px; text-align: center;
    transition: color .18s ease;
}
.kp-outline-switch .kp-outline-tab:hover { color: #e6dcc4; }
.kp-outline-switch .kp-outline-tab.active { color: #ffd99a; font-weight: 600; }

/* 战役模组正文：目录 / 标记 胶囊 */
.kp-reader-toc-switch {
    position: relative; display: inline-flex; align-items: stretch;
    width: 108px; padding: 2px; border-radius: 999px; flex: 0 0 auto;
    background: #17171c; border: 1px solid rgba(201,158,74,.26);
}
.kp-reader-toc-thumb {
    position: absolute; top: 2px; bottom: 2px; left: 2px;
    width: calc(50% - 2px); border-radius: 999px;
    background: rgba(201,158,74,.18); box-shadow: inset 0 0 0 1px rgba(201,158,74,.28);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.kp-reader-toc-switch[data-mode="marks"] .kp-reader-toc-thumb { transform: translateX(100%); }
.kp-reader-toc-btn {
    position: relative; z-index: 1; flex: 1 1 0; min-width: 0; padding: 4px 0;
    border: 0; border-radius: 999px; background: transparent; color: #8b8371;
    cursor: pointer; font-family: inherit; font-size: 11px; text-align: center;
}
.kp-reader-toc-btn:hover { color: #e6dcc4; }
.kp-reader-toc-btn.active { color: #ffd99a; font-weight: 600; }

.kp-reader-toc-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); padding: 20px; }
.kp-reader-toc-sheet { width: min(520px, 100%); max-height: 74vh; display: flex; flex-direction: column; border-radius: 12px; background: #111116; border: 1px solid rgba(201,158,74,.3); box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.kp-reader-toc-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(201,158,74,.16); }
.kp-reader-toc-head b { color: #e6dcc4; font-family: var(--font-display); font-size: 16px; letter-spacing: .12em; }
.kp-reader-toc-list { overflow-y: auto; padding: 8px; }
.kp-reader-toc-item { display: flex; width: 100%; align-items: baseline; gap: 7px; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: #b6a98f; cursor: pointer; font-family: inherit; font-size: 12.5px; line-height: 1.6; }
.kp-reader-toc-item:hover { background: rgba(201,158,74,.09); color: #e8cf9a; }
.kp-reader-toc-mark { align-items: flex-start; }
.kp-reader-mark-style { flex: 0 0 auto; padding: 0 6px; border-radius: 999px; border: 1px solid currentColor; font-size: 10px; }
.kp-reader-toc-empty { padding: 20px 10px; text-align: center; color: #6a6040; font-size: 12px; }

/* 目录 / 标记浮层展开动画 */
.kp-reader-toc-overlay { animation: kpReaderFadeIn .18s ease-out; }
.kp-reader-toc-sheet { animation: kpReaderSheetIn .24s cubic-bezier(.2,.8,.3,1); transform-origin: 50% 92%; }
@keyframes kpReaderFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kpReaderSheetIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
/* 档案自带的目录浮层也给同样的展开感 */
.mod-toc-sheet { animation: kpReaderSheetIn .24s cubic-bezier(.2,.8,.3,1); }

/* 战役内嵌阅读器：顶部标题由战役头承担，隐藏自带头部 */
#kpModuleReader .mod-reader-head { display: none; }

/* ===== 守密人帷幕：双图模式切换 ===== */
.kp-mode-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kp-mode-hero {
    position: relative; display: flex; height: 292px; margin: 8px 0 18px;
    border: 0; border-radius: 0; overflow: hidden; background: transparent;
    box-shadow: none;
}
.kp-mode-side {
    position: relative; flex: 1 1 50%; min-width: 0; padding: 0; border: 0;
    background: transparent; cursor: pointer; overflow: hidden; text-align: left;
    font-family: inherit;
}
.kp-mode-img-sandbox { background-image: url('img/kp-mode-sandbox.jpg'); background-image: image-set(url('img/kp-mode-sandbox.webp') type('image/webp'), url('img/kp-mode-sandbox.jpg') type('image/jpeg')); }
.kp-mode-img-campaign { background-image: url('img/kp-mode-campaign.jpg'); background-image: image-set(url('img/kp-mode-campaign.webp') type('image/webp'), url('img/kp-mode-campaign.jpg') type('image/jpeg')); }
.kp-mode-sandbox { clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); }
.kp-mode-campaign { flex: 0 0 calc(50% + 20px); margin-left: -20px; clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%); }
.kp-mode-img {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    filter: grayscale(1) brightness(.52) contrast(.95);
    transform: scale(1.01);
    transition: filter .45s ease, transform .6s ease, opacity .35s ease;
    opacity: .78;
}
.kp-mode-sandbox {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.10) 10%, #000 50%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.10) 10%, #000 50%);
}
.kp-mode-campaign {
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,.10) 10%, #000 50%);
    mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,.10) 10%, #000 50%);
}
.kp-mode-side:hover .kp-mode-img { filter: grayscale(.45) brightness(.78); transform: scale(1.04); }
.kp-mode-side.active .kp-mode-img { filter: grayscale(0) brightness(.92) saturate(1.06); opacity: 1; transform: scale(1.02); }
.kp-mode-side.active:hover .kp-mode-img { filter: grayscale(0) brightness(1) saturate(1.08); }
.kp-mode-shade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,8,12,.05) 30%, rgba(8,8,12,.82) 100%);
}
.kp-mode-label { position: absolute; z-index: 4; left: 32px; bottom: 26px; pointer-events: none; }
.kp-mode-label-campaign { left: auto; right: 32px; text-align: right; }
.kp-mode-label b { color: #a7a08f; font-family: var(--font-display); font-size: 34px; line-height: 1.15; letter-spacing: .1em; text-shadow: 0 2px 18px rgba(0,0,0,.8); transition: color .3s, text-shadow .3s; }
.kp-mode-label.active b { color: #ffe0a3; text-shadow: 0 0 22px rgba(201,158,74,.38), 0 2px 18px rgba(0,0,0,.85); }
.kp-mode-slash {
    position: absolute; z-index: 3; left: calc(50% - 10px); top: -8%; bottom: -8%; width: 2px;
    transform: rotate(3.92deg);
    background: linear-gradient(180deg, transparent, rgba(201,158,74,.85) 18%, rgba(255,225,170,.95) 50%, rgba(201,158,74,.8) 82%, transparent);
    box-shadow: 0 0 16px rgba(201,158,74,.35);
    pointer-events: none;
}
.kp-mode-side:focus-visible { outline: 2px solid rgba(201,158,74,.75); outline-offset: -3px; }
@media (max-width: 720px) {
    .kp-mode-hero { height: 196px; border-radius: 9px; }
    .kp-mode-sandbox { clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
    .kp-mode-campaign { flex-basis: calc(50% + 14px); margin-left: -14px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
    .kp-mode-label { left: 16px; bottom: 15px; }
    .kp-mode-label-campaign { left: auto; right: 16px; }
    .kp-mode-label b { font-size: 24px; }
    .kp-mode-slash { left: calc(50% - 7px); transform: rotate(4.1deg); }
    .kp-mode-copy i { font-size: 10px; }
}

.kp-room-feedhead { display:flex; align-items:baseline; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid rgba(201,158,74,.12); color:#8b7350; font-size:11px; letter-spacing:.12em; }
.kp-room-feedhead span { color:#5f5a4c; font-size:10px; letter-spacing:.06em; }

/* 遭遇 / NPC / 追逐：随机生成按钮统一靠右 */
.kpv2-filter-row .kpv2-gen-btn { margin-left: auto; }

/* 房间：单一入场码 */
.kp-room-join-code { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kp-room-join-code .kp-room-code { font-size: 28px; letter-spacing: .12em; }
.kp-room-codehint { color: #7d7566; font-size: 11px; }
/* 玩家：入场码输入 */
.play-join-box { margin-bottom: 12px; padding: 14px 16px; border: 1px solid rgba(201,158,74,.24); border-radius: 10px; background: rgba(201,158,74,.04); }
.play-join-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 9px; }
.play-join-head b { color: #e8cf9a; font-size: 13px; }
.play-join-head span { color: #7d7566; font-size: 11px; }
.play-join-row { display: flex; gap: 8px; flex-wrap: wrap; }
.play-join-row input { flex: 1 1 220px; min-width: 0; padding: 8px 10px; border-radius: 6px; border: 1px solid #33333d; background: #111118; color: #e8cf9a; font-family: inherit; font-size: 14px; letter-spacing: .08em; }

/* 探索棋子弹窗：技能按钮与「对玩家隐藏」同一行，开关靠右 */
.kpv2-exp-checkrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; }
.kpv2-exp-checkrow .kpv2-exp-check { margin-left: auto; margin-top: 0; }

.kpv2-ink-ico { width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; color: #c9a86a; display: inline-block; }
.kpv2-ink-tool.is-on .kpv2-ink-ico { color: #ffd080; }

/* 战役模组：编辑/导出/恢复放在阅读器标签行右侧 */
.kp-mod-tab-actions {
    margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
    padding-left: 14px; position: sticky; right: 0; background: var(--mod-bg2, #0d0d11);
    border-bottom: 0; z-index: 2;
}
.kp-mod-tab-actions .btn { height: 30px; font-size: 12px; white-space: nowrap; }
.kp-mod-editor-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.kp-mod-editor-actions .btn { height: 30px; font-size: 12px; }

/* 房间实时 / 棋盘同步状态 */
.kp-room-netrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0 2px; min-height:20px; }
.kp-room-netstatus { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; color:#7d7566; font-size:11px; }
.kp-room-netitem.is-ok { color:#8fbf8a; }
.kp-room-netitem.is-wait { color:#c9a86a; }
.kp-room-netitem.is-bad { color:#e08a92; }
.kp-room-retry { display:none; height:22px; padding:0 8px; border-radius:5px; border:1px solid rgba(201,158,74,.35); background:transparent; color:#d8c49a; font:inherit; font-size:11px; cursor:pointer; }
.kp-room-retry:hover { border-color:rgba(201,158,74,.65); color:#ffd080; }
.play-room-net { display:inline-flex; margin-top:6px; font-size:11px; color:#7d7566; }
.play-room-net.is-ok { color:#8fbf8a; }
.play-room-net.is-wait { color:#c9a86a; }
.play-room-net.is-bad { color:#e08a92; }
.play-room-retry { margin-left:8px; height:22px; padding:0 8px; border-radius:5px; border:1px solid rgba(201,158,74,.35); background:transparent; color:#d8c49a; font:inherit; font-size:11px; cursor:pointer; }
.play-room-retry:hover { border-color:rgba(201,158,74,.65); color:#ffd080; }

.play-room-retry { display: none; }

.play-action-note { align-self:center; color:#7d7566; font-size:12px; }

/* 调查员：加入战役 */
.dir-join .inv-dir-bg {
    background-image: url('img/join-campaign-1024.jpg');
    background-image: image-set(
        url('img/join-campaign-1024.avif') type('image/avif'),
        url('img/join-campaign-1024.webp') type('image/webp'),
        url('img/join-campaign-1024.jpg') type('image/jpeg')
    );
    background-position: center 42%;
}
.inv-join { max-width: 1100px; margin: 0 auto; padding: 28px 0 60px; }
.inv-join-head h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 26px; letter-spacing: .08em; color: #e6dcc4; }
.inv-join-head p { margin: 0 0 20px; color: #8a7a60; font-size: 13px; }
.inv-join-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.inv-join-card { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid rgba(201,158,74,.22); border-radius: 10px; background: rgba(20,20,26,.78); }
.inv-join-av { width: 54px; height: 54px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; background: #14141a; display: flex; align-items: center; justify-content: center; color: #6a6040; }
.inv-join-av img { width: 100%; height: 100%; object-fit: cover; }
.inv-join-info { flex: 1 1 auto; min-width: 0; }
.inv-join-info b { display: block; color: #e6dcc4; font-size: 15px; }
.inv-join-info span { display: block; color: #8a7a60; font-size: 12px; margin-top: 3px; }
.inv-join-info em { font-style: normal; color: #c9a86a; }
.inv-join-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
@media (max-width: 640px) { .inv-join-list { grid-template-columns: 1fr; } .inv-join-card { align-items: flex-start; } }

/* 阅读器目录 / 标记浮层的键盘焦点 */
.mod-toc-sheet-item:focus-visible, .kp-reader-toc-item:focus-visible { outline: 2px solid rgba(201,158,74,.75); outline-offset: 2px; }
.kp-reader-toc-btn:focus-visible, .kp-reader-toc-head button:focus-visible { outline: 2px solid rgba(201,158,74,.75); outline-offset: 2px; }

/* 线索投屏：玩家页 / 投影窗口 */
.play-handout { margin: 12px 0; padding: 10px; border: 1px solid rgba(201,158,74,.28); border-radius: 10px; background: rgba(14,14,18,.9); }
.play-handout-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: #e6dcc4; font-size: 13px; }
.play-handout img { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto; border-radius: 6px; object-fit: contain; }
.proj-handout { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 3vh 3vw; background: rgba(6,6,9,.94); pointer-events: none; }
.proj-handout img { max-width: 94vw; max-height: 84vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 70px rgba(0,0,0,.7); }
.proj-handout-title { color: #e6dcc4; font: 600 18px/1.5 'Noto Sans SC', 'Microsoft YaHei', sans-serif; letter-spacing: .08em; text-align: center; }


/* 加入战役：头像框 + 选人浮窗 */
.inv-join-hero { display:grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items:start; max-width: 820px; }
.inv-join-drop { width: 240px; height: 300px; border: 1px dashed rgba(201,158,74,.5); border-radius: 14px; background: rgba(20,20,26,.55); display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; transition: border-color .16s, background .16s; }
.inv-join-drop:hover, .inv-join-drop:focus-visible, .inv-join-drop.is-drag { border-color: #c9a86a; background: rgba(201,158,74,.08); outline:none; }
.inv-join-ph { color:#6a6040; font-size:30px; text-align:center; line-height:1.6; }
.inv-join-ph small { font-size:12px; color:#8a7a60; letter-spacing:.04em; }
.inv-join-selected { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; position:relative; }
.inv-join-selected img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; }
.inv-join-selected .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:54px; color:#4a4030; }
.inv-join-selected .meta { position:relative; z-index:1; width:100%; padding:36px 12px 14px; background:linear-gradient(to bottom, transparent, rgba(8,8,12,.94)); text-align:center; }
.inv-join-selected b { display:block; color:#ffe6b0; font-size:18px; }
.inv-join-selected span { display:block; color:#b9a884; font-size:12px; margin-top:3px; }
.inv-join-form { display:flex; gap:8px; flex-wrap:wrap; padding-top:8px; }
.inv-join-form input { flex:1 1 300px; min-width:0; padding:10px 12px; border-radius:7px; border:1px solid #33333d; background:#111118; color:#e8cf9a; font:inherit; letter-spacing:.05em; }
.inv-join-hint { grid-column:1 / -1; color:#7d7566; font-size:12px; line-height:1.7; }
.inv-join-picker-overlay { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.68); }
.inv-join-picker { width:min(860px,96vw); max-height:82vh; display:flex; flex-direction:column; background:#111116; border:1px solid rgba(201,158,74,.32); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.inv-join-picker-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #26262e; color:#e6dcc4; }
.inv-join-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; padding:14px 16px; overflow:auto; }
.inv-join-picker-foot { padding:10px 16px; border-top:1px solid #26262e; display:flex; justify-content:flex-end; }
.inv-join-pick { display:flex; gap:10px; align-items:center; text-align:left; padding:10px; border:1px solid #2c2c36; border-radius:8px; background:#15151b; color:#ded2b8; cursor:pointer; font:inherit; }
.inv-join-pick:hover { border-color:rgba(201,158,74,.55); background:rgba(201,158,74,.08); }
.inv-join-pick img, .inv-join-pick .ph { width:44px; height:44px; border-radius:6px; object-fit:cover; background:#0f0f14; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.inv-join-pick b { display:block; font-size:14px; }
.inv-join-pick span { display:block; color:#8a7a60; font-size:11px; }
@media (max-width: 640px) { .inv-join-hero { grid-template-columns:1fr; } .inv-join-drop { width:100%; height:230px; }
}

#invJoinAvatarContent { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }


/* 加入战役：工卡式外框 */
.inv-join-badge { position:relative; width:min(980px,100%); margin-top:8px; padding:22px 22px 0; border:1px solid rgba(201,158,74,.35); border-radius:16px; background:linear-gradient(160deg, rgba(32,30,28,.96), rgba(15,15,19,.98)); box-shadow:0 24px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,230,176,.06); overflow:hidden; }
.inv-join-badge::before { content:''; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:54px; height:8px; border-radius:99px; background:#09090d; border:1px solid rgba(201,158,74,.28); box-shadow:inset 0 2px 5px rgba(0,0,0,.8); }
.inv-join-badge-top { display:grid; grid-template-columns:240px minmax(0,1fr); gap:22px; align-items:start; padding-top:8px; }
.inv-join-badge-main { display:flex; flex-direction:column; gap:14px; min-height:300px; }
.inv-join-selected-info { flex:1 1 auto; min-height:180px; padding:16px; border:1px solid rgba(201,158,74,.18); border-radius:10px; background:rgba(8,8,12,.35); color:#b9a884; font-size:13px; line-height:1.8; }
.inv-join-selected-info .inv-join-selected-empty { color:#e6dcc4; font-family:var(--font-display); font-size:20px; letter-spacing:.08em; margin-bottom:4px; }
.inv-join-selected-info small { color:#7d7566; font-size:12px; }
.inv-join-selected-card { display:flex; gap:14px; align-items:center; }
.inv-join-selected-card img, .inv-join-selected-card .ph { width:72px; height:82px; border-radius:7px; object-fit:cover; background:#111116; display:flex; align-items:center; justify-content:center; }
.inv-join-selected-card b { display:block; color:#ffe6b0; font-size:20px; letter-spacing:.05em; }
.inv-join-selected-card span { display:block; color:#b9a884; font-size:12px; margin-top:2px; }
.inv-join-selected-stats { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:10px; color:#9a9284; font-family:var(--font-num); font-size:12px; }
.inv-join-badge-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px -22px 0; padding:10px 22px; border-top:1px solid rgba(201,158,74,.18); background:rgba(0,0,0,.22); color:#6a6040; font-size:11px; letter-spacing:.06em; }
.inv-join-badge-foot span:last-child { color:#8a7a60; }
@media (max-width: 760px) { .inv-join-badge-top { grid-template-columns:1fr; } .inv-join-drop { width:100%; height:240px; } .inv-join-badge-main { min-height:0; } }


/* 加入战役：中性工卡框 + 取消按钮 */
.inv-join-badge { border-color: rgba(170,180,190,.24); background: linear-gradient(160deg, #1a1b20, #111216); box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04); }
.inv-join-badge::before { border-color: rgba(170,180,190,.2); }
.inv-join-drop { position:relative; border-color: rgba(170,180,190,.28); background:#101116; }
.inv-join-drop:hover, .inv-join-drop:focus-visible, .inv-join-drop.is-drag { border-color: rgba(200,210,220,.6); background:rgba(170,180,190,.06); }
.inv-join-selected-info { border-color: rgba(170,180,190,.16); background:#101116; }
.inv-join-badge-foot { border-top-color: rgba(170,180,190,.16); background:rgba(0,0,0,.24); color:#7d828a; }
.inv-join-clear { position:absolute; top:8px; right:8px; z-index:2; width:26px; height:26px; border-radius:50%; border:1px solid rgba(220,200,180,.35); background:rgba(8,8,12,.78); color:#e8dcc8; font:14px/1 sans-serif; cursor:pointer; display:none; align-items:center; justify-content:center; }
.inv-join-clear:hover { border-color:#ffd080; color:#ffd080; }


.inv-join-info-name b { display:block; color:#ffe6b0; font-family:var(--font-display); font-size:24px; letter-spacing:.06em; }
.inv-join-info-name span { display:block; color:#b9a884; font-size:12px; margin:3px 0 12px; }
.inv-join-attr-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px 10px; padding:10px 0; border-top:1px solid rgba(170,180,190,.12); border-bottom:1px solid rgba(170,180,190,.12); }
.inv-join-attr-grid span { display:flex; align-items:baseline; justify-content:space-between; gap:6px; color:#8f939a; font-family:var(--font-num); font-size:11px; }
.inv-join-attr-grid em { font-style:normal; color:#6f747c; letter-spacing:.06em; }
.inv-join-attr-grid b { color:#e6e2d8; font-size:15px; }
.inv-join-selected-stats b { color:#ded2b8; font-size:13px; }
.inv-join-pick.is-picked { border-color:rgba(220,225,235,.55); background:rgba(220,225,235,.07); }
@media (max-width: 760px) { .inv-join-attr-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }


.kp-room-testhint { margin:6px 0 2px; color:#7d7566; font-size:11px; line-height:1.7; }


/* 入场码复制按钮：加大点击面积 */
.kp-copy-btn { margin-top:6px; padding:8px 16px; min-height:34px; border-radius:7px; font-size:13px; }


/* 本地测试提示紧贴按钮 */
.kp-room-live .kp-room-actions { margin-bottom: 4px; }
.kp-room-testhint { margin: 0 0 2px; }


/* 玩家：更换角色卡浮层 */
.play-card-picker-overlay { position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); }
.play-card-picker { width:min(760px,96vw); max-height:84vh; display:flex; flex-direction:column; background:linear-gradient(165deg,#1b1a20,#111116); border:1px solid rgba(180,170,150,.26); border-radius:14px; box-shadow:0 28px 80px rgba(0,0,0,.65); overflow:hidden; }
.play-card-picker-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 14px; border-bottom:1px solid rgba(180,170,150,.14); }
.play-card-picker-head b { display:block; color:#ffe6b0; font-family:var(--font-display); font-size:22px; letter-spacing:.08em; }
.play-card-picker-head span { display:block; color:#8f8778; font-size:12px; margin-top:4px; }
.play-card-picker-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:16px 20px; overflow:auto; }
.play-card-pick { display:flex; align-items:center; gap:12px; text-align:left; padding:11px; border:1px solid #2c2c36; border-radius:9px; background:#15151b; color:#ded2b8; cursor:pointer; font:inherit; }
.play-card-pick:hover, .play-card-pick:focus-visible { border-color:rgba(201,158,74,.6); background:rgba(201,158,74,.07); outline:none; }
.play-card-pick.is-picked { border-color:rgba(201,158,74,.75); background:rgba(201,158,74,.1); }
.play-card-pick-av { width:52px; height:60px; flex:0 0 auto; border-radius:6px; overflow:hidden; background:#0f0f14; display:flex; align-items:center; justify-content:center; }
.play-card-pick-av img { width:100%; height:100%; object-fit:cover; }
.play-card-pick-main { min-width:0; flex:1; }
.play-card-pick-main b { display:block; color:#f3e5c8; font-size:15px; }
.play-card-pick-main > span { display:block; color:#9a8f7c; font-size:11px; margin-top:2px; }
.play-card-pick-stats { color:#817766 !important; font-family:var(--font-num); font-size:11px !important; margin-top:5px !important; }
.play-card-pick-stats b { display:inline; color:#c9b995; font-size:12px; }
.play-card-pick-go { flex:0 0 auto; color:#8f7b4e; font-size:11px; border:1px solid rgba(201,158,74,.28); border-radius:99px; padding:3px 8px; }
.play-card-picker-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 20px; border-top:1px solid rgba(180,170,150,.14); color:#7d7566; font-size:11px; }
.play-card-picker-empty { grid-column:1/-1; padding:26px 16px; text-align:center; color:#8a7f6a; }
.play-card-picker-empty b { display:block; color:#e6dcc4; font-size:15px; margin-bottom:6px; }
.play-card-picker-empty span { font-size:12px; }
@media (max-width: 640px) { .play-card-picker-grid { grid-template-columns:1fr; padding:12px; } .play-card-picker-head { padding:14px 14px 10px; } .play-card-picker-foot { padding:10px 14px; } }

/* 玩家：KP 沙盘空状态 / 刷新 */
.play-board-refresh { margin-left:auto; flex:0 0 auto; padding:4px 10px; border:1px solid rgba(201,158,74,.28); border-radius:5px; background:rgba(201,158,74,.05); color:#b9a884; font:11px/1.4 inherit; cursor:pointer; }
.play-board-refresh:hover { border-color:rgba(201,158,74,.6); color:#ffd99a; }
.play-board-head { display:flex; align-items:center; gap:10px; }
.play-board-empty-body { padding:22px 16px; color:#817766; font-size:12px; line-height:1.8; }


/* 玩家：独立 KP 沙盘模块（不复用投影 localStorage） */
.play-sandbox { margin: 14px 0 18px; border: 1px solid rgba(170,180,190,.2); border-radius: 12px; overflow: hidden; background: #0c0d11; }
.play-sandbox-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; border-bottom:1px solid rgba(170,180,190,.16); background:#14151a; }
.play-sandbox-kicker { color:#8f7b4e; font-size:11px; letter-spacing:.12em; }
.play-sandbox-head > b { color:#ede0c8; font-family:var(--font-display); font-size:17px; letter-spacing:.06em; }
.play-sandbox-live { color:#7f9a84; font-size:10px; border:1px solid rgba(127,154,132,.28); border-radius:99px; padding:2px 7px; }
.play-sandbox-actions { margin-left:auto; display:flex; gap:6px; }
.play-sandbox-actions button { padding:4px 9px; border:1px solid rgba(180,170,150,.28); border-radius:5px; background:rgba(255,255,255,.03); color:#b9a884; font:11px/1.4 inherit; cursor:pointer; }
.play-sandbox-actions button:hover { border-color:rgba(220,210,190,.6); color:#f0dfbd; }
.play-sandbox-viewport { display:flex; align-items:center; justify-content:center; max-height: 56vh; overflow:hidden; background:#08090c; }
.play-sandbox-stage { position:relative; width:100%; max-height:56vh; overflow:hidden; background:#101116; }
.play-sandbox-bg { position:absolute; inset:0; background-position:center; background-size:cover; opacity:.9; }
.play-sandbox-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(200,210,225,.055) 1px, transparent 1px),linear-gradient(90deg, rgba(200,210,225,.055) 1px, transparent 1px); background-size:5% 5%; pointer-events:none; }
.play-sandbox-token { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px; pointer-events:none; }
.play-sandbox-token i { width:14px; height:14px; border-radius:50%; background:var(--tok,#c9a86a); border:2px solid rgba(255,255,255,.7); box-shadow:0 0 12px rgba(0,0,0,.8); }
.play-sandbox-token b { padding:2px 6px; border-radius:4px; background:rgba(8,9,12,.82); border:1px solid rgba(255,255,255,.16); color:#f0e4cc; font-size:11px; font-weight:500; white-space:nowrap; }
.play-sandbox-token small { color:#9a9284; font-size:9px; }
.play-sandbox-empty { width:100%; min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:24px; color:#7d7566; }
.play-sandbox-empty b { color:#e6dcc4; font-size:15px; }
.play-sandbox-empty span { font-size:12px; line-height:1.7; }
.play-sandbox:fullscreen { margin:0; border-radius:0; display:flex; flex-direction:column; background:#07080b; }
.play-sandbox:fullscreen .play-sandbox-viewport { flex:1; max-height:none; height:calc(100vh - 54px); }
.play-sandbox:fullscreen .play-sandbox-stage { width:auto; height:100%; max-height:none; max-width:100%; }
@media (max-width: 640px) { .play-sandbox-viewport, .play-sandbox-stage { max-height:42vh; } .play-sandbox-head { padding:9px 10px; } }


.coc-modal-x { position:absolute; top:8px; right:9px; z-index:2; width:26px; height:26px; border-radius:50%; border:1px solid rgba(190,180,160,.22); background:rgba(0,0,0,.24); color:#b9a884; font:14px/1 sans-serif; cursor:pointer; }
.coc-modal-x:hover { color:#ffd99a; border-color:rgba(255,217,154,.5); }


.play-card-picker-search { padding:12px 20px 0; }
.play-card-picker-search input { width:100%; box-sizing:border-box; padding:8px 11px; border:1px solid #34343e; border-radius:7px; background:#0f1014; color:#e6dcc4; font:13px inherit; }
.play-card-picker-search input:focus { outline:none; border-color:rgba(201,158,74,.55); }
.play-card-picker-upload { margin:0 20px 12px; padding:12px; border:1px dashed rgba(180,170,150,.3); border-radius:8px; text-align:center; color:#8f8778; font-size:12px; }
.play-card-picker-upload.is-drag { border-color:rgba(201,158,74,.75); background:rgba(201,158,74,.07); color:#e6dcc4; }
.play-card-upload-btn { border:0; background:none; color:#d8b878; cursor:pointer; font:inherit; text-decoration:underline; }
.play-card-picker-grid { padding-top:12px; }


.inv-join-picker-search { padding:10px 16px 0; }
.inv-join-picker-search input { width:100%; box-sizing:border-box; padding:8px 11px; border:1px solid #34343e; border-radius:7px; background:#0f1014; color:#e6dcc4; font:13px inherit; }
.inv-join-picker-search input:focus { outline:none; border-color:rgba(201,158,74,.55); }


/* 玩家页：战役房间与角色卡并排 */
.play-top-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:14px; align-items:stretch; margin-bottom:14px; }
.play-top-room, .play-top-card { min-width:0; }
.play-top-room .play-camp, .play-top-room .play-need-camp { margin:0; height:100%; box-sizing:border-box; }
.play-top-card .play-card-box { margin:0; height:100%; box-sizing:border-box; }
.play-top-grid .play-card-now { flex-wrap:wrap; }
@media (max-width: 820px) { .play-top-grid { grid-template-columns:1fr; } }


/* 玩家：角色卡详情 / 技能检定 */
.play-char-detail-overlay { position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.74); }
.play-char-detail { width:min(680px,96vw); max-height:86vh; display:flex; flex-direction:column; background:linear-gradient(165deg,#1b1a20,#111116); border:1px solid rgba(180,170,150,.28); border-radius:14px; box-shadow:0 28px 80px rgba(0,0,0,.65); overflow:hidden; }
.play-char-detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid rgba(180,170,150,.14); }
.play-char-detail-id { display:flex; align-items:center; gap:12px; min-width:0; }
.play-detail-av { width:54px; height:60px; flex:0 0 auto; border-radius:7px; overflow:hidden; background:#0f0f14; display:flex; align-items:center; justify-content:center; }
.play-detail-av img { width:100%; height:100%; object-fit:cover; }
.play-char-detail-id b { display:block; color:#ffe6b0; font-family:var(--font-display); font-size:21px; letter-spacing:.06em; }
.play-char-detail-id span { display:block; color:#9a8f7c; font-size:12px; margin-top:3px; }
.play-char-detail-body { padding:14px 18px; overflow:auto; }
.play-detail-attrs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px 10px; padding-bottom:10px; border-bottom:1px solid rgba(180,170,150,.12); }
.play-detail-attrs span { display:flex; justify-content:space-between; color:#8f8778; font-family:var(--font-num); font-size:11px; }
.play-detail-attrs em { font-style:normal; color:#6f747c; }
.play-detail-attrs b { color:#e6dcc4; font-size:15px; }
.play-detail-derived { display:flex; flex-wrap:wrap; gap:8px 16px; padding:10px 0; color:#9a8f7c; font-size:12px; }
.play-detail-derived b { color:#ded2b8; }
.play-detail-subhead { color:#d8c8a6; font-size:13px; margin:4px 0 8px; }
.play-detail-subhead small { color:#7d7566; font-size:10px; font-weight:400; margin-left:6px; }
.play-detail-skills { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.play-detail-skill { display:flex; align-items:baseline; gap:6px; text-align:left; padding:7px 9px; border:1px solid #2c2c36; border-radius:6px; background:#14141a; color:#c9b995; font:12px inherit; cursor:pointer; }
.play-detail-skill:hover { border-color:rgba(201,158,74,.55); background:rgba(201,158,74,.07); }
.play-detail-skill span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.play-detail-skill b { margin-left:auto; color:#f0dfbd; font-family:var(--font-num); font-size:13px; }
.play-detail-skill small { color:#7d7566; font-size:9px; }
.play-detail-result { margin-top:10px; min-height:0; padding:0; color:#b9a884; font-size:12px; }
.play-detail-result:not(:empty) { padding:9px 11px; border-radius:6px; border:1px solid rgba(180,170,150,.18); background:#101116; }
.play-detail-result em { color:#f0dfbd; font-style:normal; }
.play-detail-result strong { color:#ffd99a; }
.play-detail-result.is-bad strong { color:#e08a8a; }
.play-detail-none { color:#7d7566; font-size:12px; }
.play-char-detail-foot { display:flex; align-items:center; gap:8px; padding:10px 18px; border-top:1px solid rgba(180,170,150,.14); }
.play-char-detail-foot > span { color:#7d7566; font-size:11px; margin-right:auto; }
@media (max-width: 640px) { .play-detail-skills { grid-template-columns:repeat(2,minmax(0,1fr)); } .play-detail-attrs { grid-template-columns:repeat(2,minmax(0,1fr)); } }


.play-card-avatar-link, .play-card-name-link { cursor:pointer; }
.play-card-avatar-link { flex:0 0 auto; }
.play-card-name-link:hover { color:#ffd99a; }


.kp-player-card { position:relative; }
.kp-player-card.is-selected { border-color:rgba(201,158,74,.7); background:rgba(201,158,74,.08); }
.kp-player-card-kick { position:absolute; top:5px; right:6px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#8f7a6a; background:rgba(0,0,0,.35); font-size:11px; cursor:pointer; }
.kp-player-card-kick:hover { color:#ff9c9c; background:rgba(160,48,64,.35); }


.kp-player-card-actions { display:flex; gap:8px; justify-content:center; margin-top:14px; }
.kp-player-skills-empty { color:#7d7566; font-size:12px; text-align:center; margin-top:10px; }


.play-detail-edit-body { overflow:auto; }
.play-detail-edit-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.play-detail-edit-title { color:#c9b995; font-size:12px; margin:12px 0 6px; }
.play-detail-edit-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.play-detail-field { display:flex; flex-direction:column; gap:3px; color:#8f8778; font-size:10px; }
.play-detail-field input, .play-detail-skill-edit input, .play-detail-add-skill input { width:100%; box-sizing:border-box; padding:5px 7px; border:1px solid #34343e; border-radius:5px; background:#0f1014; color:#e6dcc4; font:12px inherit; }
.play-detail-field input:focus, .play-detail-skill-edit input:focus, .play-detail-add-skill input:focus { outline:none; border-color:rgba(201,158,74,.55); }
.play-detail-skill-edit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.play-detail-skill-edit { display:flex; align-items:center; gap:6px; padding:4px 6px; border:1px solid #2c2c36; border-radius:5px; color:#b9a884; font-size:11px; }
.play-detail-skill-edit span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.play-detail-skill-edit input { width:50px; flex:0 0 auto; }
.play-detail-add-skill { display:flex; gap:6px; margin-top:9px; align-items:center; }
.play-detail-add-skill input:first-child { flex:1; }
.play-detail-add-skill input:nth-child(2) { width:70px; }
@media (max-width: 640px) { .play-detail-edit-row, .play-detail-edit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .play-detail-skill-edit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }


.kp-char-log { text-align:left; max-height:420px; overflow:auto; }
.kp-char-log-head { border-bottom:1px solid rgba(180,170,150,.14); padding-bottom:8px; margin-bottom:8px; }
.kp-char-log-head b { display:block; color:#ffe6b0; font-size:16px; }
.kp-char-log-head span { display:block; color:#8f8778; font-size:11px; margin-top:3px; }
.kp-char-log-item { padding:8px 0; border-bottom:1px solid rgba(180,170,150,.1); }
.kp-char-log-meta { display:flex; gap:10px; align-items:center; color:#b9a884; font-size:11px; }
.kp-char-log-meta b { color:#d8c8a6; font-weight:600; }
.kp-char-log-item ul { margin:5px 0 0; padding-left:18px; color:#9a9284; font-size:12px; line-height:1.7; }
.kp-char-log-empty { color:#7d7566; font-size:12px; text-align:center; padding:18px; }


/* KP：玩家角色更新记录弹窗 */
.kp-char-log-overlay { position:fixed; inset:0; z-index:145; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.7); }
.kp-char-log-modal { width:min(620px,96vw); max-height:82vh; display:flex; flex-direction:column; background:linear-gradient(165deg,#1b1a20,#111116); border:1px solid rgba(180,170,150,.28); border-radius:14px; box-shadow:0 28px 80px rgba(0,0,0,.65); overflow:hidden; }
.kp-char-log-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 12px; border-bottom:1px solid rgba(180,170,150,.14); }
.kp-char-log-person { display:flex; align-items:center; gap:12px; min-width:0; }
.kp-char-log-av { width:48px; height:54px; flex:0 0 auto; border-radius:7px; overflow:hidden; background:#0f0f14; display:flex; align-items:center; justify-content:center; }
.kp-char-log-av img { width:100%; height:100%; object-fit:cover; }
.kp-char-log-person b { display:block; color:#ffe6b0; font-family:var(--font-display); font-size:20px; letter-spacing:.06em; }
.kp-char-log-person span { display:block; color:#8f8778; font-size:11px; margin-top:3px; }
.kp-char-log-close { width:28px; height:28px; flex:0 0 auto; border-radius:50%; border:1px solid rgba(190,180,160,.22); background:rgba(0,0,0,.24); color:#b9a884; font:14px/1 sans-serif; cursor:pointer; }
.kp-char-log-close:hover { color:#ffd99a; border-color:rgba(255,217,154,.5); }
.kp-char-log-modal-sub { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 18px; color:#7d7566; font-size:11px; border-bottom:1px solid rgba(180,170,150,.1); }
.kp-char-log-timeline { padding:10px 18px; overflow:auto; }
.kp-char-log-entry { position:relative; display:flex; gap:12px; padding:10px 0 12px 2px; }
.kp-char-log-entry + .kp-char-log-entry { border-top:1px solid rgba(180,170,150,.09); }
.kp-char-log-dot { width:8px; height:8px; flex:0 0 auto; margin-top:5px; border-radius:50%; background:#c9a86a; box-shadow:0 0 0 4px rgba(201,168,106,.1); }
.kp-char-log-dot.is-kp { background:#7f9a84; box-shadow:0 0 0 4px rgba(127,154,132,.1); }
.kp-char-log-entry-main { min-width:0; flex:1; }
.kp-char-log-entry-head { display:flex; align-items:center; gap:10px; }
.kp-char-log-who { color:#ffd99a; font-size:12px; font-weight:600; }
.kp-char-log-who.is-kp { color:#9fc0a6; }
.kp-char-log-entry-head time { color:#7d7566; font-size:10px; font-family:var(--font-num); }
.kp-char-log-changes { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.kp-char-log-change { padding:3px 8px; border:1px solid rgba(180,170,150,.16); border-radius:5px; background:#101116; color:#c9b995; font-size:11px; }
.kp-char-log-modal-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; border-top:1px solid rgba(180,170,150,.14); color:#7d7566; font-size:11px; }
@media (max-width: 640px) { .kp-char-log-modal-head { padding:12px 14px 10px; } .kp-char-log-timeline { padding:8px 14px; } .kp-char-log-modal-foot { padding:9px 14px; } }


/* 玩家准备页：加宽并压低顶部两张卡 */
.play-box { max-width: 1120px; }
.play-top-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.play-top-room .play-camp { padding:12px 15px; }
.play-top-room .play-camp-info { gap:2px; }
.play-top-room .play-camp-info span { line-height:1.55; }
.play-top-card .play-card-box { height:auto; padding:12px 15px; }
.play-top-card .play-card-head { margin-bottom:8px; }
.play-top-card .play-card-actions { margin-top:8px; }
.play-top-card .play-card-avatar { width:52px; height:52px; }
@media (max-width: 860px) { .play-top-grid { grid-template-columns:1fr; } }


#play .lore-container { max-width: 1180px; }


/* 玩家：复用 KP 人物卡面板 */
.play-kp-sheet-overlay { position:fixed; inset:0; z-index:160; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.76); }
.play-kp-sheet { width:min(1120px,97vw); max-height:94vh; display:flex; flex-direction:column; background:linear-gradient(165deg,#1a1a20,#101116); border:1px solid rgba(180,170,150,.28); border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.7); overflow:hidden; }
.play-kp-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid rgba(180,170,150,.15); background:#121218; }
.play-kp-sheet-id { display:flex; align-items:center; gap:10px; min-width:0; }
.play-kp-sheet-id img, .play-kp-sheet-id .ph { width:42px; height:46px; border-radius:6px; object-fit:cover; background:#0f0f14; display:flex; align-items:center; justify-content:center; }
.play-kp-sheet-id b { display:block; color:#ffe6b0; font-family:var(--font-display); font-size:18px; letter-spacing:.05em; }
.play-kp-sheet-id span { display:block; color:#8f8778; font-size:11px; margin-top:2px; }
.play-kp-sheet-actions { display:flex; align-items:center; gap:10px; color:#7d7566; font-size:11px; }
.play-kp-sheet-body { flex:1; min-height:0; overflow:auto; padding:0 4px 6px; }
.play-kp-sheet-body #kpCheck { display:block !important; background:transparent; border:0; padding:0; }
.play-kp-sheet-body #kpCheck .kpv2-check-wrap { max-width:none; padding:8px 12px 14px; }
.play-kp-sheet-body #kpActionBar, .play-kp-sheet-body #kpCharTabsRow, .play-kp-sheet-body #kpPlayerCards { display:none !important; }
.play-kp-sheet-body #kpResultOverlay { z-index:180; }
.play-kp-sheet-body .kpv2-check-attr-bar { margin-top:6px; }
@media (max-width: 640px) { .play-kp-sheet-overlay { padding:6px; } .play-kp-sheet-head { padding:9px 10px; } .play-kp-sheet-actions > span { display:none; } .play-kp-sheet-body #kpCheck .kpv2-check-wrap { padding:6px 8px 12px; } }


/* 玩家准备页：等高的战役房间 / 角色卡 */
.play-top-grid { align-items:stretch; }
.play-top-room .play-camp, .play-top-card .play-card-box { height:100%; box-sizing:border-box; }
.play-camp-room { justify-content:center; min-height:168px; padding:14px 18px; }
.play-camp-room .play-camp-info b { font-size:20px; }
.play-card-box { display:flex; flex-direction:column; min-height:168px; padding:12px 14px; }
.play-card-now-kp { align-items:center; gap:12px; flex:0 0 auto; position:relative; padding-right:20px; }
.play-card-now-kp .play-card-avatar { width:68px; height:82px; border-radius:9px; object-fit:cover; border:1px solid rgba(201,158,74,.32); }
.play-card-now-kp .play-card-avph { border-radius:9px; font-size:28px; }
.play-card-now-kp .play-card-info { flex:1; }
.play-card-now-kp .play-card-info b { font-size:17px; }
.play-card-kpstats { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:0 0 auto; }
.play-card-kpstats span { font-size:11px; color:#9a8f7c; white-space:nowrap; }
.play-card-kpstats b { font-size:16px; font-family:var(--font-num); }
.play-card-kpstats .hp b, .play-card-kpstats .hp { color:#e08a8a; }
.play-card-kpstats .san b, .play-card-kpstats .san { color:#bfe0a0; }
.play-card-kpstats small { color:#7d7566; font-size:10px; }
.play-card-kp-x { position:absolute; top:0; right:0; width:22px; height:22px; border:0; border-radius:50%; background:rgba(0,0,0,.25); color:#8f7a6a; font:12px/1 sans-serif; cursor:pointer; }
.play-card-kp-x:hover { color:#ff9c9c; background:rgba(160,48,64,.25); }
.play-card-box .play-card-actions { margin-top:auto; padding-top:10px; }
.play-card-box .play-card-empty { flex:1; }
@media (max-width: 860px) { .play-camp-room, .play-card-box { min-height:0; height:auto; } }


/* 回到跑团房间确认 */
.play-restore-overlay { position:fixed; inset:0; z-index:170; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); }
.play-restore-card { position:relative; width:min(460px,96vw); padding:22px 22px 18px; border:1px solid rgba(180,170,150,.28); border-radius:14px; background:linear-gradient(165deg,#1c1b21,#111116); box-shadow:0 26px 80px rgba(0,0,0,.7); text-align:left; }
.play-restore-x { position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; border:1px solid rgba(190,180,160,.2); background:rgba(0,0,0,.2); color:#b9a884; font:13px/1 sans-serif; cursor:pointer; }
.play-restore-x:hover { color:#ffd99a; border-color:rgba(255,217,154,.5); }
.play-restore-kicker { display:block; color:#8f7b4e; font-size:10px; letter-spacing:.16em; margin-bottom:4px; }
.play-restore-card h3 { margin:0 0 14px; color:#ffe6b0; font-family:var(--font-display); font-size:23px; letter-spacing:.06em; }
.play-restore-room { display:grid; grid-template-columns:44px minmax(0,1fr); gap:5px 10px; padding:11px 13px; border:1px solid rgba(180,170,150,.14); border-radius:9px; background:#101116; }
.play-restore-room-label { color:#7d7566; font-size:11px; }
.play-restore-room b { color:#e6dcc4; font-size:13px; font-weight:500; }
.play-restore-card p { margin:12px 0 16px; color:#9a9284; font-size:12px; line-height:1.7; }
.play-restore-actions { display:flex; justify-content:flex-end; gap:8px; }
.play-restore-go { background:rgba(201,158,74,.12); border-color:rgba(201,158,74,.45); color:#ffd99a; }
.play-restore-go:hover { background:rgba(201,158,74,.2); border-color:rgba(201,158,74,.7); }


.play-restore-card h3 { font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; font-weight: 700; letter-spacing: .04em; }


/* 玩家准备页：无标题、低高度、头像左侧渐隐 */
#play .page-header { display:none; }
#play .lore-container { padding-top: 8px; }
.play-camp-room { min-height:118px; height:100%; padding:10px 16px; justify-content:center; }
.play-camp-room .play-camp-info { gap:1px; }
.play-camp-room .play-camp-info b { font-size:19px; }
.play-camp-room .play-camp-info span { line-height:1.5; }
.play-card-box { min-height:118px; height:100%; padding:8px 12px 9px; }
.play-card-now-kp { position:relative; display:block; min-height:64px; padding-left:118px; padding-right:24px; }
.play-card-now-kp .play-card-avatar-link { position:absolute; left:0; top:0; bottom:0; width:108px; overflow:hidden; border-radius:8px 0 0 8px; }
.play-card-now-kp .play-card-avatar { width:100%; height:100%; border-radius:8px 0 0 8px; border:0; object-fit:cover; }
.play-card-now-kp .play-card-avatar-link { -webkit-mask-image: linear-gradient(to right, #000 58%, transparent 100%); mask-image: linear-gradient(to right, #000 58%, transparent 100%); }
.play-card-now-kp .play-card-avph { width:100%; height:100%; border-radius:8px 0 0 8px; font-size:26px; }
.play-card-now-kp .play-card-info { gap:1px; padding-top:3px; }
.play-card-now-kp .play-card-info b { font-size:16px; }
.play-card-now-kp .play-card-info > span { font-size:11px; line-height:1.5; }
.play-card-kpstats { flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; margin-top:5px; }
.play-card-kpstats b { font-size:15px; }
.play-card-kp-x { top:5px; right:5px; }
.play-card-box .play-card-actions { padding-top:6px; gap:6px; }
.play-card-box .play-card-actions .btn { padding:4px 10px; font-size:11px; }
@media (max-width: 860px) { .play-card-now-kp { padding-left:100px; } .play-card-now-kp .play-card-avatar-link { width:92px; } }


.play-card-box { position:relative; overflow:hidden; }
.play-card-now-kp { position:static; padding-left:118px; }
.play-card-now-kp .play-card-avatar-link { top:0; bottom:0; left:0; height:auto; border-radius:8px 0 0 8px; }
.play-card-kp-x { z-index:2; }
@media (min-width: 861px) { .play-camp-room, .play-card-box { height:118px !important; min-height:118px !important; max-height:118px !important; } }


.play-card-box { padding:6px 10px 7px; }
.play-card-now-kp { min-height:54px; padding-left:112px; }
.play-card-kpstats { margin-top:3px; gap:12px; }
.play-card-box .play-card-actions { padding-top:2px; }
.play-card-box .play-card-actions .btn { padding:3px 8px; font-size:10.5px; line-height:1.25; }


.play-card-box .play-card-actions { padding-left:112px; }
@media (max-width: 860px) { .play-card-box .play-card-actions { padding-left:0; } }


#play .lore-container { padding-top:26px; }
.play-card-box .play-card-actions { justify-content:flex-end; gap:8px; padding-left:112px; }
.play-card-box .play-card-actions .btn { padding:4px 12px; border-radius:7px; border-color:rgba(180,170,150,.24); background:#15151b; color:#d8c8a6; font-size:11px; }
.play-card-box .play-card-actions .btn:hover { border-color:rgba(201,158,74,.6); color:#ffd99a; }
.kpv2-char-card-badge { display:inline-flex; align-items:center; gap:5px; }
.kp-char-updated-label { color:#d8b878; font-size:10px; }
.kp-char-update-dot { width:15px; height:15px; padding:0; border-radius:50%; border:1px solid #d8b878; background:transparent; color:#ffd99a; font:10px/13px sans-serif; text-align:center; cursor:pointer; }
.kp-char-update-dot:hover { background:rgba(201,158,74,.12); border-color:#ffd99a; }
@media (max-width: 860px) { .play-card-box .play-card-actions { padding-left:0; justify-content:flex-start; } }


.play-card-box { padding-bottom:14px !important; }
.play-card-box .play-card-actions { padding-bottom:0; }


.play-card-box .play-card-actions { position:absolute; left:112px; right:10px; bottom:10px; padding:0; margin:0; justify-content:flex-end; }
@media (max-width: 860px) { .play-card-box .play-card-actions { position:static; left:auto; right:auto; bottom:auto; padding:6px 0 0; } }


.play-card-kpstats b { font-size:20px; line-height:1; font-weight:600; }
.play-card-kpstats span { font-size:12px; }
.play-card-kpstats small { font-size:11px; }


.kp-room-feed { max-height: 190px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.kp-room-feed::-webkit-scrollbar { width: 6px; }
.kp-room-feed::-webkit-scrollbar-thumb { background: rgba(201,158,74,.22); border-radius: 99px; }
.kp-room-msg { align-items: flex-start; }
.kp-room-msg-who { color:#c9b995; font-weight:500; }
.kp-room-msg-txt { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.55; }


.kp-char-player-tag { color:#8f8778; font-size:10px; font-weight:400; letter-spacing:0; }


/* 检定修正：奖励/惩罚胶囊开关 */
.kpv2-mod-btn.capsule { display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px; border-color:rgba(150,145,130,.24); background:rgba(18,18,24,.7); color:#8f8778; font-size:12px; }
.kpv2-mod-btn.capsule::before { content:''; width:7px; height:7px; border-radius:50%; background:#5c574b; box-shadow:0 0 0 3px rgba(92,87,75,.12); transition:background .15s, box-shadow .15s; }
.kpv2-mod-btn.capsule.bonus.active { color:#ffd99a; border-color:rgba(201,158,74,.65); background:rgba(201,158,74,.14); }
.kpv2-mod-btn.capsule.bonus.active::before { background:#e0b860; box-shadow:0 0 0 3px rgba(201,158,74,.2); }
.kpv2-mod-btn.capsule.penalty.active { color:#f0a0a8; border-color:rgba(212,77,94,.6); background:rgba(180,60,70,.14); }
.kpv2-mod-btn.capsule.penalty.active::before { background:#e88090; box-shadow:0 0 0 3px rgba(212,77,94,.2); }


/* 检定修正：0 / +1 / +2 分段胶囊 */
.kpv2-mod-capsule { display:inline-flex; align-items:center; gap:2px; padding:2px 3px 2px 2px; border:1px solid rgba(150,145,130,.24); border-radius:999px; background:rgba(18,18,24,.72); }
.kpv2-mod-capsule-label { padding:0 7px; color:#8a7a60; font-size:10px; white-space:nowrap; }
.kpv2-mod-seg { min-width:31px; height:24px; padding:0 6px; border:0; border-radius:999px; background:transparent; color:#8f8778; font:11px/1 var(--font-num); cursor:pointer; }
.kpv2-mod-seg:hover { background:rgba(255,255,255,.05); color:#e6dcc4; }
.kpv2-mod-seg.active { color:#1a1710; background:#c9a86a; font-weight:600; }
.kpv2-mod-capsule.penalty .kpv2-mod-seg.active { color:#1e1012; background:#d46a78; }
.kpv2-mod-capsule.bonus .kpv2-mod-seg.active { color:#1a1710; background:#c9a86a; }


/* 玩家沙盘工作台：全宽棋盘 + 下方工具坞 */
#play .lore-container { max-width: 1320px; }
.play-box { max-width: 1240px; }
.play-sandbox-token { pointer-events:auto; cursor:pointer; z-index:2; }
.play-sandbox-token:hover b { border-color:rgba(255,217,154,.6); color:#ffd99a; }
.play-personal-markers { position:absolute; inset:0; pointer-events:none; z-index:3; }
.play-personal-marker { position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; border:1px solid var(--mk,#c9a86a); background:rgba(10,11,14,.82); color:var(--mk,#c9a86a); font-size:10px; box-shadow:0 0 0 3px rgba(0,0,0,.25); }
.play-tools { margin:0 0 18px; border:1px solid rgba(170,180,190,.2); border-radius:12px; background:#0d0e12; overflow:hidden; }
.play-tools-tabs { display:flex; gap:2px; padding:6px; border-bottom:1px solid rgba(170,180,190,.14); background:#14151a; overflow-x:auto; }
.play-tool-tab { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border:1px solid transparent; border-radius:7px; background:transparent; color:#8f8778; font:12px/1.2 inherit; cursor:pointer; white-space:nowrap; }
.play-tool-tab:hover { color:#e6dcc4; background:rgba(255,255,255,.04); }
.play-tool-tab.active { color:#ffd99a; border-color:rgba(201,158,74,.35); background:rgba(201,158,74,.1); }
.play-tool-badge { display:none; min-width:16px; height:16px; padding:0 4px; align-items:center; justify-content:center; border-radius:99px; background:#c9a86a; color:#1a1710; font-size:10px; }
.play-tools-panel { padding:14px; min-height:120px; max-height:330px; overflow:auto; }
.play-tool-empty { color:#776f60; font-size:12px; line-height:1.7; padding:10px 2px; }
.play-clue-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.play-clue-item { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid rgba(180,170,150,.16); border-radius:8px; background:#111217; color:#c9bea8; text-align:left; cursor:pointer; }
.play-clue-item:hover { border-color:rgba(201,158,74,.44); }
.play-clue-item.is-unread { border-color:rgba(201,158,74,.34); background:rgba(201,158,74,.06); }
.play-clue-dot { width:6px; height:6px; border-radius:50%; background:#c9a86a; flex:0 0 auto; }
.play-clue-dot.is-read { background:#4d4a3f; }
.play-clue-item-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.play-clue-item-main b { color:#e6dcc4; font-size:12px; font-weight:600; }
.play-clue-item-main span { color:#8f8778; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.play-clue-thumb { width:38px; height:38px; border-radius:6px; background-size:cover; background-position:center; flex:0 0 auto; }
.play-tool-note textarea { width:100%; min-height:170px; resize:vertical; background:#0a0b0e; border:1px solid rgba(180,170,150,.2); border-radius:8px; color:#ded3bf; padding:11px 12px; font:13px/1.7 inherit; outline:none; }
.play-tool-note textarea:focus { border-color:rgba(201,158,74,.55); }
.play-note-foot { display:flex; justify-content:space-between; gap:10px; padding-top:6px; color:#776f60; font-size:10px; }
.play-note-foot b { color:#8f9f88; font-weight:400; }
.play-marker-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.play-marker-mode { padding:6px 12px; border:1px solid rgba(201,158,74,.32); border-radius:99px; background:transparent; color:#c9a86a; font:11px/1.2 inherit; cursor:pointer; }
.play-marker-mode.active { background:#c9a86a; color:#1a1710; }
.play-marker-label { flex:1; min-width:140px; padding:6px 9px; border:1px solid rgba(180,170,150,.2); border-radius:6px; background:#0a0b0e; color:#ded3bf; font:11px/1.2 inherit; }
.play-marker-colors { display:flex; gap:5px; }
.play-marker-color { width:16px; height:16px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:var(--mk,#c9a86a); cursor:pointer; }
.play-marker-color.active { box-shadow:0 0 0 2px #e6dcc4; }
.play-marker-hint { flex-basis:100%; color:#776f60; font-size:10px; }
.play-marker-list { display:flex; flex-direction:column; gap:4px; }
.play-marker-row { display:flex; align-items:center; gap:8px; padding:7px 8px; border-bottom:1px solid rgba(255,255,255,.05); font-size:11px; }
.play-marker-swatch { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.play-marker-name { color:#ded3bf; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.play-marker-coord { color:#776f60; font-size:10px; }
.play-marker-del { border:0; background:transparent; color:#a06060; font:10px inherit; cursor:pointer; }
.play-log-list { max-height:250px; overflow:auto; }
.play-log-row { display:flex; align-items:baseline; gap:8px; padding:6px 2px; border-bottom:1px solid rgba(255,255,255,.04); font-size:11px; }
.play-log-time { color:#6f685b; font-size:10px; flex:0 0 auto; }
.play-log-who { color:#c9b995; font-weight:500; flex:0 0 auto; }
.play-log-text { color:#a99e8a; min-width:0; }
.play-dice-tools { display:flex; flex-direction:column; gap:9px; }
.play-dice-btns { display:flex; gap:6px; flex-wrap:wrap; }
.play-dice-btns button { min-width:42px; padding:7px 10px; border:1px solid rgba(201,158,74,.3); border-radius:6px; background:#14151a; color:#c9a86a; font:11px/1.2 inherit; cursor:pointer; }
.play-dice-btns button:hover { border-color:#c9a86a; color:#ffd99a; }
.play-dice-skill { display:flex; gap:6px; }
.play-dice-skill select { flex:1; padding:6px 8px; background:#0a0b0e; border:1px solid rgba(180,170,150,.2); border-radius:6px; color:#ded3bf; font:11px inherit; }
.play-dice-skill button { padding:6px 10px; border:1px solid rgba(201,158,74,.35); border-radius:6px; background:transparent; color:#c9a86a; font:11px inherit; cursor:pointer; }
.play-dice-public { color:#8f8778; font-size:10px; }
.play-dice-result-card { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid rgba(201,158,74,.28); border-radius:8px; background:rgba(201,158,74,.06); }
.play-dice-result-card small { color:#b9a884; font-size:11px; }
.play-dice-result-card b { color:#ffd99a; font-size:26px; line-height:1; }
.play-dice-result-card span { color:#8f8778; font-size:10px; }
.play-dice-history { display:flex; flex-wrap:wrap; gap:6px; }
.play-dice-hist { display:flex; align-items:baseline; gap:5px; padding:4px 7px; border:1px solid rgba(255,255,255,.07); border-radius:5px; color:#8f8778; font-size:10px; }
.play-dice-hist b { color:#ded3bf; font-size:13px; }
.play-clue-overlay { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(4,5,7,.78); }
.play-clue-modal, .play-token-modal { width:min(680px,94vw); max-height:86vh; overflow:auto; border:1px solid rgba(201,158,74,.28); border-radius:12px; background:#111217; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.play-clue-modal-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 15px; border-bottom:1px solid rgba(255,255,255,.08); }
.play-clue-modal-head b { color:#ede0c8; font-size:15px; }
.play-clue-close { border:0; background:transparent; color:#b9a884; font:16px sans-serif; cursor:pointer; }
.play-clue-modal-body { padding:14px 16px 18px; }
.play-clue-modal-img { width:100%; max-height:52vh; object-fit:contain; border-radius:7px; margin-bottom:12px; background:#07080b; }
.play-clue-modal-body p { color:#c9bea8; font-size:13px; line-height:1.8; white-space:pre-wrap; margin:0; }
.play-token-modal-body { padding:14px 16px 16px; }
.play-token-line { display:flex; gap:10px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:12px; }
.play-token-line span { color:#776f60; min-width:42px; }
.play-token-line b { color:#ded3bf; font-weight:500; }
.play-token-note { color:#b9a884; font-size:12px; line-height:1.7; margin:10px 0 0; }
.play-token-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
@media (max-width:980px) { .play-clue-list { grid-template-columns:1fr; } .play-tools-panel { max-height:none; } }
@media (max-width:640px) { .play-tools-panel { padding:11px; } .play-tools-tabs { padding:5px; } .play-tool-tab { padding:6px 10px; } }


.play-log-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; color:#8f8778; font-size:10px; }
.play-log-head select { padding:3px 6px; border:1px solid rgba(180,170,150,.2); border-radius:5px; background:#0a0b0e; color:#b9a884; font:10px inherit; }


/* 房间内未选角色：拖拽上传卡 */
.play-card-box.is-empty { height:auto !important; min-height:154px !important; max-height:none !important; padding:16px 18px !important; justify-content:flex-start; }
.play-card-box.is-empty .play-card-empty { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.play-card-empty-kicker { color:#8f7b4e; font-size:10.5px; letter-spacing:.06em; }
.play-card-empty b { color:#e6dcc4; font-size:16px; font-weight:600; }
.play-card-empty > span { color:#8f8778; font-size:11.5px; line-height:1.6; }
.play-card-drop-hint { color:#6f685b; font-size:10px; }
.play-card-box.is-empty .play-card-actions { position:static !important; left:auto !important; right:auto !important; bottom:auto !important; padding:9px 0 0 !important; margin:0 !important; justify-content:flex-start !important; }
.play-card-box.is-drag { border-color:#c9a86a !important; background:rgba(201,158,74,.08) !important; box-shadow:0 0 0 2px rgba(201,158,74,.14); }
.play-card-box.is-drag .play-card-drop-hint { color:#ffd99a; }


.inv-room-return { margin-left:auto; color:#ffd99a !important; border-color:rgba(201,158,74,.4) !important; }


.inv-room-return-wrap { max-width:900px; margin:0 auto 14px; display:flex; justify-content:flex-end; padding:0 2px; }
.inv-room-return { margin:0; padding:7px 14px; border:1px solid rgba(201,158,74,.34); border-radius:999px; background:transparent; color:#ffd99a; font:12px/1.3 var(--font-serif); letter-spacing:.04em; cursor:pointer; }
.inv-room-return:hover { background:rgba(201,158,74,.1); border-color:rgba(201,158,74,.6); }


/* 玩家公开棋盘：复用 KP 投影世界层 */
.play-board-viewport { position:relative; height:56vh; min-height:360px; overflow:hidden; background:#08090c; }
.play-board-viewport:fullscreen { height:100vh; }
.play-board-viewport #playBoardWorld { position:absolute; left:0; top:0; width:1600px; height:900px; transform-origin:0 0; background-repeat:no-repeat; background-size:contain; background-position:center; }
.play-board-viewport .kpv2-combat-token { cursor:pointer; }
.play-board-viewport .kpv2-combat-token:hover { z-index:6; }
.play-combat-hud { display:none; }
.play-combat-hud.is-on { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 14px; border-top:1px solid rgba(170,180,190,.16); background:#121318; }
.play-combat-hud b { color:#ffd99a; font-size:12px; }
.play-combat-hud span { color:#8f8778; font-size:11px; }
.play-combat-hud button { margin-left:auto; padding:6px 14px; border:1px solid rgba(201,158,74,.4); border-radius:999px; background:rgba(201,158,74,.1); color:#ffd99a; font:12px inherit; cursor:pointer; }
.play-combat-hud button:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width:640px) { .play-board-viewport { height:42vh; min-height:280px; } }


/* 玩家战斗 HUD / 攻击面板 / KP 玩家行动确认 */
.play-pending-action { margin-left:auto; color:#d8b878; font-size:11px; }
.play-attack-modal { width:min(520px,94vw); border:1px solid rgba(201,158,74,.3); border-radius:12px; background:#111217; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.play-attack-body { display:flex; flex-direction:column; gap:10px; padding:14px 16px 18px; }
.play-attack-body label { display:flex; flex-direction:column; gap:4px; color:#8f8778; font-size:11px; }
.play-attack-body select { padding:7px 8px; border:1px solid rgba(180,170,150,.22); border-radius:6px; background:#0a0b0e; color:#ded3bf; font:12px inherit; }
.play-attack-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.play-atk-check { flex-direction:row !important; align-items:center; gap:7px !important; color:#c9bea8 !important; font-size:12px !important; }
.play-attack-preview { display:flex; gap:14px; flex-wrap:wrap; padding:8px 10px; border:1px solid rgba(255,255,255,.07); border-radius:7px; color:#8f8778; font-size:11px; }
.play-attack-preview b { color:#ffd99a; font-weight:500; }
.play-attack-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:2px; }
.play-atk-go { border-color:rgba(201,158,74,.5) !important; color:#ffd99a !important; }
.kp-room-actions-panel { display:flex; flex-direction:column; gap:7px; margin:10px 0 2px; }
.kp-room-action-card { padding:9px 10px; border:1px solid rgba(201,158,74,.28); border-radius:8px; background:rgba(201,158,74,.06); }
.kp-room-action-head { display:flex; justify-content:space-between; gap:8px; color:#e6dcc4; font-size:11px; }
.kp-room-action-head span { color:#8f8778; }
.kp-room-action-body { color:#b6a98f; font-size:11px; line-height:1.6; margin:4px 0 7px; }
.kp-room-action-actions { display:flex; gap:6px; }
.kp-room-action-actions .btn { padding:3px 9px; font-size:10px; }


.play-sandbox:fullscreen .play-board-viewport { height:calc(100vh - 54px); max-height:none; }


.play-sandbox-stage.play-board-viewport { height:56vh !important; max-height:56vh !important; }
@media (max-width:640px) { .play-sandbox-stage.play-board-viewport { height:42vh !important; max-height:42vh !important; } }


/* 玩家准备页顶部两张卡再压缩 */
@media (min-width:861px) {
  .play-camp-room, .play-card-box { height:108px !important; min-height:108px !important; max-height:108px !important; }
  .play-camp-room { padding:7px 15px !important; }
  .play-camp-room .play-camp-info { gap:0 !important; }
  .play-camp-room .play-camp-info b { font-size:17px !important; line-height:1.25 !important; }
  .play-camp-room .play-camp-info > span { font-size:10.5px !important; line-height:1.5 !important; }
  .play-card-box { padding:5px 10px 6px !important; }
  .play-card-now-kp { min-height:48px !important; padding-left:108px !important; padding-right:22px !important; }
  .play-card-now-kp .play-card-avatar-link { width:100px !important; }
  .play-card-now-kp .play-card-info { padding-top:1px !important; gap:0 !important; }
  .play-card-now-kp .play-card-info b { font-size:15px !important; line-height:1.25 !important; }
  .play-card-now-kp .play-card-info > span { font-size:10.5px !important; line-height:1.35 !important; }
  .play-card-kpstats { margin-top:2px !important; gap:10px !important; }
  .play-card-kpstats b { font-size:18px !important; }
  .play-card-box .play-card-actions { left:108px !important; right:10px !important; bottom:6px !important; gap:6px !important; }
  .play-card-box .play-card-actions .btn { padding:3px 10px !important; font-size:10.5px !important; line-height:1.2 !important; }
}


.play-token-attrs { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(255,255,255,.06); color:#b9ae98; font-size:11px; }
.play-token-attrs span { white-space:nowrap; }


/* 玩家战斗浮窗/紧凑信息/瞄准线 */
.play-token-modal { width:min(360px,94vw) !important; max-height:86vh; }
.play-token-modal .play-clue-modal-head { padding:10px 12px; }
.play-token-modal .play-token-modal-body { padding:10px 12px 12px; }
.play-token-modal .play-token-line { padding:4px 0; font-size:11px; }
.play-token-modal .play-token-note { font-size:11px; margin-top:8px; }
.play-combat-pop { max-height:calc(100vh - 20px); overflow:auto; }
.play-combat-san { margin-top:5px; color:#8f8778; font-size:11px; }
.play-combat-san b { color:#8fd0a0; font-size:13px; }
.play-aim-svg { position:absolute; left:0; top:0; width:1600px; height:900px; pointer-events:none; z-index:4; overflow:visible; }
.play-combat-pop .kpv2-pop-chips { flex-wrap:wrap; }


/* KP 沙盘待审批浮窗 / 玩家 KP 风格攻击面板 */
.kp-pending-action { position:fixed; right:18px; top:74px; z-index:10030; width:min(330px,92vw); padding:11px 12px; border:1px solid rgba(201,158,74,.5); border-radius:11px; background:linear-gradient(180deg,#211e18,#17151a); box-shadow:0 16px 42px rgba(0,0,0,.7); }
.kp-pending-head { display:flex; align-items:center; gap:8px; color:#e8d5a8; font-size:12px; }
.kp-pending-head span { color:#8d826f; font-size:10px; margin-left:auto; }
.kp-pending-close { border:0; background:transparent; color:#7b7163; cursor:pointer; font-size:12px; }
.kp-pending-body { margin:8px 0 9px; color:#d7c9ad; font-size:11px; line-height:1.55; }
.kp-pending-actions { display:flex; gap:7px; }
.kp-pending-actions .btn { flex:1; }
.play-attack-modal.kpv2-atk-player { width:min(560px,94vw); max-height:90vh; overflow:auto; padding:16px 18px; }
.play-attack-modal.kpv2-atk-player .kpv2-combat-bes-title { position:relative; padding-right:26px; }
.play-attack-close { position:absolute; right:0; top:0; width:24px; height:24px; border-radius:50%; border:1px solid #37312a; background:transparent; color:#8b7f6b; cursor:pointer; }


.kp-pending-action.is-board { right:auto; width:min(360px,92vw); }
.kp-pending-body { margin:8px 0 9px; color:#d7c9ad; font-size:11px; line-height:1.55; }
.kp-pending-line { display:flex; align-items:baseline; gap:7px; padding:3px 0; border-bottom:1px solid rgba(255,255,255,.045); }
.kp-pending-line:last-child { border-bottom:0; }
.kp-pending-line span { width:60px; flex:0 0 60px; color:#857a67; font-size:10px; }
.kp-pending-line b { color:#e0d2b7; font-size:11px; }
.kp-pending-line em { color:#9e8f77; font-style:normal; font-size:10px; }


/* 玩家检定结果居中 */
.play-dice-result-card { justify-content:center; text-align:center; }
.play-detail-result { text-align:center; }


/* 已行动棋子保持可读，不再压到看不清 */
.kpv2-combat-token.is-acted { opacity: 0.84; }
.kpv2-combat-token.is-acted.is-cur { opacity: 1; }
.kpv2-combat-token.is-acted .kpv2-combat-token-face { filter: saturate(0.92); }


/* 玩家个人标记：显示文字、可选中批量删除 */
.play-personal-marker { width:auto !important; min-width:20px; height:22px; padding:0 7px; gap:4px; border-radius:11px; justify-content:flex-start; pointer-events:none; }
.play-personal-marker-num { font-size:10px; font-weight:700; color:var(--mk,#c9a86a); }
.play-personal-marker-label { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eee1c6; font:10px/1 inherit; }
.play-personal-marker.is-selected { box-shadow:0 0 0 2px #fff1cf,0 2px 8px rgba(0,0,0,.5); }
.play-marker-row { cursor:pointer; border-radius:5px; }
.play-marker-row.is-selected { background:rgba(201,158,74,.12); }
.play-marker-row input[type=radio] { accent-color:#c9a86a; margin:0; }
.play-marker-bulk { display:flex; gap:7px; margin:8px 0 4px; }
.play-marker-bulk button { padding:4px 9px; border:1px solid rgba(201,158,74,.28); border-radius:5px; background:transparent; color:#c9a86a; font:10px inherit; cursor:pointer; }
.play-marker-bulk button.danger { color:#d47a7a; border-color:rgba(212,77,94,.3); }


.play-token-hpbar { height:6px; margin:7px 0 5px; border-radius:4px; background:#17171d; overflow:hidden; border:1px solid rgba(255,255,255,.06); }
.play-token-hpbar i { display:block; height:100%; border-radius:4px; transition:width .25s ease; }


/* 玩家沙盘全屏：API不可用/被拒绝时用固定层兜底 */
body.play-fs-lock { overflow:hidden; }
.play-sandbox.is-faux-fullscreen { position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; max-height:none !important; margin:0 !important; border-radius:0 !important; z-index:99999; display:flex; flex-direction:column; background:#07080b; }
.play-sandbox.is-faux-fullscreen .play-sandbox-viewport { flex:1; height:calc(100vh - 54px) !important; max-height:none !important; min-height:0 !important; }
.play-sandbox.is-faux-fullscreen .play-sandbox-stage { height:100% !important; max-height:none !important; }


/* 玩家公开棋盘网格：底图会覆盖 world 兜底网格，这里独立叠一层 */
.kpv2-public-grid { position:absolute; inset:0; pointer-events:none; z-index:0; background-image: repeating-linear-gradient(to right, rgba(201,158,74,.15) 0 1px, transparent 1px 200px), repeating-linear-gradient(to bottom, rgba(201,158,74,.15) 0 1px, transparent 1px 200px), repeating-linear-gradient(to right, rgba(201,158,74,.06) 0 1px, transparent 1px 50px), repeating-linear-gradient(to bottom, rgba(201,158,74,.06) 0 1px, transparent 1px 50px); }


/* 标记删除模式 */
.play-personal-markers.is-delete-mode .play-personal-marker { pointer-events:auto !important; cursor:crosshair; border-color:#e06b6b; box-shadow:0 0 0 2px rgba(224,107,107,.28); }
.play-personal-markers.is-delete-mode .play-personal-marker:hover { background:rgba(90,20,28,.92); }
.play-marker-bulk button.active { background:#c9a86a; color:#1a1710; }


/* 玩家投掷：属性/常用技能按钮 */
.play-dice-section { margin-top:10px; }
.play-dice-section-head { display:flex; align-items:baseline; gap:7px; color:#c9a86a; font-size:11px; letter-spacing:.06em; margin-bottom:6px; }
.play-dice-section-head small { color:#776f60; font-size:9px; letter-spacing:0; }
.play-dice-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:5px; }
.play-dice-chip { display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; padding:6px 8px; border:1px solid rgba(180,170,150,.16); border-radius:5px; background:#111217; color:#c9bea8; font:10px/1.2 inherit; cursor:pointer; text-align:left; }
.play-dice-chip:hover { border-color:rgba(201,158,74,.5); color:#f0dfbd; background:rgba(201,158,74,.06); }
.play-dice-chip.is-attr { border-color:rgba(106,143,196,.22); }
.play-dice-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.play-dice-chip b { color:#e0c084; font-size:10px; font-weight:400; white-space:nowrap; }


/* 移动端头部：去掉汉显换行与汉堡白块 */
.nav-toggle { background:transparent; border:0; color:var(--text-primary); }
@media (max-width: 768px) {
  .main-nav { padding:0 12px; }
  .nav-brand { min-width:0; gap:8px; }
  .brand-text { font-size:1rem; letter-spacing:.08em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
  .nav-right { gap:5px; }
  .nav-submit-btn, .nav-login-btn { padding:5px 9px; font-size:12px; white-space:nowrap; }
  .nav-toggle { display:flex; padding:8px 4px; }
  .nav-toggle span { width:20px; }
}
@media (max-width: 520px) {
  .brand-text { display:none; }
  .nav-submit-btn { padding:5px 7px; }
  .nav-login-btn { padding:5px 8px; }
}


/* 手机沙盘按 16:9 展示整张棋盘，横屏再交给用户缩放/平移 */
@media (max-width: 640px) {
  .play-sandbox-stage.play-board-viewport { height:auto !important; aspect-ratio:16 / 9; min-height:0 !important; max-height:none !important; }
}


/* 加入战役通行证：1207 房门海报（顶部横幅，避免被表单遮住） */
.inv-join-badge {
  border-color: rgba(201,158,74,.34);
  box-shadow: 0 24px 70px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,230,176,.08);
}
.inv-join-banner {
  position: relative; height: 230px; margin: -22px -22px 20px;
  overflow: hidden; border-bottom: 1px solid rgba(201,158,74,.24);
  background: #08080c;
}
.inv-join-banner picture { display: block; width: 100%; height: 100%; }
.inv-join-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(.92) contrast(1.04); }
.inv-join-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,12,0) 40%, rgba(8,8,12,.22) 66%, rgba(8,8,12,.88) 100%),
              linear-gradient(90deg, rgba(8,8,12,.2), rgba(8,8,12,0) 35%);
}
.inv-join-banner-title {
  position: absolute; left: 24px; bottom: 18px; z-index: 1;
  color: #f0d9a8; font-family: var(--font-display); font-size: 20px;
  letter-spacing: .12em; text-shadow: 0 2px 12px rgba(0,0,0,.85);
}
.inv-join-badge-main { text-shadow: 0 2px 12px rgba(0,0,0,.55); }
@media (max-width: 760px) {
  .inv-join-banner { height: 180px; margin: -18px -18px 16px; }
  .inv-join-banner img { object-position: 66% 38%; }
  .inv-join-banner-title { left: 18px; bottom: 14px; font-size: 17px; }
}


@media (max-width: 760px) { .inv-join { padding: 20px 14px 44px; } }


/* mobile top nav: keep page links visible; no hamburger */
@media (max-width: 768px) {
  .main-nav { display:flex; flex-wrap:wrap; height:auto; min-height:60px; padding:0 12px; }
  .nav-brand { order:1; }
  .nav-right { order:2; margin-left:auto; }
  .nav-links {
    order:3; display:flex !important; position:static; flex:0 0 100%;
    width:100%; flex-direction:row; flex-wrap:nowrap; gap:10px;
    margin:0; padding:5px 0 9px; overflow-x:auto; overflow-y:hidden;
    background:transparent; border:0; box-shadow:none; backdrop-filter:none;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .nav-links::-webkit-scrollbar { display:none; }
  .nav-links li { width:auto; flex:0 0 auto; }
  .nav-links .nav-link-btn { font-size:12px; padding:5px 0; letter-spacing:.06em; white-space:nowrap; }
  .nav-toggle { display:none !important; }
  .page { padding-top:104px; }
}

/* keep the scroll sequence above body canvas but below page content */
.seq-anim { z-index:0; }
.page { position:relative; z-index:1; }
.main-footer { position:relative; z-index:1; }

/* Mobile: portrait crop keeps the left statue in view instead of the empty center. */
@media (max-width: 768px) {
  .seq-anim img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 12% center;
    filter: brightness(1.18) saturate(1.02);
  }
}

/* ========================================
   视觉动效细节（v2.22.10）
   档案纸页 / 照片显影 / 墨迹扫过
   ======================================== */
/* 卡牌封面显影：加载完成加 is-loaded，避免突然出现 */
.card-cover,
.mythos-image.mythos-has-img img,
#mythosImgMain {
    opacity: 0;
    transform: scale(1.015);
    transition: opacity var(--motion-slow) ease, transform 700ms var(--ease-out);
}
.card-cover.is-loaded,
.mythos-image.mythos-has-img img.is-loaded,
#mythosImgMain.is-loaded {
    opacity: 1;
    transform: scale(1);
}
@media (hover: hover) {
    .timeline-card:hover .card-cover,
    .mythos-card:hover .mythos-image img {
        transform: scale(1.045);
    }
}

/* 卡牌入场：只对当前页面前 8 张做轻微错峰 */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.page.active .timeline-card,
.page.active .mythos-card {
    animation: cardIn var(--motion-slow) var(--ease-out) backwards;
}
.page.active .timeline-card:nth-child(2),
.page.active .mythos-card:nth-child(2) { animation-delay: 24ms; }
.page.active .timeline-card:nth-child(3),
.page.active .mythos-card:nth-child(3) { animation-delay: 48ms; }
.page.active .timeline-card:nth-child(4),
.page.active .mythos-card:nth-child(4) { animation-delay: 72ms; }
.page.active .timeline-card:nth-child(5),
.page.active .mythos-card:nth-child(5) { animation-delay: 96ms; }
.page.active .timeline-card:nth-child(6),
.page.active .mythos-card:nth-child(6) { animation-delay: 120ms; }
.page.active .timeline-card:nth-child(7),
.page.active .mythos-card:nth-child(7) { animation-delay: 144ms; }
.page.active .timeline-card:nth-child(8),
.page.active .mythos-card:nth-child(8) { animation-delay: 168ms; }

/* 搜索 / 秘级筛选：结果淡入，不改变 display 规则 */
@keyframes filterIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.is-filter-in {
    animation: filterIn var(--motion-fast) var(--ease-out) both;
}
.page.active .timeline-card.is-filter-in,
.page.active .mythos-card.is-filter-in,
.timeline-tier.is-filter-in {
    animation: filterIn var(--motion-fast) var(--ease-out) both;
}

/* 标签、按钮：统一轻按反馈与焦点环 */
.lore-tab,
.dtab,
.filter-btn,
.admin-nav-btn {
    transition: color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-out);
}
.lore-tab:active,
.dtab:active,
.filter-btn:active {
    transform: scale(0.98);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid rgba(201, 158, 74, 0.72);
    outline-offset: 3px;
}

/* 投稿类型切换：轻微淡入，不改变表单显示逻辑 */
@keyframes formIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.page.active .sform.active {
    animation: formIn var(--motion-base) var(--ease-out) both;
}

/* 图鉴浮窗：遮挡层淡入，内容轻浮入 */
@keyframes overlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes mythosModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.mythos-img-overlay.show {
    animation: overlayIn 180ms ease both;
}
.mythos-img-overlay.show .mythos-img-modal {
    animation: mythosModalIn var(--motion-base) var(--ease-out) both;
}