/* ===========================================================
   EakinPlay — css/style.css
   Design: Option F "Cosmic Purple" | prefix f7qd | radius 16px
   section order (index): Hero -> Games -> Banner -> How It Works -> Reviews -> SEO -> Footer
   sidebar SIDEBAR-A left 220px | hamburger HBG-A lines->X | card CARD-D glow-on-hover
   =========================================================== */

:root {
  --f7qd-bg:  #08001f;
  --f7qd-c1:  #9B59B6;   /* primary  */
  --f7qd-c2:  #E91E8C;   /* accent   */
  --f7qd-c3:  #F39C12;   /* cta      */
  --f7qd-ct:  #111111;   /* cta text */
  --f7qd-tx:  #d0b8e8;   /* text     */
  --f7qd-cd:  #120030;   /* card     */
  --f7qd-br:  rgba(155,89,182,.25);
  --f7qd-r:   16px;
}

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

html { scroll-behavior:smooth; }

body {
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--f7qd-tx);
  background:var(--f7qd-bg);
  line-height:1.6;
  min-height:100vh;
  /* nebula: layered radial gradients + star field */
  background-image:
    radial-gradient(circle at 15% 20%, rgba(155,89,182,.22), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(233,30,140,.16), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(243,156,18,.08), transparent 45%);
  background-attachment:fixed;
}

