/* Arrows */
.bets-scroll-hint {
    position: absolute;
    right: max(env(safe-area-inset-right), 10px);
    bottom: 55px;
    z-index: 200;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 40px;

    pointer-events: none;
    isolation: isolate;

    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility .16s ease;
}
.bets-scroll-hint.is-visible {
    opacity: 1;
    visibility: visible;
}
.bets-scroll-hint::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background: radial-gradient(
            circle,
            rgba(116, 210, 255, 0.34) 0%,
            rgba(116, 210, 255, 0.16) 42%,
            transparent 72%
    );
    filter: blur(4px);
    opacity: 0;
}
.bets-scroll-hint.is-visible::before {
    animation: bets-scroll-hint-glow 1.35s ease-in-out infinite;
}
.bets-scroll-hint__arrow {
    position: relative;
    z-index: 1;

    width: 14px;
    height: 14px;

    border-right: 3px solid rgba(200, 235, 255, 0.95);
    border-bottom: 3px solid rgba(200, 235, 255, 0.95);
    border-radius: 2px;

    opacity: 0;
    transform: rotate(45deg);
}
.bets-scroll-hint.is-visible .bets-scroll-hint__arrow {
    animation: bets-scroll-chevron 1.35s ease-in-out infinite;
}
.bets-scroll-hint.is-visible .bets-scroll-hint__arrow + .bets-scroll-hint__arrow {
    margin-top: -4px;
    animation-delay: .18s;
}

/* Top card */
.top-card__user-info {
    display: grid;
    grid-template-columns: minmax(0, max-content) max-content;
    align-items: center;
    column-gap: 20px;
}
.top-card__meta {
    min-width: 0;
    display: grid;
    row-gap: 2px;
    align-items: start;
}
.top-card__date::before {
    display: none;
    content: none;
}
.top-card__time {
    color: #c0c9f6;
    font-family: var(--basic-font);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* Animations */
@keyframes bets-scroll-chevron {
    0% {
        opacity: 0;
        transform: translateY(-6px) rotate(45deg) scale(0.82);
    }

    25% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(7px) rotate(45deg) scale(1.02);
    }
}
@keyframes bets-scroll-hint-glow {
    0%, 100% {
        opacity: 0;
        transform: scale(0.9);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.08);
    }
}

/* Portrait */
@media (orientation: portrait) {
    .bottom-tools.full .bets-scroll-hint {
        bottom: calc(30vh + 3px);
    }
}
@media (orientation: portrait) and (max-width: 375px) {
    .top-card__user-info {
        column-gap: 10px;
    }
}

/* Landscape */
@media (orientation: landscape) {
    #game {
        --side-panel-open-left: calc(min(30vw, 235px) + 5px);
        --side-panel-open-shift: calc(var(--side-panel-open-left) / 2);
    }

    /*#game:has(#bottom-tools.full) .topbar-message,*/
    /*#game:has(#bottom-tools.full) .round-loading {*/
    /*    left: calc(50% + var(--side-panel-open-shift));*/
    /*}*/

    .bets-scroll-hint {
        bottom: 35px;
        transform: rotate(-90deg);
        transform-origin: center;
    }

    .top-card__meta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }

    .top-card__header .top-card__meta .top-card__date,
    .top-card__header .top-card__meta .top-card__time {
        display: block;
        width: auto;
        justify-self: auto;
        align-self: auto;
        grid-area: auto;
        text-align: left;
    }

    .top-card__time {
        font-size: clamp(9px, 1vw, 12px);
    }

    .bottom-tools:not(.full) .bets-toolbar__summary .bets-toolbar__meta--total {
        margin-left: 0;

        display: flex;
        flex-direction: column;
        align-items: center;

        line-height: 1.05;
        text-align: center;
    }

    .bottom-tools:not(.full) .bets-toolbar__summary .bets-toolbar__meta--total span {
        display: block;
        margin-bottom: 1px;
        text-align: center;
    }
}

/* Large landscape */
@media (orientation: landscape) and (min-width: 1200px) {
    #game {
        --side-panel-open-left: calc(min(45vw, 335px) + 5px);
        --side-panel-open-shift: calc(var(--side-panel-open-left) / 2);
    }

    .console-block {
        --single-console-width: min(70vw, 700px);
        --single-console-height: 52px;
    }

    .bottom-tools.full .console-block {
        --console-scale: 1.13;
        --single-console-width: min(70vw, calc(100vw - min(45vw, 400px) - 150px));
    }

    .bottom-tools .console-block > .console-item:only-child {
        display: block;

        width: calc(var(--single-console-width) * var(--console-scale));
        height: calc(var(--single-console-height) * var(--console-scale));

        padding: 0;
    }

    .bottom-tools .console-block > .console-item:only-child > .console-item-inner {
        position: relative;
        box-sizing: border-box;

        display: grid;
        grid-template-columns: 1fr var(--start-btn-size) 68px;
        column-gap: var(--gap);
        align-items: flex-start;

        width: var(--single-console-width);
        height: var(--single-console-height);
        padding: 8px max(env(safe-area-inset-right), 8px) 8px 9px;
        border-radius: 13px;

        transform: scale(var(--console-scale));
        transform-origin: top center;
    }
}
@media (orientation: landscape) and (max-height: 375px) {
    .top-card__user-info {
        column-gap: 7px;
    }
}