/* milliWatched — the milliSweeper site's layout, in milliWatched's palette.
   Dark-first, one accent, light mode as a single variable override.

   The ground and the accent are the app's own (#161826 and #B5ABFC), so
   the site and the app read as the same product. Gold (#C9B27A) is brand
   only — the icon and the wordmark's script "milli" — never state, and
   never twice on a screen. */

/* ─── Variables ─────────────────────────────────────────────────────────── */

:root {
  --bg: #161826;
  --card: rgba(255, 255, 255, 0.06);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.72);
  --border: rgba(255, 255, 255, 0.10);
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  --radius: 16px;
  --max: 920px;
  --btn-active: rgba(255, 255, 255, 0.14);
  --btn-hover: rgba(255, 255, 255, 0.07);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f5f8;
    --card: rgba(0, 0, 0, 0.04);
    --text: rgba(0, 0, 0, 0.88);
    --muted: rgba(0, 0, 0, 0.62);
    --border: rgba(0, 0, 0, 0.08);
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.10);
    --btn-active: rgba(0, 0, 0, 0.10);
    --btn-hover: rgba(0, 0, 0, 0.05);
  }
}

/* Home page overrides */
body.page--home {
  --max: 980px;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1100px 700px at 20% -10%, rgba(121, 108, 191, 0.42), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(31, 51, 64, 0.55), transparent 55%),
    radial-gradient(900px 700px at 50% 115%, rgba(10, 0, 0, 0.28), transparent 55%),
    var(--bg);
  color: var(--text);
}

a { color: inherit; }

/* ─── Layout ─────────────────────────────────────────────────────────────── */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px 18px 60px;
}

header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 18px;
}

/* ─── Typography ─────────────────────────────────────────────────────────── */

