/* ================================
   Compare Metrics Component
   ガイドライン 1.2/1.3 準拠: 非データ用途の table 禁止
   ================================ */

/* 注意: このファイルは以前のカード形式のスタイルを含んでいましたが、
   現在はバタフライチャート形式（match-stats-grid クラス）を使用しています。
   
   このファイルは compare.html で読み込まれていますが、
   実際のスタイルは match.css の .match-stats-grid が適用されます。
   
   将来的にこのファイルが不要になった場合は削除を検討してください。
 */

/* ================================
   Compare Selection Bar (コンパクト選択バー)
   ================================ */

/* 上段: プレイヤー選択表示（個別の背景） */
.compare-selection-items {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.75rem; /* ボタンとの間隔を少し狭く */
}

.compare-selection-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 200px;
  padding: 1rem;
  /* card風のスタイル: 背景をcardと同系色に、枠線を薄く */
  background: var(--color-surface-alt, #f5f7fa);
  border: 1px solid var(--color-border, #d9e1ee);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  user-select: none;
}

.compare-selection-item:hover {
  /* hover時に「変更」ニュアンスを出す: subtle highlight */
  background: var(--color-surface, #ffffff);
  border-color: var(--color-border, #d9e1ee);
  box-shadow: 0 2px 8px rgba(0, 43, 108, 0.08);
  transform: translateY(-1px);
}

.compare-selection-item:active {
  transform: translateY(0);
  background: var(--color-surface-alt, #f5f7fa);
  box-shadow: 0 1px 4px rgba(0, 43, 108, 0.06);
}

.compare-selection-item:focus-visible {
  outline: 2px solid #002b6c;
  outline-offset: 2px;
}

.compare-selection-value {
  color: var(--color-text, #333);
  word-break: break-word;
  /* 長いテキストでも ellipsis で対応（スマホ時は特に重要） */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 下段: ボタン（中央配置、背景色なし） */
/* 注意: ボタン並びの基本スタイルは layout.css の .card__actions に移行済み */
.compare-selection-actions {
  /* layout.css の .card__actions を継承 */
  margin-bottom: 1rem; /* 下の余白を追加 */
  margin-top: 0;
}

/* ボタンエリアの下の余白を調整（上記のmargin-bottomを優先） */
.container > .compare-selection-actions {
  margin-bottom: 1rem; /* 下の余白を確保 */
}

/* フォーム要素の余白も削除（ボタンの直後にあるため） */
.container > .compare-filter {
  margin-bottom: 0;
  padding: 0;
  display: none; /* 空のフォームなので非表示 */
}

/* ボタンエリアがcontainer内の最後の要素の場合、containerのmargin-bottomとpadding-bottomを無効化 */
.container:has(.compare-selection-actions) {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ボタンエリアがあるコンテナの下余白を調整 */
section.container:has(.compare-selection-actions) {
  padding-bottom: var(--container-padding-base); /* コンテナのパディングを維持 */
  margin-bottom: calc(var(--space-xl) + 8px); /* 下のカードとの間隔を確保 */
}

/* @supports で :has() が使えない場合のフォールバック */
@supports not selector(:has(a)) {
  .container > .compare-selection-actions:last-child {
    margin-bottom: 0;
  }
  .container > .compare-selection-actions:last-child ~ .compare-filter {
    display: none;
  }
}

/* ボタン幅を統一 */
.compare-selection-actions .btn {
  min-width: 150px;
  width: auto;
}

/* 後方互換: 既存クラス名を維持（layout.cssの共通定義を継承）
   最小限の上書きのみ（既存挙動を壊さないため） */
.btn-primary {
  /* layout.cssの .btn + .btn--md + .btn--blue を継承
     必要に応じて compare.html 専用の微調整のみ */
}

.btn-secondary {
  /* layout.cssの .btn + .btn--md + .btn--ghost を継承
     必要に応じて compare.html 専用の微調整のみ */
}

.btn-compare {
  /* layout.cssの .btn + .btn--md + .btn--red を継承
     必要に応じて compare.html 専用の微調整のみ */
  font-weight: normal; /* 既存の font-weight: normal を維持 */
}

/* モバイル対応 */
@media (max-width: 768px) {
  .compare-selection-items {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .compare-selection-item {
    min-width: 0; /* flex/grid配下でellipsisが効くようにするための定番設定 */
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 12px; /* スマホ時のみ padding を少し縮める */
    gap: 4px;
    width: 100%;
  }

  .compare-selection-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  .compare-selection-actions {
    /* layout.css の .card__actions を継承（モバイル対応も含む） */
  }

  .compare-selection-actions .btn {
    flex: 1;
    min-width: 0;
    max-width: 200px;
  }
}

/* ================================
   Compare Selection Modal (MicroModal)
   最前面表示を保証するため、position: fixed と z-index を設定
   ================================ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.modal.is-open {
  display: block;
}

/* アニメーション中は表示を維持 */
.modal.is-opening,
.modal.is-closing {
  display: block;
}

.modal__overlay {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal__container {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  border: none;
  outline: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.1);
  /* 非常に強い屈折効果 */
  backdrop-filter: blur(40px) saturate(200%) brightness(1.1);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.1);
  width: 100%;
  max-width: min(800px, 90vw);
  max-height: 90vh;
  overflow-y: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 100000;
  padding: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem 0.75rem 1.5rem;
  border-bottom: none;
  background: transparent;
}

.modal__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text, #333);
}

/* 後方互換: 既存クラス名を維持（layout.cssの .icon-btn を継承）
   modal__close は icon-btn--sm と併記で統一 */
.modal__close {
  /* layout.cssの .icon-btn + .icon-btn--sm を継承
     以下は modal 専用の微調整 */
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--color-text-muted, #666);
  border-radius: 4px;
}

.modal__close:hover {
  background: var(--color-bg-secondary, #f5f5f5);
  color: var(--color-text, #333);
}

.modal__close::before {
  content: "×";
  font-size: 2rem;
  line-height: 1;
}

.modal__content {
  padding: 0.75rem 1.5rem 1.5rem 1.5rem;
  flex: 1;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.03);
}

/* エラー表示の余白を調整 */
.modal__content .modal-error-message {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
  padding: 1rem;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  color: #721c24;
  display: none; /* デフォルトでは非表示 */
}

/* エラーがない時のプルダウンとの距離を調整 */
.modal__content .compare-filter {
  margin-top: 0;
}

/* エラー表示の直後のプルダウンとの距離を調整 */
.modal__content .modal-error-message + .compare-filter {
  margin-top: 0.75rem;
}

/* 注意: ボタン並びの基本スタイルは layout.css の .card__actions に移行済み */
.modal__footer {
  /* layout.css の .card__actions を継承 */
  padding: 1.5rem;
  border-top: none;
}

/* モーダル内のボタンを統一サイズに */
.modal__footer .btn {
  min-width: 120px;
  width: auto;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* .btn--sm の場合は小さいサイズを適用 */
.modal__footer .btn.btn--sm {
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  border-radius: 6px;
  min-width: 100px; /* 小さいボタンでも最低幅を確保 */
}

/* モーダル内のフォームスタイル */
.modal__content .compare-filter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .modal__container {
    max-width: 95vw;
    max-height: 95vh;
  }

  .modal__header {
    padding: 1rem;
  }

  .modal__title {
    font-size: 1.25rem;
  }

  .modal__content {
    padding: 1rem;
  }

  .modal__content .compare-filter {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .modal__footer {
    /* layout.css の .card__actions を継承 */
    padding: 1rem;
    /* flex-direction: row は .card__actions のデフォルト */
    /* justify-content: center は .actions--right で上書きされるため不要 */
  }

  .modal__footer .btn {
    flex: 1;
    max-width: 150px;
    min-width: 100px;
  }

  /* .btn--sm の場合は小さいサイズを維持 */
  .modal__footer .btn.btn--sm {
    flex: 0 1 auto; /* flex: 1 を上書きして自然なサイズに */
    max-width: 120px;
    min-width: 90px;
  }
}

/* リキッドグラスデザイン用アニメーション */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
}

@keyframes modalFadeOut {
  from {
    opacity: 1;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
  to {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
}

@keyframes modalLiquidGlass {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0px);
  }
}

@keyframes modalLiquidGlassOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0px);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
    filter: blur(8px);
  }
}

/* モーダルが開いた時のアニメーション */
.modal.is-open .modal__overlay {
  opacity: 1;
  animation: modalFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.modal.is-open .modal__container {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: modalLiquidGlass 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* モーダルが閉じる時のアニメーション */
.modal:not(.is-open) .modal__overlay {
  opacity: 0;
  animation: modalFadeOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.modal:not(.is-open) .modal__container {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  animation: modalLiquidGlassOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 動きを減らすユーザー設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  .modal.is-open .modal__overlay,
  .modal.is-open .modal__container,
  .modal:not(.is-open) .modal__overlay,
  .modal:not(.is-open) .modal__container {
    animation: none;
    transition: opacity 0.1s ease;
  }
}

/* ================================
   Compare Page Card Layout
   カード分割対応：各カード間の余白調整
   ================================ */

/* Card 2: 選手画像 + 優勢な項目の余白調整 */
.container.compare-table-wrap {
  margin-top: 0;
}

/* Card 3: AI解説セクションをcontainer内で使用する場合の調整 */
/* .ai-compare-section は team-card 構造に変更されたため、このスタイルは不要 */
/* 新しい構造では ui-components.css の .ai-comment-section スタイルが適用されます */

/* Card 4: バタフライチャートの余白調整 */
.compare-stats-section {
  margin-top: 0;
}

/* container > * のpaddingを打ち消す（バタフライチャートの位置ズレを防ぐ） */
.compare-stats-section .match-stats-grid {
  padding: 0;
  margin: 0;
}

/* :has() セレクタがサポートされている場合の追加スタイル（将来の拡張用） */
@supports selector(:has(a)) {
  .container:has(#compare-metrics-grid) {
    margin-top: 0;
  }
}

/* カードブロック内のコンテナの余白調整（card-block__title が外側にあるため） */
.card-block > .container {
  margin-top: 0;
}

/* card-block間隔：index/player の"呼吸"に寄せる（gapは触らない） */
body[data-page="compare"] main > .card-block {
  margin-bottom: var(--space-xl);
}

body[data-page="compare"] main > .card-block:last-child {
  margin-bottom: 0;
}

/* Player Selectionカードのコンテナの下余白を増やす（ボタンと下のカードの間隔） */
body[data-page="compare"] main > .card-block:first-child > .container {
  margin-bottom: calc(var(--space-xl) + 8px); /* 通常の32px + 8px = 40px */
}