:root {
  /* Warm near-black + a single confident raspberry accent — a deliberate identity, deliberately NOT the
     emerald-teal + indigo + gradient "AI default". One accent, warm neutrals, restrained radii. */
  --bg: #0c0b0f;
  --bg-elev: #17151c;
  --bg-elev2: #221f2a;
  --line: #2f2a38;
  --text: #f3eef0;
  --muted: #a79eae;
  --accent: #ff3d68;
  --accent-2: #ff3d68; /* kept in sync with --accent (was a second gradient stop; single-accent now) */
  /* low-opacity accent wash for hover/active fills (kept in sync with --accent) */
  --accent-wash: rgba(255,61,104,.12);
  --radius: 10px;
  --btn-radius: 9px; /* buttons/chips are gently rounded, not full 999px pills */
  /* Brand/headline face: a serif, on purpose — AI-default UIs are sans-everywhere, so a serif wordmark +
     headings reads as designed. All system fonts, so zero network cost (keeps the speed pillar). */
  --font-brand: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --gap: 14px;
  --max: 1440px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* The `hidden` attribute must always win — class rules like `.agegate`/`.player`
   set `display:grid`, which would otherwise override the UA `[hidden]` rule and
   leave the age gate / player modal permanently on screen. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: var(--btn-radius); border: 1px solid transparent;
  font-weight: 600; cursor: pointer; font-size: 15px;
  transition: transform .08s ease, filter .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--muted); }

/* Inline SVG UI icons (replaced the decorative/nav emoji). Sized to the text, inherit color via currentColor. */
.ico { width: 1.05em; height: 1.05em; vertical-align: -0.15em; flex: none; display: inline-block; }
.ico--live { color: var(--accent); }

/* ---------- Splash / welcome ---------- */
.splash {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg);
  opacity: 1; transition: opacity .35s ease, visibility .35s ease; /* quick, no theatrics */
}
/* Fade IN: shown transparent for one frame, then transitions up to opaque */
.splash.is-entering { opacity: 0; }
/* (glow orb removed — the breathing accent halo was a big "AI landing" tell) */
.splash.is-hiding { opacity: 0; visibility: hidden; }
.splash__inner { position: relative; text-align: center; animation: splash-rise .5s cubic-bezier(.2,.75,.2,1) both; }
.splash__logo {
  position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  color: var(--accent);
}
.splash__logo .wink { width: clamp(72px, 17vw, 104px); height: auto; }
/* Playful periodic blink of the open eye on the splash (subtle, not the old glowing theatrics). */
.splash__logo .wink .blink { transform-box: fill-box; transform-origin: center; animation: zw-blink 3.4s ease-in-out 1s infinite; }
@keyframes zw-blink { 0%, 86%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.12); } }
@media (prefers-reduced-motion: reduce) { .splash__logo .wink .blink { animation: none; } }
/* Two faces stacked in the same cell. Rather than a slow cross-dissolve (which
   ghosts, since the two emoji have different mouths/eyes), the swap is QUICK and
   hidden at the bottom of an eyelid-dip in wink-gesture — so you never see the
   two faces blended; it reads as a blink into a wink. */
.splash__logo span { grid-area: 1 / 1; }
.splash__logo .eye-open { animation: wink-open 2.4s ease-in-out .3s infinite; }
.splash__logo .eye-wink { opacity: 0; animation: wink-close 2.4s ease-in-out .3s infinite; }
.splash__word {
  margin-top: 18px; font-family: var(--font-brand); font-size: clamp(32px, 8vw, 46px); font-weight: 600;
  letter-spacing: -.5px; color: var(--text);
}
.splash__tag { margin-top: 8px; color: var(--muted); font-size: 13px; letter-spacing: .06em; }
.splash__bar { margin: 26px auto 0; width: 150px; height: 3px; border-radius: 999px; background: var(--bg-elev2); overflow: hidden; }
.splash__bar span {
  display: block; height: 100%; width: 38%; border-radius: 999px;
  background: var(--accent);
  animation: splash-load 1.15s ease-in-out infinite;
}
.splash__skip { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: #55555f; font-size: 12px; letter-spacing: .1em; }
@keyframes splash-rise { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes splash-load { 0% { transform: translateX(-140%); } 100% { transform: translateX(360%); } }
@keyframes splash-breathe { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.08); } }
/* Real wink: hold the open face, then briefly cross-fade to the winking face
   (with a tiny scale pop) so it reads as an actual blink of one eye. */
/* Quick swaps, timed to the eyelid-dip bottoms (40% and 60%) so the change of face
   happens while the eye is "shut" — no visible blend of the two emoji. */
@keyframes wink-open  { 0%,38% { opacity: 1; } 41%,59% { opacity: 0; } 62%,100% { opacity: 1; } }
@keyframes wink-close { 0%,38% { opacity: 0; } 41%,59% { opacity: 1; } 62%,100% { opacity: 0; } }
/* Blink → wink → blink: the face squishes vertically (eyelid down) at 40% and 60%
   — the swap hides in those dips — and leans in tilted while winking (48–56%). */
