:root{
  --bg:#0B0F1A;
  --panel:#121829;
  --panel2:#1C2438;
  --border:#2A3552;

  --text:#EAF2FF;
  --text2:#B8C4DA;
  --muted:#7E8AA6;

  --zeus:#1EA7FF;
  --zeusDeep:#0B3D91;
  --lightning:#7DF9FF;

  --hades:#E63B2E;
  --lava:#FF7A18;
  --ember:#FFC247;

  --gold:#F4C542;
  --bronze:#B8892E;

  --radius:18px;
  --radiusSm:12px;

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadowSoft: 0 14px 30px rgba(0,0,0,.35);

  --headerBg: linear-gradient(90deg, #061A3A 0%, #0B3D91 35%, #2A0E16 65%, #7A0D0D 100%);
  --headerAccent: linear-gradient(90deg, #7DF9FF, #1EA7FF, #F4C542, #FF7A18, #E63B2E);

  --secSplit: linear-gradient(90deg, rgba(6,26,58,1) 0%, rgba(11,61,145,1) 45%, rgba(36,0,10,1) 55%, rgba(122,13,13,1) 100%);
  --secAlt: linear-gradient(180deg, #0B0F1A 0%, #121829 100%);
  --secOlympus: linear-gradient(180deg, #061A3A 0%, #0B3D91 55%, #0B6BD6 100%);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x: hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; cursor:pointer;}
button{ font-family:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.container{
  width:min(1240px, calc(100% - 48px));
  margin:0 auto;
}

.page{
  padding-top: 92px;
}
.author-updated{
    margin-top:18px;
    opacity: 0.5;
}
.btn-icn{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
}

.btn-icn svg{
  width:18px;
  height:18px;
  display:block;
}

/* чтобы текст не прыгал */
.btn-txt{
  display:inline-block;
  line-height:1;
}

/* =========================
   HEADER
   ========================= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:var(--headerBg);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.site-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px;
  background:var(--headerAccent);
  opacity:.95;
}

.header-inner{
  display:flex;
  align-items:center;
  gap:18px;
  padding:10px 0;
}

.brand{ display:flex; align-items:center; }
.brand-logo{
  width:300px; height:90px;
  object-fit:contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.nav{
  display:flex;
  gap:14px;
  align-items:center;
  margin-left: 6px;
  flex:1;
}

.nav-link{
  padding:10px 10px;
  border-radius:12px;
  color:var(--text2);
  font-weight:600;
  letter-spacing:.2px;
  transition: transform .15s ease, color .15s ease, background .15s ease;
}
.nav-link:hover{
  color:var(--text);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* =========================
   LANG SWITCHER (CUSTOM DROPDOWN)
   ========================= */
.lang{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.lang-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding:10px 38px 10px 12px;
  font-weight:900;
  letter-spacing:.35px;
  cursor:pointer;
  outline:none;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
    rgba(0,0,0,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  transition: border-color .15s ease, transform .15s ease, filter .15s ease;
  position:relative;
}

.lang-btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  border-color: rgba(125,249,255,.28);
}

.lang-btn:focus{
  border-color: rgba(125,249,255,.45);
  box-shadow: 0 0 0 3px rgba(125,249,255,.18), 0 10px 22px rgba(0,0,0,.28);
}

.lang-btn-caret{
  position:absolute;
  right:12px;
  top:50%;
  transform: translateY(-50%);
  width:14px;
  height:14px;
  pointer-events:none;
  opacity:.95;
  background: linear-gradient(180deg, var(--lightning), var(--zeus));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

.lang-menu{
  position:absolute;
  top: calc(100% + 10px);
  right:0;
  width: 92px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,16,32,.82);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  padding: 8px;
  display:none;
  z-index: 1102;
}

.lang.open .lang-menu{ display:block; }

.lang-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
  transition: filter .15s ease, transform .15s ease, background .15s ease;
  margin-bottom: 5px;
}
.lang-item:hover{
  background: rgba(255,255,255,.08);
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* CTA Play Now */
.cta-play{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 14px;
  border-radius: 14px;
  font-weight:900;
  letter-spacing:.2px;
  background: linear-gradient(180deg, var(--lava), var(--hades));
  color:#0B0F1A;
  box-shadow: 0 14px 32px rgba(255,122,24,.18);
  border:1px solid rgba(255,255,255,.14);
  transition: transform .15s ease, filter .15s ease;
  white-space: nowrap;
}
.cta-play:hover{ transform: translateY(-1px); filter: brightness(1.05); }

/* =========================
   MOBILE MENU (CSS READY)
   Requires: button .menu-toggle and body.menu-open (added by JS)
   ========================= */
.menu-toggle{
  display:none; /* desktop hidden */
  width:44px;
  height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  cursor:pointer;
  position:relative;
}
.menu-toggle span{
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  background: var(--text);
  transform: translate(-50%,-50%);
  border-radius:999px;
  box-shadow:
    0 -6px 0 rgba(234,242,255,.95),
    0  6px 0 rgba(234,242,255,.95);
}

/* overlay */
.mobile-overlay{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  z-index: 999;
  opacity:0;
  transition: opacity .18s ease;
}
body.menu-open .mobile-overlay{
  display:block;
  opacity:1;
}

/* offcanvas nav */
@media (max-width: 980px){
  .nav{
    position: fixed;
    top:0;
    right:0;
    height:100vh;
    width: min(320px, 86vw);
    background: rgba(10,16,32,.92);
    backdrop-filter: blur(12px);
    border-left: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    padding: 80px 14px 14px;
    display:flex;
    flex-direction: column;
    gap:10px;
    transform: translateX(110%);
    transition: transform .18s ease;
    z-index: 1001;
  }

  body.menu-open .nav{
    transform: translateX(0);
  }

  .nav-link{
    padding: 12px 12px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: var(--text);
    font-weight: 800;
  }
  .nav-link:hover{
    background: rgba(255,255,255,.08);
    transform:none;
  }

  .nav-divider{
    height: 1px;
    background: rgba(255,255,255,.10);
    margin: 8px 0;
    border-radius: 999px;
  }

  .nav-link-cta{
    background: linear-gradient(180deg, rgba(255,122,24,.22), rgba(230,59,46,.18));
    border-color: rgba(255,255,255,.14);
  }
}

/* mobile-only helper */
.nav-mobile-only{ display:none; }
@media (max-width: 980px){
  .nav-mobile-only{ display:inline-flex; }
}

/* =========================
   SECTIONS
   ========================= */
.section{ padding: 84px 0; }
.section-split{ background: var(--secSplit); }
.section-alt{ background: var(--secAlt); }
.section-olympus{ background: var(--secOlympus); }

/* unified centered headings */
.section-head{
  margin: 0 0 22px;
  text-align:center;
}
.section-head--tight{ margin-top: 34px; }

.section-head h2{
  margin:0 0 12px;
  font-size: 32px;
  line-height:1.15;
  letter-spacing:-.4px;
  display:inline-block;
  position:relative;
  padding-bottom: 12px;
}
.section-head h2::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width: min(320px, 78vw);
  height: 3px;
  border-radius: 999px;
  background: var(--headerAccent);
  opacity:.95;
}

.section-head .lead{
  margin:0;
  color:var(--text2);
  max-width: none;
}

.lead{
  margin:0;
  font-size: 18px;
  line-height:1.6;
  color: var(--text2);
  max-width: none;
}

/* =========================
   INTRO HEAD
   ========================= */
.intro-head{
  text-align:center;
  margin-bottom: 10px;
}

.intro-head h1{
  margin:0 0 12px;
  font-size: 44px;
  line-height:1.08;
  letter-spacing:-.6px;
  display:inline-block;
  position:relative;
  padding-bottom: 12px;
}

.intro-head h1::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width: min(360px, 82vw);
  height: 3px;
  border-radius: 999px;
  background: var(--headerAccent);
  opacity:.95;
}

/* =========================
   INTRO GRID (DESKTOP)
   ========================= */
.intro-grid{
  margin-top: 28px;
  display:grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  grid-template-areas: "zeus center hades";
  gap: 18px;
  align-items: stretch;
}

.intro-center{ grid-area:center; display:flex; min-width:0; }
.intro-sides{ display: contents; }
.intro-side--zeus{ grid-area:zeus; }
.intro-side--hades{ grid-area:hades; }

.intro-media{
  width:100%;
  border-radius: var(--radius);
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  min-width:0;
}
.intro-media img{
  width:500px; height:500px;
  max-width:100%;
  max-height: 70vh;
  object-fit: contain;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.35));
  border-radius: 18px;
}

.intro-side{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  box-shadow: var(--shadowSoft);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 14px;
  min-width:0;
}

.intro-side--zeus{
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(125,249,255,.10) inset;
}
.intro-side--hades{
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,122,24,.10) inset;
}

.intro-banner{
  border-radius: var(--radiusSm);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.intro-banner img{ width:100%; height:auto; }

.stat-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.stat-card{
  border-radius: 14px;
  padding: 12px 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  min-width:0;
}
.stat-k{
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 800;
}
.stat-v{
  margin-top: 4px;
  font-size: 22px;
  font-weight: 900;
}

.stat-card--zeus{ box-shadow: 0 0 0 1px rgba(30,167,255,.12) inset; }
.stat-card--hades{ box-shadow: 0 0 0 1px rgba(255,122,24,.12) inset; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
  user-select:none;
  text-align:center;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }

.btn-zeus{
  background: linear-gradient(180deg, var(--lightning), var(--zeus));
  color:#07101e;
  box-shadow: 0 14px 32px rgba(30,167,255,.18);
}

.btn-hades{
  background: linear-gradient(180deg, var(--lava), var(--hades));
  color:#0B0F1A;
  box-shadow: 0 14px 32px rgba(255,122,24,.18);
}

/* =========================
   GAME FRAME
   ========================= */
.game-frame{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  box-shadow: var(--shadow);
}

.game-frame-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  background: rgba(0,0,0,.35);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.dots{ display:flex; gap:6px; }
.dots span{
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
}
.dots span:nth-child(1){ background: rgba(230,59,46,.75); }
.dots span:nth-child(2){ background: rgba(255,194,71,.75); }
.dots span:nth-child(3){ background: rgba(46,230,166,.70); }

.frame-title{
  font-weight: 900;
  letter-spacing:.2px;
  color: var(--text);
  opacity: .95;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.frame-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.frame-link{
  color: var(--text2);
  font-weight: 700;
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.frame-link:hover{ color: var(--text); }

.frame-btn{
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(30,167,255,.14);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
}
.frame-btn:hover{ filter: brightness(1.05); }

.game-frame-body{
  width:100%;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,.25);
}
.game-frame-body iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* =========================
   CASINO CARDS
   ========================= */
.casino-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.casino-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadowSoft);
  padding: 14px;
  display:flex;
  flex-direction:column;
  min-height: 220px;
}

.casino-top{
  display:flex;
  gap:12px;
  align-items:center;
}

.casino-logo{
  width: 46%;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 70px;
}
.casino-logo img{ object-fit:contain; max-height:48px; }

.casino-meta{ width:54%; }
.casino-name{
  font-weight: 900;
  font-size: 18px;
  line-height:1.15;
}
.casino-rating{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap:8px;
}
.rating-num{
  font-weight: 900;
  color: var(--gold);
}

.stars{ display:flex; gap:4px; }
.star{
  width:14px; height:14px;
  display:inline-block;
  background: rgba(255,255,255,.16);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star.on{ background: var(--gold); }
.star.off{ background: rgba(255,255,255,.18); }
.star.half{
  background: linear-gradient(90deg, var(--gold) 50%, rgba(255,255,255,.18) 50%);
}

.casino-bonus{
  margin-top: 14px;
  border-radius: 16px;
  padding: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(244,197,66,.18), rgba(255,122,24,.12));
  text-align: center;
}
.bonus-k{
  font-size: 12px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 900;
}
.bonus-v{
  margin-top: 6px;
  font-weight: 900;
  font-size: 18px;
}

.casino-feature{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--text);
  font-weight: 700;
  justify-content: center;
}

.crown{
  width:18px; height:18px;
  display:inline-block;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--gold), var(--bronze));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M6 46V22l14 12 12-20 12 20 14-12v24c0 6-4 10-10 10H16C10 56 6 52 6 46Zm10 0h32v-7H16v7Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M6 46V22l14 12 12-20 12 20 14-12v24c0 6-4 10-10 10H16C10 56 6 52 6 46Zm10 0h32v-7H16v7Z'/%3E%3C/svg%3E");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
  box-shadow: 0 8px 18px rgba(244,197,66,.18);
}

.casino-cta{
  margin-top:auto;
  padding-top: 14px;
  text-align: center;
}
.casino-cta .btn{
    width:80%;
}
/* =========================
   INFO TABLE
   ========================= */
.info-table{
  display:flex;
  gap: 14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadowSoft);
  padding: 12px;
}

.info-col{
  flex:1;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.info-k{
  color: var(--text2);
  font-weight: 800;
}
.info-v{
  color: var(--text);
  font-weight: 900;
}

.prose{
  margin-top: 18px;
  color: var(--text2);
  line-height: 1.7;
  max-width: none;
}

/* =========================
   FOOTER
   ========================= */
.site-footer{
  background: linear-gradient(180deg, #0B0F1A 0%, #12061A 60%, #24000A 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 36px 0;
}
.footer-note{ color: var(--muted); }

/* =========================
   BACK TO TOP
   ========================= */
.to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1200;
}
.to-top.show{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

/* =========================
   STICKY CTA (BOTTOM)
   ========================= */
.sticky-cta{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(920px, calc(100% - 28px));
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,16,32,.62);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: 14px 14px 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1100;
  display:block;
}
.sticky-cta.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  display:block;
}

