/* =========================================================================
   table-felt — холст, типографика, шапка, навигация, полосы, подвал
   casinoblox.co.nz · маркеры блоков cbx:*  · сетка на grid, ноль JS
   ========================================================================= */

/* --- [cbx:tokens] ------------------------------------------------------- */
:root{
  --cbx-felt:#101418;
  --cbx-felt-deep:#191f27;
  --cbx-chalk:#ffffff;
  --cbx-band:#f2f1f8;
  --cbx-rule:#dcd9e8;
  --cbx-royal:#5b3fd6;
  --cbx-royal-deep:#3d2a97;
  --cbx-rose:#d6336c;
  --cbx-rose-deep:#ad2454;
  --cbx-rose-lit:#ff8fb4;
  --cbx-slate:#232a33;
  --cbx-fog:#5d6672;

  --cbx-lane:1120px;
  --cbx-read:760px;
  --cbx-wide:888px;
  --cbx-rail:222px;   /* рамка листа 1+1: колонка чтения выходит ровно 760 */
  --cbx-air:28px;
  --cbx-step:20px;
  --cbx-round:12px;
  --cbx-head:"Ek Mukta","Segoe UI",sans-serif;
  --cbx-body:"Open Sans","Segoe UI",sans-serif;
}
@media (max-width:900px){ :root{ --cbx-step:14px; --cbx-air:20px; } }

