:root {
  --bg-paper: #e6e6e6;
  --ink: #0a0a0a;
  --ink-light: #333;
  --gold: #b8860b;
  --red: #a31818;
  --font-art: 'Ma Shan Zheng', cursive;
  --font-std: 'Noto Serif SC', serif;
}
/* 添加到 style.css 中 */
.m-desc-box .kw {
    font-weight: bold;
    color: var(--red); /* 使用你定义的红色 */
    background: rgba(163, 24, 24, 0.08);
    padding: 1px 3px;
    border-radius: 2px;
    white-space: nowrap; /* 防止关键字被拆分 */
}

/* 规则列表中的内容也可以考虑添加一些样式来区分标题和解释 */
.rule-body strong {
    color: var(--ink);
    font-weight: 900;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background-color: var(--bg-paper);
  background-image: url("https://www.transparenttextures.com/patterns/rice-paper-2.png");
  color: var(--ink); font-family: var(--font-std); overflow-x: hidden;
}

/* === 音乐开关 === */
.music-control { position: fixed; top: 20px; right: 20px; z-index: 1000; width: 50px; height: 50px; background: var(--bg-paper); border: 2px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: 0.3s; }
.music-control:hover { transform: scale(1.1); border-color: var(--red); color: var(--red); }
.music-icon { font-family: var(--font-art); font-size: 1.5rem; font-weight: bold; user-select: none; }
.music-control.playing { animation: spin-music 5s linear infinite; border-color: var(--red); color: var(--red); }
@keyframes spin-music { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }

/* === 水墨背景 === */
#ink-container { position: fixed; inset: 0; z-index: -1; opacity: 0.08; pointer-events: none; filter: contrast(150%) brightness(100%); }

