/* ft-hidden-guard v1 */
[hidden]{display:none!important;}
:root{
  --space-xs: 7px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 66px;
  --card-padding-y: 26px;
  --card-padding-x: 22px;
  --card-gap: 16px;
  --card-radius: 11px;
  --card-border-width: 1px;
  --card-min-height: 302px;
  --card-min-col-width: 285px;
  --btn-padding-y: 10px;
  --btn-padding-x: 24px;
  --btn-radius: 21px;
  --btn-gap-from-text: 24px;
  --grid-gap: 18px;
  --lh-heading: 1.21;
  --lh-body: 1.50;
  --ls-heading: 0.030em;
  --paper: #f4e7c8;
  --ink: #1a1413;
  --cherry: #d8202b;
  --cherry-deep: #a8121b;
  --cyan: #16b8cf;
  --paper-deep: #e9d9ad;
}
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }
html { scroll-behavior: smooth; }
body { margin: 0; }

body{
  font-family: 'CustomFont', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(rgba(26,20,19,0.06) 1px, transparent 1px),
    radial-gradient(rgba(26,20,19,0.04) 1px, transparent 1px);
  background-size: 6px 6px, 11px 11px;
  background-position: 0 0, 3px 3px;
  line-height: var(--lh-body);
  font-size: 17px;
}
.wrap{ max-width: 1120px; margin: 0 auto; padding: 0 var(--space-md); }

h1, h2, h3{
  font-family: 'CustomFont', system-ui, sans-serif;
  font-weight: 900;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  font-stretch: condensed;
  color: var(--cherry);
  text-shadow: 2px 2px 0 rgba(22,184,207,0.55);
}
h1{ font-size: clamp(34px, 6vw, 64px); margin: 0 0 var(--space-md); }
h2{ font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 var(--space-md); }
h3{ font-size: 20px; color: var(--ink); text-shadow: none; margin: 0 0 var(--space-sm); }

p{ margin: 0 0 var(--space-md); }
a{ color: var(--cherry-deep); }
a:hover{ color: var(--cherry); }

/* Header */
.site-header{
  background: var(--cherry);
  color: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.header__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-md);
}
.wordmark{
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  text-shadow: 2px 2px 0 var(--cyan);
}
.wordmark span{ color: var(--paper); opacity: 0.85; }

/* Buttons */
.btn{
  display: inline-block;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-weight: 800;
  text-decoration: none;
  border: 2px solid var(--ink);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.btn--primary{ background: var(--cherry); color: #fff; }
.btn--primary:hover{ background: var(--cherry-deep); color: #fff; }
.btn--ghost{ background: var(--paper); color: var(--ink); }
.btn--mega{
  background: var(--cherry);
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
  padding: 18px 44px;
  border-radius: 999px;
  box-shadow: 6px 6px 0 var(--cyan);
  margin-top: var(--btn-gap-from-text);
}
.btn--mega:hover{ background: var(--cherry-deep); color: #fff; }

/* Hero */
.hero{
  padding: var(--space-xl) 0;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.hero__grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-lg);
  align-items: start;
}
@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; }
}
.hero__copy > *{ max-width: 100%; }
.badge-mast{ margin-bottom: var(--space-md); }
.badge-mast svg{ width: clamp(140px, 22vw, 220px); height: auto; }
.hero__sub{ font-size: 19px; max-width: 60ch; }

.disclaimer-band{
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin: var(--space-sm) 0 var(--space-md);
}

/* Trust */
.trust{ padding: var(--space-xl) 0; background: var(--paper-deep); border-bottom: 3px solid var(--ink); }
.trust__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min-col-width), 1fr));
  gap: var(--grid-gap);
}
.trust__cell{
  background: var(--paper);
  border: var(--card-border-width) solid var(--ink);
  border-radius: var(--card-radius);
  padding: var(--card-padding-y) var(--card-padding-x);
  box-shadow: 4px 4px 0 var(--cyan);
}

