/* One font for the whole site: each device's own clean system font
   (San Francisco on iPhone/Mac, Segoe UI on Windows, Roboto on Android),
   falling back to Helvetica/Arial. Buttons, boxes and dropdowns don't
   inherit the page font on their own, so they're told to as well. */
:root {
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* The site's colours, defined once and used by name everywhere */
    --c-primary: #0064dc;       /* main buttons, Win, selected items */
    --c-primary-dark: #0050b4;  /* borders/hover of the above */
    --c-ok: #0050b4;            /* CORRECT and other right-answer text */
    --c-lose: #c80000;          /* Lose, INCORRECT, wrong-answer text */
    --c-lose-dark: #a00000;
    --c-push: #e6c800;          /* Push */
    --c-foul: #e67e00;          /* Foul */
    --c-text: #111;
    --c-muted: #555;            /* secondary text, labels */
    --c-border: #999;
    --c-line: #ddd;             /* light dividers, card outlines */
    --c-felt: #0b6b3a;          /* table felt behind the cards */
    --c-info-bg: #dde8f8;       /* light blue panels and tags */
    --c-info-line: #9bb8e0;
    --c-gold-bg: #fff4d6;       /* Challenge Mode, Reveal */
    --c-gold-line: #e0c060;
}

/* Stops phones zooming the page when something is tapped twice quickly
   (e.g. cycling a wager Win > Lose fast). Pinch-to-zoom still works.
   text-size-adjust: stops iPhone Safari enlarging text on its own when
   the phone is held sideways (it did so unevenly, e.g. one pay table
   bigger than the one beside it). */
html {
    touch-action: manipulation;
    font-family: var(--font-ui);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

/* Numbers that change in place (scores, typed amounts, top-5 tables)
   use same-width digits so they don't jiggle as they change */
.po-display,
.keypad-score,
.ch-status,
.rl-status,
.ch-top-table,
.rl-breakdown {
    font-variant-numeric: tabular-nums;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--c-primary);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Persistent sidebar layout -- game list and About stay visible on
   every page, rather than needing a "back to menu" button repeated
   on each individual game's start screen. */
.page-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background-color: #f4f4f4;
    border-right: 1px solid #ddd;
    padding: 1rem;
    box-sizing: border-box;
}

.sidebar h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.sidebar h3 {
    font-size: 0.95rem;
    text-transform: uppercase;
    color: #444;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    margin-bottom: 0.4rem;
}

.sidebar li.coming-soon {
    color: #aaa;
    font-style: italic;
    padding: 0.5rem 0.75rem;
}

/* Sidebar links styled as real buttons -- a modern app-shell look
   rather than plain text links, with a clear highlighted state for
   whichever page is currently open. NavLink applies the "active"
   class automatically based on the current URL, so no manual
   highlighting logic is needed here. */
.sidebar a {
    display: block;
    text-decoration: none;
    color: #111;
    font-size: 1.15rem;
    font-weight: 600;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Hover effects are limited to devices with a real mouse pointer.
   On phones, a tap triggers :hover and it then "sticks" until the
   user taps somewhere else -- which would leave a wager shape or menu
   link looking highlighted after it was tapped. */
@media (hover: hover) {
    .sidebar a:hover {
        background: #eef3fa;
        border-color: #b8d0ec;
    }
}

.sidebar a.active {
    background: var(--c-primary);
    color: white;
    border-color: var(--c-primary);
}

.content {
    flex-grow: 1;
    padding: 1.5rem 2rem;
    box-sizing: border-box;
}

/* Three Card Prime wager shapes -- rebuilt for the web version,
   replacing the desktop's custom-drawn WinForms Panel control. Same
   visual language: white shape, wager name always visible, a colored
   pill badge showing the current selection sits on the bottom edge.

   Circles use a plain CSS border-radius, which properly draws a
   rounded border stroke. Diamonds use an actual SVG polygon instead
   of CSS clip-path -- clip-path only clips the already-rendered box
   (background + border) to a shape; it doesn't know how to redraw a
   border ALONG a diagonal edge, since a CSS border is fundamentally a
   straight-edged rectangle. The result was a diamond with its border
   clipped away almost entirely, invisible against the white page.
   SVG's stroke/fill properly outline any shape, diagonal or not. */
.wager-shape {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.8rem;
    cursor: pointer;
    position: relative;
    user-select: none;
    box-sizing: border-box;
    transition: background-color 0.1s ease;
}

/* Signals every wager shape is clickable before the user has ever
   tapped one. Circles: plain background-color. Diamonds: the SVG
   polygon's fill is set via an inline attribute, which CSS still
   overrides correctly since SVG presentation attributes sit lower
   than stylesheet rules in the cascade -- targeted via a descendant
   selector from the hovered ancestor. Applies everywhere at once:
   both the shared WagerShape component (Side Wagers) and Three Card
   Prime's own local copy of this same markup use this identical base
   class. */
@media (hover: hover) {
    .wager-circle:hover {
        background-color: #d0e0f8;
    }

    .wager-shape:hover .wager-diamond-svg polygon {
        fill: #d0e0f8;
    }

    .wager-shape:hover .wager-triangle-svg polygon {
        fill: #f8c888;
    }

    .pai-gow-card:hover {
        outline: 3px solid #333;
    }
}

.wager-diamond-svg polygon {
    transition: fill 0.1s ease;
}

.wager-circle {
    width: 80px;
    height: 80px;
    background: white;
    border: 1px solid #999;
    border-radius: 50%;
}

.wager-circle.wager-wrong {
    border: 3px solid black;
}

/* Opt-in fill shading (via ShowWrongShading) -- deliberately much
   lighter than the pill's own red (var(--c-lose)) so the pill still reads
   clearly against the shape behind it. Used by Side Wagers, Three
   Card Prime, and Pai Gow - Settling Bets. */
.wager-circle.wager-shaded-wrong {
    background-color: #f8d0d0;
}

/* Pai Gow - Settling Bets: the Foul triangle's fill/stroke are set
   directly on the SVG polygon (conditional on flagged/wrong state),
   matching how the diamond shapes already handle their own wrong-
   state -- an SVG-based shape doesn't have a meaningful CSS
   background/border of its own the way a plain circle div does. */
.wager-triangle-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
}

.wager-triangle-svg polygon {
    transition: fill 0.1s ease;
}

.wager-diamond-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
}

.wager-label {
    position: relative;
    z-index: 1;
    padding: 0 8px;
}

.wager-pill {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    border: 1px solid black;
    border-radius: 8px;
    padding: 1px 8px;
    font-size: 0.65rem;
    font-weight: bold;
    white-space: nowrap;
    z-index: 2;
}

/* Pai Gow - Hand Setting: dark border on hover for the clickable
   cards (both the 7-card hand row and the Low slots), signaling
   they're interactive before the user has ever clicked one. Outline
   rather than border/border-width, since outline never consumes
   layout space -- a hover-only border would otherwise shift the
   card's position by its own width the instant the mouse arrives. */
/* (hover rule lives in the @media (hover: hover) block above) */

/* Shared across all six games -- was previously duplicated as inline
   styles on each page individually. */
.session-summary {
    border: 1px solid #ccc;
    background-color: #eef2f6;
    padding: 1rem;
    margin-top: 1rem;
    max-width: 320px;
    border-radius: 6px;
}

/* Reserves consistent vertical space for feedback text so the
   Submit/Deal/End Session button row doesn't shift up and down
   depending on whether there's a short result or a longer message. */
.feedback-area {
    min-height: 3.5rem;
}

/* Reusable on-screen numeric keypad -- shared by Flash Card Trainer
   and Payout Trainer. */
.numeric-keypad {
    display: inline-block;
    margin-top: 0.5rem;
}

.numeric-keypad-row {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.numeric-keypad-row button,
.numeric-keypad-row span {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
}

/* Flash Cards: cards fanned, each overlapping the previous by 30% so
   every rank/suit corner stays visible. Desktop: 100px cards. */
.card-row.fc-fan {
    --fc-w: 100px;
    gap: 0;
    flex-wrap: nowrap;
}

.fc-card {
    position: relative;
    width: var(--fc-w);
    height: auto;
    aspect-ratio: 90 / 126;
    border-radius: 4px;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.18);
}

.fc-card + .fc-card {
    margin-left: calc(var(--fc-w) * -0.3);
}

/* Payouts: blackjack shown as two cards side by side */
.po-card {
    width: 75px;
    height: 105px;
}

/* Flash Cards: one line shared by the Ace reminder and the feedback,
   always the same height so nothing below it moves */
.fc-msg {
    min-height: 2.6em;
    margin: 0.4rem 0;
}

/* Hand over: total box and BUST hidden. Desktop: they keep their space
   (the row still holds the Next button). Phones / touch screens: the
   whole row is removed (below), so the keypad and everything under it
   move up instead of being pushed down by the longer end-of-hand text. */
.fc-answer-done input,
.fc-answer-done .reveal-button,
.fc-answer-done .bust-button {
    visibility: hidden;
}

/* Phones / touch screens only (desktop keeps the row: it holds Next) */
@media (max-width: 768px), (pointer: coarse) {
    .keypad-screen > .keypad-answer.fc-answer-done {
        display: none;
    }
}

/* Payouts: the wager amount, large enough to read at a glance, in a
   light blue tag so it stands out */
.po-wager {
    font-size: 2rem;
    margin: 0.5rem 0;
    white-space: nowrap;
}

.po-wager strong {
    display: inline-block;
    background-color: #d0e0f8;
    border: 1px solid var(--c-info-line);
    border-radius: 8px;
    padding: 0.1rem 0.8rem;
}

/* Narrow phones: a little smaller, so "Wager: $1,250.00" stays on one line */
@media (max-width: 360px) {
    .po-wager {
        font-size: 1.75rem;
    }
}

/* Payouts on phones: display box in place of the text box (amount being
   keyed in, then the result) -- hidden on desktop */
.po-display {
    display: none;
}

/* Side Wagers: the two wagers under each hand (Previous / Next beside
   them on phones) */
.sw-hand-controls {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Keypad Enter key (Flash Cards / Payouts) */
.numeric-keypad-enter {
    font-size: 0.8rem;
    font-weight: bold;
}

.numeric-keypad-row .numeric-keypad-wide {
    width: 140px;
}

/* Answer keypad wrapper: on desktop shown only after pressing 123 */
.keypad-wrap {
    display: none;
}

.keypad-wrap.keypad-open {
    display: block;
}

/* Phones and touch screens: keypad always shown, 123 button hidden,
   since tapping the answer box no longer opens the phone's keyboard */
/* Phones / touch screens only: desktop keeps typing + Submit / Next, and
   the keypad only after pressing 123 */
@media (max-width: 768px), (pointer: coarse) {
    .keypad-wrap {
        display: block;
    }

    .keypad-toggle {
        display: none;
    }

    /* Submit / Next button beside the answer box: the keypad's Enter /
       Next key does the same job on phones and touch screens */
    .answer-primary {
        display: none;
    }
}

.pill-win {
    background-color: var(--c-primary);
}

.pill-lose {
    background-color: var(--c-lose);
}

.pill-push {
    background-color: var(--c-push);
    color: black;
}

/* Blazor's built-in FocusOnNavigate feature deliberately sends
   keyboard focus to the page's <h1> after each navigation, so screen
   readers announce "you're on a new page" -- genuinely helpful for
   accessibility, so it should stay. But it also shows a visible focus
   outline around a plain heading, which reads as if the title got
   accidentally "selected." Suppressed unconditionally here (not via
   :focus-visible, whose heuristics for programmatic focus turned out
   to be inconsistent and still showed the outline in practice) --
   safe to do since an <h1> has no default tabindex and is never
   reachable by genuine keyboard Tab navigation anyway; the only way
   it receives focus at all is this specific programmatic call. */
h1:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

/* Combined start screens (Blackjack, Pai Gow, Heads-Up Hold'em) --
   each mode's radio label gets a larger, bold title, and each mode's
   whole block (radio + description + options) sits in its own
   bordered card so multiple modes on one start screen read as
   clearly separate choices rather than blurring together. */
.mode-title {
    font-size: 1.15rem;
    font-weight: bold;
}

.mode-card {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Start screens: each game mode is a collapsible card (Shared/ModeCard).
   The title bar is the tap target; the open card's bar turns light blue
   and shows the description, settings and that mode's Start button.
   Scoped to .mode-list so the plain .mode-card boxes on the About and
   Add to Home Screen pages are unchanged. */
.mode-list {
    margin-top: 1rem;
    max-width: 600px;
}

.mode-list .mode-card {
    padding: 0;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.content .mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    margin: 0;
    border: none;
    border-radius: 0;
    background-color: #f3f3f3;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.content .mode-card-open .mode-header {
    background-color: #d0e0f8;
    border-bottom: 1px solid var(--c-info-line);
}

.content .mode-card-static .mode-header {
    cursor: default;
}

@media (hover: hover) {
    .content button.mode-header:hover {
        background-color: #e4e4e4;
    }

    .content .mode-card-open button.mode-header:hover {
        background-color: #c2d6f4;
    }
}

/* Down-pointing chevron; flips to point up when the card is open */
.mode-chevron {
    flex-shrink: 0;
    width: 0.6rem;
    height: 0.6rem;
    margin: 0 0.25rem 0.25rem 1rem;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: rotate(45deg);
    transition: transform 0.15s;
}

.mode-card-open .mode-chevron {
    margin-bottom: -0.25rem;
    transform: rotate(-135deg);
}

.mode-body {
    padding: 0.75rem 1rem 1rem 1rem;
}

.mode-desc {
    margin: 0 0 0.75rem 0;
    font-style: italic;
    color: dimgray;
}

/* Settings groups (e.g. Payout + Difficulty) side by side, wrapping
   onto a new line when the screen is too narrow */
.mode-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 3rem;
}

.mode-option-label {
    margin: 0 0 0.25rem 0;
    font-weight: bold;
}

.mode-choice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
}

/* The mode's Start button: blue, so a first-time user can't miss it */
.content .mode-start {
    display: block;
    min-width: 9rem;
    min-height: 44px;
    margin-top: 1rem;
    padding: 0.4rem 1.5rem;
    border: 1px solid var(--c-primary-dark);
    border-radius: 6px;
    background-color: var(--c-primary);
    color: white;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
}

@media (hover: hover) {
    .content .mode-start:hover {
        background-color: var(--c-primary-dark);
    }
}

/* Number of Hands picker (Shared/CountStepper): down arrow, the number
   on a light-blue tag, up arrow */
.count-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 320px;
}

.count-label {
    font-weight: bold;
}

.count-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content .count-btn {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--c-info-line);
    border-radius: 6px;
    background-color: white;
    color: var(--c-primary-dark);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.content .count-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.count-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    height: 44px;
    box-sizing: border-box;
    border: 1px solid var(--c-info-line);
    border-radius: 6px;
    background-color: #d0e0f8;
    font-size: 1.3rem;
    font-weight: bold;
}

/* Phones: Start fills the card width, like the in-game action rows */
/* (Applies on phones and desktop alike -- desktop uses the phone layout) */
.content .mode-start {
    width: 100%;
}

.count-stepper {
    max-width: none;
}
/* ------------------------------------------------------------------
   Shared layout helpers (used by Home and Three Card Prime so far).
   These reproduce the exact desktop look the old inline styles had;
   the difference is that classes can be adjusted by the mobile media
   query below, while inline styles can't.
   ------------------------------------------------------------------ */
.card-row {
    display: flex;
    gap: 8px;
}

.home-cards {
    margin-top: 1.5rem;
}

.home-card {
    width: 100px;
    height: 140px;
}

.game-card {
    width: 90px;
    height: 126px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Three Card Prime table: hands on the left, wager column on the right */
.tcp-table {
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
    align-items: flex-start;
}

.tcp-wagers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Wager buttons with a pop-up of choices (Shared/WagerPick), used by
   Side Wagers and Pai Gow Settling Bets on phone and desktop. The
   button shows the wager name and its pick, filled with the pick's
   color; the pop-up sits just below it on a light-blue tint with a
   dark shadow. dstClampPopup (index.html) keeps it on screen. */
/* Buttons in the same row stretch to the same height */
.wp {
    position: relative;
    display: inline-flex;
    flex-direction: column;
}

.content .wp > .wp-btn {
    flex: 1 1 auto;
}

.wp.wp-open {
    z-index: 1001;
}

.content .wp-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 84px;
    min-height: 44px;
    padding: 0.2rem 0.5rem;
    border: 1px solid #c9c9c9;
    border-radius: 8px;
    background-color: white;
    color: #222;
    font-size: 0.82rem;
    font-weight: bold;
    line-height: 1.1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.wp-btn small {
    min-height: 0.75rem;
    font-size: 0.62rem;
    font-weight: 600;
}

.content .wp-btn.wp-win,
.content .wp-choice.wp-win {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: white;
}

.content .wp-btn.wp-lose,
.content .wp-choice.wp-lose {
    background-color: var(--c-lose);
    border-color: var(--c-lose);
    color: white;
}

.content .wp-btn.wp-push,
.content .wp-choice.wp-push {
    background-color: var(--c-push);
    border-color: var(--c-push);
    color: black;
}

.content .wp-btn.wp-foul,
.content .wp-choice.wp-foul {
    background-color: var(--c-foul);
    border-color: var(--c-foul);
    color: white;
}

.content .wp-btn.wp-wrong {
    box-shadow: 0 0 0 3px #222;
}

.wp-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
    display: flex;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--c-info-line);
    border-radius: 12px;
    background-color: var(--c-info-bg);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
}

.wp-pop.wp-pop-up {
    top: auto;
    bottom: calc(100% + 6px);
}

.content .wp-choice {
    min-width: 64px;
    min-height: 44px;
    padding: 0 0.6rem;
    border: 1px solid #999;
    border-radius: 8px;
    background-color: white;
    color: black;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
}

/* Invisible layer behind an open pop-up: tapping it closes the pop-up */
.wp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

/* Side Wagers: the two wager buttons side by side */
.sw-wager-picks {
    display: flex;
    align-items: stretch;
    gap: 8px;
    justify-content: center;
}

.sw-wager-picks .wp {
    flex: 1 1 0;
    max-width: 120px;
}

/* Three Card Prime wager buttons + slide-out choices: phones only
   (shown in the phone section at the end of this file) */
.tcp-rail,
.tcp-fly-backdrop {
    display: none;
}

.tcp-wager-pair {
    display: flex;
    gap: 1.5rem;
}

/* Blackjack page: answer input row, Side Wagers hands and footer.
   Desktop values match the old inline styles exactly. */
.answer-row {
    align-items: center;
}

