{"id":3236,"date":"2025-07-11T00:57:32","date_gmt":"2025-07-11T00:57:32","guid":{"rendered":"https:\/\/godsgalaxygame.com\/GGG\/?page_id=3236"},"modified":"2026-04-30T18:16:37","modified_gmt":"2026-04-30T18:16:37","slug":"fractional-ownership","status":"publish","type":"page","link":"https:\/\/godsgalaxygame.com\/GGG\/fractional-ownership\/","title":{"rendered":"Fractional Ownership"},"content":{"rendered":"\n<!-- ===== FULLSCREEN STARFIELD (ASTRO STYLE) for FRACTIONAL OWNERSHIP ===== -->\n<canvas id=\"foStarfield\" aria-hidden=\"true\"><\/canvas>\n\n<style>\n  \/* fixed, full-bleed background behind everything in this block *\/\n  #foStarfield{\n    position: fixed; inset: 0;\n    width: 100%; height: 100%;\n    display: block; z-index: 0; pointer-events: none;\n  }\n  html, body { background:#000; }\n<\/style>\n\n<script>\n(function(){\n  const c = document.getElementById('foStarfield');\n  if(!c) return;\n  const ctx = c.getContext('2d');\n  let W=0, H=0, dpr=1, stars=[], meteors=[];\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    const dt = Math.min(33, ts-last || 16); last=ts; accum+=dt;\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\n    const g = ctx.createRadialGradient(W\/2,H*0.15,0, W\/2,H*0.4, Math.hypot(W,H)\/1.4);\n    g.addColorStop(0,'rgba(0,220,255,0.10)');\n    g.addColorStop(1,'rgba(0,0,0,0)');\n    ctx.fillStyle=g; ctx.fillRect(0,0,W,H);\n\n    \/\/ twinkle\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(); ctx.arc(s.x,s.y,s.r,0,Math.PI*2); 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; m.y += m.vy; m.life += dt;\n\n      const trailX = m.x - m.vx*6;\n      const trailY = m.y - m.vy*6;\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      ctx.strokeStyle = grad; ctx.lineWidth = 2*dpr; ctx.lineCap='round';\n      ctx.beginPath(); ctx.moveTo(m.x,m.y); ctx.lineTo(trailX, trailY); 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    requestAnimationFrame(tick);\n  }\n\n  addEventListener('resize', resize, {passive:true});\n  resize(); requestAnimationFrame(tick);\n})();\n<\/script>\n<!-- ===== end FRACTIONAL starfield ===== -->\n\n\n<!-- ===== BLOCK 1 \u2013 Fractional Ownership (Pyramid Selector, full-screen, responsive) ===== -->\n<div id=\"foSelector\" class=\"foStage\">\n  <div id=\"foPyramid\">\n    <button class=\"pyr-btn tier-top\"    onclick=\"location.href='\/GGG\/owners-club\/'\">\n      <span class=\"emoji\">\ud83d\udc51<\/span><span class=\"label\">Owners Club<\/span>\n    <\/button>\n\n    <button class=\"pyr-btn tier-mid\"    onclick=\"location.href='\/GGG\/rent-before-buying\/'\">\n      <span class=\"emoji\">\ud83d\udcab<\/span><span class=\"label\">Rent B4 Own<\/span>\n    <\/button>\n\n    <button class=\"pyr-btn tier-bottom\" onclick=\"activatepacketsCube()\">\n      <span class=\"emoji\">\u2728<\/span><span class=\"label\">Packets<\/span>\n    <\/button>\n  <\/div>\n<\/div>\n\n<style>\n  \/* Stage above starfield *\/\n  .foStage{\n    position: fixed; inset: 0;\n    display: grid; place-items: center;\n    z-index: 5;\n    transition: opacity .6s ease, transform .6s ease;\n  }\n  .foStage.hidden{ opacity:0; transform: translateY(-12vh); pointer-events:none; }\n\n  \/* === Master sizing (tweak vars to scale the whole pyramid) === *\/\n  #foPyramid{\n    --pyrW: clamp(320px, 70vmin, 980px);   \/* overall pyramid width *\/\n    --gap:  clamp(12px, 2.4vmin, 24px);    \/* spacing between tiers *\/\n    --padY: clamp(12px, 2.2vmin, 24px);    \/* vertical padding per button *\/\n    --padX: clamp(16px, 3.0vmin, 36px);    \/* horizontal padding per button *\/\n    --fs:   clamp(14px, 2.2vmin, 22px);    \/* label size *\/\n    --emoji:clamp(22px, 4.2vmin, 40px);    \/* emoji size *\/\n    --radius: 14px;\n    --border: .45vmin;\n\n    width: var(--pyrW);\n    display: grid;\n    grid-template-columns: 1fr;\n    grid-auto-rows: min-content;\n    gap: var(--gap);\n    padding-inline: 2vmin;\n  }\n\n  .pyr-btn{\n    background: rgba(0,0,0,.65);\n    border: var(--border) solid cyan;\n    border-radius: var(--radius);\n    color: #fff; font-family: Orbitron, sans-serif; font-weight: 800;\n    display:flex; align-items:center; justify-content:center; flex-direction:column;\n    text-align:center; box-shadow: 0 0 2.6vmin cyan;\n    cursor:pointer; -webkit-tap-highlight-color: transparent;\n    padding: var(--padY) var(--padX);\n    min-height: clamp(56px, 10vmin, 120px);\n    gap: .35em;\n    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;\n    width: 100%;\n  }\n  .pyr-btn:hover{ transform: translateY(-2px); box-shadow: 0 0 3.2vmin cyan; }\n\n  .pyr-btn .emoji{ font-size: var(--emoji); line-height:1; }\n  .pyr-btn .label{ font-size: var(--fs);   line-height:1.1; }\n\n  \/* Pyramid widths per tier (top < mid < bottom) *\/\n  .tier-top{    max-width: calc(var(--pyrW) * 0.54); margin: 0 auto; }\n  .tier-mid{    max-width: calc(var(--pyrW) * 0.72); margin: 0 auto; }\n  .tier-bottom{ max-width: calc(var(--pyrW) * 0.98); margin: 0 auto; }\n\n  \/* Phones: go full width for readability *\/\n  @media (max-width: 560px){\n    #foPyramid{ --pyrW: 92vmin; padding-inline: 0; }\n    .tier-top, .tier-mid, .tier-bottom{ max-width: 100%; }\n  }\n<\/style>\n\n<script>\n  function activatepacketsCube() {\n    const selector = document.getElementById(\"foSelector\");\n    if (selector) selector.classList.add(\"hidden\");\n\n    const cube  = document.getElementById(\"packetsCubeContainer\");\n    const map   = document.getElementById(\"glowMapContainer\");\n    const swipe = document.getElementById(\"swipeImage\");\n\n    if (cube){ cube.style.opacity = \"1\"; cube.style.pointerEvents = \"auto\"; }\n    if (map){  map.style.opacity  = \"1\"; map.style.pointerEvents  = \"auto\"; }\n\n    if (swipe){\n      swipe.style.display = \"block\";\n      setTimeout(()=>{ swipe.style.display = \"none\"; }, 3500);\n    }\n  }\n<\/script>\n\n\n\n<!-- BLOQUE 2 - Packets Cube V19 Completo + Mapa Circular + API -->\n<style>\n  @media (max-width: 768px) {\n    #glowMapContainer {\n      margin-top: -80px !important;\n    }\n  }\n<\/style>\n<div id=\"packetsCubeContainer\" style=\"opacity:0; pointer-events:none; 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=\"packetsCube\" 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;\">\u2728<\/div>\n        <div style=\"font-size:16px; color:white; font-weight:bold; text-shadow:0 0 10px white; margin-top:6px;\">Packets<\/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 (Air) -->\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('air-accomodations')\" style=\"position:absolute; top:8px; left:27px; width:126px; height:17px; border:1px solid beige; color:white; background:transparent;\">Accommodations<\/button>\n        <button onclick=\"showHostButtons('air-transpor')\" style=\"position:absolute; bottom:8px; left:27px; width:126px; height:17px; border:1px solid beige; color:white; background:transparent;\">Transportation<\/button>\n        <button onclick=\"showHostButtons('air-entertainment')\" style=\"position:absolute; top:27px; left:8px; height:126px; width:17px; border:1px solid beige; color:white; writing-mode:vertical-rl; background:transparent;\">Entertainment<\/button>\n        <button onclick=\"showHostButtons('air-tour')\" style=\"position:absolute; top:27px; right:8px; height:126px; width:17px; border:1px solid beige; color:white; writing-mode:vertical-lr; background:transparent;\">Tour<\/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;\">Air<\/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 (Water) -->\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('wat-accomodations')\" style=\"position:absolute; top:8px; left:27px; width:126px; height:17px; border:1px solid #00ccff; color:white; background:transparent;\">Accommodations<\/button>\n        <button onclick=\"showHostButtons('wat-transport')\" style=\"position:absolute; bottom:8px; left:27px; width:126px; height:17px; border:1px solid #00ccff; color:white; background:transparent;\">Transportation<\/button>\n        <button onclick=\"showHostButtons('wat-entertainment')\" style=\"position:absolute; top:27px; left:8px; height:126px; width:17px; border:1px solid #00ccff; color:white; writing-mode:vertical-rl; background:transparent;\">Entertainment<\/button>\n        <button onclick=\"showHostButtons('wat-tour')\" style=\"position:absolute; top:27px; right:8px; height:126px; width:17px; border:1px solid #00ccff; color:white; writing-mode:vertical-lr; background:transparent;\">Tour<\/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;\">Water<\/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 (Earth) -->\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('ear-accomodations')\" style=\"position:absolute; top:8px; left:27px; width:126px; height:17px; border:1px solid green; color:white; background:transparent;\">Accommodations<\/button>\n        <button onclick=\"showHostButtons('ear-transporta')\" style=\"position:absolute; bottom:8px; left:27px; width:126px; height:17px; border:1px solid green; color:white; background:transparent;\">Transportation<\/button>\n        <button onclick=\"showHostButtons('ear-entertainment')\" style=\"position:absolute; top:27px; left:8px; height:126px; width:17px; border:1px solid green; color:white; writing-mode:vertical-rl; background:transparent;\">Entertainment<\/button>\n        <button onclick=\"showHostButtons('ear-tour')\" style=\"position:absolute; top:27px; right:8px; height:126px; width:17px; border:1px solid green; color:white; writing-mode:vertical-lr; background:transparent;\">Tour<\/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;\">Earth<\/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 (Fire) -->\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('fire-accomodations')\" style=\"position:absolute; top:8px; left:27px; width:126px; height:17px; border:1px solid red; color:white; background:transparent;\">Accommodations<\/button>\n        <button onclick=\"showHostButtons('fire-transportat')\" style=\"position:absolute; bottom:8px; left:27px; width:126px; height:17px; border:1px solid red; color:white; background:transparent;\">Transportation<\/button>\n        <button onclick=\"showHostButtons('fire-entertainment')\" style=\"position:absolute; top:27px; left:8px; height:126px; width:17px; border:1px solid red; color:white; writing-mode:vertical-rl; background:transparent;\">Entertainment<\/button>\n        <button onclick=\"showHostButtons('fire-tour')\" style=\"position:absolute; top:27px; right:8px; height:126px; width:17px; border:1px solid red; color:white; writing-mode:vertical-lr; background:transparent;\">Tour<\/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;\">Fire<\/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:0; pointer-events:none; 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;\">\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  const selector = document.getElementById(\"level8Selector\");\nif (selector) {\n  selector.style.opacity = \"0\";\n  selector.style.pointerEvents = \"none\";\n  setTimeout(() => {\n    selector.style.display = \"none\";\n  }, 600);\n}\n\n\n    \/\/ Muestra el contenedor del cubo Packets\n    const container = document.getElementById(\"packetsCubeContainer\");\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<!-- BLOQUE 3 \u2013 Movimiento + Swipe + SignIn + Favoritos (First You) -->\n\n<!-- ESTILOS -->\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;\n  }\n\n  #favoritesBtn:hover::after {\n    content: ' Double click a Host to add \ud83d\udc98';\n    font-size: 10px;\n    margin-left: 8px;\n    color: cyan;\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  }\n  #cityCardBtn:hover {\n    box-shadow: 0 0 16px cyan;\n    transform: translateY(-1px);\n  }\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; \/* glow *\/\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 20px; \/* emoji size *\/\n    cursor: pointer;\n    margin-top: 2px; \/* align with rose *\/\n  }\n\n  #pyramidBtn:hover {\n    transform: scale(1.2);\n  }\n\n#roseBtn {\n  width: 38px;\n  height: 38px;\n  background-color: black; \/* Keep black background *\/\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; \/* Optional white border *\/\n  border-radius: 50%;\n  box-shadow: 0 0 10px white; \/* White glow around the button *\/\n  cursor: pointer;\n  margin-top: 2px; \/* Adjust position to align with others *\/\n}\n\n#roseBtn:hover {\n  transform: scale(1.2);\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  #swipeImage {\n    position: fixed;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 160px;\n    z-index: 1200;\n    display: none;\n  }\n#swipeImage {\n  display: none !important;\n}\n\n<\/style>\n\n<!-- BOTONES FLOTANTES -->\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<button id=\"roseBtn\"><\/button>\n\n  <button id=\"favoritesBtn\">\ud83d\udc96<\/button>\n  <button id=\"signinBtn\">Sign In \/ Sign Up<\/button>\n<\/div>\n\n<!-- IMAGEN DE SWIPE -->\n<img decoding=\"async\" id=\"swipeImage\" src=\"https:\/\/godsgalaxygame.com\/GGG\/wp-content\/uploads\/2025\/06\/Screenshot_20250627_154147_Gallery.jpg\" alt=\"Swipe\" \/>\n\n<!-- SCRIPT DE FUNCIONALIDAD -->\n<script>\n  \/\/ Movimiento del cubo Packets \n  let isDragging = false, startX, startY, rotateX = 0, rotateY = 0;\n  const cube = document.getElementById('packetsCube');\n\n  function updateRotation(x, y) {\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  const cubeContainer = document.querySelector('.cube-scene');\n  if (cubeContainer) {\n    cubeContainer.addEventListener('mousedown', onMouseDown);\n    window.addEventListener('mousemove', onMouseMove);\n    window.addEventListener('mouseup', onMouseUp);\n    cubeContainer.addEventListener('touchstart', onTouchStart);\n    window.addEventListener('touchmove', onTouchMove);\n    window.addEventListener('touchend', onTouchEnd);\n  }\n\n  \/\/ Swipe image cuando aparece el cubo Packets\n  const observer = new MutationObserver(() => {\n    const packets = document.getElementById('packetCubeContainer');\n    if (packets && packets.style.opacity === \"1\") {\n      const swipe = document.getElementById('swipeImage');\n      swipe.style.display = 'block';\n      setTimeout(() => {\n        swipe.style.display = 'none';\n      }, 3500);\n      observer.disconnect();\n    }\n  });\n  observer.observe(document.body, { childList: true, subtree: true });\n\n  \/\/ Sistema de favoritos \ud83d\udc96 \u2192 \ud83d\udc98\n  const favorites = [];\n\n  function toggleFavorite(id, imgUrl, mapLat, mapLng) {\n    if (!favorites.some(f => f.id === id)) {\n      favorites.push({ id, imgUrl, lat: mapLat, lng: mapLng });\n      document.getElementById(\"favoritesBtn\").textContent = \"\ud83d\udc98\";\n      console.log(\"Favorito agregado:\", id);\n    }\n  }\n\n  function clearFavorites() {\n    favorites.length = 0;\n    document.getElementById(\"favoritesBtn\").textContent = \"\ud83d\udc96\";\n  }\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  document.getElementById(\"favoritesBtn\").addEventListener(\"click\", () => {\n    if (favorites.length === 0) return;\n    document.querySelectorAll('.host-circle').forEach(btn => btn.style.display = 'none');\n    favorites.forEach(fav => {\n      const existing = document.querySelector(`.${fav.id}`);\n      if (existing) existing.style.display = 'inline-block';\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 air air-accomodations 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 air air-transpor 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 air air-entertainment 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 air air-tour 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 wat wat-accomodations 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 wat wat-transport 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 wat wat-entertainment 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 wat wat-tour 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 ear ear-accomodations 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 ear ear-transporta 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 ear ear-entertainment 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 ear ear-tour 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 fire fire-accomodations 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 fire fire-transportat 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 fire fire-entertainment 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 fire fire-tour 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<!-- ==========================================================\nPACKETS POPUP v3 \u2014 PREMIUM TABBED LAYOUT (ALL 4 SIDES)\n\u2705 Opens ONLY from clicking #hostButtons .host-circle\n\u2705 Reclaims vertical space: strips become TABS (one visible at a time)\n\u2705 Adds a BIG \u201cOptions Panel\u201d (perfect for Transportation bottom options)\n\u2705 Builds galleries from your circle images automatically\n\u2705 Adds Transportation option buttons (Rent \/ Coins \/ CityCard \/ Avatar) + placeholder prices\n\u2705 Sends professional email to Godsgalaxygame@gmail.com (90-min presentation required)\n\u2705 DOES NOT touch your initMap or host circle system\n========================================================== -->\n\n<style>\n  #pkt2Overlay{\n    position:fixed; inset:0;\n    display:none;\n    align-items:center; justify-content:center;\n    z-index:99999999;\n    background:\n      radial-gradient(circle at 12% 0%, rgba(0,255,255,.20), transparent 55%),\n      radial-gradient(circle at 88% 100%, rgba(255,215,0,.14), transparent 60%),\n      rgba(0,0,0,.90);\n    opacity:0;\n    transform:scale(1.02);\n    transition:opacity .22s ease, transform .22s ease;\n    font-family: Orbitron, system-ui, sans-serif !important;\n    padding:16px;\n  }\n  #pkt2Overlay.pkt2Open{ opacity:1; transform:scale(1); }\n\n  #pkt2Modal{\n    width:min(1100px, 96vw);\n    max-height:min(90vh, 980px);\n    overflow:hidden;\n    border-radius:26px;\n    border:1px solid rgba(255,255,255,.16);\n    background: linear-gradient(135deg, rgba(10,12,18,.92), rgba(18,18,26,.82));\n    box-shadow: 0 0 60px rgba(0,255,255,.14), 0 0 120px rgba(255,215,0,.08);\n    position:relative;\n  }\n  #pkt2Modal::before{\n    content:\"\";\n    position:absolute; left:0; right:0; top:0; height:2px;\n    background: linear-gradient(90deg, transparent, rgba(0,255,255,.65), rgba(255,215,0,.55), transparent);\n    opacity:.9; pointer-events:none;\n  }\n\n  .pkt2Head{\n    display:flex; align-items:center; justify-content:space-between;\n    gap:12px;\n    padding:14px 16px 10px;\n  }\n  .pkt2Left{ display:flex; align-items:center; gap:12px; min-width:0; }\n  .pkt2Hero{\n    width:54px; height:54px; border-radius:16px;\n    border:1px solid rgba(255,255,255,.18);\n    background: radial-gradient(circle at 30% 30%, rgba(0,255,255,.22), rgba(0,0,0,.65));\n    box-shadow:0 0 22px rgba(0,255,255,.18);\n    overflow:hidden; flex:0 0 auto;\n  }\n  .pkt2Hero img{ width:100%; height:100%; object-fit:cover; opacity:.96; }\n\n  .pkt2Title{\n    margin:0; color:#fff; font-weight:900; letter-spacing:.08em;\n    text-transform:uppercase; font-size:13px;\n    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\n  }\n  .pkt2Sub{\n    margin:4px 0 0; color:rgba(255,255,255,.74);\n    font-size:12px; line-height:1.2;\n  }\n\n  .pkt2Close{\n    width:44px; height:44px; border-radius:14px;\n    border:1px solid rgba(255,255,255,.16);\n    background: rgba(0,0,0,.35);\n    color:#fff; cursor:pointer;\n    box-shadow: 0 0 18px rgba(0,255,255,.10);\n  }\n  .pkt2Close:hover{ transform:scale(1.03); }\n\n  .pkt2Body{\n    padding:10px 16px 16px;\n    display:grid;\n    grid-template-columns: 1.35fr .85fr;\n    gap:14px;\n  }\n\n  .pkt2Card{\n    border-radius:22px;\n    border:1px solid rgba(255,255,255,.14);\n    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.28));\n    box-shadow: 0 0 26px rgba(0,255,255,.10);\n    padding:14px;\n    overflow:hidden;\n  }\n  .pkt2Card h4{\n    margin:0 0 8px;\n    color:#fff;\n    font-size:12px;\n    letter-spacing:.08em;\n    text-transform:uppercase;\n  }\n  .pkt2P{\n    margin:0;\n    color:rgba(255,255,255,.80);\n    font-size:13px;\n    line-height:1.35;\n  }\n\n  .pkt2Row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }\n  .pkt2Chip{\n    padding:8px 10px;\n    border-radius:16px;\n    border:1px solid rgba(255,255,255,.14);\n    background: rgba(0,0,0,.26);\n    color:#fff; font-size:12px;\n  }\n\n  .pkt2Divider{ height:1px; background: rgba(255,255,255,.10); margin:12px 0; }\n\n  \/* ===== TAB SYSTEM (reclaims vertical space) ===== *\/\n  .pkt2Tabs{\n    display:flex;\n    gap:10px;\n    margin:10px 0 10px;\n  }\n  .pkt2Tab{\n    flex:1;\n    text-align:center;\n    padding:10px 10px;\n    border-radius:14px;\n    border:1px solid rgba(255,255,255,.18);\n    background: rgba(0,0,0,.35);\n    color:#fff;\n    font-size:11px;\n    font-weight:900;\n    letter-spacing:.08em;\n    text-transform:uppercase;\n    cursor:pointer;\n    user-select:none;\n  }\n  .pkt2Tab.active{\n    background: linear-gradient(135deg, rgba(0,255,255,.25), rgba(255,215,0,.15));\n    box-shadow:0 0 18px rgba(0,255,255,.35);\n    border-color: rgba(0,255,255,.28);\n  }\n\n  \/* strip itself *\/\n  .pkt2Strip{\n    display:none;                \/* now tabbed *\/\n    gap:10px;\n    overflow:auto;\n    padding-bottom:6px;\n    scrollbar-width: thin;\n  }\n  .pkt2Strip.active{ display:flex; }\n\n  .pkt2Thumb{\n    width:92px; height:92px;\n    border-radius:18px;\n    border:1px solid rgba(255,255,255,.16);\n    background: rgba(0,0,0,.35);\n    box-shadow: 0 0 18px rgba(0,255,255,.10);\n    background-size:cover;\n    background-position:center;\n    flex:0 0 auto;\n    cursor:pointer;\n    position:relative;\n  }\n  .pkt2Thumb::after{\n    content:\"\";\n    position:absolute; inset:0;\n    border-radius:18px;\n    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);\n    pointer-events:none;\n  }\n  .pkt2Thumb:hover{ transform: translateY(-1px) scale(1.02); }\n\n  \/* ===== Options Panel (big area for bottom options) ===== *\/\n  #pkt2OptionsPanel{\n    margin-top:10px;\n    padding:12px;\n    border-radius:18px;\n    border:1px solid rgba(255,255,255,.16);\n    background: rgba(0,0,0,.25);\n    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);\n    min-height:170px;\n  }\n  #pkt2OptionsTitle{\n    margin:0 0 6px;\n    color:#fff;\n    font-size:12px;\n    letter-spacing:.08em;\n    text-transform:uppercase;\n    font-weight:900;\n  }\n  #pkt2OptionsDesc{\n    margin:0;\n    color:rgba(255,255,255,.74);\n    font-size:12px;\n    line-height:1.25;\n  }\n\n  .pkt2Pills{\n    display:flex;\n    gap:10px;\n    flex-wrap:wrap;\n    margin-top:10px;\n  }\n  .pkt2Pill{\n    padding:10px 12px;\n    border-radius:18px;\n    border:1px solid rgba(255,255,255,.16);\n    background: rgba(0,0,0,.28);\n    color:#fff;\n    font-size:12px;\n    font-weight:900;\n    letter-spacing:.05em;\n    text-transform:uppercase;\n    cursor:pointer;\n    box-shadow:0 0 18px rgba(0,255,255,.10);\n  }\n  .pkt2Pill:hover{ transform: translateY(-1px) scale(1.02); }\n  .pkt2Pill small{\n    display:block;\n    margin-top:4px;\n    font-weight:500;\n    opacity:.72;\n    text-transform:none;\n    letter-spacing:0;\n  }\n\n  .pkt2Opt{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }\n  .pkt2Radio{\n    display:flex; align-items:flex-start; gap:10px;\n    padding:10px 10px;\n    border-radius:18px;\n    border:1px solid rgba(255,255,255,.14);\n    background: rgba(0,0,0,.24);\n    cursor:pointer;\n  }\n  .pkt2Radio input{ margin-top:2px; }\n  .pkt2Radio b{\n    color:#fff;\n    font-size:12px;\n    letter-spacing:.06em;\n    text-transform:uppercase;\n  }\n  .pkt2Radio span{\n    display:block;\n    color:rgba(255,255,255,.72);\n    font-size:12px;\n    margin-top:3px;\n    line-height:1.25;\n  }\n  .pkt2Price{\n    margin-left:auto;\n    color:#fff;\n    font-weight:900;\n    white-space:nowrap;\n  }\n\n  .pkt2Form{\n    display:grid;\n    grid-template-columns: 1fr 1fr;\n    gap:10px;\n    margin-top:10px;\n  }\n  .pkt2Form input, .pkt2Form textarea{\n    width:100%;\n    border-radius:16px;\n    border:1px solid rgba(255,255,255,.14);\n    background: rgba(0,0,0,.28);\n    color:#fff;\n    padding:10px 10px;\n    font-family: Orbitron, system-ui, sans-serif !important;\n    font-size:12px;\n    outline:none;\n  }\n  .pkt2Form textarea{\n    grid-column: 1 \/ -1;\n    min-height:92px;\n    resize:vertical;\n  }\n\/* \u2705 Mobile: allow the tabs row to scroll horizontally so \"ENTERTAIN\" is visible *\/\n@media (max-width: 520px){\n  .pkt2Tabs{\n    overflow-x:auto;\n    overflow-y:hidden;\n    -webkit-overflow-scrolling: touch;\n    scroll-snap-type: x proximity;\n    gap:10px;\n    padding: 2px 10px 10px;     \/* left\/right padding so last tab isn't clipped *\/\n    margin-left:-10px;          \/* optional: aligns with card padding *\/\n    margin-right:-10px;         \/* optional: aligns with card padding *\/\n    flex-wrap:nowrap;\n  }\n\n  \/* each tab becomes \u201cchip sized\u201d instead of forced equal width *\/\n  .pkt2Tab{\n    flex: 0 0 auto !important;\n    min-width: 122px;           \/* enough to show ENTERTAIN *\/\n    scroll-snap-align: start;\n    white-space: nowrap;\n  }\n}\n\n\/* Optional: if you want ALL tabs to fit without scrolling, shrink text a bit *\/\n@media (max-width: 380px){\n  .pkt2Tab{ font-size:10px; padding:9px 10px; min-width:110px; }\n}\n\n\n  .pkt2Actions{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }\n  .pkt2Btn{\n    width:100%;\n    border-radius:18px;\n    padding:12px 12px;\n    border:1px solid rgba(255,255,255,.18);\n    background: rgba(0,0,0,.30);\n    color:#fff;\n    font-weight:900;\n    letter-spacing:.06em;\n    text-transform:uppercase;\n    font-size:12px;\n    cursor:pointer;\n    box-shadow:0 0 22px rgba(0,255,255,.10);\n  }\n  .pkt2BtnPrimary{\n    background: linear-gradient(135deg, rgba(0,255,255,.22), rgba(255,215,0,.12));\n    border-color: rgba(0,255,255,.32);\n  }\n  .pkt2Btn:hover{ transform: translateY(-1px); }\n\n  .pkt2Tiny{\n    margin-top:10px;\n    font-size:11px;\n    color:rgba(255,255,255,.62);\n    line-height:1.35;\n    white-space:pre-wrap;\n  }\n\/* ===== Make LEFT panel scrollable if content is taller than screen ===== *\/\n.pkt2Card:first-child{\n  max-height: calc(100vh - 210px);   \/* keeps header + margins visible *\/\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  -webkit-overflow-scrolling: touch;\n  padding-right: 10px;              \/* space for scrollbar *\/\n}\n\n\/* Optional: style scrollbar (looks premium) *\/\n.pkt2Card:first-child::-webkit-scrollbar{\n  width: 6px;\n}\n.pkt2Card:first-child::-webkit-scrollbar-thumb{\n  background: linear-gradient(180deg, rgba(0,255,255,.4), rgba(255,215,0,.4));\n  border-radius: 6px;\n}\n\n\n  @media (max-width: 980px){\n    .pkt2Body{ grid-template-columns: 1fr; }\n    .pkt2Form{ grid-template-columns: 1fr; }\n  }\n<\/style>\n\n<div id=\"pkt2Overlay\" aria-hidden=\"true\">\n  <div id=\"pkt2Modal\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"pkt2Head\">\n      <div class=\"pkt2Left\">\n        <div class=\"pkt2Hero\"><img id=\"pkt2HeroImg\" alt=\"\"><\/div>\n        <div style=\"min-width:0\">\n          <p class=\"pkt2Title\" id=\"pkt2Title\">Discount Packets<\/p>\n          <p class=\"pkt2Sub\" id=\"pkt2Sub\">\n            To qualify for promotional discount pricing, attendance at a 90-minute ownership presentation is required.\n          <\/p>\n        <\/div>\n      <\/div>\n      <button class=\"pkt2Close\" id=\"pkt2Close\" type=\"button\">\u2715<\/button>\n    <\/div>\n\n    <div class=\"pkt2Body\">\n      <!-- LEFT -->\n      <div class=\"pkt2Card\">\n        <h4>Selected Circle<\/h4>\n        <p class=\"pkt2P\" id=\"pkt2SelectedDesc\"><\/p>\n\n        <div class=\"pkt2Row\" id=\"pkt2MetaRow\"><\/div>\n\n        <div class=\"pkt2Divider\"><\/div>\n\n        <!-- \u2705 TAB BAR (ONE strip visible at a time) -->\n        <div class=\"pkt2Tabs\" id=\"pkt2Tabs\">\n          <div class=\"pkt2Tab active\" data-tab=\"acc\">Accom<\/div>\n          <div class=\"pkt2Tab\" data-tab=\"tour\">Tours<\/div>\n          <div class=\"pkt2Tab\" data-tab=\"trans\">Transport<\/div>\n          <div class=\"pkt2Tab\" data-tab=\"ent\">Entertain<\/div>\n        <\/div>\n\n        <!-- \u2705 STRIPS -->\n        <div class=\"pkt2Strip active\" id=\"pkt2AccStrip\"><\/div>\n        <div class=\"pkt2Strip\" id=\"pkt2TourStrip\"><\/div>\n        <div class=\"pkt2Strip\" id=\"pkt2TransportStrip\"><\/div>\n        <div class=\"pkt2Strip\" id=\"pkt2EntStrip\"><\/div>\n\n        <!-- \u2705 BIG OPTIONS PANEL (shows \u201cbottom options\u201d for Transportation) -->\n        <div id=\"pkt2OptionsPanel\">\n          <div id=\"pkt2OptionsTitle\">Options<\/div>\n          <p id=\"pkt2OptionsDesc\" style=\"margin:0\"><\/p>\n          <div class=\"pkt2Pills\" id=\"pkt2OptionsPills\"><\/div>\n        <\/div>\n\n        <div class=\"pkt2Tiny\">\nTap any image to preview it on the header icon. Strips are built from your host circle images automatically.\n        <\/div>\n      <\/div>\n\n      <!-- RIGHT -->\n      <div class=\"pkt2Card\">\n        <h4>Choose Packet<\/h4>\n\n        <div class=\"pkt2Opt\" id=\"pkt2Options\">\n          <label class=\"pkt2Radio\">\n            <input type=\"radio\" name=\"pkt2Choice\" value=\"Accommodations Discount Packet\" \/>\n            <div>\n              <b>Accommodations Packet<\/b>\n              <span>Discounts on select accommodations (subject to availability\/blackouts).<\/span>\n            <\/div>\n            <div class=\"pkt2Price\">$299*<\/div>\n          <\/label>\n\n          <label class=\"pkt2Radio\">\n            <input type=\"radio\" name=\"pkt2Choice\" value=\"Tours Discount Packet\" \/>\n            <div>\n              <b>Tours Packet<\/b>\n              <span>Discounts on tours and curated experiences (terms apply).<\/span>\n            <\/div>\n            <div class=\"pkt2Price\">$399*<\/div>\n          <\/label>\n\n          <label class=\"pkt2Radio\">\n            <input type=\"radio\" name=\"pkt2Choice\" value=\"Transportation Discount Packet\" \/>\n            <div>\n              <b>Transportation Packet<\/b>\n              <span>Discounts on select transportation options (availability\/terms apply).<\/span>\n            <\/div>\n            <div class=\"pkt2Price\">$249*<\/div>\n          <\/label>\n\n          <label class=\"pkt2Radio\">\n            <input type=\"radio\" name=\"pkt2Choice\" value=\"Entertainment Discount Packet\" \/>\n            <div>\n              <b>Entertainment Packet<\/b>\n              <span>Discounts on entertainment experiences (terms apply).<\/span>\n            <\/div>\n            <div class=\"pkt2Price\">$199*<\/div>\n          <\/label>\n\n          <label class=\"pkt2Radio\">\n            <input type=\"radio\" name=\"pkt2Choice\" value=\"Full Experience Discount Packet\" \/>\n            <div>\n              <b>Everything Packet<\/b>\n              <span>Best value: accommodations + tours + transportation + entertainment (terms apply).<\/span>\n            <\/div>\n            <div class=\"pkt2Price\">$699*<\/div>\n          <\/label>\n        <\/div>\n\n        <div class=\"pkt2Divider\"><\/div>\n\n        <h4>Your Request<\/h4>\n        <div class=\"pkt2Form\">\n          <input id=\"pkt2Name\" type=\"text\" placeholder=\"Full Name\" \/>\n          <input id=\"pkt2Email\" type=\"email\" placeholder=\"Email\" \/>\n          <input id=\"pkt2Phone\" type=\"text\" placeholder=\"Phone \/ WhatsApp\" \/>\n          <input id=\"pkt2Dates\" type=\"text\" placeholder=\"Preferred Dates (optional)\" \/>\n          <textarea id=\"pkt2Notes\" placeholder=\"Notes (group size, city, preferences, tour type, etc.)\"><\/textarea>\n        <\/div>\n\n        <div class=\"pkt2Actions\">\n          <button class=\"pkt2Btn pkt2BtnPrimary\" id=\"pkt2SendEmail\" type=\"button\">Send Request Email<\/button>\n          <button class=\"pkt2Btn\" id=\"pkt2Copy\" type=\"button\">Copy Request Text<\/button>\n          <button class=\"pkt2Btn\" id=\"pkt2Close2\" type=\"button\">Close<\/button>\n        <\/div>\n\n        <div class=\"pkt2Tiny\" id=\"pkt2Preview\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  const overlay  = document.getElementById('pkt2Overlay');\n  const heroImg  = document.getElementById('pkt2HeroImg');\n  const titleEl  = document.getElementById('pkt2Title');\n  const subEl    = document.getElementById('pkt2Sub');\n  const descEl   = document.getElementById('pkt2SelectedDesc');\n  const metaRow  = document.getElementById('pkt2MetaRow');\n\n  const accStrip = document.getElementById('pkt2AccStrip');\n  const tourStrip= document.getElementById('pkt2TourStrip');\n  const trStrip  = document.getElementById('pkt2TransportStrip');\n  const entStrip = document.getElementById('pkt2EntStrip');\n\n  const tabsWrap = document.getElementById('pkt2Tabs');\n\n  const optTitle = document.getElementById('pkt2OptionsTitle');\n  const optDesc  = document.getElementById('pkt2OptionsDesc');\n  const optPills = document.getElementById('pkt2OptionsPills');\n\n  const preview  = document.getElementById('pkt2Preview');\n\n  const nameIn   = document.getElementById('pkt2Name');\n  const emailIn  = document.getElementById('pkt2Email');\n  const phoneIn  = document.getElementById('pkt2Phone');\n  const datesIn  = document.getElementById('pkt2Dates');\n  const notesIn  = document.getElementById('pkt2Notes');\n\n  const sendBtn  = document.getElementById('pkt2SendEmail');\n  const copyBtn  = document.getElementById('pkt2Copy');\n  const close1   = document.getElementById('pkt2Close');\n  const close2   = document.getElementById('pkt2Close2');\n\n  let current = null;\n\n  function parseBgUrl(bg){\n    const s = bg || '';\n    if(!s.includes('url(')) return '';\n    return s.slice(s.indexOf('url(')+4).replace(')','').replace(\/^[\"']|[\"']$\/g,'').trim();\n  }\n\n  function getSignedName(){\n    const label = [...document.querySelectorAll('*')]\n      .find(el => (el.textContent||'').trim().startsWith('Signed in:'));\n    if(label) return (label.textContent||'').replace('Signed in:','').trim();\n    return localStorage.getItem('gggUserName') ||\n           localStorage.getItem('gggSignedInName') ||\n           localStorage.getItem('signedInName') || '';\n  }\n\n  function elementLabel(btn){\n    const c = btn.classList;\n    if(c.contains('air'))  return 'Air';\n    if(c.contains('wat'))  return 'Water';\n    if(c.contains('ear'))  return 'Earth';\n    if(c.contains('fire')) return 'Fire';\n    return '\u2014';\n  }\n\n  function categoryLabel(btn){\n    const cls = [...btn.classList].join(' ');\n    if(cls.includes('accomodations')) return 'Accommodations';\n    if(cls.includes('tour'))         return 'Tours';\n    if(cls.includes('entertainment'))return 'Entertainment';\n    if(cls.includes('transpor'))     return 'Transportation';\n    return 'Packet Option';\n  }\n\n  function buildStripByFilter(targetStrip, filterFn){\n    targetStrip.innerHTML = '';\n    const all = document.querySelectorAll('#hostButtons .host-circle');\n    let count = 0;\n\n    all.forEach(btn=>{\n      if(!filterFn(btn)) return;\n      const img = parseBgUrl(btn.style.backgroundImage);\n      if(!img) return;\n\n      const t = document.createElement('div');\n      t.className = 'pkt2Thumb';\n      t.style.backgroundImage = `url('${img}')`;\n      t.title = btn.getAttribute('title') || 'Preview';\n      t.addEventListener('click', ()=>{ heroImg.src = img; });\n\n      targetStrip.appendChild(t);\n      count++;\n    });\n\n    if(count === 0){\n      const empty = document.createElement('div');\n      empty.className = 'pkt2P';\n      empty.style.opacity = '.65';\n      empty.textContent = 'No images found yet for this section.';\n      targetStrip.appendChild(empty);\n    }\n  }\n\n  function chosenPacket(){\n    const r = document.querySelector('input[name=\"pkt2Choice\"]:checked');\n    return r ? r.value : '';\n  }\n\n  function renderPreview(){\n    const packet = chosenPacket() || '(not selected yet)';\n    const nm = (nameIn.value || '').trim();\n    const em = (emailIn.value || '').trim();\n    const ph = (phoneIn.value || '').trim();\n    const dt = (datesIn.value || '').trim();\n    const nt = (notesIn.value || '').trim();\n\n    const text =\n`DISCOUNT PACKETS \u2014 REQUEST (Gods Galaxy Game)\n\nClient Information\n- Name: ${nm || '(not provided)'}\n- Email: ${em || '(not provided)'}\n- Phone\/WhatsApp: ${ph || '(not provided)'}\n- Preferred Dates: ${dt || '(not provided)'}\n\nPacket Selection\n- Selected Packet: ${packet}\n- Element: ${current ? current.element : '\u2014'}\n- Category Clicked: ${current ? current.category : '\u2014'}\n- Circle: ${current ? current.circleTitle : '\u2014'}\n\nImportant Qualification Requirement\n- Client acknowledges promotional discount pricing requires attendance at a 90-minute ownership presentation.\n\nLocation (reference)\n- Lat\/Lng: ${current && current.lat && current.lng ? (current.lat + ',' + current.lng) : '(n\/a)'}\n\nNotes\n${nt || '(none)'}`;\n\n    preview.textContent = text;\n    return text;\n  }\n\n  \/* ===== Options Panel content (Transportation bottom options) ===== *\/\n  function setOptionsPanel(title, desc, pills){\n    optTitle.textContent = title || 'Options';\n    optDesc.textContent  = desc || '';\n    optPills.innerHTML   = '';\n\n    (pills || []).forEach(p=>{\n      const b = document.createElement('button');\n      b.type = 'button';\n      b.className = 'pkt2Pill';\n      b.innerHTML = `${p.label}${p.price ? `<small>${p.price}*<\/small>` : `<small>Request pricing<\/small>`}`;\n      b.addEventListener('click', ()=>{\n        const line = `${title}: ${p.label}${p.price ? ' ('+p.price+'*)' : ''}`;\n        const cur = (notesIn.value || '').trim();\n        notesIn.value = cur ? (cur + '\\n' + line) : line;\n        renderPreview();\n      });\n      optPills.appendChild(b);\n    });\n\n    if(!pills || !pills.length){\n      const d = document.createElement('div');\n      d.className = 'pkt2P';\n      d.style.opacity = '.7';\n      d.textContent = 'No options configured yet for this section.';\n      optPills.appendChild(d);\n    }\n  }\n\n  function showPanelForTab(tabKey){\n    \/\/ Default panels per tab. Edit prices later.\n    if(tabKey === 'acc'){\n      setOptionsPanel(\n        'Accommodations Options',\n        'Select what you want us to quote. We\u2019ll invoice after review.',\n        [\n          {label:'Weekend Stay', price:'$299'},\n          {label:'3-Night Stay', price:'$499'},\n          {label:'5-Night Stay', price:'$799'},\n          {label:'Premium Upgrade', price:'$199'}\n        ]\n      );\n      return;\n    }\n    if(tabKey === 'tour'){\n      setOptionsPanel(\n        'Tours Options',\n        'Choose the tour type for your discount packet request.',\n        [\n          {label:'City Highlights', price:'$199'},\n          {label:'Nature + Views', price:'$249'},\n          {label:'Adventure Day', price:'$299'},\n          {label:'VIP Curated Tour', price:'$399'}\n        ]\n      );\n      return;\n    }\n    if(tabKey === 'ent'){\n      setOptionsPanel(\n        'Entertainment Options',\n        'Pick the entertainment style you want.',\n        [\n          {label:'Nightlife Bundle', price:'$199'},\n          {label:'Events + Tables', price:'$299'},\n          {label:'VIP Entry', price:'$149'},\n          {label:'Full Weekend', price:'$499'}\n        ]\n      );\n      return;\n    }\n    \/\/ TRANSPORT is the important one:\n    setOptionsPanel(\n      'Transportation \u2014 Rent Before Owning',\n      'Choose what you want. This request goes to Godsgalaxygame@gmail.com and we invoice you after review.',\n      [\n        {label:'Rent 1 Day', price:'$149'},\n        {label:'Rent 3 Days', price:'$349'},\n        {label:'Rent 5 Days', price:'$499'},\n        {label:'Rent 1 Week', price:'$799'},\n        {label:'Buy Coins Package', price:'$199'},\n        {label:'City Card Hours Bundle', price:'$499'},\n        {label:'Avatar (1-Year Access)', price:'$199'}\n      ]\n    );\n  }\n\n  \/* ===== Tabs behavior (space saver) ===== *\/\n  function activateTab(tabKey){\n    tabsWrap.querySelectorAll('.pkt2Tab').forEach(t=> t.classList.remove('active'));\n    tabsWrap.querySelectorAll(`.pkt2Tab[data-tab=\"${tabKey}\"]`).forEach(t=> t.classList.add('active'));\n\n    [accStrip, tourStrip, trStrip, entStrip].forEach(s=> s.classList.remove('active'));\n    if(tabKey === 'acc') accStrip.classList.add('active');\n    if(tabKey === 'tour') tourStrip.classList.add('active');\n    if(tabKey === 'trans') trStrip.classList.add('active');\n    if(tabKey === 'ent') entStrip.classList.add('active');\n\n    showPanelForTab(tabKey);\n    renderPreview();\n  }\n\n  function openPopup(btn){\n    const img = parseBgUrl(btn.style.backgroundImage);\n    heroImg.src = img || '';\n\n    const el  = elementLabel(btn);\n    const cat = categoryLabel(btn);\n    const titleText = btn.getAttribute('title') || `${el} \u2022 ${cat}`;\n\n    titleEl.textContent = 'Discount Packets';\n    subEl.textContent =\n      'To qualify for promotional discount pricing, attendance at a 90-minute ownership presentation is required.';\n\n    descEl.textContent =\n      `You clicked: ${titleText}. Choose a packet and options, then submit your request.`;\n\n    metaRow.innerHTML = '';\n    [`Element: ${el}`, `Category: ${cat}`, `Circle: ${titleText}`].forEach(txt=>{\n      const d = document.createElement('div');\n      d.className = 'pkt2Chip';\n      d.textContent = txt;\n      metaRow.appendChild(d);\n    });\n\n    \/\/ Build ALL four galleries from your circles\n    buildStripByFilter(accStrip, (b)=> [...b.classList].join(' ').includes('accomodations'));\n    buildStripByFilter(tourStrip,(b)=> [...b.classList].join(' ').includes('tour'));\n    buildStripByFilter(trStrip,  (b)=> [...b.classList].join(' ').includes('transpor'));\n    buildStripByFilter(entStrip, (b)=> [...b.classList].join(' ').includes('entertainment'));\n\n    \/\/ Prefill signed name\n    const signed = getSignedName();\n    if(signed && !nameIn.value) nameIn.value = signed;\n\n    \/\/ Preselect packet based on clicked category\n    const radios = [...document.querySelectorAll('input[name=\"pkt2Choice\"]')];\n    radios.forEach(r => r.checked = false);\n\n    const pick = (needle)=> radios.find(x => x.value.includes(needle));\n    if(cat === 'Accommodations'){ const r = pick('Accommodations'); if(r) r.checked = true; }\n    else if(cat === 'Tours'){ const r = pick('Tours'); if(r) r.checked = true; }\n    else if(cat === 'Transportation'){ const r = pick('Transportation'); if(r) r.checked = true; }\n    else if(cat === 'Entertainment'){ const r = pick('Entertainment'); if(r) r.checked = true; }\n    else { const r = pick('Full Experience'); if(r) r.checked = true; }\n\n    current = {\n      element: el,\n      category: cat,\n      circleTitle: titleText,\n      img: img || '',\n      lat: btn.dataset.lat || '',\n      lng: btn.dataset.lng || ''\n    };\n\n    overlay.style.display = 'flex';\n    requestAnimationFrame(()=> overlay.classList.add('pkt2Open'));\n    document.body.style.overflow = 'hidden';\n\n    \/\/ \u2705 Choose the best starting tab\n    if(cat === 'Accommodations') activateTab('acc');\n    else if(cat === 'Tours') activateTab('tour');\n    else if(cat === 'Transportation') activateTab('trans');\n    else if(cat === 'Entertainment') activateTab('ent');\n    else activateTab('trans');\n\n    renderPreview();\n  }\n\n  function closePopup(){\n    overlay.classList.remove('pkt2Open');\n    setTimeout(()=>{\n      overlay.style.display = 'none';\n      document.body.style.overflow = '';\n    }, 200);\n  }\n\n  \/\/ Live preview updates\n  document.getElementById('pkt2Modal').addEventListener('input', (e)=>{\n    if(e.target && (\n      e.target.id === 'pkt2Name' || e.target.id === 'pkt2Email' || e.target.id === 'pkt2Phone' ||\n      e.target.id === 'pkt2Dates' || e.target.id === 'pkt2Notes' || e.target.name === 'pkt2Choice'\n    )) renderPreview();\n  });\n  document.getElementById('pkt2Modal').addEventListener('change', (e)=>{\n    if(e.target && e.target.name === 'pkt2Choice') renderPreview();\n  });\n\n  close1.addEventListener('click', closePopup);\n  close2.addEventListener('click', closePopup);\n  overlay.addEventListener('click', (e)=>{ if(e.target === overlay) closePopup(); });\n  document.addEventListener('keydown', (e)=>{ if(e.key === 'Escape' && overlay.style.display === 'flex') closePopup(); });\n\n  sendBtn.addEventListener('click', ()=>{\n    const packet = chosenPacket();\n    if(!packet){\n      alert('Please select a packet first.');\n      return;\n    }\n\n    const subject = encodeURIComponent(`Discount Packets Request \u2014 ${packet}`);\n    const body = encodeURIComponent(renderPreview() + `\n\nProfessional Disclosure (Timeshare \/ Ownership Presentation)\n- Promotional discount pricing is contingent upon the client\u2019s attendance at a 90-minute ownership presentation.\n- Availability, blackout dates, and additional terms may apply.\n- After review, Gods Galaxy Game will issue a formal invoice and written confirmation of the selected packet(s).`);\n\n    window.location.href = `mailto:Godsgalaxygame@gmail.com?subject=${subject}&body=${body}`;\n  });\n\n  copyBtn.addEventListener('click', async ()=>{\n    try{\n      await navigator.clipboard.writeText(renderPreview());\n      copyBtn.textContent = 'Copied \u2705';\n      setTimeout(()=> copyBtn.textContent = 'Copy Request Text', 1100);\n    }catch(e){\n      alert('Copy failed \u2014 you can manually select and copy the preview text.');\n    }\n  });\n\n  \/\/ \u2705 OPEN ONLY when clicking your host circles\n  document.addEventListener('click', function(e){\n    const btn = e.target.closest('#hostButtons .host-circle');\n    if(!btn) return;\n    openPopup(btn);\n  }, true);\n\n  \/\/ \u2705 Tabs click\n  tabsWrap.addEventListener('click', (e)=>{\n    const t = e.target.closest('.pkt2Tab');\n    if(!t) return;\n    activateTab(t.dataset.tab);\n  });\n\n})();\n<\/script>\n\n\n\n- AVATAR -->\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...<\/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","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc51Owners Club \ud83d\udcabRent B4 Own \u2728Packets \u2728 Packets \ud83d\udcb3 Accommodations Transportation Entertainment Tour Air Accommodations Transportation Entertainment Tour Water Accommodations Transportation Entertainment Tour Earth Accommodations Transportation Entertainment Tour Fire \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 Discount Packets To qualify [&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-3236","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages\/3236","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=3236"}],"version-history":[{"count":392,"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages\/3236\/revisions"}],"predecessor-version":[{"id":8162,"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages\/3236\/revisions\/8162"}],"wp:attachment":[{"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/media?parent=3236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}