:root {
    --footer-size1: calc(0.175 * var(--short-side));

    @media screen and (orientation: landscape) and (max-width: 1025px), (min-width: 1025px) {
        --footer-size1: calc(0.2 * var(--short-side) + env(safe-area-inset-left)) !important;
    }

    /* Colors */
    --color-primary: #0f0d2e;
    --color-error: #ff5454;
    --color-bedrock: black;
    --color-text: white;

    --inner-background: #0f0d2e;
    --modal-page-content-background: #232048;
    --modal-inner-background: #0f0d2e;
    --modal-popup-overlay-background: #19164b;

    /* Typography */
    --typography-accent-font: "Montserrat black", sans-serif;
    --typography-font-family: "Montserrat", sans-serif;
    --font-weight-medium: 600;

    --border-radius: calc(var(--space) * 0.8);

    --label-text-color: rgba(255, 255, 255, 0.5);
    --input-bg-color: rgba(255, 255, 255, 0.1);
    --input-backdrop-filter: blur(10px);
    --input-text-color: #ffffff;
    --input-border-radius: var(--border-radius);
    --placeholder-color: rgba(255, 255, 255, 0.3);

    --checkbox-border-radius: var(--border-radius);

    --color-heading: linear-gradient(white 27.9%, white 95.46%);

    --auth-button-color-text: #0f0d2e;
    --auth-button-justify-content: center;

    --button-text-font-weight: 900;
    --button-primary-border: none;
    --button-secondary-border: none;
    --button-border-radius: var(--border-radius);
    --color-primary-dark: linear-gradient(to top, #0f0b3d 0%, #2c2b69 100%);
    --color-primary-medium: none;

    --color-primary-button-bg: none;
    --color-primary-button-border: linear-gradient(to bottom, #72fb01 0%, #36c825 100%);
    --color-primary-button-shadow: none;
    --color-primary-button-glow: none;
    --color-primary-button-text: #040503;
    --decoration-border-radius: none;
    --decoration-shadow: none;
    --decoration-bg-color: none;

    --pill-button-font-weight: 600;
    --pill-button-color: #faf5f5;
    --pill-button-border-radius: var(--space);
    --pill-button-background-color: #ffffff2e;
    --pill-active-item-glow-color: #f5b71c;
    --pill-active-item-background: none;
    --pill-active-item-decoration-color: #f5b71c;

    --color-secondary-button-bg: none;
    --color-secondary-button-border: linear-gradient(to bottom, #fbd901 0%, #fda302 100%);
    --color-secondary-button-shadow: none;
    --color-secondary-button-glow: none;
    --color-secondary-button-text: #0f0d2e;

    --border-radius-icon-button: calc(var(--border-radius) * 1.5);
    --color-primary-icon-button-bg: linear-gradient(to bottom, #72fb01 0%, #36c825 100%);
    --color-primary-icon-button-text: #040503;

    --color-secondary-icon-button-bg: #232048;
    --color-secondary-icon-button-text: #ffffff;
    --color-secondary-icon-button-shadow: none;
    --border-secondary-icon-button: calc(var(--space) * 0.13) solid rgba(255, 255, 255, 0.1);

    --color-tertiary-icon-button-bg: #ffffff;
    --color-tertiary-icon-button-text: #232048;
    --button-shadow: drop-shadow(0px 4px 4px #00000040);

    --decoration-object-1-width: calc(0.546 * var(--short-side));
    --decoration-object-1-landscape-position-x: calc(-0.15 * var(--decoration-object-1-width));
    --decoration-object-1-landscape-position-y: calc(-0.15 * var(--decoration-object-1-width));
    --decoration-object-1-portrait-position-x: calc(-1.1 * var(--decoration-object-1-width));
    --decoration-object-1-portrait-position-y: calc(-1.1 * var(--decoration-object-1-width));
    --decoration-object-1-transform: rotate(140deg);

    --decoration-object-2-landscape-width: calc(0.546 * var(--short-side));
    --decoration-object-2-portrait-width: calc(0.943 * var(--short-side));
    --decoration-object-2-landscape-position-x: calc(
        var(--long-side) -
        (0.85 * var(--decoration-object-2-landscape-width))
    );
    --decoration-object-2-landscape-position-y: calc(
        var(--short-side) -
        (0.7 * var(--decoration-object-2-landscape-width))
    );
    --decoration-object-2-portrait-position-x: calc(
        0.5 *
        var(--short-side) -
        0.5 *
        var(--decoration-object-2-portrait-width)
    );
    --decoration-object-2-portrait-position-y: calc(var(--long-side) - 0.6 * var(--decoration-object-2-portrait-width));

    --decoration-object-2-middle-width: 10px;
    --decoration-object-2-middle-position-x: -20px;
    --decoration-object-2-middle-position-y: -20px;
    --decoration-object-2-transform: rotate(-30deg);

    --display-background-main-layout: block;
    --display-decoration-main-layout: none;

    --avatar-border-gradient: none;
    --avatar-shadow: none;
    --header-border-gradient: linear-gradient(90deg, #1b1747, #1b1747);
    --header-shadow: none;
    --progress-bar-inner-gradient: linear-gradient(to right, #7f46d9, #9162d9);
    --progress-bar-border-gradient: linear-gradient(to right, #7f46d9, #9162d9);
    --logo-max-width: clamp(112px, 20vw, 240px);

    --footer-menu-active-item-decoration-color: transparent;
    --footer-menu-active-item-glow-color: transparent;
    --footer-menu-item-background: transparent;
    --footer-menu-active-item-bg: transparent;
    --footer-menu-item-border-radius: 0;
    --footer-menu-shadow: none;

    --menu-background: rgba(255, 255, 255, 0.1);
    --menu-background-active: var(--color-primary-medium);
    --menu-color: rgba(255, 255, 255, 0.9);

    --decoration-visibility: visible;
    --main-background-visibility: visible;

    --heading-gradient: #fbd901;
    --modal-bg: rgba(255, 255, 255, 0.05);
    --modal-backdrop-bg: #04050366;
    --modal-backgrop-filter: blur(10px);
    --modal-radius: calc(var(--space) * 2);

    --system-modal-message-border-color: #232048;
    --system-modal-message-error-title-color: linear-gradient(to top, #e82622, #e82622);
    --system-modal-message-success-title-color: linear-gradient(to top, #44fb30, #44fb30);
    --system-modal-content-border-radius: var(--space);

    --card-background: #0f0d2e;
    --card-glow-color: #35236c;
    --card-label-text-color: #ffffff;
    --card-label-background: rgba(255, 255, 255, 0.1);

    --mission-current-value-text-color: rgba(255, 255, 255, 0.5);
    --mission-target-value-text-color: #fbb730;
    --mission-target-value-background: linear-gradient(
        79.94deg,
        rgba(251, 183, 48, 0.3) 27.9%,
        rgba(255, 209, 116, 0.3) 95.46%
    );
    --mission-target-border-color: #fbb730;
    --accent-color: #ffffff;
    --leaderboard-accent-color: #ffffff;
    --leaderboard-podium-top-background: #242359;
    --leaderboard-podium-gradient: linear-gradient(180deg, #2b2a67 0%, #2b2a6700 100%);
    --leaderboard-badge-color: #ffffff;
    --leaderboard-item-bg: #232048;
    --leaderboard-item-radius: var(--border-radius);
    --leaderboard-frequency-one-time-bg: #c2457f;
    --leaderboard-frequency-days-bg: #63c61d;
    --leaderboard-frequency-weeks-bg: #a751dd;
    --leaderboard-frequency-months-bg: #e67c4c;

    --hot--package-bg: #c2457f;
    --popular--package-bg: #63c61d;

    --history-table-text-color: rgba(255, 255, 255, 0.85);

    --level-up-text-shadow: -1px -1px #ffe042, 1px 1px #ffe042;
    --level-up-text-color: #e27d07;
    --level-meter-color: linear-gradient(to left, #fff2d7, #969696);

    --bonus-code-entry-background: linear-gradient(to bottom, #fbd901, #fda302);
    --bonus-code-entry-glow-color: transparent;
    --bonus-code-entry-glow-decoration-color: transparent;

    --loyalty-button-background: #2e7e3d;
    --loyalty-button-glow-color: #ffe600;

    --main-background: #0f0d2e;
    --inbox-message-header-background: #045c30;
    --footer-background: var(--main-background);
    --favorite-fill-color: #ffffff;
}

main {
    grid-template-columns: var(--footer-size1) 1fr !important;
    grid-template-rows: var(--header-height) var(--navigation-height) 1fr var(--footer-size1) !important;
}

h1 {
    font-weight: 600;
}

div[data-type="decoration"] {
    z-index: 0;
    &:before {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: url("/c/assets/bananabets/common/main-object.png") no-repeat center;
        background-size: cover;
    }
}

[data-type="game-thumb-crop"] [data-type="decoration"] {
    display: none;
}

div[data-type="button-glow"] {
    position: absolute;
}

div[data-type="auth-form-diveder"] {
    background: #ffffff1a;
}

button[data-type="gift-button"] img {
    transform: none;
    width: 50%;
    height: 50%;
}

footer [data-type="footer-menu-item"] {
    display: block !important;
    height: 100%;
    width: 100%;

    span[data-type="footer-menu-item-label"] {
        position: absolute;
        top: calc(var(--space) * 4.8);
        left: 0;
        font-size: calc(var(--font-size) * 0.6);
        color: #0f0d2e;
        width: 100%;
        text-align: center;
    }

    &:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, #fbd901, #fda302);
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
        border-radius: calc(var(--space) * 2);

        @media screen and (orientation: landscape) and (max-width: 1025px), (min-width: 1025px) {
            width: 100%;
            height: auto;
            aspect-ratio: 1.25;
            border-radius: 25%;

            @supports (corner-shape: squircle) {
                corner-shape: squircle;
                border-radius: 25% / 35%;
            }
        }
    }
}

footer[data-type="footer-menu"] img[data-type="footer-menu-item-img"] {
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--control) * 0.85);
    top: calc(var(--space) * 0.75);
    position: absolute;
    min-width: auto;

    &[src*="promo.png"] {
        top: calc(var(--space) * 0.1);
        left: 55%;
        width: calc(var(--control) * 1.2);
    }
}

nav[data-type="fortune-wheel-menu-item"] {
    flex-basis: 20%;
    aspect-ratio: auto;
    height: 100%;

    @media screen and (orientation: landscape) and (max-width: 1025px), (min-width: 1025px) {
        flex-basis: 30%;
    }

    [data-type="footer-menu-item"] > span[data-type="footer-menu-item-label"] {
        display: inline;
    }
}

footer div[data-type="wheel-timer"] {
    top: 25%;

    @media screen and (orientation: landscape) and (max-width: 1025px), (min-width: 1025px) {
        top: 15%;
    }
}

footer div[data-type="wheel-timer"] span {
    font-size: calc(var(--font-size) * 0.75);
    color: var(--color-primary);
}

div[data-type="card"],
div[data-type="payment-package"] {
    border-radius: 6%;
    overflow: hidden;
    --border: none;

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 12%;
    }
}

div[data-type="games-box"] {
    padding-bottom: 0;

    @media screen and (min-width: 1025px) {
        padding-bottom: var(--space);
    }

    @media screen and (orientation: landscape) and (max-width: 1025px) {
        padding-bottom: calc(var(--space) * 2) !important;
    }
}

div[data-type="games-layout"] {
    grid-template-columns: repeat(2, calc(50% - var(--space) / 2));
    grid-template-rows: unset;
    gap: calc(var(--space) * 1.65);

    @media screen and (orientation: landscape) and (max-width: 1025px), (min-width: 1025px) {
        grid-template-rows: repeat(1, 100%);
        grid-template-columns: unset;
    }

    @media screen and (min-width: 1025px) {
        gap: calc(var(--space) * 1);
    }

    div[data-type="game-item"] {
        aspect-ratio: 1 / 1.225;
        grid-row: span 1 !important;
        grid-column: span 1 !important;
    }
}

div[data-type="game-thumb-large"],
div[data-type="game-thumb-default"] {
    border-radius: 8%;
    overflow: hidden;

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 16%;
    }
}

div[data-type="game-thumb-large"] > img,
div[data-type="game-thumb-default"] > img {
    opacity: 0.55;
    filter: blur(10px);
}

div[data-type="game-gradient"] {
    opacity: 0.5 !important;
}

div[data-type="game-thumb-crop"] {
    inset: 0 0 calc(var(--control) * 1.1) 0 !important;
}

img[data-type="level-up-layer-2"],
img[data-type="level-up-layer-3"] {
    display: none;
}

p[data-type="level-up-level"] {
    top: calc(var(--short-side) * 0.425);
}

div[data-type="level-up-text"] {
    top: 0;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
}

img[data-type="light_layer_1"],
img[data-type="light_layer_4"] {
    display: none;
}

img[data-type="light_layer_2"],
img[data-type="light_layer_3"] {
    width: 100%;
}

div[data-type="level-up-amount"] {
    top: calc(var(--short-side) * 0.9) !important;
}

div[data-type="lb_rays"] {
    top: 0 !important;
}

img[data-type="lb_layer_1"],
img[data-type="lb_layer_2"] {
    display: none;
}

img[data-type="lb_layer_3"] {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}

div[data-type="lb_place_1"],
div[data-type="lb_place_2"],
div[data-type="lb_place_3"] {
    display: none;
}

div[data-type^="lb_place_"] {
    top: calc(var(--short-side) * 0.445) !important;
    left: calc(var(--short-side) * 0.49) !important;
}

div[data-type="lb_place_title"] {
    top: calc(var(--short-side) * 0.63) !important;
    left: unset !important;
}

p[data-type="daily-login-amount"] {
    z-index: 3;
    top: calc(var(--short-side) * 0.225) !important;
}

img[data-type="daily-login-opened"] {
    z-index: 2;
}

img[data-type="daily-login-shine"] {
    z-index: 1;
}

footer[data-type="daily-login-footer"] {
    top: calc(var(--short-side) * 0.635);
}

button[data-test="daily-login-button"] {
    position: absolute !important;
    bottom: unset !important;
    top: calc(var(--short-side) * 0.85) !important;
    transform: none !important;
}