<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  
  <!-- Primary Meta Tags -->
  <title>Rune Casting - Anglo-Saxon Futhorc Runes</title>
  <meta name="title" content="Rune Casting - Anglo-Saxon Futhorc Runes">
  <meta name="description" content="Cast the ancient Anglo-Saxon Futhorc runes for divination. Choose between single, three, or nine-rune spreads for deep spiritual guidance.">
  <meta name="keywords" content="rune casting, anglo-saxon runes, futhorc runes, divination, spiritual guidance, rune reading">
  <meta name="author" content="Pixel Oracle">
  
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://runecasting.pixel-oracle.com/">
  <meta property="og:title" content="Rune Casting - Anglo-Saxon Futhorc Runes">
  <meta property="og:description" content="Cast the ancient Anglo-Saxon Futhorc runes for divination. Choose between single, three, or nine-rune spreads for deep spiritual guidance.">
  <meta property="og:image" content="https://runecasting.pixel-oracle.com/runes-preview.jpg">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://runecasting.pixel-oracle.com/">
  <meta property="twitter:title" content="Rune Casting - Anglo-Saxon Futhorc Runes">
  <meta property="twitter:description" content="Cast the ancient Anglo-Saxon Futhorc runes for divination. Choose between single, three, or nine-rune spreads for deep spiritual guidance.">
  <meta property="twitter:image" content="https://runecasting.pixel-oracle.com/runes-preview.jpg">

  <!-- Additional Meta Tags -->
  <meta name="theme-color" content="#8B7355">
  <meta name="robots" content="index, follow">
  <meta name="language" content="English">
  <meta name="revisit-after" content="7 days">
  <meta name="generator" content="Pixel Oracle">
  
  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
  <style>
    /* General Styles */
    body {
      font-family: 'VT323', monospace;
      background-color: rgb(25, 35, 37);
      color: #333;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
    }
    
    .stars {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }
    
    .star {
      position: absolute;
      background-color: #ffffff;
      border-radius: 50%;
      animation: twinkle 4s infinite ease-in-out;
    }
    
    .shooting-star {
      position: absolute;
      width: 1px;
      height: 1px;
      background-color: white;
      border-radius: 50%;
      box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5);
      pointer-events: none;
    }
    
    .container {
      position: relative;
      z-index: 1;
      text-align: center;
      background-color: transparent;
      padding: 20px;
      border-radius: 10px;
      max-width: 800px;
      width: 100%;
    }
    
    h1 {
      font-family: 'Press Start 2P', cursive;
      font-size: 24px;
      margin-bottom: 30px;
      color: #4A4A4A;  /* Darker grey color */
      text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,
         0 0 10px rgba(255, 255, 255, 0.5);
      letter-spacing: 1px;
    }
    
    .spread-buttons {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    button {
      background-color: #8B7355;  /* Dark yellow-brown */
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease;
    }
    
    button:hover {
      background-color: #A67B5B;  /* Lighter yellow-brown */
    }
    
    button.active {
      background-color: #B8860B;  /* Dark golden yellow */
    }
    
    #cast-rune {
      background-color: #6B4423;  /* Darker brown color */
    }
    
    #cast-rune:hover {
      background-color: #8B4513;  /* Slightly lighter brown on hover */
    }
    
    .rune-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      background-color: rgba(0, 0, 0, 0.7);  /* Black with transparency */
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      min-width: 200px;
    }
    
    .rune-position {
      font-size: 20px;
      color: #ffffff;
      margin-bottom: 5px;
      text-align: center;
    }
    
    .rune-symbol {
      font-size: 60px;
      color: #ffffff;
      display: inline-block;
      padding: 20px;
      background-color: rgba(0, 0, 0, 0.5);  /* Black with transparency */
      border-radius: 10px;
      margin: 10px 0;
    }
    
    .rune-interpretation {
      font-size: 28px;
      color: #ffffff;
      text-align: center;
      line-height: 1.4;
    }

    .rune-name {
      color: #B8860B;  /* Dark golden yellow */
      font-weight: bold;
    }

    .reversed-indicator {
      color: #ff4444;
      font-size: 16px;
      font-style: italic;
      margin-top: 5px;
    }

    #rune-display {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      padding: 20px;
    }

    /* Specific layouts for different spreads */
    #rune-display.single-spread {
      justify-content: center;
    }

    #rune-display.three-spread {
      justify-content: space-around;
    }

    #rune-display.nine-spread {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1200px;
      margin: 20px auto;
      overflow-x: auto;
      padding-bottom: 20px;
      -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
    }

    /* Add media query for mobile devices */
    @media (max-width: 768px) {
      #rune-display.nine-spread {
        grid-template-columns: repeat(3, 300px);  /* Fixed width for mobile */
        padding: 20px;
        margin: 20px -20px;  /* Negative margin to allow full-width scroll */
      }

      .rune-card {
        min-width: 280px;  /* Slightly smaller than grid column */
      }
    }

    #history-list li {
      font-size: 16px;
      margin-bottom: 5px;
      color: #0c0c0c;
    }

    .pixel-oracle-link {
      margin-top: 30px;
      padding: 15px;
      text-align: center;
    }

    .pixel-oracle-link a {
      color: #B8860B;
      text-decoration: none;
      font-size: 18px;
      transition: color 0.3s ease;
    }

    .pixel-oracle-link a:hover {
      color: #DAA520;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div class="stars" id="stars"></div>
  <div class="container">
    <h1>Rune Casting</h1>
    <div class="spread-buttons">
      <button id="single-rune" class="active">Single Rune</button>
      <button id="three-runes">Three Runes</button>
      <button id="nine-runes">Nine Runes</button>
    </div>
    <button id="cast-rune">Cast</button>
    <div id="rune-display">
      <!-- Rune cards will be dynamically added here -->
    </div>
    <div class="pixel-oracle-link">
      <a href="https://pixel-oracle.com/" target="_blank">Visit Pixel Oracle</a>
    </div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>