*, :after, :before {
    box-sizing: inherit;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

html {
    box-sizing: border-box
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0
}

p {
    margin: 0
}

picture {
    display: block
}

img {
    display: block;
    border: none
}

img, svg {
    vertical-align: middle
}

a {
    background-color: transparent;
    color: inherit;
    text-decoration: none
}

:focus {
    outline: none
}

:root {
    --cards-w: 1;
}

button {
    all: unset
}

body {
    font-style: normal;
    display: flex;
    flex-direction: column;
    height: 100svh;
    position: relative;
    background:
        radial-gradient(62% 48% at 50% 50%, #0043EE 0%, #0043EE 28%, #00143C 100%),
        #00143C;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.glow {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    aspect-ratio: 960 / 640;
    background: url("../../img/glow-v2.png") center/cover no-repeat;
    -webkit-filter: blur(7px);
    filter: blur(7px);
    width: 100%;
}

.mask {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

.money {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
    inset: 0;
    pointer-events: none;
}

.content__data {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: 100%;
}

.player-wrapper {
    position:  relative;
    z-index: 2;
    width: var(--player-w);
    height: 100%;
    overflow: visible;
}

.player__image {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.element {
    position: absolute;
    z-index: -1;
    inset: -12%;
    pointer-events: none;
}

.logo {
    grid-column: 1 / -1;
    justify-self: center;
    position: relative;
    z-index: 6;
    aspect-ratio: 327 / 50;
    width: var(--logo-w);
    height: auto;
    display: block;
}

.title {
    position: relative;
    z-index: 20;
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: italic;
    line-height: 1.2;
    -webkit-filter: drop-shadow(-3px 4px 40px rgba(50, 170, 255, 0.48));
    filter: drop-shadow(-3px 4px 40px rgba(50, 170, 255, 0.48));
    text-transform: uppercase;
    font-size: calc(var(--cards-w) * var(--title-fs-coeff));
    display: flex;
    flex-direction: column;
    color: #fff;
    text-align: start;
}

.title__2 {
    display: inline-block;
    background: linear-gradient(to right, #0095FA 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.title__1,
.title__2 {
    -webkit-filter: drop-shadow(0 4px 15px rgba(6, 13, 49, 0.8));
    filter: drop-shadow(0 4px 15px rgba(6, 13, 49, 0.8));
}

.cards {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: calc(var(--cards-w) * var(--cards-gap-coeff));
    width: var(--cards-w);
}

.card-loader {
    display: block;
    width: calc(var(--cards-w) * 0.1425);
    aspect-ratio: 1;
    border-radius: 50%;
    border: calc(var(--cards-w) * 0.00975) solid rgba(255, 255, 255, 0.22);
    border-top-color: #ffffff;
}

.card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: linear-gradient(to right, #FFFFFF 0%, #CAE4FF 100%);
    backdrop-filter: blur(10px);
    box-shadow: inset -2px 2px 2px 0 #FFFEFE;
    border-radius: calc(var(--cards-w) * var(--card-br-coeff));
    padding:
            calc(var(--cards-w) * var(--card-pt-coeff))
            calc(var(--cards-w) * var(--card-pr-coeff))
            calc(var(--cards-w) * var(--card-pb-coeff))
            calc(var(--cards-w) * var(--card-pl-coeff));
}

.card--skeleton {
    pointer-events: none;
}

.card--placeholder {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    pointer-events: none;
    user-select: none;
}

.card--placeholder .card__header,
.card--placeholder .card__main {
    visibility: hidden;
}

.card--placeholder-loading {
    position: relative;
}

.card-loader-wrap {
    display: none;
}

.card--placeholder-loading .card-loader-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: visible;
}

.card--ghost {
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

.skeleton-block {
    display: block;
    border-radius: 999px;
    background: linear-gradient(
            100deg,
            rgba(145, 181, 225, 0.46) 8%,
            rgba(255, 255, 255, 0.95) 38%,
            rgba(145, 181, 225, 0.46) 62%
    );
    background-size: 220% 100%;
}

.card--skeleton .skeleton-icon {
    width: calc(var(--cards-w) * var(--card-header-fs-coeff));
    aspect-ratio: 1;
    border-radius: 50%;
}

.card--skeleton .skeleton-date {
    width: calc(var(--cards-w) * 0.27);
    height: calc(var(--cards-w) * var(--card-header-fs-coeff) * 0.76);
}

.card--skeleton .skeleton-team-icon {
    width: calc(var(--cards-w) * var(--card-team-icon-w-coeff));
    aspect-ratio: 1;
    border-radius: 50%;
}

.card--skeleton .skeleton-team-title {
    width: calc(var(--cards-w) * 0.46);
    height: calc(var(--cards-w) * var(--card-team-title-fs-coeff));
}

.card--skeleton .skeleton-btn {
    width: calc(var(--cards-w) * var(--card-btn-w-coeff));
    aspect-ratio: 168 / 50;
    border-radius: 12px;
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #5F71AA;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    line-height: 1.2;
    font-size: calc(var(--cards-w) * var(--card-header-fs-coeff));
}

.card__header-calendar,
.card__header-clock {
    aspect-ratio: 1;
    width: calc(var(--cards-w) * var(--card-header-fs-coeff));
}

.card__main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.card__main-list {
    display: flex;
    flex-direction: column;
}

.card__main-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card__main-list-item-logo {
    aspect-ratio: 1;
    width: calc(var(--cards-w) * var(--card-team-icon-w-coeff));
}

.card__main-list-item-title {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: #051B5E;
    text-transform: uppercase;
    line-height: 1.2;
    font-size: calc(var(--cards-w) * var(--card-team-title-fs-coeff));
}

.card__main-btn {
    aspect-ratio: 168 / 50;
    width: calc(var(--cards-w) * var(--card-btn-w-coeff));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--cards-w) * var(--card-btn-fs-coeff));
    border-radius: 12px;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: #FFF;
    line-height: 1.2;
    text-transform: uppercase;
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card__main-btn::before,
.card__main-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    transition: opacity 0.3s ease;
}

.card__main-btn::before {
    opacity: 1;
    background: linear-gradient(to right, #14A0FF 0%, #065BDC 100%);
}

.card__main-btn::after {
    opacity: 0;
    background: linear-gradient(to right, #88CFFF 0%, #0098FF 54%, #3585FF 99%);
}

.card__main-btn:active {
    transform: scale(0.98) translateY(1px);
}

@media (hover: hover) and (pointer: fine) {
    .card__main-btn:hover::before {
        opacity: 0;
    }

    .card__main-btn:hover::after {
        opacity: 1;
    }
}

@media (orientation: portrait) and (min-width: 0px) {
    :root {
        --logo-w: clamp(100px, min(43vw, 25svh), 327px);
        --cards-w: clamp(100px, min(90vw, 51svh), 600px);
        --cards-gap-coeff: 0.02647;
        --card-br-coeff: 0.03529;
        --title-fs-coeff: 0.09705;
        --card-pt-coeff: 0.04411;
        --card-pr-coeff: 0.03529;
        --card-pb-coeff: 0.03529;
        --card-pl-coeff: 0.04411;
        --card-header-fs-coeff: 0.033823;
        --card-header-icon-w-coeff: 0.0279411;
        --card-team-icon-w-coeff: 0.054411;
        --card-team-title-fs-coeff: 0.03235;
        --card-btn-w-coeff: 0.247;
        --card-btn-fs-coeff: 0.029411;
        --player-w: 100%;
    }

    .main {
        padding-top: clamp(12px, min(7.5vw, 4svh), 36px);
    }

    .glow {
        top: 50%;
    }

    .mask {
        height: 25%;
        background: url("../../img/mask/mask_portrait_mobile.webp") center/cover no-repeat;
    }

    .logo {
        width: clamp(100px, min(43vw, 25svh), 327px);
        margin-bottom: clamp(16px, min(5vw, 3svh), 50px);
    }

    .content {
        height: 100%;
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        justify-items: center;
        align-items: center;
        width: 100%;
    }

    .content__data {
        align-items: center;
        gap: clamp(16px, min(5vw, 3svh), 22px);
    }

    .title {
        text-align: center;
    }

    .player-wrapper {
        aspect-ratio: 416 / 662;
        height: 100%;
        top: -7%;
    }

    .player__image {
        top: 0;
        bottom: auto;
        aspect-ratio: 416 / 662;
        background: image-set(
                url("../../img/player/player_portrait_mobile@1x.webp") 1x,
                url("../../img/player/player_portrait_mobile@2x.webp") 2x
        ) center/cover no-repeat;
        height: auto;
    }

    .element {
        background: url("../../img/element/elements_portrait_mobile.webp") center/cover no-repeat;
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 800px) {
    :root {
        --title-fs-coeff: 0.06305;
        --player-w: clamp(100px, min(64vw, 48svh), 650px);
    }

    .mask {
        background: url("../../img/mask/mask_portrait_tablet.webp") center/cover no-repeat;
    }

    .player-wrapper {
        aspect-ratio: 551 / 619;
        width: clamp(100px, min(64vw, 48svh), 650px);
        height: 100%;
        top: 0;
    }

    .player__image {
        top: auto;
        bottom: 0;
        aspect-ratio: 551 / 619;
        background: image-set(
                url("../../img/player/player_landscape_tablet@1x.webp") 1x,
                url("../../img/player/player_landscape_tablet@2x.webp") 2x
        ) center/cover no-repeat;
        height: auto;
    }

    .element {
        background: url("../../img/element/elements_portrait_tablet.webp") center/cover no-repeat;
    }

    .glow {
        transform: translateY(-50%);
    }
}

@media (orientation: portrait) and (min-width: 1280px) and (min-height: 800px) {

}

@media (orientation: portrait) and (min-width: 1640px) and (min-height: 800px) {

}

@media (orientation: landscape) and (min-width: 0px) {
    :root {
        --logo-w: clamp(100px, min(13vw, 25svh), 327px);
        --cards-w: clamp(100px, min(31vw, 60svh), 780px);
        --cards-gap-coeff: 0.02647;
        --card-br-coeff: 0.03529;
        --title-fs-coeff: 0.09705;
        --card-pt-coeff: 0.04411;
        --card-pr-coeff: 0.03529;
        --card-pb-coeff: 0.03529;
        --card-pl-coeff: 0.04411;
        --card-header-fs-coeff: 0.033823;
        --card-header-icon-w-coeff: 0.0279411;
        --card-team-icon-w-coeff: 0.054411;
        --card-team-title-fs-coeff: 0.03235;
        --card-btn-w-coeff: 0.247;
        --card-btn-fs-coeff: 0.029411;
        --player-w: clamp(100px, min(48vw, 90svh), 1180px);
    }

    .main {
        padding-top: clamp(12px, min(1.8vw, 3.7svh), 50px);
    }

    .mask {
        height: 55%;
        background: url("../../img/mask/mask_landscape_mobile.webp") center/cover no-repeat;
    }

    .content {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto 1fr;
        height: 100%;
        justify-content: center;
    }

    .glow {
        bottom: 0;
    }

    .content__data {
        padding-top: clamp(24px, min(4.2vw, 8.3svh), 108px);
        left: 10%;
    }

    .player-wrapper {
        aspect-ratio: 911 / 991;
        right: 5%;
    }

    .player__image {
        aspect-ratio: 911 / 991;
        background: image-set(
                url("../../img/player/player_landscape_mobile@1x.webp") 1x,
                url("../../img/player/player_landscape_mobile@2x.webp") 2x
        ) center/contain no-repeat;
        height: auto;
    }

    .element {
        background: url("../../img/element/elements_landscape_mobile.webp") center/contain no-repeat;
    }
}

@media (orientation: landscape) and (min-width: 1024px) {
    .player__image {
        background: image-set(
                url("../../img/player/player_landscape_tablet@1x.webp") 1x,
                url("../../img/player/player_landscape_tablet@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .element {
        background: url("../../img/element/elements_landscape_tablet.webp") center/contain no-repeat;
    }

    .mask {
        background: url("../../img/mask/mask_landscape_tablet.webp") center/cover no-repeat;
    }
}

@media (orientation: landscape) and (min-width: 1280px) {

}

@media (orientation: landscape) and (min-width: 1440px) {
    .player__image {
        background: image-set(
                url("../../img/player/player_landscape_desktop@1x.webp") 1x,
                url("../../img/player/player_landscape_desktop@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .element {
        background: url("../../img/element/elements_landscape_desktop.webp") center/contain no-repeat;
    }

    .mask {
        background: url("../../img/mask/mask_landscape_desktop.webp") center/cover no-repeat;
    }
}