h1,h2,h3,h4 { font-family:'Space Grotesk', system-ui, sans-serif; color:#fff; line-height:1.15; letter-spacing:-.01em; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }

/* ---------- buttons ---------- */
.f7qd-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-weight:700; font-size:.85rem; cursor:pointer;
  padding:.6rem 1.15rem; border-radius:var(--f7qd-r);
  border:1px solid transparent; transition:all .25s ease; white-space:nowrap;
}
.f7qd-btn-cta { background:var(--f7qd-c3); color:var(--f7qd-ct); box-shadow:0 6px 22px rgba(243,156,18,.28); }
.f7qd-btn-cta:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(243,156,18,.42); }
.f7qd-btn-ol { background:transparent; color:var(--f7qd-tx); border-color:var(--f7qd-br); }
.f7qd-btn-ol:hover { border-color:var(--f7qd-c1); color:#fff; box-shadow:0 0 18px rgba(155,89,182,.35); }
.f7qd-btn-lg { padding:.85rem 1.7rem; font-size:1rem; }

/* ---------- header ---------- */
.f7qd-hdr { position:fixed; top:0; left:0; right:0; height:64px; z-index:100;
  background:rgba(8,0,31,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--f7qd-br); }
.f7qd-hdr-in { display:flex; align-items:center; gap:1rem; padding:0 1.5rem; height:100%; max-width:1440px; margin:0 auto; }
.f7qd-lg { display:flex; align-items:center; gap:.55rem; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; color:#fff; }
.f7qd-lg svg { width:32px; height:32px; }
.f7qd-lg b { color:var(--f7qd-c2); }
.f7qd-nav { display:flex; gap:.15rem; margin-left:auto; }
.f7qd-nl { padding:.5rem .8rem; font-weight:700; font-size:.85rem; color:var(--f7qd-tx); border-radius:10px; transition:all .2s; }
.f7qd-nl:hover { color:#fff; background:rgba(155,89,182,.12); }
.f7qd-nl.active { color:var(--f7qd-c2); }
.f7qd-act { display:flex; gap:.5rem; align-items:center; }

/* hamburger — HBG-A: logo left / burger right, lines -> X */
.f7qd-hbg { display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; cursor:pointer; padding:4px; }
.f7qd-hbg span { display:block; width:24px; height:2px; border-radius:2px; background:var(--f7qd-tx);
  transition:transform .3s ease, opacity .2s ease; }
.f7qd-hbg.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.f7qd-hbg.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.f7qd-hbg.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------- sidebar SIDEBAR-A ---------- */
.f7qd-sb { position:fixed; top:64px; left:0; width:220px; height:calc(100vh - 64px);
  background:var(--f7qd-cd); border-right:1px solid var(--f7qd-br);
  overflow-y:auto; z-index:90; display:flex; flex-direction:column; transition:transform .3s; }
.f7qd-sb__nav { padding:.75rem 0; display:flex; flex-direction:column; }
.f7qd-sbl { display:flex; align-items:center; gap:.75rem; padding:.65rem 1.25rem;
  color:var(--f7qd-tx); font-weight:600; font-size:.88rem; transition:all .2s;
  border-left:3px solid transparent; }
.f7qd-sbl svg { width:17px; height:17px; flex-shrink:0; opacity:.75; }
.f7qd-sbl:hover, .f7qd-sbl.active { color:var(--f7qd-c1); background:rgba(155,89,182,.10); }
.f7qd-sbl.active { border-left-color:var(--f7qd-c1); }
.f7qd-sb__auth { display:none; padding:.75rem 1rem; border-top:1px solid var(--f7qd-br); gap:.5rem; flex-direction:column; }
.f7qd-sb__auth .f7qd-btn { width:100%; }
.f7qd-sbf { margin-top:auto; padding:1rem 1.25rem; border-top:1px solid var(--f7qd-br); display:flex; flex-direction:column; gap:.4rem; }
.f7qd-sbf a { font-size:.75rem; color:var(--f7qd-tx); opacity:.6; }
.f7qd-sbf a:hover { opacity:1; color:var(--f7qd-c1); }
.f7qd-sbo { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:190; display:none; }
.f7qd-sbo.show { display:block; }

/* ---------- main / layout ---------- */
.f7qd-main { padding-top:64px; min-height:100vh; }
@media (min-width:1024px) { .f7qd-main, .f7qd-ftr { margin-left:220px; } }
.f7qd-sec { max-width:1200px; margin:0 auto; padding:3.5rem 1.5rem; }
.f7qd-sec h2 { font-size:1.9rem; margin-bottom:.4rem; }
.f7qd-eyebrow { color:var(--f7qd-c2); font-weight:800; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
.f7qd-lead { max-width:640px; opacity:.85; margin-bottom:2rem; }

/* notice bar */
.f7qd-nb { background:rgba(243,156,18,.08); border-bottom:1px solid var(--f7qd-br);
  color:#ffe9c2; text-align:center; font-size:.78rem; font-weight:700; padding:.55rem 1rem; letter-spacing:.02em; }

/* ---------- HERO-D: card + gradient mesh ---------- */
.f7qd-hero { position:relative; overflow:hidden; padding:4.5rem 1.5rem 4rem; }
.f7qd-hero::before { content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(155,89,182,.35), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(233,30,140,.30), transparent 42%),
    radial-gradient(circle at 60% 90%, rgba(243,156,18,.18), transparent 45%); }
.f7qd-hero-stars { position:absolute; inset:0; z-index:0; opacity:.6;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 65% 15%, #fff, transparent),
    radial-gradient(2px 2px at 80% 60%, var(--f7qd-c3), transparent),
    radial-gradient(1.5px 1.5px at 35% 75%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 40%, var(--f7qd-c2), transparent); }
.f7qd-hero-card { position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center;
  background:rgba(18,0,48,.55); backdrop-filter:blur(14px);
  border:1px solid var(--f7qd-br); border-radius:calc(var(--f7qd-r) + 8px);
  padding:3rem 2.25rem; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.f7qd-hero-card h1 { font-size:clamp(2.2rem,5.5vw,3.6rem); margin:.6rem 0 1rem; }
.f7qd-hero-card h1 span { color:var(--f7qd-c2); }
.f7qd-hero-card p.f7qd-hero-sub { font-size:1.1rem; opacity:.9; max-width:540px; margin:0 auto 1.75rem; }
.f7qd-hero-btns { display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; }
.f7qd-hero-disc { margin-top:1.5rem; font-size:.72rem; opacity:.6; }

/* ---------- carousel CAROUSEL-E editorial numbered ---------- */
.f7qd-cr-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.f7qd-cr-wrap { position:relative; }
.f7qd-cr-view { overflow:hidden; }
.f7qd-cr { display:flex; gap:1.25rem; transition:transform .4s ease; will-change:transform; }
.f7qd-crb { position:absolute; top:40%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--f7qd-br);
  background:var(--f7qd-cd); color:#fff; font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s; }
.f7qd-crb:hover { border-color:var(--f7qd-c1); box-shadow:0 0 16px rgba(155,89,182,.5); }
.f7qd-crb-prev { left:-8px; }
.f7qd-crb-next { right:-8px; }

/* game card CARD-D — editorial number lives above thumb */
.f7qd-gc { position:relative; width:190px; flex:0 0 auto; cursor:pointer;
  border:1px solid transparent; border-radius:var(--f7qd-r); transition:all .3s ease; }
.f7qd-gc:hover, .f7qd-gc:focus-visible { border-color:var(--f7qd-c1);
  box-shadow:0 0 0 1px var(--f7qd-c1), 0 12px 34px rgba(155,89,182,.35); transform:translateY(-4px); outline:none; }
.f7qd-cr-num { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:3rem; line-height:1;
  color:var(--f7qd-c1); opacity:.15; padding:.25rem .5rem 0; }
.f7qd-gct { position:relative; overflow:hidden; border-radius:calc(var(--f7qd-r) - 4px); aspect-ratio:3/4; background:#0c0020; margin:0 .5rem; }
.f7qd-gct img { width:100%; height:100%; object-fit:cover; }
.f7qd-gco { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  background:linear-gradient(180deg, rgba(8,0,31,.1), rgba(8,0,31,.85));
  opacity:0; transition:opacity .3s; }
.f7qd-gc:hover .f7qd-gco, .f7qd-gc:focus-within .f7qd-gco { opacity:1; }
.f7qd-gcp { background:var(--f7qd-c3); color:var(--f7qd-ct); border:none; font-weight:800; font-size:.78rem;
  padding:.5rem 1rem; border-radius:50px; cursor:pointer; font-family:'Space Grotesk',sans-serif; }
.f7qd-gci { padding:.6rem .5rem .75rem; }
.f7qd-gci p:first-child { font-weight:800; font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--f7qd-tx); }
.f7qd-gci p:last-child { font-size:.7rem; opacity:.6; }

/* ---------- games grid (games.html) ---------- */
.f7qd-search { width:100%; max-width:420px; margin:1.5rem 0; padding:.75rem 1rem;
  background:var(--f7qd-cd); border:1px solid var(--f7qd-br); border-radius:var(--f7qd-r); color:var(--f7qd-tx); font-size:.9rem; }
.f7qd-search:focus { outline:none; border-color:var(--f7qd-c1); box-shadow:0 0 14px rgba(155,89,182,.3); }
.f7qd-cts { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.75rem; }
.f7qd-ct { background:var(--f7qd-cd); border:1px solid var(--f7qd-br); color:var(--f7qd-tx);
  padding:.5rem 1rem; border-radius:50px; font-weight:700; font-size:.8rem; cursor:pointer; transition:all .2s; font-family:'Space Grotesk',sans-serif; }
.f7qd-ct:hover { border-color:var(--f7qd-c1); color:#fff; }
.f7qd-ct.active { background:var(--f7qd-c1); border-color:var(--f7qd-c1); color:#fff; }
.f7qd-gg { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:1.25rem; }
.f7qd-gg .f7qd-gc { width:auto; }
.f7qd-gg .f7qd-gct { margin:0; }
.f7qd-gg .f7qd-gci { padding:.6rem .25rem .25rem; }

/* ---------- banner BANNER-E ---------- */
.f7qd-banner { position:relative; overflow:hidden; border:1px solid var(--f7qd-br); border-radius:calc(var(--f7qd-r) + 6px);
  background:linear-gradient(135deg, rgba(155,89,182,.16), rgba(233,30,140,.10));
  padding:2.5rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.f7qd-stats { display:flex; gap:2.5rem; flex-wrap:wrap; }
.f7qd-stat b { display:block; font-family:'Space Grotesk',sans-serif; font-size:2.4rem; color:#fff; line-height:1; }
.f7qd-stat span { font-size:.8rem; opacity:.75; text-transform:uppercase; letter-spacing:.08em; }

/* ---------- how it works WORKS-D ---------- */
.f7qd-works { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.f7qd-work { position:relative; overflow:hidden; background:var(--f7qd-cd); border:1px solid var(--f7qd-br);
  border-radius:var(--f7qd-r); padding:2rem 1.5rem 1.75rem; }
.f7qd-work-num { position:absolute; top:-1rem; right:.5rem; font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:8rem; line-height:1; color:var(--f7qd-c1); opacity:.08; pointer-events:none; }
.f7qd-work h3 { position:relative; font-size:1.15rem; margin-bottom:.5rem; }
.f7qd-work p { position:relative; font-size:.9rem; opacity:.85; }

/* ---------- reviews REVIEWS-B masonry ---------- */
.f7qd-reviews { columns:3; column-gap:1.25rem; }
.f7qd-rev { break-inside:avoid; background:var(--f7qd-cd); border:1px solid var(--f7qd-br);
  border-radius:var(--f7qd-r); padding:1.35rem; margin-bottom:1.25rem; }
.f7qd-rev-stars { display:flex; gap:2px; color:var(--f7qd-c3); margin-bottom:.5rem; }
.f7qd-rev-stars svg { width:15px; height:15px; }
.f7qd-rev-stars svg.empty { opacity:.28; }
.f7qd-rev p { font-size:.9rem; opacity:.9; margin-bottom:.75rem; }
.f7qd-rev-who { font-weight:800; font-size:.82rem; color:#fff; }
.f7qd-rev-city { font-size:.75rem; opacity:.6; }

/* ---------- SEO / prose ---------- */
.f7qd-prose { max-width:820px; }
.f7qd-prose h2 { font-size:1.6rem; margin:1.75rem 0 .6rem; }
.f7qd-prose h3 { font-size:1.15rem; margin:1.4rem 0 .4rem; }
.f7qd-prose p { margin-bottom:1rem; opacity:.9; }
.f7qd-prose ul { margin:0 0 1rem 1.1rem; list-style:disc; }
.f7qd-prose li { margin-bottom:.4rem; opacity:.9; }
.f7qd-prose a { color:var(--f7qd-c1); text-decoration:underline; }

/* faq */
.f7qd-faq { max-width:820px; }
.f7qd-faq details { background:var(--f7qd-cd); border:1px solid var(--f7qd-br); border-radius:var(--f7qd-r); padding:1rem 1.25rem; margin-bottom:.75rem; }
.f7qd-faq summary { cursor:pointer; font-weight:700; font-family:'Space Grotesk',sans-serif; color:#fff; }
.f7qd-faq p { margin-top:.6rem; font-size:.9rem; opacity:.85; }

/* ---------- contact form ---------- */
.f7qd-form { max-width:640px; }
.f7qd-row { display:flex; gap:1rem; }
.f7qd-field { flex:1; margin-bottom:1rem; }
.f7qd-field label { display:block; font-size:.78rem; font-weight:700; margin-bottom:.35rem; opacity:.85; }
.f7qd-form input, .f7qd-form select, .f7qd-form textarea {
  width:100%; background:var(--f7qd-cd); border:1px solid var(--f7qd-br); border-radius:var(--f7qd-r);
  padding:.75rem 1rem; color:var(--f7qd-tx); font-size:.9rem; font-family:inherit; }
.f7qd-form input:focus, .f7qd-form select:focus, .f7qd-form textarea:focus { outline:none; border-color:var(--f7qd-c1); box-shadow:0 0 14px rgba(155,89,182,.3); }
.f7qd-ok { display:none; margin-top:1rem; padding:.85rem 1.1rem; border-radius:var(--f7qd-r);
  background:rgba(155,89,182,.15); border:1px solid var(--f7qd-c1); color:#fff; font-weight:700; }

/* ---------- footer FOOTER-B ---------- */
.f7qd-ftr { border-top:1px solid var(--f7qd-br); background:var(--f7qd-cd); }
.f7qd-ftr-in { max-width:1200px; margin:0 auto; padding:2.75rem 1.5rem 1.5rem; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.f7qd-ftr-brand .f7qd-lg { margin-bottom:.75rem; }
.f7qd-ftr-brand p { font-size:.82rem; opacity:.7; max-width:280px; }
.f7qd-ftr h4 { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--f7qd-c2); margin-bottom:.85rem; }
.f7qd-ftr ul li { margin-bottom:.5rem; }
.f7qd-ftr ul a { font-size:.85rem; opacity:.8; }
.f7qd-ftr ul a:hover { opacity:1; color:var(--f7qd-c1); }
.f7qd-ftr-bot { border-top:1px solid var(--f7qd-br); padding:1.25rem 1.5rem; max-width:1200px; margin:0 auto; font-size:.75rem; opacity:.65; text-align:center; }
.f7qd-ftr-bot p { margin-bottom:.4rem; }

/* ---------- mobile bottom nav ---------- */
.f7qd-mn { display:none; position:fixed; bottom:0; left:0; right:0; height:60px; background:var(--f7qd-cd); border-top:1px solid var(--f7qd-br); z-index:150; }
.f7qd-mni { flex:1; background:none; border:none; color:var(--f7qd-tx); font-weight:700; font-size:.75rem; cursor:pointer; font-family:'Space Grotesk',sans-serif; }
.f7qd-mni:hover { color:var(--f7qd-c1); }

/* ---------- auth modal ---------- */
.f7qd-am { position:fixed; inset:0; z-index:9998; display:none; align-items:center; justify-content:center; padding:1rem; background:rgba(0,0,0,.8); }
.f7qd-am.show { display:flex; }
.f7qd-am-box { width:100%; max-width:400px; background:var(--f7qd-cd); border:1px solid var(--f7qd-br); border-radius:calc(var(--f7qd-r)+4px); padding:2rem; }
.f7qd-am-box h3 { font-size:1.4rem; margin-bottom:.35rem; }
.f7qd-am-box p.f7qd-am-sub { font-size:.82rem; opacity:.7; margin-bottom:1.25rem; }
.f7qd-am-box label { display:block; font-size:.78rem; font-weight:700; margin:.75rem 0 .3rem; }
.f7qd-am-box input { width:100%; background:var(--f7qd-bg); border:1px solid var(--f7qd-br); border-radius:var(--f7qd-r); padding:.7rem .9rem; color:var(--f7qd-tx); }
.f7qd-am-box input:focus { outline:none; border-color:var(--f7qd-c1); }
.f7qd-am-box .f7qd-btn { width:100%; margin-top:1.25rem; }
.f7qd-am-switch { text-align:center; font-size:.8rem; margin-top:1rem; opacity:.8; }
.f7qd-am-switch a { color:var(--f7qd-c1); cursor:pointer; text-decoration:underline; }
.f7qd-am-close { position:absolute; } /* placeholder */

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1280px) { .f7qd-reviews { columns:2; } }

@media (max-width:1024px) {
  .f7qd-main, .f7qd-ftr { margin-left:0; }
  .f7qd-sb { transform:translateX(-100%); top:64px !important; height:calc(100vh - 64px) !important; z-index:200; border-right:1px solid var(--f7qd-br); }
  .f7qd-sb.open { transform:translateX(0); }
  .f7qd-sbo { top:64px; }
  .f7qd-sb__auth { display:flex; }
  .f7qd-mn { display:flex; align-items:center; justify-content:space-around; }
  body { padding-bottom:60px; }
  .f7qd-works { grid-template-columns:1fr; }
}
@media (min-width:1024px) { body { padding-bottom:0; } }

@media (max-width:768px) {
  .f7qd-hbg { display:flex; }
  .f7qd-nav { display:none; }
  .f7qd-act { display:none; }
  .f7qd-hdr-in { justify-content:space-between; }
  .f7qd-reviews { columns:1; }
  .f7qd-ftr-in { grid-template-columns:1fr 1fr; }
  .f7qd-banner { flex-direction:column; align-items:flex-start; }
}

@media (max-width:480px) {
  body { font-size:15px; }
  .f7qd-gg { grid-template-columns:repeat(2,1fr); gap:.75rem; }
  .f7qd-gc { width:70vw; }
  .f7qd-gg .f7qd-gc { width:auto; }
  .f7qd-row { flex-direction:column; gap:0; }
  .f7qd-ftr-in { grid-template-columns:1fr; }
  .f7qd-hero-card { padding:2rem 1.25rem; }
  .f7qd-form input, .f7qd-form select, .f7qd-form textarea { min-height:48px; }
}
@media (max-width:375px) {
  .f7qd-hdr-in { padding:0 .75rem; }
  .f7qd-gg { gap:.5rem; }
}