/* ============================================================
   雪绒花店 · 站点通用样式
   ------------------------------------------------------------
   管导航栏、首页、分区列表页 —— 文章正文的样式在 fandom.css 里
   ============================================================ */

/* ---------- 导航栏 ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 8, 8, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}

.site-nav-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0.7em 1.4em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.site-nav-brand {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  border-bottom: none;
  white-space: nowrap;
}

.site-nav-brand .brand-cn {
  font-family: var(--font-heading);
  font-size: 1.05em;
  letter-spacing: 0.14em;
  color: var(--color-heading);
  font-weight: 600;
}

.site-nav-brand .brand-en {
  font-size: 0.7em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-quiet);
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 0.15em;
}

/* ---------- 导航栏上的图标按钮 + 展开面板 ---------- */
.nav-sep {
  width: 1px;
  height: 16px;
  margin: 0 0.5em;
  background: var(--color-border);
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--color-quiet);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}

.nav-icon:hover { color: var(--color-heading); background: rgba(255, 255, 255, 0.06); }

.nav-icon[aria-expanded="true"] {
  color: var(--color-link-hover);
  border-color: var(--color-border);
  background: rgba(255, 255, 255, 0.05);
}

/* 面板从导航栏下沿滑出 */
.nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 101;
  background: rgba(10, 10, 12, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}

.nav-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s 0s;
}

.nav-panel-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1em 1.4em;
  display: flex;
  align-items: center;
  gap: 1.2em;
}

.nav-panel-label {
  flex: 0 0 auto;
  font-size: 0.8em;
  letter-spacing: 0.14em;
  color: var(--color-quiet);
}

/* 搜索面板自己一段布局 */
.nav-panel-searchbar { padding-bottom: 0.6em; }

/* 主题面板只有标签 + 六个圆点，右对齐收窄，别拉成一整条空带 */
#nav-panel-theme .nav-panel-inner {
  justify-content: flex-end;
  padding: 0.6em 1.4em;
  gap: 0.9em;
}

.search-results {
  max-width: var(--content-width);
  margin: 0 auto;
  max-height: 62vh;
  overflow-y: auto;
  padding: 0 1.4em 1.1em;
}

.search-results:empty { display: none; }

/* ---------- 主题色调选择器 ---------- */
.theme-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55em;
}

.theme-dot {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--dot, #8a8a94);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.theme-dot:hover { transform: scale(1.2); }

.theme-dot.is-active {
  box-shadow: 0 0 0 2px rgba(10, 10, 12, 0.96), 0 0 0 3px var(--dot, #8a8a94);
}

body.theme-light .theme-dot { border-color: rgba(0, 0, 0, 0.25); }

.site-nav-links a {
  padding: 0.35em 0.85em;
  border-radius: 4px;
  border-bottom: none;
  font-size: 0.92em;
  letter-spacing: 0.06em;
  color: var(--color-body-text);
  transition: background .18s, color .18s;
}

.site-nav-links a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-link-hover);
}

.site-nav-links a.active {
  color: var(--color-link-hover);
  background: rgba(255, 255, 255, 0.06);
}

/* 浅色主题下换成浅色导航 */
body.theme-light .site-nav {
  background: rgba(255, 255, 255, 0.86);
}
body.theme-light .site-nav-links a:hover,
body.theme-light .site-nav-links a.active {
  background: rgba(0, 0, 0, 0.06);
}

/* ---------- 首页：顶图 ---------- */
.hero {
  position: relative;
  min-height: 340px;
  margin: 0.4em 0 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.78) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2.6em 1.5em;
}

.hero-cn {
  font-family: var(--font-heading);
  font-size: 2.2em;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

.hero-en {
  margin-top: 0.7em;
  font-size: 0.8em;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.hero-tagline {
  margin: 1.4em 0 0;
  font-size: 0.94em;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.86);
}

.hero-plain {
  background: linear-gradient(135deg, #1b1b1f 0%, #101014 100%);
}

/* ---------- 首页：hero 里的数字带 ---------- */
.hero-stats {
  margin-top: 1.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em 1.6em;
  font-size: 0.82em;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.66);
}

.hero-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}

