/*
 * Reference Blackjack presentation layer.
 * Loaded after the legacy inline stylesheet and scoped to #blackjackScreen.
 * Gameplay remains owned by the existing Blackjack implementation.
 */

#blackjackScreen.blackjack-reference,
#blackjackScreen.blackjack-reference * {
    box-sizing: border-box;
}

#blackjackScreen.blackjack-reference {
    --bjr-gold: #e7bd48;
    --bjr-gold-bright: #ffd96a;
    --bjr-gold-dark: #89651b;
    --bjr-ivory: #fff5df;
    --bjr-green: #075033;
    --bjr-green-deep: #001d13;
    --bjr-panel: rgba(1, 20, 13, .94);
    --bjr-line: rgba(207, 167, 55, .68);
    --bjr-muted: #c7d7cc;
    width: 100%;
    max-width: none;
    min-height: 100svh;
    padding: 6px 14px 28px;
    overflow: visible;
    color: var(--bjr-ivory);
    background:
        radial-gradient(circle at 50% 22%, rgba(17, 91, 58, .26), transparent 36%),
        linear-gradient(rgba(0, 11, 7, .22), rgba(0, 8, 5, .72));
}

body.blackjack-table-view {
    min-width: 0;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background-color: #000b07;
}

#blackjackScreen.blackjack-reference > .rotate-device-prompt {
    display: none !important;
}

/* Header */

#blackjackScreen.blackjack-reference > .topbar {
    position: relative;
    z-index: 300;
    width: min(1840px, 100%);
    min-height: 74px;
    margin: 0 auto 10px;
    padding: 9px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(209, 173, 60, .42);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(1, 24, 16, .98), rgba(0, 13, 9, .98));
    box-shadow: 0 13px 30px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .035);
}

#blackjackScreen.blackjack-reference .brand {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    color: #fff;
    font-size: clamp(24px, 2vw, 36px);
    font-weight: 1000;
    letter-spacing: -.02em;
}

#blackjackScreen.blackjack-reference .table-brand-logo {
    width: clamp(58px, 5vw, 86px);
    height: 45px;
    object-fit: contain;
}

#blackjackScreen.blackjack-reference .table-brand-game {
    overflow: hidden;
    text-overflow: ellipsis;
}

#blackjackScreen.blackjack-reference .how-to-play-button {
    min-height: 46px;
    margin: 0 0 0 10px;
    padding: 10px 19px;
    border: 1px solid var(--bjr-gold);
    color: #ffe8a1;
    background: linear-gradient(180deg, rgba(58, 43, 8, .74), rgba(20, 17, 6, .94));
    font-size: 12px;
    letter-spacing: .03em;
}

#blackjackScreen.blackjack-reference .game-table-status {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    min-width: 0;
}

#blackjackScreen.blackjack-reference .game-table-status > .pill {
    min-width: 130px;
    min-height: 52px;
    display: grid;
    place-items: center;
    padding: 5px 14px;
    border: 1px solid rgba(85, 139, 102, .45);
    border-radius: 18px;
    color: #c7d7cc;
    background: rgba(0, 15, 10, .72);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-align: center;
}

#blackjackScreen.blackjack-reference .game-table-status > .pill strong {
    display: block;
    max-width: 240px;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#blackjackScreen.blackjack-reference .game-nav-menu > summary {
    min-width: 132px;
    min-height: 52px;
    border-color: rgba(209, 173, 60, .48);
    border-radius: 16px;
    background: rgba(2, 25, 17, .96);
    font-size: 15px;
}

/* Three-column reference composition */

#blackjackScreen.blackjack-reference .bjr-game-grid {
    width: min(1840px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(250px, 326px) minmax(610px, 1fr) minmax(250px, 306px);
    grid-template-areas: "leader center right";
    align-items: start;
    gap: 14px;
}

#blackjackScreen.blackjack-reference .bjr-center-table {
    grid-area: center;
    min-width: 0;
}

#blackjackScreen.blackjack-reference .bjr-right-rail {
    grid-area: right;
    display: grid;
    gap: 18px;
}

#blackjackScreen.blackjack-reference .bjr-side-panel,
#blackjackScreen.blackjack-reference .bjr-leaderboard {
    border: 1px solid var(--bjr-line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 0, rgba(15, 85, 52, .25), transparent 38%),
        linear-gradient(160deg, rgba(1, 29, 19, .98), rgba(0, 14, 9, .98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .035);
}

/* Leaderboard */

#blackjackScreen.blackjack-reference .bjr-leaderboard {
    grid-area: leader;
    position: sticky;
    top: 8px;
    z-index: 20;
    width: auto;
    min-height: min(820px, calc(100svh - 106px));
    max-height: calc(100svh - 106px);
    margin: 0;
    padding: 18px 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: auto;
    pointer-events: auto;
}

#blackjackScreen.blackjack-reference .blackjack-leaderboard-title {
    flex: 0 0 auto;
    margin: 0;
    padding: 2px 12px 0;
    color: #f2d47d;
    font: 800 clamp(20px, 1.6vw, 28px)/1.1 Georgia, "Times New Roman", serif;
    letter-spacing: .035em;
    text-align: center;
}

#blackjackScreen.blackjack-reference .blackjack-leaderboard-title::before {
    content: "♛";
    margin-right: 9px;
    color: var(--bjr-gold-bright);
    font-family: system-ui, sans-serif;
}

#blackjackScreen.blackjack-reference .bjr-leaderboard-subtitle {
    flex: 0 0 auto;
    margin: 6px 8px 12px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(209, 173, 60, .36);
    color: #e9dca8;
    font-size: 11px;
    text-align: center;
}

#blackjackScreen.blackjack-reference .blackjack-participant {
    position: relative;
    width: 100%;
    min-height: 78px;
    margin: 0;
    padding: 10px 10px 10px 8px;
    display: grid;
    grid-template-columns: 32px 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 8px;
    border: 0;
    border-bottom: 1px solid rgba(125, 141, 112, .24);
    border-radius: 0;
    color: #fff;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    font-size: 12px;
}

#blackjackScreen.blackjack-reference .blackjack-participant:last-child {
    border-bottom: 0;
}

#blackjackScreen.blackjack-reference .blackjack-participant.you {
    margin: 3px 0;
    border: 1px solid #9fe452;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(17, 101, 47, .44), rgba(3, 32, 20, .88));
    box-shadow: inset 0 0 22px rgba(83, 255, 112, .12), 0 0 18px rgba(76, 255, 114, .14);
}

#blackjackScreen.blackjack-reference .blackjack-participant.winner {
    color: #d8ffe2;
    background: linear-gradient(90deg, rgba(28, 119, 62, .46), rgba(3, 32, 20, .88));
}

#blackjackScreen.blackjack-reference .blackjack-participant::before {
    content: none !important;
}

#blackjackScreen.blackjack-reference .bjr-rank {
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 1px solid var(--bjr-gold);
    border-radius: 50%;
    color: #ffe680;
    background: #10291d;
    font: 900 14px/1 Georgia, serif;
}

#blackjackScreen.blackjack-reference .blackjack-participant:nth-of-type(1) .bjr-rank {
    color: #302000;
    background: linear-gradient(135deg, #fff19c, #d69c19);
    box-shadow: 0 0 10px rgba(255, 212, 75, .34);
}

#blackjackScreen.blackjack-reference .bjr-avatar {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid #9b7b27;
    border-radius: 50%;
    color: #ffeab1;
    background:
        radial-gradient(circle at 35% 30%, #2b8662, #053221 67%, #00120c);
    box-shadow: inset 0 0 0 2px #00160e, 0 5px 12px rgba(0, 0, 0, .45);
    font-size: 11px;
    font-weight: 1000;
}

#blackjackScreen.blackjack-reference .blackjack-participant > strong {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    color: #fff;
    font-size: 13px;
    line-height: 1.15;
}

#blackjackScreen.blackjack-reference .blackjack-participant.you > strong {
    color: #79f78e;
}

#blackjackScreen.blackjack-reference .blackjack-participant .row {
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

#blackjackScreen.blackjack-reference .blackjack-participant .action {
    min-width: 0;
    overflow: hidden;
    color: #b8cdbf;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#blackjackScreen.blackjack-reference .blackjack-participant .jackpot {
    color: #f5c94f;
    font-size: 14px;
    font-weight: 1000;
}

#blackjackScreen.blackjack-reference .blackjack-participant .player-charm {
    --charm-size: 34px;
    top: 1px;
    right: -3px;
    left: auto;
    opacity: .92;
}

/* Felt and cards */

#blackjackScreen.blackjack-reference .table-wrapper {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    margin: 0 !important;
    display: block !important;
}

#blackjackScreen.blackjack-reference .blackjack-table.card-game-stage {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 570px;
    aspect-ratio: 1.56 / 1;
    margin: 0;
    overflow: hidden;
    border: 2px solid #957120;
    border-radius: 46% / 21%;
    background-color: #043d28;
    background-image:
        radial-gradient(ellipse at 50% 46%, rgba(9, 115, 72, .42), rgba(0, 52, 34, .28) 45%, rgba(0, 19, 13, .78) 82%),
        var(--poker-table-art);
    background-position: center;
    background-size: auto 100%, 100% 100%;
    box-shadow:
        inset 0 0 0 7px rgba(2, 24, 16, .76),
        inset 0 0 0 10px rgba(218, 174, 48, .38),
        inset 0 0 95px rgba(0, 0, 0, .7),
        0 22px 50px rgba(0, 0, 0, .55);
}

