/* Practice session chrome. Secondary to the equipment. Near-black,
   graphite, white, PTL red on the selected tab only. */

.ptl-session-tabs {
  display: flex;
  flex: 0 1 440px;
  align-items: stretch;
  gap: 0;
  width: auto;
  max-width: 440px;
  margin: 0;
  border-bottom: 1px solid #2a2e34;
}

.ptl-session-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  padding: 6px 8px 5px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #9aa3ad;
  font: 700 11px/1.2 'Saira', 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.ptl-session-tab .short { display: none; }

.ptl-session-tab.is-on {
  color: #f3f4f5;
  border-bottom-color: #e3263b;
}

.ptl-session-tab:focus-visible {
  outline: 1px solid #9aa3ad;
  outline-offset: 2px;
}

.ptl-session-banner {
  margin: 0 auto 4px;
  max-width: 720px;
  color: #c6ccd4;
  font: 600 12px/1.3 'Inter', sans-serif;
  letter-spacing: 0.02em;
  text-align: center;
}

.ptl-mode-dock {
  order: 4;
  width: 100%;
  max-width: 920px;
  margin: 2px auto 0;
  flex: 0 0 auto;
}

.ptl-mode-card {
  color: #e7eaef;
  font: 600 12px/1.3 'Inter', sans-serif;
}

.ptl-mode-card[hidden],
.ptl-mode-card__row[hidden],
.ptl-golf-final[hidden],
#ptl-br-reveal[hidden],
#ptl-br-restart[hidden],
#ptl-golf-restart[hidden],
#ptl-champ-restart[hidden],
#ptl-side[hidden],
#ptl-side-golf[hidden],
#ptl-side-bracket[hidden],
#ptl-side-free[hidden],
#ptl-side-streak[hidden],
#ptl-side-champion[hidden],
#ptl-review-back[hidden],
.ptl-session-list[hidden] {
  display: none !important;
}

.ptl-mode-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px 16px;
}

.ptl-mode-card__row b,
.ptl-scorecard b,
.ptl-br-reveal b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: #f3f4f5;
}

.ptl-scorecard {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}

.ptl-scorecard__hole {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 1px 2px 1px;
  background: #14181e;
  color: #9aa3ad;
}

