/* CdramaQ — "Midnight".

   Built to the mockup: deep navy page, violet action colour, a full-width hero
   whose artwork changes from a thumbnail strip, then rows of poster cards.

   Only data this catalogue actually has is shown. The reference theme carries
   age ratings, runtimes, HD flags and live channels; we have none of those, so
   the badge row carries what is real — status, year, region, genre, episode
   count — rather than inventing labels we cannot fill. */

:root{
  --bg:#00031c;
  --panel:#0d1130;
  --panel-2:#191c33;
  --line:#242a4a;
  --line-soft:#1b2040;
  --text:#f2f3f8;
  --text-soft:#c3c6d4;
  --muted:#8a8fa8;
  --accent:#6c52ee;
  --accent-dark:#5b4fcf;
  --accent-soft:rgba(108,82,238,.16);
  --live:#e5484d;
  --on-accent:#fff;
  --radius:10px;
  --pad:clamp(16px,3.4vw,52px);
  --wrap:1520px;
  --shadow:0 2px 8px rgba(0,0,0,.45);
  --shadow-lift:0 16px 40px rgba(0,0,0,.6);
  --sans:"PingFang TC","PingFang SC","Microsoft JhengHei","Microsoft YaHei","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --display:"Georgia","Songti TC","Times New Roman",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-weight:700;line-height:1.22;letter-spacing:-.01em}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2b3157;border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- top bar ---------------- */

.site-head{position:absolute;top:0;left:0;right:0;z-index:60}
.site-head.solid{position:sticky;background:rgba(0,3,28,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.head-row{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:66px}
/* Wordmark and mark carry the same violet as the favicon and the social card. */
.logo{flex:none;display:flex;align-items:center;gap:9px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.logo svg{width:28px;height:28px;flex:none}
.logo span{display:flex;flex-direction:column;line-height:1.05}
.logo small{color:var(--muted);font:400 9px/1 var(--sans);letter-spacing:.26em}
.main-nav{display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{flex:none;position:relative;padding:8px 12px;color:var(--text-soft);font-size:14.5px;font-weight:600;white-space:nowrap}
.main-nav a:hover{color:var(--text)}
.main-nav a.current{color:var(--text)}
.main-nav a.current:after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:var(--accent)}
.head-search{position:relative;flex:0 1 250px;min-width:120px}
.head-search input{width:100%;height:38px;padding:0 40px 0 15px;border:1px solid var(--line);border-radius:19px;background:rgba(255,255,255,.06);color:var(--text)}
.head-search input::placeholder{color:var(--muted)}
.head-search input:focus{border-color:var(--accent);outline:none;background:rgba(255,255,255,.09)}
.head-search button{position:absolute;right:4px;top:4px;width:30px;height:30px;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);cursor:pointer}

/* ---------------- hero ---------------- */

.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(72vh,560px);display:flex;align-items:center;padding:104px var(--pad) 48px}
/* A 2:3 poster stretched across a banner turns to mush, so the copy behind the
   text is blurred on purpose and the sharp poster sits on the right instead. */
.hero-art{position:absolute;inset:-8%;z-index:-2;background-position:center 26%;background-size:cover;filter:blur(38px) saturate(1.3) brightness(.72);transform:scale(1.1)}
.hero.has-art .hero-art{inset:0;filter:none;transform:none}
.hero-art:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 4%,rgba(0,3,28,.86) 38%,rgba(0,3,28,.35) 72%,rgba(0,3,28,.6) 100%),
             linear-gradient(0deg,var(--bg) 1%,transparent 48%);
}
.hero-in{position:relative;z-index:2;width:min(620px,92%)}
.hero-poster{
  position:absolute;right:clamp(24px,6vw,110px);top:50%;transform:translateY(-42%);z-index:1;
  width:clamp(150px,17vw,260px);aspect-ratio:2/3;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--shadow-lift);
}
.hero h1{font-family:var(--display);font-size:clamp(32px,4.6vw,58px);font-weight:400;letter-spacing:-.02em}
.hero .lede{margin-top:8px;color:#dfe3f2;font-size:clamp(15px,1.7vw,20px);font-weight:600;letter-spacing:.06em}
.hero-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 14px}
.chip{display:inline-block;padding:4px 11px;border-radius:5px;background:rgba(255,255,255,.09);color:var(--text-soft);font-size:12.5px;font-weight:600;transition:background .15s,color .15s}
a.chip:hover{background:rgba(255,255,255,.2);color:#fff}
a.chip.now:hover{background:var(--accent-dark)}
.chip.now{background:var(--accent);color:var(--on-accent)}
.chip.plain{background:none;padding:4px 0;color:var(--muted)}
.hero p{max-width:52ch;color:var(--text-soft);font-size:15px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:9px;font-size:15px;font-weight:700}
.btn-main{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 22px rgba(108,82,238,.35)}
.btn-main:hover{background:var(--accent-dark)}
.btn-ghost{background:rgba(255,255,255,.1);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}

/* ---------------- rows ---------------- */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
main{padding-bottom:50px}
.row{margin-top:clamp(26px,3.6vh,42px)}
.row-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.row-head h2{font-size:clamp(17px,1.6vw,22px)}
.row-head a{color:var(--muted);font-size:20px;line-height:1}
.row-head a:hover{color:var(--accent)}
.reel{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;list-style:none;scroll-snap-type:x proximity;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.reel li{flex:0 0 clamp(140px,12.4vw,196px);scroll-snap-align:start}

/* ---------------- cards ---------------- */

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:24px 14px;list-style:none}
.card{position:relative}
.poster{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:2/3;border-radius:var(--radius);
  background:var(--panel-2) center/cover no-repeat;
  box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;
}
.card:hover .poster{transform:translateY(-4px);box-shadow:var(--shadow-lift),0 0 0 2px var(--accent)}
.poster .region{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:5px;background:rgba(0,3,28,.78);backdrop-filter:blur(4px);color:#fff;font-size:11px;font-weight:700}
.poster .ep{position:absolute;left:8px;bottom:8px;padding:3px 9px;border-radius:5px;background:rgba(0,3,28,.82);color:#fff;font-size:11px;font-weight:700}
.poster .ep.airing{background:var(--accent);color:var(--on-accent)}
.card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:9px;font-size:14px;font-weight:600;line-height:1.35}
.card:hover .card-title{color:var(--accent)}
.card-sub{margin-top:2px;color:var(--muted);font-size:12px}

/* ---------------- listing pages ---------------- */

.page-top{padding-top:92px}
.crumb{color:var(--muted);font-size:12.5px;margin-bottom:12px}
.crumb a:hover{color:var(--accent)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.section-head h1,.section-head h2{font-size:clamp(21px,2.6vw,30px)}
.section-head .count{color:var(--muted);font-size:13px}
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:32px 0 6px}
.pager a{padding:9px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text-soft);font-size:13.5px;font-weight:600}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager .now{padding:9px 12px;color:var(--muted);font-size:13px}

/* ---------------- panels, detail ---------------- */

.panel{margin-top:22px;padding:clamp(16px,2.2vw,26px);border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel)}
.panel h2{font-size:19px;margin-bottom:10px}
.panel h3{font-size:15.5px;margin:16px 0 6px}
.panel p{margin-bottom:9px;color:var(--text-soft);font-size:14px;line-height:1.85}
.panel p a,.panel li a{color:var(--accent)}
.note{margin-top:14px;padding:12px 15px;border-left:3px solid var(--accent);border-radius:0 8px 8px 0;background:var(--panel-2);color:var(--muted);font-size:12.5px;line-height:1.8}