.sw-hands {
    display: flex;
    gap: 1.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.sw-hand {
    text-align: center;
}

.sw-dealer-card {
    width: 100px;
    height: 140px;
}


.sw-footer {
    width: 900px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1.5rem;
}

.sw-footer-buttons {
    justify-self: end;
}


.content .sw-footer-feedback {
    min-height: 0;
    justify-self: start;
}

/* Heads-Up Hold'em play table. Desktop values match the old inline
   styles exactly: fixed 900px table, community cards centered, and
   the feedback block absolutely positioned at the next empty hand
   slot (its left offset is passed in from the page as
   --hd-feedback-left). */
.hd-table {
    width: 900px;
    position: relative;
}

.hd-hands {
    display: flex;
    gap: 1.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.hd-hand {
    text-align: center;
}

.hd-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hd-buttons {
    margin-bottom: 0.5rem;
}

.hd-community-title {
    margin: 0;
}

.hd-community {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin: 1rem 0;
}

/* Answer control under each player hand (rank dropdown or vs Dealer
   wager). On phones the Previous / Next buttons sit either side of it. */
.hd-hand-controls {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Settle the Bets: Win / Lose / Push buttons for each player hand. The
   picked one fills with the same colors as the Win / Lose / Push pills. */
.hd-outcomes {
    display: flex;
    gap: 4px;
    width: 100%;
}

.content .hd-outcome {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 0.25rem 0;
    border: 1px solid #999;
    border-radius: 6px;
    background-color: white;
    color: black;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.content .hd-outcome:disabled {
    cursor: default;
    opacity: 1;
}

.content .hd-outcome-win.hd-outcome-picked {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: white;
}

.content .hd-outcome-lose.hd-outcome-picked {
    background-color: var(--c-lose);
    border-color: var(--c-lose);
    color: white;
}

.content .hd-outcome-push.hd-outcome-picked {
    background-color: var(--c-push);
    border-color: var(--c-push);
    color: black;
}

/* After Submit: wrong pick and the right answer */
.content .hd-outcome.hd-outcome-wrong {
    box-shadow: 0 0 0 3px var(--c-lose);
    text-decoration: line-through;
}

.content .hd-outcome.hd-outcome-answer {
    box-shadow: 0 0 0 3px #222;
}

.hd-inline-pager {
    display: none;
}

/* Wider spacing leaves room for a card rotated to mark it unused */
.hd-community.hd-community-settle {
    gap: 3rem;
}

.hd-community-slot {
    text-align: center;
}

.hd-card {
    width: 100px;
    height: 140px;
}

.hd-dealer-title {
    margin: 1rem 0 0 0;
}

.hd-dealer {
    display: flex;
    gap: 3rem;
    margin: 1rem 0;
}

/* Phone-only player pager -- hidden on desktop. hd-pager is
   Hold'em's; hand-pager / paged-hand are the shared versions for the
   other games (Blackjack Side Wagers so far). */
.hd-pager,
.hand-pager,
.hd-result-banner,
.hd-hand-result {
    display: none;
}

.content .hd-feedback {
    position: absolute;
    left: var(--hd-feedback-left, 0px);
    top: 36px;
    max-width: 320px;
    font-size: 0.85rem;
}

/* Identify the Hands: "Dealer's hand: [rank]" picker under the dealer
   cards */
.hd-rank-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0 0 0;
    font-weight: bold;
}

/* Identify the Hands: shown in place of the rank picker until the right
   2 cards are marked; red when 2 are marked but they're the wrong pair */
.hd-set-caption {
    max-width: 564px;
    margin: 1rem 0 0 0;
    text-align: center;
    font-style: italic;
    color: dimgray;
}

.hd-set-caption.hd-set-caption-wrong {
    font-style: normal;
    font-weight: bold;
    color: var(--c-lose);
}

/* With no player hands showing (Identify the Hands) the feedback sits
   centered below the rank picker */
.content .hd-feedback.hd-feedback-inline {
    position: static;
    max-width: 564px;
    margin: 0.75rem auto 0 auto;
    text-align: center;
}

/* Pai Gow - Hand Setting. Desktop values match the old inline styles. */
.hs-top {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.hs-low-slot {
    width: 100px;
    height: 140px;
    border: 1px solid #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content .hs-feedback {
    margin-left: 320px;
    max-width: 550px;
    margin-top: 1rem;
    font-size: 0.75rem;
}

.hs-cards {
    display: flex;
    gap: 8px;
    margin-bottom: 1rem;
}

.hs-card {
    width: 100px;
    height: 140px;
}

.hs-buttons {
    margin-top: 1rem;
}

/* Pai Gow - Settling Bets. Desktop values match the old inline styles;
   .sb-player / .sb-dealer / .sb-wagers are plain wrappers on desktop
   (sb-wagers uses display: contents so the wager row lays out exactly
   as before). */
.sb-screen > .button-row {
    gap: 0.5rem;
    align-items: center;
}

.sb-hand-row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.sb-card {
    width: 90px;
    height: 126px;
}

.content .sb-hand-labels {
    margin-top: 1.25rem;
}

.sb-wager-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.sb-wagers {
    display: contents;
}

.sb-actions {
    margin-left: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.content .sb-wins {
    margin-left: 1.5rem;
    min-height: 0;
}

.sb-push-note {
    font-weight: bold;
    font-size: 1.5rem;
}

/* Add to Home Screen page: intro, iPhone / Android tabs, then one card
   per step -- a simple phone drawing (blue ring on what to tap) beside
   the step number and instruction */
.ah-intro {
    margin: 0 0 0.75rem 0;
}

.ah-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    margin-bottom: 0.8rem;
    border-radius: 10px;
    background-color: #e9eef5;
}

.ah-tab {
    flex: 1;
    padding: 0.5rem 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #445;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.ah-tab.on {
    background-color: #fff;
    color: #0064dc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.ah-step {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.6rem;
    border: 1px solid #d7dde6;
    border-radius: 12px;
    background-color: #fff;
}

.ah-pic {
    flex: 0 0 112px;
    width: 112px;
    height: 150px;
}

.ah-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 0.3rem;
    border-radius: 50%;
    background-color: #0064dc;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
}

.ah-txt {
    font-size: 0.98rem;
    line-height: 1.35;
    color: #222;
}

.ah-txt small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: #666;
}

.ah-done {
    margin: 0.4rem 0 1rem 0;
    text-align: center;
    font-weight: 700;
    color: #0a7d32;
}

/* "Already using the app version" note -- only shown when the site is
   running from its home-screen icon, where the steps (and the menu link
   to them) are hidden instead */
.install-already {
    display: none;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    .install-already {
        display: block;
    }

    .install-steps,
    .install-link {
        display: none;
    }
}

/* Reference-chart toggle row (Wager Rules / Hand Rankings / House Ways)
   placed at the bottom of each play screen */
.rules-row {
    margin-top: 1.25rem;
}

/* Mobile top bar and menu backdrop -- hidden on desktop */
.mobile-topbar,
.menu-backdrop {
    display: none;
}

/* Taps on buttons and wager shapes respond immediately, and rapid
   repeat taps (cycling a wager Win > Lose > Push) don't get treated
   as a double-tap zoom. No effect with a mouse. */
button,
a,
label,
.wager-shape,
.pai-gow-card {
    touch-action: manipulation;
}

.wager-shape {
    -webkit-tap-highlight-color: transparent;
}

/* Larger tap targets on touch screens (finger rather than mouse).
   44px is the commonly used minimum for comfortable tapping. */
@media (pointer: coarse) {
    .content button {
        min-height: 44px;
        padding: 0.4rem 0.9rem;
        font-size: 1rem;
    }

    /* Keypad keys are already a fixed 44px square */
    .content .numeric-keypad-row button {
        padding: 0;
    }

    .sidebar a {
        padding: 0.75rem;
    }

    /* 16px minimum stops iPhones from zooming the whole page in
       when a text box is tapped */
    .content input[type=text],
    .content input[type=number],
    .content select {
        font-size: 16px;
        min-height: 44px;
        box-sizing: border-box;
        padding: 0 0.5rem;
    }

    .content input[type=checkbox],
    .content input[type=radio] {
        width: 1.25rem;
        height: 1.25rem;
        vertical-align: middle;
    }
}

/* ------------------------------------------------------------------
   Mobile layout (phones, and tablets in portrait): 768px and narrower
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .page-layout {
        display: block;
    }

    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 950;
        height: 52px;
        padding: 0 0.75rem;
        background-color: #f4f4f4;
        border-bottom: 1px solid #ddd;
        box-sizing: border-box;
    }

    .mobile-title {
        font-weight: bold;
        font-size: 1.05rem;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0 10px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 6px;
        cursor: pointer;
    }

    .menu-toggle-bar {
        display: block;
        height: 2px;
        background-color: #333;
        border-radius: 1px;
    }

    /* Sidebar becomes a slide-in drawer under the top bar */
    .sidebar {
        position: fixed;
        top: 52px;
        left: 0;
        bottom: 0;
        width: 260px;
        max-width: 85vw;
        z-index: 940;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        border-right: 1px solid #ddd;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    }

    /* Title already shows in the top bar */
    .sidebar h2 {
        display: none;
    }

    .sidebar h3:first-of-type {
        margin-top: 0.5rem;
    }

    .menu-backdrop {
        display: block;
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 930;
        background-color: rgba(0, 0, 0, 0.35);
    }

    /* Extra empty space at the bottom of every page on phones, so the
       last buttons (Start, Submit, Deal) can always be scrolled up away
       from the screen's bottom edge -- a tap right at that edge tends
       to bring up the browser's hidden toolbar instead of pressing the
       button. env(safe-area-inset-bottom) adds the extra margin phones
       with a home-indicator bar need (0 elsewhere). */
    .content {
        padding: 1rem 1rem calc(6rem + env(safe-area-inset-bottom, 0px)) 1rem;
    }

    .content h1 {
        font-size: 1.6rem;
    }

}

/* ------------------------------------------------------------------
   Game layouts: written for phones, and used on desktop too (inside a
   centered column -- see "Desktop column" below), so every game
   works the same way on both.
   ------------------------------------------------------------------ */
/* No Back buttons on phones: the menu does the same job (tapping the
   game you're in returns to its start screen), and the game content
   sits higher on screen. A row left holding only Back collapses. */
.back-button {
    display: none;
}

.button-row:not(:has(> :not(.back-button))) {
    display: none;
}

/* Card rows shrink to fit instead of running off the screen.
   aspect-ratio keeps the same proportions the desktop size uses. */
.card-row {
    flex-wrap: wrap;
}

.home-card {
    width: calc((100% - 32px) / 5);
    max-width: 100px;
    height: auto;
    aspect-ratio: 100 / 140;
}

.game-card {
    width: clamp(64px, 26vw, 90px);
    height: auto;
    aspect-ratio: 90 / 126;
}

/* Three Card Prime: wagers stack below the hands */
.tcp-table {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.tcp-hands {
    text-align: center;
}

.tcp-hands .card-row {
    justify-content: center;
}

/* Room for the Ante Bonus checkbox, which sits to the right of
   the centered Ante diamond */
.tcp-wagers {
    padding-bottom: 0.5rem;
}

/* Flash Cards / Payouts phone layout (big keypad, display box, feedback
   above the answer) -- phones / touch screens only; desktop keeps the
   keyboard-friendly layout: type, Enter / Submit, keypad on 123 */
@media (max-width: 768px), (pointer: coarse) {
    /* Bigger keypad keys on phones -- three equal columns spanning the
       same width as the answer box + BUST / display row above */
    .numeric-keypad {
        display: block;
        width: 100%;
    }

    .numeric-keypad-row button,
    .numeric-keypad-row span,
    .numeric-keypad-row .numeric-keypad-wide {
        flex: 1 1 0;
        width: auto;
        height: 52px;
        font-size: 1.25rem;
    }

    .numeric-keypad-enter {
        font-size: 1.1rem;
    }

    /* Flash Cards / Payouts: feedback moves above the answer box, so
       "Incorrect - try again" and the result aren't hidden below the
       keypad. Order: cards and prompt, feedback, answer box, keypad,
       score, New Round / End Session. */
    .keypad-screen {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* In a flex column, paragraph margins no longer overlap each other,
       so they're tightened here to keep the keypad on screen */
    .keypad-screen > p {
        margin: 0.4rem 0;
    }

    .keypad-screen > .card-row {
        margin: 0.5rem 0 0.25rem 0 !important;
    }

    /* Flash Cards: card width chosen so the whole fanned hand (--n cards,
       each after the first adding 70% of a card) fits across the screen;
       never larger than the 100px desktop size */
    .card-row.fc-fan {
        --fc-w: min(100px, calc((var(--col-w) - 2rem) / (1 + 0.7 * (var(--n, 2) - 1))));
    }

    /* 44px keys (still a full-size tap target) so the whole keypad
       fits above the pinned bottom bar */
    .keypad-screen .numeric-keypad-row button,
    .keypad-screen .numeric-keypad-row span {
        height: 44px;
    }

    .keypad-screen > .feedback-area {
        order: 1;
        min-height: 1.5rem;
    }

    .keypad-screen > .feedback-area p {
        margin: 0.25rem 0;
    }

    /* Payouts: display box replaces the text box and the separate
       feedback lines */
    .po-display {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
        min-height: 3.6rem;
        padding: 0.3rem 0.75rem;
        border: 1px solid #999;
        border-radius: 6px;
        box-sizing: border-box;
        font-size: 1.15rem;
    }

    .po-display-result {
        font-weight: bold;
    }

    .po-display-detail {
        font-size: 1rem;
    }

    .po-display-amount {
        font-size: 1.4rem;
        font-weight: bold;
    }

    .po-display-placeholder {
        color: #888;
    }

    .keypad-answer:has(.po-display) input {
        display: none;
    }

    .keypad-screen:has(.po-display) > .feedback-area {
        display: none;
    }

    .content .bust-button {
        font-weight: bold;
        min-width: 5.5rem;
    }

    .keypad-screen > .keypad-answer { order: 2; margin: 0.4rem 0 0.5rem 0 !important; align-self: stretch; }
    .keypad-screen > .keypad-wrap { order: 3; align-self: stretch; }
    .keypad-screen > .keypad-score { order: 4; }
    .keypad-screen > .keypad-actions { order: 5; }

    /* Answer box shares its row with Submit and 123 instead of
       pushing them onto a second line */
    .answer-row {
        flex-wrap: nowrap;
    }

    .answer-row input {
        flex: 1 1 auto;
        min-width: 0;
        width: 8rem;
    }
}

/* Blackjack - Side Wagers: player hand on top, then the dealer card,
   Submit/Deal, and the result -- stacked instead of a fixed 900px row */

.sw-hands {
    justify-content: center;
    column-gap: 1rem;
    row-gap: 1.25rem;
}

.sw-footer {
    width: auto;
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
}

.sw-footer-dealer {
    order: -1;
    text-align: center;
    justify-self: center;
}

/* Shared phone player pager: "Player X of N" banner above the hand */
.hand-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0 0;
}

.hand-pager-label {
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

.paged-hand {
    display: none;
}

.paged-hand.paged-hand-current {
    display: block;
}

.paged-hand-number {
    display: none;
}

/* Submit / Deal right under the hand, then the result */
.sw-footer-feedback {
    margin-top: 0.25rem;
}

.sw-footer-buttons {
    justify-self: center;
}

/* Side Wagers: one column -- player pager, the hand, dealer card,
   result and score, then Submit / Deal / End Session pinned to the
   bottom of the screen (always visible). sw-footer is display:
   contents so its pieces join this column and the pinned bar can
   stick for the whole page. */
.sw-screen {
    display: flex;
    flex-direction: column;
}

.sw-screen > .hand-pager { order: 1; }
.sw-screen > .sw-hands { order: 2; }
.sw-screen .sw-footer { display: contents; }
.sw-screen .sw-footer-dealer { order: 3; margin-top: 0.75rem; }
.sw-screen .sw-footer-feedback { order: 4; text-align: center; }
.sw-screen .sw-footer-buttons {
    order: 5;
    position: sticky;
    bottom: 0;
    z-index: 20;
    width: auto;
    align-self: stretch;
    margin: 0.5rem 0 0 0;
    padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px)) 0.5rem;
    background-color: white;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}
.sw-screen > .rules-row { order: 6; }
.sw-screen > .rules-image,
.sw-screen > div:last-child:not(.rules-row) { order: 7; }

/* Heads-Up Hold'em: one column -- community cards, dealer cards,
   player pager, the current hand, action buttons, then feedback.
   display: contents lets the community/dealer/button pieces be
   reordered individually alongside the hands and feedback. */
.hd-table {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hd-center {
    display: contents;
}

.hd-community-title {
    order: 1;
    margin-top: 1rem;
}

/* Identify the Hands: half the old spacing, so the five community
   cards come out a little larger */
.hd-community {
    order: 2;
    width: 100%;
    max-width: 564px;
    justify-content: center;
    gap: 4px;
}

.hd-community-slot {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100px;
}

.hd-community .hd-card {
    width: 100%;
    height: auto;
    aspect-ratio: 100 / 140;
}

.hd-dealer-title {
    order: 3;
    margin-top: 0.5rem;
}

/* Same 6px spacing as the player's two cards */
.hd-dealer {
    order: 4;
    gap: 6px;
}

/* Dealer cards: the same size as the community cards */
.hd-dealer .hd-card {
    width: min(100px, calc((var(--col-w) - 2rem) / 4));
    height: auto;
    aspect-ratio: 100 / 140;
}

/* Both modes: larger community cards, each overlapping the one
   before it by 25% (corner indexes stay visible). Five cards at 75%
   spacing span 4 card widths, so each card is a quarter of the
   screen width, up to the desktop size of 100px. (.hd-table in the
   selector outranks the desktop Settle the Bets 3rem gap.) */
.hd-table .hd-community {
    --hc-w: min(100px, calc((var(--col-w) - 2rem) / 4));
    gap: 0;
    max-width: none;
}

.hd-community-slot {
    flex: 0 0 var(--hc-w);
    max-width: none;
    position: relative;
}

.hd-community-slot + .hd-community-slot {
    margin-left: calc(var(--hc-w) * -0.25);
}

/* Settle the Bets: a card marked unused (community or dealer) drops
   down a quarter of its height and darkens (opaque, so the card
   behind doesn't show through, and suit colors stay true), instead of the desktop's
   45-degree turn -- a turned card would cover its neighbors in the
   overlapped row. Room is left below the community row for the drop. */
.hd-community.hd-community-settle {
    padding-bottom: calc(var(--hc-w) * 0.35);
}

.hd-settle .hd-card.hd-card-unused {
    transform: translateY(25%) !important;
    filter: brightness(0.7);
}

.hd-dealer {
    padding-bottom: calc(min(100px, calc((var(--col-w) - 2rem) / 4)) * 0.35);
}

/* Both modes: the player's two cards side by side instead of
   stacked diagonally (overrides the inline desktop positioning) */
.hd-table .hd-hand-cards {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: auto !important;
    height: auto !important;
}

/* Player cards the same size as the community and dealer cards */
.hd-table .hd-hand-cards img {
    position: static !important;
    width: min(100px, calc((var(--col-w) - 2rem) / 4)) !important;
    height: auto !important;
    aspect-ratio: 100 / 140;
}

/* One player hand at a time: "Player X of N" banner above it, with
   Previous / Next beside its answer control */
.hd-pager {
    order: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.5rem;
}

.hd-hand-cards {
    margin: 0 auto;
}

.hd-hand-controls {
    margin-top: 0.75rem;
    gap: 6px;
}

.hd-inline-pager {
    display: inline-block;
}



/* With Previous / Next present: a fixed-width row -- Previous and
   Next the same width at either end, the rank dropdown (or the
   wagers) centered between them. Submit / Deal / End Session below
   use the same overall width. Shared by Hold'em and Side Wagers. */
.hd-hand-controls:has(.hd-inline-pager),
.sw-hand-controls:has(.hd-inline-pager) {
    display: grid;
    grid-template-columns: 4.25rem 1fr 4.25rem;
    justify-items: center;
    gap: 6px;
    width: min(100%, 360px);
    margin-left: auto;
    margin-right: auto;
}

.hd-hand-controls .hd-inline-pager,
.sw-hand-controls .hd-inline-pager {
    display: inline-block;
    width: 100%;
}

.content .hd-inline-pager {
    padding: 0.4rem 0.1rem;
    font-size: 0.85rem;
}

.sw-hand-cards {
    margin: 0 auto;
}

/* The current hand spans the full width, so its Previous / Next row
   (and Hold'em's rank row) lines up with the Submit / Deal / End
   Session row below */
.paged-hand.paged-hand-current,
.hd-hand.hd-hand-current {
    width: 100%;
}

/* Side Wagers: extra space between Previous / Next and the wagers so
   a tap meant for a wager doesn't land on a button */
.sw-hand-controls:has(.hd-inline-pager) {
    column-gap: 1.25rem;
}

.hd-hand-controls:has(.hd-inline-pager) select {
    width: 100%;
}

/* Win / Lose / Push: full-size tap targets; with a single hand (no
   Previous / Next) the row matches the action row's width */
.content .hd-outcome {
    min-height: 44px;
    font-size: 0.95rem;
}

/* Settle the Bets: Submit / Deal / End Session pinned to the bottom
   of the screen (always visible), with the feedback just above it */
.hd-table:not(.hd-identify) .hd-buttons {
    order: 10;
    position: sticky;
    bottom: 0;
    z-index: 20;
    width: auto;
    align-self: stretch;
    margin: 0.5rem 0 0 0;
    padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px)) 0.5rem;
    background-color: white;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

/* Settle the Bets after Submit: result strip at the top of the
   screen, and each player's own result under their buttons */
.hd-result-banner {
    display: block;
    order: 0;
    width: min(100%, 360px);
    box-sizing: border-box;
    margin: 0 auto 0.5rem auto;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    text-align: center;
    font-size: 0.95rem;
}

.hd-result-main {
    font-size: 1.15rem;
    font-weight: bold;
}

.hd-hand-result {
    display: block;
    margin: 0.4rem 0 0 0;
    text-align: center;
    font-weight: bold;
}

.hd-result-banner.hd-result-ok {
    background-color: #d0e0f8;
    color: var(--c-primary-dark);
}

.hd-result-banner.hd-result-bad {
    background-color: #f8d0d0;
    color: var(--c-lose-dark);
}

.hd-hand-result.hd-result-ok {
    color: var(--c-primary-dark);
}

.hd-hand-result.hd-result-bad {
    color: var(--c-lose);
}

/* Settle the Bets: the current player hand goes to the top, then the
   community and dealer cards */
.hd-settle .hd-pager { order: 1; margin-top: 0; }
.hd-settle .hd-hands { order: 2; }
.hd-settle .hd-community-title { order: 3; }
.hd-settle .hd-community { order: 4; }
.hd-settle .hd-dealer-title { order: 5; }
.hd-settle .hd-dealer { order: 6; }

/* Identify the Hands: rank picker under the dealer cards, then the
   Submit / Deal / End Session row, then the feedback */
.hd-rank-row {
    order: 7;
    width: min(100%, 360px);
    margin: 0.25rem auto 0 auto;
}

.hd-rank-row select {
    flex: 1 1 auto;
}

.hd-set-caption {
    order: 7;
    margin: 0.25rem 0 0 0;
}

.hd-identify .hd-buttons {
    order: 8;
}

.hd-identify .hd-feedback {
    order: 9;
}

.hd-pager-label {
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

.hd-hands {
    order: 6;
    width: 100%;
    justify-content: center;
    margin: 0.75rem 0 0.5rem 0;
}

.hd-hand {
    display: none;
}

.hd-hand.hd-hand-current {
    display: block;
}

/* The pager banner already says which player this is */
.hd-hand-number {
    display: none;
}

.content .hd-feedback {
    order: 8;
    margin-top: 0.75rem;
    position: static;
    align-self: stretch;
    max-width: none;
    font-size: 0.95rem;
    min-height: 0;
}

.hd-feedback p {
    white-space: normal !important;
}

/* Submit / Deal sit right under the hand, ahead of the feedback,
   so they're reachable without scrolling past the results */
.hd-buttons {
    order: 7;
    margin: 0.75rem 0 0 0;
}

/* Action rows (Submit / Deal / End Session) in Hold'em and Side
   Wagers: centered, a fixed overall width matching the Previous /
   rank / Next row, buttons sharing it equally */
.hd-buttons,
.sw-footer-buttons,
.sb-actions > div {
    display: flex;
    gap: 6px;
    width: min(100%, 360px);
    align-self: center;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
}

.content .hd-buttons button,
.content .sw-footer-buttons button,
.content .sb-actions > div button {
    flex: 1 1 0;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

/* Pai Gow - Hand Setting: one column -- Low hand, the 7 cards
   wrapping 4 + 3, buttons, score, then the result */
.hs-screen {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hs-top {
    display: contents;
}

.hs-low { order: 1; }
.hs-cards-title { order: 2; margin-bottom: 0.5rem; }
.hs-cards { order: 3; }
.hs-buttons { order: 4; margin-top: 0; }

/* Sort / Submit / Deal / End Session: a tidy 2 x 2 block of
   equal-size buttons */
.hs-screen > .hs-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: min(100%, 360px);
    align-self: center;
}

.content .hs-buttons button {
    width: 100%;
}
.hs-score { order: 5; }

/* House Ways / Wager Rules toggle and chart stay last on phones */
.hs-screen > .rules-row,
.sb-screen > .rules-row { order: 10; }
.hs-screen > .rules-image,
.sb-screen > .rules-image { order: 11; }

.content .hs-feedback {
    order: 6;
    margin: 0;
    max-width: none;
    font-size: 0.9rem;
}

.hs-low-slot {
    width: min(100px, calc((var(--col-w) - 2rem - 24px) / 4));
    height: auto;
    aspect-ratio: 100 / 140;
}

/* The 7 cards overlap in a single row, like a fanned hand. Each
   card is the same width as a Low slot, and the left ~55% of every
   card except the last stays visible -- the rank and suit corner,
   and a strip wide enough to tap. Later cards sit on top of earlier
   ones, so the visible strip is always the card being tapped. On
   wider screens where all 7 fit side by side, the overlap
   disappears and they space out normally (8px gap). */
.hs-cards {
    --hs-row: calc(var(--col-w) - 2rem);
    --hs-card-w: min(100px, calc(var(--hs-row) / 4.3));
    flex-wrap: nowrap;
    gap: 0;
}

/* position: relative keeps the cards stacked strictly left to
   right. Without it, a card moved to Low (made invisible with
   opacity: 0) jumps above its neighbor and blocks taps on the
   next card's visible strip. */
.hs-card {
    position: relative;
    flex: none;
    width: var(--hs-card-w);
    height: auto;
    aspect-ratio: 100 / 140;
    background-color: white;
}

.hs-card + .hs-card {
    margin-left: min(8px, calc((var(--hs-row) - var(--hs-card-w)) / 6 - var(--hs-card-w)));
}

/* Pai Gow - Settling Bets: player hand, the four wager buttons,
   dealer hand, push note, then Submit / Deal / End Session and the
   results. (.sb-wager-row is display: contents so its wagers and its
   buttons can sit apart, either side of the dealer hand.) */
.sb-screen {
    display: flex;
    flex-direction: column;
}

.sb-player { order: 1; }
.sb-wagers { order: 2; }
.sb-push-note { order: 3; font-size: 0.8rem; margin: 0 0 0.25rem 0; }
.sb-dealer { order: 4; }
.content .sb-wins { order: 5; }
.sb-actions { order: 6; }

/* A little wider than the page padding, so the cards can be bigger */
.sb-screen {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

/* Submit / Deal / End Session (with the result) pinned to the bottom
   of the screen, so they're always visible; the page still scrolls
   underneath. Sits above the iPhone's home bar. */
.sb-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 0.5rem 0 0 0;
    padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px)) 0.5rem;
    background-color: white;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

.sb-actions > p {
    text-align: center;
    font-size: 0.85rem;
}

.sb-actions > p:empty {
    display: none;
}

.sb-player h3,
.sb-dealer h3 {
    margin: 0.25rem 0 0.15rem 0;
}

.sb-player h3 {
    margin-top: 0 !important;
}

.sb-hand-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
}

.sb-hand-row > div {
    width: 100%;
}

/* Compact headings, hand labels and row spacing, so everything down
   to Submit fits on one screen */
.sb-player h3,
.sb-dealer h3 {
    font-size: 1.05rem;
}

.content .sb-hand-row > div > div:not(.sb-cards) {
    font-size: 0.72rem !important;
    line-height: 1.15;
}

.content .sb-cards {
    margin-bottom: 0.2rem !important;
}

/* Cards overlap 25%: five cards span 4 card widths, so each card is
   25% of the row, capped at 110px. The low hands overlap the same
   way at the same size. */
.content .sb-cards {
    gap: 0 !important;
}

.sb-card {
    position: relative;
    width: min(110px, 25%);
    height: auto;
    aspect-ratio: 90 / 126;
}

.sb-card + .sb-card {
    margin-left: calc(min(110px, 25%) * -0.25);
}

.content .sb-hand-labels {
    margin-top: 0;
    min-height: 0;
}

.sb-wager-row {
    display: contents;
}

/* All four wagers on one row, between the two hands */
.sb-wagers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 0 0.25rem 0;
}

.sb-wagers .wager-shape {
    width: 78px;
    height: 78px;
    font-size: 0.72rem;
}

/* Wager buttons: the four share the row equally, same height */
.sb-wagers {
    gap: 6px;
    align-items: stretch;
}

.sb-wagers .wp {
    flex: 1 1 0;
    min-width: 0;
}

.content .sb-wagers .wp-btn {
    min-width: 0;
    min-height: 48px;
    padding: 0.2rem 0.15rem;
    font-size: 0.74rem;
}

.sb-wagers .wager-circle {
    width: 74px;
    height: 74px;
}

.sb-wagers .wager-triangle-svg {
    width: 78px;
    height: 78px;
}

.sb-wagers .wager-label {
    padding: 0 4px;
}

.sb-actions {
    margin-left: 0;
    align-items: stretch;
}

.content .sb-wins {
    margin-left: 0;
}

.session-summary {
    max-width: none;
}

/* ------------------------------------------------------------------
   Three Card Prime on phones: each hand's cards overlap 25% on the left;
   the wagers are a column of buttons down the right edge in settling
   order. Tapping one slides its choices out to the left beside it.
   ------------------------------------------------------------------ */
/* (Applies on phones and desktop alike -- desktop uses the phone layout) */
.tcp-play .tcp-wagers,
.tcp-play .tcp-main-action {
    display: none;
}

/* Hands left, wager buttons right */
/* Hands left, wager column (84px) right. The table is the anchor
   for the slid-out choices, so they can never run off screen. */
.tcp-play .tcp-table {
    --tcp-rail-w: 84px;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    margin-top: 0;
}

.tcp-play .tcp-hands {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.tcp-play .tcp-hands h3 {
    margin: 0.25rem 0;
}

.tcp-play .tcp-hands p {
    margin: 0.4rem 0;
    font-size: 0.72rem;
}

/* Each hand's three cards overlap 25% (rank/suit corners stay
   visible), so they keep their size beside the wager column */
.tcp-play .tcp-hands .card-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
}

/* Three cards overlapped 25% = 2.5 card widths, so each card is 40%
   of the hand column's width (capped at 120px on wide screens) */
.tcp-play .tcp-hands .game-card {
    position: relative;
    width: min(40%, 120px);
    height: auto;
    aspect-ratio: 100 / 140;
}

.tcp-play .tcp-hands .game-card + .game-card {
    margin-left: calc(min(40%, 120px) * -0.25);
}

/* Wager buttons, top to bottom in settling order, then Submit/Deal */
.tcp-rail {
    display: flex;
    flex: 0 0 var(--tcp-rail-w);
    flex-direction: column;
    gap: 6px;
    margin-top: 1.9rem;
}

.content .tcp-rail-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 16;
    width: 100%;
    min-height: 42px;
    padding: 0.15rem 0.2rem;
    border: 1px solid #c9c9c9;
    border-radius: 8px;
    background-color: white;
    color: #222;
    font-size: 0.82rem;
    font-weight: bold;
    line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
}

