/**
 * Debers scene layout.
 *
 * This file is the sole owner of scene geometry. deberc_redesign.css keeps the
 * component skin (cards, felt, badges and animations); its historical layout
 * declarations are deliberately neutralised here at the component boundaries.
 * There are three compositions: portrait, regular landscape and compact
 * landscape. Sizing inside each composition is fluid.
 */

html:has(body.table-game.deberc),
body.table-game.deberc {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0 !important;
    overflow: hidden;
    overscroll-behavior: none;
}

body.table-game.deberc #scale-wrapper {
    display: grid !important;
    place-items: center;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}

/* The coordinate scene may be bounded on a large screen, but the room around
   it remains the same selected felt rather than becoming a dark backdrop. */
body.table-game.deberc[data-game-background-ready],
body.table-game.deberc[data-game-background-ready] #scale-wrapper {
    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);
}

#table-area.deberc-scene {
    --scene-inline-safe: max(8px, env(safe-area-inset-left));
    --scene-inline-safe-end: max(8px, env(safe-area-inset-right));
    --scene-top-safe: max(6px, env(safe-area-inset-top));
    /* The Symfony debug toolbar lives outside the game viewport. Do not reserve
       room for it; only preserve a minimal visual edge and real device inset. */
    --scene-bottom-safe: max(6px, env(safe-area-inset-bottom));
    --scene-gap: clamp(4px, 1.1vmin, 14px);
    --seat-scale: .85;
    --top-seat-scale: .88;
    --self-scale: 1;
    --table-scale: 1;
    --deck-scale: .8;
    --hand-bottom: clamp(112px, 17dvh, 154px);
    --hand-reserve: clamp(168px, 25dvh, 220px);
    --hand-edge-offset: 58px;
    --hand-visual-height: 123px;
    /* This is the visual gap between the bottom of #position1 and the top of
       the hand. Each composition compensates its own seat scale below. */
    --self-hand-gap: 18px;
    --last-trick-scale: .65;
    --playing-area-half-width: 143px;
    --last-trick-gap: 12px;
    --scene-centre-shift: 0px;
    --scene-max-size: 1264px;

    position: relative !important;
    inset: auto !important;
    isolation: isolate;
    display: grid !important;
    grid-template-columns: minmax(92px, 1fr) minmax(220px, 3fr) minmax(92px, 1fr);
    grid-template-rows: minmax(92px, 17%) minmax(210px, 1fr) var(--hand-reserve);
    gap: var(--scene-gap);
    box-sizing: border-box;
    border: 0;
    width: calc(100dvw - 10px) !important;
    height: calc(100dvh - 10px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: var(--scene-max-size) !important;
    max-height: var(--scene-max-size) !important;
    margin: 5px auto !important;
    padding: var(--scene-top-safe) var(--scene-inline-safe-end)
        var(--scene-bottom-safe) var(--scene-inline-safe);
    overflow: visible !important;
    transform: none !important;
    container: deberc-scene / size;
}

/* The physical table follows the bounded scene instead of the monitor. */
#table-area.deberc-scene #deberc-table {
    inset: clamp(4px, 1.1vmin, 16px) !important;
}

/* Stable seats. Their internal legacy widgets retain their own visuals, while
   the grid owns every external coordinate. */
#table-area.deberc-scene .game-user__position--deberc2,
#table-area.deberc-scene .game-user__position--deberc3,
#table-area.deberc-scene .game-user__position--deberc4,
#table-area.deberc-scene .deberc-seat--self {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    align-self: center;
    justify-self: center;
}

#table-area.deberc-scene .game-user__position--deberc2 {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    translate: -10px 0;
    transform: scale(var(--top-seat-scale)) !important;
    transform-origin: top right;
}

#table-area.deberc-scene .game-user__position--deberc3 {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    translate: 0 -20px;
    transform: scale(var(--seat-scale)) !important;
    transform-origin: left center;
}

#table-area.deberc-scene .game-user__position--deberc4 {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    translate: 0 -20px;
    transform: scale(var(--seat-scale)) !important;
    transform-origin: right center;
}

#table-area.deberc-scene .deberc-seat--opponent {
    width: 200px;
    text-align: center;
}

#table-area.deberc-scene .deberc-seat--opponent > .game-user {
    display: grid !important;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 200px;
}

#table-area.deberc-scene .deberc-seat--opponent .game-user__avatar,
#table-area.deberc-scene .deberc-seat--opponent .game-user__info,
#table-area.deberc-scene .deberc-seat--opponent .game-user__deberc-combs {
    position: relative !important;
    inset: auto !important;
    width: 200px !important;
    max-width: 200px !important;
    margin: 0 !important;
    justify-self: center;
    text-align: center !important;
}

#table-area.deberc-scene .deberc-seat--opponent .game-user__info {
    min-height: 34px;
}

/* Name belongs to the avatar row. The card fan is deliberately the following
   row, so adding/removing cards never moves the player's name. */
#table-area.deberc-scene .deberc-seat--opponent .game-user__avatar {
    display: block !important;
    grid-row: 1;
    height: 164px !important;
}

#table-area.deberc-scene .deberc-seat--opponent .game-user__info {
    grid-row: 2;
}

#table-area.deberc-scene .deberc-seat--opponent .game-user__avatar .game-user__name {
    position: absolute !important;
    top: 86px !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 3;
}

#table-area.deberc-scene .deberc-seat--opponent .game-user__avatar .game-user__avatar-badge {
    position: relative !important;
    z-index: 2;
}

/* Keep the VIP/reward mark in the portrait's coordinate system.  It used to
   become a relative grid item here, so it fell below the avatar; anchoring it
   to the same 200px avatar row also keeps the right seat identical to the
   left one at every scene scale. */
#table-area.deberc-scene .game-user__avatar {
    position: relative !important;
}

#table-area.deberc-scene .game-user__avatar .game-user__game-avatar-mark {
    position: absolute !important;
    top: -2px !important;
    right: auto !important;
    left: calc(50% + 14px) !important;
    z-index: 5;
}

/* The timer is a child of the avatar circle, not of the card fan or seat.
   Its centre follows the lower edge of that circle at every scene scale. */
#table-area.deberc-scene .game-user__avatar-badge .timer {
    position: absolute !important;
    top: calc(100% - 3px) !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 4 !important;
}

#table-area.deberc-scene .deberc-seat--opponent .game-user__avatar .game-user__opponent-cards {
    position: absolute !important;
    /* Raised 20px in the rendered scene from the former avatar-bottom offset. */
    top: 61px !important;
    right: 0 !important;
    left: 0 !important;
    width: 200px !important;
    min-height: 34px;
    margin: 0 !important;
    text-align: center;
    /* The fan is deliberately below both the portrait and its name. */
    z-index: 1;
}

