:root {
  --color-black: #0a0a0f;
  --color-dark-gray: #1a1a2e;
  --color-medium-gray: #16213e;
  --color-border-gray: #4a5568;
  --color-white: #f7fafc;
  --text-primary: #e2e8f0;
  --text-secondary: #a0aec0;
  --text-muted: #4a5568;
  --text-light-gray: #718096;
  --text-black: #1a202c;
  --btn-red: #9f7aea;
  --btn-red-hover: #805ad5;
  --btn-light-red: #b794f6;
  --btn-white: #f7fafc;
  --btn-blue: #4c51bf;
  --btn-green: #38a169;
  --btn-yellow: #d69e2e;
  --btn-yellow-hover: #b7791f;
  --bg-primary: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
  --bg-secondary: linear-gradient(45deg, #1a1a2e 0%, #2d3748 100%);
  --bg-tertiary: radial-gradient(circle at center, #16213e 0%, #1a1a2e 100%);
  --bg-overlay: rgba(10, 10, 15, 0.95);
  --border-primary: 1px solid rgba(159, 122, 234, 0.3);
  --border-white: 1px solid rgba(247, 250, 252, 0.2);
  --shadow-light: 0 -4px 20px rgba(159, 122, 234, 0.15);
  --shadow-heavy: 0 8px 32px rgba(159, 122, 234, 0.25);
  --shadow-menu: 5px 0 15px 0 rgba(159, 122, 234, 0.2);
  --glow-primary: 0 0 20px rgba(159, 122, 234, 0.5);
  --glow-secondary: 0 0 15px rgba(183, 148, 246, 0.3);
  --glow-text: 0 0 10px rgba(226, 232, 240, 0.4)
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  text-shadow: var(--glow-text);
  position: relative
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%, rgba(159, 122, 234, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(183, 148, 246, 0.08) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(76, 81, 191, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1
}

h1 {
  background: linear-gradient(45deg, #9f7aea, #b794f6, #e2e8f0);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: var(--glow-primary);
  filter: drop-shadow(0 0 10px rgba(159, 122, 234, 0.5))
}

h2 {
  color: var(--text-primary);
  text-shadow: var(--glow-secondary);
  position: relative
}

h2::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #9f7aea, transparent);
  box-shadow: var(--glow-primary)
}

h3 {
  color: var(--text-secondary);
  text-shadow: 0 0 8px rgba(160, 174, 192, 0.3)
}

.navbar {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.8) 100%);
  backdrop-filter: blur(15px);
  border-bottom: var(--border-primary);
  box-shadow: 0 4px 20px rgba(159, 122, 234, 0.1)
}

.navbar a {
  color: var(--text-primary);
  text-shadow: 0 0 5px rgba(226, 232, 240, 0.3);
  transition: all 0.3s ease
}

.navbar a:hover {
  color: #b794f6;
  text-shadow: var(--glow-secondary);
  transform: translateY(-1px)
}

.btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(159, 122, 234, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.4s ease
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease
}

.btn:hover::before {
  left: 100%
}

.btn-red {
  background: linear-gradient(45deg, var(--btn-red), var(--btn-light-red));
  box-shadow: var(--glow-primary);
  color: var(--color-white)
}

.btn-red:hover {
  box-shadow: 0 0 25px rgba(159, 122, 234, 0.6);
  transform: translateY(-2px)
}

.btn-white {
  background: rgba(247, 250, 252, 0.1);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(247, 250, 252, 0.2);
  color: var(--text-primary)
}

.btn-white:hover {
  background: rgba(247, 250, 252, 0.2);
  box-shadow: 0 0 15px rgba(247, 250, 252, 0.3)
}

.casino-item {
  background: var(--bg-secondary);
  border: var(--border-primary);
  backdrop-filter: blur(20px);
  position: relative;
  transition: all 0.5s ease
}

.casino-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(45deg, rgba(159, 122, 234, 0.1), rgba(183, 148, 246, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease
}

.casino-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-heavy);
  border-color: rgba(159, 122, 234, 0.6)
}

.casino-item:hover::before {
  opacity: 1
}

.casino-item h4 {
  color: var(--text-primary);
  text-shadow: var(--glow-text)
}

.casino-item p {
  color: var(--text-secondary);
  font-style: italic;
  text-shadow: 0 0 5px rgba(160, 174, 192, 0.2)
}

footer {
  background: var(--bg-tertiary);
  border: var(--border-white);
  backdrop-filter: blur(20px);
  position: relative
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159, 122, 234, 0.5), transparent)
}

