/* winaura-de.de — редизайн «Nachtaudienz». Standalone, заменяет /css/style.css.
   Разметка не изменена: все селекторы ниже адресуют существующие узлы. */

/* ─────────────── 1. Шрифты (self-hosted, variable woff2) ─────────────── */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('/fonts/Bricolage-200-latin.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
  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:'IBM Plex Sans';
  src:url('/fonts/PlexSans-400-latin.woff2') format('woff2');
  font-weight:100 700; font-style:normal; font-display:swap;
  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:'JetBrains Mono';
  src:url('/fonts/JBMono-700-latin.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;
  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{
  --ink-0:#08070f;
  --ink-1:#100d1c;
  --ink-2:#191430;
  --accent:hsl(257 92% 66%);
  --accent-hot:hsl(257 100% 79%);
  --accent-deep:hsl(257 86% 34%);
  --paper:#f1effa;
  --paper-2:rgba(241,239,250,.66);
  --paper-3:rgba(241,239,250,.40);
  --hair:rgba(241,239,250,.13);
  --hair-strong:rgba(241,239,250,.26);

  --display:'Bricolage Grotesque','Segoe UI',sans-serif;
  --body:'IBM Plex Sans','Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --r:0 14px 0 14px;          /* асимметрия: два угла срезаны, два прямые */
  --r-in:0 8px 0 8px;
  --shell:1340px;
  --pad:clamp(18px,3.4vw,60px);
  --rail:272px;
  --gap-rail:clamp(30px,4.2vw,84px);
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* ─────────────── 3. Подложка: duotone-split + диагональная штриховка ─────────────── */
body{
  font-family:var(--body);
  font-size:18px;
  line-height:1.62;
  color:var(--paper);
  background-color:var(--ink-0);
  background-image:
    repeating-linear-gradient(42deg,
      rgba(130,87,250,.055) 0 1px, transparent 1px 9px),
    linear-gradient(107deg,
      var(--ink-0) 0 44%, #0c0917 44% 44.35%, #0a0813 44.35% 100%);
  background-attachment:fixed,fixed;
  display:grid;
  /* .sidebar и main.winau-article — СИБЛИНГИ внутри body, не вложены друг в друга:
     двухколоночную сетку держит body, а не main (замерено на живом узле) */
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "progress progress"
    "header   header"
    "sidebar  content"
    "footer   footer";
  grid-template-rows:auto auto 1fr auto;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:var(--accent-hot);text-decoration:none;text-underline-offset:3px;
  transition:color .16s var(--ease),text-decoration-color .16s var(--ease)}
a:hover{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px}
img,picture{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent-hot);outline-offset:3px}
.aura-style{cursor:pointer}

.winau-container{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}

/* ─────────────── 4. Типографика ─────────────── */
h1,h2,h3,h4,strong{font-family:var(--display)}
.winau-page-title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(52px,8.4vw,104px);
  line-height:.88;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--paper);
  margin:0 0 28px;
  text-wrap:balance;
}
.winau-intro{font-size:19px;line-height:1.72;color:var(--paper-2);max-width:62ch}
.winau-intro p{margin-bottom:18px}
.winau-intro p:last-child{margin-bottom:0}
.winau-slogan{
  font-family:var(--display);font-weight:200;font-size:clamp(22px,2.6vw,32px);
  line-height:1.14;letter-spacing:-.02em;color:var(--accent-hot);
  margin:0 0 26px;max-width:26ch;text-align:left;font-style:normal;
}
.author-byline-wrap{
  margin-top:26px;padding-top:14px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--paper-3);
}
.author-byline{color:var(--paper-2)}
.winau-last-updated{color:var(--paper-3)}

