/* ---- 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;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 4px !important;
    max-height: none !important;
    padding-right: 0;
  }
  .car-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 6px !important;
  }
  .car-number { width: 20px !important; height: 20px !important; font-size: 11px !important; }
  .car-name strong { font-size: 11px !important; }
  .car-odds strong { font-size: 14px !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; }
  .bet-control-dock { gap: 4px !important; }
  .stepper-capsule { height: 44px !important; min-height: 44px !important; }
  .stepper-btn { width: 38px !important; height: 38px !important; }
  .preset-btn { min-height: 30px !important; font-size: 11px !important; }
  .place-bet-btn { min-height: 64px !important; }
  .bet-title { font-size: 15px !important; }
  .bet-sub { font-size: 10.5px !important; }
  .cashout-btn { min-height: 28px !important; font-size: 11px !important; }

  /* 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 and touch laptops keep a more spacious dock. The shared coarse-pointer
   floor below also covers shorter landscape phones without changing this layout. */
@media (pointer: coarse) and (min-width: 821px) and (min-height: 501px) {
  .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; }
  .stepper-capsule { min-height: 50px; }
  .stepper-btn { width: 44px; height: 44px; }
  .preset-btn { min-height: 36px; font-size: 12.5px; }
  .place-bet-btn { min-height: 76px; }
  .cashout-btn { min-height: 40px; }
  .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; }
  .trade-panel { width: min(390px, 52vw); }
}

/* 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; }
  .preset-btn:hover:not(:disabled),
  .place-bet-btn:hover:not(:disabled),
  .stepper-btn:hover:not(:disabled),
  .view-button:hover:not(.active) {
    transform: none;
    filter: none;
  }
  .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); }
}

/* Native targets stay separate and reachable in the landscape dock's scroller.
   Keep long exact money fitted at rest; while editing, a native input scrolls
   its text rather than making iPhone Safari zoom the whole game. */
@media (pointer: coarse) {
  .car-card { min-height: 44px !important; height: auto !important; }
  .icon-button,
  .drawer-close,
  .drawer-page-head button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .dropdown-trigger,
  .dropdown-menu .view-button,
  .preset-btn,
  .cashout-btn { min-height: 44px !important; }
  .stepper-capsule { height: 50px !important; min-height: 50px !important; }
  .stepper-btn { width: 44px !important; height: 44px !important; }
  .stepper-input { height: 44px; line-height: 44px; }
  .stepper-input:focus { font-size: max(16px, var(--stake-font-size, 20px)); }
}