:root {
  --color-black: #0f0908;
  --color-dark-gray: #2a1f1a;
  --color-medium-gray: #3a2d24;
  --color-border-gray: #8b6f47;
  --color-white: #f4ede1;
  --text-primary: #f4ede1;
  --text-secondary: #d1c2a5;
  --text-muted: #8b6f47;
  --text-light-gray: #a68c66;
  --text-black: #1a130e;
  --btn-red: #8b2c1b;
  --btn-red-hover: #6d2115;
  --btn-light-red: #a0351f;
  --btn-white: #f4ede1;
  --btn-blue: #1e3a5f;
  --btn-green: #4a6741;
  --btn-yellow: #c9963d;
  --btn-yellow-hover: #a67c32;
  --bg-primary: linear-gradient(135deg, #0f0908 0%, #1a130e 50%, #2a1f1a 100%);
  --bg-secondary: linear-gradient(145deg, #2a1f1a 0%, #3a2d24 100%);
  --bg-tertiary: linear-gradient(135deg, #3a2d24 0%, #4a3b2f 100%);
  --bg-overlay: rgba(15, 9, 8, 0.95);
  --border-primary: 2px solid #8b6f47;
  --border-white: 2px solid #f4ede1;
  --shadow-light: 0 -8px 32px rgba(201, 150, 61, 0.15);
  --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.7);
  --shadow-menu: 8px 0 16px 0 rgba(139, 44, 27, 0.3);
  --font-primary: "Cinzel", "Trajan Pro", serif;
  --font-secondary: "Cinzel", "Marcellus", serif;
  --ring-glow: 0 0 20px rgba(201, 150, 61, 0.6), 0 0 40px rgba(201, 150, 61, 0.4);
  --fire-glow: 0 0 15px rgba(139, 44, 27, 0.8), 0 0 30px rgba(139, 44, 27, 0.6);
  --magic-shimmer: linear-gradient(45deg, transparent 30%, rgba(201, 150, 61, 0.3) 50%, transparent 70%);
  --ember-particles: radial-gradient(circle at 20% 80%, rgba(255, 140, 0, 0.8) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 69, 0, 0.8) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 215, 0, 0.6) 0%, transparent 50%);
  --magic-aura: 0 0 30px rgba(138, 43, 226, 0.5), 0 0 60px rgba(138, 43, 226, 0.3), 0 0 90px rgba(138, 43, 226, 0.1);
  --ice-glow: 0 0 20px rgba(173, 216, 230, 0.8), 0 0 40px rgba(173, 216, 230, 0.5);
  --nature-glow: 0 0 20px rgba(34, 139, 34, 0.8), 0 0 40px rgba(34, 139, 34, 0.4)
}

* {
  box-shadow: none;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8)
}

body {
  background: var(--bg-primary);
  background-attachment: fixed;
  font-family: var(--font-primary);
  color: var(--text-primary);
  position: relative
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-secondary);
  color: var(--btn-yellow);
  text-shadow: var(--ring-glow);
  letter-spacing: 2px;
  position: relative;
  font-weight: 600
}

h1::after,
h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--btn-yellow), transparent);
  box-shadow: var(--ring-glow);
  animation: runeGlow 3s ease-in-out infinite alternate
}

@keyframes runeGlow {
  0% {
    width: 40px;
    box-shadow: var(--ring-glow)
  }

  100% {
    width: 80px;
    box-shadow: var(--ring-glow), 0 0 50px rgba(201, 150, 61, 0.8)
  }
}

h1 {
  animation: titleFloat 4s ease-in-out infinite;
  text-shadow: var(--ring-glow), 2px 2px 8px rgba(0, 0, 0, 0.9)
}

@keyframes titleFloat {

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

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

h3,
h4 {
  color: var(--text-primary);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  position: relative
}

h3::before,
h4::before {
  content: '◆';
  position: absolute;
  left: -25px;
  color: var(--btn-yellow);
  font-size: 0.8em;
  animation: runeFlicker 2s infinite ease-in-out
}

@keyframes runeFlicker {

  0%,
  100% {
    opacity: 0.7;
    transform: scale(1)
  }

  50% {
    opacity: 1;
    transform: scale(1.1)
  }
}

.copyright {
  font-family: var(--font-primary);
  color: var(--text-muted);
  font-style: italic;
  position: relative
}

.copyright::before {
  content: '§';
  margin-right: 5px;
  color: var(--btn-yellow);
  font-size: 1.2em
}

.navbar {
  background: var(--bg-secondary);
  border-bottom: var(--border-primary);
  box-shadow: var(--shadow-heavy);
  backdrop-filter: blur(10px);
  position: relative
}

.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--magic-shimmer);
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
  opacity: 0.1
}

