/* ============================================================
   RouletteView — table styling (style-table.css)
   Vertical layout: 3 numbers per row, like a real casino table
   turned on its side. Add this file at your document root
   (it's already linked from header.php).
   ============================================================ */

:root {
    --rc-felt:  #238C00; /* Green table background */
	--rc-green: #40a829; /* Lighter Green zero cell */			 
    --rc-black: Black; /* BLACK numbers */
	--rc-red:   Red; /* RED numbers */
	--rc-odd: Fuchsia; /* ODD numbers */
    --rc-even: Purple; /* EVEN numbers */
    --rc-low: Turquoise; /* LOW numbers */
	--rc-high:   MediumBlue; /* high numbers */
	--rc-blue: #2f6fed;       /* same blue as .btn-primary (logout button) */
	--rc-blue-hover: #2457c7; /* same hover shade as .btn-primary:hover */
	--rc-gray: #8a94a3;       /* neutral — a covered zero is neither a win nor a loss */
}

/* Split-color chance-simple icon (replaces the old "(RB)"/"(OE)"/"(HL)"
   text suffix next to an asset's positional label, both in the main
   watchlist panel and the charts pop-out) — a small square, split by
   a vertical line into the exact 2 colors above for each side of the
   pair, so a player recognizes at a glance which pair a trade would
   be on (e.g. thinking twice before opening a second RB trade when
   one's already open — still allowed, just easier to notice) without
   reading any text at all. The short code stays available as a
   native title tooltip on hover (see csPairIconHtml() in
   watchlist-panel.js / charts-page.js) for anyone still learning what
   a given icon means, without a distracting "?" cursor forcing the
   point. Defined here rather than in watchlist-panel.css since this
   file is the one both pages already share. */
.rc-cs-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-bottom: 2px; /* nudges it up slightly to optically center against the text baseline beside it */
    margin-right: 5px; /* gap between icon and asset name: 3px original + 3px extra as requested, then -1px */
}
.rc-cs-icon-rb { background: linear-gradient(to right, var(--rc-red) 50%, var(--rc-black) 50%); }
.rc-cs-icon-oe { background: linear-gradient(to right, var(--rc-odd) 50%, var(--rc-even) 50%); }
.rc-cs-icon-hl { background: linear-gradient(to right, var(--rc-low) 50%, var(--rc-high) 50%); }

/* Shared with watchlist-panel.css's own copy of this exact rule —
   duplicated here (not just defined once) because charts-page.js
   reuses this same class on its own card headers but doesn't load
   watchlist-panel.css at all, same reasoning as .rc-cs-icon above. */
/* Signal: a thick orange underline under the asset's name — the same
   orange as its setup score pill (charts-page.css), a colour seen
   nowhere else on the charts or trades. */
.rc-wl-cell-asset-signal {
    text-decoration: underline;
    text-decoration-color: #FF5500;
    text-decoration-thickness: 4px;
    text-underline-offset: 3px;
}

/* Charts pop-out only (.rc-asset-card-name, not the main watchlist's
   own .rc-wl-cell-asset) — an extra 2px upward nudge on top of the
   shared 2px above, since the card header's own font/line-height sits
   the icon slightly lower than in the watchlist panel. */
.rc-asset-card-name .rc-cs-icon {
    margin-bottom: 4px;
}


/* Play page menu bar (app-views.css styles it): kept invisible until
   app-views.css has loaded. That file is linked further down the page,
   so on a hard reload (Ctrl+F5) the bar's buttons were briefly drawn as
   plain browser buttons — white, with a dark border — before their real
   look arrived. This file loads in the <head>, so the rule is there
   from the very first paint; app-views.css makes the bar visible. */
.rc-app-bar {
    visibility: hidden;
}

.rc-wrapper {
    display: flex;
    flex-wrap: wrap; /* the trade stickers (.rc-trades-column) drop below the tables when there isn't room for them on the right */
    gap: 15px; /* side-by-side needs at least ~461px total (176px table's
                  own clamp floor + 15px gap + 270px side column) — see
                  the 350-470px plan below, which stacks to cover this */
    align-items: flex-start;
}

/* Play page: the last numbers (.rc-side-column) and the trade stickers
   (.rc-trades-column) side by side in .rc-play-main — ALWAYS on one line,
   on a phone too — then the Watchlist (.rc-watchlist-column — the
   Watchlist sticker and the other-assets sticker; see
   watchlist-panel.css) at the far right. Everything fits on one line
   from 863px (209 + 12 + 300 + 12 + 330) — e.g. half of a 1920px
   screen. Narrower, the Watchlist drops below, across the whole width
   (its two stickers side by side when there's room). .rc-wrapper is a
   size container so that switch is decided by the space the Play page
   really has, the same way the natural flex wrapping is.
   On a narrow screen, inside .rc-play-main, the trade stickers give up
   width first (down to 220px), then the last-numbers table (its six
   colour columns narrow to a third, the numbers never — see below). */
.rc-wrapper {
    container-type: inline-size;
    container-name: rcplay;
    gap: 12px;
}
.rc-play-main {
    flex: 1 1 521px; /* 209 + 12 + 300 */
    min-width: 0;
    max-width: 741px; /* 209 + 12 + 520: the Watchlist comes right after the trade stickers */
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
}
/* No trade sticker yet (the initial entry, before "Done"): the trades
   column takes no room, so the entry box and the last numbers sit
   together. */
.rc-play-main:not(:has(.rc-trade-sticker)) {
    flex-basis: 221px; /* the last numbers alone (209 + 12) */
}
.rc-play-main .rc-trades-column:not(:has(.rc-trade-sticker)) {
    flex: 0 0 0;
    min-width: 0;
}
.rc-trades-column {
    flex: 1 1000 300px; /* gives up its width long before the last numbers do */
    /* 220px — or, on a very narrow phone, whatever is left once the
       last numbers are at their own minimum (113px + the gap). */
    min-width: min(220px, calc(100% - 125px));
    max-width: 520px;
}
/* Beside the tables (see syncTradesColumn() in app-views.js): the blue
   "Session #… · All Trades" sticker's top edge lines up with the top of
   the last-numbers table (its title, which straddles that edge, rises
   into the free space above). Below the tables it keeps its usual 32px,
   clear of the Spin button / roulette table. */
.rc-trades-column-beside .rc-trade-sticker-global-merged {
    margin-top: 0;
}

.rc-board-panel {
    flex: 0 1 270px;
    min-width: 176px;
}

/* Nothing to show in it (the roulette table is the keypad in the menu
   bar now — see roulette.js, syncBoardPanel()): the column goes away,
   so the last numbers and the trades open the Play page. */
.rc-board-panel.rc-board-panel-empty {
    display: none;
}

.rc-board-panel.rc-board-panel-bulk-entry {
    flex: 1 1 270px;
    max-width: 370px;
}

