/*
  New dark theme design system
  - Fonts: Manrope (text), Space Grotesk (display)
  - Palette: Deep navy / indigo / muted purple
  - Class scheme: ui-*, hero--dark, intro-card, deck, casino-card, ui-block
  - Accessibility: high-contrast focus, reduced motion support
*/
:root {
  --bg-0: #06120D;        
  --bg-1: #0B1A13;        
  --bg-2: #10261B;        
  
  --ink-0: #F4F9F2;       
  --ink-1: #B5CBB8;       
  --ink-2: #DDEEDF;       
  
  --brand: #00C851;       
  --brand-strong: #00993E;
  --accent: #FFD43B;      
  --accent-2: #2BD4D4;    
  
  --line: #1B3B2A;        
  --glow: 0 20px 60px rgba(0, 200, 81, 0.25); 
  
  --radius-1: 14px;
  --radius-2: 20px;
  --max: 1180px;
}

/* Base / Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body {
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url('./bg.webp') center center / cover no-repeat;     
  background-attachment: fixed; 
  color: var(--ink-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.shell{max-width:var(--max);margin:0 auto;padding:20px}
.visually-hidden,.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* Focus visible */
:focus{outline:none}
:focus-visible{outline:3px solid rgba(43,212,212,.5);outline-offset:3px;border-radius:10px}

