/* ============================================================
   ВИД КОСМЕТИКИ — единственное место, где он живёт.

   Классы собирает shared/domain/cosmetics/art.js (`artClasses`), а раскладка
   слоёв одна на всё приложение: рубашка за столом, образец в витрине и превью
   в примерочной — это ОДНА и та же разметка, отличается только размер.

   Слой красит `.cbk` — отдельный span ВНУТРИ карты, а не сама карта:
     .pc.back > .cbk        карта на сукне (её `animation` занята раздачей)
     .cbk                   образец в витрине / примерочной
   Внутри `.cbk` три уровня:
     background   — гравюра (.pat-*) на палитре (--c1/--c2)
     ::before     — уголки каймы (.edge-corners)
     ::after      — отделка (.fin-*) и блик (.mo-sheen)
     > .emb       — герб
   Кайма-контур и срез — box-shadow / clip-path на самом `.cbk`.

   ПОЧЕМУ ОТДЕЛЬНЫЙ SPAN, А НЕ САМА КАРТА: у `.pc` уже заняты и `animation`
   (deal / reveal), и `::after`. Красить карту напрямую значило бы отнять
   у раздачи анимацию — молча и в самом заметном месте.

   Подключать ПОСЛЕ base.css: там у `.pc.back` осталась только геометрия.
   ============================================================ */

/* ── база слоя ────────────────────────────────────────────────────────────── */
/* Слой всегда растягивается на хозяина, поэтому хозяин обязан быть
   позиционированным и иметь размер: `.pc.back` на сукне, `.sw-back` в витрине,
   `.ins-back` в карточке предмета. */
.cbk{
  --c1:#6C4BFF; --c2:#2A1560;
  --ink:rgba(255,255,255,.17); --ink2:rgba(255,255,255,.10);
  --glow:rgba(139,123,255,.7);
  position:absolute;inset:0;overflow:hidden;isolation:isolate;
  border-radius:inherit;
  background:linear-gradient(155deg,var(--c1),var(--c2));
}
.cbk::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3}
/* Герб масштабируется от размера хозяина: --emb задаёт хозяин (карта, образец,
   карточка предмета), потому что сам слой размера не знает. */
.cbk > .emb{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  font-size:var(--emb,16px);line-height:1;font-style:normal;
}

/* Тон гравюры. Светлая — по тёмной базе, тёмная — по золоту и бирюзе. */
.ink-light{--ink:rgba(255,255,255,.17);--ink2:rgba(255,255,255,.10)}
.ink-dark{--ink:rgba(0,0,0,.20);--ink2:rgba(255,255,255,.22)}

/* ── гравюры ──────────────────────────────────────────────────────────────── */
.pat-plain{background:linear-gradient(155deg,var(--c1),var(--c2))}
.pat-guilloche{background:
  repeating-radial-gradient(circle at 50% 44%, transparent 0 2.4px, var(--ink) 2.4px 3.1px),
  repeating-radial-gradient(circle at 24% 74%, transparent 0 3.4px, var(--ink2) 3.4px 4.2px),
  linear-gradient(155deg,var(--c1),var(--c2))}
.pat-moire{background:
  repeating-linear-gradient(43deg, transparent 0 2px, var(--ink) 2px 3px),
  repeating-linear-gradient(-47deg, transparent 0 2px, var(--ink2) 2px 3px),
  linear-gradient(155deg,var(--c1),var(--c2))}
.pat-scales{background:
  radial-gradient(circle at 50% 100%, var(--ink) 0 46%, transparent 47%),
  radial-gradient(circle at 50% 100%, var(--ink2) 0 46%, transparent 47%),
  linear-gradient(155deg,var(--c1),var(--c2));
  background-size:15px 9px,15px 9px,100% 100%;
  background-position:0 0,7.5px 4.5px,0 0}
