/* =========================================================
   Casino Mate — casinomate-aus-play.com
   Dark premium theme | HTML and CSS strictly separated
   ========================================================= */

:root{
  --bg:#0b0f1a;
  --bg-2:#10162a;
  --bg-3:#161d35;
  --panel:#131a30;
  --panel-2:#1a2240;
  --border:#26304f;
  --gold:#f5b942;
  --gold-2:#ffd27a;
  --gold-deep:#c8881f;
  --pri:#6c5ce7;
  --pri-2:#8b7bff;
  --text:#eef1fb;
  --muted:#9aa3c0;
  --muted-2:#6f7796;
  --green:#3ddc84;
  --silver:#c8cfe0;
  --bronze:#d99a5b;
  --shadow:0 18px 45px rgba(0,0,0,.45);
  --radius:16px;
  --radius-sm:10px;
  --maxw:1180px;
  --font-head:'Poppins','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(1200px 600px at 80% -120px,rgba(108,92,231,.18),transparent 60%),
    radial-gradient(900px 500px at 0% 0%,rgba(245,185,66,.10),transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;cursor:pointer;font-family:var(--font-head);font-weight:600;
  border-radius:999px;padding:12px 24px;font-size:14px;letter-spacing:.3px;
  transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 45%,var(--gold-deep));
  color:#1a1206;box-shadow:0 8px 22px rgba(245,185,66,.35);
}
.btn-gold:hover{box-shadow:0 12px 30px rgba(245,185,66,.5)}
.btn-ghost{
  background:transparent;color:var(--text);border:1px solid var(--border);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-pri{
  background:linear-gradient(135deg,var(--pri-2),var(--pri));
  color:#fff;box-shadow:0 8px 22px rgba(108,92,231,.35);
}
.btn-sm{padding:8px 16px;font-size:12.5px}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,15,26,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:40px;width:auto}
.header-actions{display:flex;align-items:center;gap:12px}

/* ---------- Promo banners ---------- */
.promos{padding:28px 0 6px}
.promo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.promo{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--panel);
  padding:26px;min-height:170px;display:flex;flex-direction:column;
  justify-content:space-between;box-shadow:var(--shadow);
}
.promo::after{
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background:radial-gradient(380px 200px at 90% 10%,var(--gold),transparent 60%);
}
.promo.alt::after{background:radial-gradient(380px 200px at 90% 10%,var(--pri-2),transparent 60%)}
.promo-media{position:absolute;right:-10px;bottom:-10px;width:200px;opacity:.9}
.promo .promo-title{font-family:var(--font-head);font-size:26px;font-weight:700;max-width:60%}
.promo p{color:var(--muted);margin:6px 0 16px;max-width:60%;font-size:14px}
.promo .btn{align-self:flex-start;position:relative;z-index:2}

/* ---------- Section heading ---------- */
.section{padding:38px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.section-title{
  font-family:var(--font-head);font-size:22px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;display:flex;align-items:center;gap:12px;
}
.section-title::before{
  content:"";width:6px;height:24px;border-radius:3px;
  background:linear-gradient(var(--gold-2),var(--gold-deep));
}

/* ---------- Games grid ---------- */
.games-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:16px;
}
.game-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);
  overflow:hidden;position:relative;transition:transform .18s ease,border-color .18s ease;
}
.game-card:hover{transform:translateY(-5px);border-color:var(--gold)}
.game-thumb{aspect-ratio:1/1;width:100%;object-fit:cover;background:var(--bg-3)}
.game-body{padding:10px 10px 14px;text-align:center}
.game-name{font-size:13px;font-weight:600;margin-bottom:8px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-actions{display:flex;flex-direction:column;gap:6px}

/* ---------- Wins ---------- */
.wins-wrap{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:20px}
.wins-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow)}
.wins-card .wins-title{font-family:var(--font-head);font-size:15px;text-transform:uppercase;
  letter-spacing:.6px;margin-bottom:16px;color:var(--gold)}
.podium{display:flex;gap:12px;justify-content:space-between}
.podium .slot{flex:1;text-align:center;background:var(--bg-3);border-radius:var(--radius-sm);
  padding:14px 8px;border:1px solid var(--border)}
