:root {
      --bg: #0b1220;
      --panel: #111a2e;
      --card: #131e35;
      --brand: #5b8cff;
      --ink: #e9eef8;
      --muted: #a8b3c7;
      --pill: #1b2744;
      --border: rgba(255,255,255,.06);
      --shadow: 0 8px 20px rgba(0,0,0,.35);
      --radius: 14px;
    }
    html { scroll-behavior: smooth; }
    * { box-sizing: border-box; }
    html, body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial; }
    a { color: inherit; }
    .layout { display:grid; grid-template-columns: 260px 1fr; min-height:100vh; }
    aside { background:var(--panel); border-right:1px solid var(--border); padding:20px 14px; position:sticky; top:0; height:100vh; }
    .brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; }
    .brand .logo { width:32px; height:32px; background:linear-gradient(135deg,#ffb703,#fb5607); border-radius:8px; box-shadow:var(--shadow); }
    nav a { display:flex; align-items:center; gap:10px; padding:10px 12px; margin:6px 0; border-radius:10px; color:var(--ink); text-decoration:none; background:transparent; }
    nav a.active, nav a:hover { background:rgba(255,255,255,.06); }
    .aside-bottom { margin-top:auto; font-size:13px; color:var(--muted); }
    .content { padding:24px; }
    .topbar { display:flex; align-items:center; gap:12px; }
    .search { flex:1; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px 12px; color:#cfd6e6; }
    .auth { margin-left:auto; display:flex; gap:10px; }
    .btn { background:rgba(255,255,255,.08); border:1px solid var(--border); color:var(--ink); padding:10px 14px; border-radius:12px; text-decoration:none; cursor:pointer; }
    .btn.primary { background:var(--brand); border-color:transparent; color:white; }
    .hero { margin:20px 0 14px; background: radial-gradient(90% 120% at 80% 20%, rgba(91,140,255,.35), transparent 60%), radial-gradient(60% 120% at 0% 0%, rgba(255,215,0,.15), transparent 45%), url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 400\'><defs><linearGradient id=\'g\' x1=\'0\' x2=\'1\'><stop stop-color=\'%23131e35\'/><stop offset=\'1\' stop-color=\'%230b1220\'/></linearGradient></defs><rect fill=\'url(%23g)\' width=\'1200\' height=\'400\'/></svg>'); background-size:cover; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
    .hero-inner { padding:36px 28px; display:grid; grid-template-columns: 1.3fr .7fr; gap:10px; align-items:center; }
    .pills { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 6px; }
    .pill { background:var(--pill); color:#cbd5e7; border:1px solid var(--border); padding:8px 12px; border-radius:999px; font-size:13px; }
    .section { background:transparent; margin-top:18px; }
    
	
	
/* Improve mobile rendering: skip offscreen work */
.section{content-visibility:auto;contain-intrinsic-size: 1000px;}
.section h2 { font-size:20px; margin:12px 0 8px; }
    .games { display:grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
    .game { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
    .game .thumb { aspect-ratio: 1/1;  background: #0e1629; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.04); }
	/* ✅ Responsive games grid for WinThere (mobile-first) */
.games{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 42vw, 220px), 1fr));
  gap: clamp(10px, 2.2vw, 14px);
}

/* Card */
.game{
  border-radius: 14px;
  overflow:hidden;
}

/* Preview keeps stable size (no CLS) and scales with card */
.game .thumb{
  aspect-ratio: 4 / 3;       /* было 1/1 — делаем более “баннерно” как на скрине */
  background:#0e1629;
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cookiebar{
  position:fixed;
  left:0; right:0; bottom:0;
  background:#0b0f18;
  color:#eaeef7;
  border-top:1px solid rgba(255,255,255,.1);
  padding:12px 16px;
  z-index:9999;
  font:14px/1.4 system-ui;
  /* default: hidden */
  opacity:0;
  transform:translateY(110%);
  pointer-events:none;
  transition:transform .2s ease, opacity .2s ease;
  contain:layout paint;
  will-change: transform, opacity;
}
/* show banner immediately when cookie not accepted (no CLS because decided before paint) */
html:not(.cookie-ok) .cookiebar{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
/* Meta area scales */
.game .meta{
  padding: clamp(8px, 2vw, 10px) clamp(10px, 2.4vw, 12px);
  font-size: clamp(12px, 2.8vw, 13px);
  gap: 10px;
}

.game .meta span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Buttons scale nicely on mobile */
.game .meta .btn{
  padding: clamp(6px, 1.8vw, 10px) clamp(10px, 2.2vw, 14px);
  font-size: clamp(12px, 2.8vw, 13px);
  border-radius: 12px;
}

/* Hard breakpoints (optional but good) */
@media (max-width: 480px){
  .games{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

    .game .meta { padding:10px 12px; font-size:13px; color:#c0c8da; display:flex; justify-content:space-between; align-items:center; }
    .showall { margin-left:auto; font-size:13px; color:#c0c8da; }
    .about { margin:28px 0 14px; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px; }
    footer { text-align:center; color:#8fa1c1; padding:40px 10px 60px; }
    /* Responsive */
    @media (max-width: 1024px) {
      .layout { grid-template-columns: 92px 1fr; }
      aside { padding:16px 10px; }
      .brand span { display:none; }
      nav a span { display:none; }
      .hero-inner { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .layout { grid-template-columns: 1fr; }
      aside { position:relative; height:auto; }
    }
    /* Hidden keywords */
    #seo-keywords { display:none !important; visibility:hidden; }
  
    .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .logo-img{ display:block; height:32px; width:auto; }
    
/* Full-width hero banner: use real <img> for better LCP prioritization */
.hero{
  position:relative;
  margin:20px 0 14px;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  min-height:280px;
  overflow:hidden;
  background:#0b1220;
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.05) 70%, transparent 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  padding:44px 32px 48px;
  max-width:720px;
}

.hero-content{
  display:inline-block;
  padding:20px 24px;
  border:2px solid rgba(255,255,255,0.35);
  border-radius:14px;
  background:rgba(5,10,25,0.65);
  backdrop-filter: blur(6px);
}

.hero-content h1,
.hero-content p{
  text-shadow:0 2px 8px rgba(0,0,0,0.6);
}


/* ✅ CLS fix: stabilize hero text block (PSI flagged <p> inside hero) */
.hero{
  min-height: 360px; /* reserve space so content doesn't jump while assets load */
}
.hero-content{
  display:block;              /* avoid inline-block shrink-wrap recalcs */
  width: min(720px, 100%);
  min-height: 240px;          /* reserve space for h1 + p + button */
}
.hero-content p{
  margin: 6px 0 16px;
  line-height: 1.35;
  min-height: 4.1em;          /* reserve ~3 lines on mobile */
}
@media (max-width: 640px){
  .hero{ min-height: 440px; }
  .hero-content{ padding: 18px 16px; min-height: 280px; }
  .hero-content p{ min-height: 5.4em; } /* reserve ~4 lines */
}

/* ✅ CLS hard-fix: lock hero paragraph height (prevents reflow/wrap changes) */
.hero-content p{
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

@media (max-width: 640px){
  .hero-content p{
    -webkit-line-clamp: 5;
    max-height: calc(1.35em * 5);
  }
}
@media (min-width: 641px){
  .hero-content p{
    -webkit-line-clamp: 3;
    max-height: calc(1.35em * 3);
  }
}



.hero h1{ font-size: clamp(24px, 3.5vw, 44px); margin:0 0 8px; }
.hero p{ margin:6px 0 16px; color:#c7d0e2; }
.promo-section {
  display: flex;
  justify-content: center;
  margin: 50px 0;
  padding: 20px;
}

.promo-card {
  background: #0c1022;
  border: 1px solid #2b2f45;
  border-radius: 12px;
  padding: 30px;
  max-width: 700px;
  text-align: center;
  color: #e8ecff;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.promo-card h2 {
  color: #ffd966;
  font-size: 1.7rem;
  margin-bottom: 15px;
}

.promo-card p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.promo-btn {
  display: inline-block;
  background: linear-gradient(90deg, #ffb347, #ffcc33);
  color: #0b0b0b;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s;
}

.promo-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, #ffcc33, #ffd966);
}


.page-intro,.framework-section{padding:24px;margin:20px 0;background:#141e32;border-radius:16px}.framework-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.framework-card{padding:20px;background:#1e2a42;border-radius:12px}.framework-section a,.breadcrumbs a,.related a{color:#a8caff}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px;text-align:left;border-bottom:1px solid #34415b}.vip-scale{display:flex;gap:12px;overflow-x:auto;padding:16px 0}.vip-scale span{padding:12px;background:#243555;border-radius:12px;white-space:nowrap}.aside-bottom a{color:inherit}.framework-note{color:#a8b4ca}@media(max-width:700px){.page-intro,.framework-section{padding:16px}.framework-grid{grid-template-columns:1fr}table{min-width:450px}}