.scbj-app {
    --scbj-ink: #18251f;
    --scbj-muted: #68776e;
    --scbj-paper: #fbfaf6;
    --scbj-line: #e4e7dc;
    --scbj-green: #0d7657;
    --scbj-green-dark: #064936;
    --scbj-gold: #d8ae62;
    --scbj-gold-dark: #805b20;
    color: var(--scbj-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 16px auto;
    max-width: 1050px;
}

.scbj-app * { box-sizing: border-box; }
.scbj-app button, .scbj-app input { font: inherit; }

.scbj-shell {
    background: var(--scbj-paper);
    border: 1px solid #e8e7df;
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(21, 38, 30, .12);
    overflow: hidden;
}

.scbj-header {
    align-items: center;
    border-bottom: 1px solid var(--scbj-line);
    display: flex;
    justify-content: space-between;
    min-height: 58px;
    padding: 6px 12px;
}

.scbj-brand { align-items: center; display: flex; gap: 8px; }
.scbj-brand-mark { align-items: center; background: #e7f0e9; border-radius: 9px; color: var(--scbj-green); display: inline-flex; font-size: 19px; height: 32px; justify-content: center; width: 32px; }
.scbj-brand-copy { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.scbj-brand-copy strong { font-family: Georgia, serif; font-size: 14px; }
.scbj-brand-copy span { color: var(--scbj-muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; }

.scbj-intro { padding: 6px 12px; text-align: center; }
.scbj-eyebrow { color: var(--scbj-gold-dark); font-size: 10px; font-weight: 850; letter-spacing: .17em; margin-bottom: 5px; }
.scbj-intro-title { color: #17291f; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 4vw, 39px); letter-spacing: -.035em; line-height: 1.08; margin: 0; }
.scbj-intro-subtitle { color: var(--scbj-muted); font-size: 13px; line-height: 1.5; margin: 7px auto 0; max-width: 600px; }
.scbj-intro-subtitle.scbj-game-chips-line { color: #117a58; font-size: 15px; font-weight: 800; }
.scbj-message { font-size: 12px; font-weight: 650; min-height: 0; margin: 0 auto; max-width: 760px; padding: 0; text-align: center; }
.scbj-message:not(:empty) { margin-bottom: 9px; padding: 6px 12px; }
.scbj-message.is-error { background: #fff0ed; border: 1px solid #f5c4b9; border-radius: 9px; color: #9c3523; }
.scbj-message.is-success { background: #eaf6ef; border: 1px solid #c5e5d0; border-radius: 9px; color: #146342; }
.scbj-message.is-info { background: #eef4f1; border: 1px solid #d8e6dd; border-radius: 9px; color: #285540; }

.scbj-home-panel { margin: 0 auto; max-width: 780px; padding: 4px 12px 6px; }
.scbj-field { display: flex; flex-direction: column; gap: 5px; margin: 0 auto 12px; max-width: 350px; }
.scbj-field > span { color: var(--scbj-muted); font-size: 11px; font-weight: 750; }
.scbj-name-field { align-items: center; flex-direction: row; gap: 8px; max-width: 440px; }
.scbj-name-field > span { flex: 0 0 auto; white-space: nowrap; }
.scbj-name-field .scbj-input { flex: 1 1 auto; min-width: 0; }
.scbj-inline-field { align-items: center; flex-direction: row; gap: 8px; max-width: none; text-align: left; }
.scbj-inline-field > span { flex: 0 0 auto; white-space: nowrap; }
.scbj-inline-field .scbj-input { flex: 1 1 auto; min-width: 0; }
.scbj-input { background: #fff; border: 1px solid #d7ddd5; border-radius: 9px; color: var(--scbj-ink); min-height: 38px; outline: none; padding: 6px 12px; transition: border-color .15s, box-shadow .15s; width: 100%; }
.scbj-input:focus { border-color: var(--scbj-green); box-shadow: 0 0 0 3px rgba(13, 118, 87, .12); }
.scbj-mode-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scbj-mode-card:only-child { grid-column: 1 / -1; justify-self: center; max-width: 465px; width: 100%; }
.scbj-mode-card { background: #fff; border: 1px solid var(--scbj-line); border-radius: 13px; padding: 6px 12px; text-align: center; }
.scbj-mode-card-highlight { background: #f4f8f4; border-color: #d5e6d9; }
.scbj-paid-card { border-color: #c7d8ef; }
.scbj-mode-icon { align-items: center; border-radius: 12px; display: flex; font-family: Georgia, serif; font-size: 24px; height: 38px; justify-content: center; margin: 0 auto 6px; width: 38px; }
.scbj-icon-solo { background: #f7efdd; color: var(--scbj-gold-dark); }
.scbj-icon-paid { background: #eaf1fc; color: #315c98; }
.scbj-mode-title { font-family: Georgia, serif; font-size: 18px; font-weight: 700; margin: 0; }
.scbj-mode-copy { color: var(--scbj-muted); font-size: 12px; line-height: 1.4; margin: 4px auto 9px; max-width: 300px; min-height: 34px; }
.scbj-number-field { margin-bottom: 8px; max-width: none; text-align: left; }
.scbj-pool-note { color: var(--scbj-muted); font-size: 10px; line-height: 1.4; margin: 0 auto 8px; }
.scbj-resume-card { align-items: center; background: #f4f7f4; border: 1px solid var(--scbj-line); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; margin: 0 auto 10px; max-width: 465px; padding: 6px 12px; }
.scbj-resume-card > span { color: var(--scbj-muted); font-size: 12px; font-weight: 700; }
.scbj-resume-actions { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; }
.scbj-resume-card .scbj-button-outline { background: #26372d !important; border-color: #52665a !important; color: #f8faf9 !important; }
.scbj-resume-card .scbj-button-cancel { background: #fff0ee !important; border-color: #e5aaa1 !important; color: #8c2b23 !important; }

.scbj-button { align-items: center; border: 1px solid transparent; border-radius: 9px; cursor: pointer; display: inline-flex; font-size: 12px; font-weight: 800; justify-content: center; min-height: 38px; padding: 6px 12px; text-decoration: none; transition: transform .15s, filter .15s, box-shadow .15s; }
.scbj-button:hover:not(:disabled) { box-shadow: 0 5px 13px rgba(16, 39, 27, .13); filter: brightness(1.03); transform: translateY(-1px); }
.scbj-button:disabled { cursor: wait; opacity: .55; }
.scbj-button-gold { background: linear-gradient(135deg, #e5c47d, #c99d4d); color: #302714; }
.scbj-button-green { background: linear-gradient(135deg, #128568, #086248); color: #fff; }
.scbj-button-outline { background: #fff; border-color: #d8dfd7; color: #33483b; }
.scbj-mode-card .scbj-button { width: 100%; }

.scbj-join-form { align-items: center; border-top: 1px solid var(--scbj-line); display: flex; gap: 9px; justify-content: space-between; margin-top: 12px; padding-top: 10px; }
.scbj-join-copy { color: #43564a; font-size: 12px; font-weight: 800; }
.scbj-join-controls { display: flex; gap: 6px; max-width: 320px; width: 100%; }
.scbj-code-input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.scbj-footnote { align-items: center; border-top: 1px solid var(--scbj-line); color: var(--scbj-muted); display: flex; font-size: 10px; gap: 6px; justify-content: center; margin: 0 14px; padding: 6px 0; text-align: center; }
.scbj-footnote span:first-child { color: var(--scbj-gold-dark); font-size: 16px; }

.scbj-table { background: radial-gradient(ellipse at 50% 38%, #147459 0, #0a6348 40%, #064a38 100%); border: 7px solid #473923; border-radius: 46% / 14%; box-shadow: inset 0 0 0 1px rgba(231, 199, 131, .55), inset 0 0 34px rgba(0, 0, 0, .16), 0 12px 26px rgba(20, 36, 26, .15); color: #f8f6e9; margin: 0 14px 14px; min-height: 340px; overflow: hidden; padding: 6px 12px; position: relative; }
.scbj-table-glow { border: 1px solid rgba(238, 212, 155, .24); border-radius: 48% / 18%; inset: 8px; pointer-events: none; position: absolute; }
.scbj-table-details { align-items: center; color: rgba(255, 249, 228, .9); display: flex; flex-wrap: wrap; font-size: 10px; font-weight: 750; gap: 5px 12px; justify-content: center; margin: 0 auto 7px; max-width: 690px; position: relative; z-index: 1; }
.scbj-table-details span { background: rgba(2, 47, 34, .3); border: 1px solid rgba(226, 218, 183, .2); border-radius: 999px; padding: 4px 8px; }
.scbj-hand-area, .scbj-table-divider, .scbj-players-heading, .scbj-player-grid, .scbj-game-controls, .scbj-result, .scbj-turn-banner, .scbj-deal-again { position: relative; z-index: 1; }
.scbj-hand-area { margin: 0 auto; max-width: 690px; text-align: center; }
.scbj-hand-heading { align-items: center; display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; }
.scbj-hand-title { color: #f5efd9; font-size: 10px; font-weight: 850; letter-spacing: .15em; margin: 0; }
.scbj-total { align-items: center; background: rgba(250, 242, 216, .15); border: 1px solid rgba(255, 255, 255, .17); border-radius: 999px; color: #fff4d6; display: inline-flex; font-size: 10px; font-weight: 850; justify-content: center; min-width: 22px; padding: 3px 7px; }
.scbj-total-hidden { color: #e8d69f; }
.scbj-cards { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; min-height: 96px; }
.scbj-card { background: linear-gradient(145deg, #fffefa, #f2f0e7); border: 1px solid rgba(33, 40, 33, .16); border-radius: 9px; box-shadow: 0 5px 12px rgba(0, 0, 0, .2); color: #1d2820; display: flex; flex: 0 0 64px; flex-direction: column; height: 91px; justify-content: space-between; padding: 5px 6px; position: relative; text-align: left; }
.scbj-card.is-red { color: #b6343a; }
.scbj-card-corner { display: flex; flex-direction: column; font-size: 11px; font-weight: 850; line-height: .95; width: fit-content; }
.scbj-card-corner span { font-size: 10px; }
.scbj-card-suit { align-self: center; font-size: 25px; line-height: 1; }
.scbj-card-corner-bottom { align-self: flex-end; transform: rotate(180deg); }
.scbj-card-back { align-items: center; background: repeating-linear-gradient(45deg, #254b3b, #254b3b 5px, #2e5b46 5px, #2e5b46 10px); border: 3px solid #efe4c3; color: #e7d5a5; justify-content: center; outline: 1px solid rgba(255, 255, 255, .35); text-align: center; }
.scbj-card-back span { align-items: center; border: 1px solid rgba(243, 221, 171, .68); border-radius: 50%; display: flex; font-size: 23px; height: 42px; justify-content: center; width: 42px; }
.scbj-table-divider { align-items: center; color: #e2c87f; display: flex; gap: 8px; justify-content: center; margin: 11px auto; max-width: 470px; }
.scbj-table-divider::before, .scbj-table-divider::after { background: rgba(232, 211, 160, .28); content: ""; height: 1px; width: 42%; }
.scbj-table-divider span { font-size: 10px; }
.scbj-game-controls { display: flex; gap: 8px; justify-content: center; margin: 11px auto 0; }
.scbj-game-controls .scbj-button { min-width: 110px; }
.scbj-deal-again { display: flex; margin: 12px auto 0; min-width: 155px; }
.scbj-result { align-items: center; border: 1px solid rgba(247, 230, 190, .28); border-radius: 9px; color: #fff4d8; display: flex; font-size: 13px; gap: 7px; justify-content: center; margin: 10px auto 0; max-width: 400px; padding: 6px 12px; text-align: center; }
.scbj-result.is-win { background: rgba(224, 190, 104, .18); color: #ffedb8; }
.scbj-result.is-push { background: rgba(255, 255, 255, .1); }
.scbj-result.is-loss { background: rgba(30, 40, 33, .25); }
.scbj-result-mark { font-size: 15px; }
.scbj-payout-detail { color: #fff0c5; font-size: 11px; font-weight: 750; margin: 5px auto 0; position: relative; text-align: center; z-index: 1; }
.scbj-next-hand { align-items: end; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px auto 0; max-width: 450px; position: relative; z-index: 1; }
.scbj-next-hand .scbj-field { margin: 0; max-width: 160px; text-align: left; }
.scbj-next-hand .scbj-input { min-height: 34px; }
.scbj-broke-note { color: #fff0c5; font-size: 11px; margin: 10px auto 0; position: relative; text-align: center; z-index: 1; }
.scbj-cashout { display: flex; margin: 8px auto 0; min-width: 210px; position: relative; z-index: 1; }
.scbj-leaderboard { background: #fff; border: 1px solid var(--scbj-line); border-radius: 12px; margin: 10px 12px; padding: 6px 12px; }
.scbj-leaderboard-preview { padding: 6px 12px; }
.scbj-leaderboard-full { margin-left: auto; margin-right: auto; max-width: 780px; }
.scbj-leaderboard-link { align-items: baseline; color: #26372d; display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; min-height: 28px; text-decoration: none; }
.scbj-leaderboard-link:hover .scbj-leaderboard-title { text-decoration: underline; }
.scbj-leaderboard-link:focus-visible { border-radius: 4px; outline: 2px solid var(--scbj-green); outline-offset: 3px; }
.scbj-leaderboard-cta { color: var(--scbj-green); font-size: 11px; font-weight: 800; }
.scbj-leaderboard-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; }
.scbj-leaderboard-title { color: #26372d; font-family: Georgia, serif; font-size: 15px; font-weight: 700; margin: 0; }
.scbj-leaderboard-heading > span, .scbj-empty-leaderboard { color: var(--scbj-muted); font-size: 10px; }
.scbj-empty-leaderboard { margin: 7px 0 0; }
.scbj-leaderboard-list { list-style: none; margin: 6px 0 0; padding: 0; }
.scbj-leaderboard-row { align-items: center; border-top: 1px solid #edf0ea; display: flex; gap: 8px; min-height: 29px; }
.scbj-rank { align-items: center; background: #f3f5ef; border-radius: 50%; color: var(--scbj-muted); display: inline-flex; font-size: 10px; font-weight: 800; height: 20px; justify-content: center; width: 20px; }
.scbj-leader-name { color: #29392f; flex: 1; font-size: 11px; overflow-wrap: anywhere; }
.scbj-leader-score { color: var(--scbj-green); font-size: 10px; font-weight: 800; }
.scbj-link-button { background: transparent; border: 0; color: #4b6757; cursor: pointer; display: block; font-size: 11px; font-weight: 750; margin: 0 auto 12px; padding: 6px 12px; }
.scbj-link-button:hover { color: var(--scbj-green); text-decoration: underline; }
.scbj-leaderboard-back { text-decoration: none; }

.scbj-room-share { align-items: center; background: #fff; border: 1px solid var(--scbj-line); border-radius: 12px; display: flex; justify-content: space-between; margin: 0 14px 10px; padding: 6px 10px; }
.scbj-room-code-block { align-items: center; display: flex; gap: 8px; }
.scbj-room-code-block span { color: var(--scbj-muted); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.scbj-room-code-block strong { color: #263c30; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 19px; letter-spacing: .14em; }
.scbj-room-share-actions { display: flex; gap: 6px; }
.scbj-small-button { min-height: 32px; }
.scbj-room-table { border-radius: 26px; padding-bottom: 16px; }
.scbj-players-heading { align-items: center; display: flex; justify-content: center; gap: 7px; margin: 0 auto 8px; }
.scbj-players-title { color: #f5efd9; font-size: 10px; font-weight: 700; letter-spacing: .16em; margin: 0; }
.scbj-players-heading span { color: rgba(248, 246, 233, .7); font-size: 9px; font-weight: 750; }
.scbj-player-grid { display: grid; gap: 7px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scbj-player-seat { background: rgba(2, 47, 34, .32); border: 1px solid rgba(226, 218, 183, .22); border-radius: 11px; min-width: 0; padding: 6px; }
.scbj-player-seat.is-active { background: rgba(225, 190, 102, .15); border-color: #d8b867; box-shadow: 0 0 0 1px rgba(216, 184, 103, .18); }
.scbj-player-seat.is-you { border-color: rgba(227, 208, 158, .55); }
.scbj-seat-heading { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; justify-content: space-between; margin-bottom: 6px; }
.scbj-seat-heading strong { color: #fff9e7; font-size: 11px; overflow-wrap: anywhere; }
.scbj-seat-status { color: #d8d9bd; font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.scbj-status-playing, .scbj-status-blackjack { color: #f4d37e; }
.scbj-status-bust { color: #ffb0a7; }
.scbj-cards-small { gap: 4px; min-height: 61px; }
.scbj-cards-small .scbj-card { border-radius: 6px; flex-basis: 39px; height: 56px; padding: 3px 4px; }
.scbj-cards-small .scbj-card-corner { font-size: 9px; }
.scbj-cards-small .scbj-card-corner span { font-size: 8px; }
.scbj-cards-small .scbj-card-suit { font-size: 17px; }
.scbj-cards-small .scbj-card-back span { font-size: 15px; height: 28px; width: 28px; }
.scbj-seat-total, .scbj-seat-outcome { color: rgba(255, 250, 232, .78); font-size: 9px; font-weight: 700; margin-top: 4px; text-align: center; }
.scbj-seat-outcome { color: #f4d37e; }
.scbj-seat-waiting { color: rgba(255, 250, 232, .65); font-size: 10px; padding: 6px 4px; text-align: center; }
.scbj-turn-banner { color: #f3ead0; font-size: 11px; font-weight: 750; margin: 9px auto 0; text-align: center; }
.scbj-turn-banner.is-your-turn { color: #ffdf91; }
.scbj-result.is-room-result { margin-top: 9px; }
.scbj-room-footer { align-items: center; color: #768379; display: flex; font-size: 10px; justify-content: space-between; margin: 0 14px 10px; }
.scbj-room-footer .scbj-link-button { margin: 0; }
.scbj-copy-buffer { height: 1px; left: -9999px; opacity: 0; position: fixed; top: 0; width: 1px; }

@media (max-width: 640px) {
    .scbj-app { margin: 8px auto; }
    .scbj-shell { border-radius: 13px; }
    .scbj-header { min-height: 48px; }
    .scbj-intro { padding-top: 6px; }
    .scbj-intro-subtitle { font-size: 12px; }
    .scbj-home-panel { padding-bottom: 6px; }
    .scbj-mode-grid { grid-template-columns: 1fr; }
    .scbj-mode-card { display: block; text-align: left; }
    .scbj-mode-icon { height: 32px; margin: 0 0 5px; width: 32px; }
    .scbj-mode-title { font-size: 16px; }
    .scbj-mode-copy { margin: 3px 0 7px; min-height: 0; }
    .scbj-join-form { align-items: stretch; flex-direction: column; }
    .scbj-join-controls { max-width: none; }
    .scbj-footnote { align-items: flex-start; justify-content: flex-start; text-align: left; }
    .scbj-table { border-width: 5px; border-radius: 25px; margin: 0 8px 10px; min-height: 0; padding: 6px 8px; }
    .scbj-table-glow { border-radius: 20px; inset: 5px; }
    .scbj-card { flex-basis: 55px; height: 78px; }
    .scbj-cards { gap: 5px; min-height: 82px; }
    .scbj-game-controls .scbj-button { flex: 1; min-width: 0; max-width: 160px; }
    .scbj-table-details { gap: 4px; }
    .scbj-table-details span { padding: 4px 6px; }
    .scbj-next-hand { align-items: stretch; flex-direction: column; padding: 0 6px; }
    .scbj-next-hand .scbj-field { max-width: none; }
    .scbj-next-hand .scbj-button { width: 100%; }
    .scbj-player-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scbj-room-footer { align-items: flex-start; flex-direction: column; gap: 4px; margin-left: 8px; }
    .scbj-seat-heading strong { font-size: 10px; }
}

@media (max-width: 360px) {
    .scbj-player-grid { grid-template-columns: 1fr; }
    .scbj-cards-small .scbj-card { flex-basis: 44px; height: 62px; }
}

/* Follow the player's device appearance while keeping the felt and cards clear. */
@media (prefers-color-scheme: dark) {
    .scbj-app {
        --scbj-ink: #e8eee9;
        --scbj-muted: #a8b5ac;
        --scbj-paper: #17211b;
        --scbj-line: #34443a;
        --scbj-green: #39a883;
        --scbj-green-dark: #176b50;
        --scbj-gold-dark: #e2bf76;
        color-scheme: dark;
    }

    .scbj-shell { background: #17211b; border-color: #34443a; box-shadow: 0 16px 48px rgba(0, 0, 0, .38); }
    .scbj-header { border-color: var(--scbj-line); }
    .scbj-brand-mark, .scbj-icon-multi { background: #233b30; color: #65c7a4; }
    .scbj-brand-copy strong { color: #f0f3ed; }
    .scbj-eyebrow { color: #e2bf76; }
    .scbj-intro-title, .scbj-mode-title { color: #f0f3ed; }
    .scbj-app .scbj-intro-subtitle.scbj-game-chips-line { color: #65e0b3 !important; font-size: 15px; }
    .scbj-message.is-error { background: #3b211e; border-color: #75443c; color: #ffc0b3; }
    .scbj-message.is-success { background: #1b382b; border-color: #315c45; color: #a5e2bd; }
    .scbj-message.is-info { background: #202f2a; border-color: #3a5147; color: #bdd8c8; }
    .scbj-input { background: #111a15; border-color: #45564b; color: #edf2ee; }
    .scbj-input::placeholder { color: #94a298; }
    .scbj-mode-card { background: #1c2921; border-color: #34443a; }
    .scbj-mode-card-highlight { background: #20342a; border-color: #3b654e; }
    .scbj-icon-solo { background: #3a3020; color: #e2bf76; }
    .scbj-icon-paid { background: #24344b; color: #a8c8ff; }
    .scbj-app .scbj-intro-title,
    .scbj-app .scbj-mode-title,
    .scbj-app .scbj-leaderboard-title { color: #f0f3ed !important; }
    .scbj-app .scbj-intro-subtitle,
    .scbj-app .scbj-mode-copy,
    .scbj-app .scbj-field > span,
    .scbj-app .scbj-footnote,
    .scbj-app .scbj-leaderboard-heading > span,
    .scbj-app .scbj-empty-leaderboard,
    .scbj-app .scbj-resume-card > span { color: #c5d0c9 !important; }
    .scbj-app .scbj-table-details { color: #fff9e8; }
    .scbj-join-form, .scbj-footnote { border-color: var(--scbj-line); }
    .scbj-join-copy, .scbj-link-button { color: #c1cec4; }
    .scbj-room-footer { color: #c5d0c9; }
    .scbj-button-outline { background: #202d25; border-color: #45574b; color: #e1e9e2; }
    .scbj-leaderboard { background: #1c2921; border-color: #34443a; }
    .scbj-leaderboard-title, .scbj-leader-name { color: #e7eee8; }
    .scbj-resume-card { background: #1c2921; border-color: #34443a; }
    .scbj-leaderboard-row { border-color: #34443a; }
    .scbj-rank { background: #2a3a30; }
    .scbj-table {
        background: radial-gradient(ellipse at 50% 38%, #147c5b 0, #075c43 40%, #043b2e 100%);
        border-color: #594a2e;
        box-shadow: inset 0 0 0 1px rgba(231, 199, 131, .48), inset 0 0 34px rgba(0, 0, 0, .24), 0 12px 26px rgba(0, 0, 0, .3);
    }
    .scbj-app .scbj-card:not(.scbj-card-back),
    .scbj-app .scbj-card:not(.scbj-card-back) * {
        color: #17231c !important;
        opacity: 1 !important;
    }
    .scbj-app .scbj-card.is-red:not(.scbj-card-back),
    .scbj-app .scbj-card.is-red:not(.scbj-card-back) * { color: #a8172b !important; }
}

/* The host theme has its own night-mode toggle, independent of OS appearance. */
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-app {
    --scbj-ink: #f1f5f2;
    --scbj-muted: #d0dbd3;
    --scbj-paper: #111a15;
    --scbj-line: #3a4b40;
    --scbj-green: #65d6ad;
    --scbj-green-dark: #278364;
    --scbj-gold-dark: #f1cc7d;
    color: #f1f5f2 !important;
    color-scheme: dark;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-shell {
    background: #111a15 !important;
    border-color: #3a4b40 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-brand-copy strong,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-eyebrow,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-intro-title,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-mode-title,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-leaderboard-title {
    color: #f8faf9 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-intro-subtitle.scbj-game-chips-line {
    color: #65e0b3 !important;
    font-size: 15px;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-brand-copy span,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-intro-subtitle,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-field > span,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-mode-copy,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-pool-note,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-resume-card > span,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-footnote,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-leaderboard-heading > span,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-empty-leaderboard,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-rank,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-room-code-block span,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-room-footer {
    color: #d0dbd3 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-mode-card,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-resume-card,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-leaderboard,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-room-share {
    background: #1b2921 !important;
    border-color: #3a4b40 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-mode-card-highlight {
    background: #20382b !important;
    border-color: #47735a !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-brand-mark,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-icon-multi {
    background: #233b30 !important;
    color: #65c7a4 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-rank {
    background: #2a3a30 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-input {
    background: #101813 !important;
    border-color: #53665a !important;
    color: #f1f5f2 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-input::placeholder {
    color: #aebbb2 !important;
    opacity: 1;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-message.is-error {
    background: #3b211e !important;
    border-color: #75443c !important;
    color: #ffc0b3 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-message.is-success {
    background: #1b382b !important;
    border-color: #315c45 !important;
    color: #a5e2bd !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-message.is-info {
    background: #202f2a !important;
    border-color: #3a5147 !important;
    color: #bdd8c8 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-join-copy,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-leader-name,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-room-code-block strong,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-room-footer .scbj-link-button {
    color: #f1f5f2 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-leader-score {
    color: #65e0b3 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-leaderboard-link {
    color: #f8faf9 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-leaderboard-cta {
    color: #65e0b3 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-link-button,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-button-outline {
    color: #e4eee7 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-button-outline {
    background: #26372d !important;
    border-color: #52665a !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-leaderboard-row,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-join-form,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-footnote {
    border-color: #3a4b40 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-table-details,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-hand-title,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-players-title,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-players-heading span,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-seat-heading strong,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-seat-status,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-seat-total,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-seat-outcome,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-seat-waiting,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-turn-banner,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-result,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-payout-detail,
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-broke-note {
    color: #f0f5f1 !important;
}

/* Keep face values dark on their intentionally light cards in either theme. */
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-card:not(.scbj-card-back),
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-card:not(.scbj-card-back) * {
    color: #17231c !important;
    opacity: 1 !important;
}

:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-card.is-red:not(.scbj-card-back),
:is(html[data-color-scheme="dark"], body[data-color-scheme="dark"], body.dark-mode, body.night-mode, body.sheer-dark-mode, body.sheer-dark, [data-theme="dark"], [data-theme="night"]) .scbj-card.is-red:not(.scbj-card-back) * {
    color: #a8172b !important;
}