/* ==========================================================================
   病能探偵（psycho-sleuth）専用の見た目。
   ゲーム内のUIは「暗い青緑の地に、細い水色の線と神経の模様」で組まれている。
   その雰囲気に寄せるため、インディー型の配色（--pi-* / --c-*）を上書きする。
   追加のHTMLは使わず、既存のクラスに色と線だけを足す。
   ========================================================================== */

body.pattern-indie.ps-site {
  --pi-bg: #08131c;
  --pi-panel: #0f2230;
  --pi-paper: #d8ecf4;
  --pi-muted: #8fb3c4;
  --pi-line: #2c4d5f;
  --pi-green: #7fd4e8;
  --pi-red: #d4577a;
  --pi-red-ink: #f08ba6;
  --c-surface: #0f2230;
  --c-line: #2c4d5f;
  --c-accent: #7fd4e8;
  --c-muted: #8fb3c4;
  --c-tint: #0b1a25;
  --c-radius: 3px;
  background:
    radial-gradient(circle at 18% 8%, rgba(127, 212, 232, .10), transparent 42%),
    radial-gradient(circle at 82% 0%, rgba(212, 87, 122, .08), transparent 38%),
    var(--pi-bg);
  background-attachment: fixed;
  color: var(--pi-paper);
}

/* 見出しの「## 」は神経の節点に見立てて、色だけ水色に */
body.ps-site h2::before { color: var(--pi-green); }

/* リンクは水色。ホバーで少し明るく */
body.ps-site a { color: #a8e6f5; }
body.ps-site a:hover { color: #ffffff; }

/* ヘッダー：細い二重線で「装置のパネル」らしく */
body.ps-site .gh-top,
body.ps-site .gnav { border-bottom: 1px solid var(--pi-line); }
body.ps-site .gnav a.current { background: var(--pi-green); color: #08131c; }

/* インディー型はヒーロー画像を消す設定だが、このゲームはキービジュアルを出したい。
   トップは横長、下層ページは細い帯にして、本文の面積を奪わない。 */
body.ps-site .hero { background: #0b1a25; border-bottom: 1px solid var(--pi-line); }
body.ps-site .hero::before { filter: blur(26px) brightness(.35); }
body.ps-site .hero-img {
  display: block;
  max-width: 100%;
  border: 1px solid var(--pi-line);
  border-bottom: 0;
}
body.ps-site .hero-img.hero-wide { max-height: 320px; }
body.ps-site .hero-compact .hero-img { max-height: 160px; }
body.ps-site .hero-title {
  color: #cfeaf5;
  font-size: 13px;
  letter-spacing: .16em;
  padding: 8px 4px 10px;
}
body.ps-site .hero-img + .hero-title {
  position: static;
  background: none;
  padding: 8px 4px 10px;
  font-size: 13px;
  text-shadow: none;
}

/* 表：罫線を細く、見出し行をわずかに光らせる */
body.ps-site table { border-color: var(--pi-line); }
body.ps-site th { background: #12293a; color: #cfeaf5; letter-spacing: .04em; }
body.ps-site td { border-color: var(--pi-line); }

/* 見出し・強調・用語名は、共通CSSの暗い色（--strong）を継承してしまうので明るく上書きする */
body.ps-site .article-head h1,
body.ps-site .article-head h2,
body.ps-site .profile-name,
body.ps-site .term-item dt,
body.ps-site .browse-cards a,
body.ps-site .card-body > a,
body.ps-site .side-menu a,
body.ps-site .gnav-more summary { color: #e8f6fb; }
body.ps-site .term-item dt small { color: var(--pi-muted); }

/* 本文の太字は、明るい黄色のマーカーではなく水色の下線で目立たせる */
body.ps-site .prose strong {
  background: none;
  color: #ffffff;
  border-bottom: 2px solid rgba(127, 212, 232, .55);
}

/* 答え（TL;DR）と注意書き：左の縦線を水色に */
body.ps-site .c-answer { background: #0b1a25; border-left-color: var(--pi-green); }
body.ps-site .c-answer b:first-child { color: var(--pi-green); }

/* 折りたたみ（ネタバレ）は赤紫の枠で「踏み込む場所」だと分かるように */
body.ps-site details.step { background: #0d1f2b; border-color: var(--pi-line); }
body.ps-site details.step.answer,
body.ps-site details.step.spoiler { border-color: var(--pi-red); }
body.ps-site details.step > summary { color: #cfeaf5; }
body.ps-site details.answer > summary { color: var(--pi-red-ink); }

/* 人物・病能の一覧タイル */
body.ps-site .img-grid li { background: #0d1f2b; border-color: var(--pi-line); }
body.ps-site .img-grid li:hover { background: #12293a; }
body.ps-site .menu-tiles li { background: #0d1f2b; border-color: var(--pi-line); }

/* 本文の挿絵（背景のスクリーンショット）。アイコン扱いの 56px ではなく、横長の帯で出す */
body.ps-site .prose img.ico {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  margin: 18px 0 22px;
  padding: 0;
  border: 1px solid var(--pi-line);
  border-radius: 3px;
  object-fit: cover;
  image-rendering: auto;
}

/* インディー型は本文を 860px に絞るが、このサイトは一覧の表が主役なので広く使う */
body.ps-site .article,
body.ps-site.site-database .article { max-width: 100%; }

/* 陣営バッジ（chip）は暗い面でも読めるように */
body.ps-site .chip { background: #12293a; border-color: var(--pi-line); color: #cfeaf5; }
body.ps-site .chip-blue { background: #1f4f8f; border-color: #2f6fc2; color: #eaf4ff; }
body.ps-site .chip-red { background: #7d2436; border-color: #c0392b; color: #ffe9ef; }
body.ps-site .chip-purple { background: #3b348a; border-color: #5a4fc0; color: #efeaff; }
body.ps-site .chip-teal { background: #0d5a4a; border-color: #137a63; color: #e6fff8; }
body.ps-site .chip-amber { background: #6b4708; border-color: #8a5a0a; color: #fff4dd; }
body.ps-site .chip-dark { background: #2a2d33; border-color: #3d3f45; color: #e8ecf1; }

/* ネタバレページの冒頭に出す帯 */
body.ps-site .ps-spoiler-note {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--pi-red);
  border-left-width: 4px;
  background: #1a0f18;
  color: var(--pi-red-ink);
  font-size: 13.5px;
  line-height: 1.7;
}

@media (max-width: 760px) {
  body.ps-site { font-size: 15.5px; }
}