/* Hallmark · stamp 1.0 · surface: site-wide house system (tokens below) · theme: SlotMamak house system (by request, brand truth — not dealt) · genre: editorial-dark · shape: existing Mobirise layout, styling-only touch-up */
/* Hallmark · critique: keeps every word, link and image of every page; only colour, surface, rhythm and control states change. */
/* Hallmark · waive 49b · hero action label wraps to two lines at 320px only · the whatsapp number call-to-action keeps its full wording on narrow phones */
/* Hallmark · waive 59 · 21px gaps are legacy Mobirise padding between promo bands · the section rhythm predates this restyle and was left untouched */
/* Hallmark · waive 77 · thin band strips are the established layout convention of this site · each is existing house structure carrying the brand's own artwork and rules, not prose */

/* Tokens — the only colour and font declarations past this block are var() uses. */
:root {
  --sm-ink: #16120c;        /* page base, warm near-black */
  --sm-surface: #211b12;    /* bands and cards */
  --sm-surface-2: #2b2317;  /* raised / hover */
  --sm-line: rgba(240, 179, 75, .18);
  --sm-line-strong: rgba(240, 179, 75, .45);
  --sm-gold: #f0b34b;       /* brand signal, brightened for AA on ink */
  --sm-gold-deep: #d9a13c;  /* fills: ink text on this passes AA */
  --sm-on-gold: #1c1509;
  --sm-text: #f3ead9;       /* warm paper */
  --sm-muted: #bdb09a;
  --sm-hero-link: #e8dcc6;  /* muted lifted for legibility over the hero photo */
  --sm-oxblood: #8e2f2a;    /* desaturated from rgb(198,34,31) */
  --sm-scrim-top: rgba(14, 10, 5, .74);
  --sm-scrim-mid: rgba(14, 10, 5, .48);
  --sm-scrim-low: rgba(14, 10, 5, .78);
  --sm-shadow-soft: rgba(0, 0, 0, .45);
  --sm-shadow-deep: rgba(0, 0, 0, .55);
  --sm-textshadow: rgba(0, 0, 0, .6);
  --sm-textshadow-hero: rgba(0, 0, 0, .8);
  --sm-radius: 6px;
  --sm-head: Raleway, sans-serif;
  --sm-body: Raleway, sans-serif;
}

html, body { overflow-x: clip; }
body { background-color: var(--sm-ink); color: var(--sm-text); font-family: var(--sm-body); }

/* builder SEO artifact: the whole desktop engine nav overflowed phones */
section.engine { display: none; }

/* ---------- hero ---------- */
#header1-1 { position: relative; }
#header1-1::before {           /* scrim: photo stays, legibility arrives */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--sm-scrim-top), var(--sm-scrim-mid) 55%, var(--sm-scrim-low));
  pointer-events: none;
}
#header1-1 .container { position: relative; z-index: 2; }
#header1-1 .mbr-section-title {
  color: var(--sm-gold); font-family: var(--sm-head); font-weight: 700;
  letter-spacing: -.5px; text-shadow: 0 2px 18px var(--sm-shadow-deep);
  overflow-wrap: break-word; min-width: 0;
}
#header1-1 .mbr-section-lead { color: var(--sm-text); text-shadow: 0 1px 10px var(--sm-textshadow); }
#header1-1 .mbr-section > div { color: var(--sm-muted); }
/* white-box phone span joins the pill instead of fighting the photo */
#header1-1 span[style] { background: transparent !important; padding: 0 !important; }
#header1-1 a { color: var(--sm-text); }
#header1-1 a:hover { color: var(--sm-gold); }
/* CTA hierarchy: the number is the primary action, the two lines below are quiet text links */
#header1-1 .mbr-section > div:nth-of-type(1) span a {
  display: inline-block; background-color: var(--sm-gold); color: var(--sm-on-gold);
  padding: .65em 1.4em; border-radius: var(--sm-radius); font-weight: 700;
  box-shadow: 0 6px 22px var(--sm-shadow-soft);
  transition: background-color .18s ease, transform .18s ease;
}
#header1-1 .mbr-section > div:nth-of-type(1) span a:hover { background-color: var(--sm-gold-deep); transform: translateY(-1px); }
#header1-1 .mbr-section > div:nth-of-type(1) span a:active { background-color: var(--sm-gold-deep); transform: translateY(1px); }
#header1-1 .mbr-section > div:nth-of-type(2) a,
#header1-1 .mbr-section > div:nth-of-type(3) a {
  color: var(--sm-hero-link); font-size: .95em !important; font-weight: 500 !important; text-decoration: none;
  text-shadow: 0 1px 8px var(--sm-textshadow-hero);
}
#header1-1 .mbr-section > div:nth-of-type(2),
#header1-1 .mbr-section > div:nth-of-type(3) { font-size: 1em !important; font-weight: 500 !important; color: var(--sm-muted); }
#header1-1 .mbr-section > div:nth-of-type(2) a:hover,
#header1-1 .mbr-section > div:nth-of-type(3) a:hover { color: var(--sm-gold); text-decoration: underline; }