.podium .slot img{width:54px;height:54px;border-radius:50%;margin:0 auto 8px;object-fit:cover;
  border:2px solid var(--gold)}
.podium .rank{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.podium .amount{font-weight:700;color:var(--green);font-size:14px;margin-top:2px}
.win-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.win-row:last-child{border-bottom:none}
.win-row img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.win-meta{flex:1;min-width:0}
.win-meta .who{font-size:13px;font-weight:600}
.win-meta .when{font-size:11px;color:var(--muted-2)}
.win-amt{font-weight:700;color:var(--green);font-size:14px}

/* ---------- Article ---------- */
.article{padding:46px 0 10px}
.article-inner{max-width:920px;margin:0 auto}
.article h1{
  font-family:var(--font-head);font-size:34px;line-height:1.25;font-weight:800;
  margin-bottom:22px;background:linear-gradient(120deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.article h2{
  font-family:var(--font-head);font-size:25px;font-weight:700;margin:38px 0 14px;
  padding-left:14px;border-left:4px solid var(--gold);
}
.article h3{font-family:var(--font-head);font-size:18px;font-weight:600;margin:18px 0 8px}
.article p{color:#cdd3e8;margin-bottom:14px}
.article p strong{color:var(--text)}
.subtitle{color:var(--muted)!important;font-size:15px;margin-top:-8px;margin-bottom:18px}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;margin:18px 0 26px;border-radius:var(--radius-sm);
  border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;min-width:560px;background:var(--panel)}
thead th{
  background:var(--panel-2);color:var(--gold);font-family:var(--font-head);
  font-size:13px;text-transform:uppercase;letter-spacing:.5px;text-align:left;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
tbody td{padding:13px 16px;border-bottom:1px solid var(--border);font-size:14px;color:#cdd3e8}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--bg-3)}

/* ---------- FAQ ---------- */
.faq{margin-top:8px}
.faq-item{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);
  margin-bottom:12px;overflow:hidden}
.faq-item h3{margin:0;padding:16px 18px;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;font-size:16px}
.faq-item h3::after{content:"+";color:var(--gold);font-size:22px;font-weight:400}
.faq-item .faq-a{padding:0 18px;max-height:0;overflow:hidden;color:var(--muted);
  transition:max-height .3s ease,padding .3s ease}
.faq-item.open .faq-a{max-height:280px;padding:0 18px 18px}
.faq-item.open h3::after{content:"–"}

/* ---------- CTA strip ---------- */
.cta-strip{margin:34px auto 0;max-width:920px;text-align:center;
  background:linear-gradient(135deg,var(--panel-2),var(--panel));
  border:1px solid var(--border);border-radius:var(--radius);padding:32px 24px;
  box-shadow:var(--shadow)}
.cta-strip h2{border:none;padding:0;font-size:24px;margin-bottom:8px}
.cta-strip p{color:var(--muted);margin-bottom:18px}

/* ---------- Footer ---------- */
.site-footer{margin-top:54px;border-top:1px solid var(--border);
  background:var(--bg-2);padding:40px 0 28px}
.footer-top{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.footer-top img.flogo{height:44px}
.partners{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:center}
.partners img{height:34px;opacity:.7;filter:grayscale(1);transition:opacity .2s,filter .2s}
.partners img:hover{opacity:1;filter:grayscale(0)}
.footer-note{color:var(--muted-2);font-size:13px;text-align:center;margin-top:22px;line-height:1.6}
.footer-note .resp{color:var(--gold);font-weight:600}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .games-grid{grid-template-columns:repeat(4,1fr)}
  .wins-wrap{grid-template-columns:1fr 1fr}
  .wins-card.podium-card{grid-column:1/-1}
}
@media (max-width:680px){
  .promo-grid{grid-template-columns:1fr}
  .promo h3,.promo p{max-width:100%}
  .games-grid{grid-template-columns:repeat(2,1fr)}
  .wins-wrap{grid-template-columns:1fr}
  .article h1{font-size:27px}
  .article h2{font-size:21px}
  .header-actions .btn{padding:9px 16px}
  .brand img{height:32px}
}