/* ============================================
   Monogatari — UI Components
   ============================================ */

/* ── ボタン ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.btn:hover::before {
  opacity: 1;
}

.btn-gold {
  background: linear-gradient(135deg, var(--color-gold-dim), var(--color-gold), var(--color-gold-dim));
  color: var(--color-deep-dark);
  box-shadow: var(--shadow-glow);
}

.btn-gold:hover {
  box-shadow: var(--shadow-glow-strong);
  transform: translateY(-2px);
}

.btn-outline {
  border: 1px solid var(--color-gold-dim);
  color: var(--color-gold);
  background: transparent;
}

.btn-outline:hover {
  background: rgba(212, 168, 83, 0.1);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.btn-phantom {
  border: 1px solid var(--color-phantom);
  color: var(--color-phantom);
  background: transparent;
}

.btn-phantom:hover {
  background: rgba(124, 58, 237, 0.1);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
  transform: translateY(-2px);
}

/* ── カード ── */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-slow);
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(212, 168, 83, 0.05) 0%,
    transparent 50%,
    rgba(212, 168, 83, 0.02) 100%
  );
  pointer-events: none;
}

.card:hover {
  border-color: var(--color-border-bright);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

.card-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-bottom: 1px solid var(--color-border);
}

.card-body {
  padding: var(--space-lg);
}

.card-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text-gold);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.05em;
}

.card-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ── キャラクターカード ── */
.character-card {
  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-slow);
  position: relative;
}

.character-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(212, 168, 83, 0.1) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}

.character-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--color-gold-dim);
  box-shadow: var(--shadow-glow-strong);
}

.character-card:hover::after {
  opacity: 1;
}

.character-card .card-image {
  aspect-ratio: 4/3;
  transition: transform var(--transition-slow);
}

.character-card:hover .card-image {
  transform: scale(1.05);
}

.character-card .card-body {
  position: relative;
  z-index: 2;
  background: linear-gradient(to top, var(--color-deep-dark), transparent);
  /* 画像に食い込ませてグラデーションで馴染ませる。padding は食い込み量より
     大きくすること。同じ値だと名前が画像に貼り付いて余白が無くなる。 */
  margin-top: -60px;
  padding-top: 96px;
}

.character-role {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-mystic);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

/* 音楽カードの見た目は sections.css の MUSIC 節にある。
   旧レイアウト(枠付きカード + カバー画像 + 再生ボタン)の指定は、
   カルーセル化でマークアップごと作り替えたため削除した。 */

/* ── サブスクリンク ── */
.streaming-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.streaming-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-subtle);
  transition: all var(--transition-fast);
}

.streaming-link:hover {
  border-color: var(--color-gold-dim);
  color: var(--color-gold);
  background: rgba(212, 168, 83, 0.05);
}

/* ── ビデオカード ── */
.video-card {
  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-slow);
}

.video-card:hover {
  border-color: var(--color-border-bright);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

.video-thumbnail {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-dark-wood);
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.05);
}

.video-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.video-card:hover .video-play-btn {
  opacity: 1;
}

.video-play-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: rgba(212, 168, 83, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(212, 168, 83, 0.5);
}

.video-play-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--color-deep-dark);
  margin-left: 3px;
}

.video-info {
  padding: var(--space-md) var(--space-lg);
}

.video-title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.video-meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── モーダル ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: var(--z-modal);
  width: min(90vw, 800px);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-deep-dark);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), var(--shadow-glow-strong);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-slow);
}

.modal.open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-xl);
  z-index: 10;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(212, 168, 83, 0.1);
}

/* ── タグ ── */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

.tag-gold {
  border-color: var(--color-gold-dim);
  color: var(--color-gold);
  background: rgba(212, 168, 83, 0.08);
}

.tag-phantom {
  border-color: var(--color-phantom);
  color: var(--color-phantom);
  background: rgba(124, 58, 237, 0.08);
}

.tag-mystic {
  border-color: var(--color-mystic-dim);
  color: var(--color-mystic);
  background: rgba(78, 205, 196, 0.08);
}

/* ── ロック状態インジケーター ── */
.lock-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-phantom);
  font-size: var(--text-sm);
}

.lock-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ── パスワード入力 ── */
.password-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--space-3xl);
  text-align: center;
}

.password-lock-visual {
  width: 120px;
  height: 120px;
  margin-bottom: var(--space-2xl);
  position: relative;
}

.password-input-group {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  max-width: 400px;
  width: 100%;
}

.password-input {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  transition: border-color var(--transition-base);
}

.password-input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.1);
}

.password-input::placeholder {
  color: var(--color-text-muted);
}