/* Games / cards */
.games{ padding: var(--space-xl) 0; }
.section-lede{ font-size: 18px; max-width: 60ch; }
.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min-col-width), 1fr));
  gap: var(--grid-gap);
  margin-top: var(--space-md);
}
.card{
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--card-radius);
  padding: var(--card-padding-y) var(--card-padding-x);
  min-height: var(--card-min-height);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  position: relative;
  box-shadow: 6px 6px 0 var(--cherry);
}
.card__ribbon{
  position: absolute;
  top: -12px;
  left: 16px;
  background: var(--cherry);
  color: #fff;
  padding: 4px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}
.card__features{ margin: 0 0 var(--space-sm); padding-left: 18px; }
.card__features li{ margin-bottom: 4px; }
.card__cta{ margin-top: auto; margin-bottom: 0; }

/* Comparison table */
.comparison-table{ padding: var(--space-xl) 0; background: var(--paper-deep); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.tablewrap{ overflow-x: auto; }
table{ width: 100%; border-collapse: collapse; background: var(--paper); border: 2px solid var(--ink); }
th, td{ text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--ink); }
th{ background: var(--cherry); color: #fff; text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; }
tr:last-child td{ border-bottom: 0; }

/* About */
.about{ padding: var(--space-xl) 0; }
.about p{ max-width: 70ch; }

/* Quick facts */
.quick-facts-strip{ padding: var(--space-xl) 0; background: var(--ink); color: var(--paper); }
.quick-facts-strip h2{ color: var(--paper); text-shadow: 2px 2px 0 var(--cherry); }
.facts{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--grid-gap);
}
.facts li{
  background: var(--paper);
  color: var(--ink);
  padding: var(--card-padding-y) var(--card-padding-x);
  border-radius: var(--card-radius);
  text-align: center;
  border: 2px solid var(--paper);
}
.facts strong{ display: block; font-size: 32px; color: var(--cherry); font-weight: 900; line-height: 1; margin-bottom: 6px; }
.facts span{ font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; }

/* Footer */
.site-footer{ background: var(--ink); color: var(--paper); padding: var(--space-lg) 0; }
.footer__logos{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--paper);
  border-radius: var(--card-radius);
  margin-bottom: var(--space-md);
}
.footer__logos img{ width: 80px; height: 40px; object-fit: contain; }
.footer__legal{ font-size: 13px; line-height: 1.6; text-align: center; margin: 0; }
.footer__legal a{ color: var(--paper); }

/* Age gate */
.age-gate{
  position: fixed; inset: 0;
  background: rgba(26,20,19,0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.age-gate:not([hidden]){ display: flex; }
.age-gate__card{
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--card-radius);
  padding: var(--space-lg);
  max-width: 460px;
  box-shadow: 8px 8px 0 var(--cherry);
}
.age-gate__row{ display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }

/* Cookie banner */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--paper);
  border-top: 3px solid var(--ink);
  padding: var(--space-md);
  z-index: 9998;
  box-shadow: 0 -4px 0 var(--cherry);
}
.cookie-banner:not([hidden]){ display: block; }
.cookie-banner__row{
  display: flex; gap: var(--space-md); align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cookie-banner__row p{ margin: 0; flex: 1 1 320px; font-size: 14px; }
.cookie-banner__buttons{ display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* Policy pages */
.policy{ padding: var(--space-lg) 0 var(--space-xl); }
.policy h2{ margin-top: var(--space-lg); }
.policy ul{ margin: 0 0 var(--space-md) var(--space-md); }

/* RG text in footer logo strip */
.footer__rg-text{ font-size: 0.9rem; color: var(--ink); white-space: nowrap; }
.footer__rg-text a{ color: var(--cherry); text-decoration: underline; }

/* Under 18 */
.under18{ background: var(--paper); }
.under18__panel{
  max-width: 640px;
  margin: 80px auto;
  padding: var(--space-lg);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--card-radius);
  text-align: center;
  box-shadow: 8px 8px 0 var(--cherry);
}