#table-area.deberc-scene .deberc-seat--opponent .game-user__deberc-combs {
    position: absolute !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    /* The seat is scaled; 50 logical px equals ≈30 rendered px on phones.
       Keep the callout 20 logical px closer to the portrait. */
    left: calc(100% - 62px) !important;
    width: max-content !important;
    max-width: min(42cqw, 280px);
    margin: 0 !important;
    transform: translateY(-50%) !important;
    transform-origin: left center !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center;
    z-index: 4;
}

/* The right seat faces inward: its declarations use the avatar's left side. */
#table-area.deberc-scene #position4 .game-user__deberc-combs {
    right: calc(100% - 62px) !important;
    left: auto !important;
    transform-origin: right center !important;
    align-items: center;
}

/* The top seat is scaled to roughly .56–.62. 18 logical px gives the
   requested 10px visible descent without changing the side seats. */
#table-area.deberc-scene #position2 .game-user__deberc-combs {
    top: calc(50% + 18px) !important;
}

#table-area.deberc-scene #position3 .game-user__deberc-combs,
#table-area.deberc-scene #position4 .game-user__deberc-combs {
    translate: 0 calc(5px / var(--seat-scale)) !important;
}

/* The left player's fan tucks closer to the portrait. Keep the portrait and
   status badge above the cards so their overlap reads as one compact seat. */
#table-area.deberc-scene .game-user__position--deberc3 .game-user__opponent-cards {
    z-index: 1;
}

#table-area.deberc-scene .game-user__position--deberc3 .game-user__avatar-badge,
#table-area.deberc-scene .game-user__position--deberc3 .game-user__game-status {
    z-index: 2;
}

#table-area.deberc-scene .game-user__position--deberc2 .game-user__name,
#table-area.deberc-scene .game-user__position--deberc3 .game-user__name,
#table-area.deberc-scene .game-user__position--deberc4 .game-user__name {
    display: block;
    width: clamp(88px, 13cqw, 164px);
    max-width: clamp(88px, 13cqw, 164px);
    margin: 0 auto !important;
    overflow: hidden;
    transform: none !important;
    text-align: center !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px !important;
    line-height: 22px !important;
}

/* Debug names come from the same client data as every other game label. Let
   their full text paint beyond the existing nickname box without resizing it. */
html.deberc-layout-debug #table-area.deberc-scene .game-user__name {
    overflow: visible !important;
    text-overflow: clip !important;
}

#table-area.deberc-scene .deberc-seat--opponent .game-user__deberc-points {
    position: absolute !important;
    right: auto !important;
    bottom: calc(100% + 6px) !important;
    left: 50% !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    white-space: nowrap;
    z-index: 4;
}

/* Score is the same component for every seat, including the local player. */
#table-area.deberc-scene .game-user__deberc-points {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 26px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: rgba(20, 43, 36, .58);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset,
        0 2px 5px rgba(0, 0, 0, .18);
}

/* The top seat has no vertical room above it: its score uses the avatar's
   left edge, while the other seats keep scores above their circles. */
#table-area.deberc-scene #position2 .game-user__deberc-points {
    top: 19px !important;
    right: calc(100% - 52px) !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    transform-origin: right center !important;
}

#table-area.deberc-scene .deberc-seat--self #position1 .game-user__deberc-points {
    position: absolute !important;
    right: auto !important;
    bottom: calc(100% + 6px) !important;
    left: 50% !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    white-space: nowrap;
    z-index: 4;
}

#table-area.deberc-scene #deberc-self-info {
    padding: 0;
    background: transparent;
}

/* The lower local seat uses the same avatar-relative combinations anchor as
   the upper seat. Keeping one geometry prevents declarations from covering
   the local portrait. */
#table-area.deberc-scene .deberc-seat--self #position1 .game-user__deberc-combs {
    position: absolute !important;
    top: calc(50% + 18px) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(100% + 8px) !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center;
    width: max-content !important;
    max-width: min(42cqw, 280px);
    margin: 0 !important;
    transform: translateY(-50%) !important;
    translate: 0 !important;
    transform-origin: left center !important;
    zoom: 1 !important;
    z-index: 4;
}

@supports (position-anchor: --deberc-position1-avatar) {
    #table-area.deberc-scene .deberc-seat--self #position1 .game-user__deberc-combs {
        position-anchor: --deberc-position1-avatar;
        top: anchor(center) !important;
        left: anchor(right) !important;
        margin-left: 8px !important;
    }
}

#table-area.deberc-scene #playing-area {
    position: absolute !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(50% + var(--scene-centre-shift)) !important;
    width: 286px !important;
    height: 220px !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) scale(var(--table-scale)) !important;
    pointer-events: auto;
}

#table-area.deberc-scene .deberc-stol-card,
#table-area.deberc-scene .deberc-stol-border {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    scale: 1 !important;
}

/* Цель полёта не показываем под летящей копией даже при замене DOM серверным пакетом. */
#table-area.deberc-scene .deberc-stol-card--flight-target {
    visibility: hidden !important;
}

/* Direction belongs to the new scene, not to legacy viewport blocks. Without
   these explicit transforms a near-square portrait rule can reset every card
   to the same 50%/50% point. */
#table-area.deberc-scene .deberc-stol-card--b { transform: translate(-50%, 6px) !important; }
#table-area.deberc-scene .deberc-stol-card--t { transform: translate(-50%, -108px) !important; }
#table-area.deberc-scene .deberc-stol-card--l { transform: translate(-124px, -50px) !important; }
#table-area.deberc-scene .deberc-stol-card--r { transform: translate(44px, -50px) !important; }
#table-area.deberc-scene .deberc-stol-border.deberc-stol-card--b { transform: translate(-50%, 12px) !important; }
#table-area.deberc-scene .deberc-stol-border.deberc-stol-card--t { transform: translate(-50%, -102px) !important; }
#table-area.deberc-scene .deberc-stol-border.deberc-stol-card--l { transform: translate(-118px, -44px) !important; }
#table-area.deberc-scene .deberc-stol-border.deberc-stol-card--r { transform: translate(50px, -44px) !important; }

#table-area.deberc-scene .deberc-last-trick-cluster {
    position: absolute !important;
    top: 50% !important;
    /* #deberc-last-trick fills this footprint, so its own right edge — not an
       auxiliary lane — is anchored to the table's left edge. */
    right: calc(50% + var(--playing-area-half-width) + var(--last-trick-gap) - var(--scene-centre-shift)) !important;
    left: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) scale(var(--last-trick-scale)) !important;
    transform-origin: right center;
    /* The last-trick box is 128px cross + 16px horizontal and 32/14px vertical
       padding.  Keep that footprint even while .hide removes its contents:
       the mast above and the round anchor below must not jump during bidding. */
    width: 160px;
    height: 196px;
}