@keyframes wink-gesture {
  0%,30%   { transform: rotate(0deg) scale(1, 1); }
  40%      { transform: rotate(-2deg) scale(1, .82); }
  48%,56%  { transform: rotate(-6deg) scale(1.06, 1.06); }
  60%      { transform: rotate(-2deg) scale(1, .82); }
  70%,100% { transform: rotate(0deg) scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .splash__inner, .splash__logo, .splash__logo span, .splash__bar span, .splash::before { animation: none; }
  .splash__logo .eye-open { opacity: 0; } .splash__logo .eye-wink { opacity: 1; } /* static wink */
  .splash__skip { display: none; }
}

/* ---------- Age gate ---------- */
.agegate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background: radial-gradient(120% 120% at 50% 0%, #16121c, #0c0b0f 60%);
}
.agegate__card {
  max-width: 440px; text-align: center;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 20px; padding: 36px 28px;
}
.agegate__logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-brand); font-size: 24px; font-weight: 600; margin-bottom: 18px; }
.agegate__logo .wink { width: 30px; height: auto; color: var(--accent); }
.agegate__logo span { color: var(--text); }
.agegate__card h1 { font-size: 24px; margin: 0 0 10px; }
.agegate__card p { color: var(--muted); margin: 0 0 22px; }
.agegate__actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.agegate__card small { color: #6a6a78; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 12px clamp(14px, 3vw, 28px);
  background: var(--bg); /* solid — dropped the frosted-glass blur (an AI/template tell) */
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-brand); font-weight: 600; font-size: 20px; letter-spacing: -.3px; white-space: nowrap; }
.brand .wink { width: 24px; height: auto; color: var(--accent); flex: none; }
.brand span { color: var(--text); }
.search { flex: 1; position: relative; }
.search input {
  width: 100%; max-width: 620px; padding: 11px 16px; border-radius: 999px;
  background: var(--bg-elev2); border: 1px solid var(--line); color: var(--text);
  font-size: 15px; outline: none;
}
.search input:focus { border-color: var(--accent-2); }
/* Entity-aware search suggestions (typeahead) */
.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-width: 620px; z-index: 140;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55); padding: 6px; max-height: min(64vh, 480px);
  overflow-y: auto; overscroll-behavior: contain;
}
.suggest__group {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding: 9px 10px 4px; font-weight: 700;
}
.suggest__row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; color: var(--text); cursor: pointer;
  padding: 9px 10px; border-radius: 9px; font-size: 14px; line-height: 1.2;
}
.suggest__row:hover, .suggest__row.is-active { background: var(--bg-elev2); }
.suggest__row.is-active { outline: 1px solid var(--accent); outline-offset: -1px; }
.suggest__icon { flex: 0 0 20px; text-align: center; opacity: .85; }
.suggest__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest__sub { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.suggest__row--search { color: var(--accent); font-weight: 600; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; }

/* Filter chrome — the controls + saved searches + category strip as one sticky
   unit that folds away on scroll-down (reclaiming space) and re-opens via the
   ☰ Filters button. The sticky/background live here now (was on .controls). */
/* Filters live in a full-screen dialog, opened by the always-visible ☰ Filters
   button. No scroll-driven collapse (that jittered) — it's just open or closed. */
.chrome { position: fixed; inset: 0; z-index: 110; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 40px; } /* above the panels overlay (z-100) so Filters opens on top */
.chrome__bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px clamp(14px, 3vw, 28px); border-bottom: 1px solid var(--line); background: var(--bg);
}
.chrome__title { font-weight: 800; font-size: 18px; }
.chrome__close {
  border: none; border-radius: 999px; background: var(--accent);
  color: #fff; font-weight: 700; font-size: 15px; padding: 10px 24px; cursor: pointer;
}
.chrome__close:hover { filter: brightness(1.08); }
/* Inside the dialog: controls wrap, chips flow fully (the dialog scrolls). */
.chrome .controls { flex-wrap: wrap; overflow: visible; }
.chrome .tags, .chrome .tags--cloud { max-height: none; overflow: visible; flex-wrap: wrap; }
.chrome__catshead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(14px, 3vw, 28px) 2px; }
#cats-label { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.chip-sort { display: inline-flex; background: var(--bg-elev2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.chip-sort button { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600; padding: 5px 13px; border-radius: 999px; }
.chip-sort button[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); }
/* ☰ Filters button — always visible in the top bar now */
.filters-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--bg-elev2);
  color: var(--text); border-radius: 999px; padding: 9px 14px; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.filters-toggle:hover { border-color: var(--accent); }
.filters-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
/* 🔴 Live cams button lives in the always-visible top bar (revenue must be findable).
   On phones it collapses to just the 🔴 icon so the search box keeps its width. */
.topbar__live { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
  .topbar { gap: 8px; }
  .topbar__live-txt, .ft-txt { display: none; } /* icon-only Live + Filters → search keeps its width */
  .topbar__live, .filters-toggle { padding-left: 11px; padding-right: 11px; }
}

/* Controls bar — scrolls horizontally on small screens */
.controls {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 10px clamp(14px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
}
.controls::-webkit-scrollbar { display: none; }
.controls select {
  flex: 0 0 auto; padding: 9px 13px; border-radius: 999px; background: var(--bg-elev2);
  border: 1px solid var(--line); color: var(--text); font-size: 14px; cursor: pointer;
}
.reset {
  flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600;
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
}
.reset:hover { background: var(--accent-wash); }
/* Lens switcher — segmented control for the browse axis */
.lens { flex: 0 0 auto; display: inline-flex; background: var(--bg-elev2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lens button {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
}
.lens button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ---------- Tags ---------- */
.tags {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 12px clamp(14px, 3vw, 28px); border-bottom: 1px solid var(--line);
}
.tags::-webkit-scrollbar { display: none; }
/* Tags lens: wrap into a browsable cloud instead of one long scroll row */
.tags--cloud { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; max-height: 148px; }
.chip {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--muted);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: all .12s ease;
}
.chip:hover { color: var(--text); border-color: #3a3a48; }
.chip[aria-pressed="true"] {
  color: #fff; background: var(--accent); border-color: transparent;
}

/* Desktop: a hidden horizontal scrollbar is unreachable with a mouse, so instead
   of hiding filters off the right edge we WRAP them — every filter is visible and
   the bar stays sticky, so you never scroll up to change one. Category chips wrap
   into a compact, scrollable cloud. (Touch screens keep the swipeable single row;
   the mouse-wheel handler in app.js scrolls whatever stays horizontal.) */
@media (min-width: 1000px) {
  .controls { flex-wrap: wrap; overflow: visible; }
  .tags:not(.tags--cloud) { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; max-height: 116px; }
}

/* ---------- Layout ---------- */
main { max-width: var(--max); margin: 0 auto; padding: 18px clamp(14px, 3vw, 28px) 60px; }
.meta { color: var(--muted); font-size: 13px; margin-bottom: 14px; }

/* ---------- Active-filter pills ---------- */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.fpill {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--accent-wash); border: 1px solid var(--accent); color: var(--accent);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600;
}
.fpill .x { opacity: .8; font-weight: 700; }
.fpill:hover { filter: brightness(1.18); }
.fpill--clear { background: transparent; border-color: var(--line); color: var(--muted); }
.fpill--clear:hover { border-color: var(--accent); color: var(--accent); filter: none; }

/* ---------- Home collections (rails) ---------- */
.rails { display: flex; flex-direction: column; gap: 22px; margin-bottom: 28px; }
.rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rail__head h2 { font-size: 16px; margin: 0; }
.rail__more { background: none; border: none; color: var(--accent); font-weight: 700; cursor: pointer; font-size: 13px; white-space: nowrap; }
.rail__row {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; padding-bottom: 2px;
}
.rail__row::-webkit-scrollbar { display: none; }
.rail__card {
  flex: 0 0 auto; width: 220px; text-align: left; background: none; border: none; padding: 0;
  cursor: pointer; color: var(--text); scroll-snap-align: start; text-decoration: none; display: block;
}
.rail__thumb { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--bg-elev2); }
.rail__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .12s ease; }
.rail__card:hover .rail__thumb img { transform: scale(1.04); }
.rail__title {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12px; color: var(--muted); padding: 6px 2px 0;
}
@media (max-width: 620px) { .rail__card { width: 260px; } }

