.live-page { max-width:1100px; margin-inline:auto; }
.live-heading { margin:24px 0 32px; }
.live-heading h1 { font-size:clamp(2.4rem,5vw,4.2rem); margin-bottom:20px; }
.live-heading p { max-width:70ch; }
.live-schedule,.live-event-date,.live-help,.live-form .form-text,.live-setup { color:var(--muted); }
.live-event-list { list-style:none; padding:0; margin:32px 0; }
.live-event-list > li { display:grid; grid-template-columns:200px minmax(0,1fr); gap:36px; border-top:1px solid var(--line); padding:28px 0; }
.live-event-list h2 { font-size:2.2rem; margin:0 0 16px; }
.live-event-list h2 a { text-decoration:none; }
.live-event-date { display:flex; flex-direction:column; gap:12px; font-size:.9rem; }
.live-event-list p,.live-description p { white-space:pre-line; overflow-wrap:anywhere; }
.live-screen { position:relative; aspect-ratio:16/9; background:#11110f; border:1px solid var(--line); }
#live-player,#live-player iframe { width:100%; height:100%; }
#live-player:empty { display:none; }
#live-player iframe { border:0; display:block; }
#live-player .live-preparing-player { position:absolute; inset:0; opacity:0; pointer-events:none; }
.live-placeholder { display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; min-height:280px; padding:32px; background:var(--panel); }
.live-screen .live-placeholder { position:absolute; inset:0; min-height:0; }
.live-placeholder h2 { font-size:2.2rem; margin-bottom:16px; }
.live-placeholder p { color:var(--muted); margin:0; }
.live-placeholder .btn { margin-top:24px; }
.live-page [hidden] { display:none!important; }
.live-controls { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:20px; }
.live-controls p { margin:0; }
.live-help { font-size:.9rem; margin-top:16px; }
.live-description { margin-top:32px; max-width:74ch; }
.live-membership { background:var(--paper); color:var(--ink); padding:40px; }
.live-membership h2 { font-size:2.2rem; margin-bottom:20px; }
.live-membership a:not(.btn) { color:var(--ink); }
.live-membership .btn { margin-bottom:24px; }
.live-membership p:last-child { margin-bottom:0; }
.live-empty { padding:32px 0; border-top:1px solid var(--line); }
.live-empty h2 { font-size:2.2rem; margin-bottom:20px; }
.live-admin { max-width:1100px; margin-inline:auto; color-scheme:dark; }
.live-admin h1 { font-size:3rem; }
.live-admin h2 { font-size:1.9rem; margin-bottom:24px; }
.live-admin h3 { font-size:1.55rem; }
.live-admin-workspace { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:56px; }
.live-form { max-width:42rem; }
.live-form > div { margin-bottom:24px; }
.live-form label { display:block; margin-bottom:8px; }
.live-form textarea { caret-color:var(--paper); }
.live-form .form-text { margin:8px 0 0; }
.live-form .validation-summary-valid { display:none; }
.live-form .validation-summary-errors { margin-bottom:24px; }
.live-actions { display:flex; flex-wrap:wrap; gap:12px; }
.live-end-action { border-top:1px solid var(--line); padding-top:24px; margin-top:32px; }
.live-access-note { border-block:1px solid var(--line); padding:16px 0; }
.live-setup h2 { color:var(--paper); }
.live-setup ol { padding-left:24px; }
.live-setup li { margin-bottom:20px; }
.live-admin-events { margin-top:48px; }
.live-admin-events .live-event-list > li { display:block; }
.live-notice { padding:16px; border:1px solid var(--control-border); }
@media(max-width:767px) {
    .live-heading h1 { font-size:clamp(2rem,8vw,3rem); }
    .live-event-list > li,.live-admin-workspace { grid-template-columns:1fr; gap:24px; }
    .live-controls { align-items:stretch; flex-direction:column; gap:16px; }
    .live-membership { padding:24px; }
    .live-placeholder { padding:20px; }
    .live-screen .live-placeholder h2 { font-size:1.55rem; margin-bottom:12px; }
    .live-screen .live-placeholder p { font-size:.85rem; }
    .live-form .btn { width:100%; }
    .live-admin h1 { font-size:2.2rem; }
    .live-admin-workspace { gap:40px; }
}

/* Broadcast chat */
.live-broadcast-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:1.5rem; align-items:start; }
.live-broadcast-layout > * { min-width:0; }
.live-chat { border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; }
.live-chat-header { padding:1rem; border-bottom:1px solid var(--line); }
.live-chat-header h2 { margin:0 0 .3rem; font-size:1.2rem; }
.live-chat-header p,.chat-status { font-size:.85rem; margin:0; }
.chat-messages { height:380px; overflow-y:auto; padding:1rem; overscroll-behavior:contain; }
.chat-message { margin-bottom:1rem; }
.chat-message-heading { display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; }
.chat-message-heading strong { overflow-wrap:anywhere; }
.chat-message-heading time { font-size:.75rem; opacity:.65; }
.chat-message-body { margin:.2rem 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-message-actions { display:flex; gap:.75rem; }
.chat-action { padding:0; border:0; background:transparent; color:inherit; text-decoration:underline; font-size:.75rem; cursor:pointer; }
.chat-action:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.chat-status,.chat-membership,.chat-moderation { padding:.75rem 1rem; }
.chat-form { padding:0 1rem 1rem; }
.chat-form label { display:block; font-size:.85rem; margin-bottom:.4rem; }
.chat-form textarea { display:block; width:100%; resize:vertical; min-height:70px; background:transparent; color:inherit; border:1px solid var(--line); border-radius:6px; padding:.65rem; }
.chat-compose-actions { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-top:.5rem; }
.chat-compose-actions span,.chat-empty { font-size:.8rem; opacity:.8; }
.chat-membership { margin:0; }
.live-chat [hidden] { display:none!important; }
@media(max-width:900px) { .live-broadcast-layout { grid-template-columns:1fr; } .chat-messages { height:300px; } }

.live-viewer-count { display:flex; align-items:center; gap:.5rem; margin:.8rem 0; font-size:.9rem; font-weight:700; color:var(--paper); }
.live-viewer-count::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--red); flex-shrink:0; }

