.home-actions > #appearance-picker {
  display: grid;
  grid-template-columns: 30px 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;
}

.appearance-picker-portrait {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 7px;
  background: #294053;
}

.appearance-picker-thumbnail {
  /* Frame the head at (374, 8) in a 276px square on the original canvas. */
  position: absolute;
  width: calc(100% * 1024 / 276);
  max-width: none;
  height: auto;
  left: calc(-100% * 374 / 276);
  top: calc(-100% * 8 / 276);
}

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

.home-actions > #appearance-picker .appearance-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;
}

#appearance-picker svg { color: var(--cov-gold); }
:root[data-presentation="broadcast"] .home-actions > #appearance-picker {
  background: #102134ed;
  box-shadow: inset 0 0 0 1px #436074;
}
:root[data-presentation="broadcast"] .home-actions > #appearance-picker .appearance-picker-value { color: #c4dce6; }

@container home-screen (orientation: portrait) and (max-height: 700px) {
  .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app[data-screen="home"] .home-actions > :is(#appearance-picker, #ball-picker) {
    grid-column: auto;
    grid-template-columns: 23px minmax(0, 1fr) 10px;
    grid-template-rows: auto auto;
    min-height: 44px;
    gap: 0 6px;
    padding: 4px 8px;
  }
  .home-actions > :is(#appearance-picker, #ball-picker) > :is(.appearance-picker-portrait, canvas) {
    grid-area: 1 / 1 / span 2;
    width: 23px;
    height: 23px;
  }
  .home-actions > :is(#appearance-picker, #ball-picker) > svg {
    grid-area: 1 / 3 / span 2;
    width: 10px;
  }
  .home-actions > :is(#appearance-picker, #ball-picker) > :is(.appearance-picker-title, .ball-picker-title) {
    grid-area: 1 / 2;
    align-self: end;
    color: #b8cfdc;
    font: 650 10px/1.1 system-ui, sans-serif;
    letter-spacing: 0;
  }
  .home-actions > :is(#appearance-picker, #ball-picker) > :is(.appearance-picker-value, .ball-picker-value) {
    grid-area: 2 / 2;
    align-self: start;
    padding-top: 2px;
    color: #fff3dd;
    font: 800 11px/1.1 system-ui, sans-serif;
    text-align: start;
  }
  .home-actions > .secondary {
    grid-column: auto;
    min-width: 0;
    padding-inline: 11px;
    font-size: clamp(13px, 3.6vw, 16px);
    letter-spacing: 0;
    white-space: nowrap;
  }
  .app[data-screen="home"] .home .home-actions > .start {
    grid-column: 1 / -1;
    justify-content: space-between;
    min-height: 48px;
    padding-inline: 14px;
  }
  .app[data-screen="home"] .home .home-actions > .secondary { min-height: 44px; }
  .home-actions > .start span { font-size: 11px; }
  .home-actions > .secondary b { font-size: 16px; }
}

@media (orientation: portrait) and (max-width: 420px) {
  .app[data-screen="home"] .hero { top: 55px; }
}

@container home-screen (orientation: portrait) and (min-height: 701px) {
  .app[data-screen="home"] .home-actions { bottom: 51px; row-gap: 3px; column-gap: 8px; }
  .app[data-screen="home"] .home-actions > :is(.start, .resume, .secondary) { min-height: 44px; }
}

@media (orientation: landscape) {
  .app[data-screen="home"] footer { pointer-events: none; }
  .app[data-screen="home"] footer :is(button, a) { pointer-events: auto; }
  .home-actions > :is(#appearance-picker, #ball-picker) {
    position: absolute;
    left: calc(100% + 12px);
    width: min(240px, 46vw);
  }
  .home-actions > #appearance-picker { top: 0; }
  .home-actions > #ball-picker { top: 49px; }
}

@media (orientation: landscape) and (max-width: 620px) {
  .app[data-screen="home"] footer { bottom: calc(var(--home-safe-bottom) + 2px); }
}

#dialog[data-panel="appearance-picker"] {
  width: min(520px, calc(100% - var(--safe-left) - var(--safe-right) - 20px));
  max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 24px);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
  overflow-y: auto;
}

#dialog[data-panel="appearance-picker"] #dialog-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(11px, 3.5vw, 20px);
}

#dialog[data-panel="appearance-picker"] #dialog-content .dialog-head {
  align-items: center;
  padding-bottom: 7px;
  margin: 0;
}

#dialog[data-panel="appearance-picker"] #dialog-content .dialog-head h2 {
  margin: 0;
}

.appearance-carousel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.appearance-carousel-main {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
  min-width: 0;
}

