/* ── Tokens ──────────────────────────────────────────────────────────── */
:root{
  --ink:        #0A0E17;
  --ink-2:      #0F1524;
  --surface:    #141B2E;
  --surface-2:  #1B2438;
  --line:       #26304A;
  --text:       #EEF1F8;
  --text-dim:   #97A0B8;
  --text-faint: #5C657C;
  --coral:      #FF4D6D;
  --coral-dim:  #B23350;
  --gold:       #E8B34A;
  --ok:         #4ADE80;
  --radius-s:   8px;
  --radius-m:   14px;
  --radius-l:   22px;
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  padding-top:var(--safe-t);
  padding-bottom:var(--safe-b);
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--coral); color:#100; }

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

/* subtle grain so flat dark areas don't look sterile */
.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:999; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Topbar ──────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:24px;
  padding:calc(16px + var(--safe-t)) clamp(16px,4vw,40px) 16px;
  background:linear-gradient(180deg, rgba(10,14,23,.97), rgba(10,14,23,.88) 70%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{
  width:34px; height:34px; border-radius:9px; background:var(--coral);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:680; font-size:17px; color:var(--ink);
}
.brand-word{ font-family:var(--serif); font-weight:560; font-size:21px; letter-spacing:.2px; }

.tabs{ display:flex; gap:4px; background:var(--surface); padding:4px; border-radius:999px; border:1px solid var(--line); }
.tab{
  border:0; background:transparent; color:var(--text-dim);
  padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.tab.is-active{ background:var(--coral); color:#1a0509; }
.tab:not(.is-active):hover{ color:var(--text); }

.searchbar{
  margin-left:auto; position:relative; width:min(280px, 40vw);
  display:flex; align-items:center;
}
.searchbar .search-icon{
  position:absolute; left:12px; width:16px; height:16px; fill:none; stroke:var(--text-faint); stroke-width:2;
}
.searchbar input{
  width:100%; background:var(--surface); border:1px solid var(--line); color:var(--text);
  border-radius:999px; padding:9px 14px 9px 34px; font-size:13.5px; outline:none;
  transition:border-color .18s ease, background .18s ease;
}
.searchbar input:focus{ border-color:var(--coral); background:var(--surface-2); }
.searchbar input::placeholder{ color:var(--text-faint); }

@media (max-width: 720px){
  .topbar{ flex-wrap:wrap; gap:12px 16px; }
  .searchbar{ order:3; width:100%; margin-left:0; }
  .tabs{ order:2; }
}

/* ── App shell / sections ───────────────────────────────────────────── */
.app{ padding:0 clamp(16px,4vw,40px) 64px; max-width:1400px; margin:0 auto; }

.hero{
  position:relative; margin:20px 0 36px; border-radius:var(--radius-l); overflow:hidden;
  min-height:340px; display:flex; align-items:flex-end;
  background:var(--surface);
}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center 20%;
  filter:saturate(1.05);
  transition:opacity .6s ease;
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,14,23,.96) 0%, rgba(10,14,23,.55) 46%, rgba(10,14,23,.15) 78%),
    linear-gradient(0deg, rgba(10,14,23,.97) 0%, rgba(10,14,23,.15) 55%);
}
.hero-body{ position:relative; padding:clamp(20px,4vw,44px); max-width:640px; }
.hero-eyebrow{ font-size:12.5px; color:var(--coral); font-weight:700; }
.hero-title{
  font-family:var(--serif); font-weight:560; font-style:italic;
  font-size:clamp(28px,4.2vw,46px); line-height:1.08; margin:8px 0 12px;
}
.hero-syn{
  color:var(--text-dim); font-size:14.5px; line-height:1.6; margin:0 0 20px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.hero-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:14px; margin-bottom:14px; color:var(--text-dim); font-size:13px; }
.hero-dots{ position:absolute; right:20px; bottom:18px; display:flex; gap:6px; }
.hero-dot{ width:6px; height:6px; border-radius:99px; background:rgba(255,255,255,.28); cursor:pointer; border:0; padding:0; }
.hero-dot.is-active{ background:var(--coral); width:18px; transition:width .25s ease; }

.btn{
  border:0; cursor:pointer; border-radius:999px; padding:11px 22px; font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, background .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--text); color:var(--ink); }
