/* Keep keyboard focus visible inside the clipped information panel. */
a.feature-details:focus-visible{outline-offset:-2px}
/* Desktop carousel geometry measured from the Twitch browse carousel.
   Player 530 x 300; creator panel 220; side offsets (canvas - card)/4 and /2.
   The whole deck stays centered in the content area independently of the rail. */
@media (min-width:761px), (hover:hover) and (pointer:fine) {
  body.sidebar-open{--sidebar:240px}
  body main{min-width:0;margin-left:var(--sidebar);transition:margin-left .24s ease}
  body .sidebar{transition:width .24s ease;box-shadow:none}
  .spotlight-section{container-type:inline-size;padding:16px 24px 0;min-height:350px;overflow:hidden}
  .deck-stage{
    --canvas-width:100%;
    --video-width:530px;
    --details-width:220px;
    --face-width:calc(var(--video-width) + var(--details-width));
    --near:calc((var(--canvas-width) - var(--face-width)) / 4);
    --far:calc((var(--canvas-width) - var(--face-width)) / 2);
    --player-height:300px;
  }
  .deck-stage{height:var(--player-height);max-height:none;width:100%;max-width:2000px;margin:0 auto}
  /* Pixel geometry comes from the stage ResizeObserver. Updating concrete
     transform distances lets resize and navigation use the same interpolation. */
  .feature-slide{left:calc(50% - var(--face-width) / 2);top:0;width:var(--face-width);min-width:0;max-width:none;height:var(--player-height);aspect-ratio:auto;transform-origin:center;transition:transform .45s ease,left .45s ease,width .45s ease,opacity .45s ease,filter .3s}
  .deck-stage.is-changing .feature-slide,.feature-slide.is-wrapping{transition:transform .45s ease,left .45s ease,width .45s ease,opacity .45s ease,filter .3s!important}
  .deck-stage .feature-slide.is-edge-enter{transition:none!important;opacity:0!important;pointer-events:none}
  .feature-slide.is-edge-exit{opacity:0!important;z-index:0;pointer-events:none}
  .feature-slide.is-motion-copy{pointer-events:none}
  .feature-face{display:grid;grid-template-columns:530px 220px;height:100%;overflow:hidden;transition:opacity .2s ease}
  .feature-media{width:100%;min-width:0;height:var(--player-height);aspect-ratio:auto}
  .feature-details{display:flex;box-sizing:border-box;min-width:0;overflow:hidden;padding:14px 0;opacity:1}
  .feature-details>*{width:calc(100% - 28px);min-width:0;margin-left:14px;margin-right:14px;flex-shrink:0}
  .feature-identity>div{min-width:0;overflow:hidden}
  .feature-identity h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .deck-neighbor{inset:0;width:100%;height:var(--player-height);max-width:none;transform:none}
  .deck-neighbor>img{width:100%;height:100%;object-fit:cover}
  .feature-slide[data-offset='0']{transform:scale(1);filter:none;opacity:1}
  /* Keep the canvas and card-relative translations separate. As the card
     opens from 530 to 750px, its percentage translation follows that width. */
  .feature-slide[data-offset='-1']{transform:translateX(calc(var(--canvas-width) / -4)) translateX(25%) scale(.85)}
  .feature-slide[data-offset='1']{transform:translateX(calc(var(--canvas-width) / 4)) translateX(-25%) scale(.85)}
  .feature-slide[data-offset='-2']{transform:translateX(calc(var(--canvas-width) / -2)) translateX(50%) scale(.7)}
  .feature-slide[data-offset='2']{transform:translateX(calc(var(--canvas-width) / 2)) translateX(-50%) scale(.7)}
  .feature-slide[data-offset='-3']{transform:translateX(calc(var(--canvas-width) * -.75)) translateX(75%) scale(.55)}
  .feature-slide[data-offset='3']{transform:translateX(calc(var(--canvas-width) * .75)) translateX(-75%) scale(.55)}
  /* Browse controls share the stage bounds. The sponsored-banner inset is
     deliberately not used: it moves controls independently from this stack. */
  .spotlight-nav{position:absolute;top:16px;left:50%;width:calc(100% - 48px);max-width:2000px;height:300px;box-sizing:border-box;transform:translateX(-50%);margin:0;padding:0;transition:none;display:block;pointer-events:none;z-index:12}
  .spotlight-nav :is(#feature-prev,#feature-next){display:flex;align-items:center;justify-content:center;position:absolute;top:50%;width:36px;height:36px;padding:6px;transform:translateY(-50%);z-index:12;background:transparent;border:0;color:#efeff1;border-radius:50%;pointer-events:auto;isolation:isolate}
  .spotlight-nav :is(#feature-prev,#feature-next)::before,.spotlight-nav :is(#feature-prev,#feature-next)::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
  .spotlight-nav :is(#feature-prev,#feature-next)::before{border-radius:6px;background:transparent}
  .spotlight-nav.is-compact :is(#feature-prev,#feature-next)::before{background:#0e0e10}
  .spotlight-nav :is(#feature-prev,#feature-next)::after{border-radius:50%;background:transparent}
  .spotlight-nav #feature-prev{left:0;right:auto}
  .spotlight-nav #feature-next{right:0;left:auto}
  .spotlight-nav :is(#feature-prev,#feature-next):hover{background:transparent}
  .spotlight-nav :is(#feature-prev,#feature-next):hover::after{background:#ffffff33}
  .spotlight-nav button>svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
  .spotlight-nav button:disabled{opacity:.35;cursor:default}
  .spotlight-nav button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
  .deck-stage.is-compact .feature-details{display:flex}

}
/* A narrow mouse-driven browser remains a desktop feed, rather than switching to the touch app. */
@media(max-width:760px) and (hover:hover) and (pointer:fine){
  body{--sidebar:50px;--header:50px;min-width:320px}
  body.sidebar-open{--sidebar: min(240px,35vw)}
  body main,body.category-open main{margin-left:var(--sidebar);padding:74px 16px 40px}
  body .topbar{height:50px;padding:0 10px;gap:12px;flex-wrap:nowrap}
  body .topbar>.brand{display:block;flex:none}
  body .brand img{width:90px;height:24px}
  body .topbar>.top-tabs{display:flex;height:50px;margin:0;gap:12px}
  body .top-tabs button{font-size:13px}
  body .topbar>.search{position:static;display:flex;flex:1;min-width:40px;max-width:300px;width:auto;height:32px;margin:0 0 0 auto;transform:none}
  body .search kbd{display:none}
  body .profile-button{flex:0 0 32px;width:32px;height:32px;margin:0;padding:4px}
  body .topbar .creator-link,body .mobile-only,body .mobile-nav,body .mobile-feed-tabs,body .mobile-search-toggle,body .mobile-search-close{display:none}
  body #sidebar-toggle{display:flex;position:fixed;top:58px;left:calc(var(--sidebar) - 38px);width:30px;height:30px}
  body #sidebar-toggle .toggle-desktop{display:block}
  body:not(.sidebar-open) #sidebar-toggle .toggle-desktop{transform:rotate(180deg);transform-origin:center}
  body #sidebar-toggle .toggle-mobile{display:none}
  body #creator-sidebar.sidebar{display:flex;top:50px;width:var(--sidebar);max-width:none;padding:8px 10px 18px;box-shadow:none}
  body .sidebar-top{display:flex;height:34px}
  body .sidebar .side-home{display:none}
  body:not(.sidebar-open) .sidebar-top strong{visibility:hidden}
  body:not(.sidebar-open) #creator-sidebar :is(.side-category>span,.side-creator>span,.sidebar-hint,.sidebar-more,.sidebar-bottom,.side-heading h2){display:none}
  body:not(.sidebar-open) #creator-sidebar .side-section-icon{display:grid}
  body #creator-sidebar .side-creator{padding:7px 0}
  body #creator-sidebar :is(#side-categories,#side-creators){margin-top:0}
  body.sidebar-open #creator-sidebar .side-category>span{display:inline}
  body.sidebar-open #creator-sidebar .side-creator>span{display:block}
  body .spotlight-section{margin:-24px -16px 0;padding:16px 24px 0}
  body .spotlight-section:not([hidden]){display:block}
  body .channel-grid,body .recent-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));overflow:visible}
  body .channel-card,body .recent-card{min-width:0}
  body.watch-channel-active #main{margin-left:var(--sidebar)}
  body.watch-channel-mini #watch-channel-viewer{left:calc(var(--sidebar) + 16px);max-width:calc(100vw - var(--sidebar) - 32px);bottom:calc(24px + var(--watch-guest-bar-height,0px))}
  body .watch-join-strip{bottom:0}
  body[data-watch-auth=guest]{--watch-guest-bar-height:48px}
  body[data-watch-auth=guest] main{padding-bottom:72px}
  body[data-watch-auth=guest] #creator-sidebar{bottom:48px}
}
/* The profile control is a circular avatar, including its hover target. */
body[data-watch-auth] .topbar .profile-button,
body[data-watch-auth] .topbar .profile-button[data-watch-avatar-kind],
body[data-watch-theme][data-watch-auth] .topbar .profile-button:hover{position:relative;display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text);box-shadow:none}
body[data-watch-auth] .topbar .profile-button:not([data-watch-avatar-kind=image])::before{content:'';position:absolute;inset:5px;border-radius:50%;background:transparent;pointer-events:none}
body[data-watch-auth=member] .topbar .profile-button:not([data-watch-avatar-kind=image])::before{background:#ffd000}
body[data-watch-auth] .topbar .profile-button:not([data-watch-avatar-kind=image])>svg.watch-avatar-fallback{position:relative;width:20px;height:20px;margin:0;color:inherit;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body[data-watch-auth=member] .topbar .profile-button:not([data-watch-avatar-kind=image])>svg.watch-avatar-fallback{color:#fff}
body[data-watch-theme][data-watch-auth]:not([data-watch-auth=member]) .topbar .profile-button:hover{background:#ffffff22}
body[data-watch-theme=light][data-watch-auth]:not([data-watch-auth=member]) .topbar .profile-button:hover{background:#00000014}
body[data-watch-auth] .topbar .profile-button>img{position:relative;width:30px;height:30px;margin:0;border:0;border-radius:50%;object-fit:contain;background:transparent}
/* Navigation icons follow the surrounding surface, rather than video colors. */
body #sidebar-toggle{border-radius:50%;color:var(--text)}
body #sidebar-toggle:hover{background:#ffffff22}
body[data-watch-theme=light] #sidebar-toggle:hover{background:#00000014}
body #creator-sidebar .side-section-icon{color:var(--text)}
body[data-watch-theme=light] .filters img,body[data-watch-theme=light] :is(.feature-details,.recent-provider) .platform-icon{filter:brightness(0);opacity:.9}
body[data-watch-theme=light] .spotlight-nav :is(#feature-prev,#feature-next){color:#18181b}
body[data-watch-theme=light] .spotlight-nav.is-compact :is(#feature-prev,#feature-next)::before{background:#f7f7f8}
body[data-watch-theme=light] .spotlight-nav :is(#feature-prev,#feature-next):hover{background:transparent}
body[data-watch-theme=light] .spotlight-nav :is(#feature-prev,#feature-next):hover::after{background:#00000014}
body:not([data-watch-auth=member]) [data-follow]{display:none!important}
.card-info .follow-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-width:0;height:28px;min-height:28px;padding:4px 8px;font-size:12px;line-height:1;font-weight:600;white-space:nowrap;border-radius:4px}
.card-info .follow-button::before{content:none!important}
.card-info .follow-button[aria-busy=true]{opacity:.6;cursor:wait}
/* Original XFG category illustrations share one size and optical baseline. */
@media(min-width:761px){
  .directory-topics{gap:10px;margin-top:10px;margin-bottom:26px}
  .directory-topic{height:48px;overflow:visible;isolation:isolate;padding-right:64px}
  .directory-topic>span{position:relative;z-index:1}
  .directory-topic>svg.xfg-topic-art{position:absolute;right:2px;top:50%;width:66px;height:62px;max-width:none;flex:none;transform:translateY(-50%);stroke-width:0;overflow:visible;pointer-events:none}
}
@media(min-width:761px) and (max-width:1200px){
  .directory-topic{padding-left:10px;padding-right:50px;font-size:18px}
  .directory-topic>svg.xfg-topic-art{right:0;width:52px;height:54px}
}
@media(min-width:761px) and (max-width:1000px){
  .directory-topics{grid-template-columns:repeat(auto-fit,minmax(138px,1fr));row-gap:20px}
}
@media(prefers-reduced-motion:reduce){body main,body .sidebar,.spotlight-nav,.feature-slide,.deck-stage:not(.is-changing) .feature-slide.is-wrapping{transition:none!important}}

body[data-watch-theme=light] .follow-button.is-following{color:#6d5800;border-color:#8a7300}body[data-watch-theme=light] .follow-button:hover{background:#0000000f}

/* Reserve one avatar position until verified identity and decoded artwork are ready. */
body[data-watch-auth] .topbar .profile-button[data-watch-avatar-state=pending]>svg,
body[data-watch-auth] .topbar .profile-button[data-watch-avatar-state=pending]>img,
.mobile-nav [data-mode=profile][data-watch-avatar-state=pending]>svg,
.mobile-nav [data-mode=profile][data-watch-avatar-state=pending]>img{visibility:hidden}
body[data-watch-auth] .topbar .profile-button[data-watch-avatar-state=pending]::before{content:'';position:absolute;inset:5px;border-radius:50%;background:#ffffff20;pointer-events:none}
body[data-watch-theme=light][data-watch-auth] .topbar .profile-button[data-watch-avatar-state=pending]::before{background:#00000014}

/* Keep the same geometry while real feed data and artwork arrive. */
body{--watch-skeleton:#26262c;--watch-skeleton-line:#323238}
body[data-watch-theme=light]{--watch-skeleton:#dedee3;--watch-skeleton-line:#e5e5e9}
@media(scripting:enabled){body:not([data-watch-initialized=true]) #main{visibility:hidden}}
.spotlight-section.is-loading .spotlight-nav{visibility:hidden}
/* Keep arrow geometry, but remove the empty wrapper from the player's visible area. */
.spotlight-section .spotlight-nav{visibility:hidden}
body[data-watch-initialized=true] .spotlight-section:not(.is-loading) .spotlight-nav :is(#feature-prev,#feature-next):not([hidden]){visibility:visible}
.watch-loading-feature{background:var(--watch-skeleton);border:0;box-shadow:none;pointer-events:none}
.channel-grid.is-loading,.recent-row.is-loading{grid-template-rows:auto;grid-auto-rows:0;row-gap:0;overflow:hidden}
.watch-loading-card{min-width:0;overflow:hidden;pointer-events:none}
.watch-loading-image{width:100%;aspect-ratio:16/9;background:var(--watch-skeleton)}
.watch-loading-info{display:flex;gap:10px;margin-top:10px;height:59px}
.watch-loading-avatar{display:block;flex:none;width:40px;height:40px;border-radius:50%;background:var(--watch-skeleton)}
.watch-loading-lines{flex:1;min-width:0;padding-top:1px}
.watch-loading-lines i{display:block;width:78%;height:12px;margin-bottom:7px;border-radius:2px;background:var(--watch-skeleton-line)}
.watch-loading-lines i:nth-child(2){width:48%;height:9px}
.watch-loading-lines i:nth-child(3){width:32%;height:9px}
.watch-loading-side{display:flex;gap:10px;align-items:center;padding:7px 0;height:44px;overflow:hidden}
.watch-loading-side .watch-loading-avatar{width:30px;height:30px}
.watch-loading-line{display:block;width:105px;height:12px;flex:none;background:var(--watch-skeleton-line);border-radius:2px}
.watch-loading-clip{background:var(--watch-skeleton);pointer-events:none}
.watch-loading-count{display:block!important;width:88px;height:12px;min-height:12px;margin-block:4px;background:var(--watch-skeleton-line);border-radius:2px}
body[data-watch-theme=light] .watch-loading-feature{background:var(--watch-skeleton)}
@media(max-width:760px) and (hover:none) and (pointer:coarse){.watch-loading-info{height:59px}.watch-loading-avatar{width:32px;height:32px}}
/* Pulse only the artwork of a confirmed video while its thumbnail decodes. */
.watch-preview-art{opacity:1;transition:opacity .18s ease}
.watch-art-loading{position:relative;background:var(--watch-skeleton)!important}
.watch-art-loading>.watch-preview-art{opacity:0}
.watch-art-loading::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--watch-skeleton);animation:watch-thumbnail-pulse 1.5s ease-in-out infinite}
@keyframes watch-thumbnail-pulse{0%,100%{background:var(--watch-skeleton)}50%{background:var(--watch-skeleton-line)}}
@media(prefers-reduced-motion:reduce){.watch-art-loading::before{animation:none}.watch-preview-art{transition:none}}
#games.awaiting-video-layout{visibility:hidden;pointer-events:none}