/* ---- DEVICE CAPABILITY LAYER --------------------------------------------- Loaded last, after mobile.css. Everything above it keys the whole responsive system off ONE question -- `max-width: 820px` -- and that question does not describe a device: A LANDSCAPE PHONE IS 844-932px WIDE. iPhone 13 landscape is 844x390 and iPhone 15 Pro Max landscape is 932x430, so both fall on the DESKTOP side of 820px and inherited the desktop board (one runner per row, a fixed 384px panel) inside 390px of height. Measured in the browser at 844x390: the shell overflowed by 5px, the runner board scrolled 289px of content through a 218px window, and .ticket-preview, .panel-foot and the Provably Fair button were all below the bottom edge of the viewport. The landscape block in mobile.css does fire there (it is height-only) but the two rules that make the board fit -- the two-column card and a panel that fills its dock -- are locked behind max-width, so it was compacting a layout that was still the wrong shape. A TABLET IS A TOUCH DEVICE AT DESKTOP WIDTHS. iPad Pro 11 portrait is 834px and iPad Air landscape is 1180px, so every 44px floor mobile.css sets was switched off on them: measured 52x34 Bet buttons, a 38x38 account button, a 36px camera trigger and a 24px stake field -- on a real-money control, on a finger-only device. Width cannot answer this. `pointer: coarse` can, and it answers it for the Android tablets and touch laptops nobody enumerated. So this layer asks about the device instead: how short is it, and is it being touched. Nothing here restates a rule that already holds; each block covers a viewport the width breakpoints above it cannot see. */ /* ---- 1. LANDSCAPE PHONES, AT ANY WIDTH ----------------------------------- Same height/orientation test mobile.css already uses, deliberately -- a different threshold would open a dead band between the two. The width cap only rules out a landscape tablet (1024x768 and 1180x820 are both taller than this and keep the desktop layout they fit). */ @media (orientation: landscape) and (max-height: 500px) and (max-width: 1180px) { /* The dock, not the panel, owns the width. `.trade-panel { width: 384px }` from market-layout.css was still winning here, so the panel and the 350px dock mobile.css sets disagreed and the panel decided. `margin-right: 0` IS THE RULE THAT ACTUALLY DOCKS IT. `.race-header, .betting-dock` sets `margin-inline: auto`, and an auto margin on a flex item beats align-self -- so `margin-left: auto` alone left the two autos splitting the free space between them and the dock CENTRED: measured at 844x390 it ran x=194..650 in an 844px viewport, i.e. straight down the middle of the race, which is the one place a 456px opaque panel must not be. 48vw, NOT 54vw. The width also has to clear applyCameraFraming()'s occlusion test, which only offsets the frustum when the panel's left edge is past 46% of the viewport: at 54vw the dock ran x=380..836 on an 844px viewport and 380 is 45.0%, so the test failed by 8px, no offset was applied, and the pack was framed at x=422 -- behind the panel's leading edge. At 48vw the edge lands at 431 (51.1%) and the cars are framed into the clear half. */ .betting-dock { width: min(440px, 48vw) !important; margin-left: auto !important; margin-right: 0 !important; margin-top: 0 !important; align-self: flex-end !important; } .trade-panel { width: 100% !important; max-height: calc(100dvh - 52px - var(--sat, 0px) - var(--sab, 0px)) !important; overflow-y: auto !important; } /* Two runners wide, which is what turns a scrolling board into a fitting one: four runners in two rows of 66px is 136px, against 289px stacked. 66 rather than 68 leaves the panel 4px of slack -- at 68 the content measured 314px in a 312px box, and 2px of sub-pixel rounding is enough to put a full-height scrollbar down the side of a panel whose content fits. */ .car-list { --board-cols: 2; --row-h: 66px !important; --row-gap: 4px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: var(--row-h) !important; max-height: calc(3 * var(--row-h) + 2 * var(--row-gap) + 2px) !important; padding-right: 0; } .car-card { grid-template-columns: 20px minmax(0, 1fr) !important; grid-template-areas: "num mid" "mkt mkt"; align-content: center; row-gap: 3px !important; column-gap: 6px !important; min-height: var(--row-h) !important; padding: 3px 6px !important; } .car-number { grid-area: num; width: 20px !important; height: 20px !important; font-size: 11px !important; } .car-mid { grid-area: mid; gap: 2px; } .car-name strong { font-size: 11px !important; } .car-name span { display: none !important; } .mini-track { height: 5px; } .car-market { grid-area: mkt; justify-content: space-between !important; gap: 4px !important; } .car-odds { width: 44px !important; flex: 0 0 44px !important; align-items: flex-start !important; } .car-odds strong { font-size: 16px !important; } .car-odds small { display: none !important; } /* 40px, not 44: a 390px-tall viewport cannot seat a 44px control on every line and still show the ticket. Well clear of the 24px WCAG 2.5.8 minimum, and the tap WIDTH -- the axis a thumb misses on in landscape -- stays at 44. */ .trade-button, .car-card.held .trade-button { min-width: 44px !important; min-height: min(40px, calc(var(--row-h) - 8px)) !important; padding: 2px 4px !important; font-size: 9.5px !important; } .panel-tag { display: none; } /* 40px on the header controls too, for the reason the Bet button gives above: 36px was what the height-only block in mobile.css could afford before the board stopped scrolling, and there is now room to pay the difference. */ .race-header { min-height: 44px !important; } .icon-button { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; } .dropdown-trigger { min-height: 40px !important; } .dropdown-menu .view-button { min-height: 40px !important; } .stake-row { grid-template-columns: 66px minmax(0, 1fr) !important; } .stake-input, .stake-actions button { min-height: 40px !important; } .stake-input input { font-size: 14px !important; } .stake-actions button { font-size: 10px !important; } .trade-panel .ticket-preview { height: auto !important; min-height: 40px !important; padding: 3px 6px !important; } .ticket-preview small { display: none !important; } /* NEGATIVE MARGIN AND `overflow-y: auto` CANNOT SHARE A BOX. .link-button buys its 44px tap target back out of the surrounding leading with `margin-block: -10px`, which shortens the panel but is NOT subtracted from its scrollHeight — so the panel measured 310px of content in a 308px box and Chromium painted a full-height scrollbar down a panel whose content fits. The panel keeps the max-height and the overflow (they are the real guard on a 320px-tall viewport); the foot pays for its target in layout instead of borrowing it. */ .panel-foot { margin-top: 2px !important; padding-top: 2px !important; } .panel-foot .link-button { min-height: 40px; margin-block: 0; } /* Centred, the toast landed on the board it was reporting about. The left half of a landscape phone is empty tarmac. */ .toast { left: max(10px, var(--sal, 0px)); right: auto; top: max(46px, calc(var(--sat, 0px) + 44px)); bottom: auto; transform: none; max-width: min(320px, 42vw); padding: 8px 12px; font-size: 13px; text-align: left; } } /* ---- 2. TOUCH DEVICES AT DESKTOP WIDTHS ---------------------------------- Tablets, touch laptops and anything else with a finger for a pointer, from the 820px breakpoint up. Below it mobile.css has already set these floors; the landscape block above deliberately keeps its own smaller ones, and is later in the cascade only for the properties it names, so this block is scoped away from it by height. */ @media (pointer: coarse) and (min-width: 821px) and (min-height: 501px) { /* The row has to be tall enough to seat a 44px control before the control can ask for one: .trade-button is capped at `--row-h - 10px` so that nothing inside a fixed grid track can overflow it. */ .car-list { --row-h: max(58px, clamp(52px, 6.6vh, 60px)); } .trade-button, .car-card.held .trade-button { min-height: min(44px, calc(var(--row-h) - 10px)); min-width: 56px; } .icon-button { width: 48px; height: 48px; } .dropdown-trigger { min-height: 44px; padding: 6px 14px; } .dropdown-menu .view-button { min-height: 44px; } .view-button { min-height: 44px; } .stake-row .stake-input { min-height: 52px; } .stake-row .stake-input input { font-size: 20px; } .stake-actions button { min-height: 48px; } .setting-row { min-height: 48px; } .drawer-close { min-height: 44px; min-width: 44px; } .drawer-page-head button { width: 44px; height: 44px; } .fairness-close { width: 48px; height: 48px; } /* The panel has to pay for the bigger controls in width, or the runner name is what gives way. 52vw keeps its left edge past the midline, which is the test applyCameraFraming() uses to treat it as an occluder and frame the cars clear of it. */ .trade-panel { width: min(440px, 52vw); } } /* Two runners wide is only correct once the panel is ~450px, which needs 1024px of viewport (see the two-up block in responsive-desktop.css). A coarse-pointer tablet gets a slightly wider panel above, so the taller touch row has to be carried into the two-up tile as well or the second line clips. */ @media (pointer: coarse) and (min-width: 1024px) and (min-height: 501px) { .car-list { --row-h: 92px; --row-gap: 8px; } .trade-panel { width: min(470px, 46vw); } } /* STICKY HOVER. Every :hover rule in this product is a pointer affordance, and a touch browser latches them onto the last element tapped -- so the runner a player bet on stayed lifted, brightened and re-bordered until they tapped something else, which reads as a selected state the board also uses for real. */ @media (hover: none) { .car-card:hover { transform: none; } .car-card:hover .trade-button.buy:not(:disabled) { border-color: rgba(215, 255, 85, 0.42); background: rgba(215, 255, 85, 0.09); } .trade-button:hover:not(:disabled), .stake-actions button:hover:not(:disabled), .view-button:hover:not(.active) { transform: none; filter: none; } .stake-actions button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } .view-button:hover:not(.active) { background: rgba(7, 9, 11, 0.56); border-color: var(--line); } .icon-button:hover, .fairness-close:hover { background: rgba(255, 255, 255, 0.06); } } /* ---- 3. THE TOAST WAS SITTING ON THE CALLOUT ----------------------------- `top: sat + 62px` put a 40px toast at y=62-102 on a 390x844 phone, and the phase pill occupies y=74-98 with #race-callout right under it at y=113-127 -- measured in the browser, and visible in the first screenshot taken of this layout. Both of those say what the round is doing, which is what the toast most often interrupts to talk about. Below them there is 360px of empty track. */ @media (max-width: 820px) and (orientation: portrait) { .toast { top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 148px); bottom: auto; } } /* ---- 4. VERY NARROW SCREENS (<=340px) ------------------------------------ */ @media (max-width: 340px) { /* THE HEADER CAPTIONS WERE OVERRUNNING THEIR OWN BOXES. Measured at 280x653: the session strip occupied x=120..163 and the wallet x=169..263, so the boxes did not overlap -- but "TO START" set at 8px with 0.08em tracking needs ~45px against a 43px box and nothing clipped it, so the countdown caption was painted over "DEMO BALANCE" next to it. Both cells are given permission to shrink and an ellipsis to fail into, and the camera trigger gives back the ~20px that makes it unnecessary. */ .race-header { gap: 3px !important; padding-inline: 5px !important; } .dropdown-trigger { padding-inline: 5px !important; } .dropdown-trigger .trigger-label { font-size: 11px !important; } .session-strip { flex: 0 1 auto; min-width: 0; gap: 2px !important; } .wallet { gap: 4px !important; } .session-strip div, .wallet > div { min-width: 0; overflow: hidden; } .session-strip span, .wallet span { font-size: 7px !important; letter-spacing: 0.02em !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 11.5px on the balance is the last of the ~11px this block reclaims. "$5,000.00" measured 62px against 57px of cell at 12px and the cell clips its overflow, so the figure was losing its last digit -- the one number a player checks before staking. */ .session-strip strong { font-size: 12px !important; white-space: nowrap; } .wallet strong { font-size: 11.5px !important; white-space: nowrap; } /* Galaxy Fold's cover screen is 280px wide. The stake row put a 76px field and five quick-stake buttons on one line there, which is 31px per button: legible, but a third of the 44px this product owes a money control everywhere else. The row has the height to spare (measured 343px of panel in a 653px viewport), so the field takes a line of its own and the five buttons get ~52px each. */ .stake-row { grid-template-columns: minmax(0, 1fr) !important; row-gap: 5px; } .stake-input span { min-width: 26px; } .stake-actions { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .stake-actions button { font-size: 10.5px !important; } .stake-actions .stake-max { font-size: 9.5px !important; } } /* ---- 5. SHORT PORTRAIT PHONES WITH BROWSER CHROME OPEN ------------------- 100dvh is the live viewport, so the shell already shrinks when Safari's or Chrome's address bar comes back -- but shrinking is not fitting. A 390x844 device shows ~664px of page with the bar visible and ~560px on a 320x568 phone with a bar and a bottom toolbar, and the betting dock is 348px of that. The two things that go are the race callout's leading and the ticket's explanatory sentence, both of which the desktop short-window blocks already treat as the first to give. */ @media (max-width: 820px) and (max-height: 680px) and (orientation: portrait) { .race-focus h2 { font-size: clamp(16px, 4.6vw, 22px) !important; margin: 3px auto !important; } .phase-pill { min-height: 22px !important; padding-block: 2px !important; font-size: 11px !important; } .car-list { --row-h: 74px !important; } .trade-panel .ticket-preview { height: 46px !important; min-height: 46px !important; } .toast { top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 116px); } }