/* =========================================================================
   Карточки корзины.

   Отдельным файлом по той же причине, что и hero.css: base.css — чужой
   скомпилированный CSS из архива, и правки в нём невозможно ни прочитать,
   ни откатить. Здесь только то, что переопределяет .tcards / .tc.

   ЧТО ЭТО ЗА КАРТОЧКА

   Шесть мест корзины — это весь товар проекта, и на них смотрят. Значит
   карточка обязана читаться карточкой: отдельным предметом, который можно
   взять в руку, а не ячейкой таблицы.

   До правки она читалась ячейкой, и причина была не во вкусе, а в четырёх
   измеримых вещах:

     1. Между карточками не было зазора. В base.css сетка сделана приёмом
        «фон = линия, зазор = 1px»: шесть плиток делят края и выглядят
        разлинованной таблицей. Это главное.
     2. У карточки не было ни собственной рамки, ни тени — ничто не
        говорило «это предмет».
     3. Арт был низкий (1 / .46), и верх карточки выглядел пустым полем с
        кружком посередине.
     4. Карточка лидера заливалась акцентом целиком. Сплошной зелёный
        прямоугольник кричит «выбрано», а не «первая», и плющит иконку.

   ЧЕГО ЗДЕСЬ НАРОЧНО НЕТ

   Меток редкости — «эпиков», «легендарок», разноцветных рамок по редкости.
   У соседей по цепи это есть, и у них это честно: они продают лотерею.

   Мы продаём ровно противоположное: **все шесть мест равны**, по 16,67%.
   Поэтому там, где у лутбокса стоит редкость, у нас стоит номер места, а
   доля напечатана на всех шести одинаковая. Шесть одинаковых чисел рядом —
   это и есть заявление. Нарисовать редкость там, где её нет, значило бы
   соврать в самом заметном месте страницы.

   ПОДПИСЬ КАРТОЧКИ

   Дырка под кольцо сверху. Имя проекта означает упаковку из шести, и
   карточка висит в связке, как банка в пластиковом ярлыке. Приём наш, ни у
   кого на этой цепи такого нет, и он не требует ни картинок, ни шрифтов.
   ========================================================================= */

/* ---------- сетка ----------
   Зазор вместо линий. base.css рисует сетку приёмом «фон-линия + gap: 1px»;
   для таблицы это хорошо, для шести предметов — нет. */
.tcards {
  background: none;
  border: 0;
  gap: clamp(.6rem, 1.3vw, 1.1rem);
  grid-template-columns: 1fr;
  /* Тени карточек выходят за их границы; без запаса снизу они срезаются
     краем секции. */
  padding-bottom: .4rem;
  /* Потолок ширины: без него на широком экране карточка растягивается до
     четырёхсот с лишним пикселей и становится альбомной. Карточка читается
     карточкой, когда она вертикальная; три по триста с зазорами дают ровно
     это, а лишнее место уходит в поля. */
  max-width: 61rem;
  margin-inline: auto;
}

@media (min-width: 560px) {
  .tcards { grid-template-columns: 1fr 1fr; }
}

/* Три колонки — с той же ширины, с которой base.css включал пять.
   Мест шесть: в пять колонок они ложатся как 5 + 1, и последняя висит одна
   в пустом ряду. Три дают два ровных ряда, и «шесть» читается прямо из
   раскладки, без подписи. */
@media (min-width: 880px) {
  .tcards { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- сама карточка ---------- */
.tc {
  gap: .3rem;
  /* Поле в семь пикселей по кругу: арт больше не упирается в край, а
     лежит внутри рамки — как картинка на игральной карте. Внутренняя
     линия ниже проходит ровно по его кромке. */
  padding: 7px 7px .85rem;
  position: relative;
  isolation: isolate;
  overflow: visible;                 /* дырка сверху выходит за край */
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background-color: var(--color-ink);
  /* Внутренняя рамка в шесть пикселей от края — как поле у игральной
     карты. Сделана outline со смещением внутрь, а не псевдоэлементом:
     оба псевдоэлемента заняты дыркой и фольгой. */
  outline: 1px solid color-mix(in srgb, var(--color-bone) 7%, transparent);
  outline-offset: -6px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-bone) 6%, transparent),
    0 10px 26px -14px #000;
  transition: transform .16s, border-color .16s, box-shadow .16s, outline-color .16s;
}