.pat-fan{background:
  repeating-conic-gradient(from 202deg at 50% 122%, var(--ink) 0 1.6deg, transparent 1.6deg 5deg),
  linear-gradient(155deg,var(--c1),var(--c2))}
.pat-carbon{background:
  repeating-linear-gradient(45deg, var(--ink) 0 3px, transparent 3px 6px),
  repeating-linear-gradient(135deg, var(--ink2) 0 3px, transparent 3px 6px),
  linear-gradient(155deg,var(--c1),var(--c2))}
.pat-lattice{background:
  repeating-linear-gradient(45deg, transparent 0 7px, var(--ink) 7px 8px),
  repeating-linear-gradient(-45deg, transparent 0 7px, var(--ink) 7px 8px),
  linear-gradient(155deg,var(--c1),var(--c2))}
.pat-stripe{background:
  repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 4px),
  linear-gradient(155deg,var(--c1),var(--c2))}
.pat-pips{background:
  radial-gradient(circle, var(--ink) 0 1.4px, transparent 1.7px),
  linear-gradient(155deg,var(--c1),var(--c2));
  background-size:10px 10px,100% 100%}
.pat-circuit{background:
  radial-gradient(circle at 50% 50%, var(--ink) 0 1.7px, transparent 1.8px),
  repeating-linear-gradient(0deg, var(--ink2) 0 1px, transparent 1px 10px),
  repeating-linear-gradient(90deg, var(--ink2) 0 1px, transparent 1px 10px),
  linear-gradient(155deg,var(--c1),var(--c2));
  background-size:20px 20px,100% 100%,100% 100%,100% 100%}
.pat-wave{background:
  repeating-radial-gradient(ellipse 70% 34% at 50% -4%, transparent 0 4px, var(--ink) 4px 5.2px),
  linear-gradient(155deg,var(--c1),var(--c2))}

/* ── отделки ──────────────────────────────────────────────────────────────── */
.fin-matte::after{display:none}
.fin-enamel::after{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.03) 40%,transparent 58%)}
.fin-foil::after{background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.62) 45%,rgba(255,255,255,.06) 56%,transparent 68%);mix-blend-mode:screen}
.fin-holo::after{inset:-46%;border-radius:0;background:conic-gradient(from 200deg,#FF4D8D,#FFC24B,#2DE2C5,#6C4BFF,#FF4D8D);opacity:.44;mix-blend-mode:overlay}
.fin-velvet::after{background:radial-gradient(120% 80% at 50% -12%,rgba(255,255,255,.18),transparent 56%);box-shadow:inset 0 0 22px rgba(0,0,0,.6)}
.fin-frost::after{background:
  linear-gradient(160deg,rgba(255,255,255,.18),transparent 44%),
  repeating-linear-gradient(70deg,rgba(255,255,255,.055) 0 1px,transparent 1px 3px)}

/* ── каймы ────────────────────────────────────────────────────────────────── */
/* На 22 пикселях чужой карты гравюра уже не читается, а силуэт края — да.
   Поэтому кайма отвечает за «дорого» на дистанции. */
.edge-hair{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.edge-double{box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.30),
  inset 0 0 0 4px rgba(0,0,0,.30),
  inset 0 0 0 5px rgba(255,255,255,.16)}
.edge-corners{box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)}
.edge-corners::before{
  content:'';position:absolute;inset:6%;z-index:2;pointer-events:none;opacity:.85;
  --b:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85));
  --l:14%;
  background:
    var(--b) 0 0/var(--l) 1px no-repeat, var(--b) 0 0/1px var(--l) no-repeat,
    var(--b) 100% 0/var(--l) 1px no-repeat, var(--b) 100% 0/1px var(--l) no-repeat,
    var(--b) 0 100%/var(--l) 1px no-repeat, var(--b) 0 100%/1px var(--l) no-repeat,
    var(--b) 100% 100%/var(--l) 1px no-repeat, var(--b) 100% 100%/1px var(--l) no-repeat;
}
.edge-notch{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
  clip-path:polygon(14% 0,86% 0,100% 9%,100% 91%,86% 100%,14% 100%,0 91%,0 9%);
}

