/* Okno ustawień (ui/settings.js) i licznik FPS (ui/fps.js): ciemne tło, Bahnschrift, cienkie obramowania jak w menu pauzy. */
#settings { position: fixed; inset: 0; z-index: 310; display: none; align-items: center; justify-content: center; background: rgba(8,10,6,.7); font-family: Bahnschrift, 'DIN Alternate', 'Segoe UI', sans-serif; color: #d2ccb0; }
#settings.on { display: flex; }
body.settings-open #pause .ps-box { visibility: hidden; }      /* pod ustawieniami nie widać pudełka pauzy */
#settings .st-box { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 16px); box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 22px; background: rgba(22,25,17,.97); border: 1px solid #5a5746; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
#settings h2 { margin: 0; text-align: center; font: 800 20px Bahnschrift, sans-serif; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: #e6e0c4; }
.st-tabs { display: flex; gap: 6px; }
.st-tabs button { flex: 1; padding: 8px 6px; font: 700 13px Bahnschrift, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #9c967c; background: #14170f; border: 1px solid #3a3a2e; cursor: pointer; }
.st-tabs button.on { color: #e6e0c4; border-color: #8a8464; background: #22251a; }
.st-body { display: flex; flex-direction: column; gap: 10px; }
.st-row { display: grid; grid-template-columns: 1fr 1.7fr 52px; align-items: center; gap: 10px; font-size: 14px; }
.st-row b { text-align: right; font-weight: 700; color: #e6e0c4; font-variant-numeric: tabular-nums; }
.st-row input[type=range] { width: 100%; accent-color: #b9a85a; }
.st-chk { grid-template-columns: 1fr auto; }
.st-chk input { width: 18px; height: 18px; accent-color: #b9a85a; }
.st-group { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.st-group small { color: #8a866f; font-size: 12px; line-height: 1.35; }
.st-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.st-opt { padding: 6px 10px; font: 700 12px Bahnschrift, sans-serif; color: #c4bea2; background: #14170f; border: 1px solid #4a4836; cursor: pointer; }
.st-opt.on { color: #15170f; background: #c9b86a; border-color: #c9b86a; }
#settings .st-back { align-self: center; min-width: 200px; }
#fps { position: fixed; top: 34px; left: 14px; z-index: 40; padding: 3px 8px; font: 700 12px Bahnschrift, sans-serif; letter-spacing: .06em; color: #d9d3b4; background: rgba(15,17,11,.78); border: 1px solid #4a4836; pointer-events: none; font-variant-numeric: tabular-nums; }

/* ---- N21: ustawienia w sześciu zakładkach: sterowanie (mapa klawiszy), interfejs, dostępność, gra ---- */
#settings .st-box { width: min(560px, calc(100vw - 32px)); position: relative; }
#settings .st-tabs { flex-wrap: wrap; }
#settings .st-tabs button { flex: 1 1 30%; padding: 7px 4px; font-size: 12px; }
#settings .st-body { overflow-y: auto; min-height: 0; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #5a5746 transparent; }
#settings .st-row { grid-template-columns: 1fr 1.5fr 52px; }
#settings .mn-btn { min-width: 0; padding: 6px 12px; }
.st-keys { display: flex; flex-direction: column; gap: 4px; }
.st-kg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.st-kh { grid-column: 1 / -1; margin-top: 4px; font: 700 11px Bahnschrift, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #8a8466; }
.st-kr { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 1.25; }
.st-key { min-width: 66px; padding: 4px 7px; font: 700 12px Bahnschrift, sans-serif; letter-spacing: .08em; color: #e6e0c4; background: #14170f; border: 1px solid #4a4836; cursor: pointer; }
.st-key:hover { border-color: #8a8464; }
.st-key.changed { border-color: #b9a85a; color: #f1e6a8; }
.st-key.wait { color: #15170f; background: #c9b86a; border-color: #c9b86a; animation: stKeyBlink .9s steps(2) infinite; }
@keyframes stKeyBlink { 50% { opacity: .55; } }
.st-conf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid #a07a3a; background: rgba(60,40,12,.5); font-size: 13px; color: #f0c98a; }
.st-cbtns { display: flex; gap: 8px; }
.st-kfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.st-kfoot small, .st-kfoot i, .st-note { color: #8a866f; font-size: 12px; font-style: normal; }
.st-note { color: #9fd08a; }

/* ---- skala interfejsu: HUD, okna i minimapa (zmienna --ui ustawia ui/settings.js) ---- */
:root { --ui: 1; --mm-a: 1; }
#hud, #vitals, #minimap-container, #intro-trk, #hintpop, #netmsg, #tag { zoom: var(--ui); }
#minimap-container { opacity: var(--mm-a); }
:is(#bench, #loot, #storage, #train, #fuel, #perks, #notes, #route, #quests, #services, #trade, #cookwin, #safe, #pause, #settings) > * { zoom: var(--ui); }
/* skala powiększa też wysokość: okno dalej mieści się w ekranie (przewija się, zamiast wychodzić poza krawędź) */
:is(#bench, #loot, #storage, #train, #fuel, #perks, #notes, #route, #quests, #services, #trade, #cookwin, #safe, #pause, #settings) > * { max-height: calc((100vh - 32px) / var(--ui)); overflow-y: auto; }
#settings .st-box { max-height: calc((100vh - 32px) / var(--ui)); }

/* ---- dostępność: tryb barw jakości (body.cb-on): barwy Okabe–Ito i litera jakości na kafelku (C, U, R, E, L, M) ---- */
body.cb-on [style*="--rc:#9e9e9e"], body.cb-on [style*="--rc: #9e9e9e"],
body.cb-on [style*="--rc:#56b4e9"], body.cb-on [style*="--rc: #56b4e9"],
body.cb-on [style*="--rc:#0072b2"], body.cb-on [style*="--rc: #0072b2"],
body.cb-on [style*="--rc:#f0e442"], body.cb-on [style*="--rc: #f0e442"],
body.cb-on [style*="--rc:#e69f00"], body.cb-on [style*="--rc: #e69f00"],
body.cb-on [style*="--rc:#cc79a7"], body.cb-on [style*="--rc: #cc79a7"] { position: relative; }
body.cb-on [style*="--rc:#9e9e9e"]::after, body.cb-on [style*="--rc: #9e9e9e"]::after,
body.cb-on [style*="--rc:#56b4e9"]::after, body.cb-on [style*="--rc: #56b4e9"]::after,
body.cb-on [style*="--rc:#0072b2"]::after, body.cb-on [style*="--rc: #0072b2"]::after,
body.cb-on [style*="--rc:#f0e442"]::after, body.cb-on [style*="--rc: #f0e442"]::after,
body.cb-on [style*="--rc:#e69f00"]::after, body.cb-on [style*="--rc: #e69f00"]::after,
body.cb-on [style*="--rc:#cc79a7"]::after, body.cb-on [style*="--rc: #cc79a7"]::after {
  position: absolute; left: 2px; top: 2px; padding: 0 3px; border-radius: 2px; font: 800 11px/1.3 Bahnschrift, sans-serif; color: #15170f; background: #e6e0c4; pointer-events: none;
}
body.cb-on [style*="--rc:#9e9e9e"]::after, body.cb-on [style*="--rc: #9e9e9e"]::after { content: 'C';  }
body.cb-on [style*="--rc:#56b4e9"]::after, body.cb-on [style*="--rc: #56b4e9"]::after { content: 'U';  }
body.cb-on [style*="--rc:#0072b2"]::after, body.cb-on [style*="--rc: #0072b2"]::after { content: 'R'; color: #e6e0c4; background: #1d3f63; }
body.cb-on [style*="--rc:#f0e442"]::after, body.cb-on [style*="--rc: #f0e442"]::after { content: 'E';  }
body.cb-on [style*="--rc:#e69f00"]::after, body.cb-on [style*="--rc: #e69f00"]::after { content: 'L';  }
body.cb-on [style*="--rc:#cc79a7"]::after, body.cb-on [style*="--rc: #cc79a7"]::after { content: 'M';  }