/* ============================================================
   PokerManager — global theme: "The Pit"
   Design tokens + base. Loaded app-wide (after Bootstrap/Blazorise
   so it wins the cascade). Bespoke landing flourishes live in Login.css.
   ============================================================ */

:root {
    /* palette */
    --pit-bg: #e8e4d7;          /* bone */
    --pit-surface: #f3f0e7;     /* raised panel */
    --pit-ink: #0c0b09;         /* near-black */
    --pit-mut: #55514a;         /* muted text */
    --pit-red: #e4002b;         /* primary accent */
    --pit-green: #0b7d49;       /* positive */
    --pit-line: #0c0b09;        /* hard rule */
    --pit-line-soft: #cfc7b5;   /* soft divider */

    /* type */
    --font-display: 'Archivo', system-ui, sans-serif;
    --font-body: 'Archivo', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* geometry */
    --pit-radius: 2px;

    /* hand Bootstrap our accent so .text-primary / .btn-primary etc. follow */
    --bs-primary: #e4002b;
    --bs-primary-rgb: 228, 0, 43;
    --bs-link-color: #e4002b;
    --bs-link-hover-color: #b00021;
    --bs-body-font-family: var(--font-mono);
}

body {
    font-family: var(--font-mono);   /* mono everywhere */
    background: var(--pit-bg);
    color: var(--pit-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* Tabular numbers read better in mono — opt-in via .pit-mono */
.pit-mono {
    font-family: var(--font-mono);
}

/* ============================================================
   COMPONENT LAYER
   Maps the Pit UI kit onto the classes Blazorise (Bootstrap5
   provider) + Bootstrap actually render, so the whole web app
   adopts it by default. !important is deliberate: it overrides
   Bootstrap, the Blazorise provider CSS, and the handful of
   components that hardcode their own inline styles.
   ============================================================ */

/* Buttons */
.btn {
    border-radius: 0 !important;
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--pit-ink); }
.btn-primary { color: #fff; }

/* Mobile-first button labels: .btn-label is the full text (desktop only, hidden
   below md); .btn-label-sm is a short one-word label shown ONLY below md. Pair
   them for actions with no natural icon; use .btn-label alone (with an <Icon>)
   for actions that read fine as an icon. */
.btn-label-sm { display: none; }

/* Dropdowns — Bootstrap (.dropdown-menu) + Blazorise bar (.b-bar-dropdown-menu) */
.dropdown-menu,
.b-bar-dropdown-menu {
    background: var(--pit-bg) !important;
    border: 2px solid var(--pit-line) !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 rgba(12, 11, 9, .18) !important;
    padding: 0 !important;
    margin-top: 4px !important;
}
.dropdown-item,
.b-bar-dropdown-item {
    font-family: var(--font-mono) !important;
    font-size: .85rem;
    border-bottom: 2px solid var(--pit-line-soft);
}
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active,
.b-bar-dropdown-item:hover {
    background: var(--pit-ink) !important;
    color: var(--pit-bg) !important;
}
.dropdown-divider { border-top: 2px solid var(--pit-line-soft); opacity: 1; }

/* Form controls */
.form-control, .form-select {
    border: 2px solid var(--pit-line) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--pit-red) !important;
    box-shadow: 3px 3px 0 var(--pit-red) !important;
}

/* Selects (Blazorise <Select> renders a native <select class="form-select">).
   Strip the OS chrome and draw the Pit control: bone field + red chevron, so
   the closed control matches the theme instead of the phone's default box.
   (The option overlay on tap is OS-native by design — touch-friendly.) */
.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--pit-surface) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e4002b' stroke-width='2.5'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .7rem center !important;
    background-size: .85rem !important;
    padding-right: 2.1rem !important;
}
.input-group-text {
    border: 2px solid var(--pit-line) !important;
    border-radius: 0 !important;
    background: var(--pit-ink);
    color: var(--pit-bg);
    font-family: var(--font-mono);
}
.form-check-input { border: 2px solid var(--pit-line); }
.form-check-input[type=checkbox] { border-radius: 0 !important; }

/* Badges are pill-shaped by default — square them to match the Pit theme. */
.badge { border-radius: 0 !important; }
.form-check-input:checked { background-color: var(--pit-red); border-color: var(--pit-red); }
.form-check-input:focus { border-color: var(--pit-red); box-shadow: 0 0 0 .2rem rgba(228, 0, 43, .2); }

/* Cards / panels */
.card {
    border: 2px solid var(--pit-line) !important;
    border-radius: 0 !important;
}
.card-header, .card-footer {
    border-color: var(--pit-line) !important;
    border-radius: 0 !important;
    background: var(--pit-surface);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: -.01em;
}

/* Modals */
.modal-content {
    border: 2px solid var(--pit-line) !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 rgba(12, 11, 9, .22);
    background: var(--pit-bg);
}
.modal-header, .modal-footer { border-color: var(--pit-line) !important; }
.modal-title { font-family: var(--font-display); text-transform: uppercase; }

/* Tables / data grid — full brutalist (2px on every rule) */
.table { border: 1px solid var(--pit-line) !important; }
.table > :not(caption) > * > * { border-color: var(--pit-line) !important; border-width: 1px !important; }
.table > thead { background: var(--pit-ink); }
.table > thead th {
    color: var(--pit-bg) !important;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .06em;
}
.table td, .table th { font-family: var(--font-mono); }

/* Responsive data tables (reports / lists) scroll horizontally at every width,
   so their cells never wrap — wrapping + a horizontal scrollbar is the worst of
   both. Keeps multi-word headers ("Entity Name", "Total Profit") on one line. */
.table-responsive th,
.table-responsive td { white-space: nowrap; }

/* Badges */
.badge {
    border-radius: 0 !important;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Alerts */
.alert {
    border-radius: 0 !important;
    border: 2px solid var(--pit-line);
    border-left-width: 8px;
}

/* Tabs / pills */
.nav-tabs { border-bottom: 2px solid var(--pit-line); }
.nav-link {
    border-radius: 0 !important;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--pit-ink);
}
.nav-tabs .nav-link.active { border: 2px solid var(--pit-line); border-bottom-color: var(--pit-bg); }
.nav-pills .nav-link.active { background: var(--pit-ink); color: var(--pit-bg); }

/* Pagination */
.page-link {
    border-radius: 0 !important;
    border: 2px solid var(--pit-line) !important;
    color: var(--pit-ink);
    font-family: var(--font-mono);
}
.page-item.active .page-link { background: var(--pit-red); border-color: var(--pit-red); color: #fff; }

/* Breadcrumb */
.breadcrumb { font-family: var(--font-mono); text-transform: uppercase; font-size: .8rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--pit-red); }

/* List group */
.list-group-item {
    border: 2px solid var(--pit-line) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono);
}

/* App bar (TopMenu) */
.b-bar { border-bottom: 2px solid var(--pit-line); }
.b-bar-item .b-bar-link,
.b-bar-dropdown-toggle { border-radius: 0 !important; font-family: var(--font-mono); }

/* Autocomplete / search — Blazorise renders .b-is-autocomplete > .dropdown-menu / .dropdown-item */
.b-is-autocomplete .dropdown-menu { padding: 0 !important; }
.b-is-autocomplete .dropdown-menu .dropdown-item { white-space: normal; }
.b-is-autocomplete .dropdown-menu .dropdown-item.focus,
.b-is-autocomplete .dropdown-menu .dropdown-item:hover {
    background: var(--pit-ink) !important;
    color: var(--pit-bg) !important;
}
/* the suggestion ItemContent uses <Field>/<FieldBody> — kill their default form spacing */
.b-is-autocomplete .dropdown-item .field,
.b-is-autocomplete .dropdown-item .form-group { margin: 0 !important; }
.b-is-autocomplete.b-is-autocomplete-multipleselection .badge { border-radius: 0 !important; }

