/* ==========================
   配信者詳細ページ v2（コンパクト版）
   .streamer-page--v2 の中だけに効く。inc/streamer-layout/layout-v2.php で切り替える。
   ========================== */

/* ---- 数字カード：アイコンを外して小さくする ---- */
.streamer-page--v2 .streamer-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
    max-width: 640px;
}

@media (min-width: 600px) {
    .streamer-page--v2 .streamer-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.streamer-page--v2 .streamer-stat-card {
    padding: 12px 8px;
    border-radius: 12px;
}

.streamer-page--v2 .streamer-stat-card:hover {
    transform: none;
}

.streamer-page--v2 .streamer-stat-card strong {
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 2px;
}

.streamer-page--v2 .streamer-stat-card span {
    display: block;
    font-size: 12px;
    line-height: 1.4;
}

.streamer-page--v2 .streamer-stat-card span small {
    display: block;
    font-size: 10px;
    opacity: .8;
}

.streamer-page--v2 .streamer-stat-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* 色は並び順に関係なく、種類ごとに固定する（v1の nth-of-type より優先） */
.streamer-page--v2 .streamer-stat-card--subs strong { color: var(--pachi-pink); }
.streamer-page--v2 .streamer-stat-card--sc strong { color: #ffc83d; }
.streamer-page--v2 .streamer-stat-card--best strong { color: var(--pachi-green); }
.streamer-page--v2 .streamer-stat-card--views strong { color: var(--pachi-cyan); }

.streamer-page--v2 .streamer-stat-card--sc {
    border-color: rgba(255, 200, 61, .45);
}

/* ---- 配信履歴：サムネ横並びのコンパクトな行にする ---- */
.streamer-page--v2 .streamer-history {
    padding: 16px;
    border-radius: 16px;
}

.streamer-page--v2 .streamer-history h2 {
    font-size: 18px;
    margin-bottom: 8px;
}

.streamer-page--v2 .history-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 6px 12px;
    padding: 12px 0;
    align-items: start;
}

/* サムネが無い行は、本文を横いっぱいに使う */
.streamer-page--v2 .history-card > .history-card__body:first-child {
    grid-column: 1 / -1;
}

.streamer-page--v2 .history-card__thumb {
    width: 112px;
    min-width: 0;
    border-radius: 8px;
}

.streamer-page--v2 .history-card__thumb::after {
    content: "▶";
    left: 5px;
    bottom: 5px;
    padding: 3px 6px;
    font-size: 10px;
}

@media (min-width: 769px) {
    .streamer-page--v2 .history-card {
        grid-template-columns: 168px minmax(0, 1fr);
    }

    .streamer-page--v2 .history-card__thumb {
        width: 168px;
        min-width: 0;
    }

    .streamer-page--v2 .history-card__thumb::after {
        content: "▶ プレビュー";
    }
}

.streamer-page--v2 .history-card__date {
    font-size: 11px;
    margin-bottom: 2px;
}

.streamer-page--v2 .history-card__title {
    font-size: 14px;
    line-height: 1.4;
    max-height: 2.8em;
    margin: 0 0 4px;
}

.streamer-page--v2 .history-card__body .machine-tag {
    padding: 2px 8px;
    font-size: 11px;
}

.streamer-page--v2 .history-card__time {
    margin: 4px 0 0;
    font-size: 11px;
}

.streamer-page--v2 .history-card__actions {
    margin: 2px 0 0;
}

.streamer-page--v2 .history-card__youtube-link {
    font-size: 12px;
    margin-bottom: 0;
}

/* 最高同接だけ残す（「ピーク：開始から…」の2つ目は詳細側で見られる） */
.streamer-page--v2 .history-card__peak {
    margin-top: 4px;
}

.streamer-page--v2 .history-card__peak-item:nth-child(2) {
    display: none;
}

.streamer-page--v2 .history-card__peak-item {
    padding: 2px 8px;
}

/* コメント・参加・スパチャなどは、1行ずつの小さなチップ（スマホのタイル表示は使わない） */
.streamer-page--v2 .history-card__chat {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.streamer-page--v2 .history-card__chat-item {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.streamer-page--v2 .history-card__chat-label {
    font-size: 11px;
}

.streamer-page--v2 .history-card__chat-label i {
    display: none;
}

.streamer-page--v2 .history-card__chat-item strong {
    font-size: 12px;
    line-height: 1.4;
}

/* 詳細（盛り上がり・応援）の開閉は、行の下いっぱいに細く */
.streamer-page--v2 .history-detail {
    grid-column: 1 / -1;
    margin-top: 0;
}

.streamer-page--v2 .history-detail__summary {
    padding: 8px 12px;
    font-size: 12px;
}

/* ---- 行の中身を、縦に積まず横に並べて折り返す（高さを詰める） ---- */
.streamer-page--v2 .history-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.streamer-page--v2 .history-card__date,
.streamer-page--v2 .history-card__title,
.streamer-page--v2 .history-card__chat {
    flex: 0 0 100%;
    margin-top: 0;
}

.streamer-page--v2 .history-card__chat {
    margin-top: 2px;
}

.streamer-page--v2 .history-card__body .machine-tag {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.streamer-page--v2 .history-card__time,
.streamer-page--v2 .history-card__actions,
.streamer-page--v2 .history-card__peak {
    margin: 0;
}

/* スマホ：開始〜終了の時刻は省き、配信の長さだけ残す */
@media (max-width: 768px) {
    .streamer-page--v2 .history-card__time i,
    .streamer-page--v2 .history-card__time-range {
        display: none;
    }
}

/* ---- 履歴の詳細（遅延読み込み）の読み込み中の表示 ---- */
.streamer-page--v2 .history-detail__loading {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--pachi-text-sub);
}

/* ==========================
   LIVE NOW（配信中）をコンパクトにする
   サムネ・タイトル・数字・ボタン・ハイライトを、1画面に収まる高さに詰める。
   ========================== */

.streamer-page--v2 .streamer-live {
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 16px;
}

.streamer-page--v2 .live-now-title {
    font-size: 14px;
    padding: 5px 12px;
    margin: 0 0 10px;
    gap: 6px;
}

.streamer-page--v2 .streamer-live__thumb-btn {
    margin: 0 0 10px;
}

/* 配信タイトルは長いことが多いので、2行までにする（全文はHTMLに残る） */
.streamer-page--v2 .streamer-live h3 {
    font-size: 15px;
    line-height: 1.45;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 視聴者数・高評価は、ラベルと数字を1行に並べた小さなタイルにする */
.streamer-page--v2 .streamer-live__stats {
    gap: 8px;
    margin: 8px 0;
}

.streamer-page--v2 .live-stat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
}

.streamer-page--v2 .live-stat__label {
    display: inline;
    margin: 0;
    font-size: 12px;
}

.streamer-page--v2 .live-stat strong {
    font-size: 18px;
}

.streamer-page--v2 .live-buttons {
    gap: 8px;
}

.streamer-page--v2 .live-buttons .streamer-preview-btn,
.streamer-page--v2 .live-buttons .streamer-btn {
    padding: 9px 16px;
    font-size: 13px;
}

.streamer-page--v2 .streamer-live-layout {
    gap: 12px;
}

/* 配信ハイライト：1項目を1行にして、アイコンも小さくする（配信中・前回の配信どちらも） */
.streamer-page--v2 .streamer-live-highlight .pachi-highlight,
.streamer-page--v2 .streamer-highlight-standalone .pachi-highlight {
    gap: 6px;
}

.streamer-page--v2 .pachi-highlight .timeline-heading {
    margin: 0 0 2px;
    font-size: 14px;
}

.streamer-page--v2 .pachi-highlight-item {
    align-items: center;
    gap: 8px;
}

.streamer-page--v2 .pachi-highlight-item + .pachi-highlight-item {
    padding-top: 6px;
}

.streamer-page--v2 .pachi-highlight-icon {
    width: 22px;
    height: 22px;
    font-size: 10px;
}

.streamer-page--v2 .pachi-highlight-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 8px;
}

.streamer-page--v2 .pachi-highlight-body .pachi-highlight-title {
    font-size: 12px;
}

.streamer-page--v2 .pachi-highlight-time {
    margin: 0;
    font-size: 11px;
}

.streamer-page--v2 .streamer-highlight-standalone {
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 16px;
}

/* スマホ：「10/26 12:31」のような時刻は省き、「開始から○分」だけ残す */
@media (max-width: 768px) {
    .streamer-page--v2 .pachi-highlight-time .pachi-time-absolute {
        display: none;
    }
}

/* ==========================
   投稿動画の帯（動画・ショートの横スクロール）
   ========================== */

.streamer-uploads {
    max-width: 640px;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--pachi-border);
    background: linear-gradient(180deg, var(--pachi-bg-panel), #0d0d18);
}

.streamer-uploads__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.streamer-uploads__head h2 {
    margin: 0;
    font-size: 16px;
    color: #fff;
}

.streamer-uploads__tabs {
    display: flex;
    gap: 6px;
}

.streamer-uploads__tab {
    padding: 4px 12px;
    border: 1px solid var(--pachi-border);
    border-radius: 999px;
    background: transparent;
    color: var(--pachi-text-sub);
    font-size: 12px;
    cursor: pointer;
}

.streamer-uploads__tab.is-active {
    border-color: rgba(0, 229, 255, .5);
    background: rgba(0, 229, 255, .1);
    color: var(--pachi-cyan);
    font-weight: 700;
}

.streamer-uploads__strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.streamer-uploads__strip[hidden] {
    display: none;
}

.streamer-upload {
    flex: 0 0 156px;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    scroll-snap-align: start;
}

.streamer-uploads__strip--shorts .streamer-upload {
    flex-basis: 96px;
}

.streamer-upload__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--pachi-border);
    border-radius: 8px;
    background: #0d0d18;
}

