/* Desktop theater. The existing touch/mobile viewer is unchanged. */
body.desktop-theater{
 --theater-edge:clamp(28px,3.3vw,64px);
 --theater-feed:min(350px,30vw);
 --theater-pill-width:96px;
 --theater-card-gap:8px;--theater-feed-actions-gap:16px;--theater-composer-gap:12px;
 --theater-top:76px;--theater-bottom:78px;
 --screen:100vw;--screen-height:calc(100dvh - var(--theater-top));
 overflow:hidden;background:#05080c;
}
/* Use the same video-colored ambient treatment as mobile. */
body.desktop-theater:not(.mobile-viewing) .app{height:100dvh;min-height:0}
body.desktop-theater:not(.mobile-viewing) main{position:fixed;inset:0;display:block;min-height:0;isolation:isolate}
body.desktop-theater:not(.mobile-viewing) main>#stage:not(:fullscreen){
 position:absolute;inset:var(--theater-top) 0 0;--player-center:50%;width:100%;height:calc(100% - var(--theater-top));min-height:0;overflow:hidden;z-index:1;
}
body.desktop-theater .wheel{inset:0;perspective:none;mask-image:none;-webkit-mask-image:none}
body.desktop-theater .show-card{
 top:50%;left:50%;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;background:transparent;
 box-shadow:none!important;animation:none!important;will-change:transform,opacity;
}
body.desktop-theater .show-card[data-offset="0"]{transform:translate(-50%,-50%);opacity:1;filter:none}
body.desktop-theater .show-card:not([data-offset="0"]){opacity:0;visibility:hidden;pointer-events:none}
body.desktop-theater .show-card[data-offset="-1"],body.desktop-theater .show-card[data-offset="-2"]{transform:translate(-50%,-56%)}
body.desktop-theater .show-card[data-offset="1"],body.desktop-theater .show-card[data-offset="2"]{transform:translate(-50%,-44%)}
body.desktop-theater.history-overlay-open .show-card[data-offset="0"]{filter:brightness(.42)}
/* Replay keeps navigation, sharing, and feed-card switching available. */
body.desktop-theater.history-overlay-open .app *{pointer-events:none!important}
body.desktop-theater.history-overlay-open .user-shot-overlay,body.desktop-theater.history-overlay-open .user-shot-overlay *{pointer-events:auto!important}
body.desktop-theater.history-overlay-open :is(#stage,#world-nav,#world-nav *,#page-footer,#page-footer *,#share,#live-activity,#live-activity *,#show-history,#show-history *){pointer-events:auto!important}
/* Preserve the complete shot on narrow and ultrawide screens; the ambient canvas fills the margins. */
body.desktop-theater .show-card :is(.poster,video){object-fit:contain;background:transparent}
/* Once frames arrive, the poster must not cover the video-colored ambient
   canvas in the space above and below a contained picture. */
body.desktop-theater .show-card[data-offset="0"]:has(video):not(.video-booting) .poster{visibility:hidden}
/* A full-size <video> paints its own black letterbox bars in Chromium, even
   with a transparent CSS background. Size the element to the measured image
   so the existing ambient canvas can actually show through those margins. */
body.desktop-theater :is(.show-card[data-offset="0"],.user-shot-overlay).picture-measured video{
 position:absolute;top:var(--picture-y);left:var(--picture-x);
 width:calc(100% - var(--picture-x) - var(--picture-x));
 height:calc(100% - var(--picture-y) - var(--picture-y));object-fit:fill;
}
body.desktop-theater .show-card video{transition:opacity .16s ease}
body.desktop-theater .show-card.video-booting :is(.poster,video){opacity:0}
/* The live encoder includes slim pillarbox edges; crop those edges without changing recorded channels. */
body.desktop-theater.viewing-live-broadcast .show-card[data-offset="0"] video{transform:scale(1.025);transform-origin:center}
body.desktop-theater .show-card:after{
 content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(180deg,#04070c55,transparent 28%),linear-gradient(0deg,#04070cb8,#04070c70 19%,transparent 55%);
 transition:opacity .35s ease;
}
body.desktop-theater .show-card.picture-measured.live-frame:not(.creator-glow):before{
 content:'';position:absolute;inset:var(--picture-y) var(--picture-x);z-index:6;pointer-events:none;
 --frame-color:var(--mint);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--frame-color) 90%,transparent),inset 0 0 20px color-mix(in srgb,var(--frame-color) 28%,transparent),inset 0 0 50px color-mix(in srgb,var(--frame-color) 14%,transparent);
 animation:theater-frame 4s ease-in-out infinite;
}
/* Both Live shots and feed replays follow the same measured picture edge. */
body.desktop-theater :is(.show-card[data-offset="0"].creator-glow,.user-shot-overlay).picture-measured:before{inset:var(--picture-y) var(--picture-x);border-radius:0}
/* Live alone crops the encoder's slim pillarboxes by enlarging the picture.
   Enlarge its measured glow by the same amount around the same center. */
