Hangman

        </div>
        <div class="status">
          <div>Falsche Versuche: <span id="wrongCount">0</span> / <span id="maxWrong">6</span></div>
          <div class="message" id="message"></div>
        </div>
      </div>

      <div class="right" style="flex:1.1;">
        <div class="word" id="wordDisplay" aria-live="polite"></div>

        <div class="keyboard" id="keyboard"></div>

        <div class="guess-box">
          <input id="guessInput" placeholder="Ganzes Wort raten" autocomplete="off" />
          <button id="guessBtn">Raten</button>
        </div>

        <div class="used">Benutzte Buchstaben: <span id="usedLetters">—</span></div>
        <div style="margin-top:8px;color:var(--muted);font-size:13px">Tipp: Mehrwort-Ausdrücke enthalten Leerzeichen — diese werden automatisch angezeigt.</div>
      </div>
    </main>

    <footer>
      Die Wörter stammen aus der vorgegebenen Liste (Umwelt- / Klima-Wörter).
    </footer>
  </div>

  <script>
    // Wörter aus der Liste (genau wie vorgegeben)
    const WORDS = [
      'oil slicks', 'global warming', 'polar ice caps', 'pollution', 'rainforests',
      'reusable', 'renewable', 'endangered', 'extinct', 'aerosol', 'climate', 'greenhouse effect',
      'biodegradable', 'balance', 'combat', 'destruction', 'acid rain', 'biodiversity',
      'drought', 'erosion', 'exhaust fumes', 'fertilizers', 'wind energy', 'carbon dioxide'
    ];

    const MAX_WRONG = 6; // Anzahl Blütenblätter
    let chosenWord = '';
    let revealed = [];
    let used = new Set();
    let wrong = 0;

    const wordDisplay = document.getElementById('wordDisplay');
    const keyboard = document.getElementById('keyboard');
    const usedLetters = document.getElementById('usedLetters');
    const wrongCount = document.getElementById('wrongCount');
    const maxWrong = document.getElementById('maxWrong');
    const message = document.getElementById('message');
    const petals = [...document.querySelectorAll('#petals ellipse')];

    maxWrong.textContent = MAX_WRONG;

    function normalizeLetter(l){
      return l.toLowerCase();
    }

    function pickWord(){
      const idx = Math.floor(Math.random()*WORDS.length);
      return WORDS[idx];
    }

    function startGame(){
      chosenWord = pickWord();
      revealed = chosenWord.split('').map(ch => (ch === ' ' ? ' ' : (isLetter(ch) ? '_' : ch)));
      used.clear();
      wrong = 0;
      updateDisplay();
      buildKeyboard();
      updateFlower();
      message.textContent = '';
    }

    function isLetter(ch){
      return /[a-zA-Z]/.test(ch);
    }

    function updateDisplay(){
      // build word display
      wordDisplay.innerHTML = '';
      revealed.forEach(ch => {
        const span = document.createElement('span');
        span.className = 'letter';