/* casinovait.net — redesign "Sala Blu"
 * Полная замена авторского <style>. Разметка не тронута ни на байт:
 * меняются только сетка, типографика, палитра, компоненты и порядок полос.
 * Тон 232° (назначенный), монохром + белый как нейтральный пик. Второго
 * хроматического тона нет намеренно.
 */

/* ---------- 1. Шрифты (локально, внешних хостов нет) ---------- */
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/chakrapetch-700-latin.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:'Public Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/fonts/publicsans-var-latin.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;
}

/* ---------- 2. Токены ---------- */
:root{
  /* подложка — один тон 232°, без второго хроматического */
  --bg-0:hsl(232 30% 6%);
  --bg-1:hsl(232 26% 10%);
  --bg-2:hsl(232 24% 14%);
  --bg-3:hsl(232 22% 18%);
  --line:hsl(232 20% 24%);
  --line-soft:hsl(232 20% 19%);
  --ink:hsl(232 14% 94%);
  --ink-2:hsl(232 12% 72%);
  --ink-3:hsl(232 12% 56%);
  --accent:hsl(232 90% 63%);
  --accent-hi:hsl(232 96% 72%);
  --accent-dim:hsl(232 60% 30%);
  --peak:#fff;

  --display:'Chakra Petch','Public Sans',ui-sans-serif,sans-serif;
  --text:'Public Sans',ui-sans-serif,system-ui,sans-serif;

  /* скругления асимметричные: один угол срезан (seed: one corner squared) */
  --r-out:14px 14px 14px 0;
  --r-in:8px 8px 8px 0;
  --r-flat:0;

  --rail:1320px;
  --gut:clamp(16px,4vw,64px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--text);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  font-synthesis-weight:none;
  /* фон перестаёт быть плоским: сетка 96px + один радиальный подсвет от акцента.
     Блоб-пятен и неонового свечения нет намеренно — они выгорели. */
  background-color:var(--bg-0);
  background-image:
    linear-gradient(hsl(232 30% 100% / .028) 1px,transparent 1px),
    linear-gradient(90deg,hsl(232 30% 100% / .028) 1px,transparent 1px),
    radial-gradient(120% 80% at 84% -8%,hsl(232 90% 63% / .16),transparent 62%);
  background-size:96px 96px,96px 96px,100% 100%;
  background-attachment:fixed,fixed,scroll;
}
@media (prefers-reduced-motion:reduce){
  body{background-attachment:scroll,scroll,scroll;}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}
img{max-width:100%;}
a{color:var(--accent-hi);text-underline-offset:3px;}
:focus-visible{outline:3px solid var(--accent-hi);outline-offset:3px;}

/* ---------- 3. Типографика ----------
 * Контраст display/body поднят с 2.24x до >5x. Капс — только на коротких
 * микро-метках и кнопках (канон: ALL CAPS <= 5 слов), заголовки берут
 * характер отрицательным трекингом, а не регистром. */
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--peak);}
h1{
  font-size:clamp(38px,5.2vw,74px);
  line-height:.98;
  letter-spacing:-.03em;
  margin:0 0 32px;
  max-width:22ch;
  text-wrap:balance;
}
h2{
  font-size:clamp(27px,3.2vw,44px);
  line-height:1.04;
  letter-spacing:-.028em;
  margin:64px 0 16px;
  padding-top:16px;
  border-top:1px solid var(--line);
  text-wrap:balance;
}
h3{
  font-size:clamp(19px,1.5vw,24px);
  line-height:1.2;
  letter-spacing:-.018em;
  color:var(--ink);
  margin:32px 0 12px;
}
p{margin:0 0 16px;}
strong{font-weight:700;color:var(--peak);}

