/* =====================================================================================================================
   21 окт. 2026 (просьба владельца — «где наводишься на эффекты (ослеплены, замедлены, оглушены…) — окошко с корректным
   кратким описанием»): ОКОШКО СЛОВА-МЕХАНИКИ (js/mechtip.js). Значок эффекта в рамке (зелёная — хорошее, красная — плохое,
   как над полоской здоровья), название цветом механики (css/ns-mechs.css; окошко — .mk-parch, на пергаменте цвета тёмные),
   ниже — что делает. Идёт за мышью, как подсказка предмета (#tooltip); растёт с экраном (--rz); выше всех окон меню и боя.
   ===================================================================================================================== */
#mktip {
  --mt-f: #ec4048;
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  max-width: 300px; padding: 7px 10px; background: rgba(14, 9, 20, .97); border: 2px solid #6a5a80; color: #e8e0f0;
  font-size: calc(13px * var(--fs, 1)); line-height: 1.35;
}
#mktip.hidden { display: none; }
#mktip .mt-h { display: flex; align-items: center; gap: 8px; }
#mktip .mt-ic { flex: none; width: 24px; height: 24px; margin: 2px; background: #120c18; box-shadow: 0 0 0 2px var(--mt-f), 0 0 0 4px rgba(0, 0, 0, .55); }
#mktip .mt-ic img { display: block; width: 24px; height: 24px; image-rendering: pixelated; }
#mktip .mt-n { font-weight: 800; font-size: calc(15px * var(--fs, 1)); line-height: 1.15; }
#mktip .mt-d { margin-top: 4px; }

/* слово, у которого есть окошко: при наведении — пунктир снизу (видно, что слово «живое»); в словарике справки окошка нет */
.mk:hover { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 3px; }
#help-mechs .mk:hover { text-decoration: none; }

/* новый вид: маленький пергамент, как у подсказки предмета */
html.ns.nskit #mktip {
  max-width: 340px; padding: 0 0 2px; border: 24px solid transparent; border-image: var(--k-parch) 24 fill / 24px / 0 repeat; image-rendering: pixelated;
  background: none; box-shadow: none; color: var(--k-ink-t);
  /* тёмный контур в 1 пиксель набора (3 px): окошко лежит и на пергаменте карточек — без контура сливается с ним */
  filter: drop-shadow(3px 0 0 #20160c) drop-shadow(-3px 0 0 #20160c) drop-shadow(0 3px 0 #20160c) drop-shadow(0 -3px 0 #20160c) drop-shadow(0 6px 0 rgba(0, 0, 0, .55));
  font: 700 calc(15px * var(--fs, 1)) / 1.4 var(--k-font); text-shadow: none;
}
html.ns.nskit #mktip .mt-h { margin: -8px -6px 0; }
html.ns.nskit #mktip .mt-ic { background: #1a1220; }
html.ns.nskit #mktip .mt-n { font: 600 calc(20px * var(--fs, 1)) / 1.15 var(--k-title); letter-spacing: .01em; }
html.ns.nskit #mktip .mt-d { margin-top: 5px; color: var(--k-ink-t); }
/* растёт с экраном, как окна (на 4K — ×2); на 720p окна меню уменьшены (autoFit) — окошко тоже, но не мельче 0.8: читалось */
html.ns #mktip { transform: scale(max(.8, var(--rs, 1))); transform-origin: 0 0; }