.footer-age {
  background: linear-gradient(135deg, rgba(22, 33, 62, 0.8), rgba(26, 26, 46, 0.9));
  border: 1px solid rgba(159, 122, 234, 0.2)
}

.footer-links a {
  color: var(--text-secondary);
  text-shadow: 0 0 5px rgba(160, 174, 192, 0.2);
  transition: all 0.3s ease
}

.footer-links a:hover {
  color: #b794f6;
  text-shadow: var(--glow-secondary)
}

.modal-overlay {
  background: rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(15px)
}

.modal {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(45, 55, 72, 0.9));
  border: var(--border-primary);
  backdrop-filter: blur(25px);
  box-shadow: 0 20px 40px rgba(159, 122, 234, 0.3);
  position: relative
}

.modal::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background: linear-gradient(45deg, rgba(159, 122, 234, 0.3), rgba(183, 148, 246, 0.1));
  z-index: -1
}

.modal .age-circle {
  background: linear-gradient(45deg, #9f7aea, #b794f6);
  box-shadow: var(--glow-primary)
}

.modal h2 {
  color: var(--text-primary);
  text-shadow: var(--glow-text)
}

.modal button {
  background: linear-gradient(45deg, var(--btn-yellow), #e6ad2e);
  box-shadow: 0 0 15px rgba(214, 158, 46, 0.4);
  border: 1px solid rgba(214, 158, 46, 0.3)
}

.modal button:hover {
  box-shadow: 0 0 20px rgba(214, 158, 46, 0.6);
  transform: translateY(-1px)
}

.gdpr-banner {
  background: linear-gradient(135deg, rgba(10, 10, 15, 0.98), rgba(26, 26, 46, 0.95));
  border-top: 1px solid rgba(159, 122, 234, 0.3);
  backdrop-filter: blur(20px);
  box-shadow: 0 -8px 32px rgba(159, 122, 234, 0.2)
}

.gdpr-title {
  color: var(--text-primary);
  text-shadow: var(--glow-text)
}

.gdpr-description {
  color: var(--text-secondary);
  text-shadow: 0 0 5px rgba(160, 174, 192, 0.2)
}

.gdpr-description a {
  color: #b794f6;
  text-shadow: var(--glow-secondary)
}

.gdpr-btn-primary {
  background: linear-gradient(45deg, var(--btn-red), var(--btn-light-red));
  border: 1px solid rgba(159, 122, 234, 0.4);
  box-shadow: var(--glow-primary)
}

.gdpr-btn-primary:hover {
  box-shadow: 0 0 25px rgba(159, 122, 234, 0.6)
}

.gdpr-btn-secondary {
  background: rgba(74, 85, 104, 0.2);
  border: 1px solid rgba(159, 122, 234, 0.3);
  backdrop-filter: blur(10px)
}

.gdpr-btn-secondary:hover {
  background: rgba(159, 122, 234, 0.1);
  box-shadow: 0 0 15px rgba(159, 122, 234, 0.3)
}

.gdpr-modal {
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(20px)
}

.gdpr-modal-content {
  background: var(--bg-secondary);
  border: var(--border-primary);
  backdrop-filter: blur(30px);
  box-shadow: 0 25px 50px rgba(159, 122, 234, 0.4)
}

.gdpr-toggle.active {
  background: linear-gradient(45deg, var(--btn-red), var(--btn-light-red));
  box-shadow: var(--glow-primary)
}

.gdpr-success {
  background: linear-gradient(45deg, var(--btn-green), #48bb78);
  box-shadow: 0 8px 25px rgba(56, 161, 105, 0.4);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(56, 161, 105, 0.3)
}

@keyframes ghostlyFloat {

  0%,
  100% {
    transform: translateY(0px)
  }

  50% {
    transform: translateY(-10px)
  }
}

@keyframes mysticalGlow {

  0%,
  100% {
    opacity: 0.5
  }

  50% {
    opacity: 1
  }
}

@keyframes bookShimmer {
  0% {
    background-position: -1000px 0
  }

  100% {
    background-position: 1000px 0
  }
}

.casino-item {
  animation: ghostlyFloat 6s ease-in-out infinite
}

.casino-item:nth-child(2) {
  animation-delay: -2s
}

.casino-item:nth-child(3) {
  animation-delay: -4s
}

h1 {
  animation: mysticalGlow 4s ease-in-out infinite
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  background-size: 200% 100%;
  animation: bookShimmer 3s ease-in-out infinite;
  opacity: 0
}

.btn:hover::after {
  opacity: 1
}

.eighteen section {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.eighteen .hero-title {
  margin-bottom: 0;
  padding-bottom: 25px;
}

.eighteen .icon {
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background: var(--color-border-gray);
  border-radius: 50%;
}