/* ====== БАЗА ====== */
:root {
    --table-w: 1328px;
    --page-bg: #0b160e;
    --page-font: 16px/1.45 Roboto, system-ui, Arial, sans-serif;

    /* нижняя панель */
    --bar-w: 890px;
    --bar-top: 768px;

    /* элементы панели */
    --combo-w: 214px;
    --combo-h: 82px;
    --btn-w: 214px;
    --btn-h: 82px;
    --card-w: 164px;
    --card-gap: 12px;

    /* верхний блок */
    --title-top: 215px;
    --fields-top: 340px;
    --prize-top: 610px;

    --field-w: 170px;
    --field-gap: 16px;
    --prize-w: 196px;

    /* оппоненты */
    --opp-w: 167px;

    /* борд (3D) */
    --flop-w: 164px;
    --flop-ratio: 164/228;

    /* бейдж игрока */
    --me-badge-w: 240px;
    --me-badge-right: 30px;
    --me-badge-bottom: -40px;

    /* мини-панель после шоудауна */
    --mini-w: 262px;
    --mini-h: 130px;

    /* размеры текстового бокса внутри мини-плашки */
    --mini-box-w: 214px;
    --mini-box-h: 82px;
    --mini-box-inset-x: 24px;
    --mini-box-inset-y: 24px;

    --hand-bottom: -100px;
    /* стартовая позиция руки от низа сцены */
    --hand-sd-left: 31%;
    /* позиция руки в шоудауне */
    --hand-sd-bottom: 80px;

    --hand-overlap-x: 36px;
    /* нахлёст второй карты (по X) */
    --hand-raise-y: 10px;
    /* вертикальная поправка карт */
    --hand-raise-y1: 6px;
    /* для первой карты */

}





/* руки */
.opp--tl {
    --px: 100px;
    --py: 315px;
}
.opp--tc {
    --px: 780px;
    --py: 135px;
}
.opp--tr {
    --px: 1250px;
    --py: 315px;
}
.opp--bl {
    --px: 100px;
    --py: 810px;
}
.opp--br {
    --px: 1250px;
    --py: 810px;
}

/* фишки/бейдж для top-right: якорь = позиция оппы + локальный сдвиг */
.chips--tr {
    --px: 1151px;
    --py: 234px;
    --dx: -40px;
    --dy: 40px;
}
.badge--tr {
    --px: 1155px;
    --py: 165px;
    --dx: 80px;
    --dy: -50px;
}

* {
    box-sizing: border-box;
}
body,
html {
    height: 100%;
}
body {
    margin: 0;
    font: var(--page-font);
    color: #e8ecf4;
    background: var(--page-bg) url("../img/bg.webp") center/cover no-repeat fixed;
    overflow: hidden;
    min-height: -webkit-fill-available;
}

/* ====== СЦЕНА ====== */
.stage {
    position: relative;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    display: grid;
    place-items: center;
    align-items: start;
    padding-top: 10px;
    min-height: -webkit-fill-available;
}
.scene {
    width: var(--table-w);
    isolation: isolate;
    position: relative;
    transform-origin: top center;
    will-change: transform;
}

.stage.is-scroll {
  overflow-y: auto;
}

.table-img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 28px 72px rgba(0,0,0,.55)) drop-shadow(0 8px 24px rgba(0,0,0,.35));
}
.ui-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ===== TITLE ===== */
.top-title {
    position: absolute;
    left: 50%;
    top: var(--title-top);
    transform: translateX(-50%);
    text-align: center;
    font-family: 'Onest',system-ui,sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    color: #fff;
    text-shadow: 10.6207px 12.8966px 6.82759px rgba(0,0,0,.03), 6.06897px 7.58621px 5.31034px rgba(0,0,0,.10), 2.27586px 3.03448px 3.79310px rgba(0,0,0,.17), 0.758621px 0.758621px 2.27586px rgba(0,0,0,.20);
}

/* ===== BOARD FIELDS ===== */
.board-fields {
    position: absolute;
    left: 50%;
    top: var(--fields-top);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--field-gap);
}
.board-fields .field {
    width: var(--field-w);
    height: auto;
    display: block;
    border-radius: 14px;
}

/* ===== PRIZE POOL ===== */
.prize-pool {
    position: absolute;
    left: 50%;
    top: var(--prize-top);
    transform: translateX(-50%);
    width: var(--prize-w);
    height: auto;
    display: block;
    cursor: pointer;
    z-index: 5;
}