/* Mobile-first: ONE big tile per row so the in-view trailer is large and easy
   to watch — a vertical, one-at-a-time feed. Widen to a grid on bigger screens. */
.grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  max-width: 620px; margin-inline: auto;
}
@media (min-width: 620px) { .grid { max-width: none; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
@media (min-width: 1000px) { .grid { gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }
/* "Bigger thumbnails" setting — fewer, larger tiles (premium tube feel). Mobile is already 1-up. */
@media (min-width: 620px) { body.grid-large .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
@media (min-width: 1000px) { body.grid-large .grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } }

/* ---------- Card (content-first: the card IS the thumbnail) ---------- */
.card {
  display: block; background: var(--bg-elev2); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: transform .1s ease;
  color: inherit; text-decoration: none; /* it's an <a> to the source page */
}
.card:hover { transform: translateY(-2px); }
.card__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--bg-elev2); overflow: hidden; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Consistent "coming alive" feel: every card reacts the same way when active —
   a quick zoom on desktop hover, a slow Ken-Burns zoom on the in-view mobile
   card — regardless of whether it also has a video or frame-scrub preview. */
.card__thumb > img, .card__preview { transition: transform .35s ease, opacity .25s ease; will-change: transform; }
.autoplay-on .card:hover .card__thumb > img, .autoplay-on .card:hover .card__preview { transform: scale(1.06); }
.card.is-active .card__thumb > img, .card.is-active .card__preview { transform: scale(1.1); transition: transform 5s ease-out; }
/* Graceful fallback when a poster fails to load (e.g. expired RedTube thumbs) */
.card__fallback { display: none; }
.card__thumb.noimg, .rail__thumb.noimg { background: linear-gradient(135deg, #16241f, #0e1512); }
/* Branded winking mark behind the title, so a missing poster reads as intentional
   rather than a broken image. */
.card__thumb.noimg::after, .rail__thumb.noimg::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .2;
  background: center / 48px no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 32" fill="none" stroke="%23ff3d68" stroke-width="3" stroke-linecap="round"><circle cx="17" cy="12" r="2.8" fill="%23ff3d68" stroke="none"/><path d="M27 13c2-3 6-3 8 0"/><path d="M14 20c4.5 5.5 15.5 5.5 20 0"/></svg>');
}
.card__thumb.noimg .card__fallback {
  display: flex; position: absolute; inset: 0; z-index: 1; align-items: center; justify-content: center;
  padding: 14px; text-align: center; font-size: 13px; font-weight: 700; color: #cfd6d3;
}
/* metadata overlay — hidden until hover on desktop, kept out of the way on touch */
.card__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px 10px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  opacity: 0; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.card:hover .card__overlay, .card:focus-visible .card__overlay { opacity: 1; transform: none; }
.card__info {
  color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
@media (hover: none) { .card__overlay { display: none; } } /* touch: pure content */
.card__preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: #000; z-index: 1;
}
.card__dur {
  position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 2px 7px; border-radius: 6px;
  background: rgba(0,0,0,.78); font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.card__hd {
  position: absolute; left: 8px; top: 8px; z-index: 2; padding: 2px 6px; border-radius: 5px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
}
.card__ext {
  position: absolute; right: 8px; top: 8px; z-index: 2; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 6px;
  background: rgba(0,0,0,.72); color: #fff; font-size: 13px; font-weight: 800;
}
.card__silent {
  position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 1px 5px; border-radius: 5px;
  background: rgba(0,0,0,.72); font-size: 12px;
}
.card__trend {
  position: absolute; left: 8px; top: 8px; z-index: 2; padding: 2px 6px; border-radius: 5px;
  background: rgba(0,0,0,.72); font-size: 12px; font-weight: 700;
}
/* Native affiliate offer card — on-brand but honestly labeled "Sponsored". */
.card--offer .card__thumb { background: linear-gradient(135deg, #16241f, #0e1512); }
.card__sponsored {
  position: absolute; left: 8px; top: 8px; z-index: 3; padding: 2px 7px; border-radius: 5px;
  background: rgba(0,0,0,.66); color: #cfd6d3; font-size: 10px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
}
.card__offerbadge {
  position: absolute; right: 8px; top: 8px; z-index: 3; padding: 2px 7px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800;
}
.offer__cta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 12px 12px;
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.offer__cta b { font-size: 15px; font-weight: 800; color: #fff; }
.offer__cta > span { font-size: 12px; color: #c3c9cf; }
.offer__go { align-self: flex-start; margin-top: 8px; padding: 5px 12px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 12px; }
/* Save heart on cards */
.card__save {
  position: absolute; right: 8px; top: 8px; z-index: 4; width: 30px; height: 30px; border: none;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: 15px;
  line-height: 1; opacity: .85; transition: transform .1s ease, color .1s ease;
}
.card__save:hover { transform: scale(1.12); opacity: 1; }
.card__save.is-saved { color: var(--accent); opacity: 1; }
.card__save ~ .card__ext, .card__thumb .card__ext { top: 44px; } /* stack ext under the heart */
/* Header pill buttons (Reel / Saved) */
.pillbtn {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--bg-elev2); color: var(--text);
  border-radius: 999px; padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pillbtn:hover { border-color: var(--accent); }
/* Saved-search chips */
.searches { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px 4px; }
.search-chip { display: inline-flex; align-items: center; background: var(--bg-elev2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.search-chip__apply { background: none; border: none; color: var(--text); cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 6px 6px 12px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-chip__apply:hover { color: var(--accent); }
.search-chip__del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 6px 10px 6px 4px; }
.search-chip__del:hover { color: var(--accent); }
.search-chip.has-new { border-color: var(--accent); }
/* Playlists: chip bar reuses .search-chip; the "add to playlist" popover: */
.pl-menu { position: fixed; z-index: 120; min-width: 220px; max-width: 280px; max-height: 60vh; overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.pl-menu__head { font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 8px 8px; }
.pl-menu__row { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 0; color: var(--text);
  font-size: 14px; text-align: left; padding: 9px 8px; border-radius: 8px; cursor: pointer; }
.pl-menu__row:hover { background: var(--bg-elev2); }
.pl-menu__check { flex: none; font-size: 15px; }
.pl-menu__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-menu__n { flex: none; font-size: 12px; color: var(--muted); }
.pl-menu__new { color: var(--accent); font-weight: 700; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.search-chip__new { flex: none; background: var(--accent); color: #fff; border: none; cursor: pointer; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 8px; margin: 3px 2px; border-radius: 999px; white-space: nowrap; }
.search-chip__new:hover { filter: brightness(1.1); }

/* Ad slots (config-driven; hidden when empty). Labeled 'Ad' for transparency. */
.adslot { text-align: center; overflow-x: auto; }
.adslot--header, .adslot--footer { max-width: 1400px; margin: 10px auto; padding: 0 16px; }
.adslot--infeed { grid-column: 1 / -1; padding: 10px; background: var(--bg-elev); border: 1px dashed var(--line); border-radius: 12px; }
.adslot--player { margin: 8px 0; }
.adslot::before { content: 'Ad'; display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); opacity: .45; margin-bottom: 4px; }
/* No ad may float over a full-screen overlay (ad iframes use huge z-indexes). Hide
   the page ad slots whenever reel/collage/player is open — the player keeps its own. */
body.is-overlay .adslot:not(.adslot--player) { display: none !important; }
/* Live cams widget */
.live { max-width: 1400px; margin: 10px auto; padding: 0 16px; }
.live iframe { width: 100%; border: 0; border-radius: 12px; }
/* Live cams v2 panel: category switcher + open link + framed embed */
.live-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.live-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.live-cat { border: 1px solid var(--line); background: var(--bg-elev2); color: var(--text); border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer; }
.live-cat:hover { border-color: var(--accent); }
.live-cat.is-on { background: var(--accent); color: #fff; border-color: transparent; }
.live-open { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 13px; white-space: nowrap; }
.live-open:hover { border-color: var(--accent); color: var(--accent); }
.live-frame { position: relative; }
.live-frame iframe { width: 100%; height: min(640px, 82vh); border: 0; border-radius: 12px; display: block; }
.live-loading {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  background: linear-gradient(135deg, #16241f, #0e1512); border-radius: 12px;
  color: var(--muted); font-size: 15px; font-weight: 600;
}
.live-fallback { text-align: center; line-height: 1.6; }
.live-fallback a {
  display: inline-block; margin-top: 10px; padding: 9px 18px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 800;
}

/* Accessibility: honor reduced-motion — kill transitions/animations/auto-scroll.
   (Scroll-into-view trailer autoplay is also disabled in JS under this setting.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .card:hover, .card.is-active .card__thumb > img, .card.is-active .card__preview,
  .card:hover .card__thumb > img, .card:hover .card__preview, .rail__card:hover .rail__thumb img { transform: none !important; }
}
/* Visible keyboard focus for accessibility */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.pillbtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }

/* Reel mode — full-screen vertical snap feed */
/* Mobile "front doors" into the immersive modes — Panels (flagship) leads, Reels beside it.
   Desktop already has these in the view-mode toggle, so this band is mobile-only. */
.discover { display: none; }
@media (max-width: 640px) {
  .discover {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 4px 0 12px;
  }
  .disco {
    display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 0; border-radius: 16px;
    cursor: pointer; text-align: left; color: #fff; box-shadow: 0 6px 22px rgba(0,0,0,.32);
  }
  .disco:active { transform: scale(.98); }
  /* Panels = the flagship, so it gets the full accent gradient; Reels a calmer companion tint. */
  .disco--panels { background: var(--accent); }
  .disco--reels  { background: linear-gradient(120deg, #3a3350, #2a2740); }
  .disco__icon {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.20); font-size: 16px;
  }
  .disco__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
  .disco__text b { font-size: 15.5px; font-weight: 800; }
  .disco__text small { font-size: 11.5px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Tile controls + media — shared by the Panels view (each .split__cell renders these) */
.collage__media { position: absolute; inset: 0; }
.collage__vid, .collage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.collage__ctl { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; gap: 6px; }
.collage__focus {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff;
  font-size: 15px; cursor: pointer; display: grid; place-items: center;
}
.collage__fit {
  height: 34px; padding: 0 12px; border-radius: 17px; border: 0; background: rgba(0,0,0,.55); color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer; display: grid; place-items: center;
}
.collage__full {
  width: 34px; height: 34px; border-radius: 50%; border: 0; color: #fff;
  font-size: 15px; cursor: pointer; display: grid; place-items: center;
  background: var(--accent); /* the payoff — tinted */
}
/* Pause/scrub toggle (roadmap B / item 1) — same round chip as ⛶ */
.collage__pause {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff;
  font-size: 15px; cursor: pointer; display: grid; place-items: center;
}
.collage__focus:hover, .collage__fit:hover, .collage__pause:hover { background: var(--accent); }
.collage__save { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 15px; cursor: pointer; display: grid; place-items: center; }
.collage__save:hover { background: rgba(0,0,0,.72); }
.collage__save.is-saved { color: var(--accent); background: rgba(0,0,0,.68); }
/* Any video in a panel tile fills the tile (cover) so it reads like a reel — and tapping to hear a
   clip never "zooms out" to a letterbox. Cross-origin tube iframes still contain (can't crop them). */
.split__cell .collage__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* (A) auto-fit + (B) toggle: landscape tiles (or user-toggled) show the WHOLE clip (contain), so a
   landscape clip isn't center-cropped; portrait stays cover (fills like a reel). */
.split__cell.is-fit .collage__media video, .split__cell.is-fit .collage__img { object-fit: contain; }
.collage__media.is-playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
/* The panel you're hearing: accent ring + a 🔊 badge (sound-follows-focus). */
.split__cell.has-audio { outline: 2px solid var(--accent); outline-offset: -2px; }
.collage__mute { position: absolute; bottom: 10px; right: 11px; z-index: 2; font-size: 15px; opacity: 0; transition: opacity .2s ease; text-shadow: 0 1px 4px rgba(0,0,0,.85); pointer-events: none; }
.split__cell.has-audio .collage__mute { opacity: 1; }
.collage__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 92px 9px 11px; font-size: 12px; font-weight: 600;
  color: #eef1ef; background: linear-gradient(transparent, rgba(0,0,0,.8)); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Auto-hide panel chrome after a lull (like the reel chrome) so it stops blocking content; any
   tap / move / scroll brings it back. */
.split__bar, .collage__ctl, .collage__save, .collage__label { transition: opacity .35s ease; }
.split--idle .split__bar, .split--idle .collage__ctl, .split--idle .collage__save, .split--idle .collage__label { opacity: 0; pointer-events: none; }
/* Scrub mode (roadmap B/1): the ⏸ button pauses the tile + turns on native controls. Lift the whole media
   (video + its controls) above the tile overlays so the bottom scrubber is actually tappable, show the entire
   clip (contain, not cover), and hide the bottom label/mute that would sit over the scrubber. Keep ↺ reachable
   and un-faded (beats the idle rule above via source order) so you can return to the looping preview. */
.split__cell.is-scrubbing .collage__media { z-index: 5; }
.split__cell.is-scrubbing .collage__media video { object-fit: contain; background: #000; }
.split__cell.is-scrubbing .collage__label, .split__cell.is-scrubbing .collage__mute { display: none; }
.split__cell.is-scrubbing .collage__ctl { z-index: 6; opacity: 1; pointer-events: auto; }
@media (orientation: landscape) and (max-height: 540px) {
  .split__close { top: calc(env(safe-area-inset-top) + 12px); } /* clear the safe-area inset in landscape */
}
/* Split view — two scroll-snap panels (reuses .collage__ctl/__sound/__play/__label/__media) */
/* Panels view — 2/3/4 scroll-snap feeds (reuses .collage__ctl/__sound/__play/__label/__media) */
.split { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; }
.split__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); background: rgba(0,0,0,.55); }
.split__bar-right { display: flex; align-items: center; gap: 8px; }
.panels__count { display: inline-flex; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.panels__count button { border: 0; background: transparent; color: #cfd8d5; font-weight: 700; font-size: 14px; width: 38px; height: 32px; cursor: pointer; }
.panels__count button + button { border-left: 1px solid rgba(255,255,255,.14); }
.panels__count button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.split__act { border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.4); color: #fff; font-weight: 600; font-size: 13px; padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.split__act:hover { background: var(--accent); border-color: transparent; }
.split__close { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 18px; cursor: pointer; }
.split__close:hover { background: var(--accent); }
.split__cols { flex: 1 1 auto; min-height: 0; display: flex; }
.split__col { flex: 1 1 0; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.split__col::-webkit-scrollbar { display: none; }
/* Desktop (mouse): show a scrollbar so it's obvious each panel scrolls to the next clip. */
@media (hover: hover) and (pointer: fine) {
  .split__col { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
  .split__col::-webkit-scrollbar { display: block; width: 9px; }
  .split__col::-webkit-scrollbar-thumb { background: rgba(255,255,255,.32); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
  .split__col:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.5); background-clip: padding-box; }
}
/* One-time "scroll" nudge, centred at the bottom; dismissed on first scroll. */
.split__hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5;
  background: rgba(0,0,0,.72); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: 999px;
  pointer-events: none; animation: split-hint-bob 1.6s ease-in-out infinite; }
@keyframes split-hint-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } }
.split__col + .split__col { border-left: 1px solid rgba(255,255,255,.12); }
.split__cell { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #0e1512; cursor: pointer; }
.split__cell.has-audio { box-shadow: inset 0 0 0 3px var(--accent); }
/* The SELECTED audio column stays framed even when its current tile has no in-panel audio (a tube/
   Bluesky tile scrolled in) — so you never lose track of which panel is live. Thinner + translucent,
   so the sounding tile's brighter inner ring (above) still reads as "this exact clip is playing". */
.split__col.is-live { box-shadow: inset 0 0 0 2px rgba(18, 217, 154, .5); }
/* GRID layout (desktop toggle, ▦): landscape-shaped cells so landscape clips fill each cell instead of a
   tall column. 2/3 panels → stacked wide rows; 4 → 2×2 (a landscape clip in each corner, per owner). Columns
   (default ▤) stay tall — better for portrait/RedGifs. Mobile always uses the responsive block below. */
.split--grid .split__cols { flex-direction: column; }
.split--grid .split__col + .split__col { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
.split--grid .split__cols[data-count="4"] { flex-direction: row; flex-wrap: wrap; }
.split--grid .split__cols[data-count="4"] .split__col { flex: 0 0 50%; width: 50%; height: 50%; }
.split--grid .split__cols[data-count="4"] .split__col + .split__col { border-top: 0; }
.split--grid .split__cols[data-count="4"] .split__col:nth-child(even) { border-left: 1px solid rgba(255,255,255,.12); }
.split--grid .split__cols[data-count="4"] .split__col:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
@media (max-width: 640px) {
  /* 2 & 3 panels → stacked rows; 4 → 2×2 grid (columns get too narrow otherwise) */
  .split__cols { flex-direction: column; }
  .split__col + .split__col { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .split__cols[data-count="4"] { flex-direction: row; flex-wrap: wrap; }
  .split__cols[data-count="4"] .split__col { flex: 0 0 50%; width: 50%; height: 50%; }
  .split__cols[data-count="4"] .split__col + .split__col { border-top: 0; }
  .split__cols[data-count="4"] .split__col:nth-child(even) { border-left: 1px solid rgba(255,255,255,.12); }
  .split__cols[data-count="4"] .split__col:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
}
.reel { position: fixed; inset: 0; z-index: 100; background: #000; }
.reel__track { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scrollbar-width: none; }
.reel__track::-webkit-scrollbar { display: none; }
/* scroll-snap-stop: always → one slide per swipe; momentum can't overshoot past the previous
   slide's snap point and land forward (the "swipe back glitches forward" bug). Panels already have it. */
.reel__slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; overflow: hidden; }
.reel__poster { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(24px) brightness(.35); transform: scale(1.1); }
.reel__mount { position: relative; width: 100%; max-width: 780px; aspect-ratio: 16 / 9; background: #000; }
/* Vertical clips fill the screen instead of letterboxing in a 16:9 box. */
.reel__mount.is-portrait { aspect-ratio: 9 / 16; max-width: none; width: auto; height: 100dvh; max-height: 100dvh; }
/* Landscape direct-video clips fill the screen (cover-crop) rather than sit as a letterboxed strip. */
.reel__mount.is-fill { max-width: none; width: 100%; height: 100dvh; max-height: 100dvh; aspect-ratio: auto; }
.reel__mount.is-fill video { object-fit: cover; }
.reel__mount video, .reel__mount iframe { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; }
/* Landscape tube iframes can't be cover-cropped cross-origin — fill the portrait surround with a blurred
   poster backdrop (Shorts-style) so the letterbox reads as intentional instead of a stark black box. */
.reel__mount.is-letterbox { max-width: none; width: 100%; height: 100dvh; max-height: 100dvh; aspect-ratio: auto; display: grid; place-items: center; overflow: hidden; }
.reel__mount.is-letterbox::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--reel-bg) center / cover no-repeat; filter: blur(30px) brightness(.42); transform: scale(1.2); }
.reel__mount.is-letterbox iframe, .reel__mount.is-letterbox img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 100%; }
.reel__mount .player__external { width: 100%; height: 100%; }
.reel__meta { position: absolute; left: 18px; right: 78px; bottom: 26px; z-index: 2; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.reel__title { font-weight: 700; font-size: 15px; }
.reel__sub { font-size: 13px; opacity: .9; margin-top: 2px; }
.reel__creator { margin-top: 9px; display: inline-flex; align-items: center; gap: 5px; background: rgba(18,217,154,.18); border: 1px solid rgba(18,217,154,.6); color: #fff; border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 700; cursor: pointer; text-shadow: none; }
.reel__creator span { opacity: .8; font-weight: 500; }
.reel__creator:active { transform: scale(.96); }
.reel__actions { position: absolute; right: 16px; bottom: 26px; z-index: 2; display: flex; flex-direction: column; gap: 14px; }
.reel__save, .reel__src, .reel__details, .reel__full, .reel__fit {
  width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff;
  font-size: 20px; cursor: pointer; display: grid; place-items: center; text-decoration: none;
}
.reel__save.is-saved { color: var(--accent); }
.reel__fit.is-on { color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); } /* Fit active */
/* 🎬 full-length = the payoff; tint it so it reads as the primary jump, not just another icon. */
.reel__full { background: var(--accent); }
.reel__mute {
  position: absolute; top: 14px; left: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 18px; cursor: pointer;
}
.reel__close {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 18px; cursor: pointer;
}
.reel__smooth {
  position: absolute; top: 14px; left: 66px; z-index: 3; height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid transparent; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.reel__smooth.is-on { color: var(--accent); border-color: var(--accent); background: rgba(0,0,0,.72); }
/* Auto-hide reel chrome while watching; any tap / mouse-move / scroll brings it back. */
.reel__close, .reel__mute, .reel__smooth, .reel__meta, .reel__actions { transition: opacity .35s ease; }
.reel--idle .reel__close, .reel--idle .reel__mute, .reel--idle .reel__smooth,
.reel--idle .reel__meta, .reel--idle .reel__actions { opacity: 0; pointer-events: none; }
.card__hd + .card__trend { top: 34px; } /* stack under HD when both present */
.card__views { display: block; margin-top: 2px; font-size: 11px; color: #d7d7de; opacity: .9; }
.rail__views { display: block; font-size: 11px; color: var(--muted); padding: 2px 2px 0; }
.badge-pop {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text);
  background: var(--bg-elev2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px;
}
.badge-silent {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted);
  background: var(--bg-elev2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px;
}

/* Inline expand-in-place player (setting: "expand in place") */
.card.is-inlined { display: none; } /* hide the card while its expanded player is open — no duplicate */
.inline-player { grid-column: 1 / -1; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 2px 0 6px; }
.inline-media { aspect-ratio: 16 / 9; background: #000; }
.inline-media iframe, .inline-media video { width: 100%; height: 100%; border: 0; display: block; }
.inline-media .player__external { width: 100%; height: 100%; }
.inline-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; }
.inline-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.inline-close { flex: 0 0 auto; border: none; border-radius: 999px; background: var(--bg-elev2); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 12px; }
.chip--hd[aria-pressed="true"] { background: linear-gradient(135deg, #17c964, #0b8a44); }
.card__play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; opacity: 0;
  background: rgba(13,13,16,.35); transition: opacity .15s ease; pointer-events: none;
}
.card:hover .card__play { opacity: 1; }
.card__play span {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center; font-size: 20px; padding-left: 3px;
}
/* .card__tag is reused for category chips in the player */
.card__tag { font-size: 11px; color: var(--muted); background: var(--bg-elev2); padding: 2px 8px; border-radius: 6px; }

.divider {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
  margin: 18px 2px 8px; color: var(--muted); font-size: 13px; font-weight: 600;
  letter-spacing: .3px; text-transform: uppercase;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.sentinel { height: 40px; }
.empty { text-align: center; color: var(--muted); padding: 60px 20px; }

/* ---------- Toast (status confirmations) ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 300;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--text);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 34px rgba(0,0,0,.5); max-width: calc(100vw - 32px);
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Loading skeletons ---------- */
/* Shimmer placeholders shown while the index + first shard load, so entering the
   site doesn't flash blank. They sit in the same grid and are replaced the moment
   real cards render (applyFilters clears the grid). */
.skel-card { aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--bg-elev2); position: relative; overflow: hidden; }
.skel-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.06) 55%, transparent 80%);
  background-size: 220% 100%; animation: skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes skel-shimmer { from { background-position: 220% 0; } to { background-position: -120% 0; } }
/* Small inline spinner (e.g. "loading more" at the infinite-scroll sentinel) */
.spinner {
  width: 22px; height: 22px; margin: 8px auto; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .skel-card::after { animation: none; opacity: .45; }
  .spinner { animation: none; }
}

/* ---------- Footer ---------- */
.foot {
  max-width: var(--max); margin: 0 auto; padding: 20px clamp(14px, 3vw, 28px) 40px;
  color: #6a6a78; font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap;
}
.foot__sep { opacity: .5; }

/* ---------- Player modal ---------- */
/* Top-aligned (not centered): with related content the frame can exceed the
   visible viewport — centering would push the video's top off-screen. Top-align
   + safe-area + dvh keeps the video visible right below the notch/URL bar. */
.player {
  position: fixed; inset: 0; z-index: 50; display: grid; justify-items: center; align-items: start;
  padding: 16px; padding-top: max(16px, env(safe-area-inset-top));
}
.player__backdrop { position: absolute; inset: 0; background: rgba(5,5,8,.86); backdrop-filter: blur(6px); }
.player__frame {
  position: relative; z-index: 1; width: min(1000px, 100%);
  max-height: calc(100dvh - 32px); overflow-y: auto; overflow-x: hidden; /* never let the details view scroll sideways */
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px;
}
/* Top bar holds the close button ABOVE the video, so it never covers the
   embed's own controls (mute/fullscreen) and gives breathing room at the top. */
.player__bar {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--bg-elev); border-bottom: 1px solid var(--line);
}
.player__save {
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev2); color: var(--text);
  cursor: pointer; font-size: 14px; font-weight: 600; padding: 8px 16px;
}
.player__save.is-saved { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.player__nav-group { display: inline-flex; gap: 8px; }
.player__nav { border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev2); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 600; padding: 8px 14px; }
.player__nav:hover { border-color: var(--accent); color: var(--accent); }

/* Settings popover (⚙) */
.settings-wrap { position: relative; flex: 0 0 auto; }
/* fixed (not absolute) so the scrolling/overflow controls bar can't clip it */
.settings-menu { position: fixed; z-index: 990; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-width: 220px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 34px rgba(0,0,0,.5); }
.settings-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.settings-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.settings-sep { border: none; border-top: 1px solid var(--line); margin: 2px 0; width: 100%; }
.settings-item { text-align: left; background: var(--bg-elev2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.settings-item:hover { border-color: var(--accent); }
.inline-actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.inline-save { border: none; border-radius: 999px; background: var(--bg-elev2); color: var(--text); cursor: pointer; font-size: 14px; padding: 6px 12px; }
.inline-save.is-saved { color: var(--accent); }
.player__close {
  border: none; border-radius: 999px; background: var(--bg-elev2); color: var(--text);
  cursor: pointer; font-size: 14px; font-weight: 600; padding: 8px 16px;
}
.player__close:hover { background: #2a2a34; }
@media (max-width: 620px) {
  .player { padding: 0; }
  .player__frame { max-height: 100dvh; min-height: 100dvh; border-radius: 0; border: none; }
  /* Lots of buttons (Save, Playlist, Prev/Next/Reels, Close) — let them wrap and shrink
     instead of forcing the bar wider than the screen (which caused sideways scroll). */
  .player__bar { flex-wrap: nowrap; gap: 6px; }
  .player__bar .lbl { display: none; }           /* icon-only on mobile → bar stays ONE line (was wrapping to 2) */
  .player__save, .player__nav, .player__close { padding: 8px 12px; font-size: 15px; }
  .player__nav-group { gap: 6px; }
}
.player__mount { aspect-ratio: 16 / 9; background: #000; }
/* Vertical clips get a tall, centered frame instead of a letterboxed 16:9 one —
   blown up like Reels rather than a small strip. */
.player__mount.is-portrait { aspect-ratio: 9 / 16; height: 82dvh; width: auto; max-width: 100%; margin: 0 auto; }
.inline-media.is-portrait { aspect-ratio: 9 / 16; height: 80dvh; width: auto; max-width: 100%; margin: 0 auto; }
.player__mount video, .player__mount iframe { width: 100%; height: 100%; border: 0; object-fit: contain; }
/* Best bits — key-frame bookmarks under the player (RedGifs clips only). */
.bits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 4px 2px; }
.bits__mark, .bits__play {
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.06); color: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; white-space: nowrap; transition: background .15s, border-color .15s;
}
.bits__mark:hover, .bits__play:hover { background: rgba(255,255,255,.12); }
.bits__play.is-playing { background: var(--accent); color: #fff; border-color: transparent; }
.bits__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bits__chip { display: inline-flex; align-items: stretch; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; }
.bits__seek { border: 0; background: rgba(255,255,255,.04); color: inherit; cursor: pointer; font-size: 12px; font-weight: 700; padding: 5px 4px 5px 11px; font-variant-numeric: tabular-nums; }
.bits__seek:hover { background: rgba(255,255,255,.14); }
.bits__del { border: 0; background: transparent; color: var(--muted, #999); cursor: pointer; font-size: 11px; padding: 5px 9px 5px 5px; }
.bits__del:hover { color: #ff6b6b; }
.bits__hint { font-size: 12px; color: var(--muted, #999); opacity: .85; }
/* Trailer-first preview for full-length videos (frame loop + "Watch full") */
.player__gone { width: 100%; height: 100%; min-height: 240px; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: 32px; color: var(--muted); background: var(--bg-elev); }
.player__gone p { margin: 0; font-size: 15px; max-width: 30ch; }
.player__preview { position: relative; width: 100%; height: 100%; background-size: cover; background-position: center; display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.player__preview-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player__watchfull {
  position: relative; z-index: 2; border: none; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700; padding: 13px 26px; box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.player__watchfull:hover { filter: brightness(1.08); }
.player__external {
  width: 100%; height: 100%; display: grid; place-items: center;
  background-size: cover; background-position: center; position: relative;
}
.player__external::before { content: ""; position: absolute; inset: 0; background: rgba(5,5,8,.66); }
.player__ext-cta { position: relative; text-align: center; padding: 20px; }
.player__ext-cta p { margin: 0 0 14px; color: var(--text); font-size: 15px; }
.player__source { margin: 2px 0 12px; }
.player__source a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-size: 13px; font-weight: 700;
  border: 1px solid var(--accent); border-radius: 999px; padding: 6px 14px;
}
.player__source a:hover { background: var(--accent-wash); }
.player__full { display: inline-flex; align-items: center; gap: 6px; margin: 0 10px 12px 0; cursor: pointer;
  color: var(--accent); font-size: 13px; font-weight: 700; border: 1px solid var(--accent); border-radius: 999px; padding: 6px 14px; background: var(--accent-wash); }
.player__full:hover { background: var(--accent); color: #fff; border-color: transparent; }
.player__report { display: inline-block; margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 600; opacity: .7; }
/* TEST feature — dashed outline + "testing" badge so it's obvious this is an experiment. */
.findsrc { margin: 0 0 12px; }
.findsrc__btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 700;
  color: var(--text); background: transparent; border: 1px dashed var(--muted); border-radius: 999px; padding: 6px 14px; }
.findsrc__btn:hover { border-color: var(--accent); color: var(--accent); }
.findsrc__tag { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0c0b0f;
  background: #e8b23a; border-radius: 4px; padding: 1px 5px; }
.findsrc__links { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 12px 14px;
  border: 1px dashed var(--muted); border-radius: 12px; }
.findsrc__links a { color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.findsrc__links a:hover { text-decoration: underline; }
.findsrc__links em { color: var(--muted); font-style: normal; font-weight: 400; }
/* When a real creator-provided source exists: solid (not dashed/test) + a highlighted primary link. */
.findsrc--has .findsrc__btn { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.findsrc--has .findsrc__links { border-style: solid; border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.findsrc__primary { padding: 8px 10px; border-radius: 8px; background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.findsrc__primary strong { color: var(--text); }
.player__report:hover { color: var(--accent); opacity: 1; }
.player__info { padding: 16px 18px 20px; }
.player__info h2 { margin: 0 0 10px; font-size: 18px; }
.player__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.player__tags .card__tag { cursor: pointer; }
/* Performers + creator stand out (most valuable metadata); tags stay quiet. */
.player__tags .card__tag--who { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); font-weight: 700; }
.player__creator { flex-basis: 100%; display: inline-flex; align-items: center; gap: 7px; justify-content: flex-start; margin: 2px 0 12px; padding: 9px 15px; border-radius: 12px; cursor: pointer; background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); font-weight: 800; font-size: 14px; text-align: left; }
.player__creator:active { transform: scale(.99); }
/* Channel monogram avatar (roadmap D) — Beeg-style, colour derived from the name (--ah = hue) */
.avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: hsl(var(--ah, 320) 52% 44%); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .3px;
  text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.player__creator .avatar { width: 28px; height: 28px; font-size: 12px; }
.player__tags .card__tag--tag { opacity: .82; }
/* "+N more" expander chip — a subtle affordance, not a real tag */
.player__tags .card__tag--more { border: 1px dashed var(--line); background: transparent; font-weight: 600; }
.player__tags .card__tag--more:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* More like this */
.related { margin-top: 18px; }
.related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.related__head h3 { font-size: 14px; margin: 0; color: var(--text); }
.related__grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
/* rail cards fill the grid cell here (they're fixed-width in a carousel) */
.related__grid .rail__card { width: auto; }
.related__card {
  position: relative; text-align: left; padding: 0; border: 1px solid var(--line);
  background: var(--bg-elev2); border-radius: 10px; overflow: hidden; cursor: pointer;
  color: var(--text); transition: border-color .15s ease;
}
.related__card:hover { border-color: #3a3a48; }
.related__thumb { position: relative; display: block; }
.related__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.related__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12px; line-height: 1.3; padding: 6px 8px 8px; min-height: 2.6em;
}

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