/* YEP CASINO - STYLESHEET - COMPACT VERSION */
:root{
  --color-bg-primary:#0a0a0f;
  --color-bg-secondary:#12121a;
  --color-bg-tertiary:#1a1a25;
  --color-bg-hover:#22222f;
  --color-accent-primary:#e91e63;
  --color-accent-secondary:#ff4081;
  --color-accent-glow:rgba(233,30,99,0.3);
  --color-text-primary:#ffffff;
  --color-text-secondary:#b0b0c0;
  --color-text-muted:#6b6b80;
  --color-warning:#ff9800;
  --color-border:rgba(255,255,255,0.1);
  --color-border-accent:rgba(233,30,99,0.3);
  --gradient-primary:linear-gradient(135deg,#e91e63 0%,#9c27b0 100%);
  --gradient-bg:linear-gradient(180deg,#0a0a0f 0%,#12121a 100%);
  --gradient-card:linear-gradient(145deg,#1a1a25 0%,#12121a 100%);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.3);
  --shadow-md:0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow:0 0 20px var(--color-accent-glow);
  --space-xs:0.25rem;
  --space-sm:0.5rem;
  --space-md:0.75rem;
  --space-lg:1rem;
  --space-xl:1.25rem;
  --space-2xl:1.5rem;
  --space-3xl:2rem;
  --font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-size-xs:0.75rem;
  --font-size-sm:0.875rem;
  --font-size-base:1rem;
  --font-size-lg:1.125rem;
  --font-size-xl:1.25rem;
  --font-size-2xl:1.5rem;
  --font-size-3xl:2rem;
  --font-size-4xl:2.5rem;
  --line-height-tight:1.2;
  --line-height-normal:1.5;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --transition-fast:150ms ease;
  --transition-normal:250ms ease;
  --z-sticky:1000;
  --z-menu:9999
}
*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0
}
html{
  font-size:16px;
  scroll-behavior:smooth
}
body{
  font-family:var(--font-family);
  font-size:var(--font-size-base);
  line-height:var(--line-height-normal);
  color:var(--color-text-primary);
  background:var(--color-bg-primary);
  background-image:var(--gradient-bg);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased
}
ul,ol{
  list-style:none
}
a{
  color:inherit;
  text-decoration:none;
  transition:color var(--transition-fast)
}
a:hover,a:focus{
  color:var(--color-accent-primary)
}
button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:none
}
img{
  max-width:100%;
  height:auto;
  display:block
}
:focus-visible{
  outline:2px solid var(--color-accent-primary);
  outline-offset:2px
}
h1,h2,h3{
  font-weight:700;
  line-height:var(--line-height-tight);
  color:var(--color-text-primary);
  margin-bottom:var(--space-sm)
}
h1{
  font-size:var(--font-size-4xl);
  font-weight:800;
  background:var(--gradient-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}
h2{
  font-size:var(--font-size-2xl);
  margin-top:var(--space-lg)
}
h3{
  font-size:var(--font-size-xl)
}
p{
  margin-bottom:var(--space-sm);
  color:var(--color-text-secondary)
}
strong{
  font-weight:600;
  color:var(--color-accent-secondary)
}
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--space-md)
}
section{
  padding:var(--space-xl) 0
}
.section-title{
  text-align:center;
  margin-bottom:var(--space-lg);
  font-size:var(--font-size-3xl);
  background:var(--gradient-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-sm) var(--space-lg);
  font-weight:600;
  font-size:var(--font-size-sm);
  text-transform:uppercase;
  letter-spacing:0.5px;
  border-radius:var(--radius-md);
  transition:all var(--transition-normal);
  cursor:pointer;
  border:none
}
.btn--primary{
  background:var(--gradient-primary);
  color:var(--color-text-primary);
  box-shadow:var(--shadow-md),var(--shadow-glow)
}
.btn--primary:hover,.btn--primary:focus{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg),0 0 30px var(--color-accent-glow);
  color:var(--color-text-primary)
}
.btn--accent{
  background:var(--color-accent-primary);
  color:var(--color-text-primary);
  box-shadow:var(--shadow-md)
}
.btn--accent:hover,.btn--accent:focus{
  background:var(--color-accent-secondary);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg),var(--shadow-glow);
  color:var(--color-text-primary)
}
.btn--lg{
  padding:var(--space-md) var(--space-xl);
  font-size:var(--font-size-base)
}
.btn--xl{
  padding:var(--space-lg) var(--space-2xl);
  font-size:var(--font-size-lg)
}
.header{
  position:sticky;
  top:0;
  z-index:var(--z-sticky);
  background:rgba(10,10,15,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border);
  padding:var(--space-sm) 0
}
.header__wrapper{
  position:relative
}
.header__container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-lg);
  position:relative
}
.header__logo{
  flex-shrink:0;
  transition:opacity var(--transition-fast)
}
.header__logo:hover{
  opacity:0.8
}
.header__logo img{
  height:40px;
  width:auto
}
.header__nav{
  display:flex;
  align-items:center;
  gap:var(--space-xl)
}
.header__nav-list{
  display:flex;
  gap:var(--space-lg)
}
.header__nav-link{
  font-weight:500;
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-md);
  transition:all var(--transition-fast)
}
.header__nav-link:hover,.header__nav-link:focus{
  color:var(--color-text-primary);
  background:var(--color-bg-hover)
}
.header__menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  background:var(--color-bg-secondary);
  border-radius:var(--radius-md)
}
.hamburger{
  width:20px;
  height:2px;
  background:var(--color-text-primary);
  position:relative;
  transition:background var(--transition-fast)
}
.hamburger::before,.hamburger::after{
  content:'';
  position:absolute;
  width:20px;
  height:2px;
  background:var(--color-text-primary);
  left:0;
  transition:all var(--transition-fast)
}
.hamburger::before{
  top:-6px
}
.hamburger::after{
  top:6px
}
.header__menu-toggle[aria-expanded="true"] .hamburger{
  background:transparent
}
.header__menu-toggle[aria-expanded="true"] .hamburger::before{
  top:0;
  transform:rotate(45deg)
}
.header__menu-toggle[aria-expanded="true"] .hamburger::after{
  top:0;
  transform:rotate(-45deg)
}
.hero{
  position:relative;
  width:100%
}
.hero__image{
  width:100%;
  height:auto;
  object-fit:cover;
  object-position:center
}
.hero__cta-block{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:rgba(10,10,15,0.9);
  backdrop-filter:blur(12px);
  padding:var(--space-2xl) var(--space-3xl);
  border-radius:var(--radius-xl);
  border:2px solid var(--color-border-accent);
  text-align:center;
  max-width:400px;
  box-shadow:var(--shadow-lg),0 0 40px var(--color-accent-glow);
  animation:fadeInCenter 0.6s ease-out
}
.hero__cta-title{
  font-size:var(--font-size-3xl);
  margin-bottom:var(--space-sm);
  background:var(--gradient-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}
.hero__cta-subtitle{
  font-size:var(--font-size-xl);
  color:var(--color-text-secondary);
  margin-bottom:var(--space-xl)
}
.hero__cta-subtitle strong{
  font-size:var(--font-size-2xl);
  color:var(--color-accent-secondary)
}
.hero__cta-block .btn{
  padding:var(--space-lg) var(--space-3xl);
  font-size:var(--font-size-lg);
  font-weight:700
}
.slots{
  background:var(--color-bg-secondary);
  padding:var(--space-xl) 0
}
.slots__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--space-sm);
  margin-bottom:var(--space-lg)
}
.slots__item{
  display:block;
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:all var(--transition-normal);
  box-shadow:var(--shadow-md)
}
.slots__item:hover,.slots__item:focus{
  transform:translateY(-5px) scale(1.02);
  box-shadow:var(--shadow-lg),var(--shadow-glow)
}
.slots__image{
  width:100%;
  height:auto;
  border-radius:var(--radius-lg);
  transition:transform var(--transition-normal)
}
.slots__item:hover .slots__image{
  transform:scale(1.05)
}
.slots__cta{
  text-align:center
}
.main-content{
  padding:var(--space-xl) 0 var(--space-2xl)
}
.article{
  max-width:900px;
  margin:0 auto
}
.article__title{
  font-size:var(--font-size-3xl);
  margin-bottom:var(--space-lg);
  text-align:center
}
.article__section{
  margin-bottom:var(--space-lg);
  padding-bottom:var(--space-md);
  border-bottom:1px solid var(--color-border)
}
.article__section:last-child{
  border-bottom:none
}
.article__list{
  margin:var(--space-md) 0;
  padding-left:var(--space-md)
}
.article__list li{
  position:relative;
  padding-left:var(--space-lg);
  margin-bottom:var(--space-xs);
  color:var(--color-text-secondary)
}
.article__list li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--color-accent-primary);
  font-weight:700
}
.article__list--numbered{
  counter-reset:list-counter
}
.article__list--numbered li{
  counter-increment:list-counter
}
.article__list--numbered li::before{
  content:counter(list-counter) '.';
  color:var(--color-accent-primary);
  font-weight:700
}
.article__section--cta{
  text-align:center;
  background:var(--gradient-card);
  padding:var(--space-xl);
  border-radius:var(--radius-xl);
  border:1px solid var(--color-border-accent)
}
.article__cta-box{
  margin:var(--space-lg) 0
}
.table-wrapper{
  width:100%;
  overflow-x:auto;
  margin:var(--space-md) 0;
  border-radius:var(--radius-lg);
  background:var(--color-bg-secondary);
  box-shadow:var(--shadow-md)
}
.bonus-table{
  width:100%;
  border-collapse:collapse;
  min-width:600px
}
.bonus-table th,.bonus-table td{
  padding:var(--space-sm);
  text-align:left;
  border-bottom:1px solid var(--color-border)
}
.bonus-table th{
  background:var(--color-bg-tertiary);
  font-weight:600;
  color:var(--color-text-primary);
  font-size:var(--font-size-sm);
  text-transform:uppercase
}
.bonus-table td{
  color:var(--color-text-secondary)
}
.bonus-table tbody tr:hover{
  background:var(--color-bg-hover)
}
.bonus-table tbody tr:last-child td{
  border-bottom:none
}
.footer{
  background:var(--color-bg-secondary);
  border-top:1px solid var(--color-border);
  padding:var(--space-xl) 0 var(--space-md)
}
.footer__section-title{
  font-size:var(--font-size-base);
  color:var(--color-text-secondary);
  margin-bottom:var(--space-md);
  text-align:center
}
.footer__payments{
  margin-bottom:var(--space-xl)
}
.footer__payments-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-sm)
}
.footer__payment-icon{
  height:28px;
  width:auto;
  opacity:0.7;
  transition:all var(--transition-fast);
  filter:grayscale(100%)
}
.footer__payment-icon:hover{
  opacity:1;
  filter:grayscale(0%);
  transform:scale(1.1)
}
.footer__bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-md);
  padding-top:var(--space-lg);
  border-top:1px solid var(--color-border);
  text-align:center
}
.footer__logo img{
  height:35px;
  width:auto;
  opacity:0.8
}
.footer__legal{
  color:var(--color-text-muted);
  font-size:var(--font-size-sm)
}
.footer__legal p{
  margin-bottom:var(--space-xs);
  color:var(--color-text-muted)
}
.footer__disclaimer{
  color:var(--color-warning);
  font-weight:500;
  margin-top:var(--space-xs)
}
.footer__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-sm) var(--space-lg)
}
.footer__link{
  color:var(--color-text-secondary);
  font-size:var(--font-size-sm)
}
.footer__link:hover{
  color:var(--color-accent-primary)
}
@keyframes fadeInCenter{
  from{
    opacity:0;
    transform:translate(-50%,-40%)
  }
  to{
    opacity:1;
    transform:translate(-50%,-50%)
  }
}
@media(max-width:1024px){
  .slots__grid{
    grid-template-columns:repeat(4,1fr)
  }
  .hero__cta-block{
    padding:var(--space-xl) var(--space-2xl);
    max-width:350px
  }
  .hero__cta-title{
    font-size:var(--font-size-2xl)
  }
  .hero__cta-subtitle{
    font-size:var(--font-size-lg)
  }
  .hero__cta-block .btn{
    padding:var(--space-md) var(--space-2xl);
    font-size:var(--font-size-base)
  }
}
@media(max-width:768px){
  h1{
    font-size:var(--font-size-2xl)
  }
  h2{
    font-size:var(--font-size-xl)
  }
  .section-title{
    font-size:var(--font-size-2xl)
  }
  .header__menu-toggle{
    display:flex;
    z-index:10001
  }
  .header__nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    background:#0a0a0f;
    padding:var(--space-md);
    gap:var(--space-sm);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:all var(--transition-normal);
    z-index:10000;
    border-bottom:2px solid var(--color-accent-primary);
    box-shadow:var(--shadow-lg)
  }
  .header__nav.is-active{
    opacity:1;
    visibility:visible;
    transform:translateY(0)
  }
  .header__nav-list{
    flex-direction:column;
    width:100%;
    gap:var(--space-xs)
  }
  .header__nav-link{
    display:block;
    padding:var(--space-sm);
    font-size:var(--font-size-base);
    text-align:center;
    background:var(--color-bg-secondary);
    border-radius:var(--radius-md)
  }
  .header__cta{
    width:100%
  }
  .hero__cta-block{
    position:absolute;
    top:50%;
    left:50%;
    right:auto;
    transform:translate(-50%,-50%);
    width:90%;
    max-width:350px;
    padding:var(--space-xl);
    animation:fadeInCenter 0.6s ease-out
  }
  .hero__cta-title{
    font-size:var(--font-size-2xl)
  }
  .hero__cta-subtitle{
    font-size:var(--font-size-base)
  }
  .hero__cta-subtitle strong{
    font-size:var(--font-size-xl)
  }
  .hero__cta-block .btn{
    padding:var(--space-md) var(--space-xl);
    font-size:var(--font-size-base)
  }
  @keyframes fadeInCenter{
    from{
      opacity:0;
      transform:translate(-50%,-40%)
    }
    to{
      opacity:1;
      transform:translate(-50%,-50%)
    }
  }
  .slots__grid{
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-xs)
  }
  .table-wrapper{
    overflow-x:visible
  }
  .bonus-table{
    min-width:auto
  }
  .bonus-table thead{
    display:none
  }
  .bonus-table tbody tr{
    display:block;
    margin-bottom:var(--space-sm);
    background:var(--color-bg-tertiary);
    border-radius:var(--radius-lg);
    padding:var(--space-sm);
    border:1px solid var(--color-border)
  }
  .bonus-table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:var(--space-xs) 0;
    border-bottom:1px solid var(--color-border)
  }
  .bonus-table td:last-child{
    border-bottom:none
  }
  .bonus-table td::before{
    content:attr(data-label);
    font-weight:600;
    color:var(--color-text-primary);
    font-size:var(--font-size-sm)
  }
  .article__section--cta{
    padding:var(--space-lg)
  }
  .footer__payments-grid{
    gap:var(--space-xs)
  }
  .footer__payment-icon{
    height:22px
  }
}
@media(max-width:480px){
  h1,.article__title{
    font-size:var(--font-size-xl)
  }
  h2{
    font-size:var(--font-size-lg)
  }
  .section-title{
    font-size:var(--font-size-xl)
  }
  .container{
    padding:0 var(--space-sm)
  }
  .hero__cta-block{
    padding:var(--space-lg);
    width:95%
  }
  .hero__cta-title{
    font-size:var(--font-size-xl)
  }
  .hero__cta-subtitle{
    font-size:var(--font-size-sm)
  }
  .hero__cta-subtitle strong{
    font-size:var(--font-size-lg)
  }
  .hero__cta-block .btn{
    padding:var(--space-sm) var(--space-lg);
    font-size:var(--font-size-sm)
  }
  .slots__grid{
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-xs)
  }
  .btn--lg{
    padding:var(--space-xs) var(--space-sm);
    font-size:var(--font-size-sm)
  }
  .btn--xl{
    padding:var(--space-sm) var(--space-md);
    font-size:var(--font-size-base)
  }
  .footer__nav{
    flex-direction:column;
    gap:var(--space-xs)
  }
}
html,body{
  max-width:100%;
  overflow-x:hidden
}
@media(hover:none)and(pointer:coarse){
  .slots__item:hover{
    transform:none
  }
  .btn:hover{
    transform:none
  }
  .footer__payment-icon:hover{
    transform:none;
    filter:grayscale(100%);
    opacity:0.7
  }
}