.sticky-close{
  position:absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: var(--text);
  cursor:pointer;
}
.sticky-close:hover{ filter: brightness(1.05); }

.sticky-inner{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:center;

}

.sticky-btn{
  flex: 1;
  min-width: 0;
}

body.sticky-open .to-top{
  bottom: 92px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .header-inner{
    flex-wrap: nowrap; /* logo + lang + burger in one row */
    justify-content: space-between;
    padding: 10px 14px;
    gap: 12px;
  }

  .brand-logo{
    width: 190px;
    height: auto;
  }

  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* Hide desktop CTA: moves into offcanvas menu */
  .header-cta{ display:none; }

  .page{ padding-top: 78px; }

  /* casino cards stack */
  .casino-grid{ grid-template-columns: 1fr; }
}

/* =========================
   MOBILE (REBUILD from 0)
   ========================= */
@media (max-width: 860px){
  .container{
    width:100%;
    margin:0;
    padding-left:14px;
    padding-right:14px;
  }

  .section{
    width:100%;
    padding:56px 0;
  }

  .intro-head h1{
    font-size:30px;
    line-height:1.08;
    margin:0 0 10px;
  }
  .intro-head h1::after{
    width:min(300px, 86vw);
  }

  .section-head h2{
    font-size: 26px;
  }
  .section-head h2::after{
    width:min(280px, 84vw);
  }

  .lead{
    font-size:16px;
  }

  /* Intro layout: image full width on top, then 2 panels side-by-side */
  .intro-grid{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "sides";
    gap:14px;
  }

  .intro-center{ grid-area:center; min-width:0; }
  .intro-media{ width:100%; padding:12px; }
  .intro-media img{
    width:100%;
    height:auto;
    max-width:none;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  .intro-sides{
    grid-area:sides;
    display:grid;
    grid-template-columns: 1fr 1fr; /* side-by-side buttons blocks */
    gap:14px;
    width:100%;
    min-width:0;
  }

  .intro-side--zeus,
  .intro-side--hades{
    grid-area:auto !important;
    width:100%;
    min-width:0;
  }

  .intro-side,
  .stat-card,
  .intro-banner{
    min-width:0;
  }

  .game-frame-bar{
    flex-wrap:wrap;
    row-gap:10px;
  }
  .frame-actions{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }

  .info-table{ flex-direction:column; }

  .sticky-inner{
    flex-direction: column;
    gap:10px;
  }
  .sticky-btn{ width:100%; }

  body.sticky-open .to-top{
    bottom:168px;
  }
}

@media (max-width: 520px){
  .intro-sides{ grid-template-columns: 1fr; }
}
/* =========================
   INFO: INTRO + PAYTABLE + PAYOUTS
   ========================= */
.prose-info{
  margin-top: 18px;
  display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.prose-intro{
  font-size: 18px;
  line-height: 1.75;
}

.muted-note{
  display:inline-block;
  margin-left: 6px;
  color: var(--muted);
  font-weight: 600;
}

/* Paytable figure */
.paytable{
  margin: 18px 0 0;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadowSoft);
  overflow:hidden;
}

.paytable-btn{
  width:100%;
  display:block;
  padding:0;
  border:0;
  background: transparent;
  cursor: zoom-in;
  position:relative;
}

.paytable-img{
  width:100%;
  height:auto;
  display:block;
}

.paytable-zoom{
  position:absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,16,32,.62);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.paytable-cap{
  padding: 12px 14px 14px;
  color: var(--text2);
  line-height: 1.6;
}

/* Payouts table (div-table style) */
.payouts{
  margin-top: 18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadowSoft);
  padding: 14px;
}