.appearance-choice-stage {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  height: min(58vh, 460px);
  height: min(58dvh, 460px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 222px));
  min-height: 100px;
  overflow: hidden;
  border: 1px solid #557988;
  border-radius: 10px 10px 14px 10px;
  background:
    radial-gradient(ellipse at 50% 65%, #67c5bd60, transparent 67%),
    linear-gradient(0deg, #0b1c29 4%, #21475a 100%);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.appearance-choice-stage::before {
  content: '';
  position: absolute;
  inset: auto 26% 4% 26%;
  height: 8%;
  border-radius: 50%;
  background: #030c16a0;
  filter: blur(5px);
  pointer-events: none;
}

.appearance-choice-track {
  position: absolute;
  inset: 0;
  display: flex;
  will-change: transform;
}

.appearance-choice-slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
}

.appearance-choice-preview {
  position: absolute;
  width: calc(100% - 56px);
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  -webkit-user-drag: none;
}

.appearance-choice-slide[data-ready] .appearance-choice-preview { opacity: 1; }
.appearance-choice-slide[data-ready] .appearance-choice-placeholder { visibility: hidden; }
.appearance-choice-placeholder {
  z-index: 1;
  padding-inline: 5px;
  color: #b7d1da;
  font-size: 12px;
  text-align: center;
}

.appearance-arrow {
  grid-area: 1 / 1;
  justify-self: start;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline: 8px;
  padding: 0;
  border: 1px solid #a1bdc6;
  border-radius: 50%;
  background: #10283aee;
  color: #ffe0a5;
  box-shadow: 0 3px 10px #030c1680;
  cursor: pointer;
}

.appearance-arrow[data-appearance-step="1"] { justify-self: end; }
.appearance-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.appearance-arrow:focus-visible { outline: 2px solid #ffe0a5; outline-offset: 2px; }
.appearance-arrow:active:not(:disabled) { background: #284e5e; }
.appearance-arrow:disabled { opacity: .55; cursor: default; }

@media (hover: hover) {
  .appearance-arrow:hover:not(:disabled) { background: #284e5e; }
}

.appearance-carousel-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-inline: 3px;
  color: #fff3dd;
}

.appearance-carousel-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.appearance-carousel-name { font-size: 17px; line-height: 1.2; }
.appearance-carousel-current {
  padding: 3px 7px;
  border: 1px solid #578d8b;
  border-radius: 999px;
  background: #143d48;
  color: #bcfff0;
  font-size: 11px;
  line-height: 1.15;
}

.appearance-carousel-position {
  color: #c6dde5;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.appearance-carousel-hint,
.appearance-choice-status {
  margin: 0;
  color: #b8cfdc;
  font-size: 12px;
  line-height: 1.35;
}

.appearance-carousel-hint { padding-inline: 3px; }
.appearance-choice-status:empty { display: none; }
#dialog[data-panel="appearance-picker"] .dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

@media (orientation: landscape) and (max-height: 460px) {
  #dialog[data-panel="appearance-picker"] #dialog-content { gap: 5px; padding-block: 8px; }
}

@media (orientation: portrait) and (max-width: 599px) {
  #dialog[data-panel="appearance-picker"] .appearance-choice-stage {
    border-color: #73a3af80;
    border-radius: 9px;
    background:
      radial-gradient(ellipse at 50% 45%, #6fa79b63, transparent 65%),
      linear-gradient(165deg, #284657, #192f40 62%, #102330);
    box-shadow: inset 0 0 25px #08152170;
  }

  #dialog[data-panel="appearance-picker"] .appearance-choice-stage::after {
    content: "";
    position: absolute;
    inset: 9px;
    background:
      linear-gradient(#b1d4cb99 0 0) left top / 13px 1px no-repeat,
      linear-gradient(#b1d4cb99 0 0) left top / 1px 13px no-repeat,
      linear-gradient(#b1d4cb99 0 0) right top / 13px 1px no-repeat,
      linear-gradient(#b1d4cb99 0 0) right top / 1px 13px no-repeat,
      linear-gradient(#b1d4cb99 0 0) left bottom / 13px 1px no-repeat,
      linear-gradient(#b1d4cb99 0 0) left bottom / 1px 13px no-repeat,
      linear-gradient(#b1d4cb99 0 0) right bottom / 13px 1px no-repeat,
      linear-gradient(#b1d4cb99 0 0) right bottom / 1px 13px no-repeat;
    pointer-events: none;
  }

  #dialog[data-panel="appearance-picker"] .appearance-arrow {
    border-color: #9ebec38c;
    background: #102535df;
    color: #eef6ec;
    box-shadow: 0 3px 9px #04111c7f;
  }

  #dialog[data-panel="appearance-picker"] .appearance-arrow:active:not(:disabled) {
    background: #315e66;
  }

  #dialog[data-panel="appearance-picker"] .appearance-carousel-caption {
    gap: 6px;
    padding: 3px 5px 0;
  }

  #dialog[data-panel="appearance-picker"] .appearance-carousel-position {
    padding: 3px 6px;
    border: 1px solid #7f9da257;
    border-radius: 5px;
    background: #0a1926;
    font: 700 14px/1 var(--volley-numeral);
  }
}