{"id":3704,"date":"2025-09-08T21:10:03","date_gmt":"2025-09-08T21:10:03","guid":{"rendered":"https:\/\/godsgalaxygame.com\/GGG\/?page_id=3704"},"modified":"2025-11-14T20:04:56","modified_gmt":"2025-11-14T20:04:56","slug":"responsable-reservations","status":"publish","type":"page","link":"https:\/\/godsgalaxygame.com\/GGG\/responsable-reservations\/","title":{"rendered":"Responsable Reservations"},"content":{"rendered":"\n<!-- BLOCK 1 \u2014 Responsible Reservations (grid + centered popup + double-tap picks) -->\n<!-- ===== FULLSCREEN STARFIELD (ASTRO STYLE) for RR ===== -->\n<canvas id=\"rrStarfield\" aria-hidden=\"true\"><\/canvas>\n<style>\n  \/* fixed background behind everything *\/\n  #rrStarfield{\n    position: fixed; inset: 0;\n    width: 100%; height: 100%;\n    display: block; z-index: 0; pointer-events: none;\n  }\n  \/* optional: deep galaxy tint (same vibe as Astro) *\/\n  html, body { background:#000; }\n<\/style>\n<script>\n  (function(){\n    const c = document.getElementById('rrStarfield');\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)); \/\/ same density as Astro\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      \/\/ NOTE: diagonal glide like Astro version (vx + vy)\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 glow like Astro\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\n      requestAnimationFrame(tick);\n    }\n\n    addEventListener('resize', resize, {passive:true});\n    resize(); requestAnimationFrame(tick);\n  })();\n<\/script>\n<!-- ===== end starfield ===== -->\n\n<style>\n  \/* make cube image larger only on desktops (not used in this block, safe to keep) *\/\n  @media (min-width: 1024px) {\n    #rrCubeContainer img {\n      transform: scale(1.4);\n      transition: transform 0.3s ease;\n    }\n    #rrCubeContainer img:hover {\n      transform: scale(1.55);\n    }\n  }\n<\/style>\n\n<style>\n  \/* ====== QUICK KNOBS ====== *\/\n  #rrGrid{\n    --tile: 78px;                 \/* tile size on phones (try 72px) *\/\n    --gap: 10px;                  \/* spacing between tiles *\/\n    --mid-font: 12px;             \/* size of \u201cResponsable \/ Reservations\u201d *\/\n    --mid-tight: 4px;             \/* closeness between those two words *\/\n    --mid-pad: 12px;              \/* side padding so center words never touch tiles *\/\n    --mid-shift: -6px;            \/* nudge center words left(\u2212)\/right(+) *\/\n  }\n  \/* fix: target #rrGrid (the element that exists) *\/\n  @media (max-width:360px){ #rrGrid{ --tile: 70px; --gap: 8px; } }\n  @media (min-width:900px){ #rrGrid{ --tile: 96px; } }\n\n  \/* === DESKTOP: make the grid fill the screen === *\/\n  @media (min-width: 1024px){\n    #rrGrid{\n      --gap: 18px;\n      \/* tile = min(available height \/ 4, available width \/ 3) *\/\n      --tile: calc(\n        min(\n          (92vh - (3 * var(--gap))) \/ 4,\n          (92vw - (2 * var(--gap))) \/ 3\n        )\n      );\n      --mid-font: clamp(16px, calc(var(--tile) \/ 6.4), 28px);\n    }\n    \/* scale inner bits with the tile so the whole block looks full-screen *\/\n    #rrGrid .icon{ font-size: calc(var(--tile) * 0.32); }\n    #rrGrid .name{ font-size: calc(var(--tile) * 0.16); }\n    #rrGrid .tile{ border-radius: calc(var(--tile) * 0.12); }\n    #rrGrid .wrap{ padding: 6px; }\n  }\n\n  \/* ====== GRID ====== *\/\n  #rrGrid{\n    position: fixed; inset: 0; z-index: 5;\n    display: grid; place-items: center;\n    font-family: inherit; -webkit-text-size-adjust: 100%;\n  }\n  #rrGrid .wrap{\n    width: calc(var(--tile)*3 + var(--gap)*2);\n    max-width: 96vw; padding: 4px;\n  }\n  #rrGrid .grid{\n    display: grid;\n    grid-template-columns: repeat(3, var(--tile));\n    grid-template-rows: repeat(4, var(--tile));\n    gap: var(--gap);\n    justify-content: center;\n    grid-template-areas:\n      \"first transport accom\"\n      \"apps  mid        energy\"\n      \"know  mid        shop\"\n      \"respect conserve  difunde\";\n  }\n\n  \/* tiles *\/\n  #rrGrid .tile{\n    position: relative;\n    width: 100%; height: 100%;\n    border-radius: 14px;\n    background: rgba(12,14,25,.78);\n    border: 2px solid rgba(0,255,255,.35);\n    box-shadow: 0 0 0 2px rgba(0,0,0,.35) inset, 0 0 18px rgba(0,255,255,.25);\n    display: flex; flex-direction: column; justify-content: center; align-items: center;\n    gap: 6px;\n    text-decoration: none; color: #eaf6ff; text-align: center;\n    padding: 6px; line-height: 1.12; font-weight: 800;\n    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;\n    -webkit-tap-highlight-color: transparent;\n  }\n  #rrGrid .tile:hover, #rrGrid .tile:focus-visible{\n    transform: translateY(-2px);\n    border-color: rgba(0,255,255,.75);\n    box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset, 0 0 26px rgba(0,255,255,.45);\n    outline: none;\n  }\n\n  \/* emoji on top, label full width under it *\/\n  #rrGrid .icon{ font-size: var(--ic, 24px); line-height: 1; }\n  #rrGrid .name{\n    font-size: var(--fs, 13px);\n    width: 92%; margin: 0 auto;\n    white-space: normal; overflow-wrap: anywhere; word-break: break-word;\n    text-wrap: balance; text-align: center;\n  }\n\n  \/* Selected (added to package) *\/\n  #rrGrid .tile.picked{\n    border-color: rgba(0,255,200,.9);\n    box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset, 0 0 30px rgba(0,255,200,.55);\n  }\n  #rrGrid .tile.picked::after{\n    content: \"\u2713\";\n    position: absolute; top: 6px; right: 8px;\n    font-weight: 900; font-size: 14px; color: #00ffe7;\n    text-shadow: 0 0 8px rgba(0,255,230,.9);\n  }\n\n  \/* center words \u2014 no glow *\/\n  #rrGrid .mid{\n    grid-area: mid; display: grid; grid-template-rows: 1fr 1fr; align-items: center;\n    padding-inline: var(--mid-pad); pointer-events: none; z-index: 10;\n  }\n  #rrGrid .mid .word{\n    justify-self: center; text-align: center;\n    font-size: var(--mid-font); font-weight: 900; color:#fff; letter-spacing:.1px;\n    white-space: nowrap; transform: translateX(var(--mid-shift));\n  }\n  #rrGrid .mid .top{    align-self: end;   margin-bottom: var(--mid-tight); }\n  #rrGrid .mid .bottom{ align-self: start; margin-top:    var(--mid-tight); }\n\n  \/* grid areas *\/\n  #rrGrid .first    { grid-area: first; }\n  #rrGrid .transport{ grid-area: transport; }\n  #rrGrid .accom    { grid-area: accom; }\n  #rrGrid .apps     { grid-area: apps; }\n  #rrGrid .energy   { grid-area: energy; }\n  #rrGrid .know     { grid-area: know; }\n  #rrGrid .shop     { grid-area: shop; }\n  #rrGrid .respect  { grid-area: respect; }\n  #rrGrid .conserve { grid-area: conserve; }\n  #rrGrid .difunde  { grid-area: difunde; }\n\n  \/* ====== TOAST & PACKAGE BADGE ====== *\/\n  #rrToast{\n    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);\n    padding: 8px 12px; border-radius: 10px; color:#0b1520; background:#a9fff3;\n    font-weight: 800; font-size: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.35);\n    opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 9999;\n  }\n  #rrToast.show{ opacity: 1; }\n\n  #rrPkg{\n    position: fixed; right: 12px; bottom: 14px; z-index: 9998; display: none;\n  }\n  #rrPkg .pill{\n    border:1px solid rgba(0,255,255,.6); color:#eaf6ff; background:rgba(0,255,255,.12);\n    padding: 6px 10px; border-radius: 999px; font-weight: 800; cursor: pointer;\n    box-shadow: 0 0 14px rgba(0,255,255,.35);\n  }\n  #rrPkg.show{ display: block; }\n\n  \/* ====== CENTERED START POPUP ====== *\/\n  #rrStartHint{\n    position: fixed; inset: 0; z-index: 9999;\n    display: grid; place-items: center; pointer-events: none;\n  }\n  #rrStartHint.hide{ display: none; }\n  #rrStartBubble{\n    width: min(92vw, 520px);\n    background: rgba(10,14,20,.95);\n    color:#EAF6FF;\n    border: 2px solid rgba(0,255,255,.6);\n    border-radius: 16px;\n    padding: 18px 18px 16px;\n    box-shadow: 0 0 32px rgba(0,255,255,.45), inset 0 0 0 2px rgba(0,0,0,.35);\n    pointer-events: auto; position: relative;\n  }\n  #rrStartBubble .closeX{\n    position:absolute; right:10px; top:8px;\n    border:0; background:transparent; color:#9fefff;\n    font-size:18px; font-weight:900; cursor:pointer;\n  }\n  #rrStartBubble .hdr{\n    margin: 0 0 8px; font-size: 18px; font-weight: 900; text-align: center;\n  }\n  #rrStartBubble .steps{ margin: 0 0 12px 1.15em; padding: 0; }\n  #rrStartBubble .steps li{ margin: 6px 0; font-size: 13px; line-height: 1.3; }\n  #rrStartBubble .cta{ display:flex; justify-content:center; }\n  #rrStartBubble .btn{\n    border:1px solid rgba(0,255,255,.65);\n    background: rgba(0,255,255,.12);\n    color:#eaf6ff; padding:10px 16px; border-radius:12px;\n    font-weight: 900; letter-spacing:.2px; cursor:pointer;\n    box-shadow: 0 0 12px rgba(0,255,255,.35);\n  }\n<\/style>\n\n<div id=\"rrGrid\">\n  <div class=\"wrap\">\n    <div class=\"grid\">\n      <!-- set per-tile sizes inline with --fs (text) and --ic (emoji) -->\n      <a class=\"tile first\" data-id=\"first\" href=\"https:\/\/godsgalaxygame.com\/GGG\/first-you\/\" style=\"--fs:14px; --ic:28px;\">\n        <span class=\"icon\">\ud83e\udef5<\/span>\n        <span class=\"name\">First You<\/span>\n      <\/a>\n\n      <a class=\"tile transport\" data-id=\"transport\" href=\"https:\/\/godsgalaxygame.com\/GGG\/transportation\/\" style=\"--fs:12px; --ic:27px;\">\n        <span class=\"icon\">\ud83d\udeb2<\/span>\n        <span class=\"name\">Transpor<wbr>tation<\/span>\n      <\/a>\n\n      <a class=\"tile accom\" data-id=\"accom\" href=\"https:\/\/godsgalaxygame.com\/GGG\/accomodations\/\" style=\"--fs:11px; --ic:24px;\">\n        <span class=\"icon\">\ud83c\udfe0<\/span>\n        <span class=\"name\">Accommo<wbr>dations<\/span>\n      <\/a>\n\n      <a class=\"tile apps\" data-id=\"apps\" href=\"https:\/\/godsgalaxygame.com\/GGG\/apps\/\" style=\"--fs:15px; --ic:26px;\">\n        <span class=\"icon\">\ud83d\udcf1<\/span>\n        <span class=\"name\">APPS<\/span>\n      <\/a>\n\n      <!-- center words only -->\n      <div class=\"mid\">\n        <span class=\"word top\">Responsable<\/span>\n        <span class=\"word bottom\">Reservations<\/span>\n      <\/div>\n\n      <a class=\"tile energy\" data-id=\"energy\" href=\"https:\/\/godsgalaxygame.com\/GGG\/the-energy-app\/\" style=\"--fs:11px; --ic:24px;\">\n        <span class=\"icon\">\ud83d\udca7<\/span>\n        <span class=\"name\">The<wbr>Energy<wbr>App<\/span>\n      <\/a>\n\n      <a class=\"tile know\" data-id=\"know\" href=\"https:\/\/godsgalaxygame.com\/GGG\/know-locals\/\" style=\"--fs:14px; --ic:26px;\">\n        <span class=\"icon\">\ud83c\udf0d<\/span>\n        <span class=\"name\">Know Local<\/span>\n      <\/a>\n\n      <a class=\"tile shop\" data-id=\"shop\" href=\"https:\/\/godsgalaxygame.com\/GGG\/shop2\/\" style=\"--fs:15px; --ic:26px;\">\n        <span class=\"icon\">\ud83d\udecd\ufe0f<\/span>\n        <span class=\"name\">Shop<\/span>\n      <\/a>\n\n      <a class=\"tile respect\" data-id=\"respect\" href=\"https:\/\/godsgalaxygame.com\/GGG\/respect-local-nature\/\" style=\"--fs:12px; --ic:24px;\">\n        <span class=\"icon\">\ud83c\udf3f<\/span>\n        <span class=\"name\">Respect<wbr>Nature<\/span>\n      <\/a>\n\n      <a class=\"tile conserve\" data-id=\"conserve\" href=\"https:\/\/godsgalaxygame.com\/GGG\/maximize-conservation\/\" style=\"--fs:10px; --ic:24px;\">\n        <span class=\"icon\">\u267b\ufe0f<\/span>\n        <span class=\"name\">Maximize<wbr>Conservation<\/span>\n      <\/a>\n\n      <a class=\"tile difunde\" data-id=\"difunde\" href=\"https:\/\/godsgalaxygame.com\/GGG\/difunde\/\" style=\"--fs:14px; --ic:26px;\">\n        <span class=\"icon\">\ud83d\udce3<\/span>\n        <span class=\"name\">Difunde<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- Toast + Package badge -->\n<div id=\"rrToast\" role=\"status\" aria-live=\"polite\"><\/div>\n<div id=\"rrPkg\"><button class=\"pill\" id=\"rrPkgBtn\">Package \u2022 <span id=\"rrPkgCount\">0<\/span><\/button><\/div>\n\n<!-- CENTERED START POPUP -->\n<div id=\"rrStartHint\">\n  <div id=\"rrStartBubble\">\n    <button class=\"closeX\" aria-label=\"Close\">\u00d7<\/button>\n    <div class=\"hdr\">Begin Regenerating <strong>MedaYork<\/strong><\/div>\n    <ol class=\"steps\">\n      <li>Choose a <strong>Responsable Reservations<\/strong> option here to start.<\/li>\n      <li>Pick a sub-option on every side of the cube (<strong>The Elements<\/strong>).<\/li>\n      <li><strong>Double-tap<\/strong> any circle (<strong>Hosts<\/strong>) to add\/remove from <strong>Favorites<\/strong>.<\/li>\n      <li>When you\u2019re ready, tap <strong>Reserve<\/strong> \u2014 a live representative assembles and confirms your family\u2019s package and every essential you selected.<\/li>\n    <\/ol>\n    <div class=\"cta\">\n      <button class=\"btn\" id=\"rrStartOk\">\ud83d\ude80 Launch MedaYork<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  \/* ====== Picks: double-tap \/ dblclick, saved in localStorage ====== *\/\n  const KEY = 'rr_package_picks_v1';\n  const tiles = Array.from(document.querySelectorAll('#rrGrid a.tile'));\n  const picks = new Set(JSON.parse(localStorage.getItem(KEY) || '[]'));\n  const toast = document.getElementById('rrToast');\n  const badge = document.getElementById('rrPkg');\n  const badgeCount = document.getElementById('rrPkgCount');\n  const badgeBtn = document.getElementById('rrPkgBtn');\n\n  function applyPicked(){ tiles.forEach(t => t.classList.toggle('picked', picks.has(t.dataset.id))); }\n  function savePicked(){ localStorage.setItem(KEY, JSON.stringify([...picks])); updateBadge(); }\n  function updateBadge(){ const n=picks.size; badgeCount.textContent=n; badge.classList.toggle('show', n>0); }\n  function showToast(msg){ toast.textContent=msg; toast.classList.add('show'); setTimeout(()=>toast.classList.remove('show'),1100); }\n  function togglePick(tile){\n    const id = tile.dataset.id; if(!id) return;\n    if(picks.has(id)){ picks.delete(id); showToast('Removed from package'); }\n    else{ picks.add(id); showToast('Added to package'); }\n    tile.classList.toggle('picked'); savePicked();\n  }\n  applyPicked(); updateBadge();\n\n  \/\/ desktop dblclick\n  tiles.forEach(tile=>{\n    tile.addEventListener('dblclick', e=>{ e.preventDefault(); togglePick(tile); });\n    \/\/ mobile double-tap\n    let last=0;\n    tile.addEventListener('touchend', e=>{\n      const now=Date.now();\n      if(now-last<300){ e.preventDefault(); togglePick(tile); last=0; }\n      else { last=now; setTimeout(()=>{ last=0; },320); }\n    }, {passive:false});\n  });\n\n  \/\/ optional: route to Favorites\n  badgeBtn.addEventListener('click', ()=>{\n    \/\/ window.location.href = 'https:\/\/godsgalaxygame.com\/GGG\/favorites\/';\n    showToast('Open Favorites to review your package');\n  });\n\n  \/* ====== Centered Start Popup (one per session) ====== *\/\n  const seenKey = 'rr_start_hint_seen_v5';\n  const root = document.getElementById('rrStartHint');\n  const ok   = document.getElementById('rrStartOk');\n  const x    = document.querySelector('#rrStartBubble .closeX');\n  const hide = () => { root.classList.add('hide'); try{sessionStorage.setItem(seenKey,'1')}catch(e){} };\n  try{ if(sessionStorage.getItem(seenKey)) root.classList.add('hide'); }catch(e){}\n  ok.addEventListener('click', hide);\n  x.addEventListener('click', hide);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83e\udef5 First You \ud83d\udeb2 Transportation \ud83c\udfe0 Accommodations \ud83d\udcf1 APPS Responsable Reservations \ud83d\udca7 TheEnergyApp \ud83c\udf0d Know Local \ud83d\udecd\ufe0f Shop \ud83c\udf3f RespectNature \u267b\ufe0f MaximizeConservation \ud83d\udce3 Difunde Package \u2022 0 \u00d7 Begin Regenerating MedaYork Choose a Responsable Reservations option here to start. Pick a sub-option on every side of the cube (The Elements). Double-tap any circle (Hosts) to [&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-3704","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages\/3704","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=3704"}],"version-history":[{"count":42,"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages\/3704\/revisions"}],"predecessor-version":[{"id":4658,"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/pages\/3704\/revisions\/4658"}],"wp:attachment":[{"href":"https:\/\/godsgalaxygame.com\/GGG\/wp-json\/wp\/v2\/media?parent=3704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}