/* t482: H2H / tournament race screen (race.html) on phones. Layout only, loaded last.
   Hold to Stage is pinned to the bottom of the screen, clear of the Safari toolbar and
   the home-indicator safe area, and it stays in the same spot through the tree ->
   scoreboard swap (html.race-finish) and the "ready for next race" result. The arena
   stays a fixed surface during the finish too; it scrolls inside itself (result card,
   timeslip) above the pinned control instead of dropping into the page under the room
   card. No timing, staging, release, bump or sync logic lives here. No bump buttons. */
@media (max-width: 1023px) and (pointer: coarse) {
  html.racing #race-card.race-arena,
  html.racing.race-finish #race-card.race-arena {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important;
    height: 100vh !important; height: 100svh !important;
    z-index: 300;
    overflow-x: hidden !important; overflow-y: auto !important;
    overscroll-behavior: contain;
    justify-content: flex-start;
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--ptl-tbz-h, 212px)) !important;
  }
  html.racing #race-card .tb-zone {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom) + 8px);
    z-index: 320;
    max-width: none;
    margin: 0 !important;
    padding: 8px calc(env(safe-area-inset-right) + 12px) 0 calc(env(safe-area-inset-left) + 12px);
    background: linear-gradient(to bottom, rgba(11, 14, 19, 0), var(--bg, #0b0e13) 22px);
  }
  html.racing #race-card .tb-zone::after {
    /* paint the strip under the safe area so scrolled result text never shows below the zone */
    content: ''; position: absolute; left: 0; right: 0; top: 100%;
    height: calc(env(safe-area-inset-bottom) + 8px); background: var(--bg, #0b0e13);
  }
  html.racing #race-card .tb-hint { margin-top: 0; }
}
/* Landscape phones: the stacked boards + tree did not fit 390px of height and the
   dome fell below the fold. Tree alone while racing (boards appear over it at the
   finish, as in portrait); Hold to Stage pinned bottom-right beside the tree. */
@media (max-width: 1023px) and (max-height: 500px) and (pointer: coarse) {
  html.racing #race-card.race-arena,
  html.racing.race-finish #race-card.race-arena {
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
    padding-right: calc(env(safe-area-inset-right) + 190px) !important;
  }
  html.racing #race-card .tb-zone {
    left: auto; right: calc(env(safe-area-inset-right) + 8px); width: 176px;
    padding: 8px 0 0; background: none;
  }
  html.racing #race-card .tb-zone::after { display: none; }
  html.racing #race-card .tb-btn { width: 116px; height: 116px; }
  html.racing #race-card .tb-hint { font-size: 10.5px; text-align: center; }
  html.racing #race-card .tree-wrap {
    display: grid !important; grid-template-columns: 1fr 1fr; position: relative;
    margin: 0 auto !important; max-width: 100%;
  }
  html.racing #race-card .ptl-tree { grid-area: 1 / 1 / 2 / 3 !important; width: auto !important; margin: 0 auto !important; }
  html.racing #race-card .ptl-tree-art { height: calc(100svh - 96px) !important; width: auto !important; }
  html.racing:not(.race-finish) #board-l,
  html.racing:not(.race-finish) #board-r { display: none; }
  html.racing.race-finish .ptl-tree-art,
  html.racing.race-finish .ptl-tree .pr-bulb { opacity: 0; }
  html.racing.race-finish #board-l,
  html.racing.race-finish #board-r {
    grid-area: 1 / 1 / 2 / 3; display: block; position: absolute; top: 2%; z-index: 5;
    width: min(28vw, 190px); max-width: none;
  }
  html.racing.race-finish #board-l { right: 50.8%; }
  html.racing.race-finish #board-r { left: 50.8%; }
}