/* Biblical Heroes — cinematic video gallery + modal. Self-contained, premium blue/gold. */
:root{
  --hv-navy:#081226; --hv-navy2:#0d1f3d; --hv-gold:#f8c84b; --hv-gold2:#ffe9a8;
  --hv-ink:#eaf1ff; --hv-mut:#9fb2d4; --hv-line:rgba(248,201,72,.28);
}
/* Entry button */
#hvOpen{
  position:fixed; right:16px; bottom:88px; z-index:940;
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.05rem;
  font:600 15px/1 system-ui,'Segoe UI',sans-serif; color:#1a1407; cursor:pointer;
  background:linear-gradient(135deg,var(--hv-gold2),var(--hv-gold)); border:none; border-radius:999px;
  box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.25) inset;
  transition:transform .15s ease, box-shadow .15s ease;
}
#hvOpen:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 34px rgba(248,201,72,.4); }
#hvOpen .hv-ic{ font-size:18px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); }

/* Gallery overlay */
.hv-overlay{ position:fixed; inset:0; z-index:950; display:none; }
.hv-overlay.open{ display:block; }
.hv-overlay__bd{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 0%,#0d1f3dcc,#040a16f2);
  backdrop-filter:blur(6px); animation:hvFade .25s ease; }
.hv-panel{ position:absolute; inset:0; display:flex; flex-direction:column; padding:max(18px,4vh) clamp(14px,4vw,48px);
  overflow:auto; animation:hvRise .3s cubic-bezier(.2,.8,.2,1); }
.hv-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.hv-title{ margin:0; font:800 clamp(20px,3.4vw,32px)/1.1 system-ui,sans-serif; color:var(--hv-ink); letter-spacing:.5px; }
.hv-title b{ color:var(--hv-gold); }
.hv-sub{ margin:.3rem 0 0; color:var(--hv-mut); font-size:14px; }
.hv-x{ border:none; background:rgba(255,255,255,.08); color:var(--hv-ink); width:42px; height:42px; border-radius:50%;
  font-size:22px; cursor:pointer; transition:background .15s; }
.hv-x:hover{ background:rgba(248,201,72,.25); }

