:root {
  --color-black: #0a0f1c;
  --color-dark-gray: #1a2332;
  --color-medium-gray: #243447;
  --color-border-gray: #4a6fa5;
  --color-white: #f0f8ff;
  --text-primary: #e6f3ff;
  --text-secondary: #b3d9ff;
  --text-muted: #6699cc;
  --text-light-gray: #8fb3d9;
  --text-black: #0a0f1c;
  --btn-red: #00bfff;
  --btn-red-hover: #0099cc;
  --btn-light-red: #1e90ff;
  --btn-white: #f0f8ff;
  --btn-blue: #003366;
  --btn-green: #008080;
  --btn-yellow: #40e0d0;
  --btn-yellow-hover: #20b2aa;
  --bg-primary: linear-gradient(135deg, #0a0f1c 0%, #1a2332 50%, #0f1b2e 100%);
  --bg-secondary: linear-gradient(45deg, #1a2332 0%, #243447 100%);
  --bg-tertiary: linear-gradient(90deg, #243447 0%, #2c4057 100%);
  --bg-overlay: rgba(10, 15, 28, 0.95);
  --border-primary: 1px solid #4a6fa5;
  --border-white: 1px solid #e6f3ff;
  --shadow-light: 0 -4px 20px rgba(0, 191, 255, 0.3);
  --shadow-heavy: 0 4px 20px rgba(0, 100, 150, 0.6);
  --shadow-menu: 5px 0 15px 0 rgba(0, 191, 255, 0.4)
}

@keyframes bioluminescent-pulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.5), 0 0 20px rgba(0, 191, 255, 0.3), 0 0 30px rgba(0, 191, 255, 0.1)
  }

  50% {
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.8), 0 0 40px rgba(0, 191, 255, 0.5), 0 0 60px rgba(0, 191, 255, 0.3)
  }
}

@keyframes deep-wave {
  0% {
    transform: translateY(0px) rotate(0deg)
  }

  25% {
    transform: translateY(-5px) rotate(1deg)
  }

  50% {
    transform: translateY(0px) rotate(0deg)
  }

  75% {
    transform: translateY(5px) rotate(-1deg)
  }

  100% {
    transform: translateY(0px) rotate(0deg)
  }
}

@keyframes abyss-glow {

  0%,
  100% {
    text-shadow: 0 0 10px rgba(64, 224, 208, 0.5)
  }

  50% {
    text-shadow: 0 0 20px rgba(64, 224, 208, 0.8), 0 0 30px rgba(0, 191, 255, 0.4)
  }
}

body {
  background: var(--bg-primary);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 20% 30%, rgba(0, 191, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(64, 224, 208, 0.08) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(30, 144, 255, 0.06) 0%, transparent 50%);
  animation: deep-wave 8s ease-in-out infinite;
  z-index: -1;
  pointer-events: none
}

h1 {
  background: linear-gradient(45deg, #e6f3ff, #40e0d0, #00bfff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: abyss-glow 3s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(0, 191, 255, 0.4))
}

h2 {
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(64, 224, 208, 0.6);
  position: relative
}

h2::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #40e0d0, transparent);
  animation: bioluminescent-pulse 2s ease-in-out infinite
}

h3,
h4 {
  color: var(--text-primary);
  text-shadow: 0 0 8px rgba(0, 191, 255, 0.4)
}

.navbar {
  background: linear-gradient(180deg, rgba(26, 35, 50, 0.95) 0%, rgba(10, 15, 28, 0.9) 100%);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(74, 111, 165, 0.3);
  box-shadow: 0 4px 20px rgba(0, 100, 150, 0.3)
}

.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #40e0d0, transparent);
  animation: bioluminescent-pulse 3s ease-in-out infinite
}

.navbar a:hover {
  color: #40e0d0;
  text-shadow: 0 0 10px rgba(64, 224, 208, 0.8);
  transform: translateY(-2px)
}

.btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(74, 111, 165, 0.5);
  backdrop-filter: blur(10px)
}

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

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

.btn-red {
  background: linear-gradient(135deg, #00bfff, #1e90ff);
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.4)
}

.btn-red:hover {
  box-shadow: 0 0 25px rgba(0, 191, 255, 0.7);
  transform: translateY(-3px)
}

.btn-white {
  background: linear-gradient(135deg, rgba(240, 248, 255, 0.9), rgba(230, 243, 255, 0.8));
  color: var(--text-black);
  box-shadow: 0 0 15px rgba(240, 248, 255, 0.3)
}

.btn-green {
  background: linear-gradient(135deg, #008080, #20b2aa);
  box-shadow: 0 0 15px rgba(0, 128, 128, 0.4)
}

.btn-yellow {
  background: linear-gradient(135deg, #40e0d0, #20b2aa);
  box-shadow: 0 0 15px rgba(64, 224, 208, 0.4)
}

.casino-wrapper {
  background: rgba(26, 35, 50, 0.6);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(74, 111, 165, 0.4);
  box-shadow: 0 8px 32px rgba(0, 100, 150, 0.3);
  position: relative;
  overflow: hidden
}

.casino-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #40e0d0, #00bfff, #40e0d0, transparent);
  animation: bioluminescent-pulse 4s ease-in-out infinite
}

.casino-item {
  background: linear-gradient(135deg, rgba(36, 52, 71, 0.8), rgba(26, 35, 50, 0.9));
  border: 1px solid rgba(74, 111, 165, 0.6);
  backdrop-filter: blur(10px);
  position: relative;
  transition: all 0.4s ease
}

.casino-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 191, 255, 0.3);
  border-color: rgba(64, 224, 208, 0.8)
}

