/* Phone race screen (t442). Loaded last. Everything is below 1024px, so the
   desktop stage is untouched. One fixed display box holds the tree and the
   scoreboard (they swap in place), one fixed status line holds the game
   progress, and Hold to stage keeps one size and one spot every hit.
   Presentation only: no timing, staging, scoring or delay logic lives here. */

.ptl-race-status,
.ptl-race-details-close { display: none; }

@media (max-width: 1023px) {
  html.arena-mode[data-practice-view="active"] .ptl-race-status {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 4px !important;
    box-sizing: border-box;
    overflow: hidden;
    border-top: 1px solid #23272e;
    border-bottom: 1px solid #23272e;
    background: #0b0c0e;
    color: #c9ced6;
    font: 600 12px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    order: 2;
  }
  .ptl-race-status__line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .ptl-race-status__line span {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #8b929c;
  }
  .ptl-race-status__line span b {
    color: #f3f4f5;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }
  .ptl-race-status__line span.is-tag { color: #f3f4f5; }
  .ptl-race-status__line .ptl-seed {
    display: inline-block;
    margin-right: 3px;
    color: #e3263b;
  }
  .ptl-race-status__more {
    flex: 0 0 auto;
    height: 22px;
    padding: 0 8px;
    border: 1px solid #3a3f47;
    border-radius: 3px;
    background: transparent;
    color: #f3f4f5;
    font: 700 10px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .ptl-race-status__more[hidden] { display: none !important; }

  /* The session stats panel under the tree is gone on phones. Its numbers
     live in the status line; full lists stay behind Details. */
  html.arena-mode[data-practice-view="active"]:not(.ptl-race-details):not(.ptl-race-choose) #ptl-side {
    display: none !important;
  }
  html.arena-mode[data-practice-view="active"] #ptl-hold-meta { display: none !important; }

  /* Details: a sheet over the stage. Nothing under it moves. */
  html.arena-mode[data-practice-view="active"].ptl-race-details #ptl-side:not([hidden]),
  html.arena-mode[data-practice-view="active"].ptl-race-choose #ptl-side:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 8px !important;
    width: auto !important;
    height: auto !important;
    max-height: 70svh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 36px 12px 12px !important;
    overflow-y: auto !important;
    background: #0b0c0e !important;
    border: 1px solid #2a2f37 !important;
    border-radius: 6px;
    z-index: 60 !important;
    grid-area: auto !important;
  }
  html.arena-mode.ptl-race-details #ptl-side .ptl-race-details-close {
    display: block;
    position: absolute;
    top: 6px;
    right: 8px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid #3a3f47;
    border-radius: 3px;
    background: transparent;
    color: #f3f4f5;
    font: 700 10px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  /* In the sheet every panel reads as a normal stacked list again. */
  html.arena-mode.ptl-race-details #ptl-side > div:not([hidden]),
  html.arena-mode.ptl-race-choose #ptl-side > div:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html.arena-mode.ptl-race-details #ptl-side > div:not([hidden]) :not([hidden]),
  html.arena-mode.ptl-race-choose #ptl-side > div:not([hidden]) :not([hidden]) {
    max-height: none !important;
    white-space: normal !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  html.arena-mode.ptl-race-details #ptl-side > div:not([hidden]) :not([hidden]):not(b):not(span):not(i):not(dt):not(dd):not(button) {
    display: block !important;
  }
}

