/*
Theme Name:  Winmasters Casino — monobrand, Belgique (fr/nl/de), SIDEBAR shell, LIGHT
Description: Tab66 NP monobrand. LIGHT theme, per TZ section 3: cream ground (#f7f8fa), white
             cards, orange CTA (#c8101a) in pill form, amber accents, near-black ink. Text tokens
             are tuned for a light ground — the polarity is the reverse of the fleet's dark lands.
             Shares the fleet mp- class vocabulary.
Version:     1.0.0
*/

/* ==========================================================================
   1. DESIGN TOKENS — cream ground, orange CTA, amber accent
   ========================================================================== */
:root {
  --mp-bg:            #f7f8fa;
  --mp-bg-1:          #ffffff;
  --mp-bg-2:          #eef1f5;
  --mp-bg-3:          #e3e7ec;
  --mp-bg-card:       #ffffff;
  --mp-bg-card-2:     #eef1f5;

  --mp-ink:           #1f2429;
  --mp-ink-2:         #3b434b;
  --mp-ink-3:         #5a636c;
  --mp-ink-mute:      #6b747d;

  --mp-border:        #e3e7ec;
  --mp-border-strong: #d3d9df;

  /* Primary — Tab66 orange */
  --mp-brand:         #c8101a;
  --mp-brand-deep:    #a80a12;
  --mp-brand-light:   #c8101a;
  --mp-brand-glow:    rgba(200,16,26,0.45);
  --mp-brand-ink:     #ffffff;

  /* Positives (readable green on a light ground) */
  --mp-leaf:          #17795c;
  --mp-leaf-deep:     #12664c;
  --mp-leaf-glow:     rgba(224,72,123,0.40);

  /* Warm red (negatives) */
  --mp-red:           #8c2f22;
  --mp-red-deep:      #77281d;
  --mp-red-glow:      rgba(140,47,34,0.42);

  /* Gold accent (secondary) */
  --mp-amber:         #b8235c;
  --mp-deco:          #ec1f27;   /* decorative amber — gradients, dots, rules only */
  --mp-amber-glow:    rgba(224,72,123,0.40);

  --mp-sky:           #8e2f86;
  --mp-violet:        #b8235c;
  --mp-magenta:       #8e2f86;

  --mp-pos:           #17795c;
  --mp-neg:           #8c2f22;
  --mp-warn:          #b8235c;

  /* Gradients */
  --mp-grad-hero:     radial-gradient(ellipse at 92% -10%, rgba(200,16,26,0.16), transparent 58%), radial-gradient(ellipse at 8% 110%, rgba(224,72,123,0.14), transparent 58%), linear-gradient(180deg, #fbfcfd 0%, #f7f8fa 100%);
  --mp-grad-cta:      linear-gradient(135deg, #c8101a 0%, #a80a12 100%);
  --mp-grad-leaf:     linear-gradient(135deg, #c8101a, #a80a12);
  --mp-grad-red:      linear-gradient(135deg, #8c2f22, #77281d);
  --mp-grad-bleed:    radial-gradient(80% 100% at 90% 0%, rgba(200,16,26,0.14), transparent 58%), radial-gradient(80% 100% at 10% 100%, rgba(224,72,123,0.12), transparent 60%), linear-gradient(160deg, #ffffff, #f7f8fa);
  --mp-grad-card:     linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2));

  /* Type */
  --mp-font-body:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mp-font-display:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mp-font-mono:     ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
  --mp-font-serif:    Georgia, 'Times New Roman', serif;

  --mp-t-mega:        clamp(2.5rem, 6vw + 0.5rem, 4.5rem);
  --mp-t-display:     clamp(2rem, 4.6vw + 0.5rem, 3rem);
  --mp-t-h1:          clamp(1.75rem, 3vw + 0.5rem, 2.25rem);
  --mp-t-h2:          clamp(1.5rem, 2.5vw + 0.5rem, 1.875rem);
  --mp-t-h3:          1.125rem;
  --mp-t-body:        1rem;
  --mp-t-sm:          0.9375rem;
  --mp-t-xs:          0.75rem;

  --mp-s-1: 4px; --mp-s-2: 8px; --mp-s-3: 12px; --mp-s-4: 16px; --mp-s-5: 24px;
  --mp-s-6: 32px; --mp-s-7: 48px; --mp-s-8: 64px; --mp-s-9: 96px;

  --mp-max-w:         1200px;
  --mp-radius:        10px;
  --mp-radius-lg:     16px;
  --mp-radius-xl:     24px;
  --mp-radius-pill:   999px;

  --mp-shadow:        0 2px 10px rgba(120,72,20,0.08);
  --mp-shadow-lg:     0 10px 34px rgba(120,72,20,0.14);
  --mp-glow-brand:    0 0 0 1px var(--mp-brand), 0 0 24px var(--mp-brand-glow);
  --mp-glow-leaf:     0 0 0 1px var(--mp-leaf), 0 0 24px var(--mp-leaf-glow);
  --mp-glow-red:      0 0 0 1px var(--mp-red),  0 0 24px var(--mp-red-glow);

  --mp-t-anim:        180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Standard aliases (QA gate checks these) ---- */
  --bg:               #f7f8fa;
  --surface:          #ffffff;
  --surface2:         #eef1f5;
  --text:             #1f2429;
  --muted:            #3b434b;
  --accent:           #c8101a;
  --accent-deep:      #a80a12;
  --accent-light:     #c8101a;
  --accent-ink:       #c8101a;
  --accent-contrast:  #ffffff;
  --secondary:        #ec1f27;
  --border:           #e3e7ec;
  --container:        1200px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mp-bg);
  color: var(--mp-ink);
  font-family: var(--mp-font-body);
  font-size: var(--mp-t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

a { color: var(--mp-brand-light); text-decoration: none; transition: color var(--mp-t-anim); }
a:hover { color: var(--mp-brand); }

h1, h2, h3, h4 {
  font-family: var(--mp-font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0; line-height: 1.05;
  color: var(--mp-ink);
}
h1 { font-size: var(--mp-t-h1); }
h2 { font-size: var(--mp-t-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--mp-t-h3); letter-spacing: -0.015em; }
p  { margin: 0 0 var(--mp-s-4); color: var(--mp-ink-2); }
strong { font-weight: 700; color: var(--mp-ink); }

.mp-tx-ochre   { background: linear-gradient(120deg, #c8101a, #e0487b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mp-tx-leaf    { background: linear-gradient(120deg, #c8101a, #a80a12); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mp-tx-red     { background: linear-gradient(120deg, #8c2f22, #77281d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap { max-width: var(--mp-max-w); margin: 0 auto; padding: 0 var(--mp-s-5); }
.mp-grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--mp-s-5); }
.mp-col-7 { grid-column: span 7; }
.mp-col-5 { grid-column: span 5; }

.mp-sect       { padding: var(--mp-s-8) 0; position: relative; }
.mp-sect-tinted{ background: linear-gradient(180deg, var(--mp-bg), var(--mp-bg-1)); }
.mp-sect-card  { background: var(--mp-bg-1); }
.mp-sect-bleed { background: var(--mp-bg); }
.mp-sect-h     { padding: var(--mp-s-8) 0; position: relative; background: linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); }

.mp-sect-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--mp-s-5); margin-bottom: var(--mp-s-6); flex-wrap: wrap;
}
.mp-sect-eyebrow {
  display: inline-block;
  font-family: var(--mp-font-mono);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--mp-brand);
  background: rgba(200,16,26,0.08);
  padding: 5px 12px; border-radius: var(--mp-radius-pill);
  border: 1px solid var(--mp-border-strong);
  margin-bottom: var(--mp-s-3);
}
.mp-sect-h2  { font-size: var(--mp-t-display); line-height: 1.12; }
.mp-sect-desc { font-size: 1.0625rem; color: var(--mp-ink-2); max-width: 60ch; margin-top: var(--mp-s-3); }
.mp-sect-link {
  font-family: var(--mp-font-mono); font-size: 0.875rem; font-weight: 700;
  color: var(--mp-brand-light); text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ==========================================================================
   4. OFFER-BAR
   ========================================================================== */
.mp-offer-bar {
  background: linear-gradient(90deg, #ffffff, #eef1f5, #ffffff);
  border-bottom: 1px solid var(--mp-border-strong);
  padding: 10px 0;
  position: relative; z-index: 60;
}
.mp-offer-bar-inner {
  display: flex; align-items: center; justify-content: center; gap: var(--mp-s-3);
  font-size: 0.875rem; color: var(--mp-ink-2); flex-wrap: wrap;
}
.mp-offer-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mp-font-mono);
  background: rgba(200,16,26,0.10);
  color: var(--mp-leaf);
  border: 1px solid rgba(200,16,26,0.30);
  padding: 3px 10px; border-radius: var(--mp-radius-pill);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 700;
}
.mp-offer-link {
  font-family: var(--mp-font-display); font-weight: 700; color: var(--mp-brand-light);
  text-decoration: none;
}
.mp-offer-link:hover { color: var(--mp-brand); }

/* ==========================================================================
   5. NAV / TOPBAR
   ========================================================================== */
.mp-topbar {
  background: rgba(255,243,230,0.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mp-border);
  padding: var(--mp-s-3) 0;
  position: sticky; top: 0; z-index: 55;
}
.mp-topbar nav.wrap { display: flex; align-items: center; gap: var(--mp-s-5); }
.mp-brand-line {
  display: flex; align-items: center; gap: var(--mp-s-3);
  text-decoration: none; color: var(--mp-ink); margin-right: auto;
}
.mp-brand-line img { width: 32px; height: 32px; filter: drop-shadow(0 4px 10px var(--mp-brand-glow)); }
.mp-brand-line .mp-brand-name {
  font-family: var(--mp-font-display); font-weight: 800;
  font-size: 1.0625rem; letter-spacing: -0.015em; color: var(--mp-ink);
}
.mp-nav-links { display: flex; gap: var(--mp-s-5); }
.mp-nav-links a {
  font-family: var(--mp-font-mono);
  font-size: 0.8125rem; font-weight: 600;
  text-decoration: none; color: var(--mp-ink-2);
  position: relative; padding: 4px 0;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mp-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--mp-brand), var(--mp-deco));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--mp-t-anim);
}
.mp-nav-links a:hover { color: var(--mp-ink); }
.mp-nav-links a:hover::after { transform: scaleX(1); }

.mp-nav-cta {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  background: var(--mp-grad-cta); color: var(--mp-brand-ink);
  text-decoration: none;
  font-family: var(--mp-font-display); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: -0.005em;
  box-shadow: 0 6px 18px -6px var(--mp-brand-glow), 0 0 0 1px rgba(200,16,26,0.30) inset;
  transition: all var(--mp-t-anim); white-space: nowrap;
}
.mp-nav-cta:hover {
  color: var(--mp-brand-ink); transform: translateY(-1px);
  box-shadow: 0 12px 28px -6px var(--mp-brand-glow), 0 0 0 1px rgba(200,16,26,0.50) inset, 0 0 24px var(--mp-brand-glow);
}
.mp-nav-cta .mp-cta-arrow { font-size: 0.95em; opacity: 0.85; }
.mp-nav-cta .mp-cta-label-short { display: none; }

/* CSS-only hamburger (checkbox hack) */
.mp-nav-toggle { display: none; }
.mp-burger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 8px;
  background: rgba(200,16,26,0.06); border: 1px solid var(--mp-border-strong);
  cursor: pointer; flex: 0 0 auto;
}
.mp-burger span { display: block; width: 20px; height: 2px; background: var(--mp-ink); position: relative; }
.mp-burger span::before, .mp-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--mp-ink); }
.mp-burger span::before { top: -6px; } .mp-burger span::after { top: 6px; }

@media (max-width: 640px) {
  .mp-nav-cta { padding: 7px 12px; font-size: 0.75rem; gap: 4px; }
  .mp-nav-cta .mp-cta-label-long { display: none; }
  .mp-nav-cta .mp-cta-label-short { display: inline; }
}
@media (max-width: 860px) {
  .mp-burger { display: inline-flex; }
  .mp-nav-links {
    order: 4; flex-basis: 100%; flex-direction: column; gap: var(--mp-s-2);
    max-height: 0; overflow: hidden; transition: max-height var(--mp-t-anim);
  }
  .mp-nav-toggle:checked ~ .mp-nav-links { max-height: 420px; margin-top: var(--mp-s-3); }
}

/* ==========================================================================
   5b. 3-TIER HEADER (mp-head3): banner + centered emblem + nav row
   ========================================================================== */
.mp-head3 { position: static; padding: 0; background: var(--mp-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--mp-border); }
.mp-head3-banner { position: relative; overflow: hidden; height: 138px; display: flex; align-items: center; justify-content: center; background: var(--mp-bg); }
.mp-head3-stripes { position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(90deg,
    #c8101a 0 6.66%, #e0487b 6.66% 13.33%, #17795c 13.33% 20%,
    #e0487b 20% 26.66%, #e0487b 26.66% 33.33%, #8c2f22 33.33% 40%,
    #a80a12 40% 46.66%, #c8101a 46.66% 53.33%);
  background-size: 200% 100%; opacity: 0.9; filter: saturate(1.05); }
.mp-head3-stripes::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(120,72,20,0.06) 0 2px, transparent 2px 11px); mix-blend-mode: multiply; }
.mp-head3-veil { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(125% 95% at 50% 46%, rgba(255,243,230,0.10), rgba(255,243,230,0.82) 72%),
              linear-gradient(180deg, rgba(255,243,230,0.30) 0%, rgba(255,243,230,0.52) 100%); }
.mp-head3-emblem { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 26px; text-decoration: none; background: rgba(255,243,230,0.74);
  border: 1px solid rgba(200,16,26,0.55); border-radius: 16px;
  box-shadow: 0 12px 32px -10px rgba(120,72,20,0.16), 0 0 0 4px rgba(255,243,230,0.30), 0 0 28px var(--mp-brand-glow);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: transform var(--mp-t-anim), box-shadow var(--mp-t-anim); }
.mp-head3-emblem:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -10px rgba(120,72,20,0.16), 0 0 0 4px rgba(255,243,230,0.30), 0 0 34px var(--mp-brand-glow); }
.mp-head3-emblem img { width: 52px; height: 52px; filter: drop-shadow(0 4px 12px var(--mp-brand-glow)); }
.mp-head3-emblem-txt { display: flex; flex-direction: column; line-height: 1.12; }
.mp-head3-emblem-title { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--mp-ink); }
.mp-head3-emblem-title b { color: var(--mp-brand-light); font-weight: 800; }
.mp-head3-emblem-tag { font-family: var(--mp-font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mp-brand-light); margin-top: 4px; }
.mp-head3-nav { background: rgba(255,243,230,0.94); border-top: 1px solid var(--mp-border); position: sticky; top: 0; z-index: 55; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mp-head3-nav-inner { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; padding: 11px 0; }
.mp-head3 .mp-nav-links { flex: 1 1 auto; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.mp-head3 .mp-nav-links a { font-size: 0.78rem; letter-spacing: 0.06em; }
.mp-head3 .mp-nav-cta { position: static; transform: none; flex: 0 0 auto; }
@media (max-width: 860px) {
  .mp-head3-banner { height: 108px; }
  .mp-head3-emblem { padding: 10px 18px; gap: 10px; }
  .mp-head3-emblem img { width: 40px; height: 40px; }
  .mp-head3-emblem-title { font-size: 1.2rem; }
  /* burger + CTA share row 1; menu collapses to row 2 */
  .mp-head3-nav-inner { justify-content: space-between; gap: 8px; }
  .mp-head3 .mp-burger { order: 1; }
  .mp-head3 .mp-nav-cta { order: 2; flex: 1 1 0; min-width: 0; justify-content: center; }
  .mp-head3 .mp-nav-links { order: 3; flex-basis: 100%; width: 100%; justify-content: flex-start; }
}

/* ==========================================================================
   6. TICKER STRIP
   ========================================================================== */
.mp-ticker {
  background: var(--mp-bg-1);
  border-bottom: 1px solid var(--mp-border);
  padding: 10px 0; overflow: hidden; position: relative;
}
.mp-ticker::before, .mp-ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.mp-ticker::before { left: 0; background: linear-gradient(90deg, var(--mp-bg-1), transparent); }
.mp-ticker::after  { right: 0; background: linear-gradient(-90deg, var(--mp-bg-1), transparent); }
.mp-ticker-track {
  display: inline-flex; gap: var(--mp-s-3); white-space: nowrap;
  animation: mp-ticker-scroll 38s linear infinite;
}
.mp-ticker-chip {
  display: inline-flex; align-items: center; gap: var(--mp-s-2);
  font-family: var(--mp-font-mono);
  font-size: 0.75rem; font-weight: 600;
  color: var(--mp-ink-2);
  background: rgba(200,16,26,0.05);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-pill);
  padding: 5px 12px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mp-ticker-chip strong { color: var(--mp-brand-light); font-weight: 700; }
.mp-ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mp-leaf); box-shadow: 0 0 8px var(--mp-leaf-glow); }
@keyframes mp-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.mp-hero {
  padding: var(--mp-s-9) 0 var(--mp-s-8);
  position: relative; background: var(--mp-grad-hero); overflow: hidden;
}
.mp-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,16,26,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,16,26,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask: radial-gradient(circle at 70% 0%, black, transparent 70%);
  pointer-events: none;
}
.mp-hero-grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--mp-s-7); align-items: start;
}
.mp-hero-eyebrow {
  display: inline-block;
  font-family: var(--mp-font-mono);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: var(--mp-leaf);
  background: rgba(200,16,26,0.08);
  padding: 5px 14px; border-radius: var(--mp-radius-pill);
  border: 1px solid rgba(200,16,26,0.30);
  margin-bottom: var(--mp-s-4);
}
.mp-mega-h1 {
  font-family: var(--mp-font-display); font-weight: 800;
  font-size: var(--mp-t-mega); line-height: 1.08; letter-spacing: -0.035em;
  margin: 0 0 var(--mp-s-4); color: var(--mp-ink);
}
.mp-mega-h1 span { }
.mp-hero-lede {
  font-size: 1.125rem; color: var(--mp-ink-2);
  max-width: 34em; margin-bottom: var(--mp-s-6); line-height: 1.55;
}
.mp-hero-ctas { display: flex; gap: var(--mp-s-3); flex-wrap: wrap; margin-bottom: var(--mp-s-7); }

