@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg: #14161F;
  --surface: #1C2030;
  --ink: #ECEEF4;
  --muted: #9AA1B5;
  --accent: #7FA6D9;
  --accent-warm: #F2B786;
  --border: #2A2E40;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,0.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  margin:0;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.mono{font-family:'Space Mono', monospace;}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(20,22,31,0.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; gap:32px;
}
.logo{
  font-family:'Fraunces', serif; font-size:22px; font-weight:700;
  color:var(--ink);
}
.logo span{color:var(--accent-warm);}
.nav-links{display:flex; gap:22px; flex:1;}
.nav-links a{
  font-size:14px; font-weight:500; color:var(--muted);
  transition:color .15s;
}
.nav-links a:hover{color:var(--ink);}
.nav-search{
  display:flex; align-items:center; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:6px 8px 6px 16px;
  width:280px; max-width:40vw;
}
.nav-search input{
  border:none; outline:none; background:transparent; flex:1;
  font-family:'Inter'; font-size:14px; color:var(--ink);
}
.nav-search button{
  border:none; background:var(--accent); color:#fff; width:30px; height:30px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.region-select{
  background:var(--surface); color:var(--ink); border:1px solid var(--border);
  border-radius:999px; padding:8px 14px; font-size:13px; font-family:'Inter'; cursor:pointer;
}

/* ---------- HERO ---------- */
.hero{
  position:relative; height:60vh; min-height:420px; overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:top center;
  opacity:0; transition:opacity .8s ease;
}
.hero-slide.active{opacity:1;}
.hero-slide::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(237,241,245,0.55) 45%, rgba(237,241,245,0.15) 100%);
}
.hero-content{
  position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:0 24px 40px;
  width:100%; display:flex; gap:24px; align-items:flex-end;
}
.ticket{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:24px 28px; max-width:560px;
  border-left:3px dashed var(--accent-warm);
}
.ticket .eyebrow{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-warm); font-weight:700;
}
.ticket h1{font-size:32px; margin:8px 0 10px; line-height:1.15;}
.ticket p{font-size:14px; color:var(--muted); line-height:1.6; margin:0 0 16px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.hero-dots{display:flex; gap:8px; margin-top:6px;}
.hero-dots button{
  width:8px; height:8px; border-radius:50%; border:none; background:var(--border); cursor:pointer;
}
.hero-dots button.active{background:var(--accent);}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px;
  font-size:14px; font-weight:600; cursor:pointer; border:none;
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-ghost{background:var(--surface); color:var(--ink); border:1px solid var(--border);}

/* ---------- SECTIONS ---------- */
.section{max-width:1200px; margin:0 auto; padding:48px 24px 0;}
.section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.section-head h2{font-size:24px;}
.section-head a{font-size:13px; font-weight:600; color:var(--accent);}

/* ---------- GENRE CHIPS ---------- */
.genre-chips{display:flex; flex-wrap:wrap; gap:10px;}
.genre-chips a{
  padding:8px 16px; border-radius:999px; background:var(--surface);
  border:1px solid var(--border); font-size:13px; font-weight:500;
  transition:all .15s;
}
.genre-chips a:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- GRID / CARDS ---------- */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:20px;
}
.card{
  background:var(--surface); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .18s ease;
  display:block;
}
.card:hover{transform:translateY(-4px);}
.card-poster{position:relative; aspect-ratio:2/3; background:var(--border); overflow:hidden;}
.card-poster img{width:100%; height:100%; object-fit:cover;}
.card-type{
  position:absolute; top:8px; left:8px; background:rgba(35,40,56,0.65); color:#fff;
  font-size:10px; font-weight:600; padding:3px 9px; border-radius:999px; letter-spacing:.03em;
}
.card-body{padding:12px 14px;}
.card-body h3{
  font-size:14px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.card-year{font-family:'Space Mono', monospace; font-size:11px; color:var(--muted);}

.rating-ring{
  position:absolute; bottom:8px; right:8px; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
}
.rating-ring-inner{
  width:30px; height:30px; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono', monospace; font-size:10px; font-weight:700; color:var(--ink);
}

.empty-state{
  grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted); font-size:15px;
}

