/* ═══════════════════════════════════════════════════════════════════════
   ИНТЕРФЕЙС ИГРЫ — по макету «Бустеры и коллекция».

   Взято из макета: слоёный тёмный фон с размытыми цветными пятнами и
   зерном, плавающее меню-пилюля со стеклом, крупная типографика,
   градиентные плитки наборов, диаманты редкости, стопка карт при
   вскрытии.

   Палитра редкостей общая для всего приложения:
     Common → серебро, Rare → синий, Epic → фиолет,
     Legendary → золото, Mythic → красный.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#fff;
  --dim:#8a8a90;
  --dim-2:#6e6e76;
  --glass:rgba(255,255,255,.07);
  --glass-line:rgba(255,255,255,.14);
  --panel:rgba(20,20,23,.72);
  --panel-line:rgba(255,255,255,.11);
  /* ─── ОТСТУПЫ ОТ КРАЁВ ЭКРАНА ─────────────────────────────────────
     Внутри Telegram стандартный env(safe-area-inset-*) НЕ работает —
     он всегда ноль, сколько бы ни было чёлки. Поэтому телефон резал
     нам верх интерфейса.

     Telegram вместо него объявляет свои переменные (Bot API 8.0),
     причём две пары, и их надо складывать:

       --tg-safe-area-inset-*          железо телефона: чёлка, строка
                                       состояния, полоса жестов внизу
       --tg-content-safe-area-inset-*  интерфейс самого Telegram:
                                       шапка с кнопкой «назад», которая
                                       в полноэкранном режиме висит
                                       поверх приложения

     Сперва отступаем от железа, потом от кнопок Telegram. Пересчитывает
     их сам Telegram — при повороте экрана, при входе в полноэкранный
     режим, на любом телефоне. Значит вёрстка подстраивается сама и
     ничего измерять на JS не надо.

     Порядок запасных вариантов: сначала переменная Telegram, если её
     нет — число, снятое из JS (см. watchSafeAreas в js/app.js), если и
     его нет — обычный env() для случая, когда игру открыли не в
     Telegram, а в браузере.                                          */
  --safe-t:calc(var(--tg-safe-area-inset-top,
                    var(--js-safe-t, env(safe-area-inset-top,0px)))
              + var(--tg-content-safe-area-inset-top, var(--js-content-t, 0px)));
  --safe-b:calc(var(--tg-safe-area-inset-bottom,
                    var(--js-safe-b, env(safe-area-inset-bottom,0px)))
              + var(--tg-content-safe-area-inset-bottom, var(--js-content-b, 0px)));

  --c-common:linear-gradient(150deg,#e2e8f0,#94a3b8);
  --c-rare:linear-gradient(150deg,#7cc0ff,#2f8fed);
  --c-epic:linear-gradient(150deg,#c4b0ff,#8b5cf6);
  --c-legendary:linear-gradient(150deg,#ffd166,#f5a524);
  --c-mythic:linear-gradient(150deg,#ff8098,#f0384f);
  --c-gold:linear-gradient(150deg,#ffe9a8,#e8b23a);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:#0a0a0b;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,system-ui,sans-serif;
  font-size:15px;line-height:1.45;overscroll-behavior-y:none;
}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.tnum{font-variant-numeric:tabular-nums}

/* ─── ФОН: слои макета ───────────────────────────────────────────────
   Тёмная база с уклоном в цвет экрана, два-три размытых пятна,
   затемнение к низу под меню и зерно поверх всего.               */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:linear-gradient(168deg,#1b1620 0%,#141318 42%,#0d0c0f 78%,#090909 100%)}
.bg b{position:absolute;border-radius:50%;display:block}
.bg .b1{left:-90px;top:-70px;width:330px;height:300px;filter:blur(46px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(240,56,79,.42),transparent 72%)}
.bg .b2{right:-100px;top:180px;width:300px;height:300px;filter:blur(48px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(139,92,246,.34),transparent 72%)}
.bg .b3{left:-40px;bottom:40px;width:300px;height:260px;filter:blur(46px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(226,232,240,.14),transparent 70%)}
.bg .top{position:absolute;inset:0;border-radius:0;
  background:radial-gradient(120% 42% at 50% -8%,rgba(255,255,255,.1),transparent 66%)}
.bg .fade{position:absolute;left:0;right:0;bottom:0;height:280px;border-radius:0;
  background:linear-gradient(180deg,transparent,rgba(6,6,8,.6))}
.bg .grain{position:absolute;inset:0;border-radius:0;opacity:.4;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .6px);background-size:3px 3px}

/* цвет фона зависит от экрана — как в макете */
body[data-screen="collection"] .bg{background:linear-gradient(172deg,#1d1a13 0%,#161419 44%,#0d0d10 80%,#0a0a0b 100%)}
body[data-screen="collection"] .bg .b1{background:radial-gradient(50% 50% at 50% 50%,rgba(245,165,36,.34),transparent 72%)}
body[data-screen="collection"] .bg .b2{background:radial-gradient(50% 50% at 50% 50%,rgba(255,209,102,.24),transparent 72%)}
body[data-screen="profile"] .bg{background:linear-gradient(172deg,#1c1712 0%,#151318 44%,#0d0c0f 80%,#0a0a0b 100%)}
body[data-screen="profile"] .bg .b1{background:radial-gradient(50% 50% at 50% 50%,rgba(245,165,36,.4),transparent 72%)}
body[data-screen="profile"] .bg .b2{background:radial-gradient(50% 50% at 50% 50%,rgba(240,56,79,.28),transparent 72%)}

/* ─── страница ───────────────────────────────────────────────────────── */
/* Приложение мобильное. На широком экране не растягиваем — держим
   колонку телефонной ширины по центру, растём только вниз. */
:root{--app:430px}
main{padding:calc(10px + var(--safe-t)) 16px calc(104px + var(--safe-b));
  max-width:var(--app);margin:0 auto}
.screen{display:none}
.screen.on{display:block}

.h1{font-size:32px;font-weight:800;letter-spacing:-.9px;line-height:1.05}
.h1-sub{margin-top:4px;font-size:14px;color:var(--dim)}
.h-row{display:flex;align-items:flex-end;justify-content:space-between;margin:6px 2px 14px}
.pill-stat{padding:8px 12px;border-radius:99px;font-size:12.5px;font-weight:700;
  color:#e7e9ee;background:var(--glass);border:1px solid var(--glass-line)}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:20px 2px 12px}
.sec b{font-size:19px;font-weight:700;letter-spacing:-.3px}
.sec span{font-size:13px;color:var(--dim)}

/* ─── ГЕРОЙ: бесплатный бустер ───────────────────────────────────────── */
.hero{position:relative;border-radius:22px;overflow:hidden;background:#141417;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.hero .glowA{position:absolute;inset:0;
  background:radial-gradient(105% 78% at 50% -14%,rgba(240,56,79,.5),rgba(139,92,246,.22) 46%,transparent 74%)}
.hero .rays{position:absolute;left:0;right:0;top:0;height:180px;opacity:.42;
  background:repeating-linear-gradient(96deg,rgba(255,128,152,.5) 0 8px,transparent 8px 26px);
  -webkit-mask-image:radial-gradient(75% 100% at 50% 0,#000,transparent 70%);
  mask-image:radial-gradient(75% 100% at 50% 0,#000,transparent 70%)}
.hero .blobL{position:absolute;left:-14%;top:-30%;width:220px;height:200px;border-radius:50%;filter:blur(26px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,128,152,.5),transparent 70%)}
.hero .blobR{position:absolute;right:-16%;top:6%;width:200px;height:190px;border-radius:50%;filter:blur(28px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(139,92,246,.42),transparent 70%)}
.hero .grain{position:absolute;inset:0;opacity:.55;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .6px);background-size:3px 3px}
.hero .in{position:relative;padding:14px 14px 18px}

.who{display:flex;align-items:center;justify-content:space-between}
.who .l{display:flex;align-items:center;gap:10px;min-width:0}
.ava{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:14px;font-weight:800;color:#0e0e10;
  background:linear-gradient(150deg,#ffd166,#f5a524);box-shadow:0 0 0 2px rgba(255,255,255,.22)}
.who .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.who .t i{font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.who .t b{font-size:14.5px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.round-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:14px;font-weight:700;color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}

.hero .cap{text-align:center;margin-top:18px;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.hero .clock{text-align:center;margin-top:4px;font-size:48px;font-weight:800;
  letter-spacing:-2.2px;line-height:1}
.hero .ready{display:flex;justify-content:center;margin-top:12px}
.hero .ready span{padding:8px 16px;border-radius:99px;font-size:13px;font-weight:600;color:#fff;
  border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.06)}
.ticker{position:relative;margin-top:16px;height:22px}
.ticker .marks{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 1px,transparent 1px 9px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.ticker .now{position:absolute;top:-4px;width:2px;height:30px;border-radius:2px;
  background:#fff;box-shadow:0 0 12px rgba(255,255,255,.7)}

/* ─── ПЛИТКИ НАБОРОВ ─────────────────────────────────────────────────── */
.tiles{display:grid;gap:10px}
.tile{position:relative;height:118px;border-radius:18px}
.tile .skin{position:absolute;inset:0;border-radius:18px;overflow:hidden}
.tile .skin .sheen{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 46%)}
.tile .skin .grain{position:absolute;inset:0;opacity:.6;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.55) .5px,transparent .6px);background-size:3px 3px}
.tile .skin .halo{position:absolute;right:-10px;top:-60px;width:210px;height:150px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.4),transparent 70%)}
.tile img.box{position:absolute;top:-6px;right:6px;width:116px;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.5));pointer-events:none}
.tile .txt{position:absolute;left:14px;top:15px;right:128px}
.tile .txt b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.2px}
.tile .txt span{display:block;margin-top:3px;font-size:11.5px;line-height:1.35}
.tile .act{position:absolute;left:14px;bottom:13px;display:flex;align-items:center;gap:8px}
.tile .act .go{padding:7px 14px;border-radius:99px;font-size:12.5px;font-weight:700}
.tile .act .cnt{padding:7px 11px;border-radius:99px;font-size:12.5px;font-weight:700;
  background:rgba(0,0,0,.28);color:rgba(255,255,255,.92)}
.tile .act .arrow{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:800}

.tile.normal .skin{background:linear-gradient(152deg,#4aa3f5 0%,#2f8fed 44%,#1b4f8f 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 16px 34px -22px rgba(79,163,245,.9)}
.tile.normal .txt span{color:rgba(255,255,255,.76)}
.tile.normal .act .go,.tile.normal .act .arrow{background:rgba(255,255,255,.92);color:#123a63}

.tile.rare .skin{background:linear-gradient(120deg,#ff8098 0%,#f0384f 42%,#6e0f24 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 16px 34px -22px rgba(240,56,79,.9)}
.tile.rare .txt span{color:rgba(255,255,255,.76)}
.tile.rare .act .go,.tile.rare .act .arrow{background:rgba(255,255,255,.92);color:#5c0c1d}

.tile.off{opacity:.5}
.tile.off .skin{background:linear-gradient(150deg,#2a2a31,#191920 60%,#121216);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.tile.off .txt span{color:rgba(255,255,255,.5)}
.tile.off .act .go{background:rgba(255,255,255,.12);color:rgba(255,255,255,.66)}
.tile[data-disabled]{pointer-events:none}
.tile.dim .skin{filter:saturate(.35) brightness(.72)}
.tile.dim img.box{filter:drop-shadow(0 12px 16px rgba(0,0,0,.5)) grayscale(.5) brightness(.8)}

/* ─── ПОЛОСА ПРОГРЕССА ПО РЕДКОСТЯМ ──────────────────────────────────── */
.rbar{display:flex;gap:4px;margin:0 2px 6px}
.rbar span{height:8px;border-radius:99px;flex:1}
.rlegend{display:flex;justify-content:space-between;margin:0 2px 16px;font-size:11px;color:var(--dim-2)}

/* ─── ФИЛЬТРЫ ────────────────────────────────────────────────────────── */
.filters{display:flex;gap:7px;margin-bottom:14px}
.filters button{flex:1;text-align:center;padding:8px 4px;border-radius:99px;
  font-size:12px;font-weight:600;color:var(--dim);
  background:var(--glass);border:1px solid rgba(255,255,255,.1)}
.filters button.on{color:#0e0e10;background:#fff;border-color:#fff}

/* ─── СЕТКА КОЛЛЕКЦИИ ────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cell{position:relative;min-width:0}
.cell .fit{width:100%}
/* Дубликат — вторая карта, чуть повёрнутая, из-под первой.
   Растягивать её на всю ячейку нельзя: в ячейку входит ещё и подпись
   под картой, и серая подложка вылезала из-под карты полосой. Поэтому
   высота задаётся пропорцией карты, а не низом ячейки.               */
.cell.dup::before{content:'';position:absolute;left:0;right:0;top:0;
  aspect-ratio:800/1177;border-radius:8%/5.6%;
  background:#28282c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transform:translate(4px,-4px) rotate(2.2deg)}
.cell .badge{position:absolute;top:-7px;right:-7px;min-width:24px;height:24px;padding:0 7px;
  border-radius:999px;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px rgba(0,0,0,.5);
  text-shadow:0 1px 2px rgba(0,0,0,.5);z-index:7}
.cell .under{margin-top:6px;text-align:center;line-height:1.25}
.cell .under .p{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.cell .under .r{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cell.locked .under .p{color:#4a4a52}
.ink-common{color:#cfd6e4}.ink-rare{color:#7cc0ff}.ink-epic{color:#c4b0ff}
.ink-legendary{color:#ffd166}.ink-mythic{color:#ff8098}.ink-gold{color:#ffe9a8}

/* ─── ПРОФИЛЬ ────────────────────────────────────────────────────────── */
.p-head{display:flex;align-items:center;gap:14px;margin-top:8px}
.p-head .ava{width:72px;height:72px;font-size:27px;
  box-shadow:0 0 0 3px rgba(255,255,255,.2),0 18px 40px -16px rgba(245,165,36,.8)}
.p-head .t{display:flex;flex-direction:column;gap:4px;min-width:0}
.p-head .t b{font-size:24px;font-weight:800;letter-spacing:-.6px}
.p-head .t i{font-style:normal;font-size:13px;color:var(--dim)}
.chips{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.chip{padding:4px 10px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.06em}
.chip.gold{color:#2c1a01;background:linear-gradient(120deg,#ffd166,#f5a524)}
.chip.myth{color:#ffabb9;background:rgba(240,56,79,.16);border:1px solid rgba(240,56,79,.44);font-weight:700}

.card-panel{position:relative;margin-top:16px;border-radius:20px;overflow:hidden;padding:14px;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--panel-line)}
.card-panel .halo{position:absolute;right:-40px;top:-50px;width:170px;height:150px;border-radius:50%;
  filter:blur(26px);background:radial-gradient(50% 50% at 50% 50%,rgba(245,165,36,.34),transparent 70%)}
.card-panel .row{position:relative;display:flex;align-items:center;justify-content:space-between}
.k{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.big{font-size:38px;font-weight:800;letter-spacing:-1.6px;line-height:1}
.mid{font-size:22px;font-weight:800;letter-spacing:-.6px}
.track{position:relative;margin-top:12px;height:7px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f5a524,#ffd977)}
.note{position:relative;margin-top:8px;font-size:12px;color:var(--dim)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.stats div{padding:11px;border-radius:16px;text-align:center;
  background:rgba(26,26,29,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.stats b{display:block;font-size:20px;font-weight:800;letter-spacing:-.6px}
.stats span{display:block;margin-top:3px;font-size:11px;color:var(--dim)}

.sub-h{display:flex;align-items:baseline;gap:9px;margin:18px 2px 10px}
.sub-h b{font-size:15px;font-weight:700;letter-spacing:-.2px}
.sub-h span{font-size:12px;color:var(--dim)}

.rlist{display:flex;flex-direction:column;gap:8px}
.rlist .r{display:flex;align-items:center;gap:12px}
.rlist .dia{width:11px;height:11px;border-radius:3px;transform:rotate(45deg);flex:none}
.rlist .nm{font-size:12.5px;font-weight:600;width:82px;flex:none;color:rgba(255,255,255,.82)}
.rlist .ln{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.rlist .ln i{display:block;height:100%;border-radius:99px}
.rlist .n{font-size:12px;color:var(--dim);width:52px;text-align:right;font-variant-numeric:tabular-nums}

.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

/* ─── МЕНЮ-ПИЛЮЛЯ ────────────────────────────────────────────────────── */
.tabs{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(16px + var(--safe-b));z-index:30;
  width:calc(min(100vw,var(--app)) - 32px);
  display:flex;padding:6px;border-radius:99px;
  background:rgba(26,30,38,.55);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 14px 38px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.15)}
/* Бегунок едет за вкладкой — пружинистая кривая из прототипа.
   Двигаем transform, а не left: только он анимируется плавно. */
.tabs .knob{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/5);
  border-radius:99px;
  transform:translateX(calc(var(--tab,0) * 100%));
  transition:transform .5s cubic-bezier(.34,1.42,.5,1);
  background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 14px rgba(0,0,0,.28)}
.tabs button{transition:color .3s ease}
.tabs button{position:relative;z-index:1;flex:1;display:grid;place-items:center;
  height:52px;color:var(--dim)}
.tabs button.on{color:#fff}
.tabs button:disabled{color:#43434b}
.tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}

/* ─── мелочи ─────────────────────────────────────────────────────────── */
.empty{text-align:center;color:var(--dim-2);font-size:13.5px;padding:44px 20px}
.err{background:#2a1215;border:1px solid #5c2b2e;color:#ff8a80;border-radius:14px;
  padding:12px 14px;font-size:13px;margin-bottom:12px}
.loading{text-align:center;color:var(--dim-2);padding:70px 20px;font-size:13.5px}
.mode-note{font-size:11px;color:#4a4a52;text-align:center;margin-top:16px}

/* ─── пыль в шапке — на месте звёзд из макета ───────────────────────── */
.who .l{display:flex;align-items:center;gap:10px;min-width:0;text-align:left}
.dustpill{display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:99px;
  font-size:13.5px;font-weight:800;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);color:#fff}
.dustpill b{font-weight:800}
.hero .waiting{padding:8px 16px;border-radius:99px;font-size:13px;font-weight:600;color:#fff;
  white-space:nowrap;border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.06)}

/* ─── плитки: кнопки, а не div ─────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:44px}
.tile{position:relative;border-radius:18px;text-align:left;color:#fff;
  transition:transform .18s ease;padding:0}
.tile:not(:disabled):hover{transform:translateY(-2px)}
.tile .skin{position:absolute;inset:0;border-radius:18px;overflow:hidden;display:block}
.tile .skin .halo{position:absolute;left:-20%;right:-20%;top:-58px;height:104px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.4),transparent 70%);filter:blur(6px)}
.tile .txt{position:absolute;left:14px;display:flex;flex-direction:column;gap:3px}
.tile .txt b{font-size:15px;font-weight:700;letter-spacing:-.2px}
.tile .txt span{font-size:11.5px;line-height:1.35}
.tile .act{position:absolute;left:14px;bottom:13px;display:flex;align-items:center;gap:8px}
.tile .go{padding:7px 13px;border-radius:99px;font-size:12.5px;font-weight:700}
.tile .cnt{padding:7px 11px;border-radius:99px;font-size:12.5px;font-weight:700;
  background:rgba(0,0,0,.3);color:rgba(255,255,255,.92)}
.tile.off{opacity:.42}
.tile.dim .skin{filter:saturate(.4) brightness(.75)}
.tile.dim .box{filter:drop-shadow(0 12px 16px rgba(0,0,0,.5)) grayscale(.4) brightness(.85)}

/* коллекция: ячейки — кнопки */
.cell{text-align:center;animation:popIn .34s cubic-bezier(.22,.9,.3,1) both;
  transition:transform .18s ease;padding:0}
.cell:not(:disabled):hover{transform:translateY(-3px)}
.cell .under{display:block;margin-top:6px;line-height:1.25}
.cell .under .p{display:block;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.cell .under .r{display:block;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.filters{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:0 0 auto;padding:8px 12px;border-radius:99px;font-size:11px;font-weight:700}
.rbar span{transition:flex .4s ease}