#table-area.deberc-scene #deberc-last-trick {
    position: relative !important;
    inset: auto !important;
    /* Widen toward the free left lane: the right edge remains the permanent
       anchor to #playing-area. */
    width: calc(100% + 8px) !important;
    height: calc(100% - 8px) !important;
    margin: 4px 0 0 -8px !important;
    transform: none !important;
}

/* The legacy <=800px skin shrinks this inner cross independently of the
   scene. Keep its cards at the same intrinsic size; only the scene lane may
   scale as a whole. */
#table-area.deberc-scene #deberc-last-trick .deberc-last-trick__cross {
    width: 128px !important;
    height: 150px !important;
}

/* Fine-tune only the cross spacing, relative to every original responsive
   coordinate: widen the horizontal pair and draw the vertical pair in. */
#table-area.deberc-scene #deberc-last-trick .deberc-last-trick__card--l {
    translate: -5px 0;
}

#table-area.deberc-scene #deberc-last-trick .deberc-last-trick__card--r {
    translate: 5px 0;
}

#table-area.deberc-scene #deberc-last-trick .deberc-last-trick__card--t {
    translate: 0 11px;
}

#table-area.deberc-scene #deberc-last-trick .deberc-last-trick__card--b {
    translate: 0 -11px;
}

#table-area.deberc-scene .card-deck {
    grid-column: 3;
    grid-row: 1 / 3;
    position: absolute !important;
    top: calc(var(--scene-top-safe) + 12px) !important;
    right: calc(var(--scene-inline-safe-end) + 14px) !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    translate: none !important;
    width: 160px !important;
    height: 170px !important;
    transform: scale(var(--deck-scale)) !important;
    transform-origin: top center;
    z-index: 6;
}

/* Straight deck composition: the open card is vertical; the horizontal stack
   crosses it; the optional reveal replaces the top card of that stack. */
#table-area.deberc-scene .card-deck .card-deck__back {
    position: absolute !important;
    top: 55px !important;
    left: 41px !important;
}

#table-area.deberc-scene .card-deck .card-deck__item {
    transform: rotate(90deg) !important;
    transform-origin: center !important;
    translate: 0 160px !important;
}

#table-area.deberc-scene #card-deck__trump-card,
#table-area.deberc-scene #card-deck__trump-card.deberc-trump-card--small {
    top: 55px !important;
    left: 41px !important;
    transform: none !important;
}
#table-area.deberc-scene #card-deck__trump-card[role="button"] { cursor: pointer; }

/* The round label owns the trump card's coordinate system: status → trump. */
#table-area.deberc-scene #deberc-open-card-rule {
    position: absolute;
    top: 114px;
    left: 61px;
    transform: translateX(-50%);
    max-width: 148px;
    padding: 3px 7px;
    border-radius: 5px;
    background: rgba(20, 25, 23, .28);
    color: #ffe580;
    font: 600 12px/1.2 sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#table-area.deberc-scene #deberc-open-card-rule {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    top: 26px;
    left: 80px;
    color: rgba(237, 231, 204, .78);
    font-weight: 500;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}
#table-area.deberc-scene #deberc-open-card-rule[hidden] { display: none; }
#table-area.deberc-scene #deberc-open-card-rule .deberc-open-card-rule__pointer {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

#table-area.deberc-scene #deberc-open-card-hint {
    position: absolute;
    top: 25px;
    right: calc(100% + 9px);
    width: 190px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 236, 163, .34);
    border-radius: 8px;
    background: rgba(21, 31, 28, .9);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
    color: rgba(255, 251, 231, .92);
    font: 500 12px/1.35 sans-serif;
    white-space: normal;
    opacity: 0;
    transform: translateX(5px);
    transition: opacity 140ms ease, transform 140ms ease;
    visibility: visible;
}
#table-area.deberc-scene #deberc-open-card-hint[hidden] { display: none; }
#table-area.deberc-scene #deberc-open-card-hint.deberc-open-card-hint--visible {
    opacity: 1;
    transform: translateX(0);
}

#table-area.deberc-scene .game-user__img-wrap.deberc-open-card-recipient--highlight {
    animation: deberc-open-card-recipient-highlight 720ms ease-out;
}
@keyframes deberc-open-card-recipient-highlight {
    0%, 100% { outline: 1px solid rgba(255, 226, 112, 0); outline-offset: 2px; }
    24%, 62% { outline: 1px solid rgba(255, 226, 112, .96); outline-offset: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    #table-area.deberc-scene .game-user__img-wrap.deberc-open-card-recipient--highlight {
        animation-duration: 1ms;
        outline: 1px solid rgba(255, 226, 112, .96);
        outline-offset: 3px;
    }
    #table-area.deberc-scene #deberc-open-card-hint { transition: none; }
}

@media (max-width: 699px), (orientation: landscape) and (max-height: 699px) {
    #table-area.deberc-scene #deberc-open-card-rule { translate: 0 -20px; }
}

#table-area.deberc-scene #deberc-round-trump-anchor {
    position: absolute !important;
    top: calc(100% + 18px) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: max-content;
    transform: translateX(-50%) scale(1.5) !important;
    transform-origin: top center !important;
}

#table-area.deberc-scene #deberc-round-trump-anchor #deberc-round-status {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 auto !important;
    transform: none !important;
}

/* The open-card click now identifies the concrete recipient at their avatar. */
#table-area.deberc-scene #deberc-round-trump-anchor .deberc-round-status__name {
    display: none;
}

#table-area.deberc-scene #deberc-vskryshka {
    /* Same top coordinate as the uppermost horizontal deck back. */
    top: 96px !important;
    left: 41px !important;
    transform: rotate(90deg) !important;
    transform-origin: center !important;
}

#table-area.deberc-scene .deberc-deck-group #deberc-round-status {
    transform-origin: top center !important;
}

/* The top player's trick stack follows the same below-avatar axis as the
   left player's stack. */
#table-area.deberc-scene #position2 #deberc-trick2 {
    top: clamp(164px, calc(19vh - 25px), 275px) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -20px) !important;
    transform-origin: top center !important;
}

#table-area.deberc-scene .deberc-self-hand {
    grid-column: 1 / -1;
    grid-row: 3;
    position: relative;
    inset: auto;
    display: grid;
    grid-template: auto 1fr / 1fr auto 1fr;
    align-items: end;
    min-width: 0;
    min-height: 0;
    pointer-events: none;
    z-index: 12;
}