.hero-stats b {
  font-family: var(--font-heading);
  font-size: 1.28em;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
}

/* ---------- 首页：分区货架（便当格） ---------- */
.shelves {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-auto-rows: minmax(112px, auto);
  gap: 0.9em;
  margin-bottom: 3em;
}

.shelf {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35em;
  padding: 1.3em 1.2em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.02);
  background-size: cover;
  background-position: center;
  transition: transform .18s, border-color .18s, background-color .18s;
}

/* 蒙版单独做成一层伪元素。
   为什么不跟图片一起写进 background-image 的渐变层？
   因为蒙版颜色要跟着主题变（浅色主题得换成白蒙版），
   而「相对 URL 放进 CSS 变量」会按 site.css 的目录解析成 css/images/…
   —— 所以图片 URL 只能留在元素的 background-image 上，蒙版走变量。 */
.shelf::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--veil-top, transparent), var(--veil-bottom, transparent));
  pointer-events: none;
}

/* 随机底图：JS 从 data-covers 里挑一张，加载完淡入 */
.shelf-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity .7s ease;
}

.shelf-bg.is-loaded { opacity: 1; }

/* 内容浮在蒙版之上 */
.shelf > span { position: relative; z-index: 2; }

/* 顶部那条代表色 */
.shelf::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--accent, transparent);
  opacity: 0.65;
  transition: opacity .18s, height .18s;
}

.shelf:hover {
  transform: translateY(-3px);
  border-color: var(--accent, #6a6a6a);
  background-color: rgba(255, 255, 255, 0.055);
}

.shelf:hover::before { opacity: 1; height: 3px; }

/* 最大的那一格：跨两行 */
.shelf-lg { grid-row: span 2; }

.shelf-lg .shelf-name { font-size: 1.5em; }
.shelf-lg .shelf-icon { font-size: 2em; }

.shelf-icon {
  font-size: 1.45em;
  line-height: 1;
  color: var(--accent, var(--color-link-hover));
}

.shelf-name {
  font-family: var(--font-heading);
  font-size: 1.08em;
  letter-spacing: 0.12em;
  color: var(--color-heading);
}

.shelf-desc {
  font-size: 0.83em;
  color: var(--color-quiet);
  line-height: 1.6;
}

.shelf-count {
  margin-top: 0.3em;
  font-size: 0.75em;
  letter-spacing: 0.12em;
  color: var(--color-quiet);
}

/* 浅色主题下的货架 */
body.theme-light .shelf {
  background-color: rgba(0, 0, 0, 0.02);
}
body.theme-light .shelf:hover {
  background-color: rgba(0, 0, 0, 0.045);
  border-color: #9aa0a6;
}
/* 浅色主题下带底图的卡片：蒙版要翻白，否则深底配深字糊成一团 */
body.theme-light .shelf {
  --veil-top: rgba(255, 255, 255, 0.5);
  --veil-bottom: rgba(255, 255, 255, 0.93);
}

/* ---------- 首页：最近更新 ---------- */
.recent { margin-bottom: 2.4em; }

.recent-title {
  font-size: 1.05em;
  letter-spacing: 0.14em;
  color: var(--color-heading);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5em;
  margin-bottom: 0.2em;
}

.recent-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent-list li {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.theme-light .recent-list li { border-bottom-color: rgba(0, 0, 0, 0.07); }

.recent-item {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.7em 0.5em;
  border-radius: 6px;
  transition: background .15s;
}

.recent-item:hover { background: rgba(255, 255, 255, 0.045); }
body.theme-light .recent-item:hover { background: rgba(0, 0, 0, 0.035); }

.recent-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 50px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recent-thumb-empty {
  font-size: 1.4em;
  color: var(--accent, var(--color-quiet));
  border: 1px solid var(--color-border);
}

.recent-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.recent-name {
  font-size: 0.95em;
  color: var(--color-heading);
  letter-spacing: 0.04em;
}

.recent-desc {
  font-size: 0.77em;
  color: var(--color-quiet);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-section {
  flex: 0 0 auto;
  font-size: 0.74em;
  letter-spacing: 0.1em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--accent, var(--color-quiet));
}

/* ---------- 首页：关于横条 ---------- */
.about-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  padding: 1.4em 1.5em;
  margin-bottom: 1em;
  border: 1px solid var(--color-border);
  border-left: 2px solid #e3c2d1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.about-band-title {
  font-family: var(--font-heading);
  font-size: 1em;
  letter-spacing: 0.14em;
  color: var(--color-heading);
  margin: 0 0 0.4em;
  padding: 0;
  border: none;
}

.about-band-text p {
  margin: 0;
  font-size: 0.85em;
  line-height: 1.75;
  color: var(--color-quiet);
}

.about-band-link {
  flex: 0 0 auto;
  font-size: 0.84em;
  letter-spacing: 0.1em;
  padding: 0.5em 1.1em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}

.about-band-link:hover {
  border-color: #e3c2d1;
  background: rgba(227, 194, 209, 0.08);
}

/* ---------- 全站搜索 ---------- */
.search-wrap {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 0.4em 0 1.6em;
}

.search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.62em 1em;
  font: inherit;
  font-size: 0.92em;
  color: var(--color-body-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: border-color .15s, background .15s;
}

.search-input::placeholder { color: var(--color-quiet); }

.search-input:focus {
  outline: none;
  border-color: var(--color-link-hover);
  background: rgba(255, 255, 255, 0.05);
}

.search-meta {
  flex: 0 0 auto;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  color: var(--color-quiet);
}

.search-results { margin-bottom: 2.4em; }

.search-hit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25em 1em;
  padding: 0.85em 1em;
  margin-bottom: 0.5em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color .15s, background .15s;
}

