/* BestCasino Catalogue ZA — retail-catalogue stylesheet.
   One file, no build step. Hard 12-column grid via media queries only. */

:root{
  --y:#ffd21f;
  --b:#1440a0;
  --ink:#161a21;
  --red:#d5281e;
  --mist:#f4f5f8;
  --line:#d8dbe2;
  --dim:#5a6170;
  --good:#0d7a3f;
  --bad:#c22417;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:#fff;
}

img,svg{max-width:100%;display:block}

a{color:var(--b)}
a:hover{text-decoration-thickness:3px}

h1,h2,h3{font-weight:800;line-height:1.15;letter-spacing:-.3px}
h1{font-size:34px;margin:14px 0 6px}
h3{font-size:19px;margin:22px 0 8px}

.wrap{max-width:1440px;margin:0 auto;padding:0 24px}

/* ---------- header: two static tiers, never sticky ---------- */

.till{border-bottom:4px solid var(--b);background:#fff}

.banner{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:16px 0 12px}

.logo{font-weight:800;font-size:27px;color:var(--ink);text-decoration:none;letter-spacing:-.8px;white-space:nowrap}
.logo em{
  font-style:normal;
  background:var(--y);
  color:var(--b);
  padding:3px 12px 3px 18px;
  margin-left:6px;
  font-size:19px;
  letter-spacing:.5px;
  clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);
  display:inline-block;
}

.strap{font-size:14px;color:var(--dim)}

