/*
 * nineanime-detail.css — owned by the watch + detail area.
 * Scope: the anime page (/anime/{slug}, frontend/anime.blade.php). It is
 * drawn as 9anime's watch page itself (partials/watch/page, pageMode
 * "detail"; DECISIONS), so it shares nineanime-watch.css; the rules here are
 * only what the page has instead of the player, all scoped under .na-detail
 * (the #watch-main root of that page).
 */

/* ------------------------------------------------------ the anime page */

/* The player slot: the blurred poster and a "Watch now" play circle (the
   trailer, or "Coming soon", for a title with no episode). */
.na-detail .wb_-playerarea .na-watch-now {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 2;
    width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
}
.na-detail .na-watch-now .na-watch-label {
    position: absolute; top: calc(50% + 45px); left: 0; right: 0;
    color: #fff; font-size: 13px; font-weight: 500; text-align: center;
}
.na-detail .na-watch-now:focus { outline: none; }
.na-detail .na-soon-text {
    position: absolute; left: 0; right: 0; bottom: 20%; z-index: 2;
    color: #aaa; font-size: 13px; text-align: center;
}
.na-detail .na-soon-text .count-down { color: #9b61ec; }
.na-detail .wb_-playerarea iframe { z-index: 3; }
.na-detail .player-servers { display: none; }
.na-detail .block_area-episodes { margin-top: 30px; }
@media screen and (max-width: 480px) {
    .na-detail .block_area-episodes { margin-top: 20px; }
}

/* No episode block under the controls (a title with no episode yet): keep
   9anime's 30px block gap before the share row. */
.na-detail.no-episodes #watch-block { margin-bottom: 30px; }
/* The next-episode line sits flush under the controls (as the servers do on
   /watch) and carries the gap itself. */
.na-detail .na-next-ep + .block_area-episodes { margin-top: 0; }