/* ─────────────── 5. Шапка: тихая, логотип крупный ─────────────── */
.winau-header{
  grid-area:header;
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--pad);
  background:rgba(8,7,15,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.logo-link{display:flex;align-items:center;flex:0 0 auto}
/* у <img> логотипа в разметке стоит height="40" — max-height его не поднимет,
   поэтому высота задаётся явно, ширина отпускается в auto */
.winau-header .logo-link img{height:64px;width:auto}
.header-nav{display:flex;align-items:center;gap:4px}
.header-nav a,.header-nav div{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--mono);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-3);padding:10px 12px;border-radius:0;
  border-bottom:2px solid transparent;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.header-nav a:hover,.header-nav div:hover{color:var(--paper);text-decoration:none}
.header-nav a.active{color:var(--paper);border-bottom-color:var(--accent)}
.header-nav i{font-size:12px;opacity:.7}
.header-actions{display:flex;align-items:center;gap:10px}
.btn-login,.btn-register,.winau-btn,.btn-view-all-games,.winau-sticky-bar-btn,
.mobile-menu-btn{
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  border:0;border-radius:var(--r);transition:all .18s var(--ease);
}
.btn-login{padding:12px 18px;background:transparent;color:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hair-strong)}
.btn-login:hover{color:var(--paper);box-shadow:inset 0 0 0 1px var(--accent-hot)}
.btn-register{padding:12px 20px;background:var(--accent);color:#0a0714}
.btn-register:hover{background:var(--accent-hot);color:#0a0714}
.btn-search{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--paper-2);border-radius:var(--r-in);
  box-shadow:inset 0 0 0 1px var(--hair);transition:all .18s var(--ease);
}
.btn-search:hover{color:var(--paper);box-shadow:inset 0 0 0 1px var(--accent-hot)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:10px}
.hamburger span{width:24px;height:2px;background:var(--paper);transition:all .18s var(--ease)}

/* ─────────────── 6. Рельс иконок слева ─────────────── */
.sidebar{
  grid-area:sidebar;width:72px;padding:22px 0;
  position:sticky;top:92px;height:calc(100vh - 92px);
  background:transparent;border-right:1px solid var(--hair);
}
.sidebar-item{
  display:flex;align-items:center;justify-content:center;
  height:48px;margin:2px 12px;cursor:pointer;border-radius:var(--r-in);
  color:var(--paper-3);position:relative;transition:all .18s var(--ease);
}
.sidebar-item:hover{color:var(--paper);background:var(--ink-2)}
.sidebar-item.active{color:var(--accent-hot);box-shadow:inset 0 0 0 1px var(--accent-deep)}
.sidebar-item .badge{
  position:absolute;top:9px;right:9px;width:6px;height:6px;
  background:var(--accent);border-radius:50%;
}
.winau-article{grid-area:content;padding:clamp(40px,5vw,76px) 0 0;min-width:0}

/* ─────────────── 7. РИСК: H1 разрывает текстовую колонку ─────────────── */
@media (min-width:1080px){
  .winau-article > .winau-container{
    display:grid;
    grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:var(--gap-rail);
    align-items:start;
  }
  .winau-article > .winau-container > .winau-page-title{grid-column:1 / -1}
  .winau-article > .winau-container > *:not(.winau-page-title){grid-column:2}
}

/* ─────────────── 8. Hero: полоса во всю ширину области контента ─────────────── */
.winau-hero{margin:clamp(40px,5vw,72px) 0 0;padding:0;background:none}
.winau-hero > .winau-container{max-width:none;padding:0}
.winau-hero-gradient-banner{
  border-radius:0;
  min-height:clamp(360px,58vh,600px);
  display:flex;align-items:flex-end;
  position:relative;overflow:hidden;padding:0;
  background-image:
    linear-gradient(78deg,rgba(8,7,15,.93) 0 26%,rgba(8,7,15,.52) 58%,rgba(8,7,15,.30) 100%),
    url('/images/banner.png');
  background-image:
    linear-gradient(78deg,rgba(8,7,15,.93) 0 26%,rgba(8,7,15,.52) 58%,rgba(8,7,15,.30) 100%),
    image-set(url('/images/banner.avif') type('image/avif'),
              url('/images/banner.webp') type('image/webp'),
              url('/images/banner.png') type('image/png'));
  background-size:cover;background-position:center right;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.winau-hero-gradient-banner::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(42deg,rgba(130,87,250,.07) 0 1px,transparent 1px 9px);
  pointer-events:none;
}
.winau-banner-content{
  position:relative;z-index:1;
  width:min(var(--shell),100%);margin:0 auto;
  padding:clamp(34px,4.6vw,72px) var(--pad);
  text-align:left;
}
.winau-banner-label{
  display:inline-block;background:none;color:var(--accent-hot);
  font-family:var(--mono);font-weight:700;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;
  padding:0 0 10px;margin:0 0 14px;border-bottom:1px solid var(--accent-deep);
  border-radius:0;
}
.winau-banner-title{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(34px,5.6vw,84px);line-height:.94;letter-spacing:-.045em;
  color:var(--paper);margin:0 0 18px;max-width:16ch;
}
.winau-banner-text{
  font-size:16px;line-height:1.66;color:var(--paper-2);
  max-width:58ch;margin:0 0 28px;
}
.winau-btn{display:inline-flex;align-items:center;gap:10px;padding:17px 30px}
.winau-btn-primary{
  background:var(--accent);color:#0a0714;
  box-shadow:0 0 0 0 rgba(130,87,250,0);
}
.winau-btn-primary:hover{
  background:var(--accent-hot);
  box-shadow:0 0 34px -6px rgba(130,87,250,.85);   /* единственное свечение на странице */
}

/* ─────────────── 9. Витрина игр: bento ─────────────── */
.winau-games-section{margin:clamp(48px,6vw,96px) 0}
.games-section-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:-.03em;
  text-transform:uppercase;color:var(--paper);text-align:left;
  margin:0 0 26px;
}
.winau-games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:30px}
.winau-game-card{
  position:relative;overflow:hidden;cursor:pointer;aspect-ratio:3/4;
  background:var(--ink-1);border-radius:var(--r-in);
  transition:transform .2s var(--ease);
}
.winau-game-card:hover{transform:translateY(-2px)}
.winau-game-card img{width:100%;height:100%;object-fit:cover}
.winau-game-overlay{
  position:absolute;inset:auto 0 0 0;
  background:linear-gradient(transparent,rgba(8,7,15,.92));
  padding:14px;display:flex;flex-direction:column;gap:8px;
  opacity:0;transition:opacity .2s var(--ease);
}
.winau-game-card:hover .winau-game-overlay{opacity:1}
.winau-game-title{
  font-family:var(--display);font-weight:800;font-size:13px;
  line-height:1.15;color:var(--paper);
}
.winau-play-btn{
  align-self:flex-start;background:var(--accent);color:#0a0714;
  font-family:var(--mono);font-weight:700;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:0;
}
.btn-view-all-games{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:max-content;margin:0;padding:16px 28px;
  background:transparent;color:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hair-strong);
}
.btn-view-all-games:hover{box-shadow:inset 0 0 0 1px var(--accent-hot)}

