{"id":7,"date":"2026-10-27T06:08:11","date_gmt":"2026-10-27T06:08:11","guid":{"rendered":"https:\/\/ligerlabusa.com\/?page_id=7"},"modified":"2026-10-27T06:12:29","modified_gmt":"2026-10-27T06:12:29","slug":"fans-game-asia","status":"publish","type":"page","link":"https:\/\/ligerlabusa.com\/","title":{"rendered":"FANS GAME ASIA"},"content":{"rendered":"\n<div class=\"fga\">\n<!-- FANS GAME ASIA \u2014 versi WordPress (blok Custom HTML). -->\n<script>\n  \/* Tandai JS aktif + tambahkan meta description, theme-color, dan favicon ke head *\/\n  (function () {\n    var d = document, h = d.head;\n    d.documentElement.classList.add('js');\n    function meta(n, c) { if (!d.querySelector('meta[name=\"' + n + '\"]')) { var m = d.createElement('meta'); m.name = n; m.content = c; h.appendChild(m); } }\n    meta('description', \"FANS GAME ASIA memperkenalkan ragam game dan budaya bermain di Asia, dari petualangan RPG hingga pertandingan kompetitif. Jelajahi karakter, gaya permainan, serta kebiasaan komunitas para penggemarnya.\");\n    meta('theme-color', '#0a0618');\n    if (!d.querySelector('link[rel~=\"icon\"]')) { var l = d.createElement('link'); l.rel = 'icon'; l.href = \"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%230a0618'\/%3E%3Crect x='2' y='5' width='12' height='6' fill='%23ff2e97'\/%3E%3Crect x='3' y='11' width='3' height='2' fill='%23ff2e97'\/%3E%3Crect x='10' y='11' width='3' height='2' fill='%23ff2e97'\/%3E%3Crect x='4' y='6' width='1' height='3' fill='%230a0618'\/%3E%3Crect x='3' y='7' width='3' height='1' fill='%230a0618'\/%3E%3Crect x='11' y='6' width='1' height='1' fill='%2319e6ff'\/%3E%3Crect x='12' y='8' width='1' height='1' fill='%23ffe14d'\/%3E%3C\/svg%3E\"; h.appendChild(l); }\n  })();\n  <\/script>\n  <style>\n    \/* =========================================================\n       0. DESIGN TOKENS \u2014 warna neon, font, ukuran global\n       ========================================================= *\/\n    :root {\n      --bg: #0a0618;\n      --panel: #160d33;\n      --panel-2: #1e1245;\n      --line: rgba(190, 170, 255, .16);\n      --text: #f5f1ff;\n      --muted: #bcb0de;\n      --dim: #8d80b8;\n      --ink: #12041f;\n\n      --pink: #ff2e97;\n      --cyan: #19e6ff;\n      --yellow: #ffe14d;\n      --lime: #7dff6b;\n      --violet: #9d5cff;\n      --orange: #ff8a3d;\n      --grad: linear-gradient(90deg, var(--pink), var(--violet) 50%, var(--cyan));\n\n      \/* Font sistem: cepat dimuat, tanpa unduhan *\/\n      --font-display: \"Segoe UI\", system-ui, -apple-system, \"Helvetica Neue\", Roboto, Arial, sans-serif;\n      --font-mono: ui-monospace, \"SFMono-Regular\", Menlo, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n\n      --nav-h: 64px;\n      --max: 1180px;\n      --ease: cubic-bezier(.2, .7, .2, 1);\n    }\n\n    \/* =========================================================\n       1. RESET DAN DASAR\n       ========================================================= *\/\n    *, *::before, *::after { box-sizing: border-box; }\n    html { scroll-behavior: smooth; scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }\n    :root body {\n      margin: 0;\n      background: var(--bg);\n      color: var(--text);\n      font: 400 1rem\/1.65 var(--font-display);\n      -webkit-font-smoothing: antialiased;\n      overflow-x: hidden;\n    }\n    h1, h2, h3, p, blockquote, dl, dd { margin: 0; }\n    a { color: inherit; }\n    button { font: inherit; color: inherit; }\n    ul, ol { margin: 0; padding: 0; list-style: none; }\n    [hidden] { display: none !important; }\n    ::selection { background: var(--pink); color: #fff; }\n    :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }\n\n    .container { width: min(100% - 32px, var(--max)); margin-inline: auto; }\n    .sr-only {\n      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;\n      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;\n    }\n    .mono { font-family: var(--font-mono); }\n    .grad {\n      background: var(--grad);\n      -webkit-background-clip: text; background-clip: text; color: transparent;\n    }\n\n\n    \/* =========================================================\n       1b. KOMPATIBILITAS WORDPRESS (tema blok Twenty Twenty-Five)\n       Menetralkan padding\/margin tata letak tema dan warna judul bawaan.\n       ========================================================= *\/\n    .wp-site-blocks, .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }\n    .fga h1, .fga h2, .fga h3 { font-family: var(--font-display); color: inherit; }\n    body.admin-bar .topbar { top: 32px; }\n    @media (max-width: 782px) { body.admin-bar .topbar { top: 46px; } }\n\n    \/* Efek garis CRT tipis di seluruh layar (dekoratif) *\/\n    body::after {\n      content: \"\"; position: fixed; inset: 0; pointer-events: none; z-index: 300;\n      background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px);\n    }\n\n    \/* Utilitas sudut \"berpiksel\" (potongan tangga 8-bit) *\/\n    .px {\n      --c: 6px;\n      clip-path: polygon(\n        0 var(--c), var(--c) var(--c), var(--c) 0,\n        calc(100% - var(--c)) 0, calc(100% - var(--c)) var(--c), 100% var(--c),\n        100% calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c)) 100%,\n        var(--c) 100%, var(--c) calc(100% - var(--c)), 0 calc(100% - var(--c))\n      );\n    }\n\n    \/* Sprite pixel-art (SVG dibuat oleh JavaScript) *\/\n    .sprite { display: inline-block; width: var(--s, 48px); aspect-ratio: 1; flex: none; line-height: 0; }\n    .sprite svg { display: block; width: 100%; height: 100%; }\n\n    \/* Tautan lompat untuk pengguna keyboard *\/\n    .fga-skip {\n      position: fixed; left: 16px; top: -60px; z-index: 400;\n      padding: 10px 14px; background: var(--yellow); color: var(--ink);\n      font: 700 .85rem\/1 var(--font-mono); text-decoration: none; transition: top .2s;\n    }\n    .fga-skip:focus { top: 12px; }\n\n    \/* =========================================================\n       2. TOMBOL\n       ========================================================= *\/\n    .btn {\n      display: inline-flex; align-items: center; justify-content: center; gap: .65em;\n      padding: 1em 1.5em; border: 0; cursor: pointer; text-decoration: none;\n      font: 800 .86rem\/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;\n      color: var(--ink); background: var(--yellow);\n      box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28);\n      transition: transform .15s var(--ease), filter .15s;\n    }\n    .btn:hover { transform: translateY(-2px); filter: brightness(1.08) saturate(1.1); }\n    .btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .28); }\n    \/* clip-path memotong outline, jadi fokus ditandai dengan cincin di dalam *\/\n    .btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 5px #fff; }\n    .btn--ghost { background: rgba(25, 230, 255, .07); color: var(--text); box-shadow: inset 0 0 0 2px var(--cyan); }\n    .btn--ghost:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan), inset 0 0 0 5px var(--yellow); }\n    .tri { width: 10px; height: 12px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }\n\n    \/* =========================================================\n       3. NAVIGASI ATAS + BAR PROGRES GULIR\n       ========================================================= *\/\n    .scroll-bar {\n      position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;\n      background: var(--grad); transform-origin: 0 50%; transform: scaleX(0);\n    }\n    .topbar {\n      position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);\n      border-bottom: 1px solid transparent;\n      transition: background .3s, border-color .3s;\n    }\n    .topbar.is-scrolled, .topbar.is-open {\n      background: rgba(10, 6, 24, .82);\n      -webkit-backdrop-filter: blur(14px) saturate(140%);\n      backdrop-filter: blur(14px) saturate(140%);\n      border-color: var(--line);\n    }\n    .topbar__inner { height: 100%; display: flex; align-items: center; gap: 16px; }\n\n    .brand {\n      display: flex; align-items: center; gap: 10px; margin-right: auto;\n      text-decoration: none; color: var(--text);\n      font: 900 1rem\/1 var(--font-display); letter-spacing: .06em; white-space: nowrap;\n    }\n    .brand .sprite { --s: 34px; }\n    .brand b { color: var(--pink); font-weight: 900; }\n\n    .nav-menu { display: flex; gap: 2px; }\n    .nav-menu a {\n      position: relative; display: block; padding: 10px 11px;\n      color: var(--muted); text-decoration: none;\n      font: 700 .74rem\/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;\n      transition: color .2s;\n    }\n    .nav-menu a:hover, .nav-menu a.is-active { color: var(--text); }\n    .nav-menu a::after {\n      content: \"\"; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 3px;\n      background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);\n    }\n    .nav-menu a.is-active::after { transform: scaleX(1); }\n\n    \/* Chip level dan XP pemain *\/\n    .xp-chip {\n      display: flex; align-items: center; gap: 8px; padding: 8px 10px;\n      border: 1px solid var(--line); background: rgba(255, 255, 255, .04);\n      font: 700 .7rem\/1 var(--font-mono); color: var(--muted); letter-spacing: .06em; white-space: nowrap;\n    }\n    .xp-chip b { color: var(--yellow); }\n    .xp-chip__bar { width: 46px; height: 6px; background: rgba(255, 255, 255, .1); }\n    .xp-chip__bar i { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .4s var(--ease); }\n\n    \/* Tombol hamburger (mobile) *\/\n    .nav-toggle {\n      display: none; position: relative; width: 44px; height: 44px; padding: 0; cursor: pointer;\n      background: rgba(255, 255, 255, .05); border: 1px solid var(--line);\n    }\n    .nav-toggle span {\n      position: absolute; left: 11px; width: 20px; height: 3px; background: var(--text);\n      transition: transform .25s var(--ease), opacity .2s;\n    }\n    .nav-toggle span:nth-child(1) { top: 13px; }\n    .nav-toggle span:nth-child(2) { top: 19.5px; }\n    .nav-toggle span:nth-child(3) { top: 26px; }\n    .is-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }\n    .is-open .nav-toggle span:nth-child(2) { opacity: 0; }\n    .is-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }\n\n    @media (max-width: 980px) {\n      .nav-toggle { display: block; }\n      .nav-menu {\n        position: fixed; top: var(--nav-h); left: 0; right: 0;\n        flex-direction: column; padding: 8px 16px 20px;\n        background: rgba(10, 6, 24, .97); border-bottom: 1px solid var(--line);\n        opacity: 0; visibility: hidden; transform: translateY(-8px);\n        transition: opacity .2s, transform .2s var(--ease), visibility .2s;\n      }\n      .topbar.is-open .nav-menu { opacity: 1; visibility: visible; transform: none; }\n      .nav-menu a { padding: 15px 6px; font-size: .9rem; border-bottom: 1px dashed var(--line); }\n      .nav-menu a::after { left: 6px; right: auto; width: 32px; bottom: 8px; }\n    }\n    @media (max-width: 480px) {\n      .xp-chip__bar { display: none; }\n      .brand { font-size: .86rem; gap: 8px; }\n      .brand .sprite { --s: 28px; }\n    }\n    @media (max-width: 360px) { .brand__text { display: none; } }\n\n    \/* =========================================================\n       4. HERO \u2014 judul, tagline, dan \"mesin arcade\"\n       ========================================================= *\/\n    .hero {\n      position: relative; isolation: isolate; overflow: hidden;\n      min-height: 100vh; min-height: 100svh;\n      display: flex; align-items: center;\n      padding: calc(var(--nav-h) + 40px) 0 96px;\n    }\n    .hero__bg {\n      position: absolute; inset: 0; z-index: -2;\n      background:\n        radial-gradient(55% 50% at 12% 18%, rgba(255, 46, 151, .30), transparent 70%),\n        radial-gradient(45% 45% at 88% 28%, rgba(25, 230, 255, .22), transparent 70%),\n        radial-gradient(70% 60% at 50% 115%, rgba(157, 92, 255, .40), transparent 70%);\n    }\n    .hero__bg::after {\n      content: \"\"; position: absolute; inset: 0;\n      background-image:\n        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);\n      background-size: 48px 48px;\n      -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 75%);\n      mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 75%);\n    }\n    \/* Bintang piksel berkelip (dibuat JS) *\/\n    .hero__stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }\n    .hero__stars span { position: absolute; opacity: .2; animation: twinkle 3s steps(3) infinite; }\n    @keyframes twinkle { 50% { opacity: 1; } }\n\n    .hero__grid {\n      display: grid; grid-template-columns: 1.15fr .85fr;\n      gap: clamp(36px, 5vw, 72px); align-items: center;\n    }\n    .hero__status {\n      display: inline-flex; align-items: center; gap: 10px;\n      padding: 8px 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04);\n      font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);\n    }\n    .dot { width: 8px; height: 8px; background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: blink 1.2s steps(2) infinite; }\n    @keyframes blink { 50% { opacity: .2; } }\n\n    .hero__title {\n      margin: 22px 0 16px;\n      font: 900 clamp(2.8rem, 6.6vw, 5.6rem)\/.92 var(--font-display);\n      letter-spacing: -.03em; text-transform: uppercase;\n    }\n    .hero__title .l1 {\n      display: block; color: #fff;\n      text-shadow: 3px 3px 0 var(--cyan), 6px 6px 0 var(--pink);\n      animation: glitch 7s steps(1) infinite;\n    }\n    .hero__title .l2 {\n      display: block; font-size: 1.32em; padding-bottom: .04em;\n      background: linear-gradient(90deg, var(--yellow), var(--pink) 30%, var(--violet) 60%, var(--cyan) 85%, var(--yellow));\n      background-size: 200% 100%;\n      -webkit-background-clip: text; background-clip: text; color: transparent;\n      filter: drop-shadow(0 0 22px rgba(255, 46, 151, .35));\n      animation: shine 8s linear infinite;\n    }\n    @keyframes shine { to { background-position: -200% 0; } }\n    @keyframes glitch {\n      0%, 90%, 100% { transform: none; }\n      91% { transform: translate(-3px, 1px) skewX(-8deg); text-shadow: -4px 0 0 var(--cyan), 4px 0 0 var(--pink); }\n      93% { transform: translate(3px, -1px); text-shadow: 4px 0 0 var(--yellow), -4px 0 0 var(--cyan); }\n      95% { transform: none; text-shadow: 3px 3px 0 var(--cyan), 6px 6px 0 var(--pink); }\n    }\n    .hero__tagline { font: 800 clamp(1.15rem, 2.2vw, 1.55rem)\/1.3 var(--font-display); }\n    .hero__tagline span { color: var(--cyan); }\n    .hero__lead { margin-top: 14px; max-width: 52ch; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.08rem); }\n    .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }\n\n    \/* Statistik ala HUD game *\/\n    .hud { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }\n    .hud { max-width: 420px; }\n    .hud__item {\n      flex: 1 1 0; min-width: 96px; padding: 12px 16px;\n      border: 1px solid var(--line); border-left: 3px solid var(--pink);\n      background: rgba(255, 255, 255, .03);\n    }\n    .hud__item:nth-child(2) { border-left-color: var(--cyan); }\n    .hud__item:nth-child(3) { border-left-color: var(--yellow); }\n    .hud__item b { display: block; font: 900 1.6rem\/1 var(--font-mono); color: var(--text); }\n    .hud__item span { font: 700 .68rem\/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }\n\n    \/* Panggung arcade *\/\n    .hero__stage { position: relative; isolation: isolate; padding: 22px; }\n    .stage-glow {\n      position: absolute; inset: 10%; z-index: -1;\n      background: radial-gradient(circle, rgba(255, 46, 151, .55), rgba(157, 92, 255, .3) 50%, transparent 72%);\n      filter: blur(40px);\n    }\n    .cabinet {\n      --c: 12px; padding: 12px 14px 16px;\n      background: linear-gradient(135deg, var(--pink), var(--violet) 50%, var(--cyan));\n    }\n    .cabinet__top {\n      padding: 2px 0 10px; text-align: center; color: var(--ink);\n      font-size: .74rem; font-weight: 800; letter-spacing: .3em;\n    }\n    .cabinet__panel { display: flex; justify-content: center; gap: 10px; padding-top: 12px; }\n    .cabinet__panel i { width: 14px; height: 14px; background: var(--ink); box-shadow: inset -3px -3px 0 rgba(255, 255, 255, .25); }\n    .cabinet__panel i:nth-child(1) { background: var(--yellow); }\n    .cabinet__panel i:nth-child(2) { background: var(--cyan); }\n    .cabinet__panel i:nth-child(3) { background: var(--lime); }\n    .cabinet__panel i:nth-child(4) { background: #fff; }\n\n    .screen {\n      position: relative; overflow: hidden; aspect-ratio: 1 \/ 1; border-radius: 10px;\n      background: linear-gradient(180deg, #0d0326 0%, #2b0b52 40%, #6a1470 56%, #ff2e97 58%, #12041f 58.4%);\n      box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 60px rgba(0, 0, 0, .7);\n    }\n    \/* garis scanline di layar arcade *\/\n    .screen::after {\n      content: \"\"; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;\n      background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 2px, transparent 2px 4px);\n      box-shadow: inset 0 0 40px rgba(0, 0, 0, .55);\n    }\n    .screen__hud {\n      position: absolute; top: 4%; left: 5%; right: 5%; z-index: 3;\n      display: flex; justify-content: space-between;\n      font-size: clamp(.6rem, 1.4vw, .76rem); letter-spacing: .1em; color: #fff;\n    }\n    .screen__hud b { color: var(--yellow); }\n    \/* Matahari synthwave bergaris *\/\n    .screen__sun {\n      position: absolute; left: 50%; top: 16%; width: 42%; aspect-ratio: 1;\n      transform: translateX(-50%); border-radius: 50%;\n      background: linear-gradient(180deg, var(--yellow) 10%, var(--orange) 45%, var(--pink) 80%);\n      -webkit-mask-image: linear-gradient(#000 50%, transparent 50%), repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 11px);\n      mask-image: linear-gradient(#000 50%, transparent 50%), repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 11px);\n    }\n    \/* Lantai grid perspektif yang bergerak *\/\n    .screen__floor {\n      position: absolute; left: 0; right: 0; top: 58%; bottom: 0; overflow: hidden;\n      perspective: 140px; perspective-origin: 50% 0;\n      background: linear-gradient(180deg, #2a0845, #0c0217);\n    }\n    .screen__floor::before {\n      content: \"\"; position: absolute; left: -150%; right: -150%; bottom: 0; height: 420%;\n      transform-origin: 50% 100%; transform: rotateX(78deg);\n      background-image:\n        linear-gradient(90deg, rgba(255, 46, 151, .9) 2px, transparent 2px),\n        linear-gradient(rgba(255, 46, 151, .9) 2px, transparent 2px);\n      background-size: 34px 34px;\n      animation: floor .8s linear infinite;\n    }\n    .screen__floor::after {\n      content: \"\"; position: absolute; inset: 0;\n      background: linear-gradient(180deg, #2a0845 0%, transparent 45%);\n    }\n    @keyframes floor { to { background-position: 0 34px; } }\n\n    .sky-item { position: absolute; z-index: 2; animation: float 3.2s ease-in-out infinite; }\n    .sky-item .sprite { --s: 100%; }\n    .sky-item--coin { left: 10%; top: 22%; width: 9%; }\n    .sky-item--heart { right: 11%; top: 20%; width: 10%; animation-delay: -1.2s; }\n    .sky-item--star { right: 24%; top: 40%; width: 7%; animation-delay: -2s; }\n    @keyframes float { 50% { transform: translateY(-10px); } }\n\n    \/* Maskot slime: klik untuk +XP *\/\n    .mascot {\n      position: absolute; left: 50%; bottom: 13%; z-index: 3; width: 28%;\n      margin-left: -14%; padding: 0; border: 0; background: none; cursor: pointer;\n      animation: bob 1s steps(2) infinite;\n    }\n    .mascot .sprite { --s: 100%; }\n    .mascot::after {\n      content: \"\"; position: absolute; left: 12%; right: 12%; bottom: -6%; height: 12%; z-index: -1;\n      background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent);\n    }\n    .mascot.is-jumping { animation: jump .55s cubic-bezier(.3, .7, .4, 1); }\n    @keyframes bob { 50% { transform: translateY(-5%); } }\n    @keyframes jump { 40% { transform: translateY(-48%) scale(1.04, .96); } 70% { transform: translateY(0) scale(1.08, .9); } }\n    .screen__press {\n      position: absolute; left: 0; right: 0; bottom: 4%; z-index: 3; text-align: center;\n      font-size: clamp(.66rem, 1.5vw, .82rem); font-weight: 800; letter-spacing: .3em; color: var(--yellow);\n      animation: blink 1s steps(2) infinite;\n    }\n    .float-text {\n      position: absolute; z-index: 5; pointer-events: none;\n      font: 900 .9rem\/1 var(--font-mono); color: var(--yellow); text-shadow: 2px 2px 0 var(--ink);\n      animation: floatUp .9s var(--ease) forwards;\n    }\n    @keyframes floatUp { to { transform: translateY(-48px); opacity: 0; } }\n\n    \/* Label genre yang melayang di sekitar arcade *\/\n    .stage-chip {\n      position: absolute; z-index: 4; padding: 8px 10px;\n      font: 800 .7rem\/1 var(--font-mono); letter-spacing: .14em; color: var(--ink);\n      background: var(--chip); box-shadow: 4px 4px 0 rgba(0, 0, 0, .4);\n      animation: float 4s ease-in-out infinite;\n    }\n    .stage-chip--1 { --chip: var(--yellow); top: 6%; left: 0; }\n    .stage-chip--2 { --chip: var(--cyan); top: 34%; right: 0; animation-delay: -1s; }\n    .stage-chip--3 { --chip: var(--lime); bottom: 24%; left: 0; animation-delay: -2s; }\n    .stage-chip--4 { --chip: #fff; bottom: 4%; right: 10%; animation-delay: -3s; }\n\n    .scroll-cue {\n      position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);\n      display: grid; justify-items: center; gap: 8px; text-decoration: none;\n      font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dim);\n    }\n    .scroll-cue i {\n      width: 14px; height: 10px; background: var(--cyan);\n      clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 100%, 0 40%);\n      animation: cue 1.2s steps(3) infinite;\n    }\n    @keyframes cue { 50% { transform: translateY(5px); } }\n\n    @media (max-width: 900px) {\n      .hero__grid { grid-template-columns: 1fr; }\n      .hero__stage { width: 100%; max-width: 440px; margin: 0 auto; }\n    }\n    @media (max-width: 900px), (max-height: 640px) { .scroll-cue { display: none; } }\n\n    \/* =========================================================\n       5. TICKER BERJALAN (marquee) \u2014 daftar genre dan istilah\n       ========================================================= *\/\n    .ticker { position: relative; overflow: hidden; padding: 30px 0; margin-top: -24px; z-index: 2; }\n    .ticker__band { margin: 0 -5%; padding: 14px 0; transform: rotate(-1.6deg); background: var(--grad); box-shadow: 0 10px 40px -10px rgba(255, 46, 151, .6); }\n    .ticker__band--back {\n      position: absolute; left: 0; right: 0; top: 30px; transform: rotate(1.6deg);\n      background: var(--panel); box-shadow: none; opacity: .9;\n    }\n    .ticker__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }\n    .ticker__band--back .ticker__track { animation-direction: reverse; animation-duration: 46s; }\n    .ticker__track span {\n      padding: 0 18px; white-space: nowrap;\n      font: 900 1.05rem\/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);\n    }\n    .ticker__band--back .ticker__track span { color: var(--dim); }\n    .ticker__track span.sep { padding: 0 4px; }\n    @keyframes marquee { to { transform: translateX(-50%); } }\n\n    \/* =========================================================\n       6. SECTION UMUM + ANIMASI REVEAL\n       ========================================================= *\/\n    .section { position: relative; padding: clamp(72px, 8vw, 112px) 0; }\n    .section--tint { background: linear-gradient(180deg, transparent, rgba(157, 92, 255, .07) 20%, rgba(157, 92, 255, .07) 80%, transparent); }\n    .section-head { max-width: 760px; }\n    .eyebrow {\n      display: inline-flex; align-items: center;\n      font: 700 .76rem\/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan);\n    }\n    .eyebrow::before {\n      content: \"\"; width: 8px; height: 8px; margin-right: 36px;\n      background: var(--pink); box-shadow: 12px 0 0 var(--yellow), 24px 0 0 var(--cyan);\n    }\n    .section-title {\n      margin: 14px 0 12px; text-wrap: balance;\n      font: 900 clamp(2rem, 4.6vw, 3.3rem)\/1.06 var(--font-display); letter-spacing: -.02em;\n    }\n    .section-sub { max-width: 62ch; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.12rem); }\n\n    \/* Reveal saat elemen masuk layar (hanya jika JS aktif) *\/\n    .js .reveal:not(.is-visible) { opacity: 0; }\n    .js .reveal.is-visible { animation: rise .75s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 90ms); }\n    @keyframes rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }\n\n    \/* Daftar tag kecil *\/\n    .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }\n    .tags li {\n      padding: 6px 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03);\n      font: 700 .68rem\/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);\n    }\n\n    \/* =========================================================\n       7. TENTANG + QUEST LOG\n       ========================================================= *\/\n    .about__grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: start; }\n    .about__lead { margin-top: 8px; font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.6; }\n    .about__text { margin-top: 16px; color: var(--muted); }\n    .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }\n    .pillar {\n      padding: 20px 18px; background: var(--panel);\n      border: 1px solid var(--line); border-top: 3px solid var(--accent);\n    }\n    .pillar .sprite { --s: 44px; }\n    .pillar h3 { margin: 14px 0 6px; font-size: 1.02rem; font-weight: 800; }\n    .pillar p { color: var(--muted); font-size: .9rem; line-height: 1.55; }\n\n    .quest {\n      position: sticky; top: calc(var(--nav-h) + 24px);\n      padding: 24px; border: 2px solid rgba(25, 230, 255, .35);\n      background: linear-gradient(180deg, rgba(25, 230, 255, .08), transparent 45%), var(--panel);\n    }\n    .quest__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n    .quest__head h3 { font: 800 .95rem\/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }\n    .quest__count { font: 700 .74rem\/1 var(--font-mono); color: var(--cyan); }\n    .quest__meter { height: 10px; margin-top: 14px; background: rgba(255, 255, 255, .08); }\n    .quest__meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lime), var(--cyan)); transition: width .6s var(--ease); }\n    .quest ol { display: grid; gap: 10px; margin-top: 18px; }\n    .quest li {\n      display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center;\n      padding: 12px; border: 1px dashed var(--line); background: rgba(255, 255, 255, .02);\n      transition: border-color .3s, background .3s;\n    }\n    .quest__box { position: relative; width: 18px; height: 18px; border: 2px solid var(--dim); }\n    .quest li strong { display: block; font-size: .94rem; font-weight: 700; line-height: 1.3; }\n    .quest li small { color: var(--dim); font-size: .78rem; }\n    .quest__xp { font: 700 .68rem\/1 var(--font-mono); color: var(--yellow); white-space: nowrap; }\n    .quest li.is-done { border-style: solid; border-color: rgba(125, 255, 107, .5); background: rgba(125, 255, 107, .06); }\n    .quest li.is-done .quest__box { background: var(--lime); border-color: var(--lime); }\n    .quest li.is-done .quest__box::after {\n      content: \"\"; position: absolute; left: 4px; top: 0; width: 5px; height: 10px;\n      border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg);\n    }\n    .quest li.is-done .quest__xp { color: var(--lime); }\n    .quest__hint { margin-top: 14px; font-size: .8rem; color: var(--dim); }\n\n    @media (max-width: 900px) {\n      .about__grid { grid-template-columns: 1fr; }\n      .quest { position: static; }\n    }\n    @media (max-width: 640px) { .pillars { grid-template-columns: 1fr; } }\n\n    \/* =========================================================\n       8. GENRE \u2014 filter + kartu tilt\n       ========================================================= *\/\n    .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }\n    .chip {\n      padding: 10px 14px; cursor: pointer;\n      border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--muted);\n      font: 700 .74rem\/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;\n      transition: color .2s, background .2s, border-color .2s;\n    }\n    .chip:hover { color: var(--text); border-color: var(--cyan); }\n    .chip[aria-pressed=\"true\"] { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }\n\n    .genre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; margin-top: 26px; }\n    .genre-card {\n      position: relative; isolation: isolate; overflow: hidden; padding: 24px;\n      background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)), var(--panel);\n      border: 1px solid var(--line);\n      transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));\n      transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;\n    }\n    \/* Cahaya yang mengikuti kursor *\/\n    .genre-card::before {\n      content: \"\"; position: absolute; inset: 0; z-index: -1; opacity: .55; transition: opacity .3s;\n      background: radial-gradient(420px circle at var(--mx, 80%) var(--my, 0%), color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%);\n    }\n    \/* Sudut HUD *\/\n    .genre-card::after {\n      content: \"\"; position: absolute; inset: 8px; pointer-events: none;\n      background:\n        linear-gradient(var(--accent) 0 0) top left \/ 14px 2px,\n        linear-gradient(var(--accent) 0 0) top left \/ 2px 14px,\n        linear-gradient(var(--accent) 0 0) bottom right \/ 14px 2px,\n        linear-gradient(var(--accent) 0 0) bottom right \/ 2px 14px;\n      background-repeat: no-repeat;\n    }\n    .genre-card:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 22px 50px -24px var(--accent); }\n    .genre-card:hover::before { opacity: 1; }\n    .genre-card.pop { animation: pop .45s var(--ease); }\n    @keyframes pop { from { opacity: 0; scale: .94; } }\n\n    .genre-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }\n    .genre-card__icon {\n      display: grid; place-items: center; width: 74px; height: 74px;\n      background: color-mix(in srgb, var(--accent) 16%, transparent);\n      border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);\n    }\n    .genre-card__icon .sprite { --s: 54px; }\n    .genre-card:hover .genre-card__icon .sprite { animation: hop .5s steps(3); }\n    @keyframes hop { 50% { transform: translateY(-8px); } }\n    .genre-card__no { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }\n    .genre-card h3 { margin: 18px 0 8px; font-size: 1.32rem; font-weight: 900; letter-spacing: -.01em; }\n    .genre-card p { color: var(--muted); font-size: .95rem; }\n\n    \/* Meter 5 segmen ala bar stat game *\/\n    .mini-stats { display: grid; gap: 8px; margin-top: 20px; }\n    .mini-stats div { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; }\n    .mini-stats dt { font: 700 .66rem\/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }\n    .seg {\n      --gap: 3px; position: relative; display: block; height: 10px;\n      background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 calc(20% - var(--gap)), transparent calc(20% - var(--gap)) 20%);\n    }\n    .seg::after {\n      content: \"\"; position: absolute; inset: 0;\n      background: repeating-linear-gradient(90deg, var(--accent) 0 calc(20% - var(--gap)), transparent calc(20% - var(--gap)) 20%);\n      clip-path: inset(0 calc(100% - var(--v) * 20%) 0 0);\n      transition: clip-path .9s steps(5) .25s;\n    }\n    .js .reveal:not(.is-visible) .seg::after { clip-path: inset(0 100% 0 0); }\n\n    \/* =========================================================\n       9. PILIH KARAKTER \u2014 layar \"character select\"\n       ========================================================= *\/\n    .select { --accent: var(--orange); }\n    .select__panel {\n      display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: clamp(24px, 4vw, 48px);\n      margin-top: 32px; padding: clamp(18px, 3vw, 32px);\n      border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);\n      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%), var(--panel);\n      transition: border-color .4s, background .4s;\n    }\n    .portrait {\n      position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1;\n      display: grid; place-items: center;\n      background: #0d0720; border: 2px solid var(--line);\n    }\n    .portrait__rays {\n      position: absolute; inset: -50%; z-index: -1;\n      background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 22%, transparent) 0 10deg, transparent 10deg 20deg);\n      animation: spin 40s linear infinite;\n    }\n    @keyframes spin { to { transform: rotate(1turn); } }\n    .portrait::after {\n      content: \"\"; position: absolute; left: 22%; right: 22%; bottom: 13%; height: 7%; z-index: -1;\n      background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent);\n    }\n    .portrait__sprite { --s: 62%; animation: bob 1.2s steps(2) infinite; }\n    .portrait.is-swapping .portrait__sprite { animation: swapIn .45s cubic-bezier(.2, .9, .3, 1.35); }\n    @keyframes swapIn { from { transform: scale(.4) translateY(30%); opacity: 0; } }\n    .portrait__badge {\n      position: absolute; top: 12px; right: 12px; display: grid; place-items: center;\n      width: 54px; height: 54px; background: rgba(0, 0, 0, .5); border: 2px solid var(--accent);\n    }\n    .portrait__badge .sprite { --s: 38px; }\n    .portrait__ready {\n      position: absolute; left: 12px; bottom: 12px; padding: 6px 8px;\n      background: var(--accent); color: var(--ink);\n      font-size: .7rem; font-weight: 800; letter-spacing: .16em;\n      animation: blink 1.4s steps(2) infinite;\n    }\n    .select__class { font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }\n    .select__name { margin: 8px 0 12px; font: 900 clamp(1.8rem, 3.6vw, 2.6rem)\/1.05 var(--font-display); letter-spacing: -.02em; }\n    .select__desc { color: var(--muted); }\n    .select__quote {\n      margin-top: 18px; padding: 12px 16px; border-left: 4px solid var(--accent);\n      background: rgba(255, 255, 255, .04); font-style: italic;\n    }\n\n    \/* Bar stat karakter (0\u2013100) *\/\n    .statlist { display: grid; gap: 10px; margin-top: 22px; }\n    .stat {\n      display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 12px;\n      font: 700 .72rem\/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);\n    }\n    .stat__bar { position: relative; height: 12px; background: rgba(255, 255, 255, .08); }\n    .stat__fill {\n      position: absolute; inset: 0;\n      background: repeating-linear-gradient(90deg, var(--accent) 0 10px, color-mix(in srgb, var(--accent) 70%, #000) 10px 12px);\n      clip-path: inset(0 calc(100% - var(--v, 0) * 100%) 0 0);\n      transition: clip-path .6s var(--ease), background .4s;\n    }\n    .stat__val { color: var(--text); text-align: right; }\n\n    \/* Daftar pilihan karakter *\/\n    .roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }\n    .roster__btn {\n      position: relative; display: grid; justify-items: center; gap: 6px;\n      width: 92px; padding: 10px 6px 9px; cursor: pointer;\n      background: var(--panel); border: 2px solid var(--line); color: var(--muted);\n      font: 700 .62rem\/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;\n      transition: transform .2s var(--ease), border-color .2s, color .2s, box-shadow .2s;\n    }\n    .roster__btn .sprite { --s: 54px; }\n    .roster__btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }\n    .roster__btn[aria-checked=\"true\"] {\n      color: var(--text); border-color: var(--accent); transform: translateY(-4px);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 12px 30px -12px var(--accent);\n    }\n    .roster__btn[aria-checked=\"true\"]::before {\n      content: \"P1\"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);\n      padding: 3px 6px; background: var(--accent); color: var(--ink); font-size: .6rem; font-weight: 800;\n    }\n    @media (max-width: 760px) {\n      .select__panel { grid-template-columns: 1fr; }\n      .portrait { max-width: 340px; width: 100%; margin: 0 auto; }\n    }\n    @media (max-width: 420px) {\n      .roster { gap: 8px; }\n      .roster__btn { width: 62px; padding: 8px 4px; font-size: .52rem; }\n      .roster__btn .sprite { --s: 40px; }\n      .stat { grid-template-columns: 82px 1fr 30px; gap: 8px; }\n    }\n\n    \/* =========================================================\n       10. KOMUNITAS \u2014 gelembung chat + grid bento\n       ========================================================= *\/\n    .lobby { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 12px; margin-top: 26px; }\n    .lobby__label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }\n    .bubble {\n      position: relative; padding: 9px 12px 8px; background: #fff; color: var(--ink);\n      font: 800 .8rem\/1 var(--font-mono);\n      animation: float 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s);\n    }\n    .bubble::after {\n      content: \"\"; position: absolute; left: 10px; bottom: -7px; width: 9px; height: 7px;\n      background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%);\n    }\n    .bubble:nth-child(3n) { background: var(--cyan); }\n    .bubble:nth-child(4n) { background: var(--yellow); }\n    .bubble:nth-child(5n) { background: var(--pink); color: #fff; }\n\n    .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }\n    .bento__item {\n      position: relative; overflow: hidden; isolation: isolate; padding: 26px 24px;\n      background: var(--panel); border: 1px solid var(--line);\n      transition: border-color .25s, transform .25s var(--ease);\n    }\n    .bento__item::before {\n      content: \"\"; position: absolute; top: -40%; right: -30%; width: 70%; aspect-ratio: 1; z-index: -1;\n      background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent);\n    }\n    .bento__item:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-4px); }\n    .bento__item .sprite { --s: 50px; }\n    .bento__item h3 { margin: 16px 0 8px; font-size: 1.18rem; font-weight: 900; }\n    .bento__item p { color: var(--muted); font-size: .95rem; }\n    .bento__item--wide { grid-column: span 2; }\n    .bento__item--full { grid-column: 1 \/ -1; display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: start; }\n    .bento__item--full h3 { margin-top: 0; }\n    .regions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }\n    .regions li { padding: 8px 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); font-size: .82rem; }\n    .regions b { color: var(--accent); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }\n    @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } }\n    @media (max-width: 600px) {\n      .bento { grid-template-columns: 1fr; }\n      .bento__item--wide { grid-column: auto; }\n      .bento__item--full { grid-template-columns: 1fr; }\n    }\n\n    \/* =========================================================\n       11. KAMUS LOBBY \u2014 kartu yang bisa dibalik\n       ========================================================= *\/\n    .dict { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }\n    .dict__progress { margin-top: 18px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }\n    .dict__progress b { color: var(--yellow); }\n    .flip { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; perspective: 1000px; }\n    .flip__inner { display: grid; min-height: 196px; transform-style: preserve-3d; transition: transform .6s var(--ease); }\n    .flip[aria-pressed=\"true\"] .flip__inner { transform: rotateY(180deg); }\n    .flip__face {\n      grid-area: 1 \/ 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;\n      padding: 18px; border: 2px solid var(--line); background: var(--panel);\n      -webkit-backface-visibility: hidden; backface-visibility: hidden;\n    }\n    .flip__front { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%), var(--panel); }\n    .flip:hover .flip__front { border-color: var(--accent); }\n    .flip__back { transform: rotateY(180deg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }\n    .flip__idx { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }\n    .flip__back .flip__idx { color: var(--accent); }\n    .flip__term { font: 900 clamp(1.6rem, 3vw, 2.3rem)\/1 var(--font-display); color: var(--accent); }\n    .flip__hint { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }\n    .flip__def { font-size: .95rem; line-height: 1.5; }\n    @media (max-width: 960px) { .dict { grid-template-columns: repeat(2, 1fr); } }\n    @media (max-width: 420px) {\n      .dict { gap: 10px; }\n      .flip__face { padding: 14px; }\n      .flip__def { font-size: .86rem; }\n    }\n\n    \/* =========================================================\n       12. AJAKAN (CTA) \u2014 kirim GG\n       ========================================================= *\/\n    .cta__box {\n      position: relative; overflow: hidden; text-align: center;\n      padding: clamp(40px, 6vw, 76px) clamp(20px, 5vw, 64px);\n      border: 2px solid transparent; border-image: var(--grad) 1;\n      background:\n        radial-gradient(60% 80% at 0% 0%, rgba(255, 46, 151, .22), transparent 70%),\n        radial-gradient(60% 80% at 100% 100%, rgba(25, 230, 255, .18), transparent 70%),\n        var(--panel);\n    }\n    .cta__title {\n      max-width: 28ch; margin: 18px auto 0; text-wrap: balance;\n      font: 900 clamp(1.5rem, 3.4vw, 2.5rem)\/1.2 var(--font-display); letter-spacing: -.01em;\n    }\n    .cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }\n    .cta__actions .sprite { --s: 20px; }\n    .gg-count { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }\n    .gg-count b { color: var(--yellow); font-size: 1.1rem; }\n\n    \/* =========================================================\n       13. FOOTER\n       ========================================================= *\/\n    .footer { border-top: 1px solid var(--line); padding: 52px 0 40px; background: linear-gradient(180deg, transparent, rgba(157, 92, 255, .08)); }\n    .footer__inner { display: grid; justify-items: center; gap: 14px; text-align: center; }\n    .footer__brand { display: flex; align-items: center; gap: 12px; text-align: left; }\n    .footer__brand .sprite { --s: 44px; }\n    .footer__brand strong { display: block; font-weight: 900; letter-spacing: .08em; }\n    .footer__brand span { color: var(--muted); font-size: .88rem; }\n    .footer__blink { font-size: .78rem; font-weight: 800; letter-spacing: .3em; color: var(--yellow); animation: blink 1.2s steps(2) infinite; }\n    .footer__credit { color: var(--muted); font-size: .9rem; }\n    .footer__note { max-width: 62ch; color: var(--dim); font-size: .8rem; }\n    .footer__secret { color: var(--dim); font-size: .72rem; letter-spacing: .1em; opacity: .7; }\n\n    \/* =========================================================\n       14. ELEMEN MENGAMBANG: kembali ke atas, toast, confetti\n       ========================================================= *\/\n    .to-top {\n      --c: 5px; position: fixed; right: 16px; bottom: 16px; z-index: 70;\n      display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; cursor: pointer;\n      background: var(--ink); box-shadow: inset 0 0 0 2px var(--yellow);\n      opacity: 0; visibility: hidden; transform: translateY(12px);\n      transition: opacity .25s, transform .25s var(--ease), visibility .25s;\n    }\n    .to-top.is-visible { opacity: 1; visibility: visible; transform: none; }\n    .to-top .sprite { --s: 26px; }\n    .to-top:focus-visible { outline: none; box-shadow: inset 0 0 0 4px #fff; }\n\n    .toasts {\n      position: fixed; left: 16px; bottom: 16px; z-index: 120;\n      display: grid; gap: 10px; max-width: calc(100vw - 96px); pointer-events: none;\n    }\n    .toast {\n      display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;\n      background: #170c35; border: 2px solid var(--yellow); box-shadow: 6px 6px 0 rgba(0, 0, 0, .45);\n      animation: toastIn .35s cubic-bezier(.2, .9, .3, 1.25);\n    }\n    .toast .sprite { --s: 34px; }\n    .toast small { display: block; font: 700 .62rem\/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }\n    .toast strong { display: block; font-size: .92rem; line-height: 1.3; }\n    .toast span.toast__sub { display: block; color: var(--muted); font-size: .8rem; }\n    .toast.is-leaving { animation: toastOut .3s forwards; }\n    @keyframes toastIn { from { transform: translateX(-120%); } }\n    @keyframes toastOut { to { transform: translateX(-120%); opacity: 0; } }\n\n    .confetti {\n      position: fixed; z-index: 150; width: 8px; height: 8px; pointer-events: none;\n      animation: confetti .95s cubic-bezier(.2, .7, .3, 1) forwards;\n    }\n    @keyframes confetti { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }\n\n    \/* Easter egg: mode pelangi (kode rahasia) *\/\n    .rainbow .hero, .rainbow main { animation: hue 5s linear infinite; }\n    @keyframes hue { to { filter: hue-rotate(360deg); } }\n\n    \/* =========================================================\n       15. AKSESIBILITAS GERAK \u2014 hormati preferensi pengguna\n       ========================================================= *\/\n    @media (prefers-reduced-motion: reduce) {\n      html { scroll-behavior: auto; }\n      *, *::before, *::after {\n        animation-duration: .001ms !important; animation-iteration-count: 1 !important;\n        transition-duration: .001ms !important;\n      }\n      .js .reveal:not(.is-visible) { opacity: 1; }\n    }\n  <\/style>\n\n  <a class=\"fga-skip\" href=\"#tentang\">Lewati ke konten<\/a>\n  <div class=\"scroll-bar\" id=\"scrollBar\" aria-hidden=\"true\"><\/div>\n\n  <!-- ===================== NAVIGASI ===================== -->\n  <div class=\"topbar\" id=\"topbar\">\n    <div class=\"container topbar__inner\">\n      <a class=\"brand\" href=\"#beranda\" aria-label=\"FANS GAME ASIA, kembali ke awal\">\n        <span class=\"sprite\" data-sprite=\"gamepad\"><\/span>\n        <span class=\"brand__text\">FANS <b>GAME<\/b> ASIA<\/span>\n      <\/a>\n\n      <nav aria-label=\"Navigasi utama\">\n        <ul class=\"nav-menu\" id=\"navMenu\">\n          <li><a href=\"#beranda\" class=\"is-active\">Beranda<\/a><\/li>\n          <li><a href=\"#tentang\">Tentang<\/a><\/li>\n          <li><a href=\"#genre\">Genre<\/a><\/li>\n          <li><a href=\"#karakter\">Karakter<\/a><\/li>\n          <li><a href=\"#komunitas\">Komunitas<\/a><\/li>\n          <li><a href=\"#kamus\">Kamus<\/a><\/li>\n        <\/ul>\n      <\/nav>\n\n      <div class=\"xp-chip\" title=\"Kumpulkan XP dengan menjelajahi halaman\">\n        <span>LV <b id=\"lvNum\">1<\/b><\/span>\n        <span class=\"xp-chip__bar\" aria-hidden=\"true\"><i id=\"xpChipFill\"><\/i><\/span>\n        <span><b id=\"xpNum\">0<\/b> XP<\/span>\n      <\/div>\n\n      <button class=\"nav-toggle\" id=\"navToggle\" type=\"button\" aria-expanded=\"false\" aria-controls=\"navMenu\" aria-label=\"Buka menu\">\n        <span><\/span><span><\/span><span><\/span>\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <!-- ===================== HERO \/ HEADER ===================== -->\n  <header class=\"hero\" id=\"beranda\">\n    <div class=\"hero__bg\" aria-hidden=\"true\"><\/div>\n    <div class=\"hero__stars\" id=\"stars\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"container hero__grid\">\n      <!-- Teks utama -->\n      <div class=\"hero__copy\">\n        <p class=\"hero__status mono\"><span class=\"dot\" aria-hidden=\"true\"><\/span>Server Asia \u00b7 Online \u00b7 Halo, Player 1<\/p>\n        <h1 class=\"hero__title\">\n          <span class=\"l1\">Fans Game<\/span>\n          <span class=\"l2\">Asia<\/span>\n        <\/h1>\n        <p class=\"hero__tagline\">Beragam Selera, <span>Satu Semangat Bermain<\/span><\/p>\n        <p class=\"hero__lead\">Dari petualangan RPG hingga pertandingan kompetitif, temukan ragam game, karakter, dan budaya bermain yang mempertemukan para penggemar di seluruh Asia.<\/p>\n\n        <div class=\"hero__actions\">\n          <a class=\"btn px\" href=\"#tentang\"><span class=\"tri\" aria-hidden=\"true\"><\/span>Mulai Jelajah<\/a>\n          <a class=\"btn btn--ghost px\" href=\"#karakter\">Pilih Karakter<\/a>\n        <\/div>\n\n        <ul class=\"hud\" aria-label=\"Sekilas isi halaman\">\n          <li class=\"hud__item\"><b>06<\/b><span>Genre<\/span><\/li>\n          <li class=\"hud__item\"><b>05<\/b><span>Gaya Main<\/span><\/li>\n          <li class=\"hud__item\"><b>\u221e<\/b><span>Semangat<\/span><\/li>\n        <\/ul>\n      <\/div>\n\n      <!-- Mesin arcade dekoratif dengan maskot interaktif -->\n      <div class=\"hero__stage\">\n        <div class=\"stage-glow\" aria-hidden=\"true\"><\/div>\n        <div class=\"cabinet px\">\n          <div class=\"cabinet__top mono\" aria-hidden=\"true\">\u2605 FGA ARCADE \u2605<\/div>\n          <div class=\"screen\">\n            <div class=\"screen__hud mono\" aria-hidden=\"true\">\n              <span>1UP <b id=\"screenScore\">000000<\/b><\/span>\n              <span>LV <b id=\"screenLv\">01<\/b><\/span>\n            <\/div>\n            <div class=\"screen__sun\" aria-hidden=\"true\"><\/div>\n            <div class=\"screen__floor\" aria-hidden=\"true\"><\/div>\n            <span class=\"sky-item sky-item--coin\" aria-hidden=\"true\"><span class=\"sprite\" data-sprite=\"coin\"><\/span><\/span>\n            <span class=\"sky-item sky-item--heart\" aria-hidden=\"true\"><span class=\"sprite\" data-sprite=\"heart\"><\/span><\/span>\n            <span class=\"sky-item sky-item--star\" aria-hidden=\"true\"><span class=\"sprite\" data-sprite=\"star\"><\/span><\/span>\n            <button class=\"mascot\" id=\"mascot\" type=\"button\" aria-label=\"Sapa maskot slime, dapatkan 10 XP\">\n              <span class=\"sprite\" data-sprite=\"slime\"><\/span>\n            <\/button>\n            <p class=\"screen__press mono\" aria-hidden=\"true\">PRESS START<\/p>\n          <\/div>\n          <div class=\"cabinet__panel\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\n        <\/div>\n        <span class=\"stage-chip stage-chip--1\" aria-hidden=\"true\">RPG<\/span>\n        <span class=\"stage-chip stage-chip--2\" aria-hidden=\"true\">MOBA<\/span>\n        <span class=\"stage-chip stage-chip--3\" aria-hidden=\"true\">GACHA<\/span>\n        <span class=\"stage-chip stage-chip--4\" aria-hidden=\"true\">RITME<\/span>\n      <\/div>\n    <\/div>\n\n    <a class=\"scroll-cue mono\" href=\"#tentang\" aria-label=\"Gulir ke bagian Tentang\"><span>Gulir<\/span><i aria-hidden=\"true\"><\/i><\/a>\n  <\/header>\n\n  <!-- ===================== TICKER (dekoratif) ===================== -->\n  <div class=\"ticker\" aria-hidden=\"true\">\n    <div class=\"ticker__band ticker__band--back\">\n      <div class=\"ticker__track\" data-ticker>\n        <span>GG WP<\/span><span class=\"sep\">\u2726<\/span><span>Mabar<\/span><span class=\"sep\">\u2726<\/span><span>Satu Match Lagi<\/span><span class=\"sep\">\u2726<\/span><span>Level Up<\/span><span class=\"sep\">\u2726<\/span><span>Event Baru<\/span><span class=\"sep\">\u2726<\/span><span>Push Rank<\/span><span class=\"sep\">\u2726<\/span><span>Co-op<\/span><span class=\"sep\">\u2726<\/span><span>Speedrun<\/span><span class=\"sep\">\u2726<\/span>\n      <\/div>\n    <\/div>\n    <div class=\"ticker__band\">\n      <div class=\"ticker__track\" data-ticker>\n        <span>RPG<\/span><span class=\"sep\">\u2726<\/span><span>MOBA<\/span><span class=\"sep\">\u2726<\/span><span>Gacha<\/span><span class=\"sep\">\u2726<\/span><span>Fighting<\/span><span class=\"sep\">\u2726<\/span><span>Ritme<\/span><span class=\"sep\">\u2726<\/span><span>Kasual<\/span><span class=\"sep\">\u2726<\/span><span>Esports<\/span><span class=\"sep\">\u2726<\/span><span>Cosplay<\/span><span class=\"sep\">\u2726<\/span><span>Fan Art<\/span><span class=\"sep\">\u2726<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <main>\n    <!-- ===================== 01 \u00b7 TENTANG ===================== -->\n    <section class=\"section\" id=\"tentang\" aria-labelledby=\"judul-tentang\">\n      <div class=\"container about__grid\">\n        <div>\n          <div class=\"section-head reveal\">\n            <p class=\"eyebrow\">01 \u00b7 Tentang<\/p>\n            <h2 class=\"section-title\" id=\"judul-tentang\">Satu tempat untuk <span class=\"grad\">semua selera<\/span><\/h2>\n          <\/div>\n          <p class=\"about__lead reveal\" style=\"--d:1\">FANS GAME ASIA memperkenalkan ragam game dan budaya bermain di Asia, dari petualangan RPG hingga pertandingan kompetitif.<\/p>\n          <p class=\"about__text reveal\" style=\"--d:2\">Jelajahi karakter, gaya permainan, serta kebiasaan komunitas yang memberi warna pada hobi ini. Setiap pemain punya favorit, dan setiap game punya alasan untuk mempertemukan para penggemarnya.<\/p>\n\n          <div class=\"pillars\">\n            <article class=\"pillar reveal\" style=\"--accent:var(--pink); --d:2\">\n              <span class=\"sprite\" data-sprite=\"gamepad\"><\/span>\n              <h3>Ragam Game<\/h3>\n              <p>Dari RPG yang epik hingga arena kompetitif, kenali genre yang dicintai pemain Asia.<\/p>\n            <\/article>\n            <article class=\"pillar reveal\" style=\"--accent:var(--cyan); --d:3\">\n              <span class=\"sprite\" data-char=\"penjelajah\"><\/span>\n              <h3>Karakter &amp; Gaya<\/h3>\n              <p>Setiap pemain punya cara bermain sendiri. Temukan gaya yang paling mirip denganmu.<\/p>\n            <\/article>\n            <article class=\"pillar reveal\" style=\"--accent:var(--yellow); --d:4\">\n              <span class=\"sprite\" data-sprite=\"chat\"><\/span>\n              <h3>Budaya Komunitas<\/h3>\n              <p>Mabar, nobar, cosplay, hingga istilah lobby yang dimengerti sesama pemain.<\/p>\n            <\/article>\n          <\/div>\n        <\/div>\n\n        <!-- Quest log: tercentang otomatis saat pengunjung menjelajah -->\n        <aside class=\"quest reveal\" style=\"--d:2\" aria-labelledby=\"judul-quest\">\n          <div class=\"quest__head\">\n            <h3 id=\"judul-quest\">Quest Log<\/h3>\n            <span class=\"quest__count\" id=\"questCount\">0\/4 selesai<\/span>\n          <\/div>\n          <div class=\"quest__meter\" aria-hidden=\"true\"><i id=\"questFill\"><\/i><\/div>\n          <ol id=\"questList\">\n            <li data-quest=\"genre\"><span class=\"quest__box\" aria-hidden=\"true\"><\/span><span><strong>Jelajahi ragam genre<\/strong><small>Kunjungi bagian Genre<\/small><\/span><span class=\"quest__xp\">+100 XP<\/span><\/li>\n            <li data-quest=\"karakter\"><span class=\"quest__box\" aria-hidden=\"true\"><\/span><span><strong>Temukan gaya bermainmu<\/strong><small>Pilih satu karakter<\/small><\/span><span class=\"quest__xp\">+100 XP<\/span><\/li>\n            <li data-quest=\"komunitas\"><span class=\"quest__box\" aria-hidden=\"true\"><\/span><span><strong>Kenali budaya komunitas<\/strong><small>Kunjungi bagian Komunitas<\/small><\/span><span class=\"quest__xp\">+100 XP<\/span><\/li>\n            <li data-quest=\"kamus\"><span class=\"quest__box\" aria-hidden=\"true\"><\/span><span><strong>Kuasai kamus lobby<\/strong><small>Balik 3 kartu istilah<\/small><\/span><span class=\"quest__xp\">+100 XP<\/span><\/li>\n          <\/ol>\n          <p class=\"quest__hint\">Selesaikan quest sambil menjelajah halaman ini. Hadiahnya? Rasa puas, dan XP tentunya.<\/p>\n        <\/aside>\n      <\/div>\n    <\/section>\n\n    <!-- ===================== 02 \u00b7 GENRE ===================== -->\n    <section class=\"section section--tint\" id=\"genre\" aria-labelledby=\"judul-genre\">\n      <div class=\"container\">\n        <div class=\"section-head reveal\">\n          <p class=\"eyebrow\">02 \u00b7 Genre<\/p>\n          <h2 class=\"section-title\" id=\"judul-genre\">Pilih <span class=\"grad\">arena<\/span> favoritmu<\/h2>\n          <p class=\"section-sub\">Dari dunia fantasi yang luas sampai arena yang menegangkan, setiap genre punya penggemar setia di seluruh Asia.<\/p>\n        <\/div>\n\n        <!-- Filter genre -->\n        <div class=\"filters reveal\" style=\"--d:1\" role=\"group\" aria-label=\"Saring genre\">\n          <button class=\"chip\" type=\"button\" data-filter=\"semua\" aria-pressed=\"true\">Semua<\/button>\n          <button class=\"chip\" type=\"button\" data-filter=\"cerita\" aria-pressed=\"false\">Cerita &amp; Koleksi<\/button>\n          <button class=\"chip\" type=\"button\" data-filter=\"kompetitif\" aria-pressed=\"false\">Kompetitif<\/button>\n          <button class=\"chip\" type=\"button\" data-filter=\"santai\" aria-pressed=\"false\">Santai<\/button>\n        <\/div>\n        <p class=\"sr-only\" id=\"filterStatus\" aria-live=\"polite\"><\/p>\n\n        <div class=\"genre-grid\" id=\"genreGrid\">\n          <!-- 1. RPG -->\n          <article class=\"genre-card reveal\" data-cat=\"cerita\" data-tilt style=\"--accent:#9d5cff; --d:0\">\n            <div class=\"genre-card__top\">\n              <span class=\"genre-card__icon\"><span class=\"sprite\" data-sprite=\"sword\"><\/span><\/span>\n              <span class=\"genre-card__no mono\">#01 \u00b7 Cerita<\/span>\n            <\/div>\n            <h3>RPG &amp; Petualangan<\/h3>\n            <p>Dunia luas, cerita epik, dan party yang tumbuh bersama pemainnya. Dari JRPG berbasis giliran hingga action RPG dengan dunia terbuka.<\/p>\n            <ul class=\"tags\"><li>JRPG<\/li><li>Open World<\/li><li>Turn-Based<\/li><\/ul>\n            <dl class=\"mini-stats\">\n              <div><dt>Cerita<\/dt><dd><span class=\"seg\" style=\"--v:5\" role=\"img\" aria-label=\"Cerita 5 dari 5\"><\/span><\/dd><\/div>\n              <div><dt>Aksi<\/dt><dd><span class=\"seg\" style=\"--v:3\" role=\"img\" aria-label=\"Aksi 3 dari 5\"><\/span><\/dd><\/div>\n              <div><dt>Sosial<\/dt><dd><span class=\"seg\" style=\"--v:2\" role=\"img\" aria-label=\"Sosial 2 dari 5\"><\/span><\/dd><\/div>\n            <\/dl>\n          <\/article>\n\n          <!-- 2. MOBA & Esports -->\n          <article class=\"genre-card reveal\" data-cat=\"kompetitif\" data-tilt style=\"--accent:#19e6ff; --d:1\">\n            <div class=\"genre-card__top\">\n              <span class=\"genre-card__icon\"><span class=\"sprite\" data-sprite=\"trophy\"><\/span><\/span>\n              <span class=\"genre-card__no mono\">#02 \u00b7 Kompetitif<\/span>\n            <\/div>\n            <h3>MOBA &amp; Esports<\/h3>\n            <p>Adu strategi, kerja sama tim, dan refleks kilat. Ranked, turnamen, dan sorakan penonton jadi bahan bakar semangat bertanding.<\/p>\n            <ul class=\"tags\"><li>MOBA<\/li><li>FPS<\/li><li>Battle Royale<\/li><\/ul>\n            <dl class=\"mini-stats\">\n              <div><dt>Cerita<\/dt><dd><span class=\"seg\" style=\"--v:1\" role=\"img\" aria-label=\"Cerita 1 dari 5\"><\/span><\/dd><\/div>\n              <div><dt>Aksi<\/dt><dd><span class=\"seg\" style=\"--v:5\" role=\"img\" aria-label=\"Aksi 5 dari 5\"><\/span><\/dd><\/div>\n              <div><dt>Sosial<\/dt><dd><span class=\"seg\" style=\"--v:5\" role=\"img\" aria-label=\"Sosial 5 dari 5\"><\/span><\/dd><\/div>\n            <\/dl>\n          <\/article>\n\n          <!-- 3. Fighting & Arcade -->\n          <article class=\"genre-card reveal\" data-cat=\"kompetitif\" data-tilt style=\"--accent:#ff2e97; --d:2\">\n            <div class=\"genre-card__top\">\n              <span class=\"genre-card__icon\"><span class=\"sprite\" data-sprite=\"arcade\"><\/span><\/span>\n              <span class=\"genre-card__no mono\">#03 \u00b7 Kompetitif<\/span>\n            <\/div>\n            <h3>Fighting &amp; Arcade<\/h3>\n            <p>Hafalan kombo, duel satu lawan satu, dan rivalitas yang sehat. Warisan game center yang semangatnya terus menyala.<\/p>\n            <ul class=\"tags\"><li>Fighting<\/li><li>Arcade<\/li><li>Duel<\/li><\/ul>\n            <dl class=\"mini-stats\">\n              <div><dt>Cerita<\/dt><dd><span class=\"seg\" style=\"--v:2\" role=\"img\" aria-label=\"Cerita 2 dari 5\"><\/span><\/dd><\/div>\n              <div><dt>Aksi<\/dt><dd><span class=\"seg\" style=\"--v:5\" role=\"img\" aria-label=\"Aksi 5 dari 5\"><\/span><\/dd><\/div>\n              <div><dt>Sosial<\/dt><dd><span class=\"seg\" style=\"--v:3\" role=\"img\" aria-label=\"Sosial 3 dari 5\"><\/span><\/dd><\/div>\n            <\/dl>\n          <\/article>\n\n          <!-- 4. Gacha & Koleksi -->\n          <article class=\"genre-card reveal\" data-cat=\"cerita\" data-tilt style=\"--accent:#ffe14d; --d:0\">\n            <div class=\"genre-card__top\">\n              <span class=\"genre-card__icon\"><span class=\"sprite\" data-sprite=\"gem\"><\/span><\/span>\n              <span class=\"genre-card__no mono\">#04 \u00b7 Koleksi<\/span>\n            <\/div>\n            <h3>Gacha &amp; Koleksi<\/h3>\n            <p>Kumpulkan karakter favorit, ikuti event musiman, dan nikmati cerita yang terus berlanjut di setiap pembaruan.<\/p>\n            <ul class=\"tags\"><li>Gacha<\/li><li>Live Service<\/li><li>Event<\/li><\/ul>\n            <dl class=\"mini-stats\">\n              <div><dt>Cerita<\/dt><dd><span class=\"seg\" style=\"--v:4\" role=\"img\" aria-label=\"Cerita 4 dari 5\"><\/span><\/dd><\/div>\n              <div><dt>Aksi<\/dt><dd><span class=\"seg\" style=\"--v:3\" role=\"img\" aria-label=\"Aksi 3 dari 5\"><\/span><\/dd><\/div>\n              <div><dt>Sosial<\/dt><dd><span class=\"seg\" style=\"--v:3\" role=\"img\" aria-label=\"Sosial 3 dari 5\"><\/span><\/dd><\/div>\n            <\/dl>\n          <\/article>\n\n          <!-- 5. Kasual & Mobile -->\n          <article class=\"genre-card reveal\" data-cat=\"santai\" data-tilt style=\"--accent:#7dff6b; --d:1\">\n            <div class=\"genre-card__top\">\n              <span class=\"genre-card__icon\"><span class=\"sprite\" data-sprite=\"gamepad\"><\/span><\/span>\n              <span class=\"genre-card__no mono\">#05 \u00b7 Santai<\/span>\n            <\/div>\n            <h3>Kasual &amp; Mobile<\/h3>\n            <p>Sesi singkat di sela kesibukan. Puzzle, simulasi, dan game santai yang siap dimainkan kapan saja dari genggaman.<\/p>\n            <ul class=\"tags\"><li>Puzzle<\/li><li>Simulasi<\/li><li>Mobile<\/li><\/ul>\n            <dl class=\"mini-stats\">\n              <div><dt>Cerita<\/dt><dd><span class=\"seg\" style=\"--v:2\" role=\"img\" aria-label=\"Cerita 2 dari 5\"><\/span><\/dd><\/div>\n              <div><dt>Aksi<\/dt><dd><span class=\"seg\" style=\"--v:2\" role=\"img\" aria-label=\"Aksi 2 dari 5\"><\/span><\/dd><\/div>\n              <div><dt>Sosial<\/dt><dd><span class=\"seg\" style=\"--v:3\" role=\"img\" aria-label=\"Sosial 3 dari 5\"><\/span><\/dd><\/div>\n            <\/dl>\n          <\/article>\n\n          <!-- 6. Ritme & Musik -->\n          <article class=\"genre-card reveal\" data-cat=\"santai\" data-tilt style=\"--accent:#ff8a3d; --d:2\">\n            <div class=\"genre-card__top\">\n              <span class=\"genre-card__icon\"><span class=\"sprite\" data-sprite=\"note\"><\/span><\/span>\n              <span class=\"genre-card__no mono\">#06 \u00b7 Santai<\/span>\n            <\/div>\n            <h3>Ritme &amp; Musik<\/h3>\n            <p>Ketuk, geser, dan tahan sesuai irama. Perpaduan musik, ketepatan waktu, dan visual yang memanjakan mata.<\/p>\n            <ul class=\"tags\"><li>Rhythm<\/li><li>Musik<\/li><li>Idol<\/li><\/ul>\n            <dl class=\"mini-stats\">\n              <div><dt>Cerita<\/dt><dd><span class=\"seg\" style=\"--v:2\" role=\"img\" aria-label=\"Cerita 2 dari 5\"><\/span><\/dd><\/div>\n              <div><dt>Aksi<\/dt><dd><span class=\"seg\" style=\"--v:4\" role=\"img\" aria-label=\"Aksi 4 dari 5\"><\/span><\/dd><\/div>\n              <div><dt>Sosial<\/dt><dd><span class=\"seg\" style=\"--v:2\" role=\"img\" aria-label=\"Sosial 2 dari 5\"><\/span><\/dd><\/div>\n            <\/dl>\n          <\/article>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ===================== 03 \u00b7 PILIH KARAKTER ===================== -->\n    <section class=\"section select\" id=\"karakter\" aria-labelledby=\"judul-karakter\">\n      <div class=\"container\">\n        <div class=\"section-head reveal\">\n          <p class=\"eyebrow\">03 \u00b7 Karakter<\/p>\n          <h2 class=\"section-title\" id=\"judul-karakter\">Pilih <span class=\"grad\">gaya bermainmu<\/span><\/h2>\n          <p class=\"section-sub\">Ada yang bermain demi cerita, ada yang demi peringkat, ada pula yang sekadar mencari tawa bersama teman. Kamu termasuk yang mana?<\/p>\n        <\/div>\n\n        <div class=\"select__panel reveal\" style=\"--d:1\">\n          <!-- Potret karakter terpilih -->\n          <div class=\"portrait\" id=\"charPortrait\">\n            <div class=\"portrait__rays\" aria-hidden=\"true\"><\/div>\n            <span class=\"sprite portrait__sprite\" id=\"charSprite\" data-char=\"penjelajah\"><\/span>\n            <span class=\"portrait__badge\" aria-hidden=\"true\"><span class=\"sprite\" id=\"charBadge\" data-sprite=\"sword\"><\/span><\/span>\n            <span class=\"portrait__ready mono\" aria-hidden=\"true\">P1 READY<\/span>\n          <\/div>\n\n          <!-- Info karakter terpilih (diisi JS) -->\n          <div class=\"select__info\">\n            <p class=\"select__class mono\" id=\"charClass\">Kelas \u00b7 Explorer<\/p>\n            <h3 class=\"select__name\" id=\"charName\" aria-live=\"polite\">Sang Penjelajah<\/h3>\n            <p class=\"select__desc\" id=\"charDesc\">Tidak pernah melewatkan peti harta di pojok peta. Bagi Penjelajah, sidequest sama pentingnya dengan cerita utama, dan setiap NPC punya kisah yang layak didengar.<\/p>\n            <ul class=\"tags\" id=\"charGenres\" aria-label=\"Genre favorit\"><li>RPG<\/li><li>Open World<\/li><li>Petualangan<\/li><\/ul>\n            <blockquote class=\"select__quote\" id=\"charQuote\">\u201cJalan yang itu belum dijelajahi. Sebentar ya!\u201d<\/blockquote>\n            <div class=\"statlist\" id=\"charStats\"><\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Daftar karakter (tombol dibuat JS) -->\n        <div class=\"roster\" id=\"roster\" role=\"radiogroup\" aria-label=\"Pilih karakter\"><\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ===================== 04 \u00b7 KOMUNITAS ===================== -->\n    <section class=\"section section--tint\" id=\"komunitas\" aria-labelledby=\"judul-komunitas\">\n      <div class=\"container\">\n        <div class=\"section-head reveal\">\n          <p class=\"eyebrow\">04 \u00b7 Komunitas<\/p>\n          <h2 class=\"section-title\" id=\"judul-komunitas\">Main sendiri boleh, <span class=\"grad\">ramai-ramai lebih seru<\/span><\/h2>\n          <p class=\"section-sub\">Game jarang benar-benar dimainkan sendirian. Di balik layar ada teman mabar, penonton turnamen, kreator, dan kebiasaan kecil yang membuat komunitas terasa seperti rumah.<\/p>\n        <\/div>\n\n        <div class=\"lobby reveal\" style=\"--d:1\">\n          <span class=\"lobby__label mono\">Terdengar di lobby:<\/span>\n          <span class=\"bubble\" style=\"--i:0\">GG WP!<\/span>\n          <span class=\"bubble\" style=\"--i:1\">Mabar yuk!<\/span>\n          <span class=\"bubble\" style=\"--i:2\">Satu match lagi\u2026<\/span>\n          <span class=\"bubble\" style=\"--i:3\">Gacha 10x, semoga hoki!<\/span>\n          <span class=\"bubble\" style=\"--i:4\">Siapa yang carry?<\/span>\n          <span class=\"bubble\" style=\"--i:5\">Event baru rilis!<\/span>\n        <\/div>\n\n        <div class=\"bento\" id=\"bento\">\n          <article class=\"bento__item bento__item--wide reveal\" style=\"--accent:var(--yellow); --d:0\">\n            <span class=\"sprite\" data-sprite=\"coin\"><\/span>\n            <h3>Warnet, PC Bang &amp; Game Center<\/h3>\n            <p>Sebelum semua orang punya perangkat sendiri, banyak pemain bertemu di tempat bermain bersama. Budaya ini membentuk generasi pemain di berbagai negara Asia dan jejaknya masih terasa sampai sekarang.<\/p>\n            <ul class=\"regions\">\n              <li><b>Warnet<\/b> \u00b7 Indonesia<\/li>\n              <li><b>PC Bang<\/b> \u00b7 Korea Selatan<\/li>\n              <li><b>Game Center<\/b> \u00b7 Jepang<\/li>\n              <li><b>Wangba<\/b> \u00b7 Tiongkok<\/li>\n            <\/ul>\n          <\/article>\n          <article class=\"bento__item reveal\" style=\"--accent:var(--cyan); --d:1\">\n            <span class=\"sprite\" data-sprite=\"chat\"><\/span>\n            <h3>Mabar &amp; Voice Chat<\/h3>\n            <p>Main bareng teman, dari satu sofa hingga beda kota. Obrolan seru di voice chat sering lebih diingat daripada hasil pertandingannya.<\/p>\n          <\/article>\n          <article class=\"bento__item reveal\" style=\"--accent:var(--violet); --d:0\">\n            <span class=\"sprite\" data-sprite=\"trophy\"><\/span>\n            <h3>Nobar Turnamen<\/h3>\n            <p>Bersorak untuk tim favorit saat final esports, entah di arena, di kafe, atau lewat siaran langsung bersama ribuan penonton lain.<\/p>\n          <\/article>\n          <article class=\"bento__item reveal\" style=\"--accent:var(--pink); --d:1\">\n            <span class=\"sprite\" data-sprite=\"heart\"><\/span>\n            <h3>Cosplay &amp; Fan Art<\/h3>\n            <p>Karakter favorit dihidupkan lewat kostum, ilustrasi, dan kerajinan tangan. Kreativitas penggemar adalah bentuk cinta yang paling nyata.<\/p>\n          <\/article>\n          <article class=\"bento__item reveal\" style=\"--accent:var(--lime); --d:2\">\n            <span class=\"sprite\" data-sprite=\"book\"><\/span>\n            <h3>Panduan &amp; Tier List<\/h3>\n            <p>Build terbaik, rute farming, hingga debat tier list. Ilmu dibagikan sukarela agar pemain baru cepat berkembang.<\/p>\n          <\/article>\n          <article class=\"bento__item bento__item--full reveal\" style=\"--accent:var(--orange); --d:0\">\n            <span class=\"sprite\" data-sprite=\"star\"><\/span>\n            <div>\n              <h3>Event &amp; Festival<\/h3>\n              <p>Konvensi game, pameran budaya pop, dan festival anime menjadi ajang reuni tahunan para penggemar. Tempat bertemu langsung dengan teman yang selama ini hanya dikenal lewat username.<\/p>\n              <ul class=\"tags\"><li>Cosplay Parade<\/li><li>Turnamen Komunitas<\/li><li>Panggung Musik<\/li><li>Booth Merchandise<\/li><\/ul>\n            <\/div>\n          <\/article>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ===================== 05 \u00b7 KAMUS LOBBY ===================== -->\n    <section class=\"section\" id=\"kamus\" aria-labelledby=\"judul-kamus\">\n      <div class=\"container\">\n        <div class=\"section-head reveal\">\n          <p class=\"eyebrow\">05 \u00b7 Kamus Lobby<\/p>\n          <h2 class=\"section-title\" id=\"judul-kamus\">Bahasa rahasia <span class=\"grad\">para pemain<\/span><\/h2>\n          <p class=\"section-sub\">Istilah yang sering muncul di chat dan voice call. Ketuk kartu untuk membalik dan melihat artinya.<\/p>\n        <\/div>\n\n        <div class=\"dict\" id=\"dict\">\n          <button class=\"flip reveal\" type=\"button\" aria-pressed=\"false\" style=\"--accent:#ff2e97; --d:0\">\n            <span class=\"flip__inner\">\n              <span class=\"flip__face flip__front\"><span class=\"flip__idx\">Istilah #01<\/span><span class=\"flip__term\">GG<\/span><span class=\"flip__hint\">Ketuk untuk membalik \u21bb<\/span><\/span>\n              <span class=\"flip__face flip__back\"><span class=\"flip__idx\">GG \u00b7 Good Game<\/span><span class=\"flip__def\">Ucapan sportif di akhir pertandingan, menang ataupun kalah.<\/span><\/span>\n            <\/span>\n          <\/button>\n          <button class=\"flip reveal\" type=\"button\" aria-pressed=\"false\" style=\"--accent:#19e6ff; --d:1\">\n            <span class=\"flip__inner\">\n              <span class=\"flip__face flip__front\"><span class=\"flip__idx\">Istilah #02<\/span><span class=\"flip__term\">Mabar<\/span><span class=\"flip__hint\">Ketuk untuk membalik \u21bb<\/span><\/span>\n              <span class=\"flip__face flip__back\"><span class=\"flip__idx\">Mabar \u00b7 Main Bareng<\/span><span class=\"flip__def\">Ajakan bermain bersama teman, biasanya ditemani obrolan di voice chat.<\/span><\/span>\n            <\/span>\n          <\/button>\n          <button class=\"flip reveal\" type=\"button\" aria-pressed=\"false\" style=\"--accent:#ffe14d; --d:2\">\n            <span class=\"flip__inner\">\n              <span class=\"flip__face flip__front\"><span class=\"flip__idx\">Istilah #03<\/span><span class=\"flip__term\">Gacha<\/span><span class=\"flip__hint\">Ketuk untuk membalik \u21bb<\/span><\/span>\n              <span class=\"flip__face flip__back\"><span class=\"flip__idx\">Gacha \u00b7 Undian<\/span><span class=\"flip__def\">Sistem undian untuk mendapatkan karakter atau item, terinspirasi mesin kapsul mainan.<\/span><\/span>\n            <\/span>\n          <\/button>\n          <button class=\"flip reveal\" type=\"button\" aria-pressed=\"false\" style=\"--accent:#7dff6b; --d:3\">\n            <span class=\"flip__inner\">\n              <span class=\"flip__face flip__front\"><span class=\"flip__idx\">Istilah #04<\/span><span class=\"flip__term\">Grinding<\/span><span class=\"flip__hint\">Ketuk untuk membalik \u21bb<\/span><\/span>\n              <span class=\"flip__face flip__back\"><span class=\"flip__idx\">Grinding \u00b7 Menggiling<\/span><span class=\"flip__def\">Bermain berulang-ulang untuk mengumpulkan EXP, item, atau sumber daya.<\/span><\/span>\n            <\/span>\n          <\/button>\n          <button class=\"flip reveal\" type=\"button\" aria-pressed=\"false\" style=\"--accent:#9d5cff; --d:0\">\n            <span class=\"flip__inner\">\n              <span class=\"flip__face flip__front\"><span class=\"flip__idx\">Istilah #05<\/span><span class=\"flip__term\">Meta<\/span><span class=\"flip__hint\">Ketuk untuk membalik \u21bb<\/span><\/span>\n              <span class=\"flip__face flip__back\"><span class=\"flip__idx\">Meta \u00b7 Strategi Populer<\/span><span class=\"flip__def\">Strategi, karakter, atau build yang dianggap paling efektif pada suatu masa.<\/span><\/span>\n            <\/span>\n          <\/button>\n          <button class=\"flip reveal\" type=\"button\" aria-pressed=\"false\" style=\"--accent:#ff8a3d; --d:1\">\n            <span class=\"flip__inner\">\n              <span class=\"flip__face flip__front\"><span class=\"flip__idx\">Istilah #06<\/span><span class=\"flip__term\">Carry<\/span><span class=\"flip__hint\">Ketuk untuk membalik \u21bb<\/span><\/span>\n              <span class=\"flip__face flip__back\"><span class=\"flip__idx\">Carry \u00b7 Penggendong Tim<\/span><span class=\"flip__def\">Pemain yang performanya membawa seluruh tim menuju kemenangan.<\/span><\/span>\n            <\/span>\n          <\/button>\n          <button class=\"flip reveal\" type=\"button\" aria-pressed=\"false\" style=\"--accent:#19e6ff; --d:2\">\n            <span class=\"flip__inner\">\n              <span class=\"flip__face flip__front\"><span class=\"flip__idx\">Istilah #07<\/span><span class=\"flip__term\">AFK<\/span><span class=\"flip__hint\">Ketuk untuk membalik \u21bb<\/span><\/span>\n              <span class=\"flip__face flip__back\"><span class=\"flip__idx\">AFK \u00b7 Away From Keyboard<\/span><span class=\"flip__def\">Pemain yang sedang tidak aktif atau meninggalkan permainan sejenak.<\/span><\/span>\n            <\/span>\n          <\/button>\n          <button class=\"flip reveal\" type=\"button\" aria-pressed=\"false\" style=\"--accent:#ff2e97; --d:3\">\n            <span class=\"flip__inner\">\n              <span class=\"flip__face flip__front\"><span class=\"flip__idx\">Istilah #08<\/span><span class=\"flip__term\">Buff &amp; Nerf<\/span><span class=\"flip__hint\">Ketuk untuk membalik \u21bb<\/span><\/span>\n              <span class=\"flip__face flip__back\"><span class=\"flip__idx\">Buff \u00b7 Nerf<\/span><span class=\"flip__def\">Penguatan (buff) atau pelemahan (nerf) karakter maupun item lewat pembaruan game.<\/span><\/span>\n            <\/span>\n          <\/button>\n        <\/div>\n        <p class=\"dict__progress mono\">Kartu dibalik: <b id=\"flipCount\">0<\/b>\/8<\/p>\n      <\/div>\n    <\/section>\n\n    <!-- ===================== AJAKAN PENUTUP ===================== -->\n    <section class=\"section\" id=\"gabung\" aria-labelledby=\"judul-gabung\">\n      <div class=\"container\">\n        <div class=\"cta__box reveal\">\n          <p class=\"eyebrow\">Player 2 bergabung<\/p>\n          <h2 class=\"cta__title\" id=\"judul-gabung\">Setiap pemain punya favorit, dan setiap game punya alasan untuk <span class=\"grad\">mempertemukan para penggemarnya.<\/span><\/h2>\n          <div class=\"cta__actions\">\n            <button class=\"btn px\" id=\"ggBtn\" type=\"button\"><span class=\"sprite\" data-sprite=\"heart\" aria-hidden=\"true\"><\/span>Kirim GG!<\/button>\n            <span class=\"gg-count mono\" aria-live=\"polite\"><b id=\"ggCount\">0<\/b> GG terkirim<\/span>\n            <a class=\"btn btn--ghost px\" href=\"#beranda\">Kembali ke awal<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n  <\/main>\n\n  <!-- ===================== FOOTER (tanpa tautan) ===================== -->\n  <footer class=\"footer\">\n    <div class=\"container footer__inner\">\n      <div class=\"footer__brand\">\n        <span class=\"sprite\" data-sprite=\"slime\"><\/span>\n        <div><strong>FANS GAME ASIA<\/strong><span>Beragam Selera, Satu Semangat Bermain<\/span><\/div>\n      <\/div>\n      <p class=\"footer__blink mono\" aria-hidden=\"true\">INSERT COIN TO CONTINUE<\/p>\n      <p class=\"footer__credit\">\u00a9 <span id=\"year\">2026<\/span> FANS GAME ASIA. Dibuat dengan semangat oleh dan untuk para penggemar game.<\/p>\n      <p class=\"footer__note\">Nama genre dan istilah di halaman ini digunakan secara umum untuk tujuan informasi. Situs ini tidak berafiliasi dengan penerbit atau pengembang game mana pun.<\/p>\n      <p class=\"footer__secret mono\">Psst\u2026 coba ketik \u2191 \u2191 \u2193 \u2193 \u2190 \u2192 \u2190 \u2192 B A<\/p>\n    <\/div>\n  <\/footer>\n\n  <button class=\"to-top px\" id=\"toTop\" type=\"button\" aria-label=\"Kembali ke atas\"><span class=\"sprite\" data-sprite=\"arrow\"><\/span><\/button>\n  <div class=\"toasts\" id=\"toasts\" aria-live=\"polite\"><\/div>\n\n  <script>\n  (function () {\n    'use strict';\n    \/* Catatan: kode di bawah sengaja tidak memakai karakter ampersand agar aman saat ditempel di WordPress (blok Custom HTML). *\/\n\n    \/* =========================================================\n       0. UTILITAS\n       ========================================================= *\/\n    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    var $ = function (s, r) { return (r || document).querySelector(s); };\n    var $$ = function (s, r) { return Array.prototype.slice.call((r || document).querySelectorAll(s)); };\n    var restart = function (el, cls) { el.classList.remove(cls); void el.offsetWidth; el.classList.add(cls); };\n\n    \/* =========================================================\n       1. SPRITE PIXEL-ART\n       Setiap sprite ditulis sebagai baris teks; satu huruf = satu piksel.\n       '.' = transparan. Huruf dipetakan ke warna di PAL.\n       ========================================================= *\/\n    var PAL = {\n      k: '#14081f', w: '#ffffff', s: '#9aa3c7', y: '#ffe14d', o: '#ff8a3d',\n      p: '#ff2e97', r: '#ff4d6d', c: '#19e6ff', g: '#7dff6b', v: '#9d5cff',\n      d: '#3a1d78', b: '#8a5a3c', n: '#ffd2b0'\n    };\n\n    var SPRITES = {\n      sword: [\n        '...kk...', '..kwck..', '..kwck..', '..kwck..', '..kwck..', '..kwck..', '..kwck..', '..kwck..',\n        '..kwck..', 'kkkkkkkk', 'kyoyyoyk', 'kkkbbkkk', '..kbbk..', '..kbbk..', '..kyyk..', '..kkkk..'\n      ],\n      trophy: [\n        '..kkkkkkkk..', 'kkkyyyyywkkk', 'k.kyyyyywk.k', 'k.kyyyyywk.k', '.kkoyyyywkk.', '..koyyyyyk..',\n        '...koyyyk...', '....kyyk....', '....kyyk....', '...koyyyk...', '..kkkkkkkk..', '..kooooook..', '..kkkkkkkk..'\n      ],\n      gamepad: [\n        '..kkkk....kkkk..', '.kvvvvkkkkvvvvk.', 'kvwvvvvvvvvvvvvk', 'kvvkvvvvvvvvpvvk', 'kvkkkvvvvvvgvcvk',\n        'kvvkvvvvvvvvyvvk', 'kvvvvvvvvvvvvvvk', 'kvvvvkkkkkkvvvvk', '.kvvk......kvvk.', '..kk........kk..'\n      ],\n      gem: [\n        '...kkkkkk...', '..kwpppvvk..', '.kwwppppvvk.', 'kpppppppppvk', '.kppppppvvk.',\n        '..kpppppvk..', '...kpppvk...', '....kpvk....', '.....kk.....'\n      ],\n      note: [\n        '...kkkkkkkkk', '...kccccccck', '...kckkkkkck', '...kck...kck', '...kck...kck', '...kck...kck',\n        '...kck...kck', '.kkkck.kkkck', 'kwccckkwccck', 'kcccckkcccck', '.kkkk..kkkk.'\n      ],\n      arcade: [\n        '....kkkk....', '...kwrrrk...', '...krrrrk...', '....kkkk....', '.....kk.....', '.....kk.....',\n        'kkkkkkkkkkkk', 'kvvvvkkpvyvk', 'kvvvvvvvvvvk', 'kddddddddddk', 'kkkkkkkkkkkk'\n      ],\n      heart: [\n        '.kkk.kkk.', 'kpwpkpppk', 'kpppppppk', 'kpppppppk', '.kpppppk.', '..kpppk..', '...kpk...', '....k....'\n      ],\n      coin: [\n        '..kkkk..', '.kwyyyk.', 'kwyykyok', 'kyyykyok', 'kyyykyok', 'kyyyyook', '.kooook.', '..kkkk..'\n      ],\n      star: [\n        '....k....', '...kyk...', 'kkkywykkk', 'kyyyyyyyk', '.kyyyyyk.', '..kyyyk..', '.kyykyyk.', '.kyk.kyk.', '.kk...kk.'\n      ],\n      slime: [\n        '...kkkkkk...', '..kgwggggk..', '.kgwggggggk.', 'kggggggggggk', 'kggkggggkggk',\n        'kggkggggkggk', 'kgpggkkggpgk', 'kggggggggggk', '.kkkkkkkkkk.'\n      ],\n      chat: [\n        '.kkkkkkkkkk.', 'kcccccccccck', 'kcwwcwwcwwck', 'kcwwcwwcwwck', 'kcccccccccck', '.kkcckkkkkk.', '..kck.......', '..kk........'\n      ],\n      book: [\n        '.kkkk..kkkk.', 'kwwwwkkwwwwk', 'kwsswkkwsswk', 'kwwwwkkwwwwk', 'kwsswkkwsswk', 'kwwwwkkwwwwk', 'kvvvvkkvvvvk', '.kkkkkkkkkk.'\n      ],\n      arrow: [\n        '...kk...', '..kyyk..', '.kyyyyk.', 'kyyyyyyk', 'kkkyykkk', '..kyyk..', '..kyyk..', '..kkkk..'\n      ]\n    };\n\n    \/* Template kepala karakter (chibi). h=rambut, n=kulit, e=iris, a=baju, c=aksen baju *\/\n    var CHAR_BASE = [\n      '...kkkkkk...', '..khhhhhhk..', '.khhhhhhhhk.', 'khhhhhhhhhhk', 'khhnnhhnnhhk', 'khnnnnnnnnhk', 'khnkknnkknhk',\n      'khnkenneknhk', 'khnpnnnnpnhk', '.knnnkknnnk.', '..kknnnnkk..', '.kaaannaaak.', 'kaaaaccaaaak', 'kkkkkkkkkkkk'\n    ];\n\n    \/* Data karakter: palet, aksesori (overlay [baris, kolom, piksel]), teks, dan stat *\/\n    var STAT_LABELS = ['Eksplorasi', 'Kompetisi', 'Koleksi', 'Santai', 'Kreasi'];\n    var CHARS = [\n      {\n        id: 'penjelajah', short: 'Penjelajah', name: 'Sang Penjelajah', kelas: 'Explorer', accent: '#ff8a3d', badge: 'sword',\n        pal: { h: '#b8612a', e: '#19e6ff', a: '#2f6bff', c: '#ffe14d', x: '#ffe14d' },\n        over: [[3, 1, 'xxxxxxxxxx']],\n        desc: 'Tidak pernah melewatkan peti harta di pojok peta. Bagi Penjelajah, sidequest sama pentingnya dengan cerita utama, dan setiap NPC punya kisah yang layak didengar.',\n        genres: ['RPG', 'Open World', 'Petualangan'],\n        quote: '\u201cJalan yang itu belum dijelajahi. Sebentar ya!\u201d',\n        stats: [95, 40, 65, 70, 55]\n      },\n      {\n        id: 'kompetitor', short: 'Kompetitor', name: 'Sang Kompetitor', kelas: 'Challenger', accent: '#ff2e97', badge: 'trophy',\n        pal: { h: '#ff3d6e', e: '#ffe14d', a: '#2a2350', c: '#ff3d6e', x: '#19e6ff' },\n        over: [[0, 3, 'ssssss'], [1, 2, 's'], [1, 9, 's'], [2, 1, 's'], [2, 10, 's'], [3, 0, 's'], [3, 11, 's'],\n               [4, 0, 'xx'], [5, 0, 'xx'], [6, 0, 'xx'], [4, 10, 'xx'], [5, 10, 'xx'], [6, 10, 'xx'],\n               [7, 1, 's'], [8, 2, 's'], [9, 3, 'x']],\n        desc: 'Hidup untuk ranked dan papan peringkat. Kompetitor menonton ulang pertandingannya sendiri, mempelajari meta terbaru, lalu kembali ke arena dengan strategi baru.',\n        genres: ['MOBA', 'Fighting', 'FPS'],\n        quote: '\u201cSatu match lagi. Yang ini pasti naik rank!\u201d',\n        stats: [45, 98, 35, 25, 50]\n      },\n      {\n        id: 'kolektor', short: 'Kolektor', name: 'Sang Kolektor', kelas: 'Collector', accent: '#9d5cff', badge: 'gem',\n        pal: { h: '#8d4dff', e: '#ff2e97', a: '#ff5fae', c: '#ffffff', x: '#ffe14d' },\n        over: [[1, 8, 'x'], [2, 7, 'xxx'], [3, 8, 'x']],\n        desc: 'Daftar karakter lengkap, achievement 100%, dan inventori tertata rapi. Kolektor selalu menandai tanggal event dan tahu persis kapan banner favoritnya kembali.',\n        genres: ['Gacha', 'RPG', 'Event'],\n        quote: '\u201cTinggal satu lagi, koleksiku lengkap!\u201d',\n        stats: [60, 40, 97, 55, 50]\n      },\n      {\n        id: 'santai', short: 'Santai', name: 'Sang Santai', kelas: 'Chill Player', accent: '#7dff6b', badge: 'note',\n        pal: { h: '#3fd8c8', e: '#1a7dff', a: '#3fbf5f', c: '#ffffff', x: '#ff8a3d' },\n        over: [[1, 3, 'xxxxxx'], [2, 2, 'xxxxxxxx'], [3, 1, 'wwwwwwwwww'], [6, 3, 'nn'], [6, 7, 'nn'], [7, 3, 'kk'], [7, 7, 'kk']],\n        desc: 'Bermain untuk melepas penat, bukan untuk mengejar angka. Si Santai menikmati game kasual, lagu-lagu di game ritme, dan mabar sambil bercanda dengan teman.',\n        genres: ['Kasual', 'Ritme', 'Simulasi'],\n        quote: '\u201cYang penting seru, menang kalah urusan nanti.\u201d',\n        stats: [55, 25, 45, 96, 60]\n      },\n      {\n        id: 'kreator', short: 'Kreator', name: 'Sang Kreator', kelas: 'Creator', accent: '#19e6ff', badge: 'star',\n        pal: { h: '#ffd23f', e: '#9d5cff', a: '#ff8a3d', c: '#19e6ff', x: '#19e6ff' },\n        over: [[5, 2, 'xxxxxxxx'], [6, 2, 'x'], [6, 5, 'xx'], [6, 9, 'x'], [7, 2, 'x'], [7, 5, 'xx'], [7, 9, 'x'], [8, 2, 'xxxxxxxx']],\n        desc: 'Menghidupkan game di luar layar lewat fan art, cosplay, panduan, dan konten. Kreator sering menjadi alasan banyak orang jatuh cinta pada sebuah game.',\n        genres: ['Fan Art', 'Cosplay', 'Panduan'],\n        quote: '\u201cKarakter ini harus kugambar malam ini juga!\u201d',\n        stats: [65, 35, 55, 65, 95]\n      }\n    ];\n    var charById = function (id) { return CHARS.filter(function (c) { return c.id === id; })[0]; };\n\n    \/* Tempel aksesori ke template kepala *\/\n    function applyOverlay(base, over) {\n      var rows = base.map(function (r) { return r.split(''); });\n      (over || []).forEach(function (o) {\n        for (var i = 0; i < o[2].length; i++) { if (rows[o[0]]) { if (o[1] + i < rows[o[0]].length) rows[o[0]][o[1] + i] = o[2][i]; } }\n      });\n      return rows.map(function (r) { return r.join(''); });\n    }\n\n    \/* Ubah baris teks menjadi SVG (piksel yang berdampingan digabung agar ringan) *\/\n    function svgFromRows(rows, pal) {\n      var h = rows.length, w = 0;\n      rows.forEach(function (r) { w = Math.max(w, r.length); });\n      var box = Math.max(w, h, 12);\n      var ox = Math.floor((box - w) \/ 2), oy = Math.floor((box - h) \/ 2), out = '';\n      rows.forEach(function (row, y) {\n        for (var x = 0; x < row.length;) {\n          var ch = row[x];\n          if (ch === '.') { x++; continue; }\n          var run = 1;\n          while (row[x + run] === ch) run++;\n          out += '<rect x=\"' + (x + ox) + '\" y=\"' + (y + oy) + '\" width=\"' + run + '\" height=\"1\" fill=\"' + (pal[ch] || '#f0f') + '\"\/>';\n          x += run;\n        }\n      });\n      return '<svg viewBox=\"0 0 ' + box + ' ' + box + '\" shape-rendering=\"crispEdges\" aria-hidden=\"true\" focusable=\"false\">' + out + '<\/svg>';\n    }\n\n    function renderSprite(el) {\n      var rows, pal = PAL;\n      if (el.dataset.char) {\n        var c = charById(el.dataset.char);\n        if (!c) return;\n        rows = applyOverlay(CHAR_BASE, c.over);\n        pal = Object.assign({}, PAL, c.pal);\n      } else {\n        rows = SPRITES[el.dataset.sprite];\n        if (!rows) return;\n      }\n      el.innerHTML = svgFromRows(rows, pal);\n    }\n    function renderSprites(root) { $$('[data-sprite], [data-char]', root).forEach(renderSprite); }\n    renderSprites();\n\n    \/* =========================================================\n       2. NAVIGASI: menu mobile, status gulir, tautan aktif\n       ========================================================= *\/\n    var topbar = $('#topbar'), navToggle = $('#navToggle'), navMenu = $('#navMenu');\n    function setMenu(open) {\n      topbar.classList.toggle('is-open', open);\n      navToggle.setAttribute('aria-expanded', String(open));\n      navToggle.setAttribute('aria-label', open ? 'Tutup menu' : 'Buka menu');\n    }\n    navToggle.addEventListener('click', function () { setMenu(!topbar.classList.contains('is-open')); });\n    $$('a', navMenu).forEach(function (a) { a.addEventListener('click', function () { setMenu(false); }); });\n    document.addEventListener('keydown', function (e) {\n      if (e.key === 'Escape') { if (topbar.classList.contains('is-open')) { setMenu(false); navToggle.focus(); } }\n    });\n\n    var scrollBar = $('#scrollBar'), toTop = $('#toTop'), ticking = false;\n    function onScroll() {\n      var y = window.pageYOffset, max = document.documentElement.scrollHeight - window.innerHeight;\n      scrollBar.style.transform = 'scaleX(' + (max > 0 ? Math.min(y \/ max, 1) : 0) + ')';\n      topbar.classList.toggle('is-scrolled', y > 10);\n      toTop.classList.toggle('is-visible', y > 700);\n      ticking = false;\n    }\n    window.addEventListener('scroll', function () {\n      if (!ticking) { window.requestAnimationFrame(onScroll); ticking = true; }\n    }, { passive: true });\n    onScroll();\n\n    toTop.addEventListener('click', function () {\n      window.scrollTo({ top: 0, behavior: reduced ? 'auto' : 'smooth' });\n    });\n\n    var hasIO = 'IntersectionObserver' in window;\n    var navLinks = $$('a', navMenu);\n    if (hasIO) {\n      var navIO = new IntersectionObserver(function (entries) {\n        entries.forEach(function (en) {\n          if (!en.isIntersecting) return;\n          navLinks.forEach(function (a) {\n            var on = a.getAttribute('href') === '#' + en.target.id;\n            a.classList.toggle('is-active', on);\n            if (on) a.setAttribute('aria-current', 'true'); else a.removeAttribute('aria-current');\n          });\n        });\n      }, { rootMargin: '-45% 0px -50% 0px' });\n      navLinks.forEach(function (a) { var s = $(a.getAttribute('href')); if (s) navIO.observe(s); });\n    }\n\n    \/* =========================================================\n       3. ANIMASI REVEAL SAAT GULIR\n       ========================================================= *\/\n    var revealEls = $$('.reveal');\n    if (hasIO ? !reduced : false) {\n      var revealIO = new IntersectionObserver(function (entries, obs) {\n        entries.forEach(function (en) {\n          if (en.isIntersecting) { en.target.classList.add('is-visible'); obs.unobserve(en.target); }\n        });\n      }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n      revealEls.forEach(function (el) { revealIO.observe(el); });\n    } else {\n      revealEls.forEach(function (el) { el.classList.add('is-visible'); });\n    }\n\n    \/* =========================================================\n       4. DEKORASI HERO: bintang piksel dan ticker tanpa jeda\n       ========================================================= *\/\n    var stars = $('#stars');\n    if (stars) {\n      var starColors = ['#ffffff', '#ffe14d', '#19e6ff', '#ff2e97'], frag = document.createDocumentFragment();\n      for (var i = 0; i < 40; i++) {\n        var st = document.createElement('span'), size = [2, 2, 3, 4][i % 4];\n        st.style.cssText = 'left:' + (Math.random() * 100).toFixed(2) + '%;top:' + (Math.random() * 100).toFixed(2) + '%;width:' + size + 'px;height:' + size + 'px;background:' + starColors[i % 4] + ';animation-delay:' + (Math.random() * 4).toFixed(2) + 's;animation-duration:' + (2 + Math.random() * 3).toFixed(2) + 's';\n        frag.appendChild(st);\n      }\n      stars.appendChild(frag);\n    }\n    \/* Gandakan isi ticker agar putaran -50% terlihat mulus *\/\n    $$('[data-ticker]').forEach(function (track) {\n      $$(':scope > *', track).forEach(function (n) { track.appendChild(n.cloneNode(true)); });\n    });\n\n    \/* =========================================================\n       5. SISTEM XP, LEVEL, TOAST, CONFETTI\n       ========================================================= *\/\n    var XP_PER_LEVEL = 250, xp = 0, level = 1;\n    var toastBox = $('#toasts');\n\n    function toast(label, title, sub) {\n      var el = document.createElement('div');\n      el.className = 'toast';\n      var icon = document.createElement('span');\n      icon.className = 'sprite'; icon.setAttribute('data-sprite', 'star');\n      var body = document.createElement('div');\n      var s = document.createElement('small'); s.textContent = label;\n      var t = document.createElement('strong'); t.textContent = title;\n      body.appendChild(s); body.appendChild(t);\n      if (sub) { var d = document.createElement('span'); d.className = 'toast__sub'; d.textContent = sub; body.appendChild(d); }\n      el.appendChild(icon); el.appendChild(body);\n      toastBox.appendChild(el);\n      renderSprite(icon);\n      while (toastBox.children.length > 2) toastBox.removeChild(toastBox.firstElementChild);\n      setTimeout(function () {\n        el.classList.add('is-leaving');\n        setTimeout(function () { if (el.parentNode) el.parentNode.removeChild(el); }, reduced ? 0 : 320);\n      }, 2800);\n    }\n\n    function addXP(n) {\n      xp += n;\n      var newLevel = Math.floor(xp \/ XP_PER_LEVEL) + 1;\n      $('#xpNum').textContent = xp;\n      $('#lvNum').textContent = newLevel;\n      $('#xpChipFill').style.width = ((xp % XP_PER_LEVEL) \/ XP_PER_LEVEL * 100) + '%';\n      $('#screenScore').textContent = String(xp).padStart(6, '0');\n      $('#screenLv').textContent = String(newLevel).padStart(2, '0');\n      if (newLevel > level) { level = newLevel; toast('Level Up', 'Selamat! Kamu naik ke LV ' + level, 'Terus jelajahi untuk XP lainnya.'); }\n    }\n\n    var CONFETTI_COLORS = ['#ff2e97', '#19e6ff', '#ffe14d', '#7dff6b', '#9d5cff', '#ff8a3d'];\n    function confetti(x, y, count) {\n      if (reduced) return;\n      for (var i = 0; i < count; i++) {\n        var p = document.createElement('i'), ang = Math.random() * Math.PI * 2, dist = 50 + Math.random() * 110;\n        p.className = 'confetti';\n        p.style.left = x + 'px'; p.style.top = y + 'px';\n        p.style.background = CONFETTI_COLORS[i % CONFETTI_COLORS.length];\n        p.style.setProperty('--dx', (Math.cos(ang) * dist).toFixed(1) + 'px');\n        p.style.setProperty('--dy', (Math.sin(ang) * dist + 70).toFixed(1) + 'px');\n        p.style.setProperty('--r', (Math.random() * 720 - 360).toFixed(0) + 'deg');\n        p.addEventListener('animationend', function () { this.remove(); });\n        document.body.appendChild(p);\n      }\n    }\n\n    \/* =========================================================\n       6. QUEST LOG \u2014 selesai saat menjelajah \/ berinteraksi\n       ========================================================= *\/\n    var QUEST_TITLES = {\n      genre: 'Jelajahi ragam genre', karakter: 'Temukan gaya bermainmu',\n      komunitas: 'Kenali budaya komunitas', kamus: 'Kuasai kamus lobby'\n    };\n    var quests = { genre: false, karakter: false, komunitas: false, kamus: false };\n\n    function completeQuest(id) {\n      if (quests[id]) return;\n      quests[id] = true;\n      var li = $('#questList [data-quest=\"' + id + '\"]');\n      if (li) { li.classList.add('is-done'); $('.quest__xp', li).textContent = 'Selesai'; }\n      var done = Object.keys(quests).filter(function (k) { return quests[k]; }).length;\n      $('#questCount').textContent = done + '\/4 selesai';\n      $('#questFill').style.width = (done \/ 4 * 100) + '%';\n      toast('Quest selesai \u00b7 +100 XP', QUEST_TITLES[id]);\n      addXP(100);\n      if (done === 4) {\n        setTimeout(function () {\n          toast('Achievement', 'Semua quest selesai!', 'Kamu resmi jadi bagian FANS GAME ASIA.');\n          confetti(window.innerWidth \/ 2, window.innerHeight \/ 2, 44);\n        }, 600);\n      }\n    }\n\n    \/* Quest berbasis gulir: tandai selesai saat area terlihat *\/\n    function watchQuest(selector, id) {\n      var el = $(selector);\n      if (!el) return;\n      if (!hasIO) { return; }\n      var qIO = new IntersectionObserver(function (entries, obs) {\n        entries.forEach(function (en) { if (en.isIntersecting) { completeQuest(id); obs.disconnect(); } });\n      }, { threshold: 0.3 });\n      qIO.observe(el);\n    }\n    watchQuest('#genreGrid', 'genre');\n    watchQuest('#bento', 'komunitas');\n\n    \/* =========================================================\n       7. MASKOT HERO \u2014 klik untuk +10 XP\n       ========================================================= *\/\n    var mascot = $('#mascot');\n    mascot.addEventListener('click', function () {\n      addXP(10);\n      if (!reduced) restart(mascot, 'is-jumping');\n      var screen = mascot.parentNode, ft = document.createElement('span');\n      ft.className = 'float-text'; ft.textContent = '+10 XP';\n      ft.style.left = (mascot.offsetLeft + mascot.offsetWidth * 0.3) + 'px';\n      ft.style.top = (mascot.offsetTop - 10) + 'px';\n      screen.appendChild(ft);\n      setTimeout(function () { ft.remove(); }, 950);\n    });\n    mascot.addEventListener('animationend', function (e) { if (e.animationName === 'jump') mascot.classList.remove('is-jumping'); });\n\n    \/* =========================================================\n       8. GENRE \u2014 filter kategori dan efek tilt kartu\n       ========================================================= *\/\n    var chips = $$('.chip[data-filter]'), cards = $$('.genre-card'), filterStatus = $('#filterStatus');\n    chips.forEach(function (btn) {\n      btn.addEventListener('click', function () {\n        var f = btn.dataset.filter, shown = 0;\n        chips.forEach(function (b) { b.setAttribute('aria-pressed', String(b === btn)); });\n        cards.forEach(function (card) {\n          var show = f === 'semua' || card.dataset.cat === f;\n          card.hidden = !show;\n          if (show) { shown++; card.classList.add('is-visible'); if (!reduced) restart(card, 'pop'); }\n        });\n        filterStatus.textContent = 'Menampilkan ' + shown + ' genre.';\n      });\n    });\n\n    var canTilt = reduced ? false : window.matchMedia('(hover: hover) and (pointer: fine)').matches;\n    if (canTilt) {\n      $$('[data-tilt]').forEach(function (el) {\n        el.addEventListener('pointermove', function (e) {\n          var r = el.getBoundingClientRect(), x = (e.clientX - r.left) \/ r.width, y = (e.clientY - r.top) \/ r.height;\n          el.style.setProperty('--ry', ((x - 0.5) * 10).toFixed(2) + 'deg');\n          el.style.setProperty('--rx', ((0.5 - y) * 8).toFixed(2) + 'deg');\n          el.style.setProperty('--mx', (x * 100).toFixed(1) + '%');\n          el.style.setProperty('--my', (y * 100).toFixed(1) + '%');\n        });\n        el.addEventListener('pointerleave', function () {\n          el.style.setProperty('--rx', '0deg'); el.style.setProperty('--ry', '0deg');\n        });\n      });\n    }\n\n    \/* =========================================================\n       9. PILIH KARAKTER \u2014 roster dengan navigasi keyboard\n       ========================================================= *\/\n    var selectSection = $('#karakter'), roster = $('#roster'), statWrap = $('#charStats'), portrait = $('#charPortrait');\n    var current = 0;\n\n    statWrap.innerHTML = STAT_LABELS.map(function (l) {\n      return '<div class=\"stat\"><span class=\"stat__label\">' + l + '<\/span><span class=\"stat__bar\" aria-hidden=\"true\"><span class=\"stat__fill\"><\/span><\/span><span class=\"stat__val\">0<\/span><\/div>';\n    }).join('');\n    var statRows = $$('.stat', statWrap);\n\n    CHARS.forEach(function (c, i) {\n      var b = document.createElement('button');\n      b.type = 'button'; b.className = 'roster__btn';\n      b.setAttribute('role', 'radio'); b.setAttribute('aria-checked', 'false');\n      b.tabIndex = -1;\n      b.style.setProperty('--accent', c.accent);\n      b.innerHTML = '<span class=\"sprite\" data-char=\"' + c.id + '\"><\/span><span>' + c.short + '<\/span>';\n      b.addEventListener('click', function () { selectChar(i, true); });\n      roster.appendChild(b);\n    });\n    renderSprites(roster);\n    var rosterBtns = $$('.roster__btn', roster);\n\n    function selectChar(i, byUser) {\n      var c = CHARS[i];\n      current = i;\n      selectSection.style.setProperty('--accent', c.accent);\n      rosterBtns.forEach(function (b, j) {\n        b.setAttribute('aria-checked', String(j === i));\n        b.tabIndex = j === i ? 0 : -1;\n      });\n      var sp = $('#charSprite'); sp.dataset.char = c.id; renderSprite(sp);\n      var bd = $('#charBadge'); bd.dataset.sprite = c.badge; renderSprite(bd);\n      $('#charClass').textContent = 'Kelas \u00b7 ' + c.kelas;\n      $('#charName').textContent = c.name;\n      $('#charDesc').textContent = c.desc;\n      $('#charQuote').textContent = c.quote;\n      $('#charGenres').innerHTML = c.genres.map(function (g) { return '<li>' + g + '<\/li>'; }).join('');\n      statRows.forEach(function (row, j) {\n        $('.stat__fill', row).style.setProperty('--v', c.stats[j] \/ 100);\n        $('.stat__val', row).textContent = c.stats[j];\n        row.setAttribute('aria-label', STAT_LABELS[j] + ': ' + c.stats[j] + ' dari 100');\n      });\n      if (byUser) {\n        if (!reduced) restart(portrait, 'is-swapping');\n        completeQuest('karakter');\n      }\n    }\n\n    roster.addEventListener('keydown', function (e) {\n      var step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[e.key], next;\n      if (step) next = (current + step + CHARS.length) % CHARS.length;\n      else if (e.key === 'Home') next = 0;\n      else if (e.key === 'End') next = CHARS.length - 1;\n      else return;\n      e.preventDefault();\n      selectChar(next, true);\n      rosterBtns[next].focus();\n    });\n    selectChar(0, false);\n\n    \/* =========================================================\n       10. KAMUS \u2014 kartu balik + progres quest\n       ========================================================= *\/\n    var flipped = [], flipCount = $('#flipCount');\n    $$('.flip').forEach(function (card, i) {\n      card.addEventListener('click', function () {\n        var on = card.getAttribute('aria-pressed') !== 'true';\n        card.setAttribute('aria-pressed', String(on));\n        if (on ? flipped.indexOf(i) === -1 : false) {\n          flipped.push(i);\n          flipCount.textContent = flipped.length;\n          addXP(5);\n          if (flipped.length >= 3) completeQuest('kamus');\n          if (flipped.length === 8) toast('Achievement', 'Kamus lengkap!', 'Semua istilah lobby sudah kamu kuasai.');\n        }\n      });\n    });\n\n    \/* =========================================================\n       11. TOMBOL GG\n       ========================================================= *\/\n    var gg = 0, ggBtn = $('#ggBtn');\n    ggBtn.addEventListener('click', function () {\n      gg++;\n      $('#ggCount').textContent = gg;\n      addXP(5);\n      var r = ggBtn.getBoundingClientRect();\n      confetti(r.left + r.width \/ 2, r.top + r.height \/ 2, 14);\n      if (gg === 10) toast('Achievement', 'Sportif Sejati', '10 GG terkirim. Respect!');\n    });\n\n    \/* =========================================================\n       12. EASTER EGG \u2014 kode rahasia \u2191\u2191\u2193\u2193\u2190\u2192\u2190\u2192BA\n       ========================================================= *\/\n    var KONAMI = ['arrowup', 'arrowup', 'arrowdown', 'arrowdown', 'arrowleft', 'arrowright', 'arrowleft', 'arrowright', 'b', 'a'];\n    var kPos = 0;\n    document.addEventListener('keydown', function (e) {\n      var k = (e.key || '').toLowerCase();\n      kPos = (k === KONAMI[kPos]) ? kPos + 1 : (k === KONAMI[0] ? 1 : 0);\n      if (kPos === KONAMI.length) {\n        kPos = 0;\n        var on = document.body.classList.toggle('rainbow');\n        if (on) {\n          toast('Kode rahasia', 'Mode pelangi aktif!', '+500 XP untuk pemain legendaris.');\n          addXP(500);\n          confetti(window.innerWidth \/ 2, window.innerHeight \/ 2, 40);\n        } else {\n          toast('Kode rahasia', 'Mode pelangi dimatikan', 'Sampai jumpa lagi, Player!');\n        }\n      }\n    });\n\n    \/* =========================================================\n       13. LAIN-LAIN \u2014 tahun otomatis di footer\n       ========================================================= *\/\n    $('#year').textContent = new Date().getFullYear();\n  })();\n  <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Lewati ke konten FANS GAME ASIA Beranda Tentang Genre Karakter Komunitas Kamus LV 1 0 XP Server Asia \u00b7 Online \u00b7 Halo, Player 1 Fans Game Asia Beragam Selera, Satu Semangat Bermain Dari petualangan RPG hingga pertandingan kompetitif, temukan ragam game, karakter, dan budaya bermain yang mempertemukan para penggemar di seluruh Asia. Mulai Jelajah Pilih [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"fga-blank","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ligerlabusa.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ligerlabusa.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ligerlabusa.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ligerlabusa.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ligerlabusa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":1,"href":"https:\/\/ligerlabusa.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/ligerlabusa.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/ligerlabusa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}