Karta Pracy: Podziemne Super-Stworki

🎨 Podziemna Karta Pracy: Pomóż Roślince!

Klikaj na mikrostworki poniżej, aby nakarmić roślinkę przysmakami!

<div class="card">
    <h1>🎨 Podziemna Karta Pracy: Pomóż Roślince!</h1>
    <p class="subtitle">Klikaj na mikrostworki poniżej, aby nakarmić roślinkę przysmakami!</p>

    <div class="game-zone">
      <div class="score">Poziom Szczęścia Roślinki: <span id="happy-score">0</span>%</div>
      
      <div class="plant-container" id="plant-box">
        <img src="https://zielonykapelusz.edu.pl/wp-content/uploads/2023/01/twoj-obrazek.png" class="fa-solid fa-seedling plant-icon" id="plant"></i>
      </div>
      
      <p id="status-text" style="font-weight: 700; color: #854d0e; margin-bottom: 12px;">Roślinka jest głodna! Wyślij jej mikrostworki.</p>
      
      <div style="display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;">
        <button class="feed-btn" onclick="feedPlant('azot', '⚡ +Azot!')">🧫 Wyślij Azotowych Czarodziejów</button>
        <button class="feed-btn" style="background:#eab308; box-shadow: 0 4px 0 #a16207;" onclick="feedPlant('fosfor', '🔑 +Fosfor!')">⛏️ Wyślij Małych Górników</button>
        <button class="feed-btn" style="background:#0284c7; box-shadow: 0 4px 0 #0369a1;" onclick="feedPlant('mikoryza', '🌐 +Woda i Witaminy!')">🍄 Wyślij Super-Nitki</button>
      </div>
    </div>

    <div style="margin-top: 24px; background: #e0f2fe; padding: 16px; border-radius: 16px; text-align: center;">
      <h3 style="color: #0369a1; font-size: 16px; margin-bottom: 4px;">🧠 Zagadka dla Bystrzaka:</h3>
      <p style="color: #0c4a6e; font-size: 14px;">Dlaczego grzyby mikoryzowe pomagają roślince podczas suszy?</p>
    </div>
  </div>

  <script>
    let score = 0;
    const plant = document.getElementById('plant');
    const scoreDisplay = document.getElementById('happy-score');
    const statusText = document.getElementById('status-text');
    const plantBox = document.getElementById('plant-box');

    function feedPlant(type, message) {
      if (score < 100) {
        score += 20;
        if (score > 100) score = 100;
        scoreDisplay.innerText = score;
        
        // Powiększenie roślinki
        let scale = 1 + (score / 100) * 0.8;
        plant.style.transform = `scale(${scale})`;
        
        // Zmiana ikonki przy pełnym nawożeniu
        if (score >= 100) {
          plant.className = "fa-solid fa-tree plant-icon";
          plant.style.color = "#15803d";
          statusText.innerText = "Hurra! Roślinka wyrosła na wielkie, zdrowe drzewo dzięki mikrostworkom! 🎉";
        } else {
          statusText.innerText = "Mniam! Roślinka rośnie w oczach!";
        }

        // Efekt cząsteczkowy
        createParticle(message);
      }
    }

    function createParticle(text) {
      const p = document.createElement('div');
      p.className = 'particle';
      p.innerText = text;
      p.style.left = (Math.random() * 60 + 20) + '%';
      p.style.top = '10px';
      plantBox.appendChild(p);
      
      setTimeout(() => {
        p.remove();
      }, 800);
    }
  </script>