/**
 * Деберц — новый дизайн (как durak). Слой поверх games_common.css.
 * Размеры спрайтов: .card-sprite 78x103, .small-card-sprite 41x54,
 * .game-user__opponent-card 40x54. Канва — #table-area (>=1024x500).
 */

/* Closed opponent cards need just enough separation from the felt to retain
   their fan silhouette. This also covers #position1 for a game spectator. */
#table-area.deberc .game-user__opponent-cards .game-user__opponent-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}

/* «Комната» — тёмный фон вокруг стола с шумовым зерном.
   Прежняя текстура /build/frontend/noisy-texture-100_0cabec4.png в репозитории
   полностью прозрачная (350 байт, alpha=0) и ничего не рисует, поэтому шум
   генерируем инлайновым SVG feTurbulence — без внешнего файла. */
html, body.table-game.deberc {
    background-color: #14251c;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
    background-attachment: fixed;
}

/* Канва: собственный контекст наложения + BFC без обрезки.
   overflow:visible — чтобы стол занимал всю канву (аватары, руки и очки лежат
   на сукне), а его тень не срезалась краем канвы. display:flow-root сохраняет
   BFC вместо снятого overflow:hidden: иначе margin-top детей (#playing-area)
   схлопывается наружу и вся сцена уезжает вниз. */
#table-area.deberc { isolation: isolate; overflow: visible; display: flow-root; }
#table-area.deberc.deberc--frameless {
    max-width: none;
    max-height: none;
    overflow: hidden;
}

/* ===== Стол =====
   Отдельный слой первым в канве: сам блок — деревянный борт, ::before — сукно.
   Позиционированные соседи (карты, аватары)
   идут в DOM после него, поэтому лежат поверх без z-index-акробатики.
   Текстура дерева собрана градиентами: внешних картинок не заводим (лишний
   бинарник + запрос), а CSS-волокна дают ту же фактуру и масштабируются. */
#deberc-table {
    position: absolute;
    inset: -1% -1% -3%;
    pointer-events: none;
    border-radius: 46% / 40%;
    background:
        /* блик сверху / затемнение снизу — свет падает сверху */
        linear-gradient(180deg,
            rgba(255,255,255,.16) 0%, rgba(255,255,255,.02) 18%,
            rgba(0,0,0,.10) 60%, rgba(0,0,0,.38) 100%),
        /* волокна идут ВДОЛЬ борта: концентрические кольца, как у гнутоклееного
           обода настоящего стола (обычные linear-полосы на овале смотрятся забором) */
        repeating-radial-gradient(ellipse 50% 50% at 50% 50%,
            rgba(0,0,0,.16) 0 2px, rgba(255,255,255,.06) 2px 4px,
            rgba(0,0,0,.05) 4px 7px, rgba(255,255,255,.025) 7px 11px),
        /* неравномерность тона по кругу — «живая» древесина под одним источником света */
        conic-gradient(from 205deg at 50% 50%,
            rgba(255,255,255,.10), rgba(0,0,0,.22) 22%, rgba(255,255,255,.07) 48%,
            rgba(0,0,0,.26) 72%, rgba(255,255,255,.10) 100%),
        /* базовый тон: орех, светлее по краям овала */
        linear-gradient(152deg, #90613a 0%, #6d4526 20%, #4a2a16 50%, #6d4526 80%, #90613a 100%);
    box-shadow:
        0 2px 2px rgba(0,0,0,.72),             /* контакт борта с фоном */
        0 0 32px 10px rgba(0,0,0,.46),         /* тень вокруг всего овала */
        0 12px 22px rgba(0,0,0,.48),           /* объём под деревянной рамой */
        0 30px 58px rgba(0,0,0,.42),           /* мягкая падающая тень */
        0 0 92px rgba(0,0,0,.18),              /* отделение овала по бокам */
        inset 0 0 0 1px rgba(255,255,255,.10), /* внешняя кромка борта */
        inset 0 4px 7px rgba(255,255,255,.20), /* блик на скруглении сверху */
        inset 0 -7px 14px rgba(0,0,0,.42);     /* тень на нижней части борта */
}

/* Сукно — внутренняя чаша борта */
#deberc-table::before {
    content: '';
    position: absolute;
    inset: 22px;
    border-radius: 46% / 40%;
    background: radial-gradient(ellipse at 50% 45%, #3a6b4e 0%, #2c5340 100%);
    box-shadow:
        0 0 0 2px rgba(0,0,0,.45),             /* стык сукна и борта */
        inset 0 6px 18px rgba(0,0,0,.45),      /* борт отбрасывает тень внутрь */
        inset 0 -4px 14px rgba(0,0,0,.28);
}

/* OnlineIgry uses the felt as the play surface, without the physical oval table.
   Keep the layered inner background, but remove every wooden/frame cue. */
#deberc-table.deberc-table--frameless {
    inset: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
#deberc-table.deberc-table--frameless::before {
    inset: 0;
    border-radius: 0;
    box-shadow: inset 0 0 100px rgba(0,0,0,.24);
}

/* ===== Позиции игроков ===== */
/* Внешняя тень овального борта выходит за его box на несколько пикселей;
   она не должна создавать горизонтальную прокрутку страницы. */
body.table-game.deberc { overflow-x: hidden; }

/* На широком портретном планшете старый рантайм создаёт виртуальную канву
   1024px, растягивает её по высоте и затем сжимает scale(). В результате
   координаты сцены считаются от несуществующей высоты, а все карты становятся
   мельче. Для нового деберца используем фактический viewport. */
@media (min-width: 821px) and (max-width: 1024px) and (orientation: portrait) {
    /* Сцена делится на независимые вертикальные зоны. Координаты намеренно
       живут здесь, а не разбросаны по карточкам, игрокам и плашкам: при смене
       высоты меняется ритм всей сцены, а не один случайный элемент. */
    #table-area.deberc {
        --deberc-top-seat: 18px;
        --deberc-table-center: 20%;
        --deberc-side-seat: 36%;
        --deberc-side-trick: calc(var(--deberc-side-seat) + 170px);
        --deberc-hand-bottom: 340px;
        --deberc-message-bottom: 500px;
    }

    html,
    body.table-game.deberc {
        width: 100%;
        height: 100svh;
        min-width: 0;
        min-height: 0 !important;
        overflow: hidden;
    }

    body.deberc #scale-wrapper {
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
    }

    #table-area.deberc {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100svh !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* Девять карт идут почти на всю ширину, но остаются нативного размера:
       без уменьшения всей сцены и без неуправляемых пробелов старого 1024px-макета. */
    #table-area.deberc #user-cards-in-hand {
        position: absolute !important;
        left: 0 !important;
        bottom: var(--deberc-hand-bottom) !important;
        width: 100% !important;
        margin: 0;
        transform: none !important;
        white-space: nowrap;
        text-align: center;
    }

    #table-area.deberc #user-cards-in-hand .card-sprite {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin-left: var(--deberc-hand-gap, 6px) !important;
    }

    #table-area.deberc #user-cards-in-hand .card-sprite:first-child {
        margin-left: 0 !important;
    }

    /* Верхняя зона: один игрок и колода. Им не позволяется «плыть» за
       центральным розыгрышем, как это происходило в поточном desktop-макете. */
    #table-area.deberc .game-user__position--deberc2 {
        top: var(--deberc-top-seat);
        transform: translateX(-50%);
    }
    #table-area.deberc .card-deck { top: 116px; right: 14%; }

    /* Центральная зона имеет собственный прямоугольник: четыре карты всегда
       образуют один крест и не зависят от высоты страницы. */
    #table-area.deberc #playing-area {
        position: absolute;
        top: var(--deberc-table-center);
        left: 50%;
        width: 286px;
        height: 220px;
        margin: 0;
        transform: translate(-50%, -50%);
    }

    /* Боковые игроки и их взятки образуют две колонки ниже центра. */
    #table-area.deberc .game-user__position--deberc3 {
        top: var(--deberc-side-seat);
        left: 24px;
        transform: none;
    }
    #table-area.deberc .game-user__position--deberc4 {
        top: var(--deberc-side-seat);
        right: 24px;
        transform: none;
    }
    /* Служебные плашки привязаны к своим зонам, а не к геометрии последней
       взятки в центре — поэтому не перекрывают аватары и карты. */
    #table-area.deberc #deberc-round-status {
        top: var(--deberc-side-trick);
        left: 24px;
        margin: 86px 0 0;
        transform: scale(1.1);
        transform-origin: top left;
    }
    #table-area.deberc #deberc-last-trick {
        /* #playing-area сохраняет базовый отступ 235px для полёта карт.
           Повторяем его здесь, чтобы последняя взятка была именно сбоку от
           игрового креста, а не выше него. */
        top: calc(var(--deberc-table-center) + 235px);
        /* Центр совпадает с #playing-area; 312px — его левый слот и ширина
           компактного блока последней взятки. */
        left: 50%;
        margin: 0 0 0 -312px;
        transform: translateY(-50%) scale(.72);
        transform-origin: left center;
    }
    #table-area.deberc .game-message {
        bottom: var(--deberc-message-bottom) !important;
    }
    #table-area.deberc .deberc-self-hand #game-user__control {
        bottom: calc(var(--deberc-hand-bottom) + 112px) !important;
    }
}

/* Соперники — абсолютно; #position1 (Вы) остаётся в потоке, как в durak. */
.game-user__position--deberc2,
.game-user__position--deberc3,
.game-user__position--deberc4 { position: absolute; text-align: center; z-index: 2; }

.game-user__position--deberc2 { /* Сверху по центру */
    top: 8px; left: 50%; transform: translateX(-50%);
}
.game-user__position--deberc3 { /* Слева */
    top: 52%; left: 2%; transform: translateY(-50%);
}
.game-user__position--deberc4 { /* Справа — ниже колоды, чтобы не наезжать */
    top: 52%; right: 10%; transform: translateY(-50%);
}

/* Сообщения — отдельный интерактивный слой над рукой и картами стола. У нижнего
   игрока старый поток прятал плашку за нижним краем экрана вместе с аватаром.
   Несколько свежих сообщений складываются вверх; любое из них закрывается
   штатным кликом по самой плашке. */
#table-area.deberc [id^="messages"] {
    position: absolute;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: min(230px, calc(100vw - 32px));
    /* Плашки складываются без лимита по числу активных сообщений (JS чистит
       их только по приходу нового серверного пакета). Пачка уведомлений о
       смене козыря/семёрки/белы могла растянуть блок настолько, что он
       закрывал стол. Ограничиваем высоту и уводим лишнее в скролл самого
       блока, а не в стол. */
    max-height: min(45vh, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: none;
}
#table-area.deberc [id^="messages"] .game-user__message {
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    pointer-events: auto;
}
/* Нижний игрок: сообщения остаются рядом с его аватаром. Само место игрока
   поднято выше слоя взятки — не сдвигаем чат в центр стола. */
#table-area.deberc #messages1 {
    bottom: 112px;
    left: calc(50% + 300px);
    align-items: flex-start;
    transform: none;
}
/* Верхний игрок: сообщения идут в свободную область справа от профиля. */
#table-area.deberc #messages2 {
    top: 10px;
    left: calc(100% + 10px);
    align-items: flex-start;
    transform: none;
}
/* Боковые игроки: плашки занимают свободную часть карточки, не центр стола. */
#table-area.deberc #messages3 {
    top: 10px;
    left: 0;
    align-items: flex-start;
}
#table-area.deberc #messages4 {
    top: 10px;
    left: 0;
    right: auto;
    align-items: flex-start;
}

