:root{
  --bg: #0a0a0d;
  --bg-alt: #111117;
  --card: #17171f;
  --gold: #d4af6a;
  --gold-bright:#e8c98a;
  --text: #ece9e2;
  --text-dim: #97979f;
  --line: rgba(255,255,255,0.08);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--text);
  font-family:'Libre Franklin', sans-serif;
  font-weight:300;
  overflow-x:hidden;
}
h1,h2,h3,.brand,.display-font{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:0.03em;
}
a{ text-decoration:none; }
::-webkit-scrollbar{ height:8px; width:8px; }
::-webkit-scrollbar-thumb{ background: rgba(212,175,106,0.35); border-radius: 4px; }
::-webkit-scrollbar-track{ background: transparent; }

/* NAVBAR */
.navbar{
  background: linear-gradient(180deg, rgba(10,10,13,0.95) 0%, rgba(10,10,13,0) 100%);
  padding: 1.1rem 0;
  transition: background .3s ease;
}
.navbar.scrolled{ background: rgba(10,10,13,0.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.navbar .brand{
  font-size: 1.75rem;
  color: var(--text);
  letter-spacing: 0.08em;
}
.navbar .brand span{ color: var(--gold); }
.nav-link{
  color: var(--text-dim) !important;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 1.5rem;
  transition: color .2s ease;
}
.nav-link.active, .nav-link:hover{ color: var(--text) !important; }
.nav-search{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  width: 180px;
  transition: width .25s ease, background .25s ease;
}
.nav-search:focus{
  outline:none;
  width: 240px;
  background: rgba(255,255,255,0.1);
  border-color: var(--gold);
  color: var(--text);
}
.nav-search::placeholder{ color: var(--text-dim); }
.avatar-chip{
  width: 34px; height:34px; border-radius:4px;
  background: linear-gradient(135deg, var(--gold), #8a6a30);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; color:#14151a; font-size:1.1rem;
}

/* HERO */
.hero{
  position:relative;
  min-height: 92vh;
  display:flex;
  align-items:flex-end;
  background:
    linear-gradient(0deg, var(--bg) 2%, rgba(10,10,13,0.15) 40%, rgba(10,10,13,0.65) 100%),
    linear-gradient(90deg, rgba(10,10,13,0.9) 0%, rgba(10,10,13,0.1) 60%),
    url('assets/joker.jpg') center 15% / cover no-repeat;
  padding-bottom: 5rem;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:0.5rem;
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
}
.hero-badge::before{
  content:"";
  width: 28px; height: 1px; background: var(--gold);
}
.hero h1{
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  line-height: 0.92;
  margin: 0 0 1.1rem;
}
.hero-meta{
  display:flex; gap:1rem; align-items:center;
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
  flex-wrap:wrap;
}
.hero-meta .tag{
  border:1px solid var(--line);
  padding: 2px 10px;
  border-radius: 3px;
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.hero-meta .rating{ color: var(--gold); font-weight:600; }
.hero p.lead{
  color: var(--text-dim);
  font-weight:300;
  max-width: 540px;
  font-size: 1.02rem;
}
.btn-play{
  background: var(--gold);
  color: #14151a;
  border: none;
  padding: 0.85rem 2.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 700;
  display:inline-flex; align-items:center; gap:0.6rem;
  transition: all .25s ease;
}
.btn-play:hover{ background: var(--gold-bright); transform: translateY(-2px); }
.btn-info{
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--text);
  padding: 0.85rem 2.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  display:inline-flex; align-items:center; gap:0.6rem;
  transition: all .25s ease;
}
.btn-info:hover{ background: rgba(255,255,255,0.18); color:var(--text); }

/* ROWS */
.row-section{ padding: 2.4rem 0; position:relative; }
.row-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom: 1.1rem;
}
.row-title{
  font-size: 1.7rem;
  letter-spacing:0.02em;
}
.row-title .num{ color: var(--gold); margin-right:0.5rem; font-size:1rem; letter-spacing:0.2em;}
.row-scroll{
  display:flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.row-scroll::-webkit-scrollbar{ height:6px; }

.title-card{
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, z-index 0s;
  cursor:pointer;
}
.title-card .img-box{
  aspect-ratio: 2/3;
  overflow:hidden;
  background:#000;
}
.title-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease, filter .5s ease;
  filter: brightness(0.88) saturate(0.95);
}
.title-card:hover{
  transform: translateY(-8px) scale(1.045);
  border-color: rgba(212,175,106,0.45);
  z-index: 5;
}
.title-card:hover img{
  transform: scale(1.08);
  filter: brightness(1) saturate(1.1);
}
.title-card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,10,13,0.95) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 0.9rem;
  opacity:0; transition: opacity .3s ease;
}
.title-card:hover .overlay{ opacity:1; }
.title-card .overlay h4{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.25rem;
  margin:0 0 0.25rem;
  letter-spacing:0.02em;
}
.title-card .overlay .meta-row{
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.72rem;
  color: var(--text-dim);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.title-card .overlay .match{ color: var(--gold); font-weight:700; }
.play-dot{
  width:30px; height:30px; border-radius:50%;
  background: var(--gold);
  display:flex; align-items:center; justify-content:center;
  color:#14151a;
  margin-bottom: 0.6rem;
  font-size:0.75rem;
}

.section-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  margin: 0.5rem 0;
}