/* --- [cbx:base] --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cbx-felt);
  color:var(--cbx-slate);
  font:400 17px/1.66 var(--cbx-body);
}
img{ max-width:100%; height:auto; border:0; }
a{ color:var(--cbx-royal-deep); }
a:hover{ color:var(--cbx-rose-deep); }

:where(h1,h2,h3,h4,h5){
  font-family:var(--cbx-head);
  color:var(--cbx-felt);
  font-weight:700;
  line-height:1.2;
  margin:1.6em 0 .55em;
}
h1{ font-size:37px; margin-top:0; letter-spacing:-.4px; }
h2{ font-size:27px; }
h3{ font-size:21px; }
h4{ font-size:18px; }
@media (max-width:640px){ h1{ font-size:28px; } h2{ font-size:22px; } h3{ font-size:19px; } }

.cbx-lane{ width:100%; max-width:var(--cbx-lane); margin:0 auto; padding:0 var(--cbx-step); }
.cbx-num{ font-family:var(--cbx-head); font-variant-numeric:tabular-nums; }

/* --- [cbx:hd] шапка ----------------------------------------------------- */
.cbx-hd{
  background:var(--cbx-felt);
  border-bottom:1px solid #262d38;
  position:relative;
  z-index:40;
}
.cbx-hd, .cbx-hd ul, .cbx-hd li, .cbx-hd a{ color:var(--cbx-chalk); }
.cbx-drop, .cbx-drop li{ color:var(--cbx-slate); }
.cbx-hd__lane{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
  min-height:68px;
  width:100%; max-width:var(--cbx-lane); margin:0 auto; padding:0 var(--cbx-step);
}
.cbx-brand{ display:grid; grid-template-columns:auto auto; align-items:center; gap:10px; text-decoration:none; }
.cbx-brand__mark{ width:34px; height:34px; display:block; }
.cbx-brand__name{ font-family:var(--cbx-head); font-weight:700; font-size:21px; color:var(--cbx-chalk); letter-spacing:-.2px; }
.cbx-brand__name b{ color:var(--cbx-rose-lit); font-weight:700; }
.cbx-hd__tag{ color:#8d96a3; font-size:13px; justify-self:end; }
@media (max-width:1040px){ .cbx-hd__tag{ display:none; } }

.cbx-nav__close{ display:none; }
.cbx-nav{ justify-self:center; }
.cbx-nav > ul{ list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; gap:2px; }
.cbx-nav > ul > li{ position:relative; }
.cbx-nav a{ text-decoration:none; }
.cbx-nav__hub{
  display:grid; grid-auto-flow:column; align-items:center; gap:7px;
  padding:22px 12px; color:#d7dbe2; font-size:15px; font-weight:600;
  border-bottom:3px solid transparent;
}
.cbx-nav__hub svg{ width:17px; height:17px; stroke:var(--cbx-rose); fill:none; stroke-width:1.75; }
.cbx-nav > ul > li:hover > .cbx-nav__hub,
.cbx-nav > ul > li:focus-within > .cbx-nav__hub{ color:var(--cbx-chalk); border-bottom-color:var(--cbx-rose); }

.cbx-drop{
  position:absolute; left:50%; transform:translateX(-50%) translateY(6px);
  min-width:246px; margin:0; padding:10px; list-style:none;
  background:var(--cbx-chalk); border:1px solid var(--cbx-rule); border-radius:var(--cbx-round);
  box-shadow:0 18px 40px rgba(16,20,24,.28);
  visibility:hidden; opacity:0; transition:opacity .14s ease, transform .14s ease;
}
.cbx-nav > ul > li:hover > .cbx-drop,
.cbx-nav > ul > li:focus-within > .cbx-drop{ visibility:visible; opacity:1; transform:translateX(-50%) translateY(0); }
.cbx-nav > ul > li:last-child > .cbx-drop,
.cbx-nav > ul > li:nth-last-child(2) > .cbx-drop{ left:auto; right:0; transform:none; }
.cbx-nav > ul > li:last-child:hover > .cbx-drop,
.cbx-nav > ul > li:last-child:focus-within > .cbx-drop,
.cbx-nav > ul > li:nth-last-child(2):hover > .cbx-drop,
.cbx-nav > ul > li:nth-last-child(2):focus-within > .cbx-drop{ transform:none; }
.cbx-drop a{
  display:block; padding:8px 11px; border-radius:7px;
  color:var(--cbx-slate); font-size:15px;
}
.cbx-drop a:hover{ background:var(--cbx-band); color:var(--cbx-royal-deep); }

/* бургер — на чекбоксе, ноль JS */
.cbx-burger,.cbx-burger__box{ display:none; }
.cbx-burger__box{ width:44px; height:44px; border:1px solid #333c49; border-radius:9px; cursor:pointer; }
.cbx-burger__box span,.cbx-burger__box span::before,.cbx-burger__box span::after{
  display:block; height:2px; width:20px; background:var(--cbx-chalk); content:""; position:relative;
}
.cbx-burger__box span{ margin:21px auto 0; }
.cbx-burger__box span::before{ top:-6px; } .cbx-burger__box span::after{ top:4px; }

@media (max-width:900px){
  .cbx-hd__lane{ grid-template-columns:auto 1fr; }
  .cbx-burger__box{ display:block; justify-self:end; }
  .cbx-nav{
    grid-column:1 / -1; justify-self:stretch;
    max-height:0; overflow:hidden; transition:max-height .2s ease;
    /* ⛔ Одного `max-height:0` мало: закрытое меню оставляет живые боксы ссылок поверх
       текста — gate_overlap краснел на ВСЕХ 18 адресах, а скрытые ссылки продолжали
       ловить фокус с клавиатуры. `visibility` убирает и то, и другое, а на анимацию
       не влияет: она задержана до конца перехода max-height. */
    visibility:hidden; transition:max-height .2s ease, visibility 0s linear .2s;
  }
  /* чекбокс лежит в <header>, а меню — внутри .cbx-hd__lane: сосед ищется через лист */
  .cbx-burger:checked ~ .cbx-hd__lane .cbx-nav{
    max-height:2200px; visibility:visible; transition:max-height .2s ease, visibility 0s;
  }
  .cbx-nav__close{ display:block; text-align:center; padding:13px 0; min-height:44px;
    color:#b9c0cb; font-size:14px; letter-spacing:.3px; cursor:pointer; border-top:1px solid #2b333f; }
  .cbx-nav > ul{ grid-auto-flow:row; gap:0; padding-bottom:12px; }
  .cbx-nav__hub{ padding:13px 2px; min-height:44px; border-bottom:1px solid #262d38; }
  /* ⛔ `visibility:visible` тут воскрешало подменю ВНУТРИ закрытого меню: у `visibility`
     наследование, и ребёнок с `visible` показывается из-под `hidden`-родителя. Боксы
     ссылок подменю снова легли поверх текста — gate_overlap краснел на всех 18 адресах
     уже ПОСЛЕ починки самой .cbx-nav (26.09.2026). Нужен `inherit`: в раскрытом меню
     родитель `visible`, в закрытом — `hidden`, и подменю идёт за ним. */
  .cbx-drop{
    position:static; transform:none; visibility:inherit; opacity:1;
    background:transparent; border:0; box-shadow:none; padding:4px 0 10px 26px;
  }
  .cbx-nav > ul > li:last-child > .cbx-drop,
  .cbx-nav > ul > li:nth-last-child(2) > .cbx-drop{ right:auto; }
  .cbx-drop, .cbx-drop li{ color:#aeb6c2; }
  .cbx-drop a{ color:#aeb6c2; min-height:44px; display:flex; align-items:center; }
  .cbx-drop a:hover{ background:transparent; color:var(--cbx-chalk); }
}

/* --- [cbx:band] полоса заголовка --------------------------------------- */
.cbx-band{ background:var(--cbx-felt-deep); padding:16px 0 16px; }
.cbx-band__lane{ width:100%; max-width:var(--cbx-lane); margin:0 auto; padding:0 var(--cbx-step); }
/* ⛔ `nowrap; overflow:hidden; text-overflow:ellipsis` прятало хвост крошек только
   ВИЗУАЛЬНО: боксы ссылок оставались шире полосы, и gate_padding мерил «зазор справа
   −461» на 768 px и −211 на 1024 px (baccarat-online/rules, payment-options, software —
   25.09.2026). Крошки переносятся на любой ширине, а полосу в три строки держит
   max-height, а не nowrap: вертикальный обрез геометрию полосы не ломает. */
.cbx-crumbs{ font-size:13px; color:#8d96a3; margin:0 0 6px;
  white-space:normal; word-break:break-word; max-height:3.1em; overflow:hidden; }
.cbx-crumbs a{ color:#b9c0cb; text-decoration:none; }
.cbx-crumbs a:hover{ color:var(--cbx-chalk); text-decoration:underline; }
.cbx-kicker{
  display:inline-block; margin:0 0 5px; padding:3px 10px; border-radius:4px;
  background:var(--cbx-royal); color:var(--cbx-chalk);
  font:700 12px/1.5 var(--cbx-head); letter-spacing:.9px; text-transform:uppercase;
}
.cbx-band h1{ color:var(--cbx-chalk); max-width:22ch; font-size:30px; line-height:1.18; margin:0 0 11px; }   /* крошки+кикер+H1 — максимум треть экрана (05.0ш) */
.cbx-meta{ margin:7px 0 0; color:#8d96a3; font-size:13px; }
@media (max-width:640px){
  .cbx-band{ padding:12px 0 13px; }
  /* перенос крошек теперь общий (см. выше) — на 390 px остаётся только кегль и высота
     в четыре строки: хвост «Baccarat Casino Online – #1 Real Money …» тут длиннее. */
  .cbx-crumbs{ font-size:12px; margin-bottom:6px; max-height:4.2em; }
  .cbx-meta{ font-size:12px; margin-top:7px; }
  .cbx-band h1{ font-size:23px; line-height:1.16; margin-bottom:9px; }   /* на 390 заголовок в 30px уезжал в четыре строки и съедал первый экран */
}
.cbx-meta time{ color:#b9c0cb; }

/* --- [cbx:cols] лист + рельс ------------------------------------------- */
.cbx-cols{
  width:100%; max-width:var(--cbx-lane); margin:0 auto; padding:0 0 calc(var(--cbx-air)*2);   /* полоса уже держит поле — второй уровень съедал колонку до 602 */
  display:grid; grid-template-columns:minmax(0,1fr) var(--cbx-rail); gap:28px; align-items:start;
}
@media (max-width:980px){ .cbx-cols{ grid-template-columns:minmax(0,1fr); } }

.cbx-sheet{
  background:var(--cbx-chalk);
  border:1px solid var(--cbx-rule);
  border-radius:var(--cbx-round);
  box-shadow:0 12px 32px rgba(16,20,24,.14);
  padding:34px 34px 30px;
  overflow:hidden;
}
@media (max-width:640px){ .cbx-sheet{ padding:20px 16px 18px; border-radius:9px; } }

/* --- [cbx:prose] текст донора в нашем листе ---------------------------- */
.cbx-prose{ max-width:var(--cbx-read); color:var(--cbx-slate); }
.cbx-prose > *:first-child{ margin-top:0; }
.cbx-prose p{ margin:0 0 18px; }
.cbx-prose ul,.cbx-prose ol{ margin:0 0 18px; padding-left:20px; }
.cbx-prose li{ margin:0 0 8px; }
.cbx-prose ul li::marker{ color:var(--cbx-rose); }
.cbx-prose h2{ margin:30px 0 12px; padding-top:12px; border-top:1px solid var(--cbx-rule); }   /* ритм в пикселях: em съезжал на каждом кегле (05.17) */
.cbx-prose h2:first-of-type{ border-top:0; padding-top:0; }
.cbx-prose b,.cbx-prose strong{ color:var(--cbx-felt); }
.cbx-prose blockquote{
  margin:1.4em 0; padding:2px 0 2px 18px;
  border-left:3px solid var(--cbx-rose); color:#4a535f; font-style:italic;
}
.cbx-prose img{ border-radius:8px; }
.cbx-prose > section{ display:block; }
.cbx-figure{ margin:1.5em 0; }
.cbx-figure img{ display:block; width:100%; border-radius:10px; }
.cbx-figure figcaption{ margin-top:8px; color:var(--cbx-fog); font-size:13px; }

/* --- [cbx:prose-blocks] раздел, список, шаг, врезка (05.2a) ------------- */
.cbx-prose h2.cbx-h2{ display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:center; }
.cbx-prose h2.cbx-h2 svg{ width:30px; height:30px; padding:5px; border-radius:8px;
  background:var(--cbx-band); color:var(--cbx-royal); stroke-width:1.7; }
.cbx-prose h3.cbx-h3{ position:relative; padding-left:15px; }
.cbx-prose h3.cbx-h3::before{ content:""; position:absolute; left:0; top:.26em; bottom:.26em;
  width:3px; border-radius:2px; background:var(--cbx-rose); }
.cbx-prose ul.cbx-list{ list-style:none; padding-left:0; }
.cbx-prose ul.cbx-list > li{ position:relative; padding-left:27px; }
.cbx-prose ul.cbx-list > li::before{ content:""; position:absolute; left:3px; top:.44em;
  width:9px; height:9px; border-radius:3px; background:var(--cbx-royal); }
.cbx-prose ul.cbx-list ul{ margin-top:8px; }
.cbx-prose ol.cbx-steps{ list-style:none; padding-left:0; }
.cbx-prose ol.cbx-steps > li{ font-size:inherit; line-height:1.66; padding:9px 0; }
.cbx-pull{ margin:26px 0 24px; padding:18px 22px; border-radius:var(--cbx-round);
  background:var(--cbx-band); border-left:4px solid var(--cbx-rose);
  font:600 17px/1.52 var(--cbx-head); color:var(--cbx-felt); }
.cbx-pull a{ color:inherit; }
@media (max-width:760px){
  .cbx-prose h2.cbx-h2{ grid-template-columns:26px 1fr; gap:10px; }
  .cbx-prose h2.cbx-h2 svg{ width:26px; height:26px; }
  .cbx-pull{ padding:15px 16px; font-size:16px; }
}
/* --- [/cbx:prose-blocks] ----------------------------------------------- */

/* --- [cbx:ft] подвал ---------------------------------------------------- */
.cbx-ft{ background:var(--cbx-felt-deep); color:#9aa3b0; margin-top:auto; }
.cbx-ft__lane{ width:100%; max-width:var(--cbx-lane); margin:0 auto; padding:38px var(--cbx-step) 28px; }
.cbx-ft__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; }
@media (max-width:900px){ .cbx-ft__top{ grid-template-columns:1fr 1fr; gap:24px; } }
@media (max-width:520px){ .cbx-ft__top{ grid-template-columns:1fr; } }
.cbx-ft h3{ color:var(--cbx-chalk); font-size:15px; margin:0 0 12px; letter-spacing:.3px; }
.cbx-ft ul{ list-style:none; margin:0; padding:0; }
.cbx-ft li{ margin:0 0 8px; }
.cbx-ft a{ color:#9aa3b0; text-decoration:none; font-size:14px; }
.cbx-ft a:hover{ color:var(--cbx-chalk); text-decoration:underline; }
.cbx-ft p{ font-size:14px; line-height:1.62; margin:0 0 1em; }
.cbx-ft__badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.cbx-ft__badge{
  display:flex; align-items:center; gap:7px; height:40px; padding:0 13px;
  background:var(--cbx-chalk); border-radius:7px;
  font:700 13px/1 var(--cbx-head); color:var(--cbx-felt);
}
.cbx-ft__badge svg{ width:17px; height:17px; flex:0 0 17px; color:var(--cbx-royal); }
/* слот ценности (09.25) — до заполнения пуст и не рисуется */
.cbx-ft__value{ margin-top:24px; padding-top:16px; border-top:1px solid #2b333f;
  font-size:13.5px; line-height:1.62; color:#c9cfda; max-width:76ch; }
.cbx-ft__value:empty{ display:none; }
.cbx-ft__bottom{
  margin-top:26px; padding-top:18px; border-top:1px solid #2b333f;
  display:grid; grid-template-columns:1fr auto; gap:14px; font-size:13px;
}
@media (max-width:640px){ .cbx-ft__bottom{ grid-template-columns:1fr; } }