.tcp-rail-btn small {
    min-height: 0.75rem;
    font-size: 0.62rem;
    font-weight: 600;
}

.content .tcp-rail-btn.win {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: white;
}

.content .tcp-rail-btn.lose {
    background-color: var(--c-lose);
    border-color: var(--c-lose);
    color: white;
}

.content .tcp-rail-btn.push {
    background-color: var(--c-push);
    border-color: var(--c-push);
    color: black;
}

.content .tcp-rail-btn.tcp-rail-active {
    box-shadow: 0 0 0 3px #7f9fcf;
}

.content .tcp-rail-btn.tcp-rail-wrong {
    box-shadow: 0 0 0 3px #222;
}

.content .tcp-rail-primary {
    position: relative;
    z-index: 16;
    min-height: 42px;
    padding: 0;
    border: 1px solid var(--c-primary-dark);
    border-radius: 8px;
    background-color: var(--c-primary);
    color: white;
    font-size: 0.95rem;
    font-weight: bold;
}

/* The slid-out choices: level with the tapped button (top left at
   its natural spot, pulled up by the button's height), and spanning
   the card area from the table's left edge to the wager column --
   anchored to the table, so always on screen. Light-blue tint with a
   border and a dark shadow so it stands clear of the cards. */
.tcp-fly {
    position: absolute;
    left: 0;
    right: calc(var(--tcp-rail-w) + 8px);
    margin-top: -46px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid var(--c-info-line);
    border-radius: 12px;
    background-color: var(--c-info-bg);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
    animation: tcp-fly-in 0.15s ease-out;
}

@keyframes tcp-fly-in {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: none; }
}

.content .tcp-fly-choice {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    padding: 0;
    border: 1px solid #999;
    border-radius: 8px;
    background-color: white;
    color: black;
    font-size: 0.95rem;
    font-weight: bold;
}

.content .tcp-fly-choice.tcp-fly-win {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: white;
}

.content .tcp-fly-choice.tcp-fly-lose {
    background-color: var(--c-lose);
    border-color: var(--c-lose);
    color: white;
}

.content .tcp-fly-choice.tcp-fly-push {
    background-color: var(--c-push);
    border-color: var(--c-push);
    color: black;
}

.content .tcp-fly-bonus {
    flex: 1 0 100%;
    min-height: 38px;
    border: 1px dashed #777;
    border-radius: 8px;
    background-color: white;
    color: black;
    font-size: 0.85rem;
    font-weight: bold;
}

.content .tcp-fly-bonus.on {
    border: 1px solid var(--c-primary-dark);
    background-color: var(--c-primary-dark);
    color: white;
}

/* Invisible layer behind the choices: tapping it closes them */
.tcp-fly-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 15;
}

.tcp-play .tcp-table {
    position: relative;
}

/* ------------------------------------------------------------------
   Desktop column: the games use the phone layout on desktop too, in a
   centered column. --col-w is the width those layouts size their cards
   against (the screen width on phones, the column width on desktop).
   ------------------------------------------------------------------ */
:root {
    --col-w: 100vw;
}

@media (min-width: 769px) {
    :root {
        --col-w: 520px;
    }

    .play-screen,
    .start-screen {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Every game card on desktop is the Blackjack Payouts size, 75 x 105,
       with each game's overlap scaled to match */

    /* Flash Cards (fanned, 30% overlap) */
    .card-row.fc-fan {
        --fc-w: 75px !important;
    }

    /* Three Card Prime (25% overlap) */
    .tcp-play .tcp-hands .game-card {
        width: 75px !important;
    }

    .tcp-play .tcp-hands .game-card + .game-card {
        margin-left: -18.75px !important;
    }

    /* Side Wagers: player's two cards (staggered) and the dealer card */
    .sw-hand-cards {
        width: 98px !important;
        height: 146px !important;
    }

    .sw-hand-cards img {
        width: 75px !important;
        height: 105px !important;
    }

    .sw-hand-cards img:first-child {
        left: 19px !important;
    }

    .sw-hand-cards img:last-child {
        top: 34px !important;
    }

    .sw-dealer-card {
        width: 75px;
        height: 105px;
    }

    /* Hold'em: community (25% overlap), dealer and player cards */
    .hd-table .hd-community {
        --hc-w: 75px;
    }

    .hd-dealer .hd-card,
    .hd-table .hd-hand-cards img {
        width: 75px !important;
        height: auto !important;
    }

    .hd-dealer {
        padding-bottom: 26px;
    }

    /* Pai Gow Hand Setting: the 7 cards and the 2 Low slots */
    .hs-cards {
        --hs-card-w: 75px;
    }

    .hs-low-slot {
        width: 75px;
    }

    /* Pai Gow Settling Bets (25% overlap) */
    .sb-card {
        width: 75px;
    }

    .sb-card + .sb-card {
        margin-left: -18.75px;
    }
}

/* ------------------------------------------------------------------
   Challenge Mode
   ------------------------------------------------------------------ */

/* Menu: shaded gold so it stands apart from the regular trainers. The
   group sits under its own "Practice & Tools" heading, which gives the
   gap above it */

.sidebar li.challenge-link a {
    background: var(--c-gold-bg);
    border-color: var(--c-gold-line);
}

@media (hover: hover) {
    .sidebar li.challenge-link a:hover {
        background: #ffe9ad;
        border-color: #d4ad3a;
    }
}

.sidebar li.challenge-link a.active {
    background: #b8860b;
    border-color: #b8860b;
    color: white;
}

.ch-rules {
    margin: 0 0 1rem 0;
}

/* Top 5 table on the start cards and the end screen */
.ch-top {
    margin-top: 0.75rem;
}

.ch-top-empty {
    color: #777;
    font-style: italic;
    margin: 0.25rem 0;
}

.ch-top-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.ch-top-table th,
.ch-top-table td {
    padding: 0.3rem 0.35rem;
    border-bottom: 1px solid #ddd;
    text-align: right;
    white-space: nowrap;
}

.ch-top-table th:first-child,
.ch-top-table td:first-child {
    text-align: left;
}

.ch-top-table th {
    font-size: 0.8rem;
    color: #555;
    text-transform: uppercase;
}

.ch-top-table .ch-top-date {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.15;
}

/* Time on its own line under the date, so the column fits any phone */
.ch-top-table .ch-top-date small {
    display: block;
    font-size: 0.72rem;
    color: #888;
}

/* Clear Scores, then its confirm line */
.content .ch-clear {
    margin-top: 0.5rem;
    min-height: 36px;
    padding: 0.2rem 0.9rem;
    border: 1px solid var(--c-lose);
    border-radius: 6px;
    background-color: white;
    color: var(--c-lose);
    font-size: 0.9rem;
    font-weight: bold;
}

.ch-clear-confirm {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e0a0a0;
    border-radius: 8px;
    background-color: #fdeaea;
    font-weight: bold;
}

.ch-clear-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.content .ch-clear-buttons button {
    flex: 1 1 0;
    min-height: 40px;
    border: 1px solid #999;
    border-radius: 6px;
    background-color: white;
    font-weight: bold;
}

.content .ch-clear-buttons .ch-clear-yes {
    border-color: var(--c-lose-dark);
    background-color: var(--c-lose);
    color: white;
}

.ch-top-table tr.ch-top-new td {
    background: var(--c-gold-bg);
    font-weight: bold;
}

/* Play screen: score / correct / clock line, then the draining bar */
.ch-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-top: 0.5rem;
    font-size: 1.05rem;
}

.ch-status .ch-clock {
    margin-left: auto;
    min-width: 2.2em;
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--c-primary);
    font-variant-numeric: tabular-nums;
}

.ch-status .ch-clock-low {
    color: var(--c-lose);
}

.ch-bar {
    width: 100%;
    height: 10px;
    margin-top: 0.25rem;
    border-radius: 5px;
    background: #e3e3e3;
    overflow: hidden;
}

.ch-bar-fill {
    height: 100%;
    width: 100%;
    background: var(--c-primary);
    transform-origin: left center;
    animation-name: ch-drain;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.ch-bar-fill.ch-bar-low {
    background: var(--c-lose);
}

@keyframes ch-drain {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Payouts challenge: no cards, so the wager is shown larger */
.ch-pays {
    font-weight: bold;
    margin-top: 1rem !important;
}

.po-wager.ch-wager {
    font-size: 2.2rem;
    margin: 0.25rem 0 0.5rem 0;
}

.po-wager.ch-wager strong {
    padding: 0.15rem 1rem;
}

/* "+N" beside the score after a correct answer */
.ch-gain {
    margin-left: 0.4rem;
    color: blue;
    font-weight: bold;
}

/* End button pinned to the bottom of the screen. Phones: full width.
   Desktop: lined up with the centered game column (sidebar is 220px). */
.ch-screen {
    padding-bottom: 4.5rem;
}

.ch-endbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 0.4rem 0.75rem calc(0.4rem + env(safe-area-inset-bottom, 0px)) 0.75rem;
    background-color: white;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.content .ch-endbar .ch-end {
    display: block;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--c-lose-dark);
    border-radius: 6px;
    background-color: var(--c-lose);
    color: white;
    font-size: 1.05rem;
    font-weight: bold;
}

@media (min-width: 769px) {
    .ch-endbar {
        --ch-col: min(520px, 100% - 220px - 4rem);
        left: calc(220px + (100% - 220px - var(--ch-col)) / 2);
        right: auto;
        width: var(--ch-col);
        padding-left: 0;
        padding-right: 0;
        box-shadow: none;
    }
}

.ch-plus {
    color: blue;
    font-weight: bold;
}

/* Run over screen */
.ch-over h1 {
    color: var(--c-lose);
}

.ch-over h1.ch-ended {
    color: var(--c-primary);
}

.ch-reason {
    font-size: 1.1rem;
    margin: 0.25rem 0;
}

.ch-answer {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0.25rem 0 0.75rem 0;
}

.ch-placed {
    display: inline-block;
    margin: 0 0 0.75rem 0;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--c-gold-line);
    border-radius: 8px;
    background: var(--c-gold-bg);
    font-weight: bold;
}

.ch-final {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.ch-final > div {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f7f9fc;
}

.ch-final span {
    font-size: 0.8rem;
    color: #555;
    text-transform: uppercase;
}

.ch-final strong {
    font-size: 1.5rem;
}

.ch-over .button-row {
    margin-top: 1rem;
}

.ch-over .mode-start {
    display: inline-block;
    margin-top: 0;
    width: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* About: version line and Reload Latest Version */
.about-version {
    margin-top: 1rem;
}

.about-version-line {
    margin-top: 0;
}

.about-version-note {
    margin-bottom: 0;
    font-size: 0.9rem;
    color: #555;
}

/* About: Special Thanks as a green felt panel -- gold heading, each
   name after a black spade on a small white circle */
.thanks-felt {
    margin: 0.25rem 0 0 0;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: radial-gradient(ellipse at center, #2a7f53 0%, #1d6240 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
    color: #fff;
}

.thanks-title {
    margin-bottom: 0.45rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #f2d27a;
}

.thanks-name {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.18rem 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.thanks-spade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #111;
    font-family: "Apple Symbols", "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", sans-serif;
    font-size: 0.95rem;
    font-weight: normal;
}

.thanks-for {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #d7eadf;
}

/* ------------------------------------------------------------------
   Roulette Payouts
   ------------------------------------------------------------------ */
.rl-note {
    margin: 0.1rem 0 0 0;
    font-size: 0.9rem;
    color: #666;
}

/* Level choices: name, then its description on the line below */
.rl-level {
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0;
    line-height: 1.25;
}

.rl-level-desc {
    font-size: 0.9rem;
    color: #555;
}

.rl-pays-line {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: #444;
}

.rl-screen {
    padding-bottom: 4.5rem;
}

.rl-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    margin: 0.25rem 0 0.4rem 0;
    font-size: 1rem;
}

/* Green felt close-up of the layout */
.rl-felt {
    align-self: stretch;
    padding: 0.5rem 0;
    border-radius: 10px;
    background-color: var(--c-felt);
}

.rl-winner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    text-transform: uppercase;
}

.rl-winner .rl-winner-num {
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
    box-shadow: 0 0 0 3px #ffd700;
}

/* Board = grid of numbers + chips placed over it. Sizes (cells 94 x 54,
   partly shown edge rows 24, lines included) must match CellW / CellH /
   EdgeRowH in RouletteTrainer.razor. */
.rl-board {
    position: relative;
    width: 284px;
    margin: 0 auto;
}

.rl-grid {
    display: grid;
    grid-template-columns: repeat(3, 94px);
    grid-template-rows: 24px 54px 54px 54px 24px;
    width: 284px;
    box-sizing: border-box;
    border-left: 2px solid #e8e8e8;
    border-top: 2px solid #e8e8e8;
}

.rl-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-right: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;
}

.rl-cell.rl-fade {
    overflow: hidden;
    opacity: 0.45;
}

/* Edge rows: only the inner part of each number shows */
.rl-cell.rl-edge-top {
    align-items: flex-end;
}

.rl-cell.rl-edge-bottom {
    align-items: flex-start;
}

/* The winning number's square */
.rl-cell.rl-win {
    background-color: rgba(255, 215, 0, 0.28);
    box-shadow: inset 0 0 0 3px #ffd700;
}

.rl-num {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    font-size: 1.25rem;
}

.rl-red {
    background-color: #c8102e;
}

.rl-black {
    background-color: #111;
}

/* A winning chip: number = how many chips in the stack */
.rl-chip {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    border: 4px dashed white;
    border-radius: 50%;
    background-color: #f2c400;
    box-shadow: 0 0 0 2px #7a5c00, 0 3px 6px rgba(0, 0, 0, 0.5);
    color: #222;
    font-size: 1.05rem;
    font-weight: 900;
    pointer-events: none;
}

.keypad-screen > .rl-result,
.rl-result {
    margin: 0.75rem 0 0.4rem 0;
    font-size: 1.1rem;
    font-weight: bold;
}

/* Phones: a slightly shorter answer box and keys, so the whole keypad
   fits above the pinned Help bar */
@media (max-width: 768px), (pointer: coarse) {
    .rl-screen .po-display {
        min-height: 3rem;
    }

    .rl-screen .numeric-keypad-row button {
        height: 44px;
    }

    .keypad-screen.rl-screen > .keypad-answer {
        margin: 0.5rem 0 0.5rem 0 !important;
    }
}

.rl-breakdown {
    align-self: stretch;
    padding: 0.5rem 0.75rem;
    border: 1px solid #999;
    border-radius: 6px;
}

.rl-breakdown table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.rl-breakdown td {
    padding: 2px 0;
}

.rl-breakdown td:last-child {
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
    padding-left: 0.5rem;
}

.rl-breakdown tr.rl-total td {
    padding-top: 5px;
    border-top: 1px solid #bbb;
}

/* Bottom bar pinned to the screen: Help, then Next once answered.
   Phones: full width. Desktop: lined up with the game column. */
.rl-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem calc(0.4rem + env(safe-area-inset-bottom, 0px)) 0.75rem;
    box-sizing: border-box;
    background-color: white;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

.content .rl-bar button {
    flex: 1 1 0;
    min-height: 44px;
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: bold;
}

.content .rl-bar .rl-help-btn {
    border: 1px solid #999;
    background-color: white;
    color: #111;
}

.content .rl-bar .rl-next {
    flex-grow: 2;
    border: 1px solid var(--c-primary-dark);
    background-color: var(--c-primary);
    color: white;
}

@media (min-width: 769px) {
    .rl-bar {
        --rl-col: min(520px, 100% - 220px - 4rem);
        left: calc(220px + (100% - 220px - var(--rl-col)) / 2);
        right: auto;
        width: var(--rl-col);
        padding-left: 0;
        padding-right: 0;
        box-shadow: none;
    }
}

/* Help: the pays, in a box over the page; tap outside or Close */
.rl-help-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background-color: rgba(0, 0, 0, 0.35);
}

.rl-help {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 31;
    width: min(320px, calc(100vw - 2rem));
    transform: translate(-50%, -50%);
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.rl-help-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.15rem;
    font-weight: bold;
}

.rl-help table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.05rem;
}

.rl-help td {
    padding: 0.3rem 0;
    border-bottom: 1px solid #eee;
}

.rl-help td:last-child {
    text-align: right;
    font-weight: bold;
}

.rl-help-note {
    margin: 0.75rem 0 0 0;
    font-size: 0.9rem;
    color: #555;
}

/* ------------------------------------------------------------------
   Home page
   ------------------------------------------------------------------ */
.home {
    max-width: 520px;
}

.home-lead {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.home-heading {
    margin: 1.5rem 0 0.6rem 0;
    font-size: 1.25rem;
}

/* Each game is one big tappable row: name, then a line on what it drills */
.home-games {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.home-game {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: white;
    color: #111;
    text-decoration: none;
}

.home-game-name {
    font-size: 1.1rem;
    font-weight: bold;
}

.home-game-desc {
    font-size: 0.95rem;
    color: #555;
}

@media (hover: hover) {
    .home-game:hover {
        background-color: #eef3fa;
        border-color: #b8d0ec;
    }
}

/* Same gold shade as the Challenge Mode menu link */
.home-game.home-game-challenge {
    background-color: var(--c-gold-bg);
    border-color: var(--c-gold-line);
}

.home-steps {
    margin: 0;
    padding-left: 1.4rem;
}

.home-steps li {
    margin-bottom: 0.4rem;
}

.home-tip {
    margin-top: 1.25rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--c-info-line);
    border-radius: 8px;
    background-color: var(--c-info-bg);
}

.home-note {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: #555;
}

/* ------------------------------------------------------------------
   Reveal button and its answer pop-up (Shared/RevealPopup.razor)
   ------------------------------------------------------------------ */
.content .reveal-button {
    border: 1px solid #b8860b;
    background-color: var(--c-gold-bg);
    color: #5a4300;
    font-weight: bold;
}

.reveal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background-color: rgba(0, 0, 0, 0.35);
}

.reveal-box {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 31;
    width: min(340px, calc(100vw - 2rem));
    transform: translate(-50%, -50%);
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.reveal-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.05rem;
    font-weight: bold;
    color: #555;
}

.reveal-body p {
    margin: 0.4rem 0;
}

.reveal-body .reveal-answer {
    margin: 0.25rem 0 0.5rem 0;
    font-size: 1.6rem;
    font-weight: bold;
}

.reveal-note {
    margin: 0.75rem 0 0 0;
    font-size: 0.9rem;
    color: var(--c-lose-dark);
}

.reveal-card {
    margin-left: 0.4rem;
    font-weight: bold;
}

.reveal-red {
    color: var(--c-lose);
}

/* Suit symbols in feedback text (Shared/SuitText): red hearts and
   diamonds, black spades and clubs, whatever the line's own color */
/* Payout shortcut under a missed payout (BreakdownRow.Tip) */
.bd-tip {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 8px;
    border: 1px solid #e0c060;
    border-radius: 6px;
    background-color: #fff4d6;
    color: #4a3a00;
}

.suit-red,
.suit-black {
    /* fonts that draw the plain suit symbols (not emoji) */
    font-family: "Apple Symbols", "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", sans-serif;
}

.suit-red {
    color: #d0021b;
}

.suit-black {
    color: #111;
}

/* Cards named in feedback ("7♣ 6♣ 2♣"): each card as a small outlined
   tile, like a card (Shared/SuitText.razor) */
.card-tile {
    display: inline-block;
    min-width: 1.9em;
    padding: 0 0.28em;
    margin: 1px 1px;
    border: 1.5px solid #8a93a0;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
    color: #111;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Shared bottom bar (Shared/GameBar.razor), the same in every game:
   Help | main action(s) | End Session, pinned to the bottom of the
   screen. Phones: full width. Desktop: lined up with the game column
   (sidebar 220px). Play screens using it get room at the bottom so
   nothing ends up hidden behind it.
   ------------------------------------------------------------------ */
.has-game-bar {
    padding-bottom: 4.5rem;
}

.game-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem calc(0.4rem + env(safe-area-inset-bottom, 0px)) 0.75rem;
    box-sizing: border-box;
    background-color: white;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

.content .game-bar button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 0.3rem;
    white-space: nowrap;
    border: 1px solid #999;
    border-radius: 6px;
    background-color: white;
    color: #111;
    font-size: 1rem;
    font-weight: bold;
}

.content .game-bar .game-bar-end {
    flex-grow: 1.25;
}

/* Four buttons (Hold'em Identify the Hands adds Reveal, and its End
   Session button reads "End"): a little less padding so all four fit */
.content .game-bar:has(> button:nth-child(4)) button {
    padding: 0 0.15rem;
}

.content .game-bar .game-bar-main {
    flex-grow: 1.4;
    border-color: var(--c-primary-dark);
    background-color: var(--c-primary);
    color: white;
}

.content .game-bar .game-bar-main:disabled {
    border-color: #c9c9c9;
    background-color: #e3e3e3;
    color: #888;
}

.content .game-bar .reveal-button {
    border-color: #b8860b;
    background-color: var(--c-gold-bg);
    color: #5a4300;
}

/* Desktop: the bar follows right under the game instead of sitting at
   the bottom of the window. It only sticks to the bottom edge when the
   game is taller than the window (so it's always reachable). */
@media (min-width: 769px) {
    .has-game-bar {
        padding-bottom: 0;
    }

    .game-bar {
        position: sticky;
        left: auto;
        right: auto;
        bottom: 0;
        order: 99;
        align-self: stretch;
        width: auto;
        margin-top: 1rem;
        padding: 0.5rem 0 0.75rem 0;
        box-shadow: none;
    }
}

/* Help pop-up: the game's rules or chart; scrolls if taller than the
   screen */
.reveal-box.help-box {
    width: min(480px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}

/* Phones: the 52px menu bar stays on top of everything, so pop-ups
   (Help and the reveal / answer pop-ups) center in the space below it
   and a tall Help box stops 1rem under it instead of sliding beneath */
@media (max-width: 768px) {
    .reveal-box {
        top: calc(50% + 26px);
    }

    .reveal-box.help-box {
        max-height: calc(100vh - 52px - 2rem);
        max-height: calc(100dvh - 52px - 2rem);
    }
}

.help-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.15rem;
    font-weight: bold;
}

.help-body ul {
    margin: 0;
    padding-left: 1.2rem;
}

.help-body li {
    margin-bottom: 0.4rem;
}

.help-image {
    display: block;
    width: 100%;
    height: auto;
}

.help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.05rem;
}

.help-table td {
    padding: 0.3rem 0;
    border-bottom: 1px solid #eee;
}

.help-table td:last-child {
    text-align: right;
    font-weight: bold;
}

/* Pay tables in Help: the pay ("Both 1 to 1", "1,000 to 1") stays on one
   line; the hand name beside it wraps instead */
.help-table.sp-help-table td:last-child {
    padding-left: 0.75rem;
    white-space: nowrap;
}

/* Section headings span both columns and wrap normally */
.help-table.sp-help-table .sp-pt-hd td,
.sp-pt .sp-pt-hd td {
    padding-left: 0;
    white-space: normal;
}

/* Pai Gow House Ways Help: numbered rules, left-aligned plain text
   (not a pay table), lettered sub-rules indented */