/* Loading spinners */
@keyframes pit-spin { to { transform: rotate(360deg); } }
.b-layout > .b-layout-loading:before {
    border: solid 3px var(--pit-line-soft) !important;
    border-bottom-color: var(--pit-red) !important;
    border-radius: 50%;
}
.pit-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--pit-line);
    border-top-color: var(--pit-red);
    border-radius: 50%;
    animation: pit-spin .7s linear infinite;
}

/* Snackbar / notifications */
.snackbar { border: 2px solid var(--pit-line) !important; border-radius: 0 !important; font-family: var(--font-mono); }
.snackbar-body, .snackbar-action { border-radius: 0 !important; }

/* Tooltip — colour handled by the Theme; just square it */
.b-tooltip::after, .tooltip-inner { border-radius: 0 !important; font-family: var(--font-mono); }

/* Date picker (flatpickr) popup */
.flatpickr-calendar {
    border-radius: 0 !important;
    border: 2px solid var(--pit-line) !important;
    box-shadow: 6px 6px 0 rgba(12, 11, 9, .18) !important;
    font-family: var(--font-mono);
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
    background: var(--pit-red) !important;
    border-color: var(--pit-red) !important;
    border-radius: 0 !important;
}

/* Validation keeps the red accent */
.form-control.is-invalid, .form-select.is-invalid,
.was-validated .form-control:invalid { border-color: var(--pit-red) !important; }

/* App bar — keep brand, menu items and the club dropdown on one vertically-centered line */
.b-bar.b-bar-horizontal { align-items: center; }
.b-bar-horizontal .b-bar-menu,
.b-bar-horizontal .b-bar-start,
.b-bar-horizontal .b-bar-end,
.b-bar-horizontal .b-bar-item { display: flex; align-items: center; }

/* Pagination — equal-height cells so page numbers match prev/next */
.pagination { align-items: center; }
.pagination .page-item { display: flex; }
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: .4rem .6rem;
}

/* ============================================================
   MOBILE FOUNDATION
   One breakpoint that fixes the recurring structural problems
   portal-wide (< 768px = phones + small tablets). Per-page mobile
   layouts (e.g. the Live page) build on top of this.
   ============================================================ */
@media (max-width: 767.98px) {

    /* Modals become full-screen sheets (every modal uses ModalSize.Large/
       ExtraLarge + Height.Is100, which overflow a phone otherwise). */
    .modal-dialog {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        height: 100% !important;
    }
    .modal-content {
        height: 100% !important;
        border-width: 0 !important;
        border-radius: 0 !important;
    }
    .modal-body { overflow-y: auto; }

    /* Stack Bootstrap grid columns full-width. Blazorise ColumnSize.IsN
       renders a non-responsive .col-N (stays N/12 on phones) — force them
       to 100% so multi-column forms and two-column layouts stack. The plain
       .col case covers Blazorise <Fields>/<Field> (rendered as .row > .col),
       which otherwise share a row equally and squash. Flex layouts (e.g.
       Live seats) don't use .col-* and are unaffected. */
    .row > [class*="col-"],
    .row > .col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Remaining Blazorise tables (e.g. the nested rakeback/bonus detail tables,
       club-joining / queue tables) scroll sideways within their wrapper, not the
       page. The report grids now use the PitTable component with its own scoped
       styles, so there are no DataGrid-specific overrides here. */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive table { font-size: .8rem; }
    .table-responsive th,
    .table-responsive td { padding: .4rem .55rem; }

    /* Tighter side gutters so content isn't pinched. */
    .b-layout-content { padding-left: .75rem !important; padding-right: .75rem !important; }

    /* Thumb-friendly tap targets + instant tap (no 300ms delay). */
    .btn { min-height: 40px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

    /* Mobile-first compact actions: action buttons collapse to their icon below
       md. Give the text label a .btn-label and it hides on phones, leaving a
       square icon-only button so report/form headers stay on one line. The
       icon margin reset only touches buttons that actually carry a label. */
    .btn-label { display: none; }
    .btn-label-sm { display: inline; }
    /* Reset icon margin only when the label is fully hidden (icon-only button);
       keep it when a short .btn-label-sm still shows text beside the icon. */
    .btn:has(.btn-label):not(:has(.btn-label-sm)) > .b-icon,
    .btn:has(.btn-label):not(:has(.btn-label-sm)) > i,
    .btn:has(.btn-label):not(:has(.btn-label-sm)) > svg { margin: 0 !important; }

    /* Pending-buyin action row: the three icon buttons share the width evenly. */
    .buyin-actions { width: 100%; }
    .buyin-actions > .btn { flex: 1 1 0; }

    /* Pager: uniform square buttons (the page-number buttons rendered larger
       than the prev/next buttons). */
    .pagination { flex-wrap: wrap; gap: 3px; justify-content: center; }
    .pagination .page-link {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .25rem .4rem !important;
        font-size: .82rem;
    }
    .b-bar-item .b-bar-link, .b-bar-dropdown-toggle { min-height: 42px; }

    /* Form controls fill the row on phones — overrides fixed inline widths
       (e.g. report filter Style="width:200px/300px"). Covers Blazorise
       (.form-*) and AntDesign (.ant-*). */
    .form-control, .form-select { max-width: 100% !important; }
    .ant-select, .ant-picker, .ant-input-number { width: 100% !important; }

    /* Report filter rows live in the AntDesign table title — wrap them onto
       multiple lines instead of overflowing the page sideways. */
    .ant-table-title {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: center;
    }
}

/* Live page — mobile seat stats laid out 2 per row (fits 390px) */
.live-seat-stats { display: flex; flex-wrap: wrap; }
.live-seat-stats > span { flex: 0 0 50%; margin-top: .35rem; }

/* Desktop live seat card — name · prominent P/L-coloured stack · muted buy-in, with a
   left accent bar and a corner call-time tag. */
.live-pstat {
    position: relative; display: inline-flex; flex-direction: column; gap: 1px;
    min-width: 84px; max-width: 124px; padding: 6px 9px 6px 8px;
    background: var(--pit-surface); border: 2px solid var(--pit-line); border-left-width: 5px;
    box-shadow: 2px 2px 0 rgba(12, 11, 9, .12); font-family: var(--font-mono);
    text-align: left; cursor: default;
}
.live-pstat.win { border-left-color: var(--pit-green); }
.live-pstat.loss { border-left-color: var(--pit-red); }
.live-pstat-name {
    font: 700 .68rem var(--font-mono); color: var(--pit-ink); text-transform: uppercase; letter-spacing: .03em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 16px;
}
.live-pstat-stack { font: 800 1rem var(--font-mono); line-height: 1.05; white-space: nowrap; }
.live-pstat.win .live-pstat-stack { color: var(--pit-green); }
.live-pstat.loss .live-pstat-stack { color: var(--pit-red); }
.live-pstat-buy { font: 600 .56rem var(--font-mono); color: var(--pit-mut); letter-spacing: .06em; white-space: nowrap; }
.live-pstat-ct {
    position: absolute; top: 0; right: 0; background: var(--pit-red); color: #fff;
    font: 700 .54rem var(--font-mono); padding: 1px 4px; letter-spacing: .02em;
}
/* Hover detail card — same design as the live-table click-to-open popup. */
.live-pstat-pop {
    display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
    width: 240px; border: 2px solid var(--pit-line); background: var(--pit-bg);
    box-shadow: 6px 6px 0 rgba(12, 11, 9, .2); text-align: left; white-space: normal;
}
.live-pstat:hover .live-pstat-pop { display: block; }
.live-pstat-pop .live-detail-grid { font-size: .72rem; }

/* "Open Live Tables" bar on the desktop Live page (button uses the standard .btn style). */
.liveplay-tables-bar { text-align: right; margin-bottom: .7rem; }

/* Desktop Live game header — compact slim bar. Stats grouped by thin rules; a stat's
   label never wraps off its value. Actions pushed to the far right. */
.live-hdr {
    display: flex; align-items: stretch; flex-wrap: nowrap;
    background: var(--pit-paper); border: 2px solid var(--pit-line); border-left: 5px solid var(--pit-red);
    box-shadow: 2px 2px 0 rgba(12,11,9,.14); margin-bottom: .6rem; font-family: var(--font-mono);
}
.live-hdr-g { display: flex; align-items: center; gap: 9px; padding: 5px 12px; border-right: 1.5px solid var(--pit-line-soft); }
.live-hdr-g:last-child { border-right: none; }
.live-hdr-id { gap: 8px; }
.live-hdr-acts { margin-left: auto; gap: 5px; border-right: none; }
.live-hdr-acts .btn { border-radius: 0 !important; }

.live-hdr-date {
    background: var(--pit-red); color: #fff; font: 800 12px var(--font-mono);
    padding: 3px 7px; text-align: center; white-space: nowrap;
}
.live-hdr-gid { font: 800 14px var(--font-mono); color: var(--pit-ink); white-space: nowrap; }
.live-hdr-live {
    display: inline-flex; align-items: center; gap: 5px;
    font: 700 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pit-green); white-space: nowrap;
}
.live-hdr-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--pit-green);
    animation: lhPulse 1.6s infinite;
}
@keyframes lhPulse {
    0% { box-shadow: 0 0 0 0 rgba(11,125,73,.5); }
    70% { box-shadow: 0 0 0 6px rgba(11,125,73,0); }
    100% { box-shadow: 0 0 0 0 rgba(11,125,73,0); }
}

