/* casino-godofcoins.com — слой редизайна.
   Метод: замена стилей на неизменной разметке. Ни один узел, текст, href,
   data-link, <picture> и JSON-LD не трогаются — композиция меняется через CSS.
   Подключается ПОСЛЕ /css/style.css. */

/* ── 1. токены ───────────────────────────────────────────────────────────── */
:root{
  /* подложка: обсидиан вместо сине-серого #0f172a */
  --godof-bg-dark:#0a0b0d;
  --godof-bg-light:#111318;
  --godof-bg-card:#101216;
  --godof-bg-card-hover:#171a20;

  /* акцент: золото 44° вместо зелёного #22c55e (142°) — бренд «монеты» */
  --godof-primary:#d9a441;
  --godof-primary-light:#efc470;
  --godof-primary-dark:#a2762a;
  --godof-primary-alpha-20:rgba(217,164,65,.20);
  --godof-accent:#c2703a;
  --godof-gradient-primary:linear-gradient(100deg,#d9a441,#c2703a);

  --godof-text-primary:#ece9e3;
  --godof-text-secondary:rgba(236,233,227,.72);
  --godof-text-muted:rgba(236,233,227,.46);

  --godof-font-heading:'Anton',Impact,'Haettenschweiler',sans-serif;
  --godof-font-body:'Newsreader',Georgia,'Times New Roman',serif;

  /* скругления: карточки прямые, скруглены только контролы */
  --godof-radius-sm:0px;
  --godof-radius:0px;
  --godof-radius-lg:0px;

  /* шкала 1.500 (perfect fifth) */
  --rd-s0:1rem; --rd-s1:1.5rem; --rd-s2:2.25rem;
  --rd-s3:3.375rem; --rd-s4:5.0625rem; --rd-s5:7.59rem;

  --rd-line:rgba(236,233,227,.10);
  --rd-line-strong:rgba(217,164,65,.34);
  --rd-rail:minmax(13rem,19ch);
}

/* ── 2. подложка: сетка 96px + радиальная подсветка от акцента ────────────── */
body{
  background-color:var(--godof-bg-dark);
  background-image:
    radial-gradient(1100px 620px at 78% -8%,rgba(217,164,65,.13),transparent 62%),
    linear-gradient(var(--rd-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--rd-line) 1px,transparent 1px);
  background-size:auto,96px 96px,96px 96px;
  background-attachment:fixed,scroll,scroll;
  color:var(--godof-text-primary);
  font-family:var(--godof-font-body);
  font-size:1.0625rem;
  line-height:1.68;
}

/* ── 3. типографика: контраст display к body 4.8× ─────────────────────────── */
h1,h2,h3,.eaa-godof-strip-head,.deb-games-block-head{
  font-family:var(--godof-font-heading);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.028em;
  line-height:.94;
  color:var(--godof-text-primary);
}
h1{font-size:clamp(2.6rem,6.2vw,var(--rd-s4));}
h2{font-size:clamp(2rem,4vw,var(--rd-s3));margin:0 0 var(--rd-s0);}
h3{font-size:var(--rd-s2);letter-spacing:-.02em;}
p{max-width:68ch;}
strong{color:var(--godof-primary-light);font-weight:600;}
a{color:var(--godof-primary-light);}

/* ── 4. СТРУКТУРА: hero во всю ширину вьюпорта ───────────────────────────── */
.afd-godof-lead>.fca-godof-wrap{max-width:none;padding-left:0;padding-right:0;}
.afd-godof-lead .cbd-godof-lead-gradient-strip{
  border-radius:0;
  border-top:1px solid var(--rd-line-strong);
  border-bottom:1px solid var(--rd-line-strong);
  min-height:clamp(360px,52vh,560px);
}
.afd-godof-lead .fac-godof-strip-body{
  max-width:1180px;margin:0 auto;padding:clamp(1.5rem,4vw,var(--rd-s3));
}
/* signature: одно укрупнённое слово держит первый экран */
.eaa-godof-strip-head{
  font-size:clamp(2.4rem,7.4vw,var(--rd-s5));
  letter-spacing:-.035em;
  margin:.2em 0 .35em;
  text-wrap:balance;
}
.dfe-godof-strip-cap{
  font-family:var(--godof-font-body);
  text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;font-weight:600;
  color:var(--godof-primary);
  border-bottom:1px solid var(--rd-line-strong);padding-bottom:.5rem;
}
.cdb-godof-strip-text{font-size:1.125rem;color:var(--godof-text-secondary);}

/* ── 5. СТРУКТУРА: боковой рельс — заголовок в узкой залипающей колонке ──── */
@media (min-width:1000px){
  .bbf-godof-body-block>.fca-godof-wrap{
    display:grid;
    grid-template-columns:var(--rd-rail) minmax(0,1fr);
    column-gap:clamp(2rem,4vw,var(--rd-s3));
    align-items:start;
    max-width:1180px;
  }
  .bbf-godof-body-block>.fca-godof-wrap>h2{
    grid-column:1;grid-row:1/span 99;
    position:sticky;top:calc(var(--rd-s1) + 4.5rem);
    font-size:var(--rd-s2);
    padding-top:.15em;
    border-top:2px solid var(--godof-primary);
    text-wrap:balance;
  }
  .bbf-godof-body-block>.fca-godof-wrap>*:not(h2){grid-column:2;}
}

/* ── 6. СТРУКТУРА: ритм полос — чередование фона и плотности ─────────────── */
.bbf-godof-body-block{padding-block:clamp(2.5rem,6vw,var(--rd-s3));border:0;}
.bbf-godof-body-block:nth-of-type(even){
  background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 70%);
  border-top:1px solid var(--rd-line);
  padding-block:clamp(3.5rem,8vw,var(--rd-s4));
}

