/* Team-Flow «Магазин» + компактная панель заголовка (2026-10-08). Classic theme first, glass overrides at the end. */

/* ---------- monochrome line icons (self-hosted SVG used as a mask → takes the text colour) ---------- */
.tf-ico { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; vertical-align: -3px; }
.tf-ico-search { --ico: url(/icons/search.svg); }
.tf-ico-more { --ico: url(/icons/more.svg); }
.tf-ico-thread { --ico: url(/icons/thread.svg); }
.tf-ico-pin { --ico: url(/icons/pin.svg); }
.tf-ico-calendar { --ico: url(/icons/calendar.svg); }
.tf-ico-bag { --ico: url(/icons/bag.svg); }
.tf-ico-gem { --ico: url(/icons/gem.svg); }

/* ---------- header toolbar: [🔍 Поиск Ctrl+K] [⋯] [Сообщить о баге] [Помощь] ---------- */
.header-util-btn.tf-legacy-btn { display: none !important; }
.header-util-btn.tf-hsearch { gap: 8px !important; min-width: 0 !important; padding: 0 8px 0 10px !important; color: #b5bac8 !important; font-weight: 500 !important; justify-content: flex-start !important; width: 168px; }
.tf-hsearch .tf-hs-lbl { flex: 1 1 auto; text-align: left; }
.tf-hsearch .tf-hs-kbd { font: 600 10.5px/1 inherit; font-family: inherit; color: #8e94a6; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; padding: 3px 5px; background: rgba(0,0,0,.18); letter-spacing: .02em; }
.tf-hsearch:hover .tf-hs-kbd { color: #d6d9e4; }
.header-util-btn.fx-more { width: 34px; min-width: 34px !important; padding: 0 !important; justify-content: center !important; position: relative; }
.header-util-btn.fx-more.on { background: rgba(124,108,255,.22) !important; border-color: rgba(124,108,255,.45) !important; color: #fff !important; }
.fx-more-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #ff5c7a; box-shadow: 0 0 0 2px var(--header, #1a1b23); display: none; }
.fx-more.fx-has-dot .fx-more-dot { display: block; }
.fx-more-menu { position: fixed; z-index: 1200; min-width: 230px; padding: 6px; border-radius: 10px; background: #1d1f29; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 16px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; }
.fx-more-menu.hidden { display: none !important; }
.fx-more-menu .fx-mi { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: #d7dae4; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.fx-more-menu .fx-mi.hidden { display: none !important; }
.fx-more-menu .fx-mi:hover, .fx-more-menu .fx-mi:focus-visible { background: rgba(124,108,255,.18); color: #fff; outline: none; }
.fx-more-menu .fx-mi .tf-ico { color: #a7adbf; }
.fx-more-menu .fx-mi:hover .tf-ico { color: #c9c0ff; }
.fx-more-menu .fx-mi-t { flex: 1 1 auto; }
.fx-more-menu .fx-hcount { display: inline-block !important; font-size: 11px; font-weight: 700; color: #9aa0b4; background: rgba(255,255,255,.07); border-radius: 99px; padding: 1px 7px; line-height: 16px; }
.fx-more-menu .fx-hcount:empty { display: none !important; }
.fx-more-menu .fx-has-unread .fx-hcount, .fx-more-menu .fx-live .fx-hcount { color: #fff; background: #ed4245; }
.fx-more-menu kbd { font: 600 10.5px/1 inherit; font-family: inherit; color: #8e94a6; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; padding: 3px 5px; }
.fx-mi-sep { height: 1px; margin: 4px 6px; background: rgba(255,255,255,.07); }
@media (max-width: 1100px) { .header-util-btn.tf-hsearch { width: auto; } .tf-hsearch .tf-hs-lbl { display: none; } }
@media (max-width: 720px) { .tf-hsearch .tf-hs-kbd { display: none; } .header-util-btn.tf-hsearch { width: 34px; padding: 0 !important; justify-content: center !important; } }

/* ===================== «Магазин» v2 — premium look. Classic theme first; glass overrides at the end.
   Rules: no backdrop-filter; animate transform/opacity only; animations are paused unless the element is on screen (.tfs-live)
   or hovered; nothing moves with prefers-reduced-motion. ===================== */
.tf-ico-ring { --ico: url(/icons/ring.svg); } .tf-ico-image { --ico: url(/icons/image.svg); } .tf-ico-medal { --ico: url(/icons/medal.svg); }
.tf-ico-trophy { --ico: url(/icons/trophy.svg); } .tf-ico-sparkle { --ico: url(/icons/sparkle.svg); } .tf-ico-type { --ico: url(/icons/type.svg); }
.tf-ico-wand { --ico: url(/icons/wand.svg); } .tf-ico-grid { --ico: url(/icons/grid.svg); }
:root { --tfs-common: 160,168,186; --tfs-rare: 78,161,255; --tfs-epic: 169,112,255; --tfs-legendary: 245,185,66; --tfs-acc: 139,92,246; }
.r-common { --rc: var(--tfs-common); } .r-rare { --rc: var(--tfs-rare); } .r-epic { --rc: var(--tfs-epic); } .r-legendary { --rc: var(--tfs-legendary); }
/* gradient gem (balance / prices) */
.tfs-gem { display: inline-block; width: 15px; height: 15px; flex: 0 0 auto; vertical-align: -2px; background: linear-gradient(135deg, #f0e7ff 0%, #b69cff 35%, #7c4dff 70%, #4c1d95 100%);
  -webkit-mask: url(/icons/gem.svg) center / contain no-repeat; mask: url(/icons/gem.svg) center / contain no-repeat; }

/* ---------- sidebar button «Магазин · N» (under «Пригласить людей») ---------- */
.tfs-shop-btn { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 0 10px 8px; padding: 7px 8px 7px 7px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%); border: 1px solid rgba(139,92,246,.30); color: #ece8ff; font: inherit; font-size: 13.5px; font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 10px rgba(0,0,0,.18); transition: border-color .15s, box-shadow .15s, transform .15s; position: relative; overflow: hidden; }
.tfs-shop-btn.hidden { display: none !important; }
.tfs-shop-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%); transform: translateX(-110%); transition: transform .7s ease; pointer-events: none; }
.tfs-shop-btn:hover::after { transform: translateX(110%); }
.tfs-sb-ico { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #8b5cf6, #5b3fd6 60%, #3b2a8f); box-shadow: 0 2px 8px rgba(124,77,255,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.tfs-sb-ico .tf-ico { color: #fff; width: 15px; height: 15px; flex-basis: 15px; vertical-align: 0; }
.tfs-shop-btn > .tf-ico { color: #a99bff; }
.tfs-shop-btn .tfs-sb-lbl { flex: 1 1 auto; text-align: left; letter-spacing: .1px; }
.tfs-sb-bal { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 750; color: #efeaff; background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.28); border-radius: 99px; padding: 2px 9px 2px 7px; }
.tfs-sb-bal .tfs-gem { width: 12px; height: 12px; }
.tfs-sb-bal:empty { display: none; }
.tfs-shop-btn:hover { border-color: rgba(139,92,246,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 16px rgba(124,77,255,.16); }
.tfs-shop-btn:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }

/* ---------- nickname font + effects: readable, bounded, fallback font ---------- */
.tfs-nf { font-family: var(--tfs-ff), "gg sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-synthesis: none; font-style: normal; letter-spacing: normal; text-transform: none; line-height: inherit; max-width: 100%; }
.meta .tfs-nf, .mname .tfs-nf { display: inline; }
.tfs-nx { position: relative; display: inline; -webkit-text-fill-color: transparent; color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tfs-nx * { -webkit-text-fill-color: transparent !important; color: transparent !important; background: none !important; animation: none !important; text-shadow: none !important; }
.tfs-nx::after { content: attr(data-t); position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; }
.tfs-nx-amethyst { background-image: linear-gradient(90deg, #e2ccff, #b18cff 50%, #f3b4ff); }
.tfs-nx-ocean { background-image: linear-gradient(90deg, #8fe3ff, #6aa8ff 55%, #9a8cff); }
.tfs-nx-sunset { background-image: linear-gradient(90deg, #ffc48a, #ff9a8a 50%, #ff8fc8); }
.tfs-nx-frost { background-image: linear-gradient(180deg, #ffffff, #d4efff 55%, #8fd6ff); filter: drop-shadow(0 0 3px rgba(143,214,255,.35)); }
.tfs-nx-rose { background-image: linear-gradient(90deg, #ffd1e8, #ff8fc8); }
.tfs-nx-neon { -webkit-text-fill-color: #f6f0ff; color: #f6f0ff; background: none; text-shadow: 0 0 3px rgba(216,180,254,.9), 0 0 10px rgba(139,92,246,.6), 0 0 18px rgba(139,92,246,.25); }
.tfs-nx-neon * { -webkit-text-fill-color: #f6f0ff !important; color: #f6f0ff !important; }
.tfs-nx-gold { background-image: linear-gradient(180deg, #fff3c4 0%, #f7cf62 45%, #c98a1c 55%, #ffe39a 100%); }
.tfs-nx-gold::after { background-image: linear-gradient(100deg, transparent 30%, #fffdf2 50%, transparent 70%); animation: tfsGlint 5s ease-in-out infinite; animation-play-state: paused; }
.tfs-nx-aurora { background-image: linear-gradient(90deg, #6ff0d8, #9d8cff 50%, #ff8fd0); }
.tfs-nx-aurora::after { background-image: linear-gradient(90deg, #ff8fd0, #6ff0d8 50%, #9d8cff); animation: tfsFade 6s ease-in-out infinite alternate; animation-play-state: paused; }
.tfs-live .tfs-nx::after, .tfs-live.tfs-nx::after, .msg:hover .tfs-nx::after, .member:hover .tfs-nx::after, #userMenu .tfs-nx::after, .tfp-name .tfs-nx::after { animation-play-state: running; }
@keyframes tfsGlint { 0%, 55%, 100% { opacity: 0; } 70% { opacity: .9; } }
@keyframes tfsFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- avatar decorations (frame overlay is square, centred; --fs = overlay size in % of the avatar) ---------- */
.tfs-ava-wrap { position: relative; display: inline-block; line-height: 0; flex: 0 0 auto; }
.tfs-frame, .member img.tfs-frame, .tfs-fx, .member img.tfs-fx { position: absolute; left: 50%; top: 50%; width: var(--fs, 150%); height: var(--fs, 150%); transform: translate(-50%, -50%); pointer-events: none; border-radius: 0 !important; background: none !important; object-fit: contain; z-index: 1; max-width: none; max-height: none; border: 0 !important; }
.tfs-fx, .member img.tfs-fx { z-index: 2; }
.tfs-decor, .member img.tfs-decor { position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; transform: translate(-50%, -50%); pointer-events: none; border-radius: 0 !important; background: none !important; z-index: 3; max-width: none; max-height: none; border: 0 !important; }
.member .mav .pdot { z-index: 4; }
/* animated layers — paused by default */
.tfs-fx, .tfs-decor, .tfs-fx i, .tfs-gk-float img, .tfs-card-glow, .tfs-hero-art { animation-play-state: paused !important; }
.tfs-live .tfs-fx, .tfs-live .tfs-decor, .tfs-live .tfs-fx i, .tfs-live .tfs-gk-float img, .tfs-live .tfs-card-glow, .tfs-live.tfs-hero .tfs-hero-art, .tfs-live .tfs-hero-art,
.tfs-live.tfs-ava-wrap .tfs-fx, .tfs-live.tfs-ava-wrap .tfs-decor, .tfs-live.tfs-ava-wrap .tfs-fx i,
.member:hover .tfs-fx, .member:hover .tfs-decor, .tfs-card:hover .tfs-fx, .tfs-card:hover .tfs-fx i { animation-play-state: running !important; }
.tfs-fx-spin { animation: tfsSpin 48s linear infinite; }
.tfs-fx-flicker { animation: tfsFlicker 2.6s ease-in-out infinite; }
.tfs-fx-pulse { animation: tfsPulse 3.8s ease-in-out infinite; }
.tfs-fx-glow { filter: blur(2.5px) brightness(1.35) saturate(1.25); mix-blend-mode: screen; opacity: .45; }
.tfs-fx-sparkle { animation: tfsTwinkle 3.2s ease-in-out infinite; }
.tfs-fx-twinkle { animation: tfsTwinkle 3s ease-in-out infinite; }
.tfs-dk-twinkle { animation: tfsTwinkle 3s ease-in-out -1.5s infinite; }
.tfs-dk-drift { animation: tfsSpin 60s linear infinite; }
.tfs-dk-orbit { animation: tfsSpin 16s linear infinite; }
.tfs-dk-sparkle { animation: none; }
.tfs-fx-shine { overflow: hidden; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.tfs-fx-shine i { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,250,225,.85) 50%, transparent 62%); transform: translateX(-130%); animation: tfsSweep 5.5s ease-in-out infinite; }
.tfs-fx-petals { overflow: visible; }
.tfs-fx-petals i { position: absolute; top: 4%; width: 6%; height: 7.5%; border-radius: 80% 0 80% 0; background: radial-gradient(circle at 30% 30%, #fff0f6, #ffb3cf 55%, #f27aa6); opacity: 0; animation: tfsPetal 7s linear infinite; }
.tfs-fx-petals i:nth-child(1) { left: 18%; animation-delay: 0s; } .tfs-fx-petals i:nth-child(2) { left: 70%; animation-delay: -1.2s; animation-duration: 8s; }
.tfs-fx-petals i:nth-child(3) { left: 44%; animation-delay: -2.6s; animation-duration: 6.4s; } .tfs-fx-petals i:nth-child(4) { left: 84%; animation-delay: -3.8s; animation-duration: 7.6s; }
.tfs-fx-petals i:nth-child(5) { left: 8%; animation-delay: -4.9s; animation-duration: 8.4s; } .tfs-fx-petals i:nth-child(6) { left: 58%; animation-delay: -6s; animation-duration: 6.8s; }
@keyframes tfsSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes tfsFlicker { 0%, 100% { opacity: .45; } 18% { opacity: .85; } 34% { opacity: .55; } 52% { opacity: 1; } 70% { opacity: .6; } 86% { opacity: .9; } }
@keyframes tfsPulse { 0%, 100% { opacity: .15; } 50% { opacity: .8; } }
@keyframes tfsTwinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes tfsSweep { 0%, 35% { transform: translateX(-130%); } 75%, 100% { transform: translateX(130%); } }
@keyframes tfsPetal { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 10% { opacity: .95; } 80% { opacity: .8; } 100% { opacity: 0; transform: translate(-40%, 1100%) rotate(260deg); } }
@keyframes tfsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* member list: compact, static unless hovered; petals never in lists */
.member .tfs-fx-petals, .tfs-mini-mav .tfs-fx-petals { display: none; }
.tfs-mm { display: inline-flex; gap: 2px; margin-left: 5px; vertical-align: -3px; }
.tfs-mm img, .member .tfs-mm img { width: 16px; height: 16px; border-radius: 0; background: none; display: inline-block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }

/* ---------- banners on the profile / user card ---------- */
.tfs-banimg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .35s ease-out; will-change: auto; }
.up-banner { position: relative; overflow: hidden; }
.up-banner.tfs-has-banner { height: 108px; background: #0e0f15 !important; }
.tfp-banner.tfs-has-banner { height: 176px; background: #0e0f15 !important; }
.tfp-banner.tfs-has-banner::after, .up-banner.tfs-has-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(21,22,30,.55) 100%); pointer-events: none; }
.tfp-banner.tfs-has-banner .tfp-banner-fx { display: none; }
.tfs-parallax .tfs-banimg { transform: scale(1.08); }
#userMenu .up-head .tfs-ava-card { z-index: 2; }
.tfp-ava-wrap.tfs-ava-host { z-index: 2; }
/* profile showcase: medals row + figurine shelf */
#tfsCardShelf:empty { display: none; }
#tfsCardShelf { display: flex; align-items: flex-end; gap: 12px; padding: 0 14px 12px; flex-wrap: wrap; }
.tfs-medals { display: flex; gap: 8px; align-items: center; }
.tfs-med { position: relative; display: inline-block; line-height: 0; }
.tfs-med img { width: 34px; height: 34px; display: block; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); transition: transform .2s; }
.tfs-med:hover img { transform: translateY(-2px) scale(1.06); }
.tfs-med .tfs-fx-shine { width: 100%; height: 100%; }
.tfs-shelf { display: inline-flex; flex-direction: column; align-items: stretch; }
.tfs-shelf-row { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 0 10px; position: relative; z-index: 1; }
.tfs-fig { position: relative; display: inline-block; line-height: 0; }
.tfs-fig img { height: 54px; width: auto; max-width: 70px; display: block; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.45)); position: relative; z-index: 1; }
.tfs-fig::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -3px; height: 7px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }
.tfs-gk-float img { animation: tfsFloat 4.5s ease-in-out infinite; }
.tfs-shelf-plank { height: 9px; margin-top: -2px; border-radius: 6px; background: linear-gradient(180deg, #3b3d4c 0%, #262833 55%, #1a1b23 100%); box-shadow: 0 6px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(167,139,250,.45); }
.tfs-shelf-card .tfs-fig img { height: 46px; }
.tfs-medals-card .tfs-med img { width: 28px; height: 28px; }
.tfs-pdeco { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 20px 2px; flex-wrap: wrap; }
.tfs-pdeco:empty { display: none; }
.tfs-showcase { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; flex: 1 1 auto; }
.tfs-sc-block { padding: 10px 14px 12px; min-height: 120px; border-radius: 16px; background: linear-gradient(180deg, #1c1d27, #17181f); border: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 8px; justify-content: space-between; }
.tfs-sc-t { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8f95a8; }
.tfs-medals-profile { flex: 1 1 auto; gap: 10px; padding: 0 4px; }
.tfs-medals-profile .tfs-med img { width: 58px; height: 58px; }
.tfs-shelf-profile .tfs-fig img { height: 78px; max-width: 96px; }
.tfs-shelf-profile .tfs-shelf-row { gap: 14px; padding: 0 14px; }
.tfs-pchip { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 7px 14px; border-radius: 99px; border: 1px solid rgba(139,92,246,.35); background: rgba(139,92,246,.12); color: #efeaff; font: inherit; font-size: 13px; cursor: pointer; align-self: center; }
.tfs-pchip span { color: #bdb4f0; }
.tfs-pchip:hover { background: rgba(139,92,246,.22); }

/* settings → Профиль */
.tfs-shop-card .tfs-sc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tfs-shop-card .tfs-sc-row .tfs-gem { width: 18px; height: 18px; }
.tfs-shop-card .tfs-sc-row b { font-size: 16px; margin-right: 6px; }

/* ---------- shop modal ---------- */
.tfshop { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(4,5,10,.68); }
.tfshop.hidden { display: none !important; }
.tfshop-card { position: relative; width: min(1240px, 100%); height: min(820px, 100%); display: flex; flex-direction: column; background: radial-gradient(900px 380px at 85% -10%, rgba(139,92,246,.10), transparent 60%), #13141b; border: 1px solid #272a38; border-radius: 24px; box-shadow: 0 30px 90px rgba(0,0,0,.65); overflow: hidden; }
.tfshop-head { display: flex; align-items: center; gap: 18px; padding: 14px 16px 14px 20px; border-bottom: 1px solid #22242f; }
.tfshop-title { display: flex; align-items: center; gap: 12px; }
.tfshop-title b { display: block; font-size: 19px; font-weight: 800; color: #f5f2ff; letter-spacing: -.2px; }
.tfshop-title small { display: block; font-size: 12px; color: #8f95a8; margin-top: 1px; }
.tfshop-logo { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, #9b6dff, #6a45e8 55%, #3f2a9e); box-shadow: 0 6px 18px rgba(124,77,255,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.tfshop-logo .tf-ico { width: 20px; height: 20px; flex-basis: 20px; color: #fff; vertical-align: 0; }
.tfshop-tabs { display: flex; gap: 4px; padding: 4px; margin-left: 10px; background: #1b1c25; border: 1px solid #262836; border-radius: 14px; }
.tfshop-tabs button { border: 0; background: none; color: #a0a6b8; font: inherit; font-size: 13.5px; font-weight: 650; padding: 8px 16px; cursor: pointer; border-radius: 10px; transition: background .15s, color .15s; }
.tfshop-tabs button.on { color: #fff; background: linear-gradient(180deg, #33294f, #2a2342); box-shadow: inset 0 0 0 1px rgba(139,92,246,.45); }
.tfshop-tabs button:hover:not(.on) { color: #e4e6ee; background: #22232e; }
.tfshop-bal { margin-left: auto; }
.tfshop-wallet { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 99px; background: #1b1c25; border: 1px solid #2a2c3a; }
.tfshop-ring { --p: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#a78bfa calc(var(--p) * 1%), #2c2e3b 0); position: relative; }
.tfshop-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #1b1c25; }
.tfshop-ring .tfs-gem { position: relative; width: 17px; height: 17px; }
.tfshop-wt { display: flex; flex-direction: column; line-height: 1.2; }
.tfshop-pts { font-size: 15px; font-weight: 800; color: #f5f2ff; }
.tfshop-wt small { font-size: 11.5px; color: #8f95a8; }
.tfshop-x { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; border: 1px solid #2a2c3a; background: #1b1c25; color: #c9cdd9; cursor: pointer; font-size: 14px; transition: background .15s; }
.tfshop-x:hover { background: #262836; color: #fff; }
.tfshop-body { flex: 1 1 auto; overflow: auto; padding: 18px 20px 24px; scrollbar-width: thin; scrollbar-color: #343747 transparent; }
.tfs-hint { color: #8d93a6; font-size: 12.5px; line-height: 1.55; }
.tfs-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #9aa0b4; padding: 46px 16px; text-align: center; grid-column: 1 / -1; border-radius: 20px; border: 1px dashed #2c2f3d; background: rgba(255,255,255,.015); }
.tfs-empty b { color: #e9e6f5; font-size: 15px; }
.tfs-empty-ico { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: rgba(139,92,246,.12); margin-bottom: 4px; }
.tfs-empty-ico .tfs-gem { width: 24px; height: 24px; }
.tfs-shop { display: grid; grid-template-columns: 214px 1fr; gap: 22px; align-items: start; }
.tfs-cats { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 0; }
.tfs-cats button { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: none; color: #b3b8c7; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background .15s, color .15s; }
.tfs-cats button small { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #7f8598; background: #1e1f29; border-radius: 99px; padding: 1px 8px; }
.tfs-cats button.on { background: linear-gradient(90deg, rgba(139,92,246,.24), rgba(139,92,246,.06)); color: #fff; box-shadow: inset 2px 0 0 #a78bfa; }
.tfs-cats button.on small { color: #e4dcff; background: rgba(139,92,246,.3); }
.tfs-cats button:hover:not(.on) { background: #1d1e28; color: #e9eaf0; }
.tfs-ci { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; background: #1f2029; position: relative; }
.tfs-ci::before { content: ""; position: absolute; inset: 6px; background: currentColor; opacity: .85; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.tfs-cats button.on .tfs-ci { background: linear-gradient(135deg, #8b5cf6, #5b3fd6); color: #fff; }
.tfs-ci-all { --ico: url(/icons/grid.svg); } .tfs-ci-frame { --ico: url(/icons/ring.svg); } .tfs-ci-banner { --ico: url(/icons/image.svg); } .tfs-ci-medal { --ico: url(/icons/medal.svg); }
.tfs-ci-figure { --ico: url(/icons/trophy.svg); } .tfs-ci-decor { --ico: url(/icons/sparkle.svg); } .tfs-ci-font { --ico: url(/icons/type.svg); } .tfs-ci-effect { --ico: url(/icons/wand.svg); } .tfs-ci-perk { --ico: url(/icons/play.svg); }
.tfs-earn { margin-top: 16px; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, #1b1c26, #17181f); border: 1px solid #262836; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: #a3a8b9; line-height: 1.45; }
.tfs-earn b { color: #ece9f8; font-size: 13px; }
.tfs-earn em { font-style: normal; font-weight: 800; color: #c9b8ff; }
.tfs-nomoney { color: #8f86c9; }
.tfs-main { min-width: 0; }
.tfs-row { margin-top: 26px; }
.tfs-row-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.tfs-row-h h3, .tfs-cat-h h3 { margin: 0; font-size: 17px; font-weight: 800; color: #f2effc; letter-spacing: -.1px; display: flex; align-items: center; gap: 8px; }
.tfs-row-h small, .tfs-cat-h small { color: #8a90a3; font-size: 12.5px; }
.tfs-dot { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--rc)); box-shadow: 0 0 10px rgba(var(--rc), .8); }
.tfs-link { margin-left: auto; border: 0; background: none; color: #b9a8ff; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.tfs-link:hover { background: rgba(139,92,246,.14); color: #fff; }
.tfs-cat-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.tfs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 16px; align-content: start; }
.tfs-grid-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* filters */
.tfs-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tfs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tfs-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #2a2c3a; background: #1a1b24; color: #b3b8c7; font: inherit; font-size: 12.5px; font-weight: 650; padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.tfs-chip i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--rc)); }
.tfs-chip.on { color: #fff; border-color: rgba(var(--rc, 139,92,246), .7); background: rgba(var(--rc, 139,92,246), .16); }
.tfs-chip:hover:not(.on) { border-color: #3a3d4e; color: #e9eaf0; }
.tfs-selects { display: flex; gap: 8px; }
.tfs-sel { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #8a90a3; background: #1a1b24; border: 1px solid #2a2c3a; border-radius: 12px; padding: 0 4px 0 12px; }
.tfs-sel select { border: 0; background: transparent; color: #e6e3f2; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 6px; cursor: pointer; outline: none; }
.tfs-sel select option { background: #1a1b24; }

/* ---------- item card ---------- */
.tfs-card { --rc: var(--tfs-common); position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border-radius: 20px; background: linear-gradient(180deg, #1c1d27 0%, #17181f 100%);
  border: 1px solid rgba(var(--rc), .22); color: inherit; font: inherit; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.tfs-card:hover, .tfs-card:focus-visible { transform: translateY(-5px); border-color: rgba(var(--rc), .7); box-shadow: 0 18px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--rc), .35), 0 0 34px rgba(var(--rc), .16); outline: none; }
.tfs-card.equipped { border-color: rgba(167,139,250,.75); box-shadow: 0 0 0 1px rgba(167,139,250,.5), 0 0 24px rgba(139,92,246,.18); }
.tfs-shine { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.13) 50%, transparent 62%); transform: translateX(-120%); transition: transform .85s ease; }
.tfs-card:hover .tfs-shine { transform: translateX(120%); }
.tfs-stage { position: relative; height: 170px; display: grid; place-items: center; overflow: hidden; z-index: 1;
  background: radial-gradient(85% 75% at 50% 40%, rgba(var(--rc), .22), transparent 70%), radial-gradient(circle at 50% 120%, rgba(0,0,0,.45), transparent 60%), linear-gradient(180deg, #252736, #1a1b25);
  border-bottom: 1px solid rgba(var(--rc), .18); }
.tfs-stage::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask: radial-gradient(70% 70% at 50% 40%, #000, transparent); mask: radial-gradient(70% 70% at 50% 40%, #000, transparent); pointer-events: none; }
.tfs-card-glow { position: absolute; left: 50%; top: 50%; width: 340px; height: 340px; margin: -170px 0 0 -170px; z-index: 0; pointer-events: none; opacity: 0; }
.tfs-card.r-legendary .tfs-card-glow { opacity: .55; background: repeating-conic-gradient(from 0deg, rgba(245,185,66,.22) 0deg 7deg, transparent 7deg 22deg); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 75%); mask: radial-gradient(closest-side, #000 20%, transparent 75%); animation: tfsRays 30s linear infinite; }
.tfs-card.r-epic .tfs-card-glow { opacity: .35; background: radial-gradient(closest-side, rgba(169,112,255,.35), transparent 70%); }
@keyframes tfsRays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.tfs-card-b { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 0; min-width: 0; }
.tfs-card-b b { font-size: 15px; font-weight: 750; color: #f2f0fa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.1px; }
.tfs-card-b small { font-size: 12px; color: #8d93a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tfs-card-f { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 14px; margin-top: auto; }
.tfs-rar { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--rc)); }
.tfs-rar i { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: rgb(var(--rc)); box-shadow: 0 0 8px rgba(var(--rc), .9); }
.tfs-price { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; color: #f6f2ff; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.26); padding: 4px 11px 4px 9px; border-radius: 99px; }
.tfs-price.short { color: #9aa0b4; background: rgba(255,255,255,.04); border-color: #2a2c3a; }
.tfs-price.short .tfs-gem { filter: grayscale(.7) opacity(.7); }
.tfs-price.big { font-size: 18px; padding: 6px 14px 6px 11px; }
.tfs-price.big .tfs-gem { width: 18px; height: 18px; }
.tfs-price.huge { font-size: 30px; padding: 0; background: none; border: 0; gap: 10px; letter-spacing: -.5px; }
.tfs-price.huge .tfs-gem { width: 28px; height: 28px; }
.tfs-state { font-size: 12px; font-weight: 750; padding: 5px 11px; border-radius: 99px; background: #23252f; color: #b5bac8; }
.tfs-state.on { background: linear-gradient(180deg, rgba(139,92,246,.35), rgba(139,92,246,.22)); color: #f1ecff; box-shadow: inset 0 0 0 1px rgba(167,139,250,.5); }
.tfs-state.own { background: rgba(255,255,255,.06); color: #d7dae4; }
.tfs-state.muted { color: #8d93a6; }
.tfs-timer { position: absolute; z-index: 3; top: 10px; left: 10px; font-size: 11.5px; font-weight: 700; color: #ffe2b0; background: rgba(12,12,18,.78); border: 1px solid rgba(245,185,66,.35); border-radius: 99px; padding: 3px 9px; }
/* stage contents: the item on your own avatar / nick / profile */
.tfs-st-ava .tfs-ava-wrap > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 18px rgba(0,0,0,.45); background: #222433; }
.tfs-st-banner { place-items: stretch; background: #0f1016; }
.tfs-st-banner .tfs-banimg { transition: transform .5s ease; }
.tfs-card:hover .tfs-st-banner .tfs-banimg { transform: scale(1.05); }
.tfs-card:hover .tfs-st-banner.tfs-parallax .tfs-banimg { transform: scale(1.1) translateX(-8px); }
.tfs-st-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,10,16,.82)); }
.tfs-st-bn { position: absolute; z-index: 2; left: 12px; bottom: 10px; right: 12px; display: flex; align-items: center; gap: 9px; min-width: 0; }
.tfs-st-bn .tfs-ava-wrap { width: 32px; height: 32px; }
.tfs-st-bn .tfs-ava-wrap > img:first-child { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.85); }
.tfs-st-bn b { font-size: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tfs-st-glow { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--rc), .38), transparent); }
.tfs-st-obj { position: relative; line-height: 0; z-index: 1; }
.tfs-st-medal .tfs-st-obj img { width: 124px; height: 124px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.tfs-card:hover .tfs-st-medal .tfs-st-obj img { transform: translateY(-4px) rotate(-4deg) scale(1.05); }
.tfs-st-obj .tfs-fx-shine { left: 0; top: 0; transform: none; width: 100%; height: 100%; }
.tfs-st-figure { align-items: end; padding-bottom: 14px; }
.tfs-st-figure .tfs-st-glow { top: 6px; }
.tfs-st-figure .tfs-st-obj img { height: 140px; width: auto; max-width: 170px; object-fit: contain; filter: drop-shadow(0 12px 10px rgba(0,0,0,.5)); transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.tfs-card:hover .tfs-st-figure .tfs-st-obj img { transform: translateY(-6px) scale(1.04); }
.tfs-st-ped { position: absolute; bottom: 9px; left: 50%; width: 140px; height: 18px; margin-left: -70px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.7), transparent); z-index: 0; }
.tfs-gk-float .tfs-st-obj { animation: tfsFloat 4.5s ease-in-out infinite; animation-play-state: paused; }
.tfs-card:hover .tfs-gk-float .tfs-st-obj, .tfs-live .tfs-pv-obj .tfs-gk-float .tfs-st-obj { animation-play-state: running; }
.tfs-sparks i { position: absolute; width: 14px; height: 14px; background: #fff; opacity: 0; -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 60%), linear-gradient(#000, #000) center / 2px 100% no-repeat, linear-gradient(#000, #000) center / 100% 2px no-repeat; mask: linear-gradient(#000, #000) center / 2px 100% no-repeat, linear-gradient(#000, #000) center / 100% 2px no-repeat; animation: tfsTwinkle 2.6s ease-in-out infinite paused; }
.tfs-sparks i:nth-child(1) { left: 8%; top: 18%; } .tfs-sparks i:nth-child(2) { right: 6%; top: 40%; animation-delay: -.9s; } .tfs-sparks i:nth-child(3) { left: 30%; bottom: 8%; animation-delay: -1.7s; }
.tfs-card:hover .tfs-sparks i, .tfs-live .tfs-pv-obj .tfs-sparks i { animation-play-state: running; }
.tfs-st-text { padding: 0 14px; text-align: center; align-content: center; gap: 10px; }
.tfs-st-nick { font-size: 27px; font-weight: 750; color: #f6f3ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.25; padding: 2px 4px; }
.tfs-st-sample { font-size: 14px; color: #9aa0b4; }
.tfs-st-chat { display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 7px; border-radius: 14px; background: rgba(0,0,0,.25); justify-self: center; text-align: left; }
.tfs-st-chat img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.tfs-st-chat span { font-size: 14px; font-weight: 650; color: #f2f3f5; white-space: nowrap; }
.tfs-st-chat small { font-size: 10.5px; color: #8d93a6; font-weight: 400; margin-left: 7px; font-family: "gg sans", "Noto Sans", Arial, sans-serif; -webkit-text-fill-color: #8d93a6; }

/* ---------- hero ---------- */
.tfs-hero { position: relative; height: 272px; border-radius: 24px; overflow: hidden; background: #0c0c13; border: 1px solid rgba(var(--rc), .3); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.tfs-hero-art { position: absolute; inset: -2%; background: url(/shop/hero/hero.webp) 70% 50% / cover no-repeat; animation: tfsKen 24s ease-in-out infinite alternate; }
@keyframes tfsKen { from { transform: scale(1); } to { transform: scale(1.06) translateX(-1%); } }
.tfs-hero-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,12,19,.97) 0%, rgba(12,12,19,.86) 32%, rgba(12,12,19,.25) 62%, rgba(12,12,19,0) 80%), linear-gradient(0deg, rgba(12,12,19,.6), transparent 40%); }
.tfs-hero-in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 34px; max-width: 470px; }
.tfs-hero-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c4b2ff; }
.tfs-hero h2 { margin: 0; font-size: 36px; line-height: 1.05; font-weight: 850; color: #fff; letter-spacing: -.6px; text-shadow: 0 2px 18px rgba(139,92,246,.35); }
.tfs-hero-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tfs-hero-timer { font-size: 12.5px; color: #ffdca3; background: rgba(245,185,66,.12); border: 1px solid rgba(245,185,66,.3); border-radius: 99px; padding: 3px 10px; }
.tfs-hero-timer b { color: #fff1d6; }
.tfs-hero p { margin: 0; color: #b9bdcc; font-size: 14px; line-height: 1.5; }
.tfs-hero-act { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.tfs-hero-item { position: absolute; z-index: 2; right: 26px; bottom: 22px; width: 250px; height: 112px; border-radius: 18px; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.18); background: #111; cursor: pointer; box-shadow: 0 14px 30px rgba(0,0,0,.55); transition: transform .2s; }
.tfs-hero-item:hover { transform: translateY(-3px); }
.tfs-hero-item span { position: absolute; inset: 0; background-size: cover; background-position: center; }
.tfs-hero-item b { position: absolute; left: 12px; bottom: 9px; font-size: 14px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.tfs-hero-item::after { content: "Так будет у вас"; position: absolute; right: 8px; top: 8px; font-size: 10.5px; font-weight: 700; color: #f5f2ff; background: rgba(12,12,18,.7); padding: 2px 8px; border-radius: 99px; }
/* buttons */
.tfs-btn-primary { border: 0; border-radius: 14px; padding: 10px 20px; font: inherit; font-weight: 750; font-size: 14px; color: #fff; cursor: pointer; background: linear-gradient(180deg, #9a72ff 0%, #7346f0 55%, #5f36d8 100%); box-shadow: 0 6px 18px rgba(124,77,255,.35), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .15s, box-shadow .15s, filter .15s; }
.tfs-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(124,77,255,.45), inset 0 1px 0 rgba(255,255,255,.25); filter: brightness(1.06); }
.tfs-btn-primary:disabled { background: #2a2c38; color: #8d93a6; box-shadow: none; cursor: not-allowed; }
.tfs-btn-ghost { border: 1px solid #343747; border-radius: 14px; padding: 10px 18px; font: inherit; font-weight: 700; font-size: 14px; color: #e4e6ee; background: #20212b; cursor: pointer; }
.tfs-btn-ghost:hover:not(:disabled) { background: #2a2c38; border-color: #444759; }
.tfs-big { padding: 13px 26px; font-size: 15px; border-radius: 16px; min-width: 210px; }

/* ---------- live mini profile ---------- */
.tfs-mini { border-radius: 20px; background: #101117; border: 1px solid #262836; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.tfs-mini-ban { position: relative; height: 138px; overflow: hidden; background: radial-gradient(120% 140% at 15% 0%, rgba(139,92,246,.55), transparent 60%), linear-gradient(120deg, #3a3170, #262a5a 55%, #15161e); }
.tfs-mini-ban.tfs-has-banner { background: #0e0f15; }
.tfs-mini-ban::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(16,17,23,.6)); }
.tfs-mini-head { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 14px; padding: 0 18px; margin-top: -44px; }
.tfs-mini-ava { width: var(--ma, 88px); height: var(--ma, 88px); }
.tfs-mini-ava > img:first-child { width: var(--ma, 88px); height: var(--ma, 88px); border-radius: 50%; border: 5px solid #101117; object-fit: cover; background: #222433; box-sizing: border-box; }
.tfs-mini-name { min-width: 0; padding-bottom: 6px; display: flex; flex-direction: column; }
.tfs-mini-name b { font-size: 21px; font-weight: 800; color: #f6f3ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.tfs-mini-name small { color: #6ee7b7; font-size: 12px; }
.tfs-mini-wide .tfs-mini-head { flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-top: -52px; }
.tfs-mini-wide .tfs-mini-name { align-items: center; padding-bottom: 0; max-width: 100%; }
.tfs-inv-chips { margin-bottom: 16px; }
.tfs-chip small { font-size: 11px; color: #8a90a3; font-weight: 700; }
.tfs-chip.on small { color: #d9ccff; }
.tfs-mini-sc { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 18px 0; flex-wrap: wrap; }
.tfs-medals-prev .tfs-med img { width: 40px; height: 40px; }
.tfs-shelf-prev .tfs-fig img { height: 62px; max-width: 80px; }
.tfs-mini-demo { margin: 14px; border-radius: 14px; background: #181920; border: 1px solid #22242f; overflow: hidden; }
.tfs-mini-msg { display: flex; gap: 10px; padding: 10px 12px; }
.tfs-mini-sava > img:first-child { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.tfs-mini-sn { font-weight: 650; color: #f2f3f5; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfs-mini-sn .time { color: #8d93a6; font-size: 11px; margin-left: 8px; font-weight: 400; font-family: "gg sans", "Noto Sans", Arial, sans-serif; }
.tfs-mini-st { color: #c4c8d4; font-size: 13.5px; }
.tfs-mini-mem { display: flex; align-items: center; gap: 14px; padding: 10px 14px 12px 24px; border-top: 1px solid #22242f; background: #15161d; }
.tfs-mini-mav { width: 32px; height: 32px; }
.tfs-mini-mav > img:first-child { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.tfs-mini-mn { font-size: 14.5px; font-weight: 600; color: #e4e6ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfs-prev-label { color: #8f95a8; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }

/* ---------- preview modal ---------- */
.tfs-pv { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5,6,10,.74); animation: tfsIn .18s ease-out; }
.tfs-pv.hidden { display: none !important; }
@keyframes tfsIn { from { opacity: 0; } to { opacity: 1; } }
.tfs-pv-card { position: relative; width: min(1000px, 100%); max-height: 100%; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; padding: 26px; border-radius: 28px;
  background: radial-gradient(600px 300px at 80% 0%, rgba(var(--rc), .16), transparent 70%), #16171f; border: 1px solid rgba(var(--rc), .45); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(var(--rc), .12); animation: tfsPop .25s cubic-bezier(.2,.8,.3,1.2); }
@keyframes tfsPop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.tfs-pv-x { position: absolute; top: 14px; right: 14px; z-index: 6; }
.tfs-pv-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tfs-pv-toggle { display: inline-flex; align-self: flex-start; padding: 4px; border-radius: 14px; background: #1d1e28; border: 1px solid #2a2c3a; }
.tfs-pv-toggle button { border: 0; background: none; color: #a0a6b8; font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 10px; cursor: pointer; }
.tfs-pv-toggle button.on { background: linear-gradient(180deg, #33294f, #2a2342); color: #fff; box-shadow: inset 0 0 0 1px rgba(139,92,246,.45); }
.tfs-pv-stack { display: grid; }
.tfs-pv-stack > div { grid-area: 1 / 1; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.tfs-pv-stack > div.on { opacity: 1; pointer-events: auto; }
.tfs-pv-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 4px; }
.tfs-pv-cat { font-size: 12px; font-weight: 700; color: #8f95a8; text-transform: uppercase; letter-spacing: .1em; }
.tfs-pv-obj { margin: 4px 0 8px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(var(--rc), .25); }
.tfs-pv-obj .tfs-stage { height: 220px; border-bottom: 0; }
.tfs-pv-obj .tfs-st-medal .tfs-st-obj img { width: 170px; height: 170px; }
.tfs-pv-obj .tfs-st-figure .tfs-st-obj img { height: 190px; max-width: 230px; }
.tfs-pv-obj .tfs-st-nick { font-size: 34px; }
.tfs-pv-right h2 { margin: 2px 0 0; font-size: 28px; font-weight: 850; color: #fff; letter-spacing: -.4px; }
.tfs-pv-d { margin: 0; color: #c3c7d4; font-size: 14.5px; line-height: 1.5; }
.tfs-pv-act { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 10px; }
.tfs-pv-price { display: flex; align-items: baseline; gap: 12px; }
.tfs-pv-price small { color: #8d93a6; font-size: 13px; }
.tfs-pv-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tfs-pv-owned { font-size: 14px; font-weight: 700; color: #d9ccff; }
.tfs-miss { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(245,185,66,.06); border: 1px solid rgba(245,185,66,.22); }
.tfs-miss b { color: #ffd99a; font-size: 14px; }
.tfs-miss span { color: #b9bdcc; font-size: 13px; }
.tfs-miss .tfs-miss-bar { height: 6px; border-radius: 99px; background: #2a2c38; overflow: hidden; margin-top: 4px; }
.tfs-miss-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7c4dff, #c4b5fd); }
.tfs-burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.tfs-got { display: flex; flex-direction: column; gap: 2px; animation: tfsGot .5s cubic-bezier(.2,.8,.3,1.3) both; }
.tfs-got b { font-size: 26px; font-weight: 900; letter-spacing: -.3px; background: linear-gradient(90deg, #fff, rgb(var(--rc)) 60%, #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tfs-got span { color: #c3c7d4; font-size: 14px; }
@keyframes tfsGot { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.tfs-celebrate .tfs-pv-obj { animation: tfsObjPop .7s cubic-bezier(.2,.8,.3,1.25); position: relative; }
.tfs-celebrate .tfs-pv-obj::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-120%); animation: tfsSweepOnce 1s .15s ease-out forwards; pointer-events: none; }
@keyframes tfsObjPop { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes tfsSweepOnce { to { transform: translateX(120%); } }

/* ---------- inventory / referrals / history ---------- */
.tfs-inv { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.tfs-inv section { margin-bottom: 24px; }
.tfs-inv-prev { position: sticky; top: 0; }
.tfs-ref-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: end; padding: 22px; border-radius: 22px; background: radial-gradient(500px 220px at 0% 0%, rgba(139,92,246,.2), transparent 70%), #191a23; border: 1px solid #2a2c3a; }
.tfs-ref-hero h3 { margin: 0 0 6px; font-size: 20px; font-weight: 850; color: #fff; }
.tfs-ref-hero p { margin: 0; }
.tfs-ref-link label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 13px; color: #c9cdd9; }
.tfs-ref-row { display: flex; gap: 8px; }
.tfs-ref-row input { flex: 1 1 auto; min-width: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid #2f3242; background: #0f1016; color: #eceef5; font: inherit; }
.tfs-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 24px; }
.tfs-tier { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(180deg, #1c1d27, #17181f); border: 1px solid rgba(var(--rc, 160,168,186), .2); }
.tfs-tier img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.tfs-tier div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tfs-tier b { color: #f2effc; }
.tfs-tier small { color: #9aa0b4; }
.tfs-tier-bar { height: 5px; border-radius: 99px; background: #2a2c38; overflow: hidden; margin-top: 6px; }
.tfs-tier-bar i { display: block; height: 100%; background: rgb(var(--rc, 139,92,246)); }
.tfs-tier-n { font-weight: 800; color: #b5bac8; }
.tfs-tier.done { border-color: rgba(var(--rc), .6); box-shadow: 0 0 22px rgba(var(--rc), .12); }
.tfs-tier.done .tfs-tier-n { color: rgb(var(--rc)); }
.tfs-tier:not(.done) img { filter: grayscale(.75) brightness(.8); }
.tfs-ref-list { display: flex; flex-direction: column; gap: 8px; }
.tfs-rf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px; border-radius: 14px; background: #1a1b24; border: 1px solid #23252f; }
.tfs-rf-st { font-size: 12px; color: #9aa0b4; }
.tfs-rf-st.rewarded { color: #8fe3c5; } .tfs-rf-st.blocked { color: #e59aa8; } .tfs-rf-st.qualified { color: #c9c0ff; }
.tfs-rf-bars { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11.5px; color: #8d93a6; }
.tfs-rf-bars span { width: 80px; height: 6px; border-radius: 99px; background: #2a2c37; overflow: hidden; }
.tfs-rf-bars i { display: block; height: 100%; background: linear-gradient(90deg, #7c4dff, #c4b5fd); }
.tfs-hist { border-radius: 18px; border: 1px solid #23252f; overflow: hidden; background: #17181f; }
.tfs-hist table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tfs-hist th { text-align: left; color: #8d93a6; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 12px 16px; background: #1b1c25; }
.tfs-hist td { padding: 11px 16px; border-top: 1px solid #1f2129; color: #d7dae4; }
.tfs-hist td.plus { color: #8fe3c5; font-weight: 700; } .tfs-hist td.minus { color: #f0a3b1; font-weight: 700; }
.tfs-hist .tfs-empty { border: 0; }

@media (max-width: 1180px) { .tfs-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tfs-grid-row > :nth-child(4) { display: none; } .tfshop-title small { display: none; } }
@media (max-width: 980px) { .tfshop-head { flex-wrap: wrap; } .tfshop-tabs { order: 3; margin-left: 0; width: 100%; } .tfshop-tabs button { flex: 1 1 0; } .tfs-pv-card { grid-template-columns: 1fr; } .tfs-inv { grid-template-columns: 1fr; } .tfs-ref-hero { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .tfshop { padding: 0; }
  .tfshop-card { width: 100%; height: 100%; border-radius: 0; }
  .tfs-shop { grid-template-columns: 1fr; }
  .tfs-cats { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px; }
  .tfs-cats button { white-space: nowrap; }
  .tfs-earn { display: none; }
  .tfs-grid, .tfs-grid-row { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .tfs-grid-row > :nth-child(4) { display: flex; }
  .tfs-hero { height: auto; min-height: 240px; } .tfs-hero-item { display: none; } .tfs-hero h2 { font-size: 28px; }
  .tfs-stage { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .tfs-fx, .tfs-decor, .tfs-fx i, .tfs-gk-float img, .tfs-gk-float .tfs-st-obj, .tfs-card-glow, .tfs-hero-art, .tfs-nx::after, .tfs-sparks i, .tfs-pv, .tfs-pv-card, .tfs-got, .tfs-celebrate .tfs-pv-obj, .tfs-celebrate .tfs-pv-obj::after { animation: none !important; }
  .tfs-fx-shine, .tfs-fx-petals, .tfs-shine { display: none !important; }
  .tfs-card, .tfs-card:hover { transition: none; transform: none; }
}

/* ---------- glass theme (no backdrop-filter — it caused lag) ---------- */
html[data-theme="glass"] .fx-more-menu { background: rgba(14, 15, 28, .98); border-color: rgba(167,139,250,.28); border-radius: 14px; }
html[data-theme="glass"] .tf-hsearch .tf-hs-kbd, html[data-theme="glass"] .fx-more-menu kbd { border-color: rgba(167,139,250,.3); }
html[data-theme="glass"] .tfs-shop-btn { background: rgba(255,255,255,.06); border: 1px solid rgba(167,139,250,.34); border-radius: 999px; color: #ece8ff; }
html[data-theme="glass"] .tfs-shop-btn:hover { background: rgba(140,110,255,.2); }
html[data-theme="glass"] .tfs-sb-ico { border-radius: 50%; }
html[data-theme="glass"] .tfshop-card { background: radial-gradient(900px 380px at 85% -10%, rgba(46,230,255,.08), transparent 60%), rgba(12, 14, 26, .97); border-color: rgba(167,139,250,.25); }
html[data-theme="glass"] .tfs-card, html[data-theme="glass"] .tfs-earn, html[data-theme="glass"] .tfs-tier, html[data-theme="glass"] .tfs-rf, html[data-theme="glass"] .tfs-sc-block { background: rgba(255,255,255,.045); }
html[data-theme="glass"] .tfs-mini, html[data-theme="glass"] .tfs-pv-card { background: rgba(10, 11, 22, .97); }
html[data-theme="glass"] .tfs-btn-primary { border-radius: 999px; background: linear-gradient(180deg, #8b7cf6, #6d5bd8); }
html[data-theme="glass"] .tfshop-tabs, html[data-theme="glass"] .tfshop-tabs button, html[data-theme="glass"] .tfs-chip, html[data-theme="glass"] .tfs-sel { border-radius: 999px; }

/* ---------- «Пригласить людей»: personal link + referral reward line ---------- */
.invite-reward { display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; padding: 11px 12px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 77, 255, .16), rgba(124, 77, 255, .05)); border: 1px solid rgba(167, 139, 250, .28); }
.invite-reward.hidden { display: none; }
.invite-reward > .tfs-gem { width: 26px; height: 26px; margin: 0; }
#inviteModal .invite-card { max-width: 520px; width: min(520px, calc(100vw - 32px)); }
.invite-reward-t { flex: 1 1 auto; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.invite-reward-t b { font-size: 13.5px; font-weight: 700; color: #ece6ff; }
.invite-reward-t small { font-size: 12px; color: #a9a3c4; }
.invite-reward-more { flex: 0 0 auto; width: auto !important; min-width: 0 !important; margin: 0 !important; white-space: nowrap; padding: 6px 11px !important; border-radius: 9px !important; border: 1px solid rgba(167, 139, 250, .35) !important;
  background: rgba(124, 77, 255, .14) !important; color: #d9ccff !important; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.invite-reward-more:hover { background: rgba(124, 77, 255, .26) !important; color: #fff !important; }
#inviteCopy:disabled { opacity: .55; cursor: progress; }
html[data-theme="glass"] .invite-reward { background: rgba(124, 77, 255, .14); border-color: rgba(196, 181, 253, .3); }

/* ---------- frames next to chat messages (channels, threads, DMs, news) ----------
   one empty <i> per framed row, frame = background-image (one cached image per frame type), no layout impact:
   absolutely positioned at the avatar's spot, pointer-events none. Static; a soft glow only on hover of that row. */
.tfs-cf { position: absolute; width: 40px; height: 40px; pointer-events: none; z-index: 1; }
.tfs-cf::after { content: ''; position: absolute; left: 50%; top: 50%; width: var(--cs, 150%); height: var(--cs, 150%); transform: translate(-50%, -50%);
  background: var(--cf) center / contain no-repeat; }
.fx-tmsg > .tfs-cf { width: 36px; height: 36px; }
@media (max-width: 860px) { .msg > .tfs-cf { width: 32px; height: 32px; } }
body.tf-compact .msg > .tfs-cf { width: 26px; height: 26px; margin-top: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .msg:hover > .tfs-cf-a::after, .fx-tmsg:hover > .tfs-cf-a::after { animation: tfs-cf-glow 1.8s ease-in-out infinite; }
}
@keyframes tfs-cf-glow { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .8; transform: translate(-50%, -50%) scale(1.04); } }

/* «GIF-аватар» notice */
.tfs-gl { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; background: rgba(6, 8, 14, .62); }
.tfs-gl.hidden { display: none; }
.tfs-gl-card { width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 26px 24px 22px;
  border-radius: 18px; background: #161822; border: 1px solid rgba(251, 191, 36, .35); box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(124,77,255,.15) inset; color: #e8eaf3; }
.tfs-gl-card b { font-size: 17px; font-weight: 750; }
.tfs-gl-card span { font-size: 13px; color: #a9a3c4; line-height: 1.45; }
.tfs-gl-btns { display: flex; gap: 10px; margin-top: 8px; }

/* ================= v4 (2026-10-12): new nick effects, nick colors, profile backgrounds, message accents, voice entry ================= */
.tfs-nx-fire { background-image: linear-gradient(180deg, #fff1a8 0%, #ffb547 40%, #ff5a36 75%, #c81e4a 100%); filter: drop-shadow(0 0 4px rgba(255,110,60,.35)); }
.tfs-nx-toxic { background-image: linear-gradient(90deg, #d9ff6b, #57f287 50%, #2de0c0); filter: drop-shadow(0 0 4px rgba(87,242,135,.35)); }
.tfs-nx-candy { background-image: repeating-linear-gradient(115deg, #ffc2e2 0 8px, #b6fff0 8px 16px); }
.tfs-nx-galaxy { background-image: radial-gradient(circle at 20% 40%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 2px), linear-gradient(90deg, #6b5cff, #c06bff 45%, #ff7ad9 70%, #7bd3ff); background-size: 18px 14px, 23px 17px, 100% 100%; }
.tfs-nx-chrome { background-image: linear-gradient(180deg, #ffffff 0%, #c9cde0 45%, #5f6478 52%, #e6e9f5 100%); }
.tfs-nx-chrome::after { background-image: linear-gradient(100deg, transparent 30%, #fff 50%, transparent 70%); animation: tfsGlint 4.5s ease-in-out infinite; animation-play-state: paused; }
.tfs-nx-rainbow { background-image: linear-gradient(90deg, #ff6b6b, #ffb86b, #ffe66b, #6bff9e, #6bd5ff, #9d8cff, #ff6bd5, #ff6b6b); background-size: 200% 100%; animation: tfsRainbow 6s linear infinite; animation-play-state: paused; }
.tfs-live .tfs-nx-rainbow, .msg:hover .tfs-nx-rainbow, .member:hover .tfs-nx-rainbow, #userMenu .tfs-nx-rainbow, .tfp-name .tfs-nx-rainbow { animation-play-state: running; }
@keyframes tfsRainbow { to { background-position: 200% 0; } }
.tfs-nc { font-weight: inherit; }
.tfs-nc-ruby { color: #ff5c7a !important; } .tfs-nc-mint { color: #5ff2c2 !important; } .tfs-nc-sky { color: #6cc4ff !important; }
.tfs-nc-sun { color: #ffd24d !important; } .tfs-nc-lilac { color: #c4a1ff !important; } .tfs-nc-coral { color: #ff9a7a !important; }
.tfs-nc * { color: inherit !important; }
/* profile background (profile modal / user card / preview) — pure CSS gradients, static */
.tfs-bg { --tfs-bgi: none; background-image: var(--tfs-bgi) !important; background-size: cover; }
.tfs-bg-carbon { --tfs-bgi: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 4px, transparent 4px 8px), repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 4px, transparent 4px 8px), linear-gradient(160deg, #23212c, #15141b); }
.tfs-bg-haze { --tfs-bgi: radial-gradient(120% 80% at 15% 0%, rgba(139,92,246,.45), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(217,70,239,.28), transparent 60%), linear-gradient(180deg, #1c1828, #121018); }
.tfs-bg-stars { --tfs-bgi: radial-gradient(1px 1px at 12% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 72% 12%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 38% 68%, #e9d5ff, transparent 60%), radial-gradient(1px 1px at 86% 58%, #fff, transparent 60%), radial-gradient(1px 1px at 22% 88%, #c4b5fd, transparent 60%), radial-gradient(1.5px 1.5px at 58% 38%, #fff, transparent 60%), radial-gradient(80% 60% at 70% 20%, rgba(99,102,241,.35), transparent 70%), linear-gradient(180deg, #0f0d1a, #07060c); background-size: 160px 160px, 210px 210px, 190px 190px, 230px 230px, 170px 170px, 250px 250px, cover, cover; }
.tfs-bg-grid { --tfs-bgi: linear-gradient(rgba(192,38,211,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(192,38,211,.22) 1px, transparent 1px), radial-gradient(100% 70% at 50% 0%, rgba(124,58,237,.35), transparent 70%), linear-gradient(180deg, #160c24, #0d0814); background-size: 22px 22px, 22px 22px, cover, cover; }
.tfs-bg-waves { --tfs-bgi: radial-gradient(120% 60% at 50% 110%, rgba(109,40,217,.45), transparent 60%), repeating-radial-gradient(circle at 50% 140%, rgba(255,255,255,.04) 0 10px, transparent 10px 22px), linear-gradient(180deg, #1b1926, #121019); }
.tfs-bg-aurora { --tfs-bgi: radial-gradient(70% 50% at 20% 10%, rgba(111,240,216,.32), transparent 70%), radial-gradient(70% 55% at 80% 20%, rgba(157,140,255,.4), transparent 70%), radial-gradient(60% 50% at 50% 90%, rgba(255,143,208,.22), transparent 70%), linear-gradient(180deg, #0f1420, #0b0a12); }
/* chat message accent: left bar + faint tint; text stays fully readable */
.msg.tfs-bub { position: relative; border-radius: 10px; }
.msg.tfs-bub::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--tfs-bub); pointer-events: none; }
.msg.tfs-bub { background-image: linear-gradient(90deg, var(--tfs-bubt), transparent 55%); }
.tfs-bub-amethyst { --tfs-bub: linear-gradient(#c4b5fd, #7c3aed); --tfs-bubt: rgba(139,92,246,.10); }
.tfs-bub-mint { --tfs-bub: linear-gradient(#a7f3d0, #10b981); --tfs-bubt: rgba(16,185,129,.09); }
.tfs-bub-gold { --tfs-bub: linear-gradient(#fde68a, #d97706); --tfs-bubt: rgba(245,158,11,.09); }
.tfs-bub-neon { --tfs-bub: linear-gradient(#f0abfc, #22d3ee); --tfs-bubt: rgba(217,70,239,.09); }
.tfs-bub-neon::before { box-shadow: 0 0 8px rgba(240,171,252,.6); }
.tfs-bub-frost { --tfs-bub: linear-gradient(#e0f2fe, #38bdf8); --tfs-bubt: rgba(56,189,248,.08); }
/* voice list entry animations (one-shot, only when someone joins; off with reduced motion) */
.tfs-entry-slide { animation: tfsEnSlide .6s cubic-bezier(.2,.8,.2,1) both; }
.tfs-entry-glow { animation: tfsEnGlow 1.4s ease-out both; border-radius: 8px; }
.tfs-entry-bounce > img { animation: tfsEnBounce .9s cubic-bezier(.3,1.6,.5,1) both; }
.tfs-entry-sparkle { position: relative; animation: tfsEnSlide .5s ease-out both; }
.tfs-entry-sparkle::after { content: ''; position: absolute; inset: -4px; pointer-events: none; background: radial-gradient(2px 2px at 10% 30%, #fff, transparent 70%), radial-gradient(2px 2px at 40% 80%, #e9d5ff, transparent 70%), radial-gradient(2px 2px at 70% 20%, #fff, transparent 70%), radial-gradient(2px 2px at 90% 70%, #c4b5fd, transparent 70%); animation: tfsEnSpark 1.3s ease-out both; }
@keyframes tfsEnSlide { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes tfsEnGlow { 0% { box-shadow: 0 0 0 0 rgba(167,139,250,0); background-color: rgba(139,92,246,0); } 25% { box-shadow: 0 0 14px 2px rgba(167,139,250,.55); background-color: rgba(139,92,246,.18); } 100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); background-color: rgba(139,92,246,0); } }
@keyframes tfsEnBounce { 0% { transform: translateY(-10px) scale(.7); } 60% { transform: translateY(2px) scale(1.05); } 100% { transform: none; } }
@keyframes tfsEnSpark { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
#shopBtn.tfs-has-daily { position: relative; }
#shopBtn.tfs-has-daily::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #f472b6; box-shadow: 0 0 0 2px var(--bg-2, #1e1f22); }
.tfs-snd-pref { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tfs-snd-pref select { background: #1e1c26; color: inherit; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 4px 8px; }
.tfs-price s { opacity: .55; font-weight: 500; margin-right: 4px; }
@media (prefers-reduced-motion: reduce) {
  .tfs-entry, .tfs-entry > img, .tfs-entry::after, .tfs-nx-rainbow { animation: none !important; }
}
.tfs-ci-color { --ico: url(/icons/palette.svg); } .tfs-ci-bg { --ico: url(/icons/bg.svg); } .tfs-ci-bubble { --ico: url(/icons/chat.svg); } .tfs-ci-sound { --ico: url(/icons/sound.svg); } .tfs-ci-entry { --ico: url(/icons/enter.svg); }

/* ===== 2026-10-13 mobile shop (≤768 / ≤480) — desktop untouched ===== */
@media (max-width: 768px) {
  .tfshop { padding: 0; align-items: stretch; }
  .tfshop-card { width: 100%; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
  .tfshop-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "title bal x" "tabs tabs tabs"; align-items: center; gap: 10px; padding: 10px 12px 8px; }
  .tfshop-title { grid-area: title; min-width: 0; } .tfshop-title small { display: none; }
  .tfshop-bal { grid-area: bal; margin: 0; min-width: 0; justify-self: end; }
  .tfshop-wallet { min-width: 0; } .tfshop-wt { min-width: 0; } .tfshop-wt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tfshop-x { grid-area: x; width: 44px; height: 44px; flex-basis: 44px; }
  .tfshop-tabs { grid-area: tabs; order: 0; width: auto; margin: 0 -12px; padding: 2px 12px 4px; gap: 6px; border: 0; border-radius: 0; background: none;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: 12px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 32px), transparent); }
  .tfshop-tabs::-webkit-scrollbar, .tfs-cats::-webkit-scrollbar { display: none; }
  .tfshop-tabs button { flex: 0 0 auto; min-height: 44px; padding: 0 16px; white-space: nowrap; scroll-snap-align: start; border-radius: 12px; background: #1b1c25; box-shadow: inset 0 0 0 1px #262836; }
  .tfshop-tabs button:last-child { margin-right: 24px; }
  .tfshop-body { padding: 14px 12px calc(28px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
  .tfs-cats { gap: 6px; margin: 0 -12px; padding: 0 12px 4px; scroll-snap-type: x proximity; scroll-padding-inline: 12px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 32px), transparent); }
  .tfs-cats button { flex: 0 0 auto; min-height: 44px; scroll-snap-align: start; background: #1a1b24; box-shadow: inset 0 0 0 1px #262836; }
  .tfs-cats button.on { box-shadow: inset 0 0 0 1px rgba(167,139,250,.55); }
  .tfs-cats button:last-child { margin-right: 24px; }
  /* «Витрина» exists as the top tab — the "all" category chip becomes «Все» on phones */
  .tfs-cats [data-cat="all"] { font-size: 0; gap: 0; } .tfs-cats [data-cat="all"]::after { content: "Все"; font-size: 14px; margin-left: 10px; }
  .tfs-filters { align-items: stretch; } .tfs-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; max-width: calc(100% + 24px); }
  .tfs-chips::-webkit-scrollbar { display: none; } .tfs-chip { flex: 0 0 auto; min-height: 36px; }
  .tfs-selects { width: 100%; flex-wrap: wrap; } .tfs-sel { flex: 1 1 150px; min-width: 0; } .tfs-sel select { flex: 1 1 auto; min-width: 0; max-width: 100%; min-height: 40px; }
  .tfs-cat-h, .tfs-row-h { flex-wrap: wrap; row-gap: 4px; }
  .tfs-grid, .tfs-grid-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .tfs-ref-hero { padding: 16px; gap: 14px; } .tfs-ref-hero > * { min-width: 0; }
  .tfs-ref-row { flex-wrap: wrap; } .tfs-ref-row input { flex: 1 1 100%; min-height: 44px; box-sizing: border-box; } .tfs-ref-row .tfs-btn-primary, .tfs-ref-row button { flex: 1 1 auto; min-height: 44px; }
  .tfs-hist { overflow-x: auto; } .tfs-hist th, .tfs-hist td { padding: 10px 12px; }
  .tfs-pv { padding: 0; align-items: stretch; }
  .tfs-pv-card { width: 100%; max-width: 100%; height: 100%; max-height: 100%; box-sizing: border-box; border: 0; border-radius: 0; gap: 16px; align-content: start; overscroll-behavior: contain;
    padding: calc(14px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px)); }
  .tfs-pv-x { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); width: 44px; height: 44px; flex-basis: 44px; z-index: 8; }
  .tfs-pv-toggle button { min-height: 40px; } .tfs-pv-right h2 { font-size: 24px; } .tfs-pv-obj .tfs-stage { height: 180px; }
  .tfs-pv-btns > * { flex: 1 1 auto; min-height: 44px; justify-content: center; }
  .tfs-shop, .tfs-inv { grid-template-columns: minmax(0, 1fr); } .tfs-shop > *, .tfs-inv > * { min-width: 0; }
}
@media (max-width: 480px) {
  .tfshop-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title x" "bal bal" "tabs tabs"; gap: 8px 10px; }
  .tfshop-bal { justify-self: stretch; } .tfshop-wallet { width: 100%; box-sizing: border-box; }
  .tfshop-logo { width: 36px; height: 36px; border-radius: 12px; } .tfshop-title b { font-size: 18px; }
  .tfs-grid, .tfs-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tfs-hero h2 { font-size: 24px; }
}