<!--
░░░░                                 
                                ░░▒▒▒▒▒▒▒▒▒▒░░░░░░                              
                               ▒▓▓▓▓▓▓▓▓▒▒▓▒▒▒░▒▒▒▒░░                           
                              ▒▓▓▓▓▓▓▓▓▒▒▒▓▓▓▒▒░▓▒░░░░░                         
                             ▒▓▓▓▓▓▓▓▓█▓▓▓▓▓▓▓▓▓▒▓▒▒▒░░░                        
                            ▒▓▓▓▓▓█▓██▓█▓▓▓▒▒▓▓▓▓▓▒░▒░░░                        
                           ░▒▓▓▓▓▓▓█▓▓▓▓▓▓▓▒▒▒▒▒▓▓▒▒░░░░                        
                          ░▒▓▓▓▓▓▓▓█▓▓▓▓▓▓▓▒▒░░▒█▓▓▒░░                          
        ░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▓▓▓▓▓▓▓▓██▓▓█▓▓▓▓▓▒▒▒▓▓▓▒▒░                          
     ▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓███▓███▓▓▓▓▓▓▓▓███▓▓▓▓▓█▓█▒▒▓▓▒▒░░░                         
▒▒████████▓▓▒▒░░░▒▒▓▓▓▓▓██▓█▓▓▓▓▓▓▓███▓▓▓▓▓▓▓▓▒▒▓▓▓▒▒▒░                         
▓██████▓█▓▓▒▒░░░▒▒▒▒▓▓▓▓███▓▓▓▓▓▓█▓██████▓▓▓▓▓▓▓▓▓▓▓▒▒░                         
▓█████▓▒▒▒▒▒░░░▒▒▒▒▒▒▓▓▓██▓▓▓▓▓▓▓▓▓█▓██████▓▓▓▓▓▓▓▓▒▒▒░                         
▓█▓▓▓▓▓▓▒▒▒▒▒▒▒▓▓▓▓▓▓▓▒▓██████████▓▓▓█▓▓▓▓▓▓▒▒░░░▓▓▓▒▒░                         
▓██████▓▓▓▓▒▒░▒▒▓▓▓▓▓▓▓▒▒▓█████████▓▓▓▓▓▓▓▓▒░     ▒▓▓▒▒░  ▒▒▒▒░                 
▓███████▓▓▒▒░░▒▒▒▓▓███▓▓█▓██████▓▓▓▓▓▓▓▓▓▓▒▒▒░        ░███████▓▓██▓▒            
▓██████▓▒▒▒░░░░▒▒▓▓▓▓███▓▓██████▓▓▓▓▓▓▓▓▓▓▒▒▒░     ░██████▓████▓█▓██▓▒░         
▓▓▓▓▓▓▓▒▒▒░░░░░░░▒▓▒▒▒▓▓▒▒▒█████▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒  ░▓███████████████▓████░        
▒▓▓▓▓▓▒▒▒▒▒░░░░░░░▒▒▒▒▒▒▒▒▒▓████▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒░▒██████████████████▓████░       
▓▓▓▓▓▒▒▒▒▒▒░░▒▒░░░░░▒▒▒▒▒▒▒▓████▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒███████████████████▓▓████░      
▓▓▓▓▓▒▒▒▒▓▓▓▓▓▓▓▒░░░░▓▒▒▓▓▓▓███▓▓▓▓▓▓▓▒▓▒▓▓▓▓▒▒▒████████████▓▓▓██▓██████▓░░░    
▓▓▓▓▒▒▒▓█▓██▓▓█▓▓▓▒░░▒▒▓▓▓▓▓▓██▓▓▓▓▓▓▒▓▒░▓▓▓▓▓▒██████████████▓▓▓██████████░     
▓▓▓▒▒▒▒▓██████████▒░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒  ▒▓██▓████████████████▓▓███████████░    
▓██▒▒▒▓▓███████▓█▓▒░░░▓▓██▓▓▓░░▓▓▓▓▓▓▓░  ░▓▓████████████████▓██████████████░    
▓██▓▒▓▓▓▓▓██████▓▒▒░░░▓▓▓▓▓█▓░ ░▓▓▓▓▓▓▓▒  ▓██████████████████▓▓████████████▒    
▓██▓▓▒▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▓▓▓▓█▓▒     ▒▓▓▓▓▓  ░▓██████████████████▓▓▓███████████▒░  
▓██▓▓▒▒▒▓██████▓▓▒▒▒▒▒▒▓▓▓▓░      ▓▓▓▓▓▓░ ░▓████████████████████████████████▓░  
▓███▓▒▒▒▒▓▓▒▓▒▒▒▒▒▒▒▒▒▒▒▓░        ░▓▓█▓▓▒ ░████████████████████▓█████████████▓  
▒████▓▒▒▒▓▒▒▒▒▒▒▒░▒▒▒▒▒░          ▒▓▓█▓▓▓░░██████████████████████████████████▓  
▒▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒            ░▒▓▓▓▓▓▒░███████████████████████████████████  
▒▒▒▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒░                    ░███████████████████████████████████  
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░                      ░█████████████▓███████████████████  
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░                       ▒████████████████████████████████  
░▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒▓▒▒▒░                      ░▓████████████▓██████████████████▓  
  ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▒▒▒░                      ░████████████▓██████████████████░   
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Google tag (gtag.js) for RoseAndTreasure -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-HJLJM2PN7V"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-HJLJM2PN7V', { debug_mode: true });
  </script>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>RoseAndTreasure — Catch a Firefly</title>
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">

  <style>
    html,body{height:100%;margin:0}
    body{background:#000;font-family:system-ui,Arial,sans-serif;overflow:hidden}
    canvas{display:block;width:100vw;height:100vh}

    /* Top banner */
    .topbar{
      position:fixed; top:8px; left:50%; transform:translateX(-50%);
      display:flex; align-items:center; gap:16px; z-index:5;
      background:rgba(0,0,0,.25); padding:6px 12px; border-radius:999px;
      border:1px solid rgba(255,255,255,.12); box-shadow:0 6px 16px rgba(0,0,0,.35);
      user-select:none
    }
    .banner{
      color:#cfead2; opacity:.9;
      font-family:"Pacifico", system-ui, Arial, sans-serif;
      font-size:16px; letter-spacing:.12em; white-space:nowrap;
      text-shadow:0 1px 6px rgba(110,255,170,.35);
    }

    /* Bottom-centered reset */
    .bottombar{
      position:fixed; bottom:12px; left:50%; transform:translateX(-50%);
      z-index:5; pointer-events:none;
    }
    .reset-btn{
      pointer-events:auto;
      padding:6px 14px; border-radius:999px;
      background:rgba(0,255,140,.08); color:#37d977; font-weight:800;
      border:1px solid rgba(0,255,140,.35); cursor:pointer;
      transition:transform .06s ease, background .15s ease;
      box-shadow:0 6px 16px rgba(0,0,0,.35)
    }
    .reset-btn:hover{ background:rgba(0,255,140,.14) }
    .reset-btn:active{ transform:scale(.98) }

    /* HUD */
    .hud{
  position:fixed;
  top:0; left:0; right:0;
  pointer-events:none;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:64px 16px 0;
  z-index:2;
}
    .pill{
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      border-radius:12px;
      padding:8px 10px;
      min-width:86px;
      display:flex; flex-direction:column; align-items:center;
      box-shadow:0 6px 16px rgba(0,0,0,.5)
    }
    .pill .label{
      color:#9bd6a0; font-weight:700; font-size:12px; letter-spacing:.06em
    }
    .pill .value{
      width:100%;
      margin-top:6px; padding-top:6px;
      border-top:1px solid rgba(255,255,255,.25);
      color:#cfead2; font-weight:800; font-size:16px; text-align:center
    }

    /* Fortune overlay */
    .overlay{
      position:fixed; inset:0; display:grid; place-items:center; z-index:3;
      background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
      opacity:0; pointer-events:none; transition:opacity .3s ease;
    }
    .overlay.show{opacity:1; pointer-events:auto}
    .fortune{
      max-width:min(900px,92vw); color:#fff; text-align:center;
      font-family:"Pacifico", system-ui, Arial, sans-serif;
      font-weight:400; letter-spacing:.3px;
      font-size:clamp(34px,7vw,64px); line-height:1.1;
      text-shadow:0 0 8px rgba(178,255,200,.45), 0 10px 28px rgba(0,0,0,.6);
      padding:0 2rem
    }

    /* Capture Jar */
    .jar{
      position:fixed; width:120px; height:120px; left:0; top:0; pointer-events:none; z-index:4;
      transform:translate(-50%,-85%) scale(.95); opacity:0;
    }
    .jar.show{ animation:jarFade 1.2s ease forwards; }
    @keyframes jarFade{
      0%{opacity:0; transform:translate(-50%,-85%) scale(.9)}
      20%{opacity:1; transform:translate(-50%,-85%) scale(1)}
      100%{opacity:0; transform:translate(-50%,-85%) scale(.98)}
    }
    .jar .cork{ transform:translateY(-22px); }
    .jar.show .cork{ animation:corkSeal .42s ease .28s forwards; }
    @keyframes corkSeal{ to{ transform:translateY(0) } }

    .caught-dot{
      position:absolute; left:50%; top:42%;
      width:14px; height:14px; border-radius:50%;
      transform:translate(-50%,-50%);
      background:radial-gradient(circle at 50% 50%, #fff 0%, #ffe08a 40%, rgba(255,224,138,0) 70%);
      filter:drop-shadow(0 0 8px #ffd86a) drop-shadow(0 0 14px #ffd86a);
      opacity:0; animation:dotFade 1s ease forwards .15s;
    }
    @keyframes dotFade{ 0%{opacity:0} 10%{opacity:1} 100%{opacity:0} }

    /* Milestone notes */
    .note{
      position:fixed; z-index:6; pointer-events:none;
      color:#ff4b4b; font-weight:900; letter-spacing:.05em;
      background:rgba(255,0,0,.08);
      border:1px solid rgba(255,0,0,.35);
      border-radius:12px; padding:10px 14px;
      opacity:0; transform:translateY(6px);
      transition:opacity .15s ease, transform .15s ease;
      text-shadow:0 0 6px rgba(255,80,80,.3);
    }
    .note.show{ opacity:1; transform:translateY(0) }
    .note.gold{
      color:#1b1603;
      background:linear-gradient(135deg,#ffe57a,#ffd046 45%,#ffb300 55%,#ffe57a);
      border:none; box-shadow:0 8px 28px rgba(255,215,80,.25), inset 0 1px 0 #fff;
      font-size:clamp(16px,2.6vw,22px)
    }
  </style>
</head>
<body>
  <!-- Top banner -->
  <div class="topbar">
    <div class="banner">…Catch The Fireflies…</div>
  </div>

  <canvas id="scene"></canvas>

  <!-- HUD pills (compact with divider line) -->
  <div class="hud">
    <div class="pill">
      <span class="label">SCORE</span>
      <span id="score" class="value">0</span>
    </div>
    <div class="pill">
      <span class="label">BEST</span>
      <span id="best" class="value">0</span>
    </div>
  </div>

  <!-- Bottom-centered reset -->
  <div class="bottombar">
    <button id="reset" class="reset-btn" aria-label="Reset score and best">reset</button>
  </div>

  <!-- Fortune -->
  <div id="overlay" class="overlay"><div id="fortune" class="fortune"></div></div>

<script>
/* ---------------- Fortunes (favorites ~1.5× others) ---------------- */
const favorites = [
  "Aah, I See You Know Your Judo Well.",
  "For Enjoying A Meal? A Succulent Chinese Meal?!"
];
const others = [
  "Anyone can steal from a dragon, once. Very few of them see old age.",
  "I see... the spirits... they tell me... 'don't bogart the funyuns, bro...' well, that was odd. You win some, you lose some.",
  "Cats are a good teacher for consent, and how quickly it can change. Huh... that feels targeted.",
  "You will find a great misunderstanding",
  "A forgotten payment will be worth a lot more than you think.",
  "That thing you lost? It was the remote.","Your pet is judging your life choices.",
  "You will soon meet someone who owes you money.","Your lucky number is the amount of your next meal.",
  "A stranger will give you life-changing advice (about where to find snacks).",
  "A grand adventure awaits you... to the fridge.","Beware of anyone offering you too much free time.",
  "You will soon be rich... in memories of good naps.","A great honor is coming your way, but you have to share your dessert.",
  "Your talents will be recognized by a very short person.","You will receive an unexpected message from someone you haven't thought about in years.",
  "You will have a surprisingly good hair day.","Your enemy will become your friend, and then you'll be enemies again.",
  "You are about to discover your true passion: professional napping.","Someone will say something nice about your cooking.",
  "Good fortune will come from an unlikely source: a pigeon.","You are about to be promoted to Senior Sock Sorter.",
  "A secret admirer is watching you. They are your cat.","You have a secret talent for finding lost socks.",
  "Your next relationship will be with a really good book.","Your career will take a turn for the better, as soon as you find your keys.",
  "You are going to win a very important argument.","The answer to your question is on another fortune.",
  "You will find love, but it will be a very picky love.","Your greatest strength is your ability to remain calm in the face of free snacks.",
  "You will soon buy something that you don't need but will really enjoy.","A new opportunity will knock. It will be a telemarketer.",
  "You will find a valuable object in your other pants.","Your creativity will blossom when you're not trying so hard.",
  "The universe is testing your patience. You are failing.","Your wit will get you into trouble, but you'll laugh your way out.",
  "You will have an exciting opportunity to... change the channel.",
  "A small act of kindness will bring you great joy (and maybe a free coffee).",
  "Someone is thinking about you fondly, and then also thinking about lunch.",
  "Your social life will blossom, but only on days ending in \"Y.\"",
  "You will soon receive an award for your outstanding ability to find parking spaces.",
  "You will learn something new that you never knew you wanted to learn.",
  "Your ability to procrastinate will be admired by many.",
  "You will be given a strange and wonderful gift.",
  "A fortune cookie told you to eat more vegetables. This is your chance.",
  "Your path to happiness is paved with good intentions and occasional detours.",
  "A forgotten dream will come true, but it will be slightly less exciting than you remember.",
  "You will soon make a friend with a very distinctive laugh.",
  "Your wisdom will be sought by children and confused adults alike.",
  "You will overcome a great obstacle. It was a small hill.",
  "You will discover your true calling as a professional couch potato.",
  "Your enthusiasm is contagious, but your singing is not.",
  "You will find a lost item of great value... a coin you thought was gone forever.",
  "A romantic evening awaits, but you'll probably fall asleep.",
  "You will have a surprise visitor, and they will bring snacks.",
  "Your next creative project will be a masterpiece of modern art, or at least a very interesting pile.",
  "You will be given a puzzle to solve. The pieces are already lost.",
  "You will find comfort in an unlikely place, like under your bed.",
  "Your intuition will guide you to the best brunch spot.",
  "You will soon be blessed with a significant amount of free time.",
  "Your sense of humor will be your greatest asset in times of crisis."
];

const rng=()=>{const a=new Uint32Array(1); crypto.getRandomValues(a); return a[0]/2**32;}
function pickFortune(){
  const items = [...favorites.map(t=>({t,w:1.5})), ...others.map(t=>({t,w:1}))];
  const total = items.reduce((s,i)=>s+i.w,0);
  let r = rng()*total;
  for(const it of items){ if((r-=it.w)<=0) return it.t; }
  return items[items.length-1].t;
}

/* ---------------- Scene ---------------- */
const c=document.getElementById('scene');
const ctx=c.getContext('2d',{alpha:false});
let W,H; function resize(){W=c.width=innerWidth; H=c.height=innerHeight;} resize(); addEventListener('resize',resize);

const scoreEl=document.getElementById('score'); const bestEl=document.getElementById('best');
let score=0, bestScore=Number(localStorage.getItem('rt_best_firefly')||0); bestEl.textContent=bestScore;

/* Fireflies */
const FIREFLIES=[]; const PARTICLES=[]; const N=12;

function newFly(){
  const now=performance.now(), vis=1200+rng()*1200, hide=800+rng()*600;
  return {
    x:rng()*W, y:rng()*H*0.7 + H*0.1,
    r:8+rng()*5,
    hue: [45,60,85,120,160,190,210,280,305,330][Math.floor(rng()*10)],
    t:rng()*Math.PI*2, spd:0.25+rng()*0.6,
    phase:'visible', alpha:0, next:now+vis, visTime:vis, hideTime:hide,
    capturing:false, cx:0, cy:0, cStart:0, cDur:520
  };
}
for(let i=0;i<N;i++) FIREFLIES.push(newFly());

function spawnBurst(x,y,hue,scale=1){
  const count = Math.floor(72*scale);
  for(let i=0;i<count;i++){
    const speed = (2 + rng()*5)*scale;
    const ang = rng()*Math.PI*2;
    PARTICLES.push({
      x,y, vx:Math.cos(ang)*speed, vy:Math.sin(ang)*speed - 0.6*scale,
      life:1.1*scale, hue: hue+(rng()*40-20), size:1.6 + rng()*3.6*scale
    });
  }
}

function showJar(x,y){
  const jar=document.createElement('div');
  jar.className='jar show';
  jar.style.left=`${x}px`; jar.style.top=`${y}px`;
  jar.innerHTML = `
  <svg viewBox="0 0 40 40" width="120" height="120" xmlns="http://www.w3.org/2000/svg">
    <defs><filter id="s" x="-50%" y="-50%" width="200%" height="200%">
      <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity=".6"/></filter></defs>
    <!-- glass -->
    <g filter="url(#s)" stroke="#7ca08a" stroke-width="2" fill="none" stroke-linecap="round">
      <rect x="8" y="9" width="24" height="24" rx="7" fill="rgba(180,255,210,.12)"/>
      <path d="M11 9h18"/>
    </g>
    <!-- cork -->
    <g class="cork">
      <rect x="11" y="5" width="18" height="6" rx="2" fill="#cfd9d2" stroke="#7ca08a" stroke-width="2"/>
    </g>
  </svg>`;
  const dot=document.createElement('div');
  dot.className='caught-dot';
  jar.appendChild(dot);
  document.body.appendChild(jar);
  setTimeout(()=>jar.remove(), 1200);
}

/* Fortune overlay and milestone helpers */
const overlay=document.getElementById('overlay');
const fortuneEl=document.getElementById('fortune');

function showFortune(){
  fortuneEl.textContent = pickFortune();
  overlay.classList.add('show');
  setTimeout(()=>overlay.classList.remove('show'), 3000);
}

function showCornerNote(text, gold=false){
  const n=document.createElement('div');
  n.className='note' + (gold?' gold':'');
  n.textContent=text;

  if(gold){
    // Big gold banner centered near top
    n.style.left='50%'; n.style.top='12%'; n.style.transform='translateX(-50%)';
    document.body.appendChild(n);
    requestAnimationFrame(()=> n.classList.add('show'));
    spawnBurst(innerWidth*0.5, innerHeight*0.15, 45, 1.6);
    setTimeout(()=>{ n.classList.remove('show'); setTimeout(()=>n.remove(), 250); }, 3000);
    return;
  }

  // Only bottom-left or bottom-right
  const rightSide = rng() < 0.5 ? false : true;
  const pad=12;
  n.style.bottom = pad+'px';
  if(rightSide) n.style.right=pad+'px'; else n.style.left=pad+'px';

  document.body.appendChild(n);
  requestAnimationFrame(()=> n.classList.add('show'));

  // Red glitter pop at the note location
  const rect = n.getBoundingClientRect();
  const cx = rect.left + rect.width/2;
  const cy = rect.top + rect.height/2;
  spawnBurst(cx, cy, 0, 1.2); // hue ~ red

  setTimeout(()=>{ n.classList.remove('show'); setTimeout(()=>n.remove(), 200); }, 3000);
}

/* main loop */
function step(){
  const now=performance.now();

  // background + vignette
  ctx.fillStyle='#000'; ctx.fillRect(0,0,W,H);
  const vg=ctx.createRadialGradient(W/2,H*0.6, Math.min(W,H)*0.1, W/2,H*0.6, Math.max(W,H));
  vg.addColorStop(0,'rgba(0,60,0,0.45)');
  vg.addColorStop(1,'rgba(0,0,0,0)');
  ctx.fillStyle=vg; ctx.fillRect(0,0,W,H);

  // flies
  for(const f of FIREFLIES){
    if(!f.capturing){
      if(f.phase==='visible'){ f.alpha=Math.min(1,f.alpha+0.06); if(now>=f.next){f.phase='hiding'; f.next=now+220;} }
      else if(f.phase==='hiding'){ f.alpha=Math.max(0,f.alpha-0.10); if(f.alpha===0){f.phase='hidden'; f.next=now+f.hideTime;} }
      else if(f.phase==='hidden'){ if(now>=f.next){ f.x=rng()*W; f.y=rng()*H*0.7+H*0.1; f.t=rng()*Math.PI*2; f.phase='visible'; f.next=now+f.visTime; } }

      f.t+=0.02*f.spd;
      f.x+=Math.cos(f.t)*0.8 + Math.cos(f.t*0.15)*0.35;
      f.y+=Math.sin(f.t*0.6)*0.5 + Math.sin(f.t*0.2)*0.3 + Math.sin(f.t*0.12)*0.25;
      f.x=Math.min(W-24,Math.max(24,f.x)); f.y=Math.min(H-24,Math.max(24,f.y));
    }else{
      const p=Math.min(1,(now - f.cStart)/f.cDur);
      const ease=p<.5 ? 2*p*p : -1+(4-2*p)*p;
      f.x = f.x*(1-ease) + f.cx*ease;
      f.y = f.y*(1-ease) + f.cy*ease;
      f.alpha = 1 - p*0.7;
      if(p>=1){
        spawnBurst(f.cx,f.cy,f.hue,1.1);
        f.phase='hidden'; f.alpha=0; f.capturing=false; f.next=now + (800+rng()*600);
      }
    }

    if(f.phase!=='hidden'){
      // glow
      ctx.globalCompositeOperation='lighter';
      const grad=ctx.createRadialGradient(f.x,f.y,0,f.x,f.y,f.r*8);
      grad.addColorStop(0,`hsla(${f.hue},100%,70%,${0.95*f.alpha})`);
      grad.addColorStop(1,`hsla(${f.hue},100%,50%,0)`);
      ctx.fillStyle=grad; ctx.beginPath(); ctx.arc(f.x,f.y,f.r*8,0,Math.PI*2); ctx.fill();

      // wings (larger)
      const flap = Math.sin(f.t*10)*0.7;
      const wingR = f.r*2.6;
      ctx.fillStyle=`hsla(${f.hue+20},100%,85%,${0.7*f.alpha})`;
      ctx.strokeStyle=`hsla(${f.hue+10},100%,70%,${0.9*f.alpha})`;
      ctx.lineWidth=1.1;
      ctx.save(); ctx.translate(f.x, f.y); ctx.rotate(-0.65 + flap*0.28); wingPath(wingR); ctx.restore();
      ctx.save(); ctx.translate(f.x, f.y); ctx.rotate( 0.65 - flap*0.28); wingPath(wingR); ctx.restore();

      // ambient sparkles
      for(let s=0;s<6;s++){ ambientSparkle(f.x, f.y, wingR, f.hue, f.alpha); }

      // core
      ctx.globalCompositeOperation='source-over';
      ctx.fillStyle=`hsla(${f.hue},100%,70%,${f.alpha})`;
      ctx.beginPath(); ctx.arc(f.x,f.y,f.r,0,Math.PI*2); ctx.fill();
    }
  }

  // particles
  for(let i=PARTICLES.length-1;i>=0;i--){
    const p=PARTICLES[i]; p.life-=0.018; p.x+=p.vx; p.y+=p.vy; p.vy+=0.03;
    if(p.life<=0) PARTICLES.splice(i,1);
    else{
      ctx.globalCompositeOperation='lighter';
      ctx.fillStyle=`hsla(${p.hue},100%,65%,${p.life})`;
      ctx.beginPath(); ctx.arc(p.x,p.y,p.size||2.4,0,Math.PI*2); ctx.fill();
      ctx.globalCompositeOperation='source-over';
    }
  }

  requestAnimationFrame(step);
}
requestAnimationFrame(step);

/* shapes */
function wingPath(r){
  const k = 0.5523, w = r, h = r*0.75;
  const cx = 0, cy = 0;
  const x = cx - w/2, y = cy - h/2;
  const ox = (w/2)*k, oy = (h/2)*k;
  ctx.beginPath();
  ctx.moveTo(cx,cy);
  ctx.bezierCurveTo(cx-ox,cy-oy, x, y, x, cy);
  ctx.bezierCurveTo(x, cy+oy, cx-ox, cy+oy, cx, cy);
  ctx.closePath(); ctx.fill(); ctx.stroke();
}
function ambientSparkle(cx,cy,wingR,hue,a){
  if(rng()<0.8){
    const ang = rng()*Math.PI*2;
    const rad = wingR * (0.6 + rng()*0.9);
    const x = cx + Math.cos(ang)*rad + (rng()-0.5)*3;
    const y = cy + Math.sin(ang)*rad*0.7 + (rng()-0.5)*3;
    const sz = 1.2 + rng()*2.2;
    ctx.globalCompositeOperation='lighter';
    ctx.fillStyle=`hsla(${hue+10},100%,80%,${0.55*a})`;
    ctx.beginPath(); ctx.arc(x,y,sz,0,Math.PI*2); ctx.fill();
    ctx.globalCompositeOperation='source-over';
  }
}

/* hit test + capture + scoring + milestones + fortune */
/* ↑ sensitivity bump: lower alpha gate & larger radius */
function dist2(ax,ay,bx,by){ const dx=ax-bx, dy=ay-by; return dx*dx+dy*dy; }
function processPointer(x,y){
  let best=null, bestD2=Infinity;
  for(const f of FIREFLIES){
    if(f.phase==='hidden' || f.alpha<0.45 || f.capturing) continue;
    const d2=dist2(x,y,f.x,f.y);
    if(d2<bestD2){ bestD2=d2; best=f; }
  }
  if(best && bestD2<=2600){ /* was 1200 */
    best.capturing=true; best.cx=x; best.cy=y-14; best.cStart=performance.now();
    showJar(x,y);
    score++; if(score>bestScore){ bestScore=score; localStorage.setItem('rt_best_firefly',bestScore); }
    scoreEl.textContent=score; bestEl.textContent=bestScore;

    // milestones (3s)
    if(score===10) showCornerNote("…still here?…");
    if(score===20) showCornerNote("…really?!…");
    if(score===35) showCornerNote("…there’s really no stopping you…");
    if(score===59) showCornerNote("…well now I'm just suspicious…");
    if(score===99) showCornerNote("CONGRATULATIONS! YOU CAN CONTINUE PLAYING!", true);

    showFortune();

    // GA4 custom event
    gtag('event', 'firefly_caught', {
      event_category: 'gameplay',
      event_label: 'Firefly Catch',
      value: score
    });
  }
}
c.addEventListener('click', e=>processPointer(e.clientX,e.clientY), {passive:true});
c.addEventListener('touchstart', e=>{
  const t=e.touches[0]; processPointer(t.clientX,t.clientY);
},{passive:true});

/* reset */
document.getElementById('reset').addEventListener('click', ()=>{
  score = 0; bestScore = 0;
  localStorage.setItem('rt_best_firefly', 0);
  scoreEl.textContent = '0'; bestEl.textContent = '0';
  showCornerNote("scores reset", false);
});
</script>
</body>
</html>