.live-quick { padding:28px; border:1px solid var(--line); background:var(--panel); margin-bottom:24px; }
.live-quick-heading { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-bottom:20px; }
.live-quick-heading h2 { font-size:2rem; margin:0; }
.live-state { border:1px solid var(--line); padding:4px 12px; font-size:.85rem; font-weight:700; }
.live-start-steps { padding-left:24px; max-width:80ch; }
.live-start-steps li { padding:8px 0; }
.live-credentials { padding:20px; border:1px solid var(--line); margin-top:24px; }
.live-credentials p { font-size:.85rem; color:var(--muted); }
.live-credentials label { display:block; margin-top:16px; }
.live-copy-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0 16px; }
.live-copy-row input { flex:1 1 200px; min-width:0; }
.live-advanced { border-top:1px solid var(--line); padding-top:20px; }
.live-advanced summary { cursor:pointer; padding:8px 0; }
.live-advanced .live-form { margin-top:20px; }
.live-admin [hidden] { display:none!important; }
@media(max-width:600px) { .live-quick { padding:20px; } }

/* Keep the viewing surface together; extra help belongs below chat on phones. */
.live-heading { margin:16px 0 20px; }
.live-heading h1 { font-size:clamp(1.65rem,3.5vw,2.8rem); margin-bottom:10px; overflow-wrap:anywhere; }
.live-broadcast-layout { grid-template-areas:"player chat" "toolbar chat" "details chat"; gap:12px 20px; }
#live-watch { display:contents; }
.live-screen { grid-area:player; min-width:0; }
#live-player video { display:block; width:100%; height:100%; background:#000; object-fit:contain; }
.live-toolbar { grid-area:toolbar; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.live-toolbar .btn { padding:6px 10px; font-size:.85rem; }
.live-toolbar .live-viewer-count { margin:0; font-size:.8rem; }
.live-player-details { grid-area:details; min-width:0; }
.live-player-details .live-controls { margin-top:0; gap:12px; font-size:.85rem; }
.live-player-details .live-help { margin:10px 0; font-size:.8rem; }
.live-chat { grid-area:chat; display:flex; flex-direction:column; max-height:650px; }
.chat-messages { min-height:120px; flex:1 1 300px; }
.live-recording-cards { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.live-recording-card { border:1px solid var(--line); border-radius:8px; background:var(--panel); color:inherit; padding:16px; cursor:pointer; }
.live-recording-card:hover,.live-recording-card:focus-visible { border-color:var(--red); }
#live-recordings h2 { font-size:1.15rem; margin-top:20px; }
.live-event-list > li { grid-template-columns:180px minmax(0,1fr); gap:12px 24px; }
.live-event-poster { grid-row:span 2; aspect-ratio:16/9; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; text-decoration:none; color:var(--paper); background:linear-gradient(135deg,#272722,#571d1d); border:1px solid var(--line); }
.live-event-poster span { font-size:2rem; }
.live-event-date { gap:5px; }
.live-event-list article { grid-column:2; }
@media(max-width:900px) and (orientation:portrait), (max-width:599px) {
    .live-broadcast-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"player" "toolbar" "chat" "details"; gap:10px; }
    .live-chat { max-height:52dvh; min-height:280px; }
    .live-chat-header { padding:10px 12px; }
    .live-chat-header p { display:none; }
    .chat-messages { padding:12px; }
    .chat-form textarea { min-height:42px; max-height:90px; }
    .chat-form { padding:0 12px 12px; }
    .chat-form label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    .chat-status { padding:6px 12px; }
    .live-event-list > li { grid-template-columns:1fr; }
    .live-event-list article { grid-column:auto; }
    .live-event-poster { grid-row:auto; max-width:360px; width:100%; }
}
@media(orientation:landscape) and (min-width:600px) and (max-height:600px) {
    .live-broadcast-layout { grid-template-columns:minmax(0,1fr) minmax(220px,32%); }
    .live-chat { max-height:85dvh; }
    .chat-messages { flex-basis:120px; min-height:70px; }
    .live-chat-header,.chat-status { padding:6px 10px; }
    .live-chat-header p { display:none; }
    .chat-form textarea { min-height:38px; height:38px; }
}

.live-event-poster { position:relative; overflow:hidden; padding:0; }
.live-event-poster img { display:block; width:100%; height:100%; object-fit:cover; }
.live-event-poster strong { position:absolute; left:0; right:0; bottom:0; padding:7px 10px; color:#fff; background:#000b; font-size:.85rem; }
.live-thumbnail-editor { border-block:1px solid var(--line); padding:24px 0; margin:24px 0; }
.live-thumbnail-preview { width:min(100%,480px); height:auto; display:block; aspect-ratio:16/9; object-fit:contain; background:#111; }
.live-thumbnail-editor form { margin:16px 0; }
.live-thumbnail-editor label,.live-thumbnail-editor input { display:block; margin:10px 0; }

/* /Live when nothing is on air: Gary's "NO SIGNAL" loop fills the page (fixed, behind everything), with a still underneath
   for slow connections, reduce-motion, data-saver and iPhone Low Power Mode. The text sits below the NO SIGNAL plate. */
body.live-off-air { background:#0b0b0b; }
body.live-off-air::before { content:""; position:fixed; inset:0; z-index:-2; background:#0b0b0b url('/images/live/no-signal-poster-landscape.webp') center / cover no-repeat; pointer-events:none; }
@media (max-aspect-ratio: 1/1) { body.live-off-air::before { background-image:url('/images/live/no-signal-poster-portrait.webp'); } }
.nosig-bg { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.nosig-bg video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; }
.nosig-bg video.is-playing { opacity:1; }
.nosig-tint { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.05) 0 45%,rgba(0,0,0,.55) 75%,rgba(0,0,0,.75)); }
body.live-off-air .page-main { padding-top:0; }
.live-offair { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; min-height:calc(100svh - var(--header-h,96px)); padding:0 0 clamp(40px,11vh,120px); }
.live-offair-title { position:relative; margin:0 0 18px; font-family:Anton,Impact,"Arial Narrow",sans-serif; font-size:clamp(2.6rem,8vw,6rem); line-height:.95; letter-spacing:.02em; text-transform:uppercase; color:#f2efe6;
    text-shadow:-3px 0 rgba(255,42,31,.75), 3px 0 rgba(0,220,255,.45), 0 0 24px rgba(0,0,0,.9); animation:offair-jitter 5.3s steps(1) infinite; }
.live-offair.is-on-air .live-offair-title { color:#ff3b2b; text-shadow:0 0 8px rgba(255,42,31,.8), 0 0 26px rgba(255,42,31,.5); animation:none; }
@keyframes offair-jitter { 0%,100% { transform:none; opacity:1; } 41% { transform:translate(-6px,1px) skewX(-6deg); opacity:.85; } 42% { transform:translate(4px,0); opacity:1; } 43% { transform:none; } 77% { transform:translateX(7px); opacity:.7; } 77.8% { transform:none; opacity:1; } }
.live-offair-text { max-width:46ch; margin:0 auto 24px; font-size:clamp(1rem,1.6vw,1.2rem); color:#e8e4da; text-shadow:0 1px 8px rgba(0,0,0,.95); }
.live-upcoming { background:rgba(10,10,10,.82); border:1px solid var(--line); padding:8px 24px; margin-bottom:24px; }
body.live-off-air .live-replays-link { text-align:center; margin:0; text-shadow:0 1px 6px rgba(0,0,0,.95); }
.live-offair .phone-break { display:none; }
.live-offair.is-on-air .live-replays-link a { font-size:1.15rem; color:#ff3b2b; }
@media (prefers-reduced-motion: reduce) { .live-offair-title { animation:none; } }
@media (max-width:767px) { .live-offair { padding-bottom:56px; } .live-offair .phone-break { display:inline; } .live-upcoming { padding:4px 16px; } }

/* /Live states: members always see WE ARE NOT LIVE NOW (they're sent to the stream when on air); non-members see the
   ACCESS BLOCKED loop and how to get in while a broadcast is on air (live-offair.js adds body.live-blocked). */
.live-offair-state { display:flex; flex-direction:column; align-items:center; }
.live-offair-state.is-blocked, body.live-blocked .live-offair-state.is-offline { display:none; }
body.live-blocked .live-offair-state.is-blocked { display:flex; }
body.live-off-air.live-blocked::before { background-image:url('/images/live/access-blocked-poster-landscape.webp'); }
@media (max-aspect-ratio: 1/1) { body.live-off-air.live-blocked::before { background-image:url('/images/live/access-blocked-poster-portrait.webp'); } }
.live-offair-title a { color:inherit; text-decoration:none; }
.live-offair-title a:hover, .live-offair-title a:focus-visible { color:#fff; text-shadow:-3px 0 rgba(255,42,31,.9), 3px 0 rgba(0,220,255,.6), 0 0 22px rgba(255,42,31,.8); }
/* No scrolling on the lost-signal screen (nothing below it), so the header stays see-through. */
body.live-off-air .page-main { padding-bottom:0; min-height:0; }
body.live-off-air.live-locked { overflow:hidden; }
html:has(body.live-locked) { overflow:hidden; }
body.live-off-air.live-locked .live-offair { min-height:0; height:calc(100svh - var(--header-h,96px)); box-sizing:border-box; }

/* Full-screen live layout (live-theater.js adds body.live-theater while the broadcast is live). The stream fills the
   screen with no site header/footer; chat floats on the right over a light glitch, ending above the player's control
   bar; LIVE NOW badge and viewer count top-left; Hide chat / Exit stream centred over the chat. Upright phones: video on
   top, chat below. Nothing here changes who can watch or chat. */
.live-theater-ui { display:none; }
/* --theater-bar: room left for the player's own controls (timeline, LIVE, settings). Safari's are about 110px tall. */
body.live-theater { --theater-chat:340px; --theater-bar:116px; --theater-fade:110px; overflow:hidden; background:#000; }
body.live-theater .site-header, body.live-theater .site-footer, body.live-theater .skip-link,
body.live-theater .live-page > :not(.live-broadcast-layout),
body.live-theater .live-player-details, body.live-theater #live-go-live, body.live-theater #live-pip, body.live-theater #live-elapsed { display:none!important; }
body.live-theater .page-main { max-width:none; padding:0; min-height:0; }
body.live-theater .live-screen { position:fixed; inset:0; z-index:1000; border:0; aspect-ratio:auto; background:#000; }
body.live-theater .live-theater-ui { display:block; }
/* LIVE NOW badge: the landing-page lettering, white on a red rectangle; viewer count beside it. */
.live-theater-badge { position:fixed; z-index:1004; top:16px; left:16px; display:flex; align-items:center; padding:6px 10px; background:#e3241a; border-radius:3px; box-shadow:0 0 14px rgba(255,42,31,.6); pointer-events:none; }
.live-theater-badge img { width:118px; height:auto; display:block; }
body.live-theater .live-toolbar { position:fixed; z-index:1004; top:16px; left:166px; margin:0; pointer-events:none; }
body.live-theater .live-toolbar .live-viewer-count { margin:0; padding:6px 10px; border-radius:3px; background:rgba(0,0,0,.55); color:#fff; font-size:.8rem; }
body.live-theater .live-toolbar .live-viewer-count::before { display:none; }
/* Buttons centred over the chat column (top-right corner when chat is hidden). */
.live-theater-actions { position:fixed; z-index:1005; top:12px; right:0; width:var(--theater-chat); display:flex; justify-content:center; gap:8px; }
body.live-chat-hidden .live-theater-actions { width:auto; right:14px; }
.live-theater-button { display:inline-flex; align-items:center; min-height:34px; padding:6px 12px; border:1px solid rgba(255,255,255,.45); border-radius:4px; background:rgba(0,0,0,.6); color:#fff; font:700 .8rem Arial,Helvetica,sans-serif; text-decoration:none; cursor:pointer; }
.live-theater-button:hover, .live-theater-button:focus-visible { background:#000; color:#fff; border-color:#fff; }
.live-theater-exit { border-color:rgba(255,42,31,.85); }
.live-theater-exit:hover, .live-theater-exit:focus-visible { background:#ff2a1f; border-color:#ff2a1f; color:#000; }
.live-theater-chat-title { position:fixed; z-index:1004; top:52px; right:0; width:var(--theater-chat); margin:0; text-align:center; pointer-events:none;
    font-family:Anton,Impact,"Arial Narrow",sans-serif; font-weight:400; font-size:2rem; letter-spacing:.03em; color:#ff3b2b; text-shadow:0 0 8px rgba(255,42,31,.6), 0 1px 3px #000; }
body.live-chat-hidden .live-theater-chat-title, body.live-chat-hidden .live-theater-glitch { display:none; }
/* Light glitch behind the chat: darkened, with scanlines and flickering colour/blur bands; fades into the stream on the left. */
.live-theater-glitch { position:fixed; z-index:1001; top:0; right:0; bottom:var(--theater-bar); width:calc(var(--theater-chat) + var(--theater-fade)); pointer-events:none; overflow:hidden;
    background:rgba(0,0,0,.6); -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--theater-fade)); mask-image:linear-gradient(to right,transparent,#000 var(--theater-fade)); }
.live-theater-glitch i { position:absolute; left:0; right:0; display:block; -webkit-backdrop-filter:blur(1.2px); backdrop-filter:blur(1.2px); }
.live-theater-glitch i.is-warm { -webkit-backdrop-filter:hue-rotate(-35deg) saturate(2.2) brightness(1.15) blur(1px); backdrop-filter:hue-rotate(-35deg) saturate(2.2) brightness(1.15) blur(1px); }
.live-theater-glitch i.is-cold { -webkit-backdrop-filter:hue-rotate(160deg) saturate(1.6) brightness(.9) blur(1px); backdrop-filter:hue-rotate(160deg) saturate(1.6) brightness(.9) blur(1px); }
.live-theater-glitch i.is-hot { -webkit-backdrop-filter:contrast(1.6) brightness(1.2) blur(2px); backdrop-filter:contrast(1.6) brightness(1.2) blur(2px); }
.live-theater-glitch::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px); }
/* The chat itself: transparent panel on the right, under the title, ending above the player's control bar. */
body.live-theater .live-broadcast-layout > #community,
body.live-theater .live-broadcast-layout > .live-chat,
body.live-theater .live-broadcast-layout > aside.live-membership { position:fixed; z-index:1003; top:96px; right:0; bottom:var(--theater-bar); width:var(--theater-chat); max-height:none; margin:0; padding:0 4px 8px; display:flex; flex-direction:column; background:transparent; border:0; color:#eee; }
body.live-chat-hidden .live-broadcast-layout > #community,
body.live-chat-hidden .live-broadcast-layout > .live-chat,
body.live-chat-hidden .live-broadcast-layout > aside.live-membership { display:none; }
body.live-theater #community .community-layout { display:flex; flex-direction:column; flex:1; min-height:0; height:auto; margin:0; border:0; border-radius:0; background:transparent; overflow:visible; }
body.live-theater #community .community-messages { flex:1; min-height:0; }
body.live-theater #community .cm-head { justify-content:center; padding:0 10px 6px; border:0; }
body.live-theater #community .cm-head > div, body.live-theater #community #community-presence { display:none; }
body.live-theater #community #community-history { max-height:none; min-height:0; text-shadow:0 1px 2px #000, 0 0 6px rgba(0,0,0,.9); }
body.live-theater #community .community-message { padding:5px 12px; }
body.live-theater #community .community-message:hover, body.live-theater #community .community-message:focus-within, body.live-theater #community .community-message.is-active { background:rgba(0,0,0,.45); }
body.live-theater #community #community-format, body.live-theater #community .cm-attach { display:none; }
body.live-theater #community .cm-compose { padding:6px 10px 0; background:transparent; border:0; }
body.live-theater #community .cm-box { background:rgba(20,20,20,.75); gap:8px; }
body.live-theater #community #community-body { background:transparent; min-width:0; }
body.live-theater #community .cm-send { padding:6px 12px; min-height:34px; }
body.live-theater .live-chat-header { display:none; }
body.live-theater .live-chat .chat-messages { background:transparent; border:0; text-shadow:0 1px 2px #000; }
body.live-theater aside.live-membership { justify-content:flex-end; padding:16px; color:#fff; text-shadow:0 1px 3px #000; }
body.live-theater aside.live-membership a { color:#ff8a7a; }
/* Phone held sideways: same layout, narrower chat. */
@media (orientation:landscape) and (max-height:500px) {
    body.live-theater { --theater-chat:270px; --theater-bar:84px; --theater-fade:80px; }
    .live-theater-badge { top:10px; left:10px; padding:4px 8px; } .live-theater-badge img { width:92px; }
    body.live-theater .live-toolbar { top:10px; left:126px; }
    .live-theater-actions { top:8px; } body.live-chat-hidden .live-theater-actions { right:10px; }
    .live-theater-button { min-height:30px; padding:5px 9px; font-size:.72rem; }
    .live-theater-chat-title { top:44px; font-size:1.45rem; }
    body.live-theater .live-broadcast-layout > #community, body.live-theater .live-broadcast-layout > .live-chat, body.live-theater .live-broadcast-layout > aside.live-membership { top:78px; }
    body.live-theater #community .community-message { padding:3px 10px; font-size:.8rem; }
    body.live-theater #community .community-message { grid-template-columns:28px minmax(0,1fr); gap:8px; }
    body.live-theater #community .cm-send { padding:4px 10px; min-height:30px; }
}
/* Phone held upright: video full width on top, solid chat filling the rest; Exit stream in the video's corner. */
@media (orientation:portrait) and (max-width:767px) {
    body.live-theater { --theater-video:56.25vw; }
    body.live-theater .live-screen { bottom:auto; height:var(--theater-video); }
    .live-theater-badge { top:8px; left:8px; padding:4px 7px; } .live-theater-badge img { width:76px; }
    body.live-theater .live-toolbar { top:8px; left:104px; } body.live-theater .live-toolbar .live-viewer-count { padding:4px 7px; font-size:.7rem; }
    .live-theater-actions, body.live-chat-hidden .live-theater-actions { top:6px; right:8px; width:auto; }
    #live-chat-toggle, .live-theater-glitch { display:none!important; }
    .live-theater-button { min-height:28px; padding:4px 9px; font-size:.72rem; }
    .live-theater-chat-title, body.live-chat-hidden .live-theater-chat-title { display:block; top:calc(var(--theater-video) + 10px); left:14px; right:auto; width:auto; text-align:left; font-size:1.4rem; }
    body.live-theater .live-broadcast-layout > #community, body.live-theater .live-broadcast-layout > .live-chat, body.live-theater .live-broadcast-layout > aside.live-membership,
    body.live-chat-hidden .live-broadcast-layout > #community, body.live-chat-hidden .live-broadcast-layout > .live-chat, body.live-chat-hidden .live-broadcast-layout > aside.live-membership {
        display:flex; top:calc(var(--theater-video) + 48px); bottom:0; left:0; width:auto; padding-bottom:max(8px, env(safe-area-inset-bottom)); background:#0a0a0a; }
    body.live-theater { background:#0a0a0a; }
}
/* Live chat and chat replay: names only, no account labels (Site admin, Crew, Member…). Gary, Nov 3. */
#community[data-broadcast-id] .community-author-badge, .live-chat .community-author-badge { display:none !important; }

/* Broadcast page, Nov 3: title and date under the player, chat beside the video only, YouTube-style chat lines,
   and no extra controls or help text (the player has its own picture-in-picture). */
.live-broadcast-layout { grid-template-areas:"player chat" "title ." "toolbar ." "details ."; align-items:start; }
.live-broadcast-layout > #community, .live-broadcast-layout > .live-chat, .live-broadcast-layout > aside.live-membership { grid-area:chat; align-self:stretch; min-height:0; }
.live-broadcast-layout > #community { display:flex; flex-direction:column; height:auto; max-height:none; }
/* The chat takes the video's height and scrolls inside, instead of stretching the row. */
.live-broadcast-layout > #community, .live-broadcast-layout > .live-chat { contain:size; }
body.live-theater .live-heading-below { display:none !important; }
.live-broadcast-layout > #community .community-layout { flex:1; min-height:0; height:auto; margin:0; }
.live-heading-below { grid-area:title; margin:2px 0 0; }
.live-heading-below h1 { font:700 1.45rem/1.25 Arial,Helvetica,sans-serif; color:#fff; text-transform:none; letter-spacing:0; text-shadow:none; margin:0 0 4px; }
.live-heading-below .live-schedule { color:#aaa; font-size:.9rem; margin:0; }
.live-toolbar:not(:has(> :not([hidden]):not(#live-pip))) { display:none; }
#live-pip { display:none !important; }
body.live-is-replay .live-player-details { display:none; }
/* Chat: no channel title or extras, just "Live chat" / "Chat replay". */
#community[data-broadcast-id] .cm-head { padding:12px 14px; border-bottom:1px solid var(--cm-line, #2a2a2a); }
#community[data-broadcast-id] .cm-head > div > p, #community[data-broadcast-id] #community-presence, #community[data-broadcast-id] #community-pins-toggle, #community[data-broadcast-id] #community-readonly { display:none !important; }
#community[data-broadcast-id] #community-title { font-size:0; margin:0; }
#community[data-broadcast-id] #community-title::before { display:none; }
#community[data-broadcast-id] #community-title::after { content:"Live chat"; font:600 1.05rem Arial,Helvetica,sans-serif; color:#fff; text-transform:none; letter-spacing:0; }
body.live-is-replay #community[data-broadcast-id] #community-title::after { content:"Chat replay"; }
/* Chat lines: small round picture, grey name, message on the same line. No bubbles, times, dates or labels. */
#community[data-broadcast-id] .cm-day { display:none; }
#community[data-broadcast-id] .community-message, #community[data-broadcast-id] .community-message.is-mine { grid-template-columns:24px minmax(0,1fr); gap:10px; padding:5px 14px; align-items:start; }
#community[data-broadcast-id] .community-message > .cm-avatar, #community[data-broadcast-id] .community-message.is-mine > .cm-avatar { display:grid; place-items:center; width:24px; height:24px; min-width:24px; padding:0; overflow:hidden; font-size:.62rem; line-height:1; border-width:0; margin-top:1px; }
#community[data-broadcast-id] .community-message.is-mine > .cm-avatar { grid-column:1; } #community[data-broadcast-id] .community-message.is-mine > .cm-main { grid-column:2; }
#community[data-broadcast-id] .cm-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
#community[data-broadcast-id] .cm-main, #community[data-broadcast-id] .community-message.is-mine .cm-main { display:block; align-items:flex-start; text-align:left; font-size:.92rem; line-height:1.45; }
#community[data-broadcast-id] .cm-meta, #community[data-broadcast-id] .community-message.is-mine .cm-meta { display:inline; margin:0; text-align:left; }
#community[data-broadcast-id] .cm-meta .cm-name, #community[data-broadcast-id] .community-message.is-mine .cm-meta .cm-name { display:inline; font-weight:700; margin-right:8px; text-decoration:none; }
#community[data-broadcast-id] .cm-meta time { display:none; }
#community[data-broadcast-id] .cm-bubble, #community[data-broadcast-id] .community-message.is-mine .cm-bubble { display:inline; padding:0; border-radius:0; background:none; box-shadow:none; color:#f1f1f1; max-width:none; }
#community[data-broadcast-id] .cm-bubble p { display:inline; margin:0; }
#community[data-broadcast-id] .community-message.is-mine .cm-bubble a { color:#ff8a7a; }
@media(max-width:900px) and (orientation:portrait), (max-width:599px) {
    .live-broadcast-layout { grid-template-areas:"player" "title" "toolbar" "chat" "details"; }
    .live-broadcast-layout > #community { height:52dvh; min-height:280px; }
}


/* Replay polish (Gary, Nov 3): plain white title like the mockup, no empty typing area under a chat replay. */
body.brand-page .live-heading.live-heading-below h1 { font:700 1.45rem/1.25 Arial,Helvetica,sans-serif !important; color:#fff !important; text-transform:none !important; letter-spacing:0 !important; text-shadow:none !important; margin:0 0 4px !important; max-width:none; }
body.live-is-replay #community[data-broadcast-id] .cm-compose { display:none !important; }
#community[data-broadcast-id] #community-history { padding-top:6px; }

/* Test stream banner (unpublished broadcast, administrators only). */
.live-preview-banner { margin:12px 0; padding:10px 14px; border:1px dashed #ffc83d; border-radius:6px; background:rgba(255,200,61,.08); color:#ffe6a6; font-size:.9rem; }
.live-preview-banner strong { margin-right:8px; padding:2px 8px; border-radius:3px; background:#ffc83d; color:#111; font:700 .75rem Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.06em; }
body.live-theater .live-preview-banner { position:fixed; z-index:1006; left:50%; top:12px; transform:translateX(-50%); margin:0; background:rgba(20,16,0,.85); }

/* Next broadcast card under "Missed a broadcast?" (Gary, Nov 5). */
.live-next { display:grid; grid-template-columns:240px minmax(0,1fr); gap:20px; align-items:center; max-width:760px; margin:22px auto 0; text-align:left; padding:16px; background:rgba(0,0,0,.62); border:1px solid rgba(255,42,31,.55); border-radius:10px; box-shadow:0 0 22px rgba(255,42,31,.22); }
.live-next-thumb img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:6px; border:1px solid #2a2a2a; background:#140807; }
.live-next-label { display:block; margin-bottom:6px; font:700 .72rem Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#ff4433; }
.live-next h2 { margin:0 0 6px; font:400 clamp(1.3rem,2.2vw,1.8rem)/1.05 Anton,Impact,sans-serif; text-transform:uppercase; letter-spacing:.02em; }
.live-next h2 a { color:#f2efe6; text-decoration:none; }
.live-next-when { margin:0 0 10px; color:#e8e4da; font-size:.98rem; }
.live-countdown { display:flex; gap:8px; margin-bottom:12px; }
.live-countdown span { min-width:62px; padding:6px 8px 4px; border:1px solid rgba(255,255,255,.18); border-radius:6px; background:rgba(0,0,0,.55); text-align:center; }
.live-countdown b { display:block; font:400 1.6rem/1 Anton,Impact,sans-serif; color:#ff4433; text-shadow:0 0 8px rgba(255,42,31,.7); }
.live-countdown small { display:block; margin-top:4px; font:700 .6rem Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#9a9a9a; }
.live-next-actions { display:flex; gap:10px; flex-wrap:wrap; }
.live-next-button { display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:6px; border:1px solid #f2f2f2; color:#fff; text-decoration:none; font-weight:700; font-size:.88rem; background:rgba(0,0,0,.4); }
.live-next-button.is-primary { border-color:#ff2a1f; box-shadow:0 0 10px rgba(255,42,31,.45); }
.live-next-button:hover { color:#fff; background:rgba(255,42,31,.2); }
@media (max-width:767px) { .live-next { grid-template-columns:1fr; margin:18px 0 0; text-align:center; } .live-countdown, .live-next-actions { justify-content:center; } }