{"id":3240,"date":"2025-07-11T01:00:32","date_gmt":"2025-07-11T01:00:32","guid":{"rendered":"https:\/\/godsgalaxygame.com\/GGG\/?page_id=3240"},"modified":"2026-05-09T06:57:59","modified_gmt":"2026-05-09T06:57:59","slug":"owners-club","status":"publish","type":"page","link":"https:\/\/godsgalaxygame.com\/GGG\/owners-club\/","title":{"rendered":"Owners Club"},"content":{"rendered":"\n<!-- ===== OWNERS CLUB \u2014 STARFIELD BACKGROUND (behind cube + map) ===== -->\n<canvas id=\"ocStarfield\" aria-hidden=\"true\"><\/canvas>\n\n<style>\n  \/* Fullscreen background behind everything *\/\n  #ocStarfield{\n    position: fixed;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    display: block;\n    z-index: 0;\n    pointer-events: none;\n  }\n\n  \/* Keep Owners Club UI above the starfield *\/\n  #ownerCubeContainer{ position: relative; z-index: 5; }\n\n  \/* Optional: keep page dark *\/\n  body{ background:#000; }\n<\/style>\n\n<script>\n(function(){\n  const c = document.getElementById('ocStarfield');\n  if(!c) return;\n  const ctx = c.getContext('2d');\n\n  let W=0, H=0, dpr=1, stars=[], meteors=[];\n  let rafId=null, running=true;\n\n  function resize(){\n    dpr = Math.max(1, Math.min(2, window.devicePixelRatio||1));\n    W = c.width  = Math.floor(innerWidth  * dpr);\n    H = c.height = Math.floor(innerHeight * dpr);\n    c.style.width  = innerWidth  + 'px';\n    c.style.height = innerHeight + 'px';\n    buildStars();\n  }\n\n  function buildStars(){\n    const count = Math.floor((W*H) \/ (14000*dpr));\n    stars = Array.from({length: count}, () => ({\n      x: Math.random()*W,\n      y: Math.random()*H,\n      r: (Math.random()*1.2+0.4)*dpr,\n      a: Math.random()*1\n    }));\n  }\n\n  function spawnMeteor(){\n    const startX = Math.random()<0.5 ? -50*dpr : W+50*dpr;\n    const dir = startX<0 ? 1 : -1;\n    const startY = Math.random()*H*0.6 + H*0.1;\n    meteors.push({ x:startX, y:startY, vx: dir*(3.2*dpr), vy: 1.2*dpr, life: 0, max: 1600 });\n  }\n\n  let last=0, accum=0;\n  function tick(ts){\n    if(!running) return;\n\n    const dt = Math.min(33, ts-last || 16); \n    last=ts; \n    accum+=dt;\n\n    if (accum>900+Math.random()*900) { spawnMeteor(); accum=0; }\n\n    ctx.setTransform(1,0,0,1,0,0);\n    ctx.clearRect(0,0,W,H);\n\n    \/\/ Subtle cyan nebula glow (premium)\n    const g = ctx.createRadialGradient(\n      W\/2, H*0.15, 0,\n      W\/2, H*0.4,  Math.hypot(W,H)\/1.4\n    );\n    g.addColorStop(0,'rgba(0,220,255,0.10)');\n    g.addColorStop(1,'rgba(0,0,0,0)');\n    ctx.fillStyle=g; \n    ctx.fillRect(0,0,W,H);\n\n    \/\/ Twinkle stars\n    for(const s of stars){\n      s.a += (Math.random()*0.06-0.03);\n      const a = 0.35+0.35*Math.sin(s.a);\n      ctx.fillStyle = `rgba(200,245,255,${a})`;\n      ctx.beginPath();\n      ctx.arc(s.x,s.y,s.r,0,Math.PI*2);\n      ctx.fill();\n    }\n\n    \/\/ Meteors\n    for (let i=meteors.length-1;i>=0;i--){\n      const m = meteors[i];\n      m.x += m.vx; \n      m.y += m.vy; \n      m.life += dt;\n\n      const trailX = m.x - m.vx*6;\n      const trailY = m.y - m.vy*6;\n\n      const grad = ctx.createLinearGradient(m.x,m.y, trailX,trailY);\n      grad.addColorStop(0,'rgba(0,255,255,0.9)');\n      grad.addColorStop(1,'rgba(0,255,255,0)');\n\n      ctx.strokeStyle = grad;\n      ctx.lineWidth = 2*dpr;\n      ctx.lineCap='round';\n\n      ctx.beginPath();\n      ctx.moveTo(m.x,m.y);\n      ctx.lineTo(trailX, trailY);\n      ctx.stroke();\n\n      if (m.x<-200*dpr || m.x>W+200*dpr || m.y>H+200*dpr || m.life>m.max){\n        meteors.splice(i,1);\n      }\n    }\n\n    rafId = requestAnimationFrame(tick);\n  }\n\n  \/\/ Optional controller (if you ever want to pause\/play)\n  window.ocStarfieldControl = {\n    pause(){ running=false; if(rafId) cancelAnimationFrame(rafId); },\n    play(){ if(running) return; running=true; last=0; accum=0; rafId=requestAnimationFrame(tick); }\n  };\n\n  addEventListener('resize', resize, {passive:true});\n  resize();\n  rafId = requestAnimationFrame(tick);\n})();\n<\/script>\n<!-- ===== end OWNERS CLUB starfield ===== -->\n\n\n\n<!-- BLOQUE 2 - Owners Club Cube V19 Completo + Mapa Circular + API -->\n<style>\n  @media (max-width: 768px) {\n    #glowMapContainer {\n      margin-top: -50px !important;\n    }\n  }\n<\/style>\n<div id=\"ownerCubeContainer\" style=\"opacity:1; pointer-events: auto; transition: opacity 0.6s ease;\">\n  <!-- ESCENA CUBO -->\n  <div class=\"cube-scene\" style=\"width:180px; height:180px; perspective:1000px; position:fixed; bottom:20px; left:20px; z-index:1000;\">\n    <div class=\"cube\" id=\"ownerCube\" style=\"width:100%; height:100%; position:relative; transform-style:preserve-3d; transform:rotateX(0deg) rotateY(0deg); transition:transform 0.3s ease;\">\n   <!-- FRONT -->\n      <div class=\"face front\" style=\"width:180px; height:180px; background:transparent; border:2px solid white; box-shadow:0 0 20px white; position:absolute; transform:rotateY(0deg) translateZ(90px); display:flex; flex-direction:column; justify-content:center; align-items:center; font-family:Orbitron;\">\n        <div style=\"font-size:42px; color:white; text-shadow:0 0 15px white;\">\ud83d\udc51<\/div>\n        <div style=\"font-size:16px; color:white; font-weight:bold; text-shadow:0 0 10px white; margin-top:6px;\">Owners Club<\/div>\n      <\/div>\n\n      <!-- Cara Trasera del Cubo: Transportation -->\n<!-- Back Face - Transportation Cube - Nuevo Dise\u00f1o con Botones Circulares -->\n<div class=\"face back\" style=\"width:180px; height:180px; background:#000; border:2px solid white; box-shadow:0 0 15px white; position:absolute; transform:rotateY(180deg) translateZ(90px); font-family:Orbitron,sans-serif;\">\n\n  <!-- Sol central -->\n  <img decoding=\"async\" src=\"http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/06\/1000065346-scaled.jpg\"\n       style=\"width:70px; height:70px; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); box-shadow:0 0 20px white;\" \/>\n\n  <!-- Reserve -->\n  <a href=\"https:\/\/godsgalaxygame.com\/GGG\/fractional-ownership\/?fractional=1\" target=\"_blank\"\n     style=\"position:absolute; top:8px; left:8px; width:44px; height:44px; border-radius:50%; background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/06\/Screenshot_20240108-225452_Chrome-scaled.jpg'); background-size:cover; box-shadow:0 0 12px cyan;\"\n     title=\"Reserve\"><\/a>\n\n  <!-- Bliss Coin -->\n  <div onclick=\"openBlissCoinPopup()\"\n       style=\"position:absolute; top:8px; right:8px; width:44px; height:44px; border-radius:50%; background:#222; font-size:40px; display:flex; justify-content:center; align-items:center; color:white; box-shadow:0 0 10px cyan; cursor:pointer;\"\n       title=\"Pay with Bliss Coin\">\ud83d\udcb3<\/div>\n\n  <!-- Coupon Button (Bottom-Left Corner) -->\n<a href=\"https:\/\/godsgalaxygame.com\/GGG\/discounts-gift\/\"\n   target=\"_blank\"\n   style=\"position: absolute;\n          bottom: 8px;\n          left: 8px;\n          width: 44px;\n          height: 44px;\n          border-radius: 50%;\n          background-image: url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/06\/Screenshot_20240108-225546_Chrome.jpg');\n          background-size: cover;\n          box-shadow: 0 0 12px cyan;\n          cursor: pointer;\"\n   title=\"Get Coupons\">\n<\/a>\n\n  <!-- Become a Host -->\n  <a href=\"https:\/\/luxus2.godaddysites.com\/\" target=\"_blank\"\n     style=\"position:absolute; bottom:8px; right:8px; width:44px; height:44px; border-radius:50%; background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/06\/Screenshot_20240108-224514_Chrome-scaled.jpg'); background-size:cover; box-shadow:0 0 12px cyan;\"\n     title=\"Become a Host\"><\/a>\n<\/div>\n\n\n\n      <!-- RIGHT (Use) -->\n      <div class=\"face right\" style=\"width:180px; height:180px; background:#000; border:2px solid beige; box-shadow:0 0 15px beige; position:absolute; transform:rotateY(90deg) translateZ(90px); font-family:Orbitron;\">\n        <button onclick=\"showHostButtons('use-week')\" style=\"position:absolute; top:8px; left:27px; width:126px; height:17px; border:1px solid beige; color:white; background:transparent;\">Week<\/button>\n        <button onclick=\"showHostButtons('use-short')\" style=\"position:absolute; bottom:8px; left:27px; width:126px; height:17px; border:1px solid beige; color:white; background:transparent;\">Short Stay<\/button>\n        <button onclick=\"showHostButtons('use-onlinez')\" style=\"position:absolute; top:27px; left:8px; height:126px; width:17px; border:1px solid beige; color:white; writing-mode:vertical-rl; background:transparent;\">Online<\/button>\n        <button onclick=\"showHostButtons('use-penthouse')\" style=\"position:absolute; top:27px; right:8px; height:126px; width:17px; border:1px solid beige; color:white; writing-mode:vertical-lr; background:transparent;\">Penthouse<\/button>\n        <div style=\"position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;\">\n          <div style=\"color:beige; font-size:16px; font-weight:bold;\">Use<\/div>\n          <img decoding=\"async\" src=\"http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/06\/Screenshot_20250612_075245_Gallery.jpg\" style=\"width:65px; height:65px; border-radius:50%; box-shadow:0 0 12px beige;\">\n        <\/div>\n      <\/div>\n\n      <!-- LEFT (Exchange) -->\n      <div class=\"face left\" style=\"width:180px; height:180px; background:#000; border:2px solid #00ccff; box-shadow:0 0 15px #00ccff; position:absolute; transform:rotateY(-90deg) translateZ(90px); font-family:Orbitron;\">\n        <button onclick=\"showHostButtons('exchangez-internally')\" style=\"position:absolute; top:8px; left:27px; width:126px; height:17px; border:1px solid #00ccff; color:white; background:transparent;\">Internally<\/button>\n        <button onclick=\"showHostButtons('exchangez-comm')\" style=\"position:absolute; bottom:8px; left:27px; width:126px; height:17px; border:1px solid #00ccff; color:white; background:transparent;\">Community<\/button>\n        <button onclick=\"showHostButtons('exchangez-year')\" style=\"position:absolute; top:27px; left:8px; height:126px; width:17px; border:1px solid #00ccff; color:white; writing-mode:vertical-rl; background:transparent;\">Year<\/button>\n        <button onclick=\"showHostButtons('exchangez-ownership')\" style=\"position:absolute; top:27px; right:8px; height:126px; width:17px; border:1px solid #00ccff; color:white; writing-mode:vertical-lr; background:transparent;\">Ownership<\/button>\n        <div style=\"position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;\">\n          <div style=\"color:#00ccff; font-size:16px; font-weight:bold;\">Exchange<\/div>\n          <img decoding=\"async\" src=\"http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/06\/Screenshot_20250612_075344_Gallery.jpg\" style=\"width:65px; height:65px; border-radius:50%; box-shadow:0 0 12px #00ccff;\">\n        <\/div>\n      <\/div>\n\n      <!-- TOP (Trade) -->\n      <div class=\"face top\" style=\"width:180px; height:180px; background:#000; border:2px solid green; box-shadow:0 0 15px #33ff33; position:absolute; transform:rotateX(90deg) translateZ(90px); font-family:Orbitron;\">\n        <button onclick=\"showHostButtons('trade-rooms')\" style=\"position:absolute; top:8px; left:27px; width:126px; height:17px; border:1px solid green; color:white; background:transparent;\">Rooms<\/button>\n        <button onclick=\"showHostButtons('trade-dayzz')\" style=\"position:absolute; bottom:8px; left:27px; width:126px; height:17px; border:1px solid green; color:white; background:transparent;\">Day<\/button>\n        <button onclick=\"showHostButtons('trade-wknd')\" style=\"position:absolute; top:27px; left:8px; height:126px; width:17px; border:1px solid green; color:white; writing-mode:vertical-rl; background:transparent;\">Weekend<\/button>\n        <button onclick=\"showHostButtons('trade-wk')\" style=\"position:absolute; top:27px; right:8px; height:126px; width:17px; border:1px solid green; color:white; writing-mode:vertical-lr; background:transparent;\">Week<\/button>\n        <div style=\"position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;\">\n          <div style=\"color:#33ff33; font-size:16px; font-weight:bold;\">Trade<\/div>\n          <img decoding=\"async\" src=\"http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/06\/Screenshot_20250612_075305_Gallery.jpg\" style=\"width:65px; height:65px; border-radius:50%; box-shadow:0 0 12px #33ff33;\">\n        <\/div>\n      <\/div>\n\n      <!-- BOTTOM (Buy) -->\n      <div class=\"face bottom\" style=\"width:180px; height:180px; background:#000; border:2px solid red; box-shadow:0 0 15px red; position:absolute; transform:rotateX(-90deg) translateZ(90px); font-family:Orbitron;\">\n        <button onclick=\"showHostButtons('buyzz-wkz')\" style=\"position:absolute; top:8px; left:27px; width:126px; height:17px; border:1px solid red; color:white; background:transparent;\">Weeks<\/button>\n        <button onclick=\"showHostButtons('buyzz-bc')\" style=\"position:absolute; bottom:8px; left:27px; width:126px; height:17px; border:1px solid red; color:white; background:transparent;\">Bliss Coin<\/button>\n        <button onclick=\"showHostButtons('buyzz-trc')\" style=\"position:absolute; top:27px; left:8px; height:126px; width:17px; border:1px solid red; color:white; writing-mode:vertical-rl; background:transparent;\">Travel Club<\/button>\n        <button onclick=\"showHostButtons('buyzz-cc')\" style=\"position:absolute; top:27px; right:8px; height:126px; width:17px; border:1px solid red; color:white; writing-mode:vertical-lr; background:transparent;\">City Card<\/button>\n        <div style=\"position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;\">\n          <div style=\"color:red; font-size:16px; font-weight:bold;\">Buy<\/div>\n          <img decoding=\"async\" src=\"http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/06\/Screenshot_20250612_075325_Gallery.jpg\" style=\"width:65px; height:65px; border-radius:50%; box-shadow:0 0 12px red;\">\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <!-- MAPA CIRCULAR -->\n  <div id=\"glowMapContainer\" style=\"opacity:1; pointer-events:auto; transition: opacity 0.6s ease; margin: 0 auto; margin-top: -90px; margin-bottom: 40px; width: 320px; height: 320px; border-radius: 50%; overflow: hidden; border: 6px solid rgba(0,255,255,0.6); box-shadow: 0 0 25px cyan; position: relative; z-index: 900;\">\n    <div id=\"googleMap\" style=\"width:100%; height:100%;\"><\/div>\n  <\/div>\n<\/div>\n\n<!-- Google Maps API (clave v\u00e1lida y correcta) -->\n<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyDLPhx98z9AgoqXS6VeoESE9NV6URuOhiE&#038;callback=initMap\" async defer><\/script>\n\n<script>\n  function activateownerCube() {\n    \/\/ Oculta el grid de opciones\n    const rrGrid = document.getElementById(\"rrGrid\");\n    if (rrGrid) {\n      rrGrid.style.display = \"none\";\n    }\n\n    \/\/ Muestra el contenedor del cubo Owners Club\n    const container = document.getElementById(\"ownerContainer\");\n    if (container) {\n      container.style.opacity = \"1\";\n      container.style.pointerEvents = \"auto\";\n    }\n\n    \/\/ Muestra el mapa\n    const map = document.getElementById(\"glowMapContainer\");\n    if (map) {\n      map.style.opacity = \"1\";\n      map.style.pointerEvents = \"auto\";\n    }\n\n    \/\/ Reinicia el mapa si es necesario\n    if (typeof initMap === \"function\") {\n      initMap();\n    }\n  }\n<\/script>\n<script>\n  function initMap() {\n    const location = { lat: 6.25184, lng: -75.56359 }; \/\/ Puedes cambiar esto a tu zona de inter\u00e9s\n\n    const map = new google.maps.Map(document.getElementById(\"googleMap\"), {\n      zoom: 14,\n      center: location,\n      mapTypeId: google.maps.MapTypeId.HYBRID, \/\/ Aqu\u00ed activas el modo hybrid\n    });\n\n    new google.maps.Marker({\n      position: location,\n      map: map,\n      title: \"Ubicaci\u00f3n Principal\",\n    });\n  }\n<\/script>\n\n<!-- POP-UP para Bliss Coin -->\n<div id=\"blissCoinPopup\" style=\"display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:9999; justify-content:center; align-items:center; font-family:Orbitron;\">\n  <div style=\"background:#111; padding:30px 20px; border:2px solid cyan; border-radius:20px; color:white; width:300px; text-align:center; box-shadow:0 0 20px cyan;\">\n    <h3 style=\"font-size:18px;\">\ud83d\udcb3 Pay with Bliss Coin<\/h3>\n    <p style=\"font-size:14px;\">Enter your digital wallet #:<\/p>\n    <input type=\"text\" placeholder=\"Your Wallet #\" style=\"width:90%; padding:8px; border-radius:10px; border:1px solid white; background:#000; color:white; margin-top:8px;\" \/>\n    <p style=\"margin-top:14px;\">Send payment to:<\/p>\n    <div style=\"margin:8px auto; padding:6px; background:#222; border:1px solid cyan; border-radius:8px;\">\n      <code style=\"font-size:13px;\">HOST-WALLET-ADDRESS-123<\/code>\n    <\/div>\n    <button onclick=\"closeBlissCoinPopup()\" style=\"margin-top:12px; padding:6px 16px; border-radius:10px; background:cyan; border:none; color:#000; font-weight:bold; cursor:pointer;\">\n      Close\n    <\/button>\n  <\/div>\n<\/div>\n\n<script>\n  function openBlissCoinPopup() {\n    document.getElementById('blissCoinPopup').style.display = 'flex';\n  }\n  function closeBlissCoinPopup() {\n    document.getElementById('blissCoinPopup').style.display = 'none';\n  }\n<\/script>\n\n\n\n<!-- =========================================================\nGGG BLOCK 3 \u2014 OWNERS CLUB\nFull floating controls + auth + favorites + rose + city card\n========================================================= -->\n\n<style>\n  #floatingButtons {\n    position: fixed;\n    top: 14px;\n    right: 14px;\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    z-index: 3000;\n  }\n\n  #favoritesBtn, #signinBtn {\n    font-size: 15px;\n    padding: 6px 10px;\n    border-radius: 8px;\n    border: 2px solid white;\n    color: white;\n    background: rgba(0, 0, 0, 0.6);\n    cursor: pointer;\n    box-shadow: 0 0 8px cyan;\n    font-family: Orbitron, system-ui, sans-serif;\n  }\n\n  #favoritesBtn:hover::after {\n    content: ' Double click a Host to add or remove \ud83d\udc98';\n    font-size: 10px;\n    margin-left: 8px;\n    color: cyan;\n  }\n\n  #signinBtn:hover::after {\n    content: ' Sign in to save your Favorites';\n    font-size: 10px;\n    margin-left: 8px;\n    color: cyan;\n  }\n\n  #cityCardBtn {\n    width: 39px;\n    height: 39px;\n    border-radius: 50%;\n    border: 2px solid #ffffffaa;\n    background: rgba(0,0,0,0.65);\n    color: #fff;\n    font-size: 11px;\n    font-family: 'Orbitron', system-ui, sans-serif;\n    letter-spacing: 1px;\n    cursor: pointer;\n    box-shadow: 0 0 10px cyan;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transition: 0.25s ease;\n    overflow: hidden;\n  }\n\n  #cityCardBtn:hover {\n    box-shadow: 0 0 16px cyan;\n    transform: translateY(-1px);\n  }\n\n  #pyramidBtn {\n    width: 38px;\n    height: 38px;\n    background-color: black;\n    border: 2px solid white;\n    border-radius: 50%;\n    box-shadow: 0 0 10px cyan;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 20px;\n    cursor: pointer;\n    margin-top: 2px;\n  }\n\n  #pyramidBtn:hover {\n    transform: scale(1.2);\n  }\n\n  #roseBtn {\n    width: 38px;\n    height: 38px;\n    background-color: black;\n    background-image: url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/07\/ChatGPT-Image-Jul-7-2025-05_11_38-PM.png');\n    background-size: cover;\n    background-position: center;\n    border: 2px solid white;\n    border-radius: 50%;\n    box-shadow: 0 0 10px white;\n    cursor: pointer;\n    margin-top: 2px;\n  }\n\n  #roseBtn:hover {\n    transform: scale(1.2);\n  }\n\n  \/* FAVORITES PANEL *\/\n  #favoritesPanel {\n    position: fixed;\n    top: 64px;\n    right: 14px;\n    width: min(92vw, 340px);\n    max-height: 68vh;\n    overflow-y: auto;\n    display: none;\n    z-index: 3200;\n    border-radius: 18px;\n    padding: 12px;\n    background: linear-gradient(180deg, rgba(8,12,24,.96), rgba(4,7,18,.98));\n    border: 1px solid rgba(255,255,255,.12);\n    box-shadow:\n      0 0 20px rgba(0,255,255,.18),\n      0 0 60px rgba(0,0,0,.45);\n    color: #fff;\n    font-family: Orbitron, system-ui, sans-serif;\n  }\n\n  #favoritesPanel.show {\n    display: block;\n  }\n\n  .favorites-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 10px;\n    margin-bottom: 10px;\n  }\n\n  .favorites-title {\n    font-size: 12px;\n    letter-spacing: .14em;\n    text-transform: uppercase;\n    color: rgba(255,255,255,.85);\n  }\n\n  .favorites-close {\n    border: 1px solid rgba(255,255,255,.16);\n    background: rgba(255,255,255,.06);\n    color: #fff;\n    border-radius: 999px;\n    padding: 6px 10px;\n    cursor: pointer;\n    font-size: 11px;\n    text-transform: uppercase;\n    font-family: inherit;\n  }\n\n  .favorites-actions {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 12px;\n    flex-wrap: wrap;\n  }\n\n  .favorites-action-btn {\n    border: 1px solid rgba(0,255,255,.35);\n    background: rgba(0,255,255,.08);\n    color: #fff;\n    border-radius: 999px;\n    padding: 8px 10px;\n    cursor: pointer;\n    font-size: 11px;\n    text-transform: uppercase;\n    font-family: inherit;\n  }\n\n  .favorites-empty {\n    font-size: 12px;\n    color: rgba(255,255,255,.72);\n    line-height: 1.6;\n  }\n\n  .favorite-card {\n    display: grid;\n    grid-template-columns: 58px 1fr;\n    gap: 10px;\n    align-items: center;\n    padding: 10px;\n    border-radius: 14px;\n    margin-bottom: 10px;\n    background: rgba(255,255,255,.04);\n    border: 1px solid rgba(255,255,255,.08);\n  }\n\n  .favorite-thumb {\n    width: 58px;\n    height: 58px;\n    border-radius: 50%;\n    background-size: cover;\n    background-position: center;\n    border: 2px solid rgba(255,255,255,.8);\n    box-shadow: 0 0 12px cyan;\n  }\n\n  .favorite-info {\n    min-width: 0;\n  }\n\n  .favorite-name {\n    font-size: 11px;\n    line-height: 1.35;\n    word-break: break-word;\n    color: #fff;\n  }\n\n  .favorite-meta {\n    margin-top: 4px;\n    font-size: 10px;\n    color: rgba(255,255,255,.64);\n    text-transform: uppercase;\n    letter-spacing: .08em;\n  }\n\n  .favorite-row {\n    display: flex;\n    gap: 8px;\n    margin-top: 8px;\n    flex-wrap: wrap;\n  }\n\n  .favorite-btn {\n    border: 1px solid rgba(255,255,255,.14);\n    background: rgba(255,255,255,.06);\n    color: #fff;\n    border-radius: 999px;\n    padding: 6px 9px;\n    cursor: pointer;\n    font-size: 10px;\n    font-family: inherit;\n    text-transform: uppercase;\n  }\n<\/style>\n\n<div id=\"floatingButtons\">\n  <button id=\"cityCardBtn\" class=\"ggg-icon-btn\" title=\"City Card\">\n    <img decoding=\"async\" src=\"http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240911_204007_Gallery.jpg\" style=\"width:170%; height:100%; border-radius:50%;\">\n  <\/button>\n\n  <button\n    id=\"pyramidBtn\"\n    title=\"Back to MedaYork Pyramid\"\n    onclick=\"window.location.href='https:\/\/godsgalaxygame.com\/GGG\/medayork-pyramid-2\/';\">\n    \ud83e\uddca\n  <\/button>\n\n  <button id=\"roseBtn\" title=\"Rose of the Universe\"><\/button>\n\n  <button id=\"favoritesBtn\">\ud83d\udc96<\/button>\n  <button id=\"signinBtn\">Sign In \/ Sign Up<\/button>\n<\/div>\n\n<div id=\"favoritesPanel\">\n  <div class=\"favorites-header\">\n    <div class=\"favorites-title\">My Favorites<\/div>\n    <button class=\"favorites-close\" type=\"button\" onclick=\"gggCloseFavoritesPanel()\">Close<\/button>\n  <\/div>\n\n  <div class=\"favorites-actions\">\n    <button class=\"favorites-action-btn\" type=\"button\" onclick=\"gggShowCurrentPageFavorites()\">Show on Page<\/button>\n    <button class=\"favorites-action-btn\" type=\"button\" onclick=\"gggClearFavoritesWithConfirm()\">Clear All<\/button>\n  <\/div>\n\n  <div id=\"favoritesPanelContent\" class=\"favorites-empty\">No favorites saved yet.<\/div>\n<\/div>\n\n<script>\n  \/* ========================================================\n     PAGE SETTINGS\n  ======================================================== *\/\n  const PAGE_KEY = \"ownersclub\";\n  const CUBE_ID = \"ownerCube\";\n  const AJAX_URL = \"\/GGG\/wp-admin\/admin-ajax.php\";\n  const ACCOUNT_URL = \"https:\/\/godsgalaxygame.com\/account\/\";\n  const LOGIN_URL = \"https:\/\/godsgalaxygame.com\/login\/\";\n  const PYRAMID_URL = \"https:\/\/godsgalaxygame.com\/GGG\/medayork-pyramid-2\/\";\n  const CITY_CARD_URL = \"https:\/\/godsgalaxygame.com\/GGG\/aries\/?citycard=1\";\n\n  \/* ========================================================\n     CUBE MOVEMENT\n  ======================================================== *\/\n  let isDragging = false, startX, startY, rotateX = 0, rotateY = 0;\n\n  const cube = document.getElementById(CUBE_ID);\n  const cubeContainer = document.querySelector('.cube-scene');\n\n  function updateRotation(x, y) {\n    if (!cube) return;\n    cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg)`;\n  }\n\n  function onMouseDown(e) {\n    isDragging = true;\n    startX = e.clientX;\n    startY = e.clientY;\n  }\n\n  function onMouseMove(e) {\n    if (!isDragging) return;\n    const deltaX = e.clientX - startX;\n    const deltaY = e.clientY - startY;\n    rotateY += deltaX * 0.5;\n    rotateX -= deltaY * 0.5;\n    updateRotation(rotateX, rotateY);\n    startX = e.clientX;\n    startY = e.clientY;\n  }\n\n  function onMouseUp() {\n    isDragging = false;\n  }\n\n  function onTouchStart(e) {\n    isDragging = true;\n    startX = e.touches[0].clientX;\n    startY = e.touches[0].clientY;\n  }\n\n  function onTouchMove(e) {\n    if (!isDragging) return;\n    const deltaX = e.touches[0].clientX - startX;\n    const deltaY = e.touches[0].clientY - startY;\n    rotateY += deltaX * 0.5;\n    rotateX -= deltaY * 0.5;\n    updateRotation(rotateX, rotateY);\n    startX = e.touches[0].clientX;\n    startY = e.touches[0].clientY;\n  }\n\n  function onTouchEnd() {\n    isDragging = false;\n  }\n\n  if (cubeContainer && cube) {\n    cubeContainer.addEventListener('mousedown', onMouseDown);\n    window.addEventListener('mousemove', onMouseMove);\n    window.addEventListener('mouseup', onMouseUp);\n    cubeContainer.addEventListener('touchstart', onTouchStart, { passive: true });\n    window.addEventListener('touchmove', onTouchMove, { passive: true });\n    window.addEventListener('touchend', onTouchEnd);\n  }\n\n  \/* ========================================================\n     USER STATUS\n  ======================================================== *\/\n  let gggUserStatus = {\n    logged_in: false,\n    user_id: 0,\n    display_name: \"\",\n    email: \"\",\n    account_url: ACCOUNT_URL,\n    login_url: LOGIN_URL\n  };\n\n  function gggUpdateSignInButton() {\n    const btn = document.getElementById(\"signinBtn\");\n    if (!btn) return;\n\n    if (gggUserStatus.logged_in) {\n      btn.textContent = \"My Account\";\n      btn.onclick = function () {\n        window.location.href = gggUserStatus.account_url || ACCOUNT_URL;\n      };\n    } else {\n      btn.textContent = \"Sign In \/ Sign Up\";\n      btn.onclick = function () {\n        window.location.href = gggUserStatus.login_url || LOGIN_URL;\n      };\n    }\n  }\n\n  function gggLoadUserStatus() {\n    const formData = new FormData();\n    formData.append(\"action\", \"ggg_get_current_user_status\");\n\n    return fetch(AJAX_URL, {\n      method: \"POST\",\n      credentials: \"same-origin\",\n      body: formData\n    })\n    .then(r => r.json())\n    .then(data => {\n      if (data && data.success && data.data) {\n        gggUserStatus = data.data;\n      }\n      gggUpdateSignInButton();\n    })\n    .catch(() => {\n      gggUpdateSignInButton();\n    });\n  }\n\n  \/* ========================================================\n     FAVORITES\n  ======================================================== *\/\n  let favorites = [];\n\n  function gggUpdateFavoritesButton() {\n    const btn = document.getElementById(\"favoritesBtn\");\n    if (!btn) return;\n    btn.textContent = favorites.length > 0 ? \"\ud83d\udc98\" : \"\ud83d\udc96\";\n  }\n\n  function gggLoadFavorites() {\n    const formData = new FormData();\n    formData.append(\"action\", \"ggg_get_favorites\");\n\n    return fetch(AJAX_URL, {\n      method: \"POST\",\n      credentials: \"same-origin\",\n      body: formData\n    })\n    .then(r => r.json())\n    .then(data => {\n      if (data && data.success && data.data) {\n        favorites = Array.isArray(data.data.favorites) ? data.data.favorites : [];\n      } else {\n        favorites = [];\n      }\n      gggUpdateFavoritesButton();\n      gggRenderFavoritesPanel();\n    })\n    .catch(() => {\n      favorites = [];\n      gggUpdateFavoritesButton();\n      gggRenderFavoritesPanel();\n    });\n  }\n\n  function gggRenderFavoritesPanel() {\n    const panelContent = document.getElementById(\"favoritesPanelContent\");\n    if (!panelContent) return;\n\n    if (!favorites.length) {\n      panelContent.innerHTML = `<div class=\"favorites-empty\">No favorites saved yet.<\/div>`;\n      return;\n    }\n\n    panelContent.innerHTML = favorites.map(fav => {\n      const title = fav.id ? String(fav.id).replace(\/-\/g, ' ') : 'Favorite';\n      const pageLabel = fav.pageKey ? String(fav.pageKey).toUpperCase() : 'PAGE';\n\n      return `\n        <div class=\"favorite-card\">\n          <div class=\"favorite-thumb\" style=\"background-image:url('${fav.imgUrl || ''}')\"><\/div>\n          <div class=\"favorite-info\">\n            <div class=\"favorite-name\">${title}<\/div>\n            <div class=\"favorite-meta\">${pageLabel}<\/div>\n            <div class=\"favorite-row\">\n              ${fav.pageKey === PAGE_KEY ? `<button class=\"favorite-btn\" type=\"button\" onclick=\"gggFocusFavoriteOnPage('${fav.id}')\">Show<\/button>` : ``}\n              ${(fav.lat && fav.lng) ? `<button class=\"favorite-btn\" type=\"button\" onclick=\"focusOnHost(${parseFloat(fav.lat)}, ${parseFloat(fav.lng)})\">Map<\/button>` : ``}\n              <button class=\"favorite-btn\" type=\"button\" onclick=\"gggRemoveFavoriteById('${fav.id}')\">Remove<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n    }).join('');\n  }\n\n  function gggOpenFavoritesPanel() {\n    const panel = document.getElementById(\"favoritesPanel\");\n    if (!panel) return;\n    panel.classList.add(\"show\");\n  }\n\n  function gggCloseFavoritesPanel() {\n    const panel = document.getElementById(\"favoritesPanel\");\n    if (!panel) return;\n    panel.classList.remove(\"show\");\n  }\n\n  function gggShowCurrentPageFavorites() {\n    const currentPageFavorites = favorites.filter(f => f.pageKey === PAGE_KEY);\n    if (!currentPageFavorites.length) return;\n\n    document.querySelectorAll('.host-circle').forEach(btn => btn.style.display = 'none');\n\n    currentPageFavorites.forEach(fav => {\n      const matches = document.querySelectorAll(`.${fav.id}`);\n      matches.forEach(el => el.style.display = 'inline-block');\n    });\n\n    gggCloseFavoritesPanel();\n  }\n\n  function gggFocusFavoriteOnPage(id) {\n    document.querySelectorAll('.host-circle').forEach(btn => btn.style.display = 'none');\n    const matches = document.querySelectorAll(`.${id}`);\n    matches.forEach(el => el.style.display = 'inline-block');\n    gggCloseFavoritesPanel();\n  }\n\n  function toggleFavorite(id, imgUrl, mapLat, mapLng) {\n    if (!gggUserStatus.logged_in) {\n      alert(\"Please sign in first to save favorites.\");\n      window.location.href = gggUserStatus.login_url || LOGIN_URL;\n      return;\n    }\n\n    const alreadySaved = favorites.some(f => f.id === id);\n\n    if (alreadySaved) {\n      return gggRemoveFavoriteById(id);\n    }\n\n    const formData = new FormData();\n    formData.append(\"action\", \"ggg_add_favorite\");\n    formData.append(\"id\", id);\n    formData.append(\"imgUrl\", imgUrl || \"\");\n    formData.append(\"mapLat\", mapLat || \"\");\n    formData.append(\"mapLng\", mapLng || \"\");\n    formData.append(\"pageKey\", PAGE_KEY);\n\n    fetch(AJAX_URL, {\n      method: \"POST\",\n      credentials: \"same-origin\",\n      body: formData\n    })\n    .then(r => r.json())\n    .then(data => {\n      if (data && data.success && data.data) {\n        favorites = Array.isArray(data.data.favorites) ? data.data.favorites : [];\n        gggUpdateFavoritesButton();\n        gggRenderFavoritesPanel();\n        console.log(\"Favorite added:\", id);\n      }\n    });\n  }\n\n  function gggRemoveFavoriteById(id) {\n    if (!gggUserStatus.logged_in) return;\n\n    const formData = new FormData();\n    formData.append(\"action\", \"ggg_remove_favorite\");\n    formData.append(\"id\", id);\n\n    fetch(AJAX_URL, {\n      method: \"POST\",\n      credentials: \"same-origin\",\n      body: formData\n    })\n    .then(r => r.json())\n    .then(data => {\n      if (data && data.success && data.data) {\n        favorites = Array.isArray(data.data.favorites) ? data.data.favorites : [];\n        gggUpdateFavoritesButton();\n        gggRenderFavoritesPanel();\n        console.log(\"Favorite removed:\", id);\n      }\n    });\n  }\n\n  function clearFavorites() {\n    if (!gggUserStatus.logged_in) return;\n\n    const formData = new FormData();\n    formData.append(\"action\", \"ggg_clear_favorites\");\n\n    fetch(AJAX_URL, {\n      method: \"POST\",\n      credentials: \"same-origin\",\n      body: formData\n    })\n    .then(r => r.json())\n    .then(data => {\n      if (data && data.success && data.data) {\n        favorites = Array.isArray(data.data.favorites) ? data.data.favorites : [];\n        gggUpdateFavoritesButton();\n        gggRenderFavoritesPanel();\n      }\n    });\n  }\n\n  function gggClearFavoritesWithConfirm() {\n    if (!favorites.length) return;\n    const ok = confirm(\"Clear all saved favorites?\");\n    if (!ok) return;\n    clearFavorites();\n  }\n\n  \/* ========================================================\n     MAP FOCUS\n  ======================================================== *\/\n  function focusOnHost(lat, lng) {\n    if (window.ggMap) {\n      window.ggMap.setCenter({ lat, lng });\n      window.ggMap.setZoom(15);\n      new google.maps.Marker({ position: { lat, lng }, map: window.ggMap });\n    }\n  }\n\n  \/* ========================================================\n     EXTRA BUTTONS\n  ======================================================== *\/\n  document.getElementById(\"favoritesBtn\").addEventListener(\"click\", () => {\n    gggOpenFavoritesPanel();\n  });\n\n  document.getElementById(\"cityCardBtn\").addEventListener(\"click\", () => {\n    window.location.href = CITY_CARD_URL;\n  });\n\n  document.getElementById(\"roseBtn\").addEventListener(\"click\", () => {\n    alert(\"Rose of the Universe portfolio area coming next.\");\n  });\n\n  \/* ========================================================\n     INIT\n  ======================================================== *\/\n  document.addEventListener(\"DOMContentLoaded\", function () {\n    Promise.all([\n      gggLoadUserStatus(),\n      gggLoadFavorites()\n    ]).then(() => {\n      gggUpdateSignInButton();\n      gggUpdateFavoritesButton();\n      gggRenderFavoritesPanel();\n    });\n  });\n<\/script>\n\n\n\n<!-- HOST CIRCLES \u2014 CSS (Accommodations) -->\n<style>\n  #hostButtons{\n    display:none;                 \/* hidden until a sub-option is clicked *\/\n    position:absolute;\n    top:50%; left:50%;\n    transform:translate(-50%,-50%);\n    width:100%; max-width:500px; height:500px;\n    pointer-events:none;          \/* turned ON in JS when shown *\/\n    z-index:3000;\n  }\n\n  \/* buttons *\/\n  #hostButtons .host-circle{\n    width:80px; height:80px; border-radius:50%;\n    border:2px solid #fff; box-shadow:0 0 14px #fff;\n    background-size:cover; background-position:center;\n    position:absolute; pointer-events:auto; cursor:pointer;\n    transition:transform .3s, box-shadow .3s;\n  }\n  #hostButtons .host-circle:hover{ transform:scale(1.15); box-shadow:0 0 20px cyan; }\n\n  \/* desktop placement (around the circle) *\/\n  #hostButtons .one    { top:4%;    left:10%; }\n  #hostButtons .five   { top:4%;    right:10%; }\n  #hostButtons .seven  { bottom:8%; left:10%; }\n  #hostButtons .month  { bottom:8%; right:10%; }\n\n  \/* color accents per family (match cube face glows) *\/\n  #hostButtons .highrise { border-color:beige;   box-shadow:0 0 14px beige; }\n  #hostButtons .historic { border-color:#00ccff; box-shadow:0 0 14px #00ccff; }\n  #hostButtons .ecostay  { border-color:#33ff33; box-shadow:0 0 14px #33ff33; }\n  #hostButtons .mansions { border-color:red;     box-shadow:0 0 14px red; }\n\n  \/* phone: turn into one row under the map *\/\n  @media (max-width:768px){\n    #hostButtons{\n      position:relative; top:auto; left:auto; transform:none;\n      height:auto; margin-top:-35px;\n      display:none;               \/* still hidden by default *\/\n      flex-wrap:nowrap; justify-content:center; gap:10px;\n    }\n    #hostButtons .host-circle{ position:relative; width:75px; height:75px; margin:0 6px; }\n  }\n\n<\/style>\n\n<!-- HOST CIRCLES \u2014 HTML (Accommodations: High-Rise\n \/ Historic \/ Eco-Stay \/ Mansions) -->\n<div id=\"hostButtons\">\n  <!-- HIGH-RISE (beige) -->\n  <button class=\"host-circle use use-week one\"\n    data-lat=\"6.241568778606768\" data-lng=\"-75.22695655776336\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240821_175227_Instagram.jpg');\"\n    title=\"High-Rise \u2022 1\u20133 Days\"><\/button>\n\n  <button class=\"host-circle use use-short five\"\n    data-lat=\"6.241568778606768\" data-lng=\"-75.22695655776336\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"High-Rise \u2022 4\u20136 Days\"><\/button>\n\n  <button class=\"host-circle use use-onlinez seven\"\n    data-lat=\"6.24267\" data-lng=\"-75.22668\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"High-Rise \u2022 7 Days\"><\/button>\n\n  <button class=\"host-circle use use-penthouse month\"\n    data-lat=\"6.24267\" data-lng=\"-75.22668\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"High-Rise \u2022 1 Month\"><\/button>\n\n  <!-- HISTORIC (cyan) -->\n  <button class=\"host-circle exchangez exchangez-internally one\"\n    data-lat=\"6.23796\" data-lng=\"-75.21421\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"Historic \u2022 1\u20133 Days\"><\/button>\n\n  <button class=\"host-circle exchangez exchangez-comm five\"\n    data-lat=\"6.23796\" data-lng=\"-75.21421\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"Historic \u2022 4\u20136 Days\"><\/button>\n\n  <button class=\"host-circle exchangez exchangez-year seven\"\n    data-lat=\"6.24006\" data-lng=\"-75.18750\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"Historic \u2022 7 Days\"><\/button>\n\n  <button class=\"host-circle exchangez exchangez-ownership month\"\n    data-lat=\"6.22670\" data-lng=\"-75.18056\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"Historic \u2022 1 Month\"><\/button>\n\n  <!-- ECO-STAY (green) -->\n  <button class=\"host-circle trade trade-rooms one\"\n    data-lat=\"6.241568778606768\" data-lng=\"-75.22695655776336\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"Eco-Stay \u2022 1\u20133 Days\"><\/button>\n\n  <button class=\"host-circle trade trade-dayzz five\"\n    data-lat=\"6.241568778606768\" data-lng=\"-75.22695655776336\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"Eco-Stay \u2022 4\u20136 Days\"><\/button>\n\n  <button class=\"host-circle trade trade-wknd seven\"\n    data-lat=\"6.22879\" data-lng=\"-75.21184\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"Eco-Stay \u2022 7 Days\"><\/button>\n\n  <button class=\"host-circle trade trade-wk month\"\n    data-lat=\"6.22879\" data-lng=\"-75.21184\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"Eco-Stay \u2022 1 Month\"><\/button>\n\n  <!-- MANSIONS (red) -->\n  <button class=\"host-circle buyzz buyzz-wkz one\"\n    data-lat=\"6.24203\" data-lng=\"-75.22696\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"Mansions \u2022 1\u20133 Days\"><\/button>\n\n  <button class=\"host-circle buyzz buyzz-bc five\"\n    data-lat=\"6.24203\" data-lng=\"-75.22696\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061057_PowerPoint-1.jpg');\"\n    title=\"Mansions \u2022 4\u20136 Days\"><\/button>\n\n  <button class=\"host-circle buyzz buyzz-trc seven\"\n    data-lat=\"6.24203\" data-lng=\"-75.22696\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\n    title=\"Mansions \u2022 7 Days\"><\/button>\n\n  <button class=\"host-circle buyzz buyzz-cc month\"\n    data-lat=\"6.24203\" data-lng=\"-75.22696\"\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240821_175227_Instagram.jpg');\"\n    title=\"Mansions \u2022 1 Month\"><\/button>\n<\/div>\n\n<!-- HOST CIRCLES \u2014 JS (Accommodations) -->\n<script>\n  \/* Show only the requested key, e.g., 'highrise-one' *\/\n  function showHostButtons(suboption){\n  loadLevel8Hosts(suboption);\n}\n\n  \/\/ dbl-tap \/ dbl-click to favorite (uses your existing toggleFavorite)\n  document.addEventListener('DOMContentLoaded', () => {\n    document.querySelectorAll('#hostButtons .host-circle').forEach(btn => {\n      btn.addEventListener('dblclick', (e) => {\n        e.preventDefault();\n\n        \/\/ \u2705 Get the specific key like \"heli-around\" \/ \"yacht-goto\"\n        const id = [...btn.classList].find(c =>\n          c.includes('-') &&\n          !['host-circle','around','goto','emergency','adventure'].includes(c)\n        );\n\n        if (!id) {\n          console.warn(\"No favorite id found for button:\", btn.className);\n          return;\n        }\n\n        \/\/ background-image: url(\"...\") or url('...')\n        const bg = btn.style.backgroundImage || '';\n        const img = bg.startsWith('url(')\n          ? bg.slice(4, -1).replace(\/^[\"']|[\"']$\/g, '')\n          : '';\n\n        const lat = parseFloat(btn.dataset.lat);\n        const lng = parseFloat(btn.dataset.lng);\n\n        if (typeof toggleFavorite === 'function') {\n          toggleFavorite(id, img, lat, lng);\n        } else {\n          console.warn(\"toggleFavorite() is not defined yet.\");\n        }\n      });\n    });\n  });\n\n\n\n  \/* Center the map when any host circle is clicked *\/\n  document.addEventListener('click', function (e) {\n    const btn = e.target.closest('#hostButtons .host-circle');\n    if (!btn) return;\n\n    const lat = parseFloat(btn.dataset.lat);\n    const lng = parseFloat(btn.dataset.lng);\n    if (!Number.isFinite(lat) || !Number.isFinite(lng)) return;\n\n    if (typeof window.focusOnHost === 'function') {\n      focusOnHost(lat, lng);\n      return;\n    }\n\n    if (window.ggMap && window.google) {\n      const pos = new google.maps.LatLng(lat, lng);\n      ggMap.setCenter(pos);\n      ggMap.setZoom(15);\n      new google.maps.Marker({ position: pos, map: ggMap });\n    }\n  });\n<\/script>\n<script>\nasync function loadLevel8Hosts(suboption){\n\n  const fd = new FormData();\n  fd.append(\"action\", \"ggg_l8_get_inventory\");\n\n  const res = await fetch(\"\/GGG\/wp-admin\/admin-ajax.php\", {\n    method: \"POST\",\n    credentials: \"same-origin\",\n    body: fd\n  });\n\n  const data = await res.json();\n  if(!data.success) return;\n\n  const items = data.data.items || [];\n\n  const filtered = items.filter(item =>\n    item.suboptionKey === suboption &&\n    item.status === \"active\"\n  );\n\n  const wrap = document.getElementById(\"hostButtons\");\n  if(!wrap) return;\n\n  wrap.innerHTML = \"\";\n\n  if(!filtered.length){\n    wrap.style.display = \"none\";\n    return;\n  }\n\n  const positions = [\"one\",\"five\",\"seven\",\"month\"];\n\n  filtered.forEach((item, index) => {\n    const btn = document.createElement(\"button\");\n    btn.className = \"host-circle \" + positions[index % 4];\n    btn.style.backgroundImage = `url('${item.imageUrl || \"\"}')`;\n    btn.dataset.lat = item.lat || \"\";\n    btn.dataset.lng = item.lng || \"\";\n    btn.title = item.name || \"Level 8 Item\";\n\n    btn.addEventListener(\"dblclick\", function(e){\n      e.preventDefault();\n      if(typeof toggleFavorite === \"function\"){\n        toggleFavorite(item.id, item.imageUrl, item.lat, item.lng);\n      }\n    });\n\n    wrap.appendChild(btn);\n  });\n\n  wrap.style.display = \"flex\";\n  wrap.style.pointerEvents = \"auto\";\n}\n<\/script>\n\n\n\n<!-- ==========================================================\nLEVEL 8 \u2013 POPUP PANEL ENGINE (FULL + FIXED v3)\n\u2705 Hero image ALWAYS fits inside the box (mobile + desktop)\n\u2705 Removed conflicting hero CSS rules\n\u2705 Fixed invalid CSS: height:100slice -> height:100%\n\u2705 Full image visible: object-fit:contain\n\u2705 Keeps blurred backdrop behind hero image\n\u2705 Keeps your place row, gallery, thumbs, chat, avatar, and hook\n========================================================== -->\n\n<style>\n  \/* ===== Overlay ===== *\/\n  #l8PopupOverlay{\n    position:fixed; inset:0;\n    display:none;\n    align-items:center;\n    justify-content:center;\n    z-index:999999;\n    background:\n      radial-gradient(circle at 12% 0%, rgba(0,255,255,0.18), transparent 55%),\n      radial-gradient(circle at 88% 100%, rgba(255,215,0,0.14), transparent 60%),\n      rgba(0,0,0,0.92);\n    opacity:0;\n    transform:scale(1.02);\n    transition:opacity .28s ease, transform .28s ease;\n    font-family: Orbitron, system-ui, sans-serif !important;\n    color:#fff;\n  }\n  #l8PopupOverlay.open{ opacity:1; transform:scale(1); }\n\n  .l8Popup{\n    width:min(1100px, 94vw);\n    max-height:min(92vh, 920px);\n    overflow:auto;\n    border-radius:22px;\n    border:1px solid rgba(255,255,255,0.20);\n    background:\n      radial-gradient(circle at 18% 0%, rgba(0,255,255,0.14), transparent 55%),\n      radial-gradient(circle at 90% 100%, rgba(255,215,0,0.10), transparent 60%),\n      linear-gradient(135deg, rgba(6,10,30,0.96), rgba(20,0,45,0.98));\n    box-shadow:0 0 26px rgba(0,255,255,0.55), 0 0 90px rgba(0,0,0,1);\n    padding:14px 14px 16px;\n    position:relative;\n  }\n\n  .l8Top{ display:flex; align-items:flex-start; gap:10px; }\n  .l8Title{ text-transform:uppercase; letter-spacing:.22em; font-size:11px; opacity:.85; }\n  .l8Main{ margin-top:4px; text-transform:uppercase; letter-spacing:.28em; font-size:15px; font-weight:800; }\n  .l8Badge{\n    margin-left:auto;\n    font-size:10px;\n    padding:6px 10px;\n    border-radius:999px;\n    border:1px solid rgba(0,255,255,0.85);\n    background:rgba(0,0,0,0.55);\n    box-shadow:0 0 12px rgba(0,255,255,0.35);\n    text-transform:uppercase;\n    letter-spacing:.18em;\n    white-space:nowrap;\n  }\n  .l8Close{\n    position:absolute; top:10px; right:12px;\n    border:none; background:transparent; color:#fff;\n    font-size:20px; cursor:pointer;\n    text-shadow:0 0 10px rgba(0,255,255,0.8);\n  }\n\n  .l8Body{\n    margin-top:12px;\n    display:grid;\n    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);\n    gap:12px;\n  }\n  @media (max-width: 100px){ .l8Body{ grid-template-columns:1fr; } }\n\n  .l8Card{\n    border:1px solid rgba(255,255,255,0.18);\n    background:rgba(0,0,0,0.55);\n    border-radius:18px;\n    padding:12px;\n    box-shadow: inset 0 0 16px rgba(0,255,255,0.12);\n  }\n  .l8CardTitle{\n    font-size:10px;\n    text-transform:uppercase;\n    letter-spacing:.18em;\n    opacity:.85;\n    margin-bottom:8px;\n  }\n\n  .l8Row{ display:flex; gap:8px; flex-wrap:wrap; }\n  .l8Btn{\n    flex:1 1 150px;\n    border:1px solid rgba(0,255,255,0.9);\n    background:radial-gradient(circle at top, rgba(0,255,255,0.20), rgba(0,0,0,0.88));\n    color:#fff;\n    border-radius:999px;\n    padding:10px 12px;\n    cursor:pointer;\n    text-transform:uppercase;\n    letter-spacing:.16em;\n    font-size:11px;\n    box-shadow:0 0 12px rgba(0,255,255,0.25);\n  }\n  .l8Btn.secondary{\n    border-color: rgba(255,255,255,0.25);\n    box-shadow:0 0 12px rgba(255,255,255,0.12);\n    background:rgba(0,0,0,0.70);\n  }\n\n  .l8Field{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }\n  .l8Label{ font-size:9px; text-transform:uppercase; letter-spacing:.18em; opacity:.75; }\n  .l8Input, .l8Text{\n    border:1px solid rgba(255,255,255,0.16);\n    background:rgba(255,255,255,0.06);\n    color:#fff;\n    border-radius:14px;\n    padding:10px 10px;\n    outline:none;\n    font-family: Orbitron, system-ui, sans-serif;\n    letter-spacing:.06em;\n    font-size:12px;\n  }\n  .l8Text{ min-height:90px; resize:vertical; }\n\n  .l8Log{\n    margin-top:10px;\n    border-top:1px solid rgba(255,255,255,0.12);\n    padding-top:10px;\n    display:flex;\n    flex-direction:column;\n    gap:8px;\n    max-height:240px;\n    overflow:auto;\n  }\n  .l8Msg{\n    border:1px solid rgba(255,255,255,0.14);\n    background:rgba(0,0,0,0.45);\n    border-radius:14px;\n    padding:10px;\n    font-size:11px;\n    line-height:1.45;\n  }\n  .l8Msg.me{ border-color: rgba(0,255,255,0.25); }\n\n  \/* ===== Place row ===== *\/\n  .l8PlaceRow{\n    display:flex;\n    gap:10px;\n    overflow:auto;\n    padding:6px 2px 10px;\n    margin-bottom:8px;\n    -webkit-overflow-scrolling: touch;\n  }\n  .l8PlaceBtn{\n    flex:0 0 auto;\n    display:flex;\n    align-items:center;\n    gap:10px;\n    padding:8px 10px;\n    border-radius:16px;\n    border:1px solid rgba(255,255,255,0.16);\n    background:rgba(0,0,0,0.42);\n    cursor:pointer;\n    color:#fff;\n    min-width:200px;\n    box-shadow: inset 0 0 16px rgba(0,255,255,0.08);\n  }\n  .l8PlaceBtn:hover{\n    border-color: rgba(0,255,255,0.55);\n    box-shadow: 0 0 18px rgba(0,255,255,0.14);\n  }\n  .l8PlaceBtn.active{\n    border-color: rgba(0,255,255,0.85);\n    box-shadow: 0 0 22px rgba(0,255,255,0.22);\n  }\n  .l8PlaceThumb{\n    width:52px; height:52px;\n    border-radius:14px;\n    overflow:hidden;\n    border:1px solid rgba(255,255,255,0.14);\n    background:rgba(255,255,255,0.06);\n    flex:0 0 auto;\n  }\n  .l8PlaceThumb img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    display:block;\n  }\n  .l8PlaceMeta{ min-width:0; }\n  .l8PlaceName{\n    font-size:11px;\n    text-transform:uppercase;\n    letter-spacing:.16em;\n    white-space:nowrap;\n    overflow:hidden;\n    text-overflow:ellipsis;\n  }\n  .l8PlaceNote{ font-size:10px; opacity:.72; margin-top:4px; }\n\n  \/* ===== Showcase ===== *\/\n  .l8Showcase{ display:grid; grid-template-columns:1fr; gap:10px; }\n\n  \/* HERO: One clean rule, no conflicts *\/\n  .l8Hero{\n    position:relative;\n    border-radius:18px;\n    overflow:hidden;\n    border:1px solid rgba(255,255,255,0.18);\n    background:rgba(0,0,0,0.75);\n    box-shadow:0 0 22px rgba(0,255,255,0.12);\n    width:100%;\n    height:420px;            \/* desktop *\/\n    max-height:420px;\n  }\n  @media (max-width: 768px){\n    .l8Hero{\n      height:260px !important;      \/* lock mobile height *\/\n      max-height:260px !important;\n      min-height:260px !important;\n    }\n  }\n\n  \/* blurred fill behind *\/\n  .l8Hero::before{\n    content:\"\";\n    position:absolute;\n    inset:-18px;\n    background-image: var(--hero-bg);\n    background-size: cover;\n    background-position: center;\n    filter: blur(18px) saturate(1.2);\n    opacity: .35;\n    transform: scale(1.15);\n  }\n\n  \/* IMPORTANT: base rule for hero image (this is what you were missing) *\/\n  .l8HeroImg{\n    position:relative;\n    z-index:1;\n    width:100%;\n    height:100%;\n    object-fit:contain;      \/* FULL image visible *\/\n    object-position:center;\n    display:block;\n    background:transparent;\n  }\n\n  .l8NavBtn{\n    position:absolute; top:50%;\n    transform:translateY(-50%);\n    width:40px; height:40px;\n    border-radius:999px;\n    border:1px solid rgba(255,255,255,0.22);\n    background:rgba(0,0,0,0.55);\n    color:#fff; cursor:pointer;\n    box-shadow:0 0 14px rgba(0,255,255,0.18);\n    z-index:2;\n  }\n  .l8Prev{ left:10px; }\n  .l8Next{ right:10px; }\n\n  .l8Thumbs{\n    display:flex;\n    gap:8px;\n    overflow:auto;\n    padding-bottom:2px;\n    -webkit-overflow-scrolling: touch;\n  }\n  .l8Thumb{\n    width:86px; height:54px;\n    border-radius:12px;\n    overflow:hidden;\n    border:1px solid rgba(255,255,255,0.16);\n    cursor:pointer;\n    flex:0 0 auto;\n    opacity:.88;\n    background: rgba(0,0,0,0.28);\n  }\n  .l8Thumb.active{\n    border-color: rgba(0,255,255,0.65);\n    box-shadow:0 0 14px rgba(0,255,255,0.18);\n    opacity:1;\n  }\n  .l8Thumb img{ width:100%; height:100%; object-fit:cover; display:block; }\n\n  \/* ===== Chat header avatar ===== *\/\n  .l8AvatarRow{\n    display:flex;\n    align-items:center;\n    gap:10px;\n    margin-bottom:8px;\n  }\n  .l8AvatarImg{\n    width:64px;\n    height:86px;\n    border-radius:16px;\n    border:1px solid rgba(0,255,255,0.55);\n    box-shadow:0 0 14px rgba(0,255,255,0.18);\n    object-fit:contain;\n    background:rgba(255,255,255,0.06);\n    padding:4px;\n  }\n  .l8AvatarName{\n    font-size:10px;\n    text-transform:uppercase;\n    letter-spacing:.18em;\n    opacity:.9;\n  }\n\/* ==========================================================\nL8 HERO \u2013 PROFESSIONAL (FULL IMAGE VISIBLE + PREMIUM BACKDROP)\n- Full image visible: object-fit: contain\n- Keeps blurred glow behind (premium look)\n- Clean height rules (desktop + mobile)\n========================================================== *\/\n\n.l8Hero{\n  position: relative;\n  width: 100%;\n  border-radius: 18px;\n  overflow: hidden;\n  border: 1px solid rgba(255,255,255,0.18);\n  background: rgba(0,0,0,0.75);\n  box-shadow: 0 0 22px rgba(0,255,255,0.12);\n  height: 420px;          \/* desktop *\/\n  max-height: 420px;\n}\n\n\/* Mobile *\/\n@media (max-width: 900px){\n  .l8Hero{\n    height: 260px !important;\n    max-height: 260px !important;\n    min-height: 260px !important;\n  }\n}\n\n\/* Premium blurred fill behind the image *\/\n.l8Hero::before{\n  content:\"\";\n  position:absolute;\n  inset:-18px;\n  background-image: var(--hero-bg);\n  background-size: cover;\n  background-position: center;\n  filter: blur(18px) saturate(1.2);\n  opacity: .35;\n  transform: scale(1.15);\n}\n\n\/* The main hero image (FULL image always visible) *\/\n.l8HeroImg{\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;     \/* \u2705 full image visible *\/\n  object-position: center;\n  display: block;\n  background: transparent;\n}\n\n<\/style>\n\n<div id=\"l8PopupOverlay\" aria-hidden=\"true\">\n  <div class=\"l8Popup\" role=\"dialog\" aria-modal=\"true\">\n    <button class=\"l8Close\" id=\"l8CloseBtn\" aria-label=\"Close\">\u2715<\/button>\n\n    <div class=\"l8Top\">\n      <div>\n        <div class=\"l8Title\">Level 8 \u00b7 Gods Galaxy Game<\/div>\n        <div class=\"l8Main\" id=\"l8PopupTitle\">Property<\/div>\n      <\/div>\n      <div class=\"l8Badge\" id=\"l8PopupBadge\">MODE<\/div>\n    <\/div>\n\n    <div class=\"l8Body\">\n      <!-- LEFT -->\n      <div class=\"l8Card\">\n        <div class=\"l8CardTitle\" id=\"l8LeftTitle\">Showcase<\/div>\n        <div id=\"l8PlaceRow\" class=\"l8PlaceRow\"><\/div>\n        <div id=\"l8ShowcaseArea\"><\/div>\n\n        <div class=\"l8Field\">\n          <div class=\"l8Label\">Selection details<\/div>\n          <input class=\"l8Input\" id=\"l8Details\" readonly \/>\n        <\/div>\n\n        <div class=\"l8Row\" style=\"margin-top:10px;\" id=\"l8Actions\"><\/div>\n      <\/div>\n\n      <!-- RIGHT -->\n      <div class=\"l8Card\">\n        <div class=\"l8CardTitle\">Owner Chat<\/div>\n\n        <div class=\"l8AvatarRow\">\n          <img id=\"l8AvatarImg\" class=\"l8AvatarImg\" alt=\"Avatar\" \/>\n          <div>\n            <div class=\"l8AvatarName\" id=\"l8AvatarName\">GUEST<\/div>\n            <div style=\"font-size:10px; opacity:.7;\">Negotiation &#038; confirmations<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"l8Field\">\n          <div class=\"l8Label\">Message<\/div>\n          <textarea class=\"l8Text\" id=\"l8ChatInput\" placeholder=\"Type your message...\"><\/textarea>\n        <\/div>\n\n        <div class=\"l8Row\" style=\"margin-top:10px;\">\n          <button class=\"l8Btn\" id=\"l8SendBtn\">Send<\/button>\n          <button class=\"l8Btn secondary\" id=\"l8PrefillBtn\">Prefill<\/button>\n        <\/div>\n\n        <div class=\"l8Log\" id=\"l8ChatLog\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n\/* ==========================================================\nLEVEL 8 \u2013 YOU EDIT HERE ONLY\n========================================================== *\/\n\n\/** Force avatar URL (optional) *\/\nconst FORCE_AVATAR_URL = \"https:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/07\/Screenshot_20231118-120724_Instagram-scaled.jpg\";\n\n\/** Avatar storage key *\/\nconst L8_AVATAR_KEY = \"GGG_L8_AVATAR_URL\";\n\n\/** Default SVG avatar (backup only) *\/\nconst defaultAvatarUrl =\n  \"data:image\/svg+xml;charset=UTF-8,\" +\n  encodeURIComponent(`<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='220' height='220'>\n    <rect width='100%' height='100%' fill='#0a0b12'\/>\n    <circle cx='110' cy='86' r='46' fill='#0ff' fill-opacity='.18'\/>\n    <circle cx='110' cy='86' r='42' fill='#fff' fill-opacity='.10'\/>\n    <rect x='42' y='138' width='136' height='56' rx='28' fill='#0ff' fill-opacity='.14'\/>\n    <text x='110' y='208' font-family='Arial' font-size='18' fill='#bff' text-anchor='middle'>GUEST<\/text>\n  <\/svg>`);\n\n\/** Profile *\/\nconst L8_PROFILE_KEY = \"GGG_L8_PROFILE_V1\";\nfunction getProfile(){\n  try{\n    const raw = localStorage.getItem(L8_PROFILE_KEY);\n    return raw ? JSON.parse(raw) : { memberName: \"GUEST\" };\n  }catch(e){ return { memberName:\"GUEST\" }; }\n}\n\n\/** City Card *\/\nconst CITYCARD_KEY = \"gggCityCard\";\nfunction getCityCard(){\n  try{\n    const raw = localStorage.getItem(CITYCARD_KEY);\n    return raw ? JSON.parse(raw) : { stayNights: 12, airHours: 8, foodCredits: 150, waterHours: 12 };\n  }catch(e){\n    return { stayNights: 12, airHours: 8, foodCredits: 150, waterHours: 12 };\n  }\n}\nfunction setCityCard(c){ localStorage.setItem(CITYCARD_KEY, JSON.stringify(c)); }\n\n\/** Properties (HTTPS only) *\/\nconst L8_PROPERTIES = {\n  bliss: {\n    name: \"Bliss Glamping\",\n    note: \"Signature Bliss network stay\",\n    lat: 6.241568778606768,\n    lng: -75.22695655776336,\n    gallery: [\n      \"https:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240821_175227_Instagram.jpg\",\n      \"https:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg\"\n    ]\n  },\n  james: {\n    name: \"Mansion James Rodriguez\",\n    note: \"Premium owner experience\",\n    lat: 6.24267,\n    lng: -75.22668,\n    gallery: [\n      \"https:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061057_PowerPoint-1.jpg\",\n      \"https:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg\"\n    ]\n  },\n  sanmiguel: {\n    name: \"Mansion San Miguel\",\n    note: \"Exclusive network property\",\n    lat: 6.23796,\n    lng: -75.21421,\n    gallery: [\n      \"https:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg\"\n    ]\n  },\n  paraiso: {\n    name: \"Finca El Paraiso\",\n    note: \"Nature + comfort\",\n    lat: 6.22879,\n    lng: -75.21184,\n    gallery: [\n      \"https:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg\"\n    ]\n  }\n};\n\nfunction resolvePropertyKeyFromTitle(title=\"\"){\n  const t = (title||\"\").toLowerCase();\n  if(t.includes(\"bliss\")) return \"bliss\";\n  if(t.includes(\"james\") || t.includes(\"rodriguez\")) return \"james\";\n  if(t.includes(\"san miguel\") || t.includes(\"sanmiguel\")) return \"sanmiguel\";\n  if(t.includes(\"paraiso\") || t.includes(\"para\u00edso\")) return \"paraiso\";\n  return \"bliss\";\n}\n\nconst overlay      = document.getElementById(\"l8PopupOverlay\");\nconst closeBtn     = document.getElementById(\"l8CloseBtn\");\nconst titleEl      = document.getElementById(\"l8PopupTitle\");\nconst badgeEl      = document.getElementById(\"l8PopupBadge\");\nconst detailsEl    = document.getElementById(\"l8Details\");\nconst actionsEl    = document.getElementById(\"l8Actions\");\nconst showcaseArea = document.getElementById(\"l8ShowcaseArea\");\nconst placeRow     = document.getElementById(\"l8PlaceRow\");\n\nconst chatInput    = document.getElementById(\"l8ChatInput\");\nconst chatLog      = document.getElementById(\"l8ChatLog\");\nconst sendBtn      = document.getElementById(\"l8SendBtn\");\nconst prefillBtn   = document.getElementById(\"l8PrefillBtn\");\n\nconst avatarImg    = document.getElementById(\"l8AvatarImg\");\nconst avatarName   = document.getElementById(\"l8AvatarName\");\n\nlet current = {\n  mode: \"UNKNOWN\",\n  duration: \"SELECT\",\n  propKey: \"bliss\",\n  galleryIndex: 0\n};\n\nfunction openPopup(){\n  overlay.style.display = \"flex\";\n  requestAnimationFrame(()=> overlay.classList.add(\"open\"));\n  overlay.setAttribute(\"aria-hidden\",\"false\");\n}\nfunction closePopup(){\n  overlay.classList.remove(\"open\");\n  overlay.setAttribute(\"aria-hidden\",\"true\");\n  setTimeout(()=>{ overlay.style.display=\"none\"; }, 220);\n}\ncloseBtn.addEventListener(\"click\", closePopup);\noverlay.addEventListener(\"click\", (e)=>{ if(e.target === overlay) closePopup(); });\n\n\/\/ optional: reuse one pin instead of adding infinite markers\nlet L8_PIN = null;\n\nfunction focusMap(lat, lng){\n  const la = parseFloat(lat), ln = parseFloat(lng);\n  if(!Number.isFinite(la) || !Number.isFinite(ln)) return;\n\n  \/\/ If your site already has a focus function, use it\n  if(typeof window.focusOnHost === \"function\"){\n    window.focusOnHost(la, ln);\n    return;\n  }\n\n  \/\/ Otherwise use the global map\n  if(window.ggMap && window.google && window.google.maps){\n    const pos = { lat: la, lng: ln };\n\n    window.ggMap.setCenter(pos);\n    window.ggMap.setZoom(16);\n\n    try{\n      if(L8_PIN) L8_PIN.setMap(null);\n      L8_PIN = new window.google.maps.Marker({ position: pos, map: window.ggMap });\n    }catch(e){}\n  }\n}\n\nfunction jumpToLatLng(lat, lng){\n  const la = parseFloat(lat), ln = parseFloat(lng);\n  if(!Number.isFinite(la) || !Number.isFinite(ln)) return;\n\n  \/\/ Best: use ggMap if you have it\n  if(window.ggMap && typeof window.ggMap.setCenter === \"function\"){\n    window.ggMap.setCenter({ lat: la, lng: ln });\n    if(window.ggMap.setZoom) window.ggMap.setZoom(16);\n\n    try{\n      if(L8_PIN) L8_PIN.setMap(null);\n      L8_PIN = new window.google.maps.Marker({ position: { lat: la, lng: ln }, map: window.ggMap });\n    }catch(e){}\n    return;\n  }\n\n  \/\/ Fallback: scan window for any map-like object\n  for(const k in window){\n    try{\n      const v = window[k];\n      if(v && typeof v.setCenter === \"function\" && typeof v.getCenter === \"function\"){\n        v.setCenter({ lat: la, lng: ln });\n        if(v.setZoom) v.setZoom(16);\n        break;\n      }\n    }catch(e){}\n  }\n}\n\nfunction getMode(btn){\n  if(btn.classList.contains(\"use\")) return \"USE\";\n  if(btn.classList.contains(\"exchangez\")) return \"EXCHANGE\";\n  if(btn.classList.contains(\"trade\")) return \"TRADE\";\n  if(btn.classList.contains(\"buyzz\")) return \"BUY\";\n  return \"UNKNOWN\";\n}\nfunction getDuration(btn){\n  const cls = btn.className || \"\";\n  if(cls.includes(\"use-week\")) return \"WEEK\";\n  if(cls.includes(\"use-short\")) return \"DAYS\";\n  if(cls.includes(\"use-online\")) return \"ONLINE\";\n  if(cls.includes(\"use-penthouse\")) return \"PENTHOUSE\";\n\n  if(cls.includes(\"exchangez-internally\")) return \"INTERNAL\";\n  if(cls.includes(\"exchangez-year\")) return \"YEAR\";\n  if(cls.includes(\"exchangez-ownership\")) return \"OWNERSHIP\";\n  if(cls.includes(\"exchangez-comm\")) return \"COMMUNITY\";\n\n  if(cls.includes(\"trade-day\")) return \"DAY\";\n  if(cls.includes(\"trade-wknd\")) return \"WEEKEND\";\n  if(cls.includes(\"trade-wk\")) return \"WEEK\";\n  if(cls.includes(\"trade-rooms\")) return \"ROOMS\";\n\n  if(cls.includes(\"buyzz-wk\")) return \"WEEKS\";\n  if(cls.includes(\"buyzz-bc\")) return \"BLISS COIN\";\n  if(cls.includes(\"buyzz-trc\")) return \"TRAVEL CLUB\";\n  if(cls.includes(\"buyzz-cc\")) return \"CITY CARD\";\n\n  return \"SELECT\";\n}\n\n\/* Chat helpers *\/\nfunction addSystemMsg(text){\n  const div = document.createElement(\"div\");\n  div.className = \"l8Msg\";\n  div.textContent = text;\n  chatLog.prepend(div);\n}\nfunction addMyMsg(text){\n  const div = document.createElement(\"div\");\n  div.className = \"l8Msg me\";\n  div.textContent = text;\n  chatLog.prepend(div);\n}\nfunction setPrefill(){\n  const p = getProfile();\n  const prop = L8_PROPERTIES[current.propKey];\n  const base = `Hi, I\u2019m ${p.memberName || \"GUEST\"}. `;\n  const msg =\n    current.mode === \"USE\"      ? base + `I want to USE ${prop.name} for ${current.duration}. Please confirm dates and next steps.`\n  : current.mode === \"EXCHANGE\" ? base + `I want to EXCHANGE (${current.duration}) with ${prop.name}. Please confirm availability and terms.`\n  : current.mode === \"TRADE\"    ? base + `I want to TRADE (${current.duration}) related to ${prop.name}. Let\u2019s negotiate price and dates.`\n  : current.mode === \"BUY\"      ? base + `I want to BUY (${current.duration}) for ${prop.name}. Please send next steps.`\n  : base + `I\u2019m interested in ${prop.name}.`;\n\n  chatInput.value = msg;\n}\nprefillBtn.addEventListener(\"click\", setPrefill);\n\nsendBtn.addEventListener(\"click\", ()=>{\n  const text = (chatInput.value||\"\").trim();\n  if(!text) return;\n\n  addMyMsg(text);\n  chatInput.value = \"\";\n\n  setTimeout(()=>{\n    addSystemMsg(\"Thank you \u2014 we received your message. We will respond as soon as possible.\");\n  }, 450);\n});\n\n\/* Avatar loader *\/\nfunction loadAvatar(){\n  const p = getProfile();\n  avatarName.textContent = p.memberName || \"GUEST\";\n  const stored = localStorage.getItem(L8_AVATAR_KEY);\n  const url = FORCE_AVATAR_URL || stored || defaultAvatarUrl;\n  avatarImg.src = url;\n}\n\nfunction renderPlaceButtons(activeKey){\n  const keys = [\"bliss\",\"james\",\"sanmiguel\",\"paraiso\"];\n  placeRow.innerHTML = keys.map(k=>{\n    const pr = L8_PROPERTIES[k];\n    const thumb = pr.gallery && pr.gallery[0] ? pr.gallery[0] : \"\";\n    return `\n      <button type=\"button\" class=\"l8PlaceBtn ${k===activeKey?'active':''}\" data-place=\"${k}\">\n        <div class=\"l8PlaceThumb\">${thumb ? `<img decoding=\"async\" src=\"${thumb}\" alt=\"\">` : \"\"}<\/div>\n        <div class=\"l8PlaceMeta\">\n          <div class=\"l8PlaceName\">${pr.name}<\/div>\n          <div class=\"l8PlaceNote\">${pr.note || \"\"}<\/div>\n        <\/div>\n      <\/button>\n    `;\n  }).join(\"\");\n\n  placeRow.querySelectorAll(\".l8PlaceBtn\").forEach(btn=>{\n    btn.addEventListener(\"click\", ()=>{\n      const k = btn.dataset.place;\n      setActivePlace(k, true);\n    });\n  });\n}\n\nfunction renderShowcase(propKey){\n  const prop = L8_PROPERTIES[propKey];\n  if(!prop){\n    showcaseArea.innerHTML = `<div style=\"opacity:.85;\">No property found.<\/div>`;\n    return;\n  }\n\n  const imgs = (prop.gallery && prop.gallery.length) ? prop.gallery : [];\n  if(!imgs.length){\n  showcaseArea.innerHTML = `\n    <div style=\"opacity:.85;\">No gallery images yet for ${prop.name}.<\/div>\n    <button class=\"l8Btn secondary\" style=\"margin-top:10px;\" id=\"l8ViewLocBtn\">View Location<\/button>\n  `;\n  return;   \/\/ stop here \u2014 no handlers yet\n}\n      \n    const viewBtn = document.getElementById(\"l8ViewLocBtn\");\nif(viewBtn){\n  viewBtn.onclick = ()=>{\n    jumpToLatLng(prop.lat, prop.lng);\n    closePopup();\n    setTimeout(()=>{\n      addSystemMsg(`Viewing location for ${prop.name}.`);\n    }, 300);\n  };\n}\n\n  current.galleryIndex = Math.max(0, Math.min(current.galleryIndex, imgs.length-1));\n  const activeUrl = imgs[current.galleryIndex];\n\n  const thumbs = imgs.map((u,i)=>`\n    <div class=\"l8Thumb ${i===current.galleryIndex?'active':''}\" data-idx=\"${i}\">\n      <img decoding=\"async\" src=\"${u}\" alt=\"\">\n    <\/div>\n  `).join(\"\");\n\n  showcaseArea.innerHTML = `\n    <div class=\"l8Showcase\">\n      <div class=\"l8Hero\" style=\"--hero-bg:url('${activeUrl}')\">\n        <img decoding=\"async\" class=\"l8HeroImg\" id=\"l8HeroImg\" src=\"${activeUrl}\" alt=\"${prop.name}\">\n        <button class=\"l8NavBtn l8Prev\" id=\"l8PrevBtn\" aria-label=\"Previous\">\u2039<\/button>\n        <button class=\"l8NavBtn l8Next\" id=\"l8NextBtn\" aria-label=\"Next\">\u203a<\/button>\n      <\/div>\n\n      <div class=\"l8Thumbs\" id=\"l8Thumbs\">${thumbs}<\/div>\n\n      <div style=\"display:flex; justify-content:space-between; gap:10px; align-items:center;\">\n        <div style=\"min-width:0;\">\n          <div style=\"font-size:11px; text-transform:uppercase; letter-spacing:.16em;\">${prop.name}<\/div>\n          <div style=\"font-size:10px; opacity:.75; margin-top:4px;\">${prop.note || \"\"}<\/div>\n        <\/div>\n        <button class=\"l8Btn secondary\" id=\"l8ViewLocBtn\" style=\"flex:0 0 auto;\">View Location<\/button>\n      <\/div>\n    <\/div>\n  `;\n\n  document.getElementById(\"l8PrevBtn\").onclick = ()=>{\n    current.galleryIndex = (current.galleryIndex - 1 + imgs.length) % imgs.length;\n    renderShowcase(propKey);\n  };\n  document.getElementById(\"l8NextBtn\").onclick = ()=>{\n    current.galleryIndex = (current.galleryIndex + 1) % imgs.length;\n    renderShowcase(propKey);\n  };\n  document.getElementById(\"l8Thumbs\").onclick = (e)=>{\n    const t = e.target.closest(\".l8Thumb\");\n    if(!t) return;\n    const idx = parseInt(t.dataset.idx,10);\n    if(Number.isFinite(idx)){\n      current.galleryIndex = idx;\n      renderShowcase(propKey);\n    }\n  };\n  document.getElementById(\"l8ViewLocBtn\").onclick = ()=>{\n  jumpToLatLng(prop.lat, prop.lng);\n  closePopup();\n  setTimeout(()=>{\n    addSystemMsg(`Viewing location for ${prop.name}.`);\n  },300);\n};\n}\n\nfunction mkBtn(label, onClick, secondary=false){\n  const b = document.createElement(\"button\");\n  b.className = \"l8Btn\" + (secondary ? \" secondary\" : \"\");\n  b.textContent = label;\n  b.addEventListener(\"click\", onClick);\n  return b;\n}\n\nfunction renderActions(){\n  actionsEl.innerHTML = \"\";\n  const mode = current.mode;\n  const duration = current.duration;\n  const card = getCityCard();\n  const prop = L8_PROPERTIES[current.propKey];\n\n  titleEl.textContent = prop?.name || \"Property\";\n  badgeEl.textContent = `${mode} \u00b7 ${duration}`;\n  detailsEl.value = `Mode: ${mode} | Option: ${duration} | Property: ${prop?.name || \"\"}`;\n\n  if(mode === \"EXCHANGE\"){\n    actionsEl.append(\n      mkBtn(`Create Exchange Offer`, ()=>{\n        focusMap(prop.lat, prop.lng);\n        addSystemMsg(`Exchange offer drafted for ${prop.name}. Use chat to propose terms.`);\n        setPrefill();\n      })\n    );\n\n    return;\n  }\n\n  if(mode === \"USE\"){\n    actionsEl.append(\n      mkBtn(`Request Reserve`, ()=>{ addSystemMsg(`Reservation request started for ${prop.name}.`); setPrefill(); }, true),\n      mkBtn(`City Card Balances`, ()=>{\n        addSystemMsg(`Balances \u2192 Stay Nights: ${card.stayNights} | Air: ${card.airHours} | Food: ${card.foodCredits} | Water: ${card.waterHours}`);\n      }, true)\n    );\n    return;\n  }\n\n  if(mode === \"TRADE\"){\n    actionsEl.append(\n      mkBtn(`List ${duration} For Trade`, ()=>{ focusMap(prop.lat, prop.lng); addSystemMsg(`Trade listing draft created.`); setPrefill(); })\n    );\n    return;\n  }\n\n  if(mode === \"BUY\"){\n    actionsEl.append(\n      mkBtn(`Request To Buy ${prop.name}`, ()=>{ addSystemMsg(`Buy request drafted for ${prop.name}.`); setPrefill(); }, true)\n    );\n    return;\n  }\n\n  actionsEl.append(mkBtn(\"OK\", ()=> addSystemMsg(\"No mode detected.\"), true));\n}\n\nfunction setActivePlace(propKey, keepMode){\n  if(!L8_PROPERTIES[propKey]) propKey = \"bliss\";\n  current.propKey = propKey;\n  current.galleryIndex = 0;\n\n  renderPlaceButtons(propKey);\n  renderShowcase(propKey);\n  renderActions();\n\n  if(keepMode){\n    addSystemMsg(`Selected: ${L8_PROPERTIES[propKey].name}`);\n  }\n}\n\n\/* Hook: host circles *\/\ndocument.addEventListener(\"click\", (e)=>{\n  const btn = e.target.closest(\"#hostButtons .host-circle\");\n  if(!btn) return;\n\n  e.preventDefault();\n\n  current.mode = getMode(btn);\n  current.duration = getDuration(btn);\n\n  const propKey =\n    (btn.dataset && btn.dataset.prop) ? btn.dataset.prop :\n    resolvePropertyKeyFromTitle(btn.title || \"\");\n\n  chatLog.innerHTML = \"\";\n  loadAvatar();\n\n  setActivePlace(propKey, false);\n  openPopup();\n});\n\n<\/script>\n\n\n\n&#8211; AVATAR &#8211;>\n<div id=\"avatarContainer\" onclick=\"showAvatarCloud()\" \n     style=\"position:fixed; bottom:80px; right:20px; z-index:9999; cursor:pointer; display:none;\">\n  <img decoding=\"async\" src=\"http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/07\/Screenshot_20231118-120724_Instagram-scaled.jpg\" \n       style=\"width:180px; height:auto; border-radius: 50% \/ 30%; object-fit: cover; box-shadow: 0 0 12px aqua; filter: invert(100%) contrast(120%) brightness(110%);\">\n<\/div>\n\n<!-- CLOUD BUBBLE -->\n<div id=\"avatarCloud\" style=\"position:fixed; bottom:310px; right:30px; max-width:250px; background:rgba(0,0,0,0.7); \n     color:white; font-family:Orbitron, sans-serif; font-size:12px; line-height:16px; border-radius:20px 20px 20px 0px; \n     padding:14px 16px; box-shadow:0 0 15px aqua; display:none; z-index:9999; text-align:center;\n     border: 1px solid aqua;\">\n  <div id=\"avatarCloudMsg\">Loading&#8230;<\/div>\n  <div style=\"margin-top:10px;\">\n    <button onclick=\"acceptAvatarSuggestion()\" style=\"background:lime; color:black; border:none; padding:6px 10px; font-weight:bold;\">Yes<\/button>\n    <button onclick=\"dismissAvatarCloud()\" style=\"background:aqua; color:white; border:none; padding:6px 10px; font-weight:bold;\">No<\/button>\n  <\/div>\n  <div style=\"position:absolute; bottom:-18px; right:10px; width:0; height:0; border-left:10px solid transparent; \n              border-right:10px solid transparent; border-top:18px solid rgba(0,255,255,0.6); filter:blur(0.5px);\">\n  <\/div>\n<\/div>\n\n<!-- MOBILE ASSISTANT BUTTON -->\n<div id=\"avatarMobileBtn\" onclick=\"toggleMobileAvatar()\" style=\"display:none;\">\n  \ud83d\udc64 Assistant\n<\/div>\n\n<!-- ESTILOS -->\n<style>\n  #avatarMobileBtn {\n    position: fixed;\n    bottom: 18px;\n    right: 18px;\n    z-index: 9999;\n    background: rgba(0, 0, 0, 0.7);\n    color: white;\n    font-family: Orbitron, sans-serif;\n    font-size: 13px;\n    padding: 10px 14px;\n    border: 2px solid aqua;\n    border-radius: 14px;\n    box-shadow: 0 0 12px aqua;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  @media (min-width: 769px) {\n    #avatarMobileBtn {\n      display: none !important;\n    }\n  }\n\n  @media (max-width: 768px) {\n    #avatarContainer {\n      bottom: 30px !important;\n      right: 90px !important;\n      width: 100px !important;\n      display: none;\n      pointer-events: none;\n    }\n\n    #avatarContainer img {\n      width: 100%;\n      height: auto;\n      border-radius: 50% \/ 30%;\n      object-fit: cover;\n      filter: grayscale(0%) brightness(1.1) contrast(1.2);\n      box-shadow: 0 0 12px aqua;\n    }\n  }\n\n  @media (min-width: 769px) {\n    #avatarContainer {\n      pointer-events: auto;\n    }\n  }\n<\/style>\n\n<!-- L\u00d3GICA -->\n<script>\n  const entertainmentQuestions = [\n    \"Ready to see what\u2019s out there today?\",\n    \"Want entertainment options nearby?\",\n    \"Looking for something fun to do?\",\n    \"Need ideas for your free time?\",\n    \"Want something exciting tonight?\"\n  ];\n\n  const gastronomyQuestions = [\n    \"Want to see gastronomy options nearby?\",\n    \"Ready to have dinner tonight?\",\n    \"Would you like some brunch spots?\",\n    \"Hungry for something special?\",\n    \"Looking for restaurants around you?\"\n  ];\n\n  function showAvatarCloud(forcedType = null) {\n    const hour = new Date().getHours();\n    const type = forcedType || (hour % 2 === 0 ? \"gastronomy\" : \"entertainment\");\n    const question = (type === \"gastronomy\" ? gastronomyQuestions : entertainmentQuestions)[Math.floor(Math.random() * 5)];\n\n    document.getElementById(\"avatarCloudMsg\").innerText = question;\n    document.getElementById(\"avatarCloud\").style.display = \"block\";\n  }\n\n  function acceptAvatarSuggestion() {\n    dismissAvatarCloud();\n    alert(\"\u2705 Showing Aries recommendations near you...\");\n  }\n\n  function dismissAvatarCloud() {\n    document.getElementById(\"avatarCloud\").style.display = \"none\";\n  }\n\n  \/\/ \ud83d\udcbb Show avatar automatically after 3 seconds (desktop only)\n  function showAvatarAssistant() {\n    const avatar = document.getElementById(\"avatarContainer\");\n    if (window.innerWidth > 768) {\n      avatar.style.display = \"block\";\n      avatar.style.pointerEvents = \"auto\";\n    }\n  }\n  setTimeout(showAvatarAssistant, 3000);\n\n  \/\/ \ud83d\udcf1 Toggle mobile avatar on\/off\n  let avatarVisible = false;\n  function toggleMobileAvatar() {\n    const avatar = document.getElementById(\"avatarContainer\");\n    const btn = document.getElementById(\"avatarMobileBtn\");\n\n    if (!avatarVisible) {\n      avatar.style.display = \"block\";\n      avatar.style.pointerEvents = \"auto\";\n      showAvatarCloud();\n      btn.innerHTML = \"\u274c Close\";\n    } else {\n      avatar.style.display = \"none\";\n      avatar.style.pointerEvents = \"none\";\n      dismissAvatarCloud();\n      btn.innerHTML = \"\ud83d\udc64 Assistant\";\n    }\n\n    avatarVisible = !avatarVisible;\n  }\n\n  \/\/ \ud83d\udcf1 Show mobile button on load\n  window.addEventListener(\"load\", () => {\n    if (window.innerWidth <= 768) {\n      document.getElementById(\"avatarMobileBtn\").style.display = \"flex\";\n    }\n  });\n<\/script>\n\n\n\n<!-- =========================================\nLEVEL 8 \u2013 CITY CARD OVERLAY (FUNCTIONAL)\n- Unlock + User + Perk Actions + localStorage\n========================================= -->\n\n<style>\n  #cityCardOverlay{\n    position:fixed; inset:0;\n    display:none;\n    align-items:center;\n    justify-content:center;\n    z-index:5000;\n    background:\n      radial-gradient(circle at 10% 0%, rgba(0,255,255,0.18), transparent 60%),\n      radial-gradient(circle at 90% 100%, rgba(255,215,0,0.16), transparent 60%),\n      #000;\n    overflow:hidden;\n    opacity:0;\n    transform:scale(1.03);\n    transition:opacity .8s ease-out, transform .8s ease-out;\n  }\n  #cityCardOverlay.cc-visible{ opacity:1; transform:scale(1); }\n\n  .citycard-stars{\n    position:absolute; inset:-25%;\n    background-image:\n      radial-gradient(2px 2px at 15% 20%, rgba(255,255,255,0.8), transparent),\n      radial-gradient(1.5px 1.5px at 60% 40%, rgba(0,255,255,0.9), transparent),\n      radial-gradient(2px 2px at 30% 80%, rgba(255,255,0,0.9), transparent),\n      radial-gradient(1.5px 1.5px at 85% 70%, rgba(255,0,255,0.9), transparent);\n    opacity:.55;\n    filter:blur(.4px);\n    animation:ccStarDrift 40s linear infinite;\n    z-index:0;\n  }\n  @keyframes ccStarDrift{\n    0%{transform:translate3d(0,0,0) scale(1)}\n    50%{transform:translate3d(-2%,-3%,0) scale(1.05)}\n    100%{transform:translate3d(2%,3%,0) scale(1)}\n  }\n\n  .citycard-halo{\n    position:absolute;\n    width:560px; height:560px;\n    border-radius:50%;\n    background:radial-gradient(circle, rgba(0,255,255,0.28), transparent 65%);\n    filter:blur(10px);\n    z-index:0;\n    animation:ccHaloPulse 7s ease-in-out infinite;\n  }\n  @keyframes ccHaloPulse{\n    0%,100%{opacity:.38; transform:scale(1)}\n    50%{opacity:.95; transform:scale(1.08)}\n  }\n\n  .city-card-panel{\n    position:relative;\n    width:min(980px, 94vw);\n    max-height:min(90vh, 920px);\n    overflow:auto;\n    padding:20px 20px 18px;\n    border-radius:24px;\n    border:1px solid rgba(255,255,255,0.30);\n    background:\n      radial-gradient(circle at 20% 0%, rgba(0,255,255,0.16), transparent 55%),\n      radial-gradient(circle at 85% 100%, rgba(255,215,0,0.12), transparent 60%),\n      linear-gradient(135deg, rgba(6,10,30,0.96), rgba(20,0,45,0.98));\n    box-shadow:\n      0 0 28px rgba(0,255,255,0.55),\n      0 0 90px rgba(0,0,0,1);\n    color:#fff;\n    font-family:Orbitron, system-ui, sans-serif;\n    z-index:2;\n    transform:translateY(16px);\n    opacity:0;\n    filter:blur(7px);\n    transition:opacity .7s ease-out .1s, transform .7s ease-out .1s, filter .7s ease-out .1s;\n  }\n  #cityCardOverlay.cc-visible .city-card-panel{\n    opacity:1; transform:translateY(0); filter:blur(0);\n  }\n\n  #closeCityCardBtn{\n    position:sticky;\n    top:0;\n    margin-left:auto;\n    display:block;\n    border:none;\n    background:transparent;\n    color:#fff;\n    font-size:20px;\n    cursor:pointer;\n    text-shadow:0 0 10px rgba(0,255,255,0.9);\n    z-index:5;\n  }\n\n  .city-card-header{\n    display:flex; align-items:center; gap:10px;\n    margin: 2px 0 10px;\n  }\n  .city-card-title-block{\n    text-transform:uppercase;\n    letter-spacing:.22em;\n    font-size:11px;\n  }\n  .city-card-title-block .main{\n    font-size:16px;\n    letter-spacing:.30em;\n    margin-top:2px;\n  }\n  .city-card-subtitle{\n    font-size:10px;\n    opacity:.82;\n    text-transform:uppercase;\n  }\n  .city-card-tag{\n    margin-left:auto;\n    font-size:10px;\n    padding:5px 10px;\n    border-radius:999px;\n    border:1px solid rgba(0,255,255,0.8);\n    text-transform:uppercase;\n    letter-spacing:.18em;\n    background:rgba(0,0,0,.65);\n    box-shadow:0 0 10px rgba(0,255,255,.65);\n    white-space:nowrap;\n  }\n\n  .ccGrid{\n    display:grid;\n    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);\n    gap:18px;\n    align-items:start;\n  }\n  @media (max-width: 860px){\n    .ccGrid{ grid-template-columns:1fr; }\n  }\n\n  \/* ===== CARD VISUAL ===== *\/\n  .ccCardWrap{ position:relative; perspective:1100px; }\n  .ccCard{\n    width:100%;\n    max-width:560px;\n    aspect-ratio: 1.62 \/ 1;\n    border-radius:22px;\n    position:relative;\n    overflow:hidden;\n    border:1px solid rgba(255,255,255,0.22);\n    background:\n      radial-gradient(circle at 20% 0%, rgba(0,255,255,0.22), transparent 55%),\n      radial-gradient(circle at 90% 100%, rgba(255,215,0,0.14), transparent 60%),\n      linear-gradient(135deg, rgba(2,14,22,0.95), rgba(28,8,55,0.95));\n    box-shadow:\n      0 0 22px rgba(0,255,255,0.45),\n      0 0 70px rgba(0,0,0,0.95);\n    margin:4px auto 0;\n  }\n  .ccHolo{\n    position:absolute; inset:-40%;\n    background:\n      conic-gradient(from 180deg,\n        rgba(0,255,255,0.0),\n        rgba(0,255,255,0.22),\n        rgba(255,255,255,0.12),\n        rgba(255,215,0,0.18),\n        rgba(255,0,255,0.16),\n        rgba(0,255,255,0.22),\n        rgba(0,255,255,0.0)\n      );\n    mix-blend-mode:screen;\n    opacity:.62;\n    filter:blur(10px);\n    animation: ccHoloMove 6.5s linear infinite;\n    pointer-events:none;\n  }\n  @keyframes ccHoloMove{\n    0%{ transform:translateX(-8%) translateY(6%) rotate(0deg); }\n    50%{ transform:translateX(8%) translateY(-6%) rotate(180deg); }\n    100%{ transform:translateX(-8%) translateY(6%) rotate(360deg); }\n  }\n  .ccSweep{\n    position:absolute; inset:0;\n    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.26) 40%, transparent 70%);\n    opacity:.55;\n    transform:translateX(-130%);\n    animation: ccSweep 5.2s linear infinite;\n    pointer-events:none;\n  }\n  @keyframes ccSweep{\n    0%{ transform:translateX(-130%) skewX(-12deg); }\n    100%{ transform:translateX(130%) skewX(-12deg); }\n  }\n\n  .ccTop{\n    position:absolute; left:18px; right:18px; top:16px;\n    display:flex; gap:10px; align-items:flex-start;\n    z-index:2;\n  }\n  .ccBrand .t1{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.86; }\n  .ccBrand .t2{ font-size:14px; letter-spacing:.30em; text-transform:uppercase; margin-top:4px; }\n  .ccPill{\n    margin-left:auto;\n    font-size:10px;\n    padding:5px 10px;\n    border-radius:999px;\n    border:1px solid rgba(255,255,255,0.28);\n    background:rgba(0,0,0,0.55);\n    letter-spacing:.18em;\n    text-transform:uppercase;\n    box-shadow: inset 0 0 14px rgba(0,255,255,0.18);\n    white-space:nowrap;\n  }\n  .ccChip{\n    position:absolute; left:18px; top:64px;\n    width:60px; height:44px;\n    border-radius:10px;\n    background:\n      linear-gradient(135deg, rgba(255,215,0,0.85), rgba(255,255,255,0.22)),\n      radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), transparent 55%);\n    box-shadow: 0 0 16px rgba(255,215,0,0.28);\n    border:1px solid rgba(255,255,255,0.22);\n    z-index:2;\n  }\n  .ccNumber{\n    position:absolute; left:18px; right:18px; top:122px;\n    font-size:16px; letter-spacing:.22em; text-transform:uppercase;\n    z-index:2;\n    opacity:.92;\n  }\n  .ccMeta{\n    position:absolute; left:18px; right:18px; bottom:16px;\n    display:flex; gap:14px; align-items:flex-end;\n    z-index:2;\n  }\n  .ccSmall{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; opacity:.75; }\n  .ccName{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.92; }\n  .ccExpiry{ margin-left:auto; text-align:right; }\n\n  .ccLockedOverlay{\n    position:absolute; inset:0;\n    display:flex; align-items:center; justify-content:center;\n    background: radial-gradient(circle at 50% 30%, rgba(0,255,255,0.14), rgba(0,0,0,0.82));\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n    z-index:4;\n    opacity:0;\n    transition:opacity .35s ease;\n    pointer-events:none;\n  }\n  .ccLockedOverlay.show{ opacity:1; }\n  .ccLockBadge{\n    border:1px solid rgba(255,255,255,0.22);\n    background:rgba(0,0,0,0.55);\n    padding:10px 12px;\n    border-radius:16px;\n    text-align:center;\n    box-shadow:0 0 18px rgba(0,255,255,0.25);\n    max-width: 88%;\n  }\n  .ccLockBadge .h{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; }\n  .ccLockBadge .p{ margin-top:6px; font-size:10px; opacity:.85; line-height:1.35; }\n\n  \/* ===== PERKS ===== *\/\n  .city-card-perks{\n    display:grid;\n    grid-template-columns: repeat(2, minmax(0,1fr));\n    gap:12px;\n  }\n  @media (max-width: 420px){\n    .city-card-perks{ grid-template-columns:1fr; }\n  }\n  .city-perk-orb{\n    position:relative;\n    padding:12px 10px;\n    border-radius:18px;\n    border:1px solid rgba(255,255,255,0.22);\n    background:\n      radial-gradient(circle at top, rgba(0,255,255,0.14), transparent 70%),\n      rgba(0,0,0,0.78);\n    box-shadow: inset 0 0 16px rgba(0,255,255,0.22);\n    cursor:pointer;\n    user-select:none;\n  }\n  .city-perk-orb:active{ transform:scale(.99); }\n  .city-perk-orb-header{\n    display:flex; align-items:center; gap:8px;\n    margin-bottom:8px;\n  }\n  .city-perk-icon{\n    width:28px; height:28px;\n    border-radius:50%;\n    background:\n      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.9), transparent 55%),\n      radial-gradient(circle at 70% 80%, rgba(0,255,255,0.9), transparent 55%);\n    box-shadow: 0 0 10px rgba(0,255,255,0.85), 0 0 18px rgba(0,0,0,1);\n    flex-shrink:0;\n  }\n  .city-perk-name{\n    text-transform:uppercase;\n    letter-spacing:.14em;\n    font-size:9px;\n    opacity:.85;\n  }\n  .city-card-value{\n    margin-top:2px;\n    font-size:18px;\n    font-weight:800;\n    letter-spacing:.06em;\n  }\n  .city-perk-note{\n    margin-top:4px;\n    font-size:9px;\n    opacity:.75;\n    line-height:1.35;\n  }\n\n  \/* ===== CONTENT AREA (unlock\/actions) ===== *\/\n  #cityCardContent{\n    margin-top:14px;\n    border-top:1px solid rgba(255,255,255,0.16);\n    padding-top:12px;\n    font-size:11px;\n  }\n\n  .ccRow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }\n  .ccField{\n    flex:1 1 210px;\n    display:flex;\n    flex-direction:column;\n    gap:6px;\n    padding:10px 12px;\n    border-radius:16px;\n    border:1px solid rgba(255,255,255,0.18);\n    background:rgba(0,0,0,0.55);\n    box-shadow: inset 0 0 14px rgba(0,255,255,0.12);\n  }\n  .ccLabel{\n    font-size:9px;\n    letter-spacing:.18em;\n    text-transform:uppercase;\n    opacity:.78;\n  }\n  .ccInput{\n    width:100%;\n    border:none;\n    outline:none;\n    color:#fff;\n    background:rgba(255,255,255,0.06);\n    padding:10px 10px;\n    border-radius:12px;\n    font-family:Orbitron, system-ui, sans-serif;\n    letter-spacing:.08em;\n    font-size:12px;\n    border:1px solid rgba(255,255,255,0.16);\n  }\n\n  .city-card-actions{\n    display:flex;\n    flex-wrap:wrap;\n    gap:8px;\n    margin-top:10px;\n  }\n  .city-card-btn{\n    flex: 1 1 150px;\n    padding:10px 12px;\n    font-size:11px;\n    border:1px solid rgba(0,255,255,0.95);\n    border-radius:999px;\n    text-align:center;\n    text-decoration:none;\n    color:#fff;\n    background: radial-gradient(circle at top, rgba(0,255,255,0.22), rgba(0,0,0,0.92));\n    box-shadow: 0 0 12px rgba(0,255,255,0.6);\n    cursor:pointer;\n    text-transform:uppercase;\n    letter-spacing:.16em;\n    user-select:none;\n  }\n  .city-card-btn.secondary{\n    border-color: rgba(255,255,255,0.35);\n    box-shadow: 0 0 10px rgba(255,255,255,0.22);\n    background: rgba(0,0,0,0.78);\n  }\n\n  \/* ===== Perk Action Drawer ===== *\/\n  #ccPerkDrawer{\n    display:none;\n    margin-top:12px;\n    padding:12px;\n    border-radius:18px;\n    border:1px solid rgba(255,255,255,0.18);\n    background:\n      radial-gradient(circle at 20% 0%, rgba(0,255,255,0.14), transparent 55%),\n      rgba(0,0,0,0.65);\n    box-shadow: inset 0 0 18px rgba(0,255,255,0.14);\n  }\n  .ccDrawerTitle{\n    font-size:11px;\n    letter-spacing:.22em;\n    text-transform:uppercase;\n  }\n  .ccDrawerSub{\n    margin-top:6px;\n    font-size:11px;\n    opacity:.82;\n    line-height:1.45;\n  }\n<\/style>\n\n<div id=\"cityCardOverlay\">\n  <div class=\"citycard-stars\"><\/div>\n  <div class=\"citycard-halo\"><\/div>\n\n  <div class=\"city-card-panel\">\n    <button id=\"closeCityCardBtn\" aria-label=\"Close\">\u2715<\/button>\n\n    <div class=\"city-card-header\">\n      <div class=\"city-card-title-block\">\n        <div class=\"city-card-subtitle\">Level 8 \u00b7 Gods Galaxy Game<\/div>\n        <div class=\"main\">City Card<\/div>\n      <\/div>\n      <div class=\"city-card-tag\" id=\"ccTag\">Crown Access \u00b7 Locked<\/div>\n    <\/div>\n\n    <div class=\"ccGrid\">\n      <!-- CARD -->\n      <div class=\"ccCardWrap\">\n        <div class=\"ccCard\">\n          <div class=\"ccHolo\"><\/div>\n          <div class=\"ccSweep\"><\/div>\n\n          <div class=\"ccTop\">\n            <div class=\"ccBrand\">\n              <div class=\"t1\">Official City Access Pass<\/div>\n              <div class=\"t2\">CITY CARD<\/div>\n            <\/div>\n            <div class=\"ccPill\" id=\"ccPill\">LOCKED<\/div>\n          <\/div>\n\n          <div class=\"ccChip\"><\/div>\n\n          <div class=\"ccNumber\" id=\"ccNumber\">GGG \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 2025<\/div>\n\n          <div class=\"ccMeta\">\n            <div>\n              <div class=\"ccSmall\">Member<\/div>\n              <div class=\"ccName\" id=\"ccMemberName\">GUEST<\/div>\n            <\/div>\n            <div class=\"ccExpiry\">\n              <div class=\"ccSmall\">Valid Thru<\/div>\n              <div class=\"ccName\" id=\"ccExpiry\">--\/--<\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"ccLockedOverlay\" id=\"ccLockedOverlay\">\n            <div class=\"ccLockBadge\">\n              <div class=\"h\">City Card Locked<\/div>\n              <div class=\"p\">Unlock to activate Water Hours, Air Hours, Food Credits & Stay Nights for this city.<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- PERKS (clickable) -->\n      <div class=\"city-card-perks\">\n        <div class=\"city-perk-orb\" data-perk=\"water\">\n          <div class=\"city-perk-orb-header\">\n            <div class=\"city-perk-icon\"><\/div>\n            <div class=\"city-perk-name\">Water Hours<\/div>\n          <\/div>\n          <div class=\"city-card-value\" id=\"waterHoursValue\">0<\/div>\n          <div class=\"city-perk-note\">Access to aquatic & wellness experiences<\/div>\n        <\/div>\n\n        <div class=\"city-perk-orb\" data-perk=\"air\">\n          <div class=\"city-perk-orb-header\">\n            <div class=\"city-perk-icon\"><\/div>\n            <div class=\"city-perk-name\">Air Hours<\/div>\n          <\/div>\n          <div class=\"city-card-value\" id=\"airHoursValue\">0<\/div>\n          <div class=\"city-perk-note\">Transport, views & sky-level experiences<\/div>\n        <\/div>\n\n        <div class=\"city-perk-orb\" data-perk=\"food\">\n          <div class=\"city-perk-orb-header\">\n            <div class=\"city-perk-icon\"><\/div>\n            <div class=\"city-perk-name\">Food Credits<\/div>\n          <\/div>\n          <div class=\"city-card-value\" id=\"foodCreditsValue\">0<\/div>\n          <div class=\"city-perk-note\">Gastronomy, clubs & local flavors<\/div>\n        <\/div>\n\n        <div class=\"city-perk-orb\" data-perk=\"stay\">\n          <div class=\"city-perk-orb-header\">\n            <div class=\"city-perk-icon\"><\/div>\n            <div class=\"city-perk-name\">Stay Nights<\/div>\n          <\/div>\n          <div class=\"city-card-value\" id=\"stayNightsValue\">0<\/div>\n          <div class=\"city-perk-note\">Nights across Bliss network & partners<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- dynamic content -->\n    <div id=\"cityCardContent\"><\/div>\n\n    <!-- perk drawer -->\n    <div id=\"ccPerkDrawer\">\n      <div class=\"ccDrawerTitle\" id=\"ccDrawerTitle\">Perk<\/div>\n      <div class=\"ccDrawerSub\" id=\"ccDrawerSub\">Actions<\/div>\n      <div class=\"city-card-actions\" id=\"ccDrawerActions\"><\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n  \/* ============================\n     CITY CARD \u2013 FUNCTIONAL MVP\n     ============================ *\/\n\n  \/\/ DEMO unlock code (change anytime)\n  const CITYCARD_DEMO_CODE = \"galaxy2025\";\n\n  \/\/ Storage keys\n  const CC_KEY = \"GGG_CITYCARD_PROFILE_V1\";\n\n  \/\/ Default balances (used when a profile is created)\n  const DEFAULT_CARD = {\n    hasCityCard: false,\n    memberName: \"GUEST\",\n    validThru: \"--\/--\",\n    \/\/ balances:\n    waterHours: 12,\n    airHours: 8,\n    foodCredits: 150,\n    stayNights: 3\n  };\n\n  \/\/ Elements\n  const cityCardBtn      = document.getElementById(\"cityCardBtn\"); \/\/ make sure a button exists with this id\n  const cityCardOverlay  = document.getElementById(\"cityCardOverlay\");\n  const closeCityCardBtn = document.getElementById(\"closeCityCardBtn\");\n  const cityCardContent  = document.getElementById(\"cityCardContent\");\n\n  const waterHoursValue  = document.getElementById(\"waterHoursValue\");\n  const airHoursValue    = document.getElementById(\"airHoursValue\");\n  const foodCreditsValue = document.getElementById(\"foodCreditsValue\");\n  const stayNightsValue  = document.getElementById(\"stayNightsValue\");\n\n  const ccLockedOverlay  = document.getElementById(\"ccLockedOverlay\");\n  const ccMemberNameEl   = document.getElementById(\"ccMemberName\");\n  const ccExpiryEl       = document.getElementById(\"ccExpiry\");\n  const ccPill           = document.getElementById(\"ccPill\");\n  const ccTag            = document.getElementById(\"ccTag\");\n\n  const ccPerkDrawer     = document.getElementById(\"ccPerkDrawer\");\n  const ccDrawerTitle    = document.getElementById(\"ccDrawerTitle\");\n  const ccDrawerSub      = document.getElementById(\"ccDrawerSub\");\n  const ccDrawerActions  = document.getElementById(\"ccDrawerActions\");\n\n  function loadProfile(){\n    try{\n      const raw = localStorage.getItem(CC_KEY);\n      if(!raw) return { ...DEFAULT_CARD };\n      const parsed = JSON.parse(raw);\n      return { ...DEFAULT_CARD, ...parsed };\n    }catch(e){\n      return { ...DEFAULT_CARD };\n    }\n  }\n\n  function saveProfile(profile){\n    localStorage.setItem(CC_KEY, JSON.stringify(profile));\n  }\n\n  let ccProfile = loadProfile();\n\n  function renderNumbers(){\n    waterHoursValue.textContent  = ccProfile.waterHours;\n    airHoursValue.textContent    = ccProfile.airHours;\n    foodCreditsValue.textContent = ccProfile.foodCredits;\n    stayNightsValue.textContent  = ccProfile.stayNights;\n  }\n\n  function setStatusUI(){\n    ccMemberNameEl.textContent = (ccProfile.memberName || \"GUEST\").toUpperCase();\n    ccExpiryEl.textContent     = ccProfile.validThru || \"--\/--\";\n\n    if(ccProfile.hasCityCard){\n      ccLockedOverlay.classList.remove(\"show\");\n      ccPill.textContent = \"ACTIVE\";\n      ccTag.textContent  = \"Crown Access \u00b7 Active\";\n    }else{\n      ccLockedOverlay.classList.add(\"show\");\n      ccPill.textContent = \"LOCKED\";\n      ccTag.textContent  = \"Crown Access \u00b7 Locked\";\n    }\n  }\n\n  function renderCityCard(){\n    renderNumbers();\n    setStatusUI();\n\n    if(ccProfile.hasCityCard){\n      cityCardContent.innerHTML = `\n        <div style=\"opacity:0.92;\">\n          <div style=\"font-size:11px; text-transform:uppercase; letter-spacing:0.18em;\">\n            City Card Status: <span style=\"color:#7CFFCA;\">Active<\/span>\n          <\/div>\n          <div style=\"margin-top:8px; font-size:11px; opacity:0.85; line-height:1.45;\">\n            Tap any perk (Water\/Air\/Food\/Stay) to use hours\/credits or view options in the city.\n          <\/div>\n        <\/div>\n        <div class=\"city-card-actions\">\n          <button class=\"city-card-btn secondary\" data-action=\"rename\">Set Member Name<\/button>\n          <button class=\"city-card-btn secondary\" data-action=\"reset\">Reset Card<\/button>\n        <\/div>\n      `;\n    }else{\n      cityCardContent.innerHTML = `\n        <div style=\"opacity:0.92;\">\n          <div style=\"font-size:11px; text-transform:uppercase; letter-spacing:0.18em;\">\n            City Card Locked\n          <\/div>\n          <div style=\"margin-top:8px; font-size:11px; opacity:0.85; line-height:1.45;\">\n            Enter demo code to unlock instantly (for presentations), or buy the City Card to activate.\n          <\/div>\n        <\/div>\n\n        <div class=\"ccRow\" style=\"margin-top:10px;\">\n          <div class=\"ccField\">\n            <div class=\"ccLabel\">Member Name (saved on this device)<\/div>\n            <input class=\"ccInput\" id=\"ccNameInput\" placeholder=\"Example: Edward\" value=\"${(ccProfile.memberName||\"GUEST\").replace(\/\"\/g,'&quot;')}\" \/>\n          <\/div>\n\n          <div class=\"ccField\">\n            <div class=\"ccLabel\">Unlock Code<\/div>\n            <input class=\"ccInput\" id=\"ccCodeInput\" placeholder=\"Enter code\" \/>\n          <\/div>\n        <\/div>\n\n        <div class=\"city-card-actions\">\n          <button class=\"city-card-btn\" data-action=\"unlock\">Unlock<\/button>\n          <a href=\"https:\/\/element8.godaddysites.com\/\" target=\"_blank\" class=\"city-card-btn secondary\">Buy City Card<\/a>\n          <button class=\"city-card-btn secondary\" data-action=\"learn\">Learn Benefits<\/button>\n        <\/div>\n      `;\n    }\n\n    \/\/ hide drawer on re-render (clean)\n    ccPerkDrawer.style.display = \"none\";\n    ccDrawerActions.innerHTML = \"\";\n  }\n\n  function openCityCard(){\n    renderCityCard();\n    cityCardOverlay.style.display = \"flex\";\n    requestAnimationFrame(()=> cityCardOverlay.classList.add(\"cc-visible\"));\n  }\n\n  function closeCityCard(){\n    cityCardOverlay.classList.remove(\"cc-visible\");\n    setTimeout(()=>{\n      if(!cityCardOverlay.classList.contains(\"cc-visible\")){\n        cityCardOverlay.style.display=\"none\";\n      }\n    }, 350);\n  }\n\n  \/\/ Hook open button\n  if(cityCardBtn) cityCardBtn.addEventListener(\"click\", openCityCard);\n\n  \/\/ Close\n  closeCityCardBtn.addEventListener(\"click\", closeCityCard);\n  cityCardOverlay.addEventListener(\"click\", (e)=>{\n    if(e.target === cityCardOverlay) closeCityCard();\n  });\n\n  \/\/ Content actions\n  cityCardContent.addEventListener(\"click\", (e)=>{\n    const btn = e.target.closest(\"[data-action]\");\n    if(!btn) return;\n    const action = btn.getAttribute(\"data-action\");\n\n    if(action === \"unlock\"){\n      const nameInput = document.getElementById(\"ccNameInput\");\n      const codeInput = document.getElementById(\"ccCodeInput\");\n\n      const name = (nameInput?.value || \"GUEST\").trim();\n      const code = (codeInput?.value || \"\").trim();\n\n      if(!code){\n        alert(\"Enter the unlock code.\");\n        return;\n      }\n      if(code !== CITYCARD_DEMO_CODE){\n        alert(\"Invalid code.\");\n        return;\n      }\n\n      ccProfile.memberName  = name || \"GUEST\";\n      ccProfile.hasCityCard = true;\n      ccProfile.validThru   = \"12\/30\"; \/\/ demo; later you can set real expiry\n      saveProfile(ccProfile);\n      renderCityCard();\n      return;\n    }\n\n    if(action === \"rename\"){\n      const newName = prompt(\"Member name:\", ccProfile.memberName || \"GUEST\");\n      if(newName !== null){\n        ccProfile.memberName = (newName || \"GUEST\").trim();\n        saveProfile(ccProfile);\n        renderCityCard();\n      }\n      return;\n    }\n\n    if(action === \"reset\"){\n      if(confirm(\"Reset City Card on this device?\")){\n        ccProfile = { ...DEFAULT_CARD };\n        saveProfile(ccProfile);\n        renderCityCard();\n      }\n      return;\n    }\n\n    if(action === \"learn\"){\n      alert(\"Benefits: Water Hours (wellness), Air Hours (transport\/views), Food Credits (gastronomy), Stay Nights (stays). Next: connect each perk to Level 8 options.\");\n      return;\n    }\n  });\n\n  \/\/ Perk click handler (this makes the page NOT dead)\n  document.querySelectorAll(\".city-perk-orb\").forEach((orb)=>{\n    orb.addEventListener(\"click\", ()=>{\n      const perk = orb.getAttribute(\"data-perk\");\n\n      if(!ccProfile.hasCityCard){\n        alert(\"City Card is locked. Unlock it to use perks.\");\n        return;\n      }\n\n      const perkMeta = {\n        water: { label:\"Water Hours\", key:\"waterHours\", unit:\"hours\", desc:\"Wellness, aquatic, spa, relaxation experiences.\" },\n        air:   { label:\"Air Hours\",   key:\"airHours\",   unit:\"hours\", desc:\"Transport, views, sky-level experiences.\" },\n        food:  { label:\"Food Credits\",key:\"foodCredits\",unit:\"credits\",desc:\"Gastronomy, clubs, local flavors.\" },\n        stay:  { label:\"Stay Nights\", key:\"stayNights\", unit:\"nights\", desc:\"Partner stays across the network.\" }\n      }[perk];\n\n      if(!perkMeta) return;\n\n      const bal = Number(ccProfile[perkMeta.key] || 0);\n\n      ccDrawerTitle.textContent = perkMeta.label;\n      ccDrawerSub.textContent   = `Balance: ${bal} ${perkMeta.unit}. ${perkMeta.desc}`;\n\n      ccDrawerActions.innerHTML = `\n        <button class=\"city-card-btn\" data-perk-action=\"use1\" data-key=\"${perkMeta.key}\">Use 1<\/button>\n        <button class=\"city-card-btn secondary\" data-perk-action=\"useCustom\" data-key=\"${perkMeta.key}\">Use Custom<\/button>\n        <button class=\"city-card-btn secondary\" data-perk-action=\"view\" data-key=\"${perkMeta.key}\">View Options<\/button>\n      `;\n\n      ccPerkDrawer.style.display = \"block\";\n      ccPerkDrawer.scrollIntoView({ behavior:\"smooth\", block:\"nearest\" });\n    });\n  });\n\n  \/\/ Drawer actions\n  ccDrawerActions.addEventListener(\"click\", (e)=>{\n    const btn = e.target.closest(\"[data-perk-action]\");\n    if(!btn) return;\n\n    const act = btn.getAttribute(\"data-perk-action\");\n    const key = btn.getAttribute(\"data-key\");\n    const bal = Number(ccProfile[key] || 0);\n\n    if(act === \"use1\"){\n      if(bal <= 0){ alert(\"No balance available.\"); return; }\n      ccProfile[key] = bal - 1;\n      saveProfile(ccProfile);\n      renderCityCard();\n      ccPerkDrawer.style.display = \"block\";\n      return;\n    }\n\n    if(act === \"useCustom\"){\n      const amountRaw = prompt(\"How many to use?\", \"1\");\n      if(amountRaw === null) return;\n      const amount = Math.max(0, Number(amountRaw));\n      if(!Number.isFinite(amount) || amount <= 0){ alert(\"Enter a valid number.\"); return; }\n      if(amount > bal){ alert(\"Not enough balance.\"); return; }\n      ccProfile[key] = bal - amount;\n      saveProfile(ccProfile);\n      renderCityCard();\n      ccPerkDrawer.style.display = \"block\";\n      return;\n    }\n\n    if(act === \"view\"){\n\n  const map = {\n    waterHours: \"city-water\",\n    airHours: \"city-air\",\n    foodCredits: \"city-food\",\n    stayNights: \"city-land\"\n  };\n\n  const suboption = map[key];\n\n  if(typeof showHostButtons === \"function\"){\n    showHostButtons(suboption);\n    closeCityCard();\n  }\n\n  return;\n}\n  });\n\n  \/\/ Initial render if opened from elsewhere\n  renderCityCard();\n<\/script>\n\n\n\n<style>\n#gggL8Panel{\n  display:none;position:fixed;inset:0;z-index:2147483647;\n  background:radial-gradient(circle at top,#16243f,#02040a 72%);\n  color:white;overflow:auto;font-family:Arial,sans-serif;padding:24px;\n}\n#gggL8Panel *{box-sizing:border-box}\n.l8-wrap{max-width:1280px;margin:auto}\n.l8-header{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:20px}\n.l8-title{font-size:28px;font-weight:900;color:#8deeff;text-transform:uppercase}\n.l8-sub{color:#cbd5e1;font-size:13px;line-height:1.5}\n.l8-btn{border:none;border-radius:999px;padding:12px 18px;background:linear-gradient(135deg,#8deeff,#2f93ff);color:#031018;font-weight:900;cursor:pointer;text-transform:uppercase}\n.l8-btn.dark{background:#07111f;color:white;border:1px solid rgba(255,255,255,.2)}\n.l8-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:18px}\n.l8-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.45)}\n.l8-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}\n.l8-field.full{grid-column:1\/-1}\n.l8-field label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#cbd5e1;margin-bottom:6px}\n.l8-field input,.l8-field select,.l8-field textarea{\n  width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.16);\n  background:rgba(0,0,0,.35);color:white;padding:11px;\n}\n.l8-field select option{color:#111}\n.l8-field textarea{min-height:88px}\n#l8List{display:grid;gap:12px}\n.l8-filterRow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}\n.l8-filterRow select,.l8-filterRow input{\n  border-radius:999px;border:1px solid rgba(255,255,255,.16);\n  background:rgba(0,0,0,.35);color:white;padding:10px 12px;\n}\n.l8-filterRow option{color:#111}\n.l8-item{display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:12px}\n.l8-thumb{width:76px;height:76px;border-radius:50%;background:#111 center\/cover no-repeat;box-shadow:0 0 18px rgba(88,219,255,.45)}\n.l8-name{font-weight:900;color:#8deeff}\n.l8-meta{font-size:12px;color:#cbd5e1;margin-top:4px}\n.l8-badge{display:inline-flex;margin-top:6px;padding:5px 9px;border-radius:999px;background:rgba(141,238,255,.10);border:1px solid rgba(141,238,255,.22);font-size:11px;text-transform:uppercase;color:#eafcff}\n.l8-actions{display:flex;gap:8px;flex-wrap:wrap}\n@media(max-width:850px){.l8-grid{grid-template-columns:1fr}.l8-form{grid-template-columns:1fr}.l8-item{grid-template-columns:60px 1fr}.l8-actions{grid-column:1\/-1}}\n<\/style>\n\n<div id=\"gggL8Panel\">\n  <div class=\"l8-wrap\">\n    <div class=\"l8-header\">\n      <div>\n        <div class=\"l8-title\">Level 8 Control Panel<\/div>\n        <div class=\"l8-sub\">\n          Manage Invitation, Preview, Packages \/ OPC, Rent Before Buying, Owners Club, City Cards, Exchange pins, and Trade posts.\n        <\/div>\n      <\/div>\n      <button class=\"l8-btn dark\" onclick=\"location.href='\/GGG\/owners-club\/'\">Back<\/button>\n    <\/div>\n\n    <div class=\"l8-grid\">\n      <div class=\"l8-card\">\n        <h3>Add \/ Edit Level 8 Item<\/h3>\n\n        <div class=\"l8-form\">\n          <input type=\"hidden\" id=\"l8Id\">\n\n          <div class=\"l8-field\">\n            <label>Name<\/label>\n            <input id=\"l8Name\" placeholder=\"Example: Bliss Internal Exchange Pin\">\n          <\/div>\n\n          <div class=\"l8-field\">\n            <label>Section<\/label>\n            <select id=\"l8Section\">\n              <option>Invitation<\/option>\n              <option>Preview<\/option>\n              <option>Packages \/ OPC<\/option>\n              <option>Rent Before Buying<\/option>\n              <option>Owners Club<\/option>\n              <option>City Cards<\/option>\n            <\/select>\n          <\/div>\n\n          <div class=\"l8-field\">\n            <label>Group<\/label>\n            <select id=\"l8Group\">\n              <option>Transportation<\/option>\n              <option>Accommodations<\/option>\n              <option>Entertainment<\/option>\n              <option>VIP<\/option>\n\n              <option>Intervals<\/option>\n              <option>Coins<\/option>\n              <option>City Card<\/option>\n              <option>Avatar<\/option>\n\n              <option>Use<\/option>\n              <option>Exchange<\/option>\n              <option>Trade<\/option>\n              <option>Buy<\/option>\n\n              <option>Air<\/option>\n              <option>Water<\/option>\n              <option>Earth \/ Land<\/option>\n              <option>Fire \/ VIP<\/option>\n\n              <option>Air Card<\/option>\n              <option>Water Card<\/option>\n              <option>Land Card<\/option>\n              <option>Food Card<\/option>\n            <\/select>\n          <\/div>\n\n          <div class=\"l8-field\">\n            <label>Suboption Key<\/label>\n            <select id=\"l8SuboptionKey\">\n              <option value=\"\">Choose key<\/option>\n\n              <option value=\"helicopter\">Transportation: Helicopter<\/option>\n              <option value=\"yacht\">Transportation: Yacht<\/option>\n              <option value=\"driver\">Transportation: Driver<\/option>\n              <option value=\"private-transport\">Transportation: Private Transport<\/option>\n\n              <option value=\"eco\">Accommodation: Eco<\/option>\n              <option value=\"mansion\">Accommodation: Mansion<\/option>\n              <option value=\"penthouse\">Accommodation: Penthouse<\/option>\n              <option value=\"villa\">Accommodation: Villa<\/option>\n\n              <option value=\"events\">Entertainment: Events<\/option>\n              <option value=\"nightlife\">Entertainment: Nightlife<\/option>\n              <option value=\"experiences\">Entertainment: Experiences<\/option>\n              <option value=\"private-access\">Entertainment: Private Access<\/option>\n\n              <option value=\"concierge\">VIP: Concierge<\/option>\n              <option value=\"security\">VIP: Security<\/option>\n              <option value=\"private-service\">VIP: Private Service<\/option>\n              <option value=\"drivers\">VIP: Drivers<\/option>\n\n              <option value=\"1day\">Intervals: 1 Day<\/option>\n              <option value=\"3days\">Intervals: 3 Days<\/option>\n              <option value=\"5days\">Intervals: 5 Days<\/option>\n              <option value=\"7days\">Intervals: 7 Days<\/option>\n\n              <option value=\"travel-essentials\">Coins: Travel Essentials<\/option>\n              <option value=\"eco-club\">Coins: Eco Club<\/option>\n              <option value=\"rent-points\">Coins: Rent Points<\/option>\n              <option value=\"exchange-value\">Coins: Exchange Value<\/option>\n\n              <option value=\"air-card\">City Card: Air<\/option>\n              <option value=\"water-card\">City Card: Water<\/option>\n              <option value=\"earth-card\">City Card: Earth<\/option>\n              <option value=\"fire-card\">City Card: Fire<\/option>\n\n              <option value=\"social-access\">Avatar: Social Access<\/option>\n              <option value=\"event-access\">Avatar: Event Access<\/option>\n              <option value=\"travel-club\">Avatar: Travel Club<\/option>\n              <option value=\"future-exchange\">Avatar: Future Exchange<\/option>\n\n              <option value=\"internal\">Exchange: Internal<\/option>\n              <option value=\"community\">Exchange: Community<\/option>\n              <option value=\"ownership\">Exchange: Ownership<\/option>\n              <option value=\"year\">Exchange: Year<\/option>\n\n              <option value=\"trade-post\">Trade: Post<\/option>\n              <option value=\"rooms\">Trade: Rooms<\/option>\n              <option value=\"day\">Trade: Day<\/option>\n              <option value=\"weekend\">Trade: Weekend<\/option>\n              <option value=\"week\">Trade: Week<\/option>\n\n              <option value=\"use-week\">Use: Week<\/option>\n              <option value=\"use-short-stay\">Use: Short Stay<\/option>\n              <option value=\"use-online\">Use: Online<\/option>\n              <option value=\"use-penthouse\">Use: Penthouse<\/option>\n\n              <option value=\"coins\">Buy: Coins<\/option>\n              <option value=\"weeks\">Buy: Weeks<\/option>\n              <option value=\"travelclub\">Buy: Travel Club<\/option>\n              <option value=\"citycard\">Buy: City Card<\/option>\n            <\/select>\n          <\/div>\n\n          <div class=\"l8-field full\">\n            <label>Main Image \/ Avatar URL<\/label>\n            <input id=\"l8ImageUrl\" placeholder=\"Paste WordPress image URL\">\n          <\/div>\n\n          <div class=\"l8-field full\">\n            <label>Gallery Image URLs<\/label>\n            <textarea id=\"l8GalleryUrls\" placeholder=\"One image URL per line\"><\/textarea>\n          <\/div>\n\n          <div class=\"l8-field\">\n            <label>Price<\/label>\n            <input id=\"l8Price\" placeholder=\"$25,000\">\n          <\/div>\n\n          <div class=\"l8-field\">\n            <label>Bliss Coin Value<\/label>\n            <input id=\"l8BlissCoinValue\" placeholder=\"2500 BC\">\n          <\/div>\n\n          <div class=\"l8-field\">\n            <label>Availability \/ Dates<\/label>\n            <input id=\"l8Availability\" placeholder=\"Available dates \/ weeks\">\n          <\/div>\n\n          <div class=\"l8-field\">\n            <label>Location \/ Host<\/label>\n            <input id=\"l8Location\" placeholder=\"Aparthotel Bliss \/ Guatap\u00e9\">\n          <\/div>\n\n          <div class=\"l8-field\">\n            <label>Status<\/label>\n            <select id=\"l8Status\">\n              <option value=\"active\">Active<\/option>\n              <option value=\"hidden\">Hidden<\/option>\n            <\/select>\n          <\/div>\n\n          <div class=\"l8-field\">\n            <label>Latitude<\/label>\n            <input id=\"l8Lat\" placeholder=\"6.24156\">\n          <\/div>\n\n          <div class=\"l8-field\">\n            <label>Longitude<\/label>\n            <input id=\"l8Lng\" placeholder=\"-75.22695\">\n          <\/div>\n\n          <div class=\"l8-field full\">\n            <label>Website URL<\/label>\n            <input id=\"l8WebsiteUrl\" placeholder=\"https:\/\/...\">\n          <\/div>\n\n          <div class=\"l8-field full\">\n            <label>Reserve \/ Request URL<\/label>\n            <input id=\"l8ReserveUrl\" placeholder=\"https:\/\/...\">\n          <\/div>\n\n          <div class=\"l8-field full\">\n            <label>Google Map Link<\/label>\n            <input id=\"l8MapUrl\" placeholder=\"https:\/\/maps.google.com\/...\">\n          <\/div>\n\n          <div class=\"l8-field full\">\n            <label>Description \/ Offer<\/label>\n            <textarea id=\"l8Description\" placeholder=\"What they offer, what they want, or item description\"><\/textarea>\n          <\/div>\n\n          <div class=\"l8-field full\">\n            <label>Highlights \/ Wants<\/label>\n            <textarea id=\"l8Highlights\" placeholder=\"One highlight per line. For Exchange\/Trade, include what they want.\"><\/textarea>\n          <\/div>\n\n          <div class=\"l8-field full\">\n            <label><input type=\"checkbox\" id=\"l8Featured\"> Featured item \/ pin<\/label>\n          <\/div>\n        <\/div>\n\n        <br>\n        <button class=\"l8-btn\" onclick=\"l8SaveItem()\">Save Item<\/button>\n        <button class=\"l8-btn dark\" onclick=\"l8ResetForm()\">Clear<\/button>\n      <\/div>\n\n      <div class=\"l8-card\">\n        <h3>Current Level 8 Inventory<\/h3>\n\n        <div class=\"l8-filterRow\">\n          <select id=\"l8FilterSection\" onchange=\"l8Render()\">\n            <option value=\"\">All Sections<\/option>\n            <option>Invitation<\/option>\n            <option>Preview<\/option>\n            <option>Packages \/ OPC<\/option>\n            <option>Rent Before Buying<\/option>\n            <option>Owners Club<\/option>\n            <option>City Cards<\/option>\n          <\/select>\n\n          <select id=\"l8FilterGroup\" onchange=\"l8Render()\">\n            <option value=\"\">All Groups<\/option>\n            <option>Transportation<\/option>\n            <option>Accommodations<\/option>\n            <option>Entertainment<\/option>\n            <option>VIP<\/option>\n            <option>Intervals<\/option>\n            <option>Coins<\/option>\n            <option>City Card<\/option>\n            <option>Avatar<\/option>\n            <option>Exchange<\/option>\n            <option>Trade<\/option>\n            <option>Use<\/option>\n            <option>Buy<\/option>\n            <option>Air<\/option>\n            <option>Water<\/option>\n            <option>Earth \/ Land<\/option>\n            <option>Fire \/ VIP<\/option>\n          <\/select>\n\n          <input id=\"l8Search\" oninput=\"l8Render()\" placeholder=\"Search name\/location\">\n        <\/div>\n\n        <div id=\"l8List\">Loading...<\/div>\n        <br>\n        <button class=\"l8-btn\" onclick=\"l8SaveAll()\">Save All Changes<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  const params = new URLSearchParams(window.location.search);\n  if(params.get(\"level8panel\") === \"1\"){\n    document.getElementById(\"gggL8Panel\").style.display = \"block\";\n    document.body.style.overflow = \"hidden\";\n  }\n})();\n\nconst L8_AJAX = \"\/GGG\/wp-admin\/admin-ajax.php\";\nlet l8Items = [];\n\nfunction l8Escape(str){\n  return String(str || \"\")\n    .replaceAll(\"&\",\"&amp;\")\n    .replaceAll(\"<\",\"&lt;\")\n    .replaceAll(\">\",\"&gt;\")\n    .replaceAll('\"',\"&quot;\")\n    .replaceAll(\"'\",\"&#039;\");\n}\n\nfunction l8GetForm(){\n  return {\n    id: document.getElementById(\"l8Id\").value || (\"l8_\" + Date.now()),\n    name: document.getElementById(\"l8Name\").value,\n    section: document.getElementById(\"l8Section\").value,\n    group: document.getElementById(\"l8Group\").value,\n    suboptionKey: document.getElementById(\"l8SuboptionKey\").value,\n    imageUrl: document.getElementById(\"l8ImageUrl\").value,\n    galleryUrls: document.getElementById(\"l8GalleryUrls\").value,\n    price: document.getElementById(\"l8Price\").value,\n    blissCoinValue: document.getElementById(\"l8BlissCoinValue\").value,\n    availability: document.getElementById(\"l8Availability\").value,\n    location: document.getElementById(\"l8Location\").value,\n    lat: document.getElementById(\"l8Lat\").value,\n    lng: document.getElementById(\"l8Lng\").value,\n    websiteUrl: document.getElementById(\"l8WebsiteUrl\").value,\n    reserveUrl: document.getElementById(\"l8ReserveUrl\").value,\n    mapUrl: document.getElementById(\"l8MapUrl\").value,\n    description: document.getElementById(\"l8Description\").value,\n    highlights: document.getElementById(\"l8Highlights\").value,\n    status: document.getElementById(\"l8Status\").value,\n    featured: document.getElementById(\"l8Featured\").checked ? 1 : 0\n  };\n}\n\nfunction l8SetForm(item){\n  document.getElementById(\"l8Id\").value = item.id || \"\";\n  document.getElementById(\"l8Name\").value = item.name || \"\";\n  document.getElementById(\"l8Section\").value = item.section || \"Invitation\";\n  document.getElementById(\"l8Group\").value = item.group || \"Accommodations\";\n  document.getElementById(\"l8SuboptionKey\").value = item.suboptionKey || \"\";\n  document.getElementById(\"l8ImageUrl\").value = item.imageUrl || \"\";\n  document.getElementById(\"l8GalleryUrls\").value = item.galleryUrls || \"\";\n  document.getElementById(\"l8Price\").value = item.price || \"\";\n  document.getElementById(\"l8BlissCoinValue\").value = item.blissCoinValue || \"\";\n  document.getElementById(\"l8Availability\").value = item.availability || \"\";\n  document.getElementById(\"l8Location\").value = item.location || \"\";\n  document.getElementById(\"l8Lat\").value = item.lat || \"\";\n  document.getElementById(\"l8Lng\").value = item.lng || \"\";\n  document.getElementById(\"l8WebsiteUrl\").value = item.websiteUrl || \"\";\n  document.getElementById(\"l8ReserveUrl\").value = item.reserveUrl || \"\";\n  document.getElementById(\"l8MapUrl\").value = item.mapUrl || \"\";\n  document.getElementById(\"l8Description\").value = item.description || \"\";\n  document.getElementById(\"l8Highlights\").value = item.highlights || \"\";\n  document.getElementById(\"l8Status\").value = item.status || \"active\";\n  document.getElementById(\"l8Featured\").checked = !!Number(item.featured || 0);\n}\n\nfunction l8ResetForm(){ l8SetForm({}); }\n\nfunction l8SaveItem(){\n  const item = l8GetForm();\n\n  if(!item.name){\n    alert(\"Add a name first.\");\n    return;\n  }\n\n  const index = l8Items.findIndex(x => x.id === item.id);\n\n  if(index >= 0){\n    l8Items[index] = item;\n  }else{\n    l8Items.push(item);\n  }\n\n  l8Render();\n  l8SaveAll();\n  l8ResetForm();\n}\n\nfunction l8Edit(id){\n  const item = l8Items.find(x => x.id === id);\n  if(item) l8SetForm(item);\n}\n\nfunction l8Delete(id){\n  if(!confirm(\"Delete this Level 8 item?\")) return;\n  l8Items = l8Items.filter(x => x.id !== id);\n  l8Render();\n  l8SaveAll();\n}\n\nfunction l8Render(){\n  const list = document.getElementById(\"l8List\");\n  const fs = document.getElementById(\"l8FilterSection\")?.value || \"\";\n  const fg = document.getElementById(\"l8FilterGroup\")?.value || \"\";\n  const search = (document.getElementById(\"l8Search\")?.value || \"\").toLowerCase();\n\n  let items = l8Items.slice();\n\n  if(fs) items = items.filter(x => x.section === fs);\n  if(fg) items = items.filter(x => x.group === fg);\n  if(search){\n    items = items.filter(x =>\n      String(x.name || \"\").toLowerCase().includes(search) ||\n      String(x.location || \"\").toLowerCase().includes(search) ||\n      String(x.section || \"\").toLowerCase().includes(search) ||\n      String(x.group || \"\").toLowerCase().includes(search) ||\n      String(x.suboptionKey || \"\").toLowerCase().includes(search)\n    );\n  }\n\n  if(!items.length){\n    list.innerHTML = \"<p style='color:#cbd5e1'>No matching Level 8 items.<\/p>\";\n    return;\n  }\n\n  list.innerHTML = items.map(item => {\n    const id = l8Escape(item.id);\n    const img = l8Escape(item.imageUrl || \"\");\n    const featured = Number(item.featured || 0) ? \" \u2022 Featured\" : \"\";\n\n    return `\n      <div class=\"l8-item\">\n        <div class=\"l8-thumb\" style=\"background-image:url('${img}')\"><\/div>\n        <div>\n          <div class=\"l8-name\">${l8Escape(item.name || \"Unnamed Item\")}<\/div>\n          <div class=\"l8-meta\">${l8Escape(item.section || \"\")} \u2022 ${l8Escape(item.group || \"\")} \u2022 ${l8Escape(item.suboptionKey || \"\")}<\/div>\n          <div class=\"l8-meta\">${l8Escape(item.location || \"\")}${item.availability ? \" \u2022 \" + l8Escape(item.availability) : \"\"}<\/div>\n          <span class=\"l8-badge\">${l8Escape(item.status || \"active\")}${featured}<\/span>\n        <\/div>\n        <div class=\"l8-actions\">\n          <button class=\"l8-btn dark\" onclick=\"l8Edit('${id}')\">Edit<\/button>\n          <button class=\"l8-btn dark\" onclick=\"l8Delete('${id}')\">Delete<\/button>\n        <\/div>\n      <\/div>\n    `;\n  }).join(\"\");\n}\n\nfunction l8Load(){\n  const fd = new FormData();\n  fd.append(\"action\", \"ggg_l8_get_inventory\");\n\n  fetch(L8_AJAX, {method:\"POST\", credentials:\"same-origin\", body:fd})\n    .then(r => r.json())\n    .then(data => {\n      l8Items = data?.data?.items || [];\n      l8Render();\n    })\n    .catch(() => {\n      document.getElementById(\"l8List\").innerHTML = \"Could not load inventory.\";\n    });\n}\n\nfunction l8SaveAll(){\n  const fd = new FormData();\n  fd.append(\"action\", \"ggg_l8_save_inventory\");\n  fd.append(\"items\", JSON.stringify(l8Items));\n\n  fetch(L8_AJAX, {method:\"POST\", credentials:\"same-origin\", body:fd})\n    .then(r => r.json())\n    .then(data => {\n      if(!data.success){\n        alert(data?.data?.message || \"Save failed.\");\n      }\n    });\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", l8Load);\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc51 Owners Club \ud83d\udcb3 Week Short Stay Online Penthouse Use Internally Community Year Ownership Exchange Rooms Day Weekend Week Trade Weeks Bliss Coin Travel Club City Card Buy \ud83d\udcb3 Pay with Bliss Coin Enter your digital wallet #: Send payment to: HOST-WALLET-ADDRESS-123 Close \ud83e\uddca \ud83d\udc96 Sign In \/ Sign Up My Favorites Close Show on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3240","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages\/3240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/comments?post=3240"}],"version-history":[{"count":80,"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages\/3240\/revisions"}],"predecessor-version":[{"id":8547,"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages\/3240\/revisions\/8547"}],"wp:attachment":[{"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/media?parent=3240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}