.rc-session-controls {
    width: 100%;
    box-sizing: border-box;
    margin-top: 18px;
    margin-bottom: 20px; /* Versailles symmetry: same distance to the table as .rc-practice-btn's own margin-top below it */
}

/* Whichever one of the 4 status/message divs is currently visible —
   always a direct <div> child here, never the <button> itself — gets
   its own breathing room below it before the Start Session button. */
.rc-session-controls > div {
    margin-bottom: 10px;
}

.rc-session-controls button {
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 4px;
    background: var(--rc-blue);
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.rc-session-controls button:hover:not(:disabled) {
    background: var(--rc-blue-hover);
}

.rc-session-controls button:disabled {
    background: #999;
    cursor: not-allowed;
}

/* ── No session: the "lobby" — two big buttons side by side, centered
   (play.php). The statuses (sessions left today, break time, limits)
   sit under Start Session. Only while no session runs. ── */
.rc-lobby {
    display: none;
}
body.rc-no-session .rc-lobby {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    /* Far apart on a wide screen (168px), closer as it narrows. */
    gap: 22px clamp(60px, 22vw, 230px); /* wide enough for the wide texts under the buttons (below) */
    /* Lower on the page, more central — like a game's start screen —
       from 60px on a short screen up to 140px on a tall one. */
    margin: clamp(60px, 13vh, 140px) 0 30px;
}
.rc-lobby-col {
    flex: 0 0 180px;
    min-width: 0; /* the status under the button may be wider than it: it spreads past both sides, the two buttons stay in place */
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Extra space between a lobby button and the status text under it
   (remaining sessions / cooldown countdown...): 14px here + the 14px
   top margin of the text itself = 28px. Put on the button rather than
   on the text so several stacked messages keep their normal 14px gap. */
.rc-session-controls .rc-lobby-col > .rc-lobby-btn {
    margin-bottom: 14px;
}
.rc-session-controls .rc-lobby-col > div {
    margin: 14px 0 0;
    text-align: center;
    width: max-content; /* on one line, centred under the button (may spread a little past it) */
    max-width: 360px; /* a long text (the practice note) on 3 lines at most */
}
.rc-session-controls .rc-lobby-btn {
    position: relative;
    overflow: hidden;
    width: 180px;
    height: 160px;
    padding: 18px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: none;
    border-radius: 18px;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
/* A glossy top half, like a game's start button. */
.rc-session-controls .rc-lobby-btn::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04));
    pointer-events: none;
}
.rc-session-controls .rc-lobby-btn-real {
    background: linear-gradient(160deg, #4d86f7 0%, #2f6fed 45%, #1f4fc1 100%);
    box-shadow: 0 6px 0 #173d96, 0 12px 22px rgba(31, 79, 193, 0.35);
}
.rc-session-controls .rc-lobby-btn-practice {
    background: linear-gradient(160deg, #ff8a3d 0%, #ff5500 45%, #d64300 100%);
    box-shadow: 0 6px 0 #a83500, 0 12px 22px rgba(214, 67, 0, 0.35);
}
.rc-session-controls .rc-lobby-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    filter: brightness(1.06);
}
.rc-session-controls .rc-lobby-btn-real:hover:not(:disabled) {
    background: linear-gradient(160deg, #4d86f7 0%, #2f6fed 45%, #1f4fc1 100%);
    box-shadow: 0 9px 0 #173d96, 0 16px 26px rgba(31, 79, 193, 0.4);
}
.rc-session-controls .rc-lobby-btn-practice:hover:not(:disabled) {
    background: linear-gradient(160deg, #ff8a3d 0%, #ff5500 45%, #d64300 100%); /* stays orange (the shared button hover is blue) — the brightness filter above lightens it */
    box-shadow: 0 9px 0 #a83500, 0 16px 26px rgba(214, 67, 0, 0.4);
}
/* Pressed: it sinks into its base. */
.rc-session-controls .rc-lobby-btn:active:not(:disabled) {
    transform: translateY(4px);
}
.rc-session-controls .rc-lobby-btn-real:active:not(:disabled) {
    box-shadow: 0 2px 0 #173d96, 0 4px 10px rgba(31, 79, 193, 0.3);
}
.rc-session-controls .rc-lobby-btn-practice:active:not(:disabled) {
    box-shadow: 0 2px 0 #a83500, 0 4px 10px rgba(214, 67, 0, 0.3);
}
/* Not available yet (break time, daily limit, loss limit). */
.rc-session-controls .rc-lobby-btn:disabled {
    background: linear-gradient(160deg, #b8bec8 0%, #9aa2ae 100%);
    box-shadow: 0 6px 0 #7d8592, 0 10px 18px rgba(0, 0, 0, 0.12);
    cursor: not-allowed;
}
.rc-session-controls .rc-lobby-btn:focus:not(:focus-visible) {
    outline: none;
}
.rc-session-controls .rc-lobby-btn:focus-visible {
    outline: 3px solid #ffd54a;
    outline-offset: 3px;
}
.rc-lobby-btn-icon {
    display: inline-flex;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.rc-lobby-btn-icon svg {
    display: block;
}
.rc-lobby-btn-label {
    position: relative; /* above the gloss */
    max-width: 100%;
}
/* Small phones: smaller buttons, still side by side when they fit. */
@media (max-width: 470px) {
    body.rc-no-session .rc-lobby {
        gap: 18px 30px;
        margin: clamp(30px, 8vh, 70px) 0 24px;
    }
    .rc-lobby-col {
        flex-basis: 145px;
    }
    .rc-session-controls .rc-lobby-btn {
        width: 145px;
        height: 135px;
        font-size: 13px;
        gap: 9px;
    }
    .rc-lobby-btn-icon svg {
        width: 34px;
        height: 34px;
    }
    .rc-session-controls .rc-lobby-col > div {
        width: auto;
        max-width: 165px; /* wraps under its button rather than running off the screen */
    }
}

#sessionStatus {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #3b4a5a;
    padding: 6px;
}

#cooldownStatus {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #999;
    padding: 6px;
}

#dailyLimitStatus {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: var(--rc-red);
    padding: 6px;
}

#dailyLimitStatus a {
    color: var(--rc-blue);
}

/* The practice note is long: up to 600px wide it stays within its own
   column (wrapping more) instead of spreading past it — otherwise its
   right edge ran off a narrow screen. */
/* Narrow screens: the two buttons one under the other, each with its
   own text under it, as wide as the screen allows (3 lines at most). */
@media (max-width: 760px) {
    body.rc-no-session .rc-lobby {
        flex-direction: column;
        align-items: center;
        gap: 26px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 12px; /* the texts never touch the screen's edges */
    }
    .rc-lobby-col {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    .rc-session-controls .rc-lobby-col > div,
    .rc-session-controls .rc-lobby-col > #practiceRandomNote {
        width: auto;
        max-width: min(380px, 100%); /* never wider than its column (= the lobby's own width here) */
        box-sizing: border-box;
        overflow-wrap: break-word;
    }
}
#remainingSessionsStatus,
#practiceRandomNote { /* under Start Practice Session: same look, same height */
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #3b4a5a;
    padding: 3px 6px;
    margin-top: 14px; /* under the Start Session button (the lobby) */
}