/* Колода для деберца — повыше durak-дефолта и чуть внутрь от края,
   чтобы не обрезалась и карты правого игрока на неё не наезжали. */
#table-area.deberc .card-deck {
    top: 18%; right: 12%; width: 78px; height: 103px;
    transform: rotate(60deg) translateY(-50%) scale(.96);
}

/* Начальная открытая карта лежит под стопкой, центрирована относительно неё
   и выступает снизу настолько, чтобы читались номинал и масть. */
#table-area.deberc #card-deck__trump-card {
    position: absolute; top: -44px; left: 1px;
    margin: 0;
    transform: rotate(0deg);
    z-index: 1;
    box-shadow: 0 6px 16px rgba(0,0,0,.85);
    border-radius: 5px;
}

/* После полной раздачи на четверых «свечка» остаётся лишь памяткой:
   показываем её малым спрайтом и компенсируем поворот блока колоды. */
#table-area.deberc #card-deck__trump-card.deberc-trump-card--small {
    top: -20px; left: 8px;
    transform: rotate(-60deg);
    transform-origin: center;
}

/* Стопка рубашек колоды — насыщенная тень под картами */
#table-area.deberc .card-deck__item {
    transform: rotate(-90deg);
    box-shadow: 0 6px 16px rgba(0,0,0,.75);
    border-radius: 4px;
}

/* Очки + белла + комбинации текущего игрока — одной строкой справа от аватара
   (аватар #position1 стоит на left:53%). pointer-events:none — панель
   информационная и не должна перехватывать клики по картам руки. */
#deberc-self-info {
    position: absolute; left: 53%; margin-left: 115px; bottom: 8px; z-index: 5;
    display: flex; align-items: center; gap: 16px;
    background: rgba(0,0,0,.35); border-radius: 8px;
    padding: 4px 12px;
    pointer-events: none;
    white-space: nowrap;
}
#deberc-self-info .game-user__deberc-points {
    text-align: left; display: flex; align-items: center; gap: 8px; margin: 0;
}
#deberc-self-info .game-user__deberc-points .deberc-points__bela { margin: 0; }
#deberc-self-info .game-user__deberc-combs {
    justify-content: flex-start; transform-origin: center left;
    flex-wrap: nowrap; gap: 16px; margin: 0;
}

/* The sole card queued for preplay in a two-player game. */
#table-area.deberc #user-cards-in-hand .deberc-card--queued {
    box-shadow: 0 0 0 3px rgba(238, 199, 76, .9), 0 0 18px rgba(238, 199, 76, .65);
    border-radius: 5px;
}

/* Таймер хода — строго по центру аватара (box-sizing:border-box: width:60
   уже включает padding, поэтому центрируем transform-ом, а не margin-ом) */
#table-area.deberc .timer {
    top: 116px; left: 50%; margin-left: 0; transform: translateX(-50%);
    box-shadow: 0 1px 3px #000;
}
/* У соперников полоска — сразу под кругом аватара, поверх рубашек карт
   (селектор с #table-area, иначе его перебивает общее правило таймера выше) */
#table-area.deberc .game-user__position--deberc2 .timer,
#table-area.deberc .game-user__position--deberc3 .timer,
#table-area.deberc .game-user__position--deberc4 .timer { top: 84px; z-index: 110; }

/* Статусы привязаны к рамке аватара, а не к ширине веера карт. Щит «Обяз»
   и сменяющая его после торгов масть занимают один нижний левый слот. */
#table-area.deberc .game-user__avatar-badge {
    position: relative;
    display: inline-block;
    vertical-align: top;
}
#table-area.deberc .game-user__avatar-badge .game-user__game-status {
    top: auto;
    right: auto;
    left: -6px;
    bottom: -4px;
}
#table-area.deberc .game-user__avatar-badge .game-user__game-status.boy {
    top: auto;
    bottom: -4px;
}

/* Памятка об обмене семёрки остаётся у сделавшего обмен игрока до конца сдачи. */
#table-area.deberc .deberc-seven-swap {
    position: absolute;
    z-index: 25;
    bottom: calc(100% - 16px);
    left: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    padding: 0px 0;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    color: #ffe580;
    font: inherit;
    font-weight: 700;
    cursor: default;
    pointer-events: auto;
}
#table-area.deberc .deberc-seven-swap__arrow { margin: 0 2px; opacity: .72; }
#table-area.deberc .deberc-seven-swap__arrow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 2px rgba(255, 229, 128, .8);
}
#table-area.deberc .deberc-seven-swap .small-card-sprite {
    margin: 0;
    transform: scale(.55);
    transform-origin: center;
}

/* ===== Карты текущей взятки на столе ===== */
/* Геометрия текущего розыгрыша сохранена: анимации и координаты карт
   рассчитываются именно от #playing-area внутри единой сцены. */
#table-area.deberc #playing-area { position: relative; margin-top: 235px; }
.deberc-stol-card,
.deberc-stol-border {
    position: absolute;
    left: 50%; top: 50%;
    margin: 0;
}
/* Пустой слот меньше карты и центрирован по её месту — легшая сверху карта
   (78x103) перекрывает пунктир целиком, без торчащих краёв */
.deberc-stol-border {
    width: 66px; height: 91px;
    z-index: 0;
    border: 2px dashed rgba(255,255,255,.28);
    border-radius: 6px;
    background: rgba(0,0,0,.12);
    z-index: 0;
}
/* Появление положенной карты */
@keyframes deberc-card-in {
    from { opacity: 0; scale: 1.25; }
    to   { opacity: 1; scale: 1; }
}
.deberc-stol-card--in { animation: deberc-card-in .25s ease-out; }
/* Без своей тени и скругления: у спрайта карты уже есть и то, и другое, а
   CSS-тень поверх давала вокруг карты видимую окантовку */
.deberc-stol-card { z-index: 1; box-shadow: none; }
/* Карта в полёте на стол (как в durak) — поверх стола, блоков «Взятка» и руки */
/* Летящая карта идёт поверх стола и руки. Своей тени нет: она у спрайта уже
   есть, а добавленная сверху всё равно исчезала при приземлении. */
.deberc-stol-card--flying { z-index: 300; }

/* The flight layer stays inside the Debrec scene and never participates in input. */
#table-area.deberc-scene .deberc-card-flight-layer {
    position: absolute;
    inset: 0;
    z-index: 310;
    pointer-events: none;
}

#table-area.deberc-scene .deberc-card-flight-card {
    position: absolute;
    margin: 0;
    z-index: 1;
    pointer-events: none;
    will-change: transform, opacity;
    filter: none !important;
    box-shadow: none !important;
}

#table-area.deberc-scene .deberc-card-flight-card::after {
    content: none;
}

/* Keep the turn indicator out of the paint path used by card flights. */
#table-area.deberc-scene .game-user__img-wrap.game-user__img-active {
    animation: none;
    border-color: #ffd031;
    box-shadow: none;
    will-change: transform;
}

#table-area.deberc-scene .game-user__img-wrap.game-user__img-active::after {
    content: '';
    position: absolute;
    inset: -7px;
    border: 3px solid #ffd031;
    border-radius: inherit;
    pointer-events: none;
    animation: deberc-active-avatar-pulse .6s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes deberc-active-avatar-pulse {
    from { opacity: .35; transform: scale(.96); }
    to { opacity: 1; transform: scale(1.06); }
}

/* Финал взятки: победившая карта обведена по своему контуру. drop-shadow идёт
   по альфа-каналу спрайта, поэтому обводка повторяет скруглённые углы карты —
   прямоугольный outline оставлял на углах пустые зазоры. Четыре смещения дают
   замкнутый контур, пятый — тёплое свечение вокруг. */
.deberc-stol-card--winner {
    z-index: 2;
    filter:
        drop-shadow(2px 0 0 #ffd031) drop-shadow(-2px 0 0 #ffd031)
        drop-shadow(0 2px 0 #ffd031) drop-shadow(0 -2px 0 #ffd031)
        drop-shadow(0 0 10px rgba(255,208,49,.85));
    animation: deberc-winner-in .13s ease-out;
}
/* Обводка проявляется, а не вспыхивает: списки drop-shadow одинаковые,
   меняется только прозрачность цвета — такой filter интерполируется */
@keyframes deberc-winner-in {
    from {
        filter:
            drop-shadow(2px 0 0 rgba(255,208,49,0)) drop-shadow(-2px 0 0 rgba(255,208,49,0))
            drop-shadow(0 2px 0 rgba(255,208,49,0)) drop-shadow(0 -2px 0 rgba(255,208,49,0))
            drop-shadow(0 0 10px rgba(255,208,49,0));
    }
}
/* …затем вся взятка улетает в блок "Взятка" взявшего. Точка прилёта задаётся
   из JS свойствами translate/scale по фактическим координатам блока. */
.deberc-stol-fly {
    transition:
        translate var(--deberc-trick-flight-duration, .2s) ease-in,
        scale var(--deberc-trick-flight-duration, .2s) ease-in,
        opacity var(--deberc-trick-flight-duration, .2s) ease-in;
    opacity: 0;
}
/* Раскладка крестом относительно центра #playing-area */
.deberc-stol-card--b { transform: translate(-50%, 6px); }      /* Вы (низ)   */
.deberc-stol-card--t { transform: translate(-50%, -108px); }   /* Сверху     */
.deberc-stol-card--l { transform: translate(-128px, -50px); }  /* Слева      */
.deberc-stol-card--r { transform: translate(48px, -50px); }    /* Справа     */
/* Слоты сдвинуты на половину разницы размеров (6px по обеим осям), чтобы их
   центры совпали с центрами карт из правил выше */
.deberc-stol-border.deberc-stol-card--b { transform: translate(-50%, 12px); }
.deberc-stol-border.deberc-stol-card--t { transform: translate(-50%, -102px); }
.deberc-stol-border.deberc-stol-card--l { transform: translate(-122px, -44px); }
.deberc-stol-border.deberc-stol-card--r { transform: translate(54px, -44px); }

/* Вторая открывающаяся карта заменяет верхнюю рубашку стопки. Она находится
   внутри .card-deck, поэтому сохраняет точное совмещение при любом масштабе. */
#table-area.deberc #deberc-vskryshka {
    position: absolute; top: -118px; left: 1px; z-index: 4;
    width: 78px; height: 103px;
    margin: 0; padding: 0; background: none;
    transform: rotate(-90deg); transform-origin: center;
}
#table-area.deberc #deberc-vskryshka .card-sprite {
    position: relative;
    border-radius: 5px;
}

/* Бадж количества карт в колоде скрыт в Деберце. */
#table-area.deberc #card-deck__with-cards .card-deck__back-counter { display: none; }

/* ===== Плашки "Взятка" =====
   Общий стиль для обоих блоков: тёмное стекло в золотой рамке с водяным знаком
   лаврового венка (две половинки olive-left/right.svg).
   #deberc-last-trick  — один на всех, слева от слотов стола: карты последней
                         взятки крестом, сторона карты = место её игрока.
   .deberc-trick-zone  — компактный блок возле каждого игрока: точка прилёта
                         карт, стопка забранных взяток и очки текущей сдачи. */
.deberc-trick-zone,
#deberc-last-trick {
    position: absolute; z-index: 1;
    min-width: 92px; min-height: 62px;
    padding: 20px 12px 6px;
    border: 1px solid rgba(255,208,49,.38);
    border-radius: 16px;
    text-align: center;
    /* лёгкое затемнение сукна под плашкой + мягкий внутренний блик сверху */
    background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(0,0,0,.16) 45%, rgba(0,0,0,.30) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 1px 5px rgba(0,0,0,.18);
}
/* Лавровый венок — фон-водяной знак. Отдельный слой, чтобы задать ему
   собственную прозрачность (у background-image её нет), и z-index:-1, чтобы
   венок лежал под картами взятки, а не поверх них: у блока свой контекст
   наложения (position+z-index), поэтому отрицательный z-index не проваливает
   слой ниже фона родителя. */
