/**
 * @file
 * シェアカードの共通モーダル（SHARE_CARD_SPEC §4）。
 *
 * 骨格は game-memo-modal、完了ステップは proselytize-modal の done ステップと
 * 同型（2:1 のアスペクト固定＋シマー）。色は tokens.css を参照。
 */

.share-modal {
  position: fixed;
  inset: 0;
  /* 感想メモモーダル（z-index:1000）の上に重ねて開く: シェア側を閉じると
     メモモーダルに入力状態ごと戻れるようにするため。 */
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* display:flex が UA の [hidden]{display:none} に勝ってしまうため明示する。 */
.share-modal[hidden] {
  display: none;
}

/* モーダル内部の hidden 切り替え要素も同じ罠を踏む: display を持つクラス
   （__ranges の inline-flex 等）が UA の [hidden] に勝ち、種別に関係なく
   期間トグルが出っぱなしになる。属性つき
   セレクタはクラス単体より詳細度が高いので、この1本で全内部要素をカバー。 */
.share-modal [hidden],
.game-memo-modal__share[hidden] {
  display: none;
}

.share-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.share-modal__dialog {
  position: relative;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: 8px;
  background-color: var(--color-dark-surface, #1b2838);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  /* Same thin dark scrollbar as .proselytize-modal__body — the default wide
     light bar reads as a detached strip laid over the dark panel. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-blue-gray) transparent;
}

.share-modal__dialog::-webkit-scrollbar {
  width: 5px;
}

.share-modal__dialog::-webkit-scrollbar-thumb {
  background: var(--color-blue-gray);
  border-radius: 3px;
}

.share-modal__dialog::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

.share-modal__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 18px 24px 12px;
  font-size: 1.05rem;
  font-weight: 700;
}

.share-modal__subtitle {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-light);
}

.share-modal__body {
  padding: 0 24px 8px;
}

/* ---- 期間トグル（パターンA） ---- */

.share-modal__ranges {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 12px;
}

.share-modal__range {
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-family: var(--font-primary);
  border-radius: 999px;
  border: 1px solid var(--color-border-subtle);
  background-color: transparent;
  color: var(--color-text-light);
  cursor: pointer;
}

/* 選択状態はベタ塗り＋暗色文字（customize.css の bulk-toggle / pagination の
   is-active と同じ「選択」の意匠。ゴーストは押下ボタン用で、選択状態に使うと
   選ばれているのか判別できない）。 */
.share-modal__range.is-active {
  background-color: var(--gs-accent-dim, #00dbe9);
  border-color: var(--gs-accent-dim, #00dbe9);
  color: var(--gs-canvas, #0d1722);
  font-weight: 700;
}

.share-modal__range:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---- カードプレビュー（2:1 固定＋シマー、布教 done ステップと同型） ---- */

.share-modal__card,
.share-modal__done-card {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-deep-dark);
}

.share-modal__card.is-loading::after,
.share-modal__done-card.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: share-modal-shimmer 1.2s linear infinite;
}

@keyframes share-modal-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.share-modal__card-img,
.share-modal__done-img {
  display: block;
  width: 100%;
  height: auto;
}

.share-modal__card.is-loading .share-modal__card-img,
.share-modal__done-card.is-loading .share-modal__done-img {
  visibility: hidden;
}

.share-modal__sync-note {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* ---- B系のタイトル行（×＝個別除外） ---- */

.share-modal__list {
  margin-top: 12px;
}

.share-modal__list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.share-modal__list-label {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.share-modal__redraw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-family: var(--font-primary);
  border-radius: 999px;
  border: 1px solid var(--color-border-subtle);
  background-color: transparent;
  color: var(--color-text-light);
  cursor: pointer;
}

.share-modal__redraw:hover {
  color: var(--color-steam-blue);
  border-color: rgba(102, 192, 244, 0.3);
}

.share-modal__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.share-modal__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border-radius: 6px;
  background-color: var(--color-deep-dark);
  font-size: 0.8125rem;
}

.share-modal__item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-modal__item-remove {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.share-modal__item-remove:hover {
  background-color: rgba(217, 83, 79, 0.15);
  color: var(--color-danger, #d9534f);
}

.share-modal__note {
  margin: 12px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--color-text-light);
}

/* ---- 完了ステップ ---- */

.share-modal__done {
  padding: 4px 24px 24px;
}

.share-modal__done-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
}

.share-modal__done-title .fa-circle-check {
  color: var(--color-steam-blue);
}

.share-modal__done-text {
  margin: 14px 0 4px;
  white-space: pre-wrap;
  line-height: 1.7;
}

.share-modal__done-text:empty {
  display: none;
}

.share-modal__done-note {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.share-modal__done-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---- フッター（布教モーダルの action 系と同型） ---- */

.share-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--color-divider);
  margin-top: 14px;
}

.share-modal__error {
  flex: 1;
  font-size: 0.75rem;
  color: var(--color-danger, #d9534f);
}

.share-modal__action {
  padding: 8px 18px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-primary);
  border: 1px solid var(--color-border-subtle);
}

