/*
 * House Dealer Baccarat — reference layout override
 *
 * This file is intentionally scoped to the Baccarat game screen.  It is
 * loaded after the legacy inline styles so older table and phone rules cannot
 * shrink the betting mat, chips, cards, or action buttons again.
 */

#casinoTableGameScreen[data-game="baccarat"] {
    --baccarat-gold: #d9ad45;
    --baccarat-gold-bright: #f4d77e;
    --baccarat-cream: #fff1c4;
    --baccarat-ink: #03130d;
    --baccarat-panel: rgba(1, 24, 15, .92);
    --baccarat-panel-soft: rgba(3, 42, 26, .78);
    --baccarat-line: rgba(219, 178, 65, .64);
    width: 100%;
    min-height: 100svh;
    padding: 5px 0 26px !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    color: #fff8df;
    background:
        radial-gradient(circle at 50% 24%, rgba(5, 77, 47, .42), rgba(0, 14, 9, .9) 68%),
        var(--poker-casino-background),
        #010b07;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

#casinoTableGameScreen[data-game="baccarat"] > .casino-table-shell {
    position: relative !important;
    inset: auto !important;
    width: min(1540px, calc(100vw - 10px)) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Reference header: one calm horizontal status bar with the menu at right. */
#casinoTableGameScreen[data-game="baccarat"] .casino-table-header {
    position: relative !important;
    inset: auto !important;
    z-index: 80;
    width: 100% !important;
    min-height: 74px !important;
    height: auto !important;
    margin: 0 auto 10px !important;
    padding: 10px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    overflow: visible !important;
    border: 1px solid #2f6f49 !important;
    border-radius: 18px !important;
    background: rgba(1, 20, 13, .95) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .46) !important;
}

#casinoTableGameScreen[data-game="baccarat"] .casino-table-header > div:first-child {
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 10px 18px !important;
}

#casinoTableGameScreen[data-game="baccarat"] .casino-table-header h2 {
    margin: 0;
    color: #fff;
    font: 900 clamp(24px, 2.15vw, 34px)/1.05 Arial, sans-serif;
    letter-spacing: -.5px;
    white-space: nowrap;
}

#casinoTableGameScreen[data-game="baccarat"] .casino-table-header p {
    display: block;
    margin: 0;
    color: #f5f0df;
    font-size: clamp(13px, 1.15vw, 17px);
    white-space: nowrap;
}

#casinoTableGameScreen[data-game="baccarat"] .casino-table-header .how-to-play-button {
    min-height: 44px;
    margin: 0;
    padding: 8px 20px;
    border: 1px solid var(--baccarat-gold);
    border-radius: 999px;
    color: var(--baccarat-cream);
    background: linear-gradient(180deg, rgba(34, 44, 18, .96), rgba(9, 25, 15, .96));
    font-size: 13px;
    font-weight: 1000;
    white-space: nowrap;
}

#casinoTableGameScreen[data-game="baccarat"] .game-nav-menu > summary {
    min-width: 152px;
    min-height: 52px;
    border-color: #4d8b62;
    border-radius: 14px;
    color: #fff;
    background: #031a11;
    font-size: 18px;
}

#casinoTableGameScreen[data-game="baccarat"] .rotate-device-prompt,
#casinoTableGameScreen[data-game="baccarat"] #casinoGameStageTitle,
#casinoTableGameScreen[data-game="baccarat"] #casinoVisualPlayers,
#casinoTableGameScreen[data-game="baccarat"] #casinoPlayControls {
    display: none !important;
}

/* Full-width framed table.  Content establishes the height; nothing is scaled. */
#casinoTableGameScreen[data-game="baccarat"] .casino-game-stage {
    position: relative !important;
    inset: auto !important;
    isolation: isolate;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: min(880px, calc(100svh - 95px)) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: clamp(18px, 1.7vw, 26px) !important;
    overflow: hidden !important;
    border: 1px solid var(--baccarat-gold) !important;
    border-radius: 38px !important;
    background-color: #043821 !important;
    background-image:
        radial-gradient(ellipse at 61% 36%, rgba(15, 121, 72, .4), rgba(1, 36, 22, .76) 58%, rgba(0, 15, 10, .96)),
        linear-gradient(90deg, rgba(0, 0, 0, .16), transparent 19%, transparent 82%, rgba(0, 0, 0, .22)),
        var(--poker-table-art) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover, cover, cover !important;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, .66),
        inset 0 0 90px rgba(0, 0, 0, .58),
        inset 0 0 0 8px rgba(8, 23, 17, .88),
        inset 0 0 0 11px rgba(217, 173, 69, .72) !important;
}

