/**
 * @file
 * 感想メモ UI（GAME_MEMO_SPEC.md §4）。
 *
 * - ライブラリカード最下行の「感想メモ」ボタン（布教ボタンの右端にピン）
 * - ゲーム詳細ページの user-actions 内ボタン
 * - 記入モーダル（textarea＋文字数カウント＋保存）
 *
 * 色は tokens.css を参照。モーダルの骨格は localization-report.css と同型。
 */

/* ---- ライブラリカード: 布教行を flex 化してメモボタンを右端へ ----
   .game-card__proselytize 自体は proselytize-modal.css で定義（margin-top のみ）。
   ここで行レイアウトを足す。布教ボタンは min-width:0 でラベルの省略を維持。 */
.game-card__proselytize {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-card__proselytize .proselytize-btn {
  min-width: 0;
}

.game-memo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto; /* pin to the right end of the row (same idiom as play btn) */
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-primary);
  border-radius: 10px;
  background-color: var(--color-deep-dark);
  color: var(--color-text-light);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

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

/* メモ済: 布教中と同じく面は変えずアイコン＋ラベルを青にする。 */
.game-memo-btn.is-active .fa-pen-to-square,
.game-memo-btn.is-active .game-memo-btn__label {
  color: var(--color-steam-blue);
  font-weight: 700;
}

/* 詳細ページでは .btn の見た目に乗せるので、カード用の面指定を打ち消す。 */
.game-detail__user-actions .game-memo-btn {
  margin-left: 0;
  border-radius: 4px;
}

/* 詳細ページの「メモ済」: 土台の .btn--secondary.is-active が面をアクセント色で
   塗るため、同じ色にしたラベルとアイコンが消える。
   カードと同じく面は変えず、枠線だけ強めてラベル色で状態を示す。 */
.game-detail__user-actions .game-memo-btn.is-active {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 240, 255, 0.55);
  color: var(--gs-heading);
}

.game-detail__user-actions .game-memo-btn.is-active:hover {
  background: rgba(0, 240, 255, 0.12);
}

/* ---- モーダル ---- */
.game-memo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* display:flex が UA の [hidden]{display:none} に勝ってしまうため明示する
   （localization-report.css と同じ回避）。 */
.game-memo-modal[hidden] {
  display: none;
}

.game-memo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.game-memo-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  border-radius: 4px;
  background: var(--color-dark-blue);
  color: var(--color-text-light);
  box-shadow: var(--shadow-elevated);
}

.game-memo-modal__title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.game-memo-modal__subtitle {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  flex-shrink: 0;
}

.game-memo-modal__note {
  margin: 0 0 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* 評価★＋プレイ時間の行（SHARE_CARD_SPEC §3.4）。ウィジェット本体は proselytize-modal.css
   の .proselytize-rating / .proselytize-playtime を流用し、ここでは textarea
   との間隔と横幅の調整だけ持つ。 */
.game-memo-modal__meta {
  margin: 0 0 0.75rem;
}

/* 布教側の flex-basis（300px+180px）はこのモーダルの内寸（32rem − padding ≈
   464px）に入らず縦積みに折り返してしまうので、基準幅だけ詰めて1行に載せる。
   実幅は grow 2:1 の配分で布教とほぼ同じ見た目になる。 */
.game-memo-modal__meta .proselytize-modal__field--rating {
  flex: 2 1 240px;
}

.game-memo-modal__meta .proselytize-modal__field--playtime {
  flex: 1 1 130px;
}

.game-memo-modal__input {
  width: 100%;
  resize: vertical;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: var(--color-deep-dark);
  color: var(--color-text-light);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.game-memo-modal__input:focus {
  outline: none;
  border-color: var(--color-steam-blue);
}

.game-memo-modal__input:disabled {
  opacity: 0.5;
}

.game-memo-modal__count {
  margin-top: 0.25rem;
  text-align: right;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.game-memo-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.game-memo-modal__cancel {
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* 保存ボタンは customize.css の「クリスタルゴースト」（proselytize/target/
   bulk-tag の保存系）に合わせる。customize.css はデザイナー渡しの単一ファイル
   で手を入れない運用のため、同値をこちら側に持つ（デザイナー側への統一依頼は
   mockups/README.md「依頼時に伝えること」）。 */
.game-memo-modal__save {
  padding: 0.45rem 1.25rem;
  border: 1px solid rgba(0, 240, 255, 0.30);
  border-radius: 4px;
  background: rgba(0, 240, 255, 0.10);
  color: var(--gs-accent, #00f0ff);
  font-weight: 700;
  cursor: pointer;
}

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

.game-memo-modal__save:disabled {
  opacity: 0.5;
  cursor: default;
}