/* Basic reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #111; background: #fafafa; }

.top-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.brand-link { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 8px; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-stats { display: flex; align-items: center; gap: 16px; }

.site-header { padding: 20px 16px; background: #fff; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; }
.logo { font-size: 20px; }
.title { margin: 0; font-size: 18px; font-weight: 600; }
/* Enlarge title and peach emoji in the topbar */
.top-nav .title { font-size: 24px; font-weight: 800; }
/* Peach emoji placed next to title in topbar */
.top-nav .brand-link .emoji.peach {
  font-size: 30px;
  line-height: 1;
  display: inline-block;
  margin-left: 0; /* use brand-link gap for spacing */
  transform: none; /* remove offset so it centers with text */
  align-self: center; /* ensure vertical centering in flex */
}
.top-nav .title { line-height: 1; }

.stats { display: flex; align-items: center; gap: 12px; }
.stat { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #eee; border-radius: 20px; background: #fff; color: #555; }
.stat .label { font-size: 12px; }
.stat .value { font-size: 12px; font-weight: 700; color: #111; }

/* Stronger emphasis for stats shown in the topbar */
.top-nav .stat { padding: 8px 14px; border-radius: 999px; border-width: 2px; font-weight: 700; }
.top-nav .stat .label { font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; }
.top-nav .stat .value { font-size: 16px; font-weight: 800; }

main { padding: 12px; max-width: 1400px; margin: 0 auto; }

.video-grid {
  display: grid;
  /* Fixed four columns on desktop */
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; /* slightly more space between tiles */
}

/* Related grid: force 2 columns (2x2 layout) */
#related-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Keep 2 columns for related grid on all breakpoints */
@media (max-width: 1200px) {
  #related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  #related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  #related-grid { grid-template-columns: repeat(2, 1fr); }
}

.video-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px #eee, 0 10px 18px rgba(0,0,0,0.12);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px #ddd, 0 14px 24px rgba(0,0,0,0.18);
}

.card-link { text-decoration: none; color: inherit; display: block; }

.thumb {
  /* Increase thumbnail height for larger tiles */
  height: 240px;
  background: #000; /* fallback if no thumbnail */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}


.thumb::after {
  content: '▶';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
  opacity: 0;
  pointer-events: none;
}

.card-link:hover .thumb::after {
  background: rgba(255, 255, 255, 1);
  transform: translate(-50%, -50%) scale(1.05);
  opacity: 1;
}

/* Viewer preview hover (mirror homepage tile hover) */
.preview.thumb {
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.preview.thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--border), 0 0 22px var(--accentGlow), 0 14px 24px rgba(0,0,0,0.18);
}
.preview.thumb:hover::after {
  background: rgba(255, 255, 255, 1);
  transform: translate(-50%, -50%) scale(1.05);
  opacity: 1;
}

.video-card video {
  width: 100%;
  /* Match video fallback height to larger thumbnail */
  height: 240px;
  object-fit: cover;
  background: #000;
}

.video-card .meta {
  padding: 14px; /* more inner breathing room */
}

.video-card .title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  line-height: 1.3;
}

.video-card .desc {
  font-size: 12px;
  color: #666;
  margin: 0;
}

/* New card info panel with badges */
.card-info {
  padding: 14px 16px 16px; /* increase info panel padding */
  background: #fff;
  display: grid;
  gap: 10px;
}
.title-row {
  display: flex;
  align-items: center;
  gap: 10px; /* more space between index and title */
}
.title-row .index {
  font-size: 12px;
  color: #666;
}
.title-row .title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.badge-row {
  display: flex;
  align-items: center;
  gap: 12px; /* slightly wider badge spacing */
}
.badge-row .badge {
  font-size: 12px;
  color: #555;
}
/* Larger emoji inside badges without increasing text size */
.badge-row .badge { display: inline-flex; align-items: center; gap: 6px; }
.badge-row .badge .emoji {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  margin-right: 2px;
  transform: translateY(1px);
}

/* Corner tag overlay on thumbnail */
.corner-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 6px;
  font-size: 11px;
  border-radius: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

