/**
 * @file
 * 成人向け MOD 報告 UI（ADULT_MOD_REPORT_SPEC.md §11）。
 *
 * - カタログ／ライブラリカード左上オーバーレイのバッジ（操作なし）
 * - 詳細ページ基本情報「成人向けMOD」行（バッジ＋人数＋ラベル付きボタン＝入口のみ）
 * - 報告モーダル（状況表示＋公開 URL 一覧＋報告／取り消し＋通報理由）
 *
 * 構造は localization-report.css と同型。色は成人向けを示す alert 系
 * （tokens.css の --color-alert）で日本語化（steam-blue）と区別する。
 */

/* ---- バッジ（カード左上オーバーレイ / 詳細） ---- */
.game-card__badge--adult-mod {
  background-color: rgba(222, 60, 60, 0.9);
  color: var(--color-text-white);
}

.game-detail__badge--adult-mod {
  background-color: rgba(222, 60, 60, 0.15);
  color: var(--color-alert);
}

.game-detail__adult-mod {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.game-detail__adult-mod-count {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.adult-mod-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-alert);
  border-radius: 4px;
  background: transparent;
  color: var(--color-alert);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  cursor: pointer;
}

.adult-mod-report-btn__label {
  white-space: nowrap;
}

.adult-mod-report-btn:hover {
  background: var(--color-alert-tint);
}

.adult-mod-report-btn.is-reported {
  background: var(--color-alert);
  color: var(--color-text-white);
}

/* ---- モーダル ---- */
.adult-mod-modal[hidden] {
  display: none;
}

.adult-mod-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.adult-mod-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(28rem, 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);
  /* Same thin dark scrollbar as .share-modal__dialog / .proselytize-modal__body
     — the browser default wide light bar reads as a strip laid over the dark
     panel. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-blue-gray) transparent;
}

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

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

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

.adult-mod-modal__title {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  color: var(--color-text-white);
}

.adult-mod-modal__subtitle {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: var(--color-alert);
  color: var(--color-text-white);
  font-size: 0.75rem;
  vertical-align: middle;
}

.adult-mod-modal__status {
  margin: 0 0 1rem;
  color: var(--color-text-light);
}

/* 公開 URL 一覧（§11.4・モーダル内） */
.adult-mod-modal__links {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 4px;
  background: var(--color-deep-dark);
}

.adult-mod-modal__links[hidden] {
  display: none;
}

.adult-mod-modal__links-title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.adult-mod-modal__link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.adult-mod-modal__link {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.3rem 0;
}

.adult-mod-modal__link + .adult-mod-modal__link {
  border-top: 1px solid var(--color-divider);
}

.adult-mod-modal__link-anchor {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
  color: var(--color-steam-blue);
  text-decoration: none;
}

.adult-mod-modal__link-anchor:hover {
  text-decoration: underline;
}

.adult-mod-modal__link-host {
  font-weight: 700;
  white-space: nowrap;
}

.adult-mod-modal__link-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.adult-mod-modal__link-count {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.adult-mod-modal__links-empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.adult-mod-modal__links-pending {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-warning);
}

/* URL 欄 */
.adult-mod-modal__url {
  margin: 0 0 1rem;
}

.adult-mod-modal__url-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.adult-mod-modal__url-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: var(--color-deep-dark);
  color: var(--color-text-white);
  font-family: var(--font-primary);
  font-size: 0.9375rem;
}

.adult-mod-modal__url-input:focus {
  outline: none;
  border-color: var(--color-steam-blue);
}

.adult-mod-modal__url-help {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.adult-mod-modal__url-status {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

.adult-mod-modal__url-status[hidden] {
  display: none;
}

.adult-mod-modal__url-status[data-state="approved"] {
  color: var(--color-price-drop);
}

.adult-mod-modal__url-status[data-state="pending"] {
  color: var(--color-warning);
}

.adult-mod-modal__url-status[data-state="rejected"] {
  color: var(--color-alert);
}

.adult-mod-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.adult-mod-modal__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-alert);
  border-radius: 4px;
  background: transparent;
  color: var(--color-alert);
  font-family: var(--font-primary);
  font-size: 1rem;
  cursor: pointer;
}

.adult-mod-modal__submit:hover {
  background: var(--color-alert-tint);
}

.adult-mod-modal__submit.is-reported {
  background: var(--color-alert);
  color: var(--color-text-white);
}

.adult-mod-modal__submit:disabled,
.adult-mod-modal__withdraw:disabled {
  opacity: 0.6;
  cursor: default;
}

.adult-mod-modal__withdraw {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-primary);
  cursor: pointer;
}

.adult-mod-modal__withdraw:hover {
  color: var(--color-text-light);
  border-color: var(--color-text-muted);
}

.adult-mod-modal__withdraw[hidden] {
  display: none;
}

.adult-mod-modal__flag {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-divider);
}

.adult-mod-modal__flag[hidden] {
  display: none;
}

.adult-mod-modal__flag-desc {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.adult-mod-modal__reasons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.adult-mod-modal__reason {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-light);
  font-family: var(--font-primary);
  text-align: center;
  cursor: pointer;
}

.adult-mod-modal__reason:hover {
  border-color: var(--color-alert);
  color: var(--color-alert);
}

.adult-mod-modal__foot {
  margin-top: 1.25rem;
  text-align: right;
}

.adult-mod-modal__cancel {
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-primary);
  cursor: pointer;
}