/* SETTINGS -- the gear's dialog, shared by every game that has one.

   The games used to carry a top row of pickers and a More menu; the gear's
   dialog replaced both, in Pebble Crush first, then Bubble Pop, Knock Down,
   Stack Up and Mahjong. Its own file rather than part of arcade.css because
   Mahjong has its own chrome and does not load arcade.css -- the same reason
   screens.css is separate. Tokens only, never a colour, so it looks right in
   all eight themes.

   One row per setting: what it is and a line about it on the left, the
   control on the right, and the two stack on a narrow screen rather than
   squeezing the words into a column. */
.ar-settings {
  display: grid;
  gap: 14px;
}

.ar-setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.ar-setting:last-child { border-bottom: 0; padding-bottom: 0; }

.ar-setting[hidden] { display: none; }

.ar-setting__words {
  display: grid;
  gap: 2px;
  flex: 1 1 16rem;
}

.ar-setting__words small {
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.ar-setting__control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The tick first, where a finger expects it, then the words. */
.ar-setting--check {
  justify-content: flex-start;
  cursor: pointer;
}

.ar-setting--check input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* The controls at the size of the words beside them. The bars style their
   own; a dialog gets the browser's small defaults unless it is told. */
.ar-setting select,
.ar-setting .ar-seed,
.ar-setting button {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.ar-setting button { cursor: pointer; }

.ar-setting .ar-seed { width: 8rem; }

/* The gear in the play bar: an icon, so it is square rather than a word
   wide. Named for a screen reader by its aria-label. */
.ar-gear { font-size: 1.1em; }