.mp-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-s-3); margin-top: var(--mp-s-6); }
.mp-hero-stat {
  display: flex; flex-direction: column; gap: var(--mp-s-1);
  padding: var(--mp-s-3) var(--mp-s-4);
  background: var(--mp-bg-card); border: 1px solid var(--mp-border); border-radius: var(--mp-radius);
}
.mp-hero-stat-num {
  font-family: var(--mp-font-display); font-size: 1.625rem; font-weight: 800;
  line-height: 1; letter-spacing: -0.02em;
  color: var(--mp-brand-light);
}
.mp-hero-stat-num.mp-leaf-tx { color: var(--mp-leaf); }
.mp-hero-stat-num.mp-red-tx  { color: var(--mp-red); }
.mp-hero-stat-num.mp-num-sm  { font-size: 1.125rem; }
.mp-hero-stat-label {
  font-family: var(--mp-font-mono);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--mp-ink-3);
}

.mp-data-panel {
  background: var(--mp-grad-card);
  border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-xl);
  padding: var(--mp-s-5); position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(200,16,26,0.15), 0 30px 80px -20px rgba(120,72,20,0.16), inset 0 1px 0 rgba(200,16,26,0.10);
}
.mp-panel-label {
  font-family: var(--mp-font-mono);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
  color: var(--mp-brand); margin-bottom: var(--mp-s-3);
  display: flex; align-items: center; gap: var(--mp-s-2);
}
.mp-panel-label::before {
  content: ""; width: 18px; height: 2px; background: var(--mp-brand); display: inline-block; border-radius: 2px; box-shadow: 0 0 8px var(--mp-brand-glow);
}
.mp-panel-source { font-size: 0.75rem; color: var(--mp-ink-3); margin-top: var(--mp-s-3); font-family: var(--mp-font-mono); }
.mp-sparkline { width: 100%; height: 110px; display: block; filter: drop-shadow(0 0 12px var(--mp-brand-glow)); }
.mp-panel-rows { display: flex; flex-direction: column; gap: var(--mp-s-3); margin-top: var(--mp-s-4); }
.mp-panel-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-s-3);
  padding: var(--mp-s-3) var(--mp-s-4);
  background: rgba(200,16,26,0.04); border: 1px solid var(--mp-border); border-radius: var(--mp-radius);
}
.mp-panel-row-k { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mp-ink-3); }
.mp-panel-row-v { font-family: var(--mp-font-display); font-weight: 800; color: var(--mp-brand-light); font-size: 1.0625rem; }

/* ==========================================================================
   8. BUTTONS
   ========================================================================== */
.mp-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--mp-radius);
  text-decoration: none; font-family: var(--mp-font-display);
  font-weight: 700; font-size: 0.9375rem;
  border: 1px solid transparent; cursor: pointer; line-height: 1.2;
  transition: transform var(--mp-t-anim), box-shadow var(--mp-t-anim);
  white-space: nowrap; letter-spacing: -0.005em;
}
.mp-btn-lg { padding: 15px 28px; font-size: 1rem; }
.mp-btn-xl { padding: 17px 32px; font-size: 1.0625rem; }
.mp-btn:hover { transform: translateY(-2px); }
.mp-btn-primary {
  background: var(--mp-grad-cta); color: var(--mp-brand-ink);
  box-shadow: 0 12px 32px -10px var(--mp-brand-glow), 0 0 0 1px rgba(200,16,26,0.40) inset;
}
.mp-btn-primary:hover {
  color: var(--mp-brand-ink);
  box-shadow: 0 18px 44px -12px var(--mp-brand-glow), 0 0 0 1px rgba(200,16,26,0.50) inset;
}
.mp-btn-ghost {
  background: rgba(200,16,26,0.04); border-color: var(--mp-border-strong); color: var(--mp-ink);
}
.mp-btn-ghost:hover { border-color: var(--mp-brand); color: var(--mp-brand-light); background: rgba(200,16,26,0.10); }

/* ==========================================================================
   9. STAT-STRIP
   ========================================================================== */
.mp-stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--mp-border-strong); border-radius: var(--mp-radius-lg);
  overflow: hidden; margin: 0 0 var(--mp-s-8); box-shadow: var(--mp-shadow-lg);
}
.mp-stat { background: linear-gradient(180deg, var(--mp-bg-card), #ffffff); padding: var(--mp-s-5); display: flex; flex-direction: column; gap: var(--mp-s-2); }
.mp-stat-figure {
  font-family: var(--mp-font-display); font-weight: 800;
  font-size: clamp(1.625rem, 3vw, 2.375rem); line-height: 1;
  color: var(--mp-brand-light); letter-spacing: -0.025em;
}
.mp-stat-figure-small { font-size: clamp(1.25rem, 2.4vw, 1.625rem); }
.mp-stat-figure-leaf { color: var(--mp-leaf); }
.mp-stat-figure-red  { color: var(--mp-red); }
.mp-stat-label { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.10em; color: var(--mp-ink-2); font-weight: 600; }
.mp-stat-source { font-family: var(--mp-font-mono); font-size: 0.6875rem; color: var(--mp-ink-3); margin-top: auto; opacity: 0.85; }

/* ==========================================================================
   10. STEPS
   ========================================================================== */
.mp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mp-s-4); counter-reset: mp-step; margin: var(--mp-s-6) 0; list-style: none; padding: 0; }
.mp-steps > li { list-style: none; }
.mp-step {
  background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-lg); padding: var(--mp-s-6);
  position: relative; counter-increment: mp-step; box-shadow: var(--mp-shadow);
  transition: transform var(--mp-t-anim);
}
.mp-step:hover { transform: translateY(-3px); }
.mp-step::before {
  content: counter(mp-step);
  /* Float, not absolute: the badge must occupy space so the step's own first line wraps
     around it. The stylesheet used to reserve room with `.mp-step h3 { padding-right }`,
     which silently did nothing on the steps written as <p><strong> or bare <strong>. */
  float: right; margin: 0 0 var(--mp-s-2) var(--mp-s-4);
  font-family: var(--mp-font-display); font-weight: 800; font-size: 2.5rem;
  background: linear-gradient(135deg, var(--mp-brand), var(--mp-deco));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: 0.55; line-height: 1;
}
.mp-step::after { content: ""; display: block; clear: both; }
.mp-step h3 { font-family: var(--mp-font-display); font-size: 1.125rem; font-weight: 700; margin: 0 0 var(--mp-s-3); color: var(--mp-ink); }
.mp-step p { margin: 0 0 var(--mp-s-3); font-size: var(--mp-t-sm); color: var(--mp-ink-2); }
.mp-step-time {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.10em;
  font-weight: 700; color: var(--mp-leaf);
  background: rgba(200,16,26,0.10); padding: 4px 12px; border-radius: var(--mp-radius-pill);
  border: 1px solid rgba(200,16,26,0.25);
}

/* ==========================================================================
   11. GAME TILES
   ========================================================================== */
.mp-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mp-s-4); }
.mp-game {
  background: var(--mp-bg-card); border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg); overflow: hidden;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: transform var(--mp-t-anim), box-shadow var(--mp-t-anim);
}
.mp-game:hover { transform: translateY(-3px); box-shadow: var(--mp-shadow-lg); }
.mp-game-art {
  height: 140px; position: relative; display: flex; align-items: center; justify-content: center;
  font-family: var(--mp-font-display); font-size: 2.5rem; font-weight: 800;
  color: rgba(12,6,9,0.92); letter-spacing: -0.04em; overflow: hidden;
}
.mp-game-art::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgba(18,18,18,0.20), transparent 50%); pointer-events: none; }
.mp-game-art-aviator   { background: linear-gradient(135deg, #c8101a, #e0487b); }
.mp-game-art-superkick { background: linear-gradient(135deg, #c8101a, #a80a12); }
.mp-game-art-madpunch  { background: linear-gradient(135deg, #e0487b, #c8101a); }
.mp-game-art-spin      { background: linear-gradient(135deg, #e0487b, #a80a12); }
.mp-game-art-mcards    { background: linear-gradient(135deg, #a80a12, #e0487b); }
.mp-game-art-mines     { background: linear-gradient(135deg, #c8101a, #e3e7ec); }
.mp-game-tag {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--mp-font-mono); font-size: 0.6875rem; font-weight: 700;
  background: rgba(255,243,230,0.65); color: var(--mp-ink);
  padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid rgba(18,18,18,0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.mp-game-tag-native { color: var(--mp-leaf); border-color: rgba(200,16,26,0.40); }
.mp-game-body { padding: var(--mp-s-4) var(--mp-s-5); display: flex; flex-direction: column; gap: var(--mp-s-2); }
.mp-game-name { font-family: var(--mp-font-display); font-size: 1.0625rem; font-weight: 700; margin: 0; color: var(--mp-ink); letter-spacing: -0.015em; }
.mp-game-meta { display: flex; gap: var(--mp-s-3); align-items: center; font-family: var(--mp-font-mono); font-size: 0.6875rem; color: var(--mp-ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.mp-game-rtp { background: rgba(200,16,26,0.10); color: var(--mp-leaf); border: 1px solid rgba(200,16,26,0.22); padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.mp-game-cta { font-family: var(--mp-font-mono); font-size: 0.75rem; font-weight: 700; color: var(--mp-brand-light); text-transform: uppercase; letter-spacing: 0.08em; }

/* ==========================================================================
   12. PROMO ROW
   ========================================================================== */
.mp-promo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-s-4); }
.mp-promo {
  position: relative; overflow: hidden;
  background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-lg); padding: var(--mp-s-5);
  display: flex; flex-direction: column; gap: var(--mp-s-3);
  text-decoration: none; color: inherit; transition: transform var(--mp-t-anim);
}
.mp-promo:hover { transform: translateY(-3px); border-color: var(--mp-brand); }
.mp-promo-leaf { background: radial-gradient(120% 80% at 0% 100%, rgba(200,16,26,0.18), transparent 50%), linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2)); border-color: rgba(200,16,26,0.30); }
.mp-promo-tag {
  font-family: var(--mp-font-mono); font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em; color: var(--mp-amber);
  background: rgba(224,72,123,0.10); border: 1px solid rgba(224,72,123,0.28);
  padding: 3px 10px; border-radius: var(--mp-radius-pill); align-self: flex-start;
}
.mp-promo-tag-on  { color: var(--mp-leaf); background: rgba(200,16,26,0.08); border-color: rgba(200,16,26,0.28); }
.mp-promo-amount { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.875rem; line-height: 1; color: var(--mp-brand-light); letter-spacing: -0.02em; }
.mp-promo-name { font-family: var(--mp-font-display); font-weight: 700; font-size: 1.0625rem; color: var(--mp-ink); margin: 0; }
.mp-promo-desc { font-size: 0.875rem; color: var(--mp-ink-2); margin: 0; line-height: 1.5; }
.mp-promo-cta { font-family: var(--mp-font-mono); font-size: 0.75rem; font-weight: 700; color: var(--mp-brand-light); text-transform: uppercase; letter-spacing: 0.08em; margin-top: auto; }

/* ==========================================================================
   13. COMPARE TABLE
   ========================================================================== */
.mp-cmp { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); overflow: hidden; box-shadow: var(--mp-shadow); }
.mp-cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--mp-t-sm); }
.mp-cmp-table th, .mp-cmp-table td { padding: var(--mp-s-3) var(--mp-s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--mp-border); }
.mp-cmp-table thead th { font-family: var(--mp-font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 700; color: var(--mp-ink-3); background: var(--mp-bg-1); border-bottom: 1px solid var(--mp-border-strong); }
.mp-cmp-col-us { background: linear-gradient(180deg, rgba(200,16,26,0.10), rgba(200,16,26,0.04)); color: var(--mp-brand-light) !important; border-left: 1px solid var(--mp-border-strong); border-right: 1px solid var(--mp-border-strong); font-weight: 700; }
.mp-cmp-table tbody tr:last-child td { border-bottom: 0; }
.mp-cmp-table tbody td { color: var(--mp-ink-2); }
.mp-cmp-yes  { color: var(--mp-leaf); font-weight: 700; }
.mp-cmp-no   { color: var(--mp-red);  font-weight: 700; }
.mp-cmp-mid  { color: var(--mp-amber); font-weight: 700; }

/* ==========================================================================
   14. TRUST STRIP
   ========================================================================== */
.mp-trust-strip { background: linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border-top: 1px solid var(--mp-border); border-bottom: 1px solid var(--mp-border); padding: var(--mp-s-6) 0; }
.mp-trust-strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-s-5); max-width: var(--mp-max-w); margin: 0 auto; padding: 0 var(--mp-s-5); }
.mp-trust-item { display: grid; grid-template-columns: 36px 1fr; gap: var(--mp-s-3); align-items: center; }
.mp-trust-item-icon { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--mp-brand), var(--mp-deco)); color: var(--mp-brand-ink); display: grid; place-items: center; font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; box-shadow: 0 0 18px var(--mp-brand-glow); }
.mp-trust-item-label { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.10em; color: var(--mp-ink-3); font-weight: 600; }
.mp-trust-item-val { font-family: var(--mp-font-display); font-weight: 700; color: var(--mp-ink); font-size: 0.9375rem; }
.mp-trust-strip-score { max-width: var(--mp-max-w); margin: var(--mp-s-5) auto 0; padding: var(--mp-s-5) var(--mp-s-5) 0; display: flex; align-items: center; gap: var(--mp-s-4); flex-wrap: wrap; border-top: 1px solid var(--mp-border); }
.mp-trust-strip-score-val { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.875rem; color: var(--mp-brand-light); line-height: 1; }
.mp-trust-strip-score-val small { color: var(--mp-ink-3); font-size: 0.875rem; font-weight: 600; }
.mp-trust-strip-score a { color: var(--mp-ink-2); font-family: var(--mp-font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; }
.mp-trust-strip-score a:hover { color: var(--mp-brand-light); }

/* ==========================================================================
   15. ARTICLE
   ========================================================================== */
.mp-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--mp-s-7); padding: var(--mp-s-8) 0; position: relative; }
.mp-prose { max-width: 72ch; color: var(--mp-ink-2); }
.mp-prose img { max-width: 100%; height: auto; border-radius: var(--mp-radius); }
.mp-prose h1 { color: var(--mp-ink); font-size: clamp(1.875rem, 3.6vw, 2.5rem); margin-bottom: var(--mp-s-4); }
.mp-prose h2 { position: relative; padding-top: var(--mp-s-3); color: var(--mp-ink); margin-top: var(--mp-s-8); font-family: var(--mp-font-display); }
.mp-prose h2::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--mp-brand), var(--mp-deco)); }
.mp-prose h3 { color: var(--mp-ink); margin-top: var(--mp-s-5); font-family: var(--mp-font-display); }
.mp-prose p { color: var(--mp-ink-2); }
.mp-prose ul, .mp-prose ol { padding-left: 22px; color: var(--mp-ink-2); }
.mp-prose li { margin: var(--mp-s-2) 0; }
.mp-prose a:not([class*="mp-btn"]) { color: var(--mp-brand-light); border-bottom: 1px solid rgba(200,16,26,0.30); padding-bottom: 1px; }
.mp-prose a:not([class*="mp-btn"]):hover { color: var(--mp-brand); border-color: var(--mp-brand); }
.mp-prose strong { color: var(--mp-ink); }
.mp-prose code { background: rgba(200,16,26,0.10); padding: 1px 6px; border-radius: 4px; font-size: 0.875em; font-family: var(--mp-font-mono); color: var(--mp-leaf); }
.mp-prose blockquote { margin: var(--mp-s-5) 0; padding: var(--mp-s-5) var(--mp-s-6); border-left: 4px solid var(--mp-brand); background: linear-gradient(90deg, rgba(200,16,26,0.10), transparent); border-radius: 0 var(--mp-radius-lg) var(--mp-radius-lg) 0; color: var(--mp-ink); font-family: var(--mp-font-serif); font-style: italic; font-size: 1.0625rem; }
.mp-prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--mp-s-5) 0; border-radius: var(--mp-radius-lg); overflow: hidden; background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); box-shadow: var(--mp-shadow); }
.mp-prose thead { background: linear-gradient(180deg, rgba(200,16,26,0.16), rgba(200,16,26,0.06)); }
.mp-prose th { font-family: var(--mp-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mp-ink); font-weight: 700; padding: var(--mp-s-3) var(--mp-s-4); text-align: left; border-bottom: 1px solid var(--mp-border-strong); }
.mp-prose td { padding: var(--mp-s-3) var(--mp-s-4); text-align: left; font-size: var(--mp-t-sm); color: var(--mp-ink-2); border-bottom: 1px solid var(--mp-border); vertical-align: top; }
.mp-prose tbody tr:last-child td { border-bottom: 0; }
.mp-prose tbody tr:nth-child(odd) td { background: rgba(200,16,26,0.02); }

