/* IskiPlay — Cosmic Purple (Option F) | prefix f8qm | radius 16px
   Layout: fixed 64px header, left grouped sidebar (SIDEBAR-E), main margin-left:220px
   Zero frameworks, zero CDN. Font names declared with system fallbacks. */

:root {
  --f8qm-bg: #08001f;
  --f8qm-c1: #9B59B6;   /* primary  */
  --f8qm-c2: #E91E8C;   /* accent   */
  --f8qm-c3: #F39C12;   /* cta      */
  --f8qm-ct: #111111;   /* cta text */
  --f8qm-tx: #d0b8e8;   /* text     */
  --f8qm-cd: #120030;   /* card     */
  --f8qm-br: rgba(155,89,182,.25);
  --f8qm-r:  16px;
  --f8qm-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f8qm-body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

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

html { scroll-behavior:smooth; }

body {
  font-family: var(--f8qm-body);
  color: var(--f8qm-tx);
  background: var(--f8qm-bg);
  line-height: 1.6;
  min-height: 100vh;
  /* Cosmic nebula depth + faint star dots */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(155,89,182,.18), transparent 40%),
    radial-gradient(circle at 82% 22%, rgba(233,30,140,.14), transparent 42%),
    radial-gradient(circle at 50% 90%, rgba(243,156,18,.08), transparent 45%),
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 70% 65%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.3), transparent);
  background-attachment: fixed;
}

