/* =========================================
   1. Reset & Variables
   ========================================= */
:root {
  /* Color Palette */
  --primary: #ff5e00;       /* Bright Orange for accents/buttons */
  --primary-hover: #ff7b2e;
  --secondary: #1a1a2e;     /* Deep Blue/Black for background */
  --secondary-light: #252540;
  --secondary-lighter: #323250;
  --text-main: #e0e0e0;
  --text-muted: #a0a0b0;
  --text-light: #ffffff;
  
  --accent-green: #00d084;
  --accent-blue: #2d9cdb;
  --accent-red: #eb5757;

  /* Spacing */
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 2rem;
  --gap-lg: 4rem;
  
  /* Typography */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.25rem;
  --fs-lg: clamp(1.5rem, 4vw, 2.5rem);
  --fs-xl: clamp(2rem, 5vw, 3.5rem);

  /* Effects */
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 15px rgba(255, 94, 0, 0.3);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  
  /* Transitions */
  --trans-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --trans-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--secondary);
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--trans-fast);
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}

/* =========================================
   2. Layout Utilities
   ========================================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

/* =========================================
   3. Header Styling
   ========================================= */
header {
  background: var(--secondary-light);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 100;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  flex-wrap: wrap;
  gap: 1rem;
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Registration Buttons */
.reg-buttons {
  display: flex;
  gap: var(--gap-xs);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--trans-fast);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn i {
  margin-right: 0.5rem;
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-100%);
  transition: transform var(--trans-fast);
  z-index: -1;
}

.btn:hover::after {
  transform: translateX(0);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.btn-green {
  background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
  color: white;
}

.btn-blue {
  background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
  color: white;
}

/* Header Menu */
.header-menu, .main-navigation {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 0.8rem 0;
}

.header-menu ul, .main-navigation ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.header-menu a, .main-navigation a {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-menu a:hover, .main-navigation a:hover {
  color: var(--primary);
}

.main-navigation {
  background: var(--secondary-lighter);
}

.main-navigation a {
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--text-light);
}

.icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-size: contain;
  background-repeat: no-repeat;
  filter: grayscale(1);
  transition: filter var(--trans-fast);
}

.main-navigation a:hover .icon {
  filter: grayscale(0);
}

/* Mobile Nav Toggle */
.mob-nav-btn {
  display: none; /* Hidden on desktop */
  width: 30px;
  height: 24px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.mob-nav-btn span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--text-light);
  border-radius: 2px;
}

.mob-navigation {
  display: none; /* Hidden by default */
}

/* =========================================
   4. Slider Section (Simulated Grid)
   ========================================= */
.main-slider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin: var(--gap-md) 0;
}

.slider-item {
  height: 250px;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.slider-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
  z-index: 1;
}

.slider-text {
  position: relative;
  z-index: 2;
  color: white;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.banner-btn {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* =========================================
   5. Counters (Jackpot/Winners)
   ========================================= */
.header-counters {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: var(--gap-md) 0;
  flex-wrap: wrap;
}

.winners, .jp-container {
  flex: 1;
  min-width: 300px;
  background: var(--secondary-lighter);
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}

.counter-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--primary);
  background: #000;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
  margin-top: 0.5rem;
}

.count {
  width: 0.8em;
  text-align: center;
}

/* =========================================
   6. Main Content - Slots Grid
   ========================================= */
.main {
  padding: var(--gap-md) 0;
}

.slots-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--gap-sm);
  margin-bottom: var(--gap-lg);
}

.slot-item {
  background: var(--secondary-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
  position: relative;
  border: 1px solid rgba(255,255,255,0.05);
}

.slot-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5), var(--shadow-glow);
  z-index: 2;
}

.slot-logo {
  height: 120px;
  background-color: #000; /* Placeholder for missing images */
  background-image: linear-gradient(45deg, #111 25%, #222 25%, #222 50%, #111 50%, #111 75%, #222 75%, #222 100%);
  background-size: 20px 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover overlay with buttons */
.btns-wrap {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity var(--trans-fast);
  backdrop-filter: blur(2px);
}

.slot-item:hover .btns-wrap {
  opacity: 1;
}

.slot-name {
  padding: 0.8rem 0.5rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-main);
  background: var(--secondary-lighter);
}

.btn-play {
  background: var(--primary);
  color: white;
  padding: 0.5rem 1.2rem;
  font-size: 0.8rem;
}

.btn-play:hover {
  background: var(--primary-hover);
}

.btn-grey {
  background: rgba(255,255,255,0.2);
  color: white;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  transition: background var(--trans-fast);
}

.btn-grey:hover {
  background: rgba(255,255,255,0.3);
}

/* =========================================
   7. SEO Text Content
   ========================================= */
.content-text {
  background: var(--secondary-light);
  padding: var(--gap-md);
  border-radius: var(--radius-lg);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

.content-text h1, 
.content-text h2, 
.content-text h3, 
.content-text h4 {
  color: var(--text-light);
  margin-bottom: 1rem;
  margin-top: 1.5rem;
  line-height: 1.3;
}

.content-text h1 {
  font-size: var(--fs-lg);
}

.content-text p {
  margin-bottom: 1rem;
  color: var(--text-muted);
}

/* Table Styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: var(--secondary-lighter);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

table td, table th {
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.05);
  text-align: left;
  color: var(--text-main);
}

table tr:nth-child(even) {
  background: rgba(0,0,0,0.1);
}

table tr:hover {
  background: rgba(255,255,255,0.02);
}

/* TOC Styling */
.toc_container {
  background: var(--secondary-lighter);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary);
  margin-bottom: 2rem;
}

.toc_title {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-light);
  margin-bottom: 1rem;
}