.live-hdr-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--pit-red); color: #fff; font: 800 12px var(--font-mono); padding: 2px 8px; white-space: nowrap;
}
.live-hdr-pill .lh-pl { font-size: 8.5px; font-weight: 700; opacity: .85; letter-spacing: .06em; text-transform: uppercase; }
/* Keep the new-hand pulse, but scale-only + stay white (the default pulse flashes red,
   which would vanish on the red pill). */
.live-hdr-pill .hand-num { color: #fff; animation: lhHandPulse .9s ease; }
@keyframes lhHandPulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.5); }
    55% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

.lh-stat { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.lh-stat .lh-l { font: 700 8.5px var(--font-mono); letter-spacing: .05em; color: var(--pit-mut); text-transform: uppercase; }
.lh-stat .lh-v { font: 800 12.5px var(--font-mono); color: var(--pit-ink); }

/* Info popover holding the secondary table stats (hover or focus/tap the ⓘ). */
.live-hdr-info { position: relative; display: inline-flex; align-items: center; color: var(--pit-mut); cursor: pointer; outline: none; }
.live-hdr-info:hover, .live-hdr-info:focus { color: var(--pit-red); }
.live-hdr-pop {
    display: none; position: absolute; top: calc(100% + 7px); left: 0; z-index: 40;
    background: var(--pit-bg); border: 2px solid var(--pit-line); box-shadow: 5px 5px 0 rgba(12,11,9,.2);
    padding: 8px 10px; white-space: normal;
}
.live-hdr-info:hover .live-hdr-pop, .live-hdr-info:focus .live-hdr-pop, .live-hdr-info:focus-within .live-hdr-pop { display: block; }
.live-hdr-pop-head {
    display: block; font: 800 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--pit-red); border-bottom: 1.5px solid var(--pit-line-soft); padding-bottom: 4px; margin-bottom: 6px;
}
.live-hdr-pop-grid { display: grid; grid-template-columns: auto auto; gap: 4px 14px; }
.live-hdr-pop-grid > span { font: 700 9px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--pit-mut); align-self: center; }
.live-hdr-pop-grid > b { font: 800 12.5px var(--font-mono); color: var(--pit-ink); text-align: right; white-space: nowrap; }

/* ============================================================
   LIVE PAGE — mobile (expandable game cards)
   Shown only below md; desktop keeps the two-column layout.
   ============================================================ */

/* Expandable game summary card */
.live-card {
    border: 2px solid var(--pit-line);
    background: var(--pit-surface);
    margin-bottom: .8rem;
}
.live-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .8rem .9rem;
    border-left: 4px solid var(--pit-red);
    cursor: pointer;
}
.live-card-id { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.live-card-title {
    font-weight: 700;
    font-size: .9rem;
    color: var(--pit-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-card-meta { font-size: .72rem; color: var(--pit-mut); }
.live-card-chev {
    flex: 0 0 auto;
    color: var(--pit-mut);
    font-size: .9rem;
    transition: transform .15s ease;
}
.live-card-chev.open { transform: rotate(180deg); color: var(--pit-red); }
.live-card-actions {
    display: flex;
    gap: .5rem;
    padding: 0 .9rem .8rem;
}
.live-card-seats {
    padding: 0 .9rem .9rem;
    border-top: 2px solid var(--pit-line-soft);
    padding-top: .8rem;
}

/* Full-screen sheets (chat / notifications / club picker) — squared Pit chrome */
.pit-sheet .modal-header { border-bottom: 2px solid var(--pit-line); border-radius: 0; }
.pit-sheet .modal-content { border-radius: 0; background: var(--pit-bg); }
.pit-sheet .modal-title {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 1rem;
}

/* Club picker list (mobile popup) */
.pit-clublist { display: flex; flex-direction: column; }
.pit-clubrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    width: 100%;
    padding: 1rem 1.1rem;
    border: 0;
    border-bottom: 2px solid var(--pit-line-soft);
    background: var(--pit-bg);
    color: var(--pit-ink);
    font: 700 .9rem var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
    cursor: pointer;
}
.pit-clubrow:hover { background: rgba(228, 0, 43, .08); }
.pit-clubrow.active { background: var(--pit-ink); color: var(--pit-bg); }
.pit-clubrow.active i { color: var(--pit-red); }

/* ============================================================
   MOBILE NAV — Pit drawer (Blazorise Offcanvas + Accordion)
   Version-safe: styles the stable Bootstrap5 public classes
   (.offcanvas, .accordion-*) plus our own .pit-* classes — never
   Blazorise internal markup (.b-bar-*, [data-broken]). The desktop
   <Bar> is hidden below md; this slim top bar + drawer take over.
   ============================================================ */

/* Slim mobile top bar (brand left, hamburger right) — shown only below md */
.pit-mobilebar { display: none; }
@media (max-width: 767.98px) {
    .pit-mobilebar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .6rem 1rem;
        background: var(--pit-bg);
        border-bottom: 2px solid var(--pit-line);
    }
}
.pit-mobilebar-brand,
.pit-drawer-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: -.02em;
    color: var(--pit-ink);
}
.pit-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: var(--pit-red);
    color: #fff;
    font-size: .9rem;
}
/* Mobile top-bar brand is a link to the live page; size its mark to match the
   right-side action icons (42px) so the bar reads as balanced. */
