/* The mobile app shell is independent of the desktop Watch layout. */
.brand .brand-symbol,.top-tabs svg,.mobile-feed-tabs,.mobile-nav,.mobile-only,.mobile-live-slot,#mobile-game-filters,#mobile-followed-section,#mobile-clips-feed{display:none}
.top-tabs button{display:flex;align-items:center;gap:8px}
.mobile-media-wrap{display:contents}

@media(max-width:760px) and (pointer:coarse){
  :root{--header:calc(52px + env(safe-area-inset-top,0px));--sidebar:0px;--mobile-nav-height:calc(56px + env(safe-area-inset-bottom,0px));--mobile-filter-height:44px;--text:#efeff1;--muted:#adadb8;--bg:#0e0e10;--panel:#18181b}
  html{scrollbar-width:none;scroll-padding-top:calc(var(--header) + 12px)}
  body{min-width:280px;background:var(--bg);color:var(--text);font:14px/1.4 Arial,'Segoe UI',sans-serif;-webkit-text-size-adjust:100%}
  .mobile-only{display:block}
  body #creator-sidebar.sidebar,body.sidebar-open #creator-sidebar.sidebar,#sidebar-toggle,.topbar>.brand,.topbar>.top-tabs,.topbar>.creator-link,.sidebar-label,.spotlight-section,#recent-section,#games,.join-creator{display:none!important}
  main,.category-open main{min-width:0;max-width:none;margin:0;padding:calc(var(--header) + 8px) 0 calc(var(--mobile-nav-height) + 16px)}
  .topbar{position:fixed;inset:0 0 auto;z-index:100;display:flex;height:var(--header);padding:env(safe-area-inset-top,0px) 12px 0;gap:6px;border:0;background:#0e0e10}
  .mobile-feed-tabs{display:flex;align-items:stretch;align-self:stretch;gap:19px;min-width:0;margin-right:auto;overflow-x:auto;scrollbar-width:none}
  .mobile-feed-tabs button{position:relative;flex:none;min-height:44px;padding:0;color:#d2d2d6;font-size:15px;font-weight:500;white-space:nowrap}
  .mobile-feed-tabs button[aria-selected='true']{color:var(--yellow);font-weight:700}
  .mobile-feed-tabs button[aria-selected='true']::after{position:absolute;right:0;bottom:9px;left:0;height:2px;background:var(--yellow);content:''}
  body:not([data-watch-view='home']):not([data-watch-view='following']) .mobile-feed-tabs{display:none}
  .topbar .mobile-search-toggle,.topbar .profile-button{display:grid;place-items:center;flex:0 0 36px;width:36px;height:44px;margin:0;padding:0;border:0;border-radius:0;background:none}
  .topbar .mobile-search-toggle{margin-left:auto}
  .topbar .mobile-search-toggle>svg{width:21px;height:21px}
  .topbar .profile-button>svg{width:23px;height:23px}
  .topbar .profile-button>img{width:28px;height:28px;border-radius:50%;object-fit:cover}
  .topbar>.search,.topbar .mobile-search-close{display:none}
  .mobile-search-open .topbar>:is(.mobile-feed-tabs,.profile-button,.mobile-search-toggle){display:none}
  .mobile-search-open .topbar>.search{position:static;display:flex;flex:1;width:auto;min-width:0;max-width:none;height:36px;margin:0;padding:7px 10px;transform:none;border:1px solid #67676e;border-radius:4px;background:#29292e}
  .mobile-search-open .search input{font-size:16px}
  .mobile-search-open .search kbd{display:none}
  .mobile-search-open .topbar .mobile-search-close{display:grid;width:36px;height:44px}

  .mobile-nav{position:fixed;inset:auto 0 0;z-index:110;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;height:var(--mobile-nav-height);padding:2px max(5px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(5px,env(safe-area-inset-left,0px));border-top:1px solid #252528;background:#0e0e10}
  .mobile-nav>:is(button,a){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:52px;margin:0;padding:4px 0;color:#efeff1;font-size:10px;font-weight:600;line-height:1.15}
  .mobile-nav>:is(button,a)>svg{width:23px;height:23px;stroke-width:1.8}
  .mobile-nav>:is(button,a)>img{width:23px;height:23px;border-radius:50%;object-fit:cover}
  .mobile-nav>.active,.mobile-nav>[aria-pressed='true'],.mobile-nav>[aria-current='page']{color:var(--yellow)}
  .mobile-nav>.mobile-nav-create{position:relative;min-height:52px;padding:6px 0}
  .mobile-nav-create>svg{box-sizing:content-box;width:20px!important;height:20px!important;padding:7px 16px;border-radius:22px;background:#29292e}
  .mobile-nav-create>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

  #mobile-game-filters{display:flex;align-items:center;gap:8px;min-width:0;height:var(--mobile-filter-height);margin:-8px 0 10px;padding:0 12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  #mobile-game-filters>button{flex:none;min-height:32px;padding:6px 11px;border-radius:20px;color:#d3d3d8;background:#1f1f23;font-size:12px;font-weight:600;white-space:nowrap}
  #mobile-game-filters>button:is(.active,[aria-pressed='true']){color:#0e0e10;background:var(--yellow)}
  #mobile-followed-section{display:block;margin:0 0 18px;padding:0 10px}
  #mobile-followed-section .section-heading{margin-bottom:9px}
  #mobile-followed-section .section-heading h2{font-size:14px;font-weight:500}
  #mobile-followed-section .section-heading :is(a,button){font-size:12px;color:var(--muted)}
  #mobile-followed-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 6px}
  #mobile-followed-row .side-creator{min-width:0;min-height:41px;padding:5px 6px;gap:6px;border-radius:3px;background:#222226}
  #mobile-followed-row .side-creator>img{width:29px;height:29px;border:0;background:transparent}
  #mobile-followed-row .side-creator>span{min-width:0}
  #mobile-followed-row .side-creator strong{font-size:11px;font-weight:500}
  #mobile-followed-row .side-creator small{margin-top:2px;font-size:10px}
  #mobile-followed-row .channel-state{width:6px;height:6px;flex:0 0 6px}

  .content-section{margin:0;padding:0;border:0}
  #channels{margin:0}
  .channel-section-heading.section-heading{display:none}
  .section-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px}
  .section-heading h2{font:600 17px/1.35 Arial,sans-serif}
  .channel-grid,.recent-row,#category-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:0;overflow:visible}
  .channel-card,.recent-card{width:100%;min-width:0;margin:0}
  .card-image,.recent-image{width:100%;aspect-ratio:16/9;border:0;border-radius:0;background:#000}
  .card-image:hover,.recent-card:hover .recent-image{transform:none;box-shadow:none}
  .card-image>img,.recent-image>img{width:100%;height:100%;object-fit:cover}
  .card-image:hover>img,.recent-card:hover img{transform:none}
  .mobile-media-wrap{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
  .mobile-media-wrap>.card-image{position:absolute;inset:0}
  .mobile-live-slot{position:absolute;inset:0;z-index:3;display:block;pointer-events:none}
  .mobile-live-slot iframe,.mobile-live-slot video{display:block;width:100%;height:100%;border:0;object-fit:contain;pointer-events:auto}
  .card-image .status-badge{top:9px;right:9px;left:auto;padding:2px 6px;font-size:10px}
  .card-image .image-provider{bottom:8px;left:9px;padding:2px 5px;font-size:10px}
  .card-image .hover-play{display:none}
  .card-info{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 10px 19px}
  .card-info .avatar{display:block;width:29px;height:29px;margin-top:1px;border:0;background:transparent}
  .card-info>div{display:flex;flex-direction:column;gap:3px;min-width:0}
  .card-info p{order:-1;margin:0;color:#efeff1;font-size:13px;font-weight:600}
  .card-title{font:400 12px/1.4 Arial,sans-serif;-webkit-line-clamp:2}
  .card-info small{margin:0;color:var(--muted);font-size:11px;line-height:1.4}
  .card-info .quick-follow{width:62px;min-width:62px;min-height:30px;height:auto;padding:5px 9px;border-radius:20px;color:#101012;background:var(--yellow);font-size:0}
  .card-info .quick-follow::before{content:'Follow';font-size:11px;font-weight:700}
  .card-info .quick-follow[aria-pressed='true']{background:#29292e;color:#efeff1}
  .card-info .quick-follow[aria-pressed='true']::before{content:'Following';font-size:10px}
  .recent-copy{margin:0;padding:9px 10px 17px}
  .recent-title{font-size:13px}.recent-creator{font-size:12px}.recent-provider{font-size:11px}
  body[data-watch-view='home'][data-home-tab='live'] #clips{display:none}

  /* Clips occupy their own scroll surface between the fixed bars. */
  body[data-watch-view='home'][data-home-tab='clips']{overflow:hidden}
  body[data-watch-view='home'][data-home-tab='clips'] #mobile-game-filters{position:fixed;top:var(--header);right:0;left:0;z-index:50;margin:0;background:#0e0e10}
  body[data-watch-view='home'][data-home-tab='clips'] #clips{position:fixed;inset:calc(var(--header) + var(--mobile-filter-height)) 0 var(--mobile-nav-height);margin:0;padding:0}
  body[data-watch-view='home'][data-home-tab='clips'] #clips>.section-heading,body[data-watch-view='home'][data-home-tab='clips'] #clips-row,body[data-watch-view='home'][data-home-tab='clips'] #clips-empty{display:none}
  #mobile-clips-feed{position:fixed;inset:calc(var(--header) + var(--mobile-filter-height)) 0 var(--mobile-nav-height);display:block;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scrollbar-width:none;background:#000}
  .mobile-clip-card{position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;isolation:isolate;scroll-snap-align:start;scroll-snap-stop:always;background:#000}
  .mobile-clip-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .mobile-clip-card::after{position:absolute;inset:45% 0 0;z-index:2;pointer-events:none;background:linear-gradient(transparent,#0004 50%,#000c);content:''}
  .mobile-clip-slot{position:absolute;inset:0;z-index:1}
  .mobile-clip-slot :is(iframe,video){display:block;width:100%;height:100%;border:0;object-fit:contain;pointer-events:auto}
  .mobile-clip-slot::before,.mobile-clip-slot::after{position:absolute;top:0;bottom:0;z-index:2;width:16px;content:''}
  .mobile-clip-slot::before{left:0}.mobile-clip-slot::after{right:0}
  .mobile-clip-meta{position:absolute;right:61px;bottom:22px;left:13px;z-index:4;display:grid;gap:7px;color:#fff;font-size:12px;text-shadow:0 1px 4px #000}
  .mobile-clip-meta :is(h2,h3,strong){margin:0;font-size:14px;font-weight:600;line-height:1.35}
  .mobile-clip-meta>:is(p,span,small){margin:0;font-size:12px;line-height:1.45}
  .mobile-clip-meta :is(h2,h3,p){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .mobile-clip-meta .platform-icon{display:inline-block;width:13px;height:13px;margin-right:5px;vertical-align:-2px}
  .mobile-clip-actions{position:absolute;right:7px;bottom:18px;z-index:5;display:flex;flex-direction:column;gap:13px}
  .mobile-clip-actions :is(a,button){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:44px;min-height:44px;padding:4px 0;border-radius:50%;color:#fff;background:#1115;font-size:9px;text-shadow:0 1px 3px #000}
  .mobile-clip-actions svg{width:24px;height:24px}
  .mobile-clip-actions>button{font-size:20px}
  .mobile-clip-actions>.mobile-clip-open{font-size:10px}
  .mobile-clips-empty{display:grid;place-content:center;gap:12px;min-height:100%;padding:28px;text-align:center;color:var(--muted);background:#0e0e10;font-size:13px;line-height:1.6}
  .mobile-clips-empty h2{color:#efeff1;font-size:21px;line-height:1.3}
  #clips-empty{display:grid;place-content:center;min-height:160px;margin:0;padding:24px;border:0;text-align:center;background:#0e0e10;color:var(--muted)}
  body[data-home-tab='clips'] #clips-empty{position:absolute;inset:0}

  /* Browse keeps the real search, tabs, and select in a compact app header. */
  body[data-watch-view='browse']:not(.category-open) .topbar{display:none}
  body[data-watch-view='browse']:not(.category-open) main{padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(var(--mobile-nav-height) + 18px)}
  .directory-view{display:grid;grid-template-columns:minmax(0,1fr) 40px;column-gap:8px;row-gap:20px}
  .directory-view>.watch-page-heading,.directory-topics{display:none}
  .directory-tools{display:contents}
  .directory-search{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:9px;width:100%;height:36px;margin:0;padding:6px 10px;border:1px solid transparent;border-radius:4px;background:#303035}
  .directory-search>svg{flex:none;width:20px;height:20px}
  .directory-search>input{width:100%;min-width:0;height:25px;padding:0;border:0;outline:0;color:#efeff1;background:transparent;font-size:16px}
  .directory-search>input::placeholder{color:#b5b5be;font-size:13px}
  .directory-search:focus-within{border-color:var(--yellow)}
  .directory-tabs{grid-column:1;grid-row:2;display:flex;align-items:stretch;gap:21px;min-width:0;min-height:40px;margin:-5px 0 0;padding:0;overflow-x:auto;border:0;scrollbar-width:none}
  .directory-tabs>button{position:relative;flex:none;min-height:40px;padding:0 0 10px;white-space:nowrap;font-size:12px;font-weight:600}
  .directory-tabs>button[aria-selected='true']{color:var(--yellow)}
  .directory-tabs>button[aria-selected='true']::after{position:absolute;inset:auto 0 0;height:2px;background:var(--yellow);content:''}
  #directory-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .directory-sort{position:relative;grid-column:2;grid-row:2;width:40px;height:40px;margin-top:-5px}
  .directory-sort>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .directory-sort::before{position:absolute;top:10px;left:10px;width:20px;height:13px;border-top:1.5px solid;border-bottom:1.5px solid;background:linear-gradient(currentColor,currentColor) center/20px 1.5px no-repeat;content:''}
  .directory-sort::after{position:absolute;top:8px;left:15px;width:3px;height:5px;border-radius:1px;background:currentColor;box-shadow:7px 6px 0 currentColor,-1px 13px 0 currentColor;content:''}
  .directory-sort select{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;cursor:pointer;opacity:0;font-size:16px}
  .directory-sort:focus-within{outline:2px solid var(--yellow);outline-offset:2px;border-radius:3px}
  .directory-sort:has(select:disabled){opacity:.35}
  #directory-grid{grid-column:1/-1;grid-row:3}
  .directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px;margin:0;padding:0}
  .directory-grid .game-card{width:100%;min-width:0;padding:0}
  .directory-grid .game-card>span{aspect-ratio:3/4;border:0;border-radius:0}
  .directory-grid .game-card>span::after{display:none}
  .directory-grid .game-card img{width:100%;height:100%;object-fit:cover}
  .directory-grid .game-card strong{display:-webkit-box;margin-top:6px;overflow:hidden;color:#efeff1;font:600 11px/1.3 Arial,sans-serif;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .directory-grid .game-card small{display:block;margin-top:3px;color:#adadb8;font-size:10px;line-height:1.35}
  .directory-grid .game-card:hover>span,.directory-grid .game-card:hover img{transform:none;box-shadow:none}
  #directory-grid.channel-grid{margin-right:-12px;margin-left:-12px}
  #directory-empty{grid-column:1/-1;grid-row:4}

  .watch-page-heading{margin:0 0 18px;font:600 25px/1.2 Arial,sans-serif;letter-spacing:-.4px}
  .following-view,.activity-view,.category-view{padding:4px 12px 0}
  .following-header{margin:0 0 15px}
  .following-header .watch-page-heading{display:none}
  .following-note,#activity-note{color:var(--muted);font-size:11px;line-height:1.5}
  .following-tabs,.category-tabs{display:flex;gap:21px;min-height:40px;margin:0 0 19px;padding:0;overflow-x:auto;border-bottom:1px solid #303032;scrollbar-width:none}
  .following-tabs>button,.category-tabs>button{position:relative;flex:none;min-height:40px;padding:0 0 11px;font-size:12px;font-weight:600;white-space:nowrap}
  .following-tabs>button[aria-selected='true'],.category-tabs>button[aria-selected='true']{color:var(--yellow)}
  .following-tabs>button[aria-selected='true']::after{position:absolute;inset:auto 0 0;height:2px;background:var(--yellow);content:''}
  .following-section{margin-bottom:24px}
  .following-section .section-heading h2{font-size:16px}
  .following-channel-list{display:grid;grid-template-columns:minmax(0,1fr);gap:15px}
  .following-channel-list .channel-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:start}
  .following-channel-list .card-info{gap:4px;min-width:0;padding:0}
  .following-channel-list .card-info .avatar{display:none}
  .following-channel-list .card-info p{font-size:12px}
  .following-channel-list .card-title{font-size:11px}
  .following-channel-list .card-info small{font-size:10px}
  .following-channel-list .card-info .quick-follow{width:28px;min-width:28px;min-height:28px;padding:0;background:none;color:var(--yellow)}
  .following-channel-list .quick-follow::before{content:'+';font-size:20px}
  .following-channel-list .quick-follow[aria-pressed='true']::before{content:'✓';font-size:17px}
  .following-channel-list .card-image .image-provider{display:none}
  .following-channel-list .card-image .status-badge{top:4px;right:4px;font-size:8px}
  .category-back{min-height:36px;padding:0;font-size:12px}
  .category-hero{gap:14px;margin:13px 0 22px}
  .category-hero>img{width:78px}
  .category-hero h1{margin-bottom:8px;font-size:24px}
  .category-hero p:not(.eyebrow){font-size:12px;line-height:1.5}
  #category-grid{margin-right:-12px;margin-left:-12px}
  #category-grid .card-info .avatar{display:block}
  #category-grid .card-title{font-size:12px}
  .activity-list{display:grid;gap:18px;margin-top:22px}
  .activity-item{display:grid;grid-template-columns:83px minmax(0,1fr) 14px;gap:10px;align-items:start}
  .activity-item>img{width:83px;height:48px;border-radius:2px;object-fit:cover}
  .activity-copy{display:grid;gap:4px;min-width:0}
  .activity-copy strong{display:-webkit-box;overflow:hidden;color:#efeff1;font-size:12px;font-weight:500;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .activity-copy>span,.activity-copy small{color:var(--muted);font-size:10px;line-height:1.4}
  .activity-open{color:var(--muted);font-size:16px}
  .directory-empty,.category-empty,.empty-state{margin:16px 12px;padding:24px 16px;border:1px solid #303032;border-radius:4px;color:var(--muted);background:#18181b;font-size:13px;line-height:1.6}
  .directory-empty h2,.directory-empty h3,.empty-state h3{margin-bottom:9px;color:#efeff1;font-size:20px;line-height:1.3}
  .following-view .directory-empty,.directory-view .directory-empty,.activity-view .directory-empty{margin-right:0;margin-left:0}
  .feed-notice{margin:0 12px 12px;padding:10px 12px;color:var(--muted);background:#18181b;font-size:12px;line-height:1.5}
  body[data-home-tab='clips'] #feed-notice{position:fixed;top:calc(var(--header) + var(--mobile-filter-height) + 8px);right:0;left:0;z-index:60}
  .toast{right:12px;bottom:calc(var(--mobile-nav-height) + 12px);left:12px;width:max-content;max-width:calc(100vw - 24px);margin:auto;transform:none;font-size:12px}
  footer{display:none}
}
@media(max-width:350px) and (pointer:coarse){
  .topbar{padding-right:8px;padding-left:8px;gap:2px}
  .mobile-feed-tabs{gap:13px}.mobile-feed-tabs button{font-size:14px}
  .topbar .mobile-search-toggle,.topbar .profile-button{flex-basis:32px;width:32px}
  .directory-grid{column-gap:9px}
  .following-channel-list .channel-card{grid-template-columns:94px minmax(0,1fr);gap:8px}
}
@media(min-width:761px){
  .mobile-only,.mobile-live-slot,#mobile-game-filters,#mobile-followed-section,#mobile-clips-feed{display:none!important}
}

@media(max-width:760px) and (pointer:coarse){
 body[data-watch-view="activity"] .topbar{display:none}
 body[data-watch-view="activity"] main{padding-top:calc(16px + env(safe-area-inset-top,0px))}
 #activity-title{text-align:center;font:600 17px/1.4 Arial,sans-serif;margin:0 0 22px}
 #activity-note{padding-bottom:14px;border-bottom:1px solid #242428}
 .activity-view .directory-empty{background:none;border:0;text-align:center;margin-top:60px}
 .activity-list .activity-item{padding-bottom:16px;border-bottom:1px solid #242428}
}