.toc_list li {
  margin-bottom: 0.5rem;
}

.toc_list a, .toc_list span {
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--trans-fast);
}

.toc_list a:hover, .toc_list span:hover {
  text-decoration-color: var(--primary);
}

/* FAQ Accordion */
.faq-block {
  margin-top: 2rem;
}

.accord-block {
  margin-bottom: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--secondary-lighter);
  overflow: hidden;
}

.accord-block-header {
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--trans-fast);
}

.accord-block-header:hover {
  background: rgba(255,255,255,0.05);
}

.accord-block-header::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--primary);
}

.accord-block-content {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--trans-smooth), padding var(--trans-smooth);
}

/* Hover effect to simulate open state (since no JS provided for FAQ) */
.accord-block:hover .accord-block-content {
  max-height: 200px;
  padding: 1rem 1.5rem;
}

.accord-block:hover .accord-block-header::after {
  content: '-';
}

/* =========================================
   8. Footer
   ========================================= */
.footer {
  background: #0f0f1a;
  padding: var(--gap-lg) 0 2rem;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-top-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-top-links a {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-top-links a:hover {
  color: var(--primary);
}

.paysys, .awards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Simulated placeholders for missing footer images */
.paysys::before, .awards::before {
  content: 'Partner Logos Area';
  color: rgba(255,255,255,0.1);
  font-size: 0.8rem;
  border: 1px dashed rgba(255,255,255,0.1);
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.copyright {
  text-align: center;
  color: rgba(255,255,255,0.3);
  font-size: 0.8rem;
}

.dmca-badge img {
  vertical-align: middle;
}

/* =========================================
   9. Promo Overlay Override (Micro-adjustments)
   ========================================= */
/* The inline styles in HTML are marked !important, 
   so we can't easily override them without very specific selectors or more !importants.
   However, we can add some polish to what is exposed via classes. */
   
#promo-overlay .promoX_9b2f_modal {
  /* Adding a subtle pulse animation */
  animation: modalPulse 4s infinite ease-in-out;
}

@keyframes modalPulse {
  0% { box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 30px rgba(0,170,255,0.28); }
  50% { box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 40px rgba(0,170,255,0.5); }
  100% { box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 30px rgba(0,170,255,0.28); }
}

/* =========================================
   10. Media Queries (Responsive)
   ========================================= */
@media (max-width: 992px) {
  .slots-list {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

@media (max-width: 768px) {
  /* Header adjustments */
  .top-header {
    justify-content: space-between;
    padding: 0.5rem 0;
  }

  .header-menu, .main-navigation {
    display: none; /* Hide desktop navs */
  }

  .mob-nav-btn {
    display: flex;
    margin-right: 1rem;
  }
  
  .reg-buttons {
    display: none; /* Often moved inside mob menu on real mobile sites */
  }
  
  /* Show mob menu when active (requires JS toggling a class, assuming structure) */
  /* For purely CSS fallback: */
  .mob-navigation {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--secondary-lighter);
    padding: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    z-index: 99;
    transform: translateY(-150%); /* Hidden state */
    transition: transform var(--trans-smooth);
    opacity: 0;
    pointer-events: none;
  }

  /* Simulate open state via hover on button for demo purposes */
  .mob-nav-btn:hover + .mob-navigation,
  .mob-navigation:hover {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mob-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .mob-navigation a {
    display: block;
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--text-light);
  }

  /* Slider */
  .main-slider {
    grid-template-columns: 1fr;
  }
  
  .slider-item {
    height: 180px;
  }

  /* Counters */
  .header-counters {
    flex-direction: column;
  }

  /* Text Content */
  .content-text {
    padding: 1rem;
  }
  
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .slots-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  
  .slot-name {
    font-size: 0.75rem;
    padding: 0.5rem;
  }
  
  .logo {
    font-size: 1.2rem;
  }
}