/* Теги синергии и «Сочетается с …» в карточке предмета и витамина (E2) — разметку собирает shared/ui/item_tags.js (window.PHItemTags).
   Токены страницы (--ink, --ink-2, --paper, --line, шрифты) — из её :root; тоны тегов — свои, из палитры проекта и цветов типов (--ty-* в cine.css). */
:root {
  --it-ice:#8ef0ff; --it-fire:#ff7a2a; --it-toxic:#b560e0; --it-storm:#ffd82a; --it-reaction:#ff5aa0;
  --it-crit:#a35cff; --it-zone:#5ad24a; --it-tempo:#ff9a3a; --it-guard:#2563d8; --it-life:#36c96a;
  --it-hunt:#e0303e; --it-motion:#a8c4ff; --it-pickup:#ffb21a; --it-ally:#ff9ae0; --it-risk:#5a5478;
  --it-pair:#f3f1fa;                                     /* подложка чипа пары — --paper-2 */
  --it-lip:#1a12462e;                                    /* нижняя кромка чипа — тон --shadow-sm */
}
.it-box { display:flex; flex-direction:column; gap:5px; margin-top:2px; }
.it-tags { display:flex; flex-wrap:wrap; gap:4px; }
.it-tag { --tc:var(--it-risk); display:inline-flex; align-items:center; height:18px; padding:0 8px; border-radius:99px; background:var(--tc); color:var(--paper);
  font:900 10.5px/1 var(--font-title); letter-spacing:.2px; white-space:nowrap; box-shadow:inset 0 -2px 0 var(--it-lip); }
.it-tag[data-t="ice"] { --tc:var(--it-ice); color:var(--ink); } .it-tag[data-t="fire"] { --tc:var(--it-fire); } .it-tag[data-t="toxic"] { --tc:var(--it-toxic); }
.it-tag[data-t="storm"] { --tc:var(--it-storm); color:var(--ink); } .it-tag[data-t="reaction"] { --tc:var(--it-reaction); } .it-tag[data-t="crit"] { --tc:var(--it-crit); }
.it-tag[data-t="zone"] { --tc:var(--it-zone); color:var(--ink); } .it-tag[data-t="tempo"] { --tc:var(--it-tempo); color:var(--ink); } .it-tag[data-t="guard"] { --tc:var(--it-guard); }
.it-tag[data-t="life"] { --tc:var(--it-life); color:var(--ink); } .it-tag[data-t="hunt"] { --tc:var(--it-hunt); } .it-tag[data-t="motion"] { --tc:var(--it-motion); color:var(--ink); }
.it-tag[data-t="pickup"] { --tc:var(--it-pickup); color:var(--ink); } .it-tag[data-t="ally"] { --tc:var(--it-ally); color:var(--ink); } .it-tag[data-t="risk"] { --tc:var(--it-risk); }
/* чип типа — цвет типа (как полоса типа у стража C3) */
.it-tag[data-ty] { --tc:var(--ty-normal); color:var(--ink); }
.it-tag[data-ty="fighting"] { --tc:var(--ty-fighting); color:var(--paper); } .it-tag[data-ty="flying"] { --tc:var(--ty-flying); } .it-tag[data-ty="poison"] { --tc:var(--ty-poison); color:var(--paper); }
.it-tag[data-ty="ground"] { --tc:var(--ty-ground); } .it-tag[data-ty="rock"] { --tc:var(--ty-rock); } .it-tag[data-ty="bug"] { --tc:var(--ty-bug); }
.it-tag[data-ty="ghost"] { --tc:var(--ty-ghost); color:var(--paper); } .it-tag[data-ty="steel"] { --tc:var(--ty-steel); } .it-tag[data-ty="fire"] { --tc:var(--ty-fire); color:var(--paper); }
.it-tag[data-ty="water"] { --tc:var(--ty-water); color:var(--paper); } .it-tag[data-ty="grass"] { --tc:var(--ty-grass); } .it-tag[data-ty="electric"] { --tc:var(--ty-electric); }
.it-tag[data-ty="psychic"] { --tc:var(--ty-psychic); color:var(--paper); } .it-tag[data-ty="ice"] { --tc:var(--ty-ice); } .it-tag[data-ty="dragon"] { --tc:var(--ty-dragon); color:var(--paper); }
.it-tag[data-ty="dark"] { --tc:var(--ty-dark); color:var(--paper); } .it-tag[data-ty="fairy"] { --tc:var(--ty-fairy); }
/* «Сочетается с»: подпись и чипы пар — значок 30×30 ×1 (без растяжения), имя с многоточием */
.it-pairs { display:flex; flex-wrap:wrap; align-items:center; gap:3px 4px; }
.it-pl { flex-basis:100%; color:var(--ink-2); font:800 11px/1.2 var(--font); }
.it-pair { display:inline-flex; align-items:center; gap:2px; max-width:100%; height:24px; padding:0 8px 0 0; border-radius:99px; background:var(--it-pair); border:1px solid var(--line);
  color:var(--ink); font:800 11px/1 var(--font); overflow:hidden; }
.it-pair > img { width:30px; height:30px; margin:-4px -3px -4px -4px; flex:none; image-rendering:pixelated; }
.it-pair > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
@media (max-width:760px) {
  .it-tag { height:16px; padding:0 6px; font-size:9.5px; }
  /* узкая карточка телефона и плитка подготовки дуэли (arena/pvp.js): «Сочетается с» и значки пар в одну строку, имена — в подсказке и в «Предметах» (окно уровня влезает в 812 px) */
  :is(.card, .pv-opt) .it-pl { flex-basis:auto; margin-right:2px; }
  :is(.card, .pv-opt) .it-pair { width:26px; padding:0; justify-content:center; }
  :is(.card, .pv-opt) .it-pair > img { margin:-4px; }
  :is(.card, .pv-opt) .it-pair > span { display:none; }
}