.deberc-trick-zone::before,
#deberc-last-trick::before {
    content: '';
    position: absolute; z-index: -1;
    inset: 3px;
    pointer-events: none;
    opacity: .18;
    background-image:
        url(/img/main/flat/game_redesign/olive-left.svg),
        url(/img/main/flat/game_redesign/olive-right.svg);
    background-repeat: no-repeat, no-repeat;
    /* половинки венка прижаты к боковым краям и растянуты на всю высоту плашки */
    background-position: left center, right center;
    background-size: auto 100%, auto 100%;
    /* кверху венок растворяется — верхушки веток не спорят с заголовком */
    mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 40%, #000 85%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 40%, #000 85%);
}
/* Заполненный блок — рамка ярче, добавляется тёплое свечение «награды» */
.deberc-trick-zone--filled,
#deberc-last-trick {
    border-color: rgba(255,208,49,.55);
    background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.26) 45%, rgba(0,0,0,.42) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 0 4px rgba(255,208,49,.06),
        0 1px 5px rgba(0,0,0,.22);
}
.deberc-trick-zone--filled::before,
#deberc-last-trick::before { opacity: .24; }

/* A zone background must be dimmable without dimming its score or cards.
   Keep the decorative surface in its own layer and paint the game content
   above it. */
.deberc-trick-zone {
    --deberc-trick-zone-surface: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(0,0,0,.16) 45%, rgba(0,0,0,.30) 100%);
    --deberc-trick-zone-surface-opacity: 1;
    --deberc-trick-zone-laurel-opacity: .18;
    --deberc-trick-zone-border-opacity: .14;
    isolation: isolate;
    background: none;
    border-color: rgb(255 208 49 / var(--deberc-trick-zone-border-opacity));
}
.deberc-trick-zone.deberc-trick-zone--filled {
    --deberc-trick-zone-surface: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.26) 45%, rgba(0,0,0,.42) 100%);
    --deberc-trick-zone-laurel-opacity: .24;
    --deberc-trick-zone-border-opacity: .18;
}
.deberc-trick-zone::before {
    z-index: 1;
    opacity: var(--deberc-trick-zone-laurel-opacity);
}
.deberc-trick-zone::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    opacity: var(--deberc-trick-zone-surface-opacity);
    background: var(--deberc-trick-zone-surface);
    pointer-events: none;
}
.deberc-trick-zone > * { z-index: 2; }
.deberc-trick-zone__points,
.deberc-trick-zone__stack,
.deberc-trick-zone__stack .deberc-trick-zone__back,
.deberc-trick-zone .deberc-seven-swap {
    opacity: 1 !important;
}
.deberc-trick-zone__title {
    position: absolute; top: 6px; left: 10px; right: 10px;
    color: rgba(255,233,168,.55); font: 600 9px/10px sans-serif;
    letter-spacing: .12em; text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
/* ===== Общий блок последней взятки: карты крестом ===== */
/* Блок стоит слева от слотов стола (левый слот — на -128px от центра). */
/* padding-top больше базового: сверху над крестом должно поместиться и
   название, и стрелка верхнего игрока */
#deberc-last-trick {
    /* по вертикали — по центру группы слотов стола (слоты идут от -108 до +109
       относительно центра #playing-area), по горизонтали — слева от левого слота */
    top: 50%; margin-top: -177px; left: 50%; margin-left: -312px;
    padding: 32px 16px 14px;
}

/* Роль сдачи вынесена из блока последней взятки: на торгах взяток ещё нет,
   а обяз должен оставаться видимым. После заказа в ту же строку добавляется
   масть на светлой плашке, повторяющей материал бейджа у аватара. */
#deberc-round-status {
    position: absolute; z-index: 3;
    top: 50%; left: 50%; margin-top: 92px; margin-left: -312px;
    display: none; align-items: center; gap: 4px;
    min-height: 28px; box-sizing: border-box; padding: 4px 8px;
    border: 1px solid rgba(255,255,255,.38); border-radius: 14px;
    --deberc-round-status-bg: linear-gradient(145deg, rgba(255,253,244,.94), rgba(233,228,213,.88) 62%, rgba(200,191,170,.88));
    background: var(--deberc-round-status-bg);
    box-shadow: 0 2px 2px rgba(255,255,255,.6) inset, 0 -2px 4px rgba(117,99,68,.18) inset,
                0 3px 7px rgba(0,0,0,.35);
    color: #3d3124; font: 600 14px/18px sans-serif; text-shadow: 0 1px rgba(255,255,255,.48);
    white-space: nowrap;
    transform: scale(1.1);
    transform-origin: center left;
}
/* Обяз/играет относится к состоянию колоды, поэтому располагается над ней и
   компенсирует поворот её группы: текст остаётся горизонтальным. */