/* === 头部 === */
.hero { height: 70vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.brand-box { position: relative; text-align: center; margin-bottom: 20px; }
.ink-title { font-family: var(--font-art); font-size: 8rem; margin: 0; color: var(--ink); filter: url(#ink-flow); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%,100%{transform:scale(1);} 50%{transform:scale(1.02);} }
.stamp { position: absolute; top: 10px; right: -30px; width: 50px; height: 50px; line-height: 50px; background: var(--red); color: #fff; font-family: var(--font-std); font-weight: bold; border-radius: 4px; transform: rotate(15deg); }
.subtitle { font-size: 1.2rem; letter-spacing: 8px; color: var(--ink-light); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 10px 0; display: inline-block; margin-bottom: 40px; }
.btn-group { display: flex; gap: 20px; justify-content: center; }
.btn-ink { background: var(--ink); color: #fff; border: none; padding: 12px 40px; font-family: var(--font-art); font-size: 1.5rem; cursor: pointer; transition: 0.4s; clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%); }
.btn-ink:hover { background: var(--red); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 10px 35px; font-family: var(--font-art); font-size: 1.5rem; cursor: pointer; transition: 0.3s; }
.btn-outline:hover { background: var(--ink); color: #fff; }

/* === 容器 === */
.container { max-width: 1200px; margin: 0 auto; padding: 50px 20px; }
.section-title { text-align: center; margin-bottom: 60px; }
.section-title h2 { font-family: var(--font-art); font-size: 3rem; margin: 0 20px; display: inline-block; }
.deco-l, .deco-r { display: inline-block; width: 50px; height: 2px; background: var(--ink); vertical-align: middle; position: relative; }
.deco-l::before { content:''; position: absolute; left:0; top:-4px; width:10px; height:10px; background:var(--ink); transform:rotate(45deg); }
.deco-r::after { content:''; position: absolute; right:0; top:-4px; width:10px; height:10px; background:var(--ink); transform:rotate(45deg); }

/* === 筛选栏 === */
.filter-ink-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px dashed #999; }
.filter-item { font-family: var(--font-art); font-size: 1.2rem; cursor: pointer; padding: 5px 15px; margin-right: 10px; position: relative; }
.filter-item.active { color: var(--red); font-size: 1.4rem; }
.filter-item.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--ink); border-radius: 50%; }
#search { background: transparent; border: none; border-bottom: 2px solid var(--ink); font-family: var(--font-std); width: 200px; padding: 5px; font-size: 1rem; outline: none; }

/* === 卡牌网格 === */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 30px; perspective: 1000px; }
.card-item { position: relative; height: 280px; cursor: pointer; background: #fff; box-shadow: 5px 5px 15px rgba(0,0,0,0.2); transition: transform 0.3s; border: 1px solid transparent; }
.card-item::before { content:''; position: absolute; inset: 3px; border: 1px solid var(--ink); opacity: 0.3; pointer-events: none; }
.card-item:hover { transform: rotateZ(2deg) scale(1.05); box-shadow: 10px 10px 25px rgba(0,0,0,0.3); z-index: 10; }
.card-img { width: 100%; height: 75%; object-fit: cover; filter: sepia(0.3) grayscale(0.2); transition: 0.3s; }
.card-item:hover .card-img { filter: none; }
.card-name { height: 25%; display: flex; align-items: center; justify-content: center; font-family: var(--font-art); font-size: 1.4rem; color: var(--ink); background: url('https://www.transparenttextures.com/patterns/white-paper.png'); }

/* Loading */
.loading-box { text-align: center; padding: 50px; grid-column: 1/-1; }
.ink-loader { width: 20px; height: 20px; background: var(--ink); border-radius: 50%; margin: 0 auto 20px; animation: ink-drop 1.5s infinite; }
@keyframes ink-drop { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }

/* === 万法阁（书本） === */
.knowledge-overlay .book-container { width: min(1100px, 95%); height: 85vh; background: #f9f7f0 url("https://www.transparenttextures.com/patterns/aged-paper.png"); box-shadow: 0 20px 60px rgba(0,0,0,0.9); display: flex; position: relative; border: 1px solid #ccc; border-radius: 4px; animation: bookOpen 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
@keyframes bookOpen { from{transform: scale(0.9); opacity:0;} to{transform: scale(1); opacity:1;} }

.book-tabs { width: 60px; display: flex; flex-direction: column; gap: 10px; padding-top: 40px; background: #2c2c2c; border-right: 2px solid var(--gold); }
.book-tab { writing-mode: vertical-lr; padding: 20px 15px; color: #888; cursor: pointer; font-family: var(--font-art); font-size: 1.1rem; letter-spacing: 4px; transition: 0.3s; border-left: 3px solid transparent; }
.book-tab.active { background: var(--gold); color: #fff; border-left-color: #fff; }
.book-tab:hover:not(.active) { color: #fff; }
.close-book { position: absolute; right: 20px; top: 10px; font-size: 2rem; cursor: pointer; z-index: 10; color: var(--ink); }

.book-pages { flex-grow: 1; overflow: hidden; position: relative; padding: 40px; display: flex; flex-direction: column; }
.page-content { display: none; height: 100%; flex-direction: column; animation: fadeIn 0.5s; }
.page-content.active { display: flex; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.page-header { text-align: center; margin-bottom: 30px; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 10px; flex-shrink: 0; }
.page-header h3 { font-family: var(--font-art); font-size: 2.5rem; color: var(--ink); margin: 0; }
.page-header p { color: var(--gold); font-size: 0.9rem; letter-spacing: 2px; margin-top: 5px; }

/* === 英雄卡列表 (完美适配数据) === */
.hero-list { flex-grow: 1; overflow-y: auto; padding-right: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap: 25px; }
.hero-card { border: 1px solid #ccc; background: rgba(255,255,255,0.6); padding: 20px; border-radius: 6px; transition: 0.3s; position: relative; }
.hero-card:hover { border-color: var(--gold); background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.hero-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; border-bottom: 1px dashed #ccc; padding-bottom: 10px; }
.hero-base { flex-grow: 1; }
.hero-title { color: var(--gold); font-size: 0.9rem; font-weight: bold; margin-bottom: 4px; letter-spacing: 1px; }
.hero-name { font-family: var(--font-art); font-size: 2rem; color: var(--ink); line-height: 1; }
.hero-tags { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
.h-tag { font-size: 0.75rem; padding: 2px 6px; border-radius: 3px; background: #eee; color: #555; }
.hero-stat-block { text-align: right; margin-left: 15px; }
.hero-stat { font-family: 'Courier New', monospace; font-weight: bold; font-size: 1.2rem; color: var(--red); }
.hero-stat-label { font-size: 0.7rem; color: #888; }
.hero-diff { color: var(--gold); font-size: 0.9rem; margin-top: 4px; }
.hero-skill-box { margin-bottom: 10px; }
.hero-skill-item { font-size: 0.95rem; color: #333; line-height: 1.6; margin-bottom: 8px; }
.skill-label { font-weight: bold; color: var(--ink); background: rgba(0,0,0,0.05); padding: 1px 4px; border-radius: 3px; }
.hero-comment { background: rgba(184, 134, 11, 0.08); padding: 10px; border-left: 3px solid var(--gold); font-size: 0.85rem; color: #555; font-style: italic; }
.comment-label { font-weight: bold; color: var(--gold); font-style: normal; margin-right: 5px; }

/* === 规则列表 === */
.rule-content-box { flex-grow: 1; overflow-y: auto; padding-right: 10px; }
.rule-block { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.rule-title { font-family: var(--font-art); font-size: 1.4rem; color: var(--ink); margin-bottom: 8px; display: flex; align-items: center; }
.rule-title::before { content: '♦'; color: var(--gold); font-size: 0.8rem; margin-right: 8px; }
.rule-body { line-height: 1.8; color: #444; font-size: 1rem; white-space: pre-line; }

/* 滚动条 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* 弹窗通用 */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 2000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-scroll { width: min(800px, 90%); background: #f4f4f4; position: relative; display: flex; flex-direction: column; box-shadow: 0 0 50px rgba(0,0,0,0.8); border-top: 10px solid var(--ink); border-bottom: 10px solid var(--ink); animation: unfold 0.5s ease-out; }
.modal-inner { display: flex; flex-wrap: wrap; }
.modal-visual { width: 40%; background: #e0e0e0; position: relative; overflow: hidden; display: flex; align-items: center; }
.modal-visual img { width: 100%; z-index: 2; }
.ink-splash { position: absolute; width: 200%; height: 200%; background: var(--ink); border-radius: 40%; opacity: 0.1; animation: spin 10s linear infinite; z-index: 1; }
.modal-text { width: 60%; padding: 30px; }
.m-tags { margin-top: 10px; margin-bottom: 10px; }
.tag-gold { background: var(--gold); color: #fff; padding: 2px 8px; font-size: 0.8rem; margin-right: 5px; }
.tag-ink { background: var(--ink); color: #fff; padding: 2px 8px; font-size: 0.8rem; }
.m-desc-box p { line-height: 1.8; }
.close-modal { position: absolute; right: 20px; top: 10px; font-size: 2rem; cursor: pointer; z-index: 10; }

@media (max-width: 768px) {
  .hero { height: 60vh; }
  .ink-title { font-size: 4rem; }
  .modal-inner { flex-direction: column; }
  .modal-visual, .modal-text { width: 100%; }
  .hero-list { grid-template-columns: 1fr; }
}