@media (min-width:560px){.winau-games-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1080px){
  .winau-games-grid{grid-template-columns:repeat(6,1fr);gap:10px}
  .winau-game-card:nth-child(12n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .winau-game-card:nth-child(12n+8){grid-column:span 2;aspect-ratio:3/2}
  .winau-game-card:nth-child(12n+1) .winau-game-title{font-size:22px}
}

/* ─────────────── 10. Секции: боковой рельс + ритм ─────────────── */
.winau-content-section{
  margin:0;padding:clamp(40px,5vw,80px) 0;
  border:0;border-top:1px solid var(--hair);box-shadow:none;
}
.winau-content-section:nth-of-type(even){
  background:linear-gradient(180deg,rgba(25,20,48,.46),rgba(16,13,28,0));
  padding-block:clamp(52px,6.4vw,104px);
}
.winau-content-section h2{
  font-family:var(--display);font-weight:200;
  font-size:clamp(26px,2.9vw,38px);line-height:1.04;letter-spacing:-.022em;
  color:var(--paper);margin:0 0 26px;text-wrap:balance;
}
.winau-content-section h3{
  font-family:var(--display);font-weight:800;
  font-size:clamp(19px,1.7vw,24px);line-height:1.14;letter-spacing:-.018em;
  color:var(--paper);margin:36px 0 12px;
}
.winau-content-section h4{font-family:var(--display);font-weight:800;font-size:17px}
.winau-content-section p{color:var(--paper-2);margin:0 0 18px;max-width:62ch}
.winau-content-section ul{color:var(--paper-2);margin:0 0 20px;padding-left:0;
  list-style:none;max-width:62ch}
.winau-content-section li{
  position:relative;padding-left:22px;margin-bottom:9px;line-height:1.6;
}
.winau-content-section li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--accent);
}
.winau-content-section strong{font-weight:700;color:var(--paper)}

