:root {
    --promo-code-fs-coeff: 1;
}

.board {
    width: var(--var-board-w);
    height: calc(var(--var-board-w) * 688 / 1185);
    padding-top: calc(var(--var-board-w) * var(--var-board-pt-coeff));
    background: url("../../img/board.svg") center/contain no-repeat;
    filter: drop-shadow(0 0 92px rgba(2, 196, 255, 1));
    animation: board-pulse 2.8s ease-in-out infinite;
    will-change: filter;
}

@keyframes board-pulse {
    0%,
    100% {
        filter: drop-shadow(0 0 72px rgba(2, 196, 255, 0.7));
    }
    50% {
        filter: drop-shadow(0 0 110px rgba(2, 196, 255, 1));
    }
}

.promo_title {
    text-align: center;
    color: #02C4FF;
    font-size: calc(var(--var-board-w) * var(--promo-title-fs-coeff));
    margin-bottom: calc(var(--var-board-w) * var(--promo-title-mb-coeff));
    line-height: 1.18;
    font-weight: 700;
    text-transform: uppercase;
}

.promo-subtitle {
    text-align: center;
    font-size: calc(var(--var-board-w) * var(--promo-subtitle-fs-coeff));
    margin-bottom: calc(var(--var-board-w) * var(--promo-subtitle-mb-coeff));
    color: #fff;
    line-height: .8;
    font-weight: 700;
}

.highlight {
    color: #fff;
}

.promo_btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: calc(var(--var-board-w) * var(--promo-btn-w-coeff));
    height: calc(var(--var-board-w) * var(--promo-btn-w-coeff) * 177 / 638);
    padding-top: calc(var(--var-board-w) * var(--promo-btn-pt-coeff));
    background: image-set(
            url("../../img/btn/promo_btn@1x.webp") 1x,
            url("../../img/btn/promo_btn@2x.webp") 2x
    ) center/cover no-repeat;
}

.promo_btn > span {
    display: inline-block;
    background: linear-gradient(to bottom, #011C5E 0%, #023AC4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: calc(var(--var-board-w) * var(--promo-code-fs-coeff));
    font-weight: 900;
    text-transform: uppercase;
}

.copy-btn {
    width: calc(var(--var-board-w) * var(--copy-btn-width-coef));
    aspect-ratio: 1;
    position: absolute;
    left: 102%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #fff;
    cursor: pointer;
    background: image-set(
            url("../../img/copy_icon@1x.webp") 1x,
            url("../../img/copy_icon@2x.webp") 2x
    ) center/cover no-repeat;
    transition: transform 0.2s ease;
}

.copy-btn:active {
    transform: translateY(-50%) scale(0.96);
}

@media (orientation: portrait) and (min-width: 0px) {
    :root {
        --var-board-w: clamp(100px, min(89vw, 58svh), 800px);
        --var-board-pt-coeff: 0.12;
        --promo-title-fs-coeff: 0.047;
        --promo-title-mb-coeff: 0.0126;
        --promo-subtitle-fs-coeff: 0.042;
        --promo-subtitle-mb-coeff: 0.0202;
        --promo-btn-w-coeff: 0.5388;
        --promo-btn-pt-coeff: 0.012;
        --copy-btn-width-coef: 0.0652;
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    :root {
        --var-board-w: clamp(100px, min(50vw, 98svh), 1300px);
        --var-board-pt-coeff: 0.12;
        --promo-title-fs-coeff: 0.047;
        --promo-title-mb-coeff: 0.0126;
        --promo-subtitle-fs-coeff: 0.042;
        --promo-subtitle-mb-coeff: 0.0202;
        --promo-btn-w-coeff: 0.5388;
        --promo-btn-pt-coeff: 0.012;
        --copy-btn-width-coef: 0.0652;
    }
}

@media (prefers-reduced-motion: reduce) {
    .board {
        animation: none;
        filter: drop-shadow(0 0 92px rgba(2, 196, 255, 1));
    }
}