/* =====================================================================
   USTAWIENIA (js/ui/SettingsUI.js) + zmienne dostępności z js/core/Settings.js
   --ui-scale    skala okien i HUD          --text-scale  tekst w oknach
   --game-filter filtr daltonizmu + jasność (na całym ekranie)
   ===================================================================== */
:root{ --ui-scale:1; --text-scale:1; --game-filter:none;
  --st-font: ui-monospace,"Cascadia Mono","Consolas","Courier New","Noto Sans CJK SC","Noto Sans CJK JP","PingFang SC","Hiragino Sans","Microsoft YaHei","Noto Sans Arabic","Tahoma",monospace; }
html.cb-on{ filter: var(--game-filter); }

/* okna i HUD w skali z ustawień */
#shelterUI .sh-modal, #settingsUI .st-panel{ zoom: var(--ui-scale); }
#shelterUI .sh-vitals, #shelterUI .sh-topright, #shelterUI .sh-weapon, #shelterUI .sh-zone, #shelterUI .sh-prompt, #shelterUI .sh-toast,
#hud #stats, #hud #hudRight{ zoom: var(--ui-scale); }
#shelterUI .sh-modal-body, #settingsUI .st-body{ zoom: var(--text-scale); }
/* znaki spoza łacinki w oknach schronu – czcionki systemowe z CJK/arabskim */
#shelterUI{ --sh-font: var(--st-font); }