#blackjackScreen.blackjack-reference .blackjack-table.card-game-stage::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 15px;
    border: 1px solid rgba(236, 197, 76, .62);
    border-radius: inherit;
    pointer-events: none;
}

#blackjackScreen.blackjack-reference .blackjack-table.card-game-stage > .theme-frame {
    display: none !important;
}

#blackjackScreen.blackjack-reference .blackjack-table.card-game-stage .table-inner {
    position: absolute;
    z-index: 2;
    inset: 28px 46px 24px;
    min-height: 0;
    display: block;
    padding: 0;
    pointer-events: auto;
}

#blackjackScreen.blackjack-reference .blackjack-table-layout,
#blackjackScreen.blackjack-reference .blackjack-main-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

#blackjackScreen.blackjack-reference .bjr-table-title {
    position: absolute;
    z-index: 8;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    color: #f2cf6b;
    font: 800 clamp(22px, 2vw, 34px)/1 Georgia, "Times New Roman", serif;
    letter-spacing: .1em;
    text-shadow: 0 3px 8px #000;
    white-space: nowrap;
}

#blackjackScreen.blackjack-reference .bjr-table-title::before,
#blackjackScreen.blackjack-reference .bjr-table-title::after {
    content: "— ◇ —";
    margin: 0 16px;
    color: #b79027;
    font: 400 13px/1 system-ui, sans-serif;
    letter-spacing: .1em;
}

#blackjackScreen.blackjack-reference .blackjack-zone {
    position: static;
    width: min(700px, 78%);
    height: 100%;
    margin: 0 auto;
    padding: 42px 0 28px;
    transform: none;
    display: grid;
    grid-template-rows: 1fr 1.08fr;
    gap: 8px;
}

#blackjackScreen.blackjack-reference .blackjack-section {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 7px 122px 7px 12px;
    display: grid;
    align-content: center;
    justify-items: center;
    border: 0;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(0, 44, 28, .7), rgba(0, 28, 18, .56));
    box-shadow: inset 0 0 28px rgba(0, 0, 0, .34);
    text-align: center;
    pointer-events: auto;
}

#blackjackScreen.blackjack-reference .blackjack-section:first-child {
    padding-right: 12px;
}

#blackjackScreen.blackjack-reference .blackjack-section:nth-child(2) {
    border: 1px solid rgba(211, 174, 59, .22);
    background: linear-gradient(180deg, rgba(3, 77, 48, .74), rgba(0, 34, 22, .72));
}

#blackjackScreen.blackjack-reference .blackjack-label {
    color: var(--bjr-gold-bright);
    font: 900 clamp(19px, 1.7vw, 28px)/1 Georgia, "Times New Roman", serif;
    letter-spacing: .09em;
    text-shadow: 0 2px 7px rgba(0, 0, 0, .7);
}

#blackjackScreen.blackjack-reference .blackjack-cards {
    width: 100%;
    min-height: 116px;
    margin: 5px 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, 1vw, 13px);
    flex-wrap: nowrap;
    overflow: visible;
    pointer-events: auto;
}

#blackjackScreen.blackjack-reference .blackjack-section .card,
#blackjackScreen.blackjack-reference .blackjack-reveal-card {
    flex: 0 1 86px;
    width: clamp(67px, 6vw, 90px);
    height: clamp(96px, 8.5vw, 128px);
    min-width: 0;
    border-radius: 10px;
}

#blackjackScreen.blackjack-reference .blackjack-reveal-card .card {
    width: 100%;
    height: 100%;
}

#blackjackScreen.blackjack-reference .blackjack-section .card {
    border: 1px solid #fff;
    box-shadow: 0 9px 18px rgba(0, 0, 0, .52), inset 0 0 0 1px rgba(214, 177, 64, .24);
}

/* The theme's blank card-front artwork is intentionally not used here. It is
   dark green in several themes and makes the rank and suit unreadable on felt. */
#blackjackScreen.blackjack-reference .blackjack-section .card:not(.back),
#blackjackScreen.blackjack-reference .blackjack-reveal-card:not(.concealed) .card:not(.back) {
    border: 1px solid #e7dfcf !important;
    color: #121923 !important;
    background-color: #fffaf0 !important;
    background-image:
        linear-gradient(145deg, #fffef9 0%, #faf5e9 58%, #e9e1d2 100%) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    text-shadow: none !important;
}

#blackjackScreen.blackjack-reference .blackjack-section .card.red:not(.back),
#blackjackScreen.blackjack-reference .blackjack-reveal-card:not(.concealed) .card.red:not(.back) {
    color: #c92028 !important;
}

#blackjackScreen.blackjack-reference .blackjack-section .card.back,
#blackjackScreen.blackjack-reference .blackjack-reveal-card.concealed {
    border: 1px solid #d7bd63 !important;
    background-color: #053a28 !important;
    background-image:
        var(--poker-card-back),
        linear-gradient(145deg, #0a573c, #01271b) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

#blackjackScreen.blackjack-reference .blackjack-section .card-rank {
    font-size: clamp(22px, 2.1vw, 34px);
}

#blackjackScreen.blackjack-reference .blackjack-section .card-suit {
    font-size: clamp(28px, 2.8vw, 43px);
}

#blackjackScreen.blackjack-reference .blackjack-total {
    min-width: 110px;
    margin: 2px 0 0;
    padding: 6px 16px;
    border-radius: 999px;
    color: #fff2c1;
    background: rgba(0, 17, 11, .88);
    font-size: clamp(12px, 1.1vw, 17px);
    font-weight: 900;
}

#blackjackScreen.blackjack-reference .blackjack-info {
    position: absolute;
    z-index: 10;
    right: 16%;
    bottom: 8px;
    left: 16%;
    max-width: none;
    margin: 0;
    padding: 7px 13px;
    transform: none;
    overflow: hidden;
    border: 1px solid rgba(212, 176, 62, .26);
    border-radius: 999px;
    color: #e6f5eb;
    background: rgba(0, 18, 12, .89);
    font-size: 11px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#blackjackScreen.blackjack-reference .bjr-stage-wager {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 105px;
    min-height: 88px;
    transform: translateY(-50%);
    display: grid;
    place-content: center;
    gap: 3px;
    padding: 10px 7px;
    border: 1px solid rgba(223, 182, 53, .64);
    border-radius: 18px;
    color: #fff;
    background: rgba(1, 25, 16, .89);
    box-shadow: 0 9px 20px rgba(0, 0, 0, .42);
    text-align: center;
}

#blackjackScreen.blackjack-reference .bjr-stage-wager span,
#blackjackScreen.blackjack-reference .bjr-stage-wager small {
    color: #ecdfbd;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

#blackjackScreen.blackjack-reference .bjr-stage-wager strong {
    color: var(--bjr-gold-bright);
    font-size: 24px;
}

#blackjackScreen.blackjack-reference .bjr-stage-wager.has-wager {
    box-shadow: 0 0 18px rgba(255, 211, 67, .2), 0 9px 20px rgba(0, 0, 0, .42);
}

/* Play controls */

#blackjackScreen.blackjack-reference .controls {
    position: static !important;
    inset: auto !important;
    width: 100%;
    max-height: none;
    margin: 10px 0 0;
    padding: 12px 14px 13px;
    transform: none !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    overflow: visible;
    border: 1px solid rgba(79, 138, 98, .54);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(1, 26, 17, .97), rgba(0, 14, 9, .98));
    box-shadow: 0 16px 34px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .035);
}

#blackjackScreen.blackjack-reference .controls > * {
    min-width: 0;
    grid-column: 1 / -1;
}

#blackjackScreen.blackjack-reference .bjr-action-heading,
#blackjackScreen.blackjack-reference .bjr-chip-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #e8dbb2;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
}

#blackjackScreen.blackjack-reference .bjr-action-heading::before,
#blackjackScreen.blackjack-reference .bjr-action-heading::after,
#blackjackScreen.blackjack-reference .bjr-chip-heading::before,
#blackjackScreen.blackjack-reference .bjr-chip-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(207, 167, 55, .52));
}

#blackjackScreen.blackjack-reference .bjr-action-heading::after,
#blackjackScreen.blackjack-reference .bjr-chip-heading::after {
    transform: scaleX(-1);
}

#blackjackScreen.blackjack-reference .controls-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

#blackjackScreen.blackjack-reference .controls-row .action-button {
    position: relative;
    min-width: 0;
    min-height: 74px;
    padding: 18px 9px 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 16px;
    color: transparent;
    background: #093525;
    box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 7px 16px rgba(0, 0, 0, .3);
    font-size: 0;
    cursor: pointer;
}

#blackjackScreen.blackjack-reference .controls-row .action-button::before {
    display: block;
    color: #fff;
    font-size: clamp(15px, 1.25vw, 20px);
    font-weight: 1000;
    line-height: 1.2;
}

#blackjackScreen.blackjack-reference .controls-row .action-button::after {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .78);
    font-size: 9px;
    font-weight: 700;
}

#blackjackScreen.blackjack-reference #blackjackHitButton {
    border-color: #1b99e5;
    background: linear-gradient(145deg, #074b78, #03243d);
}

