/* betonred.eu.com — база прототипа + поведение, которое в прототипе жило в JS-состоянии. */
html,body{margin:0;padding:0;background:#0F1013}
*{box-sizing:border-box}
a{color:#00E88F;text-decoration:none}
a:hover{color:#5CF5B6;text-decoration:underline}
table{border-collapse:collapse}
@keyframes bor-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* навигация: в прототипе <button>, у нас <a> с теми же классами */
.nl{display:inline-block;text-decoration:none!important}
.nl.p-8d87d0:hover{color:#FFFFFF}
.p-b03e68::-webkit-scrollbar{display:none}

/* шапка: пилюля .eu.com с 1080px, длинный текст CTA с 1000px (st.w в прототипе) */
.hdr-cta .cta-long{display:none}
@media (min-width:1000px){.hdr-cta .cta-long{display:inline}.hdr-cta .cta-short{display:none}}
.hdr-cta:hover{color:#0F1013;text-decoration:none;filter:brightness(1.06)}

/* hover-правила из спеки: карточки и плитки — зелёная граница, вторичные кнопки — #484D59 */
[data-hover="card"]{transition:border-color .15s}
[data-hover="card"]:hover{border-color:#00E88F!important}
[data-hover="btn2"]:hover{background:#484D59!important}
[data-hover="toc"]:hover{background:#252830!important;color:#00E88F!important;text-decoration:none}

/* sticky-CTA (появляется после scrollY > 700) */
.sticky-cta{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:calc(100% - 24px);max-width:760px;z-index:60;
  background:#1B1D23;border:1px solid #2C3A33;border-radius:999px;padding:8px 8px 8px 20px;display:flex;align-items:center;gap:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.55);font-family:"Work Sans",sans-serif}
.sticky-cta[hidden]{display:none}
.sticky-logo{font-family:Rubik,sans-serif;font-style:italic;font-weight:900;font-size:15px;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:3px;color:#fff}
.sticky-logo .p-8e1b3c{padding:0 4px;border-radius:5px}
.sticky-txt{flex:1 1 0%;min-width:0;font-weight:600;font-size:14px;color:#C9CDD6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-txt b{color:#FFE14D}
.sticky-go{background:#00E88F;color:#0F1013;font-weight:700;font-size:15px;padding:11px 22px;border-radius:999px;text-decoration:none;white-space:nowrap}
.sticky-go:hover{color:#0F1013;text-decoration:none}

/* лайтбокс */
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,8,10,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;cursor:zoom-out}
.lb[hidden]{display:none}
.lb img{max-width:min(1200px,100%);max-height:80vh;border-radius:16px;border:1px solid #2C2F38;display:block}
.lb-bar{display:flex;gap:16px;align-items:center;font-family:"Work Sans",sans-serif}
.lb-cap{color:#C9CDD6;font-size:14px}
.lb-x{color:#fff;font-weight:700;font-size:14px;border:1px solid #3A3E48;border-radius:999px;padding:6px 14px}
[data-js="zoom"]{cursor:zoom-in}

/* тултипы глоссария */
.tip{border-bottom:1.5px dashed #00E88F;cursor:help;position:relative}
.tip:focus-visible{outline:2px solid #00E88F;outline-offset:2px;border-radius:3px}
.tip-pop{position:fixed;left:12px;top:0;z-index:120;max-width:300px;background:#252830;border:1px solid #3A3E48;border-radius:12px;
  padding:12px 14px;font:400 13.5px/1.5 "Work Sans",sans-serif;color:#D5D8E0;font-style:normal;text-transform:none;letter-spacing:0;text-align:left;
  box-shadow:0 14px 36px rgba(0,0,0,.5);pointer-events:none}
.tip-pop .tip-t{display:block;font-weight:700;color:#fff;margin-bottom:4px}
.tip-pop[hidden]{display:none}
.p-5ed9db.no-tip{border-bottom:0;cursor:inherit}

/* текстовые блоки внутри секций — типографика длинной статьи прототипа (p-af3dd4 / p-3bf029) */
.prose{display:flex;flex-direction:column;gap:14px;max-width:820px}
.prose p{margin:0;color:#C9CDD6;font-size:17px;line-height:1.7;text-wrap:pretty}
.prose h3{margin:8px 0 0;font-family:Rubik,sans-serif;font-style:italic;font-weight:800;font-size:24px;line-height:1.2;color:#fff}
.prose ul,.prose ol{margin:0;padding-left:22px;color:#C9CDD6;font-size:17px;line-height:1.7;display:flex;flex-direction:column;gap:6px}
.prose li::marker{color:#00E88F}
.prose strong,.prose b{color:#fff}
.prose table{width:100%;font-size:15px;color:#C9CDD6}
.prose th{text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#A3A8B4;padding:10px 14px;background:#1B1D23}
.prose td{padding:12px 14px;border-top:1px solid #2C2F38}
.tbl-wrap{overflow-x:auto;border:1px solid #2C2F38;border-radius:16px}
.cd-off{font-size:14px;color:#A3A8B4}

/* лента изменений: на узком экране сетка 110/130/1fr оставляет тексту ~20px — в одну колонку */
@media (max-width:600px){.p-88f01a,.p-a39369{grid-template-columns:1fr;gap:6px}}
.p-f11276{overflow-wrap:anywhere}
/* плитки калькулятора: польские суммы («20 000 zł») длиннее евро — на узком экране чуть мельче */
@media (max-width:420px){.p-196c2a,.p-f7b376{font-size:28px}}
figure{margin:0}

/* ссылки-кнопки прототипа (были <button>): блочная модель для паддингов */
.p-d173da,.p-f258ae{display:inline-block}

/* мобильная шапка: бургер вместо ленты навигации (критик 02.10: лента торчала обрезанной пилюлей) */
.burger{display:none;flex:0 0 auto;width:42px;height:42px;border-radius:999px;border:1px solid #3A3E48;background:transparent;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px}
.mnav{max-width:1200px;margin:0 auto;padding:4px 16px 14px;display:flex;flex-direction:column;gap:2px;font-family:"Work Sans",sans-serif}
.mnav[hidden]{display:none}
.mnav a{color:#fff;font-weight:600;font-size:16px;padding:12px 10px;border-radius:12px;text-decoration:none}
.mnav a[aria-current="page"]{background:#3A3E48}
.mnav a:hover{background:#252830;color:#00E88F;text-decoration:none}
.dis-short{display:none}
@media (max-width:860px){
  .p-b03e68{display:none}
  .burger{display:flex;margin-left:auto}
  .hdr-cta{margin-left:0}
}
@media (max-width:600px){.dis-long{display:none}.dis-short{display:inline}}
@media (min-width:861px){.mnav{display:none!important}}
/* навигация на 1200–1300: пункты плотнее, чтобы не резалась последняя пилюля */
@media (max-width:1320px){.p-b03e68 .nl{padding:8px 12px}}
/* hero: H1 компактнее, коллаж к верху колонки (критик 02.10) */
.p-4859ad{font-size:clamp(34px,4.2vw,54px)}
.p-c8cad1{align-items:start}
@media (max-width:600px){
  .p-5a9091{padding:10px 16px;gap:10px}
  .hdr-cta{padding:9px 14px;font-size:13px}
}

/* первый экран (критик 02.10, второй прогон) */
.p-11f940{flex-wrap:nowrap;align-items:center}
@media (max-width:600px){
  .p-5a9091{padding:10px 24px}
  .p-7a8411 > .p-58f551{padding-top:28px}
  .p-11f940{font-size:12px;gap:10px}
}
@media (max-width:380px){.p-5a9091{padding:10px 16px}}
/* чипы депозитов в hero: три в ряд на десктопе */
@media (min-width:1000px){.p-7a8411 .p-417383{padding:6px 11px;font-size:12.5px}.p-7a8411 .p-e106d6{gap:6px;flex-wrap:nowrap}}
/* журнал проверки: длинные пути и имена API переносятся, блок не распирает экран */
.p-864a30,.p-9c573b{min-width:0}
.p-9c573b,.p-9c573b span,.p-95459e span{overflow-wrap:anywhere}

/* ── пересборка 08.10: PL в корне, блоки главной на внутренних страницах ── */
.b{font-weight:700}
.prose .b{color:#fff}
.sticky-txt .b{color:#FFE14D}
main.pg{padding-bottom:0}
main.pg>.row{margin:48px max(24px,calc((100% - 1152px)/2)) 0}
main.pg>.row:first-child{margin-top:40px}
main.pg>.row:last-child{margin-bottom:80px}
main.pg.pg-gap32>.row{margin-top:32px}
main.pg.pg-narrow>.row{margin-left:max(24px,calc((100% - 772px)/2));margin-right:max(24px,calc((100% - 772px)/2))}
main.pg>.row+div:not(.row),main.pg>.row+section:not(.row){margin-top:48px}
.prose blockquote{margin:0;padding:14px 18px;border-left:3px solid #00E88F;background:rgba(255,255,255,.04);border-radius:0 10px 10px 0}
.prose blockquote p{margin:0 0 6px}
.prose cite{font-style:normal;font-size:13px;opacity:.7}
.prose abbr{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
main.pg-home>div:first-child{overflow:hidden}
@media(max-width:700px){main.pg a.p-d173da{white-space:normal;text-align:center}}

/* 08.10: сборщик ставит <img> атрибуты width/height (правило владельца); без этого правила атрибут height растягивал кадры,
   у которых компонент задаёт только ширину. :where() даёт нулевую специфичность — классы компонентов с собственной высотой и object-fit сильнее. */
:where(main,.lb) img{height:auto}
@media(max-width:700px){.tbl-wrap table{min-width:520px}}

/* ── 09.10: логотип оператора, сгруппированное меню, плашка автора ── */
.brand-logo{display:block;height:30px;width:auto}
footer .brand-logo{height:26px}
.p-b03e68.mg-nav{overflow:visible}
.mg{position:relative;display:flex}
.mg-btn{display:inline-flex;align-items:center;gap:6px;line-height:inherit}
.mg-car{font-size:10px;opacity:.7;transition:transform .15s}
.mg-list{display:none;position:absolute;top:calc(100% + 10px);left:0;z-index:60;min-width:240px;padding:8px;border-radius:16px;
  background:#1B1D23;border:1px solid #2C2F38;box-shadow:0 18px 40px rgba(0,0,0,.45);flex-direction:column;gap:2px}
.mg-list::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.mg:hover .mg-list,.mg:focus-within .mg-list,.mg.open .mg-list{display:flex}
.mg:hover .mg-car,.mg.open .mg-car{transform:rotate(180deg)}
.mg-list a{font-family:"Work Sans",sans-serif;font-weight:600;font-size:14px;color:#D5D8E0;padding:10px 12px;border-radius:10px;text-decoration:none;white-space:nowrap}
.mg-list a:hover{background:#252830;color:#00E88F;text-decoration:none}
.mg-list a[aria-current="page"]{background:#3A3E48;color:#fff}
.mgm{border-radius:12px}
.mgm summary{list-style:none;cursor:pointer;color:#fff;font-weight:700;font-size:16px;padding:12px 10px;border-radius:12px;display:flex;justify-content:space-between;align-items:center}
.mgm summary::-webkit-details-marker{display:none}
.mgm summary::after{content:"▾";font-size:12px;opacity:.7;transition:transform .15s}
.mgm[open] summary::after{transform:rotate(180deg)}
.mgm[open] summary{color:#00E88F}
.mgm a{display:block;margin-left:10px;font-size:15px;font-weight:500;color:#D5D8E0}
.mnav{max-height:calc(100vh - 110px);overflow-y:auto}
.by-a{color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:rgba(0,232,143,.6);text-underline-offset:3px}
.by-a:hover{color:#00E88F}
.author-photo{width:100px;height:100px;border-radius:50%;border:2px solid #2C2F38;display:block}
[data-js="promo-card"][hidden]{display:none!important}

/* ── 09.10 (владелец): вход и регистрация в шапке, фото автора, чип спинов по центру ── */
.hdr-login{flex:0 0 auto;background:#3A3E48;color:#fff;font:700 14px "Work Sans",sans-serif;padding:10px 18px;border-radius:999px;text-decoration:none;white-space:nowrap}
.hdr-login:hover{color:#fff;text-decoration:none;filter:brightness(1.15)}
.hdr-cta{margin-left:0}
@media (max-width:860px){.hdr-login{margin-left:auto}.burger{margin-left:0}}
@media (max-width:480px){.brand-logo{height:24px}.hdr-login,.hdr-cta{padding:8px 11px;font-size:12px}.p-5a9091{gap:8px;padding:10px 14px}.burger{width:38px;height:38px}}
.av-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.p-dbf0a4{text-align:center}
.p-dbf0a4 .p-3ee151{display:block;max-width:86%;margin:2px auto 0;line-height:1.15}
@media (max-width:400px){.brand-logo{height:20px}.hdr-login,.hdr-cta{padding:7px 9px;font-size:11.5px}.p-5a9091{gap:6px;padding:10px 12px}.burger{width:36px;height:36px}}
@media (max-width:345px){.hdr-login{display:none}.hdr-cta{margin-left:auto}}
a.game-card{color:inherit;text-decoration:none}
a.game-card:hover{color:inherit;text-decoration:none}

/* ── 09.10 (владелец): подвал по образцу aviator-games.com в стиле BetOnRed ── */
footer.ft{padding:0;border-top:1px solid #23262E;background:linear-gradient(180deg,#101116 0%,#0B0C10 100%);font-family:"Work Sans",sans-serif}
.ft-in{max-width:1200px;margin:0 auto;padding:56px 24px 40px;display:flex;flex-direction:column;gap:36px}
.ft-top{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:56px}
.ft-brand{display:flex;flex-direction:column;gap:16px}
.ft-logo{display:inline-block}
footer .ft-logo .brand-logo{height:30px}
.ft-about{margin:0;font-size:14px;line-height:1.6;color:#A3A8B4}
.ft-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ft-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid #2C2F38;color:#D5D8E0}
.ft-ico:hover{border-color:#00E88F;color:#00E88F}
.ft-chk{font-size:13px;color:#A3A8B4}
.ft-chk::before{content:"✓";color:#00E88F;font-weight:700;margin-right:6px}
.ft-chk a{color:#D5D8E0;text-decoration:underline;text-underline-offset:3px}
.ft-chk a:hover{color:#00E88F}
.ft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ft-col{display:flex;flex-direction:column;gap:11px;min-width:0}
.ft-h{font:800 11px "Work Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#00E88F;margin-bottom:4px}
.ft-col a{font-size:14.5px;line-height:1.35;color:#C9CDD6;text-decoration:none}
.ft-col a:hover{color:#fff;text-decoration:underline;text-decoration-color:#00E88F;text-underline-offset:4px}
.ft-rg{display:flex;gap:22px;align-items:flex-start;padding:26px 28px;border-radius:22px;border:1px solid #2C2F38;
  background:radial-gradient(120% 140% at 0% 0%,rgba(229,50,59,.14),transparent 55%),#16181E}
.ft-18{flex:0 0 auto;width:54px;height:54px;border-radius:50%;border:2px solid #E5323B;color:#FF5A62;display:flex;align-items:center;justify-content:center;font:800 16px "Work Sans",sans-serif}
.ft-rg-b{display:flex;flex-direction:column;gap:10px;min-width:0}
.ft-rg-t{font:italic 900 20px Rubik,sans-serif;color:#fff;letter-spacing:-.01em}
.ft-rg-b p{margin:0;max-width:760px;font-size:14.5px;line-height:1.6;color:#A3A8B4}
.ft-rg-l,.ft-chips,.ft-pays{display:flex;flex-wrap:wrap;gap:8px}
.ft-rg-l{margin-top:6px}
.ft-chip{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;border:1px solid #2C2F38;font-size:12.5px;font-weight:600;color:#A3A8B4;white-space:nowrap}
a.ft-chip-l{color:#E7E9EE;text-decoration:none;background:#1B1D23}
a.ft-chip-l:hover{border-color:#00E88F;color:#00E88F;text-decoration:none}
.ft-row{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;padding-top:26px;border-top:1px solid #23262E}
.ft-copy{font-size:13px;color:#A3A8B4}
.ft-copy a{color:#D5D8E0;text-decoration:none}
.ft-copy a:hover{color:#00E88F}
.ft-bot{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:start}
.ft-legal{margin:0;max-width:640px;font-size:12.5px;line-height:1.65;color:#7D8290}
.ft-legal a{color:#A3A8B4;text-decoration:underline;text-underline-offset:3px}
.ft-pays{max-width:360px;justify-content:flex-end}
.ft-pay{padding:6px 11px;border-radius:8px;background:#1B1D23;border:1px solid #2C2F38;font:700 11.5px "Work Sans",sans-serif;letter-spacing:.04em;color:#C9CDD6}
@media (max-width:980px){.ft-top{grid-template-columns:1fr;gap:36px}.ft-bot{grid-template-columns:1fr}.ft-pays{justify-content:flex-start;max-width:none}}
@media (max-width:640px){.ft-in{padding:40px 16px 96px;gap:30px}.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
  .ft-rg{flex-direction:column;gap:14px;padding:22px 18px}.ft-row{flex-direction:column;align-items:flex-start}}

/* 09.10 (владелец): у зелёных кнопок текст при наведении остаётся тёмным (общий a:hover красил его в зелёный) */
a.p-7f6957:hover,a.p-9a942b:hover,a.p-b2000f:hover,a.p-d173da:hover,a.p-f258ae:hover,a.p-7f6957:hover{color:#0F1013!important;text-decoration:none!important;filter:brightness(1.08)}