/* t482: phone gameplay controls. Layout only, loaded last.
   Hold to stage and the stacked Bump Up / Bump Down sit side by side in the
   fixed bottom row of the race grid, so a racer stages with one thumb and
   bumps with the other. The control bar is two rows: game title + tree,
   then Games, delay and icon History / Setup. No timing, staging, bump or
   delay logic lives here. */

/* Icon History / Setup buttons on phones (text stays for screen readers via aria-label).
   Free Hits drops its tagline; challenge progress lines stay. */
@media (max-width: 1023px) {
  html.arena-mode[data-practice-view="active"][data-session-mode="free"] #ptl-mode-objective { display: none !important; }
  html.arena-mode[data-practice-view="active"] #ptl-session-history,
  html.arena-mode[data-practice-view="active"] #practice-setup {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    justify-content: center !important;
  }
  html.arena-mode[data-practice-view="active"] #ptl-session-history::before,
  html.arena-mode[data-practice-view="active"] #practice-setup::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--ptl-ico) center / contain no-repeat;
    mask: var(--ptl-ico) center / contain no-repeat;
  }
  html.arena-mode[data-practice-view="active"] #ptl-session-history {
    --ptl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3a9 9 0 0 0-9 9H1l3.9 3.9L8.8 12H6a7 7 0 1 1 2.05 4.95l-1.42 1.42A9 9 0 1 0 13 3zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8H12z'/%3E%3C/svg%3E");
  }
  html.arena-mode[data-practice-view="active"] #practice-setup {
    --ptl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94a7.07 7.07 0 0 0 0-1.88l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7 7 0 0 0-1.63-.94l-.36-2.54a.5.5 0 0 0-.5-.42h-3.84a.5.5 0 0 0-.5.42l-.36 2.54a7 7 0 0 0-1.63.94l-2.39-.96a.5.5 0 0 0-.6.22L2.66 8.84a.5.5 0 0 0 .12.64l2.03 1.58a7.07 7.07 0 0 0 0 1.88l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32c.13.22.39.3.6.22l2.39-.96c.5.39 1.05.7 1.63.94l.36 2.54c.04.24.25.42.5.42h3.84c.25 0 .46-.18.5-.42l.36-2.54a7 7 0 0 0 1.63-.94l2.39.96c.22.08.47 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58zM12 15.6a3.6 3.6 0 1 1 0-7.2 3.6 3.6 0 0 1 0 7.2z'/%3E%3C/svg%3E");
  }
}

/* Portrait phones: two-row bar, then Hold + bumps in the bottom row. */
@media (max-width: 1023px) and (min-height: 501px) {
  html.arena-mode[data-practice-view="active"] .ptl-control-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title tree" "games right" !important;
    align-items: center !important;
    gap: 6px 8px !important;
    flex-wrap: nowrap !important;
  }
  html.arena-mode[data-practice-view="active"] .ptl-control-bar > * { grid-area: auto; }
  html.arena-mode[data-practice-view="active"] .ptl-mode-compact { grid-area: title !important; min-width: 0; align-self: center; }
  html.arena-mode[data-practice-view="active"] #ab-tree { grid-area: tree !important; justify-self: end; }
  html.arena-mode[data-practice-view="active"] #ptl-games-back { grid-area: games !important; justify-self: start; }
  html.arena-mode[data-practice-view="active"] .ptl-control-bar .ab-right {
    grid-area: right !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    margin-left: 0 !important;
    min-width: 0;
  }
  html.arena-mode[data-practice-view="active"] .ptl-control-bar .ptl-session-tabs,
  html.arena-mode[data-practice-view="active"] .ptl-control-bar .ab-hw,
  html.arena-mode[data-practice-view="active"] #ab-save-note { grid-area: auto; position: absolute !important; }

  /* Bottom row: Hold left, bumps stacked right. Fixed sizes, fixed spot. */
  html.arena-mode[data-practice-view="active"] #ptl-race-row {
    padding-bottom: 0 !important;
  }
  html.arena-mode[data-practice-view="active"] .tb-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html.arena-mode[data-practice-view="active"] .tb-row .transbrake-zone {
    order: 1;
    flex: 0 0 196px !important;
    width: 196px !important;
    min-width: 196px !important;
    max-width: 196px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html.arena-mode[data-practice-view="active"] .tb-row .bump-zone {
    order: 2;
    flex: 0 0 104px !important;
    width: 104px !important;
    max-width: 104px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html.arena-mode[data-practice-view="active"] .tb-row .bump-zone[hidden],
  html.arena-mode[data-practice-view="active"] .tb-row.is-pro .bump-zone { display: none !important; }
  html.arena-mode[data-practice-view="active"] .tb-row .bump-wheel {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
  }
  html.arena-mode[data-practice-view="active"] .tb-row .bump-pad {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  /* The dome and caption paint inside the 196px button (not off its left edge). */
  html.arena-mode[data-practice-view="active"] .tb-row #tb-btn,
  html.ptl-tree-result.arena-mode[data-practice-view="active"] .tb-row #tb-btn {
    padding-left: 106px !important;
    padding-right: 4px !important;
    white-space: normal !important;
    letter-spacing: 0.1em !important;
  }
  html.arena-mode[data-practice-view="active"] .tb-row .transbrake-btn::before { left: 8px !important; }
  html.arena-mode[data-practice-view="active"] .tb-row .transbrake-btn::after { left: 28px !important; }
}
@media (max-width: 359px) and (min-height: 501px) {
  html.arena-mode[data-practice-view="active"] .tb-row { gap: 8px !important; }
  html.arena-mode[data-practice-view="active"] .tb-row .bump-zone { flex-basis: 88px !important; width: 88px !important; max-width: 88px !important; }
  html.arena-mode[data-practice-view="active"] .tb-row .bump-pad { padding-left: 4px !important; padding-right: 4px !important; }
  html.arena-mode[data-practice-view="active"] .tb-row .bump-pad__name { font-size: 12px !important; white-space: nowrap; }
  html.arena-mode[data-practice-view="active"] #ab-tree { padding-left: 8px !important; padding-right: 8px !important; }
}

/* Post-hit bump count: overlay it under the Hold caption inside the hold row so
   showing it never pushes Hold/bumps (it used to add an implicit grid row). */
@media (max-width:1023px) and (min-height:501px) {
  html.arena-mode[data-practice-view="active"] .bump-tally.on:not([hidden]) {
    grid-area: hold; align-self: end; justify-self: start; position: relative; z-index: 3;
    margin: 0 0 2px calc(50% - 157px + 104px); width: 90px; padding: 0;
    font-size: 10.5px; line-height: 1.2; white-space: normal; text-align: left; pointer-events: none;
  }
}
@media (max-width:359px) and (min-height:501px) {
  html.arena-mode[data-practice-view="active"] .bump-tally.on:not([hidden]) { margin-left: calc(50% - 146px + 104px); width: 84px; }
}