/* Settings overlay (ui/settings.js). Builds on styles.css: .menu-overlay, .panel, .dbox, .btn, .tabs, .volume-row. */
.settings-overlay { z-index: 30; }
.settings { display: flex; flex-direction: column; gap: 12px; width: min(940px, 94vw); max-height: calc(100vh - 40px); }
.settings-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.settings-head h2 { font-family: var(--marker); font-weight: normal; font-size: 40px; margin: 0 auto 0 0; transform: rotate(-2deg); }
.settings-body { overflow-y: auto; padding: 4px 6px 8px; min-height: 280px; }
.settings-body section { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.settings-body section[hidden] { display: none; }
.settings .btn.toggle { max-width: none; }
.settings .btn.toggle small { font-size: 14px; opacity: 0.65; }
.settings .volume { width: 240px; }

.settings-body section.controls-page:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px 28px; align-items: start; }
.keys-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.keys-hint { font-size: 16px; opacity: 0.8; }
.keys { display: grid; grid-template-columns: 1fr; gap: 4px; width: 100%; }
.krow, .prow { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.krow .kname { width: 150px; flex: 0 0 auto; }
.prow .kname { width: 130px; flex: 0 0 auto; }
.kbtn.btn.small { min-width: 110px; padding: 3px 10px; font-family: var(--hand); font-size: 18px; text-align: center; }
.kbtn.empty { opacity: 0.5; }
.kbtn.waiting::before { background: #fff3a8; border-color: var(--p0); border-style: dashed; }
.pad-list { width: 100%; }
@media (max-width: 760px) { .settings-body section.controls-page:not([hidden]) { grid-template-columns: 1fr; } }
.pad-list h3 { font-family: var(--marker); font-weight: normal; font-size: 24px; margin: 4px 0 6px; }
.prow { font-size: 17px; padding: 2px 0; border-bottom: 1px dashed rgba(27, 27, 31, 0.2); }

/* the panel is often reached by keyboard or gamepad: always show where focus is */
.settings .btn:focus::before { border-color: var(--p0); border-width: 4px; background: #fff3a8; }
.settings .volume:focus { outline: 3px dashed var(--p0); outline-offset: 4px; }

@media (max-height: 820px) {
  .settings-head h2 { font-size: 32px; }
  .settings-body { min-height: 0; }
  .krow, .prow { font-size: 16px; }
}