/* ---------- section bands: traffic lights out, ink + hairline in ---------- */
#header3-7, #header3-6, #header3-5 {
  background-color: var(--sm-surface) !important;
  border-top: 1px solid var(--sm-line); border-bottom: 1px solid var(--sm-line);
}
#header3-7 .mbr-section-title, #header3-6 .mbr-section-title { color: var(--sm-gold); }
#header3-7 .mbr-section-subtitle, #header3-6 .mbr-section-subtitle { color: var(--sm-muted) !important; }
#header3-7 .mbr-section-title span { color: inherit !important; }   /* red-on-gold vibration, gone (inline-styled span) */
#header3-7 .mbr-section-subtitle span { color: inherit !important; }

/* ---------- game-card bands ---------- */
#features3-2, #features3-4, #features3-a {
  background-color: var(--sm-ink) !important;
}
.cart-block, #features3-2 .card, #features3-4 .card, #features3-a .card {
  background-color: var(--sm-surface); color: var(--sm-text);
  border: 1px solid var(--sm-line); border-radius: var(--sm-radius); overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cart-block:hover { transform: translateY(-2px); border-color: var(--sm-line-strong); box-shadow: 0 10px 28px var(--sm-shadow-soft); }
.cart-block:active { transform: translateY(0); }
.cart-block .card-title, .card-block h4 { color: var(--sm-text); }
.cart-block .card-block p, .card-text { color: var(--sm-muted); }

/* white-chip CTAs on the band tails: gold-on-white was 1.69:1 — same gold pill as the hero, ink text */
#features3-2 span[style*="#fff"], #features3-4 span[style*="#fff"], #features3-a span[style*="#fff"], #msg-box5-c span[style*="#fff"] {
  background: var(--sm-gold) !important; border-radius: var(--sm-radius); padding: 8px 16px !important; display: inline-block;
}
#features3-2 span[style*="#fff"] a, #features3-4 span[style*="#fff"] a, #features3-a span[style*="#fff"] a, #msg-box5-c span[style*="#fff"] a {
  color: var(--sm-on-gold) !important;
}
#msg-box5-c .mbr-section-title { color: var(--sm-gold); }
#msg-box5-c .lead, #msg-box5-c li { color: var(--sm-muted); }
#msg-box5-c .lead a { color: var(--sm-text); }

/* ---------- one button style for every download ---------- */
.btn-warning, .btn-warning:focus {
  background-color: var(--sm-gold); border-color: var(--sm-gold); color: var(--sm-on-gold);
  border-radius: var(--sm-radius); font-weight: 600;
  transition: background-color .18s ease, border-color .18s ease;
}
.btn-warning:hover { background-color: var(--sm-gold-deep); border-color: var(--sm-gold-deep); color: var(--sm-on-gold); }
.btn-warning:active { background-color: var(--sm-gold-deep); transform: translateY(1px); }
.card-btn { margin-bottom: 8px; }

/* ---------- how-to-play / promo text surfaces ---------- */
#features4-1, #msg-box5-c { background-color: var(--sm-ink) !important; color: var(--sm-text); }
#comp-jlcdgvmm { background: transparent !important; } /* the floating WhatsApp widget */
#features4-1 .card-text, #features4-1 .card-block p { color: var(--sm-muted) !important; }
#features4-1 .card-subtitle { color: var(--sm-text) !important; }
#features4-1 .card-title { color: var(--sm-gold); }
#header3-5 { background-color: var(--sm-surface) !important; }
#header3-5 .mbr-section-title { color: var(--sm-gold); }
#header3-5 .mbr-section-subtitle { color: var(--sm-muted) !important; }

/* ---------- nav: labels never wrap ---------- */
.navbar .nav-link { white-space: nowrap; }

/* ---------- footer unify ---------- */
#footer1-2 { background-color: var(--sm-ink) !important; color: var(--sm-muted); border-top: 1px solid var(--sm-line); }
#footer1-2 a { color: var(--sm-muted); }
#footer1-2 a:hover { color: var(--sm-gold); }

/* ---------- a11y ---------- */
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--sm-gold); outline-offset: 2px; border-radius: 3px;
}
/* the empty caption link is a zero-size invisible tabstop; the logo beside it is the real link */
.navbar-dropdown .navbar-caption { display: none !important; }
/* ring on gold chips: gold outline would vanish */
#header1-1 .mbr-section > div:nth-of-type(1) span a:focus-visible,
#features3-2 span[style*="#fff"] a:focus-visible,
#features3-4 span[style*="#fff"] a:focus-visible,
#features3-a span[style*="#fff"] a:focus-visible,
#msg-box5-c span[style*="#fff"] a:focus-visible { outline-color: var(--sm-on-gold); }

/* ---------- 4D results & payout (4d_lottery.php, 4d_lottery_payout.php) ---------- */
/* operator boards keep their own brand header art and borders; only the shared payout tables take the house tokens */
/* the default board header is yellow brand art: dark ink text (the .colNN variants set their own white text above it) */
.head-top-sec h3, .head-top-sec p { color: var(--sm-on-gold); }
.tablepay th { background: var(--sm-surface-2) !important; border: 1px solid var(--sm-line) !important; color: var(--sm-gold); }
.tablepay td { background: var(--sm-surface) !important; border: 1px solid var(--sm-line) !important; color: var(--sm-text); }

/* phones: the hero table overflowed the screen by ~11px (10 before the clip) */
@media (max-width: 767px) {
  .mbr-table:not(.mbr-table-md-up) { width: 100%; max-width: 100%; }
  .mbr-table:not(.mbr-table-md-up) .mbr-table-cell { display: block; min-width: 0; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}