/* ============================================================
   ROLLIT — THE DAILY RAIL  (css/dailyrail.384feb97.css)
   ------------------------------------------------------------
   The strip pinned above the home feed.

   IT MUST NOT LOOK LIKE A FRAME. The feed below it is a river of
   posts; anything that borrowed their shape would read as one and
   dilute them. So: a lettered TODAY header, a hard-edged container,
   and no avatar row anywhere. It is a billboard, not a post.

   TWO SLIDE SHAPES, ON PURPOSE — see js/dailyrail.6136ff76.js.

     A BEAT (a trailer, a date) IS a picture. Full-bleed backdrop,
     scrim, type on top. The studio's image is the reason the slide
     exists, so it gets the whole slide.

     A DAILY GAME is an invitation, not a picture, and drawing it as
     a beat made it read as an advert for a film called "Guess
     today's frame". It gets a framed PANEL on the left holding the
     thing being asked about, and the ask on the right. The panel is
     small, ringed and obviously an object — that is what stops it
     reading as decoration, and it is what lets Reel Daily's still be
     shown at all: as a background it was either legible, which
     spoils the puzzle, or blurred to mud, which wastes it.

   THE TRACK SLIDES, THE SLIDES DO NOT FADE. A fade cross-dissolves
   two backdrops into mud; a translate keeps each picture whole and
   tells you which way you moved.
   ============================================================ */

.dr-rail {
  position: relative;
  margin: 0 0 18px;
  border: 1px solid var(--border2);
  border-radius: 14px;
  background: var(--bg2);
  overflow: hidden;
}

/* ---- header ---- */

.dr-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}

.dr-title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 3px;
  font-size: 14px;
  color: var(--text);
}

.dr-when { font-size: 11px; color: var(--dim); }

.dr-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.dr-arrow {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
}
.dr-arrow:hover { background: var(--surface); color: var(--text); }

.dr-dots { display: flex; align-items: center; gap: 5px; padding: 0 2px; }
.dr-dot {
  width: 6px; height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dim);
  cursor: pointer;
  transition: background .18s ease, width .18s ease;
}
.dr-dot.is-on { background: var(--text); width: 16px; border-radius: 3px; }

.dr-x {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font-size: 14px;
}
.dr-x:hover { background: var(--surface); color: var(--text); }

/* ---- the moving part ---- */

.dr-view { overflow: hidden; width: 100%; }

.dr-track {
  display: flex;
  width: 100%;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .dr-track { transition: none; }
}

/* EVERY SLIDE IS AS TALL AS THE TALLEST. They are different shapes with
   different amounts of copy, and left to themselves a beat came out 40px
   shorter than the Cast Grid slide — so sliding onto it exposed a dead strip
   under a backdrop that is supposed to be full bleed. Stretching costs the
   short slides some air and costs the rail nothing. */
/* min-width is 100%, NOT 0. .dr-link is a flex column, so a slide whose only
   width instruction is a percentage basis can be measured against its own
   content — circular, and it resolves to the longest word. Pinning each slide
   to the view's width takes the question away. */
.dr-slide { flex: 0 0 100%; min-width: 100%; display: flex; }

.dr-link {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 164px;
  text-decoration: none;
  color: inherit;
}

.dr-daily-in, .dr-beat .dr-body { flex: 1 0 auto; }

/* ============================================================
   A BEAT — trailer, date
   ============================================================ */

.dr-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 26%;
  opacity: .62;
}
.dr-art-none { background: linear-gradient(120deg, var(--bg3), var(--bg2)); opacity: 1; }

/* The scrim is doing the accessibility work: every headline sits on an
   arbitrary studio backdrop, so the floor under the type has to be ours rather
   than whatever the marketing department chose. */
.dr-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg2) 6%, rgba(15,16,24,.88) 46%, rgba(15,16,24,.35) 100%);
}

.dr-beat .dr-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 18px 18px;
  max-width: 76%;
}

/* ============================================================
   A DAILY GAME — panel + ask
   ============================================================ */

.dr-daily {
  /* A wash of the game's own colour, so the two game slides read as a pair and
     neither reads as a film. */
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--dr-a) 13%, transparent), transparent 62%),
    var(--bg2);
}

.dr-daily-in {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
}

.dr-panel { flex: 0 0 40%; max-width: 210px; min-width: 118px; }