#table-area.deberc-scene #user-cards-in-hand {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative !important;
    inset: auto !important;
    align-self: end;
    width: calc(100% + var(--scene-inline-safe) + var(--scene-inline-safe-end) - 12px) !important;
    margin: 0 calc(6px - var(--scene-inline-safe-end)) 0 calc(6px - var(--scene-inline-safe)) !important;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    transform: none !important;
    pointer-events: auto;
}

#table-area.deberc-scene #user-cards-in-hand .card-sprite {
    position: relative !important;
    inset: auto !important;
    margin-left: var(--deberc-hand-gap, 4px) !important;
    transition: filter 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
    #table-area.deberc-scene #user-cards-in-hand .card-sprite:hover {
        filter: brightness(1.12) drop-shadow(0 7px 6px rgba(0, 0, 0, .38));
        z-index: 30;
    }
}

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

#table-area.deberc-scene .game-message {
    grid-column: 2;
    grid-row: 1;
    position: relative !important;
    inset: auto !important;
    width: fit-content;
    max-width: min(70cqw, 520px) !important;
    margin: 0 auto var(--scene-gap) !important;
    transform: none !important;
    text-align: center;
}

#table-area.deberc-scene .deberc-self-hand #game-user__control {
    position: absolute !important;
    inset: auto !important;
    left: 50% !important;
    bottom: 194px !important;
    display: flex;
    gap: var(--scene-gap);
    align-items: center;
    justify-content: end;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 24;
}

#table-area.deberc-scene .deberc-self-hand #game-user__control .game-button {
    position: static !important;
    margin: 0 !important;
    white-space: nowrap;
}

#table-area.deberc-scene .deberc-seat--self {
    position: absolute !important;
    top: auto !important;
    right: 120px !important;
    bottom: calc(var(--hand-edge-offset) + var(--hand-visual-height) + var(--self-hand-gap)) !important;
    left: auto !important;
    width: clamp(88px, 14cqw, 150px);
    height: clamp(58px, 10cqh, 92px);
    margin-bottom: 0 !important;
    translate: 0 !important;
    transform: scale(var(--self-scale)) !important;
    transform-origin: bottom right;
    z-index: 18;
    pointer-events: none;
}

/* A spectator sees the lower player as another table participant. Keep that
   seat on the same centre line as the upper player instead of the local
   player's right-hand control lane. */
body.show-game #table-area.deberc-scene .deberc-seat--self {
    right: auto !important;
    left: 50% !important;
    translate: -50% 0 !important;
    transform-origin: bottom center;
}

#table-area.deberc-scene .deberc-seat--self #position1,
#table-area.deberc-scene .deberc-seat--self #position1 .game-user {
    position: relative !important;
    inset: auto !important;
    width: 200px !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
}

#table-area.deberc-scene .deberc-seat--self #position1 .game-user__avatar {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
}

/* The actual portrait circle, not #position1's 200px legacy box, owns the
   local declarations anchor. */
#table-area.deberc-scene .deberc-seat--self #position1 .game-user__avatar-badge {
    anchor-name: --deberc-position1-avatar;
}

/* The local trick stack is part of #position1. Its lower edge follows the
   player's lower edge, so it cannot drift into the hand on another viewport. */
#table-area.deberc-scene .deberc-seat--self #position1 {
    position: relative !important;
    translate: 0 calc(-20px / var(--self-scale));
}

#table-area.deberc-scene .deberc-seat--self #position1 .game-user__name {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: max-content;
    max-width: 150px;
    margin: 0 auto !important;
    overflow: hidden;
    transform: none !important;
    text-align: center !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px !important;
    line-height: 22px !important;
}

/* A spectator's lower player uses the same compact portrait stack as every
   other seat: the card fan sits behind the avatar instead of starting below
   the profile block. */
body.show-game #table-area.deberc-scene #position1 .game-user__opponent-cards {
    position: absolute !important;
    top: 61px !important;
    left: 50% !important;
    width: 200px !important;
    min-height: 34px;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    text-align: center;
    z-index: 1;
}

body.show-game #table-area.deberc-scene #position1 .game-user__avatar-badge,
body.show-game #table-area.deberc-scene #position1 .game-user__name {
    position: relative !important;
    z-index: 2;
}

/* The leave control only appears while viewing somebody else's table. Keep a
   quiet translucent backing so it remains readable without becoming a black
   visual block over the felt. */
body.show-game.table-game.deberc .game__exit-link {
    background: rgba(8, 38, 31, .34);
    border: 1px solid rgba(155, 225, 218, .22);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    backdrop-filter: blur(3px);
}

body.show-game.table-game.deberc .game__exit-link:hover {
    background: rgba(8, 38, 31, .5);
}

#table-area.deberc-scene #deberc-self-info {
    position: absolute !important;
    left: calc(100% + 18px) !important;
    right: auto !important;
    bottom: calc(100% + 4px) !important;
    width: max-content;
    max-width: min(48cqw, 440px);
    height: auto;
    margin: 0 !important;
    scale: 1;
    transform: none !important;
    overflow: hidden;
}

/* Trick stacks belong to their player zones. Explicit slots prevent the old
   viewport-based coordinates from drifting into the central play or the hand. */
#table-area.deberc-scene #position3 #deberc-trick3 {
    left: 50% !important;
    transform: translate(-50%, -20px) !important;
}

#table-area.deberc-scene #position4 #deberc-trick4 {
    left: 50% !important;
    transform: translate(-50%, -20px) !important;
}

#table-area.deberc-scene .deberc-seat--self #position1 #deberc-trick1 {
    top: auto !important;
    right: calc(100% + 16px) !important;
    bottom: 14px !important;
    left: auto !important;
    translate: 0 -10px;
    transform: none !important;
    transform-origin: bottom right !important;
}

#table-area.deberc-scene #deberc-trump-select {
    top: 50% !important;
    bottom: auto !important;
    --trump-choice-size: clamp(54px, 15cqw, 82px);
    width: min(88cqw, 400px);
    min-width: 0;
    padding: clamp(8px, 2cqh, 16px) clamp(8px, 2cqw, 22px);
    transform: translate(-50%, -50%) !important;
}

#table-area.deberc-scene #deberc-trump-select .deberc-trump-select__title {
    margin-bottom: clamp(5px, 1cqh, 10px);
    font-size: clamp(15px, 2.4vmin, 22px);
}

#table-area.deberc-scene #deberc-trump-select .deberc-trump-select__masts {
    gap: clamp(4px, 1.2cqw, 12px);
}