.rc-side-panel {
    width: 100%; /* 209px at full width: 197px scroll container (180px table + 17px scrollbar allowance) + 6px padding each side */
    box-sizing: border-box;
    background: #fff;
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    position: relative;
    container-type: inline-size; /* the last numbers' header and rows size on it (100cqw) */
}

.rc-onboarding-modal {
    max-width: 360px;
    text-align: center;
}

.rc-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rc-blue);
    color: #fff;
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 4px;
}

.rc-onboarding-modal p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #3b4a5a;
    text-align: left;
}

.rc-onboarding-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    font-weight: normal;
}

.rc-onboarding-modal .jr-modal-actions {
    justify-content: center;
}

/* --- Roulette table --- */

.roulette-table {
    background: var(--rc-felt);
    padding: 8px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    /* .rc-board-panel (the shared parent) now genuinely flex-shrinks
       between 176-270px as the viewport narrows — the 176px floor is
       where each cell's own width is still at least 2x its own 26px
       height (3 cells + 2x2px gaps + 2x8px padding = 176px). This
       child just tracks that already-constrained parent width via
       100%, rather than computing its own clamp independently. */
    width: 100%;
}

/* --- Initial entry (numbers entered before trading starts) --- */

.rc-bulk-entry {
    width: 100%; /* tracks .rc-board-panel's own width — normally 176-270px, or up to 370px during bulk-entry, when the side column is hidden and .rc-board-panel-bulk-entry lets the parent claim some of that freed space */
    box-sizing: border-box;
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.rc-bulk-prompt {
    margin-bottom: 8px;
}

.rc-bulk-prompt p {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
    color: #3b4a5a;
    text-align: left;
}

.rc-bulk-minimum {
    padding-right: 26px; /* clear of the "?" (top right, same line) */
}

.rc-bulk-prompt p:last-child {
    margin-bottom: 0;
}

.rc-bulk-counter {
    font-size: 12px;
    font-weight: bold;
    color: #3b4a5a;
    text-align: right;
    margin: 4px 0 8px;
}

.rc-bulk-error {
    font-size: 12px;
    color: #dc3545;
    margin: 4px 0;
}

#bulkEntryInput {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#bulkEntrySaveBtn {
    margin-top: 5px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 4px;
    background: var(--rc-blue);
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

#bulkEntrySaveBtn:hover:not(:disabled) {
    background: var(--rc-blue-hover);
}

/* Greyed out until the minimum number of initial numbers is reached —
   same disabled look as Start Session. */
#bulkEntrySaveBtn:disabled {
    background: #999;
    cursor: not-allowed;
}

/* --- Initial entry: keypad field + Add button (numbers can also be
   tapped on the roulette table above) --- */
.rc-initial-entry-row {
    margin-top: 12px; /* breathing room below the "Click on roulette table cells…" bullet */
    display: flex;
    justify-content: center;
    gap: 6px;
}

/* Two digits at most — about as wide as the Add button next to it. */
#initialEntryInput {
    flex: 0 0 64px;
    width: 64px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    padding: 7px 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.15s, background 0.15s;
}

#initialEntryInput::placeholder {
    font-size: 12px;
    font-weight: normal;
}

#initialEntryInput:focus {
    outline: none;
    border-color: var(--rc-blue);
}

#initialEntryInput.rc-input-invalid {
    border-color: #dc3545;
    background: #fdf2f1;
}

#initialEntryAddBtn {
    flex: 0 0 64px;
    padding: 7px 12px;
    border: none;
    border-radius: 4px;
    background: var(--rc-blue);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

#initialEntryAddBtn:hover {
    background: var(--rc-blue-hover);
}

/* --- Help "?" in the initial-entry box's top-right corner, and its
   dialog (reuses the .jr-modal pattern, like the onboarding dialog) --- */
#bulkEntrySection {
    position: relative;
}

.rc-help-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #cfe8fa;
    color: #2f6fed;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    transition: 0.15s;
}

.rc-help-icon:hover {
    background: #b8dcf5;
}

.rc-initial-entry-help-modal {
    max-width: 380px;
}

.rc-initial-entry-help-modal ul {
    list-style: none; /* explicit blue bullets instead (same • as elsewhere on the Play page) */
    margin: 0;
    padding: 0;
}

.rc-initial-entry-help-modal li {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #3b4a5a;
    text-align: left;
}

.rc-initial-entry-help-modal li .rc-bullet {
    flex-shrink: 0;
}

.rc-initial-entry-help-modal .jr-modal-actions {
    justify-content: center;
    margin-top: 22px; /* the usual 14px + 8px */
}

/* --- Entry order switch: "I'm entering: Newest first | Oldest first" --- */
.rc-entry-order {
    margin: 4px 0 10px;
}

.rc-entry-order-label {
    /* Same look as the bullet points below it (.rc-bulk-prompt p) */
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
    color: #3b4a5a;
    margin-bottom: 8px; /* breathing room before the switch */
}

.rc-entry-order-switch {
    display: flex;
    border: 1px solid var(--rc-blue);
    border-radius: 4px;
    overflow: hidden;
}

.rc-entry-order-switch button {
    flex: 1 1 50%;
    padding: 6px 4px;
    border: none;
    background: #fff;
    color: var(--rc-blue);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.15s;
}

.rc-entry-order-switch button + button {
    border-left: 1px solid var(--rc-blue);
}

.rc-entry-order-switch button.rc-entry-order-active {
    background: var(--rc-blue);
    color: #fff;
}

.rc-entry-order-switch button:hover:not(:disabled):not(.rc-entry-order-active) {
    background: #eaf1fe;
}

/* Locked (at least one number entered): the chosen order stays
   readable, the other one is clearly unavailable. */
.rc-entry-order-locked .rc-entry-order-switch {
    border-color: #b9c0cb;
}

.rc-entry-order-locked .rc-entry-order-switch button {
    cursor: not-allowed;
    color: #a0a8b4;
}

.rc-entry-order-locked .rc-entry-order-switch button + button {
    border-left-color: #b9c0cb;
}

.rc-entry-order-locked .rc-entry-order-switch button.rc-entry-order-active {
    background: #8a94a3;
    color: #fff;
}

.rc-bulk-counter-note {
    font-weight: normal;
    color: #7a8896;
}

/* Discreet way out during the initial-entry phase (the blue session
   sticker, which normally holds End Session, only appears after Done). */