.payouts-title{
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: .2px;
}

.payouts-table{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.payouts-row{
  display:grid;
  grid-template-columns: 1.4fr .9fr .9fr .9fr;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.payouts-head{
  background: linear-gradient(180deg, rgba(125,249,255,.10), rgba(30,167,255,.06));
  border-color: rgba(125,249,255,.18);
}

.payouts-cell{
  min-width:0;
  color: var(--text);
  font-weight: 800;
}

.payouts-head .payouts-cell{
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: 12px;
  color: var(--text2);
  font-weight: 900;
}

.payouts-note{
  margin: 12px 0 0;
  color: var(--text2);
  line-height: 1.7;
}

/* Mobile: make payouts table readable */
@media (max-width: 860px){
  .payouts-row{
    grid-template-columns: 1.2fr .8fr .8fr .8fr;
    font-size: 14px;
  }
  .prose-info{
    grid-template-columns: 1fr;
}
}

/* =========================
   LIGHTBOX
   ========================= */
.lightbox{
  position: fixed;
  inset:0;
  z-index: 2000;
  display:none;
}

.lightbox.open{
  display:block;
}

.lightbox-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}

.lightbox-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(1100px, calc(100% - 26px));
  max-height: calc(100% - 26px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,16,32,.82);
  box-shadow: 0 24px 80px rgba(0,0,0,.65);
  overflow:hidden;
}

.lightbox-img{
  width:100%;
  height:auto;
  display:block;
  max-height: calc(100vh - 26px);
  object-fit: contain;
  background: rgba(0,0,0,.25);
}

.lightbox-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: var(--text);
  cursor:pointer;
  z-index: 1;
}
.lightbox-close:hover{ filter: brightness(1.05); }
/* =========================
   WHAT TO KNOW (v2: icon+title on top, equal text, droplet head)
   ========================= */

.know2-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Card base */
.know2-card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadowSoft);
  overflow:hidden;

  /* Keeps content blocks consistent */
  display:grid;
  grid-template-rows: auto 1fr;
  min-width:0;
}

/* Head area (highlighted) */
.know2-head{
  position:relative;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);

  display:grid;
  grid-template-columns: 1fr;
  justify-items:center;
  text-align:center;
  gap: 10px;
}

/* "Droplet" glossy overlay */
.know2-head::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    radial-gradient(90% 90% at 80% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 58%);
  opacity:.85;
  pointer-events:none;
}

