:root{
  --bg:#0b0d12;
  --surface:#151821;
  --text:#f5f7fa;
  --muted:#9aa3b2;
  --primary:#119DD9;
  --primary-text:#ffffff;
  --border:#262b36;
  --font-heading:'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius-md:12px;
  --radius-lg:20px;
  --space-md:16px;
  --space-lg:32px;
  --space-xl:64px;
  --motion-duration:0.5s;
  --motion-ease:cubic-bezier(0.2, 0.7, 0.2, 1);
  --content-max:72rem;
  --tint:color-mix(in srgb, var(--primary) 14%, transparent);
  --tint-strong:color-mix(in srgb, var(--primary) 30%, transparent);
  --glass:color-mix(in srgb, var(--surface) 70%, transparent);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.6;}
a{color:inherit;}
img{max-width:100%;}

/* Header: sticky, translucent, blurred. */
.site-nav{position:sticky;top:0;z-index:50;padding:var(--space-md) var(--space-lg);background:color-mix(in srgb, var(--bg) 78%, transparent);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--border);}
.site-nav-inner{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;max-width:var(--content-max);margin:0 auto;}
.site-logo-link{margin-right:auto;display:inline-flex;align-items:center;text-decoration:none;}
.site-logo{display:inline-flex;align-items:center;height:40px;}
.site-logo img,.site-logo svg{height:40px;width:auto;max-width:240px;object-fit:contain;display:block;}
.nav-links{display:flex;gap:var(--space-lg);flex-wrap:wrap;align-items:center;}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:0.95rem;transition:color 0.2s var(--motion-ease);}
.nav-links a:hover{color:var(--text);}
.nav-cta{padding:0.6rem 1.3rem;border-radius:999px;font-weight:700;text-decoration:none;color:var(--primary-text) !important;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 55%,#ffffff));box-shadow:0 6px 20px var(--tint-strong);transition:transform 0.18s var(--motion-ease),box-shadow 0.18s var(--motion-ease);}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--tint-strong);}

/* Hero: centered, gradient headline, soft glow. */
.hero{position:relative;overflow:hidden;text-align:center;max-width:var(--content-max);margin:0 auto;padding:calc(var(--space-xl) * 1.4) var(--space-lg) var(--space-xl);}
.hero::before{content:"";position:absolute;left:50%;top:-30%;width:120%;height:140%;transform:translateX(-50%);background:radial-gradient(closest-side,var(--tint),transparent 70%);pointer-events:none;z-index:-1;}
.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;margin-bottom:var(--space-lg);padding:0.4rem 1rem;border:1px solid var(--border);border-radius:999px;font-size:0.8rem;letter-spacing:0.02em;color:var(--text);background:var(--tint);}
.hero h1{font-family:var(--font-heading);font-size:clamp(2.4rem,6vw,4rem);line-height:1.05;margin:0 0 var(--space-md);background:linear-gradient(120deg,var(--text),color-mix(in srgb,var(--primary) 75%,var(--text)));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{color:var(--muted);font-size:1.2rem;margin:0 auto;max-width:40rem;}
.hero-graphic{position:absolute;top:var(--space-lg);right:var(--space-lg);width:120px;height:120px;opacity:0.35;pointer-events:none;}
.hero-graphic svg{width:100%;height:100%;}

/* Buttons */
.btn{display:inline-block;padding:0.9rem 1.9rem;border-radius:999px;text-decoration:none;font-weight:700;transition:transform 0.18s var(--motion-ease),box-shadow 0.18s var(--motion-ease);}
.btn-primary{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 55%,#ffffff));color:var(--primary-text);box-shadow:0 8px 24px var(--tint-strong);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px var(--tint-strong);}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border);}
.btn-secondary:hover{border-color:var(--primary);}

/* Feature cards: glass, two per row, image-top. */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg);padding:var(--space-lg) var(--space-lg) var(--space-xl);max-width:var(--content-max);margin:0 auto;}
@media (max-width:640px){.features{grid-template-columns:1fr;}}
.feature{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--glass);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform 0.25s var(--motion-ease),box-shadow 0.25s var(--motion-ease),border-color 0.25s var(--motion-ease);}
.feature:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--primary) 50%,var(--border));box-shadow:0 18px 40px color-mix(in srgb,var(--primary) 12%,transparent);}
.feature-media{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--tint),transparent);overflow:hidden;}
.feature-media img{width:100%;height:100%;object-fit:cover;display:block;}
.feature-icon{width:72px;height:72px;color:var(--primary);}
.feature-icon svg{width:100%;height:100%;}
.feature-text{padding:var(--space-lg);flex:1 1 auto;min-width:0;}
.feature h3{margin:0 0 var(--space-md);font-family:var(--font-heading);font-size:1.25rem;}
.feature p{margin:0;color:var(--muted);}
.feature-foot{padding:var(--space-md) var(--space-lg) var(--space-lg);}
.feature-btn{display:block;width:100%;text-align:center;}

