/* buka-watch · watch.css - series page and player.

   Amber #F5B405 on Ink #0A0A0A, Inter, matching the Buka system on
   watchbuka.com. Mobile-first and deliberately plain: the audience is on
   cheap Android handsets inside the TikTok and Facebook in-app browsers,
   where every kilobyte and every layout shift is measured as friction. No
   animation library, no scroll effects, no web fonts beyond the two
   already self-hosted. */

@import url('./fonts.css');

:root {
  --amber: #F5B405;
  --amber-press: #D89D04;
  --ink: #0A0A0A;
  --ink-800: #141414;
  --ink-700: #1E1E1E;
  --ink-600: #2A2A2A;
  --ink-400: #6B6B6B;
  --ink-300: #9A9A9A;
  --white: #FAFAFA;
  --text: #E4E4E4;
  --text-mut: var(--ink-300);
  --sans: 'Inter', system-ui, -apple-system, 'Roboto', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --r-md: 10px;
  --r-lg: 16px;
  --tap: 44px;
  --gutter: 20px;
  --max: 640px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--ink); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
a { color: var(--amber); }
button { font: inherit; color: inherit; }
h1, h2 { margin: 0; color: var(--white); }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---- top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--ink-600);
  background: var(--ink);
}
.brand-mark { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark svg { height: 18px; width: auto; }
.brand-mark b { font-weight: 900; letter-spacing: 0.02em; color: var(--white); font-size: 15px; }

/* ---- series ---- */
.series { max-width: var(--max); margin-inline: auto; padding-bottom: 48px; }

.hero { position: relative; }
.hero picture, .hero img { width: 100%; }
/* The poster art carries two things this page must not show: a "Sepedi"
   language badge across the top (we are serving the English master) and
   the series title baked into the lower third, which would collide with
   the H1 sitting over the fade. The crop keeps the usable middle band. */
.hero img {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 45%;
  max-height: 52svh;
}
/* The poster fades into the page rather than ending on a hard edge, so
   the copy below reads as one surface on a small screen. */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0), var(--ink) 92%);
  pointer-events: none;
}
.hero-copy {
  position: relative;
  z-index: 1;
  margin-top: -80px;
  padding: 0 var(--gutter);
  display: grid;
  gap: 12px;
}
.eyebrow {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}
.disp {
  font-weight: 900;
  font-size: clamp(2.4rem, 13vw, 3.5rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.disp .hl { color: var(--amber); }
.synopsis { color: var(--text); font-size: 16px; max-width: 42ch; }
.meta { color: var(--text-mut); font-size: 13px; }

/* ---- episode list ---- */
.episodes { padding: 32px var(--gutter) 0; }
.episodes h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px; }

.ep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.ep {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--tap);
  padding: 8px;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ep:active { background: var(--ink-700); }

.ep-thumb {
  display: grid;
  place-items: center;
  width: 72px;
  aspect-ratio: 9 / 14;
  border-radius: 6px;
  background: var(--ink-700) center / cover no-repeat;
  overflow: hidden;
}
.ep-num { font: 700 20px/1 var(--sans); color: var(--ink-400); }
.ep-thumb.has-thumb .ep-num { display: none; }

.ep-meta { display: grid; gap: 3px; min-width: 0; }
.ep-title { font-weight: 600; color: var(--white); font-size: 15px; }
.ep-sub { font: 500 12px/1.3 var(--mono); color: var(--text-mut); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ep-badge {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(245, 180, 5, 0.35);
  border-radius: 999px;
  padding: 2px 7px;
}

/* Amber play triangle, drawn in CSS so it costs no request. */
.ep-play {
  width: 0; height: 0;
  margin-right: 10px;
  border-left: 12px solid var(--amber);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.site-foot {
  margin-top: 40px;
  padding: 24px var(--gutter) 0;
  border-top: 1px solid var(--ink-600);
  color: var(--ink-400);
  font-size: 12px;
  display: grid;
  gap: 8px;
}

/* ---- player stage ----
   The master is 480x848. The frame is sized to that exact ratio so the
   Stream player never letterboxes inside its own iframe, and the ink
   surround is where the title and the next control live rather than a
   black bar. */
.stage {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--ink);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
}
.video-mount {
  position: relative;
  width: 100%;
  max-width: min(100vw, calc(100svh * 480 / 848));
  aspect-ratio: 480 / 848;
  background: #000;
  display: grid;
  place-items: center;
}
.video-frame { width: 100%; height: 100%; border: 0; }

.video-missing {
  padding: 24px;
  text-align: center;
  color: var(--text-mut);
  font-size: 14px;
}
.video-missing small { color: var(--ink-400); }
.video-missing code { font-family: var(--mono); font-size: 12px; color: var(--amber); }

.stage-back {
  justify-self: start;
  margin: 10px 0 0 var(--gutter);
  padding: 10px 14px;
  min-height: var(--tap);
  background: none;
  border: 1px solid var(--ink-600);
  border-radius: 999px;
  color: var(--text-mut);
  font-size: 13px;
  cursor: pointer;
}
.stage-foot {
  width: 100%;
  max-width: var(--max);
  padding: 12px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.stage-title { font-weight: 600; color: var(--white); font-size: 15px; }

/* Autoplay refused by the webview: one obvious tap target, over the
   frame, rather than a viewer staring at a still image. */
.tap-to-play {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 21;
  padding: 16px 28px;
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

/* ---- buttons ---- */
/* Deliberately NOT a flex container. Button labels are sentences with
   inline spans in them ("Pay <span>R10</span> · unlock all 10 episodes"),
   and a flex container discards the whitespace-only text nodes between
   its items, so the label renders as "PayR10· unlock". */
.btn {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  text-align: center;
}
.btn--primary { background: var(--amber); color: var(--ink); }
.btn--primary:active { background: var(--amber-press); }
.btn--primary[disabled] { opacity: 0.6; cursor: default; }
.btn--quiet { background: none; color: var(--text-mut); font-weight: 500; text-decoration: underline; }
.btn--ghost { background: none; border-color: var(--ink-600); color: var(--text); font-size: 14px; width: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}