/* ИгроМагаз · «Берлога Бруно»
   Живой иллюстрированный гипермаркет: маскот Бруно, рисованные предметы с обводкой, подарочные карты с логотипами платформ,
   достопримечательности регионов, мёд в банках. Цвета бренда: тёмно-синий, голубой, мятный, плюс медовый для бонусов. */

@property --px { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --py { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --wipe { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

.im {
  --ink: #13253A; --ink-2: #33475D; --mute: #5E7184; --line: #D5E3EA; --line-2: #E7EFF3; --paper: #F4F8FA;
  --sky: #4AB8E6; --sky-2: #2F98CC; --sky-ink: #136A96; --sky-wash: #E7F5FC; --sky-soft: #C6E8F7;
  --mint: #7ADBA3; --mint-2: #4CC384; --mint-ink: #17744A; --mint-wash: #E5F8EE;
  --honey: #FFC233; --honey-2: #F29E0C; --honey-ink: #7A4D00; --honey-wash: #FFF6DE; --honey-line: #F6DFA0;
  --coral: #FF6B5B; --coral-2: #E5483A; --coral-wash: #FFECE9;
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hex: url("/st/img/hex.svg?v=52a8b86faa");
  --mark: url("/st/img/mark.svg?v=52a8b86faa");
  --lg-ps: url("/st/img/lg-ps.svg?v=52a8b86faa"); --lg-xbox: url("/st/img/lg-xbox.svg?v=52a8b86faa");
  --lg-nin: url("/st/img/lg-nin.svg?v=52a8b86faa"); --lg-apple: url("/st/img/lg-apple.svg?v=52a8b86faa");
  --lg-steam: url("/st/img/lg-steam.svg?v=52a8b86faa"); --lg-rbx: url("/st/img/lg-rbx.svg?v=52a8b86faa");
  --lg-val: url("/st/img/lg-val.svg?v=52a8b86faa"); --lg-fn: url("/st/img/lg-fn.svg?v=52a8b86faa");
  --lg-tg: url("/st/img/lg-tg.svg?v=52a8b86faa"); --lg-lol: url("/st/img/lg-lol.svg?v=52a8b86faa");
  --lg-apex: url("/st/img/lg-apex.svg?v=52a8b86faa"); --lg-blz: url("/st/img/lg-blz.svg?v=52a8b86faa");
  --lm-tr: url("/st/img/lm-tr.svg?v=52a8b86faa"); --lm-in: url("/st/img/lm-in.svg?v=52a8b86faa");
  --lm-gb: url("/st/img/lm-gb.svg?v=52a8b86faa"); --lm-us: url("/st/img/lm-us.svg?v=52a8b86faa");
  --lm-pl: url("/st/img/lm-pl.svg?v=52a8b86faa"); --lm-eu: url("/st/img/lm-eu.svg?v=52a8b86faa");
  --lm-ru: url("/st/img/lm-ru.svg?v=52a8b86faa"); --lm-kz: url("/st/img/lm-kz.svg?v=52a8b86faa");
  container: im / inline-size;
  position: relative;
  font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--ink); background: #fff;
  -webkit-font-smoothing: antialiased;
}
.im *, .im *::before, .im *::after { box-sizing: border-box; }
.im :where(a) { color: inherit; text-decoration: none; }
.im :where(button) { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
.im :where(input, select, textarea) { font: inherit; }
.im :where(img, svg) { display: block; }
.im :where(h1, h2, h3, h4, p) { margin: 0; }
.im :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.im :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.im ::selection { background: var(--honey); color: var(--ink); }
.im-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.im-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.im-wrap { width: 100%; max-width: 1344px; margin: 0 auto; padding-inline: 32px; }
@container im (max-width: 720px) { .im-wrap { padding-inline: 16px; } }

/* ---------- логотипы платформ как маски (перекрашиваются в любой цвет) ---------- */
.lg { display: inline-block; width: 24px; aspect-ratio: 1; background: currentColor; -webkit-mask: var(--lg) center / contain no-repeat; mask: var(--lg) center / contain no-repeat; flex: none; }
.lg--ps { --lg: var(--lg-ps); } .lg--xbox { --lg: var(--lg-xbox); } .lg--nin { --lg: var(--lg-nin); } .lg--apple { --lg: var(--lg-apple); }
.lg--steam { --lg: var(--lg-steam); } .lg--rbx { --lg: var(--lg-rbx); } .lg--val { --lg: var(--lg-val); } .lg--fn { --lg: var(--lg-fn); } .lg--tg { --lg: var(--lg-tg); }
.lg--lol { --lg: var(--lg-lol); } .lg--apex { --lg: var(--lg-apex); } .lg--blz { --lg: var(--lg-blz); }

/* ---------- верхняя полоса ---------- */
.im-strip { background: var(--ink); color: #C4D4E0; font-size: 13px; }
.im-strip .im-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 38px; }
.im-strip__l { display: flex; align-items: center; gap: 22px; }
.im-strip__l span { display: inline-flex; align-items: center; gap: 9px; }
.im-strip__l b { color: #fff; font-weight: 600; }
.im-strip nav { display: flex; align-items: center; gap: 22px; }
.im-strip nav a:hover { color: #fff; }
.im-strip__honey { display: inline-flex; align-items: center; gap: 7px; color: #FFD36B; font-weight: 600; }
.im-strip__honey svg { width: 15px; height: 15px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); animation: live 2.4s ease-in-out infinite; }
@container im (max-width: 860px) { .im-strip { display: none; } }

/* ---------- шапка ---------- */
.im-head { position: sticky; top: 0; z-index: 30; background: #fff; box-shadow: 0 1px 0 var(--line-2); }
.im-head__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; min-height: 86px; }
.im-logo { display: flex; flex-direction: column; gap: 4px; width: 200px; }
.im-logo img { width: 200px; height: auto; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.im-logo:hover img { transform: rotate(-2deg) scale(1.03); }
.im-logo span { padding-left: 59px; font-size: 10px; font-weight: 500; color: var(--mute); white-space: nowrap; }
.im-search { position: relative; display: flex; align-items: center; width: 100%; max-width: 760px; height: 54px; justify-self: center; gap: 10px;
  padding: 0 6px 0 18px; border: 2px solid var(--ink); border-radius: 18px; background: #fff; transition: box-shadow .25s; }
.im-search > svg { width: 22px; height: 22px; color: var(--mute); flex: none; }
.im-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 15.5px; color: var(--ink); }
.im-search input::placeholder { color: #6E8091; }
.im-search:focus-within { box-shadow: 0 0 0 5px rgba(74, 184, 230, .25); }
.im-search__go { height: 42px; padding: 0 20px; border-radius: 13px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14.5px; box-shadow: 0 3px 0 #050E19; transition: transform .1s, box-shadow .1s; }
.im-search__go:active { transform: translateY(3px); box-shadow: 0 0 0 #050E19; }
.im-act { display: flex; align-items: center; gap: 6px; }
.im-ibtn { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; color: var(--ink); transition: background .2s, transform .2s; }
.im-ibtn:hover { background: var(--sky-wash); transform: translateY(-2px); }
.im-ibtn svg { width: 25px; height: 25px; }
.im-count { position: absolute; top: 4px; right: 3px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--coral); color: #fff;
  font: 700 11px/20px var(--f-body); text-align: center; box-shadow: 0 0 0 2px #fff; }
.im-cart { position: relative; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 20px 0 14px; border-radius: 18px; background: var(--mint); color: var(--ink);
  box-shadow: 0 4px 0 var(--mint-2); transition: transform .12s, box-shadow .12s; }
.im-cart:hover { transform: translateY(-1px); }
.im-cart:active { transform: translateY(4px); box-shadow: 0 0 0 var(--mint-2); }
.im-cart svg { width: 26px; height: 26px; }
.im-cart small { display: block; font-size: 11px; font-weight: 600; opacity: .75; margin-bottom: 3px; }
.im-cart b { display: block; font: 700 15px/1 var(--f-display); letter-spacing: -.02em; }
.im-cart.bump-a { animation: bumpA .55s cubic-bezier(.3, 1.8, .5, 1); }
.im-cart.bump-b { animation: bumpB .55s cubic-bezier(.3, 1.8, .5, 1); }
.im-nav { border-top: 1px solid var(--line-2); }
.im-nav__row { display: flex; align-items: center; gap: 4px; min-height: 54px; overflow-x: auto; scrollbar-width: none; }
.im-nav__row::-webkit-scrollbar { display: none; }
.im-nav a { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: 12px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--ink-2);
  transition: background .2s, color .2s, transform .2s; }
.im-nav a .lg { width: 19px; color: var(--c, var(--ink)); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.im-nav a i { width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--sky)); }
.im-nav a:hover { background: var(--paper); color: var(--ink); }
.im-nav a:hover .lg { transform: scale(1.25) rotate(-8deg); }
.im-nav a em { font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 99px; background: var(--mint-wash); color: var(--mint-ink); }
.im-nav__sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; flex: none; }
.im-msearch { display: none; }
@container im (max-width: 1100px) { .im-head__row { gap: 16px; } .im-cart small { display: none; } }
@container im (max-width: 720px) {
  .im-head__row { min-height: 64px; gap: 10px; }
  .im-logo, .im-logo img { width: 148px; }
  .im-logo span { display: none; }
  .im-head .im-search { display: none; }
  .im-msearch { display: block; padding: 0 0 12px; }
  .im-msearch .im-search { display: flex; height: 50px; }
  .im-act .im-ibtn--fav { display: none; }
  .im-cart { height: 46px; padding: 0 14px 0 10px; gap: 8px; border-radius: 15px; }
  .im-cart b { font-size: 13.5px; }
  .im-nav__row { min-height: 50px; }
  .im-nav a { font-size: 14px; padding: 0 11px; }
}

/* ---------- кнопки ---------- */
.im-btn { --bg: var(--ink); --fg: #fff; --sh: #050E19; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 28px; border-radius: 18px; background: var(--bg); color: var(--fg); font: 700 15.5px/1 var(--f-body); white-space: nowrap;
  box-shadow: 0 5px 0 var(--sh); transition: transform .12s, box-shadow .12s, filter .2s; }
.im-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 0 var(--sh); }
.im-btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--sh); }
.im-btn svg { width: 20px; height: 20px; flex: none; transition: transform .25s; }
.im-btn:hover svg { transform: translateX(3px); }
.im-btn--mint { --bg: var(--mint); --fg: var(--ink); --sh: var(--mint-2); }
.im-btn--honey { --bg: var(--honey); --fg: var(--ink); --sh: var(--honey-2); }
.im-btn--white { --bg: #fff; --fg: var(--ink); --sh: #C9D8E2; }
.im-btn--line { --bg: #fff; --fg: var(--ink); --sh: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 5px 0 var(--ink); }
.im-btn--line:hover { box-shadow: inset 0 0 0 2px var(--ink), 0 6px 0 var(--ink); }
.im-btn--line:active { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 var(--ink); }
.im-btn--sm { height: 46px; padding: 0 18px; font-size: 14.5px; border-radius: 14px; box-shadow: 0 4px 0 var(--sh); }
.im-btn--sm:active { transform: translateY(4px); }
.im-btn--lg { height: 62px; padding: 0 34px; font-size: 16.5px; border-radius: 20px; }
.im-btn--full { width: 100%; }
.im-btn.is-off { --bg: #D3DEE5; --fg: #5E7184; --sh: #B9C8D2; cursor: not-allowed; }
.im-btn.is-done { --bg: var(--ink); --fg: #fff; --sh: #050E19; }
.im-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sky-ink); }
.im-link svg { width: 18px; height: 18px; transition: transform .25s; }
.im-link:hover svg { transform: translateX(4px); }

/* ---------- заголовки ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; height: 36px; padding: 0 14px 0 8px; border-radius: 99px;
  background: var(--sky-wash); color: var(--sky-ink); font-size: 13.5px; font-weight: 700; }
.kicker > i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--sky-ink); }
.kicker > i svg, .kicker > i .lg { width: 14px; height: 14px; }
.kicker--honey { background: #FFEFC2; color: var(--honey-ink); } .kicker--honey > i { color: var(--honey-2); }
.kicker--mint { background: var(--mint-wash); color: var(--mint-ink); }
.kicker--light { background: rgba(255, 255, 255, .12); color: #E2EEF6; } .kicker--light > i { background: rgba(255, 255, 255, .16); color: #fff; }
.im-h1 { font: 800 clamp(36px, 4.3cqw, 62px)/1.02 var(--f-display); letter-spacing: -.04em; text-wrap: balance; }
.im-h2 { font: 800 clamp(30px, 3.4cqw, 48px)/1.04 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.im-h3 { font: 700 20px/1.2 var(--f-display); letter-spacing: -.02em; }
.wavy { text-decoration: underline wavy var(--honey); text-decoration-thickness: .085em; text-underline-offset: .16em; text-decoration-skip-ink: none; }
.wavy--mint { text-decoration-color: var(--mint); }
.im-lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 40ch; text-wrap: pretty; }
.im-sec { padding-block: 96px; }
.im-sec--tight { padding-block: 72px; }
.im-sec--paper { background: var(--paper); }
.im-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.im-sec__head > div { display: flex; flex-direction: column; gap: 16px; }
.im-sec__head .im-lead { font-size: 17px; }
@container im (max-width: 720px) {
  .im-sec { padding-block: 64px; }
  .im-sec--tight { padding-block: 52px; }
  .im-sec__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .im-lead { font-size: 17px; }
}

/* ---------- подарочная карта: главный предмет ---------- */
.gcard { --c1: #0A53B5; --c2: #2E8CF0; --rim: 5px; position: relative; display: block; container-type: inline-size; aspect-ratio: 1.58; border-radius: 9% / 14.2%; overflow: hidden; isolation: isolate;
  background: linear-gradient(140deg, var(--c2), var(--c1) 70%); color: #fff;
  box-shadow: 0 0 0 var(--rim) #fff, 0 0 0 calc(var(--rim) + 2px) var(--ink), 0 14px 26px -12px rgba(19, 37, 58, .55); }
.gcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: .1; -webkit-mask: var(--hex) 0 0 / 11cqw auto repeat; mask: var(--hex) 0 0 / 11cqw auto repeat; }
.gcard::after { content: ""; position: absolute; inset: -20% auto -20% -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg);
  transition: left .9s cubic-bezier(.2, .7, .2, 1); }
.gcard__logo { position: absolute; left: 9cqw; top: 9cqw; width: 22cqw; aspect-ratio: 1; background: #fff; -webkit-mask: var(--lg) left top / contain no-repeat; mask: var(--lg) left top / contain no-repeat; }
.gcard__chip { position: absolute; right: 9cqw; top: 10cqw; width: 15cqw; aspect-ratio: 1.3; border-radius: 2.4cqw; background: linear-gradient(135deg, #FFE08A, #F2B33A); box-shadow: inset 0 0 0 .8cqw rgba(122, 77, 0, .25); }
.gcard__val { position: absolute; left: 9cqw; bottom: 8cqw; display: flex; align-items: baseline; gap: 2cqw; font: 800 17cqw/.85 var(--f-display); letter-spacing: -.05em; white-space: nowrap; }
.gcard__val small { font-size: .38em; font-weight: 700; letter-spacing: 0; opacity: .9; }
.gcard__val--5 { font-size: 13.5cqw; }
.gcard--light { color: var(--ink); }
.gcard--light .gcard__logo { background: var(--ink); }

/* ---------- обложка товара: сцена с картой, достопримечательностью и монетами ---------- */
.cov { --c1: #0A53B5; --c2: #2E8CF0; position: relative; display: block; container-type: inline-size; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 95% at 30% 8%, color-mix(in oklab, var(--c2) 14%, #fff), color-mix(in oklab, var(--c1) 30%, #fff) 88%); }
.cov::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--c1); opacity: .07; -webkit-mask: var(--hex) 0 0 / 7cqw auto repeat; mask: var(--hex) 0 0 / 7cqw auto repeat; }
.cov__lm { position: absolute; z-index: -1; left: -4%; right: -4%; bottom: -1%; height: 50%; background: var(--c1); opacity: .2;
  -webkit-mask: var(--lm) center bottom / 100% auto no-repeat; mask: var(--lm) center bottom / 100% auto no-repeat; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.cov__sun { position: absolute; z-index: -1; width: 34%; aspect-ratio: 1; right: 4%; top: 6%; border-radius: 50%; background: #fff; opacity: .75; }
.cov .gcard { position: absolute; width: 62%; left: 50%; top: 47%; translate: -50% -50%; rotate: -8deg; transition: rotate .6s cubic-bezier(.3, 1.6, .5, 1), translate .6s cubic-bezier(.3, 1.6, .5, 1); }
.coin { position: absolute; z-index: 2; width: 17cqw; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE7A3, var(--honey) 55%, var(--honey-2));
  box-shadow: inset 0 0 0 1.4cqw rgba(255, 255, 255, .35), 0 0 0 2px var(--ink), 0 8px 14px -6px rgba(19, 37, 58, .5);
  color: var(--ink); font: 800 8.5cqw/1 var(--f-display); letter-spacing: -.04em; animation: bob 3.2s ease-in-out infinite; transition: translate .6s cubic-bezier(.3, 1.6, .5, 1); }
.coin span { display: block; translate: 0 2%; }
.coin--s { width: 12cqw; font-size: 6cqw; }
.coin--a { left: 6%; top: 10%; animation-delay: -.4s; } .coin--b { right: 7%; bottom: 14%; animation-delay: -1.6s; } .coin--c { left: 12%; bottom: 10%; animation-delay: -2.4s; }
.cov__flag { position: absolute; z-index: 3; right: 6%; top: 8%; width: 15cqw; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.4cqw #fff, 0 0 0 calc(1.4cqw + 2px) var(--ink); }
.cov__flag svg { width: 150%; height: 100%; translate: -16% 0; }
.cov__sticker { position: absolute; z-index: 4; left: 5%; top: 7%; padding: 2cqw 3.4cqw; border-radius: 99px; background: var(--honey); color: var(--ink); font: 800 4.6cqw/1 var(--f-display);
  box-shadow: 0 0 0 2px var(--ink); rotate: -6deg; }
.pc:hover .cov .gcard, .cov:hover .gcard { rotate: -2deg; translate: -50% -56%; }
.pc:hover .cov .gcard::after, .cov:hover .gcard::after { left: 130%; }
.pc:hover .coin--a { translate: -6% -10%; } .pc:hover .coin--b { translate: 8% 6%; } .pc:hover .coin--c { translate: -8% 8%; }
.pc:hover .cov__lm { transform: translateX(-3%); }

/* ---------- карточка товара ---------- */
.pc { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pc__cover { position: relative; display: block; border-radius: 24px; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), box-shadow .45s; box-shadow: 0 0 0 2px var(--ink); }
.pc:hover .pc__cover { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--ink), 0 10px 0 -2px var(--ink); }
.pc__fav { position: absolute; z-index: 7; top: 10px; left: 10px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink); opacity: 0; transform: scale(.7); transition: opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.pc__fav svg { width: 19px; height: 19px; }
.pc:hover .pc__fav { opacity: 1; transform: none; }
.pc__title { font-size: 15.5px; line-height: 1.38; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.76em; transition: color .2s; }
.pc__title:hover { color: var(--sky-ink); }
.pc__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 24px; }
.pc__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pc__sold { font-size: 12.5px; font-weight: 500; color: var(--mute); }
.stock { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--mint-ink); white-space: nowrap; }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-2); animation: live 2.4s ease-in-out infinite; }
.stock--out { color: var(--mute); } .stock--out::before { background: #B4C2CC; animation: none; }
.stock--asm { color: var(--sky-ink); } .stock--asm::before { background: var(--sky); }
.hchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 6px; border-radius: 99px; background: var(--honey-wash); color: var(--honey-ink);
  font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--honey-line); }
.hchip svg { width: 14px; height: 14px; color: var(--honey-2); }
.price { display: flex; flex-direction: column; gap: 4px; }
.price b { font: 800 24px/1 var(--f-display); letter-spacing: -.04em; white-space: nowrap; }
.price b small { font-size: .62em; font-weight: 700; margin-left: 3px; }
.price s { width: max-content; font-size: 13px; font-weight: 500; color: var(--mute); text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.pop { position: absolute; z-index: 9; left: 50%; top: 22%; display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 10px; border-radius: 99px; background: #fff; color: var(--ink);
  font-weight: 800; font-size: 14px; white-space: nowrap; box-shadow: 0 0 0 2px var(--ink), 0 10px 20px -8px rgba(19, 37, 58, .5); transform: translateX(-50%);
  animation: popIn .6s cubic-bezier(.3, 1.8, .5, 1) both; pointer-events: none; }
.pop i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); }
.pop i svg { width: 16px; height: 16px; }

/* ---------- полки и сетки ---------- */
.shelf { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 4px 24px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.shelf > * { scroll-snap-align: start; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
@container im (max-width: 1100px) { .shelf { grid-auto-columns: calc((100% - 48px) / 3); } .grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container im (max-width: 720px) {
  .shelf { grid-auto-columns: 72%; gap: 14px; margin: 0 -16px; padding: 12px 16px 20px; scroll-padding: 0 16px; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .pc { gap: 10px; } .pc__title { font-size: 14px; } .price b { font-size: 20px; }
  .pc__foot { flex-direction: column; align-items: stretch; }
  .pc__fav { opacity: 1; transform: none; width: 34px; height: 34px; }
}

/* ---------- одометр ---------- */
.odo { display: inline-flex; align-items: flex-start; height: 1em; line-height: 1; overflow: hidden; vertical-align: -.08em; font-variant-numeric: tabular-nums; }
.odo__c { display: inline-block; height: 1em; overflow: hidden; width: .74em; }
.odo__s { display: flex; flex-direction: column; transition: transform 1s cubic-bezier(.16, .9, .1, 1); animation: odoIn 1.3s cubic-bezier(.16, .9, .1, 1) both; }
.odo__s span { display: block; height: 1em; line-height: 1em; text-align: center; }
.odo__p { display: inline-block; height: 1em; line-height: 1em; }

/* ---------- поля ---------- */
.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fld > label, .fld__l { font-size: 13.5px; font-weight: 700; color: var(--ink-2); display: flex; justify-content: space-between; gap: 10px; }
.fld__l button, .fld > label button { font-size: 13px; font-weight: 600; color: var(--sky-ink); text-decoration: underline dotted; text-underline-offset: 3px; }
.inp { position: relative; display: flex; align-items: center; height: 56px; border: 2px solid #AFC3CF; border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s; overflow: hidden; }
.inp input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0 16px; background: transparent; font-size: 17px; font-weight: 600; color: var(--ink); }
.inp input::placeholder { color: #8495A4; font-weight: 400; }
.inp > span { padding: 0 16px 0 0; font-weight: 700; color: var(--mute); }
.inp:focus-within { border-color: var(--ink); box-shadow: 0 0 0 5px rgba(74, 184, 230, .22); }
.inp--ok { border-color: var(--mint-2); }
.qchips { display: flex; flex-wrap: wrap; gap: 8px; }
.qchip { height: 40px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; color: var(--ink-2); transition: all .2s; }
.qchip:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.qchip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 16px; background: var(--paper); }
.seg button { height: 42px; padding: 0 16px; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--ink-2); transition: background .2s, color .2s, box-shadow .2s; }
.seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 3px 0 var(--ink); }

/* ---------- разделы ---------- */
.depts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.dept { --c1: #0A53B5; --c2: #2E8CF0; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 190px; padding: 20px; border-radius: 24px; color: #fff; background: radial-gradient(130% 100% at 20% 0%, var(--c2), var(--c1) 75%);
  box-shadow: 0 0 0 2px var(--ink); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), box-shadow .45s; }
.dept::before { content: ""; position: absolute; inset: 0; z-index: -2; background: #fff; opacity: .08; -webkit-mask: var(--hex) 0 0 / 22px auto repeat; mask: var(--hex) 0 0 / 22px auto repeat; }
.dept:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 0 0 2px var(--ink), 0 10px 0 -2px var(--ink); }
.dept__logo { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: #fff; color: var(--c1); box-shadow: 0 0 0 2px var(--ink);
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.dept__logo .lg { width: 26px; }
.dept__logo b { font: 800 12px/1 var(--f-display); letter-spacing: -.03em; }
.dept:hover .dept__logo { transform: rotate(-10deg) scale(1.08); }
.dept__name { font: 800 19px/1.08 var(--f-display); letter-spacing: -.03em; }
.dept__info { display: block; margin-top: 7px; font-size: 13px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .86); }
.dept__mini { --rim: 4px; position: absolute; z-index: -1; width: 46%; right: -12%; bottom: -24%; rotate: -16deg; transition: rotate .6s cubic-bezier(.3, 1.6, .5, 1), translate .6s cubic-bezier(.3, 1.6, .5, 1); }
.dept:hover .dept__mini { rotate: -4deg; translate: -6% -14%; }
.dept__ill { position: absolute; z-index: -1; right: 3%; top: 6%; width: 36%; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.dept:hover .dept__ill { transform: translateY(-6%) rotate(-3deg); }
.dept--big { grid-column: span 2; min-height: 236px; }
.dept--big .dept__name { font-size: 26px; max-width: 10ch; }
.dept--big .dept__info { max-width: 24ch; }
.dept--light { color: var(--ink); background: #fff; }
.dept--light .dept__info { color: var(--ink-2); }
.dept--light::before { background: var(--ink); opacity: .04; }
.dept--wide { grid-column: span 3; }
@container im (max-width: 1100px) { .depts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container im (max-width: 720px) {
  .depts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dept { min-height: 150px; padding: 14px; border-radius: 20px; gap: 12px; }
  .dept__logo { width: 40px; height: 40px; border-radius: 13px; }
  .dept__name { font-size: 15.5px; }
  .dept__info { font-size: 11.5px; }
  .dept--big { min-height: 170px; } .dept--big .dept__name { font-size: 19px; }
  .dept--wide { grid-column: span 2; }
}

/* ---------- где выгоднее ---------- */
.rates__tabs { display: flex; gap: 8px; margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; padding: 4px; }
.rtab { display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px 0 14px; border-radius: 16px; background: #fff; font-weight: 700; font-size: 15px; color: var(--ink-2); white-space: nowrap;
  box-shadow: 0 0 0 2px var(--line); transition: all .25s; }
.rtab .lg { width: 20px; color: var(--c); }
.rtab:hover { box-shadow: 0 0 0 2px var(--ink); color: var(--ink); }
.rtab.is-on { background: var(--ink); color: #fff; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 #050E19; }
.rtab.is-on .lg { color: #fff; }
.regs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.reg { --c1: #0A53B5; --c2: #2E8CF0; position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px var(--ink);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), box-shadow .45s; animation: rowIn .6s cubic-bezier(.2, .8, .2, 1) both; }
.reg:hover { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--ink), 0 10px 0 -2px var(--ink); }
.reg__art { position: relative; height: 128px; overflow: hidden; isolation: isolate; background: radial-gradient(120% 120% at 20% 0%, var(--c2), var(--c1) 80%); }
.reg__art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: .08; -webkit-mask: var(--hex) 0 0 / 18px auto repeat; mask: var(--hex) 0 0 / 18px auto repeat; }
.reg__lm { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #fff; opacity: .32; -webkit-mask: var(--lm) center bottom / 96% auto no-repeat; mask: var(--lm) center bottom / 96% auto no-repeat;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.reg:hover .reg__lm { transform: scale(1.06) translateY(-2%); }
.reg__flag { position: absolute; left: 14px; top: 14px; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.reg__flag svg { width: 63px; height: 42px; translate: -10px 0; }
.reg__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 20px; }
.reg__name { font: 800 18px/1.15 var(--f-display); letter-spacing: -.025em; }
.reg__name small { display: block; margin-top: 5px; font: 500 12.5px/1.3 var(--f-body); letter-spacing: 0; color: var(--mute); }
.reg__rate { display: flex; align-items: baseline; gap: 8px; color: var(--mute); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.reg__rate strong { font: 800 28px/1 var(--f-display); letter-spacing: -.04em; color: var(--ink); }
.reg__best { font-size: 12px; font-weight: 700; color: var(--mint-ink); }
.reg__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 2px dashed var(--line-2); }
.reg__from { font: 800 17px/1 var(--f-display); letter-spacing: -.03em; }
.reg__from small { display: block; margin-bottom: 5px; font: 600 12px/1 var(--f-body); color: var(--mute); }
.reg__go { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--sky-wash); color: var(--ink); transition: all .25s; }
.reg__go svg { width: 19px; height: 19px; }
.reg:hover .reg__go { background: var(--ink); color: #fff; transform: translateX(3px); }
.rates__note { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 20px; border-radius: 18px; background: var(--honey-wash); color: var(--honey-ink); font-size: 14.5px; font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--honey-line); }
.rates__note svg { width: 26px; height: 26px; flex: none; color: var(--honey-2); }
.rates__note b { color: var(--ink); }
@container im (max-width: 1100px) { .regs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container im (max-width: 720px) {
  .regs { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 16px; }
  .reg { scroll-snap-align: start; }
  .rates__note { align-items: flex-start; font-size: 13.5px; }
}

/* ---------- ценник-облачко ---------- */
.bubble { position: absolute; z-index: 8; padding: 14px 18px; border-radius: 22px; background: #fff; color: var(--ink); font: 800 15px/1.25 var(--f-display); letter-spacing: -.02em;
  box-shadow: 0 0 0 2.5px var(--ink), 0 6px 0 -1px var(--ink); white-space: nowrap; }
.bubble::after { content: ""; position: absolute; width: 20px; height: 20px; background: #fff; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); left: 28px; bottom: -11px; rotate: 45deg; border-bottom-right-radius: 4px; }
.bubble small { display: block; font: 600 12px/1.3 var(--f-body); letter-spacing: 0; color: var(--mute); margin-top: 3px; }

/* ---------- первый экран ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #fff, var(--sky-wash)); }
.hero__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; align-items: center; min-height: 660px; padding-block: 48px 64px; }
.hero__txt { display: flex; flex-direction: column; gap: 26px; position: relative; z-index: 2; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.fact { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 2px var(--line); }
.fact > i { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--sky-wash); color: var(--sky-ink); }
.fact > i svg { width: 21px; height: 21px; }
.fact b { display: block; font: 800 17px/1 var(--f-display); letter-spacing: -.03em; }
.fact span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--mute); font-weight: 500; }
.fact:nth-child(2) > i { background: var(--mint-wash); color: var(--mint-ink); } .fact:nth-child(3) > i { background: var(--honey-wash); color: var(--honey-2); }
.scene { --px: 0; --py: 0; position: relative; height: 600px; transition: --px .5s ease-out, --py .5s ease-out; }
.scene__sun { position: absolute; left: 50%; top: 50%; width: 520px; aspect-ratio: 1; translate: -50% -48%; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff 0, var(--sky-soft) 70%); box-shadow: 0 0 0 2px var(--ink); }
.scene__sun::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sky); opacity: .2; -webkit-mask: var(--hex) 0 0 / 30px auto repeat; mask: var(--hex) 0 0 / 30px auto repeat; }
.scene__ring { position: absolute; left: 50%; top: 50%; width: 600px; aspect-ratio: 1; translate: -50% -48%; border-radius: 50%; border: 2px dashed rgba(19, 37, 58, .2); animation: spin 80s linear infinite; }
.scene__bruno { position: absolute; z-index: 4; left: 50%; bottom: 18px; width: 330px; height: auto; translate: calc(-50% + var(--px) * -6px) calc(var(--py) * -4px); filter: drop-shadow(0 18px 18px rgba(19, 37, 58, .18)); }
.scene__floor { position: absolute; z-index: 3; left: 50%; bottom: 10px; width: 300px; height: 30px; translate: -50% 0; border-radius: 50%; background: rgba(19, 37, 58, .14); }
.fly { position: absolute; z-index: 5; display: block; width: 168px; transition: translate .2s linear; translate: calc(var(--px) * var(--d) * 1px) calc(var(--py) * var(--d) * 1px); }
.fly .gcard { animation: bob 4s ease-in-out infinite; transition: scale .35s cubic-bezier(.3, 1.8, .5, 1); }
.fly:hover .gcard { scale: 1.12; }
.fly:hover .gcard::after { left: 130%; }
.fly__tag { position: absolute; left: 50%; bottom: -36px; translate: -50% 0; padding: 6px 12px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  opacity: 0; transition: opacity .25s, transform .3s; transform: translateY(-6px); pointer-events: none; }
.fly:hover .fly__tag { opacity: 1; transform: none; }
.fly--1 { --d: 14; left: 4%; top: 10%; rotate: -14deg; } .fly--1 .gcard { animation-delay: -.6s; }
.fly--2 { --d: -10; right: 2%; top: 6%; rotate: 12deg; } .fly--2 .gcard { animation-delay: -1.6s; }
.fly--3 { --d: 18; left: 0; top: 46%; rotate: 8deg; } .fly--3 .gcard { animation-delay: -2.4s; }
.fly--4 { --d: -16; right: 0; top: 42%; rotate: -10deg; } .fly--4 .gcard { animation-delay: -3.1s; }
.fly--5 { --d: 9; left: 30%; top: 0; rotate: 4deg; width: 140px; } .fly--5 .gcard { animation-delay: -1.1s; }
.fly--6 { --d: -12; right: 26%; top: 0; rotate: -6deg; width: 128px; } .fly--6 .gcard { animation-delay: -2s; }
.scene .coin { z-index: 6; width: 52px; font-size: 22px; translate: calc(var(--px) * var(--d) * 1px) calc(var(--py) * var(--d) * 1px); }
.scene .coin--1 { --d: 22; left: 18%; top: 34%; } .scene .coin--2 { --d: -20; right: 18%; top: 30%; animation-delay: -1s; } .scene .coin--3 { --d: 26; left: 14%; bottom: 20%; width: 40px; font-size: 17px; animation-delay: -2s; }
.scene .coin--4 { --d: -24; right: 14%; bottom: 24%; width: 44px; font-size: 18px; animation-delay: -2.6s; }
.drop { position: absolute; z-index: 6; width: 26px; aspect-ratio: .78; background: var(--honey); border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%; box-shadow: 0 0 0 2px var(--ink); animation: bob 3.6s ease-in-out infinite; }
.drop::after { content: ""; position: absolute; left: 22%; top: 30%; width: 22%; height: 26%; border-radius: 50%; background: #fff; opacity: .8; }
.drop--1 { left: 40%; top: 18%; rotate: -10deg; animation-delay: -1.3s; } .drop--2 { right: 36%; bottom: 36%; width: 20px; animation-delay: -.3s; }
.spark { position: absolute; z-index: 6; width: 22px; aspect-ratio: 1; background: var(--honey); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.6s ease-in-out infinite; }
.spark--1 { left: 26%; top: 30%; } .spark--2 { right: 30%; top: 22%; width: 16px; animation-delay: -1s; background: var(--mint); } .spark--3 { right: 8%; bottom: 40%; width: 18px; animation-delay: -1.8s; background: #fff; box-shadow: none; }
.scene .bubble { right: 0; bottom: 14%; rotate: 3deg; animation: bob 4.4s ease-in-out infinite; }
.scene .bubble::after { left: 22px; }
@container im (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; padding-block: 36px 40px; gap: 18px; }
  .scene { height: 520px; }
}
@container im (max-width: 720px) {
  .hero__grid { padding-block: 26px 8px; }
  .hero__txt { gap: 20px; }
  .hero__cta .im-btn { flex: 1 1 auto; }
  .hero__facts { gap: 8px; } .fact { padding: 8px 12px 8px 8px; } .fact i { width: 34px; height: 34px; } .fact b { font-size: 15px; }
  .scene { height: 390px; margin-inline: -16px; }
  .scene__sun { width: 340px; } .scene__ring { width: 380px; }
  .scene__bruno { width: 220px; }
  .fly { width: 100px; } .fly--5, .fly--6 { width: 84px; }
  .fly--1 { left: 4%; top: 8%; } .fly--2 { right: 4%; top: 6%; } .fly--3 { left: 2%; top: 54%; } .fly--4 { right: 2%; top: 52%; }
  .fly--5 { left: 31%; top: 1%; } .fly--6 { right: 29%; top: 0; }
  .fly .gcard { --rim: 3px; }
  .scene .coin { width: 38px; font-size: 16px; }
  .scene .bubble { display: none; }
}

/* ---------- пополнение Steam ---------- */
.band-steam { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(120% 120% at 80% 0%, #2A4F78, var(--ink) 70%); color: #fff; }
.band-steam__puffs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.band-steam__puffs i { position: absolute; bottom: -80px; width: 120px; aspect-ratio: 1; border-radius: 50%; background: #fff; opacity: .07; animation: puff 12s linear infinite; }
.band-steam__puffs i:nth-child(1) { left: 6%; } .band-steam__puffs i:nth-child(2) { left: 22%; width: 80px; animation-delay: -3s; } .band-steam__puffs i:nth-child(3) { left: 40%; width: 150px; animation-delay: -6s; }
.band-steam__puffs i:nth-child(4) { left: 58%; width: 90px; animation-delay: -1.5s; } .band-steam__puffs i:nth-child(5) { left: 78%; width: 130px; animation-delay: -8s; } .band-steam__puffs i:nth-child(6) { left: 92%; width: 70px; animation-delay: -4.5s; }
.band-steam__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: center; padding-block: 96px; }
.band-steam .im-lead { color: #C9D9E6; }
.band-steam__wallet { width: 230px; margin: 10px 0 -10px -8px; }
.band-steam__wallet .puff { animation: steamUp 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.band-steam__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.band-steam__chips span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 14px; background: rgba(255, 255, 255, .1); font-size: 14px; font-weight: 600; color: #E2ECF4; }
.band-steam__chips span b { color: var(--mint); }
.band-steam__bot { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 14px 20px 14px 14px; border-radius: 20px; background: var(--sky); color: var(--ink); font-weight: 600;
  box-shadow: 0 5px 0 var(--sky-2); transition: transform .12s, box-shadow .12s; }
.band-steam__bot:hover { transform: translateY(-1px); }
.band-steam__bot:active { transform: translateY(5px); box-shadow: 0 0 0 var(--sky-2); }
.band-steam__bot > i { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: #fff; color: #26A5E4; }
.band-steam__bot > i .lg { width: 24px; }
.band-steam__bot b { font-weight: 800; }
.slip { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 30px; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 0 0 2.5px var(--ink), 0 10px 0 -1px var(--ink); }
.slip__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.slip__head b { display: flex; align-items: center; gap: 10px; font: 800 20px/1 var(--f-display); letter-spacing: -.03em; }
.slip__head b .lg { width: 28px; color: #1B2838; }
.slip__head span { font-size: 12.5px; font-weight: 700; color: var(--mint-ink); background: var(--mint-wash); padding: 6px 10px; border-radius: 99px; }
.slip__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.slip__out { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 18px 20px; border-radius: 20px; background: var(--sky-wash); }
.slip__out small { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700; color: var(--sky-ink); }
.slip__usd { font: 800 38px/1 var(--f-display); letter-spacing: -.05em; }
.slip__pay { text-align: right; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.slip__pay b { display: block; margin-top: 4px; font: 800 22px/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
@container im (max-width: 960px) { .band-steam__grid { grid-template-columns: 1fr; gap: 36px; padding-block: 64px; } }
@container im (max-width: 720px) { .slip { padding: 20px; border-radius: 22px; } .slip__row { grid-template-columns: 1fr; } .slip__usd { font-size: 30px; } .band-steam__wallet { width: 180px; } }

/* ---------- обложки игр (на живом сайте: настоящие обложки из базы) ---------- */
.rack { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 20px; }
.gcov { --a: #4AB8E6; --s: #132539; position: relative; display: block; container-type: inline-size; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 70% 10%, var(--a), var(--s) 72%); color: #fff; }
.gcov::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: .07; -webkit-mask: var(--hex) 0 0 / 12cqw auto repeat; mask: var(--hex) 0 0 / 12cqw auto repeat; }
.gcov__title { position: absolute; left: 8cqw; right: 8cqw; bottom: 10cqw; font: 800 11cqw/.98 var(--f-display); letter-spacing: -.04em; text-wrap: balance; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.gcov__plat { position: absolute; left: 7cqw; top: 7cqw; display: flex; align-items: center; gap: 2cqw; padding: 2.4cqw 3.6cqw 2.4cqw 2.4cqw; border-radius: 99px; background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: 5.6cqw; font-weight: 700; }
.gcov__plat .lg { width: 7.5cqw; color: #1B2838; }
.gcov__note { position: absolute; left: 8cqw; top: 26cqw; font-size: 5cqw; font-weight: 600; opacity: .55; }
.disc { position: absolute; z-index: 3; top: 5cqw; right: 5cqw; width: 26cqw; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: #fff;
  font: 800 6cqw/1 var(--f-display); letter-spacing: -.06em; rotate: 12deg; box-shadow: 0 0 0 1.6cqw #fff, 0 0 0 calc(1.6cqw + 2px) var(--ink); transition: rotate .5s cubic-bezier(.3, 1.8, .5, 1); }
.disc span { white-space: nowrap; }
.pc:hover .disc { rotate: -8deg; }
.gcov--out { filter: saturate(.25); }
@container im (max-width: 1100px) { .rack { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container im (max-width: 720px) { .rack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; } }

/* ---------- мёд ---------- */
.honey { position: relative; isolation: isolate; overflow: hidden; border-radius: 36px; background: var(--honey-wash); box-shadow: 0 0 0 2.5px var(--ink); }
.honey::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--honey); opacity: .3;
  -webkit-mask: var(--hex) 0 0 / 30px auto repeat, linear-gradient(110deg, transparent 35%, #000 90%); -webkit-mask-composite: source-in;
  mask: var(--hex) 0 0 / 30px auto repeat, linear-gradient(110deg, transparent 35%, #000 90%); mask-composite: intersect; }
.honey__drip { position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 1;
  background: radial-gradient(circle at 16px 0, var(--honey) 15px, transparent 15.5px) 0 0 / 64px 26px repeat-x, linear-gradient(var(--honey), var(--honey)) 0 0 / 100% 10px no-repeat; }
.honey__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; padding: 76px 64px 64px; }
.honey__earn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.earn { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.earn > i { flex: none; width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: var(--honey-wash); color: var(--honey-2); box-shadow: inset 0 0 0 2px var(--honey-line); }
.earn > i svg, .earn > i .lg { width: 28px; height: 28px; }
.earn b { display: block; font: 800 30px/1 var(--f-display); letter-spacing: -.05em; color: var(--ink); }
.earn b small { font-size: .55em; margin-left: 3px; }
.earn span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.ranks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.rank { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px 14px; border-radius: 20px; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 2px var(--honey-line); text-align: center; }
.rank b { font: 800 13.5px/1.15 var(--f-display); letter-spacing: -.02em; }
.rank span { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.rank em { font-style: normal; font: 800 12px/1 var(--f-display); color: var(--honey-ink); background: #FFE7A6; padding: 4px 8px; border-radius: 99px; }
.ingots { display: flex; flex-direction: column; gap: 12px; }
.ingot { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: end; gap: 18px; padding: 14px 20px 14px 10px; border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 2px var(--ink); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s; }
.ingot:hover { transform: translateX(6px); box-shadow: 0 0 0 2px var(--ink), -6px 6px 0 -1px var(--ink); }
.ingot__t { align-self: center; font-size: 14.5px; color: var(--ink-2); }
.ingot__t b { display: block; color: var(--ink); font-size: 16px; }
.ingot__p { align-self: center; font: 800 23px/1 var(--f-display); letter-spacing: -.035em; white-space: nowrap; }
.honey__perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.perk { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 18px; border-radius: 22px; background: var(--ink); color: #DCE7F0; font-size: 14px; line-height: 1.45;
  box-shadow: 0 0 0 2px var(--ink); }
.perk b { color: #fff; display: block; font: 800 16px/1.2 var(--f-display); letter-spacing: -.02em; }
.perk > i { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: #fff; color: #26A5E4; margin-bottom: 6px; }
.perk > i .lg { width: 24px; }
.perk--bday { padding-right: 120px; background: #fff; color: var(--ink-2); }
.perk--bday b { color: var(--ink); }
.perk--bday img { position: absolute; right: 4px; top: 6px; width: 112px; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.perk--bday:hover img { transform: rotate(-6deg) translateY(-6px); }
.perk__x2 { display: inline-block; align-self: flex-start; margin-top: 4px; padding: 5px 10px; border-radius: 10px; background: var(--sky); color: #fff; font: 800 14px/1 var(--f-display); }
@container im (max-width: 1100px) { .honey__grid { grid-template-columns: 1fr; } }
@container im (max-width: 720px) {
  .honey { border-radius: 26px; }
  .honey__grid { padding: 44px 16px 22px; gap: 32px; }
  .honey__earn, .honey__perks { grid-template-columns: 1fr; }
  .ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ingot { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 12px; }
}

/* ---------- банки мёда ---------- */
.jar { --w: 60px; --h: 58px; --lvl: 72%; position: relative; justify-self: center; display: flex; flex-direction: column; align-items: center; width: var(--w); }
.jar--s { --w: 50px; --h: 44px; } .jar--m { --w: 60px; --h: 60px; } .jar--l { --w: 72px; --h: 78px; } .jar--xs { --w: 40px; --h: 36px; }
.jar__lid { position: relative; z-index: 2; width: 76%; height: 11px; border-radius: 5px 5px 3px 3px; background: var(--sky); box-shadow: 0 0 0 2px var(--ink); }
.jar__body { position: relative; width: 100%; height: var(--h); margin-top: 2px; border-radius: 13px 13px 17px 17px; overflow: hidden; isolation: isolate; background: #F3FAFE; box-shadow: 0 0 0 2px var(--ink); }
.jar__honey { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: var(--lvl); background: linear-gradient(180deg, #FFC64A, #EE9A10); transition: height .9s cubic-bezier(.2, .8, .2, 1); }
.jar__honey::before { content: ""; position: absolute; left: 0; top: -5px; width: 200%; height: 10px;
  background: radial-gradient(ellipse 12px 5px at 12px 5px, #FFC64A 98%, transparent) 0 0 / 24px 10px repeat-x; animation: jarwave 2.8s linear infinite; }
.jar__body::after { content: ""; position: absolute; left: 13%; top: 10%; width: 12%; height: 60%; border-radius: 99px; background: rgba(255, 255, 255, .85); }
.jar__label { position: absolute; z-index: 1; left: 12%; right: 12%; top: 34%; padding: 4px 0 3px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1.5px var(--ink);
  text-align: center; font: 800 11px/1 var(--f-display); letter-spacing: -.03em; color: var(--honey-ink); white-space: nowrap; }
.jar--l .jar__label { font-size: 12.5px; padding: 5px 0 4px; }
.jar--xs .jar__label { display: none; }
.ingot:hover .jar, .rank:hover .jar { animation: jartilt .9s cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- как купить ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 26px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 2px var(--ink); overflow: hidden; }
.step__art { height: 170px; display: grid; place-items: center; border-radius: 20px; background: var(--sky-wash); margin-bottom: 8px; }
.step:nth-child(2) .step__art { background: var(--mint-wash); } .step:nth-child(3) .step__art { background: var(--honey-wash); }
.step__art img { height: 140px; width: auto; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.step:hover .step__art img { transform: rotate(-4deg) scale(1.05); }
.step__fan { position: relative; width: 210px; height: 140px; }
.step__fan .gcard { --rim: 4px; position: absolute; width: 132px; left: 50%; top: 50%; translate: -50% -50%; transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1), translate .5s cubic-bezier(.3, 1.6, .5, 1); }
.step__fan .gcard:nth-child(1) { rotate: -16deg; translate: -78% -50%; } .step__fan .gcard:nth-child(2) { rotate: 12deg; translate: -22% -56%; } .step__fan .gcard:nth-child(3) { rotate: -2deg; translate: -50% -38%; }
.step:hover .step__fan .gcard:nth-child(1) { rotate: -22deg; translate: -92% -54%; } .step:hover .step__fan .gcard:nth-child(2) { rotate: 18deg; translate: -8% -62%; }
.step__n { position: absolute; right: 22px; top: 22px; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: #fff; font: 800 18px/1 var(--f-display); }
.step h3 { font: 800 21px/1.2 var(--f-display); letter-spacing: -.025em; }
.step p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
@container im (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- подвал ---------- */
.im-foot { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: #B8CAD8; font-size: 14.5px; }
.im-foot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sky); opacity: .07; -webkit-mask: var(--hex) 0 0 / 34px auto repeat; mask: var(--hex) 0 0 / 34px auto repeat; }
.im-foot__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 72px 56px; }
.im-foot__brand { display: flex; flex-direction: column; gap: 20px; }
.im-foot__brand img { width: 220px; }
.im-foot__brand p { max-width: 34ch; line-height: 1.6; color: #9FB6C8; }
.im-foot__soc { display: flex; gap: 10px; }
.im-foot__soc a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600; font-size: 14px; transition: background .2s; }
.im-foot__soc a:hover { background: rgba(255, 255, 255, .16); }
.im-foot__soc .lg { width: 18px; color: #26A5E4; }
.im-foot h4 { margin-bottom: 16px; font: 800 13px/1 var(--f-display); letter-spacing: .02em; color: #fff; }
.im-foot ul { display: flex; flex-direction: column; gap: 11px; }
.im-foot li a { transition: color .2s; }
.im-foot li a:hover { color: #fff; }
.im-foot__bot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 22px 28px; padding-right: 190px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: #8FA7BA; }
.im-foot__bot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.im-foot__bot a:hover { color: #fff; }
.im-foot__peek { position: absolute; z-index: 0; right: 3%; bottom: -10px; width: 150px; aspect-ratio: 64 / 49.25; background: var(--sky); opacity: .9; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
@container im (max-width: 860px) { .im-foot__top { grid-template-columns: 1fr 1fr; } .im-foot__brand { grid-column: 1 / -1; } .im-foot__peek { display: none; } .im-foot__bot { padding-right: 0; } }
@container im (max-width: 720px) { .im-foot__top { padding-block: 48px 32px; gap: 32px 20px; } .im-foot { padding-bottom: 72px; } }

/* ---------- нижняя панель на телефоне ---------- */
.im-tabbar { display: none; }
@container im (max-width: 720px) {
  .im-tabbar { position: sticky; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: #fff;
    border-top: 2px solid var(--ink); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .im-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px; font-size: 10.5px; font-weight: 700; color: var(--mute); }
  .im-tabbar a svg { width: 25px; height: 25px; }
  .im-tabbar a.is-on { color: var(--ink); }
  .im-tabbar a.is-on svg { color: var(--sky-2); }
  .im-tabbar .im-count { top: 0; right: calc(50% - 24px); }
}

/* ---------- анимации ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes live { 0%, 100% { box-shadow: 0 0 0 0 rgba(76, 195, 132, .55); } 60% { box-shadow: 0 0 0 6px rgba(76, 195, 132, 0); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes odoIn { from { transform: translateY(0); } }
@keyframes rowIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes rowA { from { opacity: 0; transform: translateY(14px); } }
@keyframes rowB { from { opacity: 0; transform: translateY(14px); } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes popIn { 0% { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.6); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes bumpA { 40% { transform: scale(1.08) rotate(-2deg); } }
@keyframes bumpB { 40% { transform: scale(1.08) rotate(2deg); } }
@keyframes jarwave { to { transform: translateX(-24px); } }
@keyframes jartilt { 30% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); } }
@keyframes puff { from { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: .08; } to { transform: translateY(-900px) scale(1.6); opacity: 0; } }
@keyframes steamUp { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.06); } }
.rows-a { animation-name: rowA; } .rows-b { animation-name: rowB; }
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
}
@media (prefers-reduced-motion: reduce) {
  .im *, .im *::before, .im *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.reg__rate strong, .slip__usd, .price b, .gcard__val { font-variant-numeric: tabular-nums; }
.fly .gcard { --rim: 5px; }
.cov .gcard { --rim: 5px; }

/* ---------- страница товара ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 22px 6px; font-size: 13.5px; font-weight: 500; color: var(--mute); }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { opacity: .5; }
.crumbs b { color: var(--ink); font-weight: 600; }
.prod { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-block: 18px 72px; }
.prod__art { position: sticky; top: 158px; }
.prod__scene { --c1: #0A3F96; --c2: #1F7CE8; position: relative; container-type: inline-size; aspect-ratio: 1 / .86; border-radius: 34px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 95% at 30% 8%, color-mix(in oklab, var(--c2) 12%, #fff), color-mix(in oklab, var(--c1) 30%, #fff) 88%); box-shadow: 0 0 0 2.5px var(--ink); }
.prod__scene::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--c1); opacity: .07; -webkit-mask: var(--hex) 0 0 / 5cqw auto repeat; mask: var(--hex) 0 0 / 5cqw auto repeat; }
.prod__scene .cov__lm { height: 46%; opacity: .2; }
.prod__scene .cov__sun { width: 30%; right: 6%; top: 7%; }
.prod__scene .gcard { --rim: 8px; position: absolute; width: 64%; left: 50%; top: 46%; translate: -50% -50%; rotate: -7deg; transition: rotate .6s cubic-bezier(.3, 1.6, .5, 1), translate .6s cubic-bezier(.3, 1.6, .5, 1), opacity .4s; }
.prod__scene:hover .gcard { rotate: -2deg; translate: -50% -54%; }
.prod__scene .gcard__val { font-size: 16cqw; }
.prod__scene .coin { width: 13cqw; font-size: 6.4cqw; }
.prod__scene .coin--a { left: 6%; top: 8%; } .prod__scene .coin--b { right: 8%; bottom: 12%; width: 10cqw; font-size: 5cqw; } .prod__scene .coin--c { left: 10%; bottom: 14%; width: 9cqw; font-size: 4.4cqw; }
.prod__scene .cov__flag { width: 12cqw; right: 6%; top: 7%; }
.prod__scene.is-asm .gcard--main { opacity: 0; translate: -50% -40%; }
.asm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2.4cqw; padding: 0 6cqw; pointer-events: none; }
.asm .gcard { --rim: 5px; position: relative; left: auto; top: auto; translate: none; width: 30cqw; rotate: 0deg; animation: asmIn .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.asm .gcard:nth-of-type(2) { animation-delay: .12s; } .asm .gcard:nth-of-type(3) { animation-delay: .24s; } .asm .gcard:nth-of-type(4) { animation-delay: .36s; }
.asm .gcard .gcard__val { font-size: 17cqw; }
.asm__plus { font: 800 7cqw/1 var(--f-display); color: var(--ink); animation: popIn2 .5s cubic-bezier(.3, 1.8, .5, 1) .2s both; }
.asm--many .gcard { width: 22cqw; } .asm--many .asm__plus { font-size: 5cqw; }
.prod__tag { position: absolute; z-index: 5; left: 5%; bottom: 5%; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; background: #fff; font-weight: 700; font-size: 14px;
  box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink); }
.prod__tag i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--sky-wash); color: var(--sky-ink); }
.prod__tag i svg { width: 18px; height: 18px; }
.prod__thumbs { display: flex; gap: 10px; margin-top: 14px; }
.prod__thumbs span { flex: 1; height: 64px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--mute); text-align: center; padding: 6px; }
.prod__info { display: flex; flex-direction: column; gap: 22px; }
.prod__h1 { font: 800 clamp(28px, 3cqw, 42px)/1.06 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.prod__sub { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.prod__sub b { color: var(--coral-2); }
.denoms__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.denoms__head b { font: 800 16px/1 var(--f-display); letter-spacing: -.02em; }
.denoms__head span { font-size: 13px; color: var(--mute); font-weight: 500; }
.denoms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.denom { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 12px 11px; border-radius: 16px; background: #fff; text-align: left;
  box-shadow: 0 0 0 2px var(--line); transition: box-shadow .2s, transform .2s, background .2s; }
.denom:hover { box-shadow: 0 0 0 2px var(--ink); transform: translateY(-2px); }
.denom b { font: 800 17px/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.denom b small { font-size: .6em; margin-left: 3px; font-weight: 700; }
.denom span { font-size: 12.5px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.denom i { position: absolute; right: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-2); }
.denom.is-asm i { background: var(--sky); }
.denom.is-asm::after { content: "сборка"; position: absolute; right: -6px; top: -9px; padding: 3px 7px; border-radius: 99px; background: var(--sky); color: #fff; font-size: 10.5px; font-weight: 800; box-shadow: 0 0 0 2px #fff; rotate: 6deg; }
.denom.is-on { background: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 4px 0 #050E19; transform: translateY(-2px); }
.denom.is-on b, .denom.is-on span { color: #fff; }
.denom.is-on span { opacity: .8; }
.custom { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 22px; background: var(--sky-wash); }
.custom__row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.custom__row .fld { flex: 1 1 200px; }
.custom__res { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.custom__res .chipc { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 2px var(--ink); font: 800 14px/1 var(--f-display); color: var(--ink); }
.custom__res .chipc i { width: 14px; height: 14px; color: #0070D1; }
.custom__res em { font-style: normal; font: 800 16px/1 var(--f-display); color: var(--ink); }
.custom__warn { font-size: 14px; font-weight: 600; color: var(--coral-2); }
.linkbtn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sky-ink); font-size: 15px; }
.linkbtn i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--sky-wash); transition: transform .3s; }
.linkbtn i svg { width: 15px; height: 15px; }
.linkbtn.is-on i { transform: rotate(45deg); }
.buy { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 2.5px var(--ink), 0 8px 0 -1px var(--ink); }
.buy__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.buy__price { font: 800 44px/1 var(--f-display); letter-spacing: -.05em; white-space: nowrap; }
.buy__price small { font-size: .5em; margin-left: 4px; }
.buy__note { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--mute); }
.buy__asm { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--sky-wash); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.buy__asm b { color: var(--ink); }
.buy__asm i { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--sky); color: #fff; }
.buy__asm i svg { width: 18px; height: 18px; }
.buy__btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; }
.buy__fav { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--ink), 0 5px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.buy__fav svg { width: 22px; height: 22px; }
.buy__fav:active { transform: translateY(5px); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 var(--ink); }
.buy__fav.is-on { color: var(--coral); }
.buy__fav.is-on svg { fill: var(--coral); }
.qty { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: var(--paper); }
.qty button { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1.5px var(--line); font-weight: 800; font-size: 18px; }
.qty span { min-width: 34px; text-align: center; font: 800 16px/1 var(--f-display); }
.perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.perks li { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; background: var(--paper); font-size: 13.5px; line-height: 1.4; color: var(--ink-2); font-weight: 500; }
.perks li i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #fff; color: var(--sky-ink); box-shadow: 0 0 0 1.5px var(--line); }
.perks li i svg { width: 18px; height: 18px; }
.perks li b { color: var(--ink); font-weight: 700; }
.info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; align-items: start; }
.info__tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.info__body { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 68ch; }
.info__body h3 { font: 800 20px/1.25 var(--f-display); letter-spacing: -.02em; color: var(--ink); margin-top: 6px; }
.howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.howto li { position: relative; padding: 18px 16px 16px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 2px var(--line); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.howto li b { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 11px; background: var(--ink); color: #fff; font: 800 15px/1 var(--f-display); }
.warnbox { display: flex; gap: 14px; padding: 18px 20px; border-radius: 22px; background: var(--coral-wash); color: #7A2017; font-size: 14.5px; line-height: 1.55; box-shadow: inset 0 0 0 1.5px #FFC9C2; }
.warnbox i { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--coral); color: #fff; font: 800 20px/1 var(--f-display); }
.warnbox b { color: #5A1209; }
.side-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 26px; background: var(--honey-wash); box-shadow: 0 0 0 2px var(--ink); position: sticky; top: 158px; }
.side-card b { font: 800 18px/1.2 var(--f-display); letter-spacing: -.02em; }
.side-card p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.side-card .jar { align-self: flex-start; }
/* ящик корзины */
.drawer { position: fixed; z-index: 60; inset: 0; display: flex; justify-content: flex-end; background: rgba(19, 37, 58, .38); animation: fadeIn .25s both; }
.drawer__panel { width: min(440px, 100%); height: 100%; display: flex; flex-direction: column; gap: 18px; padding: 26px; background: #fff; box-shadow: -2.5px 0 0 var(--ink); animation: slideIn .45s cubic-bezier(.2, .9, .2, 1) both; overflow-y: auto; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; }
.drawer__head b { display: flex; align-items: center; gap: 10px; font: 800 20px/1 var(--f-display); letter-spacing: -.03em; }
.drawer__head b i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--mint); }
.drawer__head b i svg { width: 18px; height: 18px; }
.drawer__x { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--paper); }
.drawer__x svg { width: 18px; height: 18px; }
.drawer__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: var(--paper); }
.drawer__item .gcard { --rim: 3px; }
.drawer__item > div > b { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; }
.drawer__item > div > span { display: block; margin-top: 8px; font: 800 19px/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.drawer__sum { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 2px dashed var(--line-2); font-weight: 700; }
.drawer__sum b { font: 800 26px/1 var(--f-display); letter-spacing: -.04em; }
.drawer__honey { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--honey-wash); color: var(--honey-ink); font-size: 14px; font-weight: 600; }
.drawer__honey svg { width: 20px; height: 20px; color: var(--honey-2); }
.drawer .im-btn { width: 100%; }
/* липкая полоса покупки на телефоне */
.buybar { display: none; }
@container im (max-width: 960px) {
  .prod { grid-template-columns: 1fr; gap: 26px; }
  .prod__art { position: relative; top: 0; }
  .info { grid-template-columns: 1fr; }
  .side-card { position: relative; top: 0; }
}
@container im (max-width: 720px) {
  .prod { padding-block: 10px 44px; }
  .prod__scene { border-radius: 24px; }
  .denoms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .denom { padding: 10px; } .denom b { font-size: 15px; } .denom span { font-size: 12px; }
  .buy { padding: 18px; }
  .buy__price { font-size: 36px; }
  .buy__btns { grid-template-columns: 1fr auto; }
  .buy__btns .im-btn--line { display: none; }
  .perks { grid-template-columns: 1fr; }
  .howto { grid-template-columns: 1fr; }
  .buybar { position: sticky; bottom: 0; z-index: 41; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #fff; border-top: 2px solid var(--ink); }
  .buybar b { font: 800 22px/1 var(--f-display); letter-spacing: -.04em; }
  .buybar small { display: block; font-size: 12px; font-weight: 600; color: var(--mute); margin-top: 3px; }
  .buybar .im-btn { height: 50px; padding: 0 22px; }
  .drawer__panel { width: 100%; padding: 20px 16px; }
}
@keyframes asmIn { from { opacity: 0; transform: translateY(26px) rotate(-14deg) scale(.7); } }
@keyframes popIn2 { from { opacity: 0; transform: scale(.4); } }

/* ---------- страница пополнения Steam ---------- */
.st-hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(120% 140% at 85% 0%, #2A4F78, var(--ink) 66%); color: #fff; }
.st-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: center; padding-block: 44px 120px; }
.st-hero h1 { font: 800 clamp(34px, 4.2cqw, 60px)/1.02 var(--f-display); letter-spacing: -.04em; text-wrap: balance; }
.st-hero p { margin-top: 18px; font-size: 18px; line-height: 1.55; color: #C9D9E6; max-width: 46ch; }
.st-hero__ill { position: relative; justify-self: center; width: 320px; }
.st-hero__ill img { width: 100%; }
.st-hero__ill .puff { animation: steamUp 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.st-hero .crumbs { color: #9FB6C8; padding-top: 0; margin-bottom: 18px; }
.st-hero .crumbs b { color: #fff; }
.st-main { position: relative; z-index: 2; margin-top: -88px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; padding-bottom: 80px; }
.st-form { gap: 22px; padding: 32px; }
.st-form .slip__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.curs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cur { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px var(--line); font-weight: 800; font-size: 14.5px; transition: all .2s; }
.cur svg { width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(19, 37, 58, .12); }
.cur:hover { box-shadow: 0 0 0 2px var(--ink); }
.cur.is-on { background: var(--ink); color: #fff; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 #050E19; }
.paytiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.paytile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 2px var(--line); text-align: left; transition: all .2s; }
.paytile b { font-size: 14.5px; font-weight: 800; }
.paytile span { font-size: 12.5px; font-weight: 700; color: var(--mute); }
.paytile em { position: absolute; right: 8px; top: 8px; font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 99px; background: var(--mint-wash); color: var(--mint-ink); }
.paytile:hover { box-shadow: 0 0 0 2px var(--ink); }
.paytile.is-on { box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); }
.paytile.is-on b::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--mint-2); }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-2); cursor: pointer; text-align: left; }
.check > i { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 8px; box-shadow: inset 0 0 0 2px #9DB2C0; display: grid; place-items: center; color: #fff; transition: all .2s; }
.check > i svg { width: 15px; height: 15px; opacity: 0; transform: scale(.4); transition: all .25s cubic-bezier(.3, 1.6, .5, 1); }
.check.is-on > i { background: var(--ink); box-shadow: none; }
.check.is-on > i svg { opacity: 1; transform: none; }
.check u { text-decoration-style: dotted; text-underline-offset: 3px; }
.st-sum { display: grid; gap: 10px; padding: 20px; border-radius: 22px; background: var(--sky-wash); }
.st-sum__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.st-sum__row b { font: 800 17px/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.st-sum__big { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 12px; border-top: 2px dashed rgba(19, 37, 58, .15); }
.st-sum__big small { display: block; font-size: 13px; font-weight: 700; color: var(--sky-ink); margin-bottom: 8px; }
.st-sum__big .slip__usd { font-size: 44px; }
.pop-help { position: relative; padding: 16px 18px; border-radius: 18px; background: var(--honey-wash); box-shadow: inset 0 0 0 1.5px var(--honey-line); font-size: 14px; line-height: 1.5; color: var(--ink-2); animation: pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.pop-help b { color: var(--ink); }
.st-side { display: flex; flex-direction: column; gap: 16px; }
.st-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.st-card h3 { font: 800 19px/1.2 var(--f-display); letter-spacing: -.02em; }
.st-card p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.st-steps { display: flex; flex-direction: column; gap: 12px; }
.st-steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.st-steps li b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--sky-wash); color: var(--sky-ink); font: 800 15px/1 var(--f-display); }
.st-steps li strong { display: block; color: var(--ink); font-size: 15px; }
.countries { display: flex; flex-wrap: wrap; gap: 6px; }
.countries span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 10px; background: var(--paper); font-size: 13px; font-weight: 600; }
.countries svg { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(19, 37, 58, .12); }
.st-bot { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 24px; background: var(--sky); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 5px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.st-bot:hover { transform: translateY(-2px); }
.st-bot:active { transform: translateY(5px); box-shadow: 0 0 0 2px var(--ink), 0 0 0 var(--ink); }
.st-bot > i { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: #26A5E4; box-shadow: 0 0 0 2px var(--ink); }
.st-bot > i .lg { width: 30px; }
.st-bot b { display: block; font: 800 17px/1.2 var(--f-display); }
.st-bot span { font-size: 14px; font-weight: 600; }
.faq { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: start; }
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 2px var(--line); text-align: left;
  font: 700 16.5px/1.35 var(--f-body); color: var(--ink); transition: box-shadow .2s; }
.faq__q:hover { box-shadow: 0 0 0 2px var(--ink); }
.faq__q i { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--sky-wash); color: var(--sky-ink); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .2s; }
.faq__q i svg { width: 16px; height: 16px; }
.faq__item.is-open .faq__q { box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink); border-radius: 20px 20px 20px 20px; }
.faq__item.is-open .faq__q i { transform: rotate(45deg); background: var(--ink); color: #fff; }
.faq__a { margin: 10px 4px 6px; padding: 4px 18px 8px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); animation: pop .35s cubic-bezier(.2, .8, .2, 1) both; }
@container im (max-width: 960px) {
  .st-hero__grid { grid-template-columns: 1fr; padding-block: 28px 110px; }
  .st-hero__ill { width: 200px; justify-self: start; margin-top: -10px; }
  .st-main { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 24px; }
}
@container im (max-width: 720px) {
  .st-form { padding: 20px; }
  .st-form .slip__row { grid-template-columns: 1fr; }
  .curs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .cur { height: 44px; font-size: 13px; gap: 5px; } .cur svg { width: 18px; height: 12px; }
  .paytiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-sum__big .slip__usd { font-size: 34px; }
  .st-hero__ill { display: none; }
}

/* ---------- иллюстрации Recraft: Бруно, предметы, города регионов ---------- */
.im {
  --coin: url("/st/img/coin.svg?v=52a8b86faa");
  --lm-tr: url("/st/img/lm-tr.svg?v=52a8b86faa"); --lm-in: url("/st/img/lm-in.svg?v=52a8b86faa");
  --lm-gb: url("/st/img/lm-gb.svg?v=52a8b86faa"); --lm-us: url("/st/img/lm-us.svg?v=52a8b86faa");
  --lm-pl: url("/st/img/lm-pl.svg?v=52a8b86faa"); --lm-eu: url("/st/img/lm-eu.svg?v=52a8b86faa");
  --lm-ru: url("/st/img/lm-ru.svg?v=52a8b86faa"); --lm-kz: url("/st/img/lm-kz.svg?v=52a8b86faa");
}
/* монеты: рисованная монета, символ валюты поверх */
.coin { background: var(--coin) center / contain no-repeat; box-shadow: none; color: #7A4300; filter: drop-shadow(0 6px 6px rgba(19, 37, 58, .22)); }
.coin span { translate: 6% 8%; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
/* города регионов: цветные, а не силуэты */
.cov__lm { left: 3%; right: 3%; bottom: 0; height: 54%; opacity: 1; background: var(--lm) center bottom / contain no-repeat; -webkit-mask: none; mask: none; }
.cov__sun { opacity: .9; }
.reg__art { height: 136px; background: radial-gradient(120% 130% at 20% 0%, color-mix(in oklab, var(--c2) 14%, #fff), color-mix(in oklab, var(--c1) 30%, #fff) 92%); }
.reg__art::before { background: var(--c1); opacity: .06; }
.reg__lm { left: 8%; right: 4%; bottom: 0; height: 86%; opacity: 1; background: var(--lm) center bottom / contain no-repeat; -webkit-mask: none; mask: none; }
/* разделы */
.dept__ill { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .28)); }
.dept--big { min-height: 252px; }
.dept__ill--pc { width: 46%; right: 1%; top: 5%; }
.dept__ill--wallet { width: 30%; right: 4%; top: 3%; }
/* первый экран */
.scene__bruno { width: 360px; bottom: 16px; }
/* мёд */
.honey__head { display: flex; align-items: flex-end; gap: 16px; }
.honey__head > div { flex: 1 1 auto; min-width: 0; }
.honey__bruno { flex: none; width: 168px; margin: -36px -8px -14px 0; filter: drop-shadow(0 14px 14px rgba(122, 77, 0, .18)); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.honey:hover .honey__bruno { transform: rotate(-3deg) translateY(-4px); }
.pot { --w: 64px; position: relative; display: block; justify-self: center; align-self: center; width: var(--w); }
.pot img { display: block; width: 100%; height: auto; }
.pot b { position: absolute; left: var(--lx, 50%); top: var(--ly, 60%); translate: -50% -50%; font: 800 calc(var(--w) * .2)/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.pot--rank { width: 70px; height: 60px; }
.pot--rank img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.ingot:hover .pot, .rank:hover .pot { animation: jartilt .9s cubic-bezier(.3, 1.6, .5, 1); }
.perk--tg { padding-right: 112px; }
.perk--tg img, .perk--bday img { position: absolute; top: auto; bottom: -26px; right: 2px; width: 104px; height: auto; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.perk--tg:hover img, .perk--bday:hover img { transform: rotate(-6deg) translateY(-8px); }
/* Бруно выглядывает из-за подвала */
.im-peek { position: relative; z-index: 2; height: 104px; }
.im-peek img { position: absolute; right: 7%; bottom: 0; width: 124px; height: auto; translate: 0 11.5%; transition: translate .5s cubic-bezier(.3, 1.6, .5, 1); }
.im-peek:hover img, .im-foot:hover ~ .im-peek img { translate: 0 6%; }
.im-foot__peek { display: none; }
@container im (max-width: 1100px) { .honey__bruno { width: 150px; } }
@container im (max-width: 720px) {
  /* телефон: Бруно и летающие карты сразу на первом экране, текст под ними */
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding-block: 0 24px; }
  .scene { order: -1; height: 318px; margin-top: 4px; }
  .scene__sun { width: 300px; } .scene__ring { width: 340px; }
  .scene__bruno { width: 192px; bottom: 6px; }
  .scene__floor { bottom: 2px; width: 176px; height: 20px; }
  .fly { width: 86px; } .fly--5, .fly--6 { display: none; }
  .fly--1 { left: 1%; top: 4%; } .fly--2 { right: 1%; top: 3%; } .fly--3 { left: 0; top: 50%; } .fly--4 { right: 0; top: 47%; }
  .scene .coin--1 { left: 5%; top: 33%; } .scene .coin--2 { right: 5%; top: 29%; } .scene .coin--3 { left: 9%; bottom: 7%; } .scene .coin--4 { right: 10%; bottom: 9%; }
  .drop--1 { left: 28%; top: 5%; } .drop--2 { right: 27%; bottom: 42%; }
  .hero__facts { display: none; }
  .hero .im-lead { font-size: 15px; }
  .honey__head { display: block; position: relative; }
  .honey__bruno { position: absolute; right: -6px; top: -42px; width: 100px; margin: 0; }
  .perk--tg, .perk--bday { padding-right: 104px; }
  .perk--tg img, .perk--bday img { width: 96px; }
  .im-peek { height: 76px; }
  .im-peek img { width: 92px; right: 6%; }
  .dept--big { min-height: 176px; }
  .dept__ill--pc { width: 54%; top: 6%; right: 0; }
  .dept__ill--wallet { width: 34%; top: 4%; }
}
.prod__scene .cov__lm { height: 54%; opacity: 1; }
.pot--side { align-self: flex-start; margin: -6px 0 2px; }
.im-sec__head .sec-bruno { flex: none; width: 104px; height: auto; margin: -34px 8px -22px auto; filter: drop-shadow(0 12px 12px rgba(19, 37, 58, .14)); }
@container im (max-width: 720px) { .im-sec__head .sec-bruno { width: 76px; margin: -10px 0 -14px auto; align-self: flex-end; } }
/* главная: блок-переход в раздел пополнения Steam (сам калькулятор на странице Steam) */
@container im (min-width: 961px) { .band-steam__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); } }
.band-steam__curs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bcur { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 18px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.bcur > i { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--coin) center / contain no-repeat; color: #7A4300; font: 800 17px/1 var(--f-display); font-style: normal; }
.bcur > i { padding: 3px 0 0 3px; }
.bcur b { display: block; color: #fff; font-size: 15px; font-weight: 800; }
.bcur small { display: block; margin-top: 2px; color: #9FB6C8; font-size: 12px; font-weight: 600; }
.band-steam__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.band-steam__cta .band-steam__bot { margin-top: 0; }
.band-steam__art { position: relative; display: block; height: 460px; }
.band-steam__sun { position: absolute; left: 50%; top: 50%; width: 400px; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(74, 184, 230, .5), rgba(74, 184, 230, .06) 70%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.band-steam__art .band-steam__wallet { position: absolute; left: 2%; bottom: 34px; width: 190px; margin: 0; rotate: -10deg; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .35)); transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1); }
.band-steam__bruno { position: absolute; right: 8%; bottom: 14px; width: 270px; height: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .38)); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.band-steam__art:hover .band-steam__bruno { transform: translateY(-8px) rotate(2deg); }
.band-steam__art:hover .band-steam__wallet { rotate: -2deg; }
.bcoin { width: 58px; font-size: 22px; }
.bcoin--1 { left: 30%; top: 6%; } .bcoin--2 { right: 6%; top: 12%; width: 50px; font-size: 19px; animation-delay: -1s; }
.bcoin--3 { left: 6%; top: 26%; width: 46px; font-size: 18px; animation-delay: -2s; } .bcoin--4 { left: 48%; top: 24%; width: 44px; font-size: 18px; animation-delay: -2.6s; }
@container im (max-width: 960px) { .band-steam__art { height: 380px; max-width: 520px; } }
@container im (max-width: 720px) {
  .band-steam__art { height: 300px; margin-inline: -8px; }
  .band-steam__sun { width: 280px; }
  .band-steam__art .band-steam__wallet { width: 130px; bottom: 22px; }
  .band-steam__bruno { width: 184px; right: 4%; }
  .bcoin { width: 44px; font-size: 17px; } .bcoin--2 { width: 40px; font-size: 15px; } .bcoin--3, .bcoin--4 { width: 36px; font-size: 14px; }
  .bcur { padding: 7px 12px 7px 7px; } .bcur > i { width: 34px; height: 34px; font-size: 15px; } .bcur b { font-size: 14px; }
  .band-steam__cta .im-btn { flex: 1 1 100%; }
}
/* страница Steam: сцена с Бруно и монетами валют, карта валют */
.st-hero__ill { position: relative; width: 360px; height: 340px; justify-self: end; }
.st-hero__ill .band-steam__sun { width: 320px; }
.st-hero__wallet { position: absolute; left: 0; bottom: 18px; width: 150px !important; rotate: -10deg; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .35)); }
.st-hero__bruno { position: absolute; right: 10px; bottom: 0; width: 220px !important; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .38)); }
.curmap { display: grid; gap: 8px; }
.curmap > span { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--paper); font-size: 14.5px; }
.curmap svg { width: 30px; height: 20px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(19, 37, 58, .12); }
.curmap i { width: 30px; height: 20px; display: grid; place-items: center; color: var(--sky-ink); } .curmap i svg { width: 18px; height: 18px; box-shadow: none; }
.curmap em { font-style: normal; font-weight: 800; color: var(--ink); white-space: nowrap; }
.faq__side { position: relative; }
.faq__bruno { display: block; width: 200px; margin-top: 18px; filter: drop-shadow(0 14px 14px rgba(19, 37, 58, .14)); }
.cur span { white-space: nowrap; }
@container im (max-width: 960px) { .faq__bruno { position: absolute; right: 0; top: -20px; width: 110px; margin: 0; } }

/* ---------- телефон: правки после просмотра на iPhone ---------- */
@container im (max-width: 960px) {
  .band-steam__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 64px 48px; }
  /* одна колонка, которая не растягивается шире экрана из-за длинного содержимого */
  .info, .st-main { grid-template-columns: minmax(0, 1fr); }
}
@container im (max-width: 720px) {
  /* шапка: корзина у правого края */
  .im-head__row { display: flex; justify-content: space-between; }
  /* поиск: поле во всю ширину, 16px, чтобы iPhone не увеличивал страницу при вводе */
  .im-msearch .im-search { padding-right: 14px; }
  .im-msearch .im-search__go { display: none; }
  .im-search input { font-size: 16px; }
  /* пополнение Steam на главной: текст во всю ширину, Бруно под кнопками */
  .band-steam__grid { padding-block: 52px 32px; gap: 14px; }
  .band-steam__curs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bcur { min-width: 0; }
  .bcur b, .bcur small { white-space: nowrap; }
  .band-steam__chips { gap: 8px; }
  .band-steam__chips span { height: 36px; padding: 0 12px; white-space: nowrap; }
  .band-steam__cta { gap: 10px; }
  .band-steam__cta .band-steam__bot { flex: 1 1 100%; justify-content: center; }
  .band-steam__bot b { white-space: nowrap; }
  .band-steam__art { height: 270px; max-width: none; margin-top: 22px; }
  /* мёд: Бруно рядом с описанием, а не поверх текста и карточки */
  .honey__head { display: grid; grid-template-columns: minmax(0, 1fr) 88px; column-gap: 12px; align-items: start; }
  .honey__head > div { display: contents; }
  .honey__head .kicker { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .honey__head .im-h2 { grid-column: 1 / -1; grid-row: 2; }
  .honey__head .im-lead { grid-column: 1; grid-row: 3; }
  .honey__bruno { grid-column: 2; grid-row: 3; align-self: start; position: static; width: 88px; height: auto; margin: 14px 0 0; }
  /* карточка товара: вкладки в одну строку с прокруткой, метка «сборка» не вылезает за край */
  .info__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 8px; }
  .info__tabs::-webkit-scrollbar { display: none; }
  .info__tabs .rtab { flex: none; }
  .denom.is-asm::after { right: 4px; top: -10px; }
  .slip__head span { white-space: nowrap; }
}
@container im (max-width: 370px) {
  .slip__head { flex-wrap: wrap; }
  .im-logo, .im-logo img { width: 132px; }
}

/* ИгроМагаз · концепция 2 «Лобби»
   Магазин устроен как главный экран игры: Бруно стоит на подиуме в лобби, сверху ресурсы игрока (мёд, баланс, уровень),
   внизу выбор «режима» (платформа и регион) и большая кнопка «Забрать». Товары как предметы в игровом магазине с редкостью,
   регионы как острова на карте мира, бонусная программа как медовая дорога с квестами. Цвета бренда: тёмно-синий, голубой, мятный, медовый. */

.lb {
  --lb-sky1: #8AD9FA; --lb-sky2: #42AEE8; --lb-sky3: #1E78C0; --lb-hud: #0D1E30;
  --leg1: #FFE88A; --leg2: #FFB21E; --leg3: #D86E00;
  --epc1: #DCC4FF; --epc2: #9C66F5; --epc3: #5228B0;
  --rar1: #AEE8FF; --rar2: #3DAAF0; --rar3: #1561C2;
  --com1: #EEF4F8; --com2: #A9BECD; --com3: #637C90;
  --island: url("/st/img/island.svg?v=52a8b86faa");
  background: #0F2236;
}
.lb :where(button) { -webkit-tap-highlight-color: transparent; }

/* ---------- игровые заголовки с обводкой ---------- */
.lb-t { font: 800 50px/1 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; color: #fff;
  -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); }
.lb-t--s { font-size: 30px; -webkit-text-stroke-width: 6px; text-shadow: 0 4px 0 var(--ink); }
.lb-t--honey { color: var(--honey); }
.lb-t--mint { color: var(--mint); }
.lb-t--sky { color: #7FD6FF; }
.lb-sub { margin-top: 14px; font-size: 16.5px; line-height: 1.5; font-weight: 600; color: #C7D9E8; max-width: 52ch; }
.lb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }

/* ---------- кнопки ---------- */
.lb-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 26px; border-radius: 18px;
  font: 800 17px/1 var(--f-display); letter-spacing: .01em; text-transform: uppercase; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  background: linear-gradient(180deg, #7BE3B0, #3FBE7D); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), inset 0 4px 0 rgba(255, 255, 255, .5), inset 0 -6px 0 rgba(0, 70, 40, .22);
  transition: transform .12s, box-shadow .12s, filter .2s; white-space: nowrap; }
.lb-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.lb-btn:active { transform: translateY(6px); box-shadow: 0 0 0 3px var(--ink), 0 0 0 var(--ink), inset 0 4px 0 rgba(255, 255, 255, .5), inset 0 -6px 0 rgba(0, 70, 40, .22); }
.lb-btn svg { width: 22px; height: 22px; stroke: var(--ink); filter: drop-shadow(0 2px 0 var(--ink)); }
.lb-btn--honey { background: linear-gradient(180deg, #FFE070, #FFB21E); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), inset 0 4px 0 rgba(255, 255, 255, .55), inset 0 -6px 0 rgba(150, 70, 0, .3); }
.lb-btn--honey:active { box-shadow: 0 0 0 3px var(--ink), 0 0 0 var(--ink), inset 0 4px 0 rgba(255, 255, 255, .55), inset 0 -6px 0 rgba(150, 70, 0, .3); }
.lb-btn--sky { background: linear-gradient(180deg, #8FDDFF, #3AA6EC); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), inset 0 4px 0 rgba(255, 255, 255, .5), inset 0 -6px 0 rgba(10, 60, 120, .28); }
.lb-btn--sm { height: 44px; padding: 0 18px; border-radius: 14px; font-size: 13.5px; -webkit-text-stroke-width: 3.5px; box-shadow: 0 0 0 2.5px var(--ink), 0 5px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -5px 0 rgba(0, 70, 40, .22); }
.lb-btn--sm:active { transform: translateY(5px); box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -5px 0 rgba(0, 70, 40, .22); }
.lb-btn--done { background: linear-gradient(180deg, #E8F0F5, #B9CAD6); }
.lb-btn--full { width: 100%; }

/* ---------- верхний HUD ---------- */
.lb-hud { position: sticky; top: 0; z-index: 30; background: linear-gradient(180deg, #0D1E30, #102438); box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.lb-hud__row { display: flex; align-items: center; gap: 18px; height: 78px; }
.lb-hud .im-logo img { width: 176px; height: auto; }
.lb-find { flex: 1 1 auto; max-width: 460px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 16px; border-radius: 16px; background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), inset 0 3px 0 rgba(0, 0, 0, .25); color: #9FB6C8; }
.lb-find svg { flex: none; width: 19px; height: 19px; }
.lb-find input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: #fff; font-size: 15px; font-weight: 600; }
.lb-find input::placeholder { color: #8DA5B9; }
.lb-find:focus-within { box-shadow: inset 0 0 0 2px var(--sky), inset 0 3px 0 rgba(0, 0, 0, .25); }
/* подсказки поиска на лету: белая карточка под полем, в стиле витрины (обводка ink, тень вниз) */
.lb-find { position: relative; }
.lb-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 40; padding: 8px; border-radius: 18px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 8px 0 rgba(13, 30, 48, .35); max-height: min(70vh, 540px); overflow-y: auto; overscroll-behavior: contain; }
.lb-sugg__it { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.lb-sugg__it:hover, .lb-sugg__it.is-act { background: var(--sky-wash); }
.lb-sugg__art { flex: none; width: 54px; }
.lb-sugg__art .gcard { --rim: 2px; width: 54px; rotate: -6deg; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.lb-sugg__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-sugg__txt b { font: 800 15px/1.15 var(--f-display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sugg__txt small { font-size: 12.5px; font-weight: 600; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sugg__txt small.is-out { color: var(--ink-2); }
.lb-sugg__flag { flex: none; width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--ink); }
.lb-sugg__pr { flex: none; font: 800 15px/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.lb-sugg__pr small { font: 700 11.5px/1 var(--f-body); color: var(--mute); letter-spacing: 0; }
.lb-sugg__all { display: block; width: 100%; height: 42px; margin-top: 6px; border: 0; border-radius: 12px; background: var(--paper); color: var(--sky-ink);
  font: 800 14px/1 var(--f-display); cursor: pointer; }
.lb-sugg__all:hover { background: var(--sky-wash); }
.lb-sugg__none { margin: 0; padding: 14px 12px; font-size: 14px; font-weight: 600; color: var(--mute); }
.lb-res-row { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.lb-res { position: relative; display: flex; align-items: center; height: 40px; padding: 0 6px 0 44px; border-radius: 99px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
  color: #fff; font: 800 15px/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.lb-res > img { position: absolute; left: -8px; top: 50%; translate: 0 -50%; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.lb-res > span { padding-right: 10px; }
.lb-res__plus { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(180deg, #8EEBBE, #3FBE7D); color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink), 0 3px 0 var(--ink); font: 800 18px/1 var(--f-display); }
.lb-res__plus:active { transform: translateY(3px); box-shadow: 0 0 0 2px var(--ink); }
.lb-lvl { display: flex; align-items: center; gap: 10px; color: #fff; }
.lb-lvl__hex { position: relative; flex: none; width: 46px; height: 50px; display: grid; place-items: center; background: var(--ink);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.lb-lvl__hex::before { content: ""; position: absolute; inset: 3px; background: linear-gradient(180deg, #FFE070, #F29E0C); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.lb-lvl__hex b { position: relative; font: 800 21px/1 var(--f-display); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.lb-lvl__t { display: flex; flex-direction: column; gap: 6px; min-width: 112px; }
.lb-lvl__t b { font: 800 13px/1 var(--f-display); letter-spacing: -.01em; }
.lb-lvl__t small { font-size: 11.5px; font-weight: 700; color: #9FB6C8; }
.lb-xp { position: relative; height: 10px; border-radius: 99px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); overflow: hidden; }
.lb-xp i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--xp, 40%); border-radius: inherit; background: linear-gradient(180deg, #FFE070, #F29E0C); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.lb-bag { position: relative; flex: none; width: 52px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--ink);
  background: linear-gradient(180deg, #FFE070, #FFB21E); box-shadow: 0 0 0 2.5px var(--ink), 0 5px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .55); transition: transform .12s; }
.lb-bag:active { transform: translateY(5px); box-shadow: 0 0 0 2.5px var(--ink); }
.lb-bag svg { width: 25px; height: 25px; }
.lb-bag__n { position: absolute; right: -9px; top: -9px; min-width: 25px; height: 25px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--coral); color: #fff;
  font: 800 12.5px/1 var(--f-display); box-shadow: 0 0 0 2.5px var(--ink); }
.lb-bag.bump-a, .lb-bag.bump-b { animation: bagBump .5s cubic-bezier(.3, 1.8, .5, 1); }
.lb-bag.bump-b { animation-name: bagBump2; }
.lb-gain { position: absolute; right: 74px; top: 62px; z-index: 40; padding: 8px 12px; border-radius: 12px; background: var(--honey); color: var(--ink); font: 800 14px/1 var(--f-display);
  box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); pointer-events: none; animation: gainUp 1.6s ease-out both; }
.lb-gain.k-b { animation-name: gainUp2; }
.lb-modes { background: #0B1928; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .04); }
.lb-modes__row { display: flex; gap: 8px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.lb-modes__row::-webkit-scrollbar { display: none; }
.lb-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; color: #C7D9E8; font-size: 14px; font-weight: 700;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); transition: all .2s; white-space: nowrap; }
.lb-chip .lg { width: 17px; color: #fff; }
.lb-chip:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.lb-chip.is-on { background: var(--sky); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 3px 0 var(--ink); }
.lb-chip.is-on .lg { color: var(--ink); }

/* ---------- лобби (первый экран) ---------- */
.lb-stage { position: relative; isolation: isolate; overflow: hidden; height: 720px;
  background: radial-gradient(130% 95% at 50% 4%, var(--lb-sky1) 0%, var(--lb-sky2) 40%, var(--lb-sky3) 100%); }
.lb-scene { --px: 0; --py: 0; position: absolute; inset: 0; isolation: isolate; transition: --px .5s ease-out, --py .5s ease-out; }
.lb-rays { position: absolute; z-index: -3; left: 50%; top: 46%; width: 1900px; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .11) 0deg 9deg, rgba(255, 255, 255, 0) 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 30%, transparent 62%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 30%, transparent 62%); animation: spin 140s linear infinite; }
.lb-floorwrap { position: absolute; z-index: -2; left: -20%; right: -20%; bottom: -60px; height: 360px; -webkit-mask: linear-gradient(180deg, transparent, #000 55%); mask: linear-gradient(180deg, transparent, #000 55%); }
.lb-floor { position: absolute; inset: 0; transform: perspective(520px) rotateX(58deg); transform-origin: 50% 100%; background: rgba(255, 255, 255, .34);
  -webkit-mask: var(--hex) 0 0 / 62px auto repeat; mask: var(--hex) 0 0 / 62px auto repeat; }
.lb-cloud { position: absolute; z-index: -2; height: 46px; border-radius: 99px; background: #fff; opacity: .55; animation: drift 46s linear infinite; }
.lb-cloud::before, .lb-cloud::after { content: ""; position: absolute; bottom: 30%; border-radius: 50%; background: inherit; }
.lb-cloud::before { left: 16%; width: 46%; aspect-ratio: 1; } .lb-cloud::after { left: 46%; width: 34%; aspect-ratio: 1; }
.lb-cloud--1 { width: 170px; left: 8%; top: 13%; } .lb-cloud--2 { width: 120px; right: 12%; top: 9%; animation-duration: 60s; animation-delay: -22s; opacity: .4; }
.lb-cloud--3 { width: 220px; left: 52%; top: 4%; animation-duration: 74s; animation-delay: -40s; opacity: .35; }
/* остров региона за спиной Бруно */
.lb-isle { position: absolute; z-index: -1; left: 50%; top: 52px; width: 560px; aspect-ratio: 1.6; translate: calc(-50% + var(--px) * 14px) calc(var(--py) * 8px); transition: translate .3s linear; }
.lb-isle__land { position: absolute; left: 6%; right: 6%; top: 26%; aspect-ratio: 1; background: var(--island) center top / contain no-repeat; opacity: .96; animation: bob 7s ease-in-out infinite; }
.lb-isle__lm { position: absolute; left: 13%; right: 13%; top: 0; height: 40%; background: var(--lm) center bottom / contain no-repeat; animation: bob 7s ease-in-out infinite; }
.lb-isle.swap-a .lb-isle__lm, .lb-isle.swap-b .lb-isle__lm { animation: lmIn .7s cubic-bezier(.3, 1.4, .5, 1) both, bob 7s ease-in-out .7s infinite; }
.lb-isle.swap-b .lb-isle__lm { animation-name: lmIn2, bob; }
/* подиум и Бруно */
.lb-podium { position: absolute; z-index: 2; left: 50%; bottom: 112px; width: 400px; height: 96px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #fff 0, #D7F0FC 45%, #8FCBEC 100%); box-shadow: 0 0 0 3px var(--ink), 0 12px 0 var(--ink), 0 26px 30px rgba(10, 40, 80, .35); }
.lb-podium::before { content: ""; position: absolute; inset: 12px 36px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(74, 184, 230, .55); animation: ringPulse 2.8s ease-in-out infinite; }
.lb-bruno { position: absolute; z-index: 3; left: 50%; bottom: 150px; width: 316px; height: auto; translate: calc(-50% + var(--px) * -6px) calc(var(--py) * -4px); filter: drop-shadow(0 14px 0 rgba(19, 37, 58, .16)); transition: translate .2s linear; }
.lb-feat { position: absolute; z-index: 4; left: calc(50% + 120px); top: 150px; width: 210px; translate: calc(var(--px) * 16px) calc(var(--py) * 10px); transition: translate .2s linear; }
.lb-feat .gcard { --rim: 5px; rotate: 9deg; animation: bob 4s ease-in-out infinite; }
.lb-feat.swap-a .gcard, .lb-feat.swap-b .gcard { animation: cardIn .6s cubic-bezier(.3, 1.6, .5, 1) both, bob 4s ease-in-out .6s infinite; }
.lb-feat.swap-b .gcard { animation-name: cardIn2, bob; }
.lb-feat__glow { position: absolute; inset: -30%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 65%); }
.lb-stage .coin { z-index: 5; width: 50px; font-size: 20px; translate: calc(var(--px) * var(--d) * 1px) calc(var(--py) * var(--d) * 1px); }
.lb-coin--1 { --d: 20; left: calc(50% - 250px); top: 250px; } .lb-coin--2 { --d: -18; left: calc(50% + 230px); top: 330px; width: 42px !important; font-size: 17px !important; animation-delay: -1.2s; }
.lb-coin--3 { --d: 24; left: calc(50% - 200px); top: 420px; width: 38px !important; font-size: 15px !important; animation-delay: -2.2s; }
/* реплика Бруно */
.lb-say { position: absolute; z-index: 6; left: calc(50% - 470px); top: 120px; width: 300px; padding: 26px 20px 18px; border-radius: 20px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); font-size: 15.5px; line-height: 1.45; font-weight: 600; animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.lb-say::after { content: ""; position: absolute; right: -14px; top: 48px; width: 22px; height: 22px; background: #fff; border-top: 3px solid var(--ink); border-right: 3px solid var(--ink); rotate: 45deg; border-top-right-radius: 5px; }
.lb-say__name { position: absolute; left: 16px; top: -16px; padding: 7px 12px; border-radius: 10px; background: var(--sky); font: 800 13px/1 var(--f-display); letter-spacing: .04em; color: #fff;
  -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; box-shadow: 0 0 0 2.5px var(--ink); }
.lb-say__more { position: absolute; right: 16px; bottom: 8px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--sky-2); animation: blink 1s steps(2) infinite; }
.lb-say.swap-a, .lb-say.swap-b { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.lb-say.swap-b { animation-name: pop2; }
/* боковые виджеты лобби */
.lb-side { position: absolute; z-index: 7; top: 26px; width: 286px; display: flex; flex-direction: column; gap: 12px; }
.lb-side--l { left: max(24px, calc(50% - 696px)); } .lb-side--r { right: max(24px, calc(50% - 696px)); }
.lb-side__t { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lb-side__t b { font: 800 15px/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.lb-ev { position: relative; display: flex; align-items: flex-end; min-height: 104px; padding: 14px 14px 14px 16px; border-radius: 20px; overflow: hidden; isolation: isolate; color: #fff;
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.lb-ev:hover { transform: translateY(-3px) rotate(-.6deg); }
.lb-ev--a { background: linear-gradient(135deg, #FF8A5C, #E5483A); } .lb-ev--b { background: linear-gradient(135deg, #3E6E98, #13253A); } .lb-ev--c { background: linear-gradient(135deg, #FFD15A, #F29E0C); color: var(--ink); }
.lb-ev::before { content: ""; position: absolute; inset: 0; z-index: -2; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .08) 0 14px, transparent 14px 28px); }
.lb-ev__art { position: absolute; z-index: -1; right: -8px; bottom: -6px; width: 128px; height: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .18)); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.lb-ev:hover .lb-ev__art { transform: rotate(-6deg) scale(1.06); }
.lb-ev__art--wide { width: 150px; right: -10px; bottom: 4px; }
.lb-ev__t { display: flex; flex-direction: column; gap: 6px; max-width: 64%; }
.lb-ev__t b { font: 800 17px/1.08 var(--f-display); letter-spacing: -.02em; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; color: #fff; }
.lb-ev--c .lb-ev__t b { color: #fff; }
.lb-ev__t span { font-size: 12.5px; font-weight: 700; line-height: 1.3; opacity: .92; }
.lb-ev__tag { position: absolute; left: 12px; top: 12px; padding: 5px 9px; border-radius: 8px; background: rgba(13, 30, 48, .72); color: #fff; font: 700 11px/1 var(--f-display); letter-spacing: .04em; }
.lb-daily { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lb-daily .lb-item { min-height: 0; aspect-ratio: auto; }
.lb-daily .lb-item__art { height: 92px; }
.lb-daily .lb-item__art .gcard { width: 92px; }
.lb-daily .lb-item__bar { padding: 8px 10px 10px; }
.lb-daily .lb-item__bar b { font-size: 12px; }
.lb-daily .lb-price { font-size: 14px; }
.lb-daily .lb-item__rar { font-size: 9.5px; padding: 4px 7px; left: 8px; top: 8px; }
.lb-side .lb-btn { width: 100%; }
/* выбор режима и большая кнопка */
.lb-play { position: absolute; z-index: 8; left: 50%; bottom: 22px; translate: -50% 0; display: flex; align-items: center; gap: 16px; }
.lb-sel { display: flex; align-items: center; gap: 10px; height: 76px; padding: 0 10px; border-radius: 24px; background: linear-gradient(180deg, #24476C, #13253A);
  box-shadow: 0 0 0 3px var(--ink), 0 7px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .14); }
.lb-sel__arr { width: 46px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--ink); background: linear-gradient(180deg, #8FDDFF, #3AA6EC);
  box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .5); transition: transform .12s; }
.lb-sel__arr:active { transform: translateY(4px); box-shadow: 0 0 0 2.5px var(--ink); }
.lb-sel__arr svg { width: 22px; height: 22px; }
.lb-sel__arr--l svg { rotate: 180deg; }
.lb-sel__cur { display: flex; align-items: center; gap: 12px; min-width: 238px; padding: 0 6px; color: #fff; }
.lb-sel__logo { flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: #fff; color: var(--c); box-shadow: 0 0 0 2.5px var(--ink); }
.lb-sel__logo .lg { width: 28px; }
.lb-sel__txt { display: flex; flex-direction: column; gap: 6px; }
.lb-sel__txt b { font: 800 19px/1 var(--f-display); letter-spacing: -.02em; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.lb-sel__txt small { font-size: 13px; font-weight: 700; color: #9FD8F5; }
.lb-dots { display: flex; gap: 5px; margin-top: 2px; }
.lb-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.lb-dots i.is-on { background: var(--honey); box-shadow: 0 0 0 1.5px var(--ink); }
.lb-go { height: 82px; padding: 0 38px; border-radius: 26px; flex-direction: column; gap: 6px; font-size: 26px; -webkit-text-stroke-width: 6px; }
.lb-go small { font: 800 13px/1 var(--f-display); letter-spacing: .02em; text-transform: none; -webkit-text-stroke: 3px var(--ink); color: #fff; }
.lb-go { box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink), inset 0 5px 0 rgba(255, 255, 255, .55), inset 0 -8px 0 rgba(150, 70, 0, .32); }
.lb-go:active { transform: translateY(8px); box-shadow: 0 0 0 3px var(--ink), 0 0 0 var(--ink), inset 0 5px 0 rgba(255, 255, 255, .55), inset 0 -8px 0 rgba(150, 70, 0, .32); }

/* ---------- секции ---------- */
.lb-sec { position: relative; padding-block: 96px; }
.lb-sec--sky { background: radial-gradient(120% 120% at 20% 0%, #2A5B86, #13253A 60%); }
.lb-sec--deep { background: #0F2236; }
.lb-sec--honey { background: radial-gradient(130% 120% at 80% 0%, #FFE38A, #FFC233 40%, #F29E0C 100%); }
.lb-sec--honey .lb-sub { color: #6B4300; }
.lb-sec::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(255, 255, 255, .035); -webkit-mask: var(--hex) 0 0 / 40px auto repeat; mask: var(--hex) 0 0 / 40px auto repeat; pointer-events: none; }
.lb-sec > .im-wrap { position: relative; z-index: 1; }
.lb-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-tab { height: 44px; padding: 0 18px; border-radius: 14px; font: 800 14px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: #C7D9E8;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); transition: all .2s; }
.lb-tab:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.lb-tab.is-on { color: #fff; background: linear-gradient(180deg, #8FDDFF, #3AA6EC); -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); }
.lb-tab .lg { width: 17px; display: inline-block; vertical-align: -3px; margin-right: 7px; color: #fff; }

/* ---------- предметы магазина с редкостью ---------- */
.lb-shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.lb-item { --r1: var(--rar1); --r2: var(--rar2); --r3: var(--rar3); position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 18%, var(--r1), var(--r2) 52%, var(--r3) 100%); box-shadow: 0 0 0 3px var(--ink), 0 7px 0 var(--ink); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.lb-item::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .13) 0 8deg, transparent 8deg 16deg);
  -webkit-mask: radial-gradient(circle at 50% 38%, #000, transparent 55%); mask: radial-gradient(circle at 50% 38%, #000, transparent 55%); animation: spin 60s linear infinite; }
.lb-item:hover { transform: translateY(-6px) rotate(-.8deg); }
.lb-item--leg { --r1: var(--leg1); --r2: var(--leg2); --r3: var(--leg3); }
.lb-item--epc { --r1: var(--epc1); --r2: var(--epc2); --r3: var(--epc3); }
.lb-item--com { --r1: var(--com1); --r2: var(--com2); --r3: var(--com3); }
.lb-item__rar { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 5px 9px; border-radius: 8px; background: rgba(13, 30, 48, .78); color: #fff; font: 800 10.5px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.lb-item--leg .lb-item__rar { background: var(--ink); color: var(--honey); }
.lb-item__flag { position: absolute; z-index: 2; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.lb-item__flag svg { width: 51px; height: 34px; translate: -8px 0; }
.lb-item__art { position: relative; height: 196px; display: grid; place-items: center; }
.lb-item__art .gcard { width: 168px; --rim: 5px; rotate: -8deg; transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1), scale .5s cubic-bezier(.3, 1.6, .5, 1); }
.lb-item:hover .lb-item__art .gcard { rotate: 0deg; scale: 1.06; }
.lb-item:hover .lb-item__art .gcard::after { left: 130%; }
.lb-item__bar { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; background: linear-gradient(180deg, rgba(13, 30, 48, .82), rgba(9, 21, 34, .95)); color: #fff; }
.lb-item__bar b { font: 800 14px/1.2 var(--f-display); letter-spacing: -.02em; }
.lb-item__bar > span { font-size: 12px; font-weight: 600; color: #9FB6C8; }
.lb-item__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lb-price { display: inline-flex; align-items: center; gap: 7px; font: 800 18px/1 var(--f-display); letter-spacing: -.03em; color: #fff; }
.lb-price i { width: 22px; height: 22px; background: var(--coin) center / contain no-repeat; }
.lb-hon { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; background: rgba(255, 194, 51, .16); color: var(--honey); font: 800 11.5px/1 var(--f-display); }
.lb-item__buy { margin-top: 4px; }
.lb-pop { position: absolute; z-index: 5; left: 50%; top: 42%; translate: -50% -50%; padding: 10px 14px; border-radius: 14px; background: var(--mint); color: var(--ink);
  font: 800 15px/1 var(--f-display); box-shadow: 0 0 0 3px var(--ink), 0 5px 0 var(--ink); white-space: nowrap; animation: popIn2 .45s cubic-bezier(.3, 1.8, .5, 1) both; }

/* ---------- карта мира: регионы как острова ---------- */
.lb-map { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: stretch; }
.lb-world { position: relative; height: 470px; border-radius: 30px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 100% at 50% 0%, #9BE0FB, #4BB3EA 55%, #2286CC); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.lb-world::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .18); -webkit-mask: var(--hex) 0 0 / 34px auto repeat; mask: var(--hex) 0 0 / 34px auto repeat; }
.lb-world .lb-cloud { z-index: 0; }
.lb-world__in { position: absolute; inset: 0; }
.lb-path { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.lb-path path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 16; opacity: .9; vector-effect: non-scaling-stroke; }
.lb-isl.is-lock { filter: grayscale(.85) brightness(1.05); opacity: .72; }
.lb-isl.is-lock:hover { transform: none; }
.lb-isl__lock { position: absolute; z-index: 3; left: 50%; top: 44%; translate: -50% -50%; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 0 0 3px #fff; }
.lb-isl__lock svg { width: 22px; height: 22px; }
.lb-isl { position: absolute; z-index: 1; width: 170px; display: flex; flex-direction: column; align-items: center; translate: -50% -50%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.lb-isl:hover { transform: translateY(-6px); }
.lb-isl__lm { width: 150px; height: 74px; background: var(--lm) center bottom / contain no-repeat; margin-bottom: -6px; position: relative; z-index: 1; }
.lb-isl__land { width: 170px; aspect-ratio: 1.55; background: var(--island) center top / 100% auto no-repeat; }
.lb-isl__pin { position: absolute; left: 50%; top: 100%; translate: -50% -26px; display: flex; align-items: center; gap: 7px; padding: 6px 10px 6px 6px; border-radius: 12px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); font: 800 12.5px/1 var(--f-display); white-space: nowrap; }
.lb-isl__pin svg { width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(19, 37, 58, .15); }
.lb-isl.is-on .lb-isl__pin { background: var(--honey); }
.lb-isl.is-on::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 58%; width: 190px; height: 70px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, .8), transparent 68%); }
.lb-isl__me { position: absolute; z-index: 3; left: 50%; top: -46px; width: 62px; translate: -50% 0; animation: bob 2.2s ease-in-out infinite; filter: drop-shadow(0 4px 0 rgba(19, 37, 58, .25)); }
.lb-lvlcard { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.lb-lvlcard__top { display: flex; align-items: center; gap: 14px; }
.lb-lvlcard__flag { flex: none; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--ink); }
.lb-lvlcard__flag svg { width: 81px; height: 54px; translate: -13px 0; }
.lb-lvlcard__top b { display: block; font: 800 22px/1.05 var(--f-display); letter-spacing: -.03em; }
.lb-lvlcard__top small { display: block; margin-top: 5px; font-size: 13px; font-weight: 700; color: var(--mute); }
.lb-stats { display: grid; gap: 8px; }
.lb-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 14px; border-radius: 14px; background: var(--paper); font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.lb-stat b { font: 800 16px/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.lb-stat--hl { background: var(--honey-wash); box-shadow: inset 0 0 0 1.5px var(--honey-line); }
.lb-lvlcard .lb-btn { margin-top: auto; }

/* ---------- медовая дорога и квесты ---------- */
.lb-road { position: relative; padding: 34px 34px 30px; border-radius: 32px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.lb-road__track { position: relative; height: 26px; margin: 150px 30px 0 30px; border-radius: 99px; background: rgba(19, 37, 58, .16); box-shadow: inset 0 0 0 3px var(--ink); }
.lb-road__fill { position: absolute; left: 3px; top: 3px; bottom: 3px; width: var(--fill, 30%); border-radius: 99px; background: linear-gradient(180deg, #FFE070, #E08A00);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55); animation: fillIn 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.lb-node { position: absolute; top: 50%; translate: -50% -50%; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 3px var(--ink), 0 4px 0 var(--ink);
  font: 800 16px/1 var(--f-display); color: var(--ink); }
.lb-node.is-got { background: linear-gradient(180deg, #FFE070, #F29E0C); color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.lb-node__art { position: absolute; left: 50%; bottom: 56px; width: 92px; height: 104px; translate: -50% 0; display: grid; place-items: end center; }
/* размеры в px, а не в %: у ячейки сетки высота строки «по содержимому», и процент от неё не считается: высокая банка и бочонок
   вылезали вниз на кружок уровня */
.lb-node__art img { max-width: 92px; max-height: 104px; width: auto; height: auto; filter: drop-shadow(0 6px 0 rgba(19, 37, 58, .14)); }
.lb-node.is-lock .lb-node__art img { filter: grayscale(.5) brightness(.95) drop-shadow(0 6px 0 rgba(19, 37, 58, .14)); opacity: .82; }
.lb-node__lbl { position: absolute; left: 50%; top: 58px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 170px; text-align: center; }
.lb-node__lbl b { font: 800 14px/1.1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.lb-node__lbl span { font-size: 12.5px; font-weight: 700; color: #6B4300; }
.lb-node__lbl em { font-style: normal; font: 800 12px/1 var(--f-display); padding: 5px 9px; border-radius: 99px; background: var(--ink); color: var(--honey); }
.lb-me { position: absolute; top: -58px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 2; }
.lb-me img { width: 58px; height: auto; animation: bob 2.4s ease-in-out infinite; }
.lb-me b { padding: 5px 9px; border-radius: 9px; background: var(--ink); color: #fff; font: 800 11.5px/1 var(--f-display); white-space: nowrap; }
.lb-road__chest { position: absolute; right: -18px; top: -6px; width: 170px; height: auto; rotate: 6deg; filter: drop-shadow(0 8px 0 rgba(19, 37, 58, .16)); }
.lb-road__note { margin-top: 104px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-size: 14.5px; font-weight: 700; color: #6B4300; }
.lb-quests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.lb-quest { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 22px; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 7px 0 var(--ink); overflow: hidden; }
.lb-quest__art { position: absolute; right: -6px; top: -4px; width: 108px; height: auto; filter: drop-shadow(0 5px 0 rgba(19, 37, 58, .12)); }
.lb-quest__tag { align-self: flex-start; padding: 6px 10px; border-radius: 9px; background: var(--ink); color: #fff; font: 800 11px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.lb-quest b { font: 800 19px/1.15 var(--f-display); letter-spacing: -.02em; max-width: 64%; }
.lb-quest p { font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 74%; }
.lb-quest__rew { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.lb-quest__rew span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 11px; background: var(--honey-wash); box-shadow: inset 0 0 0 1.5px var(--honey-line); font: 800 13px/1 var(--f-display); color: #7A4300; }
.lb-quest .lb-xp { flex: 1 1 auto; height: 12px; background: var(--line-2); box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---------- обменник Steam ---------- */
.lb-xchg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 36px; align-items: center; padding: 0 44px 0 48px; border-radius: 34px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 85% 0%, #2F6A9A, #13253A 62%); box-shadow: 0 0 0 3px var(--ink), 0 9px 0 var(--ink); color: #fff; }
.lb-awn { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 64px;
  background: repeating-linear-gradient(90deg, #4AB8E6 0 46px, #fff 46px 92px);
  -webkit-mask: radial-gradient(23px 18px at 23px 64px, transparent 98%, #000) 0 0 / 46px 100% repeat-x; mask: radial-gradient(23px 18px at 23px 64px, transparent 98%, #000) 0 0 / 46px 100% repeat-x;
  box-shadow: 0 3px 0 var(--ink); }
.lb-xchg__txt { position: relative; z-index: 1; padding-block: 112px 56px; }
.lb-xchg__sign { display: inline-block; margin-bottom: 18px; padding: 9px 16px; border-radius: 12px; background: var(--honey); color: #fff; font: 800 15px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; box-shadow: 0 0 0 3px var(--ink), 0 4px 0 var(--ink); rotate: -2deg; }
.lb-xchg__curs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.lb-tok { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 18px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); text-align: center; }
.lb-tok i { width: 54px; height: 54px; display: grid; place-items: center; background: var(--coin) center / contain no-repeat; color: #7A4300; font: 800 22px/1 var(--f-display); font-style: normal; padding: 4px 0 0 4px; animation: bob 3.4s ease-in-out infinite; }
.lb-tok:nth-child(2) i { animation-delay: -.8s; } .lb-tok:nth-child(3) i { animation-delay: -1.6s; } .lb-tok:nth-child(4) i { animation-delay: -2.4s; }
.lb-tok b { font-size: 14px; font-weight: 800; }
.lb-tok small { font-size: 11.5px; font-weight: 600; color: #9FB6C8; }
.lb-xchg__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.lb-xchg__cta span { font-size: 14px; font-weight: 600; color: #C7D9E8; }
.lb-xchg__cta span b { color: var(--mint); }
.lb-xchg__art { position: relative; z-index: 1; height: 100%; min-height: 470px; }
.lb-counter { position: absolute; left: -10px; right: -10px; bottom: 0; height: 120px; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #E9A75A, #B96F2B); box-shadow: 0 0 0 3px var(--ink), inset 0 6px 0 rgba(255, 255, 255, .3); }
.lb-counter::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #F6C88A, #E2A35A); box-shadow: 0 3px 0 var(--ink); }
.lb-xchg__bruno { position: absolute; z-index: 1; left: 50%; bottom: 84px; width: 270px; height: auto; translate: -50% 0; }
.lb-xchg__wallet { position: absolute; z-index: 2; left: 4%; bottom: 96px; width: 132px; height: auto; rotate: -8deg; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .25)); }

/* ---------- обучение ---------- */
.lb-tut { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.lb-step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 26px; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.lb-step__art { height: 176px; display: grid; place-items: center; border-radius: 20px; background: var(--sky-wash); }
.lb-step:nth-child(2) .lb-step__art { background: var(--mint-wash); } .lb-step:nth-child(3) .lb-step__art { background: var(--honey-wash); }
.lb-step__art img { height: 146px; width: auto; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.lb-step:hover .lb-step__art img { transform: rotate(-5deg) scale(1.06); }
.lb-step__art .step__fan { scale: 1.05; }
.lb-step h3 { display: flex; align-items: center; gap: 12px; font: 800 21px/1.15 var(--f-display); letter-spacing: -.02em; }
.lb-step p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.lb-pad { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 18px/1 var(--f-display);
  -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; box-shadow: 0 0 0 3px var(--ink), 0 4px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .45); }
.lb-pad--a { background: #3FBE7D; } .lb-pad--b { background: #FF6B5B; } .lb-pad--y { background: #FFC233; }

/* ---------- нижнее меню телефона ---------- */
.lb-tabbar { display: none; }

/* ---------- анимации ---------- */
@keyframes lmIn { from { opacity: 0; transform: translateY(26px) scale(.86); } }
@keyframes lmIn2 { from { opacity: 0; transform: translateY(26px) scale(.86); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(-40px) rotate(-30deg) scale(.6); } }
@keyframes cardIn2 { from { opacity: 0; transform: translateY(-40px) rotate(-30deg) scale(.6); } }
@keyframes pop2 { from { opacity: 0; transform: scale(.8) translateY(8px); } }
@keyframes ringPulse { 50% { transform: scale(1.06); opacity: .55; } }
@keyframes drift { from { transform: translateX(-140px); } to { transform: translateX(140px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bagBump { 30% { transform: scale(1.22) rotate(-8deg); } }
@keyframes bagBump2 { 30% { transform: scale(1.22) rotate(8deg); } }
@keyframes gainUp { 0% { opacity: 0; transform: translateY(14px) scale(.7); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes gainUp2 { 0% { opacity: 0; transform: translateY(14px) scale(.7); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes fillIn { from { width: 0; } }

/* ---------- адаптив ---------- */
@container im (max-width: 1240px) {
  .lb-side { width: 250px; }
  .lb-say { left: calc(50% - 400px); width: 250px; top: 300px; }
  .lb-say::after { display: none; }
}
@container im (max-width: 1100px) {
  .lb-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-map { grid-template-columns: 1fr; }
  .lb-xchg { grid-template-columns: 1fr; }
  .lb-xchg__art { min-height: 380px; }
  .lb-quests { grid-template-columns: 1fr 1fr; }
  .lb-tut { grid-template-columns: 1fr 1fr; }
  .lb-lvl__t { display: none; }
}
@container im (max-width: 960px) {
  .lb-stage { height: auto; padding-bottom: 0; display: flex; flex-direction: column; }
  .lb-scene { position: relative; height: 600px; }
  .lb-side { position: relative; inset: auto; width: auto; padding: 0 16px 24px; }
  .lb-side--l { order: 2; } .lb-side--r { order: 3; }
  .lb-evs { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 12px; margin: 0 -4px; scrollbar-width: none; }
  .lb-evs .lb-ev { scroll-snap-align: start; }
  .lb-find { display: none; }
}
@container im (max-width: 720px) {
  .lb-t { font-size: 32px; -webkit-text-stroke-width: 6px; text-shadow: 0 4px 0 var(--ink); }
  .lb-t--s { font-size: 22px; -webkit-text-stroke-width: 5px; }
  .lb-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
  .lb-sub { font-size: 15px; }
  .lb-hud__row { height: 62px; gap: 10px; }
  .lb-hud .im-logo img { width: 118px; }
  .lb-hud .im-logo span { display: none; }
  .lb-res { height: 34px; padding-left: 34px; font-size: 13px; }
  .lb-res > img { width: 38px; height: 38px; left: -6px; }
  .lb-res > span { padding-right: 6px; }
  .lb-res__plus { display: none; }
  .lb-res--rub { display: none; }
  .lb-lvl__hex { width: 36px; height: 40px; } .lb-lvl__hex b { font-size: 16px; }
  .lb-bag { width: 44px; height: 42px; border-radius: 13px; }
  .lb-scene { height: 548px; }
  .lb-isle { width: 380px; top: 34px; }
  .lb-podium { width: 270px; height: 66px; bottom: 136px; box-shadow: 0 0 0 3px var(--ink), 0 9px 0 var(--ink), 0 18px 22px rgba(10, 40, 80, .3); }
  .lb-bruno { width: 214px; bottom: 162px; }
  .lb-feat { left: calc(50% + 46px); top: 96px; width: 132px; }
  .lb-feat .gcard { --rim: 3.5px; }
  .lb-say { left: 12px; right: auto; top: 18px; width: 186px; padding: 22px 14px 14px; font-size: 13px; }
  .lb-say::after { display: none; }
  .lb-stage .coin { width: 38px; font-size: 15px; }
  .lb-coin--1 { left: 8%; top: 264px; } .lb-coin--2 { left: auto; right: 8%; top: 318px; } .lb-coin--3 { left: 14%; top: 360px; }
  .lb-play { left: 12px; right: 12px; translate: none; bottom: 16px; flex-direction: column; gap: 12px; }
  .lb-sel { width: 100%; height: 64px; justify-content: space-between; }
  .lb-sel__cur { min-width: 0; flex: 1 1 auto; }
  .lb-sel__logo { width: 42px; height: 42px; } .lb-sel__txt b { font-size: 16px; }
  .lb-sel__arr { width: 40px; height: 46px; }
  .lb-go { width: 100%; height: 66px; font-size: 22px; flex-direction: row; gap: 12px; }
  .lb-sec { padding-block: 64px; }
  .lb-shop { grid-template-columns: 1fr 1fr; gap: 14px; }
  .lb-item__art { height: 142px; } .lb-item__art .gcard { width: 122px; --rim: 4px; }
  .lb-item__bar { padding: 10px; } .lb-item__bar b { font-size: 12.5px; } .lb-price { font-size: 15px; } .lb-hon { font-size: 10.5px; padding: 4px 6px; }
  .lb-item__rar { font-size: 9px; } .lb-item__flag { width: 28px; height: 28px; } .lb-item__flag svg { width: 42px; height: 28px; translate: -7px 0; }
  .lb-world { height: 360px; overflow-x: auto; }
  .lb-world__in { position: relative; width: 820px; height: 100%; }
  .lb-road { padding: 24px 0 22px; overflow: hidden; }
  .lb-road__scroll { overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
  .lb-road__in { width: 760px; }
  .lb-road__chest { width: 110px; right: -10px; top: -14px; }
  .lb-road__note { margin: 98px 16px 0; font-size: 13.5px; }
  .lb-quests { grid-template-columns: 1fr; }
  .lb-xchg { padding: 0 18px; border-radius: 26px; }
  .lb-xchg__txt { padding-block: 92px 10px; }
  .lb-xchg__curs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-xchg__art { min-height: 320px; }
  .lb-xchg__bruno { width: 196px; bottom: 70px; }
  .lb-counter { height: 96px; }
  .lb-tut { grid-template-columns: 1fr; }
  .lb-tabbar { position: sticky; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; height: 70px; padding: 0 6px 8px; background: #0B1928;
    box-shadow: 0 -3px 0 rgba(0, 0, 0, .25); }
  .lb-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #8DA5B9; font-size: 11px; font-weight: 700; }
  .lb-tabbar a svg { width: 24px; height: 24px; }
  .lb-tabbar a.is-on { color: #fff; }
  .lb-tabbar__mid { position: relative; top: -14px; }
  .lb-tabbar__mid i { width: 60px; height: 56px; display: grid; place-items: center; color: var(--ink); background: linear-gradient(180deg, #FFE070, #FFB21E);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  .lb-tabbar__mid i svg { width: 26px; height: 26px; }
  .lb .im-foot { padding-bottom: 20px; }
}

/* правки после первого просмотра */
.lb-ev { min-height: 92px; }
.lb-ev__t { max-width: 56%; }
.lb-ev__art { width: 112px; }
.lb-ev__art--wide { width: 128px; right: -6px; bottom: 2px; opacity: .9; }
.lb-say { left: calc(50% - 404px); top: 392px; width: 250px; padding: 24px 18px 16px; font-size: 14.5px; }
.lb-say::after { right: -13px; top: 36px; }
.lb-node__n { position: relative; }
.lb-node.is-got .lb-node__n { color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.lb-node.is-got { -webkit-text-stroke: 0; }
.lb-node__lbl, .lb-node__lbl * { -webkit-text-stroke: 0; }
.lb-head__art { flex: none; width: 200px; height: auto; margin: -60px 10px -70px 0; filter: drop-shadow(0 10px 0 rgba(122, 77, 0, .2)); position: relative; z-index: 2; }
.lb-quest--wide .lb-quest__art { width: 150px; right: -14px; top: 6px; }
.lb-stat b { white-space: normal; text-align: right; }
.lb-lvlcard { min-width: 0; }
/* Реплика Бруно на средней ширине. 961-1240: слева колонка событий доходит почти до выбора карты (реплика ложилась на «Мёд x2»),
   а колонка хитов справа короче и всегда одной высоты: реплика под ней, по её краю. 721-960: колонки уходят под сцену, реплика
   слева над выбором карты и растёт вверх (текст бывает и в пять строк) */
@container im (min-width: 961px) and (max-width: 1240px) { .lb-say { left: auto; right: 24px; top: 336px; width: 250px; } }
@container im (min-width: 721px) and (max-width: 960px) { .lb-say { left: 16px; top: auto; bottom: 128px; width: min(220px, calc(50% - 176px)); } }
/* выбор карты и «Собрать карту» в одну строку шире 720 px: ужимаем название, а не режем стрелки по краям экрана */
@container im (min-width: 721px) and (max-width: 780px) { .lb-play { gap: 12px; } .lb-sel__cur { min-width: 200px; } .lb-go { padding: 0 28px; } }
@container im (max-width: 720px) {
  .lb-head__art { position: absolute; right: -4px; top: -30px; width: 108px; margin: 0; }
  .lb-sec--honey .lb-head > div { padding-right: 96px; }
  .lb-say { left: 12px; top: 14px; width: 180px; }
}
.lb-ev { flex-direction: column; align-items: stretch; justify-content: flex-end; min-height: 0; padding: 40px 14px 13px 16px; }
.lb-ev__t b { font-size: 15.5px; }
.lb-feat { left: calc(50% + 150px); top: 112px; width: 188px; }
.lb-price { white-space: nowrap; }
@container im (max-width: 720px) {
  .lb-say { width: 168px; font-size: 12.5px; line-height: 1.4; padding: 20px 12px 12px; }
  .lb-feat { left: calc(50% + 40px); top: 92px; width: 124px; }
  .lb-item__row { gap: 6px; }
  .lb-hon { display: none; }
}
.lb-sec { overflow-x: clip; }
@container im (max-width: 720px) { .lb-head__art { right: 0; } .lb-head { position: relative; } }

/* ---------- телефон: правки после просмотра на iPhone ---------- */
@container im (max-width: 720px) {
  /* медовая дорога: Бруно рядом с описанием, а не поверх текста */
  .lb-sec--honey .lb-head { display: grid; grid-template-columns: minmax(0, 1fr) 96px; column-gap: 10px; align-items: start; }
  .lb-sec--honey .lb-head > div { display: contents; }
  .lb-sec--honey .lb-head .lb-t { grid-column: 1 / -1; grid-row: 1; }
  .lb-sec--honey .lb-head .lb-sub { grid-column: 1; grid-row: 2; }
  .lb-sec--honey .lb-head__art { grid-column: 2; grid-row: 2; align-self: start; position: static; width: 96px; height: auto; margin: 4px 0 0; }
  /* уровни под банками видны: подписи внутри прокручиваемой полосы, а не обрезаны ею */
  .lb-road__in { padding: 0 40px 104px; }
  .lb-road__note { margin-top: 4px; }
  /* сундук в «Продай мёд» не закрывает текст */
  .lb-quest--wide .lb-quest__art { width: 104px; right: -8px; top: -2px; }
  /* вкладки в одну строку с прокруткой, без переноса по одной */
  .lb-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px 10px; }
  .lb-tabs::-webkit-scrollbar { display: none; }
  .lb-tab { flex: none; }
}
@container im (max-width: 370px) {
  .lb-hud .im-logo img { width: 112px; }
  .lb-hud__row { gap: 10px; }
}
@container im (max-width: 720px) {
  /* счётчик инвентаря не вылезает за край экрана */
  .lb-bag__n { right: -5px; top: -7px; min-width: 21px; height: 21px; padding: 0 5px; font-size: 11px; }
}

/* ---------- сборные товары: одна карта на платформу и регион, сумму выбирает покупатель ---------- */
.lb { --lg-pad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 6.2h10a5 5 0 0 1 4.9 4.1l1 5.7a2.7 2.7 0 0 1-4.6 2.3L16 16H8l-2.3 2.3A2.7 2.7 0 0 1 1.1 16l1-5.7A5 5 0 0 1 7 6.2zM6.6 9.2v1.7H4.9v1.8h1.7v1.7h1.8v-1.7h1.7v-1.8H8.4V9.2zM16.2 9.4a1.15 1.15 0 1 0 0 2.3 1.15 1.15 0 0 0 0-2.3zM18.6 11.8a1.15 1.15 0 1 0 0 2.3 1.15 1.15 0 0 0 0-2.3z'/%3E%3C/svg%3E"); }
.lg--pad { --lg: var(--lg-pad); }
.lb-fan { position: relative; display: block; width: 168px; aspect-ratio: 1.58; }
.lb-item__art .lb-fan .gcard { position: absolute; inset: 0; width: 100%; --rim: 5px;
  transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1), translate .5s cubic-bezier(.3, 1.6, .5, 1), scale .5s cubic-bezier(.3, 1.6, .5, 1); }
.lb-item__art .lb-fan .lb-fan__b { rotate: -20deg; translate: -22% -2%; filter: brightness(.7) saturate(.9); }
.lb-item__art .lb-fan .lb-fan__m { rotate: 8deg; translate: 20% -10%; filter: brightness(.86); }
.lb-item__art .lb-fan .lb-fan__f { rotate: -6deg; translate: 0 8%; }
.lb-item:hover .lb-item__art .lb-fan .lb-fan__b { rotate: -27deg; translate: -32% -6%; scale: 1; }
.lb-item:hover .lb-item__art .lb-fan .lb-fan__m { rotate: 15deg; translate: 30% -14%; scale: 1; }
.lb-item:hover .lb-item__art .lb-fan .lb-fan__f { rotate: 0deg; translate: 0 4%; scale: 1.05; }
.lb-item__img { width: auto; height: 168px; rotate: -6deg; filter: drop-shadow(0 8px 0 rgba(13, 30, 48, .22)); transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1), scale .5s cubic-bezier(.3, 1.6, .5, 1); }
.lb-item:hover .lb-item__img { rotate: 0deg; scale: 1.06; }
.lb-price small { font-size: .62em; font-weight: 700; letter-spacing: 0; color: #9FB6C8; margin-right: 1px; }
.lb-item__stock { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--mint); white-space: nowrap; }
.lb-item__stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(111, 219, 162, .18); }
/* нет в наличии: чуть приглушаем, но цвета карты остаются узнаваемыми (при .3 все карты были одинаково серыми) */
.lb-item--out { filter: saturate(.7) brightness(.96); }
.lb-item--out .lb-item__stock { color: #9FB6C8; }
.lb-item--out .lb-item__stock::before { box-shadow: none; }
.lb-more { display: flex; justify-content: center; margin-top: 38px; }
.lb-daily .lb-fan { width: 84px; }
.lb-daily .lb-item__art .lb-fan .gcard { --rim: 3px; }
.lb-daily .lb-item__art .gcard__val { font-size: 15cqw; }
.lb-daily .lb-item__img { height: 84px; }
/* в лобби карта на подиуме перебирает суммы: сумма любая, соберём из нескольких кодов */
.lb-feat__any { position: absolute; z-index: 2; right: -22px; bottom: -18px; padding: 7px 10px; border-radius: 10px; background: var(--honey); color: var(--ink);
  font: 800 11px/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; rotate: 7deg; box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink);
  animation: bob 4s ease-in-out -1.2s infinite; }
.lb-feat .gcard__val .odo__c { width: .7em; }
@container im (max-width: 720px) {
  .lb-fan { width: 112px; }
  .lb-item__art .lb-fan .gcard { --rim: 4px; }
  .lb-item__img { height: 118px; }
  .lb-item__stock { display: none; }
  .lb-item__buy { padding: 0 8px; font-size: 11px; letter-spacing: 0; -webkit-text-stroke-width: 3px; }
  .lb-more { margin-top: 26px; }
  .lb-more .lb-btn { width: 100%; }
  .lb-feat__any { right: -12px; bottom: -14px; padding: 5px 7px; font-size: 8.5px; border-radius: 8px; }
}

/* ИгроМагаз · «Лобби»: внутренние страницы (карта с номиналами, Steam, каталог, игра, корзина, кабинет).
   Подключается после im.css и lobby.css: берёт оттуда цвета, шрифты, кнопки lb-btn, HUD, заголовки lb-t, секции lb-sec. */

/* ---------- общие детали ---------- */
.lb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 700 12.5px/1 var(--f-display); letter-spacing: .02em; color: #fff; }
.lb-crumbs a { padding: 7px 10px; border-radius: 9px; background: rgba(13, 30, 48, .32); transition: background .2s; }
.lb-crumbs a:hover { background: rgba(13, 30, 48, .55); }
.lb-crumbs b { padding: 7px 10px; border-radius: 9px; background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.lb-crumbs > span { opacity: .75; }
.lb-flagdot { flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--ink); }
.lb-flagdot svg { width: 42px; height: 28px; translate: -7px 0; }
.lb-panel { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 28px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 9px 0 var(--ink); }
.lb-rarity { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 9px; font: 800 11px/1 var(--f-display); letter-spacing: .07em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, var(--rar2), var(--rar3)); box-shadow: 0 0 0 2px var(--ink); }
.lb-rarity::before { content: ""; width: 8px; height: 8px; border-radius: 2px; rotate: 45deg; background: #fff; }
.lb-rarity--epc { background: linear-gradient(180deg, var(--epc2), var(--epc3)); }
.lb-rarity--leg { background: linear-gradient(180deg, var(--leg2), var(--leg3)); }
.lb-fav { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); transition: transform .12s, color .2s; }
.lb-fav svg { width: 24px; height: 24px; }
.lb-fav:active { transform: translateY(6px); box-shadow: 0 0 0 3px var(--ink); }
.lb-fav.is-on { color: var(--coral); }
.lb-fav.is-on svg { fill: currentColor; }
.lb-inp { display: flex; align-items: center; height: 52px; border-radius: 15px; background: #fff; box-shadow: inset 0 0 0 2.5px var(--ink), inset 0 4px 0 rgba(19, 37, 58, .08); }
.lb-inp input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0 16px; background: none; color: var(--ink); font: 800 18px/1 var(--f-display); letter-spacing: -.02em; }
.lb-inp i { padding-right: 16px; font: 800 13px/1 var(--f-display); font-style: normal; color: var(--mute); }
.lb-inp:focus-within { box-shadow: inset 0 0 0 2.5px var(--sky-2), 0 0 0 4px rgba(74, 184, 230, .25); }
.lb-qchip { height: 40px; padding: 0 14px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); font: 800 13px/1 var(--f-display); color: var(--ink-2); white-space: nowrap; }
.lb-qchip:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.lb-qchip.is-on { background: var(--ink); color: #fff; box-shadow: none; }

/* ---------- витрина предмета (карта с номиналами) ---------- */
.lb-istage { position: relative; isolation: isolate; overflow: hidden; padding-block: 26px 70px;
  background: radial-gradient(120% 95% at 28% 0%, var(--lb-sky1) 0%, var(--lb-sky2) 42%, var(--lb-sky3) 100%); }
.lb-istage .lb-rays { left: 28%; top: 54%; width: 1500px; }
.lb-istage .lb-cloud { z-index: 0; }
.lb-istage::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .3));
  -webkit-mask: var(--hex) 0 0 / 46px auto repeat; mask: var(--hex) 0 0 / 46px auto repeat; pointer-events: none; }
.lb-istage__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: start; }
.lb-istage__l { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.lb-ititle { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lb-ititle__kick { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 12px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); font: 800 13px/1 var(--f-display); letter-spacing: .02em; }
.lb-ititle__kick .lg { width: 20px; color: #0070D1; }
.lb-ititle__h { font-size: 58px; }
.lb-ititle__sub { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 99px; background: rgba(13, 30, 48, .42); font-size: 15px; font-weight: 700; color: #fff; }
.lb-show { --r1: var(--rar1); --r2: var(--rar2); --r3: var(--rar3); position: relative; container-type: inline-size; height: 440px; }
.lb-show.r-epc { --r1: var(--epc1); --r2: var(--epc2); --r3: var(--epc3); }
.lb-show.r-leg { --r1: var(--leg1); --r2: var(--leg2); --r3: var(--leg3); }
.lb-show__glow { position: absolute; z-index: 0; left: 50%; top: 58%; width: 82cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, color-mix(in oklab, var(--r1) 75%, transparent) 26%, color-mix(in oklab, var(--r2) 35%, transparent) 46%, transparent 66%); }
.lb-show__glow::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .22) 0 7deg, transparent 7deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); animation: spin 50s linear infinite; }
.lb-show__isle { position: absolute; z-index: 1; left: 50%; top: 6%; width: 66cqw; aspect-ratio: 1.6; translate: -50% 0; }
.lb-show__land { position: absolute; left: 6%; right: 6%; top: 26%; aspect-ratio: 1; background: var(--island) center top / contain no-repeat; animation: bob 7s ease-in-out infinite; }
.lb-show__lm { position: absolute; left: 13%; right: 13%; top: 0; height: 40%; background: var(--lm) center bottom / contain no-repeat; animation: bob 7s ease-in-out infinite; }
.lb-show__card { position: absolute; z-index: 3; left: 50%; top: 58%; width: 46cqw; translate: -50% -50%; }
.lb-show__card .gcard { --rim: 6px; rotate: -7deg; animation: bob 4s ease-in-out infinite, cardIn .6s cubic-bezier(.3, 1.6, .5, 1) both; box-shadow: 0 0 0 6px #fff, 0 0 0 9px var(--ink), 0 22px 0 -6px rgba(13, 30, 48, .35); }
.lb-show__card .gcard::after { animation: shine 3.6s ease-in-out infinite; }
.lb-show__asm { position: absolute; z-index: 3; left: 0; right: 0; top: 34%; height: 48%; container-type: inline-size; }
.lb-show__asm .asm .gcard { --rim: 5px; box-shadow: 0 0 0 5px #fff, 0 0 0 7.5px var(--ink), 0 14px 0 -4px rgba(13, 30, 48, .3); }
.lb-show__asm .asm__plus { color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.lb-show .coin { z-index: 4; width: 9cqw; font-size: 4cqw; }
.lb-show__c1 { left: 13%; top: 30%; } .lb-show__c2 { right: 12%; top: 22%; width: 7cqw !important; font-size: 3.2cqw !important; animation-delay: -1.2s !important; }
.lb-show__c3 { right: 18%; bottom: 8%; width: 6.4cqw !important; font-size: 3cqw !important; animation-delay: -2.2s !important; }
.lb-show__rar { position: absolute; z-index: 5; left: 0; top: 10px; rotate: -4deg; padding: 9px 14px; border-radius: 12px; font: 800 14px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #fff;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; background: linear-gradient(180deg, var(--r2), var(--r3)); box-shadow: 0 0 0 3px var(--ink), 0 5px 0 var(--ink); }
.lb-show__tag { position: absolute; z-index: 5; left: 2%; bottom: 6%; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 14px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 2.5px var(--ink), 0 5px 0 var(--ink); font: 800 13px/1 var(--f-display); letter-spacing: -.01em; }
.lb-show__tag i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--honey); }
.lb-show__tag svg { width: 16px; height: 16px; }
@keyframes shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes lbPop { from { opacity: 0; transform: scale(.92) translateY(6px); } }
@keyframes lbFade { from { opacity: 0; } }
@keyframes lbSlide { from { transform: translateX(40px); opacity: 0; } }

/* ---------- панель покупки ---------- */
.lb-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-panel__sold { font-size: 13px; font-weight: 700; color: var(--mute); }
.lb-panel__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lb-panel__h b { font: 800 19px/1 var(--f-display); letter-spacing: -.02em; }
.lb-panel__h span { font-size: 13px; font-weight: 600; color: var(--mute); }
.lb-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lb-slot { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 12px 10px 10px; border-radius: 15px; background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line); text-align: left; transition: transform .2s, box-shadow .2s, background .2s; }
.lb-slot b { font: 800 18px/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.lb-slot b small { margin-left: 3px; font-size: .6em; font-weight: 700; }
.lb-slot > span { font-size: 12px; font-weight: 700; color: var(--mute); white-space: nowrap; }
.lb-slot:hover { box-shadow: inset 0 0 0 2px var(--ink); transform: translateY(-2px); }
.lb-slot.is-on { background: linear-gradient(180deg, #FFE070, #FFB21E); box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); transform: translateY(-2px); }
.lb-slot.is-on > span { color: #6B4300; }
.lb-slot em { position: absolute; right: 5px; top: -9px; padding: 3px 6px; border-radius: 7px; background: var(--sky); color: #fff; font: 800 9px/1 var(--f-display); font-style: normal; letter-spacing: .05em;
  text-transform: uppercase; box-shadow: 0 0 0 2px var(--ink); }
.lb-craftbtn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--sky-wash); box-shadow: inset 0 0 0 2px var(--sky-soft); text-align: left;
  font-size: 14px; font-weight: 600; color: var(--ink-2); transition: box-shadow .2s; }
.lb-craftbtn:hover { box-shadow: inset 0 0 0 2px var(--sky-2); }
.lb-craftbtn b { color: var(--sky-ink); }
.lb-craftbtn i { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--sky); color: #fff; box-shadow: 0 0 0 2px var(--ink); transition: rotate .3s; }
.lb-craftbtn i svg { width: 17px; height: 17px; }
.lb-craftbtn.is-on i { rotate: 45deg; }
.lb-craft { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--paper); animation: lbPop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.lb-craft__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.lb-craft__fld { flex: 1 1 180px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.lb-craft__q { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-craft__res { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.lb-craft__res > b { font: 800 17px/1 var(--f-display); color: var(--ink); }
.lb-craft__res small { font-size: 13px; color: var(--mute); }
.lb-mini { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: 9px; background: linear-gradient(140deg, #1F7CE8, #0A3F96); color: #fff;
  font: 800 12.5px/1 var(--f-display); box-shadow: 0 0 0 2px var(--ink); }
.lb-mini .lg { width: 15px; color: #fff; }
.lb-craft__warn { font-size: 13.5px; font-weight: 700; color: var(--coral-2); }
.lb-buy { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-top: 4px; border-top: 2px dashed var(--line); padding-top: 18px; }
.lb-buy__price { display: flex; align-items: center; gap: 12px; }
.lb-buy__coin { flex: none; width: 46px; height: 46px; background: var(--coin) center / contain no-repeat; filter: drop-shadow(0 4px 0 rgba(19, 37, 58, .18)); animation: bob 3.2s ease-in-out infinite; }
.lb-buy__num { display: flex; align-items: baseline; gap: 6px; font: 800 44px/1 var(--f-display); letter-spacing: -.05em; color: var(--ink); }
.lb-buy__num small { font-size: .5em; letter-spacing: 0; }
.lb-buy__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lb-buy__sold { font-size: 12px; font-weight: 700; color: var(--mute); }
.lb-honchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; background: var(--honey-wash); color: #7A4300; font: 800 13px/1 var(--f-display);
  box-shadow: inset 0 0 0 1.5px var(--honey-line); white-space: nowrap; }
.lb-honchip svg { width: 16px; height: 16px; color: var(--honey-2); }
.lb-asmnote { display: flex; gap: 12px; padding: 13px 14px; border-radius: 16px; background: var(--sky-wash); font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.lb-asmnote b { color: var(--ink); }
.lb-asmnote i { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--sky-ink); box-shadow: 0 0 0 2px var(--sky-soft); }
.lb-asmnote i svg { width: 17px; height: 17px; }
.lb-buy__btns { display: flex; gap: 12px; }
.lb-buy__btns .lb-btn { flex: 1 1 0; min-width: 0; }
.lb-buy__inv svg { stroke: var(--ink); }
.lb-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.lb-perks li { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--paper); font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--mute); }
.lb-perks li b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 800; color: var(--ink); }
.lb-perks i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--sky-ink); box-shadow: 0 0 0 2px var(--line); }
.lb-perks i svg { width: 17px; height: 17px; }

.lb-step__card { width: 160px; }
.lb-step__card .gcard { --rim: 4px; rotate: -9deg; transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1); }
.lb-step:hover .lb-step__card .gcard { rotate: 0deg; }

/* ---------- текстовые блоки на тёмных секциях ---------- */
.lb-doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.lb-doc__card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.lb-doc__card h3 { font: 800 20px/1.15 var(--f-display); letter-spacing: -.02em; }
.lb-doc__card p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.lb-warn { display: flex; gap: 14px; padding: 18px 20px; border-radius: 22px; background: #fff; color: var(--ink-2); box-shadow: 0 0 0 3px var(--ink), 0 7px 0 var(--ink); font-size: 15px; line-height: 1.55; }
.lb-warn b { color: var(--ink); }
.lb-warn > i { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--coral); color: #fff; font: 800 20px/1 var(--f-display); font-style: normal;
  -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); }
.lb-warns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }

/* ---------- мёд за покупку ---------- */
.lb-hgain { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 34px; align-items: center; padding: 30px 40px; border-radius: 32px;
  background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.lb-hgain__bruno { width: 210px; height: auto; margin: -70px 0 -40px 10px; filter: drop-shadow(0 10px 0 rgba(122, 77, 0, .2)); }
.lb-hgain__txt { display: flex; flex-direction: column; gap: 14px; }
.lb-hgain__txt .lb-sub { margin: 0; color: #6B4300; max-width: 60ch; }
.lb-hgain__lvl { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; background: var(--ink); color: #fff; max-width: 440px; }
.lb-hgain__lvl .lb-lvl__t { display: flex; flex: 1 1 auto; min-width: 0; }
.lb-hgain__cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }

/* ---------- другие регионы ---------- */
.lb-regs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lb-reg { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink);
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.lb-reg:hover { transform: translateY(-6px) rotate(-.6deg); }
.lb-reg__sky { position: relative; height: 150px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #9BE0FB, #4BB3EA 60%, #2286CC); box-shadow: 0 3px 0 var(--ink); }
.lb-reg__sky::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .18); -webkit-mask: var(--hex) 0 0 / 30px auto repeat; mask: var(--hex) 0 0 / 30px auto repeat; }
.lb-reg__lm { position: absolute; left: 50%; top: 14px; width: 150px; height: 70px; translate: -50% 0; background: var(--lm) center bottom / contain no-repeat; z-index: 1; }
.lb-reg__land { position: absolute; left: 50%; top: 70px; width: 170px; aspect-ratio: 1; translate: -50% 0; background: var(--island) center top / 100% auto no-repeat; }
.lb-reg:hover .lb-reg__lm, .lb-reg:hover .lb-reg__land { animation: bob 2.6s ease-in-out infinite; }
.lb-reg__pin { position: absolute; z-index: 2; left: 12px; top: 12px; display: flex; align-items: center; gap: 7px; padding: 5px 9px 5px 5px; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 2px var(--ink), 0 3px 0 var(--ink); font: 800 12px/1 var(--f-display); }
.lb-reg__pin svg { width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(19, 37, 58, .15); }
.lb-reg__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.lb-reg__body > b { font: 800 18px/1.1 var(--f-display); letter-spacing: -.02em; }
.lb-reg__body > small { font-size: 13px; font-weight: 600; color: var(--mute); }
.lb-reg__rate { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.lb-reg__rate strong { font: 800 17px/1 var(--f-display); color: var(--ink); }
.lb-reg__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 2px dashed var(--line); font-size: 14px; font-weight: 600; color: var(--mute); }
.lb-reg__foot b { font: 800 16px/1 var(--f-display); color: var(--ink); }
.lb-reg__foot i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, #8FDDFF, #3AA6EC); color: var(--ink); box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); }
.lb-reg__foot i svg { width: 18px; height: 18px; }

/* ---------- нижняя панель покупки и окно «добавлено» ---------- */
.lb-buybar { display: none; }
.lb-drawer { animation: lbFade .25s both; }
.lb-drawer .drawer__panel { gap: 16px; background: #fff; box-shadow: -3px 0 0 var(--ink); animation: lbSlide .45s cubic-bezier(.2, .9, .2, 1) both; }
.lb-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-drawer__head b { font: 800 19px/1.1 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.lb-drawer__x { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.lb-drawer__x svg { width: 20px; height: 20px; }
.lb-drawer__item { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 20px; background: radial-gradient(120% 120% at 30% 0%, var(--epc1), var(--epc2) 60%, var(--epc3)); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); color: #fff; }
.lb-drawer__item .gcard { flex: none; width: 110px; --rim: 4px; rotate: -6deg; }
.lb-drawer__item b { display: block; font: 800 15px/1.2 var(--f-display); letter-spacing: -.02em; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.lb-drawer__item small { display: block; margin: 4px 0 8px; font-size: 12.5px; font-weight: 700; opacity: .9; }
.lb-drawer__honey { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--honey-wash); color: #7A4300; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--honey-line); }
.lb-drawer__honey img { width: 36px; height: auto; }
.lb-drawer__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--mute); }
.lb-drawer__sum b { font: 800 26px/1 var(--f-display); letter-spacing: -.04em; color: var(--ink); }
.lb-drawer .lb-btn { margin-top: 4px; }

/* ---------- адаптив внутренних страниц ---------- */
@container im (max-width: 1240px) {
  .lb-istage__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 28px; }
  .lb-ititle__h { font-size: 48px; }
  .lb-hgain { grid-template-columns: 200px minmax(0, 1fr); }
  .lb-hgain__cta { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
}
@container im (max-width: 1100px) {
  .lb-regs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-istage__grid { grid-template-columns: minmax(0, 1fr); }
  .lb-show { height: 400px; max-width: 760px; }
  .lb-doc, .lb-warns { grid-template-columns: minmax(0, 1fr); }
}
@container im (max-width: 720px) {
  .lb-istage { padding-block: 16px 34px; }
  .lb-istage__grid { gap: 18px; }
  .lb-istage__l { gap: 12px; }
  .lb-crumbs { font-size: 11px; gap: 4px; }
  .lb-crumbs a, .lb-crumbs b { padding: 6px 8px; }
  .lb-ititle { gap: 10px; }
  .lb-ititle__h { font-size: 34px; }
  .lb-ititle__sub { font-size: 12.5px; border-radius: 16px; padding-right: 12px; }
  .lb-ititle__sub .lb-flagdot { width: 24px; height: 24px; } .lb-ititle__sub .lb-flagdot svg { width: 36px; height: 24px; translate: -6px 0; }
  .lb-show { height: 288px; }
  .lb-show__isle { width: 84cqw; top: 2%; }
  .lb-show__card { width: 62cqw; top: 57%; }
  .lb-show__asm { top: 30%; }
  .lb-show .coin { width: 12cqw; font-size: 5.4cqw; }
  .lb-show__rar { top: 4px; font-size: 11.5px; padding: 7px 11px; -webkit-text-stroke-width: 3.5px; }
  .lb-show__tag { left: 0; bottom: 2%; font-size: 11.5px; padding: 6px 11px 6px 6px; }
  .lb-show__tag i { width: 24px; height: 24px; }
  .lb-panel { padding: 16px; border-radius: 22px; gap: 14px; }
  .lb-panel__h { flex-direction: column; align-items: flex-start; gap: 5px; }
  .lb-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .lb-slot { padding: 11px 9px 9px; }
  .lb-slot b { font-size: 17px; }
  .lb-buy__num { font-size: 34px; }
  .lb-buy__coin { width: 38px; height: 38px; }
  .lb-buy__btns { flex-wrap: wrap; }
  .lb-buy__btns .lb-buy__inv { flex: 1 1 100%; }
  .lb-buy__btns .lb-btn { padding: 0 14px; font-size: 16px; }
  .lb-fav { width: 52px; height: 56px; }
  .lb-perks { grid-template-columns: minmax(0, 1fr); }
  .lb-perks li { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; }
  .lb-perks li b { margin: 0; }
  .lb-doc__card, .lb-warn { padding: 18px; border-radius: 22px; }
  .lb-hgain { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 18px 20px; border-radius: 26px; }
  .lb-hgain__bruno { position: absolute; right: 6px; top: -46px; width: 92px; margin: 0; }
  .lb-hgain__txt .lb-t { padding-right: 90px; }
  .lb-hgain__cta { grid-column: auto; flex-direction: column; }
  .lb-regs { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -16px; padding: 4px 16px 16px; }
  .lb-regs::-webkit-scrollbar { display: none; }
  .lb-reg { scroll-snap-align: start; }
  .lb-page .lb-tut { gap: 14px; }
  .lb-page .lb-step { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: start; padding: 14px; border-radius: 22px; }
  .lb-page .lb-step__art { grid-row: span 2; height: 92px; border-radius: 16px; }
  .lb-page .lb-step__art img { height: 74px; }
  .lb-page .lb-step__card { width: 66px; }
  .lb-page .lb-step__card .gcard { --rim: 2.5px; }
  .lb-page .lb-step h3 { font-size: 16px; gap: 8px; }
  .lb-page .lb-step .lb-pad { width: 30px; height: 30px; font-size: 14px; -webkit-text-stroke-width: 3px; }
  .lb-page .lb-step p { font-size: 13.5px; line-height: 1.45; }
  .lb-reg__sky { height: 116px; }
  .lb-reg__lm { width: 116px; height: 56px; top: 10px; }
  .lb-reg__land { width: 132px; top: 56px; }
  .lb-reg__body { padding: 12px 12px 14px; }
  .lb-reg__body > b { font-size: 15px; }
  .lb-reg__rate { font-size: 12.5px; } .lb-reg__rate strong { font-size: 14px; }
  .lb-reg__foot { font-size: 12.5px; } .lb-reg__foot b { font-size: 14px; } .lb-reg__foot i { width: 32px; height: 32px; }
  .lb-buybar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: #0B1928; box-shadow: 0 -3px 0 rgba(0, 0, 0, .25); color: #fff; }
  .lb-buybar b { display: block; font: 800 20px/1 var(--f-display); letter-spacing: -.03em; }
  .lb-buybar small { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; color: #9FB6C8; }
  .lb-buybar .lb-btn { flex: none; }
  .lb-page .im-foot { padding-bottom: 20px; }
}
@container im (max-width: 370px) {
  .lb-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-ititle__h { font-size: 30px; }
}

/* ======================= пополнение Steam: обменник ======================= */
.lb-sec--top { padding-block: 26px 40px; }
.lb-sec--top .lb-crumbs { margin-bottom: 22px; }
.lb-shero .lb-xchg__txt { padding-block: 104px 48px; }
.lb-shero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.lb-shero__chips span { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
  font-size: 14px; font-weight: 700; color: #E2ECF4; white-space: nowrap; }
.lb-shero__chips b { color: var(--mint); }
.lb-shero .lb-xchg__art { min-height: 430px; }
.lb-shero .coin { z-index: 3; width: 46px; font-size: 18px; }
.lb-shero__c1 { left: 10%; top: 22%; } .lb-shero__c2 { right: 12%; top: 14%; animation-delay: -1s !important; } .lb-shero__c3 { right: 4%; top: 46%; width: 38px !important; font-size: 15px !important; animation-delay: -2s !important; }
.lb-shero__c4 { left: 28%; top: 8%; width: 36px !important; font-size: 14px !important; animation-delay: -2.6s !important; }
.lb-trade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 26px; align-items: start; }
.lb-trade__form { gap: 22px; padding: 28px; }
.lb-trade__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.lb-trade__head b { display: flex; align-items: center; gap: 12px; font: 800 24px/1 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; }
.lb-trade__head b .lg { width: 30px; color: #1B2838; }
.lb-fee { display: inline-flex; align-items: center; gap: .32em; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--mint-wash); color: var(--mint-ink); font: 800 13px/1 var(--f-display); white-space: nowrap; box-shadow: inset 0 0 0 1.5px #BDEBD1; }
.lb-blk { display: flex; flex-direction: column; gap: 12px; }
.lb-blk__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lb-blk__h b { font: 800 16px/1.1 var(--f-display); letter-spacing: -.02em; }
.lb-blk__h span { font-size: 13px; font-weight: 600; color: var(--mute); }
.lb-blk__h button { font-size: 13px; font-weight: 800; color: var(--sky-ink); text-decoration: underline dotted; text-underline-offset: 3px; }
.lb-curs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lb-cur { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line);
  transition: transform .2s, box-shadow .2s, background .2s; }
.lb-cur:hover { box-shadow: inset 0 0 0 2px var(--ink); transform: translateY(-2px); }
.lb-cur > i { width: 48px; height: 48px; display: grid; place-items: center; padding: 4px 0 0 4px; background: var(--coin) center / contain no-repeat; color: #7A4300; font: 800 20px/1 var(--f-display); font-style: normal; }
.lb-cur b { font: 800 14px/1 var(--f-display); letter-spacing: .02em; }
.lb-cur small { font-size: 11.5px; font-weight: 700; color: var(--mute); text-align: center; line-height: 1.2; }
.lb-cur.is-on { background: linear-gradient(180deg, #FFF1BF, #FFD566); box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); transform: translateY(-2px); }
.lb-cur.is-on > i { animation: bob 2.4s ease-in-out infinite; }
.lb-cur.is-on small { color: #7A4300; }
.lb-flds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.lb-inp.is-ok { box-shadow: inset 0 0 0 2.5px var(--mint-2), inset 0 4px 0 rgba(19, 37, 58, .06); }
.lb-inp input::placeholder { color: #8DA0B0; font-weight: 600; }
.lb-help { padding: 14px 16px; border-radius: 16px; background: var(--honey-wash); box-shadow: inset 0 0 0 1.5px var(--honey-line); font-size: 14px; line-height: 1.5; color: var(--ink-2); animation: lbPop .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.lb-help b { color: var(--ink); }
.lb-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-pays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lb-pay { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 13px 12px 12px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); text-align: left;
  transition: transform .2s, box-shadow .2s, background .2s; }
.lb-pay:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.lb-pay b { font: 800 15px/1 var(--f-display); letter-spacing: -.02em; }
.lb-pay span { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--mute); }
.lb-pay strong { font: 800 13px/1 var(--f-display); color: var(--ink-2); }
.lb-pay em { position: absolute; right: 8px; top: -10px; padding: 4px 7px; border-radius: 8px; background: var(--mint); color: var(--ink); font: 800 9.5px/1 var(--f-display); font-style: normal; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 0 0 2px var(--ink); }
.lb-pay.is-on { background: #fff; box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); transform: translateY(-2px); }
.lb-pay.is-on strong { color: var(--mint-ink); }
.lb-check { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 20px; background: var(--sky-wash); box-shadow: inset 0 0 0 2px var(--sky-soft); }
.lb-check__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.lb-check__row b { font: 800 16px/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.lb-check__big { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 6px; padding-top: 16px; border-top: 2px dashed var(--sky-soft); }
.lb-check__big small { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800; color: var(--sky-ink); }
.lb-check__got { display: flex; align-items: baseline; gap: 8px; font: 800 42px/1 var(--f-display); letter-spacing: -.05em; color: var(--ink); }
.lb-check__got em { font-style: normal; font-size: .62em; }
.lb-check__pay { text-align: right; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.lb-check__pay b { display: block; margin-top: 6px; font: 800 24px/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.lb-agree { display: flex; align-items: flex-start; gap: 12px; text-align: left; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--ink-2); }
.lb-agree u { text-decoration: underline dotted; text-underline-offset: 3px; }
.lb-agree i { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: transparent; box-shadow: inset 0 0 0 2.5px var(--ink); transition: background .15s; }
.lb-agree i svg { width: 16px; height: 16px; }
.lb-agree.is-on i { background: var(--ink); color: #fff; }
.lb-btn--xl { height: 68px; border-radius: 22px; font-size: 21px; -webkit-text-stroke-width: 5px; box-shadow: 0 0 0 3px var(--ink), 0 7px 0 var(--ink), inset 0 5px 0 rgba(255, 255, 255, .55), inset 0 -7px 0 rgba(150, 70, 0, .3); }
/* неактивная кнопка: тёмно-серый текст без обводки (белые буквы с обводкой на светлом фоне сливались: «НЕТВНАЛИЧИИ») */
.lb-btn.is-off { background: linear-gradient(180deg, #E8F0F5, #B9CAD6); color: #5E7184; -webkit-text-stroke: 0; filter: none; cursor: not-allowed; }
.lb-btn.is-off:hover { transform: none; }
.lb-trade__side { display: flex; flex-direction: column; gap: 18px; }
.lb-sidecard { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.lb-sidecard h3 { font: 800 18px/1.15 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.lb-sidecard p { font-size: 13.5px; line-height: 1.55; color: var(--mute); }
.lb-steps2 { display: flex; flex-direction: column; gap: 14px; }
.lb-steps2 li { display: flex; gap: 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.lb-steps2 li strong { display: block; margin-bottom: 2px; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.lb-steps2 .lb-pad { width: 34px; height: 34px; font-size: 15px; -webkit-text-stroke-width: 3px; }
.lb-curmap { display: grid; gap: 8px; }
.lb-curmap > span { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--paper); font-size: 14px; font-weight: 700; }
.lb-curmap svg { width: 30px; height: 20px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(19, 37, 58, .12); }
.lb-curmap i { width: 30px; height: 20px; display: grid; place-items: center; color: var(--sky-ink); } .lb-curmap i svg { width: 18px; height: 18px; box-shadow: none; }
.lb-curmap em { font: 800 13.5px/1 var(--f-display); font-style: normal; white-space: nowrap; }
.lb-botcard { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 24px; overflow: hidden; isolation: isolate; color: var(--ink);
  background: linear-gradient(135deg, #8FDDFF, #3AA6EC); box-shadow: 0 0 0 3px var(--ink), 0 7px 0 var(--ink); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.lb-botcard:hover { transform: translateY(-3px) rotate(-.6deg); }
.lb-botcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .14) 0 14px, transparent 14px 28px); }
.lb-botcard > i { flex: none; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: #fff; color: #26A5E4; box-shadow: 0 0 0 2.5px var(--ink); }
.lb-botcard > i .lg { width: 28px; }
.lb-botcard b { display: block; font: 800 16px/1.15 var(--f-display); letter-spacing: -.02em; }
.lb-botcard small { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; }
.lb-botcard img { position: absolute; z-index: -1; right: -8px; bottom: -22px; width: 92px; height: auto; opacity: .95; }
.lb-botcard span { padding-right: 70px; }
/* частые вопросы */
.lb-faq { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 34px; align-items: start; }
.lb-faq__side { position: relative; display: flex; flex-direction: column; gap: 14px; }
.lb-faq__side .lb-sub { margin: 0; }
.lb-faq__bruno { width: 210px; height: auto; margin-top: 8px; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .25)); }
.lb-faq__list { display: flex; flex-direction: column; gap: 12px; }
.lb-faqi { border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); overflow: hidden; }
.lb-faqi__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; text-align: left; font: 800 16px/1.25 var(--f-display); letter-spacing: -.02em; }
.lb-faqi__q i { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(180deg, #8FDDFF, #3AA6EC); box-shadow: 0 0 0 2.5px var(--ink), 0 3px 0 var(--ink); transition: rotate .3s; }
.lb-faqi__q i svg { width: 17px; height: 17px; }
.lb-faqi.is-open .lb-faqi__q i { rotate: 45deg; background: linear-gradient(180deg, #FFE070, #FFB21E); }
.lb-faqi__a { padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--ink-2); animation: lbPop .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.lb-paybar { display: none; }

@container im (max-width: 1100px) {
  .lb-trade { grid-template-columns: minmax(0, 1fr); }
  .lb-trade__side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lb-faq { grid-template-columns: minmax(0, 1fr); }
  .lb-faq__bruno { position: absolute; right: 0; top: -30px; width: 130px; margin: 0; }
}
@container im (max-width: 720px) {
  .lb-sec--top { padding-block: 16px 26px; }
  .lb-sec--top .lb-crumbs { margin-bottom: 14px; }
  .lb-shero .lb-xchg { padding: 0 16px; }
  .lb-shero .lb-xchg__txt { padding-block: 84px 4px; }
  .lb-shero__chips span { height: 34px; padding: 0 11px; font-size: 13px; }
  .lb-shero .lb-xchg__art { min-height: 300px; }
  .lb-shero .lb-xchg__bruno { width: 190px; bottom: 70px; }
  .lb-shero .lb-xchg__wallet { width: 100px; bottom: 80px; }
  .lb-shero .lb-counter { height: 90px; }
  .lb-trade__form { padding: 18px 16px; gap: 18px; }
  .lb-trade__head b { font-size: 19px; }
  .lb-curs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .lb-cur { padding: 10px 2px 8px; border-radius: 15px; }
  .lb-cur > i { width: 38px; height: 38px; font-size: 16px; }
  .lb-cur b { font-size: 12px; }
  .lb-cur small { display: none; }
  .lb-flds { grid-template-columns: minmax(0, 1fr); }
  .lb-pays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-check { padding: 16px; }
  .lb-check__got { font-size: 32px; }
  .lb-check__pay b { font-size: 20px; }
  .lb-btn--xl { height: 62px; font-size: 18px; }
  .lb-trade__side { grid-template-columns: minmax(0, 1fr); }
  .lb-sidecard { padding: 18px; border-radius: 22px; }
  .lb-faq__bruno { width: 92px; top: -14px; }
  .lb-faq__side .lb-t { padding-right: 96px; }
  .lb-faqi__q { padding: 15px 16px; font-size: 14.5px; }
  .lb-faqi__a { padding: 0 16px 16px; font-size: 14px; }
  .lb-paybar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: #0B1928; box-shadow: 0 -3px 0 rgba(0, 0, 0, .25); color: #fff; }
  .lb-paybar b { display: block; font: 800 19px/1 var(--f-display); letter-spacing: -.03em; }
  .lb-paybar small { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; color: #9FB6C8; }
  .lb-paybar .lb-btn { flex: none; }
}
.lb-sec--trade { padding-top: 6px; }
@container im (max-width: 720px) { .lb-sec--trade { padding-top: 0; padding-bottom: 48px; } }
.lb-check__honey { color: #B26A00 !important; }

/* ======================= каталог: сборные карты и пополнения ======================= */
.lb-cat-hero { overflow: hidden; isolation: isolate; padding-block: 26px 50px;
  background: radial-gradient(120% 95% at 28% 0%, var(--lb-sky1) 0%, var(--lb-sky2) 42%, var(--lb-sky3) 100%); }
.lb-cat-hero::before { display: none; }
.lb-cat-hero .lb-rays { left: 30%; top: 40%; width: 1500px; }
.lb-cat-hero .lb-sub { color: #0B2B47; }
.lb-cat-hero::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .3));
  -webkit-mask: var(--hex) 0 0 / 46px auto repeat; mask: var(--hex) 0 0 / 46px auto repeat; pointer-events: none; }
.lb-cat-hero .lb-crumbs { margin-bottom: 20px; }
.lb-cathead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 30px; align-items: end; }
.lb-cathead .lb-t { font-size: 56px; }
.lb-cathead .lb-sub { max-width: 48ch; }
.lb-catfind { position: relative; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 10px 0 20px; border-radius: 22px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 7px 0 var(--ink); }
.lb-catfind > svg { width: 24px; height: 24px; color: var(--mute); flex: none; }
.lb-catfind input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 700 17px/1 var(--f-body); color: var(--ink); }
.lb-catfind input::placeholder { color: #8DA0B0; font-weight: 600; }
.lb-catfind input::-webkit-search-cancel-button { display: none; }
.lb-catfind:focus-within { box-shadow: 0 0 0 3px var(--ink), 0 7px 0 var(--ink), 0 0 0 9px rgba(74, 184, 230, .4); }
.lb-catfind__x { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.lb-catfind__x svg { width: 18px; height: 18px; }
.lb-catfind__bruno { position: absolute; right: 30px; bottom: calc(100% - 13px); width: 96px; height: auto; pointer-events: none; }
.lb-plats { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.lb-plat { --c1: #0A3F96; --c2: #1F7CE8; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; min-width: 0; min-height: 120px;
  padding: 12px; border-radius: 20px; overflow: hidden; isolation: isolate; color: #fff; text-align: left; background: linear-gradient(140deg, var(--c2), var(--c1) 78%);
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s; }
.lb-plat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: .09; -webkit-mask: var(--hex) 0 0 / 26px auto repeat; mask: var(--hex) 0 0 / 26px auto repeat; }
.lb-plat:hover { transform: translateY(-4px) rotate(-1deg); }
.lb-plat__logo { position: absolute; left: 12px; top: 12px; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 2.5px var(--ink); }
.lb-plat__logo .lg { width: 24px; color: var(--c1); }
.lb-plat__logo svg { width: 22px; height: 22px; color: var(--ink); }
.lb-plat b { max-width: 100%; font: 800 13.5px/1.1 var(--f-display); letter-spacing: -.01em; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.lb-plat small { font-size: 11.5px; font-weight: 700; line-height: 1.2; opacity: .92; }
.lb-plat.is-on { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--honey), 0 10px 0 var(--ink); }
.lb-plat.is-on::after { content: ""; position: absolute; right: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink);
  background: var(--honey) center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313253A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.lb-catsec { padding-block: 44px 96px; }
.lb-cattools { margin-bottom: 18px; }
.lb-cattools__l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.lb-catbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; }
.lb-catbar__r { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.lb-cattools .lb-chip { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.lb-cattools .lb-chip.is-on { background: var(--sky); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 3px 0 var(--ink); }
.lb-chip .lb-chip__flag { width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.lb-chip .lb-chip__ico { width: 17px; height: 17px; }
.lb-sort { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.lb-sort button { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #C7D9E8; white-space: nowrap; }
.lb-sort button.is-on { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 3px 0 var(--ink); }
.lb-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: #C7D9E8; white-space: nowrap; }
.lb-switch i { position: relative; flex: none; width: 44px; height: 26px; border-radius: 99px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16); transition: background .2s; }
.lb-switch i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: translate .25s cubic-bezier(.3, 1.6, .5, 1); }
.lb-switch.is-on { color: #fff; }
.lb-switch.is-on i { background: var(--mint-2); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12); }
.lb-switch.is-on i::after { translate: 18px 0; }
.lb-count { font: 800 13px/1 var(--f-display); letter-spacing: .04em; color: #9FB6C8; text-transform: uppercase; }
.lb-count b { color: #fff; }
.lb-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 24px 30px; border-radius: 28px; background: #fff; color: var(--ink); text-align: center;
  box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.lb-empty img { width: 132px; height: auto; }
.lb-empty b { font: 800 22px/1.15 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; }
.lb-empty p { max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.lb-empty .lb-btn { margin-top: 6px; }
/* как работает сборка: формула из карт */
.lb-promo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; margin-top: 48px; padding: 32px 36px; border-radius: 30px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 85% 0%, #2F6A9A, #13253A 62%); box-shadow: 0 0 0 3px var(--ink), 0 9px 0 var(--ink); color: #fff; }
.lb-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 16px, transparent 16px 32px); }
.lb-promo .lb-t { font-size: 32px; -webkit-text-stroke-width: 6px; text-shadow: 0 4px 0 var(--ink); }
.lb-promo p { margin-top: 12px; max-width: 54ch; font-size: 15.5px; font-weight: 600; line-height: 1.55; color: #C7D9E8; }
.lb-promo .lb-btn { margin-top: 20px; }
.lb-eq { display: flex; align-items: center; gap: 12px; padding-right: 6px; }
.lb-eq .gcard { --rim: 4px; width: 112px; flex: none; box-shadow: 0 0 0 4px #fff, 0 0 0 6.5px var(--ink), 0 10px 0 -2px rgba(0, 0, 0, .3); }
.lb-eq .lb-eq__a { rotate: -7deg; } .lb-eq .lb-eq__b { rotate: 6deg; width: 96px; }
.lb-eq .gcard--sum { width: 150px !important; rotate: -3deg; }
.lb-eq__op { font: 800 30px/1 var(--f-display); color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.lb-eq .gcard__val { font-size: 19cqw; }
.lb-eq .gcard--sum .gcard__val { font-size: 15cqw; }

@container im (max-width: 1240px) {
  .lb-plats { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; grid-template-columns: none; overflow-x: auto; scrollbar-width: none; margin-inline: -24px; padding: 6px 24px 14px; }
  .lb-plats::-webkit-scrollbar { display: none; }
}
@container im (max-width: 1100px) {
  .lb-cathead { grid-template-columns: minmax(0, 1fr); }
  .lb-cathead .lb-t { font-size: 46px; }
  .lb-catfind { margin-top: 56px; }
  .lb-promo { grid-template-columns: minmax(0, 1fr); }
  .lb-eq { justify-content: center; }
}
@container im (max-width: 720px) {
  .lb-cat-hero { padding-block: 16px 30px; }
  .lb-cat-hero .lb-crumbs { margin-bottom: 14px; }
  .lb-cathead { gap: 18px; }
  .lb-cathead .lb-t { font-size: 32px; }
  .lb-catfind { height: 56px; padding-left: 16px; border-radius: 18px; margin-top: 64px; }
  .lb-catfind input { font-size: 16px; }
  .lb-catfind__bruno { width: 80px; right: 18px; }
  .lb-plats { grid-auto-columns: 112px; gap: 12px; margin: 24px -16px 0; padding: 6px 16px 14px; }
  .lb-plat { min-height: 112px; }
  .lb-plat b { font-size: 12.5px; }
  .lb-catsec { padding-block: 36px 64px; }
  .lb-cattools { margin-bottom: 12px; }
  .lb-cattools__l { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 6px; }
  .lb-cattools__l::-webkit-scrollbar { display: none; }
  .lb-catbar { gap: 12px; margin-bottom: 16px; }
  .lb-catbar__r { width: 100%; justify-content: space-between; gap: 10px; }
  .lb-sort button { padding: 0 9px; font-size: 12.5px; }
  .lb-switch { font-size: 12.5px; gap: 8px; }
  .lb-promo { padding: 24px 18px 26px; border-radius: 24px; margin-top: 34px; gap: 22px; }
  .lb-promo .lb-t { font-size: 24px; -webkit-text-stroke-width: 5px; }
  .lb-promo p { font-size: 14.5px; }
  .lb-promo .lb-btn { width: 100%; }
  .lb-eq { gap: 6px; padding: 0; }
  .lb-eq .gcard { width: 76px; --rim: 3px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
  .lb-eq .lb-eq__b { width: 66px; }
  .lb-eq .gcard--sum { width: 104px !important; }
  .lb-eq__op { font-size: 22px; -webkit-text-stroke-width: 5px; }
  .lb-empty { padding: 24px 16px 22px; border-radius: 22px; }
  .lb-empty img { width: 108px; }
  .lb-empty b { font-size: 19px; }
}
@container im (max-width: 370px) {
  .lb-sort button { padding: 0 7px; font-size: 12px; }
}

/* ======================= инвентарь (корзина), оплата и выдача кодов ======================= */
.lb-phead { position: relative; overflow: hidden; isolation: isolate; padding-block: 24px 40px;
  background: radial-gradient(120% 95% at 28% 0%, var(--lb-sky1) 0%, var(--lb-sky2) 42%, var(--lb-sky3) 100%); }
.lb-phead::before { display: none; }
.lb-phead .lb-rays { left: 24%; top: 60%; width: 1300px; }
.lb-phead .lb-crumbs { margin-bottom: 16px; }
.lb-phead .lb-sub { color: #0B2B47; }
.lb-phead::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .3));
  -webkit-mask: var(--hex) 0 0 / 46px auto repeat; mask: var(--hex) 0 0 / 46px auto repeat; pointer-events: none; }
.lb-phead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.lb-phead__art { flex: none; width: 128px; height: auto; margin: -64px 24px -42px 0; filter: drop-shadow(0 8px 0 rgba(13, 30, 48, .18)); }
.lb-cartsec { padding-block: 40px 96px; }
.lb-cart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 28px; align-items: start; }
.lb-cart__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lb-cart__side { position: sticky; top: 98px; }
.lb-cart__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 2px 4px; color: #9FB6C8; font: 800 13px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.lb-cart__h b { color: #fff; }
/* строка инвентаря */
.lb-line { --r1: var(--rar1); --r2: var(--rar2); --r3: var(--rar3); display: grid; grid-template-columns: 150px minmax(0, 1fr) auto 128px 44px; grid-template-areas: "art info qty price x";
  align-items: center; gap: 18px; padding: 12px 14px 12px 12px; border-radius: 24px; color: #fff; background: linear-gradient(180deg, #1B3550, #132A42);
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); animation: lbPop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.lb-line--leg { --r1: var(--leg1); --r2: var(--leg2); --r3: var(--leg3); }
.lb-line--epc { --r1: var(--epc1); --r2: var(--epc2); --r3: var(--epc3); }
.lb-line__art { grid-area: art; position: relative; height: 100px; border-radius: 17px; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 18%, var(--r1), var(--r2) 52%, var(--r3) 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.lb-line__art::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .14) 0 8deg, transparent 8deg 16deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000, transparent 60%); mask: radial-gradient(circle at 50% 50%, #000, transparent 60%); }
.lb-line__art .gcard { width: 104px; --rim: 4px; rotate: -7deg; }
.lb-line__art.is-asm .gcard { position: absolute; width: 82px; --rim: 3.5px; }
.lb-line__art.is-asm .gcard:first-child { left: 10px; top: 16px; rotate: -12deg; }
.lb-line__art.is-asm .gcard:last-child { right: 10px; bottom: 14px; rotate: 9deg; }
.lb-line__art .gcard__val { font-size: 19cqw; }
.lb-line__info { grid-area: info; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.lb-line__info b { font: 800 16px/1.2 var(--f-display); letter-spacing: -.02em; }
.lb-line__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; font-weight: 700; color: #9FB6C8; }
.lb-line__meta > span:not(.lb-line__sum) { display: inline-flex; align-items: center; gap: 6px; }
.lb-line__meta svg { display: inline-block; flex: none; width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.lb-line__sum { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font: 800 14px/1 var(--f-display); }
.lb-line__sum small { font-size: 11px; color: #C7D9E8; }
.lb-line__codes { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--mint); }
.lb-line__codes svg { width: 15px; height: 15px; }
.lb-line__codes.is-asm { color: var(--sky); }
.lb-qty { grid-area: qty; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.lb-qty button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.lb-qty button:hover { background: rgba(255, 255, 255, .12); }
.lb-qty button svg { width: 16px; height: 16px; }
.lb-qty button.is-off { opacity: .35; pointer-events: none; }
.lb-qty b { min-width: 26px; text-align: center; font: 800 16px/1 var(--f-display); }
.lb-line__price { grid-area: price; text-align: right; font: 800 20px/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.lb-line__price small { display: block; margin-top: 6px; font: 700 11.5px/1 var(--f-body); letter-spacing: 0; color: var(--honey); }
.lb-line__x { grid-area: x; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #9FB6C8; background: rgba(255, 255, 255, .06); }
.lb-line__x:hover { color: #fff; background: rgba(255, 90, 90, .25); }
.lb-line__x svg { width: 18px; height: 18px; }
/* Строка подстраивается под ширину списка строк (.lb-lines, контейнер lbl), а не окна: в две колонки (инвентарь и оформление)
   при окне 1100-1300 список уже, чем на планшете, и в одну строку сумма, коды и количество налезали друг на друга.
   До 780 px: две строки, картинка на обе; до 560 px: компактно, как на телефоне. Строки заказа (--ro) без количества: им хватает */
@container lbl (min-width: 561px) and (max-width: 780px) {
  .lb-line:not(.lb-line--ro) { grid-template-columns: 136px minmax(0, 1fr) auto 42px; grid-template-areas: "art info info x" "art qty price price"; gap: 12px 16px; }
  .lb-line:not(.lb-line--ro) .lb-line__art { align-self: stretch; height: auto; min-height: 100px; }
  .lb-line:not(.lb-line--ro) .lb-qty { justify-self: start; }
  .lb-line:not(.lb-line--ro) .lb-line__price { justify-self: end; padding-right: 2px; }
  .lb-line:not(.lb-line--ro) .lb-line__x { align-self: start; }
}
@container lbl (max-width: 560px) {
  .lb-line { grid-template-columns: 96px minmax(0, 1fr) auto 38px; grid-template-areas: "art info info x" "qty qty price price"; gap: 10px 12px; padding: 10px; border-radius: 20px; }
  .lb-line__art { height: 76px; border-radius: 14px; }
  .lb-line__art .gcard { width: 74px; --rim: 3px; }
  .lb-line__art.is-asm .gcard { width: 56px; --rim: 2.5px; }
  .lb-line__art.is-asm .gcard:first-child { left: 6px; top: 12px; } .lb-line__art.is-asm .gcard:last-child { right: 6px; bottom: 10px; }
  .lb-line__info b { font-size: 14px; }
  .lb-line__meta { font-size: 12px; gap: 5px 8px; }
  .lb-line__sum { font-size: 12.5px; padding: 5px 8px; }
  .lb-line__x { width: 38px; height: 38px; align-self: start; }
  .lb-qty { justify-self: start; }
  .lb-line__price { align-self: center; justify-self: end; padding-right: 4px; font-size: 18px; }
}
.lb-cart__note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(74, 184, 230, .1); box-shadow: inset 0 0 0 1.5px rgba(74, 184, 230, .3);
  font-size: 13.5px; font-weight: 600; line-height: 1.5; color: #C7D9E8; }
.lb-cart__note i { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--sky); color: var(--ink); }
.lb-cart__note i svg { width: 17px; height: 17px; }
.lb-cart__note b { color: #fff; }
.lb-recs { margin-top: 18px; }
.lb-recs .lb-cart__h { margin-bottom: 14px; }
.lb-recs .lb-daily { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* оформление */
.lb-checkout { gap: 20px; padding: 24px; }
.lb-checkout .lb-pays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lb-checkout .lb-inp input { font: 700 16px/1 var(--f-body); letter-spacing: 0; }
.lb-fhint { font-size: 12.5px; font-weight: 600; color: var(--mute); }
.lb-bal { display: grid; width: 100%; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--honey-wash); box-shadow: inset 0 0 0 1.5px var(--honey-line); text-align: left; }
.lb-bal img { width: 44px; height: 44px; }
.lb-bal b { display: block; font: 800 15px/1.15 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.lb-bal small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: #7A4D00; }
.lb-tgl { position: relative; width: 48px; height: 28px; border-radius: 99px; background: #D9C7A0; box-shadow: inset 0 0 0 2px rgba(122, 77, 0, .25); transition: background .2s; }
.lb-tgl::after { content: ""; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); transition: translate .25s cubic-bezier(.3, 1.6, .5, 1); }
.lb-bal.is-on .lb-tgl { background: var(--mint-2); }
.lb-bal.is-on .lb-tgl::after { translate: 20px 0; }
.lb-bal.is-off .lb-tgl { opacity: .55; }
.lb-bal small b { display: inline; font: inherit; color: var(--ink); }
.lb-hx { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.lb-hx__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: var(--mute); }
.lb-hx__h b { display: inline-flex; align-items: center; gap: 6px; font: 800 14px/1 var(--f-display); color: var(--ink); }
.lb-hx__h b img { width: 26px; height: 26px; }
.lb-hx__packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lb-hx__packs button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 6px; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); transition: transform .15s, box-shadow .15s; }
.lb-hx__packs button:hover { box-shadow: inset 0 0 0 2px var(--ink); transform: translateY(-2px); }
.lb-hx__packs button.is-off { opacity: .45; pointer-events: none; }
.lb-hx__packs b { font: 800 14px/1 var(--f-display); color: #B26A00; }
.lb-hx__packs button > span { font: 800 12px/1 var(--f-display); color: var(--ink-2); }
.lb-hx__packs em { margin-top: 1px; font: 800 9px/1 var(--f-display); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: var(--mint-ink); }
.lb-hx__ok { font-size: 12.5px; font-weight: 700; color: var(--mint-ink); animation: lbFade .3s both; }
.lb-check__row--minus b { color: var(--mint-ink); }
/* выдача кодов после оплаты */
.lb-done { position: relative; overflow: hidden; isolation: isolate; padding-block: 34px 60px; text-align: center;
  background: radial-gradient(120% 110% at 50% 0%, #FFE38A, #FFC233 42%, #F29E0C 100%); }
.lb-done::before { display: none; }
.lb-done .lb-rays { left: 50%; top: 48%; width: 1400px; }
.lb-done__art { width: 170px; height: auto; margin: 0 auto -6px; animation: lbPop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.lb-done .lb-t { font-size: 54px; }
.lb-done .lb-sub { margin-inline: auto; color: #5A3600; max-width: 56ch; }
.lb-done__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.lb-done__chips > span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: #fff; color: var(--ink); font: 800 13.5px/1 var(--f-display);
  box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); }
.lb-done__chips img { width: 26px; height: 26px; }
.lb-done .coin { position: absolute; width: 46px; font-size: 18px; }
.lb-done__c1 { left: 14%; top: 28%; } .lb-done__c2 { right: 15%; top: 18%; animation-delay: -1.2s !important; } .lb-done__c3 { right: 24%; bottom: 16%; width: 34px !important; font-size: 13px !important; animation-delay: -2s !important; }
.lb-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-items: start; gap: 20px; }
.lb-codecard { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.lb-codecard__top { display: flex; align-items: center; gap: 14px; }
.lb-codecard__top .gcard { flex: none; width: 92px; --rim: 3.5px; rotate: -6deg; }
.lb-codecard__top .gcard__val { font-size: 19cqw; }
.lb-codecard__top > div > b { display: block; font: 800 16px/1.2 var(--f-display); letter-spacing: -.02em; }
.lb-codecard__top > div > small { display: block; margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--mute); }
.lb-code { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.lb-code__v { flex: 1 1 auto; min-width: 0; font: 800 17px/1.3 var(--f-display); letter-spacing: .05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lb-code__v small { display: block; margin-bottom: 5px; font: 700 11px/1 var(--f-body); letter-spacing: .02em; color: var(--mute); }
/* код виден целиком всегда (длинные коды Xbox, Roblox, с PIN): переносится, а не обрезается; одно нажатие выделяет весь код */
.lb-code__v span { display: block; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.lb-code button { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 2px var(--ink); transition: background .15s; }
.lb-code button:hover { background: var(--sky-wash); }
.lb-code button svg { width: 20px; height: 20px; }
.lb-code button.is-ok { background: var(--mint); box-shadow: inset 0 0 0 2px var(--ink); }
.lb-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.lb-done__warn { margin-top: 22px; }
@container im (max-width: 1100px) {
  .lb-cart { grid-template-columns: minmax(0, 1fr); }
  .lb-cart__side { position: static; }
  .lb-checkout .lb-pays { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container im (max-width: 720px) {
  .lb-phead { padding-block: 16px 26px; }
  .lb-phead .lb-t { font-size: 32px; }
  .lb-phead__art { width: 96px; margin: -10px 0 -30px; }
  .lb-cartsec { padding-block: 26px 40px; }
  .lb-cart { gap: 18px; }
  .lb-recs .lb-daily { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lb-recs .lb-daily > :nth-child(3) { display: none; }
  .lb-checkout { padding: 18px 16px; gap: 16px; border-radius: 24px; }
  .lb-checkout .lb-pays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-done { padding-block: 22px 40px; }
  .lb-done__art { width: 120px; }
  .lb-done .lb-t { font-size: 32px; }
  .lb-done .coin { width: 34px; font-size: 13px; }
  .lb-done__c1 { left: 6%; top: 18%; } .lb-done__c2 { right: 6%; top: 12%; } .lb-done__c3 { display: none; }
  .lb-codecard { padding: 14px; border-radius: 22px; }
  .lb-code__v { font-size: 15px; letter-spacing: .03em; }
  .lb-done__actions .lb-btn { width: 100%; }
}

/* ======================= кабинет игрока ======================= */
.lb-pchead { padding-block: 24px 46px; }
.lb-pc { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 24px; }
/* шестиугольник рисуют ::before (обводка) и ::after (заливка), а сам Бруно сверху не обрезан: уши выходят за рамку
   (clip-path на всём блоке срезал их верхними гранями). Снизу картинка по-прежнему по рамке: точки 91,4% и 112,9% это нижние
   грани шестиугольника в координатах картинки (ширина 84%, отступ снизу 14%, пропорции картинки 0,775) */
.lb-pc__ava { position: relative; isolation: isolate; width: 118px; aspect-ratio: .9; display: grid; place-items: end center; }
.lb-pc__ava::before, .lb-pc__ava::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.lb-pc__ava::before { inset: 0; background: var(--ink); }
.lb-pc__ava::after { inset: 5px; background: linear-gradient(180deg, #8FDDFF, #2F98CC); }
.lb-pc__ava img { position: relative; width: 84%; height: auto; margin-bottom: 14%; clip-path: polygon(0 -40%, 100% -40%, 100% 91.4%, 50% 112.9%, 0 91.4%); }
.lb-pc__id .lb-t { font-size: 48px; }
.lb-pc__id p { margin-top: 10px; font-size: 15.5px; font-weight: 700; color: #0B2B47; }
.lb-pc__card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 24px; background: linear-gradient(180deg, #1B3550, #13253A); color: #fff; box-shadow: 0 0 0 3px var(--ink), 0 7px 0 var(--ink); }
.lb-pc__lvl { display: flex; align-items: center; gap: 14px; }
.lb-pc__lvl > div { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; min-width: 0; }
.lb-pc__lvl b { font: 800 17px/1 var(--f-display); letter-spacing: -.01em; }
.lb-pc__lvl small { font-size: 12.5px; font-weight: 700; color: #9FB6C8; }
.lb-pc__lvl small em { font-style: normal; color: var(--honey); }
.lb-pc__res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lb-pc__res > span { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.lb-pc__res b { display: flex; align-items: center; gap: 6px; font: 800 17px/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.lb-pc__res b img { width: 24px; height: 24px; }
.lb-pc__res small { font-size: 11.5px; font-weight: 700; color: #9FB6C8; }
.lb-cabsec { padding-block: 34px 96px; }
.lb-cabsec .lb-tabs { margin-bottom: 24px; }
.lb-cab__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; margin-bottom: 16px; color: #9FB6C8; font-size: 14px; font-weight: 600; }
.lb-cab__h b { font: 800 22px/1.1 var(--f-display); letter-spacing: -.01em; color: #fff; text-transform: uppercase; }
/* заказы */
.lb-orders { display: flex; flex-direction: column; gap: 14px; }
.lb-order { border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 7px 0 var(--ink); overflow: hidden; }
.lb-order__head { width: 100%; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto auto 38px; align-items: center; gap: 16px; padding: 14px 16px; text-align: left; color: var(--ink); }
.lb-order__thumb { position: relative; height: 54px; }
.lb-order__thumb .gcard { position: absolute; width: 58px; --rim: 2.5px; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.lb-order__thumb .gcard:nth-child(1) { left: 0; top: 2px; rotate: -10deg; } .lb-order__thumb .gcard:nth-child(2) { left: 12px; top: 10px; rotate: 6deg; } .lb-order__thumb .gcard:nth-child(3) { left: 18px; top: 4px; rotate: -2deg; }
.lb-order__t { min-width: 0; }
.lb-order__t b { display: block; font: 800 16px/1.15 var(--f-display); letter-spacing: -.02em; }
.lb-src { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 8px; border-radius: 7px; vertical-align: 2px;
  font: 800 10.5px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; background: #E1F3F1; color: #0E6E68; }
.lb-src--ggsel { background: #FFEBDD; color: #A24A06; }
.lb-order__t small { display: block; margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-order__sum { text-align: right; font: 800 18px/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.lb-order__sum small { display: block; margin-top: 5px; font: 700 12px/1 var(--f-body); letter-spacing: 0; color: #B26A00; }
.lb-st { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 10px; font: 800 12px/1 var(--f-display); letter-spacing: .01em; white-space: nowrap; background: var(--mint-wash); color: var(--mint-ink); }
.lb-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.lb-st--wait { background: var(--sky-wash); color: var(--sky-ink); }
.lb-st--wait::before { animation: blink 1.2s steps(2) infinite; }
.lb-order__chev { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); transition: rotate .25s; }
.lb-order__chev svg { width: 18px; height: 18px; rotate: 90deg; }
.lb-order.is-open .lb-order__chev { rotate: 180deg; }
.lb-order__body { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-top: 2px dashed var(--line); animation: lbFade .25s both; }
.lb-order__item { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; align-items: start; }
.lb-order__item > .gcard { width: 86px; --rim: 3px; rotate: -5deg; margin-top: 4px; }
.lb-order__item .gcard__val { font-size: 19cqw; }
.lb-order__codes { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lb-order__codes > b { font: 800 15px/1.2 var(--f-display); letter-spacing: -.02em; }
.lb-order__codes > small { margin-top: -4px; font-size: 13px; font-weight: 600; color: var(--mute); }
.lb-order__wait { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: var(--sky-wash); box-shadow: inset 0 0 0 1.5px var(--sky-soft); font-size: 13px; font-weight: 600; color: var(--sky-ink); }
.lb-order__wait i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin 1s linear infinite; }
.lb-order__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--mute); }
.lb-order__foot nav { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-sbtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; font: 800 12.5px/1 var(--f-display); letter-spacing: .01em; color: var(--ink); background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line); white-space: nowrap; }
.lb-sbtn:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.lb-sbtn svg { width: 16px; height: 16px; }
/* мёд и уровень */
.lb-honeygrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.lb-wcard { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.lb-wcard > h3 { font: 800 18px/1.15 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.lb-wcard > p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.lb-jar { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 20px; background: radial-gradient(130% 120% at 80% 0%, #FFE38A, #FFC233 50%, #F29E0C); box-shadow: inset 0 0 0 2px rgba(122, 77, 0, .2); }
.lb-jar img { width: 74px; height: auto; flex: none; }
.lb-jar b { display: block; font: 800 34px/1 var(--f-display); letter-spacing: -.04em; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.lb-jar small { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: #5A3600; }
.lb-wcard .lb-hx { background: var(--paper); }
.lb-lvls { display: flex; flex-direction: column; gap: 8px; }
.lb-lvls > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.lb-lvls > div.is-me { background: var(--honey-wash); box-shadow: inset 0 0 0 2.5px var(--ink); }
.lb-lvls > div.is-lock { opacity: .62; }
.lb-lvls i { width: 34px; height: 37px; display: grid; place-items: center; background: var(--ink); color: #fff; font: 800 15px/1 var(--f-display); font-style: normal; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.lb-lvls > div.is-got i, .lb-lvls > div.is-me i { background: linear-gradient(180deg, #FFE070, #F29E0C); color: var(--ink); }
.lb-lvls b { display: block; font: 800 14px/1.1 var(--f-display); letter-spacing: -.01em; }
.lb-lvls small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--mute); }
.lb-lvls em { font: 800 14px/1 var(--f-display); font-style: normal; color: #B26A00; white-space: nowrap; }
.lb-ledger { display: flex; flex-direction: column; }
.lb-ledger > div { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1.5px solid var(--line-2); }
.lb-ledger > div:last-child { border-bottom: 0; }
.lb-ledger i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font: 800 16px/1 var(--f-display); font-style: normal; background: var(--honey-wash); color: #B26A00; }
.lb-ledger i.is-rub { background: var(--mint-wash); color: var(--mint-ink); }
.lb-ledger b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.lb-ledger small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--mute); }
.lb-ledger strong { font: 800 15px/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; color: var(--mint-ink); }
.lb-ledger strong.is-minus { color: var(--ink-2); }
/* поддержка */
.lb-sup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 20px; align-items: start; }
.lb-chat { gap: 0; padding: 0; overflow: hidden; }
.lb-chat__head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: linear-gradient(180deg, #E7F5FC, #fff); border-bottom: 2px solid var(--line-2); }
.lb-chat__head img { width: 52px; height: 52px; border-radius: 16px; background: var(--sky-soft); object-fit: cover; object-position: 50% 10%; box-shadow: 0 0 0 2.5px var(--ink); }
.lb-chat__head b { display: block; font: 800 16px/1.1 var(--f-display); }
.lb-chat__head small { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--mute); }
.lb-chat__head small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-2); }
.lb-chat__log { display: flex; flex-direction: column; gap: 10px; padding: 18px; min-height: 300px; background: #fff; }
.lb-msg { max-width: 82%; padding: 11px 14px; border-radius: 18px 18px 18px 6px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; line-height: 1.5; color: var(--ink); animation: lbPop .3s both; }
.lb-msg small { display: block; margin-bottom: 4px; font: 800 11px/1 var(--f-display); letter-spacing: .03em; color: var(--sky-ink); text-transform: uppercase; }
.lb-msg--me { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--sky-wash); box-shadow: inset 0 0 0 1.5px var(--sky-soft); }
.lb-msg--me small { color: var(--ink-2); }
.lb-msg--staff { background: var(--mint-wash); box-shadow: inset 0 0 0 1.5px #BDEBD1; }
.lb-msg--staff small { color: var(--mint-ink); }
.lb-chat__quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; background: #fff; }
.lb-chat__form { display: flex; gap: 10px; padding: 14px 18px 18px; background: #fff; border-top: 2px solid var(--line-2); }
.lb-chat__form .lb-inp { flex: 1 1 auto; height: 50px; }
.lb-chat__form .lb-inp input { font: 600 15px/1 var(--f-body); letter-spacing: 0; }
.lb-chat__form .lb-btn { flex: none; height: 50px; }
.lb-tks { display: flex; flex-direction: column; gap: 10px; }
.lb-tk { display: flex; flex-direction: column; gap: 7px; padding: 14px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); text-align: left; }
.lb-tk.is-on { background: #fff; box-shadow: inset 0 0 0 2.5px var(--ink); }
.lb-tk b { font: 800 14px/1.2 var(--f-display); letter-spacing: -.01em; }
.lb-tk small { font-size: 12.5px; font-weight: 600; color: var(--mute); }
/* профиль и безопасность */
.lb-prof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.lb-prof .lb-inp input { font: 700 16px/1 var(--f-body); letter-spacing: 0; }
.lb-optrow { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1.5px solid var(--line-2); text-align: left; }
.lb-optrow:last-child { border-bottom: 0; }
.lb-optrow b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.lb-optrow small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--mute); }
.lb-optrow .lb-tgl { background: #C9D6DF; box-shadow: inset 0 0 0 2px rgba(19, 37, 58, .15); }
.lb-optrow.is-on .lb-tgl { background: var(--mint-2); }
.lb-optrow.is-on .lb-tgl::after { translate: 20px 0; }
.lb-sess { display: flex; flex-direction: column; gap: 8px; }
.lb-sess > div { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.lb-sess i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.lb-sess i svg { width: 20px; height: 20px; }
.lb-sess b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.lb-sess small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--mute); }
.lb-sess em { font: 800 11px/1 var(--f-display); font-style: normal; letter-spacing: .03em; text-transform: uppercase; color: var(--mint-ink); }
.lb-sess button { font: 800 12px/1 var(--f-display); color: #C2412F; padding: 9px 10px; border-radius: 10px; }
.lb-sess button:hover { background: #FDECEA; }
.lb-wcard .lb-btn--danger { background: linear-gradient(180deg, #FF9A8A, #E5483A); }
@container im (max-width: 1100px) {
  .lb-pc { grid-template-columns: auto minmax(0, 1fr); }
  .lb-pc__card { grid-column: 1 / -1; }
  .lb-honeygrid, .lb-sup, .lb-prof { grid-template-columns: minmax(0, 1fr); }
}
@container im (max-width: 720px) {
  .lb-pchead { padding-block: 16px 28px; }
  .lb-pc { gap: 14px 16px; }
  .lb-pc__ava { width: 78px; }
  .lb-pc__id .lb-t { font-size: 30px; }
  .lb-pc__id p { font-size: 13px; margin-top: 6px; }
  .lb-pc__card { padding: 14px; border-radius: 20px; }
  .lb-pc__res b { font-size: 15px; } .lb-pc__res b img { width: 20px; height: 20px; }
  .lb-pc__res > span { padding: 9px 10px; }
  .lb-cabsec { padding-block: 22px 48px; }
  .lb-cab__h b { font-size: 18px; }
  .lb-order__head { grid-template-columns: 58px minmax(0, 1fr) auto 34px; grid-template-areas: "th t t chev" "st st sum sum"; gap: 10px 12px; padding: 12px; }
  .lb-order__thumb { grid-area: th; height: 46px; } .lb-order__thumb .gcard { width: 46px; }
  .lb-order__t { grid-area: t; } .lb-order__t b { font-size: 14px; }
  .lb-order__head .lb-st { grid-area: st; justify-self: start; }
  .lb-order__sum { grid-area: sum; justify-self: end; font-size: 16px; }
  .lb-order__chev { grid-area: chev; width: 34px; height: 34px; }
  .lb-order__body { padding: 12px; }
  .lb-order__item { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .lb-order__item > .gcard { width: 64px; --rim: 2.5px; }
  .lb-wcard { padding: 16px; border-radius: 22px; }
  .lb-jar b { font-size: 28px; }
  .lb-chat__log { padding: 14px; min-height: 0; }
  .lb-msg { max-width: 90%; }
  .lb-chat__quick { padding: 0 14px 12px; }
  .lb-chat__form { padding: 12px 14px 14px; }
  .lb-chat__form .lb-btn { padding: 0 14px; }
}

/* ======================= наличие: купить можно только то, что есть на складе ======================= */
.lb-slot.is-out { pointer-events: none; background: repeating-linear-gradient(135deg, #EEF3F6 0 8px, #E4EBF0 8px 16px); box-shadow: inset 0 0 0 2px var(--line); }
.lb-slot.is-out b, .lb-slot.is-out > span { color: #9AAAB7; }
.lb-slot.is-out em { background: #9AAAB7; }
/* нет в наличии: карта остаётся в цвете своей платформы, как в каталоге; о наличии говорят плашка и номиналы */
.lb-craft__near { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.lb-out { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink-2); }
.lb-out b { color: var(--ink); }
.lb-out i { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #9AAAB7; color: #fff; font: 800 17px/1 var(--f-display); font-style: normal; }
.lb-hold { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--mute); }
.lb-hold svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--sky-ink); }

/* ---------- информационные страницы (info.py): оплата, доставка, гарантии, о нас, контакты, отзывы, как купить, документы ----------
   Классы ниже можно ставить в HTML страницы в пульте: ip-card, ip-grid, ip-note, ip-faq, ip-kv, ip-split, ip-btns, ip-stats, ip-chips. */
.lb-ipsec { padding-block: 40px 96px; }
.ip { display: flex; flex-direction: column; gap: 22px; max-width: 1120px; margin-inline: auto; color: #fff; }
.ip > h2, .ip-sec > h2 { margin-top: 14px; font: 800 26px/1.15 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.ip > h3 { font: 800 19px/1.2 var(--f-display); letter-spacing: -.01em; color: #fff; }
.ip > p, .ip > ul, .ip > ol, .ip-sec > p { max-width: 74ch; font-size: 16px; line-height: 1.6; color: #C7D9E8; }
.ip > ul, .ip > ol, .ip-card ul, .ip-card ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.ip > ul, .ip-card ul { list-style: disc; } .ip > ol, .ip-card ol { list-style: decimal; }
.ip a:not(.lb-btn) { color: var(--sky); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ip a:not(.lb-btn):hover { color: #8FDDFF; }
.ip strong, .ip b { font-weight: 800; }
.ip hr { border: 0; height: 2px; background: rgba(199, 217, 232, .18); margin: 6px 0; }
.ip > img, .ip > p img, .ip figure img, .ip-card > img, .ip-card p img { max-width: 100%; height: auto; }
.ip blockquote { margin: 0; padding: 16px 20px; border-radius: 18px; background: rgba(74, 184, 230, .12); box-shadow: inset 4px 0 0 var(--sky); color: #E3EFF7; font-size: 15px; line-height: 1.55; }
.ip table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink); font-size: 14.5px; }
.ip th, .ip td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1.5px solid var(--line-2); }
.ip th { font: 800 13px/1.2 var(--f-display); letter-spacing: .02em; text-transform: uppercase; background: var(--sky-wash); }
.ip tr:last-child td { border-bottom: 0; }

/* белая карточка с обводкой, как в кабинете */
.ip-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px; border-radius: 26px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.ip-card > h3, .ip-card > h2 { font: 800 20px/1.15 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-transform: none; margin: 0; }
.ip-card p, .ip-card li { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ip-card a:not(.lb-btn) { color: var(--sky-ink); }
.ip-card__ico { flex: none; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: 18px; background: var(--sky-wash); box-shadow: inset 0 0 0 2.5px var(--ink); }
.ip-card__ico img { width: 46px; height: 46px; object-fit: contain; }
.ip-card--mint .ip-card__ico { background: var(--mint-wash); } .ip-card--honey .ip-card__ico { background: var(--honey-wash); } .ip-card--coral .ip-card__ico { background: var(--coral-wash); }
.ip-card--wide { grid-column: 1 / -1; }
.ip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ip-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ip-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* выделенный абзац: info (голубой), ok (мятный), warn (мёд), bad (коралл) */
.ip-note { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; background: var(--sky-wash); color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); font-size: 15px; line-height: 1.55; }
.ip-note::before { content: "i"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sky); color: #fff;
  font: 800 16px/1 var(--f-display); box-shadow: 0 0 0 2px var(--ink); }
.ip-note--ok { background: var(--mint-wash); } .ip-note--ok::before { content: "✓"; background: var(--mint-2); }
.ip-note--warn { background: var(--honey-wash); } .ip-note--warn::before { content: "!"; background: var(--honey-2); }
.ip-note--bad { background: var(--coral-wash); } .ip-note--bad::before { content: "!"; background: var(--coral-2); }
.ip-note p { color: var(--ink); } .ip-note a:not(.lb-btn) { color: var(--sky-ink); }

/* вопрос-ответ */
.ip-faq { display: flex; flex-direction: column; gap: 12px; }
.ip-faq details { border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); }
.ip-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none;
  font: 800 16px/1.3 var(--f-display); letter-spacing: -.01em; }
.ip-faq summary::-webkit-details-marker { display: none; }
.ip-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--sky-wash);
  box-shadow: inset 0 0 0 2px var(--ink); font: 800 18px/1 var(--f-display); transition: rotate .25s; }
.ip-faq details[open] summary::after { rotate: 45deg; }
.ip-faq details > :not(summary) { padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* «ключ: значение» (контакты, реквизиты) */
.ip-kv { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 0; border-radius: 20px; overflow: hidden; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); }
.ip-kv > dt, .ip-kv > dd { padding: 14px 18px; border-bottom: 1.5px solid var(--line-2); font-size: 15px; line-height: 1.5; }
.ip-kv > dt { font-weight: 800; color: var(--ink); background: var(--paper); }
.ip-kv > dd { color: var(--ink-2); }
.ip-kv > dt:nth-last-of-type(1), .ip-kv > dd:last-child { border-bottom: 0; }

/* текст и картинка рядом */
.ip-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 28px; align-items: center; }
.ip-split > img, .ip-split > figure img { width: 100%; max-width: 300px; justify-self: center; filter: drop-shadow(0 10px 0 rgba(5, 14, 25, .35)); }
.ip-split > div { display: flex; flex-direction: column; gap: 14px; }
.ip-split > div > p { font-size: 16px; line-height: 1.6; color: #C7D9E8; }
.ip-split > div > h2 { font: 800 26px/1.15 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.ip-btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ip-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ip-chips > span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--sky-wash); color: var(--ink);
  font: 700 13px/1 var(--f-display); box-shadow: inset 0 0 0 2px var(--ink); }

/* цифры */
.ip-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ip-stats > div { padding: 20px 22px; border-radius: 22px; background: linear-gradient(180deg, #FFE070, #FFC233); color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 7px 0 var(--ink); }
.ip-stats b { display: block; font: 800 34px/1 var(--f-display); letter-spacing: -.02em; }
.ip-stats span { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.35; color: #4F3500; }

/* отзывы (живой блок) */
.ip-reviews { display: flex; flex-direction: column; gap: 22px; }
.ip-rv__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.ip-rv__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ip-rv__sum > b { font: 800 54px/1 var(--f-display); color: #fff; letter-spacing: -.02em; }
.ip-rv__sum > span { font-size: 15px; font-weight: 700; color: #C7D9E8; }
.ip-stars { display: inline-flex; gap: 3px; }
.ip-stars i { width: 20px; height: 20px; background: rgba(199, 217, 232, .25);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ip-stars i.on { background: var(--honey); }
.ip-srcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.ip-src { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 20px; background: #fff; color: var(--ink) !important; text-decoration: none !important;
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); transition: transform .2s; }
.ip-src:hover { transform: translateY(-3px); }
.ip-src b { font: 800 16px/1.2 var(--f-display); }
.ip-src__r { display: flex; align-items: center; gap: 8px; font: 800 22px/1 var(--f-display); }
.ip-src__r .ip-stars i { width: 16px; height: 16px; background: var(--line); } .ip-src__r .ip-stars i.on { background: var(--honey); }
.ip-src small { font-size: 13px; font-weight: 600; color: var(--mute); }
.ip-src--g { box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), inset 0 5px 0 #4285F4; }
.ip-src--ya { box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), inset 0 5px 0 #FC3F1D; }
.ip-src--vk { box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), inset 0 5px 0 #0077FF; }
.ip-rvs { columns: 3 260px; column-gap: 18px; }
.ip-rv { break-inside: avoid; margin: 0 0 18px; display: block; padding: 18px 20px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); }
.ip-rv blockquote { padding: 0; background: none; box-shadow: none; color: var(--ink); font-size: 15px; line-height: 1.55; }
.ip-rv figcaption { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center; margin-top: 14px; }
.ip-rv__av { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--sky-wash); box-shadow: inset 0 0 0 2px var(--ink);
  font: 800 15px/1 var(--f-display); color: var(--ink); }
.ip-rv__av--vk { background: #DCEBFF; } .ip-rv__av--g { background: #E3F1E7; } .ip-rv__av--ya { background: #FFE5DE; }
.ip-rv figcaption b { font-size: 14px; font-weight: 800; }
.ip-rv figcaption small { font-size: 12.5px; color: var(--mute); }
.ip-rv figcaption a { color: var(--sky-ink) !important; }

/* как активировать (живой блок) */
.ip-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.ip-act { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.ip-act__h { display: flex; align-items: center; gap: 12px; }
.ip-act__h .lg { width: 40px; height: 40px; border-radius: 12px; background-color: var(--ink); }
.ip-act__h h3 { font: 800 19px/1.15 var(--f-display); letter-spacing: -.01em; }
.ip-act ol { display: flex; flex-direction: column; gap: 8px; padding-left: 1.3em; list-style: decimal; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ip-act ol a { color: var(--sky-ink) !important; word-break: break-word; }
.ip-act__go { margin-top: auto; align-self: flex-start; font: 800 13.5px/1 var(--f-display); color: var(--sky-ink) !important; }

/* видео */
.ip-video { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #050E19; box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
.ip-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* документы внутри белой карточки */
.ip--doc { color: var(--ink); gap: 12px; }
.ip--doc > p, .ip--doc > ul, .ip--doc > ol, .ip--doc li { color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: none; }
.ip--doc > h2 { margin-top: 12px; font: 800 18px/1.25 var(--f-display); text-transform: none; color: var(--ink); }
.ip--doc > h3 { color: var(--ink); font-size: 16px; }
.ip--doc a:not(.lb-btn) { color: var(--sky-ink); }

/* предпросмотр из пульта */
.ip-preview { position: sticky; top: 0; z-index: 50; padding: 10px 16px; background: var(--honey); color: var(--ink); text-align: center; font-size: 14px; font-weight: 700;
  box-shadow: 0 3px 0 var(--ink); }

/* окно документа (оферта, политика) */
.lb-docdlg { width: min(860px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; border: 0; border-radius: 26px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 10px 0 var(--ink); overflow: hidden; }
.lb-docdlg::backdrop { background: rgba(5, 14, 25, .62); backdrop-filter: blur(3px); }
.lb-docdlg[open] { display: flex; flex-direction: column; animation: lbPop .25s both; }
.lb-docdlg__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 2px solid var(--line-2);
  background: linear-gradient(180deg, #E7F5FC, #fff); }
.lb-docdlg__head h2 { font: 800 19px/1.2 var(--f-display); letter-spacing: -.01em; }
.lb-docdlg__x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer;
  box-shadow: inset 0 0 0 2.5px var(--ink); font: 800 20px/1 var(--f-display); }
.lb-docdlg__body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 24px; }
.lb-docdlg__body.ip--doc { display: flex; }
.lb-docdlg__foot { display: flex; justify-content: flex-end; padding: 12px 22px 16px; border-top: 2px solid var(--line-2); }
.lb-docdlg__foot a { font: 700 13.5px/1 var(--f-display); color: var(--sky-ink); }

@container im (max-width: 1080px) {
  .ip-grid, .ip-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container im (max-width: 720px) {
  .lb-ipsec { padding-block: 26px 64px; }
  .ip { gap: 18px; }
  .ip > h2, .ip-sec > h2, .ip-split > div > h2 { font-size: 21px; }
  .ip > p, .ip > ul, .ip > ol { font-size: 15px; }
  .ip-grid, .ip-grid--2, .ip-grid--4, .ip-stats { grid-template-columns: minmax(0, 1fr); }
  .ip-card { padding: 18px; border-radius: 22px; }
  .ip-split { grid-template-columns: minmax(0, 1fr); }
  .ip-split > img { max-width: 200px; }
  .ip-kv { grid-template-columns: minmax(0, 1fr); }
  .ip-kv > dt { border-bottom: 0; padding-bottom: 4px; }
  .ip-kv > dd { padding-top: 0; }
  .ip-rv__sum > b { font-size: 42px; }
  .ip-acts { grid-template-columns: minmax(0, 1fr); }
  .lb-docdlg { width: calc(100vw - 16px); max-height: 92vh; border-radius: 22px; }
  .lb-docdlg__head, .lb-docdlg__body { padding-inline: 16px; }
}

/* ---------- обращения в поддержку (кабинет, вкладка «Поддержка», support.js) ---------- */
.lb-tk__main { min-height: 420px; }
.lb-tk__view { display: flex; flex-direction: column; }
.lb-tk__view[hidden] { display: none; }
.lb-tk__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 2px solid var(--line-2); background: #fff; }
.lb-tk__bar > b { font: 800 16px/1.15 var(--f-display); letter-spacing: -.01em; }
.lb-tk__items { display: flex; flex-direction: column; background: #fff; }
.lb-tk__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; width: 100%; padding: 14px 18px 14px 26px; border: 0;
  border-bottom: 1.5px solid var(--line-2); background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.lb-tk__item:hover { background: var(--paper); }
.lb-tk__item.is-new { background: var(--sky-wash); }
.lb-tk__dot { position: absolute; left: 10px; top: 21px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral-2); box-shadow: 0 0 0 2px #fff; }
.lb-tk__it { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lb-tk__it b { font: 800 15px/1.25 var(--f-display); letter-spacing: -.01em; }
.lb-tk__it small { font-size: 12.5px; font-weight: 600; color: var(--mute); }
.lb-tk__prev { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; color: var(--ink-2); }
.lb-tk__empty { display: flex; flex-direction: column; gap: 8px; padding: 28px 22px; background: #fff; }
.lb-tk__empty b { font: 800 18px/1.15 var(--f-display); text-transform: uppercase; }
.lb-tk__empty p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.lb-tk__err { margin: 10px 18px; padding: 10px 14px; border-radius: 12px; background: var(--coral-wash); color: #8A2318; font-size: 14px; font-weight: 700; }
.lb-tk__form { gap: 16px; padding-bottom: 20px; background: #fff; }
.lb-tk__form > .lb-blk, .lb-tk__form > fieldset, .lb-tk__form > .lb-btn, .lb-tk__form > .lb-tk__err { margin-inline: 18px; }
.lb-tk__form > .lb-btn { width: auto; }
.lb-tk__topics { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; min-width: 0; }
.lb-tk__topics legend { margin-bottom: 10px; font: 800 16px/1.1 var(--f-display); letter-spacing: -.02em; }
.lb-tk__topic input { position: absolute; opacity: 0; pointer-events: none; }
.lb-tk__topic span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 12px; background: var(--paper); color: var(--ink); cursor: pointer;
  font: 700 13px/1 var(--f-display); box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .15s, background .15s; }
.lb-tk__topic input:checked + span { background: var(--sky-wash); box-shadow: inset 0 0 0 2.5px var(--ink); }
.lb-tk__topic input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.lb-blk__h small { font-size: 12.5px; font-weight: 600; color: var(--mute); }
.lb-inp--area { height: auto; align-items: stretch; }
.lb-inp--area textarea { flex: 1 1 auto; min-width: 0; min-height: 52px; border: 0; outline: 0; resize: vertical; padding: 13px 16px; background: none; color: var(--ink);
  font: 600 15px/1.5 var(--f-body); }
.lb-inp--area textarea::placeholder { color: #8DA0B0; }
.lb-inp--sel select { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0 14px; background: none; color: var(--ink); font: 600 15px/1 var(--f-body); }
.lb-tk__title { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 4px; background: #fff; }
.lb-tk__title b { font: 800 18px/1.2 var(--f-display); letter-spacing: -.01em; }
.lb-tk__title small { font-size: 12.5px; font-weight: 600; color: var(--mute); }
.lb-tk__log { max-height: 520px; min-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.lb-msg__t { white-space: pre-wrap; word-break: break-word; }
.lb-msg__at { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--mute); }
.lb-msg--sys { align-self: center; max-width: 92%; background: none; box-shadow: none; text-align: center; color: var(--mute); font-size: 13px; }
.lb-msg--sys small { display: none; }
.lb-tk__reply { align-items: flex-end; }
.lb-tk__reply .lb-inp--area { flex: 1 1 auto; }
.lb-tk__tools { display: flex; justify-content: flex-end; padding: 0 18px 16px; background: #fff; }
.lb-tk__side .lb-tk__tips { display: flex; flex-direction: column; gap: 8px; padding-left: 1.2em; list-style: disc; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lb-tab { position: relative; }
.lb-tab__dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral-2); box-shadow: 0 0 0 2px #fff; }
@container im (max-width: 720px) {
  .lb-tk__bar { padding: 12px 14px; flex-wrap: wrap; }
  .lb-tk__item { padding: 12px 14px 12px 24px; grid-template-columns: minmax(0, 1fr); }
  .lb-tk__form > .lb-blk, .lb-tk__form > fieldset, .lb-tk__form > .lb-btn, .lb-tk__form > .lb-tk__err { margin-inline: 14px; }
  .lb-tk__log { max-height: 60vh; }
}
.ip-card__ico--txt { font: 800 15px/1 var(--f-display); letter-spacing: -.01em; color: var(--ink); text-align: center; }

/* ИгроМагаз · витрина: правки к дизайну «Лобби» для живого сайта. Подключается последним, после im.css, lobby.css, lb-pages.css.
   Шрифты свои (никаких внешних запросов), цвета карт, города на островах, полоски уровня и цифры счётчика заданы классами:
   в дизайне это были inline-стили, их не пускает строгий CSP. Атрибут hidden сильнее любого display. */

@font-face { font-family: "Unbounded"; font-weight: 200 900; font-display: swap; src: url(/s/fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 200 900; font-display: swap; src: url(/s/fonts/unbounded-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url(/s/fonts/onest-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url(/s/fonts/onest-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #0F2236; }
.im [hidden] { display: none !important; }
.im { min-height: 100vh; }

/* ---------- палитры подарочных карт, плиток и логотипов (вместо style="--c1:…;--c2:…;--lg:…") ---------- */
.pf-ps { --c1: #0A3F96; --c2: #1F7CE8; --c: #0070D1; --lg: var(--lg-ps); }
.pf-xbox { --c1: #0B5E0B; --c2: #2FA12F; --c: #107C10; --lg: var(--lg-xbox); }
.pf-nin { --c1: #B5000E; --c2: #FF3344; --c: #E60012; --lg: var(--lg-nin); }
/* Apple: светло-фиолетовые подарочные карты (как у самой Apple), логотип на белом темнее, чтобы читался */
.pf-apple { --c1: #8466EE; --c2: #CDBFFF; --c: #7558E0; --lg: var(--lg-apple); }
.pf-steam { --c1: #0E1A2B; --c2: #2A5A85; --c: #1B2838; --lg: var(--lg-steam); }
.pf-rbx { --c1: #1A1A1A; --c2: #5A5F6B; --c: #1D1D1F; --lg: var(--lg-rbx); }
.pf-val { --c1: #C21F33; --c2: #FF5E6E; --c: #FA4454; --lg: var(--lg-val); }
.pf-fn { --c1: #2B1D5C; --c2: #7B5CF0; --c: #2B1D5C; --lg: var(--lg-fn); }
.pf-pad { --c1: #24384F; --c2: #55779E; --c: #24384F; --lg: var(--lg-pad); }
/* игры без своей плитки: фирменные цвета вместо общей серо-синей карты */
.pf-lol { --c1: #091428; --c2: #1D4E78; --c: #A47A2C; --lg: var(--lg-lol); }
.pf-apex { --c1: #8E1116; --c2: #F0443A; --c: #DA292A; --lg: var(--lg-apex); }
.pf-blz { --c1: #07183A; --c2: #1AA7FF; --c: #148EFF; --lg: var(--lg-blz); }
/* World of Warcraft: логотип Battle.net (цветной значок WoW маской не рисуется, он из градиентов) */
.pf-wow { --c1: #5A2C05; --c2: #F2A93B; --c: #B8700F; --lg: var(--lg-blz); }
/* League of Legends: тёмно-синяя карта с золотом */
.gcard.pf-lol .gcard__logo { background: #C8AA6E; }
.gcard.pf-lol .gcard__val { color: #F0E6D2; }
.pf-all { --c1: #13253A; --c2: #2F5B86; --c: #13253A; }
.lb-ititle__kick[class*="pf-"] .lg { color: var(--c); }
.lb-panel[class*="pf-"] .lb-mini { background: linear-gradient(140deg, var(--c2), var(--c1)); }

/* ---------- города регионов на островах (вместо style="--lm:var(--lm-tr)") ---------- */
.lm-tr { --lm: var(--lm-tr); } .lm-in { --lm: var(--lm-in); } .lm-pl { --lm: var(--lm-pl); } .lm-gb { --lm: var(--lm-gb); }
.lm-us { --lm: var(--lm-us); } .lm-eu { --lm: var(--lm-eu); } .lm-ru { --lm: var(--lm-ru); } .lm-kz { --lm: var(--lm-kz); }
.lm-none { --lm: none; }

/* ---------- острова на карте регионов, узлы медовой дороги, полоски уровня ---------- */
.lb-isl--tr { left: 12%; top: 64%; } .lb-isl--in { left: 31%; top: 37%; } .lb-isl--pl { left: 50%; top: 65%; }
.lb-isl--gb { left: 69%; top: 38%; } .lb-isl--us { left: 88%; top: 64%; }
.lb-isl:disabled { cursor: default; }
.lb-node--1 { left: 4%; } .lb-node--2 { left: 35%; } .lb-node--3 { left: 66%; } .lb-node--4 { left: 96%; }
.fill-start { --fill: 4%; }
.lb-me--start { left: 4%; }
.xp-0 { --xp: 0%; } .xp-100 { --xp: 100%; }

/* ---------- счётчик-барабан: цифра и задержка классами (вместо style="transform…; transition-delay…") ---------- */
.odo__s.d0 { transform: translateY(0); } .odo__s.d1 { transform: translateY(-1em); } .odo__s.d2 { transform: translateY(-2em); }
.odo__s.d3 { transform: translateY(-3em); } .odo__s.d4 { transform: translateY(-4em); } .odo__s.d5 { transform: translateY(-5em); }
.odo__s.d6 { transform: translateY(-6em); } .odo__s.d7 { transform: translateY(-7em); } .odo__s.d8 { transform: translateY(-8em); }
.odo__s.d9 { transform: translateY(-9em); }
.odo__s.dl1 { transition-delay: 50ms; animation-delay: 50ms; } .odo__s.dl2 { transition-delay: 100ms; animation-delay: 100ms; }
.odo__s.dl3 { transition-delay: 150ms; animation-delay: 150ms; } .odo__s.dl4 { transition-delay: 200ms; animation-delay: 200ms; }
.odo__s.dl5 { transition-delay: 250ms; animation-delay: 250ms; } .odo__s.dl6 { transition-delay: 300ms; animation-delay: 300ms; }
.odo__s.dl7 { transition-delay: 350ms; animation-delay: 350ms; }

/* ---------- шапка гостя: вместо уровня вход в кабинет ---------- */
.lb-lvl__hex > svg { position: relative; width: 22px; height: 22px; color: var(--ink); }
.lb-lvl--guest .lb-lvl__t { min-width: 0; }
@container im (max-width: 720px) { .lb-lvl__hex > svg { width: 18px; height: 18px; } }

/* ---------- карточки товара: название заголовком (для поиска), выглядит как в дизайне ---------- */
.lb-item__bar .lb-item__t { margin: 0; font: 800 14px/1.2 var(--f-display); letter-spacing: -.02em; }
@container im (max-width: 720px) { .lb-item__bar .lb-item__t { font-size: 12.5px; } }
.lb-item[hidden] { display: none !important; }

/* ---------- страница товара: количество, шаги активации текстом, ссылки в тексте ---------- */
/* блоки «можно купить» и «нельзя» в дизайне лежат прямо в панели: обёртки держат тот же шаг, что и панель */
.lb-panel > [data-buy], .lb-panel > [data-cant] { display: flex; flex-direction: column; gap: inherit; }
/* на планшете и телефоне камни под островом заходят на панель: панель выше, номиналы и подписи не закрыты */
.lb-panel[data-panel-buy] { z-index: 2; }
.lb-qtyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; font-weight: 700; color: var(--mute); }
.lb-qtyrow small { font-size: 12.5px; font-weight: 700; color: var(--mute); }
.lb-qty--light { background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.lb-qty--light button { color: var(--ink); }
.lb-qty--light button:hover { background: #fff; }
.lb-qty--light b { color: var(--ink); }
.lb-tut--txt { align-items: start; }
.lb-step--txt { gap: 10px; }
.lb-step--txt p { overflow-wrap: anywhere; }
.lb-link { color: var(--sky-ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lb-link:hover { color: var(--sky-2); }
.lb-warn .lb-link { color: var(--sky-ink); }
.lb-doc--one { grid-template-columns: minmax(0, 1fr); }
.lb-doc--one .lb-doc__card { max-width: 900px; }
.lb-craft__parts { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.drawer__panel:focus { outline: none; }
/* в ящике «добавлено» правила для подписи (b, small) задевали сумму на карте: возвращаем карте её вид */
.lb-drawer__item .gcard .gcard__val { display: flex; font: 800 17cqw/.85 var(--f-display); letter-spacing: -.05em; -webkit-text-stroke: 0; }
.lb-drawer__item .gcard .gcard__val--5 { font-size: 13.5cqw; }
.lb-drawer__item .gcard .gcard__val small { display: inline; margin: 0; font-size: .38em; opacity: .9; }
@container im (max-width: 720px) {
  .lb-page .lb-step--txt { display: flex; flex-direction: column; gap: 8px; }
  .lb-qtyrow > span:first-child { display: none; }
}

/* ---------- инвентарь: строки, недоступная строка, честная плашка про оплату ---------- */
.lb-lines { container: lbl / inline-size; display: flex; flex-direction: column; gap: 14px; }   /* по его ширине раскладка строки (lb-pages.css) */
.lb-line.is-bad .lb-line__art { filter: grayscale(1) brightness(.92); }
.lb-line.is-bad .lb-line__codes { color: #9FB6C8; }
.lb-line__bad { font-size: 12.5px; font-weight: 700; line-height: 1.35; color: #FFB4A8; }
.lb-paynote { display: flex; gap: 12px; padding: 13px 14px; border-radius: 16px; background: var(--sky-wash); box-shadow: inset 0 0 0 1.5px var(--sky-soft);
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.lb-paynote b { color: var(--ink); }
.lb-paynote i { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--sky-ink); box-shadow: 0 0 0 2px var(--sky-soft); }
.lb-paynote i svg { width: 17px; height: 17px; }
.lb-bal.is-off { cursor: default; }
.lb-bal.is-off b { color: var(--ink-2); }

/* ---------- кабинет: что в нём будет ---------- */
.lb-soons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lb-soon { position: relative; overflow: hidden; }
.lb-soon__art { width: 86px; height: 96px; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 6px 0 rgba(19, 37, 58, .12)); }
.lb-soon p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.lb-soon__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
@container im (max-width: 1100px) { .lb-soons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container im (max-width: 720px) {
  .lb-soons { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lb-soon { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; }
  .lb-soon__art { grid-row: span 2; width: 64px; height: 72px; }
  .lb-soon__cta .lb-btn { width: 100%; }
}

/* ---------- 404 и текст раздела ---------- */
.lb-empty--404 { margin-bottom: 44px; }
.lb-empty__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.lb-head--more { margin-bottom: 22px; }
.lb-seo { margin-top: 48px; }
.lb-seo .lb-doc__card p + p { margin-top: 10px; }

/* ---------- подвал: документы пока без страниц ---------- */
.im-foot__bot nav span { color: #8FA7BA; }

/* ---------- длинные H1 из SEO-полей базы: мельче, пропорции дизайна сохраняются ---------- */
.lb-ititle__h--l { font-size: 46px; }
.lb-ititle__h--xl { font-size: 38px; -webkit-text-stroke-width: 7px; }
.lb-cathead .lb-t--l { font-size: 46px; }
.lb-cathead .lb-t--xl { font-size: 38px; -webkit-text-stroke-width: 7px; }
@container im (max-width: 1240px) { .lb-ititle__h--l { font-size: 40px; } .lb-ititle__h--xl { font-size: 34px; } }
@container im (max-width: 1100px) { .lb-cathead .lb-t--l { font-size: 40px; } .lb-cathead .lb-t--xl { font-size: 34px; } }
@container im (max-width: 720px) {
  .lb-ititle__h--l, .lb-cathead .lb-t--l { font-size: 28px; -webkit-text-stroke-width: 5px; }
  .lb-ititle__h--xl, .lb-cathead .lb-t--xl { font-size: 25px; -webkit-text-stroke-width: 5px; }
}

/* ---------- поля ввода: рамка фокуса скруглённая (focus-within у обёртки), без второй прямоугольной ---------- */
.im .lb-inp input:focus-visible, .im .lb-catfind input:focus-visible, .im .lb-find input:focus-visible { outline: none; }
/* кнопка оплаты, пока оплата не подключена: длинная надпись помещается */
.lb-btn--xl.lb-btn--wait { font-size: 17px; -webkit-text-stroke-width: 4px; }
@container im (max-width: 720px) { .lb-btn--xl.lb-btn--wait { font-size: 15px; -webkit-text-stroke-width: 3.5px; } }

/* ---------- страница пополнения Steam: проверка логина, валюта без курса, заметка об оплате ---------- */
.lb-lst { display: flex; align-items: center; gap: 8px; margin: 8px 2px 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--mute); }
.lb-lst.is-ok { color: var(--mint-ink); }
.lb-lst.is-bad { color: var(--coral-2); }
.lb-lst.is-wait::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.lb-lst.is-ok::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(63, 190, 125, .25); }
.lb-inp.is-bad { box-shadow: inset 0 0 0 2.5px var(--coral-2), inset 0 4px 0 rgba(19, 37, 58, .06); }
.lb-cur.is-off { opacity: .45; cursor: not-allowed; }
.lb-cur.is-off:hover { transform: none; box-shadow: inset 0 0 0 2px var(--line); }
.lb-paynote { margin: 0; }
.lb-paynote a { color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .lb-lst.is-wait::before { animation: none; } }
/* итог на узком телефоне: крупная сумма «придёт» и «к оплате» переносятся друг под друга, а не вылезают за карточку */
.lb-check__big { flex-wrap: wrap; row-gap: 12px; }
.lb-check__pay { margin-left: auto; }
.lb-check__got { flex-wrap: wrap; }
@container im (max-width: 420px) { .lb-check__got { font-size: 34px; } .lb-check__pay b { font-size: 21px; } }
/* поля «логин» и «сумма» рядом: подписи в одну строку, поля на одной высоте (на планшете подпись суммы переносилась) */
.lb-flds > .lb-blk > .lb-blk__h { min-height: 1.4em; }
@container im (max-width: 860px) { .lb-flds { grid-template-columns: minmax(0, 1fr); } }
/* ---------- страница Steam: SEO со старой pay.igromagaz.ru ---------- */
/* H1 старой страницы длиннее дизайнового «Пополнение Steam»: на узком телефоне чуть мельче */
@container im (max-width: 420px) { .lb-shero__h { font-size: 27px; -webkit-text-stroke-width: 5px; } }
/* вопрос FAQ теперь в h3 (для поисковиков): у заголовка своих отступов и шрифта нет, всё у кнопки */
.lb-faqi__h { margin: 0; font: inherit; }
.lb-faqi__a--rich p + p, .lb-faqi__a--rich p + ul, .lb-faqi__a--rich p + ol, .lb-faqi__a--rich ul + p, .lb-faqi__a--rich ol + p { margin-top: 10px; }
.lb-faqi__a--rich ul, .lb-faqi__a--rich ol { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; }
.lb-faqi__a--rich ul { list-style: disc; }
.lb-faqi__a--rich ol { list-style: decimal; }
/* согласие с соглашением: ссылка рядом с отметкой (внутри кнопки ссылок не бывает) */
.lb-agreebox { display: flex; flex-direction: column; gap: 8px; }
.lb-agreebox__doc { align-self: flex-start; margin-left: 38px; font-size: 13px; font-weight: 800; color: var(--sky-ink); text-decoration: underline dotted;
  text-underline-offset: 3px; }
.lb-sidecard--note p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
/* пользовательское соглашение */
.lb-terms { max-width: 860px; }
.lb-doc:has(.lb-terms) { grid-template-columns: minmax(0, 1fr); }
.lb-terms__h { font: 800 30px/1.1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.lb-terms h2 { margin-top: 10px; font: 800 19px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.lb-terms__back { margin-top: 12px; }

/* ======================= кабинет: вход, регистрация, кабинет игрока, подтверждение почты ======================= */
/* вход и регистрация: форма слева, «что в кабинете» справа */
.lb-auth { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 24px; align-items: start; }
.lb-auth__main { min-width: 0; }
.lb-auth__main > .lb-tabs { margin-bottom: 18px; }
.lb-authcard { gap: 18px; }
.lb-auth__form { display: flex; flex-direction: column; gap: 16px; }
.lb-auth__lead b { display: block; font: 800 18px/1.15 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.lb-auth__lead p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lb-auth__back { align-self: center; font-size: 13.5px; font-weight: 800; color: var(--sky-ink); text-decoration: underline dotted; text-underline-offset: 3px; }
.lb-auth__or { display: flex; align-items: center; gap: 12px; font: 800 12px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.lb-auth__or::before, .lb-auth__or::after { content: ""; flex: 1 1 auto; height: 2px; border-radius: 2px; background: var(--line-2); }
.lb-auth__tg { display: flex; flex-direction: column; gap: 12px; }
.lb-auth .lb-inp input, .lb-solo .lb-inp input { font: 700 16px/1 var(--f-body); letter-spacing: 0; }
.lb-inp__eye { flex: none; width: 40px; height: 40px; margin-right: 6px; border-radius: 12px; display: grid; place-items: center; color: var(--mute); }
.lb-inp__eye:hover { background: var(--sky-wash); color: var(--ink); }
.lb-inp__eye svg { width: 20px; height: 20px; }
.lb-inp--ro { background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.lb-inp--ro input { color: var(--ink-2); cursor: default; }
.lb-ferr { padding: 11px 14px; border-radius: 14px; background: var(--coral-wash); box-shadow: inset 0 0 0 1.5px #F8C6BF; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: #B23A2E; }
.lb-fnote { font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--mute); }
.lb-authsent { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 4px; text-align: center; }
.lb-authsent img { width: 110px; height: auto; }
.lb-authsent > b { font: 800 22px/1.15 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; }
.lb-authsent > p { max-width: 46ch; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.lb-authsent > .lb-fnote { font-size: 12.5px; }
.lb-authsent__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.lb-sbtn:disabled { opacity: .55; cursor: default; box-shadow: inset 0 0 0 2px var(--line); }
.lb-perks { gap: 14px; }
.lb-perks__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lb-perk { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 12px; border-radius: 18px; background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line); }
.lb-perk img { width: 52px; height: 60px; object-fit: contain; }
.lb-perk b { display: block; font: 800 15px/1.15 var(--f-display); letter-spacing: -.01em; }
.lb-perk small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ink-2); }
/* вход через Telegram: ждём подтверждения в боте */
.lb-tgwait__in { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--sky-wash); box-shadow: inset 0 0 0 2px var(--sky-soft); text-align: left; }
.lb-tgwait__in > b { font: 800 15px/1.15 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.lb-tgwait__in > p { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.lb-tgwait__in .lb-lst { margin: 0; }
.lb-tgwait__in .lb-sbtn { align-self: flex-start; background: #fff; }
.lb-quest .lb-tgwait, .lb-quest > .lb-ferr { margin-top: 4px; }
/* кнопка ждёт ответа сервера: крутилка, второй раз не нажимается */
/* обводка букв съедает пробелы: «СООБЩИТЬ О ПОСТУПЛЕНИИ» читалось одним словом. Возвращаем промежуток между словами */
.lb-btn { word-spacing: .22em; }
.lb-btn.is-busy, .lb-sbtn.is-busy { pointer-events: none; filter: saturate(.6); }
.lb-btn.is-busy::after { content: ""; flex: none; width: 17px; height: 17px; border-radius: 50%; border: 3px solid var(--ink); border-right-color: transparent; animation: spin .8s linear infinite; }
.lb-btn:disabled { cursor: default; }
.lb-btn:disabled:hover, .lb-btn--done:hover { transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .lb-btn.is-busy::after { animation: none; } }
/* шапка кабинета: длинная почта переносится, пока профиль грузится, цифры бледнее */
.lb-pc__id p { overflow-wrap: anywhere; }
.lb-pc__card.is-wait .lb-pc__res b, .lb-pc__card.is-wait .lb-pc__lvl b, .lb-pc__card.is-wait small { opacity: .55; }
/* заказы: статусы, загрузка, «показать ещё» */
.lb-st--off { background: var(--paper); color: var(--mute); box-shadow: inset 0 0 0 1.5px var(--line); }
.lb-st--bad { background: var(--coral-wash); color: #B23A2E; }
.lb-cabload { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #9FB6C8; }
.lb-cabload::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.lb-cabload--light { color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .lb-cabload::before { animation: none; } }
.lb-more { display: flex; justify-content: center; margin-top: 16px; }
.lb-more .lb-sbtn { background: #fff; }
.lb-more--light { margin-top: 0; }
.lb-more--light .lb-sbtn { background: var(--paper); }
.lb-wnote { font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--mute); }
.lb-orders + .lb-cabload { margin-top: 4px; }
.lb-order__codes > small { overflow-wrap: anywhere; }
/* мёд: обмен выключен, ошибка обмена */
.lb-hx__off { font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--mute); }
.lb-hx__ok.is-bad { color: #B23A2E; }
.lb-wcard__btn { align-self: flex-start; }
/* профиль: кнопки формы, смена пароля, строки настроек */
.lb-pform__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.lb-pwform { display: flex; flex-direction: column; gap: 14px; padding: 14px; margin: 2px 0 10px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.lb-pwform .lb-inp { background: #fff; }
.lb-opts { display: flex; flex-direction: column; }
.lb-opts > .lb-tgwait, .lb-opts > .lb-ferr { margin: 2px 0 10px; }
.lb-optrow > .lb-sbtn { justify-self: end; }
/* поддержка: вместо формы чата кнопка Telegram */
.lb-chat__go { justify-content: center; }
.lb-chat__go .lb-btn .lg, .lb-auth__tg .lb-btn .lg, .lb-tgwait__in .lb-btn .lg { width: 20px; color: #fff; filter: drop-shadow(0 2px 0 var(--ink)); }
/* подтверждение почты и новый пароль: одна карточка по центру */
.lb-solo { max-width: 560px; margin-inline: auto; align-items: center; text-align: center; }
.lb-solo--form { align-items: stretch; text-align: left; }
.lb-solo--form .lb-authsent { text-align: center; }
.lb-solo__art { width: 120px; height: auto; }
.lb-solo__h { font: 800 22px/1.15 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; }
.lb-solo > p { max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.lb-solo > .lb-btn--full { max-width: 380px; }
.lb-solo__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@container im (max-width: 1240px) { .lb-perks__grid { grid-template-columns: minmax(0, 1fr); } }
@container im (max-width: 1100px) {
  .lb-auth { grid-template-columns: minmax(0, 1fr); }
  .lb-perks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container im (max-width: 720px) {
  .lb-perks__grid { grid-template-columns: minmax(0, 1fr); }
  .lb-auth__tg .lb-btn { font-size: 15px; -webkit-text-stroke-width: 3.5px; padding-inline: 14px; gap: 10px; }
  .lb-authcard { gap: 16px; }
  .lb-perk { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .lb-perk img { width: 44px; height: 50px; }
  .lb-authsent > b, .lb-solo__h { font-size: 19px; }
  .lb-pwform { padding: 12px; }
}
/* кабинет: подсказка вошедшему через Telegram и добавление почты к такому аккаунту */
.lb-cabnote { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding: 14px 16px; border-radius: 18px; background: var(--sky-wash);
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); color: var(--ink-2); font-size: 14px; font-weight: 600; line-height: 1.5; }
.lb-cabnote b { color: var(--ink); }
.lb-cabnote > i { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--sky-ink);
  box-shadow: 0 0 0 2px var(--sky-soft); }
.lb-cabnote > i svg { width: 20px; height: 20px; }
.lb-cabnote > .lb-sbtn { flex: none; background: #fff; }
.lb-emadd { display: flex; flex-direction: column; gap: 12px; }
.lb-emadd .lb-pwform { margin: 0; }
@container im (max-width: 720px) {
  .lb-cabnote { flex-wrap: wrap; padding: 12px 14px; }
  .lb-cabnote > i { display: none; }
}

/* ---------- чат с поддержкой (js/chat.js): кнопка внизу справа и окно ----------
   Живёт вне .im (у .im container-type, и position: fixed внутри считался бы от страницы, а не от экрана), поэтому цвета и
   шрифты свои, те же, что у витрины. На телефоне окно во весь экран, кнопка над нижним меню. */
.imc {
  --ink: #13253A; --mute: #5E7184; --line: #D5E3EA; --paper: #F4F8FA; --sky: #4AB8E6; --sky-ink: #136A96; --sky-wash: #E7F5FC; --sky-soft: #D6EFFA;
  --mint: #7ADBA3; --honey-wash: #FFF6DE; --honey-line: #F6DFA0; --coral: #FF6B5B;
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  position: fixed; right: 22px; bottom: 22px; z-index: 900; font-family: var(--f-body); font-size: 15px; line-height: 1.45; color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
/* сброс без веса (:where): правила кнопок ниже его перекрывают */
:where(.imc) *, :where(.imc) *::before, :where(.imc) *::after { box-sizing: border-box; }
.imc[hidden], .imc [hidden] { display: none !important; }
:where(.imc) :where(button) { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
:where(.imc) :where(svg) { display: block; }
:where(.imc) :where(p) { margin: 0; }
.imc :focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

/* ---------- кнопка ---------- */
.imc-fab { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #8FDDFF, #3AA6EC); box-shadow: 0 0 0 3px var(--ink), 0 5px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .55);
  transition: transform .15s; }
.imc-fab:hover { transform: translateY(-2px); }
.imc-fab:active { transform: translateY(3px); box-shadow: 0 0 0 3px var(--ink), 0 2px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .55); }
.imc-fab svg { width: 32px; height: 32px; fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.imc-fab__x { display: none !important; }
.imc.is-open .imc-fab__i { display: none !important; }
.imc.is-open .imc-fab__x { display: block !important; fill: none; stroke: var(--ink); stroke-width: 2.8; }
.imc-fab__n { position: absolute; right: -5px; top: -5px; min-width: 25px; height: 25px; padding: 0 7px; border-radius: 99px; background: var(--coral); color: #fff;
  font: 800 12px/25px var(--f-display); text-align: center; box-shadow: 0 0 0 2.5px var(--ink); }
.imc-fab.has-new { animation: imcPulse 2.2s ease-in-out infinite; }
@keyframes imcPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--ink), 0 5px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .55), 0 0 0 3px rgba(74, 184, 230, .55); }
  50% { box-shadow: 0 0 0 3px var(--ink), 0 5px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .55), 0 0 0 16px rgba(74, 184, 230, 0); }
}

/* ---------- приглашение над кнопкой ---------- */
.imc-invite { position: absolute; right: 2px; bottom: 82px; width: 250px; padding: 13px 36px 13px 15px; border-radius: 18px 18px 6px 18px; background: #fff;
  box-shadow: 0 0 0 2.5px var(--ink), 0 5px 0 var(--ink); animation: imcIn .3s ease-out; }
.imc-invite__t { display: block; width: 100%; text-align: left; font-weight: 700; line-height: 1.35; }
.imc-invite__x { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: var(--mute); }
.imc-invite__x svg { width: 14px; height: 14px; }

/* ---------- окно ---------- */
.imc-win { position: absolute; right: 0; bottom: 84px; width: 384px; height: min(640px, calc(100vh - 124px)); display: flex; flex-direction: column;
  border-radius: 26px; overflow: hidden; background: var(--paper);
  box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink), 0 30px 60px -24px rgba(19, 37, 58, .55); animation: imcIn .22s ease-out; }
@keyframes imcIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.imc-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: linear-gradient(180deg, #24476C, #13253A); color: #fff; }
.imc-head__ava { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: end center; overflow: hidden;
  background: linear-gradient(180deg, #8FDDFF, #2F98CC); box-shadow: 0 0 0 2.5px #fff; }
.imc-head__ava img { width: 42px; height: auto; margin-bottom: -7px; }
.imc-head__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.imc-head__t b { font: 800 15px/1.2 var(--f-display); letter-spacing: -.01em; }
.imc-st { display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.25; color: #B8CCDD; }
.imc-st::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #8DA5B9; }
.imc-st--online::before { background: var(--mint); box-shadow: 0 0 0 3px rgba(122, 219, 163, .25); }
.imc-st--busy::before { background: #FFC233; }
.imc-x { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .1); }
.imc-x:hover { background: rgba(255, 255, 255, .18); }
.imc-x svg { width: 18px; height: 18px; }

.imc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px 10px; overscroll-behavior: contain; }
.imc-msgs { display: flex; flex-direction: column; gap: 8px; }
.imc-day { align-self: center; margin: 6px 0 2px; padding: 3px 11px; border-radius: 99px; background: rgba(19, 37, 58, .07); font-size: 12px; font-weight: 700; color: var(--mute); }
.imc-m { display: flex; flex-direction: column; align-items: flex-start; max-width: 84%; }
.imc-m__b { padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: #fff; box-shadow: 0 0 0 1.5px var(--line); overflow-wrap: anywhere; }
.imc-m__t { white-space: pre-wrap; }
.imc-m--me { align-self: flex-end; align-items: flex-end; }
.imc-m--me .imc-m__b { border-radius: 18px 18px 6px 18px; background: var(--sky-soft); box-shadow: 0 0 0 1.5px #9FD9F3; }
.imc-m--bot .imc-m__b { background: var(--honey-wash); box-shadow: 0 0 0 1.5px var(--honey-line); }
.imc-m--sys { align-self: center; align-items: center; max-width: 92%; }
.imc-m--sys .imc-m__b { padding: 2px 6px; background: none; box-shadow: none; color: var(--mute); font-size: 13px; text-align: center; }
.imc-m__who { display: block; margin-bottom: 3px; font: 800 11.5px/1.2 var(--f-display); color: var(--sky-ink); }
.imc-m__at { margin: 3px 7px 0; font-size: 11px; color: #8DA5B9; }
.imc-m.is-pending { opacity: .55; }
.imc-m__gone { font-size: 13px; color: var(--mute); }
.imc-img { display: block; margin: 1px 0 3px; }
.imc-img img { display: block; max-width: 220px; height: auto; border-radius: 12px; background: var(--sky-wash); }
.imc-link { color: var(--sky-ink); text-decoration: underline; text-underline-offset: 2px; }
.imc-typing { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12.5px; color: var(--mute); }
.imc-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9FB6C8; animation: imcDot 1.2s ease-in-out infinite; }
.imc-typing i:nth-child(2) { animation-delay: .15s; }
.imc-typing i:nth-child(3) { animation-delay: .3s; }
.imc-typing span { margin-left: 4px; }
@keyframes imcDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.imc-quick { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 2px 14px 10px; }
.imc-q { padding: 7px 13px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 2px var(--sky); color: var(--sky-ink); font-weight: 700; font-size: 13.5px; }
.imc-q:hover { background: var(--sky-wash); }

.imc-rate { flex: none; margin: 0 14px 10px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1.5px var(--line); }
/* форма перед чатом (гость): почта обязательно, имя и Telegram по желанию; внутри прокручиваемого тела окна */
.imc-hello { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1.5px var(--line); }
.imc-hello__t { font: 800 14px/1.25 var(--f-display); letter-spacing: -.01em; }
.imc-hello__s { margin-top: -2px !important; font-size: 13px; line-height: 1.4; color: var(--mute); }
.imc-in { width: 100%; height: 44px; padding: 0 13px; border: 2px solid var(--line); border-radius: 12px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; }
.imc-in:focus { outline: none; border-color: var(--sky); }
.imc-in.is-bad { border-color: var(--coral); }
.imc-in::placeholder { color: #8DA5B9; }
.imc-hello__b { height: 46px; margin-top: 2px; border-radius: 14px; background: linear-gradient(180deg, #FFE070, #FFB21E);
  box-shadow: 0 0 0 2px var(--ink), 0 3px 0 var(--ink); font-weight: 800; font-size: 15px; color: var(--ink); }
.imc-hello__b:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--ink), 0 1px 0 var(--ink); }
.imc-hello__b:disabled { opacity: .6; cursor: wait; }
.imc-hello__n { font-size: 11.5px; line-height: 1.45; color: var(--mute); }
.imc-hello__in { display: block; margin-top: 5px; }
.imc-rate { text-align: center; }
.imc-rate p { margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.imc-stars { display: inline-flex; gap: 4px; }
.imc-star svg { width: 32px; height: 32px; fill: #E7EFF3; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; transition: fill .12s, transform .12s; }
.imc-stars:hover .imc-star svg { fill: #FFC233; }
.imc-star:hover ~ .imc-star svg { fill: #E7EFF3; }
.imc-star:hover svg { transform: scale(1.1); }

.imc-err { flex: none; margin: 0 14px 8px; padding: 8px 12px; border-radius: 12px; background: #FFECE9; color: #B3261E; font-size: 13px; }
.imc-emojis { flex: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; margin: 0 10px 8px; padding: 8px; border-radius: 18px;
  background: #fff; box-shadow: 0 0 0 1.5px var(--line); }
.imc-emojis button { height: 38px; border-radius: 10px; font-size: 20px; line-height: 38px; }
.imc-emojis button:hover { background: var(--sky-wash); }

.imc-comp { flex: none; display: flex; align-items: flex-end; gap: 4px; padding: 10px; background: #fff; border-top: 1.5px solid var(--line); }
.imc-ta { flex: 1; min-width: 0; max-height: 120px; padding: 9px 8px; border: 0; resize: none; font: inherit; font-size: 15px; line-height: 1.4; color: var(--ink); background: transparent; }
.imc-ta:focus { outline: none; }
.imc-ta::placeholder { color: #8DA5B9; }
.imc-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--mute); }
.imc-ico:hover { background: var(--paper); color: var(--ink); }
.imc-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.imc-send { flex: none; width: 44px; height: 42px; margin-left: 2px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(180deg, #FFE070, #FFB21E); box-shadow: 0 0 0 2px var(--ink), 0 3px 0 var(--ink); }
.imc-send:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--ink), 0 1px 0 var(--ink); }
.imc-send svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.imc-send:disabled, .imc-ta:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- телефон: окно во весь экран, кнопка над нижним меню витрины ---------- */
@media (max-width: 720px) {
  .imc { right: 14px; bottom: 14px; }
  .imc--tab { bottom: 86px; }
  .imc-fab { width: 56px; height: 56px; }
  .imc-fab svg { width: 28px; height: 28px; }
  .imc-invite { bottom: 72px; width: min(250px, calc(100vw - 28px)); }
  .imc-win { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; box-shadow: none; animation: none; }
  .imc.is-open .imc-fab { display: none; }
  .imc-head { padding-top: calc(12px + env(safe-area-inset-top)); }
  .imc-comp { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .imc-m { max-width: 88%; }
}
@media (prefers-reduced-motion: reduce) {
  .imc-win, .imc-invite { animation: none; }
  .imc-fab.has-new, .imc-typing i { animation: none; }
}

/* Яндекс SmartCaptcha (js/captcha.js): место для невидимого виджета; задание и уведомление Яндекс рисует сам поверх страницы */
.im-captcha { position: fixed; left: 0; bottom: 0; width: 0; height: 0; z-index: 2147483000; }
.im-cap-note { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted, #6b7a90); }

/* ======================= страница заказа сайта (/personal/order/) =======================
   Оплата и выдача кодов: строки состава как в инвентаре (без количества и удаления), герой «выдача кодов после оплаты»
   (.lb-done из макета), карточки кодов (.lb-codes, .lb-codecard, .lb-code) оттуда же. */
.lb-ordsec { padding-block: 40px 96px; }
.lb-oload { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 220px; color: #C7D9E8; font: 800 18px/1 var(--f-display); }
.lb-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .18); border-top-color: var(--honey); animation: spin .9s linear infinite; }
.lb-line--ro { grid-template-columns: 150px minmax(0, 1fr) auto; grid-template-areas: "art info price"; }
.lb-line--ro .lb-line__price span { font: 800 18px/1 var(--f-display); color: #C7D9E8; }
.lb-ostate { display: flex; flex-direction: column; gap: 22px; }
.lb-oitems { display: flex; flex-direction: column; gap: 12px; }
.lb-oitems:empty { display: none; }
.lb-ohelp { display: flex; flex-wrap: wrap; gap: 10px; }
.lb-ccodes { display: flex; flex-direction: column; gap: 10px; }
.lb-ccwait { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sky-wash); font-size: 13px; font-weight: 600;
  line-height: 1.45; color: var(--ink-2); }
.lb-ccwait svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--sky-ink); }
.lb-done .lb-done__chips > span { gap: 8px; }
.lb-agree.is-warn i { box-shadow: inset 0 0 0 2.5px #E5483A, 0 0 0 4px rgba(229, 72, 58, .2); }
.lb-checkout .lb-ferr { margin: 0; }
@container im (max-width: 720px) {
  .lb-ordsec { padding-block: 26px 40px; }
  .lb-oload { min-height: 160px; font-size: 16px; }
}
/* компактная строка по ширине списка, как в инвентаре (lb-pages.css) */
@container lbl (max-width: 560px) {
  .lb-line--ro { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art info" "art price"; gap: 6px 12px; padding: 10px; border-radius: 20px; }
  .lb-line--ro .lb-line__price { justify-self: start; text-align: left; }
}