/* Reference geometry from the approved fresh browser evidence; own ilove skin. */
body {
  background:
    radial-gradient(ellipse at 8% -10%, rgb(255 23 79 / 30%), transparent 34%),
    radial-gradient(ellipse at 96% 4%, rgb(177 0 255 / 20%), transparent 30%),
    radial-gradient(ellipse at 50% 22%, rgb(122 15 43 / 26%), transparent 42%),
    linear-gradient(#090007, #08030d 44%, #020104);
}

.app-header {
  --header-height: 57px;
  position: fixed;
  inset: 0 0 auto;
  min-height: calc(var(--header-height) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  background: rgb(9 0 7 / 97%);
}

.header-inner { max-width: none; margin-inline: 0; }
.header-actions .icon-btn { width: 44px; height: 44px; }

/* Fixed navigation has a real space reservation on every non-player route. */
.page { padding-top: calc(57px + env(safe-area-inset-top) + 48px); }
.detail-page { padding-top: calc(57px + env(safe-area-inset-top) + 28px); }

.home-page {
  --page-gutter: 16px;
  --rail-card-width: 136.333333px;
  max-width: none;
  padding-inline: var(--page-gutter);
}

.home-page > section + section { margin-top: 39px; }
.home-page .section-heading {
  min-height: 28px;
  margin-bottom: 13px;
}
.home-page .section-heading h1,
.home-page .section-heading h2 {
  font-size: 20px;
  font-weight: 900;
  line-height: 28px;
  color: #f8fdff;
}
.home-page .section-heading .text-btn {
  /* Keep a 44px hit target without adding height to the compact title row. */
  margin-block: -8px;
}
.home-page .section-description { margin: 0 0 13px; }
.home-page .drama-rail {
  gap: 12px;
  scroll-padding-inline: var(--page-gutter);
}
.home-page .drama-card {
  flex-basis: var(--rail-card-width);
  width: var(--rail-card-width);
  border: 1px solid rgb(255 23 79 / 16%);
  border-radius: 12px;
  background: linear-gradient(rgb(255 255 255 / 5.5%), rgb(122 15 43 / 8%));
  box-shadow: 0 10px 23px rgb(0 0 0 / 34%), 0 0 12px rgb(122 15 43 / 14%);
}
.home-page .poster-wrap { border-radius: 11px; }
.home-page .drama-card h3 {
  min-height: 35.36px;
  margin: 7px 6px 8px;
  color: rgb(246 251 255 / 94%);
  font-size: 13px;
  font-weight: 700;
  line-height: 17.68px;
}

@media (min-width: 600px) {
  .page { padding-top: calc(57px + env(safe-area-inset-top) + 64px); }
  .detail-page { padding-top: calc(57px + env(safe-area-inset-top) + 28px); }
  .home-page { padding-top: calc(57px + env(safe-area-inset-top) + 48px); }
}

@media (min-width: 1024px) {
  .app-header { --header-height: 56px; }
  .page { padding-top: calc(56px + env(safe-area-inset-top) + 64px); }
  .detail-page { padding-top: calc(56px + env(safe-area-inset-top) + 28px); }
  .home-page {
    --rail-card-width: 131.333333px;
    padding-top: calc(56px + env(safe-area-inset-top) + 48px);
  }
  .home-page .drama-card h3 {
    min-height: 32.64px;
    font-size: 12px;
    line-height: 16.32px;
  }
}