/* ---------- 4. Шапка ---------- */
.eca-top-shell{
  position:sticky;top:0;z-index:999;
  background:hsl(232 30% 6% / .88);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.bfb-top-wrap{
  width:min(var(--rail),100%);margin:0 auto;padding:12px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.fce-mark-ref{display:inline-flex;text-decoration:none;}
.eef-brand-mark{display:flex;align-items:center;}
/* Логотип крупнее: 40px -> 64px. У <img> нет атрибута height, поэтому
   CSS-высота применяется без оговорок (проверено getBoundingClientRect). */
.eef-brand-mark img{height:64px;width:auto;display:block;}
.fdd-top-buttons{display:flex;gap:8px;flex-shrink:0;}

/* ---------- 5. CTA: состояния, а не свечение ---------- */
.cbf-act-top{
  font-family:var(--display);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  padding:12px 24px;border-radius:var(--r-in);cursor:pointer;
  border:1px solid var(--line);color:var(--ink);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .1s ease;
  user-select:none;white-space:nowrap;
}
.cbf-act-top:hover{border-color:var(--accent-hi);color:var(--peak);background:hsl(232 90% 63% / .14);}
.cbf-act-top:active{transform:translateY(1px);}
.acd-act-registrati{background:var(--accent);border-color:var(--accent);color:hsl(232 40% 8%);}
.acd-act-registrati:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:hsl(232 40% 8%);}
/* Accedi — призрачная кнопка, Registrati — залитая: две ступени CTA, а не одна */
.aac-act-accedi{background:transparent;color:var(--ink);border-color:var(--line);}
.aac-act-accedi:hover{background:hsl(232 90% 63% / .14);color:var(--peak);border-color:var(--accent-hi);}

/* ---------- 6. Герой: полоса во всю ширину вьюпорта ----------
 * Было: контейнер min-height 220px, текст по центру.
 * Стало: 100vw-полоса, текст прижат к левому рельсу, денежное число —
 * носитель первого экрана (это и есть заявленный риск макета). */
.ede-lead-block{
  position:relative;
  width:100vw;margin-left:calc(50% - 50vw);
  min-height:clamp(420px,58vh,620px);
  display:flex;align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  margin-bottom:0;
}
.cbb-lead-background{
  position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;
  background:linear-gradient(hsl(232 40% 5% / .72),hsl(232 40% 5% / .88)),
             url('/images/Casinova.png') no-repeat center center;
  background:linear-gradient(hsl(232 40% 5% / .72),hsl(232 40% 5% / .88)),
             image-set(
               url('/images/Casinova.avif') type('image/avif'),
               url('/images/Casinova.webp') type('image/webp'),
               url('/images/Casinova.png') type('image/png')
             ) no-repeat center center;
  background-size:cover;
  filter:saturate(.35);
}
.ede-lead-block::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;z-index:3;
  background:linear-gradient(90deg,var(--accent) 0 22%,transparent 22%);
}
.afd-lead-body{
  position:relative;z-index:2;
  width:min(var(--rail),100%);margin:0 auto;padding:48px var(--gut);
  text-align:left;max-width:none;
}
.cfa-lead-cap{
  font-family:var(--display);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.24em;color:var(--accent-hi);
  margin:0 0 16px;display:flex;align-items:center;gap:12px;
}
.cfa-lead-cap::after{content:"";height:1px;flex:1;max-width:120px;background:var(--accent-dim);}
/* денежное число героя — signature-элемент макета */
.eea-lead-head{
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,5.6vw,76px);
  line-height:.98;letter-spacing:-.035em;color:var(--peak);
  font-variant-numeric:tabular-nums;
  margin:0 0 16px;max-width:none;text-shadow:none;
}
.bee-lead-reward{
  font-family:var(--text);font-size:17px;font-weight:500;
  color:var(--ink-2);margin:0 0 32px;letter-spacing:0;
}
.bce-act-lead{
  font-family:var(--display);font-size:15px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  padding:16px 48px;border-radius:var(--r-in);cursor:pointer;
  background:var(--accent);color:hsl(232 40% 8%);
  border:1px solid var(--accent);
  transition:background-color .18s ease,transform .1s ease;
}
.bce-act-lead:hover{background:var(--accent-hi);border-color:var(--accent-hi);}
.bce-act-lead:active{transform:translateY(1px);}