@media (min-width:1080px){
  .winau-content-section > .winau-container{
    display:grid;
    grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:var(--gap-rail);
    align-items:start;
  }
  .winau-content-section > .winau-container > h2{
    grid-column:1;grid-row:1 / span 60;
    position:sticky;top:118px;
    margin:0;padding-left:18px;
    border-left:1px solid var(--accent);
  }
  .winau-content-section > .winau-container > *:not(h2){grid-column:2}
}

/* ─────────────── 11. Скриншот сайта ─────────────── */
.winau-site-screenshot-wrap{display:block;margin:0 auto clamp(40px,5vw,72px);
  max-width:var(--shell)}
.winau-site-screenshot{
  width:100%;height:auto;border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--hair);
}

/* ─────────────── 12. Таблицы: печатный регистр ─────────────── */
.table-wrapper{overflow-x:auto;margin:22px 0 26px}
table{width:100%;border-collapse:collapse;background:transparent;border-radius:0}
.winau-quick-table th,table th{
  background:transparent;color:var(--paper-3);text-align:left;
  font-family:var(--mono);font-weight:700;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;
  padding:0 16px 10px 0;border-bottom:2px solid var(--hair-strong);
}
.winau-quick-table td,table td{
  padding:13px 16px 13px 0;color:var(--paper-2);
  border-bottom:1px solid var(--hair);vertical-align:top;font-size:16px;
}
.winau-quick-table tr td:first-child,table tr td:first-child{
  color:var(--paper);width:34%;font-weight:600;
}
.winau-quick-table tr:last-child td{border-bottom:0}

/* ─────────────── 13. Провайдеры и языки: контур вместо заливки ─────────────── */
.winau-provider-grid,.winau-lang-grid{
  display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 26px;
}
.winau-provider-tag,.winau-lang-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:var(--r-in);
  box-shadow:inset 0 0 0 1px var(--hair);
  font-family:var(--mono);font-weight:700;font-size:11px;
  letter-spacing:.07em;color:var(--paper-2);
}
.winau-lang-tag i{color:var(--accent);font-size:10px}

.winau-restricted-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:0 22px;margin:14px 0 26px;
}
.winau-restricted-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 0;border-bottom:1px solid var(--hair);
  font-size:14px;color:var(--paper-2);
}
.winau-restricted-item i{color:var(--paper-3);font-size:10px}

