/* =================== ANIMATIONS =================== */
@keyframes redGradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* =================== TOP CASINOS SECTION =================== */
.top-casinos-section {
  padding: 3.75rem 1.25rem;
  /* background: linear-gradient(135deg, #0f1420a1 0%, #1a1d29 100%); */
  position: relative;
  overflow: hidden;
}

.top-casinos-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(253, 150, 11, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(228, 0, 0, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.top-casinos-title {
  text-align: center;
  margin-bottom: 3.125rem;
  position: relative;
  z-index: 2;
}

.top-casinos-title h2 {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  background: linear-gradient(45deg, #ff0000, #ff4444, #cc0000, #ff6666, #990000, #ff3333);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 1.25rem rgba(255, 0, 0, 0.5);
  margin: 0;
  letter-spacing: 0.1875rem;
  position: relative;
  animation: redGradientMove 3s ease-in-out infinite;
}

.top-casinos-title h2::after {
  content: '';
  position: absolute;
  bottom: -0.625rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6.25rem;
  height: 0.1875rem;
  background: linear-gradient(90deg, #fd960b 0%, #f08718 100%);
  border-radius: 0.125rem;
}

.casinos-flex-container {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 2.2rem;
  max-width: 75rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  perspective: 1600px;
}

/* Lower left and right cards a bit to sit deeper than the center card */
.casinos-flex-container .casino-card:first-child,
.casinos-flex-container .card-teal {
  margin-top: 5rem;
}

/* ===== Force full transparency for section and container (no overlay tints) ===== */
.top-casinos-section { background: transparent !important; }
.top-casinos-section::before { background: none !important; content: none !important; }
.casinos-flex-container { background: transparent !important; }


/* Casino Cards */
.casino-card {
  position: relative;
  width: 18rem;
  height: 28rem;
  border-radius: 1.25rem;
  overflow: visible;
  cursor: pointer;
  background: transparent;
  /* Outer shell now holds layout only; no transform animations here */
}

/* Inner wrapper to isolate transform-based animations (intro, hover, idle pulse) */
.casino-card-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: visible;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.casino-card:hover .casino-card-inner {
  transform: translateY(-0.625rem) scale(1.02);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.3), 0 0 1.875rem rgba(253, 150, 11, 0.2);
}

/* ===== Center card idle pulse (mimic hover) ===== */
@keyframes cardHoverPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: none;
  }
  45% {
    transform: translateY(-0.625rem) scale(1.02);
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.3), 0 0 1.875rem rgba(253, 150, 11, 0.2);
  }
}
/* Idle pulse nur Desktop (wird über Desktop Media Query später nicht überschrieben). */
@media (min-width: 48.0625rem) { /* > 48rem */
  .top-casinos-section.intro-finished .casinos-flex-container .card-orange:not(:hover) .casino-card-inner {
    animation: cardHoverPulse 1s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .casinos-flex-container .card-orange:not(:hover) {
    animation: none !important;
  }
}

/* Remove background gradients to let frame images show */
.casino-card:nth-child(1),
.card-orange,
.card-teal {


  box-shadow: none;
}

/* Golden Frame (Second Card - Orange) */
.card-orange {
    width: 22rem!important;
  height: 33.125rem !important;
}

.casino-frame-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  opacity: 1;
}

/* Desktop frames - visible by default */
.desktop-frame {
  display: block;
}

/* Mobile frames - hidden by default */
.mobile-frame {
  display: none;
}

/* Mobile card styling */
@media (max-width: 48rem) {
  .casino-card {
    border: 0.1875rem solid #ffd700;
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%);
    box-shadow: 0 0 1.5rem rgba(255, 215, 0, 0.4), inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
    position: relative;
    width: 18.75rem !important;
    height: 26.25rem !important;
  }
  
  /* First card - Golden border */
  .casino-card:nth-child(1) {
    border: 0.1875rem solid #ffd700 !important;
    box-shadow: 0 0 1.5rem rgba(255, 215, 0, 0.4), inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Second card - Silver border */
  .card-orange {
    border: 0.1875rem solid #c0c0c0 !important;
    box-shadow: 0 0 1.5rem rgba(192, 192, 192, 0.4), inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1) !important;
    height: 26.25rem !important;
  }
  
  /* Third card - Platinum border */
  .card-teal {
    border: 0.1875rem solid #e5e4e2 !important;
    box-shadow: 0 0 1.5rem rgba(229, 228, 226, 0.4), inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Mobile frame positioning - overlay on border */
  .mobile-frame {
    position: absolute;
    top: -1rem;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 1;
    pointer-events: none;
    object-fit: contain;
    object-position: top center;
  }
}

.casino-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
 padding:  6.5rem 1.5rem 5.5rem 2.5rem;
  box-sizing: border-box;
}
.casino-logo {
  width: 10rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  padding: 0.3125rem;
 
}

.casino-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.casino-content {
  text-align: center;
  color: #ffffff;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.casino-content-item {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  margin: 0;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
  line-height: 1.3;
}

.casino-content-item:first-child {
  font-size: 1rem;
  color: #fd960b;
}

/* Extra spacing only for the first line in the three top-casino cards */
.top-casinos-section .casino-card .casino-content .casino-content-item:first-child {
  margin-bottom: 0.5rem;
}

/* Extra spacing above the Wager line (last item) only in top-casino cards */
.top-casinos-section .casino-card .casino-content .casino-content-item:last-child {
  margin-top: 0.5rem;
}

.casino-cta-button {
  background: linear-gradient(90deg, #fd960b 0%, #f08718 100%);
  color: #000000;
  border: none;
  border-radius: 1.5625rem;
  padding: 0.65rem 0.875rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0.3125rem 0.9375rem rgba(253, 150, 11, 0.3);
  position: relative;
  overflow: hidden;
}

.casino-cta-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 ease;
}

.casino-cta-button:hover::before {
  left: 100%;
}

.casino-cta-button:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.5625rem rgba(253, 150, 11, 0.5);
  background: linear-gradient(90deg, #ffb703 0%, #fd960b 100%);
}

.casino-cta-button:active {
  transform: translateY(0);
}

/* Mobile styling for casino-cta-button to match btn-claim */
@media (max-width: 576px) {
  .casino-cta-button {
    background: linear-gradient(90deg, #FF6B35 0%, #F7931E 100%);
    color: #fff;
    border-radius: 25px;
    padding: 15px 20px;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }
  
  .casino-cta-button::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M15.0102 3.39975L19.7695 7.60782C20.6566 8.39207 21.3816 9.03306 21.8774 9.61267C22.395 10.2176 22.75 10.8531 22.75 11.6327C22.75 12.4122 22.395 13.0477 21.8774 13.6527C21.3816 14.2323 20.6566 14.8733 19.7696 15.6575L15.0101 19.8656C14.6238 20.2073 14.2737 20.5169 13.974 20.7137C13.6785 20.9078 13.184 21.1599 12.6363 20.9153C12.0868 20.6698 11.9466 20.1315 11.8959 19.7815C11.8446 19.4273 11.8446 18.961 11.8447 18.4471L11.8447 16.4191C10.0727 16.5216 8.26985 16.9819 6.69743 17.744C4.89831 18.616 3.45132 19.8572 2.66328 21.3502C2.50236 21.6551 2.15431 21.811 1.81967 21.7281C1.48503 21.6452 1.25 21.3449 1.25 21.0001C1.25 15.4966 2.86837 11.9338 5.16167 9.75118C7.20044 7.81083 9.69493 7.03571 11.8447 6.89302V4.87269C11.8447 4.85449 11.8447 4.83634 11.8447 4.81825C11.8446 4.30437 11.8446 3.83799 11.8959 3.48381C11.9466 3.13387 12.0868 2.59554 12.6363 2.35008C13.184 2.10545 13.6785 2.35755 13.974 2.55163C14.2738 2.74848 14.6238 3.05806 15.0102 3.39975ZM13.3571 3.95726C13.5307 4.09508 13.7528 4.29022 14.0572 4.5594L18.7333 8.69388C19.6735 9.5251 20.3181 10.0974 20.7376 10.5878C21.1434 11.0621 21.25 11.3606 21.25 11.6327C21.25 11.9048 21.1434 12.2033 20.7376 12.6776C20.3181 13.168 19.6735 13.7402 18.7333 14.5715L14.0572 18.7059C13.7528 18.9751 13.5307 19.1703 13.3571 19.3081C13.3456 19.0884 13.3447 18.7952 13.3447 18.3926V15.6473C13.3447 15.2331 13.0089 14.8973 12.5947 14.8973C10.3638 14.8973 8.04463 15.4242 6.04321 16.3942C4.85692 16.9692 3.76443 17.709 2.86794 18.6031C3.26004 14.8062 4.58671 12.3691 6.19578 10.8377C8.13314 8.9939 10.5792 8.36804 12.5947 8.36804C13.0089 8.36804 13.3447 8.03226 13.3447 7.61804V4.87269C13.3447 4.47017 13.3456 4.17694 13.3571 3.95726Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
  }
  
  .casino-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
    background: linear-gradient(90deg, #FF6B35 0%, #F7931E 100%);
  }
  
  .casino-cta-button::before {
    display: none;
  }
}

/* Card Variants */
.card-orange .casino-content-orange .casino-content-item:first-child {
  color: #ff8c42;
}

.card-teal .casino-content .casino-content-item:first-child {
  color: #20b2aa;
}

