/* /changelog/tops-october/ — .menu-reel и .rd-body из /hud-update/hud-update.css,
   .dt-go из /discord-tag/discord-tag.css. Здесь: хиро-диорама с сундуком (hero.js),
   таблицы мест по топам и макет окна наград из кабинета. */

/* ---------- хиро: диорама ----------
   Сцена — ночной арт, тёмная в обеих темах. Поэтому всё поверх неё берёт
   постоянные токены: --inverse-bg / --inverse-fg и «яркие» --yellow-4 / --amber-4 /
   --orange-4 / --purple-4 (в тёмной теме они не переопределяются). */
.tw-hero {
  --tw-ink: var(--inverse-fg);
  --tw-hair: color-mix(in srgb, var(--tw-ink) 14%, transparent);
  --tw-ease: cubic-bezier(.2, .8, .2, 1);
  position: relative;
  /* nav — sticky и занимает 84px в потоке: карточка хиро уходит под него и встаёт в 12px от края */
  margin: -72px 12px 0;
  /* высота — от ширины: панорамный арт 2048×768 не раздувается во весь экран */
  height: clamp(600px, 50vw, 900px);
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background: var(--inverse-bg);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .08);
}
/* волосяная рамка поверх картинки — карточка читается как стекло, а не как вырезка */
.tw-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--tw-hair), inset 0 1px 0 color-mix(in srgb, var(--tw-ink) 10%, transparent);
}
.tw-scene { position: absolute; inset: 0; overflow: hidden; container-type: size; }
/* холст 2048×768 «накрывает» сцену с запасом 4% под параллакс; --f — какая доля ширины арта встаёт в центр */
.tw-stage {
  --f: .40;
  position: absolute; left: 50%; top: 50%;
  width: max(104cqw, 277.33cqh); height: max(104cqh, 39cqw);
  transform: translate(calc(var(--f) * -100%), -50%);
}
.tw-layer { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.tw-layer img { position: absolute; display: block; height: auto; user-select: none; -webkit-user-drag: none; }

/* глубина резкости: дальний план мягкий и притушен, передний — резкий и с контровым светом */
.tw-layer--bg img {
  inset: 0; width: 100%; height: 100%;
  filter: blur(2px) saturate(1.1) brightness(.7) contrast(1.06);
  transform: scale(1.01);
}
.tw-laura {
  position: absolute; aspect-ratio: 846 / 668;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 28px color-mix(in srgb, var(--purple-4) 38%, transparent)) drop-shadow(0 18px 30px rgba(0, 0, 0, .45)) saturate(1.05) contrast(1.04);
}
/* части Лауры лежат на одном холсте 846×668; углы и сдвиги задаёт hero.js (--hr, --hx, --hy, --ar) */
.tw-laura img, .tw-head, .tw-arm { position: absolute; inset: 0; width: 100%; height: 100%; }
/* голова со шляпой крутится вокруг шеи, кисть у полей шляпы — следом, но слабее */
.tw-head { transform-origin: 42.6% 68.1%; transform: translate(var(--hx, 0px), var(--hy, 0px)) rotate(var(--hr, 0deg)); }
.tw-hand { transform-origin: 42.6% 68.1%; transform: translate(calc(var(--hx, 0px) * .7), calc(var(--hy, 0px) * .7)) rotate(calc(var(--hr, 0deg) * .7)); }
.tw-arm { transform-origin: 69.7% 73.4%; transform: rotate(var(--ar, 0deg)); }
.tw-laura .tw-blink { opacity: 0; }
.tw-laura.is-blink .tw-blink { opacity: 1; }
/* лицо на шляпе дышит светом и вспыхивает, когда открывается сундук */
.tw-laura .tw-hatglow { mix-blend-mode: screen; opacity: .4; animation: tw-hatglow 3.4s ease-in-out infinite; }
@keyframes tw-hatglow { 0%, 100% { opacity: .3; } 50% { opacity: .85; } }
.tw-hero.is-open .tw-laura .tw-hatglow { animation: tw-hatglow-open 1.4s ease-out, tw-hatglow 3.4s ease-in-out 1.4s infinite; }
@keyframes tw-hatglow-open { 0% { opacity: .4; } 15% { opacity: 1; filter: brightness(1.6); } 100% { opacity: .3; } }
.tw-trophy, .tw-chest, .tw-gems { transform-origin: 50% 100%; }
.tw-chest { filter: saturate(1.08) contrast(1.05); }
.tw-trophy { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--amber-4) 30%, transparent)) saturate(1.08) contrast(1.05); }
.tw-gems { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--purple-4) 45%, transparent)) saturate(1.1) contrast(1.05); }
/* контактные тени: вырезанные предметы «садятся» на каменный бортик */
.tw-contact {
  position: absolute; height: 3.2%; transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
  pointer-events: none;
}

