/* ═════════ три экрана и нижняя панель ═════════ */
:root { --ios: cubic-bezier(0.32, 0.72, 0, 1); --display: "Montserrat", "Arial Black", "Segoe UI", system-ui, sans-serif; --nav-h: 74px; }
.app { padding-top: var(--safe-top); padding-bottom: calc(var(--nav-h) + 26px + var(--safe-bottom)); }
.screen { display: none; flex: 1; flex-direction: column; }
.screen.active { display: flex; animation: screen-in 0.38s var(--ease); }
#scr-topup { min-height: calc(100vh - var(--nav-h) - 40px - var(--safe-bottom) - var(--safe-top)); }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* у апгрейда и ракеты фон-подсветка закреплён на весь экран (position: fixed); сдвиг (transform) во время появления
   привязывал её к экрану, и полоса под кнопками Telegram оставалась тёмной — эти экраны только проявляются */
@keyframes screen-fade { from { opacity: 0; } to { opacity: 1; } }
#scr-upgrade.active, #scr-rocket.active, #scr-market.active { animation-name: screen-fade; }

/* ───────── нижняя панель в стиле iOS 26: стеклянная таблетка + пузырь с аватаркой ───────── */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(10px + var(--safe-bottom));
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(calc(100% - 24px), 456px);
  margin: 0 auto;
  pointer-events: none;
}
.tabbar > * { pointer-events: auto; }