.ptl-scorecard__hole span { font-size: 9px; letter-spacing: 0.08em; }
.ptl-scorecard__hole b { font-size: 11px; min-height: 14px; }
.ptl-scorecard__hole i { font-style: normal; font-size: 11px; color: #f3f4f5; }
.ptl-scorecard__hole.is-current { box-shadow: inset 0 -2px 0 #e3263b; }
.ptl-scorecard__hole.is-open b,
.ptl-scorecard__hole.is-open i { color: #8b95a3; }

.ptl-golf-final {
  margin: 0;
  text-align: center;
  font: 800 13px/1 'Saira', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3f4f5;
}

.ptl-field {
  display: inline-flex;
  border: 1px solid #3a424d;
  background: #171c24;
}

.ptl-field button {
  min-width: 36px;
  min-height: 28px;
  border: 0;
  background: transparent;
  color: #c6ccd4;
  font: 700 11px/1 'Saira', sans-serif;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.ptl-field button[data-ladder] { min-width: 88px; padding: 0 10px; }

.ptl-field button.is-on {
  background: #e3263b;
  color: #fff;
}

.ptl-field button:disabled {
  cursor: not-allowed;
}

.ptl-field button:disabled:not(.is-on) {
  color: #6d7580;
}

.ptl-br-tools.is-locked .ptl-field {
  box-shadow: inset 0 0 0 1px #3a424d;
}

.ptl-br-tools { justify-content: flex-start; gap: 8px; }
.ptl-br-tools .ptl-br-field { margin: 0; }
.ptl-br-tools .ptl-setup-btn { margin-left: auto; }

.ptl-br-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 8px 0 0;
  color: #f3f4f5;
  font: 600 12px/1.35 'Inter', sans-serif;
}
.ptl-br-line > * + *::before,
.ptl-br-reveal > * + *::before,
.ptl-br-reveal > :first-child::before {
  content: " \00b7 ";
  color: #8b95a3;
}
.ptl-br-reveal { display: contents; }
.ptl-br-reveal[hidden] { display: none !important; }
.ptl-br-reveal b { font-weight: 700; }

.ptl-ladder {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  max-height: none;
  overflow: visible;
  border: 1px solid #2a2e34;
  background: #14181e;
}

.ptl-ladder__head,
.ptl-ladder__row {
  display: grid;
  grid-template-columns: minmax(78px, 1.15fr) minmax(112px, 1.5fr) 3em 3em 2em;
  gap: 4px;
  align-items: center;
  padding: 5px 8px;
  border-top: 1px solid #2a2e34;
  background: #14181e;
  color: #f3f4f5;
  font: 600 11px/1.2 'Inter', sans-serif;
}

.ptl-ladder__head {
  border-top: 0;
  background: #10141a;
  color: #8b95a3;
  font: 700 9px/1 'Saira', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ptl-ladder__you,
.ptl-ladder__them,
.ptl-ladder__mark {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  text-align: right;
}

.ptl-ladder__row.is-current {
  background: #1a1216;
  box-shadow: inset 3px 0 0 #e3263b, inset 0 -2px 0 #e3263b;
}
.ptl-ladder__row.is-current .ptl-ladder__round { color: #e3263b; }
.ptl-ladder__row.is-future,
.ptl-ladder__row.is-future b,
.ptl-ladder__row.is-future i { color: #8b95a3; }
.ptl-ladder__mark { color: #fff; }
.ptl-ladder__row.is-current .ptl-ladder__mark { color: #e3263b; }

.ptl-session-pop { position: relative; display: inline-flex; align-items: center; gap: 6px; }

.ptl-session-list {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 30;
  width: min(280px, 72vw);
  margin: 0;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 160px;
  overflow: auto;
  background: #12161c;
  border: 1px solid #2a2e34;
}

.ptl-session-list[hidden] { display: none !important; }

.ptl-session-row,
.ptl-session-empty {
  border: 0;
  background: transparent;
  color: #9aa3ad;
  font: 600 11px/1.3 'Inter', sans-serif;
  text-align: left;
  padding: 2px 0;
  cursor: pointer;
}

.ptl-review-back { margin-left: 8px; }

html[data-session-mode="golf"] .session-strip,
html[data-session-mode="bracket"] .session-strip,
html[data-session-mode="lls"] .session-strip,
html[data-session-mode="pair"] .session-strip,
html[data-session-mode="consistency"] .session-strip,
html[data-session-mode="golf"] #ptl-engage,
html[data-session-mode="bracket"] #ptl-engage,
html[data-session-mode="lls"] #ptl-engage,
html[data-session-mode="pair"] #ptl-engage,
html[data-session-mode="consistency"] #ptl-engage,
html[data-session-mode="golf"] .stats-panel,
html[data-session-mode="bracket"] .stats-panel,
html[data-session-mode="lls"] .stats-panel,
html[data-session-mode="pair"] .stats-panel,
html[data-session-mode="consistency"] .stats-panel {
  display: none !important;
}

.ab-delay-quick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ab-delay-quick .ptl-delay-step {
  min-height: 28px;
  min-width: 28px;
  padding: 0 6px;
  font-size: 16px;
}

.ptl-setup-btn {
  min-height: 32px;
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.setup-devices {
  max-width: 440px;
  margin: 0 auto 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2e34;
}

.setup-devices .ab-hw { margin: 0 8px 8px 0; }

.setup-devices__note {
  margin: 0 0 8px;
  color: #9aa3ad;
  font: 500 12px/1.4 'Inter', sans-serif;
}

.ptl-tools-toggle { display: none; }

@media (max-width: 1023px) {
  .ptl-session-tabs { flex: 1 1 100%; max-width: none; margin-bottom: 0; }
  .ptl-session-tab { letter-spacing: 0.06em; font-size: 10px; padding: 6px 2px; }
  .ptl-scorecard { flex-direction: row; gap: 2px; }
  .ptl-scorecard__hole { min-width: 0; flex: 1 1 0; flex-direction: column; }
  .ptl-scorecard__hole b { font-size: 9px; }
  .ptl-ladder { flex-direction: column; max-height: none; overflow: visible; }
  .ptl-tools-toggle { display: inline-flex; }
  #rt-display:not(.tools-open) .rt-label .replay-btn:not(.ptl-tools-toggle) { display: none; }
  .ptl-race-row { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .ptl-hold-meta { justify-self: center; text-align: center; }
}

@media (max-width: 520px) {
  .ptl-session-tab .full { display: none; }
  .ptl-session-tab .short { display: inline; }
  .ptl-session-tab { letter-spacing: 0.08em; }
}

@media (min-width: 1024px) {
  html.arena-mode .stage-pair { grid-area: stage; justify-self: center; }
  html.arena-mode #ptl-side { grid-area: side; justify-self: stretch; align-self: stretch; }
  html.arena-mode #ptl-race-row { grid-area: hold; }
  html.arena-mode #rt-display { grid-area: tools; }
  /* One grid for every game. The side track is a real column. It does not
     use a negative margin, so the panel cannot slide under the tree. */
  html[data-session-mode="golf"].arena-mode .arena,
  html[data-session-mode="bracket"].arena-mode .arena,
  html[data-session-mode="free"].arena-mode .arena,
  html[data-session-mode="streak"].arena-mode .arena,
  html[data-session-mode="lls"].arena-mode .arena,
  html[data-session-mode="pair"].arena-mode .arena,
  html[data-session-mode="consistency"].arena-mode .arena,
  html[data-session-mode="champion"].arena-mode .arena {
    grid-template-columns: minmax(0, 1fr) auto 260px minmax(0, 1fr);
    grid-template-rows: var(--ptl-stage-h) auto auto;
    grid-template-areas:
      ". stage side ."
      "hold hold hold hold"
      "tools tools tools tools";
    column-gap: 20px !important;
    align-items: stretch;
  }
  html[data-session-mode="golf"].arena-mode .arena[data-stage-room="strip"],
  html[data-session-mode="bracket"].arena-mode .arena[data-stage-room="strip"],
  html[data-session-mode="free"].arena-mode .arena[data-stage-room="strip"],
  html[data-session-mode="streak"].arena-mode .arena[data-stage-room="strip"],
  html[data-session-mode="lls"].arena-mode .arena[data-stage-room="strip"],
  html[data-session-mode="pair"].arena-mode .arena[data-stage-room="strip"],
  html[data-session-mode="consistency"].arena-mode .arena[data-stage-room="strip"],
  html[data-session-mode="champion"].arena-mode .arena[data-stage-room="strip"] {
    /* The strip is a fixed 96px. The stage uses the height left under the
       header so the hold button stays in the frame. Beside mode keeps the
       full stage variable, including 671px at 1440x900. */
    --ptl-stage-h: clamp(420px, calc(100svh - var(--psh-top, 64px) - var(--psh-bot, 0px) - 268px), 744px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 96px var(--ptl-stage-h) auto auto;
    grid-template-areas:
      "side"
      "stage"
      "hold"
      "tools";
  }
  html.arena-mode .arena[data-stage-room="strip"] #ptl-side {
    align-self: stretch;
    height: 100%;
    max-height: 100%;
  }
  html[data-session-mode="golf"].arena-mode .stage-pair,
  html[data-session-mode="bracket"].arena-mode .stage-pair,
  html[data-session-mode="free"].arena-mode .stage-pair,
  html[data-session-mode="streak"].arena-mode .stage-pair,
  html[data-session-mode="lls"].arena-mode .stage-pair,
  html[data-session-mode="pair"].arena-mode .stage-pair,
  html[data-session-mode="consistency"].arena-mode .stage-pair,
  html[data-session-mode="champion"].arena-mode .stage-pair {
    width: auto !important;
    justify-self: end;
  }
  html[data-session-mode="golf"].arena-mode #ptl-side,
  html[data-session-mode="bracket"].arena-mode #ptl-side,
  html[data-session-mode="free"].arena-mode #ptl-side,
  html[data-session-mode="streak"].arena-mode #ptl-side,
  html[data-session-mode="lls"].arena-mode #ptl-side,
  html[data-session-mode="pair"].arena-mode #ptl-side,
  html[data-session-mode="consistency"].arena-mode #ptl-side,
  html[data-session-mode="champion"].arena-mode #ptl-side {
    position: static;
    justify-self: stretch;
    align-self: start;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: 100%;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #2a313b;
    background: #14181e;
  }
  html.arena-mode .ctrl-sheet {
    top: var(--psh-top, 0px);
    left: auto;
    right: 0;
    bottom: var(--psh-bot, 0px);
    width: min(420px, 36vw);
    border-radius: 0;
    border-top: none;
    border-left: 1px solid #2a2e34;
    transform: translateX(105%);
    z-index: 420;
  }
  html.arena-mode .ctrl-sheet.open { transform: translateX(0); }
  html.arena-mode .ctrl-sheet .cs-grab { display: none; }
}

.setup-devices .ab-hw {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  margin: 0 8px 8px 0;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid #3a424d;
  background: #171c24;
  color: #e7eaef;
  font: 700 12px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.setup-devices .ab-hw .ab-hw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6f7a89;
}

/* One bar under the nav. The old Practice Tree title row is gone. */
html.arena-mode .ptl-control-bar {
  display: flex !important;
  align-items: center;
  gap: 8px 12px;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
  min-height: 32px;
}
html.arena-mode .ptl-control-bar .ab-title-s {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #8b95a3;
}
html.arena-mode #ab-save-note:empty,
html.arena-mode #ab-save-note[data-stats="off"] {
  display: none;
  flex: 0 0 0;
  width: 0;
  margin: 0;
  padding: 0;
}
html.arena-mode .ptl-control-bar .ab-right { margin-left: auto; flex: 0 0 auto; }
html.arena-mode .ptl-control-bar .ab-hw { display: none; }

@media (min-width: 1024px) {
  /* Stage, hold row, and tools are siblings once the column wrappers drop out.
     Phones keep the existing tree-then-scoreboard column. */
  html.arena-mode .tree-col,
  html.arena-mode .controls-col { display: contents; }

  html.arena-mode .arena {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "hold"
      "tools";
    align-items: start;
    align-content: start;
    justify-items: stretch;
    gap: 8px 16px !important;
    width: 100% !important;
    max-width: none !important;
    padding-top: 0 !important;
  }
  html.arena-mode .stage-pair { grid-area: stage; justify-self: center; }
  html.arena-mode #ptl-race-row { grid-area: hold; width: 100%; }
  html.arena-mode #rt-display { grid-area: tools; }
  html.arena-mode #ptl-side {
    grid-area: side;
    position: static;
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  html.arena-mode #ptl-side > div {
    min-width: 0;
    min-height: 0;
  }
}

.ptl-race-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 0 12px;
  width: 100%;
}
html.arena-mode .ptl-race-row .tb-row {
  grid-column: 2 / 3;
  grid-row: 1;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  align-self: center;
}
.ptl-hold-meta {
  grid-column: 3 / 4;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  min-width: 0;
  color: #c6ccd4;
  font: 600 12px/1.3 'Inter', sans-serif;
  text-align: right;
}
html.arena-mode .session-strip {
  margin: 0 !important;
  justify-content: flex-end !important;
}
html.arena-mode .session-strip b {
  color: #f3f4f5 !important;
  text-shadow: none !important;
}
.ptl-br-field {
  margin: 2px 0 0;
  color: #9aa3ad;
  font: 700 10px/1.2 'Saira', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html.arena-mode #rt-display {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 36px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative;
  z-index: 5;
}
html.arena-mode .ptl-race-row { position: relative; z-index: 1; }
html.arena-mode #rt-display .rt-label {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  opacity: 1 !important;
  color: #c6ccd4;
}
html.arena-mode #rt-display .rt-label > span {
  display: inline !important;
  color: #c6ccd4;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html.arena-mode #rt-display .replay-btn {
  opacity: 1 !important;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #3a424d;
  background: #171c24;
  color: #e7eaef;
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.04em;
  text-transform: none;
}
html.arena-mode #rt-display .replay-btn:disabled {
  opacity: 1 !important;
  color: #b7c0cb;
  background: #14181e;
  border-color: #323943;
  cursor: not-allowed;
}
html.arena-mode #rt-display .replay-btn:not(:disabled):hover {
  border-color: #8b95a3;
  color: #f3f4f5;
  background: #1e242c;
}
@media (min-width: 1024px) {
  html.arena-mode #rt-display .rt-label { flex-wrap: nowrap; }
}

@media (min-width: 1024px) {
  html.arena-mode .ptl-scorecard {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
  }
  html.arena-mode .ptl-scorecard__hole {
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 4px 8px;
  }
  html.arena-mode .ptl-scorecard__hole span { width: 1.2em; }
  html.arena-mode .ptl-scorecard__hole b { font-size: 12px; }
  html.arena-mode .ptl-golf-final { text-align: left; margin: 0 0 6px; }
}

@media (max-width: 1023px) {
  html.arena-mode .ptl-control-bar { flex-wrap: wrap; row-gap: 2px; }
  html.arena-mode .tree-v2 { order: 1; }
  html.arena-mode #ptl-side {
    order: 2;
    position: static;
    display: flex;
    flex-direction: column;
    flex: 0 0 96px;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    height: 96px;
    min-height: 96px;
    max-height: 96px;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #2a313b;
    background: #14181e;
  }
  html.arena-mode #ptl-side > div {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
  }
  html.arena-mode #ptl-race-row { order: 3; display: flex; flex-direction: column; align-items: center; }
  html.arena-mode .ptl-hold-meta { text-align: center; }
  html.arena-mode .session-strip { justify-content: center !important; }
  html.arena-mode #rt-display { order: 4; }
}