/* свечи и луна на фоне дышат */
.tw-glow {
  position: absolute; left: var(--x); top: var(--y); width: 10%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--amber-4) 48%, transparent), transparent);
  mix-blend-mode: screen; pointer-events: none;
  animation: tw-flicker 2.6s ease-in-out var(--d, 0s) infinite alternate;
}
@keyframes tw-flicker { 0% { opacity: .35; } 35% { opacity: .65; } 60% { opacity: .45; } 100% { opacity: .75; } }
.tw-moon {
  position: absolute; left: 75.6%; top: 10%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tw-ink) 22%, transparent), color-mix(in srgb, var(--purple-4) 10%, transparent) 50%, transparent);
  mix-blend-mode: screen; pointer-events: none;
}

/* лучи и столб света из сундука: тлеют, пока закрыт, вспыхивают при открытии */
.tw-rays {
  /* центр — середина сундука (x 53.5–67.5%, y 62–90.6% холста): свет бьёт изнутри, сам сундук его прикрывает */
  position: absolute; left: 60.47%; top: 76.3%; width: 70%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--yellow-4) 38%, transparent) 0 4deg, transparent 4deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 8%, transparent 72%);
          mask: radial-gradient(closest-side, #000 8%, transparent 72%);
  mix-blend-mode: screen; pointer-events: none;
  filter: blur(1.5px);
  opacity: 0;
  transition: opacity 1.2s var(--tw-ease);
}
.tw-hero.is-open .tw-rays { opacity: .34; animation: tw-spin 40s linear infinite; }
@keyframes tw-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.tw-beam {
  position: absolute; left: 60.47%; bottom: 23.7%; width: 18%; height: 74%;
  transform: translateX(-50%); transform-origin: 50% 100%;
  background: radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--yellow-4) 75%, transparent), color-mix(in srgb, var(--amber-4) 24%, transparent) 55%, transparent 80%);
  mix-blend-mode: screen; pointer-events: none;
  opacity: .18;
  animation: tw-beam-idle 2.4s ease-in-out infinite alternate;
}
@keyframes tw-beam-idle { from { opacity: .1; transform: translateX(-50%) scaleY(.85); } to { opacity: .3; transform: translateX(-50%) scaleY(1); } }
.tw-hero.is-open .tw-beam { animation: tw-beam-open 1.6s var(--tw-ease) forwards; }
@keyframes tw-beam-open {
  0% { opacity: .2; transform: translateX(-50%) scaleY(.6); }
  18% { opacity: 1; transform: translateX(-50%) scaleY(1.15) scaleX(1.25); }
  100% { opacity: .5; transform: translateX(-50%) scaleY(1); }
}
.tw-chest.is-pop { animation: tw-chest-pop .7s cubic-bezier(.3, .7, .2, 1); }
@keyframes tw-chest-pop {
  0% { transform: none; }
  16% { transform: scale(1.08, .86); }
  40% { transform: translateY(-14%) scale(.95, 1.07); }
  62% { transform: scale(1.06, .93); }
  80% { transform: scale(.98, 1.02); }
  100% { transform: none; }
}

/* цветокор, виньетка и плёночное зерно — склеивают слои в один кадр */
.tw-grade {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(120% 95% at 58% 42%, transparent 52%, rgba(0, 0, 0, .58) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .42), transparent 20%, transparent 78%, rgba(0, 0, 0, .35));
}
.tw-grade::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--purple-4) 22%, transparent), transparent 55%, color-mix(in srgb, var(--amber-4) 14%, transparent));
  mix-blend-mode: soft-light;
}
.tw-grade::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .22; mix-blend-mode: overlay;
}
/* вспышка при открытии */
.tw-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 70% at 58% 72%, color-mix(in srgb, var(--yellow-4) 55%, transparent), transparent 70%);
  mix-blend-mode: screen;
}
.tw-hero.is-open .tw-flash { animation: tw-flash 1.1s var(--tw-ease); }
@keyframes tw-flash { 0% { opacity: 0; } 12% { opacity: .9; } 100% { opacity: 0; } }