/* ---------- 7. Навигация ---------- */
.aca-menu-nav2{
  background:var(--bg-1);border-bottom:1px solid var(--line-soft);
  position:relative;z-index:5;
}
.ecb-menu-wrap{width:min(var(--rail),100%);margin:0 auto;padding:0 var(--gut);}
.ace-menu-set{
  list-style:none;margin:0;padding:0;
  display:flex;gap:0;overflow-x:auto;scrollbar-width:thin;
}
.dec-menu-unit{flex:0 0 auto;}
.cbd-menu-ref{
  display:flex;align-items:center;gap:8px;
  padding:16px 20px;cursor:pointer;text-decoration:none;
  font-family:var(--display);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.cbd-menu-ref:hover{color:var(--peak);border-bottom-color:var(--accent);}
.cbc-menu-glyph{width:16px;height:16px;flex:0 0 auto;}

/* ---------- 8. Каталог: рельс + bento ----------
 * Было: .dcb-games-matrix display:flex + overflow-x:auto — горизонтальная
 * карусель в один ряд, заголовок блока сверху.
 * Стало: заголовок уезжает в узкий залипающий рельс слева, плитки
 * раскладываются мозаикой. Bento здесь оправдан содержимым (равнозначные
 * плитки каталога), а не взят по умолчанию. */
.eea-games-block{
  width:min(var(--rail),100%);margin:0 auto;padding:48px var(--gut);
}
.eea-games-block:nth-of-type(even){
  width:100vw;margin-left:calc(50% - 50vw);max-width:none;
  background:hsl(232 26% 10% / .55);
  border-block:1px solid var(--line-soft);
  padding-inline:calc(var(--gut) + (100vw - min(var(--rail),100vw)) / 2);
}
.dfd-block-top{margin-bottom:24px;}
.dcf-block-head{
  font-family:var(--display);font-weight:700;
  font-size:clamp(24px,2.6vw,36px);line-height:1;
  letter-spacing:-.03em;color:var(--peak);
  padding-top:12px;border-top:2px solid var(--accent);
}
.aec-show-all-ref{
  margin-top:12px;cursor:pointer;
  font-family:var(--display);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
  transition:color .18s ease;
}
.aec-show-all-ref:hover{color:var(--accent-hi);}
.dcb-games-matrix{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  overflow:visible;
}
.abf-slot-tile{
  width:auto;flex:initial;
  background:var(--bg-2);border:1px solid var(--line-soft);
  border-radius:var(--r-in);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;
  transition:border-color .18s ease,transform .18s ease;
}
.abf-slot-tile:hover{border-color:var(--accent);transform:translateY(-2px);}
.ead-slot-pic{width:100%;aspect-ratio:1/1;flex:0 0 auto;background-color:var(--bg-3);background-position:center;}
.ebc-slot-head{
  padding:10px 12px;font-size:12px;font-weight:600;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-top:1px solid var(--line-soft);
}

@media (min-width:640px){
  .dcb-games-matrix{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width:1040px){
  /* боковой рельс: заголовок секции залипает, пока идёт её мозаика */
  .eea-games-block{
    display:grid;grid-template-columns:240px minmax(0,1fr);
    column-gap:48px;align-items:start;
  }
  .dfd-block-top{position:sticky;top:112px;margin-bottom:0;}
  .dcb-games-matrix{grid-template-columns:repeat(6,minmax(0,1fr));}
  /* мозаика: первая плитка блока — крупная, восьмая — широкая */
  .dcb-games-matrix > .abf-slot-tile:nth-child(12n+1){grid-column:span 2;grid-row:span 2;}
  .dcb-games-matrix > .abf-slot-tile:nth-child(12n+8){grid-column:span 2;}
  .dcb-games-matrix > .abf-slot-tile:nth-child(12n+1) .ead-slot-pic{aspect-ratio:auto;flex:1 1 auto;min-height:0;}
  .dcb-games-matrix > .abf-slot-tile:nth-child(12n+8) .ead-slot-pic{aspect-ratio:auto;flex:1 1 auto;min-height:0;}
}

/* ---------- 9. Текстовый блок: мера набора + вынос заголовков ---------- */
.aaf-body-block{
  width:min(var(--rail),100%);margin:0 auto;padding:64px var(--gut) 48px;
  max-width:min(var(--rail),100%);
}
.fea-body-shell{padding:0;max-width:74ch;}
.fea-body-shell > h2,
.fea-body-shell > h1{max-width:none;}
.fea-body-shell ul,.fea-body-shell ol{margin:0 0 16px;padding-left:24px;}
.fea-body-shell li{margin-bottom:8px;}
.fea-body-shell li::marker{color:var(--accent);}
.ecc-games-set{list-style:none;padding-left:0;}
.ecc-games-set li{
  padding-left:24px;position:relative;
}
.ecc-games-set li::before{
  content:"";position:absolute;left:0;top:.7em;
  width:12px;height:1px;background:var(--accent);
}
.fba-act-body{
  display:inline-block;margin:8px 0 32px;
  font-family:var(--display);font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  padding:16px 40px;border-radius:var(--r-in);cursor:pointer;
  background:var(--accent);color:hsl(232 40% 8%);
  border:1px solid var(--accent);text-decoration:none;
  transition:background-color .18s ease,transform .1s ease;
}
.fba-act-body:hover{background:var(--accent-hi);}
.fba-act-body:active{transform:translateY(1px);}

/* ---------- 10. Таблицы: носитель данных вместо карточки ----------
 * Было: заливка #0d0d0d, рамка на каждой ячейке, radius 8px — плашка.
 * Стало: рамок и заливки нет, работают волосяные линии, микро-капс
 * в шапке и табличные цифры. */
.table-wrapper{overflow-x:auto;margin:24px 0;}
.eaa-info-grid2,.abe-body-grid2{
  width:100%;border-collapse:collapse;
  background:transparent;border:0;border-radius:0;overflow:visible;
  margin:24px 0;font-variant-numeric:tabular-nums;
}
.eaa-info-grid2 th,.abe-body-grid2 th{
  font-family:var(--display);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink-3);
  text-align:left;padding:8px 16px 8px 0;
  border:0;border-bottom:2px solid var(--line);
  white-space:nowrap;
}
.eaa-info-grid2 td,.abe-body-grid2 td{
  padding:12px 16px 12px 0;border:0;border-bottom:1px solid var(--line-soft);
  vertical-align:top;font-size:15px;color:var(--ink-2);
}
.eaa-info-grid2 td:first-child,.abe-body-grid2 td:first-child{color:var(--ink);font-weight:600;}
.eaa-info-grid2 tbody tr:hover,.abe-body-grid2 tbody tr:hover{background:hsl(232 90% 63% / .06);}

/* ---------- 11. FAQ ---------- */
.dbd-qa-block{margin:64px 0 0;max-width:74ch;}
.bde-qa-unit{border-top:1px solid var(--line-soft);padding:24px 0;}
.bde-qa-unit:last-child{border-bottom:1px solid var(--line-soft);}
.bdf-qa-question{
  font-family:var(--display);font-size:18px;font-weight:700;
  letter-spacing:-.015em;color:var(--peak);margin:0 0 8px;
}
.ebb-qa-answer{color:var(--ink-2);font-size:16px;}
.ebb-qa-answer p:last-child{margin-bottom:0;}

/* ---------- 12. Гейминг-ответственность ---------- */
.responsible-gaming{
  width:min(var(--rail),100%);margin:0 auto;padding:0 var(--gut) 64px;
}
.responsible-gaming h3{
  font-size:13px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-3);margin:0 0 12px;padding-top:16px;
  border-top:1px solid var(--line);
}
.responsible-gaming p{
  color:var(--ink-3);font-size:14px;max-width:78ch;margin:0;
  border-left:2px solid var(--accent-dim);padding-left:24px;
}