.dr-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* The holder. A ring and a hard shadow so it reads as a thing sitting on the
   slide rather than a hole cut in it. */
.dr-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg3);
  border: 1px solid color-mix(in srgb, var(--dr-a) 38%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.dr-frame-none { display: grid; place-items: center; }

.dr-still {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Heavier than the game's own first step: here it is glimpsed at a fifth of
     the size with no guesses spent. `scale` hides the transparent edge that
     blur leaves behind. */
  filter: blur(18px) saturate(1.2);
  transform: scale(1.25);
}
.dr-frame.is-clear .dr-still { filter: none; transform: none; }

.dr-q {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 46px;
  line-height: 1;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}

/* CAST GRID'S PANEL IS THREE FACES. Nine abstract squares next to a Dune
   backdrop read as a loading state; the game's row headers are real
   photography and are also the most informative thing about today's puzzle. */
.dr-frame-lineup { display: flex; gap: 1px; background: var(--border2); }
.dr-shot {
  flex: 1;
  min-width: 0;
  background-size: cover;
  /* Faces sit high in a TMDB portrait, and a centre crop decapitates them. */
  background-position: center 18%;
  background-color: var(--surface2);
}
.dr-frame-none { display: grid; place-items: center; color: var(--dim); font-size: 26px; }

/* The nine squares live down in the extras now: a progress meter, not the art. */
.dr-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 30px;
  aspect-ratio: 1;
  flex: 0 0 auto;
}
.dr-cell {
  border-radius: 2px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border2);
}
.dr-cell.is-on {
  background: color-mix(in srgb, var(--dr-a) 60%, transparent);
  border-color: var(--dr-a);
}

/* The three columns — the actual question, in one line of chips. */
.dr-cols { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.dr-col {
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   SHARED TYPE
   ============================================================ */

.dr-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dr-a) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--dr-a) 40%, transparent);
  color: var(--dr-a);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.dr-tag i { font-size: 12px; }

.dr-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(22px, 4.4vw, 30px);
  line-height: 1.05;
  letter-spacing: .5px;
  color: var(--text);
}

.dr-sub { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.dr-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dr-a);
}
.dr-cta i { font-size: 14px; transition: transform .16s ease; }
.dr-link:hover .dr-cta i { transform: translateX(3px); }

/* ---- extras ---- */

.dr-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* SIX PIPS. The whole game in one row — understood before it is read, which on
   a slide that may be on screen for seven seconds is the difference between an
   offer and a wall of text. */
.dr-pips { display: inline-flex; gap: 4px; }
.dr-pip {
  width: 15px; height: 15px;
  border-radius: 3px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2);
}
.dr-pip.is-hit   { background: var(--toproll); border-color: var(--toproll); }
.dr-pip.is-miss  { background: var(--flop);    border-color: var(--flop); }
.dr-pip.is-spent { background: var(--dim);     border-color: var(--dim); }

.dr-grid { font-size: 13px; letter-spacing: 1px; }

.dr-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--meh);
  font-weight: 600;
}

.dr-yday { font-size: 11px; color: var(--dim); }

/* ---- phone ---- */

@media (max-width: 640px) {
  .dr-rail { border-radius: 12px; margin-bottom: 14px; }
  .dr-link { min-height: 146px; }
  .dr-beat .dr-body { max-width: 88%; padding: 13px 14px 15px; }
  .dr-scrim {
    background: linear-gradient(90deg, var(--bg2) 4%, rgba(15,16,24,.9) 58%, rgba(15,16,24,.45) 100%);
  }
  .dr-daily-in { gap: 12px; padding: 13px 14px; }
  .dr-panel { flex-basis: 38%; min-width: 104px; }
  .dr-q { font-size: 34px; }
  .dr-pip { width: 13px; height: 13px; }
  /* The column chips wrap to three lines in a 190px copy column and drag every
     slide down with them — the rail is pinned above the feed, so its height is
     rented from the thing people came for. The actor names are the better hook
     and they survive; the columns are one tap away. */
  .dr-cols { display: none; }
  /* The arrows go: a swipe is how this gets driven on a phone, and two 26px
     targets in a header row are a worse offer than the gesture. */
  .dr-arrow { display: none; }
  .dr-dot { width: 7px; height: 7px; }
  .dr-dot.is-on { width: 18px; }
}