/**
 * Mobile in-page LIVE view.
 * Desktop and tablet layouts intentionally remain untouched.
 */
.gbm-mobile-live-view { display:none; }
.gbm-mobile-live-category-picker { display:none; }

/* Keep the LIVE shell active when a phone rotates to landscape. Without the
 * coarse-pointer landscape branch, common 800-960px phone viewports fall out
 * of the mobile layout while YouTube enters or exits fullscreen. */
@media (max-width:768px), (pointer:coarse) and (max-width:1080px) and (orientation:landscape) {
    body.gbm-test.gbm-view-live .main-content > :not(.gbm-mobile-live-view),
    body.gbm-test.gbm-view-live > footer { display:none !important; }
    body.gbm-test.gbm-view-live .gbm-mobile-live-view { display:block; }
    body.gbm-test.gbm-view-live .container {
        width:100%;
        max-width:none;
        margin:0;
        padding:0;
        gap:0;
    }
    body.gbm-test.gbm-view-live .main-content { width:100%; margin:0; padding:0; }

    .gbm-mobile-live-view { width:100%; height:calc(100dvh - 55px - 68px - env(safe-area-inset-bottom)); min-height:520px; position:relative; margin:0; overflow:hidden; border:0; border-radius:0; background:#0f0f10; }
    .gbm-mobile-live-category-picker { box-sizing:border-box; width:100%; height:44px; padding:4px 8px; position:relative; z-index:6; display:block; border-bottom:1px solid #303033; background:#1b1b1c; }
    .gbm-mobile-live-category-toggle { width:100%; height:36px; padding:0 11px; border:1px solid #3b3b3e; border-radius:8px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#d5d6d9; background:#29292b; font:800 12px/1 Inter,Arial,sans-serif; cursor:pointer; }
    .gbm-mobile-live-category-toggle svg { width:17px; height:17px; flex:0 0 17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
    .gbm-mobile-live-category-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
    .gbm-mobile-live-category-menu { width:auto; max-height:min(62dvh,520px); padding:9px; position:absolute; top:44px; left:7px; right:7px; z-index:5; display:none; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:3px; overflow-y:auto; border:1px solid #3a3a3d; border-radius:0 0 10px 10px; background:rgba(29,29,31,.98); box-shadow:0 18px 45px rgba(0,0,0,.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); scrollbar-width:none; overscroll-behavior:contain; }
    .gbm-mobile-live-category-menu::-webkit-scrollbar { display:none; }
    .gbm-mobile-live-category-menu.is-open { display:grid; }
    .gbm-mobile-live-category-item { width:100%; min-width:0; height:39px; padding:0 6px; border:0; border-radius:7px; display:flex; align-items:center; justify-content:center; gap:5px; overflow:hidden; color:#96979b; background:transparent; font-size:12px; font-weight:800; cursor:pointer; }
    .gbm-mobile-live-category-item:hover,.gbm-mobile-live-category-item:active,.gbm-mobile-live-category-item.active { color:#fff; background:#303033; }
    .gbm-mobile-live-category-item img { width:16px; height:16px; flex:0 0 16px; object-fit:contain; }
    .gbm-mobile-live-category-item span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .gbm-mobile-live-category-backdrop { position:absolute; top:44px; right:0; bottom:0; left:0; z-index:4; display:none; border:0; background:rgba(8,8,9,.43); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
    .gbm-mobile-live-category-backdrop.is-open { display:block; }
    .gbm-mobile-live-frame-viewport { width:100%; height:calc(100% - 44px); position:relative; overflow:hidden; background:#0f0f10; }
    .gbm-mobile-live-frame-viewport > iframe { width:100%; height:calc(100% + 44px); position:relative; top:-44px; border:0; display:block; background:#0f0f10; }
    .gbm-mobile-live-loading { position:absolute; top:44px; right:0; bottom:0; left:0; z-index:3; display:flex; align-items:center; justify-content:center; background:rgba(15,15,16,.38); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); transition:opacity .22s ease,visibility .22s ease; }
    .gbm-mobile-live-loading.is-ready { visibility:hidden; opacity:0; pointer-events:none; }
    .gbm-live-loading-logo { padding:13px 17px; border:1px solid rgba(255,255,255,.09); border-radius:11px; display:flex; align-items:center; background:rgba(18,18,20,.78); box-shadow:0 12px 34px rgba(0,0,0,.3); font:900 30px/1 Inter,Arial,sans-serif; letter-spacing:-1.5px; animation:gbmLiveLogoPulse 1.15s ease-in-out infinite; }
    .gbm-live-loading-logo span { color:#ff5252; }
    .gbm-live-loading-logo b { color:#3399ff; }
    .gbm-live-loading-logo em { margin-left:7px; padding:4px 7px 3px; border-radius:5px; color:#fff; background:#ff4049; font-size:10px; font-style:normal; line-height:1; letter-spacing:.02em; }
    .gbm-mobile-live-head { height:46px; padding:0 13px; display:flex; align-items:center; gap:8px; border-bottom:1px solid #303034; background:#222225; }
    .gbm-mobile-live-head strong { min-width:0; overflow:hidden; color:#ececef; font-size:14px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
    .gbm-mobile-live-head > span:last-child { margin-left:auto; color:#85878d; font-size:10px; font-weight:800; white-space:nowrap; }
    .gbm-mobile-live-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#ff4f58; box-shadow:0 0 8px rgba(255,79,88,.65); }

    .gbm-mobile-live-player { width:100%; aspect-ratio:16/9; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#050506; }
    .gbm-mobile-live-player iframe,.gbm-mobile-live-player video { width:100%; height:100%; border:0; display:block; object-fit:contain; background:#000; }
    .gbm-mobile-live-placeholder { padding:24px; color:#777a80; font-size:12px; font-weight:700; text-align:center; line-height:1.6; }

    .gbm-mobile-live-current { min-height:58px; padding:10px 13px; display:flex; flex-direction:column; justify-content:center; gap:4px; border-bottom:1px solid #303034; background:#1e1e20; }
    .gbm-mobile-live-current[hidden] { display:none; }
    .gbm-mobile-live-current strong,.gbm-mobile-live-current span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .gbm-mobile-live-current strong { color:#f0f0f2; font-size:13px; font-weight:900; }
    .gbm-mobile-live-current span { color:#92949a; font-size:11px; }

    .gbm-mobile-live-list { min-height:150px; background:#18181a; }
    .gbm-mobile-live-item { width:100%; min-width:0; height:72px; padding:8px 11px; border:0; border-bottom:1px solid #29292d; display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:10px; align-items:center; color:inherit; background:transparent; text-align:left; cursor:pointer; }
    .gbm-mobile-live-item.active { background:#27272a; box-shadow:inset 3px 0 #e3484f; }
    .gbm-mobile-live-thumb { width:96px; height:54px; border-radius:6px; display:block; object-fit:cover; background:#09090a; }
    .gbm-mobile-live-copy { min-width:0; }
    .gbm-mobile-live-name,.gbm-mobile-live-title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .gbm-mobile-live-name { color:#e8e8ea; font-size:12px; font-weight:900; }
    .gbm-mobile-live-title { margin-top:5px; color:#898b91; font-size:10px; }
    .gbm-mobile-live-viewers { color:#ff5960; font-size:10px; font-weight:900; white-space:nowrap; }
    .gbm-mobile-live-empty { padding:52px 18px; color:#777a80; font-size:12px; text-align:center; }
}
@keyframes gbmLiveLogoPulse { 0%,100% { opacity:.38; transform:scale(.96); } 50% { opacity:1; transform:scale(1); } }