/* Инвентарь и выбор ранца на экране входа */

#inventory {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 8, 12, 0.55);
  backdrop-filter: blur(3px);
}
#inventory[hidden] { display: none; }
#inventory .inv-card {
  width: min(980px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-areas: 'head head' 'weapons side' 'foot foot';
  gap: 16px 20px;
  padding: 22px 24px;
  border: 1px solid #8ebfcc38;
  border-radius: 16px;
  background: linear-gradient(160deg, #0f2535f2, #08151ff2);
  color: #e6f1f4;
  font: 14px/1.4 system-ui, sans-serif;
  box-shadow: 0 24px 60px #000a;
}
#inventory header { grid-area: head; display: flex; align-items: center; gap: 14px; }
#inventory header h2 { margin: 0; font-size: 24px; letter-spacing: 0.02em; }
#inventory .eyebrow { font-size: 10px; letter-spacing: 0.16em; color: #6de4d3; }
#inventory header { flex-wrap: wrap; }
#inventory header .eyebrow { flex-basis: 100%; order: -1; }
#inventory .inv-close { margin-left: auto; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #8ebfcc38; background: #16303f; color: inherit; cursor: pointer; display: grid; place-items: center; }
#inventory .inv-close .ui-icon { width: 18px; height: 18px; }
#inventory .inv-weapons { grid-area: weapons; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
#inventory .inv-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 190px;
  padding: 14px 12px 12px;
  border: 1px solid #8ebfcc2e;
  border-radius: 12px;
  background: #132c3b;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
#inventory .inv-slot:hover:not(:disabled) { border-color: #6de4d388; transform: translateY(-1px); }
#inventory .inv-slot.sel { border-color: #6de4d3; background: #18414c; box-shadow: inset 0 0 0 1px #6de4d355; }
#inventory .inv-slot:disabled { opacity: 0.55; cursor: default; }
#inventory .inv-slot .ui-icon { width: 46px; height: 46px; color: #ffd27a; }
#inventory .inv-slot b { font-size: 16px; }
#inventory .inv-key { position: absolute; top: 10px; right: 12px; font: 700 12px/1 ui-monospace, monospace; color: #8fb3bf; }
#inventory .inv-ammo { font: 700 13px/1.2 ui-monospace, monospace; color: #ffd27a; }
#inventory .inv-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: #ffffff14; overflow: hidden; }
#inventory .inv-bar > i { display: block; height: 100%; background: #ffd27a; }
#inventory .inv-slot ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; color: #a7c1ce; }
#inventory .inv-side { grid-area: side; display: flex; flex-direction: column; gap: 14px; }
#inventory .inv-side section { padding: 12px 14px; border: 1px solid #8ebfcc24; border-radius: 12px; background: #0f2331; }
#inventory h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8fb3bf; }
#inventory .inv-gear > div, #inventory .inv-wallet > div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
#inventory .inv-gear span, #inventory .inv-wallet span { color: #a7c1ce; }
#inventory .inv-gear .on b { color: #6de4d3; }
#inventory .inv-gear .off b { color: #ff9b7a; }
#inventory .inv-upgrades { display: flex; flex-wrap: wrap; gap: 6px; }
#inventory .inv-upgrades p { margin: 0; color: #8fb3bf; font-size: 12px; }
#inventory .inv-upg { padding: 4px 9px; border-radius: 999px; background: #ffd27a22; border: 1px solid #ffd27a66; color: #ffd27a; font-size: 12px; }
#inventory .inv-eat { width: 100%; margin-top: 8px; min-height: 40px; border-radius: 10px; border: 1px solid #8ebfcc38; background: #1b3d51; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
#inventory footer { grid-area: foot; font-size: 12px; color: #8fb3bf; }
#inventory kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid #8ebfcc44; background: #16303f; font: 11px ui-monospace, monospace; }
#inventory-btn { position: fixed; right: calc(24px + var(--safe-r, 0px)); bottom: 84px; z-index: 12; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid #8ebfcc38; background: #1b3d51; color: #e6f1f4; font: 600 13px system-ui, sans-serif; cursor: pointer; }
@media (pointer: fine) { #inventory-btn { display: none; } }
@media (max-width: 760px) {
  #inventory .inv-card { grid-template-columns: 1fr; grid-template-areas: 'head' 'weapons' 'side' 'foot'; padding: 18px 16px; }
  #inventory .inv-weapons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #inventory .inv-slot { min-height: 0; }
  #inventory .inv-slot ul { display: none; }
}

/* Выбор ранца на экране входа */
.pack-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 2px; border: 0; padding: 0; }
.pack-choice legend { grid-column: 1 / -1; padding: 0; margin-bottom: 2px; font-size: 10px; letter-spacing: 0.16em; color: #6de4d3; }
.pack-choice label { position: relative; display: flex !important; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid #8ebfcc38; border-radius: 12px; background: #102d42; cursor: pointer; font-weight: 600; transition: border-color 0.15s, background 0.15s; }
.pack-choice label small { font-weight: 400; font-size: 12px; color: #a7c1ce; }
.pack-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pack-choice label:has(input:checked) { border-color: #6de4d3; background: #18414c; box-shadow: inset 0 0 0 1px #6de4d355; }
.pack-choice label:has(input:focus-visible) { outline: 2px solid #6de4d3; outline-offset: 2px; }

/* Магазин в инвентаре */
#inventory .inv-card { grid-template-areas: 'head head' 'weapons side' 'shop shop' 'foot foot'; }
#inventory .inv-shop { grid-area: shop; padding: 12px 14px; border: 1px solid #8ebfcc24; border-radius: 12px; background: #0f2331; }
#inventory .inv-shop-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
#inventory .inv-buy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border: 1px solid #ffd27a55; border-radius: 10px; background: #1b2f22; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#inventory .inv-buy:hover:not(:disabled) { border-color: #ffd27a; }
#inventory .inv-buy:disabled { opacity: 0.45; cursor: default; }
#inventory .inv-buy.active { border-color: #6de4d3; box-shadow: inset 0 0 0 1px #6de4d355; }
#inventory .inv-buy span { font-size: 12px; color: #a7c1ce; }
#inventory .inv-buy em { position: absolute; top: 9px; right: 11px; font: 700 13px ui-monospace, monospace; color: #ffd27a; font-style: normal; }
#inventory .inv-buy i { font: 600 12px ui-monospace, monospace; color: #6de4d3; font-style: normal; }
#buff-hud { color: #6de4d3; font: 700 13px/1.3 ui-monospace, monospace; }
@media (max-width: 760px) { #inventory .inv-card { grid-template-areas: 'head' 'weapons' 'side' 'shop' 'foot'; } }
#inventory .inv-shop-note { margin: -2px 0 10px; font-size: 12px; color: #ffe58a; }
#shop-hint { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 14; padding: 8px 14px; border-radius: 10px; border: 1px solid #ffd24a88; background: #2a1e00e6; color: #ffe58a; font: 700 14px system-ui, sans-serif; pointer-events: none; }
#shop-hint[hidden] { display: none; }
#shop-hint kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid #ffd24a66; background: #3d2c00; font: 12px ui-monospace, monospace; }
/* Оптика: круг прицела там, где перекрестие экрана (RETICLE 54% × 42%), вокруг — чёрная трубка */
#scope { position: fixed; inset: 0; z-index: 11; pointer-events: none; background: radial-gradient(circle at 54% 42%, transparent 0, transparent 34vmin, #000 34.4vmin); }
#scope[hidden] { display: none; }
#scope i { position: absolute; left: 54%; top: 42%; width: 68vmin; height: 68vmin; transform: translate(-50%, -50%); border-radius: 50%;
  background: linear-gradient(#000c, #000c) center / 100% 1px no-repeat, linear-gradient(#000c, #000c) center / 1px 100% no-repeat;
  box-shadow: inset 0 0 6vmin #0008; }

/* Клавиши управления */
#keys-panel { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3, 8, 12, 0.6); }
#keys-panel[hidden] { display: none; }
#keys-panel .keys-card { width: min(640px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border: 1px solid #8ebfcc38; border-radius: 16px; background: #0c2030f5; color: #e6f1f4; font: 14px/1.4 system-ui, sans-serif; }
#keys-panel header { display: flex; align-items: center; justify-content: space-between; }
#keys-panel h2 { margin: 0; font-size: 22px; }
#keys-panel .keys-close { width: 34px; height: 34px; border-radius: 9px; border: 1px solid #8ebfcc38; background: #16303f; color: inherit; cursor: pointer; }
#keys-panel .keys-note { margin: 0; font-size: 12px; color: #a7c1ce; }
#keys-panel .keys-list { overflow: auto; display: grid; gap: 4px; padding-right: 4px; }
#keys-panel .keys-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid #ffffff10; }
#keys-panel .keys-row button { min-width: 140px; min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #8ebfcc44; background: #16303f; color: #ffe58a; font: 700 13px ui-monospace, monospace; cursor: pointer; }
#keys-panel .keys-row button.wait { border-color: #6de4d3; color: #6de4d3; }
#keys-panel footer { display: flex; justify-content: space-between; gap: 10px; }
#keys-panel footer button { min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid #8ebfcc38; background: #1b3d51; color: inherit; font: 600 14px system-ui, sans-serif; cursor: pointer; }

/* Окно «Настройки» (settings.js): вкладки «Управление», «Мышь и камера», «Графика», «Звук и голос» */
#settings-panel { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3, 8, 12, 0.6); }
#settings-panel[hidden], #settings-panel [hidden] { display: none !important; }
#settings-panel .settings-card { width: min(680px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border: 1px solid #8ebfcc38; border-radius: 16px; background: #0b1d27f5; color: #e2f1f5; font-family: var(--font, system-ui); box-shadow: 0 20px 60px #000a; }
#settings-panel header { display: flex; align-items: center; justify-content: space-between; }
#settings-panel h2 { margin: 0; font-size: 22px; }
#settings-panel .settings-close { width: 44px; height: 44px; border-radius: 10px; border: 1px solid #8ebfcc38; background: #16303f; color: inherit; cursor: pointer; }
#settings-panel .settings-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
#settings-panel .settings-tabs button { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #8ebfcc38; background: #12293a; color: #a7c1ce; font: 600 14px var(--font, system-ui); cursor: pointer; }
#settings-panel .settings-tabs button[aria-selected="true"] { background: #1d4a5c; color: #6de4d3; border-color: #6de4d3; }
#settings-panel section { overflow: auto; display: grid; gap: 6px; padding-right: 4px; }
#settings-panel .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; border-bottom: 1px solid #ffffff10; }
#settings-panel .settings-row output { margin-left: 6px; color: #ffe58a; font: 700 13px ui-monospace, monospace; }
#settings-panel .settings-row input[type="range"] { width: min(260px, 50%); accent-color: #6de4d3; }
#settings-panel .settings-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: #6de4d3; }
#settings-panel select { min-height: 40px; min-width: 160px; border-radius: 8px; border: 1px solid #8ebfcc44; background: #16303f; color: inherit; font: inherit; }
#settings-panel .settings-note, #settings-panel .keys-note { margin: 0; font-size: 12px; color: #a7c1ce; }
#settings-panel .keys-list { display: grid; gap: 4px; }
#settings-panel .keys-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid #ffffff10; }
#settings-panel .keys-row button { min-width: 140px; min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #8ebfcc44; background: #16303f; color: #ffe58a; font: 700 13px ui-monospace, monospace; cursor: pointer; }
#settings-panel .keys-row button.wait { border-color: #6de4d3; color: #6de4d3; }
#settings-panel footer { display: flex; justify-content: space-between; gap: 10px; }
#settings-panel footer button, #settings-panel .settings-reload { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #8ebfcc44; background: #16303f; color: inherit; font: 600 14px var(--font, system-ui); cursor: pointer; }
#settings-panel .settings-done, #settings-panel .settings-reload { background: #1d4a5c; color: #6de4d3; }
/* Панели «Звук» и «Голос» внутри окна — обычным блоком, а не плашкой поверх экрана */
#settings-panel #audio-panel, #settings-panel #voice-panel { position: static; inset: auto; width: auto; max-width: none; margin: 0; transform: none; }
#settings-panel #audio-panel summary, #settings-panel #voice-panel summary { pointer-events: none; list-style: none; font-weight: 700; color: #6de4d3; }
#settings-panel #audio-panel label, #settings-panel #voice-panel label { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
/* «Держать, чтобы говорить» остаётся на экране — для телефона; на компьютере говорят клавишей */
#voice-talk { position: fixed; left: calc(20px + var(--safe-l, 0px)); bottom: calc(150px + var(--safe-b, 0px)); z-index: 16; min-height: 44px; }
body:not(.touch) #voice-talk { display: none; }
#fps-meter { position: fixed; top: calc(8px + var(--safe-t, 0px)); right: calc(80px + var(--safe-r, 0px)); z-index: 30; padding: 2px 8px; border-radius: 6px; background: #000a; color: #b3f4e9; font: 700 12px ui-monospace, monospace; pointer-events: none; }
#fps-meter[hidden] { display: none; }
/* Две клавиши у действия: основная и дополнительная (в т.ч. кнопки мыши и колесо) */
#settings-panel .keys-slots { display: flex; gap: 6px; }
#settings-panel .keys-row button { min-width: 120px; }
#settings-panel .keys-row button.alt { color: #b9d6df; }