/* ===== OPPONENT HANDS / CHIPS / BADGE ===== */
.opp-hands {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.opp-hand {
    position: absolute;
    left: var(--px,0px);
    top: var(--py,0px);
    transform: translate(-50%,-50%) scale(.65);
    width: var(--opp-w);
    height: auto;
    display: block;
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
}
.opp-hand.show {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
}

/* плавный фолд в центр (векторы задаём из JS) */
.opp-hand.fold-anim {
    --fold-dx: 0;
    --fold-dy: 0;
    transform: translate(calc(-50% + var(--fold-dx)), calc(-50% + var(--fold-dy))) scale(.85) rotate(-6deg);
    opacity: 0;
    transition: transform 0.9s ease, opacity 0.55s ease;
}

.opp-hand.reveal-out {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    /* смещение к цели и переворот */
    transform: translate(calc(-50% + var(--reveal-dx,0px)), calc(-50% + var(--reveal-dy,0px))) rotateY(180deg) scale(.9);
    opacity: 0;
    transition: transform 0.75s cubic-bezier(.2,.8,.2,1), opacity 0.75s ease;
}

/* фишки/видео all-in: якоря + локальные смещения */
.allin-video,
.chips {
    position: absolute;
    left: calc(var(--px,0px) + var(--dx,0px));
    top: calc(var(--py,0px) + var(--dy,0px));
    transform: translate(-50%,-50%) scale(.7);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    pointer-events: none;
}
.allin-video.show,
.chips.show {
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
}
.chips {
    width: 132px;
}
.allin-video {
    width: 240px;
    height: auto;
    object-fit: contain;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));
}
.is-hidden {
    display: none !important;
}

