/* «Звёздная коллекция» (web/hub/stars.js): сегмент «⭐ Звёзды», фон игрока за шапкой и в рейтинге,
   живые рамки и плашки титулов за звёзды. Отдельный файл — чтобы не мешать правкам hub.css.
   Анимации — только transform/opacity; за экраном пауза (.lv-off), в «меньше движения» — стоп. */

/* ---------- сегмент «⭐ Звёзды»: золотой акцент ---------- */
.seg .sx-segb { color: var(--gold-l); background: linear-gradient(180deg, #4a2a9a, #2d1a78); }
.seg .sx-segb[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, var(--gold-l), var(--gold) 60%, var(--gold-d)); }

/* ---------- картина фона + живой слой ---------- */
.sx-scene { position: relative; display: block; overflow: hidden; background: #120838; }
.sx-scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-scene .sx-ov { z-index: 1; }
/* в хабе слой лежит на картине: сетка и вихрь крупнее, чем в игре */
.sx-ov[data-bd="neoncity"] .gr { height: 40%; }
.sx-ov[data-bd="goldstorm"] .sw { opacity: calc(.28 * var(--k)); }
.sx-ov[data-bd="starnebula"] .cm { width: 26%; }
.sx-ov[data-bd="polar"] .au.a { height: 40%; }

/* ---------- фон игрока за шапкой ---------- */
.bar.sx-on { background: #120838; }
.sx-barbd { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sx-barbd .sx-scene { position: absolute; inset: 0; }
.sx-barbd .sx-scene > img { object-position: 50% 62%; }
.sx-barbd::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(16, 6, 50, .66), rgba(16, 6, 50, .12) 58%, rgba(16, 6, 50, .5));
}
.bar.sx-on > :not(.sx-barbd) { position: relative; z-index: 1; }

/* ---------- фон в строке рейтинга: тонкая живая полоса ---------- */
@keyframes sx-pan { from { transform: translateX(0); } to { transform: translateX(-15%); } }
@keyframes sx-sweep { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(260%); } }
.row.sx-row { position: relative; z-index: 0; }
.sx-rowbd { position: absolute; inset: 0; z-index: -1; border-radius: 14px; overflow: hidden; pointer-events: none; }
.sx-rowbd img { position: absolute; left: 0; top: 0; width: 118%; height: 100%; max-width: none; object-fit: cover; opacity: .8;
  will-change: transform; animation: sx-pan 18s ease-in-out infinite alternate; animation-delay: var(--lvd, 0s); }
.sx-rowbd::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 6, 50, .62), rgba(16, 6, 50, .18) 52%, rgba(16, 6, 50, .62)); }
.sx-rowbd .sh { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  animation: sx-sweep 6s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
.row.sx-row.me::after { content: ""; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 0 0 2.5px var(--gold); pointer-events: none; }

/* ---------- витрина коллекции ---------- */
@keyframes sx-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes sx-glow { 0%, 100% { opacity: .45; transform: scale(.92); } 50% { opacity: .9; transform: scale(1.08); } }
.sx-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 16px 14px;
  border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--ink), 0 0 22px rgba(255, 190, 40, .35);
  background: linear-gradient(135deg, #3a1490, #7b2bff 55%, #c2189a);
}
.sx-hero .sx-glow { position: absolute; left: -30px; top: 50%; width: 160px; height: 160px; margin-top: -80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 90, .75), transparent 65%); animation: sx-glow 3s ease-in-out infinite; }
.sx-hero img { position: relative; flex: none; filter: drop-shadow(0 3px 0 rgba(26, 16, 54, .6)); animation: sx-bob 2.8s ease-in-out infinite; }
.sx-hero > div { position: relative; min-width: 0; }
.sx-hero h2 { margin: 0; font-size: 22px; line-height: 1.1; }
.sx-hero p { margin: 6px 0 0; color: #fff; line-height: 1.3; font-size: 15px; }
.sx-count { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 999px; border: 2.5px solid var(--ink);
  background: rgba(16, 6, 50, .5); font: 900 14px/1.3 var(--display); color: var(--gold-l); }
.sx-sec { margin-top: 26px; }
.sx-note { margin: -6px 2px 12px; color: var(--muted); line-height: 1.3; font-size: 15px; }
.sx-grid { display: grid; gap: 16px 10px; }
.sx-grid.k-frame { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@keyframes sx-shimmer { 0% { transform: translateX(-140%) skewX(-18deg); } 55%, 100% { transform: translateX(340%) skewX(-18deg); } }
.sx-card {
  position: relative; overflow: hidden; border: 3px solid var(--ink); border-radius: 18px;
  background: linear-gradient(140deg, #2a1068, #5a1a9a); box-shadow: 0 5px 0 var(--ink), 0 0 16px rgba(255, 180, 40, .32);
}
/* легендарное сияние: по карточке пробегает золотой блик */
.sx-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 160, .28), transparent); animation: sx-shimmer 5s ease-in-out infinite; }
.sx-card.equipped { box-shadow: 0 5px 0 var(--ink), 0 0 0 3px var(--green) inset, 0 0 16px rgba(80, 255, 120, .35); }
.sx-card .sx-pv { position: relative; }
.sx-card .own { z-index: 4; }
.sx-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 12px; }
.sx-info .nm { font: 900 17px/1.15 var(--display); min-width: 0; }
.sx-buy .xtr, .sx-set .xtr { width: 22px; height: 22px; }
.sx-card.k-backdrop .sx-pv .sx-scene { aspect-ratio: 8 / 3; border-bottom: 3px solid var(--ink); }
.sx-card.k-frame { display: flex; flex-direction: column; align-items: stretch; }
.sx-card.k-frame .sx-pv { height: 108px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(255, 210, 90, .35), transparent 62%); }
.sx-card.k-frame .sx-info { flex-direction: column; align-items: stretch; padding: 4px 6px 8px; gap: 8px; margin-top: auto; }
.sx-card.k-frame .nm { font-size: 14px; text-align: center; min-height: 2.3em; display: grid; place-items: center; }
.sx-card.k-frame .btn { padding: 0 4px; font-size: 15px; }
.sx-fpv { width: 60px; height: 60px; }
.sx-fpv.sm { width: 46px; height: 46px; }
.sx-card.k-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px 10px 6px 4px; }
.sx-card.k-title .sx-info { padding: 0; }
.sx-card.k-title .nm { display: none; } /* название уже на плашке */

