.ff-hub-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ff-player--asset {
  align-items: flex-start;
}

.ff-player-main {
  min-width: 0;
  flex: 1;
}

.ff-player-side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ff-equip-pos {
  min-width: 74px;
}

.ff-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr));
  gap: 12px;
  align-items: start;
}

.ff-asset-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, rgba(48, 40, 36, 0.95), rgba(22, 18, 16, 0.98));
  display: grid;
  gap: 8px;
}

.ff-asset-card-glow {
  position: absolute;
  inset: -30% -40% auto auto;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  filter: blur(26px);
  opacity: 0.35;
  pointer-events: none;
}

.ff-asset-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ff-asset-card-type { color: rgba(255, 255, 255, 0.82); }
.ff-asset-card-rarity { font-weight: 800; }
.ff-asset-card-name { margin: 0; font-size: 0.96rem; line-height: 1.2; }
.ff-asset-card-meta { margin: 0; color: var(--ff-muted); font-size: 0.74rem; }

.ff-asset-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ff-asset-card--common { border-color: rgba(255, 255, 255, 0.16); }
.ff-asset-card--common .ff-asset-card-glow { background: rgba(255, 255, 255, 0.35); }

.ff-asset-card--rare { border-color: rgba(96, 165, 250, 0.55); }
.ff-asset-card--rare .ff-asset-card-rarity { color: #93c5fd; }
.ff-asset-card--rare .ff-asset-card-glow { background: rgba(96, 165, 250, 0.5); }

.ff-asset-card--epic { border-color: rgba(192, 132, 252, 0.62); }
.ff-asset-card--epic .ff-asset-card-rarity { color: #d8b4fe; }
.ff-asset-card--epic .ff-asset-card-glow { background: rgba(192, 132, 252, 0.52); }

.ff-asset-card--legendary {
  border-color: rgba(251, 191, 36, 0.75);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18) inset, 0 10px 34px rgba(251, 191, 36, 0.16);
}
.ff-asset-card--legendary .ff-asset-card-rarity { color: #fde68a; }
.ff-asset-card--legendary .ff-asset-card-glow { background: rgba(251, 191, 36, 0.65); }

/* --- Магазин: карточка набора --- */
/* Тёмная плитка спорила со светлым фоном; теперь это обычная карточка,
   а редкость читается по цветной метке и левому ранту. */
.ff-store-grid {
  display: grid;
  gap: 10px;
}

.ff-store-pack {
  --tier: var(--ff-r-common);
  position: relative;
  display: grid;
  gap: 6px;
  padding: 14px 14px 14px 17px;
  border-radius: var(--ff-radius);
  border: 1px solid var(--ff-border);
  background: var(--ff-surface);
  box-shadow: var(--ff-shadow-card);
  overflow: hidden;
}

.ff-store-pack::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tier);
}

.ff-store-pack-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.ff-store-pack-badge {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 9px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--tier) 12%, transparent);
  color: var(--tier);
}

.ff-store-pack-count {
  font-family: var(--ff-font-mono, "JetBrains Mono", monospace);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ff-text-faint);
}

.ff-store-pack-name {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--ff-text);
}

.ff-store-pack-content {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--ff-text-dim);
}

.ff-store-pack-actions {
  margin-top: 6px;
}

.ff-store-buy-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ff-store-buy-row .ff-qty-row {
  flex: 0 0 auto;
}

.ff-store-buy-row .ff-store-buy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 6px 14px;
  line-height: 1.15;
  font-size: 0.95rem;
}
.ff-store-buy-row .ff-store-pay-label {
  font-weight: 700;
}
.ff-store-buy-row .ff-store-pay-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.ff-store-buy-row .ff-store-pay-cur {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.75;
}

/* Оплата звёздами — второй кнопкой в той же строке. */
.ff-store-buy-row .ff-store-buy-stars {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 10px;
  line-height: 1.15;
  font-size: 0.95rem;
  white-space: nowrap;
}

.ff-store-buy-row .ff-store-buy-stars .ff-store-pay-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ff-store-buy-row .ff-store-buy-stars .ff-store-pay-cur {
  font-size: 0.95rem;
  opacity: 1;
}

/* Три элемента в строке: степпер ужимаем, цены не переносим. */
.ff-store-buy-row--dual {
  gap: 6px;
}

.ff-store-buy-row--dual .ff-store-buy,
.ff-store-buy-row--dual .ff-store-buy-stars {
  padding: 6px 8px;
  gap: 4px;
  white-space: nowrap;
}

.ff-store-buy-row--dual .ff-qty-row {
  gap: 3px;
  padding: 2px;
}

.ff-store-buy-row--dual .ff-qty-btn {
  width: 28px;
  height: 28px;
  font-size: 1rem;
}

.ff-store-buy-row--dual .ff-qty-input {
  width: 24px;
  font-size: 0.88rem;
}

.ff-store-pack--common,
.ff-store-pack--rare,
.ff-store-pack--epic,
.ff-store-pack--legendary { --tier: var(--ff-gold); }

/* --- Подсказка «что подойдёт» в пикерах (крафт / форма) --- */
.ff-pick-req {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 8px 10px;
  margin: 0 0 10px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: var(--ff-inset);
  font-size: 0.78rem;
}

.ff-pick-req-label {
  color: var(--ff-text-dim);
  font-size: 0.72rem;
}

.ff-pick-req-value {
  color: var(--ff-text);
  font-size: 0.8rem;
}

.ff-kit-empty--nomatch {
  text-align: center;
}

/* --- Паки в сторе: отдельный силуэт --- */
.ff-asset-card--pack {
  min-height: 168px;
  border-width: 2px;
  background:
    linear-gradient(165deg, rgba(12, 18, 22, 0.97) 0%, rgba(20, 28, 36, 0.98) 45%, rgba(8, 12, 16, 0.99) 100%);
}
.ff-asset-card--pack .ff-asset-card-name {
  font-family: var(--ff-display, Bebas Neue, sans-serif);
  letter-spacing: 0.04em;
  font-size: 1.05rem;
}
.ff-asset-card-pack-ribbon {
  position: absolute;
  top: 10px;
  right: -32px;
  width: 120px;
  height: 26px;
  transform: rotate(38deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  pointer-events: none;
}
.ff-asset-card--pack.ff-asset-card--common {
  border-color: rgba(180, 150, 120, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 28px rgba(0, 0, 0, 0.35);
}
.ff-asset-card--pack.ff-asset-card--common .ff-asset-card-glow { background: rgba(205, 170, 130, 0.35); }
.ff-asset-card--pack.ff-asset-card--rare {
  border-color: rgba(96, 165, 250, 0.65);
  background: linear-gradient(160deg, rgba(15, 28, 48, 0.98), rgba(8, 16, 32, 0.99));
}
.ff-asset-card--pack.ff-asset-card--rare .ff-asset-card-glow { background: rgba(56, 120, 220, 0.45); }
.ff-asset-card--pack.ff-asset-card--epic {
  border-color: rgba(192, 132, 252, 0.7);
  background:
    linear-gradient(135deg, rgba(40, 18, 58, 0.95) 0%, rgba(18, 10, 36, 0.98) 50%, rgba(28, 12, 48, 0.96) 100%);
}
.ff-asset-card--pack.ff-asset-card--epic .ff-asset-card-glow { background: rgba(168, 85, 247, 0.42); }
.ff-asset-card--pack.ff-asset-card--legendary {
  border-color: rgba(251, 191, 36, 0.85);
  background: linear-gradient(155deg, rgba(48, 36, 8, 0.96), rgba(22, 14, 4, 0.99), rgba(38, 28, 6, 0.97));
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2) inset, 0 14px 40px rgba(251, 191, 36, 0.12);
}
.ff-asset-card--pack.ff-asset-card--legendary .ff-asset-card-glow { background: rgba(251, 191, 36, 0.5); }

/* --- Карты игроков: прямоугольник; только силуэт по центру, имя, клуб, круги --- */
.ff-asset-card.ff-asset-card--player {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 10px;
  overflow: visible;
  border-radius: 0;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.48));
}

