/* ==========================================================
   Mandel Play — core stylesheet
   Palette derived from the studio reference in DESIGN.md:
   near-black canvas, warm cream type, green as the single
   brand accent, orange and light-green as secondary signals.
   ========================================================== */

:root {
  --g7vd-bg: #0e100f;
  --g7vd-c1: #0ae448;
  --g7vd-c2: #ff8709;
  --g7vd-c3: #abff84;
  --g7vd-ct: #0e100f;
  --g7vd-tx: #fffce1;
  --g7vd-cd: #191919;
  --g7vd-br: #42433d;
  --g7vd-r:  8px;

  --g7vd-mut: #7c7c6f;
  --g7vd-lil: #9d95ff;
  --g7vd-blu: #00bae2;
  --g7vd-pnk: #fec5fb;
  --g7vd-pill: 100px;
  --g7vd-max: 1180px;
  --g7vd-grad: linear-gradient(114.41deg, #0ae448 20.74%, #abff84 65.5%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--g7vd-bg);
  color: var(--g7vd-tx);
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }
ul { list-style: none; }

::selection { background: var(--g7vd-c1); color: var(--g7vd-ct); }

/* ---------- HEADER ---------- */
.g7vd-hdr    { position:fixed; top:0; left:0; right:0; height:64px; z-index:100;
               background:var(--g7vd-bg); border-bottom:1px solid var(--g7vd-br); }
.g7vd-hdr-in { display:flex; align-items:center; gap:1rem; padding:0 1.5rem; height:100%; }

.g7vd-lg     { display:flex; align-items:center; gap:.55rem; text-decoration:none;
               color:var(--g7vd-tx); font-weight:800; font-size:1.02rem; letter-spacing:-.02em; }
.g7vd-lg svg { color:var(--g7vd-c1); flex-shrink:0; }

.g7vd-nav    { display:flex; gap:.25rem; margin-left:auto; }
.g7vd-nl     { padding:10px .7rem; font-size:.86rem; color:var(--g7vd-mut); text-decoration:none;
               border-radius:var(--g7vd-pill); transition:color .2s; white-space:nowrap; }
.g7vd-nl:hover  { color:var(--g7vd-tx); }
.g7vd-nl.active { color:var(--g7vd-c1); }

.g7vd-act    { display:flex; gap:.5rem; align-items:center; }
.g7vd-au     { color:var(--g7vd-tx); font-size:.82rem; }

/* credits pill in the bar */
.g7vd-eco     { display:flex; align-items:center; gap:.5rem; text-decoration:none;
                padding:.3rem .75rem .3rem .35rem; border-radius:50px;
                border:1px solid var(--g7vd-br); background:var(--g7vd-cd);
                transition:border-color .2s; }
.g7vd-eco:hover { border-color:var(--g7vd-c1); }
.g7vd-eco-lvl { font-size:.6rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
                padding:.2rem .5rem; border-radius:50px; color:var(--g7vd-c1);
                background:color-mix(in srgb, var(--g7vd-c1) 14%, transparent); }
.g7vd-eco-cr  { font-size:.74rem; color:var(--g7vd-tx); opacity:.75; white-space:nowrap; }
.g7vd-eco-cr b{ color:var(--g7vd-c3); font-weight:900; font-variant-numeric:tabular-nums; opacity:1; }

/* HBG-D — square outlined trigger, whole button turns 90deg when open */
.g7vd-hbg     { display:none; flex-direction:column; gap:5px; cursor:pointer;
                border:1px solid var(--g7vd-br); background:none; padding:8px;
                width:40px; height:40px; align-items:center; justify-content:center;
                border-radius:var(--g7vd-r); transition:transform .3s, border-color .2s; }
.g7vd-hbg:hover { border-color:var(--g7vd-c1); }
.g7vd-hbg span{ display:block; width:20px; height:2px; background:var(--g7vd-tx); border-radius:2px;
                transition:transform .3s, opacity .2s, width .3s; }
.g7vd-hbg.open{ transform:rotate(90deg); border-color:var(--g7vd-c1); }
.g7vd-hbg.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.g7vd-hbg.open span:nth-child(2) { opacity:0; }
.g7vd-hbg.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------- BUTTONS — outlined pills, one gradient-stroked exception ---------- */
.g7vd-btn     { display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
                padding:13px 24px; border-radius:var(--g7vd-pill); border:1px solid var(--g7vd-tx);
                background:none; color:var(--g7vd-tx); font-size:.88rem; font-weight:700;
                line-height:1.05; letter-spacing:-.01em; cursor:pointer; text-decoration:none;
                transition:border-color .2s, color .2s, opacity .2s; }
.g7vd-btn:hover    { opacity:.78; }
.g7vd-btn-ol       { border-color:var(--g7vd-br); color:var(--g7vd-tx); }
.g7vd-btn-ol:hover { border-color:var(--g7vd-tx); opacity:1; }
.g7vd-btn-cta      { border:1.5px solid transparent; color:var(--g7vd-tx);
                     background:linear-gradient(var(--g7vd-bg),var(--g7vd-bg)) padding-box,
                                var(--g7vd-grad) border-box; }
.g7vd-btn-cta:hover{ opacity:.85; }
.g7vd-act .g7vd-btn { padding:9px 16px; font-size:.78rem; }

/* ---------- SIDEBAR (grouped) ---------- */
.g7vd-sb  { position:fixed; top:64px; left:0; width:220px; height:calc(100vh - 64px);
            background:var(--g7vd-cd); border-right:1px solid var(--g7vd-br);
            overflow-y:auto; z-index:90; display:flex; flex-direction:column;
            transition:transform .3s, width .3s; }
.g7vd-sb-nav { padding:1rem 0 .5rem; }
.g7vd-sb-grp { font-size:.65rem; letter-spacing:.1em; opacity:.5; text-transform:uppercase;
               font-weight:800; padding:.9rem 1.25rem .4rem; color:var(--g7vd-tx); }
.g7vd-sb-grp:first-child { padding-top:0; }
.g7vd-sbl { display:flex; align-items:center; gap:.75rem; padding:.65rem 1.25rem;
            color:var(--g7vd-tx); font-weight:600; font-size:.88rem;
            text-decoration:none; border-left:3px solid transparent; transition:all .2s; }
.g7vd-sbl:hover, .g7vd-sbl.active { color:var(--g7vd-c1); background:rgba(255,255,255,.04); }
.g7vd-sbl.active { border-left-color:var(--g7vd-c1); }
.g7vd-sbf { margin-top:auto; padding:1rem; border-top:1px solid var(--g7vd-br);
            display:flex; flex-direction:column; gap:.4rem; }
.g7vd-sbf a { font-size:.75rem; color:var(--g7vd-tx); opacity:.6; text-decoration:none; }
.g7vd-sbf a:hover { opacity:1; color:var(--g7vd-c1); }
.g7vd-sbo { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:140; display:none; top:64px; }
.g7vd-sbo.show { display:block; }

.g7vd-sb-auth { display:none; padding:.75rem 1rem; border-top:1px solid var(--g7vd-br);
                gap:.5rem; flex-direction:column; }
.g7vd-sb-auth > div { display:flex; flex-direction:column; gap:.5rem; }

/* ---------- MOBILE BOTTOM NAV ---------- */
.g7vd-mn  { display:none; position:fixed; bottom:0; left:0; right:0; height:60px;
            background:var(--g7vd-cd); border-top:1px solid var(--g7vd-br); z-index:160; }
.g7vd-mni { background:none; border:none; cursor:pointer; text-decoration:none;
            color:var(--g7vd-tx); font-size:.7rem; font-weight:700; opacity:.75;
            padding:.5rem .6rem; letter-spacing:-.01em; }
.g7vd-mni:hover { opacity:1; color:var(--g7vd-c1); }

/* ---------- LAYOUT ---------- */
.g7vd-main { margin-left:220px; padding-top:64px; min-height:100vh; }
.g7vd-wrap { max-width:var(--g7vd-max); margin:0 auto; padding:0 1.5rem; }
.g7vd-sec  { padding:80px 0; border-top:1px solid var(--g7vd-br); }
.g7vd-sec:first-of-type { border-top:none; }

.g7vd-eyebrow { font-size:.86rem; color:var(--g7vd-tx); opacity:.75; margin-bottom:1rem;
                font-weight:400; letter-spacing:0; }
.g7vd-h2      { font-size:clamp(1.9rem,4.4vw,2.9rem); font-weight:800; line-height:1.12;
                letter-spacing:-.022em; color:var(--g7vd-tx); }
.g7vd-lead    { margin-top:1rem; max-width:640px; font-size:1.02rem; line-height:1.62;
                color:var(--g7vd-tx); opacity:.72; }
.g7vd-acc-g { color:var(--g7vd-c1); }
.g7vd-acc-o { color:var(--g7vd-c2); }
.g7vd-acc-l { color:var(--g7vd-lil); }
.g7vd-acc-b { color:var(--g7vd-blu); }

/* ---------- HERO (minimal typographic) ---------- */
.g7vd-hero    { padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(3rem,6vw,5rem); }
.g7vd-hero h1 { font-size:clamp(3rem,9.5vw,7.5rem); font-weight:800; line-height:.94;
                letter-spacing:-.032em; max-width:14ch; }
.g7vd-hero-sub{ margin-top:1.75rem; max-width:560px; font-size:1.06rem; line-height:1.62;
                color:var(--g7vd-tx); opacity:.72; }
.g7vd-hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }
.g7vd-hero-note { margin-top:1.5rem; font-size:.72rem; opacity:.4; letter-spacing:.02em; }

