/* ============================================================
   ポジション別 最強選手ランキング（[ef_player_ranking]）

   見せ方はガチャ当たり度ランキング（gacha-ranking.css）にそろえる:
   順位はゲーム内カードの総合値と同じステンシル書体の数字（1〜3位だけ金・銀・銅）、
   総合値は選手詳細と同じ「強さの色」（efpd-stat-rank--*）。色帯・チップ・グラデーションは使わない。

   flexible-table-block の CSS はブロックが本文にある記事でしか読まれない（ショートコード出力には効かない）ので、
   表のスタイルはここで自前に持つ。
   SWELL の .post_content table / th / td（詳細度 0,1,1 以上）に負けないよう、打ち消しは2クラス以上で書く。
   見出し（h2/h3/h4）には何も当てない。SWELLの見出しデザインをそのまま効かせるため。
   幅の切り替えは記事本文の実幅（コンテナクエリ）で行う。サイドバーの有無でビューポート幅と本文幅が一致しないため。
   ============================================================ */

.efpd-prank {
    container-type: inline-size;
    container-name: efprank;
    --efpd-prank-thumb: 3.5rem;
    --efpd-prank-line: #e6e9ee;
    margin: 0.6rem 0 1.8rem;
}

.post_content .efpd-prank table.efpd-prank__table,
table.efpd-prank__table.efpd-prank__table {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: none;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.5;
    table-layout: fixed;
}