h1,h2,h3,h4 { font-family: var(--f8qm-head); line-height:1.15; color:#f3e9ff; letter-spacing:-.01em; }
a { color: inherit; }
img { max-width:100%; display:block; }

/* ============ BUTTONS ============ */
.f8qm-btn {
  display:inline-flex; align-items:center; gap:.4rem; justify-content:center;
  font-family: var(--f8qm-head); font-weight:700; font-size:.82rem;
  padding:.55rem 1.1rem; border-radius:var(--f8qm-r); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .15s, box-shadow .2s, background .2s, color .2s;
  white-space:nowrap;
}
.f8qm-btn:hover { transform:translateY(-1px); }
.f8qm-btn-cta {
  background:var(--f8qm-c3); color:var(--f8qm-ct);
  box-shadow:0 6px 18px rgba(243,156,18,.28);
}
.f8qm-btn-cta:hover { box-shadow:0 10px 26px rgba(243,156,18,.45); }
.f8qm-btn-ol {
  background:transparent; color:var(--f8qm-tx); border-color:var(--f8qm-br);
}
.f8qm-btn-ol:hover { border-color:var(--f8qm-c1); color:#fff; box-shadow:0 0 14px rgba(155,89,182,.4); }

/* ============ HEADER ============ */
.f8qm-hdr {
  position:fixed; top:0; left:0; right:0; height:64px; z-index:100;
  background:rgba(8,0,31,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--f8qm-br);
}
.f8qm-hdr-in { display:flex; align-items:center; gap:1rem; padding:0 1.5rem; height:100%; }
.f8qm-lg { display:flex; align-items:center; gap:.55rem; text-decoration:none; font-family:var(--f8qm-head); font-weight:700; font-size:1.15rem; color:#fff; }
.f8qm-lg svg { width:30px; height:30px; }
.f8qm-lg b { color:var(--f8qm-c1); }
.f8qm-nav { display:flex; gap:.15rem; margin-left:auto; }
.f8qm-nl {
  font-family:var(--f8qm-head); font-weight:600; font-size:.85rem; text-decoration:none;
  color:var(--f8qm-tx); padding:.45rem .7rem; border-radius:var(--f8qm-r); transition:all .2s;
}
.f8qm-nl:hover { color:#fff; background:rgba(155,89,182,.14); }
.f8qm-nl.active { color:var(--f8qm-c1); background:rgba(155,89,182,.18); }
/* ---- HAMBURGER (HBG-D: bordered button, rotate 90deg -> X) ---- */
.f8qm-hbg {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:8px; cursor:pointer;
  background:transparent; border:1px solid var(--f8qm-br); border-radius:var(--f8qm-r);
  transition:transform .3s ease, border-color .3s ease;
}
.f8qm-hbg span { display:block; width:100%; height:2px; background:var(--f8qm-tx); border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.f8qm-hbg.open { transform:rotate(90deg); border-color:var(--f8qm-c1); }
.f8qm-hbg.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.f8qm-hbg.open span:nth-child(2) { opacity:0; }
.f8qm-hbg.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ============ SIDEBAR (SIDEBAR-E grouped, left 220px) ============ */
.f8qm-sb {
  position:fixed; top:64px; left:0; width:220px; height:calc(100vh - 64px);
  background:var(--f8qm-cd); border-right:1px solid var(--f8qm-br);
  overflow-y:auto; z-index:90; display:flex; flex-direction:column;
  transition:transform .3s, width .3s;
}
.f8qm-sb__nav { padding:.75rem 0 .5rem; }
.f8qm-sb-grp { font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; opacity:.5; padding:.75rem 1.25rem .35rem; font-weight:800; color:var(--f8qm-tx); }
.f8qm-sbl {
  display:flex; align-items:center; gap:.75rem; padding:.6rem 1.25rem;
  color:var(--f8qm-tx); font-weight:600; font-size:.88rem; text-decoration:none;
  border-left:3px solid transparent; transition:all .2s;
}
.f8qm-sbl svg { width:16px; height:16px; opacity:.8; flex-shrink:0; }
.f8qm-sbl:hover { color:#fff; background:rgba(155,89,182,.1); }
.f8qm-sbl.active { color:var(--f8qm-c1); background:rgba(155,89,182,.14); border-left-color:var(--f8qm-c1); }
.f8qm-sbf { margin-top:auto; padding:1rem 1.25rem; border-top:1px solid var(--f8qm-br); display:flex; flex-direction:column; gap:.45rem; }
.f8qm-sbf::before { content:'Info'; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; opacity:.5; font-weight:800; margin-bottom:.15rem; }
.f8qm-sbf a { font-size:.76rem; color:var(--f8qm-tx); opacity:.65; text-decoration:none; transition:all .2s; }
.f8qm-sbf a:hover { opacity:1; color:var(--f8qm-c1); }
.f8qm-sbo { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:190; display:none; }
.f8qm-sbo.show { display:block; }

/* ============ MAIN / FOOTER offset ============ */
.f8qm-main { margin-left:220px; padding-top:64px; min-height:calc(100vh - 64px); }
.f8qm-ftr { margin-left:220px; }

/* ============ SECTIONS ============ */
.f8qm-sec { padding:3.5rem 2rem; max-width:1200px; margin:0 auto; }
.f8qm-sec h2 { font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.4rem; }
.f8qm-sec-sub { opacity:.7; margin-bottom:2rem; max-width:640px; }
.f8qm-eyebrow { display:inline-block; font-family:var(--f8qm-head); font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--f8qm-c2); margin-bottom:.6rem; }

/* ============ HERO (HERO-D card over gradient mesh) ============ */
.f8qm-hero { position:relative; padding:3.5rem 2rem 3rem; overflow:hidden; }
.f8qm-hero::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 25% 30%, rgba(155,89,182,.35), transparent 45%),
    radial-gradient(circle at 78% 60%, rgba(233,30,140,.28), transparent 45%),
    conic-gradient(from 180deg at 60% 40%, rgba(243,156,18,.12), transparent 30%);
  filter:blur(6px);
}
.f8qm-hero-card {
  position:relative; z-index:1; max-width:820px; margin:0 auto; text-align:center;
  background:rgba(18,0,48,.6); backdrop-filter:blur(14px);
  border:1px solid var(--f8qm-br); border-radius:calc(var(--f8qm-r) + 8px);
  padding:3rem 2.5rem; box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.f8qm-hero-card h1 { font-size:clamp(2.1rem,5.5vw,3.6rem); margin-bottom:1rem; }
.f8qm-hero-card h1 span { color:var(--f8qm-c1); }
.f8qm-hero-card p.lead { font-size:1.05rem; opacity:.85; max-width:560px; margin:0 auto 1.75rem; }
.f8qm-hero-cta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.f8qm-hero-cta .f8qm-btn { padding:.75rem 1.5rem; font-size:.92rem; }
.f8qm-hero-disc { margin-top:1.5rem; font-size:.72rem; opacity:.55; }

/* ============ CAROUSEL (CAROUSEL-E editorial numbered) ============ */
.f8qm-cr-wrap { position:relative; max-width:1200px; margin:0 auto; padding:0 2rem; }
.f8qm-cr-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.f8qm-cr-viewport { overflow:hidden; }
.f8qm-cr { display:flex; gap:18px; transition:transform .4s cubic-bezier(.22,.61,.36,1); }
.f8qm-crb {
  width:44px; height:44px; border-radius:50%; border:1px solid var(--f8qm-br);
  background:var(--f8qm-cd); color:var(--f8qm-tx); cursor:pointer; font-size:1.1rem;
  display:inline-flex; align-items:center; justify-content:center; transition:all .2s;
}
.f8qm-crb:hover { border-color:var(--f8qm-c1); color:#fff; box-shadow:0 0 14px rgba(155,89,182,.45); }
.f8qm-cr-nav { display:flex; gap:.5rem; }

/* Editorial numbered card */
.f8qm-gc {
  position:relative; flex:0 0 auto; width:200px; cursor:pointer;
  background:var(--f8qm-cd); border:1px solid transparent; border-radius:var(--f8qm-r);
  overflow:hidden; transition:border-color .3s, box-shadow .3s, transform .3s; padding-top:1.4rem;
}
.f8qm-gc-num {
  position:absolute; top:.1rem; left:.6rem; z-index:2;
  font-family:var(--f8qm-head); font-weight:800; font-size:2.6rem; line-height:1;
  color:var(--f8qm-c1); opacity:.16; pointer-events:none;
}
/* CARD-D: transparent border -> glow on hover */
.f8qm-gc:hover, .f8qm-gc:focus-visible {
  border-color:var(--f8qm-c1); box-shadow:0 0 0 1px var(--f8qm-c1), 0 12px 30px rgba(155,89,182,.35);
  transform:translateY(-4px); outline:none;
}
.f8qm-gct { position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:calc(var(--f8qm-r) - 4px); margin:0 .5rem; }
.f8qm-gct img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.f8qm-gc:hover .f8qm-gct img { transform:scale(1.06); }
.f8qm-gco {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(to top, rgba(8,0,31,.85), rgba(8,0,31,.15));
  opacity:0; transition:opacity .3s;
}
.f8qm-gc:hover .f8qm-gco, .f8qm-gc:focus-visible .f8qm-gco { opacity:1; }
.f8qm-gcp {
  background:var(--f8qm-c3); color:var(--f8qm-ct); border:none; font-family:var(--f8qm-head);
  font-weight:800; font-size:.78rem; padding:.5rem 1rem; border-radius:50px; cursor:pointer;
}
.f8qm-gci { padding:.6rem .7rem .8rem; }

/* ============ GAMES PAGE ============ */
.f8qm-nb {
  background:linear-gradient(90deg, rgba(155,89,182,.2), rgba(233,30,140,.15));
  border:1px solid var(--f8qm-br); border-radius:var(--f8qm-r);
  padding:.65rem 1rem; text-align:center; font-size:.78rem; font-weight:700; margin-bottom:1.5rem;
}
.f8qm-search {
  width:100%; max-width:420px; background:var(--f8qm-cd); border:1px solid var(--f8qm-br);
  border-radius:var(--f8qm-r); padding:.7rem 1rem; color:var(--f8qm-tx); margin-bottom:1.25rem; font-family:var(--f8qm-body);
}
.f8qm-search:focus { outline:none; border-color:var(--f8qm-c1); box-shadow:0 0 0 3px rgba(155,89,182,.2); }
.f8qm-cts { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.75rem; }
.f8qm-ct {
  font-family:var(--f8qm-head); font-weight:700; font-size:.8rem; padding:.5rem 1rem;
  border-radius:50px; border:1px solid var(--f8qm-br); background:transparent; color:var(--f8qm-tx);
  cursor:pointer; transition:all .2s;
}
.f8qm-ct:hover { border-color:var(--f8qm-c1); color:#fff; }
.f8qm-ct.active { background:var(--f8qm-c1); color:#fff; border-color:var(--f8qm-c1); }
.f8qm-gg { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:1.25rem; }
.f8qm-gg .f8qm-gc { width:auto; padding-top:0; }
.f8qm-gg .f8qm-gct { margin:0; border-radius:0; }

/* ============ WORKS-D (big translucent number) ============ */
.f8qm-works { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.5rem; }
.f8qm-work {
  position:relative; overflow:hidden; background:var(--f8qm-cd); border:1px solid var(--f8qm-br);
  border-radius:var(--f8qm-r); padding:2rem 1.75rem; transition:border-color .3s, transform .3s;
}
.f8qm-work:hover { border-color:var(--f8qm-c1); transform:translateY(-4px); }
.f8qm-work-num {
  position:absolute; top:-1.2rem; right:.5rem; font-family:var(--f8qm-head); font-weight:800;
  font-size:8rem; line-height:1; color:var(--f8qm-c1); opacity:.08; pointer-events:none;
}
.f8qm-work h3 { position:relative; font-size:1.2rem; margin-bottom:.6rem; color:#fff; }
.f8qm-work p { position:relative; font-size:.9rem; opacity:.8; }

/* ============ REVIEWS-B (masonry columns:3) ============ */
.f8qm-reviews { column-count:3; column-gap:1.25rem; }
.f8qm-review {
  break-inside:avoid; margin-bottom:1.25rem; background:var(--f8qm-cd);
  border:1px solid var(--f8qm-br); border-radius:var(--f8qm-r); padding:1.5rem;
}
.f8qm-review-stars { display:inline-flex; gap:2px; margin-bottom:.6rem; }
.f8qm-review-stars svg { display:block; }
.f8qm-review p { font-size:.9rem; opacity:.9; margin-bottom:1rem; }
.f8qm-review-by { display:flex; align-items:center; gap:.65rem; }
.f8qm-review-av {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--f8qm-c1), var(--f8qm-c2));
  display:flex; align-items:center; justify-content:center; font-family:var(--f8qm-head); font-weight:800; color:#fff; font-size:.9rem;
}
.f8qm-review-by b { display:block; font-size:.85rem; color:#fff; }
.f8qm-review-by span { font-size:.72rem; opacity:.6; }

/* ============ BANNER-E (stats + CTA) ============ */
.f8qm-banner {
  max-width:1200px; margin:0 auto; background:linear-gradient(120deg, rgba(155,89,182,.22), rgba(233,30,140,.16));
  border:1px solid var(--f8qm-br); border-radius:calc(var(--f8qm-r) + 6px);
  padding:2.5rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.f8qm-stats { display:flex; gap:2.5rem; flex-wrap:wrap; }
.f8qm-stat b { display:block; font-family:var(--f8qm-head); font-size:2.2rem; color:var(--f8qm-c1); line-height:1; }
.f8qm-stat span { font-size:.8rem; opacity:.75; font-weight:700; }
.f8qm-banner .f8qm-btn { padding:.8rem 1.8rem; font-size:.95rem; }

/* ============ SEO block ============ */
.f8qm-seo { max-width:900px; }
.f8qm-seo p { font-size:.92rem; opacity:.82; margin-bottom:1rem; }

/* ============ Generic prose (inner pages) ============ */
.f8qm-prose { max-width:820px; }
.f8qm-prose h1 { font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:1rem; }
.f8qm-prose h2 { font-size:1.4rem; margin:2rem 0 .75rem; color:var(--f8qm-c1); }
.f8qm-prose p { margin-bottom:1rem; opacity:.86; }
.f8qm-prose ul { margin:0 0 1rem 1.25rem; opacity:.86; }
.f8qm-prose li { margin-bottom:.5rem; }
.f8qm-prose a { color:var(--f8qm-c2); }

/* FAQ / accordion-ish cards */
.f8qm-faq { display:flex; flex-direction:column; gap:1rem; max-width:820px; }
.f8qm-faq-item { background:var(--f8qm-cd); border:1px solid var(--f8qm-br); border-radius:var(--f8qm-r); padding:1.25rem 1.5rem; }
.f8qm-faq-item h3 { font-size:1rem; margin-bottom:.4rem; color:#fff; }
.f8qm-faq-item p { font-size:.9rem; opacity:.82; }

/* Contact form */
.f8qm-form { max-width:640px; }
.f8qm-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.f8qm-form label { display:block; font-size:.78rem; font-weight:700; margin-bottom:.35rem; }
.f8qm-form input, .f8qm-form select, .f8qm-form textarea {
  width:100%; background:var(--f8qm-cd); border:1px solid var(--f8qm-br); border-radius:var(--f8qm-r);
  padding:.75rem 1rem; color:var(--f8qm-tx); font-family:var(--f8qm-body); margin-bottom:1rem;
}
.f8qm-form input:focus, .f8qm-form select:focus, .f8qm-form textarea:focus { outline:none; border-color:var(--f8qm-c1); box-shadow:0 0 0 3px rgba(155,89,182,.18); }
.f8qm-form-success { display:none; margin-top:1rem; padding:.9rem 1.1rem; border-radius:var(--f8qm-r); background:rgba(155,89,182,.15); border:1px solid var(--f8qm-c1); font-weight:700; }

/* ============ FOOTER (FOOTER-B: 3 columns, logo left) ============ */
.f8qm-ftr { background:var(--f8qm-cd); border-top:1px solid var(--f8qm-br); margin-top:3rem; }
.f8qm-ftr-in { max-width:1200px; margin:0 auto; padding:3rem 2rem 1.5rem; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.f8qm-ftr-brand .f8qm-lg { margin-bottom:1rem; }
.f8qm-ftr-brand p { font-size:.8rem; opacity:.7; max-width:260px; }
.f8qm-ftr-col h4 { font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin-bottom:.9rem; }
.f8qm-ftr-col a { display:block; font-size:.85rem; text-decoration:none; color:var(--f8qm-tx); opacity:.8; margin-bottom:.55rem; transition:all .2s; }
.f8qm-ftr-col a:hover { color:var(--f8qm-c1); opacity:1; }
.f8qm-ftr-bottom { border-top:1px solid var(--f8qm-br); padding:1.25rem 2rem; text-align:center; font-size:.72rem; opacity:.6; max-width:1200px; margin:0 auto; }
.f8qm-ftr-badges { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:.75rem; }
.f8qm-ftr-badges span { border:1px solid var(--f8qm-br); border-radius:50px; padding:.2rem .7rem; font-weight:800; font-size:.68rem; color:var(--f8qm-tx); }

/* ============ MOBILE BOTTOM NAV ============ */
.f8qm-mn { display:none; position:fixed; bottom:0; left:0; right:0; height:60px; background:var(--f8qm-cd); border-top:1px solid var(--f8qm-br); z-index:150; }
.f8qm-mni { flex:1; background:none; border:none; color:var(--f8qm-tx); font-family:var(--f8qm-head); font-weight:700; font-size:.72rem; cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:.2rem; }
.f8qm-mni:hover { color:var(--f8qm-c1); }

/* ============ RESPONSIVE ============ */
@media (max-width:1280px) {
  .f8qm-reviews { column-count:2; }
}
@media (max-width:1024px) {
  .f8qm-main { margin-left:0 !important; margin-right:0 !important; }
  .f8qm-ftr { margin-left:0; }
  .f8qm-sb { transform:translateX(-100%); top:0; height:100vh; z-index:200; width:280px; }
  .f8qm-sb.open { transform:translateX(0); }
  .f8qm-sbo { z-index:190; }
  .f8qm-mn { display:flex; align-items:center; justify-content:space-around; }
  body { padding-bottom:60px; }
  .f8qm-ftr-in { grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px) {
  body { padding-bottom:0; }
}
@media (max-width:768px) {
  .f8qm-hdr-in { justify-content:space-between; }
  .f8qm-hbg { display:flex; }
  .f8qm-nav { display:none; }
  .f8qm-reviews { column-count:1; }
  .f8qm-banner { flex-direction:column; text-align:center; }
  .f8qm-stats { justify-content:center; }
  .f8qm-sec { padding:2.5rem 1.25rem; }
  .f8qm-hero { padding:2.5rem 1.25rem; }
  .f8qm-hero-card { padding:2rem 1.5rem; }
}
@media (max-width:600px) {
  .f8qm-form-row { grid-template-columns:1fr; }
  .f8qm-ftr-in { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  html { font-size:15px; }
  .f8qm-gg { grid-template-columns:1fr 1fr; gap:.75rem; }
  .f8qm-gc { width:150px; }
  .f8qm-form input, .f8qm-form select, .f8qm-form textarea, .f8qm-search { min-height:48px; }
  .f8qm-stats { gap:1.5rem; }
}
@media (max-width:375px) {
  .f8qm-hdr-in { padding:0 .75rem; }
  .f8qm-gg { gap:.5rem; }
}