.ff-player-card-panel {
  position: relative;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  min-height: 360px;
  height: auto;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 2px solid rgba(15, 23, 42, 0.28);
  background: linear-gradient(180deg, #f2ede3 0%, #efe8db 100%);
}

.ff-asset-card--player .ff-asset-card-deco {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.ff-asset-card--player .ff-asset-card-glow {
  position: absolute;
  top: -28%;
  right: -22%;
  width: 140px;
  height: 140px;
  z-index: 0;
  opacity: 0.38;
}

.ff-asset-card--player.ff-asset-card--common .ff-player-card-panel {
  border-color: rgba(55, 65, 81, 0.35);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.ff-asset-card--player.ff-asset-card--common .ff-asset-card-deco {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 48%, rgba(15, 23, 42, 0.05));
}

.ff-asset-card--player.ff-asset-card--rare .ff-player-card-panel {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 12px 28px rgba(29, 78, 216, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.ff-asset-card--player.ff-asset-card--rare .ff-asset-card-deco {
  background: linear-gradient(108deg, transparent 26%, rgba(147, 197, 253, 0.22) 50%, transparent 74%);
}

.ff-asset-card--player.ff-asset-card--epic .ff-player-card-panel {
  border-color: rgba(124, 58, 237, 0.52);
  box-shadow: 0 12px 30px rgba(107, 33, 168, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.ff-asset-card--player.ff-asset-card--epic .ff-asset-card-deco {
  background:
    radial-gradient(circle at 24% 26%, rgba(251, 191, 36, 0.14), transparent 42%),
    radial-gradient(circle at 78% 58%, rgba(96, 165, 250, 0.1), transparent 38%);
}

.ff-asset-card--player.ff-asset-card--legendary .ff-player-card-panel {
  border-color: rgba(217, 119, 6, 0.58);
  box-shadow: 0 14px 34px rgba(180, 83, 9, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ff-asset-card--player.ff-asset-card--legendary .ff-asset-card-deco {
  background:
    radial-gradient(circle at 14% 28%, rgba(255, 255, 255, 0.13) 0%, transparent 2.5%),
    radial-gradient(circle at 80% 24%, rgba(255, 255, 255, 0.11) 0%, transparent 2%),
    radial-gradient(circle at 48% 68%, rgba(255, 255, 255, 0.08) 0%, transparent 2%);
}

.ff-player-card-fut {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: grid;
  grid-template-rows: auto minmax(230px, 1fr) auto;
  grid-template-columns: 1fr;
  align-items: stretch;
  justify-items: stretch;
  padding: 10px 12px 12px;
  box-sizing: border-box;
}

.ff-player-card-rarity {
  margin: 0 0 8px;
  width: 100%;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 6px 10px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.ff-asset-card--player.ff-asset-card--common .ff-player-card-rarity {
  color: #374151;
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(107, 114, 128, 0.4);
}

.ff-asset-card--player.ff-asset-card--rare .ff-player-card-rarity {
  color: #dbeafe;
  background: linear-gradient(90deg, rgba(29, 78, 216, 0.56), rgba(59, 130, 246, 0.42));
  border-color: rgba(147, 197, 253, 0.5);
}

.ff-asset-card--player.ff-asset-card--epic .ff-player-card-rarity {
  color: #f3e8ff;
  background: linear-gradient(90deg, rgba(107, 33, 168, 0.62), rgba(147, 51, 234, 0.42));
  border-color: rgba(216, 180, 254, 0.48);
}

.ff-asset-card--player.ff-asset-card--legendary .ff-player-card-rarity {
  color: #fffbeb;
  background: linear-gradient(90deg, rgba(180, 83, 9, 0.68), rgba(245, 158, 11, 0.52));
  border-color: rgba(253, 230, 138, 0.55);
}

.ff-player-card-silhouette-wrap {
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px 12px 2px 2px;
  border: 2px solid rgba(17, 24, 39, 0.72);
  border-bottom-width: 0;
  box-sizing: border-box;
  padding: 12px 10px 0;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.32), transparent 46%),
    radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(170, 206, 230, 0.84) 0%, rgba(92, 128, 166, 0.72) 36%, rgba(38, 74, 109, 0.65) 60%, rgba(49, 97, 54, 0.78) 100%);
  box-shadow: inset 0 -34px 48px rgba(0, 0, 0, 0.24);
}

.ff-asset-card--player.ff-asset-card--common .ff-player-card-silhouette-wrap {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.4), transparent 46%),
    linear-gradient(180deg, rgba(198, 210, 221, 0.9) 0%, rgba(130, 154, 176, 0.82) 42%, rgba(57, 103, 60, 0.8) 100%);
}

.ff-asset-card--player.ff-asset-card--rare .ff-player-card-silhouette-wrap {
  background:
    radial-gradient(circle at 50% 18%, rgba(191, 219, 254, 0.4), transparent 50%),
    linear-gradient(180deg, rgba(125, 211, 252, 0.86) 0%, rgba(30, 64, 175, 0.76) 48%, rgba(21, 94, 117, 0.74) 100%);
}

.ff-asset-card--player.ff-asset-card--epic .ff-player-card-silhouette-wrap {
  background:
    radial-gradient(circle at 50% 18%, rgba(221, 214, 254, 0.4), transparent 48%),
    linear-gradient(180deg, rgba(167, 139, 250, 0.86) 0%, rgba(109, 40, 217, 0.78) 46%, rgba(67, 56, 202, 0.76) 100%);
}

.ff-asset-card--player.ff-asset-card--legendary .ff-player-card-silhouette-wrap {
  background:
    radial-gradient(circle at 50% 18%, rgba(254, 240, 138, 0.42), transparent 50%),
    linear-gradient(180deg, rgba(253, 186, 116, 0.9) 0%, rgba(217, 119, 6, 0.8) 44%, rgba(120, 53, 15, 0.78) 100%);
}

/* Силуэт: SVG (градиент сборной + mask по PNG). Тень на .ff-player-silhouette-shadow. */
.ff-player-silhouette-shadow {
  pointer-events: none;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
}

.ff-asset-card--player.ff-asset-card--rare .ff-player-silhouette-shadow,
.ff-asset-card--player.ff-asset-card--epic .ff-player-silhouette-shadow,
.ff-asset-card--player.ff-asset-card--legendary .ff-player-silhouette-shadow {
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.38));
}

.ff-player-silhouette-inner {
  position: relative;
  width: min(78%, 220px);
  max-width: 220px;
  aspect-ratio: 220 / 294;
  margin: 0 auto;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.ff-player-silhouette-inner--zones .ff-player-kit-zones-canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: auto;
}

.ff-player-silhouette-inner--zones .ff-player-kit-zones-canvas--solo {
  position: relative;
  left: auto;
  top: auto;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
}

.ff-player-silhouette-svg {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.ff-asset-card--player.ff-asset-card--rare .ff-player-silhouette-svg,
.ff-asset-card--player.ff-asset-card--epic .ff-player-silhouette-svg,
.ff-asset-card--player.ff-asset-card--legendary .ff-player-silhouette-svg {
  opacity: 0.96;
}

.ff-player-card-bio {
  margin-top: 10px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(245, 247, 250, 0.94));
  border: 2px solid rgba(15, 23, 42, 0.24);
  padding: 10px 10px 11px;
  color: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 16px rgba(15, 23, 42, 0.14);
}

.ff-player-card-name-box {
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(243, 244, 246, 0.95));
  padding: 8px 10px;
}

.ff-asset-card-name--player {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 1.08rem;
  font-weight: 900;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: 0.01em;
  padding: 0;
  box-sizing: border-box;
  text-transform: uppercase;
}

.ff-asset-card--player.ff-asset-card--common .ff-asset-card-name--player {
  color: #111827;
  text-shadow: none;
}

.ff-asset-card--player.ff-asset-card--rare .ff-asset-card-name--player {
  color: #111827;
  text-shadow: none;
}

.ff-asset-card--player.ff-asset-card--epic .ff-asset-card-name--player {
  color: #111827;
  text-shadow: none;
}

.ff-asset-card--player.ff-asset-card--legendary .ff-asset-card-name--player {
  color: #111827;
  text-shadow: none;
}

.ff-player-card-meta-line {
  margin: 7px 0 0;
  width: 100%;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 0;
  box-sizing: border-box;
  color: #111827;
}

.ff-player-card-meta-key {
  font-weight: 900;
  letter-spacing: 0.03em;
}

.ff-player-card-stats-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 6px;
  align-items: stretch;
}

.ff-player-card-stats-grid .ff-player-card-meta-line {
  margin: 0;
}

.ff-player-card-country-short {
  grid-column: 2;
  grid-row: 1 / span 2;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 2px;
}

.ff-player-card-country-flag {
  font-size: calc(1.85rem * 1.5);
  line-height: 1;
}

.ff-player-card-team--unknown {
  opacity: 0.85;
}

.ff-player-card-fut-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 4px 0 0;
  box-sizing: border-box;
}

.ff-player-card-club-crest {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-align: center;
  padding: 4px;
  border: 2px solid rgba(15, 23, 42, 0.22);
  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(233, 236, 240, 1));
  color: #111827;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08);
}

.ff-asset-card--player.ff-asset-card--common .ff-player-card-club-crest {
  border-color: rgba(15, 23, 42, 0.25);
}

.ff-asset-card--player.ff-asset-card--rare .ff-player-card-club-crest {
  border-color: rgba(37, 99, 235, 0.45);
}

.ff-asset-card--player.ff-asset-card--epic .ff-player-card-club-crest {
  border-color: rgba(124, 58, 237, 0.42);
}

.ff-asset-card--player.ff-asset-card--legendary .ff-player-card-club-crest {
  border-color: rgba(180, 83, 9, 0.42);
}