.pit-mobilebar-brand { text-decoration: none; }
.pit-mobilebar .pit-mark { width: 42px; height: 42px; font-size: 1.15rem; }
.pit-hamburger {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 2px solid var(--pit-line);
    background: var(--pit-bg);
    color: var(--pit-ink);
    font-size: 1.1rem;
    cursor: pointer;
}
.pit-mobilebar-actions { display: flex; align-items: center; gap: .5rem; }
.pit-bell,
.pit-club,
.pit-search {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 2px solid var(--pit-line);
    background: var(--pit-bg);
    color: var(--pit-ink);
    font-size: 1.05rem;
    cursor: pointer;
}
.pit-bell-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    background: var(--pit-red);
    color: #fff;
    font: 700 .7rem var(--font-mono);
    border: 2px solid var(--pit-bg);
}

/* Tap feedback on mobile controls. touch-action: manipulation removes the
   ~300ms tap delay (taps register on the first press); :active gives an
   instant client-side pressed state so the user sees feedback without waiting
   on the Blazor SignalR round-trip. */
.pit-hamburger, .pit-bell, .pit-club, .pit-search {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .06s ease, background-color .08s ease, color .08s ease;
}
.pit-hamburger:active, .pit-bell:active, .pit-club:active, .pit-search:active {
    background: var(--pit-ink);
    color: var(--pit-bg);
    transform: scale(.92);
}
.pit-item, .pit-sub, .pit-clubrow, .live-card-top, .accordion-button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.pit-item:active, .pit-sub:active, .pit-clubrow:active {
    background: var(--pit-ink);
    color: var(--pit-bg);
}
.pit-item:active .pit-ico { color: var(--pit-bg); }
.live-card-top:active { background: var(--pit-line-soft); }

/* Offcanvas shell (Bootstrap public .offcanvas) */
.offcanvas.pit-drawer {
    width: min(86vw, 360px);
    background: var(--pit-bg);
    color: var(--pit-ink);
    border-right: 2px solid var(--pit-line);
    font-family: var(--font-mono);
}
.pit-drawer .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.1rem;
    border-bottom: 2px solid var(--pit-line);
}
.pit-drawer-close {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 2px solid var(--pit-line);
    background: none;
    color: var(--pit-ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.pit-drawer .offcanvas-body { padding: 0; overflow-y: auto; }

/* Primary links as full-width rows */
.pit-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: 1rem 1.1rem;
    border-bottom: 2px solid var(--pit-line-soft);
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pit-ink);
    text-decoration: none;
    cursor: pointer;
}
.pit-item:hover { background: rgba(228, 0, 43, .08); color: var(--pit-ink); }
.pit-ico { color: var(--pit-red); width: 18px; text-align: center; flex: 0 0 auto; }

/* Expandable sections (Bootstrap public .accordion-*) */
.pit-drawer .accordion,
.pit-drawer .accordion-item {
    background: transparent;
    border: 0;
    border-radius: 0;
}
.pit-drawer .accordion-item { border-bottom: 2px solid var(--pit-line-soft); }
.pit-drawer .accordion-button {
    padding: 1rem 1.1rem;
    background: var(--pit-bg);
    color: var(--pit-ink);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 0;
    box-shadow: none;
}
.pit-drawer .accordion-button:not(.collapsed) {
    background: var(--pit-ink);
    color: var(--pit-bg);
    box-shadow: none;
}
.pit-drawer .accordion-button:focus { box-shadow: none; border-color: var(--pit-line); }
.pit-drawer .accordion-button .pit-ico { margin-right: .7rem; }
.pit-drawer .accordion-button:not(.collapsed) .pit-ico { color: var(--pit-bg); }
.pit-drawer .accordion-body { padding: 0; }

/* Sub-items inside a section */
.pit-sub {
    display: block;
    padding: .8rem 1.1rem .8rem 2.6rem;
    border-bottom: 2px solid var(--pit-line-soft);
    font-weight: 500;
    font-size: .85rem;
    color: var(--pit-mut);
    text-decoration: none;
    cursor: pointer;
}
.pit-sub:last-child { border-bottom: 0; }
.pit-sub:hover { background: var(--pit-ink); color: var(--pit-bg); }

/* Footer: active club + account */
.pit-drawer .offcanvas-footer {
    border-top: 2px solid var(--pit-line);
    background: var(--pit-surface);
    padding: 1rem 1.1rem;
}
.pit-foot-lbl {
    display: block;
    font-weight: 700;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pit-mut);
    margin-bottom: .5rem;
}
.pit-acct {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .8rem;
    font-weight: 500;
    font-size: .85rem;
    color: var(--pit-ink);
}
.pit-acct .pit-av {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--pit-ink);
    color: var(--pit-bg);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: .8rem;
}

/* ============================================================
   LIVE TABLE — mobile observer view (horizontal oval on top,
   always-open chat at the bottom). Inside the fullscreen .pit-sheet.
   ============================================================ */

/* True fullscreen: keep our content out from under the phone status bar / notch and the
   Telegram fullscreen header. Telegram exposes --tg-content-safe-area-inset-* in fullscreen;
   env(safe-area-inset-*) is the browser fallback (needs viewport-fit=cover). */
.pit-sheet .modal-header {
    padding-top: calc(.5rem + max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px)));
}
.pit-sheet .modal-content {
    padding-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
    padding-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));
}

/* Full-height sheet body split: table area (flex) + chat (fixed). */
.live-sheet-body { padding: 0 !important; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.live-carousel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* Table area — top, full width. Swipe surface. */
.live-carousel-swipe {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    touch-action: pan-y;
}

/* Multi-table: a horizontal scroll-snap track of self-contained tiles. Each tile is a
   portrait column (table + its own actions + chat). On a phone one tile fills the view
   (swipe between); on a wide desktop screen several tiles show at once. */
.live-track {
    flex: 1 1 auto; min-height: 0;
    display: flex; gap: 10px; padding: 10px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    /* Centre the tiles when they fit (1, 2, … tables); fall back to start when they overflow
       so the first tile is never clipped. */
    justify-content: safe center;
}
.live-tile {
    flex: 0 0 min(100%, 440px);
    scroll-snap-align: center;
    height: 100%; position: relative;
    display: flex; flex-direction: column; min-height: 0;
    border: 2px solid var(--pit-line); background: var(--pit-bg);
}
.live-tile-table { flex: 1 1 auto; min-height: 0; position: relative; }
.live-tile-actions {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 6px;
    padding-bottom: calc(6px + max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px)));
    border-top: 2px solid var(--pit-line);
}
/* Sheet header: action buttons (left), game meta, close (right). The buyin/queue/
   settings tools and the N-MAX · #hand meta live here to free vertical room for the table. */
.live-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.live-head-actions { display: flex; gap: .4rem; align-items: center; }
.live-head-meta {
    margin-left: auto;
    display: inline-flex; align-items: center;
    height: 30px; padding: 0 .55rem;
    border: 2px solid var(--pit-line); background: var(--pit-bg);
    font: 700 .82rem var(--font-mono); text-transform: uppercase;
    letter-spacing: .03em; color: var(--pit-ink); white-space: nowrap;
}
/* The hand number pulses each time it changes (new hand dealt). */
.hand-num { display: inline-block; animation: pitHandPulse .9s ease; }
@keyframes pitHandPulse {
    0% { transform: scale(1); color: var(--pit-red); font-weight: 800; }
    25% { transform: scale(1.7); color: var(--pit-red); font-weight: 800; }
    55% { transform: scale(1.7); color: var(--pit-red); font-weight: 800; }
    100% { transform: scale(1); color: inherit; font-weight: inherit; }
}

/* New-hand announcement — a framed "HAND #N" banner pops over the table on each
   new hand, with a red frame flash, then fades. */