#blackjackScreen.blackjack-reference #blackjackHitButton::before { content: "🂠  HIT"; }
#blackjackScreen.blackjack-reference #blackjackHitButton::after { content: "Take another card"; }

#blackjackScreen.blackjack-reference #blackjackStandButton {
    border-color: #39c75d;
    background: linear-gradient(145deg, #0b7632, #04391c);
}

#blackjackScreen.blackjack-reference #blackjackStandButton::before { content: "✋  STAND"; }
#blackjackScreen.blackjack-reference #blackjackStandButton::after { content: "Keep your hand"; }

#blackjackScreen.blackjack-reference #blackjackDoubleButton {
    border-color: #dda82b;
    background: linear-gradient(145deg, #805a07, #382600);
}

#blackjackScreen.blackjack-reference #blackjackDoubleButton::before { content: "2×  DOUBLE"; }
#blackjackScreen.blackjack-reference #blackjackDoubleButton::after { content: "Double and take one"; }
#blackjackScreen.blackjack-reference #blackjackSplitButton {
    border-color: #4fc3d6;
    background: linear-gradient(145deg, #0c5c6b, #042a32);
}
#blackjackScreen.blackjack-reference #blackjackSplitButton::before { content: "⫽  SPLIT"; }
#blackjackScreen.blackjack-reference #blackjackSplitButton::after { content: "Play as two hands"; }
#blackjackScreen.blackjack-reference #blackjackSurrenderButton {
    border-color: #b98a8a;
    background: linear-gradient(145deg, #5a2c2c, #2a1010);
}
#blackjackScreen.blackjack-reference #blackjackSurrenderButton::before { content: "⚑  SURRENDER"; }
#blackjackScreen.blackjack-reference #blackjackSurrenderButton::after { content: "Take half back"; }

#blackjackScreen.blackjack-reference #blackjackNewHandButton {
    border-color: #a567cb;
    background: linear-gradient(145deg, #542574, #281135);
}

#blackjackScreen.blackjack-reference #blackjackNewHandButton::before { content: "↻  NEW HAND"; }
#blackjackScreen.blackjack-reference #blackjackNewHandButton::after { content: "Build your next wager"; }

#blackjackScreen.blackjack-reference .controls-row .action-button:disabled {
    cursor: not-allowed;
    filter: saturate(.35) brightness(.62);
    opacity: .62;
}

#blackjackScreen.blackjack-reference .controls-row .action-button:not(:disabled):hover,
#blackjackScreen.blackjack-reference .controls-row .action-button:not(:disabled):focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.12);
    box-shadow: 0 0 0 3px rgba(255, 218, 95, .17), 0 10px 22px rgba(0, 0, 0, .4);
}

#blackjackScreen.blackjack-reference #blackjackMascotButton {
    display: none !important;
}

#blackjackScreen.blackjack-reference .bjr-chip-tray {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 2px 4px 5px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(9px, 1.5vw, 21px);
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

#blackjackScreen.blackjack-reference .bjr-chip-tray button {
    position: relative;
    flex: 0 0 clamp(72px, 7vw, 94px);
    width: clamp(72px, 7vw, 94px);
    min-width: clamp(72px, 7vw, 94px);
    min-height: 95px;
    padding: 2px 3px 5px;
    border: 0;
    border-radius: 50%;
    color: #f6dda0;
    background: transparent;
    cursor: pointer;
    scroll-snap-align: center;
}

#blackjackScreen.blackjack-reference .bjr-chip-tray button::before {
    content: "";
    position: absolute;
    inset: 2px 2px auto;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 0 3px #ffde66, 0 0 22px #ffd54f;
    transition: opacity .15s ease;
    pointer-events: none;
}

#blackjackScreen.blackjack-reference .bjr-chip-tray button.active::before,
#blackjackScreen.blackjack-reference .bjr-chip-tray button:focus-visible::before {
    opacity: 1;
}

#blackjackScreen.blackjack-reference .bjr-chip-tray button[data-count]::after {
    content: "×" attr(data-count);
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    min-width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #fff2b0;
    border-radius: 999px;
    color: #171000;
    background: #f2c849;
    box-shadow: 0 4px 10px #000;
    font-size: 10px;
    font-weight: 1000;
}

#blackjackScreen.blackjack-reference .bjr-chip-tray button:not(:disabled):hover {
    transform: translateY(-4px) scale(1.04);
}

#blackjackScreen.blackjack-reference .bjr-chip-tray button:disabled {
    cursor: not-allowed;
    filter: grayscale(.45) brightness(.66);
    opacity: .58;
}

#blackjackScreen.blackjack-reference .bjr-chip-tray img {
    display: block;
    width: clamp(67px, 6.5vw, 88px);
    height: clamp(67px, 6.5vw, 88px);
    margin: 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .68));
    pointer-events: none;
}

#blackjackScreen.blackjack-reference .bjr-chip-tray span {
    position: absolute;
    z-index: 3;
    top: clamp(27px, 2.8vw, 38px);
    left: 50%;
    min-width: 48%;
    display: block;
    margin: 0;
    padding: 3px 4px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 230, 148, .8);
    border-radius: 999px;
    color: #fff4bd;
    background: rgba(2, 24, 16, .92);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .65);
    font-size: 10px;
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 2px 2px #000;
    pointer-events: none;
}

#blackjackScreen.blackjack-reference .bjr-wager-row {
    display: grid;
    grid-template-columns: 1fr 1.16fr;
    gap: 10px;
}

#blackjackScreen.blackjack-reference .bjr-wager-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#blackjackScreen.blackjack-reference .bjr-wager-tools button {
    min-height: 64px;
    border: 1px solid rgba(205, 166, 55, .52);
    border-radius: 15px;
    color: #f4e4bd;
    background: linear-gradient(180deg, #0b4029, #052719);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

#blackjackScreen.blackjack-reference .bjr-wager-tools button:disabled {
    cursor: not-allowed;
    filter: grayscale(.55);
    opacity: .45;
}

#blackjackScreen.blackjack-reference .bet-row {
    min-width: 0;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(120px, .58fr) minmax(210px, 1fr);
    gap: 10px;
}

#blackjackScreen.blackjack-reference .selected-bet-display {
    min-width: 0;
    min-height: 64px;
    padding: 8px 12px;
    border: 1px solid rgba(207, 167, 55, .48);
    border-radius: 15px;
    color: #f2d676;
    background: rgba(0, 24, 15, .86);
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
}










#blackjackScreen.blackjack-reference #blackjackMessage {
    min-height: 22px;
    margin: 0;
    padding: 2px 10px 0;
    color: #dce9e0;
    font-size: 11px;
    text-align: center;
}

#blackjackScreen.blackjack-reference #blackjackMessage.error { color: #ff9b9b; }
#blackjackScreen.blackjack-reference #blackjackMessage.success { color: #72ef99; }

#blackjackScreen.blackjack-reference .bjr-exit-bar {
    width: 100%;
    margin: 10px 0 0;
}

#blackjackScreen.blackjack-reference .bjr-exit-bar #blackjackExitButton {
    width: 100%;
    min-height: 68px;
    border: 1px solid #d8ad36;
    border-radius: 16px;
    color: transparent;
    background: linear-gradient(180deg, #7f1c17, #4b0d0c);
    box-shadow: inset 0 1px rgba(255, 235, 156, .25), 0 11px 24px rgba(0, 0, 0, .38);
    font-size: 0;
    cursor: pointer;
}

#blackjackScreen.blackjack-reference .bjr-exit-bar #blackjackExitButton::before {
    content: "⇥  EXIT TO GAME LOBBY";
    color: #f6d883;
    font: 800 clamp(18px, 1.7vw, 26px)/1 Georgia, "Times New Roman", serif;
    letter-spacing: .02em;
}

/* Right rail */

#blackjackScreen.blackjack-reference .bjr-side-panel {
    padding: 20px 19px;
}

#blackjackScreen.blackjack-reference .bjr-side-panel h3 {
    margin: 0 0 18px;
    color: #e8c45e;
    font-size: 16px;
    letter-spacing: .025em;
    text-align: center;
}

#blackjackScreen.blackjack-reference .bjr-side-panel h3 span {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: 5px;
    border: 2px solid #d8ad36;
    border-radius: 50%;
    font-size: 12px;
}

#blackjackScreen.blackjack-reference .bjr-how-to p,
#blackjackScreen.blackjack-reference .bjr-how-to li {
    color: #f0eee6;
    font-size: 13px;
    line-height: 1.55;
}

#blackjackScreen.blackjack-reference .bjr-how-to p {
    margin: 0 0 13px;
}

#blackjackScreen.blackjack-reference .bjr-how-to ul {
    margin: 0;
    padding-left: 19px;
}

#blackjackScreen.blackjack-reference .bjr-how-to li {
    margin: 7px 0;
}

#blackjackScreen.blackjack-reference .bjr-how-to li::marker {
    color: var(--bjr-gold-bright);
}

#blackjackScreen.blackjack-reference .bjr-history-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

#blackjackScreen.blackjack-reference .bjr-history-empty {
    margin: 0;
    padding: 22px 6px;
    color: #a9bdb0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

#blackjackScreen.blackjack-reference .bjr-history-row {
    min-height: 58px;
    padding: 9px 5px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    align-items: center;
    border-bottom: 1px solid rgba(104, 137, 113, .25);
}