.detail{display:grid;grid-template-columns:230px 1fr;gap:clamp(18px,3vw,34px);align-items:start}
.detail-poster{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-lift)}
.detail h1{font-size:clamp(22px,3vw,34px);margin-bottom:4px}
.detail .alt{color:var(--muted);font-size:13.5px;margin-bottom:14px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 22px;margin-bottom:14px}
.facts div{font-size:13.5px;color:var(--text-soft)}
.facts b{margin-right:7px;color:var(--muted);font-weight:600}
.synopsis{color:var(--text-soft);font-size:14px;line-height:1.9}
.synopsis p + p{margin-top:9px}

.ep-grid{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.ep-grid a{min-width:60px;padding:8px 12px;text-align:center;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--text-soft);font-size:13px;font-weight:600}
.ep-grid a:hover{border-color:var(--accent);color:var(--accent)}
.ep-grid a.current{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-cloud a{padding:6px 13px;border:1px solid var(--line);border-radius:18px;background:var(--panel-2);color:var(--text-soft);font-size:13.5px}
.tag-cloud a:hover{border-color:var(--accent);color:var(--accent)}
.tag-cloud span{color:var(--muted);font-size:11.5px}

/* ---------------- player ---------------- */

.stage{border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow-lift)}
#dplayer{width:100%;aspect-ratio:16/9;background:#000}
.dplayer-video-wrap video{object-fit:contain!important}
.source-bar{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:12px 15px;background:var(--panel)}
.source-bar .label{color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.source-bar .sources{display:flex;flex-wrap:wrap;gap:7px}
.source-bar button{padding:7px 13px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);color:var(--text-soft);font-size:12.5px;font-weight:600;cursor:pointer}
.source-bar button:hover{border-color:var(--accent);color:var(--accent)}
.source-bar button.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.source-bar .loading{color:var(--muted);font-size:12.5px}
.source-bar .failed{color:var(--live);font-size:12.5px;font-weight:600}

