/* ========================================
   wisdom-series.css（CLEANED）
   - アニメ表示は「全非表示 → 選択だけ表示」に統一
   - 作品追加時は .anime-作品名 の1行を足すだけ
======================================== */

/* -------------------------
   0) 表示切替（最重要）
------------------------- */
.anime-onepiece,
.anime-kingdom,
.anime-jujutsu,
.anime-tokyorevengers,
.anime-slamdunk,
.anime-kimetsu{
  display: none;
}

[data-anime="onepiece"] .anime-onepiece{ display: grid; }
[data-anime="kingdom"] .anime-kingdom{ display: grid; }
[data-anime="jujutsu"] .anime-jujutsu{ display: grid; }
[data-anime="tokyorevengers"] .anime-tokyorevengers{ display: grid; }
[data-anime="slamdunk"] .anime-slamdunk{ display: grid; }
[data-anime="kimetsu"] .anime-kimetsu{ display: grid; }

/* -------------------------
   1) アニメシリーズコンテナ（共通）
------------------------- */
.anime-onepiece,
.anime-kingdom,
.anime-jujutsu,
.anime-tokyorevengers,
.anime-slamdunk,
.anime-kimetsu{
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}

/* モバイル: 1列 */
@media (max-width: 767px){
  .anime-onepiece,
  .anime-kingdom,
  .anime-jujutsu,
  .anime-tokyorevengers,
  .anime-slamdunk,
  .anime-kimetsu{
    grid-template-columns: 1fr;
  }
}

/* PC: 2列 */
@media (min-width: 768px){
  .anime-onepiece,
  .anime-kingdom,
  .anime-jujutsu,
  .anime-tokyorevengers,
  .anime-slamdunk,
  .anime-kimetsu{
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}

/* -------------------------
   2) アニメモード：カード左ライン色分け（奇数=青、偶数=緑）
------------------------- */
.anime-onepiece .w-card:nth-child(odd)::before,
.anime-kingdom .w-card:nth-child(odd)::before,
.anime-jujutsu .w-card:nth-child(odd)::before,
.anime-tokyorevengers .w-card:nth-child(odd)::before,
.anime-slamdunk .w-card:nth-child(odd)::before,
.anime-kimetsu .w-card:nth-child(odd)::before{
  background: #2563eb;
}

.anime-onepiece .w-card:nth-child(even)::before,
.anime-kingdom .w-card:nth-child(even)::before,
.anime-jujutsu .w-card:nth-child(even)::before,
.anime-tokyorevengers .w-card:nth-child(even)::before,
.anime-slamdunk .w-card:nth-child(even)::before,
.anime-kimetsu .w-card:nth-child(even)::before{
  background: #0784c6;
}

/* -------------------------
   3) アニメ作品タブ（横スクロール）
------------------------- */


/* -------------------------
   4) アニメ編のUI出し分け
------------------------- */
/* アニメ編ではカテゴリショートカットを非表示 */
[data-view="anime"] .page-shortcuts:not(.anime-shortcuts){
  display: none !important;
}

/* アニメ編ではプログレスバーを非表示 */
[data-view="anime"] #scrollIndicator{
  display: none !important;
}

/* -------------------------
   5) アニメ用ショートカット（作品ボタン）
------------------------- */
.anime-shortcuts .shortcuts-grid button{
  font-size: .8rem;
  color: #444;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .3rem .2rem;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  min-height: 50px;
  transition: all .25s ease;
  text-align: center;
}

.anime-shortcuts .shortcuts-grid button:hover{
  border-color: var(--emerald);
  background: var(--emerald-light);
  transform: translateY(-2px);
}

.anime-shortcuts .shortcuts-grid button[aria-pressed="true"]{
  border-color: var(--emerald);
  background: rgba(7,132,198,.18);
  color: #0b3858;
}