@keyframes shimmer {
  0% {
    background-position: -200% 0
  }

  100% {
    background-position: 200% 0
  }
}

.navbar a {
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  transition: all 0.3s ease
}

.navbar a::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--btn-yellow);
  transition: width 0.3s ease;
  box-shadow: var(--ring-glow)
}

.navbar a:hover::before {
  width: 100%
}

.navbar a:hover {
  color: var(--btn-yellow);
  text-shadow: var(--ring-glow);
  transform: translateY(-2px)
}

.btn {
  font-family: var(--font-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid transparent;
  box-shadow: var(--shadow-heavy);
  position: relative;
  overflow: hidden
}

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

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

.btn-red {
  background: linear-gradient(135deg, var(--btn-red), var(--btn-light-red));
  border-color: var(--btn-red);
  box-shadow: var(--fire-glow), var(--shadow-heavy)
}

.btn-red:hover {
  background: linear-gradient(135deg, var(--btn-red-hover), var(--btn-red));
  box-shadow: var(--fire-glow), 0 6px 20px rgba(139, 44, 27, 0.4)
}

.btn-white {
  background: linear-gradient(135deg, var(--btn-white), #e8dcc6);
  color: var(--text-black);
  border-color: var(--color-border-gray);
  font-weight: 700
}

.btn-blue {
  background: linear-gradient(135deg, var(--btn-blue), #2a4d7a);
  border-color: var(--btn-blue)
}

.btn-green {
  background: linear-gradient(135deg, var(--btn-green), #5a7a4f);
  border-color: var(--btn-green)
}

.btn-yellow {
  background: linear-gradient(135deg, var(--btn-yellow), #d4a245);
  border-color: var(--btn-yellow);
  color: var(--text-black);
  box-shadow: var(--ring-glow), var(--shadow-heavy)
}

.casino-wrapper {
  background: var(--bg-secondary);
  border: var(--border-primary);
  box-shadow: var(--shadow-heavy);
  position: relative;
  overflow: hidden
}

.casino-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--magic-shimmer);
  background-size: 300% 100%;
  animation: shimmer 4s infinite;
  opacity: 0.05
}

.casino-item {
  background: var(--bg-tertiary);
  border: 1px solid var(--color-border-gray);
  position: relative;
  transition: all 0.4s ease;
  overflow: hidden
}

.casino-item::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--btn-yellow), var(--btn-red), var(--btn-blue), var(--btn-green));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease
}

.casino-item::after {
  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
}

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

.casino-item:hover::after {
  left: 100%
}

.casino-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--ring-glow), var(--shadow-heavy), 0 15px 35px rgba(0, 0, 0, 0.4)
}

.casino-item h4 {
  color: var(--btn-yellow);
  font-family: var(--font-secondary)
}

.casino-item p {
  color: var(--text-secondary);
  font-style: italic
}

footer {
  background: var(--bg-secondary);
  border: var(--border-primary);
  position: relative
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--btn-red), var(--btn-yellow), var(--btn-blue), var(--btn-green), var(--btn-red));
  background-size: 400% 100%;
  animation: rainbow 6s linear infinite
}

@keyframes rainbow {
  0% {
    background-position: 0% 0%
  }

  100% {
    background-position: 400% 0%
  }
}

.footer-info,
.footer-age {
  background: var(--bg-tertiary)
}

.footer-links a {
  color: var(--text-secondary);
  transition: all 0.3s ease
}

.footer-links a:hover {
  color: var(--btn-yellow);
  text-shadow: var(--ring-glow)
}

.modal-overlay {
  background: var(--bg-overlay);
  backdrop-filter: blur(8px)
}

.modal {
  background: var(--bg-secondary);
  border: var(--border-primary);
  box-shadow: var(--ring-glow), var(--shadow-heavy);
  position: relative
}

.modal::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, var(--btn-yellow), var(--btn-red));
  border-radius: inherit;
  z-index: -1;
  opacity: 0.8
}

.modal .age-circle {
  background: radial-gradient(circle, var(--btn-red), var(--btn-red-hover));
  box-shadow: var(--fire-glow);
  border: 2px solid var(--btn-yellow)
}

.modal h2 {
  color: var(--text-primary);
  font-family: var(--font-secondary)
}