.aisle{display:flex;gap:2px;overflow-x:auto;background:var(--b);scrollbar-width:thin}
.aisle a{
  color:#fff;text-decoration:none;font-weight:700;font-size:14px;
  padding:11px 18px;white-space:nowrap;flex:0 0 auto;
}
.aisle a:hover{background:#0e3078}
.aisle a[aria-current="page"]{background:var(--y);color:var(--b)}

/* ---------- breadcrumbs + date stamp ---------- */

.crumbs{font-size:13px;color:var(--dim);padding:14px 0 0}
.crumbs a{color:var(--b)}
.crumbs span{margin:0 6px}

.stamp{
  display:inline-block;border:2px solid var(--ink);
  padding:4px 12px;font-weight:700;font-size:13px;margin:10px 0 4px;background:#fff;
}

/* ---------- section tab-plates: H2 lives inside ---------- */

section{margin:44px 0}

.tab{
  display:inline-block;
  background:var(--b);color:#fff;
  padding:9px 40px 9px 18px;
  clip-path:polygon(0 0,100% 0,calc(100% - 24px) 100%,0 100%);
  margin-bottom:18px;
}
.tab h2{font-size:22px;margin:0;color:inherit}
.tab.sun{background:var(--y);color:var(--b)}
.tab.flame{background:var(--red);color:#fff}

/* ---------- the shelf: hard 12-column grid ---------- */

.shelf{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.shelf > *{grid-column:span 12}

@media (min-width:720px){
  .shelf > .deck{grid-column:span 6}
  .shelf > .half{grid-column:span 6}
}
@media (min-width:1100px){
  .shelf > .deck{grid-column:span 4}
  .shelf > .wide{grid-column:span 8}
  .shelf > .side{grid-column:span 4}
}

/* ---------- product card ---------- */

.deck{
  border:3px solid var(--ink);
  background:#fff;
  padding:20px;
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;gap:14px;
}

.deck .rank{font-size:13px;font-weight:700;color:var(--dim)}

.hero-deck{border-width:3px;display:flex;flex-direction:column;gap:16px}
@media (min-width:900px){
  .hero-deck{flex-direction:row;align-items:flex-start;gap:36px}
  .hero-deck .facts{flex:1}
}

.ribbon{
  position:absolute;top:26px;right:-58px;
  transform:rotate(45deg);
  background:var(--red);color:#fff;
  font-weight:800;font-size:13px;letter-spacing:1px;
  padding:7px 62px;
}

/* ---------- brand logo tiles (real logo files on a white plate) ---------- */

.label-tile{
  display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;
  background:#fff;
  border:2px solid var(--line);
  padding:8px 14px;
}
.label-tile img{height:36px;width:auto}
.hero-deck .label-tile img{height:40px}

/* ---------- price bursts ---------- */

.burst{
  width:118px;height:118px;flex:0 0 auto;
  background:var(--y);color:var(--ink);
  clip-path:polygon(100% 50%,87.7% 60.1%,93.3% 75%,77.6% 77.6%,75% 93.3%,60.1% 87.7%,50% 100%,39.9% 87.7%,25% 93.3%,22.4% 77.6%,6.7% 75%,12.3% 60.1%,0% 50%,12.3% 39.9%,6.7% 25%,22.4% 22.4%,25% 6.7%,39.9% 12.3%,50% 0%,60.1% 12.3%,75% 6.7%,77.6% 22.4%,93.3% 25%,87.7% 39.9%);
  display:grid;place-content:center;text-align:center;
}
.burst b{font-size:38px;font-weight:800;line-height:1}
.burst i{font-style:normal;font-size:12px;font-weight:700}

.burst.mega{width:200px;height:200px}
.burst.mega b{font-size:64px}
.burst.mega i{font-size:14px}

.spark{
  width:84px;height:84px;flex:0 0 auto;
  background:var(--y);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  display:grid;place-content:center;text-align:center;
}
.spark b{font-size:26px;font-weight:800;line-height:1}
.spark i{font-style:normal;font-size:10px;font-weight:700}

/* ---------- spec list (the pricetag body) ---------- */

.spec{display:grid;grid-template-columns:1fr;gap:0;font-size:14px}
.spec div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line)}
.spec dt{color:var(--dim);font-weight:400}
.spec dd{font-weight:700;text-align:right}

/* ---------- verdict panel ---------- */

.verdict{
  border:3px solid var(--ink);
  background:var(--y);
  padding:22px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  margin:22px 0;
}
.verdict .burst{background:#fff}
.verdict p{max-width:55ch;font-weight:700;font-size:17px}

/* ---------- prose ---------- */

.prose{max-width:55ch}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px 22px}
.prose li{margin-bottom:6px}
.prose table{margin:0 0 14px}

.opener{font-size:17px}

/* ---------- section ticket: the short verdict stapled to each section ---------- */

.ticket{
  list-style:none;max-width:58ch;
  border-left:8px solid var(--y);
  background:var(--mist);
  padding:12px 16px;margin:4px 0 0;
}
.ticket li{font-size:14px;margin:0 0 8px}
.ticket li:last-child{margin-bottom:0}
.ticket .pay b{color:var(--good)}
.ticket .gap b{color:var(--bad)}

/* ---------- lever board: what a player controls vs what they do not ---------- */

.levers{display:grid;grid-template-columns:1fr;gap:0;max-width:860px;border:3px solid var(--ink)}
@media (min-width:820px){.levers{grid-template-columns:1fr 1fr}}
.levers > div{padding:18px 20px}
.levers > div + div{border-top:3px solid var(--ink)}
@media (min-width:820px){.levers > div + div{border-top:0;border-left:3px solid var(--ink)}}
.levers h3{margin-top:0;font-size:18px}
.levers ul{list-style:none}
.levers li{padding-left:28px;position:relative;margin-bottom:11px;font-size:14px}
.levers li:last-child{margin-bottom:0}
.yours{background:#fffdf0}
.yours li::before{content:"→";position:absolute;left:0;font-weight:800;color:var(--good)}
.theirs{background:var(--mist)}
.theirs li::before{content:"—";position:absolute;left:0;font-weight:800;color:var(--dim)}

/* ---------- tables ---------- */

.scroll{overflow-x:auto;margin:0 0 14px}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
caption{text-align:left;font-weight:700;padding-bottom:8px}
th,td{border:2px solid var(--ink);padding:9px 12px;text-align:left;vertical-align:top}
thead th{background:var(--b);color:#fff;font-weight:800}
tbody tr:nth-child(even){background:var(--mist)}
td b{font-weight:800}
.num{font-weight:800;font-size:18px}

/* ---------- FAQ: bare details, no card chrome, no plus icons ---------- */

.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{font-weight:700;cursor:pointer}
.faq details p{margin-top:10px;max-width:55ch}

/* ---------- author block ---------- */

.author{
  display:flex;gap:14px;align-items:center;
  border:2px solid var(--line);
  padding:16px;max-width:560px;margin:34px 0 0;
}
.ava{
  width:52px;height:52px;flex:0 0 auto;
  background:var(--b);color:var(--y);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  display:grid;place-content:center;
  font-weight:800;font-size:16px;
}
.author p{font-size:14px;color:var(--dim);margin:2px 0 0}
.author .who{color:var(--ink);font-size:15px;margin:0}
.author b a{color:inherit}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;background:var(--b);color:#fff;
  text-decoration:none;font-weight:800;font-size:15px;
  padding:12px 22px;border:3px solid var(--ink);
}
.btn:hover{background:#0e3078}
.btn.loud{background:var(--red)}
.btn.quiet{background:#fff;color:var(--b)}

/* ---------- notes / cross-links ---------- */

.note{border:3px solid var(--b);background:var(--mist);padding:18px;max-width:760px}
.note p{max-width:55ch;margin:0 0 10px}
.note p:last-child{margin-bottom:0}

.trail{margin:34px 0 0;font-size:14px}
.trail ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.trail a{
  display:inline-block;border:2px solid var(--b);
  padding:6px 14px;text-decoration:none;font-weight:700;
}
.trail a:hover{background:var(--y)}

/* ---------- footer ---------- */

.fine{background:var(--ink);color:#c8cdd6;margin-top:70px;padding:36px 0 40px;font-size:14px}
.fine a{color:#fff}
.fine .cols{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:720px){.fine .cols{grid-template-columns:2fr 1fr 1fr}}
.fine ul{list-style:none}
.fine li{margin-bottom:7px}
.age{
  display:inline-block;border:2px solid #fff;color:#fff;
  font-weight:800;padding:3px 9px;margin-bottom:12px;
}
.fine .legal{margin-top:26px;border-top:1px solid #3a404b;padding-top:16px;font-size:12px;color:#9aa1ad;max-width:80ch}

/* ---------- mobile dock: 4 links, fixed bottom, mobile only ---------- */

.dock{display:none}
@media (max-width:719px){
  body{padding-bottom:62px}
  .dock{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:10;
    background:var(--b);border-top:3px solid var(--ink);
  }
  .dock a{
    flex:1;color:#fff;text-decoration:none;text-align:center;
    font-size:11px;font-weight:700;padding:7px 0 6px;
  }
  .dock svg{width:22px;height:22px;margin:0 auto 2px}
  .fine{padding-bottom:80px}
}

/* ---------- small screens ---------- */

@media (max-width:719px){
  h1{font-size:27px}
  .tab h2{font-size:19px}
  .burst.mega{width:160px;height:160px}
  .burst.mega b{font-size:56px}
  .banner{gap:8px}
  .strap{display:none}
}

.brand-badge{margin:0 0 12px}
.brand-badge .label-tile img{height:40px}
thead .label-tile{padding:3px 5px}
thead .label-tile img{height:22px}
.tile-name{display:block;margin-top:4px;font-size:.72rem;letter-spacing:.02em}