/* wysoki kontrast */
html.hi-contrast .sh-toast, html.hi-contrast .sh-prompt, html.hi-contrast .sh-zone{ background:#000; border-color:#fff; color:#fff; }
html.hi-contrast .sh-modal, html.hi-contrast .st-panel{ border-color:#fff; }
html.hi-contrast .lo-slot small, html.hi-contrast .sh-hint, html.hi-contrast .st-label small{ color:#e8e0d0; }
html.hi-contrast .npc-bubble{ background:#000 !important; color:#fff !important; border-color:#fff !important; }
html.reduce-motion *{ animation-duration:0s !important; transition-duration:0s !important; }

/* pisanie od prawej (arabski) – tylko tekst w oknach, układ gry zostaje */
html.rtl .sh-modal-body, html.rtl .st-body, html.rtl .sh-toast, html.rtl .sh-prompt, html.rtl .modal{ direction: rtl; }
html.rtl .st-ctrl input[type=range]{ direction: ltr; }
html.rtl .tm-screen pre{ direction: rtl; text-align: right; }

/* licznik FPS */
#fpsMeter{ position:fixed; left:calc(50% - 30px); bottom:4px; z-index:200; font:11px var(--st-font); color:#9f9; background:#000a; padding:1px 6px; pointer-events:none; }

/* ------------------------------ okno ------------------------------ */
#settingsUI{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.72); padding:10px; font-family:var(--st-font); color:#d8ccb4; }
#settingsUI.open{ display:flex; }
.st-panel{ width:min(760px,96vw); max-height:94vh; display:flex; flex-direction:column; background:linear-gradient(#1c1916,#100e0c); border:2px solid #4a4036; box-shadow:0 0 0 2px #000,0 24px 70px #000; position:relative; }
.st-panel::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:repeating-linear-gradient(135deg,#b8961e 0 8px,#1c1c1a 8px 16px); }
.st-head{ flex-shrink:0; display:flex; justify-content:space-between; align-items:center; padding:14px 16px 8px; }
.st-title{ font-size:17px; letter-spacing:4px; color:#e8dcc0; text-shadow:0 2px 0 #000; }
.st-x{ background:none; border:1px solid #4a4036; color:#d8ccb4; width:32px; height:32px; cursor:pointer; font-size:14px; }
.st-tabs{ flex-shrink:0; display:flex; gap:2px; padding:0 12px; border-bottom:1px solid #3a322a; overflow-x:auto; scrollbar-width:none; }
.st-tabs button{ flex:0 0 auto; background:#15120f; border:1px solid #3a322a; border-bottom:none; color:#8a8070; font:12px var(--st-font); letter-spacing:1px; padding:8px 12px; cursor:pointer; }
.st-tabs button.on{ background:#2a241c; color:#ffe0a0; box-shadow:inset 0 2px 0 #e8c060; }
.st-body{ padding:10px 16px; overflow:auto; flex:1; min-height:220px; }
.st-foot{ flex-shrink:0; display:flex; justify-content:space-between; gap:8px; padding:10px 16px 14px; border-top:1px solid #3a322a; }

.st-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed #2e2822; }
.st-row:last-child{ border-bottom:none; }
.st-label{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.st-label b{ font-size:13px; font-weight:600; letter-spacing:1px; }
.st-label small{ font-size:10.5px; color:#8a8070; line-height:1.35; }
.st-ctrl{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.st-ctrl input[type=range]{ width:170px; accent-color:#e8c060; }
.st-ctrl output{ min-width:46px; text-align:right; font-size:12px; color:#ffe0a0; }
.st-btn{ background:linear-gradient(#3a332c,#241f1a); border:1px solid #6a5a48; color:#d8ccb4; padding:9px 14px; font:12px var(--st-font); letter-spacing:1px; cursor:pointer; }
.st-btn:hover{ border-color:#b89a5a; }
.st-btn.danger{ border-color:#b8231c; color:#ffb0a0; }
.st-btn.armed{ background:#6a1410; color:#fff; animation:starm .5s infinite alternate; }
@keyframes starm{ to{ background:#9a2018; } }
.st-switch{ position:relative; display:flex; align-items:center; gap:8px; background:#15120f; border:1px solid #4a4036; color:#8a8070; padding:5px 10px 5px 5px; cursor:pointer; font:11px var(--st-font); min-width:84px; }
.st-switch i{ width:30px; height:16px; background:#2a241e; border:1px solid #000; position:relative; }
.st-switch i::after{ content:""; position:absolute; left:1px; top:1px; width:12px; height:12px; background:#6a6258; transition:left .15s; }
.st-switch.on{ color:#b8f0a0; border-color:#6a9a48; }
.st-switch.on i{ background:#2c4a1c; }
.st-switch.on i::after{ left:15px; background:#9ad07a; }
.st-seg{ flex-wrap:wrap; justify-content:flex-end; gap:3px; max-width:62%; }
.st-seg button{ background:#15120f; border:1px solid #3a322a; color:#a89c88; font:11px var(--st-font); padding:6px 9px; cursor:pointer; }
.st-seg button.on{ border-color:#e8c060; color:#ffe0a0; background:#2a2216; }

.st-langgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; width:100%; margin-top:8px; }
.st-langgrid button{ display:flex; align-items:center; gap:8px; background:#15120f; border:1px solid #3a322a; color:#d8ccb4; padding:10px; cursor:pointer; font-size:14px; font-family:var(--st-font); }
.st-langgrid button.on{ border-color:#e8c060; background:#2a2216; color:#ffe0a0; box-shadow:inset 0 0 0 1px #e8c060; }
.st-langgrid .fl{ font-size:18px; }
.st-row.st-langs, .st-row.st-keys, .st-row.st-palette{ flex-direction:column; align-items:stretch; }
.st-row.st-langs .st-label, .st-row.st-palette .st-label{ margin-bottom:2px; }

.st-pal{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.st-pal i{ width:24px; height:24px; border:2px solid #000; box-shadow:0 0 0 1px #4a4036; }
.st-bars{ display:flex; flex-direction:column; gap:3px; margin-left:8px; }
.st-bars em{ display:block; width:90px; height:7px; background:var(--c); border:1px solid #000; }

.st-keygrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:4px 14px; margin-top:6px; }
.st-keygrid div{ display:flex; gap:8px; align-items:center; font-size:11.5px; color:#b8ac98; }
.st-keygrid kbd{ min-width:62px; text-align:center; background:#d8ccb4; color:#1a1410; font:700 11px var(--st-font); padding:2px 5px; box-shadow:0 2px 0 #6a5a48; }

@media (max-width:600px){
  .st-row{ flex-direction:column; align-items:stretch; gap:6px; }
  .st-ctrl{ justify-content:flex-end; }
  .st-ctrl input[type=range]{ flex:1; width:auto; }
  .st-seg{ max-width:none; justify-content:flex-start; }
  .st-langgrid{ grid-template-columns:repeat(2,1fr); }
  .st-body{ padding:8px 10px; }
}

/* dotyk: leworęczni – przyciski akcji po lewej, gałka po prawej */
html.left-handed .tc-fire{ right:auto; left:calc(34px + var(--sal)); }
html.left-handed .tc-hand{ right:auto; left:calc(140px + var(--sal)); }
html.left-handed .tc-gren{ right:auto; left:calc(120px + var(--sal)); }
html.left-handed .tc-reload{ right:auto; left:calc(44px + var(--sal)); }
html.left-handed .tc-swap{ right:auto; left:calc(196px + var(--sal)); }
html.left-handed .tc-stickzone{ left:auto; right:0; }
html.left-handed .tc-stick{ left:auto; right:calc(40px + var(--sar)); }