/* The panel box is fixed. Text wraps inside it. Nothing is pulled with
   a negative offset, and a hit cannot change the box height. */
html.arena-mode #ptl-side,
html.arena-mode #ptl-side * {
  min-width: 0;
  box-sizing: border-box;
}
html.arena-mode #ptl-side * {
  max-height: 100%;
}
html.arena-mode #ptl-side .ptl-setup-btn,
html.arena-mode #ptl-side .ptl-board__state,
html.arena-mode #ptl-side .ptl-board__note,
html.arena-mode #ptl-side .ptl-side-note,
html.arena-mode #ptl-side .ptl-champ-empty,
html.arena-mode #ptl-side .ptl-champ-credit {
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}
html.arena-mode #ptl-side .ptl-board__nums {
  margin: 2px 0 4px;
  font-size: 22px;
  line-height: 1;
}
html.arena-mode #ptl-side > div:not([hidden]) {
  max-height: 100%;
}

html.arena-mode .arena[data-stage-room="strip"] #ptl-side > div:not([hidden]),
html.arena-mode .arena[data-stage-room="strip"] #ptl-side-champion {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
html.arena-mode .arena[data-stage-room="strip"] .ptl-streak-live {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-areas: "id stats" "status status" "bar bar";
  align-items: center;
  gap: 2px 10px;
}
html.arena-mode .arena[data-stage-room="strip"] .ptl-streak-live__id { grid-area: id; }
html.arena-mode .arena[data-stage-room="strip"] .ptl-streak-live__stats { grid-area: stats; margin: 0; }
html.arena-mode .arena[data-stage-room="strip"] .ptl-streak-live__status { grid-area: status; white-space: nowrap; }
html.arena-mode .arena[data-stage-room="strip"] .ptl-streak-live__bar { grid-area: bar; }
html.arena-mode .arena[data-stage-room="strip"] .ptl-streak-live__name { font-size: 13px; }
html.arena-mode .arena[data-stage-room="strip"] .ptl-stats,
html.arena-mode .arena[data-stage-room="strip"] #ptl-champ-gallery {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 4px 8px;
  flex: 1 1 auto;
  overflow: hidden;
}
html.arena-mode .arena[data-stage-room="strip"] .ptl-champ-card {
  flex: 1 1 0;
  margin: 0;
  padding: 4px 6px;
}
html.arena-mode .arena[data-stage-room="strip"] #ptl-champ-ladder,
html.arena-mode .arena[data-stage-room="strip"] #ptl-golf-card,
html.arena-mode .arena[data-stage-room="strip"] #ptl-br-ladder {
  display: none;
}

