/* [2026-08-17] Open Sans переведён на СВОИ вариативные woff2.
 * Было: 12 блоков @font-face, каждый — ПОЛНЫЙ TTF с fonts.gstatic.com (~125 КБ штука).
 * Браузер тянул 3-4 начертания = ~374 КБ с ЧУЖОГО домена, причём узнавал о нём только
 * после разбора этого файла (лишняя цепочка DNS+TLS).
 * Стало: вариативный woff2 (одно начертание покрывает диапазон 300-800), разбитый по
 * unicode-range. Русская страница берёт latin+cyrillic = ~73 КБ со своего домена.
 * ⚠️ font-weight задан ДИАПАЗОНОМ `300 800` — признак вариативного шрифта, не опечатка.
 * ⚠️ unicode-range обязателен: без него браузер скачает ВСЕ подмножества, а не нужные.
 * ⚠️ Подмножества взяты ВСЕ, что отдаёт Google (не только latin+cyrillic): у бренда 12
 *    локалей, включая греческую — урезав список, мы оставили бы её без шрифта.
 * ⚠️ Путь БЕЗ ?ver= — он обязан совпадать с preload в index.php, иначе двойная загрузка.
 * Файлы: client/fonts/opensans/ (0644). Откат: /home/admin/backups/zabkabet-style.css.before-fonts-20260817
 */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-latin-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-latin-ext-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-cyrillic-italic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-cyrillic-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-cyrillic-ext-italic.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-cyrillic-ext-normal.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-greek-italic.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-greek-normal.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-greek-ext-italic.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-greek-ext-normal.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-hebrew-italic.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-hebrew-normal.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-math-italic.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-math-normal.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-symbols-italic.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-symbols-normal.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-vietnamese-italic.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/client/fonts/opensans/opensans-vietnamese-normal.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
.up {
  text-transform: uppercase;
}
.none {
  text-decoration: none;
}
.th {
  font-weight: 100;
}
.el {
  font-weight: 200;
}
.l {
  font-weight: 300;
}
.reg {
  font-weight: 400;
}
.med {
  font-weight: 500;
}
.sb {
  font-weight: 600;
}
.bold {
  font-weight: 700;
}
.eb {
  font-weight: 800;
}
.black {
  font-weight: 900;
}
.un {
  text-decoration: underline;
}
.in {
  display: inline-block;
}
.vam {
  vertical-align: middle;
}
.rel {
  position: relative;
}
.bl {
  display: block;
}
.abs {
  position: absolute;
}
.tr {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.try {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.trx {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.tc {
  display: table-cell;
  vertical-align: middle;
}
.dn {
  display: none;
}
.tac {
  text-align: center;
}
.tal {
  text-align: left;
}
.tar {
  text-align: right;
}
.taj {
  text-align: justify;
}
.it {
  font-style: italic;
}
.sn {
  font-style: normal;
}
.b0 {
  border: 0;
}
.bn {
  background: none;
}
.w100 {
  width: 100%;
}
.h100 {
  height: 100%;
}
.wa {
  width: auto;
}
.p0 {
  padding: 0;
}
.m0 {
  margin: 0;
}
.poi {
  cursor: pointer;
}
.auto {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
}
.noup {
  text-transform: none;
}
.fix {
  position: fixed;
}
.tn {
  transform: none;
}
.bf {
  background: #fff;
}
.cf {
  color: #fff;
}
.c0 {
  color: #000;
}
.ap {
  appearance: none;
}
.nw {
  white-space: nowrap;
}
.ma {
  margin: 0 auto;
}
.oh {
  overflow: hidden;
}
.pen {
  pointer-events: none;
}
body,
html {
  width: 100%;
  height: 100%;
}
body {
  background: #13142c;
  overflow-x: hidden;
}
body,
th,
td {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #fff;
}
body,
form,
object,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}
img,
table {
  border: none;
}
table {
  border-collapse: collapse;
}
table td {
  padding: 0;
}
a {
  color: #fff;
  cursor: pointer;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
a:hover {
  text-decoration: none;
}
input,
textarea,
button,
select {
  margin: 0;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  border: 0;
  font-family: "Open Sans", sans-serif;
}
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder,
button:focus::-webkit-input-placeholder,
select:focus::-webkit-input-placeholder {
  color: transparent;
}
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder,
button:focus::-moz-placeholder,
select:focus::-moz-placeholder {
  color: transparent;
}
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder,
button:focus:-moz-placeholder,
select:focus:-moz-placeholder {
  color: transparent;
}
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder,
button:focus:-ms-input-placeholder,
select:focus:-ms-input-placeholder {
  color: transparent;
}
button,
input[type='submit'] {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  cursor: pointer;
  border: 0;
}
ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
img {
  max-width: 100%;
}
/* LAZY-IMG-ASPECT — у логотипов ниже первого экрана проставлены width/height
   (резерв места под lazy-загрузку); без height:auto правило max-width:100%
   сжимало бы только ширину и сплющивало картинку. Откат: удалить блок. */
.partners-block .item .logo img,
.bottom-payments-block img,
.footer .logos img,
.footer .logos2 img {
  height: auto;
}
.an {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
section,
header,
footer,
nav,
main {
  display: block;
}
.wrap {
  margin: 0 auto;
  width: 1268px;
}
* {
  outline: none!important;
}
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
/* Баланс-дропдаун: длинные суммы держим на одной строке с названием,
   при нехватке места обрезаем название троеточием, а сумму показываем целиком */
.balance-fade .flex {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}
.balance-fade .b-title {
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.balance-fade .b-value {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
}
.flex2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
body {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 82px;
}
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 16px 24px;
  background: #13142c;
  z-index: 8;
}
/* [2026-08-06] Шапка НИКОГДА не переносится на вторую строку.
   .header имеет класс .flex, а у него flex-wrap:wrap — поэтому, когда меню плюс
   блок пользователя переставали помещаться, весь .user уезжал под логотип.
   Для ≤991 это уже чинили (см. media ниже), но перелом наступает НАМНОГО раньше:
   замер 06.08 — русское меню 974 px, авторизованный блок ~700–790 px, то есть
   одной строкой они живут только от ~1750 px. На 1280/1366/1440/1600 шапка
   рвалась у каждого авторизованного игрока.
   Поводом стала кнопка «Колесо» (её вставляет client/js/wheel.js, в шаблоне
   authorized.php её нет), но причина — сам wrap: любая следующая кнопка сломала
   бы так же.
   ⚠️ Одного nowrap мало: без min-width:0 у nav блок пользователя выдавило бы
   ЗА экран, а это хуже переноса — касса и баланс стали бы недоступны. Поэтому
   уступает меню, а не деньги. */
.header.flex {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  align-items: center;
}
.header.flex > nav {
  min-width: 0;
  /* ⚠️ ВТОРОЙ ПЕРЕНОС, который я породил первой редакцией правки.
     Запретив перенос у .header.flex и разрешив nav сжиматься (min-width:0),
     я убрал переезд блока пользователя вниз — но логотип и пункты меню внутри
     nav это inline-block, и они начали переноситься САМИ. Шапка стала
     трёхэтажной: логотип / часть меню + блок / остаток меню.
     white-space:nowrap запрещает перенос внутри, overflow:hidden гасит выход
     за границы. Хуже всего было бы оставить перенос: тогда высота шапки
     скачет и всё под ней прыгает. */
  white-space: nowrap;
  overflow: hidden;
}
.header.flex > nav .logo,
.header.flex > nav ul,
.header.flex > nav ul li {
  white-space: nowrap;
}
.header.flex > #auth-container {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.header nav .logo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 32px;
}
.header nav ul {
  display: inline-block;
  vertical-align: middle;
}
.header nav ul li {
  display: inline-block;
  padding: 7px 8px;
}
.header nav ul li a {
  display: block;
  text-decoration: none;
  padding: 10px 12px;
  font-weight: 700;
  line-height: 16.1px;
  border-radius: 40px;
}
.header nav ul li a:hover {
  background: #242648;
}
.header nav ul li a.hall {
  background: #4f25c3;
}
/* Скрытие горизонтального меню, когда оно перестаёт помещаться рядом с блоком
   игрока. Решение принимает client/js/header-fit.js — он замеряет фактический
   зазор и ставит на .header класс .nav-fits или .nav-collapsed. Медиа-запрос
   ниже — только fallback на случай, если скрипт не загрузился.

   ⚠️ БЛОК СТОИТ ИМЕННО ЗДЕСЬ, ПОСЛЕ базовых правил .header nav ul. Выше он не
   работает: media-запрос не добавляет специфичности, и более позднее
   `display:inline-block` со строки 514 побеждает — меню остаётся видимым и
   обрезается на середине слова. Перемещать выше нельзя.

   ⚠️ Уплотнение вместо скрытия НЕ помогает: замер показал, что срезание отступов
   и шрифта даёт всего ~70 px из нужных ~500.

   Арифметика на 06.08 (headless Chromium, живая страница, русский язык —
   он самый широкий из трёх: ru 974, pl 954, en 958 вместе с логотипом):
     меню, логотип + 7 пунктов ................ 974 px
     блок игрока без чата и без бургера ....... 528 px
       (баланс+касса 218, колесо 107, колокольчик 40, иконки 127)
     отступы шапки ............................ 48 px
     итого .................................... 1550 px
   Отсюда fallback 1599 — измеренный минимум плюс небольшой запас. Прежнее
   значение 1679 прятало меню на ~100 px раньше, чем кончалось место: с ним
   меню пропадало уже на ноутбучных 1600 px, хотя зазор там 49 px.
   Пилюля баланса на ширину не влияет: её .money зажат в 88 px и длинная сумма
   переносится внутри, а не расширяет блок (отдельный дефект, не про меню).
   Вернёте «Онлайн-чат» в шапку — поднять на 142 px (его измеренная ширина).
   Ширины пунктов (ru): «Уровни лояльности» 185, «Игровой зал» 132,
   «Live Casino» 119, «Турниры» 105, «Кэшбэк» 95, «Бонусы» 94, «Спорт» 83. */
@media (max-width: 1599px) {
  .header nav ul {
    display: none;
  }
}
/* Решение header-fit.js. Специфичность (0,2,2) выше, чем у правила в media
   (0,1,2), поэтому класс перебивает fallback в обе стороны независимо от
   порядка блоков. */
.header.nav-fits nav ul {
  display: inline-block;
}
.header.nav-collapsed nav ul {
  display: none;
}
.header .user * {
  vertical-align: middle;
}
.header .user .chat {
  display: inline-block;
  background: url('img/chat.svg') no-repeat 8px 50%;
  padding: 16px 8px 16px 40px;
  margin-right: 8px;
  font-weight: 700;
  line-height: 16px;
  border-radius: 28px;
  text-decoration: none;
}
.header .user .chat:hover {
  box-shadow: 0px 3px 10px 0px rgba(128, 93, 235, 0.12);
  background: #242648 url('img/chat.svg') no-repeat 8px 50%;
  color: #fdfdfd;
}
/* [2026-08-06] «Онлайн-чат» убран из шапки — решение владельца, чтобы освободить
   место под меню. Скрыт стилем, а не удалён из шаблонов: вернуть = убрать это
   правило, разметка в vews/parts/authorized.php и not-authorized.php цела.

   ⚠️ Доступ к поддержке НЕ теряется, проверено: виджет Jivo подключён на каждой
   странице (index.php, script code.jivo.ru) и рисует плавающую кнопку внизу
   слева. Ссылка в шапке была лишь ярлыком к нему же — обработчик один и тот же,
   по классу .jivohelp (app.js). Есть и второй вход — ссылка «Помощь».

   ⚠️ Правило стоит ИМЕННО ЗДЕСЬ, после базовых правил .chat. Сначала я поставил
   его выше (строка 501) — не сработало: специфичность одинаковая, и побеждало
   более позднее `display:inline-block` со строки 537. Переносить выше нельзя.

   ⚠️ Только от 992 px. На ≤991 чат в шапке оставлен как был: там правило 3305
   ОСОЗНАННО показывает его авторизованному игроку (гостевой при этом скрыт
   правилом 3208) — чужое решение для телефона, и теснота у нас не там. Хотите
   убрать и на мобильных — снять min-width. */
@media (min-width: 992px) {
  .header .user .chat,
  .header .user .chat.other {
    display: none;
  }
}
.header .user .langs {
  display: inline-block;
  position: relative;
  margin-right: 8px;
  cursor: pointer;
}
.header .user .langs img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}
.header .user .langs .link {
  display: inline-block;
  text-decoration: none;
  padding: 11px 44px 11px 36px;
  position: relative;
  font-weight: 700;
  line-height: 16.1px;
  text-transform: uppercase;
  background: url('img/arrow.svg') no-repeat right 14px top 50%;
}
.header .user .langs .link img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
}
.header .user .langs .morelangs {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  background: #242648;
  border-radius: 12px;
  padding: 6px 0;
  margin-top: 4px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.header .user .langs .morelangs .link {
  display: block;
  padding: 8px 16px 8px 36px;
  white-space: nowrap;
  border-radius: 0;
  background: none;
  transition: background 150ms ease;
}
.header .user .langs .morelangs .link:hover {
  background: rgba(255, 255, 255, 0.08);
}
.header .user .langs .morelangs .link img {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.header .user button {
  height: 48px;
  color: #fff;
  padding: 0 24px;
  font-weight: 700;
  border-radius: 28px;
}
.header .user button.login {
  background: #242648;
  margin-right: 8px;
}
.header .user button.login:hover {
  box-shadow: 0px 3px 10px 0px rgba(128, 93, 235, 0.12);
  background: #242648;
  color: #fdfdfd;
}
.header .user button.reg {
  background: #4f25c3;
}
.header .user button.reg:hover {
  background: #7a5deb;
}
.header .user .menu-button {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('img/menu-button.svg');
  margin-left: 8px;
  display: none;
}
/* [2026-08-06] Бургер показываем ВЕЗДЕ, где скрыто горизонтальное меню, — иначе
   разделы недостижимы. Условия обязаны совпадать с условиями скрытия меню
   (строки 561–574), иначе появится полоса ширин без меню и без бургера.

   ⚠️ В базовом правиле выше ДВА `display` подряд, и побеждает последний — `none`.
   Я сначала прочитал первый и решил, что бургер виден всегда; это было неверно.
   Плюс в настольном шаблоне authorized.php самого элемента не было — добавлен
   сегодня (см. комментарий в шаблоне).

   ⚠️ Дыра существовала и ДО правок 06.08: мобильный шаблон включается с <768,
   а меню скрывалось с ≤991 — в промежутке авторизованный игрок оставался без
   навигации вовсе. Теперь закрыто. */
@media (max-width: 1599px) {
  .header .user .menu-button {
    display: inline-block;
  }
}
/* Решение header-fit.js — зеркало правил для меню выше. */
.header.nav-fits .user .menu-button {
  display: none;
}
.header.nav-collapsed .user .menu-button {
  display: inline-block;
}
.header .user .ballanse {
  height: 48px;
  line-height: 46px;
  margin-right: 8px;
  border-radius: 30px;
  background: #242648;
  padding: 0 4px 0 16px;
  display: inline-block;
}
.header .user .ballanse .money {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  color: #808aa6;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.header .user .ballanse .money a {
  display: block;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  padding-right: 20px;
  background: url('img/arrow5.svg') no-repeat right;
}
.header .user .ballanse button {
  vertical-align: middle;
  width: 102px;
  height: 40px;
  color: #fff;
  font-weight: 700;
  border-radius: 30px;
  background: #4f25c3;
}
.header .user .links {
  display: inline-block;
  vertical-align: middle;
  border-radius: 30px;
  background: #242648;
  height: 48px;
  line-height: 48px;
  padding: 0 8px 0 16px;
}
.header .user .links a {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 8px;
  position: relative;
}
.header .user .links a:nth-child(1) {
  background: url('img/header-link1.svg');
}
.header .user .links a:nth-child(2) {
  background: url('img/header-link3.svg');
}
.header .user .links a:nth-child(3) {
  background: url('img/header-link4.svg');
}
.header .user .links a:nth-child(4) {
  background: url('img/header-link4.svg');
}
.header .user .links a span {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  background: #7c5fd5;
  font-size: 8px;
  font-weight: 700;
}
.index-page-slider {
  position: relative;
}
.index-page-slider .item {
  padding: 143px 0 184px;
  text-align: center;
}
.index-page-slider .item .top-text {
  margin-bottom: 12px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: 12.88px;
  text-transform: uppercase;
  text-shadow: 0px 10px 16px rgba(75, 74, 120, 0.11);
}
.index-page-slider .item h2 {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 50px;
  line-height: 72px;
  text-transform: uppercase;
  text-shadow: 0px 0px 5px #000000;
}
.index-page-slider .item button {
  width: 194px;
  height: 60px;
  background: #562CEA;
  border-radius: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
}
.index-page-slider .item button:hover {
  background: #7a5deb;
}
.index-page-slider .dots {
  position: absolute;
  left: 0;
  bottom: 65px!important;
  z-index: 3;
  text-align: center;
}
.index-page-slider .dots .swiper-pagination-bullet {
  opacity: 1;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.72);
  margin: 0 5px!important;
}
.index-page-slider .dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #2ccbfc;
}
.index-page-slider .slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
}
.index-page-slider .slider-nav.prev {
  left: 30px;
  background: url('img/prev.svg');
}
.index-page-slider .slider-nav.next {
  right: 30px;
  background: url('img/next.svg');
}
.index-top-form {
  margin: -40px auto 32px auto;
  max-width: 1300px;
  padding: 16px 0;
  border-radius: 16px;
  background: #1b1d3a;
  position: relative;
  z-index: 3;
}
.index-top-form .flex {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.index-top-form .random {
  text-decoration: none;
  line-height: 48px;
  background: #242648 url('img/random.svg') no-repeat 20px 50%;
  padding: 0 20px 0 48px;
  font-weight: 700;
  border-radius: 28px;
  white-space: nowrap;
  flex-shrink: 0;
}
.index-top-form .random:hover {
  color: #7c5fd5;
}
.index-top-form .providers-wrap {
  position: relative;
  flex-shrink: 0;
}
.index-top-form .providers {
  display: inline-block;
  text-decoration: none;
  height: 48px;
  line-height: 48px;
  background: url('img/providers.svg') no-repeat 20px 50%, url('img/arrow.svg') no-repeat right 14px top 50%, #242648;
  padding: 0 44px 0 48px;
  font-weight: 700;
  border-radius: 28px;
  white-space: nowrap;
  cursor: pointer;
}
.index-top-form .providers:hover {
  color: #7c5fd5;
}
.index-top-form .all-provs {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: #242648;
  border-radius: 12px;
  padding: 6px 0;
  margin-top: 6px;
  z-index: 210;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.index-top-form .all-provs::-webkit-scrollbar {
  width: 6px;
}
.index-top-form .all-provs::-webkit-scrollbar-track {
  background: transparent;
}
.index-top-form .all-provs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.index-top-form .all-provs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.index-top-form .all-provs li {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #c8cac9;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease;
}
.index-top-form .all-provs li:first-child {
  color: #7a5deb;
}
.index-top-form .all-provs li:hover {
  background: rgba(255, 255, 255, 0.08);
}
.index-top-form form {
  width: calc(100% - 355px);
  position: relative;
  min-width: 0;
  /* Driven by the longest localized label of .gamesearch-button (e.g. PL "Wyszukiwanie"
   * is wider than RU "Поиск" or EN "Search"). Bumping this single value also
   * shifts the input right-padding and the .gamesearch-close offset below. */
  --gamesearch-btn-min: 130px;
}
.index-top-form form input[type='text'] {
  width: 100%;
  height: 48px;
  border-radius: 24px;
  background: #242648 url('img/search.svg') no-repeat 16px 50%;
  padding: 0 calc(var(--gamesearch-btn-min) + 16px) 0 44px;
  font-size: 13px;
  letter-spacing: -0.4px;
  color: #fff;
}
.index-top-form form button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
  width: auto;
  min-width: var(--gamesearch-btn-min);
  height: 40px;
  padding: 0 18px;
  border-radius: 30px;
  background: #4f25c3;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.index-top-form form button:hover {
  background: #7a5deb;
}
.index-top-form form .window {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 24px;
  border-radius: 24px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.14);
  background: #242648;
  margin-top: 12px;
}
/* [2026-08-08] Выпадающий поиск: прокрутка + подгрузка вместо обрезания списка.
   Раньше окно росло по содержимому и упиралось в край экрана — часть найденного
   была недостижима, а сервер отдавал только первые 16 совпадений из 72.
   overscroll-behavior не даёт странице прокручиваться, когда список кончился.
   Цвет полосы не задаём: у krazik светлая тема, системная выглядит уместнее. */