/* ---------- CAROUSEL (editorial numbered) ---------- */
.g7vd-cr-head { display:flex; align-items:flex-end; justify-content:space-between;
                gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.g7vd-cr-nav  { display:flex; gap:.5rem; }
.g7vd-crb     { width:44px; height:44px; border-radius:50%; border:1px solid var(--g7vd-br);
                background:none; color:var(--g7vd-tx); font-size:1rem; cursor:pointer;
                transition:border-color .2s, color .2s; }
.g7vd-crb:hover { border-color:var(--g7vd-c1); color:var(--g7vd-c1); }
.g7vd-cr      { overflow:hidden; }
.g7vd-cr-track{ display:flex; gap:16px; transition:transform .45s cubic-bezier(.22,1,.36,1); }
.g7vd-cr-track .g7vd-gc { flex:0 0 190px; }

/* ---------- GAME CARD (transparent border, accent on hover) ---------- */
.g7vd-gc  { position:relative; background:transparent; border:1px solid transparent;
            border-radius:var(--g7vd-r); padding:8px; cursor:pointer;
            transition:border-color .3s, transform .3s; outline:none; }
.g7vd-gc:hover, .g7vd-gc:focus-visible { border-color:var(--g7vd-c1); transform:translateY(-4px); }
.g7vd-gc-n{ font-size:2.4rem; font-weight:800; line-height:1; opacity:.15;
            letter-spacing:-.04em; margin-bottom:.35rem; font-variant-numeric:tabular-nums; }
.g7vd-gct { position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--g7vd-r);
            background:var(--g7vd-cd); }