/* --- Редкость: полноценные темы карточки --- */
.ff-asset-card--player.ff-asset-card--common .ff-player-card-brand {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #eceff3 0%, #cdd4dd 100%);
}
.ff-asset-card--player.ff-asset-card--common .ff-player-card-brand-text { color: #1f2937; text-shadow: none; }

.ff-asset-card--player.ff-asset-card--rare .ff-player-card-panel {
  background: linear-gradient(180deg, #f0f6ff 0%, #e5efff 100%);
}
.ff-asset-card--player.ff-asset-card--rare .ff-player-card-silhouette-wrap {
  border-color: rgba(29, 78, 216, 0.78);
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.34), transparent 42%),
    linear-gradient(180deg, #bfd8ff 0%, #5fa1ff 44%, #2051a2 76%, #11356f 100%);
}
.ff-asset-card--player.ff-asset-card--rare .ff-player-card-brand {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, #8fc4ff 0%, #3b82f6 100%);
}
.ff-asset-card--player.ff-asset-card--rare .ff-player-card-brand-text { color: #eff6ff; }
.ff-asset-card--player.ff-asset-card--rare .ff-player-card-bio {
  border-color: rgba(37, 99, 235, 0.34);
  background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
}
.ff-asset-card--player.ff-asset-card--rare .ff-player-card-club-crest,
.ff-asset-card--player.ff-asset-card--rare .ff-player-card-pos-pill {
  border-color: rgba(37, 99, 235, 0.48);
  background: #eff6ff;
}

.ff-asset-card--player.ff-asset-card--epic .ff-player-card-panel {
  background: linear-gradient(180deg, #f8f3ff 0%, #f1e8ff 100%);
}
.ff-asset-card--player.ff-asset-card--epic .ff-player-card-silhouette-wrap {
  border-color: rgba(109, 40, 217, 0.82);
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.35), transparent 44%),
    linear-gradient(180deg, #e6ccff 0%, #b489ff 42%, #6d28d9 76%, #3b117c 100%);
}
.ff-asset-card--player.ff-asset-card--epic .ff-player-card-brand {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, #d8b4fe 0%, #7c3aed 100%);
}
.ff-asset-card--player.ff-asset-card--epic .ff-player-card-brand-text { color: #faf5ff; }
.ff-asset-card--player.ff-asset-card--epic .ff-player-card-bio {
  border-color: rgba(124, 58, 237, 0.34);
  background: linear-gradient(180deg, #fdf9ff 0%, #f6efff 100%);
}
.ff-asset-card--player.ff-asset-card--epic .ff-player-card-club-crest,
.ff-asset-card--player.ff-asset-card--epic .ff-player-card-pos-pill {
  border-color: rgba(124, 58, 237, 0.45);
  background: #faf5ff;
}

.ff-asset-card--player.ff-asset-card--legendary .ff-player-card-panel {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
}
.ff-asset-card--player.ff-asset-card--legendary .ff-player-card-silhouette-wrap {
  border-color: rgba(194, 65, 12, 0.84);
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 249, 219, 0.48), transparent 46%),
    linear-gradient(180deg, #fde68a 0%, #f59e0b 42%, #c2410c 76%, #7c2d12 100%);
}
.ff-asset-card--player.ff-asset-card--legendary .ff-player-card-brand {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, #fde68a 0%, #f59e0b 100%);
}
.ff-asset-card--player.ff-asset-card--legendary .ff-player-card-brand-text { color: #7c2d12; }
.ff-asset-card--player.ff-asset-card--legendary .ff-player-card-bio {
  border-color: rgba(217, 119, 6, 0.36);
  background: linear-gradient(180deg, #fffaf0 0%, #fff2dd 100%);
}
.ff-asset-card--player.ff-asset-card--legendary .ff-player-card-club-crest,
.ff-asset-card--player.ff-asset-card--legendary .ff-player-card-pos-pill {
  border-color: rgba(180, 83, 9, 0.5);
  background: #fff7ed;
}

.ff-asset-card--form {
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  min-height: 260px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08), transparent 55%),
    linear-gradient(165deg, #142018 0%, #0a100e 55%, #0c1411 100%);
}

.ff-form-card {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  padding: 16px 14px 18px;
  height: 100%;
  box-sizing: border-box;
  /* Плашка карточки всегда тёмная в обеих темах — текст задаём здесь, иначе
     в светлой теме он берёт тёмный токен и сливается с фоном. */
  color: #eef6f4;
}
.ff-form-card-visual {
  width: 100%;
  aspect-ratio: 1 / 0.72;
  max-height: 140px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ff-border);
  color: var(--ff-text);
}
.ff-form-card-visual--common {
  background: linear-gradient(160deg, #4b5563, #1f2937 70%);
  color: #e5e7eb;
}
.ff-form-card-visual--rare {
  background: linear-gradient(160deg, #2563eb, #0f172a 72%);
  color: #dbeafe;
}
.ff-form-card-visual--epic {
  background: linear-gradient(160deg, #7c3aed, #1e1033 72%);
  color: #f3e8ff;
}
.ff-form-card-visual--legendary {
  background: linear-gradient(160deg, #d97706, #431407 72%);
  color: #fffbeb;
}
.ff-form-silhouette {
  width: 72px;
  height: 72px;
  display: block;
  overflow: hidden;
  opacity: 1;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.28));
}
.ff-form-card-facts {
  display: grid;
  gap: 8px;
}
.ff-form-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ff-form-fact-k {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(233, 245, 242, 0.58);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-form-fact-v {
  /* Карточка стоит в узкой колонке — значение обязано ужиматься, иначе строка
     распирает карточку и обрезается её overflow:hidden. */
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-form-fact-v--common { color: #d1d5db; }
.ff-form-fact-v--rare { color: #93c5fd; }
.ff-form-fact-v--epic { color: #d8b4fe; }
.ff-form-fact-v--legendary { color: #fde68a; }
.ff-form-fact-v--boost { color: #86efac; }

.ff-pack-face--card .ff-asset-card--form {
  min-height: 300px;
  max-width: 280px;
}

.ff-player-card-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.ff-player-card-footer-left {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
/* Справа от строк — только эмблема клуба: флаг переехал строкой над клубом. */
.ff-player-card-flag-col {
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.ff-player-card-crest {
  display: block;
  width: 40px;
  height: 44px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
/* Флаг страны игрока — отдельной строкой над клубом. */
.ff-player-card-flag-line {
  display: flex;
  align-items: center;
  line-height: 1;
}
.ff-club-crest {
  width: 100%;
  height: 100%;
  display: block;
}
.ff-player-card-country-flag {
  font-size: 1.3rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.ff-player-card-flag-placeholder {
  opacity: 0.45;
  font-size: 1.1rem;
}

.ff-inv-pos-ico {
  display: inline-flex !important;
  min-width: 36px;
  justify-content: center;
  font-size: 0.7rem !important;
  padding: 4px 6px !important;
}
/* Л5 — числовой показатель, а не акцент: моно-цифры, спокойный цвет */
.ff-inv-l5 {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--ff-font-mono, JetBrains Mono, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ff-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ff-inv-form-glyph {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  border: 1px solid var(--ff-border);
}
.ff-inv-form-glyph--common { color: var(--ff-r-common); }
.ff-inv-form-glyph--rare { color: var(--ff-r-rare); border-color: #3b82f6; }
.ff-inv-form-glyph--epic { color: var(--ff-r-epic); border-color: #a855f7; }
.ff-inv-form-glyph--legendary { color: var(--ff-r-legendary); border-color: #f59e0b; }

.ff-mpack-card-wrap--focus {
  margin: 0 auto;
}

.ff-inv-r--common { color: var(--ff-r-common); }
.ff-inv-r--rare { color: var(--ff-r-rare); }
.ff-inv-r--epic { color: var(--ff-r-epic); }
.ff-inv-r--legendary { color: var(--ff-r-legendary); font-weight: 800; }

/* Запечатанная сторона пака по редкости линии */
.ff-pack-seal--common.ff-pack-face--sealed {
  background: linear-gradient(160deg, #2a2622, #1a1816);
  box-shadow: 0 0 0 1px rgba(180, 150, 120, 0.35) inset, 0 20px 50px rgba(0, 0, 0, 0.45);
}
.ff-pack-seal--common .ff-pack-logo { color: rgba(205, 170, 130, 0.95); text-shadow: 0 0 20px rgba(205, 170, 130, 0.35); }
.ff-pack-seal--rare.ff-pack-face--sealed {
  background: linear-gradient(165deg, #152238, #0a1424);
  box-shadow: 0 0 0 1px rgba(56, 120, 220, 0.45) inset, 0 20px 50px rgba(0, 0, 0, 0.5);
}
.ff-pack-seal--rare .ff-pack-logo { color: rgba(147, 197, 253, 0.98); text-shadow: 0 0 24px rgba(56, 120, 220, 0.45); }
.ff-pack-seal--epic.ff-pack-face--sealed {
  background: linear-gradient(165deg, #2a1040, #120820);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.5) inset, 0 22px 52px rgba(0, 0, 0, 0.52);
}
.ff-pack-seal--epic .ff-pack-logo { color: rgba(216, 180, 254, 0.98); text-shadow: 0 0 26px rgba(168, 85, 247, 0.5); }
.ff-pack-seal--legendary.ff-pack-face--sealed {
  background: linear-gradient(165deg, #3a2808, #1a0f04);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.55) inset, 0 22px 56px rgba(251, 191, 36, 0.12);
}
.ff-pack-seal--legendary .ff-pack-logo { color: rgba(253, 230, 138, 0.98); text-shadow: 0 0 28px rgba(251, 191, 36, 0.45); }

/* Pack opening: full-screen feel, 3D flip, particles */
.ff-modal--pack .ff-modal-body-inner.ff-pack-body {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 12px 8px 20px;
}

.ff-pack-vignette {
  pointer-events: none;
  position: absolute;
  inset: -20%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.ff-pack-body--revealed .ff-pack-vignette--common { opacity: 0.35; background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.12), transparent 55%); }
.ff-pack-body--revealed .ff-pack-vignette--rare { opacity: 0.5; background: radial-gradient(ellipse at 50% 35%, rgba(96, 165, 250, 0.35), transparent 58%); }
.ff-pack-body--revealed .ff-pack-vignette--epic { opacity: 0.55; background: radial-gradient(ellipse at 50% 30%, rgba(192, 132, 252, 0.45), transparent 55%); }
.ff-pack-body--revealed .ff-pack-vignette--legendary {
  opacity: 0.65;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(251, 191, 36, 0.55), transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(184, 255, 90, 0.15), transparent 45%);
  animation: ff-pack-ambient-pulse 2.2s ease-in-out infinite;
}

@keyframes ff-pack-ambient-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.03); }
}

.ff-pack-particles {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0;
  height: 0;
  z-index: 3;
}

.ff-pack-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) translateY(0);
  animation: ff-pack-burst 0.95s ease-out forwards;
}

.ff-pack-particle--common { background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }
.ff-pack-particle--rare { background: #93c5fd; box-shadow: 0 0 10px rgba(96, 165, 250, 0.8); }
.ff-pack-particle--epic { background: #d8b4fe; box-shadow: 0 0 12px rgba(192, 132, 252, 0.9); }
.ff-pack-particle--legendary {
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.95);
}

@keyframes ff-pack-burst {
  0% { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(calc(-1 * var(--dist, 100px))) scale(0.2); }
}

.ff-pack-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.55), transparent 55%);
  opacity: 0;
  z-index: 4;
}

.ff-pack-flash--burst {
  animation: ff-pack-flash-pop 0.65s ease-out;
}

@keyframes ff-pack-flash-pop {
  0% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.2); }
}

.ff-pack-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 0;
  justify-content: center;
}

.ff-pack-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ff-muted);
  letter-spacing: 0.04em;
}

.ff-pack-scene {
  perspective: 1100px;
  -webkit-perspective: 1100px;
  perspective-origin: 50% 45%;
  -webkit-perspective-origin: 50% 45%;
  /* Тот же размер, что и в ревиле набора: карта не упирается в края экрана,
     кнопка «Продолжить» остаётся видимой на невысоких экранах. */
  width: max(160px, min(268px, 76vw, calc((100dvh - 280px) * 0.68)));
  max-width: 100%;
  height: auto;
  aspect-ratio: 68 / 100;
  max-height: none;
}

.ff-pack-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  outline: none;
}

.ff-pack-flip:focus-visible {
  box-shadow: 0 0 0 3px rgba(184, 255, 90, 0.45);
  border-radius: 20px;
}

.ff-pack-flip--open {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.ff-pack-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}

.ff-pack-face--sealed {
  transform: translateZ(3px);
  -webkit-transform: translateZ(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px solid rgba(184, 255, 90, 0.35);
  background:
    linear-gradient(145deg, rgba(20, 48, 36, 0.98) 0%, rgba(8, 22, 16, 0.99) 50%, rgba(12, 35, 26, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(184, 255, 90, 0.12);
  animation: ff-pack-seal-idle 3s ease-in-out infinite;
}

.ff-pack-stage--reduce .ff-pack-face--sealed {
  animation: none;
}

@keyframes ff-pack-seal-idle {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 32px rgba(184, 255, 90, 0.1); }
  50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 24px 56px rgba(0, 0, 0, 0.5), 0 0 48px rgba(184, 255, 90, 0.2); }
}

.ff-pack-seal-shine {
  position: absolute;
  inset: -50%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.07) 48%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.07) 52%,
    transparent 60%
  );
  animation: ff-pack-shine 2.8s ease-in-out infinite;
}

@keyframes ff-pack-shine {
  0% { transform: translateX(-35%) rotate(12deg); }
  100% { transform: translateX(35%) rotate(12deg); }
}

.ff-pack-logo {
  position: relative;
  z-index: 1;
  font-family: var(--ff-display, Bebas Neue, sans-serif);
  font-size: clamp(2.8rem, 12vw, 3.6rem);
  letter-spacing: 0.12em;
  color: rgba(184, 255, 90, 0.95);
  text-shadow: 0 0 28px rgba(184, 255, 90, 0.35);
}

.ff-pack-seal-text {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.55);
}

.ff-pack-face--card {
  transform: rotateY(180deg) translateZ(3px);
  -webkit-transform: rotateY(180deg) translateZ(3px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 12px;
  background: radial-gradient(ellipse at 50% 0%, rgba(184, 255, 90, 0.08), transparent 50%);
  isolation: isolate;
}

.ff-pack-face--card .ff-asset-card {
  width: 100%;
  max-width: 100%;
  min-height: 240px;
  box-sizing: border-box;
  align-self: stretch;
  flex: 1 1 auto;
  animation: ff-pack-card-land 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

/* Карточка вписывается в окно вскрытия целиком: фиксированный min-height
   на невысоких экранах вылезал за грань и имя обрезалось. */
.ff-pack-face--card .ff-player-card-panel,
.ff-pack-face--card .ff-pcard {
  min-height: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
}

/* Внутри 3D-flip WebKit ломает вращающийся декор */
.ff-pack-face--card .ff-asset-card--player .ff-asset-card-deco {
  animation: none;
  transform: none;
  -webkit-transform: none;
}

/* Открытие пака: по очереди редкость → клуб → позиция → имя + силуэт */


/* Pack reveal stagger: controlled by JS in doReveal() */

@keyframes ff-pack-player-piece-in {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ff-pack-player-piece-in-hero {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ff-reveal-stage-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.9);
    filter: blur(4px);
  }
  60% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes ff-reveal-stage-in-hero {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.88);
    filter: blur(6px);
  }
  50% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}



@keyframes ff-pack-card-land {
  0% { transform: scale(0.88) translateY(12px); opacity: 0.6; filter: blur(2px); }
  100% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
}

.ff-pack-stage--revealed .ff-pack-flip--open .ff-pack-face--card .ff-asset-card--legendary {
  animation: ff-pack-card-land 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both, ff-pack-card-glow 1.8s ease-in-out 0.5s infinite;
}

@keyframes ff-pack-card-glow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.45)); }
  50% { filter: drop-shadow(0 0 22px rgba(251, 191, 36, 0.75)); }
}

.ff-pack-actions {
  position: relative;
  z-index: 20;
  min-height: 44px;
  display: flex;
  justify-content: center;
  pointer-events: auto;
}

/* Qty buy controls */
.ff-qty-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--ff-inset);
  border: 1px solid var(--ff-border);
}
.ff-qty-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--ff-surface);
  color: var(--ff-text);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background 0.16s, color 0.16s;
}
.ff-qty-btn:hover { background: var(--ff-gold-soft); color: var(--ff-gold); }
.ff-qty-btn:active { transform: scale(0.96); }
.ff-qty-input {
  width: 38px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ff-text);
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.ff-qty-input::-webkit-outer-spin-button,
.ff-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ff-qty-total {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ff-gold);
}
.ff-mpack-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

