/* ============================================================
   gc-site.css — game.cash site design system v2 ("Arena Editorial")
   Light editorial ground + dark cinematic arena cards. Pill nav, 28px radii,
   wide-tracked techno display type, neon-orange accent on cobalt.
   Load on every marketing/member page; in-game play screens stay dark.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* ground */
  --g-bg:#04040c;            /* dark page (the original game.cash ground) */
  --g-bg2:#09091a;           /* section alt / surface */
  --g-card:#0d0d20;
  --g-line:#16162e;
  --g-line-hi:#22224a;
  --g-ink:#e8ecf5;           /* text */
  --g-ink2:#aeb6c8;
  --g-muted:#7a8499;
  /* arena (dark cards / hero) */
  --a-bg:#070a14;
  --a-bg2:#0e1428;
  --a-cobalt:#6d28d9;        /* purple (old gradient end) */
  --a-line:rgba(255,255,255,.12);
  --a-ink:#f2f5fb;
  --a-muted:#9aa4c0;
  /* accents */
  --neon:#00d4ff;            /* cyan — CTA + glow (original primary) */
  --neon-ink:#04040c;        /* text on a neon button */
  --orange:#ff6a1a;          /* photo accent only */
  --neon-2:#33deff;
  --cyan:#00d4ff;
  --purple:#6d28d9;
  --green:#22c55e;
  --glow:0 0 24px rgba(0,212,255,.35), 0 0 64px rgba(0,212,255,.18);
  /* shape */
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-pill:999px;
  --shadow:0 10px 30px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 30px 80px rgba(0,0,0,.55);
  /* type */
  --f-display:'Michroma','Orbitron',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.gc-site{margin:0;background:var(--g-bg);color:var(--g-ink);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
.gc-site a{color:inherit;text-decoration:none}
.gc-site img{max-width:100%;display:block}

/* display type — wide, tracked, uppercase */
.gc-site .disp{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em;line-height:1.05;font-weight:400}
.gc-site .disp-xl{font-size:clamp(34px,6.2vw,76px)}
.gc-site .disp-lg{font-size:clamp(26px,4vw,48px)}
.gc-site .disp-md{font-size:clamp(18px,2.4vw,28px)}
.gc-site .disp-sm{font-size:12px;letter-spacing:.32em}
.gc-site .kick{font:700 11px/1 var(--f-body);letter-spacing:.3em;text-transform:uppercase;color:var(--g-muted)}
.gc-site .lead{font-size:clamp(16px,1.4vw,19px);color:var(--g-ink2);max-width:60ch}

/* layout */
.gc-site .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.gc-site .sec{padding:clamp(56px,8vw,112px) 0}
.gc-site .sec.alt{background:var(--g-bg2)}
.gc-site .grid{display:grid;gap:18px}
.gc-site .grid.c2{grid-template-columns:repeat(2,1fr)}
.gc-site .grid.c3{grid-template-columns:repeat(3,1fr)}
.gc-site .grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.gc-site .grid.c4{grid-template-columns:repeat(2,1fr)}.gc-site .grid.c3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.gc-site .grid.c2,.gc-site .grid.c3,.gc-site .grid.c4{grid-template-columns:1fr}}

