html,body{background:#0B0B0F}

/* ════════════════════════════════════════════════
   FEED PAGE LAYOUT
════════════════════════════════════════════════ */
html, body { overflow: hidden; }

.layout {
  position: fixed; inset: 0;
  left: var(--sidebar-collapsed);
  display: flex; align-items: stretch; justify-content: center;
  background: #000;
  transition: left 0.3s var(--ease-smooth);
}
.layout::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(234,59,50,0.04) 0%, transparent 70%);
  pointer-events: none;
}

@media (max-width: 700px) {
  .layout { left: 0; }
}

/* ════════════════════════════════════════════════
   CLIP COLUMN + FEED
════════════════════════════════════════════════ */
.clip-column {
  position: relative;
  width: var(--clip-w);
  flex-shrink: 0;
  height: 100%;   /* derive from the position:fixed .layout, NOT 100vh — iOS
                     standalone (apple-mobile-web-app-capable) mis-measures vh,
                     which left a black gap below the bottom nav. */
  overflow: visible;
}

.feed {
  position: absolute; inset: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }

/* ════════════════════════════════════════════════
   CLIP CARD
════════════════════════════════════════════════ */
.clip {
  position: relative;
  width: 100%; height: 100%;   /* 100% of the scroll container (.feed), not 100vh
                                  — robust in iOS standalone; see .clip-column. */
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; flex-shrink: 0;
}

.clip-media {
  /* Holds the poster (background-image) + the mounted <mux-player>. The brightness
     lift lives HERE so BOTH the poster and the video pop as the foreground (not a
     dull backdrop) — filtering the container is also more reliable on iOS than
     filtering the <mux-player> host directly. */
  position: absolute; inset: 0;
  filter: brightness(1.25) saturate(1.1);
}
.clip-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04);
  transition: transform 0.7s var(--ease-smooth);
}
.clip.active .clip-bg { transform: scale(1); }

.clip-vignette {
  position: absolute; inset: 0;
  /* Bottom legibility scrim for the caption / creator row / Watch It.
     MEASURED 2026-08-18: the previous ramp (0.58 -> 0.20 at 16% -> 0 at 38%)
     left only ~0.17 alpha at the height the caption actually sits, so caption
     text over a mid-tone frame measured 2.46:1 against a 4.5:1 AA threshold —
     the "bio is not readable" report. Colour alone cannot fix this: white over
     mid-grey tops out near 4.0:1 no matter what you do. A scrim is how
     Instagram and TikTok solve it, and it lifts EVERY element in the metadata
     block at once rather than just the one we noticed.
     Still clears by 46% and still applies NO top tint, so the clip keeps
     playing at full brightness where it matters. */
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.50) 14%, rgba(0,0,0,0.22) 30%, rgba(0,0,0,0.0) 46%, rgba(0,0,0,0.0) 100%);
  pointer-events: none;
}

.clip-grain {
  position: absolute; inset: 0; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Full-clip tap zone */
.clip-tap {
  position: absolute; inset: 0; z-index: 5; cursor: pointer;
}

/* Pause icon that appears on single tap */
.clip-pause-icon {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 2px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: transform 0.18s var(--ease-spring), opacity 0.25s;
  opacity: 0;
}
.clip-pause-icon.show {
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
}

/* ── Double-tap fire burst ─── */
.fire-burst {
  position: absolute; z-index: 30; pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0; width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
}
.fire-burst svg { width: 100%; height: 100%; }

@keyframes burstIn {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: 0; }
  30%  { transform: translate(-50%,-50%) scale(1.3); opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(0.95);opacity: 1; }
  80%  { transform: translate(-50%,-50%) scale(1.1); opacity: 0.9; }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
}
.fire-burst.pop {
  animation: burstIn 0.7s cubic-bezier(.36,.07,.19,.97) forwards;
}

