/* BOMGO — skin on top of the cat_gogo engine layout. Dark theme only (client decision 06.10.2026). */
:root{
  --accent:#EC352D; --accent-2:#EC352D; --on-accent:#FFFFFF;
  --bg:#101014; --surface:#15151B; --surface-2:#1E1E25; --line:#2A2A33; --input:#1E1E25;
  --scroll-thumb:#3A3A44;
  --text:#FFFFFF; --muted:rgba(255,255,255,.6); --art:#1C1C23; --accent-ink:#FF6B61;
  --ok-bg:rgba(74,222,128,.14); --ok-ink:#4ADE80;
  --wait-bg:rgba(247,196,68,.14); --wait-ink:#F7C444;
  --no-bg:rgba(255,107,97,.14); --no-ink:#FF6B61;
  --r-s:6px; --r-m:10px; --r-l:14px; --r-xl:14px;
  --gap:12px; --pad:clamp(16px,1.7vw,24px);
  --rail:232px;
  --z-header:10; --z-rail:10; --z-chat:50; --z-modal:60; --z-top:80;
  --font-display:"Unbounded",system-ui,sans-serif; --font-text:"Manrope",system-ui,sans-serif;
  --mono:"Manrope",system-ui,sans-serif;
  --card:#1A1A21; --modal:#1C1C23; --scrim:rgba(8,8,10,.74);
}
html[data-theme="light"]{
  --bg:#F5F7F4; --surface:#FFFFFF; --surface-2:#F0F3EE; --line:#E2E6DE; --input:#F4F6F2;
  --scroll-thumb:#C9D0C2;
  /* muted bumped .56 -> .66 so footer links / labels / provider names clear AA 4.5:1 on light */
  --text:#0D1117; --muted:rgba(13,17,23,.66); --art:#E7EBE4; --accent-ink:#4C6B00;
  --ok-bg:rgba(15,118,110,.12); --ok-ink:#0B5C55;
  --wait-bg:rgba(180,120,0,.14); --wait-ink:#7A5200;
  --no-bg:rgba(190,30,60,.12); --no-ink:#A3122F;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-text);-webkit-font-smoothing:antialiased;
  transition:background .4s ease,color .4s ease;min-height:100dvh;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent-ink)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.03em;margin:0}
.h1{font-size:clamp(19px,2.8vw,30px);font-weight:800}
.h2{font-size:clamp(15px,2vw,22px);font-weight:800}
.h3{font-size:15px;font-weight:800}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;flex:none}

/* layout */
.shell{display:flex;align-items:stretch;min-height:100dvh}
.main-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
/* верхний отступ 50px: при 10px заголовок страницы вплотную упирался в шапку */
.page{padding:50px var(--pad) 24px;display:flex;flex-direction:column;gap:12px}
/* Контентный текст страниц из админки идёт колонкой 80%/1100px. У /vip, /faq и
   прочих записей эта колонка приходит своим <style> внутри контента, а у записи
   `index` такого блока нет — SEO-текст на главной растягивался на всю ширину.
   Значения совпадают с админскими, поэтому там, где свой блок есть, ничего не меняется. */
.article .cms-page{width:80%;max-width:1100px;margin-inline:auto}
@media (max-width:900px){.article .cms-page{width:100%;max-width:none}}

/* rail */
.rail{flex:0 0 var(--rail);position:sticky;top:0;align-self:flex-start;height:100dvh;display:flex;
  flex-direction:column;align-items:center;gap:6px;padding:10px 0;background:var(--surface);
  border-right:1px solid var(--line);z-index:var(--z-rail);transition:background .4s ease}
.rail__logo{width:44px;height:44px;border-radius:14px;background:transparent;display:flex;
  align-items:center;justify-content:center;flex:none;margin-bottom:4px;padding:5px}
.rail__logo img{width:100%;height:100%;object-fit:contain}
.vip-scroll{scrollbar-width:none;-ms-overflow-style:none}
.vip-scroll::-webkit-scrollbar{height:0;width:0;display:none}
.rail__item{width:46px;min-height:46px;padding:4px 2px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;transition:transform .2s ease,border-color .25s ease,background .25s ease}
.rail__item:hover{transform:translateY(-2px);border-color:var(--accent)}
.rail__item.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rail__short{font:800 10px/1 var(--mono)}
.rail__name{font-size:7.5px;line-height:1;opacity:.72;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail__spacer{flex:1}

/* header */
.header{position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;gap:8px;
  padding:9px var(--pad);background:var(--surface);border-bottom:1px solid var(--line);transition:background .4s ease}
.search-trigger{flex:1 1 auto;min-width:0;height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;
  border-radius:var(--r-m);background:var(--input);border:1px solid var(--line);color:var(--muted);cursor:pointer;text-align:left}
.search-trigger:hover{border-color:var(--accent)}
.search-trigger:focus-within{border-color:var(--accent)}
/* поле ввода прямо в шапке: 16px, иначе iOS зумит страницу при фокусе */
.search-trigger__input{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;outline:none;
  font-size:16px;color:var(--text)}
.search-trigger__input::placeholder{color:var(--muted)}
.search-trigger__input::-webkit-search-cancel-button{display:none}
.search-trigger__clear{flex:none;width:24px;height:24px;border:0;border-radius:50%;cursor:pointer;
  background:var(--surface-2);color:var(--muted);font-size:16px;line-height:1;display:flex;
  align-items:center;justify-content:center}
.search-trigger__clear:hover{color:var(--text)}
.chip-stat{flex:none;height:42px;display:flex;flex-direction:column;justify-content:center;padding:0 10px;
  border-radius:var(--r-m);background:var(--input);border:1px solid var(--line);cursor:pointer;text-align:left}
.chip-stat:hover{border-color:var(--accent)}
.chip-stat__label{font:600 8.5px/1 var(--mono);color:var(--muted);letter-spacing:.06em}
.chip-stat__value{font:700 13px/1.2 var(--mono);white-space:nowrap}
.wager{flex:none;height:42px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 10px;
  border-radius:var(--r-m);background:var(--input);border:1px solid var(--line);min-width:96px}
.wager__row{display:flex;align-items:center;justify-content:space-between;gap:6px}
/* width/max-width guard: an invalid inline width on the fill (decimal comma, >100)
   must never let the bar grow past the card it lives in */
.bar{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;display:block;
  width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.bar--lg{height:10px;border-radius:6px;background:var(--input)}
.bar > i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s ease}
.avatar-btn{flex:none;width:42px;height:42px;border-radius:var(--r-m);border:1px solid var(--line);
  background:var(--surface-2);cursor:pointer;font:800 12px/1 var(--mono)}
.avatar-btn:hover{border-color:var(--accent)}

/* buttons */
.btn{height:44px;padding:0 16px;border-radius:var(--r-m);border:1px solid transparent;cursor:pointer;
  font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;transition:filter .2s ease,border-color .25s ease,background .25s ease,color .25s ease}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{filter:brightness(1.08);color:var(--on-accent)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn--alt{background:var(--accent-2);color:#fff;border-color:var(--accent-2)}
.btn--alt:hover{color:#fff;filter:brightness(1.08)}
.btn--wide{width:100%}
.btn--sm{height:38px;font-size:12.5px;padding:0 14px}
.btn--icon{width:44px;height:44px;padding:0}
.btn--pulse{animation:gg-glow 3s ease-in-out infinite}
/* «Показать ещё»: компактная кнопка по центру вместо полосы на всю ширину.
   min-width держит подпись на узких экранах, где 12% дали бы ~46px.
   Пульс — тонкое акцентное кольцо в ритме сердца (два удара, пауза). */
.games_list-form{display:flex;justify-content:center}
.games_list-button{width:12%;min-width:168px;max-width:280px;
  border-color:rgba(200,255,46,.45);animation:gg-heartbeat 2.8s ease-out infinite}
.games_list-button:hover{animation-play-state:paused;border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* chips */
.chips{display:flex;align-items:center;gap:6px;padding:8px var(--pad);overflow-x:auto;overflow-y:hidden;
  border-bottom:1px solid var(--line);background:var(--surface);scrollbar-width:none;-ms-overflow-style:none}
.chips::-webkit-scrollbar{display:none;height:0;width:0}
.chip{flex:none;height:36px;padding:0 14px;border-radius:11px;border:1px solid var(--line);background:var(--input);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text);cursor:pointer;font-weight:700;font-size:12.5px;white-space:nowrap;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.chip:hover{border-color:var(--accent)}
.chip.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ticker */
.ticker{display:flex;align-items:center;gap:10px;padding:7px var(--pad);border-bottom:1px solid var(--line);
  overflow:hidden;background:var(--surface)}
.ticker__label{flex:none;display:flex;align-items:center;gap:6px;font:800 10px/1 var(--mono);
  letter-spacing:.1em;color:var(--accent-ink)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:gg-pulse 1.3s ease-in-out infinite;flex:none}
.ticker__viewport{flex:1;min-width:0;overflow:hidden}
.ticker__track{display:flex;gap:18px;width:max-content;animation:gg-marquee 26s linear infinite}
.ticker__item{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:12px}
.ticker__art{width:27px;height:18px;border-radius:4px;background:var(--art);flex:none;object-fit:contain}
.ticker__sum{font:800 12px/1 var(--mono);color:var(--accent-ink)}
.ticker:hover .ticker__track{animation-play-state:paused;cursor:pointer}

/* hero / promo */
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px}
.hero{grid-column:span 2;min-width:0;max-width:100%;position:relative;aspect-ratio:2/1;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(12px,2.2vw,26px);background:linear-gradient(120deg,#2B1F63,#141826 62%);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
html[data-theme="light"] .hero{background:linear-gradient(120deg,#E8E4FF,#F3F7E6 60%)}
.hero:hover{transform:translateY(-3px)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.hero__wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,14,.82),rgba(6,8,14,.25) 62%,transparent)}
html[data-theme="light"] .hero__wash{background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.4) 62%,transparent)}
.hero__badge{position:absolute;top:12px;left:12px;font:700 10px/1 var(--mono);letter-spacing:.1em;
  padding:6px 9px;border-radius:8px;background:var(--accent);color:var(--on-accent)}
.hero__title{position:relative;font-family:var(--font-display);font-weight:800;
  font-size:clamp(19px,3.4vw,42px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.hero__text{position:relative;margin-top:6px;font-size:clamp(12px,1.4vw,15px);color:var(--muted);max-width:46ch;text-wrap:pretty}
.hero__facts{position:relative;margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.fact{padding:6px 10px;border-radius:9px;border:1px solid var(--line);font:700 11px/1 var(--mono);white-space:nowrap}
.hero__actions{position:relative;margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hero__badge{position:absolute;top:14px;left:14px;z-index:2;font:800 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:var(--accent);color:var(--on-accent)}
.hero__meta{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hero__pill{font:700 11px/1 var(--mono);padding:7px 10px;border-radius:8px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.16);color:#fff}
.hero__dots{display:flex;gap:5px;margin-left:auto}
.hero__dot{width:10px;height:10px;border-radius:999px;border:0;cursor:pointer;background:var(--line);transition:width .3s ease,background .3s ease}
.hero__dot.is-active{width:22px;background:var(--accent)}
.promo-slide{display:none}
.promo-slide.is-active{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
/* No banner art from the backend yet → a proper welcome banner card in the mockup's frame.
   aspect-ratio dropped (base .hero is 2:1) + capped min-height so a FULL-WIDTH hero — this
   domain has no top-wins aside — reads as a banner, not a giant 2:1 void (668px @1440) and not
   the old collapsed strip. Content bottom-left, badge absolute top-left (base rules), lime
   radial wash like the DC mockup heroWash. Real 2:1 art still comes from admin (.hero, no --promo). */
.hero--promo{aspect-ratio:auto;min-height:clamp(230px,28vw,400px);justify-content:flex-end;
  background:radial-gradient(120% 120% at 8% 100%,rgba(200,255,46,.22),transparent 55%),
    linear-gradient(120deg,#2B1F63,#141826 62%)}

/* panels */
.panel{border-radius:var(--r-l);border:1px solid var(--line);background:var(--surface);overflow:hidden;
  display:flex;flex-direction:column;transition:background .4s ease}
.panel__head{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:8px}
.panel__body{padding:12px;display:flex;flex-direction:column;gap:8px}
.card{border-radius:16px;border:1px solid var(--line);background:var(--surface);padding:12px;
  display:flex;flex-direction:column;gap:8px;min-width:0}
.cards-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}

/* win list */
.win-list{display:flex;flex-direction:column;max-height:340px;overflow-y:auto}
.win{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .2s ease}
.win:hover{background:var(--surface-2)}
.win__art{flex:none;width:48px;aspect-ratio:3/2;border-radius:7px;background:var(--art);object-fit:contain}
.win__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.win__user{font-size:12.5px;font-weight:700}
.win__game{font-size:11px;color:var(--muted)}
.win__sum{flex:none;font:800 12.5px/1 var(--mono);color:var(--accent-ink);white-space:nowrap}

/* game grid */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(118px,14vw,190px),1fr));gap:var(--gap)}
.game{position:relative;border-radius:var(--r-m);overflow:hidden;background:var(--surface);border:1px solid var(--line);
  animation:gg-pop .4s ease both;transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease,border-color .28s ease}
.game:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 32px -20px rgba(0,0,0,.85)}
.game__art{position:relative;aspect-ratio:3/2;background:var(--art);display:flex;align-items:center;justify-content:center;overflow:hidden}
.game__art img{width:100%;height:100%;object-fit:contain}
.game__badge{position:absolute;top:6px;left:6px;font:800 8.5px/1 var(--mono);letter-spacing:.06em;
  padding:4px 6px;border-radius:6px;background:var(--accent);color:var(--on-accent)}
.game__fav{position:absolute;top:5px;right:5px;width:32px;height:32px;border-radius:9px;border:0;cursor:pointer;
  font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,14,.68);color:rgba(255,255,255,.75)}
.game__fav.is-active,.game__fav:hover{color:var(--accent)}
.game__body{padding:6px 7px 7px;display:flex;flex-direction:column;gap:5px;min-width:0}
.game__name{font-size:11.5px;font-weight:700;line-height:1.15}
.game__prov{font-size:9.5px;color:var(--muted)}
.game__actions{display:flex;gap:4px}
.game__play{flex:1;min-width:0;height:32px;border-radius:9px;background:var(--accent);color:var(--on-accent);
  font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center}
.game__play:hover{color:var(--on-accent);filter:brightness(1.08)}
.game__demo{flex:none;min-width:46px;height:32px;border-radius:9px;border:1px solid var(--line);color:var(--muted);
  font-weight:700;font-size:10.5px;display:flex;align-items:center;justify-content:center}
.game__demo:hover{color:var(--text);border-color:var(--accent)}
button.game__play{border:0;font:inherit}
button.game__demo{font:inherit;cursor:pointer}
.game--noart .game__art img{display:none}
.game--noart .game__art::after{content:"GO";font:800 15px/1 var(--font-display);color:var(--muted);opacity:.5}
@media (hover:none){.game:hover{transform:none}}

/* skeletons */
.skeleton{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.skeleton__art{aspect-ratio:3/2}
.sk{background:linear-gradient(90deg,var(--input),var(--surface-2),var(--input));background-size:600px 100%;
  animation:gg-shimmer 1.1s linear infinite;display:block;border-radius:6px}

/* empty */
[hidden]{display:none!important}
.change-theme-color{display:none!important}
.empty{border:1px dashed var(--line);border-radius:14px;padding:30px 16px;display:flex;flex-direction:column;
  align-items:center;gap:8px;text-align:center}

/* providers */
.provs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.prov{position:relative;height:38px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--input);display:flex;
  align-items:center;justify-content:center;font-size:10px;color:var(--text);overflow:hidden;padding:0 6px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease}
.prov:hover{transform:translateY(-2px);border-color:var(--accent)}
.prov img{max-height:24px;object-fit:contain}
/* Provider name is the reliable identifier; the logo replaces it only when it actually loads,
   so a missing/hidden logo never leaves an empty chip. */
.prov__txt{font-weight:700;text-align:center;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prov.has-logo .prov__txt{display:none}
.prov.has-logo{background:#EEF1EA;border-color:#CBD2C4;padding:4px}
.prov.has-logo img{max-height:26px;filter:none}
/* Providers whose official logo is light/neon (drawn for a dark bg) wash out on
   the light tile — give those a dark panel instead. Match is by slug substring,
   so variants (nolimitcity, championsoft…) are covered. Extend the list when a
   new provider mark reads poorly on light. */
.prov.has-logo[data-prov*="nolimit"],
.prov.has-logo[data-prov*="champion"],
.prov.has-logo[data-prov*="netent"],
.prov.has-logo[data-prov*="playson"]{background:#0E1118;border-color:#2A3342}

/* Cabinet «Бонусы» empty state: drop it below the popup close (✕) so the two
   don't collide at the top-right of the pane. */
#bonuses > .empty{margin-top:clamp(32px,7vh,72px)}
/* On light theme give a loaded (usually light monochrome) logo a dark backdrop so it stays visible. */
html[data-theme="light"] .prov.has-logo{background:#171B24;border-color:#2A2F3B}

/* forms */
.field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
.input,.select,.textarea{height:50px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--input);
  color:var(--text);padding:0 14px;outline:none;font-size:16px;width:100%;transition:border-color .25s ease}
.textarea{height:auto;padding:12px 14px;resize:vertical;min-height:120px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent)}
/* themed <select>: kill the native chrome, draw our own chevron, dark option list */
.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F3F5F8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
.select option{background:var(--surface);color:var(--text)}
/* custom themed dropdown — the native <select> popup can't be styled per-OS (blue highlight,
   misaligned corners), so js/main.js swaps it for this. Native select stays hidden for submit. */
.sel{position:relative}
.sel__native{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.sel__btn{width:100%;height:50px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--input);color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;cursor:pointer;font-size:14px;text-align:left}
.sel.is-open .sel__btn,.sel__btn:focus{border-color:var(--accent);outline:none}
.sel__btn > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel__btn::after{content:"";width:16px;height:16px;flex:none;transition:transform .15s ease;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F3F5F8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center}
.sel.is-open .sel__btn::after{transform:rotate(180deg)}
.sel__list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);padding:4px;max-height:240px;overflow-y:auto;display:none;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.sel.is-open .sel__list{display:block}
.sel__opt{padding:11px 12px;border-radius:9px;cursor:pointer;font-size:14px;color:var(--text);
  -webkit-tap-highlight-color:transparent}
.sel__opt:hover{background:var(--surface-2);color:var(--text)}
.sel__opt.is-active,.sel__opt.is-active:hover{background:var(--accent);color:var(--on-accent);font-weight:700}
.input[readonly]{border-style:dashed;background:transparent;color:var(--muted)}
.check{display:flex;align-items:flex-start;gap:9px;padding:10px;border-radius:var(--r-m);border:1px solid var(--line);cursor:pointer}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{flex:none;width:24px;height:24px;border-radius:8px;border:2px solid var(--line);display:flex;
  align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--on-accent)}
.check input:checked + .check__box{background:var(--accent);border-color:var(--accent)}
.check input:checked + .check__box::after{content:"\2713"}
.check.is-error{color:var(--no-ink);animation:gg-shake .3s ease}
.answer{font-size:12.5px}
.answer:not(:empty){padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
.answer.fail{background:var(--no-bg);border-color:var(--no-ink);color:var(--no-ink)}
.answer.success{background:var(--ok-bg);border-color:var(--ok-ink);color:var(--ok-ink)}

/* support / contact */
.support-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;align-items:start}
.form-cf{display:flex;flex-direction:column;gap:12px}
.support-info{display:flex;flex-direction:column;gap:10px}
/* /support: без формы блок раскладывается в равновысокие карточки на всю ширину */
.support-info--cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:stretch}
/* CMS-страницы приносят свой <style> с колонкой 80%/1100px для h1 и текста —
   карточки должны стоять в той же колонке, иначе блок шире контента. */
main:has(.cms-page)>.support-info--cards{width:80%;max-width:1100px;margin-inline:auto}
.support-item{display:flex;align-items:flex-start;gap:12px}
.support-item__ico{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--accent-ink)}
.support-item__ico .icon{width:22px;height:22px}
.support-item__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.support-item__body .muted{font-size:12.5px}
.support-item__body a{color:var(--accent-ink);font-weight:700;word-break:break-word}
@media (max-width:760px){.support-grid{grid-template-columns:1fr}}
@media (max-width:520px){.support-info--cards{grid-template-columns:1fr}}
/* ниже 1024 CMS-колонка разжимается до 100%, карточки должны идти следом — иначе они
   оказываются уже текста и «вдавлены» с обеих сторон (QA: 900 / 768 / 375) */
@media (max-width:1023px){main:has(.cms-page)>.support-info--cards{width:100%;max-width:none;margin-inline:0}}

/* status pills */
.st{padding:5px 9px;border-radius:8px;font:700 10px/1 var(--mono);white-space:nowrap;justify-self:start;
  background:var(--wait-bg);color:var(--wait-ink)}
.st--ok{background:var(--ok-bg);color:var(--ok-ink)}
.st--wait{background:var(--wait-bg);color:var(--wait-ink)}
.st--no{background:var(--no-bg);color:var(--no-ink)}

/* history rows */
.rows{display:flex;flex-direction:column;gap:6px;max-height:clamp(240px,42vh,460px);overflow-y:auto;padding-right:2px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr));gap:6px;align-items:center;
  padding:11px 12px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--input);transition:border-color .25s ease}
.row:hover{border-color:var(--accent)}
.sum--in{font:800 13px/1 var(--mono);color:var(--ok-ink)}
.sum--out{font:800 13px/1 var(--mono);color:var(--no-ink)}
.pager{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}
.pager a,.pager span{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--input);
  display:flex;align-items:center;justify-content:center;font:800 13px/1 var(--mono)}
.pager .is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* modal */
/* Центрирование окна: align-items:center здесь нельзя — при контенте выше экрана флекс
   обрезает верх окна и его нельзя доскроллить (заголовок и крестик становятся недоступны).
   Поэтому контейнер держит flex-start, а центрирует margin:auto у самой коробки: свободное
   место делится поровну сверху и снизу, а когда его нет — поля схлопываются в ноль и окно
   скроллится целиком. Отступ фиксированный: прежний clamp(8px,4vh,48px) зависел от высоты
   экрана, из-за чего окно уезжало вверх тем сильнее, чем ниже был экран. */
.modal{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(4,6,10,.66);backdrop-filter:blur(6px);
  display:none;align-items:flex-start;justify-content:center;padding:24px 10px;
  overflow-y:auto;overscroll-behavior:contain}
/* Анимация висит на самом окне, а не на контейнере. Пока gg-pop шла на .modal, контейнер
   держал transform: scale(.985) translateY(8px) — position:fixed терял привязку к вьюпорту,
   контейнер сжимался (900 → 887px) и съезжал вниз на 15px, а окно центрировалось уже
   относительно смещённой области. В фоновой вкладке анимация замирает на первом кадре,
   и окно остаётся сдвинутым насовсем. */
.modal.is-open{display:flex}
/* Своя анимация вместо общей gg-pop: там есть translateY(8px), а первый кадр анимации
   замирает в фоновой вкладке — окно так и остаётся сдвинутым вниз на 8px и уже не по центру.
   Масштаб считается от центра элемента, поэтому поля сверху и снизу равны на любом кадре. */
@keyframes gg-modal-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.modal.is-open > .modal__box{animation:gg-modal-in .22s ease both}
.modal__box{width:min(940px,100%);margin:auto;border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surface);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);position:relative}
@media (max-width:760px){.modal{padding:12px 8px}}
.modal__box--sm{width:min(420px,100%);padding:16px;display:flex;flex-direction:column;gap:10px}
.modal__close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-size:15px;cursor:pointer;z-index:2}
.modal__title{font-family:var(--font-display);font-weight:800;font-size:17px;padding-right:56px;
  min-height:44px;display:flex;align-items:center}

/* cabinet */
/* Окно кабинета не растёт вслед за контентом: высота ограничена экраном, скроллится
   содержимое вкладки, а не страница под модалкой. Без этого вкладка «Бонусы» с 4+
   карточками вытягивала окно на две высоты экрана. */
/* Окно кабинета и грид-контейнер — один и тот же элемент (.modal__box.cabinet), поэтому
   max-height на колонке не работал: строка грида растёт под контент и тянет элемент за
   собой. Ограничиваем сам контейнер и запираем единственную строку в minmax(0,1fr) —
   тогда колонки получают конечную высоту и скроллятся внутри. display не трогаем:
   смена display на .modal__box ломает его ширину. Только десктоп: ниже 760px колонки
   встают друг под друга, и жёсткая одна строка сломала бы раскладку. */
@media (min-width:761px){
  #cabinet-modal .cabinet{height:min(560px,calc(100dvh - 48px));grid-template-rows:minmax(0,1fr)}
  #cabinet-modal .cabinet__aside,
  #cabinet-modal .cabinet__main{min-height:0;overflow-y:auto}
  /* Крестик занимает right:12 + 44px = ровно 56px, столько же резервировал
     padding-right — карточки упирались в кнопку вплотную. Добавляем зазор. */
  #cabinet-modal .cabinet__main{padding-right:72px}
}
.cabinet{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.cabinet__aside{grid-column:span 1;min-width:0;background:var(--surface-2);border-right:1px solid var(--line);
  padding:14px;display:flex;flex-direction:column;gap:10px}
.cabinet__main{grid-column:span 2;min-width:0;padding:14px;padding-right:56px;min-height:440px;
  display:flex;flex-direction:column;gap:10px}
.user{display:flex;align-items:center;gap:10px;min-width:0;padding-right:56px}
.user__avatar{flex:none;width:48px;height:48px;border-radius:15px;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;font:800 16px/1 var(--mono)}
.stat-box{display:flex;flex-direction:column;gap:3px;padding:10px;border-radius:var(--r-m);background:var(--input);border:1px solid var(--line)}
.stat-box__value{font:800 19px/1.1 var(--mono)}
.tabs{display:flex;flex-direction:column;gap:4px}
.tab{height:46px;border-radius:var(--r-m);padding:0 14px;text-align:left;border:1px solid var(--line);
  background:transparent;color:var(--text);cursor:pointer;font-weight:700;font-size:13px;
  display:flex;align-items:center;gap:9px;transition:background .25s ease,color .25s ease,border-color .25s ease}
.tab:hover{border-color:var(--accent)}
.tab.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tab-pane{display:none}
.tab-pane.is-active{display:flex;flex-direction:column;gap:10px;animation:gg-fade .25s ease both}
.subtabs{display:flex;gap:6px;flex-wrap:wrap}

/* payment methods */
.methods{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(112px,12vw,168px),1fr));gap:8px}
.method{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px;border-radius:14px;
  border:1px solid var(--line);background:var(--input);color:var(--text);cursor:pointer;min-height:88px;
  transition:border-color .25s ease,box-shadow .25s ease}
.method:hover{border-color:var(--accent)}
.method.is-active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,255,46,.18)}
/* card-requisites tile (P2P) — same size as gateway tiles, subtle accent so it reads as primary */
.method--card{border-color:var(--accent)}
.method--card:hover{box-shadow:0 0 0 3px rgba(200,255,46,.14)}
.method__logo{width:100%;height:34px;border-radius:9px;background:var(--art);display:flex;align-items:center;
  justify-content:center;font:700 10px/1 var(--mono);color:var(--muted);overflow:hidden}
.method__logo--card{background:transparent;color:var(--text);font-weight:800}
.method__visa{height:16px;width:auto;display:block}
.method__logo img{max-height:26px;object-fit:contain}
.method__name{font-size:12px;font-weight:700;max-width:100%}
/* cabinet subtabs (Депозит/Вывод/История) + amount presets — pill size per «Кабинет» mockup */
.cabinet .subtabs .chip,.cabinet .presets .chip{height:42px;border-radius:12px;font-size:12.5px}
.presets{display:flex;gap:6px;flex-wrap:wrap}
.amount-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.amount-row .input{flex:1 1 200px;font:800 17px/1 var(--mono)}

/* bonuses — card grid with art on top (design «Кабинет и модалки», cat_leon pattern) */
.bonuses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:8px}
.bonus-card{border-radius:15px;border:1px solid var(--line);background:var(--input);overflow:hidden;
  display:flex;flex-direction:column}
.bonus-card.is-active{border-color:var(--accent)}
.bonus-card__art{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--art);display:block}
.bonus-card__body{padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.bonus-card__head{display:flex;align-items:center;gap:6px;justify-content:space-between}
.bonus-card__title{font-weight:800;font-size:13px;min-width:0}
.bonus-card__desc{font-size:11.5px;color:var(--muted)}
/* CTA всегда у нижнего края: описания бонусов разной длины, иначе кнопки
   «Активировать» в ряду встают на разных уровнях (кабинет и /promo). */
.bonus-card .btn{width:100%;margin-top:auto}
/* home lobby bonus item (logged-in): compact formatted card, was unstyled */
/* justify-content:center — высоту слайда задаёт JS по самому высокому бонусу в треке,
   и без этого короткий слайд (например, единственный активный) прижимался к верху,
   а под текстом зияла пустая половина карточки. Текст стоит по центру и по ширине
   (align-items+text-align), и по высоте. */
.bonus{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;width:100%;
  padding:11px;border-radius:13px;border:1px solid var(--line);background:var(--input)}
.bonus__meta{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;min-width:0;width:100%}
.bonus__title{font-weight:800;font-size:12.5px;max-width:100%}
.bonus__desc{font-size:11px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bonus .btn{width:100%}
/* Автослайдер бонусов: видно один слайд, высоту окна задаёт JS по самому высокому.
   Карточка перестаёт расти от числа бонусов и не прыгает при переключении. */
.bonus-slider{position:relative;width:100%;overflow:hidden}
.bonus-slider__track{display:flex;flex-direction:column;will-change:transform}
.bonus-slider__track > .bonus{flex:none}
/* Бонус по центру карточки: на средних ширинах ряд тянется по самой высокой карточке
   (Провайдеры), и слайд висел вверху с дырой под ним. justify-content тут бессилен —
   у кнопки margin-top:auto, она забирает весь свободный остаток. Поэтому свободное
   место делит сам слайдер (margin-block:auto), а кнопка садится под ним, у нижнего края. */
.bonus-card .bonus-slider{margin-block:auto}
.bonus-card .vip-lobby__more{margin-top:0}

/* vip */
.vip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px}
.vip-card{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--r-l);border:1px solid var(--line);
  background:var(--surface);min-width:0;transition:border-color .3s ease}