#blackjackScreen.blackjack-reference .bjr-history-row:last-child { border-bottom: 0; }
#blackjackScreen.blackjack-reference .bjr-history-row strong { font-size: 12px; }
#blackjackScreen.blackjack-reference .bjr-history-row span { grid-column: 1; color: #d8e1db; font-size: 11px; }
#blackjackScreen.blackjack-reference .bjr-history-row b { grid-column: 2; grid-row: 1 / 3; font-size: 13px; }
#blackjackScreen.blackjack-reference .bjr-history-row.win strong,
#blackjackScreen.blackjack-reference .bjr-history-row.win b { color: #43e978; }
#blackjackScreen.blackjack-reference .bjr-history-row.loss strong,
#blackjackScreen.blackjack-reference .bjr-history-row.loss b { color: #ff5f5f; }
#blackjackScreen.blackjack-reference .bjr-history-row.push strong,
#blackjackScreen.blackjack-reference .bjr-history-row.push b { color: #ccd2cf; }

/* Medium desktop/tablet */

@media (max-width: 1370px) {
    #blackjackScreen.blackjack-reference .bjr-game-grid {
        grid-template-columns: minmax(220px, 270px) minmax(570px, 1fr) minmax(210px, 245px);
        gap: 10px;
    }

    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage {
        min-height: 510px;
    }

    #blackjackScreen.blackjack-reference .bjr-leaderboard {
        min-height: 540px;
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray {
        gap: 7px;
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray button {
        flex-basis: 70px;
        width: 70px;
        min-width: 70px;
        min-height: 80px;
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray img {
        width: 66px;
        height: 66px;
    }

    #blackjackScreen.blackjack-reference .bjr-wager-row {
        grid-template-columns: .86fr 1.14fr;
    }

    #blackjackScreen.blackjack-reference .bjr-wager-tools button {
        font-size: 11px;
    }
}

@media (max-width: 1120px) {
    #blackjackScreen.blackjack-reference .bjr-game-grid {
        grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
        grid-template-areas:
            "leader center"
            "right center";
        align-items: start;
    }

    #blackjackScreen.blackjack-reference .bjr-right-rail {
        grid-template-columns: 1fr;
    }

    #blackjackScreen.blackjack-reference .bjr-leaderboard {
        position: static;
        min-height: 390px;
        max-height: 520px;
    }

    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage {
        min-height: 500px;
    }

    #blackjackScreen.blackjack-reference .game-table-status > .pill {
        min-width: 104px;
        padding-inline: 8px;
    }

    #blackjackScreen.blackjack-reference .table-brand-logo {
        display: none;
    }

    #blackjackScreen.blackjack-reference .bjr-wager-row {
        grid-template-columns: 1fr;
    }
}

/* Compact-height desktop: keep the full center journey (table, actions,
   wager tools, and exit) visible on common 768-940px-tall laptop screens.
   Phone card sizing remains owned by the separate mobile profile below. */

@media (min-width: 1180px) and (min-height: 701px) and (max-height: 940px) {
    #blackjackScreen.blackjack-reference {
        padding: 4px 12px 12px;
    }

    #blackjackScreen.blackjack-reference > .topbar {
        min-height: 62px;
        margin-bottom: 7px;
        padding: 7px 14px;
        border-radius: 17px;
    }

    #blackjackScreen.blackjack-reference .brand {
        gap: 11px;
        font-size: clamp(22px, 1.7vw, 29px);
    }

    #blackjackScreen.blackjack-reference .table-brand-logo {
        width: 54px;
        height: 39px;
    }

    #blackjackScreen.blackjack-reference .how-to-play-button {
        min-height: 44px;
        padding: 8px 15px;
        font-size: 12px;
    }

    #blackjackScreen.blackjack-reference .game-table-status > .pill {
        min-height: 44px;
        padding-block: 5px;
    }

    #blackjackScreen.blackjack-reference .game-nav-menu > summary {
        min-height: 44px;
    }

    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage {
        height: clamp(440px, 52vh, 468px);
        min-height: 440px;
        aspect-ratio: auto;
    }

    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage::before {
        inset: 11px;
    }

    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage .table-inner {
        inset: 18px 36px 16px;
    }

    #blackjackScreen.blackjack-reference .bjr-table-title {
        top: 2px;
        font-size: clamp(23px, 1.8vw, 29px);
    }

    #blackjackScreen.blackjack-reference .bjr-table-title::before,
    #blackjackScreen.blackjack-reference .bjr-table-title::after {
        margin-inline: 11px;
        font-size: 10px;
    }

    #blackjackScreen.blackjack-reference .blackjack-zone {
        width: min(700px, 82%);
        padding: 34px 0 21px;
        gap: 6px;
    }

    #blackjackScreen.blackjack-reference .blackjack-section {
        padding: 4px 106px 4px 9px;
        border-radius: 21px;
    }

    #blackjackScreen.blackjack-reference .blackjack-section:first-child {
        padding-right: 9px;
    }

    #blackjackScreen.blackjack-reference .blackjack-label {
        font-size: clamp(19px, 1.55vw, 24px);
    }

    #blackjackScreen.blackjack-reference .blackjack-cards {
        min-height: 100px;
        margin-block: 2px 1px;
        gap: clamp(6px, .75vw, 10px);
    }

    #blackjackScreen.blackjack-reference .blackjack-section .card,
    #blackjackScreen.blackjack-reference .blackjack-reveal-card {
        flex-basis: clamp(70px, 5.3vw, 79px);
        width: clamp(70px, 5.3vw, 79px);
        height: clamp(100px, 7.4vw, 110px);
    }

    #blackjackScreen.blackjack-reference .blackjack-section .card-rank {
        font-size: clamp(21px, 1.8vw, 27px);
    }

    #blackjackScreen.blackjack-reference .blackjack-section .card-suit {
        font-size: clamp(27px, 2.35vw, 34px);
    }

    #blackjackScreen.blackjack-reference .blackjack-total {
        min-width: 100px;
        margin-top: 1px;
        padding: 4px 13px;
        font-size: clamp(12px, 1vw, 15px);
    }

    #blackjackScreen.blackjack-reference .bjr-stage-wager {
        right: 9px;
        width: 92px;
        min-height: 72px;
        padding: 7px 5px;
        border-radius: 15px;
    }

    #blackjackScreen.blackjack-reference .bjr-stage-wager strong {
        font-size: 21px;
    }

    #blackjackScreen.blackjack-reference .blackjack-info {
        bottom: 4px;
        padding: 4px 11px;
        font-size: 10px;
    }

    #blackjackScreen.blackjack-reference .controls {
        margin-top: 6px;
        padding: 7px 10px 8px;
        gap: 4px;
        border-radius: 18px;
    }

    #blackjackScreen.blackjack-reference .bjr-action-heading,
    #blackjackScreen.blackjack-reference .bjr-chip-heading {
        gap: 8px;
        font-size: 9px;
        line-height: 1;
    }

    #blackjackScreen.blackjack-reference .controls-row {
        gap: 8px;
    }

    #blackjackScreen.blackjack-reference .controls-row .action-button {
        min-height: 56px;
        padding: 11px 7px 6px;
        border-radius: 13px;
    }

    #blackjackScreen.blackjack-reference .controls-row .action-button::before {
        font-size: clamp(14px, 1.15vw, 17px);
    }

    #blackjackScreen.blackjack-reference .controls-row .action-button::after {
        margin-top: 2px;
        font-size: 8px;
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray {
        padding: 0 3px 1px;
        gap: clamp(5px, .9vw, 12px);
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray button {
        flex-basis: 66px;
        width: 66px;
        min-width: 66px;
        min-height: 69px;
        padding-bottom: 2px;
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray img {
        width: 62px;
        height: 62px;
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray span {
        top: 25px;
        padding: 2px 3px;
        font-size: 9px;
    }

    #blackjackScreen.blackjack-reference .bjr-wager-row,
    #blackjackScreen.blackjack-reference .bjr-wager-tools,
    #blackjackScreen.blackjack-reference .bet-row {
        gap: 7px;
    }

    #blackjackScreen.blackjack-reference .bjr-wager-tools button,
    #blackjackScreen.blackjack-reference .selected-bet-display {
        min-height: 50px;
        border-radius: 12px;
    }

    #blackjackScreen.blackjack-reference .selected-bet-display {
        padding: 5px 8px;
        font-size: 10px;
    }



    #blackjackScreen.blackjack-reference #blackjackMessage {
        min-height: 14px;
        padding-top: 0;
        font-size: 10px;
        line-height: 14px;
    }

    #blackjackScreen.blackjack-reference .bjr-exit-bar {
        margin-top: 6px;
    }

    #blackjackScreen.blackjack-reference .bjr-exit-bar #blackjackExitButton {
        min-height: 50px;
        border-radius: 13px;
    }

    #blackjackScreen.blackjack-reference .bjr-exit-bar #blackjackExitButton::before {
        font-size: clamp(17px, 1.5vw, 22px);
    }
}

/* Mobile: a readable stacked table, with no forced-rotation gate. */

