body {
        background: url("../bg/Matrix-Ai-Bg.webp") no-repeat fixed;
        background-size: cover;
      }
      .slick-slide {
        width: 93px !important;
      }
      .clock {
        position: relative;
        font-family: monaco, consolas, "courier new", monospace;
        font-size: 3.5rem;
        line-height: 1.1;
      }
      .game-list-rtp {
        height: 2rem;
      }

      .game-card .card-body {
        height: 2rem;
        overflow: hidden;
      }

      .game-card .card-title {
        font-size: 0.8rem;
      }

      .loading-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
      }

      .loading-text {
        margin-top: 10px;
        font-weight: bold;
      }

      @media (max-width: 767px) {
        .clock {
          font-size: 2rem;
        }
        .provider-slider {
          max-height: 145px;
        }
        .game-list-rtp {
          height: 1rem;
        }
        .game-card .card-body {
          height: 2rem;
          overflow: hidden;
        }

        .game-card .card-title {
          font-size: 0.6rem;
        }
      }
    
html { scroll-behavior: smooth; }

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.3s ease-in-out forwards;
}

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

@keyframes zoomIn {
        from {
          transform: scale(0.8);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }

.rtp-very-low { background-color: #c0392b; color: #fff; }
.rtp-low { background-color: #e67e22; color: #fff; }
.rtp-medium { background-color: #f1c40f; color: #000; }
.rtp-high { background-color: #3498db; color: #fff; }
.rtp-top { background-color: #27ae60; color: #fff; font-weight: bold; }