#live-programme-update{display:block;padding:8px 12px;font-size:.75rem;color:#ffdd60;text-align:right}
#live-programme-update[hidden]{display:none}
.live-screen .live-pause-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#16171b}
.live-pause-indicator{position:absolute;bottom:8px;right:8px;color:white;background:#16171bdb;padding:3px 8px;border-radius:6px;font-size:.75rem}

#question-form[hidden], .question-success[hidden] { display:none; }
.question-success {
  display:grid;
  justify-items:center;
  gap:12px;
  padding:24px 0 14px;
  color:#a8f4c1;
}
.question-success:not([hidden]) + #question-status {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
.question-success-mark {
  width:64px;
  height:64px;
  overflow:visible;
  animation:question-confirm-pop .48s cubic-bezier(.2,.85,.35,1.25) both;
}
.question-success-mark circle { fill:#1b5537; stroke:#64e89b; stroke-width:2; }
.question-success-mark path {
  fill:none;
  stroke:#b6ffd0;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  animation:question-confirm-draw .35s .18s ease-out both;
}
@keyframes question-confirm-pop {
  from { opacity:0; transform:scale(.65); }
  to { opacity:1; transform:scale(1); }
}
@keyframes question-confirm-draw {
  from { stroke-dashoffset:1; }
  to { stroke-dashoffset:0; }
}
@media (prefers-reduced-motion:reduce) {
  .question-success-mark, .question-success-mark path { animation:none; }
}
.live-stream-frame{pointer-events:none}
.live-stream-sound {
  position:absolute;
  bottom:12px;
  left:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
}
.live-stream-sound svg { width:20px; height:20px; flex:none; }
.live-stream-sound[data-muted="true"] .live-sound-on,
.live-stream-sound[data-muted="false"] .live-sound-off { display:none; }
.live-stream-sound:disabled { visibility:hidden; }
@media (hover:hover) and (pointer:fine) {
  .live-stream-sound { opacity:0; pointer-events:none; }
  .live-screen:hover .live-stream-sound,
  .live-stream-sound:focus-visible { opacity:1; pointer-events:auto; }
}
@media (prefers-reduced-motion:no-preference) {
  .live-stream-sound { transition:opacity .18s ease; }
}

.live-sound-reminder-action {
  display:inline-block;
  min-height:44px;
  padding:4px 12px;
  border:0;
  border-radius:6px;
  background:var(--accent, #ffd200);
  color:#16171b;
  font:inherit;
  cursor:pointer;
}

.live-screen video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.live-screen:fullscreen { width:100%; height:100%; }
.live-stream-settings {
  position:absolute;
  bottom:12px;
  right:12px;
  display:flex;
  gap:6px;
}
.live-stream-sound,
.live-stream-settings :is(summary, button) {
  min-height:44px;
  border:1px solid #62646e;
  border-radius:10px;
  background-color:#292b32;
  color:#f8f8fa;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.live-stream-sound[data-muted="true"] {
  border-color:var(--accent);
  background-color:var(--accent);
  color:#161523;
}
.live-quality { position:relative; }
.live-quality summary {
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  list-style:none;
}
.live-stream-sound > span,
.live-quality summary > span { position:relative; top:.05em; }
.live-quality summary::-webkit-details-marker { display:none; }
.live-quality[open] summary svg { transform:rotate(180deg); }
.live-quality fieldset {
  position:absolute;
  z-index:1;
  inset-inline-end:0;
  bottom:calc(100% + 8px);
  display:grid;
  min-inline-size:160px;
  margin:0;
  padding:5px;
  border:1px solid #62646e;
  border-radius:10px;
  background:#292b32;
  box-shadow:0 6px 20px #0006;
}
.live-quality fieldset button {
  padding:.10em 10px 0;
  border:0;
  border-radius:6px;
  text-align:start;
  white-space:nowrap;
}
.live-quality fieldset button:hover:not(:disabled) { background:#3c3f49; }
.live-quality fieldset button[aria-pressed="true"] { color:var(--accent); }
.live-quality fieldset button:disabled { opacity:.65; cursor:default; }
.live-stream-settings > button { width:44px; padding:0; }
.live-stream-settings svg { vertical-align:middle; }
.live-stream-sound:focus-visible,
.live-stream-settings :is(summary, button):focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
@media (hover:hover) {
  .live-stream-sound:hover,
  .live-stream-settings :is(summary, button):hover:not(:disabled) { border-color:var(--accent); }
  .live-stream-sound[data-muted="true"]:hover { background-color:#efc300; }
}
@media (hover:hover) and (pointer:fine) {
  .live-stream-settings { opacity:0; pointer-events:none; }
  .live-screen:hover .live-stream-settings,
  .live-stream-settings:focus-within,
  .live-stream-settings:has(.live-quality[open]) { opacity:1; pointer-events:auto; }
}
@media (max-width:480px) {
  .live-stream-sound { bottom:8px; left:8px; gap:5px; padding:4px 7px; font-size:.8rem; }
  .live-stream-settings { bottom:8px; right:8px; font-size:.8rem; }
}
@media (max-width:380px) {
  .live-stream-settings { top:8px; bottom:auto; }
  .live-quality fieldset { top:calc(100% + 8px); bottom:auto; }
}

.live-fullscreen {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  inline-size:100%;
  block-size:100%;
  border:0;
  background:#15161a;
}
.live-viewport-fullscreen { overflow:hidden; }
.live-viewport-fullscreen .live-fullscreen {
  position:fixed;
  inset:0;
  z-index:1000;
  block-size:100dvh;
}
.live-fullscreen #watch { display:flex; flex-direction:column; min-height:0; }
.live-fullscreen .live-screen { flex:1; min-height:0; aspect-ratio:auto; }
.live-fullscreen .live-side {
  --live-side-width:clamp(260px,30vw,380px);
  inline-size:0;
  min-height:0;
  overflow:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  background:#292b32;
  box-shadow:inset 1px 0 #444650;
  opacity:0;
  visibility:hidden;
  transition:inline-size .3s cubic-bezier(.2,.75,.3,1), opacity .2s ease,
    visibility 0s linear .3s;
}
.live-fullscreen .live-side > * { min-inline-size:var(--live-side-width); }
.live-fullscreen.live-side-open .live-side,
.live-fullscreen .live-side:has(#live-announcements > *) {
  inline-size:var(--live-side-width);
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}
.live-fullscreen:not(.live-side-open) .live-side:has(#live-announcements > *) .question-panel {
  display:none;
}
.live-side-header { display:none; }
.live-fullscreen.live-side-open .live-side-header {
  position:sticky;
  z-index:2;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-block-end:1px solid #444650;
  background:#292b32;
  color:#f8f8fa;
}
.live-side-close {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 10px;
  border:1px solid #62646e;
  border-radius:8px;
  background:#363942;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.live-side-close:hover { border-color:var(--accent); }
.live-side-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.live-fullscreen #live-announcements:not(:empty) {
  display:grid;
  gap:10px;
  padding:14px;
}
.live-fullscreen #live-announcements .event-notice {
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:10px;
  margin:0;
  padding:12px;
  border-radius:12px;
  box-shadow:0 4px 12px #0003;
}
.live-fullscreen #live-announcements .event-notice-icon { width:18px; height:18px; margin-top:3px; }
.live-fullscreen #live-announcements .event-notice p { font-size:.85rem; line-height:1.5; }
.live-fullscreen #live-announcements .event-notice-close { width:32px; height:32px; margin:-5px -5px 0 0; }
.live-fullscreen .live-sound-reminder-action { margin-block-start:6px; }
.live-stream-settings > button[hidden] { display:none; }
.live-side-toggle[aria-expanded="true"] { color:var(--accent); }
@media (orientation:portrait) {
  .live-fullscreen {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
  }
  .live-fullscreen .live-side {
    --live-side-width:100%;
    inline-size:100%;
    max-block-size:0;
    box-shadow:inset 0 1px #444650;
    transition-property:max-block-size, opacity, visibility;
  }
  .live-fullscreen.live-side-open .live-side,
  .live-fullscreen .live-side:has(#live-announcements > *) { max-block-size:45dvh; }
}
@media (orientation:landscape) and (max-width:740px) {
  .live-fullscreen .live-side { --live-side-width:min(42vw,300px); }
  .live-fullscreen .live-stream-sound > span {
    position:absolute;
    inline-size:1px;
    block-size:1px;
    overflow:hidden;
    clip-path:inset(50%);
  }
}
@media (prefers-reduced-motion:reduce) {
  .live-fullscreen .live-side { transition:none; }
}