/* smash_live.css - ライブ配信ページ専用スタイル（Standalone） */

/* ========== 共通レイアウト（video_card.css から独立） ========== */

.no-streams {
    text-align: center;
    padding: 60px 20px;
    color: #606060;
}

/* 1画面あたりの表示件数と視認性のバランス調整 (38%と45%の中間) */
.rsg {
    padding: 11px 0 !important;
    /* 12pxと10pxの中間 */
}

.result-youtube {
    width: 42% !important;
    /* 38%と45%の中間 */
}

.player-name {
    font-size: 19px !important;
    /* 18pxより少し大きくして目立たせる */
}

.live-vtitle {
    font-size: 12.5px !important;
    /* 13pxと12pxの中間 */
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

.stream-meta {
    font-size: 12px !important;
}

/* モバイルでコンテンツが左に寄る問題の修正（はみ出しとの両立） */
@media screen and (max-width: 500px) {

    /* 左側の飛び出しアイコンを少しだけ戻して（-6px）視認性とレイアウトを両立 */
    .platform-tag {
        left: -6px !important;
        top: -6px !important;
        border-radius: 50% !important;
        /* 丸型を維持 */
        width: 30px !important;
        height: 30px !important;
        font-size: 16px !important;
    }

    /* アイコンのはみ出し分を考慮して、コンテナ自体にわずかに余白を追加 */
    .streams-list {
        padding-left: 6px;
    }
}

/* ページ全体：表示件数が少なくても背景（白いエリア）を画面下部まで広げる */
.main {
    min-height: 100vh;
}

/* ページ全体の「はみ出し」によるガタつきを根本的に防ぐ */
html,
body {
    overflow-x: hidden;
}

/* 件数が少ない場合でも、ミニプレイヤー等と被らないようにスクロールの余白を作る */
.streams-list {
    padding-bottom: 200px;
}

/* 無限スクロール用：初期状態で隠すカード */
.stream-wrapper.is-hidden {
    display: none;
}

/* ========== 縦型動画（9:16）時のモーダル調整 ========== */

/* Smash-live ページ専用：ビデオモーダルの上部余白を詰める（他のページは7vhのまま） */
.video-modal {
    padding-top: 1vh !important;
}

/* 縦型時：チャットを非表示（Iframeの再読み込みで白くなるのを防ぐため position で画面外へ） */
.video-wrap:has(#videoFrame.is-vertical) .chat-wrap {
    position: absolute !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* 縦型時：上部パディングを削除して画面を最大限活用 */
.video-modal:has(#videoFrame.is-vertical) {
    padding-top: 0;
}

/* 縦型時：タイトル行を丸ごと非表示 */
.video-wrap:has(#videoFrame.is-vertical) .video-modal-title-row {
    display: none;
}

/* 縦型時：ヘッダー周りの間隔調整 */
.video-wrap:has(#videoFrame.is-vertical) .video-modal-header {
    margin-bottom: 4px;
}

/* ========== Stream Tags (YouTube Like) ========== */
.stream-tags {
    order: 3;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* 横スクロールを有効化 */
    overflow-y: hidden;
    scrollbar-width: none;
    /* Firefox用 */
    -ms-overflow-style: none;
    /* IE/Edge用 */
    gap: 4px;
    margin-top: 1px;
    margin-bottom: 0;
    -webkit-overflow-scrolling: touch;
    /* iOSでの滑らかなスクロール */
}

/* Chrome, Safari用：スクロールバーを非表示にする */
.stream-tags::-webkit-scrollbar {
    display: none;
}

.live-tag {
    background-color: transparent;
    color: #065fd4;
    /* YouTubeのハッシュタグに近い青色 */
    font-size: 12px;
    font-weight: 500;
    padding: 0;
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
}

.live-tag:hover {
    color: #0f0f0f;
    /* ホバー時は濃い色にしてリンクっぽく（今後の拡張用） */
}