#table-area.deberc .deberc-deck-group #deberc-round-status {
    top: -36%;
    right: auto;
    bottom: auto;
    left: -64%;
    margin: 0;
    transform: translateX(-50%) rotate(-60deg);
    transform-origin: bottom center;
    white-space: nowrap;
}
.deberc-round-status__label { color: #79634a; }
.deberc-round-status__name { color: #2d241b; font-weight: 700; }
#deberc-round-status.deberc-round-status--playing {
    min-height: 28px;
    box-sizing: content-box;
    padding: 4px 58px 4px 8px;
    gap: 4px;
    border-radius: 14px;
    overflow: visible;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    max-width: min(250px, 36vw) !important;
    isolation: isolate;
}
#deberc-round-status.deberc-round-status--playing::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -27px;
    left: -1px;
    height: 57px;
    background: rgba(255,255,255,.82);
    filter: drop-shadow(0 4px 8px rgba(25,18,11,.58));
    transform: translateY(-50%);
    -webkit-mask:
        radial-gradient(circle 15px at 15px 50%, #000 98%, transparent 100%),
        linear-gradient(#000 0 0) 15px 50% / calc(100% - 44px) 30px no-repeat,
        radial-gradient(circle 28.5px at calc(100% - 28.5px) 50%, #000 98%, transparent 100%);
    mask:
        radial-gradient(circle 15px at 15px 50%, #000 98%, transparent 100%),
        linear-gradient(#000 0 0) 15px 50% / calc(100% - 44px) 30px no-repeat,
        radial-gradient(circle 28.5px at calc(100% - 28.5px) 50%, #000 98%, transparent 100%);
}
#deberc-round-status.deberc-round-status--playing::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -26px;
    left: 0;
    height: 55px;
    background: var(--deberc-round-status-bg);
    box-shadow: 0 1px 0 rgba(255,255,255,.72) inset, 0 -2px 4px rgba(117,99,68,.18) inset;
    transform: translateY(-50%);
    -webkit-mask:
        radial-gradient(circle 14px at 14px 50%, #000 98%, transparent 100%),
        linear-gradient(#000 0 0) 14px 50% / calc(100% - 41.5px) 28px no-repeat,
        radial-gradient(circle 27.5px at calc(100% - 27.5px) 50%, #000 98%, transparent 100%);
    mask:
        radial-gradient(circle 14px at 14px 50%, #000 98%, transparent 100%),
        linear-gradient(#000 0 0) 14px 50% / calc(100% - 41.5px) 28px no-repeat,
        radial-gradient(circle 27.5px at calc(100% - 27.5px) 50%, #000 98%, transparent 100%);
}
#deberc-round-status.deberc-round-status--playing > * { position: relative; z-index: 1; }
#deberc-round-status.deberc-round-status--playing .deberc-round-status__label { flex: 0 0 auto; }
#deberc-round-status.deberc-round-status--playing .deberc-round-status__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#deberc-round-status .deberc-round-status__suit {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: -26px;
    display: grid; flex: 0 0 55px; place-items: center; width: 55px; height: 55px;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translateY(-50%);
}
#deberc-round-status .deberc-round-status__suit::before {
    content: ''; display: block; width: 41px; height: 41px;
    background: url(/img/main/flat/game_redesign/card-suits-gradient@3x.png) 0 0 / 164px 41px no-repeat;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));
}
#deberc-round-status .deberc-round-status__suit.card-deck__trump-mast1::before { transform: translateY(3px); }
#deberc-round-status .deberc-round-status__suit.card-deck__trump-mast2::before { background-position: -41px 0; }
#deberc-round-status .deberc-round-status__suit.card-deck__trump-mast3::before { background-position: -82px 0; }
#deberc-round-status .deberc-round-status__suit.card-deck__trump-mast4::before { background-position: -123px 0; }

/* Крест: каждая карта абсолютна, её сторона и есть место игрока за столом.
   small-card-sprite 41x54 — половины 20.5 / 27 центрируют карту по оси. */
.deberc-last-trick__cross { position: relative; width: 128px; height: 150px; }
/* Перекладка взятки: прежние карты быстро гаснут, новые проявляются.
   Два состояния вместо одной анимации — между ними JS подменяет разметку. */
.deberc-last-trick__cross--out {
    opacity: 0; scale: .94;
    transition:
        opacity var(--deberc-last-trick-transition-duration, .2s) ease-in,
        scale var(--deberc-last-trick-transition-duration, .2s) ease-in;
}
.deberc-last-trick__cross--in {
    animation: deberc-trick-in var(--deberc-last-trick-transition-duration, .2s) ease-out;
}
@keyframes deberc-trick-in {
    from { opacity: 0; scale: 1.06; }
    to   { opacity: 1; scale: 1; }
}
.deberc-last-trick__card { position: absolute; margin: 0; }
.deberc-last-trick__card--t { top: 0;    left: 50%; margin-left: -20.5px; }
.deberc-last-trick__card--b { bottom: 0; left: 50%; margin-left: -20.5px; }
.deberc-last-trick__card--l { left: 0;   top: 50%;  margin-top: -27px; }
.deberc-last-trick__card--r { right: 0;  top: 50%;  margin-top: -27px; }
/* Карта взявшего: та же обводка по контуру спрайта, что и на столе */
.deberc-last-trick__card--winner {
    z-index: 2;
    filter:
        drop-shadow(2px 0 0 #ffd031) drop-shadow(-2px 0 0 #ffd031)
        drop-shadow(0 2px 0 #ffd031) drop-shadow(0 -2px 0 #ffd031)
        drop-shadow(0 0 8px rgba(255,208,49,.85));
}
/* Стрелки к своим сторонам — подсказка «чья карта где» */
.deberc-last-trick__arrow {
    position: absolute; width: 0; height: 0;
    opacity: .55;
}
.deberc-last-trick__arrow--t {
    top: -13px; left: 50%; margin-left: -5px;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 7px solid #ffe9a8;
}
.deberc-last-trick__arrow--b {
    bottom: -13px; left: 50%; margin-left: -5px;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 7px solid #ffe9a8;
}
.deberc-last-trick__arrow--l {
    left: -13px; top: 50%; margin-top: -5px;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-right: 7px solid #ffe9a8;
}
.deberc-last-trick__arrow--r {
    right: -13px; top: 50%; margin-top: -5px;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-left: 7px solid #ffe9a8;
}

/* ===== Компактный блок игрока: очки сдачи + стопка забранных взяток ===== */
/* Плашка игрока вдвое ниже общей: очки уезжают под самый верх отдельной
   строкой, а стопка карт ужимается сильнее */
.deberc-trick-zone { min-height: 44px; padding: 18px 10px 4px; }
.deberc-trick-zone__points {
    position: absolute; z-index: 10; top: -2px; left: 0; right: 0;
    color: #9be29b; font: 700 20px/22px sans-serif;
    text-shadow: 1px 1px 2px #000;
}
/* Стопка забранных карт: рубашки свалены в кучу со случайным сдвигом и
   поворотом (transform каждой карте задаёт JS), общий scale ужимает пачку */
.deberc-trick-zone__stack {
    position: relative;
    /* height — уже с учётом scale: transform не сжимает занимаемое место,
       а плашка должна быть вдвое ниже прежней */
    height: 30px;
    transform: scale(.46); transform-origin: top center;
}
/* Прилетевшие карты «врезаются» в стопку: короткий толчок вместо появления
   из ниоткуда (scale отдельным свойством складывается с scale в transform) */
.deberc-trick-zone__stack--bump { animation: deberc-stack-bump .28s ease-out; }
@keyframes deberc-stack-bump {
    0%   { scale: 1; }
    30%  { scale: 1.22; }
    60%  { scale: .95; }
    100% { scale: 1; }
}
.deberc-trick-zone__back {
    position: absolute; left: 50%; top: 7px;
    margin-left: -20px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.55);
}

/* ===== Кластеры мест =====
   Взятки не являются самостоятельными объектами сцены: они живут внутри места
   конкретного игрока. Поэтому при смене координат/масштаба игрока его профиль,
   комбинации, смена семёрки и стопка взяток переезжают вместе. */
.deberc-seat--self,
.deberc-self-hand {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.deberc-seat--self > *,
.deberc-self-hand > * { pointer-events: auto; }

/* Верхний игрок: взятки, включая резерв под замену семёрки, занимают свободный
   правый верхний сектор и не спорят с текущим розыгрышем в центре. */
#table-area.deberc #position2 #deberc-trick2 {
    top: 108px;
    left: calc(100% + 48px);
    right: auto;
    bottom: auto;
    margin: 0;
    transform: none;
    transform-origin: top left;
}
/* Боковые игроки: профиль/карты → комбинации → резерв семёрки → взятки.
   В альбоме резерв компактный, на высоком портрете растёт вместе с высотой. */
#table-area.deberc #position3 #deberc-trick3,
#table-area.deberc #position4 #deberc-trick4 {
    top: clamp(164px, calc(19vh - 25px), 275px);
    left: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: translateX(-50%);
    transform-origin: top center;
}
/* У себя взятки относятся к профилю/очкам, а не к руке с личными картами. */
#table-area.deberc .deberc-seat--self #deberc-trick1 {
    top: auto;
    right: 24px;
    bottom: 110px;
    left: auto;
    margin: 0;
    transform-origin: bottom right;
}

/* ===== Комбинации игроков ===== */
.game-user__deberc-combs {
    margin-top: 4px;
    min-height: 1px;
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
    transform: scale(.82); transform-origin: top center;
}

.deberc-comb {
    display: inline-flex; align-items: center;
    padding: 5px 8px; border-radius: 8px;
    background: rgba(0,0,0,.3);
}
.deberc-comb .small-card-sprite { margin-left: -16px; }
.deberc-comb .small-card-sprite:first-child { margin-left: 0; }
.deberc-comb--off { opacity: .68; }
.deberc-comb--hidden { flex-direction: column; gap: 3px; }
.deberc-comb__hidden-label {
    display: flex; align-items: baseline; justify-content: center; gap: 5px;
    color: #fff; font: 700 13px/17px sans-serif; text-shadow: 0 1px 2px #000;
}
.deberc-comb__hidden-high { color: #ffe06a; font-size: 15px; }
.deberc-comb__hidden-cards { display: flex; align-self: center; padding: 0; }
.deberc-comb__hidden-card { position: relative; display: inline-block; margin-left: -32px; }
.deberc-comb__hidden-card:first-child { margin-left: 0; }

/* ===== Очки / байды / белла ===== */
.game-user__deberc-points {
    color: #fff; font: 600 14px/18px sans-serif;
    text-shadow: 1px 1px 2px #000; margin: 2px 0;
}
.deberc-points__total { font-size: 17px; color: #ffe98a; }
.deberc-points__add   { color: #9be29b; }
.deberc-points__lbl   { opacity: .7; font-weight: 400; }
.deberc-points__bayt  { color: #ff9b9b; margin-left: 4px; }
/* Белла QK — отдельной строкой под очками, крупнее (≈x1.5) и с нахлёстом 50% (41px/2) */
.deberc-points__bela  { display: flex; margin-top: 4px; transform: scale(.9); transform-origin: left top; }
.deberc-points__bela .small-card-sprite { margin-left: -20px; }
.deberc-points__bela .small-card-sprite:first-child { margin-left: 0; }

/* ===== Поле выбора козыря ===== */
#deberc-trump-select {
    position: absolute; top: auto; bottom: calc(42% + 30px); left: 50%; transform: translateX(-50%);
    min-width: 520px; max-width: min(680px, calc(100% - 32px));
    padding: 16px 30px 18px; text-align: center; z-index: 200; isolation: isolate;
    border: 1px solid rgba(255,255,255,.82); border-radius: 28px;
    background-color: #f8f0e3;
    background-image: url(/img/main/flat/game_redesign/modal-background.jpg);
    background-repeat: repeat;
    background-position: 0 0;
    box-shadow: 0 2px 1px rgba(255,255,255,.9) inset, 0 -2px 4px rgba(111,93,63,.18) inset,
                0 18px 36px rgba(18,22,19,.34), 0 5px 10px rgba(18,22,19,.18);
    backdrop-filter: blur(6px) saturate(1.04);
}
#deberc-trump-select::before {
    content: ''; position: absolute; inset: 7px; pointer-events: none;
    border: 1px solid rgba(130,112,79,.16); border-radius: 21px;
}
#deberc-trump-select .deberc-trump-select__title {
    margin: 0 auto 13px; padding: 0;
    color: #40392f; font: 800 28px/1.12 var(--game-font, sans-serif);
    letter-spacing: -.025em; text-shadow: 0 1px 0 #fff, 0 2px 3px rgba(76,63,43,.18);
}
#deberc-trump-select .deberc-trump-select__obligation {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    margin-top: 8px; color: #5d5344; font: 700 12px/1 var(--game-font, sans-serif);
}
#deberc-trump-select .deberc-trump-select__obligation-label {
    display: inline-flex; align-items: center;
    color: #76654a; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
#deberc-trump-select .deberc-trump-select__obligation-pointer,
#deberc-round-status .deberc-trump-select__obligation-pointer,
#deberc-open-card-rule .deberc-trump-select__obligation-pointer {
    position: relative; display: inline-block; flex: 0 0 26px; width: 26px; height: 26px;
    --deberc-pointer-turn: 0deg;
    background: #88754d;
    -webkit-mask: url(/img/main/flat/game_redesign/deberc-obligation-pointer.svg) center / contain no-repeat;
    mask: url(/img/main/flat/game_redesign/deberc-obligation-pointer.svg) center / contain no-repeat;
    transform: rotate(var(--deberc-pointer-turn));
    filter: drop-shadow(0 1px 2px rgba(70, 51, 20, .38)) drop-shadow(0 3px 4px rgba(70, 51, 20, .12));
}
#table-area.deberc-bidding #deberc-trump-select .deberc-trump-select__obligation-pointer::after,
#table-area.deberc-bidding #deberc-round-status .deberc-trump-select__obligation-pointer::after,
#table-area.deberc-bidding #deberc-open-card-rule .deberc-trump-select__obligation-pointer::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 42%, rgba(255, 241, 171, .55) 47%, #fff6c8 50%, rgba(255, 224, 114, .62) 53%, transparent 58%) 0 50% / 200% 100% no-repeat;
    -webkit-mask: url(/img/main/flat/game_redesign/deberc-obligation-pointer.svg) center / contain no-repeat;
    mask: url(/img/main/flat/game_redesign/deberc-obligation-pointer.svg) center / contain no-repeat;
    animation: deberc-obligation-pointer-beam 2.6s ease-in-out infinite;
}
#deberc-trump-select .deberc-trump-select__obligation-pointer--position1,
#deberc-round-status .deberc-trump-select__obligation-pointer--position1,
#deberc-open-card-rule .deberc-trump-select__obligation-pointer--position1 { --deberc-pointer-turn: -90deg; }
#deberc-trump-select .deberc-trump-select__obligation-pointer--position2,
#deberc-round-status .deberc-trump-select__obligation-pointer--position2,
#deberc-open-card-rule .deberc-trump-select__obligation-pointer--position2 { --deberc-pointer-turn: 90deg; }
#deberc-trump-select .deberc-trump-select__obligation-pointer--position4,
#deberc-round-status .deberc-trump-select__obligation-pointer--position4,
#deberc-open-card-rule .deberc-trump-select__obligation-pointer--position4 { --deberc-pointer-turn: 180deg; }
#deberc-round-status .deberc-round-status__pointer {
    flex-basis: 18px; width: 18px; height: 18px; margin-left: 2px;
}
@keyframes deberc-obligation-pointer-beam {
    0%, 42% { opacity: 0; background-position: 0 50%; }
    47% { opacity: 1; }
    72% { opacity: 1; background-position: 100% 50%; }
    77%, 100% { opacity: 0; background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    #table-area.deberc-bidding #deberc-trump-select .deberc-trump-select__obligation-pointer::after,
    #table-area.deberc-bidding #deberc-round-status .deberc-trump-select__obligation-pointer::after,
    #table-area.deberc-bidding #deberc-open-card-rule .deberc-trump-select__obligation-pointer::after { animation: none; display: none; }
}
#deberc-trump-select .deberc-trump-select__obligation-label--self {
    padding: 2px 4px; border-radius: 4px; color: #4b3512;
    background: #f2c95b; box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 1px 2px rgba(71,50,16,.18);
}
#deberc-trump-select .deberc-trump-select__masts {
    display: flex; justify-content: center; align-items: center; gap: 18px;
}
#deberc-trump-select .deberc-trump-mast {
    --suit-light: #ff6670; --suit-dark: #c70d2e; --suit-glow: rgba(242,42,66,.34);
    position: relative; display: grid; place-items: center; flex: 0 0 100px;
    width: 100px; height: 100px; margin: 0; border-radius: 50%; cursor: pointer;
    border: 2px solid rgba(255,255,255,.88);
    background:
        radial-gradient(circle at 38% 28%, rgba(255,255,255,.98), transparent 29%),
        linear-gradient(145deg, #fffdf4, #e9e4d5 62%, #c8bfaa);
    box-shadow:
        0 4px 7px rgba(255,255,255,.95) inset,
        0 -10px 18px rgba(117,99,68,.22) inset,
        0 0 0 3px rgba(122,105,75,.16),
        0 11px 18px rgba(65,55,39,.28), 0 20px 30px rgba(65,55,39,.12);
    outline: 0; transform: translateY(0); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#deberc-trump-select .deberc-trump-mast::before {
    content: ''; position: absolute; inset: 9px; border-radius: inherit;
    border: 1px solid rgba(255,255,255,.1); box-shadow: 0 0 18px var(--suit-glow) inset;
}
#deberc-trump-select .deberc-trump-mast__art {
    display: block; width: 70px; height: 70px;
    background: url(/img/main/flat/game_redesign/card-suits-gradient@3x.png) 0 0 / 280px 70px no-repeat;
    filter: drop-shadow(0 4px 3px rgba(0,0,0,.46));
    transition: transform .18s ease, filter .18s ease;
}
#deberc-trump-select .deberc-trump-mast--1 .deberc-trump-mast__art { transform: translateY(3px); }
#deberc-trump-select .deberc-trump-mast--2 .deberc-trump-mast__art { background-position: -70px 0; }
#deberc-trump-select .deberc-trump-mast--3 { --suit-light: #565856; --suit-dark: #171817; --suit-glow: rgba(70,72,70,.28); }
#deberc-trump-select .deberc-trump-mast--3 .deberc-trump-mast__art { background-position: -140px 0; }
#deberc-trump-select .deberc-trump-mast--4 { --suit-light: #535453; --suit-dark: #121312; --suit-glow: rgba(65,66,65,.28); }
#deberc-trump-select .deberc-trump-mast--4 .deberc-trump-mast__art { background-position: -210px 0; }
#deberc-trump-select .deberc-trump-mast:hover,
#deberc-trump-select .deberc-trump-mast:focus-visible {
    transform: translateY(-5px); border-color: rgba(255,255,255,.98);
    box-shadow: 0 5px 8px rgba(255,255,255,.98) inset, 0 -9px 17px rgba(117,99,68,.2) inset,
                0 0 0 5px rgba(230,181,85,.34), 0 0 22px var(--suit-glow), 0 17px 25px rgba(65,55,39,.34);
}
#deberc-trump-select .deberc-trump-mast:hover .deberc-trump-mast__art,
#deberc-trump-select .deberc-trump-mast:focus-visible .deberc-trump-mast__art {
    transform: scale(1.07); filter: drop-shadow(0 5px 4px rgba(0,0,0,.52)) drop-shadow(0 0 10px var(--suit-glow));
}
#deberc-trump-select .deberc-trump-mast--1:hover .deberc-trump-mast__art,
#deberc-trump-select .deberc-trump-mast--1:focus-visible .deberc-trump-mast__art { transform: translateY(3px) scale(1.07); }
#deberc-trump-select .deberc-trump-mast:active { transform: translateY(-1px) scale(.98); }
#deberc-trump-select .deberc-trump-select__actions { display: flex; justify-content: center; margin-top: 13px; }
#deberc-trump-select .deberc-trump-pass {
    position: relative !important; inset: auto !important; left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important; display: inline-flex; align-items: center; justify-content: center;
    min-width: 270px; min-height: 48px; margin: 0 !important; padding: 9px 42px 11px;
    border: 1px solid #81734c; border-radius: 14px;
    background: linear-gradient(#81794f, #5e593d);
    box-shadow: 0 2px 1px rgba(255,255,255,.28) inset, 0 -2px 3px rgba(42,39,25,.28) inset, 0 7px 12px rgba(55,48,31,.3);
    color: #fff; font: 800 21px/1 var(--game-font, sans-serif); text-shadow: 0 2px 2px rgba(42,39,25,.7);
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
#deberc-trump-select .deberc-trump-pass:hover,
#deberc-trump-select .deberc-trump-pass:focus-visible {
    color: #fff; transform: translateY(-2px);
    border-color: #5a5237; background: linear-gradient(#756d48, #504c35);
    box-shadow: 0 0 0 4px rgba(230,181,85,.3), 0 10px 18px rgba(55,48,31,.34);
}
#table-area.deberc.deberc-trump-select-open .game-message { display: none; }


