.page-game-landing #main-body{ background:transparent !important; padding:0 !important; }
.esagl{
  --bg:var(--esa26c-bg); --surface:var(--esa26c-surface,#0d1422); --surface2:var(--esa26c-surface-2,#111a2c);
  --line:rgba(148,163,184,.10); --line2:rgba(148,163,184,.18);
  --ink:var(--esa26c-ink,#e9eef7); --mute:#9aa6b8; --dim:#6b7689;
  --soft:rgba(var(--brand-rgb),.12); --radius:16px;
  color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif;
}
html[data-theme="light"] .esagl{ --surface:#fff; --surface2:#f3f6fb; --line:rgba(15,23,42,.08); --line2:rgba(15,23,42,.14); --ink:#0f172a; --mute:#475569; --dim:#64748b; --soft:rgba(var(--brand-rgb),.10); }
.page-game-landing{ background:var(--esa26c-bg) !important; }
.esagl *{ box-sizing:border-box; }
.esagl h1,.esagl h2,.esagl h3,.esagl h4{ margin:0; color:var(--ink); font-weight:800; letter-spacing:-.01em; }
.esagl p{ margin:0; color:var(--mute); line-height:1.7; }
.esagl ul{ margin:0; padding:0; list-style:none; }
.esagl a{ text-decoration:none; }
.gl-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
@media(max-width:768px){ .gl-wrap{ padding:0 16px; } }
.esagl{ padding:40px 0 90px; }
.gl-sec{ margin-top:74px; }
.gl-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brand); padding:6px 12px; border-radius:999px; background:var(--soft); border:1px solid rgba(var(--brand-rgb),.25); }
.gl-eyebrow i{ font-size:14px; }
.gl-sec-head{ max-width:760px; margin:0 auto 38px; text-align:center; }
.gl-sec-head h2{ font-size:clamp(26px,3vw,38px); margin:12px 0 12px; line-height:1.14; }
.gl-sec-head p{ font-size:16px; }
.gl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 22px; border-radius:11px; font-weight:800; font-size:15px; border:1px solid transparent; cursor:pointer; transition:transform .16s, box-shadow .2s, background .2s, border-color .2s; }
.gl-btn-primary{ background:var(--brand); color:var(--brand-ink); box-shadow:0 12px 28px rgba(var(--brand-rgb),.28); }
.gl-btn-primary:hover{ transform:translateY(-2px); background:var(--brand2); color:var(--brand-ink); box-shadow:0 16px 36px rgba(var(--brand-rgb),.4); }
.gl-btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line2); }
.gl-btn-ghost:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }

/* hero */
.gl-hero{ position:relative; overflow:hidden; border-radius:26px; padding:54px 44px 58px;
  background:radial-gradient(900px 460px at 82% -20%, rgba(var(--brand-rgb),.20), transparent 60%), linear-gradient(160deg,var(--surface2),var(--surface));
  border:1px solid var(--line2); }
.gl-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px); background-size:50px 50px; -webkit-mask-image:radial-gradient(820px 420px at 30% 30%,#000,transparent 80%); mask-image:radial-gradient(820px 420px at 30% 30%,#000,transparent 80%); }
.gl-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:center; }
.gl-hero h1{ font-size:clamp(28px,3.8vw,46px); line-height:1.07; margin:16px 0 16px; }
.gl-hero h1 .hl{ color:var(--brand); }
.gl-hero-lead{ font-size:16.5px; max-width:560px; margin-bottom:26px; }
.gl-hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.gl-hero-meta{ display:flex; flex-wrap:wrap; gap:20px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.gl-hero-meta .m{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--mute); font-weight:600; }
.gl-hero-meta .m i{ color:var(--brand); font-size:18px; }
.gl-hero-visual{ position:relative; aspect-ratio:1/1; width:100%; max-width:400px; min-height:320px; margin-left:auto; }
.gl-hero-visual::before{ content:""; position:absolute; inset:10%; border-radius:50%; background:radial-gradient(circle,rgba(var(--brand-rgb),.4),transparent 65%); filter:blur(30px); opacity:.7; }
.gl-orb{ position:absolute; inset:16%; border-radius:34px; background:linear-gradient(160deg,var(--surface),var(--surface2)); border:1px solid rgba(var(--brand-rgb),.35); box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 50px rgba(var(--brand-rgb),.18); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.gl-orb::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(148,163,184,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.1) 1px,transparent 1px); background-size:26px 26px; opacity:.5; }
.gl-orb i{ position:relative; z-index:2; font-size:96px; color:var(--brand); filter:drop-shadow(0 10px 30px rgba(var(--brand-rgb),.55)); }
.gl-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(var(--brand-rgb),.25); animation:glPulse 3.2s ease-out infinite; }
.gl-ring.r2{ animation-delay:1.6s; }
@keyframes glPulse{ 0%{ transform:scale(.5); opacity:0 } 25%{ opacity:.5 } 100%{ transform:scale(1.05); opacity:0 } }

