/* Load after styles.css. Native video and fallback cards stay inside this scope. */
.reels-shell {
  min-width: 0;
  max-width: 100%;
}

[data-reels] {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-columns: auto;
  grid-auto-flow: row;
  align-items: start;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  padding: 0.4rem 0.2rem 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(198, 168, 107, 0.3);
  border-radius: var(--radius-lg, 32px);
  background: linear-gradient(135deg, #34271f, #211a16);
  color: var(--oat, #f3ece0);
}

[data-reels] .reel-card {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  justify-self: stretch;
  overflow: visible;
  border: 1px solid rgba(198, 168, 107, 0.32);
  border-radius: var(--radius-lg, 32px);
  background: linear-gradient(160deg, #453226, #2f241d);
  color: var(--oat, #f3ece0);
}

[data-reels] .reel-player-frame {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgba(243, 236, 224, 0.18);
  border-radius: var(--radius-md, 22px);
  background: linear-gradient(155deg, #2f241d, #1f1813);
  color: var(--oat, #f3ece0);
}

[data-reels] .reel-native-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md, 22px);
  background: var(--espresso, #2a1d15);
  color: var(--oat, #f3ece0);
  object-fit: contain;
  pointer-events: auto;
}

[data-reels] .reel-unavailable {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 9 / 16;
  align-content: center;
  justify-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 1.25rem;
  border-radius: var(--radius-md, 22px);
  background:
    radial-gradient(circle at 70% 25%, rgba(198, 168, 107, 0.2), transparent 38%),
    linear-gradient(155deg, #453226, #241b16);
  color: var(--oat, #f3ece0);
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: center;
}

[data-reels] .reel-unavailable p {
  max-width: 24ch;
  margin: 0;
}

[data-reels] .reel-unavailable-title {
  color: var(--oat, #f3ece0);
  font-weight: 600;
}

[data-reels] .reel-unavailable-detail {
  color: #d9c9b0;
}

[data-reels] .reel-required-file {
  display: inline-block;
  max-width: 100%;
  margin-top: 0.3rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid rgba(198, 168, 107, 0.34);
  border-radius: var(--radius-sm, 14px);
  background: rgba(42, 29, 21, 0.42);
  color: var(--brass-light, #c6a86b);
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  [data-reels] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  [data-reels] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  [data-reels] {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: auto;
    grid-auto-flow: row;
    overflow-x: visible;
  }
}

@media (max-width: 380px) {
  [data-reels] {
    padding: 0.4rem;
  }
}