.mp-verdict { font-family: var(--mp-font-serif); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--mp-ink); padding: var(--mp-s-6) var(--mp-s-7); background: linear-gradient(90deg, rgba(200,16,26,0.12), transparent); border-left: 4px solid var(--mp-brand); border-radius: 0 var(--mp-radius-lg) var(--mp-radius-lg) 0; margin: var(--mp-s-6) 0; position: relative; }
.mp-verdict-byline { font-family: var(--mp-font-mono); font-style: normal; font-size: 0.75rem; color: var(--mp-ink-3); margin-top: var(--mp-s-3); text-transform: uppercase; letter-spacing: 0.08em; }
.mp-verdict-byline strong { color: var(--mp-brand-light); }

/* Callout box */
.mp-callout { background: linear-gradient(135deg, rgba(200,16,26,0.12), rgba(200,16,26,0.03)), linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2)); border-left: 4px solid var(--mp-brand); padding: 18px 20px; margin: 1.75rem 0; border-radius: 0 var(--mp-radius-lg) var(--mp-radius-lg) 0; font-size: 0.9375rem; color: var(--mp-ink-2); line-height: 1.6; box-shadow: var(--mp-shadow); }
.mp-callout-h { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; color: var(--mp-brand-light); margin-bottom: 6px; letter-spacing: -0.015em; }
.mp-callout-warn { border-left-color: var(--mp-red); background: linear-gradient(135deg, rgba(140,47,34,0.10), rgba(140,47,34,0.03)), linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2)); }
.mp-callout-warn .mp-callout-h { color: var(--mp-red); }

/* Inline article CTA block */
.mp-inline-cta { background: radial-gradient(120% 80% at 100% 0%, rgba(200,16,26,0.22), transparent 55%), linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: 24px; margin: 2rem 0; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; box-shadow: var(--mp-shadow-lg); }
.mp-inline-cta-h { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.25rem; color: var(--mp-ink); margin-bottom: 4px; letter-spacing: -0.02em; }
.mp-inline-cta-sub { color: var(--mp-ink-2); font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 560px) { .mp-inline-cta { grid-template-columns: 1fr; } }

/* ==========================================================================
   16. FAQ details
   ========================================================================== */
/* Кожен <details class="mp-faq"> — окрема клікабельна картка */
.mp-faq { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: 12px; overflow: hidden; box-shadow: var(--mp-shadow); margin-bottom: 12px; transition: border-color var(--mp-t-anim), box-shadow var(--mp-t-anim); }
.mp-faq:last-of-type { margin-bottom: 0; }
.mp-faq:hover { border-color: rgba(200,16,26,0.35); }
.mp-faq[open] { border-color: rgba(200,16,26,0.45); }
.mp-faq > summary { padding: 18px 22px; font-family: var(--mp-font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.4; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; color: var(--mp-ink); letter-spacing: -0.01em; transition: color var(--mp-t-anim); }
.mp-faq > summary:hover, .mp-faq[open] > summary { color: var(--mp-brand-light); }
.mp-faq > summary::-webkit-details-marker { display: none; }
.mp-faq > summary::after { content: "+"; flex-shrink: 0; color: var(--mp-brand-light); font-size: 1.5rem; font-weight: 400; line-height: 1; width: 30px; height: 30px; display: inline-grid; place-items: center; background: rgba(200,16,26,0.12); border: 1px solid rgba(200,16,26,0.40); border-radius: 50%; transition: transform var(--mp-t-anim); }
.mp-faq[open] > summary::after { transform: rotate(45deg); }
/* Guard: if the markup already ships its own toggle icon, don't draw a second one */
.mp-faq > summary:has(.mp-faq-ico)::after { content: none; }
.mp-faq > summary .mp-faq-ico { flex-shrink: 0; color: var(--mp-brand-light); font-size: 1.5rem; font-weight: 400; line-height: 1; width: 30px; height: 30px; display: inline-grid; place-items: center; background: rgba(200,16,26,0.12); border: 1px solid rgba(200,16,26,0.40); border-radius: 50%; transition: transform var(--mp-t-anim); }
.mp-faq[open] > summary .mp-faq-ico { transform: rotate(45deg); }
.mp-faq > div { padding: 4px 22px 18px; color: var(--mp-ink-2); font-size: 0.9375rem; line-height: 1.65; border-top: 1px solid var(--mp-border); padding-top: 14px; }
.mp-faq > div p { margin: 0 0 0.75rem; }
.mp-faq > div p:last-child { margin-bottom: 0; }

/* ==========================================================================
   17. SIDEBAR
   ========================================================================== */
.mp-side { display: flex; flex-direction: column; gap: var(--mp-s-4); position: sticky; top: 88px; align-self: start; }
.mp-side-card { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: var(--mp-s-5); box-shadow: var(--mp-shadow); }
.mp-side-title { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mp-brand); font-weight: 700; margin: 0 0 var(--mp-s-3); display: flex; align-items: center; gap: var(--mp-s-2); }
.mp-side-title::before { content: ""; width: 14px; height: 2px; background: var(--mp-brand); display: inline-block; }
.mp-side-list { list-style: none; padding: 0; margin: 0; font-size: 0.9375rem; }
.mp-side-list li { margin: 0.5rem 0; }
.mp-side-list a { color: var(--mp-ink-2); text-decoration: none; }
.mp-side-list a:hover { color: var(--mp-brand-light); }
.mp-side-src { list-style: none; padding: 0; margin: 0; font-size: 0.8125rem; color: var(--mp-ink-3); line-height: 1.6; font-family: var(--mp-font-mono); }

/* ==========================================================================
   18. BYLINE + AUTHOR CARD
   ========================================================================== */
.mp-byline { display: flex; align-items: center; gap: var(--mp-s-3); padding: var(--mp-s-4) 0; border-top: 1px solid var(--mp-border); border-bottom: 1px solid var(--mp-border); margin: var(--mp-s-5) 0; }
.mp-byline-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--mp-leaf), var(--mp-leaf-deep)); color: var(--mp-brand-ink); display: grid; place-items: center; font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; box-shadow: 0 8px 24px -8px var(--mp-leaf-glow); }
.mp-byline-meta { font-size: var(--mp-t-sm); color: var(--mp-ink-2); line-height: 1.4; font-family: var(--mp-font-mono); }
.mp-byline-name { color: var(--mp-ink); font-weight: 700; }

.mp-author-card { background: radial-gradient(120% 80% at 0% 0%, rgba(200,16,26,0.10), transparent 50%), var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: var(--mp-s-5); margin: var(--mp-s-7) 0; display: grid; grid-template-columns: 72px 1fr; gap: var(--mp-s-5); box-shadow: var(--mp-shadow); }
.mp-author-card-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--mp-leaf), var(--mp-leaf-deep)); color: var(--mp-brand-ink); display: grid; place-items: center; font-family: var(--mp-font-display); font-weight: 800; font-size: 1.625rem; box-shadow: 0 12px 32px -10px var(--mp-leaf-glow); }
.mp-author-card-h { font-family: var(--mp-font-display); font-weight: 700; font-size: 1.125rem; margin: 0 0 4px; color: var(--mp-ink); }
.mp-author-card-role { font-family: var(--mp-font-mono); font-size: 0.75rem; color: var(--mp-ink-3); text-transform: uppercase; letter-spacing: 0.10em; margin-bottom: var(--mp-s-2); }
.mp-author-card-bio { font-size: var(--mp-t-sm); color: var(--mp-ink-2); margin: 0; line-height: 1.6; }

/* ==========================================================================
   19. FINAL CTA BLOCK
   ========================================================================== */
.mp-cta-block { position: relative; overflow: hidden; border-radius: var(--mp-radius-xl); padding: var(--mp-s-9) var(--mp-s-6); background: radial-gradient(80% 100% at 50% 0%, rgba(200,16,26,0.30), transparent 55%), radial-gradient(60% 80% at 50% 100%, rgba(224,72,123,0.12), transparent 55%), linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border: 1px solid var(--mp-border-strong); text-align: center; box-shadow: var(--mp-shadow-lg); }
.mp-cta-block::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(200,16,26,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(200,16,26,0.05) 1px, transparent 1px); background-size: 32px 32px; mask: radial-gradient(circle at 50% 50%, black, transparent 75%); pointer-events: none; opacity: 0.5; }
.mp-cta-block-inner { position: relative; max-width: 720px; margin: 0 auto; }
.mp-cta-block-eyebrow { display: inline-block; font-family: var(--mp-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--mp-amber); background: rgba(224,72,123,0.10); padding: 5px 14px; border-radius: var(--mp-radius-pill); border: 1px solid rgba(224,72,123,0.30); margin-bottom: var(--mp-s-4); }
.mp-cta-block-h { font-family: var(--mp-font-display); font-size: var(--mp-t-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; color: var(--mp-ink); margin: 0 0 var(--mp-s-4); }
.mp-cta-block-sub { font-size: 1.0625rem; color: var(--mp-ink-2); max-width: 56ch; margin: 0 auto var(--mp-s-6); }
.mp-cta-block-terms { font-family: var(--mp-font-mono); font-size: 0.6875rem; color: var(--mp-ink-3); margin-top: var(--mp-s-5); letter-spacing: 0.04em; }
.mp-cta-block-terms a { color: var(--mp-brand-light); }

/* ==========================================================================
   20. STICKY BOTTOM CTA (mobile)
   ========================================================================== */
.mp-bottom-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border-top: 1px solid var(--mp-border-strong); padding: 10px var(--mp-s-4); align-items: center; gap: var(--mp-s-3); box-shadow: 0 -12px 24px rgba(120,72,20,0.14); }
.mp-bottom-cta-text { flex: 1; font-size: 0.8125rem; color: var(--mp-ink); }
.mp-bottom-cta-text strong { color: var(--mp-brand-light); font-weight: 700; }
.mp-bottom-cta a { background: var(--mp-grad-cta); color: var(--mp-brand-ink); font-family: var(--mp-font-display); font-weight: 700; text-decoration: none; padding: 10px 16px; border-radius: var(--mp-radius); font-size: 0.875rem; box-shadow: 0 8px 18px -6px var(--mp-brand-glow); display: inline-flex; align-items: center; justify-content: center; text-align: center; }

/* ==========================================================================
   21. FOOTER
   ========================================================================== */
.mp-foot { background: radial-gradient(80% 100% at 100% 0%, rgba(200,16,26,0.10), transparent 60%), radial-gradient(80% 100% at 0% 100%, rgba(200,16,26,0.06), transparent 60%), linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border-top: 1px solid var(--mp-border-strong); padding: var(--mp-s-8) 0 var(--mp-s-5); margin-top: var(--mp-s-9); position: relative; }
.mp-foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--mp-brand), var(--mp-deco), var(--mp-brand-deep)); }
.mp-foot-top { display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: var(--mp-s-7); }
.mp-foot-brand-row { display: flex; align-items: center; gap: var(--mp-s-3); margin-bottom: var(--mp-s-3); }
.mp-foot-brand-row img { width: 28px; height: 28px; }
.mp-foot-brand-row span { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; color: var(--mp-ink); }
.mp-foot-col h4 { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mp-ink-3); margin: 0 0 var(--mp-s-3); font-weight: 700; }
.mp-foot-col ul { list-style: none; padding: 0; margin: 0; font-size: var(--mp-t-sm); }
.mp-foot-col li { margin: var(--mp-s-2) 0; }
.mp-foot-col a { color: var(--mp-ink-2); text-decoration: none; border-bottom: 1px solid transparent; font-family: var(--mp-font-mono); font-size: 0.8125rem; }
.mp-foot-col a:hover { color: var(--mp-brand-light); border-color: rgba(200,16,26,0.4); }
.mp-foot-disclaimer-box { background: rgba(140,47,34,0.06); border: 1px solid rgba(140,47,34,0.25); border-radius: var(--mp-radius); padding: var(--mp-s-3) var(--mp-s-4); font-size: 0.8125rem; color: var(--mp-ink-2); margin-top: var(--mp-s-4); display: flex; align-items: flex-start; gap: var(--mp-s-3); }
.mp-foot-disclaimer-box a { color: var(--mp-leaf); }
.mp-foot-age-mark { flex-shrink: 0; font-family: var(--mp-font-display); font-weight: 800; font-size: 1rem; color: var(--mp-red); background: rgba(140,47,34,0.10); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(140,47,34,0.30); }
.mp-foot-bottom { margin-top: var(--mp-s-6); padding-top: var(--mp-s-4); border-top: 1px solid var(--mp-border); font-family: var(--mp-font-mono); font-size: 0.75rem; color: var(--mp-ink-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--mp-s-3); }

/* ==========================================================================
   22. SKIP LINK + REDUCED MOTION + RESPONSIVE
   ========================================================================== */
.mp-skip-link { position: absolute; left: -9999px; }
.mp-skip-link:focus { position: fixed !important; left: var(--mp-s-4) !important; top: var(--mp-s-4) !important; z-index: 9999 !important; padding: var(--mp-s-3) var(--mp-s-4) !important; background: var(--mp-brand) !important; color: var(--mp-brand-ink) !important; font-weight: 800 !important; border-radius: var(--mp-radius) !important; box-shadow: var(--mp-shadow-lg) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .mp-ticker-track { animation: none !important; }
}