.rc-initial-entry-end {
    display: block;
    margin: 10px auto 0;
    padding: 2px 4px;
    border: none;
    background: none;
    color: #7a8896;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.rc-initial-entry-end:hover {
    color: #3b4a5a;
}

/* Some breathing room between the table (tap pad) and the entry box
   below it. */
#bulkEntrySection {
    margin-top: 14px;
}

.zero-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}

.zero-row .cell {
    grid-column: 2; /* middle column — same slot as "2" in the row below */
}

/* KEY CHANGE: 3 columns instead of 12 → numbers wrap
   automatically into rows of 3 (1,2,3 / 4,5,6 / ... / 34,35,36) */
.roulette-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    transition: transform 0.1s ease;
}

.cell:hover {
    transform: scale(1.05);
    border-color: #fff;
}

.cell.selected {
    border-color: #ffd700;
    box-shadow: 0 0 6px #ffd700;
}

.cell.red   { background: var(--rc-red); }
.cell.black { background: var(--rc-black); }
.cell.green { background: var(--rc-green); }

/* --- Pending / validate --- */

.rc-pending {
    margin-top: 16px;
    padding: 10px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    width: 100%; /* .rc-board-panel (the shared parent) now genuinely flex-shrinks between 176-270px, so 100% here already tracks that bound correctly without needing its own clamp */
    box-sizing: border-box;
}

.rc-pending button {
    padding: 8px 14px;
    border: none;
    border-radius: 4px;
    background: var(--rc-blue);
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.rc-pending button:hover:not(:disabled) {
    background: var(--rc-blue-hover);
}

.rc-pending button:disabled {
    background: #999;
    cursor: not-allowed;
}

.rc-end-session {
    margin-top: 10px;
    width: 100%; /* .rc-board-panel (the shared parent) now genuinely flex-shrinks between 176-270px, so 100% here already tracks that bound correctly without needing its own clamp */
    box-sizing: border-box;
}

.rc-end-session button {
    width: 100%;
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: transparent;
    color: #777;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    transition: 0.2s;
}

.rc-end-session button:hover {
    background: #f5f5f5;
    border-color: #999;
    color: #555;
}


.rc-results-number {
    font-size: 0.85em;
    font-weight: 400;
}


/* --- Toast: brief, self-dismissing, never blocks the screen --- */

#rcToast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    padding: 12px 26px;
    border-radius: 6px;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    z-index: 9999;
    opacity: 0;
    pointer-events: none; /* never intercepts clicks, even while fading */
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#rcToast.rc-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#rcToast.rc-toast-win {
    background: var(--rc-green);
}

#rcToast.rc-toast-zero {
    background: #b8860b; /* amber — distinct from win green and loss red */
}

#rcToast.rc-toast-warning {
    background: #d35400; /* stronger orange — more urgent than zero's amber, distinct from red (loss) */
}

/* --- Last numbers table --- */

/* 7 cells x 24px + 6 gaps x 2px = 180px — the table's full width.
   On a narrow screen the six colour columns (R B O E L H) narrow down
   to a third (8px): only their colour matters. The number column always
   keeps its 24px, for readability. Header and rows share the same
   width — the PANEL's, minus the 17px scrollbar allowance (100cqw: the
   panel is a size container, see .rc-side-panel) — so their columns
   stay lined up whether the rows' scrollbar takes room (Windows, or a
   Mac with a mouse) or not (overlay scrollbars). */
.rc-numbers-row-header {
    width: calc(100cqw - 17px);
    max-width: 180px;
    box-sizing: border-box;
    display: flex;
    gap: 2px;
    margin-bottom: 4px;
}

.rc-num-header-cell {
    flex: 1 1 24px;
    min-width: 8px;
    max-width: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Matches .rc-spin-number-counter exactly, per request. */
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #7a8896;
}

/* 17px scrollbar allowance beyond the table's own 180px content width
   — reserved here, in the scrolling parent, rather than in the grid
   itself below, so the scrollbar (when it appears) never squeezes the
   grid's own columns narrower and out of alignment with the fixed-
   width header row above it. */
.rc-last-numbers-scroll {
    width: 100%; /* 197px at full width */
    /* Recomputed — the first pass compared against .rc-board-panel,
       which has no padding/background of its own; the actual visible
       roulette "card" is .roulette-table (the green felt), which adds
       8px of padding top and bottom (16px total) that was missed
       entirely. Corrected board total: 378px (362px grid+zero-row
       content + 16px .roulette-table padding). Sticker's own
       non-scroll parts still total 72px, so 378 - 72 = 306px. */
    max-height: 312px;
    overflow-y: auto;
}