/* кнопка поверх сундука + подсказка над ним (тултип кита: inverse-bg, rounded-md, text-xs) */
.tw-chest-hit {
  position: absolute; left: 53.5%; top: 60%; width: 14%; height: 31%;
  padding: 0; border: 0; border-radius: 16px; background: none; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.tw-chest-hit:focus-visible { outline: 2px solid var(--purple-3); outline-offset: 4px; }
.tw-hint {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 12px;
  padding: 6px 10px; border-radius: 6px;
  background: var(--inverse-bg); color: var(--inverse-fg);
  box-shadow: 0 0 0 1px var(--inverse-border), 0 4px 12px rgba(0, 0, 0, .25);
  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
  transform: translateX(-50%);
  animation: tw-hint 2s ease-in-out infinite;
  transition: opacity .2s;
}
.tw-hint::after {
  content: ''; position: absolute; left: 50%; top: 100%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--inverse-bg);
}
@keyframes tw-hint { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
.tw-hero.is-open .tw-hint { opacity: 0; animation: none; }

/* частицы: награды, искры и угольки */
.tw-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- текст: шкала shadcn/ui Typography ----------
   Geist, как у shadcn. h1 — text-5xl/6xl font-extrabold tracking-tight,
   lead — text-xl text-muted-foreground, small — text-sm font-medium.
   Сцена тёмная в обеих темах, поэтому foreground/muted берём из inverse-токенов. */
.tw-type {
  --pad: clamp(28px, 3.4vw, 56px);
  --tw-muted: color-mix(in srgb, var(--tw-ink) 72%, transparent);
  --tw-line: color-mix(in srgb, var(--tw-ink) 14%, transparent);
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 480px) 1fr auto; align-items: start;
  padding: 120px var(--pad) var(--pad);
  pointer-events: none;
  color: var(--tw-ink);
  font-family: 'Geist', 'Open Runde', system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.tw-type a, .tw-places { pointer-events: auto; }
.tw-main { grid-column: 1; }

/* Badge, вариант secondary */
.tw-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 8px 0 5px; border-radius: 6px;
  background: color-mix(in srgb, var(--tw-ink) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--tw-line);
  font-size: 12px; line-height: 16px; font-weight: 500; text-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* h1: scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl, text-balance */
.tw-h1 {
  margin: 16px 0 0;
  font-size: clamp(40px, 4.4vw, 60px); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em;
  text-wrap: balance;
}
/* lead: text-xl text-muted-foreground */
.tw-lead { margin: 16px 0 0; max-width: 420px; font-size: 20px; line-height: 28px; color: color-mix(in srgb, var(--tw-ink) 86%, transparent); text-wrap: pretty; }
/* цифры: text-3xl font-semibold tracking-tight + подпись text-sm muted */
.tw-stats { display: flex; gap: 36px; margin: 28px 0 0; }
.tw-stats > div { display: flex; flex-direction: column; gap: 2px; }
.tw-stats dd { margin: 0; font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.tw-stats dt { font-size: 14px; line-height: 20px; color: var(--tw-muted); }
/* Button: default (primary) и outline, size lg */
.tw-actions { display: flex; gap: 10px; margin-top: 28px; }
.tw-btn { height: 40px; padding: 0 20px; font-family: inherit; font-size: 14px; font-weight: 500; text-shadow: none; transition-property: background-color, box-shadow, opacity, scale; transition-duration: .15s; }
.tw-btn:active { scale: .96; }
.tw-btn--outline {
  background: color-mix(in srgb, var(--tw-ink) 6%, transparent); color: var(--tw-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tw-ink) 22%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tw-btn--outline:hover { background: color-mix(in srgb, var(--tw-ink) 12%, transparent); }

/* первые места: отдельные строки-Item — медиа (иконка топа), ник и топ, справа приз.
   Общей подложки нет: каждая строка — своё стекло, появляются по очереди после сундука */
.tw-places { grid-column: 3; width: 320px; text-shadow: none; }
.tw-places__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tw-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px; border-radius: 14px;
  background: color-mix(in srgb, var(--inverse-bg) 66%, transparent);
  box-shadow: inset 0 0 0 1px var(--tw-line), 0 12px 32px -14px rgba(0, 0, 0, .65);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transition: background-color .2s, box-shadow .2s, translate .2s var(--tw-ease);
}
.tw-item:hover {
  translate: -4px 0;
  background: color-mix(in srgb, var(--inverse-bg) 78%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tw-ink) 24%, transparent), 0 16px 36px -14px rgba(0, 0, 0, .7);
}
.tw-item__media { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--tw-ink) 8%, transparent); }
.tw-item__body { display: flex; flex-direction: column; min-width: 0; }
.tw-item__body b { font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-item__body span { font-size: 13px; line-height: 18px; color: var(--tw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-item__prize { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--tw-muted); white-space: nowrap; }
.tw-item:hover .px { translate: 0 -2px; }
.tw-item .px { transition: translate .15s steps(2); }
.tw-item .px { --d: calc(var(--i) * .3s); }

/* ---------- сценарий (классы ставит hero.js; без JS всё видно сразу) ---------- */
/* до открытия сундука справа пусто: строки выезжают по одной после выброса наград */
.tw-hero.is-armed .tw-item { opacity: 0; }
.tw-hero.is-armed.is-done .tw-item { animation: tw-line .6s var(--tw-ease) calc(.08s + var(--i) * .09s) both; }
@keyframes tw-line { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* появление: фон проявляется из размытия, текст и предметы подтягиваются по очереди */
.tw-hero.is-armed .tw-layer--bg img { animation: tw-world 1.6s var(--tw-ease) both; }
.tw-hero.is-armed .tw-laura { animation: tw-arrive 1s var(--tw-ease) .15s both, tw-breathe 5.5s ease-in-out 1.4s infinite; }
.tw-hero.is-armed .tw-trophy { animation: tw-arrive .9s var(--tw-ease) .4s both, tw-wobble 5s ease-in-out 1.6s infinite; }
.tw-hero.is-armed .tw-gems { animation: tw-arrive .9s var(--tw-ease) .55s both, tw-float 3.8s ease-in-out 1.7s infinite; }
.tw-hero.is-armed .tw-chest:not(.is-pop) { animation: tw-arrive .9s var(--tw-ease) .3s both, tw-rattle 3.2s ease-in-out 2.4s infinite; }
.tw-hero.is-armed.is-open .tw-chest:not(.is-pop) { animation: none; }
.tw-hero.is-armed .tw-main > * { animation: tw-rise .6s var(--tw-ease) both; }
.tw-hero.is-armed .tw-main > :nth-child(2) { animation-delay: .06s; }
.tw-hero.is-armed .tw-main > :nth-child(3) { animation-delay: .12s; }
.tw-hero.is-armed .tw-main > :nth-child(4) { animation-delay: .18s; }
.tw-hero.is-armed .tw-main > :nth-child(5) { animation-delay: .24s; }
@keyframes tw-world { from { opacity: 0; transform: scale(1.08); filter: blur(14px) brightness(.6); } }
@keyframes tw-arrive { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes tw-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes tw-breathe { 0%, 100% { transform: none; } 50% { transform: translateY(-.4%); } }
@keyframes tw-wobble { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } }
@keyframes tw-float { 0%, 100% { transform: none; } 50% { transform: translateY(-6%); } }
/* закрытый сундук иногда подпрыгивает — намёк, что внутри что-то есть */
@keyframes tw-rattle {
  0%, 82%, 100% { transform: none; }
  86% { transform: rotate(-2.5deg) translateY(-3%); }
  90% { transform: rotate(2.5deg) translateY(-4%); }
  94% { transform: rotate(-1.5deg); }
}

/* узкий десктоп: справа место занимает Лаура — список первых мест прячем */
@media (max-width: 1180px) and (min-width: 768px) {
  .tw-places { display: none; }
}

/* ---------- телефон: сцена — скруглённый кадр, текст под ней в цветах темы ---------- */
@media (max-width: 767px) {
  .tw-hero { height: auto; margin: -72px 8px 0; overflow: visible; border-radius: 0; background: none; box-shadow: none; display: flex; flex-direction: column; }
  .tw-hero::after { display: none; }
  .tw-scene { position: relative; inset: auto; height: 400px; border-radius: 24px; background: var(--inverse-bg); box-shadow: inset 0 0 0 1px var(--gray-a2); }
  .tw-stage { --f: .5; top: 52%; }
  .tw-type { position: static; display: block; padding: 28px 12px 0; text-shadow: none; --tw-ink: var(--fg-4); --tw-muted: var(--fg-2); --tw-line: var(--bg-4); }
  .tw-badge { background: var(--bg-2); box-shadow: none; }
  .tw-h1 { font-size: 36px; line-height: 40px; }
  .tw-lead { font-size: 18px; line-height: 26px; color: var(--fg-2); }
  .tw-actions .tw-btn { flex: 1 1 0; }
  .tw-btn--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--bg-4); }
  .tw-places { width: auto; margin-top: 32px; }
  .tw-item { background: var(--background); box-shadow: var(--shadow-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tw-item:hover { translate: none; background: var(--background); box-shadow: var(--shadow-2); }
  html[data-theme="dark"] .tw-item { background: var(--bg-1); box-shadow: 0 0 0 1px var(--gray-a2); }
  .tw-item__media { background: var(--bg-2); }
}

@media (prefers-reduced-motion: reduce) {
  .tw-hero *, .tw-hero.is-armed * { animation: none !important; transition: none !important; }
  .tw-beam { opacity: .4; }
}

/* ---------- пиксельные иконки (img/px, набор 64×64) ----------
   Рисуем без сглаживания; анимации — пошаговые (steps), как спрайты в игре.
   Оживают классом .is-live, когда иконка доехала до экрана (boards.js). */
.px { display: inline-block; flex: none; vertical-align: middle; image-rendering: pixelated; }
.px.is-live.px--hero,
.px.is-live.px--item,
.px.is-live.px--fund { animation: px-bob 1.4s steps(1) var(--d, 0s) infinite; }
@keyframes px-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
/* броня и кубки иногда «бликуют» */
.px.is-live.px--prize,
.px.is-live.px--cup,
.px.is-live.px--claim { animation: px-glint 4.2s steps(1) var(--d, 0s) infinite; }
@keyframes px-glint { 0%, 88%, 100% { filter: none; } 91% { filter: brightness(1.45); } 94% { filter: brightness(1.2); } }
/* кристаллы-коины переворачиваются, как выпавший предмет */
.px.is-live[src$="gem.png"] { animation: px-flip 2.4s steps(1) var(--d, 0s) infinite; }
@keyframes px-flip { 0%, 70%, 100% { transform: none; } 76% { transform: scaleX(.6); } 82% { transform: scaleX(.15); } 88% { transform: scaleX(.6); } }
tr:nth-child(2n) .px { --d: .7s; }
tr:nth-child(3n) .px { --d: 1.6s; }
/* наведение — иконка подпрыгивает */
.tp-fund li:hover .px { translate: 0 -3px; }
.tp-fund .px { transition: translate .15s steps(2); }

/* искра у иконки топа — пиксельный крестик */
.tp-fund__icon::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px;
  background:
    linear-gradient(var(--amber-4), var(--amber-4)) center / 2px 100% no-repeat,
    linear-gradient(var(--amber-4), var(--amber-4)) center / 100% 2px no-repeat;
  transform: scale(0);
  animation: px-spark 2.8s steps(1) var(--d, .4s) infinite;
}
@keyframes px-spark { 0%, 70%, 100% { transform: scale(0); } 76% { transform: scale(.5); } 82% { transform: scale(1); } 90% { transform: scale(.5); } }

/* ---------- широкие блоки ---------- */
.menu-reel.tp-wide { max-width: 760px; }

/* ---------- призовой фонд ---------- */
.tp-fund { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.tp-fund li { display: flex; flex-direction: column; gap: 4px; min-width: 0; --d: calc(var(--i) * .28s); }
.tp-fund__icon {
  position: relative; display: grid; place-items: center;
  width: 72px; height: 72px; margin-bottom: 8px; border-radius: 16px;
  background: var(--bg-2);
}
.tp-fund b { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.03em; color: var(--fg-4); font-variant-numeric: tabular-nums; }
.tp-fund li > span:last-child { font-size: 13px; line-height: 18px; color: var(--fg-2); }
@media (max-width: 640px) { .tp-fund { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } }

/* ---------- аура победителей: предпросмотр как на /partners/ (aura.js) ---------- */
.tp-aura { --tint: #ff6a1a; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: center; margin-top: 20px; }
/* сцена тёмная в обеих темах — аура светится на ночном фоне, как в хиро */
.tp-aura__stage {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--inverse-fg) 9%, var(--inverse-bg)), var(--inverse-bg));
  box-shadow: var(--shadow-2);
  cursor: grab; touch-action: pan-y; user-select: none;
  transition: background .4s;
}
html[data-theme="dark"] .tp-aura__stage { box-shadow: 0 0 0 1px var(--gray-a2); }
.tp-aura.is-dragging .tp-aura__stage { cursor: grabbing; }
.tp-aura__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; }
.tp-aura.is-ready .tp-aura__canvas { opacity: 1; }
.tp-aura__hint {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--inverse-fg) 10%, transparent); color: color-mix(in srgb, var(--inverse-fg) 72%, transparent);
  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; pointer-events: none;
  transition: opacity .3s;
}
.tp-aura.is-dragging .tp-aura__hint { opacity: 0; }