@media (max-width: 760px) {
    body.blackjack-table-view {
        height: auto !important;
        min-height: 100svh;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #blackjackScreen.blackjack-reference {
        position: static !important;
        inset: auto !important;
        min-height: 100svh;
        padding: 5px 5px calc(14px + env(safe-area-inset-bottom));
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    #blackjackScreen.blackjack-reference > .topbar {
        position: sticky;
        top: 0;
        z-index: 5000;
        min-height: 54px;
        margin-bottom: 6px;
        padding: 6px 8px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 5px;
        border-radius: 14px;
    }

    #blackjackScreen.blackjack-reference .brand {
        gap: 6px;
        font-size: 19px;
    }

    #blackjackScreen.blackjack-reference .table-brand-logo,
    #blackjackScreen.blackjack-reference .how-to-play-button,
    #blackjackScreen.blackjack-reference .game-table-status > .pill {
        display: none !important;
    }

    #blackjackScreen.blackjack-reference .game-table-status {
        display: block;
    }

    #blackjackScreen.blackjack-reference .game-nav-menu > summary {
        min-width: 92px;
        min-height: 42px;
        padding: 5px 8px;
        font-size: 11px;
    }

    #blackjackScreen.blackjack-reference .game-nav-panel {
        position: fixed;
        top: 58px;
        right: 5px;
        width: min(270px, calc(100vw - 10px));
    }

    #blackjackScreen.blackjack-reference .mobile-table-nav {
        display: none !important;
    }

    #blackjackScreen.blackjack-reference .bjr-game-grid {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "center"
            "leader"
            "right";
        gap: 10px;
    }

    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage {
        width: 100%;
        height: auto;
        min-height: 550px;
        aspect-ratio: auto;
        margin: 0;
        border-radius: 31px;
        background-size: auto 100%, cover;
    }

    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage::before {
        inset: 7px;
        border-radius: 25px;
    }

    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage .table-inner {
        position: absolute !important;
        inset: 9px 4px 11px !important;
        display: block !important;
        padding: 0 !important;
    }

    #blackjackScreen.blackjack-reference .bjr-table-title {
        top: 13px;
        font-size: 22px;
    }

    #blackjackScreen.blackjack-reference .bjr-table-title::before,
    #blackjackScreen.blackjack-reference .bjr-table-title::after {
        margin: 0 7px;
        font-size: 8px;
    }

    #blackjackScreen.blackjack-reference .blackjack-zone {
        width: 100%;
        max-width: 100%;
        height: 100%;
        min-width: 0;
        padding: 48px 0 46px;
        display: grid !important;
        grid-template-rows: 1fr 1.1fr;
        gap: 7px;
    }

    #blackjackScreen.blackjack-reference .blackjack-section,
    #blackjackScreen.blackjack-reference .blackjack-section:first-child {
        width: 100%;
        max-width: 100%;
        min-height: 0;
        min-width: 0;
        padding: 7px 4px;
        border: 1px solid rgba(211, 174, 59, .22);
        border-radius: 19px;
    }

    #blackjackScreen.blackjack-reference .blackjack-section:nth-child(2) {
        padding-bottom: 49px;
    }

    #blackjackScreen.blackjack-reference .blackjack-label {
        font-size: 17px;
    }

    #blackjackScreen.blackjack-reference .blackjack-cards {
        max-width: 100%;
        min-width: 0;
        min-height: 90px;
        gap: clamp(2px, .8vw, 4px);
        margin: 3px 0;
        flex-wrap: nowrap !important;
        overflow: hidden;
    }

    #blackjackScreen.blackjack-reference .blackjack-section .card,
    #blackjackScreen.blackjack-reference .blackjack-reveal-card {
        flex: 0 0 clamp(56px, 15vw, 62px);
        width: clamp(56px, 15vw, 62px);
        height: clamp(80px, 21.5vw, 88px);
        max-width: 62px;
        min-width: 56px;
        min-height: 80px;
        border-radius: 7px;
    }

    #blackjackScreen.blackjack-reference .blackjack-section .card-rank {
        font-size: clamp(17px, 5.4vw, 24px);
    }

    #blackjackScreen.blackjack-reference .blackjack-section .card-suit {
        font-size: clamp(21px, 6.7vw, 30px);
    }

    #blackjackScreen.blackjack-reference .blackjack-total {
        min-width: 86px;
        padding: 4px 10px;
        font-size: 11px;
    }

    #blackjackScreen.blackjack-reference .bjr-stage-wager {
        right: 50%;
        top: auto;
        bottom: 6px;
        width: 150px;
        min-height: 39px;
        transform: translateX(50%);
        grid-template-columns: auto auto auto;
        gap: 6px;
        padding: 5px 9px;
        border-radius: 999px;
    }

    #blackjackScreen.blackjack-reference .bjr-stage-wager strong {
        font-size: 17px;
    }

    #blackjackScreen.blackjack-reference .blackjack-info {
        position: absolute !important;
        inset: auto 12px 8px !important;
        right: 12px;
        bottom: 8px;
        left: 12px;
        padding: 5px 8px;
        transform: none !important;
        font-size: 9px;
    }

    #blackjackScreen.blackjack-reference .controls {
        position: static !important;
        width: 100%;
        margin-top: 7px;
        padding: 9px 7px;
        gap: 7px;
        border-radius: 17px;
    }

    #blackjackScreen.blackjack-reference .controls-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    #blackjackScreen.blackjack-reference .controls-row .action-button {
        min-height: 62px;
        padding: 12px 5px 7px;
    }

    #blackjackScreen.blackjack-reference .controls-row .action-button::before {
        font-size: 14px;
    }

    #blackjackScreen.blackjack-reference .controls-row .action-button::after {
        font-size: 8px;
    }

    #blackjackScreen.blackjack-reference #blackjackNewHandButton {
        grid-column: 1 / -1;
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray {
        justify-content: flex-start;
        gap: 7px;
        padding: 3px 2px 8px;
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray button {
        flex: 0 0 72px;
        width: 72px;
        min-width: 72px;
        min-height: 80px;
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray img {
        width: 67px;
        height: 67px;
    }

    #blackjackScreen.blackjack-reference .bjr-wager-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    #blackjackScreen.blackjack-reference .bjr-wager-tools button {
        min-height: 49px;
        font-size: 11px;
    }

    #blackjackScreen.blackjack-reference .bet-row {
        grid-template-columns: minmax(0, .7fr) minmax(160px, 1.3fr);
        gap: 7px;
    }

    #blackjackScreen.blackjack-reference .selected-bet-display {
        min-height: 58px;
    }

    #blackjackScreen.blackjack-reference .selected-bet-display {
        padding: 5px;
        font-size: 9px;
    }


    #blackjackScreen.blackjack-reference .bjr-exit-bar {
        margin-top: 7px;
    }

    #blackjackScreen.blackjack-reference .bjr-exit-bar #blackjackExitButton {
        min-height: 60px;
    }

    #blackjackScreen.blackjack-reference .bjr-exit-bar #blackjackExitButton::before {
        font-size: 19px;
    }

    #blackjackScreen.blackjack-reference .bjr-leaderboard {
        position: static;
        min-height: 0;
        max-height: none;
        padding: 14px 7px 9px;
        border-radius: 19px;
    }

    #blackjackScreen.blackjack-reference .blackjack-participant {
        min-height: 68px;
    }

    #blackjackScreen.blackjack-reference .bjr-right-rail {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #blackjackScreen.blackjack-reference .bjr-side-panel {
        padding: 16px;
        border-radius: 19px;
    }
}

/* Short landscape phones still scroll instead of crushing every control. */