@media (max-width: 980px) {
  .mp-grid-12 > .mp-col-7, .mp-grid-12 > .mp-col-5 { grid-column: 1 / -1; }
  .mp-hero { padding: var(--mp-s-7) 0; }
  .mp-hero-grid { grid-template-columns: 1fr; gap: var(--mp-s-6); }
  .mp-hero-stats { grid-template-columns: 1fr 1fr; }
  .mp-stat-strip { grid-template-columns: 1fr 1fr; margin-bottom: var(--mp-s-7); }
  .mp-steps { grid-template-columns: 1fr; }
  .mp-games { grid-template-columns: 1fr 1fr; }
  .mp-promo-grid { grid-template-columns: 1fr 1fr; }
  .mp-trust-strip-inner { grid-template-columns: 1fr 1fr; }
  .mp-article-grid { grid-template-columns: 1fr; }
  .mp-side { position: static; }
  .mp-foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mp-bottom-cta { display: flex; }
  body { padding-bottom: 64px; }
  .mp-offer-bar-inner { font-size: 0.8125rem; }
  .mp-hero-stats { grid-template-columns: 1fr 1fr; }
  .mp-stat-strip { grid-template-columns: 1fr 1fr; }
  .mp-games { grid-template-columns: 1fr; }
  .mp-promo-grid { grid-template-columns: 1fr; }
  .mp-trust-strip-inner { grid-template-columns: 1fr; }
  .mp-cmp-table { font-size: 0.8125rem; }
  .mp-cmp-table th, .mp-cmp-table td { padding: var(--mp-s-2) var(--mp-s-3); }
  .mp-cta-block { padding: var(--mp-s-7) var(--mp-s-4); }
  .mp-foot-top { grid-template-columns: 1fr; }
  .mp-author-card { grid-template-columns: 56px 1fr; }
  .mp-author-card-avatar { width: 56px; height: 56px; font-size: 1.375rem; }
}

/* --- MANDATORY layout-safety & responsive baseline --- */
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
img,svg,video,canvas{max-width:100%;height:auto}
h1,h2,h3,h4,p,a,li,td,th{overflow-wrap:break-word}
.container,.wrap{width:100%;max-width:var(--container,1200px);margin-inline:auto;padding-inline:clamp(16px,4vw,28px)}
main,header,footer,section>.container,.container{position:relative;z-index:1}
.btn-cta,.btn-2{min-height:44px;display:inline-flex;align-items:center}
.mp-btn,.mp-nav-cta,.mp-bottom-cta a{min-height:44px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:560px){ table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} }
input,select,textarea{font-size:16px}
.grid-auto{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* === MOBILE HEADER STANDARD (apply-mobile-header.py) === */
.kb-brand-line,.mp-brand-line{min-width:0}
.kb-brand-line img,.mp-brand-line img{flex:0 0 auto}
.kb-brand-name,.mp-brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:860px){
  .kb-topbar nav.wrap,.mp-topbar nav.wrap{flex-wrap:wrap;column-gap:12px;row-gap:8px}
  .kb-brand-line,.mp-brand-line{order:1;flex:1 1 auto;min-width:0;margin-right:0}
  .kb-brand-name,.mp-brand-name{font-size:0.95rem}
  .kb-nav-burger,.mp-burger{order:2;flex:0 0 auto;display:inline-flex;margin-left:8px}
  .kb-nav-cta,.mp-nav-cta{order:3;flex:0 0 100%;width:100%;justify-content:center;margin-top:12px;padding:12px 16px;font-size:0.9375rem}
  .kb-nav-cta .kb-cta-label-long,.mp-nav-cta .mp-cta-label-long{display:inline}
  .kb-nav-cta .kb-cta-label-short,.mp-nav-cta .mp-cta-label-short{display:none}
  .kb-nav-links,.mp-nav-links{order:4}
}
@media (max-width:400px){
  .kb-brand-name,.mp-brand-name{font-size:0.84rem}
}


/* === CTA button text-color override (apply-btn-color.py) === */
.mp-btn *,.kb-btn *,.mp-nav-cta *,.kb-nav-cta *,.mp-bottom-cta a *,.kb-bottom-cta a *,.nf-links a *{color:inherit!important}
.mp-btn a,.kb-btn a,.mp-nav-cta a,.kb-nav-cta a{color:inherit!important}

/* --- cta-contrast-guard v1 --- */
a.mp-btn-primary, a.mp-btn-primary:link, a.mp-btn-primary:visited, a.mp-btn-primary:hover, a.mp-btn-primary:focus{color:var(--mp-brand-ink)!important;-webkit-text-fill-color:var(--mp-brand-ink)!important;border-bottom:0!important;text-shadow:none;}
a.mp-btn-ghost, a.mp-btn-ghost:link, a.mp-btn-ghost:visited, a.mp-btn-ghost:hover, a.mp-btn-ghost:focus{color:var(--mp-ink)!important;-webkit-text-fill-color:var(--mp-ink)!important;border-bottom:0!important;text-shadow:none;}
a.mp-nav-cta, a.mp-nav-cta:link, a.mp-nav-cta:visited, a.mp-nav-cta:hover, a.mp-nav-cta:focus{color:var(--mp-brand-ink)!important;-webkit-text-fill-color:var(--mp-brand-ink)!important;border-bottom:0!important;text-shadow:none;}
.kb-btn *,.kb-nav-cta *,.kb-bottom-cta *,.mp-btn *,.mp-nav-cta *,.mp-bottom-cta *{color:inherit!important;-webkit-text-fill-color:inherit!important;}


/* ==========================================================================
   MEDIA & LAYOUT COMPONENTS — paste into every build's theme.css.
   Codified from the Realz AU build: parallel subagents INVENT layout classes
   for images/tables/breadcrumbs (mp-logo-row, mp-tile-grid, mp-card-grid,
   mp-figure, mp-media-grid, mp-table, mp-crumbs, mp-hero-cta-row, mp-pay-row…)
   that DON'T exist in a cloned theme.css — so those blocks collapse to a single
   column (block-level <img>/<div> stack) or render unstyled. Ship these classes
   up front and the media just works.

   Prefix note: these use the `mp-` prefix. For a `kb-` theme, s/mp-/kb-/.
   Depends on the standard token vars (--mp-bg-card, --mp-border, --mp-brand,
   --mp-ink*, --mp-s-*, --mp-radius*, --mp-shadow*, --mp-t-anim, --mp-font-*).
   ========================================================================== */

/* --- PROSE WIDTH TRAP -------------------------------------------------------
   If .mp-prose has `max-width: 72ch`, ANY grid placed inside it (steps, tiles,
   logo rows) is squeezed into that ~720px column. Fix: drop the cap on the
   container, re-apply it to TEXT children only, so grids/tables/media go full
   width while paragraphs stay readable. */
.mp-prose { max-width: none; }
.mp-prose > p, .mp-prose > ul:not(.mp-steps), .mp-prose > ol:not(.mp-steps),
.mp-prose > h1, .mp-prose > h2, .mp-prose > h3, .mp-prose > h4, .mp-prose > blockquote {
  max-width: 72ch;
}

/* --- Provider / payment logo row (flex, never a column) --- */
.mp-logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 40px; margin: var(--mp-s-5) 0; }
.mp-logo-row img { height: 38px; width: auto; opacity: 0.9; }
.mp-pay-row { display: flex; flex-wrap: wrap; gap: var(--mp-s-3); align-items: center; margin: var(--mp-s-4) 0; }
.mp-pay-row img { height: 30px; width: auto; }

/* --- Two-up cards (welcome fiat/crypto, compare) --- */
.mp-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--mp-s-4); margin: var(--mp-s-5) 0; list-style: none; padding: 0; }
.mp-card { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: var(--mp-s-5); box-shadow: var(--mp-shadow); }
.mp-card > h3 { font-family: var(--mp-font-display); font-size: 1.125rem; font-weight: 700; margin: 0 0 var(--mp-s-3); color: var(--mp-ink); }
.mp-card ul { padding-left: 20px; margin: var(--mp-s-3) 0 0; color: var(--mp-ink-2); font-size: var(--mp-t-sm); }
.mp-card li { margin: var(--mp-s-2) 0; }
.mp-card-big { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: var(--mp-brand-light); margin: 0 0 var(--mp-s-2); letter-spacing: -0.01em; }

/* --- Game tiles (pokies, live, crash). ~5 across on desktop, 2 on mobile.
   minmax 190px reads as premium; 150px looks like a dense afterthought. --- */
/* The upper bound is deliberate. Most game art in the kit is 315px wide, so a `1fr`
   track let the tiles grow to ~340px on a wide screen and every thumbnail was being
   upscaled — that is what read as "bad quality". Capping the track below the source
   width means the browser only ever downscales. justify-content spreads the leftover
   space instead of stretching the tiles. */
.mp-tile-grid, .mp-pokie-grid, .mp-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 300px)); justify-content: center; gap: var(--mp-s-4); margin: var(--mp-s-5) 0; }
.mp-tile, .mp-pokie-tile { margin: 0; border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; background: var(--mp-bg-card); text-decoration: none; display: block; transition: transform var(--mp-t-anim), border-color var(--mp-t-anim); }
.mp-tile:hover, .mp-pokie-tile:hover { transform: translateY(-3px); border-color: var(--mp-border-strong); }
/* This kit's game art is SQUARE (249x249) with the game wordmark across the bottom
   third. Any non-1:1 ratio crops through the wordmark, so the tiles stay 1:1. */
.mp-tile img, .mp-pokie-tile img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
/* Every cover in this kit is 1:1, so the live grid needs no aspect override. */
.mp-tile figcaption, .mp-pokie-name { padding: 8px 10px; font-size: 0.8125rem; color: var(--mp-ink-2); font-family: var(--mp-font-mono); text-align: center; }
@media (max-width: 560px) { .mp-tile-grid, .mp-pokie-grid, .mp-live-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Promo banner strip: several reload/bonus banners in a row, not stacked --- */
.mp-promo-strip { display: flex; flex-wrap: wrap; gap: var(--mp-s-4); margin: var(--mp-s-5) 0; }
.mp-promo-strip img { flex: 1 1 260px; max-width: calc(50% - var(--mp-s-3)); height: auto; margin: 0; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow); }
@media (max-width: 560px) { .mp-promo-strip img { max-width: 100%; } }

/* --- Lone promo banners in prose: CAP + centre. A raw 730px webp dominates the
   column and reads as "huge image". Place these LATE in theme.css: `.mp-prose > img`
   ties specificity with the base `.mp-prose img{max-width:100%}` and only wins if
   it comes AFTER it in source order. --- */
.mp-prose > img, .mp-prose > p > img, .mp-prose > figure:not([class]) > img {
  max-width: 460px; width: 100%; height: auto; display: block; margin: var(--mp-s-5) auto;
  border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow);
}
.mp-figure { margin: var(--mp-s-5) 0; text-align: center; }
.mp-figure > img { max-width: 460px; width: 100%; height: auto; margin: 0 auto; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow); }
.mp-figure figcaption { font-size: 0.8125rem; color: var(--mp-ink-3); margin-top: 8px; font-family: var(--mp-font-mono); }
.mp-media-block { margin: var(--mp-s-5) 0; text-align: center; }
.mp-media-block > img { max-width: 520px; width: 100%; height: auto; margin: 0 auto; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow); }
.mp-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--mp-s-4); margin: var(--mp-s-5) 0; }
.mp-media-grid .mp-figure { margin: 0; }
.mp-media-grid .mp-figure > img { max-width: 100%; }

/* --- Tables: subagents emit <div class="mp-table-wrap"><table class="mp-table"> and
   leave them unstyled (no borders/padding). Style + keep them scrollable on mobile
   so a wide table never forces the whole PAGE into horizontal scroll. --- */
.mp-table-wrap { overflow-x: auto; margin: var(--mp-s-5) 0; -webkit-overflow-scrolling: touch; }
.mp-table { width: 100%; border-collapse: collapse; font-size: var(--mp-t-sm); background: var(--mp-bg-card); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; }
.mp-table th, .mp-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--mp-border); vertical-align: top; }
.mp-table thead th { background: rgba(200,16,26,0.09); color: var(--mp-ink); font-family: var(--mp-font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: -0.01em; }
.mp-table td { color: var(--mp-ink-2); }
.mp-table tbody tr:last-child td { border-bottom: 0; }
.mp-table tbody tr:hover td { background: rgba(18,18,18,0.02); }
/* (the th background rgba is the BRAND accent — swap 232,178,74 for your brand rgb) */

/* --- Breadcrumbs: an <ol class="mp-crumbs"> renders as a numbered vertical list
   until styled. Make it a horizontal flex row with "/" separators. --- */
.mp-breadcrumb { margin: 0 0 var(--mp-s-3); }
.mp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; margin: var(--mp-s-3) 0; font-family: var(--mp-font-mono); font-size: 0.75rem; color: var(--mp-ink-3); }
.mp-crumbs li { display: flex; align-items: center; gap: 6px; margin: 0; }
.mp-crumbs li:not(:last-child)::after { content: "/"; color: var(--mp-ink-mute); }
.mp-crumbs a { color: var(--mp-ink-2); text-decoration: none; border: 0; }
.mp-crumbs a:hover { color: var(--mp-brand-light); }

/* --- Hero copy/media/cta split + misc lists --- */
.mp-hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--mp-s-3); margin: var(--mp-s-5) 0; }
.mp-hero-media { margin: 0; }
.mp-hero-media > img { width: 100%; height: auto; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border-strong); box-shadow: var(--mp-shadow-lg); }
.mp-list { padding-left: 20px; color: var(--mp-ink-2); margin: var(--mp-s-4) 0; }
.mp-list li { margin: var(--mp-s-2) 0; }

/* modifier alias: ordered-list variant of .mp-steps (no extra rules needed) */
.mp-steps-ol { list-style: none; }

.mp-tile-cap { padding: 8px 10px; font-size: 0.8125rem; color: var(--mp-ink-2); font-family: var(--mp-font-mono); text-align: center; display: block; }
a.mp-tile:hover .mp-tile-cap { color: var(--mp-brand-light); }

/* Combined `wrap mp-prose` must keep the page container: `.mp-prose{max-width:none}`
   frees inner grids from the 72ch text cap, but on an element that is ALSO `.wrap`
   it removes the page gutter and the section renders edge-to-edge. */
.wrap.mp-prose { max-width: var(--mp-max-w, 1200px); }

/* Classes the SPEC references that the base theme doesn't define. */
.mp-cta-block-actions { display: flex; flex-wrap: wrap; gap: var(--mp-s-3);
  align-items: center; justify-content: center; margin: var(--mp-s-5) 0 var(--mp-s-4); }
.mp-toc { background: var(--mp-bg-card); border: 1px solid var(--mp-border);
  border-left: 3px solid var(--mp-brand); border-radius: var(--mp-radius);
  padding: var(--mp-s-4) var(--mp-s-5); margin: var(--mp-s-5) 0; font-size: var(--mp-t-sm); }
.mp-toc-title { font-family: var(--mp-font-display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mp-ink-3); margin: 0 0 var(--mp-s-3); }
.mp-toc ol, .mp-toc ul { margin: 0; padding-left: 20px; color: var(--mp-ink-2); }
.mp-toc li { margin: var(--mp-s-2) 0; }
.mp-toc a { color: var(--mp-ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.mp-toc a:hover { color: var(--mp-brand-light); border-bottom-color: var(--mp-brand-light); }

/* FAQ: the accordion CARD is `details.mp-faq`; this wrapper is spacing only. */
.mp-faq-list { margin: var(--mp-s-5) 0; }
/* Answers ship as a bare <p> far more often than as a wrapping <div> — style both,
   or the answer sits flush against the card edge with no separator. */
.mp-faq > p { padding: 14px 22px 18px; margin: 0; color: var(--mp-ink-2);
  font-size: 0.9375rem; line-height: 1.65; border-top: 1px solid var(--mp-border); }
.mp-faq > p ~ p { border-top: 0; padding-top: 0; }

/* Author card: flex, never a fixed grid track. If the avatar is removed from layout by
   an extension or a content blocker, a `72px 1fr` grid drops the TEXT into the 72px
   track and the bio wraps a few characters per line. Flex has no slot to fall into. */
.mp-author-card { display: flex; align-items: flex-start; flex-wrap: wrap; }
.mp-author-card-avatar { flex: 0 0 72px; }
.mp-author-card > :not(.mp-author-card-avatar) { flex: 1 1 260px; min-width: 0; }
@media (max-width: 640px) { .mp-author-card-avatar { flex-basis: 56px; } }

/* The kit's promo images are 144x144 / 100x100 despite `500x500` filenames. Cap them so
   a page can never stretch a thumbnail into a blurry banner. */
/* `.mp-prose > img` (0,1,1) outranks a bare `.mp-promo-thumb` (0,1,0) no matter where it
   sits in the file, so the 160px cap silently lost to that rule's 460px and thumbnails
   rendered ~4x their real size, badly blurred. Match the container's specificity. */
.mp-promo-thumb,
.mp-prose > .mp-promo-thumb,
.mp-prose > p > .mp-promo-thumb,
.mp-figure > .mp-promo-thumb {
  max-width: 160px; width: auto; height: auto;
  border-radius: var(--mp-radius); box-shadow: none;
}

/* --- Newly commissioned artwork (2026-07-20) -------------------------------
   Two new shapes, both downscaled INTO their box so they stay sharp — the
   opposite of the thumbnails they replace, which were upscaled 4x and mushy. */

/* 3:1 band introducing a themed slot section. Full container width. */
.mp-theme-band,
.mp-prose > .mp-theme-band,
.mp-prose > p > .mp-theme-band,
.mp-figure > .mp-theme-band {
  display: block; width: 100%; max-width: none; height: auto;
  margin: var(--mp-s-5) 0 var(--mp-s-4);
  border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border);
  box-shadow: var(--mp-shadow);
}
/* 4:3 section illustration. Capped and centred — `.mp-prose > img` (0,1,1) would
   otherwise win with its 460px, so match that specificity here too. */
.mp-section-art,
.mp-prose > .mp-section-art,
.mp-prose > p > .mp-section-art,
.mp-figure > .mp-section-art {
  display: block; max-width: 420px; width: 100%; height: auto;
  margin: var(--mp-s-5) auto; border-radius: var(--mp-radius-lg);
  border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow);
}
@media (max-width: 560px) {
  .mp-theme-band { border-radius: var(--mp-radius); margin: var(--mp-s-4) 0 var(--mp-s-3); }
}