/* ===== НИЖНЯЯ ПАНЕЛЬ ===== */
.bottom-bar {
    position: absolute;
    left: 50%;
    top: var(--bar-top);
    transform: translateX(-50%);
    width: var(--bar-w);
}
.bottom-bg {
    display: block;
    width: 100%;
    height: auto;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.combo-box {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: var(--combo-w);
    height: var(--combo-h);
    display: flex;
    align-items: center;
}
.combo-bg {
    position: absolute;
    inset: 0;
    width: 214px;
    height: 82px;
    object-fit: contain;
}
.combo-text {
    position: relative;
    padding: 0 14px 0 20px;
    width: 100%;
    height: 54px;
    font-family: 'Onest',system-ui,sans-serif;
}
.combo-text .caption {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    opacity: 0.5;
    margin: 0 0 6px;
}
.combo-text .value {
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #fff;
    margin: 0;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.combo-text .value.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Карты игрока (в панели — из ui-layer) */
.hand {
    position: absolute;
    left: 50%;
    bottom: var(--hand-bottom);
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: var(--card-gap);
    z-index: 2;
    transition: left 0.65s cubic-bezier(.2,.8,.2,1), bottom 0.65s cubic-bezier(.2,.8,.2,1);
}
.hand .card {
    width: var(--card-w);
    height: auto;
    --dx: 0;
    --dy: 70px;
    opacity: 0;
    will-change: transform,opacity;
    transition: transform 0.55s ease, opacity 0.55s ease, width 0.65s ease;
}
.hand .card.show {
    opacity: 1;
    --dx: 0;
    --dy: 0;
}
.hand .card:nth-child(1) {
    transform: translate(var(--dx),var(--dy)) rotate(-10deg) translateY(var(--hand-raise-y1));

}
.hand .card:nth-child(2) {
    transform: translate(var(--dx),var(--dy)) rotate(8deg) translate(calc(-1 * var(--hand-overlap-x)), var(--hand-raise-y));

}

/* состояние шоудауна у игрока: новая позиция + размер и «тосс» */
.hand.is-showdown {
    left: var(--hand-sd-left);
    bottom: var(--hand-sd-bottom);
}
.hand.is-showdown .card {
    width: 124px;
}

@keyframes toss {
    0% {
        transform: translate(0,0) rotate(0deg);
    }
    60% {
        transform: translate(-14px,-22px) rotate(-6deg);
    }
    100% {
        transform: translate(0,0) rotate(-4deg);
    }
}
@keyframes toss2 {
    0% {
        transform: translate(0,0) rotate(0deg);
    }
    60% {
        transform: translate(18px,-18px) rotate(6deg);
    }
    100% {
        transform: translate(-24px,6px) rotate(4deg);
    }
}

/* Кнопка All-in */
.btn-allin {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: var(--btn-w);
    height: var(--btn-h);
    display: block;
    border: 0;
    background: none;
    padding: 0;
    pointer-events: auto;
    cursor: pointer;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.btn-allin img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.btn-allin.is-disabled {
    cursor: not-allowed;
    pointer-events: none;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.btn-allin.is-hidden {
    display: none;
}

/* Бейдж ALL-IN у игрока */
.me-allin-video {
    position: absolute;
    right: var(--me-badge-right);
    bottom: var(--me-badge-bottom);
    width: var(--me-badge-w);
    height: auto;
    object-fit: contain;
    transform: translateY(10px) scale(.85);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));
}
.me-allin-video.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ===== FLOP 3D ===== */
.card3d {
    position: relative;
    width: var(--flop-w);
    aspect-ratio: var(--flop-ratio);
    perspective: 900px;
    transform: scale(1);
    opacity: 1;
    transition: transform 0.45s ease, filter 0.45s ease;
}
.card3d.appear {
    animation: flopIn 0.38s ease-out both;
}
@keyframes flopIn {
    from {
        transform: scale(.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
.card3d.raise {
    animation: none;
    transform: translateY(-10px) scale(1);
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.35));
}
.card3d .inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.card3d.flip .inner {
    transform: rotateY(180deg);
}
.card3d img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    backface-visibility: hidden;
    object-fit: cover;
}
.card3d .front {
    transform: rotateY(180deg);
}
.card3d .back {
    transform: rotateY(0);
}

/* фишки игрока */
.me-chips {
    position: absolute;
    right: 415px;
    bottom: 110px;
    width: 130px;
    transform: translateY(10px) scale(.85);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.me-chips.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ===== Мини-панели после шоудауна ===== */
.mini-bar {
    position: absolute;
    width: var(--mini-w);
    height: var(--mini-h);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.2,.8,.2,1);
    will-change: transform, opacity;
}
.mini-bar .mini-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.mini-bar .mini-box {
    position: absolute;
    left: var(--mini-box-inset-x);
    bottom: var(--mini-box-inset-y);
    width: var(--mini-box-w);
    height: var(--mini-box-h);
    object-fit: contain;
    pointer-events: none;
}

.mini-bar .mini-text {
    position: absolute;
    left: var(--mini-box-inset-x);
    bottom: var(--mini-box-inset-y);
    width: var(--mini-box-w);
    height: var(--mini-box-h);
    padding: 0 14px 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Onest',system-ui,sans-serif;
}
.mini-bar .mini-text .cap {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    opacity: 0.5;
    color: #fff;
    margin: 0 0 6px;
}
.mini-bar .mini-text .val {
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #fff;
    margin: 0;
}

/* финал появления */
.mini-bar.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* позиции (без «своих» старт-трансформов) */
.mini-bar--me {
    left: 50%;
    bottom: -25px;
}
.mini-bar--opp {
    left: var(--opp-mini-left,72%);
    top: var(--opp-mini-top,20px);
}
/* контейнер для открытых карт оппонента */
.opp-showdown {
    position: absolute;
    left: var(--opp-sd-left,74%);
    top: var(--opp-sd-top,208px);
    transform: translate(-50%,-50%);
    display: flex;
    gap: 12px;
    pointer-events: none;
    z-index: 2;
}

/* карты оппонента как у игрока  */
.opp-showdown .opp-card {
    width: 124px;
    height: auto;
    will-change: transform, opacity;
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1), opacity 0.6s ease;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)) drop-shadow(0 4px 10px rgba(0,0,0,.20));
    opacity: 0;
    transform: translateY(10px) scale(.92);
}
.opp-showdown .opp-card.show {
    opacity: 1;
}

.mini-bar--opp {
    --opp-mini-left: 72%;
    --opp-mini-top: 20px;
}

/* финальные позы — как у игрока */
.opp-showdown .opp-card:nth-child(1) {
    z-index: 1;
    transform: rotate(-10deg) translateY(6px);
}
.opp-showdown .opp-card:nth-child(2) {
    z-index: 2;
    transform: rotate(8deg) translate(-36px,10px);
}

