/* ============================================================================= GAMES-MODE LOCKED-SCROLL MODEL Extracted from pinned-results.css "Section C" so all rules that define the single-scroll-container layout for the games panel live in one place. Load order: must come AFTER pinned-results.css, header.css, and responsive-layout.css so this file wins cascade collisions. The model: #gamesEntryPanel overflow: hidden (does NOT scroll) └─ .game-section display: flex; flex-direction: column; height: 100% ├─ .game-section-header flex-shrink: 0 (pinned at top) ├─ .game-scroll-body flex: 1; overflow-y: auto (THE scroller) │ └─ .banker-wrap / .vegas-wrap overflow-x: auto; overflow-y: hidden └─ .results-card-wrap position: fixed (out of flow) The wraps must NOT scroll vertically and MUST keep touch-action: pan-x pan-y so vertical swipes propagate to .game-scroll-body. See the inline comments below for the detailed reasoning behind each rule. ============================================================================= */ /* 1. Lock the panel — nothing outside the scroll body scrolls vertically. Zero out base padding-bottom so section height: 100% fills the full panel height (base CSS has padding-bottom ~130px which would eat into it). */ body.mode-games #gamesEntryPanel { overflow: hidden !important; padding-bottom: 0 !important; } /* Results card: anchor above the games footer. Later rules override bottom/left/right for mobile vs tablet vs desktop variants. */ body.mode-games .game-section[aria-hidden="false"] .results-card-wrap { bottom: calc(var(--games-footer-h, 126px) + var(--footer-bottom-offset, 0px) + 10px) !important; left: 0 !important; right: 0 !important; } /* 2. Active game section fills the panel height as a flex column. */ body.mode-games #gamesEntryPanel .game-section[aria-hidden="false"] { display: flex !important; flex-direction: column !important; height: 100% !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } /* 3. Header never scrolls — it is always pinned at the top of the section. */ body.mode-games .game-section-header { flex-shrink: 0 !important; position: relative !important; } /* 4. Scroll body is the sole vertical scroll container. Do NOT set touch-action here — it propagates down via intersection and would block horizontal panning on the table wraps inside. Default (auto) lets the browser handle pan-x and pan-y based on which ancestor can scroll. */ body.mode-games .game-scroll-body { flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: auto !important; } /* 5. Table wraps: horizontal scroll only inside the scroll body. overflow-y: hidden prevents the browser from coercing overflow-y to "auto" when overflow-x is set, which would create a competing vertical scroll container. max-height: none cancels the 62vh clip from responsive-layout.css (mobile rule) so all rows expand into the parent .game-scroll-body's scroll area. touch-action: pan-x pan-y allows both directions — wrap handles horizontal (it has overflow-x:auto), parent handles vertical (wrap has overflow-y:hidden so it can't scroll vertically and the gesture bubbles up). Do NOT use just pan-x here — that blocks vertical touches entirely and breaks all vertical scroll. */ body.mode-games .banker-wrap, body.mode-games .vegas-wrap { overflow-x: auto !important; overflow-y: hidden !important; max-height: none !important; touch-action: pan-x pan-y !important; overscroll-behavior-y: auto !important; -webkit-overflow-scrolling: auto !important; } /* 6. Collapsed-results corner-radius — clean up without locking overflow. */ body.mode-games .game-section[aria-hidden="false"]:has(.results-card-wrap.is-collapsed) { border-bottom-left-radius: 14px !important; border-bottom-right-radius: 14px !important; } body.mode-games .game-section[aria-hidden="false"]:has(.results-card-wrap.is-collapsed) .banker-wrap, body.mode-games .game-section[aria-hidden="false"]:has(.results-card-wrap.is-collapsed) .vegas-wrap, body.mode-games .game-section[aria-hidden="false"]:has(.results-card-wrap.is-collapsed) .skins-half-wrap { border-bottom-left-radius: 14px !important; border-bottom-right-radius: 14px !important; overflow-x: auto !important; overflow-y: hidden !important; max-height: none !important; touch-action: pan-x pan-y !important; overscroll-behavior-y: auto !important; -webkit-overflow-scrolling: auto !important; } body.mode-games :is(#bankerSection, #vegasSection, #hiloSection, #junkSection, #wolfSection)[aria-hidden="false"] :is(#bankerResultsWrap, #vegasResultsWrap, #hiloResultsWrap, #junkResultsWrap, #wolfResultsWrap), body.mode-games .game-section[aria-hidden="false"] .results-card-wrap { position: fixed !important; z-index: 180 !important; display: flex !important; flex-direction: column !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; pointer-events: none !important; overflow: visible !important; isolation: isolate; } /* Keep results cards interactive so clipped content can be scrolled into view. */ body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .live-results-card, body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .banker-header-totals { pointer-events: auto !important; } /* Collapse bar sits flush ABOVE the games-controls-shell as a connected row. Top corners rounded (matches the section/shell geometry); bottom corners FLAT so the bar visually merges with the shell below — no floating-chip appearance. Border-bottom: 0 because the shell's border-top is the seam. */ body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar { pointer-events: auto !important; order: 1 !important; min-height: 44px !important; border: 1px solid rgba(128, 153, 178, 0.34) !important; border-bottom: 0 !important; border-radius: 14px 14px 0 0 !important; background: transparent !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 16px !important; font-size: 0.95rem !important; font-weight: 600 !important; color: var(--ink) !important; } body.mode-games .game-section[aria-hidden="false"] .results-card-wrap:not(.is-collapsed) .results-collapse-bar { margin-top: 0 !important; } body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .live-results-card, body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .banker-header-totals { order: 0 !important; margin: 0 !important; border: 1px solid rgba(128, 153, 178, 0.34) !important; border-bottom: 0 !important; border-radius: 14px 14px 0 0 !important; max-height: min(36vh, 240px); overflow: auto; } /* Expanded: results-card-wrap is .live-results-card on TOP (rounded corners) + .results-collapse-bar BELOW (flat all around, acts as a separator strip). */ body.mode-games .game-section[aria-hidden="false"] .results-card-wrap:not(.is-collapsed) .results-collapse-bar { border-radius: 0 !important; border-top: 1px solid rgba(128, 153, 178, 0.34) !important; } body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .live-results-card, body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .banker-header-totals { display: none !important; } body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar { border-radius: 14px 14px 0 0 !important; overflow: hidden !important; } @media (max-width: 480px) { body.mode-games :is(#bankerSection, #vegasSection, #hiloSection, #junkSection, #wolfSection)[aria-hidden="false"] :is(#bankerResultsWrap, #vegasResultsWrap, #hiloResultsWrap, #junkResultsWrap, #wolfResultsWrap), body.mode-games .game-section[aria-hidden="false"] .results-card-wrap { left: 8px !important; right: 8px !important; } } @media (max-width: 480px) { body.mode-games .game-section[aria-hidden="false"] .results-card-wrap { bottom: calc(var(--games-footer-h, 126px) + 10px) !important; } } @media (min-width: 769px) { /* Results card spans full device width on tablet+desktop. Inner content lane is constrained by the wrap's padding (set in pinned-results.css @media (min-width: 960px)) so the visual bar is full-width but the bar/totals content stays in a centered 1120px lane on wide screens. */ body.mode-games :is(#bankerSection, #vegasSection, #hiloSection, #junkSection, #wolfSection)[aria-hidden="false"] :is(#bankerResultsWrap, #vegasResultsWrap, #hiloResultsWrap, #junkResultsWrap, #wolfResultsWrap), body.mode-games .game-section[aria-hidden="false"] .results-card-wrap { left: 0 !important; right: 0 !important; transform: none !important; width: 100vw !important; max-width: 100vw !important; } body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar, body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .live-results-card, body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .banker-header-totals { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } }