/* Gogo Casino — brand 1a "Neon Drift" */
:root{
  --accent:#C8FF2E; --accent-2:#7B5CFF; --on-accent:#0A0B0D;
  --bg:#0B0D12; --surface:#12151C; --surface-2:#171B24; --line:#242935; --input:#171B24;
  --scroll-thumb:#2E3442;
  --text:#F3F5F8; --muted:rgba(243,245,248,.56); --art:#1C212C; --accent-ink:#C8FF2E;
  --ok-bg:rgba(52,229,160,.14); --ok-ink:#5BE9B0;
  --wait-bg:rgba(245,179,1,.14); --wait-ink:#F7C444;
  --no-bg:rgba(255,90,110,.14); --no-ink:#FF7C8E;
  --r-s:10px; --r-m:13px; --r-l:18px; --r-xl:22px;
  --gap:clamp(6px,.8vw,10px); --pad:clamp(8px,1.4vw,16px);
  --rail:clamp(56px,6vw,72px);
  --z-header:18; --z-rail:20; --z-chat:50; --z-modal:70; --z-top:80;
  --font-display:"Unbounded",system-ui,sans-serif; --font-text:"Manrope",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
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;
  border-bottom:1px solid var(--line);background:var(--surface);scrollbar-width:thin}
.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 movable widget — force gogo design accent (#C8FF2E) instead of default color */
.woot-widget-bubble,
.woot-widget-bubble.woot-elements--right,
.woot--close.woot-elements--right{background:#C8FF2E !important}
.woot-widget-bubble svg,
.woot-widget-bubble path,
.woot-widget-bubble i{fill:#0A0B0D !important;color:#0A0B0D !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}
  .chip-stat,.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}
}