:root {
  /* Ocean-Inspired Color Palette */
  --bg-primary: #001f2d;
  --bg-secondary: #003a4d;
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.08);
  
  --accent-primary: #22d3ee;
  --accent-secondary: #06b6d4;
  --accent-highlight: #ffca3a;
  
  --text-primary: #e0f7fa;
  --text-secondary: #a7cbd0;
  --text-muted: #70c4d9;

  /* Typography */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* Layout */
  --container-max: 1320px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  
  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(34, 211, 238, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
p { color: var(--text-secondary); font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; color: var(--text-muted); }

/* Layout Containers */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 32px;
}

.section-spacing {
  padding: 120px 0;
}

/* Header & Navigation */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(0, 31, 45, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  transition: var(--transition-smooth);
}

.site-header.scrolled {
  background: rgba(0, 31, 45, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.5px;
}

.logo span {
  color: var(--accent-primary);
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav-links a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding: 8px 0;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent-primary);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--accent-primary);
  transition: var(--transition-smooth);
  border-radius: 2px;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: none;
  outline: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: var(--bg-primary);
  box-shadow: 0 4px 15px rgba(34, 211, 238, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(34, 211, 238, 0.4);
  filter: brightness(1.1);
}

.btn-outline {
  background: transparent;
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
}

.btn-outline:hover {
  background: rgba(34, 211, 238, 0.1);
  transform: translateY(-2px);
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px; /* Offset for header */
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  mix-blend-mode: overlay;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-content h1 {
  background: linear-gradient(to right, #fff, var(--accent-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.hero-visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  pointer-events: none;
}

/* Game Section (The Hero Centerpiece) */
.game-section {
  position: relative;
  z-index: 10;
  margin-top: -60px;
}

.game-wrapper {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(34, 211, 238, 0.1);
  transition: var(--transition-smooth);
}

.game-wrapper:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 60px rgba(34, 211, 238, 0.15);
  border-color: rgba(34, 211, 238, 0.4);
}

.game-container {
  width: 100%;
  height: 700px;
  border-radius: calc(var(--radius-lg) - 6px);
  overflow: hidden;
  position: relative;
  background: #000;
}

.game-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Feature Cards (Glassmorphism) */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.glass-card:hover {
  background: var(--glass-hover);
  transform: translateY(-8px);
  border-color: rgba(34, 211, 238, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.glass-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(34, 211, 238, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  font-size: 1.5rem;
}

.glass-card h3 {
  font-size: 1.25rem;
  color: var(--text-primary);
}

.glass-card p {
  font-size: 1rem;
  color: var(--text-secondary);
}

/* Generic Page Header */
.page-header {
  padding: 160px 0 80px;
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 58, 77, 0.4) 0%, rgba(0, 31, 45, 1) 100%);
  border-bottom: 1px solid var(--glass-border);
}

.page-header h1 {
  margin-bottom: 16px;
}

/* Content Blocks for Legal / Text Pages */
.content-block {
  max-width: 800px;
  margin: 0 auto;
}

.content-block h2 {
  margin: 40px 0 16px;
  color: var(--accent-primary);
  font-size: 1.5rem;
}

.content-block p {
  margin-bottom: 16px;
}

.content-block ul {
  list-style: disc;
  margin-left: 24px;
  margin-bottom: 24px;
  color: var(--text-secondary);
}

.content-block li {
  margin-bottom: 8px;
}

/* Form Styling */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 500;
  color: var(--text-primary);
}

.form-control {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  transition: var(--transition-smooth);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: rgba(255, 255, 255, 0.08);
}

textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

/* Footer */
.site-footer {
  background: #00151f;
  padding: 80px 0 40px;
  border-top: 1px solid var(--glass-border);
  margin-top: 80px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}

.footer-brand p {
  margin-top: 16px;
  max-width: 300px;
}

.footer-links h4 {
  color: var(--text-primary);
  margin-bottom: 24px;
  font-size: 1.125rem;
}

.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  color: var(--text-secondary);
  transition: var(--transition-smooth);
}

.footer-links a:hover {
  color: var(--accent-primary);
  padding-left: 4px;
}

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Mobile Menu Toggle */
.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1001;
}

.disclaimer-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 20px;
  line-height: 1.5;
}
/* ENDFILE */

/* FILE: responsive.css */
/* Tablet & Small Desktop */
@media (max-width: 1024px) {
  :root {
    --container-max: 960px;
  }
  
  .hero-grid {
    gap: 40px;
  }
  
  .game-container {
    height: 550px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile Landscape & Tablet */
@media (max-width: 768px) {
  .section-spacing {
    padding: 80px 0;
  }

  .mobile-toggle {
    display: block;
  }
  
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    max-width: 100%;
    height: 100vh;
    background: rgba(0, 31, 45, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-left: 1px solid var(--glass-border);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  }
  
  .nav-links.active {
    right: 0;
  }
  
  .nav-links li {
    width: 100%;
    text-align: center;
  }
  
  .nav-links a {
    display: block;
    font-size: 1.25rem;
    padding: 16px 0;
  }
  
  .hero {
    padding-top: 120px;
    min-height: auto;
    padding-bottom: 60px;
  }
  
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-content {
    align-items: center;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .hero-visual {
    order: -1;
    max-width: 80%;
    margin: 0 auto;
  }
  
  .game-section {
    margin-top: 0;
  }
  
  .game-container {
    height: 450px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* Mobile Portrait */
@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }
  
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .btn {
    width: 100%;
  }
  
  .hero-visual {
    max-width: 100%;
  }

  .game-container {
    height: 350px;
  }
}
/* ENDFILE */

/* FILE: animations.css */
/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* Float Animation */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Pulse Glow */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.1); }
  50% { box-shadow: 0 0 40px rgba(34, 211, 238, 0.3); }
  100% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.1); }
}