.band-alt{ background: var(--bg-alt); }

footer{
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 3rem 0 2rem;
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 3rem;
}
footer .brand{ font-size: 1.4rem; color: var(--text); }
footer .brand span{ color: var(--gold); }
footer a{ color: var(--text-dim); }
footer a:hover{ color: var(--gold); }

/* VIDEO MODAL THEME */
.modal-content{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.modal-header{
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.25rem;
}
.modal-title{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
  font-size: 1.3rem;
  color: var(--text);
}
.modal-body iframe{ border: 0; }
.title-card:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ============ RESPONSIVE ============ */

/* Large tablets / small desktops */
@media (max-width: 991.98px){
  .hero{ min-height: 82vh; padding-bottom: 3.5rem; }
  .title-card{ width: 190px; }
  .row-title{ font-size: 1.5rem; }
  .nav-search{ width: 150px; }
  .nav-search:focus{ width: 190px; }
}

/* Tablets */
@media (max-width: 767.98px){
  .navbar{ padding: 0.85rem 0; }
  .navbar.scrolled{ background: rgba(10,10,13,0.97); }
  #navMenu{
    background: rgba(10,10,13,0.98);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1rem 1.2rem;
    margin-top: 0.75rem;
  }
  #navMenu .nav-link{
    margin-left: 0;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
  }
  #navMenu .nav-link:last-of-type{ border-bottom: none; }
  .nav-search{ width: 100%; }
  .nav-search:focus{ width: 100%; }
  .avatar-chip{ display:none; }

  .hero{
    min-height: 72vh;
    padding-bottom: 2.5rem;
    align-items: center;
    background-position: 65% 15%;
  }
  .hero h1{ font-size: clamp(2.6rem, 12vw, 4rem); }
  .hero p.lead{ font-size: 0.92rem; max-width: 100%; }
  .hero-meta{ font-size: 0.8rem; gap: 0.6rem; }
  .btn-play, .btn-info{
    padding: 0.7rem 1.5rem;
    font-size: 0.78rem;
    flex: 1 1 auto;
    justify-content: center;
  }

  .row-section{ padding: 1.8rem 0; }
  .row-title{ font-size: 1.3rem; }
  .title-card{ width: 165px; }
  .title-card .overlay{ opacity: 1; background: linear-gradient(180deg, transparent 30%, rgba(10,10,13,0.97) 100%); }
  .title-card .overlay h4{ font-size: 1.05rem; }
  .title-card:hover{ transform: translateY(-4px) scale(1.02); }

  footer{ text-align:center; }
  footer .d-flex.gap-4{ justify-content:center; flex-wrap:wrap; }
}

/* Phones */
@media (max-width: 575.98px){
  .container-fluid.px-4{ padding-left: 1rem !important; padding-right: 1rem !important; }
  .hero{ min-height: 68vh; padding-bottom: 2rem; }
  .hero h1{ font-size: clamp(2.2rem, 13vw, 3rem); }
  .hero-badge{ font-size: 0.65rem; letter-spacing: 0.2em; }
  .hero-meta .tag{ font-size: 0.68rem; padding: 1px 8px; }
  .btn-play, .btn-info{ width: 100%; }
  .hero .d-flex.gap-3{ flex-direction: column; }

  .row-title{ font-size: 1.15rem; }
  .row-title .num{ font-size: 0.85rem; }
  .title-card{ width: 132px; }
  .title-card .overlay{ padding: 0.6rem; }
  .title-card .overlay h4{ font-size: 0.92rem; }
  .title-card .overlay .meta-row{ font-size: 0.62rem; gap: 0.35rem; }
  .play-dot{ width: 22px; height: 22px; font-size: 0.6rem; margin-bottom: 0.4rem; }

  footer{ padding: 2.2rem 0 1.5rem; font-size: 0.78rem; }
}

/* Very small phones */
@media (max-width: 359.98px){
  .title-card{ width: 118px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}