#casinoTableGameScreen[data-game="baccarat"] .casino-game-stage::after {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 0;
    border: 1px solid rgba(236, 202, 104, .36);
    border-radius: 30px;
    background: none;
    pointer-events: none;
}

#casinoTableGameScreen[data-game="baccarat"] #baccaratVisual {
    position: relative;
    z-index: 2;
    width: 100% !important;
    min-height: min(815px, calc(100svh - 150px)) !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 365px) minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr;
    align-items: stretch !important;
    align-content: start !important;
    justify-items: stretch !important;
    gap: 10px clamp(20px, 2.2vw, 34px) !important;
    color: #fff8df;
    text-align: center;
}

#casinoTableGameScreen[data-game="baccarat"] #baccaratVisual[hidden] {
    display: none !important;
}

/* The real heading remains in the DOM for semantics; the full-width plaque
 * below is its visual counterpart and avoids showing the title twice. */
#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* The supplied reference has a large ornamental BACCARAT plaque. */
#casinoTableGameScreen[data-game="baccarat"] #baccaratVisual::before {
    content: "❦   BACCARAT   ❦";
    grid-column: 1 / -1;
    min-height: 72px;
    display: grid;
    place-items: center;
    margin: -2px 8px 0;
    border: 2px solid rgba(213, 169, 60, .78);
    border-radius: 22px 22px 10px 10px;
    color: #f8df98;
    background:
        linear-gradient(90deg, rgba(1, 23, 15, .96), rgba(9, 65, 39, .96) 50%, rgba(1, 23, 15, .96));
    box-shadow:
        inset 0 0 34px rgba(0, 0, 0, .64),
        0 8px 22px rgba(0, 0, 0, .36);
    font: 900 clamp(34px, 3.55vw, 52px)/1 Georgia, "Times New Roman", serif;
    letter-spacing: clamp(2px, .55vw, 8px);
    text-shadow: 0 3px 0 #3a2605, 0 0 18px rgba(244, 207, 99, .25);
}

