/* =============================================
   Basketball SPOSCOR — フロントエンドスタイル
   Core が sposcor-basketball-style として自動 enqueue する
   （依存: sposcor-core-style）。ファイル配信なので <head> で
   確実に読まれ、本文内 wp_add_inline_style のタイミング問題を回避できる。
   ============================================= */

/* -----------------------------------------------
   スマホ（640px以下）レスポンシブ
   ----------------------------------------------- */
@media (max-width: 640px) {

    /* トーナメント/リーグの対戦カードを1カラムに折り返す。
       shared/tournament.php は grid（.sposcor-t-{id}）を
       repeat(2,1fr) のインライン style で出すため !important で上書き。 */
    [class*="sposcor-t-"] {
        grid-template-columns: 1fr !important;
    }

    /* 対戦カード内のピリオド数字列（Q1〜Q4 / OT）が
       横にはみ出さないよう縮小する。 */
    .sposcor-pc-num,
    .sposcor-pc-label {
        width: 14px !important;
        font-size: 9px !important;
    }
    .sposcor-pc-row {
        gap: 2px !important;
        padding: 0 !important;
    }

    /* スコアカード本体も画面幅に収める（二重防衛） */
    .sposcor-outer {
        max-width: 100% !important;
    }
}

/* ── スコアカードのヘッダー：狭い画面での折り返し ──────────────
   ヘッダーは「名前 / ロゴ / スコア / ロゴ / 名前」を横一列に並べている。
   スマホ幅ではこれが収まらず、名前が切れて右側がはみ出す。
   縦に積み替え、ロゴを名前の上に置くことで 3 列のまま収める。
   インラインの flex 指定を上書きするため !important が要る。 */
@media (max-width: 640px) {
    .sposcor-teams-row {
        gap: 6px !important;
        align-items: flex-start !important;
    }
    /* h 側は DOM が「名前 → ロゴ」の順なので column-reverse でロゴが上に来る。
       v 側は「ロゴ → 名前」の順なのでそのまま column でよい。 */
    .sposcor-teams-row .sposcor-side-h {
        flex-direction: column-reverse !important;
    }
    .sposcor-teams-row .sposcor-side-v {
        flex-direction: column !important;
    }
    .sposcor-teams-row .sposcor-side {
        gap: 6px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
    }
    .sposcor-teams-row .sposcor-side > div {
        text-align: center !important;
    }
    .sposcor-teams-row .sposcor-side-logo {
        width: 44px !important;
    }
    .sposcor-teams-row .sposcor-side-logo > * {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }
    .sposcor-teams-row .sposcor-center {
        gap: 6px !important;
    }
    .sposcor-teams-row .sposcor-cur {
        font-size: 30px !important;
    }
}

/* ── 順位表（リスト）で使わない列を隠す ─────────────────────
   列順：1 Pos / 2 Team / 3 G / 4 W / 5 L / 6 D / 7 Win% / 8 GB / 9 RS / 10 RA / 11 Pts
   隠す：3(G) 6(D) 8(GB) 9(RS) 10(RA)   残す：Pos Team W L Win% Pts
   リスト表のコンテナだけが inline に "min-width:max-content" を持つ
   （マトリクス表は px 指定の table なので当たらない）。これを目印にする。
   以前はショートコードの戻り値に <style> を混ぜていたが、レビューで
   wp_enqueue 系を使うよう指摘されたため、静的な CSS としてここに置く。 */
.sposcor-standings-wrap div[style*="min-width:max-content"]>div>div:nth-child(3),
.sposcor-standings-wrap div[style*="min-width:max-content"]>div>div:nth-child(6),
.sposcor-standings-wrap div[style*="min-width:max-content"]>div>div:nth-child(8),
.sposcor-standings-wrap div[style*="min-width:max-content"]>div>div:nth-child(9),
.sposcor-standings-wrap div[style*="min-width:max-content"]>div>div:nth-child(10){
    display: none !important;
}

/* スコアボード内のロゴ枠（36px 幅の空 div）は使わないので隠す。
   以前は投稿 ID 付きの <style> をショートコード内に出していた。 */
.sposcor-scoreboard-inner td div[style*="width:36px"]{
    display: none !important;
}