/*
 * MIT No Attribution
 *
 * Copyright (c) 2024 Hyper
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this
 * software and associated documentation files (the "Software"), to deal in the Software
 * without restriction, including without limitation the rights to use, copy, modify,
 * merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
 * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
 * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

/* ==UserStyle==
@name           HiAnime Theater Mode
@namespace      userstyles.world/user/hyper
@version        1.0.3
@description    Forces the HiAnime video player to behave like YouTube's theater mode.
@author         Hyper
@license        MIT-0
@preprocessor   stylus
@var            checkbox restrictPlayer "Restrict Player Size" 1
@var            range maxHeight "Player: Max Height" [900, 720, 1080, 10, "px"]
@var            checkbox unrestrictPlayerWidth "Unrestrict Player Width" 1
@var            checkbox restrictContent "Restrict Content Width" 1
@var            range contentWidth "Content: Max Width" [1780, 1280, 1920, 10, "px"]
@var            checkbox excludeHeaderFooter "Exclude Header & Footer" 1
@var            checkbox hideCommentsButton "Hide Comments Button" 1
@var            checkbox inlineMostPopular "Inline Most Popular" 0
@homepageURL    https://userstyles.world/style/18130
==/UserStyle== */

/* @-moz-document url-prefix("https://hianime.to/watch/") { */
@-moz-document regexp("^https:\\/\\/hianime\\.[a-z]{2,}\\/watch\\/[^/]+$") {
    /* HiAnime Watch Page */

    /* Remove Width Rules */
    div.container {
        max-width: none !important;
    }

    /* Selectively Reapply Width Rules */
    if restrictContent {
        @media screen and (min-width: contentWidth + 30 + 15) {
            unless excludeHeaderFooter {
                div#footer div.container,
                div#header div.container {
                    max-width: contentWidth + 30 !important;
                }
            }

            div#main-wrapper > div.container,
            div#main-wrapper > div:not(#ani_detail) div.container {
                max-width: contentWidth + 30 !important;
            }

            div.anis-watch.anis-watch-tv > div:not(.watch-player),
            div.anis-watch-detail {
                max-width: contentWidth !important;
                margin-left: "calc(calc(100% - %s) / 2)" % contentWidth !important;
            }
        }

        /* Selectively Round Bottom Corners of Auxillary Player Controls */
        /* if unrestrictPlayerWidth { */
        /* if restrictPlayer { */
        if (16 / 9) * maxHeight > contentWidth or unrestrictPlayerWidth {
            @media screen and (min-width: contentWidth + 30 + 24) {
                div.player-controls {
                    border-radius: 0 0 6px 6px;
                }
            }
        }
    }

    /* Fix Player Scaling */
    maxWidth = max(contentWidth, (16 / 9) * maxHeight)

    div.anis-watch-tv div.player-frame {
        if restrictPlayer {
            padding-bottom: "min(%s, 56.25%)" % maxHeight !important;
        } else {
            padding-bottom: 56.25% !important;
        }
    }
    
    unless unrestrictPlayerWidth {
        /* Restrict Player Width */
        @media screen and (min-width: maxWidth + 30) {
            div.watch-player {
                max-width: maxWidth !important;
                margin-left: "calc(calc(100% - %s) / 2)" % maxWidth !important;
            }
        }
    }

    /* Hide Expand Button */
    a#media-resize {
        display: none !important;
    }

    /* Fix User Avatar Margin */
    @media screen and (min-width: 1300px) {
        div.btn-user-avatar {
            margin-right: 0 !important;
        }
    }
    
    /* Clean Up 1Flix Ad Container Leftover by uBlock Origin */
    div#main-wrapper > div[style="margin: 1rem auto; text-align: center"] {
        display: none !important;
    }
    
    /* Hide Scroll to Comments Button */
    if hideCommentsButton {
        div.anis-content div.anisc-detail {
            min-height: unset !important;

            a.dt-comment {
                display: none !important;
            }
        }
    }

    /*\
    |*| Below is Heavily Copied from Existing Media Queries
    \*/

    /* Hide Breadcrumb Navbar */
    div.prebreadcrumb {
        display: none !important;
    }

    /* Remove Header/Player Gap */
    div.anis-watch-wrap {
        padding-top: 0;
    }

    /* Force Episode List Below Player */
    div.anis-watch-tv {
        padding: 0 !important;
        max-width: none;
    }
    div.anis-watch {
        width: auto;
        margin: 0;
        padding-right: 0;
    }
    div#episodes-content,
    div.seasons-block {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
    }
    div.anis-watch-tv div.ss-list {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        max-height: 467px;
        margin-bottom: 0;
    }

    /* Remove Variable Player Margin */
    div.layout-page-watchtv div.anis-watch-wrap {
        margin: 0 auto;
/*         width: calc(100% - 160px); */
        width: 100%;
    }

    /* Force Metadata Below Player*/
    div.anis-watch-detail {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        @media screen and (min-width: 1400px) {
            padding-top: 50px;
        }
        margin-bottom: 0;
    }
    div.anis-watch-wrap.extend div.anis-watch-detail {
        display: block;
    }

    @media screen and (min-width: 1600px) {
        div.anis-watch-detail > div.anis-content {
            padding: 0 320px 0 140px !important;
        }
    }
    @media screen and (max-width: 1599px) {
        div.anis-watch-detail > div.anis-content {
            padding: 0 320px 0 120px !important;
        }
    }
    @media screen and (max-width: 1400px) {
        div.anis-watch-detail > div.anis-content {
            padding: 0 320px 0 100px !important;
            min-height: 120px;
        }
    }
    @media screen and (max-width: 860px) {
        div.anis-watch-detail > div.anis-content {
            padding-right: 0 !important;
            padding-top: 180px !important;
        }
    }
    @media screen and (max-width: 575px) {
        div.anis-watch-detail > div.anis-content {
            padding-left: 75px !important;
        }
    }

    @media screen and (min-width: 1400px) {
        div.anis-watch-detail div.dt-rate div.block-rating {
            margin: 0;
            width: 100%;
        }
        div.anis-watch-detail div.dt-rate {
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
        }
        div.anis-watch-detail div.anis-content div.anisc-poster {
            position: absolute;
            top: 0;
            left: 0;
/*             width: 80px !important; */
            transform: none !important;
/*             margin-bottom: 20px; */
        }
    }
    /* Prevent Anime Title Growth
    div.anis-watch-detail div.anis-content div.anisc-detail h2.film-name {
        margin-bottom: 10px;
        font-size: 20px;
    }
    */

    /* Force Most Popular Section Below Player */
    if !inlineMostPopular {
        div#main-content,
        div#main-sidebar {
            float: none;
            width: 100%;
            padding: 0;
        }
    } else {
        div.block_area-header {
            margin-bottom: 1rem !important;
        }
    }
}