/* 
 * ORCS & PAYERS --------------------------------------------------------------
 * Custom CSS
 * 
 * Author: 
 * Pavel Soyfer
 * pavelsoyfer.ru
 */
 
 

/* VARIABLES --------------------------------------------------------------- */
:root {
    /* Colors */
        /* UI */
        --ui-light: #FFFBE5;
        --ui-bg: #0B0F12;
        --ui-bg-a20: rgba(11, 15, 18, 0.2);
        --ui-bg-a40: rgba(11, 15, 18, 0.4);
        --ui-bg-a80: rgba(11, 15, 18, 0.8);
        --ui-stroke: rgba(255, 255, 255, 0.1);
        --ui-divider: rgba(255, 255, 255, 0.12);

        /* Orc Green */
        --orc-green-300: #D8DD8F;
        --orc-green-400: #C4CC58;
        --orc-green-500: #B1BB20;

        /* Orc Green Gradient */
        --orc-green-gradient: 
            linear-gradient(180deg, 
                            var(--orc-green-300) 0%, 
                            var(--orc-green-400) 50%, 
                            var(--orc-green-500) 100%);
    
    /* Typography */
    
    /* Effects */
        --bg-blur: 10px;
        --shadow-inner-ui: 0 1px 0 0 rgba(255, 255, 255, 0.16) inset;
        --shadow-inner-card: 0 2px 0 0 rgba(255, 255, 255, 0.16) inset;
        --shadow-inner-btn: 0 2px 0 var(--orc-green-300) inset;
    
    /* Transitions */
        --btn_hover_duration: 0.2s;
}

/* GLOBAL ------------------------------------------------------------------ */
@media screen {

/* Headings */
.uc-heading .tn-atom{
    position: relative;
    background: repeating-linear-gradient(
        to bottom, 
        #FFF8D7 0, 
        #FFF8D7 0.6em, 
        #F3C999 0.6em, 
        #F3C999 1.07em);
    -webkit-background-clip: text;
    color: transparent !important;
}
.uc-heading .tn-atom:before {
    content: attr(data-text);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-text-stroke: 1px;
    background: repeating-linear-gradient(
        to bottom, 
        #FFF8D7 0, 
        #FFF8D7 0.6em, 
        #F3C999 0.6em, 
        #F3C999 1.07em);
    -webkit-background-clip: text;
}
.uc-heading .tn-atom:after {
    content: attr(data-text);
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    color: black;
    text-align: inherit;
    z-index: -1;
    -webkit-text-stroke: 8px black;
}
    

/* Heading icon */
.uc-heading_icon:before,
.uc-heading_icon:after {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 24px;
    box-sizing: border-box;

}
.uc-heading_icon:before {
    border: 1px solid var(--ui-stroke);
    background-color: var(--ui-bg-a20);
    backdrop-filter: blur(var(--bg-blur));
    z-index: -1;
}
.uc-heading_icon:after {box-shadow: var(--shadow-inner-ui);}


/* BUTTONS */
    /* Button inner container */
    .btn_primary .tn-atom__button-content,
    .btn_secondary .tn-atom__button-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        position: relative;
    }

    /* Button (Primary) */
    .btn_primary .tn-atom {
        height: 54px !important;
        position: relative;
        background: var(--orc-green-300) !important;
        transition-duration: var(--btn_hover_duration) !important;
        transition-timing-function: ease !important;
    }
    
    /* Button (Primary) hover background */
    .btn_primary .tn-atom:before {
        content: "";
        display: block;
        width: 100%;
        height: calc(100% - 2px);
        position: absolute;
        top: 2px;
        left: 0;
        border-radius: inherit;
        background: var(--orc-green-500);
        transition: transform;
        transition-duration: var(--btn_hover_duration);
        transition-timing-function: ease;
    }

    /* Button (Primary) hover */
    .btn_primary .tn-atom:hover {background: var(--orc-green-400) !important;}
    .btn_primary .tn-atom:hover:before {transform: translateY(100%);}

    
    /* Button (Secondary) */
    .btn_secondary .tn-atom,
    .btn_tertiary .tn-atom {
        position: relative;
        height: 54px !important;
        box-shadow: var(--shadow-inner-btn);
    }

    /* Button (Secondary) icon */
    .btn_secondary .tn-atom_button-icon,
    .btn_tertiary .tn-atom_button-icon {
        transition: filter var(--btn_hover_duration) ease;
    }

    /* Button (Secondary) hover background */
    .btn_secondary .tn-atom:before,
    .btn_tertiary .tn-atom:before,
    .uc-header .t-btn:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0px;
        border-radius: inherit;
        opacity: 0.1;
        background: var(--orc-green-500);
        transform: translateY(-100%);
        transition: transform var(--btn_hover_duration) ease;
    }

    /* Button (Secondary) hover */
    .btn_secondary .tn-atom:hover:before,
    .btn_tertiary .tn-atom:hover:before,
    .uc-header .t-btn:hover:before {transform: translateY(0);}
    
    
    /* Button (Tertiary) */
    .btn_tertiary .tn-atom {height: 44px !important;}
    .btn_tertiary .tn-atom__button-text {
        position: relative;
        bottom: 1px;
    }
}