/* ==========================================================================
   MOBILE NAV — reconciled with the markup this land actually uses.

   The base theme drives the mobile menu with a checkbox hack
   (.mp-nav-toggle:checked ~ .mp-nav-links) and hides .mp-nav-toggle outright. This land's
   chrome uses a real <button aria-expanded> instead, which is better for screen readers but
   meant the button inherited that display:none, the burger nested inside it vanished with
   it, and the JS toggled an .is-open class no rule matched. Net effect: on any phone the six
   nav links sat in a zero-height container with nothing able to open it.
   ========================================================================== */
@media (max-width: 860px) {
  .mp-head3 .mp-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    order: 2; margin-left: 8px; flex: 0 0 auto;
    width: 40px; height: 40px; padding: 0;
    background: transparent; border: 1px solid var(--mp-border-strong);
    border-radius: var(--mp-radius); cursor: pointer;
  }
  .mp-head3 .mp-nav-links.is-open { max-height: 480px; margin-top: var(--mp-s-3); }
}
/* The base styles the bars as `.mp-burger span`, so the element needs an inner span. */
.mp-burger { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 14px; }

/* This land's footer has four blocks (brand + three link columns); the base grid declares
   three tracks, so the fourth wrapped onto its own row. */
.mp-foot-top { grid-template-columns: 2.2fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .mp-foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mp-foot-top { grid-template-columns: 1fr; } }

/* The theme's emblem slot is built for a SQUARE badge (52x52) sitting next to a text
   lockup. emberBet ships a horizontal wordmark at 171x44, which that rule squashes into a
   square. The wordmark already carries the brand name, so let it keep its aspect and drop
   the separate text block rather than distorting the client's logo. */
.mp-head3-emblem img { width: auto; height: 38px; }
@media (max-width: 860px) { .mp-head3-emblem img { height: 30px; } }
.mp-foot .mp-brand-line img { width: auto; height: 30px; }

/* --- provider logo strip -------------------------------------------------
   Twelve logos in a flex-wrap row broke as 11 + 1. A six-track grid gives 6 + 6.
   `auto-fit` is deliberately NOT used: on the one page with only two logos it would
   stretch each into a half-width track. Fixed tracks keep every logo the same size. */
.mp-logo-row { display: grid; grid-template-columns: repeat(6, 1fr); justify-items: center; align-items: center; gap: 22px 28px; }
.mp-logo-row:has(img:nth-child(3):last-child), .mp-logo-row:has(img:nth-child(2):last-child) { grid-template-columns: repeat(auto-fit, minmax(0, 140px)); justify-content: center; }
@media (max-width: 900px) { .mp-logo-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .mp-logo-row { grid-template-columns: repeat(3, 1fr); } }

/* --- inline CTA ----------------------------------------------------------
   The rule is `1fr auto`, which assumes two children: text block + button. Some pages
   emit heading, subtext and button as three flat children, which put the button in
   column 1 row 2. Pin the text to column 1 and let the button own column 2 outright. */
.mp-inline-cta > .mp-inline-cta-h,
.mp-inline-cta > .mp-inline-cta-sub { grid-column: 1; }
.mp-inline-cta > .mp-btn { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: end; }
@media (max-width: 560px) {
  .mp-inline-cta > .mp-inline-cta-h,
  .mp-inline-cta > .mp-inline-cta-sub,
  .mp-inline-cta > .mp-btn { grid-column: 1; grid-row: auto; justify-self: stretch; }
}



/* ==========================================================================
   PL ADDITIONS — provider-logo plates
   --------------------------------------------------------------------------
   The supplied kit mixes two kinds of provider artwork: white-on-transparent
   marks (Evolution, Playtech, Wazdan, Amatic, SG Digital…) and dark-outlined
   ones (Betsoft, Play'n GO, RubyPlay). On this dark ground the second group is
   effectively invisible — it was measured, not guessed: `_scripts/audit_media.py`
   averages the luminance of every non-transparent pixel and writes the plate
   class into `_media_alt_map.json`.

   One background cannot serve both, so each logo gets the plate its own artwork
   needs. Use the class from the alt map; do not pick by eye.
   ========================================================================== */
.mp-logo-row img.mp-logo--on-dark,
.mp-logo-row img.mp-logo--on-light {
  height: 34px;
  width: auto;
  padding: 10px 14px;
  border-radius: var(--mp-radius-sm, 8px);
  box-sizing: content-box;
  opacity: 1;
}

/* light artwork: keep it on the dark card so the white mark reads */
.mp-logo-row img.mp-logo--on-dark {
  background: #1b1815;
  border: 1px solid rgba(18,18,18,0.18);
}

/* dark artwork: it needs a light plate or the black outlines disappear */
.mp-logo-row img.mp-logo--on-light {
  background: #eef1f5;
  border: 1px solid rgba(18,18,18,0.14);
}

@media (max-width: 560px) {
  .mp-logo-row img.mp-logo--on-dark,
  .mp-logo-row img.mp-logo--on-light { height: 26px; padding: 8px 10px; }
}

/* ── FR add-ons: lien-alternatif bar, RG page suppression, RGPD banner ─────── */
.mp-linkbar{background:linear-gradient(180deg,#ffffff,#fbfcfd);border-bottom:1px solid rgba(200,16,26,.28)}
.mp-linkbar-inner{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;padding:.6rem 0;font-size:.875rem;color:var(--mp-ink-2)}
.mp-linkbar-dot{width:.55rem;height:.55rem;border-radius:50%;background:#17795c;box-shadow:0 0 0 3px rgba(30,142,90,.18);flex:none}
.mp-linkbar-status{color:var(--mp-ink);font-weight:600}
.mp-linkbar-date{font-family:"Space Mono",ui-monospace,monospace;font-size:.8rem;color:var(--mp-ink-3)}
.mp-linkbar-cta{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;padding:.34rem .8rem;border-radius:999px;background:var(--mp-brand);color:var(--mp-brand-ink)!important;font-weight:700;font-size:.82rem;white-space:nowrap}
.mp-linkbar-alt{color:var(--mp-brand-light)}
@media(max-width:640px){.mp-linkbar-cta{margin-left:0}}

.mp-rg .mp-nav-cta,.mp-rg .mp-linkbar,.mp-rg .mp-offer-bar,.mp-rg .mp-bottom-cta{display:none!important}

.mp-cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:70;max-width:56rem;margin:0 auto;padding:1rem 1.15rem;border:1px solid var(--mp-line,rgba(18,18,18,0.12));border-radius:14px;background:#ffffff;box-shadow:0 18px 48px rgba(120,72,20,0.15);display:flex;gap:1rem;align-items:center;flex-wrap:wrap;font-size:.86rem;color:var(--mp-ink-2)}
.mp-cookie[hidden]{display:none}
.mp-cookie p{margin:0;flex:1 1 22rem}
.mp-cookie-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.mp-cookie button{cursor:pointer;border-radius:999px;padding:.45rem 1rem;font-weight:700;font-size:.82rem;border:1px solid var(--mp-brand)}
.mp-cookie .mp-ck-yes{background:var(--mp-brand);color:var(--mp-brand-ink)}
.mp-cookie .mp-ck-no{background:transparent;color:var(--mp-brand-light)}

/* NOTE: no .mp-logo-row override here. An earlier FR block forced every plate light and
   pinned the height with !important — which inverted the plate logic above (mp-logo--on-dark
   means "white artwork, needs a DARK plate") and made Evolution, Playtech, Wazdan, Amatic,
   Inspired, SG Digital and Yggdrasil invisible. The rules at ~1114 are already correct. */

/* Headings inherit line-height 1.05 from the base rule — fine for a one-line display H1,
   far too tight for the two-line French H2/H3 in body copy. */
.mp-prose h2, .mp-prose h3, .mp-prose h4 { line-height: 1.18; }
/* The base rule zeroes heading margins and .mp-prose only restores margin-TOP, so a heading
   sat flush on its own first paragraph. Give it a bottom gap too. */
.mp-prose > h2 { margin-bottom: var(--mp-s-4); }
.mp-prose > h3, .mp-prose > h4 { margin-bottom: var(--mp-s-3); }
/* Do NOT zero margin-top on a section's first heading: these sections carry no padding of
   their own, so that 64px margin is exactly what collapses out through the section boundary
   and separates one section from the next. */

/* ── Provider logo row: one uniform dark strip ──────────────────────────────
   The kit mixes white artwork with dark artwork. The dark ones used to sit on a cream plate
   so their outlines would read, which left a few light rectangles in an otherwise dark row.
   They now get the same dark plate and the artwork is flipped to a white silhouette.
   The plate lives on the wrapper, NOT on the <img>: a CSS filter paints the element's own
   background too, so filtering the image directly would turn its plate white as well. */
.mp-logo-row .mp-logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-bg-2); border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-sm, 8px); padding: 10px 14px;
}
.mp-logo-row .mp-logo-chip img.mp-logo--on-light {
  background: none; border: 0; padding: 0;
  filter: brightness(0) invert(1); opacity: .92;
}
@media (max-width: 560px) {
  .mp-logo-row .mp-logo-chip { padding: 8px 10px; }
}

/* ── Block rhythm inside .mp-prose ──────────────────────────────────────────
   .mp-prose restores heading margins for its DIRECT children only, and the theme zeroes
   h1..h4 globally. So a heading nested in a card or an FAQ item rendered flush against the
   text below it, and .mp-grid carried no margin at all — the "no spacing" report. These are
   descendant rules on purpose. */
.mp-prose .mp-grid,
.mp-prose .mp-card-grid,
.mp-prose .mp-logo-row,
.mp-prose .mp-table-wrap,
.mp-prose .mp-callout,
.mp-prose .mp-steps { margin: var(--mp-s-5) 0; }

.mp-prose .mp-card h3,
.mp-prose .mp-card h4,
.mp-prose .mp-faq h3,
.mp-prose .mp-faq h4 { margin-bottom: var(--mp-s-4); line-height: 1.25; }

.mp-prose .mp-card > :first-child,
.mp-prose .mp-faq  > :first-child { margin-top: 0; }

.mp-prose .mp-card li,
.mp-prose .mp-faq li { margin: 10px 0; }

.mp-prose .mp-card p + h3,
.mp-prose .mp-card ul + h3 { margin-top: var(--mp-s-5); }

/* The FAQ section is <section class="wrap mp-faq">, a SIBLING of the .mp-prose sections —
   not nested inside one. So the rules above never reached it and its questions stayed flush
   against their answers. Scope these to .mp-faq directly. */
.mp-faq h3, .mp-faq h4 { margin-bottom: var(--mp-s-4); line-height: 1.25; }
.mp-faq li { margin: 10px 0; }
.mp-faq > :first-child { margin-top: 0; }

/* ── Classes the page builders were told to use but the theme never defined ──
   `.mp-grid` rendered as display:block, so the card stacks had a zero gap — that was the
   "no space between blocks" report. `.mp-pros` / `.mp-cons` (42 uses) and `.mp-note`
   (46 uses) had no rules at all. Listing a class in the build brief does not create it. */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--mp-s-5);
  align-items: start;
}
.mp-grid > * { margin: 0; }

/* Pros / cons: same card shell, an accent edge and a marker per item. */
.mp-pros, .mp-cons { border-left: 3px solid var(--mp-line, rgba(18,18,18,0.12)); }
.mp-pros { border-left-color: var(--mp-pos); }
.mp-cons { border-left-color: var(--mp-neg); }
.mp-pros > ul, .mp-cons > ul { list-style: none; padding-left: 0; }
.mp-pros > ul > li, .mp-cons > ul > li { position: relative; padding-left: 1.6rem; }
.mp-pros > ul > li::before,
.mp-cons > ul > li::before {
  position: absolute; left: 0; top: 0; font-weight: 700; line-height: inherit;
}
.mp-pros > ul > li::before { content: "+"; color: var(--mp-pos); }
.mp-cons > ul > li::before { content: "\2212"; color: var(--mp-neg); }

/* A flagged aside: source conflicts, hedges, "à confirmer" notes. */
.mp-note {
  margin: var(--mp-s-5) 0;
  padding: var(--mp-s-4) var(--mp-s-5);
  border-left: 3px solid var(--mp-amber);
  border-radius: var(--mp-radius-sm, 8px);
  background: rgba(255, 210, 63, 0.06);
  color: var(--mp-ink-2);
  font-size: var(--mp-t-sm);
}
.mp-note > :first-child { margin-top: 0; }
.mp-note > :last-child  { margin-bottom: 0; }

/* Byline / freshness line, and a standalone CTA paragraph. */
.mp-meta { color: var(--mp-ink-3); font-size: var(--mp-t-sm); margin-bottom: var(--mp-s-5); }
.mp-cta-line { margin: var(--mp-s-5) 0; }

/* ==========================================================================
   HugeWin GR — post-review fixes (2026-08-05)
   ========================================================================== */

/* 1. The brand mark. The supplied file was a 115x115 canvas holding a 93x21 wordmark in dark
   navy — 92% transparent margin, and the word itself the colour of the background. A white
   plate fixed the contrast but read as a box inside a box. The asset is now cropped to the
   wordmark and its dark strokes recoloured to cream (the gold accent kept), so it sits
   directly on the emblem like a normal lockup — no plate, no filter. A filter was never an
   option: `brightness(0) invert(1)` renders the alpha silhouette, which is how the emberBet
   provider logos were lost. */
.mp-head3-emblem img { width: 34px; height: 34px; filter: none; background: none; padding: 0; }
.mp-head3-emblem { padding: 9px 18px; gap: 11px; }
.mp-head3-emblem-title { font-size: 1.25rem; }
.mp-head3-emblem-tag { font-size: 0.625rem; letter-spacing: 0.16em; }
@media (max-width: 860px) {
  .mp-head3-emblem img { width: 28px; height: 28px; }
  .mp-head3-emblem { padding: 8px 14px; gap: 9px; }
  .mp-head3-emblem-title { font-size: 1.05rem; }
  .mp-head3-emblem-tag { font-size: 0.5625rem; }
}
.mp-foot .mp-brand-line img { width: 30px; height: 30px; filter: none; background: none; padding: 0; }

/* 2. The footer disclaimer box is a flex row, so its three paragraphs became three
   ~90px columns on a phone. Below the desktop breakpoint it stacks; the 21+ badge
   floats so the text still wraps beside it instead of eating a whole row. */
@media (max-width: 900px) {
  .mp-foot-disclaimer-box { display: block; }
  .mp-foot-disclaimer-box > p { margin: 0 0 0.7rem; }
  .mp-foot-disclaimer-box > p:last-child { margin-bottom: 0; }
  .mp-foot-age-mark { float: left; margin: 2px 10px 6px 0; }
}

/* 3. The sticky offer bar (z-index 90, ~64px tall) sat on top of the consent banner
   (z-index 70, bottom 1rem), so the Accept/Decline buttons were unreachable on mobile —
   the one control that must never be covered. Lift the banner clear of it. */
@media (max-width: 640px) {
  .mp-cookie { bottom: calc(64px + 0.75rem); z-index: 95; }
}