/* Header */
.ui-header{position:sticky;top:0;z-index:60;background:rgba(8,12,23,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.ui-header__inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{display:grid;place-items:center}
.logo--badge{width:48px;height:48px;border-radius:12px;background:linear-gradient(180deg,var(--brand),var(--accent));color:#04060D;font-weight:800;box-shadow:var(--glow);font-family:"Space Grotesk", ui-sans-serif}
.brand-title{line-height:1}
.brand-title strong{font-family:"Space Grotesk", ui-sans-serif;letter-spacing:.2px;font-size:17px}
.brand-title small{font-size:12px;color:var(--ink-2)}
.nav-links{display:flex;gap:10px;align-items:center}
.nav-links a{padding:8px 12px;border-radius:999px;border:1px solid transparent;color:var(--ink-0);font-weight:700}
.nav-links a:hover{background:rgba(108,123,255,.08);border-color:rgba(108,123,255,.2)}
.nav-toggle{display:none;background:none;border:0;font-weight:800;color:var(--ink-0);font-size:20px;cursor:pointer}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;font-weight:800;border:1px solid transparent;cursor:pointer;transition:transform .2s ease, background .2s ease, border-color .2s ease}
.btn--primary{background:linear-gradient(180deg,var(--brand),var(--brand-strong));color:#fff;box-shadow:var(--glow)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;border-color:rgba(108,123,255,.35);color:var(--ink-0)}
.btn--secondary{background:transparent;border-color:rgba(140,91,211,.35);color:var(--ink-0)}
.btn--visit{background:linear-gradient(180deg,var(--accent),#6F47C1);color:#fff}

/* Hero */
.hero{margin-top:22px}
.hero--dark{position:relative}
.hero--dark::before{content:"";position:absolute;inset:0;background:
  radial-gradient(40% 50% at 20% 20%, rgba(108,123,255,.12), transparent 70%),
  radial-gradient(40% 50% at 80% 30%, rgba(43,212,212,.10), transparent 70%),
  radial-gradient(60% 70% at 70% 80%, rgba(140,91,211,.12), transparent 70%);
  pointer-events:none
}
.intro-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-2);padding:22px;box-shadow:var(--glow)}
.intro-card--primary h1{font-family:"Space Grotesk", ui-sans-serif;font-size:clamp(28px,4.2vw,44px);line-height:1.15;margin:8px 0;color:#fff}
.eyebrow{display:inline-block;font-weight:700;color:var(--accent-2);letter-spacing:.4px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.fact-list{display:flex;flex-direction:column;gap:12px;margin-top:18px;padding-top:12px;border-top:1px dashed rgba(108,123,255,.2)}
.fact strong{color:var(--ink-0)}
.fact .note{color:var(--ink-2)}
.intro-card--note{background:linear-gradient(180deg,rgba(108,123,255,.06),rgba(108,123,255,.03));border:1px dashed rgba(108,123,255,.25)}
.summary-icons{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.icon-item{display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%}
.dot--main{background:var(--brand)}
.dot--accent{background:var(--accent)}
section{
  margin-bottom: 20px;
  margin-top: 20px;
}
.pay {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

}
.kv--info img{
  width: auto;
  height: 10px;
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 8px;
  margin-bottom: 8px;
}
/* Finder */
.ui-block{border:1px solid var(--line);background:rgba(17, 25, 43, 0.8);border-radius:var(--radius-1);padding:16px;box-shadow:var(--glow)}
.finder h2{margin:0;font-family:"Space Grotesk";color:#fff}
.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.field{display:flex;flex-direction:column;gap:8px}
label{font-size:13px;color:var(--ink-1);font-weight:700}
select,input[type="search"]{padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg-1);color:var(--ink-0)}
.finder-actions{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.note{font-size:13px;color:var(--ink-2)}
.logo{
  width: 50px;
}
/* Cards deck */
.deck{display:grid;grid-template-columns:repeat(1,1fr);gap:18px;margin-top:20px}
.casino-card{background: linear-gradient(180deg, rgba(17,25,43,0.85), rgba(13,19,32,0.85));border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--glow);display:flex;min-height:240px;position:relative;overflow:hidden}
.casino-card::after{content:"";position:absolute;inset:auto -20% -40% -20%;height:60%;background:radial-gradient(50% 80% at 50% 0%, rgba(108,123,255,.18), transparent 60%);filter:blur(20px);pointer-events:none}
.casino-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-meta{display:flex;align-items:center;gap:12px}
.logo-lite{width:64px;height:48px;border-radius:10px;background:linear-gradient(180deg,var(--brand),var(--accent));display:grid;place-items:center;color:#0b0f1d;font-weight:900;font-family:"Space Grotesk"}
.rating{font-weight:900;color:var(--accent-2)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.kv--info > div{padding:10px;border-radius:12px;border:1px dashed rgba(108,123,255,.25);color:var(--ink-1);font-size:14px;background:rgba(108,123,255,.06)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(140,91,211,.2);color:#fff;font-weight:800;border:1px solid rgba(140,91,211,.35)}
.benefits{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.casino-card__foot{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.casino-card:hover{transform:translateY(-2px)}
.casino-card{

}.kv--info{
  display: flex;
  flex-wrap: wrap;
}
.kv--info div{
  width: 100%;
  margin: 5px;
  height: 90px;
  text-align: center;
}
.casino-card__head{
  flex-wrap: wrap;
}
.rating{
      display: block;
    margin: auto;
    text-align: center;
}
.casino-card__head{
  min-width: 250px;
}
.brand-meta{
  width: 100%;
  justify-content: center;
}
.pill{
  margin-top: 10px;
  justify-content: center;
}
.casino-card__foot{
  width: 100%;
}
.btt{
  min-width: 300px;
  max-width: 300px;
  padding: 5px;
      display: flex
;
    justify-content: space-between;
    flex-wrap: wrap;
 
}.btt .pill{
  text-align: center;
  width: 100%;
}
.benefits{
  width: 100%;
}
.btn--visit{
  width: 100%;
  text-align: center;
}
/* Table */
.panel h2{margin:0;color:#fff;font-family:"Space Grotesk"}
.table-wrap{overflow:auto;margin-top:8px}
table{width:100%;border-collapse:collapse;min-width:720px}
thead th{background:transparent;padding:12px 10px;text-align:left;color:var(--ink-2);font-size:13px;border-bottom:1px dashed rgba(108,123,255,.25)}
tbody td{padding:12px 10px;border-bottom:1px dashed rgba(108,123,255,.15);vertical-align:middle;color:var(--ink-1)}

/* FAQ & RG */
.faq h2,.rg h3{color:#fff;font-family:"Space Grotesk"}
details{border-bottom:1px dashed rgba(108,123,255,.15);padding:8px 0}
summary{cursor:pointer;padding:8px 4px;font-weight:800;color:#fff}
.answer{padding:8px 4px;color:var(--ink-1)}
.pill-link{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(108,123,255,.25);background:transparent;color:#fff;font-weight:700}

/* Footer */
.ui-footer{margin-top:28px;padding:22px;border-top:2px solid rgba(108,123,255,.35);background:linear-gradient(180deg,rgba(13,19,32,.7),rgba(13,19,32,.8))}
.ui-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;max-width:var(--max);margin:0 auto}
.ft-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft-links a{color:var(--ink-0)}
.site-copy{max-width:68ch;color:var(--ink-2);font-size:14px}
.ui-footer__bottom{max-width:var(--max);margin:14px auto 0;display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:0 20px;color:var(--ink-2)}

/* Utilities */
.muted{color:var(--ink-2)}

/* Animations (subtle) */
@keyframes floatPulse{0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(0)}}
.logo--badge{animation:floatPulse 6s ease-in-out infinite}

/* Responsive */
@media (max-width:1100px){
  .filters{grid-template-columns:repeat(2,1fr)}
  .deck{grid-template-columns:repeat(1,1fr)}
  table{min-width:620px}
}
@media (max-width:760px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .ui-header__inner{padding:10px}
  .filters{grid-template-columns:1fr}
  .deck{grid-template-columns:1fr} /* ensure at least one card */
  .ui-footer__grid{grid-template-columns:1fr}
  .table-wrap{overflow:auto}
  table{min-width:520px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


.nav-links {
  display: none;
  flex-direction: column;
  gap: 1rem;
  background: #0A1020;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  padding: 1rem;
  text-align: center;
}
.m1{
  min-width: 20%;
  max-width: 20%;
}


.nav-links.open {
  display: flex;
}
@media screen and (max-width:1100px) {
  .kv--info div{
    height: auto;
  }
}
@media screen and (max-width:1000px) {
.casino-card{
  flex-wrap: wrap;
  max-width: 370px;
  margin: auto;
}
.kv--info{
  width: 100%;
}
.btt{
  width: 100%;
  max-width: 100%;
}
.casino-card__head{
  width: 100%;
}
  .m1{
  min-width: 100%;
  max-width: 100%;
}
}
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
  .nav-links {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: none;
    padding: 0;
  }
}