/* TV-friendly defaults */
:root {
--bg: #47017e; /* SuperCrowd Primary Purple */
--fg: #f4e6ff; /* SuperCrowd Lightest Purple for text */
--accent: #7202ca; /* SuperCrowd secondary light purple */
--focus: #ca0362; /* SuperCrowd Primary Pink for focus outline */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  font-size: 20px; /* larger base */
}

.header { text-align: center; padding: 32px 16px 8px; }
.header h1 { margin: 0; font-size: 56px; letter-spacing: 0.5px; }
.header .tagline { margin: 8px 0 0; opacity: 0.8; }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 28px;
  max-width: 1400px;
  margin: 0 auto;
}

.tile {
display: block;
background: var(--accent); /* solid brand accent color */
border: 2px solid rgba(255,255,255,0.08);
border-radius: 24px;
padding: 28px;
text-decoration: none;
color: var(--fg);
min-height: 220px;
outline: none;
box-shadow: 0 8px 28px rgba(0,0,0,0.35);
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.tile:hover { transform: translateY(-2px); }
.tile:focus {
outline: 6px solid var(--focus);
background: #bc67fe; /* change this to any palette color for selected tile */
border-color: var(--focus);
box-shadow: 0 0 40px var(--focus);
}

.tile h2 { margin: 0 0 8px; font-size: 36px; }
.tile p { margin: 0; opacity: 0.85; }

.footer { text-align: center; padding: 12px; opacity: 0.7; }

/* Responsive fallback for browsers/devices */
@media (max-width: 1200px) {
  .grid { grid-template-columns: 1fr; }
  .tile { min-height: 160px; }
  .header h1 { font-size: 40px; }
}
/* ===== Logo & Banner ===== */
.brandbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 16px 0;   /* was 8px 16px 0 */
  margin-top: -80px;   /* was -40px */
}
.brandbar img.logo {
  width: clamp(180px, 18vw, 320px);
  height: auto;
}
.brandbar .titlewrap h1 { 
  margin: 0; 
  font-size: clamp(40px, 6vw, 64px);
}
.brandbar .titlewrap p { 
  margin: 6px 0 0; 
  opacity: 0.85; 
}

/* Optional banner on home only */
.hero {
  width: min(1400px, 92%);
  height: clamp(100px, 14vw, 180px);
  margin: -20px auto 8px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  border: 2px solid rgba(255,255,255,0.08);
}
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Thumbnails inside tiles */
.tile img.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;   /* keep YouTube’s shape */
  height: auto;           /* let height adjust naturally */
  object-fit: contain;    /* show full image (no cropping) */
  background: rgba(255,255,255,0.06); /* subtle letterbox */
  border-radius: 16px;
  display: block;
  margin-bottom: 12px;
}
/* Episodes grid - Full Width for TV */
#episodes {
  width: 92vw;                     /* use 92% of the full viewport width */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 32px;                       /* add more space for large screens */
  justify-content: center;         /* keep it nicely centered */
}