/* ─────────────── 14. Числа: типографический блок вместо карточки ─────────────── */
.winau-stats-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;margin:24px 0 30px;border-top:1px solid var(--hair-strong);
}
.winau-stat-card{
  background:transparent;border:0;border-radius:0;
  border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);
  padding:22px 20px 26px 0;
}
.winau-stat-card:last-child{border-right:0}
.winau-stat-icon{
  font-size:11px;color:var(--paper-3);margin:0 0 12px;
}
.winau-stat-value{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(44px,6.6vw,96px);line-height:.86;letter-spacing:-.06em;
  color:var(--paper);margin:0 0 12px;
}
.winau-stat-label{
  font-family:var(--mono);font-weight:700;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper-3);
}
@media (min-width:900px){
  .winau-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .winau-stat-card{padding-right:24px}
}

/* ─────────────── 15. Врезка: линия вместо плашки ─────────────── */
.winau-info-box{
  display:flex;gap:16px;align-items:flex-start;
  background:transparent;border:0;border-left:2px solid var(--accent);
  border-radius:0;padding:4px 0 4px 22px;margin:26px 0 8px;max-width:66ch;
}
.winau-info-icon{color:var(--accent-hot);font-size:14px;padding-top:4px;flex:0 0 auto}
.winau-info-content{color:var(--paper-2);font-size:16px;line-height:1.66}
.winau-info-content strong{color:var(--paper)}
.winau-info-warning{border-left-color:var(--accent)}

/* ─────────────── 16. Безопасность: список, не бейджи ─────────────── */
.winau-security-grid{
  display:grid;grid-template-columns:1fr;gap:0;margin:22px 0 8px;
  border-top:1px solid var(--hair-strong);
}
.winau-security-badge{
  display:grid;grid-template-columns:34px minmax(0,1fr);
  column-gap:16px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--hair);
  background:transparent;border-radius:0;
}
.winau-security-icon{
  grid-row:1 / span 2;font-size:15px;color:var(--accent);padding-top:2px;
}
.winau-security-badge-title{
  font-family:var(--display);font-weight:800;font-size:17px;
  line-height:1.2;color:var(--paper);margin:0 0 5px;
}
.winau-security-badge-text{font-size:15px;color:var(--paper-2);line-height:1.55}
@media (min-width:820px){
  .winau-security-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}
}

/* ─────────────── 17. Шаги: настоящая последовательность ─────────────── */
.winau-timeline{display:grid;gap:0;margin:20px 0 26px;
  border-top:1px solid var(--hair-strong)}
.winau-timeline-item{
  display:grid;grid-template-columns:64px minmax(0,1fr);
  column-gap:20px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--hair);
}
.winau-timeline-number{
  font-family:var(--mono);font-weight:700;font-size:30px;line-height:.9;
  letter-spacing:-.05em;color:var(--accent);
  background:none;border-radius:0;width:auto;height:auto;
  display:block;text-align:left;
}
.winau-timeline-content{min-width:0}
.winau-timeline-title{
  font-family:var(--display);font-weight:800;font-size:17px;
  line-height:1.2;color:var(--paper);margin:0 0 5px;
}
.winau-timeline-text{font-size:15px;color:var(--paper-2);margin:0;line-height:1.55}

/* ─────────────── 18. FAQ ─────────────── */
.winau-faq-list{border-top:1px solid var(--hair-strong);margin:22px 0 0}
.winau-faq-item{border-bottom:1px solid var(--hair)}
.winau-faq-question{
  cursor:pointer;position:relative;
  padding:20px 44px 20px 0;
  font-family:var(--display);font-weight:800;
  font-size:clamp(16px,1.4vw,19px);line-height:1.28;letter-spacing:-.012em;
  color:var(--paper);transition:color .16s var(--ease);
}
.winau-faq-question:hover{color:var(--accent-hot)}
.winau-faq-question::after{
  content:'+';position:absolute;right:6px;top:18px;
  font-family:var(--mono);font-weight:700;font-size:19px;color:var(--accent);
  transition:transform .2s var(--ease);
}
.winau-faq-item.open .winau-faq-question::after{content:'+';transform:rotate(45deg)}
.winau-faq-answer{
  /* приём 0fr->1fr здесь не раскрывается: единственный элемент строки с
     overflow:hidden даёт вклад min-content = 0, и 1fr резолвится в высоту
     паддинга (замерено: ans_rows 22px при scrollHeight 103px).
     Потолок 800px взят с запасом: самый длинный ответ 161px на 910px колонке */
  overflow:hidden;max-height:0;
  transition:max-height .3s var(--ease);
}
.winau-faq-item.open .winau-faq-answer{max-height:800px}
.winau-faq-answer > div{
  color:var(--paper-2);font-size:16px;line-height:1.68;max-width:68ch;
  padding:0 0 22px;
}

