/* ============================================================
   OMNISPINSPRK.COM — MAIN STYLESHEET
   omnispinsprk.com © 2026 omnispinsprk.com
   ============================================================ */

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  /* Colors — Base */
  --color-bg-primary: #0b1d1a;
  --color-bg-secondary: #132a24;
  --color-bg-elevated: rgba(19, 42, 36, 0.65);
  --color-bg-glass: rgba(19, 42, 36, 0.55);
  --color-bg-glass-hover: rgba(19, 42, 36, 0.75);
  --color-bg-overlay: rgba(7, 14, 12, 0.85);

  /* Colors — Accents */
  --color-gold: #c9a44c;
  --color-gold-light: #e8c46a;
  --color-gold-dark: #a07a2a;
  --color-emerald: #8fd4b4;
  --color-emerald-dark: #5db890;
  --color-highlight: #f4e6c3;

  /* Colors — Text */
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #cfcfcf;
  --color-text-muted: #8fa39b;
  --color-text-gold: #c9a44c;

  /* Colors — UI */
  --color-border: rgba(201, 164, 76, 0.18);
  --color-border-hover: rgba(201, 164, 76, 0.38);
  --color-glow-gold: rgba(201, 164, 76, 0.15);
  --color-glow-emerald: rgba(143, 212, 180, 0.12);

  /* Typography */
  --font-primary: 'Inter', 'Poppins', system-ui, sans-serif;
  --font-display: 'Poppins', 'Inter', system-ui, sans-serif;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 100px;
  --space-6xl: 120px;

  /* Layout */
  --max-width: 1320px;
  --padding-desktop: 32px;
  --padding-tablet: 24px;
  --padding-mobile: 16px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.45);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.55);
  --shadow-gold: 0 0 24px rgba(201, 164, 76, 0.25);
  --shadow-gold-hover: 0 0 40px rgba(201, 164, 76, 0.4);
  --shadow-emerald: 0 0 24px rgba(143, 212, 180, 0.2);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-slower: 600ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Header */
  --header-height: 72px;
  --header-height-scrolled: 64px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

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

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-gold-light);
}

ul, ol {
  list-style: none;
}

address {
  font-style: normal;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-desktop);
}

.section-padding {
  padding: var(--space-6xl) 0;
}

.section-padding-sm {
  padding: var(--space-4xl) 0;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  line-height: 1.7;
}

.text-gold {
  color: var(--color-gold);
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.body-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-header .section-subtitle {
  margin: 0 auto;
}

/* ============================================================
   SECTION BADGE
   ============================================================ */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: var(--space-lg);
}

/* ============================================================
   BUTTON SYSTEM
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 28px;
  border-radius: var(--radius-lg);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.btn:hover::before {
  opacity: 1;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-light));
  color: #1a0f00;
  box-shadow: 0 4px 16px rgba(201, 164, 76, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-hover);
  color: #1a0f00;
  filter: brightness(1.1);
}

.btn-secondary {
  background: var(--color-bg-glass);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-hover);
  color: var(--color-gold);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-outline:hover {
  background: var(--color-gold);
  color: #1a0f00;
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.btn-large {
  padding: 16px 36px;
  font-size: var(--text-lg);
  border-radius: var(--radius-xl);
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.btn-icon {
  font-size: 1.1em;
}

/* ============================================================
   GLASS CARD
   ============================================================ */
.glass-card {
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2xl);
  transition: all var(--transition-base);
}

.glass-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-xl), var(--shadow-gold);
  transform: translateY(-2px);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background: rgba(11, 29, 26, 0.7);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all var(--transition-base);
}

.site-header.scrolled {
  height: var(--header-height-scrolled);
  background: rgba(11, 29, 26, 0.92);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(201, 164, 76, 0.12);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-xl);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-icon {
  font-size: 1.4rem;
}

.logo-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

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

.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 4px 0;
  position: relative;
  transition: color var(--transition-base);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-gold);
}

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