.hw-key {
    margin: 0 0 0.25rem 0;
    color: var(--c-muted);
    font-size: 0.85rem;
}

.help-table.hw-table {
    font-size: 0.95rem;
}

.help-table.hw-table td {
    vertical-align: top;
    line-height: 1.35;
}

.help-table.hw-table td:first-child {
    width: 1.6rem;
    padding-right: 0.35rem;
    color: var(--c-primary-dark);
    font-weight: 800;
    text-align: right;
}

.help-table.hw-table td:last-child {
    text-align: left;
    font-weight: normal;
}

.help-table.hw-table .sp-pt-hd td {
    width: auto;
    padding-right: 0;
    text-align: left;
    font-weight: 800;
}

/* Lettered sub-rule: indented under its rule, letter hanging */
.help-table.hw-table tr.hw-sub td:last-child {
    padding-left: 1.5rem;
    text-indent: -1.1rem;
}

.help-table.hw-table tr.hw-sub b {
    display: inline-block;
    width: 1.1rem;
    text-indent: 0;
    color: var(--c-primary-dark);
}

/* House Way section tabs (Shared/HouseWayTable): All, Two Pair, ...
   One row that scrolls sideways, so the rules stay near the top */
.hw-tabs {
    display: flex;
    gap: 6px;
    margin: 0.3rem 0 0.6rem;
    padding-bottom: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hw-tab {
    flex: none;
    white-space: nowrap;
    min-height: 34px;
    padding: 0.25rem 0.75rem;
    border: 1px solid #c4ccd4;
    border-radius: 17px;
    background-color: white;
    color: #1b2530;
    font-weight: 700;
    font-size: 0.85rem;
}

.hw-tab.hw-on {
    border-color: var(--c-felt);
    background-color: var(--c-felt);
    color: white;
}

/* One-line "what to do" shown on a game's first round only */
.first-hint {
    align-self: stretch;
    margin: 0.5rem 0;
    padding: 0.4rem 0.6rem;
    border-left: 4px solid var(--c-info-line);
    background-color: #eef3fa;
    color: #333;
    font-size: 0.95rem;
}

.sw-screen > .first-hint { order: 2; }
.hs-screen > .first-hint { order: 4; }
.sb-first-hint { order: 2; }
.hd-settle .hd-first-hint { order: 2; }

/* After Submit: why each wager won or lost */
.why-line {
    margin: 0.15rem 0;
    font-size: 0.92rem;
    font-weight: normal;
    color: #333;
}

/* Pai Gow Settling Bets: result and score (the buttons moved to the
   shared bar) */
.sb-status {
    order: 6;
    margin-top: 0.5rem;
    text-align: center;
}

/* ------------------------------------------------------------------
   Theme helpers (replacing styles that used to be typed into each page)
   ------------------------------------------------------------------ */

/* Right / wrong / plain text, the same everywhere */
.txt-ok { color: var(--c-ok); }
.txt-bad { color: var(--c-lose); }
.txt-plain { color: var(--c-text); }
.txt-muted { color: var(--c-muted); }
.txt-bold { font-weight: bold; }

/* Result line under a hand: CORRECT / INCORRECT */
.result-line {
    margin: 0;
    font-weight: bold;
}

/* Small grey caption above a row of cards ("High Hand", hand number) */
.caption {
    color: var(--c-muted);
    font-size: 0.85rem;
}

/* A table rule printed above the cards, e.g. DEALER MUST HIT SOFT 17 */
.table-rule {
    font-weight: bold;
}

.prompt-line {
    font-size: 1.2rem;
}

.narrow-card {
    max-width: 500px;
}

.tight { margin: 0; }
.tight-top { margin: 0.25rem 0 0 0; }

.keypad-answer { margin: 1rem 0; }
.rl-screen .keypad-answer { margin: 0.5rem 0; }
.card-row.fc-fan,
.card-row.po-cards { margin: 1rem 0; }

/* Two cards of a player hand, the second dropped down and to the left
   (Side Wagers and Hold'em) */
.stack-2 {
    position: relative;
    width: 130px;
    height: 195px;
}

.stack-2 img {
    position: absolute;
    width: 100px;
    height: 140px;
}

.stack-2 img:first-child { top: 0; left: 25px; }
.stack-2 img:last-child { top: 45px; left: 0; }

/* Pai Gow card rows */
.pg-row {
    display: flex;
    gap: 8px;
}

.pg-row.pg-row-gap { margin-bottom: 0.5rem; }

.pg-slot-img {
    width: 100%;
    height: 100%;
}

.hs-card { cursor: pointer; }
.hs-card.hs-card-moved { opacity: 0; }

.pg-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem 1.5rem;
    white-space: pre-line;
}

.pg-compare .pg-gap { margin-top: 0.4rem; }

.pre-line { white-space: pre-line; }

/* Hold'em cards the trainee can tap; marked-unused cards turn 45deg */
.hd-card.hd-tappable { cursor: pointer; }
.hd-card.hd-rotated { transform: rotate(45deg); }