/* Responsive Design */
@media (max-width: 75rem) {
  .casinos-flex-container {
    gap: 1.25rem;
    max-width: 50rem;
  }
  
  .casino-card {
    width: 15.625rem;
    height: 21.875rem;
  }
  
  .card-orange {
    height: 26.25rem !important;
  }
  
  .casino-card-content {
    padding: 2.5rem 1.75rem 1.75rem 1.75rem;
  }
  
  .casino-logo {
    width: 8rem;
    height: 3.25rem;
  }
  
  .casino-content-item {
    font-size: 0.75rem;
  }
  
  .casino-content-item:first-child {
    font-size: 0.875rem;
  }
  
  .casino-cta-button {
    padding: 0.625rem 1.5rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 62rem) {
  .casinos-flex-container {
    gap: 1.25rem;
    max-width: 43.75rem;
  }
  
  .casino-card {
    width: 13.75rem;
    height: 19.25rem;
  }
  
  .card-orange {
    height: 23.125rem !important;
  }
  
  .casino-card-content {
    padding: 2.25rem 1.5rem 1.5rem 1.5rem;
  }
  
  .casino-logo {
    width: 7rem;
    height: 2.75rem;
  }
  
  .casino-content-item {
    font-size: 0.6875rem;
  }
  
  .casino-content-item:first-child {
    font-size: 0.8125rem;
  }
  
  .casino-cta-button {
    padding: 0.5rem 1.25rem;
    font-size: 0.6875rem;
  }
}

@media (max-width: 53.125rem) {
  .casinos-flex-container {
    flex-wrap: wrap;
    gap: 1.5625rem;
    max-width: 37.5rem;
  }
  /* Reset offsets on small screens where cards wrap */
  .casinos-flex-container .casino-card:first-child,
  .casinos-flex-container .card-teal {
    margin-top: 0;
  }
  
  .casino-card {
    width: 17.5rem;
    height: 24.5rem;
  }
  
  .card-orange {
    height: 29.375rem !important;
  }
  
  .casino-card-content {
    padding: 3rem 2rem 2rem 2rem;
  }
  
  .casino-logo {
    width: 9rem;
    height: 3.75rem;
  }
  
  .casino-content-item {
    font-size: 0.8125rem;
  }
  
  .casino-content-item:first-child {
    font-size: 0.9375rem;
  }
  
  .casino-cta-button {
    padding: 0.6875rem 1.625rem;
    font-size: 0.8125rem;
  }
}


/* ===== Intro entrance animations (desktop) ===== */
@keyframes cardInLeft {
  0% { opacity: 0; transform: translateX(-3.125rem) translateY(0.5rem) scale(0.96) rotate(-1.5deg); filter: blur(2px); }
  60% { opacity: 1; transform: translateX(0.25rem) translateY(0) scale(1.02) rotate(0.25deg); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1) rotate(0); }
}