.share-modal__action--cancel {
  background-color: transparent;
  color: var(--color-text-light);
}

.share-modal__action--cancel:hover {
  background-color: var(--color-deep-dark);
}

/* 主ボタンは customize.css の「クリスタルゴースト」（proselytize 等の保存系）
   に合わせる。同値をこちら側に持つ理由は game-memo.css の保存ボタンと同じ。 */
.share-modal__action--create,
.share-modal__action--post {
  background-color: rgba(0, 240, 255, 0.10);
  border-color: rgba(0, 240, 255, 0.30);
  color: var(--gs-accent, #00f0ff);
  font-weight: 700;
}

.share-modal__action--create:hover:not(:disabled),
.share-modal__action--post:hover:not(:disabled) {
  background-color: rgba(0, 240, 255, 0.20);
  border-color: rgba(0, 240, 255, 0.80);
  color: var(--gs-accent-light, #7df4ff);
}

.share-modal__action--create:disabled,
.share-modal__action--post:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- 着地ページ /s/{uuid}（骨格は proselytize-share.css の .share-page） ---- */

/* カードに載ったタイトルは、ライブラリ一覧と同じゲームカードで並べる。
   .game-card-grid は style.css の auto-fill・最小240px なので、コンテンツ幅
   928px では5本が2行（3+2）に落ちる。着地ページは常に≤5枚と分かっているので
   ここだけ最小幅を詰めて1行に収める。 */
.share-page__cards {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  margin-bottom: 24px;
}

/* ここのカードは画像＋タイトルだけで、ライブラリカード（操作UI込み・実測
   344〜369px）よりずっと低く狭い。グリッド既定の min-width と予約高さは
   ライブラリ基準なので、このページだけ詰める。 */
.share-page__cards > .game-card {
  min-width: 0;
  contain-intrinsic-size: auto 180px;
}

@media (max-width: 720px) {
  .share-page__cards {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* 通報導線（感想カード・ログイン時のみ）。ボタン自体は布教の .proselytize-report
   を流用するが、あちらは一覧行に置くアイコンのみのボタンなので、こちらは
   ラベル付き1行として置けるよう間隔だけ足す。 */
.share-page__report-line {
  margin: 20px 0 0;
}

.share-page__report-line .proselytize-report {
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.8125rem;
}

/* ---- 本人のシェア投稿一覧（/share/mine） ---- */

.share-mine__note {
  margin: 0 0 20px;
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.share-mine__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-mine__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background-color: var(--color-deep-dark);
  border: 1px solid var(--color-border-subtle);
}

.share-mine__item.is-hidden {
  opacity: 0.6;
}

.share-mine__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.share-mine__type {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background-color: rgba(102, 192, 244, 0.14);
  color: var(--color-steam-blue);
}

.share-mine__summary {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 32em;
}

.share-mine__date,
.share-mine__hidden-badge {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.share-mine__hidden-badge {
  color: var(--color-danger, #d9534f);
}

.share-mine__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* 布教モーダルの「布教をやめる」（.proselytize-modal__action--stop）と同じ
   アウトライン系。素の .btn は background 指定が無く、button 要素だと UA 既定の
   グレー地が出て周囲から浮くため、透明地＋danger の枠線を明示する。 */
.share-mine__delete {
  background-color: transparent;
  color: var(--color-danger, #d9534f);
  border: 1px solid var(--color-danger, #d9534f);
}

.share-mine__delete:hover {
  background-color: rgba(217, 83, 79, 0.12);
}

/* 感想メモモーダルのフッター副ボタン（左寄せ、cancel/save は右のまま）。 */
.game-memo-modal__share {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-family: var(--font-primary);
  border-radius: 4px;
  border: 1px solid var(--color-border-subtle);
  background-color: transparent;
  color: var(--color-text-light);
  cursor: pointer;
}

.game-memo-modal__share:hover {
  color: var(--color-steam-blue);
  border-color: rgba(102, 192, 244, 0.3);
}

/* ---- 感想: おすすめ理由の選択（チップの意匠は .proselytize-reason を流用） ---- */
.share-modal__reasons {
  margin: 0 0 12px;
}

.share-modal__reasons-label {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  color: var(--gs-text-muted, #8f98a0);
}

.share-modal__reasons-count {
  margin-left: 6px;
  color: var(--gs-text-muted, #8f98a0);
}

.share-modal__reason-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-modal__reason:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- 完了ステップ: X 投稿本文の編集欄 ---- */
.share-modal__done-label {
  display: block;
  margin: 12px 0 6px;
  font-size: 0.8125rem;
  color: var(--gs-text-muted, #8f98a0);
}

.share-modal__done-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background-color: var(--color-deep-dark);
  color: var(--color-text-light);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.share-modal__done-textarea:focus {
  outline: none;
  border-color: var(--gs-accent, #00f0ff);
}

.share-modal__done-counter {
  margin: 6px 0 0;
  font-size: 0.75rem;
  text-align: right;
  color: var(--gs-text-muted, #8f98a0);
}

.share-modal__done-counter.is-over {
  color: var(--color-danger);
}