/* stat band */
.gl-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:24px; padding:28px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.gl-stat{ text-align:center; }
.gl-stat strong{ display:block; font-size:30px; line-height:1; color:var(--brand); margin-bottom:6px; }
.gl-stat span{ font-size:12px; color:var(--dim); font-weight:700; text-transform:uppercase; letter-spacing:.07em; }

/* cards */
.gl-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gl-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.gl-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:transform .25s, border-color .25s, box-shadow .25s; }
.gl-card:hover{ transform:translateY(-3px); border-color:var(--line2); box-shadow:0 14px 34px rgba(0,0,0,.25); }
.gl-card .ico{ width:50px; height:50px; border-radius:13px; background:var(--soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:23px; border:1px solid rgba(var(--brand-rgb),.22); margin-bottom:14px; }
.gl-card h3{ font-size:17px; margin-bottom:9px; }
.gl-card p{ font-size:14px; }

/* steps */
.gl-steps{ display:flex; flex-direction:column; gap:12px; counter-reset:s; }
.gl-step{ display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.gl-step .n{ flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:15px; font-weight:800; color:var(--brand-ink); background:var(--brand); }
.gl-step h3{ font-size:16px; margin-bottom:5px; }
.gl-step p{ font-size:14px; line-height:1.6; }

/* chips */
.gl-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.gl-chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border-radius:11px; background:var(--surface); border:1px solid var(--line2); font-size:14px; font-weight:600; color:var(--ink); transition:transform .16s, border-color .16s; }
.gl-chip:hover{ transform:translateY(-2px); border-color:var(--brand); }
.gl-chip i{ color:var(--brand); }

/* callout */
.gl-callout{ position:relative; overflow:hidden; border-radius:20px; padding:34px 36px; display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center;
  background:radial-gradient(620px 320px at 100% -30%, rgba(var(--brand-rgb),.2), transparent 60%), linear-gradient(135deg,var(--surface),var(--surface2)); border:1px solid rgba(var(--brand-rgb),.3); }
.gl-callout .ic{ width:74px; height:74px; flex:none; border-radius:20px; display:grid; place-items:center; font-size:36px; color:var(--brand); background:var(--soft); border:1px solid rgba(var(--brand-rgb),.3); }
.gl-callout h3{ font-size:20px; margin-bottom:7px; } .gl-callout p{ font-size:14.5px; }
@media(max-width:820px){ .gl-callout{ grid-template-columns:1fr; text-align:center; } .gl-callout .ic{ margin:0 auto; } }

/* faq */
.gl-faq{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gl-faq details{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; transition:border-color .2s, box-shadow .2s; }
.gl-faq details[open]{ border-color:rgba(var(--brand-rgb),.3); box-shadow:0 12px 30px -16px rgba(var(--brand-rgb),.5); }
.gl-faq summary{ cursor:pointer; font-weight:700; color:var(--ink); font-size:15px; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gl-faq summary::-webkit-details-marker{ display:none; }
.gl-faq summary::after{ content:"\002B"; color:var(--brand); font-size:20px; font-weight:800; transition:transform .2s; }
.gl-faq details[open] summary::after{ transform:rotate(45deg); }
.gl-faq p{ margin-top:11px; font-size:14px; }

/* related games */
.gl-related{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.gl-rel{ display:flex; align-items:center; gap:11px; padding:14px 16px; border-radius:13px; background:var(--surface); border:1px solid var(--line); color:var(--ink); font-weight:700; font-size:14.5px; transition:transform .16s, border-color .16s; }
.gl-rel:hover{ transform:translateY(-2px); border-color:var(--brand); color:var(--brand); }
.gl-rel i{ font-size:20px; color:var(--brand); }

/* cta banner */
.gl-banner{ position:relative; overflow:hidden; border-radius:24px; padding:48px 40px; text-align:center; margin-top:74px;
  background:radial-gradient(700px 300px at 50% -30%, rgba(var(--brand-rgb),.2), transparent 60%), linear-gradient(160deg,var(--surface),var(--surface2)); border:1px solid var(--line2); }
.gl-banner h2{ font-size:clamp(24px,3vw,36px); margin-bottom:12px; }
.gl-banner p{ max-width:560px; margin:0 auto 24px; font-size:16px; }
.gl-banner-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* prose */
.gl-prose{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px; }
.gl-prose h3{ font-size:19px; margin:0 0 12px; display:flex; align-items:center; gap:10px; } .gl-prose h3 i{ color:var(--brand); font-size:21px; }
.gl-prose p+p{ margin-top:12px; } .gl-prose b{ color:var(--ink); } .gl-prose .hl{ color:var(--brand); font-weight:700; }

/* reveal (pure CSS — never gets stuck hidden) */
@keyframes glReveal{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
.esagl .rv{ animation:glReveal .7s ease both; }
@media(prefers-reduced-motion:reduce){ .esagl .rv{ animation:none } .gl-ring{ animation:none } }

@media(max-width:980px){ .gl-hero-grid{ grid-template-columns:1fr; gap:28px; } .gl-hero-visual{ max-width:320px; margin:0 auto; } .gl-grid3{ grid-template-columns:1fr 1fr; } .gl-stats{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .esagl{ padding:24px 0 64px; } .gl-hero{ padding:34px 18px 38px; } .gl-grid3,.gl-grid2,.gl-faq,.gl-stats{ grid-template-columns:1fr; } .gl-sec{ margin-top:52px; } }

/* hub: clickable game cards */
a.gl-card{ display:flex; flex-direction:column; color:inherit; }
a.gl-card .go{ margin-top:auto; padding-top:12px; color:var(--brand); font-weight:700; font-size:13.5px; }
a.gl-card:hover .go{ text-decoration:underline; }
.gl-gamegrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }

/* trademark / legal disclaimer */
.gl-legal{ margin-top:60px; margin-bottom:8px; padding:16px 20px; border-radius:12px; background:var(--surface); border:1px solid var(--line); font-size:12px; color:var(--dim); line-height:1.65; }
.gl-legal b{ color:var(--mute); }
/* guide-specific */
.gd-meta{ display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; }
.gd-meta .m{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--mute); font-weight:600; }
.gd-meta .m i{ color:var(--brand); font-size:16px; }
.gl-prose ul.gd-list{ margin:10px 0 0; display:flex; flex-direction:column; gap:9px; }
.gl-prose ul.gd-list li{ position:relative; padding-left:26px; font-size:14px; color:var(--mute); line-height:1.6; }
.gl-prose ul.gd-list li::before{ content:"\2713"; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:6px; display:grid; place-items:center; font-size:10px; font-weight:800; color:var(--brand); background:var(--soft); border:1px solid rgba(var(--brand-rgb),.3); }
.gl-step code, .gl-prose code, .gl-callout code{ background:rgba(var(--brand-rgb),.1); color:var(--brand); padding:1px 6px; border-radius:5px; font-family:'JetBrains Mono',monospace; font-size:12.5px; }
.gd-code{ border-radius:11px; overflow:hidden; border:1px solid rgba(120,160,220,.22); background:#0c1626; margin-top:10px; }
.gd-code pre{ margin:0; padding:14px 16px; overflow-x:auto; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13px; line-height:1.8; color:#e7eefb !important; white-space:pre; }
.gd-code .c{ color:#8aa0c2 !important; }

/* ===================== BLOG ===================== */
.bl-article{ max-width:768px; margin:0 auto; }
.bl-article > p{ font-size:16px; line-height:1.8; color:var(--mute); margin-bottom:18px; }
.bl-article p b{ color:var(--ink); }
.bl-article a{ color:var(--brand); font-weight:600; }
.bl-lead{ font-size:18px !important; color:var(--ink) !important; line-height:1.7 !important; margin-bottom:24px !important; }
.bl-h2{ font-size:clamp(21px,2.3vw,28px); color:var(--ink); margin:34px 0 14px; line-height:1.22; }
.bl-ul{ margin:0 0 18px; display:flex; flex-direction:column; gap:10px; }
.bl-ul li{ position:relative; padding-left:26px; font-size:16px; line-height:1.7; color:var(--mute); }
.bl-ul li::before{ content:""; position:absolute; left:5px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--brand); }
.bl-ul li b{ color:var(--ink); }
.bl-quote{ margin:24px 0; padding:16px 24px; border-left:3px solid var(--brand); background:var(--surface); border-radius:0 12px 12px 0; font-size:17px; color:var(--ink); font-style:italic; }
.bl-meta{ display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; color:var(--dim); font-size:13.5px; font-weight:600; }
.bl-meta .m{ display:inline-flex; align-items:center; gap:7px; } .bl-meta .m i{ color:var(--brand); font-size:15px; }
a.gl-card .cat{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); margin-bottom:8px; }
a.gl-card .date{ font-size:12px; color:var(--dim); margin-top:auto; padding-top:12px; display:inline-flex; align-items:center; gap:6px; }