.rc-last-numbers-grid {
    width: calc(100cqw - 17px); /* NOT 100% of the scroll box: a real scrollbar already narrows that one */
    max-width: 180px;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.rc-numbers-row {
    display: flex;
    gap: 2px;
}

.rc-num-header-cell:first-child {
    flex: 0 0 24px; /* over the numbers: never narrower */
}

.rc-num-cell {
    flex: 0 0 24px;
    width: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    background: #f4f5f8;
    border: 1px solid transparent;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 700;
}

.rc-num-cell.rc-num-color-red   { color: var(--rc-red);   border-color: var(--rc-red); }
.rc-num-cell.rc-num-color-black { color: var(--rc-black); border-color: var(--rc-black); }
.rc-num-cell.rc-num-color-green { color: var(--rc-green); border-color: var(--rc-green); }

.rc-num-cell-empty {
    background: #f4f5f8;
    border: 1px solid #d8dbe3;
}

/* One cell per column, always present whether active or not — the
   6 columns are red / black / odd / even / low / high, in that fixed
   order, each reusing the exact same colors as the R/B/O/E/L/H
   suggestion squares on a trade sticker (same CSS variables). */
.rc-num-indicator {
    flex: 1 1 24px;
    min-width: 8px; /* a third of its full width — never narrower */
    max-width: 24px;
    height: 22px;
    box-sizing: border-box;
    border-radius: 2px;
    background: #f4f5f8;
    border: 1px solid #d8dbe3;
}

.rc-num-indicator.rc-ind-active.rc-ind-red   { background: var(--rc-red); border-color: transparent; }
.rc-num-indicator.rc-ind-active.rc-ind-black { background: var(--rc-black); border-color: transparent; }
.rc-num-indicator.rc-ind-active.rc-ind-odd   { background: var(--rc-odd); border-color: transparent; }
.rc-num-indicator.rc-ind-active.rc-ind-even  { background: var(--rc-even); border-color: transparent; }
.rc-num-indicator.rc-ind-active.rc-ind-low   { background: var(--rc-low); border-color: transparent; }
.rc-num-indicator.rc-ind-active.rc-ind-high  { background: var(--rc-high); border-color: transparent; }

/* Zero has none of the 6 indicator conditions true (it's neither
   red/black/odd/even/low/high) — the 6 indicator cells turn the same
   green as the roulette board's own zero cell. The number cell itself
   (column 1) is NOT included here — it keeps its own neutral
   background with green text/border instead, via rc-num-color-green
   above, same treatment every other number gets. !important because
   this genuinely needs to win over every per-cell rule above
   regardless of specificity. */
.rc-numbers-row-zero .rc-num-indicator {
    background: var(--rc-green) !important;
    border-color: transparent !important;
}

.rc-cancel-mode-row {
    /* 3 fixed columns: ✕ | Timing switch (centered in the middle
       column) | spin counter (right-aligned in its own column). Each
       item has its own column, so the switch never moves — whatever
       the counter says, and whether or not the switch is shown. */
    display: grid;
    grid-template-columns: 33% 1fr 50px; /* 50px = "17 spins": balanced for the usual counts; longer ones spill leftwards into the spare space */
    column-gap: 6px;
    align-items: center;
    margin-top: 6px;
}

.rc-cancel-mode-row #cancelLastNumberBtn { grid-column: 1; width: 100%; }
.rc-cancel-mode-row #rcSpinChronoSticker { grid-column: 2; justify-self: center; position: relative; left: 5px; } /* nudged 5px right of the exact center */
.rc-cancel-mode-row #rcSpinNumberCounter { grid-column: 3; justify-self: end; }

.rc-spin-number-counter {
    margin-right: 2px;
    text-align: right;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #7a8896;
    font-variant-numeric: tabular-nums;
    cursor: help;
}

.rc-cancel-btn {
    flex: 0 0 33%;
    box-sizing: border-box;
    height: 21px;
    padding: 4px 2px;
    border: none;
    border-radius: 3px;
    background: #8a94a3; /* muted gray — an action, not part of the data list above it */
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s;
}

.rc-cancel-btn:hover:not(:disabled) {
    background: #6f7a8a;
}

.rc-cancel-btn:disabled {
    background: #d5d9e0;
    color: #fff;
    cursor: not-allowed;
}

.rc-side-separator {
    border-top: 1px solid #e5e8ee;
    margin: 8px 0;
}

.rc-side-column {
    display: flex;
    flex-direction: column;
    /* 209px — just the last-numbers panel's own full width. It only
       shrinks once the trade stickers beside it can't give up any more
       width (their shrink factor is 1000 times bigger — see
       .rc-play-main .rc-trades-column), down to 113px: the number column
       (24px) + the six colour columns at a third of their width
       (6 x 8px) + their gaps, the scrollbar room and the padding. */
    flex: 0 1 209px;
    min-width: 113px;
    gap: 8px;
}

.rc-bullet {
    color: var(--rc-blue);
}

/* --- Mobile: only stack when it genuinely can't be avoided — below
   this, even the tightest side-by-side sizing (see the 350-374px plan
   below) can't fit anymore. Covers only very small/legacy devices. --- */
@media (max-width: 349px) {
    .rc-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .rc-play-main {
        flex: none;
        width: 100%; /* last numbers + trade stickers still side by side */
        max-width: none;
        gap: 8px;
    }
    .rc-watchlist-column {
        flex: none;
        width: 100%;
        min-width: 0;
    }
}

/* --- Narrow/mid phones (~350-470px): side-by-side needs ~461px total
   (176px table's own clamp floor + 15px gap + 270px side column, now
   that the numbers grid's cells are larger — 10 * 24px + gaps +
   padding = 270px, up from the old 220px) — stacks across this whole
   range instead. --- */
@media (min-width: 350px) and (max-width: 470px) {
    .rc-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 13px;
    }
    .roulette-table,
    .rc-pending,
    .rc-bulk-entry,
    .rc-end-session {
        width: 270px;
    }
    .rc-play-main {
        flex: none;
        width: 100%; /* last numbers + trade stickers still side by side */
        max-width: none;
        gap: 8px;
    }
    .rc-watchlist-column {
        flex: none;
        width: 100%;
        min-width: 0;
    }
}

/* ============================================================
   Scorecard page — session history, filters, day grouping.
   Reuses .rc-results-win / .rc-results-miss / .rc-results-zero
   (defined above) for the mini per-suggestion cells, so the
   green/red visual language matches the live results table.
   ============================================================ */

.sc-filters {
    margin-bottom: 20px;
    background: #fff;
    padding: 14px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.sc-filter-presets {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

#PageContent .sc-preset-btn {
    padding: 6px 14px;
    border-radius: 4px;
    background: #f0f0f0;
    color: #3b4a5a;
    text-decoration: none;
    border-bottom: none; /* site-wide link style adds a dotted underline — not wanted on these pill buttons */
    font-size: 13px;
    font-weight: bold;
}

#PageContent .sc-preset-btn:hover {
    color: #3b4a5a;
    border-bottom: none;
}

#PageContent .sc-preset-btn.sc-preset-active,
#PageContent .sc-preset-btn.sc-preset-active:hover {
    background: var(--rc-blue);
    color: #fff;
}

.sc-filter-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    font-size: 13px;
}

.sc-filter-custom label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #3b4a5a;
}

.sc-filter-custom input {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

.sc-export-btn {
    padding: 6px 12px;
    font-size: 13px;
}

.sc-export-btn-csv {
    margin-left: auto;
}

/* Journal's PDF button (alone on the right of the presets row) + the
   same spinner under it as the Scorecard's */
.rc-pdf-btn-wrap { position: relative; display: inline-block; }
.jr-pdf-btn-wrap { margin-left: auto; }
.rc-pdf-spinner {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -9px;
    margin-top: 8px;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(37, 99, 235, 0.25);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: rcPdfSpin 0.7s linear infinite;
}
@keyframes rcPdfSpin {
    to { transform: rotate(360deg); }
}

.sc-day-separator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #ddd;
}

.sc-day-date {
    font-size: 15px;
    font-weight: bold;
    color: #3b4a5a;
}

.sc-day-date-wrap {
    display: flex;
    align-items: center;
}

.sc-day-total {
    font-size: 14px;
    font-weight: bold;
}

.sc-session {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    margin-bottom: 14px;
    overflow: hidden;
}

.sc-session-header {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 14px;
    background: #f7f9fc;
    font-size: 13px;
    align-items: center;
}

.sc-col-id {
    font-weight: bold;
    color: #3b4a5a;
    min-width: 90px;
}

.sc-session-inactivity-note {
    font-size: 0.85em;
    font-style: italic;
    color: #7a8896;
    position: relative;
    top: 2px;
}

.sc-col-result {
    margin-left: auto;
    font-weight: bold;
}

.sc-col-cumulative {
    font-size: 0.85em;
    font-weight: 500;
}