@media (hover: hover) {
  .tc:hover { outline-color: color-mix(in srgb, var(--color-neon) 26%, transparent); }
}

.tc > *:not(.tc-art) { margin-inline: .55rem; }

@media (hover: hover) {
  .tc:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-neon) 40%, var(--color-rule));
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--color-bone) 8%, transparent),
      0 16px 34px -14px #000,
      0 0 0 1px color-mix(in srgb, var(--color-neon) 18%, transparent),
      0 0 30px -6px color-mix(in srgb, var(--color-neon) 22%, transparent);
  }
}

/* Дырка под кольцо. Сидит на верхней кромке, наполовину снаружи —
   так читается пробитое отверстие, а не нарисованный кружок. */
.tc::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -7px;
  left: 50%;
  width: 15px;
  height: 15px;
  margin-left: -7.5px;
  border-radius: 50%;
  background: var(--color-ink-2);
  box-shadow:
    0 0 0 1px var(--color-rule),
    inset 0 2px 3px -1px #000;
  pointer-events: none;
}

/* Фольга: тонкая рамка акцентом, проступающая при наведении.
   Псевдоэлементом поверх, а не border'ом — border сдвинул бы содержимое на
   пиксель, и вся сетка дёргалась бы под курсором. */
.tc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  border-radius: 12px;
  transition: opacity .16s;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-neon) 55%, transparent) 0%,
      transparent 38%,
      transparent 62%,
      color-mix(in srgb, var(--color-neon) 30%, transparent) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
}

@media (hover: hover) {
  .tc:hover::after { opacity: 1; }
}

/* ---------- первое место ----------
   Особой оправы у него больше нет, и это исправление, а не упрощение.

   Стояла зелёная рамка со свечением — чтобы первое место читалось первым.
   На карточках, где окно теперь красится в цвет самого токена, она стала
   лишней и вредной: пять карточек одинаковых, шестая обведена акцентом, и
   первое, о чём думаешь, — «а что с ней не так». Признак ранга оказался
   похож на признак состояния.

   Ранг и без того написан прямо на карточке: «01/6» в углу. Одно и то же
   сказанное дважды, разными языками, читается как два разных сообщения. */
.tc.lead {
  /* Ничего сверх общей карточки. Правила ниже отменяют цвета из base.css —
     они по-прежнему нужны, см. пояснение там. */
}



/* base.css красит ВСЁ содержимое лидера в цвет чернил — семь правил,
   рассчитанных на заливку акцентом, которой больше нет. Без их отмены
   тёмный текст ложится на тёмный фон: на первом же снимке у карточки
   пропали и название, и суточное изменение — не «стали бледными», а
   исчезли совсем. Отменяем поимённо, а не общим `color`, потому что
   специфичность у base.css выше. */
.tc.lead { color: var(--color-h2c); }
.tc.lead .tc-top b { color: var(--color-bone); }
.tc.lead .up { color: var(--color-neon); }
.tc.lead .dn { color: #ff5b3d; }
.tc.lead .nm,
.tc.lead .ch .ago { color: var(--color-mute); }
.tc.lead .pr { color: var(--color-bone); }
.tc.lead .wbar em { color: var(--color-h2c); }
.tc.lead .tc-foot .val { color: var(--color-bone); }
.tc.lead .tc-foot { border-top-color: var(--color-rule); }

/* ---------- арт ----------
   Иконка НЕ растягивается на всю ширину, и это главное решение здесь.

   Замер 26 августа: у шести участников корзины иконки пришли размерами
   350, 640, 720, 800, 800 и пятьдесят. Растянутые на карточку пятьдесят
   пикселей — каша, и из-за одной такой весь ряд выглядит сломанным. Чужие
   картинки приходят какие есть, править их размер мы не можем.

   Поэтому иконка стоит медальоном постоянного размера: крупные ужимаются
   и остаются чёткими, мелкие увеличиваются от силы вдвое. Ряд выглядит
   ровным независимо от того, кто попал в корзину.

   Панель стала выше (было 1 / .46): на низкой карточка выглядела строкой
   таблицы с картинкой, а не карточкой. */
.tc-art {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 1 / .78;
  margin: 0 0 .7rem;
  overflow: hidden;
  border-radius: 7px;
  background-color: var(--color-block-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-bone) 5%, transparent);
}

/* Уголки — тот же приём, что у заголовков секций на всей странице.
   Четыре штуки одним псевдоэлементом: четыре градиента по углам. */
.tc-art::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  background:
    linear-gradient(var(--color-rule-2) 0 0) 0 0 / 8px 1px,
    linear-gradient(var(--color-rule-2) 0 0) 0 0 / 1px 8px,
    linear-gradient(var(--color-rule-2) 0 0) 100% 0 / 8px 1px,
    linear-gradient(var(--color-rule-2) 0 0) 100% 0 / 1px 8px,
    linear-gradient(var(--color-rule-2) 0 0) 0 100% / 8px 1px,
    linear-gradient(var(--color-rule-2) 0 0) 0 100% / 1px 8px,
    linear-gradient(var(--color-rule-2) 0 0) 100% 100% / 8px 1px,
    linear-gradient(var(--color-rule-2) 0 0) 100% 100% / 1px 8px;
  background-repeat: no-repeat;
  opacity: .8;
}


/* Наш знак — на месте медальона, того же размера. */
.tc-art-in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-rule-2);
}

.tc-art-in svg {
  width: 46px;
  height: auto;
}

/* Медальон. Размер постоянный, форма круглая, кадрируется по центру.

   Подложка светлее фона и кольцо по краю — потому что иконки приходят
   какие есть: у CASHCAT она почти чёрная и на тёмной подложке читалась
   дырой в карточке, а не монетой. Кольцо очерчивает круг независимо от
   того, что внутри, и тёмная иконка перестаёт сливаться с фоном. */
/* Скруглённый квадрат, а не медальон, и в долях от карточки, а не в
   пикселях: на узкой карточке фиксированные девяносто шесть пикселей
   выглядели маркой, на широкой терялись. Доля держит один и тот же вид
   на любой ширине.

   Квадрат берёт заметно больше площади, чем круг того же размера, — при
   том же поле вокруг иконка читается крупнее и деталь на ней видно. */
.tc-art img {
  position: relative;
  z-index: 1;
  width: 62%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 18%;
  object-fit: cover;
  background: var(--color-block);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-bone) 14%, transparent),
    0 0 0 5px color-mix(in srgb, var(--color-ink) 62%, transparent),
    0 12px 26px -8px #000,
    0 0 26px color-mix(in srgb, var(--color-neon) 16%, transparent);
  opacity: 0;
  animation: tc-art-in .28s ease forwards;
}

@keyframes tc-art-in { to { opacity: 1; } }

/* Когда иконка загрузилась, знак под ней не нужен: он просвечивал бы по
   краям у картинок с прозрачным фоном. */
.tc-art.has-icon .tc-art-in { opacity: 0; }

@media (hover: hover) {
  .tc:hover .tc-art img { transform: scale(1.05); transition: transform .3s; }
}


.tc.waiting .tc-art { opacity: .35; }

/* ---------- номер места ----------
   Лежит на арте, а не под ним: в карточке номер — это её порядковый знак,
   и место ему в углу картинки.

   Там же, где у лутбокса стояла бы редкость. Слово «seat» дописано стилем,
   а не разметкой: подставляет номер app.js, и лезть туда ради подписи
   значит держать текст в двух местах.

   Читается как «первое из шести», а не «01» неизвестно из скольких.
   Знаменатель подставляет app.js из MODEL.seats: вписанная сюда шестёрка
   пережила бы смену размера корзины и молча соврала бы. */
.tc-top .rk {
  position: absolute;
  top: .6rem;
  right: .7rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-h2c);
  background: color-mix(in srgb, var(--color-ink) 82%, transparent);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid var(--color-rule);
  padding: .2rem .42rem;
  border-radius: 999px;
}

.tc-top .rk b { color: var(--color-neon); font-weight: 500; }

/* Номер у первого места чуть ярче — единственное, чем он теперь отличается.
   Это тот же язык, что и у остальных карточек: ранг говорит номер. */
.tc.lead .tc-top .rk { color: var(--color-bone); }

/* Шапка карточки идёт под артом, и маленький значок в ней больше не нужен:
   он теперь в арте, крупно. Два одинаковых знака рядом — шум. */
.tc-top {
  position: static;
  gap: .4rem;
}

.tc-top .sv { display: none; }

.tc-top b {
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  letter-spacing: -.02em;
}

/* ---------- цена ---------- */
.tc .nm { margin-top: -.25rem; font-size: .58rem; }

.tc .pr {
  font-size: .92rem;
  color: var(--color-bone);
  margin-top: .2rem;
}

