/* --- окно настроек --------------------------------------------------------
   Подложку и карточку берёт у окна итога (.over), вид рядов — у меню партии:
   третьего языка окон на одном экране быть не должно.

   Всё здешнее — настройки своего экрана, а не стола. Поэтому окно ничего не
   спрашивает и не подтверждает: любое изменение видно и слышно сразу, а
   передумавшему достаточно ткнуть в соседний кружок. */
#settings { background: radial-gradient(circle at 50% 45%, rgba(24, 26, 32, 0.72), rgba(6, 7, 9, 0.88)); }
#settings .card {
  min-width: 300px;
  max-width: min(400px, calc(100vw - 40px));
  padding: 14px;
  text-align: left;
}

#settings h2 {
  margin: 2px 4px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-mute);
}

#settings .rows { display: grid; gap: 4px; }

#settings .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 13px;
  border-radius: 9px;
  background: rgba(236, 231, 220, 0.05);
}
#settings .label { font-size: 14px; color: var(--chalk); }
/* Звук выключен — ряд громкости приглушён, но остаётся живым: потянувший его
   включает звук обратно (см. settingsbox.ts). */
#settings .row.dim .label,
#settings .row.dim input { opacity: 0.4; }

/* --- кружки цвета --- */
#settings .swatches { display: flex; gap: 8px; }
#settings .swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--c);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
/* Выбранный обведён цветом лампы — тем же, которым табло метит твою сторону. */
#settings .swatch.on {
  box-shadow: 0 0 0 2px rgba(var(--lamp-rgb), 0.85);
  transform: scale(1.08);
}
#settings .swatch:hover { transform: scale(1.08); }

/* --- переключатель --- */
#settings .switch {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  padding: 0;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(236, 231, 220, 0.08);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#settings .switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--chalk-mute);
  transition: transform 0.16s ease, background 0.16s ease;
}
#settings .switch.on {
  background: rgba(var(--lamp-rgb), 0.28);
  border-color: rgba(var(--lamp-rgb), 0.5);
}
#settings .switch.on i { transform: translateX(18px); background: var(--lamp-ink); }

/* --- громкость ---
   Ползунок системный: своя дорожка с ручкой — это три набора вендорных
   правил ради вида, который здесь никто не разглядывает. */
#settings input[type='range'] {
  flex: none;
  width: 140px;
  accent-color: var(--brass);
  background: none;
  cursor: pointer;
}

#settings .foot { display: flex; justify-content: flex-end; margin-top: 12px; }
#settings .done {
  padding: 9px 18px;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: rgba(var(--lamp-rgb), 0.16);
  color: var(--lamp-ink);
}
#settings .done:hover { background: rgba(var(--lamp-rgb), 0.24); }

/* Клавиатурой сюда доходят так же, как мышью — фокус должен быть виден. */
#settings .swatch:focus-visible,
#settings .switch:focus-visible,
#settings .done:focus-visible,
#settings input:focus-visible {
  outline: 2px solid rgba(201, 162, 39, 0.7);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #settings .swatch,
  #settings .switch,
  #settings .switch i { transition: none; }
}