---
layout: game-canvas
title: Wordle - Shivering Games
bg_color_start: '#121213'
bg_color_end: '#121213'
---

<div class="container">
  <a href="/games/" class="back-link">← Back to Games</a>
  
  <h1 style="color: white; text-align: center; margin-bottom: 10px;">Wordle</h1>
  
  <div class="game-info" style="text-align: center; color: rgba(255,255,255,0.9); margin-bottom: 20px;">
    <p style="font-size: 0.9em;">
      Guess the 5-letter word in 6 tries. Type your guess and press Enter.
    </p>
    <p style="font-size: 0.85em; margin-top: 10px;">
      <span style="background: #538d4e; padding: 2px 8px; border-radius: 3px;">Green</span> = Correct position |
      <span style="background: #b59f3b; padding: 2px 8px; border-radius: 3px;">Yellow</span> = Wrong position |
      <span style="background: #3a3a3c; padding: 2px 8px; border-radius: 3px;">Gray</span> = Not in word
    </p>
  </div>

  <canvas id="gameCanvas" width="500" height="700"></canvas>
  
  <div id="gameOver" style="display: none; text-align: center; margin-top: 20px; color: white;">
    <h2 id="endMessage"></h2>
    <p id="wordReveal" style="font-size: 24px; font-weight: bold; margin: 10px 0;"></p>
    <button onclick="location.reload()" style="padding: 10px 30px; font-size: 16px; cursor: pointer; background: #538d4e; color: white; border: none; border-radius: 4px; margin-top: 10px;">Play Again</button>
  </div>
</div>