/* Кляксы (23.10, klyaksy.js): значок-клякса, чип в шапке, строка в окне мастера, секция Кабинета.
   Цвета только из токенов темы (--text, --text-2, --gold, --gold-t), поэтому одинаково читаются во всех 13 темах:
   тело пятна красит currentColor, блик — акцент темы, как у капли чернил. */

.kly-ic { flex: none; display: inline-block; vertical-align: -0.2em; color: var(--text-2); }
.kly-ic circle.kly-hi { fill: var(--gold-t, currentColor); }
.kly-ic path.kly-hi { stroke: var(--gold-t, currentColor); }

/* чип в шапке: ссылка в Кабинет, ширина по содержимому, не толкает соседей */
a.igra-kly { text-decoration: none; cursor: pointer; }
.igra-kly b { color: var(--text); font-weight: 700; }
.igra-kly:hover, .igra-kly:focus-visible { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
/* кляксы кончились: тот же чип с пунктиром (не прозрачность, закон «читаемость состояний»), число остаётся читаемым */
.igra-kly.is-empty { border-style: dashed; }
.igra-kly.is-empty b { color: var(--gold-t); }

/* Узкие экраны (320): шапка не должна расти. Чип клякс появляется, когда приходит /account/me, и при нехватке места
   шапка переносилась на вторую строку (59 -> 103 px) - разметка прыгала. Поэтому чип ужимается заранее (меньше поля и
   значок), а ряд действий не переносится и сжимает бренд, а не соседей. Место под чип не резервируем пустым: у гостя
   его нет вовсе, а у вошедшего чип занимает ту же строку и в ту же ширину, что уже рассчитана выше. */
@media (max-width: 360px) {
  .igra-topbar-actions .igra-kly { padding: 4px 7px 4px 6px; gap: 3px; font-size: .74rem; }
  .igra-topbar-actions .igra-kly .kly-ic { width: 13px; height: 13px; }
  .igra-topbar-actions { flex-wrap: nowrap; gap: 4px; }
  /* у crt шрифт чипов крупный (1.2rem): с пятизначными чернилами и кляксами шапка не помещалась в строку */
  html[data-theme="crt"] .igra-topbar-actions .igra-kly, html[data-theme="crt"] .igra-topbar-actions:has(#klyBadge:not([hidden])) .igra-ink { font-size: .95rem; }
}
@media (max-width: 330px) {
  .igra-topbar { gap: 6px; padding-left: 8px; padding-right: 8px; }
}

/* строка «Кляксы» в окне выбора мастера */
.igra-kly-item .igra-model-name { display: inline-flex; align-items: center; gap: 6px; }
.igra-kly-item .kly-ic { color: var(--text); }

/* Кабинет */
.kb-kly .lv-h-title { display: flex; align-items: center; gap: 10px; }
.kb-kly-ic { display: inline-flex; }
.kb-kly .kly-ic { color: var(--text, var(--lv-text)); }
.kb-kly .kb-kly-ic .kly-ic { color: var(--lv-text, var(--text)); }   /* значок в заголовке: полоса заголовка тёмная в любой теме, значок светлый */
.kb-kly .kly-ic circle.kly-hi { fill: var(--gold-t, var(--lv-gold, currentColor)); }
.kb-kly .kly-ic path.kly-hi { stroke: var(--gold-t, var(--lv-gold, currentColor)); }
.kb-kly-row { display: flex; align-items: center; justify-content: space-between; gap: 14px 18px; flex-wrap: wrap; margin: 4px 0 0; }
.kb-kly-bal { margin: 0; color: var(--text-2, var(--lv-text-2)); font-size: .88rem; }
.kb-kly-bal b { font-size: 2.1rem; line-height: 1.1; color: var(--text, var(--lv-text)); margin-right: 6px; }
.kb-kly-claim { min-height: 44px; padding: 0 20px; white-space: normal; text-align: center; }
.kb-kly-claim:disabled { cursor: default; }
/* Живая и неживая кнопка различаются формой, а не только текстом (в horror обе были светло-серыми): живая в акцентном
   кольце темы, неживая - пустая, с пунктиром и приглушённым цветом текста темы («читаемость состояний»: не opacity) */
html .kb-kly .kb-kly-claim:not(:disabled) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold, currentColor) 75%, transparent); }
html .kb-kly .kb-kly-claim:disabled {
  background: transparent; background-image: none; box-shadow: none; opacity: 1;
  color: var(--text-2, var(--lv-text-2)); border: 1.5px dashed color-mix(in srgb, var(--text-2, currentColor) 70%, transparent);
}
.kb-kly .kb-hint { margin: 10px 0 0; color: var(--text-2, var(--lv-text-2)); font-size: .88rem; }
.kb-kly .kb-hint:empty { display: none; }
@media (max-width: 420px) {
  .kb-kly-row { flex-direction: column; align-items: stretch; }
  .kb-kly-claim { width: 100%; }
}