.g7vd-gct img { width:100%; height:100%; object-fit:cover; }
.g7vd-gco { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
            background:rgba(14,16,15,.72); opacity:0; transition:opacity .3s; }
.g7vd-gc:hover .g7vd-gco, .g7vd-gc:focus-visible .g7vd-gco { opacity:1; }
.g7vd-gcp { border:1px solid var(--g7vd-tx); background:none; color:var(--g7vd-tx);
            border-radius:var(--g7vd-pill); padding:9px 16px; font-size:.72rem;
            font-weight:700; cursor:pointer; letter-spacing:.02em; }
.g7vd-gci { padding:.6rem .2rem 0; }

/* ---------- LOBBY ---------- */
.g7vd-nb  { border:1px solid var(--g7vd-br); border-left:3px solid var(--g7vd-c1);
            background:var(--g7vd-cd); border-radius:var(--g7vd-r);
            padding:.8rem 1.1rem; font-size:.76rem; opacity:.85; margin-bottom:2rem; }
.g7vd-srch{ width:100%; max-width:420px; padding:.8rem 1.1rem; background:var(--g7vd-cd);
            border:1px solid var(--g7vd-br); border-radius:var(--g7vd-pill);
            color:var(--g7vd-tx); font-size:.9rem; }
.g7vd-srch:focus { outline:none; border-color:var(--g7vd-c1); }
.g7vd-cts { display:flex; gap:.5rem; flex-wrap:wrap; margin:1.5rem 0 2rem; }
.g7vd-ct  { padding:9px 18px; border-radius:var(--g7vd-pill); border:1px solid var(--g7vd-br);
            background:none; color:var(--g7vd-tx); font-size:.8rem; font-weight:700;
            cursor:pointer; transition:all .2s; }
.g7vd-ct:hover   { border-color:var(--g7vd-tx); }
.g7vd-ct.active  { border-color:var(--g7vd-c1); color:var(--g7vd-c1); }
.g7vd-gg  { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1rem; }
.g7vd-empty { padding:3rem 0; opacity:.5; font-size:.9rem; }

/* ---------- HOW IT WORKS (oversized number behind card) ---------- */
.g7vd-works { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem;
              margin-top:2.5rem; }
