/* rarity.css — всё, что помогает почувствовать редкость:
 * декали стилей, конфетти, экран выпадения, коллекция по уровням.
 * Подключается после style.css. */

/* ═══════════ Декали: свой орнамент у каждого стиля ═══════════
 * --decal наследуется: достаточно data-r на билете/сертификате или класса skin-* на карточке.
 * \FE0E — «рисуй символ текстом»: иначе iPhone подменит его цветным эмодзи. */
[data-r="common"],          .skin-common          { --decal: '\25C7'; }        /* ◇ */
[data-r="common-white"],    .skin-common-white    { --decal: '\25CB'; }        /* ○ */
[data-r="uncommon"],        .skin-uncommon        { --decal: '\2766'; }        /* ❦ */
[data-r="uncommon-lime"],   .skin-uncommon-lime   { --decal: '\273F'; }        /* ✿ */
[data-r="rare"],            .skin-rare            { --decal: '\25C6'; }        /* ◆ */
[data-r="rare-azure"],      .skin-rare-azure      { --decal: '\2744\FE0E'; }   /* ❄ */
[data-r="epic"],            .skin-epic            { --decal: '\2726'; }        /* ✦ */
[data-r="epic-violet"],     .skin-epic-violet     { --decal: '\263E\FE0E'; }   /* ☾ */
[data-r="legendary"],       .skin-legendary       { --decal: '\265B\FE0E'; }   /* ♛ */
[data-r="legendary-amber"], .skin-legendary-amber { --decal: '\2600\FE0E'; }   /* ☀ */
[data-r="mythic"],          .skin-mythic          { --decal: '\2737'; }        /* ✷ */
[data-r="mythic-void"],     .skin-mythic-void     { --decal: '\2739'; }        /* ✹ */

/* Уголки билетов: у всех стилей, включая обычные (раньше у обычных их не было,
 * а у легендарных и «пустоты» не работали из-за опечатки в селекторе) */
.ticket[data-r] .tk-corner { display: flex; }
.ticket[data-r] .tk-corner > span::before { content: var(--decal); }
.ticket[data-r^="common"] .tk-corner { opacity: .45; font-size: 22px; }

/* Печать сертификата несёт декаль стиля — только на лицевой стороне */
.cert-front .cert-content::after { content: var(--decal, '\2726'); }
.cert-back-content::before,
.cert-back-content::after { display: none; }