/* ===== Кнопки управления =====
   Кнопки принадлежат группе руки, а не аватару. Это исключает старое правило
   «±170px от фото», из-за которого они пересекались с чужими местами. */
#table-area.deberc .deberc-self-hand #game-user__control {
    position: absolute;
    z-index: 30;
    bottom: 252px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: max-content;
    max-width: calc(100% - 24px);
    transform: translateX(-50%);
}
#table-area.deberc .deberc-self-hand #game-user__control .game-button {
    position: static;
    z-index: 30;
    margin: 0;
}

/* ===== Таблица результатов всех сдач ===== */
/* Светлая модалка (как result/winner popup в редизайне), поверх оверлея #black (z-index 4).
   !important — перебиваем inline-фон, который games2.js навешивает на #score_table. */
.deberc-score-table {
    display: none;
    position: fixed; z-index: 1500; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* Прокручивается тело (.deberc-score-table__body), а не сама модалка:
       иначе прогресс-бар с bottom:0 уезжал вместе с содержимым и стоял выше
       нижнего края окна. */
    width: 92%; max-width: 640px; max-height: 80vh; overflow: hidden;
    background: linear-gradient(rgba(255,255,255,0.35), rgba(0,0,0,0.12)),
                #f8f0e3 url(/img/main/flat/game_redesign/modal-background.jpg) repeat 0 0 !important;
    border: none; border-radius: 10px; padding: 18px;
    color: #222; text-shadow: 0 1px 1px #fff; box-shadow: 0 0 24px rgba(0,0,0,0.8);
}
.deberc-score-table__close {
    position: absolute; top: 6px; right: 10px;
    width: 30px; height: 30px; line-height: 28px; text-align: center;
    color: #222 !important; font-size: 24px; border-radius: 50%;
    text-decoration: none !important; transition: background .12s, color .12s;
}
.deberc-score-table__close:hover { background: #d33; color: #fff !important; text-shadow: none; }
/* 36px — вертикальный padding модалки (18px сверху и снизу). */
.deberc-score-table__body { overflow: auto; max-height: calc(80vh - 36px); }
.deberc-score-table__title { text-align: center; font: 600 18px sans-serif; margin-bottom: 12px; color: #222; }
.deberc-score-table__grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.deberc-score-table__grid th,
.deberc-score-table__grid td { border: 1px solid #c9bfa6; padding: 5px 7px; text-align: center; }
.deberc-score-table__grid tbody tr:nth-child(even) td { background: rgba(0,0,0,0.05); }
.deberc-score-table__grid tbody tr:hover td { background: rgba(255,193,49,0.45); } /* видимый ховер строки */
/* Выигравший сдачу / лидер по сумме */
.deberc-score-table__grid td.deberc-score-table__win {
    background: rgba(122, 190, 80, 0.28);
    font-weight: 700; color: #205a20;
}
.deberc-score-table__grid tfoot td.deberc-score-table__win { background: #cde3ae; }
.deberc-score-table__legend {
    margin-top: 10px; text-align: center;
    font: 400 12px sans-serif; color: #6b5f47;
}
.deberc-score-table__progress {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 4px; overflow: hidden;
    border-radius: 0 0 10px 10px;
    background: rgba(73, 51, 24, .18);
    pointer-events: none;
}
.deberc-score-table__progress span {
    display: block; width: 100%; height: 100%;
    transform: scaleX(1); transform-origin: left center;
    background: #d39a20;
}
.deberc-score-table__progress.is-running span {
    transform: scaleX(0);
    transition: transform 5s linear;
}
/* Последняя взятка внутри модалки повторяет расклад карт на столе, но плотнее.
   Подпись стоит слева от креста, а не над ним: так блок занимает меньше высоты
   и не отодвигает таблицу вверх. */
.deberc-score-table__last-trick {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: -4px;
}
.deberc-score-table__last-trick-label {
    color: #6b5f47;
    font: 700 12px/1.2 sans-serif;
}
.deberc-score-table__last-trick-cross {
    position: relative;
    width: 76px;
    /* Ровно две высоты малой карты (36.7px после scale(.68)): верхняя и нижняя
       карты стоят вплотную друг к другу, без прежнего зазора. */
    height: 74px;
}
.deberc-score-table__last-trick-card {
    position: absolute;
    margin: 0;
    transform: scale(.68);
}
.deberc-score-table__last-trick-card--t { top: -9px; left: 50%; margin-left: -20.5px; }
.deberc-score-table__last-trick-card--b { bottom: -9px; left: 50%; margin-left: -20.5px; }
.deberc-score-table__last-trick-card--l { left: -7px; top: 50%; margin-top: -27px; }
.deberc-score-table__last-trick-card--r { right: -7px; top: 50%; margin-top: -27px; }
.deberc-score-table__last-trick-card--winner {
    z-index: 2;
    filter:
        drop-shadow(2px 0 0 #d39a20) drop-shadow(-2px 0 0 #d39a20)
        drop-shadow(0 2px 0 #d39a20) drop-shadow(0 -2px 0 #d39a20)
        drop-shadow(0 0 5px rgba(211,154,32,.72));
}
/* Шапка и итог не уезжают при внутренней прокрутке длинной партии */
/* Скроллит теперь .deberc-score-table__body без собственного padding,
   поэтому липкие края считаются от нуля, а не от -18px модалки. */
.deberc-score-table__grid thead th { background: #e3d6b8; position: sticky; top: 0; }
.deberc-score-table__grid tfoot td { background: #e3d6b8; font-weight: 700; position: sticky; bottom: 0; }

/* VIP / награда (game-avatar-mark) — в правый верхний угол кружка аватара.
   По умолчанию маркер позиционируется от широкого .game-user__avatar (right:15/50px)
   и висит «в стороне»; кружок же центрирован в avatar (left:50% = его центр), поэтому
   сажаем маркер на угол окружности от центра кружка. */
#table-area.deberc .game-user__game-avatar-mark {
    top: -2px;
    left: calc(50% + 14px);
    right: auto;
}
#table-area.deberc .game-user__game-avatar-mark img { display: block; width: 100%; height: 100%; }

/* После торгов масть заменяет щит «Обяз» в том же нижнем левом слоте.
   Это чистая иконка без рамки, плашки и круглого фона. */
#table-area.deberc .deberc-trump-owner-mark {
    position: absolute;
    z-index: 8;
    top: auto;
    bottom: -1px;
    left: -2px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 50%;
    background: linear-gradient(145deg, #fffdf4, #e9e4d5 62%, #c8bfaa);
    box-shadow: 0 2px 2px rgba(255,255,255,.85) inset, 0 -3px 5px rgba(117,99,68,.2) inset,
                0 0 0 1px rgba(122,105,75,.18), 0 3px 6px rgba(0,0,0,.38);
    pointer-events: none;
    overflow: visible;
}
#table-area.deberc .deberc-trump-owner-mark > span {
    display: block; width: 22px; height: 22px; margin: 3px;
    border: 0; border-radius: 0; box-shadow: none;
    background: url(/img/main/flat/game_redesign/card-suits-gradient@3x.png) 0 0 / 88px 22px no-repeat;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
#table-area.deberc .deberc-trump-owner-mark > .card-deck__trump-mast1 { transform: translateY(2px); }
#table-area.deberc .deberc-trump-owner-mark > .card-deck__trump-mast2 { background-position: -22px 0; }
#table-area.deberc .deberc-trump-owner-mark > .card-deck__trump-mast3 { background-position: -44px 0; }
#table-area.deberc .deberc-trump-owner-mark > .card-deck__trump-mast4 { background-position: -66px 0; }

/* На десктопе рука закреплена у нижнего игрока и не участвует в потоке
   центральной зоны торгов/взятки. Временная панель не должна поднимать карты. */
@media screen and (min-width: 821px) {
    #table-area.deberc #user-cards-in-hand {
        position: absolute; left: 50%; bottom: 132px; width: 750px; margin: 0;
        transform: translateX(-50%);
    }
    #table-area.deberc #position1 {
        position: absolute; left: 50%; bottom: -40px; width: 200px; margin: 0;
        transform: translateX(-50%); z-index: 50;
    }
    /* У зрителя position1 — это нижний участник с рубашками карт под аватаром.
       Обычный отрицательный bottom рассчитан на собственную руку в отдельном
       #user-cards-in-hand и обрезает эти рубашки у frameless-стола OnlineIgry. */
    body.show-game #table-area.deberc #position1 {
        bottom: max(8px, env(safe-area-inset-bottom));
    }
    #table-area.deberc #deberc-self-info {
        /* Панель принадлежит нижнему игроку: держим её рядом с его аватаром,
           а не в несвязанном правом углу стола. */
        left: calc(50% + 92px); right: auto; margin-left: 0;
        max-width: calc(50% - 112px);
    }
    #table-area.deberc #deberc-self-info .game-user__deberc-combs {
        min-width: 0; flex-wrap: wrap;
    }
    /* У боковых соперников комбинация раньше продолжала inline-строку справа
       от имени и попадала на центральную «Взятку». Ставим её под рубашками того
       же игрока — связь с владельцем ясна, а центр стола свободен. */
    #table-area.deberc .game-user__position--deberc3 .game-user__deberc-combs,
    #table-area.deberc .game-user__position--deberc4 .game-user__deberc-combs {
        position: absolute; top: 130px; left: 50%; right: auto;
        width: max-content; margin: 0;
        transform: translateX(-50%) scale(.82); transform-origin: top center;
    }
    /* Сообщение не участвует в потоке: его штатный margin-top ставил плашку
       прямо поверх верхней половины карт руки на невысоких окнах. */
    #table-area.deberc .game-message {
        position: absolute; left: 50%; bottom: 267px; width: auto; margin: 0;
        transform: translateX(-50%); z-index: 7;
    }
}

