/*
 * Bangumi 收藏展示 - 前台样式
 *
 * 设计说明：
 * 背景 / 边框 / 弱化文字颜色都用 color-mix() 从 currentColor（继承自主题正文颜色）
 * 派生出来，而不是写死某个具体色值。这样组件会自动跟着当前 WordPress 主题的
 * 文字色与背景色走：主题是亮色，派生出来的就是浅色调；主题是暗色，派生出来的
 * 就是深色调，不需要额外判断，也不会和主题本身的亮/暗模式打架。
 */

.bgm-app{
  /* 分类强调色：随系统 / 手动 data-theme 切换 */
  --bgm-anime: #5865d9;
  --bgm-book:  #b9791f;
  --bgm-game:  #1f8f74;
  --bgm-music: #c14f8f;
  --bgm-real:  #6f6b60;

  /* 以下由 currentColor 派生，自动适配主题背景（亮/暗） */
  --bgm-surface: color-mix(in srgb, currentColor 5%, transparent);
  --bgm-surface-strong: color-mix(in srgb, currentColor 10%, transparent);
  --bgm-line: color-mix(in srgb, currentColor 14%, transparent);
  --bgm-text-dim: color-mix(in srgb, currentColor 55%, transparent);

  --bgm-radius: 10px;
  --bgm-col-min: 130px;

  display: block;
  background: transparent;
  color: inherit;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 8px 0;
}

/* 分类强调色：跟随访客系统的亮/暗色偏好 */
@media (prefers-color-scheme: dark){
  .bgm-app{
    --bgm-anime: #7c8cff;
    --bgm-book:  #e0a94f;
    --bgm-game:  #4fc9a8;
    --bgm-music: #e07bb0;
    --bgm-real:  #9a978c;
  }
}
/* 手动覆盖（点击按钮，或短代码 theme="dark" / theme="light"） */
.bgm-app[data-theme="dark"]{
  --bgm-anime: #7c8cff;
  --bgm-book:  #e0a94f;
  --bgm-game:  #4fc9a8;
  --bgm-music: #e07bb0;
  --bgm-real:  #9a978c;
}
.bgm-app[data-theme="light"]{
  --bgm-anime: #5865d9;
  --bgm-book:  #b9791f;
  --bgm-game:  #1f8f74;
  --bgm-music: #c14f8f;
  --bgm-real:  #6f6b60;
}

.bgm-app *{ box-sizing: border-box; }

.bgm-hint:not(:empty){
  color: #e07a6b;
  font-size: 13px;
  margin-bottom: 16px;
}

.bgm-section{ margin-bottom: 40px; }
.bgm-section-head{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bgm-line);
}
.bgm-section-head .bgm-dot{
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.bgm-section-head h3{
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.03em;
  color: inherit;
}
.bgm-section-head .bgm-count{
  color: var(--bgm-text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.bgm-section-head .bgm-note{
  color: var(--bgm-text-dim);
  font-size: 11px;
  margin-left: auto;
}

.bgm-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--bgm-col-min), 1fr));
  gap: 16px;
}

.bgm-card{
  position: relative;
  border-radius: var(--bgm-radius);
  overflow: hidden;
  background: var(--bgm-surface);
  border: 1px solid var(--bgm-line);
  height: 100%;
}
.bgm-card a{
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.bgm-card .bgm-cover{
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bgm-surface-strong);
  flex: none;
  position: relative;
}
.bgm-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.bgm-card:hover img{ transform: scale(1.04); }
.bgm-card .bgm-rate{
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(10,10,10,0.6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}
.bgm-card .bgm-type{
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--bgm-accent);
  color: #0b0b0c;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}
.bgm-card .bgm-track{
  height: 3px;
  background: var(--bgm-line);
  width: 100%;
  flex: none;
}
.bgm-card .bgm-fill{
  height: 100%;
  background: var(--bgm-accent, var(--bgm-text-dim));
}
.bgm-card .bgm-body{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.bgm-card .bgm-name{
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 9px 2px;
  color: inherit;
  word-break: break-word;
}
.bgm-card .bgm-progress-text{
  font-size: 11px;
  color: var(--bgm-text-dim);
  padding: 0 9px 9px;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}

.bgm-section[data-key="anime"] .bgm-card{ --bgm-accent: var(--bgm-anime); }
.bgm-section[data-key="book"]  .bgm-card{ --bgm-accent: var(--bgm-book); }
.bgm-section[data-key="game"]  .bgm-card{ --bgm-accent: var(--bgm-game); }

.bgm-state{
  color: var(--bgm-text-dim);
  font-size: 13px;
  padding: 20px 0;
}
.bgm-state.bgm-error{ color: #e07a6b; }

/* 不支持 color-mix() 的旧浏览器兜底方案 */
@supports not (background: color-mix(in srgb, red 5%, transparent)) {
  .bgm-app{
    --bgm-surface: rgba(128,128,128,0.08);
    --bgm-surface-strong: rgba(128,128,128,0.14);
    --bgm-line: rgba(128,128,128,0.2);
    --bgm-text-dim: rgba(128,128,128,0.75);
  }
}