/* pill nav */
.gc-site .nav{position:sticky;top:0;z-index:50;padding:14px clamp(12px,3vw,28px);display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(180deg,rgba(4,4,12,.92),rgba(4,4,12,.7));backdrop-filter:blur(14px)}
.gc-site .pill{display:inline-flex;align-items:center;gap:4px;padding:6px;border:1px solid var(--g-line);background:var(--g-card);border-radius:var(--r-pill);box-shadow:var(--shadow)}
.gc-site .pill a,.gc-site .pill button{font:600 14px var(--f-body);color:var(--g-ink);padding:10px 18px;border-radius:var(--r-pill);border:none;background:transparent;cursor:pointer;white-space:nowrap}
.gc-site .pill a.on,.gc-site .pill a:hover{background:#14142a}
.gc-site .brand{font-family:var(--f-display);font-size:15px;letter-spacing:.18em;text-transform:uppercase;padding:0 14px}
.gc-site .brand i{color:var(--neon);font-style:normal}

/* buttons */
.gc-site .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;border:none;border-radius:var(--r-pill);
  font:700 15px var(--f-body);letter-spacing:.01em;padding:16px 26px;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.gc-site .btn:active{transform:translateY(1px)}
.gc-site .btn-neon{background:var(--neon);color:var(--neon-ink);box-shadow:var(--glow)}
.gc-site .btn-neon:hover{background:var(--neon-2);box-shadow:0 0 34px rgba(0,212,255,.5),0 0 90px rgba(0,212,255,.25)}
.gc-site .btn-dark{background:linear-gradient(135deg,#00d4ff,#6d28d9);color:#fff}
.gc-site .btn-dark:hover{filter:brightness(1.1)}
.gc-site .btn-light{background:rgba(0,212,255,.07);color:var(--neon);border:1px solid rgba(0,212,255,.35);box-shadow:none}
.gc-site .btn-light:hover{background:rgba(0,212,255,.14)}
.gc-site .btn-ghost{background:transparent;color:var(--a-ink);border:1px solid var(--a-line)}
.gc-site .btn-ghost:hover{background:rgba(255,255,255,.06)}
.gc-site .btn-lg{padding:20px 34px;font-size:17px}
.gc-site .btn-sm{padding:10px 16px;font-size:13px}
.gc-site .btn-disp{font-family:var(--f-display);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:400}
/* circular arrow button (reference: small "↗" chips on cards) */
.gc-site .arrow{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#00d4ff,#6d28d9);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.gc-site .arrow svg{width:16px;height:16px}

/* cards */
.gc-site .card{background:var(--g-card);border:1px solid var(--g-line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:22px}
.gc-site .card.dark{background:var(--a-bg);color:var(--a-ink);border-color:var(--a-line)}
.gc-site .card.dark .kick{color:var(--a-muted)}
.gc-site .photo{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--a-bg2)}
.gc-site .photo img{width:100%;height:100%;object-fit:cover}
.gc-site .photo .cap{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(9,9,26,.9);color:var(--g-ink);border:1px solid var(--g-line-hi);border-radius:var(--r-lg);padding:12px 12px 12px 16px;font:600 14px var(--f-body)}
/* arena hero surface: deep cobalt → black with orange haze */
.gc-site .arena{position:relative;overflow:hidden;border-radius:var(--r-xl);color:var(--a-ink);
  background:radial-gradient(120% 90% at 70% 20%,#3b1a8a 0%,#1a0f4a 35%,#070a14 75%)}
.gc-site .arena::after{content:"";position:absolute;inset:auto -20% -30% -20%;height:60%;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%,rgba(0,212,255,.35),transparent 70%)}
.gc-site .arena>*{position:relative;z-index:1}
.gc-site .glowline{height:2px;background:linear-gradient(90deg,transparent,var(--neon),transparent);box-shadow:var(--glow)}

/* chips / stats */
.gc-site .chip{display:inline-flex;align-items:center;gap:6px;font:700 11px var(--f-body);letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r-pill);background:#14142a;color:var(--g-ink2)}
.gc-site .chip.neon{background:rgba(0,212,255,.14);color:var(--neon)}
.gc-site .chip.cyan{background:rgba(109,40,217,.25);color:#c4b5fd}
.gc-site .stat b{display:block;font-family:var(--f-display);font-size:clamp(26px,3.4vw,40px);letter-spacing:.02em}
.gc-site .stat span{font-size:13px;color:var(--g-muted)}

/* sticky mobile CTA bar */
.gc-site .cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(4,4,12,.9);backdrop-filter:blur(14px);border-top:1px solid var(--g-line);display:none;gap:10px}
.gc-site .cta-bar .btn{flex:1}
@media(max-width:760px){.gc-site .cta-bar{display:flex}.gc-site .has-cta-bar{padding-bottom:84px}}

/* motion */
@media(prefers-reduced-motion:no-preference){
  .gc-site .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  .gc-site .reveal.in{opacity:1;transform:none}
  .gc-site .float{animation:gc-float 6s ease-in-out infinite}
  @keyframes gc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .gc-site .pulse{animation:gc-pulse 2.2s ease-in-out infinite}
  @keyframes gc-pulse{0%,100%{box-shadow:var(--glow)}50%{box-shadow:0 0 40px rgba(0,212,255,.6),0 0 100px rgba(0,212,255,.3)}}
}
/* footer */
.gc-site .foot{padding:40px 0 60px;color:var(--g-muted);font-size:13px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.gc-site .foot .disp-sm{color:var(--g-ink)}

/* a11y + anchors (added with hub v2) */
.gc-site :focus-visible{outline:3px solid var(--neon);outline-offset:3px;border-radius:var(--r-md)}
.gc-site .pill a:focus-visible,.gc-site .btn:focus-visible,.gc-site .arrow:focus-visible{border-radius:var(--r-pill)}
html.gc-html{scroll-behavior:smooth;scroll-padding-top:88px}
@media(prefers-reduced-motion:reduce){html.gc-html{scroll-behavior:auto}}
.gc-site .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── v2.1: brand mark + mobile-first fixes ─────────────────────────── */
.gc-site .brand{display:inline-flex;align-items:center;gap:0}
.gc-site .brand .mark{width:26px;height:26px;flex-shrink:0;border-radius:6px;margin-right:9px}
body.gc-site{overflow-x:hidden;max-width:100vw}
.gc-site .nav{flex-wrap:wrap}
.gc-site .pill{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gc-site .pill::-webkit-scrollbar{display:none}
@media(max-width:760px){
  .gc-site .nav{padding:10px 12px;gap:8px}
  .gc-site .pill{padding:4px}
  .gc-site .pill a,.gc-site .pill button{padding:9px 12px;font-size:13px}
  .gc-site .brand{font-size:13px;letter-spacing:.14em;padding:0 10px}
  .gc-site .brand .mark{width:22px;height:22px}
  .gc-site .disp-xl{font-size:clamp(30px,9.4vw,44px);letter-spacing:.04em}
  .gc-site .disp-lg{font-size:clamp(24px,7.5vw,34px)}
  .gc-site .lead{font-size:15px}
  .gc-site .sec{padding:40px 0}
  .gc-site .wrap{padding:0 16px}
  .gc-site .btn{padding:14px 20px;font-size:15px}
  .gc-site .btn-lg{padding:16px 24px;font-size:16px}
  .gc-site .card{padding:18px;border-radius:22px}
  .gc-site .photo{border-radius:22px}
  .gc-site .grid{gap:12px}
}

/* ── v2.2: original angular buttons, contrast lift, iOS horizontal-pan lock ─────────── */
:root{
  --g-ink:#f4f6fb; --g-ink2:#c9d0e0; --g-muted:#9aa3bb;
  --g-card:#0f1027; --g-bg2:#0b0c1e; --g-line:#262a4f; --g-line-hi:#3b4176;
  --a-muted:#b4bcd6;
  --clip:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  --clip-box:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
/* buttons: the game.cash angular cut, uppercase tracked label (same as the original site) */
.gc-site .btn,.gc-site a.btn,.gc-site button.btn{border-radius:0;clip-path:var(--clip);font:800 12px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:14px 24px;box-shadow:none}
.gc-site .btn-lg{padding:18px 30px;font-size:13px}
.gc-site .btn-sm{padding:10px 16px;font-size:11px}
.gc-site .btn-neon{background:var(--neon);color:#04040c}
.gc-site .btn-neon:hover{background:#33deff;filter:drop-shadow(0 0 14px rgba(0,212,255,.55))}
.gc-site .btn-dark{background:linear-gradient(135deg,#00d4ff,#6d28d9);color:#fff}
.gc-site .btn-light{background:rgba(0,212,255,.08);color:var(--neon);border:none;box-shadow:inset 0 0 0 1px rgba(0,212,255,.45)}
.gc-site .btn-light:hover{background:rgba(0,212,255,.16)}
.gc-site .btn-ghost{background:rgba(255,255,255,.04);color:#fff;border:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.gc-site .btn:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:0}
.gc-site .pill .btn{clip-path:var(--clip)}
/* neon CTA glow lives on a wrapper-free drop-shadow so the clip-path keeps it */
.gc-site .btn-neon.pulse{animation:gc-ctaglow 2.4s ease-in-out infinite}
@keyframes gc-ctaglow{0%,100%{filter:drop-shadow(0 0 6px rgba(0,212,255,.35))}50%{filter:drop-shadow(0 0 16px rgba(0,212,255,.7))}}
/* contrast: readable secondary text, crisper card edges */
.gc-site .lead{color:var(--g-ink2)}
.gc-site .kick{color:#a9b2cc}
.gc-site .card{border-color:var(--g-line);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 14px 34px rgba(0,0,0,.45)}
.gc-site .card.dark{border-color:var(--g-line-hi)}
.gc-site .chip{color:#dfe4f2;background:#1a1d3a}
.gc-site .stat span{color:#b1b9cf}
.gc-site .photo .cap{background:rgba(8,9,24,.94);border-color:var(--g-line-hi)}
.gc-site .foot{color:#9aa3bb}
/* iOS: stop sideways panning entirely — only explicit horizontal scrollers may pan-x */
html{overflow-x:hidden}
body.gc-site{position:relative;overflow-x:clip;touch-action:pan-y pinch-zoom}
.gc-site .pill,.gc-site .hscroll,.gc-site .tscroll{touch-action:pan-x pan-y}
@media(max-width:360px){.gc-site .chip{font-size:9.5px;padding:6px 9px;letter-spacing:.1em}}