.home-actions > #ball-picker {
  display: grid;
  grid-template-columns: 26px auto minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 5px 12px;
  text-align: start;
  background: #132c33f5;
  color: var(--cov-paper);
  box-shadow: inset 2px 0 var(--cov-gold), inset 0 0 0 1px #537677;
}

#ball-picker canvas { display: block; width: 26px; height: 26px; }

.home-actions > #ball-picker .ball-picker-title {
  font: 800 14px/1.2 system-ui, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
}

.home-actions > #ball-picker .ball-picker-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #bfddd6;
  font: 700 12px/1.2 system-ui, sans-serif;
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-actions > #ball-picker .ball-picker-value > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  font: inherit;
  letter-spacing: inherit;
  text-overflow: ellipsis;
}

.home-actions > #ball-picker .ball-picker-value > .ball-picker-model { display: none; }

#ball-picker svg { color: var(--cov-gold); }

#dialog[data-panel="ball-picker"] { overflow: hidden; }

#dialog[data-panel="ball-picker"] #dialog-content {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 24px);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
}

#dialog[data-panel="ball-picker"] .dialog-head { margin-bottom: 10px; }
#dialog[data-panel="ball-picker"] .ball-picker-copy { margin: 0 0 10px; }

@media (orientation: portrait) and (max-width: 599px) {
  .home-actions > #ball-picker .ball-picker-value > .ball-picker-full { display: none; }

  .home-actions > #ball-picker .ball-picker-value > .ball-picker-model {
    display: block;
    font-family: var(--volley-numeral);
    font-weight: 700;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="ball-picker"] .ball-choice-label {
    border-color: #63849486;
    border-radius: 8px;
    background:
      radial-gradient(ellipse at 50% 27%, #55748280 3%, transparent 61%),
      linear-gradient(165deg, #213d50, #162b3a 72%);
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="ball-picker"] .ball-choice-original .ball-choice-label {
    background: linear-gradient(112deg, #284752, #173041 72%);
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="ball-picker"] .ball-choice-radio:checked + .ball-choice-label {
    border-color: #92e0d2;
    box-shadow: inset 0 0 0 1px #7ddcca80;
    background:
      radial-gradient(ellipse at 50% 27%, #74b7a681 1%, transparent 62%),
      linear-gradient(165deg, #2b4c53, #183846 78%);
  }
}

#dialog .ball-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 3px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ball-choice { position: relative; }
.ball-choice-original { grid-column: 1 / -1; }

.ball-choice-radio {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ball-choice-label {
  position: relative;
  display: grid;
  height: 100%;
  min-height: 84px;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 5px 5px 6px;
  text-align: center;
  color: var(--cov-paper);
  background: radial-gradient(ellipse at 50% 25%, #25474c, #173339 72%);
  border: 1px solid var(--cov-rim);
  border-radius: 5px 5px 9px 5px;
  cursor: pointer;
}

.ball-choice-original .ball-choice-label {
  min-height: 53px;
  grid-template-columns: 40px minmax(0, 1fr);
  place-items: center start;
  gap: 9px;
  padding-inline: 9px 27px;
  text-align: start;
  background: linear-gradient(110deg, #25474c, #173339 75%);
}

.ball-choice-preview {
  display: block;
  width: 45px;
  height: 45px;
  filter: drop-shadow(0 3px 2px #081819a6);
}

.ball-choice-original .ball-choice-preview { width: 38px; height: 38px; }
.ball-choice-text { display: grid; min-width: 0; gap: 2px; }
.ball-choice-text strong { font: 800 13px/1.12 system-ui, sans-serif; overflow-wrap: anywhere; }
.ball-choice-text small { color: var(--cov-muted); font: 600 11px/1.15 system-ui, sans-serif; }

.ball-choice-check {
  position: absolute;
  inset: 5px 5px auto auto;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  color: var(--cov-ink);
  background: var(--cov-mint);
  font: 900 12px/1 system-ui, sans-serif;
  visibility: hidden;
}

.ball-choice-radio:checked + .ball-choice-label {
  border-color: var(--cov-mint);
  box-shadow: inset 0 0 0 1px var(--cov-mint);
}

.ball-choice-radio:checked + .ball-choice-label .ball-choice-check { visibility: visible; }
.ball-choice-radio:focus-visible + .ball-choice-label { outline: 2px solid var(--cov-gold); outline-offset: 1px; }

@media (hover: hover) {
  .ball-choice-label:hover { border-color: var(--cov-mint); }
}

@media (orientation: landscape) and (max-height: 460px) {
  #dialog[data-panel="ball-picker"] { width: 560px; }
  #dialog[data-panel="ball-picker"] #dialog-content { padding-block: 10px; }
  #dialog[data-panel="ball-picker"] .dialog-head { padding-bottom: 6px; margin-bottom: 6px; }
  #dialog[data-panel="ball-picker"] .ball-picker-copy { margin-bottom: 6px; }
  #dialog[data-panel="ball-picker"] .dialog-actions { margin-top: 7px; }
  #dialog .ball-choice-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ball-choice-original { grid-column: auto; }
  .ball-choice-original .ball-choice-label {
    grid-template-columns: none;
    place-items: center;
    gap: 3px;
    padding-inline: 5px;
    text-align: center;
    background: radial-gradient(ellipse at 50% 25%, #25474c, #173339 72%);
  }
  .ball-choice-label { min-height: 72px; }
  .ball-choice-preview, .ball-choice-original .ball-choice-preview { width: 35px; height: 35px; }
  .home-actions > #ball-picker { position: absolute; top: 0; left: calc(100% + 12px); width: min(240px, 46vw); }
}