.search-hit:hover {
  border-color: var(--color-link-hover);
  background: rgba(255, 255, 255, 0.05);
}

.search-hit-title {
  font-family: var(--font-heading);
  font-size: 0.98em;
  letter-spacing: 0.06em;
  color: var(--color-heading);
}

.search-hit-sec {
  font-size: 0.74em;
  letter-spacing: 0.1em;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-quiet);
  white-space: nowrap;
}

.search-hit-snip {
  grid-column: 1 / -1;
  font-size: 0.82em;
  line-height: 1.7;
  color: var(--color-quiet);
}

.search-hit-snip mark {
  background: rgba(235, 186, 129, 0.22);
  color: var(--color-heading);
  border-radius: 3px;
  padding: 0 0.15em;
}

body.theme-light .search-input { background: rgba(0, 0, 0, 0.03); }
body.theme-light .search-hit { background: rgba(0, 0, 0, 0.02); }

/* ---------- 关于页 ---------- */
.about-lede {
  font-size: 1.02em;
  line-height: 1.95;
  color: var(--color-body-text);
  margin: 0.6em 0 0;
  max-width: 46em;
}

.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.8em;
  margin: 1.4em 0 0.5em;
  font-size: 0.88em;
  letter-spacing: 0.08em;
  color: var(--color-quiet);
}

.about-stats b {
  font-family: var(--font-heading);
  font-size: 1.3em;
  font-weight: 600;
  color: var(--color-heading);
  margin-right: 0.25em;
}

.about-stats a { border-bottom: 1px solid transparent; }
.about-stats a:hover { border-bottom-color: var(--color-link-hover); }

.about-block { margin: 2.4em 0; }

.about-h2 {
  font-family: var(--font-heading);
  font-size: 1.12em;
  letter-spacing: 0.14em;
  color: var(--color-heading);
  margin: 0 0 0.9em;
  padding: 0 0 0.45em;
  border-bottom: 1px solid var(--color-border);
}

.about-h2-sub {
  font-family: var(--font-body);
  font-size: 0.72em;
  letter-spacing: 0.06em;
  color: var(--color-quiet);
  margin-left: 0.9em;
}

.about-p {
  font-size: 0.93em;
  line-height: 1.95;
  color: var(--color-body-text);
  margin: 0 0 0.9em;
  max-width: 46em;
}

/* 站点规则 */
.rule-list {
  margin: 0;
  padding: 1.4em 1.5em;
  border: 1px solid var(--color-border);
  border-left: 2px solid #a9bde0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  max-width: 46em;
}

.rule-row {
  display: flex;
  gap: 1.2em;
  align-items: baseline;
  font-size: 0.9em;
  margin: 0 0 0.9em;
}

