/* =========================================
   シナリオファンアートページ 共通CSS
   依存: trpg-shared-tokens.css を先に読み込む前提(--tg-* 変数を使用)
   対象ページ: プルガトリウムの夜/デストルドーの使者, お前だけは俺が殺す,
              ソ〜プスクール, 膿み堕とし/絶供, その他
   ========================================= */

/* ===== ページ全体をダーク基調に(このCSSは対象ページでしか読み込まれない前提) ===== */
html,
body,
.entry-content,
.l-article,
article {
  background-color: var(--tg-bg-main) !important;
}

/* SWELLのデフォルトページタイトル・パンくずを非表示
   (このページは独自のヒーロー見出しを持つため) */
h1,
.p-postTitle,
.entry-header,
.breadcrumb,
nav.breadcrumb,
.p-breadcrumb {
  display: none !important;
}

/* SWELLの見出し(h2)デフォルト装飾(ピンクのバー・上下線・疑似要素)を打ち消す */
body:has(.scenario-hero) h2.scenario-title,
body:has(.scenario-hero) h2.scenario-title::before,
body:has(.scenario-hero) h2.scenario-title::after {
  content: none !important;
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  width: auto !important;
  display: block !important;
  text-decoration: none !important;
}

.scenario-fa-warning {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px 0;
  font-family: var(--tg-mono);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--tg-text-3);
}

/* ===== HERO ===== */
.scenario-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 90px 24px 70px;
  overflow: hidden;
  background: var(--tg-bg-main);
}

.scenario-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.85;
}

.scenario-hero__tint {
  position: absolute;
  inset: 0;
  background: var(--tint, transparent);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.scenario-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 13, 16, 0.06) 0%,
    rgba(11, 13, 16, 0.22) 45%,
    rgba(11, 13, 16, 0.85) 82%,
    rgba(11, 13, 16, 1) 100%
  );
}

.scenario-hero__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.scenario-eyebrow {
  font-family: var(--tg-mono);
  font-size: 13px;
  letter-spacing: var(--tg-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.scenario-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent, var(--tg-accent-fallback));
}

.scenario-title {
  font-family: "Zen Kurenaido", sans-serif;
  font-size: clamp(34px, 5.4vw, 50px);
  line-height: 1.35;
  color: var(--tg-text-1);
  margin: 0 0 18px;
  letter-spacing: 0.02em;
}

.scenario-verse {
  font-family: var(--tg-mono);
  font-size: 15px;
  line-height: 2;
  color: var(--tg-text-2);
  white-space: pre-line;
  margin: 0;
  max-width: 520px;
}

.scenario-verse cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  color: var(--tg-text-3);
}

/* ===== 情報カード(リンク+トグルを同じ並びにまとめる) ===== */
.scenario-info {
  max-width: 760px;
  margin: 0 auto;
  padding: 30px 24px 10px;
  background: var(--tg-bg-main);
}

.scenario-info__card {
  border: 1px solid var(--tg-line-1);
  padding: 22px 24px;
}

.scenario-info__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.scenario-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--tg-mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--tg-text-1);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accent, var(--tg-accent-fallback));
  transition: color 0.15s ease;
}

.scenario-link:hover {
  color: var(--accent, var(--tg-accent-fallback));
}

.scenario-link__arrow {
  font-size: 12px;
  color: var(--tg-text-3);
  transform: translateY(-1px);
}

.scenario-link:hover .scenario-link__arrow {
  color: var(--accent, var(--tg-accent-fallback));
}

/* ===== トグル(見た目はリンクと統一。色だけネタバレは赤系) ===== */
.scenario-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--tg-mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--tg-text-1);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accent, var(--tg-accent-fallback));
  cursor: pointer;
  transition: color 0.15s ease;
}

.scenario-toggle:hover,
.scenario-toggle.is-open {
  color: var(--accent, var(--tg-accent-fallback));
}

/* スポイラー系トグルは常に赤系で一目で分かるように(文字・下線とも赤) */
.scenario-toggle--spoiler {
  color: rgba(224, 120, 120, 0.9);
  border-bottom-color: rgba(224, 120, 120, 0.9);
}

.scenario-toggle--spoiler:hover,
.scenario-toggle--spoiler.is-open {
  color: rgba(240, 130, 130, 1);
  border-bottom-color: rgba(240, 130, 130, 1);
}

.scenario-toggle-panel {
  display: none;
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--tg-panel-2);
  border: 1px solid var(--tg-line-2);
  font-family: var(--tg-mono);
  font-size: 15px;
  line-height: 1.8;
  color: var(--tg-text-2);
  white-space: pre-line;
}

.scenario-toggle-panel.is-open {
  display: block;
}

.scenario-toggle-panel--spoiler {
  border-color: rgba(220, 110, 110, 0.3);
  background: rgba(220, 110, 110, 0.06);
}