/* Multi-pack open — true fullscreen so cards aren't clipped */
.ff-modal.ff-modal--mpack {
  inset: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100vw;
  width: 100dvw;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  animation: ff-mpack-fs-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ff-mpack-fs-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ff-modal--mpack .ff-modal-chrome.ff-mpack-chrome {
  border-radius: 0;
  border: none;
  max-height: none;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(184, 255, 90, 0.08), transparent 48%),
    linear-gradient(180deg, #0b1220 0%, #070b14 100%);
  box-shadow: none;
}
.ff-mpack-chrome {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.ff-modal--mpack .ff-modal-header {
  flex: 0 0 auto;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: rgba(7, 11, 20, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ff-mpack-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
/* List mode: do not flex-stretch/center — that clips the top of tall lists */
.ff-mpack-scroll--list {
  display: block;
  overscroll-behavior: contain;
}
.ff-mpack-footer {
  flex: 0 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(9, 14, 26, 0.92), #090e1a);
}
.ff-mpack-footer-intro,
.ff-mpack-footer-step,
.ff-mpack-footer-done {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ff-mpack-footer .ff-btn {
  flex: 1;
  min-height: 44px;
}
.ff-mpack-body {
  /* Размер карты в ревиле считается от экрана, а не фиксированными пикселями:
     на низких экранах она раньше не влезала и обрезалась. 0.68 — пропорция
     карточки (ширина/высота), 268px — потолок на больших экранах. */
  --mp-card-w: max(160px, min(268px, 76vw, calc((100dvh - 300px) * 0.68)));
  position: relative;
  flex: 1 1 auto;
  min-height: 100%;
  overflow: visible;
  padding: 12px 16px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.ff-mpack-body--list {
  flex: none;
  min-height: 0;
  height: auto;
  display: block;
  padding: 8px 16px 20px;
}
.ff-mpack-body--legendary {
  background: radial-gradient(ellipse at 50% 20%, rgba(251, 191, 36, 0.18), transparent 55%);
}
.ff-mpack-body--epic {
  background: radial-gradient(ellipse at 50% 20%, rgba(192, 132, 252, 0.16), transparent 55%);
}
.ff-mpack-burst {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.45), transparent 50%);
}
.ff-mpack-burst--on {
  animation: ff-mpack-flash 0.7s ease-out;
}
@keyframes ff-mpack-flash {
  0% { opacity: 0; transform: scale(0.7); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); }
}
.ff-mpack-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 0 8px;
  justify-content: center;
}
.ff-mpack-stage--list {
  flex: none;
  min-height: 0;
  height: auto;
  justify-content: flex-start;
  gap: 14px;
  padding: 0;
}
.ff-mpack-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 4px;
  text-align: center;
}
.ff-mpack-stack {
  position: relative;
  width: 120px;
  height: 140px;
  margin: 4px 0;
}
.ff-mpack-stack-card {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 2px solid rgba(184, 255, 90, 0.35);
  background: linear-gradient(150deg, rgba(22, 48, 36, 0.98), rgba(8, 18, 14, 0.99));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  transform:
    translateX(calc(var(--i, 0) * 6px))
    translateY(calc(var(--i, 0) * -7px))
    rotate(calc(var(--i, 0) * -3deg));
  animation: ff-mpack-wobble 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.08s);
}
.ff-mpack-stack-card .ff-pack-logo {
  font-family: var(--ff-display, Bebas Neue, sans-serif);
  font-size: 2.2rem;
  letter-spacing: 0.1em;
  color: rgba(184, 255, 90, 0.95);
}
@keyframes ff-mpack-wobble {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
.ff-mpack-count {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}
.ff-mpack-split {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
}
.ff-mpack-progress {
  width: min(360px, 92%);
  margin: 0 auto;
  text-align: center;
}
.ff-mpack-progress-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 6px;
}
.ff-mpack-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.ff-mpack-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #9fd978, #c8f5a8);
  transition: width 0.18s ease-out;
}
.ff-mpack-rail {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding: 8px 0 12px;
  margin: 0;
  display: flex;
  align-items: center;
  /* Не center: при переполнении центрирование уводит начало дорожки за левый
     край, и до него уже не доскроллить — карта показывалась обрезанной.
     Центровку берёт на себя сама дорожка (min-width:100% + justify-content). */
  justify-content: flex-start;
}
/* Пошаговый показ: на экране всегда одна карта, лента и снап не нужны. */
.ff-mpack-rail--single {
  overflow-x: hidden;
  /* На совсем низком вьюпорте карта упирается в нижнюю границу — тогда лучше
     дать её доскроллить, чем обрезать. */
  overflow-y: auto;
  scroll-snap-type: none;
}
.ff-mpack-rail--list {
  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
  margin: 0;
  align-items: stretch;
  display: block;
  flex: none;
  min-height: 0;
  height: auto;
}
.ff-mpack-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: max-content;
  min-width: 100%;
  min-height: 0;
  /* Боковой отступ = ровно свободное место вокруг карты (ширина ленты минус
     карта), поэтому одна карта никогда не выходит за пределы ленты. */
  padding: 8px max(12px, calc((100vw - 32px - var(--mp-card-w)) / 2)) 12px;
  box-sizing: border-box;
  /* margin:auto здесь центрировал бы переполненную дорожку и уводил первую
     карту за левый край без возможности доскроллить. Ширину держит min-width. */
  margin: 0;
}
.ff-mpack-track--single {
  width: 100%;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}
.ff-mpack-track--list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0 0 8px;
  align-items: stretch;
  justify-content: flex-start;
}
.ff-mpack-list-head {
  padding: 6px 2px 2px;
}
.ff-mpack-list-kicker {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(184, 255, 90, 0.85);
}
.ff-mpack-list-title {
  margin: 0;
  font-family: var(--ff-display, Bebas Neue, sans-serif);
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ff-text);
}
.ff-mpack-list-sub {
  margin: 6px 0 0;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.58);
}
.ff-mpack-list-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 0 12px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 55%),
    rgba(255, 255, 255, 0.03);
  opacity: 0;
  transform: translateY(10px);
  animation: ff-mpack-list-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(min(var(--i, 0), 12) * 28ms);
}
.ff-mpack-list-av {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.07);
  color: var(--ff-text);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Мини-карточка вместо буквы: тот же размер, фигура в цветах клуба и герб. */