/* 見出し行は塗りつぶさず、細い罫線と小さい文字だけにする（カード画像と数字を主役にする） */
.post_content .efpd-prank__table th,
.efpd-prank__table thead th {
    padding: 0 0.4rem 0.35rem;
    border: none;
    border-bottom: 2px solid var(--efpd-text);
    background: transparent;
    color: var(--efpd-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.post_content .efpd-prank__table th:nth-child(2),
.efpd-prank__table thead th:nth-child(2) {
    text-align: left;
}

/* アコーディオンの中の表は、見出し行を読み上げにだけ残す（列幅は同じ colgroup でそろえる） */
.post_content .efpd-prank__table .efpd-prank__thead--quiet th,
.efpd-prank__thead--quiet th {
    height: 0;
    padding: 0;
    border-bottom: none;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.post_content .efpd-prank__table td,
.efpd-prank__table tbody td {
    padding: 0.55rem 0.4rem;
    border: none;
    border-bottom: 1px solid var(--efpd-prank-line);
    background: transparent;
    color: var(--efpd-text);
    text-align: center;
    vertical-align: middle;
    word-break: normal;
    overflow-wrap: anywhere;
}

.efpd-prank__col-no { width: 2.9rem; }
.efpd-prank__col-ovr { width: 3.6rem; }
.efpd-prank__col-cap { width: 4.6rem; }

/* 順位: ゲーム内カードと同じステンシル書体。1〜3位だけ金・銀・銅 */
.post_content .efpd-prank__table td.efpd-prank__no,
.efpd-prank__table td.efpd-prank__no {
    color: #8a93a3;
    line-height: 1;
    white-space: nowrap;
}

.efpd-prank__num {
    font-family: "eFontStencil", "eFootballStencil", sans-serif;
    font-size: 1.45rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.efpd-prank__no small {
    margin-left: 0.05rem;
    font-size: 0.6rem;
    font-weight: 700;
}

.efpd-prank__row[data-rank="1"] .efpd-prank__no { color: #c48a00; }
.efpd-prank__row[data-rank="2"] .efpd-prank__no { color: #6f7b8c; }
.efpd-prank__row[data-rank="3"] .efpd-prank__no { color: #a3622b; }

/* 1位は数字と名前だけ少し大きくする。カード画像の大きさは全行そろえる（ユーザー指示） */
.efpd-prank__row[data-rank="1"] .efpd-prank__num { font-size: 1.8rem; }
.efpd-prank__row[data-rank="1"] .efpd-prank__name { font-size: 1.04em; }

/* 選手セル: カード画像 ＋ 名前 ＋ カードタイプなどの小さい行。
   td 自体には display:flex を当てない（table-layout:fixed の列幅計算から外れるため）。 */
.post_content .efpd-prank__table td.efpd-prank__player,
.efpd-prank__table td.efpd-prank__player {
    text-align: left;
}

.efpd-prank__player-inner {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.efpd-prank__thumb {
    flex: 0 0 auto;
    display: block;
    width: var(--efpd-prank-thumb);
    line-height: 0;
}

.post_content .efpd-prank__thumb img,
.efpd-prank__thumb img.efpd-prank__img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0.2rem;
}

.efpd-prank__body {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.post_content .efpd-prank__body a.efpd-prank__name,
a.efpd-prank__name.efpd-prank__name {
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.efpd-prank__meta {
    color: var(--efpd-muted);
    font-size: 0.7rem;
    line-height: 1.35;
}

/* 総合値: 選手詳細・比較ページと同じ強さの色。数字はカードと同じステンシル書体 */
.post_content .efpd-prank__table a.efpd-prank__ovr-link,
a.efpd-prank__ovr-link.efpd-prank__ovr-link {
    font-family: "eFontStencil", "eFootballStencil", sans-serif;
    font-size: 1.45rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.efpd-prank__cap-num {
    color: var(--efpd-text);
    font-family: "eFontStencil", "eFootballStencil", sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.efpd-prank__fixed {
    display: inline-block;
    color: var(--efpd-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ポジションのバッジ。色は shortcodes-common.css の .efpd-pos--* （カードのバッジと共通） */
.efpd-prank__pos {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.2rem;
    color: #fff;
    font-family: "eFootballSans", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.02em;
    vertical-align: 0.05em;
}

/* 表の行の中のバッジ（左右をまとめたポジションで、どちら側かを示す） */
.efpd-prank__pos--row {
    margin-right: 0.3rem;
    padding: 0 0.3rem;
    font-size: 0.62rem;
    line-height: 1.45;
}

/* 隠してある行（tbody ごと）。hidden の間は画像も読み込まれない */
.efpd-prank__chunk[hidden] {
    display: none;
}

/* 表の下のボタンは2つだけ。主役は「続きを見る」、「すべて閉じる」は控えめに下へ置く */
.efpd-prank__controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin: 0.7rem 0 0;
}

.post_content .efpd-prank button.efpd-prank__btn,
button.efpd-prank__btn.efpd-prank__btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* 主: もっと見る */
.post_content .efpd-prank button.efpd-prank__btn--more,
button.efpd-prank__btn--more.efpd-prank__btn--more {
    width: 100%;
    max-width: 24rem;
    padding: 0.75rem 1.2rem;
    border: 1px solid var(--efpd-border);
    border-radius: 999px;
    background: var(--efpd-surface);
    box-shadow: 0 1px 2px rgba(29, 39, 51, 0.06);
    color: var(--efpd-text);
    font-size: 0.86rem;
    font-weight: 700;
}

.efpd-prank__btn--more:hover,
.efpd-prank__btn--more:focus-visible {
    border-color: #b9c2ce;
    background: var(--efpd-surface-muted);
}

.efpd-prank__btn--more::after {
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.18em) rotate(45deg);
}

/* 副: すべて閉じる */
.post_content .efpd-prank button.efpd-prank__btn--close,
button.efpd-prank__btn--close.efpd-prank__btn--close {
    padding: 0.35rem 0.8rem;
    color: var(--efpd-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.efpd-prank__btn--close:hover,
.efpd-prank__btn--close:focus-visible {
    color: var(--efpd-text);
}

.efpd-prank__btn--close::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(0.12em) rotate(-135deg);
}

/* hidden の打ち消しは、上のボタン指定（詳細度0,3,1）に勝てるように書く */
.post_content .efpd-prank button.efpd-prank__btn[hidden],
button.efpd-prank__btn[hidden].efpd-prank__btn {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .post_content .efpd-prank button.efpd-prank__btn,
    button.efpd-prank__btn.efpd-prank__btn {
        transition: none;
    }
}

/* キーボード操作でどこにいるか分かるようにする（テーマ側で outline が消えている場合の保険） */
.efpd-prank a:focus-visible,
.efpd-prank button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* 見出しの下: ピッチ上の位置（選手詳細のポジション適性マップと同じ部品。その章のポジションだけ光らせる）。
   大きさは zoom で縮めるだけにして、セルの比率・角丸・色は詳細ページのまま保つ。 */
.efpd-prank__map.efpd-position-panel__inner {
    zoom: 0.68;
}

/* 数値は入れていないので枠ごと隠す */
.efpd-prank__map .efpd-pos-cell__rating {
    display: none;
}

/* 詳細ページの指定のままだとグリッドの最小幅が約13.4remあり、本文が狭いと右列（RWG/RMF/RSB）が見切れる */
.efpd-prank__map .efpd-pos-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) minmax(0, 1fr);
}

/* 右側の文章（説明＋首位の一文）。段落どうしの間は詰める */
.efpd-prank__postext > p {
    margin: 0 0 0.5rem;
}

.efpd-prank__postext > p:last-child {
    margin-bottom: 0;
}

/* コンテナクエリは「自分自身」には効かないので、外側で幅を測って中の並びを切り替える */
.efpd-prank__poswrap {
    container-type: inline-size;
    container-name: efposbox;
    margin: 0.4rem 0 1.2rem;
}

.efpd-prank__posbox {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.post_content .efpd-prank__posbox p.efpd-prank__poslead,
p.efpd-prank__poslead.efpd-prank__poslead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

/* 本文が狭いときはマップを上に、説明文を下に積む。
   しきい値は px で書く（SWELL は html の font-size を画面幅で変えるため、rem だと基準がずれる）。 */
@container efposbox (max-width: 400px) {
    .efpd-prank__posbox {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .efpd-prank__map {
        width: 100%;
        max-width: 22rem;
    }

    .efpd-prank__postext {
        width: 100%;
    }
}

.post_content .efpd-prank p.efpd-prank__caption,
p.efpd-prank__caption.efpd-prank__caption {
    margin: 0.5rem 0 0;
    color: var(--efpd-muted);
    font-size: 0.72rem;
    line-height: 1.6;
    text-align: center;
}

/* 本文が狭いとき（スマホ）は文字と画像を少し詰める（しきい値は px。上と同じ理由） */
@container efprank (max-width: 420px) {
    .efpd-prank {
        --efpd-prank-thumb: 2.9rem;
    }

    .post_content .efpd-prank table.efpd-prank__table,
    table.efpd-prank__table.efpd-prank__table {
        font-size: 0.82rem;
    }

    .efpd-prank__col-no { width: 2.3rem; }
    .efpd-prank__col-ovr { width: 2.9rem; }
    .efpd-prank__col-cap { width: 4rem; }

    .efpd-prank__num { font-size: 1.2rem; }
    .efpd-prank__row[data-rank="1"] .efpd-prank__num { font-size: 1.45rem; }

    .post_content .efpd-prank__table a.efpd-prank__ovr-link,
    a.efpd-prank__ovr-link.efpd-prank__ovr-link { font-size: 1.2rem; }

    .efpd-prank__cap-num { font-size: 1rem; }
    .efpd-prank__fixed { font-size: 0.66rem; }

    .post_content .efpd-prank__table td,
    .efpd-prank__table tbody td { padding: 0.5rem 0.25rem; }
}