.title {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

body.page--home .title {
  font-size: 36px;
}

.subtitle {
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 76ch;
  line-height: 1.55;
  font-size: 15px;
}

h2 {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

p, li {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14.5px;
}

ul { padding-left: 18px; margin: 10px 0 0; }
li { margin: 6px 0; }

/* ─── Card ───────────────────────────────────────────────────────────────── */

.card {
  grid-column: span 12;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ─── Buttons & Links ────────────────────────────────────────────────────── */

.ctaRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.10);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }

.smallLink {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 13.5px;
}

/* ─── App Store badge ────────────────────────────────────────────────────── */

.appstore-badge img {
  height: 44px;
  display: block;
}

.appstore-badge:hover { opacity: 0.85; }

/* ─── Badge ──────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

/* ─── Note & Callout ─────────────────────────────────────────────────────── */

.note {
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.callout {
  border: 1px solid rgba(181, 171, 252, 0.30);
  background: rgba(181, 171, 252, 0.09);
  border-radius: 16px;
  padding: 14px 14px;
  margin-top: 12px;
}

.callout h2 { margin-bottom: 6px; }

.callout p {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ─── Inline code ────────────────────────────────────────────────────────── */

.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  color: var(--text);
}

/* ─── Wordmark ───────────────────────────────────────────────────────────── */

.wordmark { white-space: nowrap; }

/* The script "milli", as in the app. One of only two places gold appears. */
.wordmark .milli {
  font-family: "Snell Roundhand", "Apple Chancery", cursive;
  font-style: normal;
  font-weight: 700;
  color: #c9b27a;
  font-size: 1.16em;
  padding-right: 0.02em;
}

.wordmark .watched { letter-spacing: 0.01em; }

/* ─── Attribution ────────────────────────────────────────────────────────── */

/* TMDB and JustWatch attribution is a product requirement, not decoration:
   it belongs with the material it describes, and removing the line alone
   is a bug. */
.attribution {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.attribution a { text-decoration: underline; text-underline-offset: 3px; }

/* ─── Screenshots (home) ─────────────────────────────────────────────────── */

.screensHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.screensHeader h2 { margin-bottom: 0; }

.deviceToggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.deviceBtn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 5px 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.deviceBtn.active {
  background: var(--btn-active);
  color: var(--text);
}

.deviceBtn:hover:not(.active) {
  background: var(--btn-hover);
}

.screensGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}

.shot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.shot .frame {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  aspect-ratio: 4 / 3;   /* iPad captures */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.shot .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screensGrid.iphone .shot {
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}

.screensGrid.iphone .shot .frame {
  aspect-ratio: 9 / 19.5;
}

.shotCaption {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/* ─── Feature highlights (home) ──────────────────────────────────────────── */

.features {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.feature {
  grid-column: span 12;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 12px 12px;
}

.feature strong {
  color: var(--text);
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  letter-spacing: -0.01em;
}

/* ─── Numbered steps (purchases) ─────────────────────────────────────────── */

.steps {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0;
}

.steps li {
  counter-increment: step;
  margin: 10px 0;
  padding-left: 38px;
  position: relative;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

footer {
  margin-top: 22px;
  color: var(--muted);
  font-size: 12.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
}

.footerLinks { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (min-width: 700px) {
  .screensGrid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  .card.half { grid-column: span 6; }
}

@media (min-width: 920px) {
  .feature { grid-column: span 4; }
}

@media (min-width: 1100px) {
  .screensGrid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── milliGames family badge (footer) ──────────────────────────────────── */

.footerBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
}

.footerBadge:hover { filter: brightness(1.08); color: var(--text); }
.footerBadge img { display: block; border-radius: 3px; }

/* ─── Shared link ────────────────────────────────────────────────────────── */
/*
 * A page one person sent another. It is read once, on a phone, by
 * somebody deciding whether they care — so it is one card, art first,
 * and nothing to scroll past before the answer.
 */

.share {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 620px) {
  .share {
    grid-template-columns: 220px 1fr;
    align-items: start;
  }
}

.shareArt img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* People are the only 1:1 art, as in the app (D6b). */
.shareArt.isPerson img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 38%;
  border-radius: 50%;
  max-width: 190px;
}

.shareArtEmpty {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  font-size: 44px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.shareKicker {
  margin: 0 0 4px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.shareTitle {
  margin: 0;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.shareSubtitle {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.shareOverview {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
  max-width: 60ch;
}

/* Cast. A wrapping grid, not a rail — the app's cast scrolls because a
   screen can be swiped; a page is read once, so the whole list is simply
   there. None of it is a link: a reader who was sent this is being shown
   what the app holds, not handed a catalogue to browse in a browser.

   The circle is CSS over TMDB's 2:3 headshot. There is no face detection
   out here, so the crop sits high, where a portrait's subject usually is. */

.castGrid {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  align-items: start;
  gap: 16px 10px;
}

.castGrid.isSmall {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 14px 8px;
}

.castPerson {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 5px;
  min-width: 0;
}

.castPhoto {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 1px solid var(--border);
  background: var(--card);
  display: block;
}

.isSmall .castPhoto {
  width: 52px;
  height: 52px;
}

.castInitials {
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.isSmall .castInitials { font-size: 14px; }

/* Two lines' worth of room whether or not the name needs it, so the
   character lines below sit on one baseline across a row. Without it a
   row of six reads as six separate columns that happen to be adjacent. */
.castName {
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  min-height: 2.5em;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* One line, cut with an ellipsis. A character name is a label here, not
   a thing to read — "Andy Dufresne's Wife" wrapping under a 52px circle
   turns a tidy grid into a ragged one. */
.castRole {
  max-width: 100%;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.isSmall .castName { font-size: 12px; }
.isSmall .castRole { font-size: 11px; }

/* More cast, folded on a phone. Eighteen faces in one column put several
   screens between the reader and the trailers, so it arrives closed and
   is one tap away. The label is the whole 44px row, not a word to aim at. */

.castMoreToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 8px 0 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}

.castMoreToggle::-webkit-details-marker { display: none; }

.castMoreCount {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* A chevron that turns, so the row says it opens before it is tapped. */
.castMoreToggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: -3px 0 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.castMore[open] > .castMoreToggle::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.castMore[open] > .castGrid { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .castMoreToggle::after { transition: none; }
}

/* Wide enough to take the list in at a glance: shown, with no toggle —
   the same label the page had before it folded. Only where the browser
   can open a closed <details> from CSS; elsewhere it stays a working
   disclosure at every width, which is a fallback and not a breakage. */
@supports selector(::details-content) {
  @media (min-width: 620px) {
    .castMore::details-content {
      content-visibility: visible;
      display: contents;
    }

    .castMoreToggle {
      display: block;
      min-height: 0;
      margin: 20px 0 8px;
      cursor: default;
      pointer-events: none;
    }

    .castMoreToggle::after,
    .castMoreCount { display: none; }

    .castMore > .castGrid { margin-top: 0; }
  }
}

/* Trailers. Text rows, never thumbnails — a YouTube still would tell
   Google which title is being read about before anyone chose to go
   there. The arrow means the tap leaves the site, and is the one mark
   that says so; the site has no accent token and this is not the place
   to invent one. */

.shareLabel {
  margin: 20px 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.shareVideos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-width: 44ch;
}

.videoLink {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  text-decoration: none;
}

.videoLink:hover { background: var(--btn-hover); }
.videoLink:active { transform: translateY(1px); }

.videoPlay {
  font-size: 12px;
  line-height: 1;
  opacity: 0.75;
}

.videoText {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.videoName {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoMeta {
  font-size: 12.5px;
  color: var(--muted);
}

.videoOut {
  font-size: 13px;
  color: var(--muted);
  opacity: 0.8;
}

/* Said to a screen reader, not to a sighted reader who has the arrow. */
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.shareNote {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  opacity: 0.85;
}

.wordmarkLink {
  text-decoration: none;
  color: inherit;
}