/* Portrait and tall screens: display box, status line, hold row. */
@media (max-width: 1023px) and (min-height: 501px) {
  html.arena-mode[data-practice-view="active"] .arena {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) 32px 120px !important;
    grid-template-areas: "stage" "status" "hold" !important;
    row-gap: 6px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: hidden !important;
  }
  html.arena-mode[data-practice-view="active"] .arena > *:not(.tree-col):not(.controls-col),
  html.arena-mode[data-practice-view="active"] .tree-col > *,
  html.arena-mode[data-practice-view="active"] .controls-col > * {
    grid-area: auto;
  }
  html.arena-mode[data-practice-view="active"] .ptl-race-status { grid-area: status !important; }
  html.arena-mode[data-practice-view="active"] #ptl-race-row {
    grid-area: hold !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    margin: 0 !important;
    align-self: stretch !important;
    overflow: visible;
  }

  /* The display box. Same size for the tree and the scoreboard. */
  html.arena-mode[data-practice-view="active"] .tree-v2,
  html.arena-mode[data-practice-view="active"] .tree-v2.reveal {
    grid-area: stage !important;
    position: relative !important;
    justify-self: center !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    aspect-ratio: 901 / 1746;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
    container-type: normal !important;
  }
  html.arena-mode[data-practice-view="active"] .tree-v2 .ptl-tree-art {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: opacity 0.12s linear;
  }
  html.arena-mode[data-practice-view="active"] .tree-v2.reveal .ptl-tree-art,
  html.arena-mode[data-practice-view="active"] .tree-v2.reveal .pr-bulb {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  html.arena-mode[data-practice-view="active"] .tree-v2 .solo-board,
  html.arena-mode[data-practice-view="active"] .tree-v2.reveal .solo-board {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    max-width: none !important;
    aspect-ratio: 574 / 983;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    overflow: hidden;
    z-index: 2;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
  }
  html.arena-mode[data-practice-view="active"] .tree-v2.reveal .solo-board {
    opacity: 1 !important;
    visibility: visible !important;
  }
  html.arena-mode[data-practice-view="active"] .tree-v2 .solo-board img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
}

/* Hold to stage: one fixed size so the label change never moves it. */
@media (max-width: 1023px) and (max-height: 500px) {
  html.arena-mode[data-practice-view="active"] #tb-btn {
    width: 272px !important;
    min-width: 272px !important;
    max-width: 272px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }
  html.arena-mode[data-practice-view="active"] .ptl-race-status { order: 0; grid-area: side; align-self: start; }
  /* The tree box keeps its size when the scoreboard reveal runs. */
  html.arena-mode[data-practice-view="active"]:not(:has(.stage-pair)) .tree-v2.reveal {
    width: auto !important;
    max-width: calc(100% - 12px) !important;
    aspect-ratio: 901 / 1746;
  }
}
@media (max-width: 1023px) and (min-height: 501px) {
  html.arena-mode[data-practice-view="active"] #tb-btn {
    width: 196px !important;
    min-width: 196px !important;
    max-width: 196px !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    overflow: visible;
    box-sizing: border-box !important;
  }
  html.arena-mode[data-practice-view="active"] .transbrake-zone {
    flex: 0 0 auto !important;
  }
}

/* Narrow phones: the control bar stays one row under the game name. */
@media (max-width: 379px) {
  html.arena-mode[data-practice-view="active"] .ptl-control-bar .ab-right {
    flex-wrap: nowrap !important;
    gap: 3px !important;
  }
  html.arena-mode[data-practice-view="active"] #ptl-games-back { order: 2; }
  html.arena-mode[data-practice-view="active"] .ptl-control-bar {
    flex-wrap: wrap !important;
  }
  html.arena-mode[data-practice-view="active"] .ptl-control-bar .ptl-setup-btn,
  html.arena-mode[data-practice-view="active"] .ptl-control-bar button {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }
  .ptl-race-status__line { gap: 8px; }
  html.arena-mode[data-practice-view="active"] .ptl-race-status { font-size: 11px; gap: 6px; }
}

/* t472: judged result line (side panel) and game-over stage button. */
.ptl-last-result { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid #e3263b; background: #16181b; color: #f2f2f2; font-size: 13px; line-height: 1.35; }
.ptl-last-result[hidden] { display: none; }
.ptl-last-result.is-over { border-left-color: #fff; }
.transbrake-btn.is-over { background: #2a2d31; color: #fff; border-color: #e3263b; }