/* ============================================================
   BuildSpin — style.css
   Design: Option G "Bronze Titan" | prefix g7qp
   Hero HERO-C diagonal | Carousel CAROUSEL-E numbered
   Sidebar SIDEBAR-E grouped | Card CARD-D glow-on-hover
   Works WORKS-D big-number | Reviews REVIEWS-B masonry
   Banner BANNER-E stats | Footer FOOTER-B 3-col | HBG-D bordered burger
   ============================================================ */

:root {
  --g7qp-bg: #0e0a06;
  --g7qp-c1: #CD7F32;            /* primary bronze */
  --g7qp-c2: #E8E8E8;           /* accent silver  */
  --g7qp-c3: #CD7F32;           /* cta bronze     */
  --g7qp-ct: #ffffff;          /* cta text       */
  --g7qp-tx: #d4c4a8;          /* body text      */
  --g7qp-cd: #1a1208;          /* card surface   */
  --g7qp-br: rgba(205,127,50,.25);
  --g7qp-r:  8px;
  --g7qp-bronze-grad: linear-gradient(135deg,#E8B873 0%,#CD7F32 45%,#8a4f1c 100%);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--g7qp-bg);
  color:var(--g7qp-tx);
  font-family:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,h4,.g7qp-display {
  font-family:'Bebas Neue', 'Arial Narrow', sans-serif;
  letter-spacing:.03em;
  line-height:1.04;
  color:#f3e6d2;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* metallic bronze headings accent */
.g7qp-metal {
  background:var(--g7qp-bronze-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ============ HEADER ============ */
.g7qp-hdr { position:fixed; top:0; left:0; right:0; height:64px; z-index:100; background:rgba(14,10,6,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--g7qp-br); }
.g7qp-hdr-in { display:flex; align-items:center; gap:1rem; padding:0 1.5rem; height:100%; max-width:1500px; margin:0 auto; }
.g7qp-lg { display:flex; align-items:center; gap:.55rem; font-family:'Bebas Neue',sans-serif; font-size:1.6rem; letter-spacing:.05em; color:#f3e6d2; }
.g7qp-lg svg { width:30px; height:30px; flex-shrink:0; }
.g7qp-nav { display:flex; gap:.15rem; margin-left:auto; }
.g7qp-nl { padding:.5rem .8rem; font-size:.86rem; font-weight:600; border-radius:var(--g7qp-r); color:var(--g7qp-tx); transition:color .2s, background .2s; }
.g7qp-nl:hover { color:var(--g7qp-c1); background:rgba(205,127,50,.08); }
.g7qp-nl.active { color:var(--g7qp-c1); background:rgba(205,127,50,.12); }
.g7qp-act { display:flex; gap:.5rem; align-items:center; }
.g7qp-au { align-items:center; gap:.5rem; }
.g7qp-au span { font-weight:700; font-size:.85rem; color:var(--g7qp-c1); }

/* ============ BUTTONS ============ */
.g7qp-btn { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.85rem; padding:.55rem 1.1rem; border-radius:var(--g7qp-r); border:1px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s, color .2s; font-family:inherit; text-decoration:none; white-space:nowrap; }
.g7qp-btn:active { transform:translateY(1px); }
.g7qp-btn-cta { background:var(--g7qp-bronze-grad); color:var(--g7qp-ct); box-shadow:0 4px 14px rgba(205,127,50,.3); }
.g7qp-btn-cta:hover { box-shadow:0 6px 20px rgba(205,127,50,.5); transform:translateY(-1px); }
.g7qp-btn-ol { background:transparent; color:var(--g7qp-tx); border:1px solid var(--g7qp-br); }
.g7qp-btn-ol:hover { border-color:var(--g7qp-c1); color:var(--g7qp-c1); }
.g7qp-btn-lg { font-size:1rem; padding:.85rem 1.8rem; }

/* ============ HAMBURGER (HBG-D bordered button, rotate→X) ============ */
.g7qp-hbg { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:9px 8px; border:1px solid var(--g7qp-br); border-radius:var(--g7qp-r); background:transparent; cursor:pointer; transition:transform .3s ease, border-color .3s; }
.g7qp-hbg span { display:block; width:100%; height:2px; background:var(--g7qp-tx); border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.g7qp-hbg.open { transform:rotate(90deg); border-color:var(--g7qp-c1); }
.g7qp-hbg.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.g7qp-hbg.open span:nth-child(2) { opacity:0; }
.g7qp-hbg.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ============ SIDEBAR (SIDEBAR-E grouped, left 220px) ============ */
.g7qp-sb { position:fixed; top:64px; left:0; width:220px; height:calc(100vh - 64px); background:var(--g7qp-cd); border-right:1px solid var(--g7qp-br); overflow-y:auto; z-index:90; display:flex; flex-direction:column; transition:transform .3s, width .3s; }
.g7qp-sb-grp { padding:.9rem 1.25rem .25rem; font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.45; }
.g7qp-sb-grp:first-child { padding-top:1.1rem; }
.g7qp-sbl { display:flex; align-items:center; gap:.7rem; padding:.6rem 1.25rem; color:var(--g7qp-tx); font-weight:600; font-size:.86rem; transition:all .2s; border-left:3px solid transparent; }
.g7qp-sbl svg { width:17px; height:17px; flex-shrink:0; opacity:.8; }
.g7qp-sbl:hover, .g7qp-sbl.active { color:var(--g7qp-c1); background:rgba(205,127,50,.08); border-left-color:var(--g7qp-c1); }
.g7qp-sb-div { height:1px; background:var(--g7qp-br); margin:.5rem 1.25rem; }
.g7qp-sb__auth { display:none; padding:.85rem 1rem; border-top:1px solid var(--g7qp-br); gap:.5rem; flex-direction:column; }
.g7qp-sb__auth > div { display:flex; flex-direction:column; gap:.5rem; }
.g7qp-sb__auth .g7qp-btn { justify-content:center; }
.g7qp-sb__auth #sidebar-username { font-weight:700; color:var(--g7qp-c1); text-align:center; }
@media (max-width:1024px) { .g7qp-sb__auth { display:flex; } }
.g7qp-sbf { margin-top:auto; padding:1rem 1.25rem; border-top:1px solid var(--g7qp-br); }
.g7qp-sbf p { font-size:.66rem; opacity:.5; }
.g7qp-sbo { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:190; display:none; }
.g7qp-sbo.show { display:block; }

@media (min-width:1024px) { .g7qp-main, .g7qp-ftr { margin-left:220px; } }

/* mobile sidebar = drawer */
@media (max-width:1024px) {
  .g7qp-sb { transform:translateX(-100%); top:64px !important; height:calc(100vh - 64px) !important; z-index:200; width:260px; }
  .g7qp-sb.open { transform:translateX(0); }
  .g7qp-sbo { top:64px; z-index:140; }
  .g7qp-main { margin-left:0 !important; margin-right:0 !important; }
}

/* ============ MOBILE BOTTOM NAV ============ */
.g7qp-mn { display:none; position:fixed; bottom:0; left:0; right:0; height:60px; background:var(--g7qp-cd); border-top:1px solid var(--g7qp-br); z-index:150; }
.g7qp-mni { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:none; border:none; color:var(--g7qp-tx); font-size:.72rem; font-weight:600; font-family:inherit; cursor:pointer; }
.g7qp-mni:hover { color:var(--g7qp-c1); }
@media (max-width:1024px) { .g7qp-mn { display:flex; align-items:center; justify-content:space-around; } body { padding-bottom:60px; } }
@media (min-width:1024px) { body { padding-bottom:0; } }

/* ============ LAYOUT / SECTIONS ============ */
.g7qp-main { padding-top:64px; min-height:100vh; }
.g7qp-sec { max-width:1280px; margin:0 auto; padding:3.5rem 1.5rem; }
.g7qp-sec-head { margin-bottom:1.75rem; }
.g7qp-sec-head h2 { font-size:2.4rem; }
.g7qp-sec-head p { opacity:.7; max-width:640px; margin-top:.4rem; }
.g7qp-eyebrow { display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--g7qp-c1); margin-bottom:.5rem; }

.g7qp-nb { background:rgba(205,127,50,.1); border-bottom:1px solid var(--g7qp-br); text-align:center; font-size:.78rem; font-weight:600; padding:.6rem 1rem; color:var(--g7qp-tx); }

/* ============ HERO (HERO-C diagonal cut) ============ */
.g7qp-hero { position:relative; background:radial-gradient(circle at 80% 20%, rgba(205,127,50,.16), transparent 55%), var(--g7qp-bg); clip-path:polygon(0 0,100% 0,100% 85%,0 100%); padding:5rem 1.5rem 7rem; overflow:hidden; }
.g7qp-hero-in { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center; }
.g7qp-hero h1 { font-size:clamp(2.8rem,6vw,5rem); }
.g7qp-hero p.lead { font-size:1.1rem; opacity:.85; margin:1.1rem 0 1.8rem; max-width:560px; }
.g7qp-hero-cta { display:flex; gap:.75rem; flex-wrap:wrap; }
.g7qp-hero-disc { margin-top:1.5rem; font-size:.72rem; opacity:.6; }
.g7qp-hero-art { position:relative; height:280px; }
.g7qp-hero-dot { position:absolute; border-radius:50%; }
.g7qp-hero-dot.d1 { width:160px; height:160px; right:10%; top:10%; background:var(--g7qp-bronze-grad); opacity:.25; filter:blur(4px); }
.g7qp-hero-dot.d2 { width:90px; height:90px; right:45%; top:50%; border:2px solid var(--g7qp-c1); opacity:.5; }
.g7qp-hero-dot.d3 { width:46px; height:46px; right:20%; bottom:8%; background:var(--g7qp-c2); opacity:.3; }
.g7qp-hero-grid-decor { position:absolute; right:6%; top:25%; display:grid; grid-template-columns:repeat(3,34px); gap:8px; }
.g7qp-hero-grid-decor i { width:34px; height:34px; border:1px solid var(--g7qp-br); border-radius:4px; display:block; }
.g7qp-hero-grid-decor i:nth-child(3n) { background:rgba(205,127,50,.18); }
@media (max-width:860px) {
  .g7qp-hero { clip-path:polygon(0 0,100% 0,100% 93%,0 100%); }
  .g7qp-hero-in { grid-template-columns:1fr; }
  .g7qp-hero-art { display:none; }
}

/* ============ GAME CARD (CARD-D transparent border → glow) ============ */
.g7qp-gc { position:relative; background:var(--g7qp-cd); border:1px solid transparent; border-radius:var(--g7qp-r); overflow:hidden; cursor:pointer; transition:border-color .3s, box-shadow .3s, transform .3s; }
.g7qp-gc:hover, .g7qp-gc:focus-visible { border-color:var(--g7qp-c1); box-shadow:0 0 0 1px var(--g7qp-c1), 0 8px 26px rgba(205,127,50,.28); transform:translateY(-4px); outline:none; }
.g7qp-gct { position:relative; aspect-ratio:3/4; background:#120c05; overflow:hidden; }
.g7qp-gct img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.g7qp-gc:hover .g7qp-gct img { transform:scale(1.06); }
.g7qp-gco { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; background:rgba(14,10,6,.72); opacity:0; transition:opacity .3s; }
.g7qp-gc:hover .g7qp-gco, .g7qp-gc:focus-visible .g7qp-gco { opacity:1; }
.g7qp-gcp { background:var(--g7qp-bronze-grad); color:var(--g7qp-ct); border:none; font-weight:900; font-size:.8rem; padding:.55rem 1.2rem; border-radius:50px; cursor:pointer; letter-spacing:.04em; }
.g7qp-gci { padding:.6rem .7rem .75rem; }
/* CAROUSEL-E big editorial number */
.g7qp-gc-num { position:absolute; top:-.2rem; left:.1rem; z-index:3; font-family:'Bebas Neue',sans-serif; font-size:3rem; line-height:1; color:#fff; opacity:.16; pointer-events:none; }

/* ============ CAROUSEL (CAROUSEL-E numbered, horizontal) ============ */
.g7qp-cr-wrap { position:relative; }
.g7qp-cr-vp { overflow:hidden; }
.g7qp-cr { display:flex; gap:1rem; transition:transform .4s ease; }
.g7qp-cr .g7qp-gc { flex:0 0 200px; width:200px; }
.g7qp-crb { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:var(--g7qp-cd); border:1px solid var(--g7qp-br); color:var(--g7qp-c1); font-size:1.2rem; cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s; }
.g7qp-crb:hover { background:var(--g7qp-c1); color:#111; border-color:var(--g7qp-c1); }
.g7qp-crb.prev { left:-12px; }
.g7qp-crb.next { right:-12px; }
@media (max-width:768px) { .g7qp-crb { display:none; } .g7qp-cr-vp { overflow-x:auto; } }

/* ============ GAMES GRID (games.html) ============ */
.g7qp-tools { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:1.25rem; }
.g7qp-search { flex:1; min-width:220px; background:var(--g7qp-cd); border:1px solid var(--g7qp-br); border-radius:var(--g7qp-r); padding:.7rem 1rem; color:var(--g7qp-tx); font-size:.9rem; font-family:inherit; }
.g7qp-search:focus { outline:none; border-color:var(--g7qp-c1); }
.g7qp-cts { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.g7qp-ct { background:var(--g7qp-cd); border:1px solid var(--g7qp-br); color:var(--g7qp-tx); font-weight:700; font-size:.82rem; padding:.5rem 1rem; border-radius:50px; cursor:pointer; font-family:inherit; transition:all .2s; }
.g7qp-ct:hover { border-color:var(--g7qp-c1); color:var(--g7qp-c1); }
.g7qp-ct.active { background:var(--g7qp-bronze-grad); color:var(--g7qp-ct); border-color:transparent; }
.g7qp-gg { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1.1rem; }

/* ============ HOW IT WORKS (WORKS-D big number bg) ============ */
.g7qp-works { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.g7qp-work { position:relative; background:var(--g7qp-cd); border:1px solid var(--g7qp-br); border-radius:var(--g7qp-r); padding:2rem 1.5rem; overflow:hidden; }
.g7qp-work-num { position:absolute; right:.5rem; top:-1.5rem; font-family:'Bebas Neue',sans-serif; font-size:8rem; line-height:1; color:var(--g7qp-c1); opacity:.08; pointer-events:none; }
.g7qp-work h3 { font-size:1.5rem; color:var(--g7qp-c1); margin-bottom:.5rem; position:relative; }
.g7qp-work p { font-size:.9rem; opacity:.8; position:relative; }
@media (max-width:760px) { .g7qp-works { grid-template-columns:1fr; } }

/* ============ BANNER (BANNER-E stats) ============ */
.g7qp-banner { background:linear-gradient(135deg, rgba(205,127,50,.14), rgba(26,18,8,.6)); border:1px solid var(--g7qp-br); border-radius:var(--g7qp-r); padding:2.5rem 2rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; }
.g7qp-stats { display:flex; gap:2.5rem; flex-wrap:wrap; }
.g7qp-stat .n { font-family:'Bebas Neue',sans-serif; font-size:3rem; line-height:1; color:transparent; background:var(--g7qp-bronze-grad); -webkit-background-clip:text; background-clip:text; }
.g7qp-stat .l { font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }

/* ============ REVIEWS (REVIEWS-B masonry columns:3) ============ */
.g7qp-reviews { columns:3; column-gap:1.25rem; }
.g7qp-rev { break-inside:avoid; background:var(--g7qp-cd); border:1px solid var(--g7qp-br); border-radius:var(--g7qp-r); padding:1.4rem; margin-bottom:1.25rem; }
.g7qp-rev-stars { color:var(--g7qp-c1); letter-spacing:.15em; font-size:.85rem; margin-bottom:.6rem; }
.g7qp-rev p { font-size:.9rem; opacity:.9; margin-bottom:.9rem; }
.g7qp-rev .who { display:flex; align-items:center; gap:.6rem; }
.g7qp-rev .av { width:34px; height:34px; border-radius:50%; background:var(--g7qp-bronze-grad); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:.85rem; }
.g7qp-rev .nm { font-weight:700; font-size:.85rem; }
.g7qp-rev .ct { font-size:.72rem; opacity:.55; }
@media (max-width:900px) { .g7qp-reviews { columns:2; } }
@media (max-width:560px) { .g7qp-reviews { columns:1; } }

/* ============ SEO / PROSE ============ */
.g7qp-prose { max-width:820px; }
.g7qp-prose h2 { font-size:2rem; margin-bottom:1rem; }
.g7qp-prose h3 { font-size:1.4rem; margin:1.5rem 0 .6rem; color:var(--g7qp-c1); }
.g7qp-prose p { margin-bottom:1rem; opacity:.85; }
.g7qp-prose ul { margin:0 0 1rem 1.25rem; }
.g7qp-prose li { margin-bottom:.4rem; opacity:.85; }
.g7qp-prose a { color:var(--g7qp-c1); font-weight:600; }

/* ============ FAQ ============ */
.g7qp-faq { max-width:820px; }
.g7qp-faq details { background:var(--g7qp-cd); border:1px solid var(--g7qp-br); border-radius:var(--g7qp-r); margin-bottom:.75rem; padding:0 1.25rem; }
.g7qp-faq summary { cursor:pointer; font-weight:700; padding:1rem 0; list-style:none; color:#f3e6d2; }
.g7qp-faq summary::-webkit-details-marker { display:none; }
.g7qp-faq summary::after { content:'+'; float:right; color:var(--g7qp-c1); font-size:1.2rem; }
.g7qp-faq details[open] summary::after { content:'\2212'; }
.g7qp-faq details p { padding:0 0 1rem; opacity:.85; font-size:.92rem; }

/* ============ CONTACT FORM ============ */
.g7qp-form { max-width:640px; display:flex; flex-direction:column; gap:1rem; }
.g7qp-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.g7qp-form label { font-size:.8rem; font-weight:700; display:block; margin-bottom:.35rem; }
.g7qp-form input, .g7qp-form select, .g7qp-form textarea { width:100%; background:var(--g7qp-cd); border:1px solid var(--g7qp-br); border-radius:var(--g7qp-r); padding:.75rem 1rem; color:var(--g7qp-tx); font-size:.9rem; font-family:inherit; }
.g7qp-form input:focus, .g7qp-form select:focus, .g7qp-form textarea:focus { outline:none; border-color:var(--g7qp-c1); }
.g7qp-form textarea { resize:vertical; }
#formSuccess { display:none; background:rgba(205,127,50,.12); border:1px solid var(--g7qp-br); border-radius:var(--g7qp-r); padding:1rem; font-weight:600; color:var(--g7qp-c1); }
@media (max-width:600px) { .g7qp-form-row { grid-template-columns:1fr; } }

/* ============ FOOTER (FOOTER-B 3 columns) ============ */
.g7qp-ftr { background:var(--g7qp-cd); border-top:1px solid var(--g7qp-br); padding:3rem 1.5rem 2rem; }
.g7qp-ftr-in { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2rem; }
.g7qp-ftr-brand .g7qp-lg { font-size:1.5rem; margin-bottom:.75rem; }
.g7qp-ftr-brand p { font-size:.82rem; opacity:.7; max-width:280px; }
.g7qp-ftr-col h4 { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--g7qp-c1); margin-bottom:.85rem; }
.g7qp-ftr-col a { display:block; font-size:.85rem; opacity:.75; margin-bottom:.5rem; transition:opacity .2s, color .2s; }
.g7qp-ftr-col a:hover { opacity:1; color:var(--g7qp-c1); }
.g7qp-ftr-bottom { max-width:1280px; margin:2.5rem auto 0; padding-top:1.5rem; border-top:1px solid var(--g7qp-br); font-size:.74rem; opacity:.6; text-align:center; }
.g7qp-ftr-bottom p { margin-bottom:.4rem; }
@media (max-width:860px) { .g7qp-ftr-in { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .g7qp-ftr-in { grid-template-columns:1fr; } }

/* ============ RESPONSIVE ============ */
@media (max-width:1280px) { .g7qp-sec { padding:3rem 1.25rem; } }
@media (max-width:768px) {
  .g7qp-hdr-in { justify-content:space-between; }
  .g7qp-hbg { display:flex; }
  .g7qp-nav { display:none; }
  .g7qp-act { display:none; }
  .g7qp-sec-head h2 { font-size:1.9rem; }
}
@media (max-width:480px) {
  body { font-size:15px; }
  .g7qp-gg { grid-template-columns:repeat(2,1fr); gap:.65rem; }
  .g7qp-cr .g7qp-gc { flex:0 0 80vw; width:80vw; }
  .g7qp-form input, .g7qp-form select, .g7qp-form textarea, .g7qp-search { min-height:48px; }
  .g7qp-banner { padding:1.75rem 1.25rem; }
}
@media (max-width:375px) {
  .g7qp-hdr-in { padding:0 .75rem; }
  .g7qp-gg { gap:.5rem; }
}