/* ═══════════ Конфетти ═══════════ */
.fx-layer {
  position: fixed; inset: 0;
  pointer-events: none; overflow: hidden;
  z-index: 10000;
}
.fx-p {
  position: absolute; top: -24px;
  display: block; line-height: 1;
  will-change: transform, opacity;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
/* Формы */
.fx-paper { background: var(--c); border-radius: 2px; }
.fx-coin {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8d0, var(--c) 45%, color-mix(in srgb, var(--c) 60%, #5a3000));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 70%, #5a3000);
}
.fx-ember {
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 6px 2px var(--c), 0 0 14px 4px color-mix(in srgb, var(--c) 50%, transparent);
}
.fx-shard {
  background: var(--c);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow: 0 0 10px var(--c);
}
.fx-glyph { font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', serif; }
.fx-drift.fx-glyph, .fx-burst.fx-glyph { text-shadow: 0 0 8px currentColor; }

/* Движение */
.fx-fall { animation-name: fx-fall; }
@keyframes fx-fall {
  to { transform: translate(var(--dx), 112vh) rotate(var(--rot)); }
}

.fx-flutter { animation-name: fx-flutter; animation-timing-function: ease-in-out; }
@keyframes fx-flutter {
  0%   { transform: translate(0, 0) rotate(0); }
  25%  { transform: translate(var(--dx), 28vh) rotate(calc(var(--rot) * .25)); }
  50%  { transform: translate(calc(var(--dx) * -1), 56vh) rotate(calc(var(--rot) * .5)); }
  75%  { transform: translate(var(--dx), 84vh) rotate(calc(var(--rot) * .75)); }
  100% { transform: translate(0, 112vh) rotate(var(--rot)); }
}

.fx-drift { animation-name: fx-drift; }
@keyframes fx-drift {
  0%   { transform: translate(0, 0) rotate(0) scale(.6); opacity: 0; }
  10%  { opacity: 1; }
  45%  { opacity: .55; }
  55%  { opacity: 1; transform: translate(calc(var(--dx) * .5), 55vh) rotate(calc(var(--rot) * .3)) scale(1.15); }
  100% { transform: translate(var(--dx), 110vh) rotate(calc(var(--rot) * .5)) scale(.8); opacity: .2; }
}

.fx-burst {
  top: 42vh; left: 50vw;
  animation-name: fx-burst;
  animation-timing-function: cubic-bezier(.15, .7, .3, 1);
}
@keyframes fx-burst {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.1) rotate(var(--rot)); opacity: 0; }
}

.fx-rain { animation-name: fx-rain; animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
@keyframes fx-rain {
  0%   { transform: translate(0, 0) rotateY(0); }
  100% { transform: translate(calc(var(--dx) * .4), 112vh) rotateY(1080deg); }
}

.fx-rise {
  top: auto; bottom: -20px;
  animation-name: fx-rise;
  animation-timing-function: cubic-bezier(.3, .6, .5, 1);
}
@keyframes fx-rise {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(var(--dx), -50vh) scale(.9); }
  100% { transform: translate(calc(var(--dx) * -.5), -105vh) scale(.3); opacity: 0; }
}

/* Тряска при мифическом выпадении */
.fx-shake body { animation: fx-shake .6s cubic-bezier(.36, .07, .19, .97); }
@keyframes fx-shake {
  10%, 90% { transform: translate(-1px, 0); }
  20%, 80% { transform: translate(3px, 1px); }
  30%, 50%, 70% { transform: translate(-6px, -1px); }
  40%, 60% { transform: translate(6px, 1px); }
}

/* ═══════════ Экран выпадения ═══════════ */
.drop-ovl {
  --glow: rgba(255, 255, 255, .5);
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(8, 6, 16, .86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s;
  overflow: hidden;
}
.drop-ovl.show { opacity: 1; }
.drop-ovl.closing { opacity: 0; }
.drop-ovl.tier-rare      { --glow: rgba(90, 160, 255, .55); --btn: #3f86e0; --btn-t: #fff;    --tier-size: 1.2rem; }
.drop-ovl.tier-epic      { --glow: rgba(200, 130, 255, .65); --btn: #b06ef0; --btn-t: #fff;    --tier-size: 1.35rem; background: rgba(20, 6, 40, .9); }
.drop-ovl.tier-legendary { --glow: rgba(255, 200, 60, .75);  --btn: #f0b020; --btn-t: #2a1600; --tier-size: 1.55rem; background: rgba(30, 16, 0, .92); }
.drop-ovl.tier-mythic    { --glow: rgba(255, 40, 60, .8);    --btn: #ff3048; --btn-t: #fff;    --tier-size: 1.8rem;
                           background: radial-gradient(circle at 50% 55%, rgba(60, 0, 8, .92), #000 75%); }

.drop-card {
  position: relative; z-index: 2;
  width: min(100%, 340px);
  text-align: center; color: #fff;
  transform: scale(.85); opacity: 0;
  transition: transform .5s cubic-bezier(.2, 1.4, .4, 1), opacity .3s;
}
.drop-ovl.show .drop-card { transform: none; opacity: 1; }
.drop-ovl.tier-mythic .drop-card { transition-delay: .3s; transition-duration: .8s; }

.drop-tier {
  margin: 0 0 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--tier-size, 1.2rem); font-weight: 700; font-style: italic;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 0 18px var(--glow);
}
.drop-item.skin-card {
  position: relative;
  width: 168px; height: 168px; margin: 0 auto 18px;
  padding: 0; border-radius: 28px; border-width: 3px;
  display: grid; place-items: center;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 0 60px 10px var(--glow);
  cursor: default;
}
.drop-item .drop-decal {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 140px; line-height: 1;
  opacity: .16;
}
.drop-item .drop-icon { position: relative; font-size: 72px; line-height: 1; }
.drop-name {
  margin: 0 0 8px;
  font-size: 1.9rem; line-height: 1.15;
  color: #fff;
}
.drop-meta { margin: 0 0 22px; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.drop-btns { display: flex; gap: 12px; }
.drop-btns button { flex: 1; }
.drop-btns .cancel { background: rgba(255, 255, 255, .14); color: #fff; }
.drop-btns [data-act="equip"] { background: var(--btn); color: var(--btn-t); box-shadow: 0 6px 24px var(--glow); }

/* Легендарный и мифический: вращающиеся лучи за карточкой */
.drop-rays {
  position: absolute; z-index: 1;
  width: 160vmax; height: 160vmax;
  left: 50%; top: 50%;
  margin: -80vmax 0 0 -80vmax;
  opacity: 0; pointer-events: none;
}
.tier-legendary .drop-rays,
.tier-mythic .drop-rays {
  opacity: .5;
  background: repeating-conic-gradient(from 0deg, var(--glow) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 45%);
          mask-image: radial-gradient(circle, #000 0, transparent 45%);
  animation: drop-rays 14s linear infinite;
}
.tier-mythic .drop-rays { opacity: .35; animation-duration: 6s; }
@keyframes drop-rays { to { transform: rotate(360deg); } }

/* Эпический и выше: вспышка в момент появления */
.drop-ovl.tier-epic::after,
.drop-ovl.tier-legendary::after,
.drop-ovl.tier-mythic::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background: var(--glow); pointer-events: none;
  animation: drop-flash .6s ease-out forwards;
}
@keyframes drop-flash { from { opacity: .9; } to { opacity: 0; } }

/* ═══════════ Рулетка ═══════════ */
.case-item {
  font-size: .78rem; line-height: 1.25;
  letter-spacing: 0; text-transform: none;
  font-weight: 700;
  padding: 10px 8px;
  text-align: center;
  overflow-wrap: normal; word-break: normal; /* слова целиком, перенос только между ними */
  position: relative;
}
@media (max-width: 480px) {
  .case-item { width: 116px; height: 116px; font-size: .74rem; padding: 8px 6px; }
}
.case-item .ci-tier {
  display: block; margin-top: 2px;
  font-size: .7rem; font-weight: 600; opacity: .8;
}
/* Полоса цвета уровня внизу карточки: редкость видна ещё до остановки */
.case-item::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 6px;
  height: 4px; border-radius: 2px;
  background: var(--tier-c, #a8a098);
}

/* Уровни: один цвет на уровень — легенда шансов, полосы, заголовки коллекции */
.ci-common, .ci-common-white,       .tier-dot-common    { --tier-c: #a8a098; }
.ci-uncommon, .ci-uncommon-lime,    .tier-dot-uncommon  { --tier-c: #5fa83a; }
.ci-rare, .ci-rare-azure,           .tier-dot-rare      { --tier-c: #3f86e0; }
.ci-epic, .ci-epic-violet,          .tier-dot-epic      { --tier-c: #b06ef0; }
.ci-legendary, .ci-legendary-amber, .tier-dot-legendary { --tier-c: #f0b020; }
.ci-mythic, .ci-mythic-void,        .tier-dot-mythic    { --tier-c: #ff3048; }

.case-chances {
  font-family: inherit; font-size: .85rem; line-height: 1.4;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px;
}
.case-chance { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tier-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tier-c); flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier-c) 30%, transparent);
}

/* ═══════════ Коллекция по уровням ═══════════ */
.skins-list { display: block; }
.tier-group + .tier-group { margin-top: 22px; }
.tier-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 10px;
}
.tier-head h3 { margin: 0; font-size: 1.25rem; }
.tier-head .tier-meta { margin-left: auto; font-size: .85rem; color: var(--tm, var(--text-muted)); white-space: nowrap; }
.tier-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.skin-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 132px; padding: 16px 10px 14px;
  font-size: .9rem; letter-spacing: 0; text-transform: none;
  overflow: hidden;
}
.skin-card .sc-decal {
  position: absolute; right: -10px; bottom: -22px;
  font-size: 96px; line-height: 1; opacity: .14;
  pointer-events: none;
}
.skin-card .sc-icon { font-size: 1.9rem; line-height: 1; position: relative; }
.skin-card .sc-name { position: relative; line-height: 1.25; }
.skin-card .sc-chance { position: relative; font-size: .78rem; font-weight: 600; opacity: .8; }
.skin-card .skin-count {
  top: 8px; left: 10px;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  font-size: .75rem;
}
/* Закрытый стиль: виден и читаем, но явно не твой */
.skin-card.locked {
  opacity: 1; filter: none;
  background: var(--tcb, rgba(127, 127, 127, .08));
  color: var(--tm, var(--text-muted));
  border: 2px dashed var(--tce, rgba(127, 127, 127, .4));
}
.skin-card.locked::before { content: none; }
.skin-card.locked .sc-icon { filter: grayscale(1); opacity: .45; }
.skin-card.locked .sc-decal { opacity: .07; }
.skin-card .sc-lock { position: relative; font-size: .78rem; font-weight: 600; }
.skin-card.eq::after { top: 8px; right: 12px; }

@media (prefers-reduced-motion: reduce) {
  .drop-rays { animation: none !important; }
  .drop-card { transition: opacity .2s !important; transform: none !important; }
  .drop-ovl::after { animation: none !important; opacity: 0; }
  .fx-shake body { animation: none !important; }
}

/* Бейдж стиля: на светлых цветах уровня — тёмный текст (белый на жёлтом не читается) */
.ticket[data-r="common"] .tk-badge,
.ticket[data-r="common-white"] .tk-badge,
.ticket[data-r="legendary"] .tk-badge,
.ticket[data-r="legendary-amber"] .tk-badge { color: #1f1500; }