.animate-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}

/* Image Slow Zoom */
@keyframes slowZoom {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.animate-zoom img {
  animation: slowZoom 20s ease-out alternate infinite;
}
/* ENDFILE */

/* FILE: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aqua Spin | Nature Lux Gaming Experience</title>
  <meta name="description" content="Experience the ultimate underwater luxury social casino. Dive into Aqua Spin for a premium, calm, and immersive gaming retreat.">
  
  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  
  <!-- Styles -->
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="responsive.css">
  <link rel="stylesheet" href="animations.css">
</head>
<body>

  <!-- Header -->
  <header class="site-header" id="header">
    <div class="container nav-container">
      <a href="index.html" class="logo">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--accent-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M2 12h4l3-9 5 18 3-9h5"/>
        </svg>
        Aqua<span>Spin</span>
      </a>
      
      <button class="mobile-toggle" id="mobile-toggle" aria-label="Toggle Menu">
        ☰
      </button>

      <nav class="nav-links" id="nav-links">
        <a href="index.html" class="active">Home</a>
        <a href="#game-section">Play Game</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
        <a href="#game-section" class="btn btn-primary" style="padding: 10px 20px; color: var(--bg-primary);">Play Now</a>
      </nav>
    </div>
  </header>

  <main>
    <!-- Hero Section -->
    <section class="hero">
      <div class="hero-bg animate-zoom">
        <img src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&q=80&w=1920" alt="Vibrant coral reef illuminated by sunlight beams in deep ocean">
      </div>
      <div class="container hero-grid">
        <div class="hero-content animate-fade-up">
          <span class="text-sm" style="color: var(--accent-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 2px;">Nature Lux Gaming</span>
          <h1>Dive Into Premium Entertainment.</h1>
          <p>Escape to an underwater luxury resort of gaming. Experience seamless, high-end social casino action where the ocean's calm meets thrilling spins.</p>
          <div class="hero-actions">
            <a href="#game-section" class="btn btn-primary">Start Playing</a>
            <a href="about.html" class="btn btn-outline">Discover More</a>
          </div>
        </div>
        <div class="hero-visual animate-float delay-2">
          <img src="https://images.unsplash.com/photo-1682687982501-1e58f810143e?auto=format&fit=crop&q=80&w=800" alt="Beautiful underwater sea turtle swimming gracefully near the surface" style="border-radius: var(--radius-xl);">
        </div>
      </div>
    </section>

    <!-- Main Game Section -->
    <section id="game-section" class="game-section container animate-fade-up delay-3">
      <div class="game-wrapper animate-glow">
        <div class="game-container">
          <!-- CORE PRIORITY: GAME EMBED -->
          <iframe src="game-fish-slot/" allowfullscreen title="Fish Slot Game"></iframe>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="section-spacing container">
      <div style="text-align: center; max-width: 600px; margin: 0 auto 48px;" class="animate-fade-up">
        <h2>A New Wave of Gaming</h2>
        <p>Designed for those who appreciate the finer things. No loud neon, just pure, immersive elegance.</p>
      </div>

      <div class="features-grid">
        <div class="glass-card animate-fade-up delay-1">
          <div class="glass-card-icon">🌊</div>
          <h3>Immersive Environment</h3>
          <p>Lose yourself in deep ocean aesthetics with soothing visual transitions and perfectly balanced lighting.</p>
        </div>
        <div class="glass-card animate-fade-up delay-2">
          <div class="glass-card-icon">✨</div>
          <h3>SaaS-Level Polish</h3>
          <p>Experience a platform built with next-gen technology, ensuring smooth gameplay without the clutter.</p>
        </div>
        <div class="glass-card animate-fade-up delay-3">
          <div class="glass-card-icon">🛡️</div>
          <h3>Safe Harbor</h3>
          <p>A completely free-to-play social environment focused on relaxation, fun, and responsible entertainment.</p>
        </div>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="site-footer">
    <div class="container">
      <p class="disclaimer-text">
        Disclaimer: Aqua Spin is a free-to-play social casino platform intended for adult audiences (18+). There is no real money gambling involved, nor is there any opportunity to win real money or physical prizes. Practice or success at social casino gaming does not imply future success at real money gambling.
      </p>
      <div class="footer-grid">
        <div class="footer-brand">
          <a href="index.html" class="logo">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--accent-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M2 12h4l3-9 5 18 3-9h5"/>
            </svg>
            Aqua<span>Spin</span>
          </a>
          <p class="text-sm">Nature Lux Gaming. A premium social casino experience designed for tranquility and thrill.</p>
        </div>
        <div class="footer-links">
          <h4>Navigation</h4>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
        <div class="footer-links">
          <h4>Legal</h4>
          <ul>
            <li><a href="terms.html">Terms of Service</a></li>
            <li><a href="privacy.html">Privacy Policy</a></li>
            <li><a href="responsible-gaming.html">Responsible Gaming</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <p class="text-sm">&copy; 2026 tikoplayharbr.com. All rights reserved.</p>
        <p class="text-sm">Play responsibly.</p>
      </div>
    </div>
  </footer>

  <script>
    // Header Scroll Effect
    const header = document.getElementById('header');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        header.classList.add('scrolled');
      } else {
        header.classList.remove('scrolled');
      }
    });

    // Mobile Menu Toggle
    const mobileToggle = document.getElementById('mobile-toggle');
    const navLinks = document.getElementById('nav-links');
    mobileToggle.addEventListener('click', () => {
      navLinks.classList.toggle('active');
    });

    // Simple Intersection Observer for Fade Animations
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.style.animationPlayState = 'running';
        }
      });
    });
  </script>
</body>
</html>