/* ===== Мобильная адаптация (device-width, без зум-в-точку) =====
   Всё позиционируем АБСОЛЮТНО относительно #table-area (height:92vh, BFC),
   чтобы избежать схлопывания margin и непредсказуемых сдвигов. Карты — крупные. */
@media (max-width: 820px), (max-width: 1024px) and (max-height: 600px) {
    /* Снимаем фиксированную ширину макета (body.table-game = min-width:1000) */
    /* min-height (600px в body.table-game и 510px в html.small-screen
       body.table-game) давал вертикальную прокрутку в альбоме: экран ниже этих
       значений. Селектор с id — иначе правило small-screen специфичнее. */
    html, body#body.table-game.deberc {
        min-width: 0; width: 100%; max-width: 100%;
        min-height: 0; height: 100%; max-height: 100%; overflow: hidden;
    }

    /* Канва = весь экран; overflow:hidden = BFC (нет схлопывания margin детей) */
    /* Канва — весь экран целиком: кнопка меню и индикатор связи лежат поверх
       сукна в нижних углах, отдельной полосы под столом нет */
    #table-area.deberc {
        position: relative;
        min-width: 0; width: 100%; max-width: 100%;
        height: 100vh; min-height: 100vh; max-height: none;
        top: 0; left: 0; transform: none; overflow: hidden;
    }

    /* Стол не рисуем: борт и овал на узком холсте съедают края (аватары, колода
       и блоки «Взятка» жмутся к сукну), поэтому остаётся только сукно на всю
       канву. Десктопная версия на всех доменах остаётся овальной. */
    #deberc-table {
        inset: 0;
        border-radius: 0;
        background-color: var(--yc-table-color, #2c5340);
        background-image:
            var(--yc-table-effect, radial-gradient(ellipse at 50% 45%, #3a6b4e 0%, #2c5340 100%)),
            linear-gradient(rgb(0 0 0 / var(--yc-table-dim, 0)), rgb(0 0 0 / var(--yc-table-dim, 0))),
            var(--yc-table-image, none);
        background-position: var(--yc-table-position, center, center, 0 0);
        background-repeat: var(--yc-table-repeat, no-repeat, no-repeat, repeat);
        background-size: var(--yc-table-size, auto, auto, 120px auto);
        box-shadow: none;
    }
    #deberc-table::before { display: none; }

    /* Часы сервера на телефоне не нужны — место в нижней панели отдаём кнопке
       меню и индикатору связи, иначе время наезжает на угол канвы */
    body.table-game.deberc #server-time { display: none; }
    /* Без часов блок остаётся шириной 20% экрана и накрывает кнопку отправки
       сообщения — ужимаем до самого индикатора связи */
    body.table-game.deberc #bottom-nav__info-block { width: auto; padding-right: 4px; bottom: 8px; }
    body.table-game.deberc #bottom-nav__info-block-internet { width: 13px; height: 13px; margin: 0; background-size: 190px auto; }
    /* Подпись «Меню» на телефоне не нужна — иконки достаточно, а полоса внизу
       становится тонкой */
    /* Keep the menu above the lower safe area. The fullscreen control stays
       in the upper corner, so both controls retain separate tap zones. */
    body.table-game.deberc #bottom-nav-show-button {
        bottom: calc(48px + env(safe-area-inset-bottom));
    }
    body.table-game.deberc #bottom-nav-show-button .bottom-nav__menu-link { font-size: 0; }

    /* Фон страницы = сукно: канва занимает 92vh, и «комната» под ней читалась
       как чужая серая полоса под столом */
    html, body.table-game.deberc {
        background-color: var(--yc-table-color, #2c5340);
        background-image:
            var(--yc-table-effect, radial-gradient(ellipse at 50% 45%, #3a6b4e 0%, #2c5340 100%)),
            linear-gradient(rgb(0 0 0 / var(--yc-table-dim, 0)), rgb(0 0 0 / var(--yc-table-dim, 0))),
            var(--yc-table-image, none);
        background-position: var(--yc-table-position, center, center, 0 0);
        background-repeat: var(--yc-table-repeat, no-repeat, no-repeat, repeat);
        background-size: var(--yc-table-size, auto, auto, 120px auto);
    }

    /* Нижняя панель: таблица с фиксированной шириной поля чата (370px) вылезала
       за узкий экран — обрезались кнопка отправки и правый край меню */
    body.table-game.deberc #bottom-nav { width: 100%; max-width: 100vw; table-layout: fixed; }
    /* padding-right — место под индикатор связи в правом нижнем углу */
    body.table-game.deberc .bottom-nav__chat { width: auto; padding-right: 40px; }
    /* Поле чата: узкая строка, смайлик остаётся в ней (при width:100% он
       переносился на следующую строку и «падал» под поле) */
    body.table-game.deberc .bottom-nav__chat-wrap {
        display: inline-flex; align-items: center; flex-wrap: nowrap; padding-right: 8px;
    }
    body.table-game.deberc input.bottom-nav__chat-input {
        flex: 0 1 auto; width: 140px; max-width: calc(100vw - 250px); padding-left: 14px;
    }
    /* Раскрывающееся меню параметров: width:400px не помещался в экран */
    body.table-game.deberc #bottom-nav__menu-popup {
        left: 8px; min-width: 0;
        width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
        max-height: 70vh; overflow: auto;
    }
    body.table-game.deberc .buttom-nav__game-params { padding: 14px 16px; }

    /* Соперник сверху по центру. Масштабируем весь блок (аватар + имя + очки +
       комбинации), чтобы верхняя полоса была одной предсказуемой высоты. */
    .game-user__position--deberc2 .game-user__avatar,
    .game-user__position--deberc3 .game-user__avatar,
    .game-user__position--deberc4 .game-user__avatar { min-width: 0; width: auto; }
    .game-user__position--deberc2 { top: 2px;  left: 50%;  transform: translateX(-50%) scale(.78); transform-origin: top center; }
    .game-user__position--deberc3 { top: 27%; left: 2px;  transform: translateY(-50%) scale(.66); transform-origin: left center; }
    .game-user__position--deberc4 { top: 27%; right: 2px; transform: translateY(-50%) scale(.66); transform-origin: right center; }
    /* Полоска таймера хода — толще: блоки игроков на телефоне уменьшены, и в
       исходные 4px полоска превращалась в еле заметную нитку, а это один из
       двух признаков «кто сейчас ходит» (второй — подсветка аватара) */
    #table-area.deberc .timer { height: 7px; }

    /* Комбинации соперника — отдельной строкой прямо под его блоком: справа от
       имени они на узком экране заезжали под колоду */
    #table-area.deberc .game-user__position--deberc2 .game-user__deberc-combs {
        position: absolute; top: 100%; left: 50%;
        flex-wrap: nowrap; margin: 0;
        transform: translateX(-50%) scale(.55); transform-origin: top center;
    }
    /* У боковых игроков inline-комбинация занимала то же место, что имя,
       счёт и веер рубашек. Выносим её к центру стола отдельной строкой. */
    #table-area.deberc .game-user__position--deberc3 .game-user__deberc-combs,
    #table-area.deberc .game-user__position--deberc4 .game-user__deberc-combs {
        position: absolute; top: 10px; flex-wrap: nowrap; margin: 0;
        transform: scale(.55); z-index: 4;
    }
    #table-area.deberc .game-user__position--deberc3 .game-user__deberc-combs {
        left: 180px; transform-origin: top left;
    }
    #table-area.deberc .game-user__position--deberc4 .game-user__deberc-combs {
        right: 180px; transform-origin: top right;
    }
    /* Имя и очки соперника — рядом с аватаром, а не поверх него: базовый
       margin-left:-45px рассчитан на аватар шириной 200px, а на телефоне блок
       сжат по ширине рубашек карт */
    #table-area.deberc .game-user__position--deberc2 .game-user__info {
        margin-left: 6px; margin-top: 4px; max-width: 150px; text-align: left;
    }
    #table-area.deberc .game-user__position--deberc2 .game-user__name,
    #table-area.deberc .game-user__position--deberc3 .game-user__name,
    #table-area.deberc .game-user__position--deberc4 .game-user__name {
        display: block; max-width: 132px; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap;
    }
    #table-area.deberc .game-user__position--deberc3 .game-user__name,
    #table-area.deberc .game-user__position--deberc4 .game-user__name { max-width: 90px; }
    /* Итог соперника («208 очк.») держим одной строкой — перенос ломал высоту
       верхней полосы и опускал её на стол */
    #table-area.deberc .game-user__position--deberc2 .game-user__deberc-points { white-space: nowrap; }
    /* Аватар, имя/очки и комбинации соперника — в одну строку: на float-раскладке
       блок упирался в свою ширину и очки переносились под аватар, на стол */
    #table-area.deberc .game-user__position--deberc2 .game-user {
        display: flex; align-items: flex-start; justify-content: center;
    }

    /* Колода и обе открытые карты масштабируются как единый блок. */
    #table-area.deberc .card-deck { top: 64px; right: 90px; transform: rotate(60deg) translateY(-50%) scale(.6); }
    /* Стол: карты и пустые слоты одним рядом по центру. Слоты тоже переводим в
       поток — иначе пунктир остаётся крестом от десктопной раскладки и висит
       отдельно от лежащих карт. */
    #table-area.deberc #playing-area {
        position: absolute; left: 50%; transform: translate(-50%, -50%);
        width: 96%; max-width: 96%; margin: 0;
        display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; text-align: center;
    }
    #table-area.deberc .deberc-stol-card,
    #table-area.deberc .deberc-stol-border {
        position: static; transform: none; transform-origin: center;
        left: auto; top: auto; margin: 0;
        /* без flex:none flex-контейнер сжимает карту по высоте и срезает её низ */
        flex: 0 0 auto;
    }
    /* Летящая карта остаётся в потоке (position:static), а z-index на статичном
       элементе не работает — она пролетала ПОД картами руки и казалась пропавшей */
    #table-area.deberc .deberc-stol-card--flying { position: relative; z-index: 300; }

    /* Игра вдвоём: два фиксированных места одно под другим (сверху карта
       соперника, снизу своя). Именно фиксированных, а не потоковых: во flex
       появление карты убирало пустой слот, и вся пара со слотами прыгала, а
       летящая карта целилась в место, которого после прилёта уже нет.
       Класс deberc-plays-2 вешает deberc_redesign.js. */
    #table-area.deberc.deberc-plays-2 #playing-area {
        display: block; width: 78px; height: 214px; max-width: none;
    }
    #table-area.deberc.deberc-plays-2 .deberc-stol-card,
    #table-area.deberc.deberc-plays-2 .deberc-stol-border {
        position: absolute; left: 50%; transform: translateX(-50%);
    }
    #table-area.deberc.deberc-plays-2 .deberc-stol-card--t { top: 0; }
    #table-area.deberc.deberc-plays-2 .deberc-stol-card--b { top: 111px; }
    /* Слот меньше карты (66x91) — сдвигаем на половину разницы, чтобы центры
       слота и легшей карты совпадали */
    #table-area.deberc.deberc-plays-2 .deberc-stol-border.deberc-stol-card--t { top: 6px; }
    #table-area.deberc.deberc-plays-2 .deberc-stol-border.deberc-stol-card--b { top: 117px; }

    /* Сообщение хода — отдельной строкой над рукой, чтобы «Ходите» не пряталось
       под картами (в этом и был признак «кто ходит» на телефоне) */
    #table-area.deberc .game-message {
        position: absolute; left: 50%; transform: translateX(-50%); top: auto;
        width: auto; max-width: 96%; text-align: center; z-index: 6;
    }

    /* На телефоне чат нижнего игрока остаётся рядом с аватаром поверх стола. */
    #table-area.deberc #messages1 {
        bottom: 112px;
        left: 50%;
        align-items: center;
        transform: translateX(-50%);
    }
    #table-area.deberc [id^="messages"] { width: min(190px, calc(100vw - 24px)); gap: 4px; }
    #table-area.deberc [id^="messages"] .game-user__message { font-size: 14px; line-height: 18px; }
    /* Рука: карты полного размера (нажимаемые), нахлёст считаем от 9 карт —
       максимума в деберце, чтобы крайние не уезжали за экран */
    #table-area.deberc #user-cards-in-hand {
        position: absolute; left: 0; width: 100%; margin: 0;
        transform: none; white-space: nowrap; text-align: center;
    }
    /* Нахлёст считает deberc_layoutHand() по фактической ширине канвы:
       пока карты влезают — идут с зазором, дальше нахлёст ровно по нехватке */
    #table-area.deberc #user-cards-in-hand .card-sprite {
        position: relative !important; top: 0 !important; left: 0 !important;
        margin-left: var(--deberc-hand-gap, -46px) !important;
    }
    #table-area.deberc #user-cards-in-hand .card-sprite:first-child { margin-left: 0 !important; }

    /* Свои очки и комбинации — одной строкой; имя игрока себе не показываем */
    #deberc-self-info {
        position: absolute; left: 50%; margin-left: 0; transform: translateX(-50%);
        max-width: 98%; gap: 10px; padding: 3px 10px; z-index: 6;
        justify-content: center; flex-wrap: nowrap; overflow: hidden;
    }
    #deberc-self-info .game-user__deberc-combs { justify-content: center; transform-origin: center; flex-wrap: nowrap; gap: 8px; }
    /* transform визуально уменьшал комбинации, но flex продолжал резервировать
       их исходную ширину, поэтому последняя группа обрезалась overflow блока. */
    #deberc-self-info .game-user__deberc-combs { transform: none; zoom: .7; }
    #table-area.deberc #position1 .game-user__name { display: none; }
    .game-user__deberc-combs { transform: scale(.7); gap: 8px; }
    .game-user__deberc-points { font-size: 13px; }
    .deberc-comb { padding: 3px 5px; }

    /* Свой аватар — компактный, в нижнем углу; кнопки действий не масштабируем
       вместе с ним, иначе они уезжают вслед за transform-origin аватара */
    /* Блок «Вы» растянут во всю ширину канвы, а его содержимое (аватар, кнопки)
       позиционируется абсолютно. Без height:0 и pointer-events:none он лежал
       поверх руки и съедал клики по картам — особенно заметно в альбоме. */
    #table-area.deberc #position1 {
        position: absolute; left: 0; bottom: 0; width: 100%; height: 0; margin: 0; text-align: left;
        transform: none; pointer-events: none;
    }
    #table-area.deberc #position1 .game-user__img-wrap,
    #table-area.deberc #position1 #game-user__control,
    #table-area.deberc #position1 .game-button { pointer-events: auto; }
    #table-area.deberc #position1 .game-user__avatar {
        position: absolute; left: 0; bottom: 4px;
        min-width: 0; width: 128px; margin: 0;
        transform: scale(.62); transform-origin: bottom left;
    }
    /* Снимаем позиционирование обёртки: иначе кнопки внутри неё считают свои
       right/bottom от узкой колонки аватара, а не от канвы */
    #table-area.deberc #position1 .game-user { position: static; }
    /* Кнопки действий (Играю / Пас / Беру …) — одной строкой у правого края
       канвы: в десктопной раскладке они стоят на ±170px от аватара и на
       телефоне полностью уходили за экран. Раскладку задаёт контейнер, сами
       кнопки возвращаем в поток — так их ширина не нужна заранее. */
    #table-area.deberc #game-user__control {
        position: absolute; left: auto; top: auto;
        display: flex; gap: 8px; align-items: flex-end; z-index: 30;
    }
    #table-area.deberc .game-button__user-right,
    #table-area.deberc .game-button__user-left {
        position: static; margin: 0; white-space: nowrap;
    }

    /* Выбор козыря — компактнее и выше центра, чтобы панель не накрывалась
       строкой сообщения «Выберите козырь или пасуйте» */
    #deberc-trump-select {
        width: calc(100% - 16px); min-width: 0; max-width: 620px;
        padding: 18px 12px 20px; border-radius: 20px;
    }
    #deberc-trump-select .deberc-trump-select__title { font-size: 17px; margin-bottom: 10px; }
    #deberc-trump-select .deberc-trump-select__masts { gap: 10px; }
    #deberc-trump-select .deberc-trump-mast {
        flex-basis: 104px; width: 104px; height: 104px; margin: 0; transform: none;
    }
    #deberc-trump-select .deberc-trump-mast__art {
        width: 68px; height: 68px;
        -webkit-mask-size: 272px 68px; mask-size: 272px 68px;
    }
    #deberc-trump-select .deberc-trump-mast--2 .deberc-trump-mast__art { -webkit-mask-position: -68px 0; mask-position: -68px 0; }
    #deberc-trump-select .deberc-trump-mast--3 .deberc-trump-mast__art { -webkit-mask-position: -136px 0; mask-position: -136px 0; }
    #deberc-trump-select .deberc-trump-mast--4 .deberc-trump-mast__art { -webkit-mask-position: -204px 0; mask-position: -204px 0; }
    #deberc-trump-select .deberc-trump-mast:hover,
    #deberc-trump-select .deberc-trump-mast:focus-visible { transform: translateY(-3px); }

    /* Пустую плашку (взяток ещё нет) слегка приглушаем, но оставляем видимой:
       это место, куда прилетят карты взятки, и игрок должен его видеть заранее */
    .deberc-trick-zone:not(.deberc-trick-zone--filled) {
        --deberc-trick-zone-surface-opacity: .45;
        --deberc-trick-zone-laurel-opacity: .081;
        --deberc-trick-zone-border-opacity: .06;
    }
    .deberc-trick-zone.deberc-trick-zone--filled {
        --deberc-trick-zone-surface-opacity: .55;
        --deberc-trick-zone-laurel-opacity: .132;
        --deberc-trick-zone-border-opacity: .08;
    }
    /* Последняя взятка — крупнее прочих плашек: это единственное место, где
       видно разыгранные карты, и на телефоне их надо различать */
    #deberc-last-trick {
        top: 46%; left: 2px; margin: 0;
        transform: translateY(-50%) scale(.75); transform-origin: left center;
    }
    #deberc-round-status {
        top: 46%; left: 2px; margin: 98px 0 0;
        transform: translateY(-50%) scale(.75); transform-origin: left center;
    }
    .deberc-last-trick__cross { width: 104px; height: 122px; }
    .deberc-last-trick__card--t { top: -3px; }
    .deberc-last-trick__card--b { bottom: -3px; }

    .deberc-score-table { width: 96%; max-height: 86vh; }
    .deberc-score-table__body { max-height: calc(86vh - 36px); }
}