.vip-card.is-current{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,255,46,.15)}
.vip-card__pic{width:64px;height:64px;border-radius:18px;background:var(--art);object-fit:contain}
/* VIP-карточка в лобби: арт текущего уровня в кольце прогресса (--p = проценты).
   Имя отдельное от .vip-card (те плитки живут на /vip и значат другое). */
.vip-lobby{gap:10px}
.vip-lobby__head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.vip-lobby__head .h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* кольцо слева, статус справа — карточка занимает ширину, а не тянется в столбик */
.vip-lobby__body{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;min-width:0;padding:2px 0}
.vip-lobby__info{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;text-align:left}
.vip-lobby__label{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase}
.vip-lobby__info .vip-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:block;line-height:32px}
.vip-lobby__ring{position:relative;width:92px;height:92px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:conic-gradient(var(--accent) calc(var(--p,0) * 1%),var(--line) 0)}
.vip-lobby__ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
/* border-radius, но без фона: прозрачный арт остаётся чистым, квадратный — скругляется */
.vip-lobby__art{position:relative;z-index:1;width:64px;height:64px;object-fit:contain;border-radius:16px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.vip-lobby__letter{position:relative;z-index:1;font:800 24px/1 var(--font-display);color:var(--accent-ink)}
.vip-lobby__pct{position:absolute;z-index:2;bottom:-4px;left:50%;transform:translateX(-50%);
  padding:2px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);
  font-size:10px;font-weight:700;white-space:nowrap}