.rule-row:last-child { margin-bottom: 0; }

.rule-row dt {
  flex: 0 0 5em;
  font-family: var(--font-heading);
  letter-spacing: 0.08em;
  color: var(--color-link-hover);
}

.rule-row dd {
  margin: 0;
  color: var(--color-body-text);
  line-height: 1.8;
}

/* ---------- 小屏：货架退回单列 ---------- */
@media (max-width: 700px) {
  .shelves { grid-template-columns: 1fr; }
  .shelf-lg { grid-row: auto; }
  .shelf-lg .shelf-name { font-size: 1.15em; }
  .shelf-lg .shelf-icon { font-size: 1.5em; }
  .about-band { flex-direction: column; align-items: flex-start; }
  .recent-thumb { width: 56px; height: 40px; }
  .recent-desc { display: none; }
  .rule-row { flex-direction: column; gap: 0.15em; }
  .rule-row dt { flex: none; }
}

/* ---------- 分区列表页 ---------- */
.section-title {
  font-family: var(--font-heading);
  font-size: 1.9em;
  letter-spacing: 0.16em;
  text-align: left;
  margin: 0.2em 0 0.15em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--color-border);
}

.section-icon {
  color: var(--color-link-hover);
  margin-right: 0.4em;
  font-size: 0.85em;
}

.section-desc {
  margin: 0 0 2em;
  font-size: 0.9em;
  color: var(--color-quiet);
  letter-spacing: 0.04em;
}

.entry-grid {
  display: grid;
  gap: 0.9em;
}

.entry-card {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 1.2em 1.4em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--color-border);
  transition: transform .18s, border-color .18s, background .18s;
}

.entry-card:hover {
  transform: translateY(-2px);
  border-color: #6a6a6a;
  background: rgba(255, 255, 255, 0.055);
}

body.theme-light .entry-card { background: rgba(0, 0, 0, 0.02); }
body.theme-light .entry-card:hover { background: rgba(0, 0, 0, 0.045); border-color: #9aa0a6; }

.entry-class {
  font-size: 0.73em;
  letter-spacing: 0.16em;
  color: var(--color-quiet);
}

.entry-title {
  font-family: var(--font-heading);
  font-size: 1.12em;
  letter-spacing: 0.05em;
  color: var(--color-heading);
}

.entry-desc {
  font-size: 0.87em;
  line-height: 1.7;
  color: var(--color-body-text);
  opacity: 0.82;
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
  margin-top: 0.2em;
}

.entry-tags em {
  font-style: normal;
  font-size: 0.73em;
  padding: 0.1em 0.65em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-quiet);
}

.empty {
  color: var(--color-quiet);
  font-size: 0.92em;
  padding: 2em 0;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}

/* ---------- 文章分组（按作者） ---------- */
.entry-group {
  margin-bottom: 2.6em;
}

.group-title {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-heading);
  font-size: 1.15em;
  letter-spacing: 0.14em;
  color: var(--color-heading);
  margin: 0 0 0.9em;
  padding-bottom: 0.45em;
  border-bottom: 1px solid var(--color-border);
}

.group-count {
  font-size: 0.7em;
  font-family: var(--font-body);
  letter-spacing: 0.1em;
  color: var(--color-quiet);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.05em 0.6em;
}

.entry-authors {
  font-size: 0.76em;
  letter-spacing: 0.06em;
  color: var(--color-quiet);
}

/* ---------- 谱面条目 ---------- */
.chart-grid {
  display: grid;
  /* 两列：难度名动辄 40+ 字符，窄卡里会挤成一坨 */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1.1em;
}

.chart-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--color-border);
  transition: transform .18s, border-color .18s;
}

.chart-card:hover {
  transform: translateY(-3px);
  border-color: #6a6a6a;
}

.chart-cover {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #141418;
}

.chart-body {
  padding: 0.9em 1.1em 1.1em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.chart-title {
  font-family: var(--font-heading);
  font-size: 1em;
  color: var(--color-heading);
  line-height: 1.45;
}

.chart-meta {
  font-size: 0.76em;
  color: var(--color-quiet);
  letter-spacing: 0.05em;
}

.chart-dl {
  margin-top: 0.6em;
  display: inline-block;
  align-self: flex-start;
  padding: 0.35em 1em;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.84em;
  color: var(--color-body-text);
  border-bottom: 1px solid var(--color-border);
  transition: background .18s, border-color .18s;
}

.chart-dl:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-link-hover);
  color: var(--color-link-hover);
}