.streamer-uploads__strip--shorts .streamer-upload__thumb {
    aspect-ratio: 9 / 16;
}

.streamer-upload__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.streamer-upload__thumb::after {
    content: "▶";
    position: absolute;
    left: 5px;
    bottom: 5px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .82);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
}

.streamer-upload__dur {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .82);
    color: #fff;
    font-size: 10px;
    line-height: 1.3;
}

.streamer-upload__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 6px;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
}

.streamer-upload__meta {
    display: block;
    margin-top: 2px;
    color: var(--pachi-text-sub);
    font-size: 11px;
}

/* ==========================
   スマホの上部（ヘッダー・紹介文・カルーセル）を詰めて、LIVE NOW を最初の画面に近づける
   ========================== */

@media (max-width: 768px) {

    /* サイトの固定ヘッダーと配信者のヘッダーの間の余白を詰める
       （Cocoonの本文の上余白12px＋配信者ページの余白12px＝24px → 8px） */
    body.pachi-streamer-v2 #main {
        margin-top: 0;
    }

    .streamer-page--v2 {
        padding-top: 8px;
    }

    /* ① 配信者のヘッダー：アイコンを小さくして、名前・数字を右に並べる */
    .streamer-page--v2 .streamer-hero {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 14px;
        margin-bottom: 12px;
        text-align: left;
    }

    .streamer-page--v2 .streamer-hero__icon img {
        width: 72px;
        height: 72px;
        border-width: 2px;
    }

    .streamer-page--v2 .streamer-hero__content {
        flex: 1;
        min-width: 0;
    }

    .streamer-page--v2 .streamer-hero__content h1 {
        font-size: 1.2rem;
        line-height: 1.3;
    }

    .streamer-page--v2 .streamer-hero__title-row {
        gap: 8px;
        margin: 0 0 6px;
    }

    .streamer-page--v2 .streamer-hero__stats {
        justify-content: flex-start;
        gap: 2px 10px;
        margin-bottom: 4px;
    }

    .streamer-page--v2 .streamer-hero__stats span {
        font-size: 12px;
    }

    .streamer-page--v2 .streamer-hero__check-since {
        font-size: 11px;
        text-align: left;
    }

    /* ② 紹介文：2行に切り詰める（全文はHTMLに残る。「続きを見る」で開く） */
    .streamer-page--v2 .streamer-intro {
        padding: 10px 14px;
        margin-bottom: 12px;
    }

    .streamer-page--v2 .streamer-intro p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin: 0;
        font-size: 12px;
        line-height: 1.7;
    }

    .streamer-page--v2 .streamer-intro.is-open p {
        display: block;
        -webkit-line-clamp: unset;
    }

    .streamer-page--v2 .streamer-intro__more {
        display: block;
        margin: 4px 0 0 auto;
        padding: 2px 0;
        border: 0;
        background: none;
        color: var(--pachi-cyan);
        font-size: 12px;
        cursor: pointer;
    }

    /* ③ 新着記事のカルーセル（Cocoonの機能）は、スマホの配信者ページでは隠す。
       Cocoonの設定は変えず、ほかのページのカルーセルはそのまま */
    body.pachi-streamer-v2 #carousel {
        display: none;
    }
}