/* Closing CTA band: gradient panel. */
.closing{text-align:center;max-width:var(--content-max);margin:var(--space-xl) auto;padding:var(--space-xl) var(--space-lg);border-radius:var(--radius-lg);background:radial-gradient(closest-side,var(--tint),transparent),var(--surface);border:1px solid var(--border);}
.closing h2{font-family:var(--font-heading);font-size:2rem;margin:0 0 var(--space-md);}
.closing p{color:var(--muted);max-width:40rem;margin:0 auto var(--space-lg);}

/* Prose pages */
.prose{max-width:46rem;margin:0 auto;padding:var(--space-xl) var(--space-lg);}
.prose h1{font-family:var(--font-heading);font-size:2.2rem;margin:0 0 var(--space-lg);}
.prose h2{font-family:var(--font-heading);margin:var(--space-lg) 0 var(--space-md);}
.prose p{color:var(--muted);margin:0 0 var(--space-md);}
.disclaimer{color:var(--muted);font-size:0.8rem;text-align:center;padding:0 var(--space-lg) var(--space-md);max-width:48rem;margin:0 auto;}

/* Games */
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);padding:var(--space-lg) var(--space-lg) var(--space-xl);max-width:var(--content-max);margin:0 auto;}
@media (max-width:760px){.game-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.game-grid{grid-template-columns:1fr;}}
.game-tile{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--glass);text-decoration:none;color:var(--text);transition:transform 0.25s var(--motion-ease),box-shadow 0.25s var(--motion-ease),border-color 0.25s var(--motion-ease);}
.game-tile:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--primary) 50%,var(--border));box-shadow:0 18px 40px color-mix(in srgb,var(--primary) 12%,transparent);}
.game-thumb{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--tint),transparent);overflow:hidden;}
.game-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s var(--motion-ease);}
.game-tile:hover .game-thumb img{transform:scale(1.06);}
.game-thumb span{width:64px;height:64px;color:var(--primary);}
.game-thumb svg{width:100%;height:100%;}
.game-name{padding:var(--space-md);font-weight:700;text-align:center;}
.game-detail{max-width:var(--content-max);margin:0 auto;padding:var(--space-lg);}
.game-detail h1{font-family:var(--font-heading);text-align:center;margin:0 0 var(--space-lg);}
.game-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;border:1px solid color-mix(in srgb,var(--primary) 40%,var(--border));box-shadow:0 18px 50px var(--tint);background:#000;}
.game-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.game-desc{color:var(--muted);max-width:46rem;margin:var(--space-lg) auto;}
.game-back{display:inline-block;margin-top:var(--space-md);color:var(--primary);text-decoration:none;font-weight:600;}

/* Footer */
.site-footer{position:relative;border-top:1px solid var(--border);padding:var(--space-xl) var(--space-lg) var(--space-lg);background:color-mix(in srgb,var(--surface) 50%,var(--bg));}
.site-footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:0.7;}
.footer-cols{display:grid;gap:var(--space-lg);grid-template-columns:1.4fr repeat(auto-fit,minmax(140px,1fr));max-width:var(--content-max);margin:0 auto var(--space-lg);}
.footer-logo{display:inline-flex;height:30px;margin-bottom:var(--space-md);}
.footer-logo img,.footer-logo svg{height:30px;width:auto;max-width:200px;object-fit:contain;}
.footer-brand p{color:var(--muted);font-size:0.88rem;margin:0;max-width:22rem;}
.footer-col h4{font-family:var(--font-heading);font-size:0.95rem;margin:0 0 var(--space-md);}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.5rem;}
.footer-col a{color:var(--muted);text-decoration:none;font-size:0.88rem;transition:color 0.2s var(--motion-ease);}
.footer-col a:hover{color:var(--primary);}
.footer-bottom{display:flex;flex-direction:column;gap:0.3rem;align-items:center;text-align:center;color:var(--muted);font-size:0.8rem;border-top:1px solid var(--border);padding-top:var(--space-md);max-width:var(--content-max);margin:0 auto;}
.global-disclaimer{color:var(--muted);font-size:0.8rem;text-align:center;padding:0 var(--space-lg) var(--space-md);}
.block-page{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-lg);}

/* Motion: smooth entrance, scroll reveal, hover (forced on for this template). */
.bg-animated{animation:bg-pan 18s ease infinite;}
@keyframes bg-pan{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
/* Transform-only so the LCP hero copy paints immediately and never shifts. */
.motion-stagger > *{animation:rise 0.7s var(--motion-ease) both;}
.motion-stagger > *:nth-child(2){animation-delay:0.1s;}
.motion-stagger > *:nth-child(3){animation-delay:0.2s;}
.motion-stagger > *:nth-child(4){animation-delay:0.3s;}
@keyframes rise{from{transform:translateY(12px);}to{transform:none;}}
.motion-ready [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 0.6s var(--motion-ease),transform 0.6s var(--motion-ease);}
.motion-ready [data-reveal].is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .bg-animated{animation:none;}
  .motion-stagger > *{animation:none;}
  .motion-ready [data-reveal]{opacity:1;transform:none;transition:none;}
  .feature,.game-tile,.btn,.nav-cta,.game-thumb img{transition:none;}
}
.motion-reduced .bg-animated{animation:none;}
.motion-reduced [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;}
.motion-reduced .motion-stagger > *{animation:none !important;}