@media (min-width: 761px) and (max-height: 700px) and (orientation: landscape) {
    body.blackjack-table-view,
    #blackjackScreen.blackjack-reference {
        position: static !important;
        inset: auto !important;
        height: auto !important;
        min-height: 100svh;
        overflow: visible !important;
    }

    #blackjackScreen.blackjack-reference .bjr-game-grid {
        grid-template-columns: minmax(190px, 235px) minmax(570px, 1fr);
        grid-template-areas:
            "leader center"
            "right center";
    }

    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage {
        width: 100%;
        height: 500px;
        min-height: 500px;
        aspect-ratio: auto;
    }

    #blackjackScreen.blackjack-reference .controls {
        position: static !important;
        transform: none !important;
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray button {
        flex-basis: 66px;
        width: 66px;
        min-width: 66px;
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray img {
        width: 61px;
        height: 61px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #blackjackScreen.blackjack-reference *,
    #blackjackScreen.blackjack-reference *::before,
    #blackjackScreen.blackjack-reference *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Open-felt table cleanup: the frame artwork already defines the play areas.
   Remove the duplicate translucent panels and decorative table title while
   retaining the dealer/player labels, cards, totals, and wager controls. */
#blackjackScreen.blackjack-reference .bjr-table-title {
    display: none !important;
}

#blackjackScreen.blackjack-reference .blackjack-section,
#blackjackScreen.blackjack-reference .blackjack-section:first-child,
#blackjackScreen.blackjack-reference .blackjack-section:nth-child(2) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Phone play surface: the complete game journey stays in one compact panel.
   The document may continue below to the leaderboard, but the table, actions,
   chip values, and wager controls never use their own scroll areas. */
@media (max-width: 760px) {
    body.blackjack-table-view {
        overflow-x: clip !important;
        overflow-y: auto !important;
    }

    #blackjackScreen.blackjack-reference {
        min-height: 0;
        padding: 3px 4px calc(10px + env(safe-area-inset-bottom));
        overflow: visible !important;
    }

    #blackjackScreen.blackjack-reference > .topbar {
        position: relative;
        top: auto;
        min-height: 44px;
        height: 44px;
        margin-bottom: 4px;
        padding: 3px 6px;
        grid-template-columns: minmax(0, 1fr) auto;
        border-radius: 12px;
    }

    #blackjackScreen.blackjack-reference .brand {
        min-width: 0;
        justify-content: flex-start;
    }

    #blackjackScreen.blackjack-reference .table-brand-logo {
        display: block !important;
        width: 68px;
        height: 34px;
        object-fit: contain;
    }

    #blackjackScreen.blackjack-reference .table-brand-game,
    #blackjackScreen.blackjack-reference .how-to-play-button,
    #blackjackScreen.blackjack-reference .game-table-status > .pill {
        display: none !important;
    }

    /* The shared phone navigation pass hides the desktop status cluster.
       Restore its compact Menu trigger here so table-lobby, casino, theme,
       and logout actions remain reachable without adding a second header row. */
    #blackjackScreen.blackjack-reference > .topbar > .game-table-status {
        display: block !important;
        min-width: 82px;
        width: auto;
    }

    #blackjackScreen.blackjack-reference .game-nav-menu > summary {
        min-width: 82px;
        min-height: 44px;
        height: 44px;
        padding: 4px 7px;
        font-size: 11px;
    }

    #blackjackScreen.blackjack-reference > .topbar > .game-table-status {
        display: block !important;
    }

    #blackjackScreen.blackjack-reference .game-nav-panel {
        top: 46px;
    }

    #blackjackScreen.blackjack-reference .bjr-game-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "center"
            "leader";
        gap: 8px;
    }

    #blackjackScreen.blackjack-reference .bjr-center-table {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage {
        width: 100%;
        height: clamp(318px, 41svh, 340px);
        min-height: 318px;
        max-height: 340px;
        margin: 0;
        overflow: hidden !important;
        border-radius: 26px;
    }

    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage::before {
        inset: 5px;
        border-radius: 21px;
    }

    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage .table-inner {
        position: absolute !important;
        inset: 5px 4px 6px !important;
        display: block !important;
        overflow: hidden !important;
    }

    #blackjackScreen.blackjack-reference .blackjack-zone {
        width: 100%;
        height: 100%;
        padding: 5px 0 30px;
        grid-template-rows: 1fr 1.08fr;
        gap: 1px;
        overflow: hidden;
    }

    #blackjackScreen.blackjack-reference .blackjack-section,
    #blackjackScreen.blackjack-reference .blackjack-section:first-child,
    #blackjackScreen.blackjack-reference .blackjack-section:nth-child(2) {
        min-height: 0;
        padding: 2px 3px !important;
        overflow: visible;
        border-radius: 15px;
    }

    #blackjackScreen.blackjack-reference .blackjack-section:nth-child(2) {
        padding-bottom: 31px !important;
    }

    #blackjackScreen.blackjack-reference .blackjack-label {
        font-size: 13px;
        line-height: 1;
    }

    #blackjackScreen.blackjack-reference .blackjack-cards {
        width: 100%;
        min-height: 62px;
        gap: 2px;
        margin: 1px 0;
        flex-wrap: nowrap !important;
        overflow: visible;
    }

    #blackjackScreen.blackjack-reference .blackjack-section .card,
    #blackjackScreen.blackjack-reference .blackjack-reveal-card {
        flex: 0 1 clamp(44px, 13.2vw, 50px);
        width: clamp(44px, 13.2vw, 50px);
        min-width: 0;
        max-width: 50px;
        height: clamp(62px, 18.4vw, 70px);
        min-height: 62px;
        max-height: 70px;
        border-radius: 6px;
    }

    #blackjackScreen.blackjack-reference .blackjack-section .card-rank {
        font-size: clamp(17px, 5vw, 21px);
    }

    #blackjackScreen.blackjack-reference .blackjack-section .card-suit {
        font-size: clamp(21px, 6vw, 25px);
    }

    #blackjackScreen.blackjack-reference .blackjack-total {
        min-width: 72px;
        margin: 0;
        padding: 3px 8px;
        font-size: 10px;
        line-height: 1.1;
    }

    #blackjackScreen.blackjack-reference .bjr-stage-wager {
        right: 50%;
        bottom: 2px;
        width: 142px;
        min-height: 27px;
        grid-template-columns: auto auto auto;
        gap: 5px;
        padding: 2px 7px;
        transform: translateX(50%);
    }

    #blackjackScreen.blackjack-reference .bjr-stage-wager strong {
        font-size: 14px;
    }

    #blackjackScreen.blackjack-reference .blackjack-info {
        display: none !important;
    }

    #blackjackScreen.blackjack-reference .controls {
        position: static !important;
        width: 100%;
        margin: 0;
        padding: 5px;
        gap: 4px;
        overflow: visible !important;
        border-radius: 15px;
    }

    #blackjackScreen.blackjack-reference .bjr-action-heading,
    #blackjackScreen.blackjack-reference .bjr-chip-heading {
        gap: 6px;
        font-size: 8px;
        line-height: 1;
    }

    #blackjackScreen.blackjack-reference .controls-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    #blackjackScreen.blackjack-reference .controls-row .action-button,
    #blackjackScreen.blackjack-reference #blackjackNewHandButton {
        grid-column: auto;
        min-height: 44px;
        height: 44px;
        padding: 4px 2px;
        border-radius: 11px;
    }

    #blackjackScreen.blackjack-reference .controls-row .action-button::before {
        font-size: clamp(12px, 3.7vw, 15px);
        line-height: 1;
    }

    #blackjackScreen.blackjack-reference .controls-row .action-button::after {
        display: none;
    }

    #blackjackScreen.blackjack-reference .shared-chip-selector {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }

    #blackjackScreen.blackjack-reference .shared-chip-scroll {
        display: none !important;
    }

    #blackjackScreen.blackjack-reference .shared-chip-selector .bjr-chip-tray,
    #blackjackScreen.blackjack-reference .bjr-chip-tray {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 4px 2px 5px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        scrollbar-width: none !important;
    }

    #blackjackScreen.blackjack-reference .shared-chip-tray > .chip-option,
    #blackjackScreen.blackjack-reference .shared-chip-selector .shared-chip-tray > .chip-option {
        flex: 0 1 clamp(48px, 14.2vw, 54px) !important;
        width: clamp(48px, 14.2vw, 54px) !important;
        min-width: 44px !important;
        max-width: 54px !important;
        height: clamp(48px, 14.2vw, 54px) !important;
        min-height: 44px !important;
        max-height: 54px !important;
    }

    #blackjackScreen.blackjack-reference .bjr-chip-tray button[data-count]::after {
        min-width: 18px;
        height: 18px;
        padding: 0 2px;
        border-width: 1px;
        font-size: 8px;
    }

    #blackjackScreen.blackjack-reference .bjr-wager-row {
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        gap: 4px;
    }

    #blackjackScreen.blackjack-reference .bjr-wager-tools,
    #blackjackScreen.blackjack-reference .bet-row {
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    #blackjackScreen.blackjack-reference .bjr-wager-tools button,
    #blackjackScreen.blackjack-reference .selected-bet-display {
        min-width: 0;
        min-height: 44px;
        height: 44px;
        padding: 3px;
        border-radius: 10px;
    }

    #blackjackScreen.blackjack-reference .bjr-wager-tools button {
        font-size: 9px;
    }

    #blackjackScreen.blackjack-reference .selected-bet-display {
        font-size: 8px;
        line-height: 1.12;
    }



    #blackjackScreen.blackjack-reference #blackjackMessage {
        min-height: 0;
        padding: 0;
        font-size: 9px;
        line-height: 12px;
    }

    #blackjackScreen.blackjack-reference #blackjackMessage:empty {
        display: none;
    }

    #blackjackScreen.blackjack-reference .bjr-exit-bar,
    #blackjackScreen.blackjack-reference .bjr-right-rail {
        display: none !important;
    }

    #blackjackScreen.blackjack-reference .bjr-leaderboard {
        position: static;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding: 12px 7px 9px;
        overflow: visible;
    }
}

/*
 * The wager readout sits beside the chips rather than on a row of its own,
 * filling the space to their right, and it keeps showing the staked amount
 * for the whole hand so it is there when the double decision comes.
 */
/*
 * The wager strip reads left to right: the chip rail, the chip you press,
 * then what you have staked with its two tools underneath.
 */
#blackjackScreen.blackjack-reference .blackjack-chip-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(120px, auto);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#blackjackScreen.blackjack-reference .bjr-wager-column {
    display: grid;
    gap: 6px;
    min-width: 0;
}

#blackjackScreen.blackjack-reference .bjr-wager-column .bjr-wager-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

/* off the felt, so it sits in the flow rather than over the table */
#blackjackScreen.blackjack-reference .blackjack-chip-row > .floating-bet-dock {
    position: static;
}

/* the rail can afford bigger chips now the readout has moved beside it */
#blackjackScreen.blackjack-reference #blackjackInlineChips > .chip-option {
    width: min(104px, 100%) !important;
    max-width: 104px !important;
    min-height: 62px !important;
}

#blackjackScreen.blackjack-reference .bjr-current-bet {
    display: grid;
    place-items: center;
    gap: 2px;
    min-height: 58px;
    padding: 9px 14px;
    border: 1px solid rgba(228, 190, 72, .7);
    border-radius: 16px;
    background: rgba(0, 24, 16, .82);
    color: #ffe9a6;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .04em;
    text-align: center;
}

@media (max-width: 780px) {
    #blackjackScreen.blackjack-reference .blackjack-chip-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
    #blackjackScreen.blackjack-reference .bjr-current-bet {
        min-height: 34px;
        padding: 5px 10px;
        font-size: 10px;
    }
}

/*
 * On a phone the wager already reads out under the chips, so the copy sitting
 * on the felt was saying the same number twice in one screen.
 */
@media (max-width: 780px) {
    #blackjackScreen.blackjack-reference #blackjackReferenceStageWager {
        display: none !important;
    }
}

/* the chip is bigger now that it carries three lines of its own */
#blackjackScreen.blackjack-reference .floating-bet-button {
    width: clamp(104px, 9.5vw, 140px);
    height: clamp(104px, 9.5vw, 140px);
}

/*
 * On a phone the strip has no room for three columns, so the chip moves up
 * beside the LEADERBOARD heading -- which is dead space, and within reach of
 * a thumb resting at the bottom of the screen. The heading gives up its
 * centring to make room.
 */
@media (max-width: 780px) {
    #blackjackScreen.blackjack-reference .blackjack-chip-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    #blackjackScreen.blackjack-reference .blackjack-chip-row > .floating-bet-dock {
        display: none;
    }

    #blackjackScreen.blackjack-reference .blackjack-participants {
        position: relative;
        padding-right: 108px;
    }

    #blackjackScreen.blackjack-reference .blackjack-leaderboard-title,
    #blackjackScreen.blackjack-reference .blackjack-leaderboard-subtitle {
        text-align: left;
        padding-left: 4px;
    }

    #blackjackScreen.blackjack-reference .blackjack-participants > .floating-bet-dock {
        position: absolute;
        top: 8px;
        right: 8px;
        display: block;
    }

    #blackjackScreen.blackjack-reference .blackjack-participants .floating-bet-button {
        width: 92px;
        height: 92px;
    }
}

/* =========================================================
   THE BLACKJACK FELT, IN POKY DEE'S SHAPE
   =========================================================

   Two hands beside each other rather than stacked: the dealer on the left,
   yours on the right, and the wager chip riding on the felt's lower right
   the way Poky Dee's does.
   ========================================================= */

@media (min-width: 781px) {
    #blackjackScreen .blackjack-table.card-game-stage .blackjack-zone {
        width: 90%;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(0, 1fr);
        align-items: center;
        column-gap: clamp(14px, 2.4vw, 42px);
        row-gap: 0;
    }

    #blackjackScreen .blackjack-table.card-game-stage .blackjack-section {
        min-width: 0;
    }

    /* half the felt each, so the cards can be read from a chair */
    #blackjackScreen .blackjack-table.card-game-stage .blackjack-section .card {
        width: clamp(84px, 7vw, 124px);
        height: clamp(118px, 9.8vw, 174px);
    }

    #blackjackScreen .blackjack-table.card-game-stage .blackjack-cards {
        min-height: 0;
        gap: clamp(6px, .8vw, 12px);
    }

    /* a hand of four or more tightens rather than spilling into the other side */
    #blackjackScreen .blackjack-table.card-game-stage .blackjack-cards:has(> :nth-child(3)) > * + * {
        margin-left: calc(-1 * clamp(18px, 2vw, 38px));
    }

    /* the chip sits on the felt, lower right */
    #blackjackScreen .blackjack-table > .floating-bet-dock {
        position: absolute;
        z-index: 40;
        right: 4%;
        bottom: 7%;
        top: auto;
        left: auto;
    }
}

/*
 * Both hands run on the same three lines -- caption, cards, total -- so the
 * cards sit level whatever is written around them. Each side used to centre
 * on its own content, which is why the labels and the two hands drifted
 * apart, and why the totals ran off the bottom of the felt.
 */
@media (min-width: 781px) {
    #blackjackScreen .blackjack-table.card-game-stage .blackjack-section {
        display: grid;
        grid-template-rows: 32px auto minmax(30px, auto);
        align-content: center;
        justify-items: center;
        row-gap: 10px;
        padding-block: 0;
    }

    #blackjackScreen .blackjack-table.card-game-stage .blackjack-label {
        margin: 0;
        line-height: 1;
    }

    /* the total is a short pill that stays inside the felt */
    #blackjackScreen .blackjack-table.card-game-stage .blackjack-total {
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding: 5px 16px;
        border-radius: 999px;
        background: rgba(0, 22, 14, .82);
        font-size: clamp(14px, 1.3vw, 19px);
        line-height: 1.15;
        white-space: nowrap;
    }

    /* room for all three rows between the rails */
    #blackjackScreen .blackjack-table.card-game-stage .blackjack-zone {
        height: 86%;
        margin-block: auto;
    }
}


/* =========================================================
   THE WAGER ROW ON DESKTOP
   =========================================================

   Chips, then the readout with undo and clear beside them, then the Place My
   Bet chip at the end of the row. The readout and its tools used to sit hard
   right with a gap after the chips, and the chip itself rode on the felt --
   syncBlackjackChipHome() now hands it to this row instead, so it is part of
   the controls rather than floating over the rail, and it has room to be read.
   ========================================================= */

@media (min-width: 861px) {
    #blackjackScreen.blackjack-reference .blackjack-chip-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 14px;
    }

    #blackjackScreen.blackjack-reference #blackjackInlineChips { order: 1; }

    /* the readout and its two tools close up behind the chips */
    #blackjackScreen.blackjack-reference .bjr-wager-column {
        order: 2;
        width: clamp(230px, 17vw, 260px);
    }

    /* the chip takes the end of the row, and grows */
    #blackjackScreen.blackjack-reference #blackjackBetDock {
        position: static;
        order: 3;
        inset: auto;
        width: clamp(132px, 11.5vw, 176px);
        height: auto;
        margin: 0;
        transform: none;
        aspect-ratio: 1;
    }

    #blackjackScreen.blackjack-reference #blackjackBetDock .floating-bet-button {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-width: none;
    }
}


/* =========================================================
   ONE CARD SHAPE ON BOTH SIDES OF THE FELT
   =========================================================

   The dealer's cards came out narrower than the player's -- 86 wide against
   113 at the same height, so the dealer's read as squashed. The cards were
   given a width and a height from separate clamps, and the two sides do not
   render alike: the player's are wrapped in .blackjack-reveal-card, which
   sizes them, while the dealer's are bare .card elements taking the clamp.
   Any disagreement between the two therefore showed up as a different shape,
   not a different size.

   Both take one width and derive the height from a card's own 5:7 now, so the
   shape cannot drift. It also makes shrinking safe: a long hand narrows and
   the height follows, where before a fixed height meant a shrunk card just got
   thinner.
   ========================================================= */

@media (min-width: 861px) {
    #blackjackScreen.blackjack-reference .blackjack-section .card,
    #blackjackScreen.blackjack-reference .blackjack-reveal-card {
        flex: 0 1 auto;
        width: clamp(96px, 7vw, 124px);
        min-width: 0;
        height: auto !important;
        aspect-ratio: 5 / 7 !important;
    }

    #blackjackScreen.blackjack-reference .blackjack-reveal-card .card {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    /* a long hand stays on the felt: bounded here, so flex has cause to shrink */
    #blackjackScreen.blackjack-reference .blackjack-cards {
        max-width: 100%;
        min-width: 0;
    }

    /* the two tools need not stand as tall as the readout above them */
    #blackjackScreen.blackjack-reference .bjr-wager-tools button {
        min-height: 44px;
        font-size: 12px;
    }
}


/* =========================================================
   ONE FRAME, AND SIX CHIPS THAT FIT
   =========================================================

   The felt appeared to sit inside a second thin gold oval. That ring was
   drawn here -- a ::before inset 15px from the table with a 1px gold border
   and border-radius:inherit, sitting outside the ornate rail of the artwork
   itself. The artwork carries its own rail, so the ring was a duplicate and
   is what made the table read as stretched. It goes.

   The chip rack was 419px holding 680px of chips, so it scrolled and the
   1000 chip was cut off -- its right edge fell at 1097 against a rack ending
   at 844. Six equal columns instead of a scrolling flex row: every
   denomination is now always visible and reachable without a scrollbar.
   ========================================================= */

@media (min-width: 861px) {
    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage::before {
        display: none;
    }

    #blackjackScreen.blackjack-reference #blackjackInlineChips {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: clamp(4px, .5vw, 10px) !important;
        min-width: 0 !important;
        padding: 6px 2px 8px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    #blackjackScreen.blackjack-reference #blackjackInlineChips > .chip-option {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 74px !important;
        height: auto !important;
        min-height: 0 !important;
        justify-self: center !important;
        aspect-ratio: 1 !important;
    }

    /* nothing inside it overflows, so it has no reason to offer a scrollbar */
    #blackjackScreen.blackjack-reference .blackjack-participants { overflow-x: clip; }
}


/* =========================================================
   THE CHIP RACK GETS ITS ROOM BACK
   =========================================================

   The chips read as 45-50px because the rack was only ever given 419 of the
   row's 939, and 88 of that went to a pair of scroll arrows the rack no longer
   needs -- it is a laid-out row now, not a scroller. The chips were then sized
   to whatever was left.

   The chip area takes the largest share of the row instead, the arrows stand
   down on desktop, and the chips are sized on their own terms rather than on
   the remainder. Place Your Bets is not touched: it keeps the 176px it had.

   Between 1280 and 1600 the row still cannot hold six full-size chips beside
   the readout and the medallion, so there the chips take a row to themselves
   and the other two sit beneath. The panel grows a little; the chips stay big.
   ========================================================= */

