/* Косметика «Ночной казино-клуб»: вид стола в режиме примерки. Платный арт — игровое содержание (решение 096);
   сами экраны, подписи и кнопки остаются плоскими и на токенах. */

/* ---- сукно: цвет (и текстура, когда есть файл) из выбранной вещи ---- */
.cos-fit[data-cos-felt] .cf-felt {
  background-color: var(--cos-felt);
  background-image: var(--cos-felt-tex, none);
  background-size: 256px;
}

/* ---- рамка аватара: кольцо поверх круга, по размеру круга (32–56 px) ---- */
.av.cos-framed { overflow: visible; }
.cos-frame {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  max-width: none;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}
/* заглушка TEMP рисует кольцо в 65 % картинки — растягиваем так, чтобы оно легло на край круга */
.cos-frame[src*='/placeholder/'] { inset: -27%; width: 154%; height: 154%; }

/* ---- рубашка: картинка вещи в рамках карты ---- */
img.card.cos-back { object-fit: cover; }

/* ---- звание под ником ---- */
.cos-title {
  font-size: var(--k-fs-caption);
  line-height: var(--k-lh-caption);
  color: var(--k-text-2, var(--text-secondary));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- эффект победы: частицы в слое #fx (он не ловит нажатия) ---- */
.cos-fx-chip { border-radius: 50%; object-fit: contain; }
.cos-fx-star { color: #ff5fb0; line-height: 1; margin: -8px 0 0 -8px; }

/* ---- реакция набора: пузырь с подписью «примерка» ---- */
.rx-bubble .rx-try {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  font-size: var(--k-fs-caption);
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--k-r-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

/* ---- примерочная ---- */
.cos-fit { display: flex; flex-direction: column; gap: var(--k-s12); padding: var(--k-s16); }
.cos-fit .cf-head { display: flex; align-items: center; justify-content: space-between; gap: var(--k-s8); }
.cos-fit .cf-stage {
  position: relative;
  height: 230px;
  border-radius: var(--k-r-lg);
  background: var(--bg-main);
  overflow: hidden;
}
.cos-fit .cf-felt {
  position: absolute;
  left: 4%; right: 4%; top: 14%; bottom: 8%;
  border-radius: 50%;
  background: var(--table-felt);
  box-shadow: 0 0 0 1px var(--border-color);
}
.cos-fit .cf-seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; }
.cos-fit .cf-seat.l { left: 6%; top: 2%; }
.cos-fit .cf-seat.r { right: 6%; top: 2%; }
.cos-fit .cf-seat .av { width: 40px; height: 40px; }
.cos-fit .cf-mini { display: flex; }
.cos-fit .cf-mini .card { width: 22px; border-radius: var(--k-r-sm); }
.cos-fit .cf-mini .card + .card { margin-left: -8px; }
.cos-fit .cf-nm { font-size: var(--k-fs-caption); color: var(--on-felt-accent-line); background: var(--bg-surface); border: 1px solid var(--on-felt-line); border-radius: var(--k-r-sm); padding: 1px 6px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-fit .cf-mid { position: absolute; left: 0; right: 0; top: 42%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cos-fit .cf-pot { font-size: var(--k-fs-caption); color: var(--on-felt-accent-line); background: var(--bg-surface); border: 1px solid var(--on-felt-line); border-radius: 999px; padding: 1px 10px; }
.cos-fit .cf-board { display: flex; gap: 4px; }
.cos-fit .cf-board .card { width: 40px; border-radius: var(--k-r-sm); }
.cos-fit .cf-hero { display: flex; align-items: center; gap: var(--k-s12); padding: var(--k-s12); border-radius: var(--k-r-lg); background: var(--bg-surface); border: 1px solid var(--border-color); }
.cos-fit .cf-hero .cf-cards { display: flex; flex: none; }
.cos-fit .cf-hero .cf-cards .card { width: 54px; border-radius: 6px; }
.cos-fit .cf-hero .cf-cards .card + .card { margin-left: -10px; }
.cos-fit .cf-hero .av { width: 44px; height: 44px; flex: none; margin: 0 6px; }
.cos-fit .cf-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cos-fit .cf-who b { font-size: var(--k-fs-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-fit .cf-rx { display: flex; gap: var(--k-s8); flex-wrap: wrap; }
.cos-fit .cf-rx .k-btn { min-width: 44px; min-height: 44px; }
.cos-fit .cf-rx .rx-face { width: 28px; height: 28px; }
.cos-fit .cf-actions { display: flex; flex-direction: column; gap: var(--k-s8); }
.cos-fit .cf-actions .k-btn { white-space: normal; }
.cos-fit .cf-note { font-size: var(--k-fs-caption); color: var(--text-secondary); }

/* ---- круг в руке (появляется, только когда выбрана рамка) ---- */
.hero .hero-av { width: 40px; height: 40px; flex: none; margin: 0 6px; }