.vip-lobby__next{font-size:11.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vip-lobby__points{flex:none;padding:3px 9px;border-radius:999px;background:var(--input);border:1px solid var(--line);
  font-size:11px;font-weight:700;color:var(--accent-ink);white-space:nowrap}
.vip-lobby__more{margin-top:auto;align-self:stretch;justify-content:center}
/* гостевой тизер: тот же каркас (текст по центру, CTA прижат вниз), но без кольца и чипа */
/* заголовок и текст от верха, CTA — к низу: описания в соседних карточках разной высоты
   (одна строка против двух), и при центрировании группы кнопки вставали на разных уровнях */
.vip-lobby--teaser{align-items:center;justify-content:flex-start;text-align:center}
.vip-lobby__teaser-text{font-size:12px;line-height:1.5}
/* заголовок и описание — одной группой по центру, CTA прижат к низу: запас высоты делится
   поровну между auto-отступом над заголовком и auto-отступом под текстом, кнопке остаётся 0 */
.vip-lobby--teaser .h3{margin-top:auto}
.vip-lobby--teaser .vip-lobby__teaser-text{margin-bottom:auto}
.vip-lobby--teaser .vip-lobby__more{margin-top:0}
@media (max-width:420px){
  .vip-lobby__ring{width:76px;height:76px}
  .vip-lobby__art{width:54px;height:54px}
}
.vip-scroll{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.vip-chip{flex:none;height:34px;padding:0 12px;border-radius:11px;display:flex;align-items:center;
  font-weight:700;font-size:12px;white-space:nowrap;border:1px solid var(--line);background:var(--input);color:var(--muted)}
.vip-chip.is-current{border-color:var(--accent-2);background:var(--accent-2);color:#fff}

/* search overlay */
.search{position:fixed;inset:0;z-index:60;background:rgba(4,6,10,.62);backdrop-filter:blur(6px);
  display:none;align-items:flex-start;justify-content:center;padding:clamp(12px,6vh,80px) 12px}
.search.is-open{display:flex;animation:gg-pop .22s ease both}
.search__box{width:min(760px,100%);max-height:80dvh;display:flex;flex-direction:column;border-radius:20px;
  overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.search__head{display:flex;align-items:center;gap:8px;padding:12px;padding-right:60px;border-bottom:1px solid var(--line);position:relative}
.search__results{overflow-y:auto;padding:10px 14px 16px}
.search__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
/* Выпадашка под строкой шапки вместо полноэкранного оверлея: панель переносится
   внутрь .header (js/main.js), затемнение и блокировка скролла не нужны. */
.search.is-drop{position:absolute;inset:auto 0 auto 0;top:100%;z-index:var(--z-header);
  background:none;backdrop-filter:none;padding:8px var(--pad) 0;justify-content:flex-start;pointer-events:none}
.search.is-drop.is-open{display:flex}
.search.is-drop .search__box{width:min(760px,100%);max-height:min(70dvh,520px);pointer-events:auto;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
/* панель прижата к левому краю шапки — ровно под началом строки поиска */
/* Пока поиск активен, страница уходит в расфокус: шапка со строкой ввода и сама
   выпадашка остаются чёткими, всё остальное блюрится и не ловит клики. */
html.is-searching .rail,
html.is-searching .main-col > *:not(.header),
html.is-searching .tabbar,
html.is-searching .chat{filter:blur(5px);pointer-events:none;user-select:none;transition:filter .2s ease}

/* chat */
.chat{position:fixed;right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:var(--z-chat);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.chat__panel{display:none;width:min(320px,calc(100vw - 24px));border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.chat__panel.is-open{display:flex;flex-direction:column;animation:gg-pop .25s ease both}
.chat__head{display:flex;align-items:center;gap:8px;padding:12px 56px 12px 14px;border-bottom:1px solid var(--line);position:relative}
.chat__body{padding:12px 14px;display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto}
.chat__msg{align-self:flex-start;max-width:85%;padding:9px 12px;border-radius:14px 14px 14px 4px;
  background:var(--input);border:1px solid var(--line);font-size:12.5px}
.chat__foot{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line)}
.chat__fab{width:56px;height:56px;border-radius:20px;border:0;cursor:pointer;background:var(--accent);
  color:var(--on-accent);display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 30px -16px rgba(0,0,0,.8);animation:gg-glow 3s ease-in-out infinite;transition:transform .25s ease}
.chat__fab:hover{transform:translateY(-2px) scale(1.04)}
/* Chatwoot bubble uses the BOMGO accent */
.woot-widget-bubble,
.woot-widget-bubble.woot-elements--right,
.woot--close.woot-elements--right{background:#EC352D !important}
.woot-widget-bubble svg,
.woot-widget-bubble path,
.woot-widget-bubble i{fill:#fff !important;color:#fff !important}
.woot-widget-holder{z-index:90 !important}

/* header wordmark — desktop uses the rail mark, so hidden here; shown on mobile (rail hidden) */
.header__logo{display:none;flex:none;height:42px;align-items:center}
.header__logo img{height:26px;width:auto;object-fit:contain}

/* catalog (slots/live/table/new/provider) — left filter + games */
.catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;align-items:start}
.catalog__side{grid-column:span 1;min-width:0;position:sticky;top:64px;gap:10px}
/* span 3 ломалось, когда auto-fit давал ровно 3 колонки: main не влезал рядом с фильтром
   и переносился на новую строку, оставляя дыру справа от панели. 2/-1 = «все колонки правее
   фильтра», сколько бы их ни было. */
.catalog__main{grid-column:2 / -1;min-width:0;display:flex;flex-direction:column;gap:10px}
.catalog__cats{display:flex;flex-wrap:wrap;gap:6px}
.catalog__div{height:1px;background:var(--line);display:block}
.catalog__provs{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto}
.catalog__prov{justify-content:space-between;width:100%}
/* пока js/main.js пересчитывает счётчики под активную категорию, чипы провайдеров скрыты —
   иначе на долю секунды виден полный SSR-список, который затем схлопывается */
.catalog__provs.is-pending .catalog__prov[href^="/slots/"]{display:none}
.catalog__count{font-size:10px;opacity:.7;flex:none}
@media (max-width:760px){
  .catalog__side{position:static;grid-column:1 / -1}
  .catalog__main{grid-column:1 / -1}
  .catalog__provs{max-height:200px}
}

/* payment method logo fallback — keeps the box the same size when the icon 404s */
.method__logo::after{content:attr(data-fallback);font:700 10px/1 var(--mono);color:var(--muted);
  letter-spacing:.04em;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.method__logo.has-logo::after{display:none}
.method__logo.has-logo{background:var(--input)}

/* favorites chip marker (same star glyph as cards) */
.chip--fav .chip__star{color:var(--accent-2);margin-right:5px;font-size:12px;line-height:1}
.chip--fav.is-active .chip__star{color:var(--on-accent)}

/* HOT badge = second accent so it reads apart from NEW */
.game__badge--hot{background:var(--accent-2);color:#fff}

/* footer */
.footer{margin-top:6px;border-top:1px solid var(--line);padding:14px var(--pad) calc(24px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:14px}
.footer__col{display:flex;flex-direction:column;gap:6px;min-width:0}
.footer__title{font:700 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.footer a{font-size:12.5px;opacity:.82}
.age{width:44px;height:44px;border-radius:50%;border:2px solid var(--muted);display:flex;align-items:center;
  justify-content:center;font:800 13px/1 var(--mono);color:var(--muted)}

/* launcher */
.launcher{padding:10px var(--pad) 24px;display:flex;flex-direction:column;gap:10px}
.launcher__bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface)}
.wins{display:grid;gap:8px;grid-template-columns:1fr}
.win-frame{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:#05070B;aspect-ratio:16/9}
.win-frame iframe{width:100%;height:100%;border:0;display:block}
/* single-game view fills the viewport height so the frame needs no scroll */
.wins[data-count="1"] .win-frame{aspect-ratio:auto;height:calc(100dvh - 96px);min-height:60vh}
@media (max-width:640px){.wins[data-count="1"] .win-frame{height:calc(100dvh - 140px)}}
/* favourite star injected into the launcher bar — inline, not the card overlay */
.game__fav--bar{position:static;flex:none;width:44px;height:44px;font-size:19px;border-radius:12px;
  background:var(--input);border:1px solid var(--line);color:var(--text)}
/* fullscreen: иконка приходит из спрайта (game/game.tpl), псевдоэлемента с глифом больше
   нет — текстовый ⛶ рисовался системным фолбэк-шрифтом и вставал в кнопке не по центру.
   Цвет наследуется: .icon{stroke:currentColor}, ховер даёт .btn--ghost:hover{color:…}. */
.launcher__bar [data-fullscreen]{flex:none}
/* шаг назад в баре терминала */
.launcher__bar [data-back]{font-size:0;flex:none}
.launcher__bar [data-back]::before{content:"←";font-size:22px;line-height:1;font-weight:700;color:var(--text)}
.launcher__bar [data-back]:hover::before{color:var(--accent-ink)}
.notice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;
  border:1px solid var(--accent);background:rgba(200,255,46,.1)}
.similar{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(110px,11vw,160px),1fr));gap:8px}

/* system screens */
.sys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;align-items:start}
.sys__icon{width:56px;height:56px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;background:var(--wait-bg);color:var(--wait-ink)}
.sys__icon--ok{background:var(--ok-bg);color:var(--ok-ink)}
.sys__icon--no{background:var(--no-bg);color:var(--no-ink)}
.big-404{font-family:var(--font-display);font-weight:900;font-size:clamp(38px,7vw,64px);letter-spacing:-.05em;
  line-height:1;color:var(--accent-ink)}

/* article typography (static pages, promo) */
/* SEO/CMS-текст всегда идёт последним блоком — под сеткой игр или под карточками.
   Собственный верхний отступ, чтобы он не липнул к ним (родительский gap = 10–12px). */
.article{display:flex;flex-direction:column;gap:10px;max-width:78ch;margin-top:18px}
.article p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.article h2,.article h3{margin:8px 0 0}
.article ul,.article ol{margin:0;padding-left:20px;color:var(--muted);font-size:13.5px;line-height:1.6}
.article a{color:var(--accent-ink)}

/* mobile bottom bar */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-chat);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
.tabbar__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.tabbar a{height:52px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-size:10px;color:var(--muted)}
.tabbar a.is-active{color:var(--accent-ink)}

@media (max-width:760px){
  .rail{display:none}
  .header__logo{display:flex}
  .tabbar{display:block}
  .page{padding-bottom:88px}
  .cabinet__main{grid-column:span 1;padding-right:14px}
  .cabinet__aside{border-right:0;border-bottom:1px solid var(--line)}
  .hero{grid-column:span 1;aspect-ratio:16/10;height:auto;min-height:220px}
  /* плейсхолдер-баннер на мобилке: высота по контенту, иначе заголовок обрезается
     верхней кромкой, а абсолютный бейдж ложится поверх него */
  .hero--promo{aspect-ratio:auto;height:auto;min-height:0}
  .hero--promo .promo-slide.is-active{height:auto}
  .hero--promo .hero__badge{position:static;order:-1;align-self:flex-start;margin-bottom:10px}
  .chat{bottom:calc(76px + env(safe-area-inset-bottom))}
  .row{grid-template-columns:1fr 1fr;padding:12px}
}
@media (max-width:520px){
  .header{gap:5px;padding:8px 10px}
  .header .btn{height:44px;padding:0 12px;font-size:12px}
  .lang .mono{display:none}
  /* Флаг сплющивался в вертикальную полоску на реальном iPhone: запрет сжатия стоял на
     img и на кнопке, но сам контейнер .lang оставался сжимаемым flex-элементом шапки —
     строка поиска и «Регистрация» выдавливали его до пары пикселей. Фиксируем контейнер. */
  .lang{flex:none}
  .lang .btn{flex:none;padding:0 10px;min-width:44px;justify-content:center}
  .lang img{flex:none;width:20px;height:14px}
  .search-trigger .ellipsis{display:none}
  /* Пока поле в фокусе, поиск забирает всю шапку: иначе на 390px на ввод остаётся
     ~40px и видно ровно одну букву. Лого, язык и кнопки прячем до потери фокуса. */
  html.is-search-focus .header__logo,
  html.is-search-focus .lang,
  html.is-search-focus .header > .btn,
  html.is-search-focus .header .avatar-btn,
  html.is-search-focus .header .chip-stat,
  html.is-search-focus .header .wager{display:none}
  html.is-search-focus .search-trigger{flex:1 1 100%}
  .hero__title{font-size:clamp(17px,6.4vw,26px)}
  .footer{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:440px){
  .header{gap:5px}
  .wager{display:none}
  /* login stays reachable in the bottom tabbar; keep the primary CTA fully visible */
  .header .open-login{display:none}
}

@keyframes gg-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.65}}
@keyframes gg-glow{0%,100%{box-shadow:0 0 0 0 rgba(200,255,46,0)}50%{box-shadow:0 0 0 6px rgba(200,255,46,.14)}}
/* сердцебиение: удар — короткий доудар — пауза; кольцо тонкое (1px) и уходит в прозрачность */
@keyframes gg-heartbeat{
  0%{box-shadow:0 0 0 1px rgba(200,255,46,.9),0 0 0 0 rgba(200,255,46,.35)}
  14%{box-shadow:0 0 0 1px rgba(200,255,46,.35),0 0 0 6px rgba(200,255,46,0)}
  22%{box-shadow:0 0 0 1px rgba(200,255,46,.9),0 0 0 0 rgba(200,255,46,.28)}
  38%{box-shadow:0 0 0 1px rgba(200,255,46,.3),0 0 0 8px rgba(200,255,46,0)}
  100%{box-shadow:0 0 0 1px rgba(200,255,46,.3),0 0 0 0 rgba(200,255,46,0)}
}
@keyframes gg-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes gg-pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes gg-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes gg-shimmer{from{background-position:-300px 0}to{background-position:300px 0}}
@keyframes gg-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes gg-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.reveal{opacity:0}
.reveal.is-in{animation:gg-rise .55s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* ---------- payment-receipts (P2P card requisites) widget — gogo skin ----------
   Engine DOM/JS untouched; we only restyle .pw-*/.open-payment. The widget's own style.css
   loads AFTER this file and its dark rules key off body.dark-theme (gogo uses html[data-theme]),
   so every override here needs !important to win. Lime accent #C8FF2E, dark surfaces, gogo radii. */
/* The widget ships its own .open-payment-wrapper button; we don't use it — the card
   requisite is one .method--card tile inside the deposit grid (payments.tpl). Hide the
   default button so only our tile triggers the popup (both carry .open-payment → bound). */
.open-payment-wrapper,#cabinet-modal .open-payment-wrapper,#cabinet-modal .open-payment{display:none!important}
/* popups */
.pw-overlay{background:rgba(6,8,12,.74)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:var(--z-top)!important}
/* окно оплаты строго по центру экрана (js переносит оверлей в body — иначе fixed цепляется
   за transform вкладки кассы и центрируется внутри неё) */
#pw-overlay{align-items:center!important;justify-content:center!important}
.pw-popup{max-height:calc(100vh - 40px);overflow:auto}
/* пока окно оплаты открыто, кабинет под ним размыт и не кликается */
body.is-paying #cabinet-modal .modal__box{filter:blur(5px);pointer-events:none}
/* окно суммы для шлюзовых методов — тот же скин, что у окна пополнения картой */
/* position/inset у виджета заданы на #pw-overlay по id, поэтому нашему оверлею их нужно
   выдать отдельно — иначе блок остаётся в потоке и окно прижимается к низу страницы */
#deposit-overlay{position:fixed;inset:0;padding:20px;align-items:center!important;justify-content:center!important}
.pw-deposit-popup{position:relative;width:min(400px,100%)}
.pw-deposit-popup .pw-popup-inner{display:flex;flex-direction:column;gap:16px;padding:20px}
/* шапка: заголовок и способ слева, компактный крестик справа — раньше крупная кнопка
   закрытия висела над центрированным заголовком и наезжала на него */
.dep__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dep__titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.dep__title{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.03em;margin:0}
.dep__method{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dep__method b{font-weight:700;color:var(--text);text-transform:capitalize}
.dep__close{flex:none;width:34px;height:34px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--muted);font-size:13px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:color .2s ease,border-color .2s ease}
.dep__close:hover{color:var(--text);border-color:var(--accent)}
.dep__field{display:flex;flex-direction:column;gap:8px}
.dep__label{font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* пресеты — вспомогательный быстрый выбор, поэтому мелкие: 6 штук в две строки по три */
.pw-deposit-popup .dep__presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pw-deposit-popup .dep__presets .chip{width:100%;height:32px;padding:0;font-size:12px;border-radius:9px;font-weight:700}
/* align-items приходит из .amount-row и сжимал детей по контенту — в колонке нужен stretch,
   иначе сетка пресетов схлопывается до ширины текста */
.pw-deposit-popup .dep__form{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.pw-deposit-popup .dep__form > *{width:100%}
/* поле суммы — главный элемент окна: крупный ввод, заметная рамка и подсветка по фокусу */
.dep__input{position:relative;display:block}
.dep__input .input{width:100%;height:64px;padding:0 68px 0 16px;font:800 24px/1 var(--mono);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-m);
  transition:border-color .2s ease,box-shadow .2s ease}
.dep__input .input:hover{border-color:rgba(200,255,46,.45)}
.dep__input .input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(200,255,46,.16)}
.dep__cur{position:absolute;top:50%;right:16px;transform:translateY(-50%);font-size:13px;font-weight:700;color:var(--muted);pointer-events:none}
.dep__answer{min-height:0}
.dep__answer:empty{display:none}
@media (max-width:420px){.pw-deposit-popup .dep__presets{grid-template-columns:repeat(2,1fr)}}

/* Профиль: поля были во всю ширину кабинета — под ник и имя это лишняя длина.
   Кнопкам добавлен отступ снизу, раньше они прилипали к нижней кромке окна. */
#profile .field .input{max-width:470px}
/* кнопки идут по той же колонке, что и поля: две в ряд с зазором, сверху и снизу отступы */
#profile .profile__actions{max-width:470px;justify-content:center;margin:30px 0 20px}
#profile .profile__actions .btn{flex:1 1 210px;min-width:0}
.pw-popup,.pw-payment-popup,.pw-notification-popup{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:var(--r-l)!important;box-shadow:0 40px 120px rgba(0,0,0,.6)!important;z-index:calc(var(--z-top) + 1)!important}
.pw-popup-inner{background:transparent!important;color:var(--text)!important}
h2.pw-header{font-family:var(--font-display)!important;color:var(--text)!important}
.pw-notification-text,.pw-info{color:var(--text)!important}
.pw-field label{color:var(--muted)!important;text-transform:none!important}
.pw-field input,.pw-field textarea{background:var(--input)!important;border:1px solid var(--line)!important;color:var(--text)!important;border-radius:var(--r-m)!important}
.pw-field input:focus,.pw-field textarea:focus{border-color:var(--accent)!important;outline:none}
/* the requisites card — dark with lime/violet wash, lime card number */
.pw-card{background:linear-gradient(135deg,rgba(200,255,46,.14),rgba(123,92,255,.16)),var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;box-shadow:0 6px 20px rgba(0,0,0,.35)!important}
.pw-open .pw-card-number{color:var(--accent)!important;font-family:var(--mono)!important;font-weight:800!important}
.pw-accent,.pw-info-icon{color:var(--accent-ink)!important}
/* buttons */
.pw-btn{border-radius:var(--r-m)!important;font-weight:800!important}
.btn-filled.pw-go,.btn-filled.pw-confirm{background:var(--accent)!important;color:var(--on-accent)!important;border:none!important;text-transform:none!important;flex:2 1 0!important;font-size:15px!important}
.btn-filled.pw-go:hover,.btn-filled.pw-confirm:hover{filter:brightness(1.08)}
.pw-btn.pw-cancel,.pw-btn.pw-back{flex:1 1 0!important;background:transparent!important;border:1px solid var(--line)!important;color:var(--text)!important;text-transform:none!important;font-weight:700!important;font-size:14px!important}
.pw-btn.pw-cancel:hover,.pw-btn.pw-back:hover{border-color:var(--accent)!important;color:var(--accent-ink)!important}
.pw-upload-btn-wrapper .pw-upload-btn,.pw-upload-btn-wrapper .pw-upload-btn label{background:var(--accent)!important;color:var(--on-accent)!important;font-weight:800!important;border-radius:var(--r-m)!important}
.pw-upload-btn .pw-upload-icon{background:var(--on-accent)!important}
.pw-upload-msg{color:var(--ok-ink)!important}
.pw-error-msg{color:var(--no-ink)!important}
/* notification ✕: widget only recolors it under body.dark-theme (gogo uses html[data-theme]) */
.pw-notification-close::before,.pw-notification-close::after{background:var(--text)!important;opacity:.85}
.pw-notification-close:hover::before,.pw-notification-close:hover::after{background:var(--accent-ink)!important;opacity:1}

/* ---------- number inputs: drop the native spinner (off-theme white arrows) ---------- */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}

/* ---------- catalog deep link ?cat= : no "slots" flash before JS runs ----------
   The engine renders a provider page as "slots", so SSR marks the wrong chip active.
   head.tpl sets html[data-cat] before first paint; these rules move the active look to
   the real category immediately, and dim the (still unfiltered) grid until main.js
   swaps it. If JS never runs the grid stays visible, just dimmed — never blank. */
html[data-cat] .catalog__cats .chip.is-active{background:var(--input);border-color:var(--line);color:var(--text)}
html[data-cat="slots"] .catalog__cats .chip[data-cat="slots"],
html[data-cat="live"]  .catalog__cats .chip[data-cat="live"],
html[data-cat="table"] .catalog__cats .chip[data-cat="table"],
html[data-cat="new"]   .catalog__cats .chip[data-cat="new"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
html[data-cat]:not([data-cat-ready]) .catalog__main [data-games-grid]{opacity:.25;transition:opacity .18s ease}
html[data-cat][data-cat-ready] .catalog__main [data-games-grid]{opacity:1;transition:opacity .18s ease}

/* ---------- top-players leaderboard rank ---------- */
.win__rank{flex:none;width:22px;text-align:center;font:800 12px/1 var(--mono);color:var(--muted)}
.win-list .win:nth-child(1) .win__rank{color:var(--accent-ink)}
.win-list .win:nth-child(2) .win__rank,.win-list .win:nth-child(3) .win__rank{color:var(--text)}

/* ---------- VIP general info (guest / statuses-not-set state) ---------- */
.vip-intro{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:70ch;text-wrap:pretty}
/* The VIP page text column is capped (.article = 78ch); a full-bleed progress card next
   to it read as "the progress bar is wider than the content". Share the same column. */
.vip-progress{max-width:78ch;width:100%}
/* Favourites marker — same star as the game cards, identical in every place it appears */
.chip__star{margin-right:6px;font-size:13px;line-height:1;color:var(--accent-ink)}
.chip.is-active .chip__star{color:var(--on-accent)}
/* rail uses the same glyph, sized to match the mono short-labels around it */
.rail__short--star{font-size:28px;line-height:1;color:var(--accent-ink)}

/* No-art placeholder: a handful of provider covers are genuinely missing on the CDN.
   Instead of an empty tile, print the game title on a branded backdrop — same box, so
   the grid never shifts. */
.game--noart .game__art{background:linear-gradient(145deg,var(--surface-2),var(--art));
  display:flex;align-items:center;justify-content:center;position:relative}
.game--noart .game__art img{display:none}
.game--noart .game__art::after{content:attr(data-title);padding:10px 12px;text-align:center;
  font-family:var(--font-display);font-weight:800;font-size:13px;line-height:1.25;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.rail__item.is-active .rail__short--star{color:var(--on-accent)}
.vip-card .vip-step{width:34px;height:34px;border-radius:11px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font:800 15px/1 var(--mono)}
.vip-perks-card{gap:10px}
.vip-perks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.vip-perks li{position:relative;padding:9px 12px 9px 30px;border-radius:var(--r-m);background:var(--surface-2);border:1px solid var(--line);font-size:12.5px}
.vip-perks li::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--accent)}
.vip-cta{align-items:flex-start;gap:8px}
.vip-cta__row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

/* ---------- бонусы игрока на /promo ----------
   Сетка и карточка те же, что в кабинете; здесь добавлены условия предложения
   (чипы) и прогресс отыгрыша — на странице для них есть место. */
/* Блок живёт в той же колонке, что и текст страницы: контент из админки приходит с
   собственным <style>, где .cms-page{width:80%;max-width:1100px;margin:0 auto}, а секция
   растянута на всю ширину. Без этого правила бонусы уезжали шире текста. */
.promo-mine{display:flex;flex-direction:column;gap:10px;margin-top:22px;width:80%;max-width:1100px;margin-inline:auto}
.promo-mine__title{font-size:22px;margin:0}
/* auto-fill: колонки фиксированной ширины, одна карточка не растягивается на всю строку */
.promo-mine .bonuses-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}
.promo-mine .bonus-card__body{padding:12px;gap:8px;flex:1}
/* CTA к низу карточки: описания у бонусов разной длины, и без этого кнопки
   «Активировать» в ряду встают на разных уровнях. Карточки в гриде тянутся
   на одну высоту, тело забирает остаток, кнопку прижимает auto-отступ. */
.promo-mine .bonus-card .btn{margin-top:auto}
.promo-mine .bonus-card__desc{font-size:12px;line-height:1.5;color:var(--muted)}
.promo-mine__empty{align-items:flex-start;gap:8px}
.bonus-card__meta{display:flex;flex-wrap:wrap;gap:5px}
.bonus-chip{font:700 10.5px/1 var(--font-mono,monospace);letter-spacing:.02em;white-space:nowrap;
  padding:5px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--fg)}
.bonus-card__wager{display:flex;flex-direction:column;gap:5px;padding-top:8px;border-top:1px solid var(--line)}
.bonus-card__wager-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px}
.bonus-card__wager-left{font-size:11px}
/* на узких экранах CMS-текст занимает всю ширину — блок бонусов тоже */
@media (max-width:900px){.promo-mine{width:100%;max-width:none}}

/* ---------- полосы прокрутки в стиле темы ----------
   Раньше контейнеры перечислялись поимённо, и каждый новый список получал системный
   белый скролл — так вылез список валют в регистрации (.sel__list). Правило глобальное:
   дорожка прозрачная, ползунок цвета --scroll-thumb, под курсором — акцент.
   Точечные исключения (.vip-scroll прячет полосу) специфичнее и перебивают его. */
/* scrollbar-color наследуется, scrollbar-width — нет: без правила на * Firefox красил
   вложенные списки, но оставлял им системную ширину. */
html{scrollbar-color:var(--scroll-thumb) transparent}
*{scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px;
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}
/* всплывающие списки узкие — там 10px съедали бы строку */
.sel__list::-webkit-scrollbar,.search__results::-webkit-scrollbar,.catalog__provs::-webkit-scrollbar,
.win-list::-webkit-scrollbar,.chat__body::-webkit-scrollbar,.rows::-webkit-scrollbar{width:8px}
.sel__list::-webkit-scrollbar-thumb,.search__results::-webkit-scrollbar-thumb,.catalog__provs::-webkit-scrollbar-thumb,
.win-list::-webkit-scrollbar-thumb,.chat__body::-webkit-scrollbar-thumb,.rows::-webkit-scrollbar-thumb{border-width:2px}

/* ---------- кабинет: одна высота на все вкладки ----------
   Список бонусов тянул окно вниз, и высота прыгала от вкладки к вкладке. Фиксируем высоту
   окна и скроллим содержимое внутри: и боковое меню, и правую колонку. */
.modal__box.cabinet{height:min(660px,calc(100dvh - 48px));max-height:calc(100dvh - 48px)}
.cabinet__aside{min-height:0;overflow-y:auto}
.cabinet__main{min-height:0;overflow-y:auto}
@media (max-width:760px){
  /* в одну колонку фиксированная высота ни к чему — скроллим окно целиком */
  .modal__box.cabinet{height:auto;max-height:calc(100dvh - 24px);overflow-y:auto}
  .cabinet__aside,.cabinet__main{overflow:visible}
}

/* ---------- правки по итогам QA (три независимых прогона) ---------- */

/* Панель «Топ 10» тянулась по высоте героя: под тремя строками оставалось до 290px пустоты. */
.hero-grid{align-items:start}

/* Подписи бокового рельса резались на 4–8px («Настольн…», «Bütün oyunla…») из-за кегля 7.5px. */
.rail__name{font-size:8.5px;line-height:1.05}

/* Провайдеры без логотипа показывали обрубок в одну строку («AMATIC A…»). Две строки влезают целиком. */
.prov__txt{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:clip}

@media (max-width:760px){
  /* .tabbar фиксирован снизу (52px + отступы). Без запаса он резал последнюю строку футера:
     «Лицензия и реквизиты оператора» пополам, копирайт целиком. */
  .footer{padding-bottom:84px}
}

@media (max-width:520px){
  /* Бейдж был absolute и ложился поверх второй строки заголовка героя: «50% на [БЕЙДЖ]й депозит». */
  .hero__badge{position:static;align-self:flex-start;margin-bottom:8px}
}

@media (min-width:761px) and (max-width:1023px){
  /* auto-fit давал в этом диапазоне две равные колонки: фильтр забирал ~49% ширины,
     играм оставалось две плитки и чёрный столб под панелью. Фиксируем фильтру 240px. */
  .catalog{grid-template-columns:240px minmax(0,1fr)}
  /* hero-grid схлопывался в одну колонку, но панель «Топ 10» держала ширину старой — справа дыра 412px. */
  .hero-grid{grid-template-columns:1fr}
}


/* =====================================================================
   BOMGO skin (DESIGN-CANON v1.0). Overrides only — engine classes untouched.
   ===================================================================== */
html,body{background:#101014}
:focus-visible{outline:2px solid #EC352D;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* left menu */
.rail{flex:0 0 232px;align-items:stretch;gap:4px;padding:18px 12px;background:#15151B;border-right:1px solid #22222A}
.rail__logo{width:auto;height:44px;border-radius:0;justify-content:flex-start;padding:0 10px;margin-bottom:14px;background:none}
.rail__logo img{height:28px;width:auto;object-fit:contain}
.rail__logo .rail__logo-mark{display:none}
.rail__item{width:auto;min-height:44px;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 12px;border:0;border-radius:10px;
  background:transparent;color:rgba(255,255,255,.72);font:600 14px/1 var(--font-text)}
.rail__item i{font-size:20px;flex:none}
.rail__item:hover{transform:none;background:#22222A;color:#fff;border-color:transparent}
.rail__item.is-active{background:rgba(236,53,45,.14);color:#fff;border-color:transparent}
.rail__item.is-active i{color:#EC352D}
.rail__name{font-size:14px;opacity:1;line-height:1.2;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail__star{width:20px;text-align:center;color:#EC352D;font-size:16px;flex:none}
.rail__age{display:flex;align-items:center;gap:10px;padding:12px;color:rgba(255,255,255,.55);font:600 12px/1.4 var(--font-text)}
.rail__age .rail__name{font-size:12px;white-space:normal}
.age{width:auto;height:auto;border-radius:6px;border:1px solid rgba(255,255,255,.3);padding:3px 6px;font:800 12px/1 var(--font-text);color:rgba(255,255,255,.75)}
@media (max-width:1200px) and (min-width:901px){
  .rail{flex-basis:76px;padding:14px 8px;align-items:center}
  .rail__logo{padding:0;justify-content:center}
  .rail__logo .rail__logo-full{display:none}
  .rail__logo .rail__logo-mark{display:block;width:40px;height:40px}
  .rail__item{width:60px;min-height:54px;flex-direction:column;justify-content:center;gap:4px;padding:4px}
  .rail__name{font-size:10px;max-width:56px}
  .rail__age .rail__name{display:none}
}
@media (max-width:900px){
  .rail{display:none}
  .header__logo{display:flex}
  .tabbar{display:block}
  .page{padding-bottom:88px}
}

/* header */
.header{min-height:68px;padding:12px var(--pad);background:#15151B;border-bottom:1px solid #22222A;gap:12px}
.search-trigger{flex:0 1 380px;height:44px;border-radius:10px;background:#1E1E25;border-color:#2A2A33}
.search-trigger:hover,.search-trigger:focus-within{border-color:#EC352D}
.chip-stat,.avatar-btn,.wager{height:44px;border-radius:10px;background:#1E1E25;border-color:#2A2A33}
.chip-stat__label{font:600 11px/1 var(--font-text);letter-spacing:0;color:rgba(255,255,255,.5)}
.chip-stat__value{font:800 15px/1.3 var(--font-text);font-variant-numeric:tabular-nums}
.header__logo img{height:22px}
@media (max-width:420px){.header__logo img{content:url("../img/bomgo-mark.png");height:32px;width:32px}}

/* buttons */
.btn{height:44px;border-radius:10px;font:800 14px/1 var(--font-text);padding:0 20px}
.btn--primary{background:#EC352D;color:#fff;filter:none}
.btn--primary:hover{background:#FF4A40;color:#fff;filter:none}
.btn--primary:active{background:#C92A23}
.btn--pulse{animation:none!important}
.btn--ghost{border-color:#3A3A44;color:#fff}
.btn--ghost:hover{border-color:#fff;color:#fff}
.btn--alt{background:#1E1E25;border-color:#2A2A33}

/* hero */
.hero-grid{gap:12px}
.hero{border-radius:14px;border:0;background:#0B0709}
.hero:hover{transform:none}
.hero--promo{min-height:300px;background:#0B0709;justify-content:center;padding:0}
.hero--promo .promo-slide.is-active{height:auto;min-height:inherit}
.hero-brand{position:relative;justify-content:center!important;gap:14px;padding:44px 48px;max-width:100%}
.hero-brand__img{position:absolute;inset:0;width:100%;height:100%}
.hero-brand__img--m{display:none}
@media (max-width:640px){.hero-brand__img--d{display:none}.hero-brand__img--m{display:block}}
.hero-brand__img{object-fit:cover;object-position:right 22%;opacity:1}
.hero-brand__wash{background:linear-gradient(90deg,rgba(9,5,7,.9) 22%,rgba(9,5,7,0) 55%)}
.hero-brand__mark{position:relative;width:44px;height:44px}
.hero-brand .hero__title{font:800 clamp(24px,2.7vw,38px)/1.12 var(--font-display);letter-spacing:-.02em;max-width:520px}
.hero-brand .hero__text{font:500 clamp(14px,1.3vw,18px)/1.4 var(--font-text);color:rgba(255,255,255,.8);margin:0}
.hero-brand .hero__actions{margin-top:6px}
.hero-brand .btn--primary{height:50px;padding:0 28px;font-size:15px}
@media (max-width:640px){
  .hero--promo{min-height:196px}
  .hero-brand{padding:16px;gap:8px}
  .hero-brand__img{object-position:right center}
  .hero-brand__wash{background:linear-gradient(90deg,rgba(9,5,7,.92) 30%,rgba(9,5,7,0) 62%)}
  .hero-brand__mark{display:none}
  .hero-brand .hero__title,.hero-brand .hero__text{max-width:180px}
  .hero-brand .hero__title{font-size:17px}
  .hero-brand .hero__text{font-size:13px}
  .hero-brand .btn--primary{height:44px;padding:0 16px;font-size:13px}
}

/* chips */
.chips{gap:8px;padding:12px var(--pad) 4px}
.chip{height:38px;border-radius:999px;background:#1E1E25;border-color:#2A2A33;font:700 13px/1 var(--font-text)}
.chip:hover{border-color:#EC352D}
.chip.is-active{background:#EC352D;border-color:#EC352D;color:#fff}

/* game card */
.games{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 12px}
@media (min-width:1700px){.games{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:1200px){.games{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.games{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.games{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}}
.game{border:0;border-radius:10px;background:transparent;overflow:visible;box-shadow:none}
.game:hover{transform:none;box-shadow:none;border-color:transparent}
.game__art{border-radius:10px;background:#1C1C23}
.game__art img{object-fit:cover}
.game__badge{top:8px;left:8px;font:800 10px/1 var(--font-text);padding:5px 7px;border-radius:6px;background:#fff;color:#101014}
.game__badge--hot{background:#EC352D;color:#fff}
.game__fav{top:6px;right:6px;z-index:2;width:32px;height:32px;border-radius:8px;background:rgba(16,16,20,.6);color:rgba(255,255,255,.7);font-size:16px}
.game__fav.is-active{color:#EC352D}
.game__actions{z-index:1}
.game__body{position:static;padding:8px 0 0;gap:3px}
.game__name{font:700 14px/1.25 var(--font-text)}
.game__prov{font:500 12px/1.2 var(--font-text);color:rgba(255,255,255,.5)}
.game__actions{position:absolute;left:0;right:0;top:0;aspect-ratio:3/2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(16,16,20,.74);border-radius:10px;opacity:0;pointer-events:none;transition:opacity .18s ease}
.game:hover .game__actions,.game:focus-within .game__actions{opacity:1;pointer-events:auto}
.game__play{flex:none;min-width:112px;height:38px;border-radius:10px;background:#EC352D;color:#fff;font:800 14px/1 var(--font-text);filter:none}
.game__play:hover{background:#FF4A40;color:#fff;filter:none}
.game__demo{min-width:112px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.4);color:#fff;font:700 13px/1 var(--font-text)}
.game__demo:hover{border-color:#fff;color:#fff}
@media (hover:none){
  .game__actions{opacity:1;pointer-events:none;flex-direction:row;align-items:flex-end;justify-content:stretch;gap:5px;padding:5px;
    background:linear-gradient(0deg,rgba(16,16,20,.88),rgba(16,16,20,0) 48%)}
  .game__play,.game__demo{pointer-events:auto;flex:1;min-width:0;height:36px;border-radius:6px;font-size:13px}
  .game__demo{background:rgba(16,16,20,.6);border-color:rgba(255,255,255,.35)}
}
.game--noart .game__art::after{font:700 12px/1.3 var(--font-text);color:rgba(255,255,255,.45)}

/* ticker (top wins) */
.ticker{border-radius:10px;background:#1A1A21;border-color:#2A2A33}
.ticker__sum{color:#4ADE80;font-variant-numeric:tabular-nums}

/* forms, modals, tabs */
.input,.select,.textarea{height:48px;border-radius:10px;background:#101014;border-color:#2E2E38;font-size:16px}
.input:focus,.select:focus,.textarea:focus{border-color:#EC352D}
.modal{background:var(--scrim);backdrop-filter:none;overscroll-behavior:contain}
.modal__box{border-radius:14px;background:#16161C;border-color:#2E2E38;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal__title{font:700 20px/1.25 var(--font-display)}
.modal__close{border-radius:10px}
.tab{border:0;border-radius:10px;background:transparent;color:rgba(255,255,255,.7);font:700 14px/1 var(--font-text)}
.tab:hover{background:#22222A;color:#fff}
.tab.is-active{background:rgba(236,53,45,.14);color:#fff;border-color:transparent}
.empty{border:0;border-radius:14px;background:transparent;align-items:flex-start;text-align:left}

/* payment widgets skin (engine markup untouched) */
.payment__item{border-radius:10px;background:#1E1E25;border:1px solid #2A2A33}
.payment__item:hover{border-color:#EC352D}
.payitem__img{background:#fff;border-radius:10px}
.pay-tooltip{background:#1C1C23;border:1px solid #2E2E38;border-radius:14px;color:#fff}
.pay-tooltip__summ label{border-radius:10px;background:#1E1E25;border:1px solid #2A2A33}
.pay-tooltip__summ label.active{border-color:#EC352D;background:rgba(236,53,45,.14)}
.pay-tooltip__button,.pw-go,.pw-confirm{background:#EC352D!important;color:#fff!important;border-radius:10px!important;min-height:48px}
.pw-popup,.pw-notification-popup{background:#1C1C23!important;color:#fff!important;border:1px solid #2E2E38;border-radius:14px!important}
.pw-field input,.pw-field textarea{background:#101014!important;color:#fff!important;border:1px solid #2E2E38!important;border-radius:10px!important}
.pw-btn{border-radius:10px!important}
.pw-notification-close::before,.pw-notification-close::after{background:#fff!important}
.answer.fail,.answer .fail{color:#FF6B61}
.answer.success,.answer .success{color:#4ADE80}

/* bottom bar */
.tabbar{background:#15151B;border-top:1px solid #22222A;padding-top:4px}
.tabbar a{height:56px;font:700 11px/1 var(--font-text);color:rgba(255,255,255,.6);gap:4px}
.tabbar a i{font-size:24px}
.tabbar a.is-active{color:#EC352D}

/* support launcher: desktop only (tab bar widths have no FAB) */
.chat__fab{background:#EC352D;color:#fff;box-shadow:0 10px 30px rgba(236,53,45,.35)}
.chat__panel{background:#1C1C23;border:1px solid #2E2E38;border-radius:14px}
@media (max-width:900px){.chat{display:none}}

/* footer */
.footer{display:grid;grid-template-columns:minmax(220px,1.4fr) 1fr 1fr 1.2fr;gap:24px 48px;padding:32px var(--pad) 28px;border-top:1px solid #22222A}
.footer__col--brand img{height:22px;width:auto}
.footer__col--brand .muted,.footer__col--legal .muted{font-size:13px;line-height:1.5}
.footer__title{font:800 12px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.footer a{font:600 14px/1.3 var(--font-text);color:rgba(255,255,255,.8);opacity:1;min-height:28px;display:flex;align-items:center}
.footer a:hover{color:#fff}
@media (max-width:900px){.footer{grid-template-columns:1fr 1fr;gap:20px;padding-bottom:96px}.footer__col--brand,.footer__col--legal{grid-column:1/-1}.footer a{min-height:36px}}

/* links */

/* datepicker (profile birthday) */
.ui-datepicker{background:#1C1C23;border:1px solid #2E2E38;border-radius:10px;color:#fff;padding:8px}
.ui-datepicker a{color:#fff}
.ui-datepicker .ui-state-active,.ui-datepicker .ui-state-hover{background:#EC352D;color:#fff;border-radius:6px}

/* CMS article column (= /promo width) */
.article .cms-page{max-width:760px;width:100%;margin-inline:0}
.article .cms-page img{max-width:320px;height:auto}
.article .cms-page table{display:block;overflow-x:auto}

/* player notification (app.js) */
.bnotif{position:fixed;top:84px;right:24px;z-index:70;width:min(372px,calc(100vw - 20px));background:#1C1C23;border:1px solid #2E2E38;border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);padding:20px;display:flex;flex-direction:column;gap:14px;color:#fff;font-family:var(--font-text)}
.bnotif__head{display:flex;align-items:flex-start;gap:12px}
.bnotif__icon{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(236,53,45,.16);color:#EC352D;font-size:24px}
.bnotif--telegram .bnotif__icon{background:rgba(42,171,238,.16);color:#2AABEE}
.bnotif__titles{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.bnotif__label{font:700 11px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:#EC352D}
.bnotif__title{font:700 17px/1.25 var(--font-display)}
.bnotif__x{flex:none;width:44px;height:44px;margin:-10px -10px 0 0;border:0;border-radius:10px;background:transparent;color:rgba(255,255,255,.6);cursor:pointer}
.bnotif__x:hover{background:#2A2A33;color:#fff}
.bnotif__text{margin:0;font:500 14px/1.5 var(--font-text);color:rgba(255,255,255,.72)}
.bnotif__phone{height:48px;display:flex;align-items:center;border-radius:10px;background:#101014;border:1px solid #2E2E38;overflow:hidden}
.bnotif__phone.is-error{border-color:#FF6B61}
.bnotif__phone span{height:100%;display:flex;align-items:center;padding:0 12px;border-right:1px solid #2E2E38;font-weight:700}
.bnotif__phone input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:#fff;padding:0 12px;font:600 16px var(--font-text);outline:none}
.bnotif__consent{display:flex;gap:10px;align-items:flex-start;font:500 13px/1.4 var(--font-text);color:rgba(255,255,255,.7);cursor:pointer}
.bnotif__consent input{accent-color:#EC352D;width:18px;height:18px;margin:1px 0 0}
.bnotif__answer{font:600 14px/1.4 var(--font-text)}
.bnotif__answer.success{color:#4ADE80}.bnotif__answer.fail{color:#FF6B61}
.bnotif__actions{display:flex;gap:8px}
.bnotif__actions .bnotif__go{flex:1}
@media (max-width:900px){.bnotif{top:auto;right:10px;left:10px;width:auto;bottom:calc(78px + env(safe-area-inset-bottom))}}

/* lobby shelves + bonus strip */
.shelf{display:flex;flex-direction:column;gap:14px;padding:0 var(--pad)}
.shelf__head{display:flex;align-items:baseline;gap:12px}
.shelf__title{font:700 clamp(16px,1.6vw,21px)/1.2 var(--font-display)}
.shelf__count{font:600 14px var(--font-text)}
.shelf__all{margin-left:auto;font:700 14px var(--font-text);color:#EC352D;min-height:36px;display:flex;align-items:center}
.lobby-provs__label{flex:none;font:700 13px var(--font-text);color:rgba(255,255,255,.5);margin-right:4px}
.chip__count{margin-left:8px;opacity:.6;font-weight:600;font-variant-numeric:tabular-nums}
.bonus-strip{display:flex;align-items:center;gap:16px;margin:0 var(--pad);padding:14px 16px;border-radius:14px;background:#1A1A21;border:1px solid #2A2A33;color:#fff;cursor:pointer;text-align:left;width:auto}
.bonus-strip>i{font-size:22px;color:#EC352D;flex:none}
.bonus-strip__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.bonus-strip__row{display:flex;justify-content:space-between;gap:12px;font:700 14px var(--font-text);white-space:nowrap}
.bonus-strip .bar{height:8px;border-radius:999px;background:#2A2A33}
.bonus-strip .bar>i{background:#EC352D}
.bonus-strip__cta{flex:none;height:44px;padding:0 18px;border-radius:10px;border:1px solid #3A3A44;display:flex;align-items:center;font:700 14px var(--font-text)}
@media (max-width:600px){.bonus-strip__cta{display:none}}

.page{padding-top:24px;gap:24px}
@media (max-width:900px){.page{padding-top:16px;gap:20px}}
@media (min-width:901px){.list-tabs{display:none}}
.lobby-provs{background:none;position:static;border:0;padding:0 var(--pad);box-shadow:none}
.hero-brand .hero__title{max-width:440px}
.footer__col--brand img{width:auto!important;max-width:140px;height:22px!important;object-fit:contain;align-self:flex-start}
.footer__col--legal .age,.footer .age{align-self:flex-start}

/* BOMGO header: 68px, 380px search launcher, radius 10 */
.header{height:68px;min-height:68px;gap:12px;padding:0 24px;background:#15151B;border-bottom:1px solid #22222A}
.header .btn{height:44px;border-radius:10px;padding:0 20px;font:800 14px/1 var(--font-text)}
.header .btn--ghost{border-color:#3A3A44}
.header .btn--ghost:hover{border-color:#fff;color:#fff}
.header .btn--primary:hover{filter:none;background:#FF4A40}
.lang .btn{height:44px;border-radius:10px;border:1px solid #2A2A33;gap:8px;padding:0 12px;font:700 13px/1 var(--font-text)}
.lang .ph-caret-down{font-size:14px;opacity:.7}
.search-trigger{flex:0 0 380px;width:380px;max-width:380px;height:44px;margin-right:auto;gap:10px;padding:0 14px;border-radius:10px;background:#1E1E25;border:1px solid #2A2A33;color:rgba(255,255,255,.5);font:500 15px/1 var(--font-text);cursor:pointer}
.search-trigger:hover{border-color:#3A3A44}
.search-trigger .ph{font-size:20px;color:rgba(255,255,255,.55);flex:none}
.search-trigger__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-trigger.has-q .search-trigger__label{color:#fff}
@media (min-width:901px){.header .header__logo{display:none!important}}
.lobby-provs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lobby-provs .chip{height:38px;padding:0 14px;border-radius:999px;background:transparent;border:1px solid #2A2A33;color:#fff;font:700 13px/1 var(--font-text)}
.lobby-provs .chip:hover{border-color:#EC352D;background:transparent;color:#fff}

/* BomgoSearch: scrim under the header, to the right of the rail */
.search{position:fixed;inset:auto;top:68px;left:var(--rail,232px);right:0;bottom:0;z-index:40;display:none;background:transparent;backdrop-filter:none;padding:0}
.search.is-open{display:block;animation:none}
.search [hidden]{display:none!important}
.search__scrim{position:absolute;inset:0;background:rgba(8,8,10,.6)}
.search__box{position:absolute;top:8px;left:16px;width:640px;max-width:calc(100% - 32px);max-height:min(560px,calc(100% - 16px));background:#1C1C23;border:1px solid #2E2E38;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);display:flex;flex-direction:column;overflow:hidden}
.search__head{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 12px;border-bottom:1px solid #2A2A33}
.search__field{flex:1;min-width:0;height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:10px;background:#101014;border:1px solid #EC352D}
.search__field .ph{font-size:20px;color:rgba(255,255,255,.6);flex:none}
.search__field input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;color:#fff;font:600 16px/1 var(--font-text)}
.search__field input::placeholder{color:rgba(255,255,255,.45)}
.search__x{width:28px;height:28px;border:0;border-radius:50%;background:#2A2A33;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.search__cancel{flex:none;height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:rgba(255,255,255,.75);cursor:pointer;font:700 14px/1 var(--font-text)}
.search__cancel:hover{background:#2A2A33;color:#fff}
.search__body{flex:1;min-height:0;overflow-y:auto;padding:14px 12px 16px;display:flex;flex-direction:column;gap:12px}
[data-search-hint]{display:flex;flex-direction:column;gap:12px}
.search__hint{font:600 13px/1.4 var(--font-text);color:rgba(255,255,255,.6)}
.search__kicker{font:800 12px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.search__pills{display:flex;flex-wrap:wrap;gap:8px}
.search__pill{height:38px;padding:0 14px;border-radius:999px;background:#23232B;border:1px solid #2E2E38;color:#fff;cursor:pointer;font:700 13px/1 var(--font-text)}
.search__pill:hover{border-color:#EC352D}
.search__count{font:600 13px/1 var(--font-text);color:rgba(255,255,255,.6);padding:0 6px 6px}
.search__row{display:flex;align-items:center;gap:12px;padding:6px;border-radius:10px}
.search__row:hover{background:#24242C}
.search__thumb{flex:none;width:84px;aspect-ratio:3/2;height:auto;border-radius:10px;object-fit:cover;background:#26262E}
.search__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.search__name{font:700 15px/1.2 var(--font-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search__name mark{background:rgba(236,53,45,.28);color:#fff;border-radius:3px;padding:0 1px}
.search__prov{font:500 12px/1.2 var(--font-text);color:rgba(255,255,255,.55)}
.search__acts{flex:none;display:flex;gap:6px}
.search__demo,.search__play{height:36px;padding:0 12px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font:700 13px/1 var(--font-text);cursor:pointer;text-decoration:none}
.search__demo{background:transparent;border:1px solid #3A3A44;color:#fff}
.search__demo:hover{border-color:#fff;color:#fff}
.search__play{background:#EC352D;border:0;color:#fff;font-weight:800;padding:0 14px}
.search__play:hover{background:#FF4A40;color:#fff}
.search__more{margin-top:8px;height:44px;width:100%;border-radius:10px;background:#23232B;border:1px solid #2E2E38;color:#fff;cursor:pointer;font:700 14px/1 var(--font-text)}
.search__more:hover{border-color:#EC352D}
.search__empty{padding:28px 6px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.search__empty .ph{font-size:36px;color:#EC352D}
.search__empty-title{font:700 17px/1.25 var(--font-display)}
.search__row--sk .search__thumb{background:#26262E}
.search__row--sk .sk{display:block;height:12px;width:55%;border-radius:6px;background:#26262E}
.search__row--sk .sk+.sk{height:10px;width:30%;background:#222229}
@media (max-width:900px){
  .header{height:60px;min-height:60px;padding:0 14px;gap:8px}
  .header .btn{height:40px;padding:0 12px;font-size:13px}
  .lang .mono,.lang .ph-caret-down{display:none}
  .lang .btn{width:44px;height:40px;padding:0;justify-content:center}
  .search-trigger{flex:0 0 44px;width:44px;max-width:44px;height:40px;margin-right:0;padding:0;justify-content:center}
  .search-trigger__label{display:none}
  .search.is-open{top:0;left:0;right:0;bottom:0;z-index:60}
  .search__scrim{display:none}
  .search__box{top:0;left:0;width:100%;max-width:none;height:100%;max-height:none;border-radius:0;border-color:transparent;box-shadow:none}
  .lobby-provs .chip{height:36px;border-radius:10px;font-size:12px}
}

/* =====================================================================
   BOMGO pass: rail, marquee, auth, chat, pulses
   ===================================================================== */

/* Catalog pages start icon-only. flex-basis animates; --rail does not. */
html.is-catalog .rail{
  /* keep sticky from base .rail — position:relative made the sidebar scroll away on /popular etc. */
  position:sticky;top:0;align-self:flex-start;overflow:visible;
  flex:0 0 76px;flex-basis:76px;
  padding:18px 8px 14px;
  align-items:center;
  transition:flex-basis .32s ease, padding .32s ease;
}
html.is-catalog.rail-open .rail{flex-basis:232px;padding:18px 12px;align-items:stretch}
html.is-catalog .rail__logo{position:relative;justify-content:center;padding:0;height:44px}
html.is-catalog .rail__logo-full{
  position:absolute;left:10px;top:8px;height:28px;max-width:0;opacity:0;overflow:hidden;pointer-events:none;
  transition:opacity .22s ease, max-width .32s ease;
}
html.is-catalog .rail__logo-mark{display:block;width:40px;height:40px;opacity:1;transition:opacity .22s ease}
html.is-catalog.rail-open .rail__logo{justify-content:flex-start;padding:0 10px}
html.is-catalog.rail-open .rail__logo-full{position:static;max-width:140px;opacity:1;overflow:visible;pointer-events:auto}
html.is-catalog.rail-open .rail__logo-mark{position:absolute;width:0;height:0;opacity:0;overflow:hidden}
html.is-catalog .rail__item{
  width:52px;min-height:44px;flex-direction:row;justify-content:center;gap:0;padding:0;
  transition:width .32s ease, padding .32s ease, gap .32s ease;
}
@media (max-width:1200px) and (min-width:901px){
  html.is-catalog.rail-open .rail__logo .rail__logo-full{display:block}
  html.is-catalog .rail__logo .rail__logo-mark{display:block}
  html.is-catalog.rail-open .rail__logo .rail__logo-mark{display:none}
}
html.is-catalog.rail-open .rail__item{width:auto;justify-content:flex-start;gap:12px;padding:0 12px}
html.is-catalog .rail__name{
  max-width:0;opacity:0;overflow:hidden;
  transition:max-width .32s ease, opacity .2s ease;
}
html.is-catalog.rail-open .rail__name{max-width:148px;opacity:1}
html.is-catalog .rail__age{justify-content:center;padding:12px 0}
html.is-catalog .rail__age .rail__name{display:block}
html.is-catalog:not(.rail-open) .rail__age .rail__name{max-width:0;opacity:0}
.rail__toggle{
  display:none;position:relative;top:auto;right:auto;z-index:12;margin:-4px auto 8px;
  width:24px;height:24px;padding:0;border-radius:50%;
  border:1px solid #3A3A44;background:#1E1E25;color:#fff;cursor:pointer;
  place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:background .2s ease, border-color .2s ease;
}
html.is-catalog.rail-open .rail__toggle{position:absolute;top:26px;right:10px;margin:0}
.rail__toggle i{font-size:12px;line-height:1;transition:transform .32s ease}
html.is-catalog .rail__toggle{display:grid}
html.is-catalog.rail-open .rail__toggle i{transform:rotate(180deg)}
.rail__toggle:hover{background:#EC352D;border-color:#EC352D;color:#fff}
@media (max-width:900px){
  .rail__toggle{display:none!important}
}

html.is-catalog .search{left:76px;transition:left .32s ease}
html.is-catalog.rail-open .search{left:232px}
@media (max-width:900px){
  html.is-catalog .search, html.is-catalog.rail-open .search{left:0}
}

/* home providers: one scrolling row, no scrollbar */
.prov-marquee{display:flex;align-items:center;gap:12px;padding:4px var(--pad) 8px;overflow:hidden}
.prov-marquee__view{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.prov-marquee__track{display:flex;width:max-content;animation:prov-run 55s linear infinite}
.prov-marquee__row{display:flex;align-items:center;gap:8px;padding-right:8px;flex:none}
.prov-marquee .chip{height:38px;padding:0 14px;border-radius:999px;background:transparent;border:1px solid #2A2A33;color:#fff;font:700 13px/1 var(--font-text);flex:none}
.prov-marquee .chip:hover{border-color:#EC352D;background:transparent;color:#fff}
@media (hover:hover){
  .prov-marquee:hover .prov-marquee__track{animation-play-state:paused}
}
.prov-marquee.is-paused .prov-marquee__track{animation-play-state:paused}
@keyframes prov-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){
  .prov-marquee__label{display:none}
  .prov-marquee{padding-left:12px;padding-right:12px}
  .prov-marquee .chip{height:34px;padding:0 12px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .prov-marquee__view{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prov-marquee__track{animation:none!important}
  .prov-marquee__row[aria-hidden="true"]{display:none}
}

/* catalog filter: active provider is a red outline, not a solid bar */
.catalog__prov.is-active{background:rgba(236,53,45,.12);border-color:#EC352D;color:#fff}
.catalog__cats .chip.is-active{background:#EC352D;border-color:#EC352D;color:#fff}

/* language menu */
.lang{position:relative}
.lang__menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:30;
  width:240px;padding:8px;border-radius:12px;
  background:#1C1C23;border:1px solid #2A2A33;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:2px;
}
.lang__menu[hidden]{display:none}
.lang__kicker{font:700 11px/1 var(--font-text);color:rgba(255,255,255,.45);padding:6px 10px 4px}
.lang__opt{
  display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:8px;
  color:#fff;text-decoration:none;font:600 14px/1 var(--font-text);
}
.lang__opt:hover{background:#22222A}
.lang__opt.is-active{background:rgba(236,53,45,.12)}
.lang__opt .ph-check{margin-left:auto;color:#EC352D;font-size:16px}
.lang .ph-caret-down{font-size:12px;opacity:.7;transition:transform .2s ease}
.lang.is-open .ph-caret-down{transform:rotate(180deg)}

/* auth forms */
.modal__box.auth{
  width:min(440px,calc(100vw - 24px));
  padding:28px 28px 22px;gap:14px;
  background:#1C1C23;border:1px solid #2A2A33;border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.auth__top{display:flex;align-items:center;justify-content:space-between;min-height:28px}
.auth__logo{height:26px;width:auto}
.auth .modal__close{position:static;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:0}
.auth .modal__close i{font-size:16px}
.auth__tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:#101014}
.auth__tab{
  flex:1;height:36px;border:0;border-radius:8px;background:transparent;cursor:pointer;
  color:rgba(255,255,255,.55);font:700 13px/1 var(--font-text);
}
.auth__tab.is-active{background:#2A2A33;color:#fff}
.auth__title{font:800 22px/1.2 var(--font-display);letter-spacing:-.02em}
.auth__sub{margin-top:-6px;font:500 13px/1.45 var(--font-text);color:rgba(255,255,255,.6)}
.auth__field{display:flex;flex-direction:column;gap:6px;font:600 12px/1 var(--font-text);color:rgba(255,255,255,.62)}
.auth__labelrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.auth__forgot{color:#EC352D;font:700 12px/1 var(--font-text);text-decoration:none}
.auth__forgot:hover{color:#FF6B61}
.auth__pass{position:relative;display:block}
.auth__pass .input{width:100%;height:48px;padding-right:44px;border-radius:10px;background:#101014;border-color:#2E2E38}
.auth .input{height:48px;border-radius:10px;background:#101014;border:1px solid #2E2E38}
.auth .input:hover{border-color:#3A3A44}
.auth .input:focus{border-color:#EC352D;box-shadow:0 0 0 4px rgba(236,53,45,.16)}
.auth__eye{
  position:absolute;top:0;right:0;width:44px;height:48px;border:0;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;
}
.auth__eye:hover{color:#fff}
.auth__curs{display:flex;gap:8px}
.auth__cur{
  flex:1;height:44px;border-radius:10px;border:1px solid #2E2E38;background:#101014;color:#fff;cursor:pointer;
  font:800 14px/1 var(--font-text);
}
.auth__cur:hover{border-color:#EC352D}
.auth__cur.is-on{border-color:#EC352D;background:rgba(236,53,45,.12);color:#fff}
.auth__consent{font:500 12.5px/1.4 var(--font-text);color:rgba(255,255,255,.72)}
.auth__consent a{color:#EC352D;text-decoration:underline}
.auth__cta{height:52px;border-radius:12px;font-size:15px}
.auth__foot{margin:0;text-align:center;font:600 13px/1.4 var(--font-text);color:rgba(255,255,255,.62)}
.auth__foot a{color:#EC352D;text-decoration:none;font-weight:800}
.auth__foot a:hover{color:#FF6B61}
.auth .check{align-items:flex-start}
@media (max-width:520px){
  .modal__box.auth{padding:20px 16px 16px}
  .auth__title{font-size:18px}
}

/* chat launcher matches the mock, not the leftover green widget color */
.chat__fab{
  width:56px;height:56px;border-radius:50%;background:#EC352D;color:#fff;
  right:auto;box-shadow:0 10px 30px rgba(236,53,45,.35);
  animation:gg-heartbeat 2.6s ease-out infinite;
}
.chat__fab:hover{transform:translateY(-2px);background:#FF4A40}
.woot-widget-bubble,
.woot-widget-bubble.woot-elements--right{
  width:56px!important;height:56px!important;min-width:56px!important;
  border-radius:50%!important;background:#EC352D!important;background-color:#EC352D!important;
  box-shadow:0 10px 30px rgba(236,53,45,.35)!important;
  right:24px!important;bottom:24px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;line-height:0!important;
}
.woot-widget-bubble svg{
  margin:0!important;position:static!important;
  width:24px!important;height:24px!important;flex:none;
}
.woot-widget-bubble .bomgo-chat-icon{
  color:#fff!important;font-size:24px;line-height:24px;width:24px;height:24px;
  margin:0!important;text-align:center;pointer-events:none;
}
/* Close glyph is two bars sized for a 64px bubble (left 32 / top 20). On 56px they sit low-right. */
.woot-widget-bubble.woot--close::before,
.woot-widget-bubble.woot--close::after{
  left:27px!important;top:16px!important;width:2px!important;height:24px!important;margin:0!important;
}
.woot-widget-holder{z-index:90!important}

/* pulses and hovers stay on the red accent, without a scale jump */
@keyframes gg-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes gg-glow{0%,100%{box-shadow:0 0 0 0 rgba(236,53,45,0)}50%{box-shadow:0 0 0 6px rgba(236,53,45,.18)}}
@keyframes gg-heartbeat{
  0%{box-shadow:0 0 0 0 rgba(236,53,45,.45)}
  70%{box-shadow:0 0 0 10px rgba(236,53,45,0)}
  100%{box-shadow:0 0 0 0 rgba(236,53,45,0)}
}
.btn--pulse{animation:gg-heartbeat 2.4s ease-out infinite!important}
.btn--primary:hover{background:#FF4A40}
.games_list-button{border-color:#3A3A44!important;color:#fff!important}
.games_list-button:hover{border-color:#EC352D!important;color:#fff!important}
.dot{background:#EC352D}
.method.is-active,.vip-card.is-current{box-shadow:0 0 0 3px rgba(236,53,45,.18)}
.method--card:hover{box-shadow:0 0 0 3px rgba(236,53,45,.14)}
.input:focus,.select:focus{border-color:#EC352D;box-shadow:0 0 0 4px rgba(236,53,45,.16)}
a:hover{color:#FF6B61}

/* similar games sit apart from the launcher */
.similar-block{
  margin-top:18px;padding:18px 4px 8px;
  border-top:1px solid #2A2A33;
  display:flex;flex-direction:column;gap:12px;
}
.similar-block .similar{
  padding:14px;border-radius:14px;background:#15151B;border:1px solid #2A2A33;
}

/* Native clear button on type=search: blue, and only while the field has text. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance:none;appearance:none;display:none;
}
input[type="search"]::-ms-clear{display:none;width:0;height:0}

/* Category + provider: the early reset unpaints every .is-active while ?cat= is set.
   popular was missing, so that chip stayed the idle color. Paint the real category. */
html[data-cat="popular"] .catalog__cats .chip[data-cat="popular"],
html[data-cat="new"] .catalog__cats .chip[data-cat="new"],
html[data-cat="slots"] .catalog__cats .chip[data-cat="slots"]{
  background:#EC352D;border-color:#EC352D;color:#fff;
}
/* Home provider row: JS drives the offset so a drag or a sideways wheel can move it. */
.prov-marquee.is-manual .prov-marquee__track{animation:none}
.prov-marquee__view{cursor:grab;touch-action:pan-y}
.prov-marquee.is-drag .prov-marquee__view{cursor:grabbing}
.prov-marquee.is-drag{user-select:none}
.prov-marquee a{-webkit-user-drag:none;user-select:none}

/* Open search reuses the old panel field: 48px, #101014, red border, «Закрыть» on its right. */
.search-slot{display:flex;align-items:center;gap:8px;flex:0 0 380px;width:380px;max-width:380px;margin-right:auto;min-width:0}
.search-slot .search-trigger{flex:1 1 auto;width:auto;max-width:none;margin-right:0}
.search-slot .search__cancel{display:none}
.search-trigger__input{color:#fff;font:500 16px/1 var(--font-text);cursor:text}
.search-trigger__input::placeholder{color:rgba(255,255,255,.5)}
.search-trigger__clear{width:28px;height:28px;background:#2A2A33;color:#fff}
html.is-searching .search-slot{flex:1 1 640px;width:auto;max-width:640px}
html.is-searching .search-trigger{
  height:48px;background:#101014;border:1px solid #EC352D;border-radius:10px;color:#fff;
}
html.is-searching .search-trigger__input{font:600 16px/1 var(--font-text)}
html.is-searching .search-trigger__input::placeholder{color:rgba(255,255,255,.45)}
/* Open state already has one red border. Global :focus-visible would draw a second red ring. */
.search-trigger:focus,
.search-trigger:focus-visible,
.search-trigger__input:focus,
.search-trigger__input:focus-visible{outline:none}
html.is-searching .search-trigger .ph{color:rgba(255,255,255,.6);font-size:20px}
html.is-searching .search-slot .search__cancel{display:flex;align-items:center;height:44px;flex:none}
@media (max-width:900px){
  .search-slot{flex:0 0 44px;width:44px;max-width:44px;margin-right:0;gap:0}
  /* Search is an icon here, so it no longer pushes the account cluster.
     Pin language and everything after it to the right edge. */
  .header .lang{margin-left:auto;flex:none}
  .search-trigger__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  html.is-searching .search-slot{flex:1 1 auto;width:auto;max-width:none;gap:8px}
  html.is-searching .search-trigger{position:relative;height:40px;padding:0 12px;justify-content:flex-start}
  html.is-searching .search-trigger__input{position:static;width:auto;height:100%;margin:0;overflow:visible;clip:auto;white-space:normal}
  html:not(.is-searching) .search-trigger__clear{display:none!important}
  .search.is-open{top:60px;left:0;right:0;bottom:0;z-index:40}
  .search__scrim{display:block}
  .search__box{height:auto;max-height:min(560px,calc(100% - 16px));border-radius:14px;border:1px solid #2E2E38;box-shadow:0 24px 60px rgba(0,0,0,.55)}
}

/* Text pages sit in one centered column. Home and the catalog stay full width. */
main.page:not(:has(.games)):not(:has(.catalog)):not(:has(.hero-brand)) > :not(script){
  width:min(1100px,100%);
  max-width:1100px;
  margin-inline:auto;
}
main.page:not(:has(.games)):not(:has(.catalog)):not(:has(.hero-brand)) > .article{
  max-width:1100px;
}
main.page:not(:has(.games)):not(:has(.catalog)):not(:has(.hero-brand)) .article .cms-page{
  width:100%;
  max-width:none;
  margin-inline:0;
}

/* Unchecked 18+ consent: the row and the box turn red so the required control is obvious. */
.check.is-error{
  border-color:#EC352D;
  box-shadow:0 0 0 3px rgba(236,53,45,.28);
  color:#fff;
}
.check.is-error .check__box{
  border-color:#EC352D;
  background:rgba(236,53,45,.18);
  box-shadow:0 0 0 2px rgba(236,53,45,.45);
}

/* Withdraw: the button sat flush under the amount field because hidden inputs add no space. */
#withdrawal{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:520px;
}

/* Cabinet skin — visual only, matches the Bomgo cabinet mock. Tabs, fields and the deposit widget stay as they are. */
#cabinet-modal .modal__box.cabinet{
  width:min(960px,calc(100vw - 32px));
  background:#16161C;
  border:1px solid #2E2E38;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  overflow:hidden;
}
@media (min-width:761px){
  #cabinet-modal .cabinet{
    height:min(640px,calc(100dvh - 48px));
    grid-template-columns:240px minmax(0,1fr);
  }
  #cabinet-modal .cabinet__aside,
  #cabinet-modal .cabinet__main{grid-column:auto}
  #cabinet-modal .cabinet__main{padding-right:28px}
  #cabinet-modal .user{padding-right:0}
}
#cabinet-modal .cabinet__aside{
  background:#121217;
  border-right:1px solid #24242C;
  padding:20px 12px;
  gap:4px;
}
#cabinet-modal .user{gap:12px;padding:0 8px 16px}
#cabinet-modal .user__avatar{
  width:44px;height:44px;border-radius:10px;background:#EC352D;
  font:800 15px/1 var(--font-text);
}
#cabinet-modal .cabinet__who{display:flex;flex-direction:column;gap:3px;min-width:0}
#cabinet-modal .cabinet__name{font:800 15px/1.2 var(--font-text)}
#cabinet-modal .cabinet__uid{font:600 12px/1.2 var(--font-text);color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
#cabinet-modal .stat-box{
  margin:0 4px 14px;padding:12px 14px;border-radius:10px;
  background:#1E1E25;border:1px solid #2A2A33;gap:4px;
}
#cabinet-modal .cabinet__bal-label{font:600 12px/1.2 var(--font-text);color:rgba(255,255,255,.55)}
#cabinet-modal .stat-box__value{font:800 22px/1.1 var(--font-text);font-variant-numeric:tabular-nums}
#cabinet-modal .tabs{flex:1;gap:6px}
#cabinet-modal .tab{
  height:46px;gap:12px;padding:0 12px;border:0;border-radius:10px;
  background:transparent;color:rgba(255,255,255,.7);
  font:700 14px/1 var(--font-text);
}
#cabinet-modal .tab i{font-size:20px;flex:none}
#cabinet-modal .tab:hover{background:#22222A;border-color:transparent;color:#fff}
#cabinet-modal .tab.is-active{background:rgba(236,53,45,.14);border-color:transparent;color:#fff}
#cabinet-modal .tab--logout{margin-top:auto;height:44px;color:rgba(255,255,255,.55);text-decoration:none}
#cabinet-modal .cabinet__head{
  min-height:64px;display:flex;align-items:center;gap:12px;
  padding:8px 0 0;flex:none;
}
#cabinet-modal .cabinet__title{margin:0;font:700 20px/1.2 var(--font-display)}
#cabinet-modal .cabinet__head .modal__close{
  position:static;margin-left:auto;width:44px;height:44px;border:0;border-radius:10px;
  background:transparent;color:rgba(255,255,255,.65);
  display:flex;align-items:center;justify-content:center;font-size:0;
}
#cabinet-modal .cabinet__head .modal__close i{font-size:20px}
#cabinet-modal .cabinet__head .modal__close:hover{background:#2A2A33;color:#fff}
#cabinet-modal .cabinet__main{padding:0 28px 28px;gap:0}
#cabinet-modal .field{display:flex;flex-direction:column;gap:6px}
#cabinet-modal .field label,#cabinet-modal .cabinet__bal-label{font:600 13px/1.3 var(--font-text)}
#cabinet-modal .field label{color:rgba(255,255,255,.65)}
#cabinet-modal .input,#cabinet-modal .select{
  height:52px;border-radius:10px;background:#101014;border:1px solid #2E2E38;color:#fff;
}
#cabinet-modal .input[readonly]{background:#1A1A21;border-style:solid;color:rgba(255,255,255,.55)}
#cabinet-modal .field__lock{position:relative;display:block}
#cabinet-modal .field__lock .input{padding-right:42px;width:100%}
#cabinet-modal .field__lock i{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:16px;color:rgba(255,255,255,.4);pointer-events:none}
#cabinet-modal .btn.btn--primary{
  height:54px;border-radius:10px;background:#EC352D;font:800 15px/1 var(--font-text);
}
#cabinet-modal .btn.btn--primary:hover{background:#FF4A40}
#cabinet-modal .subtabs{gap:8px}
#cabinet-modal .subtabs .chip{
  height:40px;border-radius:999px;padding:0 14px;border:1px solid #2E2E38;
  background:transparent;color:rgba(255,255,255,.75);font:700 13px/1 var(--font-text);
}
#cabinet-modal .subtabs .chip.is-active{background:rgba(236,53,45,.14);border-color:transparent;color:#fff}
#cabinet-modal #edit-profile{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;max-width:620px}
#cabinet-modal #edit-profile .profile__actions,
#cabinet-modal #edit-profile .answer{grid-column:1 / -1}
#cabinet-modal .bonus-card{border-radius:14px;background:#1E1E25;border-color:#2A2A33}
#cabinet-modal .bonus-card__art{aspect-ratio:16/9}
#cabinet-modal .method.is-active{box-shadow:0 0 0 3px rgba(236,53,45,.22)}
#cabinet-modal .method--card:hover{box-shadow:0 0 0 3px rgba(236,53,45,.16)}
@media (max-width:760px){
  #cabinet-modal .cabinet__aside{border-right:0;border-bottom:1px solid #24242C}
  #cabinet-modal .tabs{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px}
  #cabinet-modal .tab{flex:none;height:40px;border-radius:999px;border:1px solid #2E2E38;padding:0 12px;font-size:13px}
  #cabinet-modal .tab i{font-size:16px}
  #cabinet-modal .tab--logout{margin-top:0}
  #cabinet-modal .cabinet__main{padding:0 16px 20px}
  #cabinet-modal #edit-profile{grid-template-columns:1fr}
  #cabinet-modal .user{padding-right:0}
}

.dep-secure{font:500 12px/1.4 var(--font-text);color:rgba(255,255,255,.5);text-align:center}

/* SEO text on the lobby and catalog (home, /new, /slots): 80% of the column, centered.
   Game grids stay full width. */
main.page:has(.games) .article,
main.page:has(.catalog) .article,
main.page:has(.hero-brand) .article{
  width:80%;
  max-width:80%;
  margin-inline:auto;
}
main.page:has(.games) .article .cms-page,
main.page:has(.catalog) .article .cms-page,
main.page:has(.hero-brand) .article .cms-page{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
}

/* Mobile cabinet tabs scroll inside the aside. Without a width cap their
   min-content size widens the modal and the page scrollbar covers the cards. */
@media (max-width:760px){
  #cabinet-modal .modal__box.cabinet,
  #cabinet-modal .cabinet__aside,
  #cabinet-modal .cabinet__main{min-width:0;max-width:100%}
  #cabinet-modal .cabinet__aside{overflow-x:hidden}
  #cabinet-modal .tabs{
    width:100%;max-width:100%;min-width:0;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  #cabinet-modal .tabs::-webkit-scrollbar{display:none;height:0}
}

/* Phone launcher bar stays one row. launcher-bar-phone The notice already carries «На деньги»,
   so the bar copy of that button is hidden and the title is allowed to shrink. */
.notice{background:#1A1A21;border-color:#2A2A33}
@media (max-width:640px){
  .launcher{padding:8px 10px 12px;gap:8px}
  .launcher__bar{flex-wrap:nowrap;gap:4px;padding:6px}
  .launcher__bar > .ellipsis{flex:1 1 auto!important;min-width:0}
  .launcher__bar > a.btn--ghost:not(.btn--icon),
  .launcher__bar > button.btn--ghost:not(.btn--icon){display:none}
  .launcher__bar .btn--icon,
  .launcher__bar .game__fav--bar{width:40px;height:40px;flex:none}
  .launcher__bar .open-deposit{height:40px;padding:0 10px;font-size:12px;flex:none;white-space:nowrap}
  .notice{flex-wrap:nowrap;gap:8px}
  .notice > span{flex:1 1 auto;min-width:0}
  .notice .btn{flex:none}
}

/* Open search on a phone takes the header. Language and account buttons
   stay hidden so the field is wide, and result rows cannot spill sideways. search-phone-full */
@media (max-width:900px){
  html.is-searching .header__logo,
  html.is-searching .lang,
  html.is-searching .header > .btn,
  html.is-searching .header .avatar-btn,
  html.is-searching .header .chip-stat,
  html.is-searching .header .wager{display:none}
  html.is-searching .search-slot{flex:1 1 auto;width:auto;max-width:none}
  .search__row{min-width:0}
  .search__prov{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .search__acts{flex:none}
}

/* Phone fullscreen fallback: the Fullscreen API is missing or rejected,
   so the launcher itself covers the screen and the same button exits. */
html.is-terminal-fs,
html.is-terminal-fs body{overflow:hidden;height:100%}
html.is-terminal-fs .launcher{
  position:fixed;inset:0;z-index:80;margin:0;width:100%;height:100%;
  height:100dvh;padding:0;gap:0;background:#05070B;
}
html.is-terminal-fs .launcher__bar{border-radius:0;flex:none}
html.is-terminal-fs .notice,
html.is-terminal-fs .similar-block{display:none}
html.is-terminal-fs .wins{flex:1 1 auto;min-height:0;display:flex}
html.is-terminal-fs .wins[data-count="1"] .win-frame{
  flex:1;height:auto;min-height:0;border:0;border-radius:0;
}
html.is-terminal-fs .win-frame iframe{position:absolute;inset:0;width:100%;height:100%}

/* FAQ and other text pages: the admin style centers an 80% h1 while the
   body is full width, so the heading starts far to the right of the text.
   Pin the heading to the same left edge. cms-h1-left */
main.page:not(:has(.games)):not(:has(.catalog)):not(:has(.hero-brand)) > section > h1{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left;
}

/* Design carousel: six lobby banners. The hero-brand marker stays so the
   SEO column rule still applies, but the old single-banner padding does not. */
.b-hero.hero-brand{padding:0!important;justify-content:stretch;background:#140e16}
/* The brand slide stays in flow even when another slide is showing,
   so every frame is exactly as tall and as wide as the first banner. */
.b-hero > .promo-slide.hero-brand{display:flex!important;flex-direction:column!important;position:relative;z-index:0;width:100%;height:auto!important;min-height:300px;flex:none}
.b-hero > .promo-slide.hero-brand:not(.is-active){visibility:hidden;pointer-events:none}
.b-hero > .b-slide.is-active{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;justify-content:center}
.b-slide__copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;max-width:58%;padding:28px 36px 48px}
.b-kicker{font:700 12px/1 var(--font-text);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.b-slide .hero__title{position:relative;margin:0;max-width:14ch;font:800 clamp(26px,2.6vw,42px)/1.05 var(--font-display);letter-spacing:-.03em}
.b-slide .hero__text{position:relative;margin:0;max-width:36ch;color:rgba(255,255,255,.78)}
.b-hero__nav{position:absolute;left:36px;bottom:14px;z-index:4;display:flex;align-items:center;gap:14px}
.b-hero__nav .hero__dots{margin:0}
.b-hero__count{font:700 12px/1 var(--font-text);letter-spacing:.08em;color:rgba(255,255,255,.7)}
.b-slide--tg{background:radial-gradient(ellipse at 82% 60%,#116398 0%,#093252 37%,#0a1529 75%)}
.b-slide__art{position:absolute;right:8%;top:50%;transform:translateY(-50%);font-size:140px;line-height:1;color:#2AABEE;text-shadow:0 20px 50px rgba(0,0,0,.35)}
.b-btn-tg{background:#2AABEE!important}
.b-btn-tg:hover{background:#48b8f0!important}
.b-slide--cards{background:radial-gradient(ellipse at 78% 70%,#5a2b3f 0%,#271a32 38%,#14101e 78%)}
.b-slide--photo .hero__img{object-fit:contain;object-position:right center;opacity:1}
.b-slide--payouts{background:#07060a}
.b-slide--payouts .hero__img{object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%)}
.b-slide--payouts .hero__wash{background:linear-gradient(90deg,#07060a 0%,rgba(7,6,10,.9) 16%,rgba(7,6,10,.45) 38%,rgba(7,6,10,0) 62%)}

.b-slide__cards{position:absolute;top:12px;bottom:12px;right:18px;width:min(40%,440px);pointer-events:none}
.b-slide__cards img{position:absolute;width:44%;max-height:42%;height:auto;object-fit:contain;aspect-ratio:auto;border-radius:10px;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.b-slide__cards img:nth-child(1){left:2%;top:4%;transform:rotate(-6deg)}
.b-slide__cards img:nth-child(2){right:0;top:30%;transform:rotate(5deg);z-index:1}
.b-slide__cards img:nth-child(3){left:16%;top:auto;bottom:6%;transform:rotate(-2deg)}
.b-slide--aviator{background:radial-gradient(ellipse at 82% 55%,#65252e 0%,#30151f 40%,#140e1b 78%)}
.b-slide__plane{position:absolute;right:8%;top:50%;width:min(220px,28%);max-height:68%;transform:translateY(-50%) rotate(-6deg)}
.b-slide__plane img{width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:12px;border:1px solid rgba(222,95,98,.4);box-shadow:0 22px 50px rgba(0,0,0,.5)}
@media (max-width:760px){
  .b-hero > .promo-slide.hero-brand{min-height:196px}
  .b-slide__copy{max-width:78%;padding:16px 16px 42px}
  .b-slide .hero__title{font-size:22px;max-width:16ch}
  .b-slide .hero__text{font-size:13px}
  .b-hero__nav{left:16px;bottom:10px}
  .b-slide__art{font-size:72px;right:4%}
  .b-slide__cards{width:34%;right:8px}
  .b-slide__plane{width:26%}
}
/* Telegram invite, same card as the design: top-right on desktop, above the tab bar on a phone. */
.tg-ask{position:fixed;z-index:45;top:84px;right:24px;width:372px;max-width:calc(100vw - 32px);
  background:#1C1C23;border:1px solid #2E2E38;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);
  padding:20px;display:flex;flex-direction:column;gap:14px}
.tg-ask__head{display:flex;align-items:flex-start;gap:12px}
.tg-ask__icon{flex:none;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(42,171,238,.16);color:#2AABEE;font-size:24px}
.tg-ask__label{font:700 11px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:#EC352D}
.tg-ask__title{font:700 17px/1.25 var(--font-display);color:#fff;margin-top:4px}
.tg-ask__x{margin-left:auto;flex:none;width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:rgba(255,255,255,.6);cursor:pointer}
.tg-ask__text{margin:0;font:500 14px/1.5 var(--font-text);color:rgba(255,255,255,.72)}
.tg-ask__actions{display:flex;gap:8px}
.tg-ask__go{flex:1;height:46px;background:#EC352D}
.tg-ask__later{height:46px;padding:0 18px}
@media (max-width:900px){
  .tg-ask{top:auto;right:10px;left:10px;width:auto;bottom:calc(156px + env(safe-area-inset-bottom, 0px))}
}

/* Phone header shows the balance amount beside Deposit. The label and the
   wager bar stay hidden so the row still fits next to the mark and search. */
@media (max-width:440px){
  .header{gap:4px}
  .header .btn{padding:0 10px}
  .header .chip-stat{display:flex;flex:none;height:40px;padding:0 8px}
  .header .chip-stat__label{display:none}
  .header .chip-stat__value{font-size:13px;line-height:1}
}

/* Top wins: collapsed Top-3 may stay compact (domain footer_code).
   Expanded list overlays the lobby — never grow the hero row. */
@media (min-width:1024px){
  .hero-grid > .panel{
    position:relative;z-index:1;
  }
  .hero-grid > .panel .panel__sheet{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .hero-grid > .panel .win-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
  .hero-grid > .panel.is-expanded,
  .hero-grid > .panel:has(.win-list[data-bomgo-expanded="true"]){
    height:0!important;min-height:100%!important;align-self:stretch!important;
    overflow:visible;z-index:6;
  }
  .hero-grid > .panel.is-expanded .panel__sheet,
  .hero-grid > .panel:has(.win-list[data-bomgo-expanded="true"]) .panel__sheet{
    position:absolute;left:0;right:0;top:var(--wins-head,42px);z-index:2;
    display:flex;flex-direction:column;height:auto;min-height:0;overflow:visible;
    background:var(--surface);border:1px solid var(--line);border-top:0;
    border-radius:0 0 var(--r-l) var(--r-l);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  .hero-grid > .panel.is-expanded .win-list,
  .hero-grid > .panel:has(.win-list[data-bomgo-expanded="true"]) .win-list{
    display:flex;flex-direction:column;height:auto;min-height:auto;max-height:none;overflow:visible;
  }
}
.panel__toggle{
  flex:none;align-self:flex-end;margin:2px 12px 8px;padding:0;border:0;background:none;cursor:pointer;
  font:600 12px/1 var(--font-text);color:rgba(255,255,255,.55);
}
.panel__toggle:hover{color:#fff}

/* TEMP: hide top-wins panel on all screens */
.hero-grid > .panel[data-wins-panel],
.hero-grid > .panel:has(.win-list[data-sort-players]){display:none!important}