/* 浅色主题 */
body.theme-light .chart-card { background: rgba(0, 0, 0, 0.02); }
body.theme-light .chart-dl:hover { background: rgba(0, 0, 0, 0.05); }

/* 通关判定提示条 —— 全页最关键的一条信息，放在最显眼处 */
.chart-clear {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em 1.1em;
  padding: 0.95em 1.2em;
  margin: 0 0 1.8em;
  border: 1px solid var(--color-border);
  border-left: 3px solid #7fc9b6;
  border-radius: 8px;
  background: rgba(127, 201, 182, 0.06);
}

.chart-clear-label {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 0.82em;
  letter-spacing: 0.12em;
  color: #7fc9b6;
}

.chart-clear-body {
  flex: 1 1 20em;
  font-size: 0.86em;
  line-height: 1.8;
  color: var(--color-body-text);
}

.chart-clear-body b { color: var(--color-heading); }

/* 难度名折叠 */
.chart-diffs-toggle {
  margin: 0.5em 0 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}

.chart-diffs-toggle > summary {
  cursor: pointer;
  padding: 0.45em 0.85em;
  font-size: 0.76em;
  letter-spacing: 0.1em;
  color: var(--color-quiet);
  background: rgba(255, 255, 255, 0.02);
  list-style: none;
  transition: color .15s;
}

.chart-diffs-toggle > summary::-webkit-details-marker { display: none; }
.chart-diffs-toggle > summary::before { content: '▸ '; }
.chart-diffs-toggle[open] > summary::before { content: '▾ '; }
.chart-diffs-toggle > summary:hover { color: var(--color-link-hover); }
.chart-diffs-toggle .chart-diffs { margin: 0; padding: 0.1em 0.85em 0.8em; }

/* 谱面难度小标签 */
.chart-diffs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  margin: 0.35em 0 0;
}

.chart-diffs em {
  font-style: normal;
  font-size: 0.74em;
  line-height: 1.5;
  padding: 0.15em 0.6em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-quiet);
}

/* 谱面使用说明 */
.chart-help {
  margin: 2.4em 0 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.chart-help > summary {
  cursor: pointer;
  padding: 0.85em 1.2em;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.92em;
  letter-spacing: 0.06em;
  color: var(--color-heading);
  list-style: none;
}

.chart-help > summary::-webkit-details-marker { display: none; }
.chart-help > summary:hover { background: rgba(255, 255, 255, 0.06); }

.chart-help-body {
  padding: 1.1em 1.4em 1.3em;
  font-size: 0.9em;
  line-height: 1.8;
  color: var(--color-body-text);
}

.chart-help-body ol { padding-left: 1.4em; }
.chart-help-body li { margin: 0.45em 0; }
.chart-help-body code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.05em 0.4em;
  border-radius: 3px;
  font-size: 0.92em;
}

.chart-help-note { color: var(--color-quiet); font-size: 0.88em; }

/* ---------- 防溢出防护 ---------- */
/* 有些文章里有 width:2000px 的图或宽表格，会把页面撑出横向滚动条，
   导致右侧内容被挤出可视区域 —— 这两条兜住它 */
article { overflow-x: clip; }
article img { max-width: 100%; height: auto; }
article table { max-width: 100%; }

/* ---------- 折叠容器（mw-collapsible）----------
   这里【不要】写 overflow:hidden。
   它会让容器变成 BFC，而 BFC 必须「躲开」前面浮动的图片 ——
   于是每嵌套一层折叠，容器就窄掉一张图的宽度，里面的图也跟着
   被 max-width:46% 压小、往页面中间缩：
     黄昏  852 → 650 → 427（第二、三张图就是这样偏掉的）
   折叠本身由 JS 设 display:none 完成，不需要 overflow。
   这里只留一个清浮动，防止图片浮出正文。 */
article::after { content: ''; display: block; clear: both; }

