/* =====================================================================
   SKIN «BIZZO» — левая панель + верхняя полоса (ПК), шапка с «Promo Hub | Missions» (мобила),
   hero «Instant Registration», рельса «Recommended for you», круглая кнопка меню в нижней панели.
   Цвета — из static/css/themes/bizzo.css
   ===================================================================== */

body{background:radial-gradient(900px 500px at 70% -200px,var(--bg-glow),transparent 70%),var(--bg)}
html{scroll-padding-top:84px}
.main{padding-top:18px}

/* ---------- Кнопки ---------- */
.bbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--radius-btn);font:600 15px/1 var(--font);text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:filter .15s ease,transform .15s ease}
.bbtn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.bbtn .icon{width:18px;height:18px}
.bbtn--yellow{background:var(--yellow);color:var(--yellow-ink);box-shadow:var(--btn-shadow)}
.bbtn--green{background:var(--green);color:var(--green-ink);box-shadow:0 4px 4px rgba(0,0,0,.25)}
.bbtn--line{color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}
.bbtn--xl{min-height:56px;padding:0 28px;font-size:17px}
.bbtn--block{width:100%}
.bbtn__short{display:none}
.age-badge{display:inline-grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);font:800 13px/1 var(--font)}

/* ---------- Левая панель (ПК) ---------- */
.bside{position:fixed;left:0;top:0;bottom:0;z-index:85;width:var(--side);overflow-y:auto;padding:14px 12px 24px;background:var(--surface);box-shadow:1px 0 0 var(--line);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.bside__logo{display:flex;justify-content:center;margin:0 0 14px}
.bside__logo img{height:62px;width:auto}
.bside__promo{display:flex;align-items:center;gap:10px;min-height:52px;margin-bottom:8px;padding:6px 12px;border-radius:var(--radius);background:var(--green);color:var(--green-ink);font:700 15px/1.1 var(--font);text-decoration:none;box-shadow:0 4px 4px rgba(0,0,0,.25);transition:filter .15s ease}
.bside__promo:hover{filter:brightness(1.08)}
.bside__promo svg{width:40px;height:40px;flex:0 0 auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.bside__promo--1 svg{animation:spin 12s linear infinite}
.bside__nav{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.bside__a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--radius);color:var(--text-2);font-size:14.5px;font-weight:500;text-decoration:none;transition:background .15s ease,color .15s ease}
.bside__a .icon{width:20px;height:20px;color:var(--gold)}
.bside__a:hover,.bside__a.is-active{background:var(--surface-3);color:#fff}
.bside__h{margin:18px 12px 4px;color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bside__nav--info{margin-top:0}
.bside__nav--info .bside__a{font-size:13.5px;min-height:44px}
.bside__nav--info .icon{width:16px;height:16px}

/* ---------- Верхняя полоса ---------- */
.btop{position:sticky;top:0;z-index:80;background:var(--hdr-bg);box-shadow:0 1px 0 var(--hdr-line)}
.btop__in{display:flex;align-items:center;gap:18px;height:64px;padding:0 24px}
.btop .burger{display:none;background:transparent;flex:0 0 44px;height:44px}
.btop .burger span{background:var(--gold)}
.btop__logo{display:none}
.btop__logo img{height:44px;width:auto}
.btop__search{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:50%;background:var(--surface-3);color:#fff}
.btop__search .icon{width:20px;height:20px}
.btop__nav{display:flex;align-items:center;gap:14px}
.btop__nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--text);font-size:14.5px;font-weight:500;text-decoration:none}
.btop__nav a:hover{color:var(--gold)}
.btop__dot{width:7px;height:7px;transform:rotate(45deg);background:var(--gold);opacity:.8}
.btop__btns{display:flex;gap:10px;margin-left:auto}
.btop__btns .bbtn{min-height:44px;font-size:14px;padding:0 18px}
.bpromo{display:none}

@media (min-width:1181px){
  body{padding-left:var(--side)}
  .drawer{z-index:120}
}
@media (max-width:1180px){
  html{scroll-padding-top:130px}
  .bside{display:none}
  .btop__in{height:auto;padding:10px 14px;gap:10px}
  .btop .burger{display:flex}
  .btop__logo{display:inline-flex;align-items:center;min-height:44px}
  .btop__search,.btop__nav{display:none}
  /* полоса «Promo Hub | Missions» как на мобиле офсайта */
  .bpromo{display:grid;grid-template-columns:1fr 1fr}
  .bpromo__a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;font:700 16px/1 var(--font);text-decoration:none}
  .bpromo__a svg{width:40px;height:40px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
  .bpromo__a--y{background:var(--yellow);color:var(--yellow-ink)}
  .bpromo__a--g{background:var(--green);color:var(--green-ink)}
}
@media (max-width:640px){
  .btop .burger{display:none}                 /* на мобиле меню открывает круглая кнопка в нижней панели */
  .btop__logo img{height:40px}
  .btop__btns{gap:8px}
  .btop__btns .bbtn{min-height:44px;padding:0 14px;font-size:14px;text-transform:none}
  .bbtn--reg{background:var(--yellow);color:var(--yellow-ink)}   /* на мобиле офсайта Sign up — жёлтая */
  .bbtn--reg .bbtn__long{display:none}
  .bbtn--reg .bbtn__short{display:inline}
  .bbtn--line .icon{width:16px;height:16px}
  .bpromo__a{min-height:48px;font-size:15px}
}
@media (max-width:360px){ .btop__btns .bbtn--line span{display:none} .btop__btns .bbtn--line{padding:0 12px} }

/* Меню-шторка (из ядра) — в цветах бренда */
.drawer__panel{background:var(--surface)}
.drawer__top img{height:40px;width:auto}
.drawer__a .icon{color:var(--gold)}
.drawer__a.is-active,.drawer__a:hover{color:var(--gold);background:var(--surface-3)}
.drawer__btns .btn--main{background:var(--green);color:var(--green-ink)}
.drawer__btns .btn--ghost{color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}

/* ---------- Hero «Instant Registration» ---------- */
.bhero{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:28px 24px 30px;border-radius:var(--radius-lg);background:var(--hero-bg);text-align:center}
.bhero::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px) 0 0/22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none}
.bhero>*{position:relative}
.bhero__h1{margin:0 0 6px;color:var(--gold);font:700 clamp(14px,1.3vw,17px)/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase}
.bhero__title{margin:0 0 20px;color:#fff;font:700 clamp(28px,3.4vw,44px)/1.1 var(--font);text-shadow:0 4px 18px rgba(0,0,0,.35)}
.bhero__cards{display:grid;grid-template-columns:repeat(3,minmax(0,200px));justify-content:center;align-items:center;gap:14px;width:100%}
.bcard2{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 12px 18px;border-radius:var(--radius-lg);background:rgba(43,18,52,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#fff;text-decoration:none;transition:transform .2s ease}
.bcard2:hover{transform:translateY(-4px)}
.bcard2__lbl{min-height:2.6em;color:var(--text-2);font-size:14px;font-weight:500;line-height:1.3}
.bcard2__hex{display:grid;place-items:center;width:112px;height:124px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(180deg,#6d3a8c,#3d1a52)}
.bcard2__hex svg{width:84px;height:84px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.bcard2__val{font-size:17px;font-weight:700;line-height:1.25}
/* средняя карточка — подсвечена и «дышит», как на офсайте */
.bcard2.is-hot{padding:22px 12px 24px;background:var(--yellow);color:var(--yellow-ink);box-shadow:0 0 0 2px #ffef3c,0 18px 40px -10px rgba(255,167,0,.6);animation:hotcard 3s ease-in-out infinite}
.bcard2.is-hot .bcard2__lbl{color:var(--yellow-ink)}
.bcard2.is-hot .bcard2__hex{background:radial-gradient(circle at 50% 40%,#fff6c8,#ffb52e 70%)}
.bcard2.is-hot .bz-coins{animation:coins 1.6s ease-in-out infinite}
@keyframes hotcard{50%{transform:scale(1.035)}}
@keyframes coins{50%{transform:translateY(-6px)}}
.bhero__form{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;width:100%;max-width:640px;margin-top:22px;padding:16px;border-radius:var(--radius-lg);box-shadow:inset 0 0 0 2px #c08a12}
.bhero__field{flex:1 1 180px;display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 16px;border-radius:var(--radius-btn);background:#fff;color:#2b1234;font-size:16px;text-decoration:none}
.bhero__field .icon{width:20px;height:20px}
.bhero__form .bbtn--xl{flex:2 1 260px;text-transform:none}
.bhero__badge{position:absolute;right:-14px;top:-28px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:86px;height:96px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--yellow);color:var(--yellow-ink);animation:float 4s ease-in-out infinite}
.bhero__badge .icon{width:18px;height:18px}
.bhero__badge b{font-size:20px;line-height:1}
.bhero__badge small{font-size:10px;font-weight:700}
.bhero__note{margin:14px 0 0;color:var(--muted);font-size:12.5px}

/* ---------- Заголовок секции «—◆ … ◆—» ---------- */
.bhead{display:flex;align-items:center;justify-content:center;gap:14px;margin:30px 0 16px}
.bhead p{margin:0;color:var(--gold);font:700 clamp(20px,2vw,26px)/1.2 var(--font)}
.bhead i{position:relative;width:min(90px,14vw);height:2px;background:linear-gradient(90deg,transparent,var(--gold))}
.bhead i:last-child{transform:scaleX(-1)}
.bhead i::after{content:"";position:absolute;right:-4px;top:-4px;width:10px;height:10px;transform:rotate(45deg);border:2px solid var(--gold)}

/* ---------- Рельса разделов ---------- */
.brail__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--gold) var(--surface)}
.brail__track::-webkit-scrollbar{height:6px}
.brail__track::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
.bgame{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-lg);background:var(--surface);color:#fff;text-decoration:none;scroll-snap-align:start;transition:transform .2s ease,box-shadow .2s ease}
.bgame:hover{transform:translateY(-4px);box-shadow:0 0 0 2px var(--gold)}
.bgame__art{display:grid;place-items:center;aspect-ratio:1;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.22),transparent 60%),linear-gradient(165deg,var(--b),var(--a))}
.bgame__art svg{width:70%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));transition:transform .25s ease}
.bgame:hover .bgame__art svg{transform:scale(1.07) rotate(-4deg)}
.bgame__body{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px 12px;text-align:center}
.bgame__body small{color:var(--muted);font-size:12px}
.bgame__body b{color:var(--gold);font-size:14px;font-weight:600}
.brail__more{display:flex;justify-content:center;margin-top:14px}

/* ---------- H1 и статья ---------- */
.bh1{margin:30px 0 16px;color:#fff;font:700 clamp(24px,2.6vw,34px)/1.2 var(--font);text-transform:uppercase}
.layout{margin-top:30px}
.article{background:var(--surface);color:var(--text-2)}
.article h2{color:#fff;font:700 clamp(20px,2vw,26px)/1.3 var(--font);text-transform:none}
.article h2::before{background:var(--gold)}
.article h3{font-family:var(--font);text-transform:none}
.article thead th{background:var(--surface-3);color:var(--gold)}
.article tbody tr:nth-child(even) td{background:rgba(255,255,255,.03)}
.article th,.article td{overflow-wrap:normal;word-break:normal}
.table-wrap{border:1px solid var(--line);border-radius:var(--radius-lg)}
.toc,.toc-m,.faq__item,.note{background:var(--surface-2);border:1px solid var(--line)}
.steps>li.step{background:var(--surface-2)}
.cta-row{background:none;border:0;padding:0}
.cta-row .btn--main{background:var(--green);color:var(--green-ink)}
.cta-row .btn--ghost{color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}
.phero{border:1px solid var(--line)}
.phero__title{text-transform:uppercase}
.phero__badge{background:var(--yellow);color:var(--yellow-ink);border-radius:18px}
.faq__item:not([open])>.faq__a{display:none}
.toc-m:not([open])>ol{display:none!important}
.logo,.bgame,.bcard2,.baside,.skip,.bpromo__a,.bside__a,.bside__promo{text-decoration:none}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.toc a,.toc-m a{min-height:44px;align-items:center}
@media (min-width:981px){
  .article .table-wrap table{width:100%}
  .article .table-wrap th,.article .table-wrap td{min-width:0;max-width:none}
}

/* ---------- Правая колонка ---------- */
.baside{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px;border-radius:var(--radius-lg);background:radial-gradient(220px 150px at 50% 0,rgba(255,176,60,.3),transparent 70%),var(--surface);border:1px solid var(--line);text-align:center;color:#fff}
.baside svg{width:90px;margin-bottom:4px;animation:float 4s ease-in-out infinite}
.baside__t{color:var(--gold);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.baside b{font-size:48px;line-height:1;font-weight:800}
.baside__s{margin-bottom:12px;color:var(--text-2);font-size:13.5px}
.baside-rg{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);text-align:center}
.baside-rg p{margin:0 0 6px;color:var(--text-2);font-size:14px}

/* ---------- Футер ---------- */
.bftr{position:relative;margin-top:50px;padding:36px 24px 30px;background:var(--ftr-bg);color:var(--ftr-ink);box-shadow:0 -1px 0 var(--line)}
.bftr__in{max-width:var(--wrap);margin:0 auto}
.bftr__top{display:flex;align-items:center;gap:20px;margin-bottom:24px}
.bftr__logo img{height:56px;width:auto}
.bftr__txt{max-width:560px;margin:0;color:var(--ftr-muted);font-size:14px}
.bftr__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bftr__h{margin:0 0 8px;color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bftr__cols nav a,.bftr__rg a{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--ftr-muted);font-size:14.5px;text-decoration:none}
.bftr__cols nav a:hover,.bftr__rg a:hover{color:#fff}
.bftr__rg .icon{width:18px;height:18px;color:var(--gold)}
.bftr__rg .age-badge{margin:4px 0 6px}
.bftr__chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.bftr__chips li{padding:7px 12px;border-radius:6px;background:var(--surface-2);font-size:13px;font-weight:600}
.bftr__copy{margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--ftr-muted);font-size:13px}
.bftr__top-btn{position:absolute;right:24px;top:-22px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--yellow-ink)}
.bftr__top-btn .icon{width:22px;height:22px}

/* ---------- Нижняя панель (мобила): круглая жёлтая кнопка меню по центру ---------- */
.btab{display:none}
@media (max-width:640px){
  .btab{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;height:68px;padding:0 4px env(safe-area-inset-bottom);background:var(--tab-bg);border-top:1px solid var(--line)}
  .btab .tabbar__a{color:var(--tab-ink);text-transform:none;font-weight:500;font-size:12px}
  .btab .tabbar__a.is-active{color:var(--gold)}
  .btab__menu{justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:64px;height:64px;margin-top:-30px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px var(--tab-bg),0 6px 16px rgba(0,0,0,.4)}
  .btab__menu span{display:block;width:26px;height:3px;border-radius:2px;background:var(--yellow-ink)}
  .btab__menu span:nth-child(2){width:20px}
  .main{padding:12px 10px 30px}
  .bhero{padding:22px 10px 26px}
  .bhero__cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .bcard2{padding:12px 6px 14px;gap:8px}
  .bcard2.is-hot{padding:16px 6px 18px}
  .bcard2__lbl{font-size:12.5px}
  .bcard2__hex{width:78px;height:86px}
  .bcard2__hex svg{width:58px;height:58px}
  .bcard2__val{font-size:14px}
  .bhero__form{padding:12px;margin-top:18px}
  .bhero__badge{right:-6px;top:-34px;width:70px;height:78px}
  .bhero__badge b{font-size:16px}
  .brail__track{grid-auto-columns:138px;gap:10px}
  .bftr{padding:30px 14px 100px}
  .bftr__top{flex-direction:column;align-items:flex-start}
  .bftr__cols{grid-template-columns:1fr 1fr}
  .bftr__rg{grid-column:1/-1}
  .bftr__top-btn{right:14px}
  .ftr,.tabbar__main{display:none}
}
@media (max-width:360px){ .bcard2__lbl{font-size:11.5px} .bcard2__val{font-size:12.5px} }
/* мобила: значок «125% BONUS» не наезжает на карточки, заголовок секции в одну строку */
@media (max-width:640px){
  .bhero__form{margin-top:40px}
  .bhero__badge{top:-36px;right:-4px;width:62px;height:70px}
  .bhero__badge b{font-size:15px}
  .bhead{gap:8px}
  .bhead p{font-size:19px}
  .bhead i{width:28px}
}