.tc .ch { font-size: .66rem; }

/* Спарклайн — единственная история цены, которая у нас есть.
   Прижат вниз: цена и изменение держатся вверху, подвал — у нижнего края,
   а пустота собирается в одном месте, а не растекается по карточке. */
.tc .spark {
  height: 40px;
  margin-top: auto;
}

/* ---------- подвал карточки ----------
   Два показателя, и они нарочно разного веса.

   Крупно — глубина: ликвидность пула это ровно то, за что место в корзине
   и дано, и она же единственная характеристика, которой места отличаются
   друг от друга. У игральной карты на этом месте стояло бы число атаки.

   Мелко и одинаково на всех шести — доля. Она у всех равная, и повторённое
   шесть раз одно и то же число говорит это громче любой полосы. */
.tc-foot {
  padding-top: .6rem;
  gap: .45rem;
  align-items: flex-end;
  font-size: .56rem;
}

.tc-foot .val {
  color: var(--color-bone);
  font-size: .95rem;
  letter-spacing: -.01em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin-left: auto;
}

.tc-foot .val::before {
  content: "depth";
  display: block;
  font-size: .5rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-dim);
  margin-bottom: .1rem;
}

/* Доля — вторым показателем той же формы, что и глубина. Так они читаются
   парой: слева то, что у всех одинаковое, справа то, чем места отличаются.

   Полоса убрана совсем. Она заполнялась на 16,67% от дорожки шириной в
   двадцать четыре пикселя — то есть на четыре пикселя, и выглядела мусором
   у нижнего края. Полоса нужна там, где сравнивают длины; здесь сравнивать
   нечего, все шесть равны, и об этом лучше говорит повторённое шесть раз
   одно и то же число. Узел оставлен: app.js пишет в него ширину. */
.tc-foot .wbar {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  text-align: left;
}

.tc-foot .wbar .t { display: none; }

.tc-foot .wbar::before {
  content: "weight";
  display: block;
  font-size: .5rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-dim);
  margin-bottom: .1rem;
}

.tc-foot .wbar em {
  display: block;
  width: auto;
  text-align: left;
  font-size: .95rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--color-h2c);
  font-variant-numeric: tabular-nums;
}

/* ---------- пустое место ----------
   Пока корзина не прочиталась, карточка не исчезает, а честно говорит,
   что читается. Пропавшая карточка выглядит как «их пять», и это первое,
   что человек замечает на сайте с шестёркой в названии. */
.tc.waiting .tc-top b,
.tc.waiting .pr,
.tc.waiting .ch,
.tc.waiting .nm { color: var(--color-rule-2); }

.tc.waiting .spark { opacity: .25; }
.tc.waiting .tc-foot .val::before { opacity: .4; }

/* =========================================================================
   Мини-карточки в разборе под калькулятором.

   «Your slice, token by token» — это та же корзина, что и шесть больших
   карточек выше, только про твою долю. Значит и выглядеть строки должны
   роднёй тем карточкам, а не строками таблицы: своя рамка, своя матрица,
   настоящая иконка монеты.

   Иконку ставит setRowIcon в app.js. Наш знак лежит под ней и остаётся
   виден, если картинка не загрузилась.
   ========================================================================= */

.crow {
  grid-template-columns: 2.1rem minmax(0, 1fr) 4.4rem 5rem;
  gap: .7rem;
  align-items: center;
  padding: .5rem .7rem;
  margin-bottom: .35rem;
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  background-color: var(--color-ink);
  transition: border-color .16s, transform .16s;
}

.crow:last-child { border-bottom: 1px solid var(--color-rule); margin-bottom: 0; }

@media (hover: hover) {
  .crow:hover {
    border-color: color-mix(in srgb, var(--color-neon) 35%, var(--color-rule));
    transform: translateX(2px);
  }
}

/* Медальон строки — тот же скруглённый квадрат, что и на больших
   карточках, только маленький. Одна форма на двух размерах читается как
   одна система, а не два разных решения. */
.crow .sv {
  position: relative;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 26%;
  overflow: hidden;
  background: var(--color-block-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-bone) 8%, transparent);
  align-items: center;
  justify-content: center;
}

.crow .sv svg { width: 58%; height: auto; }

.crow .sv img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Знак прячется, только когда картинка легла: пустая рамка вместо иконки
   выглядит как поломка вёрстки, а не как «иконки нет». */
.crow .sv.has-icon svg { opacity: 0; }

.crow b { font-size: .92rem; }
.crow .q { font-size: .66rem; }
.crow .d { font-size: .72rem; }

@media (max-width: 520px) {
  .crow { grid-template-columns: 1.8rem minmax(0, 1fr) 3.6rem 4.2rem; gap: .5rem; }
  .crow .sv { width: 1.8rem; height: 1.8rem; }
}

/* =========================================================================
   ОКНО С ИКОНКОЙ — В ЦВЕТЕ САМОГО ТОКЕНА

   Окно под иконкой красится в цвет самого токена, уведённый в тень. Он не вписан и не
   хранится: состав корзины меняется каждые три часа, поэтому цвет
   измеряется по иконке при отрисовке — как именно, написано в app.js.
   Светлота задана здесь, а не взята у иконки: рядом с тёмной карточкой
   светящееся окно выглядело бы дырой.

   Так окно читается отдельным предметом, вставленным в карточку, а не
   продолжением её поверхности.

   Три класса в селекторе — так правило уверенно побеждает по весу общее
   правило окна выше, и порядок строк в файле на это не влияет.
   ========================================================================= */
.tc.has-tone .tc-art {
  background-image:
    /* Свет сверху — тем же цветом, только светлее: окно выглядит
       освещённым, а не залитым краской. */
    radial-gradient(118% 116% at 50% -6%,
      var(--tone-hi) 0%, transparent 68%),
    /* Тень снизу собирает внимание к иконке. */
    radial-gradient(128% 108% at 50% 104%,
      color-mix(in srgb, #000 58%, transparent) 0%, transparent 62%);
  background-color: var(--tone);
  transition: background-color .35s ease;
}

/* Уголки на цветном фоне тонут — поднимаем их до кости. */
.tc.has-tone .tc-art::after {
  opacity: .55;
  background-image:
    linear-gradient(var(--color-bone) 0 0), linear-gradient(var(--color-bone) 0 0),
    linear-gradient(var(--color-bone) 0 0), linear-gradient(var(--color-bone) 0 0),
    linear-gradient(var(--color-bone) 0 0), linear-gradient(var(--color-bone) 0 0),
    linear-gradient(var(--color-bone) 0 0), linear-gradient(var(--color-bone) 0 0);
}


/* =========================================================================
   ФОЛЬГА — вид карточек по умолчанию

   Сделано по разбору исходников usepackd.xyz, а не по впечатлению от
   скриншота. Что там на самом деле:

     .holo-frame  оправа в 5 пикселей, и вся красота живёт именно в ней —
                  конический градиент из светлых и тёмных граней, две
                  встречные штриховки под ±45° с шагом 3 пикселя, цветные
                  пятна акцентом, концентрические кольца и тёмная основа
                  linear-gradient(135deg, #0C0F03 → #000 → #161A07 → #000);
     ::before     бегущий белый блик, 3.4 секунды, background-size 260%;
     ::after      россыпь точек-искр по полю оправы;
     .holo-inner  а вот сама подложка — ПРОСТО тёмный радиальный градиент
                  radial-gradient(120% 95% at 50% 0%, #16161d, #0a0a0e 58%,
                  #000) и две внутренние подсветки. Никакой фактуры.

   Отсюда главный вывод, ради которого стоило лезть в исходник: «красивый
   фон» у них — это НЕ узор на подложке. Подложка почти чёрная и пустая.
   Работает оправа. Любая фактура на поле карточки спорит с тем, что на ней
   написано, — гравюра ровно этим и мешала.

   Что взято, а что нет. Взяты приёмы: фольгированная оправа, бегущий блик,
   чистая тёмная подложка, мягкая тень под карточкой. Не взяты их цвета и
   градиенты один в один — у нас пятнадцать тем и свой акцент, поэтому всё
   строится от var(--color-neon). Копия чужой палитры развалилась бы на
   первой же смене темы.
   ========================================================================= */

/* ---------- подложка: чистая, без узора ---------- */
.tc {
  background-image:
    radial-gradient(120% 95% at 50% 0%,
      color-mix(in srgb, var(--color-block) 55%, var(--color-ink)) 0%,
      var(--color-ink) 58%,
      #000 100%);
  background-color: var(--color-ink);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-bone) 14%, transparent),
    inset 0 0 22px rgba(0, 0, 0, .55),
    0 10px 26px -14px #000;
}

/* ---------- оправа ----------
   Псевдоэлемент, а не border: border сдвинул бы содержимое на два пикселя,
   и вся сетка дёргалась бы при наведении. Маска xor вырезает середину, и
   от слоя остаётся только рамка.

   Ширина 2 пикселя, а не пять как у них: их карточка 214 пикселей в высоту
   при пропорции 5:7, наша — широкая и низкая, и пятипиксельная оправа на
   ней читается бортиком коробки, а не кромкой карты. */
.tc::after {
  opacity: 1;                          /* всегда, а не только при наведении */
  padding: 2px;
  background:
    /* 1. Бегущий блик. Он же единственный слой, который двигается, поэтому
          стоит первым: анимируется список background-position, и остальным
          слоям задан неподвижный 0 0. */
    linear-gradient(115deg,
      transparent 40%,
      color-mix(in srgb, var(--color-bone) 55%, transparent) 50%,
      transparent 60%),
    /* 2. Грани фольги. Конический градиент — то, что даёт фольге её
          «поворот к свету»: восемь чередующихся светлых и тёмных секторов
          вокруг центра. */
    conic-gradient(from 45deg at 50% 50%,
      rgba(255,255,255,.18) 0deg,  rgba(255,255,255,.02) 44deg,
      rgba(0,0,0,.45) 46deg,       rgba(0,0,0,.05) 89deg,
      rgba(255,255,255,.22) 91deg, rgba(255,255,255,.02) 134deg,
      rgba(0,0,0,.40) 136deg,      rgba(0,0,0,.05) 179deg,
      rgba(255,255,255,.14) 181deg,rgba(255,255,255,.02) 224deg,
      rgba(0,0,0,.40) 226deg,      rgba(0,0,0,.05) 269deg,
      rgba(255,255,255,.20) 271deg,rgba(255,255,255,.02) 314deg,
      rgba(0,0,0,.42) 316deg,      rgba(0,0,0,.05) 360deg),
    /* 3. Две встречные штриховки с шагом 3 пикселя. Это не фактура поля —
          она живёт только внутри оправы и читается зерном металла. */
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.14) 0 .6px, transparent .6px 3px,
      rgba(0,0,0,.35) 3px 3.6px,    transparent 3.6px 6px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.12) 0 .6px, transparent .6px 3px,
      rgba(0,0,0,.30) 3px 3.6px,    transparent 3.6px 6px),
    /* 4. Цветные пятна — здесь акцентом темы, а не их лаймом. */
    radial-gradient(55% 40% at 18% 22%,
      color-mix(in srgb, var(--color-neon) 30%, transparent), transparent 62%),
    radial-gradient(50% 42% at 72% 78%,
      color-mix(in srgb, var(--color-neon) 22%, transparent), transparent 60%),
    /* 5. Концентрические кольца — дифракция на фольге. */
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 3.5px, rgba(255,255,255,.055) 3.5px 4px),
    /* 6. Тёмная основа: без неё все прозрачные слои легли бы на подложку
          карточки и оправа пропала бы. */
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-neon) 8%, #000) 0%,
      #000 20%, #000 40%,
      color-mix(in srgb, var(--color-neon) 14%, #000) 55%,
      #000 72%, #000 88%,
      color-mix(in srgb, var(--color-neon) 8%, #000) 100%);
  background-size: 260% 100%, auto, auto, auto, auto, auto, auto, auto;
  background-position: 130% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  animation: tc-foil 3.4s ease-in-out infinite;
}

@keyframes tc-foil {
  from { background-position: 130% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: -30% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

/* Наведение усиливает оправу, а не зажигает её: она и так горит. */
@media (hover: hover) {
  .tc:hover::after { padding: 3px; }
}

/* Бегущий блик — это движение. Кому оно мешает, тому оправа остаётся
   неподвижной: сама фольга при этом никуда не девается. */
@media (prefers-reduced-motion: reduce) {
  .tc::after { animation: none; background-position: 50% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

/* ---------- разбор «your slice»: никакой фактуры ----------
   Строки разбора — это таблица, а не предметы. Фактура делает поверхность,
   а у строки поверхности нет: есть только выравнивание по столбцам.
   Остаётся ровный тон и линия между строками. */
.crow {
  background-image: none;
  background-color: transparent;
}

.crow:hover {
  background-color: color-mix(in srgb, var(--color-bone) 3%, transparent);
}