/* ── 7. СТРУКТУРА: bento вместо равных ячеек каталога ────────────────────── */
@media (min-width:820px){
  .bcf-godof-games-matrix{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-auto-rows:11.5rem;
    gap:2px;
  }
  .bcf-godof-games-matrix>.fab-godof-slot-tile{grid-column:span 1;grid-row:span 1;}
  .bcf-godof-games-matrix>.fab-godof-slot-tile:nth-child(12n+1){grid-column:span 2;grid-row:span 2;}
  .bcf-godof-games-matrix>.fab-godof-slot-tile:nth-child(12n+8){grid-column:span 2;}
}
.fab-godof-slot-tile{border-radius:0;overflow:hidden;position:relative;}
.fab-godof-slot-tile img{width:100%;height:100%;object-fit:cover;}
.fab-godof-slot-tile:hover{outline:1px solid var(--godof-primary);outline-offset:-1px;}
.deb-games-block-head{font-size:var(--rd-s2);margin-bottom:var(--rd-s1);}

/* ── 8. носители данных: линии вместо рамок, число крупно ────────────────── */
.table-wrapper table{border-collapse:collapse;width:100%;}
.table-wrapper th{
  font-family:var(--godof-font-heading);text-transform:uppercase;
  letter-spacing:.04em;font-weight:400;font-size:1rem;
  color:var(--godof-primary);
  border-bottom:2px solid var(--rd-line-strong);
  background:none;padding:.7rem .9rem;text-align:left;
}
.table-wrapper td{
  border:0;border-bottom:1px solid var(--rd-line);
  padding:.85rem .9rem;background:none;
}
.table-wrapper tr:hover td{background:rgba(217,164,65,.05);}

/* ── 9. контролы: единственное, что скруглено ────────────────────────────── */
.bba-godof-act,.bbc-godof-act-primary,button,.btn,[class*="-act"]{
  border-radius:999px;
}
[class*="-act"] a,a[class*="-act"]{
  border-radius:999px;
  font-family:var(--godof-font-body);
  font-weight:600;letter-spacing:.02em;
}

/* ── 10. шапка и рельс навигации ─────────────────────────────────────────── */
.bea-godof-top{
  background:rgba(10,11,13,.82);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--rd-line);
}
.ecc-top-menu a{
  font-family:var(--godof-font-body);
  text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:600;
}
.dbe-sidebar{border-right:1px solid var(--rd-line);background:var(--godof-bg-light);}

/* ── 11. движение: только hover, ничего сверх ────────────────────────────── */
*,*::before,*::after{animation:none !important;}
a,button,.fab-godof-slot-tile{transition:color .16s ease,background-color .16s ease,outline-color .16s ease;}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}

/* ── 12. правки по визуальной приёмке (замерено в браузере) ──────────────── */

/* было: main p { text-align: center } из исходного шаблона — центрированный
   серифный текст в двухколоночной сетке читается плохо */
main p,main li,.cdb-godof-strip-text{text-align:left;}
.afd-godof-lead .fac-godof-strip-body{text-align:left;}

/* вуаль плитки была прибита к top:266px под старую высоту 267px; в bento
   плитки разной высоты, и на низких вуаль оказывалась НИЖЕ плитки — подписи
   висели прямо на арте. Прижимаем к низу независимо от высоты ячейки. */
.fab-godof-slot-tile{display:block;}
.fcf-godof-slot-veil{
  top:auto !important;bottom:0;left:0;right:0;
  height:62%;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;
  padding:.85rem;
  background:linear-gradient(to top,rgba(0,0,0,.88) 12%,rgba(0,0,0,.55) 48%,transparent);
}
.ffc-godof-slot-head{
  font-family:var(--godof-font-body);font-weight:600;font-size:.95rem;
  line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.9);
}

/* рельс чуть шире — «SPIELAUSWAHL-ÜBERSICHT» в Anton не помещался в 19ch */
:root{--rd-rail:minmax(15rem,23ch);}
@media (min-width:1000px){
  .bbf-godof-body-block>.fca-godof-wrap>h2{font-size:2.6rem;hyphens:auto;}
}

/* ── 13. вторая итерация приёмки (замеры getBoundingClientRect) ──────────── */

/* было: первый <p> вводного блока стоял на 200px правее h1 (left 320 против 140)
   — колонка текста не совпадала с заголовком */
main>.fca-godof-wrap>p,
main>.fca-godof-wrap>h1,
main>.fca-godof-wrap>h2{margin-inline:0;padding-inline:0;}
main>.fca-godof-wrap{padding-inline:clamp(1rem,3vw,2.5rem);}

/* было: hero-полоса 1392px внутри вьюпорта 1568 — то есть НЕ во всю ширину.
   Приём full-bleed: вытащить полосу из потока контейнера. */
.afd-godof-lead .cbd-godof-lead-gradient-strip{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  border-radius:0;
}

/* было: div.def-godof-opener — max-width 800, margin-left auto (160px), text-align center.
   Именно он, а не сам <p>, отодвигал вводный текст на 160px правее h1. */
.def-godof-opener{
  margin-inline:0;
  max-width:70ch;
  text-align:left;
}
.def-godof-opener p{text-align:left;}