/* =========================================================
   HELL PHYRE — GLOBAL THEME
   ========================================================= */
:root{
  --hp-bg-top:#042159;
  --hp-bg-bottom:#0d001a;
  --hp-text:#eeeeee;
  --hp-text-soft:#99ccff;
  --hp-purple:#9933ff;
  --hp-purple-deep:#6600cc;
  --hp-purple-dark:#330066;
  --hp-gold:#ffd966;
  --hp-panel:#0d0d1a;
  --hp-border:#330066;
  --hp-shadow:0 0 10px rgba(51,0,102,.5);
  --hp-radius:8px;
  --hp-max:900px;
  --hp-focus:#ffd966;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  padding:0;
  font-size:18px;
  line-height:1.5;
  font-family:'Rajdhani',sans-serif;
  color:var(--hp-text);
  background:linear-gradient(to bottom,var(--hp-bg-top) 0%,var(--hp-bg-bottom) 100%);
}

/* Generic elements */
img{max-width:100%;height:auto;display:block}
a{color:var(--hp-text-soft);text-decoration:none}
a:hover{color:#cfe6ff}
a:focus-visible{outline:3px solid var(--hp-focus);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* =========================================================
   HEADER
   ========================================================= */
header{
  padding:0;
  text-align:center;
  border-bottom:3px solid var(--hp-purple-deep);
  background:transparent;
}
header img{
  margin:0 auto;
  width:100%;
  max-width:var(--hp-max);
}

/* =========================================================
   NAVIGATION (STICKY + GLOW BAR)
   ========================================================= */
.nav-container{
  position:sticky;top:0;z-index:1000;
  background:linear-gradient(45deg,#003366,var(--hp-purple-dark));
  display:flex;justify-content:flex-end;align-items:center;
  border-bottom:1px solid var(--hp-border);
}

/* Hamburger (mobile) */
.mobile-menu-btn{
  display:block;
  background:none;border:none;cursor:pointer;
  color:var(--hp-text-soft);font-size:2rem;padding:14px 16px;
}

/* Menu panel (mobile default hidden) */
#main-nav{
  display:none;
  position:absolute;top:100%;left:0;right:0;width:100%;
  background:#1a0033;border-top:1px solid var(--hp-border);
  display:none;flex-direction:column;align-items:center;
}
#main-nav.active{display:flex}

/* Links */
#main-nav a{
  font-size:1.1em;font-weight:700;
  color:var(--hp-text-soft);
  padding:1rem;width:100%;text-align:center;
  border-bottom:1px solid var(--hp-border);
  transition:background .25s ease,text-shadow .25s ease;
}
#main-nav a:last-child{border-bottom:none}
#main-nav a:hover{
  background:rgba(153,51,255,.08);
  text-shadow:0 0 5px var(--hp-purple);
}
#main-nav a:focus-visible{outline:3px solid var(--hp-focus);outline-offset:2px}

/* Glow bar (desktop only) */
.glow-bar{
  display:none;position:absolute;bottom:0;left:0;height:3px;width:0;
  background:var(--hp-purple);
  box-shadow:0 0 15px var(--hp-purple),0 0 30px var(--hp-purple);
  transition:left .3s ease-in-out,width .3s ease-in-out;
}

/* Desktop nav */
@media (min-width:769px){
  .nav-container{justify-content:center}
  .mobile-menu-btn{display:none}
  #main-nav{
    display:flex !important;position:relative;flex-direction:row;
    width:auto;background:transparent;border-top:none;padding:14px 0;
  }
  #main-nav a{
    width:auto;border:none;margin:0 14px;padding:.25rem 0;
  }
  .glow-bar{display:block}
}

/* Verification links emphasis in nav */
#main-nav a[aria-label*="YouTube"],
#main-nav a[aria-label*="IMDb"]{
  text-decoration:underline;
  text-decoration-color:var(--hp-purple);
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}
#main-nav a[aria-label*="YouTube"]:hover,
#main-nav a[aria-label*="YouTube"]:focus,
#main-nav a[aria-label*="IMDb"]:hover,
#main-nav a[aria-label*="IMDb"]:focus{
  background:rgba(255,217,102,.06);
  text-shadow:0 0 6px var(--hp-gold),0 0 12px var(--hp-gold);
}

/* =========================================================
   LAYOUT CONTAINERS
   ========================================================= */
.container{
  padding:20px;
  max-width:var(--hp-max);
  margin:0 auto;
}

/* Panels / sections */
.section{
  background:var(--hp-panel);
  border:1px solid var(--hp-border);
  margin-bottom:0;
  padding:15px;
  border-radius:var(--hp-radius);
  box-shadow:var(--hp-shadow);
}
.section h2{
  margin:0 0 10px 0;
  color:#cc99ff;
  letter-spacing:.3px;
}

/* =========================================================
   EPISODES
   ========================================================= */
.episode{margin-bottom:30px}
.episode img{
  margin:0 auto 10px;
  width:100%;max-width:400px;
  border:2px solid var(--hp-purple-deep);
  border-radius:var(--hp-radius);
  box-shadow:0 0 8px rgba(102,0,204,.35);
}
.episode p{
  font-style:italic;
  color:var(--hp-text-soft);
  line-height:1.55;
}

/* =========================================================
   BUTTONS / LINKS
   ========================================================= */
