.live {
  position: relative;
  --live-tube:
    0 0 0 1px var(--mob-magenta),
    0 0 26px -8px var(--mob-magenta),
    inset 0 0 30px -18px var(--mob-magenta);
}

.live__head {
  margin-bottom: .4rem;
}

.live__account:not(:empty) {
  margin-top: var(--sp-4);
}

.live__account [hidden] {
  display: none !important;
}

.live__account .lurk__group {
  width: auto;
  padding-top: 0;
  border-top: 0;
}

.live__bar {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  padding: .95rem 1.25rem;
  margin: 1.6rem 0 clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 20px;
}

.live__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  padding: .38rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink-600);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.live__badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

.live__badge[data-state="live"] {
  color: var(--text);
  border-color: var(--mob-magenta);
  box-shadow: 0 0 20px -6px var(--mob-magenta);
}

.live__badge[data-state="live"] .live__badge-dot {
  background: var(--mob-magenta);
  animation: livePulse 1.8s ease-out infinite;
}

.live__badge[data-state="offline"] .live__badge-dot,
.live__badge[data-state="unknown"] .live__badge-dot {
  background: var(--ink-500);
  box-shadow: inset 0 0 0 1px var(--line);
}

.live__badge[data-state="loading"] .live__badge-dot {
  animation: liveBlink 1.4s ease-in-out infinite;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 var(--mob-magenta); }
  70%  { box-shadow: 0 0 0 11px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes liveBlink {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

.live__bar[data-state="live"] {
  border-color: var(--mob-magenta);
  box-shadow: 0 0 30px -14px var(--mob-magenta), inset 0 0 26px -18px var(--mob-magenta);
}

.live__meta {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 0;
  flex: 1 1 260px;
}

.live__title {
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  font-size: clamp(.95rem, 1.8vw, 1.05rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.live__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.live__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .24rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink-700);
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.live__chip[data-empty="true"] { opacity: .55; }

.live__chip--viewers {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.live__chip--viewers::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mob-magenta);
  box-shadow: 0 0 8px var(--mob-magenta);
}

.live__chip--viewers[data-empty="true"]::before {
  background: var(--ink-500);
  box-shadow: none;
}

.live__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-5), 3vw, var(--sp-7));
  min-width: 0;
}

.live__monitor {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  background: var(--ink-800);
  box-shadow: var(--live-tube);
}

.live__monitor[hidden] { display: none; }

.live__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

@media (min-width: 1100px) {
  .live__monitor[data-chat="open"] .live__grid {
    grid-template-columns: minmax(0, 1fr) var(--live-col-chat);
    align-items: stretch;
  }
}

.live__lurk {
  min-width: 0;
  display: flex;
}

.live__player {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  aspect-ratio: 16 / 9;
  min-height: 180px;
  max-width: 100%;
}

.live__player::before,
.live__player::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--mob-magenta-2);
  opacity: .85;
  pointer-events: none;
  z-index: 3;
}

.live__player::before {
  top: 10px;
  left: 10px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: var(--r-sm);
}

.live__player::after {
  right: 10px;
  bottom: 10px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: var(--r-sm);
}

.live__player[data-state="loaded"]::before,
.live__player[data-state="loaded"]::after {
  display: none;
}

.live__player:fullscreen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}

.live__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-top: 1px solid var(--line);
  background: var(--ink-900);
}

.live__side[hidden] { display: none; }

@media (min-width: 1100px) {
  .live__side {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

.live__side-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem .6rem .55rem 1rem;
  border-bottom: 1px solid var(--line);
}

.live__side-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mob-magenta-2);
}

.live__side-link {
  font-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.live__side-link:hover { color: var(--text); }

.live__side-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.live__side-close:hover {
  color: var(--text);
  border-color: var(--mob-magenta);
}

.live__chat {
  position: relative;
  flex: 1 1 auto;
  height: clamp(360px, 55vh, 560px);
  min-height: 0;
}

@media (min-width: 1100px) {
  .live__chat { height: auto; }
}

.live__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1.1rem;
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--line);
}

.live__toggle[hidden] { display: none; }

.live__toggle[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--mob-magenta);
  box-shadow: 0 0 18px -6px var(--mob-magenta);
}

.live__foot-note {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.live__foot-link {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mob-magenta-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease, text-shadow .25s ease;
}

.live__foot-link:hover {
  color: var(--text);
  text-shadow: 0 0 16px var(--mob-magenta);
}

.live__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--ink-900);
  z-index: 1;
}

.live__facade {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  text-align: center;
  background: var(--ink-800);
}

.live__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.75) brightness(.55) blur(1px);
  transform: scale(1.03);
}

.live__facade-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  max-width: 32ch;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--ink-900);
  box-shadow: 0 24px 60px -30px var(--ink-900);
}

.live__facade-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mob-magenta-2);
}

.live__facade-note {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.live__load { min-width: 190px; justify-content: center; }

.live__player[data-state="loaded"] .live__facade {
  display: none;
}

.live__fallback {
  padding: clamp(1.3rem, 3vw, 2rem);
  border-radius: 24px;
  border-color: var(--mob-vermillion);
  box-shadow: 0 0 32px -18px var(--mob-vermillion);
}

.live__fallback[hidden] { display: none; }

.live__fallback-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
}

.live__fallback-text {
  margin: 0 0 .7rem;
  max-width: 68ch;
  color: var(--text-muted);
  line-height: 1.65;
}

.live__code {
  padding: .12em .45em;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--ink-700);
  color: var(--mob-magenta-2);
  font-size: .88em;
  white-space: nowrap;
}

.live__fallback-links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.1rem;
}

.live__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.6rem;
  margin-top: var(--sp-5);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.live__links-title {
  width: 100%;
  margin: 0 0 .2rem;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

.live__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .25s ease, text-shadow .25s ease;
}

.live__link:hover {
  color: var(--text);
  text-shadow: 0 0 16px var(--mob-magenta);
}

.live__note {
  margin: 0;
  margin-left: auto;
  font-size: .82rem;
  color: var(--text-muted);
}

.live__note strong { color: var(--mob-magenta-2); }

@media (max-width: 767px) {
  .live__note { margin-left: 0; }
  .live__bar { padding: .85rem 1rem; }
  .live__player::before,
  .live__player::after { width: 18px; height: 18px; }
  .live__foot { padding: .8rem 1rem; }
  .live__foot-link { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .live__badge[data-state="live"] .live__badge-dot,
  .live__badge[data-state="loading"] .live__badge-dot {
    animation: none !important;
  }
}

.live__sched {
  margin-top: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  min-width: 0;
}

.live__sched .sched__col-title {
  position: relative;
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}