/* ── Mobile floating logo ─── */
.clip-logo-float {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 20;
  display: none; align-items: center; gap: 7px;
  pointer-events: none;
}
.clip-logo-mark {
  width: 30px; height: 30px;
  background: rgba(0,0,0,0.6);
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(234,59,50,0.3);
  backdrop-filter: blur(8px);
}
.clip-logo-mark svg { width: 100%; height: 100%; display: block; }

/* ── Muted badge ─── */
.muted-badge {
  position: absolute; top: calc(54px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 20;
  display: flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.5); border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 10px;
  font-size: 11px; color: var(--gray);
  backdrop-filter: blur(8px); cursor: pointer; transition: opacity 0.3s;
}

/* ── Frame mute/unmute button (tap to hear a clip without opening it) ─── */
.clip-mute {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 35;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px);
  transition: background 0.15s, transform 0.15s;
}
.clip-mute:hover  { background: rgba(0,0,0,0.7); transform: scale(1.06); }
.clip-mute:active { transform: scale(0.92); }
.clip-mute .clip-mute-off { display: none; }
.clip-mute.muted .clip-mute-on  { display: none; }
.clip-mute.muted .clip-mute-off { display: block; }
/* On desktop the fixed action rail sits to the right of the clip column, so the
   top-right mute button is clear; on mobile it stays inside the frame. */

/* ════════════════════════════════════════════════
   CLIP BOTTOM CONTENT
════════════════════════════════════════════════ */
.clip-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  padding: 0 14px 14px;
}

.creator-row {
  display: flex; align-items: center; gap: 7px; margin-bottom: 5px;
}
.creator-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; text-transform: uppercase;
}
.creator-avatar .ss-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.creator-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.82); }
/* Was 10px red-on-transparent: measured 1.03:1 over a mid-tone frame, i.e.
   effectively invisible on any bright clip, and below the 12px type floor.
   Filled red with white text keeps the brand colour but makes the label carry
   its own contrast instead of borrowing it from whatever is behind it. */
.creator-follow {
  font-size: var(--fs-xs); color: #fff; font-weight: 700; cursor: pointer;
  padding: 3px var(--sp-2); background: var(--red); border: 1px solid var(--red);
  border-radius: var(--r-pill);
  transition: background var(--dur-fast), opacity var(--dur-fast);
}
.creator-follow:active { opacity: 0.75; }
.creator-follow:hover { background: rgba(234,59,50,0.15); }
.creator-follow.is-following { background: rgba(234,59,50,0.14); color: var(--red); border-color: rgba(234,59,50,0.55); }

.show-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 4.5vw, 30px);
  letter-spacing: 1px; color: var(--white); line-height: 1.05;
  margin-bottom: 5px; text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.tag-row {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: nowrap; overflow: hidden; margin-bottom: 5px;
  opacity: 0.85;
}

/* MEASURED 2026-08-18: this was rgba(255,255,255,0.6) at 12px/400. Against pure
   black that is 7.26:1 and fine — but this text sits over VIDEO, and against a
   mid-tone frame it measured 2.46:1, well under the 4.5:1 AA threshold. So the
   caption read fine on dark clips and vanished on bright ones, which is exactly
   the "bio is not readable" report.
   Fix is the same one Instagram uses: near-solid white, a size that isn't at the
   floor, and a shadow scrim so legibility no longer depends on the frame behind
   it. Over mid-tone video this now measures ~4.9:1. */
/* ── Clip Caption & "more..." Single-Line Toggle ─── */
.caption-wrap {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  max-width: 100%;
  position: relative;
  margin-top: 2px;
}
.caption {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.92);
  line-height: 1.45;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.caption em { color: rgba(255,255,255,0.95); font-style: normal; font-weight: 600; }