.sc-trade-card {
    background: #ffffff;
    border: 1px solid #d8dbe3;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 12px 10px 12px;
}

.sc-trade-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sc-trade-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #2d3a4a;
}

.sc-trade-card-total {
    font-size: 14px;
    font-weight: 700;
}

.sc-trade-card-actions {
    display: flex;
    align-items: center;
}

.sc-delete-trade-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #d8dbe3;
    border-radius: 4px;
    background: transparent;
    color: #999999;
    cursor: pointer;
}

.sc-delete-trade-btn:hover {
    border-color: var(--rc-red);
    color: var(--rc-red);
    background: #fdf2f1;
}

.sc-total-positive { color: var(--rc-green); }
.sc-total-negative { color: var(--rc-red); }

.sc-empty {
    color: #777;
    font-style: italic;
    padding: 20px 0;
}
/* ============================================================
   Journal page — blog-style entry list + edit modal.
   Filter bar reuses .sc-filters / .sc-preset-btn (Scorecard) as-is.
   ============================================================ */

.jr-entry {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 14px 16px;
    margin-bottom: 16px;
    transition: background 1.5s ease;
}

.jr-entry.jr-entry-highlight {
    background: #f0e6fa; /* light purple flash, fades back to white */
}

.jr-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.jr-session-link {
    font-size: 13px;
    font-weight: bold;
    color: var(--rc-blue);
    text-decoration: none;
    border-bottom: none;
}

.jr-session-link:hover {
    text-decoration: underline;
}

.jr-entry-actions {
    display: flex;
    gap: 8px;
}

.jr-edit-btn,
.jr-delete-btn,
.jr-pin-btn {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #777;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.15s;
}

.jr-edit-btn:hover {
    background: var(--rc-blue);
    border-color: var(--rc-blue);
    color: #fff;
}

.jr-delete-btn:hover {
    background: var(--rc-red);
    border-color: var(--rc-red);
    color: #fff;
}

.jr-pin-btn:hover {
    background: #e0a800;
    border-color: #e0a800;
    color: #fff;
}

/* Already pinned — stays visually distinct even without hovering,
   unlike Edit/Delete which only reveal their color on hover */
.jr-pin-btn.jr-pin-active {
    background: #ffc107;
    border-color: #ffc107;
    color: #fff;
}

.jr-pin-btn.jr-pin-active:hover {
    background: #e0a800;
    border-color: #e0a800;
}

/* The whole card gets a subtle highlight too, so a pinned entry is
   recognizable even scrolled past its header */
.jr-entry.jr-entry-pinned {
    border-left: 4px solid #ffc107;
}

.jr-standalone-add {
    margin-bottom: 16px;
}

#jrAddStandaloneBtn {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    background: var(--rc-blue);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.15s;
}

#jrAddStandaloneBtn:hover {
    background: var(--rc-blue-hover);
}

.jr-entry-text {
    font-size: 14px;
    line-height: 1.6;
    color: #2d3a4a;
    white-space: pre-wrap;
}

.jr-entry-meta {
    margin-top: 10px;
    font-size: 11px;
    color: #999;
}

/* --- Edit modal --- */

.jr-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jr-modal {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.jr-modal-title {
    font-weight: bold;
    font-size: 16px;
    color: #3b4a5a;
    margin-bottom: 12px;
}

.jr-modal textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 140px;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

.jr-modal-counter {
    text-align: right;
    font-size: 12px;
    color: #777;
    margin-top: 4px;
}

.jr-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.jr-modal-cancel {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-weight: bold;
    cursor: pointer;
}

.jr-modal-cancel:hover {
    background: #f5f5f5;
}
/* ============================================================
   Add Journal Entry prompt (play.php) — appears between sessions.
   Reuses .jr-modal-counter / .jr-modal-cancel from the Journal page.
   ============================================================ */

.rc-add-journal {
    width: 100%; /* .rc-board-panel (the shared parent) now genuinely flex-shrinks between 176-270px, so 100% here already tracks that bound correctly without needing its own clamp */
    box-sizing: border-box;
    margin-top: 20px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

#addJournalBtn {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #3b4a5a;
    cursor: pointer;
    transition: 0.2s;
    line-height: 1.4;
}

.rc-journal-btn-line1 {
    display: block;
    font-size: 12px;
    font-weight: bold;
}

.rc-journal-btn-line2 {
    display: block;
    font-size: 10px;
    font-weight: normal;
    color: #999;
}

#addJournalBtn:hover .rc-journal-btn-line2 {
    color: #e6f0ff; /* stays legible against the blue hover background */
}

#addJournalBtn:hover {
    background: var(--rc-blue);
    border-color: var(--rc-blue);
    color: #fff;
}

#addJournalTextarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 90px;
    padding: 8px;
    font-family: inherit;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

#addJournalSaveBtn {
    margin-top: 8px;
    margin-right: 8px;
    padding: 8px 16px;
}

#addJournalSaved {
    color: var(--rc-green);
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    padding: 4px;
}
/* ============================================================
   Scorecard: "Create Journal Entry" row per session.
   Reuses .jr-modal-overlay / .jr-modal / .jr-session-link (defined
   above) for the modal and the resulting "View" link.
   ============================================================ */

.sc-journal-row {
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.sc-create-journal-btn {
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px dashed #ccc;
    background: #fff;
    color: #777;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.15s;
}

.sc-create-journal-btn:hover {
    background: var(--rc-blue);
    border-color: var(--rc-blue);
    border-style: solid;
    color: #fff;
}

.sc-delete-session-btn {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #777;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.15s;
}

.sc-delete-session-btn:hover {
    background: var(--rc-red);
    border-color: var(--rc-red);
    color: #fff;
}

/* --- Pagination (Scorecard + Journal) --- */

.sc-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

#PageContent .sc-page-link {
    padding: 8px 16px;
    border-radius: 4px;
    background: var(--rc-blue);
    color: #fff;
    text-decoration: none;
    border-bottom: none;
    font-weight: bold;
    font-size: 13px;
}

#PageContent .sc-page-link:hover {
    background: var(--rc-blue-hover);
    color: #fff;
    border-bottom: none;
}

.sc-page-status {
    font-size: 13px;
    color: #777;
    font-weight: bold;
}
/* ============================================================
   Spin Chrono — pure client-side stopwatch, time since last spin.
   A small show/hide switch in the row under the last-numbers table,
   between the ✕ button and the spin counter (see spin-chrono.js).
   ============================================================ */

.rc-spin-chrono-switch {
    /* Small on/off switch in the row under the last-numbers table
       (after the ✕ button) — same height as ✕. Hidden state: a
       discreet clock icon on a neutral background, border only. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Centered in the middle column of .rc-cancel-mode-row. */
    box-sizing: border-box;
    height: 21px;
    min-width: 46px; /* same width with the clock icon or the time */
    padding: 0 5px;
    border: 1px solid #d8dbe3;
    border-radius: 3px;
    background: #f4f5f8;
    color: #7a8896;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: 0.15s;
}