/* DESKTOP ----------------------------------------------------------------- */
@media screen {

    /* HEADER -------------------------------------------------------------- */
    @media screen {

    /* Header background */
    .uc-header .t-menu-base {
        background: transparent !important;
        z-index: 9999999;
    }

    /* Header inner container */
    .uc-header .t-menu-base__maincontainer {
        padding: 0 28px;
        height: 100% !important;
        position: relative;
        background: var(--ui-bg-a80);
        backdrop-filter: blur(8px);
        box-shadow: var(--shadow-inner-ui) !important;
        gap: 0;
    }

    /* Header border */
    .uc-header .t-menu-base__maincontainer:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid var(--ui-stroke);
        border-radius: inherit;
        box-sizing: border-box;
        pointer-events: none;
    }


    /* Header logo container */
    .uc-header .t-menu-base__logo {gap: 0;}

    /* Header left divider */
    .uc-header .t-menu-base__logo:after {
        content: "";
        display: block;
        width: 1px;
        height: 36px;
        border-radius: 1px;
        background-color: var(--ui-divider);
        margin: 0 28px 0 22px;
    }


    /* HEADER NAV */
        /* Header nav items container */
        .uc-header .t-menu-base__list {
            flex-grow: 1;
            justify-content: flex-end;
            gap: 29px !important;
        }

        /* Header nav first item */
        .uc-header .t-menu-base__list-item:first-child {margin-right: auto;}

        /* Header nav first item inner link */
        .uc-header .t-menu-base__list-item:first-child .t-menu__link-item {
            display: flex;
            align-items: center;
            height: 22px !important;
        }

        /* Header nav first item icon */
        .uc-header 
        .t-menu-base__list-item:first-child .t-menu__link-item:before {
            content: "";
            display: block;
            width: 24px;
            height: 18px;
            background-image: url(https://static.tildacdn.com/tild3564-3766-4730-b939-633537643362/gamepad24x18px_accen.svg);
            margin-right: 8px;
        }

        /* Header nav first item arrow */
        .uc-header .t966__arrow {margin-left: 8px}
        .uc-header .t966__arrow::after {
            border: none;
            width: 10px;
            height: 8px;
            background-image: url(https://static.tildacdn.com/tild3830-3531-4236-b262-653032343366/chevron_small_d10x8p.svg);
        }
        .uc-header .t966__tm-link_active .t966__arrow::after {
            transform: translateY(-30%) rotate(180deg);
        }

        /* Header nav item */
        .uc-header .t-menu-base__list-item {position: relative;}

        /* Header nav item underline */
        .uc-header .t-menu-base__list-item:not(:first-child):after {
            content: "";
            display: block;
            width: 100%;
            height: 2px;
            position: absolute;
            bottom: -24px;
            border-radius: 2px 2px 0 0;
            background: var(--orc-green-gradient);
            transform: scaleX(0);
            transform-origin: left bottom;
            transition: transform 0.2s ease;
        }
        .uc-header .t-menu-base__list-item:not(:first-child):hover:after {
            transform: scaleX(1);
        }


    /* Header right divider */
    .uc-header .t-menu-base__rightwrapper:before {
        content: "";
        display: block;
        width: 1px;
        height: 36px;
        border-radius: 1px;
        margin: 0 28px;
        background-color: var(--ui-divider);
    }

    /* Header button */
    #rec1925657191.uc-header .t-btnflex.t-btnflex_type_button {
        position: relative;
        box-shadow: 0px 2px 0 var(--orc-green-300) inset !important;
    }

    /* Header button text */
    .uc-header .t-menu-base__buttons .t-btnflex__text {
        position: relative;
        bottom: 1px;
        overflow: visible;
    }

    
    /* HEADER SUB-NAV (DROPDOWN) */
    .uc-header_sub-nav {
        --open-duration: 0.15s;
        --item-hover-duration: 0.15s;
    }
    
        /* Header sub-nav container */
        .uc-header_sub-nav .t966__tooltip-menu {
            display: block !important;
            visibility: hidden; 
            border: none !important;
            background: transparent !important;
            backdrop-filter: blur(10px);
            transform: translate(calc(50% - 67px), 12px);
            transform: translate(321px, calc(88px + 12px));
            transition: visibility, opacity, transform;
            transition-duration: 0s, var(--open-duration), var(--open-duration);
            transition-delay: var(--open-duration), 0s, 0s;
            left: 0 !important;
            top: 0 !important;
        }

        /* Header sub-nav background */
        .uc-header_sub-nav .t966__tooltip-menu::after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            position: fixed;
            top: 0;
            left: 0;
            background-color: var(--ui-bg-a80) !important;
            border: none !important;
            box-shadow: var(--shadow-inner-ui);
            transform: none;
        }

        html, body {overflow-x: hidden !important;}

        /* Header sub-nav overlay */
        .uc-header_sub-nav .t966__tooltip-menu:before {
            content: "";
            display: block;
            border: none !important;
            right: auto;
            transform: none;
            width: 100vw;
            height: calc(100vh + 12px);
            position: absolute;
            top: -100px;
            left: -321px;
            background: var(--ui-bg-a40);
            pointer-events: none;
        }


        /* Header sub-nav open animation */
        .uc-header_sub-nav .t966__tooltip-menu_show {
            visibility: visible;
            transform: translate(321px, 88px);
            transition-delay: 0s, 0s, 0s;
        }
        .uc-header_sub-nav .t966__content, 
        .uc-header_sub-nav .t966__tooltip-menu:after {
            transition: transform var(--open-duration) ease;
            transform: scale(0.98);
            transform-origin: top 15%;
        }
        .uc-header_sub-nav .t966__tooltip-menu_show .t966__content, 
        .uc-header_sub-nav .t966__tooltip-menu_show:after {
            transform: scale(1);
        }


        /* Header sub-nav inner container */
        .uc-header_sub-nav .t966__content {
            padding: 12px 8px;
            background: none !important;
            position: relative;
            z-index: 9;
        }

        /* Header sub-nav border */
        .uc-header_sub-nav .t966__content:after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            position: fixed;
            left: 0;
            top: 0;
            border: 1px solid var(--ui-stroke);
            box-sizing: border-box;
            pointer-events: none;
        }

        /* Header sub-nav items container (list) */
        .uc-header_sub-nav .t966__menu-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }


        /* Header sub-nav item */
        .uc-header_sub-nav .t966__menu-list-row {
            height: 52px;
            border-radius: 10px;
            position: relative;
        }

        /* Header sub-nav item background */
        .uc-header_sub-nav .t966__menu-list-row:before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            position: absolute;
            left: 0;
            top: 0;
            transition: opacity var(--item-hover-duration) ease;
            z-index: -1;
            pointer-events: none;
            background: rgba(255, 255, 255, 0.06);
            opacity: 0;
        }
        .uc-header_sub-nav .t966__menu-list-row:hover:before {
            opacity: 1;
        }

        /* Hader sub-nav item link */
        .uc-header_sub-nav .t966__menu-link {height: 100%;}

        /* Header sub-nav item inner container */
        .uc-header_sub-nav .t966__menu-item {
            align-items: center;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 60px 0 14px;
        }


        /* Header sub-nav item icon wrapper */
        .t966__menu-item-icon-wrapper {position: relative;}
    }

    
    /* INDEX --------------------------------------------------------------- */
    @media screen {

    /* HERO */
        /* Hero scroll marker */
        .uc-index_scroller_bg .tn-atom {
            border: 1px solid var(--ui-stroke) !important;
            background: var(--ui-bg-a20);
            backdrop-filter: blur(var(--bg-blur));
            box-shadow: var(--shadow-inner-ui);
            transition: border-radius 0.2s ease !important;
        }
        body.scrolled .uc-index_scroller_bg .tn-atom {
            border-radius: 24px !important
        }

        /* Hero scroll marker arrow */
        .uc-index_scroller_arrow {
            transition: opacity 0.3s ease 0.3s !important;
        }
        body.scrolled .uc-index_scroller_arrow {
            opacity: 0;
            transition: opacity 0.3s ease 0s !important;
        }

        /* Hero scroll marker icon */
        .uc-index_scroller_icon .tn-atom {
            transition: opacity 0.3s ease 0s !important;
        }
        body.scrolled .uc-index_scroller_icon .tn-atom {
            opacity: 1 !important;
            transition: opacity 0.3s ease 0.3s !important;
        }


    /* CATALOG */
    .uc-index_catalog {
        --card-hover-duration: 0.2s;
        --link-hover-duration: 0.1s;
    }

        /* Catalog background */
        .uc-index_catalog_bg-1 {left: 0 !important;}


        /* Catalog block container */
        .uc-index_catalog .t396__artboard {
            align-items: stretch !important;
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
        }

        /* Game card */
        .game-card {
            min-width: 270px;
            z-index: 9 !important;
        }

        /* Game card background */
        .game-card:after {
            content: "";
            display: block;
            width: calc(100% + 2 * 24px);
            height: calc(100% + 14px + 32px);
            border-radius: 20px;
            border: 1px solid var(--ui-stroke);
            position: absolute;
            left: -24px;
            top: -14px;
            box-sizing: border-box;
            opacity: 0;
            background: var(--ui-bg-a20);
            backdrop-filter: blur(var(--bg-blur));
            transition: opacity, transform;
            transition-duration: var(--card-hover-duration);
            transition-timing-function: ease;
            transform: translateY(8px) scale(0.98);
            transform-origin: top center;
        }
        
        /* Game card background (on card hover) */
        .game-card:hover:after {
            opacity: 1;
            transform: translateY(0) scale(1);
        }


        /* Game card cover wrapper */
        .game-card_cover-wrapper {
            width: calc(100% + 2 * 23px) !important;
        }
        
        /* Game card cover wrapper (inner) */
        .game-card_cover-wrapper .tn-molecule {
            transition: opacity, transform !important;
            transition-duration: var(--card-hover-duration) !important;
            transition-timing-function: ease !important;
            transform: translateY(8px) scale(0.98);
            transform-origin: bottom center;
        }

        /* Game card cover wrapper (on card hover) */
        .game-card:hover .game-card_cover-wrapper .tn-molecule {
            opacity: 1 !important;
            transform: translateY(0) scale(1);
        }


        /* Game card cover overlay */
        .game-card_cover-wrapper .tn-molecule:after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: inherit;
            z-index: 9;
            box-shadow: var(--shadow-inner-card) !important;
            pointer-events: none;
            background: linear-gradient(195deg, 
                                        rgba(0, 0, 0, 0.1) 0%, 
                                        rgba(0, 0, 0, 0.85) 100%);
        }


        /* Game card cover image */
        .game-card_cover {
            transition: transform var(--card-hover-duration) ease;
        }

        /* Game card cover image (on card hover) */
        .game-card:hover .game-card_cover {
            transform: scale(1.05);
        }


        /* Game card cover logo */
        .game-card_logo {
            transition: transform var(--card-hover-duration) ease;
            transform-origin: top left;
        }
        
        /* Game card cover logo (on card hover) */
        .game-card:hover .game-card_logo {
            transform: scale(0.96);
        }        


        /* Game card title */
        .game-card_title h3 {
            background: var(--orc-green-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            transition: color var(--card-hover-duration) ease !important;
        }
        .game-card:hover .game-card_title h3 {color: transparent !important;}


        /* Game card link */
        .game-card_link a {
            opacity: 0.8;
            transition-property: opacity, color;
            transition-duration: var(--link-hover-duration);
            transition-timing-function: ease;
            position: relative;
        }
        .game-card_link a:hover {
            color: var(--orc-green-400) !important;
            opacity: 1;
        }

        /* Game card link underline */
        .game-card_link a:before {
            content: "";
            display: block;
            width: 100%;
            height: 1px;
            position: absolute;
            left: 0;
            bottom: -1px;
            border-radius: 1px;
            background-color: var(--orc-green-400);
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform var(--link-hover-duration) ease;
        }
        .game-card_link a:hover:before {transform: scaleX(1);}


        /* Game card link dot (first in row) */
        .game-card_dot-lead {display: none !important;}

        /* Game card link dot (last) */
        .game-card_dot-last {opacity: 0;}
        
        
        /* Request game card */
        .request-game-card {
            height: auto !important;
            min-height: 216px;
            z-index: 99 !important;
        }
        
        /* Request game card background and stroke */
        .request-game-card:before,
        .request-game-card:after {
            content: "";
            display: block;
            width: calc(100% + 2 * 24px);
            height: calc(100% + 14px + 32px);
            position: absolute;
            top: -14px;
            left: -24px;
            border-radius: 20px;
            box-sizing: border-box;
        }
        .request-game-card:before {
            background: var(--ui-bg-a20);
            backdrop-filter: blur(var(--bg-blur));
            box-shadow: var(--shadow-inner-ui);
/*            background-image: url(https://static.tildacdn.com/tild3562-3266-4635-a564-313735656135/request-game-card_bg.png);*/
            background-size: 758px auto;
            background-position: right -360px bottom -154px;
            background-repeat: no-repeat;
        }
        .request-game-card:after {
            border: 1px solid var(--ui-stroke);
            pointer-events: none;
        }
        
        /* Request game card hat graphic */
        .request-game-card_hat {
            left: auto !important;
            right: -113px;
            filter: drop-shadow(-8px 8px 24px var(--ui-bg));
        }
        
        
    /* HOW IT WORKS */
        /* How it works block container */
        .uc-index_HIW .t396__artboard {flex-wrap: wrap !important;}
        
        
        /* How it works card */
        .uc-index_HIW_card {
            flex-basis: 20%;
            flex-grow: 1;
            align-self: stretch !important;
        }
        
        /* How it works card background */
        .uc-index_HIW_card > .tn-molecule {
            padding-top: 32px !important;
            background: var(--ui-bg-a20);
            border-radius: 20px;
            box-shadow: var(--shadow-inner-ui);
            backdrop-filter: blur(var(--bg-blur));
        }
        
        /* How it works card (last) background */
        .uc-index_HIW_card[data-card="last"] > .tn-molecule {
            background: var(--ui-bg-a80);
            box-shadow: var(--shadow-inner-btn); 
        }
        
        /* How it works card border */
        .uc-index_HIW_card > .tn-molecule:before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: inherit;
            pointer-events: none;
            box-sizing: border-box;
            border: 1px solid var(--ui-stroke);
        }
        
        /* How it works card (last) border */
        .uc-index_HIW_card[data-card="last"] > .tn-molecule:before {
            border: 1px solid var(--orc-green-500);
        }
        @supports (mask-composite: exclude) {
            .uc-index_HIW_card[data-card="last"] > .tn-molecule:before {
                border: 1px solid transparent;
                background-image: var(--orc-green-gradient);
                background-clip: border-box;
                -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                              linear-gradient(#fff 0 0);
                -webkit-mask-composite: destination-out;
                mask-composite: exclude;
            }
            .uc-index_HIW_card[data-card="last"] > .tn-molecule:after {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: inherit;
                border-top: 1px solid var(--orc-green-300);
                border-bottom: 1px solid var(--orc-green-500);
                box-sizing: border-box;
                pointer-events: none;
            }
        }
        
        
        /* How it works card cutouts */
        @supports (mask-mode: luminance) {
            .uc-index_HIW_card > .tn-molecule {
                -webkit-mask-image: url(https://static.tildacdn.com/tild3038-3038-4561-b035-383066313838/mask-left-right.svg);
                mask-mode: luminance;
            }
            .uc-index_HIW_card[data-card="first"] > .tn-molecule {
                -webkit-mask-image: url(https://static.tildacdn.com/tild3033-3661-4834-b139-663830323436/mask-right.svg);
            }            
            .uc-index_HIW_card[data-card="last"] > .tn-molecule {
                -webkit-mask-image: url(https://static.tildacdn.com/tild6666-6138-4338-a235-303131613036/mask-left.svg);
            }
            
            /* Cutout border */
            .uc-index_HIW_card_cutout-borders {
                width: 100% !important;
                height: 100% !important;
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
            }
            
            .uc-index_HIW_card:not([data-card="first"]) 
            .uc-index_HIW_card_cutout-borders:after,
            .uc-index_HIW_card:not([data-card="last"]) 
            .uc-index_HIW_card_cutout-borders:before {
                content: "";
                display: block;
                width: 42px;
                height: 42px;
                border-radius: 21px;
                box-sizing: border-box;
                border: 1px solid var(--ui-stroke);
                position: absolute;
                top: calc(50% - 21px);
            }

            /* Cutout left border*/
            .uc-index_HIW_card:not([data-card="first"]) 
            .uc-index_HIW_card_cutout-borders:after {
                left: -25px;
                clip-path: inset(0 0 0 26px); 
            }        

            /* Cutout left border (last) */
            .uc-index_HIW_card[data-card="last"] 
            .uc-index_HIW_card_cutout-borders:after {
                 border-color: var(--orc-green-400) !important;
            }

            /* Cutout right border */
            .uc-index_HIW_card:not([data-card="last"]) 
            .uc-index_HIW_card_cutout-borders:before {
                right: -25px;
                clip-path: inset(0 26px 0 0);
            }
            
            /* Cutout arrows */
            .uc-index_HIW_card:not([data-card="last"]):before {
                content: "";
                display: block;
                width: 40px;
                height: 40px;
                position: absolute;
                top: calc(50% - 20px);
                right: -24px;
                border-radius: 20px;
                z-index: 1;
                background-image: url(https://static.tildacdn.com/tild3233-3832-4266-a131-633262623266/arrow-dash-r18x14px_.svg);
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 18px 14px;
            }
        }

         
    }
}