/* V.20.4: mobile channel selectors, three-across focus row and gentler motion. */
.page-shell,.header-inner{max-width:1808px}
.stream-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;isolation:isolate}
.stream-card{--video-height:300px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#141416;border:1px solid #36363b;border-radius:7px;scroll-margin-top:88px;transition:border-color .5s cubic-bezier(.4,0,.2,1),box-shadow .5s cubic-bezier(.4,0,.2,1)}
.stream-card.is-selected{--video-height:clamp(340px,43vw,600px);grid-column:1/-1;order:-1;border-color:#c7c7cc;box-shadow:0 0 0 1px #c7c7cc;z-index:2}
.stream-media{height:var(--video-height);min-height:0;flex:1 1 auto;position:relative;background:#000;overflow:hidden}
.stream-player{height:100%;width:100%;position:absolute;inset:0;background:#000}
.stream-player iframe{display:block;width:100%;height:100%;border:0;pointer-events:auto}
.stream-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:#000;padding:28px 16px}
.stream-placeholder img{width:150px;height:165px;max-width:65%;max-height:68%;object-fit:contain;opacity:.85;filter:none}
.stream-placeholder.is-selectable{cursor:pointer;touch-action:manipulation}
.stream-placeholder.is-selectable:focus-visible{outline:3px solid #fff;outline-offset:-4px}
.placeholder-label{font:9px var(--mono);letter-spacing:1.2px;color:#a2a2a7;text-align:center}
.stream-caption{flex:0 0 70px;padding:12px 15px;min-width:0}
.stream-caption .avatar{background:#000;width:40px;height:40px}
.stream-name strong{font-size:12px}
.stream-name>span{font-size:10px}
.stream-state{margin-left:auto;flex-shrink:0;max-width:100px;font:9px var(--mono);color:#a2a2a7;text-align:right;line-height:1.4}
.stream-state[data-state=live]{color:#f3f3f2}
.stream-state[data-state=live]::before{content:"";display:inline-block;width:5px;height:5px;background:#eee;border-radius:50%;margin-right:6px;vertical-align:middle}
.stream-actions{flex:0 0 44px;grid-template-columns:1fr 1fr 1fr}
.stream-actions a,.stream-actions button{display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 5px;min-height:44px;font-size:11px;background:transparent;color:#b9b9c2;transition:background .18s ease,color .18s ease}
.stream-actions>:not(:first-child){border-left:1px solid #303035}
.stream-actions button:hover,.stream-actions a:hover{background:#2a2a30;color:#fff}
/* V.20.11: the same Select toggle styling on desktop and mobile. */
.stream-actions .stream-enlarge{font-weight:400}
.stream-actions .stream-enlarge[aria-pressed=true]{color:#fff;background:#66666d;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.stream-actions .stream-enlarge:focus-visible{outline:2px solid #e8e8eb;outline-offset:-3px}
.stream-actions .icon{width:13px;height:13px}
.stream-notice{flex:0 0 40px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;border-top:1px solid #252529;font-size:9px;line-height:1.45;color:#929299}
.stream-notice>a{display:flex;align-items:center;gap:5px;flex-shrink:0;min-height:27px;color:#b8b8c2}
.stream-notice>a:hover{color:#fff}
.stream-notice .icon{width:12px;height:12px}
.stream-footnote{font-size:10px;line-height:1.7;max-width:1050px}
.stream-grid.is-animating>.stream-card{position:absolute;will-change:left,top,width,height}
.stream-grid.is-animating .stream-media{flex-shrink:1}
/* Every desktop focus layout is the selected stream followed by one row of
   three. Undersized secondary cells remain honest channel selectors. */
@media(min-width:888px){.stream-grid.has-focus{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:888px) and (max-width:1285px){.stream-grid.has-focus>.stream-card:not(.is-selected){--video-height:180px}}
@media(min-width:1730px){.stream-grid:not(.has-focus){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:887px){
 .stream-grid{gap:12px}
 .stream-card{--video-height:clamp(105px,24vw,185px)}
 .stream-card.is-selected{--video-height:clamp(300px,54vw,450px)}
 .stream-caption{flex-basis:65px;padding:10px 9px;gap:8px}
 .stream-name strong{font-size:10px}
 .stream-name>span{font-size:8px}
 .stream-state{font-size:8px;max-width:70px}
 .stream-placeholder{gap:10px;padding:12px}
 .stream-placeholder img{width:100px;height:100px}
 .placeholder-label{font-size:7px;letter-spacing:.7px}
 .stream-card.is-selected .stream-placeholder img{width:145px;height:165px}
 .stream-actions a,.stream-actions button{font-size:10px;gap:5px}
 .stream-actions .icon{width:11px;height:11px}
 .stream-notice{font-size:8px;padding:6px 9px}
}
@media(max-width:520px){
 .stream-grid{gap:10px;margin-inline:-16px}
 .stream-caption{position:relative;align-items:flex-start;flex-basis:76px;padding:10px 8px 23px;gap:7px}
 .stream-caption .avatar{width:30px;height:30px}
 .stream-name strong{font-size:9px;line-height:1.4}
 .stream-state{position:absolute;left:8px;bottom:8px;text-align:left;max-width:none;font-size:7px}
 .stream-actions{flex-basis:88px;grid-template-columns:1fr 1fr}
 .stream-actions a{font-size:9px}
 .stream-actions .stream-enlarge{grid-column:1/-1;border-top:1px solid #303035;border-left:0;font-size:10px}
 .stream-notice{flex-basis:42px;align-items:center}
 .stream-notice>a>span{display:none}
 .stream-notice>a{min-width:24px;min-height:30px;justify-content:center}
 .stream-card.is-selected .stream-caption{flex-basis:70px;align-items:center;padding:12px 14px}
 .stream-card.is-selected .stream-state{position:static;margin-left:auto;font-size:9px}
 .stream-card.is-selected .stream-name strong{font-size:12px}
 .stream-card.is-selected .stream-name>span{font-size:9px}
 .stream-card.is-selected .stream-actions{grid-template-columns:1fr 1fr 1fr;flex-basis:44px}
 .stream-card.is-selected .stream-enlarge{grid-column:auto;border-top:0;border-left:1px solid #303035}
 .stream-card.is-selected .stream-notice>a>span{display:inline}
 .stream-card.is-selected .stream-placeholder{padding:25px}
 /* Use the entire phone width. A 400px screen can meet Twitch's 400px minimum
    without losing two pixels to the card border. Narrower phones show rotate. */
 .stream-card.is-selected{border-left:0;border-right:0;border-radius:0;box-shadow:0 0 0 1px #c7c7cc inset}
}
@media(prefers-reduced-motion:reduce){.stream-actions a,.stream-actions button{transition:none}}

@media(max-width:350px){.stream-grid{margin-inline:-12px}}

.stream-account-note{display:flex;align-items:center;gap:8px;color:#a2a2a7;font-size:10px;line-height:1.6;margin:-3px 0 15px}.stream-account-note strong{color:#d5d5d8;font-weight:600}.stream-account-note>.icon{width:14px;height:14px;flex-shrink:0}
@media(max-width:520px){.stream-account-note{font-size:9px;margin-top:0;margin-bottom:14px;align-items:flex-start}.stream-account-note>.icon{margin-top:2px}}

/* V.20.7: browser scroll anchoring must not track a card as it moves. */
@media(min-width:888px){.streams-section,.stream-grid{overflow-anchor:none}}

/* V.20.9: verified Twitch online indicators on MOBILE ONLY.
   The existing desktop player status and controls remain unchanged. */
.mobile-live-indicator { display:none }
@media(max-width:887px){
  .stream-state { display:none }
  .mobile-live-indicator {
    display:inline-flex; align-items:center; align-self:flex-start; gap:5px;
    width:max-content; max-width:100%; min-height:16px; margin-top:3px;
    padding:3px 6px; border:1px solid #494952; border-radius:4px;
    background:#222227; color:#b4b4bc; white-space:nowrap;
    font:700 8px/1.1 var(--mono); letter-spacing:.45px;
    text-transform:uppercase;
  }
  .mobile-live-indicator[data-state="live"]{
    color:#ff6973; border-color:#9e303b; background:rgba(154,27,45,.18);
    box-shadow:0 0 10px rgba(241,54,71,.15);
  }
  .mobile-live-indicator[data-state="live"]::before{
    content:"";display:block;width:6px;height:6px;flex:none;
    border-radius:50%;background:#ff3548;box-shadow:0 0 5px rgba(255,53,72,.6);
  }
  .mobile-live-indicator[data-state="offline"]{
    color:#a5a5ad;border-color:#414149;background:#1a1a1d;
  }
  .mobile-live-indicator[data-state="checking"],
  .mobile-live-indicator[data-state="unknown"]{
    color:#909099;border-color:#393940;background:#171719;
  }
  .stream-caption { min-height:75px }
  .stream-card.is-selected .stream-caption { min-height:75px }
}
@media(max-width:520px){
  .mobile-live-indicator { font-size:7px; padding:3px 5px; gap:4px; min-height:15px; }
  .stream-card.is-selected .mobile-live-indicator { font-size:8px }
  .stream-caption { min-height:83px }
  .stream-card.is-selected .stream-caption { min-height:83px }
}
@media(max-width:350px){
  .mobile-live-indicator { font-size:7px; letter-spacing:.1px; padding-inline:4px }
}

/* V.20.10: a full-width vertical stream wall on mobile only.
   Keep Twitch's controls uncovered; never enlarge/crop a player beyond the phone.
   Every eligible card requests muted autoplay, subject to Twitch/browser rules. */
.mobile-status-note{display:none}
@media(max-width:887px){
  .stream-grid,.stream-grid.has-focus{grid-template-columns:minmax(0,1fr);gap:18px}
  .stream-card{--video-height:clamp(300px,56.25vw,450px)}
  .stream-card.is-selected{order:0;--video-height:clamp(300px,62vw,480px)}
  .stream-caption,.stream-card.is-selected .stream-caption{
    flex-basis:82px;min-height:82px;padding:12px 14px;gap:10px;align-items:center;
  }
  .stream-caption .avatar{width:40px;height:40px;flex-shrink:0}
  .stream-name{min-width:0}
  .stream-name strong,.stream-card.is-selected .stream-name strong{font-size:12px;line-height:1.4}
  .stream-name>span,.stream-card.is-selected .stream-name>span{font-size:10px}
  .stream-name>.mobile-live-indicator,.stream-card.is-selected .stream-name>.mobile-live-indicator{
    font-size:9px;padding:3px 6px;min-height:17px;
  }
  .stream-actions,.stream-card.is-selected .stream-actions{grid-template-columns:1fr 1fr 1fr;flex-basis:46px}
  .stream-actions a,.stream-actions button{font-size:11px;min-height:46px}
  .stream-actions .stream-enlarge,.stream-card.is-selected .stream-enlarge{grid-column:auto;border-top:0;border-left:1px solid #303035}
  .stream-placeholder img,.stream-card.is-selected .stream-placeholder img{width:150px;height:165px}
  .placeholder-label{font-size:9px;line-height:1.5}
  .stream-notice{flex-basis:46px;font-size:10px;padding:8px 12px}
  .stream-notice>a{min-height:30px}
  .stream-notice>a>span{display:inline}
  .mobile-status-note:not([hidden]){display:block;color:#a2a2a7;font-size:10px;line-height:1.6;margin-top:8px}
  .streams-section,.stream-grid{overflow-anchor:none}
}
@media(max-width:520px){
  /* Full viewport width at the existing edge-to-edge mobile breakpoint. */
  .stream-card{border-left:0;border-right:0;border-radius:0}
  .stream-card.is-selected{box-shadow:0 0 0 1px #c7c7cc inset}
}