/* ===== Variables ===== */
:root{
  --green:#128a3e;
  --red:#ce2b37;
  --bg:#f7f8fa;
  --card:#ffffff;
  --text:#1b1f24;
  --muted:#5b6470;
  --border:#e3e6ea;
}

/* ===== Base ===== */
body{
  font-family:'Inter',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

/* ===== Listing section ===== */
.listing{
  padding:10px 16px 30px;
}
.listing-inner{
  max-width:1180px;
  margin:0 auto;
}
.listing h2{
  font-size:20px;
  font-weight:800;
  margin-bottom:16px;
}
.casino-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.casino-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  position:relative;
  display:grid;
  grid-template-columns:32px 1fr;
  grid-template-areas:
    "rank brand"
    "bonus bonus"
    "features features"
    "cta cta";
  gap:10px 12px;
}
.card-rank{
  grid-area:rank;
  width:32px;height:32px;
  background:var(--green);
  color:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
}
.card-brand{
  grid-area:brand;
  display:flex;align-items:center;gap:10px;
}
.card-brand img{
  width:90px;height:45px;
  aspect-ratio:2/1;
  object-fit:contain;
  background:#fafafa;
  border-radius:6px;
}
.brand-name{font-size:15px;font-weight:700;}
.stars{color:#f2a93b;font-size:13px;letter-spacing:1px;}
.card-bonus{grid-area:bonus;background:#f1f6f3;border-radius:8px;padding:10px 12px;}
.bonus-label{font-size:11px;text-transform:uppercase;font-weight:700;color:var(--green);letter-spacing:.5px;}
.card-bonus p{font-size:14px;font-weight:600;margin-top:2px;}
.card-features{grid-area:features;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);}
.card-features li{display:flex;align-items:center;gap:6px;}
.check{width:16px;height:16px;flex-shrink:0;}
.cta-btn{
  grid-area:cta;
  background:var(--red);
  color:#fff;
  text-align:center;
  padding:12px;
  border-radius:8px;
  font-weight:700;
  font-size:14px;
}

@media (min-width:768px){
  .casino-card{
    grid-template-columns:40px 220px 1fr 200px 160px;
    grid-template-areas:"rank brand bonus features cta";
    align-items:center;
  }
  .card-bonus{height:100%;display:flex;flex-direction:column;justify-content:center;}
}

/* ===== Content ===== */
.content-wrap{
  max-width:780px;
  margin:0 auto;
  padding:10px 16px 40px;
}
.content-wrap h2{
  font-size:22px;
  font-weight:800;
  margin:32px 0 14px;
}
.content-wrap h3{
  font-size:18px;
  font-weight:700;
  margin:22px 0 10px;
}
.content-wrap p{
  font-size:15px;
  margin-bottom:14px;
}
.content-wrap ul{
  margin:0 0 14px 18px;
}
.content-wrap li{
  font-size:15px;
  margin-bottom:8px;
}
.content-wrap table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:18px;
  display:block;
  overflow-x:auto;
  white-space:nowrap;
}
.content-wrap table tbody{display:table;width:100%;}
.content-wrap td{
  border:1px solid var(--border);
  padding:10px 12px;
  font-size:14px;
  white-space:normal;
}
.content-wrap td p{margin:0;}

/* CTA centered button */
.cta-center-wrap{
  text-align:center;
  margin:28px 0;
}
.cta-center-btn{
  display:inline-block;
  background:var(--green);
  color:#fff;
  font-weight:700;
  font-size:16px;
  padding:14px 36px;
  border-radius:10px;
}

/* Author bio */
.author-bio{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
  margin-top:30px;
}
.author-bio img{
  width:64px;height:64px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.author-name a{font-weight:700;font-size:16px;color:var(--green);}
.author-role{font-size:13px;color:var(--muted);margin-bottom:8px;}
.author-info p:last-child{font-size:14px;margin-bottom:0;}

/* ===== Footer ===== */
.site-footer{
  background:#fff;
  border-top:1px solid var(--border);
  padding:30px 16px;
}
.footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.footer-col{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
}
.footer-col a{color:var(--muted);}
.footer-disclaimer{
  font-size:12px;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-disclaimer img{margin-top:4px;}
.footer-copy{margin-top:6px;}

@media (min-width:768px){
  .footer-inner{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
  }
  .footer-disclaimer{max-width:340px;}
}