/* DMB Live Stories. Colours follow the theme (--color-brand etc.) and fall back to DMB blue. */
.dmb-ls {
  --ls-brand: var(--color-brand, #0b60cb);
  --ls-brand-deep: var(--color-brand-deep, #0847a0);
  --ls-ink: var(--color-brand-ink, #0a2a5c);
  --ls-accent: var(--color-accent, #ffbc7d);
  --ls-live: #ff3b5c;
  --ls-ring: conic-gradient(from 200deg, var(--ls-brand), #6bb0ff, var(--ls-accent), var(--ls-brand));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px 0 24px 20px;
  border-radius: 32px;
  background: linear-gradient(160deg, #eef5fd 0%, #fff 60%);
  box-shadow: inset 0 0 0 1px var(--color-brand-100, #dbe9fa);
  font-family: inherit;
  color: var(--color-ink, #18181b);
}
.dmb-ls::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -140px;
  left: -100px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--color-brand-200, #b6d2f4);
  opacity: 0.55;
  filter: blur(70px);
}
@media (min-width: 768px) {
  .dmb-ls { padding: 28px 0 32px 32px; }
}

/* Header ------------------------------------------------------------------------------------------------------- */
.dmb-ls__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 20px;
  margin-bottom: 18px;
}
@media (min-width: 768px) {
  .dmb-ls__head { padding-right: 32px; margin-bottom: 22px; }
}
.dmb-ls__live {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4d6d, #ff2e57);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  box-shadow: 0 10px 24px -8px rgba(255, 59, 92, 0.7);
}
.dmb-ls__live-icon { width: 18px; height: 18px; }
.dmb-ls__pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.55);
  animation: dmb-ls-pulse 2.2s ease-out infinite;
}
@keyframes dmb-ls-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.5); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(255, 59, 92, 0); }
}
.dmb-ls__titles { min-width: 0; flex: 1; }
.dmb-ls__title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.dmb-ls__sub {
  margin: 4px 0 0;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-muted, #71717a);
}
.dmb-ls__updated {
  display: none;
  flex: none;
  height: 32px;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: var(--color-muted, #71717a);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.06), 0 2px 8px rgba(24, 24, 27, 0.05);
}
@media (min-width: 768px) {
  .dmb-ls__title { font-size: 28px; }
  .dmb-ls__updated { display: inline-flex; }
}
@media (max-width: 520px) {
  .dmb-ls__sub { display: none; }
}

/* Rail --------------------------------------------------------------------------------------------------------- */
.dmb-ls__rail {
  display: flex;
  gap: 14px;
  padding: 10px 20px 34px 18px;
  margin: -10px 0 -26px -18px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dmb-ls__rail::-webkit-scrollbar { display: none; }
.dmb-ls__item { flex: none; margin: 0; scroll-snap-align: start; }

.dmb-ls__card {
  display: block;
  width: 150px;
  padding: 3px;
  border: 0;
  border-radius: 26px;
  background: var(--ls-ring);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s;
  box-shadow: 0 14px 30px -14px rgba(11, 96, 203, 0.55);
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
  .dmb-ls__card { width: 176px; }
}
.dmb-ls__card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -16px rgba(11, 96, 203, 0.6); }
.dmb-ls__card:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: 3px; }
.dmb-ls__card.is-seen {
  background: #d9dee6;
  box-shadow: 0 10px 24px -16px rgba(24, 24, 27, 0.4);
}

.dmb-ls__frame {
  position: relative;
  display: block;
  aspect-ratio: 9 / 15.5;
  overflow: hidden;
  border-radius: 23px;
  background: var(--ls-ink);
  border: 2px solid #fff;
}
.dmb-ls__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dmb-ls__card:hover .dmb-ls__img { transform: scale(1.06); }
.dmb-ls__textbg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 0% 0%, #2f86f0 0%, transparent 60%),
    linear-gradient(160deg, var(--ls-brand), var(--ls-ink));
}
.dmb-ls__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 22, 52, 0.92) 0%, rgba(6, 22, 52, 0.45) 38%, rgba(6, 22, 52, 0) 62%), linear-gradient(to bottom, rgba(6, 22, 52, 0.35), transparent 22%);
}
.dmb-ls__ago {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ls-ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}
.dmb-ls__play {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 42, 92, 0.55);
  color: #fff;
  backdrop-filter: blur(6px);
}
.dmb-ls__play svg { width: 13px; height: 13px; margin-left: 1px; }
.dmb-ls__count {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(10, 42, 92, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  backdrop-filter: blur(6px);
}
.dmb-ls__play + .dmb-ls__count { top: 42px; right: 8px; }
.dmb-ls__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: 12px 12px 13px;
  color: #fff;
}
.dmb-ls__text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.dmb-ls__by {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

/* Viewer ------------------------------------------------------------------------------------------------------- */
.dmb-ls-viewer {
  --ls-brand: var(--color-brand, #0b60cb);
  --ls-ink: var(--color-brand-ink, #0a2a5c);
  --ls-accent: var(--color-accent, #ffbc7d);
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  overflow: hidden;
}
.dmb-ls-viewer::backdrop {
  background: radial-gradient(80% 60% at 50% 0%, rgba(11, 96, 203, 0.35), transparent 70%), rgba(4, 10, 22, 0.94);
  backdrop-filter: blur(18px);
}
.dmb-ls-viewer[open] { display: grid; place-items: center; animation: dmb-ls-in 0.28s ease-out; }
@keyframes dmb-ls-in { from { opacity: 0; } to { opacity: 1; } }

.dmb-ls-stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #06162f;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 700px) {
  .dmb-ls-stage {
    width: min(440px, calc((100dvh - 48px) * 9 / 16));
    height: min(100dvh - 48px, 782px);
    border-radius: 28px;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
}
.dmb-ls-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #06162f;
}
.dmb-ls-media--text {
  display: grid;
  place-items: center;
  padding: 40px 28px;
  background:
    radial-gradient(110% 70% at 0% 0%, #2f86f0 0%, transparent 60%),
    linear-gradient(160deg, var(--ls-brand), var(--ls-ink));
  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.dmb-ls-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(4, 10, 22, 0.6), transparent 22%), linear-gradient(to top, rgba(4, 10, 22, 0.85), transparent 45%);
}
.dmb-ls-bars {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  left: 12px;
  display: flex;
  gap: 4px;
}
.dmb-ls-bar {
  position: relative;
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.32);
}
.dmb-ls-bar > i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
.dmb-ls-bar.is-done > i { transform: scaleX(1); }

.dmb-ls-top {
  position: absolute;
  z-index: 3;
  top: 26px;
  right: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dmb-ls-avatar {
  position: relative;
  display: grid;
  flex: none;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ls-brand), #5ea3ff);
  box-shadow: 0 0 0 2px #fff;
  font-size: 15px;
  font-weight: 600;
}
.dmb-ls-who { min-width: 0; flex: 1; line-height: 1.2; }
.dmb-ls-who b { display: block; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dmb-ls-who small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}
.dmb-ls-who small::before {
  content: "LIVE";
  padding: 1px 6px;
  border-radius: 4px;
  background: #ff3b5c;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.dmb-ls-btn {
  display: grid;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.dmb-ls-btn:hover { background: rgba(255, 255, 255, 0.28); }
.dmb-ls-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dmb-ls-btn svg { width: 18px; height: 18px; }
.dmb-ls-btn[hidden] { display: none; }

.dmb-ls-text {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 46%;
  padding: 56px 20px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  font-size: 16px;
  line-height: 1.45;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to top, rgba(4, 10, 22, 0.7), transparent);
  white-space: pre-line;
}
.dmb-ls-text:empty { display: none; }

.dmb-ls-zone {
  position: absolute;
  z-index: 2;
  top: 78px;
  bottom: 0;
  width: 34%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dmb-ls-zone--prev { left: 0; }
.dmb-ls-zone--next { right: 0; width: 66%; }
.dmb-ls-zone:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: -4px; }
/* Taps on a zone mustn't leave the keyboard frame behind (iPhone Safari counts them as focus-visible). */
@media (hover: none) {
  .dmb-ls-zone:focus-visible { outline: none; }
}
.dmb-ls-stage:focus { outline: none; }

.dmb-ls-nav {
  display: none;
}
@media (min-width: 700px) {
  .dmb-ls-nav {
    position: absolute;
    top: 50%;
    display: grid;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.2s;
  }
  .dmb-ls-nav:hover { background: rgba(255, 255, 255, 0.26); }
  .dmb-ls-nav--prev { left: calc(50% - 220px - 80px); }
  .dmb-ls-nav--next { right: calc(50% - 220px - 80px); }
  .dmb-ls-nav svg { width: 22px; height: 22px; }
}
/* On a phone the story fills the screen: the close button sits at the end of the author row, and
   the row (with the sound button) stops before it. From 700px it is outside the story, in the corner. */
.dmb-ls-close {
  position: absolute;
  z-index: 5;
  top: 27px;
  right: 12px;
}
@media (max-width: 699px) {
  .dmb-ls-top { right: 56px; }
}
@media (min-width: 700px) {
  .dmb-ls-close { top: 22px; right: 22px; width: 46px; height: 46px; }
}

html.dmb-ls-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .dmb-ls__pulse { animation: none; }
  .dmb-ls__card, .dmb-ls__img { transition: none; }
  .dmb-ls-viewer[open] { animation: none; }
}