/* 4. Game tiles were 300px wide with a forced 3/4 portrait crop, so a 200x148 table
   screenshot was upscaled to 300x398 — blurry, badly cropped and a wall of images.
   Most of this kit's artwork is landscape, so the tiles get a 4/3 box and a smaller
   track: six per row instead of three, at the source's own resolution. */
.mp-tile-grid, .mp-pokie-grid, .mp-live-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 190px));
  gap: var(--mp-s-3);
}
.mp-tile img, .mp-pokie-tile img { aspect-ratio: 4 / 3; }
.mp-tile-cap, .mp-tile figcaption, .mp-pokie-name { padding: 6px 8px; font-size: 0.75rem; }
@media (max-width: 560px) {
  .mp-tile-grid, .mp-pokie-grid, .mp-live-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
  .mp-tile-grid, .mp-pokie-grid, .mp-live-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Wintino RS — kit-specific overrides
   ========================================================================== */

/* The brand mark here is a 430x112 WORDMARK (gold on transparent), not a square badge, so the
   emblem sizing inherited from the previous land — which was tuned for a 34px round disc —
   would squash it. Width-driven instead, and no accompanying title text: the wordmark already
   says the name. */
.mp-head3-emblem img { width: auto; height: 30px; filter: none; background: none; padding: 0; }
.mp-head3-emblem { padding: 9px 18px; gap: 12px; }
.mp-head3-emblem-tag { font-size: 0.625rem; letter-spacing: 0.16em; }
@media (max-width: 860px) {
  .mp-head3-emblem img { width: auto; height: 24px; }
  .mp-head3-emblem { padding: 8px 14px; gap: 9px; }
  .mp-head3-emblem-tag { font-size: 0.5625rem; }
}
.mp-foot .mp-brand-line img { width: auto; height: 26px; filter: none; background: none; padding: 0; }

/* Every game asset in this kit is a transparent LOGO wordmark, not box art. `object-fit: cover`
   — the fleet default — would crop the game's own name off its tile. Contain them on a card
   instead, with padding so the artwork breathes. */
.mp-tile img, .mp-pokie-tile img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 10px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(200,16,26,0.10), transparent 70%),
              linear-gradient(180deg, var(--mp-bg-2), var(--mp-bg-1));
}

/* Game logos are wordmarks with heavy black outlines: roughly half of this kit has a dark-pixel
   share above 35%, and on the dark tile card those strokes merge into the background. Each tile
   image therefore carries the `plate` class from the alt map, exactly like a payment logo —
   `mp-logo--on-light` means "dark artwork, needs a light card". */
