* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  :root {

      --primary: #D62828;
      --secondary: #0066CC;
      --accent: #FF9500;
      --dark: #1C1C1C;
      --darker: #1C1C1C;
      --light: #F8F8F8;
      --glow: rgba(0, 102, 204, 0.4);
      --card-bg: rgba(28, 28, 28, 0.7);
  }

  body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: var(--darker);
      color: var(--light);
      overflow: hidden;
      height: 100vh;
      width: 100vw;
      cursor: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

  /* --- LAYER 0: Canvas Background (Interactive) --- */
  #world-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
  }

  /* --- LAYER 1: Floating Pixels (Atmosphere) --- */
  .pixel-float {
      position: fixed;
      width: 8px;
      height: 8px;
      background: var(--secondary);
      opacity: 0.3;
      animation: float 8s ease-in-out infinite;
      z-index: 1;
      box-shadow: 0 0 10px var(--secondary);
  }

  @keyframes float {

      0%,
      100% {
          transform: translateY(0) translateX(0) rotate(0deg);
      }

      50% {
          transform: translateY(-30px) translateX(20px) rotate(45deg);
      }
  }

  /* --- LAYER 2: UI Container --- */
  .container {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      width: 90%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2rem;
  }

  /* --- Logo --- */
  .logo {
      font-family: 'Press Start 2P', cursive;
      font-size: clamp(2.5rem, 6vw, 5rem);
      margin-bottom: 0.5rem;
      background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 30px var(--glow);
      letter-spacing: -2px;
      text-transform: uppercase;
  }

  .tagline {
      font-size: clamp(1rem, 2vw, 1.5rem);
      color: var(--accent);
      font-weight: 600;
      margin-bottom: 3rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      opacity: 0;
      animation: fadeInUp 0.8s ease-out 0.3s forwards;
  }

  /* --- Game Modules Grid (Replaces Text Block) --- */
  .modules-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      width: 100%;
      max-width: 1000px;
      margin-bottom: 3rem;
  }

  .module-card {
      background: var(--card-bg);
      border: 1px solid rgba(248, 248, 248, 0.1);
      border-top: 4px solid var(--secondary);
      padding: 2rem;
      border-radius: 4px;
      /* Harder edges for game feel */
      backdrop-filter: blur(12px);
      text-align: left;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      opacity: 0;
      animation: fadeInUp 0.8s ease-out forwards;
      position: relative;
      overflow: hidden;
  }

  /* Staggered animation for cards */
  .module-card:nth-child(1) {
      border-color: var(--primary);
      animation-delay: 0.5s;
  }

  .module-card:nth-child(2) {
      border-color: var(--secondary);
      animation-delay: 0.7s;
  }

  .module-card:nth-child(3) {
      border-color: var(--accent);
      animation-delay: 0.9s;
  }

  .module-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 30px rgba(28, 28, 28, 0.5);
      border-color: var(--light);
  }

  .module-icon {
      font-family: 'Press Start 2P', cursive;
      font-size: 2rem;
      margin-bottom: 1rem;
      opacity: 0.8;
  }

  .module-title {
      font-size: 1.2rem;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 0.5rem;
      letter-spacing: 1px;
      color: var(--light);
  }

  .module-desc {
      font-size: 0.95rem;
      line-height: 1.6;
      color: rgba(248, 248, 248, 0.7);
  }

  /* --- CTA Button --- */
  .cta-button {
      background: transparent;
      color: var(--primary);
      border: 2px solid var(--primary);
      padding: 1rem 3rem;
      font-size: 1.2rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 3px;
      cursor: none;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      opacity: 0;
      animation: fadeInUp 0.8s ease-out 1.2s forwards;
      font-family: 'Press Start 2P', cursive;
      font-size: 0.8rem;
      /* Adjusted for pixel font */
      margin-top: 1rem;
  }

  .cta-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: var(--primary);
      transition: left 0.3s ease;
      z-index: -1;
  }

  .cta-button:hover {
      color: var(--darker);
      box-shadow: 0 0 30px var(--primary);
  }

  .cta-button:hover::before {
      left: 0;
  }

  /* --- Pixel Counter (HUD) --- */
  .pixel-counter {
      position: fixed;
      top: 2rem;
      left: 2rem;
      z-index: 100;
      background: rgba(28, 28, 28, 0.9);
      padding: 1rem 1.5rem;
      border-radius: 4px;
      border-left: 4px solid var(--primary);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 20px rgba(28, 28, 28, 0.5);
      animation: slideInLeft 0.8s ease-out 1s both;
      display: flex;
      flex-direction: column;
  }

  .pixel-counter-label {
      font-size: 0.7rem;
      color: rgba(248, 248, 248, 0.5);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 0.2rem;
  }

  .pixel-counter-value {
      font-family: 'Press Start 2P', cursive;
      font-size: 1rem;
      color: var(--primary);
      text-shadow: 0 0 10px rgba(214, 40, 40, 0.5);
  }

  /* --- Language Toggle --- */
  .lang-toggle {
      position: fixed;
      top: 2rem;
      right: 2rem;
      z-index: 100;
      display: flex;
      gap: 0.5rem;
  }

  .lang-btn {
      background: rgba(248, 248, 248, 0.05);
      border: 1px solid rgba(248, 248, 248, 0.2);
      color: var(--light);
      padding: 0.5rem 1rem;
      cursor: none;
      font-weight: 700;
      font-size: 0.8rem;
      transition: all 0.3s;
      text-transform: uppercase;
  }

  .lang-btn.active {
      background: var(--secondary);
      color: var(--darker);
      border-color: var(--secondary);
      box-shadow: 0 0 15px var(--glow);
  }

  /* --- Footer --- */
  .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 1rem;
      background: rgba(28, 28, 28, 0.9);
      border-top: 1px solid rgba(248, 248, 248, 0.1);
      display: flex;
      justify-content: center;
      gap: 2rem;
      font-size: 0.8rem;
      color: rgba(248, 248, 248, 0.5);
      z-index: 10;
  }

  .footer a {
      color: var(--secondary);
      text-decoration: none;
      transition: color 0.3s;
  }

  .footer a:hover {
      color: var(--primary);
  }

  /* --- Custom Cursor --- */
  #cursor {
      position: fixed;
      width: 20px;
      height: 20px;
      pointer-events: none;
      z-index: 10000;
      mix-blend-mode: difference;
      transition: transform 0.1s;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  #cursor-inner {
      width: 100%;
      height: 100%;
      border: 2px solid var(--light);
      background: rgba(248, 248, 248, 0.1);
  }

  #cursor.hovered #cursor-inner {
      background: var(--secondary);
      border-color: var(--secondary);
      transform: scale(1.5) rotate(45deg);
  }

  .cursor-trail {
      position: fixed;
      width: 6px;
      height: 6px;
      background: var(--secondary);
      pointer-events: none;
      z-index: 9999;
      opacity: 0.6;
      animation: fadeOut 0.5s forwards;
  }

  @keyframes fadeOut {
      to {
          opacity: 0;
          transform: scale(0);
      }
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @keyframes slideInLeft {
      from {
          opacity: 0;
          transform: translateX(-20px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  /* Mobile Responsive */
  @media (max-width: 768px) {
      body {
          height: auto;
          min-height: 100vh;
          overflow-y: auto;
      }

      .container {
          height: auto;
          padding-top: 120px;
          padding-bottom: 4rem;
      }

      .modules-grid {
          grid-template-columns: 1fr;
          gap: 1rem;
      }

      .pixel-counter {
          top: 1rem;
          left: 1rem;
          padding: 0.5rem 1rem;
      }

      .lang-toggle {
          top: 1rem;
          right: 1rem;
      }

      .logo {
          font-size: 2rem;
      }
  }

  .hidden {
      display: none;
  }

  /* --- Footer Link Styles --- */
  .footer {
      /* Modify existing footer styles if necessary to accommodate the new link */
      /* Example: Use Flexbox to align items and justify them, if needed */
      display: flex;
      flex-direction: column;
      /* Stacked on mobile */
      align-items: center;
      gap: 0.5rem;
      /* Space between the text and the link */
      padding-bottom: 2rem;
      /* Ensure there is room below the link */
  }

  /* Style for the new link */
  .footer-link {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: rgba(255, 255, 255, 0.5);
      /* Subtle light color */
      font-size: 0.8rem;
      text-decoration: none;
      transition: color 0.3s ease, text-shadow 0.3s ease;
      cursor: none;
      /* Inherit the custom cursor behavior */
      padding: 4px 8px;
      /* Give it a little padding for hover/touch targets */
      border-radius: 4px;
  }

  /* Hover/Focus state */
  .footer-link:hover,
  .footer-link:focus {
      color: var(--secondary);
      /* Change to your secondary color on hover */
      text-shadow: 0 0 8px rgba(0, 102, 204, 0.5);
      /* Subtle glow effect */
  }

  /* Ensure the link is also tracked by the JavaScript cursor logic */
  /* You will need to add '.footer-link' to the list of elements watched by your JS cursor code: */
  /* const hoverTargets = document.querySelectorAll('button, .module-card, .footer-link'); */