#table-area.deberc-scene #deberc-trump-select .deberc-trump-mast {
    flex-basis: var(--trump-choice-size);
    width: var(--trump-choice-size);
    height: var(--trump-choice-size);
}

#table-area.deberc-scene #deberc-trump-select .deberc-trump-mast__art {
    width: calc(var(--trump-choice-size) * .66);
    height: calc(var(--trump-choice-size) * .66);
    background-size: 400% 100%;
    -webkit-mask-size: calc(var(--trump-choice-size) * 2.64) calc(var(--trump-choice-size) * .66);
    mask-size: calc(var(--trump-choice-size) * 2.64) calc(var(--trump-choice-size) * .66);
}

#table-area.deberc-scene #deberc-trump-select .deberc-trump-mast--2 .deberc-trump-mast__art {
    background-position: 33.333333% 0;
    -webkit-mask-position: calc(var(--trump-choice-size) * -.66) 0;
    mask-position: calc(var(--trump-choice-size) * -.66) 0;
}

#table-area.deberc-scene #deberc-trump-select .deberc-trump-mast--3 .deberc-trump-mast__art {
    background-position: 66.666667% 0;
    -webkit-mask-position: calc(var(--trump-choice-size) * -1.32) 0;
    mask-position: calc(var(--trump-choice-size) * -1.32) 0;
}

#table-area.deberc-scene #deberc-trump-select .deberc-trump-mast--4 .deberc-trump-mast__art {
    background-position: 100% 0;
    -webkit-mask-position: calc(var(--trump-choice-size) * -1.98) 0;
    mask-position: calc(var(--trump-choice-size) * -1.98) 0;
}

#table-area.deberc-scene #deberc-trump-select .deberc-trump-pass {
    min-width: min(68cqw, 240px);
    min-height: clamp(36px, 6cqh, 46px);
    padding: 7px 24px 9px;
    font-size: clamp(16px, 2.5vmin, 20px);
}

#table-area.deberc-scene #deberc-trump-select.deberc-action-dialog {
    width: min(86cqw, 360px);
    padding: clamp(14px, 2.4cqh, 22px);
}

#table-area.deberc-scene #deberc-trump-select .deberc-trump-select__obligation {
    position: absolute;
    top: clamp(18px, 2.4cqh, 24px);
    left: clamp(18px, 2.4cqw, 24px);
    margin: 0;
}

#table-area.deberc-scene.deberc-trump-select-open #deberc-round-status {
    visibility: hidden;
}

#table-area.deberc-scene #deberc-trump-select.deberc-action-dialog .deberc-trump-select__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(9px, 2cqw, 16px);
    margin-top: clamp(10px, 1.8cqh, 16px);
}

#table-area.deberc-scene #deberc-trump-select.deberc-action-dialog .game-button {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 8px 12px 10px;
    font-size: clamp(15px, 2.2vmin, 19px);
    line-height: 1.05;
    white-space: normal;
}

#table-area.deberc-scene #deberc-trump-select.deberc-action-dialog .game-button__green {
    color: #31502c !important;
    border: 1px solid rgba(112, 151, 100, .72) !important;
    background: linear-gradient(#f2faef, #cbdcc5) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset,
        0 -2px 3px rgba(58, 102, 49, .12) inset,
        0 4px 9px rgba(55, 48, 31, .2) !important;
    text-shadow: 0 1px 0 #fff;
}

#table-area.deberc-scene #deberc-trump-select.deberc-action-dialog .game-button__yellow {
    color: #51483d !important;
    border: 1px solid rgba(128, 112, 91, .34) !important;
    background: linear-gradient(#f8f5ed, #ddd6ca) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset,
        0 -2px 3px rgba(73, 62, 48, .1) inset,
        0 4px 9px rgba(55, 48, 31, .16) !important;
    text-shadow: 0 1px 0 #fff;
    filter: none;
    opacity: 1;
}

#table-area.deberc-scene #deberc-trump-select.deberc-action-dialog .game-button__green:hover,
#table-area.deberc-scene #deberc-trump-select.deberc-action-dialog .game-button__green:focus-visible {
    color: #244520 !important;
    border-color: rgba(83, 130, 70, .88) !important;
    background: linear-gradient(#f7fff4, #bcd4b4) !important;
    box-shadow: 0 0 0 3px rgba(116, 160, 102, .18),
        0 6px 12px rgba(45, 76, 38, .2) !important;
    translate: 0 -1px;
}

#table-area.deberc-scene #deberc-trump-select.deberc-action-dialog .game-button__yellow:hover,
#table-area.deberc-scene #deberc-trump-select.deberc-action-dialog .game-button__yellow:focus-visible {
    color: #413a31 !important;
    border-color: rgba(111, 96, 77, .54) !important;
    background: linear-gradient(#fffdf8, #d2cabd) !important;
    box-shadow: 0 0 0 3px rgba(124, 108, 87, .12),
        0 6px 12px rgba(55, 48, 31, .18) !important;
    translate: 0 -1px;
}

#table-area.deberc-scene #deberc-trump-select.deberc-action-dialog .game-button:active {
    translate: 0 1px;
    box-shadow: 0 2px 5px rgba(62, 48, 31, .22) inset !important;
}

#table-area.deberc-scene .deberc-action-dialog__swap-icon {
    display: inline-block;
    margin-right: .38em;
    color: #9a6c2d;
    font-size: 1.2em;
    font-weight: 500;
    line-height: .8;
    vertical-align: -.04em;
}

#table-area.deberc-scene.deberc-trump-select-open .game-message {
    display: none !important;
}

#table-area.deberc-scene #user-cards-in-hand {
    bottom: 58px !important;
}

/* Wide landscape (tablet-height, not the short-phone strip handled below via
   position:absolute) never resets this relative offset the way portrait
   does. The hand stays position:relative here (in grid-row:2), so the 58px
   "bottom" shifts it UP from its normal grid slot by 58px — enough to climb
   into grid-row:1, where .game-message renders "Ваш ход" / "Неверный ход",
   so the two visually overlap. Reuse the same fix portrait already applies. */
@media (orientation: landscape) and (min-height: 600px) {
    #table-area.deberc-scene #user-cards-in-hand {
        bottom: 0 !important;
    }
}

/* Portrait is a taller composition: side seats occupy the shoulders above the
   centre and the hand receives a dedicated lower quarter. */
