#stream-empty {
    display: none;
    text-align: center;
    padding: 48px 22px 56px;
    color: var(--text-secondary);
}

/* The placeholder is the empty state with the words taken out. Same 82px mark,
   same rhythm down the page, so when the answer arrives the layout settles
   instead of jumping -- and a fast reply reads as one steady screen rather
   than two. It centers on the visible strip rather than the viewport: the tab
   already pads 60px of header plus the top inset above this box, and the nav
   pill floats over the bottom, so only what is left is fair to center in --
   otherwise the mark sits low, pushed down by a header it cannot see. */
#stream-loading-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* 60px header and the top inset are the parent's padding; 96px is the nav
       pill plus its bottom inset. 32px trims this box's own 16px gutters. */
    min-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px) - 96px - env(safe-area-inset-bottom, 0px) - 32px);
    padding: 24px 22px;
    background: var(--background-color);
    text-align: center;
}

.mobile-stream-loading-mark {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 10%, var(--border-color, rgba(0, 0, 0, 0.08)) 90%);
    border-radius: 26px;
    background:
        radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--text-primary, #111) 5%, transparent) 0 28%, transparent 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-color, #fff) 96%, var(--text-primary, #111) 4%), var(--surface-color, #fff));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

/* Two rings ripple outward from the tower, the way a signal would. The empty
   state draws these same rings holding still; here they carry the waiting. */
.mobile-stream-loading-mark::before,
.mobile-stream-loading-mark::after {
    content: "";
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, transparent);
    border-radius: 999px;
    animation: mobile-stream-loading-ripple 2.4s cubic-bezier(0.33, 0, 0.2, 1) infinite;
}

.mobile-stream-loading-mark::before {
    inset: 29px;
}

.mobile-stream-loading-mark::after {
    inset: 29px;
    animation-delay: 1.2s;
}

@keyframes mobile-stream-loading-ripple {
    0% { inset: 29px; opacity: 0; }
    18% { opacity: 0.58; }
    100% { inset: 8px; opacity: 0; }
}