.ff-mpack-list-av--card,
.ff-mpack-list-av--form {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--mp-plate-1, rgba(255, 255, 255, 0.14)), var(--mp-plate-2, rgba(255, 255, 255, 0.05)));
}
.ff-mpack-list-av-canvas {
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  height: 88px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
.ff-mpack-list-av-crest {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 18px;
  height: 20px;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.ff-mpack-list-av-crest svg { width: 100%; height: 100%; display: block; }
.ff-mpack-list-av--form .ff-form-ico { width: 30px; height: 30px; }
.ff-mpack-list-av--form .ff-form-ico .ff-form-silhouette { width: 26px; height: 26px; }
.ff-mpack-list-av--rare.ff-mpack-list-av--card { --mp-plate-1: rgba(85, 180, 255, 0.3); --mp-plate-2: rgba(85, 180, 255, 0.08); }
.ff-mpack-list-av--epic.ff-mpack-list-av--card { --mp-plate-1: rgba(176, 122, 255, 0.3); --mp-plate-2: rgba(176, 122, 255, 0.08); }
.ff-mpack-list-av--legendary.ff-mpack-list-av--card { --mp-plate-1: rgba(var(--ff-accent-rgb), 0.32); --mp-plate-2: rgba(var(--ff-accent-rgb), 0.08); }

.ff-mpack-list-av--rare {
  background: rgba(85, 180, 255, 0.16);
  border-color: rgba(85, 180, 255, 0.35);
  color: var(--ff-r-rare);
}
.ff-mpack-list-av--epic {
  background: rgba(176, 122, 255, 0.16);
  border-color: rgba(176, 122, 255, 0.35);
  color: var(--ff-r-epic);
}
.ff-mpack-list-av--legendary {
  background: rgba(var(--ff-accent-rgb), 0.16);
  border-color: rgba(var(--ff-accent-rgb), 0.4);
  color: var(--ff-r-legendary);
}
.ff-mpack-list-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ff-mpack-list-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.ff-mpack-list-kind {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.ff-mpack-list-name {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-mpack-list-meta {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-mpack-list-mult {
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ff-green);
}
.ff-mpack-list-row--rare { border-color: rgba(85, 180, 255, 0.32); }
.ff-mpack-list-row--epic { border-color: rgba(176, 122, 255, 0.32); }
.ff-mpack-list-row--legendary { border-color: rgba(var(--ff-accent-rgb), 0.42); }
@keyframes ff-mpack-list-in {
  to { opacity: 1; transform: translateY(0); }
}
.ff-mpack-chrome--list .ff-mpack-footer {
  border-top-color: rgba(184, 255, 90, 0.16);
}
.ff-mpack-card-wrap {
  flex: 0 0 auto;
  width: var(--mp-card-w);
  max-width: 100%;
  scroll-snap-align: center;
  opacity: 0;
  transform: translateX(36px) scale(0.96);
  animation: ff-mpack-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ff-mpack-card-frame {
  width: 100%;
  /* Высота идёт из пропорции: карта не растягивается и не обрезается снизу. */
  aspect-ratio: 68 / 100;
  height: auto;
  max-height: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.ff-mpack-card-wrap--legendary {
  animation-name: ff-mpack-card-in-gold;
}
@keyframes ff-mpack-card-in {
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes ff-mpack-card-in-gold {
  0% { opacity: 0; transform: translateX(36px) scale(0.96); filter: drop-shadow(0 0 0 transparent); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.55)); }
}
.ff-mpack-card-wrap .ff-asset-card {
  margin: 0;
  width: 100%;
  height: 100%;
}
.ff-mpack-card-wrap .ff-asset-card.ff-asset-card--player {
  height: 100%;
  max-width: none;
}
.ff-mpack-card-wrap .ff-player-card-panel {
  min-height: 0;
  height: 100%;
  max-width: 100%;
  width: 100%;
}
.ff-mpack-card-wrap .ff-player-card-fut {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.ff-mpack-card-wrap .ff-player-card-silhouette-wrap {
  min-height: 0;
  flex: 1 1 auto;
}
.ff-mpack-card-wrap .ff-player-card-bio {
  min-height: 0;
  flex: 0 0 auto;
}
.ff-mpack-card-wrap .ff-asset-card-actions { display: none; }
@media (max-width: 640px) {
  .ff-modal.ff-modal--mpack {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100vw;
    width: 100dvw;
    height: 100%;
    height: 100dvh;
    max-height: none;
  }
  .ff-modal.ff-modal--mpack .ff-modal-chrome.ff-mpack-chrome,
  .ff-modal.ff-modal--mpack .ff-mpack-chrome {
    max-height: none;
    height: 100%;
    border-radius: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ff-mpack-stack-card,
  .ff-mpack-card-wrap,
  .ff-mpack-list-row,
  .ff-mpack-burst--on {
    animation: none !important;
  }
  .ff-mpack-card-wrap { opacity: 1; transform: none; }
}

.ff-pack-actions .ff-pack-continue {
  position: relative;
  z-index: 21;
  min-width: 160px;
  pointer-events: auto;
}

/* Sell price dialog */
.ff-modal--price {
  width: min(420px, 94vw);
  max-width: 420px;
}
.ff-price-body {
  display: grid;
  gap: 14px;
  padding-bottom: 8px;
}
.ff-price-field {
  display: grid;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--ff-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ff-price-field input,
.ff-price-input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid var(--ff-border);
  background: var(--ff-input-bg);
  color: var(--ff-text);
  padding: 14px 14px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.ff-price-field input:focus,
.ff-price-input:focus {
  outline: none;
  border-color: rgba(200, 245, 168, 0.7);
  box-shadow: 0 0 0 3px rgba(200, 245, 168, 0.15);
}
.ff-price-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ff-pack-stage--reduce .ff-pack-flip {
  transition-duration: 0.25s;
}

.ff-pack-stage--reduce .ff-pack-particle {
  animation: none;
  opacity: 0;
}

.ff-pack-stage--reduce .ff-pack-flash--burst {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .ff-pack-flip {
    transition-duration: 0.2s;
  }
  .ff-pack-face--sealed,
  .ff-pack-seal-shine,
  .ff-pack-vignette--legendary {
    animation: none !important;
  }
  .ff-pack-particle {
    display: none;
  }
  .ff-pack-face--card .ff-asset-card--player .ff-player-card-rarity,
  .ff-pack-face--card .ff-asset-card--player .ff-player-card-meta-line,
  .ff-pack-face--card .ff-asset-card--player .ff-player-card-country-short,
  .ff-pack-face--card .ff-asset-card--player .ff-player-card-silhouette-wrap,
  .ff-pack-face--card .ff-asset-card--player .ff-player-card-name-box,
  .ff-pack-face--card .ff-asset-card--player .ff-asset-card-deco,
  .ff-pack-face--card .ff-asset-card--player .ff-asset-card-glow {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}


/* --- Inventory table view --- */
.ff-inv-summary {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--ff-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ff-inv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
}

.ff-inv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--ff-radius-sm);
  border: 1px solid var(--ff-border);
  background: var(--ff-surface);
  box-shadow: var(--ff-shadow-sm);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.ff-inv-item--player {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  cursor: default;
}

.ff-inv-player-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ff-inv-item:hover {
  border-color: var(--ff-border-strong);
  box-shadow: var(--ff-shadow-card);
}

.ff-inv-item:active {
  transform: scale(0.99);
}

.ff-inv-item--player:active {
  transform: none;
}

.ff-inv-icon {
  font-size: 1rem;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}

.ff-inv-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ff-inv-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ff-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Позиция, клуб и шанс старта — отдельные элементы с зазором: строкой без
   разделителей они склеивались в одно слово и обрезались многоточием. */
.ff-inv-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 6px;
  min-width: 0;
  font-size: 0.76rem;
  color: var(--ff-text-dim);
}
.ff-inv-meta-club {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ближайший матч — отдельной строкой под клубом. */
.ff-inv-match {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--ff-text-faint);
}
.ff-inv-meta-start {
  flex-shrink: 0;
  font-family: var(--ff-font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ff-text-faint);
  background: var(--ff-inset);
  border-radius: 999px;
  padding: 1px 7px;
}

.ff-inv-kit-wrap {
  display: grid;
  gap: 6px;
}
.ff-inv-hint {
  margin: -4px 0 12px;
  font-size: 0.78rem;
  color: var(--ff-text-dim);
}

.ff-inv-kit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.ff-inv-kit-slot {
  position: relative;
  z-index: 3;
  width: 52px;
  height: 48px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.22);
  background: var(--ff-inset);
  color: rgba(255,255,255,0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  padding: 0;
  font: inherit;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(var(--ff-accent-rgb), 0.25);
}
.ff-inv-kit-slot--empty:hover {
  border-color: rgba(var(--ff-accent-rgb), 0.45);
  color: var(--ff-r-legendary);
}
.ff-inv-kit-slot--filled {
  border-style: solid;
  color: var(--ff-text);
}
.ff-inv-kit-slot--common { border-color: color-mix(in srgb, var(--ff-r-common) 55%, transparent); background: color-mix(in srgb, var(--ff-r-common) 12%, transparent); }
.ff-inv-kit-slot--rare { border-color: color-mix(in srgb, var(--ff-r-rare) 55%, transparent); background: color-mix(in srgb, var(--ff-r-rare) 12%, transparent); color: var(--ff-r-rare); }
.ff-inv-kit-slot--epic { border-color: color-mix(in srgb, var(--ff-r-epic) 55%, transparent); background: color-mix(in srgb, var(--ff-r-epic) 12%, transparent); color: var(--ff-r-epic); }
.ff-inv-kit-slot--legendary { border-color: color-mix(in srgb, var(--ff-r-legendary) 55%, transparent); background: color-mix(in srgb, var(--ff-r-legendary) 12%, transparent); color: var(--ff-r-legendary); }
.ff-inv-kit-glyph { font-size: 0.72rem; font-weight: 800; }
.ff-inv-kit-plus, .ff-inv-kit-x { font-size: 0.65rem; opacity: 0.85; }
.ff-inv-kit-boost {
  margin-left: auto;
  font-family: var(--ff-font-mono, JetBrains Mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ff-r-legendary);
}

.ff-inv-pick-row--disabled,
.ff-inv-pick-row:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ff-inv-pick-list { display: grid; gap: 8px; }

/* Inventory / market player card preview — fullscreen so the card isn't clipped */
.ff-modal.ff-modal--card-preview {
  inset: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100vw;
  width: 100dvw;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  animation: ff-card-preview-fs-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ff-card-preview-fs-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ff-modal--card-preview .ff-modal-chrome.ff-card-preview-chrome {
  border-radius: 0;
  border: none;
  max-height: none;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(184, 255, 90, 0.08), transparent 48%),
    linear-gradient(180deg, #0b1220 0%, #070b14 100%);
  box-shadow: none;
}
.ff-modal--card-preview .ff-modal-header {
  flex: 0 0 auto;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: rgba(7, 11, 20, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ff-card-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Карточка сверху, под ней экипировка и статы. */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.ff-card-preview-body > .ff-cardview-extra {
  width: min(340px, 88vw);
}
.ff-inv-card-preview-wrap {
  width: min(340px, 88vw);
  max-width: min(340px, 88vw);
  margin: 0 auto;
}
.ff-inv-card-preview-wrap .ff-asset-card {
  margin: 0;
  width: 100%;
}
.ff-inv-card-preview-wrap .ff-asset-card.ff-asset-card--player {
  max-width: none;
  height: min(470px, calc(100dvh - 320px));
}
.ff-inv-card-preview-wrap .ff-player-card-panel {
  min-height: 0;
  height: 100%;
  max-width: none;
  width: 100%;
}
.ff-inv-card-preview-wrap .ff-player-card-fut {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.ff-inv-card-preview-wrap .ff-player-card-silhouette-wrap {
  min-height: 0;
  flex: 1 1 auto;
}
.ff-inv-card-preview-wrap .ff-asset-card-actions { display: none; }

@media (max-width: 640px) {
  .ff-modal.ff-modal--card-preview {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100vw;
    width: 100dvw;
    height: 100%;
    height: 100dvh;
    max-height: none;
  }
  .ff-modal.ff-modal--card-preview .ff-modal-chrome.ff-card-preview-chrome {
    max-height: none;
    height: 100%;
    border-radius: 0;
  }
  .ff-inv-card-preview-wrap {
    width: min(320px, 90vw);
    max-width: min(320px, 90vw);
  }
  .ff-inv-card-preview-wrap .ff-asset-card.ff-asset-card--player {
    height: min(520px, calc(100dvh - 120px));
  }
}

.ff-inv-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ff-border);
  background: var(--ff-surface);
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.ff-inv-pick-row:hover { border-color: rgba(212,175,55,0.35); }
.ff-inv-pick-meta { display: grid; gap: 2px; }
.ff-inv-pick-meta span { font-size: 0.75rem; color: var(--ff-text-dim); }

.ff-inv-r--common { color: var(--ff-r-common); }
.ff-inv-r--rare { color: var(--ff-r-rare); }
.ff-inv-r--epic { color: var(--ff-r-epic); }
.ff-inv-r--legendary { color: var(--ff-r-legendary); }

.ff-inv-pos {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
}

.ff-inv-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 380px) {
  .ff-inv-item { padding: 10px; gap: 9px; }
  .ff-inv-name { font-size: 0.86rem; }
  .ff-inv-meta { font-size: 0.72rem; }
  .ff-inv-kit-slot { width: 48px; height: 44px; }
}

.ff-inv-item--used { opacity: 0.55; }
.ff-inv-used, .ff-inv-used-label { color: var(--ff-red); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; }

/* --- Pack reveal: ensure card fills scene --- */
.ff-pack-face--card .ff-asset-card.ff-asset-card--player {
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.ff-pack-face--card .ff-player-card-panel {
  min-height: 0;
  height: 100%;
  max-width: 100%;
}

.ff-pack-face--card .ff-player-card-fut {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.ff-pack-face--card .ff-player-card-silhouette-wrap {
  min-height: 0;
  flex: 1;
}
/* Pack reveal: bio min-height so layout doesn't collapse during reveal */
.ff-pack-face--card .ff-player-card-bio {
  min-height: 110px;
}

/* --- Store / Market / SBC --- */
.ff-mkt-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  padding: 3px;
  border-radius: 12px;
  background: var(--ff-inset);
  border: 1px solid var(--ff-border);
}

.ff-mkt-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  padding: 8px 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ff-text-dim);
  background: transparent;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.ff-mkt-tab:hover { color: var(--ff-text); }

@media (min-width: 520px) {
  .ff-mkt-tab {
    font-size: 0.86rem;
    padding: 9px 8px;
  }
}

/* Сворачиваемые фильтры — один компонент для рынка, инвентаря и турниров.
   По умолчанию свёрнуты: развёрнутая панель занимала весь первый экран. */
.ff-filters,
.ff-mkt-more {
  display: grid;
  gap: 8px;
}
.ff-filters-toggle,
.ff-mkt-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ff-border);
  background: var(--ff-surface);
  color: var(--ff-text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.ff-filters-toggle::-webkit-details-marker,
.ff-mkt-more-toggle::-webkit-details-marker { display: none; }
.ff-filters-toggle::after,
.ff-mkt-more-toggle::after {
  content: '▾';
  font-size: 11px;
  margin-left: auto;
  padding-left: 2px;
  transition: transform 0.18s;
}
/* Что именно отфильтровано — видно, не разворачивая панель */
.ff-filters-active {
  color: var(--ff-gold);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-filters[open] .ff-filters-toggle,
.ff-mkt-more[open] .ff-mkt-more-toggle {
  border-color: var(--ff-border-strong);
  color: var(--ff-gold);
}
.ff-filters[open] .ff-filters-toggle::after,
.ff-mkt-more[open] .ff-mkt-more-toggle::after { transform: rotate(180deg); }
.ff-filters-body {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.ff-mkt-tab--active {
  color: var(--ff-ink);
  background: var(--ff-accent-fill);
}

.ff-vusd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.ff-vusd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(184, 233, 134, 0.22);
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(184, 233, 134, 0.16), transparent 55%),
    rgba(8, 22, 16, 0.72);
}

.ff-vusd-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0b1a14;
  background: linear-gradient(180deg, #d4f5a8, #9fd978);
}

.ff-vusd-card-amt {
  font-family: var(--ff-font-display, Unbounded, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #c8f5a8;
  line-height: 1.15;
}

.ff-vusd-card-amt span {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.8;
}

.ff-vusd-card-label {
  font-size: 0.72rem;
  color: var(--ff-text-faint);
}

.ff-vusd-card-price {
  font-family: var(--ff-font-mono, "JetBrains Mono", monospace);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ff-gold);
  margin-bottom: 2px;
}

.ff-vusd-card .ff-btn {
  margin-top: auto;
}

.ff-store-pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}

.ff-store-pay .ff-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 6px 4px;
  line-height: 1.15;
  font-size: 0.72rem;
}

.ff-store-pay-amt {
  font-family: var(--ff-font-mono, "JetBrains Mono", monospace);
  font-weight: 700;
  font-size: 0.82rem;
}

.ff-store-pay-cur {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.8;
  text-transform: uppercase;
}

.ff-store-block-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ff-text-faint);
}

.ff-mkt-hint {
  margin: 0 0 14px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ff-text-dim);
}

.ff-mkt-filters {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

/* Поля ввода описаны единым правилом в app.css */

.ff-mkt-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 520px) {
  .ff-mkt-filter-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ff-mkt-list {
  display: grid;
  gap: 8px;
}

.ff-mkt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ff-border);
  background: var(--ff-surface);
}

.ff-mkt-row-main { min-width: 0; flex: 1; }
.ff-mkt-row-name {
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-mkt-row-meta {
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--ff-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-mkt-row-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
}
.ff-mkt-price-tag {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ff-green);
}
.ff-mkt-amount--plus { color: var(--ff-green); }
.ff-mkt-amount--minus { color: var(--ff-red); }
.ff-mkt-row--tap { cursor: pointer; }
.ff-mkt-row--tap:active { background: rgba(200, 245, 168, 0.06); }
.ff-mkt-row-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ff-mkt-row-hint {
  margin-top: 3px;
  font-size: 0.62rem;
  color: var(--ff-text-faint);
}
.ff-mkt-side-pill {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ff-mkt-side-pill--buy {
  background: rgba(248, 113, 113, 0.16);
  color: var(--ff-red);
}
.ff-mkt-side-pill--sell {
  background: rgba(134, 239, 172, 0.16);
  color: var(--ff-green);
}

.ff-sbc-list {
  display: grid;
  gap: 8px;
}
/* Крафт, шаг 1: плитки-иконки вместо строк со словом «форма» */
.ff-craft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
}

.ff-craft-tile {
  --tier: var(--ff-r-common);
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 10px 12px;
  border-radius: var(--ff-radius);
  border: 1px solid var(--ff-border);
  background: var(--ff-surface);
  box-shadow: var(--ff-shadow-card);
  color: var(--ff-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.ff-craft-tile:hover { border-color: var(--tier); box-shadow: var(--ff-shadow); }
.ff-craft-tile:active { transform: scale(0.98); }
.ff-craft-tile:focus-visible { outline: none; box-shadow: var(--ff-ring); }

.ff-craft-tile--common { --tier: var(--ff-r-common); }
.ff-craft-tile--rare { --tier: var(--ff-r-rare); }
.ff-craft-tile--epic { --tier: var(--ff-r-epic); }
.ff-craft-tile--legendary { --tier: var(--ff-r-legendary); }

.ff-craft-tile-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tier) 12%, transparent);
}
.ff-craft-tile-ico .ff-form-ico--lg { width: 60px; height: 60px; }
.ff-craft-tile-ico .ff-form-ico--lg .ff-form-silhouette { width: 52px; height: 52px; }
.ff-craft-tile-ico .ff-form-ico { color: var(--tier); }

.ff-craft-tile-name {
  font-weight: 700;
  /* «Легендарная» — самое длинное слово, подгоняем под ширину плитки */
  font-size: clamp(0.78rem, 3.2vw, 0.95rem);
  color: var(--tier);
  line-height: 1.2;
  hyphens: auto;
}
.ff-craft-tile-need {
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--ff-text-dim);
}
.ff-craft-tile-rate {
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.ff-craft-tile--off { opacity: 0.55; }

/* Чип шанса успеха крафта */
.ff-sbc-card-rate {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.ff-craft-tile-rate--hi,
.ff-sbc-card-rate--hi {
  color: var(--ff-green);
  border-color: color-mix(in srgb, var(--ff-green) 30%, transparent);
  background: color-mix(in srgb, var(--ff-green) 11%, transparent);
}
.ff-craft-tile-rate--mid,
.ff-sbc-card-rate--mid {
  color: var(--ff-amber);
  border-color: color-mix(in srgb, var(--ff-amber) 30%, transparent);
  background: color-mix(in srgb, var(--ff-amber) 11%, transparent);
}
.ff-craft-tile-rate--lo,
.ff-sbc-card-rate--lo {
  color: var(--ff-red);
  border-color: color-mix(in srgb, var(--ff-red) 30%, transparent);
  background: color-mix(in srgb, var(--ff-red) 10%, transparent);
}

.ff-sbc-card {
  text-align: left;
  border-radius: var(--ff-radius);
  border: 1px solid var(--ff-border);
  background: var(--ff-surface);
  padding: 12px 14px;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ff-sbc-card--off { opacity: 0.55; }
.ff-sbc-card-main { flex: 1 1 auto; min-width: 0; }
.ff-sbc-card-arrow { color: var(--ff-text-dim); font-size: 1rem; flex: 0 0 auto; }
.ff-sbc-card-gem {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, #94a3b8, #64748b);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.ff-sbc-card-gem--rare { background: linear-gradient(145deg, #60a5fa, #2563eb); }
.ff-sbc-card-gem--epic { background: linear-gradient(145deg, #c084fc, #7c3aed); }
.ff-sbc-card-gem--legendary { background: linear-gradient(145deg, #fcd34d, #d97706); }
.ff-sbc-step-label {
  display: inline-block;
  margin: 4px 0 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ff-text-dim);
}
.ff-sbc-detail-head {
  margin: 8px 0 12px;
  border-radius: 14px;
  border: 1px solid var(--ff-border);
  background: var(--ff-surface);
  padding: 12px 14px;
}
.ff-sbc-detail-head--rare { border-color: rgba(37, 99, 235, 0.45); }
.ff-sbc-detail-head--epic { border-color: rgba(124, 58, 237, 0.45); }
.ff-sbc-detail-head--legendary { border-color: rgba(217, 119, 6, 0.5); }
.ff-sbc-card-title { font-weight: 800; font-size: 0.95rem; }
.ff-sbc-card-meta {
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--ff-text-dim);
}
.ff-sbc-detail-head { margin: 8px 0 12px; }
.ff-sbc-detail-title { margin: 8px 0 4px; font-size: 1.05rem; }
.ff-sbc-reward-pill {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  background: rgba(var(--ff-accent-rgb), 0.14);
  color: var(--ff-gold-light);
}
.ff-sbc-slots { display: grid; gap: 8px; }
.ff-sbc-slot {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--ff-border);
  background: var(--ff-inset);
  display: grid;
  gap: 6px;
}
.ff-sbc-slot-req { font-size: 0.72rem; color: var(--ff-text-dim); }
.ff-sbc-slot-chosen { font-size: 0.78rem; font-weight: 700; }
.ff-sbc-admin { display: grid; gap: 10px; }
.ff-sbc-field { display: grid; gap: 4px; font-size: 0.72rem; color: var(--ff-text-dim); }
.ff-sbc-field--inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}
.ff-sbc-slot-edit {
  display: grid;
  grid-template-columns: auto 1fr 1fr 0.7fr auto;
  gap: 4px;
  align-items: center;
  margin-bottom: 6px;
}
.ff-sbc-slot-num { font-size: 0.7rem; color: var(--ff-text-faint); }
.ff-sbc-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 640px) {
  /* Кнопки хаба (Задания / Рейтинг / Админ) — одна строка равных колонок:
     их число зависит от роли, поэтому колонки не фиксируем. */
  .ff-hub-bar-actions {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .ff-hub-bar-actions .ff-btn { width: 100%; }
  .ff-mkt-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ff-mkt-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ff-mkt-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ff-mkt-row-side {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .ff-mkt-row-side .ff-btn {
    flex: 0 0 auto;
  }
  .ff-sbc-slot-edit {
    grid-template-columns: 1fr 1fr;
  }
  .ff-sbc-slot-num { grid-column: 1 / -1; }
}

/* ===== Fantasy Vibe kit paint ===== */
.ff-asset-card--player {
  --ff-kit-primary: #a8b4c8;
  --ff-kit-secondary: #6b7280;
  --ff-kit-intensity: 0;
  position: relative;
  overflow: hidden;
}
.ff-kit-max--common { --ff-kit-primary: #a8b4c8; --ff-kit-secondary: #6b7280; }
.ff-kit-max--rare { --ff-kit-primary: #55b4ff; --ff-kit-secondary: #1d4ed8; }
.ff-kit-max--epic { --ff-kit-primary: #b07aff; --ff-kit-secondary: #6d28d9; }
.ff-kit-max--legendary { --ff-kit-primary: #ffb347; --ff-kit-secondary: #ffd08a; }

.ff-kit-tier--bare { --ff-kit-intensity: 0; }
.ff-kit-tier--lit { --ff-kit-intensity: 0.35; }
.ff-kit-tier--charged { --ff-kit-intensity: 0.55; }
.ff-kit-tier--amped { --ff-kit-intensity: 0.75; }
.ff-kit-tier--ascended { --ff-kit-intensity: 1; }

.ff-asset-card--player.ff-kit-tier--lit,
.ff-asset-card--player.ff-kit-tier--charged,
.ff-asset-card--player.ff-kit-tier--amped,
.ff-asset-card--player.ff-kit-tier--ascended {
  border-color: color-mix(in srgb, var(--ff-kit-primary) calc(var(--ff-kit-intensity) * 100%), transparent);
  box-shadow:
    0 0 calc(8px + 24px * var(--ff-kit-intensity)) color-mix(in srgb, var(--ff-kit-primary) calc(var(--ff-kit-intensity) * 55%), transparent),
    inset 0 0 calc(20px + 40px * var(--ff-kit-intensity)) color-mix(in srgb, var(--ff-kit-secondary) calc(var(--ff-kit-intensity) * 25%), transparent);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--ff-kit-primary) calc(var(--ff-kit-intensity) * 28%), rgba(8, 14, 12, 0.92)) 0%,
      color-mix(in srgb, var(--ff-kit-secondary) calc(var(--ff-kit-intensity) * 18%), rgba(6, 10, 9, 0.96)) 55%,
      rgba(4, 8, 7, 0.98) 100%
    );
}

.ff-kit-tier--ascended {
  animation: ff-kit-pulse 2.8s ease-in-out infinite;
}
@keyframes ff-kit-pulse {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.25) brightness(1.05); }
}

.ff-player-card-boost {
  position: static;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ff-ink);
  background: linear-gradient(135deg, var(--ff-kit-primary), var(--ff-kit-secondary));
  flex-shrink: 0;
}

.ff-player-card-kit-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  width: 100%;
  margin: 0 0 6px;
  box-sizing: border-box;
}

.ff-kit-minis {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 0;
  position: relative;
  z-index: 2;
}
.ff-kit-mini .ff-form-silhouette {
  width: 14px;
  height: 14px;
  filter: none;
  opacity: 0.95;
}
.ff-kit-mini--empty { opacity: 0.35; }
.ff-kit-mini--common { border-color: var(--ff-r-common); color: var(--ff-r-common); }
.ff-kit-mini--rare { border-color: var(--ff-r-rare); color: var(--ff-r-rare); }
.ff-kit-mini--epic { border-color: var(--ff-r-epic); color: var(--ff-r-epic); }
.ff-kit-mini--legendary { border-color: var(--ff-r-legendary); color: var(--ff-r-legendary); }

.ff-inv-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.ff-inv-filter-row .ff-inv-search { grid-column: 1 / -1; }
.ff-inv-filter-row .ff-inv-reset {
  min-height: 44px;
  padding-block: 0;
  white-space: nowrap;
}
.ff-inv-filter-row .ff-inv-reset[hidden] { display: none; }
/* Убираем стрелки у поля «Очки от»: на мобильном они только мешают */
.ff-inv-minpts::-webkit-outer-spin-button,
.ff-inv-minpts::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ff-inv-minpts { -moz-appearance: textfield; appearance: textfield; }

/* Позиции — чипы над свёрнутыми фильтрами, растянуты на всю ширину */
.ff-inv-pos-row {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
}
.ff-inv-pos-chip {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 6px;
  text-align: center;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
}
.ff-inv-summary-total { color: var(--ff-text-faint); font-weight: 500; }
.ff-inv-search {
  flex: 1 1 140px;
  min-width: 0;
}
.ff-inv-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ff-fav-btn {
  border: 0;
  background: transparent;
  color: var(--ff-text-faint);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.ff-fav-btn--on { color: var(--ff-r-legendary); }

.ff-loadout {
  display: grid;
  gap: 14px;
}
.ff-loadout-card {
  display: flex;
  justify-content: center;
}
.ff-loadout-slots {
  display: grid;
  gap: 10px;
}
.ff-loadout-slot {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ff-border);
  background: var(--ff-inset);
}
.ff-loadout-slot-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.85rem;
}
.ff-loadout-slot-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}
.ff-loadout-slot-actions .ff-lo-unequip {
  grid-column: 1 / -1;
}
.ff-loadout-cur { color: var(--ff-text-dim); font-size: 0.78rem; }

.ff-form-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: currentColor;
}
.ff-form-ico .ff-form-silhouette {
  width: 22px;
  height: 22px;
}
/* Контур эмблемы задаём на НЕмаскированной обёртке: filter применяется до
   mask, поэтому прямо на силуэте обводку срезает та же маска. */