.site-footer { padding: 16px; text-align: center; }
.footer-rule { height: 1px; max-width: 96%; margin: 6px auto 12px; background: #ddd; opacity: 0.6; }
.footer-note { color: #666; font-size: 15px; font-weight: 600; letter-spacing: 0.3px; }
.footer-brand-link { color: #333; text-decoration: none; font-weight: 700; }

.section { margin: 20px 0; }
.section-title { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.section-header { display: flex; align-items: center; justify-content: space-between; }
.btn { border: 1px solid #ddd; background: #fff; color: #333; border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.btn:hover { background: #f5f5f5; }

/* Accent-styled Back button in viewer top nav */
.top-nav .back-btn {
  border: 2px solid var(--accent);
  background: var(--card);
  color: var(--accent);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--border), 0 0 14px var(--accentGlow);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.top-nav .back-btn:hover {
  background: var(--hover);
  box-shadow: 0 0 0 1px var(--border), 0 0 18px var(--accentGlow);
  transform: translateY(-1px);
}

/* Hide Shuffle button on homepage */
#shuffle-btn { display: none; }

.viewer { max-width: 1200px; margin: 0 auto; }
.viewer-center { display: flex; flex-direction: column; align-items: center; }
.viewer-title { text-align: center; margin: 8px 0 16px; }
.gate { border: 1px dashed #ddd; background: #fff; padding: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.gate-copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.warn { font-size: 20px; }
.notice { margin: 0; color: #555; font-size: 14px; }
.unlock-btn { font-weight: 600; }
.player { margin-top: 16px; }
.cta { font-weight: 700; }

/* Viewer CTAs and preview */
.cta-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 12px 0; }
.unlock-btn { font-weight: 700; font-size: 18px; padding: 14px 24px; border-radius: 999px; border: 2px solid var(--accent); background: var(--card); color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset, 0 0 18px var(--accentGlow), 0 12px 24px rgba(0,0,0,0.5); }
.unlock-btn:hover { background: var(--hover); box-shadow: 0 0 0 2px var(--accent) inset, 0 0 24px var(--accentGlow), 0 16px 28px rgba(0,0,0,0.55); }
.counter-pill { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--accent); background: var(--card); color: var(--accent); font-weight: 700; box-shadow: 0 0 12px var(--accentGlow); }
.viewer-frame { display: flex; justify-content: center; margin: 12px 0; }
.preview { width: 640px; height: 360px; background: #000; background-size: cover; background-position: center; border-radius: 12px; border: 2px solid var(--accent); box-shadow: 0 0 0 1px var(--border), 0 0 18px var(--accentGlow); cursor: pointer; }
.preview img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; pointer-events: none; user-select: none; }

/* Ensure preview overlay is consistent and only visible on hover */
.preview.thumb::after {
  content: '▶';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
  opacity: 0;
  pointer-events: none;
}
.warn-card {
  padding: 18px 22px;
  border-radius: 16px;
  border: 2px solid var(--accent);
  background: #0e0e10;
  /* inner ring and outer glow */
  box-shadow: 0 0 0 2px var(--accent) inset, 0 0 24px var(--accentGlow), 0 12px 24px rgba(0,0,0,0.6);
  /* subtle gradient + scanlines to match screenshot */
  background-image:
    radial-gradient(900px circle at 50% -240px, rgba(255,163,26,0.10), rgba(0,0,0,0) 60%),
    radial-gradient(700px circle at 50% 120%, rgba(255,163,26,0.08), rgba(0,0,0,0) 65%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.00) 3px, rgba(0,0,0,0.00) 6px);
  max-width: 1200px;
  width: 100%;
  margin: 12px auto 0;
  position: relative;
  overflow: hidden; /* confine sweep animation to the box */
  /* gentle bounce animation */
  will-change: transform;
  animation: gentleBounce 3.2s ease-in-out infinite;
}
.warn-card .warn { font-size: 28px; margin-bottom: 6px; filter: drop-shadow(0 0 6px var(--accentGlow)); }
.warn-card .notice:first-of-type {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  /* animated gradient text */
  background: linear-gradient(90deg, #ffd04d, #ffa31a 35%, #ffcc66 70%, #ffa31a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shineText 3.6s linear infinite;
}
.warn-card .notice + .notice { color: var(--muted); font-size: 14px; }
.warn-card .gate-copy { gap: 8px; }

@keyframes shineText {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Gentle bounce for the warn card */
@keyframes gentleBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* sweeping shine overlay */
/* sweeping shine overlay removed per request */

/* sweepGlow animation removed */

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--accent) inset, 0 0 18px var(--accentGlow), 0 12px 24px rgba(0,0,0,0.6);
  }
  50% {
    box-shadow: 0 0 0 2px var(--accent) inset, 0 0 28px var(--accentGlow), 0 14px 26px rgba(0,0,0,0.62);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .warn-card { animation: none; }
}

@media (max-width: 600px) {
  .preview { width: 100%; height: 220px; }
  .cta-row { gap: 10px; }
  .unlock-btn { width: 100%; }
}


/* Related section: styled like the showcased dark, glowing card */
#related-section {
  padding: 18px 20px;
  background: #0e0e10; /* deep panel */
  border-radius: 16px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset, 0 0 24px var(--accentGlow), 0 12px 24px rgba(0,0,0,0.6);
  /* faint scanline texture + subtle accent vignette */
  background-image:
    radial-gradient(900px circle at 50% -240px, rgba(255,163,26,0.10), rgba(0,0,0,0) 60%),
    radial-gradient(700px circle at 50% 120%, rgba(255,163,26,0.08), rgba(0,0,0,0) 65%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.00) 3px, rgba(0,0,0,0.00) 6px);
  max-width: 900px;
  margin: 20px auto;
}
#related-section .section-header { display: flex; justify-content: center; }
#related-section .section-title {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 8px;
  text-shadow: 0 0 8px var(--accentGlow), 0 0 18px var(--accentGlow);
}
#related-section .section-title::before {
  content: '📺';
  display: inline-block;
  margin-right: 8px;
  filter: drop-shadow(0 0 6px var(--accentGlow));
}
#related-grid { margin-top: 8px; }
#related-grid .thumb { height: 200px; border-radius: 10px; }

