/* Экран СНАРЯЖЕНИЯ — ПЛОСКИЙ стиль: сплошные цвета, без градиентов/теней/свечений, чёткие края. */
.inv-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 6, 0.92);
  font-family: "Pixelify Sans", "VT323", "Courier New", monospace; color: #d9dcc6; font-size: 18px;
  animation: inv-fade 0.15s ease;
}
@keyframes inv-fade { from { opacity: 0; } to { opacity: 1; } }
.inv-grain { display: none; }

.inv-panel {
  position: relative; width: min(1180px, 95vw); height: min(880px, 94vh);
  display: flex; flex-direction: column;
  background: #12150d; border: 1px solid #2c331d; overflow: hidden;
}

/* Шапка */
.inv-header { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid #262d1a; background: #161a0f; }
.inv-title { font-size: 30px; font-weight: 700; letter-spacing: 3px; color: #e9ecd6; }
.inv-title-sub { font-size: 16px; letter-spacing: 2px; color: #6f7458; margin-left: 14px; font-weight: 400; }
.inv-close { width: 36px; height: 36px; cursor: pointer;
  background: #1a1e12; border: 1px solid #333c23; color: #b6bca0; font-size: 20px; }
.inv-close:hover { background: #2a1813; border-color: #7a3b2e; color: #e08a68; }

/* Тело */
.inv-body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 8px; flex: 0 0 auto; }
.inv-main { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.inv-equip { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  background: #14180e; border: 1px solid #232a18; padding: 18px; }
.inv-col { display: flex; flex-direction: column; gap: 24px; }

/* Слот экипировки */
.inv-slot { position: relative; width: 86px; height: 86px; padding: 0; cursor: pointer; background: none; border: none; }
.inv-slot-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 5;
  font-size: 13px; letter-spacing: 1px; color: #aeb495; background: #0c0e08; padding: 1px 8px; border: 1px solid #3a451f; white-space: nowrap; }
.inv-slot-inner { --rc: #3a4427; --rg: rgba(0,0,0,0); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; background: #11140d; border: 2px solid #2e3720; }
.inv-slot-glyph { width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; font-size: 34px; opacity: 0.95; }
.inv-slot.filled .inv-slot-inner { border-color: var(--rc); background: #161a0f; }
.inv-slot:hover .inv-slot-inner { border-color: #9bbf5a; }
.inv-slot.drop-ok .inv-slot-inner { border-color: #9be36a; box-shadow: inset 0 0 0 2px #9be36a; }
.inv-cell:active, .inv-slot:active { cursor: grabbing; }

/* Превью персонажа */
.inv-preview { position: relative; height: 360px; background: #0c0f08; border: 1px solid #232a18; cursor: grab; overflow: hidden; }
.inv-preview:active { cursor: grabbing; }
.inv-canvas { display: block; width: 100%; height: 100%; }
.inv-turn { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; }
.inv-tbtn { width: 34px; height: 30px; cursor: pointer; background: #161a0f; border: 1px solid #333c23; color: #b6bca0; font-size: 13px; }
.inv-tbtn:hover { border-color: #9bbf5a; color: #d9dcc6; }
.inv-pname { font-size: 17px; letter-spacing: 2px; color: #9aa07e; }

/* Характеристики */
.inv-stats { background: #14180e; border: 1px solid #232a18; padding: 14px 16px; }
.inv-stats-title { font-size: 16px; letter-spacing: 3px; color: #9bbf5a; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid #232a18; }
.inv-stat { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #1d2314; }
.inv-stat:last-child { border-bottom: none; }
.inv-stat-ic { font-size: 15px; opacity: 0.85; text-align: center; }
.inv-stat-lb { font-size: 17px; color: #aeb495; letter-spacing: 0.5px; }
.inv-stat-val { font-size: 19px; font-weight: 700; color: #e9ecd6; }
.inv-stat-bonus { font-size: 15px; font-weight: 700; padding: 0 6px; }
.inv-stat-bonus.up { color: #9be36a; background: #1a2412; }
.inv-stat-bonus.down { color: #e08a68; background: #261713; }

/* Инвентарь (сетка) */
.inv-bag { flex: 1 1 auto; display: flex; flex-direction: column; padding: 6px 20px 18px; min-height: 0; }
.inv-bag-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 12px; }
.inv-bag-title { font-size: 17px; letter-spacing: 3px; color: #9bbf5a; }
.inv-cap { font-size: 17px; letter-spacing: 1px; color: #aeb495; margin-left: 6px; }
.inv-cap.full { color: #e08a68; }
.inv-tabs { display: flex; gap: 6px; }
.inv-tab { padding: 5px 14px; cursor: pointer; font-size: 16px; letter-spacing: 1px;
  background: #14180e; border: 1px solid #2a3119; color: #8c926f; }
.inv-tab:hover { color: #d9dcc6; border-color: #44521f; }
.inv-tab.on { background: #33451f; color: #e9ecd6; border-color: #6d8a2e; }

.inv-grid { flex: 1 1 auto; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; padding: 4px 8px 4px 2px;
  scrollbar-width: thin; scrollbar-color: #3a451f #0c0e0a; }
.inv-grid::-webkit-scrollbar { width: 10px; }
.inv-grid::-webkit-scrollbar-track { background: #0c0e0a; }
.inv-grid::-webkit-scrollbar-thumb { background: #3a451f; border: 1px solid #5a6d2e; }

.inv-cell { --rc: #3a4427; --rg: rgba(0,0,0,0); position: relative; height: 116px; padding: 10px 6px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  background: #181d10; border: 1px solid var(--rc); overflow: hidden; }
.inv-cell:hover { background: #1e2414; z-index: 1; }
.inv-cell-glyph { width: 58px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 38px; line-height: 1; margin-top: 4px; }
.inv-icon { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.inv-cell-name { font-size: 14px; line-height: 1.05; text-align: center; color: #c3c8ab; max-height: 30px; overflow: hidden; }
.inv-cell-eq { position: absolute; top: 5px; right: 5px; font-size: 12px; letter-spacing: 1px; color: #0e110a; background: #9be36a; padding: 0 5px; font-weight: 700; }
.inv-cell.equipped { box-shadow: inset 0 0 0 1px #9be36a; }
.inv-cell.empty { height: 116px; border: 1px dashed #2a3119; background: #11140d; cursor: default; }
.inv-empty { grid-column: 1/-1; text-align: center; color: #5b6147; padding: 30px; letter-spacing: 2px; }

/* Подсказка предмета */
.inv-tooltip { --rc: #9bbf5a; position: fixed; z-index: 70; min-width: 190px; max-width: 260px; pointer-events: none;
  opacity: 0; transition: opacity 0.1s; background: #14180e; border: 1px solid var(--rc); padding: 11px 13px; }
.inv-tooltip.on { opacity: 1; }
.inv-tip-name { font-size: 19px; font-weight: 700; letter-spacing: 0.5px; }
.inv-tip-meta { font-size: 14px; letter-spacing: 1px; opacity: 0.85; margin: 2px 0 8px; }
.inv-tip-stat { display: flex; justify-content: space-between; font-size: 16px; padding: 1px 0; color: #b6bca0; }
.inv-tip-stat b.up { color: #9be36a; } .inv-tip-stat b.down { color: #e08a68; }
.inv-tip-stat.dim { color: #6b7152; font-style: italic; }
.inv-tip-desc { margin-top: 8px; padding-top: 7px; border-top: 1px solid #232a18; font-size: 15px; color: #868c6b; line-height: 1.2; }

/* Кнопка открытия — нижний левый угол, В САМОМ НИЗУ. Не мешает HP сверху и стрельбе справа. */
.inv-fab { position: fixed; left: 14px; bottom: 14px; z-index: 40;
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 8px 16px; cursor: pointer; font-family: "Pixelify Sans", "VT323", monospace; font-size: 18px; letter-spacing: 2px; color: #c3c8ab;
  background: #161a0f; border: 1px solid #3a451f; }
.inv-fab:hover { border-color: #9bbf5a; color: #fff; }
.inv-fab-glyph { font-size: 22px; }
.inv-fab-key { opacity: 0.5; font-size: 15px; }

/* Кнопка фонарика — НАД кнопкой инвентаря (снизу вверх: инвентарь → отступ → фонарик). */
.flash-fab { position: fixed; left: 14px; bottom: 62px; z-index: 40;
  display: flex; flex-direction: row; align-items: center; gap: 7px;
  padding: 8px 14px; cursor: pointer; font-family: "Pixelify Sans", "VT323", monospace; font-size: 17px; letter-spacing: 2px; color: #8c926f;
  background: #14180e; border: 1px solid #2a3119; }
.flash-fab:hover { border-color: #9bbf5a; color: #c3c8ab; }
.flash-fab.on { color: #ffe08a; border-color: #c79a3a; background: #1f1c10; }
.flash-glyph { font-size: 19px; }

/* ТЕСТОВЫЙ слайдер света — верх по центру. */
.light-slider { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: #14180e; border: 1px solid #2a3119;
  font-family: "Pixelify Sans", "VT323", monospace; color: #c3c8ab; }
.light-slider .ls-ic { font-size: 18px; }
.light-slider .ls-range { width: 150px; accent-color: #9bbf5a; cursor: pointer; }
.light-slider .ls-auto { width: 26px; height: 24px; cursor: pointer; font-size: 15px;
  background: #161a0f; border: 1px solid #333c23; color: #8c926f; }
.light-slider .ls-auto.on { color: #ffe08a; border-color: #c79a3a; }

@media (max-width: 760px) {
  .inv-fab { left: 12px; bottom: 12px; padding: 9px 14px; }
  .flash-fab { left: 12px; bottom: 62px; padding: 9px 14px; }
  .light-slider { padding: 5px 9px; gap: 6px; }
  .light-slider .ls-range { width: 110px; }
}

@media (max-width: 760px) {
  .inv-main { grid-template-columns: 1fr; }
  .inv-equip { grid-template-columns: auto 1fr auto; padding: 12px; gap: 10px; }
  .inv-slot { width: 64px; height: 64px; }
  .inv-slot-glyph { font-size: 26px; }
  .inv-preview { height: 240px; }
  .inv-title { font-size: 20px; letter-spacing: 2px; }
  .inv-title-sub { display: none; }
  .inv-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
  .inv-cell { height: 100px; }
  .inv-cell-glyph { font-size: 30px; }
}