@media (orientation: portrait) {
    #table-area.deberc-scene {
        --seat-scale: .5;
        --top-seat-scale: .62;
        --self-scale: .52;
        --table-scale: .71;
        --deck-scale: .62;
        /* Keep a real visual gap between #position1 and the hand after the
           portrait seat is scaled. */
        --self-hand-gap: -8px;
        --playing-area-half-width: 101.53px;
        --hand-reserve: clamp(206px, 30dvh, 270px);
        grid-template-columns: minmax(74px, 1fr) minmax(150px, 1.5fr) minmax(74px, 1fr);
        grid-template-rows: minmax(92px, 15%) minmax(250px, 1fr) var(--hand-reserve);
    }

    #table-area.deberc-scene .game-user__position--deberc3,
    #table-area.deberc-scene .game-user__position--deberc4 {
        align-self: start;
        margin-top: clamp(20px, 7cqh, 70px) !important;
    }

    #table-area.deberc-scene #deberc-self-info {
        /* Keep the local score/declarations in the viewport. To the right of
           #position1 they fall outside a narrow phone scene. */
        right: auto !important;
        bottom: calc(100% + 6px) !important;
        left: 50% !important;
        max-width: min(84cqw, 320px);
        transform: translateX(-50%) !important;
    }

    #table-area.deberc-scene #position3 #deberc-trick3,
    #table-area.deberc-scene #position4 #deberc-trick4 {
        top: clamp(164px, calc(19vh - 25px), 275px) !important;
    }

    #table-area.deberc-scene #deberc-trump-select {
        --trump-choice-size: clamp(50px, 13cqw, 70px);
        top: clamp(calc(306.7px + 7.27cqw), 50cqh, 500px) !important;
        padding-block: 6px;
    }

    #table-area.deberc-scene #deberc-trump-select .deberc-trump-select__actions {
        margin-top: 5px;
    }

    #table-area.deberc-scene #deberc-trump-select .deberc-trump-pass {
        min-height: 34px;
        padding-block: 5px 7px;
    }

    #table-area.deberc-scene .card-deck {
        grid-row: 1;
        justify-self: end;
        margin: clamp(54px, 11cqh, 104px) 34px 0 0;
        transform: scale(var(--deck-scale)) !important;
    }

    #table-area.deberc-scene .game-message {
        max-width: min(64cqw, 300px) !important;
    }

    #table-area.deberc-scene .deberc-self-hand #game-user__control {
        position: absolute !important;
        right: auto !important;
        left: 50% !important;
        bottom: 258px !important;
    }

    /* The hand owns the lower safe area. The former 58px relative offset made
       cards float above the bottom edge on phones. */
    #table-area.deberc-scene #user-cards-in-hand {
        bottom: 0 !important;
    }

    #table-area.deberc-scene .deberc-seat--self {
        align-self: start;
        margin-bottom: 0 !important;
    }
}

@media (orientation: portrait) and (max-width: 599px) {
    #table-area.deberc-scene .card-deck {
        top: calc(var(--scene-top-safe) + 112px) !important;
    }

}

@media (orientation: portrait) and (max-width: 375px) {
    #table-area.deberc-scene:has(#deberc-trump-select .deberc-trump-mast) #deberc-trump-select {
        width: calc(100cqw - 92px);
    }

    #table-area.deberc-scene:has(#deberc-trump-select .deberc-trump-mast) .deberc-seat--self {
        right: 0 !important;
        left: auto !important;
        transform: scale(.38) !important;
        transform-origin: bottom right;
    }
}

@media (orientation: portrait) and (max-width: 360px) {
    #table-area.deberc-scene {
        --deck-scale: .5;
    }

    #table-area.deberc-scene .game-user__position--deberc2 {
        translate: -54px 0;
    }

    #table-area.deberc-scene .card-deck {
        top: calc(var(--scene-top-safe) + 88px) !important;
    }

    #table-area.deberc-scene:not(:has(#deberc-trump-select .deberc-trump-mast)) .deberc-seat--self {
        right: auto !important;
        left: 50% !important;
        translate: -50% 0 !important;
        transform-origin: bottom center;
    }

    #table-area.deberc-scene:not(:has(#deberc-trump-select .deberc-trump-mast)) #deberc-self-info {
        right: auto !important;
        left: 50% !important;
        bottom: calc(100% + 4px) !important;
        transform: translateX(-50%) !important;
    }

}

@media (orientation: portrait) and (min-width: 600px) {
    #table-area.deberc-scene {
        --seat-scale: 1;
        --top-seat-scale: 1;
        --self-scale: 1;
        --table-scale: 1;
        --deck-scale: 1;
        --last-trick-scale: 1;
        --playing-area-half-width: 143px;
    }

    #table-area.deberc-scene:has(#deberc-trump-select .deberc-trump-mast) .deberc-seat--self {
        transform: scale(.6) !important;
    }

}

@media (orientation: portrait) and (max-height: 700px) {
    #table-area.deberc-scene {
        --hand-visual-height: 103px;
    }

    #table-area.deberc-scene .deberc-seat--self {
        align-self: end;
    }

    #table-area.deberc-scene #user-cards-in-hand {
        transform: none !important;
    }
}

/* A narrow scene is still a complete table. Do not shrink its avatars, centre
   cards or deck through the legacy phone composition; only their coordinates
   adapt to the available viewport. */
@media (max-width: 599px), (orientation: landscape) and (max-height: 599px) {
    #table-area.deberc-scene {
        --seat-scale: .85;
        --top-seat-scale: .88;
        --self-scale: .72;
        --table-scale: 1;
        /* This breakpoint restores the full-size table. Keep the dependent
           last-trick anchor in that same coordinate system instead of the
           portrait .71-scale value. */
        --playing-area-half-width: 143px;
        --deck-scale: .8;
    }

    #table-area.deberc-scene .card-deck {
        top: calc(var(--scene-top-safe) + 12px) !important;
        margin: 0 !important;
        transform: scale(var(--deck-scale)) !important;
    }


    #table-area.deberc-scene .deberc-seat--self {
        transform: scale(var(--self-scale)) !important;
    }

    /* The local portrait is an avatar, not an extra-decorative marker: keep
       it at the same rendered scale as the upper opponent. */
    #table-area.deberc-scene .deberc-seat--self {
        transform: scale(.704) !important;
    }

    #table-area.deberc-scene .game-user__position--deberc2 {
        transform: scale(.704) !important;
    }

    #table-area.deberc-scene .game-user__position--deberc3,
    #table-area.deberc-scene .game-user__position--deberc4 {
        transform: scale(.68) !important;
    }
}