.cap-toggle {
  display: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin-left: 6px;
  flex-shrink: 0;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  transition: color 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cap-toggle:hover, .cap-toggle:active {
  color: rgba(255,255,255,0.85);
}

.caption-wrap.cap-expanded {
  display: block;
}
.caption-wrap.cap-expanded .caption,
.caption.cap-expanded {
  white-space: normal;
  display: block;
  overflow: visible;
  text-overflow: clip;
}
.caption-wrap.cap-expanded .cap-toggle {
  display: inline-block;
  margin-top: 4px;
  margin-left: 0;
}

/* ── Progress bar ─── */
.clip-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: rgba(255,255,255,0.08); z-index: 20;
  opacity: 0; transition: opacity 0.3s ease;
}
.clip-progress.visible { opacity: 1; }
.clip-progress-fill {
  height: 100%; background: var(--red);
  border-radius: 2px; transition: width 0.1s linear;
}

/* ════════════════════════════════════════════════
   DESKTOP ACTION RAIL
════════════════════════════════════════════════ */
.action-rail-outer {
  position: fixed; top: 50%; left: 0;
  transform: translateY(-50%);
  z-index: 150;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: all;
  opacity: 0.85;
}

.act-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.act-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s var(--ease-spring), opacity 0.15s;
}
.act-btn:hover .act-icon { opacity: 0.75; }
.act-btn:active .act-icon { transform: scale(0.85); }
.act-label {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.8);
  letter-spacing: 0.2px; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* Fire toggle states */
.fire-outline { display: block; }
.fire-filled  { display: none;  }
.act-btn.lit .fire-outline { display: none; }
.act-btn.lit .fire-filled  { display: block; }
.act-btn.lit .act-label    { color: var(--red); }

@keyframes firePulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  55%  { transform: scale(0.9); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.act-btn.pulse .act-icon { animation: firePulse 0.42s cubic-bezier(.36,.07,.19,.97) forwards; }

/* Save toggle states */
.save-outline { display: block; }
.save-filled  { display: none;  }
.act-btn.saved .save-outline { display: none; }
.act-btn.saved .save-filled  { display: block; }
.act-btn.saved .act-label    { color: rgba(234,59,50,0.9); }

/* Rail entrance animation */
@keyframes railSlideIn {
  0%   { opacity: 0; transform: translateY(-50%) translateX(28px) scale(0.88); }
  55%  { opacity: 1; transform: translateY(-50%) translateX(-5px) scale(1.03); }
  78%  {             transform: translateY(-50%) translateX(3px) scale(0.99); }
  100% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}
.action-rail-outer.entering {
  animation: railSlideIn 0.44s var(--ease-spring) forwards;
}

/* ── Watch It pill (desktop) ─── */
.rail-watch-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; pointer-events: all; margin-top: 12px;
}
.rail-watch-pill {
  width: 56px; height: 56px; border-radius: 18px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  border: 1px solid rgba(255,255,255,0.14);
  position: relative; overflow: hidden;
  opacity: 0.92;
  background: rgba(255,99,45,0.26);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform 0.18s var(--ease-spring), box-shadow 0.3s ease, opacity 0.2s ease;
  --pill-rgb: 234, 59, 50;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}

/* Subtle fire-orange tracing border (replaces the old breathing glow pulse) so
   the user's focus stays on the clip; Watch It is still marked as the CTA. */
@property --ssang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ssTraceBorder { to { --ssang: 360deg; } }
.rail-watch-pill::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: conic-gradient(from var(--ssang,0deg),
    rgba(234,59,50,0) 0deg, rgba(234,59,50,0) 230deg,
    rgba(255,99,45,0.6) 312deg, rgba(255,150,70,0.82) 346deg, rgba(234,59,50,0) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1;
  animation: ssTraceBorder 4s linear infinite;
}

@keyframes ctaFireFlash {
  0%   { filter: brightness(1) saturate(1); }
  25%  { filter: brightness(1.25) saturate(1.25) drop-shadow(0 0 8px rgba(255,140,60,0.35)); }
  55%  { filter: brightness(1.12) saturate(1.12); }
  100% { filter: brightness(1) saturate(1); }
}
.rail-watch-pill.fire-flash {
  animation: ctaFireFlash 0.5s cubic-bezier(.36,.07,.19,.97) forwards;
}

