/* css/settings.css — System > Settings (js/ui/settings.js, DECISIONS 365, 471): the Sound block on top
   (two switches, the volume, and one slider per sound in a list that opens), then the battle keys, one
   row per action with its key as a button; the row being changed blinks until a key is pressed. */

.settings-block h3 { margin: 0 0 6px; }
.settings-key-list { display: grid; gap: 6px; margin: 12px 0 14px; max-width: 620px; }
.settings-key-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.settings-key { min-width: 110px; justify-content: center; }
.settings-key kbd { font: inherit; font-weight: 700; letter-spacing: 0.02em; }
.settings-key.listening {
  border-color: var(--accent);
  box-shadow: var(--focus);
  animation: settings-listen 1s ease-in-out infinite;
}
@keyframes settings-listen { 50% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .settings-key.listening { animation: none; } }
.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Sound (DECISIONS 471). Every row has the key rows' look. A switch row is its own label, so a tap
   anywhere on it flips the box; the sliders are 40 px tall for a finger (the track stays thin). */
.settings-sound-top { display: grid; gap: 6px; margin: 12px 0; max-width: 620px; }
.settings-switch {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  cursor: pointer;
}
.settings-switch input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.settings-switch strong { display: block; font-weight: 600; }
.settings-switch .small { display: block; }
.settings-volume,
.settings-sound-row {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 2px 8px 2px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
/* The value column is at least as wide as "100 %", so a changing number never moves the slider. */
.settings-volume { grid-template-columns: auto 1fr minmax(3.6em, auto); }
.settings-volume label { font-weight: 600; }
.settings-sound-row { grid-template-columns: 1fr auto minmax(110px, 200px) minmax(3.6em, auto); }
.settings-sound input[type="range"] { width: 100%; min-width: 0; height: 40px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.settings-sound-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.settings-sound-row.is-off .settings-sound-value { color: var(--accent-light); font-weight: 700; }
/* Its switch (Sound effects / Notification sounds) is off: dimmed, but the slider can still be set. */
.settings-sound-row.is-dim { opacity: 0.55; }
.settings-sound-play { min-width: 40px; min-height: 40px; padding: 0; font-size: 0.8rem; }
.settings-sounds { max-width: 620px; }
.settings-sounds > summary { cursor: pointer; padding: 10px 0; font-weight: 600; color: var(--accent-light); }
.settings-sounds > p { margin: 0 0 4px; }
.settings-sound-group { display: grid; gap: 6px; margin-bottom: 12px; }
.settings-sound-group h4 { margin: 8px 0 0; font-size: 0.8rem; color: var(--muted); }

/* Phone: the "Default: X" note goes under the name, the key stays on the right. A sound's name gets
   its own line, with ▶, the slider and the value under it. */
@media (max-width: 480px) {
  .settings-key-row { grid-template-columns: 1fr auto; }
  .settings-key-default { grid-column: 1; grid-row: 2; }
  .settings-key { grid-column: 2; grid-row: 1 / span 2; min-width: 88px; }
  .settings-sound-row { grid-template-columns: auto 1fr minmax(3.6em, auto); row-gap: 0; padding-top: 6px; }
  .settings-sound-label { grid-column: 1 / -1; }
}