/* ============================================================
   SETTINGS CONTROLS
   Sliders, segmented buttons and button variants used on the pause
   ticket's Settings page and in the difficulty chooser.
   They are plain HTML inputs and buttons on purpose: a native
   control already works, and a custom widget would only copy it.
   ============================================================ */

/* ---------- Layout ---------- */
.settings-grid{
  display:grid; grid-template-columns:1fr 1fr; gap: 26px;
  margin:24px 0 6px; text-align:left;
}
.setrow{ display:flex; flex-direction:column; gap:6px; }
.setrow label, .setrow .lbl{
  color:var(--yellow-dim); font-size:12px; font-weight: 600; letter-spacing:.2em;
}
/* A section header row. It spans both columns of the grid, so the controls
   below it read as a group. The thin rule under the label is the only
   decoration: the ticket is a paper form, not a card UI, and a full-width
   divider is enough to say "new subject" without becoming a banner. */
.setrow.section{
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding-top: 10px;
}
.setrow.section span{
  color:var(--yellow); font-size:14px; font-weight:900; letter-spacing:.3em;
  white-space: nowrap;
}
.setrow.section::after{
  content: "";
  flex: 1;
  border-bottom: 1px solid rgba(228,230,168,.18);
  transform: translateY(-3px);
}
.setrow .note{
  margin:0; font-size:13px; font-weight: 900; line-height:1.5; opacity:.55; max-width:46ch;
}
.setrow.buttons{
  flex-direction:row; gap:12px; justify-content:flex-end;
  margin-top:50px;
}
.setrow.buttons button {  font-weight: 900; padding:10px 15px}

/* ---------- Segmented buttons ---------- */

/* A row of options where exactly one is pressed. auto-fit is used instead
   of flex-wrap because a wrapped flex row stretches a lone last button to
   full width (a 4-option row would show as 3 buttons plus 1 huge one).
   auto-fit drops the empty columns, so rows with 2, 3 or 4 options all fill
   their width evenly. */
.seg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(52px,1fr)); gap:6px; }
.seg button{
  padding:6px 8px; font-size:12px; white-space:nowrap;
  letter-spacing:.14em; background:transparent; color:var(--yellow-dim);
  border:1px solid rgba(228,230,168,.28); cursor:pointer;
}
@media (hover:hover){
  .seg button:hover{ background:rgba(228,230,168,.10); color:var(--yellow); }
}
@media (hover:none){
  .seg button:active{ background:rgba(228,230,168,.10); color:var(--yellow); }
}
.seg button[aria-pressed="true"]{
  background:var(--yellow); color:#1a1810; border-color:var(--yellow);
}

/* ---------- Sliders ---------- */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:9px;
  background:rgba(20,17,10,.75); border:1px solid rgba(228,230,168,.28);
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:12px; height:18px;
  background:var(--yellow); border:none; cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:12px; height:18px; background:var(--yellow); border:none; cursor:pointer;
}

/* ---------- Keyboard focus ---------- */

/* Shown only for keyboard focus. The browser's default grey ring does not
   fit the palette, so this draws a yellow one instead. */
:focus-visible{
  outline:2px solid var(--yellow); outline-offset:2px;
}

/* ---------- Button variants ---------- */

/* Quieter button for secondary actions. */
button.ghost{
  background:transparent; color:var(--yellow-dim);
  border:1px solid rgba(228,230,168,.35);
}
@media (hover:hover){
  button.ghost:hover{ background:rgba(228,230,168,.10); color:var(--yellow); }
}
@media (hover:none){
  button.ghost:active{ background:rgba(228,230,168,.10); color:var(--yellow); }
}

/* The restart-game button is the only control on the ticket that ends a
   run, so it wears the danger red. That red appears nowhere else on the
   ticket except spent lives. */
button.danger{ color:var(--danger); border-color:rgba(216,80,48,.45); }
@media (hover:hover){
  button.danger:hover{ background:var(--danger); color:var(--ink); border-color:var(--danger); }
}
@media (hover:none){
  button.danger:active{ background:var(--danger); color:var(--ink); border-color:var(--danger); }
}