.btn-primary:hover{ background:#fff; }
.btn-ghost{ background:rgba(255,255,255,.08); color:var(--text); border:1px solid rgba(255,255,255,.18); }
.btn-ghost:hover{ background:rgba(255,255,255,.14); }

.section{ margin:38px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.section-title{ font-family:var(--serif); font-weight:560; font-size:22px; }
.section-sub{ color:var(--text-faint); font-size:13px; }

/* ── Poster grid ─────────────────────────────────────────────────────── */
.grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.card{
  cursor:pointer; border-radius:var(--radius-m); overflow:hidden; background:var(--surface);
  border:1px solid var(--line);
  transition:transform .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-4px); border-color:var(--coral-dim); }
.card:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
.card-poster{
  position:relative; aspect-ratio:3/4.35; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.card-poster img{ width:100%; height:100%; object-fit:cover; }
.card-fallback{
  font-family:var(--serif); font-style:italic; font-weight:560; font-size:14px; color:var(--text-dim);
  text-align:center; padding:14px; line-height:1.3;
}
.card-badge{
  position:absolute; top:8px; right:8px; background:rgba(10,14,23,.72); backdrop-filter:blur(4px);
  color:var(--text); font-size:10.5px; font-weight:700; padding:3px 7px; border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
}
.card-badge.is-live{ background:rgba(255,77,109,.9); border-color:transparent; }
.card-info{ padding:10px 11px 12px; }
.card-title{
  font-size:13px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.7em;
}
.card-eps{ font-size:11.5px; color:var(--text-faint); margin-top:4px; }

/* skeletons */
.skeleton{ background:linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer{ 0%{background-position:180% 0;} 100%{background-position:-20% 0;} }
.card.is-skeleton .card-poster{ background:transparent; }
.card.is-skeleton{ pointer-events:none; }

.state-panel{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:60px 20px; color:var(--text-dim); gap:10px;
}
.state-panel .state-title{ font-family:var(--serif); font-style:italic; font-size:20px; color:var(--text); }
.state-panel .state-sub{ font-size:13.5px; max-width:380px; }

/* ── Detail panel (slide-over) ──────────────────────────────────────── */
.detail-scrim{
  position:fixed; inset:0; background:rgba(6,8,13,.72); backdrop-filter:blur(2px);
  z-index:80; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.detail-scrim.is-open{ opacity:1; pointer-events:auto; }
.detail-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:81;
  width:min(520px, 100vw); background:var(--ink-2);
  border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto; padding-bottom:calc(40px + var(--safe-b));
}
.detail-panel.is-open{ transform:translateX(0); }
.detail-top{ position:relative; }
.detail-cover{ width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--surface); }
.detail-cover-fade{ position:absolute; inset:0; background:linear-gradient(0deg, var(--ink-2) 0%, transparent 60%); }
.detail-close{
  position:absolute; top:calc(14px + var(--safe-t)); left:14px; z-index:2;
}
.detail-body{ padding:0 24px 24px; margin-top:-38px; position:relative; }
.detail-title{ font-family:var(--serif); font-weight:560; font-size:26px; line-height:1.15; margin:0 0 8px; }
.detail-meta{ display:flex; gap:10px; flex-wrap:wrap; color:var(--text-dim); font-size:12.5px; margin-bottom:16px; }
.detail-meta span{ background:var(--surface); border:1px solid var(--line); padding:3px 9px; border-radius:999px; }
.detail-syn{ color:var(--text-dim); font-size:14px; line-height:1.65; margin-bottom:22px; }
.detail-actions{ display:flex; gap:10px; margin-bottom:26px; }
.detail-eps-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.detail-eps-head h3{ font-family:var(--serif); font-weight:560; font-size:16px; margin:0; }
.ep-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(44px,1fr)); gap:7px; }
.ep-chip{
  border:1px solid var(--line); background:var(--surface); color:var(--text-dim);
  border-radius:8px; padding:9px 0; font-size:12.5px; font-weight:600; text-align:center; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.ep-chip:hover{ border-color:var(--coral-dim); color:var(--text); }
.ep-chip.is-locked{ color:var(--text-faint); background:var(--ink-2); }
.ep-chip.is-locked:hover{ border-color:var(--line); color:var(--text-faint); }

/* icon buttons */
.icon-btn{
  width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:rgba(10,14,23,.55); color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
}
.icon-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn:hover{ background:rgba(255,255,255,.12); }
.icon-btn:disabled{ opacity:.35; cursor:not-allowed; }

/* ── Player overlay ──────────────────────────────────────────────────── */
.player-overlay{
  position:fixed; inset:0; z-index:120; background:#000;
  display:flex; align-items:center; justify-content:center;
}
.player-overlay[hidden]{ display:none; }
.player-shell{ width:100%; height:100%; display:flex; flex-direction:column; }
.player-head{
  display:flex; align-items:center; gap:14px;
  padding:calc(12px + var(--safe-t)) 16px 12px;
  background:linear-gradient(180deg, rgba(0,0,0,.85), transparent);
}
.player-titles{ display:flex; flex-direction:column; min-width:0; flex:1; }
.player-title{ font-family:var(--serif); font-size:15px; font-weight:560; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-ep{ font-size:12px; color:var(--text-dim); }
.player-nav{ display:flex; gap:8px; }

.video-wrap{
  position:relative; flex:1; min-height:0; background:#000;
  display:flex; align-items:center; justify-content:center;
}
#videoEl{ width:100%; height:100%; max-height:100%; background:#000; }
.video-state{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:12px; color:var(--text-dim); text-align:center; padding:24px;
  background:#000; pointer-events:none;
}
.video-state.is-hidden{ display:none; }
.video-state .spinner{
  width:30px; height:30px; border-radius:999px; border:2.5px solid rgba(255,255,255,.18); border-top-color:var(--coral);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.video-state .vs-title{ font-family:var(--serif); font-style:italic; font-size:17px; color:var(--text); }
.video-state .vs-sub{ font-size:13px; max-width:320px; }
.video-state .btn{ pointer-events:auto; }

.episode-rail{
  display:flex; gap:8px; overflow-x:auto; padding:14px 16px calc(16px + var(--safe-b));
  background:#000; -webkit-overflow-scrolling:touch;
}
.rail-chip{
  flex-shrink:0; min-width:42px; border-radius:8px; padding:9px 12px; font-size:12.5px; font-weight:700;
  background:var(--surface); color:var(--text-dim); border:1px solid var(--line); cursor:pointer; text-align:center;
}
.rail-chip.is-active{ background:var(--coral); color:#1a0509; border-color:transparent; }

/* ── Toast ──────────────────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:calc(24px + var(--safe-b)); transform:translate(-50%, 8px);
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  padding:11px 18px; border-radius:999px; font-size:13px; z-index:200;
  opacity:0; transition:opacity .2s ease, transform .2s ease; box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.toast.is-shown{ opacity:1; transform:translate(-50%, 0); }

.site-footer{ text-align:center; color:var(--text-faint); font-size:11.5px; padding:20px; max-width:640px; margin:0 auto; }

@media (max-width: 560px){
  .detail-panel{ width:100vw; }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:12px; }
}