/* ─────────────── 19. Подвал ─────────────── */
.winau-footer{
  grid-area:footer;
  background:var(--ink-1);
  border-top:1px solid var(--hair-strong);
  padding:clamp(44px,5vw,76px) 0 30px;margin-top:clamp(40px,5vw,72px);
}
.winau-footer-top{padding-bottom:30px;border-bottom:1px solid var(--hair)}
.winau-footer .logo-link img{height:56px;width:auto}
.winau-footer-cols{
  display:grid;grid-template-columns:1fr;gap:34px;padding:34px 0;
}
.footer-col strong{
  display:block;font-family:var(--mono);font-weight:700;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--paper-3);
  margin:0 0 14px;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:9px;font-size:15px}
.footer-col li a,.footer-col li div{color:var(--paper-2);cursor:pointer;
  transition:color .16s var(--ease)}
.footer-col li a:hover,.footer-col li div:hover{color:var(--accent-hot);text-decoration:none}
.winau-footer-disclaimer{
  padding:22px 0;border-top:1px solid var(--hair);
  font-size:14px;color:var(--paper-3);line-height:1.6;max-width:88ch;
}
.winau-footer-bottom{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:18px 0;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--paper-3);
}
.winau-footer-badges{display:flex;align-items:center;gap:12px}
.winau-age-badge{
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.06em;
  color:var(--paper);padding:5px 9px;border-radius:var(--r-in);
  box-shadow:inset 0 0 0 1px var(--hair-strong);
}
.winau-ssl-badge{display:inline-flex;align-items:center;gap:6px;color:var(--paper-3)}
.winau-ssl-badge i{color:var(--accent)}
.footer-affiliate-disclosure{line-height:1.62}
.footer-affiliate-disclosure strong{font-family:var(--mono);letter-spacing:.06em}
@media (min-width:790px){
  .winau-footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
}

/* ─────────────── 20. Прогресс, sticky-бар, тост ─────────────── */
#winau-progress-bar{
  grid-area:progress;position:fixed;top:0;left:0;height:2px;width:0;
  background:var(--accent);z-index:9999;transition:width .1s linear;
}
#winau-sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1200;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px var(--pad);
  background:rgba(16,13,28,.95);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--accent-deep);
  transition:transform .3s var(--ease);
}
.winau-sticky-bonus-text{
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.05em;color:var(--paper);
}
.winau-sticky-bar-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.winau-sticky-bar-btn{padding:11px 20px;background:var(--accent);color:#0a0714}
.winau-sticky-bar-btn:hover{background:var(--accent-hot)}
.winau-sticky-bar-close{
  background:none;border:0;cursor:pointer;color:var(--paper-3);
  font-size:15px;padding:6px 8px;line-height:1;
}
.winau-sticky-bar-close:hover{color:var(--paper)}
#winau-toast{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%);
  z-index:1300;padding:0;font-family:var(--mono);font-size:12px;color:var(--paper);
}

