/* Original artwork and purposeful motion over the compact product layout. */
.cop {
    --cp-nav-duration: 360ms;
    --cp-nav-easing: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1025px) {
    .cop-sidebar {
        transition: width var(--cp-nav-duration) var(--cp-nav-easing),
            padding var(--cp-nav-duration) var(--cp-nav-easing);
    }
    .cop-member .cop-workspace {
        transition: margin-left var(--cp-nav-duration) var(--cp-nav-easing);
    }
    .cop-sidebar > .cop-brand {
        transition: padding var(--cp-nav-duration) var(--cp-nav-easing);
    }
    .cop-sidebar .cop-brand img {
        transition: width var(--cp-nav-duration) var(--cp-nav-easing);
    }
    .cop-sidebar .cop-nav-group {
        transition: margin-bottom var(--cp-nav-duration) var(--cp-nav-easing);
    }
    .cop-nav-group > p {
        max-height: 20px;
        overflow: hidden;
        transition: max-height var(--cp-nav-duration) var(--cp-nav-easing),
            margin-bottom var(--cp-nav-duration) var(--cp-nav-easing),
            opacity 120ms ease, visibility var(--cp-nav-duration);
    }
    .cop-nav-group span,
    .cop-nav-coupon span {
        display: inline-block;
        max-width: 170px;
        overflow: hidden;
        white-space: nowrap;
        transition: max-width var(--cp-nav-duration) var(--cp-nav-easing),
            opacity 120ms ease, visibility var(--cp-nav-duration);
    }
    .cop .cop-sidebar :is(.cop-nav-group > a, .cop-nav-coupon) {
        overflow: hidden;
        white-space: nowrap;
        transition: padding var(--cp-nav-duration) var(--cp-nav-easing),
            gap var(--cp-nav-duration) var(--cp-nav-easing),
            background-color 180ms, color 180ms, border-color 180ms;
    }
    .cop-sidebar :is(.cop-nav-group, .cop-nav-coupon) i {
        flex-shrink: 0;
    }
    .cop-sidebar-bottom {
        max-height: 160px;
        overflow: hidden;
        transition: max-height var(--cp-nav-duration) var(--cp-nav-easing),
            padding-top var(--cp-nav-duration) var(--cp-nav-easing),
            opacity 120ms ease, visibility var(--cp-nav-duration),
            border-color var(--cp-nav-duration);
    }
}
@media (max-width: 1024px) {
    .cop-sidebar {
        transition: transform var(--cp-nav-duration) var(--cp-nav-easing);
    }
    .cop .cop-scrim {
        opacity: 0;
        transition: opacity var(--cp-nav-duration) var(--cp-nav-easing);
    }
    .cop.nav-open .cop-scrim {
        opacity: 1;
    }
}
.cop-user-menu[open] .cop-dropdown,
.cop-dialog[open] {
    animation: cop-menu-enter 180ms ease-out;
}
.cop-chat:not([hidden]) {
    animation: cop-chat-enter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cop-chat.is-closing:not([hidden]) {
    animation: cop-chat-leave 270ms cubic-bezier(0.4, 0, 1, 1) both;
    pointer-events: none;
}
@keyframes cop-menu-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes cop-chat-enter {
    from {
        transform: translateX(calc(100% + 16px));
    }
    to {
        transform: translateX(0);
    }
}
@keyframes cop-chat-leave {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(100% + 16px));
    }
}
@media (min-width: 1280px) {
    .cop-member .cop-content-area {
        margin-right: 0;
        transition: margin-right 270ms cubic-bezier(0.4, 0, 1, 1);
    }
    .cop-member.chat-open:not(.chat-closing) .cop-content-area {
        margin-right: var(--cp-chat);
        transition: margin-right 360ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .cop-member.chat-closing .cop-content-area {
        margin-right: 0;
    }
}
.cop-discovery-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 4px 0 32px;
}
.cop-discovery-tile {
    display: block;
    position: relative;
    isolation: isolate;
    min-width: 0;
    border-bottom: 1px solid #29364c;
    padding-bottom: 16px;
}
.cop-tile-art {
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.cop-tile-art::before {
    content: "";
    position: absolute;
    width: 68%;
    height: 65%;
    border-radius: 50%;
    background: radial-gradient(ellipse, #4f3cad24, transparent 70%);
    z-index: -1;
}
.cop-tile-apps .cop-tile-art::before {
    background: radial-gradient(ellipse, #1a90c322, transparent 70%);
}
.cop-tile-rewards .cop-tile-art::before {
    background: radial-gradient(ellipse, #d8981920, transparent 70%);
}
.cop-tile-art img {
    width: 210px;
    height: 190px;
    object-fit: contain;
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 12px 14px #0003);
}
.cop-tile-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 8px;
}
.cop-tile-caption strong {
    display: block;
    color: var(--cp-text);
    font-weight: 600;
    font-size: 15px;
}
.cop-tile-caption span {
    color: var(--cp-muted);
    display: block;
    font-size: 11px;
    margin-top: 4px;
}
.cop-tile-caption > i {
    color: var(--cp-blue);
    font-size: 12px;
    transition: transform 180ms ease;
}
.cop-discovery-tile:hover .cop-tile-art img,
.cop-discovery-tile:focus-visible .cop-tile-art img {
    transform: translateY(-5px) rotate(-3deg) scale(1.04);
}
.cop-discovery-tile:hover .cop-tile-caption > i {
    transform: translateX(4px);
}
.cop-discovery-tile:hover {
    border-color: #4b78a9;
}
.cop .cop-button {
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}
.cop .cop-button:hover {
    transform: translateY(-2px);
}
.cop .cop-button:active {
    transform: translateY(0) scale(0.98);
}
.cop .cop-button > i {
    transition: transform 180ms ease;
}
.cop .cop-button:hover > i.fa-arrow-right {
    transform: translateX(3px);
}
.cop .cop-icon-button:hover {
    transform: translateY(-1px);
}
.cop .cop-partner-card {
    transition:
        transform 200ms ease,
        border-color 200ms ease,
        background-color 200ms ease;
}
.cop .cop-partner-card:hover {
    transform: translateY(-3px);
    background: #101a27;
}
.cop .cop-reward-card {
    transition:
        background-color 200ms ease,
        border-color 200ms ease;
}
.cop .cop-reward-card:hover {
    background: #101925;
    border-color: #3d587b;
}
.cop-reward-cover img {
    transition: transform 220ms ease;
}
.cop-reward-card:hover .cop-reward-cover img {
    transform: translateY(-3px) rotate(-3deg);
}
.cop .cop-reward-cover {
    width: 74px;
    height: 74px;
    padding: 0;
    overflow: visible;
}
.cop .cop-reward-cover img {
    max-width: 74px;
    max-height: 74px;
    width: 74px;
    height: 74px;
    object-fit: contain;
}
.cop .cop-reward-card {
    grid-template-columns: 74px minmax(0, 1fr);
    column-gap: 16px;
}
.cop-reward-fallback {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 14px;
    position: relative;
    background: #15243b;
}
.cop-reward-fallback > i {
    font-size: 28px;
    color: #b5d4fb;
}
.cop-reward-fallback > span {
    position: absolute;
    inset: auto 4px 4px;
    text-align: center;
    color: #d4e4f8;
    font-size: 8px;
    letter-spacing: 0.04em;
    font-weight: 650;
}
.cop-reward-fallback.cop-brand-steam {
    background: linear-gradient(145deg, #16344c, #0d182b);
}
.cop-reward-fallback.cop-brand-amazon {
    background: linear-gradient(145deg, #43321d, #201c1a);
}
.cop-reward-fallback.cop-brand-amazon > i {
    color: #f1bd6a;
}
.cop-reward-fallback.cop-brand-binance {
    background: linear-gradient(145deg, #3b331b, #201f18);
}
.cop-reward-fallback.cop-brand-binance > i {
    color: #edc947;
}
.cop-auth .cop-main {
    max-width: 1120px;
}
.cop-auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    gap: 55px;
    align-items: center;
    max-width: 980px;
    margin: 0 auto;
}
.cop-auth-layout > .cop-auth-form {
    grid-column: 2;
}
.cop-auth-art {
    position: sticky;
    top: 110px;
    align-self: start;
    margin-top: 42px;
    height: 450px;
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
}
.cop-auth-orbit {
    position: absolute;
    inset: 50px 10px 25px;
    border: 1px solid #29406470;
    border-radius: 50%;
    transform: rotate(-25deg);
}
.cop-auth-orbit::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    background: #66c8f3;
    border-radius: 50%;
    top: 37px;
    left: 37px;
    box-shadow: 0 0 18px #66c8f340;
}
.cop-auth-apps {
    position: absolute;
    width: 90%;
    height: 90%;
    left: -4%;
    top: 2%;
    object-fit: contain;
    z-index: 2;
}
.cop-auth-rewards {
    position: absolute;
    width: 58%;
    height: 58%;
    right: -7%;
    top: -3%;
    object-fit: contain;
    z-index: 3;
}
.cop-auth-play {
    position: absolute;
    width: 49%;
    height: 49%;
    right: -5%;
    bottom: -1%;
    object-fit: contain;
    z-index: 3;
}
.cop-auth-form {
    position: relative;
    border-color: #2d3e56;
    background: #111925;
}
.cop-auth-form::before {
    content: "";
    position: absolute;
    height: 2px;
    top: -1px;
    left: 26px;
    right: 26px;
    background: linear-gradient(
        90deg,
        transparent,
        #5c99e7,
        #45bdd5,
        transparent
    );
}
.cop-auth-form input {
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}
.cop-auth-form input:focus {
    outline: 0;
    border-color: #67a7ef !important;
    box-shadow: 0 0 0 3px #347bc31c !important;
}
.cop-reveal-pending {
    opacity: 0;
    transform: translateY(12px);
}
.cop-reveal-visible {
    animation: cop-enter 480ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: var(--cop-reveal-delay, 0ms);
}
@keyframes cop-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes cop-art-enter {
    from {
        opacity: 0;
        transform: translateY(16px) rotate(-5deg) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
    }
}
.cop-auth-apps {
    animation: cop-art-enter 750ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.cop-auth-rewards {
    animation: cop-art-enter 750ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms
        backwards;
}
.cop-auth-play {
    animation: cop-art-enter 750ms cubic-bezier(0.2, 0.8, 0.2, 1) 180ms
        backwards;
}
.cop-auth-art:hover .cop-auth-rewards {
    transition: transform 260ms ease;
    transform: translateY(-5px) rotate(3deg);
}
@media (max-width: 1024px) {
    .cop-auth-layout {
        gap: 28px;
    }
    .cop-auth-art {
        height: 370px;
    }
    .cop-tile-art {
        height: 155px;
    }
    .cop-tile-art img {
        height: 165px;
        width: 185px;
    }
}
@media (max-width: 767px) {
    .cop-discovery-tiles {
        gap: 12px;
        margin-bottom: 22px;
    }
    .cop-tile-art {
        height: 105px;
    }
    .cop-tile-art img {
        width: 125px;
        height: 125px;
        max-width: 125%;
    }
    .cop-tile-caption {
        display: block;
        padding: 0 2px;
    }
    .cop-tile-caption strong {
        font-size: 12px;
    }
    .cop-tile-caption span {
        font-size: 9px;
        line-height: 1.65;
    }
    .cop-tile-caption > i {
        display: none;
    }
    .cop-discovery-tile {
        padding-bottom: 13px;
    }
    .cop-auth-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 430px;
    }
    .cop-auth-art {
        position: relative;
        top: auto;
        align-self: center;
        margin: -8px 0 0;
        height: 120px;
        width: 285px;
        max-width: 100%;
    }
    .cop-auth-orbit {
        display: none;
    }
    .cop-auth-apps {
        width: 150px;
        height: 150px;
        top: -15px;
        left: 60px;
    }
    .cop-auth-rewards {
        width: 115px;
        height: 115px;
        top: -8px;
        right: -2px;
    }
    .cop-auth-play {
        width: 110px;
        height: 110px;
        left: -4px;
        bottom: 0;
    }
    .cop-auth-layout > .cop-auth-form {
        width: 100%;
    }
    .cop .cop-reward-cover,
    .cop .cop-reward-cover img {
        width: 64px;
        height: 64px;
        max-width: 64px;
        max-height: 64px;
    }
    .cop .cop-reward-card {
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .cop-reward-fallback {
        width: 64px;
        height: 64px;
    }
}
@media (max-width: 360px) {
    .cop-tile-art {
        height: 92px;
    }
    .cop-tile-art img {
        width: 110px;
        height: 110px;
    }
    .cop-tile-caption strong {
        font-size: 11px;
    }
    .cop-tile-caption span {
        font-size: 8px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cop-reveal-pending {
        opacity: 1 !important;
        transform: none !important;
    }
    .cop-reveal-visible,
    .cop-auth-apps,
    .cop-auth-rewards,
    .cop-auth-play {
        animation: none !important;
    }
    .cop-discovery-tile img,
    .cop-button,
    .cop-reward-card,
    .cop-partner-card,
    .cop-reward-cover img {
        transition: none !important;
        transform: none !important;
    }
}