/* набор: картина фона под содержимым */
.sx-set { position: relative; overflow: hidden; margin-top: 22px; border: 3px solid var(--ink); border-radius: 20px;
  box-shadow: 0 5px 0 var(--ink), 0 0 22px rgba(255, 190, 40, .45); }
.sx-set .sx-scene.set { position: absolute; inset: 0; }
.sx-set-in { position: relative; z-index: 2; padding: 14px; display: grid; gap: 8px;
  background: linear-gradient(180deg, rgba(16, 6, 50, .25), rgba(16, 6, 50, .78)); }
.sx-set h3 { margin: 0; font-size: 22px; }
.sx-set p { margin: 0; color: #fff; line-height: 1.3; font-size: 15px; }
.sx-tag { justify-self: start; display: inline-flex; align-items: center; gap: 2px; padding: 0 10px; height: 28px; border-radius: 999px;
  border: 2.5px solid var(--ink); background: linear-gradient(90deg, #ffe36b, #ff9d2a); color: var(--ink); font: 900 14px/1 var(--display); }
.sx-tag .xtr { width: 20px; height: 20px; }
.sx-set-row { display: flex; align-items: center; gap: 16px; padding: 8px 4px 4px 10px; }
.sx-set-t { flex: 1; min-width: 0; }
.sx-set-act { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.sx-set-act s { color: var(--muted); font: 900 17px/1 var(--display); }
.sx-part { color: var(--gold-l); font-weight: 800; text-align: right; }
.sx-foot { margin: 18px 4px 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.35; }

/* баннер на «Играх» */
.banner.sx-teaser { overflow: hidden; background: #2a0f6e; box-shadow: 0 5px 0 var(--ink), 0 0 18px rgba(255, 190, 40, .4); }
.banner.sx-teaser .sx-scene.tz { position: absolute; inset: 0; }
.banner.sx-teaser .sx-scene.tz::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(16, 6, 50, .2), rgba(16, 6, 50, .7) 70%); }
.banner.sx-teaser > :not(.sx-scene) { position: relative; z-index: 3; }

/* ---------- живые рамки коллекции (места .fr — hub.css) ---------- */
@keyframes sx-pulse { 0%, 100% { opacity: .5; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes sx-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .82; } 9% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .7; } 50% { opacity: 1; } 51% { opacity: .86; } 52% { opacity: 1; } }
.lv-frame-sx-orbit .halo { border-radius: 50%;
  background: radial-gradient(circle, transparent 50%, rgba(90, 170, 255, .55) 61%, rgba(170, 120, 255, .22) 70%, transparent 78%);
  animation: sx-pulse 3s ease-in-out infinite; animation-delay: var(--lvd); }
.lv-frame-sx-orbit .shine {
  -webkit-mask: url(/assets/cosmetics/frame.sx_orbit.webp?v=1) center / 100% 100% no-repeat;
  mask: url(/assets/cosmetics/frame.sx_orbit.webp?v=1) center / 100% 100% no-repeat; }
.fr.lv.lv-frame-sx-orbit > .orb { inset: -2%; width: 104%; height: 104%; background: center / 100% 100% no-repeat;
  animation: lv-rot 9s linear infinite; animation-delay: var(--lvd); }
.fr.lv.lv-frame-sx-solar > .rays { inset: -3%; width: 106%; height: 106%; background: center / 100% 100% no-repeat;
  animation: lv-rot 22s linear infinite; animation-delay: var(--lvd); }
.lv-frame-sx-solar .shine {
  -webkit-mask: url(/assets/cosmetics/frame.sx_solar.webp?v=1) center / 100% 100% no-repeat;
  mask: url(/assets/cosmetics/frame.sx_solar.webp?v=1) center / 100% 100% no-repeat; }
.lv-frame-sx-solar .shine::before { animation-duration: 3s; }
.fr.lv.lv-frame-sx-solar > .gl { inset: auto; left: 38%; top: -9%; width: 24%; height: 24%; }
.fr.lv.lv-frame-sx-neon > img { animation: sx-flicker 4.5s linear infinite; animation-delay: var(--lvd); }
.fr.lv.lv-frame-sx-neon > .run { background: center / 100% 100% no-repeat; animation: lv-rot 2.8s linear infinite; animation-delay: var(--lvd); }
.fr.lv.lv-frame-sx-neon > .run.b { opacity: .6; animation-delay: calc(var(--lvd) - 1.4s); }

/* ---------- живые плашки титулов коллекции ---------- */
.plate-pv.lv-plate-sx-cosmic .shine { -webkit-mask: url(/assets/cosmetics/plate.stars-cosmic.webp?v=1) center / 100% 100% no-repeat; mask: url(/assets/cosmetics/plate.stars-cosmic.webp?v=1) center / 100% 100% no-repeat; }
.plate-pv.lv-plate-sx-gold .shine { -webkit-mask: url(/assets/cosmetics/plate.stars-gold.webp?v=1) center / 100% 100% no-repeat; mask: url(/assets/cosmetics/plate.stars-gold.webp?v=1) center / 100% 100% no-repeat; }
.plate-pv.lv-plate-sx-neon .shine { -webkit-mask: url(/assets/cosmetics/plate.stars-neon.webp?v=1) center / 100% 100% no-repeat; mask: url(/assets/cosmetics/plate.stars-neon.webp?v=1) center / 100% 100% no-repeat; }
.plate-pv.lv-plate-sx-cosmic .gl, .plate-pv.lv-plate-sx-gold .gl, .plate-pv.lv-plate-sx-neon .gl { width: 18%; aspect-ratio: 1; height: auto; }
.plate-pv.lv-plate-sx-cosmic .gl, .plate-pv.lv-plate-sx-neon .gl { background-image: url(/assets/live/glint-white.webp?v=1); }
.plate-pv[class*="lv-plate-sx-"] .gl.g1 { left: 8%; top: -4%; }
.plate-pv[class*="lv-plate-sx-"] .gl.g2 { right: 4%; bottom: 0; width: 14%; animation-delay: calc(var(--lvd) - 1s); }
.plate-pv.lv-plate-sx-neon::after { content: ""; position: absolute; left: 11%; right: 11%; top: 18%; bottom: 18%; border-radius: 28px; pointer-events: none;
  box-shadow: 0 0 16px 3px rgba(255, 47, 230, .65), inset 0 0 14px rgba(20, 220, 255, .45); animation: sx-pulse 1.8s ease-in-out infinite; animation-delay: var(--lvd); }

/* титул текстом (шапка, рейтинг) */
.lvt.lv-plate-sx-cosmic { color: #fff; background: linear-gradient(180deg, #4a5cff, #1f2a9a 58%, #160c5a);
  box-shadow: inset 0 0 0 1.5px #e6eeff, 0 0 0 2px var(--ink), 0 0 10px rgba(120, 160, 255, .65); }
.lvt.lv-plate-sx-gold { color: #ffe98a; background: linear-gradient(180deg, #a8183e, #7a0f2e 58%, #4a081c);
  box-shadow: inset 0 0 0 1.5px #ffc21f, 0 0 0 2px var(--ink), 0 0 12px rgba(255, 190, 40, .75); }
.lvt.lv-plate-sx-neon { color: #ffd6fb; background: linear-gradient(180deg, #2a1458, #160a34);
  box-shadow: inset 0 0 0 1.5px #ff2fe6, inset 0 0 0 3px rgba(20, 220, 255, .55), 0 0 0 2px var(--ink), 0 0 12px rgba(255, 47, 230, .7);
  text-shadow: 0 0 6px #ff2fe6, 0 1px 0 var(--ink); }
.lvt.lv-plate-sx-neon b { animation: sx-flicker 4.5s linear infinite; animation-delay: var(--lvd); }
.lvt[class*="lv-plate-sx-"] .gl { position: absolute; right: -2px; top: -5px; width: 14px; height: 14px; background-image: url(/assets/live/glint-white.webp?v=1); }

@media (prefers-reduced-motion: reduce) {
  .sx-rowbd img, .sx-rowbd .sh, .sx-card::after, .sx-hero img, .sx-hero .sx-glow,
  [class*="lv-frame-sx-"] *, [class*="lv-plate-sx-"], [class*="lv-plate-sx-"] *, .lvt[class*="lv-plate-sx-"] b { animation: none !important; }
}