.tp-aura__facts { margin: 0; display: flex; flex-direction: column; }
.tp-aura__facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bg-3); }
.tp-aura__facts dt { font-size: 14px; line-height: 20px; color: var(--fg-2); }
.tp-aura__facts dd { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg-4); text-align: right; }
.tp-aura__label { margin: 20px 0 10px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg-4); }
.tp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-swatch {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  transition: box-shadow .15s, scale .15s;
}
.tp-swatch:hover { scale: 1.08; }
.tp-swatch:active { scale: .96; }
.tp-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px var(--background), 0 0 0 4px var(--fg-4); }
.tp-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--purple-4); }
.tp-aura__cta { margin-top: 24px; width: 100%; height: 40px; }

@media (max-width: 640px) {
  .tp-aura { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- таблицы мест: Card + Table кита ---------- */
.tp-card {
  margin-top: 20px; border-radius: 16px; overflow: hidden;
  background: var(--background); box-shadow: var(--shadow-2);
}
html[data-theme="dark"] .tp-card { background: var(--bg-1); box-shadow: 0 0 0 1px var(--gray-a2); }

/* панель инструментов: сегмент-контрол топов + поиск */
.tp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid var(--bg-3); }
.tp-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--bg-2); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tp-tabs::-webkit-scrollbar { display: none; }
.tp-tab {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 30px; padding: 0 12px 0 8px; border: 0; border-radius: 999px;
  background: none; color: var(--fg-2); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: color .15s, background-color .15s, box-shadow .15s;
}
.tp-tab:hover { color: var(--fg-4); }
.tp-tab[aria-selected="true"] { background: var(--background); color: var(--fg-4); box-shadow: var(--shadow-1); }
html[data-theme="dark"] .tp-tab[aria-selected="true"] { background: var(--bg-4); box-shadow: none; }
.tp-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--purple-2); }
.tp-tab .px { width: 24px; height: 24px; margin: -2px 0; }
.tp-card.is-searching .tp-tab[aria-selected="true"] { background: none; box-shadow: none; color: var(--fg-2); }