/* Leaderboard column. */
#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    min-width: 0;
    margin: 0;
    padding: 20px 12px 16px;
    overflow: hidden;
    border: 2px solid var(--baccarat-gold);
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(180deg, rgba(1, 30, 18, .97), rgba(1, 20, 13, .94));
    box-shadow: inset 0 0 36px rgba(0, 0, 0, .48), 0 14px 34px rgba(0, 0, 0, .35);
    text-align: left;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard-heading {
    padding: 0 8px 16px;
    border-bottom: 1px solid rgba(216, 173, 69, .75);
    text-align: center;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard-heading strong {
    display: block;
    color: #f2d36f;
    font: 900 clamp(25px, 2vw, 32px)/1.1 Georgia, serif;
    letter-spacing: 1px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard-heading strong::before,
#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard-heading strong::after {
    content: "❧";
    display: inline-block;
    margin: 0 8px;
    color: #d7a634;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard-heading strong::after {
    transform: scaleX(-1);
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard-heading span {
    display: block;
    margin-top: 5px;
    color: #e3c87b;
    font-size: 13px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard ol {
    display: grid;
    gap: 0;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard li {
    min-width: 0;
    min-height: 76px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 0;
    border-bottom: 1px solid rgba(105, 142, 116, .44);
    border-radius: 12px;
    background: transparent;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard li.you {
    border: 1px solid #7bdc7b;
    color: #b8ffaf;
    background: linear-gradient(90deg, rgba(10, 75, 42, .86), rgba(5, 43, 27, .6));
    box-shadow: 0 0 18px rgba(78, 226, 104, .3), inset 0 0 15px rgba(47, 196, 78, .12);
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard li.empty {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    color: #b8c9be;
    text-align: center;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard .rank {
    width: 40px;
    min-width: 40px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 2px solid #d6ac47;
    border-radius: 50%;
    color: #ffe28b;
    background: radial-gradient(circle, #21331f, #07140d);
    font-size: 17px;
    font-weight: 1000;
    box-shadow: inset 0 0 9px rgba(0, 0, 0, .55);
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard .name {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: inherit;
    font-size: 15px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard .name::before {
    content: "♠";
    flex: 0 0 33px;
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(222, 179, 67, .72);
    border-radius: 50%;
    color: #e2bd5b;
    background: radial-gradient(circle at 50% 35%, #20593c, #071b12 72%);
    font-size: 18px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard .chips {
    color: #fff6d2;
    font-size: 17px;
    font-weight: 1000;
    text-align: right;
    white-space: nowrap;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard .chips small {
    display: block;
    margin-top: 2px;
    color: #dfb947;
    font-size: 9px;
    letter-spacing: .4px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard .reference-panel-button {
    width: calc(100% - 16px);
    min-height: 48px;
    display: block;
    margin: 14px auto 0;
    padding: 8px 10px;
    border: 1px solid #b88e34;
    border-radius: 14px;
    color: #f3cf6e;
    background: rgba(1, 30, 19, .9);
    font-size: 12px;
    font-weight: 1000;
    cursor: pointer;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard .reference-panel-button:hover,
#casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard .reference-panel-button:focus-visible {
    border-color: #ffe177;
    outline: 2px solid rgba(255, 225, 119, .6);
    outline-offset: 2px;
    color: #ffe9a7;
}

/* Main betting/reveal column. */
#casinoTableGameScreen[data-game="baccarat"] .baccarat-main {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    align-self: start;
    gap: 7px !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-round-meta {
    order: 0;
    min-height: 28px;
    display: grid;
    justify-items: center;
    gap: 0;
    margin: 0;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-round-meta > strong {
    display: none;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-round-meta span {
    min-width: min(390px, 88%);
    min-height: 32px;
    display: grid;
    place-items: center;
    padding: 5px 22px;
    border: 1px solid var(--baccarat-gold);
    border-radius: 999px;
    color: #bfff82;
    background: linear-gradient(180deg, rgba(8, 86, 44, .94), rgba(2, 43, 27, .96));
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .36);
    font-size: 14px;
    font-weight: 1000;
    letter-spacing: 1px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-result-banner {
    order: 1;
    width: min(650px, 100%);
    min-height: 44px;
    display: grid;
    place-items: center;
    gap: 2px;
    margin: 0 auto;
    padding: 5px 14px;
    border: 1px solid var(--baccarat-gold);
    border-radius: 17px;
    color: #f7e5b4;
    background: rgba(1, 35, 22, .91);
    text-align: center;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-result-banner strong {
    color: #ffd65d;
    font-size: 17px;
    letter-spacing: .3px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-result-banner span {
    font-size: 11px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-result-banner.player {
    border-color: #70bcff;
    box-shadow: 0 0 24px rgba(70, 164, 255, .42);
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-result-banner.banker {
    border-color: #ff7b72;
    box-shadow: 0 0 24px rgba(255, 73, 73, .42);
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-result-banner.tie {
    border-color: #79df83;
    box-shadow: 0 0 24px rgba(72, 213, 100, .4);
}

/* Large, directly clickable betting areas from the supplied reference. */
#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons {
    order: 2;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr .86fr 1fr !important;
    gap: clamp(10px, 1.5vw, 22px) !important;
    margin: 0 !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button {
    position: relative;
    min-width: 0;
    min-height: clamp(152px, 12vw, 174px) !important;
    display: grid !important;
    align-content: center;
    justify-items: center;
    gap: 5px !important;
    padding: 12px 8px !important;
    overflow: hidden;
    border-width: 3px !important;
    border-radius: 24px !important;
    color: #fff4cf;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, .58), 0 9px 22px rgba(0, 0, 0, .28);
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button::after {
    content: "❦";
    display: block;
    margin-top: 2px;
    color: rgba(244, 213, 126, .48);
    font: 20px/1 Georgia, serif;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button.player {
    border-color: #69baf1 !important;
    background: linear-gradient(145deg, #154e71, #062b40 72%) !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button.tie {
    border-color: #77cb80 !important;
    background: linear-gradient(145deg, #176b37, #073b1d 72%) !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button.banker {
    border-color: #e96f67 !important;
    background: linear-gradient(145deg, #8d221f, #51110f 72%) !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button strong {
    display: block;
    max-width: 100%;
    color: #fff0cc;
    font: 900 clamp(31px, 3.3vw, 54px)/1 Georgia, "Times New Roman", serif;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .48);
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button span {
    display: block;
    margin: 0;
    color: #f5d995;
    font: 700 clamp(19px, 1.9vw, 29px)/1.1 Georgia, serif;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button small {
    display: block;
    min-height: 18px;
    margin: 1px 0 0;
    color: #fff;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 1000;
    letter-spacing: .7px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button:hover:not(:disabled),
#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button:focus-visible:not(:disabled) {
    transform: translateY(-4px);
    filter: brightness(1.12);
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button.active,
#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button[aria-pressed="true"] {
    outline: 4px solid #ffe778 !important;
    outline-offset: 3px !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 0 34px rgba(255, 220, 77, .76), inset 0 0 38px rgba(255, 255, 255, .16) !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
}

/* Chips get their own full-width row; no tiny console squeeze. */
#casinoTableGameScreen[data-game="baccarat"] .baccarat-wager-console {
    order: 3;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 6px 10px 8px !important;
    border: 1px solid rgba(220, 178, 67, .72) !important;
    border-radius: 24px !important;
    background: rgba(0, 25, 16, .88) !important;
    box-shadow: inset 0 0 26px rgba(0, 0, 0, .4);
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    display: flex !important;
    align-items: flex-start;
    justify-content: space-evenly !important;
    gap: clamp(8px, 1.4vw, 20px) !important;
    padding: 2px 4px 7px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-padding-inline: 10px;
    scrollbar-width: thin;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button {
    position: relative;
    flex: 0 0 clamp(82px, 7vw, 98px) !important;
    width: clamp(82px, 7vw, 98px) !important;
    min-width: clamp(82px, 7vw, 98px) !important;
    min-height: clamp(90px, 7.5vw, 106px) !important;
    display: grid;
    place-items: center;
    align-content: start;
    padding: 1px 3px 5px !important;
    border: 2px solid transparent !important;
    border-radius: 18px !important;
    color: #f7d477;
    background: transparent !important;
    cursor: pointer;
    touch-action: manipulation;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray img {
    width: clamp(74px, 6.4vw, 90px) !important;
    height: clamp(74px, 6.4vw, 90px) !important;
    margin: 0 auto !important;
    object-fit: contain;
    filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .75));
    pointer-events: none;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button > span {
    position: absolute;
    z-index: 3;
    top: clamp(28px, 3.25vw, 43px);
    left: 50%;
    min-width: 48%;
    display: block;
    margin: 0 !important;
    padding: 4px 5px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 228, 138, .78);
    border-radius: 999px;
    color: #fff4bd;
    background: rgba(3, 24, 16, .92);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .6);
    font-size: clamp(12px, 1.05vw, 16px) !important;
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 2px 2px #000;
    pointer-events: none;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button::after {
    content: attr(data-count);
    position: absolute;
    top: 0;
    right: 0;
    min-width: 24px;
    min-height: 24px;
    display: grid;
    place-items: center;
    border: 2px solid #4e370a;
    border-radius: 50%;
    color: #171006;
    background: #ffe37a;
    font-size: 11px;
    font-weight: 1000;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button:not([data-count])::after,
#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button[data-count=""]::after {
    display: none;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button.active,
#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button:focus-visible {
    border-color: transparent !important;
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-4px);
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button.active img,
#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button:focus-visible img {
    filter: drop-shadow(0 0 8px #ffe36f) drop-shadow(0 8px 9px rgba(0, 0, 0, .75));
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-total {
    grid-column: 1;
    min-height: 34px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 !important;
    padding: 5px 12px;
    border: 1px solid rgba(218, 177, 69, .42) !important;
    border-radius: 999px;
    color: #d7c58e;
    background: rgba(0, 17, 11, .52);
    text-align: center;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-total span {
    color: #d4bc73;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .7px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-total strong {
    color: #fff0b7;
    font-size: 22px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-total small {
    color: #a9c0b2;
    font-size: 10px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-tools {
    grid-column: 1;
    min-width: 0;
    display: grid !important;
    grid-template-columns: 1fr 1.15fr 1.25fr !important;
    gap: 12px !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-tools button {
    min-width: 0;
    min-height: 56px !important;
    padding: 8px 12px !important;
    border: 1px solid #b58c36 !important;
    border-radius: 14px !important;
    color: #fff0bb !important;
    background: linear-gradient(180deg, #0c452c, #052619) !important;
    font-size: clamp(12px, 1.05vw, 15px) !important;
    font-weight: 1000;
    cursor: pointer;
    touch-action: manipulation;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-tools .primary {
    border-color: #ffe48a !important;
    color: #171000 !important;
    background: linear-gradient(180deg, #f8db70, #c9931e) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 5px 14px rgba(0, 0, 0, .35);
    font-size: clamp(15px, 1.45vw, 20px) !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-tools button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-reveal-status {
    order: 4;
    width: min(760px, 100%) !important;
    min-height: 30px;
    display: grid;
    place-items: center;
    margin: 0 auto !important;
    padding: 5px 12px !important;
    border: 1px solid rgba(218, 180, 72, .76);
    border-radius: 999px;
    color: #fff4cc;
    background: rgba(1, 27, 17, .94);
    font-size: 11px !important;
    font-weight: 900;
    text-align: center;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-history {
    order: 5;
    min-height: 28px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 8px;
    color: #e0cb91;
    font-size: 11px !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-table-history > span {
    display: flex;
    align-items: center;
    gap: 5px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-history-dot {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid #bda35e;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 1000;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-history-dot.player { background: #174f88; }
#casinoTableGameScreen[data-game="baccarat"] .baccarat-history-dot.banker { background: #8d1f1f; }
#casinoTableGameScreen[data-game="baccarat"] .baccarat-history-dot.tie { background: #217244; }

#casinoTableGameScreen[data-game="baccarat"] .baccarat-exit-button {
    order: 6;
    width: min(880px, 92%) !important;
    min-height: 68px !important;
    margin: 0 auto !important;
    padding: 10px 20px;
    border: 3px double #dfb64f !important;
    border-radius: 20px !important;
    color: #ffe3a0 !important;
    background: linear-gradient(180deg, #7c251e, #42100d) !important;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, .55), 0 8px 20px rgba(0, 0, 0, .28);
    font: 900 clamp(21px, 2vw, 31px)/1.1 Georgia, serif !important;
    letter-spacing: .7px;
    cursor: pointer;
    touch-action: manipulation;
}

/* Shared hands: large cards, with enough room for a later third card. */
#casinoTableGameScreen[data-game="baccarat"] .baccarat-board {
    order: 1;
    width: min(860px, 100%) !important;
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(12px, 2.2vw, 30px) !important;
    margin: 0 auto !important;
}

#casinoTableGameScreen[data-game="baccarat"] #baccaratVisual[data-reveal-stage]:not([data-reveal-stage="idle"]) .baccarat-board {
    display: grid !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-hand-zone {
    min-width: 0;
    min-height: 228px !important;
    padding: 12px 10px 15px !important;
    border: 2px solid rgba(227, 190, 83, .5) !important;
    border-radius: 24px !important;
    background: rgba(0, 26, 16, .78) !important;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .34);
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-hand-zone > strong {
    min-width: 150px;
    min-height: 34px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 10px !important;
    padding: 5px 14px !important;
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-hand-zone.player-side > strong {
    background: #145389 !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-hand-zone.banker-side > strong {
    background: #91231f !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-cards {
    min-height: 154px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px !important;
}

#casinoTableGameScreen[data-game="baccarat"] .mini-casino-card {
    flex: 0 0 auto;
    width: clamp(84px, 7.1vw, 108px) !important;
    height: clamp(118px, 10vw, 152px) !important;
    display: grid;
    place-items: center;
    border: 2px solid #f5dfa0 !important;
    border-radius: 11px !important;
    color: #151515;
    background-color: #fffdf5;
    box-shadow: 0 8px 14px rgba(0, 0, 0, .48);
    font-size: clamp(27px, 2.7vw, 40px) !important;
    font-weight: 1000;
}

#casinoTableGameScreen[data-game="baccarat"] .mini-casino-card.red-suit {
    color: #b91c1c !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-reveal-card {
    padding: 0 !important;
    cursor: pointer;
    touch-action: manipulation;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-reveal-card.concealed {
    color: #f7df73 !important;
    background-color: #073c26 !important;
    background-image: var(--poker-card-back) !important;
    background-size: 100% 100% !important;
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-reveal-card.ready {
    outline: 4px solid #ffe36b;
    outline-offset: 3px;
    box-shadow: 0 0 30px rgba(255, 224, 80, .76);
}

#casinoTableGameScreen[data-game="baccarat"] .baccarat-hand-zone.round-winner {
    border-color: #ffd84b !important;
    box-shadow: 0 0 34px rgba(255, 216, 75, .7), inset 0 0 26px rgba(255, 216, 75, .17) !important;
}

/* Once cards are in motion, replace the betting mat with the shared reveal. */
#casinoTableGameScreen[data-game="baccarat"] #baccaratVisual[data-reveal-stage]:not([data-reveal-stage="idle"]) .baccarat-bet-buttons,
#casinoTableGameScreen[data-game="baccarat"] #baccaratVisual[data-reveal-stage]:not([data-reveal-stage="idle"]) .baccarat-wager-console {
    display: none !important;
}

#casinoTableGameScreen[data-game="baccarat"] #baccaratVisual[data-reveal-stage]:not([data-reveal-stage="idle"]) .baccarat-result-banner {
    order: 2;
}

#casinoTableGameScreen[data-game="baccarat"] #baccaratVisual[data-reveal-stage]:not([data-reveal-stage="idle"]) .baccarat-reveal-status {
    order: 3;
}

#casinoTableGameScreen[data-game="baccarat"] #baccaratVisual[data-reveal-stage]:not([data-reveal-stage="idle"]) .baccarat-table-history {
    order: 4;
}

#casinoTableGameScreen[data-game="baccarat"] #baccaratVisual[data-reveal-stage]:not([data-reveal-stage="idle"]) .baccarat-exit-button {
    order: 5;
}

/* Mid-size laptops keep the reference structure and reduce only whitespace. */
@media (max-width: 1180px) {
    #casinoTableGameScreen[data-game="baccarat"] .casino-game-stage {
        min-height: 800px !important;
        padding: 18px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] #baccaratVisual {
        min-height: 760px !important;
        grid-template-columns: minmax(235px, 285px) minmax(0, 1fr) !important;
        gap: 13px 18px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] #baccaratVisual::before {
        min-height: 72px;
        font-size: clamp(32px, 4vw, 46px);
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard li {
        min-height: 62px;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        padding: 6px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard .rank {
        width: 34px;
        min-width: 34px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard .name::before {
        display: none;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button {
        min-height: 168px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button {
        flex-basis: 82px !important;
        width: 82px !important;
        min-width: 82px !important;
        min-height: 92px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray img {
        width: 72px !important;
        height: 72px !important;
    }
}

/* Tablet and phone: game first, horizontally scrollable leaderboard second. */
@media (max-width: 860px) {
    body.casino-table-game-view.baccarat-reference-view {
        height: auto !important;
        min-height: 100svh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] {
        position: static !important;
        inset: auto !important;
        height: auto !important;
        min-height: 100svh !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] > .casino-table-shell {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .casino-table-header {
        position: relative !important;
        width: calc(100% - 8px) !important;
        min-height: 0 !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        margin: 4px auto 5px !important;
        padding: 7px !important;
        border-radius: 15px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .casino-table-header > div:first-child {
        justify-content: center !important;
        gap: 7px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .casino-table-header h2 {
        max-width: 100%;
        overflow: hidden;
        font-size: clamp(20px, 6.5vw, 27px);
        text-overflow: ellipsis;
    }

    #casinoTableGameScreen[data-game="baccarat"] .casino-table-header p,
    #casinoTableGameScreen[data-game="baccarat"] .casino-table-header .how-to-play-button,
    #casinoTableGameScreen[data-game="baccarat"] .casino-table-header > .game-nav-menu {
        display: none !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .mobile-table-nav {
        position: relative;
        z-index: 90;
        display: grid !important;
        gap: 5px;
        width: 100%;
    }

    #casinoTableGameScreen[data-game="baccarat"] .casino-game-stage {
        position: relative !important;
        inset: auto !important;
        width: calc(100vw - 8px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 8px !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        box-shadow: inset 0 0 0 5px rgba(8, 23, 17, .84), inset 0 0 0 7px rgba(217, 173, 69, .62), 0 14px 34px rgba(0, 0, 0, .55) !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .casino-game-stage::after {
        inset: 8px;
        border-radius: 17px;
    }

    #casinoTableGameScreen[data-game="baccarat"] #baccaratVisual {
        min-height: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        gap: 7px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] #baccaratVisual::before {
        grid-column: 1;
        min-height: 50px;
        margin: 0 2px;
        border-radius: 14px 14px 7px 7px;
        font-size: clamp(24px, 7.6vw, 34px);
        letter-spacing: 1px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-main {
        grid-column: 1;
        grid-row: 2;
        gap: 6px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard {
        grid-column: 1;
        grid-row: 3;
        padding: 10px 8px;
        border-radius: 18px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0 5px 7px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard-heading strong {
        font-size: 18px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard-heading strong::before,
    #casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard-heading strong::after {
        display: none;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard-heading span {
        margin: 0;
        font-size: 10px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard ol {
        grid-auto-flow: column;
        grid-auto-columns: minmax(215px, 72vw);
        gap: 6px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-leaderboard li {
        min-height: 58px;
        scroll-snap-align: start;
        border: 1px solid rgba(107, 142, 117, .36);
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-round-meta span {
        min-width: min(300px, 92%);
        min-height: 30px;
        font-size: 11px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-result-banner {
        min-height: 43px;
        padding: 4px 9px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-result-banner strong {
        font-size: 15px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-result-banner span {
        font-size: 9px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons {
        grid-template-columns: 1fr .72fr 1fr !important;
        gap: 6px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button {
        min-height: clamp(108px, 30vw, 120px) !important;
        padding: 7px 2px !important;
        border-width: 2px !important;
        border-radius: 15px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button strong {
        font-size: clamp(20px, 6.2vw, 30px);
        letter-spacing: 0;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button span {
        font-size: clamp(14px, 4vw, 18px);
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button small {
        font-size: 9px;
        letter-spacing: 0;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button::after {
        margin-top: 1px;
        font-size: 19px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-wager-console {
        position: static !important;
        bottom: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        padding: 6px !important;
        border-radius: 17px !important;
        box-shadow: inset 0 0 20px rgba(0, 0, 0, .42) !important;
        backdrop-filter: none !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray {
        grid-column: 1 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        gap: 2px !important;
        padding: 1px 0 4px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 64px !important;
        padding: 0 !important;
        border-radius: 11px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray img {
        width: clamp(48px, 13.4vw, 54px) !important;
        height: clamp(48px, 13.4vw, 54px) !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button > span {
        top: clamp(19px, 5.7vw, 23px);
        min-width: 76%;
        padding: 2px 2px;
        font-size: clamp(8px, 2.45vw, 10px) !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-total {
        min-height: 34px;
        gap: 8px;
        padding: 4px 8px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-total small {
        display: none;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-tools {
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-tools button {
        min-height: 44px !important;
        padding: 5px !important;
        font-size: 11px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] #baccaratTableConfirm {
        grid-column: 1 / -1;
        min-height: 54px !important;
        font-size: 14px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-board {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-hand-zone {
        min-height: 164px !important;
        padding: 8px 2px 10px !important;
        border-radius: 17px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-hand-zone > strong {
        min-width: 0;
        min-height: 28px;
        margin-bottom: 7px !important;
        padding: 4px 8px !important;
        font-size: 10px;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-cards {
        min-height: 112px !important;
        gap: 3px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .mini-casino-card {
        width: clamp(55px, 15.5vw, 67px) !important;
        height: clamp(78px, 22vw, 95px) !important;
        border-radius: 8px !important;
        font-size: clamp(20px, 6vw, 27px) !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-reveal-status {
        min-height: 34px;
        padding: 5px 8px !important;
        font-size: 9px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-history {
        min-height: 31px;
        font-size: 9px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-exit-button {
        width: 100% !important;
        min-height: 58px !important;
        padding: 7px 10px;
        border-radius: 15px !important;
        font-size: clamp(19px, 6vw, 25px) !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] #baccaratVisual[data-reveal-stage="idle"] .baccarat-table-history {
        display: none !important;
    }
}

/* Short landscape phones should scroll instead of scaling the table to crumbs. */
@media (max-height: 700px) and (orientation: landscape) {
    body.casino-table-game-view.baccarat-reference-view,
    #casinoTableGameScreen[data-game="baccarat"] {
        height: auto !important;
        min-height: 100svh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] > .casino-table-shell {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .casino-table-header {
        position: relative !important;
        width: calc(100% - 8px) !important;
        min-height: 48px !important;
        height: auto !important;
        margin: 4px auto 6px !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .casino-game-stage {
        position: relative !important;
        inset: auto !important;
        width: calc(100% - 8px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        border-radius: 22px !important;
    }
}

/* Focus mode remains usable: the stage itself becomes the scroll container. */
#casinoTableGameScreen[data-game="baccarat"].fullscreen-game-active {
    overflow: hidden !important;
}

#casinoTableGameScreen[data-game="baccarat"].fullscreen-game-active > .casino-table-shell {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 3px !important;
    overflow: hidden !important;
}

#casinoTableGameScreen[data-game="baccarat"].fullscreen-game-active .casino-game-stage {
    position: absolute !important;
    inset: 56px 3px 3px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#casinoTableGameScreen[data-game="baccarat"].fullscreen-game-active.virtual-landscape .casino-game-stage {
    position: absolute !important;
    inset: 56px 3px 3px !important;
    width: auto !important;
    height: auto !important;
    overflow-y: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    #casinoTableGameScreen[data-game="baccarat"] .baccarat-bet-buttons button,
    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button,
    #casinoTableGameScreen[data-game="baccarat"] .baccarat-reveal-card {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   THE BACCARAT TABLE: A FELT, NOT A PHOTOGRAPH OF ONE
   =========================================================

   The stage used to paint the 2160x1020 poker table picture behind the game.
   It never worked here: cover cropped the ornate rail at the sides, contain
   left the art floating above the controls with bare colour beneath it, and
   the picture is of a poker table in a game that is not poker. It is dropped
   for a felt drawn in CSS -- a soft light from above, the green falling off to
   near black at the edges, and a thin gold rim -- which costs no download,
   cannot be cropped or stretched, and holds its shape at any size.

   The double frame goes with it: the stage's own 1px gold border on a 38px
   radius, and an ::after inset 14px drawing a second ring inside the first.
   One rim now, on the stage itself.

   What is NOT set here matters as much. An earlier version gave the stage
   `aspect-ratio: 2160/1020` and capped it at 1180px so the box would match the
   picture. But #baccaratVisual lives inside this stage -- leaderboard, bet
   buttons, chips and wager console are all its children -- and the stage is
   overflow:hidden. Measured at 2560x1257 that gave a 1180x557 stage holding
   1128x815 of content: the bottom 284px, which is the chips and every betting
   control, was clipped away and the game sat in 46% of the window. The stage
   sizes to its content; nothing here constrains its height.
   ========================================================= */

#casinoTableGameScreen[data-game="baccarat"] #casinoGameStage {
    background-color: #04281a !important;
    background-image:
        radial-gradient(ellipse 118% 86% at 50% 16%, rgba(28,146,92,.58), rgba(7,58,36,.88) 52%, rgba(2,20,13,.99) 100%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 26%) !important;
    background-position: center, center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: cover, cover !important;

    border: 0 !important;
    border-radius: 30px !important;
    box-shadow:
        inset 0 0 0 2px rgba(214,170,66,.55),
        inset 0 0 8px rgba(255,226,140,.16),
        inset 0 0 150px rgba(0,0,0,.5),
        0 26px 70px rgba(0,0,0,.55) !important;
}

/* the inner ring; one rim is enough */
#casinoTableGameScreen[data-game="baccarat"] #casinoGameStage::after {
    display: none !important;
}

@media (min-width: 1280px) {
    /* the stage takes its height from the game, not from a picture's ratio */
    #casinoTableGameScreen[data-game="baccarat"] #casinoGameStage {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
    }

    /*
     * The chips ran 876px wide under a 1089px row of bet buttons, leaving a
     * bite out of the right side of the table. They span the full row now.
     *
     * Three things had to give for that, and only the last one is obvious:
     * the console's first grid row was pinned at 113px, the chip buttons
     * carried max-height:104px, and the tray sized to its contents rather
     * than its container. Raising the image alone just made it overflow a
     * button that could not grow.
     */
    #casinoTableGameScreen[data-game="baccarat"] .baccarat-wager-console,
    #casinoTableGameScreen[data-game="baccarat"] #baccaratVisual .baccarat-wager-console {
        grid-template-rows: auto auto auto !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .shared-chip-selector { height: auto !important; }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        justify-content: space-between !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 176px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
    }

    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray img {
        width: 100% !important;
        height: auto !important;
        max-width: 160px !important;
        max-height: none !important;
        aspect-ratio: 1 !important;
    }
}

/* 2026-09-08: keep Baccarat denominations comfortably tappable everywhere. */
@media (max-width: 1279px) {
    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray button {
        flex: 0 0 clamp(76px, 18vw, 104px) !important;
        width: clamp(76px, 18vw, 104px) !important;
        min-width: 76px !important;
        min-height: 82px !important;
        max-height: none !important;
    }
    #casinoTableGameScreen[data-game="baccarat"] .baccarat-table-chip-tray img {
        width: clamp(66px, 16vw, 94px) !important;
        height: clamp(66px, 16vw, 94px) !important;
        max-width: none !important;
        max-height: none !important;
    }
}