.index-top-form form .window.gamesearch-window {
  max-height: min(60vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.index-top-form form .window .game {
  padding: 16px 0;
}
.index-top-form form .window .game:not(:last-child) {
  border-bottom: 1px solid #5d6160;
}
.index-top-form form .window .game div {
  display: table-cell;
  vertical-align: middle;
  font-weight: 700;
  line-height: 16px;
}
.index-top-form form .window .game div img {
  width: 74px;
  height: 74px;
  max-width: 74px;
  object-fit: cover;
  border-radius: 16px;
  margin-right: 16px;
}
.index-top-form .list {
  overflow: hidden;
  margin-top: 16px;
  position: relative;
}
.index-top-form .list .item {
  text-align: center;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  height: 48px;
  line-height: 48px;
  border-radius: 28px;
  background: #242648;
  cursor: pointer;
  font-weight: 700;
}
.index-top-form .list .item:hover,
.index-top-form .list .item.active {
  background: #4f25c3;
}
.index-top-form .list .item:hover svg path,
.index-top-form .list .item.active svg path {
  fill: #fff;
}
.index-top-form .list .item svg {
  vertical-align: middle;
  margin: -2px 4px 0 0;
}
.index-top-form .list .item svg path {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  fill: #7a5deb;
}
.index-top-form .list .scroll {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  position: relative;
  z-index: 5;
  width: calc(100% - 8px);
}
.index-top-form .list .scroll .swiper-pagination-progressbar-fill {
  background: #9981db;
}
.index-top-form form .gamesearch-close {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(var(--gamesearch-btn-min) + 12px);
  /* Общий стиль кнопок формы задаёт min-width: var(--gamesearch-btn-min);
     min-width побеждает width — крестик растягивало в «пилюлю». */
  min-width: 0;
  /* ⚠️ [ui-fix 19.08.2026] `padding: 0` ОБЯЗАТЕЛЕН. Общий стиль кнопок формы даёт
     `padding: 0 18px`, а кнопка шириной 32px — контентная область схлопывалась в НОЛЬ,
     и глиф «X» начинался ровно от центра, уезжая вправо на ~4.7px (жалоба владельца:
     «крестик не по центру»). Ширину раздувало до 36px тем же padding'ом.
     С нулевым отступом `text-align: center` + `line-height` центрируют глиф по обеим осям. */
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #c8cac9;
  font-size: 14px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
}
.index-top-form form .gamesearch-close:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.totop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 5;
  width: 48px;
  height: 48px;
  background: url('img/totop.svg') center / cover;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  box-shadow: 0px 10px 16px 0px rgba(75, 74, 120, 0.11);
  opacity: 0;
}
.totop.opened {
  opacity: 1;
}
.index-catalog-block {
  padding-bottom: 84px;
  background: url('img/catalog-block.png') no-repeat left bottom / contain;
}
.index-catalog-block .back-link {
  display: block;
  text-decoration: none;
  margin-bottom: 16px;
  line-height: 24px;
  padding-left: 32px;
  background: url('img/back.svg') no-repeat left;
  font-weight: 600;
  display: none;
}
.index-catalog-block .top-block {
  margin-bottom: 16px;
  line-height: 33px;
  position: relative;
}
.index-catalog-block .top-block:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #242648;
}
.index-catalog-block .top-block h2 {
  font-size: 16px;
  font-weight: 700;
  position: relative;
  padding-right: 45px;
  background: #13142c;
}
.index-catalog-block .top-block h2 a {
  padding: 0;
  color: #cecece;
}
.index-catalog-block .top-block h2 span {
  color: #cecece;
  opacity: 0.5;
  margin: 0 4px;
  font-weight: 300;
}
.index-catalog-block .top-block h2 img {
  vertical-align: middle;
  margin: -2px 4px 0 0;
}
.index-catalog-block .top-block a {
  display: inline-block;
  position: relative;
  background: #13142c;
  padding-left: 45px;
  text-decoration: none;
  color: #949695;
  font-weight: 700;
}
/* Заголовок блока кликабелен — ведёт в раздел, как ссылка «Pokaż wszystkie». */
.index-catalog-block .top-block h2.section-title-link {
  cursor: pointer;
}
/* Стрелки «Истории игр» стоят в шапке на месте ссылки «показать все» и обязаны
   закрывать линию-разделитель тем же способом — фоном страницы. Без этого
   `.top-block:before` проходила прямо по круглым кнопкам и просвечивала сквозь их
   полупрозрачный фон. Цвет и отступ повторяют правило для ссылки выше. */
.index-catalog-block .top-block .rg-nav {
  background: #13142c;
  padding-left: 45px;
}
/* Заголовок и ссылка «Pokaż wszystkie» держатся в ОДНУ строку. Раньше .flex
   (flex-wrap:wrap) переносил ссылку под длинный заголовок (напр. «Kasyno na żywo»):
   она выглядела криво, а тап по заголовку случайно попадал на перенесённую ссылку. */
