+<style>
+  html,body{height:100%;margin:0;background:#0a0a16;overflow:hidden;}
+  *{box-sizing:border-box;}
+  #wrap{position:relative;height:100%;width:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}
+  canvas{display:block;width:100%;height:100%;touch-action:none;}
+  #reset{position:absolute;bottom:.8rem;right:.8rem;font:inherit;font-size:.72rem;font-weight:700;border:0;border-radius:9999px;padding:.35rem .8rem;background:rgba(255,255,255,0.1);color:#e9d5ff;cursor:pointer;-webkit-tap-highlight-color:transparent;}
+</style>
+<div id="wrap">
+  <canvas id="cv"></canvas>
+  <button id="reset" type="button">Reset</button>
+</div>
+<script>
+(function(){
+  var LL=window.liveloop||null;
+  var cv=document.getElementById('cv'), ctx=cv.getContext('2d');
+  var resetBtn=document.getElementById('reset');
+  var ITEMS_EMOJI=['🍕','🍔','🍟','🌮','🍣','🍿','🍩','🍪','🍫','🧁','🍦','🥨'];
+  var TIERS=[
+    {key:'S',color:'#fb7185'},{key:'A',color:'#fb923c'},{key:'B',color:'#facc15'},
+    {key:'C',color:'#a3e635'},{key:'D',color:'#38bdf8'}
+  ];
+  var W=0,H=0,dpr=1,rowY=0,rowH=0,labelW=0,poolY=0,poolH=0,item=0;
+  var items=[], held=null, ptrX=0, ptrY=0, loaded=false;
+  var raf=0,running=false,lastT=0;
+ 
+  function setCanvas(){
+    var rc=cv.getBoundingClientRect();
+    W=Math.max(220,rc.width); H=Math.max(320,rc.height);
+    dpr=Math.min(window.devicePixelRatio||1,2.5);
+    cv.width=Math.round(W*dpr); cv.height=Math.round(H*dpr);
+    ctx.setTransform(dpr,0,0,dpr,0,0);
+    rowY=H*0.1; rowH=H*0.115; labelW=rowH;
+    poolY=rowY+rowH*5+H*0.03; poolH=H-poolY-H*0.03;
+    item=Math.floor(Math.min(rowH*0.42,(W-labelW-H*0.04)/9));
+  }
+  function build(){
+    items=[];
+    for(var i=0;i<ITEMS_EMOJI.length;i++){
+      items.push({emoji:ITEMS_EMOJI[i],tier:-1,px:0,py:0,tx:0,ty:0,set:false});
+    }
+  }
+  function zoneRect(t){
+    if(t<0) return {x:H*0.02,y:poolY+poolH*0.16,w:W-H*0.04,h:poolH*0.84};
+    return {x:labelW+H*0.015,y:rowY+t*rowH,w:W-labelW-H*0.03,h:rowH};
+  }
+  function layout(){
+    for(var t=-1;t<5;t++){
+      var z=zoneRect(t), n=0, perLine=Math.max(1,Math.floor(z.w/(item+item*0.18)));
+      for(var i=0;i<items.length;i++){
+        if(items[i].tier!==t) continue;
+        var line=Math.floor(n/perLine), col=n%perLine;
+        items[i].tx=z.x+item*0.6+col*(item*1.18);
+        items[i].ty=z.y+item*0.68+line*(item*1.12);
+        n++;
+      }
+    }
+  }
+  function save(){
+    if(LL&&LL.storage&&LL.storage.set){
+      try{ LL.storage.set({tiers:items.map(function(i){return i.tier;})}); }catch(e){}
+    }
+  }
+  function load(){
+    if(LL&&LL.storage&&LL.storage.get){
+      LL.storage.get().then(function(s){
+        if(s&&s.tiers&&s.tiers.length===items.length){
+          for(var i=0;i<items.length;i++){
+            var t=s.tiers[i];
+            if(typeof t==='number'&&t>=-1&&t<5) items[i].tier=t;
+          }
+        }
+        loaded=true; layout();
+        for(i=0;i<items.length;i++){ items[i].px=items[i].tx; items[i].py=items[i].ty; }
+      },function(){ loaded=true; });
+    } else { loaded=true; }
+  }
+  function dropZone(y){
+    if(y>=rowY && y<rowY+rowH*5) return Math.floor((y-rowY)/rowH);
+    if(y>=poolY) return -1;
+    return null;
+  }
+  function pick(x,y){
+    for(var i=items.length-1;i>=0;i--){
+      var it=items[i];
+      if(Math.abs(x-it.px)<item*0.6 && Math.abs(y-it.py)<item*0.6) return it;
+    }
+    return null;
+  }
+  function rr(x,y,w,h,rad){
+    var r=Math.min(rad,w/2,h/2);
+    ctx.beginPath();
+    ctx.moveTo(x+r,y);
+    ctx.arcTo(x+w,y,x+w,y+h,r);
+    ctx.arcTo(x+w,y+h,x,y+h,r);
+    ctx.arcTo(x,y+h,x,y,r);
+    ctx.arcTo(x,y,x+w,y,r);
+    ctx.closePath();
+  }
+  function render(){
+    ctx.fillStyle='#0a0a16'; ctx.fillRect(0,0,W,H);
+    ctx.fillStyle='#e9d5ff';
+    ctx.font='900 '+Math.round(H*0.032)+'px system-ui';
+    ctx.textAlign='left'; ctx.textBaseline='middle';
+    ctx.fillText('🏆 SNACK TIER LIST',H*0.03,rowY*0.55);
+    var t,i;
+    for(t=0;t<5;t++){
+      var y=rowY+t*rowH;
+      ctx.fillStyle='rgba(255,255,255,0.04)';
+      rr(labelW+H*0.012,y+2,W-labelW-H*0.03,rowH-4,8); ctx.fill();
+      ctx.fillStyle=TIERS[t].color;
+      rr(H*0.012,y+2,labelW-H*0.012,rowH-4,8); ctx.fill();
+      ctx.fillStyle='#0a0a16';
+      ctx.font='900 '+Math.round(rowH*0.42)+'px system-ui';
+      ctx.textAlign='center'; ctx.textBaseline='middle';
+      ctx.fillText(TIERS[t].key,H*0.012+labelW/2,y+rowH/2);
+    }
+    ctx.fillStyle='rgba(255,255,255,0.05)';
+    rr(H*0.02,poolY,W-H*0.04,poolH,10); ctx.fill();
+    ctx.fillStyle='#7c7c99';
+    ctx.font='800 '+Math.round(H*0.018)+'px system-ui';
+    ctx.textAlign='left'; ctx.textBaseline='top';
+    ctx.fillText('DRAG FROM HERE',H*0.035,poolY+H*0.012);
+    ctx.font=Math.round(item*0.82)+'px system-ui';
+    ctx.textAlign='center'; ctx.textBaseline='middle';
+    for(i=0;i<items.length;i++){
+      var it=items[i];
+      if(it===held) continue;
+      ctx.fillText(it.emoji,it.px,it.py);
+    }
+    if(held){
+      ctx.font=Math.round(item*1.05)+'px system-ui';
+      ctx.fillText(held.emoji,ptrX,ptrY-item*0.6);
+    }
+  }
+  function frame(now){
+    if(!running) return;
+    var dt=(now-lastT)/16.667; lastT=now;
+    if(dt<0.2)dt=0.2; if(dt>3)dt=3;
+    layout();
+    var ease=Math.min(1,0.35*dt),i;
+    for(i=0;i<items.length;i++){
+      var it=items[i];
+      if(it===held) continue;
+      it.px+=(it.tx-it.px)*ease; it.py+=(it.ty-it.py)*ease;
+    }
+    render();
+    raf=requestAnimationFrame(frame);
+  }
+  function startLoop(){ if(running)return; running=true; lastT=performance.now(); raf=requestAnimationFrame(frame); }
+  function stopLoop(){ running=false; if(raf)cancelAnimationFrame(raf); raf=0; }
+  function ptr(e){ var rc=cv.getBoundingClientRect(); ptrX=e.clientX-rc.left; ptrY=e.clientY-rc.top; }
+  cv.addEventListener('pointerdown',function(e){ ptr(e); held=pick(ptrX,ptrY); });
+  cv.addEventListener('pointermove',function(e){ if(held) ptr(e); });
+  cv.addEventListener('pointerup',function(e){
+    if(!held) return;
+    ptr(e);
+    var z=dropZone(ptrY-item*0.6);
+    if(z!==null) held.tier=z;
+    held=null; save();
+  });
+  cv.addEventListener('pointercancel',function(){ held=null; });
+  resetBtn.addEventListener('click',function(){
+    for(var i=0;i<items.length;i++) items[i].tier=-1;
+    held=null; save();
+  });
+  function onResize(){ setCanvas(); }
+  window.addEventListener('resize',onResize);
+  if(LL && LL.onResize) LL.onResize(onResize);
+  if(LL && LL.onVisibility) LL.onVisibility(function(v){ if(v) startLoop(); else stopLoop(); });
+  document.addEventListener('visibilitychange',function(){
+    if(document.hidden) stopLoop(); else startLoop();
+  });
+ 
+  setCanvas(); build();
+  for(var i=0;i<items.length;i++){
+    var z=zoneRect(-1);
+    items[i].px=z.x+item; items[i].py=z.y+item;
+  }
+  load(); startLoop();
+})();
+</script>