@media (orientation: landscape) and (max-height: 599px) {
    #table-area.deberc-scene {
        --hand-edge-offset: 7px;
        --hand-visual-height: 98.4px;
    }

    #table-area.deberc-scene .deberc-self-hand {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: var(--hand-visual-height);
    }

    /* .deberc-self-hand стал фиксированной по высоте absolute-полосой для рук —
       карты внутри неё позиционируются absolute и больше не участвуют в grid
       (см. #user-cards-in-hand ниже), поэтому .game-message (всё ещё в
       grid-row:1 старой раскладки) рисуется в той же полосе и наезжает на
       карты снизу. Явно поднимаем сообщение НАД полосой руки. */
    #table-area.deberc-scene .game-message {
        position: absolute !important;
        left: 50% !important;
        bottom: calc(100% + 6px) !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
    }

    #table-area.deberc-scene #user-cards-in-hand {
        position: absolute !important;
        right: 7px !important;
        bottom: 7px !important;
        left: 7px !important;
        grid-row: auto;
        width: auto !important;
        margin: 0 !important;
        transform: scale(.8) !important;
        transform-origin: bottom center;
    }
}

/* The compact phone composition scales the centre and its dependent
   last-trick cluster together, so their measured horizontal anchor remains
   intact. */
@media (max-width: 609px), (orientation: landscape) and (max-height: 609px) {
    #table-area.deberc-scene {
        --table-scale: .9;
        --playing-area-half-width: 128.7px;
    }

    #table-area.deberc-scene .deberc-seat--self {
        transform: scale(.704) !important;
    }

    #table-area.deberc-scene .game-user__position--deberc2 {
        transform: scale(.704) !important;
    }

    #table-area.deberc-scene .game-user__position--deberc3,
    #table-area.deberc-scene .game-user__position--deberc4 {
        transform: scale(.68) !important;
    }
}

/* On narrow screens the deck belongs to the scene's free top-right corner,
   rather than to the older portrait grid lane. */
@media (max-width: 699px), (orientation: landscape) and (max-height: 699px) {
    #table-area.deberc-scene .card-deck {
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        margin: 0 !important;
        translate: none !important;
        transform-origin: top right;
    }

    #table-area.deberc-scene .card-deck > .card-deck__back,
    #table-area.deberc-scene .card-deck > #card-deck__trump-card,
    #table-area.deberc-scene .card-deck > #deberc-vskryshka {
        translate: 0 -20px !important;
    }
}

@media (max-width: 999px), (orientation: landscape) and (max-height: 999px) {
    #table-area.deberc-scene .game-user__position--deberc3 {
        translate: calc(-1 * (var(--scene-inline-safe) + 34px)) -20px;
    }

    #table-area.deberc-scene .game-user__position--deberc4 {
        translate: calc(var(--scene-inline-safe-end) + 34px) -20px;
    }
}

/* On phone-width scenes keep both side seats 14px closer to the centre than
   the tablet composition, while retaining the same safe-area compensation. */
@media (max-width: 609px), (orientation: landscape) and (max-height: 609px) {
    #table-area.deberc-scene .game-user__position--deberc3 {
        translate: calc(-1 * (var(--scene-inline-safe) + 20px)) -20px;
    }

    #table-area.deberc-scene .game-user__position--deberc4 {
        translate: calc(var(--scene-inline-safe-end) + 20px) -20px;
    }
}

@media (max-width: 899px), (orientation: landscape) and (max-height: 899px) {
    #table-area.deberc-scene {
        --last-trick-scale: .65;
    }
}

@media (max-width: 609px), (orientation: landscape) and (max-height: 609px) {
    #table-area.deberc-scene {
        --last-trick-scale: .6;
    }
}

@media (max-width: 549px), (orientation: landscape) and (max-height: 549px) {
    #table-area.deberc-scene {
        --table-scale: .8;
        --playing-area-half-width: 114.4px;
        --last-trick-scale: .5;
        --deck-scale: .64;
    }
}

@media (max-width: 489px), (orientation: landscape) and (max-height: 489px) {
    #table-area.deberc-scene {
        --table-scale: .7;
        --playing-area-half-width: 100.1px;
        --last-trick-scale: .4;
    }
}

@media (max-width: 409px), (orientation: landscape) and (max-height: 409px) {
    #table-area.deberc-scene {
        --scene-centre-shift: 40px;
    }
}

@media (max-width: 449px), (orientation: landscape) and (max-height: 449px) {
    #table-area.deberc-scene .game-user__position--deberc2 {
        translate: -60px 0;
    }
}

@media (max-width: 399px), (orientation: landscape) and (max-height: 399px) {
    #table-area.deberc-scene .deberc-seat--self {
        transform: scale(.5632) !important;
    }

    #table-area.deberc-scene .game-user__position--deberc2 {
        transform: scale(.5632) !important;
    }

    #table-area.deberc-scene .game-user__position--deberc3,
    #table-area.deberc-scene .game-user__position--deberc4 {
        transform: scale(.544) !important;
    }
}

@media (max-height: 499px) {
    #table-area.deberc-scene {
        --deck-scale: .512;
    }

    #table-area.deberc-scene .card-deck {
        top: -34px !important;
    }

    #table-area.deberc-scene .game-user__position--deberc3 {
        translate: calc(-1 * (var(--scene-inline-safe) + 34px)) -90px;
    }

    #table-area.deberc-scene .game-user__position--deberc4 {
        translate: calc(var(--scene-inline-safe-end) + 34px) -90px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #table-area.deberc-scene .deberc-stol-card,
    #table-area.deberc-scene .deberc-stol-fly {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 800px) {
    /* The lower edge belongs to the hand. Keep the menu in its own upper
       corner, away from the cards and the connection state. */
    body.table-game.deberc #bottom-nav-show-button {
        top: calc(8px + env(safe-area-inset-top)) !important;
        right: auto !important;
        bottom: auto !important;
        left: calc(8px + env(safe-area-inset-left)) !important;
        z-index: 30;
    }

    /* Connection state stays available but is deliberately behind the
       transparent coordinate scene and its playable cards. */
    body.table-game.deberc #bottom-nav__info-block {
        position: fixed !important;
        right: calc(5px + env(safe-area-inset-right)) !important;
        bottom: calc(5px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        width: 11px !important;
        height: 11px !important;
        min-width: 11px !important;
        min-height: 11px !important;
        padding: 0 !important;
        z-index: 0;
        pointer-events: none;
    }

    body.table-game.deberc #bottom-nav__info-block-internet {
        width: 11px !important;
        height: 11px !important;
        background-size: 161px auto !important;
    }

    #table-area.deberc-scene { z-index: 1; }
}

/* Opt-in geometry map: /play?layout_debug=1.
   It is a local diagnostic overlay and never appears during normal play. */