.live-deal-flash {
    position: absolute; inset: 0; z-index: 8; pointer-events: none;
    display: grid; place-items: center;
    animation: pitDealFade 1.3s ease-out forwards;
}
@keyframes pitDealFade {
    0% { opacity: 0; }
    8% { opacity: 1; }
    74% { opacity: 1; }
    100% { opacity: 0; }
}
.live-deal-flash::before {
    content: ""; position: absolute; inset: 6px;
    border: 4px solid var(--pit-red);
    box-shadow: inset 0 0 40px rgba(228, 0, 43, .25);
    animation: pitDealFrame 1.3s ease-out;
}
@keyframes pitDealFrame {
    0% { transform: scale(1.05); opacity: 0; }
    12% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.live-deal-banner {
    position: relative;
    background: var(--pit-ink); color: #fff;
    font: 900 1.55rem var(--font-display); text-transform: uppercase;
    letter-spacing: .05em; padding: .4rem 1.1rem;
    border: 3px solid var(--pit-red);
    box-shadow: 6px 6px 0 rgba(12, 11, 9, .3);
    animation: pitDealBanner 1.3s cubic-bezier(.2, .8, .2, 1);
}
@keyframes pitDealBanner {
    0% { transform: scale(.4) rotate(-5deg); opacity: 0; }
    18% { transform: scale(1.14) rotate(0deg); opacity: 1; }
    34% { transform: scale(1); }
    74% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.06); opacity: 0; }
}


/* Telegram live Mini App — loading / empty message. */
.live-webapp-msg {
    display: grid; place-items: center; min-height: 60vh; padding: 2rem;
    text-align: center; color: var(--pit-mut);
    font: 700 .9rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
}

/* Blinds / straddle / ante structure readout in the board. */
.live-blinds {
    font-weight: 700; font-size: var(--label-fs, .66rem); font-family: var(--font-mono); text-transform: uppercase;
    letter-spacing: .04em; color: rgba(255, 255, 255, .82); max-width: 100%; text-align: center; line-height: 1.15;
}
/* Straddle rule for the game (mandatory highlighted). */
.live-straddle {
    margin-top: 2px; padding: 1px 7px;
    font: 800 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
    color: #fff; background: rgba(12, 11, 9, .55); border: 1px solid rgba(255, 255, 255, .3);
}
.live-straddle.mandatory { background: var(--pit-red); border-color: #fff; }

/* Central board / pot panel — bounded to the clear central gap (runtime) so the
   community cards + pot text never reach the player pods. */
.live-board {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    max-width: var(--board-max-w, 230px); max-height: var(--board-max-h, 150px);
    z-index: 1;
}
.live-board-cards { display: flex; gap: 3px; }
/* Run-it-twice: two stacked, slightly smaller board rows, each labelled. */
.live-board-rit { display: flex; flex-direction: column; gap: .25rem; }
.live-rit-row { display: flex; align-items: center; gap: .35rem; }
.live-rit-tag {
    font: 800 .54rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
    color: #fff; background: rgba(12, 11, 9, .7); padding: 1px 4px; white-space: nowrap;
}
.live-board-rit .live-card-slot { width: calc(var(--bc-w, 38px) * 0.8); height: calc(var(--bc-h, 52px) * 0.8); }
.live-board-rit .live-card-slot .cr { font-size: calc(var(--bc-fs, 1.12rem) * 0.8); }
.live-board-rit .live-card-slot .cs { font-size: calc(var(--bc-fs, 1.12rem) * 0.8); }
.live-card-slot {
    width: var(--bc-w, 38px); height: var(--bc-h, 52px);
    border: 2px solid var(--pit-line-soft);
    background: var(--pit-bg);
    display: grid; place-items: center;
    color: var(--pit-line-soft); font-size: 1rem;
}
.live-card-slot.filled {
    background: #fff; border-color: var(--pit-ink); color: var(--pit-ink);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1; gap: 1px;
    box-shadow: 2px 2px 0 rgba(12, 11, 9, .22);
    animation: pitCardDeal .34s cubic-bezier(.2, .85, .25, 1) both;
}
/* Community card flips/drops in as it's dealt. */
@keyframes pitCardDeal {
    0% { transform: translateY(-10px) rotateX(80deg); opacity: 0; }
    100% { transform: translateY(0) rotateX(0); opacity: 1; }
}
.live-card-slot.filled.red { color: var(--pit-red); }
/* Board card that's part of the winning hand at showdown. */
.live-card-slot.filled.hl {
    border-color: var(--pit-green);
    box-shadow: 0 0 0 2px var(--pit-green), 3px 3px 0 rgba(11, 125, 73, .3);
}
.live-card-slot .cr { font-weight: 700; font-size: var(--bc-fs, 1.12rem); font-family: var(--font-mono); }
.live-card-slot .cs { font-size: var(--bc-fs, 1.12rem); line-height: 1; }
.live-pot {
    font-weight: 800; font-size: var(--pot-fs, .92rem); font-family: var(--font-mono); text-transform: uppercase;
    letter-spacing: .05em; color: #fff; max-width: 100%; text-align: center; line-height: 1.1;
}
.live-board-hint {
    font-weight: 500; font-size: var(--label-fs, .56rem); font-family: var(--font-mono); text-transform: uppercase;
    letter-spacing: .06em; color: rgba(255, 255, 255, .45);
}
/* Bomb-pot indicator over the board. */
.live-bombpot {
    font-weight: 800; font-size: var(--label-fs, .82rem); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
    color: #fff; background: var(--pit-red); padding: 2px 10px;
    border: 2px solid #fff; box-shadow: 3px 3px 0 rgba(12, 11, 9, .3);
    animation: pitHandPulse 1.1s ease infinite;
}

/* Floating chat bubble over a seat — speech bubble with a down tail. */
.live-chat-bubble {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    width: max-content; max-width: 140px;
    border: 2px solid var(--pit-line);
    background: var(--pit-bg);
    box-shadow: 3px 3px 0 rgba(12, 11, 9, .18);
    padding: .22rem .45rem;
    font: 500 .62rem var(--font-mono);
    color: var(--pit-ink);
    line-height: 1.25;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden; word-break: break-word;
    z-index: 5;
}
.live-chat-bubble::after {
    content: ""; position: absolute; bottom: -7px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px; background: var(--pit-bg);
    border-right: 2px solid var(--pit-line); border-bottom: 2px solid var(--pit-line);
}

/* Carousel controls */
.live-carousel-nav {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: .25rem .6rem;
    padding-bottom: calc(.25rem + max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px)));
}
.live-carousel-arrow {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 2px solid var(--pit-line);
    background: var(--pit-bg); color: var(--pit-ink);
    font-size: 1rem; cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.live-carousel-arrow:disabled { opacity: .35; cursor: default; }
.live-carousel-center { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.live-nav-code { font: 700 .76rem var(--font-mono); color: var(--pit-ink); letter-spacing: .02em; }
.live-carousel-dots { display: flex; gap: 5px; align-items: center; }
.live-carousel-dots i { width: 8px; height: 8px; background: var(--pit-line-soft); }
.live-carousel-dots i.on { background: var(--pit-red); }

/* Full-screen chat — slides up over the table, dark backdrop fades in. */
.live-chat-overlay {
    position: absolute; inset: 0; z-index: 60;
    display: flex; flex-direction: column;
    pointer-events: none;
    background: rgba(12, 11, 9, 0);
    transition: background .28s ease;
}
.live-chat-overlay.open { pointer-events: auto; background: rgba(12, 11, 9, .55); }
.live-chat-sheet {
    height: 100%; display: flex; flex-direction: column;
    background: var(--pit-surface); border-top: 3px solid var(--pit-red);
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.2, .85, .25, 1);
}
.live-chat-overlay.open .live-chat-sheet { transform: translateY(0); }
.live-chat-head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: .6rem .8rem; border-bottom: 2px solid var(--pit-line); background: var(--pit-bg);
}
.live-chat-title {
    font: 800 .9rem var(--font-display); text-transform: uppercase; letter-spacing: .04em;
    color: var(--pit-ink); display: inline-flex; align-items: center; gap: .4rem;
}
.live-chat-title i { color: var(--pit-red); }
.live-chat-x {
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 2px solid var(--pit-line); background: var(--pit-bg); color: var(--pit-ink);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.live-chat-x:active { background: var(--pit-ink); color: var(--pit-bg); }
.live-chat-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* Inline buyin / queue / settings panel body — scrolls within the tile. */
.live-panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: .5rem; background: var(--pit-surface); }
/* "Load older messages" pager at the top of the chat. */
.chat-load-older { text-align: center; margin: 0 0 .4rem; }
.chat-load-older button { font: 700 .7rem var(--font-mono); color: var(--pit-ink); background: var(--pit-bg);
    border: 2px solid var(--pit-line); padding: .25rem .7rem; cursor: pointer; }