.password-error {
  color: var(--color-flame);
  font-size: var(--text-sm);
  margin-top: var(--space-md);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.password-error.show {
  opacity: 1;
}

/* リンクカードの見た目は sections.css の LINKS 節にある。
   絵文字アイコン時代の指定はマークアップごと作り替えたので削除した。 */

/* ── メンバーシップティア ── */
.tier-card {
  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  transition: all var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.tier-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.tier-card--bronze::before {
  background: linear-gradient(90deg, transparent, var(--color-copper), transparent);
}

.tier-card--silver::before {
  background: linear-gradient(90deg, transparent, #a8a8a8, transparent);
}

.tier-card--gold::before {
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.tier-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-bright);
  box-shadow: var(--shadow-glow);
}

.tier-name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.tier-card--bronze .tier-name { color: var(--color-copper); }
.tier-card--silver .tier-name { color: #c0c0c0; }
.tier-card--gold .tier-name { color: var(--color-gold); }

.tier-benefits {
  margin-top: var(--space-lg);
  text-align: left;
}

.tier-benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.tier-benefits li:last-child {
  border-bottom: none;
}

.tier-benefit-icon {
  color: var(--color-gold);
  font-size: var(--text-base);
  flex-shrink: 0;
}

.tier-benefit-locked {
  opacity: 0.3;
}


/* ══════════════════════════════════════════
   シリーズ単位のブロック (Music / Videos 共通)
   ══════════════════════════════════════════ */
.series-block { margin-bottom: var(--space-4xl); }

.series-block-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.series-block-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-gold);
  letter-spacing: 0.08em;
  margin: 0;
}
.series-block-title.is-unclassified { color: var(--color-text-muted); }

.series-block-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.12em;
  margin-left: auto;
}

.series-block-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: calc(var(--space-xl) * -1 + var(--space-xs)) 0 var(--space-xl);
  line-height: 1.8;
}

.music-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.videos-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

/* 楽曲カードの見た目は sections.css の MUSIC 節にある。
   ここにあった「楽曲カバー」の指定(.music-card-cover / -thumb / -disc / -also)は
   カルーセル化前のマークアップ向けで、2026-09-13 に削除した。
   **残っていた `.music-card-thumb { height: 100% }` が sections.css 側の
   `aspect-ratio: 16/9` を打ち消し、サムネが縦長に伸びていた。**
   .music-card-cover と .music-card-also は参照元が既に無かった。 */

/* ── 動画カード ── */
.video-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.video-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.video-card:hover .video-card-thumb img { transform: scale(1.06); }

.video-card-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.video-card:hover .video-card-play { opacity: 1; }
.video-card-play svg {
  width: 52px; height: 52px;
  fill: var(--color-gold);
}

.video-card-info { padding: var(--space-md) var(--space-lg); }

.video-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-text-gold);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .music-grid-inner  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); }
  .videos-grid-inner { grid-template-columns: 1fr; }
  .series-block-head { flex-wrap: wrap; }
}


/* ── シリーズ・ジャンプナビ ── */
.series-nav {
  position: sticky;
  top: 64px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  padding: var(--space-md) 0 var(--space-lg);
  margin-bottom: var(--space-xl);
  /* ⚠ 以前ここは var(--color-bg) を使っていたが、その変数はどこにも
     定義されていない。指定ごと無効になり、背景なしで文字だけが
     コンテンツに重なって読めなくなっていた。地色は --color-void。 */
  background: linear-gradient(180deg,
    var(--color-void) 0%,
    var(--color-void) 72%,
    rgba(10, 6, 4, 0) 100%);
}

.series-nav-btn {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: all var(--transition-base);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.series-nav-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(212, 168, 83, 0.1);
}
.series-nav-btn span {
  font-size: 0.95em;
  opacity: 0.65;
}
.series-nav-btn.is-unclassified { font-style: italic; }

.series-block { scroll-margin-top: 130px; }

@media (max-width: 640px) {
  .series-nav { top: 56px; padding: var(--space-sm) 0; }
  .series-nav-btn { font-size: 11px; padding: 5px 11px; }
  .series-nav-btn span { font-size: 1em; }
}


/* ヒーローのパーティクルcanvasがスクロールバー幅ぶん横にはみ出すのを防ぐ */
.hero-particles { max-width: 100%; }


/* カルーセルは必ず親の幅に収める。
   grid / flex の中に置くと min-width:auto で中身の幅まで伸び、
   ページ全体が横スクロールしてしまうため。 */
.carousel { min-width: 0; max-width: 100%; }
.carousel-track { min-width: 0; max-width: 100%; }


/* モバイルメニューの閉じるボタン */
.mobile-nav-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text-secondary);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.mobile-nav-close:hover { color: var(--color-gold); border-color: var(--color-gold-dim); }