.tp-search { position: relative; display: flex; align-items: center; flex: 1 1 180px; max-width: 240px; }
.tp-search svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--fg-2); pointer-events: none; }
.tp-search input {
  width: 100%; height: 32px; padding: 0 12px 0 32px; border: 0; border-radius: 8px;
  background: var(--bg-2); color: var(--fg-4);
  font: inherit; font-size: 14px; font-weight: 500;
  outline: 2px solid transparent; transition: outline-color .15s, box-shadow .15s;
}
.tp-search input::placeholder { color: var(--fg-1); }
.tp-search input:focus { outline-color: var(--purple-4); box-shadow: 0 0 0 4px var(--purple-2); }

/* шапка таблицы: пиксельная иконка топа и название */
.tp-panel + .tp-panel { border-top: 1px solid var(--bg-3); }
.tp-card.is-tabbed:not(.is-searching) .tp-panel + .tp-panel { border-top: 0; }
.tp-panel__head { display: flex; align-items: center; gap: 14px; padding: 16px 16px 12px; }
.tp-panel__icon { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--bg-2); flex: none; }
.tp-panel__eyebrow { margin: 0; font-size: 12px; line-height: 16px; color: var(--fg-2); }
.tp-panel__title { margin: 2px 0 0; font-size: 18px; line-height: 24px; font-weight: 500; color: var(--fg-4); }