body.desktop-theater.viewing-live-broadcast .show-card[data-offset="0"].creator-glow.picture-measured:before{transform:scale(1.025)}
body.desktop-theater :is(.show-card[data-offset="0"].creator-glow,.user-shot-overlay):not(.picture-measured):before{visibility:hidden}
@keyframes theater-frame{50%{opacity:.75}}

/* Logo, centered channels, and Backstage share one persistent header row. */
body.desktop-theater .topbar{
 position:fixed;inset:0 0 auto;height:var(--theater-top);padding:0 var(--theater-edge);z-index:40;
 border:0;background:transparent;pointer-events:none;
}
body.desktop-theater .topbar>*{pointer-events:auto}
body.desktop-theater .wordmark{font-size:17px;letter-spacing:.3em;text-shadow:0 2px 16px #0008}
body.desktop-theater .backstage-button{height:34px;font-size:13px;background:#09120e52;border-color:#79eea55c;backdrop-filter:blur(14px)}
body.desktop-theater .backstage-button:hover{background:#79eea526;color:var(--mint);border-color:var(--mint)}
body.desktop-theater .mode-row{
 position:absolute;top:calc((var(--theater-top) - 54px)/2);left:var(--rail-header-left,calc(var(--theater-edge) + 200px));right:var(--rail-header-right,calc(var(--theater-edge) + 200px));transform:none;
 width:auto;height:54px;min-height:0;margin:0;padding:0;z-index:30;
}
body.desktop-theater .world-nav{height:54px}
body.desktop-theater .channel-viewport{--rail-fade-left:16%;--rail-fade-right:16%}
body.desktop-theater .channel-track{top:8px;left:calc(50vw - var(--rail-header-left,calc(var(--theater-edge) + 200px)));gap:10px}
body.desktop-theater .world-pill{min-height:38px;padding:0 17px;background:#09101770;border-color:#ffffff24;backdrop-filter:blur(16px);font-size:13px;color:#e2e8ec}
body.desktop-theater .world-pill:hover{background:#ffffff1a;border-color:#ffffff70}
body.desktop-theater .world-pill[aria-pressed="true"]{background:#ffffff22;border-color:#ffffff87;color:#fff;box-shadow:0 4px 24px #0002}
body.desktop-theater .world-pill.live-pill{color:var(--mint);border-color:#79eea566;background:#12241b8f}
body.desktop-theater .world-pill.live-pill[aria-pressed="true"]{border-color:#79eea5b3;background:#163025af}

/* The outer overlays do not capture the film's taps or navigation gestures. */
body.desktop-theater #below-video{
 position:absolute;top:auto;bottom:var(--theater-bottom);left:var(--theater-edge);right:var(--theater-edge);width:auto;transform:none;
 display:grid;grid-template-columns:minmax(0,1fr) var(--theater-feed);grid-template-rows:auto;column-gap:clamp(32px,6vw,100px);row-gap:14px;
 max-height:calc(100dvh - var(--theater-top) - 84px);z-index:18;pointer-events:none;
}
body.desktop-theater .show-details{
 grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;align-self:end;gap:13px;
 max-width:640px;min-height:0;text-shadow:0 2px 18px #0008;pointer-events:none;
}
body.desktop-theater .show-details-copy{display:block;width:100%}
body.desktop-theater .show-details h1{font-size:clamp(28px,2.7vw,44px);font-weight:620;line-height:1.08;letter-spacing:-.035em;-webkit-line-clamp:2}
body.desktop-theater .show-details>.show-description{order:1;padding-bottom:12px;font-size:15px;line-height:1.55;color:#d0d6dc;max-width:55ch;-webkit-line-clamp:3}
body.desktop-theater .show-details>.video-actions{order:2;align-self:flex-start;gap:10px;justify-content:flex-start}
body.desktop-theater .show-details .compact-action{height:32px;min-height:32px;padding:0 13px;font-size:13px;background:#0b131b6b;backdrop-filter:blur(12px)}
/* The wish quote stays in the feed; the show's title and description keep their place. */
body.desktop-theater #below-video>.replay-dock{display:none}
/* Keep the active live creator centered just inside the picture's bottom edge. */
body.desktop-theater #stage>#video-status{top:auto;bottom:calc(var(--picture-top,0px) + 18px);left:0;right:0;width:100%;max-width:none;justify-content:center;transform:none}
body.desktop-theater .video-status .creator-pill{max-width:100%;min-height:38px;box-shadow:0 4px 24px #0004;backdrop-filter:blur(18px)}
body.desktop-theater #page-footer>#save-clip.live-shot-save{position:absolute;left:50%;bottom:2px;z-index:3;width:var(--theater-pill-width);min-width:var(--theater-pill-width);height:40px;min-height:40px;padding:0 14px;gap:6px;font-size:13px;transform:translateX(-50%);background:#0b131b99;box-shadow:0 4px 24px #0004;backdrop-filter:blur(18px);pointer-events:auto}

/* Wishes occupy only the lower-right corner and scroll independently. */
body.desktop-theater.desktop-live-layout #below-video>.live-dock{
 position:relative;grid-column:2;grid-row:1/-1;align-self:end;width:100%;height:min(400px,42dvh);max-height:calc(100dvh - var(--theater-top) - 180px);
 margin-bottom:calc(66px + var(--theater-feed-actions-gap) - var(--theater-bottom));
 left:auto;top:auto;bottom:auto;min-height:0;padding:0;gap:0;pointer-events:auto;background:none;border:0;
}
body.desktop-theater :is(#activity-heading,#history-heading){display:flex;align-items:center;justify-content:flex-end;flex:none;min-height:40px;padding:0 2px 4px}
body.desktop-theater :is(#activity-heading,#history-heading)[hidden]{display:none}
body.desktop-theater :is(#activity-heading #credits,#history-heading #history-close){
 --control-height:36px;--control-accent:#e2e8ec;--control-edge:#e2e8ec59;--control-fill:#08111b40;display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;gap:0;pointer-events:auto;color:#e2e8ec;border-color:var(--control-edge);background:var(--control-fill);backdrop-filter:blur(12px);
}
body.desktop-theater #activity-heading #credits[aria-expanded="true"]{--control-edge:#e2e8ec59;--control-fill:#08111b40;color:#e2e8ec}
@media(hover:hover){body.desktop-theater :is(#activity-heading #credits,#history-heading #history-close):hover,body.desktop-theater #activity-heading #credits[aria-expanded="true"]:hover{--control-edge:#e2e8ec80;--control-fill:#ffffff0d}}
body.desktop-theater :is(#activity-heading,#history-heading) #credits-text{display:none}
body.desktop-theater :is(#activity-heading #credits,#history-heading #history-close) svg{width:15px;height:15px}
body.desktop-theater .live-activity{height:100%;min-height:0;max-width:none}
body.desktop-theater #show-history{
 position:relative;grid-column:2;grid-row:1/-1;align-self:end;display:flex;flex-direction:column;width:100%;min-height:0;
 height:auto;max-height:min(400px,42dvh,calc(100dvh - var(--theater-top) - 180px));margin-bottom:calc(66px + var(--theater-feed-actions-gap) - var(--theater-bottom));pointer-events:auto;
}
/* Footer pills start 66px above the viewport bottom; leave breathing room below the final activity card. */
body.desktop-theater #show-history-list{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;pointer-events:auto;scrollbar-width:none;padding-bottom:0}
body.desktop-theater #show-history-list::-webkit-scrollbar{display:none;width:0;height:0}
body.desktop-theater #show-history-list>.wish-event{align-items:flex-start}
body.desktop-theater #show-history-list>.wish-event:first-child{margin-top:auto}
body.desktop-theater #show-history-list>.channel-show:first-child{margin-top:0}
body.desktop-theater #show-history-list>.wish-event:last-child{margin-bottom:0}
body.desktop-theater #show-history-list>.empty-credits{padding:20px 8px;color:#bfcad3;font-size:14px;text-align:center}
body.desktop-theater .live-activity .wish-activity-list{padding:8px 2px 0;--wish-top-fade:72px;--wish-bottom-fade:0px;scrollbar-width:none}
body.desktop-theater #wish-activity-list>.wish-event:last-child{margin-bottom:0}
body.desktop-theater .activity-at-start .wish-activity-list{--wish-top-fade:0px}
body.desktop-theater .live-activity.activity-has-scrolled:not(.activity-at-end) .wish-activity-list{--wish-bottom-fade:56px}
body.desktop-theater :is(#wish-activity-list,#show-history-list)>.wish-event{
 padding:10px 11px;margin-bottom:var(--theater-card-gap);border-radius:13px;border-color:color-mix(in srgb,var(--wish-color) 25%,transparent);
 background:color-mix(in srgb,var(--wish-color) 7%,#071019bc);backdrop-filter:blur(18px);
}
body.desktop-theater :is(#wish-activity-list,#show-history-list)>.wish-event[data-state="playing"]{
 border-color:var(--wish-color);background-color:color-mix(in srgb,var(--wish-color) 20%,#071019e6);
 background-image:linear-gradient(105deg,transparent 0 30%,color-mix(in srgb,var(--wish-color) 58%,transparent) 44%,#ffffff70 50%,color-mix(in srgb,var(--wish-color) 48%,transparent) 56%,transparent 70%);
 box-shadow:inset 0 0 20px color-mix(in srgb,var(--wish-color) 24%,transparent),0 0 20px color-mix(in srgb,var(--wish-color) 40%,transparent);
 animation:theater-wish-glow 2.2s ease-in-out infinite,wish-card-wave 4.2s linear infinite;
}
@keyframes theater-wish-glow{50%{box-shadow:inset 0 0 22px color-mix(in srgb,var(--wish-color) 25%,transparent),0 0 18px color-mix(in srgb,var(--wish-color) 42%,transparent)}}
body.desktop-theater :is(#wish-activity-list,#show-history-list) .wish-event-name{font-size:13px}
body.desktop-theater :is(#wish-activity-list,#show-history-list) .wish-event-prompt{font-size:14px;line-height:19px;color:#e0e5e9}
body.desktop-theater :is(#wish-activity-list,#show-history-list) .wish-event-avatar{width:30px;height:30px}
body.desktop-theater :is(#wish-activity-list,#show-history-list) .wish-reactions{width:30px;height:30px}
body.desktop-theater :is(#wish-activity-list,#show-history-list) .wish-reaction-trigger{width:30px;height:30px;background:#0a111a80}
body.desktop-theater .wish-activity-status{font-size:14px;color:#d4cadd;text-shadow:0 2px 12px #000}
body.desktop-theater .page-footer{
 position:absolute;left:var(--theater-edge);right:var(--theater-edge);bottom:24px;width:auto;min-width:0;max-width:none;min-height:44px;
 margin:0;padding:0;border:0;background:none;z-index:30;pointer-events:none;
}
body.desktop-theater .page-footer:before{display:none}
body.desktop-theater .page-footer .show-actions{min-height:44px;gap:10px;justify-content:flex-end;pointer-events:none}
body.desktop-theater #wish-total{display:none}
body.desktop-theater .page-footer .video-actions{position:static;top:auto;left:auto;width:auto;transform:none;display:flex;gap:10px}
body.desktop-theater :is(.page-footer,.replay-actions) .compact-action{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:var(--theater-pill-width);min-width:var(--theater-pill-width);height:40px;min-height:40px;padding:0 14px;border:1px solid #ffffff36;border-radius:999px;background:#0b131b99;color:#c6d1d8;font-size:13px;line-height:1;backdrop-filter:blur(12px)}
body.desktop-theater :is(.page-footer,.replay-actions) .compact-action[aria-expanded="true"]{border-color:#d5e0e9;background:#ffffff22;color:#fff}
body.desktop-theater :is(.page-footer,.replay-actions) .compact-action:hover{border-color:#ffffff80;background:#ffffff16}
body.desktop-theater .page-footer #wish{
 --control-accent:var(--control-purple);
 border-color:var(--control-edge,color-mix(in srgb,var(--control-accent) var(--control-rest),transparent));
 background:var(--control-fill,color-mix(in srgb,var(--control-accent) var(--control-rest-fill),var(--control-surface)));
 color:var(--control-accent)
}
body.desktop-theater .page-footer #wish[aria-expanded="true"]{
 --control-edge:color-mix(in srgb,var(--control-accent) var(--control-selected),transparent);
 --control-fill:color-mix(in srgb,var(--control-accent) var(--control-selected-fill),var(--control-surface));
 border-color:var(--control-edge);background:var(--control-fill);color:var(--control-accent)
}
@media(hover:hover){html body.desktop-theater #page-footer #wish:hover{
 --control-edge:color-mix(in srgb,var(--control-accent) 100%,transparent);
 --control-fill:color-mix(in srgb,var(--control-accent) 38%,var(--control-surface));
 border-color:var(--control-edge);background:var(--control-fill);color:#f1e8ff;box-shadow:0 0 16px color-mix(in srgb,var(--control-accent) 18%,transparent)
}}
body.desktop-theater :is(.page-footer,.replay-actions) .compact-action.share-button{color:#e2e8ec;border-color:#e2e8ec59}
body.desktop-theater :is(.page-footer,.replay-actions) .compact-action.save-button{color:#f2dc88;border-color:#e5d49599}
body.desktop-theater :is(.page-footer,.replay-actions) .compact-action.save-button[aria-pressed="true"]{background:#f2dc8826}
body.desktop-theater .save-clip-label{display:inline}
body.desktop-theater :is(.page-footer,.replay-actions) .compact-action svg{width:14px;height:14px}
body.desktop-theater .wish-total{font-size:12px;color:#cdd8d2;text-shadow:0 2px 10px #000}
body.desktop-theater .composer-slot{height:40px;backdrop-filter:blur(18px)}
body.desktop-theater .page-footer .return-live{height:40px;min-height:40px;padding:0 14px;font-size:13px;margin-left:auto;background:#13291fe0;backdrop-filter:blur(16px)}
body.desktop-theater .page-footer .replay-dock-actions{left:0;right:auto;top:auto;bottom:2px;margin:0;transform:none}
/* The wish field and action align directly beneath the activity column. */
body.desktop-theater .page-footer #composer-dock{position:static;width:var(--theater-feed);max-width:none;margin:0;padding-inline:2px;box-sizing:border-box;transform:none;z-index:22;pointer-events:auto}
body.desktop-theater.composing-live .page-footer #composer-dock,
body.desktop-theater.desktop-live-layout .page-footer #composer-dock{width:var(--theater-feed)}
body.desktop-theater.desktop-live-layout #wish-slot{
 --control-accent:var(--control-purple);
 border-width:var(--control-stroke);border-color:color-mix(in srgb,var(--control-accent) 58%,transparent);
 background:#050b12c7;box-shadow:inset 0 1px 8px #0007
}
body.desktop-theater.desktop-live-layout #wish-slot.open{border-color:color-mix(in srgb,var(--control-accent) 58%,transparent);background:#050b12c7;box-shadow:inset 0 1px 8px #0007}
@media(hover:hover){html body.desktop-theater.desktop-live-layout #composer-dock #wish-slot:hover:not(:focus-within){border-color:color-mix(in srgb,var(--control-accent) 58%,transparent)!important;background:#050b12c7!important;box-shadow:inset 0 1px 8px #0007!important}}
body.desktop-theater.desktop-live-layout #wish-slot:focus-within{border-color:color-mix(in srgb,var(--control-accent) 86%,transparent);background:#07101ad1;box-shadow:inset 0 1px 8px #0007}
body.desktop-theater .page-footer #share{pointer-events:auto}
body.desktop-theater.composing-live #below-video .show-details{display:flex}
body.desktop-theater.composing-live .page-footer{display:block}
body.desktop-theater.composing-live .composer-row{width:100%}
body.desktop-theater .composer-slot input{font-size:14px}

/* Keep sound inside the visible picture, including letterboxed video. */
body.desktop-theater .player-top{top:calc(var(--picture-y,0px) + 16px);left:calc(var(--picture-x,0px) + 16px);right:calc(var(--picture-x,0px) + 16px);opacity:1}
body.desktop-theater .player-top .exit-expanded{position:static;left:auto;margin-right:0;width:36px;height:36px}
body.desktop-theater .stage:not(.controls-shown) .player-top button{pointer-events:auto}
/* Before the first picture measurement, do not flash controls at the stage edge. */
body.desktop-theater .show-card:not(.picture-measured) .player-top{visibility:hidden;pointer-events:none}
body.desktop-theater .show-card:not(.picture-measured) .player-top button{pointer-events:none}
/* A user-shot replay owns the player controls; its movement never reveals the paused show controls beneath it. */
body.desktop-theater.history-overlay-open .show-card>.player-top{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
body.desktop-theater.history-overlay-open .show-card>.player-top *{pointer-events:none!important}
body.desktop-theater .sound-prompt{font-size:12px;min-height:36px;background:#0b131c99;border-color:#ffffff30}
body.desktop-theater .player-controls{display:none}
body.desktop-theater .stage>.replay-actions{top:auto;bottom:24px;left:var(--theater-edge);width:auto;min-height:40px;padding:0;transform:none}
body.desktop-theater.history-overlay-open .show-card[data-offset="0"]{visibility:hidden}
body.desktop-theater .user-shot-overlay{
 position:absolute;inset:0;z-index:8;width:100%;height:100%;aspect-ratio:auto;
 transform:none;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:auto;
}
body.desktop-theater .user-shot-overlay video{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit;background:transparent;transition:opacity .16s ease}
body.desktop-theater .user-shot-overlay.user-shot-loading video{opacity:0}
body.desktop-theater .user-shot-identity{display:none}
body.desktop-theater .user-shot-creator,body.desktop-theater .user-shot-follow{
 --control-height:32px;--control-inset:10px;--control-gap:6px;--control-icon:13px;--control-font-size:11px;
 min-width:0;height:32px;min-height:32px;padding:0 10px;font-size:11px;background:#0b131bbd;backdrop-filter:blur(14px);box-shadow:0 5px 20px #0007;
}
body.desktop-theater .user-shot-creator{position:static;top:auto;left:auto;transform:none;flex:0 1 auto;padding-left:2px;max-width:min(280px,38vw);--control-accent:var(--creator-color,var(--control-neutral))}
body.desktop-theater #stage #history-overlay .user-shot-creator{padding-left:2px}
body.desktop-theater .user-shot-avatar{display:grid;place-items:center;width:26px;height:26px;flex:none;border:1px solid color-mix(in srgb,var(--creator-color,var(--control-neutral)) 65%,transparent);border-radius:50%;background:color-mix(in srgb,var(--creator-color,var(--control-neutral)) 14%,#0b131b);font-size:10px;font-weight:650}
body.desktop-theater .user-shot-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.desktop-theater #stage #history-overlay .user-shot-name{font-size:11px}
body.desktop-theater #stage #history-overlay .user-shot-follow{display:none!important}
body.desktop-theater .user-shot-follow svg{width:13px;height:13px}
body.desktop-theater .user-shot-overlay:not(.picture-measured) .player-top{visibility:hidden;pointer-events:none}
body.desktop-theater .broadcast-placeholder{background:#07101985;backdrop-filter:blur(8px);padding:60px 20%}
body.desktop-theater .broadcast-placeholder>:is(.eyebrow,h2,p,button){transform:translateY(calc(-1 * clamp(24px,4dvh,40px)))}
body.desktop-theater .toast{z-index:50;bottom:24px}
html:fullscreen body.desktop-theater .exit-expanded{display:inline-flex}

/* Fade individual overlays, keeping shared parents and persistent controls visible. */
body.desktop-theater :is(#now-playing,#live-dock,#replay-dock,.player-top,.replay-dock-actions,.video-status){transition:opacity .35s ease,visibility .35s}
body.desktop-theater.desktop-chrome-hidden .desktop-overlay-hidden{opacity:0;visibility:hidden}
body.desktop-theater.desktop-chrome-hidden .desktop-overlay-hidden,
body.desktop-theater.desktop-chrome-hidden .desktop-overlay-hidden *{pointer-events:none!important}
body.desktop-theater.desktop-chrome-hidden .wish-reaction-options{visibility:hidden}
body.desktop-theater.desktop-chrome-hidden .video-tap{cursor:none}

@media(min-width:900px) and (max-height:720px){
 body.desktop-theater{--theater-top:60px}
 body.desktop-theater .show-details{gap:9px}
 body.desktop-theater .show-details h1{font-size:30px}
 body.desktop-theater .show-details>.show-description{-webkit-line-clamp:2;font-size:14px}
 body.desktop-theater.desktop-live-layout #below-video>.live-dock{height:34dvh}
 body.desktop-theater #show-history{max-height:34dvh}
}
@media(prefers-reduced-motion:reduce){
 body.desktop-theater .show-card video,body.desktop-theater .user-shot-overlay video{transition:none}
 body.desktop-theater .show-card.picture-measured.live-frame:not(.creator-glow):before{animation:none}
 body.desktop-theater :is(#wish-activity-list,#show-history-list)>.wish-event[data-state="playing"]{animation:none}
 body.desktop-theater :is(#now-playing,#live-dock,#replay-dock,.player-top,.replay-dock-actions,.video-status),body.desktop-theater .show-card:after{transition:none}
}

body.desktop-theater .page-footer #credits{pointer-events:auto}
body.desktop-theater .page-footer .return-live{pointer-events:auto}
body.desktop-theater.composing-live .show-details-copy{display:block}
body.desktop-theater.composing-live .show-details>.show-description{display:-webkit-box}

/* Subscribe and replay Save share the left footer edge below show details. */
body.desktop-theater .page-footer .replay-dock-actions:has(#save-clip:not([hidden]),#channel-subscribe:not([hidden])){left:0;transform:none}

body.desktop-theater .page-footer #channel-subscribe{width:auto;pointer-events:auto;color:var(--mint);border-color:#79eea599;background:#10241b99}
body.desktop-theater .page-footer #channel-subscribe:hover,body.desktop-theater .page-footer #channel-subscribe[aria-pressed="true"]{background:#79eea526}
body.desktop-theater .page-footer #channel-subscribe:focus-visible{outline-color:var(--mint)}

/* Closing the feed keeps its toggle and the wish composer available. */
body.desktop-theater.desktop-live-layout:not(.live-feed-open) #below-video>.live-dock{height:auto}
body.desktop-theater #composer-dock .composer-choice>.compact-action{min-width:var(--theater-pill-width)}

/* the episode rail over the picture: the theater layout puts the dock there for live too, so the position stays; the
   legibility cannot depend on the frame (measured 2026-09-28, Sonar: heading #a9a4b5 = luminance 166 on a backdrop
   whose p90 was 167). The house scrim, on the container, so the heading and the count inherit it. */
body.desktop-theater .episode-rail{background:#0b131bd9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 4px 16px #0007;border-radius:14px;padding:8px 8px 4px}
body.desktop-theater .episode-rail .activity-heading{padding-left:4px}
/* no fade on the rail: the theater rule above (.live-activity .wish-activity-list, --wish-top-fade:72px) outranks the
   rail's own and put row 1 at ~50% opacity — name 1.1:1 against its card (Sonar, measured 2026-09-28). The live feed
   fades because it scrolls under the composer; the rail is a bounded list on its own scrim and has nothing to fade into. */
body.desktop-theater .episode-rail .wish-activity-list{--wish-top-fade:0px;--wish-bottom-fade:0px;padding:2px 2px 0}
body.desktop-theater .episode-rail .episode-rail-show{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px}   /* the TITLE survives: two lines, never the label eating it */

/* the channel wish status reads as the wish box's placeholder on desktop (app.js, mirror()); the line under the box
   grew the composer and floated (Raina, 2026-10-01). Kept for screen readers, hidden visually. A refusal has no
   short form and keeps the visible line. */
body.desktop-theater #channel-wish-status.in-box{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.desktop-theater #wish-text.wish-status-placeholder::placeholder{color:var(--mint);opacity:1}

/* Shows opens right above its button, and the wish list stays put (Raina, 2026-10-01: "when i click shows this looks
   weird"). The grid had one explicit row, so the lineup's 1/-1 spanned only the title's row and parked at the top of
   the picture. Now the lineup spans both rows of column 2 and sits on the footer; its own × goes, because the Shows
   button is the toggle. */
body.desktop-theater:not(.desktop-live-layout) #below-video{grid-template-rows:auto auto}
body.desktop-theater:not(.desktop-live-layout) #below-video>.live-dock{grid-column:2;grid-row:1/span 2;align-self:end;min-height:0;max-height:min(400px,42dvh,calc(100dvh - var(--theater-top) - 180px));margin-bottom:calc(66px + var(--theater-feed-actions-gap) - var(--theater-bottom))}
/* ONE panel on the right at a time (Raina, 2026-10-01: "these views are all confused" — title, wishes and the lineup
   were three boxes over the picture). The wishes are the default; Shows swaps the lineup in, closing swaps back. */
body.desktop-theater.history-open:not(.desktop-live-layout) #below-video>.live-dock{display:none}
body.desktop-theater:not(.desktop-live-layout) .episode-rail{min-height:0;max-height:100%}
body.desktop-theater:not(.desktop-live-layout) .episode-rail .wish-activity-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
body.desktop-theater:not(.desktop-live-layout) #show-history{grid-row:1/span 2}
body.desktop-theater:not(.desktop-live-layout) #history-heading{display:none}
/* the title spans both rows too and sits on the footer: with two rows it took only the top one and left an empty band
   under it beside a tall lineup (Raina, 2026-10-01: "the giant space on the left under the title is strange"). */
body.desktop-theater:not(.desktop-live-layout) .show-details{grid-row:1/span 2;align-self:end}
/* the title spans both rows too and sits on the footer, level with the panel: with two rows it took only the top one
   and rode up beside a tall panel (Raina, 2026-10-01: "the giant space on the left under the title is strange",
   "still seeing the title on the left too high"). */
body.desktop-theater:not(.desktop-live-layout) .show-details{grid-row:1/span 2;align-self:end}
/* a new wish is added at the TOP of the rail; the browser's scroll anchoring then held the old rows still and pushed
   the new one out above the fold — her own "made just now" was cut off (Raina's screenshot, 2026-10-01 23:24). */
body.desktop-theater .episode-rail .wish-activity-list{overflow-anchor:none}
/* the "why you can't wish here" line sits under the title, so it starts where the title starts — it was centred with
   15px of padding and floated right of the title (Raina, 2026-10-01: "the green aligned text should be left pinned"). */
body.desktop-theater .show-details-copy #live-why{text-align:left;padding:4px 0 0}