/* ========================================
   node/show.blade.php 固有スタイル
   共通スタイルは app.css に集約済み
   ======================================== */

/* PC: 見出し・本文は左揃え。表ブロックは内容幅で中央寄せ */
@media (min-width: 768px) {
    .node-page > h2,
    .node-page > p,
    .node-page .node-section-title,
    .node-page .node-ranking-empty {
        text-align: left;
    }

    .node-page .node-tables-wrap {
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========================================
   ランキング + WR 更新履歴 2 カラム
   PC: 横並び（grid） / スマートフォン: 縦積み
   テーブル幅が min-content で広がると flex では2列目が下に回るため、
   minmax(0, 1fr) の grid + 子の min-width:0 で横並びを安定させる。
   ======================================== */
.node-tables-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 0.5rem;
    width: 100%;
}

/* 中〜大画面: 2 列。親 .node-page で中央配置、表は内容幅 */
@media (min-width: 768px) {
    .node-tables-wrap {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* 内側の横スクロール用ラッパーが幅100%のまま拡大しないよう制約 */
.node-tables-ranking,
.node-tables-history {
    min-width: 0;
    max-width: 100%;
}

.node-tables-wrap .table-scroll-wrapper {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.node-section-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 0.5rem 0;
    color: #e0e0e0;
    text-align: left;
}

.node-ranking-empty {
    color: #a0a0a0;
    margin: 0.25rem 0 0.5rem 0;
}

/* ========================================
   ランキング + 更新履歴
   - app.css の th/td 130px・nowrap ベースを上書き
   - 揃え: 本文はタイム(3)・ライダー(4) 左、他（順位・日付・プレイヤー・動画）中央
   ======================================== */

/* --- PC: 元の cross-highlight 相当（table-layout: auto・列幅は内容、改行なし＝1行表記） --- */
@media (min-width: 768px) {
    .node-tables-wrap .table-scroll-wrapper {
        overflow-x: auto;
    }

    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight {
        table-layout: auto;
        width: max-content;
        max-width: 100%;
        min-width: 0;
        margin: 0;
    }

    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight th,
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight td {
        width: auto !important;
        min-width: 0;
        max-width: none !important;
        padding: 5px;
        box-sizing: border-box;
        vertical-align: middle;
        white-space: nowrap;
        text-align: center;
        overflow: visible;
        word-wrap: normal;
        overflow-wrap: normal;
    }
}

/* 本文: タイム(3)・ライダー(4) だけ左寄せ（PC のみ） */
@media (min-width: 768px) {
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight td:nth-child(3),
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight td:nth-child(4) {
        text-align: left;
    }
}

/* --- スマートフォン: 横スクロールなしで画面幅に収める --- */
@media (max-width: 767px) {
    .default > h2 {
        margin: 0.35rem 0 0.25rem;
        line-height: 1.25;
    }

    .default > p {
        margin: 0.25rem 0;
        line-height: 1.35;
    }

    .node-section-title {
        margin: 0 0 0.35rem 0;
    }

    /* site-container の左右余白をはみ出し、表の利用幅を最大化 */
    .node-page .node-tables-wrap .table-scroll-wrapper {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight {
        table-layout: fixed;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-collapse: collapse;
        font-size: 0.78rem;
    }

    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight th,
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight td {
        padding: 2px 3px !important;
        line-height: 1.15;
        vertical-align: middle;
        box-sizing: border-box;
        border-width: 1px;
        overflow: hidden;
    }

    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight th {
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 0.72rem;
        text-align: center !important;
    }

    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight tr {
        height: auto;
        min-height: 0;
    }

    /* 順位 / スペーサ列（スマホはヘッダー文字非表示・列幅最小） */
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight:not(.node-wr-history) th:nth-child(1) {
        width: 1.15rem !important;
        min-width: 1.15rem !important;
        max-width: 1.15rem !important;
        padding: 2px 0 !important;
        text-align: center;
    }

    .node-tables-wrap .node-rank-head-text {
        display: none;
    }

    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight:not(.node-wr-history) td:nth-child(1) {
        width: 1.15rem !important;
        min-width: 1.15rem !important;
        max-width: 1.15rem !important;
        padding: 2px 0 !important;
        text-align: center;
        font-size: 0.78rem;
    }

    .node-tables-wrap .table-scroll-wrapper > table.node-wr-history th.node-wr-spacer,
    .node-tables-wrap .table-scroll-wrapper > table.node-wr-history td.node-wr-spacer {
        width: 1.15rem !important;
        min-width: 1.15rem !important;
        max-width: 1.15rem !important;
        padding: 2px 0 !important;
        box-sizing: border-box;
    }

    /* 投稿日（日付 Y/m/d に合わせて列幅を抑える） */
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight th:nth-child(2),
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight td:nth-child(2) {
        width: 4.35rem !important;
        min-width: 4.35rem !important;
        max-width: 4.35rem !important;
        white-space: nowrap;
        text-align: center;
        padding: 2px 1px !important;
        font-size: 0.72rem;
        letter-spacing: -0.02em;
    }

    /* タイム（差分は改行・中央揃え） */
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight th:nth-child(3),
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight td:nth-child(3) {
        width: 18%;
        white-space: normal;
        text-align: center;
        word-break: keep-all;
        font-size: 0.72rem;
        padding: 2px 2px !important;
    }

    /* ライダー */
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight th:nth-child(4),
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight td:nth-child(4) {
        width: 28%;
        white-space: nowrap;
        text-align: left;
    }

    /* プレイヤー */
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight th:nth-child(5),
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight td:nth-child(5) {
        width: 28%;
        white-space: nowrap;
        text-align: center;
    }

    /* 動画 */
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight th:nth-child(6),
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight td:nth-child(6) {
        width: 1.6rem !important;
        min-width: 1.6rem !important;
        max-width: 1.6rem !important;
        padding: 2px 1px !important;
        text-align: center;
    }

    .node-tables-wrap .time-gap {
        display: block;
        white-space: nowrap;
        font-size: 0.85em;
        margin-left: 0;
        line-height: 1.1;
    }

    .node-tables-wrap .node-name-clip {
        display: inline-block;
        max-width: calc(100% - 18px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .node-tables-wrap td:nth-child(5) .player-link {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .node-tables-wrap .image-small {
        height: 14px !important;
        width: auto;
        vertical-align: middle;
        margin-right: 1px;
    }

    .video-container iframe {
        width: 100%;
        max-width: min(100vw - 32px, 360px);
        height: auto;
        min-height: 180px;
        aspect-ratio: 16 / 9;
    }
}

/* PC: ランキング「順位」列と更新履歴の先頭スペーサ列を同じ幅にし、2 表の列を縦に揃える */
@media (min-width: 768px) {
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight:not(.node-wr-history) th:nth-child(1),
    .node-tables-wrap .table-scroll-wrapper > table.cross-highlight:not(.node-wr-history) td:nth-child(1),
    .node-tables-wrap .table-scroll-wrapper > table.node-wr-history th.node-wr-spacer,
    .node-tables-wrap .table-scroll-wrapper > table.node-wr-history td.node-wr-spacer {
        width: 4.25rem !important;
        min-width: 4.25rem !important;
        max-width: 4.25rem !important;
        box-sizing: border-box;
    }
}

.node-wr-empty {
    text-align: center;
    color: #a0a0a0;
}

/* ランキングテーブルと同じタイム差表記 */
.time-gap {
    color: gray;
}

/* ========================================
   動画コンテナ
   ======================================== */
.video-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.video-container iframe {
    width: 560px;
    height: 315px;
    border: none;
    max-width: 100%;
}