.modal button {
  background: linear-gradient(135deg, var(--btn-yellow), #d4a245);
  color: var(--text-black);
  border: 2px solid var(--btn-yellow);
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px
}

.gdpr-banner {
  background: linear-gradient(135deg, rgba(15, 9, 8, 0.98), rgba(42, 31, 26, 0.95));
  border-top: 2px solid var(--color-border-gray);
  box-shadow: var(--shadow-light);
  backdrop-filter: blur(15px)
}

.gdpr-title {
  font-family: var(--font-secondary);
  color: var(--btn-yellow);
  text-shadow: var(--ring-glow)
}

.gdpr-description {
  color: var(--text-secondary);
  font-family: var(--font-primary)
}

.gdpr-description a {
  color: var(--btn-yellow);
  text-shadow: 0 0 5px rgba(201, 150, 61, 0.5)
}

.gdpr-btn-primary {
  background: linear-gradient(135deg, var(--btn-red), var(--btn-light-red));
  border-color: var(--btn-red);
  box-shadow: var(--fire-glow);
  font-family: var(--font-primary)
}

.gdpr-btn-secondary {
  background: transparent;
  border-color: var(--color-border-gray);
  color: var(--text-primary);
  font-family: var(--font-primary)
}

.gdpr-btn-secondary:hover {
  background: rgba(139, 111, 71, 0.2);
  border-color: var(--btn-yellow);
  color: var(--btn-yellow)
}

.container {
  position: relative
}

.container::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, var(--btn-yellow) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
  animation: sparkle 1s infinite ease-in-out
}

@keyframes sparkle {

  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.6
  }

  50% {
    transform: scale(1.2);
    opacity: 1
  }
}

@keyframes flicker {

  0%,
  100% {
    opacity: 1
  }

  25% {
    opacity: 0.8
  }

  50% {
    opacity: 0.9
  }

  75% {
    opacity: 0.7
  }
}

.logo {
  animation: flicker 4s infinite ease-in-out;
  position: relative
}

.logo::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: var(--magic-aura);
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  animation: logoAura 6s infinite ease-in-out
}

@keyframes logoAura {

  0%,
  100% {
    opacity: 0;
    transform: scale(0.8)
  }

  50% {
    opacity: 0.3;
    transform: scale(1.1)
  }
}

@keyframes float {

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

  25% {
    transform: translateY(-3px) rotate(0.5deg)
  }

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

  75% {
    transform: translateY(-3px) rotate(-0.5deg)
  }
}

@keyframes floatReverse {

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

  25% {
    transform: translateY(-2px) rotate(-0.3deg)
  }

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

  75% {
    transform: translateY(-2px) rotate(0.3deg)
  }
}

.casino-item:nth-child(odd) {
  animation: float 5s infinite ease-in-out
}

.casino-item:nth-child(even) {
  animation: floatReverse 4.5s infinite ease-in-out
}

@keyframes pulse {
  0% {
    box-shadow: var(--fire-glow)
  }

  50% {
    box-shadow: var(--fire-glow), 0 0 30px rgba(139, 44, 27, 0.8)
  }

  100% {
    box-shadow: var(--fire-glow)
  }
}

@keyframes ringPulse {
  0% {
    box-shadow: var(--ring-glow)
  }

  50% {
    box-shadow: var(--ring-glow), 0 0 35px rgba(201, 150, 61, 0.9)
  }

  100% {
    box-shadow: var(--ring-glow)
  }
}

.btn-red:hover {
  animation: pulse 2s infinite
}

.btn-yellow:hover {
  animation: ringPulse 2s infinite
}

section {
  position: relative;
  overflow: hidden
}

section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 20%, rgba(201, 150, 61, 0.1) 0%, transparent 50%), radial-gradient(circle at 90% 80%, rgba(139, 44, 27, 0.1) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.05) 0%, transparent 50%);
  animation: magicFlow 15s linear infinite;
  pointer-events: none;
  z-index: -1
}

@keyframes magicFlow {
  0% {
    transform: rotate(0deg) scale(1)
  }

  50% {
    transform: rotate(180deg) scale(1.1)
  }

  100% {
    transform: rotate(360deg) scale(1)
  }
}

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

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

.casino-item,
.btn,
h1,
h2 {
  animation: fadeInUp 0.8s ease-out
}

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

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

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

p,
.casino-item p {
  transition: all 0.3s ease
}

p:hover,
.casino-item p:hover {
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(244, 237, 225, 0.5);
  transform: scale(1.02)
}

.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%;
}