.g7vd-work  { position:relative; overflow:hidden; border:1px solid var(--g7vd-br);
              border-radius:var(--g7vd-r); padding:1.75rem 1.5rem; background:var(--g7vd-cd); }
.g7vd-work-n{ position:absolute; right:.5rem; top:-1.5rem; font-size:8rem; font-weight:800;
              opacity:.08; line-height:1; letter-spacing:-.05em; pointer-events:none; }
.g7vd-work h3 { font-size:1.15rem; font-weight:800; letter-spacing:-.02em; margin-bottom:.5rem;
                position:relative; }
.g7vd-work p  { font-size:.88rem; line-height:1.62; opacity:.68; position:relative; }

/* ---------- BANNER (statistics) ---------- */
.g7vd-ban   { border:1px solid var(--g7vd-br); border-radius:var(--g7vd-r);
              padding:2.5rem 2rem; display:flex; flex-wrap:wrap; gap:2rem;
              align-items:center; justify-content:space-between; background:var(--g7vd-cd); }
.g7vd-ban-s { display:flex; gap:2.5rem; flex-wrap:wrap; }
.g7vd-ban-n { font-size:clamp(2rem,5vw,3.2rem); font-weight:800; line-height:1;
              letter-spacing:-.03em; color:var(--g7vd-c1); }
.g7vd-ban-k { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
              opacity:.5; margin-top:.4rem; }

/* ---------- REVIEWS (minimal list) ---------- */
.g7vd-rev   { margin-top:2.5rem; }
.g7vd-rev-r { display:grid; grid-template-columns:1fr auto; gap:.5rem 2rem;
              padding:1.6rem 0; border-top:1px solid var(--g7vd-br); }
.g7vd-rev-t { font-size:1rem; line-height:1.62; opacity:.82; max-width:70ch; }
.g7vd-rev-w { font-size:.78rem; opacity:.5; margin-top:.6rem; }
.g7vd-rev-s { color:var(--g7vd-c2); font-size:.85rem; letter-spacing:2px; white-space:nowrap; }

/* ---------- PROSE / CONTENT PAGES ---------- */
.g7vd-page   { padding:clamp(2.5rem,6vw,4.5rem) 0 5rem; }
.g7vd-page h1{ font-size:clamp(2.1rem,5.5vw,3.6rem); font-weight:800; line-height:1.06;
               letter-spacing:-.03em; max-width:18ch; }
.g7vd-prose  { max-width:68ch; }
.g7vd-prose h2 { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin:2.75rem 0 .85rem; }
.g7vd-prose h3 { font-size:1.05rem; font-weight:800; margin:1.75rem 0 .5rem; }
.g7vd-prose p  { font-size:.95rem; line-height:1.75; opacity:.72; margin-bottom:1rem; }
.g7vd-prose ul { margin:0 0 1.25rem; display:grid; gap:.55rem; }
.g7vd-prose li { font-size:.92rem; line-height:1.65; opacity:.72; padding-left:1.25rem;
                 position:relative; }
.g7vd-prose li::before { content:''; position:absolute; left:0; top:.62em; width:6px; height:6px;
                         border-radius:50%; background:var(--g7vd-c1); }
.g7vd-prose a  { color:var(--g7vd-c1); font-weight:700; }
.g7vd-prose strong { color:var(--g7vd-tx); opacity:1; }

.g7vd-note   { border:1px solid var(--g7vd-br); border-left:3px solid var(--g7vd-c2);
               border-radius:var(--g7vd-r); padding:1.25rem 1.4rem; margin:1.75rem 0;
               background:color-mix(in srgb, var(--g7vd-c2) 5%, transparent); }
.g7vd-note p { font-size:.88rem; line-height:1.7; opacity:.8; margin:0 0 .6rem; }
.g7vd-note p:last-child { margin-bottom:0; }

.g7vd-cards  { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
               gap:1rem; margin:1.75rem 0; }
.g7vd-card   { border:1px solid var(--g7vd-br); border-radius:var(--g7vd-r);
               padding:1.4rem; background:var(--g7vd-cd); }
.g7vd-card h3{ font-size:.98rem; font-weight:800; margin-bottom:.45rem; }
.g7vd-card p { font-size:.85rem; line-height:1.65; opacity:.66; }

.g7vd-faq details { border-bottom:1px solid var(--g7vd-br); }
.g7vd-faq summary { cursor:pointer; padding:1.1rem 0; font-weight:800; font-size:.92rem;
                    list-style:none; display:flex; justify-content:space-between; gap:1.5rem; }
