/*
 * MIT No Attribution
 *
 * Copyright (c) 2025 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           Animepahe Theater Mode
@namespace      userstyles.world/user/hyper
@version        1.1.9
@description    Forces the Animepahe video player to behave like YouTube's theater mode.
@author         Hyper
@license        MIT-0
@var            checkbox hideWarning "Hide Domain Warning" 1
@var            range maxHeight "Player: Max Height" [900, 720, 1080, 10, "px"]
@var            range switcherWidth "Episode Switcher: Width" [480, 240, 480, 10, "px"]
@var            checkbox relocateSwitcher "Relocate Episode Switcher" 1
@var            select unblurSwitcher "Unblur Episode Switcher" ["null:Never", "hover:While Hovering*", "always:Always"]
@preprocessor   stylus
@homepageURL    https://userstyles.world/style/21684
==/UserStyle== */

@-moz-document url-prefix("https://animepahe.ru/play/"), url-prefix("https://animepahe.com/play/"), url-prefix("https://animepahe.org/play/") {
    /* Animepahe Watch Page */
    
    /* Hide Fradulent Domain Warning */
    
    if hideWarning {
        div.ann-fakesite {
            display: none !important;
        }
    }
    
    @media (min-width: 1100px) {
        /* gutterWidth = relocateSwitcher ? 30px : 480px */
        gutterWidth = relocateSwitcher ? 30px : switcherWidth
        
        /* Maximize Player Width while Accounting for Episode Switcher */
        
        div.theatre > * {
            max-width: "calc(100% - %s)" % gutterWidth !important;
        }
        
        /* Fix Player Scaling */
        
        div.player {
            container-type: inline-size;
            
            > div.embed-responsive::before {
                padding-top: "min(%s, 56.25cqw)" % maxHeight !important;
            }
        }
        
        /* Match Navbar Width to Player */
        
        nav.navbar {
            margin: "0 %s" % (gutterWidth / 2) !important;
            
            max-width: unset !important;
        }
        
        /* Relocate Episode Switcher to Lower Right*/
        
        if relocateSwitcher {
            div.prequel,
            div.sequel {
                top: calc(100% + (1.3rem * 2.5) + (0.875rem * 1.5) + 1.5rem + 15px) !important;
                height: calc(1.3rem * 5) !important;
                width: 25%;

                > i.fa {
                    transition-property: opacity !important;
                    
                    position: relative !important;
                    top: -100% !important;
                    left: unset !important;
                    right: unset !important;
                    
                    margin: 0 !important;
                    height: 100% !important;
                    width: 100% !important;
                    
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                
                /* Double Hide Overflow to Clip Image Corners and Remove Blur Overspill Respectively */
                
                overflow: hidden;
                > a {
                    overflow: hidden;
                    
                    > img {
                        object-fit: cover;
                        width: 100% !important;
                    }
                }
            }
            
            :root:has(div.theatre-info p#malp)  {
                div.prequel,
                div.sequel {
                    top: calc(100% + (1.3rem * 4.5) + (0.875rem * 1.5) + 1.5rem + 15px) !important;
                    height: calc(1.3rem * 9) !important;
                }
            }

            div.prequel {
                left: 50% !important;
                border-radius: 0.25rem 0 0 0.25rem !important;
            }
            div.sequel {
                right: 0 !important;
                border-radius: 0 0.25rem 0.25rem 0 !important;
            }
            
            :not(:has(div.sequel)) > div.prequel,
            :not(:has(div.prequel)) > div.sequel {
                width: 50%;
                border-radius: 0.25rem !important;
                
                pointer-events: none;
                > * {
                    pointer-events: auto;
                }
            }
            
            :not(:has(div.sequel)) > div.prequel {
                padding-right: 25%;
            }
            :not(:has(div.prequel)) > div.sequel {
                padding-left: 25%;
            }
            
            :root div.theatre-info {
                padding-right: 50% !important;
            }
        } else {
            switcherRatio = unit(1100px * 0.5625 / 480px, '')
            chevronOffset = 46.25px * 1.5
            
            div.prequel,
            div.sequel {
                height: "min(%s, calc(56.25cqw / %s))" % ((maxHeight / switcherRatio) switcherRatio) !important;
            }
            
            div.prequel {
                left: calc(50cqw - 50vw) !important;
                
                i.fa {
                    left: calc(abs(50cqw - 50vw)) !important;
                }
                &:hover {
                    i.fa {
                        left: "calc(abs(50cqw - 50vw) - %s)" % chevronOffset !important;
                    }
                }
            }
            
            div.sequel {
                right: calc(50cqw - 50vw) !important;
                
                i.fa {
                    right: calc(abs(50cqw - 50vw)) !important;
                }
                &:hover {
                    i.fa {
                        right: "calc(abs(50cqw - 50vw) - %s)" % chevronOffset !important;
                    }
                }
                
                img {
                    position: relative;
                    right: 0;
                }
            }
        }
        
        if unblurSwitcher {
            div.prequel,
            div.sequel {
                > i:only-of-type {
                    text-shadow: 0 0 10px black;
                }
                
                if unblurSwitcher == 'hover' {
                    :hover img {
                        filter: none !important;
                    }
                } else if unblurSwitcher == 'always' {
                    img {
                        filter: none !important;
                    }
                }
            }
        }
    }
    
    /* Conform Spacing to Existing Patterns */

    nav.navbar {
        padding: 15px 0 5px !important;
    }
    
    div.content-wrapper {
        padding: 0 !important;
    }
    
    div.theatre {
        margin: 10px 0 15px !important;
    }
    
    div.theatre-settings {
        margin-top: 0 !important;
        
        border-radius: 0 0 0.25rem 0.25rem;
    }
    
    /* Fix Anime Poster with Support for MAL-Sync Widget */
    
    div.theatre-info {
        padding: 0 !important;
        height: unset !important;
        
        img.anime-poster {
            margin: 0 15px 0 0 !important;
            width: auto !important;
            height: 5lh !important;
            position: unset !important;
            /* border-radius: 0 !important; */
        }
        
        &:has(p#malp) img.anime-poster {
            height: 9lh !important;
        }
        
        > h1:only-of-type {
            padding-top: 1lh;
        }
        
        p#malp {
            margin: 0;
            
            span#MalData {
                display: block !important;
                
                > span.malp-group {
                    display: block !important;
                }
            }
            
            /* Fix Typo in MAL-Sync Widget */
            
            span.malp-group-score {
                > span:only-of-type {
                    display: none;
                }
                
                &::before {
                    content: "Your Score: ";
                }
            }
        }
    }
    
    /* Remove Weird Extra Divider */
    
    div.theatre-settings a#downloadMenu::before {
        display: none !important;
    }
}