/* Responsive tweaks */
@media (max-width: 1200px) {
  /* Three columns on large tablets */
  .video-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  /* Two columns on tablets */
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  /* One column on phones */
  .video-grid { grid-template-columns: 1fr; }
}

/* Compact topbar and stats on phones */
@media (max-width: 600px) {
  .top-nav { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .top-nav .brand-link { order: 1; }
  .top-nav .nav-actions { order: 2; margin-left: auto; }
  .top-nav .nav-stats { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; gap: 10px; }
  .top-nav .stat { padding: 6px 10px; border-width: 1px; }
  .top-nav .stat .label { font-size: 12px; letter-spacing: 0.2px; text-transform: none; }
  .top-nav .stat .value { font-size: 14px; }
  /* Card and thumbnail compact height on phones */
  .thumb { height: 200px; }
  .video-card video { height: 200px; }
  /* Make Load More easier to tap */
  .load-more { width: 100%; padding: 12px 18px; }
  /* Gate flows vertically on mobile */
  .gate { flex-direction: column; align-items: stretch; gap: 12px; }
  .unlock-btn { width: 100%; }
}

/* Ultra-narrow screens: scrollable stats pills */
@media (max-width: 380px) {
  .top-nav .nav-stats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; padding-bottom: 6px; }
  .top-nav .stat { margin-right: 10px; flex: 0 0 auto; }
}

/* Mobile viewer layout: match screenshot */
@media (max-width: 600px) {
  .viewer { padding: 0 12px; }
  .viewer-title { font-size: 20px; }
  .viewer-frame { margin: 12px 0; }
  .preview { width: 100%; height: 260px; }
  .cta-row { flex-direction: column; align-items: stretch; gap: 12px; margin: 16px 0; }
  .unlock-btn { width: 100%; font-size: 18px; padding: 14px 24px; }
  .badge-row { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .counter-pill { display: none; }
  .warn-card { padding: 16px; }
  #related-section { max-width: 96%; }
  /* Make related videos one column like the screenshot */
  #related-grid { grid-template-columns: 1fr; }
  #related-grid .thumb { height: 260px; }
}