/* ── герб ─────────────────────────────────────────────────────────────────── */
.emb-engrave{color:rgba(0,0,0,.44);text-shadow:0 1px 0 rgba(255,255,255,.24)}
.emb-foil{
  background:linear-gradient(135deg,#fff6d4,#FFC24B 38%,#9d6200 68%,#ffeab4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55));
}
.emb-cut{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}

/* ── движение ─────────────────────────────────────────────────────────────── */
/* Блик и дыхание живут на ::after и на самом слое `.cbk` — у карты (`.pc`)
   анимация занята раздачей, отнимать её нельзя. */
.mo-sheen::after{background-size:300% 100%;animation:cbk-sheen 3.8s linear infinite}
.fin-holo.mo-sheen::after{background-size:auto;animation:cbk-holo 7s linear infinite}
.mo-drift{animation:cbk-drift 16s linear infinite}
.mo-breathe::after{animation:cbk-breathe 3.4s ease-in-out infinite}
@keyframes cbk-sheen{0%{background-position:190% 0}100%{background-position:-90% 0}}
@keyframes cbk-holo{to{transform:rotate(360deg)}}
@keyframes cbk-drift{to{background-position:24px 24px,-22px 16px,0 0}}
@keyframes cbk-breathe{0%,100%{box-shadow:none}50%{box-shadow:inset 0 0 14px var(--glow)}}

/* ── рамка аватара ────────────────────────────────────────────────────────── */
/* Кольцо — маскированная полоса ВОКРУГ портрета, поэтому оно его не закрывает.
   Значения приходят инлайном: --ring (цвет/градиент), --glow (гало). */
.avbox{position:relative;width:46px;height:46px;margin:0 auto}
.avbox .av{width:46px;height:46px;margin:0;border-radius:50%;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#7C5CFF,#B14BFF)}
.avbox .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.avbox .frm{position:absolute;inset:-4px;border-radius:50%;background:var(--ring);
  -webkit-mask:radial-gradient(transparent 21px,#000 22px);mask:radial-gradient(transparent 21px,#000 22px);
  pointer-events:none;z-index:1;filter:drop-shadow(0 0 6px var(--glow,transparent))}
.avbox .frm.mo-spin{animation:frm-spin 4.5s linear infinite}
.avbox .frm.mo-breathe{animation:frm-breathe 3.2s ease-in-out infinite}
@keyframes frm-spin{to{transform:rotate(360deg)}}
@keyframes frm-breathe{0%,100%{filter:drop-shadow(0 0 4px var(--glow,transparent))}
  50%{filter:drop-shadow(0 0 11px var(--glow,transparent))}}

/* ── титул и плашка имени ─────────────────────────────────────────────────── */
.seat .info .ttl{font-family:'Rajdhani';font-weight:700;font-size:8px;letter-spacing:.7px;
  text-transform:uppercase;line-height:1.1;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── аура собранного сета ─────────────────────────────────────────────────── */
/* Сет что-то значит только когда он НАДЕТ целиком: место получает подсветку
   и подпись. Ключ и акцент приходят из каталога (SETS). */
.seat.set-on .avbox::after,.myseat.set-on .avbox::after{
  content:'';position:absolute;inset:-9px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,var(--set-accent,#FF4D8D),transparent 70%);
  opacity:.3;animation:set-aura 3s ease-in-out infinite;
}
@keyframes set-aura{0%,100%{opacity:.22;transform:scale(.96)}50%{opacity:.42;transform:scale(1.04)}}
.set-tag{font-family:'Rajdhani';font-weight:700;font-size:8px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--set-accent,#FF4D8D)}

@media (prefers-reduced-motion:reduce){
  .cbk,.cbk::after,.avbox .frm,.seat.set-on .avbox::after{animation:none!important}
}