/* subtle top accent bar */
.know2-head::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: var(--headerAccent);
  opacity:.95;
}

/* Icon */
.know2-icon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  position:relative;
  z-index:1;
}

.know2-icon svg{
  width: 28px;
  height: 28px;
  color: var(--text);
}

/* Title */
.know2-title{
  margin:0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing:.25px;
  position:relative;
  z-index:1;
}

/* Small badge under title */
.know2-chip{
  position:relative;
  z-index:1;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

/* Body text area */
.know2-body{
  padding: 14px 16px 16px;
  display:flex;
}

.know2-text{
  margin:0;
  color: var(--text2);
  line-height: 1.7;

  /* visually equal lines: clamp to same count */
  display: -webkit-box;
  -webkit-line-clamp: 5;   /* equal number of lines on desktop */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Theme variants */
.know2-card--zeus .know2-head{
  background:
    linear-gradient(180deg, rgba(125,249,255,.14), rgba(30,167,255,.06)),
    rgba(0,0,0,.12);
}
.know2-card--zeus .know2-icon{
  background: linear-gradient(180deg, rgba(125,249,255,.28), rgba(30,167,255,.14));
  border-color: rgba(125,249,255,.20);
}
.know2-card--zeus .know2-chip{
  border-color: rgba(125,249,255,.20);
  background: rgba(30,167,255,.14);
}

.know2-card--hades .know2-head{
  background:
    linear-gradient(180deg, rgba(255,194,71,.14), rgba(255,122,24,.06)),
    rgba(0,0,0,.12);
}
.know2-card--hades .know2-icon{
  background: linear-gradient(180deg, rgba(255,194,71,.22), rgba(255,122,24,.14));
  border-color: rgba(255,122,24,.22);
}
.know2-card--hades .know2-chip{
  border-color: rgba(255,122,24,.22);
  background: rgba(255,122,24,.12);
}

.know2-card--mix .know2-head{
  background:
    linear-gradient(180deg, rgba(244,197,66,.14), rgba(255,122,24,.05)),
    rgba(0,0,0,.12);
}
.know2-card--mix .know2-icon{
  background: linear-gradient(180deg, rgba(244,197,66,.22), rgba(255,122,24,.10));
  border-color: rgba(244,197,66,.22);
}
.know2-card--mix .know2-chip{
  border-color: rgba(244,197,66,.22);
  background: rgba(244,197,66,.10);
}

/* Hover (desktop only feel) */
@media (hover:hover){
  .know2-card{
    transition: transform .15s ease, filter .15s ease;
  }
  .know2-card:hover{
    transform: translateY(-2px);
    filter: brightness(1.03);
  }
}

/* Responsive */
@media (max-width: 980px){
  .know2-grid{
    grid-template-columns: 1fr;
  }
  .know2-text{
    -webkit-line-clamp: 6; /* a bit more room on mobile */
  }
}
/* =========================
   MEDIA SECTION (VIDEO + SLIDER) - OLYMPUS STYLE
   ========================= */

.media-video{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadow);
}

.media-video-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  background: rgba(0,0,0,.35);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.media-video-body{
  width:100%;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,.25);
}

.media-yt{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Slider wrapper */
.media-slider{
  margin-top: 18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadowSoft);
  padding: 14px;
}

.media-slider-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}

.media-slider-title{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}

.media-slider-controls{
  display:flex;
  gap:10px;
  align-items:center;
}

.media-arrow{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.media-arrow:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.media-arrow:disabled{
  opacity: .35;
  cursor: default;
  transform:none;
  filter:none;
}

/* Viewport */
.media-viewport{
  overflow:hidden;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* Track */
.media-track{
  display:flex;
  gap: 12px;
  padding: 12px;
  will-change: transform;
  transform: translateX(0);
  transition: transform .22s ease;
}

/* Slide */
.media-slide{
  flex: 0 0 calc((100% - 24px) / 3); /* 3 visible, 2 gaps (12*2=24) */
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding:0;
  overflow:hidden;
  cursor: zoom-in;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  transition: transform .15s ease, filter .15s ease;
}

.media-slide:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.media-slide img{
  width:100%;
  height: 180px;
  object-fit: cover;
  display:block;
}

/* Hint */
.media-hint{
  margin: 10px 0 0;
  color: var(--text2);
  line-height: 1.6;
  text-align:center;
}

/* Responsive */
@media (max-width: 980px){
  .media-slide img{ height: 170px; }
}

@media (max-width: 860px){
  .media-slider-head{ flex-wrap:wrap; }
  .media-slide{
    flex: 0 0 100%; /* на мобиле 1 в видимой зоне */
  }
  .media-track{
    gap: 10px;
    padding: 10px;
  }
  .media-slide img{ height: 220px; }
}
/* =========================
   FEATURES SECTION (OLYMPUS)
   ========================= */

/* Top 3 cards grid */
.feat-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Card base */
.feat-card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadowSoft);
  overflow:hidden;

  display:grid;
  grid-template-rows: auto 1fr;
  min-width:0;
}