.ff-form-edge {
  display: inline-flex;
  line-height: 0;
}
.ff-form-ico--sm { width: 22px; height: 22px; }
.ff-form-ico--sm .ff-form-silhouette { width: 16px; height: 16px; }
.ff-form-ico--lg { width: 72px; height: 72px; }
.ff-form-ico--lg .ff-form-silhouette { width: 64px; height: 64px; }
.ff-form-ico--empty { color: var(--ff-text-faint); }
.ff-form-ico--common { color: var(--ff-r-common); }
.ff-form-ico--rare { color: var(--ff-r-rare); }
.ff-form-ico--epic { color: var(--ff-r-epic); }
.ff-form-ico--legendary { color: var(--ff-r-legendary); }
.ff-form-ico-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--ff-accent-fill);
  color: var(--ff-ink);
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}
.ff-form-ico-badge--off { background: var(--ff-red); color: #fff; }

.ff-kit-empty { text-align: center; display: grid; gap: 10px; padding: 8px 0 16px; }
.ff-kit-empty-visual { display: flex; justify-content: center; }
.ff-kit-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Лоты рынка — компактная сетка: карточка мельче, картинка предмета не во
   весь экран, на экран помещается ~4 лота. */
.ff-mkt-list--lots {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: 8px;
}
.ff-mkt-lot {
  min-width: 0;
}
.ff-mkt-lot .ff-asset-card { width: 100%; max-width: none; }
.ff-mkt-lot .ff-asset-card-actions {
  display: grid;
  gap: 6px;
}
.ff-mkt-lot .ff-asset-card--form {
  min-height: 0;
  padding: 10px;
  border-radius: 14px;
}
.ff-mkt-lot .ff-form-card {
  gap: 8px;
  padding: 0;
}
.ff-mkt-lot .ff-form-card-visual {
  aspect-ratio: auto;
  height: 68px;
  max-height: 68px;
  border-radius: 12px;
}
.ff-mkt-lot .ff-form-silhouette {
  width: 42px;
  height: 42px;
}
.ff-mkt-lot .ff-form-card-facts { gap: 4px; }
.ff-mkt-lot .ff-form-fact {
  gap: 4px;
  padding: 5px 7px;
  border-radius: 8px;
}
.ff-mkt-lot .ff-form-fact-k {
  font-size: 0.56rem;
  letter-spacing: 0.02em;
}
.ff-mkt-lot .ff-form-fact-v {
  font-size: 0.78rem;
  /* В узкой колонке первым ужимается заголовок строки, а не значение. */
  flex-shrink: 0.25;
}
.ff-mkt-lot .ff-mkt-price-tag { font-size: 0.86rem; }
.ff-mkt-lot .ff-btn {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.78rem;
}
.ff-mkt-price-tag {
  display: block;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ff-sbc-slot--pick {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ff-sbc-slot--filled {
  border-color: rgba(var(--ff-accent-rgb), 0.35);
}
.ff-sbc-slot-empty {
  font-size: 0.78rem;
  color: var(--ff-text-faint);
}
.ff-sbc-slot-chosen {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ff-sbc-result { display: grid; gap: 10px; }
.ff-sbc-result--fail .ff-empty-title { color: var(--ff-red); }
.ff-sbc-result--ok .ff-empty-title { color: var(--ff-green); }
.ff-sbc-result-list { margin: 0; padding-left: 18px; color: var(--ff-text-dim); }
.ff-sbc-result-burn { margin: 8px 0 0; font-size: 0.78rem; color: var(--ff-text-faint); }

.ff-inv-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 640px) {
  .ff-loadout-slot-actions {
    grid-template-columns: 1fr;
  }
}

html.ff-theme-light .ff-inv-item {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(28, 18, 12, 0.08);
}
html.ff-theme-light .ff-inv-meta,
html.ff-theme-light .ff-mkt-hint,
html.ff-theme-light .ff-sbc-card-meta,
html.ff-theme-light .ff-sbc-card-desc {
  color: var(--ff-text-dim);
}
html.ff-theme-light .ff-inv-pick-row,
html.ff-theme-light .ff-sbc-slot,
html.ff-theme-light .ff-sbc-card,
html.ff-theme-light .ff-mkt-row {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(28, 18, 12, 0.1);
  color: var(--ff-text);
}
html.ff-theme-light .ff-sbc-result-list,
html.ff-theme-light .ff-sbc-result-burn {
  color: var(--ff-text-dim);
}


/* ---------- Строка инвентаря: фигура в клубных цветах + герб ---------- */
.ff-inv-figure {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 52px;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ff-surface-2), var(--ff-inset));
  border: 1px solid var(--ff-line, rgba(12, 36, 34, 0.2));
}
.ff-inv-figure-canvas {
  position: absolute;
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
  height: 104px;
  width: auto;
  display: block;
}
.ff-inv-figure-crest {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 22px;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.ff-inv-figure-crest svg { width: 100%; height: 100%; display: block; }
.ff-inv-player-top { align-items: center; gap: 10px; }

/* ---------- Экран карточки: экипировка + статы под картой ---------- */
.ff-cardview-extra {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.ff-cardview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ff-cardview-head h3 {
  margin: 0;
  font-family: var(--ff-display, 'Outfit', sans-serif);
  font-size: 15px;
  font-weight: 800;
  color: var(--ff-text);
}
.ff-cardview-head h3 span {
  font-weight: 600;
  font-size: 11.5px;
  color: var(--ff-text-faint);
}
.ff-cardview-head b {
  font-family: var(--ff-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ff-green);
}
.ff-cardview-kits { display: flex; gap: 8px; }
.ff-cardview-kit {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 4px 10px;
  border-radius: 13px;
  background: var(--ff-surface-2);
  box-shadow: 0 2px 8px rgba(6, 59, 56, 0.07);
  overflow: hidden;
}
.ff-cardview-kit b {
  font-family: var(--ff-font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--ff-text-faint);
}
.ff-cardview-kit--on b { color: var(--ff-text); }
.ff-cardview-kit--on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ff-kit-primary), var(--ff-kit-secondary));
}
.ff-cardview-kit .ff-form-silhouette,
.ff-cardview-kit svg { width: 22px; height: 22px; }
.ff-cardview-stats { display: flex; gap: 8px; }
.ff-cardview-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--ff-surface-2);
  box-shadow: 0 2px 8px rgba(6, 59, 56, 0.07);
}
.ff-cardview-stat b {
  font-family: var(--ff-font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--ff-text);
}
.ff-cardview-stat span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ff-text-faint);
}