.live-chat-body .card { margin: 0 !important; height: 100%; border: 0; border-radius: 0; background: var(--pit-surface); }
.live-chat-body .card-body { height: 100%; }

/* Chat message row — sender · message · time aligned on one line. */
.chat-msg-row {
    display: flex; align-items: baseline; gap: .4rem;
    padding: .32rem .5rem; margin-bottom: .35rem;
    background: var(--pit-bg); border: 2px solid var(--pit-line-soft);
}
.chat-msg-name { flex: 0 0 auto; font: 700 .76rem var(--font-mono); font-style: italic; color: var(--pit-red); white-space: nowrap; }
.chat-msg-text { flex: 1 1 auto; min-width: 0; font: 500 .78rem var(--font-mono); font-style: italic; color: var(--pit-ink); overflow-wrap: anywhere; }
.chat-msg-time { flex: 0 0 auto; font: 500 .64rem var(--font-mono); color: var(--pit-mut); }
.chat-msg-reply { flex: 0 0 auto; border: 0; background: transparent; color: var(--pit-mut); opacity: .55; padding: 0; cursor: pointer; }
.chat-msg-reply:hover { opacity: 1; color: var(--pit-red); }

/* Quick-action buttons (buyin / queue / settings) — now hosted in the sheet header. */
.live-tool-btn {
    position: relative;
    width: 34px; height: 30px;
    display: grid; place-items: center;
    border: 2px solid var(--pit-line);
    background: var(--pit-bg); color: var(--pit-ink);
    font-size: .82rem;
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.live-tool-btn i { color: var(--pit-red); font-size: .82rem; }
.live-tool-btn:active { background: var(--pit-ink); }
.live-tool-btn:active i { color: var(--pit-bg); }
.live-tool-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 14px; height: 14px; padding: 0 3px;
    display: grid; place-items: center;
    background: var(--pit-red); color: #fff;
    font: 700 .55rem var(--font-mono); border: 2px solid var(--pit-bg);
}
/* Unread-chat dot on the chat tool button. */
.live-tool-dot {
    position: absolute; top: -4px; right: -4px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--pit-red); border: 2px solid var(--pit-bg);
    animation: pitDotPulse 1.2s ease-in-out infinite;
}
@keyframes pitDotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }

/* Player detail popover (tap a seat). */
.live-detail-backdrop { position: absolute; inset: 0; background: rgba(12, 11, 9, .35); z-index: 20; }
.live-detail {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(86%, 320px); z-index: 21;
    border: 2px solid var(--pit-line); background: var(--pit-bg);
    box-shadow: 6px 6px 0 rgba(12, 11, 9, .2);
}
.live-detail-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .7rem; background: var(--pit-ink); color: var(--pit-bg);
    font: 700 .85rem var(--font-mono); text-transform: uppercase; letter-spacing: .03em;
}
.live-detail-x { border: 0; background: transparent; color: var(--pit-bg); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.live-detail-grid {
    display: grid; grid-template-columns: auto 1fr; gap: .35rem .7rem;
    padding: .7rem; font: 500 .8rem var(--font-mono);
}
.live-detail-grid span { color: var(--pit-mut); text-transform: uppercase; font-size: .66rem; align-self: center; }
.live-detail-grid b { color: var(--pit-ink); text-align: right; word-break: break-word; }
.live-detail-grid b.pos { color: var(--pit-green); }
.live-detail-grid b.neg { color: var(--pit-red); }

/* ====== Live racetrack table (mobile observer view) ======
   Every dimension comes from a CSS var set at runtime by ComputeLayout (StageStyle) --
   the stylesheet hard-codes no fonts or sizes. Per-config templates add .live-<cfg>. */
.live-table-stage { position: relative; width: 100%; height: 100%; overflow: visible; font-family: var(--font-mono); }

/* Vertical racetrack felt -- top/height set inline as % by the template. */
.live-felt {
    position: absolute; left: 50%; transform: translate(-50%, -50%); width: 96%;
    border: 4px solid var(--pit-red); border-radius: 999px;
    background: radial-gradient(125% 80% at 50% 32%, #16895d 0%, #0e6b46 52%, #094f34 100%);
    box-shadow: inset 0 0 65px rgba(0,0,0,.38), inset 0 0 0 3px rgba(255,255,255,.09), 6px 6px 0 rgba(12,11,9,.2);
    z-index: 0;
}
.live-felt-brand {
    position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);
    font: 900 calc(var(--title-fs, 12px) * 1.3) var(--font-display); text-transform: uppercase; letter-spacing: .18em;
    color: rgba(255,255,255,.14); white-space: nowrap; pointer-events: none; z-index: 1;
}
.live-ftitle {
    position: absolute; left: 50%; transform: translate(-50%, -50%);
    font: 800 var(--title-fs, 12px) var(--font-mono); letter-spacing: .1em;
    color: rgba(255,255,255,.6); white-space: nowrap; pointer-events: none; z-index: 3;
}

/* ---- Board (owns a full-width lane) ---- */
.live-board {
    position: absolute; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 5px; z-index: 4; width: max-content; max-width: 96%;
}
.live-pot { font: 800 var(--pot-fs, 17px) var(--font-mono); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4); letter-spacing: .02em; }
.live-board-cards { display: flex; gap: calc(var(--bc-w, 38px) * .1); }
.live-card-slot {
    width: var(--bc-w, 38px); height: var(--bc-h, 53px); background: #fff; border: 2px solid var(--pit-ink);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font: 900 var(--bc-fs, 18px) var(--font-mono); line-height: 1; box-shadow: 2px 2px 0 rgba(12,11,9,.3); color: var(--pit-ink);
}
.live-card-slot:not(.filled) { position: relative; background: #efeadf; border-color: #cabfa8; }
.live-card-slot:not(.filled)::after { content: "PM"; position: absolute; inset: 0; display: grid; place-items: center;
    font: 900 calc(var(--bc-w, 38px) * .42) var(--font-display); color: #c9bfa8; letter-spacing: .01em; }
.live-card-slot.red { color: var(--pit-red); }
.live-card-slot.hl { outline: 2px solid var(--pit-green); outline-offset: 1px; }
.live-blinds { font: 700 var(--blind-fs, 12px) var(--font-mono); color: rgba(255,255,255,.92); letter-spacing: .02em; text-shadow: 1px 1px 0 rgba(0,0,0,.35); text-align: center; }
.live-board-hint { font: 700 var(--blind-fs, 12px) var(--font-mono); color: rgba(255,255,255,.5); }
.live-bombpot { font: 800 var(--blind-fs, 12px) var(--font-mono); color: #ffd23f; }
.live-board-rit { display: flex; flex-direction: column; gap: 4px; }
.live-rit-row { display: flex; align-items: center; gap: 5px; }
.live-rit-tag { font: 800 calc(var(--blind-fs, 12px) * .85) var(--font-mono); color: rgba(255,255,255,.7); }

/* ---- Seat pod (anchored on the BOX centre; cards float above, out of flow) ---- */
.live-seat {
    position: absolute; transform: translate(-50%, -50%);
    width: var(--pod-w, 78px); z-index: 2; font-family: var(--font-mono);
    animation: pitSeatIn .35s ease both;
}
@keyframes pitSeatIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.live-seat:not(.empty):active { filter: brightness(1.12); }

.s-cards {
    position: absolute; bottom: calc(100% - 3px); left: 50%; transform: translateX(-50%);
    display: flex; justify-content: center; width: max-content; z-index: 2;
}
.s-card { flex: 0 0 auto; border: 1px solid var(--pit-ink); box-shadow: 1px 1px 0 rgba(12,11,9,.22); }
.s-cards.holes .s-card { width: var(--hc-w, 18px); height: var(--hc-h, 26px); }
.s-card.back { position: relative; background: repeating-linear-gradient(45deg, var(--pit-red) 0 3px, #b8001f 3px 6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 1px 1px 0 rgba(12,11,9,.25); }
.s-card.back::after { content: "PM"; position: absolute; inset: 0; display: grid; place-items: center;
    font: 900 calc(var(--hc-w, 18px) * .5) var(--font-display); color: rgba(255,255,255,.7); letter-spacing: .01em; }
.s-card + .s-card { margin-left: -6px; }
.s-cards.hidden { visibility: hidden; }
/* Showdown fan: keep full size, but slide horizontally (--show-dx) so it never crosses the screen. */
.s-cards.shown { z-index: 3; transform: translateX(calc(-50% + var(--show-dx, 0px))); }
.s-card.up {
    width: var(--sc-w, 40px); height: var(--sc-h, 56px); background: #fff; border: 2px solid var(--pit-ink);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font: 900 var(--sc-fs, 18px) var(--font-mono); line-height: 1; box-shadow: 2px 2px 0 rgba(12,11,9,.3);
    transform-origin: bottom center; animation: pitCardReveal .4s cubic-bezier(.2,1.12,.35,1) both;
}
.s-card.up + .s-card.up { margin-left: -2px; }
.s-card.up b { font-size: var(--sc-fs, 18px); font-weight: 900; }
.s-card.up.red { color: var(--pit-red); }
.s-card.up.black { color: var(--pit-ink); }
@keyframes pitCardReveal { 0% { transform: rotateY(90deg) scale(.65); opacity: 0; } 55% { transform: rotateY(0) scale(1.15); opacity: 1; } 100% { transform: rotateY(0) scale(1); opacity: 1; } }

/* two-part box: identity over an integrated rail */
.s-box {
    position: relative; width: 100%; border: 2px solid var(--pit-line); border-left-width: 4px;
    background: var(--pit-bg); box-shadow: 2px 2px 0 rgba(12,11,9,.18); overflow: hidden;
}
.s-id { position: relative; padding: 4px 6px 3px; text-align: center; }
.s-name { font: 700 var(--name-fs, 13px) var(--font-mono); color: var(--pit-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.s-stack { font: 800 var(--stack-fs, 13px) var(--font-mono); line-height: 1.12; margin-top: 1px; }
.live-seat.win .s-box { border-left-color: var(--pit-green); }
.live-seat.win .s-stack { color: var(--pit-green); }
.live-seat.loss .s-box { border-left-color: var(--pit-red); }
.live-seat.loss .s-stack { color: var(--pit-red); }

.s-rail {
    display: flex; align-items: center; justify-content: center; gap: 3px;
    min-height: calc(var(--pill-fs, 9px) + 6px); padding: 1.5px 4px;
    border-top: 1.5px solid rgba(12,11,9,.16); background: rgba(12,11,9,.05);
}
.s-pp {
    height: calc(var(--pill-fs, 9px) + 4px); padding: 0 4px; display: flex; align-items: center;
    font: 800 var(--pill-fs, 9px) var(--font-mono); letter-spacing: .02em; background: var(--pit-ink); color: #fff;
}
.s-pp.d { background: #fff; color: var(--pit-ink); box-shadow: inset 0 0 0 1.5px var(--pit-ink); border-radius: 50%; min-width: calc(var(--pill-fs,9px) + 4px); justify-content: center; padding: 0 2px; }
.s-pp.str { background: var(--pit-ink); color: #ffd23f; }
.s-tm { height: calc(var(--pill-fs, 9px) + 4px); padding: 0 5px; display: flex; align-items: center; font: 700 var(--pill-fs, 9px) var(--font-mono); background: var(--pit-red); color: #fff; }

/* state overlay covers the whole box */
.s-overlay {
    position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; font: 900 var(--stack-fs, 13px) var(--font-display); text-transform: uppercase; letter-spacing: .03em; text-shadow: 1px 1px 0 rgba(12,11,9,.35);
}
.s-overlay-flash { animation: pitOverlayFlash 2.2s ease forwards; }
@keyframes pitOverlayFlash { 0% { opacity: 0; transform: scale(1.15); } 12% { opacity: 1; transform: scale(1); } 72% { opacity: 1; } 100% { opacity: 0; } }
.ov-chip { background: rgba(12,11,9,.62); }
.ov-check { background: rgba(45,45,45,.6); }
.ov-allin { background: rgba(228,0,43,.7); letter-spacing: 0; }
.ov-fold { background: rgba(12,11,9,.7); color: rgba(255,255,255,.85); }
.ov-sit { background: rgba(12,11,9,.55); color: rgba(255,255,255,.82); }
.ov-disc { background: rgba(150,20,30,.65); letter-spacing: .04em; }
.ov-won { background: rgba(11,125,73,.9); animation: pitWonReveal .4s cubic-bezier(.2,1.15,.35,1) both; }
.ov-won .ov-verb { font: 800 var(--pill-fs, 9px) var(--font-mono); letter-spacing: .12em; opacity: .85; line-height: 1; }
.ov-won .ov-amt { font: 900 var(--stack-fs, 14px) var(--font-display); line-height: 1.05; }
@keyframes pitWonReveal { 0% { opacity: 0; transform: scale(.5); } 60% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }

/* bets */
.live-bet {
    position: absolute; transform: translate(-50%, -50%); z-index: 5; display: inline-flex; align-items: center; gap: 4px;
    background: rgba(12,11,9,.82); color: #fff; font: 800 var(--bet-fs, 12px) var(--font-mono); letter-spacing: .02em;
    padding: 2px 7px 2px 5px; white-space: nowrap; border: 1px solid rgba(255,255,255,.3); box-shadow: 2px 2px 0 rgba(12,11,9,.3);
    animation: pitBetPop .26s cubic-bezier(.2,1.1,.35,1) both;
}
.live-bet-chip { width: calc(var(--bet-fs,12px) * .8); height: calc(var(--bet-fs,12px) * .8); border-radius: 50%; flex: 0 0 auto; background: var(--pit-red); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.65), 0 0 0 1px rgba(12,11,9,.4); }
@keyframes pitBetPop { 0% { transform: translate(-50%,-50%) scale(.4); opacity: 0; } 60% { transform: translate(-50%,-50%) scale(1.14); } 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; } }

/* states */
.live-seat.sitout .s-box { opacity: .7; border-style: dashed; }
.live-seat.disconnected .s-box { opacity: .8; }
.live-seat.disconnected .s-cards { opacity: .5; filter: grayscale(.5); }
.live-seat.folded .s-box { opacity: .5; }
.live-seat.active { z-index: 7; }
.live-seat.active .s-box { box-shadow: 0 0 0 3px #ffcc00, 0 0 16px 4px rgba(255,204,0,.75), 2px 2px 0 rgba(12,11,9,.2); animation: pitActivePulse 1s ease-in-out infinite; }
.live-seat.winner .s-box { box-shadow: 0 0 0 3px var(--pit-green), 2px 2px 0 rgba(12,11,9,.18); animation: pitWinnerPulse 1s ease-in-out infinite; }
@keyframes pitWinnerPulse { 0%,100% { box-shadow: 0 0 0 3px var(--pit-green), 2px 2px 0 rgba(12,11,9,.18); } 50% { box-shadow: 0 0 0 6px rgba(11,125,73,.5), 2px 2px 0 rgba(12,11,9,.18); } }
@keyframes pitActivePulse { 0%,100% { box-shadow: 0 0 0 3px #ffcc00, 0 0 12px 3px rgba(255,204,0,.6), 2px 2px 0 rgba(12,11,9,.2); } 50% { box-shadow: 0 0 0 5px #ffd633, 0 0 22px 7px rgba(255,204,0,.95), 2px 2px 0 rgba(12,11,9,.2); } }

/* empty seat */
.live-seat.empty .s-box { border-style: dashed; opacity: .5; background: transparent; }
.live-seat.empty .s-name { color: rgba(255,255,255,.7); font-weight: 600; letter-spacing: .06em; }

/* ====== Native HUD overlay (transparent page, drawn over P2 by the Android app) ====== */
html:has(.hud-overlay-root), body:has(.hud-overlay-root) { background: transparent !important; }
/* The HUD overlay is drawn over P2; never flash Blazor's white reconnect modal there. */
body:has(.hud-overlay-root) #components-reconnect-modal { display: none !important; }
.hud-overlay-root { position: fixed; inset: 0; pointer-events: none; font-family: var(--font-mono); }
.hud-wait { position: fixed; top: 8px; left: 8px; font: 700 .7rem var(--font-mono); color: #fff; background: rgba(12,11,9,.6); padding: 3px 7px; }
.hud-box {
    position: absolute; transform: translate(-50%, -50%); max-width: 140px;
    background: rgba(245,241,231,.96); border: 2px solid var(--pit-line); border-left-width: 5px;
    box-shadow: 2px 2px 0 rgba(12,11,9,.3); padding: 2px 5px; pointer-events: auto; cursor: pointer;
}
.hud-box.win { border-left-color: var(--pit-green); }
.hud-box.loss { border-left-color: var(--pit-red); }

/* Compact default: just the numbers (VPIP/PFR/3B/F3B/CB), no name, no labels, no %. */
.hud-mini { font: 800 .66rem var(--font-mono); letter-spacing: .01em; color: var(--pit-ink); white-space: nowrap; }
.hud-full { display: none; min-width: 96px; }
.hud-box.open .hud-mini { display: none; }
.hud-box.open .hud-full { display: block; }

.hud-name {
    font: 800 .62rem var(--font-mono); text-transform: uppercase; letter-spacing: .02em; color: var(--pit-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-bottom: 1.5px solid rgba(12,11,9,.15); padding-bottom: 1px; margin-bottom: 2px;
    display: flex; justify-content: space-between; gap: 6px;
}
.hud-hands { color: var(--pit-mut); font-weight: 600; }
.hud-grid { display: grid; grid-template-columns: auto 1fr; gap: 0 6px; font: 600 .56rem var(--font-mono); }
.hud-grid span { color: var(--pit-mut); text-transform: uppercase; }
.hud-grid b { color: var(--pit-ink); text-align: right; white-space: nowrap; }

/* Edit mode: highlight boxes so the user knows they can drag to nudge. */
html.hud-edit .hud-box { outline: 2px dashed var(--pit-green); cursor: move; }

/* Manual placement walk-through. */
.hud-banner {
    position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 99999;
    background: var(--pit-green); color: #fff; font: 800 .8rem var(--font-mono);
    padding: 8px 14px; border: 2px solid var(--pit-line); box-shadow: 3px 3px 0 rgba(12,11,9,.4);
    text-align: center; max-width: 92vw; pointer-events: none;
}
.hud-box.placing { outline: 3px solid var(--pit-green); box-shadow: 0 0 0 3px rgba(31,111,67,.4), 2px 2px 0 rgba(12,11,9,.3); }

/* Global BIG mode: every box shows the full labelled detail instead of the number line. */
html.hud-big .hud-box { min-width: 96px; }
html.hud-big .hud-box .hud-mini { display: none; }
html.hud-big .hud-box .hud-full { display: block; }

/* In-app native HUD flow (club → game → self-pick "me"). */
.hud-pick { max-width: 520px; margin: 0 auto; padding: 16px 14px 48px; font-family: var(--font-mono); }
.hud-pick-title { font: 800 1rem var(--font-display); text-transform: uppercase; letter-spacing: .03em; color: var(--pit-ink); margin: 6px 2px 14px; }
.hud-pick-empty { color: var(--pit-mut); font: 600 .8rem var(--font-mono); padding: 18px 2px; }
.hud-pick-note { color: var(--pit-mut); font: 600 .74rem var(--font-mono); margin: -6px 2px 14px; line-height: 1.4; }
.hud-pick-go-row { background: var(--pit-ink); color: var(--pit-paper); }
.hud-pick-go-row .hud-pick-go { color: var(--pit-paper); }
.hud-pick-row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: var(--pit-paper); border: 2px solid var(--pit-line); box-shadow: 3px 3px 0 rgba(12,11,9,.25);
    padding: 12px 14px; margin-bottom: 10px; cursor: pointer; color: var(--pit-ink);
    transition: transform .08s, box-shadow .08s;
}
.hud-pick-row:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 rgba(12,11,9,.3); }
.hud-pick-row:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(12,11,9,.25); }
.hud-pick-seat {
    flex: 0 0 auto; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    font: 800 .8rem var(--font-mono); background: var(--pit-ink); color: var(--pit-paper); border-radius: 2px;
}
.hud-pick-name { flex: 1 1 auto; font: 700 .92rem var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-pick-go { flex: 0 0 auto; font: 800 1.2rem var(--font-mono); color: var(--pit-mut); }
.hud-pick-back { background: none; border: none; color: var(--pit-mut); font: 700 .8rem var(--font-mono); cursor: pointer; margin-top: 8px; padding: 6px 2px; }
.hud-pick-back:hover { color: var(--pit-ink); }
.hud-pick-row--split { padding: 0; gap: 0; }
.hud-pick-main { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; background: none; border: none; cursor: pointer; color: inherit; padding: 12px 14px; text-align: left; }
.hud-pick-preview { flex: 0 0 auto; align-self: stretch; display: inline-flex; align-items: center; padding: 0 12px; border-left: 2px solid var(--pit-line); font: 700 .7rem var(--font-mono); text-transform: uppercase; color: var(--pit-mut); text-decoration: none; }
.hud-pick-preview:hover { background: var(--pit-ink); color: var(--pit-paper); }