/* skeleton loading */
.skeleton .card-poster{background:linear-gradient(90deg, var(--border) 25%, #363B52 37%, var(--border) 63%); background-size:400% 100%; animation:shimmer 1.4s infinite;}
.skeleton h3{background:var(--border); border-radius:4px; height:12px;}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

/* ---------- PAGINATION ---------- */
.pagination{display:flex; justify-content:center; gap:10px; margin:40px 0;}
.pagination button{
  padding:10px 18px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); font-weight:600; font-size:13px; cursor:pointer;
}
.pagination button:disabled{opacity:.4; cursor:not-allowed;}
.pagination span{font-family:'Space Mono', monospace; font-size:13px; align-self:center; color:var(--muted);}

/* ---------- DETAIL PAGE ---------- */
.detail-hero{
  position:relative; padding:80px 24px 40px; margin-top:0;
  background-size:cover; background-position:center;
}
.detail-hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(237,241,245,0.75), var(--bg) 92%);
}
.detail-inner{
  position:relative; z-index:2; max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:260px 1fr; gap:32px;
}
.detail-poster{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.detail-meta .eyebrow{font-family:'Space Mono',monospace; color:var(--accent-warm); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em;}
.detail-meta h1{font-size:36px; margin:8px 0 6px;}
.detail-tagline{color:var(--muted); font-style:italic; margin-bottom:16px;}
.pill-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.pill{background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600;}
.detail-overview{max-width:680px; line-height:1.7; color:var(--ink); margin-bottom:24px;}
.detail-stats{display:flex; gap:28px; flex-wrap:wrap;}
.stat-block .label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-family:'Space Mono',monospace;}
.stat-block .value{font-size:18px; font-weight:700; font-family:'Fraunces',serif;}

.cast-row{display:flex; gap:16px; overflow-x:auto; padding-bottom:8px;}
.cast-card{flex:0 0 110px; text-align:center;}
.cast-card img{width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:10px; background:var(--border);}
.cast-card .name{font-size:12px; font-weight:600; margin-top:6px;}
.cast-card .role{font-size:11px; color:var(--muted);}

.trailer-wrap{position:relative; padding-top:56.25%; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#000;}
.trailer-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:none;}

/* ---------- WATCH PROVIDERS ---------- */
.provider-row{display:flex; align-items:center; gap:16px; margin-bottom:14px;}
.provider-label{
  font-family:'Space Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); width:100px; flex-shrink:0;
}
.provider-list{display:flex; gap:10px; flex-wrap:wrap;}
.provider-badge{
  display:block; width:46px; height:46px; border-radius:10px; overflow:hidden;
  box-shadow:var(--shadow); background:var(--surface);
  transition:transform .15s ease;
}
.provider-badge:hover{transform:scale(1.08);}
.provider-badge img{width:100%; height:100%; object-fit:cover;}
.provider-note{font-size:12px; color:var(--muted); margin-top:10px;}
.provider-note a{color:var(--accent); font-weight:600;}

/* ---------- AD SLOTS ---------- */
.ad-slot{
  max-width:1200px; margin:32px auto 0; padding:0 24px;
  display:flex; align-items:center; justify-content:center;
  min-height:0; /* collapses to 0 if left empty; grows once ad script injects content */
}
.ad-slot:empty{display:none;}

/* ---------- FOOTER ---------- */
.site-footer{
  max-width:1200px; margin:60px auto 0; padding:24px; border-top:1px solid var(--border);
  color:var(--muted); font-size:12px; text-align:center;
}
.site-footer a{color:var(--accent); font-weight:600;}
.footer-links{display:flex; justify-content:center; gap:20px; margin-bottom:14px;}
.footer-links a{color:var(--ink); font-size:13px; font-weight:600;}
.footer-links a:hover{color:var(--accent);}

/* ---------- LEGAL / PROSE PAGES (About, Privacy, Contact) ---------- */
.prose-page{max-width:760px; margin:0 auto; padding:56px 24px 24px;}
.prose-page .eyebrow{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-warm); font-weight:700;
}
.prose-page h1{font-size:34px; margin:10px 0 8px;}
.prose-page .updated{font-size:12px; color:var(--muted); margin-bottom:32px;}
.prose-page h2{font-size:20px; margin:32px 0 12px;}
.prose-page p{line-height:1.75; color:var(--ink); margin:0 0 16px; font-size:15px;}
.prose-page ul{line-height:1.75; color:var(--ink); margin:0 0 16px; padding-left:20px;}
.prose-page li{margin-bottom:6px;}
.prose-page a{color:var(--accent); font-weight:600;}
.prose-page strong{color:var(--ink);}
.contact-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; margin-top:8px; box-shadow:var(--shadow);
}
.contact-card .label{font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; color:var(--muted); letter-spacing:.05em;}
.contact-card .value{font-size:16px; font-weight:600; margin:4px 0 20px;}
.contact-form{display:flex; flex-direction:column; gap:14px; margin-top:24px;}
.contact-form label{font-size:13px; font-weight:600; color:var(--muted);}
.contact-form input, .contact-form textarea{
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
  color:var(--ink); font-family:'Inter'; font-size:14px; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--accent);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .nav-inner{flex-wrap:wrap;}
  .nav-search{width:100%; order:3;}
  .hero{height:auto; padding-top:40px;}
  .ticket{max-width:100%;}
  .detail-inner{grid-template-columns:1fr;}
  .detail-poster{max-width:220px; margin:0 auto;}
}