.hd-rank-row select.rank-wrong { background-color: #f8d0d0; }
.hd-rank-row select.rank-picked { background-color: #d0e0f8; }

/* ------------------------------------------------------------------
   Score line at the top of every play screen (Shared/GameStatus):
   the game or mode on the left, "Score 6 / 7" on the right
   ------------------------------------------------------------------ */
.game-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    gap: 0.75rem;
    margin: 0.25rem 0 0.5rem 0;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.game-status-title {
    min-width: 0;
    font-weight: bold;
}

/* "Score 1 / 3" always on one line; a long title wraps instead */
.game-status > span:last-child {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Table felt: the green panel behind the cards in every game (the
   same green as Roulette's layout). The panel reaches 0.5rem past the
   content on each side so the cards keep their full width. Text on it
   is white; result notes on it sit on a white tag so red/blue stay
   readable.
   ------------------------------------------------------------------ */
.felt {
    align-self: stretch;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding: 0.5rem;
    border-radius: 10px;
    background-color: var(--c-felt);
    color: white;
}

.felt h3,
.felt .caption,
.felt .table-rule,
.felt .hd-hand-number,
.felt .paged-hand-number {
    color: white;
}

.felt .caption {
    opacity: 0.85;
}

.felt .feedback-area {
    color: white;
}

.felt .hd-hand-result {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background-color: white;
}

/* Pai Gow Settling Bets is already 0.5rem wider than the page */
.sb-screen .felt {
    margin-left: 0;
    margin-right: 0;
}

/* Low Hand slots: show as outlines on the felt */
.felt .hs-low-slot {
    border-color: rgba(255, 255, 255, 0.7);
}

/* Hold'em: community cards and the dealer's cards share one panel */
.hd-board {
    order: 3;
    margin-top: 0.5rem;
}

/* Theme pass: classes that replace the old inline styles */
.fc-hint {
    font-style: italic;
    color: var(--c-muted);
}

.sw-result {
    height: 1.5rem;
}

.hs-result-header {
    margin: 0 0 0.35rem 0;
}

.hs-hand {
    order: 2;
}

.felt .card-row {
    margin: 0 !important;
}

.felt .table-rule {
    margin: 0.35rem 0 0 0;
}

.hd-hands.felt {
    width: auto;
}

.felt .hd-board,
.hd-board.felt {
    box-sizing: border-box;
}

/* Three Card Prime: Ante Bonus box sits just right of the Ante circle */
.tcp-ante-box {
    position: relative;
    width: 90px;
}

.tcp-ante-bonus {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.75rem;
    white-space: nowrap;
}

.tcp-ante-bonus.tcp-ante-bonus-wrong {
    background-color: #f8d0d0;
}

/* Cards on the felt: size them to the space inside the panel (the
   column less the felt's padding), so the last card doesn't run past
   the green edge on phones. Desktop is unaffected (cards cap at 100px). */
.felt .hs-cards {
    --hs-row: calc(var(--col-w) - 3rem);
}

.hd-board .hd-community {
    --hc-w: min(100px, calc((var(--col-w) - 3rem) / 4));
}

.hd-board .hd-dealer .hd-card,
.hd-table .felt .hd-hand-cards img {
    width: min(100px, calc((var(--col-w) - 3rem) / 4)) !important;
}

/* No extra space above the first title or below the last row inside
   the Hold'em board panel */
.hd-board > .hd-community-title {
    margin-top: 0;
}

.hd-board > .hd-dealer {
    margin-bottom: 0;
}

/* Phones: the score line and felt add some height, so Flash Cards and
   Payouts trim their spacing to keep the whole keypad above the bar */
@media (max-width: 768px), (pointer: coarse) {
    .game-status {
        margin: 0 0 0.35rem 0;
    }

    .felt.fc-felt,
    .felt.po-felt {
        padding: 0.35rem 0.5rem;
    }

    .fc-msg {
        min-height: 1.3em;
        margin: 0.25rem 0;
    }

    .po-wager {
        margin: 0.25rem 0;
    }
}

/* No default 8px page margin: the layout fills the window exactly, so
   a short page doesn't scroll */
html,
body {
    margin: 0;
}

/* Desktop (mouse): answer box and the buttons beside it at a readable
   size instead of the browser's small default */
@media (min-width: 769px) and (pointer: fine) {
    .answer-row {
        gap: 0.5rem;
    }

    .content .answer-row input {
        width: 12rem;
        min-height: 40px;
        padding: 0.3rem 0.6rem;
        box-sizing: border-box;
        border: 1px solid var(--c-border);
        border-radius: 6px;
        font-size: 1.1rem;
    }

    .content .answer-row button {
        min-height: 40px;
        padding: 0 0.9rem;
        border-radius: 6px;
        font-size: 1rem;
    }

    /* Three Card Prime: the Win / Lose / Push choices sit in a compact
       box right beside the wager buttons, not across the whole table */
    .tcp-fly {
        left: auto;
        width: 252px;
    }
}

/* Pai Gow Settling Bets: result and per-wager breakdown under the
   dealer's hand (same box as Roulette's payout breakdown) */
.sb-feedback {
    order: 6;
    align-self: stretch;
    margin-top: 0.75rem;
}

/* ------------------------------------------------------------------
   After-Submit feedback box (Shared/ResultBreakdown), the same in every
   game: result line, then one line per wager -- name on the left, a
   check and the answer (or a cross, what was picked and the answer) on
   the right -- with the reason in grey underneath.
   ------------------------------------------------------------------ */
.content .breakdown-result {
    margin: 0 0 0.4rem 0;
    font-size: 1.1rem;
    text-align: left;
}

.breakdown {
    align-self: stretch;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background-color: white;
    color: var(--c-text);
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.breakdown table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.breakdown td {
    padding: 2px 0;
    vertical-align: top;
}

.breakdown tr.bd-row td:first-child {
    font-weight: bold;
    padding-right: 0.5rem;
}

.breakdown tr.bd-row td:last-child {
    text-align: right;
    font-weight: bold;
}

.breakdown tr.bd-why td {
    padding-bottom: 6px;
    color: var(--c-muted);
    font-size: 0.88rem;
}

.breakdown tr.bd-why + tr.bd-row td,
.breakdown tr.bd-row + tr.bd-row td {
    padding-top: 6px;
    border-top: 1px solid var(--c-line);
}

/* Feedback blocks the page scrolls to (dstScrollToEl): stop below the
   phone top bar instead of under it */
.session-summary,
.sb-feedback {
    scroll-margin-top: 64px;
}

/* Phones: the Session Summary is the last thing on the page; leave room
   under it so the pinned bottom bar doesn't cover its OK button */
@media (max-width: 768px), (pointer: coarse) {
    .session-summary {
        margin-bottom: 5rem;
    }
}

/* Home page: the five cards on the same green felt the games use,
   sized to fit inside the panel on any screen */
.home-cards.felt {
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0.75rem 0.5rem;
}

.home-cards.felt .home-card {
    width: calc((100% - 32px) / 5);
    max-width: 100px;
    height: auto;
    aspect-ratio: 100 / 140;
}

/* Computers (wide screen with a mouse): no "Add to Home Screen" in the
   menu -- it's a phone/tablet feature. The page itself still works if
   opened from the Home page tip. */
@media (min-width: 769px) and (pointer: fine) {
    .sidebar .install-link {
        display: none;
    }
}

/* Phones: Payouts result box -- result on one line, the worked-out
   payout under it in smaller type, kept compact so the keypad stays
   above the bottom bar */
@media (max-width: 768px), (pointer: coarse) {
    .po-display {
        padding: 0.2rem 0.6rem;
        line-height: 1.2;
    }

    .po-display-detail {
        font-size: 0.85rem;
    }
}

/* Hold'em Identify the Hands: the feedback box spans the column like
   the other games instead of shrinking to its text */
.content .hd-feedback.hd-feedback-inline {
    box-sizing: border-box;
    width: 100%;
}

/* Pai Gow Hand Setting: the House Way rule under the result */
.hs-houseway {
    margin: 0.6rem 0 0 0;
    padding: 0.45rem 0.6rem;
    border-left: 4px solid var(--c-info-line);
    border-radius: 4px;
    background-color: var(--c-info-bg);
    color: var(--c-text);
    font-size: 0.92rem;
    font-weight: normal;
    text-align: left;
}

/* Feedback box: the page scrolls to the result line after Submit; stop
   below the phone top bar */
.breakdown-result {
    scroll-margin-top: 64px;
}

/* Note at the bottom of the feedback box (Pai Gow: the House Way rule) */
.breakdown .bd-note {
    margin: 0.4rem 0 0 0;
    padding: 0.45rem 0.6rem;
    border-left: 4px solid var(--c-info-line);
    border-radius: 4px;
    background-color: var(--c-info-bg);
    color: var(--c-text);
    font-size: 0.9rem;
    font-weight: normal;
}

/* Pai Gow Hand Setting: the feedback box spans the column */
.hs-feedback {
    align-self: stretch;
}

/* Roulette's payout table: same box as the other games' feedback */
.rl-breakdown {
    border-color: var(--c-border);
    background-color: white;
    color: var(--c-text);
}

/* ------------------------------------------------------------------
   Roulette Math Tricks (Shared/RouletteMathTricks.razor): page from the
   Roulette start screen, and inside Roulette's Help
   ------------------------------------------------------------------ */
.rm-page {
    max-width: 520px;
}

.rm-back {
    margin: 0 0 0.5rem 0;
}

.rm-back a,
.content a.rl-math-link {
    color: var(--c-primary);
    font-weight: bold;
}

.content a.rl-math-link {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.55rem 1.25rem;
    border: 1px solid var(--c-primary);
    border-radius: 6px;
    background-color: white;
    text-decoration: none;
}

.rm-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-bottom: 0.75rem;
}

.content .rm-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 48px;
    padding: 0.2rem 0;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background-color: white;
    color: var(--c-text);
    line-height: 1.1;
}

.content .rm-tab.rm-tab-on {
    border-color: var(--c-primary-dark);
    background-color: var(--c-primary);
    color: white;
}

.rm-tab-pay {
    font-size: 1.05rem;
    font-weight: bold;
}

.rm-tab-name {
    font-size: 0.7rem;
}

.rm-title {
    margin: 0.25rem 0;
}

.rm-lead {
    margin: 0 0 0.75rem 0;
    color: var(--c-muted);
    font-size: 0.92rem;
}

.rm-try {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.rm-try-label {
    font-weight: bold;
}

.content .rm-chips {
    width: 4.5rem;
    height: 44px;
    box-sizing: border-box;
    border: 1px solid var(--c-info-line);
    border-radius: 6px;
    background-color: var(--c-info-bg);
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
}

.rm-examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

.content .rm-example {
    min-width: 40px;
    min-height: 36px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background-color: white;
    font-weight: bold;
}

.content .rm-example.rm-example-on {
    border-color: var(--c-primary-dark);
    background-color: var(--c-info-bg);
}

.rm-answer {
    margin: 0.5rem 0 0.75rem 0;
    font-size: 1.2rem;
}

.rm-way {
    margin: 0 0 0.6rem 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background-color: white;
}

.rm-way-name {
    margin: 0;
    font-weight: bold;
}

.rm-way-idea {
    margin: 0.15rem 0 0.35rem 0;
    color: var(--c-muted);
    font-size: 0.9rem;
}

.rm-way-skip {
    margin: 0.25rem 0;
    font-style: italic;
    color: var(--c-muted);
}

.rm-steps {
    margin: 0.25rem 0;
    padding-left: 1.4rem;
}

.rm-steps li {
    margin: 0.2rem 0;
    font-variant-numeric: tabular-nums;
}

.rm-watch {
    margin: 0.35rem 0 0 0;
    font-size: 0.85rem;
    color: var(--c-lose-dark);
}

.rm-board {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.rm-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.rm-row-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 0;
    border: 1px solid var(--c-line);
    border-radius: 4px;
}

.rm-row-cell.rm-row-on {
    border-color: var(--c-gold-line);
    background-color: var(--c-gold-bg);
}

.rm-row-chips {
    color: var(--c-muted);
    font-size: 0.72rem;
}

.rm-row-pays {
    font-size: 1rem;
    font-weight: bold;
}

.rm-board th,
.rm-board td {
    padding: 4px;
    border-bottom: 1px solid var(--c-line);
    text-align: left;
    vertical-align: top;
}

.rm-board td:last-child,
.rm-board th:last-child {
    text-align: right;
    font-weight: bold;
}

/* Inside Roulette's Help pop-up: collapsed until tapped */
.rl-math-help {
    margin-top: 0.75rem;
    text-align: left;
}

.rl-math-help > summary {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--c-primary);
    border-radius: 6px;
    color: var(--c-primary);
    font-weight: bold;
    cursor: pointer;
}

.rl-math-help[open] > summary {
    margin-bottom: 0.6rem;
}

/* Desktop (mouse): bigger on-screen keypad (shown after 123), so the
   keys are easy to click and "Enter" / "Next" fits inside its key */
@media (min-width: 769px) and (pointer: fine) {
    .content .numeric-keypad-row button,
    .numeric-keypad-row span {
        width: 64px;
        height: 52px;
        min-height: 52px;
        padding: 0;
        font-size: 1.25rem;
    }

    .content .numeric-keypad-row .numeric-keypad-enter {
        font-size: 1rem;
        font-weight: bold;
        white-space: nowrap;
    }

    .content .numeric-keypad-row .numeric-keypad-wide {
        width: 200px;
    }
}

/* Roulette in Challenge Mode: winning number line and board under the
   clock, then the answer box and keypad */
.ch-rl-winner {
    margin: 0.5rem 0 0.35rem 0;
}

.ch-rl-board {
    align-self: stretch;
}

.ch-rl-breakdown {
    margin: 0.5rem 0;
    text-align: left;
}

/* Phones: the board, answer box and whole keypad fit above the bottom
   bar -- the winning number is already marked gold on the board, so
   its separate line is left out here */
@media (max-width: 768px), (pointer: coarse) {
    .ch-rl .ch-rl-winner {
        display: none;
    }

    .ch-rl .rl-felt {
        padding: 0.25rem 0;
    }

    .ch-rl .ch-bar {
        margin-bottom: 0.4rem;
    }
}

/* Roulette in Challenge Mode on shorter phone screens (e.g. an iPhone
   with Safari's toolbars showing): the board is drawn at 80% so the
   whole keypad -- Enter included -- sits well clear of the Submit / End
   bar. The chips scale with it, so their positions stay exact. */
@media (max-width: 768px) and (max-height: 760px), (pointer: coarse) and (max-height: 760px) {
    .ch-rl .rl-board {
        transform: scale(0.8);
        transform-origin: top center;
        margin-bottom: -46px;
    }
}

/* ------------------------------------------------------------------
   Blackjack - Side Wager Payouts (sp-): dealer up-card (and hole card
   on an Ace) beside the player's two cards, then a 21 + 3 and a Lucky
   Ladies row, each with its chip and payout box.
   ------------------------------------------------------------------ */
.sp-screen {
    position: relative;
}

.sp-felt {
    display: flex;
    gap: 1rem;
    justify-content: space-around;  /* dealer and player spread across the felt */
    align-items: flex-start;
    padding: 0.5rem 0.75rem 1.1rem 0.75rem;
}

.sp-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sp-cap {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    opacity: 0.9;
}

.sp-cards {
    display: flex;
    gap: 5px;
}

.sp-card {
    width: 62px;
    height: 87px;
    border-radius: 4px;
    background-color: white;
}

/* Ace up: the hole card sits behind it, tilted and darker, with a
   dashed gold outline, so it can't be mistaken for the up-card */
.sp-dealer {
    position: relative;
    width: 100px;
    height: 100px;
}

.sp-dealer .sp-up {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.sp-dealer .sp-hole {
    position: absolute;
    left: 34px;
    top: 10px;
    filter: brightness(0.82);
    transform: rotate(8deg);
    outline: 3px dashed #ffd24d;
    outline-offset: -1px;
}

.sp-tag {
    position: absolute;
    bottom: -0.9rem;
    z-index: 3;
    padding: 1px 5px;
    border-radius: 4px;
    color: #222;
    font-size: 0.65rem;
    font-weight: 800;
    white-space: nowrap;
}

.sp-uptag {
    left: 2px;
    background-color: white;
}

.sp-holetag {
    left: 44px;
    background-color: #ffd24d;
}

.sp-wagers {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 6px;
    margin: 0.6rem 0 0.25rem 0;
}

.sp-wrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background-color: white;
    cursor: pointer;
}

.sp-wrow.sp-wrow-on {
    padding: 5px 7px;
    border: 2px solid var(--c-primary);
    background-color: #f3f8ff;
}

.sp-chip {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 4px dashed white;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 0.8rem;
    font-weight: 900;
}

.sp-chip-1 { background-color: #888; }
.sp-chip-5 { background-color: #c8102e; }
.sp-chip-10 { background-color: #1f4fd1; }
.sp-chip-25 { background-color: #11873d; }

.sp-wname {
    width: 6rem;
    flex: none;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.1;
}

.sp-wname small {
    display: block;
    color: var(--c-muted);
    font-size: 0.7rem;
    font-weight: normal;
}

.content .sp-input,
.sp-ans {
    flex: 1 1 auto;
    min-width: 0;
    width: 6rem;
    height: 40px;
    margin: 0;
    padding: 0 0.6rem;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    box-sizing: border-box;
    background-color: white;
    font-size: 1.1rem;
    font-weight: bold;
}

.sp-wrow-on .sp-input {
    border-color: var(--c-primary);
}

.sp-ans {
    display: flex;
    align-items: center;
    line-height: 1.15;
}

.sp-ans-ok {
    border-color: var(--c-primary);
    background-color: #e6f0ff;
    color: var(--c-ok);
}

.sp-ans-bad {
    border-color: var(--c-lose);
    background-color: #fde8e8;
    color: var(--c-lose);
    font-size: 0.85rem;
}

.sp-hint-row {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.15rem 0 0.4rem 0;
}

.sp-desk-hint {
    color: var(--c-muted);
    font-size: 0.8rem;
}

.sp-keypad {
    align-self: stretch;
}

.sp-feedback {
    align-self: stretch;
}

/* Pay tables: in Help on phones; always shown on desktop */
.sp-paytable {
    display: none;
}

.sp-pt {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.sp-pt td {
    padding: 3px 0;
    border-bottom: 1px solid #c3d4ec;
}

.sp-pt td:last-child {
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
}

.sp-pt-hd td,
.sp-help-table .sp-pt-hd td {
    padding-top: 0.5rem;
    border-bottom: 2px solid var(--c-info-line);
    color: var(--c-primary-dark);
    font-size: 0.85rem;
    font-weight: 800;
    text-align: left;
}

.sp-pt-note {
    margin: 0.3rem 0 0 0;
    color: var(--c-muted);
    font-size: 0.8rem;
}

/* Phones / touch: no typing hint (the keypad is always there) and the
   hint row collapses; 44px keys so everything fits above the bar */
@media (max-width: 768px), (pointer: coarse) {
    .sp-desk-hint {
        display: none;
    }

    .sp-hint-row {
        margin: 0;
    }

    .sp-screen .numeric-keypad-row button,
    .sp-screen .numeric-keypad-row span {
        height: 44px;
    }
}

@media (min-width: 769px) {
    .sp-card {
        width: 75px;
        height: 105px;
    }

    .sp-dealer {
        width: 120px;
        height: 120px;
    }

    .sp-dealer .sp-hole {
        left: 42px;
        top: 12px;
    }

    .sp-holetag {
        left: 54px;
    }

    /* Under the game: the two tables side by side */
    .sp-paytable {
        display: flex;
        align-self: stretch;
        flex-wrap: wrap;
        column-gap: 1.25rem;
        margin-top: 0.75rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--c-info-line);
        border-radius: 8px;
        background-color: var(--c-info-bg);
    }

    .sp-paytable {
        align-items: flex-start;
    }

    .sp-paytable .sp-pt {
        flex: 1 1 12rem;
        width: auto;
    }

    .sp-paytable .sp-pt-note {
        flex-basis: 100%;
    }
}

/* Wide windows: the pay tables sit beside the game instead. The game
   column moves left by half the table's width (220px + 1.5rem gap) so
   the game and the table are centered together and the table's right
   edge stays on screen (e.g. a 1280px-wide laptop). */
@media (min-width: 1120px) {
    .play-screen.sp-screen {
        left: calc(-1 * (220px + 1.5rem) / 2);
    }

    .sp-paytable {
        position: absolute;
        top: 3.75rem;
        left: 100%;
        display: block;
        width: 220px;
        box-sizing: border-box;
        margin: 0 0 0 1.5rem;
    }

    .sp-paytable .sp-pt {
        width: 100%;
        margin-bottom: 0.25rem;
    }
}

/* Phones: the space under the keypad goes to the felt -- cards at the
   desktop size (75px, the same as Side Wagers), with the dealer and the
   player spread apart across the felt */
@media (max-width: 768px) {
    .sp-felt {
        justify-content: space-around;
    }

    .sp-card {
        width: 75px;
        height: 105px;
    }

    .sp-dealer {
        width: 120px;
        height: 120px;
    }

    .sp-dealer .sp-hole {
        left: 42px;
        top: 12px;
    }

    .sp-holetag {
        left: 54px;
    }
}

/* Side Wager Payouts: the wager name takes the room it needs, so the
   payout box can't cover "Lucky Ladies"; the minimum keeps both rows'
   payout boxes lined up */
.swp-screen .sp-wname {
    width: auto;
    min-width: 6rem;
}

@media (max-width: 768px) {
    .swp-screen .sp-wname {
        min-width: 5.8rem;
    }
}

@media (max-width: 360px) {
    .swp-screen .sp-wname {
        min-width: 5.2rem;
    }
}

/* Short phones (iPhone SE and similar): smaller cards, so the wager
   box above the keypad keeps room for its rows */
@media (max-width: 768px) and (max-height: 620px) {
    .sp-card {
        width: 48px;
        height: 67px;
    }

    .sp-dealer {
        width: 80px;
        height: 78px;
    }

    .sp-dealer .sp-hole {
        left: 26px;
        top: 7px;
    }

    .sp-holetag {
        left: 30px;
    }

    .sp-felt {
        padding: 0.35rem 0.6rem 0.95rem 0.6rem;
    }

    .sp-cap {
        margin-bottom: 0.15rem;
    }

}

/* Side Wager Payouts: Lose button at the end of each wager row */
.content .sp-wrow .sp-lose {
    flex: none;
    width: 3.4rem;
    height: 44px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--c-lose);
    border-radius: 6px;
    background-color: white;
    color: var(--c-lose);
    font-size: 0.85rem;
    font-weight: 800;
}

.content .sp-wrow .sp-lose.sp-lose-on {
    background-color: var(--c-lose);
    color: white;
}

.content .sp-wrow .sp-lose:disabled {
    border-color: #ccc;
    background-color: #f4f4f4;
    color: #aaa;
}

/* The payout box of a wager marked Lose */
.content .sp-wrow .sp-input.sp-input-lose {
    border-color: var(--c-lose);
    background-color: #fff5f5;
    color: var(--c-lose);
    letter-spacing: 0.05em;
}

/* After Submit the box grows to fit (a wrong answer can run to two or
   three lines in the narrower box); the keypad is gone by then */
.content .sp-wrow .sp-ans {
    height: auto;
    min-height: 40px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.sp-ans-bad {
    white-space: normal;
}

/* Bottom bar: "End Session" shortens to "End" on phones so the text
   fits on the button (Shared/GameBar.razor renders both) */
.game-bar-end-short {
    display: none;
}

@media (max-width: 768px) {
    .game-bar-end-long {
        display: none;
    }

    .game-bar-end-short {
        display: inline;
    }
}

/* ------------------------------------------------------------------
   Three Card Prime - Payouts (tp-): reuses the Side Wager Payouts rows
   (sp-*) with five wagers; dealer and player hands side by side.
   ------------------------------------------------------------------ */
.sp-chip-100 { background-color: #222; }

/* Win / Lose modes (CallRow): one chip color, "$" only -- no amount,
   since nothing is paid in these modes */
.sp-wrow .sp-chip.cr-chip {
    background-color: #c8102e;
    font-size: 1rem;
}

/* Pai Gow Payouts: "Emperor's Treasure" on two lines (name, then
   Treasure), so the full name fits beside the payout box */
.sp-screen .sp-wname.pp-wname-2 {
    white-space: normal;
}

.tp-felt {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem 0.5rem 0.75rem;
}

.tp-hand {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.tp-hand-player {
    margin-left: auto;
}

/* The caption wraps after "DEALER ·" when space is short (narrow
   phones, long hand names); the hand name itself stays on one line */
.tp-hand .sp-cap {
    text-align: center;
}

.tp-hname {
    white-space: nowrap;
}

/* Hand names showing (Call & Pay): both captions get two lines of room,
   text sitting at the bottom, so the two hands' cards stay level whether
   or not a name wraps */
.tp-hand .sp-cap:has(.tp-hname) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-end;
    column-gap: 0.3em;
    min-height: 2.5em;
}

.tp-cards {
    display: flex;
}

/* Overlapped 25%, every card's corner still showing */
.tp-card {
    width: 56px;
    height: 78px;
    border-radius: 4px;
    background-color: white;
    box-shadow: -1px 0 2px rgba(0, 0, 0, 0.3);
}

.tp-card + .tp-card {
    margin-left: -14px;
}

.tp-qtag {
    margin-top: 0.3rem;
    padding: 0 0.35rem;
    border-radius: 4px;
    background-color: white;
    color: #222;
    font-size: 0.62rem;
    font-weight: 800;
    white-space: nowrap;
}

.tp-qtag.tp-qtag-no {
    background-color: #ffd24d;
}

/* Push button (Play and Ante): gold, like Push elsewhere */
.content .sp-wrow .sp-lose.tp-push {
    border-color: #c9a000;
    color: #7a5d00;
}

.content .sp-wrow .sp-lose.tp-push.tp-push-on {
    background-color: var(--c-push);
    color: #222;
}

.content .sp-wrow .sp-lose.tp-push:disabled {
    border-color: #ccc;
    background-color: #f4f4f4;
    color: #aaa;
}

.content .sp-wrow .sp-input.tp-input-push {
    border-color: #c9a000;
    background-color: #fff8dc;
    color: #7a5d00;
    letter-spacing: 0.05em;
}

@media (min-width: 769px) {
    .tp-card {
        width: 75px;
        height: 105px;
    }

    .tp-card + .tp-card {
        margin-left: -19px;
    }
}

/* Pay table line that spans both columns (normal weight, wraps) */
.sp-pt td.tp-pt-wide {
    text-align: left;
    font-weight: normal;
    white-space: normal;
}

/* $100+ chips: smaller text so "$300" fits inside the chip */
.sp-chip.sp-chip-100 {
    font-size: 0.66rem;
    letter-spacing: -0.02em;
}


/* ------------------------------------------------------------------
   Pai Gow - Payouts (pp-): dealer and player rows, each set into Low
   (2 cards) and High (5 cards, overlapped) with the hand names; the
   wager rows reuse Side Wager Payouts (sp-*).
   ------------------------------------------------------------------ */
.pp-felt {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem 0.5rem 0.6rem;
}

.pp-row {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}

.pp-name {
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 0.2rem;
    width: 3.6rem;
    flex: none;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.pp-name .tp-qtag {
    margin: 0;
    font-size: 0.5rem;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1.15;
    padding: 1px 3px;
}

.pp-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Hand name over each group; wraps to a second line if long */
.pp-cap {
    margin-bottom: 2px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.15;
    opacity: 0.9;
    max-width: 100%;
}

.pp-cards {
    display: flex;
}

.pp-card {
    width: 44px;
    height: 62px;
    border-radius: 3px;
    background-color: white;
    box-shadow: -1px 0 2px rgba(0, 0, 0, 0.3);
}

.pp-card + .pp-card {
    margin-left: -14px;
}

/* The caption may not widen the group past its cards */
.pp-group .pp-cap {
    width: 0;
    min-width: 100%;
}

@media (max-width: 360px) {
    .pp-card {
        width: 38px;
        height: 53px;
    }

    .pp-card + .pp-card {
        margin-left: -12px;
    }

    .pp-name {
        width: 3rem;
        font-size: 0.65rem;
    }
}

@media (min-width: 769px) {
    .pp-card {
        width: 62px;
        height: 87px;
    }

    .pp-card + .pp-card {
        margin-left: -18px;
    }

    .pp-cap {
        font-size: 0.72rem;
    }

    .pp-name {
        width: 4.5rem;
        font-size: 0.8rem;
    }
}

/* ------------------------------------------------------------------
   Payout modes (Side Wager, Three Card Prime, Pai Gow, Hold'em): one
   standard wager row on phones, and the wager box. The box (.pw-box)
   is sized by dstFitWagerBox (index.html) to the space between the
   cards and the keypad; when the rows don't all fit it scrolls, with a
   fade on the side that has more rows. After Submit (no keypad) it
   shows every row.
   ------------------------------------------------------------------ */
.pw-wrap {
    position: relative;
    align-self: stretch;
    margin: 0.5rem 0 0.25rem 0;
}

.pw-box {
    position: relative;
}

.pw-box .sp-wagers {
    margin: 0;
}

/* Phones, and desktop while the number pad is open (all sizes, since
   dstFitWagerBox only sets a height when the pad is showing) */
.pw-box.pw-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.pw-wrap.pw-more-below::after,
.pw-wrap.pw-more-above::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 22px;
    pointer-events: none;
}

.pw-wrap.pw-more-below::after {
    bottom: 0;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
}

.pw-wrap.pw-more-above::before {
    top: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
}

@media (max-width: 768px) {
    /* Standard row: 48px -- 36px chip, name with the wager under it,
       40px payout box, then Push / Lose */
    .sp-screen .sp-wagers {
        gap: 4px;
    }

    .sp-screen .sp-wrow {
        gap: 6px;
        padding: 3px 6px;
    }

    .sp-screen .sp-wrow.sp-wrow-on {
        padding: 2px 5px;
    }

    .sp-screen .sp-chip {
        width: 36px;
        height: 36px;
        border-width: 3px;
        font-size: 0.7rem;
    }

    .sp-screen .sp-chip.sp-chip-100 {
        font-size: 0.56rem;
    }

    .sp-screen .sp-wname {
        width: 5.8rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .sp-screen .sp-wname small {
        font-size: 0.68rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .content .sp-screen .sp-wrow .sp-input,
    .content .sp-screen .sp-wrow .sp-ans {
        height: 40px;
        min-height: 40px;
        padding: 0 0.5rem;
        font-size: 1.05rem;
    }

    .content .sp-screen .sp-wrow .sp-ans {
        height: auto;
    }

    .sp-screen .sp-ans-bad {
        font-size: 0.78rem;
    }

    .content .sp-screen .sp-wrow .sp-lose {
        width: 3rem;
        height: 40px;
        font-size: 0.75rem;
    }

    .sp-screen .sp-hint-row {
        margin: 0;
    }

    .sp-screen .numeric-keypad {
        margin-top: 0.3rem;
    }
}

/* Narrow phones (iPhone SE width): a little less room for the name and
   buttons, so the payout box keeps its width */
@media (max-width: 360px) {
    .sp-screen .sp-wname {
        width: 4.6rem;
        font-size: 0.76rem;
    }

    .content .sp-screen .sp-wrow .sp-lose {
        width: 2.6rem;
        font-size: 0.68rem;
    }

    .sp-screen .sp-wrow {
        gap: 4px;
    }

    .tp-card {
        width: 48px;
        height: 67px;
    }

    .tp-card + .tp-card {
        margin-left: -12px;
    }

    .pp-card {
        width: 38px;
        height: 53px;
    }

    .pp-card + .pp-card {
        margin-left: -12px;
    }
}

/* ------------------------------------------------------------------
   Hold'em - Payouts (hp-): the board on top (dealer's unused cards
   dimmed, not dropped), then dealer and player hole cards side by
   side. Card width: 52px on phones, 48px on narrow ones, 66px on
   wide screens.
   ------------------------------------------------------------------ */
.felt.hp-felt {
    --hpw: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px 10px 10px;
}

@media (max-width: 374px) {
    .felt.hp-felt {
        --hpw: 48px;
    }
}

@media (min-width: 769px) {
    .felt.hp-felt {
        --hpw: 66px;
    }
}

.hp-pair {
    align-self: stretch;
    display: flex;
    justify-content: space-around;
}

.hp-hand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.hp-hand .cr-cap {
    white-space: nowrap;
}

.hp-cards {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.hp-card {
    width: var(--hpw);
    height: calc(var(--hpw) * 1.4);
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.hp-card.hp-unused {
    filter: brightness(0.5);
}

/* Board caption (and its tap prompt): tighter spacing so it stays on
   one line on narrow phones */
.hp-board-cap,
.hp-board-cap .pp-alt-b {
    letter-spacing: 0.04em;
}

/* Tap a hand for its rank: outline, and a bubble that opens upward over
   the board, above the tap-anywhere-to-close backdrop */
.hp-hand.hp-tap {
    position: relative;
    padding: 2px 4px 4px 4px;
    border-radius: 8px;
    cursor: pointer;
}

.hp-hand.hp-tap-on {
    background-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.hp-bub {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 1001;
    padding: 7px 12px;
    border-radius: 10px;
    background-color: white;
    color: #111;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    cursor: default;
}

.hp-bub .tp-qtag {
    display: inline-block;
    margin: 3px 0 0 0;
}

.hp-bub::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-top-color: white;
}

/* After Submit: the rank under the caption */
.hp-rank {
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.hp-felt .tp-qtag {
    margin: 0 0 0 0.3rem;
    font-size: 0.58rem;
    letter-spacing: 0.03em;
    vertical-align: 1px;
}

/* ------------------------------------------------------------------
   End-of-session summary (Shared/SessionSummary): friendly headline,
   score, what went well, what's worth another look and the latest
   misses. Replaces the old gray box.
   ------------------------------------------------------------------ */
.session-summary.ss {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border: 0;
    background: none;
}

.ss-hero {
    background-color: var(--c-info-bg);
    border: 1px solid var(--c-info-line);
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
}

.ss-msg {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.ss-big {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--c-ok);
    line-height: 1.1;
}

.ss-big small {
    font-size: 1.05rem;
    font-weight: 600;
    color: #223;
}

.ss-line {
    font-size: 0.9rem;
    color: #334;
    margin-top: 0.35rem;
}

.ss-up {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 3px 10px;
    border-radius: 99px;
    background-color: #e3f4ea;
    color: #1e8a4c;
    font-size: 0.82rem;
    font-weight: 700;
}

.ss-sec {
    margin-top: 0.9rem;
}

.ss-sec h4 {
    margin: 0 0 0.4rem 0;
    font-size: 0.9rem;
    color: #223;
}

.ss-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ss-pill {
    border-radius: 99px;
    padding: 4px 12px;
    font-size: 0.88rem;
    font-weight: 600;
}

.ss-good {
    background-color: #e3f4ea;
    color: #1e8a4c;
}

.ss-look {
    background-color: var(--c-gold-bg);
    border: 1px solid var(--c-gold-line);
    color: #6a5200;
}

.ss-miss {
    border: 1px solid var(--c-line);
    border-radius: 10px;
    padding: 7px 10px;
    margin-bottom: 6px;
    font-size: 0.86rem;
}

.ss-miss b {
    color: #223;
}

.ss-ans {
    color: var(--c-muted);
    margin-top: 2px;
}

.ss-btns {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
}

.content .ss-btns button {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0.55rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
}

.content .ss-btns .ss-again {
    background-color: var(--c-primary);
    border: 1px solid var(--c-primary-dark);
    color: white;
}

.content .ss-btns .ss-done {
    background-color: white;
    border: 1px solid var(--c-border);
    color: var(--c-text);
}

/* Wide windows, payout modes: the game column is shifted left to make
   room for the pay tables beside it; the summary follows the column so
   the pay tables don't sit on top of it */
@media (min-width: 1120px) {
    .play-screen.sp-screen ~ .session-summary.ss {
        position: relative;
        left: calc(-1 * (220px + 1.5rem) / 2);
    }
}

/* ------------------------------------------------------------------
   "Call it" modes (Side Wagers, Three Card Prime, Pai Gow Settling
   Bets, Hold'em Settle the Bets): the payout-mode rows (Shared/CallRow)
   with a Call button that pops Win / Lose / Push out to its left.
   ------------------------------------------------------------------ */
.cr-row {
    position: relative;
    cursor: default;
}

.content .cr-btn {
    flex: none;
    margin: 0 0 0 auto;
    width: 6.4rem;
    height: 40px;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--c-primary-dark);
    border-radius: 8px;
    background-color: white;
    color: var(--c-primary-dark);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.content .cr-btn.cr-btn-win {
    background-color: var(--c-primary);
    color: white;
}

.content .cr-btn.cr-btn-lose {
    background-color: var(--c-lose);
    border-color: var(--c-lose-dark);
    color: white;
}

.content .cr-btn.cr-btn-foul {
    background-color: var(--c-foul);
    border-color: #b86400;
    color: white;
}

.content .cr-btn.cr-btn-push {
    background-color: var(--c-push);
    border-color: #b89f00;
    color: #3a3000;
}

.content .cr-btn.cr-btn-notfoul {
    background-color: #555;
    border-color: #333;
    color: white;
}

.cr-row-win { background-color: #f1f6ff; }
.cr-row-lose { background-color: #fdf1f1; }
.cr-row-foul { background-color: #fff3e6; }
.cr-row-push { background-color: #fffbe3; }

/* The choices, out to the left of the Call button */
.cr-pop {
    position: absolute;
    top: 50%;
    right: calc(6.4rem + 14px);
    z-index: 1001;
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background-color: var(--c-info-bg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transform: translateY(-50%);
}

.content .cr-choice {
    width: 3.4rem;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0 4px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background-color: white;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.content .cr-choice-win { color: var(--c-primary); border-color: var(--c-primary); }
.content .cr-choice-lose { color: var(--c-lose); border-color: var(--c-lose); }
.content .cr-choice-foul { color: #b86400; border-color: var(--c-foul); }
.content .cr-choice-push { color: #6a5200; border-color: #c9ae00; }
.content .cr-choice-notfoul { width: 4.6rem; color: #333; border-color: #555; }

.content .cr-choice-win.cr-choice-on { background-color: var(--c-primary); color: white; }
.content .cr-choice-lose.cr-choice-on { background-color: var(--c-lose); color: white; }
.content .cr-choice-foul.cr-choice-on { background-color: var(--c-foul); color: white; }
.content .cr-choice-push.cr-choice-on { background-color: var(--c-push); color: #3a3000; }
.content .cr-choice-notfoul.cr-choice-on { background-color: #555; color: white; }

.cr-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.cr-row .cr-ans {
    flex: 0 1 auto;
    width: auto;
    min-width: 6.4rem;
    margin-left: auto;
    font-weight: 700;
}

/* Call-it screens use the payout rows but have no pay table beside
   them on wide windows, so they stay centered */
@media (min-width: 1120px) {
    .play-screen.sp-screen.cr-screen,
    .play-screen.sp-screen.cr-screen ~ .session-summary.ss {
        left: 0;
    }
}

/* Three Card Prime: Ante Bonus toggle in the Ante row */
.content .cr-bonus {
    flex: none;
    height: 40px;
    min-height: 0;
    margin: 0 0 0 auto;
    padding: 0 8px;
    border: 1px solid var(--c-primary);
    border-radius: 8px;
    background-color: white;
    color: var(--c-primary);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.content .cr-bonus.cr-bonus-on {
    background-color: var(--c-primary);
    color: white;
}

/* With a toggle (or cards) before it, the Call button sits right after */
.cr-row .cr-bonus + .cr-btn,
.cr-row .cr-bonus + .cr-pop + .cr-btn {
    margin-left: 6px;
}

.cr-ans.cr-ans-plain {
    border-color: var(--c-border);
    background-color: #f2f2f2;
    color: var(--c-muted);
    font-weight: 600;
}

/* Pai Gow Settling Bets: the Ace-high Pai Gow reminder under the rows */
.cr-note {
    align-self: stretch;
    margin: 0.35rem 0 0 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    color: #223;
}

/* Call rows: the name takes the room it needs (no fixed column), so
   longer names like "Player vs dealer" stay on one line */
.cr-row .sp-wname,
.sp-screen .cr-row .sp-wname {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

/* One-hand felt (Side Wagers, Hold'em Settle the Bets), laid out from
   the dealer's side of the table: player on top, dealer at the bottom */
.felt.cr-felt {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 12px 10px;
}

.cr-cap {
    align-self: stretch;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.85);
}

.cr-lane {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.cr-lane img {
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.cr-big img { width: 75px; height: 105px; }
.cr-mid img { width: 66px; height: 92px; }

/* Room under the board for the dropped (unused) cards */
.cr-board { gap: 4px; padding-bottom: 8px; }
.cr-board img { width: 58px; height: 81px; }

.cr-sep {
    align-self: stretch;
    border-top: 1px dashed rgba(255, 255, 255, 0.35);
}

/* Hold'em: the dealer's 2 unused cards dimmed and dropped */
.cr-lane img.cr-unused {
    filter: brightness(0.5);
    transform: translateY(6px);
}

/* Hold'em Identify the Hands: larger cards (board up to 66px, fitting 5
   across any phone; dealer 80px; desktop 75 / 90), tappable to mark the
   2 the dealer doesn't use; after a miss, a red outline on the cards that
   should have played */
.id-felt .cr-board img {
    width: min(66px, calc((100vw - 74px) / 5));
    height: auto;
    aspect-ratio: 5 / 7;
}

.id-felt .cr-mid img {
    width: 80px;
    height: 112px;
}

@media (min-width: 769px) {
    .id-felt .cr-board img {
        width: 75px;
    }

    .id-felt .cr-mid img {
        width: 90px;
        height: 126px;
    }
}

.felt.id-felt {
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 16px;
}

.id-felt img.id-tap {
    cursor: pointer;
}

.id-felt img.id-wrong {
    outline: 3px solid #c80000;
    outline-offset: 1px;
}

.id-caption {
    margin: 0.5rem 0 0 0;
    text-align: center;
    color: #555;
    font-style: italic;
    font-size: 0.95rem;
}

/* Pai Gow Settling Bets felt: player on top, dealer at the bottom, Low
   beside High. Card width fits Low (2 cards) + High (5 cards) at 25%
   overlap across the felt: 56px on most phones, smaller on narrow ones,
   75px (the desktop game card size) on wide screens. */
.felt.pg-felt {
    --pgw: clamp(40px, calc((100vw - 64px) / 5.75), 56px);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 10px 12px 10px;
}

@media (min-width: 769px) {
    .felt.pg-felt {
        --pgw: 75px;
    }
}

.pg-felt .cr-sep {
    margin: 6px 0 4px 0;
}

.pg-hand {
    margin-top: 2px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
}

/* Desktop: Low toward the left edge of the felt, High toward the right,
   for a clear gap between them */
@media (min-width: 769px) {
    .pg-hand {
        justify-content: space-between;
        padding: 0 14px;
    }
}

.pg-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

/* LOW / HIGH (plus the hand name after Submit); may wrap, never widens
   the group past its cards */
.pg-sub {
    width: 0;
    min-width: 100%;
    margin-bottom: 2px;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.15;
    opacity: 0.85;
}

.pg-cards {
    display: flex;
}

.pg-cards img {
    width: var(--pgw);
    height: calc(var(--pgw) * 1.4);
    border-radius: 4px;
    background-color: white;
    box-shadow: -1px 0 2px rgba(0, 0, 0, 0.35);
}

.pg-cards img + img {
    margin-left: calc(var(--pgw) * -0.25);
}

.pp-cap-tag {
    display: inline-block;
    margin: 0 0 0 6px;
    letter-spacing: 0.03em;
    vertical-align: 1px;
}

/* Caption fades between the name (5 s) and the tap prompt (5 s) until
   the first tap this session; both stacked in one grid cell */
.cr-cap.pp-alt {
    display: grid;
}

.pp-alt > span {
    grid-area: 1 / 1;
}

.pp-alt-a { animation: pp-alt-a 10s ease-in-out infinite; }
.pp-alt-b {
    color: #ffe07a;
    letter-spacing: 0.06em;
    opacity: 0;
    animation: pp-alt-b 10s ease-in-out infinite;
}

@keyframes pp-alt-a {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes pp-alt-b {
    0%, 45% { opacity: 0; }
    50%, 95% { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-alt-a { animation: none; }
    .pp-alt-b { animation: none; display: none; }
}

/* Short how-to line under the rows (first round) */
.cr-howto {
    align-self: stretch;
    margin: 0.4rem 0 0 0;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background-color: var(--c-info-bg);
    color: #223;
    font-size: 0.82rem;
}

/* ------------------------------------------------------------------
   Call / Pay modes (Payouts setting on the start screen): Pay on the
   Ante, a row's payout box, the number pad under it, the wagers-left
   count on the main button and Cancel in place of End Session.
   ------------------------------------------------------------------ */
.content .cr-btn.cr-btn-pay {
    background-color: var(--c-primary);
    color: white;
}

.cr-row-pay { background-color: #f1f6ff; }

.content .cr-choice-pay { color: var(--c-primary); border-color: var(--c-primary); }
.content .cr-choice-pay.cr-choice-on { background-color: var(--c-primary); color: white; }

/* The open payout box: one row, outlined, with a large amount field */
.uc-boxrow {
    box-shadow: inset 0 0 0 2px var(--c-primary);
    background-color: #eef4fd;
}

.uc-amt {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 48px;
    margin: 0 0 0 0.5rem;
    padding: 0 0.6rem;
    border: 2px solid var(--c-primary);
    border-radius: 8px;
    background-color: white;
    cursor: text;
}

.uc-dollar {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
}

.content .uc-amt input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 0 0 2px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
}

.content .uc-amt input::placeholder {
    font-size: 1.1rem;
    font-weight: 400;
    color: #9aa;
}

/* Hold'em: the backspace key sits inside the box, at its right edge
   (the pad's bottom row is  .  0  Enter) */
.content .uc-amt .uc-bs {
    flex: 0 0 auto;
    width: 44px;
    height: 36px;
    margin: 0 -0.35rem 0 0.25rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background-color: #e8eef8;
    color: var(--c-primary);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

/* Number pad under the open box (shown on computers too) */
.uc-keypad {
    margin-top: 0.25rem;
}

.content .numeric-keypad-enter:disabled {
    opacity: 0.45;
}


/* Pai Gow: the LOW / HIGH captions hide while a box is open (the
   cards, the box and the pad fit without scrolling) */
.pp-screen.uc-open .pg-sub {
    display: none;
}

/* The smallest phones: the title row hides while a box is open, so the
   cards, the box and the pad fit */
@media (max-width: 768px) and (max-height: 600px) {
    .hp-screen.uc-open .game-status,
    .pp-screen.uc-open .game-status {
        display: none;
    }

    .hp-screen.uc-open .numeric-keypad-row button,
    .pp-screen.uc-open .numeric-keypad-row button {
        height: 36px;
        min-height: 36px;
    }
}

/* Main button while wagers are left: "3 wagers left", "3 left" on the
   narrowest phones */
.gb-left-short {
    display: none;
}

@media (max-width: 379px) {
    .gb-left-long {
        display: none;
    }

    .gb-left-short {
        display: inline;
    }
}

/* End Session reading Cancel (a payout box is open) */
.content .game-bar .game-bar-end.game-bar-cancel {
    border: 2px solid #e0a0a0;
    color: #c80000;
}

/* Start screen: Call Only / Call & Pay as two green felt tiles
   (Shared/PayoutChoice). The chosen one is lit felt with a gold edge
   and a gold check; the other is a plain grey tile. */
.pc-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Settings under the tiles (Pai Gow: Joker / Foul Frequency) */
.pc-choice + .mode-options {
    margin-top: 1rem;
}

.content .pc-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    margin: 0;
    padding: 0.7rem 0.6rem;
    border: 2px solid #cfd5dd;
    border-radius: 14px;
    background: #f4f5f7;
    color: #555;
    text-align: center;
    cursor: pointer;
}

/* Not chosen: plain grey tile, grey chips */
.pc-tile:not(.pc-on) .pc-icon {
    filter: grayscale(1);
    opacity: 0.55;
}

.pc-tile:not(.pc-on) .pc-desc {
    color: #777;
}

/* Chosen: lit felt, gold edge, gold check badge */
.content .pc-tile.pc-on {
    border: 3px solid #f2d27a;
    background: radial-gradient(ellipse at center, #2a7f53 0%, #1d6240 100%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    color: white;
}

.pc-tile.pc-on::after {
    content: "\2713";
    position: absolute;
    top: -9px;
    right: -9px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 2px solid white;
    border-radius: 50%;
    background-color: #f2d27a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    color: #1d6240;
    font-size: 15px;
    font-weight: 900;
}

.pc-icon {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
}

.pc-icon-two {
    width: 64px;
}

.pc-chip {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
}

.pc-icon-two .pc-chip + .pc-chip {
    filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.3));
}

.pc-title {
    margin: 0.35rem 0 0.15rem 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.pc-desc {
    min-height: 2.6em;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.3;
}

.pc-tile.pc-on .pc-desc {
    color: #d7eadf;
}

/* TileChoice icons: mini cards and chips side by side, 40px tall */
.pc-icon.tc-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: auto;
}

.tc-card {
    width: 28px;
    height: 40px;
}

.tc-chip {
    width: 40px;
    height: 40px;
}

/* ------------------------------------------------------------------
   Portrait only: a phone held sideways (short landscape screen, touch
   only) gets a full-screen "Turn your phone upright" message over the
   page (index.html, #rotate-msg). Tablets and computers are never
   covered: their landscape screens are taller than 500px.
   ------------------------------------------------------------------ */
#rotate-msg {
    display: none;
}

@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
    #rotate-msg {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 1rem;
        background: radial-gradient(ellipse at center, #2a7f53 0%, #1d6240 100%);
        color: white;
        text-align: center;
    }

    #rotate-msg svg {
        color: #f2d27a;
    }

    #rotate-msg p {
        margin: 0.4rem 0 0 0;
        font-size: 1.3rem;
        font-weight: 800;
    }

    #rotate-msg span {
        color: #d7eadf;
        font-size: 0.95rem;
    }

    /* Nothing behind it scrolls while it's up */
    html,
    body {
        overflow: hidden;
    }
}

/* ------------------------------------------------------------------
   Blackjack Payouts on short phones (e.g. 320x568): smaller cards and
   tighter spacing so the whole keypad clears the Help / Submit / End bar
   ------------------------------------------------------------------ */
@media (max-width: 768px) and (max-height: 600px) {
    .po-screen .po-card {
        width: 56px;
        height: 78px;
    }

    .po-screen .po-wager {
        margin: 0.15rem 0;
    }

    .keypad-screen.po-screen > .keypad-answer {
        margin: 0.25rem 0 0.35rem 0 !important;
    }

    .po-screen .po-display {
        min-height: 3rem;
        padding: 0.2rem 0.6rem;
    }

    .content .po-screen .numeric-keypad-row button {
        height: 40px;
        min-height: 40px;
    }
}

/* ------------------------------------------------------------------
   Blackjack Flash Cards on short phones (e.g. 320x568): smaller cards
   and tighter spacing so the whole keypad clears the Help / Next / End bar
   ------------------------------------------------------------------ */
@media (max-width: 768px) and (max-height: 600px) {
    .fc-screen .card-row.fc-fan {
        --fc-w: min(66px, calc((var(--col-w) - 2rem) / (1 + 0.7 * (var(--n, 2) - 1))));
        margin: 0.25rem 0 0.1rem 0 !important;
    }

    .fc-screen .felt .table-rule {
        margin: 0.1rem 0;
        font-size: 0.8rem;
    }

    .fc-screen .prompt-line {
        margin: 0.2rem 0;
        font-size: 1.05rem;
    }

    .fc-screen .fc-msg {
        margin: 0.1rem 0;
    }

    .keypad-screen.fc-screen > .keypad-answer {
        margin: 0.2rem 0 0.3rem 0 !important;
    }

    .content .fc-screen .numeric-keypad-row button {
        height: 40px;
        min-height: 40px;
    }
}

/* ------------------------------------------------------------------
   Tap-to-zoom (Shared/HandZoom): a hand with small cards can be tapped
   to see it enlarged. .hz-tap marks the hand (🔍 beside its label),
   .hz-on outlines it in gold while its pop-up is open.
   ------------------------------------------------------------------ */
.hz-tap {
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.hz-tap.hz-on {
    outline: 3px solid #f2d27a;
    outline-offset: 2px;
}

.hz-mag::after {
    content: "\1F50D";
    margin-left: 0.3rem;
    font-size: 1.05em;
}

.hz-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}

.hz-panel {
    padding: 14px 14px 12px 14px;
    border: 3px solid #f2d27a;
    border-radius: 16px;
    background: radial-gradient(ellipse at center, #2a7f53 0%, #1d6240 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    color: white;
    text-align: center;
}

.hz-title {
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hz-cards {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* About twice the felt size; narrower on small phones so 3 cards fit */
.hz-card {
    width: min(100px, calc((100vw - 80px) / 3));
    aspect-ratio: 5 / 7;
    border-radius: 7px;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hz-hint {
    margin-top: 10px;
    color: #d7eadf;
    font-size: 0.8rem;
}

/* Pai Gow zoom: Low hand's 2 cards on top, High hand's 5 below,
   overlapped 25% (every corner showing), each row with its caption */
.hz-pg {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hz-pg-sub {
    margin: 2px 0 4px 0;
    color: #f2d27a;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.hz-pg-cards + .hz-pg-sub {
    margin-top: 10px;
}

.hz-pg-cards {
    display: flex;
    justify-content: center;
}

.hz-pg-card {
    width: min(84px, calc((100vw - 64px) / 4));
    aspect-ratio: 5 / 7;
    border-radius: 6px;
    background-color: white;
    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.35);
}

.hz-pg-card + .hz-pg-card {
    margin-left: calc(min(84px, calc((100vw - 64px) / 4)) * -0.25);
}

.hz-pg-tag {
    margin-top: 8px;
}

/* ------------------------------------------------------------------
   Side Wagers dealer peek (house procedure): with a Queen of Hearts
   pair showing and an Ace or 10-value card up, the hole card stays face
   down (a plain card back) until Call Supervisor is tapped
   ------------------------------------------------------------------ */
.sp-card.sw-back {
    border: 3px solid white;
    border-radius: 6px;
    background-color: #1f4fa3;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 9px),
                      repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 9px);
    box-sizing: border-box;
}

.sw-peek-btn {
    margin-top: 1.25rem;
    padding: 0.35rem 0.7rem;
    border: 2px solid #f2d27a;
    border-radius: 8px;
    background-color: #f2d27a;
    color: #3b2a00;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.sw-peek-ok {
    margin-top: 1.25rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.25);
    color: #c8f0d4;
    font-size: 0.8rem;
    font-weight: 800;
}

/* Incorrect results: the detail ("1 of 3 wrong") on its own line under
   "INCORRECT — Call the floor" */
.result-line .result-detail {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.92em;
    font-weight: 600;
}

/* ------------------------------------------------------------------
   Feedback card (Shared/ResultBreakdown): the result as a solid colored
   bar -- blue CORRECT, red INCORRECT, white text -- joined to the top of
   the wager box; the whole card has a soft drop shadow
   ------------------------------------------------------------------ */
.bd-card {
    align-self: stretch;
    margin-top: 0.6rem;     /* a little space from the felt or wager rows above */
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.bd-card > .breakdown-result {
    margin: 0;
    padding: 0.55rem 0.75rem;
    border-radius: 8px 8px 0 0;
    color: white;
    font-size: 1.05rem;
    text-align: left;
}

.bd-card-ok > .breakdown-result {
    background-color: var(--c-ok);
}

.bd-card-bad > .breakdown-result {
    background-color: var(--c-lose);
}

.bd-card > .breakdown-result .result-detail {
    color: white;
    opacity: 0.92;
}

/* No wager box under it: the bar is the whole card */
.bd-card > .breakdown-result:last-child {
    border-radius: 8px;
}

.bd-card > .breakdown {
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* ------------------------------------------------------------------
   Home: the Dealer School course (numbered, in teaching order) and
   Beyond Dealer School
   ------------------------------------------------------------------ */
.home-sub {
    margin: -0.35rem 0 0.6rem 0;
    color: #555;
    font-size: 0.95rem;
}

.home-num,
.mode-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    background-color: var(--c-felt);
    color: white;
    font-size: 0.8rem;
    font-weight: 800;
    vertical-align: 0.1em;
}

.pc-order-note {
    margin: 0.4rem 0 0 0;
    color: #5b6470;
    font-size: 0.8rem;
}

.mode-choice-note {
    margin-left: 0.35rem;
    color: #666;
    font-size: 0.85rem;
}

/* ------------------------------------------------------------------
   Tutorials (Pages/BlackjackTutorial, ThreeCardTutorial): the entry card on the game's
   start screen, then short illustrated steps on felt with Back / Next
   in the pinned bottom bar
   ------------------------------------------------------------------ */
.content a.tu-entry {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 600px;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem;
    border: 2px solid var(--c-gold-line, #e2c46a);
    border-radius: 12px;
    background: radial-gradient(ellipse at center, #127a45 0%, var(--c-felt) 70%);
    color: white;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.tu-entry-cards {
    display: flex;
    flex: 0 0 auto;
}

.tu-entry-cards img {
    width: 40px;
    height: 56px;
    border-radius: 4px;
    background-color: white;
    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.35);
}

.tu-entry-cards img + img {
    margin-left: -12px;
}

.tu-entry-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.tu-entry-text b {
    font-size: 1.05rem;
}

.tu-entry-text span {
    color: #d7eadf;
    font-size: 0.85rem;
}

.tu-entry-btn {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background-color: #f2d27a;
    color: #3b2a00;
    font-size: 0.9rem;
    font-weight: 800;
}

.tu-screen {
    align-items: stretch;
    text-align: left;
}

.tu-screen p {
    margin: 0.35rem 0;
    line-height: 1.4;
}

.tu-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.tu-head span,
.tu-muted {
    color: #5b6470;
    font-size: 0.8rem;
    font-weight: 600;
}

.tu-dots {
    display: flex;
    gap: 5px;
    margin: 0.3rem 0 0.5rem 0;
}

.tu-dots i {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background-color: #dfe3e8;
}

.tu-dots i.tu-on {
    background-color: var(--c-primary);
}

.tu-dots i.tu-done {
    background-color: #8fb6ea;
}

.tu-title {
    margin: 0.25rem 0 0.25rem 0;
    font-size: 1.2rem;
}

.felt.tu-felt {
    margin: 0.5rem 0;
    padding: 0.6rem;
    border-radius: 12px;
    background: radial-gradient(ellipse at center, #127a45 0%, var(--c-felt) 70%);
    text-align: center;
}

.tu-cap {
    margin-bottom: 0.3rem;
    color: #d7eadf;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* Tutorial cards: large, with the top two-thirds in view and a soft
   fade at the cut, so the corner rank and suit read easily on a phone.
   --cw sets the card width; tu-sm is the smaller size for two hands
   side by side. */
.tu-cards {
    --cw: 84px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: calc(var(--cw) * 1.4 * 0.67);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 78%, transparent);
    mask-image: linear-gradient(#000 78%, transparent);
}

.tu-cards img {
    flex: none;
    width: var(--cw);
    height: calc(var(--cw) * 1.4);
    border-radius: 5px;
    background-color: white;
    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.35);
}

.tu-cards img + img {
    margin-left: calc(var(--cw) * -0.22);
}

.tu-cards.tu-sm {
    --cw: 62px;
}

.tu-tot {
    margin-top: 0.35rem;
    font-size: 1rem;
    font-weight: 800;
}

.tu-tot small {
    display: block;
    color: #d7eadf;
    font-size: 0.75rem;
    font-weight: 600;
}

.tu-gold,
.tu-rule {
    color: #f2d27a;
}

.tu-rule {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.tu-hero {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 0.25rem 0;
}

.tu-hero img {
    width: 92px;
    height: 129px;
    border-radius: 6px;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
    transform: rotate(-6deg);
}

.tu-hero img + img {
    margin-left: -22px;
    transform: rotate(8deg);
}

/* Three-card fan: left tilts left, middle straight and raised, right tilts right */
.tu-hero3 {
    margin-bottom: 0.75rem;
}

.tu-hero3 img {
    transform: rotate(-9deg) translateY(6px);
}

.tu-hero3 img + img {
    transform: translateY(-2px);
}

.tu-hero3 img + img + img {
    transform: rotate(9deg) translateY(6px);
}

.tu-steps {
    margin: 0.5rem 0;
    padding: 0;
    list-style: none;
    counter-reset: tu;
}

.tu-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.5rem 0;
    counter-increment: tu;
}

.tu-steps li::before {
    content: counter(tu);
    display: flex;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    height: 26px;
    border-radius: 50%;
    background-color: var(--c-felt);
    color: white;
    font-size: 0.8rem;
    font-weight: 800;
}

.tu-steps li div,
.tu-line > div {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.tu-steps li span,
.tu-line > div span {
    color: #5b6470;
    font-size: 0.85rem;
}

.tu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.tu-vt {
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    text-align: center;
}

.tu-vt-cards {
    --cw: 46px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: calc(var(--cw) * 1.4 * 0.67);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 78%, transparent);
    mask-image: linear-gradient(#000 78%, transparent);
}

.tu-vt-cards img {
    flex: none;
    width: var(--cw);
    height: calc(var(--cw) * 1.4);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.tu-vt-cards img + img {
    margin-left: calc(var(--cw) * -0.52);
}

.tu-vt b {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.25rem;
}

.tu-vt span {
    color: #5b6470;
    font-size: 0.7rem;
}

.tu-row2 {
    display: flex;
    gap: 0.5rem;
}

.tu-row2 .felt.tu-felt {
    flex: 1;
    margin: 0.3rem 0;
}

.tu-sw {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.tu-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.35rem 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
}

.tu-line em {
    color: var(--c-primary-dark);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 800;
}

.tu-line em.tu-stand {
    color: #2e7d4f;
}

.tu-chip {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    height: 42px;
    border: 4px dashed rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background-color: #d32f2f;
    box-shadow: 0 0 0 2px #d32f2f;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
}

.tu-tip {
    margin: 0.5rem 0;
    padding: 0.5rem 0.65rem;
    border-left: 4px solid var(--c-primary);
    border-radius: 6px;
    background-color: var(--c-info-bg);
    font-size: 0.9rem;
    line-height: 1.35;
}

.tu-tip.tu-tip-gold {
    border-left-color: #d9a400;
    background-color: #fff6dd;
}

.tu-tag {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    background-color: #f2d27a;
    color: #3b2a00;
    font-size: 0.7rem;
    font-weight: 800;
}

.content a.tu-practice {
    display: flex;
    justify-content: space-between;
    margin: 0.6rem 0;
    padding: 0.6rem 0.75rem;
    border: 2px solid var(--c-primary);
    border-radius: 10px;
    background-color: #f4f8ff;
    color: var(--c-primary-dark);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.tu-finish {
    padding: 1rem !important;
}

.tu-spade {
    font-size: 2rem;
}

.tu-order {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.5rem 0;
}

.content .tu-order a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    color: var(--c-text);
    font-size: 0.9rem;
    text-decoration: none;
}

.tu-order a i {
    display: flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: 50%;
    background-color: #e6ebf0;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 800;
}

.tu-order a b {
    flex: 1;
}

.tu-order a small {
    color: #5b6470;
}

.content .tu-order a.tu-next {
    border: 2px solid var(--c-primary);
    background-color: #f4f8ff;
}

.tu-order a.tu-next i {
    background-color: var(--c-primary);
    color: white;
}

/* Three Card Prime tutorial: hand-ranking rows, pay tables, the
   dealer-qualifies tags and the settling-order list */
.tu-hr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.3rem 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
}

.tu-hr > i {
    display: flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    height: 20px;
    border-radius: 50%;
    background-color: var(--c-felt);
    color: white;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 800;
}

.tu-hr .tu-cards {
    --cw: 50px;
    flex: none;
}

.tu-hr .tu-cards img + img {
    margin-left: calc(var(--cw) * -0.3);
}

.tu-hr > div:last-child {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.tu-hr b {
    font-size: 0.9rem;
}

.tu-hr span {
    color: #5b6470;
    font-size: 0.75rem;
}

.tu-pt {
    width: 100%;
    margin: 0.25rem 0;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tu-pt td {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid #eceff2;
}

.tu-pt td:last-child {
    color: var(--c-primary-dark);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

/* Progressives tutorial: "what each game pays on" text wraps */
.tu-pt.pr-tu-pt td:last-child {
    white-space: normal;
}

.tu-pt td.tu-lose {
    color: #c62828;
}

.tu-pt tr.tu-hl td {
    background-color: #fff6dd;
}

.tu-two {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: 0.5rem;
}

.tu-two .tu-cards + .tu-cards {
    margin-top: 0.25rem;
}

.tu-two .tu-tot {
    font-size: 0.85rem;
}

.tu-qtag {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    background-color: white;
    color: var(--c-felt);
    font-size: 0.65rem;
    font-weight: 800;
}

.tu-qtag.tu-no {
    background-color: #f8d7d7;
    color: #a00;
}

.tu-ord {
    margin: 0.4rem 0;
    padding: 0;
    list-style: none;
    counter-reset: tuo;
}

.tu-ord li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.3rem 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    font-size: 0.9rem;
    counter-increment: tuo;
}

.tu-ord li::before {
    content: counter(tuo);
    display: flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: 50%;
    background-color: var(--c-felt);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
}

.tu-ord li b {
    flex: 1;
}

.tu-ord li small {
    color: #5b6470;
}

.tu-chip.tu-chip-blue {
    background-color: #1565c0;
    box-shadow: 0 0 0 2px #1565c0;
}

/* Pai Gow tutorial: 7-card rows, and a set hand as Low over High */
/* 7 cards in a row: full-size cards, overlapped more (the corners stay clear) */
.tu-cards.tu-xs {
    --cw: 66px;
}

.tu-cards.tu-xs img + img {
    margin-left: calc(var(--cw) * -0.42);
}

/* Roulette tutorial: the winning number with a chip on it (intro), the
   two chips on the Roulette page's entry card, and the pay labels
   beside the math tricks. The board pictures are Shared/RouletteBoard. */
.tu-rl-hero {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0.75rem 0 0.25rem 0;
}

.tu-rl-hero .rl-num {
    width: 84px;
    height: 84px;
    font-size: 2.4rem;
    box-shadow: 0 0 0 4px #ffd700;
}

.tu-rl-hero .rl-chip {
    top: 70%;
    left: calc(50% + 40px);
    width: 44px;
    height: 44px;
    font-style: normal;
}

.tu-entry-chips {
    display: flex;
    flex: 0 0 auto;
}

.tu-entry-chips i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 4px dashed white;
    border-radius: 50%;
    background-color: #f2c400;
    box-shadow: 0 0 0 2px #7a5c00;
    color: #222;
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 900;
}

.tu-entry-chips i + i {
    margin-left: -8px;
}

.tu-rl-x {
    flex: 0 0 2.6rem;
    color: var(--c-felt);
    font-size: 1.05rem;
    font-weight: 900;
}

.tu-screen .rl-felt {
    margin: 0.5rem 0;
}

/* A card that isn't part of the hand (Hold'em: the 2 unused of 7) */
.tu-cards img.tu-dim {
    opacity: 0.4;
}

/* Felt holding two examples stacked, with a rule between them */
.tu-stack > div + div {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.tu-pg-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.tu-pg-row + .tu-pg-row {
    margin-top: 0.3rem;
}

.tu-pg-row > span {
    flex: 0 0 2.4rem;
    color: #d7eadf;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: right;
}

.tu-pg-row .tu-cards {
    flex: 0 0 calc(var(--cw) * 4.2);
    justify-content: flex-start;
}

/* Narrow phones: smaller tutorial cards so two hands still fit side by side */
@media (max-width: 380px) {
    .tu-cards.tu-xs {
        --cw: 56px;
    }

    .tu-cards {
        --cw: 72px;
    }

    .tu-cards.tu-sm {
        --cw: 50px;
    }

    .tu-vt-cards {
        --cw: 34px;
    }

    .tu-hr .tu-cards {
        --cw: 42px;
    }

    /* Entry card: two cards at most, so its text keeps room */
    .tu-entry-cards img:nth-child(n + 3) {
        display: none;
    }
}

/* Tutorial bar: Back (outline) and Next (main), no Help / End */
.content .tu-bar .game-bar-main {
    flex: 1.3 1 0;
}

/* Desktop: the tutorial in the same centered column as the games */
@media (min-width: 769px) {
    .tu-screen {
        max-width: 520px;
        margin: 0 auto;
    }
}

/* ===== Start screens: felt-and-gold look (aesthetics pass) =====
   Scoped to the start screens' mode cards so in-game colours (blue =
   Win etc.) are unchanged.
   1. The open card's bar is pale felt green (Start stays blue: blue = go)
   2. Option radio lists become chip buttons that match the felt tiles
   3. Mode descriptions in regular type, darker grey */
.content .mode-list .mode-card-open .mode-header {
    background-color: #e3f1e8;
    border-bottom: 1px solid #a8cfb5;
}

@media (hover: hover) {
    .content .mode-list .mode-card-open button.mode-header:hover {
        background-color: #d6eadd;
    }
}

.mode-list .mode-desc {
    font-style: normal;
    color: #444b53;
}

.mode-list .mode-option-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.4rem;
    width: 100%;
}

.mode-list .mode-option-label {
    flex-basis: 100%;
}

.mode-list .mode-choice {
    position: relative;
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    box-sizing: border-box;
    border: 1px solid #c4cbd2;
    border-radius: 10px;
    background-color: #f6f7f8;
    color: #39414a;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mode-list .mode-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* A chip with a note (Challenge Mode's 6:5 "Single Deck Blackjack only")
   stacks the note under its label */
.mode-list .mode-choice {
    flex-direction: column;
    align-items: center;
}

.mode-list .mode-choice .mode-choice-note {
    margin: 0.1rem 0 0 0;
    font-size: 0.72rem;
    font-weight: 500;
}

.mode-list .mode-choice:has(input:checked) {
    border: 2px solid #c9a227;
    background-color: var(--c-felt);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mode-list .mode-choice:has(input:focus-visible) {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

.mode-list .mode-choice .rl-level {
    align-items: center;
    padding: 0;
}

.mode-list .mode-choice:has(input:checked) .rl-level-desc,
.mode-list .mode-choice:has(input:checked) .mode-choice-note {
    color: #d7eadf;
}

.content .mode-list .count-btn {
    border-color: #a8cfb5;
    color: var(--c-felt);
}

.mode-list .count-value {
    border-color: #a8cfb5;
    background-color: #e3f1e8;
}

/* Narrow phones: the chips stay on one row */
@media (max-width: 380px) {
    .mode-list .mode-choice {
        padding: 0.3rem 0.2rem;
        font-size: 0.78rem;
    }

    .mode-list .mode-choice .rl-level-desc {
        font-size: 0.72rem;
    }
}

.mode-list .mode-options + .count-stepper {
    margin-top: 0.75rem;
}

/* Readability pass (review "fix first"): larger, brighter felt captions
   (DEALER, PLAYER, BOARD), larger wager sub-lines ("wager $5"), and a
   readable "N wagers left" on the disabled main button */
.sp-cap {
    font-size: 0.85rem;
    opacity: 1;
}

.cr-cap {
    font-size: 0.78rem;
    color: white;
}

.sp-wname small {
    color: #444b53;
    font-size: 0.8rem;
}

.content .game-bar .game-bar-main:disabled {
    border: 1px dashed #7d9cc8;
    background-color: #eef3fb;
    color: #1d3f73;
    opacity: 1;
}

/* Narrow phones: captions a step smaller so two captions share one line
   and the Hold'em board caption doesn't wrap */
@media (max-width: 380px) {
    .sp-cap {
        font-size: 0.74rem;
    }

    .cr-cap {
        font-size: 0.68rem;
    }
}

/* Incorrect feedback: the right answer in a blue box (blue = correct), so
   it stands out from the red "You" part. Used in the result breakdown,
   Blackjack Payouts and Roulette. */
.fb-ans {
    display: inline-block;
    margin: 0.15rem 0 0 0;
    padding: 0.05rem 0.45rem;
    border: 1.5px solid var(--c-ok);
    border-radius: 6px;
    background-color: #e8f0fd;
    color: #0b3a8c;
    font-weight: 700;
    white-space: normal;
}

/* On a wager row, the right call after a miss: a small blue box beside the
   red "✗ Lose" */
.cr-ans-right {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border: 1.5px solid var(--c-ok);
    border-radius: 5px;
    background-color: #e8f0fd;
    color: #0b3a8c;
    font-weight: 700;
}

/* Home: each group's title in a coloured header band -- felt green for the
   Dealer School course, deep burgundy for Beyond Dealer School -- with a
   gold edge underneath, like the felt tiles */
.home-sec {
    margin: 1.5rem 0 0.6rem 0;
    padding: 0.6rem 0.85rem 0.65rem 0.85rem;
    border-bottom: 3px solid #c9a227;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    color: white;
}

.home-sec .home-heading {
    margin: 0;
    color: white;
}

.home-sec .home-sub {
    margin: 0.15rem 0 0 0;
    color: rgba(255, 255, 255, 0.88);
}

.home-sec-course {
    background-color: var(--c-felt);
    background-image: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.12), transparent 70%);
}

.home-sec-beyond {
    background-color: #7a1f2b;
    background-image: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.12), transparent 70%);
}

/* Practice & Tools: gold, like its cards and the menu's gold group */
.home-sec-tools {
    background-color: #8a6a10;
    background-image: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.14), transparent 70%);
}

/* Hand Setting: an empty Low Hand slot is a dashed card outline with
   "Tap a card below" inside, so it reads as waiting for a card */
.hs-low-slot:not(:has(img)) {
    border: 2px dashed rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    box-sizing: border-box;
}

.hs-slot-hint {
    padding: 0 0.3rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

/* Home: "Continue" -- the mode last practised in this browser */
.home-continue {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0 1rem 0;
    padding: 0.75rem 0.85rem;
    border: 2px solid #c9a227;
    border-radius: 12px;
    background-color: var(--c-felt);
    background-image: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.12), transparent 70%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    color: white;
    text-decoration: none;
}

.home-continue:hover {
    color: white;
}

.home-continue-text {
    flex: 1;
    min-width: 0;
}

.home-continue-text b {
    display: block;
    font-size: 1.05rem;
}

.home-continue-text small {
    display: block;
    margin-top: 0.1rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
}

.home-continue-key {
    display: block;
    color: #f2d06b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.home-continue-go {
    flex: none;
    padding: 0.45rem 0.8rem;
    border-radius: 8px;
    background-color: #f2c94c;
    color: #222;
    font-weight: 800;
}

/* Score line: streak badge (3+ right in a row) and the every-10-hands
   line (Shared/GameStatus) */
.gs-streak {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0 0.45rem;
    border: 1.5px solid #c9a227;
    border-radius: 999px;
    background-color: #fff6dd;
    color: #6b5000;
    font-size: 0.8rem;
    font-weight: 800;
    vertical-align: middle;
}

.gs-cheer {
    margin: -0.25rem 0 0.5rem 0;
    padding: 0.35rem 0.65rem;
    border-left: 4px solid #c9a227;
    border-radius: 6px;
    background-color: #fff9e8;
    color: #4a3b00;
    font-size: 0.88rem;
}

@media (max-width: 380px) {
    .gs-streak-txt {
        display: none;
    }
}

.gs-cheer {
    align-self: stretch;
}

/* Home: "scan to open on your phone" -- computers only (wide screen with
   a mouse); phones and tablets never see it */
.home-qr {
    display: none;
}

@media (min-width: 769px) and (pointer: fine) {
    .home-qr {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 1rem 0;
        padding: 0.85rem 1rem;
        border: 1px solid var(--c-border);
        border-radius: 12px;
        background-color: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    }

    .home-qr img {
        flex: none;
        width: 132px;
        height: 132px;
        border: 6px solid white;
        border-radius: 6px;
        image-rendering: pixelated;
    }

    .home-qr b {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 1.1rem;
    }

    .home-qr span {
        color: #444b53;
    }
}

/* ------------------------------------------------------------------
   Progressives (Pages/ProgressiveTrainer): the felt shows only the
   cards the progressive pays on; below it a practice touchscreen drawn
   like the table's real one (dark screen, outlined neon buttons, chip
   grid of 6 positions, pay tables). pr- classes.
   ------------------------------------------------------------------ */
.pr-intro, .pr-note {
    margin: 0 0 0.75rem;
    color: #444b53;
}

.pr-note {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.pr-felt {
    padding: 0.45rem 0.5rem 0.55rem;
}

.pr-cap {
    margin-bottom: 0.25rem;
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    opacity: 0.9;
}

.pr-wait {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 81px;
    font-size: 0.9rem;
    opacity: 0.8;
}

.pr-cards {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.pr-card {
    width: 56px;
    height: 78px;
    border-radius: 5px;
    background-color: white;
}

/* Pai Gow's 7 cards overlap */
.pr-fan {
    gap: 0;
}

.pr-fan .pr-card {
    width: 50px;
    height: 70px;
    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.35);
}

.pr-fan .pr-card + .pr-card {
    margin-left: -8px;
}

/* Player's Edge hit cards: dimmed, they don't count for Monster Match */
.pr-card.pr-dim {
    opacity: 0.45;
}

.pr-half {
    flex: 0 0 auto;
    width: 28px;
    overflow: hidden;
}

.pr-capnote {
    margin: 0.35rem 0 0;
}

.pr-seatrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.45rem;
}

.pr-seat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.9rem;
}

.pr-tags {
    display: flex;
    gap: 0.3rem;
}

.pr-tags i {
    padding: 0.05rem 0.4rem;
    border-radius: 9px;
    background-color: white;
    color: var(--c-felt);
    font-style: normal;
    font-weight: 800;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* The touchscreen */
.pr-ts {
    display: flex;
    flex-direction: column;
    min-height: 236px;
    margin-top: 0.6rem;
    padding: 0.4rem 0.45rem 0.55rem;
    border: 7px solid #111;
    border-radius: 12px;
    background: linear-gradient(160deg, #2a3a40, #1a2428);
    color: white;
}

.pr-ts-top {
    display: flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 0.3rem;
}

.pr-ts-short {
    min-height: 0;
}

/* The "what to do" line above the touchscreen; the page scrolls here
   when the number pad opens (clear of the phone top bar) */
.pr-howto {
    margin-top: 0.5rem;
    scroll-margin-top: 64px;
}

.pr-feedback {
    margin-top: 0.6rem;
}

.pr-back {
    flex: none;
    width: 34px;
    height: 30px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    border: 1.5px solid #5d8cff;
    border-radius: 5px;
    background: transparent;
    color: #5d8cff;
    font-size: 1.1rem;
    line-height: 1;
}

.pr-ts-btns {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: 0.6rem;
}

.pr-btn {
    flex: 0 1 60%;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    border: 2.5px solid #e8f0ff;
    border-radius: 22px;
    background: transparent;
    color: #4d7dff;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 0.06em;
}

/* Ready to tap: a soft glow. Not yet (nothing picked): faded, dashed */
.pr-btn:not(:disabled) {
    box-shadow: 0 0 8px rgba(232, 240, 255, 0.45);
}

.pr-next:not(:disabled) {
    color: #7aa2ff;
}

.pr-btn:disabled {
    border-style: dashed;
    box-shadow: none;
    opacity: 0.3;
}

.pr-play { color: #2fe0a8; border-color: #2fe0a8; }
.pr-end { flex: 1; color: #ff4b5c; border-color: #ffd0d4; }
.pr-pay { flex: 1; color: #2fe0b8; border-color: #d0fff0; }
.pr-supb { flex-basis: 88%; color: #ffd84d; border-color: #ffd84d; white-space: nowrap; }

/* Chip grid: 6 positions per row */
.pr-grid {
    display: grid;
    /* minmax(0, 1fr): equal columns even when a chip's text is wide, so
       the chips stay over their seat numbers */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    margin: 0.3rem 0;
}

.pr-grid-pos {
    margin-top: 1.4rem;
}

.pr-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Centred, not stretched, in its grid column: a stretched cell can
       override aspect-ratio on some browsers and draw an oval */
    align-self: center;
    justify-self: center;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    border: 2px solid #9aa4aa;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 4px #1e2c30, inset 0 0 0 6px #9aa4aa;
    color: #9aa4aa;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.4;
}

/* Chips keep their own size on touch screens: the touch-screen button
   rule (.content button: 44px min height and side padding) would squeeze
   the ring out of round and push it off its seat number */
.content .pr-chip {
    min-height: 0;
    padding: 0;
}

/* 3 letters (Pai Gow's INS): smaller so it fits inside the ring */
.pr-chip.pr-chip-long {
    font-size: 0.68rem;
    letter-spacing: -0.02em;
}

.pr-chip small {
    margin-top: 1px;
    font-size: 0.45rem;
    font-weight: 700;
}

.pr-chip.pr-lit {
    border-color: white;
    box-shadow: inset 0 0 0 4px #1e2c30, inset 0 0 0 6px white, 0 0 8px rgba(255, 255, 255, 0.75);
    color: white;
    opacity: 1;
}

.pr-chip.pr-sel {
    border-color: #4d7dff;
    box-shadow: inset 0 0 0 4px #1e2c30, inset 0 0 0 6px #4d7dff, 0 0 10px #4d7dff;
}

/* Both pay tables side by side (long names cut short, like the real screen) */
.pr-pts {
    display: flex;
    gap: 0.45rem;
    font-size: 0.74rem;
    font-weight: 700;
}

.pr-pt {
    flex: 1;
    min-width: 0;
}

.pr-pt-hd {
    margin-bottom: 0.15rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 900;
}

.pr-h5 { color: #ff6a3d; }
.pr-h1 { color: #4d8dff; }

.pr-pt-row {
    display: flex;
    gap: 0.25rem;
    padding: 0.12rem 0;
}

.pr-pt-row span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-pt-row b {
    flex: none;
}

/* Pick the wager */
.pr-wline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0.3rem 0;
    padding: 0;
    border: none;
    background: transparent;
    color: white;
    text-align: left;
}

.pr-box {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2.5px solid white;
    border-radius: 4px;
    font-weight: 900;
}

.pr-wline-pill {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0.3rem 0.7rem;
    border: 2.5px solid #4d7dff;
    border-radius: 16px;
    font-size: 0.95rem;
}

.pr-wline-pill small {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.15;
}

.pr-wline.pr-on .pr-wline-pill {
    background-color: rgba(77, 125, 255, 0.28);
}

/* Pick the rank */
.pr-rank-hd {
    margin-bottom: 0.25rem;
    padding: 0.15rem;
    border-radius: 10px;
    background-color: #2233dd;
    text-align: center;
    font-weight: 900;
}

.pr-rank {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 34px;
    margin-bottom: 0.2rem;
    padding: 0.2rem 0.6rem;
    border: 2px solid #3048ff;
    border-radius: 11px;
    background: transparent;
    color: white;
    font-weight: 700;
    font-size: 0.88rem;
    text-align: left;
}

.pr-rank.pr-on {
    background-color: #3048ff;
}

/* Confirm */
.pr-cf {
    margin: 0.3rem 0 0.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: #c8d4dc;
}

.pr-amt {
    width: 70%;
    margin: 0 auto;
    padding: 0.25rem;
    border: 2px solid white;
    border-radius: 8px;
    text-align: center;
    font-weight: 900;
    font-size: 1.35rem;
}

.pr-sup {
    margin: 0.4rem 0;
    padding: 0.5rem;
    border: 2px solid #ffd84d;
    border-radius: 8px;
    color: #ffd84d;
    text-align: center;
    font-weight: 800;
}

.pr-keypad {
    margin-top: 0.5rem;
}

/* After a CONFIRM: what was paid, and the next choice (replaces the
   blue instruction); PAYOUT and END GAME both glow, alike, so they stand
   out from the game bar without giving the answer away */
.pr-done {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.65rem;
    border-left: 5px solid #1f8a4c;
    border-radius: 8px;
    background-color: #e3f1e8;
    color: #0c5c34;
    scroll-margin-top: 64px;
}

.pr-done b {
    display: block;
    font-size: 1rem;
}

.pr-done span {
    display: block;
    margin-top: 0.2rem;
    color: #223;
    font-size: 0.92rem;
}

.pr-btn.pr-end.pr-cue:not(:disabled) {
    border-color: #ff4b5c;
    box-shadow: 0 0 16px 4px rgba(255, 90, 100, 0.85);
}

.pr-btn.pr-pay.pr-cue:not(:disabled) {
    border-color: #2fe0b8;
    box-shadow: 0 0 16px 4px rgba(47, 224, 184, 0.8);
}

.pr-result {
    margin-top: 0.6rem;
}

.pr-help-steps {
    padding-left: 1.2rem;
}

.pr-help-steps li {
    margin-bottom: 0.35rem;
}

@media (max-width: 360px) {
    .pr-card {
        width: 52px;
        height: 73px;
    }

    .pr-fan .pr-card {
        width: 46px;
        height: 64px;
    }

    .pr-pts {
        font-size: 0.66rem;
    }
}

/* The gold Progressives card under a game's modes (Shared/ProgressivesLink),
   same gold as Progressives and Challenge Mode on Home */
.pr-gamelink {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 1rem 0 0.5rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--c-gold-line);
    border-radius: 12px;
    background-color: var(--c-gold-bg);
    color: #3a2c00;
    text-decoration: none;
}

.pr-gamelink-chips {
    display: flex;
    flex: none;
}

.pr-gamelink-chips i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid white;
    border-radius: 50%;
    background-color: #1e2c30;
    box-shadow: inset 0 0 0 3px #1e2c30, inset 0 0 0 4px white;
    color: white;
    font-style: normal;
    font-weight: 800;
    font-size: 0.7rem;
}

.pr-gamelink-chips i.pr-gl-long {
    font-size: 0.56rem;
    letter-spacing: -0.03em;
}

.pr-gamelink-chips i + i {
    margin-left: -8px;
}

.pr-gamelink-text {
    flex: 1;
    min-width: 0;
}

.pr-gamelink-text b {
    display: block;
    font-size: 1rem;
}

.pr-gamelink-text span {
    display: block;
    color: #4a3d10;
    font-size: 0.88rem;
}

.pr-gamelink-go {
    flex: none;
    color: #8a6a00;
    font-weight: 800;
    font-size: 1.3rem;
}

/* Progressives Tutorial (Pages/ProgressivesTutorial): touchscreen pictures */
.pr-ts.pr-ts-pic {
    min-height: 0;
    margin: 0.4rem 0;
}

.tu-felt .pr-ts.pr-ts-pic {
    margin: 0 0 0.4rem;
}

span.pr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pr-rank {
    box-sizing: border-box;
}

/* The player's wagers on the felt, above the touchscreen picture */
.pr-tu-seat {
    display: flex;
    justify-content: center;
    padding: 0.45rem;
}

/* ------------------------------------------------------------------
   Progressives, Touchscreen only (for the training table): the practice
   touchscreen on its own. Portrait: under the usual title and
   instruction line. A phone held sideways: the touchscreen fills the
   screen with a thin strip on top (Exit, game, instruction), and the
   "Turn your phone upright" message is not shown on this screen.
   ------------------------------------------------------------------ */
.pr-posnums {
    display: grid;
    /* minmax(0, 1fr): equal columns even when a chip's text is wide, so
       the chips stay over their seat numbers */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 0.1rem;
    color: #9fb0bc;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}

.pr-sim {
    min-height: 330px;
}

.pr-sim .pr-chip {
    font-size: 1.05rem;
}

.pr-sim .pr-chip.pr-chip-long {
    font-size: 0.75rem;
}

.pr-sim .pr-pts {
    font-size: 0.8rem;
}

.pr-simstrip {
    display: none;
}

html:has(.pr-simwrap) #rotate-msg {
    display: none !important;
}

@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
    .pr-simwrap {
        position: fixed;
        inset: 0;
        z-index: 1500;
        display: flex;
        flex-direction: column;
        padding: max(6px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
        box-sizing: border-box;
        background-color: #0d1214;
    }

    .pr-simstrip {
        display: flex;
        flex: none;
        align-items: center;
        gap: 0.75rem;
        min-height: 34px;
        color: #cfd8dc;
        font-size: 0.85rem;
    }

    .pr-simstrip b {
        flex: none;
        color: white;
    }

    .pr-simstrip span {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        color: #9fb0bc;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pr-simexit {
        flex: none;
        min-height: 0;
        padding: 0.3rem 0.7rem;
        border: 1px solid #556;
        border-radius: 8px;
        background: transparent;
        color: white;
        font-size: 0.85rem;
    }

    .pr-simhow {
        display: none;
    }

    .pr-simwrap .pr-sim {
        flex: 1;
        min-height: 0;
        margin-top: 4px;
        overflow: auto;
    }

    .pr-simwrap .pr-ts-top {
        min-height: 26px;
        margin-bottom: 0;
    }

    .pr-simwrap .pr-grid,
    .pr-simwrap .pr-posnums {
        gap: 10px;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    /* Chips sized to the screen height so both rows and PLAY fit */
    .pr-simwrap .pr-chip {
        justify-self: center;
        width: min(70px, 19vh);
        height: min(70px, 19vh);
        font-size: 1.15rem;
    }

    .pr-simwrap .pr-pts {
        gap: 2rem;
        padding: 0 1rem;
        font-size: 0.9rem;
    }

    /* Pay table picks in two columns so 8 lines still fit */
    .pr-simwrap .pr-ranks {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0.5rem;
    }

    .pr-simwrap .pr-rank {
        min-height: 30px;
        margin-bottom: 0.15rem;
        padding: 0.1rem 0.6rem;
        font-size: 0.82rem;
        align-items: center;
    }

    .pr-simwrap .pr-rank-hd {
        margin-bottom: 0.2rem;
        padding: 0.05rem;
        font-size: 0.85rem;
    }

    .pr-simwrap .pr-back {
        height: 24px;
    }

    .pr-simwrap .pr-ts-btns {
        padding-top: 0.4rem;
    }

    .pr-simwrap .pr-btn {
        flex: 0 1 40%;
    }

    .pr-simwrap .pr-end,
    .pr-simwrap .pr-pay {
        flex: 0 1 32%;
    }

    .pr-simwrap .pr-wline {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Sensor screens: a lit $5 is red, a lit $1 blue (the live tables' colors) */
.pr-chip.pr-lit.pr-c5 {
    border-color: #ff5a5a;
    background-color: #c8102e;
    box-shadow: inset 0 0 0 4px #c8102e, inset 0 0 0 6px white, 0 0 10px rgba(255, 70, 70, 0.85);
    color: white;
}

.pr-chip.pr-lit.pr-c1 {
    border-color: #5d8cff;
    background-color: #1f4fd1;
    box-shadow: inset 0 0 0 4px #1f4fd1, inset 0 0 0 6px white, 0 0 10px rgba(80, 130, 255, 0.85);
    color: white;
}

/* ------------------------------------------------------------------
   Tools (Pages/Tools*.razor): companions for the training table.
   tl- classes. The limit sign and pay tables go full screen with Full
   Screen or a phone held sideways (tl-stage); the "Turn your phone
   upright" message is not shown on those two.
   ------------------------------------------------------------------ */
.tl-intro {
    margin: 0 0 0.8rem;
    color: #444b53;
}

.tl-h {
    margin: 0.3rem 0 0.2rem;
    font-size: 1.4rem;
}

.tl-tool {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #d6dbe0;
    border-radius: 12px;
    background-color: #f8f9fa;
    color: inherit;
    text-decoration: none;
}

.tl-ic {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background-color: var(--c-felt);
    color: white;
    font-weight: 800;
    font-size: 1.3rem;
}

.tl-ic-chip {
    background-color: #1e2c30;
    font-size: 0.8rem;
}

.tl-tool-text {
    flex: 1;
    min-width: 0;
}

.tl-tool-text b {
    display: block;
    font-size: 1rem;
}

.tl-tool-text span {
    display: block;
    color: #4a5560;
    font-size: 0.86rem;
}

.tl-go {
    color: #8a96a2;
    font-size: 1.4rem;
}

.tl-tool-gold {
    border-color: var(--c-gold-line);
    background-color: var(--c-gold-bg);
}

/* Full screen stage (Full Screen button, or sideways) */
.tl-strip {
    display: none;
}

html:has(.tl-stage) #rotate-msg {
    display: none !important;
}

.tl-stage.tl-full {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    background-color: #0d1214;
}

.tl-stage.tl-full .tl-strip {
    display: flex;
}

.tl-strip {
    flex: none;
    align-items: center;
    gap: 0.75rem;
    min-height: 34px;
    margin-bottom: 6px;
    color: #9fb0bc;
    font-size: 0.85rem;
}

.tl-strip b {
    color: white;
}

.tl-strip span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-exit {
    flex: none;
    min-height: 0;
    padding: 0.3rem 0.7rem;
    border: 1px solid #556;
    border-radius: 8px;
    background: transparent;
    color: white;
    font-size: 0.85rem;
}

/* Table limit sign */
.tl-sign {
    display: flex;
    flex-direction: column;
    margin-top: 0.4rem;
    border: 6px solid #c9a227;
    border-radius: 16px;
    background: radial-gradient(ellipse at center, #14824a 0%, #0b5c33 100%);
    box-shadow: inset 0 0 0 2px #f2d27a;
    color: white;
}

.tl-sign-half {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    border: none;
    background: transparent;
    color: white;
}

.tl-sign-rule {
    height: 2px;
    margin: 0 1.5rem;
    background-color: rgba(242, 210, 122, 0.6);
}

.tl-k {
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    opacity: 0.9;
}

.tl-v {
    font-weight: 900;
    font-size: 4rem;
    line-height: 1.05;
}

.tl-tap {
    font-size: 0.75rem;
    opacity: 0.75;
}

.tl-dots {
    display: flex;
    gap: 5px;
    margin: 0.25rem 0 0.1rem;
}

.tl-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
}

.tl-dots i.tl-on {
    background-color: #f2d27a;
}

.tl-stage.tl-full .tl-sign {
    flex: 1;
    margin-top: 0;
}

.tl-stage.tl-full .tl-v {
    font-size: min(6rem, 22vw);
}

/* Pay tables */
.tl-games {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0.6rem;
}

.tl-game {
    min-height: 36px;
    padding: 0.3rem 0.8rem;
    border: 1px solid #c4ccd4;
    border-radius: 18px;
    background-color: white;
    color: #1b2530;
    font-weight: 700;
    font-size: 0.9rem;
}

.tl-game.tl-on {
    border-color: var(--c-felt);
    background-color: var(--c-felt);
    color: white;
}

.tl-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 2px solid var(--c-felt);
    background-color: white;
}

.tl-tab {
    flex: 1 0 auto;
    min-height: 38px;
    padding: 0.35rem 0.55rem;
    border: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: #4a5560;
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
}

.tl-tab.tl-on {
    background-color: var(--c-felt);
    color: white;
}

.tl-pt-body {
    background-color: white;
}

.tl-cols {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tl-col {
    flex: 1;
    min-width: 0;
}

.tl-col-hd {
    padding: 0.4rem 0.6rem 0.1rem;
    font-weight: 900;
}

.tl-h5 { color: #c8102e; }
.tl-h1 { color: #1f4fd1; }

.tl-pt {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.tl-pt td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid #e3e7eb;
}

.tl-pt td:last-child {
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.tl-pt tr:nth-child(odd) td {
    background-color: #f6f8f9;
}

/* House Way tab: the rules wrap (in Help the pay column stays on one line) */
.tl-pt-body .hw-key {
    margin: 0.4rem 0.2rem 0.2rem;
}

.tl-pt-body .help-table.hw-table td:last-child {
    white-space: normal;
}

.tl-note {
    margin: 0.5rem 0.1rem;
    color: #4a5560;
    font-size: 0.85rem;
}

.tl-stage-pt.tl-full .tl-tabs {
    flex: none;
    border-radius: 8px 8px 0 0;
}

.tl-stage-pt.tl-full .tl-pt-body {
    flex: 1;
    overflow: auto;
    padding: 0.2rem 0.6rem;
    border-radius: 0 0 12px 12px;
}

.tl-stage-pt.tl-full .tl-cols {
    flex-direction: row;
    gap: 1.2rem;
}

/* Shuffle timer */
.tl-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.5rem;
}

.tl-ring {
    --ring: var(--c-felt);
    position: relative;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: conic-gradient(var(--ring) calc(var(--pct) * 1%), #e3e7eb 0);
}

.tl-ring.tl-ring-gold { --ring: #c9a227; }
.tl-ring.tl-ring-over { --ring: #d98a00; }

.tl-ring-in {
    position: absolute;
    inset: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: white;
}

.tl-time {
    color: #1b2530;
    font-weight: 900;
    font-size: 3.6rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.tl-ring-sub {
    margin-top: 0.3rem;
    color: #4a5560;
    font-weight: 700;
    font-size: 0.88rem;
}

.tl-count {
    color: var(--c-felt);
    font-weight: 900;
    font-size: 5.5rem;
    line-height: 1;
}

.tl-count.tl-go-txt {
    color: #1f8a4c;
    font-size: 4.5rem;
}

.tl-result {
    width: 85%;
    margin: 0.8rem 0 0;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-weight: 700;
    text-align: center;
}

.tl-result.tl-ok {
    background-color: #e3f1e8;
    color: #0c5c34;
}

.tl-result.tl-over {
    background-color: #fdf1dc;
    color: #7a4b00;
}

.tl-big {
    display: block;
    width: 80%;
    min-height: 54px;
    margin: 1rem auto 0;
    border: none;
    border-radius: 12px;
    background-color: #1d5fbf;
    color: white;
    font-weight: 900;
    font-size: 1.2rem;
}

.tl-big.tl-big-red {
    background-color: #c62828;
}

.tl-best {
    margin: 0.5rem 0 0;
    color: #4a5560;
    font-size: 0.9rem;
    text-align: center;
}

/* Pai Gow number and dice */
.tl-seg {
    display: flex;
    margin: 0.4rem 0 1rem;
    overflow: hidden;
    border: 2px solid var(--c-felt);
    border-radius: 10px;
}

.tl-seg button {
    flex: 1;
    min-height: 40px;
    border: none;
    background: white;
    color: var(--c-felt);
    font-weight: 800;
}

.tl-seg button.tl-on {
    background-color: var(--c-felt);
    color: white;
}

.tl-num {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 190px;
    margin: 0 auto;
    border: 5px solid #c9a227;
    border-radius: 22px;
    background: radial-gradient(ellipse at center, #14824a, #0b5c33);
    color: white;
}

.tl-num small {
    color: #f2d27a;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
}

.tl-num b {
    font-size: 7rem;
    line-height: 1;
}

.tl-dice {
    display: flex;
    justify-content: center;
    gap: 14px;
    width: 100%;
    margin: 0.4rem 0 0.4rem;
    padding: 0;
    border: none;
    background: transparent;
}

.tl-die {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 84px;
    height: 84px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 14px;
    background-color: #c62828;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}

.tl-die i {
    align-self: center;
    justify-self: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.tl-die i.tl-pip {
    background-color: white;
}

.tl-total {
    margin: 0;
    color: #1b2530;
    font-weight: 700;
    text-align: center;
}

.tl-total b {
    display: block;
    font-size: 4.5rem;
    line-height: 1;
}

.tl-flash {
    animation: tl-flash 0.25s ease-out;
}

@keyframes tl-flash {
    from { opacity: 0.25; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

.tl-hist {
    margin-top: 0.6rem;
    color: #4a5560;
    font-size: 0.88rem;
    text-align: center;
}

/* A phone held sideways: the sign / pay tables fill the screen */
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
    .tl-stage {
        position: fixed;
        inset: 0;
        z-index: 1500;
        display: flex;
        flex-direction: column;
        padding: max(8px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
        box-sizing: border-box;
        background-color: #0d1214;
    }

    .tl-stage .tl-strip {
        display: flex;
    }

    .tl-stage .tl-sign {
        flex: 1;
        flex-direction: row;
        margin-top: 0;
    }

    .tl-stage .tl-sign-rule {
        width: 2px;
        height: auto;
        margin: 1.2rem 0;
    }

    .tl-stage .tl-v {
        font-size: min(5.5rem, 30vh);
    }

    .tl-stage-pt .tl-tabs {
        flex: none;
        border-radius: 8px 8px 0 0;
    }

    .tl-stage-pt .tl-pt-body {
        flex: 1;
        overflow: auto;
        padding: 0.2rem 0.6rem;
        border-radius: 0 0 12px 12px;
    }

    .tl-stage-pt .tl-cols {
        flex-direction: row;
        gap: 1.2rem;
    }

    .tl-stage-pt .tl-pt td {
        padding: 0.3rem 0.6rem;
    }
}

/* ======================================================================
   Player Tracking (Tools, demo): the table's player tracking touchscreen.
   Sizes inside the screen follow its height (cqh), so it reads the same
   in the page and sideways full screen.
   ====================================================================== */
.pk-howto {
    margin-bottom: 0.5rem;
}

.pk-bezel {
    padding: 8px;
    border-radius: 12px;
    background-color: #111;
}

.pk-scr {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    container-type: size;
    color: white;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    background:
        conic-gradient(from 45deg at 75% 50%, rgba(220, 80, 130, 0.55) 0 25%, rgba(150, 60, 140, 0.35) 0 50%, rgba(230, 90, 140, 0.5) 0 75%, rgba(170, 60, 120, 0.3) 0),
        conic-gradient(from 45deg at 25% 50%, #8a3f8f 0 25%, #b0457e 0 50%, #7d3a86 0 75%, #c24f7d 0);
    user-select: none;
    -webkit-user-select: none;
}

.pk-scr button {
    min-height: 0;
    margin: 0;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

.pk-title {
    padding-top: 2.5cqh;
    font-size: 8cqh;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Positions 1-4 down the left, 5-6 in the middle, D. on the right */
.pk-pos {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.6em;
    min-width: 20%;
    height: 12cqh;
    padding: 0 1.5cqh;
    border: 1px solid transparent;
    background: transparent;
    color: white;
    font-size: 6.5cqh;
    text-align: left;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.pk-p1 { left: 1%; top: 22%; }
.pk-p2 { left: 1%; top: 35%; }
.pk-p3 { left: 1%; top: 48%; }
.pk-p4 { left: 1%; top: 61%; }
.pk-p5 { left: 37%; top: 22%; }
.pk-p6 { left: 37%; top: 35%; }
.pk-pd { left: 63%; top: 53%; }

.pk-n {
    font-family: "Courier New", Courier, monospace;
    font-weight: 900;
}

.pk-g {
    font-weight: 700;
}

.pk-pos.pk-sel {
    border-color: #2a6;
    background-color: #a7e3ef;
    color: #1d3f73;
    text-shadow: none;
}

.pk-btns {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 2px;
    height: 20%;
}

.pk-btns > * {
    flex: 1;
    border: 1px solid #7fa7b8;
    border-radius: 0;
    background-color: #a9d4e6;
}

.pk-btns .pk-in {
    color: #1b2530;
    font-family: "Courier New", Courier, monospace;
    font-size: 6.5cqh;
    font-weight: 900;
}

.pk-back {
    position: absolute;
    top: 2cqh;
    right: 2cqh;
    width: 11cqh;
    height: 10cqh;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: #e8584a;
    color: #1b2530;
    font-size: 6.5cqh;
    font-weight: 900;
}

.pk-lbl {
    position: absolute;
    font-size: 7cqh;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.pk-lbl-pin { left: 6%; top: 15%; }
.pk-lbl-buy { left: 8%; top: 12%; }
.pk-lbl-player { left: 12%; top: 36%; }

.pk-cash {
    position: absolute;
    top: 60%;
    left: 7%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32%;
    height: 12%;
    background-color: #a9c3ea;
    color: #1b2530;
    font-size: 5.5cqh;
    font-weight: 800;
}

.pk-disp {
    position: absolute;
    top: 5%;
    right: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    height: 13%;
    background-color: #cfe6f2;
    color: #1b2530;
    font-size: 7.5cqh;
    font-weight: 800;
}

.pk-kp {
    position: absolute;
    top: 21%;
    right: 3%;
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.1fr;
    grid-template-rows: repeat(4, 1fr);
    gap: 2px;
    width: 52%;
    height: 74%;
}

.pk-kp > * {
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: #a9c3ea;
    color: #1b2530;
    font-size: 7cqh;
    font-weight: 800;
}

.pk-kp button:active {
    filter: brightness(0.85);
}

.pk-kp .pk-del {
    grid-column: 4;
    grid-row: 1 / 3;
    background-color: #ef5a3c;
}

.pk-kp .pk-ent {
    grid-column: 4;
    grid-row: 3 / 5;
    background-color: #3cc23c;
}

.pk-note {
    margin: 0.5rem 0 0;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    background-color: #e3f1e8;
    color: #0c5c34;
    font-size: 0.9rem;
}

.content .game-bar .game-bar-main.pk-reset {
    border-color: #c62828;
    background-color: #c62828;
}

.pk-strip-reset {
    flex: none;
    min-height: 0;
    padding: 0.3rem 0.7rem;
    border: 1px solid #c62828;
    border-radius: 8px;
    background: transparent;
    color: #ff9a9a;
    font-size: 0.85rem;
}

/* Sideways phone: the touchscreen fills the screen (the strip carries the
   instruction and the last buy-in) */
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
    .pk-stage .pk-howto,
    .pk-stage .pk-note {
        display: none;
    }

    .pk-stage .pk-bezel {
        display: flex;
        flex: 1;
        min-height: 0;
    }

    .pk-stage .pk-scr {
        flex: 1;
        aspect-ratio: auto;
    }
}

/* Training disclaimer under the simulated terminals (Progressive
   Touchscreen, Player Tracking); stays along the bottom full screen */
.sim-disc {
    margin: 0.6rem 0 0;
    color: #7a858f;
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: center;
}

.pr-simwrap .sim-disc,
.tl-stage.tl-full .sim-disc {
    flex: none;
}

@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
    .pr-simwrap .sim-disc,
    .tl-stage .sim-disc {
        flex: none;
        margin: 4px 0 0;
        color: rgba(207, 216, 220, 0.6);
        font-size: 10px;
    }
}

/* ------------------------------------------------------------------
   Table Scenes (Pages/ToolTableScreen + Shared/Ts*): a ready-made
   screen per game, full screen. Tablet / computer: limit and tool on
   the left, touchscreen (fixed height) and pay tables on the right.
   Phone: the panels stack and the screen scrolls.
   ------------------------------------------------------------------ */
.tl-sec {
    margin: 1.1rem 0 0.5rem;
    color: #4a5560;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tl-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.tl-table {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.75rem;
    border: 2px solid var(--c-gold-line);
    border-radius: 12px;
    background-color: var(--c-gold-bg);
    color: inherit;
    text-decoration: none;
}

.tl-table b {
    font-size: 1rem;
}

.tl-table span {
    margin-top: 2px;
    color: #4a5560;
    font-size: 0.78rem;
    line-height: 1.3;
}

.ts-stage {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    overflow-y: auto;
    background-color: #0d1214;
}

/* Phone (panels stacked): a panel that stops close to the top of the
   screen snaps into place. proximity, not mandatory: a scroll that stops
   well away from a panel's top stays where it is, and a panel taller
   than the screen can still be scrolled through. Two-column tablet
   layout doesn't scroll, so this has no effect there. */
.ts-stage {
    scroll-snap-type: y proximity;
    scroll-padding-top: max(8px, env(safe-area-inset-top, 0px));
}

/* The top strip (Scenes button) is a snap point too, so the screen opens
   and rests at the top instead of snapping the strip off screen */
.ts-stage .tl-strip,
.ts-stage .ts-p {
    scroll-snap-align: start;
}

html:has(.ts-stage) #rotate-msg {
    display: none !important;
}

.ts-stage .tl-strip {
    display: flex;
}

.ts-stage > .sim-disc {
    flex: none;
    margin: 6px 0 0;
    color: rgba(207, 216, 220, 0.6);
    font-size: 11px;
}

.ts-grid {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
}

.ts-col1,
.ts-col2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Tablet or computer: two columns, filling the screen */
@media (min-width: 900px) and (min-height: 600px) {
    .ts-stage {
        overflow: hidden;
    }

    .ts-grid {
        flex-direction: row;
        min-height: 0;
    }

    .ts-col1 {
        flex: none;
        width: 330px;
    }

    .ts-col2 {
        flex: 1;
    }

    .ts-p.ts-grow {
        flex: 1;
        min-height: 0;
    }
}

.ts-p {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background-color: #1a2428;
}

.ts-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background-color: #141c1f;
    color: #cfd8dc;
    font-size: 13px;
}

.ts-hd b {
    color: white;
}

.ts-hd > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lock button (Table Scenes and the Limit Sign) */
.ts-lock {
    flex: none;
    min-height: 28px;
    padding: 0.15rem 0.6rem;
    border: 1px solid #f2d27a;
    border-radius: 8px;
    background-color: #f2d27a;
    color: #1b2530;
    font-weight: 700;
    font-size: 13px;
}

.ts-lock.ts-lock-on {
    border-color: #556;
    background: transparent;
    color: #cfd8dc;
}

/* Table limit */
.ts-limit {
    display: flex;
    height: 110px;
    margin: 8px;
    border: 4px solid #c9a227;
    border-radius: 12px;
    background: radial-gradient(ellipse at center, #14824a, #0b5c33);
}

.ts-lim:not(.ts-locked) .ts-limit {
    border-style: dashed;
}

.ts-limit button {
    flex: 1;
    min-height: 0;
    border: none;
    background: transparent;
    color: white;
}

.ts-limit small {
    display: block;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.18em;
}

.ts-limit b {
    font-weight: 900;
    font-size: 44px;
    line-height: 1.1;
}

.ts-limit i {
    width: 2px;
    margin: 12px 0;
    background-color: rgba(242, 210, 122, 0.6);
}

/* Timer and Pai Gow Number panels */
.ts-white {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 8px;
    padding: 10px 8px;
    border-radius: 10px;
    background-color: white;
    color: #1b2530;
}

.ts-white .tl-timer {
    width: 100%;
    margin: 0;
}

.ts-white .tl-ring {
    width: 190px;
    height: 190px;
}

.ts-white .tl-time {
    font-size: 3rem;
}

.ts-white .tl-big {
    width: 85%;
    margin-top: 10px;
}

.ts-white .tl-result {
    width: 90%;
    font-size: 0.95rem;
}

/* ------------------------------------------------------------------
   Rotation Timer (Shared/RotationTimer.razor): the tool page and the
   Table Scenes' panel tabs (Shared/TsSide.razor)
   ------------------------------------------------------------------ */
.rt-wrap {
    position: relative;
}

.rt-sound {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid #1d5fbf;
    border-radius: 10px;
    background-color: white;
    color: #1d5fbf;
}

.content .rt-sound {
    min-height: 0;
    padding: 0;
}

.rt-sound.rt-sound-off {
    border-color: #9aa4aa;
    color: #9aa4aa;
}

/* The tool page: the button sits at the top right of the timer area */
.tl-screen .rt-wrap {
    max-width: 420px;
    margin: 0 auto;
}

.rt-set {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 0.8rem;
}

.rt-set button {
    width: 52px;
    height: 44px;
    padding: 0;
    border: 2px solid #1d5fbf;
    border-radius: 10px;
    background-color: white;
    color: #1d5fbf;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
}

.rt-set button:disabled {
    border-color: #c5cbd0;
    color: #c5cbd0;
}

.rt-set span {
    min-width: 90px;
    color: #1b2530;
    font-weight: 800;
    font-size: 1.1rem;
    text-align: center;
}

.rt-two {
    display: flex;
    gap: 8px;
    width: 80%;
    margin: 1rem auto 0;
}

.rt-two .tl-big {
    flex: 1;
    width: auto;
    margin: 0;
}

.tl-big.rt-grey {
    background-color: #e3e7eb;
    color: #1b2530;
}

.tl-ring.rt-ring-up {
    --ring: #c62828;
}

.rt-ring-up .tl-time {
    color: #c62828;
}

.rt-msg {
    width: 85%;
    margin: 0.8rem 0 0;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    background-color: #c62828;
    color: white;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-align: center;
}

.rt-flash {
    animation: rt-flash 1s ease-in-out infinite alternate;
}

.ts-white.rt-flash,
.tl-screen .rt-flash {
    border-radius: 10px;
}

@keyframes rt-flash {
    from { background-color: #fde8e8; }
    to { background-color: #f7c6c6; }
}

@media (prefers-reduced-motion: reduce) {
    .rt-flash {
        animation: none;
        background-color: #fde8e8;
    }
}

.rt-under {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 0.5rem;
    color: #4a5560;
    font-size: 0.9rem;
}

.rt-link {
    padding: 0.2rem 0.4rem;
    border: none;
    background: none;
    color: #c62828;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: underline;
}

.content .rt-link {
    min-height: 32px;
    padding: 0.2rem 0.4rem;
}

/* Table Scenes: the tabs over the panel */
.rt-tabs {
    display: flex;
    flex: none;
    gap: 4px;
    padding: 5px;
    background-color: #141c1f;
}

.rt-tab {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 34px;
    border: 1px solid #3a474d;
    border-radius: 8px;
    background-color: transparent;
    color: #cfd8dc;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.content .rt-tab {
    min-height: 38px;
    padding: 0 6px;
    font-size: 14px;
}

.rt-tab.rt-on {
    border-color: #1d5fbf;
    background-color: #1d5fbf;
    color: white;
}

.rt-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #2fe0a8;
}

.rt-dot.rt-dot-paused { background-color: #9aa4aa; }
.rt-dot.rt-dot-up { background-color: #ff4b5c; }

.rt-tab-time {
    font-variant-numeric: tabular-nums;
}

.ts-tabbody {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.ts-tabbody.rt-hide {
    display: none;
}

.ts-white .rt-set {
    margin-top: 0.6rem;
}

.ts-white .rt-two {
    width: 85%;
    margin-top: 10px;
}

.ts-pgn .tl-seg {
    width: 90%;
    margin: 0 0 8px;
}

.ts-pgn .tl-seg button {
    white-space: nowrap;
}

.ts-pgn .tl-num {
    width: 140px;
    height: 140px;
}

.ts-pgn .tl-num b {
    font-size: 5rem;
}

.ts-pgn .tl-die {
    width: 72px;
    height: 72px;
}

.ts-pgn .tl-total b {
    font-size: 3.5rem;
}

.ts-pgn .tl-hist {
    margin: 6px 0 0;
}

/* Touchscreen: fixed height so the panels never resize between screens;
   the buttons stay at the bottom */
.ts-p.ts-ts {
    flex: none;
    height: 360px;
}

.ts-ts .ts-sim {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    margin: 6px 8px 8px;
    padding-top: 0.3rem;
    padding-bottom: 0.6rem;
    overflow: auto;
}

.ts-ts .pr-ts-top {
    min-height: 26px;
    margin-bottom: 0;
}

.ts-ts .pr-back {
    height: 26px;
}

.ts-ts .pr-ts-btns {
    margin-top: auto;
    padding-top: 0.5rem;
}

.ts-ts .pr-grid,
.ts-ts .pr-posnums {
    gap: 6px;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.ts-ts .pr-chip {
    justify-self: center;
    width: min(62px, 12vw);
    height: min(62px, 12vw);
    font-size: 1.05rem;
}

@media (min-width: 900px) and (min-height: 600px) {
    .ts-ts .pr-grid,
    .ts-ts .pr-posnums {
        gap: 10px;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

.ts-ts .pr-chip.pr-chip-long {
    font-size: 0.9rem;
}

.ts-ts .pr-btn {
    flex: 0 1 40%;
    min-height: 48px;
    font-size: 1.1rem;
}

.ts-ts .pr-end,
.ts-ts .pr-pay {
    flex: 0 1 38%;
}

.ts-ts .pr-pts {
    gap: 1.5rem;
    font-size: 0.9rem;
}

.ts-ts .pr-pt-row {
    padding: 0;
}

.ts-ts .pr-rank {
    min-height: 34px;
    margin-bottom: 0.2rem;
    font-size: 0.92rem;
    align-items: center;
}

.ts-ts .pr-ranks.ts-ranks-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    column-gap: 0.5rem;
}

.ts-ts .pr-wline-pill {
    min-height: 48px;
}

/* Pay tables panel */
.ts-pay .tl-tabs {
    flex: none;
    margin: 6px 8px 0;
    border-radius: 8px 8px 0 0;
}

.ts-pay .tl-pt-body {
    flex: 1;
    min-height: 0;
    margin: 0 8px 8px;
    padding: 0.2rem 0.5rem;
    overflow: auto;
    border-radius: 0 0 10px 10px;
}

.ts-pay .ts-cols {
    flex-direction: row;
    gap: 1rem;
}

.ts-pay .tl-pt td {
    padding: 0.38rem 0.5rem;
}

/* Limit Sign page: the lock under the sign's title on the page */
.tl-lockrow {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.tl-lockrow .ts-lock.ts-lock-on {
    border-color: #c4ccd4;
    color: #1b2530;
}

.tl-stage.tl-full .tl-lockrow {
    display: none;
}

.tl-sign-locked .tl-tap {
    opacity: 0.5;
}