.glass {
  background: linear-gradient(180deg, rgba(40, 34, 57, 0.95), rgba(22, 18, 31, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 36px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.tb-pill {
  position: relative;
  flex: 1 1 auto;
  max-width: 340px;
  height: var(--nav-h);
  padding: 5px;
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: max-width 0.42s var(--ios), height 0.42s var(--ios);
}

.tb-drop {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 90px;
  border-radius: 999px;
  pointer-events: none;
  will-change: transform, width;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 50% 55%, rgba(150, 110, 255, 0.62), rgba(96, 70, 225, 0.3) 75%);
  box-shadow: 0 0 22px -3px rgba(124, 92, 255, 0.75), inset 0 0 0 1px rgba(200, 175, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  transition: box-shadow 0.4s var(--ios), filter 0.4s var(--ios);
}
.tb-drop.press { box-shadow: 0 0 30px -2px rgba(140, 105, 255, 0.95), inset 0 0 0 1px rgba(220, 200, 255, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.5); filter: brightness(1.12); }

.nav-btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
  transition: color 0.45s var(--ios), flex 0.42s var(--ios), opacity 0.42s var(--ios);
}
.nav-btn.on, .nav-btn.hover { color: #fff; }
.nav-ic { width: 40px; height: 32px; display: grid; place-items: center; transition: transform 0.45s var(--ios); }
.nav-btn.on .nav-ic { transform: translateY(-1px) scale(1.06); }
.nav-ic .lt { width: 27px; height: 27px; }
.nav-ic .lt:not(.keep) [fill]:not([fill="none"]) { fill: currentColor !important; }
.nav-ic .lt:not(.keep) [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
/* цветной значок (геймпад): переводим в серый, но с деталями; у выбранного — светлый */
.nav-ic .lt.keep { filter: grayscale(1) brightness(1.15) contrast(1.15); opacity: 0.62; transition: filter 0.35s var(--ios), opacity 0.35s var(--ios); }
.nav-btn.on .nav-ic .lt.keep, .nav-btn.hover .nav-ic .lt.keep { filter: grayscale(1) brightness(1.9) contrast(1.1); opacity: 1; }
.nav-lb { max-height: 14px; white-space: nowrap; transition: opacity 0.45s var(--ios), max-height 0.45s var(--ios); }

.tb-bubble {
  flex: none;
  width: var(--nav-h);
  height: var(--nav-h);
  padding: 5px;
  border-radius: 50%;
  transition: transform 0.35s var(--ios), width 0.42s var(--ios), height 0.42s var(--ios);
}
.tb-bubble:active { transform: scale(0.92); }
.nav-me { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(140deg, #3b2f63, #1f1a2e); color: #d9ccff; font-weight: 700; font-size: 20px; }
.nav-me img { width: 100%; height: 100%; object-fit: cover; }

/* свёрнутая панель при прокрутке вниз — как в iOS 26 */
.tabbar.mini .tb-pill { max-width: 58px; height: 58px; }
.tabbar.mini .tb-bubble { width: 58px; height: 58px; }
.tabbar.mini .nav-btn:not(.on) { flex: 0 0 0; opacity: 0; pointer-events: none; }
.tabbar.mini .nav-lb { opacity: 0; max-height: 0; }
.tabbar.mini .tb-drop { top: 4px; bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .tb-pill, .nav-btn, .tb-bubble { transition: none; }
}

/* ───────── игры ───────── */
.gh {
  display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 10px;
  border-radius: 34px; background: linear-gradient(180deg, #231d35, #171320);
  border: 1px solid rgba(164, 107, 255, 0.28); box-shadow: inset 0 0 30px rgba(124, 77, 255, 0.12);
}
.gh-ava { width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(140deg, #3b2f63, #1f1a2e); color: #d9ccff; font-weight: 700; font-size: 22px; }
.gh-ava img { width: 100%; height: 100%; object-fit: cover; }
.gh-mid { min-width: 0; flex: 1; }
.gh-name { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 800; font-size: 15.5px; color: #fff; text-transform: uppercase; letter-spacing: 0.02em; }
.gh-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvl { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; background: #2d2840; color: #e9e4ff; }
.lvl svg { width: 11px; height: 11px; transform: rotate(180deg); }
.xp { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #cfc8e6; }
.xp-bar { flex: 1; max-width: 120px; height: 9px; border-radius: 5px; background: #2b2639; overflow: hidden; }
.xp-bar i { display: block; height: 100%; width: 8%; border-radius: inherit; background: linear-gradient(90deg, #3d7bff, #7aa8ff); box-shadow: 0 0 8px rgba(80, 140, 255, 0.8); }
.gh-bal { display: flex; flex-direction: column; gap: 6px; flex: none; }
.bal { display: flex; align-items: center; justify-content: flex-end; gap: 5px; height: 26px; min-width: 74px; padding: 0 6px 0 10px; border-radius: 13px; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.bal img { width: 18px; height: 18px; object-fit: contain; }
.bal.st { background: #fff; color: #17141f; }
.bal.gr { background: #120f19; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.gh-plus { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 30px; font-weight: 300; line-height: 1; background: radial-gradient(circle at 35% 30%, #8a9bff, #5a5cff 60%, #4a3fd8); box-shadow: 0 0 22px -4px rgba(100, 110, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.2s var(--ease); }
.gh-plus:active { transform: scale(0.92); }

.gbanner {
  position: relative; display: block; width: 100%; height: 178px; margin-top: 14px; padding: 28px 22px; overflow: hidden; border-radius: 28px; text-align: left;
  background: radial-gradient(120% 140% at 85% 30%, #3e2a7a 0%, #23173f 45%, #150f24 100%);
  border: 1px solid rgba(164, 107, 255, 0.3); transition: transform 0.25s var(--spring);
}
.sparkle-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.55) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 60% 70%, rgba(255,255,255,.4) 50%, transparent 51%), radial-gradient(1px 1px at 40% 85%, rgba(255,255,255,.35) 50%, transparent 51%), radial-gradient(1.3px 1.3px at 75% 15%, rgba(255,255,255,.5) 50%, transparent 51%), radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,.4) 50%, transparent 51%); }
.gt { position: relative; z-index: 2; font-family: var(--display); font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45); }
.gbanner .gt { font-size: 42px; }
.gtags { position: absolute; left: 22px; bottom: 18px; z-index: 2; display: flex; gap: 6px; }
.gtag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 9px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; color: #fff; background: rgba(10, 8, 16, 0.62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.gtag svg { width: 13px; height: 13px; }
.gtag.on { color: #6fe08a; }
.gtag.violet { background: linear-gradient(90deg, #8a5cff, #b36bff); }
.gtag.blue { background: #3d8bff; }
.gtag.soon { background: rgba(255, 255, 255, 0.92); color: #17141f; }
.gart { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.gart .lt { position: absolute; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45)); }

@keyframes shimmer { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.ggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.gcard { position: relative; display: block; width: 100%; height: 178px; padding: 18px 15px; overflow: hidden; border-radius: 26px; text-align: left; transition: transform 0.25s var(--spring); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.gcard:active, .gbanner:active { transform: scale(0.97); }
.gcard .gt { font-size: 23px; }
.gcard .gtags { left: 14px; bottom: 14px; }
.gcard.fire { background: radial-gradient(130% 120% at 80% 80%, #ff6a1a 0%, #b4201c 40%, #3a0d14 100%); }
.gcard.night { background: radial-gradient(130% 120% at 80% 80%, #3768d6 0%, #1c2a63 45%, #0e1022 100%); }
.gcard.toxic { background: radial-gradient(130% 120% at 80% 80%, #1fb58a 0%, #0f5c55 45%, #0a1a1f 100%); }
.gcard.royal { background: radial-gradient(130% 120% at 80% 80%, #b36bff 0%, #52269c 45%, #170d2a 100%); }
.gcard.gold { background: radial-gradient(130% 120% at 80% 80%, #ffc23a 0%, #b56a0c 42%, #2a1606 100%); }
.gcard.sky { background: radial-gradient(130% 120% at 80% 80%, #48c6ff 0%, #1a6aa8 45%, #0b1626 100%); }

/* ───────── маркет ───────── */
.mk-top { display: flex; gap: 8px; margin-top: 14px; }
.mk-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 16px; border-radius: 25px; background: var(--well); border: 1px solid var(--well-line); color: var(--muted); }
.mk-search svg { width: 22px; height: 22px; flex: none; }
.mk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; font-weight: 600; color: var(--text); }
.mk-search input::placeholder { color: var(--muted); }
.rb { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--well); border: 1px solid var(--well-line); color: var(--muted); transition: transform 0.2s var(--ease); }
.rb:active { transform: scale(0.92); }
.rb svg { width: 22px; height: 22px; }
.mk-filters { display: flex; align-items: center; gap: 8px; margin: 12px -14px 0; padding: 0 14px 2px; overflow-x: auto; scrollbar-width: none; }
.mk-filters::-webkit-scrollbar { display: none; }
.mk-filters .rb { width: 46px; height: 46px; }
.vsep { flex: none; width: 1px; height: 26px; background: var(--muted-2); opacity: 0.5; margin: 0 2px; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 20px; border-radius: 23px; background: var(--well); border: 1px solid var(--well-line); font-weight: 750; font-size: 15px; color: var(--text); }
.fchip svg { width: 18px; height: 18px; color: var(--muted); }
.mk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.lot { min-width: 0; display: flex; flex-direction: column; padding: 11px; border-radius: 28px; background: var(--well); border: 1px solid var(--well-line); text-align: left; }
.lot-art { position: relative; aspect-ratio: 1 / 1; max-width: 100%; border-radius: 21px; overflow: hidden; background: var(--c, #2a5f86); }
.lot-art::before { content: ""; position: absolute; inset: 0; opacity: 0.14; background-image: radial-gradient(circle at 25% 25%, #000 0 9%, transparent 10%), radial-gradient(circle at 75% 75%, #000 0 9%, transparent 10%); background-size: 46px 46px; }
.lot-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.24), transparent 62%); }
.lot-art .lt { position: absolute; inset: 15%; z-index: 1; }
.lot-badges { position: absolute; top: 9px; left: 9px; z-index: 2; display: flex; gap: 5px; }
.lot-badges span { width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, 0.28); }
.lot-badges span.g { background: #2fb36a; }
.lot-badges svg { width: 17px; height: 17px; }
.lot-name { margin: 11px 6px 0; font-size: 18px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lot-num { margin: 1px 6px 0; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.lot-row { display: grid; grid-template-columns: 1fr 48px; gap: 8px; margin-top: 11px; }
.price { height: 46px; border-radius: 23px; display: flex; align-items: center; justify-content: center; gap: 5px; background: #2b8cff; color: #fff; font-weight: 800; font-size: 15px; transition: transform 0.2s var(--ease); }
.price img { width: 17px; height: 17px; object-fit: contain; filter: brightness(0) invert(1); }
.price:active, .cart:active { transform: scale(0.95); }
.cart { width: 48px; height: 46px; border-radius: 23px; display: grid; place-items: center; background: var(--btn); color: var(--text); }
.cart svg { width: 22px; height: 22px; }
.promo { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 22px 12px 12px; border-radius: 28px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, #b56bff, #7a3fe0 55%, #4d1fae); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.promo h3 { position: relative; margin: 0; font-family: var(--display); font-weight: 800; font-size: 25px; line-height: 1.05; color: #fff; }
.promo h3 span { opacity: 0.75; }
.promo img { position: relative; width: 48%; margin: 8px 0; filter: drop-shadow(0 8px 18px rgba(30, 0, 80, 0.5)); animation: lift 4s ease-in-out infinite; }
@keyframes lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.promo p { position: relative; margin: 0; font-size: 14px; font-weight: 700; color: #fff; }
.promo .go { position: relative; width: 100%; height: 46px; margin-top: 10px; border-radius: 23px; background: #a24dff; color: #fff; font-weight: 800; font-size: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px -6px rgba(40, 0, 90, 0.8); }
.mk-note { margin: 14px 4px 0; text-align: center; font-size: 13px; color: var(--muted); }

.gcard, .gbanner { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }

/* игры: фоны в одной гамме (фиолетово-синие тона бота) */
.gcard.c1 { background: radial-gradient(130% 120% at 85% 85%, #4f6bff 0%, #2a2f86 42%, #120f2e 100%); }
.gcard.c2 { background: radial-gradient(130% 120% at 85% 85%, #8a54ff 0%, #45208f 44%, #160d2c 100%); }
.gcard.c3 { background: radial-gradient(130% 120% at 85% 85%, #c25bff 0%, #5c1f8e 44%, #1b0c2b 100%); }
.gcard.c4 { background: radial-gradient(130% 120% at 85% 85%, #5f8cff 0%, #3a2a9a 44%, #140f30 100%); }


/* ───────── кейс (в стиле раздела «Игры») ───────── */
/* у каждого предмета свой фон в гамме игр; --r — цвет свечения */
.r-gold   { --r: 255, 110, 220; --bgc: radial-gradient(130% 120% at 85% 85%, #ff6fd8 0%, #8e2a9c 46%, #1d0b29 100%); }
.r-violet { --r: 150, 100, 255; --bgc: radial-gradient(130% 120% at 85% 85%, #8a54ff 0%, #45208f 46%, #160d2c 100%); }
.r-blue   { --r: 90, 130, 255;  --bgc: radial-gradient(130% 120% at 85% 85%, #4f6bff 0%, #2a2f86 46%, #120f2e 100%); }
.r-silver { --r: 170, 185, 230; --bgc: radial-gradient(130% 120% at 85% 85%, #8d9cc9 0%, #39406b 46%, #13131f 100%); }
.r-brown  { --r: 224, 160, 100; --bgc: radial-gradient(130% 120% at 85% 85%, #c4804a 0%, #6b3a1c 46%, #1f1109 100%); }
.r-jack   { --r: 255, 196, 70;  --bgc: radial-gradient(130% 120% at 85% 85%, #ffc94a 0%, #a8480f 46%, #241008 100%); }
.r-none   { --r: 120, 112, 145; --bgc: linear-gradient(180deg, #221d30, #17131f); }

.case-top { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.case-back { position: static; width: 44px; height: 44px; background: #231d35; box-shadow: inset 0 0 0 1px rgba(164, 107, 255, 0.28); }
.case-back svg { width: 20px; height: 20px; transform: rotate(180deg); }

.case-hero { height: 150px; margin-top: 12px; padding: 24px 22px; pointer-events: none; }
.case-hero .gt { font-size: 40px; }

.roll { position: relative; height: 150px; margin-top: 12px; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, #231d35, #171320); border: 1px solid rgba(164, 107, 255, 0.28); box-shadow: inset 0 0 30px rgba(124, 77, 255, 0.12); }
.roll::before, .roll::after { content: ""; position: absolute; top: 0; bottom: 0; width: 54px; z-index: 2; pointer-events: none; }
.roll::before { left: 0; background: linear-gradient(90deg, #1b1628, rgba(27, 22, 40, 0)); }
.roll::after { right: 0; background: linear-gradient(270deg, #1b1628, rgba(27, 22, 40, 0)); }
.roll-track { position: absolute; top: 18px; left: 0; display: flex; gap: 10px; will-change: transform; }
/* метка по центру: белая полоска со свечением и «капли» сверху и снизу */
.roll-mark { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; z-index: 3; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.15) 70%, #fff); box-shadow: 0 0 10px rgba(150, 110, 255, 0.9); }
.roll-mark::before, .roll-mark::after { content: ""; position: absolute; left: 50%; width: 14px; height: 14px; margin-left: -7px; background: #fff; box-shadow: 0 0 12px rgba(150, 110, 255, 1); }
.roll-mark::before { top: -8px; border-radius: 0 0 50% 50%; transform: rotate(45deg); }
.roll-mark::after { bottom: -8px; border-radius: 50% 50% 0 0; transform: rotate(45deg); }

.tile { position: relative; flex: none; width: 104px; height: 114px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 22px; background: var(--bgc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform 0.4s var(--ios), box-shadow 0.4s var(--ios); }
.tile img { width: 64px; height: 64px; object-fit: contain; }
.case-items .tile img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.tile .t-name { font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.r-none .t-name { color: #8f88a6; }
.t-none { width: 54px; height: 54px; margin: 5px 0; border-radius: 50%; border: 2px dashed rgba(200, 195, 220, 0.28); }
.tile.won { transform: scale(1.07); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 26px -2px rgba(var(--r), 0.95); }

/* кнопка «Крутить» — как круглая кнопка «+» на карточке профиля */
.case-go { position: relative; width: 100%; height: 60px; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 30px; color: #fff; font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; background: radial-gradient(120% 160% at 30% 20%, #8a9bff, #5a5cff 55%, #4a3fd8); box-shadow: 0 12px 30px -12px rgba(100, 110, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.2s var(--ease), opacity 0.3s var(--ease); }
.case-go:active { transform: scale(0.97); }
.case-go:disabled { opacity: 0.55; transform: none; }
.case-go .gtag { height: 22px; font-family: inherit; font-size: 10.5px; }
.case-note { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--muted); }

.case-box { margin-top: 14px; padding: 12px; border-radius: 28px; background: linear-gradient(180deg, #231d35, #171320); border: 1px solid rgba(164, 107, 255, 0.28); }
.case-sub { margin: 2px 4px 10px; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; color: #b99bff; }
.case-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.case-items .tile { width: auto; height: 108px; }

/* окно результата: большая карточка как баннер в «Играх» */
.case-res { padding-top: 0; }
.res-card { position: relative; height: 230px; overflow: hidden; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bgc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); animation: pop 0.55s var(--spring) both; }
.res-card .gtag { position: absolute; top: 14px; left: 14px; }
.res-art { width: 138px; height: 138px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(var(--r), 0.55), rgba(var(--r), 0) 68%); }
.res-art .lt { width: 116px; height: 116px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5)); }
.res-art .t-none { width: 92px; height: 92px; }
.res-card .gt { margin-top: 4px; font-size: 26px; }
.case-res .res-inv { margin-top: 10px; display: inline-block; padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.08); }
.case-res h3 { margin-top: 16px; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; }
.case-res + .case-go { margin-top: 18px; }
.case-hero .gtag, .res-card .gtag { text-transform: uppercase; }
.tile { gap: 2px; }
.tile .t-val { font-size: 11px; font-weight: 750; color: rgba(255, 255, 255, 0.78); font-variant-numeric: tabular-nums; }
.case-items .tile { height: 112px; }
.case-items .tile img { width: 58px; height: 58px; }
/* «Что может выпасть»: свёрнут, раскрывается по нажатию */
.case-box { padding: 4px 12px; }
.case-sub { width: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 12px 4px; text-align: left; }
.case-sub svg { width: 18px; height: 18px; color: #b99bff; transition: transform 0.35s var(--ios); }
.case-box.open .case-sub svg { transform: rotate(180deg); }
.case-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ios); }
.case-fold > .case-items { min-height: 0; overflow: hidden; }
.case-box.open .case-fold { grid-template-rows: 1fr; }
.case-box.open .case-items { padding-bottom: 12px; }
.case-items button.tile:active { transform: scale(0.95); }
/* цена на кнопке «Крутить» — просто текст, без белой плашки */
.case-price { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; opacity: 0.9; }
.case-price img { width: 18px; height: 18px; }
.case-res .item-desc { margin-top: 16px; font-size: 15px; color: var(--text); }
/* золотая звезда вместо символа ⭐ в текстах */
img.st-ic { display: inline-block; width: 1.05em !important; height: 1.05em !important; margin: 0 0.04em !important; vertical-align: -0.17em; object-fit: contain; filter: none !important; }

/* ───────── апгрейд как у Portals, в нашей гамме ───────── */
#scr-upgrade { position: relative; --tc: 107, 123, 255; }
#scr-upgrade.t1 { --tc: 107, 123, 255; }   /* до 3x — сине-фиолетовый, как кнопки */
#scr-upgrade.t2 { --tc: 164, 107, 255; }   /* 3–5x — фиолетовый */
#scr-upgrade.t3 { --tc: 222, 107, 255; }   /* 5–7x — розово-фиолетовый */
#scr-upgrade.t4 { --tc: 255, 188, 35; }    /* 7x и выше — золото, как звёзды */
#scr-upgrade > *:not(.upb-glow) { position: relative; z-index: 1; }
/* свечение сверху: закреплено за экраном (не даёт прокрутки вбок), цвета меняются плавно */
.upb-glow { position: fixed; left: 0; right: 0; top: 0; height: 480px; z-index: 0; pointer-events: none; }
.upb-glow i { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s var(--ios); }
.glow-now .upb-glow i { transition: none; } /* при входе в апгрейд — подсветка сразу */
.up-gift-ic:not([src]) { visibility: hidden; } /* иконка подарка ещё готовится */
.upb-glow .g1 { background: radial-gradient(80% 75% at 50% -8%, rgba(107, 123, 255, 0.3), rgba(107, 123, 255, 0.06) 55%, rgba(107, 123, 255, 0) 78%); }
.upb-glow .g2 { background: radial-gradient(80% 75% at 50% -8%, rgba(164, 107, 255, 0.3), rgba(164, 107, 255, 0.06) 55%, rgba(164, 107, 255, 0) 78%); }
.upb-glow .g3 { background: radial-gradient(80% 75% at 50% -8%, rgba(222, 107, 255, 0.3), rgba(222, 107, 255, 0.06) 55%, rgba(222, 107, 255, 0) 78%); }
.upb-glow .g4 { background: radial-gradient(80% 75% at 50% -8%, rgba(255, 188, 35, 0.26), rgba(255, 188, 35, 0.05) 55%, rgba(255, 188, 35, 0) 78%); }
#scr-upgrade.t1 .g1, #scr-upgrade.t2 .g2, #scr-upgrade.t3 .g3, #scr-upgrade.t4 .g4 { opacity: 1; }
.up-h { font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; }

.upb-luck { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.upb-luck > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 18px; background: rgba(15, 11, 24, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.upb-luck span { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.55); }
.upb-luck b { font-size: 13px; font-weight: 750; color: rgba(255, 255, 255, 0.85); }

.upb-wheel { position: relative; width: min(100%, 360px); aspect-ratio: 1 / 1; margin: 4px auto 0; }
.upb-wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* крутится отдельный слой: браузер вращает готовую картинку на видеокарте, без перерисовки на каждом кадре */
.upb-rot { position: absolute; inset: 0; transform: rotate(0deg); will-change: transform; } /* слой заранее вынесен на видеокарту, чтобы первый кадр прокрутки не «спотыкался» */
.upb-base { fill: none; stroke: url(#upBase); stroke-width: 54; }
/* без CSS-фильтра: на iPhone фильтр у SVG-дуги обрезается и сектор рисуется криво; свечение — отдельной полупрозрачной дугой */
.upb-sec { fill: rgb(var(--tc)); } /* без transition: плавная смена цвета SVG застревала, и сектор оставался старого цвета */
.upb-secg { fill: rgba(var(--tc), 0.22); }
.upb-edge { fill: none; stroke: rgba(164, 107, 255, 0.22); stroke-width: 1; }
.upb-miss { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: 0.22em; fill: rgba(200, 190, 235, 0.45); }
.upb-ptr { fill: #fff; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
.upb-wheel.up-lost .upb-sec { fill: rgba(var(--tc), 0.35); }
.upb-wheel.up-lost .upb-secg { fill: rgba(var(--tc), 0); }
.upb-center { transform: scale(var(--k, 1)); }
/* маленький экран: плотнее отступы, чтобы апгрейд поместился без прокрутки (upFit) */
#scr-upgrade.up-compact .case-top { margin-top: 6px; }
#scr-upgrade.up-compact .upb-luck { margin-top: 8px; }
#scr-upgrade.up-compact .upb-luck > div { padding: 4px 10px; }
#scr-upgrade.up-compact .upb-ctrl { margin-top: 2px; }
#scr-upgrade.up-compact .upb-slider { margin-top: 8px; padding: 12px 16px 6px; }
#scr-upgrade.up-compact .upb-target { margin-top: 8px; height: 60px; }
#scr-upgrade.up-compact .upb-bet { margin-top: 8px; }
#scr-upgrade.up-compact .upb-step, #scr-upgrade.up-compact .upb-go { height: 52px; }
#scr-upgrade.up-compact .fastbar { margin-top: 8px; }
#scr-upgrade.up-tiny .upb-luck { display: none; }
#scr-upgrade.up-tiny .upb-wheel { margin-top: 10px; }
.upb-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.upb-win { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--display); font-weight: 900; font-size: 32px; line-height: 1; color: rgb(var(--tc)); font-variant-numeric: tabular-nums; transition: color 0.4s var(--ios); }
.upb-win img.upb-st { width: 26px; height: 26px; flex: none; object-fit: contain; }
.upb-mult { margin-top: 2px; font-size: 15px; font-weight: 750; color: rgba(var(--tc), 0.7); font-variant-numeric: tabular-nums; }
.upb-wheel.up-won .upb-win { animation: upWinPop 0.6s var(--spring) both; color: #fff; text-shadow: 0 0 18px rgba(var(--tc), 0.9); }
.upb-wheel.up-won .upb-mult { color: rgb(var(--tc)); }
@keyframes upWinPop { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
.upb-wheel.up-lost .upb-win { color: #ff6b7a; }
.upb-wheel.up-lost .upb-mult { color: rgba(255, 107, 122, 0.75); }

.upb-ctrl { margin-top: 8px; }
.upb-mode { display: inline-flex; gap: 4px; padding: 4px; border-radius: 22px; background: #1d1829; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.upb-mode button { width: 56px; height: 36px; border-radius: 18px; display: grid; place-items: center; transition: background 0.3s var(--ios); }
.upb-mode button img { width: 22px; height: 22px; object-fit: contain; opacity: 0.55; }
.upb-mode button.on { background: rgb(var(--tc)); }
.upb-mode button.on img { opacity: 1; }

.upb-slider { margin-top: 12px; padding: 16px 18px 10px; border-radius: 24px; background: #1d1829; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); touch-action: none; user-select: none; -webkit-user-select: none; }
.upb-track { touch-action: none; }
.upb-track { position: relative; height: 26px; border-radius: 13px; background: #15111d; cursor: pointer; }
.upb-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 13px; background: rgb(var(--tc)); box-shadow: 0 0 16px rgba(var(--tc), 0.5); transition: background-color 0.4s var(--ios), box-shadow 0.4s var(--ios); }
.upb-track i { position: absolute; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.upb-track i.on { background: rgba(255, 255, 255, 0.55); }
.upb-knob { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(var(--tc), 0.35); }
.upb-labels { position: relative; height: 18px; margin-top: 8px; }
.upb-labels span { position: absolute; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }

.upb-bet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.upb-step { display: flex; align-items: center; height: 58px; padding: 0 8px; border-radius: 29px; background: #1d1829; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.upb-step button:not(.upb-amt) { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 500; line-height: 1; color: #fff; background: #2d2545; }
.upb-amt { flex: 1; min-width: 0; height: 100%; font-weight: 800; font-size: 17px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upb-step.gift button:not(.upb-amt) { display: none; }
.upb-step.gift .upb-amt { font-size: 14px; }
.upb-go { height: 58px; border-radius: 29px; font-family: var(--display); font-weight: 900; font-size: 17px; color: #120e1c; background: rgb(var(--tc));
  box-shadow: 0 10px 28px -10px rgba(var(--tc), 0.9); transition: background 0.4s var(--ios), transform 0.2s var(--ease), opacity 0.3s; }
.upb-go:active { transform: scale(0.97); }
.upb-go:disabled { opacity: 0.5; transform: none; }

/* окно выбора ставки */
.tile.plain { background: radial-gradient(120% 70% at 50% 115%, rgba(var(--r), 0.32), rgba(var(--r), 0) 70%), #1f1a2c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.tile.plain .t-val { color: var(--muted); }
.up-sheet h3 { margin: 0 4px 12px; font-family: var(--display); font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em; }
.up-seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: #15111d; }
.up-seg button { flex: 1; height: 38px; border-radius: 12px; font-weight: 750; font-size: 14px; color: var(--muted); transition: background 0.25s, color 0.25s; }
.up-seg button.on { background: #2d2545; color: #fff; }
.up-stars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.up-chip { height: 42px; border-radius: 14px; font-weight: 750; font-size: 14px; color: #fff; background: #221c33; }
.up-chip.on { background: #3a2f5c; box-shadow: inset 0 0 0 1.5px #b99bff; }
.up-stars.six { grid-template-columns: repeat(3, 1fr); } /* апгрейд: 5 сумм + MAX — два ровных ряда */
.up-chip.up-max { color: #d9cffa; letter-spacing: 0.06em; } /* спокойный сиреневый (жёлтый владелец назвал «ядовитым», 23.10) */
.up-chip.up-max:disabled { opacity: 0.35; }
.up-input { grid-column: 1 / -1; height: 46px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 14px; background: #15111d; }
.up-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; font-weight: 750; color: #fff; }
.up-sheet .case-go { margin-top: 14px; }
.up-empty { margin-top: 12px; padding: 22px 8px; text-align: center; font-size: 14px; color: var(--muted); }
.up-grid { margin-top: 12px; }
.up-grid .tile { position: relative; height: 112px; }
.up-grid .tile img { width: 54px; height: 54px; }
.up-grid .tile img:not([src]) { visibility: hidden; } /* картинка ещё рисуется — без «битой» рамки */
/* на цветной кнопке и выбранном режиме значок тёмный — как у Portals */
.upb-go img.st-ic { filter: brightness(0) !important; opacity: 0.85; }
.upb-mode button.on img { opacity: 1; }
.upb-mode button[data-m="stars"].on img { filter: brightness(0); opacity: 0.85; }
/* «дёрганье», когда сумма вышла за пределы: заметный сдвиг и красная вспышка, потом всё как было */
.up-input.shake, .upb-step.shake { animation: upShake 0.7s ease-in-out both, upFlash 1.1s ease-out both; }
.up-input.shake input, .upb-step.shake .upb-amt { animation: upRed 1.1s ease-out both; }
/* мягкое покачивание, которое плавно затухает */
@keyframes upShake { 0% { transform: translateX(0); } 15% { transform: translateX(-6px); } 32% { transform: translateX(5px); } 50% { transform: translateX(-3px); } 68% { transform: translateX(2px); } 84% { transform: translateX(-1px); } 100% { transform: translateX(0); } }
@keyframes upFlash { 0% { box-shadow: inset 0 0 0 1.5px rgba(255, 107, 122, 0); } 20% { box-shadow: inset 0 0 0 1.5px rgba(255, 107, 122, 0.75); } 100% { box-shadow: inset 0 0 0 1.5px rgba(255, 107, 122, 0); } }
@keyframes upRed { 0% { color: #fff; } 20% { color: #ff8a96; } 100% { color: #fff; } }
.up-grid .tile:disabled { opacity: 0.3; }

/* «Ставлю» / «Хочу»: слева тип ставки, справа — на что играем (звёзды или подарок) */
.upb-ctrl { display: flex; align-items: flex-end; justify-content: space-between; }
.upb-col { display: flex; flex-direction: column; gap: 6px; }
.upb-col.right { align-items: flex-end; }
.upb-cap { padding: 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.upb-tmode button[data-t="stars"].on img { filter: brightness(0); opacity: 0.85; }
/* выбранный подарок-цель — вместо ползунка */
.upb-target { display: none; width: 100%; height: 68px; margin-top: 12px; padding: 0 16px 0 10px; align-items: center; gap: 12px; border-radius: 24px; background: #1d1829;
  box-shadow: inset 0 0 0 1px rgba(var(--tc), 0.45), 0 0 22px -10px rgba(var(--tc), 0.8); text-align: left; transition: box-shadow 0.4s var(--ios); }
.upb-target img { width: 48px; height: 48px; flex: none; object-fit: contain; }
.upb-tname { flex: 1; min-width: 0; display: flex; flex-direction: column; font-family: var(--display); font-weight: 800; font-size: 15px; color: #fff; text-transform: uppercase; }
.upb-tname small { font-family: var(--body, inherit); font-size: 13px; font-weight: 700; color: var(--muted); text-transform: none; }
.upb-tchg { flex: none; font-size: 13px; font-weight: 750; color: rgb(var(--tc)); }
#scr-upgrade.tgift .upb-target { display: flex; }
#scr-upgrade.tgift .upb-slider { display: none; }
.upb-win { max-width: 180px; transition: color 0.4s var(--ios), font-size 0.2s; }
.upb-win span { white-space: nowrap; }
#scr-upgrade.tgift .upb-win span { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
#scr-upgrade.tgift .upb-win { font-size: 22px; flex-direction: column-reverse; gap: 4px; }
#scr-upgrade.tgift .upb-win img.upb-st { width: 54px; height: 54px; }
.up-grid .tile { position: relative; }
.up-ch { position: absolute; top: 7px; right: 7px; height: 18px; padding: 0 6px; border-radius: 7px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; color: #fff; background: rgba(164, 107, 255, 0.35); }


/* ───────── ракета (Crash), в той же гамме, что апгрейд ───────── */
#scr-rocket { position: relative; --tc: 107, 123, 255; }
#scr-rocket.t1 { --tc: 107, 123, 255; }
#scr-rocket.t2 { --tc: 164, 107, 255; }
#scr-rocket.t3 { --tc: 222, 107, 255; }
#scr-rocket.t4 { --tc: 255, 188, 35; }
#scr-rocket > *:not(.upb-glow) { position: relative; z-index: 1; }
#scr-rocket.t1 .g1, #scr-rocket.t2 .g2, #scr-rocket.t3 .g3, #scr-rocket.t4 .g4 { opacity: 1; }
#scr-rocket[data-phase="crash"] .upb-glow i { opacity: 0 !important; }

/* сцена без рамки, как у конкурента: космос, сетка, ракета справа, множитель неоном слева */
.rk-scene { position: relative; height: 300px; margin: 10px -14px 0; overflow: hidden; }
.rk-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rk-ship { position: absolute; right: 9%; top: 16%; width: 130px; height: 130px; transition: opacity 0.3s, transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); animation: rkBob 2.6s ease-in-out infinite; }
.rk-ship .lt { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55)); }
@keyframes rkBob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 4px -8px; rotate: -3deg; } }
/* на старте ракета вылетает из нижнего левого угла — по линии */
#scr-rocket[data-phase="wait"] .rk-ship { opacity: 0; transform: translate(-190px, 150px) scale(0.45); transition: none; }
#scr-rocket[data-phase="crash"] .rk-ship { opacity: 0; transition: opacity 0.05s; }
.rk-boom { position: absolute; right: 9%; top: 16%; width: 130px; height: 130px; pointer-events: none; opacity: 0; }
.rk-boom .lt { width: 100%; height: 100%; display: block; filter: grayscale(1) brightness(1.25); } /* взрыв в цвет ракеты — чёрно-белый */
#scr-rocket[data-phase="crash"] .rk-boom { opacity: 1; animation: rkBoomOut 2.4s ease-out forwards; }
@keyframes rkBoomOut { 0%, 45% { opacity: 1; } 70%, 100% { opacity: 0; } }
.rk-x { position: absolute; left: 0; right: 0; top: 50%; padding-left: 7%; transform: translateY(-62%); text-align: left;
  font-family: var(--display); font-weight: 900; font-size: 52px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  color: rgb(var(--tc)); text-shadow: 0 0 10px rgba(var(--tc), 0.9), 0 0 30px rgba(var(--tc), 0.6); transition: color 0.3s, opacity 0.3s; }
#scr-rocket[data-phase="wait"] .rk-x { padding-left: 0; text-align: center; font-size: 110px; color: rgba(255, 255, 255, 0.85); text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); }
#scr-rocket[data-phase="crash"] .rk-x { padding-left: 0; text-align: center; font-size: 72px; color: #ff3d6e; text-shadow: 0 0 12px rgba(255, 61, 110, 0.9), 0 0 40px rgba(255, 61, 110, 0.6); animation: rkRedIn 1.6s ease-out both; }
@keyframes rkRedIn { 0%, 40% { opacity: 0; transform: translateY(-62%) scale(0.92); } 100% { opacity: 1; transform: translateY(-62%) scale(1); } }
.rk-sub { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ff8aa6; }

.rk-hist { display: flex; gap: 6px; margin-top: 6px; overflow: hidden; }
.rk-h { flex: none; height: 32px; min-width: 52px; padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; background: #1d1829; }
.rk-h.cur { background: rgb(107, 123, 255); }

.rk-auto { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 8px 8px 14px; border-radius: 24px; background: #1d1829; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.rk-auto > span { flex: 1; font-weight: 750; font-size: 14px; color: #fff; }
.rk-tog { width: 46px; height: 28px; flex: none; border-radius: 14px; background: #15111d; position: relative; transition: background 0.25s; }
.rk-tog i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #6d6785; transition: transform 0.25s var(--ios), background 0.25s; }
.rk-tog.on { background: rgb(var(--tc)); }
.rk-tog.on i { transform: translateX(18px); background: #fff; }
.rk-autox { height: 44px; width: 150px; flex: none; transition: opacity 0.25s; }
.rk-autox.off { opacity: 0.45; }
/* ставка в игре — сумму и автовывод менять нельзя */
#scr-rocket .rk-auto, #scr-rocket .upb-step { transition: opacity 0.25s; }
#scr-rocket .rk-auto.locked, #scr-rocket .upb-step.locked { opacity: 0.5; }
.rk-autox .upb-amt { display: grid; place-items: center; font-size: 15px; }
.rk-autox button:not(.upb-amt) { width: 30px; height: 30px; font-size: 20px; }
.rk-go.queued { background: #2d2545; color: #fff; box-shadow: none; font-size: 13px; }

.rk-players { margin-top: 14px; padding: 4px 12px 12px; border-radius: 28px; background: linear-gradient(180deg, #231d35, #171320); border: 1px solid rgba(164, 107, 255, 0.28); }
.rk-players .case-sub { pointer-events: none; }
.rk-row { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px 0 8px; border-radius: 18px; background: #1f1a2c; }
.rk-ava { position: relative; overflow: hidden; width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #d9ccff; background: linear-gradient(140deg, #3b2f63, #1f1a2e); }
.rk-name { flex: 1; font-weight: 750; color: #fff; }
.rk-pin { font-weight: 800; color: #fff; }
.rk-pw { font-weight: 800; color: #fff; } /* выигрыш — просто белым, без кислотного зелёного */
.rk-pw small { font-size: inherit; font-weight: 700; color: var(--muted); }
.rk-pl { font-weight: 800; color: var(--muted); }
.upb-bet .rk-go { font-size: 15px; white-space: nowrap; padding: 0 10px; }
/* фон ракеты — чёрный космос, как у конкурента (без цветного свечения) */
#scr-rocket .upb-glow { height: auto; bottom: 0; background: #000; }
#scr-rocket .upb-glow i { display: none; }
#scr-rocket .upb-glow.sparkle-bg::before { display: none; }

/* кнопки ракеты: плоские белые, без градиентов и свечения; отмена и «следующий раунд» — тёмно-серые */
.upb-bet .rk-go { color: #0b0b0f; font-family: var(--display); font-weight: 900; letter-spacing: 0.01em; background: #fff; box-shadow: none; animation: none; }
.upb-bet .rk-go img.st-ic { filter: brightness(0) !important; opacity: 0.85; }
.upb-bet .rk-go.cancel, .upb-bet .rk-go.queued { color: #fff; font-family: var(--body, inherit); font-weight: 800; background: #2a2a30; box-shadow: none; }
.upb-bet .rk-go.cancel img.st-ic, .upb-bet .rk-go.queued img.st-ic { filter: none !important; opacity: 1; }
.rk-h.cur { background: #fff; color: #0b0b0f; }
html:has(body.rk-open), body.rk-open { background: #000; transition: none; } /* чёрный сразу, без плавного перехода */

/* ───────── мины: спокойные тёмные клетки, кнопки как в ракете (белые) ───────── */
.mn-head { margin-top: 14px; text-align: center; }
.mn-x { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.mn-sub { min-height: 18px; margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
#scr-mines[data-state="lost"] .mn-x { color: #c98b94; }

.mn-board { --n: 5; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; margin-top: 14px; padding: 12px; border-radius: 26px;
  background: #15111d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.mn-board.s3 { gap: 10px; padding: 14px; }
.mn-board.s10 { gap: 4px; padding: 8px; border-radius: 20px; }
.mn-c { aspect-ratio: 1 / 1; min-width: 0; border-radius: 14px; display: grid; place-items: center; background: #262033;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform 0.15s var(--ease), background 0.2s; }
.mn-board.s3 .mn-c { border-radius: 20px; }
.mn-board.s10 .mn-c { border-radius: 7px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35); }
.mn-c:active { transform: scale(0.93); }
.mn-c img { width: 72%; height: 72%; object-fit: contain; animation: mnPop 0.35s var(--spring) both; }
.mn-c.gem { background: #2f2944; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18); }
.mn-c.boom { background: #3a2229; box-shadow: inset 0 0 0 1.5px rgba(201, 139, 148, 0.6); }
.mn-c.dim { background: #1c1826; box-shadow: none; }
.mn-c.dim img { opacity: 0.35; animation: none; }
@keyframes mnPop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }

.mn-opts { display: flex; gap: 8px; margin-top: 12px; transition: opacity 0.25s; }
.mn-opts.locked { opacity: 0.45; pointer-events: none; }
.mn-seg { flex: 1; display: flex; gap: 4px; padding: 4px; border-radius: 22px; background: #1d1829; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.mn-seg button { flex: 1; height: 36px; border-radius: 18px; font-weight: 800; font-size: 14px; color: var(--muted); transition: background 0.2s, color 0.2s; }
.mn-seg button.on { background: #fff; color: #0b0b0f; }
.mn-count { width: 150px; flex: none; height: 44px; }
.mn-count .upb-amt { display: grid; place-items: center; font-size: 15px; }
.mn-count button:not(.upb-amt) { width: 30px; height: 30px; font-size: 20px; }
.mn-c .mn-lt { width: 74%; height: 74%; display: block; animation: mnPop 0.35s var(--spring) both; }
.mn-c.dim .mn-lt { opacity: 0.35; }
.mn-bet .upb-step { transition: opacity 0.25s; }
.mn-bet.locked .upb-step { opacity: 0.4; pointer-events: none; }
.mn-go:disabled { opacity: 0.45; transform: none; }

/* лента множителей сверху (как у конкурентов) */
.mn-ribbon { display: flex; gap: 6px; margin: 14px -14px 0; padding: 0 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mn-ribbon::-webkit-scrollbar { display: none; }
.mn-pill { flex: none; height: 36px; padding: 0 12px; border-radius: 12px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--muted); background: #1d1829; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: background 0.25s, color 0.25s, transform 0.25s; }
.mn-pill.done { color: rgba(255, 255, 255, 0.55); background: #262033; }
.mn-pill.cur { color: #0b0b0f; background: #fff; transform: scale(1.06); }
.mn-pill.next { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); }
.mn-sub { margin-top: 10px; text-align: center; font-size: 14px; font-weight: 700; color: var(--muted); min-height: 20px; }
.mn-sub b { color: #fff; }
.mn-sub.bad { color: #d39aa3; }
/* мина: трясётся только эта клетка */
.mn-c.hit { animation: mnHit 0.5s ease; }
@keyframes mnHit { 15% { transform: translateX(-5px) rotate(-4deg); } 35% { transform: translateX(5px) rotate(4deg); } 55% { transform: translateX(-3px) rotate(-2deg); } 75% { transform: translateX(2px); } }
.mn-rand { width: 100%; height: 44px; margin-top: 10px; border-radius: 22px; font-weight: 800; font-size: 14px; color: #fff; background: #2a2a30; transition: opacity 0.2s; }
.mn-rand:disabled { opacity: 0.35; }
/* окно выигрыша снизу */
.mn-sheet { text-align: center; padding: 6px 0 4px; }
.mn-sheet-t { font-size: 13px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.mn-sheet-v { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; font-family: var(--display); font-weight: 900; font-size: 48px; color: #fff; }
.mn-sheet-v img { width: 40px; height: 40px; object-fit: contain; }
.mn-sheet-s { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.mn-again { display: block; width: 100%; height: 56px; margin-top: 18px; border-radius: 28px; font-family: var(--display); font-weight: 900; font-size: 17px; color: #0b0b0f; background: #fff; }

/* ───────── колесо (13.10.2026): колесо стоит, бежит шарик; карточки множителей как в меню «Игр»; всё на одном экране (whFit) ───────── */
.wh-hist { display: flex; gap: 6px; min-height: 28px; margin-top: 10px; overflow: hidden; }
/* история — тёмные таблетки с иксом и цветной полоской снизу, последняя (слева) — белая (владелец выбрал по скриншоту, 13.10.2026) */
.wh-h { flex: none; height: 28px; min-width: 46px; padding: 0 10px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 12.5px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; background: #1d1829; box-shadow: inset 0 -3px 0 var(--c, transparent); }
.wh-h.cur { background: #fff; color: #0b0b0f; }
.wh-hist:empty { display: none; }
.wh-wheel { position: relative; width: min(100%, 330px); aspect-ratio: 1 / 1; margin: 12px auto 0; }
.wh-rot { position: absolute; inset: 0; }
.wh-rot svg { display: block; width: 100%; height: 100%; }
.wh-seg { transition: opacity 0.35s, filter 0.35s; }
.wh-wheel.res .wh-seg:not(.hit) { opacity: 0.45; }   /* итог: выпавшая плитка горит, остальные гаснут */
.wh-wheel.res .wh-seg.hit { filter: brightness(1.35); }
/* шарик — единственное, что двигается */
.wh-ball { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; will-change: transform; pointer-events: none; }
.wh-ball i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #f2f0f8 45%, #aaa4bd 100%); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7), 0 0 12px rgba(255, 255, 255, 0.3); }
/* середина: «x?» и подсказка → «Ставка на x2» → выпавший икс и «+N» / красное «−N» и «Мимо» */
.wh-center { position: absolute; inset: 30%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.wh-x { display: flex; align-items: center; gap: 5px; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wh-sub { display: flex; align-items: center; gap: 4px; max-width: 120px; min-height: 16px; margin-top: 5px; font-size: 12px; font-weight: 800; color: var(--muted); line-height: 1.2; }
.wh-sub.win { max-width: none; color: #fff; font-family: var(--display); font-weight: 900; font-size: 18px; }
.wh-sub.lose { color: rgba(255, 107, 122, 0.8); font-size: 14px; }
.wh-sub.winx { font-family: var(--display); font-weight: 900; font-size: 18px; }
.wh-wheel.res .wh-x { animation: upWinPop 0.55s var(--spring) both; }
/* выбор икса — полоса из четырёх кнопок (как «3×3 / 5×5» в минах), у каждой цветная полоска снизу; выбранная — белая */
.wh-picks { margin-top: 14px; transition: opacity 0.25s; }
.wh-picks.locked { opacity: 0.45; pointer-events: none; }
.whp-seg { display: flex; gap: 4px; padding: 4px; border-radius: 24px; background: #1d1829; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.whp-seg button { flex: 1; height: 52px; border-radius: 20px; font-family: var(--display); font-weight: 900; font-size: 20px; color: #fff; box-shadow: inset 0 -3px 0 var(--c); transition: background 0.2s, color 0.2s; }
.whp-seg button.on { background: #fff; color: #0b0b0f; }
.whp-info { display: flex; justify-content: space-between; margin: 9px 6px 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.whp-info b { color: #fff; font-weight: 800; }
/* колесо онлайн (16.10.2026): на кнопке икса — сколько я на него поставил в этом раунде; в списке ставок — икс игрока его цветом */
.whp-seg button { position: relative; }
.whp-my { position: absolute; top: -6px; right: -2px; min-width: 22px; height: 18px; padding: 0 5px; border-radius: 9px; display: none; align-items: center; justify-content: center;
  font-family: var(--display); font-style: normal; font-weight: 900; font-size: 10.5px; color: #0b0b0f; background: var(--c); box-shadow: 0 0 0 2px #0f0c17; }
.whp-my.on { display: inline-flex; }
.wh-players { margin-top: 14px; }
.wh-players .rk-row + .rk-row { margin-top: 6px; }
.wh-pp { flex: none; height: 22px; padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; font-family: var(--display); font-weight: 900; font-size: 12px;
  color: #fff; background: #120e1c; box-shadow: inset 0 -2px 0 var(--c); }
#whGo:disabled { opacity: 0.5; transform: none; }
/* маленький экран: плотнее, чтобы всё влезло без прокрутки */
#scr-wheel.wh-compact .case-top { margin-top: 6px; }
#scr-wheel.wh-compact .wh-hist { margin-top: 6px; }
#scr-wheel.wh-compact .wh-wheel { margin-top: 8px; }
#scr-wheel.wh-compact .wh-picks { margin-top: 10px; }
#scr-wheel.wh-compact .whp-seg button { height: 44px; font-size: 18px; }
#scr-wheel.wh-compact .whp-info { margin-top: 6px; font-size: 13px; }
#scr-wheel.wh-compact .upb-bet { margin-top: 8px; }
#scr-wheel.wh-compact .upb-step, #scr-wheel.wh-compact .upb-go { height: 50px; }
#scr-wheel.wh-compact .fastbar { margin-top: 8px; }
#scr-wheel.wh-compact .wh-hist { display: none; }
#scr-wheel.wh-compact .wh-x { font-size: 28px; }
#scr-wheel.wh-compact .wh-sub { font-size: 11px; }

/* ───────── аккаунт: баланс, пополнение, инвентарь (в стиле раздела «Игры») ───────── */
.tb-bubble.on { box-shadow: 0 0 0 2px #fff, 0 14px 36px -12px rgba(0, 0, 0, 0.7); }
.pf-bal { height: 168px; }
.pf-cap { position: relative; z-index: 2; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.pf-bal .pf-num { margin-top: 6px; font-size: 44px; font-variant-numeric: tabular-nums; }
.pf-top { position: absolute; left: 22px; bottom: 18px; z-index: 2; height: 40px; padding: 0 20px; border-radius: 20px; font-family: var(--display); font-weight: 900; font-size: 15px; color: #17141f; background: #fff; transition: transform 0.2s var(--ease); }
.pf-top:active { transform: scale(0.95); }
.pf-h { margin: 18px 6px 10px; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: #cfc4ea; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-item { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 14px 10px 10px; border-radius: 24px;
  background: var(--bgc, #1d1829); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pf-art { position: relative; z-index: 1; width: 84px; height: 84px; display: grid; place-items: center; }
.pf-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4)); }
.pf-coupon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 28px; color: #17141f; background: #fff; }
.pf-name { position: relative; z-index: 1; margin-top: 6px; font-family: var(--display); font-weight: 900; font-size: 15px; color: #fff; text-transform: uppercase; text-align: center; }
.pf-val { position: absolute; top: 10px; left: 10px; z-index: 2; }
.pf-act { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 10px; }
.pf-act button { height: 36px; border-radius: 18px; font-weight: 800; font-size: 13px; transition: transform 0.2s var(--ease), opacity 0.2s; }
.pf-act button:active { transform: scale(0.95); }
.pf-act button:disabled { opacity: 0.5; }
.pf-sell { color: #17141f; background: #fff; }
.pf-wd { color: #fff; background: rgba(10, 8, 16, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.pf-note { display: grid; place-items: center; height: 36px; border-radius: 18px; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.8); background: rgba(10, 8, 16, 0.45); text-align: center; }
.pf-empty { margin-top: 4px; padding: 26px 18px; border-radius: 24px; text-align: center; font-size: 14px; font-weight: 600; color: #a49dba;
  background: linear-gradient(180deg, #231d35, #171320); border: 1px solid rgba(164, 107, 255, 0.28); }
.pf-sub { margin: -6px 0 12px; font-size: 13.5px; color: var(--muted); }
/* способ пополнения: звёзды / Gram / USDT */
.dep-m { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 12px; }
.dep-m button { position: relative; }
.dep-best { position: absolute; top: -8px; right: 10px; height: 18px; padding: 0 7px; border-radius: 9px; font-style: normal; font-size: 10.5px; line-height: 18px; font-weight: 800; color: #17141f; background: #6fe08a; }
#scr-games .gh-bal { cursor: pointer; }
.dep-m button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 46px; border-radius: 23px; font-weight: 800; font-size: 14px; color: #fff;
  background: linear-gradient(180deg, #231d35, #171320); border: 1px solid rgba(164, 107, 255, 0.28); transition: transform 0.2s var(--ease); }
.dep-m button:active { transform: scale(0.95); }
.dep-m button.on { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.dep-m img, .dep-m svg { width: 20px; height: 20px; object-fit: contain; }
.dep-note { min-height: 18px; margin: 10px 2px 12px; }
/* маркет пока закрыт: всё размыто, по центру «Скоро откроется» */
#scr-market.soon > :not(.mk-soon) { filter: blur(5px); opacity: 0.62; pointer-events: none; user-select: none; } /* 19.10.2026: слабее (было 8px) — NFT угадываются */
/* лоты маркета — NFT на градиентах меню «Игр» (вариант Б, владелец 19.10.2026) */
.lot-art.mg1 { background: radial-gradient(130% 120% at 85% 85%, #ffc94a 0%, #a8480f 46%, #241008 100%); }
.lot-art.mg2 { background: radial-gradient(130% 120% at 85% 85%, #8a54ff 0%, #45208f 44%, #160d2c 100%); }
.lot-art.mg3 { background: radial-gradient(130% 120% at 85% 85%, #c25bff 0%, #5c1f8e 44%, #1b0c2b 100%); }
.lot-art.mg4 { background: radial-gradient(130% 120% at 85% 85%, #5f8cff 0%, #3a2a9a 44%, #140f30 100%); }
.lot-art.mg5 { background: radial-gradient(130% 120% at 85% 85%, #ff6fd8 0%, #8e2a9c 46%, #1d0b29 100%); }
.lot-art[class*="mg"]::before, .lot-art[class*="mg"]::after { display: none; }
/* квадрат без aspect-ratio: на iPhone внутри кнопки он схлопывался в ноль (19.10.2026, скрин владельца) */
#scr-market .lot-art { aspect-ratio: auto; height: 0; padding-top: 100%; width: 100%; }
.lot-art > img { position: absolute; top: 9%; left: 9%; width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); }
#scr-market .lot-name { font-family: var(--display); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em; }
#scr-market .price { background: #fff; color: #17141f; }
#scr-market .price img { filter: none; }
.mk-soon { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 0 30px calc(var(--nav-h) + 30px); pointer-events: none; text-align: center; }
.mk-soon b { display: block; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1.05; text-transform: uppercase; color: #fff; text-shadow: 0 4px 22px rgba(0, 0, 0, 0.6); }
.mk-soon span { display: block; margin-top: 8px; font-size: 14.5px; font-weight: 700; color: #cfc8e6; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
#scr-market.active { animation: screen-fade 0.3s ease; }
@keyframes screen-fade { from { opacity: 0; } to { opacity: 1; } }
/* ───────── кейсы: сетка как у конкурента — тёмная карточка, название цветом кейса, «N предметов», цена, эмодзи ───────── */
.t-start { --g1: #4f6bff; --g2: #2a2f86; --g3: #120f2e; }
.t-fire { --g1: #ff6a1a; --g2: #b4201c; --g3: #3a0d14; }
.t-brown { --g1: #4f6bff; --g2: #2a2f86; --g3: #120f2e; }
.t-violet { --g1: #8a54ff; --g2: #45208f; --g3: #160d2c; }
.t-ice { --g1: #5f8cff; --g2: #3a2a9a; --g3: #140f30; }
.t-gold { --g1: #ffc23a; --g2: #b56a0c; --g3: #2a1606; }
.t-silver { --g1: #c25bff; --g2: #5c1f8e; --g3: #1b0c2b; }
.t-black { --g1: #8a8399; --g2: #3d3850; --g3: #15121d; }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cs-card { position: relative; overflow: hidden; height: 178px; padding: 16px 14px; border-radius: 26px; text-align: left; display: flex; flex-direction: column; align-items: flex-start;
  background: radial-gradient(130% 120% at 85% 85%, var(--g1) 0%, var(--g2) 44%, var(--g3) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform 0.25s var(--spring); }
.cs-card:active { transform: scale(0.97); }
.cs-name { position: relative; z-index: 2; font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 0.95; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.cs-n { position: relative; z-index: 2; margin-top: 8px; height: 22px; padding: 0 9px; border-radius: 9px; font-size: 11px; line-height: 22px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; background: rgba(10, 8, 16, 0.5); }
.cs-art { position: absolute; z-index: 1; right: -8px; bottom: -4px; width: 118px; height: 118px; transform: rotate(-8deg); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45)); }
.cs-price { position: absolute; z-index: 2; left: 14px; bottom: 14px; height: 26px; padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 13.5px; color: #fff; background: rgba(10, 8, 16, 0.55); }
.cs-price img.st-ic { width: 15px; height: 15px; }
/* первый кейс новичку — бесплатно: белая метка вместо цены */
.cs-price.cs-free { color: #17141f; background: #fff; text-transform: uppercase; font-size: 12px; letter-spacing: 0.03em; }
/* приз из бесплатного кейса летит в инвентарь (кружок с аватаркой) или в баланс */
.fly-prize { position: fixed; z-index: 9999; pointer-events: none; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5)); will-change: transform, opacity; }
.got { animation: gotPulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes gotPulse { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.case-go.ghost { margin-top: 10px; color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: none; }
/* баннер внутри кейса — в тех же цветах */
.gbanner.cs-hero { background: radial-gradient(130% 120% at 85% 85%, var(--g1) 0%, var(--g2) 44%, var(--g3) 100%);; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }  /* без фиолетовой рамки .gbanner — как у карточек кейсов (19.10.2026, владелец: «грани по бокам другого цвета») */
/* новые кейсы (19.10.2026): фон по цене — «Мелочь» «картон» (самый дешёвый), «Золото» как r-jack, «Только NFT» как r-gold; «Хеллоуин» — своя сцена */
.t-cardboard { --g1: #6b5440; --g2: #33271c; --g3: #15100b; }
.t-steel { --g1: #6d7895; --g2: #2f3550; --g3: #121320; } /* «Мелочь» с 19.10.2026 — стальной (вариант В) */
.t-jack { --g1: #ffc94a; --g2: #a8480f; --g3: #241008; }
.t-pink { --g1: #ff6fd8; --g2: #8e2a9c; --g3: #1d0b29; }
.t-hallo { --g1: #ff7a1a; --g2: #8a2a0c; --g3: #0b0910; }
.cs-card.t-hallo, .gbanner.cs-hero.t-hallo { background: radial-gradient(120% 110% at 78% 92%, #ff7a1a 0%, #8a2a0c 28%, #2a0d14 55%, #0b0910 85%); }
.cs-until { position: relative; z-index: 2; margin-top: 6px; height: 20px; padding: 0 7px; border-radius: 7px; font-size: 10px; line-height: 20px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: #17141f; background: #fff; }
.hw-scene { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hw-leaf { position: absolute; top: -24px; animation: hw-fall linear infinite; }
.hw-leaf svg { width: 100%; height: 100%; animation: hw-sway ease-in-out infinite alternate; animation-duration: inherit; }
@keyframes hw-fall { from { transform: translateY(0); } to { transform: translateY(230px); } }
@keyframes hw-sway { 0% { transform: translateX(-10px) rotate(-40deg); } 50% { transform: translateX(10px) rotate(30deg); } 100% { transform: translateX(-6px) rotate(140deg); } }
.hw-bat { position: absolute; right: 100px; bottom: 58px; width: 40px; height: 40px; transform: rotate(-10deg); }
@media (prefers-reduced-motion: reduce) { .hw-leaf, .hw-leaf svg { animation: none; } }
.gbanner.cs-hero .gt { color: #fff; }
#scr-cases .gh-bal { cursor: pointer; }
#scr-cases .gh { margin-top: 14px; }

/* «Крупные выигрыши» на экране «Кейсы»: высокие плитки с призом */
.wn { flex: none; margin-top: 12px; }
.wn[hidden] { display: none; }
.wn-h { margin: 0 6px 8px; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: #cfc4ea; }
.wn-row { flex: none; display: flex; gap: 9px; margin: 0 -14px; padding: 0 14px 2px; overflow-x: auto; scrollbar-width: none; }
.wn-row::-webkit-scrollbar { display: none; }
.wn-t { position: relative; flex: none; width: 104px; height: 132px; padding: 8px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.wn-t { background: var(--bgc); }
.wn-t > img { position: absolute; top: 10px; left: 50%; width: 64px; height: 64px; margin-left: -32px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }
.wn-t small { position: absolute; top: 8px; right: 10px; z-index: 1; font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.7); }
.wn-t b { position: relative; max-width: 100%; font-size: 12px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wn-tag { position: relative; margin-top: 3px; height: 22px; padding: 0 8px; border-radius: 9px; display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(10, 8, 16, 0.62); }
.wn-tag img { width: 13px; height: 13px; }

/* «Лента» выигрышей на экране «Игры» */
.rbn { flex: none; margin-top: 12px; }
.rbn[hidden] { display: none; }
.rbn-h { display: flex; align-items: center; justify-content: space-between; margin: 0 6px 8px; }
.rbn-h b { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: #cfc4ea; }
.rbn-h span { height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11px; line-height: 22px; font-weight: 800; color: #fff; background: rgba(164, 107, 255, 0.2); }
.rbn-row { flex: none; display: flex; gap: 8px; margin: 0 -14px; padding: 0 14px 2px; overflow-x: auto; scrollbar-width: none; }
.rbn-row::-webkit-scrollbar { display: none; }
.rbn-p { flex: none; display: flex; align-items: center; gap: 9px; height: 52px; padding: 0 14px 0 6px; border-radius: 26px; background: linear-gradient(180deg, #231d35, #171320); border: 1px solid rgba(164, 107, 255, 0.28); }
.rbn-a { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #2d2840; }
.rbn-a img { width: 30px; height: 30px; object-fit: contain; }
.rbn-t b { display: block; font-size: 13px; font-weight: 800; color: #fff; }
.rbn-t small { font-size: 11.5px; font-weight: 700; color: var(--muted, #a49dba); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rbn-t em { font-style: normal; color: #fff; }

/* окно «Поповнити баланс» — в стиле остальных экранов: плоская белая кнопка, ровный ряд сумм, метка «Вигідно» внутри кнопки */
.dep-sheet h3 { margin: 2px 4px 14px; }
.dep-sheet .dep-m { gap: 8px; margin: 0 0 12px; }
.dep-sheet .dep-m button { height: 48px; border-radius: 24px; gap: 8px; padding: 0 10px; font-size: 14px; }
.dep-sheet .dep-best { position: static; flex: none; height: 20px; padding: 0 7px; border-radius: 8px; font-size: 10px; line-height: 20px; letter-spacing: 0.02em; color: #fff; background: rgba(160, 120, 255, 0.55); }
.dep-sheet .dep-m button.on .dep-best { background: #fff; color: #17141f; }
.dep-sheet .up-stars { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 0; }
.dep-sheet .up-chip { height: 40px; padding: 0; border-radius: 13px; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; }
.dep-sheet .up-chip.on { background: #fff; color: #17141f; box-shadow: none; }
.dep-sheet .up-input { height: 50px; margin-top: 2px; border-radius: 16px; }
.dep-sheet .dep-note { margin: 12px 4px 4px; text-align: center; font-size: 13px; line-height: 1.4; color: #a49dba; }
.dep-sheet .case-go { margin-top: 10px; height: 58px; color: #17141f; background: #fff; box-shadow: none; font-size: 17px; }
.dep-sheet .case-go img.st-ic { filter: none !important; }

/* окно «Поповнити баланс» v2: способы — цветные карточки как игры (вариант C), цена на каждой, «Вигідно» тихо у крипты */
.dep-sheet .dep-m { grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.dep-sheet .dep-m .dcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; height: 98px; padding: 13px 14px; border-radius: 22px; text-align: left; overflow: hidden; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform 0.25s var(--spring); }
.dep-sheet .dep-m .dcard:active { transform: scale(0.97); }
.dep-sheet .dep-m .dcard.on { box-shadow: inset 0 0 0 2.5px #fff; }
.dep-sheet .dcard.dc0 { background: radial-gradient(130% 120% at 85% 85%, #4f6bff 0%, #2a2f86 42%, #120f2e 100%); }
.dep-sheet .dcard.dc1 { background: radial-gradient(130% 120% at 85% 85%, #8a54ff 0%, #45208f 44%, #160d2c 100%); }
.dep-sheet .dcard.dc2 { background: radial-gradient(130% 120% at 85% 85%, #c25bff 0%, #5c1f8e 44%, #1b0c2b 100%); }
.dep-sheet .dcard.dc3 { background: radial-gradient(130% 120% at 85% 85%, #5f8cff 0%, #3a2a9a 44%, #140f30 100%); }
.dep-sheet .dcard .t { display: block; font-family: var(--display); font-weight: 900; font-size: 19px; line-height: 1; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.dep-sheet .dcard .a { position: absolute; right: 10px; top: 10px; }
.dep-sheet .dcard .a svg, .dep-sheet .dcard .a img { width: 34px; height: 34px; }
.dep-sheet .dcard .tag { position: absolute; left: 12px; bottom: 11px; font-style: normal; font-weight: 800; font-size: 12px; color: #fff; background: rgba(10, 8, 16, 0.55); border-radius: 9px; padding: 4px 9px; }
.dep-sheet .dcard .best { position: absolute; right: -38px; top: 17px; width: 140px; padding: 4px 0; text-align: center; transform: rotate(38deg); font-style: normal; font-weight: 900; font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: #7a52ff; }
.dep-sheet .dcard:has(.best) .a { display: none; } /* у карточек с лентой значка нет — как в варианте 5 */
.dep-sheet .dep-note { display: none; }
.dep-sheet .up-stars { margin-top: 0; }

/* подсказка «Инвентарь ↓» над аватаркой в нижней панели (первые 3 захода, на 5 секунд) */
.inv-tip { position: absolute; right: 0; bottom: 74px; padding: 6px 12px; border-radius: 12px; background: #2a2340; color: #e8e1ff; font-weight: 800; font-size: 12px; white-space: nowrap; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(200, 170, 255, 0.25); animation: invTip 5.2s ease-in-out both; }
.inv-tip[hidden] { display: none; }
.inv-tip::after { content: ""; position: absolute; right: 25px; bottom: -5px; width: 10px; height: 10px; background: #2a2340; transform: rotate(45deg); box-shadow: inset -1px -1px 0 rgba(200, 170, 255, 0.25); }
@keyframes invTip { 0% { opacity: 0; transform: translateY(5px); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* пополнение со скидкой */
.dep-cpn { margin: 10px 4px 2px; text-align: center; font-size: 12.5px; font-weight: 700; line-height: 1.4; color: #cbb7ee; }
.pf-cpn { background: #fff !important; color: #17141f !important; }
.case-top .bal.st { cursor: pointer; }
.dep-sheet .dep-m .dcard:last-child:nth-child(odd) { grid-column: 1 / -1; height: 84px; }

/* плашка баланса B (05.10.2026): сверху мелко «Баланс», снизу крупное число и звезда */
:root { --bal-lbl: "Баланс"; }
.bal.st { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; justify-items: center; column-gap: 4px; row-gap: 1px; height: 46px; min-width: 84px; padding: 4px 14px; border-radius: 17px; font-size: 19px; line-height: 1.1; }
.bal.st::before { content: var(--bal-lbl); grid-column: 1 / -1; justify-self: center; text-align: center; font-size: 10px; font-weight: 700; color: #8d85a8; line-height: 1; letter-spacing: 0.02em; }
.bal.st img { width: 20px; height: 20px; }
.gh-bal .bal.st { padding: 4px 12px 4px 14px; }

/* быстрая прокрутка и несколько кейсов */
.fastbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.fastbar.end { justify-content: flex-end; }
.fb-seg { display: flex; gap: 3px; padding: 3px; border-radius: 18px; background: #0e0b14; box-shadow: inset 0 0 0 1px rgba(164, 107, 255, 0.2); }
.fb-seg button { height: 30px; padding: 0 12px; border-radius: 15px; font-weight: 800; font-size: 12.5px; color: #8d85a8; }
.fb-seg button.on { background: #fff; color: #17141f; }
.rolls .roll:first-child { margin-top: 12px; }
.rolls.multi .roll { height: 92px; margin-top: 8px; border-radius: 22px; }
.rolls.multi .roll-track { top: 9px; gap: 10px; }
.rolls.multi .tile { width: 70px; height: 74px; border-radius: 16px; }
.rolls.multi .tile img { width: 42px; height: 42px; }
.rolls.multi .tile .t-name { display: none; }
.rolls.multi .roll::before, .rolls.multi .roll::after { width: 34px; }
.multi-res { grid-template-columns: repeat(3, 1fr); }

/* пополнение NFT (14.10.2026): шаги, кнопка на @kilavgift, «Цены NFT» раскрываются по кнопке */
.dnft[hidden], .dnft-pr[hidden] { display: none; }
.dnft { margin-top: 12px; }
.dnft-st { display: flex; gap: 10px; align-items: flex-start; margin: 0 2px 9px; }
.dnft-st span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #2a2340; color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; }
.dnft-st p { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #cfc8e6; }
.dnft .case-go { margin-top: 6px; }
.dnft-tg { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 13px 16px; border: 0; border-radius: 16px;
  background: #1c1828; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); color: #fff; font: inherit; cursor: pointer; }
.dnft-tg b { font-weight: 800; font-size: 15px; }
.dnft-ch { width: 20px; height: 20px; color: #a99fc7; transition: transform 0.25s var(--spring); }
.dnft-tg.open { border-radius: 16px 16px 0 0; }
.dnft-tg.open .dnft-ch { transform: rotate(180deg); }
.dnft-pr { background: #1c1828; border-radius: 0 0 16px 16px; padding: 0 10px 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.dnft-bar { display: flex; gap: 8px; align-items: center; padding-top: 2px; }
.dnft-bar input[type="text"] { flex: 1; min-width: 0; height: 38px; border: 0; border-radius: 12px; padding: 0 12px; background: #2a2340; color: #fff; font: inherit; font-size: 14px; outline: none; }
.dnft-bl { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #cfc8e6; white-space: nowrap; cursor: pointer; }
.dnft-bl input { display: none; }
.dnft-bl i { position: relative; width: 36px; height: 21px; border-radius: 11px; background: #3a3350; transition: background 0.2s; }
.dnft-bl i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--spring); }
.dnft-bl input:checked + i { background: #7a52ff; }
.dnft-bl input:checked + i::after { transform: translateX(15px); }
.dnft-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } /* без своей прокрутки — листается всё окно */
.dnft-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 12px; background: #252036; }
.dnft-im { flex: none; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: #2f2944; }
.dnft-im img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* модель без фона на нейтральной подложке — как в маркете (28.10.2026) */
.dnft-im.mdl { background: #2c2b30; }
.dnft-im.mdl img { object-fit: contain; padding: 3px; box-sizing: border-box; }
.dnft-row span { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dnft-row b { flex: none; display: inline-flex; align-items: center; gap: 3px; background: #fff; color: #17141f; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 800; }
.dnft-row b img { width: 14px; height: 14px; border-radius: 0; background: none; }
.dnft-none { margin: 8px 4px; font-size: 13px; color: #a99fc7; text-align: center; }
.dep-sheet .dcard .a .dnft-frog { display: block; width: 62px; height: 62px; margin: -8px -6px 0 0; } /* та же лягушка, что на баннере баланса */

.dep-sheet .dcard .tag:empty { display: none; } /* у «Звёзд» цены на плитке нет */

/* лента «Выгодно +3%» целиком влезает в угол карточки (в английском «BEST PRICE +3%» обрезалось) */
.dep-sheet .dcard .best { right: -50px; top: 21px; width: 170px; font-size: 8.5px; letter-spacing: 0.02em; }

/* суммы пополнения — ряд таблеток, листается вбок; без поля ввода и клавиатуры (владелец, 14.10.2026) */
.dep-scroll { display: flex; gap: 8px; margin: 14px -16px 0; padding: 0 16px 2px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.dep-scroll::-webkit-scrollbar { display: none; }
.dep-scroll .up-chip { flex: 0 0 auto; min-width: 21%; padding: 0 12px; scroll-snap-align: center; } /* справа выглядывает следующая — видно, что ряд листается */

/* «Главная» — свой стиль, не как «Игры»: герой без рамки, круглые значки игр, стеклянные полосы акций */
#scr-home { position: relative; }
#scr-home .hm-hero { position: relative; margin: 0; padding: 10px 6px 22px; }
/* свечение — от самого верха экрана (под шапкой Telegram), плавно гаснет вниз, без обрезанного края */
.hm-glow { position: absolute; left: -14px; right: -14px; top: calc(-1 * var(--safe-top) - 30px); height: calc(100% + var(--safe-top) + 60px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); background: linear-gradient(180deg, rgba(118,78,240,.55) 0%, rgba(118,78,240,.55) 16%, rgba(116,76,238,.48) 28%, rgba(112,72,232,.36) 42%, rgba(106,68,226,.22) 58%, rgba(100,64,220,.1) 76%, transparent 100%); /* сверху сплошной как шапка Telegram, дальше — плавно, без перелома */ pointer-events: none; } /* одно сплошное свечение во всю ширину (владелец), синего нет */
/* продолжение свечения вверх: когда экран тянут вниз (резинка iPhone), сверху тот же фиолетовый, без тёмной полосы */
.hm-glow-up { position: absolute; left: -14px; right: -14px; top: calc(-1 * var(--safe-top) - 1030px); height: 1000px; background: rgba(118,78,240,.55); pointer-events: none; }
.hm-top { position: relative; display: flex; align-items: center; gap: 10px; }
.hm-top .gh-ava { width: 38px; height: 38px; flex: none; }
.hm-top b { font-size: 16px; font-weight: 800; color: #fff; }
.hm-frog { position: absolute; right: -8px; top: 30px; width: 172px; height: 172px; pointer-events: none; }
.hm-frog .lt { display: block; width: 100%; height: 100%; }
.hm-cap { position: relative; margin-top: 26px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.hm-balrow { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; margin-top: 4px; } /* поверх лягушки */
.hm-balrow .hm-num { white-space: nowrap; }
.hm-balrow .hm-num { font-family: var(--display); font-weight: 900; font-size: 52px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.hm-balrow img { width: 38px; height: 38px; }
.hm-usd { position: relative; margin-top: 6px; min-height: 17px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.6); }
.hm-btns { position: relative; z-index: 2; display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin-top: 18px; }
.hm-btns button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 50px; border: 0; border-radius: 25px; font-family: var(--display); font-weight: 900; font-size: 16px; cursor: pointer; transition: transform .2s var(--ease); }
.hm-btns button:active { transform: scale(.96); }
.hm-btns svg { width: 20px; height: 20px; }
.hm-btn-w { background: #fff; color: #17141f; }
.hm-btn-g { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter: blur(10px); }
.hm-sec { margin: 22px 4px 12px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8d85a8; }
.hm-bubs { display: flex; gap: 14px; overflow-x: auto; margin: 0 -14px; padding: 6px 14px 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
.hm-bubs::-webkit-scrollbar { display: none; }
.hm-bub { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.hm-bub-i { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 2px #0f0d15, 0 0 0 4px rgba(139,92,255,.6); }
.hm-bub-i .lt { width: 52px; height: 52px; display: block; }
.hm-bub-i.b0 { background: radial-gradient(circle at 70% 75%, #c25bff, #5c1f8e 60%, #1b0c2b); }
.hm-bub-i.b1 { background: radial-gradient(circle at 70% 75%, #4f6bff, #2a2f86 60%, #120f2e); }
.hm-bub-i.b2 { background: radial-gradient(circle at 70% 75%, #8a54ff, #45208f 60%, #160d2c); }
.hm-bub-i.b3 { background: radial-gradient(circle at 70% 75%, #c25bff, #5c1f8e 60%, #1b0c2b); }
.hm-bub-i.b4 { background: radial-gradient(circle at 70% 75%, #5f8cff, #3a2a9a 60%, #140f30); }
.hm-bub b { font-size: 12px; font-weight: 800; white-space: nowrap; }
.hm-offers { display: flex; flex-direction: column; gap: 10px; }
.hm-offer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 92px; padding: 14px 16px 14px 18px; border: 0; border-radius: 22px; text-align: left; color: #fff; font: inherit; cursor: pointer; overflow: hidden;
  background: linear-gradient(100deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .2s var(--spring); }
.hm-offer:active { transform: scale(.98); }
.hm-offer::before { content: ""; position: absolute; right: -30px; top: 50%; width: 170px; height: 170px; margin-top: -85px; border-radius: 50%; opacity: .55; filter: blur(2px); }
.hm-offer.t-violet::before { background: radial-gradient(circle, #8a54ff, transparent 65%); }
.hm-offer.t-blue::before { background: radial-gradient(circle, #4f6bff, transparent 65%); }
.hm-offer.t-gold::before { background: radial-gradient(circle, #ffb43d, transparent 65%); }
.hm-offer.t-pink::before { background: radial-gradient(circle, #c25bff, transparent 65%); }
.hm-of-t { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hm-of-t b { font-family: var(--display); font-weight: 900; font-size: 18px; text-transform: uppercase; line-height: 1.05; }
.hm-of-t small { font-size: 13px; font-weight: 700; color: #cfc8e6; line-height: 1.3; }
.hm-of-t em { align-self: flex-start; margin-top: 4px; font-style: normal; font-size: 11px; font-weight: 900; padding: 3px 9px; border-radius: 9px; background: #ffb43d; color: #2a1800; }
.hm-of-a { position: relative; flex: none; width: 76px; height: 76px; display: grid; place-items: center; }
.hm-of-a .lt { width: 76px; height: 76px; display: block; }
.hm-premsvg { width: 58px; height: 58px; color: #fff; }
#scr-home.active { animation-name: screen-fade; } /* без сдвига при появлении — свечение не дёргается */

/* «Главная», низ (15.10.2026): лента акций + карточки разного размера (цвета как в меню «Игры», чуть приглушённые) */
/* лента двигается только скриптом (палец/мышь/сама): overflow hidden + touch-action pan-y; последний баннер во всю ширину */
.hm-car { overflow: hidden; margin: 22px -14px 0 0; padding: 0 14px 0 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hm-track { display: flex; gap: 10px; width: 100%; will-change: transform; transform: translate3d(0,0,0); }
.hm-car::-webkit-scrollbar { display: none; }
.hm-car .hm-promo { flex: 0 0 88%; min-width: 0; transform: translateZ(0); } /* каждый баннер — свой слой: при сдвиге не перерисовывается */
.hm-car .hm-promo:last-child { flex-basis: 100%; } /* последний баннер — во всю ширину: долистал до него — пустого места справа нет */
.hm-car.one .hm-promo { flex-basis: 100%; }
.hm-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.hm-dots i { width: 6px; height: 6px; border-radius: 3px; background: #3a3350; transition: width .25s, background .25s; }
.hm-dots i.on { width: 18px; background: #fff; }
.hm-promo { position: relative; height: 118px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 20px; border: 0; border-radius: 24px; color: #fff; font: inherit; text-align: left; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); cursor: pointer; }
.hm-promo.violet { background: radial-gradient(130% 140% at 90% 80%, #7a4ae6 0%, #3f1d84 45%, #1b1134 100%); }
.hm-promo.blue { background: radial-gradient(130% 140% at 90% 80%, #4560e6 0%, #252a78 45%, #110e2a 100%); }
.hm-promo.gold { background: radial-gradient(130% 120% at 85% 85%, #ffc94a 0%, #a8480f 46%, #241008 100%); } /* как карточка NFT в окне приза (r-jack), владелец 15.10 */
.hm-pt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hm-pt small { font-size: 12px; font-weight: 800; color: rgba(255,255,255,.75); }
.hm-pt b { font-family: var(--display); font-weight: 900; font-size: 20px; text-transform: uppercase; line-height: 1.05; }
.hm-pt em { align-self: flex-start; margin-top: 7px; font-style: normal; font-size: 13px; font-weight: 900; padding: 6px 14px; border-radius: 12px; background: #fff; color: #17141f; }
.hm-pa { flex: none; } .hm-pa .lt { width: 96px; height: 96px; display: block; transform: rotate(-8deg); }
.hm-pa .hm-psvg { width: 80px; height: 80px; display: block; transform: rotate(-8deg); }
.hm-bx { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.hm-c { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; height: 104px; padding: 14px; border: 0; border-radius: 22px; overflow: hidden; color: #fff; font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .25s var(--spring); }
.hm-c:active, .hm-promo:active { transform: scale(0.97); }
.hm-c.tall { height: 196px; } .hm-c.wide { grid-column: 1 / -1; height: 96px; justify-content: center; }
.hm-c.t-blue { background: radial-gradient(130% 120% at 85% 85%, #4560e6 0%, #252a78 42%, #110e2a 100%); }
.hm-c.t-violet { background: radial-gradient(130% 120% at 85% 85%, #7a4ae6 0%, #3d1c80 44%, #150c29 100%); }
.hm-c.t-pink { background: radial-gradient(130% 120% at 85% 85%, #ad51e6 0%, #521b80 44%, #190b27 100%); }
.hm-c.t-crimson { background: radial-gradient(130% 120% at 85% 85%, #c94fd6 0%, #5e1d7a 44%, #1d0b29 100%); } /* Маркет — малиновый (владелец, 15.10) */
.hm-c.t-indigo { background: radial-gradient(130% 120% at 85% 85%, #557de6 0%, #33258a 44%, #120e2c 100%); }
.hm-ct { position: relative; z-index: 1; font-family: var(--display); font-weight: 900; font-size: 18px; text-transform: uppercase; color: #fff; }
.hm-c small { position: relative; z-index: 1; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.72); max-width: 66%; line-height: 1.3; }
.hm-c.tall small { max-width: 84%; }
.hm-c.wide small { max-width: 64%; display: block; margin-top: 3px; }
.hm-cbtn { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; height: 36px; display: grid; place-items: center; border-radius: 13px; font-size: 13px; font-weight: 900; color: #fff;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.hm-fan { position: absolute; left: 0; right: 0; top: 78px; display: flex; justify-content: center; }
.hm-nc { width: 52px; height: 60px; margin: 0 -6px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #3a3a7a, #232046); box-shadow: 0 6px 14px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12); }
.hm-nc .lt { width: 46px; height: 46px; display: block; }
.hm-bars { position: absolute; left: 14px; right: 14px; top: 88px; display: flex; flex-direction: column; gap: 8px; }
.hm-bars i { height: 9px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; } .hm-bars em { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #6d6bff, #b36bff); }
.hm-cprem { position: absolute; right: 10px; bottom: 10px; width: 58px; height: 58px; transform: rotate(-8deg); filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.hm-c#hmPrem small { max-width: 62%; }
.hm-locked .lt { filter: blur(3px) saturate(.6); opacity: .6; }
.hm-lk { position: absolute; right: 22px; top: 50%; transform: translateY(-30%); z-index: 2; width: 38px; height: 38px; color: #fff; }
.hm-lk svg { width: 100%; height: 100%; }
.rk-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-nc [data-anim="nft_westside2b"] { transform: scale(1.55); } /* у Westside Sign много пустого места вокруг — увеличиваем */
.hm-nc [data-anim="nft_jellybunny9"] { transform: scale(1.45); }

/* Рефералка (15.10.2026) — компактно и из тех же деталей, что везде: шапка «Аккаунта», баннер как «Кейсы», панель как «Кому/Оплата» */
.rf-ban { height: 132px; padding: 20px 20px; }
.rf-ban .gt { font-size: 44px; }
.rf-bs { position: relative; z-index: 2; margin-top: 4px; max-width: 64%; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.78); line-height: 1.3; }
.rf-ban .gtags { left: 20px; bottom: 16px; }
.rf-panel { margin-top: 12px; padding: 12px 14px; border-radius: 22px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.rf-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.rf-stats div { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rf-stats div + div { border-left: 1px solid rgba(255,255,255,.08); }
.rf-stats b { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-weight: 900; font-size: 19px; color: #fff; }
.rf-stats small { font-size: 11.5px; font-weight: 700; color: #8d85a8; }
.rf-stats .st-ic, .rf-f .st-ic { width: 15px; height: 15px; }
.rf-panel .tp-sep { margin: 12px 0; height: 1px; background: rgba(255,255,255,.08); }
.rf-lrow { display: flex; align-items: center; gap: 10px; }
.rf-lrow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: #cfc8e6; }
.rf-copy { flex: none; width: 38px; height: 38px; border: 0; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; }
.rf-copy svg { width: 18px; height: 18px; }
.rf-go { width: 100%; height: 52px; margin-top: 10px; border: 0; border-radius: 18px; background: #fff; color: #17141f; font: inherit; font-size: 16px; font-weight: 900; }
.rf-go:active, .rf-copy:active { transform: scale(.97); }
.rf-h { margin: 18px 4px 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8d85a8; }
.rf-list { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); margin-bottom: 20px; }
.rf-f { display: flex; align-items: center; gap: 12px; padding: 9px 14px; }
.rf-f + .rf-f { border-top: 1px solid rgba(255,255,255,.06); }
.rf-av { position: relative; overflow: hidden; width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #d9ccff; background: linear-gradient(140deg, #3b2f63, #1f1a2e); }
.rf-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rf-f b { flex: 1; font-size: 15px; font-weight: 800; color: #fff; }
.rf-f em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 900; color: #fff; } /* заработок с друга — белым (владелец 21.10.2026) */
.rf-f small { font-size: 12px; font-weight: 700; color: #8d85a8; }
.rf-empty { padding: 18px 14px; text-align: center; font-size: 14px; font-weight: 700; color: #8d85a8; }

/* ═════════ плинко (16.10.2026): чёрный космос, лягушка роняет алмаз, вкладки риска, «+N ⭐» над лункой ═════════ */
.gcard.plk-card { grid-column: 1 / -1; height: 150px; background: radial-gradient(120% 120% at 85% 15%, #2a2440 0%, #0d0b14 55%, #050507 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.plk-art { position: absolute; right: 0; bottom: 0; width: 210px; height: 150px; }
.plk-frog { position: absolute; right: 56px; top: 6px; width: 76px; height: 76px; }
.pl-hist { display: flex; gap: 6px; height: 26px; margin-top: 10px; overflow: hidden; }
.pl-hist span { flex: none; height: 26px; padding: 0 10px; border-radius: 13px; display: inline-flex; align-items: center; font-family: var(--display); font-weight: 900; font-size: 12.5px;
  color: var(--t); background: var(--bg); box-shadow: inset 0 0 0 1px var(--bd); }
.pl-hist span.cur { color: #0b0b0f; background: var(--t); box-shadow: none; }
.pl-hist span.new { animation: plIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
@keyframes plIn { from { transform: translateX(-30px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.pl-box { position: relative; width: 100%; max-width: 100%; margin: 10px auto 0; border-radius: 26px; overflow: hidden; background: #050507; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.pl-svg { display: block; width: 100%; height: auto; }
.pl-frog { position: absolute; left: 50%; top: 8px; width: 92px; height: 92px; margin-left: -46px; transform-origin: 50% 80%; }
.pl-frog.toss { animation: plToss 0.45s ease-out; }
@keyframes plToss { 0% { transform: none; } 35% { transform: translateY(-7px) scale(1.06, 0.95); } 70% { transform: translateY(2px) scale(0.97, 1.04); } 100% { transform: none; } }
.pl-peg { transform-box: fill-box; transform-origin: center; }
.pl-bk { transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.pl-bk.hit { transform: translateY(5px); }
.pl-bk.hit rect { fill: #fff; stroke: #fff; }
.pl-bk.hit text { fill: #0b0b0f; }
.pl-up { position: absolute; transform: translate(-50%, -100%); font-family: var(--display); font-weight: 900; font-size: 22px; color: #fff; white-space: nowrap; pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); animation: plRise 1.4s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.pl-up img { width: 19px; height: 19px; margin-left: 3px; vertical-align: -2px; }
.pl-up.small { font-size: 14px; color: #8a8fae; }
.pl-up.small img { width: 13px; height: 13px; }
@keyframes plRise { 0% { opacity: 0; transform: translate(-50%, -80%) scale(0.7); } 18% { opacity: 1; transform: translate(-50%, -110%) scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -230%) scale(1); } }
.pl-risk { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: opacity 0.25s; }
.pl-risk.locked { opacity: 0.45; pointer-events: none; }
.pl-risk button { position: relative; padding: 8px 0 10px; color: rgba(255, 255, 255, 0.45); font-family: var(--display); font-weight: 900; font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pl-risk button small { font-family: inherit; font-size: 11px; color: var(--c); opacity: 0.6; }
.pl-risk button.on { color: #fff; }
.pl-risk button.on small { opacity: 1; }
.pl-risk button.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 3px; border-radius: 2px; background: var(--c); }
#scr-plinko.pl-compact .pl-hist { display: none; }
#scr-plinko.pl-compact .case-top { margin-top: 6px; }
#scr-plinko.pl-compact .pl-risk button { padding: 6px 0 8px; }
#scr-plinko.pl-compact .upb-step, #scr-plinko.pl-compact .upb-go { height: 52px; }
/* окно вывода, пока не хватает пополнений (16.10.2026, коротко) */
.wd-need .wd-left { margin-top: 10px; font-family: var(--display); font-weight: 900; font-size: 17px; color: #fff; }
.wd-need .wd-note { margin-top: 8px; font-size: 12.5px; opacity: 0.6; }
/* облачко лягушки (16.10.2026): справа от неё, белое, хвостик к лягушке */
.pl-say { position: absolute; left: calc(50% + 44px); top: 14px; max-width: 42%; padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: #fff; color: #0b0b0f;
  font-family: var(--display); font-weight: 900; font-size: 12.5px; line-height: 1.2; opacity: 0; transform: scale(0.6) translateY(6px); transform-origin: 0 100%;
  pointer-events: none; transition: opacity 0.25s, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.pl-say.show { opacity: 1; transform: none; }
/* компьютер: во время игры нижнего меню нет — игре больше места (16.10.2026) */
body.pc-game .tabbar { display: none; }
body.pc-game .app { padding-bottom: 24px; }

/* апгрейд: подсказка под подарками, которые нельзя поставить (20.10.2026) */
.up-sheet .up-note { margin: 12px 6px 2px; font-size: 12.5px; line-height: 1.35; color: var(--muted); text-align: center; }

/* пока вписывают @username на экране Premium — нижнее меню прячем: на телефоне оно поднималось над клавиатурой и закрывало поле (20.10.2026) */
body.typing .tabbar { display: none; }
/* «Себе» и «Другу» рядом */
#tpMe + #tpFriend { margin-left: 6px; }

/* «Рефералка» (вариант 0, 21.10.2026): аватарки друзей крупнее, чтобы фото было видно */
#scr-ref .rf-av { width: 40px; height: 40px; font-size: 15px; }

/* ПРЕВЬЮ «Заданий» (21.10.2026) — после выбора владельца оставить только нужное */
.tk-list { margin-top: 12px; }
.tk-f { gap: 12px; padding: 12px 14px; }
.tk-ic { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.07); }
.tk-at { font-family: var(--display); font-weight: 900; font-size: 18px; color: #fff; }
.tk-b { flex: 1; min-width: 0; }
.tk-b b { display: block; font-size: 15px; font-weight: 800; color: #fff; }
.tk-b small { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; font-weight: 700; color: #8d85a8; }
.tk-bar { flex: none; width: 70px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.tk-bar i { display: block; height: 100%; border-radius: 3px; background: #fff; }
.tk-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 13px; border: 0; border-radius: 17px; font: inherit; font-size: 13.5px; font-weight: 900; background: #fff; color: #17141f; }
.tk-btn.dark { background: rgba(255,255,255,.1); color: #fff; }
.tk-r { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 900; font-size: 14px; color: #8d85a8; }
.tk-btn .st-ic, .tk-r .st-ic, .gtag .st-ic, .rf-go .st-ic, .gt .st-ic { width: 15px; height: 15px; }
.gt .st-ic { width: 34px; height: 34px; margin-left: 6px; vertical-align: -4px; }
.tk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tk-card { height: 150px; }
.tk-card .gt { font-size: 24px; }
.tk-sub { position: relative; z-index: 2; margin-top: 4px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75); }
.tk-bigat { position: absolute; right: 14px; bottom: 6px; font-family: var(--display); font-weight: 900; font-size: 84px; line-height: 1; color: rgba(255,255,255,.9); }
.tk-hero { height: auto; padding-bottom: 20px; }
.tk-days { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 14px; }
.tk-d { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; border-radius: 12px; font-family: var(--display); font-weight: 900; font-size: 13px; color: #fff; background: rgba(10,8,16,.45); }
.tk-d small { font-size: 9.5px; color: rgba(255,255,255,.6); }
.tk-d.ok { color: #c9b2ff; }
.tk-d.now { background: #fff; color: #17141f; } .tk-d.now small { color: #7a7390; }
.tk-hero .gt { font-size: 32px; }
.tk-days { align-self: stretch; width: 100%; }
.tk-hero .gart .lt { width: 64px !important; height: 64px !important; right: 14px !important; top: 14px !important; }
/* вариант 3, доработка (21.10.2026) */
.tk-hsub { position: relative; z-index: 2; margin-top: 6px; max-width: 70%; font-size: 13px; font-weight: 700; line-height: 1.35; color: rgba(255,255,255,.82); }
.tk-hsub .st-ic { width: 14px; height: 14px; vertical-align: -2px; }
.tk-d.gold { background: linear-gradient(160deg, #ffc94a, #a8480f); color: #fff; } .tk-d.gold small { color: rgba(255,255,255,.8); }
.rf-go.tk-off { background: rgba(255,255,255,.08); color: #8d85a8; }
.tk-note { margin: 8px 4px 0; text-align: center; font-size: 12px; font-weight: 700; color: #6f6888; }
.tk-pill { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px; border-radius: 16px; font-weight: 900; font-size: 13.5px; color: #fff; background: rgba(255,255,255,.08); }
.tk-pill .st-ic { width: 15px; height: 15px; }
.tk-pill.tk-soon { color: #6f6888; } .tk-pill.tk-soon .st-ic { opacity: .5; }
.tk-hero .gart .lt { width: 58px !important; height: 58px !important; right: 20px !important; top: 6px !important; }
/* баннер «Бонус дня» крупнее (владелец 21.10.2026) */
.gbanner.tk-hero { padding: 30px 20px 24px; }
.tk-hero .gt { font-size: 40px; }
.tk-hero .tk-days { gap: 6px; margin-top: 22px; }
.tk-hero .tk-d { padding: 11px 0 10px; font-size: 15px; border-radius: 14px; }
.tk-hero .tk-d small { font-size: 10.5px; }
.tk-hero .gart .lt { width: 72px !important; height: 72px !important; right: 18px !important; top: 14px !important; }
.tk-hero .gt { font-size: 36px; }
.tk-hero .gart .lt { width: 64px !important; height: 64px !important; right: 16px !important; top: 10px !important; }
/* «Задания» (21.10.2026, в боте) */
.tk-pill.w { background: #fff; color: #17141f; }
.tk-f[data-tk] { cursor: pointer; }
.tk-f[data-tk]:active .tk-pill { transform: scale(.95); }
/* «Бонус дня»: звезда — в одной строке с заголовком, не поверх него (21.10.2026: на EN «DAILY BONUS» налезал на звезду) */
.tk-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; width: 100%; }
.tk-top .gt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; font-size: 36px; }
.tk-top .lt { position: static !important; flex: none; width: 64px !important; height: 64px !important; margin: -10px -4px -10px 0; }
/* песочные часы в ожиданиях «Заданий» (21.10.2026) */
.tk-hg { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; }
.tk-hg.in-btn { width: 22px; height: 22px; margin-right: 6px; vertical-align: -5px; }
.tk-pill.tk-wait { padding: 0 10px; }
.tk-b small #tkPlayLeft { font-variant-numeric: tabular-nums; }
.tk-pill.tk-load { color: #6f6888; min-width: 44px; justify-content: center; }
/* баннер «Бонус дня» без фиолетовой рамки .gbanner — тонкая светлая грань, как у кейсов (21.10.2026, владелец) */
.gbanner.tk-hero { border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
/* лягушку можно нажимать: на «Главной» и в плинко (21.10.2026, владелец) */
.hm-frog { pointer-events: auto; cursor: pointer; transform-origin: 50% 85%; -webkit-tap-highlight-color: transparent; z-index: 2; }
.pl-frog { cursor: pointer; }
.hm-say { position: absolute; right: 150px; top: 46px; z-index: 3; max-width: 160px; padding: 7px 11px; border-radius: 14px 14px 4px 14px; background: #fff; color: #0b0b0f;
  font-family: var(--display); font-weight: 900; font-size: 12.5px; line-height: 1.2; opacity: 0; transform: scale(0.6) translateY(6px); transform-origin: 100% 100%;
  pointer-events: none; transition: opacity 0.25s, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.hm-say.show { opacity: 1; transform: none; }
.hm-btns { position: relative; z-index: 3; } /* кнопки баланса над лягушкой — её теперь можно нажимать (21.10.2026) */
/* облачко лягушки: мягкое появление пружиной; редкие фразы — фиолетовые, очень редкие — золотые (21.10.2026, владелец) */
.hm-say, .pl-say { transition: opacity 0.22s ease-out, transform 0.42s cubic-bezier(0.2, 1.25, 0.35, 1); }
.hm-say.rare, .pl-say.rare { background: linear-gradient(135deg, #b48cff, #7a4ae6); color: #fff; }
.hm-say.epic, .pl-say.epic { background: linear-gradient(135deg, #ffe27a, #f2a93b); color: #2a1600; box-shadow: 0 0 0 1px rgba(255, 226, 122, .6), 0 6px 22px rgba(242, 169, 59, .45); }
/* свечение за лягушкой при нажатии (вариант E владельца, 21.10.2026) */
.frog-glow { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 1;
  background: radial-gradient(circle, rgba(170, 120, 255, .55) 0%, rgba(122, 74, 230, .25) 45%, transparent 70%); }
.pl-frog { z-index: 2; } .pl-say { z-index: 3; } /* свечение — за лягушкой, облачко — над ней */
/* облачко лягушки на «Главной» — в одну строку между ником и балансом, не закрывает цифру (21.10.2026, владелец) */
.hm-say { max-width: none; white-space: nowrap; top: 44px; font-size: 12px; padding: 6px 10px; }
.tk-pill.tk-st { width: 48px; padding: 0; justify-content: center; font-size: 15px; } /* ✓, часы и «…» — одинаковые кружки (владелец 21.10.2026) */

/* ── окна оплаты (24.10.2026, вариант C владельца): лягушка + заголовок + текст + строка под ним; кнопка белая ── */
.case-go.sv-white { color: #17141f; background: #fff; box-shadow: none; }
.sv-frog { position: relative; width: 170px; height: 170px; margin: 0 auto; }
.sv-frog .sv-body { position: absolute; inset: 10px; display: block; }
.sv-bar { height: 8px; margin: 16px 18px 6px; border-radius: 4px; overflow: hidden; background: #2a2536; } /* «Проверяем»: бегущая полоска */
.sv-bar i { display: block; width: 40%; height: 100%; border-radius: 4px; background: #b99bff; animation: svBar 1.6s ease-in-out infinite; }
@keyframes svBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.sv-pill { display: inline-block; margin-top: 14px; padding: 8px 16px; border-radius: 14px; font-weight: 800; font-size: 15px; color: #fff; background: #2a2536; }
.sv-pill.sv-sup { border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } /* «Время вышло»: в поддержку */
.sv-a3 { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1; color: #fff; } /* «+115 ⭐» */
.sv-a3 .lt { display: block; width: 52px; height: 52px; }
.sv-prem { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; } /* Premium: срок и кому */
.sv-prem-t { display: inline-flex; align-items: center; gap: 8px; }
.sv-prem-t svg { width: 38px; height: 38px; flex: none; }
.sv-prem-t b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; color: #fff; }
.sv-prem-to { display: inline-block; padding: 7px 14px; border-radius: 14px; font-weight: 800; font-size: 14px; color: #fff; background: #2a2536; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* ═════════ «Мои заказы» (24.10.2026): одна панель списком, как друзья в «Рефералке» ═════════ */
.ord-sheet h3 { margin: 6px 0 14px; font-family: var(--display); font-weight: 900; font-size: 22px; color: #fff; }
.ord-list { margin-bottom: 6px; }
.ord-f { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.ord-f + .ord-f { border-top: 1px solid rgba(255,255,255,.06); }
.ord-f:active { background: rgba(255,255,255,.04); }
.ord-ic { width: 40px; height: 40px; flex: none; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(140deg, #4a3a16, #1f1a10); }
.ord-ic.prem { background: linear-gradient(140deg, #3b2f63, #1f1a2e); }
.ord-ic img, .ord-ic svg { width: 24px; height: 24px; }
.ord-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ord-b b { font-size: 15px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-b small, .ord-r small { font-size: 12px; font-weight: 700; color: #8d85a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ord-r b { font-size: 15px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.ord-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #9a93b3; } /* статус спокойно: серый текст + точка (владелец 24.10: «ядовитый цвет убери») */
.ord-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6d6785; }
.ord-st.awaiting_payment::before, .ord-st.user_marked_paid::before { background: #b9a26a; }
.ord-st.paid::before { background: #9a86c9; }
.ord-st.completed::before { background: #7fae98; }

/* ПК: нижнее меню спрятано, пока открыта игра, — на время полёта подарка показываем его, чтобы было видно, куда он летит */
body.pc-game.tb-peek .tabbar { display: flex; animation: tbPeek .3s cubic-bezier(.2,.9,.3,1) both; }
body.pc-game.tb-peek.tb-out .tabbar { animation: tbPeekOut .38s ease-in both; }
body.pc-game.tb-peek.tb-out.tb-fast .tabbar { animation-duration: .14s; }
@keyframes tbPeek { from { opacity: 0; } to { opacity: 1; } } /* без сдвига: подарок целится в кружок в момент вылета */
@keyframes tbPeekOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(28px); } }

/* ───────── маркет NFT (26.10.2026): лоты Portals за звёзды; шапка как в «Рефералке», карточки лотов — вариант Б ───────── */
#scr-market .mk-filters { margin: 14px 0 0; padding: 0; overflow: visible; } /* всё в одну строку без прокрутки вбок */
#scr-market .mk-filters .fchip { flex: 0 1 auto; min-width: 0; padding: 0 12px 0 15px; gap: 6px; font-size: 14px; }
.mk-filters .fchip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-filters .mk-my { margin-left: auto; }
.lot-art.ph { background: rgba(255, 255, 255, 0.05); }
.lot-art.ph > img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.mk-lot .lot-row { grid-template-columns: 1fr; }
.mk-lot .lot-name { margin-top: 10px; }
.mk-skel .lot-art { animation: mk-pulse 1.2s ease-in-out infinite; }
@keyframes mk-pulse { 50% { opacity: 0.45; } }
.mk-more { display: block; width: 100%; height: 50px; margin-top: 14px; border-radius: 25px; background: var(--well); border: 1px solid var(--well-line); color: var(--text); font-weight: 800; font-size: 15px; }
.mk-more:disabled { opacity: 0.55; }
.mk-empty { grid-column: 1 / -1; padding: 40px 10px; text-align: center; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.ord-sheet .mk-search { margin-bottom: 12px; }
.mk-cl { max-height: none; }
.mk-cr.on b { color: #b99bff; }
.mk-ci { width: 40px; height: 40px; flex: none; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.mk-ci img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-sheet { padding-top: 4px; }
.mk-big { position: relative; width: 62%; height: 0; padding-top: 62%; margin: 0 auto; border-radius: 26px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.mk-big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-sheet h3 { margin: 14px 0 12px; text-align: center; font-family: var(--display); font-weight: 900; font-size: 22px; color: #fff; }
.mk-sheet h3 span { color: var(--muted); }
.mk-attrs { border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.mk-attrs > div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.mk-attrs > div + div { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mk-attrs small { flex: none; width: 74px; font-size: 13px; font-weight: 700; color: #8d85a8; }
.mk-attrs b { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-attrs em { flex: none; font-style: normal; font-size: 12.5px; font-weight: 800; color: #b99bff; }
.mk-how { margin: 12px 4px 0; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--muted); }
#mkBuy img { width: 20px; height: 20px; object-fit: contain; }
.mk-done { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 14px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); text-align: left; }
.mk-done .mk-ci { width: 48px; height: 48px; }
.mk-done b { display: block; font-size: 15px; font-weight: 800; color: #fff; }
.mk-done small { font-size: 13px; font-weight: 700; color: #8d85a8; }

/* ───────── маркет NFT как у Portals (26.10.2026): поиск, ряд фильтров, окна выбора с галочками, таблица лота ───────── */
.mk-sbar { display: flex; gap: 8px; margin-top: 14px; }
.mk-sbar .mk-search { height: 46px; }
.mk-sbar .rb { width: 46px; height: 46px; }
.mk-sugg { margin-top: 8px; border-radius: 20px; overflow: hidden; background: #1c1924; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.mk-chips { display: flex; align-items: center; gap: 8px; margin: 12px -14px 0; padding: 0 14px 2px; overflow-x: auto; scrollbar-width: none; }
.mk-chips::-webkit-scrollbar { display: none; }
.mk-chips .fchip { height: 42px; padding: 0 12px 0 16px; gap: 7px; font-size: 14px; }
.mk-chips .fchip span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-chips .fchip.on { border-color: rgba(185, 155, 255, 0.55); background: rgba(138, 84, 255, 0.16); }
.mk-cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: #8a54ff; color: #fff; font-size: 11.5px; font-weight: 900; }
.rb.mk-fb { position: relative; width: 42px; height: 42px; }
.rb.mk-fb svg { width: 20px; height: 20px; }
.rb.mk-fb.on { color: #fff; border-color: rgba(185, 155, 255, 0.55); background: rgba(138, 84, 255, 0.16); }
.mk-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: #8a54ff; color: #fff; font-size: 11px; font-weight: 900; }
.rb.mk-x { font-size: 24px; font-weight: 500; line-height: 1; color: #fff; background: #8a54ff; border-color: transparent; }
.mk-grid.v3 { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mk-grid.v3 .lot { padding: 7px; border-radius: 20px; }
.mk-grid.v3 .lot-art { border-radius: 15px; }
.mk-grid.v3 .lot-name { margin: 8px 3px 0; font-size: 11px !important; }
.mk-grid.v3 .lot-num { margin: 0 3px; font-size: 11.5px; }
.mk-grid.v3 .lot-row { margin-top: 8px; }
.mk-grid.v3 .price { height: 34px; font-size: 13px; }
.mk-grid.v3 .price img { width: 14px; height: 14px; }

/* строки списков (выбор коллекции/модели/фона/символа, подсказки поиска, сортировка, мои покупки) */
.mk-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 9px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.mk-row + .mk-row { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mk-row:active { background: rgba(255, 255, 255, 0.04); }
.mk-cb { width: 22px; height: 22px; flex: none; border-radius: 7px; border: 2px solid #4a4560; transition: background 0.15s, border-color 0.15s; }
.mk-row.on .mk-cb { border-color: #8a54ff; background: #8a54ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.mk-radio .mk-cb { border-radius: 50%; }
.mk-radio.on .mk-cb { background: #8a54ff; box-shadow: inset 0 0 0 4px var(--bg); }
.mk-ri { width: 44px; height: 44px; flex: none; border-radius: 13px; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); }
.mk-ri img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-ri.sw { background: none; }
.mk-sw { display: block; width: 30px; height: 30px; border-radius: 50%; background: #3a3646; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.mk-rn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mk-rn b { font-size: 15px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-rn small { font-size: 12px; font-weight: 700; color: #b99bff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-rp { flex: none; font-size: 14.5px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }

/* окна выбора и сортировки */
.mk-pk h3, .mk-fs h3 { margin: 6px 0 14px; font-family: var(--display); font-weight: 900; font-size: 24px; color: #fff; }
.mk-pk .mk-search { height: 46px; margin-bottom: 10px; }
.mk-pkh { display: flex; justify-content: space-between; padding: 0 6px 8px; }
.mk-pkh button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: #8d85a8; }
.mk-pkh svg { width: 14px; height: 14px; }
.mk-pkl { border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.mk-foot { position: sticky; bottom: calc(-16px - var(--safe-bottom)); z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px -16px calc(-16px - var(--safe-bottom)); padding: 12px 16px calc(16px + var(--safe-bottom)); background: var(--bg); box-shadow: 0 -10px 16px var(--bg); }
.mk-b1, .mk-b2 { height: 54px; border: 0; border-radius: 27px; font: inherit; font-size: 16px; font-weight: 900; }
.mk-b1 { background: #fff; color: #17141f; }
.mk-b2 { background: rgba(255, 255, 255, 0.08); color: #fff; }
.mk-b2:disabled { opacity: 0.45; }

/* окно «Фильтры» */
.mk-frows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mk-frow { display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 14px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); color: #fff; font: inherit; text-align: left; }
.mk-frow.off { opacity: 0.5; }
.mk-price { border-radius: 18px 18px 0 0; }
.mk-fic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.mk-fic svg { width: 18px; height: 18px; }
.mk-fic .mk-sw { width: 16px; height: 16px; box-shadow: none; background: #fff; }
.mk-fl { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; }
.mk-fv { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; color: #b99bff; }
.mk-clr { flex: none; padding: 5px 10px; border-radius: 10px; background: rgba(138, 84, 255, 0.18); color: #c9b3ff; font-size: 12.5px; font-weight: 800; }
.mk-chev { width: 16px; height: 16px; flex: none; color: #6d6785; }
.mk-prc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 4px 14px 14px; border-radius: 0 0 18px 18px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.mk-prc label { min-width: 0; display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px; border-radius: 23px; background: var(--well); border: 1px solid var(--well-line); }
.mk-prc small { font-size: 13px; font-weight: 700; color: #8d85a8; }
.mk-prc input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: inherit; font-size: 16px; font-weight: 800; text-align: right; }
.mk-prc img { width: 16px; height: 16px; }

/* окно лота как у Portals */
.mk-big { position: relative; width: 74%; height: 0; padding-top: 74%; margin: 0 auto; border-radius: 28px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.mk-big > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-bt { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 14px; text-align: center; background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent); }
.mk-bt b { display: block; font-family: var(--display); font-weight: 900; font-size: 22px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.mk-bt span { font-size: 14px; font-weight: 800; color: rgba(255, 255, 255, 0.8); }
.mk-tbl { margin-top: 14px; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.mk-tr { display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 10px; min-height: 50px; padding: 8px 14px; }
.mk-tr + .mk-tr { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.mk-tr small { font-size: 13px; font-weight: 700; color: #8d85a8; }
.mk-tr span { min-width: 0; display: flex; align-items: center; gap: 6px; }
.mk-tr span b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 800; color: #b99bff; }
.mk-tr span i { flex: none; padding: 2px 6px; border-radius: 7px; background: rgba(138, 84, 255, 0.18); font-style: normal; font-size: 11px; font-weight: 800; color: #c9b3ff; }
.mk-tr em { font-style: normal; font-size: 14px; font-weight: 900; color: #fff; white-space: nowrap; }
.mk-ri.sym { background: rgba(255, 255, 255, 0.06); }
.mk-ri.sym img { width: 70%; height: 70%; object-fit: contain; filter: brightness(0) invert(0.85); }
.mk-ri:not(.sw):not(.sym) img[src*="/models/"] { object-fit: contain; }

/* окно «Фильтры» и окна выбора — точь-в-точь как у Portals (владелец, 26.10.2026, по скриншоту): крестик, строки-гармошки со значками,
   «Сбросить» в строке, внизу «Сбросить всё» и синяя «Показать результаты» */
.mk-fhd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 18px; }
.mk-fhd h3 { margin: 0 !important; font-family: inherit !important; font-weight: 800 !important; font-size: 30px !important; letter-spacing: -0.01em; color: #fff; }
.mk-close { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: #3a3a3c; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.mk-close svg { width: 20px; height: 20px; }
.mk-accs { display: flex; flex-direction: column; gap: 10px; }
.mk-acc { border-radius: 24px; background: #222125; overflow: hidden; }
.mk-ah { display: flex; align-items: center; gap: 14px; width: 100%; height: 64px; padding: 0 16px 0 18px; border: 0; background: none; color: #fff; font: inherit; text-align: left; }
.mk-aic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; }
.mk-aic svg { width: 24px; height: 24px; }
.mk-aic.off { opacity: 0.45; }
.mk-al { flex: 1; min-width: 0; font-size: 19px; font-weight: 600; }
.mk-acc.off .mk-al { color: #8e8e93; }
.mk-aclr { flex: none; padding: 7px 12px; border-radius: 14px; background: rgba(26, 140, 255, 0.14); color: rgba(26, 140, 255, 0.55); font-size: 14px; font-weight: 700; }
.mk-aclr.on { background: rgba(26, 140, 255, 0.22); color: #3b9dff; }
.mk-acc.off .mk-aclr { opacity: 0.4; }
.mk-achev { width: 20px; height: 20px; flex: none; color: #8e8e93; transition: transform 0.25s var(--ease); }
.mk-acc.open .mk-achev { transform: rotate(180deg); }
.mk-ab { display: none; padding: 0 14px 14px; }
.mk-acc.open .mk-ab { display: block; }
.mk-ab .mk-pkl { background: none; box-shadow: none; border-radius: 0; }
.mk-ab .mk-row { padding: 9px 2px; }
.mk-ab .mk-pkh { padding: 0 2px 6px; }
.mk-ls { height: 44px !important; margin-bottom: 10px; background: #2c2b30 !important; border-color: transparent !important; }

/* цена: два поля и ползунок с двумя ручками */
.mk-ab .mk-prc { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.mk-ab .mk-prc label { height: 48px; border-radius: 24px; background: #151417; border: 1px solid rgba(255, 255, 255, 0.07); }
.mk-ab .mk-prc label:first-child input { text-align: left; }
.mk-rng { position: relative; height: 30px; margin: 14px 6px 2px; }
.mk-rng::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 2px; background: #3a3a3c; }
.mk-rng i { position: absolute; top: 13px; height: 4px; border-radius: 2px; background: #8e8e93; }
.mk-rng input { position: absolute; left: -6px; right: -6px; top: 0; width: calc(100% + 12px); height: 30px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.mk-rng input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); pointer-events: auto; cursor: pointer; }
.mk-rng input::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; pointer-events: auto; cursor: pointer; }
.mk-rng input::-webkit-slider-runnable-track { background: none; }

/* низ окна: «Сбросить всё» серая, «Показать результаты» синяя (как у Portals) */
.mk-foot { background: #1c1b1f; box-shadow: none; border-radius: 26px 26px 0 0; padding-top: 14px; }
.mk-foot.one { grid-template-columns: 1fr; }
.mk-b1 { background: #1a8cff; color: #fff; font-weight: 800; }
.mk-b2 { background: #2c2b30; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); font-weight: 800; }
.mk-b2:disabled { color: #8e8e93; opacity: 1; }
.mk-row.on .mk-cb { border-color: #1a8cff; background-color: #1a8cff; }
.mk-radio.on .mk-cb { background: #1a8cff; }
.mk-pk .mk-fhd + div .mk-search, .mk-pk #mkPb .mk-search { height: 46px; }
.mk-fs { min-height: 70vh; }
.mk-b1, .mk-b2 { font-size: 15px; padding: 0 8px; white-space: nowrap; }

/* 26.10.2026 (владелец, по скринам с iPhone): цена на карточке во всю ширину и не обрезана, цифра фильтров видна целиком,
   значки цены и коллекции — premium-эмодзи, ползунок не двигает окно, кнопка «Посмотреть NFT» */
.mk-lot { align-items: stretch; }
.mk-lot .lot-row { display: block; width: 100%; }
.mk-lot .price { width: 100%; min-width: 0; padding: 0 8px; white-space: nowrap; }
.mk-chips { padding-top: 8px; margin-top: 4px; }
.mk-aic.em .lt { position: relative; display: block; width: 26px; height: 26px; } /* эмодзи владельца на прежнем цветном квадрате (владелец: «фон оставь»)*/
.mk-rng, .mk-rng input { touch-action: none; }
.mk-look { display: flex; align-items: center; justify-content: center; gap: 8px; width: 74%; height: 44px; margin: 12px auto 0; border: 0; border-radius: 22px; background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 15px; font-weight: 800; }
.mk-look svg { width: 20px; height: 20px; }
.mk-acts { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; gap: 8px; }
.mk-acts button { width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mk-acts svg { width: 22px; height: 22px; }
.rb.mk-x svg { width: 18px; height: 18px; display: block; } /* крестик рисунком — символ «×» стоял ниже центра на iPhone */

/* 26.10.2026, правки владельца по маркету: */
/* 1. картинка лота без затемняющих слоёв (были узор и белое пятно поверх — цвета тусклее, чем у Portals) */
.lot-art.ph::before, .lot-art.ph::after { display: none; }
/* 5. карточки шире, как у Portals: меньше отступы; полоса прокрутки не появляется и не сдвигает экран после закрытия окна */
#scr-market .mk-grid { gap: 10px; }
#scr-market .mk-lot { padding: 7px 7px 9px; border-radius: 24px; }
#scr-market .mk-lot .lot-art { border-radius: 18px; }
#scr-market .mk-lot .lot-name { margin: 9px 4px 0; }
#scr-market .mk-lot .lot-num { margin: 1px 4px 0; }
#scr-market .mk-lot .lot-row { margin-top: 9px; }
html, body { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* 3. ряд фильтров листается пальцем (pan-x) и мышкой */
.mk-chips { touch-action: pan-x; cursor: grab; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.mk-chips.drag { cursor: grabbing; }
.mk-chips.drag * { pointer-events: none; }
/* 2. анимация NFT поверх картинки */
.mk-anim { position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s; }
.mk-anim.on { opacity: 1; }
.mk-anim svg { width: 100% !important; height: 100% !important; display: block; }
/* 4. подпись под кнопкой «Купить» */
.mk-how-b { margin-top: 10px; }
/* 6. значки в списках — на нейтральном фоне */
.mk-ri { background: #2c2b30; }
.mk-ri img { object-fit: contain; }
/* 8, 9. окна фильтров/сортировки не листаются, пока нечего листать; сортировка — все 7 строк сразу */
.sheet.mk-still { overflow-y: hidden; overscroll-behavior: none; touch-action: none; }
.sheet.mk-still .mk-acc, .sheet.mk-still button { touch-action: manipulation; }
.mk-fs { min-height: 60vh; }
.mk-radio { min-height: 50px; padding-top: 6px; padding-bottom: 6px; }

/* 26.10.2026 (вечер): фильтр и сортировка стоят, листается только остальной ряд; лоты появляются плавно, пока грузятся — мерцание */
.mk-chips { display: flex; overflow: visible; touch-action: auto; cursor: default; margin: 4px 0 0; padding: 8px 0 2px; gap: 0; }
.mk-cfix { display: flex; align-items: center; gap: 8px; flex: none; padding-right: 8px; }
.mk-cs { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; margin-right: -14px; padding: 8px 14px 2px 0; margin-top: -8px; overflow-x: auto; scrollbar-width: none;
  touch-action: pan-x; cursor: grab; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.mk-cs::-webkit-scrollbar { display: none; }
.mk-cs.drag { cursor: grabbing; }
.mk-cs.drag * { pointer-events: none; }
.lot-art.ph { background: linear-gradient(110deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 70%) 0 0 / 300% 100%; animation: mk-shine 1.3s linear infinite; }
@keyframes mk-shine { to { background-position: -150% 0; } }
.lot-art.ph > img, .mk-big > img { opacity: 0; transform: scale(1.03); transition: opacity 0.35s ease, transform 0.45s ease; }
.lot-art.ph > img.ok, .mk-big > img.ok { opacity: 1; transform: none; }
.mk-big { background: linear-gradient(110deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 70%) 0 0 / 300% 100%; animation: mk-shine 1.3s linear infinite; }
.lot-art.ph:has(> img.ok), .mk-big:has(> img.ok) { animation: none; background: rgba(255,255,255,.04); }
/* курсор над рядом фильтров один и тот же (владелец: «курсор постоянно меняется») */
.mk-cs, .mk-cs * { cursor: pointer; }
.mk-cs.drag, .mk-cs.drag * { cursor: grabbing; }

/* 26.10.2026: заглушка, пока грузится картинка — мигает прозрачностью (быстро для телефона), а не сдвигом фона (тот перерисовывал всё каждый кадр) */
.lot-art.ph, .mk-big { animation: none !important; background: rgba(255, 255, 255, 0.05) !important; }
.lot-art.ph::after, .mk-big::after { content: ""; display: block !important; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.07); animation: mk-blink 1.1s ease-in-out infinite; pointer-events: none; }
.mk-big::after { z-index: 0; }
.lot-art.ph:has(> img.ok)::after, .mk-big:has(> img.ok)::after { display: none !important; }
@keyframes mk-blink { 50% { opacity: 0.25; } }
.lot-art.ph > img, .mk-big > img { position: absolute; z-index: 1; transform: none !important; transition: opacity 0.3s ease; will-change: opacity; }
.mk-anim { z-index: 2; }
.mk-acts, .mk-bt { z-index: 3; }
#sheet { will-change: transform; }
/* подгрузка при прокрутке: три точки вместо кнопки */
.mk-more { display: flex; justify-content: center; gap: 6px; height: 40px; align-items: center; margin-top: 8px; background: none; border: 0; }
.mk-more[hidden] { display: none; }
.mk-more i { width: 7px; height: 7px; border-radius: 50%; background: #8d85a8; animation: mk-blink 1s ease-in-out infinite; }
.mk-more i:nth-child(2) { animation-delay: 0.15s; }
.mk-more i:nth-child(3) { animation-delay: 0.3s; }
.mk-tail { display: block; height: 1px; }

/* NFT из маркета в инвентаре, пока едет к игроку (26.10.2026) */
.pf-mk { background: #1d1b22; box-shadow: inset 0 0 0 1px rgba(26, 140, 255, 0.35); cursor: pointer; }
.pf-mk-art { width: 96px; height: 96px; border-radius: 18px; overflow: hidden; }
.pf-mk-art img { filter: none; object-fit: cover; }
.pf-mk-note { color: #5fb0ff !important; }

/* NFT в пути — карточка как лот в маркете (26.10.2026, владелец: «дизайн измени», «нажать как на маркете») */
.pf-item.pf-mk { display: flex; flex-direction: column; align-items: stretch; padding: 7px 7px 11px; border: 0; border-radius: 24px; background: #17151c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); color: inherit; font: inherit; text-align: left; }
.pf-mk-art { position: relative; width: 100% !important; height: 0 !important; padding-top: 100%; border-radius: 18px; overflow: hidden; }
.pf-mk-tag { position: absolute; left: 8px; bottom: 8px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 13px; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 800; }
.pf-mk-tag i, .mk-way i { width: 7px; height: 7px; border-radius: 50%; background: #5fb0ff; box-shadow: 0 0 0 3px rgba(95, 176, 255, 0.25); animation: mk-blink 1.2s ease-in-out infinite; }
.pf-mk-name { margin: 9px 4px 0; font-family: var(--display); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-mk-num { margin: 1px 4px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.pf-mk-soon { margin: 8px 4px 0; font-size: 12px; font-weight: 700; line-height: 1.3; color: #8d85a8; }
.mk-comp > img { inset: 12% !important; width: 76% !important; height: 76% !important; object-fit: contain !important; top: 12% !important; left: 12% !important; }
.mk-big.mk-comp > img { inset: 14% !important; width: 72% !important; height: 72% !important; top: 12% !important; left: 14% !important; }
.mk-way { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; padding: 16px; border-radius: 22px; background: rgba(95, 176, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(95, 176, 255, 0.25); text-align: center; }
.mk-way b { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 900; color: #fff; }
.mk-way span { font-size: 13px; font-weight: 600; color: #a9a3c0; }
.lot-art.ph.mk-comp, .mk-big.mk-comp { background: var(--mkbg, #2c2b30) !important; } /* своя картинка: фон подарка + модель */

/* NFT в пути — вариант G владельца (27.10.2026): без меток на картинке, строка «цена · в пути», в окне — две тихие строки */
.pf-mk-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 9px 4px 0; }
.pf-mk-row span { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 900; color: #fff; }
.pf-mk-row span img { width: 15px; height: 15px; }
.pf-mk-row small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #8d8996; white-space: nowrap; }
.mk-clk { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; flex: none; }
.mk-way-t { margin: 16px 4px 0; text-align: center; font-size: 14px; font-weight: 700; color: #cfc8e6; }
.mk-way-t + .mk-how { margin-top: 4px; }

/* 27.10.2026: своя картинка NFT — узор символа на фоне; NFT «в пути» отдельной сеткой; карточки в строке не растягиваются */
.mk-pat { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mk-pat img { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; height: auto !important; object-fit: contain;
  filter: brightness(0); opacity: 0.16; right: auto !important; bottom: auto !important; }
.pf-mk-grid { margin-bottom: 12px; }
/* 27.10.2026: окна «Фильтры» / выбор / сортировка — без «резинки» за края (на iPhone список тянулся за рамку окна) */
.sheet:has(.mk-fs), .sheet:has(.mk-pk) { overscroll-behavior: none; }
/* название NFT в окне лота — своим слоем поверх картинки, сразу (на iPhone слой картинки с will-change перекрывал его ~1 с) */
.mk-bt, .mk-acts { z-index: 4 !important; transform: translateZ(0); }
.mk-big > img { will-change: auto; }

/* 27.10.2026: NFT «в пути» — того же размера, что обычные карточки инвентаря (одна сетка) */
.pf-item.pf-mk { display: flex; flex-direction: column; align-items: center; padding: 14px 10px 10px; border: 0; border-radius: 24px; background: #1d1b22;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); color: inherit; font: inherit; text-align: center; }
.pf-item.pf-mk .pf-mk-art { position: relative; width: 84px !important; height: 84px !important; padding-top: 0 !important; border-radius: 16px; overflow: hidden; }
.pf-mk-note { display: flex; align-items: center; justify-content: center; gap: 5px; color: #b6b0c8 !important; }
/* 27.10.2026 (владелец: «сделай все такие же большие, как с маркета»): у всех карточек инвентаря картинка во всю ширину, квадратом */
.pf-item { padding: 7px 7px 10px; align-items: stretch; }
.pf-item .pf-art, .pf-item.pf-mk .pf-mk-art { width: 100% !important; height: 0 !important; padding-top: 100% !important; border-radius: 18px; }
.pf-item .pf-art > img, .pf-item .pf-art > .lt, .pf-item .pf-art > .pf-coupon { position: absolute; top: 12%; left: 12%; width: 76%; height: 76%; }
.pf-item .pf-art > .pf-coupon { top: 25%; left: 25%; width: 50%; height: 50%; }
.pf-item.pf-mk .pf-mk-art > img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.pf-item .pf-name { margin: 9px 4px 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-item .pf-act { margin-top: 9px; }
/* все карточки инвентаря одной высоты: место под кнопки одинаковое (3 кнопки = 120 px), отступы одинаковые */
.pf-item, .pf-item.pf-mk { padding: 7px 7px 10px; }
.pf-item .pf-act { min-height: 120px; justify-content: flex-start; }
/* кнопки карточки компактно: «Продать» во всю ширину, «В апгрейд» и «Вывести» рядом — 2 строки у всех карточек */
.pf-item .pf-act { min-height: 78px; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 6px; }
.pf-item .pf-act > * { grid-column: span 2; }
.pf-item .pf-act > .pf-wd { grid-column: span 1; font-size: 12px; }
.pf-item .pf-act > .pf-wd:only-of-type { grid-column: span 2; }
.pf-mk-num2 { color: #8d8996 !important; background: rgba(255, 255, 255, 0.04) !important; }

/* 27.10.2026 итог (владелец): NFT «в пути» — карточка как лот маркета; обычные подарки — как раньше, три кнопки друг под другом,
   а высота та же: картинка у них квадрат минус место под кнопки (модель меньше) */
.pf-item, .pf-item.pf-mk { padding: 7px 7px 10px; align-items: stretch; }
.pf-item .pf-act { min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-item .pf-act > *, .pf-item .pf-act > .pf-wd { grid-column: auto; font-size: 13px; }
.pf-item:not(.pf-mk) .pf-art { width: 100% !important; height: 0 !important; padding-top: calc(100% - var(--pf-cut, 84px)) !important; }
.pf-item:not(.pf-mk) .pf-art > img, .pf-item:not(.pf-mk) .pf-art > .lt { top: 4%; left: 50%; width: auto; height: 92%; aspect-ratio: 1; transform: translateX(-50%); }
.pf-item.pf-mk .pf-mk-art { width: 100% !important; height: 0 !important; padding-top: 100% !important; border-radius: 18px; }
.pf-item.pf-mk .pf-mk-name { margin: 9px 4px 0; }

/* 27.10.2026: цена подарка «в пути» — там же, где у остальных (метка в углу картинки), строка снизу — только «в пути» */
.pf-item.pf-mk .pf-val { top: 15px; left: 15px; }
.pf-item:not(.pf-mk) .pf-val { top: 15px; left: 15px; }
.pf-mk-row { justify-content: flex-start; min-height: 18px; }
/* 27.10.2026 (владелец): «резинка» iPhone в окнах маркета родная, но фон не меняется — когда окно пружинит внизу, панель с кнопками
   приподнимается, и под ней видно фон окна. Низ фона окна — того же цвета, что панель кнопок (полоса ниже скруглённых углов панели). */
/* только окна с панелью кнопок (.mk-foot): у «Моих покупок» и списков без кнопок полоса выглядела серым туманом (владелец 28.10) */
.sheet:has(.mk-foot) { background: linear-gradient(to top, #1c1b1f calc(50px + var(--safe-bottom)), var(--bg) calc(50px + var(--safe-bottom))); }

/* ═════ честная игра (hash) — превью 29.10.2026, ?pf=1 ═════ */
/* 29.10.2026 (владелец: «лишний, не вписывается» → вариант 3): маленький щит в левом углу ряда скорости под кнопкой ставки; hash и копирование — в окне по нажатию */
.pf-line { flex: none; width: 36px; height: 36px; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: #8d85a8; cursor: pointer; }
.pf-line:active { background: rgba(255,255,255,.12); }
.pf-line .pf-sh { display: block; width: 20px; height: 20px; color: inherit; }
.pf-cp { flex: none; width: 28px; height: 28px; border: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #cfc8e6; }
.pf-cp svg { width: 15px; height: 15px; }
.pf-sheet h3 { margin: 0 4px 4px; font-family: var(--display); font-weight: 900; font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; text-align: center; }
.pf-sub { margin: 0 6px 10px; font-size: 12px; line-height: 1.35; color: var(--muted); text-align: center; }
.pf-sub b { color: #fff; font-weight: 700; }
.pf-seg { width: fit-content; margin: 0 auto 10px; }
.pf-box { padding: 2px 12px; border-radius: 18px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pf-game { padding: 8px 0 0; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8d85a8; }
.pf-row { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.pf-l { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; color: var(--muted); }
.pf-v { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.pf-v span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: #f1ecff; font-variant-numeric: tabular-nums; }
.pf-v.mu span { color: #6f6886; font-weight: 600; }
.pf-v .pf-cp { width: 24px; height: 24px; border-radius: 8px; }
.pf-more { display: flex; align-items: center; gap: 4px; padding: 8px 0; border: 0; background: none; color: #fff; font-size: 12.5px; font-weight: 800; }
.pf-more svg { width: 14px; height: 14px; transition: transform .25s; }
.pf-det { display: none; }
.pf-box.open .pf-more svg { transform: rotate(180deg); }
.pf-box.open .pf-det { display: block; }
.pf-box.open .pf-det .pf-row:last-child { border-bottom: 0; }
.pf-ok { display: none; margin-top: 8px; padding: 9px 12px; border-radius: 16px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pf-ok.show { display: block; animation: pfIn .3s var(--ease) both; }
.pf-ok.bad { background: rgba(255,255,255,.05); }
.pf-ok b { display: block; font-size: 13.5px; color: #fff; }
.pf-ok.bad b { color: #ff8a8a; }
.pf-ok span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: #a59dbd; overflow-wrap: anywhere; }
.pf-btns { display: flex; gap: 8px; margin-top: 10px; }
.pf-go, .pf-close { height: 44px; border: 0; border-radius: 22px; font-weight: 900; font-size: 14px; }
.pf-go { flex: 1.6; background: #fff; color: #17141f; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pf-go:disabled { background: #2a2a30; color: #6f6886; }
.pf-go.busy { pointer-events: none; }
.pf-go.busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(23,20,31,.25); border-top-color: #17141f; animation: rot .7s linear infinite; }
.pf-close { flex: 1; background: #2a2a30; color: #fff; }
.pf-self { margin: 0; padding: 6px 0 8px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.pf-none { border-bottom: 0; padding: 10px 0; }
@keyframes pfIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }