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

:root {
  --panthers-blue: #0085CA;
  --panthers-black: #101820;
  --panthers-silver: #BFC0BF;
  /* Transparent so the page takes whatever sits behind it — the browser canvas
     standalone, or a host page's background when framed. Text here is white, so
     it only stays readable over a dark backdrop; set this back to #000 if the
     page needs to carry its own ground. The fullscreen player keeps its own
     solid #000 regardless (.feed-player / .feed-scroll). */
  --bg: transparent;
  --surface: #161616;
  --text: #ffffff;
  --text-muted: #999;
  --thumb-width: 160px;
  --thumb-ratio: 16 / 9;
  --gap: 12px;
  --radius: 10px;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
}

/* ── Section ── */

.reels-section {
  padding: 40px 0 48px;
  max-width: 100%;
  overflow: hidden;
}

/* ── Track ── */

.reels-track-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.reels-track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 8px 32px 16px;
  cursor: grab;
}

.reels-track:active { cursor: grabbing; }
.reels-track::-webkit-scrollbar { display: none; }

/* ── Thumbnail card ── */

.reel-card {
  flex: 0 0 var(--thumb-width);
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  aspect-ratio: 9 / 16;
  width: var(--thumb-width);
}

.reel-card:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.reel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}

.reel-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.1) 45%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 8px;
}

.reel-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}

.reel-card:hover .reel-play-icon {
  background: rgba(255,255,255,0.35);
  transform: translate(-50%, -50%) scale(1.1);
}

.reel-play-icon svg {
  margin-left: 2px;
}

.reel-caption {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  padding: 8px 8px 0;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Guarantee at most two lines, with no clipped sliver of a third.
     overflow:hidden clips at the padding box, so bottom padding is see-through
     space a third line bleeds into (and -webkit-line-clamp doesn't truncate the
     text in every engine). Fix is geometric: no bottom padding + a max-height of
     exactly top-padding (8px) + two lines, so the clip lands at the end of line 2.
     The bottom breathing is restored via `bottom: 8px`. box-sizing:border-box. */
  max-height: calc(1.3em * 2 + 8px);
}

/* ── Skeleton loading ── */

.skeleton-row {
  display: flex;
  gap: var(--gap);
  padding: 8px 32px 16px;
}

.skeleton-card {
  flex: 0 0 var(--thumb-width);
  width: var(--thumb-width);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 50%,
    transparent 100%
  );
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Scroll buttons ── */

.scroll-btn {
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.2s;
}

.scroll-btn:hover { background: rgba(255,255,255,0.24); }
.scroll-btn[hidden] { display: none; }
.scroll-btn--left { left: 6px; }
.scroll-btn--right { right: 6px; }

/* ── Error state ── */

.reels-error {
  padding: 8px 32px;
  color: var(--text-muted);
  font-size: 14px;
}

/* Shared spinner keyframes (used by the feed loading ring). */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Responsive ── */

@media (max-width: 600px) {
  :root { --thumb-width: 130px; }
  .reels-track { padding: 8px 16px 16px; }
  .skeleton-row { padding: 8px 16px 16px; }
  /* Touch users swipe the row — the arrow affordance just overlaps content. */
  .scroll-btn { display: none; }
}
/* NOTE: the phone-sized .feed-nav overrides live at the END of this file, after
   the .feed-* base rules — same specificity means the later rule wins. */

/* ═══════════════════════════════════════════════════════════════════════════
   Fullscreen reel feed — used by index.html (app.js).
   Native vertical scroll-snap + virtualized <video> + poster + progress bar.
   ═══════════════════════════════════════════════════════════════════════════ */

.feed-player {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
}
.feed-player[hidden] { display: none; }

.feed-scroll {
  width: 100%;
  height: 100dvh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.feed-scroll::-webkit-scrollbar { display: none; }

.feed-slide {
  position: relative;
  width: 100%;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.feed-poster,
.feed-slide video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.feed-poster { z-index: 0; transition: opacity 0.2s ease; }
.feed-slide video { z-index: 1; background: transparent; }

/* The poster only exists to avoid a black flash before the video paints. Once
   the video has a frame, hide it — Instagram's thumbnail and video aspect
   ratios differ slightly, so with both `contain` in the same box the poster
   peeks out as a hairline border around the video. */
.feed-slide.has-frame .feed-poster { opacity: 0; }

.feed-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 64px 20px 34px;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Per-reel buffering spinner */
.feed-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.feed-slide.is-buffering .feed-spinner { opacity: 1; }
.feed-ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

/* Play badge shown while the active reel is paused */
.feed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 3;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.feed-play svg { margin-left: 4px; }
.feed-slide.is-paused .feed-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Controls */
.feed-btn,
.feed-nav {
  position: fixed;
  z-index: 1010;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.2s;
}
.feed-btn:hover,
.feed-nav:hover { background: rgba(255,255,255,0.26); }

/* All four controls (close, mute, up, down) share the right edge so they read
   as one group. Mute sits directly under close rather than beside it. */
.feed-close { top: 20px; right: 20px; }
.feed-mute { top: 72px; right: 20px; }
.feed-mute .ic-unmuted { display: none; }
.feed-mute .ic-muted { display: block; }
.feed-mute:not(.is-muted) .ic-muted { display: none; }
.feed-mute:not(.is-muted) .ic-unmuted { display: block; }

.feed-counter {
  position: fixed;
  /* Sits high in the frame so it covers as little of the reel as possible. */
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1010;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 4px 12px;
  border-radius: 20px;
  pointer-events: none;
}

.feed-nav:disabled { opacity: 0.25; pointer-events: none; }
.feed-nav--up { right: 20px; top: 50%; transform: translateY(calc(-50% - 28px)); }
.feed-nav--down { right: 20px; top: 50%; transform: translateY(calc(-50% + 28px)); }

/* Progress bar */
.feed-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1010;
  height: 18px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  touch-action: none;
}
.feed-progress-track {
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.2);
  transition: height 0.12s ease;
}
.feed-progress.is-scrubbing .feed-progress-track { height: 6px; }
.feed-progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  transition: width 0.1s linear;
}
.feed-progress.is-scrubbing .feed-progress-fill { transition: none; }

/* Nav arrows stay visible at every width. They were hidden on narrow screens
   on the assumption you'd swipe, but the player is embedded in an app webview
   at phone width where the arrows are the clearest way to move between reels. */

@media (max-width: 600px) {
  /* Keep the up/down arrows on phones — they're there to hint that you can
     move between reels, not to be tapped — so render them smaller. Must come
     after the .feed-nav base rules above: identical specificity, later wins. */
  .feed-nav { width: 32px; height: 32px; }
  .feed-nav svg { width: 18px; height: 18px; }
  .feed-nav--up { transform: translateY(calc(-50% - 20px)); }
  .feed-nav--down { transform: translateY(calc(-50% + 20px)); }
}