.rc-spin-chrono-switch:hover {
    border-color: #b9c0cb;
    color: #3b4a5a;
}

.rc-spin-chrono-icon {
    display: inline-flex;
}

/* Shown state: the live time on the same blue as before. */
.rc-spin-chrono-switch.rc-spin-chrono-shown {
    background: #4a90d9;
    border-color: #3a7bc0;
    color: #fff;
}

.rc-spin-chrono-switch.rc-spin-chrono-shown:hover {
    background: #3a7bc0;
}

.rc-spin-chrono-time {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Session tags (js/session-tags.js, includes/session-tags-ui.php)
   Chips: green = good habit, amber = warning sign, blue = own tag.
   ============================================================ */
.rc-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 12px;
    margin: 0 5px 5px 0;
    border: 1px solid transparent;
    white-space: nowrap;
}
.rc-tag-good   { background: #e3f4e6; color: #22713a; border-color: #b9e0c1; }
.rc-tag-warn   { background: #fdf0d9; color: #94590a; border-color: #f2d49c; }
.rc-tag-custom { background: #e2eefa; color: #2a5f94; border-color: #b8d3ef; }

/* Picker (end-of-session dialog + Scorecard editor) */
.rc-tag-picker { margin-bottom: 4px; }
.rc-tag-picker-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.rc-tag-chip {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #c8ced8;
    color: #4a5868;
    cursor: pointer;
    font-family: inherit;
}
.rc-tag-chip:hover { border-color: #8d99a8; }
.rc-tag-chip.rc-tag-good.rc-tag-on   { background: #2e8b4a; border-color: #2e8b4a; color: #fff; }
.rc-tag-chip.rc-tag-warn.rc-tag-on   { background: #d08a1c; border-color: #d08a1c; color: #fff; }
.rc-tag-chip.rc-tag-custom.rc-tag-on { background: #4a90d9; border-color: #4a90d9; color: #fff; }

/* A custom chip + its small x (remove from my list) */
.rc-tag-chip-wrap {
    display: inline-flex;
    align-items: center;
}
.rc-tag-chip-wrap .rc-tag-chip {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.rc-tag-remove {
    font-size: 13px;
    line-height: 1;
    padding: 5px 7px;
    border: 1px solid #c8ced8;
    border-left: none;
    border-radius: 0 14px 14px 0;
    background: #f5f6f8;
    color: #8a94a2;
    cursor: pointer;
    font-family: inherit;
}
.rc-tag-remove:hover { color: #c0392b; background: #fbeaea; }

.rc-tag-new-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 14px;
    background: none;
    border: 1px dashed #9aa6b4;
    color: #4a90d9;
    cursor: pointer;
    font-family: inherit;
}
.rc-tag-new-form {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.rc-tag-new-input {
    width: 150px;
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid #c8ced8;
    border-radius: 4px;
    font-family: inherit;
}
.rc-tag-new-add {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
    border: none;
    background: #4a90d9;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}
.rc-tag-picker-hint {
    font-size: 12px;
    color: #7a8896;
}
.rc-tag-picker-hint.rc-tag-hint-warn {
    color: #c0392b;
    font-weight: 600;
}

/* End-of-session dialog (and the End confirmation before it) */
.rc-session-end-modal {
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}
.rc-session-end-summary {
    font-size: 14px;
    color: #2d3a4a;
}
.rc-session-end-warning {
    margin-top: 8px;
    font-size: 13px;
    color: #94590a;
    background: #fdf0d9;
    border-radius: 4px;
    padding: 6px 9px;
}
.rc-session-end-reason {
    font-size: 13px;
    color: #4a5868;
    margin-bottom: 6px;
}
.rc-session-end-result {
    font-size: 14px;
    color: #2d3a4a;
    margin-bottom: 4px;
}
.rc-session-end-total { font-weight: bold; }
.rc-session-end-wait {
    font-size: 13px;
    color: #4a90d9;
    font-weight: 600;
}
.rc-session-end-section-title {
    font-size: 14px;
    font-weight: bold;
    color: #3b4a5a;
    margin: 16px 0 8px;
}
.jr-modal textarea.rc-session-end-note {
    min-height: 80px;
}
.rc-session-end-later {
    font-size: 12px;
    color: #7a8896;
    margin-top: 6px;
}

/* Scorecard: the session's tags, after its trade stickers */
.sc-session-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 2px 12px 10px 12px;
}
.sc-session-tags-chips .rc-tag { margin-bottom: 0; }
.sc-session-tags-chips:empty { display: none; }
.sc-session-tags-btn {
    font-size: 12px;
    padding: 3px 8px;
    background: none;
    border: 1px dotted #9aa6b4;
    border-radius: 4px;
    color: #4a90d9;
    cursor: pointer;
    font-family: inherit;
}
.sc-session-tags-chips:not(:empty) + .sc-session-tags-btn { margin-left: 2px; }

/* Clickable chips: filter the Scorecard / Journal by that tag */
/* The site-wide link style (#PageContent a) adds a dotted bottom border
   — each chip gets its own full border back instead. */
#PageContent a.rc-tag-link,
#PageContent a.rc-tag-link:hover {
    text-decoration: none;
    cursor: pointer;
}
#PageContent a.rc-tag-link.rc-tag-good,   #PageContent a.rc-tag-link.rc-tag-good:hover   { border: 1px solid #b9e0c1; color: #22713a; }
#PageContent a.rc-tag-link.rc-tag-warn,   #PageContent a.rc-tag-link.rc-tag-warn:hover   { border: 1px solid #f2d49c; color: #94590a; }
#PageContent a.rc-tag-link.rc-tag-custom, #PageContent a.rc-tag-link.rc-tag-custom:hover { border: 1px solid #b8d3ef; color: #2a5f94; }
#PageContent a.rc-tag-link:hover {
    filter: brightness(0.94);
}

/* "Sessions tagged [FOMO] · 4 session(s) · Total +12 chips  x Clear filter" */
.rc-tag-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #d8dbe3;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 0 14px 0;
    font-size: 13px;
    color: #3b4a5a;
}
.rc-tag-filter-bar .rc-tag { margin: 0; }
.rc-tag-filter-label { font-weight: bold; }
.rc-tag-filter-summary { color: #4a5868; }
.rc-tag-filter-summary .sc-total-positive,
.rc-tag-filter-summary .sc-total-negative { font-weight: bold; }
.rc-tag-filter-clear {
    margin-left: auto;
    color: #4a90d9;
    text-decoration: none;
    font-weight: 600;
}
.rc-tag-filter-clear:hover { text-decoration: underline; }

/* Journal: the session's tags, after the entry's text */
.jr-entry-tags {
    margin-top: 16px;
}

/* Practice Mode — same button shape/behavior as #startSessionBtn
   (.rc-session-controls button), just orange instead of blue and
   living directly under the roulette table rather than in the
   controls area above it. */
.rc-practice-btn {
    width: 100%;
    max-width: 270px;
    display: block;
    margin: 20px auto 0; /* Versailles symmetry: same distance to the table as .rc-session-controls's own margin-bottom above it */
    padding: 10px 14px;
    border: none;
    border-radius: 4px;
    background: #FF5500;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.rc-practice-btn:hover:not(:disabled) {
    background: #DD4A00;
}

.rc-practice-btn:disabled {
    background: #999;
    cursor: not-allowed;
}

#practiceSpinArea {
    text-align: center;
    margin-top: 12px;
}

#practiceSpinBtn {
    width: 100%;
    max-width: 270px;
    padding: 10px 14px;
    border: none;
    border-radius: 4px;
    background: var(--rc-blue);
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

#practiceSpinBtn:hover:not(:disabled) {
    background: var(--rc-blue-hover);
}

#practiceSpinBtn:disabled {
    background: #999;
    cursor: not-allowed;
}

/* Needed so the callout below can position itself (absolute) relative
   to the table itself, not the page — .roulette-table doesn't already
   set this on its own. */
.roulette-table {
    position: relative;
}

/* Same visual pattern as the real roulette-simulator's own
   #stratResultCallout — large number on its real color background,
   fades in/out with a spring-like scale transition. */
#practiceSpinCallout {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
    z-index: 5;
}

#practiceSpinCallout.rc-practice-callout-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.rc-practice-callout-red { background: #b0281e; }
.rc-practice-callout-black { background: #1a1a1a; }
.rc-practice-callout-green { background: #1e7e34; }

/* Practice mode disclaimer dialog — shown before the first practice
   session (or every time unless the player dismissed it with
   "Don't show again"). */
.rc-practice-disclaimer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-practice-disclaimer-modal {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
    padding: 28px 32px 24px;
    max-width: 460px;
    width: calc(100% - 32px);
    box-sizing: border-box;
}

.rc-practice-disclaimer-title {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    color: #1d2a3a;
}

.rc-practice-disclaimer-body p {
    margin: 0 0 12px;
    font-size: 14px;
    color: #3a4552;
    line-height: 1.55;
}

.rc-practice-disclaimer-list {
    margin: 0 0 12px 20px;
    padding: 0;
    font-size: 14px;
    color: #3a4552;
    line-height: 1.8;
}

.rc-practice-disclaimer-note {
    font-size: 12px !important;
    color: #7a8896 !important;
    font-style: italic;
}

.rc-practice-disclaimer-actions {
    padding-top: 25px; /* padding, not margin: a margin here merges with the 12px below the note above it (margin collapsing) and adds almost nothing */
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.rc-practice-recap-modal {
    max-width: 480px;
    text-align: center;
    /* Fixed height so the modal never grows taller than the viewport
       regardless of how many trades the practice session had. The
       title stays pinned at the top (see below); only the trades list
       scrolls. 80vh gives comfortable breathing room from the screen
       edges on most laptop/desktop screens. */
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* clips children — the scroll is on the body, not here */
}

/* Stylish frame around the title — this is genuinely the least
   interesting part of the app to most players (a training tool, not
   a real result), so it gets a light, understated treatment rather
   than looking like a real achievement banner. Stays sticky at the
   top of the modal so it's always visible even when scrolling through
   many trades below. */
.rc-practice-recap-modal .jr-modal-title {
    flex-shrink: 0; /* never compressed by a long trades list */
    display: inline-block;
    margin: 0 auto 12px;
    padding: 8px 20px;
    border: 1px solid #d8dbe3;
    border-radius: 20px;
    background: #f6f8fb;
    font-size: 15px;
    font-weight: 600;
    color: #5a6472;
}

.rc-practice-recap-total {
    font-size: 17px;
}

.rc-practice-recap-meta {
    color: #7a8896;
    font-size: 13px;
}

/* Scrollable body zone — sits between the always-visible title above
   and the always-visible Cancel/Close buttons below. Grows to fill
   whatever space the max-height modal allows after title + actions
   have taken their share, then scrolls. */
.rc-practice-recap-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 60px; /* never collapses to nothing if there are 0 trades */
    padding: 4px 0;
}

.rc-practice-recap-trades {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    font-size: 13px;
    color: #3b4a5a;
    text-align: left;
}

.rc-practice-recap-trades li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-bottom: 1px solid #eef0f4;
}

.rc-practice-recap-trades li:last-child {
    border-bottom: none;
}

.rc-recap-trade-icon {
    flex-shrink: 0;
}

.rc-recap-trade-buy .rc-recap-trade-icon {
    color: #1e7e34;
}

.rc-recap-trade-sell .rc-recap-trade-icon {
    color: #c0392b;
}

/* Bigger, more visible separators between each trade's own details —
   the default inline bullet character reads as far too subtle at the
   font-size this list otherwise uses. */
.rc-recap-dot {
    font-size: 18px;
    line-height: 1;
    color: #c3c9d1;
}

.rc-practice-recap-modal .jr-modal-actions {
    flex-shrink: 0; /* never compressed — always visible at the bottom */
    justify-content: center;
    margin-top: 20px;
}

/* Candlestick bullet (body + wick) before "Buy"/"Sell" — used in
   trade-panel.js's own trade stickers, Scorecard's trade cards, and
   the Practice Mode recap. Colored via its own dedicated class
   (independent of whatever the direction label's own text-color rule
   is) so this never needs touching if that rule changes. */
.rc-candlestick-icon {
    vertical-align: middle;
    margin-right: 3px;
    position: relative;
    top: -1px;
}

.rc-candlestick-buy {
    color: #1e7e34;
}

.rc-candlestick-sell {
    color: #c0392b;
}

/* Copy-as-CSV button, top-right corner of the Practice Mode recap
   modal — small square icon button, swaps to a green checkmark
   briefly on a successful copy (same pattern as Claude's own copy
   buttons). */
.rc-practice-recap-modal {
    position: relative;
}

.rc-practice-recap-copy-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8dbe3;
    border-radius: 6px;
    background: #fff;
    color: #6b7480;
    cursor: pointer;
    padding: 0;
    transition: 0.15s;
}

.rc-practice-recap-copy-btn:hover {
    background: #f2f4f7;
    color: #3b4a5a;
}

.rc-practice-recap-copy-btn.rc-copy-success {
    color: #1e7e34;
    border-color: #b7e0c2;
    background: #eefaf1;
}

/* Initial entry: counter centered under the (centered) keypad row. */
#bulkEntrySection .rc-bulk-counter {
    text-align: center;
}