/*
 * PS Plus トロコン比較表（方向: 攻略本の巻末データ表）
 * Cocoon の罫線・薄いグレーの帯・余白をそのまま使い、数字だけを太字とインディゴで立てる。
 * 文字の大きさは本文を継ぐ（font-size: inherit）。アニメーションは付けない。
 * 広い画面は 1 作品 1 行の表、狭い画面（640px 以下）は 1 作品 1 枚のカード（display の切り替え。role は PHP 側で明示）。
 */
.psp {
  container: psp / inline-size;
  --psp-text: var(--cocoon-text-color, #333);
  --psp-muted: var(--cocoon-dark-grey-color, #666);
  --psp-border: var(--cocoon-x-thin-color, #eee);
  --psp-border-strong: var(--cocoon-basic-border-color, #ccc);
  --psp-head-bg: var(--cocoon-xx-thin-color, #f5f6f7);
  --psp-band-bg: var(--cocoon-xxx-thin-color, #fafbfc);
  --psp-accent: var(--cocoon-indigo-color, #1e50a2);
  --psp-radius: var(--cocoon-basic-border-radius, 4px);
  /* 棒の 3 色（取りやすさの 3 段階）: 青緑＝取りやすい・橙＝ふつう・紫＝大変 */
  --psp-c0: #007A66;
  --psp-c1: #A55A00;
  --psp-c2: #8E3B9E;
  margin: 1.5em 0;
  color: var(--psp-text);
  font-size: inherit;
  line-height: inherit;
}
.psp *,
.psp *::before,
.psp *::after {
  box-sizing: border-box;
}
.psp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 操作部 ---- */
.psp-controls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
  gap: 0.75em;
  padding: 0.75em;
  margin: 0 0 0.75em;
  background: var(--psp-head-bg);
  border: 1px solid var(--psp-border-strong);
  border-radius: var(--psp-radius);
}
.psp:not(.psp-ready) .psp-controls {
  opacity: 0.55;
  pointer-events: none;
}
.psp-noscript {
  grid-column: 1 / -1;
  margin: 0;
}
.psp-field {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  min-width: 0;
}
.psp-field-wide {
  grid-column: 1 / -1;
}
.psp-field label {
  font-size: inherit;
  font-weight: 700;
  margin: 0;
}
.psp-field input[type="search"],
.psp-field select {
  width: 100%;
  min-height: 44px;
  padding: 0.25em 0.5em;
  font: inherit;
  color: var(--psp-text);
  background: var(--cocoon-white-color, #fff);
  border: 1px solid var(--psp-border-strong);
  border-radius: var(--psp-radius);
}
.psp-check {
  justify-content: flex-end;
}
.psp-check label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font-weight: 400;
  cursor: pointer;
}
.psp-check input[type="checkbox"] {
  width: 1.5em;
  height: 1.5em;
  margin: 0;
  flex: none;
}
.psp-actions {
  justify-content: flex-end;
}
.psp-reset,
.psp-toggle,
.psp-sort {
  font: inherit;
  color: var(--psp-text);
  cursor: pointer;
}
.psp-reset {
  min-height: 44px;
  padding: 0.25em 1em;
  background: var(--cocoon-white-color, #fff);
  border: 1px solid var(--psp-border-strong);
  border-radius: var(--psp-radius);
}
.psp :focus-visible {
  outline: 2px solid var(--psp-accent);
  outline-offset: 2px;
}

/* ---- 件数・凡例 ---- */
.psp-count {
  margin: 0 0 0.25em;
  font-weight: 700;
}
.psp .psp-legend {
  margin: 0 0 0.75em;
  padding: 0 0 0 1.25em;
  list-style: disc;
  color: var(--psp-muted);
  line-height: 1.5;
}
.psp .psp-legend li {
  margin: 0 0 0.25em;
  padding: 0;
}
.psp-hd {
  display: flex;
  align-items: flex-end;
  min-height: 44px;
  padding: 0.25em 0.2em;
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}

/* ---- 表（広い画面） ---- */
.psp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--psp-border-strong);
  border-radius: var(--psp-radius);
  max-width: 100%;
}
.psp .psp-table {
  width: 100%;
  max-width: none;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: inherit;
  line-height: 1.4;
}
.psp .psp-table tr,
.psp .psp-table tr:nth-of-type(2n+1) {
  background: none;
}
.psp .psp-table th,
.psp .psp-table td {
  padding: 0.5em 0.2em;
  border: 0;
  border-bottom: 1px solid var(--psp-border);
  border-right: 1px solid var(--psp-border);
  background: var(--cocoon-white-color, #fff);
  color: var(--psp-text);
  text-align: left;
  vertical-align: middle;
  font-size: inherit;
}
.psp .psp-table th:last-child,
.psp .psp-table td:last-child {
  border-right: 0;
}
.psp .psp-table thead th {
  padding: 0;
  background: var(--psp-head-bg);
  border-bottom: 1px solid var(--psp-border-strong);
  vertical-align: bottom;
}
.psp .psp-table .psp-title {
  background: var(--psp-band-bg);
  font-weight: 700;
  overflow-wrap: anywhere;
  min-width: 7em;
}
.psp .psp-table .psp-rankc {
  color: var(--psp-muted);
  text-align: right;
  white-space: nowrap;
}
.psp .psp-table .psp-acth,
.psp .psp-table .psp-act {
  width: 4em;
  padding: 0.25em;
}
.psp-sort {
  word-break: keep-all;
  overflow-wrap: normal;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.25em 0.2em;
  background: none;
  border: 0;
  text-align: left;
  font-weight: 700;
  line-height: 1.3;
}
th[data-col="rank"] .psp-sort {
  white-space: nowrap;
}
th[aria-sort="ascending"] .psp-sort::after {
  content: " ▲";
}
th[aria-sort="descending"] .psp-sort::after {
  content: " ▼";
}
th[aria-sort="ascending"],
th[aria-sort="descending"] {
  box-shadow: inset 0 -3px 0 var(--psp-accent);
}

/* 行の中身 */
.psp-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0 auto;
  padding: 0;
  background: var(--cocoon-white-color, #fff);
  border: 1px solid var(--psp-border-strong);
  border-radius: 50%;
  line-height: 1;
}
/* 矢印は CSS の山形（下向き。開くと上向き） */
.psp-toggle::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--psp-text);
  border-bottom: 2px solid var(--psp-text);
  transform: translateY(-2px) rotate(45deg);
}
.psp-toggle[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}
@media (prefers-reduced-motion: no-preference) {
  .psp-toggle::after {
    transition: transform 0.15s ease;
  }
}
.psp-toggle:hover {
  background: var(--psp-head-bg);
}
.psp-hd-act {
  justify-content: center;
}
.psp:not(.psp-ready) .psp-toggle {
  visibility: hidden;
}
.psp-num,
.psp-time,
.psp-diff,
.psp-rate,
.psp-fp {
  white-space: nowrap;
}
.psp-hi .psp-score {
  font-weight: 700;
}
/* 点数の数字の色（3 段階。棒・凡例の見本と同じ色。文字用に白地・行の地との比 4.5 以上の濃さ） */
.psp-score.psp-s0 {
  color: var(--psp-c0);
}
.psp-score.psp-s1 {
  color: var(--psp-c1);
}
.psp-score.psp-s2 {
  color: var(--psp-c2);
}
.psp-dv {
  font-weight: 700;
}
.psp-lo .psp-score {
  font-weight: 400;
  text-decoration: underline dotted;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}
.psp-rate-hi {
  font-weight: 700;
}
.psp-na {
  color: var(--psp-muted);
  white-space: nowrap;
}
/* カード型だけで出す要素（評価の印・配信年月）。カードの中で表示に切り替える */
.psp-card-only {
  display: none;
}
.psp-hours {
  display: block;
  font-weight: 700;
  white-space: nowrap;
}
/* 棒（トロコン時間は 0〜100 時間、難易度は 0〜10、点数は 0〜100 の目盛り）。色は段階 psp-t0〜2 で決める */
.psp-bar {
  display: block;
  position: relative;
  height: 6px;
  margin-top: 0.2em;
  background: var(--cocoon-x-thin-color, #eee);
  border-radius: 3px;
}
.psp-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* 右端の値でも棒（最小 4px）が目盛りからはみ出ないよう、左端を (入れ物の幅 − 4px) までに留める */
  left: min(var(--a), calc(100% - 4px));
  width: max(calc(var(--b) - var(--a)), 4px);
  background: var(--psp-accent);
  border-radius: 3px;
}
.psp-t0.psp-bar::after,
.psp-sw.psp-t0 {
  background: var(--psp-c0);
}
.psp-t1.psp-bar::after,
.psp-sw.psp-t1 {
  background: var(--psp-c1);
}
.psp-t2.psp-bar::after,
.psp-sw.psp-t2 {
  background: var(--psp-c2);
}
/* 凡例の色見本（飾り。色の名前は文で言う） */
.psp-sw {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin: 0 0.3em 0 0;
  border-radius: 2px;
  vertical-align: -0.05em;
}
.psp .psp-legend .psp-legend-colors {
  margin: 0.25em 0 0;
  padding: 0 0 0 1.25em;
  list-style: none;
}
.psp .psp-table td::before {
  display: none;
}

/* 詳細（JS が使える時だけ畳む。使えない時は開いたまま） */
.psp .psp-table .psp-detail td {
  background: var(--psp-band-bg);
  padding: 0;
  border-right: 0;
}
.psp-js .psp-detail {
  display: none;
}
.psp-js .psp-detail.is-open {
  display: table-row;
}
.psp-detail-in {
  max-width: 40em;
  padding: 0.5em;
}
.psp .psp-detail dl.psp-dl {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}
.psp-dl-row {
  display: grid;
  grid-template-columns: 12em 1fr;
  gap: 0.5em;
  padding: 0.25em 0;
  border-bottom: 1px solid var(--psp-border);
}
.psp-dl-row:last-child {
  border-bottom: 0;
}
.psp .psp-detail dl.psp-dl dt {
  font-weight: 700;
  margin: 0;
  padding: 0;
}
.psp .psp-detail dl.psp-dl dd {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}
.psp-dl a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* 0 件 */
.psp-empty {
  margin-top: 0.75em;
  padding: 1em;
  text-align: center;
  background: var(--psp-head-bg);
  border: 1px solid var(--psp-border-strong);
  border-radius: var(--psp-radius);
}
.psp-empty[hidden],
.psp .psp-item[hidden] {
  display: none;
}
.psp-empty p {
  margin: 0 0 0.5em;
  font-weight: 700;
}

/* ---- カード（狭い画面） ---- */
@container psp (width < 44em) {
  .psp-controls {
    grid-template-columns: 1fr 1fr;
  }
  .psp-check {
    grid-column: 1 / -1;
  }
  .psp-scroll {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  .psp .psp-table,
  .psp .psp-table tbody,
  .psp .psp-table tr,
  .psp .psp-table td,
  .psp .psp-table th {
    display: block;
  }
  .psp .psp-table thead {
    display: none;
  }
  .psp .psp-table tbody.psp-item {
    margin: 0 0 0.5em;
    border: 1px solid var(--psp-border-strong);
    border-radius: var(--psp-radius);
    overflow: hidden;
  }
  .psp .psp-table tbody.psp-item[hidden] {
    display: none;
  }
  .psp .psp-table tr.psp-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 0;
    padding: 0.5em;
    background: var(--cocoon-white-color, #fff);
  }
  .psp .psp-table th,
  .psp .psp-table td {
    border: 0;
    padding: 0;
    background: none;
    min-width: 0;
  }
  /* 1 段目: 順位・タイトル・評価の印・右端のボタン（配信年月はタイトルの下）。2 段目: トロコン時間・難易度・Meta・OC */
  .psp .psp-table .psp-rankc {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: 2em;
    text-align: left;
    z-index: 1;
  }
  .psp .psp-table .psp-rankc::before,
  .psp .psp-table .psp-rankc::after {
    content: none;
  }
  .psp .psp-table th.psp-title {
    grid-row: 1;
    grid-column: 1 / -1;
    width: auto;
    padding-left: 2em;
    padding-right: 56px;
    margin-bottom: 0.25em;
    background: none;
    /* 並びはタイトル → 印 → 配信年月（HTML のまま）。折り返しで出し分ける:
       タイトルと印が 1 行に収まる時は「タイトル 印」／「配信年月」、収まらない時は「タイトル」／「印 配信年月」。
       配信年月の基準幅を「全幅 − 印の幅と間より少し大きい値」にして、1 行目には入らず、印と同じ行には並べるようにしている */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6em;
  }
  .psp .psp-table .psp-card-only {
    display: inline-block;
  }
  .psp .psp-table .psp-badge {
    padding: 0 0.45em;
    border: 1px solid var(--psp-border-strong);
    border-radius: var(--psp-radius);
    background: var(--psp-head-bg);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
  }
  .psp .psp-table .psp-badge-hi {
    color: var(--psp-accent);
    border-color: var(--psp-accent);
  }
  .psp .psp-table .psp-fpline {
    display: block;
    flex: 1 0 calc(100% - 3em);
    color: var(--psp-muted);
    font-weight: 400;
  }
  /* 評価・配信のセルは表用。カードでは同じ値をタイトルの中に出すので隠す（読み上げも 1 回になる） */
  .psp .psp-table td.psp-rate,
  .psp .psp-table td.psp-fp {
    display: none;
  }
  .psp .psp-table td.psp-act {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    width: auto;
  }
  .psp .psp-table td.psp-time { grid-row: 2; grid-column: 1 / span 9; }
  .psp .psp-table td.psp-diff { grid-row: 2; grid-column: 10 / span 7; }
  .psp .psp-table td[data-label="Metascore"] { grid-row: 2; grid-column: 17 / span 4; }
  .psp .psp-table td[data-label="OpenCritic"] { grid-row: 2; grid-column: 21 / span 4; }
  .psp .psp-table td[data-label]:not(.psp-rankc):not(.psp-act)::before {
    content: attr(data-label);
    display: block;
    color: var(--psp-muted);
    font-weight: 400;
    white-space: nowrap;
  }
  /* 点数の列は短い名前（Meta・OC）を見せ、読み上げには正式名を渡す（代替テキスト。対応していない環境では短い名前を読む） */
  .psp .psp-table td.psp-num[data-label]:not(.psp-rankc):not(.psp-act)::before {
    content: attr(data-short);
    content: attr(data-short) / attr(data-label);
  }
  .psp .psp-table td.psp-diff {
    align-self: start;
  }
  /* 2 段目の 4 項目の棒どうしがつながって見えないよう、棒の右に余白を入れる（文字の幅は変えない） */
  .psp .psp-table td.psp-time .psp-bar,
  .psp .psp-table td.psp-diff .psp-bar {
    margin-right: 0.6em;
  }
  .psp .psp-table td.psp-time,
  .psp .psp-table td.psp-diff,
  .psp .psp-table td.psp-num {
    margin-top: 0.1em;
  }
  .psp .psp-toggle {
    padding: 0;
  }
  /* 詳細 */
  .psp.psp-js .psp-table tr.psp-detail {
    display: none;
  }
  .psp.psp-js .psp-table tr.psp-detail.is-open {
    display: block;
  }
  .psp .psp-table .psp-detail td {
    border-top: 1px solid var(--psp-border);
    background: var(--psp-band-bg);
  }
  .psp-detail-in {
    max-width: none;
  }
  .psp-dl-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/*
 * 記事本文の普通の表（wp:table）用: figure.wp-block-table に psp-nowrap-cols を付けると、
 * 2 列目以降のセルは折り返さない（1 列目と、文章が入る最後の列は折り返す）。
 * はみ出す時は表の入れ物の中だけで横に動く。
 */
figure.wp-block-table.psp-nowrap-cols {
  overflow-x: auto;
  max-width: 100%;
}
figure.wp-block-table.psp-nowrap-cols :is(th, td):not(:first-child):not(:last-child) {
  white-space: nowrap;
}
/* 狭い画面で 1 列目・最後の列が 1 文字ずつに潰れないよう下限を置く（足りない分は入れ物の中で横に動く） */
figure.wp-block-table.psp-nowrap-cols :is(th, td):first-child {
  min-width: 7em;
}
figure.wp-block-table.psp-nowrap-cols :is(th, td):last-child {
  min-width: 10em;
}

/* とても狭い入れ物（画面の幅 320〜360px 前後）: 2 段目の 4 つを、中身の幅に合わせた幅（em）で並べる（24 分割だと 1 列ぶん足りない） */
@container psp (width < 21em) {
  .psp .psp-table tr.psp-row {
    grid-template-columns: 6.6em 5.5em 2.8em minmax(0, 1fr);
  }
  .psp .psp-table td.psp-time { grid-column: 1; }
  .psp .psp-table td.psp-diff { grid-column: 2; }
  .psp .psp-table td[data-label="Metascore"] { grid-column: 3; }
  .psp .psp-table td[data-label="OpenCritic"] { grid-column: 4; }
}

/* 記事本文の難易度の値（例「2〜6/10」）が行の途中で折り返さないようにする */
.psp-nowrap {
  white-space: nowrap;
}