/* ---------------- footer ---------------- */

.site-foot{margin-top:44px;border-top:1px solid var(--line-soft);background:var(--panel)}
.site-foot .wrap{padding-top:26px;padding-bottom:30px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.site-foot h3{margin-bottom:10px;font-size:14px}
.site-foot p,.site-foot a{color:var(--muted);font-size:12.5px;line-height:1.9}
.site-foot a:hover{color:var(--accent)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.foot-legal{margin-top:20px;padding-top:14px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:12px}

/* ---------------- responsive ---------------- */

@media (max-width:900px){
  .detail{grid-template-columns:150px 1fr}
  .hero{min-height:auto;padding-top:92px}
  .hero-poster{width:120px;right:20px}
  .hero-in{width:100%;padding-right:130px}
}
@media (max-width:700px){
  .head-row{height:auto;flex-wrap:wrap;gap:9px;padding:10px var(--pad)}
  .head-search{order:3;width:100%;flex-basis:100%}
  .main-nav{order:4;width:100%}
  .site-head{position:sticky;background:rgba(0,3,28,.95);backdrop-filter:blur(12px)}
  .hero{padding:26px var(--pad) 30px;min-height:auto}
  .hero p{-webkit-line-clamp:3}
  .hero-poster{display:none}
  .hero-in{padding-right:0}
  .page-top{padding-top:22px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:18px 11px}
  .reel li{flex-basis:126px}
  .detail{grid-template-columns:1fr}
  .detail-poster{max-width:180px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* ---------------- update board ---------------- */

.board-lede{margin:-6px 0 20px;color:var(--muted);font-size:13.5px}
.board-lede a{color:var(--accent)}
.board-day{margin-bottom:26px}
.board-day h2{font-size:15px;margin-bottom:10px;padding-left:10px;border-left:3px solid var(--accent);line-height:1.1}
.board{list-style:none;border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.board li + li{border-top:1px solid var(--line-soft)}
.board-row{display:grid;grid-template-columns:40px 1fr auto auto;gap:13px;align-items:center;padding:10px 14px}
.board-row:hover{background:var(--panel-2)}
.board-thumb{width:40px;aspect-ratio:2/3;border-radius:5px;background:var(--panel-2) center/cover no-repeat}
.board-main{min-width:0}
.board-title{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-row:hover .board-title{color:var(--accent)}
.board-meta{display:block;margin-top:2px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-ep{padding:4px 10px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;white-space:nowrap}
.board-time{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .board-row{grid-template-columns:36px 1fr auto;gap:10px}
  .board-thumb{width:36px}
  .board-time{display:none}
}

/* ---------------- follow list ---------------- */

.btn.follow.on{background:var(--accent-soft);color:var(--accent)}
.board-new{padding:3px 9px;border-radius:6px;background:var(--live);color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
.board-drop{width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:13px;cursor:pointer}
.board-drop:hover{background:var(--panel-2);color:var(--live)}
#listBox .board-row{grid-template-columns:40px 1fr auto auto auto}
@media (max-width:700px){#listBox .board-row{grid-template-columns:36px 1fr auto}}

/* ---------------- continue watching ---------------- */

.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.board-head{font-size:16px;margin:22px 0 10px;padding-left:10px;border-left:3px solid var(--accent);line-height:1.1}
.watch-bar{display:block;height:3px;margin-top:6px;border-radius:2px;background:var(--line);overflow:hidden}
.watch-bar i{display:block;height:100%;background:var(--accent)}