@media (max-width: 1023px) {
  html.arena-mode #ptl-side > div:not([hidden]),
  html.arena-mode #ptl-side-champion {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  html.arena-mode .ptl-streak-live {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: "id stats" "status status" "bar bar";
    align-items: center;
    gap: 2px 8px;
  }
  html.arena-mode .ptl-streak-live__id { grid-area: id; }
  html.arena-mode .ptl-streak-live__stats { grid-area: stats; }
  html.arena-mode .ptl-streak-live__status { grid-area: status; }
  html.arena-mode .ptl-streak-live__bar { grid-area: bar; }
  html.arena-mode .ptl-streak-live__name { font-size: 12px; }
  html.arena-mode .ptl-streak-live__stats dd { font-size: 14px; }
  html.arena-mode #ptl-side .ptl-stats,
  html.arena-mode #ptl-side #ptl-champ-gallery {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    gap: 2px 8px;
    flex: 1 1 auto;
    overflow: hidden;
    max-height: 100%;
  }
  html.arena-mode #ptl-side .ptl-champ-card {
    flex: 1 1 120px;
    margin: 0;
    padding: 3px 6px;
  }
  html.arena-mode #ptl-side #ptl-champ-ladder { display: none; }
}

/* Phone landscape lives at the end of ptl-solo.css so it wins the cascade. */

