/*
 * item-cell v1 — стили ячейки предмета (цель 00785).
 * Числа — Figma DMD DS v1.1: Item 5194:23427 (80×80, pad 4, r8), Count 5061:14195
 * (20×20 HUG, pad 4/2, r4, Norwester 14/16), дробь 5194:23429, состояния 5024:2848.
 * Цвета — токены web/tokens.css. Где точного токена нет — локальная переменная --ic-*
 * с узлом-источником и ближайшим токеном (вопрос владельцу, см. паспорт).
 * Текст — только классами DS из web/base.css (t-h2 / t-h3 / t-h4 + cap-trim).
 */

/* Общие переменные — на :root, чтобы экран (и ручки витрины) мог переопределить их
   на любом предке: объявление на самой .ic-item перекрыло бы предка. */
:root {
  /* Figma 5194:23427 / 5061:14195 #252535 — ТОКЕНА НЕТ; ближайший neutral-700 #262733
     (ΔRGB ≤ 2). Вопрос владельцу: завести токен item/background или принять neutral-700. */
  --ic-bg: var(--p-color-neutral-700, #262733);
  /* Count 5061:14195 фон #252535 — тот же цвет, что ячейка; токена нет (см. выше) */
  --ic-badge-bg: var(--p-color-neutral-700, #262733);
  /* Цифра Count #E7E7EC (VariableID …/23321:10) — ТОКЕНА НЕТ; ближайший neutral-100 #e2e4ed
     (ΔRGB ≤ 5; text-primary #eff0f2 дальше — ΔRGB ≤ 9). */
  --ic-badge-fg: var(--p-color-neutral-100, #e2e4ed);
  --ic-pad: var(--p-space-4, 4px);
  --ic-radius: var(--s-radius-s, 8px);
  --ic-badge-h: 20px;           /* Figma Count 5061:14195 высота 20 (HUG по ширине) */
  --ic-badge-inset: var(--p-space-4, 4px);
  --ic-action-gap: var(--s-space-stack-s, 8px);
}

.ic-item {
  /* сторона ячейки; S/M/L ниже, fill — во всю колонку */
  --ic-size: 80px;

  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--ic-action-gap);
  width: var(--ic-size); min-width: 0; flex: none;
}
.ic-item--s { --ic-size: 64px; }   /* бриф 00785: медиана атласа «награда» 64×64 */
.ic-item--m { --ic-size: 80px; }   /* Figma Item Default 5194:23427 80×80 */
.ic-item--l { --ic-size: 180px; }  /* reward-window слот предмета 180×180 (Figma 5143:10660) */
.ic-item--fill { width: 100%; }
/* Кнопка шире квадрата вне сетки (fitActions): растёт КОЛОННА, а не квадрат — квадрат
   своего размера по центру, кнопка под ним во всю колонку («одна форма», 30.10.2026). */
.ic-item.is-wide-action { width: var(--ic-col, var(--ic-size)); align-items: center; }
.ic-item.is-wide-action > .ic { width: var(--ic-size); }

/* ---------- сама ячейка ---------- */
.ic {
  position: relative; box-sizing: border-box;
  width: 100%; aspect-ratio: 1 / 1;
  padding: var(--ic-pad);
  border-radius: var(--ic-radius);
  background: var(--ic-bg);
  overflow: hidden;
  isolation: isolate;
  transition: background-color 180ms cubic-bezier(.2, 0, 0, 1);
}
.ic__img, .ic__ph, .ic__plus {
  display: block; width: 100%; height: 100%;
  border-radius: calc(var(--ic-radius) - var(--ic-pad));
}
.ic__img { object-fit: contain; max-width: none; user-select: none; -webkit-user-drag: none;
           transition: opacity 180ms cubic-bezier(.2, 0, 0, 1); }

/* Нет картинки: нейтральная заглушка, ячейка остаётся рабочей */
.ic__ph { display: grid; place-items: center; color: var(--p-color-neutral-500, #585a6e); }
.ic__ph svg { width: 55%; height: 55%; }

/* ---------- бейдж количества: правый нижний угол ---------- */
.ic__badge {
  position: absolute; right: var(--ic-badge-inset); bottom: var(--ic-badge-inset); z-index: 2;
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--ic-badge-h); height: var(--ic-badge-h);
  padding: var(--p-space-2, 2px) var(--p-space-4, 4px);
  border-radius: var(--s-radius-xs, 4px);
  background: var(--ic-badge-bg); color: var(--ic-badge-fg);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ---------- знак состояния: правый ВЕРХНИЙ угол (решение владельца 30.10.2026) ---------- */
.ic__corner {
  position: absolute; right: var(--ic-badge-inset); top: var(--ic-badge-inset); z-index: 2;
  box-sizing: border-box; display: grid; place-items: center;
  width: var(--ic-badge-h); height: var(--ic-badge-h);
  border-radius: var(--s-radius-xs, 4px);
}
.ic__corner svg { width: 12px; height: 12px; display: block; }
/* Получено: знак успеха — заливка success, галочка цветом текста на success */
.ic__corner--check { background: var(--s-color-status-success-fill, #a7ed61); color: var(--s-color-status-success-text, #041f0c); }
/* Закрыто: тихий замок на подложке ячейки */
.ic__corner--lock { background: var(--ic-badge-bg); color: var(--s-color-text-secondary, #7c7d91); }

/* ---------- состояния ---------- */
/* Получено / куплено: подложка уходит в зелень (Figma 5024:2856 Variant6 — зелёная
   подложка) + галочка. Два признака — против путаницы «получено» ↔ «доступно». */
.ic.is-received, .ic.is-soldout { background: var(--p-color-green-800, #115a0c); }

/* Закрыто и ноль: картинка притушена; закрытая подложка темнее (Figma 5024:2860 Closed) */
.ic.is-dim .ic__img, .ic.is-dim .ic__ph { opacity: calc(var(--p-opacity-35, 35) / 100); }
.ic.is-locked { background: var(--p-color-neutral-800, #1e1e2b); }
/* Бейдж закрытой НЕ притушается: количество будущей награды — информация (контраст
   цифры к подложке бейджа 11,6:1). Закрытость несут замок, тёмная подложка и картинка. */

/* Выбрано: внутренняя рамка 2 цветом главного действия (как merge-cell selected,
   Figma Atom/Cell 5059:12297 stroke 2 #EFC33E) */
.ic::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 0 transparent;
  transition: box-shadow 120ms cubic-bezier(.2, 0, 0, 1);
}
.ic.is-selected::after { box-shadow: inset 0 0 0 2px var(--s-color-action-primary, #efc33e); }

/* Слот и стоимость: нейтральная рамка 1 (решение владельца 30.10.2026: рамка редкости
   отброшена). Рамка одна в обоих состояниях слота. */
.ic--framed::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px var(--s-color-stroke-default, #373a4a);
}
.ic.is-empty { background: transparent; }
.ic.is-empty::before { box-shadow: inset 0 0 0 1px var(--s-color-stroke-default, #373a4a); }
.ic__plus { display: grid; place-items: center; color: var(--s-color-stroke-strong, #9396ab); }
.ic__plus svg { width: 40%; height: 40%; max-width: 32px; max-height: 32px; }

/* ---------- таймер по низу (Figma 5024:2863 opening) — бейдж на это время скрыт ---------- */
.ic__timer {
  position: absolute; left: var(--ic-pad); right: var(--ic-pad); bottom: var(--ic-pad); z-index: 2;
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  height: var(--ic-badge-h);
  border-radius: 0 0 calc(var(--ic-radius) - var(--ic-pad)) calc(var(--ic-radius) - var(--ic-pad));
  background: var(--s-color-surface-overlay, #0a0a0fe5);
  color: var(--s-color-text-primary, #eff0f2);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ic--l .ic__timer { height: 28px; }

/* ---------- стоимость: дробь «есть/нужно» и шкала по низу (Figma 5194:23429) ---------- */
.ic__cost {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-top: 12px;
  /* затемнение под дробью, чтобы число читалось на любой картинке */
  background: linear-gradient(to bottom, transparent, var(--s-color-surface-overlay, #0a0a0fe5) 70%);
}
.ic__frac { white-space: nowrap; font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.ic__have { color: var(--s-color-status-success-fill, #a7ed61); }
.ic__cost.is-short .ic__have { color: var(--s-color-status-error-fill, #e55050); }
.ic__need { color: var(--s-color-text-secondary, #7c7d91); }
.ic__bar { position: relative; display: block; width: 100%; height: 3px;  /* Figma 5194:23455 80×3 */
           background: var(--p-color-neutral-600, #373a4a); }
.ic__bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--ic-ratio, 0) * 100%);
                background: var(--s-color-status-success-fill, #a7ed61); }
.ic__cost.is-short .ic__bar-fill { background: var(--s-color-status-error-fill, #e55050); }
.ic--l .ic__bar { height: 4px; }
.ic--l .ic__frac { margin-bottom: 10px; }

/* ---------- действие под ячейкой: канон dmd-button Md ---------- */
.ic-item__action { width: 100%; }
/* Нет денег: кнопка тёмная (System), цена остаётся видна и красная — нажатие ведёт
   к пополнению [допущение]. Цвет числа — токен ошибки. */
.dmd-button.ic-item__action--short dmd-currency .dmdc-value { color: var(--s-color-status-error-fill, #e55050); }

/* ---------- раскладки-помощники для экрана ---------- */
/* Сетка витрины/инвентаря: N колонок; ячейки M (80) по умолчанию, во всю колонку —
   когда fitActions() решил растянуть (.ic-grid--stretch) или задано fill. */
.ic-grid { --ic-cols: 3; display: grid; grid-template-columns: repeat(var(--ic-cols), minmax(0, 1fr));
           gap: var(--s-space-stack-l, 16px) var(--s-space-stack-s, 8px); justify-items: center; align-items: start; }
.ic-grid--stretch > .ic-item { width: 100%; }
/* Колонка уже стороны ячейки (4×M на узком экране) — ячейка сжимается до колонки,
   зазор остаётся заданным, крайние не вылезают из сетки (как инвентарь). */
.ic-grid > .ic-item { max-width: 100%; }
.ic-grid > .ic-item--fill { justify-self: stretch; }
/* Ряд: не помещается — переносится (.ic-row--wrap) или прокручивается (.ic-row--scroll) */
.ic-row { display: flex; gap: var(--s-space-stack-s, 8px); align-items: flex-start; }
.ic-row--wrap { flex-wrap: wrap; }
/* Ряд 7+ — горизонтальная прокрутка (лоу-фай 00785). Сигнал продолжения — обрезанная
   следующая награда; край гаснет мягко (16 px до 40 %, арт остаётся различим) и только
   с той стороны, где есть ещё содержимое (fitScrollEdges ставит has-more-start/-end). */
.ic-row--scroll {
  --ic-fade: 16px;
  --ic-fade-to: rgb(0 0 0 / .4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ic-row--scroll.has-more-end {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--ic-fade)), var(--ic-fade-to));
          mask-image: linear-gradient(90deg, #000 calc(100% - var(--ic-fade)), var(--ic-fade-to));
}
.ic-row--scroll.has-more-start {
  -webkit-mask-image: linear-gradient(90deg, var(--ic-fade-to), #000 var(--ic-fade));
          mask-image: linear-gradient(90deg, var(--ic-fade-to), #000 var(--ic-fade));
}
.ic-row--scroll.has-more-start.has-more-end {
  -webkit-mask-image: linear-gradient(90deg, var(--ic-fade-to), #000 var(--ic-fade), #000 calc(100% - var(--ic-fade)), var(--ic-fade-to));
          mask-image: linear-gradient(90deg, var(--ic-fade-to), #000 var(--ic-fade), #000 calc(100% - var(--ic-fade)), var(--ic-fade-to));
}
.ic-row--scroll::-webkit-scrollbar { display: none; }
.ic-row--scroll > .ic-item { scroll-snap-align: start; }

/* ---------- движение: статический остаток у каждого перехода ---------- */
/* только при живом переходе (класс is-fresh ставит mount), не на каждой отрисовке */
.ic.is-fresh .ic__corner { animation: ic-corner-in 200ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ic-corner-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ic, .ic__img, .ic::after { transition: none; }
  .ic.is-fresh .ic__corner { animation: none; }
}