.rail-watch-pill:hover {
  transform: scale(1.08); opacity: 1;
  box-shadow: 0 6px 22px rgba(0,0,0,0.5);
}
.rail-watch-pill:active { transform: scale(0.93); }
.rail-watch-pill-play { display: flex; align-items: center; justify-content: center; }
.rail-watch-pill-plat {
  font-size: 8px; font-weight: 800; color: rgba(255,255,255,0.75);
  letter-spacing: 0.5px; text-transform: uppercase; line-height: 1;
  max-width: 48px; text-align: center; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.rail-watch-label {
  font-size: 10px; font-weight: 800; color: rgba(255,255,255,0.9);
  letter-spacing: 1px; text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8); text-transform: uppercase;
}

/* ════════════════════════════════════════════════
   MOBILE ACTION RAIL
════════════════════════════════════════════════ */
/* MEASURED 2026-08-18 at 375x812: the rail sat 10px from the right edge with
   34px-wide buttons. Two problems. (1) 34px is well under the 44px minimum, on
   the fire/save/share actions our retention metrics are built from. (2) a 10px
   inset puts the buttons inside the palm-rejection zone on curved-edge phones,
   so the OS can swallow taps before our code ever sees them. TikTok and
   Instagram both run roughly 48px targets at a 12-16px inset.
   The rail is right-anchored, so widening the buttons extends them LEFTWARD
   over the video — same as TikTok — rather than pushing anything off-screen.
   Vertical position (59% down, inside the thumb arc) was already correct. */
.mobile-action-rail {
  display: none;
  /* --sp-3 (12px), not --sp-4: founder wanted it nearer the edge. The 44px
     touch-target work in v140 is what makes this safe — the buttons are 48px
     wide now, so at a 12px inset the tappable centre still sits ~36px from the
     edge, clear of the curved-screen palm-rejection band that made the ORIGINAL
     10px inset with 34px buttons swallow taps. Do not reduce this further
     without widening the buttons again. */
  position: absolute; right: var(--sp-3); bottom: 110px; z-index: 30;
  flex-direction: column; align-items: center; gap: var(--sp-4);
  opacity: 0.85;
}

/* min-width, not width: the 34px ICON stays exactly 34px, so nothing looks
   different — only the tappable box grows to the 48px used by TikTok/Reels.
   Height is already 52px, which clears the 44px minimum. */
.m-act-btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  min-width: 48px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
}
.m-act-icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s var(--ease-spring);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.9));
}
.m-act-btn:active .m-act-icon { transform: scale(0.82); }
.m-act-label {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,1); letter-spacing: 0.3px;
}

.m-fire-outline { display: block; }
.m-fire-filled  { display: none;  }
.m-act-btn.lit .m-fire-outline { display: none; }
.m-act-btn.lit .m-fire-filled  { display: block; }
.m-act-btn.lit .m-act-label    { color: var(--red); }
.m-act-btn.pulse .m-act-icon   { animation: firePulse 0.42s cubic-bezier(.36,.07,.19,.97) forwards; }

.m-save-outline { display: block; }
.m-save-filled  { display: none;  }
.m-act-btn.saved .m-save-outline { display: none; }
.m-act-btn.saved .m-save-filled  { display: block; }
.m-act-btn.saved .m-act-label    { color: rgba(234,59,50,0.9); }