.index-catalog-block .top-block.flex {
  flex-wrap: nowrap;
}
.index-catalog-block .top-block.flex > h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.index-catalog-block .top-block.flex > a {
  flex: 0 0 auto;
  white-space: nowrap;
}
.index-catalog-block .list {
  margin: 0 -6px;
}
.index-catalog-block .list .item {
  /* [2026-08-06] Восемь в ряд — как было и как на образце. Размер плитки растёт
     не за счёт числа колонок, а за счёт ВЫСОТЫ: пропорция карточки переведена
     с 4/3 на 3/4 (см. ниже). При контейнере .wrap = 1268 px это 148×197 вместо
     148×111 — область картинки больше на 77%. */
  width: calc(12.5% - 12px);
  margin: 0 6px 12px 6px;
}
.index-catalog-block .list .item:hover .image .link {
  opacity: 1;
}
.index-catalog-block .list .item .image {
  position: relative;
  margin-bottom: 8px;
  border-radius: 16px;
  overflow: hidden;
  /* ⚠️ [2026-08-22] isolation ЗАПИРАЕТ содержимое карточки в её собственный контекст
   * наложения. Без этого метка «игра недоступна в вашем регионе» (.geo-overlay,
   * `absolute; z-index:3`) ВСПЛЫВАЛА в корневой контекст: ни .image (relative, но
   * z-index:auto), ни .item со .index-catalog-block (оба static) контекста не создают.
   * Там она оказывалась рядом с .index-top-form, у которой тоже z-index:3, а при
   * равных значениях выигрывает тот, кто НИЖЕ в разметке — каталог идёт после формы.
   * Итог: метка ложилась поверх открытого списка «Все провайдеры».
   * ⚠️ Поднимать z-index формы — лечение симптома: любой следующий слой внутри
   * карточки (наведение .link со своим z-index:2, будущие бейджи) повторил бы то же.
   * `isolation` создаёт контекст, ничего не рисуя и не трогая раскладку — в отличие
   * от `transform` или `opacity`, которые дали бы тот же эффект побочно. */
  isolation: isolate;
}
.index-catalog-block .list .item .image > img {
  width: 100%;
  /* Единый размер карточек. Было только width:100% — высота шла по натуральным
     пропорциям файла, поэтому блок «рвался»: провайдеры отдают картинки по-разному.
     287/193 — формат большинства (Turkey: PragmaticPlayLive, Ezugi, Betgames,
     XProgaming = 644 игры из 740 в Live Casino), они рисуются без обрезки;
     подгоняется только Playtech (96 шт., через Stakes) — у него картинки выше.
     cover кадрирует по центру, не растягивая — лица дилеров в live не плющит. */
  /* [experiment 2026-07-24] 287/193 (1.49) → 4/3 (1.33): карточка чуть выше —
     вертикальные постеры (Shadylady и т.п.) в letterbox крупнее, широкие обложки
     cover подрезает по бокам всего на ~10% (названия по центру — не страдают). */
  /* [2026-08-06] 4/3 → 3/4: карточка вертикальная, как на образце. При 8 в ряд и
     контейнере 1268 px это 148×197 вместо 148×111 — область картинки больше на 77%.
     ⚠️ Решение владельца: обложки остальных поставщиков будут заменены на
     вертикальные. До замены горизонтальный арт режется по бокам — это ожидаемо
     и временно.
     Откат: вернуть 4 / 3 здесь и 12.5% выше. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
/* [letterbox 2026-07-24 — ОТКЛЮЧЁН 06.08.2026, решение владельца]
   Механизм вписывал обложку целиком (object-fit: contain) и заполнял поля её же
   размытой копией.

   История решения в один день: сначала отключён вместе с переходом на вертикальную
   плитку; затем ненадолго возвращён — выяснилось, что у Lives вертикальных вариантов
   НЕТ ВООБЩЕ (проверено: 0 из 50 игр, только горизонтальный 287×193), и подложка
   спасала бы им название от обрезки. Владелец выбрал ОБРЕЗКУ: единый вид витрины
   важнее сохранности надписи у 11% каталога.

   Итог: всё идёт через cover.
     Stakes 0.75, Turkey hq_v 0.67 → заполняют плитку
     Lives 1.49, старый CDN gis    → обрезаются по бокам, это принято сознательно

   ⚠️ JS (app.js) класс .img-letterbox по-прежнему вешает, но правил под него нет —
   он инертен. Условие там уже РАЗВЁРНУТО под вертикальную плитку
   (LETTERBOX_MIN_RATIO = 0.95, широкие вписываются), поэтому возврат механизма =
   снять комментарий с двух правил ниже, JS трогать не придётся.

.index-catalog-block .list .item .image.img-letterbox::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--letterbox-src);
  background-size: cover;
  background-position: center;
  filter: blur(14px) brightness(0.72) saturate(1.1);
  transform: scale(1.18);
}
.index-catalog-block .list .item .image.img-letterbox > img {
  object-fit: contain;
  position: relative;
  z-index: 1;
}
*/
.index-catalog-block .list .item .image .link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.index-catalog-block .list .item .image .link a {
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.index-catalog-block .list .item .image .link a:first-child {
  width: 55px;
  height: 55px;
  background: url('img/play.svg') no-repeat center center;
  background-size: contain;
  margin-bottom: 8px;
}
.index-catalog-block .list .item .image .link a:last-child:not(:first-child) {
  font-size: 12px;
  color: #fff;
  opacity: 0.8;
}
.index-catalog-block .list .item h3 {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.index-catalog-block .bottom-button {
  text-align: center;
  padding-top: 12px;
  margin-bottom: 40px;
}
.index-catalog-block .bottom-button button {
  color: #fff;
  height: 48px;
  padding: 0 24px 0 44px;
  font-weight: 700;
  border-radius: 28px;
  box-shadow: 0px 10px 16px 0px rgba(75, 74, 120, 0.11);
  background: #242648 url('img/reload.svg') no-repeat 16px 50%;
}
.index-catalog-block .bottom-button button:hover {
  color: #7c5fd5;
}
.bottom-contacts-block {
  background: #1b1d3a;
  padding: 32px 0;
}
.bottom-contacts-block .links a {
  display: inline-block;
  text-decoration: none;
  line-height: 48px;
  font-weight: 700;
}
.bottom-contacts-block .links a.mail {
  color: #7a5deb;
  padding: 0 24px 0 48px;
  background: url('img/mail.svg') no-repeat 16px 50%;
}
.bottom-contacts-block .links a.help {
  padding: 0 20px 0 52px;
  background: url('img/help.svg') no-repeat 20px 50%;
}
.bottom-contacts-block .langs {
  position: relative;
  cursor: pointer;
}
.bottom-contacts-block .langs img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}
.bottom-contacts-block .langs .link {
  display: inline-block;
  text-decoration: none;
  padding: 0 44px 0 36px;
  line-height: 48px;
  height: 48px;
  position: relative;
  font-weight: 700;
  text-transform: uppercase;
  background: #363860 url('img/arrow.svg') no-repeat right 14px top 50%;
  border-radius: 24px;
}
.bottom-contacts-block .langs .link img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
}
.bottom-contacts-block .langs .morelangs {
  position: absolute;
  bottom: 100%;
  left: 0;
  min-width: 100%;
  background: #242648;
  border-radius: 12px;
  padding: 6px 0;
  margin-bottom: 4px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.bottom-contacts-block .langs .morelangs .link {
  display: block;
  padding: 8px 16px 8px 36px;
  white-space: nowrap;
  height: auto;
  line-height: 20px;
  border-radius: 0;
  background: none;
  transition: background 150ms ease;
}
.bottom-contacts-block .langs .morelangs .link:hover {
  background: rgba(255, 255, 255, 0.08);
}
.bottom-contacts-block .langs .morelangs .link img {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.partners-block {
  padding: 60px 0;
}
.partners-block .item .logo {
  width: 12%;
  font-size: 0;
}
.partners-block .bottom-link {
  display: inline-block;
  text-decoration: none;
  padding: 0 44px 0 20px;
  line-height: 48px;
  color: rgba(255, 255, 255, 0.48);
  text-transform: uppercase;
  font-weight: 700;
  background: url('img/arrow3.svg') no-repeat right 12px top 50%;
  display: none;
}
.partners-block .bottom-link:before {
  content: var(--label-expand, "Expand");
}
.partners-block .bottom-link.active {
  background: url('img/arrow3a.svg') no-repeat right 12px top 50%;
}
.partners-block .bottom-link.active:before {
  content: var(--label-hide, "Hide");
}
.bottom-payments-block {
  max-width: 1350px;
  margin: 0 auto;
  padding: 22px 0;
  border-radius: 16px;
  background: #1b1d3a;
  text-align: center;
  font-size: 0;
}
.footer {
  text-align: center;
  padding: 40px 0 106px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  line-height: 16px;
}
.footer .logos {
  margin-bottom: 40px;
}
.footer .logos img {
  vertical-align: middle;
}
.footer .logos2 {
  margin-bottom: 40px;
}
.footer .logos2 img {
  vertical-align: middle;
}
.footer p {
  margin-bottom: 15px;
}
.mobile-menu {
  position: fixed;
  width: 307px;
  height: 100%;
  top: 0;
  right: -307px;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  z-index: 21;
  background: #13142c;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html.menu-open,
body.menu-open {
  overflow: hidden !important;
  height: 100%;
}
.mobile-menu .close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 20px;
  height: 20px;
  background: url('img/close.svg');
}
.mobile-menu .mail {
  position: absolute;
  top: 16px;
  right: 52px;
  width: 20px;
  height: 20px;
  background: url('img/mail2.svg');
}
.mobile-menu .wellcome {
  padding: 45px 24px 24px 24px;
  background: url('img/wellcome.jpg') center / cover;
}
.mobile-menu .wellcome .user {
  margin-bottom: 8px;
}
.mobile-menu .wellcome .user .avatar {
  display: table-cell;
  vertical-align: middle;
}
.mobile-menu .wellcome .user .avatar img {
  width: 54px;
  max-width: 54px;
  height: 54px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  object-fit: cover;
}
.mobile-menu .wellcome .user .info {
  display: table-cell;
  vertical-align: middle;
  padding-left: 12px;
}
.mobile-menu .wellcome .user .info .name {
  margin-bottom: 4px;
  font-weight: 700;
  line-height: 19px;
}
.mobile-menu .wellcome .user .info .id {
  color: #d6dcee;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.mobile-menu .wellcome .user .info .id .copy {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background: url('img/copy.svg') center / cover;
  margin: -4px 0 0 4px;
}
.mobile-menu .wellcome .user .info .data {
  padding-top: 12px;
  border-top: 3px solid rgba(255, 255, 255, 0.3);
  width: 360px;
}
.mobile-menu .wellcome .user .info .data .data-item {
  display: inline-block;
  vertical-align: top;
  color: #d6dcee;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.mobile-menu .wellcome .user .info .data .data-item:not(:last-child) {
  margin-right: 28px;
}
.mobile-menu .wellcome .user .info .data .data-item span {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.mobile-menu .wellcome .flex {
  padding: 0;
}
.mobile-menu .wellcome .block {
  color: #d6dcee;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  margin-bottom: 16px;
}
.mobile-menu .wellcome .block span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}
.mobile-menu .wellcome .bt {
  padding-top: 12px;
  border-top: 3px solid rgba(255, 255, 255, 0.3);
}
.mobile-menu .wellcome button {
  margin-bottom: 24px;
  width: 102px;
  height: 36px;
  color: #fff;
  border-radius: 28px;
  background: #7c5fd5;
  font-weight: 700;
}
.mobile-menu .wellcome table {
  width: 100%;
}
.mobile-menu .wellcome table tr td {
  padding: 0 0 10px 0;
  color: #d6dcee;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.mobile-menu .wellcome table tr td:last-child {
  text-align: right;
  color: #fff;
  padding-left: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}
.mobile-menu ul {
  padding: 0 30px;
}
.mobile-menu ul li:not(:last-child) {
  border-bottom: 1px solid #242648;
}
.mobile-menu ul li:last-child a {
  color: #616764;
}
.mobile-menu ul li a {
  display: block;
  text-decoration: none;
  line-height: 56px;
  position: relative;
  font-weight: 700;
  padding: 0 22px;
  background: url('img/arrow2.svg') no-repeat right;
}
.mobile-menu ul li a img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -10px;
}
.mobile-menu .flex {
  padding: 16px;
}
.mobile-menu .flex .chat {
  background: url('img/chat.svg') no-repeat 8px 50%;
  padding: 16px 8px 16px 40px;
  margin-right: 8px;
  font-weight: 700;
  line-height: 16px;
  border-radius: 28px;
  text-decoration: none;
}
.mobile-menu .flex .chat:hover {
  box-shadow: 0px 3px 10px 0px rgba(128, 93, 235, 0.12);
  background: #242648 url('img/chat.svg') no-repeat 8px 50%;
  color: #fdfdfd;
}
.mobile-menu .flex .langs {
  position: relative;
  cursor: pointer;
}
.mobile-menu .flex .langs img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}
.mobile-menu .flex .langs .link {
  display: inline-block;
  text-decoration: none;
  padding: 16px 44px 16px 36px;
  position: relative;
  font-weight: 700;
  line-height: 16.1px;
  text-transform: uppercase;
  background: url('img/arrow.svg') no-repeat right 14px top 50%;
}
.mobile-menu .flex .langs .link img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
}
.mobile-menu .flex .langs .morelangs {
  position: absolute;
  bottom: 100%;
  left: 0;
  min-width: 100%;
  background: #242648;
  border-radius: 12px;
  padding: 6px 0;
  margin-bottom: 4px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.mobile-menu .flex .langs .morelangs .link {
  display: block;
  padding: 8px 16px 8px 36px;
  white-space: nowrap;
  border-radius: 0;
  background: none;
  transition: background 150ms ease;
}
.mobile-menu .flex .langs .morelangs .link:hover {
  background: rgba(255, 255, 255, 0.08);
}
.mobile-menu .flex .langs .morelangs .link img {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.mobile-menu.mobile-menu--guest .mobile-menu-user-only {
  display: none !important;
}
.mobile-menu.mobile-menu--user .mobile-menu-guest-only {
  display: none !important;
}
.mobile-menu .mobile-menu-guest-only {
  padding-top: 56px;
}
.mobile-menu .mobile-menu-guest-only ul li:last-child a {
  color: #fdfdfd;
}
.mobile-menu .mobile-menu-guest-only .mobile-menu-guest-actions {
  padding: 8px 24px 24px;
}
.mobile-menu .mobile-menu-guest-only .mobile-menu-guest-actions button {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  margin-bottom: 8px;
  color: #fff;
  padding: 0 24px;
  font-weight: 700;
  border-radius: 28px;
  border: none;
  cursor: pointer;
}
.mobile-menu .mobile-menu-guest-only .mobile-menu-guest-actions button.login {
  background: #242648;
}
.mobile-menu .mobile-menu-guest-only .mobile-menu-guest-actions button.reg {
  background: #4f25c3;
}
.popup {
  background: none !important;
  padding: 0!important;
  color: #fff;
}
.navi {
  max-width: 1400px;
  margin: 16px auto 24px auto;
  padding: 12px 24px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(79, 37, 195, 0.18) 0%, rgba(36, 17, 85, 0.55) 60%, rgba(36, 17, 85, 0.55) 100%);
  border: 1px solid rgba(79, 37, 195, 0.35);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.45);
}
.navi a {
  display: inline-block;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
  cursor: pointer;
}
.navi a:hover {
  color: #9073df;
}
.navi span {
  color: #9073df;
  font-weight: 700;
  margin: 0 0 0 4px;
}
.popup-game {
  flex: 1;
  display: flex;
  overflow: hidden;
  border-radius: 0;
}
.popup-game .navi {
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background: #241155;
  padding: 12px 32px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.popup-game .navi a {
  display: inline-block;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
}
.popup-game .navi span {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
  margin: 0 5px;
}
.popup-game .game {
  flex: 1;
  height: 100%;
  margin-bottom: 0;
}
.popup-game .game iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.popup-game .bottom-block {
  padding: 10px 32px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #4f25c3;
  font-weight: 600;
  line-height: 16.8px;
}
.popup-game .bottom-block img {
  vertical-align: middle;
  margin: -2px 4px 0 0;
}
.popup-game .bottom-block button {
  float: right;
  width: 231px;
  height: 40px;
  color: #fff;
  border-radius: 24px;
  background: #ff5823;
  font-weight: 700;
  margin-top: -2px;
}
@media (max-width: 1200px) {
  .popup-game .bottom-block {
    text-align: center;
  }
  .popup-game .bottom-block img {
    display: block;
    margin: 0 auto 10px auto;
  }
  .popup-game .bottom-block button {
    float: none;
    width: 100%;
    margin: 10px 0 0 0;
  }
}
.popup-form {
  border-radius: 16px;
  overflow: hidden;
  background: #13142c;
}
.popup-form .fields {
  padding: 32px 40px 48px 40px;
  position: relative;
}
.popup-form .fields .back-link {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 24px;
  height: 24px;
  background: url('img/back2.svg');
}
.popup-form .fields h2 {
  text-align: center;
  margin-bottom: 44px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}
.popup-form .fields .field {
  position: relative;
  margin-bottom: 8px;
}
.popup-form .fields .field input[type='text'],
.popup-form .fields .field input[type='email'],
.popup-form .fields .field input[type='tel'],
.popup-form .fields .field input[type='password'] {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background: #242648;
  padding: 10px 50px 0 46px;
  color: #fff;
  font-weight: 600;
  color: #b1b1b1;
}
.popup-form .fields .field input[type='text']:focus,
.popup-form .fields .field input[type='email']:focus,
.popup-form .fields .field input[type='tel']:focus,
.popup-form .fields .field input[type='password']:focus {
  color: #fff;
}
.popup-form .fields .field input[type='text'].mail,
.popup-form .fields .field input[type='email'].mail,
.popup-form .fields .field input[type='tel'].mail,
.popup-form .fields .field input[type='password'].mail {
  background: #242648 url('img/inp1.svg') no-repeat 14px 50%;
}
.popup-form .fields .field input[type='text'].mail:focus,
.popup-form .fields .field input[type='email'].mail:focus,
.popup-form .fields .field input[type='tel'].mail:focus,
.popup-form .fields .field input[type='password'].mail:focus {
  background: #242648 url('img/inp1a.svg') no-repeat 14px 50%;
}
.popup-form .fields .field input[type='text'].mail.error,
.popup-form .fields .field input[type='email'].mail.error,
.popup-form .fields .field input[type='tel'].mail.error,
.popup-form .fields .field input[type='password'].mail.error {
  background: #242648 url('img/inp1e.svg') no-repeat 14px 50%;
}
.popup-form .fields .field input[type='text'].pass,
.popup-form .fields .field input[type='email'].pass,
.popup-form .fields .field input[type='tel'].pass,
.popup-form .fields .field input[type='password'].pass {
  background: #242648 url('img/inp2.svg') no-repeat 14px 50%;
}
.popup-form .fields .field input[type='text'].pass:focus,
.popup-form .fields .field input[type='email'].pass:focus,
.popup-form .fields .field input[type='tel'].pass:focus,
.popup-form .fields .field input[type='password'].pass:focus {
  background: #242648 url('img/inp2a.svg') no-repeat 14px 50%;
}
.popup-form .fields .field input[type='text'].pass.error,
.popup-form .fields .field input[type='email'].pass.error,
.popup-form .fields .field input[type='tel'].pass.error,
.popup-form .fields .field input[type='password'].pass.error {
  background: #242648 url('img/inp2e.svg') no-repeat 14px 50%;
}
.popup-form .fields .field input[type='text'].value,
.popup-form .fields .field input[type='email'].value,
.popup-form .fields .field input[type='tel'].value,
.popup-form .fields .field input[type='password'].value {
  background: url('img/inp3.svg') no-repeat 14px 50%, url('img/arrow4.svg') no-repeat right 14px top 50%, #242648;
}
.popup-form .fields .field input[type='text'].value:focus,
.popup-form .fields .field input[type='email'].value:focus,
.popup-form .fields .field input[type='tel'].value:focus,
.popup-form .fields .field input[type='password'].value:focus {
  background: url('img/inp3a.svg') no-repeat 14px 50%, url('img/arrow4.svg') no-repeat right 14px top 50%, #242648;
}
.popup-form .fields .field input[type='text'].error,
.popup-form .fields .field input[type='email'].error,
.popup-form .fields .field input[type='tel'].error,
.popup-form .fields .field input[type='password'].error {
  box-shadow: 0 0 0 1px #ff7a6e;
}
.popup-form .fields .field p {
  position: absolute;
  pointer-events: none;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  font-weight: 600;
  left: 46px;
  top: 15px;
  line-height: 16.8px;
  color: #b1b1b1;
}
.popup-form .fields .field input[type='text']:focus + p,
.popup-form .fields .field input[type='email']:focus + p,
.popup-form .fields .field input[type='tel']:focus + p,
.popup-form .fields .field input[type='text']:not(:placeholder-shown) + p,
.popup-form .fields .field input[type='email']:not(:placeholder-shown) + p,
.popup-form .fields .field input[type='tel']:not(:placeholder-shown) + p,
.popup-form .fields .field input[type='password']:focus + p,
.popup-form .fields .field input[type='password']:not(:placeholder-shown) + p,
.popup-form .fields .field input[type='text'].active + p,
.popup-form .fields .field input[type='email'].active + p,
.popup-form .fields .field input[type='tel'].active + p {
  top: 8px;
  font-size: 8px;
  line-height: 11px;
}
.popup-form .fields .field .eye {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 14px;
  width: 24px;
  height: 24px;
  background: url('img/eye.svg');
}
.popup-form .fields .field .eye.view {
  background: url('img/eye2.svg');
}
.popup-form .fields .field .window {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  z-index: 4;
  border-radius: 8px;
  background: #34365e;
  width: 100%;
  padding: 16px 16px 8px 16px;
  display: none;
}
.popup-form .fields .field .window ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.popup-form .fields .field .window ul li {
  width: 33.33334%;
  margin-bottom: 8px;
  text-align: center;
  border-right: 1px solid #6a7371;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.popup-form .fields .field .window ul li:nth-child(3n) {
  border-right: 0;
}
.popup-form .fields .field .window ul li a {
  display: block;
  text-decoration: none;
  padding: 8px 0;
  font-weight: 600;
  line-height: 16.8px;
}
.popup-form .fields .field .error-text {
  margin: 4px 0 0 14px;
  color: #ff7a6e;
  font-size: 8px;
  font-weight: 600;
  line-height: 11px;
}
.popup-form .fields button {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  color: #fff;
  font-weight: 700;
  border-radius: 24px;
  background: #4f25c3;
}
.popup-form .fields button:hover {
  background: #7a5deb;
}
.popup-form .fields .forget {
  text-align: center;
  padding: 16px 0 12px;
}
.popup-form .fields .forget a {
  color: #7a5deb;
  font-size: 14px;
  font-weight: 600;
  line-height: 16.8px;
}
.popup-form .login {
  background: #1a1c38;
  text-align: center;
  padding: 24px;
}
.popup-form .login p {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-bottom: 8px;
  color: #a4a4a4;
}
.popup-form .login p:first-child {
  color: #fff;
  margin-bottom: 16px;
}
.popup-form .login .links {
  margin-bottom: 16px;
}
.popup-form .login .links * {
  vertical-align: middle;
}
.popup-form .login .links a {
  margin: 0 8px;
}
.popup-form .login button {
  width: 100%;
  height: 48px;
  color: #fff;
  font-weight: 700;
  border-radius: 24px;
  background: #2d3055;
}
.popup-form .login button:hover {
  background: #000;
}
.cabinet {
  background: #13142c;
  border-radius: 8px;
  overflow: hidden;
}
.cabinet .cabinet-header {
  background: url('img/cabinet-header.jpg') center / cover;
  padding: 40px 76px 46px 80px;
}
.cabinet .cabinet-header .user .avatar {
  display: table-cell;
  vertical-align: middle;
}
.cabinet .cabinet-header .user .avatar img {
  width: 120px;
  max-width: 120px;
  height: 120px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  object-fit: cover;
}
.cabinet .cabinet-header .user .info {
  display: table-cell;
  vertical-align: middle;
  padding-left: 20px;
}
.cabinet .cabinet-header .user .info .name {
  margin-bottom: 3px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}
.cabinet .cabinet-header .user .info .id {
  margin-bottom: 12px;
  color: #d6dcee;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.cabinet .cabinet-header .user .info .id .copy {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url('img/copy.svg');
}
.cabinet .cabinet-header .user .info .data {
  padding-top: 12px;
  border-top: 3px solid rgba(255, 255, 255, 0.3);
  width: 360px;
}
.cabinet .cabinet-header .user .info .data .data-item {
  display: inline-block;
  vertical-align: top;
  color: #d6dcee;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.cabinet .cabinet-header .user .info .data .data-item:not(:last-child) {
  margin-right: 28px;
}
.cabinet .cabinet-header .user .info .data .data-item span {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.cabinet .cabinet-header .confirm {
  height: 40px;
  color: #fff;
  padding: 0 24px 0 56px;
  font-weight: 700;
  border-radius: 28px;
  background: #2e3157 url('img/confirm.svg') no-repeat 24px 50%;
}
.cabinet .cabinet-header .confirm:hover {
  background: #000 url('img/confirm.svg') no-repeat 24px 50%;
}
.cabinet .cabinet-content {
  padding: 16px 80px 40px 80px;
}
.cabinet .cabinet-content .menu {
  margin-bottom: 24px;
  border-bottom: 1px solid #242648;
  font-size: 0;
}
.cabinet .cabinet-content .menu a {
  display: inline-block;
  text-decoration: none;
  position: relative;
  padding: 16px;
  color: #6f7573;
  font-size: 14px;
  font-weight: 700;
  line-height: 16.1px;
}
.cabinet .cabinet-content .menu a:hover,
.cabinet .cabinet-content .menu a.active {
  color: #4f25c3;
}
.cabinet .cabinet-content .menu a:hover:after,
.cabinet .cabinet-content .menu a.active:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #9881db;
}
.cabinet .cabinet-content .left-menu {
  width: 25%;
}
.cabinet .cabinet-content .left-menu ul {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0px 10px 16px 0px rgba(75, 74, 120, 0.11);
  background: #1b1d3a;
}
.cabinet .cabinet-content .left-menu ul li:not(:last-child) {
  border-bottom: 1px solid #242648;
}
.cabinet .cabinet-content .left-menu ul li a {
  display: block;
  text-decoration: none;
  padding: 20px 52px;
  position: relative;
  font-weight: 700;
  line-height: 16px;
  background: url('img/arrow6.svg') no-repeat right 16px top 50%;
}
.cabinet .cabinet-content .left-menu ul li a.active {
  color: #fff;
  background: #4f25c3 url('img/arrow6a.svg') no-repeat right 16px top 50%;
}
.cabinet .cabinet-content .left-menu ul li a.active svg path {
  fill: #fff;
}
.cabinet .cabinet-content .left-menu ul li a.logout {
  color: #6f7573;
}
.cabinet .cabinet-content .left-menu ul li a.logout svg path {
  fill: #6f7573;
}
.cabinet .cabinet-content .left-menu ul li a svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
}
.cabinet .cabinet-content .left-menu ul li a svg path {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  fill: #7a5deb;
}
.cabinet .cabinet-content .main-content {
  width: 73%;
}
.cabinet .cabinet-content .main-content .ballanse {
  margin-bottom: 24px;
  padding: 24px 32px 112px 32px;
  border-radius: 16px;
  box-shadow: 0px 8px 8px 0px rgba(75, 74, 120, 0.04);
  background: #1b1d3a;
}
.cabinet .cabinet-content .main-content .ballanse .top {
  position: relative;
  margin-bottom: 16px;
}
.cabinet .cabinet-content .main-content .ballanse .top .name div {
  display: table-cell;
  vertical-align: middle;
  color: #808aa6;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.cabinet .cabinet-content .main-content .ballanse .top .name div span {
  display: block;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}