.tp-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.tp-table th {
  height: 40px; padding: 0 16px; text-align: left; vertical-align: middle;
  font-size: 13px; font-weight: 500; color: var(--fg-2);
  border-top: 1px solid var(--bg-3); border-bottom: 1px solid var(--bg-3);
}
.tp-table td { padding: 10px 16px; vertical-align: middle; border-bottom: 1px solid var(--bg-3); }
.tp-table tbody tr:last-child td { border-bottom: 0; }
.tp-table tbody tr { transition: background-color .15s; }
.tp-table tbody tr:hover { background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
.tp-table th.tp-place, .tp-table td.tp-place { width: 96px; }
.tp-place__in { display: grid; grid-template-columns: 24px auto; align-items: center; gap: 8px; color: var(--fg-2); font-variant-numeric: tabular-nums; font-weight: 500; }
.tp-place__in > span { grid-column: 2; }
.tp-player { font-weight: 500; color: var(--fg-4); }
.tp-table tr.is-first .tp-player { font-weight: 600; }
.tp-table tr.is-first .tp-place__in { color: var(--amber-4); }
.tp-prize { color: var(--fg-3); }
.tp-prize__item + .tp-prize__item { margin-left: 14px; }
.tp-prize__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tp-table tr.is-first .tp-prize { color: var(--fg-4); font-weight: 500; }
/* найденный ник */
.tp-table tr.is-hit { background: color-mix(in srgb, var(--purple-4) 10%, transparent); }
.tp-table tr.is-hit .tp-player { color: var(--purple-4); }
.tp-empty { margin: 0; padding: 28px 16px; text-align: center; font-size: 14px; line-height: 20px; color: var(--fg-2); }

@media (max-width: 560px) {
  .tp-search { max-width: none; flex-basis: 100%; }
  .tp-table th, .tp-table td { padding-left: 12px; padding-right: 12px; }
  .tp-place__in { gap: 6px; }
  /* приз уходит под ник: место | (ник / приз); шапка таблицы на телефоне не нужна */
  .tp-table, .tp-table tbody { display: block; }
  .tp-table thead { display: none; }
  .tp-table tbody tr { display: grid; grid-template-columns: 72px 1fr; }
  .tp-table th.tp-place, .tp-table td.tp-place { width: auto; }
  .tp-table tbody td { border-bottom: 0; }
  .tp-table tbody tr { border-bottom: 1px solid var(--bg-3); }
  .tp-table tbody tr:last-child { border-bottom: 0; }
  .tp-table td.tp-player { padding-bottom: 2px; }
  .tp-table td.tp-prize { display: flex; flex-wrap: wrap; gap: 4px 12px; grid-column: 2; padding-top: 0; font-size: 13px; }
  .tp-prize__item + .tp-prize__item { margin-left: 0; }
  .tp-table td.tp-place { grid-row: span 2; }
}

/* ---------- макет окна наград из кабинета ---------- */
.tp-claim { margin: 20px 0; border: 1px solid var(--bg-4); border-radius: 16px; background: var(--bg-1); overflow: hidden; }
.tp-claim__head {
  display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px;
  font-size: 15px; line-height: 20px; font-weight: 500; color: var(--fg-4);
  border-bottom: 1px solid var(--bg-4);
}
.tp-claim__count { font-weight: 400; color: var(--fg-2); }
.tp-claim__row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; }
.tp-claim__row + .tp-claim__row { border-top: 1px solid var(--bg-4); }
.tp-claim__icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; background: var(--bg-2); color: var(--purple-4);
}
.tp-claim__icon .px { width: 32px; height: 32px; }
.tp-claim__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tp-claim__text b { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--fg-4); }
.tp-claim__text small { font-size: 13px; line-height: 18px; color: var(--fg-2); }
.tp-claim__btn {
  align-self: center;
  padding: 6px 14px; border: 1px solid var(--bg-4); border-radius: 999px; background: var(--bg-2);
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg-4); white-space: nowrap;
}
@media (max-width: 480px) {
  .tp-claim__row { grid-template-columns: 40px 1fr; }
  .tp-claim__btn { grid-column: 2; justify-self: start; }
}