493 Academy

TREE

Can you make a game where you are a traveler mushroom that can plant seeds with different abilities like tree, tree is where a tree grows and you can climb it .or you can make a platform where a Mushroom grows under you really quickly. You have a mushroom parachute, a mushroom cap and a pouch.

BUDDY

Oops, something went wrong making that. Try again, or ask for something a little simpler!

TREE

Can you make a game where you are a traveler mushroom that can plant seeds with different abilities like tree, tree is where a tree grows and you can climb it

BUDDY

Oops, something went wrong making that. Try again, or ask for something a little simpler!

TREE

REE Can you make a game where you are a traveler mushroom that can plant seeds with different abilities

BUDDY

Oops, something went wrong making that. Try again, or ask for something a little simpler!

TREE

REE Can you make a game where you are a traveler mushroom that can plant seeds with different abilities.

BUDDY

Oops, something went wrong making that. Try again, or ask for something a little simpler!

TREE

BUDDY

Oops, something went wrong making that. Try again, or ask for something a little simpler!

TREE

BUDDY

Woohoo, Tree! Your mushroom traveler game is here! 🍄 You can plant tree seeds to grow climbable trees, and mushroom platform seeds that shoot up under you! Use WASD or arrow keys to move, press 1 for tree seed and 2 for mushroom platform seed, then press E to plant!

TREE

there is no ground

BUDDY

Oops, let's fix that ground right up! Now you'll have a nice solid ground to walk and plant on! 🌱

TREE

when you click on the character it shows you stats and you can change the type of mushroom you are and they have different abilities like you can jump on your head and bounce really high you also have seeds that when you plant them you can go back to them like teleporting.

BUDDY

Wow, awesome ideas Tree! 🍄 Now you can click your mushroom to see your stats and pick a different mushroom type, each with special powers! There's also a new Warp Seed you can plant and teleport back to! Check it out!

TREE

And can the art be like hollow night? The background should always be raining and trash piles everywhere that you can search but rats sometimes come out of them. The game is about exploring and cool art. There are puzzles where you have to grow things while you're in mid-air or travel back to places that you had a checkpoint on to remember puzzle codes or sequences. The characters should have a walking stick and when you click on the character you can also sea Different parts of your body that are damaged.

BUDDY

Whoa, that app got too big for me to finish in one go! Try asking for something a little simpler, or build it up in smaller steps. 🙂

TREE

And can the art be like hollow night? The background should always be raining and trash piles everywhere that you can search but rats sometimes come out of them.

BUDDY

Yes! I gave your world a dark Hollow Knight style makeover! 🍄🌧️ Now it's always raining, there are trash piles you can search by pressing E near them, and sneaky rats might pop out! Watch out for the rats — they'll bump you away!

TREE

There are puzzles where you have to grow things while you're in mid-air or travel back to places that you had a checkpoint on to remember puzzle codes or sequences. The characters should have a walking stick and when you click on the character you can also sea Different parts of your body that are damaged.you should be able to plant in to the ground so they think you are a normal mushroom

BUDDY

Whoa, that app got too big for me to finish in one go! Try asking for something a little simpler, or build it up in smaller steps. 🙂

CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mushroom Traveler</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #0a0a12; overflow: hidden; font-family: 'Georgia', serif; }
  canvas { display: block; }
  #ui {
    position: fixed; top: 10px; left: 10px;
    background: rgba(0,0,0,0.7);
    color: #aaa; padding: 10px 14px; border-radius: 12px;
    font-size: 12px; line-height: 1.9;
    border: 1px solid #333;
  }
  #seeds {
    position: fixed; bottom: 10px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 10px;
  }
  .seed-btn {
    background: rgba(0,0,0,0.75);
    color: #ccc; border: 2px solid #444;
    border-radius: 10px; padding: 8px 12px;
    font-size: 12px; cursor: pointer;
    font-family: Georgia, serif;
  }
  .seed-btn.active { background: rgba(80,50,120,0.8); border-color: #9966cc; color: #ddb8ff; }
  #msg {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.85); color: #ddb8ff;
    padding: 10px 22px; border-radius: 14px;
    font-size: 17px; display: none;
    pointer-events: none; z-index: 100;
    border: 1px solid #9966cc;
    font-family: Georgia, serif;
  }
  #statPanel {
    display: none;
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(8,6,18,0.98);
    border: 3px solid #9966cc;
    border-radius: 20px;
    color: white;
    padding: 24px 28px;
    z-index: 200;
    min-width: 320px;
    text-align: center;
    box-shadow: 0 0 40px rgba(150,80,255,0.35);
    font-family: Georgia, serif;
  }
  #statPanel h2 { color: #ddb8ff; font-size: 22px; margin-bottom: 6px; }
  #statPanel .subtitle { color: #888; font-size: 13px; margin-bottom: 14px; }
  #statPanel .stat-row { display: flex; justify-content: space-between; margin: 5px 0; font-size: 14px; }
  #statPanel .stat-label { color: #888; }
  #statPanel .stat-val { color: #ddb8ff; font-weight: bold; }
  #mushroomPicker { display: flex; gap: 10px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
  .mush-opt {
    background: rgba(255,255,255,0.05);
    border: 2px solid #444;
    border-radius: 14px; padding: 10px 14px;
    cursor: pointer; text-align: center;
    transition: border 0.2s;
    font-size: 12px; color: #ccc;
    font-family: Georgia, serif;
  }
  .mush-opt:hover { border-color: #9966cc; }
  .mush-opt.selected { border-color: #9966cc; background: rgba(150,80,255,0.18); }
  .mush-opt .mush-icon { font-size: 26px; }
  .mush-opt .mush-name { font-weight: bold; color: #ddb8ff; }
  .mush-opt .mush-desc { color: #888; font-size: 11px; margin-top: 2px; }
  #closePanel {
    margin-top: 14px; background: #9966cc; color: #fff;
    border: none; border-radius: 10px; padding: 8px 28px;
    font-size: 15px; font-weight: bold; cursor: pointer;
    font-family: Georgia, serif;
  }
  #closePanel:hover { background: #bb88ff; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="ui">
  🍄 Mushroom Traveler<br>
  Move: Arrow Keys / WASD<br>
  Jump: Space &nbsp; Plant/Search: E<br>
  1=🌿Vine &nbsp; 2=🍄Platform &nbsp; 3=✨Warp<br>
  Click yourself to see Stats!
</div>
<div id="seeds">
  <button class="seed-btn active" id="btn1">1 🌿 Vine (3)</button>
  <button class="seed-btn" id="btn2">2 🍄 Platform (3)</button>
  <button class="seed-btn" id="btn3">3 ✨ Warp (2)</button>
</div>
<div id="msg"></div>

<div id="statPanel">
  <h2 id="panelName">🍄 Mushroom Traveler</h2>
  <div class="subtitle" id="panelType">Red Cap Explorer</div>
  <div class="stat-row"><span class="stat-label">❤️ Health</span><span class="stat-val" id="statHP">100</span></div>
  <div class="stat-row"><span class="stat-label">⚡ Jump Power</span><span class="stat-val" id="statJump">-</span></div>
  <div class="stat-row"><span class="stat-label">💨 Speed</span><span class="stat-val" id="statSpeed">-</span></div>
  <div class="stat-row"><span class="stat-label">🌟 Special</span><span class="stat-val" id="statSpecial">-</span></div>
  <div class="stat-row"><span class="stat-label">🌿 Vine Seeds</span><span class="stat-val" id="statTree">-</span></div>
  <div class="stat-row"><span class="stat-label">🍄 Platform Seeds</span><span class="stat-val" id="statPlat">-</span></div>
  <div class="stat-row"><span class="stat-label">✨ Warp Seeds</span><span class="stat-val" id="statWarp">-</span></div>
  <div style="margin-top:14px; color:#ddb8ff; font-weight:bold; font-size:13px;">Choose Your Mushroom Type:</div>
  <div id="mushroomPicker">
    <div class="mush-opt selected" data-type="red">
      <div class="mush-icon">🍄</div>
      <div class="mush-name">Red Cap</div>
      <div class="mush-desc">Balanced traveler<br>Bounce on platforms!</div>
    </div>
    <div class="mush-opt" data-type="blue">
      <div class="mush-icon">🔵</div>
      <div class="mush-name">Blue Frost</div>
      <div class="mush-desc">Super fast runner<br>Slides on ground!</div>
    </div>
    <div class="mush-opt" data-type="gold">
      <div class="mush-icon">⭐</div>
      <div class="mush-name">Gold Shroom</div>
      <div class="mush-desc">Super high jumper<br>Floaty fall!</div>
    </div>
    <div class="mush-opt" data-type="purple">
      <div class="mush-icon">🟣</div>
      <div class="mush-name">Purple Spore</div>
      <div class="mush-desc">Extra warp seeds<br>Teleport master!</div>
    </div>
  </div>
  <button id="closePanel">Close ✕</button>
</div>

<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let W, H, GROUND;

function resize() {
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
  GROUND = H - 90;
}
resize();
window.addEventListener('resize', resize);

// ---- MUSHROOM TYPES ----
const MUSH_TYPES = {
  red:    { name:'Red Cap',      color:'#8b1a1a', spotColor:'#ddd',    jumpPow:-13, speed:3.5, gravity:0.6,  special:'Bounce on platforms!', warpBonus:0 },
  blue:   { name:'Blue Frost',   color:'#1a3a6b', spotColor:'#88aadd', jumpPow:-12, speed:5.5, gravity:0.65, special:'Super fast runner!',   warpBonus:0 },
  gold:   { name:'Gold Shroom',  color:'#7a6000', spotColor:'#ffe87a', jumpPow:-17, speed:3.2, gravity:0.38, special:'Floaty high jumper!',  warpBonus:0 },
  purple: { name:'Purple Spore', color:'#4a1a6b', spotColor:'#cc88ff', jumpPow:-13, speed:3.5, gravity:0.6,  special:'Extra warp seeds!',    warpBonus:2 },
};

// ---- INPUT ----
const keys = {};
document.addEventListener('keydown', e => {
  keys[e.code] = true;
  if (e.code==='Digit1'){ player.selectedSeed='tree'; updateSeedUI(); }
  if (e.code==='Digit2'){ player.selectedSeed='platform'; updateSeedUI(); }
  if (e.code==='Digit3'){ player.selectedSeed='warp'; updateSeedUI(); }
  if (e.code==='KeyE') tryAction();
  if (e.code==='KeyT') teleportToWarp();
});
document.addEventListener('keyup', e => { keys[e.code] = false; });

// ---- PLAYER ----
const player = {
  x:300, y:0, w:28, h:44,
  vx:0, vy:0,
  onGround:false,
  climbing:false, climbTarget:null,
  selectedSeed:'tree',
  seeds:{ tree:3, platform:3, warp:2 },
  facingRight:true,
  mushType:'red',
  hp:100,
  lastWarp:0,
  walkFrame:0,
};

// ---- WORLD ----
let vines = [];
let mushPlatforms = [];
let warpPoints = [];
let trashPiles = [];
let rats = [];
let camX = 0;

// Rain drops
let rainDrops = [];
for(let i=0;i<180;i++){
  rainDrops.push({
    x: Math.random()*2000,
    y: Math.random()*800,
    len: 8+Math.random()*14,
    speed: 7+Math.random()*5,
    alpha: 0.18+Math.random()*0.25
  });
}

// Trash piles
const trashPositions = [400,700,1050,1400,1750,2100,2500];
for(let tx of trashPositions){
  trashPiles.push({ x:tx, searched:false, searching:false, searchTimer:0, hasRat: Math.random()<0.55 });
}

// Background details
let bgDetails = [];
for(let i=0;i<30;i++){
  bgDetails.push({ x:Math.random()*3000, y:GROUND-(20+Math.random()*200), type:Math.floor(Math.random()*3) });
}

// ---- RAT ----
function spawnRat(x){
  rats.push({ x:x, y:GROUND-22, vx:(Math.random()<0.5?-2:2)*1.5, vy:0, w:28, h:18, alive:true, biteTimer:0, alpha:1 });
}

// ---- ACTIONS ----
function tryAction(){
  // First check if near trash pile
  for(let tp of trashPiles){
    const tx = tp.x - camX;
    if(!tp.searched && Math.abs(tx - player.x) < 60 && player.onGround){
      tp.searching = true;
      tp.searchTimer = 90;
      showMsg('🗑️ Searching trash pile...');
      setTimeout(()=>{
        tp.searched = true;
        if(tp.hasRat){
          spawnRat(tp.x);
          showMsg('🐀 A rat jumped out!');
        } else {
          // give a seed reward
          const rand = Math.random();
          if(rand<0.4){ player.seeds.tree++; showMsg('🌿 Found a vine seed!'); }
          else if(rand<0.7){ player.seeds.platform++; showMsg('🍄 Found a platform seed!'); }
          else { player.seeds.warp++; showMsg('✨ Found a warp seed!'); }
          updateSeedUI();
        }
      }, 1500);
      return;
    }
  }
  plantSeed();
}

function plantSeed(){
  const type = player.selectedSeed;
  if(player.seeds[type]<=0){ showMsg('No '+type+' seeds!'); return; }
  const worldX = player.x + camX;

  if(type==='tree'){
    for(let t of vines){
      if(Math.abs(t.x-worldX)<70){ showMsg('Too close to a vine!'); return; }
    }
    player.seeds.tree--;
    vines.push({ x:worldX, height:0, maxHeight:160+Math.random()*60, growing:true });
    showMsg('🌿 Vine growing!');
  } else if(type==='platform'){
    player.seeds.platform--;
    mushPlatforms.push({ x:worldX, y:player.y+player.h, targetY:player.y-10, w:90, h:20, settled:false });
    showMsg('🍄 Mushroom rising!');
  } else if(type==='warp'){
    player.seeds.warp--;
    warpPoints.push({ x:worldX, y:GROUND, id:warpPoints.length });
    showMsg('✨ Warp planted! Press T to warp!');
  }
  updateSeedUI();
}

function teleportToWarp(){
  if(warpPoints.length===0){ showMsg('No warp points!'); return; }
  const wp = warpPoints[player.lastWarp % warpPoints.length];
  player.lastWarp = (player.lastWarp+1) % warpPoints.length;
  player.x = wp.x - camX;
  player.y = GROUND - player.h;
  player.vy=0; player.vx=0;
  showMsg('✨ Warped!');
}

// ---- UI ----
function updateSeedUI(){
  ['tree','platform','warp'].forEach((s,i)=>{
    const btn = document.getElementById('btn'+(i+1));
    btn.className = 'seed-btn'+(player.selectedSeed===s?' active':'');
  });
  document.getElementById('btn1').textContent=`1 🌿 Vine (${player.seeds.tree})`;
  document.getElementById('btn2').textContent=`2 🍄 Platform (${player.seeds.platform})`;
  document.getElementById('btn3').textContent=`3 ✨ Warp (${player.seeds.warp})`;
}

let msgTimeout;
function showMsg(txt){
  const m=document.getElementById('msg');
  m.textContent=txt; m.style.display='block';
  clearTimeout(msgTimeout);
  msgTimeout=setTimeout(()=>m.style.display='none',2000);
}

// ---- STAT PANEL ----
function openStatPanel(){
  const mt=MUSH_TYPES[player.mushType];
  document.getElementById('panelName').textContent='🍄 '+mt.name;
  document.getElementById('panelType').textContent=mt.special;
  document.getElementById('statHP').textContent=player.hp;
  document.getElementById('statJump').textContent=player.mushType==='gold'?'Super High ⭐':player.mushType==='red'?'Normal + Bounce!':'Normal';
  document.getElementById('statSpeed').textContent=player.mushType==='blue'?'Super Fast 💨':'Normal';
  document.getElementById('statSpecial').textContent=mt.special;
  document.getElementById('statTree').textContent=player.seeds.tree;
  document.getElementById('statPlat').textContent=player.seeds.platform;
  document.getElementById('statWarp').textContent=player.seeds.warp;
  document.querySelectorAll('.mush-opt').forEach(el=>{
    el.className='mush-opt'+(el.dataset.type===player.mushType?' selected':'');
  });
  document.getElementById('statPanel').style.display='block';
}

document.querySelectorAll('.mush-opt').forEach(el=>{
  el.addEventListener('click',()=>{
    const oldType=player.mushType;
    player.mushType=el.dataset.type;
    if(player.mushType==='purple'&&oldType!=='purple'){
      player.seeds.warp+=2;
      showMsg('✨ +2 Warp seeds bonus!');
    }
    document.querySelectorAll('.mush-opt').forEach(o=>o.className='mush-opt'+(o.dataset.type===player.mushType?' selected':''));
    openStatPanel();
  });
});
document.getElementById('closePanel').addEventListener('click',()=>{
  document.getElementById('statPanel').style.display='none';
  updateSeedUI();
});
canvas.addEventListener('click',e=>{
  const rect=canvas.getBoundingClientRect();
  const mx=e.clientX-rect.left, my=e.clientY-rect.top;
  if(mx>player.x-20&&mx<player.x+48&&my>player.y-10&&my<player.y+player.h+10){
    openStatPanel();
  }
});
document.getElementById('btn1').addEventListener('click',()=>{ player.selectedSeed='tree'; updateSeedUI(); });
document.getElementById('btn2').addEventListener('click',()=>{ player.selectedSeed='platform'; updateSeedUI(); });
document.getElementById('btn3').addEventListener('click',()=>{ player.selectedSeed='warp'; updateSeedUI(); });

// ---- PHYSICS ----
function getType(){ return MUSH_TYPES[player.mushType]; }

function update(){
  if(document.getElementById('statPanel').style.display==='block') return;

  // Rain
  for(let r of rainDrops){
    r.y += r.speed;
    r.x -= 1.2;
    if(r.y > H){ r.y = -20; r.x = (r.x + camX*0.3 + Math.random()*W) % W; }
    if(r.x < -10) r.x += W + 200;
  }

  // Vine grow
  for(let v of vines){
    if(v.growing){ v.height+=2.2; if(v.height>=v.maxHeight){ v.height=v.maxHeight; v.growing=false; } }
  }

  // Mushroom platforms rise
  for(let mp of mushPlatforms){
    if(!mp.settled){ mp.y-=10; if(mp.y<=mp.targetY){ mp.y=mp.targetY; mp.settled=true; } }
  }

  // Rats
  for(let rat of rats){
    if(!rat.alive) continue;
    rat.vx *= 0.98;
    rat.x += rat.vx;
    rat.y += rat.vy;
    rat.vy += 0.5;
    if(rat.y + rat.h >= GROUND){ rat.y = GROUND-rat.h; rat.vy=0; }
    // chase player
    const rx = rat.x - camX;
    const dist = player.x - rx;
    if(Math.abs(dist)<300){
      rat.vx += dist>0 ? 0.18 : -0.18;
      rat.vx = Math.max(-3.5, Math.min(3.5, rat.vx));
    }
    // bite player
    if(Math.abs(dist)<30 && Math.abs((rat.y)-(player.y+player.h-10))<30){
      rat.biteTimer++;
      if(rat.biteTimer%60===0){ player.hp=Math.max(0, player.hp-8); showMsg('🐀 Ouch! Rat bite! HP:'+player.hp); }
    }
  }

  const mt = getType();

  if(!player.climbing){
    if(keys['ArrowLeft']||keys['KeyA']){ player.vx=-mt.speed; player.facingRight=false; }
    else if(keys['ArrowRight']||keys['KeyD']){ player.vx=mt.speed; player.facingRight=true; }
    else { player.vx*=(player.mushType==='blue'?0.82:0.65); }
  }

  // Walking animation
  if(Math.abs(player.vx)>0.5) player.walkFrame++;

  // Climbing vines
  let nearVine=null;
  for(let v of vines){
    const vx=v.x-camX;
    if(player.x+player.w>vx-12&&player.x<vx+12&&v.height>10) nearVine=v;
  }
  player.climbing=false;
  if(nearVine&&player.climbTarget===nearVine){
    if(keys['ArrowUp']||keys['KeyW']){ player.climbing=true; player.vy=-3; player.vx=0; }
    else if(keys['ArrowDown']||keys['KeyS']){ player.climbing=true; player.vy=2; player.vx=0; }
  }
  if(nearVine) player.climbTarget=nearVine; else player.climbTarget=null;

  if(!player.climbing) player.vy+=mt.gravity;
  if((keys['Space'])&&player.onGround&&!player.climbing){
    player.vy=mt.jumpPow; player.onGround=false;
  }

  player.x+=player.vx; player.y+=player.vy; player.onGround=false;

  if(player.y+player.h>=GROUND){ player.y=GROUND-player.h; player.vy=0; player.onGround=true; }
  if(player.y<0){ player.y=0; player.vy=0; }

  for(let mp of mushPlatforms){
    if(!mp.settled) continue;
    const sx=mp.x-camX-mp.w/2, sy=mp.y;
    if(player.x+player.w>sx&&player.x<sx+mp.w&&player.vy>=0&&player.y+player.h>=sy-4&&player.y+player.h<=sy+16){
      player.y=sy-player.h; player.vy=0; player.onGround=true;
      if(player.mushType==='red'&&keys['Space']){
        player.vy=-19; player.onGround=false; showMsg('🍄 Super Bounce!');
      }
    }
  }

  camX=player.x-W/2+player.w/2;
  if(camX<0) camX=0;
  if(player.x<10){ player.x=10; player.vx=0; }
}

// ---- DRAWING ----

function hsl(h,s,l){ return `hsl(${h},${s}%,${l}%)`; }

function drawBg(){
  // Dark gradient sky
  const grad=ctx.createLinearGradient(0,0,0,GROUND);
  grad.addColorStop(0,'#05050f');
  grad.addColorStop(0.6,'#0a0818');
  grad.addColorStop(1,'#120a08');
  ctx.fillStyle=grad; ctx.fillRect(0,0,W,GROUND);

  // Distant glowing arches / ruins
  ctx.save();
  ctx.globalAlpha=0.13;
  for(let i=0;i<4;i++){
    const rx=((i*400-camX*0.05)%( W+400))-200;
    ctx.strokeStyle='#9966cc'; ctx.lineWidth=3;
    ctx.beginPath(); ctx.arc(rx+200, GROUND+40, 200, Math.PI, 0); ctx.stroke();
    ctx.beginPath(); ctx.arc(rx+200, GROUND+40, 160, Math.PI, 0); ctx.stroke();
  }
  ctx.restore();

  // Background stalactites
  ctx.save();
  ctx.globalAlpha=0.18;
  for(let i=0;i<12;i++){
    const sx=((i*210-camX*0.08)%(W+210))-80;
    const sh=50+Math.sin(i*1.3)*30;
    ctx.fillStyle='#1a1228';
    ctx.beginPath(); ctx.moveTo(sx,0); ctx.lineTo(sx+18,sh); ctx.lineTo(sx+36,0); ctx.closePath(); ctx.fill();
  }
  ctx.restore();

  // Mid background spore particles
  ctx.save();
  for(let i=0;i<18;i++){
    const t=Date.now()*0.0004+i*0.7;
    const sx=((i*180-camX*0.12+Math.sin(t)*30)%(W+200));
    const sy=100+Math.sin(t+i)*120;
    ctx.globalAlpha=0.12+0.08*Math.sin(t);
    ctx.fillStyle='#cc88ff';
    ctx.beginPath(); ctx.arc(sx,sy,2+Math.sin(t+i)*1.5,0,Math.PI*2); ctx.fill();
  }
  ctx.restore();

  // Ground - stone tile look
  ctx.fillStyle='#111118'; ctx.fillRect(0,GROUND,W,H-GROUND);
  // stone line pattern
  ctx.strokeStyle='#1e1e2e'; ctx.lineWidth=1;
  for(let i=0;i<W;i+=48){
    ctx.beginPath(); ctx.moveTo(i-(camX%48),GROUND); ctx.lineTo(i-(camX%48),H); ctx.stroke();
  }
  for(let j=GROUND;j<H;j+=24){
    ctx.beginPath(); ctx.moveTo(0,j); ctx.lineTo(W,j); ctx.stroke();
  }

  // Ground top edge glow
  const gGrad=ctx.createLinearGradient(0,GROUND-8,0,GROUND+20);
  gGrad.addColorStop(0,'rgba(150,80,255,0.22)');
  gGrad.addColorStop(1,'rgba(0,0,0,0)');
  ctx.fillStyle=gGrad; ctx.fillRect(0,GROUND-8,W,28);

  // Ground top mossy edge
  ctx.fillStyle='#1a1a2e'; ctx.fillRect(0,GROUND,W,8);
  ctx.fillStyle='#2a1a3a';
  for(let i=0;i<W;i+=16){
    const xi=(i-(camX%16)+W)%W;
    const h2=3+Math.sin(i*0.7)*2;
    ctx.fillRect(xi,GROUND-h2,8,h2+2);
  }

  // Wall background details
  ctx.save();
  ctx.globalAlpha=0.07;
  for(let d of bgDetails){
    const dx=d.x-camX*0.3;
    if(dx<-50||dx>W+50) continue;
    ctx.strokeStyle='#8855aa'; ctx.lineWidth=2;
    if(d.type===0){
      ctx.beginPath(); ctx.arc(dx,d.y,15,0,Math.PI*2); ctx.stroke();
    } else if(d.type===1){
      ctx.strokeRect(dx-10,d.y-20,20,40);
    } else {
      ctx.beginPath(); ctx.moveTo(dx,d.y-25); ctx.lineTo(dx+15,d.y+15); ctx.lineTo(dx-15,d.y+15); ctx.closePath(); ctx.stroke();
    }
  }
  ctx.restore();
}

function drawRain(){
  ctx.save();
  for(let r of rainDrops){
    ctx.globalAlpha=r.alpha;
    ctx.strokeStyle='#7ab8cc';
    ctx.lineWidth=1;
    ctx.beginPath();
    ctx.moveTo(r.x, r.y);
    ctx.lineTo(r.x+r.len*0.15, r.y+r.len);
    ctx.stroke();
  }
  // Puddle splashes on ground
  ctx.globalAlpha=0.18;
  for(let i=0;i<8;i++){
    const t=Date.now()*0.003+i*1.3;
    const px=((i*150-camX*0.5+200)%(W+100));
    const pr=(t%2)*4;
    ctx.strokeStyle='#88aacc';
    ctx.lineWidth=1;
    ctx.beginPath(); ctx.ellipse(px,GROUND+4,pr,pr*0.3,0,0,Math.PI*2); ctx.stroke();
  }
  ctx.restore();
}

function drawTrashPile(tp){
  const tx=tp.x-camX;
  if(tx<-120||tx>W+120) return;
  const by=GROUND;

  // Pile shadow
  ctx.save();
  ctx.globalAlpha=0.3;
  ctx.fillStyle='#000';
  ctx.beginPath(); ctx.ellipse(tx,by+2,50,10,0,0,Math.PI*2); ctx.fill();
  ctx.restore();

  // Trash bags / boxes - dark muted style
  ctx.fillStyle=tp.searched?'#1a1a1a':'#1e2218';
  ctx.beginPath();
  if(ctx.roundRect) ctx.roundRect(tx-38,by-38,32,38,5);
  else ctx.rect(tx-38,by-38,32,38);
  ctx.fill();
  ctx.strokeStyle='#333'; ctx.lineWidth=1.5; ctx.stroke();

  ctx.fillStyle=tp.searched?'#111':'#1a1e10';
  ctx.beginPath();
  if(ctx.roundRect) ctx.roundRect(tx-8,by-28,28,28,4);
  else ctx.rect(tx-8,by-28,28,28);
  ctx.fill();
  ctx.strokeStyle='#2a2a2a'; ctx.lineWidth=1.5; ctx.stroke();

  // Planks
  ctx.fillStyle='#1a1410';
  ctx.fillRect(tx+22,by-42,14,42);
  ctx.strokeStyle='#2a2010'; ctx.lineWidth=1; ctx.stroke();

  // Broken bottle
  ctx.fillStyle='rgba(50,80,60,0.6)';
  ctx.beginPath(); ctx.moveTo(tx-50,by); ctx.lineTo(tx-44,by-18); ctx.lineTo(tx-38,by); ctx.fill();

  // Glow if not searched
  if(!tp.searched){
    ctx.save();
    ctx.globalAlpha=0.08+0.06*Math.sin(Date.now()*0.003);
    ctx.fillStyle='#88aaff';
    ctx.beginPath(); ctx.ellipse(tx,by-20,55,30,0,0,Math.PI*2); ctx.fill();
    ctx.restore();
    // Label
    ctx.fillStyle='rgba(150,180,255,0.7)'; ctx.font='11px Georgia'; ctx.textAlign='center';
    ctx.fillText('E = Search',tx,by-48);
  } else {
    ctx.fillStyle='rgba(100,100,100,0.5)'; ctx.font='11px Georgia'; ctx.textAlign='center';
    ctx.fillText('Searched',tx,by-48);
  }

  // Searching animation
  if(tp.searching&&!tp.searched){
    ctx.save();
    const progress=(90-tp.searchTimer)/90;
    ctx.globalAlpha=0.8;
    ctx.strokeStyle='#ddb8ff'; ctx.lineWidth=3;
    ctx.beginPath(); ctx.arc(tx,by-60,14,-Math.PI/2,-Math.PI/2+Math.PI*2*progress); ctx.stroke();
    ctx.restore();
    tp.searchTimer--;
  }
}

function drawRat(rat){
  if(!rat.alive) return;
  const rx=rat.x-camX;
  if(rx<-80||rx>W+80) return;
  const ry=rat.y;
  const facingR=rat.vx>0;

  ctx.save();
  if(!facingR){ ctx.translate(rx+rat.w/2,0); ctx.scale(-1,1); ctx.translate(-(rx+rat.w/2),0); }

  // Body
  ctx.fillStyle='#2a2018';
  ctx.beginPath(); ctx.ellipse(rx+14,ry+10,14,9,0,0,Math.PI*2); ctx.fill();
  // Head
  ctx.fillStyle='#241e14';
  ctx.beginPath(); ctx.ellipse(rx+26,ry+6,9,7,0.3,0,Math.PI*2); ctx.fill();
  // Ear
  ctx.fillStyle='#3a1818';
  ctx.beginPath(); ctx.ellipse(rx+28,ry-1,4,5,0.5,0,Math.PI*2); ctx.fill();
  // Eye - glowing red
  ctx.fillStyle='#ff2222';
  ctx.beginPath(); ctx.arc(rx+30,ry+4,2,0,Math.PI*2); ctx.fill();
  ctx.fillStyle='rgba(255,0,0,0.3)';
  ctx.beginPath(); ctx.arc(rx+30,ry+4,4,0,Math.PI*2); ctx.fill();
  // Nose
  ctx.fillStyle='#ff6688';
  ctx.beginPath(); ctx.arc(rx+34,ry+7,1.5,0,Math.PI*2); ctx.fill();
  // Tail
  ctx.strokeStyle='#1a1010'; ctx.lineWidth=2;
  ctx.beginPath(); ctx.moveTo(rx+2,ry+12); ctx.quadraticCurveTo(rx-12,ry+4,rx-8,ry-4); ctx.stroke();
  // Legs
  ctx.strokeStyle='#2a2018'; ctx.lineWidth=2.5;
  const legSwing=Math.sin(Date.now()*0.015)*5;
  ctx.beginPath(); ctx.moveTo(rx+8,ry+16); ctx.lineTo(rx+5,ry+22+legSwing); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(rx+14,ry+16); ctx.lineTo(rx+16,ry+22-legSwing); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(rx+20,ry+16); ctx.lineTo(rx+18,ry+22+legSwing); ctx.stroke();

  ctx.restore();
}

function drawVine(v){
  const vx=v.x-camX;
  if(vx<-80||vx>W+80) return;
  const baseY=GROUND, topY=baseY-v.height;

  // Main vine rope
  ctx.strokeStyle='#1e3a14'; ctx.lineWidth=6;
  ctx.beginPath();
  for(let y=baseY;y>topY;y-=20){
    const sway=Math.sin(y*0.05+Date.now()*0.001)*3;
    if(y===baseY) ctx.moveTo(vx+sway,y);
    else ctx.lineTo(vx+sway,y);
  }
  ctx.stroke();

  // Vine inner highlight
  ctx.strokeStyle='#2a5a1e'; ctx.lineWidth=2;
  ctx.beginPath();
  for(let y=baseY;y>topY;y-=20){
    const sway=Math.sin(y*0.05+Date.now()*0.001)*3;
    if(y===baseY) ctx.moveTo(vx+sway-1,y);
    else ctx.lineTo(vx+sway-1,y);
  }
  ctx.stroke();

  // Leaf nodes
  if(v.height>30){
    for(let ly=topY+30;ly<baseY-20;ly+=35){
      const sway=Math.sin(ly*0.05+Date.now()*0.001)*3;
      ctx.fillStyle='#1e4a14';
      ctx.save();
      ctx.translate(vx+sway,ly);
      ctx.rotate(-0.4);
      ctx.beginPath(); ctx.ellipse(-14,-3,12,5,0,0,Math.PI*2); ctx.fill();
      ctx.restore();
      ctx.save();
      ctx.translate(vx+sway,ly+18);
      ctx.rotate(0.4);
      ctx.beginPath(); ctx.ellipse(14,-3,12,5,0,0,Math.PI*2); ctx.fill();
      ctx.restore();
    }
  }

  // Top glow
  ctx.save();
  ctx.globalAlpha=0.25+0.1*Math.sin(Date.now()*0.004);
  ctx.fillStyle='#44ff88';
  ctx.beginPath(); ctx.arc(vx+Math.sin(Date.now()*0.001)*3,topY+10,10,0,Math.PI*2); ctx.fill();
  ctx.restore();

  if(!v.growing){
    ctx.fillStyle='rgba(180,255,180,0.6)'; ctx.font='11px Georgia'; ctx.textAlign='center';
    ctx.fillText('↑↓ Climb',vx,topY-8);
  }
}

function drawMushPlatform(mp){
  const sx=mp.x-camX-mp.w/2, sy=mp.y;
  if(sx>W+100||sx+mp.w<-100) return;
  const cx=sx+mp.w/2;

  // Stalk
  ctx.fillStyle='#2a2018';
  ctx.fillRect(cx-5,sy,10,GROUND-sy);
  ctx.fillStyle='rgba(80,60,40,0.4)';
  ctx.fillRect(cx+2,sy,3,GROUND-sy);

  // Shadow
  ctx.save(); ctx.globalAlpha=0.2;
  ctx.fillStyle='#000';
  ctx.beginPath(); ctx.ellipse(cx+4,sy+5,mp.w/2,12,0,0,Math.PI*2); ctx.fill();
  ctx.restore();

  // Cap
  ctx.fillStyle='#4a1a2a';
  ctx.beginPath(); ctx.ellipse(cx,sy-4,mp.w/2,15,0,0,Math.PI*2); ctx.fill();
  // Cap shading
  ctx.fillStyle='#3a0e1e';
  ctx.beginPath(); ctx.ellipse(cx,sy+4,mp.w/2,6,0,0,Math.PI*2); ctx.fill();
  // Cap highlight
  ctx.fillStyle='#6a2a3a';
  ctx.beginPath(); ctx.ellipse(cx-8,sy-10,mp.w/4,7,0.3,0,Math.PI*2); ctx.fill();

  // Spots - pale
  ctx.fillStyle='rgba(220,180,220,0.55)';
  ctx.beginPath(); ctx.arc(cx-16,sy-7,5,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.arc(cx+14,sy-8,4,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.arc(cx+2,sy-14,3.5,0,Math.PI*2); ctx.fill();

  // Glow underneath
  ctx.save(); ctx.globalAlpha=0.12;
  ctx.fillStyle='#ff44aa';
  ctx.beginPath(); ctx.ellipse(cx,sy+2,mp.w/2+8,10,0,0,Math.PI*2); ctx.fill();
  ctx.restore();
}

function drawWarpPoint(wp){
  const wx=wp.x-camX;
  if(wx<-60||wx>W+60) return;
  const wy=GROUND;
  const t=Date.now()*0.003;
  const r=14+Math.sin(t)*4;

  ctx.save();
  // Outer ring
  ctx.globalAlpha=0.5+0.3*Math.sin(t);
  ctx.strokeStyle='#cc44ff'; ctx.lineWidth=3;
  ctx.beginPath(); ctx.arc(wx,wy-16,r,0,Math.PI*2); ctx.stroke();
  // Inner glow
  ctx.globalAlpha=0.2+0.15*Math.sin(t);
  ctx.fillStyle='#aa22ee';
  ctx.beginPath(); ctx.arc(wx,wy-16,r,0,Math.PI*2); ctx.fill();
  // Rune lines
  ctx.globalAlpha=0.6;
  ctx.strokeStyle='#ee88ff'; ctx.lineWidth=1.5;
  for(let i=0;i<4;i++){
    const a=t+i*Math.PI/2;
    ctx.beginPath(); ctx.moveTo(wx+Math.cos(a)*(r-2),wy-16+Math.sin(a)*(r-2));
    ctx.lineTo(wx+Math.cos(a+Math.PI/4)*(r*0.5),wy-16+Math.sin(a+Math.PI/4)*(r*0.5));
    ctx.stroke();
  }
  ctx.globalAlpha=1;
  ctx.font='10px Georgia'; ctx.textAlign='center'; ctx.fillStyle='#ddb8ff';
  ctx.fillText('T=Warp',wx,wy-36);
  ctx.restore();
}

function drawPlayer(){
  const mt=getType();
  const capColor=mt.color;
  const spotColor=mt.spotColor;
  let px=player.x;
  let py=player.y;
  const w=player.w, h=player.h;
  const t=Date.now()*0.004;
  const idleBob=player.onGround?Math.sin(t)*1.2:0;
  const walkLeg=player.onGround&&Math.abs(player.vx)>0.5?Math.sin(player.walkFrame*0.18)*5:0;

  ctx.save();
  if(!player.facingRight){
    ctx.translate(px+w/2,0); ctx.scale(-1,1); ctx.translate(-(px+w/2),0);
  }

  // Shadow
  ctx.save(); ctx.globalAlpha=0.25;
  ctx.fillStyle='#000';
  ctx.beginPath(); ctx.ellipse(px+w/2,GROUND+3,16,5,0,0,Math.PI*2); ctx.fill();
  ctx.restore();

  // Walking stick
  ctx.strokeStyle='#5a3a18'; ctx.lineWidth=3;
  ctx.beginPath();
  ctx.moveTo(px+w+2,py+h);
  ctx.lineTo(px+w+6+Math.sin(player.walkFrame*0.15)*3,py+8+idleBob);
  ctx.stroke();
  // Stick top curl
  ctx.strokeStyle='#7a5a28'; ctx.lineWidth=2;
  ctx.beginPath(); ctx.arc(px+w+6+Math.sin(player.walkFrame*0.15)*3,py+8+idleBob,5,-1,Math.PI); ctx.stroke();

  // Legs
  ctx.strokeStyle='#c8b890'; ctx.lineWidth=5;
  ctx.lineCap='round';
  ctx.beginPath(); ctx.moveTo(px+8,py+h-8); ctx.lineTo(px+5,py+h+walkLeg); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(px+20,py+h-8); ctx.lineTo(px+22,py+h-walkLeg); ctx.stroke();
  // Shoes
  ctx.fillStyle='#2a1a0a';
  ctx.beginPath(); ctx.ellipse(px+5,py+h+walkLeg+2,7,4,0,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.ellipse(px+22,py+h-walkLeg+2,7,4,0,0,Math.PI*2); ctx.fill();

  // Body - hollow knight style robes
  ctx.fillStyle='#c8b890';
  ctx.beginPath();
  if(ctx.roundRect) ctx.roundRect(px+4,py+16+idleBob,w-8,h-20,4);
  else ctx.rect(px+4,py+16+idleBob,w-8,h-20);
  ctx.fill();
  // Robe dark shading
  ctx.fillStyle='rgba(0,0,0,0.2)';
  ctx.fillRect(px+w-9,py+16+idleBob,5,h-20);

  // Cloak / mantle
  ctx.fillStyle='#2a2018';
  ctx.beginPath();
  ctx.moveTo(px+2,py+16+idleBob);
  ctx.lineTo(px-4,py+h-4);
  ctx.lineTo(px+w+4,py+h-4);
  ctx.lineTo(px+w+2,py+16+idleBob);
  ctx.closePath(); ctx.fill();
  // Cloak clasp
  ctx.fillStyle='#9966cc';
  ctx.beginPath(); ctx.arc(px+w/2,py+19+idleBob,3,0,Math.PI*2); ctx.fill();

  // Pouch
  ctx.fillStyle='#3a2a10';
  ctx.beginPath(); ctx.ellipse(px+w+1,py+h-14,7,5,0.3,0,Math.PI*2); ctx.fill();
  ctx.strokeStyle='#1a1008'; ctx.lineWidth=1; ctx.stroke();
  // Pouch clasp
  ctx.fillStyle='#8a6a20';
  ctx.beginPath(); ctx.arc(px+w+2,py+h-15,2,0,Math.PI*2); ctx.fill();
  // Pouch strap
  ctx.strokeStyle='#5a3a10'; ctx.lineWidth=1.5;
  ctx.beginPath(); ctx.moveTo(px+w-2,py+h-18); ctx.lineTo(px+w-5,py+22+idleBob); ctx.stroke();

  // Face / mask - hollow knight style
  ctx.fillStyle='#e8e0cc';
  if(ctx.roundRect) {
    ctx.beginPath(); ctx.roundRect(px+4,py+18+idleBob,w-8,16,3); ctx.fill();
  } else {
    ctx.fillRect(px+4,py+18+idleBob,w-8,16);
  }
  // Eye sockets - dark hollow style
  ctx.fillStyle='#111';
  ctx.beginPath(); ctx.ellipse(px+9,py+25+idleBob,3.5,2.5,0,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.ellipse(px+19,py+25+idleBob,3.5,2.5,0,0,Math.PI*2); ctx.fill();
  // Eye glow
  ctx.fillStyle=capColor;
  ctx.globalAlpha=0.8;
  ctx.beginPath(); ctx.arc(px+9,py+25+idleBob,1.5,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.arc(px+19,py+25+idleBob,1.5,0,Math.PI*2); ctx.fill();
  ctx.globalAlpha=1;

  // Mushroom cap - dark HK style
  ctx.fillStyle=capColor;
  ctx.beginPath(); ctx.ellipse(px+w/2,py+14+idleBob,w/2+7,14,0,0,Math.PI*2); ctx.fill();
  // Cap underside
  ctx.fillStyle=shadeColor(capColor,-25);
  ctx.beginPath(); ctx.ellipse(px+w/2,py+23+idleBob,w/2+7,5,0,0,Math.PI*2); ctx.fill();
  // Cap highlight edge
  ctx.strokeStyle=shadeColor(capColor,30); ctx.lineWidth=1.5; ctx.globalAlpha=0.4;
  ctx.beginPath(); ctx.ellipse(px+w/2-4,py+10+idleBob,w/3,7,0.3,0,Math.PI*2); ctx.stroke();
  ctx.globalAlpha=1;
  // Spots
  ctx.fillStyle=spotColor; ctx.globalAlpha=0.7;
  ctx.beginPath(); ctx.arc(px+w/2-7,py+10+idleBob,4,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.arc(px+w/2+8,py+12+idleBob,3,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.arc(px+w/2,py+17+idleBob,2.5,0,Math.PI*2); ctx.fill();
  ctx.globalAlpha=1;

  // Cap gills underneath
  ctx.strokeStyle=shadeColor(capColor,-10); ctx.lineWidth=0.8; ctx.globalAlpha=0.5;
  for(let g=-3;g<=3;g++){
    ctx.beginPath();
    ctx.moveTo(px+w/2+g*4,py+23+idleBob);
    ctx.lineTo(px+w/2+g*5.5,py+27+idleBob);
    ctx.stroke();
  }
  ctx.globalAlpha=1;

  // Gold shroom aura
  if(player.mushType==='gold'){
    ctx.save(); ctx.globalAlpha=0.25+0.15*Math.sin(Date.now()*0.005);
    ctx.strokeStyle='#ffcc22'; ctx.lineWidth=2;
    ctx.beginPath(); ctx.ellipse(px+w/2,py+h/2+idleBob,w+6,h*0.65,0,0,Math.PI*2); ctx.stroke();
    ctx.restore();
  }

  // Climbng vine indicator
  if(player.climbTarget){
    ctx.fillStyle='rgba(100,255,120,0.8)'; ctx.font='bold 12px Georgia'; ctx.textAlign='center';
    ctx.fillText('↑↓ Climb!',px+w/2,py-12+idleBob);
  }

  ctx.restore();
}

function shadeColor(hex,amt){
  let r=parseInt(hex.slice(1,3),16),g=parseInt(hex.slice(3,5),16),b=parseInt(hex.slice(5,7),16);
  r=Math.max(0,Math.min(255,r+amt)); g=Math.max(0,Math.min(255,g+amt)); b=Math.max(0,Math.min(255,b+amt));
  return '#'+[r,g,b].map(v=>v.toString(16).padStart(2,'0')).join('');
}

function draw(){
  ctx.clearRect(0,0,W,H);
  drawBg();
  drawRain();
  for(let wp of warpPoints) drawWarpPoint(wp);
  for(let v of vines) drawVine(v);
  for(let mp of mushPlatforms) drawMushPlatform(mp);
  for(let tp of trashPiles) drawTrashPile(tp);
  for(let rat of rats) drawRat(rat);
  drawPlayer();
}

function loop(){ update(); draw(); requestAnimationFrame(loop); }

player.y = GROUND - player.h;
updateSeedUI();
loop();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mushroom Traveler</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #0a0a12; overflow: hidden; font-family: 'Georgia', serif; }
  canvas { display: block; }
  #ui {
    position: fixed; top: 10px; left: 10px;
    background: rgba(0,0,0,0.7);
    color: #aaa; padding: 10px 14px; border-radius: 12px;
    font-size: 12px; line-height: 1.9;
    border: 1px solid #333;
  }
  #seeds {
    position: fixed; bottom: 10px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 10px;
  }
  .seed-btn {
    background: rgba(0,0,0,0.75);
    color: #ccc; border: 2px solid #444;
    border-radius: 10px; padding: 8px 12px;
    font-size: 12px; cursor: pointer;
    font-family: Georgia, serif;
  }
  .seed-btn.active { background: rgba(80,50,120,0.8); border-color: #9966cc; color: #ddb8ff; }
  #msg {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.85); color: #ddb8ff;
    padding: 10px 22px; border-radius: 14px;
    font-size: 17px; display: none;
    pointer-events: none; z-index: 100;
    border: 1px solid #9966cc;
    font-family: Georgia, serif;
  }
  #statPanel {
    display: none;
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(8,6,18,0.98);
    border: 3px solid #9966cc;
    border-radius: 20px;
    color: white;
    padding: 24px 28px;
    z-index: 200;
    min-width: 320px;
    text-align: center;
    box-shadow: 0 0 40px rgba(150,80,255,0.35);
    font-family: Georgia, serif;
  }
  #statPanel h2 { color: #ddb8ff; font-size: 22px; margin-bottom: 6px; }
  #statPanel .subtitle { color: #888; font-size: 13px; margin-bottom: 14px; }
  #statPanel .stat-row { display: flex; justify-content: space-between; margin: 5px 0; font-size: 14px; }
  #statPanel .stat-label { color: #888; }
  #statPanel .stat-val { color: #ddb8ff; font-weight: bold; }
  #mushroomPicker { display: flex; gap: 10px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
  .mush-opt {
    background: rgba(255,255,255,0.05);
    border: 2px solid #444;
    border-radius: 14px; padding: 10px 14px;
    cursor: pointer; text-align: center;
    transition: border 0.2s;
    font-size: 12px; color: #ccc;
    font-family: Georgia, serif;
  }
  .mush-opt:hover { border-color: #9966cc; }
  .mush-opt.selected { border-color: #9966cc; background: rgba(150,80,255,0.18); }
  .mush-opt .mush-icon { font-size: 26px; }
  .mush-opt .mush-name { font-weight: bold; color: #ddb8ff; }
  .mush-opt .mush-desc { color: #888; font-size: 11px; margin-top: 2px; }
  #closePanel {
    margin-top: 14px; background: #9966cc; color: #fff;
    border: none; border-radius: 10px; padding: 8px 28px;
    font-size: 15px; font-weight: bold; cursor: pointer;
    font-family: Georgia, serif;
  }
  #closePanel:hover { background: #bb88ff; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="ui">
  🍄 Mushroom Traveler<br>
  Move: Arrow Keys / WASD<br>
  Jump: Space &nbsp; Plant/Search: E<br>
  1=🌿Vine &nbsp; 2=🍄Platform &nbsp; 3=✨Warp<br>
  Click yourself to see Stats!
</div>
<div id="seeds">
  <button class="seed-btn active" id="btn1">1 🌿 Vine (3)</button>
  <button class="seed-btn" id="btn2">2 🍄 Platform (3)</button>
  <button class="seed-btn" id="btn3">3 ✨ Warp (2)</button>
</div>
<div id="msg"></div>

<div id="statPanel">
  <h2 id="panelName">🍄 Mushroom Traveler</h2>
  <div class="subtitle" id="panelType">Red Cap Explorer</div>
  <div class="stat-row"><span class="stat-label">❤️ Health</span><span class="stat-val" id="statHP">100</span></div>
  <div class="stat-row"><span class="stat-label">⚡ Jump Power</span><span class="stat-val" id="statJump">-</span></div>
  <div class="stat-row"><span class="stat-label">💨 Speed</span><span class="stat-val" id="statSpeed">-</span></div>
  <div class="stat-row"><span class="stat-label">🌟 Special</span><span class="stat-val" id="statSpecial">-</span></div>
  <div class="stat-row"><span class="stat-label">🌿 Vine Seeds</span><span class="stat-val" id="statTree">-</span></div>
  <div class="stat-row"><span class="stat-label">🍄 Platform Seeds</span><span class="stat-val" id="statPlat">-</span></div>
  <div class="stat-row"><span class="stat-label">✨ Warp Seeds</span><span class="stat-val" id="statWarp">-</span></div>
  <div style="margin-top:14px; color:#ddb8ff; font-weight:bold; font-size:13px;">Choose Your Mushroom Type:</div>
  <div id="mushroomPicker">
    <div class="mush-opt selected" data-type="red">
      <div class="mush-icon">🍄</div>
      <div class="mush-name">Red Cap</div>
      <div class="mush-desc">Balanced traveler<br>Bounce on platforms!</div>
    </div>
    <div class="mush-opt" data-type="blue">
      <div class="mush-icon">🔵</div>
      <div class="mush-name">Blue Frost</div>
      <div class="mush-desc">Super fast runner<br>Slides on ground!</div>
    </div>
    <div class="mush-opt" data-type="gold">
      <div class="mush-icon">⭐</div>
      <div class="mush-name">Gold Shroom</div>
      <div class="mush-desc">Super high jumper<br>Floaty fall!</div>
    </div>
    <div class="mush-opt" data-type="purple">
      <div class="mush-icon">🟣</div>
      <div class="mush-name">Purple Spore</div>
      <div class="mush-desc">Extra warp seeds<br>Teleport master!</div>
    </div>
  </div>
  <button id="closePanel">Close ✕</button>
</div>

<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let W, H, GROUND;

function resize() {
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
  GROUND = H - 90;
}
resize();
window.addEventListener('resize', resize);

// ---- MUSHROOM TYPES ----
const MUSH_TYPES = {
  red:    { name:'Red Cap',      color:'#8b1a1a', spotColor:'#ddd',    jumpPow:-13, speed:3.5, gravity:0.6,  special:'Bounce on platforms!', warpBonus:0 },
  blue:   { name:'Blue Frost',   color:'#1a3a6b', spotColor:'#88aadd', jumpPow:-12, speed:5.5, gravity:0.65, special:'Super fast runner!',   warpBonus:0 },
  gold:   { name:'Gold Shroom',  color:'#7a6000', spotColor:'#ffe87a', jumpPow:-17, speed:3.2, gravity:0.38, special:'Floaty high jumper!',  warpBonus:0 },
  purple: { name:'Purple Spore', color:'#4a1a6b', spotColor:'#cc88ff', jumpPow:-13, speed:3.5, gravity:0.6,  special:'Extra warp seeds!',    warpBonus:2 },
};

// ---- INPUT ----
const keys = {};
document.addEventListener('keydown', e => {
  keys[e.code] = true;
  if (e.code==='Digit1'){ player.selectedSeed='tree'; updateSeedUI(); }
  if (e.code==='Digit2'){ player.selectedSeed='platform'; updateSeedUI(); }
  if (e.code==='Digit3'){ player.selectedSeed='warp'; updateSeedUI(); }
  if (e.code==='KeyE') tryAction();
  if (e.code==='KeyT') teleportToWarp();
});
document.addEventListener('keyup', e => { keys[e.code] = false; });

// ---- PLAYER ----
const player = {
  x:300, y:0, w:28, h:44,
  vx:0, vy:0,
  onGround:false,
  climbing:false, climbTarget:null,
  selectedSeed:'tree',
  seeds:{ tree:3, platform:3, warp:2 },
  facingRight:true,
  mushType:'red',
  hp:100,
  lastWarp:0,
  walkFrame:0,
};

// ---- WORLD ----
let vines = [];
let mushPlatforms = [];
let warpPoints = [];
let trashPiles = [];
let rats = [];
let camX = 0;

// Rain drops
let rainDrops = [];
for(let i=0;i<180;i++){
  rainDrops.push({
    x: Math.random()*2000,
    y: Math.random()*800,
    len: 8+Math.random()*14,
    speed: 7+Math.random()*5,
    alpha: 0.18+Math.random()*0.25
  });
}

// Trash piles
const trashPositions = [400,700,1050,1400,1750,2100,2500];
for(let tx of trashPositions){
  trashPiles.push({ x:tx, searched:false, searching:false, searchTimer:0, hasRat: Math.random()<0.55 });
}

// Background details
let bgDetails = [];
for(let i=0;i<30;i++){
  bgDetails.push({ x:Math.random()*3000, y:GROUND-(20+Math.random()*200), type:Math.floor(Math.random()*3) });
}

// ---- RAT ----
function spawnRat(x){
  rats.push({ x:x, y:GROUND-22, vx:(Math.random()<0.5?-2:2)*1.5, vy:0, w:28, h:18, alive:true, biteTimer:0, alpha:1 });
}

// ---- ACTIONS ----
function tryAction(){
  // First check if near trash pile
  for(let tp of trashPiles){
    const tx = tp.x - camX;
    if(!tp.searched && Math.abs(tx - player.x) < 60 && player.onGround){
      tp.searching = true;
      tp.searchTimer = 90;
      showMsg('🗑️ Searching trash pile...');
      setTimeout(()=>{
        tp.searched = true;
        if(tp.hasRat){
          spawnRat(tp.x);
          showMsg('🐀 A rat jumped out!');
        } else {
          // give a seed reward
          const rand = Math.random();
          if(rand<0.4){ player.seeds.tree++; showMsg('🌿 Found a vine seed!'); }
          else if(rand<0.7){ player.seeds.platform++; showMsg('🍄 Found a platform seed!'); }
          else { player.seeds.warp++; showMsg('✨ Found a warp seed!'); }
          updateSeedUI();
        }
      }, 1500);
      return;
    }
  }
  plantSeed();
}

function plantSeed(){
  const type = player.selectedSeed;
  if(player.seeds[type]<=0){ showMsg('No '+type+' seeds!'); return; }
  const worldX = player.x + camX;

  if(type==='tree'){
    for(let t of vines){
      if(Math.abs(t.x-worldX)<70){ showMsg('Too close to a vine!'); return; }
    }
    player.seeds.tree--;
    vines.push({ x:worldX, height:0, maxHeight:160+Math.random()*60, growing:true });
    showMsg('🌿 Vine growing!');
  } else if(type==='platform'){
    player.seeds.platform--;
    mushPlatforms.push({ x:worldX, y:player.y+player.h, targetY:player.y-10, w:90, h:20, settled:false });
    showMsg('🍄 Mushroom rising!');
  } else if(type==='warp'){
    player.seeds.warp--;
    warpPoints.push({ x:worldX, y:GROUND, id:warpPoints.length });
    showMsg('✨ Warp planted! Press T to warp!');
  }
  updateSeedUI();
}

function teleportToWarp(){
  if(warpPoints.length===0){ showMsg('No warp points!'); return; }
  const wp = warpPoints[player.lastWarp % warpPoints.length];
  player.lastWarp = (player.lastWarp+1) % warpPoints.length;
  player.x = wp.x - camX;
  player.y = GROUND - player.h;
  player.vy=0; player.vx=0;
  showMsg('✨ Warped!');
}

// ---- UI ----
function updateSeedUI(){
  ['tree','platform','warp'].forEach((s,i)=>{
    const btn = document.getElementById('btn'+(i+1));
    btn.className = 'seed-btn'+(player.selectedSeed===s?' active':'');
  });
  document.getElementById('btn1').textContent=`1 🌿 Vine (${player.seeds.tree})`;
  document.getElementById('btn2').textContent=`2 🍄 Platform (${player.seeds.platform})`;
  document.getElementById('btn3').textContent=`3 ✨ Warp (${player.seeds.warp})`;
}

let msgTimeout;
function showMsg(txt){
  const m=document.getElementById('msg');
  m.textContent=txt; m.style.display='block';
  clearTimeout(msgTimeout);
  msgTimeout=setTimeout(()=>m.style.display='none',2000);
}

// ---- STAT PANEL ----
function openStatPanel(){
  const mt=MUSH_TYPES[player.mushType];
  document.getElementById('panelName').textContent='🍄 '+mt.name;
  document.getElementById('panelType').textContent=mt.special;
  document.getElementById('statHP').textContent=player.hp;
  document.getElementById('statJump').textContent=player.mushType==='gold'?'Super High ⭐':player.mushType==='red'?'Normal + Bounce!':'Normal';
  document.getElementById('statSpeed').textContent=player.mushType==='blue'?'Super Fast 💨':'Normal';
  document.getElementById('statSpecial').textContent=mt.special;
  document.getElementById('statTree').textContent=player.seeds.tree;
  document.getElementById('statPlat').textContent=player.seeds.platform;
  document.getElementById('statWarp').textContent=player.seeds.warp;
  document.querySelectorAll('.mush-opt').forEach(el=>{
    el.className='mush-opt'+(el.dataset.type===player.mushType?' selected':'');
  });
  document.getElementById('statPanel').style.display='block';
}

document.querySelectorAll('.mush-opt').forEach(el=>{
  el.addEventListener('click',()=>{
    const oldType=player.mushType;
    player.mushType=el.dataset.type;
    if(player.mushType==='purple'&&oldType!=='purple'){
      player.seeds.warp+=2;
      showMsg('✨ +2 Warp seeds bonus!');
    }
    document.querySelectorAll('.mush-opt').forEach(o=>o.className='mush-opt'+(o.dataset.type===player.mushType?' selected':''));
    openStatPanel();
  });
});
document.getElementById('closePanel').addEventListener('click',()=>{
  document.getElementById('statPanel').style.display='none';
  updateSeedUI();
});
canvas.addEventListener('click',e=>{
  const rect=canvas.getBoundingClientRect();
  const mx=e.clientX-rect.left, my=e.clientY-rect.top;
  if(mx>player.x-20&&mx<player.x+48&&my>player.y-10&&my<player.y+player.h+10){
    openStatPanel();
  }
});
document.getElementById('btn1').addEventListener('click',()=>{ player.selectedSeed='tree'; updateSeedUI(); });
document.getElementById('btn2').addEventListener('click',()=>{ player.selectedSeed='platform'; updateSeedUI(); });
document.getElementById('btn3').addEventListener('click',()=>{ player.selectedSeed='warp'; updateSeedUI(); });

// ---- PHYSICS ----
function getType(){ return MUSH_TYPES[player.mushType]; }

function update(){
  if(document.getElementById('statPanel').style.display==='block') return;

  // Rain
  for(let r of rainDrops){
    r.y += r.speed;
    r.x -= 1.2;
    if(r.y > H){ r.y = -20; r.x = (r.x + camX*0.3 + Math.random()*W) % W; }
    if(r.x < -10) r.x += W + 200;
  }

  // Vine grow
  for(let v of vines){
    if(v.growing){ v.height+=2.2; if(v.height>=v.maxHeight){ v.height=v.maxHeight; v.growing=false; } }
  }

  // Mushroom platforms rise
  for(let mp of mushPlatforms){
    if(!mp.settled){ mp.y-=10; if(mp.y<=mp.targetY){ mp.y=mp.targetY; mp.settled=true; } }
  }

  // Rats
  for(let rat of rats){
    if(!rat.alive) continue;
    rat.vx *= 0.98;
    rat.x += rat.vx;
    rat.y += rat.vy;
    rat.vy += 0.5;
    if(rat.y + rat.h >= GROUND){ rat.y = GROUND-rat.h; rat.vy=0; }
    // chase player
    const rx = rat.x - camX;
    const dist = player.x - rx;
    if(Math.abs(dist)<300){
      rat.vx += dist>0 ? 0.18 : -0.18;
      rat.vx = Math.max(-3.5, Math.min(3.5, rat.vx));
    }
    // bite player
    if(Math.abs(dist)<30 && Math.abs((rat.y)-(player.y+player.h-10))<30){
      rat.biteTimer++;
      if(rat.biteTimer%60===0){ player.hp=Math.max(0, player.hp-8); showMsg('🐀 Ouch! Rat bite! HP:'+player.hp); }
    }
  }

  const mt = getType();

  if(!player.climbing){
    if(keys['ArrowLeft']||keys['KeyA']){ player.vx=-mt.speed; player.facingRight=false; }
    else if(keys['ArrowRight']||keys['KeyD']){ player.vx=mt.speed; player.facingRight=true; }
    else { player.vx*=(player.mushType==='blue'?0.82:0.65); }
  }

  // Walking animation
  if(Math.abs(player.vx)>0.5) player.walkFrame++;

  // Climbing vines
  let nearVine=null;
  for(let v of vines){
    const vx=v.x-camX;
    if(player.x+player.w>vx-12&&player.x<vx+12&&v.height>10) nearVine=v;
  }
  player.climbing=false;
  if(nearVine&&player.climbTarget===nearVine){
    if(keys['ArrowUp']||keys['KeyW']){ player.climbing=true; player.vy=-3; player.vx=0; }
    else if(keys['ArrowDown']||keys['KeyS']){ player.climbing=true; player.vy=2; player.vx=0; }
  }
  if(nearVine) player.climbTarget=nearVine; else player.climbTarget=null;

  if(!player.climbing) player.vy+=mt.gravity;
  if((keys['Space'])&&player.onGround&&!player.climbing){
    player.vy=mt.jumpPow; player.onGround=false;
  }

  player.x+=player.vx; player.y+=player.vy; player.onGround=false;

  if(player.y+player.h>=GROUND){ player.y=GROUND-player.h; player.vy=0; player.onGround=true; }
  if(player.y<0){ player.y=0; player.vy=0; }

  for(let mp of mushPlatforms){
    if(!mp.settled) continue;
    const sx=mp.x-camX-mp.w/2, sy=mp.y;
    if(player.x+player.w>sx&&player.x<sx+mp.w&&player.vy>=0&&player.y+player.h>=sy-4&&player.y+player.h<=sy+16){
      player.y=sy-player.h; player.vy=0; player.onGround=true;
      if(player.mushType==='red'&&keys['Space']){
        player.vy=-19; player.onGround=false; showMsg('🍄 Super Bounce!');
      }
    }
  }

  camX=player.x-W/2+player.w/2;
  if(camX<0) camX=0;
  if(player.x<10){ player.x=10; player.vx=0; }
}

// ---- DRAWING ----

function hsl(h,s,l){ return `hsl(${h},${s}%,${l}%)`; }

function drawBg(){
  // Dark gradient sky
  const grad=ctx.createLinearGradient(0,0,0,GROUND);
  grad.addColorStop(0,'#05050f');
  grad.addColorStop(0.6,'#0a0818');
  grad.addColorStop(1,'#120a08');
  ctx.fillStyle=grad; ctx.fillRect(0,0,W,GROUND);

  // Distant glowing arches / ruins
  ctx.save();
  ctx.globalAlpha=0.13;
  for(let i=0;i<4;i++){
    const rx=((i*400-camX*0.05)%( W+400))-200;
    ctx.strokeStyle='#9966cc'; ctx.lineWidth=3;
    ctx.beginPath(); ctx.arc(rx+200, GROUND+40, 200, Math.PI, 0); ctx.stroke();
    ctx.beginPath(); ctx.arc(rx+200, GROUND+40, 160, Math.PI, 0); ctx.stroke();
  }
  ctx.restore();

  // Background stalactites
  ctx.save();
  ctx.globalAlpha=0.18;
  for(let i=0;i<12;i++){
    const sx=((i*210-camX*0.08)%(W+210))-80;
    const sh=50+Math.sin(i*1.3)*30;
    ctx.fillStyle='#1a1228';
    ctx.beginPath(); ctx.moveTo(sx,0); ctx.lineTo(sx+18,sh); ctx.lineTo(sx+36,0); ctx.closePath(); ctx.fill();
  }
  ctx.restore();

  // Mid background spore particles
  ctx.save();
  for(let i=0;i<18;i++){
    const t=Date.now()*0.0004+i*0.7;
    const sx=((i*180-camX*0.12+Math.sin(t)*30)%(W+200));
    const sy=100+Math.sin(t+i)*120;
    ctx.globalAlpha=0.12+0.08*Math.sin(t);
    ctx.fillStyle='#cc88ff';
    ctx.beginPath(); ctx.arc(sx,sy,2+Math.sin(t+i)*1.5,0,Math.PI*2); ctx.fill();
  }
  ctx.restore();

  // Ground - stone tile look
  ctx.fillStyle='#111118'; ctx.fillRect(0,GROUND,W,H-GROUND);
  // stone line pattern
  ctx.strokeStyle='#1e1e2e'; ctx.lineWidth=1;
  for(let i=0;i<W;i+=48){
    ctx.beginPath(); ctx.moveTo(i-(camX%48),GROUND); ctx.lineTo(i-(camX%48),H); ctx.stroke();
  }
  for(let j=GROUND;j<H;j+=24){
    ctx.beginPath(); ctx.moveTo(0,j); ctx.lineTo(W,j); ctx.stroke();
  }

  // Ground top edge glow
  const gGrad=ctx.createLinearGradient(0,GROUND-8,0,GROUND+20);
  gGrad.addColorStop(0,'rgba(150,80,255,0.22)');
  gGrad.addColorStop(1,'rgba(0,0,0,0)');
  ctx.fillStyle=gGrad; ctx.fillRect(0,GROUND-8,W,28);

  // Ground top mossy edge
  ctx.fillStyle='#1a1a2e'; ctx.fillRect(0,GROUND,W,8);
  ctx.fillStyle='#2a1a3a';
  for(let i=0;i<W;i+=16){
    const xi=(i-(camX%16)+W)%W;
    const h2=3+Math.sin(i*0.7)*2;
    ctx.fillRect(xi,GROUND-h2,8,h2+2);
  }

  // Wall background details
  ctx.save();
  ctx.globalAlpha=0.07;
  for(let d of bgDetails){
    const dx=d.x-camX*0.3;
    if(dx<-50||dx>W+50) continue;
    ctx.strokeStyle='#8855aa'; ctx.lineWidth=2;
    if(d.type===0){
      ctx.beginPath(); ctx.arc(dx,d.y,15,0,Math.PI*2); ctx.stroke();
    } else if(d.type===1){
      ctx.strokeRect(dx-10,d.y-20,20,40);
    } else {
      ctx.beginPath(); ctx.moveTo(dx,d.y-25); ctx.lineTo(dx+15,d.y+15); ctx.lineTo(dx-15,d.y+15); ctx.closePath(); ctx.stroke();
    }
  }
  ctx.restore();
}

function drawRain(){
  ctx.save();
  for(let r of rainDrops){
    ctx.globalAlpha=r.alpha;
    ctx.strokeStyle='#7ab8cc';
    ctx.lineWidth=1;
    ctx.beginPath();
    ctx.moveTo(r.x, r.y);
    ctx.lineTo(r.x+r.len*0.15, r.y+r.len);
    ctx.stroke();
  }
  // Puddle splashes on ground
  ctx.globalAlpha=0.18;
  for(let i=0;i<8;i++){
    const t=Date.now()*0.003+i*1.3;
    const px=((i*150-camX*0.5+200)%(W+100));
    const pr=(t%2)*4;
    ctx.strokeStyle='#88aacc';
    ctx.lineWidth=1;
    ctx.beginPath(); ctx.ellipse(px,GROUND+4,pr,pr*0.3,0,0,Math.PI*2); ctx.stroke();
  }
  ctx.restore();
}

function drawTrashPile(tp){
  const tx=tp.x-camX;
  if(tx<-120||tx>W+120) return;
  const by=GROUND;

  // Pile shadow
  ctx.save();
  ctx.globalAlpha=0.3;
  ctx.fillStyle='#000';
  ctx.beginPath(); ctx.ellipse(tx,by+2,50,10,0,0,Math.PI*2); ctx.fill();
  ctx.restore();

  // Trash bags / boxes - dark muted style
  ctx.fillStyle=tp.searched?'#1a1a1a':'#1e2218';
  ctx.beginPath();
  if(ctx.roundRect) ctx.roundRect(tx-38,by-38,32,38,5);
  else ctx.rect(tx-38,by-38,32,38);
  ctx.fill();
  ctx.strokeStyle='#333'; ctx.lineWidth=1.5; ctx.stroke();

  ctx.fillStyle=tp.searched?'#111':'#1a1e10';
  ctx.beginPath();
  if(ctx.roundRect) ctx.roundRect(tx-8,by-28,28,28,4);
  else ctx.rect(tx-8,by-28,28,28);
  ctx.fill();
  ctx.strokeStyle='#2a2a2a'; ctx.lineWidth=1.5; ctx.stroke();

  // Planks
  ctx.fillStyle='#1a1410';
  ctx.fillRect(tx+22,by-42,14,42);
  ctx.strokeStyle='#2a2010'; ctx.lineWidth=1; ctx.stroke();

  // Broken bottle
  ctx.fillStyle='rgba(50,80,60,0.6)';
  ctx.beginPath(); ctx.moveTo(tx-50,by); ctx.lineTo(tx-44,by-18); ctx.lineTo(tx-38,by); ctx.fill();

  // Glow if not searched
  if(!tp.searched){
    ctx.save();
    ctx.globalAlpha=0.08+0.06*Math.sin(Date.now()*0.003);
    ctx.fillStyle='#88aaff';
    ctx.beginPath(); ctx.ellipse(tx,by-20,55,30,0,0,Math.PI*2); ctx.fill();
    ctx.restore();
    // Label
    ctx.fillStyle='rgba(150,180,255,0.7)'; ctx.font='11px Georgia'; ctx.textAlign='center';
    ctx.fillText('E = Search',tx,by-48);
  } else {
    ctx.fillStyle='rgba(100,100,100,0.5)'; ctx.font='11px Georgia'; ctx.textAlign='center';
    ctx.fillText('Searched',tx,by-48);
  }

  // Searching animation
  if(tp.searching&&!tp.searched){
    ctx.save();
    const progress=(90-tp.searchTimer)/90;
    ctx.globalAlpha=0.8;
    ctx.strokeStyle='#ddb8ff'; ctx.lineWidth=3;
    ctx.beginPath(); ctx.arc(tx,by-60,14,-Math.PI/2,-Math.PI/2+Math.PI*2*progress); ctx.stroke();
    ctx.restore();
    tp.searchTimer--;
  }
}

function drawRat(rat){
  if(!rat.alive) return;
  const rx=rat.x-camX;
  if(rx<-80||rx>W+80) return;
  const ry=rat.y;
  const facingR=rat.vx>0;

  ctx.save();
  if(!facingR){ ctx.translate(rx+rat.w/2,0); ctx.scale(-1,1); ctx.translate(-(rx+rat.w/2),0); }

  // Body
  ctx.fillStyle='#2a2018';
  ctx.beginPath(); ctx.ellipse(rx+14,ry+10,14,9,0,0,Math.PI*2); ctx.fill();
  // Head
  ctx.fillStyle='#241e14';
  ctx.beginPath(); ctx.ellipse(rx+26,ry+6,9,7,0.3,0,Math.PI*2); ctx.fill();
  // Ear
  ctx.fillStyle='#3a1818';
  ctx.beginPath(); ctx.ellipse(rx+28,ry-1,4,5,0.5,0,Math.PI*2); ctx.fill();
  // Eye - glowing red
  ctx.fillStyle='#ff2222';
  ctx.beginPath(); ctx.arc(rx+30,ry+4,2,0,Math.PI*2); ctx.fill();
  ctx.fillStyle='rgba(255,0,0,0.3)';
  ctx.beginPath(); ctx.arc(rx+30,ry+4,4,0,Math.PI*2); ctx.fill();
  // Nose
  ctx.fillStyle='#ff6688';
  ctx.beginPath(); ctx.arc(rx+34,ry+7,1.5,0,Math.PI*2); ctx.fill();
  // Tail
  ctx.strokeStyle='#1a1010'; ctx.lineWidth=2;
  ctx.beginPath(); ctx.moveTo(rx+2,ry+12); ctx.quadraticCurveTo(rx-12,ry+4,rx-8,ry-4); ctx.stroke();
  // Legs
  ctx.strokeStyle='#2a2018'; ctx.lineWidth=2.5;
  const legSwing=Math.sin(Date.now()*0.015)*5;
  ctx.beginPath(); ctx.moveTo(rx+8,ry+16); ctx.lineTo(rx+5,ry+22+legSwing); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(rx+14,ry+16); ctx.lineTo(rx+16,ry+22-legSwing); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(rx+20,ry+16); ctx.lineTo(rx+18,ry+22+legSwing); ctx.stroke();

  ctx.restore();
}

function drawVine(v){
  const vx=v.x-camX;
  if(vx<-80||vx>W+80) return;
  const baseY=GROUND, topY=baseY-v.height;

  // Main vine rope
  ctx.strokeStyle='#1e3a14'; ctx.lineWidth=6;
  ctx.beginPath();
  for(let y=baseY;y>topY;y-=20){
    const sway=Math.sin(y*0.05+Date.now()*0.001)*3;
    if(y===baseY) ctx.moveTo(vx+sway,y);
    else ctx.lineTo(vx+sway,y);
  }
  ctx.stroke();

  // Vine inner highlight
  ctx.strokeStyle='#2a5a1e'; ctx.lineWidth=2;
  ctx.beginPath();
  for(let y=baseY;y>topY;y-=20){
    const sway=Math.sin(y*0.05+Date.now()*0.001)*3;
    if(y===baseY) ctx.moveTo(vx+sway-1,y);
    else ctx.lineTo(vx+sway-1,y);
  }
  ctx.stroke();

  // Leaf nodes
  if(v.height>30){
    for(let ly=topY+30;ly<baseY-20;ly+=35){
      const sway=Math.sin(ly*0.05+Date.now()*0.001)*3;
      ctx.fillStyle='#1e4a14';
      ctx.save();
      ctx.translate(vx+sway,ly);
      ctx.rotate(-0.4);
      ctx.beginPath(); ctx.ellipse(-14,-3,12,5,0,0,Math.PI*2); ctx.fill();
      ctx.restore();
      ctx.save();
      ctx.translate(vx+sway,ly+18);
      ctx.rotate(0.4);
      ctx.beginPath(); ctx.ellipse(14,-3,12,5,0,0,Math.PI*2); ctx.fill();
      ctx.restore();
    }
  }

  // Top glow
  ctx.save();
  ctx.globalAlpha=0.25+0.1*Math.sin(Date.now()*0.004);
  ctx.fillStyle='#44ff88';
  ctx.beginPath(); ctx.arc(vx+Math.sin(Date.now()*0.001)*3,topY+10,10,0,Math.PI*2); ctx.fill();
  ctx.restore();

  if(!v.growing){
    ctx.fillStyle='rgba(180,255,180,0.6)'; ctx.font='11px Georgia'; ctx.textAlign='center';
    ctx.fillText('↑↓ Climb',vx,topY-8);
  }
}

function drawMushPlatform(mp){
  const sx=mp.x-camX-mp.w/2, sy=mp.y;
  if(sx>W+100||sx+mp.w<-100) return;
  const cx=sx+mp.w/2;

  // Stalk
  ctx.fillStyle='#2a2018';
  ctx.fillRect(cx-5,sy,10,GROUND-sy);
  ctx.fillStyle='rgba(80,60,40,0.4)';
  ctx.fillRect(cx+2,sy,3,GROUND-sy);

  // Shadow
  ctx.save(); ctx.globalAlpha=0.2;
  ctx.fillStyle='#000';
  ctx.beginPath(); ctx.ellipse(cx+4,sy+5,mp.w/2,12,0,0,Math.PI*2); ctx.fill();
  ctx.restore();

  // Cap
  ctx.fillStyle='#4a1a2a';
  ctx.beginPath(); ctx.ellipse(cx,sy-4,mp.w/2,15,0,0,Math.PI*2); ctx.fill();
  // Cap shading
  ctx.fillStyle='#3a0e1e';
  ctx.beginPath(); ctx.ellipse(cx,sy+4,mp.w/2,6,0,0,Math.PI*2); ctx.fill();
  // Cap highlight
  ctx.fillStyle='#6a2a3a';
  ctx.beginPath(); ctx.ellipse(cx-8,sy-10,mp.w/4,7,0.3,0,Math.PI*2); ctx.fill();

  // Spots - pale
  ctx.fillStyle='rgba(220,180,220,0.55)';
  ctx.beginPath(); ctx.arc(cx-16,sy-7,5,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.arc(cx+14,sy-8,4,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.arc(cx+2,sy-14,3.5,0,Math.PI*2); ctx.fill();

  // Glow underneath
  ctx.save(); ctx.globalAlpha=0.12;
  ctx.fillStyle='#ff44aa';
  ctx.beginPath(); ctx.ellipse(cx,sy+2,mp.w/2+8,10,0,0,Math.PI*2); ctx.fill();
  ctx.restore();
}

function drawWarpPoint(wp){
  const wx=wp.x-camX;
  if(wx<-60||wx>W+60) return;
  const wy=GROUND;
  const t=Date.now()*0.003;
  const r=14+Math.sin(t)*4;

  ctx.save();
  // Outer ring
  ctx.globalAlpha=0.5+0.3*Math.sin(t);
  ctx.strokeStyle='#cc44ff'; ctx.lineWidth=3;
  ctx.beginPath(); ctx.arc(wx,wy-16,r,0,Math.PI*2); ctx.stroke();
  // Inner glow
  ctx.globalAlpha=0.2+0.15*Math.sin(t);
  ctx.fillStyle='#aa22ee';
  ctx.beginPath(); ctx.arc(wx,wy-16,r,0,Math.PI*2); ctx.fill();
  // Rune lines
  ctx.globalAlpha=0.6;
  ctx.strokeStyle='#ee88ff'; ctx.lineWidth=1.5;
  for(let i=0;i<4;i++){
    const a=t+i*Math.PI/2;
    ctx.beginPath(); ctx.moveTo(wx+Math.cos(a)*(r-2),wy-16+Math.sin(a)*(r-2));
    ctx.lineTo(wx+Math.cos(a+Math.PI/4)*(r*0.5),wy-16+Math.sin(a+Math.PI/4)*(r*0.5));
    ctx.stroke();
  }
  ctx.globalAlpha=1;
  ctx.font='10px Georgia'; ctx.textAlign='center'; ctx.fillStyle='#ddb8ff';
  ctx.fillText('T=Warp',wx,wy-36);
  ctx.restore();
}

function drawPlayer(){
  const mt=getType();
  const capColor=mt.color;
  const spotColor=mt.spotColor;
  let px=player.x;
  let py=player.y;
  const w=player.w, h=player.h;
  const t=Date.now()*0.004;
  const idleBob=player.onGround?Math.sin(t)*1.2:0;
  const walkLeg=player.onGround&&Math.abs(player.vx)>0.5?Math.sin(player.walkFrame*0.18)*5:0;

  ctx.save();
  if(!player.facingRight){
    ctx.translate(px+w/2,0); ctx.scale(-1,1); ctx.translate(-(px+w/2),0);
  }

  // Shadow
  ctx.save(); ctx.globalAlpha=0.25;
  ctx.fillStyle='#000';
  ctx.beginPath(); ctx.ellipse(px+w/2,GROUND+3,16,5,0,0,Math.PI*2); ctx.fill();
  ctx.restore();

  // Walking stick
  ctx.strokeStyle='#5a3a18'; ctx.lineWidth=3;
  ctx.beginPath();
  ctx.moveTo(px+w+2,py+h);
  ctx.lineTo(px+w+6+Math.sin(player.walkFrame*0.15)*3,py+8+idleBob);
  ctx.stroke();
  // Stick top curl
  ctx.strokeStyle='#7a5a28'; ctx.lineWidth=2;
  ctx.beginPath(); ctx.arc(px+w+6+Math.sin(player.walkFrame*0.15)*3,py+8+idleBob,5,-1,Math.PI); ctx.stroke();

  // Legs
  ctx.strokeStyle='#c8b890'; ctx.lineWidth=5;
  ctx.lineCap='round';
  ctx.beginPath(); ctx.moveTo(px+8,py+h-8); ctx.lineTo(px+5,py+h+walkLeg); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(px+20,py+h-8); ctx.lineTo(px+22,py+h-walkLeg); ctx.stroke();
  // Shoes
  ctx.fillStyle='#2a1a0a';
  ctx.beginPath(); ctx.ellipse(px+5,py+h+walkLeg+2,7,4,0,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.ellipse(px+22,py+h-walkLeg+2,7,4,0,0,Math.PI*2); ctx.fill();

  // Body - hollow knight style robes
  ctx.fillStyle='#c8b890';
  ctx.beginPath();
  if(ctx.roundRect) ctx.roundRect(px+4,py+16+idleBob,w-8,h-20,4);
  else ctx.rect(px+4,py+16+idleBob,w-8,h-20);
  ctx.fill();
  // Robe dark shading
  ctx.fillStyle='rgba(0,0,0,0.2)';
  ctx.fillRect(px+w-9,py+16+idleBob,5,h-20);

  // Cloak / mantle
  ctx.fillStyle='#2a2018';
  ctx.beginPath();
  ctx.moveTo(px+2,py+16+idleBob);
  ctx.lineTo(px-4,py+h-4);
  ctx.lineTo(px+w+4,py+h-4);
  ctx.lineTo(px+w+2,py+16+idleBob);
  ctx.closePath(); ctx.fill();
  // Cloak clasp
  ctx.fillStyle='#9966cc';
  ctx.beginPath(); ctx.arc(px+w/2,py+19+idleBob,3,0,Math.PI*2); ctx.fill();

  // Pouch
  ctx.fillStyle='#3a2a10';
  ctx.beginPath(); ctx.ellipse(px+w+1,py+h-14,7,5,0.3,0,Math.PI*2); ctx.fill();
  ctx.strokeStyle='#1a1008'; ctx.lineWidth=1; ctx.stroke();
  // Pouch clasp
  ctx.fillStyle='#8a6a20';
  ctx.beginPath(); ctx.arc(px+w+2,py+h-15,2,0,Math.PI*2); ctx.fill();
  // Pouch strap
  ctx.strokeStyle='#5a3a10'; ctx.lineWidth=1.5;
  ctx.beginPath(); ctx.moveTo(px+w-2,py+h-18); ctx.lineTo(px+w-5,py+22+idleBob); ctx.stroke();

  // Face / mask - hollow knight style
  ctx.fillStyle='#e8e0cc';
  if(ctx.roundRect) {
    ctx.beginPath(); ctx.roundRect(px+4,py+18+idleBob,w-8,16,3); ctx.fill();
  } else {
    ctx.fillRect(px+4,py+18+idleBob,w-8,16);
  }
  // Eye sockets - dark hollow style
  ctx.fillStyle='#111';
  ctx.beginPath(); ctx.ellipse(px+9,py+25+idleBob,3.5,2.5,0,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.ellipse(px+19,py+25+idleBob,3.5,2.5,0,0,Math.PI*2); ctx.fill();
  // Eye glow
  ctx.fillStyle=capColor;
  ctx.globalAlpha=0.8;
  ctx.beginPath(); ctx.arc(px+9,py+25+idleBob,1.5,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.arc(px+19,py+25+idleBob,1.5,0,Math.PI*2); ctx.fill();
  ctx.globalAlpha=1;

  // Mushroom cap - dark HK style
  ctx.fillStyle=capColor;
  ctx.beginPath(); ctx.ellipse(px+w/2,py+14+idleBob,w/2+7,14,0,0,Math.PI*2); ctx.fill();
  // Cap underside
  ctx.fillStyle=shadeColor(capColor,-25);
  ctx.beginPath(); ctx.ellipse(px+w/2,py+23+idleBob,w/2+7,5,0,0,Math.PI*2); ctx.fill();
  // Cap highlight edge
  ctx.strokeStyle=shadeColor(capColor,30); ctx.lineWidth=1.5; ctx.globalAlpha=0.4;
  ctx.beginPath(); ctx.ellipse(px+w/2-4,py+10+idleBob,w/3,7,0.3,0,Math.PI*2); ctx.stroke();
  ctx.globalAlpha=1;
  // Spots
  ctx.fillStyle=spotColor; ctx.globalAlpha=0.7;
  ctx.beginPath(); ctx.arc(px+w/2-7,py+10+idleBob,4,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.arc(px+w/2+8,py+12+idleBob,3,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.arc(px+w/2,py+17+idleBob,2.5,0,Math.PI*2); ctx.fill();
  ctx.globalAlpha=1;

  // Cap gills underneath
  ctx.strokeStyle=shadeColor(capColor,-10); ctx.lineWidth=0.8; ctx.globalAlpha=0.5;
  for(let g=-3;g<=3;g++){
    ctx.beginPath();
    ctx.moveTo(px+w/2+g*4,py+23+idleBob);
    ctx.lineTo(px+w/2+g*5.5,py+27+idleBob);
    ctx.stroke();
  }
  ctx.globalAlpha=1;

  // Gold shroom aura
  if(player.mushType==='gold'){
    ctx.save(); ctx.globalAlpha=0.25+0.15*Math.sin(Date.now()*0.005);
    ctx.strokeStyle='#ffcc22'; ctx.lineWidth=2;
    ctx.beginPath(); ctx.ellipse(px+w/2,py+h/2+idleBob,w+6,h*0.65,0,0,Math.PI*2); ctx.stroke();
    ctx.restore();
  }

  // Climbng vine indicator
  if(player.climbTarget){
    ctx.fillStyle='rgba(100,255,120,0.8)'; ctx.font='bold 12px Georgia'; ctx.textAlign='center';
    ctx.fillText('↑↓ Climb!',px+w/2,py-12+idleBob);
  }

  ctx.restore();
}

function shadeColor(hex,amt){
  let r=parseInt(hex.slice(1,3),16),g=parseInt(hex.slice(3,5),16),b=parseInt(hex.slice(5,7),16);
  r=Math.max(0,Math.min(255,r+amt)); g=Math.max(0,Math.min(255,g+amt)); b=Math.max(0,Math.min(255,b+amt));
  return '#'+[r,g,b].map(v=>v.toString(16).padStart(2,'0')).join('');
}

function draw(){
  ctx.clearRect(0,0,W,H);
  drawBg();
  drawRain();
  for(let wp of warpPoints) drawWarpPoint(wp);
  for(let v of vines) drawVine(v);
  for(let mp of mushPlatforms) drawMushPlatform(mp);
  for(let tp of trashPiles) drawTrashPile(tp);
  for(let rat of rats) drawRat(rat);
  drawPlayer();
}

function loop(){ update(); draw(); requestAnimationFrame(loop); }

player.y = GROUND - player.h;
updateSeedUI();
loop();
</script>
</body>
</html>

PREVIEW

PICTURES0/50

No pictures yet. Add one, then ask your buddy to put it in your app!