/* ============================================================
   GGameHost — site theme (static multi-page)
   Self-contained: tokens + base + components. Generous spacing.
   Per-game accent via --ga (used tastefully, never dominant).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* ink ladder */
  --ink-950:#06070D; --ink-900:#0A0C16; --ink-850:#0E111E; --ink-800:#131726;
  --ink-700:#1B2032; --ink-600:#262C42; --ink-500:#353C57;
  /* glass + borders */
  --glass-1:rgba(22,27,45,.55); --glass-2:rgba(30,36,58,.45); --glass-hi:rgba(255,255,255,.04);
  --border-soft:rgba(255,255,255,.06); --border-1:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.16);
  /* text */
  --text-1:#F4F6FF; --text-2:#C2C8DE; --text-3:#8B91AC; --text-4:#5C6178;
  /* brand */
  --violet:#7C3AED; --violet-400:#9460F0; --blue:#2563EB; --cyan:#06B6D4; --cyan-400:#38D0E8;
  --mint:#22D3A5; --mint-400:#4DE3BC;
  --success:#22D3A5; --warning:#F5B23E; --danger:#F25C6E; --info:#38D0E8;
  --grad-brand:linear-gradient(100deg,#7C3AED 0%,#2563EB 52%,#06B6D4 100%);
  --grad-text:linear-gradient(100deg,#B79CFF 0%,#6EA8FF 50%,#5EE9F5 100%);
  /* per-game accent (default = brand violet); pages override --ga + --ga2 */
  --ga:#7C3AED; --ga2:#2563EB;
  /* type */
  --font-display:'Space Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  /* radii / shadow / motion */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;
  --shadow-md:0 8px 24px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.55); --shadow-xl:0 40px 90px rgba(0,0,0,.6);
  --ease:cubic-bezier(.22,1,.36,1);
  /* layout — GENEROUS spacing (fixes "cramped") */
  --container:1200px; --container-wide:1320px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --section-pad:clamp(5rem,9vw,8.5rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink-950); color:var(--text-2);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--cyan-400);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--mint-400)}
img{max-width:100%;display:block}
::selection{background:rgba(124,58,237,.4);color:#fff}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--ink-950)}
::-webkit-scrollbar-thumb{background:var(--ink-600);border-radius:6px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}

/* ── Layout ── */
.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.container.wide{max-width:var(--container-wide)}
.section{padding-block:var(--section-pad);position:relative}
.section + .section{padding-top:0} /* avoid double gaps when stacked tight */
.section-tight{padding-block:clamp(3rem,5vw,4.5rem)}
.stack{display:flex;flex-direction:column}
.center{text-align:center}
.muted{color:var(--text-3)}

/* generous vertical rhythm inside prose */
.prose > * + *{margin-top:1.15em}
.prose h2{margin-top:2.4em}
.prose h3{margin-top:1.8em}
.prose p,.prose li{color:var(--text-2);max-width:70ch}
.prose ul{padding-left:1.2em}
.prose li{margin-top:.5em}

/* ── Type ── */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-1);letter-spacing:-.02em;line-height:1.15;font-weight:700;margin:0}
.display{font-size:clamp(2.5rem,1.5rem+4.6vw,4.5rem);letter-spacing:-.03em;line-height:1.05;font-weight:700}
h1{font-size:clamp(2.1rem,1.4rem+3vw,3.4rem)}
h2{font-size:clamp(1.8rem,1.3rem+1.9vw,2.6rem)}
h3{font-size:clamp(1.3rem,1.1rem+.9vw,1.7rem)}
.lead{font-size:clamp(1.1rem,1rem+.4vw,1.35rem);color:var(--text-3);line-height:1.6}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:1rem}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--font-mono)}
.section-head{max-width:720px;margin:0 auto 3.5rem;text-align:center}
.section-head .lead{margin-top:1rem}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1;cursor:pointer;
  padding:.95em 1.6em;border-radius:var(--r-sm);border:1px solid transparent;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),filter .18s var(--ease);text-decoration:none}
.btn-lg{padding:1.1em 2em;font-size:1.05rem}
.btn-sm{padding:.65em 1.1em;font-size:.9rem}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:0 0 0 1px rgba(124,58,237,.4),0 12px 36px rgba(124,58,237,.35)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.07);color:#fff}
.btn-ghost{background:var(--glass-2);color:var(--text-1);border-color:var(--border-1)}
.btn-ghost:hover{background:var(--ink-700);border-color:var(--border-strong);color:#fff;transform:translateY(-2px)}
.btn-accent{background:linear-gradient(100deg,var(--ga),var(--ga2));color:#fff;box-shadow:0 12px 32px color-mix(in srgb,var(--ga) 32%,transparent)}
.btn-accent:hover{transform:translateY(-2px);filter:brightness(1.08);color:#fff}

/* ── Chips / badges ── */
.chip{display:inline-flex;align-items:center;gap:.5em;padding:.45em .9em;border-radius:var(--r-pill);
  border:1px solid var(--border-1);background:var(--glass-1);color:var(--text-2);font-size:.85rem;font-weight:600}
.chip-mint{border-color:rgba(34,211,165,.35);background:rgba(34,211,165,.12);color:var(--mint-400)}
.badge{display:inline-flex;align-items:center;padding:.3em .7em;border-radius:var(--r-pill);font-size:.72rem;font-weight:700;letter-spacing:.04em}
.badge-pop{background:var(--grad-brand);color:#fff}

/* ── Cards ── */
.card{background:var(--glass-1);border:1px solid var(--border-1);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:1.8rem}
.card.hover{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.card.hover:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ga) 45%,var(--border-1));
  box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--ga) 35%,transparent)}
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ── Background glows (subtle, tinted by --ga) ── */
.glow-top{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(55% 45% at 50% -6%,color-mix(in srgb,var(--ga) 24%,transparent),transparent 62%),
             radial-gradient(40% 40% at 88% 4%,rgba(6,182,212,.12),transparent 60%)}