.mobile-stream-loading-mark i {
    position: relative;
    z-index: 1;
    font-size: 24px;
    color: var(--text-primary, #111);
    -webkit-text-fill-color: var(--text-primary, #111);
    animation: mobile-stream-loading-pulse 2.4s ease-in-out infinite;
}

@keyframes mobile-stream-loading-pulse {
    0%, 100% { opacity: 0.45; }
    18% { opacity: 1; }
}

.mobile-stream-loading-title {
    max-width: 330px;
    margin: 0 auto 6px;
    color: var(--text-primary, var(--text-color));
    font-size: 21px;
    font-weight: 840;
    letter-spacing: 0;
    line-height: 1.18;
}

.mobile-stream-loading-copy {
    max-width: 315px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.55;
    opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-stream-loading-mark::before,
    .mobile-stream-loading-mark::after,
    .mobile-stream-loading-mark i {
        animation: none;
    }
    .mobile-stream-loading-mark::before { inset: 18px; opacity: 0.58; }
    .mobile-stream-loading-mark::after { inset: 29px; opacity: 0.58; }
    .mobile-stream-loading-mark i { opacity: 1; }
}

.mobile-stream-empty-mark {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 10%, var(--border-color, rgba(0, 0, 0, 0.08)) 90%);
    border-radius: 26px;
    background:
        radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--text-primary, #111) 5%, transparent) 0 28%, transparent 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-color, #fff) 96%, var(--text-primary, #111) 4%), var(--surface-color, #fff));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.mobile-stream-empty-mark::before,
.mobile-stream-empty-mark::after {
    content: "";
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, transparent);
    border-radius: 999px;
    opacity: 0.58;
}

.mobile-stream-empty-mark::before {
    inset: 18px;
}

.mobile-stream-empty-mark::after {
    inset: 29px;
}

.mobile-stream-empty-mark i {
    position: relative;
    z-index: 1;
    font-size: 24px;
    color: var(--text-primary, #111);
    -webkit-text-fill-color: var(--text-primary, #111);
}

.mobile-stream-empty-title {
    max-width: 330px;
    margin: 0 auto 6px;
    color: var(--text-primary, var(--text-color));
    font-size: 21px;
    font-weight: 840;
    letter-spacing: 0;
    line-height: 1.18;
}

.mobile-stream-empty-copy {
    max-width: 315px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.55;
    opacity: 0.82;
}

.mobile-stream-empty-go-live {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    margin: 20px auto 0;
    padding: 0 24px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 14%, var(--border-color, transparent));
    border-radius: 999px;
    background: var(--surface-color, #fff);
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.mobile-stream-empty-go-live i,
.mobile-stream-empty-go-live span {
    color: currentColor;
    -webkit-text-fill-color: currentColor;
}

.mobile-stream-empty-go-live:disabled,
.mobile-stream-empty-form button:disabled {
    opacity: 0.72;
}

.mobile-stream-empty-note {
    display: none;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.62;
}

.mobile-stream-empty-signup {
    display: none;
    width: min(100%, 340px);
    margin: 14px auto 0;
}

.mobile-stream-empty-signup-note {
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 780;
    line-height: 1.4;
}

.mobile-stream-empty-form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, var(--border-color) 88%);
    border-radius: 22px;
    background: var(--surface-color, #fff);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.mobile-stream-empty-form input {
    min-width: 0;
    flex: 1;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    padding: 0 13px;
    font-size: 13px;
    font-weight: 720;
    outline: none;
    box-sizing: border-box;
}

.mobile-stream-empty-form input::placeholder {
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    opacity: 0.72;
}

.mobile-stream-empty-form button {
    flex: 0 0 auto;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, var(--border-color, transparent));
    border-radius: 17px;
    background: color-mix(in srgb, var(--text-primary, #111) 4%, var(--surface-color, #fff) 96%);
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    padding: 0 15px;
    font-size: 12px;
    font-weight: 880;
}

.mobile-stream-empty-status {
    min-height: 16px;
    margin-top: 9px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 760;
}

/* Stream Live empty state. The dark broadcast card borrows the signal-first
   hierarchy of the design reference while every control maps to a stream
   source the app can actually publish. */
#stream-empty {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 2px 118px;
    text-align: left;
}

.mobile-stream-empty-hero {
    position: relative;
    overflow: hidden;
    padding: 17px 16px 16px;
    border: 1px solid #292a2e;
    border-radius: 22px;
    background: #111214;
    background-size: cover;
    background-position: center 30%;
    box-shadow: 0 18px 38px -24px rgba(17, 18, 20, 0.75);
    color: #fbfbf9;
}

/* Full-bleed when there's a real photo: the app's own picture is the point,
   so it runs edge to edge behind the header (hidden via body.stream-empty-
   fullbleed, same pattern as the Season Builder detail screen) instead of
   sitting boxed inside a small rounded card. */
/* The header stays (hamburger + bell) but paints no bar: its white fill is
   written inline with !important by applyHeaderTheme in mobile-app-header.js,
   which has a matching stream-empty-fullbleed branch that clears it and turns
   the glyphs white. Only the pseudo layers can be cleared from here. */
html body.stream-active.stream-empty-fullbleed #mobile-app-header::before,
html body.stream-active.stream-empty-fullbleed #mobile-app-header::after {
    background: none !important;
}
/* The stream container keeps 16px side padding and a white fill; on a 3x
   phone the hero's edges rounded a hairline short of the screen and that
   white showed through. Drop the padding and paint the wrappers dark so no
   rounding can show a light edge. */
html body.stream-active.stream-empty-fullbleed #stream-main-area,
html body.stream-active.stream-empty-fullbleed #stream-main-area > .stream-container {
    background: #111214 !important;
}
html body.stream-active.stream-empty-fullbleed #stream-main-area > .stream-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* The stream area reserves the header's height as padding-top (an inline
   html body #stream-main-area rule in mobile.html). With the header gone that
   reservation is just a blank band above the photo, so drop it here too. */
html body.stream-active.stream-empty-fullbleed #stream-main-area {
    padding-top: 0 !important;
}
html body.stream-active.stream-empty-fullbleed #stream-empty {
    padding: 0 !important;
}
/* This screen is the photo and nothing else: no email collect under it, no
   container padding beneath, so a guest has nothing to scroll to. Owners keep
   the Stream-from sources section, which is what can still extend the page. */