/* Mobile Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: all var(--transition-base);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(380px, 90vw);
  height: 100vh;
  background: var(--color-bg-secondary);
  border-left: 1px solid var(--color-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  padding: var(--space-3xl) var(--space-2xl);
  transition: right var(--transition-slower);
  box-shadow: -8px 0 40px rgba(0,0,0,0.5);
  overflow-y: auto;
}

.mobile-menu-overlay.open {
  right: 0;
}

.mobile-menu-close {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.mobile-menu-close:hover {
  background: var(--color-bg-glass-hover);
  color: var(--color-gold);
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.mobile-nav-link {
  display: block;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  border: 1px solid transparent;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--color-gold);
  background: var(--color-bg-glass);
  border-color: var(--color-border);
}

.mobile-cta {
  margin-top: auto;
  text-align: center;
  justify-content: center;
}

/* Overlay backdrop */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.mobile-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--header-height);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(201, 164, 76, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(143, 212, 180, 0.05) 0%, transparent 50%),
    linear-gradient(135deg, var(--color-bg-primary) 0%, #0d2219 50%, #0b1d1a 100%);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(11, 29, 26, 0.85) 0%,
    rgba(11, 29, 26, 0.4) 50%,
    rgba(11, 29, 26, 0.2) 100%
  );
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5xl);
  align-items: center;
  padding: var(--space-5xl) 0;
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(201, 164, 76, 0.12);
  border: 1px solid rgba(201, 164, 76, 0.25);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: var(--text-sm);
  color: var(--color-gold);
  font-weight: 500;
  margin-bottom: var(--space-xl);
  width: fit-content;
}

.badge-icon {
  font-size: 0.9rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 5.5vw, var(--text-7xl));
  font-weight: 800;
  line-height: 1.08;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xl);
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: var(--space-2xl);
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-3xl);
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-gold);
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-divider {
  width: 1px;
  height: 36px;
  background: var(--color-border);
}

/* Hero Visual */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-glow-ring {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 164, 76, 0.08) 0%, transparent 70%);
  animation: glowPulse 4s ease-in-out infinite;
}

.hero-castle-frame {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl), var(--shadow-gold);
  max-width: 520px;
  width: 100%;
}

.hero-castle-img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
}

.hero-frame-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    rgba(11, 29, 26, 0.6) 100%
  );
  pointer-events: none;
}

/* Hero Scroll Hint */
.hero-scroll-hint {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  z-index: 1;
}

.scroll-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.scroll-arrow {
  color: var(--color-gold);
  font-size: var(--text-lg);
  animation: scrollBounce 2s ease-in-out infinite;
}

/* ============================================================
   GAME SECTION
   ============================================================ */
.game-section {
  padding: var(--space-6xl) 0;
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--color-bg-primary),
    var(--color-bg-secondary),
    var(--color-bg-primary)
  );
  overflow: hidden;
}

.game-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.game-container {
  position: relative;
  z-index: 1;
}

.game-frame-wrapper {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl), 0 0 60px rgba(201, 164, 76, 0.15);
  transition: all var(--transition-slow);
  background: #000;
}

.game-frame-wrapper:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-xl), 0 0 80px rgba(201, 164, 76, 0.25);
  transform: scale(1.002);
}

.game-ambient-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at center, rgba(201, 164, 76, 0.08) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 5s ease-in-out infinite;
  z-index: -1;
}

.game-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: var(--color-bg-primary);
}

.game-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Game Corner Decorations */
.game-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--color-gold);
  border-style: solid;
  z-index: 2;
  opacity: 0.5;
}

.game-corner-tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.game-corner-tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.game-corner-bl { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.game-corner-br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

/* Game Info Bar */
.game-info-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  padding: var(--space-lg) var(--space-2xl);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-wrap: wrap;
}

.game-info-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.game-info-icon {
  font-size: 1rem;
}

.game-info-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.game-info-divider {
  width: 1px;
  height: 20px;
  background: var(--color-border);
}

/* ============================================================
   FEATURES SECTION
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.feature-card {
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--transition-base);
  animation-delay: var(--delay, 0s);
}

.feature-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-lg), var(--shadow-gold);
  transform: translateY(-4px);
}

.feature-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: rgba(201, 164, 76, 0.1);
  border: 1px solid rgba(201, 164, 76, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  font-size: 1.5rem;
  transition: all var(--transition-base);
}

.feature-card:hover .feature-icon-wrap {
  background: rgba(201, 164, 76, 0.18);
  box-shadow: 0 0 20px rgba(201, 164, 76, 0.15);
}

.feature-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.feature-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.feature-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-base);
}

.feature-link:hover {
  color: var(--color-gold-light);
  gap: 8px;
}

/* ============================================================
   LORE SECTION
   ============================================================ */