/* ============================================================
   КАРТОЧКА ИГРОКА — 1:1 с макетом.
   Цвет ленты, рамки и плашки задаёт надетая форма:
   max_rarity даёт палитру, fill (0–4) — есть ли свечение.
   ============================================================ */
.ff-pcard {
  --pc-border: #9fb0bb;
  --pc-glow: rgba(159, 176, 187, 0);
  --pc-p1: #f2f5f6;
  --pc-p2: #e4eaed;
  --pc-p3: #c9d3da;
  --pc-band1: #c9d3da;
  --pc-band2: #eef2f4;
  --pc-ink: #33474f;

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #fffdf8;
  border: 3px solid var(--pc-border);
  box-shadow: 0 0 26px var(--pc-glow), 0 18px 36px rgba(20, 30, 28, 0.18);
}
.ff-pcard--bare {
  --pc-border: #d5e2df;
  --pc-glow: rgba(0, 0, 0, 0);
  --pc-p1: #f7faf9;
  --pc-p2: #eef4f2;
  --pc-p3: #dde7e4;
  --pc-band1: #dde7e4;
  --pc-band2: #f2f7f6;
  --pc-ink: #4a5f5b;
}
.ff-pcard--rare {
  --pc-border: #3b82f6;
  --pc-glow: rgba(59, 130, 246, 0.3);
  --pc-p1: #eaf3ff;
  --pc-p2: #d0e4ff;
  --pc-p3: #a8cdff;
  --pc-band1: #8ab8f5;
  --pc-band2: #c0dbff;
  --pc-ink: #123a70;
}
.ff-pcard--epic {
  --pc-border: #8b5cf6;
  --pc-glow: rgba(139, 92, 246, 0.35);
  --pc-p1: #f6efff;
  --pc-p2: #e3d3ff;
  --pc-p3: #c3a6ff;
  --pc-band1: #b28aff;
  --pc-band2: #d9c4ff;
  --pc-ink: #3b1d70;
}
.ff-pcard--legendary {
  --pc-border: #e0a33c;
  --pc-glow: rgba(240, 169, 74, 0.42);
  --pc-p1: #fff6e6;
  --pc-p2: #ffe3b8;
  --pc-p3: #f6c079;
  --pc-band1: #f0b45f;
  --pc-band2: #ffd79a;
  --pc-ink: #5a3708;
}