html.deberc-layout-debug #playing-area,
html.deberc-layout-debug #deberc-last-trick,
html.deberc-layout-debug #deberc-round-trump-anchor,
html.deberc-layout-debug #deberc-round-status,
html.deberc-layout-debug #position1,
html.deberc-layout-debug #position2,
html.deberc-layout-debug #position3,
html.deberc-layout-debug #position4,
html.deberc-layout-debug #deberc-trick1,
html.deberc-layout-debug #deberc-trick2,
html.deberc-layout-debug #deberc-trick3,
html.deberc-layout-debug #deberc-trick4,
html.deberc-layout-debug #user-cards-in-hand,
html.deberc-layout-debug #deberc-self-info,
html.deberc-layout-debug .card-deck {
    outline: 1px dashed #ff27c8 !important;
    outline-offset: 2px;
}

html.deberc-layout-debug [data-deberc-debug-name] {
    cursor: default !important;
}

/* Let the browser DevTools picker reach real scene nodes instead of selecting
   the full-screen surface for every point. Interactive descendants retain
   their own pointer-events:auto declarations. */
html.deberc-layout-debug,
html.deberc-layout-debug body.table-game.deberc,
html.deberc-layout-debug #table-area.deberc-scene {
    pointer-events: none;
}

html.deberc-layout-debug [data-deberc-debug-name] {
    pointer-events: auto;
}

/* DevTools inspection mode: expose every real descendant, not only the
   hand-picked geometry anchors above. Full-scene layout wrappers themselves
   stay transparent, while their children remain individually selectable. */
html.deberc-layout-debug #table-area.deberc-scene * {
    pointer-events: auto;
}

html.deberc-layout-debug #table-area.deberc-scene .deberc-seat--self {
    pointer-events: none;
}

#deberc-layout-copy-toast {
    position: fixed;
    z-index: 2147483647;
    top: max(14px, env(safe-area-inset-top));
    left: 50%;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 8px;
    color: #fff;
    background: rgba(34, 24, 45, .94);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
    font: 700 13px/18px sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity .14s ease, transform .14s ease;
}

#deberc-layout-copy-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

html.deberc-layout-debug #table-area.deberc-scene::after,
html.deberc-layout-debug #playing-area::after,
html.deberc-layout-debug #deberc-last-trick::after,
html.deberc-layout-debug #deberc-round-trump-anchor::after,
html.deberc-layout-debug #position1::after,
html.deberc-layout-debug #position2::after,
html.deberc-layout-debug #position3::after,
html.deberc-layout-debug #position4::after,
html.deberc-layout-debug #deberc-trick1::after,
html.deberc-layout-debug #deberc-trick2::after,
html.deberc-layout-debug #deberc-trick3::after,
html.deberc-layout-debug #deberc-trick4::after,
html.deberc-layout-debug #user-cards-in-hand::after,
html.deberc-layout-debug #deberc-self-info::after,
html.deberc-layout-debug .card-deck::after {
    position: absolute;
    z-index: 999;
    top: -13px;
    left: 0;
    padding: 1px 3px;
    color: #fff;
    background: #a0007c;
    font: 10px/12px monospace;
    white-space: nowrap;
    pointer-events: none;
}

html.deberc-layout-debug #table-area.deberc-scene::after { content: 'scene'; }
html.deberc-layout-debug #playing-area::after { content: 'current cards: table centre'; }
html.deberc-layout-debug #deberc-last-trick::after { content: 'last trick ← current cards'; }
html.deberc-layout-debug #deberc-round-trump-anchor::after { content: '#deberc-round-trump-anchor ↓ last trick'; }
html.deberc-layout-debug #position1::after { content: '#position1 ↓ hand + measured gap'; }
html.deberc-layout-debug #position2::after { content: '#position2 → table'; }
html.deberc-layout-debug #position3::after { content: '#position3 → table'; }
html.deberc-layout-debug #position4::after { content: '#position4 → table'; }
html.deberc-layout-debug #deberc-trick1::after { content: '#deberc-trick1'; }
html.deberc-layout-debug #deberc-trick2::after { content: '#deberc-trick2'; }
html.deberc-layout-debug #deberc-trick3::after { content: '#deberc-trick3'; }
html.deberc-layout-debug #deberc-trick4::after { content: '#deberc-trick4'; }
html.deberc-layout-debug #user-cards-in-hand::after { content: 'hand top ← #position1'; }
html.deberc-layout-debug #deberc-self-info::after { content: 'score / combinations ← #position1'; }
html.deberc-layout-debug .card-deck::after { content: 'deck → table centre'; }

html.deberc-layout-debug .game-user__deberc-combs::before {
    content: 'combinations anchor';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 0;
    display: block;
    width: max-content;
    padding: 1px 3px;
    color: #fff;
    background: #a0007c;
    font: 10px/12px monospace;
    white-space: nowrap;
    pointer-events: none;
}

/* Small cards are the inspection targets: their complete groups must remain
   above player artwork and table decorations while debugging geometry. */
html.deberc-layout-debug .game-user__deberc-combs,
html.deberc-layout-debug #deberc-last-trick,
html.deberc-layout-debug #deberc-vskryshka {
    z-index: 1000 !important;
}

/* The real local hand is open. This back-facing fan exists only while the
   geometry inspector is enabled, so the bottom seat can be compared directly
   with the three opponent seats. It follows its avatar block, never the hand. */
html.deberc-layout-debug #position1 .game-user__opponent-cards {
    position: absolute !important;
    /* Same raised avatar-relative offset as the opponent fans. */
    top: 61px !important;
    left: 50% !important;
    display: block !important;
    width: 200px !important;
    min-height: 34px;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    text-align: center;
    z-index: 1;
}

html.deberc-layout-debug #position1 .game-user__avatar-badge,
html.deberc-layout-debug #position1 .game-user__name {
    position: relative !important;
    z-index: 2;
}

html.deberc-layout-debug #deberc-round-trump-anchor #deberc-round-status::before {
    content: '#deberc-round-status ↓ last trick';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 0;
    padding: 1px 3px;
    color: #fff;
    background: #a0007c;
    font: 10px/12px monospace;
    white-space: nowrap;
    width: max-content;
    max-width: none;
}

#deberc-layout-gap-ruler {
    position: fixed;
    z-index: 2147483647;
    box-sizing: border-box;
    width: 0;
    border-left: 2px solid #ff27c8;
    pointer-events: none;
}

#deberc-layout-gap-ruler::after {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    width: 8px;
    height: 100%;
    border-top: 2px solid #ff27c8;
    border-bottom: 2px solid #ff27c8;
}

#deberc-layout-gap-ruler {
    color: #fff;
    background: transparent;
    font: 11px/13px monospace;
    white-space: nowrap;
    text-shadow: 0 1px 1px #000;
}