.casino-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #40e0d0, transparent);
  opacity: 0;
  transition: opacity 0.4s ease
}

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

.casino img {
  filter: drop-shadow(0 0 10px rgba(0, 191, 255, 0.3));
  transition: filter 0.4s ease
}

.casino-item:hover img {
  filter: drop-shadow(0 0 20px rgba(64, 224, 208, 0.6))
}

footer {
  background: linear-gradient(180deg, rgba(10, 15, 28, 0.9) 0%, rgba(26, 35, 50, 0.95) 100%);
  border: 1px solid rgba(74, 111, 165, 0.4);
  backdrop-filter: blur(15px);
  position: relative
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #40e0d0, #00bfff, transparent);
  animation: bioluminescent-pulse 5s ease-in-out infinite
}

.footer-age {
  background: linear-gradient(135deg, rgba(36, 52, 71, 0.8), rgba(44, 64, 87, 0.9));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(74, 111, 165, 0.3)
}

.logo-info img {
  filter: drop-shadow(0 0 10px rgba(0, 191, 255, 0.4))
}

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

.modal {
  background: linear-gradient(135deg, rgba(240, 248, 255, 0.95), rgba(230, 243, 255, 0.9));
  border: 1px solid rgba(74, 111, 165, 0.6);
  box-shadow: 0 20px 60px rgba(0, 100, 150, 0.4);
  backdrop-filter: blur(15px)
}

.modal .age-circle {
  background: linear-gradient(135deg, #1e90ff, #00bfff);
  box-shadow: 0 0 20px rgba(0, 191, 255, 0.6);
  animation: bioluminescent-pulse 2s ease-in-out infinite
}

.modal button {
  background: linear-gradient(135deg, #40e0d0, #20b2aa);
  box-shadow: 0 0 15px rgba(64, 224, 208, 0.4);
  position: relative;
  overflow: hidden
}

.modal button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s
}

.modal button:hover::before {
  left: 100%
}

.gdpr-banner {
  background: linear-gradient(180deg, rgba(10, 15, 28, 0.98) 0%, rgba(26, 35, 50, 0.95) 100%);
  border-top: 1px solid rgba(74, 111, 165, 0.5);
  backdrop-filter: blur(20px);
  box-shadow: 0 -8px 32px rgba(0, 100, 150, 0.3)
}

.gdpr-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #40e0d0, #00bfff, #40e0d0, transparent);
  animation: bioluminescent-pulse 6s ease-in-out infinite
}

.gdpr-title {
  text-shadow: 0 0 10px rgba(64, 224, 208, 0.6)
}

.gdpr-btn-primary {
  background: linear-gradient(135deg, #00bfff, #1e90ff);
  border-color: rgba(0, 191, 255, 0.6);
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.4)
}

.gdpr-btn-primary:hover {
  box-shadow: 0 0 25px rgba(0, 191, 255, 0.7)
}

.gdpr-btn-secondary {
  background: rgba(36, 52, 71, 0.6);
  border-color: rgba(74, 111, 165, 0.7);
  backdrop-filter: blur(10px)
}

.gdpr-btn-secondary:hover {
  background: rgba(74, 111, 165, 0.3);
  border-color: #40e0d0;
  box-shadow: 0 0 15px rgba(64, 224, 208, 0.3)
}

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

.gdpr-modal-content {
  background: linear-gradient(135deg, rgba(26, 35, 50, 0.95), rgba(36, 52, 71, 0.9));
  border: 1px solid rgba(74, 111, 165, 0.6);
  backdrop-filter: blur(15px);
  box-shadow: 0 25px 80px rgba(0, 100, 150, 0.4)
}

.gdpr-modal-header {
  border-bottom: 1px solid rgba(74, 111, 165, 0.4);
  position: relative
}

.gdpr-modal-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #40e0d0, transparent);
  animation: bioluminescent-pulse 3s ease-in-out infinite
}

.gdpr-modal-title {
  text-shadow: 0 0 10px rgba(64, 224, 208, 0.6)
}

.gdpr-toggle {
  background: rgba(36, 52, 71, 0.8);
  border-color: rgba(74, 111, 165, 0.6)
}

.gdpr-toggle.active {
  background: linear-gradient(135deg, #00bfff, #1e90ff);
  border-color: #00bfff;
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.5)
}

.gdpr-toggle::before {
  box-shadow: 0 2px 8px rgba(0, 100, 150, 0.3)
}

.gdpr-success {
  background: linear-gradient(135deg, #008080, #20b2aa);
  box-shadow: 0 8px 32px rgba(0, 128, 128, 0.4);
  border: 1px solid rgba(64, 224, 208, 0.6);
  backdrop-filter: blur(10px)
}

.container {
  position: relative
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50px;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(64, 224, 208, 0.3), transparent);
  animation: deep-wave 6s ease-in-out infinite;
  z-index: -1
}

.container::after {
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(0, 191, 255, 0.3), transparent);
  animation: deep-wave 8s ease-in-out infinite reverse;
  z-index: -1
}

section {
  position: relative
}

section::before {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 4px;
  height: 4px;
  background: rgba(64, 224, 208, 0.6);
  border-radius: 50%;
  box-shadow: 10px 10px 0 rgba(0, 191, 255, 0.4), -15px 20px 0 rgba(64, 224, 208, 0.3), 25px -10px 0 rgba(30, 144, 255, 0.5);
  animation: deep-wave 10s ease-in-out infinite;
  z-index: -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%;
}