.lore-section {
  background: linear-gradient(
    135deg,
    rgba(19, 42, 36, 0.3) 0%,
    transparent 50%,
    rgba(19, 42, 36, 0.3) 100%
  );
}

.lore-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5xl);
  align-items: center;
}

.lore-image-frame {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl), var(--shadow-emerald);
}

.lore-img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
}

.lore-image-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(11, 29, 26, 0.5) 100%
  );
}

.lore-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}

.lore-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.lore-feature {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lore-feature-icon {
  font-size: 1rem;
}

/* ============================================================
   RESPONSIBLE GAMING BANNER
   ============================================================ */
.rg-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  background: var(--color-bg-glass);
  border: 1px solid rgba(143, 212, 180, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.rg-banner-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.rg-banner-content {
  flex: 1;
}

.rg-banner-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.rg-banner-content p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.rg-banner-content a {
  color: var(--color-emerald);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.testimonial-card {
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--transition-base);
  animation-delay: var(--delay, 0s);
}

.testimonial-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-lg), var(--shadow-gold);
  transform: translateY(-3px);
}

.testimonial-stars {
  color: var(--color-gold);
  font-size: var(--text-base);
  margin-bottom: var(--space-md);
  letter-spacing: 2px;
}

.testimonial-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: var(--space-xl);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-base);
  color: #1a0f00;
  flex-shrink: 0;
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.author-rank {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   PAGE HERO (INNER PAGES)
   ============================================================ */
.page-hero {
  min-height: 360px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--header-height);
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 50%, var(--color-bg-primary) 100%);
}

.page-hero-short {
  min-height: 260px;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(201, 164, 76, 0.06) 0%, transparent 70%);
}

.page-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-5xl) 0 var(--space-4xl);
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}

.page-hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5xl);
  align-items: center;
}

.about-visual-frame {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl), var(--shadow-gold);
}

.about-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.about-visual-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(11, 29, 26, 0.5) 100%);
}

.about-values-section {
  background: linear-gradient(to bottom, transparent, rgba(19, 42, 36, 0.2), transparent);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.value-card {
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--transition-base);
  animation-delay: var(--delay, 0s);
}

.value-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-lg), var(--shadow-gold);
  transform: translateY(-4px);
}

.value-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-lg);
  display: block;
}

.value-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.value-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.company-card {
  text-align: center;
}

.company-card-inner {
  max-width: 800px;
  margin: 0 auto;
}

.company-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
  text-align: left;
}

.company-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.company-detail-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.company-detail strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 4px;
}

.company-detail p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-3xl);
  align-items: start;
}

.contact-form-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2xl);
}

.form-group {
  margin-bottom: var(--space-xl);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.required {
  color: var(--color-gold);
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(19, 42, 36, 0.4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  transition: all var(--transition-base);
  outline: none;
}

.form-input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 164, 76, 0.12);
  background: rgba(19, 42, 36, 0.6);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M6 8L0 0h12L6 8z' fill='%23c9a44c'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.form-select option {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

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

.form-error {
  display: none;
  font-size: var(--text-xs);
  color: #e88;
  margin-top: 4px;
}

.form-group.has-error .form-error {
  display: block;
}

.form-group.has-error .form-input {
  border-color: rgba(232, 136, 136, 0.6);
}

.form-checkbox-group {
  margin-top: var(--space-sm);
}

.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.form-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-checkbox-custom {
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: rgba(19, 42, 36, 0.4);
  flex-shrink: 0;
  margin-top: 1px;
  transition: all var(--transition-base);
  position: relative;
}

.form-checkbox:checked + .form-checkbox-custom {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.form-checkbox:checked + .form-checkbox-custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1a0f00;
  font-size: 11px;
  font-weight: 700;
}

.form-success {
  display: none;
  padding: var(--space-md) var(--space-lg);
  background: rgba(143, 212, 180, 0.1);
  border: 1px solid rgba(143, 212, 180, 0.25);
  border-radius: var(--radius-md);
  color: var(--color-emerald);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-top: var(--space-md);
  align-items: center;
  gap: var(--space-sm);
}

.form-success.show {
  display: flex;
}

.contact-info-card,
.contact-rg-card {
  margin-bottom: var(--space-xl);
}

.contact-info-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xl);
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.contact-info-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-info-item strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 4px;
}