/* ─────────────── 21. Мобильное меню ─────────────── */
.mobile-menu-overlay{
  position:fixed;inset:0;background:rgba(4,3,9,.82);z-index:1400;
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s;
}
.mobile-menu-overlay.active{opacity:1;visibility:visible}
.mobile-menu{
  /* off-canvas через отрицательный right, а не transform: transform у fixed-узла
     расширяет scrollWidth документа до 2144px при вьюпорте 1440 (замерено) */
  position:fixed;top:0;bottom:0;width:min(88vw,380px);right:-380px;
  z-index:1500;
  background:var(--ink-1);border-left:1px solid var(--hair-strong);
  transition:right .26s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;
}
.mobile-menu.active{right:0}
.mobile-menu-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--hair);
}
.mobile-menu .logo-link img{height:44px;width:auto}
.mobile-menu-close{
  background:none;border:0;cursor:pointer;color:var(--paper-2);
  font-size:20px;line-height:1;padding:6px 8px;
}
.mobile-menu-close:hover{color:var(--paper)}
.mobile-menu-body{padding:20px}
.mobile-menu-auth{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.mobile-menu-btn{
  display:flex;align-items:center;justify-content:center;
  padding:14px 12px;background:var(--accent);color:#0a0714;
}
.mobile-menu-btn-secondary{
  background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px var(--hair-strong);
}
.mobile-menu-item{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  padding:15px 0;border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2);
}
.mobile-menu-item:hover{color:var(--paper)}
.mobile-menu-item i{color:var(--accent);font-size:12px;width:16px}
.mobile-menu-footer{padding:20px;margin-top:auto;border-top:1px solid var(--hair);
  font-size:13px;color:var(--paper-3);line-height:1.6}

/* ─────────────── 22. Движение ─────────────── */
/* reveal только сдвигом, без opacity: в фоновой вкладке IntersectionObserver
   заморожен, и блоки с opacity:0 попали бы на скриншот невидимыми */
.winau-reveal{transform:translateY(16px);transition:transform .5s var(--ease)}
.winau-visible{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  body{background-attachment:scroll,scroll}
  .winau-reveal{transform:none}
}

/* ─────────────── 23. Адаптив ─────────────── */
@media (max-width:1320px){
  :root{--rail:230px}
}
@media (max-width:1079px){
  .winau-content-section > .winau-container > h2{position:static}
}
@media (max-width:790px){
  body{font-size:17px}
  .hamburger{display:flex}
  .header-nav,.btn-login,.btn-register,.btn-search{display:none}
  .sidebar{display:none}
  body{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"progress" "header" "content" "footer"}
  .winau-header{padding:11px 16px}
  .winau-header .logo-link img{height:46px}
  .winau-footer .logo-link img{height:44px}
  .winau-hero-gradient-banner{min-height:auto;align-items:stretch}
  .winau-banner-content{padding:34px 18px 30px}
  .winau-intro{font-size:17px}
  .winau-security-badge{grid-template-columns:26px minmax(0,1fr);column-gap:12px}
  .winau-timeline-item{grid-template-columns:44px minmax(0,1fr);column-gap:14px}
  .winau-restricted-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 16px}
}
@media (max-width:560px){
  .winau-stats-grid{grid-template-columns:1fr}
  .winau-stat-card{border-right:0;padding-right:0}
  .winau-page-title{font-size:clamp(38px,11vw,52px)}
  .winau-games-grid{grid-template-columns:repeat(2,1fr)}
  .mobile-menu-auth{grid-template-columns:1fr}
  .winau-footer-bottom{flex-direction:column;align-items:flex-start}
  .winau-sticky-bonus-text{font-size:11px}
}

/* Полоса 790-899px: горизонтальное меню ещё показано, но шапка уже не вмещает
   кнопку «Registrieren» — она уезжала за правый край и обрезалась (на исходной
   версии сайта то же самое, там обрез начинался ещё раньше). Сворачиваем в
   бургер само меню, кнопки оставляем: обрезанная кнопка хуже спрятанной. */
@media (max-width:900px){
  .header-nav{display:none;}
  .hamburger{display:flex;}
}

