/* Difficulty selection stays quiet beside the game title on phones. */
.chroma-difficulty {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: min(100%, 220px);
  margin: 14px 0 0;
  color: #a8a8a8;
  font-size: 12px;
}
.chroma-difficulty select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #ffffff1c;
  border-radius: 10px;
  background: #272727;
  color: #e2e2e2;
  color-scheme: dark;
  font: 400 16px var(--mono, ui-monospace, monospace);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.chroma-difficulty select:enabled:hover { border-color: #ffffff38; background: #2c2c2c; }
.chroma-difficulty select:focus-visible { outline: 2px solid #cfcfcf; outline-offset: 3px; }
.chroma-difficulty select:disabled { color: #969696; border-color: #ffffff10; cursor: default; }

@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) {
  .chroma-difficulty {
    display: block;
    grid-column: 2;
    grid-row: 1;
    width: 132px;
    max-width: 100%;
    margin: 0;
  }
  .chroma-difficulty > span:not(.select-control) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .chroma-difficulty select { min-height: 44px; padding-inline: 10px; }
}

@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  .chroma-difficulty { width: min(100%, 220px); margin-top: 12px; }
}

@media (max-width: 760px) and (max-height: 620px) and (orientation: portrait) {
  body:has(.chroma-difficulty) .console-bottom { min-height: 24px; }
  body:has(.chroma-difficulty) .console-footnote { margin-top: 4px; line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
  .chroma-difficulty select { transition: none; }
}