.section > .container{position:relative;z-index:1}

/* ── Header / nav (multi-page) ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(8,10,18,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border-soft)}
.nav-inner{display:flex;align-items:center;gap:1.5rem;height:72px}
.nav .brand{display:flex;align-items:center;flex:none}
.nav .brand img{height:34px}
.nav-links{display:flex;align-items:center;gap:.35rem;margin-right:auto;margin-left:1rem}
.nav-links a,.nav .dd > button{display:inline-flex;align-items:center;gap:.35em;background:none;border:0;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;color:var(--text-2);padding:.6em .8em;border-radius:var(--r-sm)}
.nav-links a:hover,.nav .dd > button:hover{color:var(--text-1);background:var(--glass-1)}
.nav-links a.active{color:var(--text-1)}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:240px;background:rgba(14,17,30,.98);
  border:1px solid var(--border-1);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s var(--ease)}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:block;padding:.6em .8em;border-radius:var(--r-sm);color:var(--text-2);font-size:.9rem;font-weight:500}
.dd-menu a:hover{background:var(--glass-hi);color:var(--text-1)}
.nav-toggle{display:none;background:var(--ink-700);border:1px solid var(--border-1);border-radius:var(--r-sm);
  width:42px;height:42px;color:var(--text-1);font-size:1.2rem;cursor:pointer}
/* announcement bar */
.topbar{background:linear-gradient(90deg,rgba(124,58,237,.18),rgba(6,182,212,.14));border-bottom:1px solid var(--border-soft);font-size:.82rem}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:40px;gap:1rem}
.topbar .right{display:flex;gap:1rem;align-items:center;color:var(--text-3)}

/* currency switcher */
.cur-switch{display:inline-flex;border:1px solid var(--border-1);border-radius:var(--r-pill);overflow:hidden;background:var(--ink-800)}
.cur-switch button{background:none;border:0;color:var(--text-3);font-weight:700;font-size:.8rem;padding:.35em .8em;cursor:pointer;font-family:var(--font-mono)}
.cur-switch button.on{background:var(--grad-brand);color:#fff}

/* ── Footer ── */
.footer{border-top:1px solid var(--border-1);background:var(--ink-950);padding-top:clamp(3rem,5vw,4rem)}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2rem;padding-bottom:2.5rem}
.footer h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-1);margin-bottom:1rem}
.footer a{display:block;color:var(--text-4);font-size:.9rem;margin-top:.6rem}
.footer a:hover{color:var(--text-1)}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.5rem 0;border-top:1px solid var(--border-soft);color:var(--text-4);font-size:.82rem}

/* ── Price / packages ── */
.price{font-family:var(--font-mono);color:var(--mint-400)}
.pkg{display:flex;flex-direction:column;gap:1.2rem;height:100%}
.pkg .amt{font-family:var(--font-display);font-weight:800;font-size:2.4rem;color:var(--text-1);letter-spacing:-.02em}
.pkg .amt small{font-size:.9rem;color:var(--text-3);font-weight:500}
.pkg.pop{border-color:color-mix(in srgb,var(--ga) 50%,transparent);box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--ga) 40%,transparent)}
.spec{display:flex;align-items:center;gap:.6em;font-size:.92rem;color:var(--text-2);padding:.3em 0}
.spec .ok{color:var(--mint-400);font-weight:700}

/* ── Game card (catalogue) ── */
.gcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border-1);background:var(--glass-1);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.gcard:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--gc,#7C3AED) 55%,var(--border-1));
  box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--gc,#7C3AED) 40%,transparent)}
.gcard .cover{aspect-ratio:16/9;display:grid;place-items:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--gc,#7C3AED) 85%,#000),color-mix(in srgb,var(--gc,#7C3AED) 35%,#06070D))}
.gcard .cover img{width:100%;height:100%;object-fit:cover;display:block}
.gcard .cover .mono-mark{font-family:var(--font-display);font-weight:800;font-size:2rem;color:#fff;opacity:.92;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.gcard .body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem}
.gcard .cat{font-size:.74rem;color:var(--text-4);text-transform:uppercase;letter-spacing:.08em}
.gcard .name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--text-1)}
.gcard .from{font-size:.85rem;color:var(--text-3);margin-top:auto}

/* ── FAQ accordion ── */
.acc{border:1px solid var(--border-1);border-radius:var(--r-md);overflow:hidden;background:var(--glass-1)}
.acc + .acc{margin-top:.8rem}
.acc summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--font-display);font-weight:600;color:var(--text-1);font-size:1.02rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-size:1.4rem;color:var(--ga);transition:transform .2s var(--ease)}
.acc[open] summary::after{transform:rotate(45deg)}
.acc .acc-body{padding:0 1.3rem 1.3rem;color:var(--text-2)}

/* ── hero ── */
.hero{padding-block:clamp(3.5rem,6vw,6rem) var(--section-pad);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}

/* ── reveal (fail-safe visible) ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in,.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none}}

/* ── responsive ── */
@media(max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-toggle{display:inline-flex}
  .hero-grid{grid-template-columns:1fr}
  .nav.open .nav-links{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:rgba(8,10,18,.98);
    border-bottom:1px solid var(--border-1);padding:1rem var(--gutter)}
}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}