/* Правка владельца 23.08: в плитках игр под частью картинок оставалась пустота
   (у cash-of-cleopatra 66px из 265). У <img> проставлено aspect-ratio 200/267 из
   атрибутов width/height, поэтому высота считалась от соотношения, а не от ячейки.
   height:100% не помогает: высота плитки задана через aspect-ratio самой карточки.
   Кладём картинку абсолютом на плитку. Важно: <picture> обязан остаться
   непозиционированным, иначе он становится containing block нулевой высоты. */
.winau-game-card{ position:relative; }
.winau-game-card picture{ position:static; display:block; }
.winau-game-card img{
  position:absolute; inset:0;
  width:100%; height:100%; aspect-ratio:auto;
  object-fit:cover; object-position:center; display:block;
}
.winau-game-card > *:not(picture):not(img){ position:relative; z-index:1; }

/* Раскатка 23.08: блок со скриншотом сайта схлопывался в ноль. Причина та же,
   что на IvyBet: ширина считалась от содержимого, а содержимое — ленивая
   картинка width:100%, то есть нулевая до загрузки; из-за нулевой площади она
   не попадала во вьюпорт и не загружалась вовсе. Явная ширина рвёт круг. */
.winau-site-screenshot-wrap{ width:100%; display:block; }
.winau-site-screenshot{ width:100%; height:auto; display:block; }


/* ---------- иконки: подрезанный Font Awesome вместо cdnjs (правка 23.08.2026) ----------
   Было: 156 КБ с внешнего хоста. Стало: 33 глифа solid (4.2 КБ) + календарь
   regular (584 Б), самохостинг. Классы в разметке те же, HTML не менялся. */
@font-face{
  font-family:'FA6Solid';
  src:url('/fonts/fa-solid-sub.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'FA6Regular';
  src:url('/fonts/fa-regular-sub.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
.fa-solid{
  font-family:'FA6Solid';font-weight:900;font-style:normal;
  display:inline-block;line-height:1;text-rendering:auto;
  -webkit-font-smoothing:antialiased;
}
.fa-regular{
  font-family:'FA6Regular';font-weight:400;font-style:normal;
  display:inline-block;line-height:1;text-rendering:auto;
  -webkit-font-smoothing:antialiased;
}
.fa-solid::before,.fa-regular::before{content:var(--fa)}
.fa-arrow-right{--fa:"\f061"}
.fa-ban{--fa:"\f05e"}
.fa-bolt{--fa:"\f0e7"}
.fa-calendar{--fa:"\f133"}
.fa-check{--fa:"\f00c"}
.fa-circle-check{--fa:"\f058"}
.fa-circle-info{--fa:"\f05a"}
.fa-clock{--fa:"\f017"}
.fa-clock-rotate-left{--fa:"\f1da"}
.fa-coins{--fa:"\f51e"}
.fa-credit-card{--fa:"\f09d"}
.fa-crown{--fa:"\f521"}
.fa-dice{--fa:"\f522"}
.fa-fire{--fa:"\f06d"}
.fa-futbol{--fa:"\f1e3"}
.fa-gamepad{--fa:"\f11b"}
.fa-gem{--fa:"\f3a5"}
.fa-gift{--fa:"\f06b"}
.fa-globe{--fa:"\f0ac"}
.fa-headset{--fa:"\f590"}
.fa-key{--fa:"\f084"}
.fa-location-dot{--fa:"\f3c5"}
.fa-lock{--fa:"\f023"}
.fa-magnifying-glass{--fa:"\f002"}
.fa-money-bill-transfer{--fa:"\e528"}
.fa-percent{--fa:"\25"}
.fa-rotate{--fa:"\f2f1"}
.fa-shield-halved{--fa:"\f3ed"}
.fa-star{--fa:"\f005"}
.fa-tower-broadcast{--fa:"\f519"}
.fa-triangle-exclamation{--fa:"\f071"}
.fa-user-plus{--fa:"\f234"}
.fa-xmark{--fa:"\f00d"}