a.download-link{
  display:inline-block;
  background:var(--hp-purple);
  color:#fff !important;
  padding:10px 15px;border-radius:4px;
  font-weight:800;letter-spacing:.3px;
  transition:transform .15s ease,box-shadow .15s ease,background .2s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
a.download-link:hover{
  background:#882ce0;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(153,51,255,.25);
}
a.download-link:focus-visible{outline:3px solid var(--hp-focus);outline-offset:2px}

/* =========================================================
   SYSTEM REQUIREMENTS BOX
   ========================================================= */
.system-requirements{
  margin:15px 0;padding:10px;background:#111;
  border:1px solid var(--hp-border);border-radius:4px;
}
.system-requirements h4{
  margin:0 0 6px;color:#cc99ff;font-size:1.2em;
}
.system-requirements ul{list-style:disc inside;margin:0;padding:0}

/* =========================================================
   CAST / BIOS
   ========================================================= */
#cast-bios{
  padding:0;border:none;margin-bottom:0;text-align:center;
}
.bios-top-image{
  width:100%;max-width:var(--hp-max);margin:0 auto;
}
.bios-background{
  margin:0 auto;max-width:var(--hp-max);
  background:url("HP-Board-BG-MAIN.webp") repeat-y center top;
  padding:20px 0;
}
.bios-content{padding:0 15px}
.bios-text-block{
  margin:30px 0;color:var(--hp-text-soft);
  line-height:1.45;font-size:1.2em;
}
.polaroid-row{
  margin:20px auto;width:100%;max-width:var(--hp-max);
}

/* ==== PERFECT CENTER: WATCH NOW / YOUTUBE THUMBNAIL ==== */
.watch-now-link{
  display:flex;               /* center with flex */
  justify-content:center;
  align-items:center;
  margin:30px 0;
  width:100%;
  text-align:center;          /* fallback for any inline children */
}
.watch-now-link a{
  display:inline-flex;        /* ensure anchor hugs image nicely */
  align-items:center;
  justify-content:center;
  max-width:100%;
}
.watch-now-link img{
  display:block;
  margin:0 auto;              /* defensive centering */
  width:100%;
  max-width:500px;            /* your intended cap */
  height:auto;
  /* Prevent stray inline spacing or baseline weirdness */
  vertical-align:middle;
}

.cast-title{display:block;margin:40px auto;max-width:400px}

/* Character Bio Card */
.character-bio{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  border:1px solid var(--hp-border);border-radius:var(--hp-radius);
  margin:20px auto;padding:15px;background:var(--hp-panel);
  box-shadow:var(--hp-shadow);
  max-width:var(--hp-max);
}
.character-bio img{
  flex:1 1 250px;max-width:300px;margin:0 auto 15px;
  border:2px solid var(--hp-purple-deep);border-radius:var(--hp-radius);
}
.bio-text{
  flex:2 1 300px;font-size:1.1em;text-align:left;color:#fff;
  line-height:1.55;padding-left:15px;
}
.bio-text strong{color:#cc33ff}
.bio-text h3{margin-top:0;color:#cc99ff;font-size:1.3em}

@media (max-width:600px){
  .character-bio{flex-direction:column;align-items:center}
  .character-bio img{margin-bottom:15px}
  .bio-text{padding-left:0;text-align:center}
}

/* =========================================================
   FOOTER + SOCIAL PROOF
   ========================================================= */
footer{
  border-top:1px solid var(--hp-border);
  font-size:.95em;color:var(--hp-text-soft);
  text-align:center;margin:0;padding:0;
}
.footer-content{
  max-width:var(--hp-max);margin:0 auto;padding:0 15px 20px;
}
.final-footer-image{
  width:100%;max-width:var(--hp-max);margin:20px auto 8px auto;
}

/* “Verify us on” row */
.verify-row{
  display:flex;gap:14px;align-items:center;justify-content:center;
  margin:8px 0 0;opacity:.95;flex-wrap:wrap;
}
.verify-row .verify-label{
  color:var(--hp-text-soft);opacity:.85;margin-right:6px;
  font-weight:700;letter-spacing:.2px;
}
.verify-row a{
  display:inline-flex;align-items:center;gap:8px;
  color:#fff;text-decoration:underline;
  text-decoration-color:var(--hp-purple);
  text-underline-offset:4px;text-decoration-thickness:2px;
  font-weight:800;letter-spacing:.2px;
  transition:text-shadow .2s ease,filter .2s ease;
}
.verify-row a:hover,
.verify-row a:focus-visible{
  text-shadow:0 0 6px var(--hp-gold),0 0 12px var(--hp-gold);
  filter:drop-shadow(0 0 4px rgba(153,51,255,.6));
}
.verify-row svg{width:18px;height:18px;fill:#fff}
.verify-row a[aria-label*="IMDb"] svg rect{fill:var(--hp-gold)}
.verify-row a[aria-label*="IMDb"] svg text{font-weight:700}

/* =========================================================
   MISC UTILITY
   ========================================================= */
hr{border:1px solid var(--hp-purple-dark);margin:20px 0}
.section .hr{margin:16px 0}

/* Make sure long words/URLs don’t overflow on mobile */
p,li{word-wrap:break-word}

/* Ensure the main nav “glow-bar” doesn’t animate if reduced motion */
@media (prefers-reduced-motion: reduce){
  .glow-bar{transition:none}
}