/* ---------- 双向折叠（{{Collapse}}） ---------- */
.collapse-block {
  margin: 1em 0;
  border: none;                 /* 不要边框 */
  background: none;
  clear: both;
}

.collapse-summary {
  cursor: pointer;
  padding: 0.35em 0;
  background: none;
  color: var(--color-body-text);
  font-size: 0.94em;
  list-style: none;
  opacity: .9;
  transition: opacity .18s;
}

.collapse-summary::-webkit-details-marker { display: none; }
.collapse-summary:hover { opacity: 1; }

.collapse-summary .cs-open { display: none; }
.collapse-block[open] .collapse-summary .cs-closed { display: none; }
.collapse-block[open] .collapse-summary .cs-open { display: inline; }

.collapse-content {
  padding: 0.4em 0 0.6em 1.2em;
  border-left: 2px solid var(--color-border);
  margin: 0.4em 0 0.4em 0.2em;
}

/* ---------- 生存难度框（{{Class}}） ---------- */
.sd-box {
  margin: 1.6em 0;
  max-width: 720px;
  clear: both;
}

.sd-top {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sd-cell {
  flex: 1;
  min-width: 150px;
  padding: 0.4rem 0.6rem;
  margin-bottom: 10px;
  text-align: center;
}

.sd-label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  color: var(--color-body-text);
}

.sd-value {
  display: block;
  font-size: 1.35rem;
  line-height: 1.4em;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sd-bottom {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sd-part {
  flex: 1;
  min-width: 140px;
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
  color: #ffffff;
}

/* ---------- 标签页（<tabber>，例如 Level ZH 5） ---------- */
.tabber {
  margin: 1.6em 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  clear: both;
}

.tabber-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
}

.tabber-tab-btn {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.65em 1.3em;
  font-size: 0.92em;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  color: var(--color-quiet);
  border-bottom: 2px solid transparent;
  transition: color .18s, background .18s, border-color .18s;
}

.tabber-tab-btn:hover {
  color: var(--color-body-text);
  background: rgba(255, 255, 255, 0.05);
}

.tabber-tab-btn.active {
  color: var(--color-heading);
  border-bottom-color: var(--color-link-hover);
  background: rgba(255, 255, 255, 0.06);
}

.tabber-panel {
  display: none;
  padding: 1.2em 1.4em 1.4em;
}

.tabber-panel.active { display: block; }

body.theme-light .tabber-tabs { background: rgba(0, 0, 0, 0.03); }
body.theme-light .tabber-tab-btn:hover { background: rgba(0, 0, 0, 0.05); }
body.theme-light .tabber-tab-btn.active { background: rgba(0, 0, 0, 0.06); }

/* ---------- 随机嵌入区（{{Choices list}}，例如「梦幕」） ---------- */
.choices-list {
  margin: 1.6em 0;
}

/* 默认全部隐藏，只有带 mm-active 的才显示 ——
   这样即使 JS 出错，也不会所有片段叠在一起 */
.choice-frag { display: none; }
.choice-frag.mm-active {
  display: block;
  animation: fragFadeIn .7s ease;
}

@keyframes fragFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* 页脚 */
.site-foot {
  margin-top: 4.5em;
  padding: 2.2em 1.4em;
  border-top: 1px solid var(--color-border);
  font-size: 0.82em;
  color: var(--color-quiet);
}

.site-foot-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  letter-spacing: 0.08em;
}

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .site-nav-inner {
    flex-direction: column;
    gap: 0.4em;
    padding: 0.65em 1em;
  }
  .site-nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-nav-links a { padding: 0.3em 0.6em; font-size: 0.88em; }

  .hero { min-height: 200px; margin-bottom: 1.8em; }
  .hero-cn { font-size: 1.6em; letter-spacing: 0.22em; }
  .hero-en { letter-spacing: 0.3em; font-size: 0.72em; }
  .hero-tagline { font-size: 0.84em; }

  /* 注意：这里【不要】再写 .shelves ——
     上面 700px 那个块已经定了单列，640px 这里再写一条会覆盖它，
     结果手机上是 140px 一格的「挤挤乐」（踩过）。 */
  .section-title { font-size: 1.5em; }
}