html body #stream-empty > .mobile-stream-empty-signup {
    display: none !important;
}
html body.stream-active.stream-empty-fullbleed #stream-main-area > .stream-container {
    padding-bottom: 0 !important;
}
html body.stream-active.stream-empty-fullbleed #stream-main-area {
    overflow: hidden !important;
}
html body.stream-active.stream-empty-fullbleed .mobile-stream-empty-hero:is(.has-photo, .is-owner-golive) {
    position: relative;
    left: 0;
    width: 100%;
    margin-left: 0;
    min-height: 100dvh;
    /* Bottom padding clears the fixed Collect Trading Card / chat dock
       (54px tall, 16px off the bottom) with room to spare, so the title and
       copy never sit underneath it. */
    padding: calc(24px + env(safe-area-inset-top, 0px)) 22px calc(140px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mobile-stream-empty-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8b8b85;
    -webkit-text-fill-color: #8b8b85;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mobile-stream-empty-signal {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    /* Grey: this kicker only shows when nothing is live. */
    background: #8b8b85;
    box-shadow: 0 0 0 4px rgba(139, 139, 133, 0.12);
}
/* A scheduled stream is a promise, not an absence: the dot goes live-green. */
.mobile-stream-empty-hero.is-upcoming .mobile-stream-empty-signal {
    background: #6fe3c6;
    box-shadow: 0 0 0 4px rgba(111, 227, 198, 0.14);
}

.mobile-stream-empty-wave {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 54px;
    margin: 15px 0 17px;
    opacity: 0.95;
}

.mobile-stream-empty-wave span {
    width: 100%;
    min-width: 2px;
    border-radius: 2px;
    background: #2a2b2e;
    transform-origin: bottom center;
    animation: mobile-stream-empty-wave-pulse 1.8s ease-in-out infinite;
}

.mobile-stream-empty-wave span:nth-child(6n + 1) { --wave-h: 24%; background: #6fe3c6; animation-delay: 0ms; }
.mobile-stream-empty-wave span:nth-child(6n + 2) { --wave-h: 48%; animation-delay: 90ms; }
.mobile-stream-empty-wave span:nth-child(6n + 3) { --wave-h: 72%; animation-delay: 180ms; }
.mobile-stream-empty-wave span:nth-child(6n + 4) { --wave-h: 38%; animation-delay: 270ms; }
.mobile-stream-empty-wave span:nth-child(6n + 5) { --wave-h: 88%; animation-delay: 360ms; }
.mobile-stream-empty-wave span:nth-child(6n) { --wave-h: 58%; animation-delay: 450ms; }

@keyframes mobile-stream-empty-wave-pulse {
    0%, 100% { height: calc(var(--wave-h) * 0.55); opacity: 0.65; }
    50% { height: var(--wave-h); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-stream-empty-wave span { animation: none; height: var(--wave-h); }
}

.mobile-stream-empty-hero .mobile-stream-empty-title {
    max-width: none;
    margin: 0;
    color: #fbfbf9;
    -webkit-text-fill-color: #fbfbf9;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.2;
    text-align: left;
}

.mobile-stream-empty-hero .mobile-stream-empty-copy {
    max-width: 340px;
    margin: 7px 0 0;
    color: #b9b9b3;
    -webkit-text-fill-color: #b9b9b3;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    opacity: 1;
    text-align: left;
}

/* mobile.html still contains broad, late-loading light-theme color rules.
   Keep those from washing out this intentionally dark card. */
#stream-main-area #stream-empty .mobile-stream-empty-hero,
#stream-main-area #stream-empty .mobile-stream-empty-hero .mobile-stream-empty-title {
    color: #fbfbf9 !important;
    -webkit-text-fill-color: #fbfbf9 !important;
}

#stream-main-area #stream-empty .mobile-stream-empty-hero .mobile-stream-empty-kicker,
#stream-main-area #stream-empty .mobile-stream-empty-hero .mobile-stream-empty-kicker span:not(.mobile-stream-empty-signal) {
    color: #8b8b85 !important;
    -webkit-text-fill-color: #8b8b85 !important;
}

#stream-main-area #stream-empty .mobile-stream-empty-hero .mobile-stream-empty-copy {
    color: #b9b9b3 !important;
    -webkit-text-fill-color: #b9b9b3 !important;
}

