/* =========================================================================
   THE MINDGAMER — Configurações

   Carrega depois de styles.css (tokens e moldura) e de painel.css (painel,
   linha de ajuste, interruptor, botões). Aqui só os controles desta tela.
   ========================================================================= */

/* ================================================================ select ===== */

.select {
  width: calc(250 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(38 * var(--u)) 0 calc(14 * var(--u));
  border: 1px solid rgb(150 180 255 / 0.4);
  border-radius: calc(7 * var(--u));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6de' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
      right calc(12 * var(--u)) center / calc(16 * var(--u)) no-repeat,
    rgb(6 9 22 / 0.7);
  color: var(--ink-0);
  color-scheme: dark;
  font-family: inherit;
  font-size: calc(18 * var(--u));
  line-height: 1;
  appearance: none;
  cursor: pointer;
  transition: border-color .18s var(--ease);
}

.select:hover,
.select:focus-visible { border-color: rgb(180 205 255 / 0.9); outline: none; }

.select option { background: #0c1026; color: var(--ink-0); }

/* ================================================================= range ===== */

.range {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}

.range output {
  width: calc(36 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1;
  text-align: right;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.range input {
  width: calc(200 * var(--u));
  height: calc(20 * var(--u));
  margin: 0;
  background: none;
  appearance: none;
  cursor: pointer;
}

/* trilho: a parte preenchida vem de --val, que o script atualiza */
.range input::-webkit-slider-runnable-track {
  height: calc(6 * var(--u));
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) var(--val), rgb(150 180 255 / 0.18) var(--val));
}

.range input::-moz-range-track {
  height: calc(6 * var(--u));
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) var(--val), rgb(150 180 255 / 0.18) var(--val));
}

.range input::-webkit-slider-thumb {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  margin-top: calc(-6 * var(--u));
  border: 0;
  border-radius: 50%;
  background: var(--ink-0);
  appearance: none;
}

.range input::-moz-range-thumb {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border: 0;
  border-radius: 50%;
  background: var(--ink-0);
}

.range input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* ==================================================== telas estreitas ===== */

@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .select { width: max(140px, calc(250 * var(--u))); height: 36px; font-size: 14px; padding: 0 30px 0 10px;
            background-size: 14px, auto; background-position: right 10px center, 0 0; }
  .range input { width: max(110px, calc(200 * var(--u))); height: 24px; }
  .range input::-webkit-slider-runnable-track { height: 5px; }
  .range input::-moz-range-track { height: 5px; }
  .range input::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6.5px; }
  .range input::-moz-range-thumb { width: 18px; height: 18px; }
  .range output { width: 26px; font-size: 13px; }
}