.mp-tile img.mp-logo--on-light, .mp-pokie-tile img.mp-logo--on-light {
  background: linear-gradient(180deg, #eef1f5, #e3e7ec);
}
.mp-tile img.mp-logo--on-dark, .mp-pokie-tile img.mp-logo--on-dark {
  background: radial-gradient(120% 100% at 50% 0%, rgba(200,16,26,0.12), transparent 70%),
              linear-gradient(180deg, var(--mp-bg-2), var(--mp-bg-1));
}


/* ==========================================================================
   GOLISIMO HR — build overrides (appended last on purpose)
   ========================================================================== */
:root{
  /* the logo is a flame wordmark; keep that heat available without letting it become the accent */
  --mp-flame:      #8e2f86;
  --mp-flame-glow: rgba(249,115,22,0.38);
}

/* Header brand mark: a wide wordmark, not a square badge. No filter -- the artwork is a light
   flame-orange lockup on transparent, so it needs the dark plate the header already provides. */
.mp-head3-emblem img{width:auto;height:32px;filter:none;background:none;padding:0}
@media (max-width:600px){.mp-head3-emblem img{height:26px}}

/* Game tiles are real 2:3 lobby covers here (sliced out of the operator's own strips), so they
   crop with `cover` -- unlike wintino, whose tiles were transparent wordmarks needing `contain`. */
.mp-tile img,.mp-pokie-tile img{aspect-ratio:1/1;object-fit:cover;padding:0;background:#f7f8fa}
.mp-tile-grid{grid-template-columns:repeat(auto-fill,minmax(140px,200px));gap:var(--mp-s-3)}
@media (max-width:560px){.mp-tile-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:380px){.mp-tile-grid{grid-template-columns:repeat(2,1fr)}}

/* Payment / crypto / provider marks: half the kit is white artwork and half is black, so the
   plate class from _media_alt_map.json decides the ground. See _scripts/check_plates.py. */
.mp-logo-row img{object-fit:contain;border-radius:8px;padding:7px 12px}
.mp-logo-row img.mp-logo--on-light{background:linear-gradient(180deg,#ffffff,#f7f8fa)}
.mp-logo-row img.mp-logo--on-dark{background:linear-gradient(180deg,#eef1f5,#ffffff);
  border:1px solid rgba(200,16,26,0.22)}

/* Footer disclaimer is a flex row of three paragraphs -- on a phone that collapses into three
   cramped columns (the HugeWin bug). Stack it. */
@media (max-width:900px){
  .mp-foot-disclaimer-box{display:block}
  .mp-foot-age-mark{float:left;margin:2px 10px 6px 0}
}
/* The sticky offer bar (z90, ~64px tall) sat on top of the consent banner (z70). */
@media (max-width:640px){.mp-cookie{bottom:calc(64px + 0.75rem);z-index:95}}

/* ==========================================================================
   TAB66 NEPAL — light-theme corrections
   Everything above was authored for a dark ground and mechanically inverted. These rules fix the
   handful of places where inversion alone is not enough.
   ========================================================================== */
:root{
  /* Devanagari first: most Nepali readers are on Android, which ships Noto Sans Devanagari.
     No webfont is loaded — this market is bandwidth-constrained (TZ section 8) and a 120 kB
     Devanagari face would cost more LCP than the typography buys. */
  --mp-font-body:    'Noto Sans Devanagari', 'Mangal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mp-font-display: 'Noto Sans Devanagari', 'Mangal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mp-font-mono:    ui-monospace, SFMono-Regular, 'Segoe UI Mono', monospace;

  --mp-link:  #8e2f86;   /* TZ section 3: links are blue, not orange — orange is reserved for CTA */
  --mp-link-2:#34489b;
  --mp-line:  #e3e7ec;
}

/* Orange at #c8101a on cream is ~2.6:1 — fine for a filled button, unreadable as link text. */
a{color:var(--mp-link)}
a:hover{color:var(--mp-link-2)}
.mp-sect-link,.mp-crumb a,.mp-foot a{color:var(--mp-link)}
.mp-btn a,.mp-btn-primary,.mp-nav-cta,.mp-bottom-cta a{color:#fff}

/* TZ section 3: pill CTAs, radius 9999px. Cards keep their soft 10px. */
.mp-btn,.mp-nav-cta,.mp-bottom-cta a,.mp-btn-ghost{border-radius:9999px}
.mp-btn-primary{background:linear-gradient(135deg,#d4131e,#c8101a);color:#fff;border-color:#c8101a;
  box-shadow:0 6px 16px rgba(200,16,26,.26)}
.mp-btn-primary:hover{background:linear-gradient(135deg,#c8101a,#a80a12);box-shadow:0 8px 22px rgba(200,16,26,.34)}
.mp-btn-ghost{color:#c8101a;border-color:#c8101a;background:#fff}
.mp-btn-ghost:hover{background:#f7f8fa;color:#a80a12}

/* Cards are white on cream — the inherited translucent fills read as dirty smudges. */
.mp-card,.mp-stat,.mp-tile,.mp-pokie-tile,.mp-faq,.mp-note,.mp-pros,.mp-cons,.mp-cta-block{
  background:#fff;border:1px solid #e3e7ec}
.mp-sect-tinted{background:linear-gradient(180deg,#f7f8fa,#fbfcfd)}
.mp-sect-card{background:#eef1f5}
.mp-sect-h{background:linear-gradient(180deg,#fbfcfd,#f7f8fa)}

/* Header/footer: the emblem glow and stripe veil were built to sit on black. */
.mp-head3,.mp-head3-banner{background:#fff}
.mp-head3-veil{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,243,230,.85))}
.mp-head3-emblem{box-shadow:0 6px 18px rgba(120,72,20,.12)}
.mp-head3-emblem:hover{box-shadow:0 10px 24px rgba(120,72,20,.18)}
.mp-head3-emblem img{filter:none}
.mp-foot{background:#eef1f5;border-top:1px solid #e3e7ec;color:#3b434b}

/* Logo plates invert on a light page: DARK artwork needs no chip, LIGHT artwork needs a dark one. */
.mp-logo-row img{object-fit:contain;border-radius:8px;padding:7px 12px}
.mp-logo-row img.mp-logo--on-light{background:#fff;border:1px solid #e3e7ec}
.mp-logo-row img.mp-logo--on-dark{background:linear-gradient(180deg,#2a2320,#191412);border:1px solid #2a2320}

/* Game tiles are real cover art, not transparent wordmarks. */
.mp-tile img,.mp-pokie-tile img{aspect-ratio:1/1;object-fit:cover;padding:0;background:#f7f8fa}

/* .mp-note is an advisory, not brand chrome — amber ink on a pale amber wash. */
.mp-note{background:#fdf2f3;border:1px solid #f2cfd2;color:#5e2226}
.mp-note strong{color:#7a1219}

/* Semantic columns */
.mp-pros{border-left:3px solid #17795c}
.mp-cons{border-left:3px solid #8c2f22}

/* Tables */
.mp-table thead th{background:#f7f8fa;color:#1f2429;border-bottom:2px solid #e3e7ec}
.mp-table tbody tr:hover td{background:#fbfcfd}
.mp-table td,.mp-table th{border-color:#e3e7ec}

/* Cookie banner must clear the mobile sticky CTA, not sit under it. */
.mp-cookie{background:#fff;border:1px solid #e3e7ec;color:#3b434b;
  box-shadow:0 10px 34px rgba(120,72,20,.16);bottom:calc(64px + 0.75rem);z-index:95}
@media (min-width:900px){.mp-cookie{bottom:1rem}}

/* The access-link widget: green dot = checked, on a white strip. */
.mp-linkbar{background:linear-gradient(180deg,#eef1f5,#f7f8fa);border-bottom:1px solid #e3e7ec;color:#3b434b}
.mp-linkbar-dot{background:#17795c;box-shadow:0 0 0 3px rgba(30,142,90,.18)}

/* Devanagari sits lower and taller than Latin; the display line-height clips matras. */
h1,h2,h3,h4{line-height:1.28}
.mp-sect-h2{line-height:1.3}
body{line-height:1.75}

/* RG / about / legal pages carry no offer chrome at all. */
.mp-rg .mp-nav-cta,.mp-rg .mp-linkbar,.mp-rg .mp-bottom-cta,.mp-rg .mp-offer-bar{display:none!important}

@media (max-width:720px){
  .mp-foot{display:block}
}

/* --- mobile nav, final word -------------------------------------------------
   The base theme drives the mobile menu with a checkbox hack and collapses
   `.mp-nav-links` to `max-height:0` under 860px. This land's chrome uses a real
   <button aria-expanded> that toggles `.is-open`, and an earlier override for it
   sits in the middle of this file where later `.mp-nav-links` declarations were
   still winning in practice — measured on a 375px viewport, the menu stayed 0px
   tall with `.is-open` applied, i.e. the nav was unreachable on every phone in a
   mobile-first market. This block is last and explicit so it cannot lose again. */
@media (max-width: 860px) {
  /* The collapsed menu is driven by `display`, not `max-height`. Three earlier rules in this
     file set max-height on this element and the collapsed 0px kept winning in the live
     cascade even against an id-anchored `!important` — rather than keep escalating a
     specificity fight, the open/closed state now uses a property nothing else touches. */
  #mp-nav {
    display: none;
    max-height: none;
    overflow: visible;
  }
  #mp-nav.is-open {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: var(--mp-s-3);
    padding-bottom: var(--mp-s-2);
  }
  #mp-nav.is-open a {
    display: block;
    padding: 10px 2px;
    border-bottom: 1px solid var(--mp-border);
    font-size: 0.875rem;
  }
}

/* --- never upscale a raster past its intrinsic size -------------------------
   `.mp-figure > img`, `.mp-media-block > img` and `.mp-section-art` all carried
   `width:100%` with a 420-520px cap. That is right for the 1200px SVG heroes and
   wrong for the kit's small icons (128-207px), which got blown up to ~520px and
   rendered visibly soft. `width:auto` lets each image sit at its own intrinsic
   width; the cap still holds the big art down. Small art is centred rather than
   stretched. */
.mp-figure > img,
.mp-media-block > img,
.mp-prose > img,
.mp-section-art,
.mp-prose > .mp-section-art,
.mp-prose > p > .mp-section-art,
.mp-figure > .mp-section-art {
  width: auto;
  max-width: min(100%, 460px);
  height: auto;
  margin-inline: auto;
}
/* the wide operator banners and the 1200x675 heroes still want the full column */
.mp-figure > .mp-theme-band,
.mp-figure > img[width="1200"],
.mp-figure > img[width="1298"], .mp-figure > img[width="1284"],
.mp-figure > img[width="1271"], .mp-figure > img[width="1350"],
.mp-figure > img[width="1364"], .mp-figure > img[width="1377"],
.mp-figure > img[width="847"],  .mp-figure > img[width="821"],
.mp-figure > img[width="709"],  .mp-figure > img[width="698"],
.mp-figure > img[width="660"],  .mp-figure > img[width="602"],
.mp-figure > img[width="596"],  .mp-figure > img[width="576"] {
  width: 100%;
  max-width: min(100%, 720px);
}

/* The row is a 6-column grid, so in a ~600px prose column each cell is ~100px and the
   200x64 method plates were squeezed to 87x34 — the wordmark inside them became
   unreadable. Widen the track instead of fighting the height: auto-fit at 140px min
   lets each plate render near its intrinsic size and reflows to fewer columns when
   the container is narrow. */
.mp-logo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  justify-items: center; align-items: center;
  gap: 20px 24px;
}
.mp-logo-row img { height: auto; width: auto; max-width: 100%; max-height: 54px; }
.mp-logo-row img.mp-logo--on-dark,
.mp-logo-row img.mp-logo--on-light {
  height: auto !important; max-height: 34px;
  padding: 9px 14px; box-sizing: content-box;
}
@media (max-width: 560px) {
  .mp-logo-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px 16px; }
  .mp-logo-row img { max-height: 42px; }
  .mp-logo-row img.mp-logo--on-dark,
  .mp-logo-row img.mp-logo--on-light { max-height: 26px; padding: 7px 10px; }
}

/* --- white line-art on a cream ground ---------------------------------------
   Ten of the kit's decorative icons are white strokes on transparency, drawn for a
   dark UI and invisible here. Nine were re-tinted to the deep brand orange in the
   asset itself (see scratchpad/tab66_tint.py). The tenth, `tab66-fast-game-wings`,
   is DreamGaming's own brand mark — a third-party logo must keep its real colours,
   so it gets a dark plate under it instead of being re-hued. */
img[src$="tab66-fast-game-wings.webp"] {
  background: linear-gradient(180deg, #2a2320, #191412);
  border: 1px solid #2a2320;
  border-radius: var(--mp-radius);
  padding: 12px 16px;
  box-sizing: content-box;
}

/* Provider cards from the operator kit are portrait 213x308, not the square game covers the
   `.mp-tile img` ratio above assumes. Same grid, taller cell. */
.mp-tile-grid--tall .mp-tile img { aspect-ratio: 213 / 308; }

/* FIX: decorative banner overlays must not eat clicks on the link-widget button */
.mp-head3-stripes,.mp-head3-veil{pointer-events:none}
.mp-promo-chip,.mp-linkwidget{position:relative;z-index:2}


/* ============================================================================================
   SIDEBAR SHELL — second layout family for lands, beside the existing centred `mp-*` kit.

   What it is: a persistent left rail on desktop that becomes an off-canvas drawer on phones,
   plus a fixed bottom action bar whose centre slot is a raised button. Derived in IDEA from the
   tonplaycasino.fr reference in examples/; re-implemented here, not copied.

   What is deliberately DIFFERENT from that reference, and why:

     palette      the reference hard-codes 253 colour literals with no custom properties, so it
                  cannot be re-skinned. Everything here comes from tokens on :root — swap the
                  eight brand lines and the whole family follows. Two alternate palettes ship
                  commented at the bottom.
     prefix       `mp-sh-*`, so this composes with the section components the existing kit
                  already defines instead of forming a second, parallel vocabulary.
     breakpoints  the reference jitters its media queries across 1021/1022/1023/1024/1025/1026/
                  1027px and 557-563px — a de-duplication trick that makes the CSS unmaintainable.
                  Two honest breakpoints here, named below.
     bottom bar   four labelled slots around the raised centre button rather than three, so the
                  bar can carry real navigation and not only offers.
     drawer       CSS-only (checkbox). No JS class toggle: a sibling land shipped a JS `.is-open`
                  toggle on top of checkbox-hack CSS and the menu was unreachable for weeks
                  (docs/land-fixes-log.md FIX-51). This also works with JS disabled.
     a11y         the reference's bar items are bare <a rel="nofollow"> with no accessible name.
                  Here: labelled landmarks, aria-current, visible focus rings, and the drawer
                  toggle is keyboard-operable because the checkbox stays focusable.
     motion       the slide honours prefers-reduced-motion.
     viewport     100svh with a 100vh fallback, so the mobile URL bar cannot clip the drawer.

   Load order: theme.css (the land's own tokens + section components) THEN shell.css.
   ============================================================================================ */

:root {
  /* ---- ground ---------------------------------------------------------------------------- */
  --sh-bg:          #0b1013;   /* page */
  --sh-surface:     #101a1e;   /* sidebar, bars */
  --sh-surface-2:   #16242a;   /* cards inside the rail */
  --sh-line:        #21363e;   /* hairlines */

  /* ---- ink ------------------------------------------------------------------------------- */
  --sh-ink:         #e8f3f2;
  --sh-ink-2:       #a9c2c4;
  --sh-ink-3:       #6d8a8e;

  /* ---- brand (swap these eight lines to re-skin) ----------------------------------------- */
  --sh-brand:       #17c3a2;
  --sh-brand-deep:  #0e8f77;
  --sh-brand-ink:   #04211c;   /* ink ON the brand — dark, because this brand is a light mint */
  --sh-brand-soft:  rgba(23, 195, 162, 0.13);
  --sh-brand-line:  rgba(23, 195, 162, 0.34);
  --sh-accent:      #ffb454;   /* second accent: badges, the raised button's ring */
  --sh-accent-ink:  #2a1a02;
  --sh-glow:        rgba(23, 195, 162, 0.42);

  /* ---- metrics --------------------------------------------------------------------------- */
  --sh-side-w:      270px;
  --sh-bar-h:       64px;
  --sh-radius:      14px;
  --sh-radius-sm:   9px;
  --sh-gap:         16px;
}

/* Two breakpoints, both named:
     1080px — below this the sidebar can no longer sit beside the content without squeezing it.
      560px — below this the bottom bar drops its labels to icons only.                        */

/* ============================================================ shell ======================== */
.mp-sh {
  display: grid;
  grid-template-columns: var(--sh-side-w) 1fr;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--sh-bg);
}
.mp-sh-main { min-width: 0; }   /* without this a wide table stretches the whole grid column */

/* ============================================================ sidebar ====================== */
.mp-sh-side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sh-surface);
  border-right: 1px solid var(--sh-line);
}
.mp-sh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--sh-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.mp-sh-brand img { height: 30px; width: auto; }

.mp-sh-offer {
  padding: 14px;
  border-radius: var(--sh-radius);
  background: var(--sh-brand-soft);
  border: 1px solid var(--sh-brand-line);
}
.mp-sh-offer-eyebrow {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sh-brand);
  margin: 0 0 6px;
  font-weight: 700;
}
.mp-sh-offer-h { margin: 0 0 4px; font-size: 1.05rem; line-height: 1.2; color: var(--sh-ink); }
.mp-sh-offer-p { margin: 0 0 10px; font-size: .78rem; line-height: 1.45; color: var(--sh-ink-2); }

.mp-sh-navgroup {
  padding: 6px 8px;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sh-ink-3);
  font-weight: 700;
}
.mp-sh-nav { display: flex; flex-direction: column; gap: 2px; }
.mp-sh-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: var(--sh-radius-sm);
  font-size: .875rem;
  font-weight: 500;
  color: var(--sh-ink-2);
  text-decoration: none;
}
.mp-sh-nav a svg { width: 17px; height: 17px; flex: 0 0 auto; }
.mp-sh-nav a:hover { background: var(--sh-brand-soft); color: var(--sh-ink); }
.mp-sh-nav a[aria-current] {
  background: var(--sh-brand-soft);
  color: var(--sh-brand);
  font-weight: 700;
}
.mp-sh-side-foot {
  margin-top: auto;
  padding: 11px;
  border-radius: var(--sh-radius);
  background: var(--sh-bg);
  border: 1px solid var(--sh-line);
}
.mp-sh-side-foot p { margin: 4px 0 0; font-size: .78rem; line-height: 1.45; color: var(--sh-ink-2); }

/* ============================================================ drawer (CSS only) ============ */
/* The checkbox stays in the accessibility tree and keeps focus, so Space toggles the menu with
   no JavaScript at all. Hiding it with display:none would make it unfocusable.

   `position: FIXED`, not absolute — this one word is the difference between a working drawer and
   one that throws the reader back to the top of the page. Clicking a <label> both toggles AND
   focuses its control, and the browser scrolls a focused element into view. Pinned with
   `absolute` the control sits at the top of the DOCUMENT, so once the reader has scrolled down,
   opening the menu (burger label) or closing it (scrim label) yanked the page back up. Fixed, the
   control is always already inside the viewport, so focusing it scrolls nothing. */
.mp-sh-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  opacity: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;   /* it is driven by its labels; nothing should hit the 1px box itself */
}
.mp-sh-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--sh-radius-sm);
  border: 1px solid var(--sh-line);
  background: var(--sh-surface);
  color: var(--sh-ink);
  cursor: pointer;
}
.mp-sh-burger svg { width: 22px; height: 22px; }  /* sans taille explicite, Safari le rend a 0 */
.mp-sh-burger span { position: relative; display: block; width: 20px; height: 2px;
                    background: currentColor; border-radius: 2px; }
.mp-sh-burger span::before, .mp-sh-burger span::after { content: ""; position: absolute;
  left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }
.mp-sh-burger span::before { top: -6px; }
.mp-sh-burger span::after  { top: 6px; }
/* General sibling, not adjacent: the burger sits inside the top bar of the main column, while the
   checkbox has to be a sibling of .mp-sh for :checked to reach the sidebar at all. */
.mp-sh-drawer:focus-visible ~ .mp-sh .mp-sh-burger {
  outline: 2px solid var(--sh-brand);
  outline-offset: 2px;
}
.mp-sh-overlay { display: none; }

/* ============================================================ bottom bar =================== */
/* Four labelled slots around a raised centre button. `auto` in the middle lets the button size
   itself; the two 1fr pairs stay symmetrical whatever the label lengths are. */
.mp-sh-bar { display: none; }
.mp-sh-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  text-decoration: none;
  color: var(--sh-ink-2);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  min-height: 44px;              /* a touch target you can actually hit */
}
.mp-sh-bar-item svg { width: 20px; height: 20px; }
.mp-sh-bar-item[aria-current] { color: var(--sh-brand); }
.mp-sh-bar-item:focus-visible { outline: 2px solid var(--sh-brand); outline-offset: -2px; }

/* The raised centre button. A squircle rather than a circle, and it carries the second accent as
   a ring so it reads as the primary action even against a brand-coloured header behind it. */
.mp-sh-fab {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-top: -20px;
  border-radius: 34%;
  background: var(--sh-brand);
  color: var(--sh-brand-ink);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .55), 0 0 0 4px var(--sh-bg), 0 0 0 5px var(--sh-brand-line);
}
.mp-sh-fab svg { width: 24px; height: 24px; }
.mp-sh-bar-center { gap: 4px; }
.mp-sh-bar-center .mp-sh-bar-label { margin-top: -2px; }

/* ============================================================ rail ========================= */
/* Horizontal scroll-snap strip of cards. The reference used a plain grid, which cannot snap and
   gives no hint that more content exists to the right; this scrolls, snaps, and fades its edge. */
.mp-sh-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: var(--sh-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.mp-sh-rail > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 700px) { .mp-sh-rail { grid-auto-columns: minmax(180px, 1fr); } }

.mp-sh-card { display: block; text-decoration: none; color: inherit; }
.mp-sh-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--sh-line);
  background: var(--sh-surface-2);
}
.mp-sh-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-sh-card-thumb--portrait { aspect-ratio: 3 / 4; }
.mp-sh-card-thumb--wide { aspect-ratio: 16 / 11; }
.mp-sh-card-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 9px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
}
.mp-sh-card-name {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.mp-sh-card-meta { display: block; font-size: .7rem; color: rgba(255, 255, 255, .78); }
.mp-sh-card-badge {
  position: absolute;
  top: 7px; left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--sh-accent);
  color: var(--sh-accent-ink);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ============================================================ tabs ========================= */
.mp-sh-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-sh-tab {
  padding: 9px 16px;
  border-radius: var(--sh-radius-sm);
  border: 1px solid var(--sh-line);
  background: var(--sh-surface);
  color: var(--sh-ink-2);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.mp-sh-tab[aria-selected="true"] {
  background: var(--sh-brand);
  border-color: transparent;
  color: var(--sh-brand-ink);
  font-weight: 700;
}

/* ============================================================ section head ================= */
.mp-sh-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mp-sh-head h2 { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--sh-ink); }
.mp-sh-head a { font-size: .8rem; font-weight: 600; color: var(--sh-brand); text-decoration: none; }
.mp-sh-sect { padding: 22px 26px; }
.mp-sh-sect > * + * { margin-top: var(--sh-gap); }

/* ============================================================ ≤1080px ====================== */
@media (max-width: 1080px) {
  .mp-sh { grid-template-columns: 1fr; }

  .mp-sh-side {
    position: fixed;
    top: 0; left: 0;
    z-index: 80;
    width: 280px;
    height: 100vh;
    height: 100svh;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .mp-sh-drawer:checked ~ .mp-sh .mp-sh-side { transform: translateX(0); }

  .mp-sh-drawer:checked ~ .mp-sh-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0, 0, 0, .68);
  }
  .mp-sh-burger { display: inline-flex; }

  /* room for the bar, plus the home-indicator strip on iOS */
  .mp-sh-main { padding-bottom: calc(var(--sh-bar-h) + env(safe-area-inset-bottom) + 14px); }

  .mp-sh-bar {
    position: fixed;
    right: 0; bottom: 0; left: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr auto 1fr 1fr;
    align-items: center;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--sh-surface);
    border-top: 1px solid var(--sh-line);
    transform: translateZ(0);    /* keeps it off the compositor's repaint path while scrolling */
  }
  .mp-sh-sect { padding: 18px 16px; }
}

@media (max-width: 560px) {
  .mp-sh-bar-label { display: none; }
  .mp-sh-bar-item svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-sh-side { transition: none; }
}

/* ============================================================================================
   ALTERNATE PALETTES — paste over the brand block on :root.

   READ THIS BEFORE USING ONE. An earlier version of this comment claimed each palette was checked
   so that --sh-brand-ink clears 4.5:1 on --sh-brand. That is FALSE for cobalt and it is not
   achievable in general: --sh-brand has to do two jobs at once — be the fill under white ink on
   the raised button / selected tab / active locale chip, AND be the link-and-icon colour readable
   on --sh-bg. On the navy background those two demands do not overlap at all (a fill needs
   luminance <= 0.183 for white to clear 4.5:1; text on the bg needs >= 0.194). One token cannot
   satisfy both.

   So: keep --sh-brand LIGHT for text/icons, and paint the filled surfaces with --sh-brand-deep.
   In cobalt that gives white 5.53:1 on the fill, the fill 3.51:1 against the page (a UI boundary
   needs 3:1), and brand text 5.96:1 on the bg. Amber dodges this by making --sh-brand-ink dark
   instead. Whichever you pick, COMPUTE the ratios — every failure here is invisible by eye.
   Worked example: starzbet-pl (cobalt).

   Amber on graphite
     --sh-bg:#0d0d0f; --sh-surface:#161619; --sh-surface-2:#1f1f24; --sh-line:#2d2d34;
     --sh-brand:#f0a01e; --sh-brand-deep:#c07c0c; --sh-brand-ink:#241701;
     --sh-brand-soft:rgba(240,160,30,.13); --sh-brand-line:rgba(240,160,30,.34);
     --sh-accent:#5cc8ff; --sh-accent-ink:#04202e;

   Cobalt on navy
     --sh-bg:#080d1a; --sh-surface:#0f1728; --sh-surface-2:#172136; --sh-line:#243352;
     --sh-brand:#4d8bff; --sh-brand-deep:#2b62d4; --sh-brand-ink:#ffffff;
     --sh-brand-soft:rgba(77,139,255,.14); --sh-brand-line:rgba(77,139,255,.36);
     --sh-accent:#ff7a9c; --sh-accent-ink:#2e0512;
   ============================================================================================ */

/* ============================================================ top bar ====================== */
/* The strip above the content: drawer toggle, page title, locale switch, primary CTA. On desktop
   the burger is hidden and the bar is just a title + actions row. */
.mp-sh-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 26px;
  background: var(--sh-surface);
  border-bottom: 1px solid var(--sh-line);
}
.mp-sh-topbar-t {
  font-size: .95rem;
  color: var(--sh-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-sh-topbar-lang {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--sh-line);
  background: var(--sh-bg);
}
/* The element is in the selector on purpose. A bare `.mp-sh-lang` loses to any `<nav> a` rule the
   land's own theme happens to define, and the chip then renders at the navigation's font size —
   which is how a two-item switch ended up overflowing its pill on an earlier land. */
.mp-sh-topbar-lang a.mp-sh-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 .55rem;
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--sh-ink-2);
}
.mp-sh-topbar-lang a.mp-sh-lang.is-on {
  background: var(--sh-brand);
  color: var(--sh-brand-ink);
}
.mp-sh-topbar-cta { flex: 0 0 auto; }

@media (max-width: 1080px) {
  .mp-sh-topbar { padding: 9px 14px; }
}
@media (max-width: 560px) {
  .mp-sh-topbar-t { display: none; }
  .mp-sh-topbar-lang { margin-left: auto; }
}

/* ============================================================================================
   Responsible-gaming / legal pages. `.mp-rg` on <body> switches off every OFFER in the chrome.
   The older kit only knew .mp-nav-cta / .mp-linkbar / .mp-bottom-cta, none of which exist in
   this family — so the sidebar's offer card and the bottom bar's raised bonus button survived
   and a live "claim the bonus" CTA shipped on the privacy and cookie pages of the first land
   built on this shell. Belt and braces: the builder should also omit the markup, but the shell
   must not depend on it remembering.
   ============================================================================================ */
.mp-rg .mp-sh-offer,
.mp-rg .mp-sh-topbar-cta,
.mp-rg .mp-sh-bar { display: none !important; }

/* ------------------------------------------------------------------------------------------
   SIDEBAR shell, re-pointed LIGHT. The family's own values are a dark teal set; the four ground
   lines and the eight brand lines are the entire re-skin, exactly as its header promises.
   Every number below is composited-and-measured, not eyeballed.
   ------------------------------------------------------------------------------------------ */
:root {
  --sh-bg:          #f7f8fa;   /* page — the operator's own panel grey */
  --sh-surface:     #ffffff;   /* sidebar and bars: white, as on the operator's site */
  --sh-surface-2:   #f2f4f7;   /* cards inside the rail */
  --sh-line:        #e3e7ec;   /* hairlines */

  --sh-ink:         #1f2429;   /* 15,64:1 on white */
  --sh-ink-2:       #5a636c;   /*  6,11:1 */
  --sh-ink-3:       #6b747d;   /*  4,75:1 — the thinnest ink that still passes */

  --sh-brand:       #c8101a;   /* text AND fill: 5,92:1 either way */
  --sh-brand-deep:  #a80a12;   /* 7,73:1 */
  --sh-brand-ink:   #ffffff;   /* ink ON the brand — WHITE here, because this brand is a dark
                                  red. The family ships a near-black because its own brand is a
                                  light mint; carrying that over would have printed #04211c on
                                  #c8101a, which measures 1,55:1. FIX-90, opposite direction. */
  --sh-brand-soft:  rgba(200, 16, 26, 0.08);
  --sh-brand-line:  rgba(200, 16, 26, 0.26);
  --sh-accent:      #b8235c;   /* second accent: the promo magenta, readable form */
  --sh-accent-ink:  #ffffff;   /* 6,12:1 */
  --sh-glow:        rgba(200, 16, 26, 0.18);
}


/* ==========================================================================
   winmasters-be — blocks that belong to THIS land, prefix .wm-*

   Loaded after the light kit and the SIDEBAR shell, so anything here wins. Every colour is a
   token; the only literals are the two mark plates, which are explained where they are used.

   THIS IS A LIGHT LAND, so every reflex from the dark siblings inverts. The two that matter:
   the plate under a mark is LIGHT and the exception is the light-inked mark (prep.py), and the
   brand red is dark enough to carry white ink rather than needing dark ink on it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wordmark. The supplied logo is 101x16 AFTER trimming its own padding — that is genuinely all
   the resolution the pack has. It is capped at its intrinsic width so it is never upscaled into
   blur (the small-kit-art trap in light-theme-inheritance-traps).
   -------------------------------------------------------------------------- */
/* The selector has to out-specify the family's own `.mp-sh-brand img { height: 30px }` (0,1,1).
   A bare `.wm-logoimg` (0,1,0) loses, and the mark was being drawn at 189x30 from a 101x16
   source — a 1,87x upscale of an already small wordmark, i.e. visible blur. Measured in-browser,
   not guessed: the rendered box was 189x30 while naturalWidth was 101. */
.mp-sh-brand img.wm-logoimg {
  width: 101px; height: 16px; max-width: 100%; display: block;
}

/* --------------------------------------------------------------------------
   Fact strip. FOUR items, and the count is not incidental: the grid is four columns on desktop,
   two at 900px and one at 560px, so 4 divides at every breakpoint (FIX-91).

   This block exists because the first build wrote `.mp-facts`/`.mp-fact` in the markup and
   nothing styled them — they inherited `display:block` and `display:inline` and the four facts
   ran together as one string: «Note 7,5/10Licence annoncee Curacao + MalteDevise EUR (E)Age
   21+». Class names that LOOK like kit classes are the easiest way to ship an unstyled block,
   which is why qa_be.py now checks every class in the HTML against the stylesheet rather than
   only the ones carrying this land's prefix.
   -------------------------------------------------------------------------- */
.wm-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--mp-border); border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg); overflow: hidden;
  margin: var(--mp-s-4) 0 var(--mp-s-5);
}
@media (max-width: 900px) { .wm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wm-facts { grid-template-columns: 1fr; } }
.wm-fact { display: block; background: var(--mp-bg-1); padding: 13px 16px; }
.wm-fact-k {
  display: block; font-family: var(--mp-font-mono); font-size: var(--mp-t-xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--mp-ink-3);
  margin-bottom: 3px;
}
.wm-fact-v {
  display: block; font-family: var(--mp-font-display); font-weight: 700;
  font-size: .9375rem; color: var(--mp-ink);
}

/* --------------------------------------------------------------------------
   1. OFFER CARD — one card, not a deck.

   livewinz-be renders three welcome tickets because that operator publishes three named
   packages. Winmasters publishes ONE, and the figure comes off its own home page in both the
   desktop and the mobile capture: «Welcome bonus — 100% up to 200€!». One offer gets one card.

   The gradient is the operator's own promo wash, DARKENED: sampled #e0487b -> #c14eb5 measures
   3,90:1 and 4,18:1 under white ink and fails both. #b8235c -> #8e2f86 measures 6,12 and 7,24.
   -------------------------------------------------------------------------- */
.wm-offer {
  display: grid; grid-template-columns: 1fr auto; gap: var(--mp-s-5);
  align-items: center;
  background: linear-gradient(115deg, #b8235c 0%, #8e2f86 100%);
  color: #fff;
  border-radius: var(--mp-radius-lg); padding: 26px 28px;
  margin: var(--mp-s-5) 0;
}
.wm-offer-eyebrow {
  margin: 0 0 6px; font-family: var(--mp-font-mono); font-size: var(--mp-t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.wm-offer-v {
  margin: 0 0 8px; font-family: var(--mp-font-display); font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.1; color: #fff;
}
.wm-offer p { margin: 0; color: rgba(255, 255, 255, .92); font-size: var(--mp-t-sm); }
.wm-offer p:last-child { margin-top: 8px; }
@media (max-width: 760px) { .wm-offer { grid-template-columns: 1fr; padding: 22px; } }

/* --------------------------------------------------------------------------
   2. CATEGORY RAIL — the operator's own left-rail taxonomy, read off the desktop capture:
   Lobby Home, then Top Categories (All, Most Liked, New, Popular, Promo, Trending), then
   Categories (Jackpots). No sibling land has this; it exists because this pack ships a
   screenshot with the real category list in it.
   -------------------------------------------------------------------------- */
.wm-rail { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--mp-s-4) 0; }
.wm-rail-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--mp-radius-pill);
  background: var(--mp-bg-1); border: 1px solid var(--mp-border);
  font-size: var(--mp-t-sm); color: var(--mp-ink-2);
}
.wm-rail-chip b { color: var(--mp-ink); font-weight: 600; }
.wm-rail-chip.is-on {
  background: var(--mp-brand); border-color: transparent; color: #fff;   /* 5,92:1 */
}
.wm-rail-chip.is-on b { color: #fff; }

/* --------------------------------------------------------------------------
   3. PAYMENT GRID — the richest payment pack the fleet has had: ten real marks.

   ONE LIGHT PLATE for the nine dark-inked marks, ONE DARK CHIP for Neteller. That is not a
   stylistic mix: measured over its own opaque pixels Neteller is 100% light (mean luma 176) and
   on white it reads 2,33:1, while on #1f2429 it reads 6,74:1. prep.py decides which is which
   and writes it into the media map; nothing here is a hand list.

   Both axes are capped. Capping only the height lets a 113x19 wordmark overflow a tile sized
   for a 100x78 one — FIX-111 in its second form.
   -------------------------------------------------------------------------- */
.wm-paygrid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  list-style: none; margin: var(--mp-s-4) 0; padding: 0;
}
@media (max-width: 900px) { .wm-paygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wm-paygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wm-pay {
  display: flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 10px 14px; border-radius: var(--mp-radius);
  background: #ffffff; border: 1px solid var(--mp-border);
}
.wm-pay--dark {
  /* The one mark whose own ink is light. Same size, same radius, different ground. */
  background: #1f2429; border-color: #1f2429;
}
.wm-payico {
  width: auto; height: auto; max-width: 96px; max-height: 30px; object-fit: contain;
}

/* --------------------------------------------------------------------------
   4. OPERATOR SCREENSHOTS — three dated captures (03.12.2025). No other land in the fleet has
   three genuine screenshots of the product it reviews, so they get a block rather than being
   scattered as decoration.
   -------------------------------------------------------------------------- */
.wm-shots {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--mp-s-3);
  margin: var(--mp-s-5) 0 var(--mp-s-4); align-items: start;
}
@media (max-width: 820px) { .wm-shots { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .wm-shots { grid-template-columns: 1fr; } }
.wm-shot { margin: 0; }
.wm-shot img {
  width: 100%; height: auto; display: block;
  border-radius: var(--mp-radius); border: 1px solid var(--mp-border);
  background: #fff;
}
.wm-shot figcaption {
  margin: 8px 0 0; font-size: var(--mp-t-xs); color: var(--mp-ink-3); line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. SCORECARD — a compact table, not the bar chart livewinz-be uses. Same information, a
   different instrument, so the two lands do not read as one template with the colours moved.
   -------------------------------------------------------------------------- */
.wm-score {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--mp-border); border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg); overflow: hidden;
  margin: var(--mp-s-4) 0 var(--mp-s-5);
}
@media (max-width: 700px) { .wm-score { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .wm-score { grid-template-columns: 1fr; } }
.wm-score > div { background: var(--mp-bg-1); padding: 15px 17px; }
.wm-score dt {
  margin: 0 0 4px; font-size: var(--mp-t-sm); color: var(--mp-ink-3);
}
.wm-score dd {
  margin: 0; font-family: var(--mp-font-display); font-weight: 700; font-size: 1.4rem;
  line-height: 1.1; color: var(--mp-ink);
}
.wm-score dd small {
  font-family: var(--mp-font-body); font-weight: 500; font-size: var(--mp-t-xs);
  color: var(--mp-ink-3);
}
.wm-score > div.is-low dd { color: var(--mp-brand); }   /* 5,92:1 — the axis pulling it down */

/* --------------------------------------------------------------------------
   6. ACTIVE-LINK WIDGET
   -------------------------------------------------------------------------- */
.wm-live {
  display: flex; align-items: center; gap: var(--mp-s-4); flex-wrap: wrap;
  padding: 16px 18px; margin: var(--mp-s-5) 0;
  background: var(--mp-bg-1); border: 1px solid var(--mp-border-strong);
  border-left: 3px solid var(--mp-brand);
  border-radius: var(--mp-radius-lg);
}
.wm-live p { margin: 0; color: var(--mp-ink-2); font-size: var(--mp-t-sm); }
.wm-live .mp-btn { margin-left: auto; }
@media (max-width: 560px) {
  .wm-live .mp-btn { margin-left: 0; width: 100%; text-align: center; }
}
.wm-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px;
  background: var(--mp-pos);
}

/* --------------------------------------------------------------------------
   7. STEPS · CARDS · CHIPS · TABLES · NOTES
   -------------------------------------------------------------------------- */
.wm-steps { counter-reset: wm; list-style: none; margin: var(--mp-s-4) 0; padding: 0; }
.wm-steps li {
  counter-increment: wm; position: relative; padding: 0 0 14px 44px; color: var(--mp-ink-2);
}
.wm-steps li::before {
  content: counter(wm); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mp-font-display); font-weight: 700; font-size: .9rem;
  background: var(--mp-brand); color: #fff;      /* 5,92:1 */
}
.wm-steps li b { color: var(--mp-ink); display: block; }

.wm-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mp-s-3);
  margin: var(--mp-s-5) 0;
}
@media (max-width: 900px) { .wm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wm-cards { grid-template-columns: 1fr; } }
.wm-cards > div {
  padding: 16px 18px; border-radius: var(--mp-radius-lg);
  background: var(--mp-bg-1); border: 1px solid var(--mp-border);
}
.wm-cards h3 {
  margin: 0 0 6px; font-family: var(--mp-font-display); font-size: 1rem; color: var(--mp-ink);
}
.wm-cards p { margin: 0; font-size: var(--mp-t-sm); color: var(--mp-ink-2); }

.wm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.wm-chip {
  padding: 7px 13px; border-radius: var(--mp-radius-pill);
  background: var(--mp-bg-2); border: 1px solid var(--mp-border);
  font-size: var(--mp-t-sm); color: var(--mp-ink-2);
}

.wm-tw { overflow-x: auto; margin: var(--mp-s-4) 0; -webkit-overflow-scrolling: touch; }
.wm-tw table { width: 100%; border-collapse: collapse; min-width: 520px; }
.wm-tw th {
  text-align: left; padding: 12px 14px; font-family: var(--mp-font-display);
  font-size: var(--mp-t-sm); color: #fff; background: var(--mp-brand);   /* 5,92:1 */
}
.wm-tw td {
  padding: 12px 14px; border-bottom: 1px solid var(--mp-border);
  font-size: var(--mp-t-sm); color: var(--mp-ink-2); vertical-align: top;
}
.wm-tw tbody tr:nth-child(even) { background: var(--mp-bg-2); }
.wm-t2 td:first-child, .wm-t4 td:first-child { white-space: nowrap; }

.wm-note { font-size: var(--mp-t-sm); color: var(--mp-ink-3); }

.wm-sport { display: grid; gap: 10px; margin: var(--mp-s-5) 0; }
.wm-sport-row {
  display: grid; grid-template-columns: 190px 1fr; gap: var(--mp-s-4);
  padding: 14px 16px; border-radius: var(--mp-radius);
  background: var(--mp-bg-1); border: 1px solid var(--mp-border);
  border-left: 3px solid var(--mp-amber);
}
@media (max-width: 620px) { .wm-sport-row { grid-template-columns: 1fr; gap: 4px; } }
.wm-sport-row b { font-family: var(--mp-font-display); color: var(--mp-ink); }
.wm-sport-row span { color: var(--mp-ink-2); font-size: var(--mp-t-sm); }

/* --------------------------------------------------------------------------
   8. GAME GRID — the family's card, with two corrections this pack forces.

   (a) EIGHT OF THE TEN TILES ARE TRANSPARENT WORDMARKS and two are opaque photographic covers.
       `object-fit: cover` is right for the covers and destroys the wordmarks (FIX-124), so the
       fit is chosen per kind: `.wm-tile--mark` contains, `.wm-tile--cover` covers.
   (b) TEN TILES DIVIDE BY FIVE AND BY TWO but not by three or four (FIX-91). The grid is a
       centred flex wrap, which has no column count to divide by at all.
   -------------------------------------------------------------------------- */
.wm-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mp-s-3); }
.wm-tile {
  flex: 0 1 178px; display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden;
  background: var(--mp-bg-1); border: 1px solid var(--mp-border);
  color: var(--mp-ink);
}
.wm-tile:hover { border-color: var(--mp-brand-line, var(--mp-border-strong)); color: var(--mp-ink); }
.wm-tile img { width: 100%; height: 112px; flex: 0 0 112px; display: block; }
.wm-tile--mark img { object-fit: contain; padding: 12px; box-sizing: border-box; }
.wm-tile--cover img { object-fit: cover; }
.wm-tile-cap {
  padding: 10px 12px 12px; background: var(--mp-bg-2); min-height: 60px;
  display: flex; flex-direction: column; justify-content: center;
}
.wm-tile-name {
  display: block; font-size: .9375rem; font-weight: 700; line-height: 1.2;
  color: var(--mp-ink);
}
.wm-tile-sub { display: block; font-size: var(--mp-t-xs); color: var(--mp-ink-3); margin-top: 3px; }
@media (max-width: 520px) {
  .wm-tile { flex: 0 1 150px; }
  .wm-tile img { height: 94px; flex-basis: 94px; }
}

/* --------------------------------------------------------------------------
   9. Prose links.

   `a:not([class])`, NEVER a bare `.mp-prose a` — that rule is 0,2,0 and swallows every button
   inside the prose column, at rest and on hover both. Done twice in two days on the siblings
   (FIX-126, FIX-130); matching «has no class at all» cannot swallow the next button class
   either.
   -------------------------------------------------------------------------- */
.mp-prose a:not([class]) { color: var(--mp-brand); }            /* 5,92:1 on white */
.mp-prose a:not([class]):hover { color: var(--mp-brand-deep); } /* 7,73:1 */

/* --------------------------------------------------------------------------
   10. Four classes the widened gate caught as unstyled.

   All four were written into the markup on the assumption that the kit or the shell defined
   them. None did. `.mp-facts`, `.mp-fact`, `.mp-faq-q`, `.mp-lead`, `.mp-btn-block` and
   `.mp-sh-langs` all LOOKED like framework classes, which is exactly why they got through the
   first build — a check scoped to this land's `wm-` prefix could not see any of them. The two
   that were really the kit's (`.mp-faq`, `.mp-faq-list`) are now used in the kit's own shape;
   the rest live here under this land's prefix, where the gate can see them.
   -------------------------------------------------------------------------- */
.wm-lead {
  font-size: 1.0625rem; line-height: 1.7; color: var(--mp-ink-2);
  max-width: 72ch;
}

.wm-btn-block { width: 100%; justify-content: center; text-align: center; }

/* Language chips in the sidebar foot. The current one is a filled brand chip under white ink
   (5,92:1); the others are outlined and take the mid ink (6,11:1). */
.wm-langs { display: flex; gap: 6px; margin-top: 12px; }
.wm-lang {
  font-size: var(--mp-t-xs); font-weight: 700; letter-spacing: .04em;
  padding: 5px 10px; border-radius: var(--mp-radius-sm, 8px);
  border: 1px solid var(--mp-border-strong); color: var(--mp-ink-2); text-decoration: none;
}
.wm-lang:hover { color: var(--mp-ink); border-color: var(--mp-ink-3); }
.wm-lang.is-on {
  background: var(--mp-brand); border-color: transparent; color: #fff;
}
.wm-lang.is-on:hover { background: var(--mp-brand-deep); color: #fff; }

/* The FAQ container. The kit styles `.mp-faq` (each <details>) but not the list around them. */
.mp-faq-list { display: grid; gap: 12px; margin: var(--mp-s-4) 0; }