.contact-info-item p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.contact-rg-card {
  text-align: center;
}

.contact-rg-icon {
  font-size: 2rem;
  margin-bottom: var(--space-md);
}

.contact-rg-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.contact-rg-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-content {
  max-width: 900px;
  margin: 0 auto;
}

.legal-toc {
  margin-bottom: var(--space-3xl);
}

.legal-toc h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: var(--space-lg);
}

.legal-toc ol {
  list-style: decimal;
  padding-left: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.legal-toc li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.legal-toc a {
  color: var(--color-emerald);
  text-decoration: none;
  transition: color var(--transition-base);
}

.legal-toc a:hover {
  color: var(--color-gold);
}

.legal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.legal-section-block h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.legal-icon {
  font-size: 1.2rem;
}

.legal-section-block p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.legal-section-block h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-gold);
  margin: var(--space-lg) 0 var(--space-sm);
}

.legal-section-block ul,
.legal-section-block ol {
  padding-left: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.legal-section-block ul li {
  list-style: disc;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.legal-section-block ol li {
  list-style: decimal;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.legal-contact-block {
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-top: var(--space-md);
}

/* ============================================================
   RESPONSIBLE GAMING PAGE
   ============================================================ */
.rg-key-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  background: rgba(143, 212, 180, 0.08);
  border: 1px solid rgba(143, 212, 180, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.rg-key-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.rg-key-content h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-emerald);
  margin-bottom: var(--space-md);
}

.rg-key-content p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.rg-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.rg-principle-card {
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--transition-base);
  animation-delay: var(--delay, 0s);
}

.rg-principle-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-lg), var(--shadow-emerald);
  transform: translateY(-4px);
}

.rg-principle-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-lg);
  display: block;
}

.rg-principle-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.rg-principle-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.rg-warning-section {
  background: linear-gradient(to bottom, transparent, rgba(19, 42, 36, 0.2), transparent);
}

.rg-warning-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 800px;
  margin: 0 auto;
}

.rg-warning-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.warning-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
  margin-top: 6px;
}

.rg-warning-item p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.rg-resources-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.rg-resource-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.rg-resource-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}

.rg-resource-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-emerald);
  transition: color var(--transition-base);
}

.rg-resource-link:hover {
  color: var(--color-gold);
}

.rg-contact-note {
  text-align: center;
  padding: var(--space-xl);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

/* ============================================================
   RULES PAGE
   ============================================================ */
.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}

.rules-card {
  animation-delay: var(--delay, 0s);
}

.rules-card-icon {
  font-size: 2rem;
  margin-bottom: var(--space-lg);
  display: block;
}

.rules-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.rules-card-body p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.rules-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.rules-spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-md);
  background: rgba(201, 164, 76, 0.06);
  border: 1px solid rgba(201, 164, 76, 0.12);
  border-radius: var(--radius-md);
}

.rules-spec-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rules-spec-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-gold);
  font-family: var(--font-display);
}

.rules-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  list-style: none;
  padding: 0;
}

.rules-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold));
  color: #1a0f00;
  font-weight: 700;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rules-steps li strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.rules-steps li p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* Symbols Table */
.symbols-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.symbol-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.symbol-row-header {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-xs);
}

.symbol-row:not(.symbol-row-header) {
  color: var(--color-text-secondary);
  background: rgba(255,255,255,0.02);
}

.symbol-row:not(.symbol-row-header):hover {
  background: rgba(201, 164, 76, 0.05);
}

.symbol-emoji {
  font-size: 1.3rem;
  text-align: center;
}

.symbol-type {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.type-high {
  background: rgba(201, 164, 76, 0.15);
  color: var(--color-gold);
  border: 1px solid rgba(201, 164, 76, 0.25);
}

.type-wild {
  background: rgba(143, 212, 180, 0.15);
  color: var(--color-emerald);
  border: 1px solid rgba(143, 212, 180, 0.25);
}

.type-scatter {
  background: rgba(244, 230, 195, 0.1);
  color: var(--color-highlight);
  border: 1px solid rgba(244, 230, 195, 0.2);
}

.type-bonus {
  background: rgba(255, 180, 100, 0.12);
  color: #f4b064;
  border: 1px solid rgba(255, 180, 100, 0.2);
}

.type-med {
  background: rgba(200, 200, 255, 0.08);
  color: #b4b8e8;
  border: 1px solid rgba(200, 200, 255, 0.15);
}

/* Rules Features */
.rules-features-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.rules-feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255,255,255,0.02);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all var(--transition-base);
}