/* One Delay Box. The LCD (#delay-val) is the only delay readout. */
.ptl-delay-dock { min-width: 0; }
.ptl-delay-dock[hidden], .ab-delay-quick[hidden] { display: none !important; }
html:not([data-session-mode="bracket"]) .pro-cube .pc-steps { display: none !important; }
html.arena-mode #ptl-side > .ptl-delay-dock { flex: 0 0 auto; max-height: none; }
html.arena-mode #ptl-side .ptl-delay-dock,
html.arena-mode #ptl-side .ptl-delay-dock * { max-height: none; }
.ptl-delay-dock .pro-cube {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px 8px 6px;
}
.ptl-delay-dock .pc-screw-row,
.ptl-delay-dock .pc-footer,
.ptl-delay-dock .pc-status,
.ptl-delay-dock .pc-brand { display: none; }
.ptl-delay-dock .pc-displays {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0;
}
.ptl-delay-dock .pc-lcd-value { font-size: 22px; letter-spacing: 2px; }
.ptl-delay-dock .pc-lcd::before {
  content: '8.888';
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1;
  top: 6px;
}
.ptl-delay-dock .pc-steps {
  display: flex;
  flex-flow: row wrap;
  gap: 6px;
  margin-top: 6px;
}
.ptl-delay-dock .pc-steps button {
  flex: 1 1 64px;
  min-width: 64px;
  min-height: 36px;
  padding: 0 6px;
  border: 1px solid #3a424d;
  border-radius: 4px;
  background: #171c24;
  color: #f3f4f5;
  font: 700 13px/1 'JetBrains Mono', ui-monospace, monospace;
  white-space: nowrap;
  cursor: pointer;
}
.ptl-delay-dock .pc-steps button:focus-visible { outline: 1px solid #f3f4f5; outline-offset: 1px; }
#ptl-delay-full {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Saira', sans-serif;
}
.ptl-delay-full-roll { display: none; }
@media (min-width: 1024px) {
  #ptl-delay-full { display: none; }
  .ptl-delay-dock .pc-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  html.arena-mode #ptl-side .ptl-delay-dock .pc-steps button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 1023px) {
  .ptl-delay-dock { position: relative; width: auto; flex: 0 0 auto; height: 32px; }
  .ptl-delay-dock .pro-cube {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: none;
    width: auto;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .ptl-delay-dock .pc-displays { display: flex; align-items: center; gap: 4px; margin: 0; }
  .ptl-delay-dock .pc-lcd-value,
  .ptl-delay-dock .pc-lcd::before {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 32px;
    top: 0;
  }
  .ptl-delay-dock .pc-display-wrap:nth-child(n + 2) { display: none; }
  .ptl-delay-dock.is-full .pc-display-wrap:nth-child(n + 2) {
    display: block;
    position: absolute;
    z-index: 30;
    top: calc(100% + 40px);
    right: 0;
    width: min(220px, 80vw);
    padding: 8px;
    background: #14181e;
    border: 1px solid #2a313b;
  }
  .ptl-delay-dock.is-full .pc-display-wrap:nth-child(3) { top: calc(100% + 96px); }
  .ptl-delay-dock .pc-label-bottom,
  .ptl-delay-dock .pc-label-top { display: none; }
  .ptl-delay-dock .pc-steps { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; }
  .ptl-delay-dock .pc-steps button {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    min-height: 32px;
    height: 32px;
    padding: 0;
    font-size: 11px;
  }
  .ptl-delay-dock .pc-steps button[data-delay-step="-0.005"],
  .ptl-delay-dock .pc-steps button[data-delay-step="0.005"] { display: none; }
  .ptl-delay-dock.is-full .pc-steps button[data-delay-step="-0.005"],
  .ptl-delay-dock.is-full .pc-steps button[data-delay-step="0.005"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    width: auto;
    min-width: 64px;
    background: #171c24;
  }
  .ptl-delay-dock.is-full .pc-steps {
    position: absolute;
    z-index: 32;
    top: calc(100% + 4px);
    right: 0;
    display: flex;
    flex-wrap: wrap;
    width: min(280px, 86vw);
    padding: 8px;
    background: #14181e;
    border: 1px solid #2a313b;
  }
  /* Closed control matches the old Box button so Free Hits and the other
     practice modes keep the same bar. Rollout is the bracket session only. */
  #ptl-delay-full {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    flex: 0 0 auto;
    overflow: hidden;
  }
  html[data-session-mode="bracket"] #ptl-delay-full {
    width: auto;
    max-width: none;
    overflow: visible;
  }
  html[data-session-mode="bracket"] #ptl-delay-full .ptl-delay-full-box { display: none; }
  html[data-session-mode="bracket"] #ptl-delay-full .ptl-delay-full-roll { display: inline; }
}