.g7vd-faq summary::-webkit-details-marker { display:none; }
.g7vd-faq summary::after { content:'+'; color:var(--g7vd-c1); font-weight:400; font-size:1.3rem;
                           line-height:1; }
.g7vd-faq details[open] summary::after { content:'\2212'; }
.g7vd-faq p { padding:0 0 1.2rem; font-size:.9rem; line-height:1.72; opacity:.68; max-width:68ch; }

/* ---------- FORM ---------- */
.g7vd-form  { display:grid; gap:.85rem; max-width:520px; margin-top:2rem; }
.g7vd-inp   { padding:.85rem 1.1rem; background:var(--g7vd-cd); border:1px solid var(--g7vd-br);
              border-radius:var(--g7vd-r); color:var(--g7vd-tx); font-size:.9rem;
              font-family:inherit; width:100%; }
.g7vd-inp:focus { outline:none; border-color:var(--g7vd-c1); }
textarea.g7vd-inp { min-height:140px; resize:vertical; }
.g7vd-lbl   { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; opacity:.5;
              font-weight:800; margin-bottom:.35rem; display:block; }
.g7vd-ok    { display:none; border:1px solid var(--g7vd-c1); border-radius:var(--g7vd-r);
              padding:1rem 1.2rem; font-size:.88rem; color:var(--g7vd-c1);
              background:color-mix(in srgb, var(--g7vd-c1) 8%, transparent); margin-top:1rem; }

/* ---------- FOOTER ---------- */
.g7vd-ftr    { background:var(--g7vd-cd); border-top:1px solid var(--g7vd-br);
               padding:72px 0 60px; margin-left:220px; }
.g7vd-ftr-in { max-width:var(--g7vd-max); margin:0 auto; padding:0 1.5rem;
               display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2.5rem; }
.g7vd-ftr-b  { max-width:280px; }
.g7vd-ftr-b p{ font-size:.8rem; line-height:1.65; opacity:.5; margin-top:.85rem; }
.g7vd-ftr-h  { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
               font-weight:800; opacity:.45; margin-bottom:1rem; }
.g7vd-ftr-col a { display:block; font-size:.85rem; text-decoration:none; opacity:.7;
                  padding:.28rem 0; }
.g7vd-ftr-col a:hover { opacity:1; color:var(--g7vd-c1); }
.g7vd-ftr-dis{ max-width:var(--g7vd-max); margin:3rem auto 0; padding:1.75rem 1.5rem 0;
               border-top:1px solid var(--g7vd-br); font-size:.72rem; line-height:1.7;
               opacity:.45; }
.g7vd-ftr-dis strong { opacity:.8; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1280px) {
  .g7vd-ftr-in { grid-template-columns:1fr 1fr 1fr; }
  .g7vd-ftr-b  { grid-column:1 / -1; max-width:none; }
}

@media (max-width:1024px) {
  .g7vd-sb      { transform:translateX(-100%); top:64px !important;
                  height:calc(100vh - 64px) !important; z-index:150; }
  .g7vd-sb.open { transform:translateX(0); }
  .g7vd-sb-auth { display:flex; }
  .g7vd-main    { margin-left:0 !important; margin-right:0 !important; }
  .g7vd-ftr     { margin-left:0; }
  .g7vd-mn      { display:flex; align-items:center; justify-content:space-around; }
  body          { padding-bottom:60px; }
}

@media (max-width:768px) {
  .g7vd-hdr-in { justify-content:space-between; }
  .g7vd-hbg    { display:flex; }
  .g7vd-nav    { display:none; }
  .g7vd-act    { display:none; }
  .g7vd-sec    { padding:56px 0; }
  .g7vd-ftr-in { grid-template-columns:1fr 1fr; }
  .g7vd-rev-r  { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  body { font-size:15px; }
  .g7vd-gg { grid-template-columns:repeat(2,1fr); gap:.75rem; }
  .g7vd-cr-track .g7vd-gc { flex:0 0 80vw; }
  .g7vd-inp, .g7vd-srch, .g7vd-btn { min-height:48px; }
  .g7vd-ban-s { gap:1.5rem; }
  .g7vd-work-n { font-size:6rem; }
}

@media (max-width:375px) {
  .g7vd-hdr-in { padding:0 .75rem; }
  .g7vd-wrap   { padding:0 1rem; }
  .g7vd-gg     { gap:.5rem; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .g7vd-cr-track, .g7vd-gc { transition:none; }
}