/* эффект «броска» для оппонента */
.opp-showdown .opp-card.throw {
    opacity: 0;
    transform: translate(20px,-30px) scale(.9) rotate(0deg);
}
.opp-showdown .opp-card.throw.show {
    opacity: 1;
}

/* Обёртка для броска карт оппонента */
.opp-card-wrap {
    display: inline-block;
    will-change: transform, opacity;
    transform: none;
    opacity: 0;

}

/* Плавные «броски» */
.opp-card-wrap.toss1 {
    animation: oppToss1 820ms cubic-bezier(.2,.8,.2,1) both;
}
.opp-card-wrap.toss2 {
    animation: oppToss2 820ms cubic-bezier(.2,.8,.2,1) both 90ms;
}


@keyframes oppToss1 {
    0% {
        transform: translate(0,0) rotate(0deg) scale(.96);
        opacity: 0;
    }
    60% {
        transform: translate(-14px,-20px) rotate(-5deg) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}
@keyframes oppToss2 {
    0% {
        transform: translate(0,0) rotate(0deg) scale(.96);
        opacity: 0;
    }
    60% {
        transform: translate(18px,-18px) rotate(5deg) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

/* ===== WIN POPUP ===== */
.popup-mask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 999;
}
.popup-mask.show {
    opacity: 1;
    pointer-events: auto;
    overflow: auto;
}
.popup {
    position: relative;
    width: 360px;
    min-height: 500px;
    border-radius: 32px;
    background: url("../img/popup_bg.webp") center / 100% 100% no-repeat;
    box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.popup .btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: transparent url("../img/close.webp") center/contain no-repeat;
    border: 0;
    cursor: pointer;
}

.sr-only {
    position: absolute!important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* картинка-заголовок "7 BTC + 250 FS!" */
.pop-title .strong-img {
    display: inline-block;
    height: 24px;
    margin-bottom: -6px;
    width: auto;
    vertical-align: baseline;
    margin-left: 3px;

}

/* заголовок */
.pop-title {
    font-family: 'Onest',system-ui,sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    color: #fff;
    text-shadow: 2px 2px 3px rgba(0,0,0,.65);
    margin: 8px 8px 10px;
}

.pop-sub {
    font-family: 'Onest', system-ui, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    color: #fff;
    opacity: 0.95;
    text-shadow: 1px 1px 2px rgba(0,0,0,.55);
    margin: 0 8px 18px;
}
.pop-form {
    margin: 0 8px;
    flex: 1 1 auto;

}

.pause-btn {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 10000;
    padding: 10px 14px;
    border-radius: 10px;
    border: 0;
    background: rgba(20,20,20,.75);
    color: #fff;
    font: 600 14px/1 system-ui, -apple-system, Roboto, Arial, sans-serif;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
    cursor: pointer;
    backdrop-filter: blur(2px);
}
.pause-btn:hover {
    background: rgba(20,20,20,.9);
}
.pause-btn[aria-pressed="true"] {
    background: #1f6feb;
}

@supports not (height: 100dvh) {
  .stage { height: 100svh; }
}

@media (max-width: 1360px),
       (orientation: landscape) and (max-width: 1024px) {
    :root {
        --table-w: 1015px;
        --page-bg: #0b160e;
        --page-font: 16px/1.45 Roboto, system-ui, Arial, sans-serif;

        /* нижняя панель */
        --bar-w: 743px;
        --bar-top: 600px;

        /* элементы панели */
        --combo-w: 214px;
        --combo-h: 82px;
        --btn-w: 214px;
        --btn-h: 82px;
        --card-w: 131px;
        --card-gap: 8px;

        /* верхний блок */
        --title-top: 150px;
        --fields-top: 255px;
        --prize-top: 460px;

        --field-w: 131px;
        --field-gap: 16px;
        --prize-w: 171px;

        /* оппоненты */
        --opp-w: 120px;

        /* борд (3D) */
        --flop-w: 130px;
        --flop-ratio: 164/228;

        /* бейдж игрока */
        --me-badge-w: 200px;
        --me-badge-right: 24px;
        --me-badge-bottom: -18px;

        /* мини-панель после шоудауна */
        --mini-w: 176px;
        --mini-h: 89px;

        /* размеры текстового бокса внутри мини-плашки */
        --mini-box-w: 144px;
        --mini-box-h: 58px;
        --mini-box-inset-x: 16px;
        --mini-box-inset-y: 16px;

        --hand-bottom: -82px;
        /* опусти/подними руку относительно панели */
        --hand-sd-left: 29%;
        --hand-sd-bottom: 66px;

        --hand-overlap-x: 30px;
        /* чуть меньше нахлёст — карты уже */
        --hand-raise-y: 8px;
        --hand-raise-y1: 5px;
    }


    .mini-bar--opp {
        --opp-mini-left: 77%;
        --opp-mini-top: 14px;
    }

    .top-title {
        font-size: 36px;
        line-height: 40px;
    }
    .table-img {
        content: url("../img/tablet_tab.webp");
    }
    .bottom-bg {
        content: url("../img/bottom_container_tab.webp");
    }
    .prize-pool {
        content: url("../img/prize_pool_tab.webp");
    }
    .hand {
        left: 51.5%;
    }

    /* руки */
    .opp--tl {
        --px: 80px;
        --py: 235px;
    }
    .opp--tc {
        --px: 595px;
        --py: 75px;
    }
    .opp--tr {
        --px: 960px;
        --py: 235px;
    }
    .opp--bl {
        --px: 80px;
        --py: 610px;
    }
    .opp--br {
        --px: 960px;
        --py: 610px;
    }

    /* фишки/бейдж для top-right: якорь = позиция оппы + локальный сдвиг */
    .chips {
        width: 107px;
    }

    .allin-video {
        width: 140px;
    }

    .chips--tr {
        --px: 892px;
        --py: 174px;
        --dx: -40px;
        --dy: 40px;
    }
    .badge--tr {
        --px: 862px;
        --py: 144px;
        --dx: 80px;
        --dy: -50px;
    }

    .me-chips {
        position: absolute;
        right: 328px;
        bottom: 73px;
        width: 96px;
    }

    .mini-bar .mini-text .cap {
        font-weight: 400;
        font-size: 12px;
        line-height: 12px;
    }

    .mini-bar .mini-text .val {
        font-weight: 700;
        font-size: 14px;
        line-height: 16px;
    }

    .hand.is-showdown .card {
        width: 83px;
    }

    .opp-showdown {
        left: var(--opp-sd-left, 79%);
        top: var(--opp-sd-top, 136px);
    }

    .opp-showdown .opp-card {
        width: 82px;
    }
}



@media (max-width: 1024px) and (orientation: portrait) {

    .popup-mask {
    overflow-y: auto;
  }

    :root {
        --table-w: 729px;
        --page-bg: #0b160e;
        --page-font: 16px/1.45 Roboto, system-ui, Arial, sans-serif;

        /* нижняя панель */
        --bar-w: 694px;
        --bar-top: 840px;

        /* элементы панели */
        --combo-w: 185px;
        --combo-h: 82px;
        --btn-w: 168px;
        --btn-h: 82px;
        --card-w: 108px;
        --card-gap: 8px;

        /* верхний блок */
        --title-top: 150px;
        --fields-top: 350px;
        --prize-top: 240px;

        --field-w: 108px;
        --field-gap: 12px;
        --prize-w: 171px;

        /* оппоненты */
        --opp-w: 125px;

        /* борд (3D) */
        --flop-w: 108px;
        --flop-ratio: 164/228;

        /* бейдж игрока */
        --me-badge-w: 200px;
        --me-badge-right: 24px;
        --me-badge-bottom: -18px;

        /* мини-панель после шоудауна */
        --mini-w: 176px;
        --mini-h: 89px;

        /* размеры текстового бокса внутри мини-плашки */
        --mini-box-w: 144px;
        --mini-box-h: 58px;
        --mini-box-inset-x: 16px;
        --mini-box-inset-y: 16px;

        --hand-bottom: -40px;
        /* опусти/подними руку относительно панели */
        --hand-sd-left: 50%;
        --hand-sd-bottom: 95px;

        --hand-overlap-x: 30px;
        /* чуть меньше нахлёст — карты уже */
        --hand-raise-y: 8px;
        --hand-raise-y1: 5px;
    }

    .mini-bar--opp {
        --opp-mini-left: 90%;
        --opp-mini-top: 70px;
    }

    .top-title {
        display: none;
    }
    .table-img {
        content: url("../img/tablet_tab2.webp");
    }
    .bottom-bg {
        content: url("../img/bottom_container_tab2.webp");
    }
    .prize-pool {
        content: url("../img/prize_pool_tab2.webp");
    }

    .hand {
        left: 51.5%;
    }

    .combo-bg {
        width: 185px;
        height: 82px;
        content: url("../img/text_box_tab.webp");
    }
    .combo-box {
        left: 22px;
    }

    .btn-allin {
        right: 22px;
        content: url("../img/btn_enable_tab.webp");
    }

    /* руки */
    .opp--tl {
        --px: 80px;
        --py: 275px;
    }
    .opp--tc {
        --px: 370px;
        --py: 150px;
    }
    .opp--tr {
        --px: 670px;
        --py: 275px;
    }
    .opp--bl {
        --px: 80px;
        --py: 700px;
    }
    .opp--br {
        --px: 670px;
        --py: 700px;
    }

    /* фишки/бейдж для top-right: якорь = позиция оппы + локальный сдвиг */
    .chips {
        width: 125px;
    }

    .allin-video {
        width: 180px;
    }

    .chips--tr {
        --px: 645px;
        --py: 343px;
        --dx: -40px;
        --dy: 40px;
    }
    .badge--tr {
        --px: 575px;
        --py: 175px;
        --dx: 80px;
        --dy: -50px;
    }

    .me-chips {
        position: absolute;
        right: 153px;
        bottom: 42px;
        width: 124px;
    }
    .bottom-bar {
        z-index: 1;
    }

    .mini-bar .mini-text .cap {
        font-weight: 400;
        font-size: 12px;
        line-height: 12px;
    }

    .mini-bar .mini-text .val {
        font-weight: 700;
        font-size: 14px;
        line-height: 16px;
    }

    .hand.is-showdown .card {
        width: 94px;
    }

    .opp-showdown {
        left: var(--opp-sd-left, 80%);
        top: var(--opp-sd-top, 250px);
    }

    .opp-showdown .opp-card {
        width: 92px;
    }

    .board-fields {
        position: absolute;
        left: 50%;
        top: var(--fields-top);
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: var(--field-gap);
        flex-wrap: wrap;
        justify-content: center;
    }

    .stage {
        overflow-y: auto;
    }


}

@media (max-width: 768px) and (orientation: portrait) {

    :root {
        --table-w: 368px;
        --page-bg: #0b160e;
        --page-font: 16px/1.45 Roboto, system-ui, Arial, sans-serif;

        /* нижняя панель */
        --bar-w: 343px;
        --bar-top: 560px;

        /* элементы панели */
        --combo-w: 161px;
        --combo-h: 74px;
        --btn-w: 122px;
        --btn-h: 74px;
        --card-w: 106px;
        --card-gap: 8px;

        /* верхний блок */
        --title-top: 150px;
        --fields-top: 210px;
        --prize-top: 140px;

        --field-w: 62px;
        --field-gap: 8px;
        --prize-w: 142px;

        /* оппоненты */
        --opp-w: 72px;

        /* борд (3D) */
        --flop-w: 62px;
        --flop-ratio: 62/87;

        /* бейдж игрока */
        --me-badge-w: 160px;
        --me-badge-right: 5px;
        --me-badge-bottom: -8px;

        /* мини-панель после шоудауна */
        --mini-w: 176px;
        --mini-h: 89px;

        /* размеры текстового бокса внутри мини-плашки */
        --mini-box-w: 144px;
        --mini-box-h: 58px;
        --mini-box-inset-x: 16px;
        --mini-box-inset-y: 16px;

        --hand-bottom: -80px;
        /* опусти/подними руку относительно панели */
        --hand-sd-left: 50%;
        --hand-sd-bottom: 36px;

        --hand-overlap-x: 30px;
        /* чуть меньше нахлёст — карты уже */
        --hand-raise-y: 8px;
        --hand-raise-y1: 5px;
    }
    .mini-bar--opp {
        --opp-mini-left: 90%;
        --opp-mini-top: 70px;
        display: none;
    }

    .board-fields .field {
        border-radius: 6px;
    }

    .top-title {
        display: none;
    }
    .table-img {
        content: url("../img/tablet_mob.webp");
    }
    .bottom-bg {
        content: url("../img/bottom_container_mob.webp");
    }
    .prize-pool {
        content: url("../img/prize_pool_mob.webp");
    }

    .hand {
        left: 53%;
    }

    .combo-bg {
        width: 161px;
        height: 74px;
        content: url("../img/text_box_mob.webp");
    }
    .combo-box {
        left: 23px;
        bottom: 23px;
    }

    .combo-text {
        height: 45px;
    }

    .combo-text .caption {
        font-size: 14px;
        line-height: 18px;
    }

    .combo-text .value {
        font-size: 16px;
        line-height: 18px;
    }

    .btn-allin {
        right: 23px;
        content: url("../img/btn_enable_mob.webp");
    }

    /* руки */
    .opp--tl {
        --px: 44px;
        --py: 160px;
    }
    .opp--tc {
        --px: 188px;
        --py: 85px;
    }
    .opp--tr {
        --px: 330px;
        --py: 160px;
    }
    .opp--bl {
        --px: 44px;
        --py: 400px;
    }
    .opp--br {
        --px: 330px;
        --py: 400px;
    }

    /* фишки/бейдж для top-right: якорь = позиция оппы + локальный сдвиг */
    .chips {
        width: 68px;
    }

    .allin-video {
        width: 120px;
    }

    .chips--tr {
        --px: 363px;
        --py: 185px;
        --dx: -40px;
        --dy: 40px;
    }
    .badge--tr {
        --px: 242px;
        --py: 118px;
        --dx: 80px;
        --dy: -50px;
    }

    .card3d.raise {
        transform: translateY(-5px) scale(1);
    }

    .me-chips {
        position: absolute;
        right: 62px;
        bottom: 18px;
        width: 80px;
    }
    .bottom-bar {
        z-index: 2;
    }

    .card3d img {
        border-radius: 4px;
    }

    .mini-bar--me {
        left: 50%;
        bottom: -120px;
    }

    .mini-bar .mini-text .cap {
        font-weight: 400;
        font-size: 12px;
        line-height: 12px;
    }

    .mini-bar .mini-text .val {
        font-weight: 700;
        font-size: 14px;
        line-height: 16px;
    }

    .hand.is-showdown .card {
        width: 62px;
    }

    .opp-showdown {
        left: var(--opp-sd-left, 85%);
        top: var(--opp-sd-top, 140px);
        z-index: 5;
    }

    .opp-showdown .opp-card {
        width: 62px;
    }

    .board-fields {
        position: absolute;
        left: 50%;
        width: 250px;
        top: var(--fields-top);
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: var(--field-gap);
        flex-wrap: wrap;
        justify-content: center;
    }

    .stage {
        overflow-y: auto;
    }

}


@media (orientation: landscape) and (max-height: 500px) {
  .popup {
    transform: scale(0.7);
    transform-origin: center center;
    min-height: 390px;
  }
}

@media (orientation: landscape) and (max-width: 1024px) and (pointer: coarse) {
  .stage {
    position: relative;
    left: 0;
    overflow-y: auto;
  }
  .stage.is-scroll {
  overflow-y: auto;
}
}

/* очень узкие ландшафты, вроде iPhone SE */
@media (orientation: landscape) and (max-width: 700px) and (pointer: coarse) {
  .stage {
    left: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding-top: 0;
  }

  .scene {
    transform: scale(0.45) translateX(-39%);
    transform-origin: top center;
  }
}


@media (max-height: 800px) and (min-height: 430px) {
  .popup-mask {
    overflow-y: auto;
  }
}



/* ===== PRELOADER ===== */
#preloaderMask {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: radial-gradient(60% 60% at 50% 40%, rgba(11,22,14,.9) 0%, rgba(6,10,8,.98) 100%);
    transition: opacity 0.45s ease, visibility 0.45s ease;
}
#preloaderMask.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.pre-inner {
    width: min(520px, 86vw);
    padding: 28px 24px;
    border-radius: 16px;
    background: rgba(0,0,0,.35);
    box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
    backdrop-filter: blur(4px);
    text-align: center;
    color: #fff;
    font-family: 'Onest', system-ui, sans-serif;
}
.pre-title {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.4px;
    margin-bottom: 14px;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.pre-bar {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.4);
}
.pre-bar__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #ffc700 0%, #ffad00 100%);
    border-radius: inherit;
    transition: width 0.25s ease;
}
.pre-percent {
    margin-top: 10px;
    font-weight: 700;
    font-size: 14px;
    opacity: 0.9;
}