/* ギャラリーを含むネタバレパネルは赤みを出さない(ギャラリーを邪魔しないため) */
.scenario-toggle-panel--spoiler.scenario-toggle-panel--gallery {
  border: 0;
  background: none;
}

/* ===== ギャラリー・関連記事一覧まわりの見出し統一 =====
   post-list / foogallery ブロックはそのまま残し、
   前後の余白と見出しスタイルだけ揃える */
.scenario-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  background: var(--tg-bg-main);
}

.scenario-section-title {
  font-family: var(--tg-mono);
  font-size: 14px;
  letter-spacing: var(--tg-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 20px;
}

/* SWELLの記事一覧(post-list)ブロックはグレー系の文字色が既定のため、
   このページ(暗い背景)では読みにくい。文字色だけ明るく上書きする。 */
.scenario-section .p-postList__title,
.scenario-section .p-postList__excerpt,
.scenario-section .p-postList__times,
.scenario-section .p-postList__link,
.scenario-section .p-postList__body,
.scenario-section .c-postTimes__posted {
  color: rgba(255, 255, 255, 0.82) !important;
}

.scenario-section .p-postList__link:hover .p-postList__title {
  color: var(--tg-text-1) !important;
}

/* セクション内の小見出し(例: Gallery内の「All」区分) */
.scenario-subheading {
  font-family: var(--tg-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tg-text-3);
  margin: 28px 0 14px;
}

/* ネタバレでギャラリー丸ごとを隠す場合のトグルパネル
   (テキストだけの scenario-toggle-panel と違い、ギャラリーが主役になるよう
   赤い背景・枠は消して余白も最小限にする) */
.scenario-toggle-panel--gallery {
  white-space: normal;
  padding: 4px 0 0;
  border: 0;
  background: none;
}

/* 「その他」ページのような、ヒーローを持たないページの導入文 */
.scenario-page-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 24px 10px;
  font-family: var(--tg-mono);
  font-size: 14px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.85) !important;
}

.scenario-page-intro p {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* 個々の作品見出し(その他ページ用)
   シナリオ名であることが一目で分かるよう、フォントサイズを上げ左に色付きの縦線を添える */
.scenario-work-title {
  position: relative;
  font-family: "Zen Kurenaido", sans-serif;
  font-size: 26px;
  color: rgba(255, 255, 255, 0.94) !important;
  margin: 0 0 20px;
  padding-left: 18px;
  letter-spacing: 0.02em;
  border-left: 2px solid var(--tg-accent-fallback);
}

/* ===== 続編の区切り ===== */
.scenario-divider {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 100px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--tg-text-3);
  font-family: var(--tg-mono);
  font-size: 13px;
  letter-spacing: var(--tg-eyebrow-tracking);
  background: var(--tg-bg-main);
}

.scenario-divider::before,
.scenario-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tg-line-1);
}

/* ===== ページ送り(nextpage)・パスワードロック(Passster)の見た目を統一 ===== */
.c-pagination.-post {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 40px auto;
  font-family: var(--tg-mono);
}

.c-pagination.-post .post-page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  background: var(--tg-panel-2);
  border: 1px solid var(--tg-line-1);
  color: var(--tg-text-2);
  text-decoration: none;
  border-radius: 0;
}

.c-pagination.-post .post-page-numbers.current {
  background: var(--tg-panel);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--tg-text-1);
}

.passster-form {
  max-width: 480px;
  margin: 40px auto !important;
  padding: 24px !important;
  background: var(--tg-panel-2) !important;
  border: 1px solid var(--tg-line-1) !important;
  border-radius: 0 !important;
  color: var(--tg-text-2) !important;
  font-family: var(--tg-mono) !important;
}

.passster-form h4 {
  color: var(--tg-text-1) !important;
  font-family: var(--tg-mono) !important;
}

.passster-form p,
.passster-form a {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* プラグイン側が内側のform/fieldsetに独自の白背景を当てているため、
   透過にして親(.passster-form)の暗い背景を見せる */
.passster-form form,
.passster-form .password-form,
.passster-form fieldset {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.passster-form input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.passster-password {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--tg-line-1) !important;
  color: var(--tg-text-1) !important;
  border-radius: 0 !important;
}

.passster-submit {
  background: transparent !important;
  border: 1px solid var(--tg-text-2) !important;
  color: var(--tg-text-1) !important;
  border-radius: 0 !important;
  font-family: var(--tg-mono) !important;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.passster-submit:hover {
  border-color: var(--tg-text-1) !important;
}

/* 上記の実クラス名で拾いきれない箇所への保険 */
[class*="passster"] {
  color: var(--tg-text-2);
}

/* ===== モバイル調整 ===== */
@media (max-width: 640px) {
  .scenario-hero {
    padding: 70px 20px 50px;
  }

  .scenario-info {
    padding: 24px 20px 10px;
  }

  .scenario-info__card {
    padding: 18px 18px;
  }

  .scenario-section {
    padding: 30px 20px 46px;
  }

  .scenario-divider {
    padding: 60px 20px;
  }
}