.cabinet .cabinet-content .main-content .ballanse .top .name div img {
  max-width: 102px;
  width: 102px;
  margin-right: 16px;
}
.cabinet .cabinet-content .main-content .ballanse .top button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 180px;
  height: 48px;
  border-radius: 28px;
  background: #562cea;
  color: #fff;
  font-weight: 700;
}
.cabinet .cabinet-content .main-content .ballanse .list .item {
  width: 49%;
  margin-bottom: 16px;
  border-radius: 4px;
  background: #242648;
  padding: 8px 16px;
}
.cabinet .cabinet-content .main-content .ballanse .list .item div {
  color: #fdfdfd;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.cabinet .cabinet-content .main-content .ballanse .list .item div:last-child {
  font-weight: 700;
  color: #fdfdfd;
}
.cabinet .cabinet-content .main-content .ballanse .list .item div span {
  margin-right: 12px;
  font-weight: 700;
  color: #e4e5eb;
}
.cabinet .cabinet-content .main-content .promo-banner {
  background: url('img/promo-banner.jpg') center / cover;
  text-align: center;
  padding: 16px 24px;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  border-radius: 8px;
}
.cabinet .cabinet-content .main-content .promo-banner input[type='text'] {
  width: 322px;
  height: 48px;
  margin: 0 16px;
  padding: 0 20px 0 50px;
  color: #808aa6;
  font-weight: 600;
  border-radius: 24px;
  background: #2e3157 url('img/promo.svg') no-repeat 16px 50%;
}
.cabinet .cabinet-content .main-content .promo-banner button {
  width: 107px;
  height: 48px;
  color: #fff;
  font-weight: 700;
  border-radius: 28px;
  background: #562cea;
}
.cabinet .cabinet-content .main-content .left-menu {
  width: auto;
  display: none;
}
.cabinet .cabinet-content .main-content .bonuses {
  margin-bottom: 24px;
  padding: 24px 32px;
  border-radius: 16px;
  box-shadow: 0px 8px 8px 0px rgba(75, 74, 120, 0.04);
  background: #1b1d3a;
}
.cabinet .cabinet-content .main-content .bonuses .top-block {
  margin-bottom: 16px;
}
.cabinet .cabinet-content .main-content .bonuses .top-block div {
  display: table-cell;
  vertical-align: middle;
  color: #808aa6;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.cabinet .cabinet-content .main-content .bonuses .top-block div span {
  display: block;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}