/* ===== Телефон, портрет =====
   Вертикальный бюджет канвы (92vh) сверху вниз: соперник — стол — сообщение —
   рука — свои очки/комбинации — аватар и кнопки. */
@media (max-width: 820px) and (orientation: portrait) {
    /* Ритм канвы (весь экран) сверху вниз: соперник — стол (две карты друг под
       другом) — сообщение — кнопки — рука — нижняя строка со своим аватаром,
       очками и комбинациями. Нижние 36px оставлены кнопке меню и индикатору
       связи, которые лежат поверх сукна. */
    #table-area.deberc #playing-area { top: 36%; }
    /* Втроём/вчетвером сохраняем географию мест: карта каждого игрока лежит
       с его стороны креста. Линейный ряд не позволял понять, кто чем сходил. */
    #table-area.deberc.deberc-plays-3 #playing-area,
    #table-area.deberc.deberc-plays-4 #playing-area {
        display: block; width: 334px; height: 214px; max-width: calc(100% - 8px);
    }
    #table-area.deberc.deberc-plays-3 .deberc-stol-card,
    #table-area.deberc.deberc-plays-3 .deberc-stol-border,
    #table-area.deberc.deberc-plays-4 .deberc-stol-card,
    #table-area.deberc.deberc-plays-4 .deberc-stol-border {
        position: absolute; left: 50%; top: 50%;
    }
    #table-area.deberc.deberc-plays-3 .deberc-stol-card--b,
    #table-area.deberc.deberc-plays-4 .deberc-stol-card--b { transform: translate(-50%, 6px); }
    #table-area.deberc.deberc-plays-3 .deberc-stol-card--t,
    #table-area.deberc.deberc-plays-4 .deberc-stol-card--t { transform: translate(-50%, -108px); }
    #table-area.deberc.deberc-plays-3 .deberc-stol-card--l,
    #table-area.deberc.deberc-plays-4 .deberc-stol-card--l { transform: translate(-128px, -50px); }
    #table-area.deberc.deberc-plays-4 .deberc-stol-card--r { transform: translate(48px, -50px); }
    #table-area.deberc.deberc-plays-3 .deberc-stol-border.deberc-stol-card--b,
    #table-area.deberc.deberc-plays-4 .deberc-stol-border.deberc-stol-card--b { transform: translate(-50%, 12px); }
    #table-area.deberc.deberc-plays-3 .deberc-stol-border.deberc-stol-card--t,
    #table-area.deberc.deberc-plays-4 .deberc-stol-border.deberc-stol-card--t { transform: translate(-50%, -102px); }
    #table-area.deberc.deberc-plays-3 .deberc-stol-border.deberc-stol-card--l,
    #table-area.deberc.deberc-plays-4 .deberc-stol-border.deberc-stol-card--l { transform: translate(-122px, -44px); }
    #table-area.deberc.deberc-plays-4 .deberc-stol-border.deberc-stol-card--r { transform: translate(54px, -44px); }
    /* Боковые игроки занимают верхние углы, а не середину ряда разыгранных
       карт. Это особенно важно на 320px при игре втроём/вчетвером. */
    .game-user__position--deberc3,
    .game-user__position--deberc4 { top: 16%; }
    /* Справа сверху уже лежат колода, открытый козырь и масть. Правого игрока
       держим между этой группой и правым плечом креста. */
    .game-user__position--deberc4 { top: 23%; }
    #deberc-trump-select { top: 30%; bottom: auto; transform: translate(-50%, -50%); }
    #table-area.deberc .game-message { bottom: 286px; max-width: calc(100% - 180px); }
    #table-area.deberc #game-user__control { right: 8px; bottom: 252px; }
    #table-area.deberc #user-cards-in-hand { bottom: 124px; }

    /* Нижняя строка стоит над кнопкой меню, которая лежит в самом углу */
    #table-area.deberc #position1 .game-user__avatar { bottom: 60px; }
    #deberc-self-info {
        bottom: 62px; left: 84px; right: auto; margin: 0; transform: none;
        width: max-content; max-width: calc(100% - 92px); height: 56px; justify-content: flex-start;
    }
    #deberc-self-info .game-user__deberc-combs { transform: none; zoom: .55; }
}