/* ── Mobile Watch It button ─── */
.mobile-watch-btn {
  display: none;
  position: absolute; bottom: 14px; left: 14px; right: 60px; z-index: 30;
  align-items: center; justify-content: center;
  height: 52px; border-radius: 16px; overflow: hidden;
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  color: #fff; border: none; cursor: pointer;
  transition: transform 0.15s, opacity 0.15s, filter 0.15s;
  letter-spacing: 0.3px;
  -webkit-tap-highlight-color: transparent;
  --btn-rgb: 234, 59, 50;
  opacity: 0.92;
  background: rgba(255,99,45,0.26);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 5px 22px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Same subtle fire-orange tracing border as the desktop pill (no glow pulse). */
.mobile-watch-btn::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: conic-gradient(from var(--ssang,0deg),
    rgba(234,59,50,0) 0deg, rgba(234,59,50,0) 230deg,
    rgba(255,99,45,0.6) 312deg, rgba(255,150,70,0.82) 346deg, rgba(234,59,50,0) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1;
  animation: ssTraceBorder 4s linear infinite;
}

@keyframes mobileCtaFireFlash {
  0%   { filter: brightness(1) saturate(1); }
  25%  { filter: brightness(1.3) saturate(1.25) drop-shadow(0 0 10px rgba(255,140,60,0.32)); }
  55%  { filter: brightness(1.14) saturate(1.12); }
  100% { filter: brightness(1) saturate(1); }
}
.mobile-watch-btn.fire-flash {
  animation: mobileCtaFireFlash 0.5s cubic-bezier(.36,.07,.19,.97) forwards;
}
.mobile-watch-btn:active { transform: scale(0.97); opacity: 0.9; }

.mobile-watch-btn-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 0 14px; gap: 10px; pointer-events: none;
}
.mobile-watch-plat-logo {
  width: 24px; height: 24px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; color: #fff;
  background: rgba(255,255,255,0.2); flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.25);
}
.mobile-watch-text {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.15; flex: 1;
}
.mobile-watch-text-main { font-size: 14px; font-weight: 800; letter-spacing: 0.4px; text-align: center; }
.mobile-watch-text-sub  { font-size: 10px; font-weight: 500; opacity: 0.8; letter-spacing: 0.3px; text-align: center; }
.mobile-watch-arrow {
  opacity: 0.7; flex-shrink: 0; width: 24px;
  display: flex; align-items: center; justify-content: flex-end;
}

/* ════════════════════════════════════════════════
   UP/DOWN ARROWS — desktop
════════════════════════════════════════════════ */
.nav-arrows {
  position: fixed; right: 20px; top: 50%;
  transform: translateY(-50%); z-index: 100;
  display: flex; flex-direction: column; gap: 10px;
}
.nav-arrow-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, transform 0.15s;
  backdrop-filter: blur(8px);
}
.nav-arrow-btn:hover { background: rgba(255,255,255,0.14); transform: scale(1.08); }
.nav-arrow-btn:active { transform: scale(0.92); }