.cabinet .cabinet-content .main-content .bonuses .top-block div img {
  width: 102px;
  max-width: 102px;
  margin-right: 16px;
}
.cabinet .cabinet-content .main-content .bonuses .list .item {
  width: 49%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0px 10px 16px 0px rgba(75, 74, 120, 0.11);
  background: #242648;
}
.cabinet .cabinet-content .main-content .bonuses .list .item:nth-child(1) {
  background: #242648 url('img/bg1.png') no-repeat top right;
}
.cabinet .cabinet-content .main-content .bonuses .list .item:nth-child(2) {
  background: #242648 url('img/bg2.png') no-repeat top right;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .name {
  margin-bottom: 75px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .name h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 8px;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .slider {
  overflow: hidden;
  margin: 0 -16px 8px 0;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .slider .slide {
  width: 332px;
  background: #242648;
  border: 2px solid #7E8583;
  border-radius: 8px;
  overflow: hidden;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .slider .slide .top {
  padding: 8px;
  position: relative;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .slider .slide .top .avatar div {
  display: table-cell;
  vertical-align: middle;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #9CA1A0;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .slider .slide .top .avatar div span {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .slider .slide .top .avatar div img {
  width: 32px;
  max-width: 32px;
  margin-right: 8px;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .slider .slide .top button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  width: 60px;
  height: 32px;
  background: #3a3d66;
  border-radius: 24px;
  font-weight: 700;
  color: #7A5DEB;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .slider .slide .bottom {
  padding: 16px 32px 16px 40px;
  background: #3a3d66 url('img/gift.svg') no-repeat 8px 50%;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .slider .dots {
  text-align: center;
  padding-top: 10px;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .slider .dots .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  background: none;
  opacity: 1;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 11px!important;
  position: relative;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .slider .dots .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .slider .dots .swiper-pagination-bullet:not(:last-child):after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -1px;
  width: 24px;
  height: 2px;
  background: #fff;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .button {
  text-align: right;
}
.cabinet .cabinet-content .main-content .bonuses .list .item .button button {
  width: 91px;
  height: 40px;
  background: #7C5FD5;
  border-radius: 24px;
  font-weight: 700;
  color: #FFFFFF;
}
.cabinet .cabinet-content .main-content .history {
  border-radius: 16px;
  box-shadow: 0px 8px 8px 0px rgba(75, 74, 120, 0.04);
  background: #1b1d3a;
  min-height: 552px;
}
.cabinet .cabinet-content .main-content .history .form {
  text-align: right;
  padding: 24px 32px 16px 32px;
}
.cabinet .cabinet-content .main-content .history .form .pdf {
  display: inline-block;
  margin-right: 24px;
  line-height: 48px;
  padding: 0 24px 0 48px;
  border-radius: 24px;
  background: rgba(214, 220, 238, 0.32) url('img/pdf.svg') no-repeat 16px 50%;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.35;
}
.cabinet .cabinet-content .main-content .history .form select {
  margin-right: 24px;
  height: 48px;
  padding: 0 44px;
  color: #fff;
  font-weight: 700;
  appearance: none;
  border-radius: 9999px;
  background: url('img/date.svg') no-repeat 12px 50%, url('img/arrow7.svg') no-repeat right 12px top 50%, #2e3157;
}
.cabinet .cabinet-content .main-content .history .form form {
  display: inline-block;
  width: 320px;
  height: 48px;
  position: relative;
  /* See .index-top-form form for the rationale — locales like PL "Wyszukiwanie"
   * are wider than the original 96px button. Bumping this single value also
   * shifts the input's right padding below. */
  --history-search-btn-min: 130px;
}
.cabinet .cabinet-content .main-content .history .form form input[type='text'] {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: #242648 url('img/search.svg') no-repeat 16px 50%;
  padding: 0 calc(var(--history-search-btn-min) + 16px) 0 44px;
  font-size: 13px;
  letter-spacing: -0.4px;
  color: #fff;
}
.cabinet .cabinet-content .main-content .history .form form button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
  width: auto;
  min-width: var(--history-search-btn-min);
  height: 40px;
  padding: 0 18px;
  border-radius: 30px;
  background: #562cea;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.cabinet .cabinet-content .main-content .history .form form button:hover {
  background: #7a5deb;
}
.cabinet .cabinet-content .main-content .history .tbl table {
  width: 100%;
}
.cabinet .cabinet-content .main-content .history .tbl table thead tr {
  background: #242648;
}
.cabinet .cabinet-content .main-content .history .tbl table thead tr td {
  padding: 12px 24px;
  color: #a5a5a5;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.4px;
}
.cabinet .cabinet-content .main-content .history .tbl table tbody tr {
  border-top: 1px solid #242648;
}
.cabinet .cabinet-content .main-content .history .tbl table tbody tr td {
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.4px;
}
.cabinet .cabinet-content .main-content .history .tbl table tbody tr td .no-transactions {
  padding: 134px 0;
  text-align: center;
}
.cabinet .cabinet-content .main-content .history .tbl table tbody tr td .no-transactions .text {
  display: inline-block;
  text-align: left;
}
.cabinet .cabinet-content .main-content .history .tbl table tbody tr td .no-transactions .text div {
  display: table-cell;
  vertical-align: middle;
  color: #a5a5a5;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.cabinet .cabinet-content .main-content .history .tbl table tbody tr td .no-transactions .text div img {
  width: 78px;
  max-width: 78px;
  margin-right: 16px;
}
.cabinet .cabinet-content .main-content .profile {
  padding: 24px 32px 162px 32px;
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0px 10px 16px 0px rgba(75, 74, 120, 0.11);
  background: #1b1d3a;
}
.cabinet .cabinet-content .main-content .profile .back-link {
  position: absolute;
  left: 0;
  top: 8px;
  width: 38px;
  height: 24px;
  background: url('img/back3.svg');
  display: none;
}
.cabinet .cabinet-content .main-content .profile h3 {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}
.cabinet .cabinet-content .main-content .profile .field {
  width: 49%;
  position: relative;
  margin-bottom: 12px;
}
.cabinet .cabinet-content .main-content .profile .field input[type='text'],
.cabinet .cabinet-content .main-content .profile .field input[type='password'],
.cabinet .cabinet-content .main-content .profile .field input[type='date'],
.cabinet .cabinet-content .main-content .profile .field input[type='email'],
.cabinet .cabinet-content .main-content .profile .field input[type='tel'],
.cabinet .cabinet-content .main-content .profile .field select {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background: #242648;
  padding: 16px 50px 4px 46px;
  color: #b1b1b1;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
/* [phone-verify 13.09.2026] Пустое поле подсвечиваем ТЕМ ЖЕ приёмом, что в модалке
   (.popup-form … input.error): один визуальный язык на обе формы. Ставит и снимает класс
   pvMarkEmpty в client/js/user.js — подсветка уходит с первым вводом. */
.cabinet .cabinet-content .main-content .profile .field input[type='text'].error,
.cabinet .cabinet-content .main-content .profile .field input[type='tel'].error,
.cabinet .cabinet-content .main-content .profile .field input[type='email'].error {
  box-shadow: 0 0 0 1px #ff7a6e;
}
.cabinet .cabinet-content .main-content .profile .field input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}
.cabinet .cabinet-content .main-content .profile .field select {
  color: #fdfdfd;
  padding-left: 16px;
  padding-right: 36px;
  cursor: pointer;
  background: url('img/arrow7.svg') no-repeat right 14px top 50%, #242648;
}
.cabinet .cabinet-content .main-content .profile .field select option {
  background: #242648;
  color: #fdfdfd;
}
.cabinet .cabinet-content .main-content .profile .field input[type='text']:focus,
.cabinet .cabinet-content .main-content .profile .field input[type='password']:focus,
.cabinet .cabinet-content .main-content .profile .field input[type='date']:focus,
.cabinet .cabinet-content .main-content .profile .field input[type='email']:focus,
.cabinet .cabinet-content .main-content .profile .field input[type='tel']:focus {
  color: #fff;
}
.cabinet .cabinet-content .main-content .profile .field input[type='text'].inp1,
.cabinet .cabinet-content .main-content .profile .field input[type='password'].inp1,
.cabinet .cabinet-content .main-content .profile .field input[type='date'].inp1,
.cabinet .cabinet-content .main-content .profile .field input[type='email'].inp1,
.cabinet .cabinet-content .main-content .profile .field input[type='tel'].inp1 {
  background: #242648 url('img/inp4.svg') no-repeat 14px 50%;
}
.cabinet .cabinet-content .main-content .profile .field input[type='text'].inp2,
.cabinet .cabinet-content .main-content .profile .field input[type='password'].inp2,
.cabinet .cabinet-content .main-content .profile .field input[type='date'].inp2,
.cabinet .cabinet-content .main-content .profile .field input[type='email'].inp2,
.cabinet .cabinet-content .main-content .profile .field input[type='tel'].inp2 {
  background: #242648 url('img/inp5.svg') no-repeat 14px 50%;
}
.cabinet .cabinet-content .main-content .profile .field input[type='text'].inp3,
.cabinet .cabinet-content .main-content .profile .field input[type='password'].inp3,
.cabinet .cabinet-content .main-content .profile .field input[type='date'].inp3,
.cabinet .cabinet-content .main-content .profile .field input[type='email'].inp3,
.cabinet .cabinet-content .main-content .profile .field input[type='tel'].inp3 {
  background: #242648 url('img/inp6.svg') no-repeat 14px 50%;
}
.cabinet .cabinet-content .main-content .profile .field input[type='text'].inp4,
.cabinet .cabinet-content .main-content .profile .field input[type='password'].inp4,
.cabinet .cabinet-content .main-content .profile .field input[type='date'].inp4,
.cabinet .cabinet-content .main-content .profile .field input[type='email'].inp4,
.cabinet .cabinet-content .main-content .profile .field input[type='tel'].inp4 {
  background: #242648 url('img/inp7.svg') no-repeat 14px 50%;
}
.cabinet .cabinet-content .main-content .profile .field input[type='text'].inp5,
.cabinet .cabinet-content .main-content .profile .field input[type='password'].inp5,
.cabinet .cabinet-content .main-content .profile .field input[type='date'].inp5,
.cabinet .cabinet-content .main-content .profile .field input[type='email'].inp5,
.cabinet .cabinet-content .main-content .profile .field input[type='tel'].inp5 {
  background: #242648 url('img/inp8.svg') no-repeat 14px 50%;
}
.cabinet .cabinet-content .main-content .profile .field input[type='text'].inp6,
.cabinet .cabinet-content .main-content .profile .field input[type='password'].inp6,
.cabinet .cabinet-content .main-content .profile .field input[type='date'].inp6,
.cabinet .cabinet-content .main-content .profile .field input[type='email'].inp6,
.cabinet .cabinet-content .main-content .profile .field input[type='tel'].inp6 {
  background: #242648 url('img/inp9.svg') no-repeat 14px 50%;
}
/* [field-icons 18.07] Иконки для полей без них: «Дата рождения» — input type=date
   не подпадал под селектор [type=text]; «Пол» и «Страна» — select без фоновой
   иконки. Стрелку dropdown (arrow7.svg справа) сохраняем. */
.cabinet .cabinet-content .main-content .profile .field input[type='date'].inp4 {
  background: #242648 url('img/inp7.svg') no-repeat 14px 50%;
  padding-left: 46px;
}
/* [field-icons] Иконки для select с классом inpN (перенос с manix): раньше только
   input подпадал под inp-селекторы, select оставался без левой иконки. */
.cabinet .cabinet-content .main-content .profile .field select.inp1 {
  padding-left: 46px;
  background: url('img/inp4.svg') no-repeat 14px 50%, url('img/arrow7.svg') no-repeat right 14px top 50%, #242648;
}
.cabinet .cabinet-content .main-content .profile .field select.inp2 {
  padding-left: 46px;
  background: url('img/inp5.svg') no-repeat 14px 50%, url('img/arrow7.svg') no-repeat right 14px top 50%, #242648;
}
.cabinet .cabinet-content .main-content .profile .field select.inp3 {
  padding-left: 46px;
  background: url('img/inp6.svg') no-repeat 14px 50%, url('img/arrow7.svg') no-repeat right 14px top 50%, #242648;
}
.cabinet .cabinet-content .main-content .profile .field select.inp4 {
  padding-left: 46px;
  background: url('img/inp7.svg') no-repeat 14px 50%, url('img/arrow7.svg') no-repeat right 14px top 50%, #242648;
}
.cabinet .cabinet-content .main-content .profile .field select.inp5 {
  padding-left: 46px;
  background: url('img/inp8.svg') no-repeat 14px 50%, url('img/arrow7.svg') no-repeat right 14px top 50%, #242648;
}
.cabinet .cabinet-content .main-content .profile .field select.inp6 {
  padding-left: 46px;
  background: url('img/inp9.svg') no-repeat 14px 50%, url('img/arrow7.svg') no-repeat right 14px top 50%, #242648;
}
.cabinet .cabinet-content .main-content .profile .field select.cab-gender {
  padding-left: 46px;
  background: url('img/arrow7.svg') no-repeat right 14px top 50%, url('img/inp4.svg') no-repeat 14px 50%, #242648;
}
.cabinet .cabinet-content .main-content .profile .field select.cab-country {
  padding-left: 46px;
  background: url('img/arrow7.svg') no-repeat right 14px top 50%, url('img/inp9.svg') no-repeat 14px 50%, #242648;
}
.cabinet .cabinet-content .main-content .profile .field p {
  position: absolute;
  pointer-events: none;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  font-weight: 600;
  left: 46px;
  top: 8px;
  font-size: 10px;
  line-height: 12px;
  color: #b1b1b1;
}
.cabinet .cabinet-content .main-content .profile .field input[type='text']:placeholder-shown + p,
.cabinet .cabinet-content .main-content .profile .field input[type='password']:placeholder-shown + p,
.cabinet .cabinet-content .main-content .profile .field input[type='email']:placeholder-shown + p,
.cabinet .cabinet-content .main-content .profile .field input[type='tel']:placeholder-shown + p {
  top: 17px;
  font-size: 13px;
  line-height: 16px;
}
.cabinet .cabinet-content .main-content .profile .field input[type='text']:focus + p,
.cabinet .cabinet-content .main-content .profile .field input[type='text']:valid + p,
.cabinet .cabinet-content .main-content .profile .field input[type='password']:focus + p,
.cabinet .cabinet-content .main-content .profile .field input[type='password']:valid + p,
.cabinet .cabinet-content .main-content .profile .field input[type='text'].active + p {
  top: 8px;
  font-size: 8px;
  line-height: 11px;
}
.cabinet .cabinet-content .main-content .profile .field .confirm {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 14px;
  text-decoration: none;
  font-weight: 700;
  /* [13.09.2026] ТАБЛЕТКА. Надпись читается как кнопка, а не как подпись: язык взят у
   * брендовых кнопок формы (высота 48, радиус 24, заливка #4f25c3, белый текст, наведение
   * #7a5deb). Высоту НЕ уменьшаем — это и есть область нажатия, замеренная 13.09. */
  padding: 0 12px;
  box-sizing: border-box;
  color: #fff;
  z-index: 1;
  /* ⚠️ [13.09.2026] Та же правка, что у надписи в форме регистрации: коробка равна высоте
   * поля (48 px), текст центрируется line-height. Промах мимо 17-пиксельной полоски попадал
   * в поле и открывал клавиатуру — отсюда «нажимаю Подтвердить, ничего не происходит».
   * ⚠️ Правило общее и для кнопки подтверждения ПОЧТЫ: поле у неё такой же высоты. */
  height: 48px;
  line-height: 48px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
/* ⚠️ [2026-08-22] Кнопка «Подтвердить» ЛОЖИЛАСЬ ПОВЕРХ АДРЕСА.
 * Она позиционирована абсолютно (right:14px), то есть из потока выключена и места
 * под себя не занимает, а у поля общий `padding-right: 50px` — он рассчитан под
 * ИКОНКУ, а не под слово. Длинный адрес доходил до кнопки и читался сквозь неё.
 * Поле помечено классом в разметке (vews/parts/cabinet-parts.php) — это надёжнее
 * селектора `:has()`, который не понимают браузеры до Chrome 105 / Safari 15.4.
 * ⚠️ Величина отступа взята НЕ на глаз: самый длинный перевод ключа `confirm` —
 * индонезийский «Mengonfirmasi» (13 знаков), затем русский «Подтвердить» и
 * греческий «Επιβεβαίωση» (по 11). 132px = ширина самого длинного при 14px/700
 * плюс отступ кнопки от края и зазор до текста.
 * ⚠️ Многоточие обязательно: отступ спасает от наложения, но очень длинный адрес
 * всё равно упрётся в границу — пусть обрывается явно, а не уезжает под кнопку. */
.cabinet .cabinet-content .main-content .profile .field-confirm input[type='text'] {
  padding-right: 152px;
  text-overflow: ellipsis;
}
.cabinet .cabinet-content .main-content .profile .field-confirm .confirm {
  max-width: 132px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cabinet .cabinet-content .main-content .profile .buttons {
  width: 49%;
  padding-top: 4px;
}
.cabinet .cabinet-content .main-content .profile .buttons button {
  width: 48%;
  height: 48px;
  border-radius: 24px;
  color: #fff;
  font-weight: 700;
}
.cabinet .cabinet-content .main-content .profile .buttons button:nth-child(1) {
  background: #7c5fd5;
}
.cabinet .cabinet-content .main-content .profile .buttons button:nth-child(2) {
  background: #33365d;
}
.cabinet .cabinet-content .main-content .profile .bottom-text {
  width: 49%;
  padding-top: 4px;
}
.cabinet .cabinet-content .main-content .profile .bottom-text p {
  margin-bottom: 8px;
  color: #808aa6;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.cabinet .cabinet-content .main-content .profile .bottom-text p span {
  color: #fff;
}
.cabinet .cabinet-content .main-content .network {
  padding: 24px 32px;
  border-radius: 8px;
  box-shadow: 0px 10px 16px 0px rgba(75, 74, 120, 0.11);
  background: #1b1d3a;
}
.cabinet .cabinet-content .main-content .network h3 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}
.cabinet .cabinet-content .main-content .network a {
  display: inline-block;
  margin-right: 8px;
}
.cabinet .cabinet-content .deposits {
  padding: 44px 205px 48px 205px;
  border-radius: 16px;
  box-shadow: 0px 8px 8px 0px rgba(75, 74, 120, 0.04);
  background: #1b1d3a;
}
.cabinet .cabinet-content .deposits .flag {
  text-align: right;
  margin-bottom: 36px;
}
.cabinet .cabinet-content .deposits .list {
  margin: 0 -3px;
}
.cabinet .cabinet-content .deposits .list .item {
  width: calc(16.66667% - 6px);
  margin: 0 3px 6px 3px;
  height: 86px;
  line-height: 86px;
  background: #242648;
  text-align: center;
}
.cabinet .cabinet-content .deposits .list .item img {
  vertical-align: middle;
  max-width: 80%;
}
.cabinet .cabinet-content .deposit {
  padding: 34px 20px 30px 20px;
  position: relative;
  border-radius: 16px;
  box-shadow: 0px 8px 8px 0px rgba(75, 74, 120, 0.04);
  background: #1b1d3a;
}
.cabinet .cabinet-content .deposit .back-link {
  position: absolute;
  top: 34px;
  left: 34px;
  width: 28px;
  height: 28px;
  background: url('img/back4.svg');
}
.cabinet .cabinet-content .deposit form {
  max-width: 343px;
  margin: 0 auto;
}
.cabinet .cabinet-content .deposit .steps {
  margin-bottom: 34px;
  overflow: hidden;
  padding: 6px;
  margin: 0 -6px 34px -6px;
}
.cabinet .cabinet-content .deposit .steps .step {
  position: relative;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #444771;
  font-size: 12px;
}
.cabinet .cabinet-content .deposit .steps .step:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -1px;
  width: 100000px;
  height: 2px;
  background: #444771;
}
.cabinet .cabinet-content .deposit .steps .step.active {
  background: #4f25c3;
  box-shadow: 0 0 0 6px rgba(173, 154, 226, 0.4);
}
.cabinet .cabinet-content .deposit .steps .step.past {
  background: #4f25c3 url('img/check.svg') no-repeat center;
  font-size: 0;
}
.cabinet .cabinet-content .deposit .steps .step.past:after {
  background: #4f25c3;
}
.cabinet .cabinet-content .deposit h4 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}
.cabinet .cabinet-content .deposit .select {
  margin-bottom: 16px;
}
.cabinet .cabinet-content .deposit .select .radio {
  display: none;
}
.cabinet .cabinet-content .deposit .select .radio + label {
  width: 23%;
  height: 40px;
  line-height: 40px;
  border-radius: 100px;
  background: #444771;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-bottom: 2px solid #ffffff;
}
.cabinet .cabinet-content .deposit .select .radio:checked + label {
  background: #4f25c3;
  border-bottom: 2px solid #412789;
}
.cabinet .cabinet-content .deposit .flex .field {
  width: 48.5%;
}
.cabinet .cabinet-content .deposit .field {
  position: relative;
  margin-bottom: 16px;
}
.cabinet .cabinet-content .deposit .field input[type='text'] {
  width: 100%;
  height: 53px;
  border: 1px solid #727976;
  border-radius: 2px;
  padding: 14px 17px 0 17px;
  color: #fff;
  background: none;
}
.cabinet .cabinet-content .deposit .field input[type='text'].error {
  border: 1px solid #ff7a6e;
}
.cabinet .cabinet-content .deposit .field p {
  position: absolute;
  pointer-events: none;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  top: 15px;
  left: 17px;
  color: #7f8a86;
  line-height: 19px;
}
.cabinet .cabinet-content .deposit .field input[type='text']:focus + p,
.cabinet .cabinet-content .deposit .field input[type='text']:valid + p {
  font-size: 12px;
  line-height: 16px;
  top: 8px;
}
.cabinet .cabinet-content .deposit .field .value {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 17px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}
.cabinet .cabinet-content .deposit .field .error-text {
  margin: 4px 0 -4px;
  color: #ff7a6e;
  font-size: 8px;
  font-weight: 600;
  line-height: 11px;
}
.cabinet .cabinet-content .deposit .tbl {
  margin-bottom: 22px;
  padding: 10px 16px;
  border-radius: 2px;
  background: #272a4d;
}
.cabinet .cabinet-content .deposit .tbl table {
  width: 100%;
}
.cabinet .cabinet-content .deposit .tbl table tr:last-child td:last-child {
  font-weight: 700;
}
.cabinet .cabinet-content .deposit .tbl table tr td {
  line-height: 17px;
  padding: 5px 0;
}
.cabinet .cabinet-content .deposit .tbl table tr td:last-child {
  text-align: right;
  padding-left: 10px;
}
.cabinet .cabinet-content .deposit button {
  width: 100%;
  height: 46px;
  margin-bottom: 20px;
  color: #fff;
  border-radius: 100px;
  background: #4f25c3;
  font-size: 16px;
  font-weight: 700;
}
.cabinet .cabinet-content .deposit button.other {
  background: none;
  border: 2px solid #4f25c3;
  color: #7a5deb;
}
.cabinet .cabinet-content .deposit .security {
  text-align: center;
}
.cabinet .cabinet-content .deposit .checkbox {
  display: none;
}
.cabinet .cabinet-content .deposit .checkbox + label {
  display: block;
  cursor: pointer;
  margin-bottom: 22px;
  padding-left: 26px;
  background: url('img/checkbox.svg') no-repeat 0 1px;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}
.cabinet .cabinet-content .deposit .checkbox:checked + label {
  background: url('img/checkbox2.svg') no-repeat 0 1px;
}
.demo-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 9999;
  background: #150f25;
  overflow: hidden;
}
.game-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.game-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 48px;
  flex-shrink: 0;
  background: #241155;
}
.game-nav-back {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.game-nav-back img {
  opacity: 0.7;
}
.game-nav-demotype {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.game-nav-demotype .go-real-link {
  padding: 6px 18px;
  height: 34px;
  border-radius: 20px;
  background: #ff5823;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .game-nav-demotype span {
    display: none;
  }
  .game-nav-demotype img {
    width: 16px;
  }
}
@media (max-width: 768px) {
  .game-nav {
    padding: 0 10px;
    gap: 8px;
    height: 44px;
  }
  .game-nav-back {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    font-size: 13px;
  }
  .game-nav-back .gamename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .game-nav-back img {
    width: 16px;
    flex-shrink: 0;
  }
  .game-nav-demotype {
    flex-shrink: 0;
    gap: 6px;
  }
  .game-nav-demotype img {
    display: none;
  }
  .game-nav-demotype .go-real-link {
    padding: 0 14px;
    height: 30px;
    font-size: 12px;
    border-radius: 16px;
  }
}
@media (max-width: 380px) {
  .game-nav {
    padding: 0 8px;
  }
  .game-nav-back {
    font-size: 12px;
  }
  .game-nav-demotype .go-real-link {
    padding: 0 10px;
    font-size: 11px;
  }
}
@media (max-width: 1298px) {
  .wrap {
    width: 970px;
  }
  .header nav .logo {
    margin-right: 12px;
  }
  .header nav ul li {
    padding: 7px 0;
  }
  .header .user .chat {
    margin-right: 0;
  }
  .header .user .langs {
    margin-right: 0;
  }
  .header .user .ballanse button {
    width: 86px;
    padding: 0;
  }
  .header .user .links a {
    margin-right: 0;
  }
  .header .user .links {
    padding: 0 12px;
  }
  .cabinet .cabinet-content .main-content .promo-banner input[type='text'] {
    width: 200px;
  }
  .cabinet .cabinet-content .main-content .bonuses .list .item {
    width: 100%;
  }
  .cabinet .cabinet-content .main-content .bonuses .list .item:nth-child(1) {
    margin-bottom: 24px;
  }
  .cabinet .cabinet-content .deposits {
    padding: 44px 30px 48px 30px;
  }
  .cabinet .cabinet-content .main-content .history .form form {
    width: 240px;
  }
}
@media (max-width: 991px) {
  /* Плавающий значок reCAPTCHA перекрывает контент в правом нижнем углу
     на мобильных; скрываем (защита работает, упоминание reCAPTCHA — в формах). */
  .grecaptcha-badge {
    visibility: hidden !important;
  }
  .wrap {
    width: 747px;
  }
  .index-top-form form {
    width: calc(100% - 280px);
  }
  .index-top-form .random {
    padding: 0 14px 0 40px;
    font-size: 13px;
  }
  .index-top-form .providers {
    padding: 0 36px 0 40px;
    font-size: 13px;
  }
  .header nav .logo {
    margin-right: 0;
    width: 67px;
    margin-top: 3px;
  }
  .header nav ul {
    display: none;
  }
  .header .user .chat {
    display: none;
  }
  .header .user .langs {
    display: none;
  }
  .header {
    padding: 10px 12px;
  }
  .header .user button {
    height: 36px;
  }
  /* Гостевые кнопки логина/регистрации на мобиле: десктопный padding 0 24px
     оставлял длинные локали (PL «Logowanie/Rejestracja», DE и т.п.) шире строки,
     и .user переносился под логотип (.header.flex имеет flex-wrap:wrap) —
     «кривой» хедер. Компактим padding/шрифт и запрещаем перенос текста. */
  .header .user button.login,
  .header .user button.reg {
    padding: 0 14px;
    font-size: 13px;
    white-space: nowrap;
  }
  /* Авторизованная шапка: колокольчик (40px + margin 0 8px) сделал блок
     баланс/Kasa/колокольчик/бургер шире свободного места на узких экранах
     (~360px CSS), и из-за flex-wrap:wrap у .header.flex весь .user
     переносился на вторую строку под логотип. Запрещаем перенос, компактим
     отступы; длинный баланс режем троеточием, а не переносим шапку. */
  .header.flex {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    align-items: center;
  }
  .header nav {
    flex-shrink: 0;
  }
  .header #auth-container {
    min-width: 0;
  }
  .header .user {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    min-width: 0;
  }
  .header .user .ballanse {
    display: flex;
    align-items: center;
    min-width: 0;
    margin-right: 0;
    padding: 0 4px 0 10px;
  }
  .header .user .ballanse .money {
    min-width: 0;
  }
  .header .user .ballanse .money a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header .user .ballanse button {
    flex-shrink: 0;
  }
  .header .user .notifications-bell-wrap {
    margin: 0 2px;
    flex-shrink: 0;
  }
  .header .user .menu-button {
    margin-left: 4px;
    flex-shrink: 0;
  }
  body {
    padding-top: 56px;
  }
  .header .user .menu-button {
    display: inline-block;
  }
  .menubg {
    background: rgba(4, 4, 30, 0.7);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    display: none;
  }
  .mobile-menu.opened {
    right: 0;
  }
  .index-catalog-block .list .item {
    width: calc(25% - 12px);
  }
  .partners-block .item .logo {
    width: 24%;
  }
  .header .user .chat.other {
    display: inline-block;
  }
  .cabinet .cabinet-content {
    padding: 16px 24px 40px 24px;
  }
  .cabinet .cabinet-header {
    padding: 40px;
  }
  .cabinet .cabinet-header .user .info .data {
    width: 320px;
  }
  .cabinet .cabinet-content .main-content .ballanse .top button {
    width: 160px;
  }
  .cabinet .cabinet-content .main-content .history .tbl {
    overflow-x: scroll;
  }
  .cabinet .cabinet-content .main-content .history .tbl::-webkit-scrollbar {
    height: 8px;
  }
  .cabinet .cabinet-content .main-content .history .tbl::-webkit-scrollbar-track {
    background: #242648;
  }
  .cabinet .cabinet-content .main-content .history .tbl::-webkit-scrollbar-thumb {
    border-radius: 12px;
    background: #9981db;
  }
  .cabinet .cabinet-content .main-content .history .tbl table {
    min-width: 816px;
  }
  .cabinet .cabinet-content .main-content .history .form {
    text-align: left;
  }
  .cabinet .cabinet-content .main-content .history .form form {
    width: 100%;
  }
  .cabinet .cabinet-content .main-content .history .form .pdf,
  .cabinet .cabinet-content .main-content .history .form select {
    margin: 0 12px 12px 0;
  }
  .cabinet .cabinet-content .main-content .profile .field {
    width: 100%;
  }
  .cabinet .cabinet-content .main-content .profile .buttons {
    width: 100%;
  }
  .cabinet .cabinet-content .main-content .profile .buttons button {
    margin-bottom: 16px;
  }
  .cabinet .cabinet-content .main-content .profile .bottom-text {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .wrap {
    width: 556px;
  }
  .index-page-slider .slider-nav {
    display: none;
  }
  .index-top-form .random {
    display: inline-block;
    font-size: 12px;
    padding: 0 12px 0 38px;
    background-position: 12px 50%;
  }
  .index-top-form .providers {
    display: inline-block;
    font-size: 12px;
    padding: 0 32px 0 36px;
    background-position: 10px 50%, right 10px top 50%;
  }
  .index-top-form .flex {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
  }
  .index-top-form form {
    width: 100%;
    order: 3;
  }
  .index-top-form form .gamesearch-button {
    display: none;
  }
  .index-top-form form input[type='text'] {
    padding-right: 52px;
  }
  .index-top-form form .gamesearch-close {
    display: none;   /* [ui-fix 19.08.2026] было block: крестик висел с загрузки страницы,
                        даже когда поиск не трогали. Показывает его JS при вводе от 3 символов
                        (как на десктопе); при <3 символов и по клику он снова прячется. */
    right: 8px;
  }
  .cabinet .cabinet-header .confirm {
    width: 100%;
    margin-top: 20px;
  }
  .cabinet .cabinet-content > .modal-nav-content .flex {
    flex-direction: column;
  }
  .cabinet .cabinet-content .left-menu {
    width: 100%;
    margin-bottom: 12px;
  }
  .cabinet .cabinet-content .left-menu ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 10px;
    background: #1b1d3a;
    padding: 4px;
    gap: 4px;
  }
  .cabinet .cabinet-content .left-menu ul::-webkit-scrollbar {
    display: none;
  }
  .cabinet .cabinet-content .left-menu ul li {
    flex: 0 0 auto;
  }
  .cabinet .cabinet-content .left-menu ul li:not(:last-child) {
    border-bottom: none;
  }
  .cabinet .cabinet-content .left-menu ul li a {
    padding: 10px 14px 10px 36px;
    font-size: 12px;
    line-height: 14px;
    white-space: nowrap;
    border-radius: 8px;
    background-image: none;
  }
  .cabinet .cabinet-content .left-menu ul li a.active {
    background-image: none;
  }
  .cabinet .cabinet-content .left-menu ul li a svg {
    left: 10px;
    width: 18px;
    height: 18px;
  }
  .cabinet .cabinet-content .main-content {
    width: 100%;
  }
  .cabinet .cabinet-content .main-content .ballanse .list .item {
    width: 100%;
  }
  .cabinet .cabinet-content .main-content .ballanse .top button {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    margin-top: 20px;
  }
  .cabinet .cabinet-content .deposits .list .item {
    width: calc(20% - 6px);
  }
}
@media (max-width: 575px) {
  .wrap {
    width: auto;
    padding: 0 16px;
  }
  /* Заголовок секции игр не влезает рядом с «Pokaż wszystkie» и обрезался
     троеточием («Najleps…»). Оставляем одну flex-строку, но разрешаем
     заголовку переноситься внутри своей колонки и ужимаем ссылку. */
  .index-catalog-block .top-block.flex {
    align-items: center;
  }
  .index-catalog-block .top-block.flex > h2 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
    padding-right: 12px;
  }
  .index-catalog-block .top-block.flex > a {
    font-size: 12px;
    padding-left: 38px;
  }
  .index-page-slider .item {
    padding: 98px 0 121px;
  }
  .index-page-slider .item .top-text {
    font-size: 10px;
    letter-spacing: 8px;
  }
  .index-page-slider .item h2 {
    margin-bottom: 14px;
    font-size: 28px;
    line-height: 38px;
  }
  .index-page-slider .item button {
    font-size: 14px;
    width: 144px;
    height: 51px;
  }
  .index-top-form {
    padding: 16px 0;
    margin: -40px 0 0 0;
    border-radius: 16px 16px 0 0;
    background: #13142c;
    position: relative;
  }
  .index-top-form form {
    position: relative;
    width: 100%;
    order: 3;
    margin-bottom: 12px;
  }
  .index-top-form .list {
    width: 100%;
    margin: 0;
    order: 4;
  }
  .index-top-form .random {
    flex: 1;
    text-align: left;
    padding: 0 8px 0 34px;
    background-position: 10px 50%;
    font-size: 12px;
  }
  .index-top-form .providers-wrap {
    flex: 1;
  }
  .index-top-form .providers {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
    padding: 0 28px 0 32px;
    background-position: 8px 50%, right 8px top 50%;
    font-size: 11px;
  }
  .index-top-form form input[type='text'] {
    height: 40px;
  }
  .index-top-form form button {
    display: none;
  }
  .index-top-form form .gamesearch-close {
    display: none;   /* [ui-fix 19.08.2026] было block: крестик висел с загрузки страницы,
                        даже когда поиск не трогали. Показывает его JS при вводе от 3 символов
                        (как на десктопе); при <3 символов и по клику он снова прячется. */
    right: 8px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
  }
  .index-top-form .list .item {
    width: 114px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    text-align: center;
    padding: 9px;
    height: auto;
    line-height: 16.8px;
  }
  .index-top-form .list .item svg {
    display: block;
    margin: 0 auto 4px auto;
  }
  .index-top-form .list .item {
    margin: 0 8px 0 0;
  }
  .index-catalog-block .list .item {
    width: calc(33.33334% - 14px);
    margin: 0 7px 14px 7px;
  }
  .index-catalog-block .list {
    margin: 0 -7px;
  }
  .index-catalog-block .bottom-button {
    padding-top: 2px;
    margin-bottom: 32px;
  }
  .index-catalog-block .top-block {
    line-height: 24px;
  }
  .index-catalog-block .top-block:before {
    display: none;
  }
  /* Декоративной линии между заголовком и «Pokaż wszystkie» на мобильных нет —
     45px-отступы под неё лишь съедали место и обрезали заголовок («Kasyno na …»). */
  .index-catalog-block .top-block h2 {
    padding-right: 8px;
  }
  .index-catalog-block .top-block a {
    padding-left: 8px;
  }
  .totop {
    right: 10px;
    bottom: 10px;
    width: 32px;
    height: 32px;
  }
  .index-catalog-block {
    padding-bottom: 28px;
    background: url('img/catalog-block2.png') no-repeat bottom center;
  }
  .bottom-contacts-block {
    padding: 18px 0;
  }
  .bottom-contacts-block .wrap {
    padding: 0;
    position: relative;
  }
  .bottom-contacts-block .links a {
    display: block;
  }
  .bottom-contacts-block .langs {
    position: absolute;
    bottom: 0;
    right: 32px;
  }
  .partners-block {
    padding: 16px 0;
    text-align: center;
  }
  .partners-block .item .logo {
    width: 50%;
  }
  .partners-block .item {
    display: none;
  }
  .partners-block .item:first-child {
    display: block !important;
  }
  .partners-block .bottom-link {
    display: inline-block;
  }
  .bottom-payments-block {
    padding: 20px 0;
    margin: 0 16px;
  }
  .bottom-payments-block img {
    height: 54px;
  }
  .footer {
    padding: 40px 0 32px;
  }
  .footer .logos img {
    height: 32px;
    margin: 0 8px 16px 8px;
  }
  .footer .logos {
    margin-bottom: 0;
    padding-bottom: 56px;
  }
  .index-catalog-block .top-block.inner {
    display: none;
  }
  .index-catalog-block .back-link {
    display: block;
  }
  .index-top-form form .window {
    margin-top: 8px;
    padding: 8px 16px;
  }
  .index-top-form form .window .game {
    padding: 8px 0;
  }
  .index-top-form form .window .game div img {
    width: 54px;
    max-width: 54px;
    height: 54px;
    border-radius: 12px;
  }
  .popup-game .navi {
    padding: 15px 12px;
  }
  .popup-game .bottom-block {
    padding: 12px;
  }
  .popup-form .fields {
    padding: 32px 26px 48px 26px;
  }
  .header .user .links {
    display: none;
  }
  .header .user .ballanse {
    margin-right: 0;
  }
  .header .user .chat {
    font-size: 12px;
    line-height: 16px;
  }
  .header .user .ballanse .money {
    font-size: 10px;
    margin-right: 5px;
  }
  .header .user .ballanse .money a {
    font-size: 12px;
  }
  .header .user .ballanse button {
    height: 32px;
    width: 82px;
  }
  .header {
    padding: 10px 8px;
  }
  .cabinet .cabinet-header {
    padding: 45px 16px 16px 16px;
  }
  .cabinet .cabinet-header .user .avatar img {
    width: 64px;
    max-width: 64px;
    height: 64px;
  }
  .cabinet .cabinet-header .user {
    position: relative;
    margin-bottom: 92px;
    width: 100%;
  }
  .cabinet .cabinet-header .user .info .name {
    font-size: 20px;
    line-height: 24px;
  }
  .cabinet .cabinet-header .user .info .id {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 20px;
  }
  .cabinet .cabinet-header .user .info .data {
    position: absolute;
    left: 0;
    bottom: -60px;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .cabinet .cabinet-header .user .info .data .data-item:not(:last-child) {
    margin-right: 0;
  }
  .cabinet .cabinet-header .confirm {
    margin-top: 0;
  }
  .cabinet .cabinet-content {
    padding: 8px 16px 45px 16px;
  }
  .cabinet .cabinet-content .menu {
    white-space: nowrap;
    overflow-x: scroll;
  }
  .cabinet .cabinet-content .main-content .ballanse {
    padding: 0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background: none;
  }
  .cabinet .cabinet-content .main-content .ballanse .top {
    margin-bottom: 24px;
  }
  .cabinet .cabinet-content .main-content .ballanse {
    margin-bottom: 0;
    padding-bottom: 8px;
  }
  .cabinet .cabinet-content .main-content .left-menu {
    display: block;
    margin-bottom: 24px;
  }
  .cabinet .cabinet-content .main-content .promo-banner {
    background: url('img/promo-banner2.jpg') center / cover;
  }
  .cabinet .cabinet-content .main-content .promo-banner input[type='text'] {
    width: 100%;
    margin: 16px 0 8px 0;
  }
  .cabinet .cabinet-content .main-content .promo-banner button {
    width: 100%;
  }
  .cabinet .cabinet-content .main-content .bonuses {
    background: none;
    padding: 0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
  }
  .cabinet .cabinet-content .main-content .bonuses .top-block div img {
    width: 80px;
    max-width: 80px;
  }
  .cabinet .cabinet-content .main-content .bonuses .top-block div {
    font-size: 14px;
    line-height: 16.8px;
  }
  .cabinet .cabinet-content .main-content .bonuses .top-block div span {
    font-size: 20px;
    line-height: 24px;
  }
  .cabinet .cabinet-content .main-content .bonuses .list .item .name {
    width: 70%;
    margin-bottom: 50px;
  }
  .cabinet .cabinet-content .deposits {
    background: none;
    padding: 20px 0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
  }
  .cabinet .cabinet-content .deposits .list {
    justify-content: center;
  }
  .cabinet .cabinet-content .deposits .list .item {
    width: calc(33.33334% - 6px);
  }
  .cabinet .cabinet-content .main-content .history {
    background: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    min-height: 0;
  }
  .cabinet .cabinet-content .main-content .history .form {
    padding: 0 0 16px 0;
  }
  .cabinet .cabinet-content .main-content .history .form form {
    width: 100%;
  }
  .cabinet .cabinet-content .main-content .history .tbl {
    margin: 0 -16px 24px -16px;
  }
  .cabinet .cabinet-content .main-content .history .tbl table tbody tr td .no-transactions {
    padding: 76px 0;
    width: 100vw;
  }
  .cabinet .cabinet-content .main-content .history .tbl table tbody tr td .no-transactions .text div {
    display: block;
    text-align: center;
  }
  .cabinet .cabinet-content .main-content .history .tbl table tbody tr td .no-transactions .text div img {
    margin: 0 0 16px 0;
  }
  .cabinet.small .cabinet-header {
    display: none;
  }
  .cabinet.small .cabinet-content .menu {
    display: none;
  }
  .cabinet.small .cabinet-content .main-content .profile {
    background: none;
    padding: 0;
  }
  .cabinet .cabinet-content .main-content .profile h3 {
    text-align: center;
    font-size: 20px;
    line-height: 24px;
  }
  .cabinet .cabinet-content .main-content .profile .back-link {
    display: block;
  }
  .cabinet.small {
    background: #1b1d3a;
  }
  .cabinet .cabinet-content .main-content .profile .buttons button {
    width: 100%;
  }
  .cabinet .cabinet-content .main-content .network {
    padding: 0;
    text-align: left;
    background: none;
    box-shadow: none;
  }
  .cabinet.small .cabinet-content .main-content .profile {
    box-shadow: none;
    margin-bottom: 12px;
  }
  .cabinet .cabinet-content .main-content .network h3 {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 24px;
  }
  .cabinet.small .cabinet-content {
    padding: 8px 16px;
  }
  .cabinet .cabinet-content .deposit {
    background: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    padding: 50px 0 0 0;
  }
  .cabinet .cabinet-content .deposit .back-link {
    top: 0;
    left: -10px;
  }
}
/* ── Recent Wins ── */
.recent-wins-table {
  background: #1b1d3a;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 8px;
}
.recent-wins-header,
.recent-wins-row {
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.recent-wins-header {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #949695;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.recent-wins-row {
  padding: 7px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
}
.rw-col-game {
  flex: 0 0 40%;
}
.rw-col-player {
  flex: 0 0 22%;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.rw-col-bet {
  flex: 0 0 14%;
}
.rw-col-coeff {
  flex: 0 0 12%;
}
.rw-col-win {
  flex: 1;
  text-align: right;
}
.rw-game-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rw-game-type {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #242648;
}
.rw-game-img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
}
.rw-game-img-fallback {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: #d4a017;
  background: #242648;
  border-radius: 8px;
}
.rw-game-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rw-game-name {
  font-size: 13px;
  font-weight: 600;
  color: #fdfdfd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.rw-game-time {
  font-size: 11px;
  color: #949695;
}
.rw-game-link {
  text-decoration: none;
  color: inherit;
}
.rw-game-link:hover .rw-game-name {
  color: #d4a017;
}
.rw-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.rw-rating-placeholder {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #242648;
  flex-shrink: 0;
}
.rw-win-positive {
  color: #d4a017;
  font-weight: 700;
}
.rw-mult-high {
  color: #ffd93d;
  font-weight: 700;
}
.recent-wins-viewport {
  overflow: hidden;
  max-height: 420px;
}
.recent-wins-track {
  --rw-marquee-duration: 40s;
}
.recent-wins-track--animate {
  animation: rw-scroll var(--rw-marquee-duration) linear infinite;
}
@keyframes rw-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
.recent-wins-list-chunk--dup {
  pointer-events: none;
}
/* ── Recent Wins – mobile ── */
@media (max-width: 767px) {
  .recent-wins-header {
    display: none;
  }
  .recent-wins-row {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 4px 0;
  }
  .rw-col-game {
    flex: 0 0 100%;
    margin-bottom: 4px;
  }
  .rw-col-player {
    flex: 1 1 auto;
    font-size: 12px;
  }
  .rw-col-bet {
    flex: 0 0 auto;
    font-size: 12px;
    margin-left: auto;
    padding-left: 8px;
  }
  .rw-col-coeff {
    flex: 0 0 auto;
    font-size: 12px;
    padding-left: 8px;
  }
  .rw-col-win {
    flex: 0 0 auto;
    font-size: 12px;
    padding-left: 8px;
  }
  .rw-game-type {
    width: 28px;
    height: 28px;
  }
  .rw-game-img {
    width: 28px;
    height: 28px;
  }
  .rw-game-img-fallback {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .rw-game-name {
    font-size: 12px;
  }
  .rw-game-time {
    font-size: 10px;
  }
  .recent-wins-viewport {
    max-height: 350px;
  }
}
@media (max-width: 575px) {
  .recent-wins-row {
    padding: 8px 10px;
  }
  .rw-col-player span {
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
  .rw-col-bet,
  .rw-col-coeff,
  .rw-col-win {
    font-size: 11px;
  }
  .recent-wins-viewport {
    max-height: 300px;
  }
}

@media (max-width: 767px) {
  .gamesearch-window .game .gamesearch-buttons {
    display: flex !important;
    align-items: center;
    margin-left: auto;
  }
  .gamesearch-window .game .gamesearch-realgame {
    display: none !important;
  }
  .gamesearch-window .game .gamesearch-demogame {
    display: inline-block;
    padding: 8px 16px;
    background: #4f25c3;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
}

/* Game popup: mobile landscape — game takes the whole viewport, demo CTA collapses to floating button */
@media (orientation: landscape) and (max-height: 600px) {
  .demo-page .game-wrapper {
    position: relative;
  }
  .demo-page .game-wrapper .game-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    padding: 6px 8px;
    background: transparent;
    z-index: 10000;
    pointer-events: none;
  }
  .demo-page .game-wrapper .game-nav-back {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 18px;
    padding: 4px 10px;
    height: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  }
  .demo-page .game-wrapper .game-nav-back .gamename {
    display: none;
  }
  .demo-page .game-wrapper .game-nav-demotype {
    pointer-events: auto;
  }
  .demo-page .game-wrapper .game-nav-demotype > span,
  .demo-page .game-wrapper .game-nav-demotype > img {
    display: none;
  }
  .demo-page .game-wrapper .game-nav-demotype .go-real-link {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    opacity: 0.93;
  }
}


/* ── Fancybox-модалки: предотвращаем «протекание» скролла на фон ──────────
   На мобильном при докрутке контента модалки (кабинет «Profil → Saldo»,
   касса и т.п.) до конца скролл уходил на главную страницу под модалкой
   (scroll chaining): .fancybox-container — лишь position:fixed, а документ
   под ним оставался прокручиваемым. overscroll-behavior:contain на
   скролл-контейнере слайда гасит передачу скролла вверх по дереву, а
   body.fancybox-active фиксирует фон, пока модалка открыта. */
.fancybox-slide { overscroll-behavior: contain; }
body.fancybox-active { overflow: hidden; }

/* ── Место под полосу прокрутки зарезервировано всегда ────────────────────
   [2026-08-11] Блокировка фона (`body.fancybox-active` выше и `.menu-open`
   у мобильного меню) убирает вертикальную полосу прокрутки, документ
   становится на её ширину шире — и в момент открытия ЛЮБОЙ модалки вся
   страница вместе с фиксированной шапкой прыгала вправо. Замер на боевой
   главной: ширина документа 1265 → 1280, то есть скачок 15 px.
   `scrollbar-gutter: stable` держит эту полосу зарезервированной постоянно,
   поэтому её исчезновение ничего не двигает. Замер после правки — скачок 0
   и при fancybox-модалке, и при мобильном меню.
   ⚠️ Правило нужно именно на `html`: полосу прокрутки документа рисует он,
   а не body. ⚠️ Цена — на страницах короче экрана справа остаётся пустая
   полоса шириной со скроллбар; на фоне темы она не читается. На мобильных
   полосы наложенные (ширина 0), поэтому правило там ничего не меняет. */
html { scrollbar-gutter: stable; }

/* ── Мобильная шапка ≤380px: доп. компактизация баланс/Kasa ──────────────
   Дополнение к фиксу переноса шапки в @media (max-width: 991px): на совсем
   узких экранах ужимаем баланс и кнопку кассы, чтобы логотип, баланс,
   Kasa, колокольчик и бургер гарантированно умещались в одну строку.
   Блок в конце файла, т.к. должен переопределять правила @media 575px. */
@media (max-width: 380px) {
  .header .user .ballanse .money {
    margin-right: 4px;
  }
  .header .user .ballanse .money a {
    padding-right: 16px;
    font-size: 11px;
  }
  .header .user .ballanse button {
    width: 70px;
    font-size: 12px;
  }
  .header .user .notifications-bell-wrap {
    margin: 0;
  }
}

/* [header-progress] Прогресс до следующего VIP-уровня в шапке профиля */
.rating-progress{margin-top:8px;width:100%;max-width:340px}
.rating-progress-track{height:6px;border-radius:6px;background:rgba(255,255,255,.15);overflow:hidden}
.rating-progress-track .user-nextrating-fill{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#7a5deb,#937bd9);transition:width .5s ease}
.rating-progress-info{margin-top:5px;font-size:12px;line-height:1.4;opacity:.85}
.rating-progress-info .user-nextrating-need{color:#7a5deb;font-weight:700}
.rating-progress-info .user-nextrating-arrow{opacity:.7;margin-left:6px}
.rating-progress-max{font-size:12px;color:#DAA520;font-weight:600}

/* [header-progress] убираем старую декоративную линию-разделитель над статусом в кабинете —
   её роль теперь у .rating-progress, иначе визуально «две полосы» */
.cabinet .cabinet-header .user .info .data.rating-line{border-top:0 !important}

/* ── Спортбук в макете сайта ──────────────────────────────────────────────
   Betby (supplier 'sports') открывается тем же контейнером, что и слоты, — а он
   полноэкранный оверлей и перекрывает шапку. Для слота это верно: игра требует
   всего экрана. Спорт же — длинная лента событий, в которой игрок сидит подолгу
   и которому нужны баланс, касса и меню под рукой.
   top задаётся инлайном из JS по фактической высоте шапки: она разная у брендов
   (fixed 82px у zabkabet, sticky с динамической высотой у krazik) и меняется на
   мобильных, поэтому хардкод здесь быстро разъехался бы. */
.demo-page.demo-page--sport{
  height: auto;
  bottom: 0;
  z-index: 5;               /* ниже шапки: .header=8 у zabkabet, .site-header=30 у krazik */
}
/* Собственная полоса игры («× Спорт») для спортбука лишняя: выход есть через меню
   сайта, а две панели подряд съедают высоту у и без того плотной линии событий. */
.demo-page.demo-page--sport .game-nav{ display: none; }

/* ── Шапка ≤991: классы header-fit.js не должны воскрешать меню ──────────
   .header.nav-fits nav ul имеет специфичность (0,2,2) и перебил бы правило
   `.header nav ul {display:none}` из @media 991, если бы скрипт по какой-то
   причине счёл, что меню помещается (например, при пустом наборе пунктов —
   ширина 0). Ниже 992 у шапки своя раскладка и мобильный блок игрока, меню
   там не показываем никогда. Блок в конце файла — как и остальные страховки.
   Само собой, header-fit.js и так не ставит .nav-fits ниже 992 px
   (MIN_DESKTOP_WIDTH), это второй рубеж на случай правки скрипта. */
@media (max-width: 991px) {
  .header.nav-fits nav ul {
    display: none;
  }
  .header.nav-fits .user .menu-button {
    display: inline-block;
  }
}

/* ── Баннеры главного слайдера ───────────────────────────────────────────
   [banner-webp 2026-08-06] Фоны первого экрана. Раньше PNG стоял инлайном в
   vews/main.php, а мобильную версию подставлял JS уже после старта загрузки
   десктопной — на телефоне браузер успевал начать качать banner_2.png (3.3 МБ).

   Что изменилось:
     banner_1.png 1131 КБ → banner_1.webp 181 КБ (−84%)
     banner_2.png 3303 КБ → banner_2.webp 331 КБ (−90%)
     banner_1_mobile 169 КБ → 21 КБ, banner_2_mobile 571 КБ → 62 КБ
   Итого 5176 → 596 КБ. Кодирование: q95, method 6, alpha-quality 100 —
   сверено попиксельно и по рендеру браузера, разница не видна (на q90 при
   стократном увеличении проступала текстура на плавном градиенте, поэтому 95).

   ⚠️ PNG-оригиналы НЕ УДАЛЕНЫ (img/banner_*.png) — откат = вернуть их в
   background-image ниже. Fallback для браузеров без WebP не делаем осознанно:
   каталог игр на этом же сайте отдаёт .webp без всякого fallback с 2025 года.

   ⚠️ Порог 768 обязан совпадать с прежним условием JS ($(window).width()<769),
   иначе на планшетах поедет кадрирование: мобильные файлы почти квадратные
   (390×393), десктопные — широкие (1440×508). */
/* [hero-4 01.10.2026] Слайдов стало четыре: weekly-бонус, лояльность, кэшбэк, топ-слот.
   Прежние .hero-slide--1/--2 (banner_1/banner_2) сняты; файлы img/banner_*.webp не удалены.

   Файлы img/hero/<имя>.webp (1920×677), <имя>_2x.webp (2880×1016, экраны шире 1920 и retina),
   <имя>_m.webp (1040×1048, телефон). Исходники PNG по 2.5–4 МБ → 110–390 КБ.
   ⚠️ В slot*.webp обложка Gates of Olympus 1000 ВМОНТИРОВАНА в золотую раму: в исходнике
   художника рама пустая. Сменят топ-слот — картинку надо пересобрать, а не только ссылку.

   Композиция кадров: на широком персонажи справа, слева тёмное поле под текст; на мобильном
   персонажи внизу, сверху тёмное поле. Отсюда текст слева на десктопе и сверху на телефоне.
   ⚠️ Порог 600, а не прежние 768: мобильный кадр почти квадратный, и на планшете 700 px он дал
   бы слайд высотой во весь экран. От 601 px работает широкий кадр. */
/* Базовые правила контейнера Swiper (.swiper из swiper-bundle.min.css) для своего класса. */
.index-page-slider.hero-swiper {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.index-page-slider .item.hero-slide {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: clamp(340px, 34vw, 600px);
  padding: 40px 0 96px;
  text-align: left;
  background-color: #070c0e;
  background-position: 82% 22%;
  background-size: cover;
  background-repeat: no-repeat;
}
.index-page-slider .item.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 9, 11, 0.82) 0%, rgba(5, 9, 11, 0.55) 32%, rgba(5, 9, 11, 0) 60%);
  pointer-events: none;
}
.index-page-slider .item.hero-slide .wrap {
  position: relative;
  z-index: 1;
}
.index-page-slider .item.hero-slide .hero-text {
  max-width: 48%;
}
.index-page-slider .item.hero-slide h2 {
  margin-bottom: 14px;
  font-size: clamp(26px, 3.3vw, 48px);
  line-height: 1.14;
  text-transform: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}
.index-page-slider .item.hero-slide .hero-sub {
  margin: 0 0 24px;
  max-width: 520px;
  font-size: clamp(14px, 1.35vw, 19px);
  line-height: 1.45;
  color: #dfe9df;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.index-page-slider .item.hero-slide button {
  width: auto;
  min-width: 194px;
  padding: 0 30px;
  white-space: nowrap;
  cursor: pointer;
}
/* [hero-lazy 01.10.2026] Фон получает только слайд с классом .hero-on. Первый слайд несёт его
   из разметки (vews/main.php), остальным его ставит initMainSwipers() после загрузки страницы
   или на первом касании слайдера — первый экран ждёт один кадр вместо четырёх.
   ⚠️ Новый слайд без этой пары (класс в CSS + armHero в app.js) останется тёмным. */
.index-page-slider .item.hero-on.hero-slide--weekly   { background-image: url('/img/hero/weekly.webp?v=w1'); }
.index-page-slider .item.hero-on.hero-slide--loyalty  { background-image: url('/img/hero/loyalty.webp?v=w1'); }
.index-page-slider .item.hero-on.hero-slide--cashback { background-image: url('/img/hero/cashback.webp?v=w1'); }
.index-page-slider .item.hero-on.hero-slide--slot     { background-image: url('/img/hero/slot.webp?v=w1'); }
@media (min-width: 1921px), (min-width: 1100px) and (min-resolution: 1.5dppx) {
  .index-page-slider .item.hero-on.hero-slide--weekly   { background-image: url('/img/hero/weekly_2x.webp?v=w1'); }
  .index-page-slider .item.hero-on.hero-slide--loyalty  { background-image: url('/img/hero/loyalty_2x.webp?v=w1'); }
  .index-page-slider .item.hero-on.hero-slide--cashback { background-image: url('/img/hero/cashback_2x.webp?v=w1'); }
  .index-page-slider .item.hero-on.hero-slide--slot     { background-image: url('/img/hero/slot_2x.webp?v=w1'); }
}
/* Широкие экраны: колонка .wrap фиксирована (1268 px) и стоит по центру, а кадр тянется на всю
   ширину — на 1920 и шире текст наезжал на персонажа (замерено на 2560). Привязываем левый край
   текста к 7% ширины экрана, а не к колонке. */
@media (min-width: 1500px) {
  .index-page-slider .item.hero-slide .hero-text {
    margin-left: calc((1268px - 100vw) / 2 + 7vw);
    max-width: 600px;
  }
}
@media (max-width: 991px) {
  .index-page-slider .item.hero-slide { padding: 28px 0 84px; }
  .index-page-slider .item.hero-slide .hero-text { max-width: 54%; }
  .index-page-slider .item.hero-slide .hero-sub { margin-bottom: 16px; }
  .index-page-slider .item.hero-slide button { min-width: 0; height: 48px; font-size: 14px; padding: 0 24px; }
}
@media (max-width: 600px) {
  .index-page-slider .item.hero-slide {
    align-items: flex-start;
    min-height: 122vw;
    padding: 22px 0 0;
    text-align: center;
    background-position: center bottom;
  }
  .index-page-slider .item.hero-slide::before {
    background: linear-gradient(180deg, rgba(5, 9, 11, 0.7) 0%, rgba(5, 9, 11, 0.35) 34%, rgba(5, 9, 11, 0) 50%);
  }
  .index-page-slider .item.hero-slide .wrap { width: 100%; padding: 0 16px; box-sizing: border-box; }
  .index-page-slider .item.hero-slide .hero-text { max-width: none; }
  .index-page-slider .item.hero-slide h2 { margin-bottom: 8px; font-size: 24px; line-height: 1.18; }
  .index-page-slider .item.hero-slide .hero-sub { margin: 0 auto 14px; max-width: 330px; font-size: 13.5px; line-height: 1.4; }
  .index-page-slider .item.hero-slide button { height: 44px; font-size: 13px; padding: 0 22px; }
  .index-page-slider .item.hero-on.hero-slide--weekly   { background-image: url('/img/hero/weekly_m.webp?v=w1'); }
  .index-page-slider .item.hero-on.hero-slide--loyalty  { background-image: url('/img/hero/loyalty_m.webp?v=w1'); }
  .index-page-slider .item.hero-on.hero-slide--cashback { background-image: url('/img/hero/cashback_m.webp?v=w1'); }
  .index-page-slider .item.hero-on.hero-slide--slot     { background-image: url('/img/hero/slot_m.webp?v=w1'); }
}

/* ── Те же кадры в шапках разделов, куда ведут баннеры (01.10.2026) ────────
   Бонусы, уровни лояльности, кэшбэк. Класс .sec-hero-art + модификатор кадра вешается на
   существующий hero-блок страницы; заголовок и подзаголовок раздела остаются свои.
   ⚠️ Селекторы удвоены (.sec-hero-art.sec-hero-art): у каждой страницы свой <style> в vews/*.php,
   он приходит ПОЗЖЕ style.css и при равной специфичности перебил бы фон и выравнивание. */
.sec-hero-art.sec-hero-art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  min-height: clamp(190px, 25vw, 360px);
  margin: 0 auto 28px;
  padding: 28px 4% 28px 5%;
  overflow: hidden;
  border-radius: 18px;
  text-align: left;
  background-color: #070c0e;
  background-position: 88% 22%;
  background-size: cover;
  background-repeat: no-repeat;
}
.sec-hero-art.sec-hero-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(5, 9, 11, 0.85) 0%, rgba(5, 9, 11, 0.6) 34%, rgba(5, 9, 11, 0) 64%);
  animation: none;
  opacity: 1;
  pointer-events: none;
}
.sec-hero-art.sec-hero-art > * {
  position: relative;
  z-index: 1;
  max-width: 50%;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.sec-hero-art.sec-hero-art h1 {
  justify-content: flex-start;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.sec-hero-art.sec-hero-art p {
  margin-left: 0;
  margin-right: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.sec-hero-art--weekly.sec-hero-art   { background-image: url('/img/hero/weekly.webp?v=w1'); }
.sec-hero-art--loyalty.sec-hero-art  { background-image: url('/img/hero/loyalty.webp?v=w1'); background-position-y: 4%; } /* корона у верхнего края кадра */
.sec-hero-art--cashback.sec-hero-art { background-image: url('/img/hero/cashback.webp?v=w1'); }
@media (max-width: 600px) {
  .sec-hero-art.sec-hero-art {
    min-height: 170px;
    padding: 18px 14px;
    border-radius: 14px;
    background-position: 100% 30%;
  }
  .sec-hero-art.sec-hero-art::before {
    background: linear-gradient(90deg, rgba(5, 9, 11, 0.94) 0%, rgba(5, 9, 11, 0.8) 46%, rgba(5, 9, 11, 0.12) 84%);
  }
  .sec-hero-art.sec-hero-art > * { max-width: 56%; }
  .sec-hero-art.sec-hero-art h1 { font-size: 20px; line-height: 1.2; }
  .sec-hero-art.sec-hero-art h1 svg { display: none; }
  .sec-hero-art.sec-hero-art p { font-size: 12.5px; line-height: 1.35; }
}

/* ── Модалки входа/регистрации на низком экране ──────────────────────────
   [modal-landscape 2026-08-06] Телефон в альбомной ориентации: высота вьюпорта
   ~320–420 px. Форма регистрации собиралась в 700 px, и кнопка «Зарегистрироваться»
   оказывалась за нижней кромкой — фактически вне поля зрения, хотя прокрутка
   у .fancybox-slide есть. Игрок видел четыре поля и не понимал, чем подтвердить.

   Что делаем:
   1) сжимаем вертикальные размеры (замерено: 700 → ~300 px в блоке полей);
   2) от 640 px ширины раскладываем форму в две колонки — поля слева, вход через
      соцсети справа: тогда модалка целиком помещается на экран без прокрутки.
      Порог 640, а не 680: на 667×375 (iPhone SE/8 боком) в одну колонку выходило
      544 px при экране 375 — кнопка «Уже есть аккаунт» оставалась под кромкой.
      Ширину ограничивает inline width:100% на .popup, поэтому 720 px никогда
      не вылезают за экран — на 667 модалка становится 655.

   ⚠️ Порог по ВЫСОТЕ, а не по ширине: тот же экран в портретной ориентации
   компактный режим не получает, там места хватает.

   ⚠️ max-width перебиваем через !important осознанно: 440 px прибиты inline'ом
   в inc/parts/templates.php ко всем .popup, а inline из CSS иначе не победить.

   ⚠️ Список валют (.field .window) в компактном режиме ограничен по высоте:
   при 360 px экрана он раскрывался ниже кромки и последние валюты были
   недостижимы. */
@media (max-height: 560px) {
  .popup-form .fields {
    padding: 18px 24px 20px 24px;
  }
  .popup-form .fields h2 {
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 26px;
  }
  .popup-form .fields .field {
    margin-bottom: 6px;
  }
  .popup-form .fields .field input[type='text'],
  .popup-form .fields .field input[type='email'],
  .popup-form .fields .field input[type='tel'],
  .popup-form .fields .field input[type='password'] {
    height: 42px;
    padding-top: 8px;
  }
  .popup-form .fields .field p {
    top: 11px;
  }
  .popup-form .fields .field input[type='text']:focus + p,
  .popup-form .fields .field input[type='email']:focus + p,
  .popup-form .fields .field input[type='tel']:focus + p,
  .popup-form .fields .field input[type='text']:not(:placeholder-shown) + p,
  .popup-form .fields .field input[type='email']:not(:placeholder-shown) + p,
  .popup-form .fields .field input[type='tel']:not(:placeholder-shown) + p,
  .popup-form .fields .field input[type='password']:focus + p,
  .popup-form .fields .field input[type='password']:not(:placeholder-shown) + p,
  .popup-form .fields .field input[type='text'].active + p,
  .popup-form .fields .field input[type='email'].active + p,
  .popup-form .fields .field input[type='tel'].active + p {
    top: 5px;
  }
  .popup-form .fields .field .window {
    max-height: 140px;
    overflow-y: auto;
  }
  .popup-form .fields button {
    height: 42px;
    margin-top: 6px;
  }
  .popup-form .fields .forget {
    margin-bottom: 6px;
  }
  .popup-form .login {
    padding: 14px 24px 16px 24px;
  }
  .popup-form .login p:first-child {
    margin-bottom: 8px;
  }
  .popup-form .login .links {
    margin-bottom: 10px;
  }
  .popup-form .login button {
    height: 42px;
  }
}
@media (max-height: 560px) and (min-width: 640px) {
  .popup#registration,
  .popup#auth {
    max-width: 720px !important;
  }
  #registration .popup-form,
  #auth .popup-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  #registration .popup-form .fields,
  #auth .popup-form .fields {
    -webkit-flex: 1 1 56%;
    -ms-flex: 1 1 56%;
    flex: 1 1 56%;
    min-width: 0;
  }
  #registration .popup-form .login,
  #auth .popup-form .login {
    -webkit-flex: 1 1 44%;
    -ms-flex: 1 1 44%;
    flex: 1 1 44%;
    min-width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

/* ── Виджет чата поверх модалок форм ────────────────────────────────────
   [chat-over-modal 2026-08-06] Класс вешает app.js на время, пока открыта
   модалка входа/регистрации/восстановления (см. блок chat-over-modal там же).
   Кнопка Jivo перекрывала нижние кнопки этих модалок, и тап попадал в чат.

   ⚠️ Селектор по ТЕГУ jdiv, а не по классу: Jivo генерирует классы с хэшами
   (wrap__TBMlw) и меняет их при обновлении виджета.
   ⚠️ Только до 900 px: на десктопе модалка стоит по центру шириной 440 px,
   а виджет — в левом нижнем углу, они не пересекаются, и прятать поддержку
   там незачем. */
@media (max-width: 900px) {
  /* [2026-08-09] menu-open добавлен: та же беда с открытым мобильным меню —
     кнопка Jivo (z-index max) перекрывала нижние пункты («Online», язык).
     Класс menu-open проект уже ставит на body при открытии меню. */
  body.chat-widget-hidden > jdiv,
  body.menu-open > jdiv {
    display: none !important;
  }
}

/* [2026-08-09] Бургер-меню не открывалось в зоне 992–~1050px.
   ПРИЧИНА: показ бургера управляет header-fit.js (класс .nav-collapsed по ЗАМЕРУ
   помещаемости навигации), а правило выезда меню `.mobile-menu.opened{right:0}`
   лежало в @media(max-width:991px). В зазоре между порогом автофита и 991px
   бургер уже виден и кликается (класс opened вешается), но меню оставалось за
   правым краем (right:-100%), т.к. media не активен.
   ФИКС: выезд меню привязан к классу menu-open (его ставит JS при клике бургера),
   без media-порога — где показан бургер, там меню и открывается.
   ⚠️ На десктопе (nav-fits) бургер скрыт, клика нет, menu-open не появляется —
   правило десктоп не трогает. */
body.menu-open .mobile-menu.opened {
  right: 0 !important;
}

/* ═══ [ios-zoom-fix 19.08.2026] ЭКРАН ПРИБЛИЖАЛСЯ ПРИ КЛИКЕ В ПОЛЕ (моб. версия) ═══
 *
 * СИМПТОМ: на iPhone тап по поиску (и по любому полю входа/регистрации/кабинета/кассы)
 * приближал страницу, и она оставалась увеличенной.
 *
 * ПРИЧИНА — не наша вёрстка, а правило Safari на iOS: если у поля font-size МЕНЬШЕ 16px,
 * браузер при фокусе автоматически зумит страницу, чтобы текст стал читаемым. Замер на
 * живой странице: `.gamesearch` — 13px, поля входа/кабинета/промокода/кассы — 14px;
 * всего 43 поля из 66. То есть зумило почти на каждом вводе, поиск просто заметнее.
 *
 * ⚠️ ЛЕЧИТЬ ЧЕРЕЗ VIEWPORT НЕЛЬЗЯ. Соблазн дописать `maximum-scale=1, user-scalable=no`
 * в мета-тег: это отключает и ЩИПКОВОЕ масштабирование, то есть ломает доступность для
 * слабовидящих, а Safari с iOS 10 такой запрет всё равно игнорирует. Правильный путь —
 * поднять шрифт поля до 16px, тогда зумить браузеру незачем.
 *
 * ⚠️ `!important` здесь ОСОЗНАНЕН: поля стилизуются десятками более специфичных селекторов
 * (`.index-top-form form .gamesearch` и т.п.), и правило без него просто не применилось бы.
 * Область действия узкая: только ширины телефона и только поля ввода.
 * ⚠️ Только `max-width: 767px` — на десктопе размеры полей не меняются.
 */
@media (max-width: 767px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* ═══ [geo-overlay 22.08.2026] МЕТКА «ИГРА НЕДОСТУПНА В ВАШЕМ РЕГИОНЕ» ═══
 *
 * Дефект: `app.checkAllowSuppliers()` (client/js/app.js) вставляет в плитку
 * `<div class="geo-overlay">` с замком и подписью, но правил для этого класса НЕ БЫЛО ни
 * на одном бренде, кроме goldera. Без `position:absolute` блок вставал В ПОТОК: замок и
 * текст занимали место ВЫШЕ обложки, картинка уезжала вниз, ряд разъезжался — владелец
 * увидел это в ряду «История игр», но ломались ВСЕ заблокированные плитки каталога.
 *
 * ⚠️ `border-radius: inherit`, а не фиксированные 16px: у брендов своя скруглённость
 *    обложки (krazik светлая тема со своими радиусами), и оверлей должен совпадать с ней.
 * ⚠️ `.link` гасим: в нём лежат кнопки «Играть»/«Демо». Заблокированную гео игру сервер
 *    всё равно не запустит (provider_country_ban) — клик выдавал бы «Доступ запрещён».
 */
.item.geo-blocked .image { position: relative; }
.item.geo-blocked .image .geo-overlay {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: rgba(0, 0, 0, .7);
    border-radius: inherit;
}
.item.geo-blocked .image .geo-overlay svg { width: 40px; height: 40px; opacity: .9; }
.item.geo-blocked .image .geo-overlay span {
    color: #fff; font-size: 11px; font-weight: 600; text-align: center; line-height: 14px; padding: 0 8px;
}
.item.geo-blocked .image img { filter: grayscale(100%) blur(2px); }
.item.geo-blocked .image .link { display: none !important; }


/* ── Кнопка чата — в правый нижний угол ──────────────────────────────────
   [chat-position 2026-08-21] Виджет Jivo настроен на ЛЕВЫЙ нижний угол
   (контейнер получает класс _orientationLeft) и на 390 px ложился прямо на
   значения в карточках: на витрине бонусов закрывал сумму минимального
   депозита — игрок видел «MIN. DEPOSIT ⬤ USD» без цифры, на /cashback/
   перекрывал кнопку входа, на уровнях лояльности — курс поинтов.

   ⚠️ Сторона задаётся в кабинете Jivo, но виджет там ОДИН на три бренда
   (zabkabet, krazik, manix) — переключение в кабинете сдвинуло бы чат сразу
   везде. Поэтому правим стилями бренда: так изменение остаётся точечным.

   ⚠️ Селектор по ТЕГУ jdiv и по префиксу класса БЕЗ хэша: Jivo генерирует
   классы вида wrap__qSgBJ и меняет хэш при обновлении бандла (тот же приём,
   что в правиле chat-over-drawer). Если Jivo когда-нибудь переключит виджет
   на правую сторону сам, класс _orientationLeft исчезнет, правило перестанет
   находить цель — и виджет просто останется справа. Мягкая деградация. */
body > jdiv [class*="_orientationLeft"] {
  left: auto !important;
  right: 12px !important;
}


/* ═══ [a11y 22.08.2026] БУРГЕР: ЗОНА НАЖАТИЯ И ФОКУС ═══
 *
 * Кнопка была 24×24 CSS-пикселя — вдвое меньше рекомендованных 44×44 (WCAG 2.5.8, iOS HIG),
 * то есть на телефоне в неё промахиваются. Плюс это пустой `<a>` без текста: в дереве
 * доступности его не было вовсе, скринридер не мог ни найти, ни назвать (разметке добавлены
 * `role="button"`, `tabindex` и `aria-label`).
 *
 * ⚠️ Зону расширяем ПСЕВДОЭЛЕМЕНТОМ, а не размерами самой кнопки: `.header .user` — это
 * flex с `justify-content: flex-end`, и рост последнего элемента сдвинул бы влево всю
 * шапку, где место и так считано (см. автоподгонку меню).
 * ⚠️ Влево расширяем всего на 4px: соседняя кнопка «Регистрация» стоит в 8px, и симметричное
 * расширение воровало бы её нажатия. Вправо кнопка последняя — там свободно.
 */
.header .user .menu-button { position: relative; }
.header .user .menu-button::after {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -4px;
    right: -16px;
}
/* Видимый фокус для клавиатуры: без него `tabindex` бесполезен — непонятно, где ты. */
.header .user .menu-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

/* ═══ [fullscreen-fix 03.09.2026] КНОПКА «ВО ВЕСЬ ЭКРАН» И ПСЕВДО-РЕЖИМ ═══
 * Перенос с krazik (там сделано 19.08.2026). Здесь кнопки не было в разметке вовсе, а
 * функция за ней искала легаси-имена методов, которых в современных браузерах нет.
 *
 * ⚠️ Псевдо-режим отдаёт игре шапку оверлея (44-48 px): `.game-wrapper` — флекс-колонка,
 * `.game-nav` в ней `flex-shrink: 0`, а `.popup-game`/`.game` растянуты `flex: 1`, поэтому
 * освободившееся место игра забирает сама. Fullscreen API при этом НЕ вызывается — значит
 * браузер не рисует свою системную плашку «проведите по экрану сверху вниз». */
.game-nav-fs {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.game-nav-fs:hover { background: rgba(255, 255, 255, 0.2); }
.demo-page.is-pseudo-fs .game-nav { display: none; }

/* ⚠️ В АЛЬБОМНОЙ ориентации шапка и так лежит ПОВЕРХ игры (`position: absolute`,
 * прозрачная, `pointer-events: none`) — места она не занимает, скрывать нечего. А вместе
 * с ней исчезла бы плавающая кнопка «назад», единственный путь в лобби. Поэтому здесь
 * шапку оставляем видимой. */
@media (orientation: landscape) and (max-height: 600px) {
  .demo-page.is-pseudo-fs .game-nav { display: flex; }
}

/* ⚠️ Кнопка выхода из псевдо-режима создаётся из app.js: на iOS системного выхода из
 * этого режима нет, и без неё игрок остался бы без шапки и без пути назад. */
.fs-pseudo-exit {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10001;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.fs-pseudo-exit:hover { background: rgba(0, 0, 0, 0.75); }

/* ═══ [phone-verify 04.09.2026] Поля подтверждения номера в форме регистрации ═══
 *
 * ⚠️ Свои иконки, а не класс `.mail`: у поля телефона стоял конверт, потому что
 * `.mail` — это ИМЕННО почтовая иконка, а не «оформление поля». Оформление даёт
 * общее правило `.field input`, класс отвечает только за картинку слева.
 *
 * ⚠️ Кнопка «Получить код» сделана НАДПИСЬЮ ВНУТРИ ПОЛЯ, а не второй зелёной
 * кнопкой во всю ширину: в этой форме такая кнопка читается как главная, и рядом
 * с «Регистрация» игрок не понимает, какую жать. Тот же приём, что у «Подтвердить»
 * рядом с почтой в кабинете. */
.popup-form .fields .field input[type='tel'].pv-tel,
.popup-form .fields .field input[type='text'].pv-tel {
  background: #242648 url('img/pv-tel.svg') no-repeat 14px 50%;
  padding-right: 130px;
  text-overflow: ellipsis;
}
.popup-form .fields .field input[type='tel'].pv-tel:focus,
.popup-form .fields .field input[type='text'].pv-tel:focus {
  background: #242648 url('img/pv-tel-a.svg') no-repeat 14px 50%;
}
/* [13.09.2026] Под таблетку резервируем место в самом поле: общее правило даёт справа
   только 50 px, и длинный номер уезжал бы под заливку. У кабинета такой отступ уже есть. */
.popup-form .fields .field.pv-field input[type='tel'],
.popup-form .fields .field.pv-field input[type='text'] {
  padding-right: 152px;
}
.popup-form .fields .field input[type='text'].pv-code {
  background: #242648 url('img/pv-code.svg') no-repeat 14px 50%;
  padding-right: 120px;
  letter-spacing: 2px;
}
.popup-form .fields .field input[type='text'].pv-code:focus {
  background: #242648 url('img/pv-code-a.svg') no-repeat 14px 50%;
}

/* Компактная надпись-действие справа внутри поля. */
.popup-form .fields .field .pv-inline-btn {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  max-width: 132px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* [13.09.2026] ТАБЛЕТКА. Надпись читается как кнопка, а не как подпись: язык взят у
   * брендовых кнопок формы (высота 48, радиус 24, заливка #4f25c3, белый текст, наведение
   * #7a5deb). Высоту НЕ уменьшаем — это и есть область нажатия, замеренная 13.09. */
  padding: 0 12px;
  box-sizing: border-box;
  color: #fff;
  z-index: 1;
  font-size: 13px;
  font-weight: 700;
  /* ⚠️ [13.09.2026] ВЫСОТА ЗДЕСЬ — ЭТО ОБЛАСТЬ НАЖАТИЯ, А НЕ УКРАШЕНИЕ.
   * Замер в браузере (390×844): надпись была 82×16 px, а поле под ней 311×48 px во всю
   * ширину — промах пальца в 12 px попадал в ПОЛЕ, и вместо отправки кода открывалась
   * клавиатура. Отсюда жалобы «нажимаю „Получить код", а открывается заполнение номера».
   * ⚠️ Накладка `::before` тут НЕ работает: у надписи `overflow: hidden` ради обрезки
   * длинного перевода многоточием, и накладка обрезается по той же коробке — проверено
   * замером, а не рассуждением.
   * Теперь коробка равна высоте поля, текст центрируется line-height: вид не меняется
   * (центры совпали 260/260), обрезка цела. Apple рекомендует цель от 44 px, здесь 48. */
  height: 48px;
  line-height: 48px;
  touch-action: manipulation;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}
/* [13.09.2026, вторая редакция] Таблетка на всю высоту поля выглядела тяжело (замечание
   владельца). Коробка надписи ОСТАЛАСЬ 48 px — это область нажатия, её мерили, — а видимая
   заливка рисуется отдельным слоем внутри: 32 px, радиус 16. Слой лежит под текстом
   (`z-index: -1` внутри коробки со своим контекстом наложения), поэтому `overflow: hidden`
   у надписи его не режет: он не выходит за её границы. */
.popup-form .fields .field .pv-inline-btn::before,
.cabinet .cabinet-content .main-content .profile .field .confirm::before {
  content: '';
  position: absolute;
  inset: 8px 0;
  background: #4f25c3;
  border-radius: 16px;
  z-index: -1;
}
.popup-form .fields .field .pv-inline-btn:hover::before { background: #7a5deb; }
.popup-form .fields .field .pv-inline-btn:hover { color: #211445; }
/* ⚠️ Во время запроса гасим не только цвет, но и указатель: иначе игрок кликает
 * повторно, а каждая отправка стоит денег. */
.popup-form .fields .field .pv-inline-btn.pv-busy {
  color: #9aa19c;
  cursor: default;
  pointer-events: none;
}
.popup-form .fields .field .pv-inline-btn.pv-busy::before { background: #33365d; }
/* Подтверждённый номер: поле только для чтения, действие убрано. */
.popup-form .fields .field input.pv-tel[readonly] { opacity: .75; }

/* [wincasino 19.10.2026] Логотип WIN CASINO вчетверо шире своей высоты, а шаблон zabkabet
   на узких экранах ужимал знак до 67 px — надпись становилась нечитаемой. */
@media (max-width: 1298px) {
  .header nav .logo { width: 104px; margin-top: 0; }
  .header nav .logo img { width: 100%; height: auto; display: block; }
}