@media (min-width: 1280px) {
    #blackjackScreen.blackjack-reference .blackjack-chip-row {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 240px) auto;
        gap: 14px;
    }

    /* the rack does not scroll any more, so its arrows are 88px of dead weight */
    #blackjackScreen.blackjack-reference .shared-chip-selector { grid-template-columns: minmax(0, 1fr); }
    #blackjackScreen.blackjack-reference .shared-chip-selector .shared-chip-scroll { display: none; }

    #blackjackScreen.blackjack-reference #blackjackInlineChips {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: clamp(11px, .85vw, 14px) !important;
        min-width: 0 !important;
        padding: 6px 2px 8px !important;
        overflow: visible !important;
    }

    #blackjackScreen.blackjack-reference #blackjackInlineChips > .chip-option {
        flex: 0 0 auto !important;
        width: clamp(64px, 4.05vw, 70px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: clamp(64px, 4.05vw, 70px) !important;
        min-height: 0 !important;
        aspect-ratio: 1 !important;
    }

    #blackjackScreen.blackjack-reference #blackjackInlineChips > .chip-option img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

@media (min-width: 1280px) and (max-width: 1599px) {
    #blackjackScreen.blackjack-reference .blackjack-chip-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 12px;
    }
    #blackjackScreen.blackjack-reference .shared-chip-selector { grid-column: 1 / -1; }
}


/* =========================================================
   THE TABLE IS BOUNDED BY HEIGHT, AND THE TRAY IS A TRAY
   =========================================================

   Two faults, measured at 1886x891.

   The felt was 1180x463 -- ratio 2.548 against artwork that is 2160x1020, or
   2.118. It was sized by width alone, with min-height:440px and no declared
   ratio, so it was genuinely stretched and it grew taller as the column grew
   wider, pushing the controls toward the fold. It is bounded by the height
   left over from the header and the controls now, and carries the artwork's
   own ratio: width falls first and the height follows it, which is the only
   way to shorten it without distorting it.

   The chips were not small, they were stranded. justify-content:space-between
   spread six 72px chips across a 699px rack, so the gaps read as the subject
   and the chips as an afterthought. A tray packs from the start with a fixed
   14px gap; the six now span 502px instead of 699.

   Their PNGs were checked for transparent padding, since a 72px box showing a
   50px chip would look the same: 1.6% on each side, so the box is honest.

   Below 1600 the row cannot hold six full-size chips beside the readout and
   the medallion, so the tray takes a row of its own and the height reserve
   grows to match the taller panel.
   ========================================================= */

@media (min-width: 1280px) {
    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage {
        width: min(100%, 1180px, calc((100dvh - 412px) * 2160 / 1020));
        height: auto;
        min-height: 0;
        max-height: none;
        margin-inline: auto;
        aspect-ratio: 2160 / 1020;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    #blackjackScreen.blackjack-reference .blackjack-chip-row {
        grid-template-columns: minmax(0, 1fr) clamp(240px, 22%, 300px) auto;
        gap: 14px;
        align-items: center;
    }

    #blackjackScreen.blackjack-reference .shared-chip-selector { grid-column: auto; }

    #blackjackScreen.blackjack-reference #blackjackInlineChips {
        display: flex !important;
        grid-template-columns: none !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        min-width: 0 !important;
        padding: 6px 2px 8px !important;
        overflow: visible !important;
    }

    #blackjackScreen.blackjack-reference #blackjackInlineChips > .chip-option {
        flex: 0 0 72px !important;
        width: 72px !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 72px !important;
        min-height: 0 !important;
        aspect-ratio: 1 !important;
    }

    #blackjackScreen.blackjack-reference #blackjackInlineChips > .chip-option img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

@media (min-width: 1280px) and (max-width: 1599px) {
    /* the tray takes its own row, and the reserve grows for the taller panel */
    #blackjackScreen.blackjack-reference .blackjack-table.card-game-stage {
        width: min(100%, 1180px, calc((100dvh - 492px) * 2160 / 1020));
    }
    #blackjackScreen.blackjack-reference .blackjack-chip-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 10px;
    }
    #blackjackScreen.blackjack-reference .shared-chip-selector { grid-column: 1 / -1; }
    #blackjackScreen.blackjack-reference #blackjackInlineChips { justify-content: center !important; }
}


/* =========================================================
   THE CHIPS, MADE ACTUALLY BIGGER
   =========================================================

   Nothing was holding them small. The button measured 72x72 and the image
   measured 72x72 inside it -- no max-width, no percentage width, no transform,
   no inline size, no background-image, no pseudo-element carrying the artwork.
   And the PNGs are full-bleed: every denomination is a 512x512 canvas whose
   visible artwork is 510x506, so a 72px box was already drawing a 72px chip.

   So there was no override to remove. They were 72px and simply needed to be
   larger. The box is the visible size for these assets, so the button carries
   the hit area and the image sits 2px inside it.
   ========================================================= */

@media (min-width: 1280px) {
    #blackjackScreen.blackjack-reference #blackjackInlineChips { gap: 12px !important; }

    #blackjackScreen.blackjack-reference #blackjackInlineChips > .chip-option {
        flex: 0 0 92px !important;
        width: 92px !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 92px !important;
        min-height: 0 !important;
    }

    #blackjackScreen.blackjack-reference #blackjackInlineChips > .chip-option img {
        display: block !important;
        width: 88px !important;
        max-width: none !important;
        height: 88px !important;
        max-height: none !important;
        margin: auto !important;
        object-fit: contain !important;
    }
}


/* =========================================================
   EVEN SPACING ACROSS THE BETTING ROW
   =========================================================

   The chip column was a 1fr track, so it kept whatever width the chips did not
   use and the readout was pushed hard against the medallion -- 99px of air on
   its left and 9px on its right. Each of the three sizes to its content now
   and the slack is shared between them, so the readout sits midway.
   ========================================================= */

@media (min-width: 1600px) {
    #blackjackScreen.blackjack-reference .blackjack-chip-row {
        grid-template-columns: auto auto auto;
        justify-content: space-between;
        column-gap: 0;
    }
    #blackjackScreen.blackjack-reference .shared-chip-selector { width: auto; }
}

/*
 * THE MENU BUTTON WAS FALLING OUT OF THE TOPBAR
 *
 * The topbar is a two-column grid, brand and wallet badge, with a fixed
 * height. .table-info is its third child, so below 760px -- where it turns
 * into a block and the menu is the only thing left in it -- it landed in an
 * implicit third row that the topbar had no height for. Measured at 390px:
 * topbar 3-47, menu 69-113, table 51-391. The menu sat 66px past the bottom
 * of its own bar, on the felt, over the DEALER label, and the topbar's
 * z-index of 5000 kept it there.
 *
 * The bar sizes to its content now and the menu takes a row of its own across
 * the full width. After: topbar 3-118 with the menu at 70-114 inside it, and
 * the table starting at 122.
 */
@media (max-width: 760px) {
    #blackjackScreen.blackjack-reference > .topbar {
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr auto !important;
        row-gap: 6px !important;
        align-items: center !important;
    }

    #blackjackScreen.blackjack-reference > .topbar > .table-info {
        grid-column: 1 / -1 !important;
    }
}

/*
 * A HOUSE ROOM KEEPS THE OTHER SEATS' HANDS TO THEMSELVES
 *
 * Everyone plays the same dealer, and no seat plays another, so the only hands
 * that matter while a round is live are yours and the dealer's. The other
 * seats stay on the table -- name, wager, whose turn it is -- so you can see
 * who you are sat with, but their cards and their running total wait for the
 * result popup, which lists every hand.
 *
 * Only a house room. In a hosted room the person dealing has to see what they
 * are playing against, so nothing there is hidden.
 */
body.house-dealer-room .dealer-seat:not(.is-you) .dealer-seat-cards,
body.house-dealer-room .dealer-seat:not(.is-you) .dealer-seat-total {
    display: none;
}

/* 2026-09-08: readable betting guidance and genuinely large themed chips. */
#blackjackScreen.blackjack-reference .blackjack-info {
    color: #fff7cf !important;
    background: rgba(1, 19, 12, .94) !important;
    border: 2px solid rgba(255, 222, 116, .88) !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.72), 0 0 16px rgba(255,211,82,.2) !important;
    font-size: clamp(15px, 1.35vw, 20px) !important;
    font-weight: 950 !important;
    line-height: 1.35 !important;
    text-shadow: 0 2px 3px #000 !important;
}

@media (max-width: 1279px) {
    #blackjackScreen.blackjack-reference #blackjackInlineChips > .chip-option {
        flex: 0 0 clamp(68px, 10vw, 88px) !important;
        width: clamp(68px, 10vw, 88px) !important;
        height: clamp(68px, 10vw, 88px) !important;
        min-width: 68px !important;
        min-height: 68px !important;
    }
    #blackjackScreen.blackjack-reference #blackjackInlineChips > .chip-option img {
        width: calc(100% - 4px) !important;
        height: calc(100% - 4px) !important;
        max-width: none !important;
        max-height: none !important;
    }
}