/* Head (highlighted) */
.feat-head{
  position:relative;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);

  display:grid;
  grid-template-columns: 1fr;
  justify-items:center;
  text-align:center;
  gap: 10px;
}

.feat-head::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    radial-gradient(90% 90% at 80% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 58%);
  opacity:.85;
  pointer-events:none;
}

.feat-head::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: var(--headerAccent);
  opacity:.95;
}

.feat-icon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  position:relative;
  z-index:1;
  background: rgba(255,255,255,.04);
}

.feat-icon svg{
  width: 28px;
  height: 28px;
  color: var(--text);
}

.feat-title{
  margin:0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing:.25px;
  position:relative;
  z-index:1;
}

.feat-chip{
  position:relative;
  z-index:1;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

.feat-body{
  padding: 14px 16px 16px;
  display:flex;
}

.feat-text{
  margin:0;
  color: var(--text2);
  line-height: 1.7;

  /* keep all cards visually even */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Theme variants */
.feat-card--zeus .feat-head{
  background: linear-gradient(180deg, rgba(125,249,255,.14), rgba(30,167,255,.06)), rgba(0,0,0,.12);
}
.feat-card--zeus .feat-icon{
  background: linear-gradient(180deg, rgba(125,249,255,.28), rgba(30,167,255,.14));
  border-color: rgba(125,249,255,.20);
}
.feat-card--zeus .feat-chip{
  border-color: rgba(125,249,255,.20);
  background: rgba(30,167,255,.14);
}

.feat-card--hades .feat-head{
  background: linear-gradient(180deg, rgba(255,194,71,.14), rgba(255,122,24,.06)), rgba(0,0,0,.12);
}
.feat-card--hades .feat-icon{
  background: linear-gradient(180deg, rgba(255,194,71,.22), rgba(255,122,24,.14));
  border-color: rgba(255,122,24,.22);
}
.feat-card--hades .feat-chip{
  border-color: rgba(255,122,24,.22);
  background: rgba(255,122,24,.12);
}

.feat-card--mix .feat-head{
  background: linear-gradient(180deg, rgba(244,197,66,.14), rgba(255,122,24,.05)), rgba(0,0,0,.12);
}
.feat-card--mix .feat-icon{
  background: linear-gradient(180deg, rgba(244,197,66,.22), rgba(255,122,24,.10));
  border-color: rgba(244,197,66,.22);
}
.feat-card--mix .feat-chip{
  border-color: rgba(244,197,66,.22);
  background: rgba(244,197,66,.10);
}

/* Hover */
@media (hover:hover){
  .feat-card{
    transition: transform .15s ease, filter .15s ease;
  }
  .feat-card:hover{
    transform: translateY(-2px);
    filter: brightness(1.03);
  }
}

/* Divider */
.feat-divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  margin: 20px 0 18px;
}

/* =========================
   BONUS BUY DIFFERENCES (2 columns)
   ========================= */
.bonus-diff{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadowSoft);
  padding: 14px;
}

.bonus-diff-head{
  text-align:center;
  margin-bottom: 12px;
}

.bonus-diff-title{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing:.2px;
}

.bonus-diff-sub{
  margin: 0;
  color: var(--text2);
  line-height: 1.6;
}

.bonus-diff-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Column card */
.bonus-col{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadowSoft);
  overflow:hidden;
  padding: 12px;
}

.bonus-col--zeus{
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(125,249,255,.10) inset;
}
.bonus-col--hades{
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,122,24,.10) inset;
}

/* Square image with zoom */
.bonus-imgbtn{
  width:100%;
  padding:0;
  border:0;
  background: transparent;
  cursor: zoom-in;
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}

.bonus-img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display:block;
  background: rgba(0,0,0,.22);
}

.bonus-zoom{
  position:absolute;
  left: 10px;
  bottom: 10px;
  padding: 7px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,16,32,.62);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.bonus-title{
  margin: 12px 0 10px;
  font-size: 16px;
  font-weight: 900;
  text-align:center;
}

.bonus-list{
  margin: 0;
  padding-left: 18px;
  color: var(--text2);
  line-height: 1.7;
}

.bonus-list li{
  margin: 8px 0;
}

.bonus-note{
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text2);
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 980px){
  .feat-grid{
    grid-template-columns: 1fr;
  }
  .feat-text{
    -webkit-line-clamp: 6;
  }
  .bonus-diff-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================
   CONCLUSION SECTION
   ========================= */

.final-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.final-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadowSoft);
  overflow:hidden;
  min-width:0;
}

.final-head{
  position:relative;
  padding: 14px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.final-head::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    radial-gradient(90% 90% at 80% 20%, rgba(255,255,255,.10), rgba(255,255,255,0) 58%);
  opacity:.85;
  pointer-events:none;
}

.final-head::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: var(--headerAccent);
  opacity:.95;
}

.final-title{
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing:.2px;
}