.ff-pcard-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(90deg, var(--pc-band1), var(--pc-band2));
  color: var(--pc-ink);
}
.ff-pcard-band-k {
  font-family: var(--ff-display, 'Outfit', sans-serif);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ff-pcard-band-v {
  font-family: var(--ff-font-mono);
  font-size: 11.5px;
  font-weight: 700;
}

.ff-pcard-plate {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--pc-p1) 0%, var(--pc-p2) 46%, var(--pc-p3) 100%);
}
.ff-pcard-shine {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(66% 40% at 50% 8%, rgba(255, 255, 255, 0.85), transparent 62%),
    repeating-linear-gradient(64deg, rgba(255, 255, 255, 0.3) 0 9px, transparent 9px 26px);
}
.ff-pcard-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(114deg, transparent 34%, rgba(255, 255, 255, 0.5) 47%, transparent 58%);
}
.ff-pcard-figure {
  position: absolute;
  left: 50%;
  bottom: -26%;
  transform: translateX(-50%);
  height: 117%;
  display: block;
}
/* Обёртки силуэта из общей вёрстки ужимали фигуру до 78% ширины и держали
   свой aspect-ratio — на карточке размер задаёт сам канвас, во всю высоту. */
.ff-pcard-figure .ff-player-silhouette-shadow,
.ff-pcard-figure .ff-player-silhouette-inner {
  display: block;
  width: auto;
  max-width: none;
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
  margin: 0;
}
.ff-pcard-figure canvas,
.ff-pcard-figure .ff-player-kit-zones-canvas,
.ff-pcard-figure .ff-player-silhouette-svg {
  position: relative;
  left: auto;
  top: auto;
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(40, 30, 10, 0.32));
}

.ff-pcard-pts {
  position: absolute;
  top: 12px;
  left: 13px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 2;
}
.ff-pcard-pts b {
  font-family: var(--ff-font-mono);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--pc-ink);
}
.ff-pcard-pts i {
  font-style: normal;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pc-ink) 62%, transparent);
}
/* Флаг страны — столбиком над гербом клуба. */
.ff-pcard-badges {
  position: absolute;
  top: 11px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.ff-pcard-crest {
  display: block;
  width: 40px;
  height: 44px;
  line-height: 0;
  filter: drop-shadow(0 3px 5px rgba(40, 30, 10, 0.3));
}
.ff-pcard-crest svg { width: 100%; height: 100%; display: block; }

.ff-pcard-id {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 26px 13px 11px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0) 0%, rgba(255, 253, 248, 0.94) 44%, #fffdf8 100%);
}
.ff-pcard-name {
  display: block;
  font-family: var(--ff-display, 'Outfit', sans-serif);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #0c2422;
  text-transform: uppercase;
}
.ff-pcard-flag {
  display: block;
  font-size: 1.85rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(40, 30, 10, 0.3));
}
.ff-pcard-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  min-width: 0;
}
.ff-pcard-pos {
  flex-shrink: 0;
  font-family: var(--ff-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--pc-ink);
  background: linear-gradient(90deg, var(--pc-band1), var(--pc-band2));
  border-radius: 4px;
  padding: 2px 6px;
}
.ff-pcard-club {
  font-size: 11.5px;
  font-weight: 700;
  color: #52706d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-pcard-boost {
  padding: 7px 12px;
  background: #fffdf8;
  border-top: 1px solid rgba(12, 36, 34, 0.08);
  font-family: var(--ff-font-mono);
  font-size: 11.5px;
  font-weight: 700;
  /* .ff-pcard светлая в обеих темах — здесь нужен фиксированный тёмный
     зелёный, а не var(--ff-green): в тёмной теме токен мятный и не читается. */
  color: #0e8544;
  text-align: center;
}


/* Новая карточка занимает контейнер целиком (превью, ревил пака, лоадаут). */
.ff-asset-card--player .ff-player-card-panel,
.ff-asset-card--player > .ff-pcard { height: 100%; }
.ff-inv-card-preview-wrap .ff-pcard { height: 100%; }
.ff-asset-card--player .ff-asset-card-deco,
.ff-asset-card--player .ff-asset-card-glow { display: none; }

/* ---------- Магазин: набор как предмет, а не строка прайса ---------- */
/* Арт — отдельная колонка грида: раньше он был абсолютным, а место под него
   держал padding-left на всей карточке, и строке покупки не хватало ширины. */
.ff-store-pack {
  position: relative;
  overflow: hidden;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas:
    "art top"
    "art name"
    "art content"
    "actions actions";
  column-gap: 16px;
  align-content: start;
}
.ff-store-pack-top { grid-area: top; }
.ff-store-pack-name { grid-area: name; }
.ff-store-pack-content { grid-area: content; }
.ff-store-pack-actions { grid-area: actions; }
.ff-store-pack-art {
  position: relative;
  grid-area: art;
  align-self: center;
  /* Веер уезжает влево на 13px — отступ, чтобы он не липнул к полосе тира. */
  margin-left: 6px;
  width: 58px;
  height: 72px;
}
.ff-store-pack-card {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 2px solid rgba(12, 36, 34, 0.22);
  background: linear-gradient(180deg, var(--pack-1, #dfe8ea), var(--pack-2, #b9c7cc));
  box-shadow: 0 4px 10px rgba(6, 40, 34, 0.22);
}
/* Веер из трёх карт: сдвиг заметный, иначе стопка читается как один квадрат. */
.ff-store-pack-card--3 { transform: rotate(-18deg) translate(-13px, 3px); opacity: 0.5; }
.ff-store-pack-card--2 { transform: rotate(-9deg) translate(-7px, 1px); opacity: 0.78; }
.ff-store-pack-card--1 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
}
.ff-store-pack-card--1 .ff-ico { width: 26px; height: 26px; }
/* «?» в углу набора: короткое объяснение, что внутри и зачем. */
.ff-store-pack-info {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(var(--ff-accent-rgb), 0.45);
  background: rgba(var(--ff-accent-rgb), 0.14);
  color: var(--ff-text);
  font-family: var(--ff-font-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.ff-store-pack-info:hover {
  background: rgba(var(--ff-accent-rgb), 0.26);
  border-color: rgba(var(--ff-accent-rgb), 0.7);
  transform: scale(1.06);
}

.ff-packinfo-name {
  margin: 4px 0 12px;
  font-family: var(--ff-font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ff-text);
}
.ff-packinfo-list,
.ff-packinfo-rules {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--ff-text-dim);
  font-size: 0.9rem;
  line-height: 1.45;
}
.ff-packinfo-list b { color: var(--ff-text); }
.ff-packinfo-sub {
  margin: 18px 0 8px;
  font-family: var(--ff-font-display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ff-text-faint);
}

.ff-store-pack--common { --pack-1: #dfe8ea; --pack-2: #9fb0bb; }
.ff-store-pack--rare { --pack-1: #8ab8f5; --pack-2: #2563eb; }
.ff-store-pack--epic { --pack-1: #b28aff; --pack-2: #7c3aed; }
.ff-store-pack--legendary { --pack-1: #ffd79a; --pack-2: #e0a33c; }
.ff-store-pack-name {
  font-family: var(--ff-display, 'Outfit', sans-serif);
  font-size: 1.02rem;
  font-weight: 800;
}
.ff-store-pay-amt { font-family: var(--ff-font-mono); font-weight: 700; }

.ff-store-pack .ff-store-buy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.ff-store-pack .ff-store-buy { flex: 1 1 auto; min-width: 0; }
.ff-store-pack .ff-qty-row { flex: 0 0 auto; }
/* Две кнопки оплаты делят строку: основной валюте — больше места. */
.ff-store-pack .ff-store-buy-row--dual .ff-store-buy { flex: 3 1 0; }
.ff-store-pack .ff-store-buy-row--dual .ff-store-buy-stars { flex: 2 1 0; }

/* ---------- Пустые состояния вкладок ---------- */
.ff-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 26px 18px 30px;
}
.ff-empty-state-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--ff-gold-soft);
  color: var(--ff-gold);
}
.ff-empty-state-art svg { display: block; }
.ff-empty-state-title {
  margin: 0;
  font-family: var(--ff-display, 'Outfit', sans-serif);
  font-size: 17px;
  font-weight: 800;
  color: var(--ff-text);
}
.ff-empty-state-help {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ff-text-dim);
  max-width: 280px;
}


/* Карточка в паке не должна обрезаться: занимает всю грань. */
.ff-pack-face--card .ff-asset-card--player {
  display: flex;
  height: 100%;
  min-height: 0;
}
.ff-pack-face--card .ff-asset-card--player > .ff-pcard { flex: 1 1 auto; }
.ff-pack-face--card .ff-asset-card-actions { display: none; }