#stream-main-area #stream-empty .mobile-stream-empty-owner-actions .mobile-stream-empty-secondary,
#stream-main-area #stream-empty .mobile-stream-empty-owner-actions .mobile-stream-empty-secondary * {
    color: #fbfbf9 !important;
    -webkit-text-fill-color: #fbfbf9 !important;
}

.mobile-stream-empty-owner-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.mobile-stream-empty-owner-actions button {
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 12px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.mobile-stream-empty-owner-actions button i { font-size: 12px; }

.mobile-stream-empty-secondary {
    border: 1px solid #34353a;
    background: transparent;
    color: #fbfbf9;
    -webkit-text-fill-color: #fbfbf9;
}

.mobile-stream-empty-owner-sources { margin-top: 22px; }

.mobile-stream-empty-owner-sources h4 {
    margin: 0 4px 10px;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mobile-stream-empty-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mobile-stream-empty-source-grid button {
    min-width: 0;
    min-height: 88px;
    padding: 12px;
    border: 1px solid var(--border-color, #eaeae6);
    border-radius: 16px;
    background: var(--surface-color, #fff);
    box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03);
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    cursor: pointer;
}

.mobile-stream-empty-source-grid button > span:last-of-type {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-stream-empty-source-grid strong {
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    font-size: 13px;
    font-weight: 780;
    letter-spacing: -0.02em;
}

.mobile-stream-empty-source-grid small {
    overflow: hidden;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 560;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-stream-source-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 13px;
}

.mobile-stream-source-icon svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: #fff;
}

.mobile-stream-source-icon--twitch { background: #7c4de0; }
.mobile-stream-source-icon--youtube { background: #d92b1f; }
.mobile-stream-source-icon--kick { background: #53fc19; color: #111214; -webkit-text-fill-color: #111214; }
.mobile-stream-source-icon--kick svg { fill: #111214; }
.mobile-stream-source-icon--other { background: #2563eb; }

#stream-empty > .mobile-stream-empty-signup {
    width: min(100%, 360px);
    margin: 18px auto 0;
}

#stream-empty > .mobile-stream-empty-signup .mobile-stream-empty-signup-note {
    margin-bottom: 9px;
    text-align: center;
}

@media (max-width: 350px) {
    .mobile-stream-empty-owner-actions { grid-template-columns: 1fr; }
    .mobile-stream-empty-source-grid { grid-template-columns: 1fr; }
}

#stream-empty-state .mobile-stream-empty-signup {
    width: min(100%, 300px);
    margin-top: 0;
}

.mobile-stream-waitlist-summary {
    margin: -4px 0 12px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 720;
    line-height: 1.4;
}

.mobile-stream-waitlist-list {
    display: grid;
    gap: 8px;
}

.mobile-stream-waitlist-empty {
    padding: 14px;
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 720;
    line-height: 1.4;
}

.mobile-stream-waitlist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface-color, transparent) 82%, transparent);
}

.mobile-stream-waitlist-row a {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    font-size: 12px;
    font-weight: 840;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.mobile-stream-waitlist-row span {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 780;
}

/* ------------------------------------------------------------------------
   Owner placeholder: the stream pass Go Live screen, on the owner's own tab.
   Same photo, same brand block, same red pulsing button (mobile-stream-add-
   composer.css draws it for the pass link; this is that look on the tab
   itself). The guest kicker/wave/title are hidden while it is up.
   ------------------------------------------------------------------------ */
html body.stream-active.stream-empty-fullbleed .mobile-stream-empty-hero.is-owner-golive {
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background-color: #0A0A0C;
    padding: calc(28px + env(safe-area-inset-top, 0px)) 24px calc(18px + var(--mobile-bottom-nav-height, calc(58px + env(safe-area-inset-bottom, 0px))));
}
.mobile-stream-empty-hero.is-owner-golive > :not(.mobile-stream-empty-golive) {
    display: none !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-hero.is-owner-golive .mobile-stream-empty-golive {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 100%;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-brand { margin-top: 34px; text-align: center; }
#stream-main-area #stream-empty .mobile-stream-empty-golive-eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-tagline {
    margin-top: 8px;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
/* Two rings, offset in time, expanding out from the button and fading. */
#stream-main-area #stream-empty .mobile-stream-empty-golive-action::before,
#stream-main-area #stream-empty .mobile-stream-empty-golive-action::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 168px;
    height: 168px;
    margin-left: -84px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 122, 105, 0.8);
    pointer-events: none;
    animation: mobile-stream-empty-golive-ring 2.6s cubic-bezier(.16, .84, .32, 1) infinite;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-action::after { animation-delay: 1.3s; }
@keyframes mobile-stream-empty-golive-ring {
    0% { transform: scale(0.94); opacity: 0.55; }
    70% { opacity: 0.12; }
    100% { transform: scale(1.5); opacity: 0; }
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn,
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn {
    position: relative;
    width: 168px;
    height: 168px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 50% 46%, #FF6A5A 0%, #EE2E1E 55%, #B4140C 100%) !important;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.45),
        inset 0 -10px 18px rgba(0, 0, 0, 0.28),
        0 0 34px 4px rgba(233, 39, 27, 0.55),
        0 20px 44px -16px rgba(0, 0, 0, 0.75) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transform-origin: 50% 50%;
    animation: mobile-stream-empty-golive-pulse 2.6s cubic-bezier(.45, 0, .2, 1) infinite;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn i {
    position: relative;
    font-size: 29px !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn span {
    position: relative;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
@keyframes mobile-stream-empty-golive-pulse {
    0%, 100% { transform: scale(1); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -10px 18px rgba(0, 0, 0, 0.28), 0 0 34px 4px rgba(233, 39, 27, 0.55), 0 20px 44px -16px rgba(0, 0, 0, 0.75); }
    45% { transform: scale(1.045); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -10px 18px rgba(0, 0, 0, 0.28), 0 0 52px 10px rgba(233, 39, 27, 0.75), 0 20px 44px -16px rgba(0, 0, 0, 0.75); }
    70% { transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
    #stream-main-area #stream-empty .mobile-stream-empty-golive-btn { animation: none; }
    #stream-main-area #stream-empty .mobile-stream-empty-golive-action::before,
    #stream-main-area #stream-empty .mobile-stream-empty-golive-action::after { animation: none; display: none; }
}
/* The owner's own scheduled game, under the button: "Up next" and the label. */
#stream-main-area #stream-empty .mobile-stream-empty-golive-next {
    max-width: 300px;
    text-align: center;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-next b {
    display: block;
    font-weight: 700 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 9px !important;
    color: #6fe3c6 !important;
    -webkit-text-fill-color: #6fe3c6 !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-as {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255, 255, 255, 0.65) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.65) !important;
}

/* Starting: the button holds still, the stages draw underneath in white on
   the dark photo (the composer's light version lives in add-composer.css). */
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn.is-busy { animation: none; opacity: 0.85; transform: none; }
#stream-main-area #stream-empty .mobile-stream-empty-golive-status {
    max-width: 300px;
    text-align: center;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 11px !important;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-heading {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 13px !important; font-weight: 700 !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-heading::before {
    content: ''; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #6fe3c6;
    animation: mobile-stream-empty-golive-spin 1s linear infinite;
}
@keyframes mobile-stream-empty-golive-spin { to { transform: rotate(360deg); } }
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-steps { display: flex; gap: 8px; width: 240px; margin: 14px auto 10px; }
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-steps span {
    flex: 1; border-top: 3px solid rgba(255, 255, 255, 0.22); padding-top: 7px;
    font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-steps .is-done { border-color: #6fe3c6; color: #6fe3c6 !important; -webkit-text-fill-color: #6fe3c6 !important; }
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-steps .is-current { border-color: #fff; color: #fff !important; -webkit-text-fill-color: #fff !important; }
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-hint { font-size: 10.5px !important; color: rgba(255, 255, 255, 0.7) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important; }
#stream-main-area #stream-empty .mobile-stream-empty-golive-status[role="alert"] { color: #ffb4a8 !important; -webkit-text-fill-color: #ffb4a8 !important; }
@media (prefers-reduced-motion: reduce) { #stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-heading::before { animation: none; } }