.final-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(30,167,255,.14);
  color: var(--text);
  font-weight: 900;
  letter-spacing:.8px;
  text-transform: uppercase;
  font-size: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  position:relative;
  z-index:1;
}

.final-badge--hades{
  background: rgba(255,122,24,.14);
}

.final-list{
  margin: 0;
  padding: 14px 18px 16px 34px;
  color: var(--text2);
  line-height: 1.7;
}

.final-list li{
  margin: 8px 0;
}

/* subtle themed borders */
.final-card--pros{
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(125,249,255,.10) inset;
}
.final-card--cons{
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,122,24,.10) inset;
}

/* Verdict block */
.final-verdict{
  margin-top: 16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadow);
  padding: 14px;
}

.verdict-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.verdict-icon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(244,197,66,.18), rgba(30,167,255,.10));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  flex: 0 0 auto;
}

.verdict-icon svg{
  width: 28px;
  height: 28px;
  color: var(--text);
}

.verdict-meta{
  flex: 1;
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.verdict-title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing:.2px;
  align-self: center;
}

.verdict-score{
  display:flex;
  align-items:baseline;
  gap:6px;
  padding: 8px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  white-space: nowrap;
}

.score-num{
  font-size: 22px;
  font-weight: 900;
  color: var(--gold);
}

.score-max{
  font-size: 14px;
  font-weight: 900;
  color: var(--text2);
}

.verdict-text{
  margin-top: 12px;
  color: var(--text2);
  line-height: 1.75;
}

.verdict-text p{
  margin: 0;
}

/* Responsive */
@media (max-width: 980px){
  .final-grid{
    grid-template-columns: 1fr;
  }
  .verdict-meta{
    flex-direction: column;
    align-items:flex-start;
  }
}
/* =========================
   AUTHOR BLOCK
   ========================= */

.author-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadowSoft);
  padding: 14px;
  overflow:hidden;
}

.author-top{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items:start;
}

.author-avatar{
  border-radius: 18px; /* строго 18px как ты просил */
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.author-avatar img{
  width:100%;
  aspect-ratio: 1 / 1; /* квадрат */
  object-fit: cover;
  display:block;
}

.author-meta{
  min-width:0;
  padding-top: 2px;
}

.author-name{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing:.2px;
}

.author-role{
  color: var(--text2);
  font-weight: 800;
  letter-spacing:.2px;
  margin-bottom: 10px;
}

.author-bio{
  margin: 0 0 12px;
  color: var(--text2);
  line-height: 1.75;
  max-width: none;
}

/* Features row */
.author-feats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.author-feat{
  display:flex;
  gap: 12px;
  align-items:center;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px;
  min-width:0;
}

.author-feat-icn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(244,197,66,.16), rgba(30,167,255,.10));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  flex: 0 0 auto;
}

.author-feat-icn svg{
  width: 22px;
  height: 22px;
  color: var(--text);
}

.author-feat-txt{
  min-width:0;
}

.author-feat-k{
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 900;
}

.author-feat-v{
  margin-top: 4px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 980px){
  .author-top{
    grid-template-columns: 1fr;
  }
  .author-avatar{
    width: min(320px, 100%);
  }
  .author-feats{
    grid-template-columns: 1fr;
  }
  .author-feat-v{
    white-space: normal;
  }
}
/* =========================
   FAQ (Olympus) — smooth accordion
   ========================= */

.faq{
  margin-top: 18px;
}

.faq-list{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadowSoft);
  overflow:hidden;
}

/* Question button */
.faq-q{
  width:100%;
  border:0;
  background: transparent;
  color: var(--text);
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  text-align:left;
}

.faq-q-text{
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.25;
}

.faq-q-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 20px;
  flex: 0 0 auto;
  transition: transform .18s ease, filter .18s ease;
}

.faq-item.open .faq-q-ico{
  transform: rotate(45deg);
  filter: brightness(1.05);
}

/* Answer panel (height is controlled by JS for perfect smoothness) */
.faq-a{
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: height .22s ease, opacity .22s ease, transform .22s ease;
  border-top:1px solid rgba(255,255,255,.10);
}

.faq-a-inner{
  padding: 12px 14px 14px;
  color: var(--text2);
  line-height: 1.75;
}

.faq-item.open .faq-a{
  opacity: 1;
  transform: translateY(0);
}

/* Optional hover */
@media (hover:hover){
  .faq-q:hover .faq-q-ico{ filter: brightness(1.06); }
}
/* =========================
   FOOTER (FINAL)
   ========================= */

.site-footer{
  background: linear-gradient(180deg, #0B0F1A 0%, #12061A 55%, #24000A 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 46px 0 22px;
  position: relative;
  overflow:hidden;
}

.site-footer::before{
  content:"";
  position:absolute;
  inset:-40px -60px auto -60px;
  height: 220px;
  background:
    radial-gradient(50% 80% at 20% 10%, rgba(30,167,255,.18), rgba(30,167,255,0) 60%),
    radial-gradient(50% 80% at 80% 10%, rgba(255,122,24,.18), rgba(255,122,24,0) 60%);
  pointer-events:none;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.25fr .8fr 1.15fr;
  gap: 16px;
  align-items:start;
}

.footer-col{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadowSoft);
  padding: 14px;
  min-width:0;
  height:100%;
}