.rules-feature-item:hover {
  background: rgba(201, 164, 76, 0.05);
  border-color: var(--color-border);
}

.rules-feature-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.rules-feature-item h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 4px;
}

.rules-feature-item p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* Rules Disclaimer */
.rules-disclaimer {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  border-color: rgba(143, 212, 180, 0.2);
}

.rules-disclaimer-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.rules-disclaimer h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-emerald);
  margin-bottom: var(--space-md);
}

.rules-disclaimer p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Rules CTA */
.rules-cta {
  text-align: center;
  padding: var(--space-3xl);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.rules-cta h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.rules-cta p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2xl);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
  padding: var(--space-5xl) 0 var(--space-2xl);
}

.footer-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-gold), transparent);
  box-shadow: 0 0 20px rgba(201, 164, 76, 0.3);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  margin-bottom: var(--space-lg);
}

.footer-brand-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 340px;
}

.footer-address {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 2;
}

.footer-address strong {
  color: var(--color-text-secondary);
}

.footer-address a {
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

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

.footer-nav-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-lg);
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-nav-list a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer-nav-list a:hover {
  color: var(--color-gold);
}

.footer-rg-note {
  background: var(--color-bg-glass);
  border: 1px solid rgba(143, 212, 180, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.rg-note-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.footer-rg-note p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.footer-bottom {
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
}

.footer-copyright {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer-disclaimer {
  font-size: var(--text-xs);
  color: rgba(143, 163, 155, 0.6);
}

/* ============================================================
   PARTICLES CONTAINER
   ============================================================ */
.hero-particles,
.game-particles,
.page-hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
/* ENDFILE */

<!-- FILE: terms.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Terms of Service — omnispinsprk.com</title>
    <meta name="description" content="Terms of Service for omnispinsprk.com. Free social casino — no real money gambling.">
    <link rel="stylesheet" href="css/style.css?v=4d6d6f6a">
    <link rel="stylesheet" href="css/responsive.css?v=b53cb0e7">
    <link rel="stylesheet" href="css/animations.css?v=8be69b90">
    <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&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>

    <header class="site-header" id="siteHeader">
        <div class="container">
            <div class="header-inner">
                <a href="./" class="logo" aria-label="omnispinsprk.com Home">
                    <span class="logo-icon">⚔️</span>
                    <span class="logo-text">omnispinsprk<span class="logo-accent">.com</span></span>
                </a>
                <nav class="main-nav" id="mainNav" aria-label="Main Navigation">
                    <ul class="nav-list">
                        <li><a href="./" class="nav-link">Home</a></li>
                        <li><a href="about.html" class="nav-link">About</a></li>
                        <li><a href="rules.html" class="nav-link">Rules</a></li>
                        <li><a href="responsible-gaming.html" class="nav-link">Responsible Gaming</a></li>
                        <li><a href="contact.html" class="nav-link">Contact</a></li>
                    </ul>
                </nav>
                <div class="header-cta">
                    <a href="./#game-section" class="btn btn-primary">Play Now</a>
                </div>
                <button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle mobile menu" aria-expanded="false">
                    <span></span><span></span><span></span>
                </button>
            </div>
        </div>
        <div class="mobile-menu-overlay" id="mobileMenuOverlay">
            <button class="mobile-menu-close" id="mobileMenuClose" aria-label="Close menu">✕</button>
            <nav aria-label="Mobile Navigation">
                <ul class="mobile-nav-list">
                    <li><a href="./" class="mobile-nav-link">Home</a></li>
                    <li><a href="about.html" class="mobile-nav-link">About</a></li>
                    <li><a href="rules.html" class="mobile-nav-link">Rules</a></li>
                    <li><a href="responsible-gaming.html" class="mobile-nav-link">Responsible Gaming</a></li>
                    <li><a href="contact.html" class="mobile-nav-link">Contact</a></li>
                    <li><a href="terms.html" class="mobile-nav-link">Terms</a></li>
                    <li><a href="privacy.html" class="mobile-nav-link">Privacy Policy</a></li>
                </ul>
            </nav>
            <a href="./#game-section" class="btn btn-primary mobile-cta">Play Now</a>
        </div>
    </header>

    <main>
        <section class="page-hero page-hero-short">
            <div class="page-hero-overlay"></div>
            <div class="container">
                <div class="page-hero-content fade-in-up">
                    <div class="section-badge"><span>📜 Legal Scroll</span></div>
                    <h1 class="page-hero-title">Terms of <span class="text-gold">Service</span></h1>
                    <p class="page-hero-subtitle">Last updated: January 1, 2026</p>
                </div>
            </div>
        </section>

        <section class="section-padding legal-section">
            <div class="container">
                <div class="legal-content fade-in-up">
                    <div class="legal-toc glass-card">
                        <h3>📋 Contents</h3>
                        <ol>
                            <li><a href="#terms-acceptance">Acceptance of Terms</a></li>
                            <li><a href="#terms-nature">Nature of the Service</a></li>
                            <li><a href="#terms-eligibility">Eligibility</a></li>
                            <li><a href="#terms-conduct">User Conduct</a></li>
                            <li><a href="#terms-virtual">Virtual Currency</a></li>
                            <li><a href="#terms-ip">Intellectual Property</a></li>
                            <li><a href="#terms-privacy">Privacy</a></li>
                            <li><a href="#terms-liability">Limitation of Liability</a></li>
                            <li><a href="#terms-changes">Changes to Terms</a></li>
                            <li><a href="#terms-contact">Contact Information</a></li>
                        </ol>
                    </div>

                    <div class="legal-body">
                        <div class="legal-section-block" id="terms-acceptance">
                            <h2><span class="legal-icon">⚔️</span> 1. Acceptance of Terms</h2>
                            <p>By accessing or using omnispinsprk.com (the "Platform") operated by omnispinsprk.com ("we," "us," or "Company"), you agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use the Platform.</p>
                            <p>These Terms constitute a legally binding agreement between you and omnispinsprk.com. These Terms apply to all visitors, users, and others who access or use the Platform.</p>
                        </div>

                        <div class="legal-section-block" id="terms-nature">
                            <h2><span class="legal-icon">🎮</span> 2. Nature of the Service</h2>
                            <p>omnispinsprk.com is a <strong>free social casino platform</strong> for entertainment purposes only. The Platform does not involve real money gambling. Specifically:</p>
                            <ul>
                                <li>No real money is wagered on any game</li>
                                <li>Virtual currency and rewards have no real-world monetary value</li>
                                <li>Virtual currency cannot be exchanged for real money, goods, or services</li>
                                <li>Winning virtual currency does not reflect or predict success in real-money gambling</li>
                                <li>The Platform is purely for entertainment and social interaction</li>
                            </ul>
                        </div>

                        <div class="legal-section-block" id="terms-eligibility">
                            <h2><span class="legal-icon">👑</span> 3. Eligibility</h2>
                            <p>To use the Platform, you must:</p>
                            <ul>
                                <li>Be at least 18 years of age (or the legal age of majority in your jurisdiction)</li>
                                <li>Have the legal capacity to enter into a binding agreement</li>
                                <li>Not be prohibited from accessing the Platform by applicable law</li>
                                <li>Agree to these Terms and our Privacy Policy</li>
                            </ul>
                            <p>By using the Platform, you represent and warrant that you meet all eligibility requirements. We reserve the right to terminate access for users who do not meet these requirements.</p>
                        </div>

                        <div class="legal-section-block" id="terms-conduct">
                            <h2><span class="legal-icon">🛡️</span> 4. User Conduct</h2>
                            <p>You agree not to engage in any of the following activities:</p>
                            <ul>
                                <li>Using automated software, bots, or scripts to access or interact with the Platform</li>
                                <li>Attempting to hack, reverse engineer, or disrupt the Platform</li>
                                <li>Engaging in fraudulent activities or misrepresenting your identity</li>
                                <li>Harassing, abusing, or threatening other users</li>
                                <li>Uploading harmful, offensive, or illegal content</li>
                                <li>Violating any applicable laws or regulations</li>
                                <li>Using the Platform for commercial purposes without written consent</li>
                            </ul>
                        </div>

                        <div class="legal-section-block" id="terms-virtual">
                            <h2><span class="legal-icon">💰</span> 5. Virtual Currency</h2>
                            <p>The Platform may feature virtual coins, tokens, or other in-game currency ("Virtual Currency"). You acknowledge and agree that:</p>
                            <ul>
                                <li>Virtual Currency is provided solely for in-game use and has no real-world monetary value</li>
                                <li>Virtual Currency cannot be redeemed, exchanged, or transferred for real money or goods</li>
                                <li>We reserve the right to modify, manage, or eliminate Virtual Currency at any time</li>
                                <li>Virtual Currency is not property, and you have no ownership rights to it</li>
                            </ul>
                        </div>

                        <div class="legal-section-block" id="terms-ip">
                            <h2><span class="legal-icon">©️</span> 6. Intellectual Property</h2>
                            <p>All content on the Platform, including but not limited to graphics, logos, game assets, text, and code, is the property of omnispinsprk.com or its licensors and is protected by applicable intellectual property laws. You may not reproduce, distribute, or create derivative works without express written permission.</p>
                        </div>

                        <div class="legal-section-block" id="terms-privacy">
                            <h2><span class="legal-icon">🔒</span> 7. Privacy</h2>
                            <p>Your use of the Platform is also governed by our <a href="privacy.html">Privacy Policy</a>, which is incorporated by reference into these Terms. Please review our Privacy Policy to understand our practices regarding the collection and use of your information.</p>
                        </div>

                        <div class="legal-section-block" id="terms-liability">
                            <h2><span class="legal-icon">⚖️</span> 8. Limitation of Liability</h2>
                            <p>To the maximum extent permitted by applicable law, omnispinsprk.com shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising from your use of or inability to use the Platform. The Platform is provided "as is" without warranties of any kind.</p>
                        </div>

                        <div class="legal-section-block" id="terms-changes">
                            <h2><span class="legal-icon">📜</span> 9. Changes to Terms</h2>
                            <p>We reserve the right to modify these Terms at any time. We will provide notice of significant changes by updating the "Last Updated" date at the top of this page. Your continued use of the Platform after any changes constitutes your acceptance of the new Terms.</p>
                        </div>

                        <div class="legal-section-block" id="terms-contact">
                            <h2><span class="legal-icon">📧</span> 10. Contact Information</h2>
                            <p>For questions about these Terms, please contact us:</p>
                            <div class="legal-contact-block">
                                <p><strong>omnispinsprk.com</strong><br>
                                Avalon House, King's Way<br>
                                St. Julian's STJ 4011, Malta<br>
                                Email: <a href="mailto:support@omnispinsprk.com">support@omnispinsprk.com</a><br>
                                Phone: <a href="tel:+35620998877">+356 2099 8877</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="footer-glow"></div>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <a href="./" class="footer-logo" aria-label="omnispinsprk.com Home">
                        <span class="logo-icon">⚔️</span>
                        <span class="logo-text">omnispinsprk<span class="logo-accent">.com</span></span>
                    </a>
                    <p class="footer-brand-desc">A free social casino experience set in the legendary world of Camelot. No real money. Pure enchantment.</p>
                    <address class="footer-address">
                        <strong>omnispinsprk.com</strong><br>
                        Avalon House, King's Way<br>
                        St. Julian's STJ 4011, Malta<br>
                        <a href="mailto:support@omnispinsprk.com">support@omnispinsprk.com</a><br>
                        <a href="tel:+35620998877">+356 2099 8877</a>
                    </address>
                </div>
                <div class="footer-nav-group">
                    <h4 class="footer-nav-title">Navigate</h4>
                    <ul class="footer-nav-list">
                        <li><a href="./">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="rules.html">Game Rules</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-nav-group">
                    <h4 class="footer-nav-title">Legal</h4>
                    <ul class="footer-nav-list">
                        <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>
                        <li><a href="rules.html">Rules</a></li>
                    </ul>
                </div>
                <div class="footer-nav-group">
                    <h4 class="footer-nav-title">The Kingdom</h4>
                    <div class="footer-rg-note">
                        <div class="rg-note-icon">🛡️</div>
                        <p>This is a free-to-play social casino. No real money gambling. Must be 18+ to play. Play responsibly.</p>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p class="footer-copyright">© 2026 omnispinsprk.com — All rights reserved.</p>
                <p class="footer-disclaimer">For entertainment purposes only. No real money wagering. Virtual currency has no real-world value.</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js?v=5784f68e"></script>
</body>
</html>