/* 20 окт. 2026 (просьба владельца — «если предмет что-то ухудшает, рядом с панелькой здоровья — предмет, „Взять?“ и две маленькие
   кнопочки Да / Нет»): ВОПРОС О ПРЕДМЕТЕ С МИНУСОМ (public/js/itemask.js). Табличка — внутри #bottom прямо над плитой здоровья,
   поэтому растёт и уменьшается вместе с нижней панелью (--uisb: 720p — 4K); значки эффектов (#statusfx) на это время поднимаются
   над ней (--ia-h ставит itemask.js). Вид — как табличка подобранного предмета (полоса редкости слева), только плотнее: читается
   в бою. Мышь ловят только сама табличка и кнопки; в соло, пока открыт выбор из трёх, табличка ждёт под ним. */
#itemask {
  position: absolute; left: 0; bottom: 100%; margin-bottom: 8px; z-index: 4; pointer-events: auto;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: 470px; box-sizing: border-box;
  padding: 6px 12px 7px 7px; border-left: 6px solid var(--ia-c, #d9b46a); background: rgba(22, 19, 28, .93);
  box-shadow: inset 0 3px 0 rgba(43, 37, 53, .8), inset 0 -3px 0 rgba(11, 10, 14, .8), 0 0 0 3px rgba(8, 7, 11, .8), 0 9px 0 3px rgba(0, 0, 0, .3);
  color: var(--k-text, #efe6d3); font-family: var(--k-font, 'Manrope', sans-serif); text-shadow: 0 2px 0 rgba(8, 7, 11, .9);
  cursor: var(--cur-arrow, default);
}
#itemask.hidden { display: none; }
#itemask.in { animation: ia-in .18s steps(3); }
@keyframes ia-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
#itemask .ia-ic { flex: none; width: 48px; height: 48px; margin: 2px; background: var(--k-0, #0e0c12); box-shadow: 0 0 0 3px var(--k-ink, #08070b), 3px 3px 0 3px #3a3346; }
#itemask .ia-ic img { display: block; width: 48px; height: 48px; image-rendering: pixelated; }
#itemask .ia-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#itemask .ia-n { color: var(--ia-c, #d9b46a); font: 600 calc(15px * var(--fs, 1)) / 1.1 var(--k-title, 'Exo 2', sans-serif); letter-spacing: .01em; text-shadow: 0 3px 0 var(--k-ink, #08070b); }
#itemask .ia-n b { color: var(--k-gold-hi, #f3d897); font: 800 .8em / 1 var(--k-font, 'Manrope', sans-serif); }
#itemask .ia-d { color: var(--k-text, #efe6d3); font: 500 calc(12px * var(--fs, 1)) / 1.25 var(--k-font, 'Manrope', sans-serif); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* не больше двух строк — полностью в подсказке по значку */
#itemask .ia-bad { color: #ff7a68; font-weight: 800; }
#itemask .ia-bad .mk { color: inherit; } /* 21 окт. 2026: слово-механика в минусе — красное, как весь минус (окошко при наведении остаётся) */
#itemask .ia-q { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
#itemask .ia-t { margin-right: 3px; color: #fff; font: 800 calc(13px * var(--fs, 1)) / 1 var(--k-font, 'Manrope', sans-serif); }
#itemask .ia-more { color: var(--k-text-3, #8b8398); font: 600 calc(11px * var(--fs, 1)) / 1 var(--k-font, 'Manrope', sans-serif); text-shadow: none; }
/* маленькие кнопки «Да» / «Нет» — тёмные плиты (прежний вид — простая рамка) */
#itemask .ia-btn {
  min-width: 42px; margin: 0; padding: 2px 8px 3px; border: 2px solid var(--k-ink, #08070b); border-radius: 0; background: #2b2535;
  box-shadow: inset 0 2px 0 #4d4459, inset 0 -3px 0 #1a1720; color: var(--k-text, #efe6d3); text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
  font: 700 calc(12px * var(--fs, 1)) / calc(13px * var(--fs, 1)) var(--k-font, 'Manrope', sans-serif); cursor: var(--cur-hand, pointer);
}
#itemask .ia-btn:hover { background: #352e40; color: #fff; }
#itemask .ia-btn:active { transform: translateY(2px); }
html.ns.nskit #itemask .ia-btn {
  position: relative; padding: 0 7px; border-style: solid; border-color: transparent; border-width: 6px 6px 9px;
  border-image: var(--k-btn) 6 6 9 fill / 6px 6px 9px / 0 stretch; image-rendering: pixelated; background: none; box-shadow: none;
}
html.ns.nskit #itemask .ia-btn:hover { border-image-source: var(--k-btn-hi); background: none; }
html.ns.nskit #itemask .ia-btn:hover::after { content: ''; position: absolute; left: -9px; top: 50%; width: 3px; height: 12px; margin-top: -6px; background: var(--k-violet-hi); box-shadow: 0 3px 0 var(--k-violet); }
html.ns.nskit #itemask .ia-btn:active { border-image-source: var(--k-btn-dn); transform: translateY(3px); }
/* значки эффектов — над табличкой */
#bottom.ia-on > #statusfx { margin-bottom: calc(var(--ia-h, 90px) + 14px); }
/* соло: пока открыт выбор из трёх (игра на паузе), табличка не лезет под карточки */
#hud:has(#choice:not(.hidden)) #itemask { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { #itemask.in { animation: none; } }