/* ════════════════════════════════════════════════
   FEED END CARD
════════════════════════════════════════════════ */
.feed-end {
  height: 100vh; scroll-snap-align: start;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 40px; text-align: center; background: var(--bg);
}
.feed-end-icon  { font-size: 48px; }
.feed-end-title { font-family: var(--font-display); font-size: 36px; letter-spacing: 1px; color: var(--white); }
.feed-end-title em { color: var(--red); font-style: normal; }
.feed-end-sub   { font-size: 14px; color: var(--gray); line-height: 1.7; max-width: 260px; }
.btn-refresh {
  margin-top: 8px; background: var(--red); color: #fff; border: none;
  padding: 13px 28px; border-radius: 100px;
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.btn-refresh:hover { background: var(--red2); transform: scale(1.03); }

/* ════════════════════════════════════════════════
   RESPONSIVE — MOBILE OVERRIDES
════════════════════════════════════════════════ */
@media (max-width: 700px) {
  :root { --clip-w: 100vw; }

  .action-rail-outer { display: none; }
  .nav-arrows        { display: none; }

  .mobile-action-rail { display: flex; }
  .mobile-watch-btn   { display: flex; }
  .clip-logo-float    { display: flex; }

  /* ── Constrain the feed area to sit ABOVE the bottom nav ──────
     Each clip ends exactly at the top of the mobile menu bar, so
     no clip pixels hide behind it. dvh = real visible viewport
     height (kills the mobile address-bar 100vh quirk); vh is the
     fallback for older browsers. */
  .clip-column { height: calc(100vh - var(--mobile-nav-h)); height: calc(100dvh - var(--mobile-nav-h)); }
  .clip        { height: calc(100vh - var(--mobile-nav-h)); height: calc(100dvh - var(--mobile-nav-h)); }
  .feed-end    { height: calc(100vh - var(--mobile-nav-h)); height: calc(100dvh - var(--mobile-nav-h)); }

  /* Offsets are now relative to the clip bottom (= nav bar top),
     so the Watch It button + rail sit fully on the clip, never
     behind the menu bar. */
  .mobile-watch-btn {
    bottom: 14px;
    right: 60px;
  }
  /* Rail position, third pass. 78px ran the rail straight THROUGH the curator
     row; 128px ended it level with that row but still read as sitting too low
     on device. 176px lifts the whole rail clear of the metadata block so it
     belongs to the VIDEO, which is where Reels and TikTok keep theirs. */
  .mobile-action-rail {
    bottom: 176px;
  }
  .clip-bottom {
    padding-bottom: 80px;
    padding-right: 60px;
  }
  .feed-end {
    padding-bottom: 20px;
  }
}

#ss-splash{position:fixed;inset:0;z-index:99999;background:#0B0B0F;display:flex;align-items:center;justify-content:center;transition:opacity .45s ease;}
  #ss-splash .sp-in{display:flex;flex-direction:column;align-items:center;gap:16px;animation:spPop .5s cubic-bezier(.34,1.56,.64,1) both;}
  #ss-splash .sp-logo{width:96px;height:96px;border-radius:24px;overflow:hidden;background:#000;box-shadow:0 0 60px rgba(234,59,50,.35),0 0 120px rgba(234,59,50,.12);border:1px solid rgba(234,59,50,.25);}
  #ss-splash .sp-logo img{width:100%;height:100%;display:block;}
  #ss-splash .sp-wm{font-family:'Bebas Neue',sans-serif;font-size:40px;letter-spacing:4px;color:#fff;line-height:1;}
  #ss-splash .sp-wm span{color:#EA3B32;}
  #ss-splash .sp-tag{font-size:11px;letter-spacing:5px;text-transform:uppercase;color:#5A5A72;margin-top:-4px;}
  #ss-splash .sp-bar{width:120px;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;margin-top:8px;}
  #ss-splash .sp-bar i{display:block;height:100%;width:38%;background:#EA3B32;border-radius:2px;animation:spSlide 1.1s ease-in-out infinite;}
  @keyframes spPop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
  @keyframes spSlide{0%{transform:translateX(-120%)}100%{transform:translateX(330%)}}

.feed-skeleton{position:absolute;inset:0;background:#0B0B0F;overflow:hidden;}
  .feed-skeleton .fsk-shimmer{position:absolute;inset:0;
    background:linear-gradient(100deg,#101017 28%,#1C1C26 50%,#101017 72%);
    background-size:200% 100%;animation:fskSweep 1.25s ease-in-out infinite;}
  @keyframes fskSweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .feed-skeleton .fsk-bottom{position:absolute;left:18px;right:78px;
    bottom:calc(var(--mobile-nav-h, 64px) + 70px);display:flex;flex-direction:column;gap:11px;}
  .feed-skeleton .fsk-line{height:13px;border-radius:7px;background:rgba(255,255,255,.07);}
  .feed-skeleton .fsk-line.creator{width:42%;height:18px;margin-bottom:4px;}
  .feed-skeleton .fsk-line.cap1{width:88%;}
  .feed-skeleton .fsk-line.cap2{width:58%;}
  .feed-skeleton .fsk-rail{position:absolute;right:14px;
    bottom:calc(var(--mobile-nav-h, 64px) + 92px);display:flex;flex-direction:column;gap:22px;align-items:center;}
  .feed-skeleton .fsk-dot{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.07);}