@keyframes cardInCenter {
  0% { opacity: 0; transform: translateY(2rem) scale(0.9); filter: blur(3px); }
  70% { opacity: 1; transform: translateY(-0.25rem) scale(1.04); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Center card spin variant */
@keyframes cardInCenterSpin {
  0% { opacity: 0; transform: translateY(1.5rem) scale(0.88) rotateY(-720deg); filter: blur(2px); }
  55% { opacity: 1; transform: translateY(-0.35rem) scale(1.08) rotateY(-20deg); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateY(0deg); }
}

@keyframes cardInRight {
  0% { opacity: 0; transform: translateX(3.125rem) translateY(0.5rem) scale(0.96) rotate(1.5deg); filter: blur(2px); }
  60% { opacity: 1; transform: translateX(-0.25rem) translateY(0) scale(1.02) rotate(-0.25deg); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1) rotate(0); }
}

/* Mobile fade-up variant */
@keyframes cardInUp {
  0% { opacity: 0; transform: translateY(2rem) scale(0.96); filter: blur(2px); }
  60% { opacity: 1; transform: translateY(-0.25rem) scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Start state + sequence (only while parent has .intro-animate) */
.top-casinos-section.intro-animate .casinos-flex-container .casino-card[data-rank] .casino-card-inner {
  opacity: 0;
  transform: translateY(1rem) scale(0.95) rotateY(15deg);
  filter: blur(2px);
}

/* Sequence: No.1 (center)  No.2 (left)  No.3 (right) */
.top-casinos-section.intro-animate .casinos-flex-container .casino-card[data-rank="1"] .casino-card-inner {
  z-index: 5;
  will-change: transform, opacity, filter;
  animation: cardInCenterSpin 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}
.top-casinos-section.intro-animate .casinos-flex-container .casino-card[data-rank="2"] .casino-card-inner {
  z-index: 4;
  will-change: transform, opacity, filter;
  animation: cardInLeft 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
}
.top-casinos-section.intro-animate .casinos-flex-container .casino-card[data-rank="3"] .casino-card-inner {
  z-index: 3;
  will-change: transform, opacity, filter;
  animation: cardInRight 0.85s cubic-bezier(0.22, 1, 0.36, 1) 2.15s both;
}

/* (Kein explizites Abschalten mehr n├Âtig ÔÇô Idle startet nur unter .intro-finished) */

@media (max-width: 48rem) {
  /* On mobile, idle-animate the first card (top of stack) and disable center-card idle animation */
  /* Mobile: Keine Idle-/Auto-Animationen */
  .top-casinos-section .casinos-flex-container .casino-card .casino-card-inner {
    animation: none !important;
    transition: none !important;
  }
  .top-casinos-section .casinos-flex-container .casino-card:hover .casino-card-inner {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Use fade-up entrance for all three on mobile, with staggered delays */
  .top-casinos-section.intro-animate .casinos-flex-container .casino-card .casino-card-inner {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.98);
    filter: blur(2px);
  }
  /* Mobile order: No.1 (center)  No.2 (first/left)  No.3 (right) */
  .top-casinos-section.intro-animate .casinos-flex-container .casino-card[data-rank="1"] .casino-card-inner {
    z-index: 5;
    will-change: transform, opacity, filter;
    animation: cardInCenterSpin 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
  }
  .top-casinos-section.intro-animate .casinos-flex-container .casino-card[data-rank="2"] .casino-card-inner {
    z-index: 4;
    will-change: transform, opacity, filter;
    animation: cardInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.15s both;
  }
  .top-casinos-section.intro-animate .casinos-flex-container .casino-card[data-rank="3"] .casino-card-inner {
    z-index: 3;
    will-change: transform, opacity, filter;
    animation: cardInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.75s both;
  }

  /* Kein Suppress n├Âtig ÔÇô siehe intro-finished Gating */

  .top-casinos-section {
    padding: 2.5rem 0.9375rem;
  }
  
  .casinos-flex-container {
    flex-direction: column;
    gap: 1.5625rem;
    max-width: 100%;
  }
  
  .casino-card {
    width: 30rem;
    height: 26.25rem;
  }
  
  .card-orange {
    height: 31.5rem !important;
  }
  
  .casino-card-content {
    padding: 3.25rem 2.25rem 2.25rem 2.25rem;
  }
  
  .casino-logo {
    width: 10rem;
    height: 4rem;
  }
  
  .casino-content-item {
    font-size: 0.875rem;
  }
  
  .casino-content-item:first-child {
    font-size: 1rem;
  }
  
  .casino-cta-button {
    background: linear-gradient(180deg, #ff4444 0%, #cc0000 50%, #990000 100%);
    color: #ffffff;
    border: 0.125rem solid #ff0000;
    border-radius: 0.5rem;
    padding: 0.875rem 2rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 0.75rem rgba(255, 0, 0, 0.4), inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.2);
    text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 12rem;
  }
  
  .casino-cta-button:hover {
    background: linear-gradient(180deg, #ff5555 0%, #dd0000 50%, #aa0000 100%);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1rem rgba(255, 0, 0, 0.6), inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.3);
  }
  
  .casino-cta-button:active {
    transform: translateY(0);
    box-shadow: 0 0.125rem 0.5rem rgba(255, 0, 0, 0.4), inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
  }
  
  .top-casinos-title h2 {
    font-size: 2.5rem;
  }
  
  /* Switch to mobile frames on tablet and mobile */
  .desktop-frame {
    display: none;
  }
  
  .mobile-frame {
    display: block;
    opacity: 0.8;
  }
  
  /* Mobile content adjustments */
  .casino-card-content {
    padding: 2.5rem 2rem 2rem 2rem;
    background: transparent;
    z-index: 4;
  }
  
  .casino-content {
    gap: 0.75rem;
  }
  
  .casino-content-item {
    color: #ffd700;
    font-weight: 600;
  }
  
  .casino-content-item:first-child {
    color: #ffd700;
    font-size: 1.125rem;
    font-weight: 700;
  }
  
  /* Card-specific mobile styling */
  .casino-card:nth-child(1) .casino-content-item {
    color: #ffd700;
  }
  
  .casino-card:nth-child(1) .casino-content-item:first-child {
    color: #ffd700;
  }
  
  .card-orange .casino-content-item {
    color: #c0c0c0;
  }
  
  .card-orange .casino-content-item:first-child {
    color: #c0c0c0;
  }
  
  .card-teal .casino-content-item {
    color: #e5e4e2;
  }
  
  .card-teal .casino-content-item:first-child {
    color: #e5e4e2;
  }
}

/* Respect reduced motion for the mobile idle animation target as well */
@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
  /* Reduced motion: Idle wird generell nicht gesetzt (kein Selektor mit intro-finished) */
}

/* Reduced motion: disable intro animations entirely */
@media (prefers-reduced-motion: reduce) {
  .top-casinos-section.intro-animate .casinos-flex-container .casino-card .casino-card-inner {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

@media (max-width: 30rem) {
  .casino-card {
    width: 85vw !important;
    max-width: 27rem !important;
    height: 17rem !important;
    border: 0.1875rem solid #ffd700 !important;
  }
  
  /* First card - Golden border */
  .casino-card:nth-child(1) {
    border: 0.1875rem solid #cca700 !important;
    box-shadow: 0 0 1.5rem rgba(255, 215, 0, 0.4), inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Second card - Silver border */
  .card-orange {
    height: 18rem !important;
    border: 0.1875rem solid #9695a2 !important;
    box-shadow: 0 0 1.5rem rgba(192, 192, 192, 0.4), inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Third card - Platinum border */
  .card-teal {
    height: 17rem !important;
    border: 0.1875rem solid #994f2d !important;
    box-shadow: 0 0 1.5rem rgba(229, 228, 226, 0.4), inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1) !important;
  }
  
  .casino-card-content {
    padding: 1.25rem 1.75rem 0.75rem 1.75rem;
    background: transparent;
    z-index: 4;
  }
  
  /* Mobile frame positioning for small screens */
  .mobile-frame {
    position: absolute;
    top: -1rem;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 1;
    pointer-events: none;
    object-fit: contain;
    object-position: top center;
  }
  
  .casino-logo {
    width: 8rem;
    height: 3.25rem;
  }
  
  .casino-content-item {
    font-size: 0.75rem;
  }
  
  .casino-content-item:first-child {
    font-size: 0.875rem;
  }
  
  .casino-cta-button {
    background: linear-gradient(180deg, #ff4444 0%, #cc0000 50%, #990000 100%);
    color: #ffffff;
    border: 0.125rem solid #ff0000;
    border-radius: 0.5rem;
           padding: 0.75rem 3.99rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 0.75rem rgba(255, 0, 0, 0.4), inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.2);
    text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 16rem;
  }
  
  .top-casinos-title h2 {
    font-size: 2rem;
  }
  
  /* Switch to mobile frames on mobile devices */
  .desktop-frame {
    display: none;
  }
  
  .mobile-frame {
    display: block;
    opacity: 0.8;
  }
  
  /* Small mobile content adjustments - already handled above */
  
  .casino-content {
    gap: 0.625rem;
  }
  
  .casino-content-item {
    color: #ffd700;
    font-weight: 600;
  }
  
  .casino-content-item:first-child {
    color: #ffd700;
    font-weight: 700;
  }
  
  /* Card-specific mobile styling for small screens */
  .casino-card:nth-child(1) .casino-content-item {
    color: #ffd700;
  }
  
  .casino-card:nth-child(1) .casino-content-item:first-child {
    color: #ffd700;
  }
  
  .card-orange .casino-content-item {
    color: #c0c0c0;
  }
  
  .card-orange .casino-content-item:first-child {
    color: #c0c0c0;
  }
  
  .card-teal .casino-content-item {
    color: #e5e4e2;
  }
  
  .card-teal .casino-content-item:first-child {
    color: #e5e4e2;
  }
}



/* Casino enhanced CSS here  */

/* Enhanced Casino Table Row Styles with Creative Colors and Animations */

/* Base Casino Row Enhancements */
.casino-table-row1, .casino-table-row, .casino-table-row3 {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0.9375rem;
    position: relative;
    overflow: hidden;
    }
    
    /* Container spacing for casino rows */
    .container-fluid.px-3.px-lg-5.py-4 {
    padding-top: 0rem !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
    }
    
    /* Individual row container spacing */
    .position-relative.mb-3.sorted-element.tagged-row.new-row {
    margin-bottom: 0.0625rem !important;
    }
    
    /* Row 1 - Gold Theme (GIVEAWAY) */
    .casino-table-row1 {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    border: 0.125rem solid transparent;
    background-clip: padding-box;
    }
    
    .casino-table-row1:hover {
    transform: translateY(-0.5rem) scale(1.02);
    box-shadow: 
      0 1.25rem 2.5rem rgba(255, 215, 0, 0.3),
      0 0 1.875rem rgba(255, 215, 0, 0.2),
      inset 0 0.0625rem 0 rgba(255, 215, 0, 0.1);
    border-color: #FFD700;
    background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 50%, #2d2d2d 100%);
    }
    
    /* Row 2 - Silver/Platinum Theme (EXCLUSIVE) */
    .casino-table-row {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    border: 0.125rem solid transparent;
    background-clip: padding-box;
    }
    
    .casino-table-row:hover {
    transform: translateY(-0.5rem) scale(1.02);
    box-shadow: 
      0 1.25rem 2.5rem rgba(192, 192, 192, 0.3),
      0 0 1.875rem rgba(192, 192, 192, 0.2),
      inset 0 0.0625rem 0 rgba(192, 192, 192, 0.1);
    border-color: #C0C0C0;
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
    }
    
    /* Row 3 - Bronze/Copper Theme (NEW) */
    .casino-table-row3 {
    background: linear-gradient(135deg, #1a1a1a 0%, #252525 50%, #1a1a1a 100%);
    border: 0.125rem solid transparent;
    background-clip: padding-box;
    }
    
    .casino-table-row3:hover {
    transform: translateY(-0.5rem) scale(1.02);
    box-shadow: 
      0 1.25rem 2.5rem rgba(205, 127, 50, 0.3),
      0 0 1.875rem rgba(205, 127, 50, 0.2),
      inset 0 0.0625rem 0 rgba(205, 127, 50, 0.1);
    border-color: #CD7F32;
    background: linear-gradient(135deg, #252525 0%, #353535 50%, #252525 100%);
    }
    
    /* Enhanced Casino Tags */
    .casino-tag1, .casino-tag, .casino-tag3 {
    position: relative;
    padding: 0.5rem 1rem;
    border-radius: 1.5625rem;
    font-size: 0.75rem;
    letter-spacing: 0.0625rem;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.3s ease;
    overflow: hidden;
    }
    
    .casino-tag1::before, .casino-tag::before, .casino-tag3::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;
    }
    
    .casino-tag1:hover::before, .casino-tag:hover::before, .casino-tag3:hover::before {
    left: 100%;
    }
    
    /* Gold Tag (GIVEAWAY) */
    .casino-tag1 {
    background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700);
    color: #000;
    box-shadow: 0 0.25rem 0.9375rem rgba(255, 215, 0, 0.4);
    }
    
    .casino-tag1:hover {
    background: linear-gradient(45deg, #FFA500, #FFD700, #FFA500);
    transform: scale(1.1) rotate(2deg);
    box-shadow: 0 0.375rem 1.25rem rgba(255, 215, 0, 0.6);
    }
    
    /* Silver Tag (EXCLUSIVE) */
    .casino-tag {
    background: linear-gradient(45deg, #C0C0C0, #A0A0A0, #C0C0C0);
    color: #000;
    box-shadow: 0 0.25rem 0.9375rem rgba(192, 192, 192, 0.4);
    }
    
    .casino-tag:hover {
    background: linear-gradient(45deg, #A0A0A0, #C0C0C0, #A0A0A0);
    transform: scale(1.1) rotate(-2deg);
    box-shadow: 0 0.375rem 1.25rem rgba(192, 192, 192, 0.6);
    }
    
    /* Bronze Tag (NEW) */
    .casino-tag3 {
    background: linear-gradient(45deg, #CD7F32, #B8860B, #CD7F32);
    color: #fff;
    box-shadow: 0 0.25rem 0.9375rem rgba(205, 127, 50, 0.4);
    }
    
    .casino-tag3:hover {
    background: linear-gradient(45deg, #B8860B, #CD7F32, #B8860B);
    transform: scale(1.1) rotate(2deg);
    box-shadow: 0 0.375rem 1.25rem rgba(205, 127, 50, 0.6);
    }
    
    /* Enhanced Sortable Values */
    .sortable-values-gold, .sortable-values {
    transition: all 0.3s ease;
    border-radius: 0.625rem;
    padding: 0.9375rem 0.625rem;
    position: relative;
    overflow: hidden;
    }
    
    .sortable-values-gold::before, .sortable-values::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s;
    }
    
    .sortable-values-gold:hover::before, .sortable-values:hover::before {
    transform: translateX(100%);
    }
    
    /* Gold Values Hover */
    .sortable-values-gold:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-0.1875rem);
    box-shadow: 0 0.5rem 1.5625rem rgba(255, 215, 0, 0.2);
    }
    
    .sortable-values-gold:hover .font-secondary {
    color: #FFD700 !important;
    text-shadow: 0 0 0.625rem rgba(255, 215, 0, 0.5);
    }
    
    /* Silver Values Hover */
    .sortable-values:hover {
    background: rgba(192, 192, 192, 0.1);
    transform: translateY(-0.1875rem);
    box-shadow: 0 0.5rem 1.5625rem rgba(192, 192, 192, 0.2);
    }
    
    .sortable-values:hover .font-secondary {
    color: #C0C0C0 !important;
    text-shadow: 0 0 0.625rem rgba(192, 192, 192, 0.5);
    }
    
    /* Enhanced CTA Button */
    .cta-black-button {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 3.125rem;
    position: relative;
    overflow: hidden;
    }
    
    .cta-black-button::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;
    z-index: 1;
    }
    
    .cta-black-button:hover::before {
    left: 100%;
    }
    
    .cta-black-button:hover {
    transform: translateY(-0.3125rem) scale(1.05);
    box-shadow: 
      0 0.9375rem 2.1875rem rgba(0, 0, 0, 0.3),
      0 0 1.25rem rgba(255, 255, 255, 0.1);
    }
    
    /* Row-specific CTA button colors */
    .casino-table-row1 .cta-black-button:hover {
    box-shadow: 
      0 0.9375rem 2.1875rem rgba(255, 215, 0, 0.3),
      0 0 1.25rem rgba(255, 215, 0, 0.2);
    }
    
    .casino-table-row .cta-black-button:hover {
    box-shadow: 
      0 0.9375rem 2.1875rem rgba(192, 192, 192, 0.3),
      0 0 1.25rem rgba(192, 192, 192, 0.2);
    }
    
    .casino-table-row3 .cta-black-button:hover {
    box-shadow: 
      0 0.9375rem 2.1875rem rgba(205, 127, 50, 0.3),
      0 0 1.25rem rgba(205, 127, 50, 0.2);
    }
    
    /* Enhanced SVG Icons */
    .cta-black-button svg {
    transition: all 0.3s ease;
    }
    
    .cta-black-button:hover svg {
    transform: translateX(0.3125rem) scale(1.1);
    }
    
    .casino-table-row1 .cta-black-button:hover svg path {
    fill: #FFD700 !important;
    filter: drop-shadow(0 0 0.3125rem rgba(255, 215, 0, 0.5));
    }
    
    .casino-table-row .cta-black-button:hover svg path {
    fill: #C0C0C0 !important;
    filter: drop-shadow(0 0 0.3125rem rgba(192, 192, 192, 0.5));
    }
    
    .casino-table-row3 .cta-black-button:hover svg path {
    fill: #CD7F32 !important;
    filter: drop-shadow(0 0 0.3125rem rgba(205, 127, 50, 0.5));
    }
    
    /* Rank Number Enhancements */
    .rank-container span {
    transition: all 0.3s ease;
    }
    
    .casino-table-row1:hover .rank-container span {
    color: #FFD700 !important;
    text-shadow: 0 0 0.9375rem rgba(255, 215, 0, 0.7);
    transform: scale(1.1);
    }
    
    .casino-table-row:hover .rank-container span {
    color: #C0C0C0 !important;
    text-shadow: 0 0 0.9375rem rgba(192, 192, 192, 0.7);
    transform: scale(1.1);
    }
    
    .casino-table-row3:hover .rank-container span {
    color: #CD7F32 !important;
    text-shadow: 0 0 0.9375rem rgba(205, 127, 50, 0.7);
    transform: scale(1.1);
    }
    
    /* Logo Image Enhancements */
    .casino-table-row1 img, .casino-table-row img, .casino-table-row3 img {
    transition: all 0.3s ease;
    filter: brightness(0.9);
    }
    
    .casino-table-row1:hover img {
    filter: brightness(1.1) drop-shadow(0 0 0.625rem rgba(255, 215, 0, 0.3));
    transform: scale(1.05);
    }
    
    .casino-table-row:hover img {
    filter: brightness(1.1) drop-shadow(0 0 0.625rem rgba(192, 192, 192, 0.3));
    transform: scale(1.05);
    }
    
    .casino-table-row3:hover img {
    filter: brightness(1.1) drop-shadow(0 0 0.625rem rgba(205, 127, 50, 0.3));
    transform: scale(1.05);
    }
    
    /* Pulsing Animation for Fire Elements */
    @keyframes pulse-gold {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
    }
    
    @keyframes pulse-silver {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.9; }
    }
    
    @keyframes pulse-bronze {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.8; }
    }
    
    .casino-table-row1:hover .fire-element-shadow-gold {
    animation: pulse-gold 2s infinite;
    }
    
    .casino-table-row:hover .fire-element-shadow {
    animation: pulse-silver 2s infinite;
    }
    
    .casino-table-row3:hover .fire-element-shadow-silver {
    animation: pulse-bronze 2s infinite;
    }
    
    /* Floating Animation */
    @keyframes float {
    0%, 100% { transform: translateY(0rem); }
    50% { transform: translateY(-0.625rem); }
    }
    
    .casino-table-row1:hover, .casino-table-row:hover, .casino-table-row3:hover {
    animation: float 3s ease-in-out infinite;
    }
    
    /* Comprehensive Mobile Responsiveness */
    @media (max-width: 768px) {
    /* Reduce hover effects for mobile */
    .casino-table-row1:hover, .casino-table-row:hover, .casino-table-row3:hover {
      transform: translateY(-0.125rem) scale(1.005);
      animation: none; /* Disable floating animation on mobile */
    }
    
    .casino-tag1:hover, .casino-tag:hover, .casino-tag3:hover {
      transform: scale(1.02);
    }
    
    /* Fix sortable values spacing and text overlap */
    .sortable-values-gold, .sortable-values {
      padding: 0.5rem 0.3125rem !important;
      margin: 0.125rem 0 !important;
      min-height: 3.75rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    /* Adjust font sizes for mobile */
    .sortable-values-gold .font-size-19rem,
    .sortable-values .font-size-19rem {
      font-size: 0.875rem !important;
      line-height: 1.2 !important;
      margin-bottom: 0.125rem !important;
    }
    
    .value-description {
      font-size: 0.625rem !important;
      line-height: 1.1 !important;
      margin-top: 0.125rem !important;
    }
    
    /* Casino tags mobile adjustments */
    .casino-tag1, .casino-tag, .casino-tag3 {
      padding: 0.375rem 0.75rem !important;
      font-size: 0.625rem !important;
      margin: 0rem 0 !important;
    }
    
    /* CTA Button mobile fixes */
    .cta-black-button {
      margin: 0.625rem 0 !important;
      max-width: 12.5rem !important;
    }
    
    .cta-black-button-text {
      padding: 0.5rem 0.75rem !important;
      font-size: 0.75rem !important;
    }
    
    .cta-black-button svg {
      width: 1.125rem !important;
      height: 1.125rem !important;
    }
    
    /* Row container mobile spacing */
    .casino-table-row1, .casino-table-row, .casino-table-row3 {
      padding: 0.625rem 0.3125rem !important;
      margin: 0.625rem 0 !important;
    }
    
    /* Mobile container spacing adjustments */
    .container-fluid.px-3.px-lg-5.py-4 {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
      margin-bottom: 2rem !important;
    }
    
    /* Mobile individual row spacing */
    .position-relative.mb-3.sorted-element.tagged-row.new-row {
      margin-bottom: 2.5rem !important;
    }
    
    /* Logo adjustments */
    .casino-table-row1 img, .casino-table-row img, .casino-table-row3 img {
      max-width: 6.25rem !important;
      height: auto !important;
    }
    
    /* Casino name text */
    .font-size-12rem {
      font-size: 0.875rem !important;
      line-height: 1.2 !important;
      margin: 0.3125rem 0 !important;
    }
    
    /* Rank numbers mobile */
    .rank-container span {
      font-size: 1.5rem !important;
    }
    }
    
    /* Extra small mobile devices */
    @media (max-width: 480px) {
    /* Further reduce spacing for very small screens */
    .sortable-values-gold, .sortable-values {
      padding: 0.375rem 0.1875rem !important;
      min-height: 3.125rem;
    }
    
    .sortable-values-gold .font-size-19rem,
    .sortable-values .font-size-19rem {
      font-size: 0.75rem !important;
    }
    
    .value-description {
      font-size: 0.5625rem !important;
    }
    
    .casino-tag1, .casino-tag, .casino-tag3 {
      padding: 0.25rem 0.5rem !important;
      font-size: 0.5625rem !important;
    }
    
    .cta-black-button-text {
      padding: 0.375rem 0.625rem !important;
      font-size: 0.6875rem !important;
    }
    
    .casino-table-row1 img, .casino-table-row img, .casino-table-row3 img {
      max-width: 9.375rem !important;
    }
    
    .font-size-12rem {
      font-size: 0.75rem !important;
    }
    
    /* Disable complex animations on very small screens */
    .casino-table-row1:hover, .casino-table-row:hover, .casino-table-row3:hover {
      transform: none !important;
      box-shadow: none !important;
    }
    
    /* Extra small mobile spacing */
    .container-fluid.px-3.px-lg-5.py-4 {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
      margin-bottom: 1.5rem !important;
    }
    
    .position-relative.mb-3.sorted-element.tagged-row.new-row {
      margin-bottom: 2rem !important;
    }
    }
    
    /* Landscape mobile orientation */
    @media (max-width: 768px) and (orientation: landscape) {
    .sortable-values-gold, .sortable-values {
      min-height: 2.8125rem;
      padding: 0.3125rem 0.1875rem !important;
    }
    
    .sortable-values-gold .font-size-19rem,
    .sortable-values .font-size-19rem {
      font-size: 0.8125rem !important;
    }
    
    .casino-table-row1, .casino-table-row, .casino-table-row3 {
      padding: 0.5rem 0.3125rem !important;
    }
    }
    
    /* =================== TOP CASINOS SECTION STYLES =================== */
    
    .top-casinos-section {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    padding: 3.75rem 0;
    position: relative;
    overflow: hidden;
    }
    
    .top-casinos-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.05) 0%, transparent 70%);
    pointer-events: none;
    }
    
    .top-casinos-title {
    text-align: center;
    margin-bottom: 3.125rem;
    position: relative;
    z-index: 2;
    }
    
    .top-casinos-title h2 {
    font-family: 'Bebas Neue', cursive;
    font-size: 4rem;
    font-weight: 700;
    background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 1.875rem rgba(255, 215, 0, 0.3);
    letter-spacing: 0.1875rem;
    margin: 0;
    }
    
    .casino-content-orange{
    padding-left:0.625rem;
    padding-right: 0.625rem;
    }
    .casinos-flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    max-width: 87.5rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    }