.footer-logo{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
width:100%;
justify-content: center;
}
.footer-logo img{
  width: 220px;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.footer-title{
  font-weight: 900;
  letter-spacing:.2px;
  margin-bottom: 10px;
  position: relative;
  padding-bottom: 10px;
}

.footer-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 120px;
  height: 3px;
  border-radius: 999px;
  background: var(--headerAccent);
  opacity:.9;
}

.footer-text{
  margin: 0 0 12px;
  color: var(--text2);
  line-height: 1.7;
}

.footer-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.3px;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.footer-chip-link:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  transition: transform .15s ease, filter .15s ease;
}

.footer-nav{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.footer-link{
  color: var(--text2);
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.footer-link:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* Responsible gaming card */
.safe-card{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.safe-row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.safe-icn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(244,197,66,.14), rgba(30,167,255,.10));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  flex: 0 0 auto;
}
.safe-icn svg{
  width: 22px;
  height: 22px;
  color: var(--text);
}

.safe-k{
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 900;
}
.safe-v{
  margin-top: 4px;
  color: var(--text2);
  font-weight: 800;
  line-height: 1.35;
}

.footer-disclaimer{
  margin: 12px 0 0;
  color: var(--text2);
  line-height: 1.7;
}

/* Bottom bar */
.footer-bottom{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  color: var(--muted);
  font-weight: 700;
}

.footer-copy{
  min-width:0;
}

.footer-bottom-links{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.footer-mini{
  color: var(--text2);
  font-weight: 800;
  padding: 6px 8px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.footer-mini:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
}

.footer-dot{
  opacity:.55;
}

/* Responsive */
@media (max-width: 980px){
  .footer-grid{
    grid-template-columns: 1fr;
  }

  .footer-logo img{
    width: 200px;
  }

  .footer-bottom{
    flex-direction: column;
    align-items:flex-start;
  }

  .footer-bottom-links{
    justify-content:flex-start;
  }
}
/* =========================
   DEMO PLACEHOLDER (lazy iframe)
   ========================= */

.game-frame-body{
  position: relative;
}

.game-frame-body iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* When loaded */
.game-frame-body.loaded iframe{
  opacity: 1;
  pointer-events: auto;
}

.demo-placeholder{
  position:absolute;
  inset:0;
  border-radius: 0; /* frame already clips by .game-frame overflow */
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 2;
}

.demo-placeholder-img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.02);
}

.demo-placeholder-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(70% 70% at 50% 35%, rgba(0,0,0,.10), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(11,15,26,.15), rgba(11,15,26,.65));
}

.demo-play-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  padding: 14px 18px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, var(--lightning), var(--zeus));
  color:#07101e;
  font-weight: 900;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow: 0 18px 45px rgba(30,167,255,.22);
  transition: transform .15s ease, filter .15s ease;
  z-index: 3;
  white-space: nowrap;
}

.demo-play-btn:hover{
  transform: translate(-50%, -50%) translateY(-1px);
  filter: brightness(1.06);
}

.demo-hint{
  position:absolute;
  left:50%;
  top: calc(50% + 46px);
  transform: translateX(-50%);
  color: rgba(234,242,255,.88);
  font-weight: 700;
  font-size: 13px;
  letter-spacing:.2px;
  text-shadow: 0 10px 25px rgba(0,0,0,.35);
  z-index: 3;
}

/* hide placeholder after load */
.game-frame-body.loaded .demo-placeholder{
  display:none;
}

/* ===== CTA placement fix (mobile) ===== */

/* По умолчанию: мобильная CTA скрыта, десктопная видна */
.header-cta-mobile { display: none; }

/* Mobile breakpoint — как у тебя в JS (max-width: 980px) */
@media (max-width: 980px) {

  /* Контейнер шапки: выравниваем элементы по одной линии */
  .site-header .header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  /* Логотип не должен сжиматься в ноль */
  .site-header .brand{
    flex: 0 0 auto;
  }

  /* Показываем мобильную CTA */
  .header-cta-mobile{
    display: inline-flex;       /* или inline-block */
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Прячем десктопную CTA в правом блоке */
  .header-cta{
    display: none !important;
  }

  /* Правый блок (язык + гамбургер) всегда видим */
  .site-header .header-actions{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-left: auto;          /* утащит вправо, гамбургер не пропадёт */
  }

  /* Гамбургер НЕ трогаем, но страхуем от случайных display:none */
  .site-header .menu-toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .brand{
      width: 125px;
  }
  .page{
      padding-top: 62px;
  }

  /* Если твой текущий CSS НЕ скрывает nav в шапке на мобиле,
     то можно включить это, чтобы пункты меню не распирали строку.
     Если у тебя nav и так превращается в оверлей/выезжающее меню — убери эту строку. */
  /* .site-header .nav{ display: none; } */
}


}