/* arena-dialog-v1 */
.arena-dialog-lock{overflow:hidden!important}
.arena-dialog-layer{
    position:fixed;inset:0;z-index:100000;display:grid;place-items:center;
    padding:20px;opacity:0;visibility:hidden;
    transition:opacity 180ms ease,visibility 180ms ease
}
.arena-dialog-layer.is-open{opacity:1;visibility:visible}
.arena-dialog-backdrop{
    position:absolute;inset:0;background:rgba(10,7,7,.50);
    backdrop-filter:blur(12px) saturate(125%);
    -webkit-backdrop-filter:blur(12px) saturate(125%)
}
.arena-dialog{
    position:relative;z-index:1;width:min(100%,440px);padding:22px;
    border:1px solid rgba(127,127,127,.18);border-radius:24px;
    background:rgba(255,255,255,.96);color:#171313;
    box-shadow:0 26px 80px rgba(0,0,0,.24),0 2px 8px rgba(0,0,0,.08);
    transform:translateY(8px) scale(.985);
    transition:transform 200ms cubic-bezier(.22,.8,.22,1)
}
.arena-dialog-layer.is-open .arena-dialog{transform:translateY(0) scale(1)}
html[data-theme="dark"] .arena-dialog{
    background:rgba(29,21,21,.97);color:#f8f3f3;
    border-color:rgba(255,255,255,.10);
    box-shadow:0 28px 90px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.025)
}
.arena-dialog-eyebrow{
    margin:0 0 10px;color:#B22000;font-size:11px;font-weight:900;
    letter-spacing:.07em;text-transform:uppercase
}
.arena-dialog-title{
    margin:0;font-size:clamp(22px,4vw,28px);line-height:1.05;letter-spacing:-.035em
}
.arena-dialog-message{
    margin:12px 0 0;color:inherit;font-size:15px;line-height:1.55;
    opacity:.70;white-space:pre-wrap;overflow-wrap:anywhere
}
.arena-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.arena-dialog-button{
    min-height:46px;padding:0 18px;border-radius:999px;border:1px solid transparent;
    font:inherit;font-size:14px;font-weight:800;cursor:pointer;
    transition:transform 140ms ease,background-color 140ms ease,border-color 140ms ease
}
.arena-dialog-button:hover{transform:translateY(-1px)}
.arena-dialog-button:active{transform:translateY(0)}
.arena-dialog-button:focus-visible{
    outline:3px solid rgba(178,32,0,.22);outline-offset:2px
}
.arena-dialog-cancel{
    border-color:rgba(127,127,127,.20);background:rgba(127,127,127,.08);color:inherit
}
.arena-dialog-confirm{
    background:#B22000;color:#fff;box-shadow:0 8px 22px rgba(178,32,0,.18)
}
.arena-dialog-confirm:hover{background:#991b00}
.arena-dialog[data-tone="neutral"] .arena-dialog-confirm{background:#1f1b1b}
html[data-theme="dark"] .arena-dialog[data-tone="neutral"] .arena-dialog-confirm{
    background:#f5eeee;color:#1a1414
}
@media(max-width:560px){
    .arena-dialog-layer{
        place-items:end center;
        padding:12px 12px calc(12px + env(safe-area-inset-bottom))
    }
    .arena-dialog{width:100%;padding:20px;border-radius:26px}
    .arena-dialog-actions{flex-direction:column-reverse}
    .arena-dialog-button{width:100%;min-height:50px}
}

/* arena-dialog-motion-v2 */

.arena-dialog-layer {
    opacity: 1 !important;

    visibility: hidden;

    transition:
        visibility 260ms ease !important;

    pointer-events: none;
}

.arena-dialog-layer.is-open {
    visibility: visible;
    pointer-events: auto;
}


/* Фон начинает реагировать сразу */
.arena-dialog-backdrop {
    background: rgba(10, 7, 7, 0);

    opacity: 0;

    backdrop-filter:
        blur(0px)
        saturate(100%);

    -webkit-backdrop-filter:
        blur(0px)
        saturate(100%);

    transition:
        opacity 260ms ease,
        background-color 260ms ease,
        backdrop-filter 320ms
            cubic-bezier(.22, .8, .22, 1),
        -webkit-backdrop-filter 320ms
            cubic-bezier(.22, .8, .22, 1);

    will-change:
        opacity,
        backdrop-filter;

    transform: translateZ(0);
}

.arena-dialog-layer.is-open
.arena-dialog-backdrop {
    opacity: 1;

    background:
        rgba(10, 7, 7, 0.48);

    backdrop-filter:
        blur(10px)
        saturate(122%);

    -webkit-backdrop-filter:
        blur(10px)
        saturate(122%);
}


/* Сама карточка появляется синхронно с фоном */
.arena-dialog {
    opacity: 0;

    transform:
        translateY(14px)
        scale(0.965);

    filter: blur(2px);

    transition:
        opacity 180ms ease,
        transform 300ms
            cubic-bezier(.16, 1, .3, 1),
        filter 220ms ease !important;

    will-change:
        opacity,
        transform,
        filter;

    transform-origin:
        center center;
}

.arena-dialog-layer.is-open
.arena-dialog {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


/* Кнопки слегка "доезжают" следом */
.arena-dialog-actions {
    opacity: 0;

    transform:
        translateY(5px);

    transition:
        opacity 220ms ease 45ms,
        transform 260ms
            cubic-bezier(.16, 1, .3, 1)
            45ms;
}

.arena-dialog-layer.is-open
.arena-dialog-actions {
    opacity: 1;

    transform:
        translateY(0);
}


/* На устройствах, где blur тяжёлый,
   всё равно остаётся приятное затемнение */
@media (prefers-reduced-motion: reduce) {
    .arena-dialog-backdrop,
    .arena-dialog,
    .arena-dialog-actions {
        transition-duration:
            80ms !important;

        transition-delay:
            0ms !important;
    }
}


/* arena-dialog-scrollbar-stability-v1
   Не даём странице прыгать по горизонтали,
   когда модалка блокирует прокрутку.
*/
html {
    scrollbar-gutter: stable;
}

html.arena-dialog-lock {
    overflow-y: hidden !important;
}