/* ---------- 13. Подвал ---------- */
.fbf-foot-shell{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--bg-1);border-top:1px solid var(--line);
  padding:64px 0 32px;
}
.fbc-foot-top{
  width:min(var(--rail),100%);margin:0 auto 48px;padding:0 var(--gut);
  display:flex;gap:8px;
}
.dbc-foot-columns{
  width:min(var(--rail),100%);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;
}
.bac-foot-column strong{
  display:block;font-family:var(--display);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:var(--accent-hi);
  padding-bottom:8px;margin-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.bee-foot-links{list-style:none;margin:0;padding:0;}
.bee-foot-links li{margin-bottom:8px;}
.dac-foot-ref{
  color:var(--ink-3);text-decoration:none;font-size:14px;
  transition:color .18s ease;
}
.dac-foot-ref:hover{color:var(--peak);text-decoration:underline;}
.ffb-foot-bottom{
  width:min(var(--rail),100%);margin:48px auto 0;padding:32px var(--gut) 0;
  border-top:1px solid var(--line);
}
.afc-foot-bottom-body{max-width:none;margin:0;text-align:left;}
.afc-foot-bottom-body strong{
  font-family:var(--display);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3) !important; /* перебивает inline color шаблона */
}
.cfa-payment-methods{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.dda-payment-glyph{
  font-family:var(--display);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
  padding:8px 16px;border:1px solid var(--line-soft);border-radius:var(--r-flat);
}
.cec-licenses{display:flex;gap:8px;margin-bottom:24px;}
.beb-license-glyph{
  font-size:14px;padding:8px 16px;
  border:1px solid var(--line);border-radius:var(--r-flat);color:var(--ink-2);
}
.bde-foot-text{font-size:13px;color:var(--ink-3);max-width:78ch;margin:0 0 12px;}
.bde-foot-text a{color:var(--ink-2) !important;} /* перебивает inline color шаблона */
/* Брендовая строка подвала — крупнее, это единственный носитель марки внизу:
   <img> логотипа в footer нет вовсе (picture=0, img=0). */
.dcb-copyright{
  font-family:var(--display);font-size:clamp(15px,1.4vw,20px);font-weight:700;
  letter-spacing:-.01em;color:var(--ink-2);
  margin:32px 0 0;padding-top:16px;border-top:1px solid var(--line-soft);
}

/* ---------- 14. Адаптив ---------- */
@media (max-width:1039px){
  .eea-games-block{display:block;}
}
@media (max-width:639px){
  body{font-size:16px;}
  .eef-brand-mark img{height:48px;}
  .bfb-top-wrap{padding:8px var(--gut);}
  .cbf-act-top{padding:8px 12px;font-size:11px;letter-spacing:.06em;}
  .ede-lead-block{min-height:clamp(360px,64vh,520px);}
  .afd-lead-body{padding:32px var(--gut);}
  .bce-act-lead{width:100%;padding:16px 24px;}
  .fbc-foot-top{flex-direction:column;}
  .fbc-foot-top .cbf-act-top{text-align:center;}
  .aaf-body-block{padding:48px var(--gut) 32px;}
  h2{margin-top:48px;}
}

/* Правка владельца 23.08: на десктопе логотип стоял слишком высоко (12px сверху
   против 13 снизу при высоте шапки 89) — опускаем на 6px. На мобильном он был
   48px при шапке 65 и занимал её почти целиком — уменьшаем до 40px. */
@media (min-width:901px){
  header .fce-mark-ref{ position:relative; top:6px; }
}
@media (max-width:900px){
  header .fce-mark-ref img{ height:40px; }
}