{"id":3238,"date":"2025-07-11T00:59:03","date_gmt":"2025-07-11T00:59:03","guid":{"rendered":"https:\/\/godsgalaxygame.com\/GGG\/?page_id=3238"},"modified":"2026-09-08T02:56:53","modified_gmt":"2026-09-08T02:56:53","slug":"rent-before-buying","status":"publish","type":"page","link":"https:\/\/godsgalaxygame.com\/GGG\/rent-before-buying\/","title":{"rendered":"Rent Before Buying"},"content":{"rendered":"\r\n<!-- ===== RENT B4 BUY \u2014 STARFIELD BACKGROUND (behind cube + map) ===== -->\r\n<canvas id=\"rbStarfield\" aria-hidden=\"true\"><\/canvas>\r\n\r\n<style>\r\n  \/* Fullscreen background behind everything on this page\/block *\/\r\n  #rbStarfield{\r\n    position: fixed;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    display: block;\r\n    z-index: 0;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* Make sure your UI stays above the starfield *\/\r\n  #rentb4buyContainer{ position: relative; z-index: 5; }\r\n\r\n  \/* Optional: keep page dark *\/\r\n  body{ background:#000; }\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const c = document.getElementById('rbStarfield');\r\n  if(!c) return;\r\n  const ctx = c.getContext('2d');\r\n\r\n  let W=0, H=0, dpr=1, stars=[], meteors=[];\r\n  let rafId=null, running=true;\r\n\r\n  function resize(){\r\n    dpr = Math.max(1, Math.min(2, window.devicePixelRatio||1));\r\n    W = c.width  = Math.floor(innerWidth  * dpr);\r\n    H = c.height = Math.floor(innerHeight * dpr);\r\n    c.style.width  = innerWidth  + 'px';\r\n    c.style.height = innerHeight + 'px';\r\n    buildStars();\r\n  }\r\n\r\n  function buildStars(){\r\n    const count = Math.floor((W*H) \/ (14000*dpr));\r\n    stars = Array.from({length: count}, () => ({\r\n      x: Math.random()*W,\r\n      y: Math.random()*H,\r\n      r: (Math.random()*1.2+0.4)*dpr,\r\n      a: Math.random()*1\r\n    }));\r\n  }\r\n\r\n  function spawnMeteor(){\r\n    const startX = Math.random()<0.5 ? -50*dpr : W+50*dpr;\r\n    const dir = startX<0 ? 1 : -1;\r\n    const startY = Math.random()*H*0.6 + H*0.1;\r\n    meteors.push({ x:startX, y:startY, vx: dir*(3.2*dpr), vy: 1.2*dpr, life: 0, max: 1600 });\r\n  }\r\n\r\n  let last=0, accum=0;\r\n  function tick(ts){\r\n    if(!running) return;\r\n    const dt = Math.min(33, ts-last || 16); last=ts; accum+=dt;\r\n    if (accum>900+Math.random()*900) { spawnMeteor(); accum=0; }\r\n\r\n    ctx.setTransform(1,0,0,1,0,0);\r\n    ctx.clearRect(0,0,W,H);\r\n\r\n    \/\/ subtle cyan nebula glow\r\n    const g = ctx.createRadialGradient(W\/2,H*0.15,0, W\/2,H*0.4, Math.hypot(W,H)\/1.4);\r\n    g.addColorStop(0,'rgba(0,220,255,0.10)');\r\n    g.addColorStop(1,'rgba(0,0,0,0)');\r\n    ctx.fillStyle=g; ctx.fillRect(0,0,W,H);\r\n\r\n    \/\/ twinkle\r\n    for(const s of stars){\r\n      s.a += (Math.random()*0.06-0.03);\r\n      const a = 0.35+0.35*Math.sin(s.a);\r\n      ctx.fillStyle = `rgba(200,245,255,${a})`;\r\n      ctx.beginPath(); ctx.arc(s.x,s.y,s.r,0,Math.PI*2); ctx.fill();\r\n    }\r\n\r\n    \/\/ meteors\r\n    for (let i=meteors.length-1;i>=0;i--){\r\n      const m = meteors[i];\r\n      m.x += m.vx; m.y += m.vy; m.life += dt;\r\n\r\n      const trailX = m.x - m.vx*6;\r\n      const trailY = m.y - m.vy*6;\r\n      const grad = ctx.createLinearGradient(m.x,m.y, trailX,trailY);\r\n      grad.addColorStop(0,'rgba(0,255,255,0.9)');\r\n      grad.addColorStop(1,'rgba(0,255,255,0)');\r\n      ctx.strokeStyle = grad; ctx.lineWidth = 2*dpr; ctx.lineCap='round';\r\n      ctx.beginPath(); ctx.moveTo(m.x,m.y); ctx.lineTo(trailX, trailY); ctx.stroke();\r\n\r\n      if (m.x<-200*dpr || m.x>W+200*dpr || m.y>H+200*dpr || m.life>m.max){\r\n        meteors.splice(i,1);\r\n      }\r\n    }\r\n\r\n    rafId = requestAnimationFrame(tick);\r\n  }\r\n\r\n  \/\/ Optional: expose a tiny controller (if you ever want to pause it)\r\n  window.rbStarfieldControl = {\r\n    pause(){ running=false; if(rafId) cancelAnimationFrame(rafId); },\r\n    play(){ if(running) return; running=true; last=0; accum=0; rafId=requestAnimationFrame(tick); }\r\n  };\r\n\r\n  addEventListener('resize', resize, {passive:true});\r\n  resize(); rafId = requestAnimationFrame(tick);\r\n})();\r\n<\/script>\r\n<!-- ===== end RENT B4 BUY starfield ===== -->\r\n\r\n\r\n\r\n<!-- BLOQUE 2 - Rent Before Buying Cube V19 Completo + Mapa Circular + API -->\r\n<style>\r\n  @media (max-width: 768px) {\r\n    #glowMapContainer {\r\n      margin-top: -50px !important;\r\n    }\r\n  }\r\n<\/style>\r\n<div id=\"rentb4buyContainer\" style=\"opacity:1; pointer-events: auto; transition: opacity 0.6s ease;\">\r\n  <!-- ESCENA CUBO -->\r\n  <div class=\"cube-scene\" style=\"width:180px; height:180px; perspective:1000px; position:fixed; bottom:20px; left:20px; z-index:1000;\">\r\n    <div class=\"cube\" id=\"rentb4buyCube\" style=\"width:100%; height:100%; position:relative; transform-style:preserve-3d; transform:rotateX(0deg) rotateY(0deg); transition:transform 0.3s ease;\">\r\n   <!-- FRONT -->\r\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;\">\r\n        <div style=\"font-size:42px; color:white; text-shadow:0 0 15px white;\">\ud83d\udcab<\/div>\r\n        <div style=\"font-size:16px; color:white; font-weight:bold; text-shadow:0 0 10px white; margin-top:6px;\">Rent B4 Buying<\/div>\r\n      <\/div>\r\n\r\n      <!-- Cara Trasera del Cubo: Transportation -->\r\n<!-- Back Face - Transportation Cube - Nuevo Dise\u00f1o con Botones Circulares -->\r\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;\">\r\n\r\n  <!-- Sol central -->\r\n  <img decoding=\"async\" src=\"http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/06\/1000065346-scaled.jpg\"\r\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;\" \/>\r\n\r\n  <!-- Reserve -->\r\n  <a href=\"https:\/\/godsgalaxygame.com\/GGG\/fractional-ownership\/?fractional=1\" target=\"_blank\"\r\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;\"\r\n     title=\"Reserve\"><\/a>\r\n\r\n  <!-- Bliss Coin -->\r\n  <div onclick=\"openBlissCoinPopup()\"\r\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;\"\r\n       title=\"Pay with Bliss Coin\">\ud83d\udcb3<\/div>\r\n\r\n  <!-- Coupon Button (Bottom-Left Corner) -->\r\n<a href=\"https:\/\/godsgalaxygame.com\/GGG\/discounts-gift\/\"\r\n   target=\"_blank\"\r\n   style=\"position: absolute;\r\n          bottom: 8px;\r\n          left: 8px;\r\n          width: 44px;\r\n          height: 44px;\r\n          border-radius: 50%;\r\n          background-image: url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/06\/Screenshot_20240108-225546_Chrome.jpg');\r\n          background-size: cover;\r\n          box-shadow: 0 0 12px cyan;\r\n          cursor: pointer;\"\r\n   title=\"Get Coupons\">\r\n<\/a>\r\n\r\n  <!-- Become a Host -->\r\n  <a href=\"https:\/\/luxus2.godaddysites.com\/\" target=\"_blank\"\r\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;\"\r\n     title=\"Become a Host\"><\/a>\r\n<\/div>\r\n\r\n\r\n\r\n      <!-- RIGHT (Intervals) -->\r\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;\">\r\n        <button onclick=\"showHostButtons('interv-1day')\" style=\"position:absolute; top:8px; left:27px; width:126px; height:17px; border:1px solid beige; color:white; background:transparent;\">1 Day<\/button>\r\n        <button onclick=\"showHostButtons('interv-3day')\" style=\"position:absolute; bottom:8px; left:27px; width:126px; height:17px; border:1px solid beige; color:white; background:transparent;\">3 Days<\/button>\r\n        <button onclick=\"showHostButtons('interv-5day')\" style=\"position:absolute; top:27px; left:8px; height:126px; width:17px; border:1px solid beige; color:white; writing-mode:vertical-rl; background:transparent;\">5 Days<\/button>\r\n        <button onclick=\"showHostButtons('interv-1wk')\" style=\"position:absolute; top:27px; right:8px; height:126px; width:17px; border:1px solid beige; color:white; writing-mode:vertical-lr; background:transparent;\">1 Week<\/button>\r\n        <div style=\"position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;\">\r\n          <div style=\"color:beige; font-size:16px; font-weight:bold;\">Intervals<\/div>\r\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;\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- LEFT (Coins) -->\r\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;\">\r\n        <button onclick=\"showHostButtons('coins-te')\" style=\"position:absolute; top:8px; left:27px; width:126px; height:17px; border:1px solid #00ccff; color:white; background:transparent;\">Travel Essentials<\/button>\r\n        <button onclick=\"showHostButtons('coins-points')\" style=\"position:absolute; bottom:8px; left:27px; width:126px; height:17px; border:1px solid #00ccff; color:white; background:transparent;\">Points<\/button>\r\n        <button onclick=\"showHostButtons('coins-exchange')\" style=\"position:absolute; top:27px; left:8px; height:126px; width:17px; border:1px solid #00ccff; color:white; writing-mode:vertical-rl; background:transparent;\">Exchange<\/button>\r\n        <button onclick=\"showHostButtons('coins-eco')\" style=\"position:absolute; top:27px; right:8px; height:126px; width:17px; border:1px solid #00ccff; color:white; writing-mode:vertical-lr; background:transparent;\">Eco Club<\/button>\r\n        <div style=\"position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;\">\r\n          <div style=\"color:#00ccff; font-size:16px; font-weight:bold;\">Coins<\/div>\r\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;\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- TOP (City Card) -->\r\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;\">\r\n        <button onclick=\"showHostButtons('city-air')\" style=\"position:absolute; top:8px; left:27px; width:126px; height:17px; border:1px solid green; color:white; background:transparent;\">Air<\/button>\r\n        <button onclick=\"showHostButtons('city-water')\" style=\"position:absolute; bottom:8px; left:27px; width:126px; height:17px; border:1px solid green; color:white; background:transparent;\">Water<\/button>\r\n        <button onclick=\"showHostButtons('city-land')\" style=\"position:absolute; top:27px; left:8px; height:126px; width:17px; border:1px solid green; color:white; writing-mode:vertical-rl; background:transparent;\">Land<\/button>\r\n        <button onclick=\"showHostButtons('city-food')\" style=\"position:absolute; top:27px; right:8px; height:126px; width:17px; border:1px solid green; color:white; writing-mode:vertical-lr; background:transparent;\">Food<\/button>\r\n        <div style=\"position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;\">\r\n          <div style=\"color:#33ff33; font-size:16px; font-weight:bold;\">City Card<\/div>\r\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;\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- BOTTOM (Avatar) -->\r\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;\">\r\n        <button onclick=\"showHostButtons('avatar-exchange')\" style=\"position:absolute; top:8px; left:27px; width:126px; height:17px; border:1px solid red; color:white; background:transparent;\">Exchange<\/button>\r\n        <button onclick=\"showHostButtons('avatar-socialize')\" style=\"position:absolute; bottom:8px; left:27px; width:126px; height:17px; border:1px solid red; color:white; background:transparent;\">Socialize<\/button>\r\n        <button onclick=\"showHostButtons('avatar-events')\" style=\"position:absolute; top:27px; left:8px; height:126px; width:17px; border:1px solid red; color:white; writing-mode:vertical-rl; background:transparent;\">Events<\/button>\r\n        <button onclick=\"showHostButtons('avatar-tc')\" style=\"position:absolute; top:27px; right:8px; height:126px; width:17px; border:1px solid red; color:white; writing-mode:vertical-lr; background:transparent;\">Travel Club<\/button>\r\n        <div style=\"position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;\">\r\n          <div style=\"color:red; font-size:16px; font-weight:bold;\">Avatar<\/div>\r\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;\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- MAPA CIRCULAR -->\r\n  <div id=\"glowMapContainer\" style=\"opacity:1; pointer-events:auto; transition: opacity 0.6s ease; margin: 0 auto; margin-top: -95px; 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;\">\r\n    <div id=\"googleMap\" style=\"width:100%; height:100%;\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- Google Maps API (clave v\u00e1lida y correcta) -->\r\n<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyDLPhx98z9AgoqXS6VeoESE9NV6URuOhiE&#038;callback=initMap\" async defer><\/script>\r\n\r\n<script>\r\n  function activaterentb4buyCube() {\r\n    \/\/ Oculta el grid de opciones\r\n    const rrGrid = document.getElementById(\"rrGrid\");\r\n    if (rrGrid) {\r\n      rrGrid.style.display = \"none\";\r\n    }\r\n\r\n    \/\/ Muestra el contenedor del cubo Rent Before Buying\r\n    const container = document.getElementById(\"rentb4buyContainer\");\r\n    if (container) {\r\n      container.style.opacity = \"1\";\r\n      container.style.pointerEvents = \"auto\";\r\n    }\r\n\r\n    \/\/ Muestra el mapa\r\n    const map = document.getElementById(\"glowMapContainer\");\r\n    if (map) {\r\n      map.style.opacity = \"1\";\r\n      map.style.pointerEvents = \"auto\";\r\n    }\r\n\r\n    \/\/ Reinicia el mapa si es necesario\r\n    if (typeof initMap === \"function\") {\r\n      initMap();\r\n    }\r\n  }\r\n<\/script>\r\n<script>\r\n  function initMap() {\r\n    const location = { lat: 6.25184, lng: -75.56359 }; \/\/ Puedes cambiar esto a tu zona de inter\u00e9s\r\n\r\n    const map = new google.maps.Map(document.getElementById(\"googleMap\"), {\r\n      zoom: 14,\r\n      center: location,\r\n      mapTypeId: google.maps.MapTypeId.HYBRID, \/\/ Aqu\u00ed activas el modo hybrid\r\n    });\r\n\r\n    new google.maps.Marker({\r\n      position: location,\r\n      map: map,\r\n      title: \"Ubicaci\u00f3n Principal\",\r\n    });\r\n  }\r\n<\/script>\r\n\r\n<!-- POP-UP para Bliss Coin -->\r\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;\">\r\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;\">\r\n    <h3 style=\"font-size:18px;\">\ud83d\udcb3 Pay with Bliss Coin<\/h3>\r\n    <p style=\"font-size:14px;\">Enter your digital wallet #:<\/p>\r\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;\" \/>\r\n    <p style=\"margin-top:14px;\">Send payment to:<\/p>\r\n    <div style=\"margin:8px auto; padding:6px; background:#222; border:1px solid cyan; border-radius:8px;\">\r\n      <code style=\"font-size:13px;\">HOST-WALLET-ADDRESS-123<\/code>\r\n    <\/div>\r\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;\">\r\n      Close\r\n    <\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  function openBlissCoinPopup() {\r\n    document.getElementById('blissCoinPopup').style.display = 'flex';\r\n  }\r\n  function closeBlissCoinPopup() {\r\n    document.getElementById('blissCoinPopup').style.display = 'none';\r\n  }\r\n<\/script>\r\n\r\n\r\n\r\n<!-- BLOQUE 3 \u2013 Movimiento + Swipe + SignIn + Favoritos (First You) -->\r\n\r\n<!-- ESTILOS -->\r\n<style>\r\n  #floatingButtons {\r\n    position: fixed;\r\n    top: 14px;\r\n    right: 14px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    gap: 10px;\r\n    z-index: 3000;\r\n  }\r\n\r\n  #favoritesBtn, #signinBtn {\r\n    font-size: 15px;\r\n    padding: 6px 10px;\r\n    border-radius: 8px;\r\n    border: 2px solid white;\r\n    color: white;\r\n    background: rgba(0, 0, 0, 0.6);\r\n    cursor: pointer;\r\n    box-shadow: 0 0 8px cyan;\r\n    font-family: Orbitron;\r\n  }\r\n\r\n  #favoritesBtn:hover::after {\r\n    content: ' Double click a Host to add \ud83d\udc98';\r\n    font-size: 10px;\r\n    margin-left: 8px;\r\n    color: cyan;\r\n  }\r\n\r\n  #cityCardBtn {\r\n    width: 39px;\r\n    height: 39px;\r\n    border-radius: 50%;\r\n    border: 2px solid #ffffffaa;\r\n    background: rgba(0,0,0,0.65);\r\n    color: #fff;\r\n    font-size: 11px;\r\n    font-family: 'Orbitron', system-ui, sans-serif;\r\n    letter-spacing: 1px;\r\n    cursor: pointer;\r\n    box-shadow: 0 0 10px cyan;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    transition: 0.25s ease;\r\n  }\r\n  #cityCardBtn:hover {\r\n    box-shadow: 0 0 16px cyan;\r\n    transform: translateY(-1px);\r\n  }\r\n\r\n\r\n#pyramidBtn {\r\n    width: 38px;\r\n    height: 38px;\r\n    background-color: black;\r\n    border: 2px solid white;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 10px cyan; \/* glow *\/\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 20px; \/* emoji size *\/\r\n    cursor: pointer;\r\n    margin-top: 2px; \/* align with rose *\/\r\n  }\r\n\r\n  #pyramidBtn:hover {\r\n    transform: scale(1.2);\r\n  }\r\n\r\n#roseBtn {\r\n  width: 38px;\r\n  height: 38px;\r\n  background-color: black; \/* Keep black background *\/\r\n  background-image: url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/07\/ChatGPT-Image-Jul-7-2025-05_11_38-PM.png');\r\n  background-size: cover;\r\n  background-position: center;\r\n  border: 2px solid white; \/* Optional white border *\/\r\n  border-radius: 50%;\r\n  box-shadow: 0 0 10px white; \/* White glow around the button *\/\r\n  cursor: pointer;\r\n  margin-top: 2px; \/* Adjust position to align with others *\/\r\n}\r\n\r\n#roseBtn:hover {\r\n  transform: scale(1.2);\r\n}\r\n\r\n  #signinBtn:hover::after {\r\n    content: ' Sign in to save your Favorites';\r\n    font-size: 10px;\r\n    margin-left: 8px;\r\n    color: cyan;\r\n  }\r\n\r\n  #swipeImage {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 160px;\r\n    z-index: 1200;\r\n    display: none;\r\n  }\r\n#swipeImage {\r\n  display: none !important;\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- BOTONES FLOTANTES -->\r\n<div id=\"floatingButtons\">\r\n<button id=\"cityCardBtn\" class=\"ggg-icon-btn\" title=\"City Card\">\r\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%;\">\r\n<\/button>\r\n<button\r\n    id=\"pyramidBtn\"\r\n    title=\"Back to MedaYork Pyramid\"\r\n    onclick=\"window.location.href='https:\/\/godsgalaxygame.com\/GGG\/medayork-pyramid-2\/';\">\r\n    \ud83e\uddca\r\n  <\/button>\r\n<button id=\"roseBtn\"><\/button>\r\n\r\n  <button id=\"favoritesBtn\">\ud83d\udc96<\/button>\r\n  <button id=\"signinBtn\">Sign In \/ Sign Up<\/button>\r\n<\/div>\r\n\r\n<!-- IMAGEN DE SWIPE -->\r\n<img decoding=\"async\" id=\"swipeImage\" src=\"https:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/06\/Screenshot_20250627_154147_Gallery.jpg\" alt=\"Swipe\" \/>\r\n\r\n<!-- SCRIPT DE FUNCIONALIDAD -->\r\n<script>\r\n  \/\/ Movimiento del cubo Rent Before Buying\r\n  let isDragging = false, startX, startY, rotateX = 0, rotateY = 0;\r\n  const cube = document.getElementById('rentb4buyCube');\r\n\r\n  function updateRotation(x, y) {\r\n    cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg)`;\r\n  }\r\n\r\n  function onMouseDown(e) {\r\n    isDragging = true;\r\n    startX = e.clientX;\r\n    startY = e.clientY;\r\n  }\r\n\r\n  function onMouseMove(e) {\r\n    if (!isDragging) return;\r\n    const deltaX = e.clientX - startX;\r\n    const deltaY = e.clientY - startY;\r\n    rotateY += deltaX * 0.5;\r\n    rotateX -= deltaY * 0.5;\r\n    updateRotation(rotateX, rotateY);\r\n    startX = e.clientX;\r\n    startY = e.clientY;\r\n  }\r\n\r\n  function onMouseUp() {\r\n    isDragging = false;\r\n  }\r\n\r\n  function onTouchStart(e) {\r\n    isDragging = true;\r\n    startX = e.touches[0].clientX;\r\n    startY = e.touches[0].clientY;\r\n  }\r\n\r\n  function onTouchMove(e) {\r\n    if (!isDragging) return;\r\n    const deltaX = e.touches[0].clientX - startX;\r\n    const deltaY = e.touches[0].clientY - startY;\r\n    rotateY += deltaX * 0.5;\r\n    rotateX -= deltaY * 0.5;\r\n    updateRotation(rotateX, rotateY);\r\n    startX = e.touches[0].clientX;\r\n    startY = e.touches[0].clientY;\r\n  }\r\n\r\n  function onTouchEnd() {\r\n    isDragging = false;\r\n  }\r\n\r\n  const cubeContainer = document.querySelector('.cube-scene');\r\n  if (cubeContainer) {\r\n    cubeContainer.addEventListener('mousedown', onMouseDown);\r\n    window.addEventListener('mousemove', onMouseMove);\r\n    window.addEventListener('mouseup', onMouseUp);\r\n    cubeContainer.addEventListener('touchstart', onTouchStart);\r\n    window.addEventListener('touchmove', onTouchMove);\r\n    window.addEventListener('touchend', onTouchEnd);\r\n  }\r\n\r\n  \/\/ Swipe image cuando aparece el cubo\r\n  const observer = new MutationObserver(() => {\r\n    const rentb4buy = document.getElementById('rentb4buyCubeContainer');\r\n    if (rentb4buy && rentb4buy.style.opacity === \"1\") {\r\n      const swipe = document.getElementById('swipeImage');\r\n      swipe.style.display = 'block';\r\n      setTimeout(() => {\r\n        swipe.style.display = 'none';\r\n      }, 3500);\r\n      observer.disconnect();\r\n    }\r\n  });\r\n  observer.observe(document.body, { childList: true, subtree: true });\r\n\r\n  \/\/ Sistema de favoritos \ud83d\udc96 \u2192 \ud83d\udc98\r\n  const favorites = [];\r\n\r\n  function toggleFavorite(id, imgUrl, mapLat, mapLng) {\r\n    if (!favorites.some(f => f.id === id)) {\r\n      favorites.push({ id, imgUrl, lat: mapLat, lng: mapLng });\r\n      document.getElementById(\"favoritesBtn\").textContent = \"\ud83d\udc98\";\r\n      console.log(\"Favorito agregado:\", id);\r\n    }\r\n  }\r\n\r\n  function clearFavorites() {\r\n    favorites.length = 0;\r\n    document.getElementById(\"favoritesBtn\").textContent = \"\ud83d\udc96\";\r\n  }\r\n\r\n  function focusOnHost(lat, lng) {\r\n    if (window.ggMap) {\r\n      window.ggMap.setCenter({ lat, lng });\r\n      window.ggMap.setZoom(15);\r\n      new google.maps.Marker({ position: { lat, lng }, map: window.ggMap });\r\n    }\r\n  }\r\n\r\n  document.getElementById(\"favoritesBtn\").addEventListener(\"click\", () => {\r\n    if (favorites.length === 0) return;\r\n    document.querySelectorAll('.host-circle').forEach(btn => btn.style.display = 'none');\r\n    favorites.forEach(fav => {\r\n      const existing = document.querySelector(`.${fav.id}`);\r\n      if (existing) existing.style.display = 'inline-block';\r\n    });\r\n  });\r\n<\/script>\r\n\r\n\r\n\r\n<!-- HOST CIRCLES \u2014 CSS (Accommodations) -->\r\n<style>\r\n  #hostButtons{\r\n    display:none;                 \/* hidden until a sub-option is clicked *\/\r\n    position:absolute;\r\n    top:50%; left:50%;\r\n    transform:translate(-50%,-50%);\r\n    width:100%; max-width:500px; height:500px;\r\n    pointer-events:none;          \/* turned ON in JS when shown *\/\r\n    z-index:3000;\r\n  }\r\n\r\n  \/* buttons *\/\r\n  #hostButtons .host-circle{\r\n    width:80px; height:80px; border-radius:50%;\r\n    border:2px solid #fff; box-shadow:0 0 14px #fff;\r\n    background-size:cover; background-position:center;\r\n    position:absolute; pointer-events:auto; cursor:pointer;\r\n    transition:transform .3s, box-shadow .3s;\r\n  }\r\n  #hostButtons .host-circle:hover{ transform:scale(1.15); box-shadow:0 0 20px cyan; }\r\n\r\n  \/* desktop placement (around the circle) *\/\r\n  #hostButtons .one    { top:4%;    left:10%; }\r\n  #hostButtons .five   { top:4%;    right:10%; }\r\n  #hostButtons .seven  { bottom:8%; left:10%; }\r\n  #hostButtons .month  { bottom:8%; right:10%; }\r\n\r\n  \/* color accents per family (match cube face glows) *\/\r\n  #hostButtons .highrise { border-color:beige;   box-shadow:0 0 14px beige; }\r\n  #hostButtons .historic { border-color:#00ccff; box-shadow:0 0 14px #00ccff; }\r\n  #hostButtons .ecostay  { border-color:#33ff33; box-shadow:0 0 14px #33ff33; }\r\n  #hostButtons .mansions { border-color:red;     box-shadow:0 0 14px red; }\r\n\r\n  \/* phone: turn into one row under the map *\/\r\n  @media (max-width:768px){\r\n    #hostButtons{\r\n      position:relative; top:auto; left:auto; transform:none;\r\n      height:auto; margin-top:-35px;\r\n      display:none;               \/* still hidden by default *\/\r\n      flex-wrap:nowrap; justify-content:center; gap:10px;\r\n    }\r\n    #hostButtons .host-circle{ position:relative; width:75px; height:75px; margin:0 6px; }\r\n  }\r\n\r\n<\/style>\r\n\r\n<!-- HOST CIRCLES \u2014 HTML (Accommodations: High-Rise\r\n \/ Historic \/ Eco-Stay \/ Mansions) -->\r\n<div id=\"hostButtons\">\r\n  <!-- HIGH-RISE (beige) -->\r\n  <button class=\"host-circle interv interv-1day one\"\r\n    data-lat=\"6.241568778606768\" data-lng=\"-75.22695655776336\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240821_175227_Instagram.jpg');\"\r\n    title=\"High-Rise \u2022 1\u20133 Days\"><\/button>\r\n\r\n  <button class=\"host-circle interv interv-3day five\"\r\n    data-lat=\"6.241568778606768\" data-lng=\"-75.22695655776336\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"High-Rise \u2022 4\u20136 Days\"><\/button>\r\n\r\n  <button class=\"host-circle interv interv-5day seven\"\r\n    data-lat=\"6.24267\" data-lng=\"-75.22668\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"High-Rise \u2022 7 Days\"><\/button>\r\n\r\n  <button class=\"host-circle interv interv-1wk month\"\r\n    data-lat=\"6.24267\" data-lng=\"-75.22668\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"High-Rise \u2022 1 Month\"><\/button>\r\n\r\n  <!-- HISTORIC (cyan) -->\r\n  <button class=\"host-circle coins coins-te one\"\r\n    data-lat=\"6.23796\" data-lng=\"-75.21421\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"Historic \u2022 1\u20133 Days\"><\/button>\r\n\r\n  <button class=\"host-circle coins coins-points five\"\r\n    data-lat=\"6.23796\" data-lng=\"-75.21421\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"Historic \u2022 4\u20136 Days\"><\/button>\r\n\r\n  <button class=\"host-circle coins coins-exchange seven\"\r\n    data-lat=\"6.24006\" data-lng=\"-75.18750\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"Historic \u2022 7 Days\"><\/button>\r\n\r\n  <button class=\"host-circle coins coins-eco month\"\r\n    data-lat=\"6.22670\" data-lng=\"-75.18056\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"Historic \u2022 1 Month\"><\/button>\r\n\r\n  <!-- ECO-STAY (green) -->\r\n  <button class=\"host-circle city city-air one\"\r\n    data-lat=\"6.241568778606768\" data-lng=\"-75.22695655776336\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"Eco-Stay \u2022 1\u20133 Days\"><\/button>\r\n\r\n  <button class=\"host-circle city city-water five\"\r\n    data-lat=\"6.241568778606768\" data-lng=\"-75.22695655776336\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"Eco-Stay \u2022 4\u20136 Days\"><\/button>\r\n\r\n  <button class=\"host-circle city city-land seven\"\r\n    data-lat=\"6.22879\" data-lng=\"-75.21184\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"Eco-Stay \u2022 7 Days\"><\/button>\r\n\r\n  <button class=\"host-circle city city-food month\"\r\n    data-lat=\"6.22879\" data-lng=\"-75.21184\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"Eco-Stay \u2022 1 Month\"><\/button>\r\n\r\n  <!-- MANSIONS (red) -->\r\n  <button class=\"host-circle avatar avatar-exchange one\"\r\n    data-lat=\"6.24203\" data-lng=\"-75.22696\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"Mansions \u2022 1\u20133 Days\"><\/button>\r\n\r\n  <button class=\"host-circle avatar avatar-socialize five\"\r\n    data-lat=\"6.24203\" data-lng=\"-75.22696\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061057_PowerPoint-1.jpg');\"\r\n    title=\"Mansions \u2022 4\u20136 Days\"><\/button>\r\n\r\n  <button class=\"host-circle avatar avatar-events seven\"\r\n    data-lat=\"6.24203\" data-lng=\"-75.22696\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240706_061611_PowerPoint.jpg');\"\r\n    title=\"Mansions \u2022 7 Days\"><\/button>\r\n\r\n  <button class=\"host-circle Avatara avatar-tc month\"\r\n    data-lat=\"6.24203\" data-lng=\"-75.22696\"\r\n    style=\"background-image:url('http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/12\/Screenshot_20240821_175227_Instagram.jpg');\"\r\n    title=\"Mansions \u2022 1 Month\"><\/button>\r\n<\/div>\r\n\r\n<!-- HOST CIRCLES \u2014 JS (Accommodations) -->\r\n<script>\r\n  \/* Show only the requested key, e.g., 'highrise-one' *\/\r\n  function showHostButtons(suboption){\r\n  loadLevel8Hosts(suboption);\r\n}\r\n\r\n  \/\/ dbl-tap \/ dbl-click to favorite (uses your existing toggleFavorite)\r\n  document.addEventListener('DOMContentLoaded', () => {\r\n    document.querySelectorAll('#hostButtons .host-circle').forEach(btn => {\r\n      btn.addEventListener('dblclick', (e) => {\r\n        e.preventDefault();\r\n\r\n        \/\/ \u2705 Get the specific key like \"heli-around\" \/ \"yacht-goto\"\r\n        const id = [...btn.classList].find(c =>\r\n          c.includes('-') &&\r\n          !['host-circle','around','goto','emergency','adventure'].includes(c)\r\n        );\r\n\r\n        if (!id) {\r\n          console.warn(\"No favorite id found for button:\", btn.className);\r\n          return;\r\n        }\r\n\r\n        \/\/ background-image: url(\"...\") or url('...')\r\n        const bg = btn.style.backgroundImage || '';\r\n        const img = bg.startsWith('url(')\r\n          ? bg.slice(4, -1).replace(\/^[\"']|[\"']$\/g, '')\r\n          : '';\r\n\r\n        const lat = parseFloat(btn.dataset.lat);\r\n        const lng = parseFloat(btn.dataset.lng);\r\n\r\n        if (typeof toggleFavorite === 'function') {\r\n          toggleFavorite(id, img, lat, lng);\r\n        } else {\r\n          console.warn(\"toggleFavorite() is not defined yet.\");\r\n        }\r\n      });\r\n    });\r\n  });\r\n\r\n\r\n\r\n  \/* Center the map when any host circle is clicked *\/\r\n  document.addEventListener('click', function (e) {\r\n    const btn = e.target.closest('#hostButtons .host-circle');\r\n    if (!btn) return;\r\n\r\n    const lat = parseFloat(btn.dataset.lat);\r\n    const lng = parseFloat(btn.dataset.lng);\r\n    if (!Number.isFinite(lat) || !Number.isFinite(lng)) return;\r\n\r\n    if (typeof window.focusOnHost === 'function') {\r\n      focusOnHost(lat, lng);\r\n      return;\r\n    }\r\n\r\n    if (window.ggMap && window.google) {\r\n      const pos = new google.maps.LatLng(lat, lng);\r\n      ggMap.setCenter(pos);\r\n      ggMap.setZoom(15);\r\n      new google.maps.Marker({ position: pos, map: ggMap });\r\n    }\r\n  });\r\n<\/script>\r\n<script>\r\nasync function loadLevel8Hosts(suboption){\r\n\r\n  const fd = new FormData();\r\n  fd.append(\"action\", \"ggg_l8_get_inventory\");\r\n\r\n  const res = await fetch(\"\/GGG\/wp-admin\/admin-ajax.php\", {\r\n    method: \"POST\",\r\n    credentials: \"same-origin\",\r\n    body: fd\r\n  });\r\n\r\n  const data = await res.json();\r\n  if(!data.success) return;\r\n\r\n  const items = data.data.items || [];\r\n\r\n  const filtered = items.filter(item =>\r\n    item.suboptionKey === suboption &&\r\n    item.status === \"active\"\r\n  );\r\n\r\n  const wrap = document.getElementById(\"hostButtons\");\r\n  if(!wrap) return;\r\n\r\n  wrap.innerHTML = \"\";\r\n\r\n  if(!filtered.length){\r\n    wrap.style.display = \"none\";\r\n    return;\r\n  }\r\n\r\n  const positions = [\"one\",\"five\",\"seven\",\"month\"];\r\n\r\n  filtered.forEach((item, index) => {\r\n    const btn = document.createElement(\"button\");\r\n    btn.className = \"host-circle \" + positions[index % 4];\r\n    btn.style.backgroundImage = `url('${item.imageUrl || \"\"}')`;\r\n    btn.dataset.lat = item.lat || \"\";\r\n    btn.dataset.lng = item.lng || \"\";\r\n    btn.title = item.name || \"Level 8 Item\";\r\n\r\n    btn.addEventListener(\"dblclick\", function(e){\r\n      e.preventDefault();\r\n      if(typeof toggleFavorite === \"function\"){\r\n        toggleFavorite(item.id, item.imageUrl, item.lat, item.lng);\r\n      }\r\n    });\r\n\r\n    wrap.appendChild(btn);\r\n  });\r\n\r\n  wrap.style.display = \"flex\";\r\n  wrap.style.pointerEvents = \"auto\";\r\n}\r\n<\/script>\r\n\r\n\r\n\r\n<!-- ==========================================================\r\nRENT BEFORE OWNING \u2014 HOST CIRCLES POPUP (CONNECTED)\r\n\u2705 Opens ONLY when clicking a host circle\r\n\u2705 Keeps your map focus logic (still centers map)\r\n\u2705 Interval \/ Coins \/ City Card \/ Avatar content\r\n\u2705 Sends request to Godsgalaxygame@gmail.com via mailto (invoice later)\r\n\u2705 Premium glass UI + mobile safe\r\n========================================================== -->\r\n\r\n<style>\r\n  \/* ===== Popup Overlay ===== *\/\r\n  #rboPopupOverlay{\r\n    position:fixed; inset:0;\r\n    display:none;\r\n    align-items:center;\r\n    justify-content:center;\r\n    z-index:9999999;\r\n    background:\r\n      radial-gradient(circle at 12% 0%, rgba(0,255,255,.20), transparent 55%),\r\n      radial-gradient(circle at 88% 100%, rgba(255,0,100,.12), transparent 60%),\r\n      rgba(0,0,0,.88);\r\n    opacity:0;\r\n    transform:scale(1.02);\r\n    transition:opacity .22s ease, transform .22s ease;\r\n    font-family: Orbitron, system-ui, sans-serif !important;\r\n    padding: 18px;\r\n  }\r\n  #rboPopupOverlay.rbo-open{\r\n    opacity:1;\r\n    transform:scale(1);\r\n  }\r\n\r\n  \/* ===== Popup Panel ===== *\/\r\n  #rboPopup{\r\n    width:min(920px, 94vw);\r\n    max-height:min(82vh, 760px);\r\n    overflow:hidden;\r\n    border-radius:24px;\r\n    border:1px solid rgba(255,255,255,.16);\r\n    background: linear-gradient(135deg, rgba(10,12,18,.92), rgba(18,18,26,.80));\r\n    box-shadow:\r\n      0 0 60px rgba(0,255,255,.14),\r\n      0 0 120px rgba(255,0,100,.10);\r\n    position:relative;\r\n  }\r\n\r\n  \/* top glow line *\/\r\n  #rboPopup::before{\r\n    content:\"\";\r\n    position:absolute; left:0; right:0; top:0; height:2px;\r\n    background: linear-gradient(90deg, transparent, rgba(0,255,255,.65), rgba(255,0,100,.45), transparent);\r\n    opacity:.9;\r\n    pointer-events:none;\r\n  }\r\n\r\n  \/* ===== Header ===== *\/\r\n  .rboHead{\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n    gap:14px;\r\n    padding:16px 16px 10px;\r\n  }\r\n  .rboTitleWrap{\r\n    display:flex; align-items:center; gap:12px;\r\n    min-width:0;\r\n  }\r\n  .rboIcon{\r\n    width:46px; height:46px; border-radius:14px;\r\n    border:1px solid rgba(255,255,255,.18);\r\n    background: radial-gradient(circle at 30% 30%, rgba(0,255,255,.25), rgba(0,0,0,.65));\r\n    box-shadow: 0 0 22px rgba(0,255,255,.18);\r\n    overflow:hidden;\r\n    flex:0 0 auto;\r\n  }\r\n  .rboIcon img{\r\n    width:100%; height:100%;\r\n    object-fit:cover;\r\n    opacity:.95;\r\n    transform: scale(1.02);\r\n  }\r\n  .rboTitle{\r\n    color:#fff;\r\n    font-weight:900;\r\n    letter-spacing:.08em;\r\n    text-transform:uppercase;\r\n    font-size:13px;\r\n    margin:0;\r\n    white-space:nowrap;\r\n    overflow:hidden;\r\n    text-overflow:ellipsis;\r\n  }\r\n  .rboSub{\r\n    color:rgba(255,255,255,.70);\r\n    font-size:12px;\r\n    margin:3px 0 0;\r\n    line-height:1.2;\r\n  }\r\n\r\n  .rboClose{\r\n    width:44px; height:44px;\r\n    border-radius:14px;\r\n    border:1px solid rgba(255,255,255,.16);\r\n    background: rgba(0,0,0,.35);\r\n    color:#fff;\r\n    cursor:pointer;\r\n    box-shadow: 0 0 18px rgba(0,255,255,.10);\r\n  }\r\n  .rboClose:hover{ transform: scale(1.03); }\r\n\r\n  \/* ===== Body ===== *\/\r\n  .rboBody{\r\n    padding: 12px 16px 16px;\r\n    display:grid;\r\n    grid-template-columns: 1.15fr .85fr;\r\n    gap:14px;\r\n  }\r\n  .rboCard{\r\n    border-radius:20px;\r\n    border:1px solid rgba(255,255,255,.14);\r\n    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.28));\r\n    box-shadow: 0 0 28px rgba(0,255,255,.10);\r\n    padding:14px;\r\n    overflow:hidden;\r\n  }\r\n  .rboCard h4{\r\n    margin:0 0 8px;\r\n    color:#fff;\r\n    font-size:12px;\r\n    letter-spacing:.08em;\r\n    text-transform:uppercase;\r\n  }\r\n  .rboP{\r\n    margin:0;\r\n    color:rgba(255,255,255,.78);\r\n    font-size:13px;\r\n    line-height:1.35;\r\n  }\r\n\r\n  .rboGrid{\r\n    display:grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap:10px;\r\n    margin-top:10px;\r\n  }\r\n  .rboChip{\r\n    padding:10px 10px;\r\n    border-radius:16px;\r\n    border:1px solid rgba(255,255,255,.14);\r\n    background: rgba(0,0,0,.26);\r\n    color:#fff;\r\n    font-size:12px;\r\n    display:flex;\r\n    justify-content:space-between;\r\n    gap:10px;\r\n  }\r\n  .rboChip b{ font-weight:900; letter-spacing:.02em; }\r\n  .rboChip span{ opacity:.8; }\r\n\r\n  .rboActions{\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:10px;\r\n  }\r\n  .rboBtn{\r\n    width:100%;\r\n    border-radius:18px;\r\n    padding:12px 12px;\r\n    border:1px solid rgba(255,255,255,.18);\r\n    background: rgba(0,0,0,.30);\r\n    color:#fff;\r\n    font-weight:800;\r\n    letter-spacing:.06em;\r\n    text-transform:uppercase;\r\n    font-size:12px;\r\n    cursor:pointer;\r\n    box-shadow: 0 0 22px rgba(0,255,255,.10);\r\n  }\r\n  .rboBtn:hover{ transform: translateY(-1px); }\r\n  .rboBtnPrimary{\r\n    background: linear-gradient(135deg, rgba(0,255,255,.22), rgba(255,0,100,.12));\r\n    border-color: rgba(0,255,255,.35);\r\n  }\r\n  .rboTiny{\r\n    margin-top:10px;\r\n    font-size:11px;\r\n    color:rgba(255,255,255,.60);\r\n    line-height:1.35;\r\n  }\r\n\/* \u2705 Make ONLY the LEFT content area scrollable (premium + mobile safe) *\/\r\n#rboPopup .rboBody .rboCard:first-child{\r\n  max-height: calc(82vh - 120px);   \/* header space + padding *\/\r\n  overflow-y: auto;\r\n  overscroll-behavior: contain;\r\n  -webkit-overflow-scrolling: touch;\r\n  padding-right: 10px;             \/* room for scrollbar *\/\r\n}\r\n\r\n\/* Optional: premium scrollbar *\/\r\n#rboPopup .rboBody .rboCard:first-child::-webkit-scrollbar{\r\n  width: 6px;\r\n}\r\n#rboPopup .rboBody .rboCard:first-child::-webkit-scrollbar-thumb{\r\n  background: linear-gradient(180deg, rgba(0,255,255,.45), rgba(255,0,100,.35));\r\n  border-radius: 10px;\r\n}\r\n@media (max-width: 860px){\r\n  #rboPopup{\r\n    max-height: 88vh;              \/* a bit taller on mobile *\/\r\n  }\r\n  #rboPopup .rboBody .rboCard:first-child{\r\n    max-height: calc(88vh - 260px); \/* leaves room for Request card\/buttons *\/\r\n  }\r\n}\r\n\r\n\r\n  \/* Mobile *\/\r\n  @media (max-width: 860px){\r\n    .rboBody{ grid-template-columns:1fr; }\r\n  }\r\n<\/style>\r\n\r\n<!-- ===== Popup Markup ===== -->\r\n<div id=\"rboPopupOverlay\" aria-hidden=\"true\">\r\n  <div id=\"rboPopup\" role=\"dialog\" aria-modal=\"true\">\r\n    <div class=\"rboHead\">\r\n      <div class=\"rboTitleWrap\">\r\n        <div class=\"rboIcon\"><img id=\"rboHeroImg\" alt=\"\" \/><\/div>\r\n        <div style=\"min-width:0\">\r\n          <p class=\"rboTitle\" id=\"rboTitle\">Rent Before Owning<\/p>\r\n          <p class=\"rboSub\" id=\"rboSub\">Choose an option to request your invoice.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <button class=\"rboClose\" id=\"rboCloseBtn\" type=\"button\">\u2715<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"rboBody\">\r\n      <div class=\"rboCard\">\r\n        <h4 id=\"rboLeftHead\">Details<\/h4>\r\n        <p class=\"rboP\" id=\"rboDescription\"><\/p>\r\n\r\n        <div class=\"rboGrid\" id=\"rboPriceGrid\"><\/div>\r\n\r\n        <div class=\"rboTiny\" id=\"rboFinePrint\">\r\n          This is a request \u2014 you will receive an invoice later by email. No payment is processed on this screen.\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"rboCard\">\r\n        <h4>Request<\/h4>\r\n        <div class=\"rboActions\">\r\n          <button class=\"rboBtn rboBtnPrimary\" id=\"rboEmailBtn\" type=\"button\">Send Request Email<\/button>\r\n          <button class=\"rboBtn\" id=\"rboCopyBtn\" type=\"button\">Copy Request Text<\/button>\r\n          <button class=\"rboBtn\" id=\"rboCloseBtn2\" type=\"button\">Close<\/button>\r\n        <\/div>\r\n        <div class=\"rboTiny\" id=\"rboRequestPreview\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const OVERLAY = document.getElementById('rboPopupOverlay');\r\n  const HEROIMG = document.getElementById('rboHeroImg');\r\n  const TITLE   = document.getElementById('rboTitle');\r\n  const SUB     = document.getElementById('rboSub');\r\n  const LHEAD   = document.getElementById('rboLeftHead');\r\n  const DESC    = document.getElementById('rboDescription');\r\n  const GRID    = document.getElementById('rboPriceGrid');\r\n  const PREV    = document.getElementById('rboRequestPreview');\r\n  const EMAIL   = document.getElementById('rboEmailBtn');\r\n  const COPY    = document.getElementById('rboCopyBtn');\r\n  const CLOSE1  = document.getElementById('rboCloseBtn');\r\n  const CLOSE2  = document.getElementById('rboCloseBtn2');\r\n\r\n  let currentPayload = null;\r\n\r\n  function getSignedName(){\r\n    \/\/ tries to read your visible \"Signed in: Edward\" label\r\n    const label = [...document.querySelectorAll('*')]\r\n      .find(el => (el.textContent || '').trim().startsWith('Signed in:'));\r\n    if(label){\r\n      return (label.textContent || '').replace('Signed in:','').trim();\r\n    }\r\n    \/\/ fallback: common localStorage patterns (safe if not present)\r\n    return localStorage.getItem('gggUserName') ||\r\n           localStorage.getItem('gggSignedInName') ||\r\n           localStorage.getItem('signedInName') ||\r\n           '';\r\n  }\r\n\r\n  function parseBgUrl(styleBg){\r\n    const bg = styleBg || '';\r\n    if(!bg.includes('url(')) return '';\r\n    return bg.slice(bg.indexOf('url(') + 4).replace(')','').replace(\/^[\"']|[\"']$\/g,'').trim();\r\n  }\r\n\r\n  function detectSide(btn){\r\n    const cl = btn.classList;\r\n    if(cl.contains('interv')) return 'intervals';\r\n    if(cl.contains('coins'))  return 'coins';\r\n    if(cl.contains('city'))   return 'citycard';\r\n    if(cl.contains('avatar')) return 'avatar';\r\n    return 'unknown';\r\n  }\r\n\r\n  function detectPick(btn){\r\n    const cl = btn.classList;\r\n    \/\/ Intervals\r\n    if(cl.contains('interv-1day')) return '1 Day';\r\n    if(cl.contains('interv-3day')) return '3 Days';\r\n    if(cl.contains('interv-5day')) return '5 Days';\r\n    if(cl.contains('interv-1wk'))  return '1 Week';\r\n\r\n    \/\/ Coins (examples)\r\n    if(cl.contains('coins-te'))       return 'Coins \u2022 Travel Essentials';\r\n    if(cl.contains('coins-points'))   return 'Coins \u2022 Points';\r\n    if(cl.contains('coins-exchange')) return 'Coins \u2022 Exchange';\r\n    if(cl.contains('coins-eco'))      return 'Coins \u2022 Eco-Club';\r\n\r\n    \/\/ City Card (examples)\r\n    if(cl.contains('city-air'))   return 'City Card \u2022 Air Hours';\r\n    if(cl.contains('city-water')) return 'City Card \u2022 Water Hours';\r\n    if(cl.contains('city-land'))  return 'City Card \u2022 Boat Hours';\r\n    if(cl.contains('city-food'))  return 'City Card \u2022 Food Credits';\r\n\r\n    \/\/ Avatar (examples)\r\n    if(cl.contains('avatar-exchange'))   return 'Avatar \u2022 Exchange';\r\n    if(cl.contains('avatar-socialize'))  return 'Avatar \u2022 Socialize';\r\n    if(cl.contains('avatar-events'))     return 'Avatar \u2022 Events';\r\n    if(cl.contains('avatar-tc'))         return 'Avatar \u2022 Travel Club';\r\n\r\n    \/\/ fallback by placement\r\n    if(cl.contains('one'))   return 'Option A';\r\n    if(cl.contains('five'))  return 'Option B';\r\n    if(cl.contains('seven')) return 'Option C';\r\n    if(cl.contains('month')) return 'Option D';\r\n    return 'Option';\r\n  }\r\n\r\n  function buildContent(side, pick){\r\n    \/\/ You said: \"put some prices I can change later\"\r\n    \/\/ So these are placeholders \u2014 you can edit anytime.\r\n    const content = {\r\n      title: '',\r\n      sub: 'Request goes to Godsgalaxygame@gmail.com \u2014 you invoice later.',\r\n      head: '',\r\n      desc: '',\r\n      prices: []\r\n    };\r\n\r\n    if(side === 'intervals'){\r\n      content.title = 'Rent Before Owning \u2022 Intervals';\r\n      content.head  = 'Intervals (Rent Before Buying)';\r\n      content.desc  = `You selected: ${pick}. This is the exit program \u2014 rent first, then buy when ready. We will review your request and send an invoice.`;\r\n      content.prices = [\r\n        {k:'Service', v: pick},\r\n        {k:'Deposit', v:'$99 (placeholder)'},\r\n        {k:'Total',   v:'$499 (placeholder)'},\r\n        {k:'Timing',  v:'Invoice within 24h'}\r\n      ];\r\n      return content;\r\n    }\r\n\r\n    if(side === 'coins'){\r\n      content.title = 'Rent Before Owning \u2022 Coins';\r\n      content.head  = 'Coins Bundle';\r\n      content.desc  = `You selected: ${pick}. Choose a coins bundle big enough for your options on this side of the cube. We\u2019ll invoice you for the bundle you request.`;\r\n      content.prices = [\r\n        {k:'Bundle',  v: pick},\r\n        {k:'Coins',   v:'5,000 (placeholder)'},\r\n        {k:'Total',   v:'$199 (placeholder)'},\r\n        {k:'Validity',v:'12 months'}\r\n      ];\r\n      return content;\r\n    }\r\n\r\n    if(side === 'citycard'){\r\n      content.title = 'Rent Before Owning \u2022 City Card';\r\n      content.head  = 'City Card Hours';\r\n      content.desc  = `You selected: ${pick}. This is where they buy Air \/ Water \/ Boat Hours + credits (Food, etc.) for the City Card.`;\r\n      content.prices = [\r\n        {k:'Category', v: pick},\r\n        {k:'Hours',    v:'10 hours (placeholder)'},\r\n        {k:'Total',    v:'$299 (placeholder)'},\r\n        {k:'Valid',    v:'12 months'}\r\n      ];\r\n      return content;\r\n    }\r\n\r\n    if(side === 'avatar'){\r\n      content.title = 'Rent Before Owning \u2022 Avatar';\r\n      content.head  = 'Avatar (1 Year)';\r\n      content.desc  = `You selected: ${pick}. This is the 1-year avatar upgrade used to socialize \/ Travel Club \/ events.`;\r\n      content.prices = [\r\n        {k:'Plan',   v: pick},\r\n        {k:'Term',   v:'1 year'},\r\n        {k:'Total',  v:'$149 (placeholder)'},\r\n        {k:'Start',  v:'On invoice payment'}\r\n      ];\r\n      return content;\r\n    }\r\n\r\n    content.title = 'Rent Before Owning';\r\n    content.head  = 'Details';\r\n    content.desc  = `You selected: ${pick}.`;\r\n    content.prices = [{k:'Selected', v: pick}];\r\n    return content;\r\n  }\r\n\r\n  function openPopupFromBtn(btn){\r\n    const side = detectSide(btn);\r\n    const pick = detectPick(btn);\r\n\r\n    const img  = parseBgUrl(btn.style.backgroundImage);\r\n    if(img){\r\n      HEROIMG.src = img;\r\n      HEROIMG.style.display = 'block';\r\n    }else{\r\n      HEROIMG.removeAttribute('src');\r\n      HEROIMG.style.display = 'none';\r\n    }\r\n\r\n    const c = buildContent(side, pick);\r\n\r\n    TITLE.textContent = c.title;\r\n    SUB.textContent   = c.sub;\r\n    LHEAD.textContent = c.head;\r\n    DESC.textContent  = c.desc;\r\n\r\n    GRID.innerHTML = '';\r\n    (c.prices || []).forEach(row=>{\r\n      const div = document.createElement('div');\r\n      div.className = 'rboChip';\r\n      div.innerHTML = `<b>${row.k}<\/b><span>${row.v}<\/span>`;\r\n      GRID.appendChild(div);\r\n    });\r\n\r\n    const name = getSignedName();\r\n    const lat  = btn.dataset.lat || '';\r\n    const lng  = btn.dataset.lng || '';\r\n    const titleAttr = btn.getAttribute('title') || '';\r\n\r\n    const reqText =\r\n`RENT BEFORE OWNING \u2014 REQUEST\r\nName: ${name || '(not provided)'}\r\nSide: ${side}\r\nSelection: ${pick}\r\nCircle Title: ${titleAttr}\r\nLocation: ${lat && lng ? (lat + ',' + lng) : '(n\/a)'}\r\nNotes: Please send invoice.`;\r\n\r\n    PREV.textContent = reqText;\r\n\r\n    currentPayload = {\r\n      side, pick,\r\n      name,\r\n      reqText\r\n    };\r\n\r\n    \/\/ open\r\n    OVERLAY.style.display = 'flex';\r\n    requestAnimationFrame(()=> OVERLAY.classList.add('rbo-open'));\r\n    document.body.style.overflow = 'hidden';\r\n  }\r\n\r\n  function closePopup(){\r\n    OVERLAY.classList.remove('rbo-open');\r\n    setTimeout(()=>{\r\n      OVERLAY.style.display = 'none';\r\n      document.body.style.overflow = '';\r\n    }, 200);\r\n  }\r\n\r\n  \/\/ Close actions\r\n  CLOSE1.addEventListener('click', closePopup);\r\n  CLOSE2.addEventListener('click', closePopup);\r\n  OVERLAY.addEventListener('click', (e)=>{\r\n    if(e.target === OVERLAY) closePopup();\r\n  });\r\n  document.addEventListener('keydown', (e)=>{\r\n    if(e.key === 'Escape' && OVERLAY.style.display === 'flex') closePopup();\r\n  });\r\n\r\n  \/\/ Email + Copy\r\n  EMAIL.addEventListener('click', ()=>{\r\n    if(!currentPayload) return;\r\n    const subject = encodeURIComponent(`Rent Before Owning Request \u2014 ${currentPayload.side} \u2014 ${currentPayload.pick}`);\r\n    const body    = encodeURIComponent(currentPayload.reqText);\r\n    window.location.href = `mailto:Godsgalaxygame@gmail.com?subject=${subject}&body=${body}`;\r\n  });\r\n\r\n  COPY.addEventListener('click', async ()=>{\r\n    if(!currentPayload) return;\r\n    try{\r\n      await navigator.clipboard.writeText(currentPayload.reqText);\r\n      COPY.textContent = 'Copied \u2705';\r\n      setTimeout(()=> COPY.textContent = 'Copy Request Text', 1100);\r\n    }catch(err){\r\n      alert('Copy failed \u2014 you can manually select and copy the text in the preview.');\r\n    }\r\n  });\r\n\r\n  \/* ==========================================================\r\n  CONNECT POPUP TO YOUR HOST CIRCLES\r\n  Opens on single click ONLY for #hostButtons .host-circle\r\n  Keeps your existing map focus behavior too\r\n  ========================================================== *\/\r\n  document.addEventListener('click', function(e){\r\n    const btn = e.target.closest('#hostButtons .host-circle');\r\n    if(!btn) return;\r\n\r\n    \/\/ 1) open premium popup\r\n    openPopupFromBtn(btn);\r\n\r\n    \/\/ 2) keep your map behavior (center\/zoom\/marker)\r\n    const lat = parseFloat(btn.dataset.lat);\r\n    const lng = parseFloat(btn.dataset.lng);\r\n    if (Number.isFinite(lat) && Number.isFinite(lng)) {\r\n      if (typeof window.focusOnHost === 'function') {\r\n        window.focusOnHost(lat, lng);\r\n      } else if (window.ggMap && window.google) {\r\n        const pos = new google.maps.LatLng(lat, lng);\r\n        ggMap.setCenter(pos);\r\n        ggMap.setZoom(15);\r\n        new google.maps.Marker({ position: pos, map: ggMap });\r\n      }\r\n    }\r\n  }, true);\r\n\r\n})();\r\n<\/script>\r\n\r\n\r\n\r\n&#8211; AVATAR &#8211;>\r\n<div id=\"avatarContainer\" onclick=\"showAvatarCloud()\" \r\n     style=\"position:fixed; bottom:80px; right:20px; z-index:9999; cursor:pointer; display:none;\">\r\n  <img decoding=\"async\" src=\"http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/07\/Screenshot_20231118-120724_Instagram-scaled.jpg\" \r\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%);\">\r\n<\/div>\r\n\r\n<!-- CLOUD BUBBLE -->\r\n<div id=\"avatarCloud\" style=\"position:fixed; bottom:310px; right:30px; max-width:250px; background:rgba(0,0,0,0.7); \r\n     color:white; font-family:Orbitron, sans-serif; font-size:12px; line-height:16px; border-radius:20px 20px 20px 0px; \r\n     padding:14px 16px; box-shadow:0 0 15px aqua; display:none; z-index:9999; text-align:center;\r\n     border: 1px solid aqua;\">\r\n  <div id=\"avatarCloudMsg\">Loading&#8230;<\/div>\r\n  <div style=\"margin-top:10px;\">\r\n    <button onclick=\"acceptAvatarSuggestion()\" style=\"background:lime; color:black; border:none; padding:6px 10px; font-weight:bold;\">Yes<\/button>\r\n    <button onclick=\"dismissAvatarCloud()\" style=\"background:aqua; color:white; border:none; padding:6px 10px; font-weight:bold;\">No<\/button>\r\n  <\/div>\r\n  <div style=\"position:absolute; bottom:-18px; right:10px; width:0; height:0; border-left:10px solid transparent; \r\n              border-right:10px solid transparent; border-top:18px solid rgba(0,255,255,0.6); filter:blur(0.5px);\">\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- MOBILE ASSISTANT BUTTON -->\r\n<div id=\"avatarMobileBtn\" onclick=\"toggleMobileAvatar()\" style=\"display:none;\">\r\n  \ud83d\udc64 Assistant\r\n<\/div>\r\n\r\n<!-- ESTILOS -->\r\n<style>\r\n  #avatarMobileBtn {\r\n    position: fixed;\r\n    bottom: 18px;\r\n    right: 18px;\r\n    z-index: 9999;\r\n    background: rgba(0, 0, 0, 0.7);\r\n    color: white;\r\n    font-family: Orbitron, sans-serif;\r\n    font-size: 13px;\r\n    padding: 10px 14px;\r\n    border: 2px solid aqua;\r\n    border-radius: 14px;\r\n    box-shadow: 0 0 12px aqua;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  @media (min-width: 769px) {\r\n    #avatarMobileBtn {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    #avatarContainer {\r\n      bottom: 30px !important;\r\n      right: 90px !important;\r\n      width: 100px !important;\r\n      display: none;\r\n      pointer-events: none;\r\n    }\r\n\r\n    #avatarContainer img {\r\n      width: 100%;\r\n      height: auto;\r\n      border-radius: 50% \/ 30%;\r\n      object-fit: cover;\r\n      filter: grayscale(0%) brightness(1.1) contrast(1.2);\r\n      box-shadow: 0 0 12px aqua;\r\n    }\r\n  }\r\n\r\n  @media (min-width: 769px) {\r\n    #avatarContainer {\r\n      pointer-events: auto;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- L\u00d3GICA -->\r\n<script>\r\n  const entertainmentQuestions = [\r\n    \"Ready to see what\u2019s out there today?\",\r\n    \"Want entertainment options nearby?\",\r\n    \"Looking for something fun to do?\",\r\n    \"Need ideas for your free time?\",\r\n    \"Want something exciting tonight?\"\r\n  ];\r\n\r\n  const gastronomyQuestions = [\r\n    \"Want to see gastronomy options nearby?\",\r\n    \"Ready to have dinner tonight?\",\r\n    \"Would you like some brunch spots?\",\r\n    \"Hungry for something special?\",\r\n    \"Looking for restaurants around you?\"\r\n  ];\r\n\r\n  function showAvatarCloud(forcedType = null) {\r\n    const hour = new Date().getHours();\r\n    const type = forcedType || (hour % 2 === 0 ? \"gastronomy\" : \"entertainment\");\r\n    const question = (type === \"gastronomy\" ? gastronomyQuestions : entertainmentQuestions)[Math.floor(Math.random() * 5)];\r\n\r\n    document.getElementById(\"avatarCloudMsg\").innerText = question;\r\n    document.getElementById(\"avatarCloud\").style.display = \"block\";\r\n  }\r\n\r\n  function acceptAvatarSuggestion() {\r\n    dismissAvatarCloud();\r\n    alert(\"\u2705 Showing Aries recommendations near you...\");\r\n  }\r\n\r\n  function dismissAvatarCloud() {\r\n    document.getElementById(\"avatarCloud\").style.display = \"none\";\r\n  }\r\n\r\n  \/\/ \ud83d\udcbb Show avatar automatically after 3 seconds (desktop only)\r\n  function showAvatarAssistant() {\r\n    const avatar = document.getElementById(\"avatarContainer\");\r\n    if (window.innerWidth > 768) {\r\n      avatar.style.display = \"block\";\r\n      avatar.style.pointerEvents = \"auto\";\r\n    }\r\n  }\r\n  setTimeout(showAvatarAssistant, 3000);\r\n\r\n  \/\/ \ud83d\udcf1 Toggle mobile avatar on\/off\r\n  let avatarVisible = false;\r\n  function toggleMobileAvatar() {\r\n    const avatar = document.getElementById(\"avatarContainer\");\r\n    const btn = document.getElementById(\"avatarMobileBtn\");\r\n\r\n    if (!avatarVisible) {\r\n      avatar.style.display = \"block\";\r\n      avatar.style.pointerEvents = \"auto\";\r\n      showAvatarCloud();\r\n      btn.innerHTML = \"\u274c Close\";\r\n    } else {\r\n      avatar.style.display = \"none\";\r\n      avatar.style.pointerEvents = \"none\";\r\n      dismissAvatarCloud();\r\n      btn.innerHTML = \"\ud83d\udc64 Assistant\";\r\n    }\r\n\r\n    avatarVisible = !avatarVisible;\r\n  }\r\n\r\n  \/\/ \ud83d\udcf1 Show mobile button on load\r\n  window.addEventListener(\"load\", () => {\r\n    if (window.innerWidth <= 768) {\r\n      document.getElementById(\"avatarMobileBtn\").style.display = \"flex\";\r\n    }\r\n  });\r\n<\/script>\r\n\r\n\r\n\r\n<style>\r\nhtml.cityCardActive, body.cityCardActive{\r\n  margin:0!important;\r\n  padding:0!important;\r\n  overflow:hidden!important;\r\n  background:#000!important;\r\n}\r\n\r\n#cityCardOverlay{\r\n  display:none;\r\n  position:fixed;\r\n  inset:0;\r\n  z-index:2147483647;\r\n  background:#000;\r\n  color:white;\r\n  font-family:Arial,sans-serif;\r\n}\r\n\r\nbody.cityCardActive #cityCardOverlay{display:block;}\r\n\r\n#cityCardScrollArea{\r\n  position:fixed;\r\n  inset:0;\r\n  overflow:hidden;\r\n  background:#000;\r\n}\r\n\r\n#cityCardWorld{\r\n  position:relative;\r\n  width:100vw;\r\n  height:100vh;\r\n  min-width:100vw;\r\n}\r\n\r\n#cityCardBgImage{\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n  display:block;\r\n}\r\n\r\n.ccTopBack{\r\n  position:fixed;\r\n  top:18px;\r\n  left:18px;\r\n  z-index:30;\r\n  border:1px solid rgba(255,255,255,.3);\r\n  background:rgba(0,0,0,.45);\r\n  color:#fff;\r\n  border-radius:999px;\r\n  padding:10px 16px;\r\n  cursor:pointer;\r\n  backdrop-filter:blur(10px);\r\n}\r\n\r\n#cityCardSignInHotspot{\r\n  position:absolute;\r\n  top:10%;\r\n  left:6%;\r\n  width:12%;\r\n  height:12%;\r\n  background:transparent;\r\n  border:0;\r\n  cursor:pointer;\r\n  z-index:20;\r\n}\r\n\r\n\/* LIVE DATA *\/\r\n.ccData{\r\n  position:absolute;\r\n  z-index:10;\r\n  text-shadow:0 0 12px currentColor;\r\n  letter-spacing:.08em;\r\n}\r\n\r\n#ccOwnerName{\r\n  top:16%;\r\n  left:12%;\r\n  font-size:clamp(13px,2vw,26px);\r\n  font-weight:800;\r\n}\r\n\r\n#ccWalletType{\r\n  top:30%;\r\n  left:15%;\r\n  font-size:clamp(42px,7vw,92px);\r\n  font-weight:900;\r\n}\r\n\r\n#ccWalletLabel{\r\n  top:53%;\r\n  left:15%;\r\n  font-size:clamp(14px,2vw,30px);\r\n}\r\n\r\n#ccBalance{\r\n  top:27%;\r\n  right:15%;\r\n  font-size:clamp(38px,6vw,88px);\r\n  font-weight:900;\r\n}\r\n\r\n#ccValue{\r\n  top:44%;\r\n  right:19%;\r\n  font-size:clamp(18px,3vw,44px);\r\n}\r\n\r\n#ccUnit{\r\n  top:58%;\r\n  right:16%;\r\n  font-size:clamp(12px,1.8vw,24px);\r\n  border:1px solid currentColor;\r\n  border-radius:999px;\r\n  padding:6px 16px;\r\n}\r\n\r\n#ccStatus{\r\n  top:17%;\r\n  right:34%;\r\n  font-size:clamp(11px,1.5vw,20px);\r\n}\r\n\r\n#ccLastUpdate{\r\n  top:17%;\r\n  right:13%;\r\n  font-size:clamp(10px,1.4vw,18px);\r\n}\r\n\r\n\/* COLOR STATES *\/\r\n#cityCardWorld.bc{color:#00f0ff;}\r\n#cityCardWorld.air{color:#ffffff;}\r\n#cityCardWorld.aqua{color:#008cff;}\r\n#cityCardWorld.gastro{color:#00ff88;}\r\n#cityCardWorld.land{color:#ffd166;}\r\n#cityCardWorld.vip{color:#a855f7;}\r\n#cityCardWorld.vault{color:#4f46e5;}\r\n\r\n.ccTabs{\r\n  position:fixed;\r\n  left:50%;\r\n  bottom:22px;\r\n  transform:translateX(-50%);\r\n  z-index:30;\r\n  display:flex;\r\n  gap:8px;\r\n  flex-wrap:wrap;\r\n  justify-content:center;\r\n}\r\n\r\n.ccTabs button{\r\n  border:1px solid rgba(255,255,255,.28);\r\n  background:rgba(0,0,0,.5);\r\n  color:#fff;\r\n  border-radius:999px;\r\n  padding:10px 14px;\r\n  cursor:pointer;\r\n  backdrop-filter:blur(10px);\r\n}\r\n\r\n.ccTabs button.active{\r\n  border-color:currentColor;\r\n  color:currentColor;\r\n  box-shadow:0 0 18px currentColor;\r\n}\r\n\r\n#cityCardWorld::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  pointer-events:none;\r\n  z-index:4;\r\n  background:\r\n    radial-gradient(circle at 72% 45%, currentColor 0%, transparent 16%),\r\n    linear-gradient(90deg, transparent 45%, currentColor 70%, transparent 92%);\r\n  opacity:.18;\r\n  mix-blend-mode:screen;\r\n  filter:blur(10px);\r\n}\r\n\r\n\/* LOGIN POPUP *\/\r\n#ccLoginPopup{\r\n  display:none;\r\n  position:fixed;\r\n  inset:0;\r\n  z-index:40;\r\n  background:rgba(0,0,0,.76);\r\n  align-items:center;\r\n  justify-content:center;\r\n  padding:20px;\r\n}\r\n\r\n#ccLoginPopup.show{display:flex;}\r\n\r\n.ccLoginBox{\r\n  width:min(92vw,420px);\r\n  background:linear-gradient(145deg,#10121f,#000);\r\n  border:1px solid rgba(255,255,255,.25);\r\n  border-radius:26px;\r\n  padding:24px;\r\n  box-shadow:0 0 40px rgba(0,240,255,.22);\r\n}\r\n\r\n.ccLoginBox h2{margin:0 0 10px;}\r\n.ccLoginBox p{color:rgba(255,255,255,.75);line-height:1.5;}\r\n\r\n.ccLoginBox a,\r\n.ccLoginBox button{\r\n  display:block;\r\n  width:100%;\r\n  margin-top:12px;\r\n  text-align:center;\r\n  border-radius:999px;\r\n  padding:13px;\r\n  font-weight:900;\r\n  text-decoration:none;\r\n}\r\n\r\n.ccLoginBox a{\r\n  background:#00f0ff;\r\n  color:#001014;\r\n}\r\n\r\n.ccLoginBox button{\r\n  background:transparent;\r\n  color:white;\r\n  border:1px solid rgba(255,255,255,.3);\r\n}\r\n\r\n\/* MOBILE: FORCE THE CARD TO BE LANDSCAPE INSIDE THE PHONE *\/\r\n@media (max-width:768px) and (orientation:portrait){\r\n\r\n  #cityCardScrollArea{\r\n    position:fixed !important;\r\n    inset:0 !important;\r\n    overflow:hidden !important;\r\n    background:#000 !important;\r\n  }\r\n\r\n  #cityCardWorld{\r\n    position:absolute !important;\r\n    width:100vh !important;\r\n    height:100vw !important;\r\n    min-width:100vh !important;\r\n    min-height:100vw !important;\r\n    left:50% !important;\r\n    top:50% !important;\r\n    transform:translate(-50%, -50%) rotate(90deg) !important;\r\n    transform-origin:center center !important;\r\n  }\r\n\r\n  #cityCardBgImage{\r\n    width:100% !important;\r\n    height:100% !important;\r\n    object-fit:cover !important;\r\n    object-position:center center !important;\r\n  }\r\n\r\n  .ccTopBack{\r\n    top:18px !important;\r\n    left:18px !important;\r\n    z-index:80 !important;\r\n  }\r\n\r\n  .ccTabs{\r\n    position:absolute !important;\r\n    left:50% !important;\r\n    bottom:8% !important;\r\n    transform:translateX(-50%) !important;\r\n    width:auto !important;\r\n    flex-wrap:nowrap !important;\r\n    gap:8px !important;\r\n    z-index:50 !important;\r\n  }\r\n\r\n  .ccTabs button{\r\n    font-size:12px !important;\r\n    padding:9px 12px !important;\r\n  }\r\n\r\n  \/* FIX DATA POSITIONS *\/\r\n  #ccOwnerName{\r\n    top:18% !important;\r\n    left:14% !important;\r\n  }\r\n\r\n  #ccWalletType{\r\n    top:42% !important;\r\n    left:23% !important;\r\n  }\r\n\r\n  #ccWalletLabel{\r\n    top:54% !important;\r\n    left:23% !important;\r\n  }\r\n\r\n  #ccBalance{\r\n    top:32% !important;\r\n    right:16% !important;\r\n  }\r\n\r\n  #ccValue{\r\n    top:45% !important;\r\n    right:20% !important;\r\n  }\r\n\r\n  #ccUnit{\r\n    top:55% !important;\r\n    right:17% !important;\r\n  }\r\n\r\n  #ccStatus{\r\n    top:18% !important;\r\n    right:34% !important;\r\n  }\r\n\r\n  #ccLastUpdate{\r\n    top:18% !important;\r\n    right:13% !important;\r\n  }\r\n}\r\n\r\n\/* MOBILE LANDSCAPE: NORMAL CARD, NO ROTATION *\/\r\n@media (max-width:900px) and (orientation:landscape){\r\n\r\n  #cityCardScrollArea{\r\n    position:fixed !important;\r\n    inset:0 !important;\r\n    overflow:hidden !important;\r\n    background:#000 !important;\r\n  }\r\n\r\n  #cityCardWorld{\r\n    position:relative !important;\r\n    width:100vw !important;\r\n    height:100vh !important;\r\n    min-width:100vw !important;\r\n    min-height:100vh !important;\r\n    left:auto !important;\r\n    top:auto !important;\r\n    transform:none !important;\r\n  }\r\n\r\n#cityCardBgImage{\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n  object-position:center center;\r\n  transform:scale(.95); \/* smaller = zoom out, bigger = zoom in *\/\r\n  transform-origin:center center;\r\n  display:block;\r\n}\r\n\r\n  .ccTabs{\r\n    position:fixed !important;\r\n    left:50% !important;\r\n    bottom:18px !important;\r\n    transform:translateX(-50%) !important;\r\n    flex-wrap:nowrap !important;\r\n    z-index:80 !important;\r\n  }\r\n\r\n  .ccTabs button{\r\n    font-size:14px !important;\r\n    padding:9px 14px !important;\r\n  }\r\n\r\n  #ccOwnerName{\r\n    top:17% !important;\r\n    left:16% !important;\r\n  }\r\n\r\n  #ccWalletType{\r\n  top:30%;\r\n  left:16%;\r\n  font-size:clamp(42px,7vw,92px);\r\n  font-weight:900;\r\n}\r\n\r\n  #ccWalletLabel{\r\n  top:53%;\r\n  left:16%;\r\n}\r\n\r\n  #ccBalance{\r\n    top:27% !important;\r\n    right:17% !important;\r\n  }\r\n\r\n  #ccValue{\r\n    top:43% !important;\r\n    right:20% !important;\r\n  }\r\n\r\n  #ccUnit{\r\n    top:55% !important;\r\n    right:17% !important;\r\n  }\r\n\r\n  #ccStatus{\r\n    top:18% !important;\r\n    right:34% !important;\r\n  }\r\n\r\n  #ccLastUpdate{\r\n    top:18% !important;\r\n    right:13% !important;\r\n  }\r\n}\r\n\r\n<\/style>\r\n\r\n<div id=\"cityCardOverlay\">\r\n  <button class=\"ccTopBack\" onclick=\"ccBack()\">\u2190 Back<\/button>\r\n\r\n  <div id=\"cityCardScrollArea\">\r\n    <div id=\"cityCardWorld\" class=\"bc\">\r\n\r\n      <img decoding=\"async\" id=\"cityCardBgImage\" src=\"http:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2026\/04\/b34153a7-5227-4179-80b4-ec7c182a0cc8.png\" alt=\"City Card\">\r\n\r\n      <button id=\"cityCardSignInHotspot\" onclick=\"ccOpenLogin()\"><\/button>\r\n\r\n      <div id=\"ccOwnerName\" class=\"ccData\">Guest Member<\/div>\r\n      <div id=\"ccWalletType\" class=\"ccData\">BC<\/div>\r\n      <div id=\"ccWalletLabel\" class=\"ccData\">Bliss Coin<\/div>\r\n      <div id=\"ccBalance\" class=\"ccData\">0.00<\/div>\r\n      <div id=\"ccValue\" class=\"ccData\">$0.00<\/div>\r\n      <div id=\"ccUnit\" class=\"ccData\">BCC<\/div>\r\n      <div id=\"ccStatus\" class=\"ccData\">ACTIVE<\/div>\r\n      <div id=\"ccLastUpdate\" class=\"ccData\">--\/--\/----<\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ccTabs\">\r\n    <button class=\"active\" onclick=\"ccSetMode('bc', this)\">BC<\/button>\r\n    <button onclick=\"ccSetMode('air', this)\">Air<\/button>\r\n    <button onclick=\"ccSetMode('aqua', this)\">Aqua<\/button>\r\n    <button onclick=\"ccSetMode('gastro', this)\">Gastro<\/button>\r\n    <button onclick=\"ccSetMode('land', this)\">Land<\/button>\r\n    <button onclick=\"ccSetMode('vip', this)\">VIP<\/button>\r\n    <button onclick=\"ccSetMode('vault', this)\">Vault<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"ccLoginPopup\">\r\n  <div class=\"ccLoginBox\">\r\n    <h2>Activate City Card<\/h2>\r\n    <p>Sign in to connect your City Card to your Gods Galaxy Game account.<\/p>\r\n\r\n    <a href=\"\/GGG\/wp-login.php?redirect_to=\/GGG\/rent-before-buying\/?citycard=1\">\r\n      Sign In\r\n    <\/a>\r\n\r\n    <a href=\"\/GGG\/wp-login.php?action=register\">\r\n      Create Account\r\n    <\/a>\r\n\r\n    <button onclick=\"ccCloseLogin()\">Close<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const params = new URLSearchParams(window.location.search);\r\n\r\n  if(params.get(\"citycard\") === \"1\"){\r\n    document.documentElement.classList.add(\"cityCardActive\");\r\n    document.body.classList.add(\"cityCardActive\");\r\n    document.addEventListener(\"DOMContentLoaded\", ccLoadUserData);\r\n  }\r\n})();\r\n\r\nlet ccUserData = null;\r\nlet ccCurrentMode = \"bc\";\r\n\r\nconst ccModes = {\r\n  bc:{type:\"BC\", label:\"Bliss Coin\", unit:\"BCC\"},\r\n  air:{type:\"AIR\", label:\"Heli Time\", unit:\"HRS\"},\r\n  aqua:{type:\"AQUA\", label:\"Aquatics Time\", unit:\"HRS\"},\r\n  gastro:{type:\"GASTRO\", label:\"Chef Time\", unit:\"HRS\"},\r\n  land:{\r\n  type:\"LAND\",\r\n  label:\"Property Time\",\r\n  unit:\"WKS\"\r\n},\r\n  vip:{type:\"VIP\", label:\"The Circle Access\", unit:\"VIP\"},\r\n  vault:{type:\"VAULT\", label:\"Private Owner Vault\", unit:\"KEY\"}\r\n};\r\n\r\nfunction ccLoadUserData(){\r\n  fetch('\/GGG\/wp-admin\/admin-ajax.php', {\r\n    method:'POST',\r\n    headers:{'Content-Type':'application\/x-www-form-urlencoded'},\r\n    body:'action=ggg_get_city_card_data'\r\n  })\r\n  .then(res => res.json())\r\n  .then(res => {\r\n    if(!res || !res.success || !res.data){\r\n      ccOpenLogin();\r\n      return;\r\n    }\r\n\r\n    ccUserData = res.data;\r\n\r\n    if(!ccUserData.logged_in){\r\n      ccOpenLogin();\r\n      return;\r\n    }\r\n\r\n    document.getElementById(\"ccOwnerName\").textContent =\r\n      ccUserData.user_name || \"City Card Member\";\r\n\r\n    document.getElementById(\"ccLastUpdate\").textContent =\r\n      ccUserData.last_update || \"--\/--\/----\";\r\n\r\n    ccSetMode(\"bc\", document.querySelector(\".ccTabs button\"));\r\n  })\r\n  .catch(() => {\r\n    ccOpenLogin();\r\n  });\r\n}\r\n\r\nfunction ccSetMode(mode, btn){\r\n  ccCurrentMode = mode;\r\n\r\n  const world = document.getElementById(\"cityCardWorld\");\r\n  world.className = mode;\r\n\r\n  document.querySelectorAll(\".ccTabs button\").forEach(b => b.classList.remove(\"active\"));\r\n  if(btn) btn.classList.add(\"active\");\r\n\r\n  const m = ccModes[mode];\r\n\r\n  document.getElementById(\"ccWalletType\").textContent = m.type;\r\n  document.getElementById(\"ccWalletLabel\").textContent = m.label;\r\n  document.getElementById(\"ccUnit\").textContent = m.unit;\r\n\r\n  if(!ccUserData || !ccUserData.logged_in){\r\n    document.getElementById(\"ccBalance\").textContent = \"0.00\";\r\n    document.getElementById(\"ccValue\").textContent = \"$0.00\";\r\n    return;\r\n  }\r\n\r\n  if(mode === \"vip\" || mode === \"vault\"){\r\n    document.getElementById(\"ccBalance\").textContent = \"LOCKED\";\r\n    document.getElementById(\"ccValue\").textContent = \"PRIVATE\";\r\n    return;\r\n  }\r\n\r\n  const balanceData = ccUserData.balances && ccUserData.balances[mode]\r\n    ? ccUserData.balances[mode]\r\n    : {balance:\"0.00\", value:\"$0.00\"};\r\n\r\n  document.getElementById(\"ccBalance\").textContent = balanceData.balance || \"0.00\";\r\n  document.getElementById(\"ccValue\").textContent = balanceData.value || \"$0.00\";\r\n}\r\n\r\nfunction ccOpenLogin(){\r\n  document.getElementById(\"ccLoginPopup\").classList.add(\"show\");\r\n}\r\n\r\nfunction ccCloseLogin(){\r\n  document.getElementById(\"ccLoginPopup\").classList.remove(\"show\");\r\n}\r\n\r\nfunction ccBack(){\r\n  window.location.href = \"\/GGG\/rent-before-buying\/\";\r\n}\r\n<\/script>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcab Rent B4 Buying \ud83d\udcb3 1 Day 3 Days 5 Days 1 Week Intervals Travel Essentials Points Exchange Eco Club Coins Air Water Land Food City Card Exchange Socialize Events Travel Club Avatar \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 [&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-3238","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages\/3238","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=3238"}],"version-history":[{"count":93,"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages\/3238\/revisions"}],"predecessor-version":[{"id":10549,"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages\/3238\/revisions\/10549"}],"wp:attachment":[{"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/media?parent=3238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}