/* Hero cards grid */
.hv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:clamp(12px,1.6vw,20px); }
.hv-card{ position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden; cursor:pointer; border:1px solid var(--hv-line);
  background:linear-gradient(180deg,#13284c,#081226); box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s; }
.hv-card:hover{ transform:translateY(-4px); border-color:var(--hv-gold); box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 0 1px var(--hv-gold) inset; }
.hv-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; transition:transform .4s ease, opacity .3s; }
.hv-card:hover .hv-card__img{ transform:scale(1.06); opacity:1; }
.hv-card__shade{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,#040a16e8 100%); }
.hv-card__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.hv-card:hover .hv-card__play{ opacity:1; }
.hv-card__play span{ width:58px; height:58px; border-radius:50%; background:rgba(248,201,72,.92); color:#1a1407;
  display:grid; place-items:center; font-size:24px; padding-inline-start:4px; box-shadow:0 6px 20px rgba(0,0,0,.5); }
.hv-card__meta{ position:absolute; left:0; right:0; bottom:0; padding:12px 14px; text-align:right; }
.hv-card__name{ display:block; color:var(--hv-ink); font:800 19px/1.1 system-ui,sans-serif; }
.hv-card__role{ display:block; color:var(--hv-gold2); font-size:12.5px; margin-top:3px; opacity:.9; }
/* locked / coming soon */
.hv-card.locked{ cursor:default; }
.hv-card.locked .hv-card__img{ filter:grayscale(.55) brightness(.55); }
.hv-card.locked:hover{ transform:none; border-color:var(--hv-line); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.hv-card.locked .hv-card__play{ display:none; }
.hv-badge{ position:absolute; top:10px; inset-inline-start:10px; background:rgba(8,18,38,.82); color:var(--hv-gold);
  border:1px solid var(--hv-line); font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.hv-card__placeholder{ position:absolute; inset:0; display:grid; place-items:center; font-size:46px; color:#34507f; }

/* Cinematic video modal */
.hv-vid{ position:fixed; inset:0; z-index:970; display:none; align-items:center; justify-content:center; padding:3vmin; }
.hv-vid.open{ display:flex; }
.hv-vid__bd{ position:absolute; inset:0; background:#020611f5; backdrop-filter:blur(10px); animation:hvFade .25s ease; }
.hv-vid__box{ position:relative; width:min(96vw,1180px); animation:hvPop .3s cubic-bezier(.2,.8,.2,1); }
.hv-vid__frame{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--hv-gold);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(248,201,72,.18); background:#000; }
.hv-vid__frame video{ display:block; width:100%; aspect-ratio:16/9; background:#000; }
.hv-vid__cap{ display:flex; align-items:center; justify-content:space-between; gap:1rem 1.4rem; margin-top:14px; flex-wrap:wrap; }
.hv-vid__meta{ min-width:200px; }
.hv-vid__t{ margin:0; color:var(--hv-ink); font:800 clamp(18px,2.4vw,26px)/1.2 system-ui,sans-serif; }
.hv-vid__t b{ color:var(--hv-gold); }
.hv-vid__line{ margin:.35rem 0 0; color:var(--hv-gold2); font-size:clamp(15px,2vw,20px); font-weight:600; }
.hv-vid__actions{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.hv-act{ display:inline-flex; align-items:center; gap:.35rem; padding:.62rem 1.1rem; border-radius:999px;
  font:700 14.5px/1 system-ui,sans-serif; text-decoration:none; cursor:pointer; transition:transform .15s, box-shadow .15s;
  border:1px solid var(--hv-line); color:var(--hv-ink); background:rgba(255,255,255,.05); white-space:nowrap; }
.hv-act:hover{ transform:translateY(-2px); }
.hv-act--gold{ background:linear-gradient(180deg,var(--hv-gold),var(--hv-gold2)); color:#1a1407; border-color:var(--hv-gold);
  box-shadow:0 6px 20px rgba(248,201,72,.28); }
.hv-act--gold:hover{ box-shadow:0 10px 26px rgba(248,201,72,.42); }
.hv-vid__x{ position:absolute; top:-14px; inset-inline-end:-14px; width:44px; height:44px; border-radius:50%; border:none;
  background:var(--hv-gold); color:#1a1407; font-size:22px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.5); transition:transform .15s; }
.hv-vid__x:hover{ transform:scale(1.1) rotate(90deg); }

@keyframes hvFade{ from{opacity:0} to{opacity:1} }
@keyframes hvRise{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }
@keyframes hvPop{ from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none} }
@media (max-width:520px){ #hvOpen{ right:12px; bottom:80px; padding:.6rem .9rem; font-size:13.5px; } .hv-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); } }
/* "Watch character video" button injected into the game's skin editor */
.skin-hero-video{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem; padding:.62rem 1.2rem;
  border-radius:999px; border:1px solid var(--hv-gold); cursor:pointer; white-space:nowrap;
  background:linear-gradient(180deg,var(--hv-gold),var(--hv-gold2)); color:#1a1407;
  font:800 14px/1 system-ui,sans-serif; box-shadow:0 6px 18px rgba(248,201,72,.32);
  animation:hvPulse 2.2s ease-in-out infinite; transition:transform .15s; }
.skin-hero-video:hover{ transform:translateY(-2px); animation:none; box-shadow:0 10px 26px rgba(248,201,72,.5); }

@keyframes hvPulse{ 0%,100%{ box-shadow:0 6px 18px rgba(248,201,72,.30) } 50%{ box-shadow:0 8px 28px rgba(248,201,72,.62) } }
@media (prefers-reduced-motion:reduce){ .hv-overlay__bd,.hv-panel,.hv-vid__bd,.hv-vid__box,.skin-hero-video{ animation:none } }