/* Узкие телефоны (≤360 CSS px): пара карт стола по вертикали и блок соперника
   в полный размер уже не помещаются рядом с колодой */
@media (max-width: 360px) and (orientation: portrait) {
    #table-area.deberc .deberc-stol-card,
    #table-area.deberc .deberc-stol-border { scale: .8; }
    .game-user__position--deberc2 { transform: translateX(-50%) scale(.6); }
    .game-user__position--deberc3 {
        top: 10%; transform: translateY(-50%) scale(.5);
    }
    .game-user__position--deberc4 {
        top: 20%; transform: translateY(-50%) scale(.45);
    }
    /* На 320px уменьшаем и поднимаем колоду: иначе ей, правому игроку и плечу
       креста не хватает трёх раздельных вертикальных зон. */
    #table-area.deberc .card-deck {
        top: 48px; transform: rotate(60deg) translateY(-50%) scale(.45);
    }
    #table-area.deberc #playing-area { top: 31%; }
    #table-area.deberc .game-message { bottom: 236px; }
    /* На 320px крупный блок последней взятки дотягивается до строки сообщения */
    #deberc-last-trick { transform: translateY(-50%) scale(.6); }
    #deberc-trump-select { width: calc(100% - 8px); padding-inline: 6px; }
    #deberc-trump-select .deberc-trump-select__masts { gap: 5px; }
    #deberc-trump-select .deberc-trump-mast {
        flex-basis: 88px; width: 88px; height: 88px;
    }
    #deberc-trump-select .deberc-trump-mast__art {
        width: 58px; height: 58px;
        -webkit-mask-size: 232px 58px; mask-size: 232px 58px;
    }
    #deberc-trump-select .deberc-trump-mast--2 .deberc-trump-mast__art { -webkit-mask-position: -58px 0; mask-position: -58px 0; }
    #deberc-trump-select .deberc-trump-mast--3 .deberc-trump-mast__art { -webkit-mask-position: -116px 0; mask-position: -116px 0; }
    #deberc-trump-select .deberc-trump-mast--4 .deberc-trump-mast__art { -webkit-mask-position: -174px 0; mask-position: -174px 0; }
    #deberc-self-info .game-user__deberc-combs { zoom: .35; }
}

/* ===== Телефон, альбом =====
   По ширине места много, по высоте почти нет: рука идёт вплотную к нижнему краю,
   боковые блоки уходят к краям, вертикальные отступы минимальны. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
    /* В альбоме вся связка «колода + поперечный козырь + масть» остаётся
       внутри правого верхнего угла. */
    #table-area.deberc .card-deck { right: 90px; }
    /* В широком альбоме не сжимаем боковых игроков до телефонного размера:
       у каждого есть своя колонка у края, поэтому аватар и имя читаются
       целиком, а не обрезаются после нескольких букв. */
    .game-user__position--deberc2 {
        top: 8px; transform: translateX(-50%) scale(.7); transform-origin: top center;
    }
    .game-user__position--deberc3 {
        top: 40px; left: 16px; transform: scale(.75); transform-origin: top left;
    }
    .game-user__position--deberc4 {
        top: 134px; right: 16px; transform: scale(.75); transform-origin: top right;
    }
    #table-area.deberc .game-user__position--deberc3 .game-user__name,
    #table-area.deberc .game-user__position--deberc4 .game-user__name { max-width: 160px; }
    #table-area.deberc .game-user__position--deberc3 .game-user__name { transform: translateY(-20px); }
    /* Вдвоём используем компактный ряд; при 3–4 игроках ниже возвращаем крест,
       чтобы направление каждой сыгранной карты сохранялось и в альбоме. */
    /* Вдвоём в альбоме места стоят рядом: столбик из двух карт съедает всю
       высоту экрана */
    #table-area.deberc.deberc-plays-2 #playing-area { width: 170px; height: 103px; }
    #table-area.deberc.deberc-plays-2 .deberc-stol-card,
    #table-area.deberc.deberc-plays-2 .deberc-stol-border { transform: none; }
    #table-area.deberc.deberc-plays-2 .deberc-stol-card--t { left: 0; top: 0; }
    #table-area.deberc.deberc-plays-2 .deberc-stol-card--b { left: 92px; top: 0; }
    #table-area.deberc.deberc-plays-2 .deberc-stol-border.deberc-stol-card--t { left: 6px; top: 6px; }
    #table-area.deberc.deberc-plays-2 .deberc-stol-border.deberc-stol-card--b { left: 98px; top: 6px; }
    #table-area.deberc .deberc-stol-card,
    #table-area.deberc .deberc-stol-border { transform: scale(.72); }
    #table-area.deberc #playing-area { top: 36%; }
    #deberc-trump-select { top: 27%; bottom: auto; transform: translate(-50%, -50%); }
    /* Сообщение хода — выше кнопок и руки; центрирование задаёт базовое
       адаптивное правило, без сдвига влево для стола на четыре места. */
    #table-area.deberc .game-message { bottom: 178px; max-width: calc(100% - 420px); }

    /* Рука центрируется по столу. Компактный аватар ниже неё больше не требует
       прежнего резерва 150px, который визуально прижимал все карты вправо. */
    #table-area.deberc #user-cards-in-hand {
        bottom: 2px; text-align: center; padding: 0 8px;
    }

    #table-area.deberc.deberc-plays-3 #playing-area,
    #table-area.deberc.deberc-plays-4 #playing-area {
        display: block; top: 45%; width: 286px; height: 220px; max-width: none;
    }
    #table-area.deberc.deberc-plays-3 .deberc-stol-card,
    #table-area.deberc.deberc-plays-3 .deberc-stol-border,
    #table-area.deberc.deberc-plays-4 .deberc-stol-card,
    #table-area.deberc.deberc-plays-4 .deberc-stol-border {
        position: absolute; left: 50%; top: 50%; scale: 1;
    }
    #table-area.deberc.deberc-plays-3 .deberc-stol-card--b,
    #table-area.deberc.deberc-plays-4 .deberc-stol-card--b { transform: translate(-50%, 6px); }
    #table-area.deberc.deberc-plays-3 .deberc-stol-card--t,
    #table-area.deberc.deberc-plays-4 .deberc-stol-card--t { transform: translate(-50%, -108px); }
    #table-area.deberc.deberc-plays-3 .deberc-stol-card--l,
    #table-area.deberc.deberc-plays-4 .deberc-stol-card--l { transform: translate(-128px, -50px); }
    #table-area.deberc.deberc-plays-4 .deberc-stol-card--r { transform: translate(48px, -50px); }
    #table-area.deberc.deberc-plays-3 .deberc-stol-border.deberc-stol-card--b,
    #table-area.deberc.deberc-plays-4 .deberc-stol-border.deberc-stol-card--b { transform: translate(-50%, 12px); }
    #table-area.deberc.deberc-plays-3 .deberc-stol-border.deberc-stol-card--t,
    #table-area.deberc.deberc-plays-4 .deberc-stol-border.deberc-stol-card--t { transform: translate(-50%, -102px); }
    #table-area.deberc.deberc-plays-3 .deberc-stol-border.deberc-stol-card--l,
    #table-area.deberc.deberc-plays-4 .deberc-stol-border.deberc-stol-card--l { transform: translate(-122px, -44px); }
    #table-area.deberc.deberc-plays-4 .deberc-stol-border.deberc-stol-card--r { transform: translate(54px, -44px); }
    /* В альбоме широко: комбинации соперника возвращаем в строку рядом с ним —
       под блоком они наезжали бы на стол */
    #table-area.deberc .game-user__position--deberc2 .game-user__deberc-combs {
        position: static; transform: scale(.7); transform-origin: top left;
    }
    #table-area.deberc #position1 .game-user__avatar {
        left: 4px; bottom: 132px; transform: scale(.5); transform-origin: bottom left;
    }

    /* Полоса над рукой: слева свои очки и комбинации, справа кнопки действий */
    #deberc-self-info {
        bottom: 132px; left: auto; right: 4px; margin: 0; transform: none;
        max-width: 45%; height: 42px;
    }
    #deberc-self-info .game-user__deberc-combs { transform: none; zoom: .5; }
    #table-area.deberc #game-user__control { left: 80px; right: auto; bottom: 132px; }

    /* Блок последней взятки в альбоме мельче: иначе перекрывает строку очков */
    #deberc-last-trick { top: 38%; transform: translateY(-50%) scale(.6); }
}
#table-area.deberc .suit-big-5 { background-image: url(/img/game/suit/big-5.png); }
#table-area.deberc .suit-small-5 { background-image: url(/img/game/suit/small-5.png); }
#table-area.deberc .suit-big-6 { background-image: url(/img/game/suit/big-6.png); }
#table-area.deberc .suit-small-6 { background-image: url(/img/game/suit/small-6.png); }
#table-area.deberc .suit-big-7 { background-image: url(/img/game/suit/big-7.png); }
#table-area.deberc .suit-small-7 { background-image: url(/img/game/suit/small-7.png); }
#table-area.deberc .suit-big-8 { background-image: url(/img/game/suit/big-8.png); }
#table-area.deberc .suit-small-8 { background-image: url(/img/game/suit/small-8.png); }
#table-area.deberc .suit-big-9 { background-image: url(/img/game/suit/big-9.png); }
#table-area.deberc .suit-small-9 { background-image: url(/img/game/suit/small-9.png); }
#table-area.deberc .suit-big-10 { background-image: url(/img/game/suit/big-10.png); }
#table-area.deberc .suit-small-10 { background-image: url(/img/game/suit/small-10.png); }
#table-area.deberc .suit-big-11 { background-image: url(/img/game/suit/big-11.png); }
#table-area.deberc .suit-small-11 { background-image: url(/img/game/suit/small-11.png); }
#table-area.deberc .suit-big-12 { background-image: url(/img/game/suit/big-12.png); }
#table-area.deberc .suit-small-12 { background-image: url(/img/game/suit/small-12.png); }
#table-area.deberc .suit-big-13 { background-image: url(/img/game/suit/big-13.png); }
#table-area.deberc .suit-small-13 { background-image: url(/img/game/suit/small-13.png); }
#table-area.deberc .suit-big-14 { background-image: url(/img/game/suit/big-14.png); }
#table-area.deberc .suit-small-14 { background-image: url(/img/game/suit/small-14.png); }
#table-area.deberc .suit-big-15 { background-image: url(/img/game/suit/big-15.png); }
#table-area.deberc .suit-small-15 { background-image: url(/img/game/suit/small-15.png); }