
:root{
  --bg:#07111f;
  --bg2:#0d1b2a;
  --card:rgba(14,27,44,.82);
  --card2:rgba(19,34,56,.92);
  --text:#eef4ff;
  --muted:#aac0de;
  --line:rgba(255,255,255,.08);
  --accent:#63e6be;
  --accent2:#7c9cff;
  --danger:#ff9a76;
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(99,230,190,.16), transparent 28%),
    radial-gradient(circle at top right, rgba(124,156,255,.18), transparent 32%),
    linear-gradient(180deg,var(--bg),var(--bg2) 55%, #081320);
}
a{color:var(--text);text-decoration:none}
a:hover{opacity:.95}
img{max-width:100%;height:auto;border-radius:18px}
img[src*="content/logo"], .logoImg-footer img, .logo__image img{display:none!important}
.container{width:min(1180px, calc(100% - 32px)); margin:0 auto}
.header-lay{position:sticky;top:0;z-index:30;backdrop-filter:blur(16px);background:rgba(7,17,31,.72);border-bottom:1px solid var(--line)}
.header,.footer-top,.header-content,.faq-wrapper,.step-game,.games__wrapper,.games,.contacts-box{display:flex;gap:24px}
.header{align-items:center;justify-content:space-between;padding:16px 0}
.logo a,.logo-footer a{display:flex;align-items:center;gap:14px}
.logo__title h2,.logoTitle-footer h2{margin:0;font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase}
.logo__title h2::before,.logoTitle-footer h2::before{content:"◆";margin-right:10px;color:var(--accent)}
.nav,.privacy ul{display:flex;gap:18px;flex-wrap:wrap}
.nav__link,.privacy a,.nav-link{padding:10px 14px;border:1px solid transparent;border-radius:999px;color:var(--muted)}
.nav__link:hover,.privacy a:hover,.nav-link:hover{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--text)}
.nav-toggle{display:none}
.header-content__lay,.about-us__lay,.benefits__lay,.step-game__lay,.games__lay,.faq-lay,.form-lay,.page-privacy-lay{padding:72px 0}
.header-content{align-items:center;justify-content:space-between}
.header-content__text,.about-us__content,.faq,.form,.page-privacy__box,.benefit-card,.step-game__card,.games__box,.contacts-card,.single-game,.user-agreement,.cookie-policy,.privacy-policy,.disclaimer,.content-politics>div,.content-politics{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}
.header-content__text{padding:42px;flex:1}
.header-content__img{flex:1;min-height:360px;border-radius:28px;background:linear-gradient(135deg, rgba(99,230,190,.22), rgba(124,156,255,.18));border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.header-content__img img{display:none}
.header-content__img::before{content:"OnlineSpielen.vip";font-size:clamp(2rem,6vw,4.5rem);font-weight:800;letter-spacing:.04em;opacity:.95}
h1,h2,h3,h4,h5{margin:0 0 14px 0;line-height:1.15}
h2{font-size:clamp(1.7rem, 3vw, 2.7rem)}
h3{font-size:1.25rem}
h5{font-size:1.02rem}
p,li,label,.answer,span{color:var(--muted);line-height:1.7}
.btn-game,button,.accept-btn,.decline-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--accent),#86ffd7);
  color:#042032!important;border:none;border-radius:999px;padding:14px 22px;font-weight:800;
  box-shadow:0 12px 28px rgba(99,230,190,.25);cursor:pointer
}
.decline-btn{background:rgba(255,255,255,.08)!important;color:var(--text)!important;box-shadow:none;border:1px solid var(--line)}
.about-us{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.about-us__content{padding:34px}
.benefit,.games,.games__wrapper,.step-game{display:grid;gap:20px}
.benefit{grid-template-columns:repeat(2,minmax(0,1fr))}
.benefit-card,.games__box,.contacts-card,.faq,.form,.page-privacy__box,.step-game__card{padding:28px}
.step-game{grid-template-columns:.95fr 1.05fr;align-items:start}
.step-game__img img,.faq-img img,.gallery img{display:none}
.step-game__img,.faq-img,.gallery-img{min-height:240px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(135deg, rgba(124,156,255,.15), rgba(99,230,190,.13))}
.games{grid-template-columns:repeat(3,minmax(0,1fr))}
.games__box,.game-card,.item-game{overflow:hidden}
.faq-wrapper{align-items:stretch}
.faq-img,.faq{flex:1}
.faq-box{display:grid;gap:14px}
.faq-block{padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03)}
.answer{margin-top:10px}
form input,form textarea{
 width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);outline:none
}
.input-container{display:grid;gap:14px}
.form-check{display:flex;gap:10px;align-items:flex-start;margin:18px 0}
.footer-lay{padding:24px 0 36px;border-top:1px solid var(--line);margin-top:40px}
.footer-top{align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.logo-footer,.disclaimer,.privacy{flex:1 1 260px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:18px}
.footer-logos{display:flex;gap:12px;flex-wrap:wrap}
.footer-logos img{height:42px;width:auto;background:#fff;padding:6px;border-radius:10px}
.page-privacy__box,.content-politics>div,.content-politics{padding:34px}
.page-privacy__box ul,.content-politics ul{padding-left:20px}
.privacy-popup{position:fixed;left:20px;right:20px;bottom:20px;width:auto;max-width:920px;margin:0 auto;background:rgba(5,14,24,.93)!important;border:1px solid var(--line);backdrop-filter:blur(12px);border-radius:20px!important;padding:20px!important;box-shadow:var(--shadow)}
.privacy-popup-buttons{display:flex;gap:12px;justify-content:flex-end}
.gallery{display:grid;gap:18px;margin-top:24px}
.gallery-box-one,.gallery-box-two{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.contacts-text{word-break:break-word}
@media (max-width: 920px){
  .header-content,.faq-wrapper,.about-us,.step-game{grid-template-columns:1fr;display:grid}
  .games,.benefit,.gallery-box-one,.gallery-box-two{grid-template-columns:1fr}
  .nav{display:none}
  .nav-toggle{display:flex;flex-direction:column;gap:4px}
  .nav-toggle span{display:block;width:26px;height:2px;background:#fff}
  .nav-panel{display:none;position:absolute;top:100%;left:12px;right:12px;background:rgba(7,17,31,.96);padding:16px;border-radius:18px;border:1px solid var(--line)}
  .nav-panel.active{display:block}
}



/* --- April 2026 layout refinements --- */
.disclaimer-img{height:34px!important;width:auto!important;max-width:70px!important;object-fit:contain;opacity:.96}
.footer-logos img{height:32px!important}

.catalog-lay{padding:56px 0 32px}
.game-container{
  width:min(1320px, calc(100% - 32px));
  margin:0 auto 24px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.game-container iframe{
  display:block;
  width:100%;
  height:min(78vh, 980px);
  min-height:720px;
  border:0;
  background:#02070f;
}
.info-title{
  width:min(1320px, calc(100% - 32px));
  margin:18px auto 0;
  font-size:clamp(1.8rem, 4vw, 3rem);
}
.container-column{width:min(1320px, calc(100% - 32px));margin:0 auto}
.info-container{display:block}
.info-block{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:28px;
  align-items:start;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:26px;
  box-shadow:var(--shadow);
}
.info-image{
  width:100%;
  max-width:220px;
  height:auto;
  border-radius:18px;
  aspect-ratio:4/5;
  object-fit:cover;
}
.info-text h2{font-size:clamp(1.35rem,2.8vw,2.2rem);margin-bottom:12px}
.info-text p{font-size:1.02rem}

/* Make games the main focus on homepage */
.games__lay{padding-top:28px}
.step-game__lay{padding-top:24px}
.about-us__lay{padding-top:28px}

@media (max-width: 920px){
  .game-container iframe{height:70vh;min-height:560px}
  .info-block{grid-template-columns:1fr}
  .info-image{max-width:160px}
}
@media (max-width: 640px){
  .game-container iframe{height:64vh;min-height:440px}
  .disclaimer-img{height:24px!important;max-width:54px!important}
  .footer-logos img{height:26px!important}
}
