/* Videos page: the player on top, the trailer list below. The page shell and tabs come from /anime/css/browse.css. */
#vd.ab-wrap{align-content:start;}
.vd-stage{padding:0; display:grid; align-items:start; align-content:start; grid-template-columns:minmax(0,1fr); gap:14px; margin-bottom:22px;}
.vd-player{position:relative; aspect-ratio:16/9; width:100%; border-radius:16px; overflow:hidden; background:#000; border:1px solid var(--border-soft);}
.vd-player iframe,.vd-cover{position:absolute; inset:0; width:100%; height:100%; border:0;}
.vd-cover{display:grid; place-items:center; padding:0; background:linear-gradient(160deg,var(--teal),var(--blue)); cursor:pointer;}
.vd-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.vd-cover:focus-visible{outline:3px solid var(--blue); outline-offset:-3px;}
.vd-play{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:rgb(0 0 0 / .62); color:#fff; transition:transform .15s, background .15s;}
.vd-play svg{width:55%; height:55%; fill:currentColor; margin-inline-start:6%;}
.vd-play-lg{position:relative; width:68px; height:68px;}
.vd-cover:hover .vd-play-lg{transform:scale(1.08); background:var(--blue);}
.vd-info{display:flex; flex-direction:column; gap:10px; min-width:0;}
.vd-now{margin:0; font:700 20px/1.35 'Inter',sans-serif; color:var(--navy); overflow-wrap:anywhere;}
html[lang="ar"] .vd-now,html[lang="ja"] .vd-now{font-family:inherit;}
.vd-anime{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; color:inherit; text-decoration:none; min-width:0;}
.vd-anime-t{font-weight:600; color:var(--blue-dark); overflow-wrap:anywhere;}
.vd-anime:hover .vd-anime-t{text-decoration:underline;}
.vd-anime-k{font-size:13px; color:var(--navy-soft);}
.vd-yt{align-self:flex-start; font-size:13.5px; font-weight:600; color:var(--navy-soft); text-decoration:none;}
.vd-yt:hover{color:var(--blue-dark); text-decoration:underline;}

.vd-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px;}
.vd-card{display:flex; flex-direction:column; height:100%; border:1px solid var(--border-soft); border-radius:16px; overflow:hidden; background:var(--white); color:inherit; text-decoration:none; transition:border-color .15s;}
.vd-card:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--border-soft));}
.vd-card:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.vd-card[aria-current="true"]{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) inset;}
.vd-thumb{position:relative; display:grid; place-items:center; aspect-ratio:16/9; background:linear-gradient(160deg,var(--teal),var(--blue)); overflow:hidden;}
.vd-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.vd-thumb .vd-play{position:relative;}
.vd-card:hover .vd-play{background:var(--blue);}
.vd-body{display:flex; flex-direction:column; gap:4px; padding:12px 14px 14px; min-width:0;}
.vd-h{font:700 15.5px/1.4 'Inter',sans-serif; color:var(--navy); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;}
html[lang="ar"] .vd-h,html[lang="ja"] .vd-h{font-family:inherit;}
.vd-sub{font-size:13.5px; line-height:1.5; color:var(--navy-soft); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;}
.vd-meta{display:flex; flex-wrap:wrap; gap:2px 8px; font-size:12.5px; color:var(--navy-soft);}
.vd-meta i{font-style:normal; opacity:.6;}
@media (min-width:900px){
  .vd-stage{grid-template-columns:minmax(0,2fr) minmax(240px,1fr); align-items:start; gap:22px;}
}
@media (max-width:560px){ .vd-list{grid-template-columns:1fr;} .vd-now{font-size:18px;} }