.ptl-sim-note {
  margin: 0 0 4px;
  color: #9aa3ad;
  font: 700 10px/1.2 'Saira', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ptl-br-block { margin: 0 0 6px; }
.ptl-br-block h3 {
  margin: 0 0 2px;
  color: #9aa3ad;
  font: 700 10px/1.2 'Saira', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ptl-br-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  margin: 0;
}
.ptl-br-dl dt { color: #8b95a3; font: 600 11px/1.3 'Inter', sans-serif; }
.ptl-br-dl dd { margin: 0; color: #f3f4f5; font: 700 12px/1.3 'JetBrains Mono', ui-monospace, monospace; }
.ptl-br-result {
  margin: 0;
  color: #f3f4f5;
  font: 800 18px/1.2 'Saira', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ptl-br-qual {
  margin: 0 0 6px;
  padding: 6px 8px;
  background: #10141a;
  border: 1px solid #2a313b;
}
.ptl-br-qual h3 {
  margin: 0 0 4px;
  color: #9aa3ad;
  font: 700 10px/1.2 'Saira', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ptl-br-qual p {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  color: #f3f4f5;
  font: 700 14px/1.35 'Inter', sans-serif;
}
.ptl-br-qual-place { white-space: nowrap; }
.ptl-br-qual-vs { display: flex; align-items: center; gap: 6px; }
.ptl-br-sheet { margin-top: 8px; }
.ptl-br-round-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 6px;
}
.ptl-br-round-tab {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid #3a424d;
  background: #171c24;
  color: #c6ccd4;
  font: 700 11px/1 'Saira', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ptl-br-round-tab.is-on {
  background: #e3263b;
  border-color: #e3263b;
  color: #fff;
}
@media (min-width: 1024px) {
  #ptl-br-sheet { display: none; }
}
html.arena-mode #ptl-side .ptl-field,
html.arena-mode #ptl-side .ptl-br-tools {
  min-width: max-content;
  width: auto;
  max-height: none;
}
html.arena-mode #ptl-side .ptl-delay-dock .pc-steps button,
html.arena-mode #ptl-side .ptl-field button {
  min-width: 36px;
  max-height: none;
}
.ptl-field button.is-on { color: #f3f4f5; border-bottom: 2px solid #e3263b; }

html.arena-mode .stage-pair,
html.arena-mode .ptl-phone-stage { position: relative; }
.ptl-match-win {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  pointer-events: none;
}
.ptl-match-win[hidden] { display: none !important; }
.ptl-match-win i {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #3a4048, #121418 62%, #050607);
  border: 3px solid #5c636c;
  box-shadow: inset 0 8px 12px #000, 0 0 0 5px #14181e;
  flex: 0 0 auto;
}
.ptl-match-win[data-side="you"] i[data-lamp="you"] {
  background: radial-gradient(circle at 38% 32%, #fff, #ff5a6a 28%, #e3263b 58%, #6e0c18);
  border-color: #fff;
  box-shadow: 0 0 28px 6px rgba(227, 38, 59, 0.85), inset 0 0 10px #fff, 0 0 0 5px #14181e;
}
.ptl-match-win[data-side="opponent"] i[data-lamp="opp"] {
  background: radial-gradient(circle at 38% 32%, #fff8e4, #ffd56a 30%, #f5b942 58%, #8a5a08);
  border-color: #fff;
  box-shadow: 0 0 28px 6px rgba(245, 185, 66, 0.85), inset 0 0 10px #fff, 0 0 0 5px #14181e;
}
.ptl-match-win b {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  max-width: min(440px, calc(100% - 160px));
  padding: 8px 12px;
  background: #0c0e11;
  border: 2px solid #f3f4f5;
  color: #f3f4f5;
  font: 800 22px/1.15 'Saira', sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
@media (max-width: 1023px) {
  .ptl-match-win { bottom: 2px; padding: 0 4px; }
  .ptl-match-win i { width: 56px; height: 56px; box-shadow: inset 0 5px 8px #000, 0 0 0 3px #14181e; }
  .ptl-match-win[data-side="you"] i[data-lamp="you"] {
    box-shadow: 0 0 18px 4px rgba(227, 38, 59, 0.9), inset 0 0 8px #fff, 0 0 0 3px #14181e;
  }
  .ptl-match-win[data-side="opponent"] i[data-lamp="opp"] {
    box-shadow: 0 0 18px 4px rgba(245, 185, 66, 0.9), inset 0 0 8px #fff, 0 0 0 3px #14181e;
  }
  .ptl-match-win b {
    bottom: 8px;
    max-width: calc(100% - 128px);
    padding: 6px 8px;
    font-size: 16px;
    line-height: 1.15;
  }
}

.ptl-bracket-view {
  width: min(1100px, 96vw);
  max-height: min(860px, 92vh);
  margin: auto;
  padding: 12px;
  border: 1px solid #2a313b;
  background: #0c0e11;
  color: #f3f4f5;
}
.ptl-bracket-view::backdrop { background: rgba(0, 0, 0, 0.72); }
.ptl-bracket-view__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ptl-bracket-view__bar p { margin: 0; font: 800 16px/1.2 'Saira', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
#ptl-bracket-view-body { display: flex; gap: 12px; align-items: flex-start; overflow: auto; }
.ptl-bv-round { flex: 1 1 160px; min-width: 150px; }
.ptl-bv-round h4 { margin: 0 0 6px; color: #e3263b; font: 800 12px/1.2 'Saira', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.ptl-bv-match { margin: 0 0 6px; padding: 6px 8px; background: #14181e; border: 1px solid #2a313b; }
.ptl-bv-match.is-you { border-color: #e3263b; box-shadow: inset 3px 0 0 #e3263b; }
.ptl-bv-match.is-now { border-color: #d4b46a; }
.ptl-bv-match p {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  font: 700 14px/1.35 'Inter', sans-serif;
  color: #c6ccd4;
}
.ptl-bv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptl-bv-rt { font: 700 13px/1 'JetBrains Mono', ui-monospace, monospace; color: #f3f4f5; }
.ptl-bv-mark {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 28px;
  font-style: normal;
  font: 800 12px/1 'Saira', sans-serif;
  color: #e3263b;
}
.ptl-bv-lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1c222b;
  box-shadow: inset 0 0 0 1px #3a424d;
}
.ptl-bv-mark.is-win .ptl-bv-lamp {
  background: #e3263b;
  box-shadow: 0 0 8px rgba(227, 38, 59, 0.9);
}
.ptl-bv-match p.is-winner { color: #f3f4f5; }
#ptl-bracket-view-body.is-paged { display: block; overflow: auto; max-height: min(72vh, 720px); }
#ptl-bracket-view-body.is-paged .ptl-bv-round { flex: none; width: 100%; min-width: 0; }
.ptl-br-sheet.is-paged { max-height: min(46vh, 420px); overflow: auto; }
.ptl-seed {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 1.7em;
  height: 1.35em;
  padding: 0 4px;
  background: #e3263b;
  color: #fff;
  font: 800 12px/1 'JetBrains Mono', ui-monospace, monospace;
}
@media (max-width: 800px) {
  .ptl-bracket-view {
    inset: auto;
    top: 50%;
    width: min(100vw, 560px);
    max-width: 100vw;
    height: fit-content;
    max-height: 100vh;
    margin: 0 auto;
    transform: translateY(-50%);
  }
  #ptl-bracket-view-body { display: block; }
  #ptl-bracket-view-body.is-paged { max-height: min(68vh, 640px); }
  .ptl-bv-round { min-width: 0; margin-bottom: 14px; }
  .ptl-bv-match p { font-size: 16px; }
}

/* Mock Brackets below 1024px: the dock sits at the top of the side panel,
   clear of the session title and nav. Size it to its content so it does not
   spill onto the simulated field rows. */
@media (max-width: 1023px) {
  html.arena-mode[data-session-mode="bracket"] #ptl-side > .ptl-delay-dock {
    position: relative;
    height: auto;
    flex: 0 0 auto;
    align-self: stretch;
    margin: 0 0 8px;
  }
  html.arena-mode[data-session-mode="bracket"] #ptl-side > .ptl-delay-dock .pro-cube {
    height: auto;
    flex-wrap: wrap;
  }
}
@media (max-width: 1023px) and (max-height: 500px) {
  /* Landscape phones: the side panel is height-capped, so let it scroll
     instead of squeezing the dock onto the field rows. */
  html.arena-mode[data-session-mode="bracket"] #ptl-side { overflow-y: auto; }
  html.arena-mode[data-session-mode="bracket"] #ptl-side > * { flex-shrink: 0; }
}