/**
 * GLITZY BINGO MAGAZINE
 * glitzy-magazine.css
 *
 * Copyright (c) 2007-2026 Glitzy Bingo. All rights reserved.
 * https://www.glitzybingo.com
 *
 * This stylesheet and the design it describes are original works, created
 * for glitzybingo.com and licensed for use on that site alone. Copying,
 * redistributing or adapting it, in whole or in part, for use on any other
 * site is not permitted without written permission.
 *
 * Enquiries: https://www.glitzybingo.com/about/#contact
 *
 * Note for anyone reading this in a browser: this notice does not stop
 * anyone copying the file — nothing served to a browser can. It is here so
 * that authorship and the terms of use are on the record, which is what
 * matters if a copy ever has to be challenged.
 */

/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
  /* Colors */
  --pink: #E91E8C;
  --pink-dark: #C71585;
  --pink-light: #ff6b9d;
  --pink-bg: #fdf4f7;
  --cyan: #00BCD4;
  --cyan-dark: #0097A7;
  --teal: #0d4f4f;
  --teal-light: #2d8a8a;
  --gold: #FFD700;
  --purple: #9c27b0;

  /* Card accent colours — decorative use only, not nav/section colours */
  --card-coral:   #E8472A;
  --card-amber:   #7C3AED;
  --card-lime:    #65A30D;
  --card-sky:     #0EA5E9;
  --card-rose:    #F43F5E;
  --card-violet:  #7C3AED;
  --black: #1a1a1a;
  --dark: #333333;
  --grey: #555555;
  --grey-light: #888888;
  --border: #e0e0e0;
  --bg: #fafafa;
  --white: #ffffff;
  --danger: #c62828;
  --danger-bg: #ffebee;
  --success: #2e7d32;
  --success-bg: #e8f5e9;
  
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-editorial: 'Lora', Georgia, serif;
  /* ─────────────────────────────────────────────────────
     DAUBLE GAME FONT — always use Cinzel for:
     · game tile letters  · popup headlines
     · "Today's Word Was" · "Meaning" labels
     · scoreboard labels  · weekly word list
     Never use Lora or system sans for Dauble UI labels.
     ───────────────────────────────────────────────────── */
  --font-dauble: 'Cinzel', Georgia, serif;
  
  /* Shadows - consolidated */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 3px 8px rgba(0,0,0,0.1);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-dark: 0 3px 10px rgba(0,0,0,0.15);
}

/* ============================================
   RESET & BASE
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { 
  font-family: var(--font-sans); 
  font-size: 14px; 
  line-height: 1.6; 
  color: var(--dark); 
  background: var(--black) url('/assets/images/bg-glitzy-bingo.webp') 4px 0 repeat;
  overflow-x: clip;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; }

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text utilities */
.text-pink { color: var(--pink); }
.text-cyan { color: var(--cyan); }
.text-purple { color: var(--purple); }
.text-red { color: var(--danger); }
.text-green { color: #16A34A; }

/* Shared typography patterns */
.mag-card-title {
  font-family: var(--font-editorial);
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.mag-card-title--white { color: #fff; }
.mag-card-title--black { color: var(--black); }
.mag-card-title--pink { color: var(--pink); }
.mag-card-title--teal { color: var(--teal); }
.mag-card-title--danger { color: var(--danger); }
.text-center { text-align: center; }

/* Link utilities - pink CTA style */
.link-pink { 
  color: var(--pink); 
  font-weight: 600; 
  transition: color 0.15s; 
}
.link-pink:hover { color: var(--pink-dark); }

/* Site wrapper */
.site-wrapper { max-width: 980px; margin: 0 auto; background: var(--white); box-shadow: 0 0 40px rgba(0,0,0,0.3); border-top: 4px solid var(--pink); }

/* ============================================
   MASTHEAD
   ============================================ */

/* Black issue bar at top */
.mag-issue-bar {
  background: #000;
  padding: 0.5rem 1rem;
  text-align: center;
}

.mag-issue-bar p {
  font-size: 10px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}

.mag-issue-bar__star {
  font-size: 6px;
  vertical-align: middle;
  opacity: 0.7;
}

.mag-masthead {
  background: url('/assets/images/glitzy-bingo-header.webp') center center / cover no-repeat;
  background-color: var(--pink);
  /* padding: 0 1.5rem 0; */
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Colour shift overlay - pinks to purples */
.mag-masthead::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(233, 30, 140, 0.3) 0%,
    rgba(156, 39, 176, 0.4) 25%,
    rgba(199, 21, 133, 0.35) 50%,
    rgba(139, 92, 246, 0.4) 75%,
    rgba(233, 30, 140, 0.3) 100%
  );
  background-size: 300% 100%;
  -webkit-animation: gradient-shift 6s ease-in-out infinite;
  animation: gradient-shift 6s ease-in-out infinite;
  z-index: 1;
  will-change: background-position;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.mag-masthead::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  z-index: 2;
  pointer-events: none;
}

@keyframes gradient-shift {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

@-webkit-keyframes gradient-shift {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

.mag-masthead__logo-link,
.mag-masthead__logo,
.mag-masthead__tagline {
  position: relative;
  z-index: 3;
}

.mag-masthead__logo-link {
  display: block;
}

.mag-masthead__logo {
  max-width: 380px;
  width: 90%;
  height: auto;
  margin: 0 auto 0.15rem;
  display: block;
}

.mag-masthead__tagline {
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 700;
  width: 95%;
  color: rgba(255,255,255,0.95);
  font-style: italic;
  margin: -15px auto 10px auto;
  letter-spacing: 0.5px;
  background-color: rgba(255, 255, 255, 0.16);
}
@media (min-width: 768px) {
  .mag-masthead__tagline {
    font-size: 18px;
    letter-spacing: 1px;
  }
}

.mag-masthead__star {
  font-size: 8px;
  vertical-align: middle;
}

.mag-masthead__title {
  font-family: var(--font-editorial); font-size: 40px; font-weight: 700; font-style: italic; color: #fff; margin: 0 0 0.375rem; text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Visually hidden for SEO */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   GLOSSY NAV with Bingo Balls
   ============================================ */

.mag-nav-glossy {
  background: #1a1a1a;
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Home - always visible on left */
.nav-item--home {
  background: var(--pink);
  color: #fff;
  flex-shrink: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.85rem;
}

.nav-item--home:hover {
  background: var(--pink-dark);
}

.nav-home-icon {
  width: 19px;
  height: 19px;
  display: block;
}

/* Scrollable area for other items */
.mag-nav-glossy__inner {
  display: flex; 
  flex-wrap: nowrap; 
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mag-nav-glossy__inner::-webkit-scrollbar {
  display: none;
}

.nav-item {
  display: flex; align-items: center; gap: 0.4rem;
  color: rgba(255,255,255,0.9); font-size: 15px; font-weight: 600; 
  padding: 0.875rem 1rem; letter-spacing: 0.5px; 
  transition: color 0.15s ease, background 0.15s ease;
  position: relative;
  font-family: var(--font-editorial);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(233,30,140,0.2);
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  border: 2px solid transparent;
  border-radius: 4px;
}

.nav-item:hover {
  color: #fff; 
  background: rgba(255,255,255,0.1);
}
/* On touch devices, don't let hover state stick and block subsequent taps */
@media (hover: none) {
  .nav-item:hover { background: transparent; }
  .nav-item:hover::before { width: 0; }
}

.nav-item--active {
  color: #fff;
  background: linear-gradient(#1a1a1a, #1a1a1a) padding-box,
              conic-gradient(from var(--nav-angle, 0deg), #F43F5E, #9c27b0, #00BCD4, #65A30D, #7C3AED, #0EA5E9, #F43F5E) border-box;
  border: 2px solid transparent;
  border-radius: 4px;
  animation: nav-snake 3s linear infinite;
}
@property --nav-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes nav-snake {
  to { --nav-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item--active { animation: none; }
}

@media (max-width: 900px) {
  .nav-item { padding: 0.85rem 0.95rem; font-size: 12px; min-height: 44px; }
  .nav-item--home { padding: 0.75rem 0.75rem; }
}

/* Coloured dots */
.nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-dot--blue   { background: #3B82F6; }
.nav-dot--cyan   { background: var(--cyan); }
.nav-dot--pink   { background: var(--pink); }
.nav-dot--purple { background: #8B5CF6; }
.nav-dot--orange { background: #F97316; }
.nav-dot--gold   { background: var(--gold); }
.nav-dot--peach  { background: #E8734A; } /* darker peach - lotto (MASTER-257) */
.nav-dot--teal   { background: var(--teal-light); }
.nav-dot--white  { background: #E8913A; }
.nav-dot--red    { background: var(--danger); }
.nav-dot--rainbow {
  background: conic-gradient(#F43F5E, #9c27b0, #00BCD4, #65A30D, #7C3AED, #0EA5E9, #F43F5E);
  box-shadow: 0 0 4px rgba(244,63,94,.6);
}
.nav-dot--multi-green {
  background: conic-gradient(#16A34A, #00BCD4, #4ade80, #0891b2, #65A30D, #06b6d4, #16A34A);
  box-shadow: 0 0 4px rgba(22,163,74,.6);
}
.nav-dot--silver { background: linear-gradient(135deg, #E8751A 0%, #C1440E 55%, #8F2E08 100%); box-shadow: 0 0 5px rgba(193,68,14,.55); }
.nav-dot--darkgold { background: linear-gradient(135deg, #00BCD4, #7C3AED); box-shadow: 0 0 4px rgba(124,58,237,.4); }
.nav-dot--clubs  { background: linear-gradient(135deg, #7C3AED, #E91E8C); } /* clubs theme gradient (MASTER-258) */

/* Bingo ball numbers */
.nav-ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 10px; font-weight: 800; font-family: var(--font-sans);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.3);
  transition: all 0.25s;
}

.nav-item:hover .nav-ball {
  transform: scale(1.15) rotate(-5deg);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.4), 0 0 12px currentColor;
}

/* Ball colours - proper bingo style */
.nav-ball--pink { background: linear-gradient(135deg, #ff6b9d 0%, #E91E8C 50%, #C71585 100%); }
.nav-ball--blue { background: linear-gradient(135deg, #64b5f6 0%, #1976d2 50%, #0d47a1 100%); }
.nav-ball--purple { background: linear-gradient(135deg, #ce93d8 0%, #9c27b0 50%, #6a1b9a 100%); }
.nav-ball--orange { background: linear-gradient(135deg, #ffb74d 0%, #f57c00 50%, #e65100 100%); }
.nav-ball--gold { background: linear-gradient(135deg, #fff59d 0%, #fdd835 50%, #f9a825 100%); color: #5d4037; }
.nav-ball--teal { background: linear-gradient(135deg, #4db6ac 0%, #00897b 50%, #004d40 100%); }
.nav-ball--green { background: linear-gradient(135deg, #81c784 0%, #43a047 50%, #2e7d32 100%); }

/* Underline animation — default */
.nav-item::before {
  content: ''; position: absolute; bottom: 4px; left: 50%; width: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
  transition: all 0.3s ease; transform: translateX(-50%);
  pointer-events: none; /* never intercept clicks/taps */
}
.nav-item:hover::before { width: 80%; }

/* Underline colour matches dot colour per section */
.nav-item:has(.nav-dot--pink):hover::before    { background: linear-gradient(90deg, transparent, var(--pink), transparent); }
.nav-item:has(.nav-dot--cyan):hover::before    { background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.nav-item:has(.nav-dot--purple):hover::before  { background: linear-gradient(90deg, transparent, #8B5CF6, transparent); }
.nav-item:has(.nav-dot--white):hover::before   { background: linear-gradient(90deg, transparent, #E8913A, transparent); }
.nav-item:has(.nav-dot--gold):hover::before    { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.nav-item:has(.nav-dot--peach):hover::before   { background: linear-gradient(90deg, transparent, #E8734A, transparent); }
.nav-item:has(.nav-dot--red):hover::before     { background: linear-gradient(90deg, transparent, var(--danger), transparent); }
.nav-item:has(.nav-dot--teal):hover::before    { background: linear-gradient(90deg, transparent, var(--teal-light), transparent); }
.nav-item:has(.nav-dot--blue):hover::before    { background: linear-gradient(90deg, transparent, #3B82F6, transparent); }
.nav-item:has(.nav-dot--orange):hover::before  { background: linear-gradient(90deg, transparent, #F97316, transparent); }
.nav-item:has(.nav-dot--rainbow):hover::before { background: linear-gradient(90deg, transparent, #F43F5E, #9c27b0, #00BCD4, #65A30D, #7C3AED, #0EA5E9, transparent); }
.nav-item:has(.nav-dot--multi-green):hover::before { background: linear-gradient(90deg, transparent, #16A34A, #00BCD4, #4ade80, #06b6d4, transparent); }
.nav-item:has(.nav-dot--silver):hover::before  { background: linear-gradient(90deg, transparent, #C1440E, transparent); }
.nav-item:has(.nav-dot--darkgold):hover::before { background: linear-gradient(90deg, transparent, #B8860B, transparent); }

/* ============================================
   TICKER
   ============================================ */

.mag-ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, var(--pink) 0%, var(--purple) 50%, var(--pink) 100%);
  background-size: 200% 100%;
  overflow: hidden;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  min-height: 44px;
  /* Slim black accent stripe on the left edge — matches the cube's
     black background above, ties the two visually. */
  border-left: 10px solid #1a1a2e;
}

.mag-ticker__scroll {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Add padding to body so content isn't hidden behind ticker */
body {
  padding-bottom: 60px;
}

.mag-ticker__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker 30s linear infinite;
  will-change: transform;
  /* Force GPU compositing on its own layer so the loop-back doesn't
     re-paint / flash. Combined with translate3d in the keyframes this
     eliminates the visible seam when the animation resets. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* WCAG 2.2.2 (Pause, Stop, Hide) — pause on hover and keyboard focus. */
.mag-ticker:hover .mag-ticker__track,
.mag-ticker:focus-within .mag-ticker__track {
  animation-play-state: paused;
}

/* Respect the OS-level reduced-motion preference — stop the animation
   entirely so the ticker becomes a static list users can read at will. */
@media (prefers-reduced-motion: reduce) {
  .mag-ticker__track {
    animation: none !important;
    transform: none !important;
  }
}

/* All items share the SAME font-size + weight for a consistent read.
   Colour variations (rollovers gold, links white) stay — only sizing
   is unified so the bar doesn't visually jitter as items scroll past. */
.mag-ticker__item {
  flex-shrink: 0;
  padding: 0 2.5rem;
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.mag-ticker__item--rollover { color: #fde68a; }
.mag-ticker__item--rollover a { color: #fde68a; text-decoration: underline; }
.mag-ticker__item strong { font-weight: 700; }
.mag-ticker__item a {
  color: #fff;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.mag-ticker__item a:hover { text-decoration: underline; }

@keyframes ticker {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.mag-ticker__social {
  background: var(--black);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  flex-shrink: 0;
}

@media (min-width: 701px) {
  .mag-ticker__social {
    padding: 0 2rem;
    gap: 1rem;
  }
}

.mag-ticker__social-link {
  transition: opacity 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mag-ticker__social-link svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 701px) {
  .mag-ticker__social-link svg {
    width: 22px;
    height: 22px;
  }
}

.mag-ticker__social-link:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

/* Facebook - cyan */
.mag-ticker__social-link[aria-label="Facebook"] {
  color: var(--cyan);
}

/* X/Twitter - white */
.mag-ticker__social-link[aria-label="X/Twitter"] {
  color: #fff;
}

/* Instagram - gradient effect via pink */
.mag-ticker__social-link[aria-label="Instagram"] {
  color: #E91E8C;
}

/* ============================================
   SECTIONS & LAYOUT
   ============================================ */

.mag-section {
  padding: 2rem 1.5rem;
}

.mag-section--alt { background: var(--bg); }
.mag-section--dark { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); }
.mag-section--pink { background: var(--pink-bg); }

.mag-section__title {
  font-family: var(--font-editorial); font-size: 22px; font-weight: 700; color: var(--black); text-align: center; margin: 0 0 0.25rem;
}

.mag-section__title--light { color: #fff; }

.mag-section__subtitle {
  font-size: 13px; color: var(--grey-light); text-align: center; font-style: italic; margin: 0 0 0.5rem;
}

.mag-section__stars {
  font-size: 13px; color: var(--pink); letter-spacing: 6px; text-align: center; margin: 0 0 1.5rem;
}

.mag-row {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2rem;
}

.mag-row--equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.mag-col {
  min-width: 0;
}

/* ============================================
   SECTION BREAK
   ============================================ */

.mag-break {
  padding: 0; background: linear-gradient(90deg, transparent 5%, var(--pink) 50%, transparent 95%); height: 3px;
}

.mag-break--light {
  background: linear-gradient(90deg, transparent 5%, var(--border) 50%, transparent 95%);
}

.mag-divider-pink {
  height: 6px;
  background: linear-gradient(90deg, transparent 0%, var(--pink) 10%, var(--pink) 90%, transparent 100%);
  margin: 0;
}

/* ============================================
   SECTION 1: COVER + EDITOR
   ============================================ */

.mag-label {
  display: inline-block; background: var(--pink); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; padding: 4px 12px; margin-bottom: 1.5rem;
  transform: rotate(-2deg);
}
h2.mag-label, h3.mag-label {
  font-size: 10px;
  line-height: 1;
  margin-top: 0;
}

@media (min-width: 768px) {
  .mag-label {
    font-size: 12px;
    padding: 5px 14px;
  }
}

.mag-label--alert {
  background: #c62828;
  animation: pulse-alert 2s infinite;
}

.mag-label--cyan   { background: var(--cyan); }
.mag-label--green  { background: #16A34A; }
.mag-label--purple { background: var(--purple); }
.mag-label--pink   { background: var(--pink); }
.mag-label--red    { background: var(--danger); }
.mag-label--black  { background: #1a1a1a; color: #fff; }

@keyframes pulse-alert {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* ═══════════════════════════════════════════════════════════════════
   EDITORIAL TYPOGRAPHY BOILERPLATE — mag-cover component
   ═══════════════════════════════════════════════════════════════════

   Use this hierarchy for ALL editorial articles across the site:
   Glitzy's Take, lotto explainers, brand review editorials, etc.
   Everything below goes inside a wrapping <article class="mag-cover">.

   ┌──────────────────────────────────────────────────────────────────┐
   │  MARKUP TEMPLATE                                                 │
   ├──────────────────────────────────────────────────────────────────┤
   │                                                                  │
   │  <article class="mag-cover gz-dir-editorial-article">            │
   │                                                                  │
   │    <!-- ✦ Snake label above H2 (optional, editorial flag) -->   │
   │    <span class="gz-snake-wrap gz-snake-wrap--pink                │
   │                 gz-snake-wrap--rotated">                         │
   │      <span class="mag-label mag-label--pink gz-snake-label">     │
   │        ✦ GLITZY'S TAKE ✦                                         │
   │      </span>                                                     │
   │    </span>                                                       │
   │                                                                  │
   │    <!-- H2 article title — 22/26px editorial italic serif -->    │
   │    <h2 class="mag-cover__title">                                 │
   │      Main Title <span class="text-pink">with pink bit</span>     │
   │    </h2>                                                         │
   │    <p class="mag-cover__stars">✦ ✦ ✦</p>                        │
   │                                                                  │
   │    <!-- Standfirst — bold lede paragraph w/ drop cap -->         │
   │    <p class="mag-cover__standfirst">                             │
   │      <span class="drop-cap drop-cap--pink">B</span>ig opener.    │
   │    </p>                                                          │
   │                                                                  │
   │    <!-- Body paragraph — 15/16px sans, 1.65 line height -->      │
   │    <p class="mag-cover__body">Regular prose here.</p>            │
   │                                                                  │
   │    <!-- H3 section subhead — 22/26px black italic serif -->      │
   │    <h3 class="mag-cover__subhead">Why This Matters</h3>          │
   │                                                                  │
   │    <p class="mag-cover__body">More body prose.</p>               │
   │                                                                  │
   │    <!-- H3 sub-subhead — 15/16px pink uppercase sans -->         │
   │    <!-- Use ONLY when nested under a main subhead -->            │
   │    <h3 class="mag-cover__subhead mag-cover__subhead--sm">        │
   │      Entain plc                                                  │
   │    </h3>                                                         │
   │                                                                  │
   │    <!-- Pull quote — callout for a punchy line -->               │
   │    <div class="mag-editorial-pull">                              │
   │      <p>"Memorable line from the article."</p>                   │
   │    </div>                                                        │
   │                                                                  │
   │  </article>                                                      │
   │                                                                  │
   └──────────────────────────────────────────────────────────────────┘

   SIZE HIERARCHY SUMMARY (mobile / desktop ≥768px):
   ──────────────────────────────────────────────────
   .mag-cover__title        22px / 26px   H2 article title
   .mag-cover__subhead      22px / 26px   H3 main section head
   .mag-cover__subhead--sm  15px / 16px   H3 sub-subhead (pink caps)
   .mag-cover__standfirst   17px          Bold lede paragraph
   .mag-cover__body         16px          Regular prose

   DO NOT:
   ─ Use inline style="" to override sizes on these classes
   ─ Skip from __title to __body with no __subhead in between
   ─ Use __subhead--sm without a parent __subhead nearby
   ─ Wrap __subhead content in <strong> — class handles weight
   ═══════════════════════════════════════════════════════════════════ */

.mag-cover__title {
  font-family: var(--font-editorial); font-size: 21.5px; font-weight: 700; line-height: 1.25; color: var(--black); margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .mag-cover__title { font-size: 26px; }
}

.mag-cover__title--pink {
  color: var(--pink);
  font-weight: 900;
}

.mag-cover__standfirst {
  font-size: 17.5px; color: #333; line-height: 1.4; margin: 0 0 1.1rem; font-weight: 800;
}

/* Mixed-weight variant — only applied on bingo game pages where the standfirst
   is used like a proper magazine lede (bold opener, regular-weight continuation).
   Base page weight drops to 500; <strong>/<b> tags inside render bold.
   Add alongside .mag-cover__standfirst, never replaces it, so other templates
   using .mag-cover__standfirst alone are unaffected. */
.mag-cover__standfirst--mixed {
  font-weight: 500;
}
.mag-cover__standfirst--mixed strong,
.mag-cover__standfirst--mixed b {
  font-weight: 800;
  color: #111;
}
/* Editorial dek/standfirst that sits between the H1 and the byline meta line.
   Used on brand/company/network pages to carry the magazine voice without
   bloating the H1 itself. Italic, slightly smaller than standfirst. */
.mag-cover__dek {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  color: #444;
  line-height: 1.45;
  margin: 0.5rem 0 1rem;
}
@media (min-width: 768px) {
  .mag-cover__dek { font-size: 20px; }
}
/* Second+ paragraphs of the intro/lede — normal weight, sits under the bold standfirst */
.mag-cover__lede-body {
  font-family: var(--font-sans);
  font-size: 17.5px; color: #333; line-height: 2; margin: 0 0 1.1rem; font-weight: 400;
}
@media (max-width: 767px) {
  .mag-cover__lede-body { font-size: 16px !important; line-height: 1.65 !important; }
}

/* Drop cap for editorial style */
.drop-cap {
  float: left;
  font-family: var(--font-editorial);
  font-size: 3.8rem;
  width: 1.35em;
  height: 1.35em;
  line-height: 1.35em;
  text-align: center;
  color: var(--pink);
  font-weight: 900;
  border: 2px solid #1a1a2e;
  border-radius: 0;
  background: transparent;
  margin-right: 0.25em;
  margin-top: 0.05em;
  margin-bottom: 0.15em;
  box-sizing: border-box;
  padding: 0;
}

.drop-cap--purple {
  color: var(--purple);
}

/* Vault variant — dark purple → dark cyan gradient letter, same palette as
   .gz-vault__title-metal. Solid dark cyan fallback for older browsers. */
.drop-cap--vault {
  color: #C1440E;
  background: linear-gradient(135deg, #8F2E08 0%, #C1440E 40%, #E8751A 70%, #F59E0B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Party variant — pink→violet→cyan→green gradient letter for the
   /party-bingo-events/ section. Solid violet fallback for old browsers. */
.drop-cap--party {
  color: #9c27b0;
  border-color: #9c27b0;
  background: linear-gradient(135deg, #F43F5E 0%, #9c27b0 40%, #00BCD4 75%, #00E676 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section header - full width */
.mag-section-header {
  margin-bottom: 1rem;
}

.mag-section-header--split {
  display: grid;
  grid-template-columns: 2fr 5fr;
  gap: 1.25rem;
  align-items: start;
}

.mag-section-header__left,
.mag-section-header__right {
  min-width: 0;
}

/* Thick border divider */
.mag-thick-border {
  height: 4px;
  background: var(--purple);
  margin: 0 0 1.5rem;
}

/* Faded border divider */
.mag-faded-border {
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--pink) 20%, var(--pink) 80%, transparent 100%);
  margin: 1rem 0 1.5rem;
}

.mag-faded-border--purple {
  background: linear-gradient(90deg, transparent 0%, var(--purple) 20%, var(--purple) 80%, transparent 100%);
}

.mag-faded-border--green {
  background: linear-gradient(90deg, transparent 0%, #16A34A 20%, #16A34A 80%, transparent 100%);
}

.mag-faded-border--top {
  margin: 0 0 1rem;
}

/* Top Prize box */
.mag-top-prize {
  display: inline-block;
  background: rgba(156, 39, 176, 0.1);
  border: 1px solid var(--purple);
  padding: 0.25rem 0.75rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--purple);
  margin-top: 0.5rem;
}

.mag-top-prize__star {
  font-size: 8px;
}

@media (max-width: 800px) {
  .mag-section-header--split {
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

.mag-cover__meta {
  font-size: 12px; color: var(--grey-light); margin: 0 0 0.5rem; font-style: italic;
}

.mag-cover__meta a {
  color: var(--pink);
  text-decoration: none;
}

.mag-cover__meta a:hover {
  text-decoration: underline;
}

.mag-cover__venue {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: #666;
  margin: 0.3rem 0 0.1rem;
  line-height: 1.4;
}
.mag-cover__stars {
  font-size: 13px;
  color: var(--gz-game-color, var(--pink));
  letter-spacing: 4px;
  margin: 0 0 1rem;
}

.mag-cover__cta {
  display: inline-block; background: var(--pink); color: #fff; font-size: 13px; font-weight: 600;
  padding: 0.75rem 1.5rem; border-radius: 4px; transition: background 0.2s;
}

.mag-cover__cta:hover { background: var(--pink-dark); color: #fff; }

a.mag-cover__continue {
  font-family: var(--font-editorial);
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  color: var(--pink);
}

a.mag-cover__continue:hover {
  color: var(--pink-dark);
  text-decoration: underline;
}

/* Cover body text */
.mag-cover__body {
  font-family: var(--font-sans);
  font-size: 17.5px; color: #333; line-height: 1.75; margin: 0 0 1.1rem; font-weight: 400;
}
/* When mag-cover__body is a wrapper div (guide sections), space inner p tags */
div.mag-cover__body p { margin: 0 0 1.1rem; }
div.mag-cover__body p:last-child { margin-bottom: 0; }

/* Bare p tags inside guide articles (no class) — match mag-cover__body styling */
.gz-fw-content .mag-cover > p {
  font-family: var(--font-sans);
  font-size: 16px; color: #333; line-height: 1.65; font-weight: 500;
  margin: 0 0 1.1rem;
}
.gz-fw-content .mag-cover > p:last-of-type { margin-bottom: 0; }

/* Highlight text - deep pink italic */
.mag-highlight {
  color: var(--pink-dark);
  font-style: italic;
  font-weight: 600;
}

/* Mini heading for inline sections */
.mag-mini-heading {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  margin: 1.25rem 0 0.5rem;
}

/* Mini list for Q&A style content */
.mag-mini-list {
  margin: 0.75rem 0 1.25rem;
  padding-left: 0;
}

.mag-mini-list p {
  font-size: 14px;
  color: #444;
  margin: 0 0 0.5rem;
  line-height: 1.5;
}

.mag-mini-list p strong {
  color: var(--pink);
}

/* Editorial pull quote */
.mag-editorial-pull {
  background: rgba(252, 244, 247, 0.66);
  border-top: 2px solid var(--pink);
  border-bottom: 2px solid var(--pink);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
}

.mag-editorial-pull p {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-style: italic;
  font-weight: 600 !important;
  color: var(--pink-dark);
  line-height: 1.5;
  margin: 0;
}

/* More From Daily Daub divider */
.mag-more-divider {
  text-align: center;
  padding: 1rem 0;
  margin: 1rem 0 0.5rem;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* Section Stars Divider */
.mag-section-stars {
  text-align: center;
  /* Inherit the section's signature theme colour, same as .mag-cover__stars.
     Falls back to pink where no section theme override is present so
     existing pages that rely on the pink flourish keep it. */
  color: var(--gz-game-color, var(--pink));
  font-size: 20px;
  letter-spacing: 8px;
  margin: 0.5rem 0 0.1rem;
  opacity: 1;
}

/* Single decorative star sitting under an Explore More block —
   sits between the mini-cards and whatever comes next as a soft
   editorial breath. Uses the section's own pink accent by default;
   inherits any parent theme colour override applied to .mag-section-stars. */
.mag-explore-star {
  font-size: 22px;
  letter-spacing: 0;
  margin: 0.9rem 0 1.1rem;
  opacity: 0.7;
}

/* ── Explore-More star theme variants ────────────────────────────────
   Each variant paints the ✦ in the page's own signature colour so the
   star reads as an intentional part of the layout rather than a stray
   pink glyph on non-pink pages. Solid colours use `color`; gradients
   use background-clip: text so the star gets the same multi-stop wash
   as the section's snake labels. */
.mag-explore-star--pink   { color: var(--pink, #C71585); }
.mag-explore-star--red    { color: var(--danger, #DC2626); }
.mag-explore-star--slots  { color: #DC2626; }
.mag-explore-star--blue {
  color: #2563EB;
  /* pink→violet→blue text gradient — matches the /bingo-clubs/ theme */
  background: linear-gradient(135deg, #EC4899 0%, #7C3AED 50%, #2563EB 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mag-explore-star--gradient {
  color: #C71585;
  background: linear-gradient(135deg, #C71585, #9c27b0, #E91E8C);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mag-explore-star--darts {
  color: #16A34A;
  background: linear-gradient(135deg, #16A34A, #00BCD4, #4ade80, #0891b2);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mag-explore-star--providers {
  color: #F97316;
  background: linear-gradient(135deg, #F97316, #E91E63, #FB923C);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mag-explore-star--arcade {
  color: #00BCD4;
  background: linear-gradient(135deg, #00BCD4, #1A237E);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Pick 'N' Mix — purple variant, mirrors the arcade explore star. */
.mag-explore-star--purple {
  color: #8B5CF6;
  background: linear-gradient(135deg, #8B5CF6, #4C1D95);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Pick 'N' Mix greeting mascot — mirrors .mag-greeting__mascot--arcade. */
.mag-greeting__mascot--pnm {
  shape-outside: url('/assets/images/dauble-master.webp');
  width: 300px;
  max-width: 100%;
}
@media (max-width: 640px) {
  .mag-greeting__mascot--pnm { width: 200px; }
}
.mag-explore-star--silver {
  color: #C1440E;
  background: linear-gradient(135deg, #8F2E08 0%, #C1440E 45%, #E8751A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Dynamic-theme pages (family, lotto, slot-game) set --gz-game-color
   per page instance. Star inherits whatever that page has picked. */
.mag-explore-star--current { color: var(--gz-game-color, var(--pink, #C71585)); }

.mag-more-label {
  margin: 1rem 0;
}

.mag-more-divider span {
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  color: var(--cyan-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  padding: 0 1rem;
  position: relative;
}

.mag-more-divider span::before {
  content: '✦';
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--cyan);
}

.mag-more-divider span::after {
  content: '✦';
  position: absolute;
  right: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--cyan);
}

/* Editor Box */
.mag-editor {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%);
  padding: 1.25rem; border-radius: 8px; margin-bottom: 1rem;
}

.mag-editor__header {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}

.mag-editor__avatar {
  width: 48px; height: 48px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-editorial); font-size: 20px; font-weight: 700; color: var(--pink);
}

.mag-editor__name {
  font-size: 14px; font-weight: 700; color: #fff; margin: 0;
}

.mag-editor__role {
  font-size: 11px; color: rgba(255,255,255,0.8); margin: 0;
}

.mag-editor__note {
  font-size: 13px; color: #fff; font-style: italic; line-height: 1.5; margin: 0;
}

/* This Issue Box */
.mag-this-issue {
  background: #fff; border: 2px solid var(--border); border-radius: 8px; padding: 1rem;
}

.mag-this-issue__title {
  font-family: var(--font-editorial); font-size: 14px; font-weight: 700; color: var(--black);
  margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--pink);
}

.mag-this-issue__list {
  list-style: none; padding: 0; margin: 0;
}

.mag-this-issue__list li {
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}

.mag-this-issue__list li:last-child {
  border-bottom: none; padding-bottom: 0;
}

.mag-this-issue__list a {
  font-size: 12px; color: var(--dark); transition: color 0.15s;
}

.mag-this-issue__list a:hover {
  color: var(--pink);
}

/* Credentials Box */
.mag-credentials {
  background: #fff; border: 2px solid var(--border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem;
  border-left: 4px solid var(--teal);
}

.mag-credentials__title {
  font-family: var(--font-editorial); font-size: 14px; font-weight: 700; color: var(--teal);
  margin: 0 0 0.75rem;
}

.mag-credentials__list {
  list-style: none; padding: 0; margin: 0 0 0.75rem;
}

.mag-credentials__list li {
  font-size: 12px; color: var(--dark); padding: 0.375rem 0; line-height: 1.4;
  display: flex; align-items: flex-start; gap: 0.5rem;
}

.mag-credentials__list li strong {
  color: var(--black);
}

.mag-credentials__icon {
  color: var(--teal); font-weight: 700; flex-shrink: 0;
}

.mag-credentials__link {
  font-size: 12px; font-weight: 600; color: var(--teal);
}

.mag-credentials__link:hover {
  color: var(--pink);
}

/* Hello Glitzy Fans Greeting */
.mag-greeting {
  background: #fafafa;
  padding: 1.25rem;
  margin-bottom: 1rem;
  border-top: 4px solid var(--pink);
  border-bottom: 3px solid var(--pink);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.mag-greeting--purple {
  border-top-color: var(--purple);
  border-bottom-color: var(--purple);
}

.mag-greeting--purple .mag-greeting__h1,
.mag-greeting--purple .mag-greeting__stars,
.mag-greeting--purple .mag-greeting__stars-bottom {
  color: var(--purple);
}
/* Pick 'N' Mix greeting — heading + stars in the section's purple, without
   pulling in --purple's mascot/sub overrides. */
.mag-greeting--pnm .mag-greeting__h1,
.mag-greeting--pnm .mag-greeting__stars,
.mag-greeting--pnm .mag-greeting__stars-bottom {
  color: var(--purple);
}

.mag-greeting--green {
  border-top-color: #16A34A;
  border-bottom-color: #16A34A;
}

.mag-greeting--green .mag-greeting__h1,
.mag-greeting--green .mag-greeting__stars,
.mag-greeting--green .mag-greeting__stars-bottom {
  color: #16A34A;
}

.mag-greeting--star-border {
  border: none;
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 2rem;
}

.mag-greeting--star-border::before,
.mag-greeting--star-border::after {
  content: '✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦';
  display: block;
  text-align: center;
  font-size: 8px;
  letter-spacing: 4px;
  color: var(--purple);
  position: absolute;
  left: 0;
  right: 0;
}

.mag-greeting--star-border::before {
  top: 6px;
}

.mag-greeting--star-border::after {
  bottom: 6px;
}

.mag-greeting__left-stars {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 8px;
  letter-spacing: 6px;
  color: var(--purple);
}

.mag-greeting__mascot {
  float: right;
  width: 120px;
  height: auto;
  margin: 1rem -0.5rem 0.5rem 0.75rem;
  shape-outside: url('/assets/images/bingo-lady.webp');
  shape-margin: 10px;
}

.mag-greeting__h1 {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 600;
  color: var(--pink);
  margin: 0;
  line-height: 1.3;
  text-align: center;
}

.mag-greeting__stars {
  font-size: 20px;
  color: var(--pink);
  margin: 0.5rem 0;
  letter-spacing: 4px;
  text-align: center;
  width: 100%;
  display: block;
}

.mag-greeting__sub {
  font-size: 17px;
  color: #000;
  font-weight: 600;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .mag-greeting__h1 { font-size: 22px; }
  .mag-greeting__sub { font-size: 17px; }
  .mag-greeting__desc { font-size: 15px; }
}

.mag-greeting__desc {
  font-size: 15px;
  color: var(--dark);
  line-height: 1.4;
  margin: 0.4rem 0 0;
}

/* Value-pitch block — three scannable lines replacing the old single
   paragraph dump. Dashed rules between lines give magazine rhythm. */
.mag-greeting__pitch {
  margin: 0.7rem 0 0;
  padding: 0.6rem 0 0.3rem;
  border-top: 1px dashed rgba(0,0,0,0.12);
}
.mag-greeting__pitch-line {
  font-size: 14px;
  color: var(--dark);
  line-height: 1.5;
  margin: 0 0 0.35rem;
}
.mag-greeting__pitch-line:last-child {
  margin-bottom: 0;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(0,0,0,0.12);
  color: #555;
  font-size: 13px;
}
.mag-greeting__pitch-line strong {
  color: var(--pink);
  font-weight: 800;
}
@media (min-width: 768px) {
  .mag-greeting__pitch-line { font-size: 15px; }
  .mag-greeting__pitch-line:last-child { font-size: 14px; }
}

.mag-greeting__stars-bottom {
  font-size: 14px;
  color: var(--pink);
  letter-spacing: 4px;
  margin: 0.5rem 0 0;
  text-align: center;
}
.mag-greeting__stars-bottom::after {
  content: '18+';
  display: block;
  width: 36px;
  height: 36px;
  margin: 0.3rem auto 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #e8e8e8 40%, #ccc 100%);
  border: 3px solid #C71585;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,0.6);
  color: #C71585;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 900;
  line-height: 30px;
  text-align: center;
  letter-spacing: 0;
}


/* Hello text for variant greetings */
.mag-greeting__hello {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  color: var(--pink);
  margin: 0;
}

/* Cover story - thin right border for sidebar separation */
.mag-cover {
  padding-right: 2rem;
  border-right: 1px solid #ddd;
}

.mag-cover .mag-label {
  display: inline-block;
  margin-bottom: 0.75rem;
}

/* Greeting variants */
.mag-greeting--sm {
  padding: 0.75rem 1rem;
}

.mag-greeting--sm .mag-greeting__hello {
  font-size: 16px;
  margin-bottom: 0.25rem;
}

.mag-greeting--sm .mag-greeting__stars {
  font-size: 8px;
}

.mag-greeting--sm .mag-greeting__sub {
  font-size: 11px;
}

.mag-greeting--lg {
  padding: 2rem 2.5rem;
}

.mag-greeting--lg .mag-greeting__hello {
  font-size: 32px;
  margin-bottom: 0.5rem;
}

.mag-greeting--lg .mag-greeting__stars {
  font-size: 16px;
}

.mag-greeting--lg .mag-greeting__sub {
  font-size: 16px;
  line-height: 1.8;
}

/* Editor's Picks - Vertical List */
.mag-picks-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mag-pick-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #eee;
  transition: background 0.2s;
}

.mag-pick-item:last-child {
  border-bottom: none;
}

.mag-pick-item:hover {
  background: #fdf2f8;
}

.mag-pick-item__num {
  width: 24px;
  height: 24px;
  background: var(--pink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mag-pick-item__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
}

/* Coloured bingo balls */
.mag-pick-item__num--teal { background: var(--teal); }
.mag-pick-item__num--purple { background: #8B5CF6; }
.mag-pick-item__num--orange { background: #F97316; }
.mag-pick-item__num--gold { background: var(--gold); color: #333; }
.mag-pick-item__num--red { background: #DC2626; }

/* Editor's Picks Panel - cleaner */
.mag-picks-panel {
  background: #fafafa;
  padding: 1.25rem;
}

.mag-picks-panel__title {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 700;
  color: var(--pink);
  margin: 0 0 0.25rem;
}

.mag-picks-panel__sub {
  font-size: 12px;
  color: #666;
  font-style: italic;
  margin: 0 0 1rem;
}

.mag-picks-panel__more {
  display: inline-block;
  font-size: 13px;
  color: var(--pink);
  font-weight: 600;
  margin-top: 0.75rem;
}

/* Editor's Picks Magazine Box */
.mag-picks-box {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  padding: 0;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.mag-picks-box__header {
  background: var(--pink);
  padding: 1rem 1rem 0.75rem;
  text-align: center;
}

.mag-picks-box__stars {
  font-size: 16px;
  display: block;
  color: #fff;
  letter-spacing: 2px;
  margin-top: 0;
}

.mag-picks-box__stars span {
  background: #000;
  padding: 3px 6px;
  display: inline-block;
}

.mag-picks-box__title {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  line-height: 1.8;
}

.mag-picks-box__title span {
  background: #000;
  padding: 4px 8px;
  display: inline;
}

.mag-picks-box__sub {
  font-family: var(--font-editorial);
  font-size: 22px;
  color: var(--pink);
  font-weight: 700;
  font-style: italic;
  padding: 0.15rem 1rem 0;
  margin: 0;
  text-align: center;
  line-height: 1.1;
}

.mag-picks-box .mag-picks-list {
  padding: 0.4rem;
}

.mag-picks-box .mag-pick-item {
  padding: 0.6rem 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-bottom: 1px solid #eee;
}

.mag-picks-box .mag-pick-item:last-child {
  border-bottom: none;
}

.mag-picks-box .mag-pick-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mag-picks-box .mag-pick-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
}

.mag-pick-star-divider {
  font-size: 13px;
  letter-spacing: 4px;
  line-height: 1.2;
}

.mag-picks-box .mag-pick-meta {
  font-size: 13px;
  color: #888;
  line-height: 1.2;
}

.mag-picks-box .mag-pick-ukgc {
  font-size: 13px;
  color: var(--teal);
  font-weight: 600;
  line-height: 1.2;
}

.mag-picks-box__more {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
  padding: 0.6rem 1rem;
  border-top: none;
  background: var(--pink);
  text-decoration: none;
  letter-spacing: 0.3px;
}

.mag-picks-box__more:hover {
  background: var(--pink-dark, #a01166);
}

.mag-picks-box__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.6rem;
  border-top: none;
  background: #1a1a1a;
  text-align: center;
}

.mag-picks-box__18 {
  background: #C71585;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
}

.mag-picks-box__bga-text {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.mag-picks-box__bga {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
}

.mag-picks-box__bga:hover {
  color: #E91E63;
}

/* Bigger bingo balls for box */
.mag-pick-ball {
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: 900;
  font-family: var(--font-sans);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  position: relative;
  /* Outer glossy shell */
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.25),
    inset 0 3px 8px rgba(255,255,255,0.35),
    0 3px 8px rgba(0,0,0,0.25);
}

/* White centre ring — classic bingo ball */
.mag-pick-ball::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 2px solid rgba(255,255,255,0.5);
}

/* Top glint */
.mag-pick-ball::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 9px;
  width: 12px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transform: rotate(-30deg);
}

/* Number sits above pseudo-elements */
.mag-pick-ball span {
  position: relative;
  z-index: 1;
}

.mag-pick-ball--pink   { background: radial-gradient(circle at 35% 35%, #ff6b9d, var(--pink) 60%, var(--pink-dark)); }
.mag-pick-ball--teal   { background: radial-gradient(circle at 35% 35%, #2d8a8a, var(--teal) 60%, #0a3535); }
.mag-pick-ball--purple { background: radial-gradient(circle at 35% 35%, #c084fc, #8B5CF6 60%, #6d28d9); }
.mag-pick-ball--orange { background: radial-gradient(circle at 35% 35%, #fb923c, #F97316 60%, #c2410c); }
.mag-pick-ball--gold   { background: radial-gradient(circle at 35% 35%, #fde68a, var(--gold) 60%, #b45309); color: #5d2e00; }
.mag-pick-ball--red    { background: radial-gradient(circle at 35% 35%, #f87171, #DC2626 60%, #991b1b); }
.mag-pick-ball--blue   { background: radial-gradient(circle at 35% 35%, #60a5fa, #2563EB 60%, #1e40af); }
.mag-pick-ball--green  { background: radial-gradient(circle at 35% 35%, #4ade80, #16A34A 60%, #14532d); }
.mag-pick-ball--yellow { background: radial-gradient(circle at 35% 35%, #fef08a, #FBBF24 60%, #b45309); color: #5d2e00; }
.mag-pick-ball--cyan   { background: radial-gradient(circle at 35% 35%, #67e8f9, var(--cyan) 60%, #0e7490); }
.mag-pick-ball--hotpink { background: radial-gradient(circle at 35% 35%, #f472b6, #FF1493 60%, #be185d); }

@media (min-width: 768px) {
  /* Thought bubble words */
  .gz-thought-word { font-size: calc(var(--gz-base, 14px) + 2px) !important; }
  /* Promo box body text — Party Events, scam check, local hall */
  .mag-promo-box__text { font-size: 18px; }
  /* Scam check text — bigger on desktop */
  .gz-scam-text { font-size: 18px !important; }
  /* City pills */
  .gz-city-pill { font-size: 10px !important; padding: 3px 8px !important; }
  /* Local Hall texts — bigger on desktop */
  .gz-local-title { font-size: 19px !important; }
  .gz-local-desc  { font-size: 16px !important; }
}

/* Sidebar Ad Banner */
.mag-ad-sidebar {
  background: #f5f5f5;
  padding: 0.75rem;
  text-align: center;
  margin-top: 1rem;
}

.mag-ad-sidebar__label {
  display: block;
  font-size: 9px;
  color: #999;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.mag-ad-sidebar__box {
  background: #e0e0e0;
  color: #999;
  font-size: 12px;
  padding: 3rem 1rem;
  border: 1px dashed #ccc;
}

/* Full Width Ad */
.mag-ad-full {
  padding: 0.75rem;
  text-align: center;
  margin: 0;
}

.mag-ad-full__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #999;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.mag-ad-full__box {
  color: #bbb;
  font-size: 12px;
  padding: 1.25rem 1rem;
  border: 2px dashed #ccc;
  border-radius: 8px;
  background: #fafafa;
  max-width: 728px;
  margin: 0 auto;
}

/* Mini Ad (above content) */
.mag-mini-ad {
  padding: 0.5rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* Tighter spacing on mobile — the Mecca leaderboard ad wraps in a lot
   of whitespace on small screens; shrink padding and bottom margin
   so content above pulls up closer to the ad. */
@media (max-width: 640px) {
  .mag-mini-ad--live {
    padding: 0.15rem 0.25rem 0.35rem;
    margin-bottom: 0.4rem;
  }
  .mag-mini-ad--live .mag-mini-ad__label {
    font-size: 10px;
    margin-bottom: 0.15rem;
  }
}

.mag-mini-ad__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #999;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.mag-mini-ad__content {
  color: #bbb;
  font-size: 12px;
  padding: 1rem;
  border: 2px dashed #ccc;
  border-radius: 0;
  background: #fafafa;
}
.mag-mini-ad__content--live {
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  overflow: hidden;
}
.mag-mini-ad__content--square {
  width: 300px;
  height: 300px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 13px;
  color: #999;
  letter-spacing: .04em;
}
/* 320x50 mobile banner strip — real IAB horizontal mobile banner size */
.mag-mini-ad__content--strip {
  width: 320px;
  height: 50px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0 .5rem;
  font-size: 11px;
  line-height: 1.2;
  color: #999;
}
.mag-mini-ad__content--strip small {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #aaa;
}
.mag-mini-ad--square {
  margin-top: 1rem;
  text-align: center;
}
.mag-mini-ad__content--live img {
  width: 100%;
  height: auto;
  display: block;
}

/* Quick Links Box */
.mag-quick-box {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mag-quick-box__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f9f9f9;
  border-left: 3px solid var(--pink);
  transition: all 0.15s;
}

.mag-quick-box__link:hover {
  background: var(--pink-bg);
  transform: translateX(4px);
}

.mag-quick-box__icon {
  font-size: 18px;
}

.mag-quick-box__text {
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
}

/* Promo Box (editorial style) */
.mag-promo-box {
  margin-top: 1rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 3px solid var(--pink);
  text-align: center;
  box-shadow: var(--shadow-dark);
}

/* Angled label variant */
.mag-promo-box--angled .mag-label {
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .mag-promo-box--angled .mag-label {
    margin-bottom: 1.25rem;
  }
  .gz-safe-btn { margin-top: 1.5rem !important; margin-bottom: 1.75rem !important; }
  .gz-city-pill {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
}

@media (max-width: 640px) {
  .mag-promo-box__link {
    font-size: 13px !important;
    padding: 0.65rem 1rem !important;
    line-height: 1.25 !important;
    display: block;
    text-align: center;
  }
  .mag-picks-box .mag-pick-item {
    padding: 0.9rem 0.75rem;
  }
  .gz-sister-thought span {
    font-size: 17px !important;
  }
  .gz-sister-thought span[style*="font-size:17px"] {
    font-size: 21px !important;
  }
  /* Party events — margin the text and pills on desktop */
  .gz-party-text {
    margin-bottom: 1rem !important;
  }
  .gz-party-pills {
    margin-bottom: 1.25rem !important;
    gap: 8px !important;
  }
  .mag-greeting__sub {
    font-size: 14px;
  }
  .mag-greeting__desc {
    font-size: 13px;
    line-height: 1.5;
  }
  .mag-greeting__h1 {
    font-size: 16px;
  }
  .mag-greeting__stars,
  .mag-greeting__stars-bottom {
    font-size: 15px;
  }
}

.mag-promo-box__label {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  margin-bottom: 0.75rem;
}

.mag-promo-box__text {
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.mag-promo-box__link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--pink);
  padding: 0.6rem 1rem;
  line-height: 1.3;
  border-radius: 3px;
  transition: background 0.2s;
  /* Cross-element resets so <button class="mag-promo-box__link"> matches
     the anchor version exactly (no UA border, cursor, or font). */
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.mag-promo-box__link:hover {
  background: var(--pink-dark);
  color: #fff;
}

/* Lotto Results Mini */
.mag-lotto-results {
  margin-top: 1rem;
  padding: 1.25rem;
  background: #000;
  border: 3px solid var(--lotto-peach);
  text-align: center;
  box-shadow: var(--shadow-dark);
}

.mag-lotto-results__inner {
  max-width: 400px;
  margin: 0 auto;
}

.mag-lotto-results__title {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  margin: 0.5rem 0 1rem;
}

.mag-lotto-results__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.mag-lotto-results__links a {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  text-decoration: underline;
}

.mag-lotto-results__links a:hover {
  color: #fff;
}

.mag-lotto-results__sponsor {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 1rem 0 0;
}

.mag-lotto-results__sponsor a {
  color: var(--pink-light);
  text-decoration: none;
}

.mag-lotto-results__sponsor a:hover {
  color: var(--pink);
  text-decoration: underline;
}

.mag-lotto-mini {
  background: #000;
  border: 3px solid var(--pink);
  padding: 1rem;
  margin-top: 1rem;
  text-align: center;
  box-shadow: var(--shadow-dark);
}

.mag-lotto-mini__title {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 0.75rem;
}

.mag-lotto-mini__balls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0.75rem;
}

/* Flat lotto balls */
.mag-lotto-mini__ball {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

/* National Lottery number range colours - flat solid */
.mag-lotto-mini__ball--1-9   { background: #e0e0e0 !important; color: #333 !important; }
.mag-lotto-mini__ball--10-19 { background: #2196f3 !important; color: #fff !important; }
.mag-lotto-mini__ball--20-29 { background: #e91e8c !important; color: #fff !important; }
.mag-lotto-mini__ball--30-39 { background: #4caf50 !important; color: #fff !important; }
.mag-lotto-mini__ball--40-49 { background: #ffc107 !important; color: #333 !important; }
.mag-lotto-mini__ball--50-59 { background: #9c27b0 !important; color: #fff !important; }

.mag-lotto-mini__ball--bonus {
  outline: 3px solid #ffd700 !important;
  outline-offset: 2px !important;
  border: none !important;
}

.mag-lotto-mini__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.mag-lotto-mini__links a {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #333;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  transition: background 0.2s;
}

.mag-lotto-mini__links a:hover {
  background: var(--pink);
  color: #fff;
}

.mag-lotto-mini__credit {
  font-size: 12px;
  color: #aaa;
  margin: 0;
  line-height: 1.4;
}

.mag-lotto-mini__credit a {
  color: var(--pink);
  font-weight: 600;
}

/* Social Media Box - Magazine Style */
.mag-social-box {
  background: #000;
  margin-top: 1rem;
  overflow: hidden;
}

.mag-social-box__header {
  background: var(--pink);
  padding: 0.75rem 1rem;
}

.mag-social-box__title {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
}

.mag-social-box__sub {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  padding: 0.75rem 1rem 0.5rem;
  margin: 0;
  line-height: 1.5;
}

.mag-social-box__links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mag-social-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: background 0.2s ease;
}

.mag-social-btn:last-child {
  border-bottom: none;
}

.mag-social-btn:hover {
  background: rgba(255,255,255,0.1);
}

.mag-social-btn__icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.mag-social-btn--fb .mag-social-btn__icon { background: #1877F2; }
.mag-social-btn--ig .mag-social-btn__icon { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.mag-social-btn--x .mag-social-btn__icon { background: #000; border: 1px solid #fff; }
.mag-social-btn--yt .mag-social-btn__icon { background: #FF0000; }

.mag-social-btn__label {
  flex: 1;
}

/* Section Finish - full width pink border */
.mag-section-finish {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem;
  margin-top: 1.5rem;
  border-top: 3px solid var(--pink);
  border-bottom: 3px solid var(--pink);
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 600;
  color: var(--pink);
  background: #fdf4f7;
}

.mag-section-finish:hover {
  background: var(--pink);
  color: #fff;
}

/* Editor's Picks Sidebar */
.mag-picks-sidebar {
  background: #fff;
  border: 2px solid var(--border);
  border-top: 4px solid var(--pink);
  border-radius: 0 0 8px 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.mag-picks-sidebar__title {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 700;
  color: var(--pink);
  margin: 0 0 0.125rem;
}

.mag-picks-sidebar__sub {
  font-size: 11px;
  color: var(--grey-light);
  font-style: italic;
  margin: 0 0 0.75rem;
}

.mag-picks-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  counter-reset: picks;
}

.mag-picks-sidebar__list li {
  counter-increment: picks;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.mag-picks-sidebar__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mag-picks-sidebar__list li a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 12px;
  color: var(--dark);
  transition: color 0.15s;
}

.mag-picks-sidebar__list li a::before {
  content: counter(picks);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--pink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

.mag-picks-sidebar__list li a strong {
  color: var(--black);
}

.mag-picks-sidebar__list li a span {
  color: var(--grey-light);
  font-size: 11px;
}

.mag-picks-sidebar__list li a:hover strong {
  color: var(--pink);
}

.mag-picks-sidebar__more {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--pink);
  text-align: center;
}

.mag-picks-sidebar__more:hover {
  color: var(--pink-dark);
}

/* More From Section Header */
.mag-more-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 1.5rem 0 0.75rem;
  padding: 0 1rem;
}

.mag-more-header__line-top,
.mag-more-header__line-bottom {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--pink-dark) 15%, var(--pink-dark) 85%, transparent 100%);
}

.mag-more-header__text {
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  color: var(--pink-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-top: 0.25rem;
}

.mag-more-header__stars {
  font-size: 14px;
  color: var(--pink-dark);
  letter-spacing: 4px;
  margin-bottom: 0.25rem;
}

/* Catch Up Box */
.mag-catchup-box {
  margin: 1.5rem 0 1rem;
  padding: 0.75rem 1rem;
  border: 3px solid var(--pink);
  background: #fff;
  text-align: center;
}

.mag-catchup-box__text {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  color: var(--pink-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mini Stories */
.mag-minis { display: flex; flex-direction: column; gap: 0; margin-top: 0.75rem; }

.mag-mini {
  display: block; padding: 0.875rem 1rem; background: #fafafa;
  transition: all 0.15s; margin-bottom: 0.5rem;
  border: 1px solid #e5e5e5;
  box-shadow: var(--shadow-sm);
}

.mag-mini:hover { background: var(--pink-bg); transform: translateX(4px); box-shadow: var(--shadow-md); }

.mag-mini__cat { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--pink); margin-bottom: 0.25rem; transform: rotate(-2deg); }

@media (min-width: 701px) {
  .mag-mini__cat { max-width: 60%; font-size: 11px; }
}
.mag-mini__title, h3.mag-mini__title { display: block; font-family: var(--font-editorial); font-size: 15px; font-weight: 600; color: var(--black); line-height: 1.4; }
.mag-mini__title::first-letter { font-size: 1.4em; color: var(--pink); font-weight: 700; }
.mag-section--purple-accent .mag-mini__title::first-letter,
.pick-n-mix .mag-mini__title::first-letter { color: var(--purple); }
.mag-section--cyan .mag-mini__title::first-letter,
.daily-daub .mag-mini__title::first-letter { color: var(--cyan); }
.online-bingo .mag-mini__title::first-letter { color: var(--pink); }

/* Mini story modifiers - Take a Break style */
.mag-mini--feature { background: linear-gradient(135deg, #fff9e6 0%, #fff 100%); border-left: 3px solid var(--gold); }
.mag-mini--feature:hover { background: linear-gradient(135deg, #fff3cc 0%, #fff9e6 100%); }

/* Badge base - shared padding/radius */
.mag-mini__cat[class*="--"] { padding: 2px 6px; border-radius: 2px; }

.mag-mini__cat--hot { background: #c62828; color: #fff; }
.mag-mini__cat--red { background: var(--danger); color: #fff; }
.mag-mini__cat--gold { background: var(--gold); color: #1a1a1a; }
.mag-mini__cat--teal { background: var(--teal); color: #fff; }
.mag-mini__cat--pink { background: linear-gradient(135deg, #F43F5E, #C71585, #E91E63); color: #fff; font-weight: 800; box-shadow: 0 1px 2px rgba(199,21,133,0.3); }
.mag-mini__cat--purple { background: linear-gradient(135deg, #9c27b0, #7C3AED, #9c27b0); color: #fff; font-weight: 800; box-shadow: 0 1px 2px rgba(156,39,176,0.3); }

.mag-mini__teaser { display: none; font-size: 13px; color: var(--grey); margin-top: 0.375rem; line-height: 1.5; }
.mag-mini__continue { display: none; font-size: 13px; font-style: italic; font-weight: 600; color: var(--pink); margin-top: 0.5rem; }

@media (min-width: 768px) {
  .mag-mini__teaser { display: block; margin-top: 0.5rem; font-size: 14px; }
  .mag-mini__continue { display: block; text-align: right; margin-top: 0.75rem; font-size: 13px; }
  .mag-mini__title { margin-bottom: 0; font-size: 16px; }
  .mag-mini__cat { font-size: 11px; }
}

@media (min-width: 1000px) {
  .mag-mini { padding: 1rem 1.25rem; }
  .mag-mini__title { font-size: 17px; }
  .mag-mini__teaser { font-size: 15px; }
}

@media (min-width: 1000px) {
  .mag-mini { padding: 1rem 1.25rem; }
}

/* More Button */
.mag-more-btn {
  display: block;
  width: fit-content;
  margin: 0.75rem auto 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  padding: 0.75rem 1.5rem;
  background: var(--pink);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s;
}

.mag-more-btn:hover {
  background: var(--pink-dark);
}

.mag-more-btn--cyan {
  background: var(--cyan);
}

.mag-more-btn--cyan:hover {
  background: var(--cyan-dark);
}

/* ============================================
   SECTION 2: PICKS + ABOUT
   ============================================ */

.mag-picks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; margin-bottom: 1rem; }

.mag-pick-card {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem; background: var(--bg); border-radius: 6px; transition: all 0.15s;
}

.mag-pick-card:hover { background: var(--pink-bg); transform: translateX(3px); }

.mag-pick-card__num {
  width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg, var(--pink-light), var(--pink));
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
}

.mag-pick-card__num--teal { background: linear-gradient(145deg, var(--teal-light), var(--teal)); }
.mag-pick-card__num--purple { background: linear-gradient(145deg, #ab47bc, var(--purple)); }
.mag-pick-card__num--orange { background: linear-gradient(145deg, #ff8c00, #e65100); }
.mag-pick-card__num--gold { background: linear-gradient(145deg, var(--gold), #daa520); color: #333; }

.mag-pick-card__name { display: block; font-size: 13px; font-weight: 600; color: var(--black); }
.mag-pick-card__why { display: block; font-size: 10px; color: var(--grey-light); }

.mag-picks-panel__more {
  display: block; text-align: center; font-size: 12px; font-weight: 600; color: var(--pink);
  padding-top: 1rem; border-top: 1px solid var(--border);
}

/* About Box */
.mag-about-box {
  background: linear-gradient(135deg, var(--pink-bg) 0%, #fff 100%); padding: 1.25rem; border-left: 3px solid var(--pink); margin-bottom: 1rem;
}

.mag-about-box__title { font-family: var(--font-editorial); font-size: 15px; font-weight: 700; color: var(--pink); margin: 0 0 0.5rem; }
.mag-about-box__text { font-size: 12px; color: var(--grey); line-height: 1.6; margin: 0 0 0.5rem; }
.mag-about-box__link { font-size: 11px; font-weight: 600; color: var(--pink); }

/* Ad Slot */
.mag-ad-slot { text-align: center; }
.mag-ad-slot__label { font-size: 9px; font-weight: 600; letter-spacing: 1px; color: #aaa; display: block; margin-bottom: 0.5rem; }
.mag-ad-slot__box { background: #f0f0f0; border: 1px dashed #ccc; padding: 3.5rem 1rem; color: #999; font-size: 13px; }

/* ============================================
   LOTTO SECTION
   ============================================ */

.mag-lotto-panel {
  background: rgba(255,255,255,0.05); padding: 1.25rem; border-radius: 8px;
}

.mag-lotto-panel__title { font-family: var(--font-editorial); font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 0.25rem; }
.mag-lotto-panel__date { font-size: 11px; color: rgba(255,255,255,0.6); margin: 0 0 1rem; }

.mag-lotto-draw {
  display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.875rem; flex-wrap: wrap;
}

.mag-lotto-draw:last-child { margin-bottom: 0; }

.mag-lotto-draw__name { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7); min-width: 80px; }
.mag-lotto-draw__balls { display: flex; gap: 4px; }

.ball {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.ball--sm { width: 24px; height: 24px; font-size: 10px; }
.ball--pink { background: linear-gradient(145deg, var(--pink-light), var(--pink)); }
.ball--blue { background: linear-gradient(145deg, #42a5f5, #1976d2); }
.ball--purple { background: linear-gradient(145deg, #ab47bc, #7b1fa2); }
.ball--teal { background: linear-gradient(145deg, #26a69a, #00897b); }
.ball--gold { background: linear-gradient(145deg, var(--gold), #ffa000); color: #333; }

.mag-lotto-draw__jp { font-size: 12px; font-weight: 700; color: var(--gold); margin-left: auto; }

/* Lotto Feature Cards */
.mag-lotto-feature {
  display: flex; gap: 1rem; background: rgba(255,255,255,0.08); padding: 1.25rem; border-radius: 8px; margin-bottom: 1rem;
}

.mag-lotto-feature--health { border-left: 3px solid #26a69a; }
.mag-lotto-feature--lottogo { border-left: 3px solid var(--pink); background: rgba(233,30,140,0.1); }

.mag-lotto-feature__logo { font-size: 28px; flex-shrink: 0; }
.mag-lotto-feature__name { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 0.25rem; }
.mag-lotto-feature__desc { font-size: 11px; color: rgba(255,255,255,0.8); line-height: 1.5; margin: 0 0 0.625rem; }
.mag-lotto-feature__balls { display: flex; gap: 4px; margin-bottom: 0.5rem; }

.mag-lotto-feature__cta {
  display: inline-block; background: var(--pink); color: #fff; font-size: 11px; font-weight: 600;
  padding: 0.5rem 1rem; border-radius: 4px; transition: background 0.15s;
}

.mag-lotto-feature__cta:hover { background: var(--pink-dark); color: #fff; }

.mag-lotto-disclaimer { font-size: 13px; color: rgba(255,255,255,0.6); text-align: center; margin: 1.25rem 0 0; }

/* ============================================
   PICK 'N' MIX (Games Section)
   ============================================ */

.mag-games-col { display: flex; flex-direction: column; gap: 1rem; }

/* Quiz Card */
.mag-quiz-card {
  background: #fff; padding: 1.5rem; border-radius: 8px; border-left: 4px solid var(--pink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mag-quiz-card__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.mag-quiz-card__icon { font-size: 26px; }
.mag-quiz-card__title { font-family: var(--font-editorial); font-size: 17px; font-weight: 700; color: var(--black); margin: 0; }
.mag-quiz-card__meta { font-size: 11px; color: var(--grey-light); margin: 0; }

.mag-quiz-card__q { font-size: 14px; font-weight: 600; color: #333; line-height: 1.4; margin: 0 0 1rem; }

.mag-quiz-card__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem; }

.mag-quiz-card__opt {
  background: var(--bg); border: 2px solid var(--border); padding: 0.625rem; font-size: 12px; font-weight: 500;
  color: #333; cursor: pointer; border-radius: 4px; transition: all 0.15s;
}

.mag-quiz-card__opt:hover:not(:disabled) { border-color: var(--pink); background: var(--pink-bg); }
.mag-quiz-card__opt:disabled { opacity: 0.7; cursor: default; }
.mag-quiz-card__opt.correct { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.mag-quiz-card__opt.wrong { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.mag-quiz-card__result { font-size: 12px; padding: 0.625rem; border-radius: 4px; margin: 0 0 0.75rem; }
.mag-quiz-card__result:empty { display: none; }
.mag-quiz-card__result.correct { background: var(--success-bg); color: var(--success); }
.mag-quiz-card__result.wrong { background: var(--danger-bg); color: var(--danger); }

.mag-quiz-card__cta {
  display: block; font-size: 12px; font-weight: 600; color: var(--pink); text-align: center;
  padding-top: 0.75rem; border-top: 1px solid var(--border);
}

/* Call of the Day */
.mag-callofday {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); padding: 1.25rem; border-radius: 8px; text-align: center;
}

.mag-callofday__label { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,0.7); display: block; margin-bottom: 0.625rem; }

.mag-callofday__ball {
  width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--pink);
  font-family: var(--font-editorial); font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.625rem; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.mag-callofday__name { font-family: var(--font-editorial); font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 0.25rem; }
.mag-callofday__origin { font-size: 12px; color: rgba(255,255,255,0.9); margin: 0 0 0.5rem; }
.mag-callofday__link { font-size: 11px; font-weight: 600; color: #fff; opacity: 0.8; }

/* Fact Card */
.mag-fact-card {
  background: #fff; padding: 1.25rem; border-radius: 8px; border-top: 3px solid var(--gold);
}

.mag-fact-card__icon { font-size: 22px; display: block; margin-bottom: 0.375rem; }
.mag-fact-card__title { font-family: var(--font-editorial); font-size: 15px; font-weight: 700; color: var(--black); margin: 0 0 0.375rem; }
.mag-fact-card__text { font-size: 13px; color: var(--grey); line-height: 1.6; margin: 0 0 0.625rem; }
.mag-fact-card__link { font-size: 11px; font-weight: 600; color: var(--pink); }

/* Game Card (Word Search etc) */
.mag-game-card {
  background: #fff; padding: 1.5rem; border-radius: 8px; border-left: 4px solid var(--purple);
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mag-game-card--teal { border-left-color: var(--teal); }

.mag-game-card__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.mag-game-card__icon { font-size: 26px; }
.mag-game-card__title { font-family: var(--font-editorial); font-size: 17px; font-weight: 700; color: var(--black); margin: 0; }
.mag-game-card__meta { font-size: 11px; color: var(--grey-light); margin: 0; }
.mag-game-card__desc { font-size: 14px; color: #555; line-height: 1.5; margin: 0 0 1rem; }
.mag-game-card__cta {
  display: block; font-size: 13px; font-weight: 600; color: var(--purple); text-align: center;
  padding: 0.75rem; background: rgba(139, 92, 246, 0.1); border-radius: 4px;
}
.mag-game-card__cta:hover { background: rgba(139, 92, 246, 0.2); }
.mag-game-card__cta--teal { color: var(--teal); background: rgba(20, 184, 166, 0.1); }
.mag-game-card__cta--teal:hover { background: rgba(20, 184, 166, 0.2); }

/* Trivia Preview */
.mag-trivia-preview {
  background: #fff; padding: 1.5rem; border-radius: 8px; border-left: 4px solid var(--pink);
  margin-bottom: 1rem;
}

.mag-trivia-preview__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.mag-trivia-preview__icon { font-size: 26px; }
.mag-trivia-preview__title { font-family: var(--font-editorial); font-size: 17px; font-weight: 700; color: var(--black); margin: 0; }
.mag-trivia-preview__meta { font-size: 11px; color: var(--grey-light); margin: 0; }

.mag-trivia-preview__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem;
}

.mag-trivia-preview__q {
  background: #f9f9f9; padding: 0.75rem; border-radius: 4px;
}

.mag-trivia-preview__num {
  display: inline-block; background: var(--pink); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
  margin-bottom: 0.25rem;
}

.mag-trivia-preview__q p {
  font-size: 12px; color: #333; line-height: 1.4; margin: 0;
}

.mag-trivia-preview__cta {
  display: block; font-size: 13px; font-weight: 600; color: var(--pink); text-align: center;
  padding: 0.75rem; background: var(--pink-bg); border-radius: 4px;
}
.mag-trivia-preview__cta:hover { background: rgba(233, 30, 140, 0.15); }

/* ============================================
   QUIZ JEEVES SECTION
   ============================================ */

/* Quiz Jeeves Sidebar Box */
.mag-quiz-jeeves-box {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 3px solid var(--purple);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-dark);
}

.mag-quiz-jeeves-box__img {
  width: 180px;
  height: auto;
  margin-bottom: 1rem;
}

.mag-quiz-jeeves-box__text {
  font-family: var(--font-editorial);
  font-size: 15px;
  font-style: italic;
  color: #fff;
  margin: 0;
  line-height: 1.5;
}

.mag-quiz-jeeves-box__text strong {
  color: var(--purple);
}

@media (max-width: 800px) {
  .mag-quiz-jeeves-box__img {
    width: 140px;
  }
}

/* Word of the Day */
.mag-wordofday {
  background: linear-gradient(135deg, var(--teal) 0%, #0d9488 100%); padding: 1.25rem; border-radius: 8px; text-align: center;
}

.mag-wordofday__label { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,0.7); display: block; margin-bottom: 0.5rem; }
.mag-wordofday__word { font-family: var(--font-editorial); font-size: 24px; font-weight: 700; font-style: italic; color: #fff; margin: 0 0 0.5rem; }
.mag-wordofday__def { font-size: 13px; color: rgba(255,255,255,0.95); line-height: 1.5; margin: 0 0 0.75rem; }
.mag-wordofday__link { font-size: 11px; font-weight: 600; color: #fff; opacity: 0.8; }

/* Browse Tags */
.mag-browse {
  background: #fff; padding: 1.25rem; border-radius: 8px;
}

.mag-browse--alt { background: var(--bg); }

.mag-browse__title { font-size: 13px; font-weight: 700; color: var(--black); margin: 0 0 0.25rem; }
.mag-browse__sub { font-size: 10px; color: var(--grey-light); margin: 0 0 0.625rem; }

.mag-browse__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.mag-browse__tags a {
  font-size: 10px; color: var(--grey); padding: 0.375rem 0.625rem; background: #f0f0f0; border-radius: 20px; transition: all 0.15s;
}

.mag-browse__tags a:hover { background: var(--pink); color: #fff; }

/* ============================================
   WHAT'S ON
   ============================================ */

.mag-whatson-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem;
}

.mag-whatson-card {
  background: #fff; border-radius: 8px; padding: 1rem; display: flex; align-items: flex-start; gap: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.15s;
}

.mag-whatson-card:hover { transform: translateY(-2px); }

.mag-whatson-card__day { font-size: 10px; font-weight: 700; color: var(--pink); text-transform: uppercase; }
.mag-whatson-card__date { font-family: var(--font-editorial); font-size: 26px; font-weight: 700; color: var(--black); line-height: 1; }
.mag-whatson-card__title { display: block; font-size: 12px; font-weight: 600; color: var(--black); margin-bottom: 0.125rem; }
.mag-whatson-card__where { display: block; font-size: 10px; color: var(--grey-light); }

.mag-whatson-more { display: block; text-align: center; font-size: 12px; font-weight: 600; color: var(--pink); }

/* ============================================
   SAFETY SECTION
   ============================================ */

.mag-rogue {
  background: #fff; padding: 1.5rem; border-top: 4px solid var(--danger); border-radius: 0 0 8px 8px;
}

.mag-rogue__header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; }
.mag-rogue__icon { font-size: 22px; }
.mag-rogue__title { font-family: var(--font-editorial); font-size: 17px; font-weight: 700; color: var(--danger); margin: 0; }
.mag-rogue__intro { font-size: 12px; color: var(--grey); margin: 0 0 0.875rem; }

.mag-rogue__list { list-style: none; padding: 0; margin: 0 0 0.875rem; }

.mag-rogue__list li {
  display: flex; justify-content: center; align-items: center; padding: 0.625rem 0.75rem;
  background: var(--danger-bg); margin-bottom: 0.375rem; border-radius: 4px;
}

.mag-rogue__name { font-size: 12px; font-weight: 600; color: #333; }
.mag-rogue__status { font-size: 9px; font-weight: 700; color: var(--danger); background: #fff; padding: 0.25rem 0.5rem; border-radius: 3px; }
.mag-rogue__link { font-size: 12px; font-weight: 600; color: var(--danger); }

/* Checker */
.mag-checker {
  background: #fff; padding: 1.5rem; border-top: 4px solid var(--teal); border-radius: 0 0 8px 8px;
}

.mag-checker__header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; }
.mag-checker__icon { font-size: 22px; }
.mag-checker__title { font-family: var(--font-editorial); font-size: 17px; font-weight: 700; color: var(--teal); margin: 0; }
.mag-checker__intro { font-size: 12px; color: var(--grey); margin: 0 0 0.875rem; }

.mag-checker__form { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }

.mag-checker__input {
  flex: 1; padding: 0.75rem 1rem; font-size: 13px; border: 2px solid var(--border); border-radius: 4px; transition: border-color 0.15s;
}

.mag-checker__input:focus { outline: none; border-color: var(--teal); }

.mag-checker__btn {
  background: var(--teal); color: #fff; font-size: 13px; font-weight: 600; padding: 0.75rem 1.25rem;
  border: none; border-radius: 4px; cursor: pointer; transition: background 0.15s;
}

.mag-checker__btn:hover { background: var(--teal-light); }

.mag-checker__note { font-size: 10px; color: var(--grey-light); margin: 0; }

/* ============================================
   BRAND STATEMENT
   ============================================ */

.mag-statement {
  background: var(--black); padding: 1.75rem 1.5rem; text-align: center;
}

.mag-statement p {
  font-family: var(--font-editorial); font-size: 15px; color: rgba(255,255,255,0.8); max-width: 580px; margin: 0 auto; line-height: 1.7;
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  background: linear-gradient(180deg, #0f0a12 0%, #0a0508 100%);
  color: rgba(255,255,255,0.72);
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  border-top: 3px solid var(--pink);
  position: relative;
  z-index: 1000;        /* above .gz-back-to-top (z:999) so the button */
                        /* visually disappears behind the footer when   */
                        /* scrolled down, independent of the JS hide    */
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,45,170,0.6), transparent);
}
.site-footer > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.site-footer a { color: var(--pink); transition: color 0.15s; }
.site-footer a:hover { color: var(--pink-light); }

/* ============================================
   RESPONSIVE
   ============================================ */

/* Desktop - ensure two columns */
@media (min-width: 901px) {
  .mag-row {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
  }
  .mag-row--equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* Tablet - narrower sidebar */
@media (max-width: 900px) {
  .mag-row { 
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
  }
  .mag-row--equal { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .mag-whatson-grid { grid-template-columns: repeat(2, 1fr); }
  .mag-picks-grid { grid-template-columns: 1fr; }
}

/* Mobile - keep two columns, tighten up */
@media (max-width: 640px) {
  .site-wrapper {
    max-width: 94%;
    margin-left: auto;
    margin-right: 0;
  }
  .mag-row {
    grid-template-columns: 1fr 160px;
    gap: 0.75rem;
  }
  .mag-row--equal { 
    display: block;
  }
  .mag-row--equal .mag-col {
    margin-bottom: 1rem;
  }
  .mag-section {
    padding: 1rem 0.5rem;
  }
  .mag-masthead { background-position: left center; }
  .mag-masthead__title { font-size: 30px; }
  .mag-cover__standfirst { font-size: 14px; line-height: 1.35; }
  .mag-cover__body { font-size: 16px; }
  .mag-cover__meta { font-size: 12px; }
  .mag-cover { padding-right: 0.5rem; }
  .mag-greeting { padding: 0.5rem; }
  .mag-greeting__mascot { width: 90px; margin: 0 -0.25rem 0.25rem 0.5rem; }
  .mag-greeting__h1 { font-size: 16px; line-height: 1.3; }
  .mag-greeting--centered .mag-greeting__h1 { font-size: 21px; line-height: 1.25; }
  .mag-greeting__hello { font-size: 15px; }
  .mag-greeting__sub { font-size: 15px; }
  .mag-greeting__desc { font-size: 13px; }
  .mag-picks-panel { padding: 0.75rem; }
  .mag-picks-panel__title { font-size: 15px; }
  .mag-pick-item { padding: 0.4rem 0; }
  .mag-pick-item__num { width: 22px; height: 22px; font-size: 11px; }
  .mag-pick-item__name { font-size: 14px; }
  .mag-pick-name { font-size: 14px; }
  .mag-mini__cat { font-size: 10px; }
  .mag-label { font-size: 12px; padding: 5px 14px; }
  .drop-cap { font-size: 3.2em; margin-top: calc(0.05em + 4px); }
  .mag-whatson-grid { grid-template-columns: 1fr; }
  .mag-nav-glossy a { padding: 0.75rem 1rem; font-size: 13px; }
  .mag-quiz-card__opts { grid-template-columns: 1fr; }
  .mag-more-header__text { font-size: 13px; }
  .mag-more-header__stars { font-size: 13px; }
  .mag-lotto-mini__title { font-size: 16px; }
  .mag-lotto-mini__ball { width: 38px; height: 38px; font-size: 16px; }
}

@media (min-width: 768px) {
  .mag-lotto-mini__ball { width: 56px !important; height: 56px !important; font-size: 22px !important; }
  .gz-lotto-date { font-size: 14px !important; color: rgba(255,255,255,0.85) !important; }
  .mag-lotto-mini__links a { font-size: 12px; }
  .mag-lotto-mini__credit { font-size: 12px; }
  .mag-picks-box__sub { font-size: 17px; }
  .mag-picks-box__title { font-size: 14px; }
  .mag-picks-box .mag-pick-name { font-size: 15px; }
  .mag-picks-box .mag-pick-meta { font-size: 12px; }
  .mag-picks-box .mag-pick-ukgc { font-size: 12px; }
  .mag-catchup-box__text { font-size: 14px; }
  .mag-section-link { font-size: 14px; }
  .mag-contributor-cta__text { font-size: 15px; }
}

/* ============================================
   LIVE GAME SHOWS
   ============================================ */

.mag-shows-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.mag-show-card {
  background: #fff;
  padding: 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  position: relative;
  transition: all 0.15s;
}

.mag-show-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.mag-show-card--bingo {
  border-left: 4px solid var(--pink);
}

.mag-show-card__live {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 9px;
  font-weight: 700;
  color: #c62828;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.mag-show-card__title {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.25rem;
}

.mag-show-card__provider {
  font-size: 11px;
  font-weight: 600;
  color: var(--pink);
  margin: 0 0 0.5rem;
}

.mag-show-card__desc {
  font-size: 12px;
  color: var(--grey);
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

.mag-show-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 20px;
  background: var(--bg);
  color: var(--grey);
}

.mag-show-card--bingo .mag-show-card__tag {
  background: var(--pink-bg);
  color: var(--pink);
}

.mag-shows-note {
  font-size: 11px;
  color: var(--grey-light);
  text-align: center;
  margin: 0;
}

@media (max-width: 900px) {
  .mag-shows-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .mag-shows-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   SECTION 1: COVER FULL + MINIS ROW
   ============================================ */

.mag-cover--full {
  border-right: none;
  padding-right: 0;
  border-bottom: 3px solid var(--pink);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.mag-minis-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.mag-section-link {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--pink);
  padding: 0.75rem;
  background: var(--pink-bg);
  border-radius: 6px;
  transition: background 0.15s;
}

.mag-section-link:hover {
  background: var(--pink);
  color: #fff;
}

/* Contributor CTA */
.mag-contributor-cta {
  padding: 1.25rem;
  background: #f9f9f9;
  text-align: center;
  margin-top: 1rem;
  box-shadow: var(--shadow-sm);
}

.mag-contributor-cta--full {
  margin-top: 1.5rem;
  width: 100%;
}

.mag-contributor-cta__stars {
  display: block;
  font-size: 20px;
  color: var(--pink);
  letter-spacing: 8px;
  margin: 0.25rem 0;
}

.mag-contributor-cta__text {
  font-family: var(--font-editorial);
  font-size: 17px;
  font-style: italic;
  font-weight: 600;
  color: #222;
  margin: 0.5rem 0;
  line-height: 1.5;
}

.mag-contributor-cta__text a {
  color: var(--pink);
  font-weight: 700;
}

.mag-contributor-cta__text a:hover {
  text-decoration: underline;
}

/* Full-width row layout */
.mag-contributor-cta--row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
}

.mag-contributor-cta--row .mag-contributor-cta__stars {
  display: inline;
  margin: 0;
}

.mag-contributor-cta--row .mag-contributor-cta__text {
  margin: 0;
}

/* Bordered style (below ad, smaller) */
.mag-contributor-cta--bordered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
  background: #fafafa;
  position: relative;
}

/* Fading border effect - top */
.mag-contributor-cta--bordered::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--pink) 15%, var(--pink) 85%, transparent 100%);
}

/* Fading border effect - bottom */
.mag-contributor-cta--bordered::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--purple) 15%, var(--purple) 85%, transparent 100%);
}

.mag-contributor-cta--bordered .mag-contributor-cta__stars {
  display: inline;
  margin: 0;
  font-size: 9px;
}

.mag-contributor-cta--bordered .mag-contributor-cta__text {
  margin: 0;
  font-size: 15px;
}

/* With reporter image - CSS GRID forces two columns always */
.mag-contributor-cta--with-reporter {
  display: grid !important;
  grid-template-columns: 210px 1fr;
  align-items: end;
  gap: 0.5rem;
  padding: 0 1.5rem 0 0;
  position: relative;
}

.mag-contributor-cta--with-reporter .mag-contributor-cta__reporter {
  width: 130px;
  max-width: none;
  height: auto;
  margin-bottom: 0;
  margin-left: 80px;
  margin-top: 10px;
}

.mag-contributor-cta--with-reporter .mag-contributor-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1.5rem 0 1rem;
}

.mag-contributor-cta--with-reporter .mag-contributor-cta__stars {
  font-size: 20px;
  color: var(--pink);
  letter-spacing: 8px;
}

.mag-contributor-cta--with-reporter .mag-contributor-cta__text {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  color: var(--black);
  line-height: 1.4;
}

.mag-contributor-cta--with-reporter .mag-contributor-cta__btn {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-sans) !important;
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 0.25rem;
}

.mag-contributor-cta--with-reporter .mag-contributor-cta__btn:hover {
  background: var(--pink-dark);
}

@media (max-width: 700px) {
  .mag-contributor-cta--bordered.mag-contributor-cta--with-reporter {
    display: grid !important;
    grid-template-columns: 130px 1fr;
    align-items: end;
    gap: 0.25rem;
    padding: 0 0.5rem 0 0;
  }
  .mag-contributor-cta--bordered.mag-contributor-cta--with-reporter .mag-contributor-cta__reporter {
    width: 110px;
    max-width: none;
    margin-bottom: 0;
    margin-left: 15px;
  }
  .mag-contributor-cta--bordered.mag-contributor-cta--with-reporter .mag-contributor-cta__content {
    padding: 1.25rem 0 0.75rem;
  }
  .mag-contributor-cta--bordered.mag-contributor-cta--with-reporter .mag-contributor-cta__text {
    font-size: 18px;
    line-height: 1.3;
  }
  .mag-contributor-cta--bordered.mag-contributor-cta--with-reporter .mag-contributor-cta__btn {
    font-size: 13px;
    padding: 0.35rem 0.85rem;
  }
  .mag-contributor-cta--bordered.mag-contributor-cta--with-reporter .mag-contributor-cta__stars {
    font-size: 9px;
  }
}

@media (max-width: 700px) {
  .mag-contributor-cta--row {
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media (max-width: 700px) {
  .mag-minis-row {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   LOTTO PAGES STYLES
   ═══════════════════════════════════════════════════════════ */

.lotto-hub { max-width: 1000px; margin: 0 auto; }

.lotto-hub__header {
  text-align: center; padding: 2rem 1.5rem;
  background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
  position: relative;
}

.lotto-balls-deco {
  display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1rem;
}

.deco-ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 16px; font-weight: 800; color: #fff;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.2), inset 0 3px 6px rgba(255,255,255,0.3), 0 4px 8px rgba(0,0,0,0.3);
}

.deco-ball--pink { background: linear-gradient(135deg, #ff6b9d, #C71585); }
.deco-ball--blue { background: linear-gradient(135deg, #64b5f6, #0d47a1); }
.deco-ball--gold { background: linear-gradient(135deg, #fff59d, #f9a825); color: #5d4037; }

.lotto-hub__title {
  font-family: var(--font-editorial); font-size: 32px; font-weight: 700;
  color: #fff; margin: 0 0 0.25rem;
}

.lotto-hub__date {
  font-size: 14px; color: rgba(255,255,255,0.8); margin: 0;
}

/* Lotto Sections */
.lotto-section { padding: 2rem 1.5rem; }
.lotto-section--alt { background: var(--bg); }
.lotto-section--dark { background: var(--black); }

.lotto-section__title {
  font-family: var(--font-editorial); font-size: 22px; font-weight: 700;
  color: var(--black); margin: 0 0 1.25rem;
}

.lotto-section__title--light { color: #fff; }

.lotto-section__sub {
  font-size: 14px; color: var(--grey-light); font-style: italic; margin: -1rem 0 1.5rem;
}

/* Draw Cards */
.draws-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
}

.draw-card {
  background: #fff; padding: 1.5rem; border-radius: 12px;
  border: 1px solid var(--border); text-align: center;
}

.draw-card--lotto { border-top: 4px solid #E91E8C; }
.draw-card--euro { border-top: 4px solid #1976d2; }
.draw-card--thunder { border-top: 4px solid #9c27b0; }
.draw-card--life { border-top: 4px solid #00897b; }

.draw-card__header { margin-bottom: 1rem; }

.draw-card__name {
  font-family: var(--font-editorial); font-size: 20px; font-weight: 700;
  color: var(--black); margin: 0 0 0.125rem;
}

.draw-card__day {
  font-size: 11px; color: var(--grey-light);
}

.draw-card__balls {
  display: flex; justify-content: center; gap: 0.375rem;
  margin-bottom: 1rem;
}

.lotto-ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 14px; font-weight: 800; color: #fff;
  box-shadow: none;
}

.lotto-ball--star { background: #ffd700; color: #333; width: 32px; height: 32px; font-size: 12px; }

.draw-card__jackpot {
  background: var(--bg); padding: 0.75rem; border-radius: 8px; margin-bottom: 0.5rem;
}

.draw-card__jp-label {
  display: block; font-size: 10px; font-weight: 600; color: var(--grey-light); text-transform: uppercase;
}

.draw-card__jp-amount {
  font-size: 22px; font-weight: 800; color: var(--black);
}

.draw-card__note {
  font-size: 11px; color: var(--grey-light); margin: 0;
}

.lotto-disclaimer {
  font-size: 11px; color: var(--grey-light); text-align: center; margin-top: 1.5rem;
}

.lotto-disclaimer a { color: var(--pink); }

/* Other Lotteries */
.other-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}

.other-card {
  background: #fff; padding: 1.25rem; border-radius: 10px;
  border: 1px solid var(--border);
}

.other-card__icon { font-size: 28px; display: block; margin-bottom: 0.5rem; }

.other-card__name {
  font-family: var(--font-editorial); font-size: 16px; font-weight: 700;
  color: var(--black); margin: 0 0 0.375rem;
}

.other-card__desc {
  font-size: 13px; color: var(--grey); line-height: 1.5; margin: 0 0 0.75rem;
}

.other-card__balls { display: flex; gap: 0.25rem; }

.mini-ball {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
}

.mini-ball--teal { background: linear-gradient(135deg, #4db6ac, #004d40); }

.other-card__tag {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 0.2rem 0.6rem; background: var(--bg); color: var(--grey); border-radius: 4px;
}

/* Lotto Picks */
.picks-grid { display: flex; flex-direction: column; gap: 0.75rem; }

.pick-card {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; padding: 1rem 1.25rem; border-radius: 10px;
  border: 1px solid var(--border); transition: all 0.15s;
}

.pick-card:hover {
  border-color: var(--pink); transform: translateX(4px);
}

.pick-card__rank {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #f9a825);
  font-size: 16px; font-weight: 800; color: #5d4037;
}

.pick-card__info { flex: 1; }

.pick-card__name {
  font-family: var(--font-editorial); font-size: 16px; font-weight: 700;
  color: var(--black); margin: 0 0 0.125rem;
}

.pick-card__why {
  font-size: 13px; color: var(--grey); margin: 0;
}

.pick-card__cta {
  font-size: 13px; font-weight: 600; color: var(--pink);
}

.picks-note {
  font-size: 11px; color: var(--grey-light); text-align: center; margin-top: 1rem;
}

/* World Lotteries Grid */
.world-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}

.world-card {
  background: rgba(255,255,255,0.05); padding: 1rem; border-radius: 8px;
  text-align: center; border: 1px solid rgba(255,255,255,0.1);
}

.world-card__flag { font-size: 28px; display: block; margin-bottom: 0.375rem; }

.world-card__name {
  font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 0.125rem;
}

.world-card__jp {
  font-size: 12px; color: var(--gold); margin: 0;
}

/* Lotto Schedule */
.schedule-table {
  max-width: 500px; margin: 0 auto;
}

.schedule-row {
  display: flex; justify-content: center; padding: 0.75rem 0;
  border-bottom: 1px solid var(--border); font-size: 14px;
}

.schedule-row--header {
  font-weight: 700; color: var(--black);
}

.schedule-row span:first-child { font-weight: 600; }
.schedule-row span:last-child { color: var(--grey); }

@media (max-width: 700px) {
  .draws-grid, .other-grid { grid-template-columns: 1fr; }
  .world-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   AGE GATE
   ============================================ */

.age-gate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1rem;
}

.age-gate.hidden {
  display: none;
}

.age-gate__box {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 3px solid var(--pink);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(233, 30, 140, 0.2);
  animation: gateSlideIn 0.3s ease-out;
}

@keyframes gateSlideIn {
  from { opacity: 0; transform: scale(0.95) translateY(-20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.age-gate__logo {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
}

.age-gate__title {
  font-family: var(--font-editorial);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem;
}

.age-gate__text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.age-gate__buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.age-gate__btn {
  padding: 0.875rem 2rem;
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
  border: none;
}

.age-gate__btn--yes {
  background: var(--pink);
  color: #fff;
}

.age-gate__btn--yes:hover {
  background: var(--pink-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(233, 30, 140, 0.4);
}

.age-gate__btn--no {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.age-gate__btn--no:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.age-gate__footer {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

@media (max-width: 480px) {
  .age-gate__box {
    padding: 2rem 1.5rem;
  }
  .age-gate__title {
    font-size: 24px;
  }
  .age-gate__buttons {
    flex-direction: column;
  }
  .age-gate__btn {
    width: 100%;
  }
}

/* ============================================
   PICK N MIX — LAYOUT
   ============================================ */

.mag-section--pnm { background: transparent; }

.mag-row--pnm {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  align-items: start;
  padding: 1.25rem 0 0.5rem;
}

.mag-col--pnm-games {
  min-width: 0;
}

.mag-col--pnm-id {
  min-width: 0;
  display: block;
  text-align: center;
  padding-top: 0.25rem;
}

.mag-col--pnm-id .pnm-mascot {
  width: 150px;
  margin: 0.5rem 0;
}

.mag-col--pnm-id .mag-cover__standfirst {
  text-align: center;
  margin: 0;
}

/* Top prize sits below grid */
.mag-section--alt .mag-top-prize {
  display: block;
  text-align: center;
  margin: 0.75rem 0 1rem;
}

/* Purple section stars */
.mag-section-stars--purple,
.lotto-section-intro .mag-section-stars--purple {
  color: var(--purple);
  opacity: 1;
  /* Dark purple → dark cyan gradient text, matches the vault's cyan-on-black
     mascot palette. Fallback: solid purple in browsers without background-clip. */
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 40%, #0e7490 70%, #155e75 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mag-section-stars--green  { color: #16A34A; opacity: 1; }
.mag-section-stars--red    { color: var(--danger, #c62828); opacity: 1; }
.mag-section-stars--left   { text-align: center; }

/* Purple faded border */
.mag-faded-border--purple {
  background: linear-gradient(90deg, transparent 0%, var(--purple) 20%, var(--purple) 80%, transparent 100%);
}
.mag-faded-border--top { margin: 0 0 1rem; }

/* Mobile layout */
@media (max-width: 640px) {
  .mag-row--pnm { gap: 0.75rem; }
  .mag-col--pnm-games { padding: 0.75rem 0.75rem 0.75rem 0.875rem; }
}

/* ============================================
   PICK N MIX — DID U KNOW BOX
   ============================================ */

.pnm-did-you-know {
  background: var(--black);
  border: 3px solid var(--purple);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.pnm-did-you-know__fact {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-style: italic;
  color: var(--white);
  margin: 0;
  line-height: 1.6;
  flex: 1;
  min-height: 80px;
  height: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .pnm-did-you-know__fact { font-size: 17px; line-height: 1.65; }
}

.pnm-did-you-know__title {
  text-align: center;
  margin: 0 0 0.75rem;
}

.pnm-did-you-know__title span {
  display: inline-block;
  background: var(--cyan);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 14px;
  transform: skewX(-6deg);
}

.pnm-did-you-know__title span em {
  display: inline-block;
  transform: skewX(6deg);
  font-style: normal;
}

/* ============================================
   PICK N MIX — SCOREBOARD
   ============================================ */

.pnm-scoreboard {
  background: var(--black);
  border: 2px solid var(--purple);
  padding: 1rem;
  width: 100%;
}

.pnm-scoreboard--full {
  display: block;
  border: none;
  border-top: 2px solid var(--purple);
  border-bottom: 2px solid var(--purple);
  padding: 0.75rem 1rem;
  margin: 0.75rem 0 0.5rem;
}

.pnm-scoreboard__title {
  margin: 0 0 0.75rem;
  line-height: 1.8;
  text-align: center;
}

.pnm-scoreboard__game {
  display: inline-block;
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 14px;
}

.pnm-scoreboard__game em { display: inline-block; font-style: normal; }

.pnm-scoreboard__game--pink   { background: var(--pink);       color: var(--white); }
.pnm-scoreboard__game--purple { background: var(--purple);     color: var(--white); }
.pnm-scoreboard__game--teal   { background: var(--teal);       color: var(--white); }
.pnm-scoreboard__game--violet { background: var(--card-violet);color: var(--white); }
.pnm-scoreboard__game--rose   { background: var(--card-rose);  color: var(--white); }

.pnm-scoreboard__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  margin-top: 0.25rem;
}

.pnm-scoreboard__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}

.pnm-scoreboard__row:last-of-type { border-bottom: none; }

.pnm-scoreboard__pos {
  width: 22px;
  height: 22px;
  background: var(--purple);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.pnm-pos--pink   { background: var(--pink)         !important; }
.pnm-pos--purple { background: var(--purple)       !important; }
.pnm-pos--teal   { background: var(--teal)         !important; }
.pnm-pos--violet { background: var(--card-violet)  !important; }
.pnm-pos--rose   { background: var(--card-rose)    !important; }

.pnm-scoreboard__name  { flex: 1; font-weight: 600; font-size: 13px; color: var(--white); }
.pnm-scoreboard__score { font-weight: 700; font-size: 13px; color: var(--white); }

.pnm-scoreboard__prize {
  font-size: 11px;
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  margin: 0.6rem 0 0;
  letter-spacing: 1px;
}

/* Full scoreboard overrides */
.pnm-scoreboard--full .pnm-scoreboard__title { color: var(--white); }
.pnm-scoreboard--full .pnm-scoreboard__row   { border-bottom-color: rgba(255,255,255,0.08); }

/* Rotating boards */
.pnm-board-panel { display: none; animation: pnm-slide-in 0.4s ease; }
.pnm-board-panel--active { display: block; }

@keyframes pnm-slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pnm-board-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0.6rem 0 0.25rem;
}

.pnm-board-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

.pnm-board-dot--active { background: var(--purple); }

/* ============================================
   PICK N MIX — JEEVES COLUMN
   ============================================ */

.mag-greeting__h1--jeeves { font-size: 28px; line-height: 1.2; }

.mag-greeting--purple .mag-greeting__mascot {
  width: 220px;
  shape-outside: url('/assets/images/quiz-jeeves.webp');
}

.mag-greeting__mascot--jeeves {
  margin-top: -10px;
  position: relative;
}

.pnm-jeeves-trivia { padding: 0; margin: 0; }

/* Mobile: solid black box */
.pnm-jeeves-trivia {
  margin: 1.25rem 0;
}
.gz-jeeves-stars {
  font-size: 16px;
  color: var(--purple);
  letter-spacing: 6px;
  text-align: center;
  margin: 0.4rem 0;
}
.gz-jeeves-bubble {
  background: transparent;
  padding: 0.75rem 0.5rem;
  margin: 0;
  border-radius: 6px;
  position: relative;
  z-index: 2;
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  contain: size layout;
  text-align: center;
  overflow: visible;
}
/* Rainbow border on all screen sizes */
.gz-jeeves-bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  padding: 2px;
  background: conic-gradient(from var(--gz-angle, 0deg), #F43F5E, #9c27b0, #00BCD4, #65A30D, #7C3AED, #0EA5E9, #F43F5E);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: gz-snake 2s linear infinite;
  z-index: 0;
}
.gz-jeeves-bubble .mag-mini__jeeves-q,
.gz-jeeves-bubble .gz-jeeves-stars {
  position: relative;
  z-index: 1;
}



.pnm-jeeves-trivia__beat { font-size: 13px; margin: 0.6rem 0 0; color: var(--purple); }
.pnm-jeeves-trivia__beat a { color: var(--purple); text-decoration: none; }
.pnm-jeeves-trivia__beat a:hover { text-decoration: underline; }

.mag-mini__jeeves-q {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  font-family: var(--font-editorial);
  font-size: 18px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
  padding: 0.85rem 1.25rem;
  margin: 0;
  color: #fff;
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}
@media (max-width: 640px) {
  .mag-mini__jeeves-q { font-size: 16px; line-height: 1.4; padding: 0.5rem 0.75rem; }
}

/* ============================================
   PICK N MIX — AD BOX & DISCLAIMER
   ============================================ */

.pnm-ad-box {
  margin-top: 0.75rem;
  background: #f5f5f5;
  border: 1px dashed #ccc;
  padding: 0.6rem;
  text-align: center;
  position: relative;
}

.pnm-ad-box__placeholder { font-size: 11px; color: #aaa; margin: 0; padding: 0.75rem 0; }

.pnm-disclaimer {
  font-size: 11px;
  color: var(--grey-light);
  text-align: center;
  margin: 0.5rem 0 0.75rem;
  line-height: 1.6;
}

.pnm-disclaimer a { color: var(--grey-light); text-decoration: underline; }

/* ============================================
   RESPONSIBLE GAMBLING BAR
   ============================================ */

.responsible {
  background: var(--black);
  padding: 0.75rem 1rem;
  text-align: center;
}

.responsible__text {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

.responsible__text strong { color: var(--white); }
.responsible__text a { color: var(--cyan); }
.responsible__text a:hover { color: var(--white); }

.responsible--games { background: #f0f7f0; }
.responsible--games .responsible__text { color: #2d6a2d; }

/* ============================================
   PURPLE BUTTON & LINK VARIANTS
   ============================================ */

.mag-more-btn--purple { background: var(--purple); display: block; margin-top: 0.75rem; }
.mag-more-btn--purple:hover { background: #6d28d9; }
.mag-more-btn--green  { background: #16A34A; display: block; margin-top: 0.75rem; }
.mag-more-btn--green:hover  { background: #15803d; }

.mag-cover__continue--purple { color: var(--purple); }
.mag-cover__continue--purple:hover { color: #6d28d9; }

/* ============================================
   MOBILE — PNM OVERRIDES
   ============================================ */

@media (max-width: 640px) {
  .pnm-did-you-know       { padding: 0.6rem; min-height: 170px; }
  .pnm-did-you-know__title span { font-size: 11px; padding: 2px 6px; }
  .pnm-did-you-know__fact { font-size: 13px; line-height: 1.3; }
  .pnm-scoreboard__name   { font-size: 14px; }
  .pnm-scoreboard__score  { font-size: 14px; }
  .pnm-scoreboard__pos    { width: 24px; height: 24px; font-size: 13px; }
  .pnm-scoreboard__row    { padding: 0.4rem 0; }
  .pnm-scoreboard__label  { font-size: 10px; letter-spacing: 1px; }
  .mag-greeting__mascot--jeeves { margin-top: 0; width: 160px; }
}

@media (min-width: 768px) {
  .mag-greeting__mascot--jeeves { margin-top: 45px; position: relative; }
}

/* Nav social icons */
.mag-nav-social {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  flex-shrink: 0;
}

.mag-nav-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
}

.mag-nav-social__link:hover { color: var(--pink); }

@media (max-width: 640px) {
  .mag-nav-social { display: none; }
}

/* ============================================
   SECTION MASTHEAD — per-section hero
   ============================================ */

.mag-section-masthead {
  padding: 2rem 0 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--pink);
}

.mag-section-masthead--pink  { border-bottom-color: var(--pink); }
.mag-section-masthead--blue  { border-bottom-color: #3B82F6; }
.mag-section-masthead--gold  { border-bottom-color: var(--gold); }
.mag-section-masthead--purple { border-bottom-color: var(--purple); }
.mag-section-masthead--red   { border-bottom-color: var(--danger); }
.mag-section-masthead--teal  { border-bottom-color: var(--teal); }

.mag-section-masthead__title {
  font-family: var(--font-editorial);
  font-size: 42px;
  font-weight: 700;
  color: var(--black);
  margin: 0.5rem 0 0.25rem;
  line-height: 1.1;
}

.mag-section-masthead__sub {
  font-size: 16px;
  font-style: italic;
  color: var(--grey);
  margin: 0;
}

/* ============================================
   PAGE LAYOUT — main + sidebar
   ============================================ */

/* Width wrapper */
.w {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Pink more button */
.mag-more-btn--pink {
  background: var(--pink);
}

.mag-more-btn--pink:hover {
  background: var(--pink-dark);
}

@media (max-width: 900px) {
  .mag-row--sidebar {
    grid-template-columns: 1fr;
  }

  .mag-col--sidebar {
    order: -1;
  }

  .mag-section-masthead__title {
    font-size: 30px;
  }
}

/* ============================================
   PAGE HEADER — section h1 + sub, full width
   ============================================ */

.mag-page-header {
  padding: 1.5rem 1.25rem 1rem;
  border-bottom: 3px solid var(--pink);
  margin-bottom: 1.5rem;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

.mag-page-header__title {
  font-family: var(--font-editorial);
  font-size: 38px;
  font-weight: 700;
  color: var(--black);
  margin: 0.25rem 0 0.25rem;
  line-height: 1.1;
}

.mag-page-header__sub {
  font-size: 15px;
  font-style: italic;
  color: var(--grey);
  margin: 0;
}

@media (max-width: 640px) {
  .mag-page-header__title { font-size: 26px; }
}

/* ============================================
   SECTION BANNER — above sidebar greeting
   ============================================ */

.mag-section-banner {
  padding: 1rem 1.25rem;
  text-align: center;
  margin-bottom: 0;
}

.mag-section-banner--pink   { background: var(--pink); }
.mag-section-banner--blue   { background: #3B82F6; }
.mag-section-banner--gold   { background: var(--gold); }
.mag-section-banner--purple { background: var(--purple); }
.mag-section-banner--red    { background: var(--danger); }
.mag-section-banner--teal   { background: var(--teal); }

.mag-section-banner__label {
  display: block;
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  color: var(--white);
  letter-spacing: 1px;
}

.mag-section-banner__sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin: 0.2rem 0 0;
}

/* ============================================
   BINGO FACTS SIDEBAR STRIP
   ============================================ */

.mag-bingo-facts {
  background: var(--black);
  padding: 0.75rem 1rem;
  margin-bottom: 0;
}

.mag-bingo-fact {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mag-bingo-fact:last-child {
  border-bottom: none;
}

.mag-bingo-fact__stat {
  font-family: var(--font-editorial);
  font-size: 17px;
  font-weight: 700;
  color: var(--pink);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 65px;
}

.mag-bingo-fact__text {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
}

.pnm-did-you-know__link {
  display: block;
  margin-top: 0.75rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  text-align: center;
  background: var(--purple);
  padding: 0.5rem 1rem;
}

.pnm-did-you-know__link:hover {
  background: #6d28d9;
  color: #fff;
}

/* Mini card border colour variants — card accent colours only */
.mag-mini--pink   { border-left: 4px solid var(--card-rose); }
.mag-mini--cyan   { border-left: 4px solid var(--card-sky); }
.mag-mini--teal   { border-left: 4px solid var(--card-lime); }
.mag-mini--gold   { border-left: 4px solid var(--card-amber); }
.mag-mini--purple { border-left: 4px solid var(--card-violet); }
.mag-mini--red    { border-left: 4px solid var(--card-coral); }

.mag-mini--pink   .mag-mini__title::first-letter { color: var(--card-rose); }
.mag-mini--cyan   .mag-mini__title::first-letter { color: var(--card-sky); }
.mag-mini--teal   .mag-mini__title::first-letter { color: var(--card-lime); }
.mag-mini--gold   .mag-mini__title::first-letter { color: var(--card-amber); }
.mag-mini--purple .mag-mini__title::first-letter { color: var(--card-violet); }
.mag-mini--red    .mag-mini__title::first-letter { color: var(--card-coral); }

/* Daily Daub blue label */
.mag-label--cyan { background: var(--cyan); }

/* ============================================
   DAILY DAUB — MIXED LAYOUT
   ============================================ */

/* 3-column news grid */
.daub-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.daub-story-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  transition: all 0.15s;
}

.daub-story-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.daub-story-card__cat {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: block;
}

/* Category colours — top border + label */
.daub-story-card__cat--news     { color: var(--cyan); }
.daub-story-card__cat--rogue    { color: var(--danger); }
.daub-story-card__cat--nostalgia{ color: var(--card-amber); }
.daub-story-card__cat--brand    { color: var(--card-violet); }
.daub-story-card__cat--player   { color: var(--card-lime); }
.daub-story-card__cat--whatson  { color: var(--cyan); }

.daub-story-card:has(.daub-story-card__cat--news)     { border-top-color: var(--cyan); }
.daub-story-card:has(.daub-story-card__cat--rogue)    { border-top-color: var(--danger); }
.daub-story-card:has(.daub-story-card__cat--nostalgia){ border-top-color: var(--card-amber); }
.daub-story-card:has(.daub-story-card__cat--brand)    { border-top-color: var(--card-violet); }
.daub-story-card:has(.daub-story-card__cat--player)   { border-top-color: var(--card-lime); }
.daub-story-card:has(.daub-story-card__cat--whatson)  { border-top-color: var(--cyan); }

.daub-story-card__title {
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--black);
  margin: 0 0 0.5rem;
  flex: 1;
}

.daub-story-card__teaser {
  font-size: 12px;
  color: var(--grey);
  line-height: 1.4;
  margin: 0 0 0.5rem;
}

.daub-story-card__read {
  font-size: 11px;
  font-weight: 700;
  color: var(--pink);
  margin-top: auto;
}

/* Feature blocks — What's On + Why We Picked */
.daub-feature-block {
  padding: 1.25rem;
  height: 100%;
}

.daub-feature-block--cyan { background: #e0f7fa; border-left: 4px solid var(--cyan); }
.daub-feature-block--pink { background: var(--pink-bg); border-left: 4px solid var(--pink); }

.daub-feature-block__title {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  margin: 0.5rem 0 0.75rem;
}

.daub-feature-block__body {
  font-size: 13px;
  color: var(--grey);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

/* What's On list */
.daub-whatson-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
}

.daub-whatson-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 12px;
  line-height: 1.4;
}

.daub-whatson-item:last-child { border-bottom: none; }

.daub-whatson-item__day {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: var(--cyan);
  color: #fff;
  padding: 2px 5px;
  border-radius: 2px;
  white-space: nowrap;
  margin-top: 2px;
  flex-shrink: 0;
}

.daub-whatson-item p { margin: 0.1rem 0 0; color: var(--grey); }
.daub-whatson-item strong { color: var(--black); }

/* Mobile */
@media (max-width: 640px) {
  .daub-news-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
  .daub-news-grid { grid-template-columns: 1fr; }
}

/* ============================================
   BLUE SECTION MODIFIERS — Daily Daub
   ============================================ */

.mag-section--cyan .drop-cap               { color: var(--cyan); }
.mag-section--cyan a.mag-cover__continue   { color: var(--cyan); }
.mag-section--cyan a.mag-cover__continue:hover { color: var(--cyan-dark); }
.mag-section--cyan .mag-editorial-pull     { background: #e0f7fa; border-top-color: var(--cyan); border-bottom-color: var(--cyan); }
.mag-section--cyan .mag-section-stars      { color: var(--cyan); opacity: 1; }
.mag-section--cyan .mag-more-label         { color: var(--cyan); }
.mag-section--cyan .mag-cover__title--pink { color: var(--cyan); }

/* ============================================
   HAPPY FAMILIES — Family cards
   ============================================ */

.hf-family {
  margin-bottom: 1.5rem;
}

.hf-family__header {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-left: 5px solid var(--pink);
  padding-left: 1rem;
  margin-bottom: 0.875rem;
  gap: 1rem;
}

.hf-family__name {
  font-family: var(--font-editorial);
  font-size: 24px;
  font-weight: 700;
  color: var(--black);
  margin: 0.3rem 0 0.1rem;
  line-height: 1.2;
}

.hf-family__tagline {
  font-size: 13px;
  font-style: italic;
  color: var(--grey);
  margin: 0;
}

.hf-family__meta {
  text-align: right;
  flex-shrink: 0;
}

.hf-family__parent {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--dark);
}

.hf-family__licence {
  display: block;
  font-size: 10px;
  color: var(--grey-light);
  margin-top: 2px;
}

.hf-family__about {
  font-size: 14px;
  color: var(--dark);
  line-height: 1.65;
  margin: 0 0 0.875rem;
}

/* Member list */
.hf-members {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.hf-member {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: relative;
}

.hf-member--nobingo { opacity: 0.6; }

.hf-member__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}

.hf-member__note {
  font-size: 11px;
  color: var(--grey);
}

.hf-member__tag {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  padding: 1px 5px;
  border-radius: 2px;
}

.hf-footer-note {
  font-size: 13px;
  color: var(--grey);
  line-height: 1.6;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  margin-top: 0.5rem;
}

.hf-footer-note a { color: var(--pink); }

/* Mobile */
@media (max-width: 640px) {
  .hf-members { grid-template-columns: 1fr 1fr; }
  .hf-family__header { flex-direction: column; gap: 0.25rem; }
  .hf-family__meta { text-align: center; }
}

/* ============================================
   BRAND DIRECTORY — A-Z telephone style
   ============================================ */

.dir-az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 1rem 0 1.5rem;
  padding: 0.75rem;
  background: var(--black);
  border: 2px solid var(--pink);
}

.dir-az-nav__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,0.1);
  transition: background 0.15s;
}

.dir-az-nav__letter:hover { background: var(--pink); color: #fff; }

.dir-letter-group {
  margin-bottom: 1.5rem;
}

.dir-letter-group__letter {
  font-family: var(--font-editorial);
  font-size: 28px;
  font-weight: 700;
  color: var(--pink);
  border-bottom: 2px solid var(--pink);
  padding-bottom: 0.25rem;
  margin: 0 0 0.5rem;
}

.dir-listing {
  border: 1px solid var(--border);
}

.dir-entry {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.6rem 0.875rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
}

.dir-entry:last-child { border-bottom: none; }
.dir-entry--affiliate { background: #fafafa; }

.dir-entry__main {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  flex: 1;
}

.dir-entry__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
}

.dir-entry__star { color: var(--pink); margin-left: 2px; }

.dir-entry__platform {
  font-size: 11px;
  color: var(--grey-light);
  background: #f0f0f0;
  padding: 1px 6px;
  border-radius: 2px;
}

.dir-entry__tagline {
  font-size: 12px;
  color: var(--grey);
  font-style: italic;
}

.dir-entry__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.dir-entry__rating {
  font-size: 12px;
  font-weight: 700;
  color: var(--pink);
  white-space: nowrap;
}

.dir-entry__count { color: var(--grey-light); font-weight: 400; }

.dir-entry__link {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--pink);
  padding: 3px 10px;
  white-space: nowrap;
  transition: background 0.15s;
}

.dir-entry__link:hover { background: var(--pink-dark); }

/* ============================================
   PLAYER REVIEW FORM
   ============================================ */

.player-review-form {
  background: var(--bg);
  border: 2px solid var(--pink);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.player-review-form__header { margin-bottom: 1.25rem; }

.player-review-form__title {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 700;
  color: var(--black);
  margin: 0.4rem 0 0.25rem;
}

.player-review-form__sub {
  font-size: 13px;
  color: var(--grey);
  margin: 0;
}

.prf-field {
  margin-bottom: 1rem;
}

.prf-field--half {
  display: inline-block;
  width: calc(50% - 0.5rem);
  vertical-align: top;
}

.prf-field--half + .prf-field--half { margin-left: 0.75rem; }

.prf-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.prf-label__note { font-weight: 400; color: var(--grey-light); text-transform: none; }

.prf-thumbs {
  display: flex;
  gap: 0.75rem;
}

.prf-thumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--border);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s;
}

.prf-thumb input { display: none; }
.prf-thumb--yes:has(input:checked) { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.prf-thumb--no:has(input:checked)  { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.prf-thumb:hover { border-color: var(--pink); }

.prf-stars {
  display: flex;
  gap: 4px;
}

.prf-star {
  cursor: pointer;
  font-size: 26px;
  color: #ddd;
  transition: color 0.1s;
}

.prf-star input { display: none; }
.prf-star:has(input:checked) ~ .prf-star span,
.prf-star:has(input:checked) span { color: var(--gold); }
.prf-stars:has(.prf-star:hover) .prf-star:not(:hover) ~ .prf-star span { color: #ddd; }
.prf-stars .prf-star:hover span,
.prf-stars .prf-star:hover ~ .prf-star span { color: #ddd; }
.prf-stars .prf-star span:hover,
.prf-stars:hover .prf-star:hover span { color: var(--gold); }

.prf-select,
.prf-input,
.prf-textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 2px solid var(--border);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--dark);
  background: #fff;
  transition: border-color 0.15s;
}

.prf-select:focus,
.prf-input:focus,
.prf-textarea:focus {
  outline: none;
  border-color: var(--pink);
}

.prf-textarea { resize: vertical; }

.prf-terms {
  font-size: 12px;
  color: var(--grey);
  margin-bottom: 1rem;
}

.prf-terms label { display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; }
.prf-terms input { flex-shrink: 0; margin-top: 2px; }

.prf-note {
  font-size: 11px;
  color: var(--grey-light);
  text-align: center;
  margin: 0.5rem 0 0;
}

@media (max-width: 640px) {
  .prf-field--half { width: 100%; margin-left: 0; display: block; }
  .dir-entry { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .dir-entry__main { flex-direction: column; gap: 0.2rem; }
}

/* ============================================
   LOTTO CROSSOVER STRIP — compact, gold
   ============================================ */

.ob-lotto-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--black);
  border: 2px solid var(--gold);
  padding: 0.6rem 0.875rem;
  margin-top: 1rem;
  transition: background 0.15s;
}

.ob-lotto-strip:hover { background: #1a1a1a; }

.ob-lotto-strip__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  background: var(--gold);
  color: var(--black);
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ob-lotto-strip__balls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Override standard ball size for strip */
.ob-lotto-strip__balls .mag-lotto-mini__ball {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.ob-lotto-strip__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ob-lotto-strip__text {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.3;
}

.ob-lotto-strip__text strong { color: var(--gold); }

.ob-lotto-strip__cta {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}

/* ============================================
   SCAM CHECK BAR — red clickable header
   ============================================ */

.scam-check-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--danger);
  padding: 0.75rem 1rem;
  margin-bottom: 0;
  transition: background 0.15s;
}

.scam-check-bar:hover { background: #b71c1c; }

.scam-check-bar__icon { font-size: 12px; flex-shrink: 0; }

.scam-check-bar__text {
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  letter-spacing: 0.5px;
  flex: 1;
  text-align: center;
}

.scam-check-bar__arrow {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}

.mag-faded-border--lotto {
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, #e0e0e0 20%, #e0e0e0 80%, transparent 100%);
  margin: 1.5rem 0 0;
}

/* ============================================
   BRITISH BINGO SITES — Magazine hub grid
   ============================================ */

.bbs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.bbs-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}

.bbs-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--pink);
}

.bbs-card__stripe {
  height: 5px;
  width: 100%;
}

.bbs-card__body {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  flex: 1;
}

.bbs-card__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid var(--border);
  padding: 4px;
}

.bbs-card__initial {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.bbs-card__info { flex: 1; min-width: 0; }

.bbs-card__name {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.2rem;
  line-height: 1.2;
}

.bbs-card__tagline {
  font-size: 12px;
  font-style: italic;
  color: var(--grey);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.bbs-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.bbs-card__platform,
.bbs-card__operator {
  font-size: 10px;
  font-weight: 600;
  background: #f0f0f0;
  color: var(--grey);
  padding: 1px 6px;
  border-radius: 2px;
}

.bbs-card__footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.bbs-card__stars {
  font-size: 12px;
  color: var(--gold);
  flex-shrink: 0;
}

.bbs-card__score {
  color: var(--dark);
  font-weight: 700;
}

.bbs-card__reviews {
  font-size: 11px;
  color: var(--grey-light);
  flex: 1;
}

.bbs-card__cta {
  font-size: 11px;
  font-weight: 700;
  color: var(--pink);
  white-space: nowrap;
  margin-left: auto;
}

/* Others — compact list below the grid */
.bbs-others {
  border: 1px solid var(--border);
}

.bbs-other {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
  font-size: 13px;
}

.bbs-other:last-child { border-bottom: none; }
.bbs-other:hover { background: var(--pink-bg); }

.bbs-other__name { font-weight: 600; color: var(--black); flex: 1; }
.bbs-other__platform { font-size: 10px; color: var(--grey-light); background: #f0f0f0; padding: 1px 5px; }
.bbs-other__reviews { font-size: 11px; color: var(--grey-light); }
.bbs-other__arrow { color: var(--pink); font-weight: 700; margin-left: auto; }

/* Mobile */
@media (max-width: 640px) {
  .bbs-grid { grid-template-columns: 1fr; }
}

/* Lotto slogan — appears in boxes and on lotto page */
.mag-lotto-results__slogan {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0.4rem 0 0.5rem;
  letter-spacing: 0.3px;
}
@media (min-width: 768px) {
  .mag-lotto-results__slogan { font-size: 18px; }
}

.lotto-hub__slogan {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-style: italic;
  color: rgba(255,255,255,0.75);
  margin: 0.25rem 0 0.5rem;
}

/* ============================================
   BRAND REVIEW PAGE
   ============================================ */

/* ============================================
   BC-COVERAGE — shared full-width container
   Used site-wide for the 100%-width band that sits BELOW the two-column
   mag-row (bingo-clubs hub, party events hub, party event page). Page-
   specific content inside (town grids, facts) is styled per-page; this
   is just the container shell so every page matches.
   ============================================ */
.bc-coverage { margin: 2rem 0; }
.bc-coverage--full {
  padding: 2rem clamp(1rem, 4vw, 3rem);
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, #EC4899, #7C3AED, #2563EB, transparent) 1;
  background: linear-gradient(180deg, #fdf2f8 0%, #f5f3ff 50%, #eff6ff 100%);
  margin: 2rem 0 0;
}
.bc-coverage--full .bc-coverage__title { text-align: center; margin: 1rem 0 0.5rem; }
.bc-coverage--full .mag-more-label { text-align: center; margin-bottom: 0.5rem; }
.pb-events .bc-coverage__intro {
  text-align:center; max-width:60ch; margin:0 auto 1.5rem;
  font-family:var(--font-sans); font-size:1.05rem; line-height:1.6;
  color:var(--dark); padding:0 1rem;
}

/* ============================================
   PARTY SHARE BOX — used by the universal inc/share-box.php include
   (party event + city pages). Square-cornered, faint party-gradient panel.
   ============================================ */
.pb-sharebox {
  margin:1.5rem auto; padding:16px 18px; text-align:center;
  border-radius:0;
  background:linear-gradient(135deg, rgba(244,63,94,.06), rgba(156,39,176,.05) 45%, rgba(0,188,212,.06) 75%, rgba(0,230,118,.06));
  border:1px solid rgba(156,39,176,.12);
}
.pb-share-snake { transform:rotate(0) !important; margin-bottom:0.85rem; }   /* straight, not angled */
.pb-share { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.pb-share__link {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:0; cursor:pointer; color:inherit;
  background:rgba(255,255,255,.6); border:1px solid rgba(26,10,46,.08);
  box-shadow:0 1px 3px rgba(26,10,46,.06);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.pb-share__link:hover { transform:translateY(-2px); box-shadow:0 5px 14px -4px rgba(26,10,46,.25); background:#fff; }
.pb-share__link--fb   { color:var(--cyan, #00BCD4); }   /* house style: FB = cyan */
.pb-share__link--wa   { color:#25d366; }
.pb-share__link--msgr { color:#0084ff; }
.pb-share__link--x    { color:#111; }
.pb-share__link--copy { color:#9c27b0; }
.pb-share__link--native { color:#F43F5E; }
.pb-share__link--bookmark { color:#F59E0B; }
.pb-share__link--home { color:#0EA5E9; }
.pb-share__link--copy.is-copied { color:#16a34a; background:#e7f7ee; }
.pb-share__copytext:not(:empty) { font-size:11px; font-weight:800; margin-left:2px; }

/* ============================================
   PARTY HOTEL BOX — "Make a night of it" sidebar box (party event + city).
   Gradient border, dark inner, white text. (The events hub uses its own
   lighter variant with .pb-hotelbox__body.)
   ============================================ */
.pb-hotelbox { margin-top:1.5rem; }
.pb-hotelbox__outer {
  padding:3px;
  background:linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
}
.pb-hotelbox__inner {
  background:linear-gradient(135deg,#1a0010 0%,#0a1a1a 100%);
  padding:14px 14px 16px; text-align:center;
}
.pb-hotelbox__header { margin:0 0 12px; }
.pb-hotelbox__title {
  font-family:var(--font-editorial, 'Lora', Georgia, serif);
  font-weight:700; font-style:italic; font-size:19px; line-height:1.2; color:#fff; margin:0 0 11px;
}
.pb-hotelbox__text { font-size:13px; line-height:1.5; color:rgba(255,255,255,.78); margin:0 0 18px; }
.pb-hotelbox__btn {
  display:block; text-decoration:none;
  font-weight:800; font-size:13px; letter-spacing:.3px; color:#fff;
  padding:10px 24px; border-radius:6px;
  background:linear-gradient(135deg,var(--pink,#F43F5E),#9c27b0);
  box-shadow:0 4px 14px -4px rgba(244,63,94,.5);
  transition:transform .15s, box-shadow .15s;
}
.pb-hotelbox__btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px -6px rgba(244,63,94,.65); }
.pb-hotelbox__ad {
  display:inline-block; font-size:11px; color:rgba(255,255,255,.6); margin:12px 0 0; letter-spacing:.3px;
  padding:3px 10px; border:1px solid rgba(255,255,255,.22); border-radius:100px;
}

/* ============================================
   HOST-A-BINGO-NIGHT BOX — bright pink party box for the party sidebar.
   Same construction as pb-hotelbox (gradient-border padding trick, sharp
   corners, editorial title, 6px button) but with a PINK filled inner
   instead of the dark one, so it reads as a bright sibling to the hotel box.
   ============================================ */
.pb-hostbox { margin-top:1.5rem; }
.pb-hostbox__outer {
  padding:3px;
  background:linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
}
.pb-hostbox__inner {
  background:linear-gradient(135deg,#F43F5E 0%,#9c27b0 40%,#00BCD4 75%,#00E676 100%);
  padding:14px 14px 16px; text-align:center;
}
.pb-hostbox__header { margin:0 0 12px; }
.pb-hostbox__title {
  font-family:var(--font-editorial, 'Lora', Georgia, serif);
  font-weight:700; font-style:italic; font-size:19px; line-height:1.2; color:#fff; margin:0 0 11px;
}
.pb-hostbox__text { font-size:13.5px; line-height:1.6; letter-spacing:.2px; color:#fff; margin:0 0 18px; }
.pb-hostbox__btn {
  display:block; text-decoration:none;
  font-weight:800; font-size:13px; letter-spacing:.3px; color:#F43F5E;
  padding:10px 24px; border-radius:6px;
  background:#fff;
  transition:transform .15s;
}
.pb-hostbox__btn:hover { transform:translateY(-2px); }

/* ============================================
   RUN-A-BINGO-NIGHT BANNER — full-width CTA banner used at the end of the
   party events list (hub) and under the related events (event page).
   ============================================ */
.pb-run-banner {
  margin:1.5rem auto 0; max-width:900px;
  border-radius:18px; overflow:hidden;
  background:linear-gradient(120deg,#F43F5E 0%,#9c27b0 45%,#00BCD4 80%,#00E676 120%);
  box-shadow:0 8px 24px rgba(156,39,176,.25);
}
.pb-run-banner__inner {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:20px 24px; justify-content:center; text-align:center;
}
.pb-run-banner__emoji { font-size:34px; line-height:1; }
.pb-run-banner__text { display:flex; flex-direction:column; gap:2px; color:#fff; }
.pb-run-banner__text strong { font-size:19px; font-weight:900; letter-spacing:-.3px; }
.pb-run-banner__text span { font-size:13.5px; opacity:.92; }
.pb-run-banner__cta {
  background:#fff; color:#9c27b0; font-weight:800; font-size:14px;
  padding:11px 22px; border-radius:26px; text-decoration:none; white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.15); transition:transform .15s;
}
.pb-run-banner__cta:hover { transform:scale(1.04); }
@media (min-width:560px){
  .pb-run-banner__inner { justify-content:space-between; text-align:left; flex-wrap:nowrap; }
}

.breadcrumb-bar {
  background: #fff;
}

.breadcrumb {
  font-size: 12px;
  color: #555;
  padding: 0.5rem 0;
  margin: 0 auto;
  max-width: 1160px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  scrollbar-width: none;                /* Firefox — hide scrollbar */
  -ms-overflow-style: none;             /* old Edge — hide scrollbar */
}
.breadcrumb::-webkit-scrollbar { display: none; }   /* Chrome/Safari — hide scrollbar */

.breadcrumb a { color: #555; text-decoration: underline; }
.breadcrumb a:hover { color: var(--pink); }

.brand-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
}

/* Brand Header */
.brand-header {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 0 1rem;
  border-bottom: 3px solid var(--pink);
  margin-bottom: 1.5rem;
}

.brand-header__main {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex: 1;
}

.brand-header__logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border: 1px solid var(--border);
  background: #fff;
  padding: 0.5rem;
  flex-shrink: 0;
}

.brand-header__name {
  font-family: var(--font-editorial);
  font-size: 32px;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.25rem;
  line-height: 1.1;
}

.brand-header__tagline {
  font-size: 14px;
  color: var(--grey);
  font-style: italic;
  margin: 0 0 0.5rem;
}

.brand-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 12px;
  color: var(--grey);
  margin-bottom: 0.75rem;
}

.brand-header__meta a { color: var(--pink); }

.brand-header__ratings {
  display: flex;
  gap: 0.75rem;
}

.rating-badge {
  text-align: center;
  padding: 0.4rem 0.75rem;
  border: 2px solid var(--border);
  min-width: 60px;
}

.rating-badge--editor { border-color: var(--pink); }
.rating-badge--players { border-color: var(--cyan); }

.rating-badge__score {
  display: block;
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 700;
  color: var(--black);
  line-height: 1;
}

.rating-badge--editor .rating-badge__score { color: var(--pink); }
.rating-badge--players .rating-badge__score { color: var(--cyan); }

.rating-badge__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--grey-light);
  margin-top: 2px;
}

/* CTA button */
.btn-cta {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 0.875rem 1.75rem;
  text-align: center;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-cta:hover { background: var(--pink-dark); color: #fff; }

.brand-header__cta { text-align: center; flex-shrink: 0; }
.brand-header__terms { font-size: 13px; color: var(--grey-light); margin: 0.4rem 0 0; }

.brand-header__notice {
  flex-shrink: 0;
  max-width: 260px;
}

.notice { padding: 0.75rem 1rem; font-size: 13px; line-height: 1.5; }
.notice--info { background: #EFF6FF; border-left: 3px solid #3B82F6; color: var(--dark); }

/* Quick Facts */
.brand-facts {
  margin-bottom: 1.5rem;
}

.brand-facts h2 {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border);
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}

.fact {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.75rem;
}

.fact__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--grey-light);
  margin-bottom: 0.25rem;
}

.fact__value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
}

/* Review content */
.brand-review {
  margin-bottom: 1.5rem;
}

.brand-review h2 {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--pink);
}

.review-content {
  font-size: 15px;
  line-height: 1.7;
  color: var(--dark);
}

.review-content p { margin-bottom: 1rem; }
.review-content h3 { font-family: var(--font-editorial); font-size: 18px; margin: 1.5rem 0 0.5rem; }

/* Player reviews list */
.player-reviews { margin: 1.5rem 0; }

.player-reviews h2 {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--cyan);
}

.player-review-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cyan);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}

.player-review-card__header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.player-review-card__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--black);
}

.player-review-card__stars {
  color: var(--gold);
  font-size: 14px;
}

.player-review-card__date {
  font-size: 11px;
  color: var(--grey-light);
}

.player-review-card__verdict {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  margin-bottom: 0.5rem;
}

.player-review-card__verdict--yes { background: var(--success-bg); color: var(--success); }
.player-review-card__verdict--no  { background: var(--danger-bg); color: var(--danger); }

.player-review-card__text {
  font-size: 13px;
  color: var(--dark);
  line-height: 1.6;
  margin: 0;
}

.player-review-card__tags {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.player-review-card__tag {
  font-size: 10px;
  background: #f0f0f0;
  color: var(--grey);
  padding: 2px 8px;
  border-radius: 2px;
}

/* Mobile */
@media (max-width: 640px) {
  .brand-header { flex-direction: column; }
  .brand-header__main { flex-direction: column; }
  .brand-header__logo { width: 60px; height: 60px; }
  .brand-header__name { font-size: 24px; }
  .brand-header__notice { max-width: 100%; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   BINGO DIRECTORY — Magazine editorial style
   ============================================ */

/* Platform chips */
.bdir-platform-chip {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 8px;
  border-radius: 2px;
}

/* Page header */
.bdir-header {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}

.bdir-header__title {
  font-family: var(--font-editorial);
  font-size: 42px;
  font-weight: 700;
  color: var(--black);
  margin: 0.4rem 0 0.25rem;
  line-height: 1;
}

.bdir-header__sub {
  font-size: 14px;
  font-style: italic;
  color: var(--grey);
  margin: 0;
}

.bdir-header__key { text-align: right; }

.bdir-header__key-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-light);
  display: block;
  margin-bottom: 0.4rem;
}

.bdir-header__key .bdir-platform-chip { margin: 0 2px 4px 0; }

/* Featured picks */
.bdir-featured {
  padding: 0 0 1rem;
}

.bdir-featured__label { margin-bottom: 1rem; }

.bdir-featured__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.bdir-feat-card {
  display: flex;
  flex-direction: column;
  background: var(--black);
  padding: 1.25rem;
  border: 2px solid var(--pink);
  transition: border-color 0.2s;
  text-decoration: none;
}

.bdir-feat-card:hover { border-color: #fff; }

.bdir-feat-card__top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.75rem;
}

.bdir-feat-card__badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pink);
}

.bdir-feat-card__name {
  font-family: var(--font-editorial);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.1;
}

.bdir-feat-card__rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.bdir-feat-card__stars { color: var(--gold); font-size: 13px; }

.bdir-feat-card__score {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.bdir-feat-card__count {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

.bdir-feat-card__line {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  margin: 0 0 1rem;
  flex: 1;
}

.bdir-feat-card__cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--pink);
  margin-top: auto;
}

/* A-Z Jump nav */
.bdir-az-jump {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1rem 0;
  flex-wrap: wrap;
}

.bdir-az-jump__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-light);
  margin-right: 0.5rem;
}

.bdir-az-jump__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  background: var(--bg);
  border: 1px solid var(--border);
  transition: all 0.15s;
}

.bdir-az-jump__btn:hover { background: var(--pink); color: #fff; border-color: var(--pink); }

/* A-Z sections */
.bdir-az__section { margin-bottom: 2rem; }

.bdir-az__letter-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.bdir-az__letter {
  font-family: var(--font-editorial);
  font-size: 36px;
  font-weight: 700;
  color: var(--pink);
  line-height: 1;
  flex-shrink: 0;
}

.bdir-az__rule {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--pink) 0%, transparent 100%);
}

.bdir-az__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

/* Individual site card */
.bdir-card {
  display: flex;
  flex-direction: column;
  padding: 0.875rem 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  transition: all 0.15s;
}

.bdir-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.bdir-card--reviewed { border-top-color: var(--pink); }

.bdir-card__top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}

.bdir-card__tick {
  font-size: 11px;
  font-weight: 700;
  color: var(--pink);
}

.bdir-card__name {
  font-family: var(--font-editorial);
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}

.bdir-card__rating {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}

.bdir-star--on  { color: var(--gold); font-size: 11px; }
.bdir-star--off { color: #ddd; font-size: 11px; }

.bdir-card__score {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}

.bdir-card__reviews {
  font-size: 11px;
  color: var(--grey-light);
  margin: 0 0 0.5rem;
  flex: 1;
}

.bdir-card__link {
  font-size: 11px;
  font-weight: 700;
  color: var(--pink);
  margin-top: auto;
}

.bdir-footer-note {
  font-size: 12px;
  color: var(--grey-light);
  text-align: center;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}

.bdir-footer-note a { color: var(--pink); }

/* Mobile */
@media (max-width: 640px) {
  .bdir-header { flex-direction: column; gap: 0.75rem; }
  .bdir-header__key { text-align: center; }
  .bdir-header__title { font-size: 28px; }
  .bdir-featured__grid { grid-template-columns: 1fr; }
  .bdir-az__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   BDIR INTRO — full width intro with lady
   ============================================ */

.bdir-intro {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 0 1rem;
}

.bdir-intro__text { flex: 1; min-width: 0; }

.bdir-intro__title {
  font-family: var(--font-editorial);
  font-size: 38px;
  font-weight: 700;
  color: var(--black);
  margin: 0.3rem 0 0.75rem;
  line-height: 1.1;
}

.bdir-intro__standfirst {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--black);
  margin: 0 0 0.75rem;
}

.bdir-intro__body {
  font-size: 14px;
  color: var(--grey);
  line-height: 1.65;
  margin: 0 0 0.875rem;
}

.bdir-intro__key {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.bdir-intro__key-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 0.25rem;
}

.bdir-intro__mascot {
  flex-shrink: 0;
  width: 140px;
  padding-top: 0.5rem;
}

.bdir-intro__mascot .mag-greeting__mascot {
  width: 140px;
  float: none;
  margin: 0;
}

@media (max-width: 640px) {
  .bdir-intro { flex-direction: column; gap: 0.5rem; }
  .bdir-intro__mascot { display: none; }
  .bdir-intro__title { font-size: 26px; }
}

.bdir-intro__built {
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  color: var(--pink);
  margin: 0 0 0.875rem;
}

.bdir-intro__lady {
  float: right;
  width: 180px;
  margin: 0.25rem 0 0.5rem 0.5rem;
  clear: none;
}

.bdir-intro .mag-editorial-pull {
  clear: none;
  overflow: hidden;
  margin: 0.5rem 0 !important;
}

@media (max-width: 640px) {
  .bdir-intro__lady { width: 130px; margin: 0 0 0.25rem 0.5rem; }
}

.bdir-intro > .mag-label {
  display: inline-block;
  margin-bottom: 0.75rem;
  width: auto;
}

.bdir-intro__float-wrap .drop-cap {
  float: left;
  font-size: 5em;
  line-height: 0.75;
  margin: 0.05em 0.1em 0 0;
}

.bdir-intro__float-wrap {
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.bdir-intro__float-wrap .drop-cap {
  float: left;
  font-size: 5em;
  line-height: 0.75;
  margin: 0.05em 0.1em 0 0;
}

.bdir-intro__key--col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.bdir-platform-chip--row {
  display: flex;
  align-items: center;
  width: 120px;
}

.mag-pick-platform {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
  padding: 2px 6px;
  border-radius: 2px;
  margin-top: 1px;
}

.bdir-sidebar-key {
  background: var(--black);
  border: 2px solid var(--pink);
  padding: 0.875rem 1rem;
  margin-bottom: 0;
}

.bdir-sidebar-key .bdir-intro__key-label {
  color: rgba(255,255,255,0.6);
  display: block;
  margin-bottom: 0.5rem;
}

.bdir-sidebar-key__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mag-picks-box--reviewed .mag-picks-box__header {
  background: var(--pink);
}

.mag-picks-box--reviewed .mag-picks-box__title span {
  background: transparent;
}

/* ============================================
   PICK N MIX HUB — purple theme
   ============================================ */

.drop-cap--purple { color: var(--purple) !important; }

.mag-editorial-pull--purple {
  background: rgba(156, 39, 176, 0.05);
  border-top-color: var(--purple);
  border-bottom-color: var(--purple);
}

.mag-editorial-pull--green {
  background: rgba(22, 163, 74, 0.05);
  border-top-color: #16A34A;
  border-bottom-color: #16A34A;
}
.mag-editorial-pull--green p { color: #15803d; }

.mag-editorial-pull--blue {
  background: rgba(37, 99, 235, 0.05);
  border-top-color: #2563EB;
  border-bottom-color: #2563EB;
}
.mag-editorial-pull--blue p { color: #1d4ed8; }

.mag-editorial-pull--cyan {
  background: rgba(0, 188, 212, 0.05);
  border-top-color: #00BCD4;
  border-bottom-color: #00BCD4;
}
.mag-editorial-pull--cyan p { color: #0097a7; }

.mag-editorial-pull--violet {
  background: rgba(156, 39, 176, 0.05);
  border-top-color: #9c27b0;
  border-bottom-color: #9c27b0;
}
.mag-editorial-pull--violet p { color: #7b1fa2; }

.mag-editorial-pull--rainbow {
  background: linear-gradient(135deg, rgba(244,63,94,0.04), rgba(37,99,235,0.04));
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1;
  border-bottom: 2px solid transparent;
}
.mag-editorial-pull--rainbow p { color: #be185d; }

.mag-more-btn--purple:hover { background: #6d28d9; color: #fff; }

.mag-mini--dauble {
  border-left: 4px solid var(--card-violet);
  background: #faf5ff;
}

.mag-mini--dauble:hover { background: #f3e8ff; }

.mag-faded-border--purple {
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--purple) 20%, var(--purple) 80%, transparent 100%);
  margin: 1rem 0 1.5rem;
}

/* ============================================
   DAUBLE ATTRIBUTION FOOTER
   ============================================ */

.dauble-attribution {
  max-width: 520px;
  margin: 1rem auto 0;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

.dauble-attribution__copy {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
}

.dauble-attribution__wordle {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  line-height: 1.6;
  margin-bottom: 0.5rem;
  font-style: italic;
  font-family: var(--font-sans);
}

.dauble-attribution__links {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-sans);
}

.dauble-attribution__links a {
  color: rgba(212,175,55,0.5);
  text-decoration: none;
}

.dauble-attribution__links a:hover {
  color: rgba(212,175,55,0.8);
}

/* ── CROSSWORD COMING SOON ── */
.pnm-coming-soon { text-align: center; }

.pnm-coming-soon__grid {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0.75rem 0 0.25rem;
}

.pnm-csq {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 18px;
  border: 2px solid var(--border);
  background: #fff;
  color: var(--black);
}

.pnm-csq--b { border-color: var(--pink);   color: var(--pink); }
.pnm-csq--i { border-color: var(--purple); color: var(--purple); }
.pnm-csq--n { border-color: var(--cyan);   color: var(--cyan); }
.pnm-csq--g { border-color: var(--teal);   color: var(--teal); }
.pnm-csq--o { border-color: var(--gold);   color: var(--gold); }

.mag-mini--violet {
  border-left: 4px solid var(--card-violet);
}
.mag-mini--violet:hover { background: #f5f0ff; }

.mag-mini-ad--featured .mag-mini-ad__content--tall {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mag-mini--rose  { border-left: 4px solid var(--card-rose); }
.mag-mini--rose:hover  { background: #fff1f2; }
.mag-mini--sky   { border-left: 4px solid var(--card-sky); }
.mag-mini--sky:hover   { background: #f0f9ff; }

.pnm-jeeves-stats {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.pnm-jeeves-stat {
  flex: 1;
  text-align: center;
  background: #fdf2f8;
  border: 1px solid var(--card-rose);
  padding: 0.4rem 0.25rem;
}
.pnm-jeeves-stat__val {
  display: block;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--pink);
  line-height: 1;
}
.pnm-jeeves-stat__lbl {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-top: 2px;
}

.mag-more-btn--pink {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
}
.mag-more-btn--pink:hover { background: #c0166e; }

/* ── BUTTON FONT OVERRIDE — all CTAs must be sans-serif readable ── */
.mag-more-btn,
.mag-picks-box__more,
.mag-picks-box__more a,
.pnm-did-you-know__link,
.mag-promo-box__link,
.mag-cover__continue,
.mag-mini__continue,
.daub-story-card__continue,
.bdir-card__link,
.bdir-feat-card__link,
.scam-check__btn,
.scam-check-full__btn,
.pb-replay-btn,
.submit-btn,
button,
[type="submit"] {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  letter-spacing: 0.3px;
}

.mag-contributor-cta__btn {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
}

.drop-cap--pink { color: var(--pink) !important; }
.drop-cap--cyan { color: var(--cyan) !important; }
.drop-cap--red  { color: var(--danger) !important; }

/* ============================================
   PICK N MIX DISCLAIMER
   ============================================ */

.pnm-disclaimer-section {
  background: #f5f0ff;
  padding: 1.5rem;
  width: 100%;
}

.pnm-disclaimer {
  max-width: 900px;
  margin: 0 auto;
}

.pnm-disclaimer__title {
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 1rem;
  text-align: center;
}

.pnm-disclaimer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 640px) {
  .pnm-disclaimer__cols { grid-template-columns: 1fr; gap: 0; }
}

.pnm-disclaimer__text {
  font-size: 14px;
  color: #222;
  line-height: 1.8;
  margin-bottom: 0.75rem;
}

.pnm-disclaimer__text a {
  color: var(--purple);
  text-decoration: underline;
}

.pnm-disclaimer__text strong {
  color: #000;
}

/* ============================================
   PICK N MIX — FULL WIDTH SCOREBOARD
   ============================================ */

.pnm-scoreboard-section {
  background: #faf7ff;
  padding: 1.5rem;
}

.pnm-scoreboard-full {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.pnm-scoreboard-full .pnm-scoreboard__name  { color: var(--dark); }
.pnm-scoreboard-full .pnm-scoreboard__score { color: var(--purple); }
.pnm-scoreboard-full .pnm-scoreboard__row   { border-bottom-color: var(--border); }

@media (max-width: 640px) {
  .pnm-scoreboard-full { grid-template-columns: 1fr; gap: 1rem; }
}

.pnm-jeeves-dyk {
  background: var(--black);
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 0;
}
.pnm-jeeves-dyk__label {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.3rem;
}
.pnm-jeeves-dyk__fact {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  font-style: italic;
  line-height: 1.6;
  margin: 0;
}

.pnm-jeeves-dyk {
  background: #1a1a1a;
  border-left: 3px solid var(--purple);
  padding: 0.6rem 0.75rem;
  margin: 0.5rem 0;
}

.pnm-jeeves-dyk__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.25rem;
}

.pnm-jeeves-dyk__fact {
  font-family: var(--font-editorial);
  font-size: 13px;
  font-style: italic;
  color: #f0e8d0;
  line-height: 1.55;
  margin: 0;
  min-height: 40px;
  transition: opacity 0.3s;
}

.dauble-tiles {
  display: inline-flex;
  gap: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

.dauble-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  border-radius: 2px;
  text-shadow: none;
  line-height: 1;
}

/* Compact ball row — used by the lotto hub strips and next-draw panel,
   the homepage lotto box and Dauble. Was a flat 28px, which held on a
   1440px monitor as stubbornly as on a phone; the base ball already
   scales 38 -> 48 -> 56px, so this now scales with it, just smaller.
   !important is kept because the base rules carry it at >=768px. */
.mag-lotto-mini__balls--sm .mag-lotto-mini__ball {
  width: 30px !important;
  height: 30px !important;
  font-size: 11px !important;
  margin: 1px !important;
}
@media (min-width: 641px) {
  .mag-lotto-mini__balls--sm .mag-lotto-mini__ball {
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
  }
}
@media (min-width: 768px) {
  .mag-lotto-mini__balls--sm .mag-lotto-mini__ball {
    width: 38px !important;
    height: 38px !important;
    font-size: 15px !important;
  }
}

.mag-lotto-sidebar__title {
  font-size: 11px !important;
  letter-spacing: 1px;
  margin: 0.5rem 0 0.25rem !important;
  color: var(--grey);
}

.pnm-jeeves-trivia img,
.pnm-jeeves-img {
  display: block;
  width: 220px;
  max-width: 75%;
  margin: 0.75rem auto 1rem;
  float: none;
}

@media (max-width: 640px) {
  .pnm-jeeves-trivia img,
  .pnm-jeeves-img {
    width: 100%;
    max-width: 100%;
  }
}

/* ============================================
   WORD SEARCH PREVIEW DESIGN
   ============================================ */

.ws-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 0.5rem 0;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 1px;
}

.ws-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  border-radius: 2px;
}

.ws-letter--faded {
  color: var(--border);
  font-size: 12px;
}

.ws-circled {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border: 2px solid var(--pink);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  min-width: 56px;
}

.ws-circled__inner {
  color: var(--black);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* ============================================
   CROSSWORD PREVIEW DESIGN
   ============================================ */

.cw-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0.5rem 0;
}

.cw-row {
  display: flex;
  gap: 2px;
}

.cw-cell {
  width: 20px;
  height: 20px;
  border: 1px solid var(--card-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-sans);
  color: var(--black);
  background: #fff;
}

.cw-cell--blank {
  background: var(--black);
  border-color: var(--black);
  color: transparent;
}

.cw-cell--active {
  background: var(--card-sky);
  color: #fff;
}

.pnm-scoreboard__game--green { background: #2e7d32; color: #fff; }
.pnm-pos--green { background: #2e7d32 !important; }

.mag-mini--green { border-left: 4px solid #2e7d32; }
.mag-mini--green:hover { background: #f0fdf0; }

/* ── LOTTO CARDS GRID ─────────────────────────────────────────────────────── */
.lotto-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 640px) {
  .lotto-cards-grid {
    grid-template-columns: 1fr;
    padding: 0 0.75rem;
  }
}

/* ── LOTTO DISCLAIMER RESPONSIVE ──────────────────────────────────────────── */
.lotto-disclaimer--mobile { display: block; }
.lotto-disclaimer--desktop { display: none; }
@media (min-width: 768px) {
  .lotto-disclaimer--mobile { display: none; }
  .lotto-disclaimer--desktop { display: block; }
}

/* ── LOTTO CARD RIGHT PANEL - BIGGER ON DESKTOP ───────────────────────────── */
@media (min-width: 768px) {
  .lotto-cards-grid .lotto-card-right {
    width: 160px !important;
  }
  .lotto-card-jackpot {
    font-size: 1.3rem !important;
  }
  .lotto-card-countdown {
    font-size: 13px !important;
  }
  .lotto-card-next-label {
    font-size: 13px !important;
  }
}

/* ── LOTTO PAGE STYLES ─────────────────────────────────────────────────────── */
:root {
  --green-lotto: #16A34A;
  --lotto-peach: #E8913A;
  /* Single accent for the lotto hub — see the "one colour, black headings"
     block at the end of this file. */
  --lotto-rose: #F43F5E;
}

.lotto-info-box {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.85rem 1rem;
}

.lotto-info-box p {
  font-size: 14px;
  color: var(--grey);
  line-height: 1.7;
  margin: 0 0 0.5rem;
}

.lotto-info-box strong {
  color: var(--dark);
}

.mag-label--green {
  background: var(--green-lotto);
}

/* ── LOTTO GAME PAGE EDITORIAL PULL — PINK (UK Lotto) ─────────────────────── */
.mag-editorial-pull--pink {
  background: rgba(244, 63, 94, 0.05);
  border-top-color: var(--pink);
  border-bottom-color: var(--pink);
}

/* ── LOTTO GAME PAGE — PAST DRAWS GRID ──────────────────────────────────────── */
.lotto-past-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.lotto-past-hide-desktop { display: none; }
.lotto-past-hide-mobile  { display: block; }

@media (max-width: 640px) {
  .lotto-past-grid {
    grid-template-columns: 1fr;
    padding: 0 0.75rem;
  }
  .lotto-past-hide-mobile  { display: none; }
  .lotto-past-hide-desktop { display: block; }
}


/* ── LOTTO GAME PAGE — FULL WIDTH CARD ON MOBILE ──────────────────────────── */
.lotto-game-card-wrap { width: 100%; }

@media (max-width: 640px) {
  .lotto-game-card-wrap {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -47vw;
    margin-right: -47vw;
    width: 94vw;
    margin-bottom: 1.5rem;
  }
}

/* ── LOTTO GAME PAGE — QUICK STATS MOBILE REORDER ───────────────────────── */
.lotto-quick-stats-mobile { display: none; }
.lotto-quick-stats-sidebar { display: block; }

@media (max-width: 640px) {
  .lotto-quick-stats-mobile  { display: block; margin-bottom: 1rem; }
  .lotto-quick-stats-sidebar { display: none; }
}

/* ── LOTTO GAME PAGE — QUICK STATS RESPONSIVE ───────────────────────────── */
.lotto-stats-desktop        { display: block; }
.lotto-stats-mobile         { display: none; }
.lotto-turn-page-desktop    { display: block; }
.lotto-turn-page-mobile     { display: none; }

@media (max-width: 640px) {
  .lotto-stats-desktop      { display: none; }
  .lotto-stats-mobile       { display: block; }
  .lotto-turn-page-desktop  { display: none; }
  .lotto-turn-page-mobile   { display: block; }
}

/* ── LOTTO GAME — LATEST DRAW ROW ───────────────────────────────── */
.gz-lgt-draw-row .mag-col {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (max-width: 640px) {
  .lotto-draw-row {
    display: block;
  }
}

/* ── LOTTO STAT ROW — Quick Stats rows ──────────────────────────────────── */
.lotto-stat-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.lotto-stat-row--last {
  border-bottom: none;
}
.lotto-stat-row span:first-child { font-size: 12px; color: var(--grey); }
.lotto-stat-row span:last-child  { font-size: 12px; font-weight: 700; color: var(--dark); }

@media (min-width: 641px) {
  .lotto-stat-row span:first-child { font-size: 14px; }
  .lotto-stat-row span:last-child  { font-size: 14px; }
}

/* ── LOTTO LUCKY DIP BOX — shared wrapper ───────────────────────────────── */
.lotto-lucky-dip-box {
  text-align: center;
  margin-bottom: 0.75rem;
  background: var(--bg);
  border: 1px solid #eee;
  padding: 0.75rem;
}

/* ── LOTTO HUB — PEACH THEME ─────────────────────────────────────────────── */
.mag-faded-border--peach {
  background: linear-gradient(90deg, transparent 0%, #E8913A 20%, #E8913A 80%, transparent 100%);
}
.mag-greeting--peach {
  border-top-color: #E8913A;
  border-bottom-color: #E8913A;
}
.mag-greeting--peach .mag-greeting__h1,
.mag-greeting--peach .mag-greeting__stars,
.mag-greeting--peach .mag-greeting__stars-bottom { color: #E8913A; }
.mag-more-btn--peach { background: #E8913A; display: block; margin-top: 0.75rem; }
.mag-more-btn--peach:hover { background: #c77a2e; }


/* ── LOTTO SECTION INTRO ─────────────────────────────────────────────────── */
.lotto-section-intro {
  text-align: center;
  margin: 0.5rem 0 1.25rem;
  padding: 0 1rem;
  font-size: 16px;
  color: var(--dark);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .lotto-section-intro {
    padding: 0 4rem;
    font-size: 16px;
  }
}
.lotto-section-intro p {
  margin: 0 0 0.45rem;
  /* Up from 15px. This is the standfirst that introduces a whole section,
     so it should read a step above body copy rather than level with it.
     Applies to all 65 uses site-wide — deliberately, so every section
     intro stays consistent. */
  font-size: 16.5px;
  color: var(--dark);
  line-height: 1.6;
  font-weight: 500;
}
.lotto-section-intro p a {
  /* Colour comes from the site-wide body-link rule above; this only
     adjusts weight and size for the larger standfirst text. */
  font-weight: 800;
  font-size: 1.05em;
}
.lotto-section-intro .lotto-section-intro__stars {
  /* Follows the page theme, falling back to the lotto peach. It was
     hardcoded to --lotto-peach, so an arcade page got amber stars in the
     middle of a cyan section. Every page that sets --gz-game-color now
     gets stars to match; the lotto pages are unchanged, because they do
     not set it and land on the fallback. */
  color: var(--gz-game-color, var(--lotto-peach));
}

/* ── Directory intro ──────────────────────────────────────────────
   Sits between the #bingo-directory anchor and the first platform
   section on bingo-sites.php. Explains "sites grouped by network"
   to cold readers before they hit "✦ VIRTUE FUSION ✦". */
.gz-directory-intro {
  text-align: center;
  max-width: 680px;
  margin: 2rem auto 1.75rem;
  padding: 0 1rem;
}
.gz-directory-intro__stars {
  color: var(--pink);
  margin: 0.75rem 0 1rem;
}
.gz-directory-intro__body {
  font-size: 15px;
  color: var(--dark);
  line-height: 1.65;
  margin: 0 0 0.6rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .gz-directory-intro__body { font-size: 16px; }
}
.gz-directory-intro__body a {
  color: var(--pink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 21, 133, 0.3);
}
.gz-directory-intro__body a:hover {
  border-bottom-color: var(--pink);
}

/* ── LOTTO FAQ ───────────────────────────────────────────────────────────── */
.lotto-faq__item {
  width: 100%;
  border-bottom: 1px solid var(--border);
  margin-top: 0;
}

.lotto-faq__item:first-of-type {
  border-top: 1px solid var(--border);
  margin-top: 0.75rem;
}

.lotto-faq__question {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  padding: 1rem 2rem 1rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  line-height: 1.4;
}

.lotto-faq__question::-webkit-details-marker { display: none; }

.lotto-faq__question::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 300;
  color: var(--lotto-peach);
  line-height: 1;
}

details[open] .lotto-faq__question::after {
  content: '−';
}

.lotto-faq__answer {
  padding: 0 0 1rem;
}

.lotto-faq__answer p {
  font-size: 15px;
  color: var(--grey);
  line-height: 1.7;
  margin: 0;
}

/* ── AD BAR above nav ────────────────────────────────────────────────────── */
.mag-mini-ad--nav {
  margin: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  text-align: center;
}

/* ============================================
   INDEX.PHP — HOMEPAGE CLASSES
   Replaces all inline styles. March 2026.
   ============================================ */

/* Section 1 top border */
.mag-section--home { background: #fff; }

/* Snake wrap — animated label border */
.gz-snake-wrap {
  display: inline-block;
  position: relative;
  padding: 3px;
  border-radius: 4px;
  margin-bottom: 0.75rem;
  background: transparent;
  transform: rotate(-2deg);
}
.gz-snake-wrap .mag-label {
  display: block;
  position: relative;
  z-index: 1;
  border: none;
  margin: 0;
  transform: none;
}
.gz-snake-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  padding: 2px;
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, var(--pink) 60deg, #9c27b0 120deg, var(--cyan) 180deg, #F43F5E 240deg, #fff 300deg, var(--pink) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: gz-snake 2s linear infinite;
}
.gz-snake-wrap--cyan::before {
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, var(--cyan) 60deg, #00BCD4 120deg, #0097A7 180deg, #67e8f9 240deg, #fff 300deg, var(--cyan) 360deg);
}
.gz-snake-wrap--peach::before {
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, var(--lotto-peach) 60deg, #d4803a 120deg, #c77a2e 180deg, #f0a854 240deg, #fff 300deg, var(--lotto-peach) 360deg);
}
.gz-snake-wrap--purple::before {
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, var(--purple) 60deg, #7c3aed 120deg, var(--pink) 180deg, #c084fc 240deg, #fff 300deg, var(--purple) 360deg);
}
.gz-snake-wrap--peach::before {
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, var(--lotto-peach) 60deg, #d4803a 120deg, #c77a2e 180deg, #f0a854 240deg, #fff 300deg, var(--lotto-peach) 360deg);
}
@property --gz-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes gz-snake {
  to { --gz-angle: 360deg; }
}
@keyframes gz-spin {
  to { --gz-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .gz-snake-wrap::before { animation: none; }
}
.gz-snake-wrap--cyan   { background: transparent; }
.gz-snake-wrap--purple { background: transparent; }
.gz-snake-wrap--peach  { background: transparent; }
.gz-snake-wrap--rotated { transform: rotate(-2deg); }

/* Safe site button */
.gz-safe-btn {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(135deg, #C71585 0%, #9c27b0 50%, #E91E8C 100%);
  background-size: 200% 200%;
  color: #fff;
  font-family: var(--font-editorial);
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  padding: 0.85rem 1.25rem;
  text-align: center;
  text-decoration: none;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  clear: both;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(199, 21, 133, 0.35), 0 0 30px rgba(199, 21, 133, 0.15);
  animation: gz-btn-glow 2.5s ease-in-out infinite, gz-btn-gradient 4s ease infinite;
  transition: transform 0.15s, box-shadow 0.15s;
  letter-spacing: 0.3px;
}
.gz-safe-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: gz-btn-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}
.gz-safe-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(199, 21, 133, 0.5), 0 0 40px rgba(199, 21, 133, 0.25);
}
@keyframes gz-btn-shimmer {
  0% { left: -100%; }
  50% { left: 120%; }
  100% { left: 120%; }
}
@keyframes gz-btn-glow {
  0%, 100% { box-shadow: 0 4px 18px rgba(199, 21, 133, 0.35), 0 0 30px rgba(199, 21, 133, 0.15); }
  50% { box-shadow: 0 4px 24px rgba(199, 21, 133, 0.5), 0 0 45px rgba(199, 21, 133, 0.25); }
}
@keyframes gz-btn-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (min-width: 768px) {
  .gz-safe-btn {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
  }
}

/* End-of-guide CTA row: smaller Visit button + Back to Directory, then a
   border divider before the Leave a Review snake. */
.gz-brand-endcta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 1.5rem auto 0;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.gz-safe-btn.gz-safe-btn--compact {
  display: inline-block;
  width: auto;
  min-width: 220px;
  max-width: 90%;
  font-size: 15px;
  padding: 0.6rem 1.5rem;
  margin: 0;
}
.gz-brand-backdir {
  display: inline-block;
  font-family: var(--font-editorial);
  font-size: 16.5px;
  font-weight: 700;
  font-style: normal;
  color: #C71585;
  text-decoration: none;
  letter-spacing: 0.2px;
  padding: 0.35rem 0.4rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.gz-brand-backdir:hover {
  color: #E91E8C;
  border-bottom-color: #E91E8C;
}
@media (max-width: 600px) {
  .gz-brand-backdir { font-size: 16px; }
}

/* CTA link stack */
.gz-cta-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
@media (min-width: 768px) {
  .gz-cta-links a { font-size: 16px !important; }
}

/* CTA link variants */
.gz-cta-link {
  display: block;
  margin: 1rem 0 1.75rem;
  padding: 0.75rem 1rem;
  line-height: 1.3;
  font-family: var(--font-editorial);
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  text-decoration: none;
}
.gz-cta-link--pink {
  border: 2px solid var(--pink);
  color: var(--pink);
}
.gz-cta-link--purple {
  border: 2px solid var(--purple);
  color: var(--purple);
}
.gz-cta-link--multi {
  border: 2px solid transparent;
  border-image: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1;
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gz-cta-link--peach {
  border: 2px solid var(--lotto-peach);
  color: var(--lotto-peach);
  line-height: 1.7;
}

/* Mini article colour variants */
.gz-mini--pink   { border-left: none; background: linear-gradient(180deg, #F43F5E, #C71585, #E91E63, #fb7185) left/4px 100% no-repeat, #fdf4f7; }
.gz-mini--cyan   { border-left: 4px solid var(--cyan); background: #f0fbfd; }
.gz-mini--darts  { border-left: none; background: linear-gradient(180deg,#16A34A,#00BCD4,#4ade80,#0891b2) left/4px 100% no-repeat, #f2faf5; }
.gz-mini--sister { border-left: none; background: linear-gradient(180deg,#ec4899,#C71585,#9c27b0,#6366f1,#3b82f6) left/4px 100% no-repeat, #fdf6fc; }

/* Shiny article-category variants — used for Explore More cards on /darts/ */
.gz-mini--feature   { border-left: none; background: linear-gradient(180deg,#ec4899,#E91E8C,#d946ef,#fbbf24) left/4px 100% no-repeat, #fff5fa; }
.gz-mini--essay     { border-left: none; background: linear-gradient(180deg,#a855f7,#8b5cf6,#6366f1,#06b6d4) left/4px 100% no-repeat, #faf5ff; }
.gz-mini--beginners { border-left: none; background: linear-gradient(180deg,#fbbf24,#f97316,#ef4444,#ec4899) left/4px 100% no-repeat, #fff8f0; }
.gz-mini--rankings  { border-left: none; background: linear-gradient(180deg,#D97706,#B45309,#92400E,#7C3AED) left/4px 100% no-repeat, #FFFBEB; }
.gz-mini--events    { border-left: none; background: linear-gradient(180deg,#15803d,#16A34A,#22c55e,#4ade80) left/4px 100% no-repeat, #f0fdf4; }
/* Party bingo events — hot pink → purple → cyan gradient, mirrors the
   party-bingo-events.php snake-label and hero palette. Warm to cool to
   scream "loud, silly, sociable" like the party events copy does. */
.gz-mini--party     { border-left: none; background: linear-gradient(180deg, #F43F5E, #9c27b0 40%, #00BCD4 75%, #00E676) left/4px 100% no-repeat, #fdf2f8; }
.gz-mini--party:hover { border-left-color: #9c27b0; }

/* Coming Soon placeholder card — muted, dashed left stripe signals work-in-progress */
.gz-mini--soon {
  border-left: 4px dashed #c0b6a8;
  background: #f6f3ee;
  cursor: not-allowed;
  opacity: 0.85;
}
.gz-mini--soon:hover { opacity: 1; background: #efeae0; }
.gz-mini--soon .mag-mini__title { color: #6b6154; }
.gz-mini--soon .mag-mini__teaser { color: #8a8070; font-style: italic; }
.gz-mini--daub      { border-left: none; background: linear-gradient(180deg,#22d3ee,#06b6d4,#0891b2,#3b82f6) left/4px 100% no-repeat, #f0fbff; }
.gz-mini--slots { border-left: none; background: linear-gradient(180deg, #DC2626, #EF4444, #DC2626, #B91C1C) left/4px 100% no-repeat, #fef2f2; }
.gz-mini--purple { border-left: none; background: linear-gradient(180deg, #9c27b0, #7C3AED, #9c27b0, #c084fc) left/4px 100% no-repeat, #fdf4ff; }
/* Pick 'n' Mix — its own card rather than the generic purple, which it
   shared with the Vault.

   Colours come from Dauble's own palette (#F43F5E, #9c27b0, #00BCD4), not
   a confectionery ramp. The first pass used candy colours to match the
   name, which is the wrong instinct on a gambling site: the UKGC bars
   content with particular appeal to under-18s, and sweet-shop cues are
   squarely that. It is word games and quizzes, so it should look like
   word games and quizzes. */
.gz-mini--pnm { border-left: none; background: linear-gradient(180deg, #F43F5E, #9c27b0, #00BCD4, #9c27b0) left/4px 100% no-repeat, #faf7ff; }
/* The Vault — burnt-orange theme (matches vault.php --gz-game-color:#C1440E).
   Used on the vault EXPLORE MORE cards site-wide. */
.gz-mini--vault { border-left: none; background: linear-gradient(180deg, #8F2E08, #C1440E, #E8751A, #8F2E08) left/4px 100% no-repeat, #fdf6f0; }
.gz-mini--green  { border-left: none; background: linear-gradient(180deg, #16A34A, #4ade80, #16A34A, #065f46) left/4px 100% no-repeat, #f0fdf4; }
.gz-mini--danger { border-left: 4px solid var(--danger); background: #fff5f5; }

.gz-mini-cat--pink    { background: linear-gradient(135deg, #F43F5E, #C71585, #E91E63); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(199,21,133,0.3); }
.gz-mini-cat--cyan    { background: var(--cyan);   color: #fff; padding: 2px 6px; border-radius: 2px; }
.gz-mini-cat--violet  { background: var(--card-violet);  color: #fff; padding: 2px 6px; border-radius: 2px; }
.gz-mini-cat--pnm     { background: linear-gradient(135deg, #F43F5E, #9c27b0, #00BCD4); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(156,39,176,0.3); }
.gz-mini-cat--vault   { background: linear-gradient(135deg, #8F2E08, #C1440E, #E8751A); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(193,68,14,0.35); }
.gz-mini-cat--darts   { background: linear-gradient(135deg,#16A34A,#00BCD4,#4ade80,#0891b2); color: #fff; padding: 2px 6px; border-radius: 2px; }

/* Shiny category badges — pair with .gz-mini--feature / --essay / --beginners */
.gz-mini-cat--feature   { background: linear-gradient(135deg,#ec4899,#E91E8C,#d946ef,#fbbf24); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(233,30,140,0.3); }
.gz-mini-cat--essay     { background: linear-gradient(135deg,#a855f7,#8b5cf6,#6366f1,#06b6d4); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(139,92,246,0.3); }
.gz-mini-cat--beginners { background: linear-gradient(135deg,#fbbf24,#f97316,#ef4444,#ec4899); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(249,115,22,0.3); }
.gz-mini-cat--rankings  { background: linear-gradient(135deg,#D97706,#B45309,#92400E,#7C3AED); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(217,119,6,0.3); }
.gz-mini-cat--events    { background: linear-gradient(135deg,#15803d,#16A34A,#22c55e,#4ade80); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(22,163,74,0.35); }
/* Party badge — referenced by index.php, bingo-club.php and the lotto hub's
   explore-more card, but never defined, so it has been rendering unstyled.
   Stops match .gz-mini--party's own left-edge gradient (line 7216) so the
   badge and the card stripe are the same ramp. */
.gz-mini-cat--party     { background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#00E676); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(156,39,176,0.3); }

/* Matching Coming Soon badge — muted, dashed outline to echo the card stripe */
.gz-mini-cat--soon { background: #ded6c8; color: #6b6154; font-weight: 800; padding: 2px 8px; border-radius: 2px; border: 1px dashed #a89f90; letter-spacing: 0.04em; }
.gz-mini-cat--daub      { background: linear-gradient(135deg,#22d3ee,#06b6d4,#0891b2,#3b82f6); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(6,182,212,0.3); }
.gz-mini-cat--slots { background: #DC2626; color: #fff; padding: 2px 6px; border-radius: 2px; font-weight: 900; }
.gz-mini-cat--rose    { color: #fff; background: var(--card-rose); font-weight: 800; padding: 2px 8px; display: inline-block; margin-bottom: 0.4rem; }
.gz-mini-cat--green   { color: #fff; background: #2e7d32; font-weight: 800; padding: 2px 8px; display: inline-block; margin-bottom: 0.4rem; }
.gz-mini-cat--sky     { color: #fff; background: var(--card-sky); font-weight: 800; padding: 2px 8px; display: inline-block; margin-bottom: 0.4rem; }

.gz-mini-continue--pink   { color: var(--pink); }
.gz-mini-continue--cyan   { color: var(--cyan); }
.gz-mini-continue--sister { color: #9c27b0; }
.gz-mini-continue--darts  { color: #16A34A; }
.gz-mini-continue--slots  { color: #B8860B; }
/* Arcade category cards — the continue line takes the darkest stop of its
   card's cat-pill gradient, so it reads as part of the same card and stays
   legible on white. Matches how --slots was already done. */
.gz-mini-continue--slingo    { color: #5B21B6; }
.gz-mini-continue--scratch   { color: #e11d48; }
.gz-mini-continue--providers { color: #E91E63; }
.gz-mini-continue--pnm       { color: #9c27b0; }
.gz-mini-continue--vault     { color: #C1440E; }
.gz-mini-continue--danger { color: var(--danger); }
.gz-mini-continue--rose   { color: var(--card-rose); }
.gz-mini-continue--sky    { color: var(--card-sky); }
.gz-mini-continue--success { color: var(--success); }

/* Ad placeholder */
.gz-ad-placeholder {
  border: 2px dashed #ccc;
  border-radius: 0;
  padding: 3rem 1.25rem;
  text-align: center;
  margin: 10px 0;
  background: var(--bg);
}
.gz-ad-placeholder__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-light);
  letter-spacing: 2px;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.gz-ad-placeholder__text {
  font-size: 12px;
  color: var(--grey-light);
  margin: 0;
}

/* Sister Sites box */
.gz-sister-box {
  border: none;
  padding: 3px;
  background: var(--pink);
  margin-top: 10px;
}
.gz-sister-inner {
  background: linear-gradient(135deg,#1a0a2e 0%,#2d1155 100%);
  padding: 1.25rem;
  text-align: center;
}
.gz-sister-desc {
  font-family: var(--font-editorial);
  font-size: 15px;
  font-style: italic;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  margin: 0.5rem 0 0.4rem;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .gz-sister-desc { font-size: 18px; line-height: 1.5; }
}
.gz-sister-thought {
  position: relative;
  min-height: 48px;
  margin: 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
}
/* Thought bubble words */
.gz-thought { font-family: var(--font-editorial); font-style: italic; font-weight: 700; display: inline-block; }
.gz-thought--pink   { font-size: 17px; color: var(--pink); opacity: 0.9; transform: rotate(-4deg); }
.gz-thought--white1 { font-size: 14px; color: #fff; transform: rotate(2deg); }
.gz-thought--cyan   { font-size: 14px; color: var(--cyan); opacity: 0.9; transform: rotate(-2deg); }
.gz-thought--white2 { font-size: 14px; color: #fff; transform: rotate(3deg); }
.gz-thought--purple { font-size: 15px; color: #9c27b0; opacity: 0.9; transform: rotate(-3deg); }
.gz-thought--red    { font-size: 17px; color: var(--danger); opacity: 0.9; transform: rotate(-4deg); }
@media (min-width: 768px) {
  .gz-thought--pink   { font-size: 21px; }
  .gz-thought--white1, .gz-thought--cyan, .gz-thought--white2 { font-size: 17px; }
  .gz-thought--purple { font-size: 17px; }
  .gz-thought--red    { font-size: 21px; }
}
.gz-sister-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center;
}
.gz-sister-18 {
  background: #fff;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
}
.gz-bga-link {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

/* Party Events box */
.gz-party-box {
  border: none;
  padding: 3px;
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
}
.gz-party-inner {
  background: linear-gradient(135deg,#1a0010 0%,#0a1a1a 100%);
  padding: 1.25rem;
  text-align: center;
}
.gz-party-label {
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
  color: #fff;
  border: none;
  display: block;
  text-align: center;
  letter-spacing: 2px;
}
.gz-party-list-link {
  display: block;
  margin-top: 0.5rem;
  font-size: 12px;
  text-align: center;
}
.gz-party-list-link a {
  color: rgba(255,255,255,0.8);
  font-weight: 700;
  text-decoration: none;
}
.gz-city-pill {
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.2);
}
@media (min-width: 768px) {
  .gz-city-pill  { font-size: 10px !important; padding: 3px 8px !important; }
  .gz-party-text { font-size: 17px !important; margin-bottom: 1rem !important; }
  .gz-party-pills { margin-bottom: 1.25rem !important; gap: 8px !important; }
}
.gz-party-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-bottom: 12px;
}
.gz-party-link {
  background: linear-gradient(135deg,var(--pink),#9c27b0);
  display: block;
}

/* Local Bingo Hall box */
.gz-local-box {
  border-color: var(--cyan);
  background: linear-gradient(135deg,#0a1a1a 0%,#0d2d2d 100%);
  margin-top: 10px;
  text-align: center;
}
.gz-local-title {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 800;
  font-style: italic;
  color: #fff;
  margin: 1rem 0 0.6rem;
  line-height: 1.3;
}
.gz-local-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  margin: 0 0 1.2rem;
  line-height: 1.5;
  font-weight: 400;
}
.gz-local-link { background: linear-gradient(135deg, #EC4899 0%, #7C3AED 50%, #2563EB 100%); display: block; }

/* Blue label pill — matches the /bingo-clubs/ page inline theme so any
   sidebar / homepage reference to the clubs section uses the same palette. */
.mag-label--blue {
  background: linear-gradient(135deg, #EC4899 0%, #7C3AED 50%, #2563EB 100%);
  color: #fff;
}
@media (min-width: 768px) {
  .gz-local-title { font-size: 19px !important; }
  .gz-local-desc  { font-size: 16px !important; }
}

/* Lotto label — the peach variant of .mag-label.
   Sizing matches .mag-label (10px / 12px) rather than running 12px / 13px.
   It was a step larger than the 71 pages using the standard label, which
   made the lotto hub's heading look bigger than every other hub's. The
   sidebar panels override this deliberately further down; those stay. */
.gz-lotto-label {
  background: var(--lotto-peach);
  color: #fff;
  letter-spacing: 1.5px;
  font-size: 10px !important;
}
@media (min-width: 768px) {
  .gz-lotto-label { font-size: 12px !important; }
}
.gz-lotto-date {
  font-size: 11px;
  color: var(--grey-light);
  margin: 0.25rem 0;
}
@media (min-width: 768px) {
  .gz-lotto-date { font-size: 14px !important; color: rgba(255,255,255,0.85) !important; }
  .mag-lotto-mini__ball { width: 56px !important; height: 56px !important; font-size: 22px !important; }
}

/* Contributor CTA inline colour spans */
.gz-text-green-lotto { color: var(--green-lotto); }
.gz-text-event {
  background: linear-gradient(135deg,#F43F5E,#9c27b0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gz-text-cyan { color: var(--cyan); }

/* Jeeves take quiz margin */
.gz-quiz-btn { margin-top: 0.75rem; }

/* Dauble logo */
.gz-dauble-logo {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
  margin: 0.3rem 0 0.4rem;
}

/* Ad full override */
.gz-ad-full--flush { margin: 0; }
.gz-ad-full--100 { max-width: 100%; width: 100%; }

.gz-sister-link {
  background: linear-gradient(135deg,#F43F5E,#9c27b0);
  display: block;
  margin-bottom: 0.6rem;
}

/* Scam check box — party-box pattern (gradient border, dark inner, pills)
   with red / danger colours. Mirrors gz-party-* structure so it's a proper
   sibling variant that any page can use. */
.gz-scam-box  {
  border: none;
  padding: 3px;
  background: linear-gradient(135deg,#ef5350,#c62828,#8b1e1e,#dc2626,#c62828);
}
.gz-scam-inner {
  background: linear-gradient(135deg,#1a0a0a 0%,#2d0f0f 100%);
  padding: 1.25rem;
  text-align: center;
}
.gz-scam-label {
  background: linear-gradient(135deg,#ef5350,#c62828,#8b1e1e);
  color: #fff;
  border: none;
  display: block;
  text-align: center;
  letter-spacing: 2px;
}
.gz-scam-text { font-size: 16.5px; line-height: 1.5; }
.gz-scam-link {
  background: linear-gradient(135deg,var(--danger),#8b1e1e);
  display: block;
  font-size: 15px;
  padding: 0.75rem 1rem;
}
.gz-scam-list-link {
  display: block;
  margin-top: 0.6rem;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
  text-align: center;
}
.gz-scam-list-link a {
  color: rgba(255,255,255,0.8);
  font-weight: 700;
  text-decoration: none;
}
.gz-scam-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-bottom: 12px;
}
.gz-scam-pill {
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.2);
  display: inline-block;
}
@media (min-width: 768px) {
  .gz-scam-pill  { font-size: 14px !important; padding: 5px 14px !important; }
  .gz-scam-text  { font-size: 18px !important; margin-bottom: 1rem !important; }
  .gz-scam-pills { margin-bottom: 1.25rem !important; gap: 8px !important; }
}

/* Editor's Picks showcase box */
.gz-showcase        { border: 3px solid var(--pink); overflow: hidden; }
.gz-picks-header    { background: linear-gradient(135deg,#1a0010 0%,#2d0a1a 100%); padding: 1rem 1rem 0.75rem; text-align: center; }
.gz-picks-label     { background: linear-gradient(135deg,var(--pink),#9c27b0); color: #fff; border: none; display: block; text-align: center; letter-spacing: 3px; }
.gz-picks-title     { font-family: var(--font-editorial); font-size: 16px; font-style: italic; font-weight: 700; color: #fff; margin: 0.5rem 0 0.2rem; line-height: 1.2; }
@media (min-width: 768px) {
  .gz-picks-title { font-size: 20px !important; }
  .mag-picks-box .mag-pick-name { font-size: 16px !important; }
  .mag-pick-ball { width: 34px !important; height: 34px !important; font-size: 13px !important; }
}
.gz-picks-list-wrap { background: #fafafa; }
.gz-showcase-item-style { border-bottom: 1px solid #eee; transition: background 0.35s, opacity 0.35s; }
.gz-showcase__ball  { transition: box-shadow 0.35s, transform 0.35s; }
.gz-showcase__ukgc  { transition: color 0.35s, font-weight 0.35s; }

/* Nav scroll button */
.gz-nav-scroll-btn {
  background: #E91E8C;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  margin: 0 0.4rem;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 0 0 rgba(233, 30, 140, 0.6);
  animation: gz-nav-scroll-pulse 2s ease-out 2;
  animation-delay: 0.8s;
}
@keyframes gz-nav-scroll-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(233, 30, 140, 0.6); transform: translateX(0); }
  40%  { box-shadow: 0 0 0 6px rgba(233, 30, 140, 0); transform: translateX(2px); }
  60%  { transform: translateX(0); }
  100% { box-shadow: 0 0 0 0 rgba(233, 30, 140, 0); transform: translateX(0); }
}
.gz-nav-scroll-btn:hover,
.gz-nav-scroll-btn:focus-visible {
  background: #c2185b;
  animation: none;
}
@media (max-width: 540px) {
  .gz-nav-scroll-btn {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
}

/* Footer nav */
/* ═══════════════════════════════════════════════════════════════════
   SITE FOOTER NAV — magazine-quality 4-column layout
   ───────────────────────────────────────────────────────────────────
   Editorial-style columns with decorative underlines on the headings,
   subtle hover effects with a pink chevron on link focus. Featured
   "Write for Us" link gets a gentle accent badge. Responsive:
   4 columns desktop → 2 columns tablet → 1 column mobile.
   ═══════════════════════════════════════════════════════════════════ */
.gz-footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
  margin: 0;
  position: relative;
}
/* Thin separator lines above and below the nav — subtle gradient fades */
.gz-footer-nav::before,
.gz-footer-nav::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.gz-footer-nav::before { top: 0; }
.gz-footer-nav::after  { bottom: 0; }

@media (max-width: 768px) {
  .gz-footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}
@media (max-width: 420px) {
  .gz-footer-nav { grid-template-columns: 1fr; gap: 1.75rem; }
}

.gz-footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.gz-footer-col__title {
  margin: 0 0 0.9rem;
  font-family: var(--font-editorial);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
  padding-bottom: 0.6rem;
  position: relative;
  display: inline-block;
  align-self: flex-start;
}
/* Decorative underline — short double line under the heading */
.gz-footer-col__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--pink);
  box-shadow: 0 4px 0 -1px rgba(231,45,170,0.35);
}

.gz-footer-link {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  padding: 0.25rem 0;
  line-height: 1.4;
  position: relative;
  transition: color 0.18s ease, transform 0.18s ease;
  width: fit-content;
}
.gz-footer-link::before {
  content: "›";
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--pink);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  font-weight: 700;
}
.gz-footer-link:hover,
.gz-footer-link:focus-visible {
  color: #fff;
  transform: translateX(2px);
}
.gz-footer-link:hover::before,
.gz-footer-link:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

/* Featured link — "Write for Us" */
.gz-footer-link--feature {
  color: var(--pink);
  font-weight: 700;
  padding: 0.3rem 0;
}
.gz-footer-link--feature::before {
  content: "✦";
  color: var(--pink);
  opacity: 1;
  transform: translateX(0);
  margin-right: 0.5rem;
  animation: gz-footer-twinkle 3.5s ease-in-out infinite;
}
.gz-footer-link--feature:hover,
.gz-footer-link--feature:focus-visible {
  color: var(--pink-light);
}
.gz-footer-link--feature:hover::before,
.gz-footer-link--feature:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}
@keyframes gz-footer-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.9); }
}

/* Safety link — green to reinforce responsible-gambling signal */
.gz-footer-link--safety {
  color: #7eff9e;
  font-weight: 600;
}
.gz-footer-link--safety::before { color: #7eff9e; }
.gz-footer-link--safety:hover,
.gz-footer-link--safety:focus-visible { color: #b5ffc7; }
.gz-footer-link--safety:hover::before { color: #b5ffc7; }

/* ═══════════════════════════════════════════════════════════════════
   SITE FOOTER — column colour coding + ✦ star flourish dividers
   ───────────────────────────────────────────────────────────────────
   Adds to (does NOT replace) the existing footer nav styling above.
   Each column now has its own accent colour so the four groups read
   as distinct blocks instead of one pink wash:
     • Brand      → pink  (house colour)
     • Involved   → mauve (opportunities / editorial)
     • Safety     → green (responsible gambling)
     • Legal      → teal  (trust / neutral)
   Decorative ✦ ✦ ✦ flourishes wrap the nav top and bottom, matching
   the star motif used in Woman of the Day and Write for Us labels.
   ═══════════════════════════════════════════════════════════════════ */
.gz-footer-flourish {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem 1.5rem 0;
}
.gz-footer-flourish::before,
.gz-footer-flourish::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--pink) 50%, transparent 100%);
}
.gz-footer-flourish span {
  color: var(--pink);
  font-size: 15px;
  letter-spacing: 0.4em;
  padding-right: 0.4em; /* kill trailing whitespace after last ✦ */
}

/* Each column gets a tinted bg + left accent in its own colour */
.gz-footer-col {
  padding: 1rem 1rem 1.1rem;
  background: rgba(255,255,255,0.025);
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: background 0.15s;
}
.gz-footer-col:hover { background: rgba(255,255,255,0.045); }

.gz-footer-col--brand    { border-left-color: var(--pink); background: rgba(231,45,170,0.055); }
.gz-footer-col--brand    .gz-footer-col__title { color: var(--pink); }
.gz-footer-col--brand    .gz-footer-col__title::after { background: var(--pink); }

.gz-footer-col--involved { border-left-color: #c27ede; background: rgba(156,39,176,0.065); }
.gz-footer-col--involved .gz-footer-col__title { color: #e088ff; }
.gz-footer-col--involved .gz-footer-col__title::after { background: #e088ff; }

.gz-footer-col--safety   { border-left-color: #5ee68e; background: rgba(46,125,50,0.065); }
.gz-footer-col--safety   .gz-footer-col__title { color: #7eff9e; }
.gz-footer-col--safety   .gz-footer-col__title::after { background: #7eff9e; }

.gz-footer-col--legal    { border-left-color: #5ecae6; background: rgba(0,131,143,0.065); }
.gz-footer-col--legal    .gz-footer-col__title { color: #7edbee; }
.gz-footer-col--legal    .gz-footer-col__title::after { background: #7edbee; }

/* Since the flourishes take over as the dividers, suppress the old
   gradient separator lines above/below the nav */
.gz-footer-nav::before,
.gz-footer-nav::after { display: none; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .gz-footer-link,
  .gz-footer-link::before,
  .gz-footer-link--feature::before {
    transition: none;
    animation: none;
  }
}

/* Quiz Packs promo box — styled like sister sites */
.gz-quiz-pack-box {
  border: none;
  padding: 3px;
  background: var(--purple);
  margin-top: 1rem;
  border-radius: 4px;
}
.gz-quiz-pack-inner {
  background: linear-gradient(135deg, #1a0a2e 0%, #2d1155 100%);
  padding: 0.75rem 1rem;
  text-align: center;
  border-radius: 2px;
}
.gz-quiz-pack-text {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-style: italic;
  font-weight: 800;
  color: #fff;
  margin: 0.5rem 0 0.75rem;
  line-height: 1.2;
}
.gz-quiz-pack-desc {
  font-family: var(--font-editorial);
  font-size: 14px;
  font-style: italic;
  color: rgba(255,255,255,0.8);
  margin: 0 0 0.75rem;
  line-height: 1.3;
}
.gz-quiz-pack-link {
  background: var(--purple);
  display: block;
}
@media (min-width: 768px) {
  .gz-quiz-pack-text { font-size: 20px; }
  .gz-quiz-pack-desc { font-size: 16px; }
}

/* ============================================
   LOTTO-RESULTS.PHP CLASSES
   ============================================ */

/* Peach text colour */
.gz-text-peach { color: var(--lotto-peach); }

/* Lotto cover stars — peach coloured */
.gz-cover-stars--peach {
  color: var(--lotto-peach);
  text-align: center;
  font-size: 14px;
  letter-spacing: 8px;
}

/* Drop cap peach */
.drop-cap--peach { color: var(--lotto-peach); }

/* Lotto picks box */
.gz-lotto-picks-box {
  border-color: var(--lotto-peach);
}
.gz-lotto-picks-header {
  padding: 1rem 1rem 0;
}
.gz-lotto-picks-label {
  background: var(--black);
  color: #fff;
  border: 2px solid #16A34A;
  display: block;
  text-align: center;
}

/* Lotto disclaimer box */
.gz-lotto-info-box {
  margin-top: 10px;
}
.gz-lotto-info-p {
  font-size: clamp(13px, 3vw, 12px);
}

/* Lotto cards grid margins */
.gz-lotto-grid { margin: 0 0 2rem; }

/* Lotto card wrappers */
.gz-lotto-card-gradient {
  padding: 2px;
  border-radius: 8px;
  display: block;
  overflow: hidden;
}
.gz-lotto-card-inner {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gz-lotto-card-bordered {
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gz-lotto-card-row {
  display: flex;
  min-height: 160px;
  flex: 1;
}

/* Disclaimer paragraph */
.gz-lotto-disclaimer {
  margin: -1rem 0 1.5rem;
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}
.gz-lotto-disclaimer a { color: var(--grey-light); }

/* FAQ top margin */
.gz-lotto-faq-wrap { margin-top: 0; }

/* Mini article lotto variants */
.gz-mini--health {
  border-left: none;
  background: linear-gradient(180deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) left/4px 100% no-repeat, #fff;
}
.gz-mini--lotto-irish { border-left: 4px solid #16A34A; }
.gz-mini--lotto-national { border-left: 4px solid #F43F5E; }

.gz-mini-cat--health   { background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9); color: #fff; padding: 2px 6px; border-radius: 2px; }
.gz-mini-cat--lotto-irish    { background: var(--green-lotto); color: #fff; padding: 2px 6px; border-radius: 2px; }
.gz-mini-cat--lotto-national { background: var(--card-rose);   color: #fff; padding: 2px 6px; border-radius: 2px; }

.gz-mini-continue--lotto-irish    { color: var(--green-lotto); }
.gz-mini-continue--lotto-national { color: var(--card-rose); }
.gz-mini-continue--health         { color: var(--card-rose); }

/* Lucky Dip Hub */
.gz-lucky-dip-mascot {
  display: block;
  margin: 0 auto 0.75rem;
  width: 160px;
  float: none;
}
.gz-lucky-dip-sub-green { color: var(--green-lotto); font-weight: 800; }
.gz-lucky-dip-select {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  width: 100%;
  margin-bottom: 0.5rem;
  background: #fff;
}
.gz-lucky-dip-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  min-height: 32px;
  margin-bottom: 0.5rem;
}
.gz-lucky-dip-note {
  font-size: 12px;
  color: var(--grey-light);
  text-align: center;
  margin: 0.5rem 0 0;
  font-style: italic;
}
/* JS-generated balls inside lucky dip */
.gz-dip-ball {
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.gz-dip-ball--bonus {
  background: #333;
}
.gz-dip-divider {
  font-size: 10px;
  color: var(--grey-light);
  align-self: center;
  margin: 0 2px;
}

/* ============================================
   LOTTO INC FILES — SHARED CARD CLASSES
   ============================================ */

/* Card inner left column */
.gz-lotto-card-left {
  flex: 1;
  background: #fff;
  padding: 0.75rem;
  min-width: 0;
  overflow: visible;
  border-radius: 6px 0 0 6px;
}
.gz-lotto-card-date {
  font-size: clamp(12px,3.5vw,13px);
  font-weight: 800;
  color: #333;
  margin: 0 0 0.4rem;
}
.gz-lotto-card-draw-label {
  font-size: 10px;
  font-weight: 800;
  color: #FF6B00;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 4px 0 2px;
}
.gz-lotto-card-static-note {
  font-size: clamp(11px,3vw,12px);
  color: #777;
  margin: 0.2rem 0 0.5rem;
  line-height: 1.5;
}
.gz-lotto-card-play-row {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.gz-lotto-card-bet-badge {
  font-size: clamp(10px,2.5vw,10px);
  font-weight: 800;
  background: #1a1a1a;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.gz-lotto-card-play-link {
  display: inline-block;
  background: #fff;
  color: #333;
  font-size: clamp(11px,3vw,12px);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 18px;
  text-decoration: none;
}
.gz-lotto-card-sub-note {
  font-size: clamp(11px,3vw,12px);
  color: #777;
  margin: 0.4rem 0 0;
  line-height: 1.4;
}
.gz-lotto-card-results-link {
  display: block;
  font-size: clamp(11px,3vw,12px);
  color: #777;
  margin-top: 0.6rem;
  text-decoration: none;
}
/* Card inner right column */
.gz-lotto-card-next-label {
  font-size: clamp(12px,3vw,14px);
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 3px;
  opacity: 0.85;
}
.gz-lotto-card-next-day {
  font-family: var(--font-editorial);
  font-size: clamp(18px,5vw,22px);
  font-weight: 700;
  font-style: italic;
  color: #fff;
  margin: 0 0 7px;
  line-height: 1.2;
}
.gz-lotto-card-prize-box {
  background: #fff;
  border-radius: 8px;
  padding: 0.5rem 0.45rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
}
.gz-lotto-card-countdown-label {
  font-size: clamp(10px,2.5vw,10px);
  color: #777;
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gz-lotto-card-cutoff-note {
  font-size: 8px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 3px 0 0;
  line-height: 1;
}

/* 49s multi-draw layout */
.gz-49s-draw{margin:6px 0 2px;padding:4px 0;border-bottom:1px solid #f0f0f0}
.gz-49s-draw:last-of-type{border-bottom:none}
.gz-49s-draw__label{display:block;font-size:10px;font-weight:800;color:#FF6B00;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:3px}
.gz-49s-draw__time{font-weight:600;color:#999;font-size:9px;letter-spacing:0;text-transform:lowercase}
.gz-49s-draw__balls{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.gz-49s-draw__balls .mag-lotto-mini__ball{width:24px;height:24px;font-size:10px}
.gz-49s-draw__plus{font-size:10px;font-weight:700;color:#999;margin:0 1px}
@media(min-width:768px){.gz-49s-draw__balls .mag-lotto-mini__ball{width:28px;height:28px;font-size:11px}.gz-49s-draw__label{font-size:11px}}

/* 49s individual page multi-draw */
.gz-49s-page-draws{display:flex;flex-direction:column;gap:0;margin:0 0 1.5rem;border:2px solid var(--gz-game-color,#FF6B00);border-radius:8px;overflow:hidden}
.gz-49s-page-draw{padding:12px 14px;border-bottom:1px solid #f0e8e0}
.gz-49s-page-draw:last-child{border-bottom:none}
.gz-49s-page-draw--plus{background:#fafafa}
.gz-49s-page-draw--plus .gz-49s-page-draw__name{font-size:11px;color:#888}
.gz-49s-page-draw__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.gz-49s-page-draw__name{font-size:12px;font-weight:800;color:var(--gz-game-color,#FF6B00);text-transform:uppercase;letter-spacing:0.8px}
.gz-49s-page-draw__date{font-size:11px;color:#888;font-style:italic}
.gz-49s-page-draw__balls{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
@media(min-width:768px){.gz-49s-page-draws{flex-direction:row}.gz-49s-page-draw{flex:1;border-bottom:none;border-right:1px solid #f0e8e0}.gz-49s-page-draw:last-child{border-right:none}}

/* Ball render classes */
.gz-lotto-balls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.gz-lotto-bonus-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 5px;
}
.gz-lotto-ball {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
}
.gz-lotto-bonus-name {
  font-size: 10px;
  color: #888;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Lucky dip */
.gz-lucky-dip-btn {
  border: none;
  cursor: pointer;
  width: 100%;
}
.gz-lucky-dip-italic {
  font-style: italic;
  font-size: 11px;
  color: #888;
  margin-bottom: 0.5rem;
}
.gz-lucky-dip-balls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  min-height: 32px;
  margin-bottom: 0.5rem;
}
.gz-lucky-dip-ball {
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.gz-lucky-dip-separator {
  font-size: 10px;
  color: #888;
  align-self: center;
  margin: 0 2px;
}
.gz-lucky-dip-bonus-ball {
  background: #333;
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* Lucky dip mascot width */
.gz-lotto-dip-mascot { width: 160px; }
.gz-lotto-jackpot-label { margin: 0 0 6px; }

/* Lotto history block */
/* Full-width content padding — matches the left column's gz-col-pad-l
   so prose in full-width sections aligns with two-column content above.
   Use gz-fw-content on any full-width wrapper that needs consistent padding.
   gz-fw-content inherits the same padding plus vertical margin. */
.gz-fw-content,
.gz-fw-content { padding-left: 0.5rem; padding-right: 0.5rem; }
.gz-fw-content { margin: 1.5rem 0; }
@media (min-width: 768px) {
  .gz-fw-content,
  .gz-fw-content { padding-left: 1rem; padding-right: 1rem; }
}
/* Match full-width section padding to two-column gz-col-pad-l alignment */
.mag-section--faq,
.mag-section--darts > .gz-lotto-offers-grid,
.mag-section--darts > .gz-lotto-tc-box { padding-left: 0.5rem; padding-right: 0.5rem; }
@media (min-width: 768px) {
  .mag-section--faq,
  .mag-section--darts > .gz-lotto-offers-grid,
  .mag-section--darts > .gz-lotto-tc-box { padding-left: 1rem; padding-right: 1rem; }
}
.gz-fw-content__content { margin-top: 1rem; }

/* Lotto T&Cs grey bordered box */
.gz-lotto-tc-box {
  background: #faf9f6;
  border: none;
  border-top: 3px solid #C71585;
  border-radius: 0 0 8px 8px;
  padding: 1.25rem 1.25rem 1rem;
  margin: 1.25rem 0 1.5rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.gz-lotto-tc-box__18 {
  display: inline-block;
  background: #C71585;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 50%;
  text-align: center;
  margin-bottom: 0.5rem;
}
.gz-lotto-tc-box__headline {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin: 0 0 0.4rem;
}
.gz-lotto-tc-box__help {
  font-size: 12px;
  color: #666;
  margin: 0 0 0.5rem;
  line-height: 1.5;
}
.gz-lotto-tc-box__links {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.5rem;
}
.gz-lotto-tc-box__links a {
  font-size: 11px;
  font-weight: 700;
  color: #C71585 !important;
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  transition: background 0.15s;
}
.gz-lotto-tc-box__links a:hover {
  background: #fdf4f7;
}
.gz-lotto-tc-box__ukgc {
  font-size: 11px;
  color: #999;
  margin: 0;
}
.gz-lotto-tc-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}
.gz-lotto-tc-text a {
  color: #888;
}
.gz-lotto-bet-notice {
  border-left: 3px solid var(--lotto-peach, #7C3AED);
  background: #fffbf0;
  border-radius: 0 6px 6px 0;
  gap: 6px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0 0;
  width: 100%;
  box-sizing: border-box;
}
.gz-lotto-bet-notice p {
  font-size: 12px;
  color: #555;
  line-height: 1.6;
  margin: 0;
}
.gz-lotto-bet-notice strong {
  color: #333;
}
/* Body links are pink everywhere — this ran the lotto peach. */
.gz-lotto-bet-notice a {
  color: var(--pink);
}

/* BET notice box */
.gz-bet-notice {
  background: #fffbf0;
  border: 1px solid #16A34A;
  border-left: 4px solid #16A34A;
  border-radius: 4px;
  padding: 0.6rem 0.85rem;
  font-size: 12px;
  color: #555;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}
.gz-bet-notice strong {
  background: #1a1a1a;
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

/* Editorial subheadings inside mag-cover articles */
.mag-cover__subhead {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  color: var(--black);
  margin: 2rem 0 0.75rem;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .mag-cover__subhead { font-size: 26px; }
}
/* Smaller variant — for sub-subheads nested under a main section head
   (e.g. brand names within "The Big Three" on the companies hub).
   Drops italic + caps size so it reads as a secondary tier, not a
   near-duplicate of the main subhead. */
.mag-cover__subhead--sm {
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #C71585;
  margin: 1.5rem 0 0.4rem;
}
@media (min-width: 768px) {
  .mag-cover__subhead--sm { font-size: 16px; }
}

/* Lotto page snake label inner */
.gz-snake-label {
  display: block;
  position: relative;
  z-index: 1;
  border: none;
  margin: 0;
  transform: none;
}
.gz-snake-wrap--game .gz-snake-label,
.gz-snake-wrap--game .mag-label {
  background: var(--gz-game-color, var(--pink));
}

/* Ad placeholder with bottom margin */
.gz-ad-placeholder--mb {
  margin: 0 0 1.5rem;
}

/* Half-page / skyscraper ad slot — reserves 300x600 height to prevent CLS. */
.gz-ad-placeholder--skyscraper {
  min-height: 600px;
}

/* MPU rectangle ad slot — reserves 300x250 (IAB standard medium rectangle). */
.gz-ad-placeholder--mpu {
  min-height: 250px;
}

/* Lotto page ad — mobile left col / desktop right col */
.gz-ad-lotto--desktop { display: none; }
.gz-ad-lotto--mobile  { display: block; }
@media (min-width: 768px) {
  .gz-ad-lotto--mobile  { display: none; }
  .gz-ad-lotto--desktop { display: block; }
}

/* ============================================
   LOTTO GAME TEMPLATE CLASSES (gz-lgt-*)
   ============================================ */

/* Label — colour set via PHP inline (data-driven) */
.gz-lgt-label { color: #fff; display: inline-block; margin-bottom: 0.5rem; }

/* Stars row */
.gz-lgt-stars { text-align: center; font-size: 14px; letter-spacing: 8px; }
.gz-lgt-stars--mb { margin-bottom: 1rem; }

/* Visit button */
.gz-lgt-visit-btn { display: inline-block; margin-top: 0.75rem; }

/* Picks box variants */
.gz-lgt-picks-box  { margin-top: 10px; }
.gz-lgt-picks-plain { border: none; }
.gz-lgt-gradient-wrap { padding: 2px; margin-top: 10px; }
.gz-lgt-picks-header { padding: 1rem 1rem 0; }
.gz-lgt-picks-body   { padding: 0.75rem 1rem; }

/* Stats label — border colour set via PHP inline */
.gz-lgt-stats-label {
  background: #1a1a1a;
  color: #fff;
  border: 2px solid;
  display: block;
  text-align: center;
}

/* Stat rows */
.gz-lgt-stat-label { color: #777; }
.gz-lgt-stat-value { font-weight: 700; color: #333; }

/* CTA button inside stats box */
.gz-lgt-btn-wrap {
  padding: 2px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 0.75rem;
  width: 100%;
}
.gz-lgt-btn {
  display: block;
  background: #fff;
  color: #333;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 18px;
  text-decoration: none;
  text-align: center;
}

/* Divider line */
.gz-lgt-divider { margin: 1.5rem 0 0.75rem; }

/* Section intro text */
.gz-lgt-section-intro    { margin-top: 0; margin-bottom: 1rem; }


.gz-lgt-section-intro-sm { margin-top: 0; margin-bottom: 0.5rem; }

/* Did you win highlight */
.gz-lgt-did-you-win {
  color: var(--gz-game-color, #333);
  font-weight: 700;
}

/* Draw row */
.gz-lgt-draw-row { margin-bottom: 2rem; }

/* No results message */
.gz-lgt-no-results { color: #888; font-size: 13px; }

/* Turn the page boxes */
.gz-lgt-turn-inner {
  background: #f9f9f9;
  padding: 1.25rem 1.5rem;
  text-align: center;
}
.gz-lgt-turn-bordered {
  background: #f9f9f9;
  border: 2px solid;
  padding: 1.25rem 1.5rem;
  text-align: center;
}
.gz-lgt-turn-mobile {
  background: #f9f9f9;
  border: 2px solid;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.gz-lgt-turn-text {
  font-family: var(--font-editorial);
  font-size: 15px;
  font-style: italic;
  font-weight: 800;
  color: var(--black);
  margin: 0 0 0.5rem;
}
.gz-lgt-turn-rule { height: 1px; margin: 0.5rem 0; }
.gz-lgt-back-link { font-size: 14px; }

/* Past draws grid */
.gz-lgt-past-grid  { margin: 0 0 1.5rem; }
.gz-lgt-past-wrap  { overflow: hidden; border-radius: 4px; }
.gz-lgt-past-card-inner { overflow: hidden; border-radius: 3px; }
.gz-lgt-past-card  { border: 2px solid; overflow: hidden; border-radius: 4px; }

/* Past draw card parts */
.gz-lgt-date-bar   { padding: 0.4rem 0.75rem; }
.gz-lgt-date-text  { font-size: 12px; font-weight: 800; color: #fff; }
.gz-lgt-balls-wrap {
  padding: 0.75rem 0.75rem 0.5rem;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.gz-lgt-ball       { width: 36px; height: 36px; font-size: 14px; font-weight: 800; }
.gz-lgt-ball--bonus { background: #333; }
.gz-lgt-card-footer {
  padding: 0.4rem 0.75rem;
  background: #f9f9f9;
  border-top: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gz-lgt-footer-label { font-size: 11px; color: #777; font-weight: 600; }
.gz-lgt-footer-prize { font-size: 13px; font-weight: 800; }

/* Prize tiers */
.gz-lgt-tiers      { margin-bottom: 1.5rem; border: 2px solid; overflow: hidden; }
.gz-lgt-tier-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
  gap: 0.25rem;
  background: #fff;
}
@media (min-width: 768px) {
  .gz-lgt-tier-row { padding: 0.75rem; gap: 0.4rem; }
}
.gz-lgt-tier-row:last-child { border-bottom: none; }
.gz-lgt-tier-match { font-size: 12px; font-weight: 700; color: #333; flex: 1 1 auto; }
.gz-lgt-tier-star  { margin-right: 0.3rem; font-weight: 800; }
.gz-lgt-tier-win   { font-size: 12px; font-weight: 800; border: 1.5px solid; padding: 0.15rem 0.4rem; border-radius: 3px; }
.gz-lgt-tier-win--gradient { color: #fff; border: none; }
.gz-lgt-tier-odds  { font-size: 11px; color: #666; width: 100%; padding-left: 1.2rem; font-style: italic; }
@media (min-width: 768px) {
  .gz-lgt-tier-match { font-size: 14px; }
  .gz-lgt-tier-win   { font-size: 15px; padding: 0.2rem 0.65rem; border-width: 2px; }
  .gz-lgt-tier-odds  { font-size: 13px; }
}

/* Prize table */
.gz-lgt-prize-table { margin-bottom: 1.5rem; overflow-x: auto; }

/* About article */
.gz-lgt-about      { width: 100%; margin-bottom: 1.5rem; }
.gz-lgt-about-title {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  color: var(--black);
  margin: 0 0 0.5rem;
}

/* Peach mini card */
.gz-mini--lotto-peach     { border-left: 4px solid var(--lotto-peach); }
.gz-mini-cat--lotto-peach { background: var(--lotto-peach); color: #fff; padding: 2px 6px; border-radius: 2px; }
.gz-mini-continue--lotto-peach { color: var(--lotto-peach); }

.gz-mini--blue     { border-left: none; background: linear-gradient(180deg, #2563EB, #1e40af, #3b82f6, #1e3a8a) left/4px 100% no-repeat, #eff6ff; }
.gz-mini-cat--blue { background: #2563EB; color: #fff; padding: 2px 6px; border-radius: 2px; }
.gz-mini-continue--blue { color: #2563EB; }

.gz-mini--red      { border-left: none; background: linear-gradient(180deg, #C62828, #EF4444, #B91C1C, #DC2626) left/4px 100% no-repeat, #fef2f2; }
.gz-mini-cat--red  { background: #C62828; color: #fff; padding: 2px 6px; border-radius: 2px; }
.gz-mini-continue--red { color: #C62828; }

.gz-mini--game-theme { border-left: 4px solid var(--mini-theme); }
.gz-mini-cat--game-theme { color: #fff; padding: 2px 6px; border-radius: 2px; }

/* Mini row */
.gz-lgt-mini-row   { align-items: flex-start; }

/* ── Jump to Lottery Results box ────────────────────────────────── */
.gz-lotto-jump-box {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 1.25rem 0;
}
.gz-lotto-jump-box__label {
  display: block;
  font-family: var(--font-editorial);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fbbf24;
  text-align: center;
  margin-bottom: 0.65rem;
}
.gz-lotto-jump-box__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.gz-lotto-jump-pill {
  display: inline-block;
  background: var(--pill-color);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: transform 0.12s, box-shadow 0.12s;
}
.gz-lotto-jump-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.gz-lotto-jump-pill--hub {
  background: transparent;
  border: 1.5px solid #fbbf24;
  color: #fbbf24;
}

/* Disclaimer */
.gz-lgt-disclaimer { color: #777; font-size: 13px; line-height: 1.6; margin-top: 1rem; }

.gz-text-rainbow { background:linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* Health Lottery visit button — solid border, rainbow gradient text */
.gz-cta-link--health {
  display: block;
  padding: 0.75rem 1rem;
  font-family: var(--font-editorial);
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-image: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1;
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
  margin-top: 0.75rem;
}

/* Game-coloured snake wrap — uses CSS var set per page */
.gz-snake-wrap--game {
  --gz-angle: 0deg;
  display: inline-block;
  position: relative;
  padding: 3px;
  border-radius: 4px;
  background: transparent;
  margin-bottom: 0.5rem;
}
.gz-snake-wrap--game::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  padding: 2px;
  background: conic-gradient(from var(--gz-angle), transparent 75%, var(--gz-game-color, #E8875A) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: gz-snake 2.5s linear infinite;
}

/* How to play box — sister-box style */
.gz-lgt-howtoplay {
  border: none;
  padding: 3px;
  margin-top: 10px;
}
.gz-lgt-howtoplay__inner {
  background: linear-gradient(135deg,#1a0a2e 0%,#2d1155 100%);
  padding: 1.25rem;
  text-align: center;
}
.gz-lgt-howtoplay__text {
  font-family: var(--font-editorial);
  font-size: 15px;
  font-style: italic;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0.75rem 0 0.5rem;
  line-height: 1.5;
}
.gz-lgt-howtoplay__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 0.5rem;
}

/* Hub back link card */
.gz-lgt-hub-link {
  display: block;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--lotto-peach);
  font-family: var(--font-editorial);
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  color: var(--lotto-peach);
  text-decoration: none;
  line-height: 1.3;
}
.gz-lgt-hub-link:hover {
  background: var(--lotto-peach);
  color: #fff;
}

/* CTA links — larger on desktop */
@media (min-width: 768px) {
  .gz-cta-link,
  .gz-lgt-hub-link,
  .gz-lgt-visit-btn {
    font-size: 16px;
  }
}

/* Rainbow/multi label for health lottery tabs */
.gz-label-rainbow {
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) !important;
  color: #fff;
}

/* Also see text links at bottom of lotto game pages */
.gz-lgt-also-see {
  font-size: 13px;
  color: #666;
  border-top: 1px solid #eee;
  padding-top: 0.75rem;
  margin-top: 1rem;
}
/* Pink, like every other body link. */
.gz-lgt-also-see a {
  color: var(--pink);
  text-decoration: none;
  font-weight: 700;
}
.gz-lgt-also-see a:hover { text-decoration: underline; }

/* Irish Lotto — green label and CTA */
.gz-label-green {
  background: linear-gradient(135deg,#15803d,#16A34A,#4ade80,#166534) !important;
  color: #fff;
}
.gz-label-blue {
  background: linear-gradient(135deg,#1e3a8a,#2563EB,#60a5fa,#1e40af) !important;
  color: #fff;
}
.gz-cta-link--green {
  display: block;
  padding: 0.75rem 1rem;
  font-family: var(--font-editorial);
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #16A34A;
  color: #16A34A;
  line-height: 1.3;
  margin-top: 0.75rem;
}
.gz-cta-link--green:hover {
  background: #16A34A;
  color: #fff;
}
@media (min-width: 768px) {
  .gz-cta-link--green { font-size: 16px; }
}

/* Lotto operator promo cards */
.gz-lotto-ops { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
@media (min-width: 768px) {
  .gz-lotto-ops .gz-lotto-op-card:nth-child(4) { display: none; }
  .gz-lotto-ops--irish-lotto .gz-lotto-op-card:nth-child(3) { display: none; }
}
.gz-lotto-op-card {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  margin-bottom: 0.65rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.65rem 0.75rem;
  gap: 0.75rem;
}
.gz-lotto-op-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.gz-lotto-op-card__img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fff;
}
.gz-lotto-op-card__img-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  flex-shrink: 0;
}
/* ── Similar UK Bingo Sites — simple inline circle cards ──
   Rounded logo circles (like the brand page) in a clean row that wraps
   on mobile. No panels, no borders — just logo + name, tap to the guide. */
.gz-similar-circles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem 1.1rem;
  margin: 1.4rem auto 0.5rem;
  max-width: 100%;
}
.gz-similar-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: 92px;
  text-decoration: none;
  color: inherit;
}
.gz-similar-circle__logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 2px solid #C71585;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(199, 21, 133, 0.22);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.gz-similar-circle__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gz-similar-circle__initial {
  font-family: var(--font-editorial);
  font-size: 26px;
  font-weight: 800;
  color: #C71585;
}
.gz-similar-circle__name {
  font-family: var(--font-editorial);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  color: var(--gz-ink, #1a1a1a);
}
.gz-similar-circle:hover .gz-similar-circle__logo {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(199, 21, 133, 0.38);
  border-color: #E91E8C;
}
.gz-similar-circle:hover .gz-similar-circle__name {
  color: #C71585;
}
@media (max-width: 600px) {
  .gz-similar-circles { gap: 1.1rem 0.8rem; }
  .gz-similar-circle { width: 78px; }
  .gz-similar-circle__logo { width: 64px; height: 64px; }
  .gz-similar-circle__name { font-size: 11.5px; }
}
/* ── Similar UK Bingo Sites — inline brand chips ──
   Pill links that sit inline and wrap: a small pink-ringed logo circle
   (same motif as the pick-balls) + the brand name in Lora at 16px, so
   the text matches the section intro / body copy exactly. Replaces the
   plain-link look on the brand-page "Similar UK Bingo Sites" block. */
.gz-similar-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem 0.6rem;
  margin: 1.2rem auto 0.5rem;
  max-width: 100%;
}
.gz-similar-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.95rem 0.3rem 0.3rem;
  background: var(--white, #fff);
  border: 1.5px solid var(--pink-dark, #C71585);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(199, 21, 133, 0.14);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.gz-similar-chip__logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pink-bg, #fdf4f7);
  border: 1.5px solid var(--pink-dark, #C71585);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gz-similar-chip__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gz-similar-chip__initial {
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 800;
  color: var(--pink-dark, #C71585);
}
.gz-similar-chip__name {
  font-family: var(--font-editorial);
  font-size: 16px;              /* matches .lotto-section-intro / body copy */
  font-weight: 700;
  line-height: 1.2;
  color: var(--black, #1a1a1a);
  white-space: nowrap;
}
.gz-similar-chip:hover,
.gz-similar-chip:focus-visible {
  transform: translateY(-2px);
  background: var(--pink-bg, #fdf4f7);
  box-shadow: 0 5px 14px rgba(199, 21, 133, 0.32);
}
.gz-similar-chip:hover .gz-similar-chip__name,
.gz-similar-chip:focus-visible .gz-similar-chip__name {
  color: var(--pink-dark, #C71585);
}
.gz-similar-chip:focus-visible {
  outline: 2px solid var(--pink, #E91E8C);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .gz-similar-chip { transition: none; }
  .gz-similar-chip:hover, .gz-similar-chip:focus-visible { transform: none; }
}
@media (max-width: 600px) {
  .gz-similar-chips { gap: 0.5rem 0.45rem; }
  .gz-similar-chip { padding: 0.25rem 0.8rem 0.25rem 0.25rem; }
  .gz-similar-chip__logo { width: 26px; height: 26px; }
  .gz-similar-chip__name { font-size: 15px; }
}
.gz-lotto-op-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gz-lotto-op-card__placeholder {
  font-size: 11px;
  font-weight: 800;
  color: #555;
  text-align: center;
}
.gz-lotto-op-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gz-lotto-op-card__name {
  font-size: 14px;
  font-weight: 800;
  color: #111;
  margin-bottom: 2px;
}
.gz-lotto-op-card__stars {
  margin-bottom: 4px;
}
.gz-star {
  color: #ddd;
  font-size: 13px;
}
.gz-star--on {
  color: #f59e0b;
}

/* Glitzy G rating — small rounded boxes with a mini G, used in place of stars
   on Editor's Picks and brand-page You May Also Like cards. Off state is a
   pale tile; on state fills with the page's --gz-game-color accent. */
.gz-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  margin: 0 1px;
  background: #f0e6ed;
  color: #b8a4b0;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-display, Georgia, serif);
  line-height: 1;
}
.gz-g--on {
  background: #C71585;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* Editor's Rating block (the prominent one under the reviews summary) — Gs
   sized a touch larger than the inline default for a clear, scannable row. */
.gz-tp-summary__avg-gs .gz-g {
  width: 28px; height: 28px;
  font-size: 16px;
  border-radius: 5px;
  margin: 0 2px;
}
.gz-lotto-op-card__gs {
  margin-bottom: 4px;
  letter-spacing: 0;
  line-height: 1;
}

/* Gs inside the brand-page Rating & Reviews Editor tile — sized up for
   readability on desktop; picks/YMAL Gs stay at their standard 18px size. */
.gz-brand-score-tile__avg-stars .gz-g {
  width: 22px;
  height: 22px;
  font-size: 14px;
  border-radius: 4px;
}

/* Numbered ball overlay on picks-card logos — used by both the shared Editor's
   Picks partial and the brand-page You May Also Like block. */
.gz-picks-logo-wrap {
  position: relative;
  display: inline-block;
  overflow: visible;
  /* Contain layout side-effects so the ball's blink can't move siblings */
  contain: layout style;
}
.gz-picks-ball {
  width: 34px; height: 34px;
  position: absolute; top: -6px; left: -8px;
  transition: box-shadow 0.3s, transform 0.3s;
  will-change: box-shadow, transform;
  /* Always on its own compositor layer — no promotion mid-transition */
  transform: translateZ(0);
  backface-visibility: hidden;
  z-index: 10;
}
.gz-picks-ball span { font-size: 14px; }
.gz-picks-ball.gz-ball-lit {
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.25),
    inset 0 3px 8px rgba(255,255,255,0.35),
    0 0 12px 4px var(--gz-glow, var(--pink)),
    0 3px 8px rgba(0,0,0,0.2) !important;
  transform: translateZ(0) scale(1.2);
}
@media (prefers-reduced-motion: reduce) {
  .gz-picks-ball.gz-ball-lit { box-shadow: none !important; transform: translateZ(0) !important; }
}
.mag-picks-box .gz-lotto-op-card--featured,
.mag-picks-box .gz-lotto-op-card,
.mag-picks-box .gz-lotto-op-card__img-wrap { overflow: visible; }
.gz-lotto-op-card__offer {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  margin: 0 0 6px;
  line-height: 1.3;
}
.gz-lotto-op-card__btns {
  display: flex;
  gap: 4px;
  width: 100%;
  justify-content: center;
}
.gz-lotto-op-card__btn {
  text-align: center;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.gz-lotto-op-card__btn:hover { opacity: 0.85; }
.gz-lotto-op-card__btn--review {
  color: #fff;
  background: var(--gz-game-color, #C71585);
  padding: 0.45rem 1rem;
  flex: 1;
  text-align: center;
  font-size: 0.78rem;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.gz-lotto-op-card__btn--visit {
  color: #C71585;
  background: transparent;
  border: 2px solid #C71585;
  padding: 0.35rem 1rem;
  text-align: center;
  font-size: 0.78rem;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.gz-lotto-op-card__ukgc {
  font-size: 10px;
  color: #aaa;
  margin: 4px 0 0;
}

/* Pill quick links under intro */
.gz-lgt-pill-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 1rem 0 0.5rem;
}
.gz-lgt-pill-links__label {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}
.gz-lgt-pill {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.1s;
}
.gz-lgt-pill:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.gz-lgt-pill-links--action {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.gz-lotto-op-card__disclaimer {
  font-size: 11px;
  color: #999;
  line-height: 1.5;
  margin: 0.4rem 0 0.75rem;
}
.gz-lgt-cta-links {
  margin-top: 1rem;
}

/* Featured bookmakers wrap */
.gz-lotto-ops-wrap {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}
.gz-lotto-ops-wrap__heading {
  background: linear-gradient(135deg, #0a1f0d 0%, #1a3d1f 100%);
  padding: 0.85rem 1rem 0.75rem;
  text-align: center;
  border: 3px solid var(--gz-game-color, #16A34A);
  border-bottom: none;
}
.gz-lotto-ops-wrap__heading-label {
  background: var(--gz-game-color, #16A34A);
  color: #fff;
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-bottom: 0.4rem;
  transform: rotate(-2deg);
  display: inline-block;
}
.gz-lotto-ops-wrap__heading-title {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  color: #fff;
  display: block;
  line-height: 1.25;
  margin: 0;
}
@media (min-width: 768px) {
  .gz-lotto-ops-wrap__heading-title { font-size: 22px; }
}
.gz-lotto-op-card--featured {
  border: 3px solid var(--gz-game-color, #16A34A);
  border-top: none;
  border-radius: 0;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gz-lotto-op-card--featured .gz-lotto-op-card {
  border: none;
  border-bottom: 1px solid #eee;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  width: 100%;
  max-width: 480px;
  text-align: center;
  justify-content: center;
}
.gz-lotto-op-card--featured .gz-lotto-op-card:last-child {
  border-bottom: none;
}

@media (max-width: 480px) {
  .gz-lotto-op-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.65rem 0.65rem 0.5rem;
  }
  .gz-lotto-op-card__img-circle {
    width: 78px;
    height: 78px;
    margin-bottom: 0.25rem;
  }
  .gz-lotto-op-card__name {
    text-align: center;
    font-size: 16px;
  }
  .gz-lotto-op-card__stars {
    justify-content: center;
    display: flex;
  }
  .gz-lotto-op-card__offer {
    text-align: center;
  }
  .gz-lotto-op-card__btns {
    flex-direction: column;
    width: 100%;
    gap: 5px;
  }
  .gz-lotto-op-card__btn {
    width: 100%;
    padding: 0.45rem 0.5rem;
  }
  .gz-lotto-op-card__ukgc {
    text-align: center;
  }
}

/* Latest results info box — full width version */
.gz-lotto-info-box--fullwidth {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #fffbf0;
  border: 1px solid var(--lotto-peach);
  border-left: 4px solid var(--lotto-peach);
  margin: 0 0 1.25rem;
}
.gz-lotto-info-box--fullwidth .mag-label {
  white-space: nowrap;
  flex-shrink: 0;
}
.gz-lotto-info-box--fullwidth .gz-lotto-info-p {
  font-size: 12px;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* Hot & Cold balls */
.gz-hc-wrap {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.gz-hc-col { flex: 1; }
.gz-hc-label {
  display: block;
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 800;
  font-style: italic;
  margin-bottom: 0.5rem;
  color: #333;
}
.gz-hc-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gz-hc-ball {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.gz-hc-ball--hot {
  background: #ef4444 !important;
  color: #fff !important;
}
.gz-hc-ball--cold {
  background: #3b82f6 !important;
  color: #fff !important;
}

/* Lotto card stats row */
.gz-lotto-card-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0.4rem 0 0.5rem;
}
.gz-lotto-card-stat {
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  border-radius: 3px;
  padding: 3px 7px;
  flex: 1;
  min-width: 0;
}
.gz-lotto-card-stat__label {
  font-size: 9px;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.gz-lotto-card-stat__val {
  font-size: 11px;
  font-weight: 800;
  color: #333;
  white-space: nowrap;
}

/* Odds in right coloured column */
.gz-lotto-card-odds {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.25);
  text-align: center;
}
.gz-lotto-card-odds__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.gz-lotto-card-odds__val {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
}

/* Hot & cold link on card */
.gz-lotto-card-results-link--hc {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

/* Lotto card right column — bold day + countdown */
.gz-lotto-card-next-day-bold {
  font-size: clamp(18px,5vw,22px);
  font-weight: 900;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.2;
}
.gz-lotto-card-countdown-bold {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.3;
}
.gz-lotto-card-countdown-bold .gz-lotto-countdown {
  color: #fff;
}
/* Odds inside prize box */
.gz-lotto-card-odds-inline {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  margin: 4px 0 0;
  line-height: 1.3;
}

/* Lotto card tab row */
.gz-lotto-card-tabs {
  display: flex;
  margin-top: auto;
  border-top: 1px solid #f0f0f0;
  gap: 6px;
  padding: 0.5rem 0 0;
}
.gz-lotto-card-tab {
  flex: 1;
  text-align: center;
  padding: 0.4rem 0.25rem;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-editorial);
  font-style: italic;
  text-decoration: none;
  border: 1.5px solid;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
.gz-lotto-card-tab:hover {
  color: #fff !important;
}

/* Lotto card dual links */
.gz-lotto-card-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.4rem;
}
.gz-lotto-card-link {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-editorial);
  font-style: italic;
  text-decoration: none;
}
.gz-lotto-card-link:hover { text-decoration: underline; }

/* Hot & Cold dedicated page */
.gz-hc-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.gz-hc-game-card {
  border: 1px solid #e8e8e8;
  overflow: hidden;
}
.gz-hc-game-card__header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.6rem 0.85rem;
  color: #fff;
}
.gz-hc-game-card__name {
  font-family: var(--font-dauble);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
}
.gz-hc-game-card__draws {
  font-size: 11px;
  opacity: 0.8;
}
.gz-hc-game-card__body {
  display: flex;
  gap: 1rem;
  padding: 0.85rem;
  background: #fff;
}
.gz-hc-game-card__link {
  display: block;
  text-align: center;
  font-family: var(--font-editorial);
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  padding: 0.4rem;
  border-top: 1px solid #f0f0f0;
  text-decoration: none;
  background: #fff;
}
.gz-hc-game-card__link:hover { background: #fafafa; }

/* Lotto Betting Offers grid */
.gz-lotto-offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.gz-lotto-offer-card {
  border: 1px solid #e8e8e8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
a.gz-lotto-offer-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.gz-lotto-offer-card__img-wrap {
  background: #f5f5f5;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.gz-lotto-offer-card__img {
  max-height: 40px;
  max-width: 85%;
  object-fit: contain;
}
@media (min-width: 768px) {
  .gz-lotto-offer-card__img {
    max-height: 60px;
    max-width: 85%;
    object-fit: contain;
  }
}
.gz-lotto-offer-card__name {
  font-family: var(--font-dauble);
  font-size: 14px;
  font-weight: 800;
  color: #555;
  position: absolute;
}
.gz-lotto-offer-card__stars {
  margin: 0 0 0.5rem;
  display: flex;
  gap: 1px;
  justify-content: center;
}
.gz-lotto-offer-card__body {
  padding: 0.65rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.gz-lotto-offer-card__offer {
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}
.gz-lotto-offer-card__tc {
  font-size: 10px;
  color: #999;
  margin: 0 0 0.6rem;
  line-height: 1.4;
  flex: 1;
}
.gz-lotto-offer-card__cta {
  display: block;
  width: fit-content;
  margin: 0.5rem auto 0.4rem;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  padding: 0.65rem 1.5rem;
  color: #fff !important;
  background: #C71585;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.15s;
}
.gz-lotto-offer-card__cta:hover {
  opacity: 0.88;
}
.gz-lotto-offer-card__ukgc {
  font-size: 10px;
  color: #888;
  margin: 0;
  text-align: center;
}

/* Other UK Lotto draws — desktop only */
.gz-lotto-other-draws {
  display: none;
  margin: 1.5rem 0;
}
@media (min-width: 768px) {
  .gz-lotto-other-draws { display: block; }
}
.gz-lotto-other-draws__label {
  display: block;
  font-family: var(--font-editorial);
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  color: #999;
  text-align: center;
  margin-bottom: 0.75rem;
  letter-spacing: 1px;
}
.gz-lotto-other-draws__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
}
.gz-lotto-other-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid #eee;
  padding: 0.6rem 0.4rem;
  gap: 4px;
  transition: box-shadow 0.15s;
}
.gz-lotto-other-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.gz-lotto-other-card__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 2px;
}
.gz-lotto-other-card__next {
  font-size: 11px;
  font-weight: 700;
}
.gz-lotto-other-card__jp {
  font-size: 12px;
  font-weight: 900;
  color: #333;
}

/* Mobile banner ad under stats */
.gz-ad-mobile-banner {
  display: block;
  border: 1px dashed #ccc;
  padding: 1.25rem;
  text-align: center;
  margin: 1rem 0;
  background: #fafafa;
}
@media (min-width: 641px) {
  .gz-ad-mobile-banner { display: none !important; }
}

/* Sidebar other lotto draws — desktop only */
.gz-lotto-sidebar-draws {
  display: none;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .gz-lotto-sidebar-draws { display: block; }
}
.gz-lotto-sidebar-draws__title {
  display: block;
  font-family: var(--font-editorial);
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  color: #aaa;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 0.5rem;
}
.gz-lotto-sidebar-draw {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 0.6rem;
  margin-bottom: 4px;
  background: #fff;
  border: 1px solid #f0f0f0;
  text-decoration: none;
  transition: box-shadow 0.15s;
}
.gz-lotto-sidebar-draw:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.gz-lotto-sidebar-draw__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.gz-lotto-sidebar-draw__meta {
  font-size: 10px;
  color: #888;
  font-weight: 600;
}

/* Desktop quick links on lotto game pages */
.gz-lgt-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1rem;
}
.gz-lgt-quicklinks--desktop { display: none; }
.gz-lgt-quicklinks--mobile  { display: flex; }
@media (min-width: 768px) {
  .gz-lgt-quicklinks--desktop { display: flex; }
  .gz-lgt-quicklinks--mobile  { display: none; }
}
.gz-lgt-quicklink {
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-editorial);
  font-style: italic;
  text-decoration: none;
  border: 2px solid;
  border-radius: 20px;
  padding: 6px 16px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.gz-lgt-quicklink:hover {
  background: var(--ql-color) !important;
  color: #fff !important;
}

/* Operator cards disclaimer note */
.gz-lotto-ops-note {
  font-size: 10px;
  color: #aaa;
  line-height: 1.5;
  margin: 0.4rem 0 0.75rem;
}

/* UK Lotto pink CTA */
.gz-cta-link--lotto {
  display: block;
  padding: 0.75rem 1rem;
  font-family: var(--font-editorial);
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #F43F5E;
  color: #F43F5E;
  line-height: 1.3;
  margin-top: 0.75rem;
}
.gz-cta-link--lotto:hover {
  background: #F43F5E;
  color: #fff;
}
@media (min-width: 768px) {
  .gz-cta-link--lotto { font-size: 16px; }
}

/* Health Lottery rainbow label */
.gz-lotto-label--health {
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) !important;
  color: #fff;
}

/* Health Lottery rainbow snake wrap */
.gz-snake-wrap--health { background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9); }
.gz-snake-wrap--health::before {
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, #F43F5E 60deg, #9c27b0 120deg, #00BCD4 180deg, #65A30D 240deg, #7C3AED 300deg, #F43F5E 360deg);
}

/* UK Lotto — pink label and snake */
.gz-label-pink {
  background: #F43F5E !important;
  color: #fff;
}
.gz-snake-wrap--pink { background: transparent; --snake-bg: transparent; }
.gz-snake-wrap--pink::before {
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, #F43F5E 60deg, #fb7185 120deg, #be123c 180deg, #fda4af 240deg, #fff 300deg, #F43F5E 360deg);
}

/* Scam Check — red / danger snake */
.gz-snake-wrap--red { background: transparent; --snake-bg: transparent; }
.gz-snake-wrap--red::before {
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, #c62828 60deg, #ef5350 120deg, #8b1e1e 180deg, #ef9a9a 240deg, #fff 300deg, #c62828 360deg);
}

/* The Vault — purple/violet snake */
.gz-snake-wrap--silver { background: transparent; --snake-bg: transparent; }
.gz-snake-wrap--silver::before {
  background: conic-gradient(from var(--gz-angle, 0deg), #8F2E08 0deg, #C1440E 60deg, #E8751A 120deg, #C1440E 180deg, #F59E0B 240deg, #E8751A 300deg, #8F2E08 360deg);
}
/* Matching burnt-orange label chip for the vault snake border.
   Used on vault EXPLORE MORE and NOW BROADCASTING labels. */
.mag-label--silver {
  background: linear-gradient(135deg, #8F2E08 0%, #C1440E 45%, #E8751A 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* Irish Lotto — multi-green snake */
.gz-snake-wrap--irish {
  --gz-angle: 0deg;
  display: inline-block;
  position: relative;
  padding: 3px;
  border-radius: 4px;
  background: transparent;
  margin-bottom: 0.5rem;
  animation: gz-spin 4s linear infinite;
}
.gz-snake-wrap--irish::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  padding: 2px;
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, #15803d 60deg, #4ade80 120deg, #166534 180deg, #86efac 240deg, #fff 300deg, #16A34A 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

/* UK Lotto partners compare box */
/* Green snake — Irish Lotto label variant */
.gz-snake-wrap--green { background: transparent; }
.gz-snake-wrap--green::before {
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, #15803d 60deg, #4ade80 120deg, #166534 180deg, #86efac 240deg, #fff 300deg, #16A34A 360deg);
}

/* Blue snake — EuroMillions label variant */
.gz-snake-wrap--blue { background: transparent; }
.gz-snake-wrap--blue::before {
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, #1e3a8a 60deg, #60a5fa 120deg, #1e40af 180deg, #93c5fd 240deg, #fff 300deg, #2563EB 360deg);
}

.gz-lotto-partners-box {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.75rem;
  background: #fafafa;
}
.gz-lotto-partners-box__text {
  font-size: 11px;
  color: #888;
  margin: 0;
  line-height: 1.5;
}

/* Extra draws show more */
.gz-lgt-show-more { margin-top: 0.5rem; }
.gz-lgt-show-more__btn {
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-editorial);
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  padding: 4px 14px;
  border: 2px solid;
  border-radius: 20px;
  margin-bottom: 0.75rem;
  list-style: none;
}
.gz-lgt-show-more__btn::-webkit-details-marker { display: none; }
.gz-lgt-show-more[open] .gz-lgt-show-more__btn::before { content: 'Hide '; }
.gz-lgt-past-grid--more { margin-top: 0.5rem; }

/* Jump links on National Lottery page */
.gz-lgt-jump-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.gz-lgt-jump-link {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-editorial);
  font-style: italic;
  text-decoration: none;
  padding: 3px 10px;
  border: 1.5px solid;
  border-radius: 20px;
}

/* E-E-A-T trust signal in footer */
.gz-footer-eeat {
  font-size: 12px;
  color: #aaa;
  font-style: italic;
  text-align: center;
  padding: 0.5rem 1rem 0;
  margin: 0;
  line-height: 1.5;
}

/* ── Tonight's Draw card (lotto hub sidebar) ── */
.gz-tonight-card {
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 0 0 0.75rem;
  margin-top: 0;
}
.gz-tonight-card__header {
  padding: 0.75rem 1rem 0.6rem;
  text-align: center;
}
.gz-tonight-card__kicker {
  font-family: var(--font-editorial);
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.1em;
  margin: 0 0 0.2rem;
}
.gz-tonight-card__game {
  font-family: var(--font-dauble);
  font-size: clamp(16px, 5vw, 22px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .gz-tonight-card__kicker { font-size: 12px; }
  .gz-tonight-card__game { font-size: 28px; white-space: normal; }
}
@media (max-width: 360px) {
  .gz-tonight-timer-box { font-size: 14px; min-width: 28px; padding: 2px 3px; }
  .gz-tonight-timer-lbl { font-size: 7px; }
  .gz-tonight-timer-sep { font-size: 14px !important; }
}
.gz-tonight-card__countdown {
  padding: 1.2rem 0.75rem 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: 0.5rem;
  min-height: 72px;
}
.gz-tonight-timers {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  min-height: 42px;
}
.gz-tonight-timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.gz-tonight-timer-box {
  background: rgba(255,255,255,0.95);
  color: #1a1a1a;
  font-family: var(--font-dauble);
  font-size: 18px;
  font-weight: 900;
  min-width: 36px;
  text-align: center;
  padding: 3px 5px 2px;
  border-radius: 4px;
  letter-spacing: 1px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 -2px 0 rgba(0,0,0,0.1);
  line-height: 1.15;
}
@media (min-width: 768px) {
  .gz-tonight-timer-box { font-size: 28px; min-width: 52px; padding: 5px 8px 4px; }
  .gz-tonight-timer-sep { font-size: 24px !important; padding-bottom: 18px !important; }
  .gz-tonight-timer-lbl { font-size: 11px; }
}
.gz-tonight-timer-lbl {
  font-size: 9px;
  font-weight: 800;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
}
.gz-tonight-timer-sep {
  font-family: var(--font-dauble);
  font-size: 16px;
  font-weight: 900;
  color: rgba(255,255,255,0.8);
  line-height: 1;
  padding-bottom: 12px;
}
.gz-tonight-card__draw-label {
  text-align: center;
  font-family: var(--font-dauble);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  font-style: normal;
  letter-spacing: 0.5px;
  margin: 6px 0 0;
}
.gz-tonight-card__drawn-label {
  text-align: center;
  font-family: var(--font-editorial);
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  padding: 0.5rem 0.75rem 0.1rem;
  margin: 0;
}
.gz-tonight-card__balls {
  padding: 0.5rem 0.75rem 0.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.gz-tonight-ball {
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
@media (min-width: 768px) {
  .gz-tonight-ball { width: 40px; height: 40px; font-size: 15px; }
}
.gz-tonight-ball--bonus {
  background: rgba(0,0,0,0.35) !important;
  color: #fff !important;
}
.gz-tonight-card__date {
  text-align: center;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  font-style: italic;
  margin: 2px 0 0;
}
.gz-tonight-card__jp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0.6rem 0.75rem 0.15rem;
  margin-top: 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.gz-tonight-card__jp-label {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gz-tonight-card__jp {
  font-family: var(--font-dauble);
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.gz-tonight-card__top-win-brand {
  display: block;
  font-size: 11px;
  opacity: 0.75;
  margin-top: 2px;
}
.gz-lgt-tier-odds--full {
  width: 100%;
  padding-left: 1.4rem;
}
.gz-lgt-visit-btn {
  margin-top: 1.5rem;
}
@media (min-width: 768px) {
  .gz-tonight-card__jp-label { font-size: 13px; }
  .gz-tonight-card__jp { font-size: 32px; }
  .gz-tonight-card__jp-wrap { padding: 0.75rem 0.75rem 0.25rem; margin-top: 0.6rem; }
}
.gz-tonight-card__link {
  display: block;
  text-align: center;
  padding: 0.55rem 0.75rem;
  margin: 0.5rem 0.75rem 0;
  color: #fff;
  font-family: var(--font-editorial);
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  text-decoration: none;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.25);
  transition: background 0.15s;
}
.gz-tonight-card__link:hover { background: rgba(0,0,0,0.35); }

/* ── Lotto news card ── */
.gz-lotto-news-card {
  border-left: 4px solid #16A34A;
  background: #f9f9f9;
  padding: 0.9rem 1rem 0.75rem;
  margin: 1rem 0;
  border-radius: 0 4px 4px 0;
}
.gz-lotto-news-card__label {
  font-family: var(--font-editorial);
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  color: #16A34A;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}
.gz-lotto-news-card__title {
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.gz-lotto-news-card__body {
  font-size: 13px;
  line-height: 1.6;
  color: #444;
  margin: 0 0 0.5rem;
}
.gz-lotto-news-card__date {
  font-size: 11px;
  color: #aaa;
  font-style: italic;
}

/* ── Lotto news article page ── */
.gz-news-article { max-width: 680px; }
.gz-news-article__header { margin-bottom: 1.5rem; }
.gz-news-article__title {
  font-family: var(--font-editorial);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0.5rem 0 0.4rem;
}
.gz-news-article__meta {
  font-size: 12px;
  color: #888;
  font-style: italic;
}
.gz-news-article__meta a { color: #888; }
.gz-news-article__standfirst {
  font-size: 17px;
  font-weight: 800;
  color: #333;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.gz-news-article__body p { font-size: 15px; line-height: 1.75; color: #333; margin-bottom: 1rem; }
.gz-news-article__body h2 {
  font-family: var(--font-dauble);
  font-size: 18px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 1.5rem 0 0.5rem;
}
.gz-news-article__source { font-size: 12px; color: #aaa; font-style: italic; }
.gz-news-article__footer { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.gz-news-article__back {
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  color: #16A34A;
  text-decoration: none;
}
/* News sidebar */
.gz-news-sidebar { border: 1px solid #eee; padding: 1rem; border-radius: 4px; }
.gz-news-sidebar__label {
  font-family: var(--font-editorial);
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  color: #16A34A;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.75rem;
}
.gz-news-sidebar__link {
  display: block;
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.gz-news-sidebar__link--all { color: #333 !important; border-color: #333 !important; margin-top: 0.5rem; }
/* Hub news card linked */
.gz-lotto-news-card--link { display: block; text-decoration: none; cursor: pointer; }
.gz-lotto-news-card--link:hover { background: #f4f4f4; }
.gz-lotto-news-card__readmore {
  display: block;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  color: #16A34A;
  margin-top: 0.25rem;
}
/* Daily daub date on story card */
.daub-story-card__date { font-size: 10px; color: #bbb; font-style: italic; display: block; margin-top: 2px; }

/* News card — left col on desktop, full width mobile */
.gz-lotto-news-row { display: block; }
@media (min-width: 768px) {
  .gz-lotto-news-row { max-width: 60%; }
}

/* Compact sidebar news card */
.gz-lotto-news-card--compact { margin-top: 0.75rem; }
.gz-lotto-news-card--compact .gz-lotto-news-card__title { font-size: 15px; }
.gz-lotto-news-card__body--short {
  font-size: 13px;
  line-height: 1.5;
  color: #555;
  margin: 0.25rem 0 0.3rem;
}

/* Lotto countdown span — base styles */
.gz-lotto-countdown {
  font-family: var(--font-dauble);
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.02em;
}
.gz-lotto-card-countdown-bold .gz-lotto-countdown {
  color: #fff;
  font-size: 12px;
}

/* ── Card inner — classes replacing inline styles ── */
.gz-lotto-card-game-label {
  color: #fff;
  font-size: clamp(13px, 4vw, 16px);
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  display: inline-block;
  margin-bottom: 0.4rem;
}
.gz-lotto-card-play-pill {
  padding: 2px;
  border-radius: 20px;
  display: inline-block;
}
.gz-lotto-card-divider {
  width: 2px;
  opacity: 0.15;
  flex-shrink: 0;
  align-self: stretch;
}
.gz-lotto-card-right {
  width: clamp(120px, 38vw, 160px);
  flex-shrink: 0;
  padding: 0.9rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 0 6px 6px 0;
  gap: 6px;
}
.gz-lotto-card-jackpot-val {
  font-size: clamp(1.1rem, 4.5vw, 1.15rem);
  font-weight: 900;
  margin: 0 0 4px;
  line-height: 1;
  text-align: center;
  word-break: break-all;
}

/* ============================================
   NEWS GRID — hub
   ============================================ */
.gz-lotto-news-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.gz-lotto-news-card--desktop-only { display: none; }
@media (min-width: 768px) {
  .gz-lotto-news-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .gz-lotto-news-card--desktop-only { display: block; }
  .gz-lotto-news-card--compact { width: 100%; }
}

/* ============================================
   NAV CARD — desktop spacing
   ============================================ */
@media (min-width: 768px) {
  .gz-lotto-nav-card__name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 14px;
  }
  .gz-lotto-nav-card__days {
    font-size: 11px;
    color: #bbb;
    white-space: nowrap;
    display: block;
  }
}

/* ============================================
   SIDEBAR TABS — desktop bigger labels
   ============================================ */
@media (min-width: 768px) {
  .gz-lotto-tabs-wrap--sidebar .gz-lotto-tab-label--sidebar {
    font-size: 13px;
    padding: 0.55rem 0.75rem;
    letter-spacing: 0.8px;
  }
}

/* ============================================
   LOTTO HUB TABS
   ============================================ */
.gz-lotto-tab-input { display: none; }

.gz-lotto-tab-labels {
  display: flex;
  gap: 0;
  margin: 1rem 0 0;
  border-bottom: 2px solid #f0f0f0;
}
.gz-lotto-tab-label {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  font-size: 13px;
  font-weight: 800;
  color: #999;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  letter-spacing: 0.5px;
  transition: color 0.15s, border-color 0.15s;
}
.gz-lotto-tab-label:hover { color: #333; }
.gz-lotto-tabs-wrap {
  border-bottom: 2px solid #f0f0f0;
  margin-bottom: 0;
}

/* Active tab state */
#tab-results:checked ~ .gz-lotto-tab-labels label[for="tab-results"],
#tab-reviews:checked ~ .gz-lotto-tab-labels label[for="tab-reviews"],
#tab-links:checked ~ label[for="tab-links"],
#tab-brands:checked ~ label[for="tab-brands"],
#tab-nl-results:checked ~ label[for="tab-nl-results"],
#tab-nl-about:checked ~ label[for="tab-nl-about"],
#tab-side-results:checked ~ label[for="tab-side-results"],
#tab-side-brands:checked ~ label[for="tab-side-brands"],
#hc-side-results:checked ~ label[for="hc-side-results"],
#hc-side-reviews:checked ~ label[for="hc-side-reviews"],
[id$="-results"]:checked ~ label[class*="gz-lotto-tab-label--sidebar"]:first-of-type,
[id$="-reviews"]:checked ~ label[class*="gz-lotto-tab-label--sidebar"]:last-of-type {
  color: var(--lotto-peach, #7C3AED);
  border-bottom-color: var(--lotto-peach, #7C3AED);
}

/* Panel visibility */
.gz-lotto-tab-panel { display: none; }

#tab-results:checked ~ .gz-lotto-tab-panel--results,
#tab-reviews:checked ~ .gz-lotto-tab-panel--reviews,
#tab-links:checked ~ .gz-lotto-tab-panel--links,
#tab-brands:checked ~ .gz-lotto-tab-panel--brands,
#tab-nl-results:checked ~ .gz-lotto-tab-panel--nl-results,
#tab-nl-about:checked ~ .gz-lotto-tab-panel--nl-about,
#tab-side-results:checked ~ .gz-lotto-tab-panel--side-results,
#tab-side-brands:checked ~ .gz-lotto-tab-panel--side-brands,
#hc-side-results:checked ~ .gz-lotto-tab-panel--side-results,
#hc-side-reviews:checked ~ .gz-lotto-tab-panel--side-brands,
[id$="-results"]:checked ~ .gz-lotto-tab-panel--page-results,
[id$="-reviews"]:checked ~ .gz-lotto-tab-panel--page-reviews {
  display: block;
}

/* ============================================
   LOTTO REVIEW CARDS
   ============================================ */
.gz-lotto-reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width: 600px) {
  .gz-lotto-reviews-grid {
    grid-template-columns: 1fr;
  }
}
.gz-lotto-review-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #eee;
  text-decoration: none;
  display: block;
  transition: box-shadow 0.15s;
}
.gz-lotto-review-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.gz-lotto-review-card__header {
  padding: 0.75rem 1rem;
  color: #fff;
}
.gz-lotto-review-card__name {
  display: block;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.gz-lotto-review-card__days {
  display: block;
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}
.gz-lotto-review-card__body {
  padding: 0.85rem 1rem;
  background: #fff;
}
.gz-lotto-review-card__body p {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  margin: 0 0 0.75rem;
}
.gz-lotto-review-card__stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 0.75rem;
}
.gz-lotto-review-card__stats span {
  font-size: 11px;
  color: #777;
}
.gz-lotto-review-card__stats strong {
  color: #333;
}
.gz-lotto-review-card__cta {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: var(--rc-color, #7C3AED);
  letter-spacing: 0.3px;
}

/* Hub quick nav cards */

/* Hub sidebar — no tabs, stacked */
.gz-lotto-hub-sidebar {
  margin: 0.5rem 0 0;
}
.gz-lotto-hub-sidebar .gz-lotto-op-card {
  margin-bottom: 0.65rem;
}
.gz-lotto-tabs-wrap--sidebar {
  margin: 0.5rem 0 0;
  display: block;
  font-size: 0; /* kills whitespace between inline-block tabs */
}
.gz-lotto-tabs-wrap--sidebar .gz-lotto-tab-label--sidebar {
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
  text-align: center;
  padding: 0.3rem 0.1rem;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #aaa;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-bottom: 2px solid #e8e8e8;
  cursor: pointer;
  transition: all 0.15s;
  margin: 0;
  vertical-align: top;
}
.gz-lotto-tabs-wrap--sidebar .gz-lotto-tab-label--sidebar:first-of-type {
  border-radius: 6px 0 0 0;
  border-right: none;
}
.gz-lotto-tabs-wrap--sidebar .gz-lotto-tab-label--sidebar:last-of-type {
  border-radius: 0 6px 0 0;
}
#tab-side-results:checked ~ label[for="tab-side-results"],
#tab-side-brands:checked ~ label[for="tab-side-brands"],
#hc-side-results:checked ~ label[for="hc-side-results"],
#hc-side-reviews:checked ~ label[for="hc-side-reviews"],
[id$="-results"]:checked ~ label[class*="gz-lotto-tab-label--sidebar"]:first-of-type,
[id$="-reviews"]:checked ~ label[class*="gz-lotto-tab-label--sidebar"]:last-of-type {
  background: #fff;
  color: var(--gz-game-color, #16A34A) !important;
  border-bottom-color: #fff !important;
  border-top: 2px solid var(--gz-game-color, #16A34A);
}
.gz-lotto-tabs-wrap--sidebar .gz-lotto-tab-panel {
  border: 1px solid #e8e8e8;
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 0.5rem 0.4rem;
  background: #fff;
}
.gz-lotto-tabs-wrap--sidebar .gz-lotto-nav-cards {
  margin: 0;
}
.gz-lotto-tabs-wrap--sidebar .gz-lotto-nav-card {
  padding: 0.4rem 0.6rem;
}

.gz-lotto-nav-cards {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.75rem 0 1rem;
}
/* Hub hero grid override */
@media (max-width: 767px) {
  .gz-lotto-nav-cards[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.gz-lotto-nav-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  border-left: 3px solid var(--nav-color, #ccc);
}
.gz-lotto-nav-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-color: var(--nav-color, #ccc);
}
.gz-lotto-nav-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gz-lotto-nav-card__name {
  font-size: 13px;
  font-weight: 800;
  color: #222;
  flex: 1;
}
.gz-lotto-nav-card__days {
  font-size: 10px;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
@media (max-width: 767px) {
  .gz-lotto-nav-card__name {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .gz-lotto-nav-card__days {
    font-size: 9px;
    color: #aaa;
  }
}
.gz-lotto-nav-card__arrow {
  font-size: 13px;
  color: var(--nav-color, #ccc);
  font-weight: 900;
}
.gz-lotto-nav-card--multi {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1;
}
.gz-lotto-nav-card--multi .gz-lotto-nav-card__arrow {
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 767px) {
  .gz-lgt-group-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin: 0.5rem 0;
  }
  .gz-lgt-group-cards .gz-lotto-card-bordered {
    border-radius: 6px;
  }
  .gz-lgt-group-cards .gz-lotto-card-row {
    flex-direction: row;
    align-items: stretch;
  }
  .gz-lgt-group-cards .gz-lotto-card-left {
    border-radius: 6px 0 0 6px;
    padding: 0.5rem 0.4rem;
    flex: 1;
    min-width: 0;
  }
  .gz-lgt-group-cards .gz-lotto-card-right {
    width: 70px !important;
    min-width: 70px;
    border-radius: 0 6px 6px 0;
  gap: 6px;
    padding: 0.4rem 0.3rem;
  }
  .gz-lgt-group-cards .gz-lotto-balls-row {
    gap: 2px;
  }
  .gz-lgt-group-cards .gz-lotto-ball {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }
  .gz-lgt-group-cards .gz-lotto-card-next-label { font-size: 9px; }
  .gz-lgt-group-cards .gz-lotto-card-next-day-bold { font-size: 12px; margin: 2px 0; }
  .gz-lgt-group-cards .gz-lotto-card-countdown-bold { font-size: 10px; }
  .gz-lgt-group-cards .gz-lotto-card-jackpot-val { font-size: 0.85rem; }
  .gz-lgt-group-cards .gz-lotto-card-odds { display: none; }
  .gz-lgt-group-cards .gz-lotto-card-tabs { display: none; }
  .gz-lgt-group-cards .mag-faded-border,
  .gz-lgt-group-cards .gz-snake-wrap,
  .gz-lgt-group-cards .lotto-section-intro { display: none; }
}


@media (max-width: 480px) {
  .gz-lotto-card-left {
    padding: 0.5rem 0.5rem 0.4rem;
  }
  .gz-lotto-card-prize-box {
    padding: 0.35rem 0.35rem;
  }
  .gz-lotto-card-right {
    width: 155px !important;
    min-width: 155px;
    padding: 0.6rem 0.5rem;
    justify-content: center;
  }
  .gz-lotto-card-jackpot-val {
    font-size: 1rem !important;
  }
  .gz-lotto-card-countdown-bold {
    font-size: 11px !important;
    line-height: 1.2;
    white-space: nowrap;
  }
  .gz-lotto-card-next-day-bold {
    font-size: 14px !important;
  }
}

/* Desktop — wider next draw right panel */
@media (min-width: 768px) {
  .gz-lotto-card-right {
    width: 375px;
    padding: 1rem 0.85rem;
    justify-content: center;
  }
}

/* Lotto individual game pages — wider right panel, centred card */
@media (min-width: 768px) {
  .gz-lgt-draw-row-wrap .gz-lotto-card-right {
    width: 275px !important;
    padding: 1rem 1.25rem;
  }
  .gz-lgt-draw-row-wrap .gz-lotto-card-jackpot-val {
    font-size: 1.6rem !important;
  }
  .gz-lgt-draw-row-wrap .gz-lotto-card-next-day-bold {
    font-size: 1.1rem !important;
  }
}

.gz-lgt-draw-row-wrap {
  max-width: 780px;
  margin: 0 auto 2rem;
}

/* Snake wrap inside lotto card right column */
.gz-snake-wrap--card {
  --gz-angle: 0deg;
  display: inline-block;
  position: relative;
  padding: 2px;
  border-radius: 3px;
  animation: gz-spin 4s linear infinite;
  margin-top: -0.25rem;
  margin-bottom: 0.5rem;
}
.gz-snake-wrap--card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  padding: 1.5px;
  background: conic-gradient(from var(--gz-angle), rgba(255,255,255,0) 0deg, rgba(255,255,255,0.9) 60deg, rgba(255,255,255,0) 120deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.gz-lotto-card-next-label {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.1em;
  padding: 1px 4px;
}

/* ── Tonight card — mobile sizing ── */
@media (max-width: 767px) {
  .gz-tonight-timers {
    width: 100%;
    box-sizing: border-box;
    gap: 3px;
  }
  .gz-tonight-card {
    margin: 0.75rem 0 1rem;
  }
  .gz-tonight-card__header {
    padding: 0.85rem 1rem 0.65rem;
  }
  .gz-tonight-card__kicker {
    font-size: 11px;
    margin-bottom: 0.25rem;
  }
  .gz-tonight-card__game {
    font-size: 20px;
  }
  .gz-tonight-card__countdown {
    padding: 0.65rem 0.75rem 0.35rem;
  }
  .gz-tonight-timer-lbl {
    font-size: 10px;
  }
  .gz-tonight-card__draw-label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    margin-top: 6px;
  }
  .gz-tonight-card__rollover {
  display: block;
  font-family: var(--font-dauble);
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.2);
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.gz-tonight-card__featured-note {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
  }
  .gz-tonight-card__balls {
    padding: 0.5rem 0.75rem 0.2rem;
    gap: 5px;
  }
  .gz-tonight-ball {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
  .gz-tonight-card__jp-wrap {
    padding: 0.55rem 0.75rem 0.15rem;
    margin-top: 0.4rem;
  }
  .gz-tonight-card__jp {
    font-size: 20px;
  }
  .gz-tonight-card__jp-label {
    font-size: 11px;
  }
  .gz-tonight-card__link {
    margin: 0.5rem 0.75rem 0.2rem;
    padding: 0.55rem 0.75rem;
    font-size: 13px;
  }
  .gz-tonight-card__drawn-label {
    font-size: 13px;
    padding: 0.55rem 0.75rem 0.1rem;
  }
}

/* Snake in sidebar — slightly smaller to fit column width */
.gz-snake-wrap--sidebar { margin-bottom: 0.5rem; }
.gz-snake-wrap--sidebar .gz-snake-label { font-size: 11px; }

/* ── Tonight card — snaking border ── */
.gz-tonight-snake-border {
  --gz-angle: 0deg;
  position: relative;
  padding: 3px;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: conic-gradient(from var(--gz-angle), transparent 75%, var(--gz-today-color, #E8875A) 100%);
  animation: gz-snake 2s linear infinite;
}
.gz-tonight-snake-border::before {
  display: none;
}
.gz-tonight-snake-border .gz-tonight-card {
  border-radius: 6px;
  margin: 0;
  overflow: hidden;
}

/* ============================================
   HOT & COLD BALLS PAGE
   ============================================ */

/* Draw tab bar */
.gz-hc-draw-tabs { margin: 1.25rem 0 0; }
.gz-hc-draw-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f0f0f0;
}
.gz-hc-draw-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  font-size: 12px;
  font-weight: 800;
  color: #888;
  background: #f5f5f5;
  border: 1.5px solid #e8e8e8;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
@media (min-width: 600px) { .gz-hc-draw-tab { font-size: 13px; } }
.gz-hc-draw-tab:hover { border-color: var(--dt-color, #7C3AED); color: var(--dt-color, #7C3AED); background: #fff; }
.gz-hc-draw-tab--active {
  background: var(--dt-color, #7C3AED);
  border-color: var(--dt-color, #7C3AED);
  color: #fff !important;
}
.gz-hc-draw-tab-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.gz-hc-draw-tab--active .gz-hc-draw-tab-dot { background: rgba(255,255,255,0.7) !important; }

/* Draw panels */
.gz-hc-draw-panel { }
.gz-hc-draw-panel--hidden { display: none; }
.gz-hc-draw-meta { font-size: 12px; color: #aaa; margin: 0 0 0.85rem; font-weight: 600; }
.gz-hc-draw-intro {
  font-size: 14px;
  color: #333;
  text-align: center;
  margin: 0.5rem auto 1.25rem;
  max-width: 580px;
  line-height: 1.6;
  font-weight: 500;
}

/* Period pills */
.gz-hc-period-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; }
.gz-hc-pill {
  display: inline-block; padding: 0.28rem 0.75rem;
  font-size: 11px; font-weight: 800; color: #aaa;
  border: 1px solid #e0e0e0; border-radius: 20px; background: #f8f8f8;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.gz-hc-pill:hover { border-color: var(--pill-color, #7C3AED); color: var(--pill-color, #7C3AED); }
.gz-hc-pill--active { background: var(--pill-color, #7C3AED); border-color: var(--pill-color, #7C3AED); color: #fff !important; }
.gz-hc-period-panel--hidden { display: none; }
.gz-hc-period-meta { font-size: 12px; color: #999; margin: 0 0 0.75rem; font-weight: 600; }

/* Row sections — full width, no columns */
.gz-hc-row-section {
  width: 100%;
  background: #fafafa;
  border-radius: 10px;
  padding: 0.85rem 0.85rem 1rem;
  box-sizing: border-box;
}
.gz-hc-row-section--hot { background: #fff5f5; border-left: 4px solid #f87171; }
.gz-hc-row-section--cold { background: #f0f6ff; border-left: 4px solid #60a5fa; }
.gz-hc-row-label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 13px; margin-bottom: 0.65rem; padding-left: 0.5rem;
  border-left: 3px solid #e0e0e0;
}
.gz-hc-row-label--hot  { border-left-color: #f87171; }
.gz-hc-row-label--cold { border-left-color: #60a5fa; }
.gz-hc-row-label strong { font-weight: 900; color: #222; }
.gz-hc-row-sub { font-size: 11px; color: #aaa; }
.gz-hc-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.gz-hc-ball-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gz-hc-ball {
  width: 34px !important; height: 34px !important;
  font-size: 11px !important; line-height: 34px !important;
  display: inline-block !important; border-radius: 50% !important;
  text-align: center !important; font-weight: 900 !important;
}
@media (min-width: 600px) {
  .gz-hc-ball { width: 40px !important; height: 40px !important; font-size: 13px !important; line-height: 40px !important; }
}
.gz-hc-ball--hot  { box-shadow: 0 0 0 2px #fca5a5; }
.gz-hc-ball--cold { box-shadow: 0 0 0 2px #93c5fd; }
.gz-hc-ball-count { font-size: 9px; color: #888; font-weight: 700; }

/* Monthly grid */
.gz-hc-monthly-wrap { margin: 1.25rem 0 0.5rem; }
.gz-hc-chart-title { font-size: 12px; font-weight: 700; color: #777; margin: 0 0 0.75rem; }
.gz-hc-monthly-grid { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.gz-hc-month-col { min-width: 58px; }
.gz-hc-month-name {
  font-size: 10px; font-weight: 900; color: #555;
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 0.4rem; padding-bottom: 3px; border-bottom: 2px solid #f0f0f0;
}
.gz-hc-month-balls { display: flex; flex-direction: column; gap: 5px; }
.gz-hc-ball--sm {
  width: 28px !important; height: 28px !important;
  font-size: 10px !important; line-height: 28px !important;
  display: inline-block !important; border-radius: 50% !important;
  text-align: center !important; font-weight: 900 !important;
}
.gz-hc-ball--consistent { box-shadow: 0 0 0 2px #f87171; }
.gz-hc-monthly-key { font-size: 10px; color: #bbb; margin: 0.5rem 0 0; }
.gz-hc-disclaimer { font-size: 11px; color: #bbb; line-height: 1.5; }

/* Back to top + compare lottos buttons */
.gz-hc-back-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #888;
  text-decoration: none;
  margin-right: 1rem;
}
.gz-hc-back-link:hover { color: #333; }
.gz-hc-top-btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--lotto-peach, #7C3AED);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: opacity 0.15s;
}
.gz-hc-top-btn:hover { opacity: 0.85; }

/* Results link under each draw */
.gz-hc-results-link {
  display: inline-block;
  margin: 1rem 0 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--rc, #7C3AED);
  text-decoration: none;
  border-bottom: 2px solid var(--rc, #7C3AED);
  padding-bottom: 1px;
}
.gz-hc-results-link:hover { opacity: 0.75; }

/* Sidebar draw selector active state */
.gz-hc-sidebar-btn--active {
  background: #fff !important;
  border-left: 3px solid var(--nav-color, #7C3AED) !important;
  font-weight: 900;
}
.gz-hc-sidebar-btn--active .gz-lotto-nav-card__name { color: var(--nav-color, #7C3AED); }

/* Fact sheet */
.gz-hc-factsheet { margin: 2rem 0 1rem; }
.gz-hc-facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}
@media (max-width: 600px) { .gz-hc-facts-grid { grid-template-columns: 1fr; } }
.gz-hc-fact {
  background: #fafafa;
  border-radius: 8px;
  padding: 0.85rem;
  border-left: 3px solid #f0f0f0;
}
.gz-hc-fact-icon { font-size: 20px; display: block; margin-bottom: 0.35rem; }
.gz-hc-fact strong { font-size: 13px; font-weight: 900; color: #222; display: block; margin-bottom: 0.35rem; }
.gz-hc-fact p { font-size: 12px; color: #555; line-height: 1.5; margin: 0; }

/* Bottom draw pills */
.gz-hc-bottom-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
}
.gz-hc-bottom-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  font-size: 12px;
  font-weight: 800;
  color: var(--pill-color, #7C3AED);
  border: 1.5px solid var(--pill-color, #7C3AED);
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.gz-hc-bottom-pill:hover {
  background: var(--pill-color, #7C3AED);
  color: #fff;
}
.gz-hc-bottom-pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}



/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
.gz-back-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pink, #E91E8C);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(233,30,140,0.35);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  z-index: 999;
}
.gz-back-top.gz-back-top--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.gz-back-top:hover {
  background: #c2185b;
  box-shadow: 0 6px 18px rgba(233,30,140,0.45);
}
@media (min-width: 768px) {
  .gz-back-top { bottom: 2rem; right: 2rem; width: 48px; height: 48px; }
}

/* ============================================
   ACCESSIBILITY BAR — floating text-size adjuster + back-to-top
   Sits fixed at the bottom, centred. A-/A+ always visible so users can
   scale text at any time; the ↑ Top button hides until they scroll.
   ============================================ */
.gz-access-bar {
  position: fixed;
  bottom: 7rem;                 /* clears the 44px ticker + 52px cube attached on top */
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.gz-access-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  padding: 0.5rem 0.8rem;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: #9c27b0;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
}
.gz-access-btn:hover { opacity: 0.88; }
.gz-access-btn:active { transform: scale(0.94); }
.gz-access-btn--top {
  padding: 0.5rem 1rem;
  font-size: 12px;
}
@media (min-width: 600px) {
  .gz-access-bar { bottom: 3.5rem; }
}

/* Hub brands row — full width horizontal after Latest Results */
.gz-lotto-hub-brands {
  display: flex;
  gap: 1rem;
  margin: 1.25rem 0 1.5rem;
  flex-wrap: wrap;
}
.gz-lotto-hub-brands .gz-lotto-op-card {
  flex: 1;
  min-width: 180px;
  max-width: 260px;
  margin-bottom: 0;
}
.gz-lotto-hub-brands .gz-lotto-nav-cards {
  display: none; /* hide nav links in this context */
}
@media (max-width: 600px) {
  .gz-lotto-hub-brands .gz-lotto-op-card {
    min-width: 140px;
  }
}

.gz-lotto-op-card__odds {
  font-size: 11px;
  color: #666;
  margin: 2px 0 8px;
  line-height: 1.5;
  border-top: 1px solid #f0f0f0;
  padding-top: 6px;
}

/* Odds comparison table */
.gz-odds-table-wrap {
  overflow-x: auto;
  margin: 0.75rem 0 1.5rem;
}
.gz-odds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 320px;
}
.gz-odds-table thead th {
  background: #f5f0ff;
  color: #6b21a8;
  padding: 8px 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #e0d0ff;
}
.gz-odds-table thead th:first-child {
  text-align: center;
  background: #1a1a1a;
  color: #fff;
}
.gz-odds-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
  color: #333;
  font-weight: 600;
}
.gz-odds-table tbody tr:nth-child(even) td { background: #faf7ff; }
.gz-odds-table__ball {
  text-align: left !important;
  font-weight: 800 !important;
  color: #111 !important;
  background: #f9f9f9 !important;
  white-space: nowrap;
}

/* What Is box — desktop left column, hidden on mobile */
.gz-lgt-what-is-box--desktop { display: block; }
/* Sidebar what-is — hidden on desktop, shown on mobile */
.gz-lgt-what-is-box:not(.gz-lgt-what-is-box--desktop) { display: none; }
/* Quick facts — mobile sidebar only, hidden on desktop */
.gz-lgt-quick-facts { display: none; }

@media (max-width: 767px) {
  .gz-lgt-quick-facts { display: block; }
}

@media (max-width: 767px) {
  .gz-lgt-what-is-box--desktop { display: none; }
  .gz-lgt-what-is-box:not(.gz-lgt-what-is-box--desktop) { display: block; }
}

/* What Is box — desktop left column only, mobile sidebar only */
.gz-lgt-what-is-box--mobile { display: block; }
.gz-lgt-what-is-box--desktop { display: none; }

@media (min-width: 768px) {
  .gz-lgt-what-is-box--mobile  { display: none; }
  .gz-lgt-what-is-box--desktop { display: block; }
}

.gz-odds-table__cta {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 5px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s;
}
.gz-odds-table__cta:hover { opacity: 0.85; }

/* ── Brand Compare ─────────────────────────────────────── */
.gz-brand-compare { margin: 1rem 0 1.5rem; }
.gz-brand-compare__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 0.65rem;
}

/* Desktop table */
.gz-brand-compare__table-wrap { overflow-x: auto; }
.gz-brand-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.gz-brand-compare__table th {
  padding: 0.6rem 0.75rem;
  text-align: center;
  background: #f5f5f5;
  border-bottom: 2px solid #e0e0e0;
  font-weight: 700;
  white-space: nowrap;
}
.gz-brand-compare__table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid #f0f0f0;
}
.gz-brand-compare__best { color: #666; font-size: 0.82rem; }
.gz-brand-compare__cta {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 5px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.gz-brand-compare__cta:hover { opacity: 0.85; }

/* Mobile cards — hidden on desktop */
.gz-brand-compare__cards { display: none; }

@media (max-width: 640px) {
  .gz-brand-compare__table-wrap { display: none; }
  .gz-brand-compare__cards {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  .gz-brand-compare__card {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .gz-brand-compare__card-header {
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.65rem 1rem;
    letter-spacing: 0.5px;
  }
  .gz-brand-compare__card-body { padding: 0.25rem 0 0.75rem; }
  .gz-brand-compare__row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.45rem 1rem;
    border-bottom: 1px solid #f5f5f5;
  }
  .gz-brand-compare__row--meta {
    background: #fafafa;
    font-size: 0.82rem;
  }
  .gz-brand-compare__ball {
    font-size: 0.82rem;
    color: #666;
  }
  .gz-brand-compare__val {
    font-weight: 700;
    font-size: 0.9rem;
    color: #111;
  }
  .gz-brand-compare__card-cta {
    display: block;
    margin: 0.75rem 1rem 0;
    padding: 0.65rem;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    font-size: 0.9rem;
  }
}

.gz-odds-table__meta-row td {
  background: #f9f9f9;
  font-size: 0.82rem;
  color: #555;
  border-top: 1px solid #e8e8e8;
}
.gz-odds-table__meta-row .gz-odds-table__ball em {
  font-style: normal;
  font-weight: 600;
  color: #888;
}

/* ── Lotto Comparison Cards ─────────────────────────────── */
.lotto-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
.lotto-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.lotto-card__header {
  padding: 0.75rem 1rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.lotto-card__tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.25);
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
}
.lotto-card__body {
  padding: 0.75rem 1rem;
}
.lotto-card__body p {
  margin: 0.35rem 0;
  font-size: 0.88rem;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 0.35rem;
}
.lotto-card__body p:last-of-type { border-bottom: none; }
.lotto-card__cta {
  display: block;
  margin-top: 0.75rem;
  padding: 0.6rem 1rem;
  border-radius: 7px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  font-size: 0.88rem;
  transition: opacity .15s;
}
.lotto-card__cta:hover { opacity: 0.88; }

@media (max-width: 480px) {
  .lotto-comparison { grid-template-columns: 1fr; }
}

/* ── Lotto Comparison Cards — versus layout ─────────────── */
.lotto-comparison { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0 1.5rem; }

.lotto-comparison__versus {
  display: flex;
  gap: 10px;
  align-items: stretch;
  position: relative;
}
.lotto-comparison__vs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #111;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 0.3rem 0.45rem;
  border-radius: 50%;
  z-index: 2;
  line-height: 1;
}
.lotto-card--half { flex: 1; min-width: 0; }
.lotto-card--full {}

.lotto-card { border-radius: 10px; overflow: hidden; border: 1px solid #e8e8e8; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.lotto-card__header {
  padding: 0.65rem 0.85rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
}
.lotto-card__tag {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.25);
  padding: 0.2rem 0.45rem;
  border-radius: 20px;
  white-space: nowrap;
}
.lotto-card__body { padding: 0.7rem 0.85rem; }
.lotto-card__hook {
  font-size: 1.4rem;
  font-weight: 900;
  color: #111;
  margin: 0.25rem 0 0;
  line-height: 1.1;
}
.lotto-card__hook span {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #888;
  margin-top: 2px;
}
.lotto-card__meta {
  font-size: 0.75rem;
  color: #666;
  margin: 0.4rem 0 0.5rem;
}
.lotto-card__body p {
  margin: 0.3rem 0;
  font-size: 0.85rem;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 0.3rem;
}
.lotto-card__body p:last-of-type { border-bottom: none; }
.lotto-card__body--row { display: flex; gap: 1rem; }
.lotto-card__body-col { flex: 1; min-width: 0; }
.lotto-card__cta {
  display: block;
  margin-top: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 7px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  font-size: 0.82rem;
  transition: opacity .15s;
  white-space: nowrap;
}
.lotto-card__cta:hover { opacity: 0.88; }

/* ── Lotto Grid Card ─────────────────────────────────────── */
.lotto-grid-card {
  overflow: hidden;
  border: 3px solid var(--gz-game-color, #16A34A);
  box-shadow: var(--shadow-md);
  margin: 1rem 0 0.5rem;
}
.lotto-grid-card__head,
.lotto-grid-card__row {
  display: grid;
  grid-template-columns: 70px repeat(3, 1fr);
}
@media (max-width: 480px) {
  .lotto-grid-card__head,
  .lotto-grid-card__row {
    grid-template-columns: 52px repeat(3, 1fr);
  }
}
.lotto-grid-card__head {
  background: linear-gradient(135deg, #0a1f0d 0%, #1a3d1f 100%);
}
.lotto-grid-card__label {
  background: transparent;
  padding: 0.75rem 0.5rem;
}
.lotto-grid-card__brand {
  padding: 0.65rem 0.4rem;
  color: #fff;
  text-align: center;
  font-family: var(--font-editorial);
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  border-left: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 480px) {
  .lotto-grid-card__brand {
    font-size: 0.65rem;
    padding: 0.5rem 0.2rem;
  }
}
.lotto-grid-card__row {
  border-bottom: 1px solid #f0f0f0;
}
.lotto-grid-card__row--alt { background: #f9f9f9; }
.lotto-grid-card__ball {
  padding: 0.6rem 0.4rem;
  font-size: 0.75rem;
  color: #fff;
  font-weight: 800;
  text-align: center;
  background: var(--gz-game-color, #16A34A);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.3px;
}
@media (max-width: 480px) {
  .lotto-grid-card__ball {
    font-size: 0.65rem;
    padding: 0.5rem 0.2rem;
  }
}
.lotto-grid-card__val {
  padding: 0.6rem 0.4rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: #111;
  text-align: center;
  border-left: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 480px) {
  .lotto-grid-card__val {
    font-size: 0.75rem;
    padding: 0.5rem 0.2rem;
  }
}

.lotto-grid-card__row--actions {
  background: #f8f8f8;
  border-top: 2px solid var(--gz-game-color, #16A34A);
  border-bottom: none;
}
.lotto-grid-card__row--actions .lotto-grid-card__ball {
  font-size: 0.65rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.lotto-grid-card__cta {
  display: block;
  background: var(--gz-game-color, #16A34A);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.15s;
  width: 100%;
}
.lotto-grid-card__cta:hover { opacity: 0.88; }
.lotto-grid-card__review {
  display: block;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #888;
  text-decoration: underline;
  margin-top: 0.3rem;
}
.lotto-grid-card__review:hover { color: #555; }
@media (max-width: 480px) {
  .lotto-grid-card__cta {
    font-size: 10px;
    padding: 0.35rem 0.3rem;
  }
}
.gz-euro-syndicate-compare {
  background: #fff;
  border: 3px solid #2563EB;
  box-shadow: var(--shadow-md);
  margin: 1.5rem 0;
  overflow: hidden;
}
.gz-euro-syndicate-compare__table-wrap { overflow-x: auto; }
.gz-euro-syndicate-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.gz-euro-syndicate-compare__table thead tr {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563EB 100%);
}
.gz-euro-syndicate-compare__table th {
  color: #fff;
  padding: 0.65rem 0.85rem;
  text-align: center;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 700;
  font-size: 0.8rem;
}
.gz-euro-syndicate-compare__table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}
.gz-euro-syndicate-compare__row--highlight td {
  background: #eff6ff;
  color: #1e3a8a;
}
.gz-euro-syndicate-compare__row--highlight a {
  color: #2563EB;
  text-decoration: none;
  font-weight: 800;
}
.gz-euro-syndicate-compare__note {
  font-size: 10px;
  color: #999;
  display: block;
}
.gz-euro-syndicate-compare__points {
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-top: 1px solid #e8e8e8;
}
.gz-euro-syndicate-compare__point {
  display: flex;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: #444;
  line-height: 1.5;
}
.gz-euro-syndicate-compare__icon {
  color: #2563EB;
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-top: 4px;
}
.gz-euro-syndicate-compare__warning {
  margin: 0 1rem 0.85rem;
  padding: 0.65rem 0.85rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 3px solid #f59e0b;
  font-size: 0.8rem;
  color: #555;
  line-height: 1.5;
}
.gz-euro-syndicate-compare__cta {
  display: block;
  text-align: center;
  background: #2563EB;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: opacity 0.15s;
}
.gz-euro-syndicate-compare__cta:hover { opacity: 0.88; }

/* Related countdown cards — sidebar on German, Polish etc */
.gz-lgt-related-countdowns { display: flex; flex-direction: column; gap: 0; margin-top: 0.75rem; width: 100%; }
@media (min-width: 768px) {
  .gz-lgt-related-countdowns { width: 100%; }
  .gz-lgt-related-countdowns .gz-tonight-snake-border { width: 100%; }
}

/* More lottos details/summary — Google crawlable, visually collapsible */
.gz-lgt-rc-more { position: relative; margin-top: 0.4rem; margin-bottom: 1.25rem; border-radius: 8px; overflow: visible; }
.gz-lgt-rc-more--full { display: none; }
.gz-lgt-rc-more--left-col { display: none; margin-top: 0.5rem; }
.gz-lgt-rc-more--mobile-only { display: block; }
@media (min-width: 768px) {
  .gz-lgt-rc-more--left-col { display: block; }
  .gz-lgt-rc-more--mobile-only { display: none; }
}
/* Toggle styled to look like a native <select> field — clear "click me" affordance */
.gz-lgt-rc-more__toggle {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;
  padding: 0.65rem 2.2rem 0.65rem 0.9rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  user-select: none;
  position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.gz-lgt-rc-more__toggle:hover {
  border-color: var(--gz-game-color, #9c27b0);
  box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.08);
}
.gz-lgt-rc-more__toggle:focus-visible {
  outline: none;
  border-color: var(--gz-game-color, #9c27b0);
  box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.18);
}
details[open] .gz-lgt-rc-more__toggle {
  border-radius: 8px 8px 0 0;
  border-bottom-color: transparent;
  border-color: var(--gz-game-color, #9c27b0);
}
.gz-lgt-rc-more__toggle::-webkit-details-marker { display: none; }
/* Down-chevron on the right — the universal "this is a select" cue */
.gz-lgt-rc-more__arrow {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  font-size: 0;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.2s, border-color .15s;
}
.gz-lgt-rc-more__toggle:hover .gz-lgt-rc-more__arrow { border-color: var(--gz-game-color, #9c27b0); }
details[open] .gz-lgt-rc-more__arrow {
  transform: translateY(-30%) rotate(-135deg);
  border-color: var(--gz-game-color, #9c27b0);
}
.gz-lgt-rc-more__list { display: flex; flex-direction: column; background: #fff; }
.gz-lgt-rc-more__list--scroll { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; max-height: 280px; overflow-y: auto; border: 1.5px solid var(--gz-game-color, #9c27b0); border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.gz-lgt-rc-more__link { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; font-size: 0.85rem; font-weight: 500; color: #333; text-decoration: none; border-left: 3px solid #ccc; border-bottom: 1px solid #f0f0f0; background: #fff; }
.gz-lgt-rc-more__link:last-child { border-bottom: none; }
.gz-lgt-rc-more__link:hover { background: #f9fafb; color: #1a1a1a; }
.gz-lgt-rc-more__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gz-lgt-expert-verdict {
  margin-top: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 3px solid transparent;
  border-image: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1;
  text-align: center;
  box-shadow: var(--shadow-dark);
  position: relative;
  overflow: visible;
}
.gz-lgt-expert-verdict__inner {
  position: relative;
}
.gz-lgt-expert-verdict__text {
  font-size: 12.5px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin: 0;
  padding: 0.15rem 0 0;
  text-align: center;
}
@media (min-width: 768px) {
  .gz-lgt-expert-verdict__text { font-size: 14.5px; line-height: 1.6; }
}
.gz-lgt-expert-verdict__text strong {
  color: #fff;
}
.gz-lgt-expert-verdict__text:last-child { padding-bottom: 0; }

.gz-sidebar-ad { width: 100%; margin-bottom: 1rem; }
.gz-sidebar-ad__placeholder {
  background: #f5f5f5;
  border: 1px dashed #ccc;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: #aaa;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* Mobile only */
.gz-sidebar-ad--mobile { display: block; }
@media (min-width: 768px) {
  .gz-sidebar-ad--mobile { display: none; }
}

/* Quick stats / What Is box — full width */
.lotto-stats-mobile .mag-picks-box,
.lotto-stats-mobile .gz-lgt-picks-plain,
.lotto-stats-mobile .gz-lgt-picks-box {
  width: 100%;
  box-sizing: border-box;
}
.gz-lgt-what-is-box,
.gz-lgt-what-is-box--mobile,
.gz-lgt-what-is-box--desktop {
  width: 100%;
  box-sizing: border-box;
}

.gz-lgt-what-is-box--desktop {
  margin-top: 1.5rem;
  background: #fff;
  border: 3px solid var(--gz-game-color, #16A34A);
  overflow: hidden;
  width: 100%;
  box-shadow: var(--shadow-md);
}
.gz-lgt-what-is-box__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.gz-lgt-what-is-box__row { border-top: 1px solid #ebebeb; }
.gz-lgt-what-is-box__label { padding: 0.4rem 0.9rem; color: #888; font-weight: 700; white-space: nowrap; width: 40%; }
.gz-lgt-what-is-box__value { padding: 0.4rem 0.9rem; color: #333; }

/* Quick Facts full-width (mobile) */
.gz-lgt-quick-facts {
  background: #fff;
  overflow: hidden;
  border: 3px solid var(--gz-game-color, #16A34A);
  margin: 1rem 0;
  box-shadow: var(--shadow-md);
}
.gz-lgt-quick-facts__heading {
  background: linear-gradient(135deg, #0a1f0d 0%, #1a3d1f 100%);
  padding: 0.85rem 1rem 0.75rem;
  text-align: center;
}
.gz-lgt-quick-facts__heading-label {
  background: var(--gz-game-color, #16A34A);
  color: #fff;
  display: inline-block;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-bottom: 0.4rem;
  transform: rotate(-2deg);
}
.gz-lgt-quick-facts__heading-title {
  font-family: var(--font-editorial);
  font-size: 17px;
  font-style: italic;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.25;
  display: block;
}
@media (min-width: 768px) {
  .gz-lgt-quick-facts__heading-title { font-size: 19px; }
}
.gz-lgt-quick-facts__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.gz-lgt-quick-facts__row { border-top: 1px solid #ebebeb; }
.gz-lgt-quick-facts__label { padding: 0.5rem 0.9rem; color: #888; font-weight: 700; white-space: nowrap; width: 35%; }
.gz-lgt-quick-facts__value { padding: 0.5rem 0.9rem; color: #333; }

@media (max-width: 767px) {
  .gz-lgt-quick-facts__row { display: block; padding: 0.4rem 0; }
  .gz-lgt-quick-facts__label { display: block; width: 100%; padding: 0.4rem 0.9rem 0.1rem; font-size: 0.7rem; letter-spacing: 0.5px; text-transform: uppercase; white-space: normal; }
  .gz-lgt-quick-facts__value { display: block; width: 100%; padding: 0.1rem 0.9rem 0.4rem; }
}

/* Compare jump links */
.gz-lgt-compare-link {
  color: var(--gz-game-color, #16A34A);
  font-weight: 700;
  text-decoration: underline;
}
.gz-lgt-compare-link:hover { opacity: 0.8; }
.gz-lgt-compare-link--sm {
  font-size: 0.82rem;
  opacity: 0.85;
}

/* Odds disclaimer */
.gz-lgt-odds-disclaimer { font-size: 0.85rem; }

/* Tiers no-border variant */
.gz-lgt-tiers--borderless { border: none; margin-bottom: 0; }

/* Card inner countdown timer positioning */
.gz-lotto-card-timers { margin: 0.5rem 0; }
@media (max-width: 520px) {
  .gz-lotto-card-timers { margin: 0.35rem 0; gap: 4px; }
  .gz-lotto-card-timers .gz-tonight-timer-box { font-size: 20px; min-width: 38px; padding: 4px 6px 3px; }
  .gz-lotto-card-timers .gz-tonight-timer-sep { font-size: 16px !important; padding-bottom: 10px !important; }
  .gz-lotto-card-timers .gz-tonight-timer-lbl { font-size: 8px; }
  .gz-lotto-card-timers .gz-tonight-timer-unit { gap: 2px; }
  .gz-lotto-card-right { padding: 0.6rem 0.5rem; }
  .gz-lotto-card-next-day-bold { font-size: 15px; margin: 0 0 2px; }
}

/* Irish Lotto drop cap */
.gz-lgt-drop-cap--irish {
  background: linear-gradient(135deg,#15803d,#16A34A,#4ade80,#166534,#86efac,#16A34A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gz-lgt-drop-cap--german {
  background: linear-gradient(135deg,#000,#CC0000,#FFD700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gz-lgt-drop-cap--polish {
  background: linear-gradient(135deg,#DC143C,#a50e2d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gz-lgt-drop-cap--euro {
  background: linear-gradient(135deg,#1e3a8a,#2563EB,#60a5fa,#1e40af,#93c5fd,#2563EB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gz-lgt-drop-cap--health {
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Health Lottery — multi-gradient overrides for pro-tip box */
.gz-lgt-pro-tip--health {
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1;
  background: #fdf4f7;
}
.gz-lgt-pro-tip--health .gz-lgt-pro-tip__label {
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gz-lgt-pro-tip--health .gz-lgt-pro-tip__subhead {
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gz-lgt-pro-tip--health .gz-lgt-pro-tip__list li::marker {
  color: #9c27b0;
}

/* German Lotto — pro-tip box overrides */
.gz-lgt-pro-tip--german {
  background: #fdf5f5;
  border-left: 4px solid #CC0000;
}
.gz-lgt-pro-tip--german .gz-lgt-pro-tip__label {
  color: #CC0000;
}
.gz-lgt-pro-tip--german .gz-lgt-pro-tip__subhead {
  color: #CC0000;
}
.gz-lgt-pro-tip--german .gz-lgt-pro-tip__list li::marker {
  color: #CC0000;
}

/* Polish Lotto — pro-tip box overrides */
.gz-lgt-pro-tip--polish {
  background: #fdf5f5;
  border-left: 4px solid #DC143C;
}
.gz-lgt-pro-tip--polish .gz-lgt-pro-tip__label {
  color: #DC143C;
}
.gz-lgt-pro-tip--polish .gz-lgt-pro-tip__subhead {
  color: #DC143C;
}
.gz-lgt-pro-tip--polish .gz-lgt-pro-tip__list li::marker {
  color: #DC143C;
}

/* Health Lottery — multi-gradient quick facts box */
.gz-lgt-quick-facts--health {
  border: 3px solid transparent;
  border-image: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1;
}
.gz-lgt-quick-facts--health .gz-lgt-quick-facts__heading-label {
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
  color: #fff;
}
.gz-lgt-what-is-box--desktop.gz-lgt-quick-facts--health {
  border: 3px solid transparent;
  border-image: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1;
}

/* Health Lottery — multi-gradient featured bookmakers */
.gz-lotto-ops-wrap--health .gz-lotto-ops-wrap__heading {
  border: 3px solid transparent;
  border-image: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1;
  border-bottom: none;
}
.gz-lotto-ops-wrap--health .gz-lotto-ops-wrap__heading-label {
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
  color: #fff;
}
.gz-lotto-ops-wrap--health .gz-lotto-op-card--featured {
  border: 3px solid transparent;
  border-image: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1;
  border-top: none;
  border-radius: 0;
}
.gz-lotto-ops-wrap--health .gz-lotto-op-card__btn--visit {
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
  color: #fff;
}
.gz-lotto-ops-wrap--health .gz-lotto-op-card__stars .gz-star--filled {
  color: #7C3AED;
}

/* Health Lottery — multi "Did you win?" text */
.gz-lgt-did-you-win--health {
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Health Lottery — multi compare grid border */
.lotto-grid-card--health {
  border: 3px solid transparent;
  border-image: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1;
}

/* Health Lottery — multi tiers (Where to Play) border */
.gz-lgt-tiers--health {
  border: 2px solid transparent !important;
  border-image: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1 !important;
}

/* Did You Know callout box */
.gz-lgt-did-you-know {
  background: #f0fdf4;
  border-left: 4px solid #16A34A;
  border-radius: 0 8px 8px 0;
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  color: #1a3a1a;
}
.gz-lgt-did-you-know--irish { border-color: #16A34A; }
.gz-lgt-did-you-know--euro  { border-color: #2563EB; background: #eff6ff; color: #1e3a8a; }
.gz-lgt-did-you-know--german { border-color: #CC0000; background: #fdf5f5; color: #3a1a1a; }
.gz-lgt-did-you-know--polish { border-color: #DC143C; background: #fdf5f5; color: #3a1a1a; }

/* Expert Verdict box — styles defined earlier, kept for __label and __p legacy classes */
.gz-lgt-expert-verdict__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #92400e;
  margin-bottom: 0.5rem;
}
.gz-lgt-expert-verdict__p {
  margin: 0 0 0.5rem;
  color: #333;
  line-height: 1.6;
}
.gz-lgt-expert-verdict__p:last-child { margin-bottom: 0; }
.gz-lgt-did-you-know__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gz-game-color, #16A34A);
  margin-bottom: 0.6rem;
  font-weight: 800;
}

/* ── Lotto page bullets and stars ───────────────────────────────────────── */
.mag-cover__body ul li::marker { color: var(--gz-game-color, #333); }
.mag-cover__body ul { padding-left: 1.2rem; }

/* ✦ ✦ ✦ stars — use game gradient/color (set via --gz-game-color) */
.gz-lgt-stars { color: var(--gz-game-color, #333); }

/* Compare Lotto Betting Odds — neutral label, never page theme */
.gz-snake-wrap--neutral { --gz-game-color: #4b5563; }
.gz-snake-label--neutral { background: #4b5563 !important; }

/* lotto-prize-table — use page theme via CSS variable */
.lotto-prize-table th { background: var(--gz-game-color, #555) !important; color: #fff; }
.lotto-grid-card--health .lotto-prize-table th,
.lotto-prize-table--compare.lotto-grid-card--health th {
  background: linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) !important;
  color: #fff;
}

/* ── Pro Tip box ─────────────────────────────────────────────────────────── */
.gz-lgt-pro-tip {
  background: #f0fdf4;
  border-left: 4px solid var(--gz-game-color, #16A34A);
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
}
.gz-lgt-pro-tip__label {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--gz-game-color, #16A34A);
  margin-bottom: 0.6rem;
}
.gz-lgt-pro-tip__list {
  margin: 0.25rem 0 0;
  padding-left: 1.2rem;
  line-height: 1.6;
  font-size: 0.875rem;
}
.gz-lgt-pro-tip__list li { margin-bottom: 0.25rem; }
.gz-lgt-pro-tip__list li::marker { color: var(--gz-game-color, #16A34A); }

.gz-lgt-pro-tip__subhead {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--gz-game-color, #16A34A);
  margin: 0.85rem 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gz-lgt-pro-tip__p {
  margin: 0 0 0.75rem;
}
.gz-lgt-pro-tip__p--sm {
  margin: 0.25rem 0 0.5rem;
}
.gz-lgt-pro-tip__p--catch {
  margin: 0.5rem 0 0.75rem;
}
.gz-lgt-compare-note {
  font-size: 12px;
  color: #888;
  font-style: italic;
  margin: 0.5rem 0 1rem;
  text-align: center;
}
.lotto-prize-table {
  overflow-x: auto;
  margin: 0.5rem 0 1rem;
}
.lotto-prize-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.lotto-prize-table th {
  padding: 10px 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.lotto-prize-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  color: #333;
  font-size: 14px;
}
.lotto-prize-table td:first-child {
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}
.lotto-prize-table td:last-child {
  font-weight: 700;
}
.lotto-prize-table tbody tr:nth-child(even) td {
  background: #fafafa;
}
.lotto-prize-table tbody tr:hover td {
  background: #f0f7ff;
}
.lotto-prize-table--compare {
  margin: 0.75rem 0 1rem;
}
.gz-lgt-odds-disclaimer {
  font-size: 12px;
  color: #888;
  margin: 0;
}

/* Latest draw card — full width centred on mobile */
@media (max-width: 767px) {
  .gz-lgt-draw-row .mag-col { margin: 0 auto; }
}

/* ============================================
   LOTTO HUB v2 — NEW DRAW CARD + NAV STYLES
   April 2026 — appended to original CSS
   ============================================ */

/* Hub page layout overrides */
.gz-lotto-hub-intro { margin-top: 1rem; }
.gz-lotto-hub-intro .mag-minis { margin-top: 0.5rem; }
.gz-lotto-section-divider { margin-top: 2rem; }
.gz-lotto-starting-title { margin: 0; }
.gz-lotto-starting-pill {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  font-family: var(--font-body);
  display: inline-block;
  vertical-align: middle;
}
@media (max-width: 520px) {
  .gz-lotto-starting-pill {
    display: block;
    margin-top: 6px;
    width: fit-content;
    font-size: 12px;
    padding: 4px 10px;
  }
}

/* ── Draw card wrapper ── */
.gz-dc-card{border-radius:10px;overflow:hidden;border:1px solid #e8e8e8;background:#fff;transition:box-shadow 0.2s,transform 0.15s}
.gz-dc-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-1px)}
.gz-dc-gradient-wrap{padding:2px;border-radius:12px;display:block;overflow:hidden}
.gz-dc-gradient-wrap .gz-dc-card{border:none}
.gz-dc-gradient-wrap--irish{background:linear-gradient(135deg,#15803d,#16A34A,#4ade80,#166534,#86efac,#16A34A)}
.gz-dc-gradient-wrap--health{background:linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9)}
.gz-dc-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:1.25rem}
@media(min-width:520px){.gz-dc-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Card header ── */
.gz-dc-top{display:flex;align-items:center;gap:8px;padding:10px 12px 8px;border-bottom:1px solid #f0f0f0}
.gz-dc-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-dauble);font-size:13px;font-weight:900;color:#fff;flex-shrink:0}
.gz-dc-info{flex:1;min-width:0}
.gz-dc-name{font-family:var(--font-dauble);font-size:13px;font-weight:900;color:var(--black);letter-spacing:0.5px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.gz-dc-days{font-size:10px;color:var(--grey-light);font-weight:600;letter-spacing:0.3px;text-transform:uppercase}
.gz-dc-bet-badge{font-size:9px;font-weight:800;background:var(--black);color:#fff;padding:1px 5px;border-radius:3px;letter-spacing:0.3px}
.gz-dc-freq-badge{font-size:9px;font-weight:800;color:#fff;padding:2px 6px;border-radius:10px;letter-spacing:0.5px;animation:gz-dc-pulse 2s infinite;flex-shrink:0}
@keyframes gz-dc-pulse{0%,100%{opacity:1}50%{opacity:0.6}}

/* ── Card body ── */
.gz-dc-body{padding:10px 12px}
.gz-dc-draw-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:2px}
.gz-dc-date{font-size:11px;color:#999;font-weight:600;margin-bottom:6px}
.gz-dc-balls{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:8px}
.gz-dc-ball{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.gz-dc-ball--bonus{opacity:0.85}
.gz-dc-bonus-plus{font-size:12px;color:var(--grey-light);font-weight:700;margin:0 1px}
.gz-dc-bonus-label{font-size:9px;color:var(--grey-light);font-weight:700;margin-left:2px}

/* ── Stats row ── */
.gz-dc-stats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.gz-dc-stat{display:flex;flex-direction:column;background:#f7f7f7;border-radius:6px;padding:5px 8px;flex:1;min-width:60px}
.gz-dc-stat__label{font-size:9px;color:var(--grey-light);font-weight:700;text-transform:uppercase;letter-spacing:0.3px}
.gz-dc-stat__val{font-size:12px;font-weight:800;color:var(--black)}
.gz-dc-stat__val--jp{font-size:13px}

/* ── Next draw ── */
.gz-dc-next{text-align:center;margin-top:6px;padding-top:8px;border-top:1px solid #f0f0f0}
.gz-dc-next__label{display:block;font-size:9px;color:var(--grey-light);text-transform:uppercase;letter-spacing:0.5px;font-weight:700}
.gz-dc-next__day{display:block;font-family:var(--font-editorial);font-size:13px;font-weight:700;font-style:italic;color:var(--black)}
.gz-dc-timers{margin:6px 0 4px}
.gz-dc-timers .gz-tonight-timer-box{font-size:13px;min-width:26px;padding:2px 4px;background:#f5f5f5;color:var(--black);box-shadow:none}
.gz-dc-timers .gz-tonight-timer-lbl{color:var(--grey-light);font-size:8px}
.gz-dc-timers .gz-tonight-timer-sep{font-size:12px;color:#ccc;padding-bottom:10px}
@media(min-width:768px){
  .gz-dc-timers .gz-tonight-timer-box{font-size:15px;min-width:30px;padding:3px 5px}
  .gz-dc-timers .gz-tonight-timer-sep{font-size:14px;padding-bottom:12px}
  .gz-dc-timers .gz-tonight-timer-lbl{font-size:9px}
}

/* ── Action buttons ── */
.gz-dc-actions{display:flex;gap:6px;margin-top:8px}
.gz-dc-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:7px 6px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid #e0e0e0;background:#fff;color:#444;transition:background 0.15s,border-color 0.15s;text-decoration:none;text-align:center}
.gz-dc-btn:hover{background:#f4f4f4;border-color:#ccc}
.gz-dc-btn--primary{border:none;color:#fff}
.gz-dc-btn--primary:hover{opacity:0.9}
.gz-dc-sub-note{font-size:11px;color:#999;margin:6px 0 0;line-height:1.4}

/* ── Per-game colours (lowercase slugs) ── */
.gz-dc-icon--lotto{background:#F43F5E}.gz-dc-freq-badge--lotto{background:#F43F5E}.gz-dc-stat__val--lotto{color:#F43F5E}.gz-dc-btn--lotto{color:#F43F5E;border-color:#F43F5E}.gz-dc-btn--lotto:hover{background:#fef2f2}.gz-dc-btn--primary-lotto{background:#F43F5E}
.gz-dc-icon--euromillions{background:#2563EB}.gz-dc-freq-badge--euromillions{background:#2563EB}.gz-dc-stat__val--euromillions{color:#2563EB}.gz-dc-btn--euromillions{color:#2563EB;border-color:#2563EB}.gz-dc-btn--euromillions:hover{background:#eff6ff}.gz-dc-btn--primary-euromillions{background:#2563EB}
.gz-dc-icon--irishlotto{background:#16A34A}.gz-dc-freq-badge--irishlotto{background:#16A34A}.gz-dc-stat__val--irishlotto{color:#16A34A}.gz-dc-btn--irishlotto{color:#16A34A;border-color:#16A34A}.gz-dc-btn--irishlotto:hover{background:#f0fdf4}.gz-dc-btn--primary-irishlotto{background:#16A34A}
.gz-dc-icon--healthlottery{background:linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4)}.gz-dc-freq-badge--healthlottery{background:linear-gradient(135deg,#F43F5E,#9c27b0)}.gz-dc-stat__val--healthlottery{color:#9c27b0}.gz-dc-btn--healthlottery{color:#9c27b0;border-color:#9c27b0}.gz-dc-btn--healthlottery:hover{background:#faf5ff}.gz-dc-btn--primary-healthlottery{background:linear-gradient(135deg,#F43F5E,#9c27b0)}
.gz-dc-icon--thunderball{background:#9c27b0}.gz-dc-freq-badge--thunderball{background:#9c27b0}.gz-dc-stat__val--thunderball{color:#9c27b0}.gz-dc-btn--thunderball{color:#9c27b0;border-color:#9c27b0}.gz-dc-btn--thunderball:hover{background:#faf5ff}.gz-dc-btn--primary-thunderball{background:#9c27b0}
.gz-dc-icon--setforlife{background:#00BCD4}.gz-dc-freq-badge--setforlife{background:#00BCD4}.gz-dc-stat__val--setforlife{color:#00BCD4}.gz-dc-btn--setforlife{color:#00BCD4;border-color:#00BCD4}.gz-dc-btn--setforlife:hover{background:#ecfeff}.gz-dc-btn--primary-setforlife{background:#00BCD4}

/* ── Responsive ── */
@media(max-width:480px){.gz-dc-ball{width:26px;height:26px;font-size:11px}.gz-dc-btn{font-size:10px;padding:6px 4px}.gz-dc-stat{padding:4px 6px;min-width:50px}.gz-dc-stat__val--jp{font-size:12px}.gz-dc-name{font-size:12px}.gz-dc-icon{width:30px;height:30px;font-size:11px}}
@media(min-width:768px){.gz-dc-ball{width:32px;height:32px;font-size:13px}.gz-dc-btn{font-size:12px;padding:8px 8px}.gz-dc-stat__val--jp{font-size:14px}.gz-dc-name{font-size:14px}}

/* ── Compact nav grid (2-col in left column) ── */
.gz-dc-compact-grid{display:grid;grid-template-columns:1fr;gap:4px;margin:0.75rem 0 1rem}
@media(min-width:768px){.gz-dc-compact-grid{grid-template-columns:1fr 1fr}}
.gz-dc-compact{background:#fff;border:1px solid #eee;border-left:3px solid #ccc;border-radius:8px;overflow:hidden;transition:box-shadow 0.15s}
.gz-dc-compact:hover{box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.gz-dc-compact--lotto{border-left-color:#F43F5E}.gz-dc-compact--euromillions{border-left-color:#2563EB}.gz-dc-compact--irishlotto{border-left-color:#16A34A}.gz-dc-compact--healthlottery{border-left:3px solid transparent;border-image:linear-gradient(180deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9) 1}.gz-dc-compact--thunderball{border-left-color:#9c27b0}.gz-dc-compact--setforlife{border-left-color:#00BCD4}
.gz-dc-compact__top{display:flex;align-items:center;gap:8px;padding:10px 10px;text-decoration:none;color:inherit}
.gz-dc-compact__icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-dauble);font-size:13px;font-weight:900;color:#fff;flex-shrink:0}
.gz-dc-compact__name{font-size:14px;font-weight:800;color:#222;line-height:1.2}
.gz-dc-compact__date{font-family:var(--font-editorial);font-size:12px;font-weight:700;font-style:italic;color:#555;line-height:1.2}
.gz-dc-pill{display:inline-flex;align-items:center;gap:0;font-family:var(--font-dauble);font-size:11px;font-weight:900;color:#fff;padding:3px 8px;border-radius:10px;white-space:nowrap;margin-top:2px;line-height:1}
.gz-dc-pill__num{font-family:inherit;font-size:inherit;color:inherit;line-height:1}
.gz-dc-pill__sep{font-family:inherit;font-size:9px;color:rgba(255,255,255,0.45);line-height:1;margin:0 1px}
.gz-dc-pill--lotto{background:#F43F5E}
.gz-dc-pill--euromillions{background:#2563EB}
.gz-dc-pill--irishlotto{background:#16A34A}
.gz-dc-pill--healthlottery{background:#9c27b0}
.gz-dc-pill--thunderball{background:#9c27b0}
.gz-dc-pill--setforlife{background:#00BCD4}
.gz-dc-compact__info{display:flex;flex-direction:column;min-width:0}
.gz-dc-compact__btns{display:flex;border-top:1px solid #f0f0f0}
.gz-dc-compact__btn{flex:1;text-align:center;font-size:12px;font-weight:700;padding:5px 2px;border:none;border-right:1px solid #f0f0f0;background:#fafafa;color:#555;text-decoration:none;transition:background 0.12s}
.gz-dc-compact__btn:last-child{border-right:none}
.gz-dc-compact__btn:hover{background:#f0f0f0}
.gz-dc-compact__btn--primary{color:#fff;font-weight:800}
.gz-dc-compact__btn--primary:hover{opacity:0.85}
.gz-dc-compact__icon--lotto{background:#F43F5E}.gz-dc-compact__icon--euromillions{background:#2563EB}.gz-dc-compact__icon--irishlotto{background:#16A34A}.gz-dc-compact__icon--healthlottery{background:linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4)}.gz-dc-compact__icon--thunderball{background:#9c27b0}.gz-dc-compact__icon--setforlife{background:#00BCD4}
.gz-dc-compact__btn--lotto{background:#F43F5E}.gz-dc-compact__btn--euromillions{background:#2563EB}.gz-dc-compact__btn--irishlotto{background:#16A34A}.gz-dc-compact__btn--healthlottery{background:#9c27b0}


/* Wide variant — 3 cols when nav grid is full width above mag-row */
.gz-dc-compact-grid--wide{grid-template-columns:repeat(3,1fr);margin-bottom:1rem}
@media(max-width:767px){.gz-dc-compact-grid--wide{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.gz-dc-compact-grid--wide{grid-template-columns:1fr}}

/* ── Nav section: cards stack in narrow columns ── */
.gz-dc-nav-section {
  margin-top: 1rem;
}

/* Hub sidebar op cards — use same style as game pages */

/* ── Fixed odds / syndicate quick links ── */
.gz-dc-fo-links{display:flex;flex-wrap:wrap;gap:6px;margin:0.5rem 0}
.gz-dc-fo-link{display:inline-block;font-size:12px;font-weight:700;padding:6px 14px;border-radius:6px;border:1px solid #E8913A;color:#E8913A;text-decoration:none;transition:background 0.15s,color 0.15s}
.gz-dc-fo-link:hover{background:#E8913A;color:#fff}

/* Hub only — hide balls info, draws/wk, bet badge, and odds from draw cards */
.gz-lotto-grid--hub .gz-lotto-card-stat{display:none}
.gz-lotto-grid--hub .gz-lotto-card-bet-badge{display:none}
.gz-lotto-grid--hub .gz-lotto-card-odds{display:none}

/* Hub draw cards — narrower right panel to reduce white space */
.gz-lotto-grid--hub .gz-lotto-card-right{width:180px !important;min-width:180px;padding:0.75rem 0.6rem;justify-content:center}
@media(min-width:768px){.gz-lotto-grid--hub .gz-lotto-card-right{width:220px !important;min-width:220px;padding:0.85rem 0.75rem}}

/* Hub — remove min-height on prize box to eliminate white space */
.gz-lotto-grid--hub .gz-lotto-card-prize-box{min-height:auto;padding:0.4rem 0.4rem}

/* ── Hub LottoGo-style draw cards ── */
.gz-hub-card-grid{display:flex;flex-direction:column;gap:8px;margin:0.75rem 0 1.25rem}
.gz-hub-card{display:flex;align-items:center;padding:14px 12px;background:#fff;border:1px solid #eee;border-left:4px solid #ccc;border-radius:8px;text-decoration:none;color:inherit;transition:box-shadow 0.15s,transform 0.12s;position:relative;overflow:hidden}
.gz-hub-card:hover{box-shadow:0 3px 12px rgba(0,0,0,0.08);transform:translateY(-1px)}
.gz-hub-card--rollover{border-color:#c62828 !important;border-image:none !important}
.gz-hub-card__rollover{position:absolute;top:0;left:0;background:#c62828;color:#fff;font-size:10px;font-weight:800;letter-spacing:1px;padding:2px 10px 2px 8px;border-radius:0 0 6px 0;text-transform:uppercase}
.gz-hub-card__body{flex:1;min-width:0}
.gz-hub-card__name{display:block;font-size:11px;font-weight:700;color:#888;letter-spacing:1.5px;text-transform:uppercase;line-height:1.2}
.gz-hub-card__jackpot{display:block;font-family:var(--font-sans);font-size:24px;font-weight:900;line-height:1.15;margin:2px 0 4px}
.gz-hub-card__cd{display:inline-flex;align-items:center;gap:0;font-size:12px;font-weight:600;color:#888;line-height:1}
.gz-hub-card__cd-num{font-family:var(--font-sans);font-size:12px;font-weight:700;color:#555}
.gz-hub-card__cd-sep{font-size:10px;color:#ccc;margin:0 1px}
.gz-hub-card__next{font-family:var(--font-editorial);font-size:12px;font-style:italic;color:#888}
.gz-hub-card__logo{flex-shrink:0;margin-left:12px}
.gz-hub-card__icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-dauble);font-size:18px;font-weight:900;color:#fff}
@media(min-width:520px){
  .gz-hub-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .gz-hub-card__jackpot{font-size:26px}
  .gz-hub-card__icon{width:58px;height:58px;font-size:20px}
}

/* Hub card jackpot label */
.gz-hub-card__jp-label{font-size:9px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:0.5px;line-height:1}

/* New international draw compact card colours */
.gz-dc-compact--powerball{border-left-color:#C62828}
.gz-dc-compact--megamillions{border-left-color:#1A5276}
.gz-dc-compact--newyork{border-left-color:#1565C0}
.gz-dc-compact--dailymillion{border-left-color:#009A44}
.gz-dc-compact--frenchloto{border-left-color:#0055A4}
.gz-dc-compact--germanlotto{border-left-color:#CC0000}
.gz-dc-compact--canadian{border-left-color:#E31837}
.gz-dc-compact__icon--powerball{background:#C62828}
.gz-dc-compact__icon--megamillions{background:linear-gradient(135deg,#1A5276,#D4AF37)}
.gz-dc-compact__icon--newyork{background:#1565C0}
.gz-dc-compact__icon--dailymillion{background:#009A44}
.gz-dc-compact__icon--frenchloto{background:linear-gradient(135deg,#0055A4,#EF4135)}
.gz-dc-compact__icon--germanlotto{background:linear-gradient(135deg,#000,#CC0000,#FFD700)}
.gz-dc-compact__icon--canadian{background:#E31837}
.gz-dc-pill--powerball{background:#C62828}
.gz-dc-pill--megamillions{background:#1A5276}
.gz-dc-pill--newyork{background:#1565C0}
.gz-dc-pill--dailymillion{background:#009A44}
.gz-dc-pill--frenchloto{background:#0055A4}
.gz-dc-pill--germanlotto{background:#CC0000}
.gz-dc-pill--canadian{background:#E31837}

/* Hub card note line (replaces jackpot) */
.gz-hub-card__note{font-size:11px;color:#777;line-height:1.3;font-style:italic}

/* ── New international lottery game styles (April 2026) ── */
.gz-dc-icon--superenalotto{background:linear-gradient(135deg,#003893,#CE2B37,#003893)}.gz-dc-stat__val--superenalotto{color:#003893}.gz-dc-btn--superenalotto{color:#003893;border-color:#003893}.gz-dc-btn--superenalotto:hover{background:#eef2ff}.gz-dc-btn--primary-superenalotto{background:linear-gradient(135deg,#003893,#CE2B37)}
.gz-dc-icon--eurojackpot{background:linear-gradient(135deg,#1a1a2e,#D4A017,#1a1a2e)}.gz-dc-stat__val--eurojackpot{color:#D4A017}.gz-dc-btn--eurojackpot{color:#D4A017;border-color:#D4A017}.gz-dc-btn--eurojackpot:hover{background:#fffbeb}.gz-dc-btn--primary-eurojackpot{background:linear-gradient(135deg,#1a1a2e,#D4A017)}
.gz-dc-icon--finnishlotto{background:linear-gradient(135deg,#003580,#fff,#003580)}.gz-dc-stat__val--finnishlotto{color:#003580}.gz-dc-btn--finnishlotto{color:#003580;border-color:#003580}.gz-dc-btn--finnishlotto:hover{background:#eff6ff}.gz-dc-btn--primary-finnishlotto{background:#003580}
.gz-dc-icon--ausaturdaylotto{background:linear-gradient(135deg,#012169,#FF6600,#012169)}.gz-dc-stat__val--ausaturdaylotto{color:#FF6600}.gz-dc-btn--ausaturdaylotto{color:#FF6600;border-color:#FF6600}.gz-dc-btn--ausaturdaylotto:hover{background:#fff7ed}.gz-dc-btn--primary-ausaturdaylotto{background:linear-gradient(135deg,#012169,#FF6600)}
.gz-dc-icon--aupowerball{background:linear-gradient(135deg,#012169,#FF0000,#012169)}.gz-dc-stat__val--aupowerball{color:#FF0000}.gz-dc-btn--aupowerball{color:#FF0000;border-color:#FF0000}.gz-dc-btn--aupowerball:hover{background:#fef2f2}.gz-dc-btn--primary-aupowerball{background:linear-gradient(135deg,#012169,#FF0000)}
.gz-dc-icon--elgordo{background:linear-gradient(135deg,#AA151B,#F1BF00,#AA151B)}.gz-dc-stat__val--elgordo{color:#AA151B}.gz-dc-btn--elgordo{color:#AA151B;border-color:#AA151B}.gz-dc-btn--elgordo:hover{background:#fef2f2}.gz-dc-btn--primary-elgordo{background:linear-gradient(135deg,#AA151B,#F1BF00)}

/* New game compact nav card borders + icons */
.gz-dc-compact--superenalotto{border-left-color:#003893}.gz-dc-compact--eurojackpot{border-left-color:#D4A017}.gz-dc-compact--finnishlotto{border-left-color:#003580}.gz-dc-compact--ausaturdaylotto{border-left-color:#FF6600}.gz-dc-compact--aupowerball{border-left-color:#FF0000}.gz-dc-compact--elgordo{border-left-color:#AA151B}
.gz-dc-compact__icon--superenalotto{background:linear-gradient(135deg,#003893,#CE2B37)}.gz-dc-compact__icon--eurojackpot{background:linear-gradient(135deg,#1a1a2e,#D4A017)}.gz-dc-compact__icon--finnishlotto{background:#003580}.gz-dc-compact__icon--ausaturdaylotto{background:linear-gradient(135deg,#012169,#FF6600)}.gz-dc-compact__icon--aupowerball{background:linear-gradient(135deg,#012169,#FF0000)}.gz-dc-compact__icon--elgordo{background:linear-gradient(135deg,#AA151B,#F1BF00)}
.gz-dc-pill--superenalotto{background:#003893}.gz-dc-pill--eurojackpot{background:#D4A017}.gz-dc-pill--finnishlotto{background:#003580}.gz-dc-pill--ausaturdaylotto{background:#FF6600}.gz-dc-pill--aupowerball{background:#FF0000}.gz-dc-pill--elgordo{background:#AA151B}

/* ── Hub card ball sizing — smaller for international draws ── */
.gz-lotto-grid--hub .gz-lotto-ball{width:32px !important;height:32px !important;font-size:13px !important;line-height:32px !important;margin:2px 2px}
.gz-lotto-grid--hub .gz-lotto-balls-row{display:flex;flex-wrap:wrap;gap:3px;margin:6px 0 2px}
.gz-lotto-grid--hub .gz-lotto-bonus-row{display:flex;align-items:center;flex-wrap:wrap;gap:3px;margin:2px 0 4px}
.gz-lotto-grid--hub .gz-lotto-bonus-name{font-size:10px;font-weight:700;color:#888;margin-right:4px;font-style:italic}
.gz-lotto-grid--hub .gz-lotto-card-left{padding:0.6rem 0.7rem;display:flex;flex-direction:column}
.gz-lotto-grid--hub .gz-lotto-card-date{font-size:11px;margin:2px 0 4px}
.gz-lotto-grid--hub .gz-lotto-card-game-label{font-size:10px;padding:3px 8px}
.gz-lotto-grid--hub .gz-lotto-card-tabs{margin-top:auto;padding-top:6px}
.gz-lotto-grid--hub .gz-lotto-card-tab{font-size:11px;padding:5px 10px}

/* Fixed card height on hub — all cards same size, results button at bottom */
.gz-lotto-grid--hub .gz-lotto-card-row{min-height:200px;height:200px}
.gz-lotto-grid--hub .gz-lotto-card-inner,.gz-lotto-grid--hub .gz-lotto-card-bordered{height:100%}
.gz-lotto-grid--hub .gz-lotto-card-right{display:flex;flex-direction:column;justify-content:center}

@media(min-width:768px){
  .gz-lotto-grid--hub .gz-lotto-ball{width:36px !important;height:36px !important;font-size:14px !important;line-height:36px !important}
  .gz-lotto-grid--hub .gz-lotto-card-row{min-height:210px;height:210px}
}

/* ── Hub cards: consistent ball area height regardless of bonus row ── */
.gz-lotto-grid--hub .gz-lotto-card-left .gz-lotto-balls-row{min-height:36px}
.gz-lotto-grid--hub .gz-lotto-card-left .gz-lotto-bonus-row{min-height:32px}
/* If no bonus row, add equivalent bottom margin to main balls row */
.gz-lotto-grid--hub .gz-lotto-card-left .gz-lotto-balls-row:last-child{margin-bottom:34px}
/* If bonus row exists, it cancels the margin */
.gz-lotto-grid--hub .gz-lotto-card-left .gz-lotto-balls-row + .gz-lotto-bonus-row{margin-bottom:0}
.gz-lotto-grid--hub .gz-lotto-card-left .gz-lotto-balls-row:has(+ .gz-lotto-bonus-row){margin-bottom:0}

/* ── Jump to Results dropdown ── */
.gz-jump-to{margin:1.2rem 0 0.5rem;padding:0.8rem;background:#faf6f1;border-radius:10px;border:1px solid #f0e6d9}
.gz-jump-to__label{display:block;font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:#E8913A;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.gz-jump-to__select{width:100%;padding:10px 12px;font-family:'Lora',serif;font-size:14px;color:#333;background:#fff;border:2px solid #E8913A;border-radius:8px;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E8913A' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.gz-jump-to__select:focus{outline:none;border-color:#c77a2e;box-shadow:0 0 0 3px rgba(232,145,58,0.15)}
.gz-jump-to__select option{font-family:'Lora',serif;padding:6px}
.gz-jump-to__select optgroup{font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:#888;text-transform:uppercase}

/* ── Brand logos inside right panel (betting cards only, injected via JS) ── */
.gz-card-brands{margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.15);text-align:center;width:100%}
.gz-card-brands__label{display:block;font-size:11px;font-weight:800;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.gz-card-brands__row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.gz-card-brands__link{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:6px;background:#fff;overflow:hidden;transition:transform 0.15s,box-shadow 0.15s;box-shadow:0 2px 6px rgba(0,0,0,0.15);border:2px solid rgba(255,255,255,0.8)}
.gz-card-brands__link:hover{transform:translateY(-2px);box-shadow:0 3px 8px rgba(0,0,0,0.2)}
.gz-card-brands__img{width:100%;height:100%;object-fit:cover}
.gz-card-brands__compare{display:block;margin-top:8px;font-size:10px;font-weight:800;color:rgba(255,255,255,0.8);text-decoration:none;letter-spacing:0.8px;text-transform:uppercase;transition:color 0.15s}
.gz-card-brands__compare:hover{color:#fff}
@media(min-width:768px){.gz-card-brands__link{width:52px;height:52px;border-radius:50%;border:3px solid #fff}.gz-card-brands__img{border-radius:50%}.gz-card-brands__label{font-size:12px}.gz-card-brands__compare{font-size:11px}}

/* ── Fix betting card grid — clean 2-col on desktop ── */
.gz-lotto-grid--hub{display:grid;grid-template-columns:1fr;gap:0.75rem}
@media(min-width:768px){.gz-lotto-grid--hub{grid-template-columns:1fr 1fr;gap:1rem}}

/* Hub sidebar brand tiles — 3 square cards */
.gz-hub-brand-grid{margin-bottom:1.5rem}
.gz-hub-brand-grid__heading{font-size:11px;font-weight:800;color:#E8913A;text-transform:uppercase;letter-spacing:1.5px;text-align:center;margin-bottom:0.75rem}
.gz-hub-brand-grid__row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gz-hub-brand-tile{display:flex;flex-direction:column;align-items:center;background:#fff;border:2px solid #f0e8e0;border-radius:10px;padding:14px 8px 12px;text-decoration:none;text-align:center;transition:transform 0.15s,box-shadow 0.15s,border-color 0.15s}
.gz-hub-brand-tile:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1);border-color:#E8913A}
.gz-hub-brand-tile__logo{width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px}
.gz-hub-brand-tile__logo img{width:48px;height:48px;object-fit:contain}
.gz-hub-brand-tile__name{font-size:11px;font-weight:800;color:#1a1a2e;line-height:1.2;margin-bottom:4px}
.gz-hub-brand-tile__stars{font-size:12px;line-height:1}
.gz-hub-brand-tile__stars .gz-star{color:#ddd}
.gz-hub-brand-tile__stars .gz-star--on{color:#7C3AED}
@media(min-width:768px){.gz-hub-brand-tile__logo{width:70px;height:70px}.gz-hub-brand-tile__logo img{width:56px;height:56px}.gz-hub-brand-tile__name{font-size:12px}.gz-hub-brand-tile__stars{font-size:14px}}

/* Mobile: larger text for lotto editorial readability */
@media (max-width: 767px) {
  .mag-cover__standfirst { font-size: 16px !important; line-height: 1.5 !important; }
  .mag-cover__body { font-size: 16px !important; line-height: 1.4 !important; }
  .mag-editorial-pull p { font-size: 16px !important; }
  .gz-lgt-pro-tip { font-size: 14px !important; line-height: 1.5 !important; }
  .gz-lgt-pro-tip__p { font-size: 14px !important; }
  .gz-lgt-pro-tip__p--sm { font-size: 14px !important; }
  .gz-lgt-pro-tip__p--catch { font-size: 14px !important; }
  .gz-lgt-pro-tip__list li { font-size: 14px !important; line-height: 1.45 !important; }
  .gz-lgt-pro-tip__subhead { font-size: 13px !important; }
  .gz-lgt-pro-tip__label { font-size: 13px !important; }
  .gz-lotto-tc-box .gz-lotto-tc-text { font-size: 14px !important; line-height: 1.5 !important; }
  .gz-lgt-disclaimer-box p { font-size: 14px !important; line-height: 1.5 !important; }
  .gz-lgt-what-is-box__label,
  .gz-lgt-what-is-box__value,
  .gz-lgt-quick-facts__label,
  .gz-lgt-quick-facts__value { font-size: 13px !important; }
  .lotto-prize-table table { font-size: 13px !important; }
  .lotto-prize-table th { font-size: 12px !important; }
  .lotto-section-intro p { font-size: 16px !important; line-height: 1.55 !important; }
  .mag-cover__subhead { font-size: 20px !important; }
}

/* Hub: reduce snake-wrap bottom margin */
.mag-section .gz-snake-wrap--rotated { margin-bottom: 1.2rem; }
.gz-fw-content > .gz-snake-wrap--rotated { margin-bottom: 1rem; }

/* ── BRAND DIRECTORY ─────────────────────────────────────────── */
.gz-bingo-filters { display:flex; flex-direction:column; gap:0.6rem; margin-top:0.5rem; }
.gz-filter-pill { display:block; padding:0.85rem 1.25rem; border-radius:10px; font-weight:800; font-size:0.85rem; text-decoration:none; text-align:center; color:#fff; transition:transform 0.15s, box-shadow 0.15s; box-shadow:0 3px 8px rgba(0,0,0,0.1); }
.gz-filter-pill:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(0,0,0,0.2); }
.gz-filter-pill--pink { background:linear-gradient(135deg,#C71585,#E91E8C); }
.gz-filter-pill--purple { background:linear-gradient(135deg,#6a1b9a,#9c27b0); }
.gz-filter-pill--cyan { background:linear-gradient(135deg,#00838f,#00bcd4); }
.gz-filter-pill--gold { background:linear-gradient(135deg,#e65100,#7C3AED); }

.gz-directory-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:1rem 0 1.5rem; }
.gz-dir-rows { display:flex; flex-direction:column; gap:14px; margin:1rem 0 1.5rem; }
@media(max-width:640px){ .gz-directory-grid { grid-template-columns:1fr; padding:0 0.75rem; } }

.gz-brand-card { position:relative; background:#fff; border-left:4px solid #C71585; border-radius:0 10px 10px 0; overflow:hidden; display:flex; flex-direction:column; transition:transform 0.15s, box-shadow 0.15s; box-shadow:0 2px 8px rgba(199,21,133,0.08); }
.gz-brand-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(199,21,133,0.18); }
.gz-brand-card--featured { background:#fff9fb; border-left-width:5px; }

.gz-brand-card__pick { position:absolute; top:0.5rem; right:0.5rem; background:linear-gradient(135deg,#C71585,#E91E8C); color:#fff; font-size:0.58rem; font-weight:800; padding:0.2rem 0.5rem; border-radius:12px; letter-spacing:0.5px; text-transform:uppercase; z-index:1; }

.gz-brand-card__row { display:flex; align-items:center; gap:0.85rem; padding:1rem; }
.gz-brand-card__logo-wrap { flex-shrink:0; }
.gz-brand-card__logo { width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid #C71585; display:block; box-shadow:0 2px 8px rgba(199,21,133,0.15); }
.gz-brand-card__logo-placeholder { width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg,#C71585,#9c27b0); color:#fff; font-size:2.2rem; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(199,21,133,0.15); }
.gz-brand-card__info { flex:1; min-width:0; display:flex; flex-direction:column; gap:0.3rem; }
.gz-brand-card__name { font-size:1.05rem; font-weight:900; color:#1a1a2e; margin:0; line-height:1.2; font-family:var(--font-editorial); }
.gz-brand-card__stars { letter-spacing:2px; }
.gz-brand-card__stars .gz-star { color:#f0e0f5; font-size:1.15rem; }
.gz-brand-card__stars .gz-star--on { color:#C71585; }
.gz-brand-card__tagline { font-size:0.88rem; color:#555; margin:0; line-height:1.35; }
.gz-brand-card__offer-text { font-size:0.92rem; font-weight:700; color:#9c27b0; margin:0; line-height:1.35; }

.gz-brand-card__pills { display:flex; flex-wrap:wrap; gap:0.3rem; }
.gz-brand-pill { display:inline-block; padding:0.2rem 0.5rem; border-radius:12px; font-size:0.62rem; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; }
.gz-brand-pill--pink { background:#fce7f3; color:#be185d; }

.gz-brand-card__btns { display:flex; gap:0.4rem; margin-top:0.15rem; }
.gz-brand-card__btn { padding:0.4rem 0.85rem; border-radius:6px; font-size:0.78rem; font-weight:700; text-decoration:none; text-align:center; transition:opacity .15s; }
.gz-brand-card__btn:hover { opacity:0.85; }
.gz-brand-card__btn--review { background:#C71585; color:#fff; }
.gz-brand-card__btn--visit { background:transparent; color:#C71585; border:2px solid #C71585; }

.gz-brand-card__tcs { padding:0 1rem 0.6rem; font-size:0.6rem; color:#aaa; line-height:1.5; margin:0; }

@media (max-width:480px) {
  .gz-brand-card__row { flex-direction:column; align-items:center; text-align:center; padding:0.75rem 0.6rem; gap:0.4rem; }
  .gz-brand-card__logo { width:68px; height:68px; border-width:2px; }
  .gz-brand-card__logo-placeholder { width:68px; height:68px; font-size:1.6rem; }
  .gz-brand-card__info { align-items:center; gap:0.2rem; }
  .gz-brand-card__name { font-size:0.85rem; }
  .gz-brand-card__stars .gz-star { font-size:0.9rem; }
  .gz-brand-card__tagline { font-size:0.72rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .gz-brand-card__offer-text { font-size:0.75rem; }
  .gz-brand-card__pills { justify-content:center; }
  .gz-brand-pill { font-size:0.55rem; padding:0.15rem 0.35rem; }
  .gz-brand-card__btns { flex-direction:column; width:100%; gap:0.25rem; }
  .gz-brand-card__btn { font-size:0.7rem; padding:0.35rem 0.5rem; }
  .gz-brand-card__pick { font-size:0.5rem; top:0.35rem; right:0.35rem; }
  .gz-brand-card__tcs { font-size:0.55rem; padding:0 0.5rem 0.4rem; text-align:center; }
}

.gz-directory-empty { text-align:center; padding:3rem 1rem; color:#aaa; font-size:0.95rem; background:#fafafa; border-radius:12px; margin:1.5rem 0; }
.gz-directory-disclaimer { font-size:0.7rem; color:#aaa; margin:1.5rem 0 2rem; line-height:1.6; text-align:center; }

/* ── BRAND PAGE ─────────────────────────────────────────── */
.gz-brand-hero { background:linear-gradient(135deg,#fff,#fdf4f9); border:2px solid #f0e0f5; border-radius:14px; padding:1.5rem; margin-bottom:1.5rem; }
.gz-brand-hero__inner { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.gz-brand-hero__logo { max-height:80px; max-width:140px; object-fit:contain; }
.gz-brand-hero__logo-placeholder { width:80px; height:80px; border-radius:14px; background:linear-gradient(135deg,#C71585,#9c27b0); color:#fff; font-size:2.4rem; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.gz-brand-hero__main { flex:1; min-width:200px; }
.gz-brand-hero__name { font-size:1.6rem; font-weight:900; color:#1a1a2e; margin:0 0 0.25rem; line-height:1.1; }
.gz-brand-hero__tagline { font-size:0.9rem; color:#888; margin:0 0 0.6rem; }
.gz-brand-hero__ratings { display:flex; flex-wrap:wrap; gap:0.85rem; }
.gz-brand-hero__rating { display:flex; align-items:center; gap:0.4rem; font-size:0.8rem; }
.gz-brand-hero__rating-label { color:#888; font-weight:600; }
.gz-brand-hero__stars .gz-star { color:#ddd; font-size:1rem; }
.gz-brand-hero__stars .gz-star--on { color:#7C3AED; }
.gz-brand-hero__tp { color:#1a1a2e; }
.gz-brand-hero__tp strong { color:#00b67a; }
.gz-brand-hero__cta { padding:0.85rem 1.25rem; background:linear-gradient(135deg,#C71585,#E91E8C); color:#fff; border-radius:10px; font-size:0.9rem; font-weight:800; text-decoration:none; box-shadow:0 4px 12px rgba(199,21,133,0.3); transition:transform 0.15s; white-space:nowrap; }
.gz-brand-hero__cta:hover { transform:translateY(-2px); }
.gz-brand-hero__login { display:block; margin-top:0.5rem; font-size:0.78rem; color:#888; text-decoration:underline; text-align:center; }
.gz-brand-hero__login:hover { color:var(--pink); }
.gz-brand-hero__offer { margin-top:1rem; padding:1rem; background:#fff; border:2px dashed #E91E8C; border-radius:10px; text-align:center; }
.gz-brand-hero__offer-label { display:block; font-size:0.7rem; font-weight:800; color:#C71585; letter-spacing:1px; margin-bottom:0.4rem; }
.gz-brand-hero__offer-text { font-size:1.05rem; font-weight:800; color:#1a1a2e; margin:0 0 0.4rem; }
.gz-brand-hero__offer-tcs { font-size:0.7rem; color:#999; margin:0; }

.gz-proscons { display:grid; grid-template-columns:1fr; gap:1rem; margin:1.5rem 0; }
@media(min-width:600px){ .gz-proscons { grid-template-columns:1fr 1fr; } }

/* Sidebar pros/cons grid — side by side, stacks on mobile */
.gz-proscons-grid { display:grid; grid-template-columns:1fr 1fr; }
@media(max-width:600px) {
  .gz-proscons-grid { grid-template-columns:1fr; }
  .gz-sidebar-proscons__col--pros { border-right:none; border-bottom:1px solid #f5f0f8; }
}
.gz-sidebar-proscons__col { padding:0.85rem 1rem; }
.gz-sidebar-proscons__col--pros { border-right:1px solid #f5f0f8; }
.gz-sidebar-proscons__title { font-size:0.85rem; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; margin:0 0 0.5rem; }
.gz-sidebar-proscons__col--pros .gz-sidebar-proscons__title { color:#16a34a; }
.gz-sidebar-proscons__col--cons .gz-sidebar-proscons__title { color:#dc2626; }
.gz-sidebar-proscons__col ul { margin:0; padding-left:1rem; font-size:0.85rem; color:#333; line-height:1.4; display:flex; flex-direction:column; gap:0.3rem; }
.gz-sidebar-proscons__col--pros ul li::marker { color:#16a34a; }
.gz-sidebar-proscons__col--cons ul li::marker { color:#dc2626; }

/* ── Brand visit card — vertical CTA box in sidebar ────────────────────── */
/* ── Brand page snake labels inside dark sidebar headings ───────────────── */
.gz-brand-snake {
  background: #C71585;
  transform: rotate(-2deg);
  display: inline-block;
  position: relative;
  padding: 2px;
  border-radius: 4px;
  overflow: hidden;
}
.gz-brand-snake::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  padding: 2px;
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, #C71585 60deg, #9c27b0 120deg, #E91E8C 180deg, #f472b6 240deg, #fff 300deg, #C71585 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: gz-snake 2s linear infinite;
}
.gz-brand-snake .mag-label {
  background: #C71585;
  color: #fff;
  letter-spacing: 3px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 10px;
  display: block;
  position: relative;
  z-index: 1;
  border: none;
  margin: 0;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .gz-brand-snake::before { animation: none; }
}

/* ── Brand sidebar modifier classes — no more inline overrides ─────────── */

/* Similar sites outer wrap — same as brand visit card border style */
.gz-brand-similar-wrap {
  border: 3px solid #C71585;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(199,21,133,0.10);
  overflow: hidden;
}
.gz-brand-similar-heading {
  border: none;
  border-bottom: none;
  background: linear-gradient(135deg, #1a0a1f 0%, #3d1a2e 100%);
  padding: 0.85rem 1rem 0.75rem;
  text-align: center;
}
.gz-brand-similar-list { background: #fff; }

/* Hub grid layout for company/network directory cards (3-column on desktop, 2 on tablet, 1 on mobile) */
.gz-hub-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.gz-hub-card-grid .gz-lotto-op-card {
  flex-direction: column;
  align-items: stretch;
  padding: 1.25rem 1rem 1rem;
  margin-bottom: 0;
}
.gz-hub-card-grid .gz-lotto-op-card__img-wrap { margin: 0 auto 0.75rem; }
.gz-hub-card-grid .gz-lotto-op-card__img-circle { width: 80px; height: 80px; }
.gz-hub-card-grid .gz-lotto-op-card__name { font-size: 1.05rem; margin-bottom: 0.5rem; }
.gz-hub-card-grid .gz-hub-card__facts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.5rem 0 0.85rem;
  padding: 0.65rem 0;
  border-top: 1px solid #f0e8f0;
  border-bottom: 1px solid #f0e8f0;
  width: 100%;
}
.gz-hub-card-grid .gz-hub-card__fact {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  line-height: 1.3;
}
.gz-hub-card-grid .gz-hub-card__fact-label {
  color: #888;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.gz-hub-card-grid .gz-hub-card__fact-value { color: #1a1a2e; font-weight: 700; }
.gz-hub-card-grid .gz-hub-card__fact-value--accent { color: #C71585; }
@media (max-width: 900px) {
  .gz-hub-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gz-hub-card-grid { grid-template-columns: 1fr; }
}

/* Similar site cards inside brand page */
.gz-brand-similar-card {
  border-radius: 0;
  border-left: none;
  border-right: none;
  margin-bottom: 0;
  border-color: #f5f0f8;
}
.gz-brand-similar-logo-circle {
  width: 56px;
  height: 56px;
  background: #1a0a1f;
  border-color: #C71585;
}
.gz-brand-similar-card .gz-lotto-op-card__name { font-size: 13px; }
.gz-brand-similar-card .gz-lotto-op-card__stars { font-size: 0.78rem; }
.gz-brand-similar-card .gz-lotto-op-card__btn--visit { min-width: 120px; }
.gz-brand-similar-star-count { font-size: 0.7rem; color: #888; margin-left: 3px; }
.gz-brand-similar-sister-link {
  display: block;
  text-align: center;
  margin-top: 0.5rem;
  font-size: 11px;
  color: #C71585;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.gz-brand-similar-sister-link:hover { text-decoration: underline; }
.gz-qf-external-link { color: #C71585; font-weight: 700; text-decoration: none; }
.gz-qf-external-link:hover { text-decoration: underline; }
.gz-qf-internal-link { color: #C71585; font-weight: 700; text-decoration: none; }
.gz-qf-internal-link:hover { text-decoration: underline; }

/* Full-width info boxes — 100% width below the two-column section */
.gz-brand-infoboxes { display:flex; flex-direction:column; gap:1.5rem; margin:1.5rem 0; }
.gz-brand-infobox { border:3px solid #C71585; overflow:hidden; box-shadow:0 4px 16px rgba(199,21,133,0.10); }

/* Brand page: duplicate infoboxes — show desktop version inside left col,
   mobile version full-width below the row. Simple hide/show by viewport. */
.gz-brand-infoboxes--mobile  { display: none; }
.gz-brand-infoboxes--desktop { display: flex; }

@media (max-width: 767px) {
  .gz-brand-infoboxes--desktop { display: none; }
  .gz-brand-infoboxes--mobile  {
    display: flex;
    margin: 1rem 0;
    gap: 1rem;
  }
}
.gz-brand-infobox__heading { padding:0.85rem 1rem 0.75rem; text-align:center; background:linear-gradient(135deg,#1a0a1f 0%,#3d1a2e 100%); }
.gz-brand-infobox__body { background:#fff; padding:1.25rem; }
.gz-brand-infobox__body .gz-lgt-pro-tip { margin:0; border-left:none; background:transparent; padding:0; }
.gz-brand-infobox__body .gz-lgt-pro-tip__label { display:none; }

/* Full-width boxes below two-column section on brand page */
.gz-brand-fullwidth-boxes { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 1rem; }
.gz-brand-fullwidth-box { width: 100%; }
.gz-brand-fullwidth-box .gz-lgt-pro-tip { margin: 0; }
.gz-qf-external-link:hover { text-decoration: underline; }

/* Quick Facts wrap on brand page — pink theme over default green */
.gz-brand-qf-wrap .gz-lgt-quick-facts__heading {
  background: linear-gradient(135deg, #1a0a1f 0%, #3d1a2e 100%);
}
.gz-brand-qf-wrap .gz-lgt-quick-facts__heading-label {
  background: #C71585;
}

/* Snake wrap spacing inside headings */
.gz-brand-box-heading .gz-brand-snake { margin-bottom: 0.3rem; }

/* Lotto compare mini card — orange theme */
.gz-mini--lotto-compare { border-left: 4px solid #E8913A; }
.gz-mini--lotto-compare .mag-mini__cat { color: #E8913A; }
.gz-mini--lotto-compare .mag-mini__continue {
  color: #E8913A;
  display: block;
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  margin-top: 0.5rem;
}

.gz-brand-visit-card { border:3px solid #C71585; overflow:hidden; margin-bottom:1.25rem; box-shadow:0 4px 16px rgba(199,21,133,0.12); }
.gz-brand-visit-card .gz-lotto-ops-wrap__heading { border:none; background:linear-gradient(135deg,#1a0a1f 0%,#3d1a2e 100%); }

.gz-brand-visit-card__body {
  background:#fff;
  padding:1.25rem 1.25rem 1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0.75rem;
}

.gz-brand-visit-card__logo {
  width:110px;
  height:110px;
  object-fit:cover;
  display:block;
  border-radius:50%;
  border:3px solid #f0e0f5;
  box-shadow:0 4px 14px rgba(199,21,133,0.15);
}
/* Smaller logo variant for the visit card */
.gz-brand-visit-card__logo--sm {
  width:72px;
  height:72px;
  border-width:2px;
  box-shadow:0 2px 8px rgba(199,21,133,0.12);
}

/* Trustpilot card — separate box below visit card */
.gz-brand-tp-card { border:3px solid #C71585; overflow:hidden; margin-bottom:1.25rem; box-shadow:0 4px 16px rgba(199,21,133,0.10); }
.gz-brand-tp-card__body { background:#fff; padding:0.85rem 1rem; display:flex; flex-direction:column; gap:0.6rem; }
/* Score tiles */
.gz-brand-score-tile { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0.85rem; background:#fafafa; border:1px solid #f0e0f5; border-radius:8px; gap:0.3rem; }
.gz-brand-score-tile__src { font-size:0.82rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:#666; }
.gz-brand-score-tile__num { font-size:1.9rem; font-weight:900; line-height:1; color:#1a1a2e; }
.gz-brand-score-tile__num--tp { color:#00b67a; }
.gz-brand-score-tile__num--gz { color:#C71585; }
.gz-brand-score-tile__num--none { color:#ccc; }
.gz-brand-score-tile__denom { font-size:1rem; font-weight:600; color:#aaa; }
.gz-brand-score-tile__count { font-size:0.85rem; color:#777; }
.gz-brand-score-tile__link { font-size:0.85rem; font-weight:700; color:#C71585; text-decoration:none; margin-top:0.2rem; }
.gz-brand-score-tile__link:hover { text-decoration:underline; }
.gz-brand-tp-card__count { font-size:0.85rem; color:#777; }
.gz-brand-tp-card__leave-review { display:block; text-align:center; padding:0.7rem; background:#fdf4ff; border:1px solid #f0e0f5; font-size:0.95rem; font-weight:700; color:#C71585; text-decoration:none; border-radius:6px; }
.gz-brand-tp-card__leave-review:hover { background:#f5e8ff; }
/* Purple snake variant */
.gz-brand-snake--purple { background:#9c27b0; }
.gz-brand-snake--purple::before { background:conic-gradient(from var(--gz-angle,0deg),#fff 0deg,#9c27b0 60deg,#7c3aed 120deg,#C71585 180deg,#c084fc 240deg,#fff 300deg,#9c27b0 360deg); }

/* Visit card ratings — stack label above value */
.gz-brand-visit-card__ratings { display:flex; flex-direction:column; gap:0.4rem; width:100%; background:#fafafa; border:1px solid #f5f0f8; border-radius:8px; padding:0.65rem 1rem; }
.gz-brand-visit-card__rating-row { display:flex; flex-direction:column; gap:0.1rem; }
.gz-brand-visit-card__rating-lbl { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#888; }

.gz-brand-visit-card__name {
  font-size:1.1rem;
  font-weight:800;
  color:#1a1a2e;
  line-height:1.2;
}

.gz-brand-visit-card__ratings {
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  width:100%;
  background:#fafafa;
  border:1px solid #f5f0f8;
  border-radius:8px;
  padding:0.65rem 1rem;
}

.gz-brand-visit-card__rating-row {
  display:flex;
  flex-direction:column;
  gap:0.1rem;
  font-size:0.8rem;
}

.gz-brand-visit-card__rating-lbl {
  color:#888;
  font-weight:700;
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.gz-brand-visit-card__tp {
  color:#00b67a;
  font-weight:700;
  font-size:0.82rem;
  text-decoration:none;
}

.gz-brand-visit-card__tp-count {
  color:#999;
  font-weight:400;
  font-size:0.72rem;
}

.gz-brand-visit-card__offer {
  background:linear-gradient(135deg,#fdf4ff,#fff0f8);
  border-left:3px solid #C71585;
  padding:0.6rem 0.85rem;
  text-align:left;
  width:100%;
  border-radius:0 6px 6px 0;
  box-sizing:border-box;
}

.gz-brand-visit-card__offer-label {
  display:block;
  font-size:0.65rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:#C71585;
  margin-bottom:0.2rem;
}

.gz-brand-visit-card__offer-text {
  margin:0;
  font-size:0.88rem;
  font-weight:700;
  color:#1a1a2e;
  line-height:1.3;
}

.gz-brand-visit-card__btn {
  display:block;
  width:100%;
  text-align:center;
  padding:0.85rem 1rem;
  background:linear-gradient(135deg,#C71585,#E91E8C);
  color:#fff;
  font-weight:800;
  font-size:1rem;
  text-decoration:none;
  letter-spacing:0.3px;
  transition:opacity .15s, transform .15s;
  box-shadow:0 4px 14px rgba(199,21,133,0.35);
  border-radius:6px;
  box-sizing:border-box;
}
.gz-brand-visit-card__btn:hover { opacity:0.9; transform:translateY(-1px); box-shadow:0 6px 18px rgba(199,21,133,0.4); }

.gz-brand-visit-card__tcs {
  font-size:0.62rem;
  color:#aaa;
  margin:0;
  line-height:1.5;
  text-align:center;
}

/* CTA box — stacked ratings, jump links, disclaimer */
.gz-brand-cta-ratings-stack { display:flex; flex-direction:column; gap:0.5rem; margin:0.5rem 0 0.75rem; }
.gz-brand-cta-rating-item { display:flex; flex-direction:column; gap:0.15rem; }
.gz-brand-cta-rating-lbl { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#888; }
.gz-brand-cta-tp { font-size:0.82rem; font-weight:600; color:#00b67a; }
.gz-brand-cta-tp-count { color:#999; font-size:0.72rem; font-weight:400; }
.gz-brand-cta-links { display:flex; gap:1rem; margin:0.75rem 0 0.4rem; flex-wrap:wrap; }
.gz-brand-cta-link { font-size:0.75rem; font-weight:700; color:#C71585; text-decoration:none; }
.gz-brand-cta-link:hover { text-decoration:underline; }
.gz-brand-cta-disclaimer { font-size:0.68rem; color:#aaa; margin:0; line-height:1.5; border-top:1px solid #f5f0f8; padding-top:0.5rem; margin-top:0.25rem; }
.gz-brand-cta-readmore { color:#C71585; font-weight:600; }

/* FAQ section — full width, lotto sidebar style header */
.gz-brand-faqs { border:3px solid #C71585; overflow:hidden; margin:2rem 0 1.5rem; box-shadow:0 4px 16px rgba(199,21,133,0.10); }
.gz-brand-faqs__heading { background:linear-gradient(135deg,#1a0a1f 0%,#3d1a2e 100%); padding:0.85rem 1rem 0.75rem; text-align:center; }
.gz-brand-faqs__title { font-family:var(--font-editorial,'Georgia',serif); font-size:18px; font-style:italic; font-weight:700; color:#fff; display:block; line-height:1.2; margin:0.35rem 0 0; }
.gz-brand-faqs__list { background:#fff; }
.gz-brand-faq { border-bottom:1px solid #f5f0f8; }
.gz-brand-faq:last-child { border-bottom:none; }
.gz-brand-faq__q { width:100%; background:none; border:none; padding:1rem 1.25rem; text-align:left; font-size:0.92rem; font-weight:700; color:#1a1a2e; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; line-height:1.4; }
.gz-brand-faq__q:hover { color:#C71585; }
.gz-brand-faq__icon { font-size:1.2rem; font-weight:400; color:#C71585; flex-shrink:0; line-height:1; transition:transform .15s; }
.gz-brand-faq[open] .gz-brand-faq__icon { transform: rotate(45deg); }
.gz-brand-faq__a { padding:0 1.25rem 1rem; }
.gz-brand-faq__a p { margin:0; font-size:0.88rem; color:#444; line-height:1.7; }

/* Linked game type badge */
.gz-qf-badge--link { text-decoration:none; transition:background .15s,color .15s; cursor:pointer; }
.gz-qf-badge--link:hover { background:#C71585; color:#fff; }
.gz-proscons__col { padding:1rem 1.25rem; border-radius:10px; }
.gz-proscons__col--pros { background:#dcfce7; border-left:4px solid #15803d; }
.gz-proscons__col--cons { background:#fee2e2; border-left:4px solid #dc2626; }
.gz-proscons__title { font-size:0.9rem; font-weight:800; margin:0 0 0.5rem; }
.gz-proscons__col--pros .gz-proscons__title { color:#15803d; }
.gz-proscons__col--cons .gz-proscons__title { color:#dc2626; }
.gz-proscons__col ul { margin:0; padding-left:1.1rem; font-size:0.85rem; line-height:1.5; }
.gz-proscons__col li { margin-bottom:0.3rem; }

.gz-player-reviews { display:flex; flex-direction:column; gap:1rem; margin:1.5rem 0; }
.gz-player-review { background:#fff; border:1px solid #f0e0f5; border-radius:10px; padding:1rem 1.25rem; }
.gz-player-review__header { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; margin-bottom:0.5rem; }
.gz-player-review__name { font-size:0.85rem; color:#1a1a2e; }
.gz-player-review__stars .gz-star { color:#ddd; font-size:0.85rem; }
.gz-player-review__stars .gz-star--on { color:#7C3AED; }
.gz-player-review__date { font-size:0.7rem; color:#aaa; margin-left:auto; }
.gz-player-review__title { font-size:0.95rem; font-weight:800; margin:0 0 0.4rem; color:#1a1a2e; }
.gz-player-review__body { font-size:0.85rem; color:#555; line-height:1.5; margin:0; }

.gz-review-form-wrap { margin:2rem 0; padding:1.5rem; background:#fdf4f9; border:2px solid #f0e0f5; border-radius:14px; }
.gz-review-form-title { font-size:1.1rem; font-weight:800; color:#C71585; margin:0 0 0.4rem; }
.gz-review-form-intro { font-size:0.85rem; color:#888; margin:0 0 1rem; }
.gz-review-form { display:flex; flex-direction:column; gap:0.75rem; }
.gz-review-form label { display:flex; flex-direction:column; gap:0.3rem; font-size:0.8rem; font-weight:700; color:#555; }
.gz-review-form__row { display:grid; grid-template-columns:1fr; gap:0.75rem; }
@media(min-width:600px){ .gz-review-form__row { grid-template-columns:1fr 1fr; } }
.gz-review-form input, .gz-review-form select, .gz-review-form textarea { padding:0.65rem 0.85rem; border:1px solid #e0d0e5; border-radius:8px; font-size:0.9rem; font-family:inherit; background:#fff; }
.gz-review-form textarea { resize:vertical; }
.gz-review-form__submit { padding:0.85rem 1.5rem; background:linear-gradient(135deg,#C71585,#E91E8C); color:#fff; border:none; border-radius:10px; font-size:0.9rem; font-weight:800; cursor:pointer; transition:transform 0.15s; align-self:flex-start; box-shadow:0 4px 12px rgba(199,21,133,0.3); }
.gz-review-form__submit:hover { transform:translateY(-1px); }

/* ── Brand page QF/pros wrapper — uses lotto heading sub-classes, always visible ── */
.gz-brand-qf-wrap { background:#fff; overflow:hidden; border:3px solid var(--gz-game-color,#C71585); margin:0 0 1.25rem; box-shadow:0 4px 16px rgba(199,21,133,.10); }

/* Brand title row — h1 + logo at top of editorial column */
.gz-brand-title-row { display:flex; align-items:center; gap:1rem; margin-bottom:0; }
.gz-brand-title-logo { width:64px; height:64px; object-fit:cover; flex-shrink:0; border-radius:50%; border:2px solid #f0e0f5; box-shadow:0 2px 8px rgba(199,21,133,0.12); }
/* Brand name — matches mag-cover__title pink style from homepage */
.gz-brand-title-name {
  font-family: var(--font-editorial);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--pink);
  margin: 0 0 0.2rem;
  line-height: 1.15;
}
/* Tagline — matches mag-greeting__sub italic treatment from homepage */
.gz-brand-title-tagline {
  font-size: 0.95rem;
  font-weight: 800;
  font-style: italic;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.4;
}

/* Compact CTA box in sidebar */
.gz-brand-cta-box { }
.gz-brand-cta-body { padding:1rem; }
.gz-brand-cta-logo { max-height:40px; max-width:110px; object-fit:contain; display:block; margin-bottom:0.75rem; }
.gz-brand-cta-ratings { display:flex; flex-direction:column; gap:0.3rem; margin-bottom:0.85rem; }
.gz-brand-cta-rating-row { display:flex; align-items:center; gap:0.5rem; font-size:0.78rem; }
.gz-brand-cta-rating-label { color:#888; font-weight:600; min-width:90px; }
.gz-brand-cta-offer { background:#fdf4ff; border-left:3px solid #C71585; padding:0.5rem 0.75rem; margin-bottom:0.85rem; }
.gz-brand-cta-offer-label { display:block; font-size:0.65rem; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:#C71585; margin-bottom:0.2rem; }
.gz-brand-cta-offer-text { margin:0; font-size:0.88rem; font-weight:700; color:#1a1a2e; }
.gz-brand-cta-btn { display:block; text-align:center; padding:0.7rem 1rem; background:linear-gradient(135deg,#C71585,#E91E8C); color:#fff; font-weight:800; font-size:0.9rem; text-decoration:none; transition:opacity .15s; box-shadow:0 3px 10px rgba(199,21,133,0.3); margin-bottom:0.5rem; }
.gz-brand-cta-btn:hover { opacity:0.88; }
.gz-brand-cta-tcs { font-size:0.65rem; color:#aaa; margin:0; line-height:1.5; }

/* Quick Facts stacked layout inside the box */
.gz-qf-list { padding:0.25rem 0; }
.gz-qf-item { padding:0.55rem 1rem; border-bottom:1px solid #f5f0f8; }
.gz-qf-item:last-child { border-bottom:none; }
.gz-qf-label { display:block; font-size:0.68rem; font-weight:700; color:#999; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.2rem; }
.gz-qf-value { display:block; font-size:0.85rem; font-weight:600; color:#1a1a2e; }
.gz-qf-badges { display:flex; flex-wrap:wrap; gap:4px; margin-top:0.3rem; }
.gz-qf-badge { background:#f3e8ff; color:#7e22ce; font-size:0.7rem; padding:2px 7px; border-radius:4px; white-space:nowrap; font-weight:600; }
.gz-qf-badge--owner { background:rgba(199,21,133,.1); color:#C71585; border:1px solid rgba(199,21,133,.35); }
.gz-qf-sublabel { font-weight:400; font-size:.62rem; opacity:.7; }
/* Mobile: shrink badges a touch and let long domains break so they never
   overflow the Shared Details box. */
@media (max-width: 640px) {
  .gz-qf-badge { font-size:0.62rem; padding:2px 6px; white-space:normal; overflow-wrap:anywhere; word-break:break-word; max-width:100%; }
}

/* Similar brands rows inside box */
.gz-similar-brand { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.7rem 1rem; border-bottom:1px solid #f5f0f8; }
.gz-similar-brand:last-child { border-bottom:none; }
.gz-similar-brand__info { display:flex; align-items:center; gap:0.6rem; text-decoration:none; flex:1; min-width:0; }
.gz-similar-brand__logo { width:40px; height:40px; object-fit:cover; flex-shrink:0; border-radius:50%; border:2px solid #f0e0f5; }
.gz-similar-brand__initial { width:32px; height:32px; background:linear-gradient(135deg,#C71585,#9c27b0); color:#fff; font-size:1rem; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.gz-similar-brand__name { display:block; font-size:0.82rem; font-weight:700; color:#1a1a2e; line-height:1.2; }
.gz-similar-brand__tagline { display:block; font-size:0.7rem; color:#888; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:110px; }
.gz-similar-brand__cta { flex-shrink:0; padding:0.35rem 0.7rem; background:linear-gradient(135deg,#C71585,#E91E8C); color:#fff; font-size:0.72rem; font-weight:800; text-decoration:none; white-space:nowrap; transition:opacity .15s; box-shadow:0 2px 6px rgba(199,21,133,0.25); }
.gz-similar-brand__cta:hover { opacity:0.85; }

/* Reviews note inside sidebar box */
.gz-sidebar-review-note { padding:0.85rem 1rem; font-size:0.8rem; color:#333; line-height:1.6; }
.gz-sidebar-review-note p { margin:0 0 0.6rem; }
.gz-sidebar-review-note p:last-child { margin:0; }
.gz-sidebar-review-note strong { color:#1a1a2e; }

/* FAQ responsive position — desktop shows under editorial, mobile shows in sidebar */
.gz-faq-desktop-only { display: block; }
.gz-faq-mobile-only  { display: none; }
@media (max-width: 900px) {
  .gz-faq-desktop-only { display: none; }
  .gz-faq-mobile-only  { display: block; }
}

/* Editorial take — paragraph spacing */
.gz-brand-editorial p { margin:0 0 1.1rem; line-height:2 !important; font-weight: 400; }
@media (max-width: 767px) {
  .gz-brand-editorial p { line-height:1.65 !important; }
}
.gz-brand-editorial p:has(.drop-cap) { line-height:1.55 !important; }
p.mag-cover__body:has(.drop-cap) { line-height:1.55 !important; }
p.mag-cover__lede-body:has(.drop-cap) { line-height:1.55 !important; }
@media (min-width: 768px) {
  .gz-brand-editorial p:has(.drop-cap) { line-height:1.65 !important; }
}
.gz-brand-editorial p:first-of-type:has(.drop-cap) { line-height:1.45 !important; }
@media (min-width: 768px) {
  .gz-brand-editorial p:first-of-type:has(.drop-cap) { line-height:1.75 !important; }
}
.gz-brand-editorial p:last-child { margin-bottom:0; }
.gz-brand-editorial h3 { margin:1.5rem 0 0.6rem; font-size:1.1rem; }
.gz-brand-editorial h3:first-child { margin-top:0.5rem; }
.gz-guide-h3-black h3,
.gz-guide-h3-black h4 { color: #1a1a1a !important; }

/* Full-width company/network hero (sits above the 2-column mag-row) */
.gz-company-hero {
  max-width: 880px;
  margin: 0 auto 2rem;
  padding: 1.5rem 1rem 0;
  text-align: center;
}
.gz-company-hero .mag-cover__title { margin-top: 1rem; }
.gz-company-hero .mag-cover__standfirst { margin-top: 1.25rem; }
.gz-company-hero .mag-cover__lede-body { margin-top: 1rem; }
@media (max-width: 768px) {
  .gz-company-hero { padding: 1rem 0.5rem 0; }
}
/* Editorial lists — give bullet lists proper breathing room from prose */
.gz-brand-editorial ul,
.gz-brand-editorial ol { margin: 1rem 0 1.75rem; padding-left: 1.4rem; line-height: 1.7; }
.gz-brand-editorial ul li,
.gz-brand-editorial ol li { margin-bottom: 0.55rem; }
.gz-brand-editorial ul li:last-child,
.gz-brand-editorial ol li:last-child { margin-bottom: 0; }
.gz-brand-editorial ul li::marker { color: #C71585; }
.gz-back-link { display:inline-block; padding:0.6rem 1rem; color:#C71585; font-size:0.85rem; font-weight:700; text-decoration:none; }
.gz-back-link:hover { text-decoration:underline; }

/* ── Brand page styles (moved from inline <style> in brand.php) ─────────── */
  .gz-brand-policy-note { margin: 2rem 0; }
  .gz-reviews-section   { margin: 2.5rem 0 1rem; }

  /* Stats summary header */
  .gz-tp-summary {
    display: grid; grid-template-columns: 200px 1fr; gap: 2rem;
    background: #fff; border: 1px solid #e8e0f0; border-radius: 12px;
    padding: 1.5rem 2rem; margin: 1.25rem 0 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  /* Dual summary: Editor | Players | Bars */
  .gz-tp-summary--dual {
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 1.5rem;
  }
  .gz-tp-summary__score {
    text-align: center; border-right: 1px solid #f0e0f5; padding-right: 1.5rem;
  }
  .gz-tp-summary--dual .gz-tp-summary__score { padding: 0 1.25rem; }
  .gz-tp-summary--dual .gz-tp-summary__score--players { border-right: 1px solid #f0e0f5; }
  .gz-tp-summary--dual .gz-tp-summary__bars { padding-left: .5rem; }

  .gz-tp-summary__label {
    font-size: .7rem; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; color: #888; margin-bottom: .4rem;
  }
  .gz-tp-summary__score--editor  .gz-tp-summary__label { color: #9c27b0; }
  .gz-tp-summary__score--players .gz-tp-summary__label { color: #C71585; }

  .gz-tp-summary__avg {
    font-family: var(--font-editorial); font-size: 2.75rem; font-weight: 700;
    color: #1a1a1a; line-height: 1; margin-bottom: .3rem;
  }
  .gz-tp-summary__avg--editor { color: #9c27b0; }
  .gz-tp-summary__avg--empty { color: #ccc; }
  .gz-tp-summary__denom {
    font-size: .9rem; font-weight: 400; color: #999; margin-left: 2px;
  }
  .gz-tp-summary__avg-stars { font-size: 1rem; letter-spacing: 2px; margin-bottom: .5rem; }
  .gz-tp-summary__caption {
    font-size: .72rem; color: #666; line-height: 1.45;
    max-width: 220px; margin: 0 auto;
  }
  .gz-tp-summary__count { font-size: .8rem; color: #666; }

  .gz-tp-summary__bars { display: flex; flex-direction: column; gap: .35rem; justify-content: center; }
  .gz-tp-bar { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: .65rem; }
  .gz-tp-bar__label { font-size: .8rem; font-weight: 600; color: #555; }
  .gz-tp-bar__track { background: #f0e0f5; height: 10px; border-radius: 5px; overflow: hidden; }
  .gz-tp-bar__fill  { display: block; height: 100%; background: #7C3AED; border-radius: 5px; transition: width .4s; }
  .gz-tp-bar__count { font-size: .8rem; color: #666; text-align: right; }

  /* Integrity disclaimer */
  .gz-tp-integrity {
    background: #fafafa; border: 1px solid #e8e0f0; border-radius: 8px;
    margin: 0 0 1rem; overflow: hidden;
  }
  .gz-tp-integrity__head {
    display: flex; align-items: center; gap: .65rem;
    padding: .85rem 1.1rem; cursor: pointer;
    font-size: .85rem; font-weight: 600; color: #333;
    list-style: none;
  }
  .gz-tp-integrity__head::-webkit-details-marker { display: none; }
  .gz-tp-integrity__icon { font-size: 1rem; flex-shrink: 0; }
  .gz-tp-integrity__title { flex: 1; line-height: 1.4; }
  .gz-tp-integrity__caret {
    font-size: .7rem; color: #888; transition: transform .2s;
  }
  .gz-tp-integrity[open] .gz-tp-integrity__caret { transform: rotate(180deg); }
  .gz-tp-integrity__body {
    padding: 0 1.1rem 1rem;
    border-top: 1px solid #f0e0f5;
    font-size: .85rem; line-height: 1.55; color: #555;
  }
  .gz-tp-integrity__body p { margin: .85rem 0 0; }
  .gz-tp-integrity__body p:first-child { margin-top: 1rem; }

  /* Reviews list */
  .gz-tp-reviews { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }
  .gz-tp-review--hidden { display: none; }
  .gz-tp-reviews--all .gz-tp-review--hidden { display: flex; }

  .gz-tp-review {
    background: #fff; border: 1px solid #e8e0f0; border-radius: 10px;
    padding: 1.25rem 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    flex-direction: column; gap: .65rem; display: flex;
  }
  .gz-tp-review__head {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  }
  .gz-tp-review__avatar {
    width: 40px; height: 40px; border-radius: 50%;
    color: #fff; font-weight: 700; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .gz-tp-review__who { flex: 1; min-width: 0; }
  .gz-tp-review__name {
    display: block; font-size: .95rem; font-weight: 700;
    color: #1a1a1a; margin-bottom: .15rem;
  }
  .gz-tp-review__meta {
    display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  }
  .gz-tp-review__stars { font-size: .85rem; letter-spacing: 1px; }
  .gz-tp-review__date  { font-size: .75rem; color: #888; }
  .gz-tp-review__verified {
    font-size: .68rem; font-weight: 700;
    color: #16A34A; background: #f0fdf4; border: 1px solid #bbf7d0;
    padding: .2rem .55rem; border-radius: 4px; flex-shrink: 0;
  }
  .gz-tp-review__title {
    font-family: var(--font-editorial); font-size: 1.05rem; font-weight: 700;
    color: #1a1a1a; margin: 0;
  }
  .gz-tp-review__body {
    font-size: .92rem; line-height: 1.55; color: #333; margin: 0;
  }

  /* Show more button */
  .gz-tp-showmore {
    display: block; width: 100%; margin: .5rem 0 1rem;
    background: #fff; color: #C71585; border: 1.5px solid #C71585;
    border-radius: 8px; padding: .85rem 1rem;
    font-size: .9rem; font-weight: 700; cursor: pointer;
    transition: background .15s, color .15s;
  }
  .gz-tp-showmore:hover { background: #C71585; color: #fff; }

  /* Empty state */
  .gz-tp-empty {
    background: #fafafa; border: 1px dashed #e0e0e0; border-radius: 10px;
    padding: 2rem; text-align: center; color: #888;
    margin: 1rem 0 1.5rem;
  }
  .gz-tp-empty span { color: #7C3AED; }

  /* Mobile */
  @media (max-width: 700px) {
    .gz-tp-summary,
    .gz-tp-summary--dual {
      grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.25rem;
    }
    .gz-tp-summary--dual .gz-tp-summary__bars {
      grid-column: 1 / -1; border-top: 1px solid #f0e0f5; padding-top: 1rem;
    }
    .gz-tp-summary--dual .gz-tp-summary__score {
      padding: 0; border-right: none;
    }
    .gz-tp-summary--dual .gz-tp-summary__score--editor { border-right: 1px solid #f0e0f5; padding-right: 1rem; }
    .gz-tp-summary__score { border-right: none; padding-right: 0; }
    .gz-tp-summary__avg { font-size: 2.25rem; }
    .gz-tp-summary__caption { font-size: .68rem; }
    .gz-tp-review { padding: 1rem; }
    .gz-tp-review__verified { font-size: .62rem; padding: .15rem .4rem; }
  }

/* ── Brand page utility classes (replaces inline styles in brand.php) ────── */

/* H2 in info-box headings — keeps visual style of the original span */
.gz-brand-h2-inherit {
  font-family: inherit; font-size: inherit; font-style: inherit;
  font-weight: inherit; color: inherit; display: block; margin: .35rem 0 0;
}
.gz-brand-h2-inherit--flush { margin: 0; }

/* Snake / label colour variants */
.gz-brand-snake--purple { background: #9c27b0; }
.gz-brand-snake--green  { background: #16A34A; }
.gz-brand-snake--arcade { background: linear-gradient(135deg, #00BCD4, #1A237E); }
.mag-label--purple { background: #9c27b0; color: #fff; }
.mag-label--green  { background: #16A34A; color: #fff; }

/* Info-box themed headings (purple = Key Things, green = Responsible Gaming) */
.gz-brand-infobox__heading--purple {
  background: linear-gradient(135deg, #1a0a1f 0%, #2d1155 100%);
}
.gz-brand-infobox__heading--green {
  background: linear-gradient(135deg, #0a1f0a 0%, #11551a 100%);
}
.gz-brand-infobox--green { border-color: #16A34A; }

/* Visit button placed inside an info-box (under Key Things to Know) */
.gz-brand-visit-card__btn--inset {
  margin-top: 1.25rem; display: block; text-align: center;
}

/* Magazine break spacing */
.gz-brand-mag-break--top { margin: 2rem 0 1.25rem; }
.gz-brand-mag-break--bot { margin: 1.25rem 0 1.75rem; }
.mag-more-label--mb { margin-bottom: .5rem; }

/* Snake heading nudges */
.gz-snake-wrap--mb-md { margin-bottom: .35rem; }
.gz-snake-wrap--mb-lg { margin-bottom: .75rem; }

/* Editorial Note spacing when sat between Similar Sites and end of column */
.gz-brand-editorial-note { margin: 1.5rem 0; }

/* Editor stars row docked under Leave a Review CTA */
.gz-brand-visit-card__ratings--docked {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f0e0f5;
}
.gz-brand-visit-card__rating-row--center { justify-content: center; }

/* Reviews-section intro — centred text, but the WHAT PLAYERS SAY label
   header sits left like other section labels */
.gz-reviews-section__intro {
  text-align: center;
}
.gz-reviews-section__intro .mag-more-label {
  text-align: left;
}
.gz-reviews-section__intro-text {
  /* Match normal article paragraph text (.mag-cover__body) */
  font-family: var(--font-sans);
  font-size: 17.5px; color: #333; margin: .75rem auto 1.5rem;
  max-width: 620px; line-height: 1.75; font-weight: 400;
}
@media (max-width: 600px) {
  .gz-reviews-section__intro-text { font-size: 16px; }
}
.gz-reviews-section__intro-link {
  color: #C71585; font-weight: 700; text-decoration: underline;
}
.gz-reviews-section__heading {
  display: inline-block; margin: 0;
}

/* Inline-link helpers used in integrity disclaimer */
.gz-link-pink { color: #C71585; font-weight: 600; }
.gz-strong-green { color: #16A34A; }

/* "No reviews yet" empty state */
.gz-tp-empty-icon { font-size: 2rem; display: block; margin-bottom: .5rem; }
.gz-tp-empty-title { margin: 0 0 .25rem; font-weight: 700; color: #1a1a1a; }
.gz-tp-empty-sub   { margin: 0; color: #666; font-size: .9rem; }

/* ── Review modal (was inline styles in brand.php) ──────────────────────── */
.gz-rev-modal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7);
  z-index: 9999; align-items: center; justify-content: center; padding: 1rem;
}
.gz-rev-modal__card {
  background: #fff; border-radius: 8px; width: 100%; max-width: 480px;
  overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.gz-rev-modal__header {
  background: linear-gradient(135deg, #1a0a1f, #3d1a2e);
  padding: 1.25rem 1.5rem; display: flex;
  justify-content: space-between; align-items: center;
}
.gz-rev-modal__eyebrow {
  color: #C71585; font-size: .65rem; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase; margin: 0 0 3px;
}
.gz-rev-modal__brand {
  color: #fff; font-style: italic; font-size: 1rem; font-weight: 700;
}
.gz-rev-modal__close {
  background: none; border: none; color: #aaa; font-size: 1.5rem;
  cursor: pointer; line-height: 1;
}
.gz-rev-modal__body { padding: 1.5rem; }
.gz-rev-form__hp { display: none; }
.gz-rev-form__rating-wrap { margin-bottom: 1rem; text-align: center; }
.gz-rev-form__rating-label,
.gz-rev-form__field-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: #888; margin: 0 0 .4rem;
}
.gz-rev-form__field-label {
  display: block; margin-bottom: .25rem;
}
.gz-rev-form__optional { font-weight: 400; color: #bbb; }
.gz-rev-form__star-picker {
  font-size: 2rem; cursor: pointer; letter-spacing: 4px; color: #ddd;
}
.gz-rev-form__star-label {
  font-size: .72rem; color: #aaa; margin: .2rem 0 0; height: .9rem;
}
.gz-rev-form__row-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem;
}
.gz-rev-form__row { margin-bottom: .75rem; }
.gz-rev-form__row--mb-lg { margin-bottom: 1rem; }
.gz-rev-form__input,
.gz-rev-form__textarea {
  width: 100%; padding: .5rem .75rem; border: 1px solid #e0d0f0;
  border-radius: 6px; font-size: .9rem; box-sizing: border-box;
}
.gz-rev-form__textarea { resize: vertical; }
.gz-rev-form__privacy {
  font-size: .68rem; color: #aaa; margin: 0 0 .75rem; line-height: 1.5;
}
.gz-rev-form__privacy a { color: #C71585; }
.gz-rev-form__uk-notice {
  font-size: .7rem; color: #8B1A5C; background: #fef5fb;
  border-left: 3px solid #C71585; padding: .55rem .75rem;
  margin: 0 0 .85rem; line-height: 1.5; border-radius: 0 4px 4px 0;
}
.gz-rev-form__submit {
  width: 100%; padding: .75rem;
  background: linear-gradient(135deg, #C71585, #E91E8C); color: #fff;
  border: none; border-radius: 6px; font-weight: 800; font-size: .95rem; cursor: pointer;
}
.gz-rev-form__msg {
  display: none; margin: .75rem 0 0; padding: .6rem; border-radius: 6px;
  font-size: .85rem; text-align: center;
}

/* Review-submitted success panel (injected via JS innerHTML) */
.gz-rev-thanks { padding: 1.5rem .5rem; text-align: center; }
.gz-rev-thanks__icon { font-size: 2.5rem; margin-bottom: .5rem; }
.gz-rev-thanks__title {
  font-family: var(--font-editorial); font-size: 1.3rem; color: #1a1a1a; margin: 0 0 .75rem;
}
.gz-rev-thanks__lead { font-size: .95rem; color: #333; margin: 0 0 1rem; line-height: 1.5; }
.gz-rev-thanks__email { color: #C71585; word-break: break-all; }
.gz-rev-thanks__sub { font-size: .85rem; color: #555; margin: 0 0 1rem; line-height: 1.5; }
.gz-rev-thanks__spam {
  background: #fef5fb; border-radius: 6px; padding: .75rem 1rem;
  margin: 0 0 1rem; font-size: .8rem; color: #666; line-height: 1.5;
}
.gz-rev-thanks__close-btn {
  padding: .6rem 1.5rem; background: #C71585; color: #fff; border: none;
  border-radius: 6px; font-weight: 700; font-size: .9rem; cursor: pointer;
}

/* Static empty stars (when no reviews) */
.gz-tp-summary__avg-stars--empty span { color: #e0e0e0; }

/* ── Editorial in-content link styling ─────────────────────────────────────
   Subtle clickable colour for links inside the standfirst, lede, editor's take.
   Pink, underlined, with stronger underline on hover. Doesn't affect navigation
   buttons, badges, or pill-style links elsewhere. */
.mag-cover__standfirst a,
.mag-cover__lede-body  a,
.gz-brand-editorial    a {
  color: var(--pink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: inherit;
  transition: color .15s, text-decoration-thickness .15s;
}
.mag-cover__standfirst a:hover,
.mag-cover__lede-body  a:hover,
.gz-brand-editorial    a:hover {
  color: #8B1A5C;
  text-decoration-thickness: 2px;
}

/* ── Magazine-style editorial screenshot frame ─────────────────────────────
   Angled magazine presentation for brand lobby screenshots inside editor_take.
   Usage (paste into Editor Take RTE, source mode):
     <figure class="mag-screenshot">
       <div class="mag-screenshot__label">✦ Lobby Preview ✦</div>
       <img src="/assets/images/brands/screenshots/brand-preview.webp"
            alt="Brand bingo lobby showing upcoming rooms"
            loading="lazy" decoding="async">
       <figcaption>A glimpse of the Brand bingo lobby — upcoming rooms, jackpots, and Megaways side games.</figcaption>
     </figure>                                                              */
.mag-screenshot {
  display: block;
  margin: 2.5rem auto 3rem;
  max-width: 420px;
  text-align: center;
  clear: both;
}
.mag-screenshot__frame {
  position: relative;
  display: inline-block;
  padding: 0.5rem;
  background: linear-gradient(135deg, #1a0a1f 0%, #3d1a2e 50%, #1a0a1f 100%);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(156, 39, 176, 0.25), 0 4px 12px rgba(0,0,0,0.18);
  transform: rotate(-2deg);
  transition: transform .3s ease;
}
.mag-screenshot__frame:hover { transform: rotate(0deg) scale(1.02); }
.mag-screenshot img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
}
.mag-screenshot__label {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  background: var(--pink, #C71585);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 0.3rem 0.85rem;
  border-radius: 3px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(199, 21, 133, 0.35);
  z-index: 2;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Caption — clearly separated from the article body with a tiny pink ornament,
   smaller size and muted colour so it reads as an "image credit" not body text */
.mag-screenshot figcaption {
  display: block;
  margin: 1.5rem auto 0;
  max-width: 340px;
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 0.85rem;
  font-style: italic;
  color: #6a6a6a;
  line-height: 1.55;
  padding: 0 0.5rem;
  position: relative;
}
/* Steps up on desktop. At 0.8rem it was 12.8px with no larger size for a
   wide screen — small enough to be a strain even as an image credit. The
   max-width grows with it so the line count stays about the same. */
@media (min-width: 768px) {
  .mag-screenshot figcaption {
    font-size: 0.95rem;
    max-width: 440px;
  }
}
.mag-screenshot figcaption::before {
  content: '✦';
  display: block;
  margin: 0 auto 0.5rem;
  font-size: 0.65rem;
  color: var(--pink, #C71585);
  font-style: normal;
  opacity: 0.7;
  letter-spacing: 4px;
}
/* Mobile: straighten the angle — angled images feel cramped on small screens */
@media (max-width: 600px) {
  .mag-screenshot__frame { transform: rotate(-1deg); }
  .mag-screenshot__frame:hover { transform: rotate(0deg); }
  .mag-screenshot { margin: 2rem auto 2.5rem; }
  .mag-screenshot__label {
    font-size: 0.55rem;
    letter-spacing: 1.25px;
    padding: 0.25rem 0.65rem;
    top: -0.65rem;
  }
}

/* ── Brand newsreel placeholder ─────────────────────────────────────────────
   Sits at the bottom of the left column on brand pages to balance the long
   sidebar. Reserved for future Daily Daub integration / brand-specific news. */
.gz-brand-latest-news {
  margin-top: 2rem;
  margin-bottom: 1.75rem;
  border: 1px solid #e8e0f0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(199, 21, 133, 0.06);
}
.gz-brand-newsreel {
  background: linear-gradient(180deg, #fef5fb 0%, #fff 100%);
  padding: 1rem;
}
.gz-brand-newsreel__ticker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed #e8e0f0;
}
.gz-brand-newsreel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C71585;
  flex-shrink: 0;
  animation: gz-news-pulse 2s ease-in-out infinite;
}
@keyframes gz-news-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}
.gz-brand-newsreel__live {
  font-family: var(--font-sans, system-ui);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #C71585;
}
.gz-brand-newsreel__feed {
  margin-bottom: 0.75rem;
}
/* Desktop: reserve ~100px extra height in the feed area so the Daily Daub
   sidebar newsreel has more visual presence, and when real headlines land
   here from the ingestion tool they grow into pre-allocated space rather
   than shifting page layout as they arrive. Mobile stays content-driven. */
@media (min-width: 1000px) {
  .gz-brand-newsreel__feed { min-height: 160px; }
}
.gz-brand-newsreel__item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.5rem 0;
}
.gz-brand-newsreel__item + .gz-brand-newsreel__item {
  border-top: 1px solid #f0e8f4;
}
.gz-brand-newsreel__item-icon {
  font-size: 1rem;
  line-height: 1.4;
  flex-shrink: 0;
}
.gz-brand-newsreel__item-text {
  font-size: 0.82rem;
  color: #555;
  line-height: 1.55;
  margin: 0;
}
.gz-brand-newsreel__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1a0a1f, #3d1a2e);
  color: #fff;
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 12.5px;
  font-weight: 700;
  font-style: italic;
  padding: 0.6rem 0.85rem;
  text-decoration: none;
  transition: opacity 0.15s;
  margin: 0 -1rem -1rem;
}
.gz-brand-newsreel__cta:hover { opacity: 0.85; }

/* ── Schedule Table — editor_take embeddable pricing/schedule band table ──
   Semantic <table> with <thead>/<tbody>/<th>/<td> so Google reads it as
   tabular data. Visually preserved as the old flex-based grid. */
.gz-schedule-table {
  width: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5rem 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  background: #fff;
  border-collapse: collapse;
  table-layout: fixed;
}
.gz-schedule-table caption.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.gz-schedule-row {
  border-bottom: 1px solid #f0f0f0;
}
.gz-schedule-table tbody .gz-schedule-row:last-child { border-bottom: none; }
.gz-schedule-row--header {
  background: #C71585;
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}
.gz-schedule-row--header .gz-schedule-cell { color: #fff; }
.gz-schedule-row--peak { background: #fdf4ff; }
.gz-schedule-cell {
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
  border-right: 1px solid #f0f0f0;
  text-align: center;
  vertical-align: top;
  font-weight: normal;
}
.gz-schedule-cell:last-child { border-right: none; }
.gz-schedule-row--header .gz-schedule-cell { border-right-color: rgba(255,255,255,0.2); }
/* Row-header cells (time band column) stay same weight as data cells */
.gz-schedule-table tbody th.gz-schedule-cell { font-weight: normal; }

.gz-schedule-note {
  background: #fff8dc;
  border-left: 3px solid #7C3AED;
  padding: 0.85rem 1.1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
  border-radius: 0 4px 4px 0;
}
.gz-schedule-disclaimer {
  font-size: 0.8rem;
  color: #666;
  line-height: 1.55;
  margin: 0.75rem 0 1.5rem;
  padding: 0.6rem 0;
  border-top: 1px solid #eee;
}

/* Mobile: stack cells into label/value pairs using data-label attribute */
@media (max-width: 640px) {
  .gz-schedule-table,
  .gz-schedule-table thead,
  .gz-schedule-table tbody,
  .gz-schedule-table tr,
  .gz-schedule-table th,
  .gz-schedule-table td { display: block; width: 100%; }
  .gz-schedule-table thead { display: none; }
  .gz-schedule-row {
    padding: 0.5rem 0;
    border-bottom: 2px solid #f0f0f0;
  }
  .gz-schedule-row:last-child { border-bottom: none; }
  .gz-schedule-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-right: none;
    border-bottom: 1px dashed #f0f0f0;
  }
  .gz-schedule-cell:last-child { border-bottom: none; }
  .gz-schedule-cell[data-label]::before {
    content: attr(data-label);
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #C71585;
    font-weight: 700;
    margin-right: 1rem;
  }
  .gz-schedule-row--peak { background: #fdf4ff; border-radius: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BINGO GAME PAGE — sidebar cards + full-width bands + CTA
   Consolidated classes to replace inline styles on bingo-game-v2.php.
   All cards share magazine aesthetic: sharp corners, pink accent, white panels.
   ══════════════════════════════════════════════════════════════════════════ */

/* Sidebar card stacking — all cards after the first Quick Facts get top margin */
.gz-brand-qf-wrap--stacked { margin-top: 1.25rem; }

/* Anchor target for back-to-top jumps (accounts for sticky header) */
.gz-anchor-target { scroll-margin-top: 80px; }

/* Network card taglines (sidebar "Runs On" cards) */
.gz-network-card-tagline {
  font-size: 0.75rem;
  color: #777;
  line-height: 1.4;
  margin: 0.2rem 0 0.4rem;
}

/* ── Feature Round card (sidebar) ─────────────────────────────────────── */
.gz-feature-round-body {
  padding: 0.85rem 1rem;
  background: #fff;
}
.gz-feature-round-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--pink, #C71585);
  margin-bottom: 0.35rem;
}
.gz-feature-round-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #555;
}

/* ── Ready to Play CTA card (sidebar) ─────────────────────────────────── */
.gz-cta-panel {
  padding: 1.1rem 1rem;
  background: var(--pink, #C71585);
  color: #fff;
  text-align: center;
}
.gz-cta-panel__text {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 0.85rem;
  color: #fff;
}
.gz-cta-panel__btn {
  display: inline-block;
  background: #fff;
  color: var(--pink, #C71585);
  padding: 0.7rem 1.4rem;
  border-radius: 0;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  transition: background .15s, color .15s;
}
.gz-cta-panel__btn:hover {
  background: #fce7f4;
  color: var(--pink, #C71585);
}
.gz-cta-panel__footer {
  font-size: 0.7rem;
  margin: 0.85rem 0 0;
  color: #fff;
  opacity: 0.85;
  letter-spacing: 0.3px;
}

/* ── Full-width magazine-box bands (schedule / glitzy's take / faqs) ─── */
.gz-band-divider { margin: 2rem 0 1.5rem; }
.gz-band-wrap { margin: 1.5rem 0; }
.gz-band-wrap--last { margin: 1.5rem 0 2rem; }

.gz-band-body {
  background: #fff;
  padding: 1.75rem 1.5rem;
}
.gz-band-body--compact {
  background: #fff;
  padding: 1rem 1.25rem;
}

/* Schedule intro paragraph (above the table) */
.gz-band-intro {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.65;
  max-width: 720px;
}

/* ── Glitzy's Take band (Bingo Lady mascot centred) ────────────────── */
.gz-glitzy-take-body {
  background: #fff;
  padding: 1.75rem 1.5rem;
  text-align: center;
}
.gz-glitzy-take-mascot {
  display: block;
  width: 140px;
  max-width: 100%;
  margin: 0 auto 1rem;
}
.gz-glitzy-take-quote {
  font-size: 1rem;
  color: #444;
  line-height: 1.65;
  margin: 0 auto;
  max-width: 620px;
}
.gz-glitzy-take-stars {
  color: var(--pink, #C71585);
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin: 1rem 0 0;
}

/* ── Editorial "back to hub" link (matches companies-hub.php pattern) ── */
.gz-back-link {
  margin-top: 1.5rem;
}
.gz-back-link a {
  color: var(--pink, #C71585);
  font-weight: 700;
  text-decoration: none;
}
.gz-back-link a:hover {
  text-decoration: underline;
}

/* ── Bar button (matches lotto template's "View Other Lottos" pattern) ──
   Full-width pink rectangle, sharp corners, white uppercase-esque text.
   Used for close-out CTAs on bingo game pages. */
.gz-bar-btn {
  display: block;
  text-align: center;
  padding: 0.55rem;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  background: var(--pink, #C71585);
  letter-spacing: 0.5px;
  transition: background .15s;
}
.gz-bar-btn:hover {
  background: #a8116d;
  color: #fff;
}
/* Optional larger variant for end-of-editorial back link */
.gz-bar-btn--lg {
  padding: 0.85rem 1rem;
  font-size: 13px;
  margin-top: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════════
   TL;DR BOX — at-a-glance summary below standfirst on bingo game pages.
   Pink-accented magazine card with clean key/value list. Answers
   "what is this, where can I play it" in under 5 seconds — and gives
   Google's AI a tightly-structured extractable block near the top of
   the page for AI Overviews / featured snippets.
   ══════════════════════════════════════════════════════════════════════ */

.gz-tldr {
  margin: 1.25rem 0 1.75rem;
  border: 1px solid var(--pink, #C71585);
  background: #fff;
  position: relative;
  padding: 0;
}

/* Top label bar — sits above the content, pink text on subtle background */
.gz-tldr__label {
  display: block;
  background: var(--pink, #C71585);
  color: #fff;
  font-family: var(--font-dauble, 'Cinzel', serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 0.5rem 1rem;
  text-align: center;
  text-transform: uppercase;
}

/* Content area — two-column key/value list on desktop, stacks on mobile */
.gz-tldr__body {
  padding: 1rem 1.25rem;
}

.gz-tldr__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1.25rem;
}

@media (max-width: 600px) {
  .gz-tldr__list {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

.gz-tldr__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.45;
  padding: 0.15rem 0;
  border-bottom: 1px dotted #eee;
}

.gz-tldr__item:last-child { border-bottom: none; }

.gz-tldr__key {
  font-weight: 700;
  color: #555;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  min-width: 95px;
}

.gz-tldr__value {
  color: #222;
  flex: 1;
}

/* Mobile — stack label on top, value below (full width) so no cramped text wrapping */
@media (max-width: 600px) {
  .gz-tldr__item {
    display: block;
    padding: 0.35rem 0;
  }
  .gz-tldr__key {
    display: block;
    margin-bottom: 0.2rem;
    min-width: 0;
  }
  .gz-tldr__value {
    display: block;
  }
}

.gz-tldr__value--accent {
  color: var(--pink, #C71585);
  font-weight: 700;
}

.gz-tldr__value a {
  color: var(--pink, #C71585);
  text-decoration: none;
  font-weight: 600;
}

.gz-tldr__value a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   Desktop/mobile dual-render utility — used where content needs to appear
   in one DOM spot on desktop (inside editorial column) and another on
   mobile (full-width below). Same pattern as gz-faq-desktop-only but
   generic so it works for schedules, CTAs, or anything needing a
   breakpoint-conditional position swap.
   Breakpoint matches the main .mag-row stack at 900px.
   ══════════════════════════════════════════════════════════════════════ */
.gz-desktop-only { display: block; }
.gz-mobile-only  { display: none; }
@media (max-width: 900px) {
  .gz-desktop-only { display: none; }
  .gz-mobile-only  { display: block; }
}

/* ══════════════════════════════════════════════════════════════════════
   H1 LOGO FLOAT — small circular game logo that floats right of the H1,
   letting the headline text wrap around it magazine-style.
   Doesn't touch the pink snake label above — that renders unchanged.
   Accent ring uses each game's colour (--gz-game-color var set on section).
   ══════════════════════════════════════════════════════════════════════ */

.gz-h1-logo {
  float: right;
  width: 96px;
  height: 96px;
  margin: 0 0 0.35rem 1rem;
  position: relative;
  top: -4px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--pink, #C71585);
  box-shadow:
    0 0 0 3px var(--gz-game-color, #C71585),
    0 3px 8px rgba(0,0,0,0.12);
  transform: rotate(-3deg);
  shape-outside: circle(50%);
  transition: transform .25s ease;
}
.gz-h1-logo:hover {
  transform: rotate(-1deg) scale(1.03);
}
.gz-h1-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* Mobile: smaller logo, less margin so the H1 still has room */
@media (max-width: 640px) {
  .gz-h1-logo {
    width: 82px;
    height: 82px;
    margin: 0;
    top: -2px;
    border-width: 2px;
    box-shadow:
      0 0 0 2px var(--gz-game-color, #C71585),
      0 2px 5px rgba(0,0,0,0.12);
  }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .gz-h1-logo { transform: none; transition: none; }
  .gz-h1-logo:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   BINGO GAME CARD — rich variant for network pages.
   Uses game's accent colour for top band + border glow.
   Shows logo, ball count, price range, game type and CTA.
   Inspired by the lotto card gradient treatment.
   ══════════════════════════════════════════════════════════════════════ */

.gz-bingo-card {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.gz-bingo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* Coloured top band — uses inline accent colour */
.gz-bingo-card__band {
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Themed card — accent colour via --card-accent custom property ─────
   Usage on markup: <a class="gz-bingo-card gz-bingo-card--themed"
                       style="--card-accent:#9c27b0">
   One inline var replaces 4 separate inline styles (band bg, logo border,
   placeholder colour, CTA bg). Used across networks-hub, companies-hub,
   bingo-games-v2, and the named-games strip on network.php. */
.gz-bingo-card--themed .gz-bingo-card__band   { background: var(--card-accent, #9c27b0); }
.gz-bingo-card--themed .gz-bingo-card__logo   { border-color: var(--card-accent, #9c27b0); border-color: color-mix(in srgb, var(--card-accent, #9c27b0) 13%, transparent); }
.gz-bingo-card--themed .gz-bingo-card__logo-placeholder { color: var(--card-accent, #9c27b0); }
.gz-bingo-card--themed .gz-bingo-card__cta   { background: var(--card-accent, #9c27b0); }

/* Small italic editorial note — T&C footers, verification disclaimers, etc.
   Replaces repeated inline 'font-size:13px;color:#666;font-style:italic' */
.gz-editorial-note {
  font-size: 13px;
  color: #666;
  font-style: italic;
  margin-top: 1.5rem;
  line-height: 1.55;
}
.gz-bingo-card__band-label {
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.65rem;
  margin-left: auto;
}

/* Logo + info body */
.gz-bingo-card__body {
  padding: 1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex: 1;
}
.gz-bingo-card__logo {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #eee;
}
.gz-bingo-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.gz-bingo-card__logo-placeholder {
  font-size: 1.6rem;
  font-weight: 800;
  color: #aaa;
}
.gz-bingo-card__info {
  flex: 1;
  min-width: 0;
}
.gz-bingo-card__name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
  margin: 0 0 0.3rem;
}
.gz-bingo-card__tagline {
  font-size: 0.78rem;
  color: #666;
  line-height: 1.4;
  margin: 0 0 0.5rem;
}

/* Stats row */
.gz-bingo-card__stats {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.6rem;
}
.gz-bingo-card__stat {
  background: #f5f5f5;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}

/* CTA button — pushed to bottom by flex */
.gz-bingo-card__cta {
  display: block;
  text-align: center;
  padding: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: opacity .15s;
  margin-top: auto;
}
.gz-bingo-card__cta:hover { opacity: 0.9; }

@media (max-width: 640px) {
  .gz-bingo-card__logo { width: 72px; height: 72px; flex: 0 0 72px; }
  .gz-bingo-card__body { padding: 0.75rem; gap: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gz-bingo-card, .gz-bingo-card:hover { transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   SHARED UTILITY CLASSES — replaces inline styles across templates
   ══════════════════════════════════════════════════════════════════════ */

/* Rooms grid wrapper (brand + network pages) */
.gz-rooms-wrap { margin: 1.5rem 0 2rem; padding: 0; }
.gz-rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }

/* Section 2 wrapper + heading (network page) */
.gz-section2-wrap { margin: 1.5rem 0 0; }
.gz-section2-heading { font-size: 1.6rem; margin: 0 0 0.75rem; }

/* Brand card tagline (sidebar brand lists) */
.gz-brand-card-tagline { font-size: 0.75rem; color: #777; line-height: 1.4; margin: 0.2rem 0 0.4rem; }

/* Quick fact small value */
.gz-qf-value--small { font-size: 0.75rem; line-height: 1.4; }

/* Glitzy's Take — inner components */
.gz-glitzy-take-body { background: #fff; padding: 1.75rem 1.5rem; text-align: center; }
.gz-glitzy-take-mascot { display: block; width: 140px; max-width: 100%; margin: 0 auto 1rem; }
.gz-glitzy-take-text { font-size: 0.95rem; color: #444; line-height: 1.6; margin: 0; max-width: 560px; margin-left: auto; margin-right: auto; }
.gz-flourish { color: #C71585; font-size: 0.95rem; letter-spacing: 2px; margin: 1rem 0 0; }

/* Divider spacing variants */
.gz-divider--lg { margin: 2rem 0 1.5rem; }
.gz-divider--md { margin: 1.25rem 0; }

/* Brand card footer (company page sidebar) */
.gz-brand-card-footer { padding: 0.85rem 1rem; border-top: 1px solid #eee; font-size: 0.88rem; color: #555; line-height: 1.55; font-style: italic; }
@media (min-width: 768px) {
  .gz-brand-card-footer { font-size: 0.98rem; }
}

/* Spacing helpers */
.gz-mt-0 { margin-top: 0; }
.gz-mb-0 { margin-bottom: 0; }
.gz-faqs-wrap { margin: 1.5rem 0; }
.gz-faqs-wrap--top { margin: 1.5rem 0 0; }

/* ── How to Play highlight box (bingo game pages) ──────────────────── 
   Matches the lotto gz-lgt-pro-tip pattern: left-bordered box with 
   tinted background, game-coloured heading text, coloured list markers.
   ──────────────────────────────────────────────────────────────────── */
.gz-how-to-play {
  background: #fdf4ff;
  border-left: 4px solid var(--gz-game-color, #C71585);
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
}
.gz-how-to-play__heading {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--gz-game-color, #C71585);
  margin-bottom: 0.6rem;
}
.gz-how-to-play__body {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #333;
}
.gz-how-to-play__body p {
  margin: 0 0 0.5rem;
}
.gz-how-to-play__body p:last-child { margin-bottom: 0; }
.gz-how-to-play__body strong {
  font-weight: 800;
  color: var(--gz-game-color, #C71585);
}
.gz-how-to-play__body ul,
.gz-how-to-play__body ol {
  margin: 0.25rem 0 0;
  padding-left: 1.2rem;
  line-height: 1.6;
  font-size: 0.875rem;
}
.gz-how-to-play__body li { margin-bottom: 0.25rem; }
.gz-how-to-play__body li::marker { color: var(--gz-game-color, #C71585); }
/* Pink, not the per-game accent — a link should look the same
   whichever game guide you are reading. */
.gz-how-to-play__body a { color: var(--pink); }

/* ── Mobile logo size bumps — no original mobile override for these ── */
@media (max-width: 640px) {
  .gz-brand-visit-card__logo--sm { width: 80px; height: 80px; }
  .gz-brand-similar-logo-circle { width: 64px; height: 64px; }
  .gz-standfirst-logo { width: 52px; height: 52px; }
}

/* ── Hub mascot image ──────────────────────────────────────────────── */
.gz-hub-mascot {
  width: 160px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .gz-hub-mascot { width: 120px; }
}

/* ── Hub mascot wrap with tagline ──────────────────────────────────── */
.gz-hub-mascot-wrap {
  text-align: center;
  margin-bottom: 1.25rem;
}
.gz-hub-mascot-tagline {
  font-size: 0.8rem;
  font-weight: 700;
  color: #C71585;
  letter-spacing: 1px;
  margin: 0.5rem 0 0;
}

/* ── Greeting box centered variant ─────────────────────────────────── */
.mag-greeting--centered {
  text-align: center;
}
.mag-greeting--centered .mag-greeting__mascot {
  float: none;
  display: block;
  margin: 0 auto 0.75rem;
  width: 200px;
}
/* Dauble mascot is a wider, tray-out image — needs more width than the
   default centered mascot to read at the same visual size. More specific
   than .mag-greeting--centered so it wins for the Dauble sidebar only. */
.mag-greeting--centered .mag-greeting__mascot--pnm {
  width: 300px;
  max-width: 100%;
}
@media (max-width: 640px) {
  .mag-greeting--centered .mag-greeting__mascot { width: 170px; }
}
@media (max-width: 640px) {
  .mag-greeting--centered .mag-greeting__mascot--pnm { width: 260px; max-width: 100%; }
}

/* ── Editor's Picks — thinner border in sidebar context ────────────── */
.mag-picks-box .gz-lotto-op-card--featured {
  border-width: 0;
}

/* ── Directory sections (grouped by network) ──────────────────────── */
.gz-directory-section { margin-bottom: 1.5rem; }
.gz-directory-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.gz-directory-section__link {
  font-size: 0.78rem;
  font-weight: 700;
  color: #C71585;
  text-decoration: none;
}
.gz-directory-section__link:hover { text-decoration: underline; }
.gz-directory-section__intro {
  text-align: center;
  font-size: 0.88rem;
  color: #555;
  line-height: 1.5;
  margin: 0 auto 0.5rem;
  max-width: 600px;
}
.gz-directory-section__intro strong { color: #1a1a2e; }
.gz-lotto-op-card__tcs { font-size: 0.6rem; color: #aaa; margin: 0.25rem 0 0; line-height: 1.4; }

/* ── Editor's Picks — smaller logos + compact cards ────────────────── */
.mag-picks-box .gz-lotto-op-card__img-circle {
  width: 64px;
  height: 64px;
  border-color: var(--gz-game-color, #C71585);
}
.mag-picks-box .gz-lotto-op-card {
  padding: 0.5rem 0.65rem;
  gap: 0.6rem;
}
.mag-picks-box .gz-lotto-op-card__name {
  font-size: 13px;
}

/* ── Bingo directory cards (lotto two-panel style) ─────────────────── */
.gz-bingo-dir-card { margin-bottom: 0.75rem; border: 2px solid #C71585; }
.gz-bingo-dir-card .gz-lotto-card-row { min-height: 140px; }
.gz-bingo-dir-divider { background: #C71585; }
.gz-bingo-dir-right { background: linear-gradient(135deg,#C71585 0%,#9c27b0 50%,#E91E8C 100%); }

.gz-bingo-dir-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  justify-content: center;
}
.gz-bingo-dir-pick {
  background: linear-gradient(135deg,#7C3AED,#fbbf24);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.gz-bingo-dir-logo-wrap { flex-shrink: 0; }
.gz-bingo-dir-logo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f0e0f5;
  display: block;
}
.gz-bingo-dir-logo-ph {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg,#C71585,#9c27b0);
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gz-bingo-dir-name {
  font-size: 1.1rem;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.2;
}
.gz-bingo-dir-stars { letter-spacing: 2px; }
.gz-bingo-dir-stars .gz-star { color: #f0e0f5; font-size: 1rem; }
.gz-bingo-dir-stars .gz-star--on { color: #7C3AED; }
.gz-bingo-dir-net {
  font-size: 0.65rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gz-bingo-dir-right {
  width: clamp(140px, 40vw, 180px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  padding: 0.75rem;
}
.gz-bingo-dir-offer-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 1.5px;
}
.gz-bingo-dir-offer {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}
.gz-bingo-dir-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}
.gz-bingo-dir-fact {
  font-size: 0.58rem;
  font-weight: 700;
  color: #9c27b0;
  background: #f5f0fa;
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.gz-bingo-dir-fact--pink { color: #be185d; background: #fce7f3; }
.gz-bingo-dir-fact--purple { color: #6d28d9; background: #f5f3ff; }
.gz-bingo-dir-fact--cyan { color: #0e7490; background: #ecfeff; }
.gz-bingo-dir-fact--gold { color: #b45309; background: #fef3c7; }
.gz-bingo-dir-fact--orange { color: #c2410c; background: #fff7ed; }
.gz-bingo-dir-fact--teal { color: #0f766e; background: #f0fdfa; }
.gz-bingo-dir-fact--green { color: #15803d; background: #dcfce7; }
.gz-bingo-dir-btns {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}
.gz-bingo-dir-btn {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  font-family: var(--font-editorial);
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: opacity .15s;
}
.gz-bingo-dir-btn:hover { opacity: 0.85; }
.gz-bingo-dir-btn--review {
  background: #fff;
  color: #C71585;
}
.gz-bingo-dir-btn--visit {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
}
.gz-bingo-dir-tcs {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .gz-bingo-dir-card .gz-lotto-card-row { min-height: auto; flex-direction: column; }
  .gz-bingo-dir-left { padding: 0.75rem 0.75rem 0.5rem; }
  .gz-bingo-dir-logo { width: 68px; height: 68px; }
  .gz-bingo-dir-logo-ph { width: 68px; height: 68px; font-size: 1.6rem; }
  .gz-bingo-dir-name { font-size: 0.95rem; }
  .gz-bingo-dir-right { width: 100%; padding: 0.65rem; }
  .gz-bingo-dir-offer { font-size: 0.82rem; }
  .gz-bingo-dir-btn { font-size: 13px; padding: 0.45rem; }
  .gz-bingo-dir-fact { font-size: 0.52rem; }
}

/* ── Bingo directory jump link ─────────────────────────────────────── */
.gz-bingo-dir-jump {
  border-color: #C71585;
  color: #C71585;
  display: inline-block;
  margin: 0.75rem 0;
}
.gz-bingo-dir-jump:hover {
  background: #C71585;
  color: #fff;
}

/* ── Directory section pill links ──────────────────────────────────── */
.gz-dir-pills {
  display: flex;
  justify-content: center;
  gap: 0.2rem;
  flex-wrap: wrap;
  margin: 0.25rem 0;
}
.gz-dir-pills .gz-lgt-jump-link {
  border-radius: 4px;
  font-size: 14px;
  padding: 6px 14px;
}

/* ── Directory section overrides — pink stars ──────────────────────── */
.gz-directory-section .lotto-section-intro__stars {
  color: var(--pink);
}

/* ── Center snake-wrap labels inside promo boxes ──────────────────── */
.mag-promo-box .gz-snake-wrap {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* ── Featured Lotto Sites hub overrides ────────────────────────────── */
.gz-lotto-ops-wrap--hub { --gz-game-color: #E8913A; }
.gz-lotto-ops-wrap--hub .gz-lotto-ops-wrap__heading {
  background: linear-gradient(135deg,#c77a2e 0%,#E8913A 100%);
  border-color: #E8913A;
}
.gz-lotto-ops-wrap--hub .mag-label { background: #E8913A; }
.gz-lotto-ops-wrap--hub .gz-lotto-op-card--featured { border-color: #E8913A; }
/* Visit Site on the featured hub card — outlined style for readability:
   white background, gold border, gold text. Was solid gold background
   with poor contrast; this version is readable and matches the card's
   white fill better than a heavy solid button. */
.gz-lotto-ops-wrap--hub .gz-lotto-op-card__btn--visit {
  background: #fff;
  color: #E8913A;
  border: 2px solid #E8913A;
}
.gz-lotto-ops-wrap--hub .gz-lotto-op-card__btn--visit:hover {
  background: #E8913A;
  color: #fff;
}
.gz-lotto-ops-wrap--hub .gz-lgt-rc-more { margin-top: 0.75rem; }
.gz-lotto-ops-wrap--hub .gz-lgt-rc-more__toggle { background: #E8913A; border-color: #E8913A; }

/* ── Editor's Picks — force pink on all buttons ───────────────────── */
.mag-picks-box .gz-lotto-op-card__btn--review {
  background: #C71585;
  color: #fff;
}
.mag-picks-box .gz-lotto-op-card__btn--visit {
  color: #C71585;
  border-color: #C71585;
}

/* ── Full-width lotto numbers card ─────────────────────────────────── */
.mag-lotto-results--full {
  width: 100%;
  margin: 1.5rem 0;
}

/* ── Bingo hub gradient background ─────────────────────────────────── */
.mag-section--bingo-hub { background: linear-gradient(180deg, #fff5f9 0%, #fef0f5 40%, #fff 100%); }

/* Page-theme variants — set the --gz-game-color token on the section
   so child elements (stars, accents, decorations) pick up the right
   hue automatically. Move away from inline style="--gz-game-color:..."
   on the section element. */
.mag-section--darts { --gz-game-color: #16A34A; }

/* Single-column variant for pages that have a full-width break in the
   middle (e.g. Premier League Darts with its calendar module) — the
   content below the break gets a readable column width, centered. */
.gz-col--single {
  max-width: 820px;
  margin: 0 auto;
}

/* Full-width wrapper for event cards on the calendar page — breaks
   out of the two-column grid so events span the whole section, but
   the inner content is capped for readability on wide screens. */
.gz-dcal-events-wrap {
  width: 100%;
  padding: 2rem 1.25rem 2.5rem;
  background: linear-gradient(180deg, #f8faf6 0%, #f2f7ee 100%);
  border-top: 2px solid rgba(22,163,74,0.25);
  border-bottom: 2px solid rgba(22,163,74,0.25);
  margin: 1.5rem 0;
}
.gz-dcal-events-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* Feature article above the event cards — contained reading column.
   Wrappers only; the article uses the hub's mag-cover__* classes for
   typography so it matches the bingo/darts hub visual rhythm. */
.gz-dcal-article-wrap {
  padding: 0.5rem 1.25rem 1.25rem;
}
.gz-dcal-article-inner {
  max-width: 820px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .gz-dcal-article-wrap { padding: 0.25rem 0.85rem 1rem; }
}

.gz-dcal-closing-wrap {
  padding: 0 1.25rem 2rem;
}
.gz-dcal-closing-inner {
  max-width: 820px;
  margin: 0 auto;
}
.gz-dcal-backlink { margin-top: 1.5rem; }
.gz-dcal-backlink__a {
  font-family: var(--font-editorial);
  font-size: 14.5px;
  font-weight: 700;
  color: #16A34A;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.gz-dcal-backlink__a:hover,
.gz-dcal-backlink__a:focus-visible { border-bottom-color: #16A34A; }

@media (max-width: 560px) {
  .gz-dcal-events-wrap { padding: 1.5rem 0.85rem 1.75rem; margin: 1rem 0; }
  .gz-dcal-closing-wrap { padding: 0 0.85rem 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   PDC RANKINGS TABLE — full Order of Merit on /darts/rankings/
   Full-width inside the events-wrap band, magazine-table styling,
   Top-16 and Top-32 highlight rows for qualification context.
   ═══════════════════════════════════════════════════════════════════ */
.gz-pdc-rankings {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-family: var(--font-editorial);
}
.gz-pdc-rankings thead {
  background: #16A34A;
  color: #fff;
}
.gz-pdc-rankings th {
  padding: 0.65rem 0.85rem;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gz-pdc-rankings__th--rank  { width: 60px;  text-align: center; }
.gz-pdc-rankings__th--move  { width: 70px;  text-align: center; }
.gz-pdc-rankings__th--money { width: 160px; text-align: right; }

.gz-pdc-rankings tbody tr { border-bottom: 1px solid #eee5d8; }
.gz-pdc-rankings tbody tr:last-child { border-bottom: 0; }
.gz-pdc-rankings tbody tr:nth-child(even) { background: #fafaf5; }

.gz-pdc-rankings__row--top16 { border-left: 4px solid #16A34A; background: #f0f9f2 !important; }
.gz-pdc-rankings__row--top32 { border-left: 4px solid #a7e0b8; background: #f7fbf8 !important; }

.gz-pdc-rankings td {
  padding: 0.55rem 0.85rem;
  font-size: 15px;
  color: #2a2a2a;
  vertical-align: middle;
}
.gz-pdc-rankings__td--rank  { text-align: center; font-size: 16px; color: #1a1a1a; }
.gz-pdc-rankings__td--move  { text-align: center; font-size: 13px; font-weight: 700; }
.gz-pdc-rankings__td--name  { font-weight: 600; }
.gz-pdc-rankings__td--money { text-align: right; font-variant-numeric: tabular-nums; color: #555; }

.gz-pdc-rankings__move--up   { color: #16A34A; }
.gz-pdc-rankings__move--down { color: #DC2626; }
.gz-pdc-rankings__move--same { color: #bbb; font-weight: 400; }

.gz-pdc-rankings__key {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1.25rem 0 0.5rem;
  font-family: var(--font-editorial);
  font-size: 13px;
  color: #555;
  justify-content: center;
}
.gz-pdc-rankings__key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.gz-pdc-rankings__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.1);
}
.gz-pdc-rankings__swatch--top16 { background: #16A34A; }
.gz-pdc-rankings__swatch--top32 { background: #a7e0b8; }

@media (max-width: 640px) {
  .gz-pdc-rankings th { padding: 0.5rem 0.5rem; font-size: 11px; }
  .gz-pdc-rankings td { padding: 0.45rem 0.5rem; font-size: 14px; }
  .gz-pdc-rankings__th--money,
  .gz-pdc-rankings__td--money { width: 100px; font-size: 13px; }
  .gz-pdc-rankings__th--move,
  .gz-pdc-rankings__td--move { width: 50px; font-size: 11px; }
  .gz-pdc-rankings__th--rank,
  .gz-pdc-rankings__td--rank { width: 40px; }
  .gz-pdc-rankings__key { font-size: 12px; gap: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   DARTS CALENDAR PAGE — event cards with descriptions (not bare list).
   Purpose-built for the /darts/calendar/ page. Richer than the sidebar
   widget or embedded calendar module because each card carries 80-100
   words of editorial copy.
   ═══════════════════════════════════════════════════════════════════ */
.gz-dcal-event-month {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 900;
  color: #16A34A;
  margin: 2.25rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px dashed rgba(22,163,74,0.35);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.gz-dcal-event-month:first-of-type { margin-top: 1.25rem; }

.gz-dcal-event {
  background: #fff;
  border: 1px solid #e8e4da;
  border-left: 5px solid var(--dcal-accent, #16A34A);
  border-radius: 6px;
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.gz-dcal-event__head {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed #e0dccf;
}

.gz-dcal-event__date {
  flex-shrink: 0;
  min-width: 84px;
  text-align: center;
  padding: 0.55rem 0.5rem;
  background: #faf7f0;
  border-radius: 6px;
  line-height: 1.1;
  border: 1px solid #e8e4da;
}
.gz-dcal-event__date-m {
  display: block;
  font-family: var(--font-editorial);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--dcal-accent, #16A34A);
  letter-spacing: 0.07em;
}
.gz-dcal-event__date-d {
  display: block;
  font-family: var(--font-editorial);
  font-size: 24px;
  font-weight: 900;
  color: #1a1a1a;
  margin: 0.2rem 0;
  line-height: 1;
}
.gz-dcal-event__date-s {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.05em;
}

.gz-dcal-event__title-wrap {
  flex: 1;
  min-width: 0;
}
.gz-dcal-event__cat {
  display: inline-block;
  font-family: var(--font-editorial);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  color: #fff;
  margin-bottom: 0.45rem;
}
.gz-dcal-event__cat--major        { background: #16A34A; }
.gz-dcal-event__cat--women        { background: #E91E8C; }
.gz-dcal-event__cat--world-series { background: #06B6D4; }
.gz-dcal-event__cat--world-cup    { background: #3B82F6; }
.gz-dcal-event__cat--youth        { background: #A855F7; }

.gz-dcal-event__name {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 900;
  color: #1a1a1a;
  margin: 0 0 0.25rem;
  line-height: 1.2;
}

.gz-dcal-event__meta {
  font-family: var(--font-editorial);
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}
.gz-dcal-event__venue { font-weight: 600; color: #555; }
.gz-dcal-event__tv    { color: #777; }

.gz-dcal-event__desc p {
  font-family: var(--font-editorial);
  font-size: 15.5px;
  line-height: 1.6;
  color: #2a2a2a;
  margin: 0 0 0.75rem;
}

.gz-dcal-event__more {
  display: inline-block;
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 700;
  color: var(--dcal-accent, #16A34A);
  text-decoration: none;
  padding: 0.15rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.gz-dcal-event__more:hover,
.gz-dcal-event__more:focus-visible {
  border-bottom-color: var(--dcal-accent, #16A34A);
}

/* Mobile — stack the header vertically so the date and title don't
   fight for space on narrow viewports */
@media (max-width: 560px) {
  .gz-dcal-event { padding: 1rem 1rem 0.85rem; }
  .gz-dcal-event__head { flex-direction: column; gap: 0.75rem; }
  .gz-dcal-event__date {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    align-self: flex-start;
  }
  .gz-dcal-event__date-m,
  .gz-dcal-event__date-d,
  .gz-dcal-event__date-s { display: inline; margin: 0; }
  .gz-dcal-event__date-d { font-size: 18px; }
  .gz-dcal-event__date-m { font-size: 11px; }
  .gz-dcal-event__date-s { font-size: 10.5px; color: #999; }
  .gz-dcal-event__name { font-size: 18px; }
  .gz-dcal-event__desc p { font-size: 14.5px; }
  .gz-dcal-event-month { font-size: 18px; }
}

/* ── Gradient drop cap ─────────────────────────────────────────────── */
.drop-cap--gradient {
  background: linear-gradient(135deg, #C71585, #9c27b0, #E91E8C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mag-cover__title--gradient {
  background: linear-gradient(135deg, #C71585 0%, #9c27b0 50%, #E91E8C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Gradient snake wrap variant ───────────────────────────────────── */
.gz-snake-wrap--gradient { background: linear-gradient(135deg, #C71585, #9c27b0, #E91E8C); }
.mag-label--gradient { background: linear-gradient(135deg, #C71585, #9c27b0, #E91E8C); }

/* ── Live ad — remove parent padding too ───────────────────────────── */
.mag-mini-ad--live {
  padding: 0;
}
.mag-mini-ad--live .mag-mini-ad__label {
  margin-bottom: 0;
}
.mag-mini-ad--mobile-only { display: none; }
/* Swap at 900px to MATCH the .mag-row column collapse (was 640px, which
   left the fixed 720px desktop banner overflowing a single column in the
   641-900px range - the "wrong layout" on the party pages). PATCHED-205. */
@media (max-width: 900px) {
  .mag-mini-ad--mobile-only { display: block; }
  .mag-mini-ad--desktop-only { display: none; }
}
/* Belt and braces: the banner gif can never overflow any container. */
.mag-mini-ad__content img { max-width: 100%; height: auto; }

/* ── Lotto / rainbow directory card modifiers ─────────────────────────
   Used on bingo-sites.php for the Health Lottery promo card, but any
   hub can opt into this look by stacking these modifier classes onto
   the standard .gz-bingo-dir-card / .gz-lotto-card-divider / .gz-bingo-dir-right.
   Colours are the 5-stop lotto rainbow: rose → purple → cyan → green → amber. */
.gz-bingo-dir-card--lotto {
  border: 2px solid #F43F5E;
}
.gz-lotto-card-divider--rainbow {
  background: linear-gradient(180deg, #F43F5E, #9c27b0, #00BCD4, #65A30D, #7C3AED);
}
.gz-bingo-dir-right--rainbow {
  background: linear-gradient(135deg, #F43F5E, #9c27b0, #00BCD4);
}

/* ── In-this-section mini-block: missing colour variants ───────────────
   Filling gaps so every /bingo/ hub card can colour-code its category
   label, left-border and "continue" link to the section it points at.
   Sites = pink, Games = purple, Companies = teal, Networks = green,
   Lingo = cyan, Scam = danger. */
.mag-mini__cat--green { background: linear-gradient(135deg, #16A34A, #4ade80, #065f46); color: #fff; font-weight: 800; box-shadow: 0 1px 2px rgba(22,163,74,0.3); }
.mag-mini__cat--cyan  { background: var(--cyan);        color: #fff; }
.mag-mini__cat--sister { background: linear-gradient(90deg,#ec4899,#9c27b0,#6366f1); color: #fff; }
.mag-mini__cat--danger { background: var(--danger);     color: #fff; }
.gz-mini--teal { border-left: 4px solid var(--teal-light); background: #f0f8f8; }
.gz-mini-continue--purple { color: var(--purple); }
.gz-mini-continue--violet { color: var(--card-violet); }
.gz-mini-continue--party  { color: var(--card-violet); }
.gz-mini-continue--green  { color: var(--green-lotto); }
.gz-mini-continue--teal   { color: var(--teal-light); }

/* ── Mini-card mobile tap affordance ──────────────────────────────────
   On mobile (< 768px) the teaser and "Continue reading →" text are
   hidden, so the card can read as a static tile. A subtle right-edge
   chevron signals it's tappable. Hidden from tablet up, where the
   existing .mag-mini__continue arrow takes over. */
@media (max-width: 767px) {
  .mag-mini { position: relative; padding-right: 2.25rem; }
  .mag-mini::after {
    content: "›";
    position: absolute;
    top: 50%;
    right: 0.875rem;
    transform: translateY(-50%);
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: #b8b8b8;
    pointer-events: none;
  }
}

/* ── Call of the Day — Bingo Lingo box ───────────────────────────────
   Sits in the /bingo/ hub sidebar. Inherits dark angled background from
   .mag-promo-box. Ball is a classic glossy bingo ball with a white inner
   disc holding the pink number. Rotates daily via PHP date("z") in bingo.php. */
.gz-lingo-box { text-align: center; }
.gz-lingo-inner { padding: 0.25rem 0; }
.gz-lingo-ball-wrap {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0.75rem;
}
.gz-lingo-ball {
  position: relative;
  z-index: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ff6b9d 0%, var(--pink) 55%, var(--pink-dark) 100%);
  box-shadow:
    inset 0 -5px 10px rgba(0,0,0,0.3),
    inset 0 5px 12px rgba(255,255,255,0.4),
    0 4px 12px rgba(0,0,0,0.4);
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 900;
  color: var(--pink-dark);
}
.gz-lingo-ball::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: #fff;
  z-index: 1;
}
.gz-lingo-num {
  position: relative;
  z-index: 2;
  line-height: 1;
}
.gz-lingo-call {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0.25rem 0 0.5rem;
  letter-spacing: 0.01em;
}
.gz-lingo-origin {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 0 0.5rem 1rem;
}
.gz-lingo-link {
  display: inline-block;
  margin-top: 0.25rem;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.gz-lingo-link:hover { color: var(--pink-light); }

/* ── Snake-wrap decoration above the hub's Jump-In CTA ────────────────
   Centres the rotated "JUMP IN" label and tightens the gap between the
   label and the button beneath it. */
.gz-cta-snake-wrap {
  display: flex;
  justify-content: center;
  margin: 1.25rem 0 -0.25rem;
}

/* ── National Lottery Results box (on /bingo/ hub footer) ─────────────
   Centres the labelled rows of balls in the box and gives the draw
   date a bit more presence — 11px was too tight to read on mobile. */
.gz-lotto-results-balls {
  margin: 0.75rem 0 0.5rem;
}
.gz-lotto-results-balls .gz-lotto-balls-row,
.gz-lotto-results-balls .gz-lotto-bonus-row {
  justify-content: center;
  gap: 6px;
}
.gz-lotto-results-balls .gz-lotto-bonus-name {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  font-style: italic;
  margin-right: 4px;
}
.mag-lotto-results__inner .gz-lotto-date {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  margin: 0.4rem 0 0.75rem;
}

/* ── Directory sidebar jump-to-sites box ────────────────────────────
   Dark sidebar theme, network name on its own line above the logo+count
   row (less squish on mobile with long names like Virtue Fusion (Playtech
   Bingo)). Logos render if /assets/images/networks/{slug}.webp exists,
   coloured-initial placeholder otherwise. */
.gz-jump-box {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 2px solid var(--pink);
  padding: 0;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-dark);
  overflow: hidden;
}
.gz-jump-box__header {
  background: linear-gradient(135deg, #1a0010 0%, #2d0a1a 100%);
  padding: 1rem 1rem 0.85rem;
  text-align: center;
}
.gz-jump-box__title {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  color: #fff;
  margin: 0.5rem 0 0.2rem;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .gz-jump-box__title { font-size: 20px; }
}
.gz-jump-box__list {
  list-style: none;
  padding: 0.25rem 1.25rem 0.75rem;
  margin: 0;
}
.gz-jump-box__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gz-jump-box__item:last-child {
  border-bottom: none;
}
.gz-jump-box__link {
  display: block;
  padding: 0.75rem 0;
  text-decoration: none;
  transition: opacity 0.15s;
}
.gz-jump-box__link:hover,
.gz-jump-box__link:focus {
  opacity: 0.8;
}
.gz-jump-box__name {
  display: block;
  font-family: var(--font-editorial);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .gz-jump-box__name { font-size: 16px; }
}
.gz-jump-box__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.gz-jump-box__logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid var(--ball-color, var(--pink));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gz-jump-box__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gz-jump-box__placeholder {
  color: var(--ball-color, var(--pink));
  font-family: var(--font-editorial);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
.gz-jump-box__count {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

/* Scroll offset so anchored sections don't hide behind a fixed masthead */
[id^="section-"] { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; }

/* ── Footer mascot variant — used on /bingo-sites/ sidebar foot ───────
   The main hub uses mag-greeting as a hero block. On the directory
   the mascot sits at the bottom as a quiet sign-off — less mass, no
   headline, just the lady and a credibility note. */
.mag-greeting--footer {
  padding: 1rem 0.5rem 0.5rem;
  margin-top: 0.5rem;
}
.mag-greeting--footer .mag-greeting__mascot {
  max-width: 180px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}
.mag-greeting--footer .mag-greeting__sub {
  font-size: 14px;
  color: #555;
  margin: 0.5rem 0 0.25rem;
  text-align: center;
}
.mag-greeting--footer .mag-greeting__stars-bottom {
  text-align: center;
  color: var(--pink);
  font-size: 12px;
  margin: 0;
}

/* ── Snake-wrap used as a CTA link ────────────────────────────────────
   When an <a> tag takes the .gz-snake-wrap classes directly, it behaves
   as a clickable button. Used on bingo.php — the whole snake graphic
   becomes one tappable area reading "✦ JUMP IN ✦". */
/* Snake-CTA selector has higher specificity than .mag-section .gz-snake-wrap--rotated
   so the button margins win inside a mag-section (previous attempt was silently overridden). */
a.gz-snake-cta.gz-snake-wrap,
.mag-section a.gz-snake-cta {
  display: block;
  margin: 1.5rem auto 3rem;
  max-width: 100%;
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s;
}
@media (min-width: 768px) {
  a.gz-snake-cta.gz-snake-wrap,
  .mag-section a.gz-snake-cta {
    max-width: 60%;
    margin-bottom: 3.25rem;
  }
}
a.gz-snake-cta:hover,
a.gz-snake-cta:focus {
  transform: scale(1.04);
}
/* Tight-margin snake-CTA modifiers (used where the default 3rem bottom
   is too much, e.g. party-events inline jump links). */
.mag-section a.gz-snake-cta.gz-snake-cta--tight    { margin: 0.5rem auto 0.5rem; }
.mag-section a.gz-snake-cta.gz-snake-cta--tight-lg { margin: 0.5rem auto 1.5rem; }
.mag-section a.gz-snake-cta.gz-snake-cta--tight-tb { margin: 1.25rem auto 0.5rem; }
a.gz-snake-cta .gz-snake-label {
  cursor: pointer;
}

/* ── Snake-wrap outline variant ───────────────────────────────────────
   A snake-wrap without the pink fill — used when you want the animated
   snaking gradient as decoration around a regular link/button, not as
   a section-heading label pill. The interior is transparent/white so
   the snake reads as a border, not a filled panel. */
.gz-snake-wrap--outline {
  background: transparent;
}
.gz-snake-cta__text {
  display: block;
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 0.85rem 1.25rem;
  /* Deliberately NOT themed. The snake CTA is one consistent element
     across the site — brands.php, vault.php, scam-check.php and the rest
     all render it in the same pink with no colour variant on the wrap.
     Theming it made it orange on the lotto hub and off-brand elsewhere. */
  color: var(--pink);
  font-family: var(--font-editorial);
  font-size: 15px;
  font-style: italic;
  font-weight: 900;
  line-height: 1.3;
  border-radius: 2px;
  text-align: center;
}
@media (min-width: 768px) {
  .gz-snake-cta__text { font-size: 18px; }
}

/* ── Directory rows (bingo-sites.php — Option A listing style) ────────
   Each row is its own bordered card with a purple gradient divider
   between. Purple dominates to balance the page (lots of pink elsewhere);
   pink is reserved for section labels and primary CTAs. Cards fade up as
   they scroll into view — progressive enhancement via view-timeline;
   non-supporting browsers and reduced-motion users just see them static. */
.gz-directory-grid {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin: 1rem 0 1.5rem;
}
.gz-dir-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1.25rem 1rem 1.25rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  /* overflow: hidden removed so the commission-disclosure tooltip can
     escape the card. The left rail (::after) below is now rounded on
     its own left corners to match the card, so nothing else needs
     the parent to clip. */
}
/* Left accent rail — pink→violet→purple gradient matching the
   featured row rail, so all brand cards share the same brand
   accent treatment. Featured rows still stand out via a wider
   rail + pink-tinted background. */
.gz-dir-row::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    #c71585 0%,
    #9333ea 50%,
    #7c3aed 100%
  );
  border-radius: 10px 0 0 10px;
  transition: width 0.2s, background 0.2s;
  pointer-events: none;
}
.gz-dir-row:hover {
  z-index: 99999 !important;
  border-color: rgba(139, 92, 246, 0.38);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.12), 0 2px 6px rgba(199, 21, 133, 0.08);
  transform: translateY(-2px);
}
/* Also lift the row when the tip icon has hover/focus, in case the
   row-level :hover chain is interrupted (e.g. tab-key focus). */
.gz-dir-row:focus-within {
  z-index: 99999 !important;
}
/* Explicit :has() rules for the case where pointer is only over the
   tooltip icon (not the wider card body). */
.gz-dir-row:has(.gz-aff-tip:hover),
.gz-dir-row:has(.gz-aff-tip:focus),
.gz-dir-row:has(.gz-aff-tip:focus-within) {
  z-index: 99999 !important;
}
/* Fallback for browsers without :has() — the tooltip parent itself
   bumps its own z-index when active, so the bubble at least sits
   above sibling content within the same card. */
.gz-aff-tip:hover,
.gz-aff-tip:focus,
.gz-aff-tip:focus-within {
  z-index: 99999;
  position: relative;
}
.gz-dir-row:hover::after {
  width: 6px;
}

/* Featured rows — richer rail (wider + more saturated) + pink-tinted bg */
.gz-dir-row--featured {
  background: #fdfaff;
  border-color: rgba(139, 92, 246, 0.35);
}
.gz-dir-row--featured::after {
  width: 5px;
  background: linear-gradient(
    180deg,
    #c71585 0%,
    #9333ea 50%,
    #7c3aed 100%
  );
}
.gz-dir-row--featured:hover {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.18), 0 2px 8px rgba(199, 21, 133, 0.12);
}
.gz-dir-row--featured:hover::after {
  width: 7px;
}

/* Purple gradient faded divider between each pair of rows (sits in the
   grid gap). Skips before the first row. */
.gz-dir-row:not(:first-child)::before {
  content: \'\';
  position: absolute;
  top: -0.9rem;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(139, 92, 246, 0.25) 18%,
    rgba(167, 139, 250, 0.5) 50%,
    rgba(139, 92, 246, 0.25) 82%,
    transparent 100%
  );
  pointer-events: none;
}

/* Scroll-in reveal — modern browsers only (view-timeline), graceful
   fallback for everyone else. SEO-safe: content is visible by default,
   animation is a progressive enhancement layer on top. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gz-dir-row {
      animation: gz-dir-row-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 15%;
    }
    @keyframes gz-dir-row-reveal {
      from { opacity: 0.35; transform: translateY(18px); }
      to   { opacity: 1;    transform: translateY(0); }
    }
  }
}

/* Logo — larger than before so brand identity reads clearly */
.gz-dir-row__logo-wrap {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid rgba(139, 92, 246, 0.22);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gz-dir-row__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gz-dir-row__logo-ph {
  font-family: var(--font-editorial);
  font-size: 26px;
  font-weight: 800;
  color: var(--pink);
}

.gz-dir-row__main {
  flex: 1 1 200px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Angled EDITOR\'S PICK tag — reuses snake-wrap system, purple to
   differentiate from pink section labels, sized to sit above the name. */
.gz-dir-row__pick-wrap {
  align-self: flex-start;
  margin: 0 0 0.5rem 0.25rem;
}
.gz-dir-row__pick-wrap .gz-snake-label,
.gz-dir-row__pick-wrap .mag-label {
  font-size: 10px;
  padding: 3px 9px;
  letter-spacing: 1.2px;
}

.gz-dir-row__name {
  font-family: var(--font-editorial);
  font-size: 19px;
  font-weight: 700;
  color: #111;
  margin: 0;
  line-height: 1.2;
}
.gz-dir-row__stars {
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
  margin-top: 0.25rem;
}
/* Themed stars — use the section's --gz-game-color so directory rows match
   the page's palette instead of the default amber. Fallback to pink. */
.gz-dir-row__stars .gz-star--on { color: var(--gz-game-color, #C71585); }
.gz-dir-row__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.45rem 0 0;
  padding: 0;
  line-height: 1.4;
}
.gz-dir-pill {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-radius: 3px;
  line-height: 1.4;
  white-space: nowrap;
}
.gz-dir-pill--pink   { background: rgba(199, 21, 133, 0.10); color: var(--pink); }
.gz-dir-pill--purple { background: rgba(139, 92, 246, 0.12); color: #6d28d9; }
.gz-dir-pill--cyan   { background: rgba(0, 188, 212, 0.14);  color: #0e7490; }
.gz-dir-pill--orange { background: rgba(249, 115, 22, 0.14); color: #c2410c; }
.gz-dir-pill--teal   { background: rgba(0, 137, 123, 0.14);  color: #00695c; }
.gz-dir-pill--gold   { background: rgba(251, 191, 36, 0.18); color: #a16207; }
.gz-dir-pill--green  { background: rgba(22, 163, 74, 0.14);  color: #15803d; }

.gz-dir-row__actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-shrink: 0;
  min-width: 132px;
}
.gz-dir-row__btn {
  display: block;
  padding: 0.55rem 1rem;
  font-family: var(--font-editorial);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.gz-dir-row__btn:hover,
.gz-dir-row__btn:focus {
  transform: translateY(-1px);
}
.gz-dir-row__btn--review {
  background: transparent;
  border: 2px solid var(--pink);
  color: var(--pink);
}
.gz-dir-row__btn--review:hover,
.gz-dir-row__btn--review:focus {
  background: var(--pink);
  color: #fff;
}
.gz-dir-row__btn--visit {
  background: var(--pink);
  color: #fff;
  border: 2px solid var(--pink);
}
.gz-dir-row__btn--visit:hover,
.gz-dir-row__btn--visit:focus {
  background: #9c1168;
  border-color: #9c1168;
}

/* Mobile — actions stretch across the full row below the content */
@media (max-width: 520px) {
  .gz-dir-row__actions {
    flex-direction: row;
    width: 100%;
    min-width: 0;
    margin-top: 0.25rem;
  }
  .gz-dir-row__btn {
    flex: 1;
    padding: 0.6rem 0.5rem;
  }
}

@media (min-width: 768px) {
  .gz-dir-row { padding: 1.4rem 1.25rem; }
  .gz-dir-row__name { font-size: 21px; }
  .gz-dir-row__logo-wrap { width: 88px; height: 88px; }
  .gz-dir-row__logo-ph { font-size: 30px; }
  .gz-dir-row__main { min-width: 220px; }
}

/* Section footer — faded divider + magazine-style "More on [Network]"
   caption with compact links. Subtle editorial see-also pattern that
   blends into the page instead of shouting. */
.gz-dir-section-footer {
  margin: 2rem 0 0.5rem;
}
.gz-dir-section-footer .mag-faded-border {
  margin-bottom: 1.25rem;
}
.gz-section-more {
  text-align: center;
  margin: 0 auto 0.5rem;
  max-width: 560px;
  padding: 0 1rem;
}
.gz-section-more__label {
  display: inline-block;
  position: relative;
  font-family: var(--font-editorial);
  font-size: 11px;
  font-weight: 800;
  color: var(--pink);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding: 0 0.9rem;
}
.gz-section-more__label::before,
.gz-section-more__label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 32px;
  height: 1px;
  background: rgba(199, 21, 133, 0.35);
}
.gz-section-more__label::before { right: 100%; }
.gz-section-more__label::after  { left:  100%; }
.gz-section-more__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.5rem;
  line-height: 1.6;
}
.gz-section-more__links--stacked {
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.gz-section-more__link {
  color: #4c1d95;
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline dotted rgba(76, 29, 149, 0.45);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  padding: 0.1rem 0;
  transition: color 0.15s, text-decoration-color 0.15s, text-decoration-style 0.15s;
  white-space: nowrap;
}
.gz-section-more__link:hover,
.gz-section-more__link:focus {
  color: var(--pink);
  text-decoration: underline solid var(--pink);
}
.gz-section-more__link span {
  color: var(--pink);
  font-weight: 700;
  margin-left: 0.15rem;
  text-decoration: none;
}


/* Editor's Picks — bump logo circle size on desktop so it reads with
   more presence in the sidebar. Mobile stays at the existing 78px. */
@media (min-width: 768px) {
  .mag-picks-box .gz-lotto-op-card__img-circle {
    width: 77px;
    height: 77px;
    border-color: #C71585;
  }
}

/* Small italic helper under the Visit Site button — explains where the
   welcome offer lives without listing it on our page (which goes stale). */
.gz-dir-row__offer-note {
  display: block;
  width: 100%;
  flex-basis: 100%;
  text-align: center;
  margin-top: 0.35rem;
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: var(--pink);
  line-height: 1.3;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* Mobile row actions need to wrap so the offer note drops to its own line
   instead of squeezing in beside the Read Review / Visit Site buttons. */
@media (max-width: 520px) {
  .gz-dir-row__actions {
    flex-wrap: wrap;
  }
  .gz-dir-row__offer-note {
    order: 3;
  }
}

/* Pink-to-purple gradient on directory section dividers — the top divider
   of each network section AND the section-footer divider before the
   "More on [Network]" links. Gives the page breaks a pinky-purple feel
   that matches the overall brand palette instead of reading flat pink. */
.gz-directory-section > .mag-faded-border,
.gz-dir-section-footer .mag-faded-border {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--pink) 18%,
    #a855f7 50%,
    var(--pink) 82%,
    transparent 100%);
}

/* Force text-pink spans inside cover titles to actually be pink, defeats
   any specificity battles with theme/section wrappers. */
.mag-cover__title .text-pink,
.mag-cover__title > .text-pink {
  color: var(--pink) !important;
}

/* ── Responsible Gambling in-content strip ───────────────────────────
   UKGC compliance + YMYL trust signal. Three variants: compact (hub
   pages), inline (near affiliate CTAs), full (brand reviews). */
.gz-rg-strip {
  margin: 1.5rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(199, 21, 133, 0.15);
  background: #fffbfd;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #444;
  text-align: center;
}
.gz-rg-strip p { margin: 0; }
.gz-rg-strip a {
  color: var(--pink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 21, 133, 0.3);
}
.gz-rg-strip a:hover,
.gz-rg-strip a:focus { border-bottom-color: var(--pink); }
.gz-rg-strip strong { color: #222; }
.gz-rg-strip__18 {
  display: inline-block;
  background: #E91E63;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 0.3rem;
  vertical-align: middle;
}
/* Sidebar dark variant */
.gz-rg-strip--dark {
  background: #1a1a2e;
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
  font-size: 12px;
}
.gz-rg-strip--dark a {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.3);
}
.gz-rg-strip--dark a:hover { border-bottom-color: #fff; }
.gz-rg-strip--dark .gz-rg-strip__label {
  color: rgba(255,255,255,0.5);
}

.gz-rg-strip--compact { text-align: center; }

.gz-rg-strip--full {
  padding: 1.2rem 1.4rem;
  background: linear-gradient(180deg, #fffbfd 0%, #fff 100%);
  border-left: 3px solid var(--pink);
}
.gz-rg-strip--full .gz-rg-strip__inner { max-width: 620px; margin: 0 auto; text-align: center; }
.gz-rg-strip--full .gz-rg-strip__headline {
  font-family: var(--font-editorial);
  font-size: 15px;
  color: #1a1a1a;
  margin-bottom: 0.4rem;
}
.gz-rg-strip--full .gz-rg-strip__body {
  font-size: 13px;
  color: #555;
  margin-bottom: 0.7rem;
}
.gz-rg-strip--full .gz-rg-strip__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.7rem;
}
.gz-rg-strip--full .gz-rg-strip__link {
  font-family: var(--font-editorial);
  font-weight: 700;
  font-size: 13px;
}
.gz-rg-strip--full .gz-rg-strip__sep {
  color: rgba(199, 21, 133, 0.4);
  font-weight: 700;
}
.gz-rg-strip--full .gz-rg-strip__note {
  font-size: 12px;
  color: #666;
  font-style: italic;
  margin-top: 0.4rem;
}

.gz-rg-inline {
  text-align: center;
  margin: 0.5rem 0 0;
  font-size: 11px;
  color: #666;
  font-style: italic;
  line-height: 1.4;
}
.gz-rg-inline a {
  color: var(--pink);
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
}
.gz-rg-inline a:hover,
.gz-rg-inline a:focus { text-decoration: underline; }
.gz-rg-inline strong {
  color: #c71585;
  font-weight: 800;
  font-style: normal;
}

/* ── Directory row: reviewed/updated date ──────────────────────────
   Small italic freshness signal sitting between stars and feature
   pills. Uses <time datetime="..."> so search engines and LLMs pick
   up the ISO date alongside the human-readable 'Month Year' format. */
.gz-dir-row__reviewed {
  margin: 0.25rem 0 0;
  font-size: 11px;
  font-style: italic;
  color: #888;
  letter-spacing: 0.01em;
}
.gz-dir-row__reviewed time {
  font-weight: 600;
  color: #666;
}

/* Editor's note on sister-site cards — distinguishes editorial pick
   commentary ("Same rooms as Foxy, built around sports betting...")
   from neutral brand data. Purple italic signals editor voice. */
.gz-dir-row__editor-note {
  margin: 0.45rem 0 0.3rem;
  font-size: 13.5px;
  font-style: italic;
  color: #9c27b0;
  line-height: 1.45;
}

/* "At a Glance" sister-site summary list — appears between the intro
   and the full editorial guide. Quick scannable snapshot before readers
   dive into the long-form prose. */
.gz-sister-glance {
  margin: 1.5rem 0 2rem;
  padding: 1.1rem 1.25rem 1.1rem 1.5rem;
  background: #fdf4fc;
  border-left: 4px solid #C71585;
  border-radius: 0 6px 6px 0;
}
.gz-sister-glance__label {
  font-family: var(--font-editorial);
  font-weight: 800;
  font-style: italic;
  font-size: 16px;
  color: #C71585;
  margin: 0 0 0.6rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.gz-sister-glance__list {
  margin: 0;
  padding: 0 0 0 1.25rem;
  color: #1a1a1a;
  font-size: 15px;
  line-height: 1.6;
}
.gz-sister-glance__list li {
  margin: 0 0 0.45rem;
}
.gz-sister-glance__list li:last-child {
  margin-bottom: 0;
}
.gz-sister-glance__list strong {
  color: #1a1a1a;
  font-weight: 800;
}

/* ── Quick Facts comparison table (full-width editorial section) ───
   Side-by-side ownership / network / game-type comparison. Horizontal
   scroll on narrow screens. Green ticks highlight shared attributes. */
.gz-facts-table-wrap {
  margin: 2.5rem 0 2rem;
}
.gz-facts-table-heading {
  text-align: center;
  margin-bottom: 0.75rem;
}
.gz-facts-table-heading h3 {
  margin: 0.5rem 0 0;
  font-family: var(--font-editorial);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}
.gz-facts-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.gz-facts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #333;
}
.gz-facts-table th,
.gz-facts-table td {
  padding: 10px 14px;
  text-align: center;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.gz-facts-table th:first-child,
.gz-facts-table td:first-child {
  text-align: center;
}
.gz-facts-table thead th {
  font-family: var(--font-editorial);
  font-weight: 800;
  font-size: 12px;
  color: #C71585;
  border-bottom: 2px solid #C71585;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.gz-facts-table tbody th {
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}
.gz-facts-table tbody th a {
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 21, 133, 0.3);
}
.gz-facts-table tbody th a:hover {
  color: #C71585;
  border-bottom-color: #C71585;
}
.gz-facts-table tbody tr:nth-child(even) th,
.gz-facts-table tbody tr:nth-child(even) td {
  background: #fafafa;
}
.gz-facts-table tbody tr:last-child th,
.gz-facts-table tbody tr:last-child td {
  border-bottom: none;
}
.gz-facts-cell--yes {
  color: #15803d;
  font-weight: 800;
}
.gz-facts-cell--no {
  color: #cbcbcb;
  font-weight: 600;
}
.gz-facts-table__footnote {
  margin: 1.25rem auto 0.25rem;
  max-width: 560px;
  padding: 1rem 1.25rem;
  font-family: var(--font-editorial);
  font-size: 14.5px;
  font-style: italic;
  color: #555;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-align: center;
  border-top: 1px solid rgba(22, 163, 74, 0.3);
  border-bottom: 1px solid rgba(22, 163, 74, 0.3);
}
/* Divider row splitting sisters from similar in the comparison table */
.gz-facts-table__divider-row td {
  background: #faf6f9;
  font-family: var(--font-sans, system-ui);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9c4b86;
  text-align: left;
  padding: 0.5rem 0.85rem;
  border-top: 2px solid #e3d3df;
}
.gz-facts-table__divider-note {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #b08aa3;
}
.gz-facts-table__target-row th,
.gz-facts-table__target-row td { background: rgba(199, 21, 133, 0.05); }
.gz-facts-tag {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--font-sans, system-ui);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.35rem;
  border-radius: 3px;
  vertical-align: middle;
}
.gz-facts-tag--sister { background: linear-gradient(135deg, #C71585, #9c27b0); color: #fff; }
.gz-facts-tag--similar { background: #f0e4ed; color: #9c4b86; }
.gz-facts-table__footnote strong {
  color: #1a1a1a;
  font-weight: 800;
  font-style: normal;
}
.gz-facts-table__footnote a {
  color: #15803d;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(22, 163, 74, 0.4);
}

/* ── Sidebar mini Quick Facts box ──────────────────────────────── */
.gz-sidebar-facts {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  background: #fdf4fc;
  border: 1px solid rgba(199, 21, 133, 0.2);
  border-radius: 6px;
}
.gz-sidebar-facts__label {
  text-align: center;
  font-family: var(--font-editorial);
  font-weight: 800;
  font-style: italic;
  font-size: 13px;
  color: #C71585;
  margin: 0 0 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gz-sidebar-facts__list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.9rem;
  font-family: var(--font-editorial);
  font-size: 13px;
  line-height: 1.4;
}
.gz-sidebar-facts__list dt {
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  align-self: center;
}
.gz-sidebar-facts__list dd {
  margin: 0;
  color: #1a1a1a;
  font-weight: 600;
  word-break: break-word;
}
.gz-sidebar-facts__list dd a {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 21, 133, 0.35);
}
.gz-sidebar-facts__list dd a:hover {
  color: #C71585;
  border-bottom-color: #C71585;
}

/* ── Editorial depth blocks ──────────────────────────────────────
   Hub pages need real editorial depth for Google's December 2025
   core update — thin hubs get penalised in gambling (YMYL). This
   pattern gives each hub a meaty on-page article that also anchors
   entity references (UKGC, Entain, Playtech, Virtue Fusion) for
   Google's knowledge graph. Prose-first typography, no boxes. */
.mag-editorial-depth {
  max-width: 780px;
  margin: 1.5rem auto 2rem;
  padding: 0 0.5rem;
}
.mag-editorial-depth__h3 {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 2rem 0 0.75rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.mag-editorial-depth__h3:first-child { margin-top: 0; }
.mag-editorial-depth__para {
  font-family: var(--font-editorial);
  font-size: 15px;
  line-height: 1.7;
  color: #2a2a2a;
  margin: 0 0 1rem;
}
.mag-editorial-depth__para strong {
  color: #1a1a1a;
  font-weight: 700;
}
.mag-editorial-depth__para a {
  color: var(--pink);
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 21, 133, 0.3);
  transition: border-color 0.15s;
}
.mag-editorial-depth__para a:hover,
.mag-editorial-depth__para a:focus {
  border-bottom-color: var(--pink);
}
.mag-editorial-depth__para--muted {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid rgba(199, 21, 133, 0.3);
  background: #fffbfd;
  font-size: 13px;
  color: #555;
}

@media (min-width: 768px) {
  .mag-editorial-depth__h3 { font-size: 22px; }
  .mag-editorial-depth__para { font-size: 16px; }
}

/* Scope the depth block on the bingo hub so it sits below the IN
   THIS SECTION minis and flows into the lotto band cleanly. */
.gz-hub-depth { margin-top: 2rem; }

/* ── Directory row: 18+/BeGambleAware under buttons ────────────────
   Faint, centred line below each row's Visit Site button. Only shown
   on rows with affiliate links (the conversion moment). UKGC + FTC
   compliance signal without shouting. */
.gz-dir-row__rg-note {
  display: block;
  width: 100%;
  flex-basis: 100%;
  text-align: center;
  margin: 0.4rem 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: #8a8a8a;
  letter-spacing: 0.02em;
  font-style: italic;
}
.gz-dir-row__rg-note strong {
  color: var(--pink);
  font-weight: 800;
  font-style: normal;
}
.gz-dir-row__rg-note a {
  color: #8a8a8a;
  text-decoration: none;
  font-style: normal;
  border-bottom: 1px dotted rgba(138, 138, 138, 0.5);
  transition: color 0.15s, border-color 0.15s;
}
.gz-dir-row__rg-note a:hover,
.gz-dir-row__rg-note a:focus {
  color: var(--pink);
  border-bottom-color: var(--pink);
}
/* On mobile the actions row wraps; keep the RG note full-width below */
@media (max-width: 520px) {
  .gz-dir-row__rg-note {
    order: 3;
  }
}

/* ── Homepage greeting: EEAT credential block ──────────────────────
   Sits directly under the Bingo Lady mascot + description. Gives
   Google and readers the named-author/credentials signal right at
   the moment Rachael is introducing herself to the site visitor.
   Small, trust-signal-shaped, not shouty. */
.mag-greeting__eeat {
  margin: 1rem auto 0.5rem;
  max-width: 520px;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(199, 21, 133, 0.2);
  border-bottom: 1px solid rgba(199, 21, 133, 0.2);
  text-align: center;
}
.mag-greeting__eeat-line {
  margin: 0 0 0.35rem;
  font-family: var(--font-editorial);
  font-size: 15px;
  color: #555;
}
.mag-greeting__eeat-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
  font-weight: 700;
  color: #888;
  margin: 0 0 0.3rem;
}
.mag-greeting__eeat-name {
  font-family: var(--font-editorial);
  font-weight: 800;
  font-size: 16px;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 21, 133, 0.35);
  transition: color 0.15s, border-color 0.15s;
}
.mag-greeting__eeat-name:hover,
.mag-greeting__eeat-name:focus {
  color: var(--pink);
  border-bottom-color: var(--pink);
}
.mag-greeting__eeat-creds {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 14px;
  font-style: italic;
  color: #555;
  line-height: 1.55;
  letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .mag-greeting__eeat-line   { font-size: 16px; }
  .mag-greeting__eeat-label  { font-size: 13px; }
  .mag-greeting__eeat-name   { font-size: 17px; }
  .mag-greeting__eeat-creds  { font-size: 15px; }
}

/* ── Footer: affiliate disclosure block ──────────────────────────
   FTC-compliant plain-language disclosure. Separated visually from
   the rest of the footer so it's easy for readers (and Google) to
   find and identify as a disclosure rather than marketing copy. */
.gz-footer-affiliate-disclosure {
  max-width: 780px;
  margin: 1.5rem auto 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid rgba(199, 21, 133, 0.5);
  border-radius: 2px;
  text-align: center;
}
.gz-footer-affiliate-disclosure__heading {
  margin: 0 0 0.4rem;
  font-family: var(--font-editorial);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.gz-footer-affiliate-disclosure__body {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}
.gz-footer-affiliate-disclosure__body strong {
  color: #fff;
  font-weight: 700;
}
.gz-footer-affiliate-disclosure__body code {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.9);
}

/* ── Commission disclosure tooltip ────────────────────────────────
   Small ⓘ icon that reveals a plain-language disclosure on hover
   (desktop) or tap/keyboard focus (mobile). Sits inline next to
   affiliate CTAs so the disclosure appears near the monetised link
   — Google evaluator guidelines and FTC both prefer this over
   footer-only disclosure. Pure CSS, no JS needed. */
.gz-aff-tip {
  position: relative;
  display: inline-block;
  cursor: help;
  outline: none;
  vertical-align: baseline;
}
.gz-aff-tip__icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  background: rgba(199, 21, 133, 0.12);
  color: var(--pink);
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  cursor: help;
}
.gz-aff-tip:hover .gz-aff-tip__icon,
.gz-aff-tip:focus .gz-aff-tip__icon,
.gz-aff-tip:focus-within .gz-aff-tip__icon {
  background: var(--pink);
  color: #fff;
  transform: scale(1.15);
}
.gz-aff-tip__bubble {
  position: absolute;
  /* Force right-anchor with !important so no other rule can override.
     Bubble's right edge lines up with icon's right edge; bubble extends
     LEFT into the card. Explicitly `left: auto` to override any earlier
     left-anchored declarations. */
  top: calc(100% + 4px) !important;
  bottom: auto !important;
  right: 0 !important;
  left: auto !important;
  transform: translateY(-4px);
  width: 260px;
  max-width: calc(100vw - 24px);
  padding: 0.75rem 0.9rem;
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  font-family: var(--font-editorial);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  letter-spacing: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 9999;
}
/* Arrow pointing UP from bubble — aligned with the icon (right side). */
.gz-aff-tip__bubble::after {
  content: "";
  position: absolute;
  top: auto !important;
  bottom: 100% !important;
  right: 4px !important;
  left: auto !important;
  transform: none !important;
  border: 6px solid transparent;
  border-top-color: transparent !important;
  border-bottom-color: #1a1a1a !important;
}
.gz-aff-tip:hover .gz-aff-tip__bubble,
.gz-aff-tip:focus .gz-aff-tip__bubble,
.gz-aff-tip:focus-within .gz-aff-tip__bubble {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.gz-aff-tip__heading {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.35rem;
}
/* Position variants — default is top, also support bottom/right */
/* Legacy .gz-aff-tip--bottom class kept as no-op — default is now
   already positioned below the icon, so the variant does nothing. */
/* Prevent tooltip going off-screen on narrow viewports */
@media (max-width: 400px) {
  .gz-aff-tip__bubble {
    width: 220px;
    font-size: 12px;
  }
}

/* Brand page variant of the RG note (full-width, centred under the primary CTA) */
.gz-dir-row__rg-note--brand {
  max-width: 380px;
  margin: 0.5rem auto 0;
  padding: 0 0.5rem;
}

/* ── Entity Facts strip (network.php / company.php) ─────────────
   Structured DB fields as magazine-style fact rows. Turns a thin
   entity page into visible trust signals — UKGC licence, registered
   HQ, parent ownership, launched year. Addresses YMYL depth
   expectation for gambling operator/network pages. */
.gz-entity-facts {
  margin: 1.25rem 0 1.5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, #fffbfd 0%, #fff 100%);
  border: 1px solid rgba(199, 21, 133, 0.15);
  border-left: 3px solid var(--pink);
  border-radius: 3px;
}
.gz-entity-facts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed rgba(199, 21, 133, 0.12);
}
.gz-entity-facts__row:last-child { border-bottom: none; }
.gz-entity-facts__label {
  flex: 0 0 130px;
  font-family: var(--font-editorial);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #8a8a8a;
  margin: 0;
}
.gz-entity-facts__value {
  flex: 1 1 auto;
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  word-break: break-word;
}
.gz-entity-facts__value a {
  color: var(--pink);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid rgba(199, 21, 133, 0.3);
  transition: border-color 0.15s;
}
.gz-entity-facts__value a:hover,
.gz-entity-facts__value a:focus {
  border-bottom-color: var(--pink);
}
.gz-entity-facts__subtle {
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-left: 0.35rem;
  opacity: 0.75;
}
@media (max-width: 480px) {
  .gz-entity-facts__label { flex: 1 1 100%; }
  .gz-entity-facts__value { flex: 1 1 100%; margin-top: -0.15rem; }
}

/* ── Footer EEAT credential signal (sitewide) ──────────────────
   Formal "About the Editor" block in the footer. Named author,
   credentials, independence declaration — visible on every page
   without needing to pad page bodies individually. Sits above the
   affiliate disclosure so readers see who wrote the content first,
   then how the site earns. */
.gz-footer-eeat-signal {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 1.5rem 0 1rem;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
}
.gz-footer-eeat-signal__label {
  margin: 0 0 0.4rem;
  font-family: var(--font-editorial);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.gz-footer-eeat-signal__name {
  margin: 0 0 0.5rem;
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.gz-footer-eeat-signal__link {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 21, 133, 0.6);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.gz-footer-eeat-signal__link:hover,
.gz-footer-eeat-signal__link:focus {
  color: var(--pink);
  border-bottom-color: var(--pink);
}
.gz-footer-eeat-signal__creds {
  margin: 0 0 0.5rem;
  font-family: var(--font-editorial);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.gz-footer-eeat-signal__stance {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  font-style: italic;
}
.gz-footer-eeat-signal__updated {
  margin: 0.75rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-editorial);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.gz-footer-eeat-signal__updated time {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}
@media (min-width: 768px) {
  .gz-footer-eeat-signal__name { font-size: 22px; }
  .gz-footer-eeat-signal__creds { font-size: 13.5px; }
}

/* ── Mobile-only / desktop-only visibility ─────────── */
.gz-dauble-promo--mobile-only { display: block; }
.gz-dauble-promo--desktop-only { display: none; }

@media (min-width: 768px) {
  .gz-dauble-promo--mobile-only { display: none; }
  .gz-dauble-promo--desktop-only { display: block; }
}

/* ── Desktop wide horizontal layout ─────────────── */
.gz-dauble-promo--wide {
  padding: 1.5rem 2rem;
  margin: 1.5rem 0 2rem;
}
.gz-dauble-promo__wide-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr auto;
  align-items: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.gz-dauble-promo__wide-left {
  text-align: center;
}
.gz-dauble-promo__wide-left .gz-snake-wrap {
  margin-bottom: 0.5rem;
}
.gz-dauble-promo__wide-left .gz-dauble-promo__logo {
  margin: 0.5rem 0 0.5rem;
  width: 180px;
  max-width: none;
}
.gz-dauble-promo__wide-left .gz-dauble-promo__tag {
  margin: 0;
  text-align: center;
  max-width: 300px;
  font-size: 19px;
  font-weight: 700;
  font-style: normal;
}
.gz-dauble-promo__wide-mid .gz-dauble-promo__scorecard {
  margin: 0;
  max-width: 380px;
}
.gz-dauble-promo__wide-right {
  text-align: right;
}

/* Responsive: drop to 2-col then single col on smaller desktops */
@media (max-width: 960px) {
  .gz-dauble-promo__wide-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .gz-dauble-promo__wide-right {
    grid-column: 1 / -1;
    text-align: center;
  }
}


/* ── Daily Dauble promo box ─────────────────────────────────────
   Clean white magazine-style box matching the other sidebar
   promo patterns (mag-greeting, pnm-did-you-know, gz-sister-box
   inner). Purple accent to tie to the Dauble game identity.
   Two layouts:
     .gz-dauble-promo--mobile-only   — vertical in-column
     .gz-dauble-promo--desktop-only + --wide — full-width band below mag-row
     .gz-dauble-promo--sidebar       — compact version for bingo hub sidebar */

.gz-dauble-promo {
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-top: 4px solid var(--purple, #7c3aed);
  border-radius: 4px;
  padding: 1.25rem 1rem;
  text-align: center;
  margin: 1.5rem 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.gz-dauble-promo .gz-snake-wrap {
  margin-bottom: 0.75rem;
}

.gz-dauble-promo__logo {
  display: block;
  width: 140px;
  max-width: 70%;
  height: auto;
  margin: 0.5rem auto 0.65rem;
}

.gz-dauble-promo__tag {
  font-family: var(--font-editorial);
  font-size: 14px;
  font-style: italic;
  line-height: 1.4;
  color: #333;
  margin: 0 auto 1rem;
  max-width: 320px;
}

/* Scorecard — compact, fits within the white box */
.gz-dauble-promo__scorecard {
  background: #faf7ff;
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin: 0 auto 0.9rem;
  max-width: 340px;
}
.gz-dauble-promo__scorecard-title {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--purple, #7c3aed);
  margin: 0 0 0.7rem;
  text-transform: uppercase;
  text-align: center;
}
.gz-dauble-promo__row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed rgba(124, 58, 237, 0.12);
  font-size: 18px;
}
.gz-dauble-promo__row:last-child { border-bottom: none; }
.gz-dauble-promo__pos {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: var(--purple, #7c3aed);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 800;
}
.gz-dauble-promo__name {
  flex: 1 1 auto;
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}
.gz-dauble-promo__score {
  flex: 0 0 auto;
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 700;
  color: var(--purple, #7c3aed);
  font-variant-numeric: tabular-nums;
}

/* CTA link — pill matches the site's link pattern */
.gz-dauble-promo__link {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: var(--purple, #7c3aed);
  color: #fff;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.15s, transform 0.15s;
}
.gz-dauble-promo__link:hover,
.gz-dauble-promo__link:focus {
  background: #5b21b6;
  color: #fff;
  transform: translateY(-1px);
}

/* Visibility variants */
.gz-dauble-promo--mobile-only { display: block; }
.gz-dauble-promo--desktop-only { display: none; }
@media (min-width: 768px) {
  .gz-dauble-promo--mobile-only { display: none; }
  .gz-dauble-promo--desktop-only { display: block; }
}

/* Desktop wide horizontal band — sits below mag-row, full width */
.gz-dauble-promo--wide {
  padding: 1.25rem 2rem;
  margin: 1.5rem 0 2rem;
}
.gz-dauble-promo__wide-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr auto;
  align-items: center;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.gz-dauble-promo__wide-left { text-align: center; }
.gz-dauble-promo__wide-left .gz-snake-wrap { margin-bottom: 0.5rem; }
.gz-dauble-promo__wide-left .gz-dauble-promo__logo {
  margin: 0.5rem 0;
  width: 160px;
  max-width: none;
}
.gz-dauble-promo__wide-left .gz-dauble-promo__tag {
  margin: 0;
  text-align: center;
  max-width: 260px;
}
.gz-dauble-promo__wide-mid .gz-dauble-promo__scorecard {
  margin: 0;
  max-width: 360px;
}
.gz-dauble-promo__wide-right { text-align: right; }

@media (max-width: 960px) {
  .gz-dauble-promo__wide-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .gz-dauble-promo__wide-right {
    grid-column: 1 / -1;
    text-align: center;
  }
}

/* Mobile — stack the wide band to one column. Needed now the band shows
   at all breakpoints rather than desktop-only. Re-centres the logo, tag
   and scorecard, which the wide layout left-aligns via margin:0. */
@media (max-width: 767px) {
  .gz-dauble-promo--wide {
    padding: 1.25rem 1rem;
  }
  .gz-dauble-promo__wide-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .gz-dauble-promo__wide-left .gz-dauble-promo__logo {
    margin: 0.5rem auto;
    width: 140px;
  }
  .gz-dauble-promo__wide-left .gz-dauble-promo__tag {
    margin: 0 auto;
    max-width: 280px;
  }
  .gz-dauble-promo__wide-mid .gz-dauble-promo__scorecard {
    margin: 0 auto;
    max-width: 320px;
  }
  .gz-dauble-promo__wide-right {
    text-align: center;
  }
}

/* Compact sidebar variant (no scorecard — used on bingo hub) */
.gz-dauble-promo--sidebar {
  padding: 1rem;
}
.gz-dauble-promo--sidebar .gz-dauble-promo__logo { width: 240px; max-width: 100%; }
.gz-dauble-promo--sidebar .gz-dauble-promo__tag { font-size: 15px; }


/* ── 100% MAG article on the directory ───────────────────────────
   Uses standard .mag-cover classes (same as brand guides, network
   profiles, lotto pages) so typography matches. Just constrains the
   column to readable article width and spaces it from the rows above
   and the FAQ below. */
.gz-dir-editorial-article {
  width: 100%;
  margin: 1rem 0 2rem;
  /* .mag-cover base carries a right-column divider (border-right: 1px)
     for use inside a two-col .mag-row. This article is a standalone
     full-width piece below the directory, so the vertical divider would
     show up as a stray line on the right edge. Strip it here. */
  border-right: none;
  /* Edges line up with the two columns above: Part 1's text starts at
     .mag-col.gz-col-pad-l's 0.5rem, and the sidebar ends flush with the
     grid, so Part 2 has to match both or it reads as indented.

     .gz-fw-content already supplies that 0.5rem, so inside it this adds
     nothing — 1.5rem here was stacking on top of it and pushing every
     Part 2 in ~2rem from the left. Standalone it keeps the 0.5rem so the
     prose still has a gutter. */
  padding: 0 0.5rem;
}
.gz-fw-content > .gz-dir-editorial-article,
.gz-fw-content .gz-dir-editorial-article { padding-left: 0; padding-right: 0; }

/* Sign-off byline variant — for articles where the byline sits at the
   bottom as a sign-off rather than at the top under the H2. Styled to
   feel like a magazine "— by author" closing credit. */
.mag-cover__meta--signoff {
  margin: 1.5rem 0 0.5rem;
  font-style: italic;
  text-align: right;
  font-size: 13px;
  color: #666;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(199, 21, 133, 0.2);
}
.mag-cover__meta--signoff .mag-cover__author {
  font-style: normal;
  font-weight: 700;
  color: #1a1a1a;
}

/* ── EEAT sign-off variant ──────────────────────────────────────
   Same look as the homepage Bingo Lady EEAT block, but tuned to sit
   at the foot of an editorial article rather than inside a greeting
   box. Tighter top margin, pulls in from article padding, sits as a
   columnist signature below the pull-quote and closing paragraph. */
.mag-greeting__eeat--signoff {
  margin: 2rem auto 0.5rem;
  max-width: 480px;
}

/* ── National Lottery Results — dual-view ────────────────────────
   Mobile: .mag-lotto-results--mobile-only sits in the left column
   at the foot, so the lotto flows right after the main editorial
   on mobile rather than being buried below all the sidebar boxes.

   Desktop: .mag-lotto-results--desktop-only.mag-lotto-results--wide
   sits as a full-width horizontal band OUTSIDE the mag-row, showing
   logo | draw balls | CTA in three columns. Both versions share
   the base .mag-lotto-results styling (black bg, peach border).

   Without these visibility rules both versions render, duplicating
   the lotto block — classes existed in HTML but had no CSS. */
.mag-lotto-results--mobile-only  { display: block; }
.mag-lotto-results--desktop-only { display: none; }

@media (min-width: 768px) {
  .mag-lotto-results--mobile-only  { display: none; }
  .mag-lotto-results--desktop-only { display: block; }
}

/* Desktop wide horizontal band */
.mag-lotto-results--wide {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 2rem;
}
.mag-lotto-results--wide .mag-lotto-results__wide-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  align-items: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.mag-lotto-results--wide .mag-lotto-results__wide-left {
  text-align: center;
}
.mag-lotto-results--wide .mag-lotto-results__wide-left .gz-snake-wrap {
  margin-bottom: 0.5rem;
}
.mag-lotto-results--wide .mag-lotto-results__wide-left .mag-lotto-results__slogan {
  text-align: center;
  margin: 0.5rem 0 0;
  max-width: 280px;
  font-size: 14px;
}
.mag-lotto-results--wide .mag-lotto-results__wide-mid {
  text-align: center;
}
.mag-lotto-results--wide .mag-lotto-results__wide-right {
  text-align: right;
}
.mag-lotto-results--wide .mag-lotto-results__wide-right .mag-lotto-results__sponsor {
  margin: 0.5rem 0 0;
  text-align: right;
}

@media (max-width: 960px) {
  .mag-lotto-results--wide .mag-lotto-results__wide-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .mag-lotto-results--wide .mag-lotto-results__wide-right {
    grid-column: 1 / -1;
    text-align: center;
  }
  .mag-lotto-results--wide .mag-lotto-results__wide-right .mag-lotto-results__sponsor {
    text-align: center;
  }
}

/* ── EEAT sign-off updated date ─────────────────────────────────
   Small dated line below the credentials, inside the sign-off
   variant of the EEAT block. Freshness signal for Google + a
   reader-visible "when was this last reviewed" cue. */
.mag-greeting__eeat-updated {
  margin: 0.5rem 0 0;
  font-family: var(--font-editorial);
  font-size: 13px;
  font-style: italic;
  color: #888;
  letter-spacing: 0.02em;
  text-align: center;
}
@media (min-width: 768px) {
  .mag-greeting__eeat-updated { font-size: 14px; }
}
.mag-greeting__eeat-updated time {
  font-weight: 600;
  color: #555;
  font-style: normal;
}

/* ── Section-level RG note (above section dividers) ──────────────
   Larger-breathing variant of the per-row RG note, sized for use
   between article end and the "IN THIS SECTION" break. Keeps the
   compliance line visible without shouting. */
.gz-dir-row__rg-note--section {
  max-width: 640px;
  margin: 1.5rem auto 0.5rem;
  padding: 0 1rem;
  font-size: 12px;
  line-height: 1.6;
}

/* ── Commission tooltip — review date block ──────────────────────
   Second block inside the tooltip bubble, separated from the
   commission disclosure by a faint divider. Shown only when the
   calling page passes $tip_review_date. Keeps freshness signals
   available on tap/hover without cluttering the card front. */
.gz-aff-tip__divider {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0.6rem 0;
}
.gz-aff-tip__reviewed {
  display: block;
  font-size: 11px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.3px;
}
.gz-aff-tip__reviewed time {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-style: normal;
}

/* ── Responsible Gambling framed strip ────────────────────────
   Matches the Bingo Lady / editor-signoff EEAT visual language:
   pink top/bottom rule, centred content, small-caps label line,
   readable body line. Sits under top-guide articles on hub pages
   as a visible compliance disclosure that doesn't feel tacked on. */
.gz-rg-strip {
  margin: 1.5rem auto 0.5rem;
  max-width: 640px;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid rgba(199, 21, 133, 0.2);
  border-bottom: 1px solid rgba(199, 21, 133, 0.2);
  text-align: center;
}
.gz-rg-strip__label {
  margin: 0 0 0.35rem;
  font-family: var(--font-editorial);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
}
.gz-rg-strip__body {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  letter-spacing: 0.01em;
}
.gz-rg-strip__body strong {
  color: var(--pink);
  font-weight: 800;
  margin-right: 0.15rem;
}
.gz-rg-strip__body a {
  color: #333;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(199, 21, 133, 0.35);
  transition: color 0.15s, border-color 0.15s;
}
.gz-rg-strip__body a:hover,
.gz-rg-strip__body a:focus {
  color: var(--pink);
  border-bottom-color: var(--pink);
}
@media (min-width: 768px) {
  .gz-rg-strip__body { font-size: 13.5px; }
}

/* ── Directory sidebar — editors-picks on the darker theme ──────
   The jump-to-network box is already dark. Editor's Picks swaps
   from white to dark so the two top sidebar boxes match visually.
   The mascot footer below stays WHITE — it's a lighter quiet-closer
   that separates clearly from the dark boxes above. */

/* Margin between the editors-picks box and the mascot footer — clear
   separation between the two blocks. */
.gz-dir-sidebar .mag-greeting--footer {
  margin-top: 1.5rem;
}

/* Unified spacing between all boxes */
.gz-dir-sidebar > * + * {
  margin-top: 1.5rem;
}

/* ── Shared inline-link + utility classes ────────────────────────
   Consolidates repeated inline style="..." patterns from across the
   core hub pages so colour/weight tweaks live in one place. Used on
   "Back to X" links, closing-paragraph internal links, directory
   article cross-references, etc. */

/* Pink bold inline link — used inside prose paragraphs to pull the
   reader's eye to a cross-section link without the blocky CTA feel.
   Inherits underline from the default link style. */
.gz-pink-link {
  color: var(--pink);
  font-weight: 700;
}
.gz-pink-link:hover,
.gz-pink-link:focus {
  color: var(--pink-dark);
}

/* Back-link wrapper — centred, small vertical space before the next
   block. Used under the cover article on sub-hubs ("Back to UK
   Bingo Sites", "Back to the Bingo Hub"). */
.gz-back-link-wrap {
  text-align: center;
  margin-bottom: 1.25rem;
}

/* Sub-hub section spacing utilities — pulled from inline margin-top
   values that kept repeating on the networks/companies/games hubs. */
.gz-section-spacer--sm { margin-top: 1.5rem; }
.gz-section-spacer--md { margin-top: 2rem; }
.gz-section-spacer--lg { margin-top: 2.5rem; }

/* Matching bottom-spacer utilities — push space BELOW an element
   rather than above. Useful when the element above is a shared
   include we don't want to modify. */
.gz-section-spacer--sm-b { margin-bottom: 1.5rem; }
.gz-section-spacer--md-b { margin-bottom: 2rem; }
.gz-section-spacer--lg-b { margin-bottom: 2.5rem; }

/* ── Bingo card — hub-level extras ────────────────────────────────
   Games hub (/bingo-games/) reuses the .gz-bingo-card component
   from network.php. .gz-rooms-grid provides the responsive wrapper.
   Only the accent stat variant is new — used on the hub to flag
   "Free" and "Jackpot" games. */
.gz-bingo-card__stat--accent {
  background: #fde8f3;
  color: var(--pink);
  font-weight: 700;
}

/* ── Games hub — "What's the Difference?" format guide box ────────
   Colour-blocked mini-guide sitting inside the left column's cover
   article. Gives readers the four-ball-count answer they clicked in
   expecting. Pink-tinted bg + pink left border — same colour logic
   as the brand how-to-play box. 2-col grid on desktop (tight, fits
   inside article width), 1-col on mobile. */

.gz-format-guide {
  margin: 1.25rem 0 1.25rem;
  padding: 1rem 1.1rem 1.15rem;
  background: #fdf4fa;
  border: 1px solid rgba(199, 21, 133, 0.18);
  border-left: 4px solid var(--pink);
  border-radius: 6px;
}
.gz-format-guide__label {
  font-family: var(--font-editorial);
  font-size: 12px;
  font-weight: 800;
  color: var(--pink);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 0.9rem;
  padding: 0 0 0.65rem;
  border-bottom: 1px dashed rgba(199, 21, 133, 0.3);
}
.gz-format-guide__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 1rem;
}
@media (max-width: 560px) {
  .gz-format-guide__grid { grid-template-columns: 1fr; gap: 0.75rem; }
}
.gz-format-guide__item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 0.65rem;
  align-items: start;
}
.gz-format-guide__ball {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff4b9f 0%, var(--pink) 55%, #a30d6d 100%);
  color: #fff;
  font-family: var(--font-editorial);
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset -1px -2px 4px rgba(0,0,0,0.18), inset 1px 1px 2px rgba(255,255,255,0.28);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  margin-top: 1px;
}
.gz-format-guide__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.gz-format-guide__text strong {
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.2;
}
.gz-format-guide__text span {
  font-family: var(--font-body, inherit);
  font-size: 12.5px;
  line-height: 1.4;
  color: #555;
}

/* ── Games hub — "Games by Network" intro paragraph ──────────────
   Short centred editorial lede under the section header. Orients
   the reader on why the games are grouped by network rather than
   alphabetically, so they know what to expect below. */
.gz-games-network-intro {
  max-width: 620px;
  margin: 0.75rem auto 0;
  font-family: var(--font-editorial);
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: #555;
  text-align: center;
}
.gz-games-network-intro strong {
  color: var(--pink);
  font-style: normal;
  font-weight: 700;
}

/* ── Games hub — "The Different Bingo Games" format diff box ─────
   Container + row layout for the format explainer above "Games by
   Network". Each row: 3D bingo ball (.mag-pick-ball) on the LEFT,
   format name + description text aligned next to it. No animation —
   static balls for readability, not distraction. */

.gz-format-diff {
  border: 2px solid #9c27b0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: #fff;
}
/* Themed variant — reads --hub-theme CSS var from parent */
.gz-format-diff--themed { border-color: var(--hub-theme, #9c27b0); }
/* Themed snake label — pairs with --hub-theme */
.gz-snake-label--themed { background: var(--hub-theme, #9c27b0); color: #fff; }
.gz-format-diff__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid #f5eef7;
  text-align: center;
}
.gz-format-diff__row:last-child { border-bottom: none; }

@media (min-width: 768px) {
  .gz-format-diff__row {
    padding: 0.95rem 1.25rem;
    gap: 1rem;
  }
}

.gz-format-diff__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #333;
  flex: 1;
  min-width: 0;
}
.gz-format-diff__text strong {
  font-weight: 800;
  color: #1a1a1a;
}
@media (min-width: 768px) {
  .gz-format-diff__text { font-size: 14.5px; line-height: 1.5; }
}

/* Ball stays its standard 3D styling, no animation.
   Flex-shrink: 0 so it doesn't squeeze when the description wraps. */
.gz-format-ball {
  flex-shrink: 0;
}

/* ── Games hub — centred 90%-width card grid ─────────────────────
   Modifier on the .gz-rooms-grid wrapper so the hub renders its
   game cards at 90% container width with auto-margin centering.
   Scoped to the hub so network pages still use the full-width grid. */
.gz-rooms-grid--hub-centered {
  width: 90%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 560px) {
  /* On narrow mobile, give the cards nearly full width so each
     card doesn't squeeze into a tiny column. */
  .gz-rooms-grid--hub-centered { width: 96%; }
}

/* ── Editor's Picks — divider under "All recommended" link ───────
   Horizontal faded pink line sitting between the All-recommended
   link and the 18+/GamCare footer, so the link feels like a proper
   CTA close rather than blending into the compliance strip. */
.mag-picks-box__more {
  padding-bottom: 0.85rem !important;
  border-bottom: 1px dashed rgba(199, 21, 133, 0.35);
  margin-bottom: 0.5rem;
}



/* ── Utility — tiny left padding on a .mag-col ─────────────────────
   Small breathing room between the edge of a column and its content.
   Desktop only — mobile stacks columns vertically and doesn't need
   the horizontal offset. Currently used on the homepage left column. */
/* Left column left-padding utility — small breathing room between the
   page edge and the main editorial column content. Applied on all
   viewports (mobile stacked + desktop two-col) so the page doesn't
   butt content against the left edge. Used on every two-column hub. */
.mag-col.gz-col-pad-l { padding-left: 0.5rem; }

/* ── Ownership summary table ─────────────────────────────────────
   Used on the companies hub Glitzy's Take — two-column table
   summarising which parent owns which UK bingo brands. Pink header
   strip to match editorial accent, subtle zebra striping on rows. */
.gz-ownership-table-wrap {
  margin: 1.5rem 0;
  overflow-x: auto;
}
.gz-ownership-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.gz-ownership-table thead th {
  background: #C71585;
  color: #fff;
  font-family: var(--font-editorial);
  font-weight: 700;
  font-style: italic;
  text-align: center;
  padding: 0.75rem 1rem;
  letter-spacing: 0.3px;
}
.gz-ownership-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}
.gz-ownership-table tbody tr:nth-child(odd) td { background: #fafafa; }
.gz-ownership-table tbody tr:last-child td { border-bottom: none; }
.gz-ownership-table td:first-child {
  width: 35%;
  color: #1a1a1a;
}
@media (max-width: 640px) {
  .gz-ownership-table { font-size: 14px; }
  .gz-ownership-table thead th,
  .gz-ownership-table tbody td { padding: 0.65rem 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   DARTS HUB (/darts/)
   ───────────────────────────────────────────────────────────────────
   Uses the same magazine-layout scaffolding as /bingo/ — mag-section,
   mag-row--brand, mag-col, mag-cover, mag-minis, mag-greeting. This
   block only adds the darts-specific colour variants and the three
   list components (live matches, rankings, brand comparison).

   Colour palette mirrors the existing .gz-mini--darts gradient:
   deep green #16A34A + cyan #00BCD4 with lighter #4ade80 and #0891b2
   accent stops. Matches the darts card variant already in the CSS.
   ═══════════════════════════════════════════════════════════════════ */

/* Text colour utility — companion to .text-pink / .text-cyan */
.text-darts { color: #16A34A; }

/* Drop cap — companion to .drop-cap--pink / --purple */
.drop-cap--darts { color: #16A34A !important; }

/* Solid-fill label pill — companion to .mag-label--pink / --cyan */
.mag-label--darts {
  background: linear-gradient(135deg,#16A34A,#00BCD4,#4ade80,#0891b2);
  color: #fff;
}

/* Spinning snake wrap around labels — same pattern as the existing
   green/blue/pink variants. The conic-gradient cycles the darts
   palette so it reads as "darts" at a glance, not generic green. */
.gz-snake-wrap--darts {
  --gz-angle: 0deg;
  display: inline-block;
  position: relative;
  padding: 3px;
  border-radius: 4px;
  background: transparent;
  margin-bottom: 0.5rem;
  animation: gz-spin 4s linear infinite;
}
.gz-snake-wrap--darts::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  padding: 2px;
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, #16A34A 60deg, #4ade80 120deg, #00BCD4 180deg, #0891b2 240deg, #fff 300deg, #16A34A 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

/* ── Live / upcoming matches list ─────────────────────────────────── */
.gz-darts-matches {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.gz-darts-matches__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f1f1f1;
  font-family: var(--font-editorial);
  font-size: 14px;
}
.gz-darts-matches__row:last-child { border-bottom: 0; }
.gz-darts-matches__tourn {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #16A34A;
  font-weight: 700;
}
.gz-darts-matches__players {
  font-weight: 600;
  color: #1a1a1a;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gz-darts-matches__players em {
  font-style: normal;
  color: #999;
  font-weight: 400;
  margin: 0 0.35rem;
}
.gz-darts-matches__score {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .gz-darts-matches__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "tourn score" "players players";
    gap: 0.35rem;
  }
  .gz-darts-matches__tourn   { grid-area: tourn; }
  .gz-darts-matches__score   { grid-area: score; }
  .gz-darts-matches__players { grid-area: players; white-space: normal; }
}

/* ── PDC Order of Merit list ──────────────────────────────────────── */
.gz-darts-ranks {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  counter-reset: dartsranks;
}
.gz-darts-ranks__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #f1f1f1;
  font-family: var(--font-editorial);
  font-size: 14px;
}
.gz-darts-ranks__row:last-child { border-bottom: 0; }
.gz-darts-ranks__pos {
  font-weight: 800;
  color: #16A34A;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
}
.gz-darts-ranks__player { font-weight: 600; color: #1a1a1a; }
.gz-darts-ranks__country {
  font-size: 12px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gz-darts-ranks__money {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #333;
  font-size: 13px;
}
@media (max-width: 640px) {
  .gz-darts-ranks__row {
    grid-template-columns: 2rem 1fr auto;
    grid-template-areas: "pos player money" "pos country country";
    row-gap: 0.15rem;
  }
  .gz-darts-ranks__pos     { grid-area: pos; align-self: start; }
  .gz-darts-ranks__player  { grid-area: player; }
  .gz-darts-ranks__country { grid-area: country; }
  .gz-darts-ranks__money   { grid-area: money; }
}

/* ── Darts brand comparison strip ─────────────────────────────────── */
.gz-darts-brands {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.gz-darts-brands__row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  background: #fff;
}
.gz-darts-brands__logo-link { display: block; }
.gz-darts-brands__logo {
  max-width: 110px;
  max-height: 56px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.gz-darts-brands__mid { min-width: 0; }
.gz-darts-brands__name {
  font-family: var(--font-editorial);
  font-weight: 800;
  font-size: 16px;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.gz-darts-brands__name:hover { border-bottom-color: #16A34A; }
.gz-darts-brands__offer {
  margin: 0.25rem 0 0;
  font-family: var(--font-editorial);
  font-size: 14px;
  line-height: 1.4;
  color: #2a2a2a;
}
.gz-darts-brands__tcs {
  margin: 0.2rem 0 0;
  font-size: 11px;
  color: #888;
  line-height: 1.4;
}
.gz-darts-brands__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}
.gz-darts-brands__btn {
  display: inline-block;
  background: linear-gradient(135deg,#16A34A,#00BCD4);
  color: #fff;
  font-family: var(--font-editorial);
  font-weight: 800;
  font-size: 13px;
  padding: 0.55rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: filter 0.15s;
}
.gz-darts-brands__btn:hover { filter: brightness(1.05); }
.gz-darts-brands__review {
  font-family: var(--font-editorial);
  font-size: 11px;
  color: #777;
  text-decoration: none;
  border-bottom: 1px solid rgba(22,163,74,0.3);
}
.gz-darts-brands__review:hover { border-bottom-color: #16A34A; color: #16A34A; }

@media (max-width: 640px) {
  .gz-darts-brands__row {
    grid-template-columns: 80px 1fr;
    grid-template-areas: "logo mid" "cta cta";
    gap: 0.75rem;
  }
  .gz-darts-brands__logo-link { grid-area: logo; }
  .gz-darts-brands__mid       { grid-area: mid; }
  .gz-darts-brands__cta       { grid-area: cta; flex-direction: row; align-items: center; justify-content: space-between; }
  .gz-darts-brands__logo      { max-width: 75px; max-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DARTS EVENT PAGES (/darts/{tournament}/)
   ───────────────────────────────────────────────────────────────────
   Classes used by inc/darts-event-template.php. Same darts palette
   as the hub (#16A34A green + #00BCD4 cyan).
   ═══════════════════════════════════════════════════════════════════ */

/* Fact box — venue/dates/format/defending champion block under the cover */
.gz-darts-factbox {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid #16A34A;
  background: #f2faf5;
  border-radius: 2px;
}
.gz-darts-factbox__row {
  font-family: var(--font-editorial);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: #2a2a2a;
}
.gz-darts-factbox__row + .gz-darts-factbox__row { margin-top: 0.25rem; }
.gz-darts-factbox__row strong { color: #166534; }

/* "Odds powered by Betfred" strip — sits above the first odds block */
.gz-odds-powered {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin: 1rem 0 0.75rem;
  padding: 0.65rem 1rem;
  background: linear-gradient(135deg,#f8fafc,#f1f5f9);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-family: var(--font-editorial);
}
.gz-odds-powered__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #666;
}
.gz-odds-powered__logo {
  height: 28px;
  width: auto;
  display: block;
}
.gz-odds-powered__name {
  font-size: 18px;
  font-weight: 800;
  color: #1a1a1a;
}
.gz-odds-powered__meta {
  font-size: 11px;
  color: #777;
  margin-left: auto;
}
@media (max-width: 640px) {
  .gz-odds-powered__meta { margin-left: 0; font-size: 10px; width: 100%; }
}

/* Match card container — each event (outright or matchup) gets one */
.gz-darts-match {
  margin: 0.85rem 0 1.25rem;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.gz-darts-match--outright { border-top: 3px solid #16A34A; }
.gz-darts-match__head {
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e4e4e4;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.gz-darts-match__name {
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
}
.gz-darts-match__when {
  font-size: 12px;
  color: #16A34A;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Selections list inside a match card — player/outcome, price, bet button */
.gz-darts-selections {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gz-darts-selections__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #f1f1f1;
  font-family: var(--font-editorial);
  font-size: 14px;
}
.gz-darts-selections__row:last-child { border-bottom: 0; }
.gz-darts-selections__name {
  font-weight: 600;
  color: #1a1a1a;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gz-darts-selections__price {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #166534;
  font-size: 16px;
  min-width: 3ch;
  text-align: right;
}
.gz-darts-selections__btn {
  display: inline-block;
  background: linear-gradient(135deg,#16A34A,#00BCD4);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: filter 0.15s;
}
.gz-darts-selections__btn:hover { filter: brightness(1.08); }
@media (max-width: 640px) {
  .gz-darts-selections__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name price" "btn btn";
    row-gap: 0.4rem;
  }
  .gz-darts-selections__name  { grid-area: name; }
  .gz-darts-selections__price { grid-area: price; }
  .gz-darts-selections__btn   { grid-area: btn; justify-self: stretch; text-align: center; }
}

/* Specials markets — collapsed by default (details/summary), open on click */
.gz-darts-special {
  margin: 0.5rem 0;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.gz-darts-special[open] { border-color: #16A34A; }
.gz-darts-special__sum {
  list-style: none;
  padding: 0.75rem 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  font-family: var(--font-editorial);
  font-weight: 700;
  transition: background 0.15s;
}
.gz-darts-special__sum::-webkit-details-marker { display: none; }
.gz-darts-special__sum::after {
  content: '+';
  font-size: 20px;
  color: #16A34A;
  font-weight: 400;
  line-height: 1;
}
.gz-darts-special[open] .gz-darts-special__sum::after { content: '–'; }
.gz-darts-special__sum:hover { background: #f1f5f9; }
.gz-darts-special__name {
  font-size: 14px;
  color: #1a1a1a;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1rem;
}
.gz-darts-special__count {
  font-size: 11px;
  color: #777;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Back to hub link */
.gz-darts-backlink {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--font-editorial);
  font-size: 14px;
}
.gz-darts-backlink__a {
  color: #16A34A;
  text-decoration: none;
  border-bottom: 1px solid rgba(22,163,74,0.3);
  transition: border-color 0.15s;
}
.gz-darts-backlink__a:hover { border-bottom-color: #16A34A; }

/* ═══════════════════════════════════════════════════════════════════
   DARTS MASCOT
   ───────────────────────────────────────────────────────────────────
   Used on /darts/ hub, 8 tournament pages (via the event template),
   and the 4 editorial articles (how-darts-is-played, betting-for-
   beginners, bingo-and-darts, women-and-darts).
   ═══════════════════════════════════════════════════════════════════ */

/* Greeting-box variant — shape-outside must match the darts-lady's
   silhouette, otherwise the text wraps around the wrong outline.
   Also bumps the width up from the default 120px — she felt small. */
.mag-greeting__mascot--darts {
  shape-outside: url('/assets/images/darts-lady.webp');
  width: 180px;
}
@media (max-width: 640px) {
  .mag-greeting__mascot--darts { width: 130px; }
}

/* Article-sidebar variant — sits above the ✦ RELATED READING ✦ label
   on each of the four darts editorial pages. Simpler than the greeting
   mascot because the news-sidebar is a column of links, not wrapped
   body text. */
.gz-news-sidebar__mascot {
  display: block;
  margin: 0 auto 1rem;
  width: 100%;
  max-width: 220px;
  height: auto;
}
@media (max-width: 640px) {
  .gz-news-sidebar__mascot { max-width: 160px; }
}


/* ═══════════════════════════════════════════════════════════════════
   WOMEN DIRECTORY (bottom of /darts/women-and-darts/)
   ───────────────────────────────────────────────────────────────────
   31 name cards, each with an #anchor-slug id so the Woman of the
   Day widget's "Read more →" link lands directly on that player.
   Two columns on desktop, single column on mobile.
   ═══════════════════════════════════════════════════════════════════ */
.gz-women-directory {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.25rem 0 0.5rem;
}
@media (max-width: 640px) {
  .gz-women-directory { grid-template-columns: 1fr; gap: 0.75rem; }
}
.gz-women-directory__card {
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid #f0e0ea;
  border-top: none;
  border-radius: 6px;
  scroll-margin-top: 80px;
  position: relative;
  box-shadow: 0 1px 4px rgba(233,30,140,0.06);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.gz-women-directory__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #E91E8C, #d946ef, #9c27b0);
  border-radius: 6px 6px 0 0;
}
.gz-women-directory__card::after {
  content: '♛';
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 22px;
  font-weight: 900;
  color: rgba(233,30,140,0.35);
}
.gz-women-directory__card:hover {
  box-shadow: 0 4px 14px rgba(233,30,140,0.12);
  border-color: #E91E8C;
}
.gz-women-directory__card:target {
  background: #fdf4f9;
  border-color: #E91E8C;
  box-shadow: 0 0 0 3px rgba(233,30,140,0.12), 0 4px 12px rgba(233,30,140,0.1);
}
.gz-women-directory__card h3 {
  font-family: var(--font-editorial);
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 0.4rem 0;
  color: #1a1a1a;
  line-height: 1.25;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.gz-wd-flag {
  font-size: 12px;
  font-weight: 600;
  color: #E91E8C;
  letter-spacing: 0.02em;
  margin-left: 0.25rem;
}
.gz-women-directory__card p {
  font-family: var(--font-editorial);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  color: #444;
}

/* Pick-n-mix Jeeves sidebar image — sizes him proportionate to the
   other mascots (bingo-lady 120px, darts-lady 180px). Was previously
   filling the full sidebar column width via an inline width:100% —
   which made him 300-400px on desktop and visually disproportionate. */
.pnm-jeeves-trivia__img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto 0.25rem;
  float: none;
}
@media (max-width: 640px) {
  .pnm-jeeves-trivia__img { max-width: 140px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DARTS FEATURED BOOKMAKERS — sidebar strip on event pages
   ───────────────────────────────────────────────────────────────────
   Reuses .gz-lotto-ops-wrap + .gz-lotto-op-card classes. Those
   classes already theme to --gz-game-color, which is set to the
   darts green (#16A34A) or tournament-specific colour at section
   level. Only thing added below is the "View All Darts Tournaments"
   footer CTA that caps the box — mirrors the lotto equivalent but
   as a reusable class rather than inline style.
   ═══════════════════════════════════════════════════════════════════ */
.gz-lotto-ops-wrap__more-cta {
  display: block;
  text-align: center;
  padding: 0.55rem;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  background: var(--gz-game-color, #16A34A);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: filter 0.15s;
}
.gz-lotto-ops-wrap__more-cta:hover { filter: brightness(1.1); }

/* ═══════════════════════════════════════════════════════════════════
   DARTBOARD BULLSEYE  — .gz-lingo-ball--bullseye
   ───────────────────────────────────────────────────────────────────
   Used only inside the Woman of the Day widget on darts pages. Swaps
   the standard pink bingo-ball treatment for the proper concentric
   dartboard bullseye: outer green double ring, red outer single ring,
   cream inner, green bull (25), red inner bull (50). Number (180)
   sits centered on the red bull. No layout changes — same 72px
   diameter and position as the bingo-style ball so the box stays
   identical in every other respect.
   ═══════════════════════════════════════════════════════════════════ */
.gz-lingo-ball--bullseye {
  /* Build the whole target with concentric radial stops on a single
     background. Cheap trick — one paint layer, no extra elements. */
  background: radial-gradient(
    circle at center,
    /* Centre: red inner bullseye (the 50) */
    #c81820 0%,
    #c81820 18%,
    /* Ring around it: green outer bull (the 25) */
    #1a6e3a 18%,
    #1a6e3a 32%,
    /* Cream scoring-area ring (where the wedges would be) */
    #e9d9a8 32%,
    #d4c38e 58%,
    /* Red outer ring (doubles on a real board) */
    #c81820 58%,
    #c81820 78%,
    /* Green outer-most ring (trebles on a real board) */
    #1a6e3a 78%,
    #1a6e3a 92%,
    /* Thin dark wire edge so the ball has a rim */
    #2a1d10 92%,
    #2a1d10 100%
  );
  /* Keep the same inset highlights so it still reads as a 3D disc */
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,0.45),
    inset 0 4px 10px rgba(255,255,255,0.18),
    0 4px 12px rgba(0,0,0,0.45);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
/* The bingo ball's default :before is a big white dabber circle — that
   would cover up the dartboard rings. Suppress it for the bullseye variant. */
.gz-lingo-ball--bullseye::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   WRITE FOR US  (/write-for-us/)
   ───────────────────────────────────────────────────────────────────
   Public freelancer application page. Purple accent (#9c27b0) —
   same as Woman of the Day, tonally "editorial / behind the scenes".
   ═══════════════════════════════════════════════════════════════════ */
.gz-wfu-beats, .gz-wfu-musts {
  margin: 0.75rem 0 1.25rem 1.5rem;
  font-family: var(--font-editorial);
  font-size: 15px;
  line-height: 1.6;
}
.gz-wfu-beats li, .gz-wfu-musts li {
  margin-bottom: 0.5rem;
}
.gz-wfu-form-wrap {
  margin-top: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg,#fdf4ff,#f5f3ff 60%,#ffffff);
  border: 1px solid #e9d5ff;
  border-left: 4px solid #9c27b0;
  border-radius: 4px;
}
.gz-wfu-form-wrap h2 {
  margin-top: 0;
  color: #7c2d92;
}
.gz-wfu-errors {
  background: #fee;
  border-left: 4px solid #c62828;
  padding: 0.85rem 1rem;
  margin: 0 0 1.25rem;
  border-radius: 4px;
  font-size: 14px;
}
.gz-wfu-errors p { margin: 0 0 0.25rem; color: #c62828; }
.gz-wfu-errors ul { margin: 0 0 0 1.5rem; color: #8b2a2a; }
.gz-wfu-field {
  margin-bottom: 1.1rem;
}
.gz-wfu-field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
  margin-bottom: 0.3rem;
  font-family: var(--font-editorial);
}
.gz-wfu-field label span[aria-hidden="true"] { color: #c62828; margin-left: 2px; }
.gz-wfu-field input[type=text],
.gz-wfu-field input[type=email],
.gz-wfu-field input[type=url],
.gz-wfu-field select,
.gz-wfu-field textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-size: 15px;
  font-family: var(--font-editorial);
  border: 1px solid #d0bce0;
  border-radius: 4px;
  background: #fff;
  color: #1a1a1a;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gz-wfu-field input:focus,
.gz-wfu-field select:focus,
.gz-wfu-field textarea:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 3px rgba(156,39,176,0.12);
}
.gz-wfu-field textarea { resize: vertical; min-height: 100px; }
.gz-wfu-field small {
  display: block;
  margin-top: 0.35rem;
  font-size: 12.5px;
  color: #6b5572;
  font-family: var(--font-editorial);
  line-height: 1.45;
}
.gz-wfu-submit {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: #9c27b0;
  color: #fff;
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 800;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s;
  margin-top: 0.5rem;
}
.gz-wfu-submit:hover { background: #7c2d92; }
.gz-wfu-footnote {
  margin-top: 1rem;
  font-size: 12px;
  color: #6b5572;
  line-height: 1.5;
  font-family: var(--font-editorial);
}
.gz-wfu-footnote a { color: #7c2d92; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   WRITE FOR US — additions for v2 (paths, guidelines, checkbox)
   ─────────────────────────────────────────────────────────────────── */
/* The two-path choice block */
.gz-wfu-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
@media (max-width: 640px) {
  .gz-wfu-paths { grid-template-columns: 1fr; }
}
.gz-wfu-path {
  padding: 1.1rem 1.25rem;
  background: #fafafa;
  border: 1px solid #eee;
  border-top: 4px solid #9c27b0;
  border-radius: 4px;
}
.gz-wfu-path--guest { border-top-color: #C71585; }
.gz-wfu-path h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-editorial);
  font-size: 17px;
  color: #1a1a1a;
  font-weight: 800;
}
.gz-wfu-path p {
  font-family: var(--font-editorial);
  font-size: 14px;
  line-height: 1.55;
  color: #333;
  margin: 0 0 0.5rem;
}
.gz-wfu-path__fit {
  margin-top: 0.65rem !important;
  padding-top: 0.65rem;
  border-top: 1px dashed #ddd;
  font-size: 13px !important;
  color: #555 !important;
}

/* Submission-guidelines definition list */
.gz-wfu-guidelines {
  margin: 1rem 0 1.75rem;
  font-family: var(--font-editorial);
  font-size: 15px;
  line-height: 1.55;
  background: #fafafa;
  border: 1px solid #eee;
  border-left: 3px solid #9c27b0;
  padding: 1rem 1.25rem;
  border-radius: 0 4px 4px 0;
}
.gz-wfu-guidelines dt {
  font-weight: 800;
  color: #1a1a1a;
  margin-top: 0.65rem;
}
.gz-wfu-guidelines dt:first-child { margin-top: 0; }
.gz-wfu-guidelines dd {
  margin: 0.15rem 0 0;
  color: #444;
  padding-left: 0;
}

/* Originality checkbox */
.gz-wfu-field--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
  padding: 0.85rem;
  background: #fff;
  border: 1px solid #d0bce0;
  border-radius: 4px;
}
.gz-wfu-field--checkbox label:hover { background: #fdf4ff; }
.gz-wfu-field--checkbox input[type=checkbox] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #9c27b0;
}
.gz-wfu-field--checkbox span { color: #333; }

/* Day rate label small-print */
.gz-wfu-field label small {
  font-weight: normal;
  color: #888;
  font-size: 11.5px;
  margin-left: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════
   SITE FOOTER — brand strip + disclaimer polish
   ───────────────────────────────────────────────────────────────────
   Top strip: brand name and UKGC badge on opposite sides, refined.
   Bottom disclaimer: tighter, centered, with copyright line.
   ═══════════════════════════════════════════════════════════════════ */
.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}
.site-footer__brand {
  font-family: var(--font-editorial);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.01em;
}
.site-footer__ukgc {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pink);
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(231,45,170,0.4);
  border-radius: 3px;
  background: rgba(231,45,170,0.08);
}
@media (max-width: 500px) {
  .site-footer__top {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  .site-footer__brand { font-size: 12px; }
}

.site-footer__disclaimer {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  padding-top: 1.5rem !important;
  padding-bottom: 2rem !important;
  line-height: 1.6;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   SITE FOOTER — bottom copyright/legal strip
   ───────────────────────────────────────────────────────────────────
   Single, dignified bottom line combining copyright year range,
   trademark, 18+ statutory notice, UKGC credit. Replaces the old
   duplicated 18+ strip + brand-line row + one-line disclaimer —
   three separate elements condensed into one clean strip.
   ═══════════════════════════════════════════════════════════════════ */
.site-footer__copyright {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid #2a2a2a;
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-editorial);
}
.site-footer__copyright-line {
  margin: 0 0 0.35rem;
  font-size: 13px;
  color: #b0b0b0;
  line-height: 1.5;
}
.site-footer__copyright-line strong {
  color: #fff;
  font-weight: 800;
}
.site-footer__copyright-line--sub {
  font-size: 12px;
  color: #888;
  margin-bottom: 0;
}
.site-footer__copyright-line--sub strong {
  color: #d0d0d0;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   SITE FOOTER — link readability fix
   ───────────────────────────────────────────────────────────────────
   The generic ".site-footer a { color: var(--pink) }" rule was
   overriding every footer nav link — turning all four columns pink
   on mobile regardless of their colour-coded heading. Boost
   specificity (.site-footer .gz-footer-link) so the lighter,
   readable text colour wins. Keeps the column heading colour-coding
   untouched — that's the only colour signal readers need.
   ═══════════════════════════════════════════════════════════════════ */
.site-footer .gz-footer-link {
  color: rgba(255,255,255,0.88);  /* bright, readable on black */
  font-weight: 500;
}
.site-footer .gz-footer-link:hover,
.site-footer .gz-footer-link:focus-visible {
  color: #fff;
}
.site-footer .gz-footer-link::before {
  color: rgba(255,255,255,0.55); /* the › chevron — subtle but visible */
}
.site-footer .gz-footer-link:hover::before,
.site-footer .gz-footer-link:focus-visible::before {
  color: var(--pink-light, #ffb3d9);
}

/* Safety link — keep green for the responsible-gambling signal */
.site-footer .gz-footer-link--safety {
  color: #8cffae;
  font-weight: 600;
}
.site-footer .gz-footer-link--safety:hover,
.site-footer .gz-footer-link--safety:focus-visible {
  color: #b5ffc7;
}
.site-footer .gz-footer-link--safety::before { color: #8cffae; }

/* ═══════════════════════════════════════════════════════════════════
   SITE FOOTER — mobile inline link flow with column-coloured stars
   ───────────────────────────────────────────────────────────────────
   On mobile, each column's links flow inline (wrapping as needed)
   instead of stacking one-per-line. Saves vertical space and reads
   more naturally at narrow widths. Each link gets a little ✦ in
   the column's accent colour — reinforces the colour-coding while
   also acting as a visual separator between inline links.
   Desktop behaviour is untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .gz-footer-col {
    display: block;                /* kill flex-column so links can flow inline */
    padding: 0.9rem 0.85rem 1rem;
  }
  .gz-footer-col__title {
    display: block;
    margin: 0 0 0.55rem;
  }
  .gz-footer-col .gz-footer-link,
  .site-footer .gz-footer-col .gz-footer-link {
    display: inline-block;
    padding: 0.2rem 0.3rem 0.2rem 1rem;  /* left pad reserves space for the star */
    margin: 0.15rem 0.1rem;
    line-height: 1.35;
    position: relative;                   /* anchor for the absolute ::before star */
    transform: none;              /* drop the desktop hover-nudge — not needed inline */
  }
  .gz-footer-col .gz-footer-link:hover,
  .gz-footer-col .gz-footer-link:focus-visible {
    transform: none;
  }
  /* Replace the desktop hover-only ">" chevron with a permanent ✦ star.
     Positioned absolutely in the link's left padding so when the link
     text wraps, the second line aligns under the text — not the star. */
  .gz-footer-col .gz-footer-link::before {
    content: "\2726 ";           /* ✦ */
    position: absolute;
    left: 0.2rem;
    top: 0.3rem;
    opacity: 0.8;
    margin-right: 0;
    transform: none;
    font-size: 0.85em;
    color: rgba(255,255,255,0.5);
    line-height: 1.35;
  }
  .gz-footer-col .gz-footer-link:hover::before,
  .gz-footer-col .gz-footer-link:focus-visible::before {
    opacity: 1;
    transform: none;
  }

  /* Column-tinted stars so inline links still signal which group they
     belong to even when they're flowing in a single block. */
  .gz-footer-col--brand    .gz-footer-link::before { color: var(--pink); }
  .gz-footer-col--involved .gz-footer-link::before { color: #e088ff; }
  .gz-footer-col--safety   .gz-footer-link::before { color: #8cffae; }
  .gz-footer-col--legal    .gz-footer-link::before { color: #7edbee; }
}

/* ═══════════════════════════════════════════════════════════════════
   SITE FOOTER — faded-edge bottom accents + unified disclosure card
   ───────────────────────────────────────────────────────────────────
   Replaces the generic solid left-border on columns with a gradient
   bottom accent that fades out at both ends — reads as a proper
   underline/divider instead of a heavy colour bar. Keeps the same
   colour coding (pink / mauve / green / teal) but much softer.
   Also drops the pink left border on the affiliate disclosure and
   restyles it to match the About the Editor box above it.
   ═══════════════════════════════════════════════════════════════════ */

/* Kill the column left borders — the !important beats earlier rules
   since those used plain .gz-footer-col, which this equals on spec. */
.site-footer .gz-footer-col {
  border-left: none;
  padding-bottom: 1.4rem;
  position: relative;
}
/* Faded-edge bottom accent in each column's colour */
.site-footer .gz-footer-col::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  opacity: 0.7;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%);
}
.site-footer .gz-footer-col--brand::after    { color: var(--pink); }
.site-footer .gz-footer-col--involved::after { color: #e088ff; }
.site-footer .gz-footer-col--safety::after   { color: #8cffae; }
.site-footer .gz-footer-col--legal::after    { color: #7edbee; }

/* Affiliate disclosure — match the About the Editor card exactly */
.site-footer .gz-footer-affiliate-disclosure {
  max-width: 780px;
  margin: 1.5rem auto 1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-left: none;
  border-right: none;
  border-radius: 0;
  text-align: center;
}
.site-footer .gz-footer-affiliate-disclosure__heading {
  font-size: 10px;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 800;
}

/* Responsible Gambling back to neutral — the --safety class is now
   gone from the HTML, but zero out any lingering styling in case it
   reappears. Leaves the safety COLUMN colour-coding (green star on
   mobile, green faded-edge bottom) fully intact. */
.site-footer .gz-footer-link--safety {
  color: rgba(255,255,255,0.88);
  font-weight: 500;
}
.site-footer .gz-footer-link--safety:hover,
.site-footer .gz-footer-link--safety:focus-visible {
  color: #fff;
}
.site-footer .gz-footer-link--safety::before { color: inherit; }

/* ═══════════════════════════════════════════════════════════════════
   DARTS EVENTS — shared styles for /darts/mecca-bingo-darts-nights/
   and any future events-listing pages (bullseye CTA, event grid,
   video card, logo figure). Added 23 April 2026.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   MECCA BINGO DARTS NIGHTS — event grid for /darts/mecca-bingo-darts-nights/
   ═══════════════════════════════════════════════════════════════════ */

/* Bullseye advertise CTA — sits directly under the events grid.
   Horizontal on desktop (dartboard left, text right), stacked on mobile. */
.gz-mecca-ad-wrap {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a1a0a 100%);
  padding: 2rem 1rem;
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}
.gz-mecca-ad-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #16A34A 20%, #fbbf24 50%, #16A34A 80%, transparent);
}
.gz-mecca-ad-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #16A34A 20%, #fbbf24 50%, #16A34A 80%, transparent);
}
.gz-mecca-ad-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Dartboard SVG wrapper */
.gz-mecca-ad-bullseye {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}
.gz-mecca-ad-bullseye svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Text/CTA side */
.gz-mecca-ad-body {
  flex: 1;
  min-width: 240px;
  text-align: center;
}
.gz-mecca-ad-body__h3 {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  color: #fff;
  margin: 0 0 0.65rem;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.gz-mecca-ad-body__p {
  font-family: var(--font-editorial);
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
  margin: 0 0 1.15rem;
}
.gz-mecca-ad-body__btn {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
  color: #fff;
  background: #16A34A;
  border: 2px solid #16A34A;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(22,163,74,0.35), 0 1px 3px rgba(0,0,0,0.5);
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.2s;
}
.gz-mecca-ad-body__btn:hover,
.gz-mecca-ad-body__btn:focus-visible {
  background: #1fc959;
  border-color: #1fc959;
  transform: translateY(-1px);
  box-shadow: 0 0 0 5px rgba(22,163,74,0.25), 0 3px 10px rgba(22,163,74,0.5);
}
.gz-mecca-ad-body__note {
  font-family: var(--font-editorial);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin: 0.75rem 0 0;
}

/* Desktop layout: side-by-side, text left-aligned */
@media (min-width: 640px) {
  .gz-mecca-ad-inner { flex-wrap: nowrap; justify-content: flex-start; }
  .gz-mecca-ad-body { text-align: center; }
  .gz-mecca-ad-bullseye { width: 180px; height: 180px; }
}

/* MDA Events video - thumbnail link (iframe embeds black out
   on YouTube Shorts in some mobile browsers, so we link to
   YouTube directly instead - guaranteed to work everywhere) */
.gz-mecca-video-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  max-width: 380px;
  width: 100%;
  transition: transform 0.2s;
}
.gz-mecca-video-link:hover,
.gz-mecca-video-link:focus-visible {
  transform: translateY(-2px);
}
.gz-mecca-video {
  margin: 1.5rem auto;
  text-align: center;
  padding: 0;
}
.gz-mecca-video__frame {
  position: relative;
  width: 100%;
  background: #0a0a0a;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  aspect-ratio: 16 / 9;
}
.gz-mecca-video__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gz-mecca-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.15s, filter 0.15s;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.gz-mecca-video-link:hover .gz-mecca-video__play,
.gz-mecca-video-link:focus-visible .gz-mecca-video__play {
  transform: translate(-50%, -50%) scale(1.1);
}
.gz-mecca-video__caption {
  font-family: var(--font-editorial);
  font-size: 12px;
  color: #888;
  margin-top: 0.5rem;
  line-height: 1.4;
}
.gz-mecca-video__mda {
  color: #16A34A;
  font-weight: 700;
}

/* Sidebar compact version - visible on DESKTOP only */
.gz-mecca-video-sidebar {
  display: none;
  max-width: 100%;
  margin: 1rem 0;
}
@media (min-width: 768px) {
  .gz-mecca-video-sidebar { display: block; }
}

/* Compact variant sizing/layout */
.gz-mecca-video--compact {
  margin: 0;
  text-align: center;
}
.gz-mecca-video__caption--top {
  margin: 0 0 0.5rem;
  font-size: 13px;
  color: #333;
  line-height: 1.3;
}
.gz-mecca-video__caption--top strong {
  display: block;
  font-family: var(--font-editorial);
  font-size: 15px;
  color: #1a1a1a;
  font-style: italic;
  margin-top: 0.4rem;
  line-height: 1.25;
}

/* Full-width version - visible on MOBILE only */
.gz-mecca-video-fullwidth {
  display: block;
}
@media (min-width: 768px) {
  .gz-mecca-video-fullwidth { display: none; }
}

/* Mobile video section - left-aligned snake label + title, lotto-hub style */
.gz-mecca-video-section {
  padding: 1.5rem 1rem 1.75rem;
  text-align: center;
}
.gz-mecca-video-section__h3 {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 800;
  font-style: italic;
  color: #1a1a1a;
  margin: 0.75rem 0 1rem;
  line-height: 1.2;
}
.gz-mecca-video-section .gz-mecca-video-link {
  display: block;
  margin: 0 auto;
}

/* Mecca "At The Darts" official logo — inline figure in intro */
.gz-mecca-darts-logo {
  margin: 1.5rem auto;
  text-align: center;
  padding: 0;
}
.gz-mecca-darts-logo img {
  max-width: 200px;
  width: 100%;
  height: auto;
  display: inline-block;
}
@media (max-width: 560px) {
  .gz-mecca-darts-logo { margin: 1.25rem auto; }
  .gz-mecca-darts-logo img { max-width: 160px; }
}
.gz-lal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
.gz-lal-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e5ddc8;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  scroll-margin-top: 100px;
}
.gz-lal-card:target {
  border-color: #16A34A;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18), 0 4px 12px rgba(22,163,74,0.15);
}
.gz-lal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(22,163,74,0.12);
  border-color: #16A34A;
}

.gz-lal-card__date {
  flex-shrink: 0;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #16A34A 0%, #15803d 100%);
  color: #fff;
  padding: 0.75rem 0;
}
.gz-lal-card__day {
  font-family: var(--font-editorial);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}
.gz-lal-card__mon {
  font-family: var(--font-editorial);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-top: 4px;
  color: #d4f5dc;
}

.gz-lal-card__body {
  flex: 1;
  padding: 0.85rem 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gz-lal-card__city {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.15;
}
.gz-lal-card__title {
  font-family: var(--font-editorial);
  font-size: 13px;
  font-weight: 700;
  color: #16A34A;
  margin-top: 2px;
}
.gz-lal-card__venue {
  font-family: var(--font-editorial);
  font-size: 12.5px;
  color: #666;
  margin-top: 4px;
  line-height: 1.35;
}
.gz-lal-card__full {
  font-family: var(--font-editorial);
  font-size: 11.5px;
  font-style: italic;
  color: #999;
  margin-top: 4px;
}
.gz-lal-card__cta {
  display: inline-block;
  margin-top: 0.65rem;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-editorial);
  font-size: 12.5px;
  font-weight: 700;
  color: #16A34A;
  background: transparent;
  border: 1.5px solid #16A34A;
  border-radius: 3px;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s, color 0.15s;
}
.gz-lal-card__cta:hover,
.gz-lal-card__cta:focus-visible {
  background: #16A34A;
  color: #fff;
}

@media (max-width: 560px) {
  .gz-lal-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .gz-lal-card__date { width: 64px; }
  .gz-lal-card__day { font-size: 26px; }
}


/* ── Sidebar feature link — compact CTA card for hub sidebars ── */
.gz-sidebar-feature-link {
  display: block;
  background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%);
  border: 1px solid #c8e6c9;
  border-left: 4px solid #16A34A;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 1rem;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gz-sidebar-feature-link:hover {
  border-color: #16A34A;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
}
.gz-sidebar-feature-link__label {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #16A34A;
  margin-bottom: 4px;
}
.gz-sidebar-feature-link__title {
  display: block;
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}
.gz-sidebar-feature-link__text {
  display: block;
  font-size: 12px;
  color: var(--grey);
  line-height: 1.5;
}


/* ── Woman of the Day — mini sidebar version (matches hub dark box) ── */
.gz-wod-mini {
  padding: 1rem 0.85rem 1.1rem !important;
  border-color: #16A34A !important;
}
.gz-wod-mini::before {
  background: radial-gradient(circle at 50% 20%, rgba(22,163,74,0.22) 0%, rgba(22,163,74,0) 55%) !important;
}
.gz-wod-mini__ball {
  transform: scale(0.75);
  margin: 0.25rem 0 0.15rem;
}
.gz-wod-mini .gz-lingo-call {
  font-size: 1.15rem;
  text-decoration: none;
  color: #fff;
}
.gz-wod-mini .gz-lingo-call:hover {
  color: #4ade80;
}
.gz-wod-mini .gz-lingo-origin {
  font-size: 12px;
  margin-bottom: 0;
}

/* Rainbow drop cap */
.drop-cap--rainbow {
  background: linear-gradient(135deg, #F43F5E, #9c27b0, #00BCD4, #65A30D, #7C3AED, #0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── Woman of the Day — full-width feature panel ── */
.gz-wod-feature {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 3px solid #16A34A;
  border-radius: 0;
  padding: 2rem 1.5rem;
  margin: 1.5rem 0;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.gz-wod-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(233,30,140,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.gz-wod-feature__inner {
  position: relative;
  z-index: 1;
}
.gz-wod-feature .gz-lingo-ball-wrap {
  margin: 0.75rem 0 0.5rem;
}
.gz-wod-feature__title {
  font-family: var(--font-editorial);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 900;
  font-style: italic;
  color: #fff;
  margin: 0.5rem 0 0.75rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.gz-wod-feature__text {
  font-family: var(--font-editorial);
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 1rem;
}
.gz-wod-feature__stars {
  font-size: 14px;
  color: #16A34A;
  letter-spacing: 0.3em;
  margin: 0;
}


/* ── Betting card — green/purple gradient ── */
.gz-mini--betting { border-left: none; background: linear-gradient(180deg, #16A34A, #10b981, #6366f1, #9c27b0) left/4px 100% no-repeat, #f4f0ff; }
.gz-mini-cat--betting { background: linear-gradient(135deg, #16A34A, #10b981, #6366f1, #9c27b0); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(99,102,241,0.3); }
.gz-mini-continue--betting { color: #6366f1; }


/* ── Darts betting featured cards ── */
.gz-darts-betting-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
.gz-darts-bet-card {
  background: #fff;
  border: 1px solid #e8d8f8;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(156,39,176,0.06);
  transition: transform 0.15s, box-shadow 0.15s;
}
.gz-darts-bet-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(156,39,176,0.12);
}
.gz-darts-bet-card__header {
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.gz-darts-bet-card__header--betfred {
  background: linear-gradient(135deg, #004B87 0%, #0066b2 100%);
}
.gz-darts-bet-card__header--boyle {
  background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 100%);
}
.gz-darts-bet-card__header--william-hill {
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
}
.gz-darts-bet-card__badge {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.7);
}
.gz-darts-bet-card__name {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.gz-darts-bet-card__body {
  padding: 1rem 1.1rem;
}
.gz-darts-bet-card__text {
  font-family: var(--font-editorial);
  font-size: 13px;
  color: #444;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.gz-darts-bet-card__cta {
  display: inline-block;
  font-family: var(--font-editorial);
  font-size: 13px;
  font-weight: 700;
  color: #9c27b0;
  text-decoration: none;
  border: 1.5px solid #9c27b0;
  border-radius: 3px;
  padding: 0.4rem 0.85rem;
  transition: background 0.15s, color 0.15s;
}
.gz-darts-bet-card__cta:hover {
  background: #9c27b0;
  color: #fff;
}

/* Purple faded border — vault variant. Dark purple to dark cyan gradient,
   picked to echo the vault mascot's cyan-on-black palette. No light silver
   streak, so the divider stays readable against every page background. */
.mag-faded-border--purple {
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    #4c1d95 15%,
    #155e75 50%,
    #4c1d95 85%,
    transparent 100%
  );
  margin: 1rem 0 1.5rem;
  border: none;
}


/* ── Article body link styles — pink on EVERY themed page ──
   Part 1, Part 2, standfirsts, intros, guide bodies — all get the
   same warm pink link with a soft underline, whichever section
   theme the page is running. Consistency wins over per-section
   contrast because pink is the site's brand accent and always
   stands out against light content backgrounds. */
.mag-cover__body a,
.mag-cover__standfirst a,
.mag-cover__intro a,
.mag-cover__editor-take a,
.bc1-block a,
.gz-brand-editorial a,
.gz-fw-content a:not(.gz-snake-wrap):not(.gz-snake-cta):not(.mag-mini):not(.gz-lotto-offer-card__cta):not(.lotto-grid-card__review):not(.gz-quick-link):not(.gz-thumb):not(.gz-arcbtn):not(.gz-arcbtn__snake),
/* Section standfirsts were missing from this list, so their links
   inherited the paragraph colour and rendered as dark body text with no
   sign of being clickable. Used on 65 pages. */
.lotto-section-intro p a,
.gz-news-article__body a {
  color: var(--pink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(233, 30, 140, 0.3);
  text-underline-offset: 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.mag-cover__body a:hover,
.mag-cover__standfirst a:hover,
.mag-cover__intro a:hover,
.mag-cover__editor-take a:hover,
.bc1-block a:hover,
.gz-brand-editorial a:hover,
.gz-fw-content a:not(.gz-snake-wrap):not(.gz-snake-cta):not(.mag-mini):not(.gz-lotto-offer-card__cta):not(.lotto-grid-card__review):not(.gz-quick-link):not(.gz-thumb):hover,
.gz-news-article__body a:hover {
  color: var(--pink-dark, #C71585);
  text-decoration-color: var(--pink);
}

/* Darts section override removed — user preference is pink links on
   every page regardless of section theme (bingo-clubs, darts, lotto,
   arcade, all inherit the base rule above). */

.text-orange { color: #f97316; }
.drop-cap--orange { color: #f97316 !important; }


/* ── Darts lingo list — dart icon bullets, gold bold terms ── */
.gz-darts-lingo {
  list-style: none;
  padding: 0;
  margin: 1rem auto 1.25rem;
  max-width: 95%;
}
.gz-darts-lingo li {
  position: relative;
  padding: 0.5rem 0 0.5rem 2rem;
  font-family: var(--font-editorial);
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  border-bottom: 1px solid #f0f0f0;
}
.gz-darts-lingo li:last-child {
  border-bottom: none;
}
.gz-darts-lingo li::before {
  content: '\1F3AF';
  position: absolute;
  left: 0;
  top: 0.5rem;
  font-size: 14px;
}
.gz-darts-lingo strong {
  color: #D97706;
  font-weight: 800;
  font-size: 15px;
}


/* ── Full-width mag-cover: no right divider ───────────────────────
   .mag-cover carries `border-right: 1px solid #ddd` for use as the left
   column of a two-column .mag-row. Standing alone at full width that
   divider is a stray line down the right edge, so it comes off here.

   padding-right is NOT zeroed. It used to be, which beat the symmetric
   `padding: 0 1.5rem` on .gz-dir-editorial-article further up the file —
   every Part 2 on the site was rendering with padding on the left and
   none on the right, pulling the text left and jamming it against the
   right edge. Only the border is a two-column artefact; the padding is
   wanted at full width. */
.gz-fw-content .mag-cover,
.gz-dcal-article-wrap .mag-cover,
.mag-section > .mag-cover,
.mag-section > article.mag-cover {
  border-right: none;
}

/* Anything that is not the standard Part 2 shell still loses the 2rem
   right padding .mag-cover adds for the two-column layout — but keeps a
   symmetric gutter rather than being flush. */
.gz-fw-content .mag-cover:not(.gz-dir-editorial-article),
.gz-dcal-article-wrap .mag-cover:not(.gz-dir-editorial-article),
.mag-section > .mag-cover:not(.gz-dir-editorial-article),
.mag-section > article.mag-cover:not(.gz-dir-editorial-article) {
  padding-right: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   DARTS EDITOR'S PICKS OVERRIDES — applies to .gz-dep-box
   Multi-edge colour border, green buttons, RG strip.
   Moved from inline <style> in inc/darts-editors-picks.php to
   main CSS so any page can use the structure without the include.
   ═══════════════════════════════════════════════════════════════════ */
.gz-dep-box.mag-picks-box {
  border-top:    3px solid #16A34A !important;
  border-right:  3px solid #E91E8C !important;
  border-bottom: 3px solid #8B5CF6 !important;
  border-left:   3px solid #00BCD4 !important;
}
.gz-dep-box .gz-dep-featured { border: none !important; }
.gz-dep-box .gz-lotto-op-card__stars .gz-star--on { color: #7C3AED; }
.gz-dep-box .gz-lotto-op-card__stars { color: #7C3AED; font-size: 16px; }
.gz-dep-box .gz-lotto-op-card__btn--review {
  color: #16A34A !important; border-color: #16A34A !important; background: transparent !important;
}
.gz-dep-box .gz-lotto-op-card__btn--review:hover,
.gz-dep-box .gz-lotto-op-card__btn--review:focus-visible {
  background: #16A34A !important; color: #fff !important;
}
.gz-dep-box .gz-lotto-op-card__btn--visit {
  background: #16A34A !important; border-color: #16A34A !important; color: #fff !important;
}
.gz-dep-box .gz-lotto-op-card__btn--visit:hover,
.gz-dep-box .gz-lotto-op-card__btn--visit:focus-visible {
  background: #15803d !important; border-color: #15803d !important;
}
.gz-dep-box .gz-dep-rg {
  margin-top: 0.75rem; padding: 0.55rem 0.5rem 0.15rem;
  border-top: 1px dashed rgba(22,163,74,0.35);
  font-family: var(--font-editorial); font-size: 11.5px;
  color: #666; text-align: center; line-height: 1.5;
}
.gz-dep-box .gz-dep-rg__18 {
  display: inline-block; background: #16A34A; color: #fff;
  font-weight: 800; font-size: 10.5px; padding: 0.08rem 0.35rem;
  border-radius: 2px; vertical-align: middle;
}
.gz-dep-box .gz-dep-rg__divider { margin: 0 0.3rem; color: #aaa; }
.gz-dep-box .gz-dep-rg__body { color: #555; }
.gz-dep-box .gz-dep-rg__links { margin-top: 0.25rem; font-size: 11px; }
.gz-dep-box .gz-dep-rg__links a {
  color: #16A34A; text-decoration: none; font-weight: 600;
}
.gz-dep-box .gz-dep-rg__links a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   KEY SPONSORS — three-brand sidebar card.
   Stacked vertically inside mag-picks-box, each item has a small
   logo circle, name, stars and compact Review/Visit buttons.
   ═══════════════════════════════════════════════════════════════════ */
.gz-key-sponsors__list {
  display: flex; flex-direction: column; gap: 0.75rem;
}
.gz-key-sponsors__item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(22,163,74,0.2);
}
.gz-key-sponsors__item:last-child { border-bottom: none; }
.gz-key-sponsors__logo-wrap { flex-shrink: 0; }
.gz-key-sponsors__body { flex: 1; min-width: 0; }
.gz-key-sponsors__name {
  font-family: var(--font-editorial);
  font-size: 14px; font-weight: 800; color: #1a1a1a;
}
.gz-key-sponsors__stars {
  font-size: 11px; color: #fbbf24; letter-spacing: 0.05em;
  margin: 0.1rem 0 0.3rem;
}
.gz-key-sponsors__btns {
  display: flex; gap: 0.35rem;
}
.gz-key-sponsors__btns .gz-lotto-op-card__btn {
  font-size: 11px; padding: 0.2rem 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════
   KEY DATES — compact inline date pills for the calendar page.
   Small coloured badges that sit within the editorial flow.
   ═══════════════════════════════════════════════════════════════════ */
.gz-keydates {
  margin: 0.75rem 0 0.5rem;
  text-align: center;
}
.gz-keydates__grid {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  justify-content: center;
  margin-top: 0.6rem;
}
.gz-keydates__pill {
  display: inline-flex; flex-direction: column; align-items: center;
  background: #fff;
  border: 2px solid var(--kd-accent, #16A34A);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  text-decoration: none;
  min-width: 90px;
  transition: background 0.15s, transform 0.15s;
}
.gz-keydates__pill:hover {
  background: var(--kd-accent, #16A34A);
  transform: translateY(-1px);
}
.gz-keydates__pill:hover .gz-keydates__month,
.gz-keydates__pill:hover .gz-keydates__name { color: #fff; }
.gz-keydates__month {
  font-family: var(--font-editorial);
  font-size: 11px; font-weight: 800;
  color: var(--kd-accent, #16A34A);
  text-transform: uppercase; letter-spacing: 0.04em;
  line-height: 1.2;
}
.gz-keydates__name {
  font-family: var(--font-editorial);
  font-size: 12px; font-weight: 600;
  color: #333; line-height: 1.3;
}
@media (max-width: 600px) {
  .gz-keydates__grid { gap: 0.3rem; }
  .gz-keydates__pill { min-width: 80px; padding: 0.3rem 0.45rem; }
  .gz-keydates__month { font-size: 10px; }
  .gz-keydates__name { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DARTS ACCENT COLOUR CLASSES — per-tournament text accents.
   Replaces inline style="color:#..." on H1/H2 spans, drop caps,
   greeting spans, and section headings.
   ═══════════════════════════════════════════════════════════════════ */
.text-matchplay   { color: #8B5CF6; }
.text-worlds      { color: #E8634A; }
.text-rankings    { color: #D97706; }
.text-wgp         { color: #EF4444; }
.text-grand-slam  { color: #EAB308; }
.text-uk-open     { color: #F43F5E; }
.text-pcf         { color: #0E7490; }
.text-womens      { color: #E91E8C; }

.drop-cap--matchplay  { color: #8B5CF6; }
.drop-cap--worlds     { color: #E8634A; }
.drop-cap--rankings   { color: #D97706; }
.drop-cap--wgp        { color: #EF4444; }
.drop-cap--grand-slam { color: #EAB308; }
.drop-cap--uk-open    { color: #F43F5E; }
.drop-cap--pcf        { color: #0E7490; }

/* Greeting accent override */
.mag-greeting--matchplay  .mag-greeting__h1 { color: #8B5CF6; }
.mag-greeting--worlds     .mag-greeting__h1 { color: #E8634A; }
.mag-greeting--rankings   .mag-greeting__h1 { color: #D97706; }
.mag-greeting--wgp        .mag-greeting__h1 { color: #EF4444; }
.mag-greeting--grand-slam .mag-greeting__h1 { color: #EAB308; }
.mag-greeting--uk-open    .mag-greeting__h1 { color: #F43F5E; }
.mag-greeting--pcf        .mag-greeting__h1 { color: #0E7490; }

/* Quick-facts wrapper */
.gz-qf-wrap { max-width: 520px; margin: 0 auto 1.5rem; }

/* PDC official link spacer */
.gz-pdc-link { margin-top: 0.75rem; }

/* Compare Odds link (sidebar) */
.gz-compare-link {
  display: block; text-align: center; margin: 0.75rem 0 0.5rem;
}
.gz-compare-link a {
  font-family: var(--font-editorial); font-size: 13px; font-weight: 700;
  color: #16A34A; text-decoration: none; border-bottom: 1px solid #16A34A;
}
.gz-compare-link a:hover { border-bottom-color: transparent; }

/* Odds check H3 market headings */
.gz-market-h3 {
  font-family: var(--font-editorial); font-size: 17px; font-weight: 800;
  color: #16A34A; margin: 1.25rem 0 0.4rem;
}

/* API placeholder */
.gz-api-placeholder {
  background: #f7f7f7; border: 2px dashed #ccc; border-radius: 6px;
  padding: 2rem 1.5rem; text-align: center; margin: 1rem 0 1.5rem;
}
.gz-api-placeholder__title {
  font-family: var(--font-editorial); font-size: 18px; font-weight: 700;
  color: #999; margin: 0 0 0.5rem;
}
.gz-api-placeholder__sub {
  font-family: var(--font-editorial); font-size: 14px; color: #aaa; margin: 0;
}

/* Operator card brand backgrounds */
.gz-bg-betfred     { background: #0c1f6e; }
.gz-bg-boylesports { background: #1a2de0; }
.gz-bg-william-hill { background: #1a2240; }
.gz-bg-ladbrokes   { background: #c8102e; }
.gz-bg-coral       { background: #002f5f; }
.gz-bg-virgin-bet  { background: #c8102e; }
.gz-bg-foxy-bingo  { background: #430061; }
.gz-bg-gala-bingo  { background: #ffe330; }
.gz-bg-mecca-bingo { background: #ffffff; }
.gz-bg-jackpotjoy  { background: #6a0dad; }
.gz-bg-heart-bingo { background: #e4002b; }
.gz-bg-sun-bingo   { background: #c62828; }
.gz-bg-virgin-games { background: #c8102e; }
.gz-bg-happy-tiger { background: #ff8c00; }
.gz-bg-partycasino { background: #ff6600; }
.gz-bg-lottogo     { background: #1a237e; }
.gz-bg-health-lottery { background: #00a651; }

/* Section padding-top helper */
.gz-pt-half { padding-top: 0.5rem; }

/* RG strip darts green override */
.gz-rg-strip--darts { border-color: rgba(22,163,74,0.2); background: #f0fdf4; }
.gz-rg-strip--darts .gz-rg-strip__label { color: #16A34A; font-weight: 800; }
.gz-rg-strip--darts a { color: #16A34A; }

/* Compare Odds link anchor style */
.gz-compare-link__a {
  font-family: var(--font-editorial); font-size: 13px; font-weight: 700;
  color: #16A34A; text-decoration: none; border-bottom: 1px solid #16A34A;
}
.gz-compare-link__a:hover { border-bottom-color: transparent; }

/* Centered section H2 */
.gz-section-h2--center { text-align: center; margin-bottom: 0.5rem; }

/* RG strip darts label */
.gz-rg-strip--darts-label { color: #16A34A; font-weight: 800; }

/* QF header gradient */
.gz-qf-header { background: linear-gradient(135deg, #0a1f0a 0%, #1a3d1f 100%); }

/* Merch corner CTA box */
.gz-merch-cta {
  background: linear-gradient(135deg, #0a1f0a, #1a3d1f);
  border: 2px solid #16A34A; border-radius: 6px;
  padding: 1.25rem; text-align: center; margin: 1.5rem 0 0.5rem;
}
.gz-merch-cta__title {
  font-family: var(--font-editorial); font-size: 18px; font-weight: 900;
  font-style: italic; color: #fff; margin: 0 0 0.5rem; line-height: 1.2;
}
.gz-merch-cta__body {
  font-family: var(--font-editorial); font-size: 14px; color: #d8d3c8;
  margin: 0 0 0.75rem; line-height: 1.4;
}
.gz-merch-cta__btn {
  display: inline-block; padding: 0.6rem 1.2rem;
  font-family: var(--font-editorial); font-size: 15px; font-weight: 800;
  font-style: italic; color: #fff; background: #16A34A;
  border: 2px solid #16A34A; border-radius: 3px; text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: background 0.15s, transform 0.15s;
}
.gz-merch-cta__btn:hover { background: #15803d; transform: translateY(-1px); }

/* PDC Official Link — per-tournament colour variants */
.gz-pdc-official {
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.gz-pdc-official--darts      { color: #16A34A; border-bottom: 1px solid #16A34A; }
.gz-pdc-official--matchplay  { color: #8B5CF6; border-bottom: 1px solid #8B5CF6; }
.gz-pdc-official--womens     { color: #E91E8C; border-bottom: 1px solid #E91E8C; }
.gz-pdc-official--wgp        { color: #EF4444; border-bottom: 1px solid #EF4444; }
.gz-pdc-official--grand-slam { color: #EAB308; border-bottom: 1px solid #EAB308; }
.gz-pdc-official--pcf        { color: #0E7490; border-bottom: 1px solid #0E7490; }
.gz-pdc-official--worlds     { color: #E8634A; border-bottom: 1px solid #E8634A; }
.gz-pdc-official:hover { border-bottom-color: transparent; }

/* Premier League info box */
.gz-pl-infobox {
  background: #f0fdf4; border-left: 4px solid #16A34A;
  padding: 0.75rem 1rem; margin: 1rem 0; border-radius: 0 4px 4px 0;
}
.gz-pl-infobox__label {
  font-family: var(--font-editorial); font-size: 13px; font-weight: 800;
  color: #16A34A; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.4rem;
}
.gz-pl-infobox__body {
  font-family: var(--font-editorial); font-size: 14px; color: #1a1a1a;
  line-height: 1.6; margin: 0;
}

/* Odds check compare heading */
.gz-compare-heading {
  font-family: var(--font-editorial); font-size: 18px; font-weight: 800;
  color: #1a1a1a; text-align: center; margin: 1rem 0 0.3rem;
}

/* ═══════════════════════════════════════════════════════════════════
   ODDS CHECK MULTI-COLOUR SCHEME — matches the multi-edge card
   border (green/pink/purple/cyan) used on bookmaker sidebar cards.
   ═══════════════════════════════════════════════════════════════════ */
/* Multi-colour stars — each character coloured individually via spans,
   but fallback: just use the primary cyan/green mix */
.mag-section-stars--multi { color: #00BCD4; }
.mag-faded-border--multi {
  background: linear-gradient(90deg, #16A34A 0%, #E91E8C 33%, #8B5CF6 66%, #00BCD4 100%);
  height: 2px; border: none; opacity: 0.5;
}
.mag-label--odds {
  background: linear-gradient(135deg, #16A34A, #00BCD4) !important;
  color: #fff !important;
}
.text-odds-green  { color: #16A34A; }
.text-odds-pink   { color: #E91E8C; }
.text-odds-purple { color: #8B5CF6; }
.text-odds-cyan   { color: #00BCD4; }

/* Greeting card — multi-colour borders matching the card scheme */
.mag-greeting--odds {
  border-top: 3px solid #16A34A;
  border-right: 3px solid #E91E8C;
  border-bottom: 3px solid #8B5CF6;
  border-left: 3px solid #00BCD4;
}
.mag-greeting--odds .mag-greeting__h1 {
  background: linear-gradient(135deg, #16A34A, #E91E8C, #8B5CF6, #00BCD4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mag-greeting--odds .mag-greeting__stars,
.mag-greeting--odds .mag-greeting__stars-bottom { color: #00BCD4; }
.gz-market-h3--green  { color: #16A34A; }
.gz-market-h3--pink   { color: #E91E8C; }
.gz-market-h3--purple { color: #8B5CF6; }
.gz-market-h3--cyan   { color: #00BCD4; }

/* Multi-colour gradient text — matches the card border scheme */
.gz-text-multi {
  background: linear-gradient(135deg, #16A34A, #E91E8C, #8B5CF6, #00BCD4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gz-drop-multi {
  background: linear-gradient(180deg, #16A34A, #00BCD4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 3.2em; float: left; line-height: 0.85; margin: 0.05em 0.12em 0 0;
  font-family: var(--font-editorial); font-weight: 900;
}

/* ═══════════════════════════════════════════════════════════════════
   ARCADE SECTION — Gold + Teal + Purple tri-colour scheme
   Coral: #00BCD4  Amber: #7C3AED
   ═══════════════════════════════════════════════════════════════════ */
.mag-section--arcade { --section-accent: #00BCD4; --section-accent2: #1A237E; }
.text-arcade { color: #00BCD4; }
.text-pnm { color: #9c27b0; }
.text-arcade-purple { color: #1A237E; }
.text-arcade-teal { color: #00BCD4; }
.drop-cap--arcade { color: #00BCD4; }
.mag-faded-border--arcade { background: linear-gradient(90deg, transparent, #00BCD4, #1A237E, transparent); height: 2px; border: none; margin: 1rem 0; }
.mag-section-stars--arcade { background: linear-gradient(90deg, #00BCD4, #1A237E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mag-section-stars--pnm { color: #9c27b0; }
.mag-explore-star--pnm { color: #9c27b0; }
.mag-label--arcade { background: linear-gradient(135deg, #00BCD4, #1A237E); color: #fff; }
.gz-snake-wrap--arcade {
  --gz-angle: 0deg;
  --snake-bg: #00BCD4;
  display: inline-block;
  position: relative;
  padding: 3px;
  border-radius: 4px;
  background: transparent;
  margin-bottom: 0.5rem;
  animation: gz-spin 4s linear infinite;
}
.gz-snake-wrap--arcade::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  padding: 2px;
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, #00BCD4 60deg, #1A237E 120deg, #0D1642 180deg, #1A237E 240deg, #fff 300deg, #00BCD4 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.mag-greeting--arcade { border-top: 3px solid #00BCD4; border-bottom: 3px solid #1A237E; border-left: none; border-right: none; }
.mag-greeting--arcade .mag-greeting__h1 { background: linear-gradient(135deg, #00BCD4, #1A237E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mag-greeting--arcade .mag-greeting__stars { color: #00BCD4; }
.mag-greeting--arcade .mag-greeting__stars-bottom { color: #1A237E; }
@media (min-width: 768px) {
  .mag-greeting--arcade .mag-greeting__h1 { font-size: 28px; }
}

/* Arcade Explore More card variants */
.gz-mini--arcade { border-left: none; background: linear-gradient(180deg, #00BCD4, #1A237E) left/4px 100% no-repeat, #f8f8fd; }
.gz-mini-cat--arcade { background: linear-gradient(135deg, #00BCD4, #1A237E); color: #fff; padding: 2px 6px; border-radius: 2px; }
.gz-mini--slingo { border-left: none; background: linear-gradient(180deg, #5B21B6, #7C3AED, #5B21B6, #a78bfa) left/4px 100% no-repeat, #faf5ff; }
.gz-mini-cat--slingo { background: linear-gradient(135deg, #5B21B6, #7C3AED, #a78bfa); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(91,33,182,0.3); }
.gz-mini--scratch { border-left: none; background: linear-gradient(180deg, #FF6B6B, #ec4899, #FF6B6B, #fb7185) left/4px 100% no-repeat, #fff5f5; }
.gz-mini-cat--scratch { background: linear-gradient(135deg, #FF6B6B, #ec4899, #fb7185); color: #fff; font-weight: 800; padding: 2px 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(255,107,107,0.3); }
.gz-mini--provider { border-top: 3px solid #1E3A8A; }
.gz-mini-cat--provider { color: #1E3A8A; }

/* ═══════════════════════════════════════════════════════════════════
   ARCADE CATEGORY CARDS — large visual cards for hub explore
   ═══════════════════════════════════════════════════════════════════ */
.gz-arcade-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0;
}
@media (max-width: 600px) { .gz-arcade-grid { grid-template-columns: 1fr; } }

.gz-arcade-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; color: #fff;
  padding: 1.5rem 1rem; border-radius: 6px; position: relative; overflow: hidden;
  min-height: 180px; transition: transform 0.15s, box-shadow 0.15s;
  border: 2px solid rgba(255,255,255,0.1);
}
.gz-arcade-card:hover {
  transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.gz-arcade-card::before {
  content: ''; position: absolute; top: -40%; left: -40%; width: 180%; height: 180%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.gz-arcade-card__icon {
  font-size: 36px; margin-bottom: 0.5rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.gz-arcade-card__title {
  font-family: var(--font-editorial); font-size: 18px; font-weight: 800;
  line-height: 1.2; margin: 0 0 0.4rem; text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.gz-arcade-card__sub {
  font-family: var(--font-editorial); font-size: 12.5px; font-weight: 400;
  color: rgba(255,255,255,0.8); line-height: 1.4; max-width: 220px;
}
.gz-arcade-card__arrow {
  margin-top: 0.6rem; font-family: var(--font-editorial); font-size: 13px;
  font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: 0.05em;
}

/* Colour variants */
.gz-arcade-card--slots      { background: linear-gradient(135deg, #00BCD4 0%, #0097A7 50%, #5B21B6 100%); }
.gz-arcade-card--slingo     { background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 50%, #4C1D95 100%); }
.gz-arcade-card--scratch    { background: linear-gradient(135deg, #16A34A 0%, #15803D 50%, #166534 100%); }
.gz-arcade-card--bingo      { background: linear-gradient(135deg, #E91E8C 0%, #BE185D 50%, #9D174D 100%); }

/* Arcade mascot — sized to match darts/bingo mascots across the magazine */
.mag-greeting__mascot--arcade {
  shape-outside: url('/assets/images/arcade-lady.webp');
  width: 200px;
}
@media (max-width: 640px) {
  .mag-greeting__mascot--arcade { width: 170px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SLOTS SECTION — Crimson Red #DC2626
   Used on /slots/ pages and slot game templates
   ═══════════════════════════════════════════════════════════════════ */
.mag-section--slots { }
.text-slots { color: #DC2626 !important; }
.drop-cap--slots { color: #DC2626 !important; }
.mag-label--slots { background: #DC2626 !important; color: #fff !important; }
.mag-faded-border--slots { background: linear-gradient(90deg, transparent, #DC2626, transparent) !important; height: 1px !important; border: none !important; margin: 1rem 0; }
.mag-section-stars--slots { color: #DC2626 !important; }
.gz-snake-wrap--slots .gz-snake-label { background: #DC2626 !important; color: #fff !important; }
.mag-greeting--slots { border-top: 3px solid #DC2626 !important; border-bottom: 3px solid #DC2626 !important; border-left: none !important; border-right: none !important; }
.mag-greeting--slots .mag-greeting__h1,
.mag-greeting--slots .mag-greeting__stars,
.mag-greeting--slots .mag-greeting__stars-bottom { color: #DC2626 !important; }
@media (min-width: 768px) {
  .mag-greeting--slots .mag-greeting__h1 { font-size: 28px; }
}

/* Slots mascot */
.mag-greeting__mascot--slots {
  shape-outside: url('/assets/images/arcade-lady.webp');
  width: 180px;
}
@media (max-width: 640px) {
  .mag-greeting__mascot--slots { width: 130px; }
}

/* Slots RG strip */
.gz-rg-strip--slots { border-color: rgba(220,38,38,0.2); background: #fef2f2; }
.gz-rg-strip--slots .gz-rg-strip__label { color: #DC2626; font-weight: 800; }
.gz-rg-strip--slots a { color: #DC2626; }

/* Slots play safe override */
.gz-play-safe--slots .gz-picks-header { background: linear-gradient(135deg, #1a0505, #2a0a0a); }
.gz-play-safe--slots .mag-label--slots { background: #DC2626; }

/* Generic placeholder helper — used when sections render with no DB content yet */
.gz-muted-italic { color: var(--grey-light); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════
   PROVIDER PAGES — editorial content rendering
   provider.php pulls intro + editor_take as raw HTML from the DB.
   These styles MIRROR the magazine's existing .mag-cover__body /
   .mag-cover__standfirst / .mag-cover__subhead so provider editorial
   reads identically to brand/network/company guides. Don't reinvent
   sizes here — keep these in sync with the originals.
   ═══════════════════════════════════════════════════════════════════ */
/* Intro block — first paragraph styled as standfirst (bold lede) automatically;
   any explicit <p class="mag-cover__standfirst"> override also works. */
.mag-cover__intro p {
  font-size: 16px; color: #333; line-height: 1.65;
  margin: 0 0 1.1rem; font-weight: 500;
}
.mag-cover__intro p.mag-cover__standfirst,
.mag-cover__intro p:first-of-type {
  font-size: 17px; color: #333; line-height: 1.7;
  margin: 0 0 1.1rem; font-weight: 800;
}

/* Editor Take body — mirror .mag-cover__body / .mag-cover__title /
   .mag-cover__subhead exactly so provider guides match brand guides. */
.mag-cover__editor-take p {
  font-size: 16px; color: #333; line-height: 1.65;
  margin: 0 0 1.1rem; font-weight: 500;
}
.mag-cover__editor-take p.mag-cover__standfirst {
  font-size: 17px; line-height: 1.7; font-weight: 800;
}
.mag-cover__editor-take h2,
.mag-cover__editor-take .mag-cover__h2 {
  font-family: var(--font-editorial);
  font-size: 22px; font-weight: 700; line-height: 1.25;
  color: var(--black); margin: 1.6rem 0 1rem;
}
@media (min-width: 768px) {
  .mag-cover__editor-take h2,
  .mag-cover__editor-take .mag-cover__h2 { font-size: 26px; }
}
.mag-cover__editor-take h3,
.mag-cover__editor-take .mag-cover__subhead {
  font-family: var(--font-editorial);
  font-size: 22px; font-weight: 800; font-style: italic;
  color: var(--black); margin: 2rem 0 0.75rem; line-height: 1.3;
}
@media (min-width: 768px) {
  .mag-cover__editor-take h3,
  .mag-cover__editor-take .mag-cover__subhead { font-size: 26px; }
}
.mag-cover__editor-take ul,
.mag-cover__editor-take ol {
  margin: 0 0 1.1rem; padding-left: 1.5rem;
  font-size: 16px; color: #333; line-height: 1.65; font-weight: 500;
}
.mag-cover__editor-take li { margin-bottom: 0.4rem; }
.mag-cover__editor-take strong { color: #111; font-weight: 700; }
/* Link colours handled by the unified .mag-cover__body a / .mag-cover__editor-take a
   rule earlier in this file — do not redeclare here. */

/* ── Glitzy's Take framed box ────────────────────────────────────
/* ═══════════════════════════════════════════════════════════════════
   PER-PAGE ACCENT (CSS variable driven)
   Used by provider.php and family.php — each page sets a single
   inline `style="--page-accent: #XXXX"` on its <section> wrapper,
   pulled from the provider/family record's accent_colour column.
   These helpers reference that variable so all colour application
   stays in CSS.
   ═══════════════════════════════════════════════════════════════════ */
.gz-page-accent { color: var(--page-accent, #00BCD4); }
.drop-cap.gz-page-accent { color: var(--page-accent, #00BCD4) !important; }

/* ═══════════════════════════════════════════════════════════════════
   ARCADE SITEMAP — phone-directory layout
   Used by /arcade-sitemap/. Compact A–Z, one entity per line,
   provider→family→game indent. Designed for skim reading and
   crawl-depth reduction, not glamour.
   ═══════════════════════════════════════════════════════════════════ */

/* Letter jump bar — sticky-ish on scroll, single row of clickable letters */
.gz-az-letterbar {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  padding: 0.85rem 1rem; margin: 1rem 0 0.5rem;
  background: #fafaf7; border-top: 1px solid #ece9df; border-bottom: 1px solid #ece9df;
  justify-content: center;
}
.gz-az-letter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 6px;
  font-family: var(--font-editorial); font-size: 14px; font-weight: 700;
  border-radius: 3px; text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.gz-az-letter--active { color: #00BCD4; }
.gz-az-letter--active:hover { background: #00BCD4; color: #fff; }
.gz-az-letter--empty   { color: #c8c4b3; cursor: default; }

/* Directory container */
.gz-az-directory { padding: 0.5rem 0 1rem; }

/* Letter heading — big serif letter that anchors each section */
.gz-az-letter-block { padding: 1.25rem 0 0.5rem; scroll-margin-top: 80px; }
.gz-az-letter-heading {
  font-family: var(--font-display, var(--font-editorial));
  font-size: 36px; font-weight: 800; color: #00BCD4;
  margin: 0 0 0.6rem; padding: 0 0.25rem 0.4rem;
  border-bottom: 2px solid #ece9df; line-height: 1;
}

/* Provider block within a letter */
.gz-az-provider { padding: 0.55rem 0.25rem 0.85rem; }

/* The directory line itself — name + label */
.gz-az-line {
  margin: 0; padding: 0.18rem 0;
  font-size: 15px; line-height: 1.45; color: #444;
}
.gz-az-line--provider {
  font-size: 16px; font-weight: 700; color: #1a1a1a;
  padding-top: 0.4rem;
}
.gz-az-line--family {
  padding-left: 1.25rem; font-weight: 600; color: #2a2a2a;
}
.gz-az-line--game {
  padding-left: 2.5rem;
}
.gz-az-line--game-standalone {
  padding-left: 1.25rem;
}

/* Names — link or unlinked */
.gz-az-name {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted #c8c4b3;
}
.gz-az-name:hover { color: #00BCD4; border-bottom-color: #00BCD4; }
.gz-az-name--unlinked { border-bottom: none; color: inherit; }

/* The trailing (Provider) / (Family) / (Slot Game) label */
.gz-az-label {
  margin-left: 0.5rem; font-size: 13px; font-weight: 400;
  color: #888; font-style: italic;
}

/* Mobile — same structure but tighter */
@media (max-width: 600px) {
  .gz-az-letterbar { padding: 0.65rem 0.5rem; }
  .gz-az-letter { min-width: 24px; height: 24px; font-size: 13px; }
  .gz-az-letter-heading { font-size: 28px; }
  .gz-az-line { font-size: 14px; }
  .gz-az-line--provider { font-size: 15px; }
  .gz-az-line--family       { padding-left: 0.85rem; }
  .gz-az-line--game         { padding-left: 1.7rem; }
  .gz-az-line--game-standalone { padding-left: 0.85rem; }
  .gz-az-label { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════
   ARCADE — 5 Tips to Play Safe sidebar card
   Uses mag-picks-box gz-dep-box frame (same as editors picks)
   ═══════════════════════════════════════════════════════════════════ */
.gz-play-safe { border-top: 3px solid #00BCD4 !important; border-right: 3px solid #1A237E !important; border-bottom: 3px solid #00BCD4 !important; border-left: 3px solid #1A237E !important; }
.gz-play-safe__badge {
  display: inline-block; background: linear-gradient(135deg, #00BCD4, #7C3AED);
  color: #fff; font-family: var(--font-editorial); font-size: 10px; font-weight: 900;
  padding: 0.15rem 0.55rem; border-radius: 2px; letter-spacing: 0.08em; margin-top: 0.25rem;
}
.gz-play-safe__body { padding: 0.85rem 1rem; background: #fff; }
.gz-play-safe__tip {
  margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid #f0f0f0;
  text-align: center;
}
.gz-play-safe__tip:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.gz-play-safe__tip-top {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin-bottom: 0.25rem;
}
.gz-play-safe__chip {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  color: #fff; font-family: var(--font-editorial); font-size: 15px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.25);
}
.gz-play-safe__chip > span { position: relative; z-index: 1; }
.gz-play-safe__chip::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.5);
}
.gz-play-safe__chip--gold   { background: radial-gradient(circle at 35% 35%, #DAA520, #B8860B 60%, #8B6508); }
.gz-play-safe__chip--teal   { background: radial-gradient(circle at 35% 35%, #0EA5E9, #0891B2 60%, #065F73); }
.gz-play-safe__chip--purple { background: radial-gradient(circle at 35% 35%, #8B5CF6, #7C3AED 60%, #4C1D95); }
.gz-play-safe__tip-head {
  font-family: var(--font-editorial); font-size: 16px; font-weight: 900;
  line-height: 1.2; margin: 0;
}
.gz-play-safe__tip-head--gold   { color: #B8860B; }
.gz-play-safe__tip-head--teal   { color: #0891B2; }
.gz-play-safe__tip-head--purple { color: #7C3AED; }
.gz-play-safe__tip-text {
  font-family: var(--font-editorial); font-size: 13.5px; color: #555; line-height: 1.45;
  margin: 0.2rem 0 0; padding-left: 0;
}
.gz-play-safe__bonus {
  padding: 0.75rem 1rem; background: #fef2f2; border-top: 1px solid #e5e5e5; text-align: center;
}
.gz-play-safe__chip--bonus {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  color: #fff; font-family: var(--font-editorial); font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: radial-gradient(circle at 35% 35%, #EF4444, #DC2626 60%, #991B1B);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.2);
}
.gz-play-safe__chip--bonus::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.45);
}
.gz-play-safe__bonus-head {
  font-family: var(--font-editorial); font-size: 16px; font-weight: 900;
  color: #DC2626; line-height: 1.2; margin: 0;
}
.gz-play-safe__bonus-text {
  font-family: var(--font-editorial); font-size: 13.5px; color: #555; line-height: 1.45;
  margin: 0.2rem 0 0; padding-left: 0;
}
.gz-play-safe__bonus-text a { color: #DC2626; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   GAME PAGE — Quick Facts, Features, Featured Sites sidebar
   Uses CSS custom property --game-accent set on the section
   ═══════════════════════════════════════════════════════════════════ */
.gz-qf-row {
  display: flex; justify-content: space-between; padding: 0.4rem 0;
  border-bottom: 1px solid #f0f0f0; font-family: var(--font-editorial); font-size: 13.5px;
}
.gz-qf-label { color: #888; font-weight: 600; }
.gz-qf-value { color: #1a1a1a; font-weight: 700; }
.gz-qf-disclaimer {
  font-family: var(--font-editorial); font-size: 11.5px; color: #999;
  margin: 0.75rem 0 0; line-height: 1.4; font-style: italic;
}
.gz-feat-tag {
  display: inline-block; padding: 0.2rem 0.6rem;
  font-family: var(--font-editorial); font-size: 11px; font-weight: 700;
  color: #fff; border-radius: 2px; margin: 0.15rem 0.15rem 0 0;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.gz-fb-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px solid #f0f0f0;
}
.gz-fb-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; }
.gz-fb-name { font-family: var(--font-editorial); font-size: 14px; font-weight: 700; color: #1a1a1a; }
.gz-fb-btns { display: flex; gap: 0.4rem; }
.gz-fb-review { font-family: var(--font-editorial); font-size: 12px; font-weight: 600; text-decoration: none; }
.gz-fb-visit {
  font-family: var(--font-editorial); font-size: 12px; font-weight: 700;
  color: #fff; padding: 0.25rem 0.6rem; border-radius: 3px; text-decoration: none;
}
.gz-fb-ukgc { font-family: var(--font-editorial); font-size: 11px; color: #999; margin: 0.5rem 0 0; }

/* ═══════════════════════════════════════════════════════════════════
   GAME PAGE — structural classes replacing inline styles
   ═══════════════════════════════════════════════════════════════════ */
.gz-game-h2 { font-size: 20px; margin-top: 1.5rem; }
.gz-game-h2--sites { font-size: 20px; margin: 1.5rem 0 0.75rem; }
.gz-sidebar-card { margin-bottom: 1rem; }
.gz-sidebar-card__body { padding: 1rem; }
.gz-feat-wrap { margin-top: 0.75rem; }
.gz-op-card-bg { background: #1a1a1a; }

/* RG strip — arcade variant (gold/teal/purple) */
.gz-rg-strip--arcade { border-color: rgba(184,134,11,0.2); background: #fefce8; }
.gz-rg-strip--arcade .gz-rg-strip__label { color: #00BCD4; font-weight: 800; }
.gz-rg-strip--arcade a { color: #00BCD4; }

/* RG strip — slots variant (crimson) — already exists but ensure completeness */
.gz-rg-strip--slots { border-color: rgba(220,38,38,0.2); background: #fef2f2; }
.gz-rg-strip--slots .gz-rg-strip__label { color: #DC2626; font-weight: 800; }
.gz-rg-strip--slots a { color: #DC2626; }

/* Dynamic accent via CSS custom property */
.mag-section--slots  { --s-accent: #DC2626; }
.mag-section--arcade { --s-accent: #00BCD4; }
.gz-feat-tag--dynamic { background: var(--s-accent); }
.gz-fb-review--dynamic { color: var(--s-accent); }
.gz-fb-visit--dynamic { background: var(--s-accent); }

/* Arcade hub greeting sub mission statement */
.gz-greeting-mission {
  font-size: 15px; margin-top: 0.5rem; color: #666; line-height: 1.45;
}
.gz-fb-name-wrap { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════
   PROVIDERS SECTION — Pink #E91E63 to Orange #F97316
   Used on provider pages (/eyecon/, /pragmatic-play/ etc.) and
   the providers hub + providers card on arcade. Sits alongside
   arcade gold, bingo pink, darts green as a distinct section identity.
   ═══════════════════════════════════════════════════════════════════ */
.mag-section--providers { --gz-game-color: #E91E63; }
.text-providers {
  background: linear-gradient(135deg, #E91E63, #F97316);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.drop-cap--providers {
  background: linear-gradient(135deg, #E91E63, #F97316) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Provider logo — circular, floats beside the intro text */
.gz-provider-intro-logo {
  float: right;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #B8860B;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.2);
  margin: 0 0 0.75rem 1rem;
  background: #fff;
}
@media (min-width: 768px) {
  .gz-provider-intro-logo { width: 96px; height: 96px; }
}

.mag-label--providers {
  background: linear-gradient(135deg, #F97316, #E91E63, #FB923C) !important;
  color: #fff;
}
.mag-faded-border--providers {
  background: linear-gradient(90deg, transparent, #E91E63, #F97316, transparent) !important;
  height: 1px !important; border: none !important; margin: 1rem 0;
}
.mag-section-stars--providers { color: #E91E63 !important; }

.gz-snake-wrap--providers {
  --gz-angle: 0deg;
  display: inline-block;
  position: relative;
  padding: 3px;
  border-radius: 4px;
  background: transparent;
  margin-bottom: 0.5rem;
  animation: gz-spin 4s linear infinite;
}
.gz-snake-wrap--providers::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  padding: 2px;
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, #E91E63 60deg, #FF6B6B 120deg, #F97316 180deg, #FB923C 240deg, #fff 300deg, #E91E63 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.mag-greeting--providers { border-top: 3px solid #E91E63; border-bottom: 3px solid #F97316; border-left: none; border-right: none; }
.mag-greeting--providers .mag-greeting__h1 { background: linear-gradient(135deg, #E91E63, #F97316); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mag-greeting--providers .mag-greeting__stars { color: #E91E63; }
.mag-greeting--providers .mag-greeting__stars-bottom { color: #F97316; }
@media (min-width: 768px) {
  .mag-greeting--providers .mag-greeting__h1 { font-size: 28px; }
}

.gz-mini--providers { border-left: none; background: linear-gradient(180deg, #E91E63, #F97316, #FF6B6B) left/4px 100% no-repeat, #fff8f5; }
.gz-mini-cat--providers { background: linear-gradient(135deg, #E91E63, #F97316, #FF6B6B); color: #fff; padding: 2px 6px; border-radius: 2px; }
.gz-brand-snake--providers { background: linear-gradient(135deg, #E91E63, #F97316, #FF6B6B); }

.gz-rg-strip--providers { border-color: rgba(233, 30, 99, 0.2); background: #fff5f8; }
.gz-rg-strip--providers .gz-rg-strip__label { color: #E91E63; font-weight: 800; }
.gz-rg-strip--providers a { color: #E91E63; }

/* Body links stay the site's pink here too — see the arcade note below.
   #E91E63 is close enough to --pink to look like a mistake rather than a
   theme, and the orange hover was a different colour again. */

.mag-greeting__mascot--providers {
  shape-outside: url('/assets/images/arcade-lady.webp');
  width: 180px;
}
@media (max-width: 640px) {
  .mag-greeting__mascot--providers { width: 130px; }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPACT THUMBNAIL GRID — casino-lobby style for 100+ games.
   5 across desktop, 3 across mobile. Square tiles, game name below.
   ═══════════════════════════════════════════════════════════════════ */
.gz-thumb-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr;
  grid-auto-columns: calc((100% - 16px) / 3);
  gap: 8px;
  padding: 0 0 8px;
  margin: 0.5rem 0 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}
.gz-thumb-grid::-webkit-scrollbar { height: 5px; }
.gz-thumb-grid::-webkit-scrollbar-track { background: transparent; }
.gz-thumb-grid::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
@media (min-width: 640px) {
  .gz-thumb-grid { grid-auto-columns: calc((100% - 24px) / 4); }
}
@media (min-width: 900px) {
  .gz-thumb-grid { grid-auto-columns: calc((100% - 50px) / 6); gap: 10px; }
}

/* Multi-row: if more than 6 games, stack in 2 rows */
.gz-thumb-grid--2row {
  grid-template-rows: 1fr 1fr;
}

/* Static: no scroll, wraps in normal grid */
.gz-thumb-grid--static {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-template-rows: auto !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0.5rem 0 0.75rem !important;
  overflow: visible !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: auto !important;
}
@media (min-width: 640px) {
  .gz-thumb-grid--static { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 900px) {
  .gz-thumb-grid--static { grid-template-columns: repeat(6, 1fr) !important; }
}
.gz-thumb-grid--static .gz-thumb {
  width: auto !important;
  min-width: 0 !important;
}

.gz-thumb {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 1;
  background: #fff;
  cursor: pointer;
  scroll-snap-align: start;
  border: 2px solid #1a1a2e;
}
.gz-thumb__img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  padding: 0;
  background: none;
}
.gz-thumb__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.gz-thumb:hover .gz-thumb__img img {
  transform: scale(1.08);
}

/* Shutter — clip-path for buttery smooth reveal */
.gz-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
.gz-thumb:hover::after {
  clip-path: inset(0 0 0 0);
}

/* Game name — dead center, shows on hover */
.gz-thumb__name {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 0 8px;
  font-family: var(--font-sans, system-ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease 0.06s;
}
.gz-thumb:hover .gz-thumb__name { opacity: 1; }

/* View button */
.gz-thumb__view {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  font-family: var(--font-sans, system-ui);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  background: #C71585;
  border-radius: 3px;
  z-index: 2;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.2s ease 0.08s;
}
.gz-thumb:hover .gz-thumb__view { opacity: 1; }

/* Info icon — white circle, pink i, shows on hover */
.gz-thumb__info-icon {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: #C71585;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  font-family: var(--font-editorial);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gz-thumb:hover .gz-thumb__info-icon { opacity: 1; }

.gz-thumb__info { display: none; }

/* Hidden games — in HTML for Google, hidden visually until toggled */
.gz-thumb--hidden { display: none; }
.gz-thumb-grid--show-all .gz-thumb--hidden { display: flex; }

/* Show All button */
.gz-show-all-btn {
  display: block;
  margin: 1rem auto;
  text-align: center;
}

/* Provider guide H2/H3 — pink editorial accent */
.mag-section--arcade .mag-cover .mag-cover__h2,
.mag-section--arcade .mag-cover > h2:not(.mag-cover__title),
.mag-section--arcade .mag-cover__body .mag-cover__h2,
/* Arcade headings run a cyan gradient, not the pink-to-orange they used
   to — that produced orange h2s and h3s on a cyan-themed section. The
   providers theme keeps pink-to-orange; this is arcade only. */
.mag-section--arcade .mag-cover__body h2 {
  font-family: var(--font-editorial);
  font-size: 22px; font-weight: 700; line-height: 1.25;
  margin: 1.6rem 0 1rem;
  background: linear-gradient(135deg, #00BCD4, #1A237E);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 768px) {
  .mag-section--arcade .mag-cover .mag-cover__h2,
  .mag-section--arcade .mag-cover > h2:not(.mag-cover__title),
  .mag-section--arcade .mag-cover__body .mag-cover__h2,
  .mag-section--arcade .mag-cover__body h2 { font-size: 26px; }
}
.mag-section--arcade .mag-cover .mag-cover__subhead,
.mag-section--arcade .mag-cover > h3,
.mag-section--arcade .mag-cover__body .mag-cover__subhead,
.mag-section--arcade .mag-cover__body h3 {
  font-family: var(--font-editorial);
  font-size: 20px; font-weight: 800; font-style: italic;
  line-height: 1.3; margin: 1.5rem 0 0.6rem;
  background: linear-gradient(135deg, #00BCD4, #1A237E);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 768px) {
  .mag-section--arcade .mag-cover .mag-cover__subhead,
  .mag-section--arcade .mag-cover > h3,
  .mag-section--arcade .mag-cover__body .mag-cover__subhead,
  .mag-section--arcade .mag-cover__body h3 { font-size: 22px; }
}
.mag-section--arcade .mag-cover > h4,
.mag-section--arcade .mag-cover__body h4,
.mag-section--arcade .mag-cover > h4.mag-cover__subhead,
.mag-section--arcade .mag-cover__body h4.mag-cover__subhead {
  font-family: var(--font-editorial);
  font-size: 16px; font-weight: 700; font-style: normal;
  line-height: 1.3; margin: 1.25rem 0 0.5rem;
  color: #C71585;
  background: none; -webkit-background-clip: unset; background-clip: unset;
}
@media (min-width: 768px) {
  .mag-section--arcade .mag-cover__body h4 { font-size: 18px; }
}
/* Lists inside provider guide — styled like gz-darts-lingo */
.mag-section--arcade .mag-cover > ul,
.mag-section--arcade .mag-cover > ol,
.mag-section--arcade .mag-cover__body ul,
.mag-section--arcade .mag-cover > ol,
.mag-section--arcade .mag-cover__body ol { list-style: none; padding: 0; margin: 1rem auto 1.25rem; max-width: 95%; }
.mag-section--arcade .mag-cover > ul li,
.mag-section--arcade .mag-cover > ol li,
.mag-section--arcade .mag-cover__body ul li,
.mag-section--arcade .mag-cover__body ol li {
  position: relative;
  padding: 0.65rem 0 0.65rem 2rem;
  font-family: var(--font-editorial);
  font-size: 16px;
  line-height: 1.65;
  color: #333;
  border-bottom: 1px solid #eee;
  margin-bottom: 0;
  font-weight: 500;
}
.mag-section--arcade .mag-cover > ul li:last-child,
.mag-section--arcade .mag-cover > ol li:last-child,
.mag-section--arcade .mag-cover__body ul li:last-child,
.mag-section--arcade .mag-cover__body ol li:last-child { border-bottom: none; }
.mag-section--arcade .mag-cover > ul li::before,
.mag-section--arcade .mag-cover__body ul li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 0.5rem;
  font-size: 13px;
  color: #E91E63;
}
.mag-section--arcade .mag-cover > ol,
.mag-section--arcade .mag-cover__body ol { counter-reset: gz-ol; }
.mag-section--arcade .mag-cover > ol li::before,
.mag-section--arcade .mag-cover__body ol li::before {
  counter-increment: gz-ol;
  content: counter(gz-ol);
  position: absolute;
  left: 0;
  top: 0.5rem;
  font-size: 13px;
  font-weight: 800;
  color: #E91E63;
}
.mag-section--arcade .mag-cover > ul li strong,
.mag-section--arcade .mag-cover > ol li strong,
.mag-section--arcade .mag-cover__body ul li strong,
.mag-section--arcade .mag-cover__body ol li strong {
  color: #C71585;
  font-weight: 800;
}

/* Reduce gaps between stacked arcade sections (games → guide → FAQs) */
.mag-section--arcade + .mag-section--arcade { padding-top: 0.5rem; }
.mag-section--arcade .gz-fw-content { margin: 0.75rem 0; }

/* Bingo game greeting box — pink theme */
.mag-greeting--pink { border-top: 3px solid #C71585; border-bottom: 3px solid #E91E63; border-left: none; border-right: none; }
.mag-greeting--pink .mag-greeting__h1 { color: #C71585; }
.mag-greeting--pink .mag-greeting__stars { color: #C71585; }
.mag-greeting--pink .mag-greeting__stars-bottom { color: #E91E63; }

/* The Vault — purple/violet sidebar */
.mag-greeting--silver { border-top: 3px solid #C1440E; border-bottom: 3px solid #8F2E08; border-left: none; border-right: none; }
.mag-greeting--silver .mag-greeting__h1 { color: #C1440E; }
.mag-greeting--silver .mag-greeting__stars { color: #E8751A; }
.mag-greeting--silver .mag-greeting__stars-bottom { color: #C1440E; }

/* Red (scam-check theme — matches the red nav dot) */
.mag-greeting--red { border-top: 3px solid var(--danger, #c62828); border-bottom: 3px solid #8b1e1e; border-left: none; border-right: none; }
.mag-greeting--red .mag-greeting__h1 { color: var(--danger, #c62828); }
.mag-greeting--red .mag-greeting__stars { color: var(--danger, #c62828); }
.mag-greeting--red .mag-greeting__stars-bottom { color: #8b1e1e; }

/* Sidebar box text spacing — Glitzy's Take + Feature Round */
.gz-lgt-expert-verdict__text { font-size: 12.5px; line-height: 1.6; margin: 0.5rem 0 0; }
@media (min-width: 768px) {
  .gz-lgt-expert-verdict__text { font-size: 14.5px; }
}
.gz-feature-round-body { padding: 0.75rem 1rem; }
.gz-feature-round-name { font-weight: 700; margin-bottom: 0.5rem; }
.gz-feature-round-desc { line-height: 1.6; margin: 0; }

/* Bingo game guide H2/H3/H4 — uses per-game accent colour */
.gz-brand-editorial h2,
.gz-brand-editorial .mag-cover__h2 {
  font-family: var(--font-editorial);
  font-size: 18px; font-weight: 700; line-height: 1.25;
  margin: 1.6rem 0 1rem;
  color: var(--gz-game-color, #C71585);
}
@media (min-width: 768px) {
  .gz-brand-editorial h2,
  .gz-brand-editorial .mag-cover__h2 { font-size: 22px; }
}
.gz-brand-editorial h3,
.gz-brand-editorial .mag-cover__subhead {
  font-family: var(--font-editorial);
  font-size: 17px; font-weight: 800; font-style: italic;
  line-height: 1.3; margin: 1.5rem 0 0.6rem;
  color: var(--gz-game-color, #C71585);
}
@media (min-width: 768px) {
  .gz-brand-editorial h3,
  .gz-brand-editorial .mag-cover__subhead { font-size: 20px; }
}
.gz-brand-editorial h4 {
  font-family: var(--font-editorial);
  font-size: 15px; font-weight: 700; font-style: normal;
  line-height: 1.3; margin: 1.25rem 0 0.5rem;
  color: var(--gz-game-color, #C71585);
}
@media (min-width: 768px) {
  .gz-brand-editorial h4 { font-size: 17px; }
}
/* Lists inside bingo game editorial */
.gz-brand-editorial ul,
.gz-brand-editorial ol { list-style: none; padding: 0; margin: 1rem auto 1.25rem; max-width: 95%; }
.gz-brand-editorial ul li,
.gz-brand-editorial ol li {
  position: relative;
  padding: 0.5rem 0 0.5rem 2rem;
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 0;
}
.gz-brand-editorial ul li:last-child,
.gz-brand-editorial ol li:last-child { border-bottom: none; }
.gz-brand-editorial ul li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 0.5rem;
  font-size: 13px;
  color: var(--gz-game-color, #C71585);
}
.gz-brand-editorial ul li strong,
.gz-brand-editorial ol li strong {
  color: var(--gz-game-color, #C71585);
  font-weight: 800;
}

/* Left column H2s slightly smaller to fit narrow width */
.mag-col.gz-col-pad-l .gz-brand-editorial h2 { font-size: 19px; }
@media (min-width: 768px) {
  .mag-col.gz-col-pad-l .gz-brand-editorial h2 { font-size: 22px; }
}

/* Bingo Sites colour scheme — pink→purple gradient */
.text-bingo-sites {
  background: linear-gradient(135deg, #E91E63, #9c27b0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.drop-cap--bingo-sites {
  background: linear-gradient(135deg, #E91E63, #9c27b0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mag-label--bingo-sites {
  background: linear-gradient(135deg, #9c27b0, #E91E63) !important;
  color: #fff !important;
}
.mag-faded-border--bingo-sites {
  background: linear-gradient(90deg, transparent, #E91E63, #9c27b0, transparent);
  height: 2px; border: none; margin: 1rem 0;
}
.mag-section-stars--bingo-sites { color: #9c27b0; }

/* Bingo Sites mini card — pink→purple gradient */
.gz-mini--bingo-sites { border-left: none; background: linear-gradient(180deg, #E91E63, #9c27b0, #E91E63, #c084fc) left/4px 100% no-repeat, #fdf4f9; }
.gz-mini--bingo-sites:hover { border-left-color: #9c27b0; }
.gz-mini-cat--bingo-sites { background: linear-gradient(135deg, #E91E63, #9c27b0); color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; }
.gz-mini-continue--bingo-sites { color: #9c27b0; }

/* Cyan chip for arcade play-safe */
.gz-play-safe__chip--cyan { background: radial-gradient(circle at 35% 35%, #26C6DA, #00BCD4 60%, #0097A7); }
.gz-play-safe__tip-head--cyan { color: #00BCD4; }

/* Deep blue chip for arcade — matches arcade lady */
.gz-play-safe__chip--deepblue { background: radial-gradient(circle at 35% 35%, #039BE5, #1A237E 60%, #0D1642); }
.gz-play-safe__tip-head--deepblue { color: #1A237E; }

/* Play Safe chip rows — chip inline with text */
.gz-play-safe__chip-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0,188,212,0.15);
}
.gz-play-safe__chip-row:last-child { border-bottom: none; }
.gz-play-safe__tip-body {
  font-size: 14px;
  line-height: 1.55;
  color: #555;
  margin: 0.2rem 0 0;
}

/* Play Safe box header + better padding */
.gz-play-safe__header {
  background: linear-gradient(135deg, #00BCD4, #1A237E);
  padding: 0.6rem 1rem;
  text-align: center;
}
.gz-play-safe__header-title {
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gz-play-safe__body {
  padding: 1rem 1.25rem;
}
.gz-play-safe__chip-row {
  padding: 0.75rem 0;
}

/* Body links stay the site's pink on arcade pages, as everywhere else.
   They ran #1A237E navy hovering to cyan, which made a link on an arcade
   page look like a different site's link — and navy on white reads as
   heading text rather than something clickable. Section furniture is
   themed; body copy is not. */
.mag-section--arcade .mag-cover__standfirst { color: #1a1a1a; }
/* Section intros stay generic — no per-section colouring. They read the
   same on every page, which is what makes them feel like one voice
   rather than a different site per section. */

/* Editor's Picks — more breathing room on desktop */
@media (min-width: 768px) {
  .mag-picks-box .mag-picks-list { padding: 0.6rem 0.75rem; }
  .mag-picks-box .mag-pick-item { padding: 0.75rem 0.5rem; gap: 0.75rem; }
  .mag-picks-box__header { padding: 1.25rem 1.25rem 1rem; }
}

/* Editor's Picks — card padding on desktop */
@media (min-width: 768px) {
  .mag-picks-box .gz-lotto-op-card { padding: 1rem 1.5rem; gap: 0.5rem; }
}

/* Editor's Picks — more link bottom border */
.mag-picks-box__more {
  padding-bottom: 0.85rem !important;
  border-bottom: 1px dashed rgba(199, 21, 133, 0.35);
  margin-bottom: 0;
}

/* Editor's Picks — button layout on desktop */
@media (min-width: 768px) {
  .mag-picks-box .gz-lotto-op-card__btns { display: flex; gap: 4px; width: 70%; justify-content: center; }
}

/* Brand logo circles — bigger on desktop */
@media (min-width: 768px) {
  .gz-brand-similar-logo-circle { width: 76px; height: 76px; background: #1a0a1f; border-color: #C71585; }
}

/* Bingo Lady mascot — silhouette sitting on text */
.mag-greeting__mascot--bingo {
  display: block;
  margin: 0 auto 0.5rem;
  width: 130px;
}
@media (max-width: 640px) {
  .mag-greeting__mascot--bingo { width: 130px; }
}

/* Match greeting h1 size across all themes to darts/green */
@media (min-width: 768px) {
  .mag-greeting--pink .mag-greeting__h1 { font-size: 23px; }
  .mag-greeting--centered .mag-greeting__h1 { font-size: 23px; }
}

/* Desktop section padding bump */
@media (min-width: 768px) {
  .mag-section { padding: 2rem 2.5rem; }
}

/* Match FAQ section border to darts offers/tc boxes */
.mag-section--faq { border: 1px solid #ddd; border-radius: 6px; background: #f8f8f8; }

/* 18+ ball — theme colour overrides */
.mag-greeting--green .mag-greeting__stars-bottom::after { border-color: #16A34A; color: #16A34A; }
.mag-greeting--purple .mag-greeting__stars-bottom::after { border-color: #7C3AED; color: #7C3AED; }
.mag-greeting--peach .mag-greeting__stars-bottom::after { border-color: #E8913A; color: #E8913A; }
.mag-greeting--arcade .mag-greeting__stars-bottom::after { border-color: #1A237E; color: #1A237E; }
.mag-greeting--slots .mag-greeting__stars-bottom::after { border-color: #DC2626; color: #DC2626; }
.mag-greeting--providers .mag-greeting__stars-bottom::after { border-color: #F97316; color: #F97316; }
.mag-greeting--odds .mag-greeting__stars-bottom::after { border-color: #00BCD4; color: #00BCD4; }
.mag-greeting--footer .mag-greeting__stars-bottom::after { display: none; }

/* Series logo — clean centred promo image, no frame */
.gz-series-logo {
  text-align: center;
  margin: 1rem 0 1.25rem;
  padding: 0;
}
.gz-series-logo img {
  max-width: 280px;
  height: auto;
  display: inline-block;
}
@media (min-width: 768px) {
  .gz-series-logo img { max-width: 340px; }
}

/* Family sidebar — category grouped games list */
.gz-qf-list--category {
  margin: 0;
  border-top: 2px solid #f5f0f8;
  padding: 0;
}
.gz-qf-item--cat-heading {
  padding: 0.65rem 1rem 0.35rem;
  background: linear-gradient(135deg, #1a0a1f 0%, #3d1a2e 100%);
  border-bottom: none;
}
.gz-qf-cat-title {
  font-family: var(--font-editorial, 'Georgia', serif);
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  letter-spacing: 0;
  text-transform: none;
}
.gz-qf-game-link {
  display: block;
  color: #C71585;
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  padding: 2px 0;
  word-break: break-word;
}
.gz-qf-game-link:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .gz-qf-game-link { font-size: 14px; padding: 4px 0; }
  .gz-qf-item { padding: 0.45rem 0.75rem; }
}

/* Compare cards — semantic table styled as cards */
.gz-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.75rem;
}
.gz-compare-cards {
  margin: 1rem 0;
}
@media (min-width: 640px) {
  .gz-compare-table { border-spacing: 0.75rem; }
  .gz-compare-table tbody { display: grid; grid-template-columns: 1fr 1fr; }
}
.gz-compare-card {
  display: block;
  background: #faf9f6;
  border: 1px solid #f0e8f0;
  border-left: 3px solid #C71585;
  border-radius: 0 8px 8px 0;
}
.gz-compare-card__title-cell {
  display: block;
  padding: 0.85rem 1rem;
}
.gz-compare-card__title {
  display: block;
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 800;
  color: #C71585;
  text-decoration: none;
  margin-bottom: 0.4rem;
}
.gz-compare-card__title:hover { text-decoration: underline; }
.gz-compare-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
}
.gz-compare-card__fact {
  font-size: 12px;
  color: #555;
  line-height: 1.5;
}
.gz-compare-card__label {
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.3px;
  margin-right: 3px;
}

/* Sidebar game list — diamond bullet (inherits page accent) */
.gz-qf-game-link::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  vertical-align: middle;
  background-color: var(--pink, #C71585);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L22 12 L12 22 L2 12 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L22 12 L12 22 L2 12 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  flex-shrink: 0;
}
.gz-qf-game-link { color: var(--pink, #C71585); }

/* Compare section disclaimer */
.gz-compare-disclaimer {
  font-size: 11px;
  color: #999;
  text-align: center;
  margin-top: 0.75rem;
}

/* Quick links — pill-style category navigation */
.gz-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0.75rem 0 1rem;
}
.gz-quick-link {
  display: inline-block;
  padding: 6px 16px;
  font-family: var(--font-sans, system-ui);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
  border: 2px solid;
  border-radius: 20px;
  transition: background 0.15s ease, color 0.15s ease;
}
.gz-quick-link:hover { color: #fff; text-decoration: none; }

/* Per-hub colours */
.gz-quick-link--bingo   { color: #E91E63; border-color: #E91E63; }
.gz-quick-link--bingo:hover { background: #E91E63; }
.gz-quick-link--slingo  { color: #5B21B6; border-color: #5B21B6; }
.gz-quick-link--slingo:hover { background: #5B21B6; }
.gz-quick-link--scratch { color: #FF6B6B; border-color: #FF6B6B; }
.gz-quick-link--scratch:hover { background: #FF6B6B; }
.gz-quick-link--slots   { color: #DC2626; border-color: #DC2626; }
.gz-quick-link--slots:hover { background: #DC2626; }
.gz-quick-link--arcade  { color: #B8860B; border-color: #B8860B; }
.gz-quick-link--arcade:hover { background: #B8860B; }

/* Quick dropdown — sits inline with pills */
.gz-quick-dropdown {
  position: relative;
  display: inline-block;
}
.gz-quick-dropdown__btn {
  cursor: pointer;
}
.gz-quick-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 100;
  overflow: hidden;
}
.gz-quick-dropdown--open .gz-quick-dropdown__menu { display: block; }
.gz-quick-dropdown__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-family: var(--font-sans, system-ui);
  font-size: 13px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.1s ease;
}
.gz-quick-dropdown__item:last-child { border-bottom: none; }
.gz-quick-dropdown__item:hover {
  background: #fdf2f8;
  color: #C71585;
}
.gz-quick-dropdown__count {
  font-size: 11px;
  font-weight: 400;
  color: #999;
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Provider sidebar cards with logos */
.gz-provider-list {
  padding: 0.25rem 0;
}
.gz-provider-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.6rem 1rem;
  text-decoration: none;
  border-bottom: 1px solid #f5f0f8;
  transition: background 0.15s ease;
}
.gz-provider-card:last-child { border-bottom: none; }
.gz-provider-card:hover { background: #fdf2f8; }
.gz-provider-card__logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f0f8;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gz-provider-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gz-provider-card__initial {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 16px;
  font-weight: 800;
  color: #C71585;
}
.gz-provider-card__info {
  display: flex;
  flex-direction: column;
}
.gz-provider-card__name {
  font-family: var(--font-sans, system-ui);
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.3;
}
.gz-provider-card__count {
  font-family: var(--font-sans, system-ui);
  font-size: 11px;
  font-weight: 400;
  color: #999;
}

/* Top 10 rank chips — colourful numbered circles */
.gz-qf-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-sans, system-ui);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  margin-right: 8px;
}

/* Top 10 items — chip and link side by side */
.gz-qf-item:has(.gz-qf-rank) {
  display: flex;
  align-items: center;
  gap: 0;
}
.gz-qf-rank--1  { background: #FFD700; color: #1a1a1a; }
.gz-qf-rank--2  { background: #C0C0C0; color: #1a1a1a; }
.gz-qf-rank--3  { background: #CD7F32; }
.gz-qf-rank--4  { background: #C71585; }
.gz-qf-rank--5  { background: #7B1FA2; }
.gz-qf-rank--6  { background: #00BCD4; }
.gz-qf-rank--7  { background: #DC2626; }
.gz-qf-rank--8  { background: #B8860B; }
.gz-qf-rank--9  { background: #2E7D32; }
.gz-qf-rank--10 { background: #1565C0; }

/* Remove diamond bullet from top 10 links */
.gz-qf-rank + .gz-qf-game-link::before { display: none; }

/* Slots snake wrap — matches provider snake pattern */
.gz-snake-wrap--slots {
  --gz-angle: 0deg;
  display: inline-block;
  position: relative;
  padding: 3px;
  border-radius: 4px;
  background: transparent;
  margin-bottom: 0.5rem;
  animation: gz-spin 4s linear infinite;
}
.gz-snake-wrap--slots::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  padding: 2px;
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, #DC2626 60deg, #ff6b6b 120deg, #EF4444 180deg, #B91C1C 240deg, #fff 300deg, #DC2626 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

/* Scroll hint — faded edge with arrow on right side of game grid */
.gz-thumb-grid-wrap {
  position: relative;
}
.gz-thumb-grid-wrap::after {
  content: '→';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 12px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  background: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
  z-index: 3;
  border-radius: 0 8px 8px 0;
}

/* Hub sublink — small text link under snake labels */
.gz-hub-sublink {
  display: block;
  font-family: var(--font-sans, system-ui);
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-decoration: none;
  margin-top: 2px;
  margin-bottom: 0;
}
.gz-hub-sublink:hover {
  color: #C71585;
}


/* Hub category intro — centred mini text above games */
.gz-hub-cat-intro {
  text-align: center;
  font-family: var(--font-sans, system-ui);
  font-size: 12px;
  color: #888;
  margin: 0.25rem 0 0.5rem;
  line-height: 1.4;
}
.gz-hub-cat-link {
  color: #C71585;
  font-weight: 700;
  text-decoration: none;
}
.gz-hub-cat-link:hover {
  text-decoration: underline;
}

/* Series label — editorial font, bold */
.gz-hub-series-label {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 16px;
  font-weight: 800;
  color: #1a1a2e;
  margin: 1rem 0 0.25rem;
  padding: 0;
}

/* Providers theme — text, drop-cap, greeting */
.text-providers { color: #E91E63 !important; }
.drop-cap--providers { color: #E91E63; }
.mag-greeting--providers { border-top: 3px solid #E91E63 !important; border-bottom: 3px solid #E91E63 !important; border-left: none !important; border-right: none !important; }
.mag-greeting--providers .mag-greeting__h1,
.mag-greeting--providers .mag-greeting__stars,
.mag-greeting--providers .mag-greeting__stars-bottom { color: #E91E63 !important; }

/* Studio name in sidebar game lists */
.gz-qf-studio {
  display: block;
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  letter-spacing: 0;
  text-transform: none;
}
.gz-qf-item:has(.gz-qf-studio) {
  padding: 0.65rem 1rem 0.35rem;
  background: linear-gradient(135deg, #1a0a1f 0%, #3d1a2e 100%);
  border-bottom: none;
}
/* Hide diamond before studio names */
.gz-qf-studio::before { display: none; }
.gz-qf-item:has(.gz-qf-studio)::before { display: none; }

/* Footer Responsible Gambling Strip */
.gz-footer-rg-strip {
  text-align: center;
  padding: 1.5rem 1rem;
  margin: 0;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}
.gz-footer-rg-strip__label {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #1a1a2e;
  margin: 0 0 0.5rem;
}
.gz-footer-rg-strip__text {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 14px;
  color: #555;
  margin: 0;
  line-height: 1.7;
}
.gz-footer-rg-strip__link {
  color: #1a1a2e;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #C71585;
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.gz-footer-rg-strip__link:hover {
  color: #C71585;
  border-bottom-color: #C71585;
}

/* Footer mobile text bump */
@media (max-width: 640px) {
  .mag-cover__body { font-size: 16px !important; }
  .mag-cover__standfirst { font-size: 17.5px !important; }
  .drop-cap { font-size: 3.4em !important; }
  .gz-footer-eeat-signal__label { font-size: 12px !important; }
  .gz-footer-eeat-signal__name { font-size: 24px !important; }
  .gz-footer-eeat-signal__creds { font-size: 15px !important; }
  .gz-footer-eeat-signal__stance { font-size: 14px !important; }
  .gz-footer-eeat-signal__updated { font-size: 13px !important; }
  .gz-footer-col__title { font-size: 13px !important; }
  .gz-footer-col a { font-size: 15px !important; }
  .site-footer__disclaimer { font-size: 14px !important; }
  .site-footer__copyright-line { font-size: 15px !important; }
  .site-footer__copyright-line--sub { font-size: 14px !important; }
  .site-footer__brand { font-size: 14px !important; }
  .site-footer__ukgc { font-size: 12px !important; }
  .gz-footer-rg-strip__label { font-size: 13px !important; }
  .gz-footer-rg-strip__text { font-size: 15px !important; }
}
@media (max-width: 767px) {
  .mag-cover__standfirst { font-size: 16px !important; line-height: 1.35 !important; }
}

/* Scam Alert Box */
.gz-scam-alert-box {
  background: #fff5f5;
  border: 2px solid #DC2626;
  border-left: 5px solid #DC2626;
  padding: 1.2rem 1.25rem;
  margin: 1.5rem 0;
  text-align: left;
}
.gz-scam-alert-box__icon {
  font-size: 1.5rem;
  color: #DC2626;
  display: block;
  margin-bottom: 0.3rem;
}
.gz-scam-alert-box__title {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 16px;
  font-weight: 800;
  color: #DC2626;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gz-scam-alert-box__text {
  font-family: var(--font-sans, system-ui);
  font-size: 14px;
  color: #333;
  margin: 0 0 0.6rem;
  line-height: 1.55;
}
.gz-scam-alert-box__link {
  font-family: var(--font-sans, system-ui);
  font-size: 13px;
  font-weight: 700;
  color: #DC2626;
  text-decoration: none;
  border-bottom: 1px solid #DC2626;
  padding-bottom: 1px;
}
.gz-scam-alert-box__link:hover {
  color: #991b1b;
}

/* Red mini card theme — scam checker */
.gz-mini-cat--red { color: #fff; background: #DC2626; padding: 2px 6px; border-radius: 2px; font-weight: 900; }
.gz-mini-continue--red { color: #DC2626; }

/* Daily Daub mini card theme */
.gz-mini--daub { border-left: none; background: linear-gradient(180deg, #C71585, #9c27b0, #E91E8C) left/4px 100% no-repeat, #fdf2f8; }
.gz-mini-cat--daub { background: linear-gradient(135deg, #C71585, #9c27b0); color: #fff; padding: 2px 6px; border-radius: 2px; font-weight: 900; }
.gz-mini-continue--daub { color: #C71585; }

/* Lotto Starting Next full-width row */
.gz-hub-next-row {
  max-width: 800px;
  margin: 1rem auto;
  text-align: center;
}
.gz-hub-next-grid { display:grid; grid-template-columns:1fr; gap:0.6rem; margin-top:0.5rem; }
@media(min-width:520px){ .gz-hub-next-grid { grid-template-columns:repeat(2,1fr); } }

/* Bet on the Darts promo box */
.gz-darts-bet-box {
  background: linear-gradient(135deg, #0a0a12 0%, #0f1a0f 50%, #0a0f1a 100%);
  border: 2px solid #16A34A;
  border-radius: 10px;
  padding: 0;
  margin: 1rem 0;
  overflow: hidden;
}
.gz-darts-bet-inner {
  padding: 1.2rem 1rem 1rem;
  text-align: center;
}
.gz-darts-bet-viz {
  width: 60px;
  height: 60px;
  margin: 0.5rem auto 0.8rem;
}
.gz-darts-bet-viz svg { width: 100%; height: 100%; }
.gz-darts-bet-title {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.4rem;
}
.gz-darts-bet-desc {
  font-family: var(--font-sans, system-ui);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin: 0 0 0.8rem;
}
.gz-darts-bet-cta {
  display: inline-block;
  font-family: var(--font-sans, system-ui);
  font-size: 13px;
  font-weight: 700;
  color: #0a0a12;
  background: linear-gradient(135deg, #16A34A, #00BCD4);
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.15s;
}
.gz-darts-bet-cta:hover { opacity: 0.85; }
.gz-darts-bet-18 {
  font-size: 10px;
  color: #666;
  margin: 0.6rem 0 0;
  line-height: 1.4;
}

/* Full-width infoboxes — always visible */
.gz-brand-infoboxes--fullwidth {
  display: block !important;
  width: 100%;
  margin: 1rem 0;
  padding: 0 0.5rem;
}
@media (min-width: 768px) {
  .gz-brand-infoboxes--fullwidth { padding: 0 1rem; }
}
/* Hide the old desktop-only version */
.gz-brand-infoboxes--desktop { display: none !important; }

/* Offer card — fun magazine style with bingo balls */
.gz-coupon-card {
  border: 2px dashed #C71585;
  overflow: hidden;
  margin: 1rem 0;
  background: #fff;
  position: relative;
}
/* Floating bingo balls */
.gz-coupon-ball {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.gz-coupon-ball--1 { width: 48px; height: 48px; top: -10px;  left: -10px;  opacity: 0.38; animation: gz-drift1 36s ease-in-out infinite; }
.gz-coupon-ball--2 { width: 28px; height: 28px; top: -5px;   right: -5px;  opacity: 0.3;  animation: gz-drift2 28s ease-in-out infinite; }
.gz-coupon-ball--3 { width: 20px; height: 20px; bottom: -5px; left: 10%;    opacity: 0.25; animation: gz-drift3 45s ease-in-out infinite; }
.gz-coupon-ball--4 { width: 38px; height: 38px; bottom: -8px; right: -5px;  opacity: 0.34; animation: gz-drift4 33s ease-in-out infinite; }
.gz-coupon-ball--5 { width: 16px; height: 16px; top: 20%;    left: 45%;    opacity: 0.22; animation: gz-drift5 24s ease-in-out infinite; }
.gz-coupon-ball--6 { width: 32px; height: 32px; top: 50%;    left: -8px;   opacity: 0.3;  animation: gz-drift6 40s ease-in-out infinite; }
.gz-coupon-ball--7 { width: 22px; height: 22px; top: 35%;    right: 5%;    opacity: 0.26; animation: gz-drift7 30s ease-in-out infinite; }
@keyframes gz-drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  12%  { transform: translate(60px, 30px) scale(0.95); }
  25%  { transform: translate(140px, 120px) scale(1.06); }
  37%  { transform: translate(200px, 100px) scale(0.92); }
  50%  { transform: translate(180px, 220px) scale(1.04); }
  62%  { transform: translate(100px, 280px) scale(0.9); }
  75%  { transform: translate(30px, 200px) scale(1.08); }
  87%  { transform: translate(10px, 100px) scale(0.96); }
}
@keyframes gz-drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  12%  { transform: translate(-50px, 60px) scale(1.08); }
  25%  { transform: translate(-140px, 40px) scale(0.92); }
  37%  { transform: translate(-180px, 140px) scale(1.05); }
  50%  { transform: translate(-100px, 260px) scale(0.88); }
  62%  { transform: translate(-30px, 200px) scale(1.1); }
  75%  { transform: translate(-120px, 300px) scale(0.94); }
  87%  { transform: translate(-60px, 160px) scale(1.02); }
}
@keyframes gz-drift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  14%  { transform: translate(40px, -50px) scale(1.12); }
  28%  { transform: translate(120px, -30px) scale(0.88); }
  42%  { transform: translate(180px, -140px) scale(1.06); }
  57%  { transform: translate(140px, -220px) scale(0.9); }
  71%  { transform: translate(60px, -180px) scale(1.1); }
  85%  { transform: translate(20px, -80px) scale(0.94); }
}
@keyframes gz-drift4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  12%  { transform: translate(-40px, -50px) scale(1.04); }
  25%  { transform: translate(-130px, -30px) scale(0.92); }
  37%  { transform: translate(-160px, -140px) scale(1.08); }
  50%  { transform: translate(-80px, -250px) scale(0.9); }
  62%  { transform: translate(-20px, -180px) scale(1.06); }
  75%  { transform: translate(-120px, -100px) scale(0.94); }
  87%  { transform: translate(-60px, -40px) scale(1.02); }
}
@keyframes gz-drift5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  16%  { transform: translate(-50px, 60px) scale(1.15); }
  33%  { transform: translate(-80px, 140px) scale(0.85); }
  50%  { transform: translate(10px, 100px) scale(1.1); }
  66%  { transform: translate(60px, -30px) scale(0.88); }
  83%  { transform: translate(20px, -70px) scale(1.06); }
}
@keyframes gz-drift6 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  12%  { transform: translate(60px, -30px) scale(1.06); }
  25%  { transform: translate(150px, 20px) scale(0.92); }
  37%  { transform: translate(200px, -50px) scale(1.04); }
  50%  { transform: translate(160px, 60px) scale(0.9); }
  62%  { transform: translate(80px, -30px) scale(1.08); }
  75%  { transform: translate(140px, -100px) scale(0.94); }
  87%  { transform: translate(60px, -20px) scale(1.02); }
}
@keyframes gz-drift7 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  14%  { transform: translate(-40px, 50px) scale(1.1); }
  28%  { transform: translate(-100px, 30px) scale(0.9); }
  42%  { transform: translate(-60px, 120px) scale(1.08); }
  57%  { transform: translate(20px, 80px) scale(0.86); }
  71%  { transform: translate(50px, -20px) scale(1.12); }
  85%  { transform: translate(-10px, -50px) scale(0.95); }
}
.gz-coupon-card__scissors {
  position: absolute;
  font-size: 24px;
  color: #C71585;
  z-index: 10;
  line-height: 1;
  display: block;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
  offset-path: inset(0);
  offset-distance: 0%;
  offset-rotate: auto 90deg;
  animation: gz-scissors-cut 16s linear infinite;
}
@keyframes gz-scissors-cut {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}
/* Fallback for browsers without offset-path */
@supports not (offset-path: inset(0)) {
  .gz-coupon-card__scissors {
    top: -14px;
    left: 30px;
    animation: gz-scissors-fallback 8s ease-in-out infinite;
  }
  @keyframes gz-scissors-fallback {
    0%, 100% { left: 10px; top: -14px; transform: rotate(0deg); }
    25% { left: calc(100% - 30px); top: -14px; transform: rotate(0deg); }
    26% { transform: rotate(90deg); }
    50% { left: calc(100% - 30px); top: calc(100% - 14px); transform: rotate(90deg); }
    51% { transform: rotate(180deg); }
    75% { left: 10px; top: calc(100% - 14px); transform: rotate(180deg); }
    76% { transform: rotate(270deg); }
  }
}
.gz-coupon-card__scissors { display: none; }
.gz-coupon-card__new-badge { display: none; }
.gz-coupon-card__new-inline { display: none; }
.gz-coupon-card__new-body {
  display: inline-block;
  font-family: var(--font-sans, system-ui);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(135deg, #C71585, #E91E63);
  padding: 3px 10px;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.12);
}
.gz-coupon-card__name { display: none; }
.gz-coupon-card__body {
  padding: 1.2rem 1rem 0.8rem;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.gz-coupon-card__header {
  background: linear-gradient(135deg, #1a0a1f 0%, #3d1a2e 100%);
  padding: 0.65rem 0.8rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.15rem;
}
.gz-coupon-card__heading {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 17px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .gz-coupon-card__heading { font-size: 19px; }
}
.gz-coupon-card__body {
  padding: 1.2rem 1rem 0.8rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
.gz-coupon-card__logo-wrap {
  width: 72px;
  height: 72px;
  margin: 0 auto 0.6rem;
  border-radius: 50%;
  border: 3px solid #C71585;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 4px 14px rgba(199,21,133,0.2);
}
.gz-coupon-card__logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
.gz-coupon-card__name {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 13px;
  font-weight: 700;
  color: #666;
  margin-bottom: 0.2rem;
}
.gz-coupon-card__offer {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 22px;
  font-weight: 900;
  color: #C71585;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  padding: 0.3rem 0 0.5rem;
}
.gz-coupon-card__strap {
  font-family: var(--font-sans, system-ui);
  font-size: 15px;
  font-weight: 600;
  color: #2d2040;
  line-height: 1.5;
  margin: 0 0.5rem 0.6rem;
  padding: 0;
  text-align: center;
}
@media (min-width: 768px) {
  .gz-coupon-card__offer { font-size: 25px; padding: 0.4rem 0 0.6rem; }
  .gz-coupon-card__strap { font-size: 15.5px; margin: 0 0.75rem 0.75rem; }
}
.gz-coupon-card__perks {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0.85rem;
  font-family: var(--font-sans, system-ui);
}
.gz-coupon-card__perk {
  font-size: 12px;
  font-weight: 700;
  color: #C71585;
  background: rgba(199,21,133,0.06);
  padding: 3px 7px;
  border: 1px solid rgba(199,21,133,0.2);
  border-radius: 2px;
}
.gz-coupon-card__cta {
  display: block;
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #C71585, #9c27b0);
  padding: 0.8rem 1.2rem;
  margin-top: 0.25rem;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.03em;
  transition: opacity 0.15s;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  animation: gz-cta-shake 3s ease-in-out infinite;
}
.gz-coupon-card__cta:hover { opacity: 0.85; animation: none; }
@keyframes gz-cta-shake {
  0%, 85%, 100% { transform: translateX(0); }
  88% { transform: translateX(-2px) rotate(-0.5deg); }
  91% { transform: translateX(2px) rotate(0.5deg); }
  94% { transform: translateX(-1px) rotate(-0.3deg); }
  97% { transform: translateX(1px) rotate(0.3deg); }
}
.gz-coupon-card__tear {
  height: 0;
  border: none;
  position: relative;
  margin: 0.6rem 0 0;
  overflow: visible;
  display: block;
  z-index: 1;
}
.gz-coupon-card__tear::before {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  background: radial-gradient(circle 5px at 5px 0, transparent 4.5px, #C71585 4.5px, #C71585 5.5px, transparent 5.5px) repeat-x;
  background-size: 10px 10px;
}
.gz-coupon-card__tcs-wrap {
  background: #fdf2f8;
  padding: 0.55rem 0.9rem 0.6rem;
  position: relative;
  z-index: 1;
}
.gz-coupon-card__tcs-wrap::before {
  content: '▼ scroll for T&Cs';
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: #C71585;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  animation: gz-bounce-hint 2s ease-in-out infinite;
}
@keyframes gz-bounce-hint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}
.gz-coupon-card__tcs {
  font-family: var(--font-sans, system-ui);
  font-size: 12.5px;
  color: #777;
  line-height: 1.55;
  margin: 0;
  max-height: 95px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.gz-coupon-card__tcs::-webkit-scrollbar { width: 3px; }
.gz-coupon-card__tcs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
a.gz-coupon-card__tcs--link { display: block; text-decoration: none; color: #777; cursor: pointer; }
a.gz-coupon-card__tcs--link:hover { color: #C71585; }

/* Dauble in ticker */
.mag-ticker__item--dauble a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.mag-ticker__dauble-logo {
  height: 26px;
  width: auto;
  max-width: 72px;
  vertical-align: middle;
  object-fit: contain;
  flex-shrink: 0;
}

/* Dauble logo in ticker label */
.mag-ticker__label-logo {
  height: 16px;
  width: auto;
  display: block;
}

/* Dauble/Lotto rotating cube above ticker */
/* ═══════════════════════════════════════════════════════════════
   Ticker cube — floating rotating promo above the ticker bar.
   Black square-ish tab in the corner. Slightly bigger than the
   original for readability, sits with a small gap above the ticker.
   ═══════════════════════════════════════════════════════════════ */
.gz-ticker-promo {
  position: fixed;
  left: 0;
  bottom: 44px;             /* sits directly on top of the 44px ticker (JS also sets this) */
  z-index: 1001;
  height: var(--cube-h, 52px);
  overflow: hidden;
  display: none;
}
@media (min-width: 768px) {
  .gz-ticker-promo { --cube-h: 54px; }
  .gz-ticker-cube__face {
    height: 54px !important;
    padding: 0.7rem 1.5rem !important;
  }
  .gz-ticker-promo__logo { height: 26px !important; }
  .gz-ticker-promo__text { font-size: 15px !important; }
}
.gz-ticker-cube {
  display: flex;
  flex-direction: column;
  animation: gz-cube-flip 20s cubic-bezier(0.4, 0, 0.2, 1) 0.5s infinite;
}
.gz-ticker-cube__face {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #1a1a2e;
  padding: 0.65rem 1.3rem;
  text-decoration: none;
  border-radius: 0 8px 0 0;
  height: 52px;
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap;
}
.gz-ticker-cube__face--bookmark {
  cursor: pointer;
}
@keyframes gz-cube-flip {
  0%, 20%   { transform: translateY(0); }
  25%, 45%  { transform: translateY(-52px); }
  50%, 70%  { transform: translateY(-104px); }
  75%, 95%  { transform: translateY(-156px); }
  100%      { transform: translateY(0); }
}
@media (min-width: 768px) {
  @keyframes gz-cube-flip {
    0%, 20%   { transform: translateY(0); }
    25%, 45%  { transform: translateY(-54px); }
    50%, 70%  { transform: translateY(-108px); }
    75%, 95%  { transform: translateY(-162px); }
    100%      { transform: translateY(0); }
  }
}
.gz-ticker-promo__logo {
  height: 24px;
  width: auto;
  flex-shrink: 0;
}
.gz-ticker-promo__text {
  font-family: var(--font-sans, system-ui);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  line-height: 1;
}


/* Full-width brand guide section */
.gz-brand-guide-fullwidth {
  width: 100%;
  padding: 0 0.5rem;
}
@media (min-width: 768px) {
  .gz-brand-guide-fullwidth { padding: 0 1rem; }
}
.gz-brand-similar-wrap--fullwidth {
  margin: 1rem 0;
}
.gz-brand-similar-list--wide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}
@media (min-width: 768px) {
  .gz-brand-similar-list--wide {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
  }
  .gz-brand-similar-list--wide .gz-room-mini {
    padding: 0.7rem 0.8rem;
    gap: 0.65rem;
  }
  .gz-brand-similar-list--wide .gz-room-mini__logo {
    width: 52px;
    height: 52px;
  }
  .gz-brand-similar-list--wide .gz-room-mini__name {
    font-size: 14px;
  }
  .gz-brand-similar-list--wide .gz-room-mini__placeholder {
    font-size: 18px;
  }
  .gz-brand-similar-list--wide .gz-room-mini__balls {
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* Full-width pros/cons grid */
.gz-proscons-grid--wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .gz-proscons-grid--wide { grid-template-columns: 1fr; }
}

/* Game cards injected inline into editorial text */
.gz-editorial-cards {
  margin: 1rem 0 1.2rem;
}

/* Similar sites "see more" link */
.gz-brand-similar-more {
  display: block;
  text-align: center;
  margin-top: 0.5rem;
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 12px;
  font-weight: 700;
  color: #C71585;
  text-decoration: none;
  padding: 0.5rem 0;
  border-top: 1px solid #eee;
  margin-top: 0.5rem;
}
.gz-brand-similar-more:hover { text-decoration: underline; }

/* Inline directory box in article */
.gz-brand-similar-wrap--inline {
  margin: 1.2rem 0;
  border: 2px solid #1a1a2e;
  padding: 0;
  overflow: hidden;
}
.gz-brand-similar-wrap--inline .gz-brand-similar-heading {
  background: #1a1a2e;
  padding: 0.5rem 0.8rem;
}
.gz-brand-similar-wrap--inline .gz-lotto-ops-wrap__heading-title {
  color: #fff;
}
.gz-brand-similar-wrap--inline .gz-brand-similar-list {
  padding: 0.6rem;
}

/* Sidebar RG note */
.gz-sidebar-rg-note {
  text-align: center;
  font-family: var(--font-sans, system-ui);
  font-size: 10px;
  color: #888;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid #eee;
  margin-top: 0.3rem;
  line-height: 1.5;
}
.gz-sidebar-rg-note a {
  color: #888;
  text-decoration: underline;
}

/* Sidebar similar brands RG footer — matches hub gz-sister-footer */
.gz-brand-similar-rg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #1a1a2e;
  padding: 0.6rem 0.8rem;
  text-align: center;
}
.gz-brand-similar-rg__text {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}
.gz-brand-similar-rg__link {
  font-size: 11px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

/* Compact room mini cards */
.gz-rooms-grid--compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.5rem;
}
.gz-room-mini {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  transition: border-color 0.15s;
}
.gz-room-mini:hover { border-color: #C71585; }
.gz-room-mini__band {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 6px 0 0 6px;
}
.gz-room-mini__logo {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin-left: 4px;
}
.gz-room-mini__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gz-room-mini__placeholder {
  font-size: 14px;
  font-weight: 800;
}
.gz-room-mini__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gz-room-mini__name {
  font-family: var(--font-sans, system-ui);
  font-size: 12px;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gz-room-mini__balls {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.3;
  width: fit-content;
}

/* Fresh from the Floor — news lady + write for us */
.gz-fresh-floor {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1rem 0;
}
.gz-fresh-floor__lady {
  width: 110px;
  height: auto;
  flex-shrink: 0;
  display: block;
}
.gz-fresh-floor__body {
  flex: 1;
  text-align: left;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.gz-fresh-floor__headline {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 0.4rem;
  padding: 0;
  line-height: 1.25;
}
.gz-fresh-floor__text {
  font-size: 14.5px;
  color: #555;
  line-height: 1.5;
  margin: 0 0 0.6rem;
  padding: 0;
}
.gz-fresh-floor__cta {
  display: inline-block;
  font-family: var(--font-sans, system-ui);
  font-size: 12px;
  font-weight: 700;
  color: #C71585;
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 21, 133, 0.3);
}
.gz-fresh-floor__cta:hover { border-bottom-color: #C71585; }
@media (max-width: 480px) {
  .gz-fresh-floor__lady { width: 70px; max-width: 70px; }
  .gz-fresh-floor__headline { font-size: 18px; }
  .gz-fresh-floor__text { font-size: 13px; }
}

/* Reviews section — match guide fullwidth margins */
.gz-reviews-section {
  width: 100%;
  padding: 0 0.5rem;
}
@media (min-width: 768px) {
  .gz-reviews-section { padding: 0 1rem; }
}
/* Rooms wrap — match guide fullwidth when inside it */
.gz-rooms-wrap {
  margin: 0;
  padding: 0;
}

/* Review form wrap margin */
.gz-review-form-wrap {
  margin: 1.5rem 0;
}

/* ── Listen to Article button ──────────────────────────────────────── */
.gz-listen-wrap {
  text-align: center;
  margin: 0 0 1.2rem;
}
.gz-listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #1a0a1f 0%, #2d1a3e 100%);
  color: #fff;
  border: 2px solid #C71585;
  border-radius: 24px;
  padding: 0.5rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}
.gz-listen-btn:hover {
  background: linear-gradient(135deg, #C71585, #9c27b0);
  border-color: #E91E8C;
  transform: scale(1.03);
}
.gz-listen-btn--playing {
  border-color: #E91E8C;
  background: linear-gradient(135deg, #C71585, #9c27b0);
}
.gz-listen-btn--paused {
  border-color: #ff9800;
}
.gz-listen-btn__icon {
  font-size: 14px;
  line-height: 1;
}
.gz-listen-btn__text {
  font-size: 12px;
}
@media (min-width: 768px) {
  .gz-listen-btn { font-size: 14px; padding: 0.55rem 1.4rem; }
  .gz-listen-btn__text { font-size: 13px; }
}



/* ── Mini listen button for quick guide ───────────────────────────── */
.gz-listen-btn--mini {
  font-size: 0.8rem;
  padding: 0.4rem 1rem;
  gap: 0.4rem;
}
.gz-listen-wrap--mini {
  margin: 0.5rem 0 1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   SISTER SITES — badges, UKGC family accordion & domain checker
   (moved out of sister-site.php inline <style> for reuse)
   ═══════════════════════════════════════════════════════════════════ */
  .gz-sis-badge{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.12rem .45rem;border-radius:999px;margin:0 0 .25rem;line-height:1.2;white-space:nowrap}
  .gz-sis-badge--sister{background:linear-gradient(90deg,#ec4899,#9c27b0);color:#fff}
  .gz-sis-badge--alt{background:rgba(156,39,176,.12);color:#9c27b0;border:1px solid rgba(156,39,176,.4)}
  .gz-ukgc-verified{display:inline-block;font-size:.68rem;font-weight:700;color:#16a34a;margin-left:.35rem;white-space:nowrap}
  .gz-qf-badge--wl{background:rgba(99,102,241,.12)!important;color:#6366f1!important;border-color:rgba(99,102,241,.4)!important}
  .gz-ukgc-family{margin:1.5rem 0;border-radius:10px;overflow:hidden;background:#fff;border:2px solid #e3d3df}
  .gz-ukgc-family__summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.95rem 1.15rem;font-family:var(--font-editorial,Georgia,serif);font-weight:800;font-size:16px;font-style:italic;color:#C71585;background:#faf6f9;user-select:none}
  .gz-ukgc-family__summary::-webkit-details-marker{display:none}
  .gz-ukgc-family__chev{transition:transform .25s ease;font-size:.8rem;color:#C71585}
  .gz-ukgc-family[open] .gz-ukgc-family__chev{transform:rotate(180deg)}
  .gz-ukgc-family[open] .gz-ukgc-family__summary{border-bottom:1px solid #efe2eb}
  .gz-ukgc-family__body{padding:1.1rem 1.15rem}
  .gz-ukgc-family__intro{font-family:var(--font-sans,system-ui);font-size:15px;color:#333;line-height:1.6;margin:0 0 .85rem}
  .gz-ukgc-family__src{display:block;margin-top:.5rem;font-size:13px;font-style:italic;color:#777}
  .gz-ukgc-family__src a{color:#C71585}
  .gz-ukgc-family__wl-note{display:block;margin-top:.5rem;font-size:15px;color:#444;line-height:1.55}
  .gz-ukgc-family__wl-note strong{color:#6366f1}
  .gz-ukgc-family__ukgc-note{display:block;margin-top:.5rem;font-size:15px;color:#444;line-height:1.55}
  .gz-ukgc-family__ukgc-note strong{color:#C71585}
  .gz-ukgc-family__warn{display:flex;gap:.6rem;align-items:flex-start;margin:1rem 0 0;padding:.85rem 1rem;background:var(--danger-bg,#ffebee);border:1px solid var(--danger,#c62828);border-radius:8px}
  .gz-ukgc-family__warn--standalone{margin:1.5rem auto;max-width:760px}
  .gz-ukgc-family__warn-icon{font-size:18px;line-height:1.3;color:var(--danger,#c62828);flex-shrink:0}
  .gz-ukgc-family__warn-text{font-family:var(--font-sans,system-ui);font-size:15px;color:#444;line-height:1.6;margin:0;min-width:0;overflow-wrap:break-word;word-wrap:break-word}
  .gz-ukgc-family__warn-text strong{color:var(--danger,#c62828)}
  .gz-ukgc-family__warn-head{display:block;margin-bottom:.35rem;font-size:16px}
  .gz-ukgc-family__warn-text a{color:var(--danger,#c62828);font-weight:700;text-decoration:underline}
  .gz-ukgc-family__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
  .gz-ukgc-family__list-head{font-family:var(--font-sans,system-ui);font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 .6rem}
  .gz-ukgc-family__item{display:flex;align-items:center;gap:.4rem;padding:.45rem .6rem;background:#faf6f9;border:1px solid #efe2eb;border-radius:5px}
  .gz-ukgc-family__details{margin:0 0 1rem;padding:.85rem 1rem;background:#faf6f9;border:1px solid #efe2eb;border-radius:8px;display:flex;flex-direction:column;gap:.55rem}
  .gz-ukgc-family__detail{display:flex;flex-direction:column;gap:.1rem}
  .gz-ukgc-family__detail dt{font-family:var(--font-sans,system-ui);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#9a8a93;margin:0}
  .gz-ukgc-family__detail dd{font-family:var(--font-sans,system-ui);font-size:15px;color:#1a1a1a;margin:0;line-height:1.45;word-break:break-word}
  .gz-ukgc-family__detail dd a{color:#C71585;text-decoration:none}
  .gz-ukgc-family__detail dd a:hover{text-decoration:underline}
  .gz-ukgc-family__link{color:#C71585;text-decoration:none;font-family:var(--font-sans,system-ui);font-size:13px;font-weight:600;transition:color .15s}
  .gz-ukgc-family__link:hover{color:#9c27b0}
  .gz-ukgc-family__domain{font-family:var(--font-sans,system-ui);font-size:15px;font-weight:600;color:#222;-webkit-user-select:all;user-select:all;cursor:text;word-break:break-all}
  .gz-ukgc-family__ext{font-size:.7rem;opacity:.6}
  .gz-ukgc-family__tag{font-size:9px;font-weight:700;text-transform:uppercase;padding:.12rem .4rem;border-radius:999px;white-space:nowrap;margin-left:auto}
  .gz-ukgc-family__tag--wl{background:rgba(99,102,241,.12);color:#6366f1;border:1px solid rgba(99,102,241,.4)}
  .gz-ukgc-family__tag--owner{background:rgba(199,21,133,.12);color:#C71585;border:1px solid rgba(199,21,133,.4)}
  .gz-ukgc-family__owner-group{margin-top:1rem;padding-top:.85rem;border-top:1px dashed rgba(199,21,133,.3)}
  .gz-ukgc-family__intro--owner{font-size:13px;line-height:1.6;margin:0 0 .5rem}
  .gz-ukgc-family__intro--owner .gz-ukgc-family__tag--owner{margin-right:.4rem;vertical-align:middle}
  .gz-ukgc-family__note{font-family:var(--font-sans,system-ui);font-size:13px;color:#666;line-height:1.6;margin:.9rem 0 0;padding-top:.7rem;border-top:1px solid #efe2eb}
  .gz-ukgc-family__note a{color:#C71585}
  /* Domain checker — dark mag-promo-box, hazard-red theme.
     Red border + hazard-tape stripes on top and bottom edges give it a
     "safety zone" feel without being visually aggressive on the sides.
     Shield SVG stays pink→purple; 18+ badge stays pink — those are
     separate elements. */
  .gz-domchk-box.mag-promo-box{
    border:3px solid #c62828;
    padding:1.5rem 1rem 1.6rem;
    position:relative;
    overflow:hidden;
    background:
      /* Red glow at top-centre (was purple) */
      radial-gradient(circle at 50% 20%, rgba(198,40,40,.28) 0%, rgba(198,40,40,0) 55%),
      /* Base dark diagonal from .mag-promo-box */
      linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  }
  .gz-domchk-box--spaced{margin-top:1.75rem;margin-bottom:1.75rem}
  /* Hazard-tape stripe — TOP edge, left to right */
  .gz-domchk-box.mag-promo-box::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:10px;
    background:repeating-linear-gradient(135deg,
      #c62828 0 10px,
      #1a1a1a 10px 20px);
    z-index:0;
    pointer-events:none;
  }
  /* Hazard-tape stripe — BOTTOM edge, left to right (mirrored angle) */
  .gz-domchk-box.mag-promo-box::after{
    content:'';
    position:absolute;
    bottom:0;left:0;right:0;
    height:10px;
    background:repeating-linear-gradient(-135deg,
      #c62828 0 10px,
      #1a1a1a 10px 20px);
    z-index:0;
    pointer-events:none;
  }
  .gz-domchk-inner{position:relative;z-index:1;text-align:center}
  .gz-domchk-viz{display:flex;justify-content:center;margin:.4rem 0 .4rem}
  .gz-domchk-viz svg{width:46px;height:46px;filter:drop-shadow(0 3px 6px rgba(233,30,140,.4))}
  .gz-domchk-head{font-family:var(--font-editorial,Georgia,serif);font-size:20px;font-weight:900;font-style:italic;color:#fff;margin:.3rem 0 .4rem;line-height:1.1;text-shadow:0 2px 4px rgba(0,0,0,.3)}
  .gz-domchk-lead{font-family:var(--font-sans,system-ui);font-size:13px;color:#d8d3c8;line-height:1.5;margin:0 auto .9rem;max-width:240px}
  .gz-domchk-row{display:flex;flex-direction:column;gap:.45rem;max-width:260px;margin:0 auto}
  .gz-domchk-input{width:100%;padding:.6rem .75rem;border:2px solid rgba(255,255,255,.25);border-radius:4px;font-size:16px;font-family:var(--font-sans,system-ui);color:#1a1a1a;background:#fff;box-sizing:border-box}
  .gz-domchk-input::placeholder{color:#999;font-style:italic}
  .gz-domchk-input:focus{outline:none;border-color:#c62828;box-shadow:0 0 0 3px rgba(198,40,40,.25)}
  .gz-domchk-btn{width:100%;padding:.6rem 1.1rem;border:2px solid #c62828;border-radius:3px;background:linear-gradient(180deg,#e53935 0%,#c62828 100%);color:#fff;font-family:var(--font-editorial,Georgia,serif);font-weight:800;font-style:italic;font-size:14.5px;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);transition:background .15s,transform .15s,box-shadow .15s;letter-spacing:.02em}
  .gz-domchk-btn:hover{background:linear-gradient(180deg,#ef5350 0%,#d32f2f 100%);border-color:#d32f2f;transform:translateY(-1px);box-shadow:0 4px 10px rgba(198,40,40,.4),inset 0 1px 0 rgba(255,255,255,.2)}
  .gz-domchk-btn:disabled{opacity:.55;cursor:wait;transform:none}
  .gz-domchk-foot{font-family:var(--font-sans,system-ui);font-size:12px;color:#fff;line-height:1.5;margin:.85rem 0 0;display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap}
  /* CTA inside the scam-check box, under the 18+ footer. Styled as a full
     red button matching the homepage scam-checker palette so it reads as a
     proper safety CTA. Sits as a sibling to the pink Check Domain button. */
  .gz-domchk-more{display:block;margin:.75rem 0 0;padding:.6rem 1.1rem;
    border:2px solid #DC2626;border-radius:3px;
    background:#DC2626;color:#fff;
    font-family:var(--font-editorial,Georgia,serif);font-weight:800;font-style:italic;font-size:14.5px;
    text-align:center;text-decoration:none;letter-spacing:.02em;
    box-shadow:0 2px 4px rgba(0,0,0,.3);
    transition:background .15s,border-color .15s,transform .15s}
  .gz-domchk-more span{margin-left:.35rem;transition:transform .15s;display:inline-block}
  .gz-domchk-more:hover,.gz-domchk-more:focus-visible{background:#B91C1C;border-color:#B91C1C;transform:translateY(-1px)}
  .gz-domchk-more:hover span,.gz-domchk-more:focus-visible span{transform:translateX(2px)}
  @media (max-width: 640px) {
    .gz-domchk-more { display: none; }
  }

  /* Per-brand "Flag a Fake" block — sits below the UKGC-date line on
     brand pages. Full vertical stack: mini hazard divider + centred
     text + full-width red button + optional Jump-to-Rogues link.
     Reads clearly on mobile because each item has its own line. */
  .gz-domchk-flag-block{
    margin-top:1.8rem;
    padding-top:1.1rem;
    border-top:2px solid #c62828;
  }
  .gz-domchk-flag-bar{
    position:relative;
    height:6px;
    background:repeating-linear-gradient(90deg,
      #c62828 0 12px,
      #1a1a1a 12px 24px);
    margin:0 0 .95rem;
    border-radius:2px;
  }
  .gz-domchk-flag-bar__pill{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    background:#fff;
    padding:2px 10px;
    color:#c62828;
    font-family: var(--font-sans);
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
    border-radius:3px;
    border:1.5px solid #c62828;
    white-space:nowrap;
    line-height:1;
  }
  .gz-domchk-flag-text{
    text-align:center;
    margin:0 0 .7rem;
    font-family: var(--font-sans);
    font-size:13px;
    font-weight:500;
    color:#e8e0d5;
    line-height:1.4;
  }
  .gz-domchk-flag-text b{color:#fff;font-weight:800}
  .gz-domchk-flag-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    width:100%;
    padding:.72rem 1.2rem;
    background:linear-gradient(180deg,#e53935 0%,#c62828 100%);
    color:#fff;
    border:2px solid #c62828;
    border-radius:5px;
    font-family:var(--font-editorial,Georgia,serif);
    font-size:15px;
    font-weight:800;
    font-style:italic;
    letter-spacing:.02em;
    cursor:pointer;
    box-shadow:
      0 2px 6px rgba(198,40,40,.35),
      inset 0 1px 0 rgba(255,255,255,.15);
    transition:background .15s, transform .1s, box-shadow .15s;
  }
  .gz-domchk-flag-btn__arrow{
    display:inline-block;
    transition:transform .15s;
  }
  .gz-domchk-flag-btn:hover,
  .gz-domchk-flag-btn:focus-visible{
    background:linear-gradient(180deg,#ef5350 0%,#d32f2f 100%);
    border-color:#d32f2f;
    transform:translateY(-1px);
    box-shadow:
      0 4px 10px rgba(198,40,40,.45),
      inset 0 1px 0 rgba(255,255,255,.2);
    outline:none;
  }
  .gz-domchk-flag-btn:hover .gz-domchk-flag-btn__arrow,
  .gz-domchk-flag-btn:focus-visible .gz-domchk-flag-btn__arrow{
    transform:translateX(3px);
  }
  .gz-domchk-jump-rogues{
    display:block;
    text-align:center;
    margin-top:.7rem;
    padding:.3rem;
    color:#ffbaba;
    font-family: var(--font-sans);
    font-size:11.5px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
    text-decoration:none;
    transition:color .15s;
  }
  .gz-domchk-jump-rogues:hover,
  .gz-domchk-jump-rogues:focus-visible{
    color:#fff;
    text-decoration:underline;
    outline:none;
  }

  /* Domain checker — result modal (popup, avoids mobile layout shift) */
  .gz-domchk-modal[hidden]{display:none}
  .gz-domchk-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem}
  .gz-domchk-modal__overlay{position:absolute;inset:0;background:rgba(10,6,12,.72);backdrop-filter:blur(2px);animation:gzDomFade .2s ease}
  .gz-domchk-modal__panel{position:relative;z-index:1;width:100%;max-width:380px;background:#160f1a;border:3px solid #9c27b0;border-radius:12px;padding:1.6rem 1.4rem 1.3rem;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.5);animation:gzDomPop .22s cubic-bezier(.2,.8,.3,1.2)}
  .gz-domchk-modal--ok .gz-domchk-modal__panel{border-color:#16a34a}
  .gz-domchk-modal--sister .gz-domchk-modal__panel{border-color:#9c27b0}
  .gz-domchk-modal--warn .gz-domchk-modal__panel{border-color:#dc2626}
  .gz-domchk-modal__close{position:absolute;top:.5rem;right:.7rem;background:none;border:none;color:rgba(255,255,255,.55);font-size:1.6rem;line-height:1;cursor:pointer;padding:.2rem;transition:color .15s}
  .gz-domchk-modal__close:hover{color:#fff}
  .gz-domchk-modal__viz{width:64px;height:64px;margin:0 auto .7rem}
  .gz-domchk-modal__viz svg{width:100%;height:100%;display:block}
  .gz-domchk-modal__title{font-family:var(--font-editorial,Georgia,serif);font-size:21px;font-weight:900;font-style:italic;color:#fff;margin:0 0 .6rem;line-height:1.15}
  .gz-domchk-modal__body{font-family:var(--font-sans,system-ui);font-size:14px;color:rgba(255,255,255,.85);line-height:1.55}
  .gz-domchk-modal__body p{margin:0 0 .6rem}
  .gz-domchk-modal__body strong{color:#fff;font-weight:800}
  .gz-domchk-modal__review{margin-top:.8rem!important}
  .gz-domchk-modal__review a{color:#f5a6d6;font-weight:800;text-decoration:underline}
  .gz-domchk-modal--ok .gz-domchk-modal__review a{color:#86efac}
  .gz-domchk-modal__licence{margin:.9rem 0 .25rem!important;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.15);font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.7)}
  .gz-domchk-modal__licence strong{color:#fff;letter-spacing:0}
  .gz-domchk-modal__verify{margin:0 0 .2rem!important}
  .gz-domchk-modal__verify a{color:#f5a6d6;font-weight:700;text-decoration:underline;font-size:13.5px}
  .gz-domchk-modal--ok .gz-domchk-modal__verify a{color:#86efac}
  .gz-domchk-modal__again{margin-top:1rem;width:100%;padding:.65rem 1.1rem;border:2px solid #C71585;border-radius:4px;background:#C71585;color:#fff;font-family:var(--font-editorial,Georgia,serif);font-weight:800;font-style:italic;font-size:14.5px;cursor:pointer;transition:background .15s}
  .gz-domchk-modal__again:hover{background:#e0309c;border-color:#e0309c}
  /* Related verified domains inside the scam-check result modal */
  .gz-domchk-fam{margin:.9rem 0 .25rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.15);text-align:left}
  .gz-domchk-fam__head{margin:0 0 .45rem!important;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;color:rgba(255,255,255,.7)}
  .gz-domchk-fam__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;max-height:30vh;overflow-y:auto}
  .gz-domchk-fam__list li{font-size:13px;color:#fff;display:flex;align-items:center;gap:.4rem}
  .gz-domchk-fam__tag{font-size:9px;font-weight:700;text-transform:uppercase;padding:.1rem .35rem;border-radius:999px;background:rgba(245,166,214,.18);color:#f5a6d6;white-space:nowrap}
  .gz-domchk-modal--ok .gz-domchk-modal__again{background:#16a34a;border-color:#16a34a}
  .gz-domchk-modal--ok .gz-domchk-modal__again:hover{background:#1fc959;border-color:#1fc959}
  .gz-domchk-modal--warn .gz-domchk-modal__again{background:#dc2626;border-color:#dc2626}
  .gz-domchk-modal--warn .gz-domchk-modal__again:hover{background:#ef4444;border-color:#ef4444}
  .gz-domchk-modal__foot{font-family:var(--font-sans,system-ui);font-size:11px;color:rgba(255,255,255,.5);line-height:1.5;margin:.9rem 0 0;display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap}
  @keyframes gzDomFade{from{opacity:0}to{opacity:1}}
  @keyframes gzDomPop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}

  /* Enhanced modal fields — added when the API returns richer data (address,
     licence number, sibling domains under the same licence, regulatory
     action count against the operator). All left-aligned, tucked under a
     thin divider so they sit as reference material below the main answer. */
  .gz-domchk-modal__lic-num{margin:.7rem 0 .3rem!important;font-size:12px;color:rgba(255,255,255,.7);letter-spacing:.02em;text-align:left}
  .gz-domchk-modal__lic-num code{background:rgba(255,255,255,.08);padding:.1rem .35rem;border-radius:3px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#f5a6d6}
  .gz-domchk-modal__addr{margin:.5rem 0 .3rem!important;font-size:12.5px;color:rgba(255,255,255,.75);line-height:1.5;text-align:left}
  .gz-domchk-modal__addr-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.55);margin-bottom:.15rem}
  .gz-domchk-modal__sibs{margin:.9rem 0 .3rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.15);text-align:left}
  .gz-domchk-modal__sibs-label{display:block;margin:0 0 .45rem;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.7);font-weight:700}
  .gz-domchk-modal__sibs-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;max-height:26vh;overflow-y:auto}
  .gz-domchk-modal__sibs-list li{margin:0}
  .gz-domchk-modal__sibs-list code{display:inline-block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:.18rem .5rem;border-radius:3px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#fff}
  .gz-domchk-modal__reg{margin:.9rem 0 .3rem!important;padding:.7rem .8rem;background:rgba(220,38,38,.12);border:1px solid rgba(220,38,38,.4);border-radius:6px;text-align:left;display:flex;flex-direction:column;gap:.35rem}
  .gz-domchk-modal__reg-badge{display:inline-block;font-size:12px;font-weight:800;color:#fca5a5;text-transform:uppercase;letter-spacing:.03em}
  .gz-domchk-modal__reg-note{font-size:12px;color:rgba(255,255,255,.75);line-height:1.5}

  /* Sister box — "Want the original?" snake header (inside featured list) */
  /* Sister vs Similar badge — centered above the brand logo */
  .gz-lotto-op-card:has(.gz-sim-badge){flex-wrap:wrap;justify-content:center}
  .gz-sim-badge{flex-basis:100%;text-align:center;margin:0 0 .55rem;font-family:var(--font-sans,system-ui);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;line-height:1;white-space:nowrap}
  .gz-sim-badge__inner{display:inline-block;padding:.22rem .5rem;border-radius:4px}
  .gz-sim-badge--sister .gz-sim-badge__inner{background:linear-gradient(135deg,#C71585,#9c27b0);color:#fff}
  .gz-sim-badge--similar .gz-sim-badge__inner{background:#f0e4ed;color:#9c4b86}
  .gz-original-box{margin-top:1.25rem}
  .mag-picks-box .gz-sister-original-head,.gz-sister-original-head{display:block;font-family:var(--font-editorial,Georgia,serif);font-size:18px;font-style:italic;font-weight:800;text-align:center;margin:1.1rem 0 1rem;padding:.4rem .5rem .6rem;line-height:1.5;background:linear-gradient(90deg,#C71585,#9c27b0,#E91E8C,#6366f1,#C71585);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gzOrigShimmer 4s linear infinite}
  @keyframes gzOrigShimmer{0%{background-position:0% center}100%{background-position:200% center}}

  /* Full sister family logo grid — under the comparison table */
  .gz-sister-family-grid-wrap{margin:2rem 0 1rem;text-align:center;scroll-margin-top:80px}
  #sister-part-2{scroll-margin-top:80px}
  #sister-part-3{scroll-margin-top:80px}
  /* Choose-another-sister-guide — reuses the lotto .gz-lgt-rc-more dropdown.
     Always visible (the base variants are display:none until media queries) and
     themed pink. Real crawlable <a> links inside a scrollable list. */
  .gz-lgt-rc-more--sister{display:block;margin:0 0 1.25rem;--gz-game-color:#C71585}
  .gz-lgt-rc-more--sister .gz-lgt-rc-more__link{border-left-color:#C71585}
  .gz-lgt-rc-more--sister .gz-lgt-rc-more__link:hover{background:rgba(199,21,133,0.06);color:#C71585}
  .gz-lgt-rc-more--sister .gz-lgt-rc-more__dot{background:#C71585}
  /* Jump-to-part-3 + listen button row (after Part 1) */
  .gz-jump-listen-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem;margin:1.25rem 0}
  .gz-jump-listen-row .gz-listen-wrap{margin:0}
  .gz-sister-family-grid-wrap__head{font-family:var(--font-editorial,Georgia,serif);font-size:22px;font-style:italic;font-weight:800;color:#C71585;margin:0 0 .4rem;line-height:1.2}
  .gz-sister-family-grid-wrap .gz-lotto-offers-grid{margin-top:1rem}

/* ════════════════════════════════════════════════════════════════════
   SISTER HUB — shared components (guide cards, Did You Know, hub TTS)
   Moved out of inline styles so they're reusable across pages.
   ════════════════════════════════════════════════════════════════════ */

/* ── Sister-guide content cards ─────────────────────────────────────── */
.gz-guide-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem;margin:1.25rem 0}
.gz-guide-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #e6d3df;border-radius:4px;padding:1.4rem 1.15rem 1.1rem 1.5rem;text-decoration:none;transition:transform .18s ease,border-color .18s ease;overflow:hidden}
/* Accent bar down the LEFT side, using the Glitzy signature gradient */
.gz-guide-card::before{content:"";position:absolute;top:0;bottom:0;left:0;width:6px;background:linear-gradient(180deg,#F43F5E,#9c27b0,#00BCD4,#65A30D,#7C3AED,#0EA5E9)}
.gz-guide-card:hover{transform:translateY(-4px);border-color:#C71585}
.gz-guide-card__tag{align-self:flex-start;background:linear-gradient(135deg,#C71585,#9c27b0,#E91E8C);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;margin-bottom:.9rem}
.gz-guide-card__logo-wrap{display:flex;align-items:center;justify-content:center;height:70px;background:#faf3f8;border-radius:3px;margin-bottom:.9rem}
.gz-guide-card__logo{max-width:82%;max-height:56px;object-fit:contain}
.gz-guide-card__logo-ph{font-size:32px;font-weight:800;color:#C71585}
.gz-guide-card__title{font-family:var(--font-editorial,Georgia,serif);font-size:19px;font-weight:800;color:#1a1a1a;line-height:1.25;margin:0 0 .35rem}
.gz-guide-card__op{font-size:11.5px;font-weight:700;color:#C71585;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.3px}
.gz-guide-card__meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .7rem}
.gz-guide-card__pill{font-size:11px;font-weight:800;padding:.22rem .55rem;border-radius:999px;letter-spacing:.2px;white-space:nowrap}
.gz-guide-card__pill--lic{background:#faf3f8;color:#9c27b0;border:1px solid #ecd4e6}
.gz-guide-card__pill--sis{background:linear-gradient(135deg,#C71585,#9c27b0,#E91E8C);color:#fff}
.gz-guide-card__teaser{font-size:13.5px;line-height:1.5;color:#555;margin:0 0 1rem;flex-grow:1}
.gz-guide-card__cta{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:800;color:#C71585;border-top:1px solid #f3e2ee;padding-top:.75rem}
.gz-guide-card__arrow{transition:transform .18s ease}
.gz-guide-card:hover .gz-guide-card__arrow{transform:translateX(5px)}

/* ── "Did You Know?" rotating fact box (sidebar) ────────────────────── */
.gz-dyk-box.mag-promo-box{background:linear-gradient(135deg,#2a0e3f 0%,#3d1259 100%)!important;border:3px solid #9c27b0!important;border-radius:0!important;padding:1.3rem 1.1rem!important;margin:1.5rem 0!important;text-align:center!important;box-shadow:0 4px 14px rgba(0,0,0,.25)!important}
.gz-dyk-box .gz-dyk-box__head{display:flex!important;align-items:center;justify-content:center;gap:.5rem;margin:0 0 .9rem!important;padding:0!important}
.gz-dyk-box .gz-dyk-box__spark{color:#ff6ec7;font-size:14px;line-height:1}
.gz-dyk-box .gz-dyk-box__title{font-family:var(--font-editorial,Georgia,serif);font-weight:800;font-style:italic;font-size:20px;color:#fff;letter-spacing:.3px;margin:0!important;padding:0!important;line-height:1.2;display:inline-block}
/* Fixed-height wrapper prevents layout shift (CLS) as facts rotate */
.gz-dyk-box .gz-dyk-box__factwrap{min-height:7.5em;display:flex;align-items:center;justify-content:center;margin:0 0 .9rem!important;padding:0!important}
.gz-dyk-box .gz-dyk-box__fact{color:#fff!important;font-size:16px;line-height:1.5;margin:0!important;padding:0!important;font-style:italic;transition:opacity .25s}
.gz-dyk-box .gz-dyk-box__tag{color:#ffb3e6!important;font-size:12px;font-weight:600;margin:0!important;border-top:1px solid rgba(255,110,199,.3);padding:.75rem 0 0!important;line-height:1.4}
/* Mobile: narrower column wraps facts to more lines — reserve more height
   so the box never grows/shrinks as facts rotate (no CLS on phones). */
@media (max-width:767px){
  .gz-dyk-box .gz-dyk-box__factwrap{min-height:13em}
}

/* ── Hub TTS generate box (admin-only) ──────────────────────────────── */
.gz-hub-tts{margin:.75rem 0;padding:.7rem .9rem;border:1px dashed #C71585;border-radius:10px;background:rgba(199,21,133,.04)}
.gz-hub-tts-btn{background:#C71585;color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;font-weight:800;cursor:pointer;font-size:13px}
.gz-hub-tts-status{margin-left:.6rem;font-size:12px;color:#666}
.gz-guide-card--empty{font-style:italic;color:#888}

/* ── Desktop readability fixes (scam-check lead + Did You Know text) ─── */
@media (min-width:768px){
  /* Scam-check intro line was cramped at 13px / 240px on desktop */
  .gz-domchk-lead{font-size:15px;max-width:300px;line-height:1.55}
  /* Did You Know fact text was small on desktop */
  .gz-dyk-box .gz-dyk-box__fact{font-size:17px;line-height:1.55}
  .gz-dyk-box .gz-dyk-box__title{font-size:20px}
  .gz-dyk-box .gz-dyk-box__tag{font-size:13px}
}

/* ════════════════════════════════════════════════════════════════════
   BINGO DIRECTORY — category filter dropdown (client-side)
   ════════════════════════════════════════════════════════════════════ */
.gz-dir-filter{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center;margin:0 0 1.75rem}
.gz-dir-filter__label{font-family:var(--font-sans,system-ui);font-size:14px;font-weight:800;color:#C71585;letter-spacing:.3px;text-transform:uppercase}
.gz-dir-filter__selectwrap{position:relative;display:inline-flex;align-items:center}
.gz-dir-filter__select{appearance:none;-webkit-appearance:none;-moz-appearance:none;font-family:var(--font-sans,system-ui);font-size:15px;font-weight:700;color:#1a1a1a;background:#fff;border:2px solid #C71585;border-radius:999px;padding:.55rem 2.6rem .55rem 1.2rem;cursor:pointer;min-width:190px;box-shadow:0 2px 8px rgba(199,21,133,.12);transition:border-color .15s ease,box-shadow .15s ease}
.gz-dir-filter__select:hover{border-color:#9c27b0}
.gz-dir-filter__select:focus{outline:none;border-color:#9c27b0;box-shadow:0 0 0 3px rgba(156,39,176,.18)}
.gz-dir-filter__chevron{position:absolute;right:1rem;pointer-events:none;color:#C71585;font-size:14px;line-height:1}
.gz-dir-filter__count{font-family:var(--font-sans,system-ui);font-size:13px;font-weight:600;color:#8a8a8a;font-style:italic}
@media (max-width:640px){
  .gz-dir-filter{gap:.5rem}
  .gz-dir-filter__select{min-width:0;flex:1}
}

/* Taller DYK variant — brand-history facts run longer than the sister-hub
   facts, so the fact area needs a FIXED height to stop layout shift (CLS).
   min-height alone isn't enough: a fact longer than the floor still grows the
   box. A hard height sized to the longest trimmed fact keeps it rock steady
   through rotation — zero CLS, no ranking hit from Core Web Vitals. All
   facts have been shortened to under ~150 chars specifically to fit this
   height without needing overflow. If you ever add a longer fact, either
   trim it or bump the heights here to match. */
.gz-dyk-box.gz-dyk-box--tall .gz-dyk-box__factwrap{min-height:0;height:13em;overflow:hidden}
@media (max-width:767px){
  .gz-dyk-box.gz-dyk-box--tall .gz-dyk-box__factwrap{height:17em}
}

/* ════════════════════════════════════════════════════════════════════
   THE VAULT — retro wood-panel CRT TV archive (/vault/)
   ════════════════════════════════════════════════════════════════════ */
.gz-vault__inner{max-width:1180px;margin:0 auto;padding:0 1rem}

/* Dark purple + dark cyan gradient text for the cover title accent — matches
   the vault's cyan-on-black mascot palette. */
.gz-vault__title-metal{background:linear-gradient(135deg,#8F2E08 0%,#C1440E 40%,#E8751A 70%,#F59E0B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Inline text accent (used in mascot subtitle "classic bingo adverts" etc.).
   Same gradient as the title-metal but bold, for phrase-level highlighting. */
.gz-vault__accent{background:linear-gradient(135deg,#8F2E08 0%,#C1440E 40%,#E8751A 70%,#F59E0B 100%);
  -webkit-background-clip:text;background-clip:text;color:#C1440E;-webkit-text-fill-color:transparent;
  font-weight:700}

/* Vault tag chip — dark purple to dark cyan, white text stays readable. */
.gz-vault__tag{color:#fff !important;
  background:linear-gradient(135deg,#8F2E08 0%,#C1440E 50%,#E8751A 100%) !important;}

/* Main area: TV + cinema sidebar */
.gz-vault__layout{display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start;max-width:1080px;margin:2rem auto 0}
.gz-vault__sidebar{position:sticky;top:1rem}

@media (max-width:900px){
  .gz-vault__layout{grid-template-columns:1fr}
  .gz-vault__sidebar{position:static}
}

.gz-vault__wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem 1.8rem;align-items:start}

/* ── The TV set ── */
.gz-tv{margin:0}
.gz-tv__set{
  position:relative;border-radius:18px;padding:16px 16px 0;
  background:linear-gradient(160deg,#6e4a2b 0%,#5a3a20 45%,#4a2f19 100%);
  box-shadow:inset 0 2px 4px rgba(255,220,170,.25),inset 0 -6px 14px rgba(0,0,0,.5),0 12px 26px rgba(0,0,0,.55);
  border:1px solid #3a2513;
}
/* wood grain */
.gz-tv__set::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:repeating-linear-gradient(92deg,rgba(0,0,0,.06) 0 2px,rgba(255,220,180,.04) 2px 5px,rgba(0,0,0,.05) 5px 8px);
  mix-blend-mode:overlay;opacity:.7}

.gz-tv__screen{
  position:relative;aspect-ratio:4/3;border-radius:26px/34px;overflow:hidden;
  background:#0a0d0a;border:6px solid #14100c;
  box-shadow:inset 0 0 30px rgba(0,0,0,.9),inset 0 0 0 2px #2a2620;
}
.gz-tv__standby{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#000;overflow:hidden}
.gz-tv__still{width:100%;height:100%;object-fit:cover;filter:sepia(.35) saturate(.85) contrast(1.05) brightness(.82);transition:filter .3s}
.gz-tv:hover .gz-tv__still{filter:sepia(.15) saturate(1) contrast(1.08) brightness(.95)}

/* CRT scanlines */
.gz-tv__scanlines{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px);
  mix-blend-mode:multiply;opacity:.7}
/* curved-glass glare */
.gz-tv__glare{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 30% 12%,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),
             radial-gradient(140% 120% at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%)}
/* standby red power light */
.gz-tv__power{position:absolute;right:10px;bottom:9px;width:7px;height:7px;border-radius:50%;
  background:#ff3b30;box-shadow:0 0 7px 2px rgba(255,59,48,.75);animation:gzTvPulse 2.4s ease-in-out infinite}
@keyframes gzTvPulse{0%,100%{opacity:.55}50%{opacity:1}}
/* play triangle */
.gz-tv__playicon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;line-height:58px;text-align:center;border-radius:50%;
  background:rgba(20,16,12,.6);color:#f5e6c8;font-size:22px;padding-left:4px;
  border:2px solid rgba(245,230,200,.7);transition:transform .2s,background .2s;backdrop-filter:blur(2px)}
.gz-tv__standby:hover .gz-tv__playicon{transform:translate(-50%,-50%) scale(1.12);background:rgba(233,30,140,.75)}

/* switch-on flash */
.gz-tv--on .gz-tv__screen::after{content:"";position:absolute;inset:0;z-index:5;background:#fff;
  animation:gzTvSwitchOn .38s ease-out forwards;pointer-events:none}
@keyframes gzTvSwitchOn{
  0%{opacity:0;transform:scaleY(.004) scaleX(1)}
  10%{opacity:1;transform:scaleY(.006) scaleX(1)}
  45%{opacity:.9;transform:scaleY(1) scaleX(1)}
  100%{opacity:0;transform:scaleY(1) scaleX(1)}
}

/* the live embed — sits above the scanlines/glare overlays */
.gz-tv__video{position:absolute;inset:0;z-index:6;background:#000}
.gz-tv__video iframe{width:100%;height:100%;border:0;display:block;position:relative;z-index:2}
/* fallback link shows behind the iframe; if the iframe is blank (blocked
   embed) the user still sees this and can click through to YouTube */
.gz-tv__fallback{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.3rem;text-decoration:none;
  background:radial-gradient(circle at 50% 40%,#1a1a1a,#000);color:#f5e6c8;text-align:center;padding:1rem}
.gz-tv__fallback span{font-size:15px;font-weight:700;color:#ffcf6b}
.gz-tv__fallback small{font-size:11px;color:#9a8568}

/* control panel */
.gz-tv__panel{display:flex;align-items:center;gap:12px;padding:12px 6px 16px}
.gz-tv__channel{font-family:"Courier New",monospace;font-weight:700;font-size:13px;color:#ffcf6b;
  background:#1c1712;border:1px solid #000;border-radius:3px;padding:3px 8px;letter-spacing:1px;
  box-shadow:inset 0 0 6px rgba(255,180,60,.25)}
.gz-tv__dial{width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d9c4a0,#7a5836 70%,#4a3520);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.5),0 2px 3px rgba(0,0,0,.5);position:relative}
.gz-tv__dial::after{content:"";position:absolute;top:4px;left:50%;width:2px;height:8px;background:#2a1c10;transform:translateX(-50%);border-radius:2px}
.gz-tv__dial--2::after{transform:translateX(-50%) rotate(60deg);transform-origin:bottom}
.gz-tv__speaker{flex:1;height:26px;border-radius:4px;margin-left:4px;
  background:repeating-linear-gradient(90deg,#3a2716 0 2px,#241a10 2px 5px);
  box-shadow:inset 0 0 4px rgba(0,0,0,.6);opacity:.8}

.gz-tv__caption{text-align:center;margin:.7rem 0 0}
.gz-tv__brand{display:block;font-family:var(--font-display,Georgia,serif);font-size:17px;color:#f5e6c8;font-weight:700}
.gz-tv__year{display:block;font-size:12.5px;color:#b89b72;letter-spacing:.4px;margin-top:2px;text-transform:uppercase}

.gz-vault__foot{text-align:center;color:#7a6b6f;font-size:12px;line-height:1.6;margin:1.4rem auto 0;max-width:640px}

@media (max-width:640px){
  .gz-vault__wall{grid-template-columns:1fr;gap:1.6rem}
  .gz-tv__set{max-width:400px;margin:0 auto}
}

/* ════════════════════════════════════════════════════════════════════
   THE VAULT — single TV set, flick through channels
   ════════════════════════════════════════════════════════════════════ */
.gz-tvbig{max-width:720px;margin:1.5rem auto 0}

/* ── Snake box that frames the TV (like the sites list on the bingo hub) ── */
.gz-vault__broadcast-label{display:block;text-align:center;margin:0 auto .5rem}
.gz-vault__snakebox{position:relative;width:100%;max-width:860px;margin:1.5rem auto 0;padding:4px;border-radius:16px;
  --gz-angle:0deg;animation:gz-spin 5s linear infinite;
  background:conic-gradient(from var(--gz-angle),#c084fc 0deg,#7c3aed 70deg,#9c27b0 140deg,#6a1b9a 210deg,#a855f7 280deg,#c084fc 360deg)}
.gz-vault__snakebox-inner{position:relative;background:#150a24;border-radius:13px;padding:16px 16px 6px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.5)}
.gz-vault__snakebox-label{position:absolute;top:-11px;left:50%;transform:translateX(-50%);z-index:2;  font-family:"Courier New",monospace;font-weight:700;font-size:11px;letter-spacing:2px;color:#fff;
  background:linear-gradient(135deg,#9c27b0,#7c3aed);padding:3px 14px;border-radius:20px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(124,58,237,.5)}
.gz-tvbig__set{
  position:relative;border-radius:14px;padding:30px 22px 18px;
  box-shadow:
    0 20px 40px rgba(20,25,35,.5),
    0 4px 8px rgba(0,0,0,.35);
}
/* Inline SVG chassis fills the shell, painting all the plastic — layered
   gradients, top vent slats, border stroke. Stretches to fit whatever the
   set's actual pixel size is via preserveAspectRatio="none". Clipped to
   the border-radius so corners stay crisp. */
.gz-tvbig__chassis{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  border-radius:14px;overflow:hidden;
}
/* Everything else in the set sits above the SVG chassis. */
.gz-tvbig__set > .gz-tvbig__screen,
.gz-tvbig__set > .gz-tvbig__slot,
.gz-tvbig__set > .gz-tvbig__controls,
.gz-tvbig__set > .gz-tvbig__logo{position:relative;z-index:1}

/* Glitzy Vision brand mark on the silver plastic below the controls —
   sits on the chassis like a real TV maker's badge. Cinzel serif with a
   two-tone text-shadow (dark above + light below) gives the letters an
   embossed-into-plastic look. */
.gz-tvbig__logo{
  text-align:center;
  margin-top:.7rem;
  font-family:var(--font-dauble,Georgia,serif);
  font-weight:800;
  font-size:14px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#5a5f66;
  text-shadow:
    0 -1px 0 rgba(40,45,52,.55),
    0 1px 0 rgba(255,255,255,.75);
  pointer-events:none;
  user-select:none;
}
/* rabbit-ear antenna sitting on top of the set */
.gz-tvbig__antenna{position:relative;height:74px;margin:0 auto -6px;width:120px;z-index:1}
.gz-tvbig__antenna-base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:46px;height:16px;border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,#4a4d52 0%,#2a2c30 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15)}
.gz-tvbig__antenna-rod{position:absolute;left:50%;bottom:12px;width:3px;height:66px;transform-origin:bottom center;border-radius:3px;
  background:linear-gradient(90deg,#8a8e95,#d8dce0 45%,#6a6e75);
  box-shadow:0 1px 2px rgba(0,0,0,.35)}
.gz-tvbig__antenna-rod::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#eef1f4,#9a9ea5)}
.gz-tvbig__antenna-rod--l{transform:translateX(-50%) rotate(-32deg)}
.gz-tvbig__antenna-rod--r{transform:translateX(-50%) rotate(32deg)}

/* The plastic sheen and vent grille are drawn inside the SVG chassis
   (.gz-tvbig__chassis) as vector gradient layers and rectangles. */

/* Vintage CRT — symmetric rounded corners for a clean tube shape, with a
   thick black inner rim so the picture reads as glass set into a moulded
   black bezel (which is what real CRTs looked like inside the silver body). */
.gz-tvbig__screen{position:relative;aspect-ratio:4/3;
  border-radius:26px;overflow:hidden;
  background:#0a0d0a;
  border:5px solid #0a0b0d;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.85),
    inset 0 0 12px rgba(0,0,0,.75),
    inset 0 0 0 3px #1a1c20,
    0 0 0 3px #7a7e85,
    0 0 0 4px #050608,
    0 5px 10px rgba(0,0,0,.45)}

.gz-tvbig__stage{position:absolute;inset:0;background:#000;
  border-radius:21px;overflow:hidden;
  clip-path:inset(0 round 21px)}
.gz-tvbig__still{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.05) brightness(.9)}
.gz-tvbig__scanlines{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:multiply;opacity:.85;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 1px,rgba(0,0,0,.35) 1px 2px,rgba(0,0,0,0) 2px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.14) 2px 3px);
  animation:gzTvRoll 8s linear infinite}
/* faint horizontal roll-bar drifting down the screen, like a tube TV */
.gz-tvbig__scanlines::after{content:"";position:absolute;left:0;right:0;height:22%;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.05) 50%,rgba(255,255,255,0));
  animation:gzTvBar 6s linear infinite;mix-blend-mode:screen}
@keyframes gzTvRoll{0%{background-position:0 0,0 0}100%{background-position:0 3px,0 0}}
@keyframes gzTvBar{0%{top:-25%}100%{top:100%}}
.gz-tvbig__glare{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 80% at 30% 12%,rgba(255,255,255,.15),rgba(255,255,255,0) 55%),
             radial-gradient(140% 120% at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%)}
.gz-tvbig__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:74px;height:74px;border-radius:50%;border:2px solid rgba(245,230,200,.75);
  background:rgba(20,16,12,.55);color:#f5e6c8;cursor:pointer;backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.gz-tvbig__play span{font-size:28px;margin-left:4px}
.gz-tvbig__play:hover{transform:translate(-50%,-50%) scale(1.1);background:rgba(233,30,140,.75)}

/* video fills the screen; nothing sits over it */
/* transparent blocker over the video — swallows taps so YouTube's pause/play
   icon never appears. Above the video (z-index 6), below OSD/sound prompt. */
.gz-tvbig__tapblock{position:absolute;inset:0;z-index:7;background:transparent;
  pointer-events:auto;cursor:default;-webkit-tap-highlight-color:transparent}

.gz-tvbig__video{position:absolute;inset:0;z-index:6;background:#000;
  border-radius:21px;overflow:hidden;
  clip-path:inset(0 round 21px)}
.gz-tvbig__video iframe{width:100%;height:100%;border:0;display:block;
  border-radius:21px;
  clip-path:inset(0 round 21px);
  /* YouTube's pause/share/title UI is triggered by pointer events on the
     iframe (hover, tap). Blocking pointer-events here stops any of those
     controls from ever appearing. The .gz-tvbig__tapblock overlay above
     still catches clicks for the sound-prompt and other interactions. */
  pointer-events:none}

/* CRT overlay ABOVE the video (z-index 8) — pointer-events:none lets clicks
   reach the player. This is a visual layer over the footage; it does NOT
   filter the video pixels (impossible on a cross-origin YouTube iframe). */
.gz-tvbig__crt{position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 1px,rgba(0,0,0,.28) 1px 2px,rgba(0,0,0,0) 2px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.10) 2px 3px),
    radial-gradient(120% 80% at 30% 12%,rgba(255,255,255,.10),rgba(255,255,255,0) 55%),
    radial-gradient(140% 130% at 50% 50%,rgba(0,0,0,0) 52%,rgba(0,0,0,.5) 100%);
  mix-blend-mode:multiply;opacity:.42;transition:opacity .3s}
/* a hair lighter while playing so the advert stays watchable */
.gz-tvbig__crt::after{content:"";position:absolute;left:0;right:0;height:20%;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.04) 50%,rgba(255,255,255,0));
  animation:gzTvBar 7s linear infinite;mix-blend-mode:screen}
/* discreet "watch on YouTube" link — only useful if a video is embed-blocked.
   Sits at the bottom edge, out of the way, never covers a playing video. */
.gz-tvbig__fallback{position:absolute;left:0;right:0;bottom:0;z-index:7;text-align:center;
  padding:.4rem;font-size:11px;color:#ffcf6b;text-decoration:none;
  background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,0));opacity:0;transition:opacity .2s}
.gz-tvbig__screen:hover .gz-tvbig__fallback{opacity:.9}

/* ── Channel-change: dotted TV static/snow burst ── */
.gz-tvbig__static{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;
  background-color:#7a7a7a;
  background-image:
    repeating-radial-gradient(rgba(255,255,255,.9) 0 1px,rgba(0,0,0,0) 1px 2px),
    repeating-radial-gradient(rgba(0,0,0,.9) 0 1px,rgba(255,255,255,0) 1px 2px);
  background-size:3px 3px,4px 4px;background-position:0 0,1px 2px}
.gz-tvbig--changing .gz-tvbig__static,
.gz-tvbig--flick .gz-tvbig__static{animation:gzTvStatic .75s steps(1,end)}
@keyframes gzTvStatic{
  0%{opacity:0}
  6%{opacity:1;background-position:0 0,1px 2px}
  18%{opacity:1;background-position:2px 1px,0 3px}
  30%{opacity:1;background-position:1px 3px,2px 0}
  42%{opacity:1;background-position:3px 2px,1px 1px}
  54%{opacity:1;background-position:0 2px,3px 3px}
  66%{opacity:.95;background-position:2px 0,0 1px}
  78%{opacity:.8;background-position:1px 1px,2px 2px}
  90%{opacity:.4;background-position:0 3px,2px 1px}
  100%{opacity:0}
}
/* quick white sync-flash under the static for the "switch" pop */
.gz-tvbig--changing .gz-tvbig__stage::after,
.gz-tvbig--flick .gz-tvbig__stage::after{content:"";position:absolute;inset:0;z-index:9;background:#fff;
  animation:gzTvSwitchOn .3s ease-out;pointer-events:none}
.gz-tvbig__osd{position:absolute;top:14px;left:16px;z-index:7;display:flex;flex-direction:column;gap:2px;
  opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none;
  font-family:"Courier New",monospace;text-shadow:0 0 6px rgba(0,0,0,.9)}
.gz-tvbig__osd--show{opacity:1;transform:translateY(0)}
.gz-tvbig__osd-ch{color:#5eff8a;font-size:22px;font-weight:700;letter-spacing:1px}
.gz-tvbig__osd-name{color:#fff;font-size:13px;max-width:60%;line-height:1.2}

/* controls — styled like the black VHS deck in the hero image */
.gz-tvbig__controls{display:flex;align-items:center;justify-content:center;gap:.8rem;padding:10px 14px;margin:4px 0 0;
  background:linear-gradient(180deg,#1a1b1e 0%,#0e0f11 100%);
  border-radius:6px;
  border:1px solid #050608;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.35)}

/* red standby LED before the brandplate */
.gz-tvbig__brandplate{position:relative;font-family: var(--font-sans);font-size:12px;color:#c8ccd2;
  letter-spacing:2px;font-weight:700;padding-left:16px}
.gz-tvbig__brandplate::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ff6b6b,#e01414 70%,#8a0000);
  box-shadow:0 0 6px rgba(224,20,20,.85),0 0 12px rgba(224,20,20,.5)}
.gz-tvbig__channeler{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.gz-tvbig__chbtn{width:36px;height:36px;border-radius:7px;border:1px solid #000;cursor:pointer;font-size:13px;color:#d0d4da;
  background:linear-gradient(180deg,#3a3d42,#1c1e21);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 3px rgba(0,0,0,.5);transition:transform .1s}
.gz-tvbig__chbtn:active{transform:scale(.92)}
/* Seek buttons — slightly wider to fit the arrow + "5" number stacked as
   a mini icon-label pair. Same chrome as the other control buttons so the
   row reads as one consistent bank of switches. */
.gz-tvbig__seek{
  width:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:1px;
  font-family:"Courier New",monospace;font-weight:700;
  padding:0 4px;
}
.gz-tvbig__seek-icon{
  font-size:14px;line-height:1;color:#d0d4da;
}
.gz-tvbig__seek-num{
  font-size:10px;line-height:1;color:#4fd0ff;
  text-shadow:0 0 4px rgba(79,208,255,.4);
  margin-left:1px;
}
.gz-tvbig__chdisplay{min-width:56px;text-align:center;font-family:"Courier New",monospace;font-weight:700;
  font-size:20px;color:#4fd0ff;background:#05080a;border:1px solid #000;border-radius:4px;padding:4px 8px;
  box-shadow:inset 0 0 8px rgba(79,208,255,.5),0 0 0 1px #33363b}
.gz-tvbig__dials{display:flex;gap:10px}
.gz-tvbig__dial{width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#4a4d52,#2a2c30 60%,#141518);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.15),0 2px 3px rgba(0,0,0,.6);position:relative}
.gz-tvbig__dial::after{content:"";position:absolute;top:5px;left:50%;width:2px;height:8px;background:#c8ccd2;transform:translateX(-50%);border-radius:2px}

/* power ON control — a chunky dial sitting on the silver chassis next to
   the "Glitzy Vision" brand logo. Neon-red LED palette matching classic
   90s TVs (red = power light). Pulses red when OFF to invite attention,
   solid neon red when ON like a lit power LED. */
.gz-tvbig__power{
  position:absolute;bottom:8px;right:18px;z-index:3;
  display:flex;flex-direction:row;align-items:center;gap:8px;
  background:none;border:0;cursor:pointer;padding:4px 6px;
}
.gz-tvbig__power-dial{--dial-rot:0deg;width:32px;height:32px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 35% 30%,#5a5d63,#33353a 60%,#161719);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.15),0 2px 4px rgba(0,0,0,.6),
    0 0 0 0 rgba(255,51,72,0);
  display:flex;align-items:center;justify-content:center;
  transform:rotate(var(--dial-rot));
  transition:transform .28s cubic-bezier(.5,1.6,.6,1),box-shadow .3s ease}
.gz-tvbig__power-notch{width:3px;height:10px;background:#8a8d92;border-radius:2px;margin-top:-8px}
.gz-tvbig__power-label{font-family:"Courier New",monospace;font-weight:700;font-size:11px;letter-spacing:2px;
  color:rgba(210,110,120,.7);
  text-shadow:0 0 4px rgba(255,51,72,.25),0 0 1px rgba(0,0,0,.6)}
.gz-tvbig__power:hover .gz-tvbig__power-dial{transform:rotate(calc(var(--dial-rot) - 18deg))}
.gz-tvbig__power:active .gz-tvbig__power-dial{transform:rotate(calc(var(--dial-rot) + 20deg))}
/* Pulse the dial while the set is OFF so it invites attention. Two-tier
   red glow ring breathes in and out on a 2.2s loop. Only runs when the TV
   is off; the on-state override snaps it to a solid glow. */
.gz-tvbig__power-dial{
  animation:gzPowerPulse 2.2s ease-in-out infinite;
}
@keyframes gzPowerPulse{
  0%,100%{box-shadow:inset 0 1px 2px rgba(255,255,255,.15),0 2px 4px rgba(0,0,0,.6),
    0 0 0 2px rgba(255,51,72,.18),0 0 12px 4px rgba(255,51,72,.32)}
  50%{box-shadow:inset 0 1px 2px rgba(255,255,255,.15),0 2px 4px rgba(0,0,0,.6),
    0 0 0 4px rgba(255,51,72,.08),0 0 22px 8px rgba(255,51,72,.6)}
}
/* Once the set is on, the dial snaps to the ON position (notch right,
   90° clockwise), the pulse stops, and the label + notch light up like
   a real power LED — solid neon red glow. */
.gz-tvbig--on .gz-tvbig__power-dial{--dial-rot:90deg;animation:none;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.15),0 2px 4px rgba(0,0,0,.6),
    0 0 8px 2px rgba(255,51,72,.7),0 0 16px 4px rgba(255,51,72,.4)}
.gz-tvbig--on .gz-tvbig__power-notch{background:#ff3348;box-shadow:0 0 6px rgba(255,51,72,.9)}
.gz-tvbig--on .gz-tvbig__power-label{
  color:#ff3348;
  text-shadow:0 0 10px rgba(255,51,72,.85),0 0 3px rgba(255,51,72,.7),0 0 1px rgba(255,255,255,.6)
}
@media (prefers-reduced-motion:reduce){
  .gz-tvbig__power-dial{animation:none}
}

/* ── Cassette dock — the slot cut into the TV body, with a VHS tape sitting
   in it, emerging with its label facing forward showing what's playing.
   Replaces the plain slot line and the separate NOW SHOWING marquee. */
.gz-tvbig__slot{
  display:block;
  margin:12px 8% 2px;
  position:relative;
  padding-top:6px;
}
/* Top dark strip — the slot opening the tape is pushed into. Sits behind
   the tape body so the tape looks like it's emerging from the slot. */
.gz-tvbig__slot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:8px;
  background:#050608;
  border-radius:2px 2px 0 0;
  box-shadow:
    inset 0 3px 4px rgba(0,0,0,.9),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 1px 0 rgba(255,255,255,.4);
}
/* The VHS cassette itself — black plastic shell, emerging halfway from the
   slot. Top edge has an inset shadow so it reads as pushed into the slot. */
.gz-tvbig__vhs{
  position:relative;
  margin-top:2px;
  padding:5px 12px 6px;
  border-radius:2px 2px 4px 4px;
  background:linear-gradient(180deg,#1a1c20 0%,#0a0b0d 100%);
  box-shadow:
    inset 0 6px 8px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset -1px 0 0 rgba(255,255,255,.05),
    0 3px 6px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.2);
}
/* Cream ruled-paper label on the front of the cassette — same design as the
   .gz-vhs__label used on the sidebar tape shelf, sized bigger since this is
   the "hero" tape. */
.gz-tvbig__vhs-label{
  position:relative;
  padding:.35rem .7rem .4rem;
  padding-right:2.2rem;
  border-radius:2px;
  background:
    repeating-linear-gradient(180deg,transparent 0 11px,rgba(0,0,0,.10) 11px 12px),
    linear-gradient(180deg,#faf6e5 0%,#efe8cf 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.7);
  text-align:center;
}
/* Red felt-tip "Expired offer" scribble, sitting under the tape's year
   like a note dashed off by the video shop clerk when the promo dated
   out. Same handwritten font stack as the year so both look like the
   same marker. Slight opposite rotation gives it a distinct pen-stroke. */
.gz-tvbig__vhs-scrawl{
  display:block;
  margin-top:3px;
  transform:rotate(2deg);
  transform-origin:center;
  font-family:"Marker Felt","Bradley Hand","Segoe Script","Comic Sans MS",cursive;
  font-weight:700;
  font-size:11px;letter-spacing:.3px;
  color:#c72830;
  text-shadow:0 0 1px rgba(199,40,48,.4);
  pointer-events:none;
}
/* BBFC-style age classification sticker — the round red "18" badge that
   used to sit on rental VHS tapes at the video shop. */
.gz-tvbig__vhs-rating{
  position:absolute;
  top:50%;right:6px;
  transform:translateY(-50%) rotate(-4deg);
  width:26px;height:26px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d21414 0%,#a00d0d 90%);
  color:#fff;
  font-family:"Arial Black",Arial,Helvetica,sans-serif;
  font-weight:900;
  font-size:12px;
  letter-spacing:-.3px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 3px rgba(0,0,0,.45),
    inset 0 -1px 0 rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.2);
  text-shadow:0 -1px 0 rgba(0,0,0,.35);
  z-index:1;
}
.gz-tvbig__vhs-hdr{
  display:block;
  font-family: var(--font-sans);
  font-size:9px;letter-spacing:2.5px;font-weight:800;
  color:#4c1d95;
  text-transform:uppercase;
  margin-bottom:2px;
}
.gz-tvbig__vhs-name{
  display:block;
  font-family: var(--font-editorial);font-weight:800;
  font-size:clamp(14px,2.8vw,18px);
  color:#1a1a2e;
  line-height:1.15;letter-spacing:.5px;
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gz-tvbig__vhs-year{
  display:block;
  font-family:"Marker Felt","Bradley Hand","Segoe Script","Comic Sans MS",cursive;
  font-weight:700;
  font-size:15px;letter-spacing:.5px;
  color:#c72830;
  text-shadow:0 0 1px rgba(199,40,48,.35);
  transform:rotate(-2deg);
  transform-origin:left center;
  margin-top:1px;
  line-height:1;
}
.gz-tvbig__vhs-year:empty{display:none}

/* now showing + guide */
.gz-tvbig__nowshowing{text-align:center;margin:1rem 0 .3rem}
.gz-tvbig__ns-label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#9a7a55}
.gz-tvbig__ns-name{display:block;font-family: var(--font-editorial);font-size:19px;color:var(--pink-dark,#C71585);font-weight:700;margin-top:2px}

/* ── Cinema-style "What's On" sidebar box (late-70s / early-80s) ── */
/* ── What's On — built on the quick-facts box component, dark purple + cyan Vault theme ── */
.gz-whatson-wrap{border-color:#4c1d95 !important;box-shadow:0 4px 16px rgba(76,29,149,.18) !important;margin-top:1.5rem}
/* Dark purple → dark cyan heading bar (overrides the default green/pink gradient) */
.gz-whatson-wrap .gz-lgt-quick-facts__heading{background:linear-gradient(135deg,#1a0f2b 0%,#0e2a37 100%) !important}
/* Snake border variant for the heading label — rotating purple + dark cyan */
.gz-brand-snake--silver::before{background:conic-gradient(from var(--gz-angle,0deg),#8F2E08 0deg,#C1440E 60deg,#E8751A 120deg,#C1440E 180deg,#F59E0B 240deg,#E8751A 300deg,#8F2E08 360deg) !important}
/* each item is a VHS cassette on the shelf */
/* Back-to-Telly CTA sitting under the sidebar tape shelf. Gap above so
   it separates cleanly from the last cassette, centred within the wrap. */
.gz-vhs-jump{
  display:inline-flex;
  margin:1rem auto 0;
}
/* Mobile: hide — the sidebar collapses below the article and the TV is
   already directly above the tape shelf, so the jump link is redundant. */
@media (max-width: 640px) {
  .gz-vhs-jump { display: none; }
}
.gz-whatson-wrap .gz-vhs-jump{
  display:flex;justify-content:center;
}
.gz-whatson-wrap .gz-vhs-shelf{padding:.6rem;max-height:none;overflow-y:visible;
  scrollbar-width:thin;scrollbar-color:rgba(21,94,117,.45) transparent}
.gz-whatson-wrap .gz-vhs-shelf::-webkit-scrollbar{width:5px}
.gz-whatson-wrap .gz-vhs-shelf::-webkit-scrollbar-thumb{background:rgba(21,94,117,.45);border-radius:4px}
.gz-vhs{position:relative;display:block;width:100%;cursor:pointer;border:0;margin:0 0 10px;padding:0;
  text-align:left;background:transparent;transition:transform .12s;font-family:var(--font-editorial)}
.gz-vhs:last-child{margin-bottom:0}
.gz-vhs:hover{transform:translateX(4px)}
/* the cassette shell — long black plastic body */
.gz-vhs__body{position:relative;display:block;height:40px;padding:4px 8px 4px 10px;
  border-radius:4px;border:1px solid #0a0a0a;
  background:linear-gradient(180deg,#3a3d43 0%,#232529 45%,#141518 100%);
  box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 4px rgba(0,0,0,.5)}
/* ridged top edge of the shell */
.gz-vhs__body::before{content:"";position:absolute;left:10px;right:10px;top:2px;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 2px,transparent 2px 4px)}
/* bottom seam of the shell */
.gz-vhs__body::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:1px;
  background:rgba(255,255,255,.06)}
/* small notch on the left of the shell — the door/cutout on a real VHS
   (viewed from the spine, no reels are visible; just a dark slot) */
.gz-vhs__reelwin{position:absolute;left:10px;bottom:5px;width:16px;height:9px;
  background:#050506;border-radius:1px;
  box-shadow:inset 0 0 4px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.6),inset 1px 1px 0 rgba(255,255,255,.04)}
/* coloured tab on the label's left edge — plays the "VIDEO CASSETTE" role,
   houses the channel number vertically like the reference tape */
.gz-vhs__tab{position:absolute;left:32px;top:6px;bottom:6px;width:18px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#9c27b0 0%,#7c3aed 100%);
  border-radius:2px 0 0 2px;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.35)}
.gz-vhs__tab-ch{font-size:10px;font-weight:800;letter-spacing:1px;color:#fff;
  writing-mode:vertical-rl;transform:rotate(180deg);text-shadow:0 1px 1px rgba(0,0,0,.4)}
/* the cream paper label — takes up most of the shell, ruled like notebook paper */
.gz-vhs__label{position:absolute;left:50px;right:10px;top:6px;bottom:6px;
  background:
    repeating-linear-gradient(180deg,transparent 0 8px,rgba(0,0,0,.10) 8px 9px),
    linear-gradient(180deg,#faf6e5 0%,#efe8cf 100%);
  border-radius:0 2px 2px 0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.6);
  display:flex;align-items:center;padding:0 8px;overflow:hidden}
.gz-vhs__label-name{flex:1 1 auto;min-width:0;font-size:11px;font-weight:800;
  color:#1a1a2e;line-height:1.15;letter-spacing:.3px;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "PLAYING" flag — sits over the right end of the label when this tape is on air */
.gz-vhs__live{position:absolute;z-index:2;right:14px;top:50%;transform:translateY(-50%);display:none;
  font-size:9px;font-weight:800;letter-spacing:.5px;color:#fff;background:#e01414;border-radius:2px;padding:2px 5px;
  box-shadow:0 0 8px rgba(224,20,20,.7)}
/* playing tape — shell glows, label whitens, tab brightens, reel spins */
.gz-vhs.is-on .gz-vhs__body{box-shadow:0 0 0 2px #c084fc,0 4px 10px rgba(124,58,237,.5),inset 0 1px 0 rgba(255,255,255,.12)}
.gz-vhs.is-on .gz-vhs__label{background:
    repeating-linear-gradient(180deg,transparent 0 10px,rgba(124,58,237,.15) 10px 11px),
    linear-gradient(180deg,#fff 0%,#f5efff 100%)}
.gz-vhs.is-on .gz-vhs__label-name{color:#7c3aed}
.gz-vhs.is-on .gz-vhs__tab{background:linear-gradient(180deg,#c084fc 0%,#9c27b0 100%);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.25),0 0 8px rgba(192,132,252,.6)}
.gz-vhs.is-on .gz-vhs__live{display:inline-block;animation:gzVhsLive 1.2s ease-in-out infinite}
@keyframes gzVhsLive{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.gz-vhs.is-on .gz-vhs__live{animation:none}}
.gz-whatson-foot{text-align:center;font-family:var(--font-editorial);font-size:14px;color:#4a3560;
  padding:.85rem 1rem .95rem;border-top:1px solid #f0eaf7;font-weight:600;line-height:1.4}
.gz-whatson-foot strong{color:#7c3aed;font-weight:800}

/* Vault mascot — mobile only. Desktop uses the shared centered default (200px).
   Marked !important because .mag-greeting__mascot--bingo (mobile 130px) and
   .mag-greeting--centered .mag-greeting__mascot (mobile 170px) match at the
   same specificity and could win on source order shuffle. */
@media (max-width:640px){
  .mag-greeting--silver .mag-greeting__mascot{width:290px !important}
}

.gz-tvbig__guide{margin:2rem auto 0;max-width:1080px;background:#fff;border:1px solid rgba(139,92,246,.18);
  border-radius:12px;padding:1.4rem 1.5rem;box-shadow:0 2px 8px rgba(139,92,246,.06)}
.gz-tvbig__guide-label{display:block;font-family:var(--font-display,Georgia,serif);font-size:16px;letter-spacing:1px;
  text-transform:uppercase;color:var(--pink-dark,#C71585);margin-bottom:1.1rem;text-align:center;
  padding-bottom:.8rem;border-bottom:2px solid var(--pink-bg,#fdf4f7)}
/* multi-column magazine listings on desktop; scrolls if very tall */
.gz-tvbig__guide-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.6rem;
  max-height:600px;overflow-y:auto;padding-right:.3rem;scrollbar-width:thin;scrollbar-color:rgba(233,30,140,.4) transparent}
.gz-tvbig__guide-list::-webkit-scrollbar{width:7px}
.gz-tvbig__guide-list::-webkit-scrollbar-thumb{background:rgba(233,30,140,.4);border-radius:4px}

/* each listing row — magazine style, matches the site's directory rows */
.gz-tvbig__guide-tile{position:relative;display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1px solid rgba(139,92,246,.15);border-radius:10px;padding:.55rem .8rem .55rem 1rem;overflow:hidden;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.gz-tvbig__guide-tile::after{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#c71585 0%,#9333ea 50%,#7c3aed 100%);transition:width .18s}
.gz-tvbig__guide-tile:hover{border-color:rgba(139,92,246,.4);box-shadow:0 5px 16px rgba(139,92,246,.12);transform:translateY(-1px)}
.gz-tvbig__guide-tile:hover::after{width:6px}
/* channel number chip */
.gz-tvbig__tile-num{flex:none;font-family:"Courier New",monospace;font-weight:700;font-size:12px;
  color:#fff;background:linear-gradient(135deg,#e91e8c,#9333ea);border-radius:5px;padding:5px 9px;letter-spacing:.5px;min-width:52px;text-align:center}
/* thumbnail */
.gz-tvbig__tile-thumb{flex:none;width:76px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block;
  border:1px solid rgba(0,0,0,.08)}
/* name + year */
.gz-tvbig__tile-name{flex:1;min-width:0;font-size:14.5px;font-weight:700;color:#2a2233;line-height:1.3}
.gz-tvbig__tile-name em{display:block;font-style:normal;font-weight:400;font-size:12px;color:#8a7a9a;margin-top:2px}
/* now-on badge */
.gz-tvbig__tile-live{flex:none;display:none;font-size:10px;font-weight:700;letter-spacing:.5px;color:#fff;
  background:#e91e8c;border-radius:4px;padding:3px 8px;box-shadow:0 0 8px rgba(233,30,140,.5)}
/* currently-playing row */
.gz-tvbig__guide-tile.is-on{border-color:#e91e8c;background:var(--pink-bg,#fdf4f7);
  box-shadow:0 0 0 2px rgba(233,30,140,.35)}
.gz-tvbig__guide-tile.is-on::after{width:6px}
.gz-tvbig__guide-tile.is-on .gz-tvbig__tile-live{display:inline-block;animation:gzTileLive 1.4s ease-in-out infinite}
@keyframes gzTileLive{0%,100%{opacity:1}50%{opacity:.5}}

/* ── Sidebar (cinebox) version: compact EPG-style listing for the narrow column ── */
.gz-cinebox .gz-tvbig__guide-tile{gap:.55rem;padding:.4rem .5rem .4rem .7rem;border-radius:8px;
  border-color:rgba(124,58,237,.18)}
.gz-cinebox .gz-tvbig__guide-tile::after{background:linear-gradient(180deg,#c084fc 0%,#9333ea 50%,#7c3aed 100%)}
.gz-cinebox .gz-tvbig__guide-tile:hover{border-color:rgba(124,58,237,.45);box-shadow:0 3px 10px rgba(124,58,237,.14)}
.gz-cinebox .gz-tvbig__tile-num{font-size:11px;padding:4px 6px;min-width:42px;
  background:linear-gradient(135deg,#9333ea,#7c3aed)}
.gz-cinebox .gz-tvbig__tile-thumb{width:54px;border-radius:5px}
.gz-cinebox .gz-tvbig__tile-name{font-size:12.5px;line-height:1.25}
.gz-cinebox .gz-tvbig__tile-name em{font-size:10.5px;margin-top:1px}
.gz-cinebox .gz-tvbig__tile-live{font-size:8.5px;padding:2px 5px;background:#7c3aed;box-shadow:0 0 8px rgba(124,58,237,.6)}
.gz-cinebox .gz-tvbig__guide-tile.is-on{border-color:#7c3aed;background:#f6f0ff;box-shadow:0 0 0 2px rgba(124,58,237,.35)}

@media (max-width:560px){
  .gz-tvbig__guide{padding:1rem}
  .gz-tvbig__guide-list{grid-template-columns:1fr;max-height:70vh}
  .gz-tvbig__tile-thumb{width:60px}
  .gz-tvbig__tile-name{font-size:13.5px}
  .gz-tvbig__tile-num{min-width:44px;font-size:11px;padding:4px 6px}
}

@media (max-width:600px){
  .gz-tvbig__controls{flex-wrap:wrap;gap:.6rem}
  .gz-tvbig__brandplate{width:100%;text-align:center}
  .gz-tvbig__channeler{margin:0 auto}
}

/* ── Vault: "About these clips" accordion — same pattern as sister-page's
   .gz-ukgc-family, themed with vault dark purple + cyan accents. */
.gz-vault-notice{max-width:680px;margin:1.6rem auto 0;border-radius:10px;overflow:hidden;background:#fff;border:2px solid rgba(76,29,149,.28)}
.gz-vault-notice__summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.95rem 1.15rem;font-family:var(--font-editorial,Georgia,serif);font-weight:800;font-size:16px;font-style:italic;color:#C1440E;background:#fdf6f0;user-select:none}
.gz-vault-notice__summary::-webkit-details-marker{display:none}
.gz-vault-notice__chev{transition:transform .25s ease;font-size:.8rem;color:#E8751A}
.gz-vault-notice[open] .gz-vault-notice__chev{transform:rotate(180deg)}
.gz-vault-notice[open] .gz-vault-notice__summary{border-bottom:1px solid rgba(193,68,14,.18)}
.gz-vault-notice__body{padding:1.1rem 1.15rem;font-family:var(--font-sans,system-ui);font-size:14px;color:#333;line-height:1.65}
.gz-vault-notice__body p{margin:0 0 .75rem}
.gz-vault-notice__body p:last-child{margin-bottom:0}
.gz-vault-notice__body a{color:#C1440E;font-weight:600}

/* ── The Vault: green VHS-style warning screen (shows before each advert) ──
   Modelled on the look of old home-video warning cards: solid green field,
   centred white sans-serif caps. Our OWN wording — no FBI/copyright text. */
.gz-tvbig__cert{position:absolute;inset:0;z-index:9;background:#0a7d2c;color:#fff;overflow:hidden;cursor:pointer;
  font-family: var(--font-sans);animation:gzCertIn .4s ease-out}
.gz-tvbig__cert.is-going{animation:gzCertOut .26s ease-in forwards}
/* content rolls up from below the screen to above it — nothing clips, text is big */
.gz-tvbig__cert-roll{position:absolute;left:0;right:0;top:100%;padding:0 1.2rem;text-align:center;
  text-transform:uppercase;animation:gzCertRoll 9s linear forwards}
.gz-tvbig__cert-top{font-size:15px;letter-spacing:4px;color:#bff5cf;margin-bottom:1rem;line-height:1.5}
.gz-tvbig__cert-badge{width:120px;height:120px;margin:0 auto 1.1rem;border-radius:50%;
  border:5px solid #fff;display:flex;align-items:center;justify-content:center;background:transparent}
.gz-tvbig__cert-badge span{font-size:58px;font-weight:700;color:#fff;letter-spacing:1px;line-height:1}
.gz-tvbig__cert-line{font-size:19px;letter-spacing:1px;color:#fff;margin:0 auto 1.1rem;max-width:440px;line-height:1.5;font-weight:700}
.gz-tvbig__cert-note{font-size:15px;line-height:1.55;color:#eafff0;max-width:440px;margin:0 auto 1.1rem;letter-spacing:.5px}
.gz-tvbig__cert-foot{font-size:13px;letter-spacing:1px;color:#bff5cf;line-height:1.6}
@keyframes gzCertRoll{from{top:100%}to{top:-120%}}
@keyframes gzCertIn{from{opacity:0}to{opacity:1}}
@keyframes gzCertOut{from{opacity:1}to{opacity:0}}

/* Unauthorised host screen — replaces the TV stage contents when the JS
   detects it's running on a hostname not on the approved list. Loud red +
   cyan warning colour scheme so any stolen deployment shouts its own theft. */
.gz-tvbig__unauth{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;padding:1.5rem;text-align:center;
  background:radial-gradient(ellipse at center,#180a0e 0%,#05030a 100%);
  color:#fff;
}
.gz-tvbig__unauth::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(255,255,255,.04) 2px 3px);
}
.gz-tvbig__unauth-badge{
  font-family:"Courier New",monospace;font-weight:800;
  font-size:clamp(11px,1.6vw,14px);
  letter-spacing:3px;
  color:#ff5a6a;
  text-shadow:0 0 12px rgba(255,90,106,.7),0 0 3px rgba(255,90,106,.5);
  padding:.3rem .8rem;
  border:1.5px solid rgba(255,90,106,.6);
  border-radius:2px;
}
.gz-tvbig__unauth-title{
  font-family:"Courier New",monospace;font-weight:700;
  font-size:clamp(10px,1.3vw,12px);
  letter-spacing:2px;text-transform:uppercase;
  color:rgba(125,184,208,.85);
  margin-top:.4rem;
}
.gz-tvbig__unauth-brand{
  font-family:var(--font-dauble,Georgia,serif);font-weight:800;
  font-size:clamp(18px,3.6vw,28px);
  letter-spacing:3px;text-transform:uppercase;
  color:#4fd0ff;
  text-shadow:0 0 18px rgba(79,208,255,.65),0 0 4px rgba(79,208,255,.4);
  margin:.15rem 0 .5rem;
}
.gz-tvbig__unauth-line{
  font-family:"Courier New",monospace;font-weight:700;
  font-size:clamp(9px,1.1vw,11px);
  letter-spacing:2px;text-transform:uppercase;
  color:rgba(125,184,208,.7);
}
.gz-tvbig__unauth-link{
  font-family:"Courier New",monospace;font-weight:800;
  font-size:clamp(11px,1.5vw,14px);
  letter-spacing:1.5px;
  color:#4fd0ff;
  text-shadow:0 0 8px rgba(79,208,255,.55);
  text-decoration:underline;
  padding:.35rem .7rem;
  border-radius:2px;
  pointer-events:auto;
}
.gz-tvbig__unauth-link:hover{color:#7bdaff;text-shadow:0 0 14px rgba(79,208,255,.9)}

/* ── The Vault: cinema marquee "Now Showing" sign ── */
/* ── The Vault: power-off screen + turn-on sequence ── */
.gz-tvbig__off{position:absolute;inset:0;z-index:12;background:#000;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.gz-tvbig__off.is-going{animation:gzOffOut .4s ease-out forwards}
@keyframes gzOffOut{to{opacity:0;visibility:hidden}}

/* round ON dial */
.gz-tvbig__dialbtn{position:relative;z-index:2;background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:0}
.gz-tvbig__dialbtn-face{width:66px;height:66px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#e6d2ab,#9a7444 68%,#4a3520);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.5),inset 0 -3px 6px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;transition:transform .15s}
.gz-tvbig__dialbtn-notch{width:4px;height:20px;background:#2a1c10;border-radius:3px;margin-top:-14px;
  box-shadow:0 1px 0 rgba(255,255,255,.25)}
.gz-tvbig__dialbtn-label{font-family:"Courier New",monospace;font-weight:700;font-size:13px;letter-spacing:3px;
  color:#ffcf6b;text-shadow:0 0 8px rgba(255,180,60,.5)}
.gz-tvbig__dialbtn:hover .gz-tvbig__dialbtn-face{transform:rotate(-18deg) scale(1.05)}
.gz-tvbig__dialbtn:active .gz-tvbig__dialbtn-face{transform:rotate(20deg) scale(.97)}
/* faint pulsing glow so people know to click it */
.gz-tvbig__dialbtn::after{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:86px;height:86px;border-radius:50%;box-shadow:0 0 22px 6px rgba(255,190,70,.25);
  animation:gzDialPulse 2s ease-in-out infinite;pointer-events:none}
@keyframes gzDialPulse{0%,100%{opacity:.4}50%{opacity:.9}}

/* white power-on flash — the CRT "line that blooms" */
.gz-tvbig__off.is-flash{background:#000}
.gz-tvbig__off.is-flash .gz-tvbig__dialbtn{opacity:0}
.gz-tvbig__off.is-flash::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:#fff;
  transform:translateY(-50%);animation:gzPowerFlash .3s ease-out forwards;
  box-shadow:0 0 30px 10px rgba(255,255,255,.9)}
@keyframes gzPowerFlash{
  0%{transform:translateY(-50%) scaleY(1) scaleX(.1);opacity:1}
  30%{transform:translateY(-50%) scaleY(1) scaleX(1);opacity:1}
  60%{transform:translateY(-50%) scaleY(60) scaleX(1);opacity:.95;background:#fff}
  100%{transform:translateY(-50%) scaleY(140) scaleX(1);opacity:0}
}

/* CRT power-off collapse — inverse of gzPowerFlash. Full-screen white
   flash collapses vertically to a horizontal line, then horizontally to
   a bright point, then fades. Ends on the overlay's black background so
   the TV is definitively "off". */
.gz-tvbig__off.is-collapsing{background:#000}
.gz-tvbig__off.is-collapsing::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:#fff;
  transform:translateY(-50%);animation:gzPowerCollapse .55s ease-in forwards;
  box-shadow:0 0 30px 10px rgba(255,255,255,.9)}
@keyframes gzPowerCollapse{
  0%{transform:translateY(-50%) scaleY(140) scaleX(1);opacity:0}
  10%{transform:translateY(-50%) scaleY(140) scaleX(1);opacity:1}
  50%{transform:translateY(-50%) scaleY(60) scaleX(1);opacity:1;background:#fff}
  80%{transform:translateY(-50%) scaleY(1) scaleX(1);opacity:1}
  100%{transform:translateY(-50%) scaleY(1) scaleX(.02);opacity:0}
}

/* Test card / broadcast station-ident shown on the CRT while the TV is off.
   SMPTE-style vertical colour bars fill the screen, with a central black
   station-ident card on top showing a boxed [G][V] logo, the GLITZY VISION
   masthead, a live clock in the top-right, and a big blinking red
   "PRESS POWER TO PLAY" prompt. Replaces the earlier Ceefax page-100
   design — cleaner, more legible on mobile, and reads instantly as a
   piece of broadcast furniture. */
.gz-tvbig__boot{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#000;
  overflow:hidden;
}
/* CRT scanlines over the whole overlay for authenticity */
.gz-tvbig__boot::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(255,255,255,.04) 2px 3px);
}
/* SMPTE-style vertical colour bars filling the full overlay */
.gz-tv-tc-bars{
  position:absolute;inset:0;
  display:flex;flex-direction:row;
  z-index:1;
}
.gz-tv-tc-bar{
  flex:1 1 0;height:100%;
}
/* Central station-ident card sitting on top of the bars */
.gz-tv-tc-card{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:min(86%,420px);
  background:#000;
  border:2px solid #fff;
  box-shadow:
    0 0 0 4px #000,
    0 0 0 6px #fff,
    0 10px 24px rgba(0,0,0,.8),
    inset 0 0 24px rgba(255,255,255,.05);
  padding:clamp(.55rem,1.6vw,.9rem) clamp(.7rem,2vw,1.1rem);
  display:flex;flex-direction:column;
  gap:clamp(.35rem,1vw,.6rem);
  font-family:"Courier New",Courier,monospace;
  text-align:center;
}
/* Top strip: channel number left, ON-AIR red dot middle, live clock right */
.gz-tv-tc-card__topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;
  padding-bottom:clamp(.3rem,.9vw,.5rem);
  border-bottom:1px solid rgba(255,255,255,.25);
  font-size:clamp(11px,1.6vw,14px);
  letter-spacing:1.5px;
  color:#fff;
}
.gz-tv-tc-card__ch{font-weight:700}
.gz-tv-tc-card__dot{
  width:10px;height:10px;border-radius:50%;
  background:#ff2a2a;
  box-shadow:0 0 8px rgba(255,42,42,.8),0 0 2px rgba(255,42,42,1);
  animation:gzTcDot 1.4s ease-in-out infinite;
}
.gz-tv-tc-card__time{
  font-family:"Courier New",Courier,monospace;
  font-variant-numeric:tabular-nums;
  color:#f4d97a;
}
/* Identity block — [G][V] boxed logo, big Arial Black title, italic subtitle */
.gz-tv-tc-card__ident{
  display:flex;flex-direction:column;align-items:center;
  gap:.35rem;
  padding:clamp(.35rem,1vw,.55rem) 0;
}
.gz-tv-tc-card__logo{
  display:flex;gap:.25rem;
}
.gz-tv-tc-card__logo-box{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(26px,3.6vw,34px);
  height:clamp(26px,3.6vw,34px);
  background:#000;
  border:2px solid #f4d97a;
  color:#f4d97a;
  font-family:"Arial Black",Arial,Helvetica,sans-serif;
  font-weight:900;
  font-size:clamp(15px,2.4vw,20px);
  line-height:1;
}
.gz-tv-tc-card__title{
  font-family:"Arial Black",Arial,Helvetica,sans-serif;
  font-weight:900;
  color:#f4d97a;
  font-size:clamp(17px,3.2vw,26px);
  letter-spacing:clamp(2px,.5vw,4px);
  text-shadow:0 0 6px rgba(244,217,122,.35);
  line-height:1.1;
}
.gz-tv-tc-card__sub{
  font-family: var(--font-editorial);
  font-style:italic;
  color:#e6e6e6;
  font-size:clamp(10px,1.5vw,13px);
  letter-spacing:1px;
}
/* Big blinking red prompt with framing borders */
.gz-tv-tc-card__prompt{
  color:#ff3348;
  font-family:"Courier New",Courier,monospace;
  font-weight:700;
  text-align:center;
  font-size:clamp(13px,2.2vw,18px);
  letter-spacing:2px;
  padding:clamp(.35rem,1vw,.55rem) 0;
  border-top:1px solid rgba(255,255,255,.25);
  border-bottom:1px solid rgba(255,255,255,.25);
  animation:gzBootBlink 1.1s steps(1,end) infinite;
}
.gz-tv-tx-caret{
  display:inline-block;margin-left:4px;
  animation:gzBootCaret .55s steps(1,end) infinite;
}
@keyframes gzBootBlink{ 0%,60%{opacity:1} 61%,100%{opacity:0} }
@keyframes gzBootCaret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes gzTcDot{ 0%,55%{opacity:1} 56%,100%{opacity:.25} }
.gz-tv-tc-card__foot{
  color:#c9c9c9;
  font-family:"Courier New",Courier,monospace;
  font-size:clamp(9px,1.3vw,11px);
  letter-spacing:2px;
  text-transform:uppercase;
}
/* Hide the boot content during any of the on/off animation states — the
   flash, snow, collapse, and fade-out should all show over a clean black
   overlay, not on top of the test card. */
.gz-tvbig__off.is-flash .gz-tvbig__boot,
.gz-tvbig__off.is-snow .gz-tvbig__boot,
.gz-tvbig__off.is-collapsing .gz-tvbig__boot,
.gz-tvbig__off.is-going .gz-tvbig__boot{display:none}
@media (prefers-reduced-motion:reduce){
  .gz-tv-tc-card__prompt,.gz-tv-tx-caret,.gz-tv-tc-card__dot{animation:none}
}

/* black-and-white snow/noise */
.gz-tvbig__off.is-snow{background:#7a7a7a}
.gz-tvbig__off.is-snow .gz-tvbig__dialbtn{display:none}
.gz-tvbig__off.is-snow::after{content:"";position:absolute;inset:0;
  background-image:
    repeating-radial-gradient(rgba(255,255,255,.95) 0 1px,rgba(0,0,0,0) 1px 2px),
    repeating-radial-gradient(rgba(0,0,0,.95) 0 1px,rgba(255,255,255,0) 1px 2px);
  background-size:3px 3px,4px 4px;
  animation:gzSnow .5s steps(1,end) infinite;mix-blend-mode:normal}
@keyframes gzSnow{
  0%{background-position:0 0,1px 2px;opacity:.95}
  25%{background-position:2px 1px,0 3px;opacity:.85}
  50%{background-position:1px 3px,2px 0;opacity:.95}
  75%{background-position:3px 2px,1px 1px;opacity:.8}
  100%{background-position:0 1px,3px 3px;opacity:.95}
}

/* ── The Vault: end-of-programme credit scroll (slow & readable) ── */
.gz-tvbig__credits{position:absolute;inset:0;z-index:9;background:#000;color:#eee;overflow:hidden;cursor:pointer;
  font-family:"Times New Roman",Georgia,serif;animation:gzCertIn .5s ease-out}
.gz-tvbig__credits-roll{position:absolute;left:0;right:0;top:100%;padding:0 1.2rem;text-align:center;
  animation:gzCreditRoll 30s cubic-bezier(0.33,0,0.15,1) forwards}
/* while holding, keep the roll paused off-screen so it's just black for 3s */
.gz-tvbig__credits.is-holding .gz-tvbig__credits-roll{animation-play-state:paused}
@keyframes gzCreditRoll{
  0%{top:100%}
  78%{top:-95%}      /* the last lines roll up into the middle of the screen... */
  88%{top:-95%}      /* ...and HOLD there so you can read the ending */
  100%{top:-160%}    /* then finally drift off into black */
}
.gz-tvbig__credits-end{font-size:14px;letter-spacing:3px;color:#c9a24a;text-transform:uppercase;margin:.5rem 0}
.gz-tvbig__credits-title{font-size:26px;font-weight:700;color:#fff;margin:.7rem 0 .1rem;line-height:1.25}
.gz-tvbig__credits-sub{font-size:14px;color:#b8b8b8;letter-spacing:1px;text-transform:uppercase}
.gz-tvbig__credits-spacer{height:2rem}
.gz-tvbig__credits-row{font-size:16px;color:#ddd;line-height:1.9}
.gz-tvbig__credits-row span{color:#8a8a8a;display:block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}
.gz-tvbig__credits-row strong{color:#fff;font-weight:700;letter-spacing:1px}
.gz-tvbig__credits-note{font-size:12.5px;line-height:1.6;color:#9a8a5a;max-width:340px;margin:.6rem auto;letter-spacing:.3px}
@keyframes gzCreditRoll2{from{top:100%}to{top:-155%}}

/* ── The Vault: solid retro "Glitzy Vision" bumper card shown BEFORE each
   advert (never over the 18+ green cert — startVideo waits for the cert
   to fully leave). Vintage broadcast-station look with scanlines, framed
   inner panel, station branding, brand name, felt-tip year, expiry warning. */
.gz-tvbig__precard{
  position:absolute;inset:0;z-index:10;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  padding:.8rem;
  background:
    radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.6) 100%),
    linear-gradient(180deg,#0f0b22 0%,#05030f 100%);
  opacity:0;transition:opacity .06s ease;
  overflow:hidden;
}
/* Fade OUT gets a longer transition so the exit stays smooth. */
.gz-tvbig__precard--leaving{transition:opacity .5s ease}
.gz-tvbig__precard::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(255,255,255,.03) 2px 3px);
  opacity:.9;
}
.gz-tvbig__precard--show{opacity:1}
.gz-tvbig__precard-inner{
  position:relative;text-align:center;max-width:90%;
  padding:clamp(.7rem,2vw,1.2rem) clamp(1rem,3vw,1.8rem);
  border:2px solid rgba(79,208,255,.42);
  border-radius:3px;
  background:rgba(18,12,42,.55);
  box-shadow:
    inset 0 0 40px rgba(79,208,255,.12),
    0 0 24px rgba(79,208,255,.15);
}
/* Broadcast slate shown briefly before each video plays. Black bar with a
   blinking red ON-AIR dot + label on the left, the GLITZY VISION masthead
   centred in Arial Black yellow, and the channel number on the right in
   Courier. Replaces the earlier Ceefax-style header. */
.gz-tvbig__precard-brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  background:#000;
  padding:.25rem .7rem;
  border-bottom:2px solid #f4d97a;
  line-height:1;
  margin-bottom:.35rem;
}
.gz-tvbig__precard-brand-dot{
  width:10px;height:10px;border-radius:50%;
  background:#ff2a2a;
  box-shadow:0 0 8px rgba(255,42,42,.8),0 0 2px rgba(255,42,42,1);
  animation:gzTcDot 1.4s ease-in-out infinite;
  flex:0 0 auto;
}
.gz-tvbig__precard-brand-onair{
  color:#ff2a2a;
  font-family:"Courier New",Courier,monospace;
  font-weight:700;
  font-size:clamp(11px,1.6vw,14px);
  letter-spacing:2px;
  flex:0 0 auto;
}
.gz-tvbig__precard-brand-title{
  color:#f4d97a;
  font-family:"Arial Black",Arial,Helvetica,sans-serif;
  font-weight:900;
  font-size:clamp(18px,3.4vw,28px);
  letter-spacing:clamp(2px,.5vw,4px);
  text-transform:uppercase;
  text-shadow:0 0 6px rgba(244,217,122,.35);
  line-height:1;
  text-align:center;
  flex:1 1 auto;
}
.gz-tvbig__precard-brand-ch{
  color:#fff;
  font-family:"Courier New",Courier,monospace;
  font-weight:700;
  font-size:clamp(11px,1.6vw,14px);
  letter-spacing:1.5px;
  flex:0 0 auto;
}
.gz-tvbig__precard-owned{
  font-family:"Courier New",monospace;font-weight:700;
  font-size:clamp(7px,.95vw,9px);
  letter-spacing:2px;text-transform:uppercase;
  color:rgba(125,184,208,.7);
  text-shadow:0 0 3px rgba(79,208,255,.25);
  margin-bottom:.25rem;
}
.gz-tvbig__precard-divider{
  color:rgba(79,208,255,.5);
  font-size:9px;letter-spacing:7px;
  margin-bottom:clamp(.4rem,1.2vw,.7rem);
}
.gz-tvbig__precard-eyebrow{
  font-family:"Courier New",monospace;font-weight:700;
  font-size:clamp(8px,1.1vw,10px);
  letter-spacing:3px;text-transform:uppercase;
  color:rgba(125,184,208,.75);
  margin-bottom:clamp(.3rem,.9vw,.5rem);
}
.gz-tvbig__precard-name{
  font-family:var(--font-dauble,Georgia,serif);font-weight:800;
  font-size:clamp(16px,4vw,32px);
  letter-spacing:2px;text-transform:uppercase;
  color:#fff;line-height:1.05;
  text-shadow:
    0 0 22px rgba(79,208,255,.5),
    0 0 6px rgba(79,208,255,.35),
    0 2px 4px rgba(0,0,0,.85);
  margin-bottom:clamp(.25rem,.8vw,.5rem);
}
.gz-tvbig__precard-year{
  font-family:"Marker Felt","Bradley Hand","Segoe Script","Comic Sans MS",cursive;
  font-weight:700;
  font-size:clamp(14px,3vw,24px);
  color:#e34550;
  text-shadow:0 0 12px rgba(227,69,80,.45),0 1px 0 rgba(0,0,0,.7);
  transform:rotate(-3deg);
  display:inline-block;
  margin-bottom:clamp(.4rem,1.2vw,.75rem);
}
.gz-tvbig__precard-expired{
  position:relative;
  font-family: var(--font-sans);font-weight:800;
  font-size:clamp(9px,1.4vw,12px);
  letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,220,170,.95);
  text-shadow:0 0 8px rgba(255,180,80,.45),0 1px 0 rgba(0,0,0,.7);
  padding:.45rem 1.9rem;
  border:0;
  border-top:2px double rgba(232,169,80,.7);
  border-bottom:2px double rgba(232,169,80,.7);
  border-radius:0;
  display:inline-block;
}
.gz-tvbig__precard-expired::before,
.gz-tvbig__precard-expired::after{
  content:"\2726";           /* ✦ */
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:rgba(232,169,80,.75);
  font-size:.85em;
  text-shadow:0 0 6px rgba(255,180,80,.5);
}
.gz-tvbig__precard-expired::before{left:.5rem}
.gz-tvbig__precard-expired::after{right:.5rem}
@media (prefers-reduced-motion:reduce){
  .gz-tvbig__precard{transition:none}
}

/* ── The Vault: "All offers expired [YEAR]" flash near the end of each ad.
   Sits over the video at the bottom-centre (lower-third position), reads
   as a broadcast disclaimer. Fires ~5s before video end, holds 3s, then
   fades. Only rendered for ads that have a year set in the DB. */
.gz-tvbig__expflash{
  position:absolute;left:50%;bottom:16%;z-index:10;
  transform:translate(-50%,8px);
  padding:.6rem 1.2rem;border-radius:3px;
  background:rgba(15,10,10,.72);
  border:1px solid rgba(232,169,80,.7);
  box-shadow:0 4px 16px rgba(0,0,0,.6),inset 0 0 20px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;
  transition:opacity .5s ease,transform .5s ease;
  text-align:center;line-height:1.1;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.gz-tvbig__expflash--show{opacity:1;transform:translate(-50%,0)}
.gz-tvbig__expflash-inner{display:flex;align-items:baseline;justify-content:center;gap:.55rem;flex-wrap:wrap}
.gz-tvbig__expflash-lbl{
  font-family: var(--font-sans);font-weight:800;
  font-size:clamp(11px,1.8vw,14px);letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,220,170,.9);
}
.gz-tvbig__expflash-yr{
  font-family:"Courier New",monospace;font-weight:800;
  font-size:clamp(14px,2.4vw,18px);letter-spacing:2px;
  color:#ffcd7a;
  text-shadow:0 0 6px rgba(255,180,80,.6),0 1px 0 rgba(0,0,0,.7);
}
@media (prefers-reduced-motion:reduce){
  .gz-tvbig__expflash{transition:none;transform:translate(-50%,0)}
}

.gz-tvbig__noise{position:absolute;inset:0;z-index:9;background:#0a0a0a;
  background-image:
    repeating-radial-gradient(rgba(255,255,255,1) 0 1px,rgba(0,0,0,0) 1px 2px),
    repeating-radial-gradient(rgba(0,0,0,1) 0 1px,rgba(255,255,255,0) 1px 2px),
    repeating-radial-gradient(rgba(255,255,255,.8) 0 1px,rgba(0,0,0,0) 1px 3px);
  background-size:2px 2px,3px 3px,5px 5px;
  animation:gzNoise .08s steps(1,end) infinite}
@keyframes gzNoise{
  0%   {background-position:0 0,1px 2px,2px 1px}
  20%  {background-position:2px 1px,0 3px,3px 4px}
  40%  {background-position:1px 3px,2px 0,0 2px}
  60%  {background-position:3px 2px,1px 1px,2px 3px}
  80%  {background-position:0 2px,3px 3px,1px 0}
  100% {background-position:2px 0,0 1px,3px 2px}
}
@media (prefers-reduced-motion:reduce){
  .gz-tvbig__noise{animation:none}
}

/* ── The Vault: mobile "tap for sound" prompt (advert auto-plays muted) ── */
.gz-tvbig__soundtip{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:11;
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;border:0;
  padding:.5rem .9rem;border-radius:20px;font-size:13px;font-weight:700;letter-spacing:.3px;
  background:rgba(233,30,140,.92);color:#fff;box-shadow:0 3px 12px rgba(0,0,0,.5);
  animation:gzSoundTip 2s ease-in-out infinite}
.gz-tvbig__soundtip-icon{font-size:15px}
@keyframes gzSoundTip{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}

/* Vault: "come back tomorrow" note under the guide */
.gz-vault__tomorrow{max-width:680px;margin:1.4rem auto 0;text-align:center;
  background:var(--pink-bg,#fdf4f7);border:1px dashed rgba(199,21,133,.4);border-radius:12px;
  padding:1rem 1.3rem;color:#6a5a66;font-size:15px;line-height:1.6}
.gz-vault__tomorrow strong{color:var(--pink-dark,#C71585)}

/* ============================================================================
   PARTY BINGO — HUB / CITY / LEAF SHARED
   Extracted from inline <style> blocks previously duplicated across
   party-bingo-events.php (hub), party-bingo-city.php, and party-bingo-event.php
   (leaf). Single source of truth for the party section's visual language.

   Ordering (specificity matters):
     1. Theme (colours, gradients, greeting overrides — apply everywhere)
     2. Party container band + shared card grid + date tile + list view
     3. Hub-scoped (town grid, empty state, city pills, hero placeholder)
     4. City-scoped (disclaimer, run-banner, view toggle, listrow, backlink, lede)
     5. Leaf-scoped (hero, details band, card, hours, addr, contact, tickets,
        related row, hotel cross-sell, share/QR, disclaimer). Kept LAST so
        .pe-details-band variants can override the earlier .pb-events base.

   Palette: #F43F5E (pink) → #9c27b0 (violet) → #00BCD4 (cyan) → #00E676 (lime)
   Only exception left inline: .pe-head .gz-snake-wrap positioning on the leaf.
   ============================================================================ */

/* ── 1. THEME ─────────────────────────────────────────────────────────────── */
.pb-label { background:linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#00E676); color:#fff; font-weight:800; }
.mag-cover__title--party {
  background:linear-gradient(135deg,#F43F5E,#9c27b0,#00BCD4,#00E676);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* Scoped to the party section. These last two were bare — .mag-section-stars
   and .mag-cover__stars with no ancestor — so the party rainbow was painting
   every section star on every page, and -webkit-text-fill-color:transparent
   beat any colour those pages set. That is why darts stars looked purple. */
.mag-greeting--party .mag-greeting__stars,
.mag-greeting--party .mag-greeting__stars-bottom,
.mag-section--party .mag-section-stars,
.mag-section--party .mag-cover__stars {
  background:linear-gradient(135deg,#F43F5E,#9c27b0 40%,#00BCD4 75%,#00E676);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* Restore the 18+ badge (::after on stars-bottom) — the gradient-text
   clip above would otherwise make it transparent. Party-violet variant. */
.mag-greeting--party .mag-greeting__stars-bottom::after {
  background:radial-gradient(circle at 35% 35%, #fff 0%, #e8e8e8 40%, #ccc 100%);
  -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:#9c27b0; color:#9c27b0;
  border-color:#9c27b0;
}
.mag-greeting--party .mag-greeting__eeat-name  { color:#9c27b0; }
.mag-greeting--party .mag-greeting__eeat-label { color:#F43F5E; font-weight:700; }
.mag-greeting--party .mag-greeting__eeat {
  border-top-color:rgba(156,39,176,.25);
  border-bottom-color:rgba(156,39,176,.25);
}
/* Explore-More star — override the blue-club gradient with the party one.
   Scoped to .mag-section--party. Both selectors were bare and carried
   !important on every declaration, so the party rainbow was forced onto
   every explore star on the site and no page theme could win — which is
   why .mag-explore-star--current resolved to a rainbow rather than the
   section's own colour. */
.mag-section--party .mag-explore-star,
.mag-section--party .mag-explore-star--blue {
  background:linear-gradient(135deg,#F43F5E,#9c27b0 40%,#00BCD4 75%,#00E676) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
/* Faded divider — party violet band. Also scoped: bare + !important meant
   it was rewriting every purple divider site-wide. Same colour as
   var(--purple), so this is tidiness rather than a visible fix. */
.mag-section--party .mag-faded-border--purple {
  background:linear-gradient(90deg, transparent 0%, #9c27b0 20%, #9c27b0 80%, transparent 100%) !important;
}
/* 18+ badge in party sidebar boxes — party violet, not default pink. */
.gz-dir-sidebar .mag-picks-box__18 { background:#9c27b0 !important; }


/* ── 2. PARTY COVERAGE BAND (shared by hub + city) ────────────────────────── */
.pb-events { max-width:100%; }
.pb-events.bc-coverage--full {
  padding:2rem clamp(1rem,4vw,3rem);
  border-top:2px solid transparent;
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg, transparent, #F43F5E, #9c27b0, #00BCD4, #00E676, transparent) 1;
  background:linear-gradient(180deg, #fff1f8 0%, #f7f2fc 50%, #eefbfd 100%);
  margin:2rem 0 0;
}
.pb-events .bc-coverage__title { text-align:center; margin:1rem 0 0.5rem; }
/* Note: .pb-events .bc-coverage__intro already defined earlier in this file
   (near .pb-sharebox) with identical values — not repeated here. */
.pb-events .mag-more-label { text-align:center; margin-bottom:0.5rem; }


/* ── 3. EVENT CARDS (grid) — city primary; leaf uses .pb-event--sm ─────────── */
.pb-events__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; margin-top:1.5rem; }

.pb-event {
  display:flex; flex-direction:column; background:#fff; border-radius:18px;
  overflow:hidden; text-decoration:none; color:inherit; position:relative;
  box-shadow:0 1px 2px rgba(26,10,46,.04), 0 8px 22px -12px rgba(26,10,46,.16);
  transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s;
}
.pb-event:hover { transform:translateY(-5px); box-shadow:0 1px 2px rgba(26,10,46,.05), 0 20px 38px -16px rgba(244,63,94,.32); }

/* 16:9 image frame — Google-indexable <img> inside, party tint overlay. */
.pb-event__img { aspect-ratio:16/9; background:#f6eef4; position:relative; overflow:hidden; }
.pb-event__img > img { width:100%; height:100%; object-fit:cover; display:block; }
.pb-event__img::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(150deg, rgba(244,63,94,.30) 0%, rgba(156,39,176,.24) 48%, rgba(0,188,212,.28) 100%);
  mix-blend-mode:multiply;
}
.pb-event__img::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(160deg, rgba(20,6,36,.42) 0%, rgba(20,6,36,0) 38%);
}
.pb-event:hover .pb-event__img::before { opacity:.55; transition:opacity .24s; }
.pb-event__img--placeholder { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#fbd6ea,#e6d4f5,#cfeef4); }
.pb-event__img--placeholder::before,
.pb-event__img--placeholder::after { display:none; }
.pb-event__img-emoji { font-size:46px; opacity:.55; position:relative; z-index:2; }

/* Date chip in the corner of every card image. */
.pb-datetile {
  position:absolute; top:11px; left:11px; z-index:3;
  display:flex; flex-direction:column; align-items:center; line-height:1;
  padding:6px 9px; border-radius:12px; min-width:44px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  box-shadow:0 4px 12px rgba(20,6,36,.22);
}
.pb-datetile__dow  { font-size:9px;  font-weight:800; letter-spacing:.5px; color:#F43F5E; }
.pb-datetile__day  { font-size:19px; font-weight:900; color:#1a0a2e; letter-spacing:-.5px; margin:1px 0; }
.pb-datetile__mon  { font-size:9px;  font-weight:800; letter-spacing:.5px; color:#9c27b0; }
.pb-datetile__year { font-size:8px;  font-weight:700; letter-spacing:.5px; color:#8a7a92; margin-top:1px; }

.pb-event__body  { padding:13px 15px 15px; display:flex; flex-direction:column; flex:1; gap:7px; }
.pb-event__name  { font-size:15.5px; font-weight:800; color:#1a0a2e; margin:0; line-height:1.3; letter-spacing:-.2px; }
.pb-event__when  { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#c026a3; margin:0; }
.pb-event__time  { color:#9a8aa2; font-weight:600; }
.pb-event__meta  { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:#8a7a92; margin:0; }
.pb-event__venue { font-weight:700; color:#5a4a62; }
.pb-event__desc  { font-size:12.5px; color:#6a5f72; line-height:1.5; margin:1px 0 0; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pb-event__foot  { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px; }
.pb-event__price { font-size:13.5px; font-weight:800; color:#1a0a2e; }
.pb-event__cta   {
  font-size:12.5px; font-weight:800; color:#fff; padding:9px 17px; border-radius:100px;
  background:linear-gradient(135deg,#F43F5E,#9c27b0); white-space:nowrap;
  box-shadow:0 4px 12px -2px rgba(244,63,94,.5); transition:transform .18s, box-shadow .18s;
}
.pb-event:hover .pb-event__cta { transform:translateY(-1px); box-shadow:0 6px 16px -3px rgba(244,63,94,.6); }
@media (max-width:640px){ .pb-events__grid { grid-template-columns:1fr; } }

/* Compact variant used in the leaf's "More Party Events" row. */
.pb-event--sm            { border-radius:14px; }
.pb-event--sm:hover      { transform:translateY(-4px); box-shadow:0 1px 2px rgba(26,10,46,.05), 0 18px 34px -16px rgba(244,63,94,.32); }
.pb-event--sm .pb-datetile         { top:9px; left:9px; padding:5px 8px; min-width:40px; border-radius:10px; }
.pb-event--sm .pb-datetile__dow    { font-size:8px; }
.pb-event--sm .pb-datetile__day    { font-size:17px; }
.pb-event--sm .pb-datetile__mon    { font-size:8px; }
.pb-event--sm .pb-datetile__year   { font-size:8px; }
.pb-event--sm .pb-event__img-emoji { font-size:38px; }
.pb-event--sm .pb-event__body      { padding:11px 13px 13px; gap:6px; }
.pb-event--sm .pb-event__name      { font-size:14px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pb-event--sm .pb-event__when      { gap:5px; font-size:11.5px; }
.pb-event--sm .pb-event__meta      { gap:5px; font-size:11.5px; }
.pb-event--sm .pb-event__foot      { justify-content:flex-end; margin-top:8px; }
.pb-event--sm .pb-event__cta       { font-size:11.5px; padding:7px 14px; }


/* ── 4. LEDE + ATTRIBUTION + BACKLINK (shared across pages) ───────────────── */
.pb-lede       { font-weight:800; }
.pb-lede__rest { font-weight:400; }
.pb-attribution   { text-align:center; font-size:11px; color:#999; margin:1.5rem 0 0; line-height:1.6; }
.pb-attribution a { color:#9c27b0; text-decoration:none; font-weight:600; }
.pb-backlink   { text-align:center; margin:0 0 1rem; }
.pb-backlink a { color:#9c27b0; font-weight:700; text-decoration:none; }


/* ── 5. HUB-SCOPED (town grid, empty state, hero placeholder, ranked pills) ─ */
.pb-town-grid {
  list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  column-gap:2rem; row-gap:0; max-width:1200px; margin:1.5rem auto 1rem;
  font-size:0.95rem; max-height:22rem; overflow-y:auto;
  padding:0.25rem 1rem 0.25rem 0.25rem;
  scrollbar-width:thin; scrollbar-color:#9c27b0 rgba(156,39,176,0.12);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 2rem),transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 2rem),transparent 100%);
}
.pb-town-grid::-webkit-scrollbar        { width:12px; }
.pb-town-grid::-webkit-scrollbar-track  { background:rgba(156,39,176,0.12); border-radius:6px; margin:4px 0; }
.pb-town-grid::-webkit-scrollbar-thumb  {
  background:linear-gradient(180deg,#F43F5E 0%,#9c27b0 40%,#00BCD4 75%,#00E676 100%);
  border-radius:6px; border:2px solid rgba(255,255,255,0.4); background-clip:padding-box;
}
.pb-town-grid::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg,#e11d74 0%,#7a1f92 50%,#00a5bb 100%); background-clip:padding-box;
}
.pb-town-grid li            { break-inside:avoid; padding:0.35rem 0; border-bottom:1px dotted #eac6e0; }
.pb-town-grid li a          { display:flex; justify-content:space-between; align-items:baseline; color:inherit; text-decoration:none; }
.pb-town-grid .bc-city      { color:#333; }
.pb-town-grid .bc-count     {
  color:#9c27b0; font-weight:700; font-variant-numeric:tabular-nums;
  background:#fbeaf5; padding:1px 9px; border-radius:12px; font-size:0.85em;
}
.pb-town-grid li a:hover .bc-city {
  background:linear-gradient(135deg,#F43F5E 0%,#9c27b0 40%,#00BCD4 75%,#00E676 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#9c27b0;
}

.pb-empty        { text-align:center; padding:2.5rem 1.5rem; background:#fdf4fa; border-radius:16px; border:1.5px dashed #eac6e0; margin-top:1.25rem; }
.pb-empty__emoji { font-size:44px; }
.pb-empty__title { font-size:1.15rem; font-weight:800; color:#9c27b0; margin:.5rem 0 .35rem; }
.pb-empty__text  { font-size:14px; color:#777; line-height:1.6; margin:0 auto; max-width:440px; }

/* Hero image placeholder — shown until party-bingo-events.webp is uploaded. */
.pb-img-placeholder {
  aspect-ratio:1456/816; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:linear-gradient(135deg,#F43F5E 0%,#9c27b0 50%,#00BCD4 100%);
  color:#fff; text-align:center;
}
.pb-img-placeholder__emoji { font-size:clamp(40px,9vw,68px); line-height:1; }
.pb-img-placeholder__text  { font-size:clamp(18px,4vw,26px); font-weight:900; letter-spacing:-.3px; }
.pb-img-placeholder__sub   { font-size:12px; font-weight:600; opacity:.85; letter-spacing:.5px; text-transform:uppercase; }

/* Top-spots ranked list in the hub sidebar. */
.gz-party-pills--ranked { flex-direction:column; gap:0; align-items:stretch; }
a.gz-city-pill--ranked  {
  display:flex; align-items:center; gap:9px; width:100%;
  padding:10px 4px 10px 0; text-align:left;
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:transform .15s;
}
a.gz-city-pill--ranked:last-child { border-bottom:0; }
a.gz-city-pill--ranked:hover      { transform:translateX(3px); }
.gz-city-pill__rank {
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:var(--rctext, #fff);
  background:linear-gradient(135deg, var(--rc1, #F43F5E), var(--rc2, #9c27b0));
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.gz-city-pill__body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.15; }
.gz-city-pill__town { font-weight:800; font-size:.92rem; color:#fff; letter-spacing:-.2px; }
.gz-city-pill__n    { font-weight:800; font-size:.95rem; color:#fff; }
@media (min-width:768px){ .gz-city-pill__town { font-size:1.1rem; } }


/* ── 6. CITY-SCOPED (view toggle, list view, disclaimer, run banner) ──────── */

/* Segmented view toggle above the events grid. */
.pb-viewtoggle-wrap { display:flex; justify-content:center; }
.pb-viewtoggle {
  display:inline-flex; gap:2px; margin:0 auto 1.25rem; padding:3px;
  background:#f2e6f0; border-radius:100px; align-self:center;
}
.pb-viewtoggle__btn {
  display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:800; color:#9c27b0;
  padding:8px 18px; border-radius:100px; background:transparent; transition:all .15s;
}
.pb-viewtoggle__btn:hover     { color:#7c3aed; }
.pb-viewtoggle__btn.is-active { background:#fff; color:#1a0a2e; box-shadow:0 2px 8px rgba(26,10,46,.12); }
.pb-view--cards      { display:grid; }
.pb-view[hidden]     { display:none !important; }

/* List view (alternative to cards). */
.pb-view--list       { display:flex; flex-direction:column; gap:8px; margin-top:1.5rem; }
.pb-listrow          {
  display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;
  background:#fff; border:1px solid #efe2ec; border-radius:14px; padding:10px 14px;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.pb-listrow:hover    { border-color:#F43F5E; box-shadow:0 8px 20px -8px rgba(244,63,94,.3); transform:translateX(2px); }
.pb-listrow__date    {
  flex:0 0 auto; width:46px; height:46px; border-radius:10px; line-height:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#fce4f0,#ede0f7); color:#1a0a2e;
}
.pb-listrow__date--tba { background:#f1e9f4; }
.pb-listrow__day       { font-size:18px; font-weight:900; letter-spacing:-.5px; }
.pb-listrow__mon       { font-size:9px;  font-weight:800; letter-spacing:.5px; color:#9c27b0; }
.pb-listrow__year      { font-size:8px;  font-weight:700; letter-spacing:.5px; color:#8a7a92; }
.pb-listrow__main      { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pb-listrow__name      { font-size:14.5px; font-weight:800; color:#1a0a2e; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pb-listrow__meta      { font-size:12px;   color:#8a7a92; font-weight:600; }
.pb-listrow__end       { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; }
.pb-listrow__price     { font-size:12.5px; font-weight:800; color:#1a0a2e; white-space:nowrap; }
.pb-listrow__cta       {
  font-size:12px; font-weight:800; color:#fff; padding:6px 13px; border-radius:100px;
  background:linear-gradient(135deg,#F43F5E,#9c27b0); white-space:nowrap;
}
@media (max-width:520px){
  .pb-listrow__end { align-items:flex-end; }
  .pb-listrow__cta { display:none; }   /* whole row is tappable on mobile */
}

/* Aggregator disclaimer — city + hub attribution block. */
.pb-disclaimer         {
  margin:2rem auto 0; max-width:820px; padding:16px 20px;
  background:#faf5fb; border:1px solid #eeddf0; border-radius:14px;
  font-size:12px; line-height:1.65; color:#8a7a92; text-align:left;
}
.pb-disclaimer p                { margin:0 0 8px; }
.pb-disclaimer p:last-child     { margin-bottom:0; }
.pb-disclaimer__lead            { color:#5a4a62; font-size:12.5px; }
.pb-disclaimer strong           { color:#5a4a62; }
.pb-disclaimer a                { color:#9c27b0; text-decoration:none; font-weight:600; }
.pb-disclaimer a:hover          { text-decoration:underline; }

/* "Run a bingo night" full-width banner — moved to the pre-existing
   .pb-run-banner block earlier in this file (search for RUN-A-BINGO-NIGHT
   BANNER). Kept there because it predates the party-shared block and
   was already the single source of truth. */


/* ── 7. LEAF-SCOPED (event detail page) ───────────────────────────────────── */

/* Note: --pink is NOT overridden here — the party gradients are all hardcoded
   #F43F5E, and overriding --pink would drag the shared body-text link colour
   off the site-standard brand pink. */

.pe-wrap    { width:100%; margin:0; padding:0; }
.pe-back    { margin:1rem 0 0.5rem; }
.pe-back a  { color:#9c27b0; font-weight:700; text-decoration:none; font-size:14px; }

/* Hero flyer overlays (date + going count) inside .mag-screenshot__frame. */
.mag-screenshot__frame { position:relative; }
.pe-flyer-ph {
  display:flex; align-items:center; justify-content:center; aspect-ratio:16/9; font-size:72px;
  background:linear-gradient(135deg,#F43F5E,#9c27b0 45%,#00BCD4 75%,#00E676);
}
.pe-date {
  position:absolute; top:16px; left:16px; z-index:3; display:flex; flex-direction:column; align-items:center;
  padding:8px 14px; border-radius:14px; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(20,6,36,.28); line-height:1;
}
.pe-date__dow { font-size:11px; font-weight:800; letter-spacing:1px; color:#F43F5E; }
.pe-date__day { font-size:30px; font-weight:900; color:#1a0a2e; letter-spacing:-1px; margin:2px 0; }
.pe-date__mon { font-size:11px; font-weight:800; letter-spacing:1px; color:#9c27b0; }
.pe-date__yr  { font-size:10px; font-weight:700; letter-spacing:1px; color:#6a5a72; margin-top:1px; }
.pe-going {
  position:absolute; bottom:16px; right:16px; z-index:3; font-size:13px; font-weight:800; color:#fff;
  padding:7px 14px; border-radius:100px; background:rgba(20,6,36,.55); backdrop-filter:blur(6px);
}

.pe-head    { margin:1.5rem 0 0.5rem; text-align:center; }
.pe-title   { text-align:center; margin:0 0 .5rem; }
.pe-closer  { margin:0 0 0.5rem; font-size:14px; color:#6a5a72; font-style:italic; }
.pe-closer a { color:#9c27b0; font-weight:700; }
.pe-offer__ad {
  display:inline-block; font-size:11px; color:#8a7a92; margin:0.75rem 0 0; letter-spacing:.3px;
  padding:3px 10px; border:1px solid #e6d3ec; border-radius:100px;
}
.pe-facts   { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin:0 0 1.25rem; font-size:15px; color:#5a4a62; }

/* Details band — leaf variant of the shared party coverage band.
   Overrides .pb-events.bc-coverage--full above because it's declared later. */
.pe-details-band { text-align:center; }
.pe-details-band.bc-coverage--full {
  border-image: linear-gradient(90deg, transparent, #F43F5E, #9c27b0, #00BCD4, transparent) 1;
  background: linear-gradient(180deg, #fff1f8 0%, #f7f2fc 50%, #eefbfd 100%);
}
#details.pe-details-band.bc-coverage--full { margin-top:0.5rem; }
.pe-wrap .mag-explore-star                 { margin-bottom:0.4rem; }
.pe-details-band .pe-facts                 { max-width:760px; margin:0 auto 1.25rem; }
.pe-details-band .pe-venue-actions         { justify-content:center; margin:0 auto 1.25rem; }
.pe-club-link--center                      { max-width:520px; margin:0 auto 1.25rem; text-align:left; }

/* Club-style detail card (mimics bingo-club.php cd-card). */
.pe-card {
  max-width:560px; margin:1.5rem auto 0; padding:1.5rem 1.75rem; text-align:left;
  background:#fff; border:1px solid #ecd7f0; border-radius:14px;
  box-shadow:0 10px 30px -14px rgba(156,39,176,.22);
}
.pe-card__img {
  margin:-1.5rem -1.75rem 1.25rem;
  height:120px; background:#f6eef4;
  border-radius:13px 13px 0 0;
  overflow:hidden;
}
.pe-card__img > img { width:100%; height:100%; object-fit:cover; display:block; }
.pe-card__title {
  text-align:center; margin:0 0 1.1rem; padding:0 0 1rem;
  border-bottom:1px dashed rgba(156,39,176,.2);
  font-family:var(--font-editorial, 'Lora', Georgia, serif);
  font-size:1.35rem; line-height:1.25; color:#1a0a2e; font-weight:800;
}
.pe-title-date  { color:#000; -webkit-text-fill-color:#000; background:none; }

/* Hours block (dt/dd grid) inside the detail card. */
.pe-hours          { margin:0 0 1rem; }
.pe-hours__head    { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.pe-hours__title   { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#9c27b0; }
.pe-hours__body    { display:grid; grid-template-columns:auto 1fr; gap:0 1rem; margin:0; font-size:.98rem; line-height:1.5; color:#333; }
.pe-hours__body dt {
  font-weight:800; color:#9c27b0; font-size:.72rem; text-transform:uppercase; letter-spacing:.6px;
  align-self:center; padding:.6rem 0;
}
.pe-hours__body dd         { margin:0; color:#333; align-self:center; padding:.6rem 0; }
.pe-hours__body dd strong  { color:#1a0a2e; }
.pe-hours__body dt:not(:first-of-type),
.pe-hours__body dd:not(:nth-of-type(1)) { border-top:1px solid rgba(156,39,176,.1); }
.pe-age-badge {
  display:inline-block; background:#C71585; color:#fff;
  font-size:12px; font-weight:800; letter-spacing:.3px;
  padding:2px 9px; border-radius:4px;
}

/* Address + contact links inside the detail card. */
.pe-addr {
  padding:1rem 0; margin:0 0 1rem;
  border-top:1px dashed rgba(156,39,176,.2); border-bottom:1px dashed rgba(156,39,176,.2);
}
.pe-addr__label       { display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#9c27b0; margin-bottom:.35rem; }
.pe-addr__lines       { font-style:normal; color:#333; font-size:.98rem; line-height:1.5; margin:0; }
.pe-addr__lines strong { color:#222; }
.pe-addr__pc          { font-family:monospace; color:#9c27b0; }
.pe-contact           { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; margin:0; }
.pe-contact__link     { display:inline-flex; align-items:center; gap:.4rem; color:#9c27b0; font-weight:600; font-size:.92rem; text-decoration:none; }
.pe-contact__link:hover { text-decoration:underline; }
.pe-contact__link .pe-icon { flex:0 0 auto; }
.pe-contact__sep      { color:#d9b3e0; }

/* Tickets subsection inside the card. */
.pe-tickets                  {
  margin:1.25rem 0 0; padding:1.25rem 0 0; text-align:center;
  border-top:1px dashed rgba(156,39,176,.2);
}
.pe-tickets .pe-cta-row      { margin:0 0 0.75rem; }
.pe-tickets .pe-closer       { margin:0; }
.pe-tickets .mag-more-label  { margin:0 0 0.9rem; }

/* Facts / CTAs / book button. */
.pe-fact            { display:flex; align-items:center; gap:7px; font-weight:600; }
.pe-fact strong     { color:#1a0a2e; font-weight:800; }
.pe-cta-row         { display:flex; flex-direction:column; align-items:center; gap:12px; margin:0 0 2rem; }
.pe-book-btn        { background:linear-gradient(135deg,#F43F5E,#9c27b0); font-size:14px; }
.pe-book-btn:hover  { background:linear-gradient(135deg,#e02f4d,#7d1f92); }
.pe-cta-row--standalone { margin:1.5rem 0; }
.pe-section         { margin:0 0 2rem; }
.pe-section__h      { font-size:13px; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:#9c27b0; margin:0 0 .6rem; }
.pe-body            { font-size:15.5px; line-height:1.7; color:#3a2f42; }
.pe-body p          { margin:0 0 1rem; }
.pe-venue-card      {
  display:flex; flex-wrap:wrap; gap:6px 16px; padding:16px 18px; border-radius:14px;
  background:#faf5fb; border:1px solid #eeddf0; font-size:14.5px; color:#5a4a62; line-height:1.6;
}
.pe-venue-card strong { color:#1a0a2e; }
.pe-venue-actions   { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pe-venue-action    {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:8px; text-decoration:none;
  font-size:13px; font-weight:700; color:#9c27b0;
  background:#fff; border:1px solid #e6cdea; transition:background .15s, border-color .15s, transform .15s;
}
.pe-venue-action:hover { background:#f6ecf8; border-color:#d9b3e0; transform:translateY(-1px); }
.pe-venue-action svg   { flex:0 0 auto; }
.pe-map             { margin-top:12px; border:0; border-radius:14px; width:100%; height:280px; }
.pe-club-link       {
  display:flex; align-items:center; gap:10px; margin-top:12px; padding:12px 16px;
  border-radius:12px; text-decoration:none; font-size:14px; line-height:1.4;
  color:#5a4a62; background:#faf5fb; border:1px solid #eeddf0; transition:background .15s, border-color .15s;
}
.pe-club-link:hover  { background:#f3e6f6; border-color:#e0c5e6; }
.pe-club-link strong { color:#9c27b0; }
.pe-club-link svg    { flex:0 0 auto; color:#9c27b0; }

/* "More Party Events" row below the details. */
.pe-more            { margin:2rem 0; }
.pe-more__grid      { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-top:1rem; }
.pe-more-band .pe-more__grid { grid-template-columns:repeat(2, 1fr); max-width:760px; margin:1.5rem auto 1.5rem; }
@media (max-width:560px){ .pe-more-band .pe-more__grid { grid-template-columns:1fr; } }
@media (max-width:520px){ .pe-more__grid              { grid-template-columns:1fr 1fr; } }

/* "Make a night of it" hotel cross-sell (in-column horizontal card variant). */
.pe-hotel      {
  display:flex; align-items:stretch; gap:0; text-decoration:none; color:inherit;
  border-radius:18px; overflow:hidden; background:linear-gradient(130deg,#fff5fa,#f7f0fc 55%,#eefbfd);
  border:1px solid #f0e2ee; box-shadow:0 8px 24px -14px rgba(156,39,176,.35);
  transition:transform .18s, box-shadow .18s;
}
.pe-hotel:hover { transform:translateY(-3px); box-shadow:0 16px 34px -16px rgba(156,39,176,.5); }
.pe-hotel__img  {
  flex:0 0 40%; max-width:220px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#F43F5E,#9c27b0 45%,#00BCD4 75%,#00E676);
  display:flex; align-items:center; justify-content:center;
}
.pe-hotel__img img         { width:100%; height:100%; object-fit:cover; display:block; }
.pe-hotel__emoji           { display:none; font-size:52px; }
.pe-hotel__img--ph .pe-hotel__emoji { display:block; }
.pe-hotel__body            { flex:1 1 auto; padding:18px 20px; display:flex; flex-direction:column; gap:5px; justify-content:center; }
.pe-hotel__kicker          { font-size:12px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; color:#F43F5E; }
.pe-hotel__title           { font-size:19px; font-weight:900; letter-spacing:-.3px; color:#1a0a2e; line-height:1.2; }
.pe-hotel__text            { font-size:13.5px; line-height:1.55; color:#6a5f72; }
.pe-hotel__cta             { margin-top:6px; font-size:13px; font-weight:800; color:#9c27b0; }
.pe-hotel:hover .pe-hotel__cta { color:#F43F5E; }
@media (max-width:520px){
  .pe-hotel      { flex-direction:column; }
  .pe-hotel__img { flex-basis:auto; max-width:none; aspect-ratio:16/9; }
}

/* Share + QR handoff. */
.pe-sharequb   { margin:0 0 2rem; }
.pe-sharebtn   {
  display:inline-flex; align-items:center; gap:8px; font-family:inherit;
  font-size:14px; font-weight:800; color:#9c27b0; cursor:pointer;
  background:#faf0f7; border:1.5px solid #eeddf0; border-radius:100px;
  padding:9px 18px; transition:all .15s;
}
.pe-sharebtn:hover { background:#f3e2f0; border-color:#e0c0dc; transform:translateY(-1px); }
.pe-qr         {
  display:flex; align-items:center; gap:1.25rem; margin-top:1rem; padding:1.1rem 1.25rem;
  border:2px dashed transparent; border-radius:14px;
  background:
    linear-gradient(180deg,#fff5fa 0%,#f7f2fc 55%,#eefbfd 100%) padding-box,
    linear-gradient(135deg,#F43F5E,#9c27b0 45%,#00BCD4 75%,#00E676) border-box;
}
.pe-qr img              { flex:0 0 auto; border-radius:8px; background:#fff; padding:4px; }
.pe-qr__text            { font-size:.92rem; line-height:1.55; color:#5a4a62; }
.pe-qr__text strong     {
  display:block; margin-bottom:.3rem; font-size:1rem;
  background:linear-gradient(135deg,#F43F5E,#9c27b0 45%,#00BCD4 75%,#00E676);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#9c27b0;
}
/* Phones already have the page — no QR-to-self */
@media (max-width:768px), (pointer:coarse) { .pe-qr { display:none; } }

/* Leaf disclaimer + back-to-top. */
.pe-disclaimer          {
  margin:2.5rem 0 1rem; padding:16px 20px; background:#faf5fb; border:1px solid #eeddf0;
  border-radius:14px; font-size:12px; line-height:1.65; color:#8a7a92;
}
.pe-disclaimer strong   { color:#5a4a62; }
.pe-disclaimer a        { color:#9c27b0; text-decoration:none; font-weight:600; }
.pe-disclaimer--full    { max-width:1160px; margin:2rem auto 1rem; padding-left:1.25rem; padding-right:1.25rem; }
.pe-backtop             { display:table; margin:1.5rem auto 0.5rem; }

/* ================================ END PARTY BINGO SHARED ================== */


/* Quick-links list added to .gz-darts-bet-box on the homepage.
   Same green/red darts palette; sits between .gz-darts-bet-desc
   and the main .gz-darts-bet-cta. */
.gz-darts-bet-links {
  list-style: none;
  padding: 0;
  margin: .5rem 0 1rem;
  text-align: center;
}
.gz-darts-bet-links li {
  margin: 0;
  padding: .35rem 0;
  border-bottom: 1px dashed rgba(22,163,74,.25);
}
.gz-darts-bet-links li:last-child { border-bottom: none; }
.gz-darts-bet-links a {
  color: #d8d3c8;
  font-family: var(--font-editorial);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: color .15s ease;
}
.gz-darts-bet-links a:hover,
.gz-darts-bet-links a:focus {
  color: #16A34A;
}


/* ─────────────────────────────────────────────────────────────
   Site edge bar — solid pink→purple gradient strip that sits
   as the last visual element on every page. Cuts the site
   cleanly from the browser background/theme.
   ───────────────────────────────────────────────────────────── */
.gz-site-edge {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #EC4899 0%, #DB2777 40%, #9333EA 100%);
}


/* ─────────────────────────────────────────────────────────────
   Footer editorial tagline — brand voice sign-off that sits
   above the ABOUT credentials on every page. Framed by ✦ ✦ ✦
   above the quote, centred, editorial serif. Font styling
   inherits from the original .mag-statement pattern.
   ───────────────────────────────────────────────────────────── */
.gz-footer-tagline {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 1.5rem;
  padding: 0 1.25rem;
}
.gz-footer-tagline__stars {
  font-size: 12px;
  letter-spacing: .5em;
  color: var(--pink);
  margin: 0 0 1rem;
  line-height: 1;
}
.gz-footer-tagline__quote {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.3px;
  max-width: 640px;
  margin: 0.4rem auto 0.5rem;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .gz-footer-tagline__quote { font-size: 18px; }
}


/* ─────────────────────────────────────────────────────────────
   Footer variant of the share box — dark theme icon colours
   so the SVG icons stay legible on the dark footer background.
   Brand colours kept where they read well; X switched to white
   because #111 disappears on the footer's dark navy.
   ───────────────────────────────────────────────────────────── */
.pb-sharebox--footer .pb-sharebox {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.pb-sharebox--footer .pb-label {
  color: rgba(255,255,255,.72);
}
.pb-sharebox--footer .pb-share__link {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.88);
}
.pb-sharebox--footer .pb-share__link:hover,
.pb-sharebox--footer .pb-share__link:focus {
  background: rgba(255,255,255,.14);
  border-color: rgba(236,72,153,.6);
}
/* Icon colours — brand hues that read on dark bg */
.pb-sharebox--footer .pb-share__link--fb       { color: #4267B2; }
.pb-sharebox--footer .pb-share__link--wa       { color: #25d366; }
.pb-sharebox--footer .pb-share__link--msgr     { color: #0084ff; }
.pb-sharebox--footer .pb-share__link--x        { color: #fff; }   /* X wordmark uses white on dark */
.pb-sharebox--footer .pb-share__link--bookmark { color: #F59E0B; }
.pb-sharebox--footer .pb-share__link--native   { color: #EC4899; }


/* ─────────────────────────────────────────────────────────────
   Homepage sidebar Book This Space slots — 250px on mobile
   (real 300×250 MPU), 350px on desktop for a slightly taller
   feel. Height only bumps at 900px+ so the mobile pass-through
   stays fine.
   ───────────────────────────────────────────────────────────── */
.gz-home-sidebar-slot {
  height: 250px;
  /* 300x250 MPU footprint, centred in the column. Was repeated inline on
     all three homepage slots (index.php) — folded in here so the three
     usages stay in step. This class is homepage-only; other sidebars use
     .gz-ad-placeholder--mpu, which fills the column width instead. */
  width: 300px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 900px) {
  .gz-home-sidebar-slot { height: 350px; }
}


/* ─────────────────────────────────────────────────────────────
   Darts merch/promo box — extracted from inc/darts-merch-ad.php
   so the classes work anywhere on the site (not just when the
   include is used). 3px solid darts-green border, dark gradient
   from .mag-promo-box, radial green glow, multi-colour tag pills.
   ───────────────────────────────────────────────────────────── */
.gz-dmerch-ad-box.mag-promo-box {
  margin-top: 1rem;
  border: 3px solid #16A34A;
  padding: 1.15rem 1rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.gz-dmerch-ad-box.mag-promo-box::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle at 50% 20%, rgba(22,163,74,0.22) 0%, rgba(22,163,74,0) 55%);
  pointer-events: none;
  z-index: 0;
}
.gz-dmerch-ad-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.gz-dmerch-ad-viz {
  display: flex;
  justify-content: center;
  margin: 0.6rem 0 0.35rem;
}
.gz-dmerch-ad-viz svg {
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45));
}
.gz-dmerch-ad-head {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  margin: 0.3rem 0 1.1rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.gz-dmerch-ad-lead {
  font-family: var(--font-editorial);
  font-size: 13.5px;
  color: #d8d3c8;
  line-height: 1.45;
  margin: 0 auto 0.85rem;
  max-width: 230px;
}
.gz-dmerch-ad-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}
.gz-dmerch-ad-tag {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-editorial);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 100px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.gz-dmerch-ad-tag:hover,
.gz-dmerch-ad-tag:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
.gz-dmerch-ad-tag--green  { background: #16A34A; }
.gz-dmerch-ad-tag--pink   { background: #E91E8C; }
.gz-dmerch-ad-tag--cyan   { background: #00BCD4; }
.gz-dmerch-ad-tag--yellow { background: #EAB308; color: #1a1a1a; }
.gz-dmerch-ad-cta {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: #16A34A;
  border: 2px solid #16A34A;
  padding: 0.6rem 1rem;
  line-height: 1.3;
  border-radius: 3px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 0 0 0 rgba(22,163,74,0.5), 0 2px 4px rgba(0,0,0,0.3);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.2s, transform 0.15s;
}
@media (max-width: 640px) {
  .gz-dmerch-ad-cta {
    font-size: 13px !important;
    padding: 0.65rem 1rem !important;
    line-height: 1.25 !important;
  }
}
.gz-dmerch-ad-cta:hover,
.gz-dmerch-ad-cta:focus-visible {
  background: #1fc959;
  border-color: #1fc959;
  box-shadow: 0 0 0 6px rgba(22,163,74,0.22), 0 3px 6px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}
.gz-dmerch-ad-stars {
  font-size: 11px;
  color: #fbbf24;
  letter-spacing: 0.4em;
  text-align: center;
  margin: 0.75rem 0 0;
  padding: 0;
}


/* ─────────────────────────────────────────────────────────────
   Sidebar box text +1.5px on mobile only. Applies to the common
   sidebar promo boxes (site-intro, editor's picks, sister sites,
   party events, bingo clubs, darts merch, book-this-space).
   Desktop typography stays at its designed sizes.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .mag-promo-box:not(.gz-devent-ad-box--upcoming) p,
  .mag-promo-box:not(.gz-devent-ad-box--upcoming) li,
  .mag-promo-box:not(.gz-devent-ad-box--upcoming) a,
  .mag-promo-box:not(.gz-devent-ad-box--upcoming) span:not(.gz-snake-label):not(.gz-snake-wrap),
  .mag-promo-box:not(.gz-devent-ad-box--upcoming) small,
  .gz-site-intro p,
  .gz-site-intro li,
  .gz-picks-title,
  .gz-picks-desc,
  .gz-picks-bullet,
  .gz-sister-desc,
  .gz-party-title,
  .gz-party-desc,
  .gz-local-title,
  .gz-local-desc,
  .gz-dmerch-ad-head,
  .gz-dmerch-ad-lead,
  .gz-dmerch-ad-tag,
  .gz-darts-bet-title,
  .gz-darts-bet-desc {
    font-size: calc(1em + 1.5px);
  }
}


/* Darts merch box — link list variant (used on homepage). Matches the
   subtle underlined-link style of .gz-du-link but stacked centered. */
.gz-dmerch-ad-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1.35rem;
  text-align: center;
}
.gz-dmerch-ad-links li {
  padding: 0.35rem 0;
  border-bottom: 1px dashed rgba(22,163,74,0.25);
}
.gz-dmerch-ad-links li:last-child { border-bottom: none; }
.gz-dmerch-ad-links a {
  display: inline-block;
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 700;
  color: #d8d3c8;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s ease, transform 0.15s ease;
}
.gz-dmerch-ad-links a span {
  display: inline-block;
  color: inherit;
  margin-right: 0.4rem;
  transition: transform 0.15s ease;
}
.gz-dmerch-ad-links a:hover,
.gz-dmerch-ad-links a:focus-visible {
  filter: brightness(1.15);
}
.gz-dmerch-ad-links a:hover span,
.gz-dmerch-ad-links a:focus-visible span {
  transform: translateX(2px);
}
/* Colour-coded rows so each destination has its own signal colour */
.gz-dmerch-ad-links--green { color: #6de5a3 !important; }
.gz-dmerch-ad-links--pink  { color: #ff8fc4 !important; }
.gz-dmerch-ad-links--cyan  { color: #7ee0f0 !important; }


/* ─────────────────────────────────────────────────────────────
   Unified sidebar box headline text — matches size across the
   three main promo boxes on the homepage sidebar. Mobile reads
   larger since these are the anchor titles on small screens.
   Applied last so it wins the specificity/order battle.
   ───────────────────────────────────────────────────────────── */
.gz-party-text,
.gz-local-title,
.gz-dmerch-ad-head {
  font-size: 18px !important;
}
@media (max-width: 640px) {
  .gz-party-text,
  .gz-local-title,
  .gz-dmerch-ad-head {
    font-size: 20px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   Unified sidebar button size — every promo-box CTA on any
   sidebar or homepage section reads at the same text size.
   14px desktop / 13px mobile. Padding matches so buttons line
   up regardless of colour theme. Applied last so it wins.
   Mobile breakpoint at 899px matches the sidebar-text-bump
   media query above so all sidebar rules fire together.
   ───────────────────────────────────────────────────────────── */
.mag-promo-box__link,
.gz-dmerch-ad-cta,
.mag-more-btn,
.mag-contributor-cta__btn,
.mag-contributor-cta--with-reporter .mag-contributor-cta__btn {
  font-size: 14px !important;
  padding: 0.6rem 1rem !important;
  line-height: 1.3 !important;
}
@media (max-width: 899px) {
  .mag-promo-box__link,
  .gz-dmerch-ad-cta,
  .mag-more-btn,
  .mag-contributor-cta__btn,
  .mag-contributor-cta--with-reporter .mag-contributor-cta__btn {
    font-size: 13px !important;
    padding: 0.65rem 1rem !important;
    line-height: 1.25 !important;
  }
}

/* ── Bottom leaderboard ad ────────────────────────────────────────
   This banner sits outside .mag-section, so it spans the full 980px
   .site-wrapper while the Mecca banner above is inset by that
   section's side padding. --inset re-applies the same padding so the
   two line up. Values mirror .mag-section (line 597) and its desktop
   bump (line 20689) — keep them in step if those change. */
.mag-mini-ad--inset {
  padding: 0 1.5rem;
  margin: 1.5rem auto 0;
}
@media (min-width: 768px) {
  .mag-mini-ad--inset { padding: 0 2.5rem; }
}

/* Leaderboard placeholder box — sibling to __content--strip (320x50)
   and __content--square (300x300). Fills its inset container. */
.mag-mini-ad__content--leaderboard {
  width: 100%;
  height: 90px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Quiz Jeeves mascot — centred stack step ──────────────────────
   The base .mag-greeting__mascot (line 1338) is float:right with a
   shape-outside so body text wraps her silhouette. The homepage
   Pick 'n' Mix box now reads as a vertical stack, so she is unfloated
   and centred instead, and sized up from 220px to 290px. The usable
   width inside .mag-greeting in this column is ~307px (980px wrapper,
   less section padding, less the 2rem grid gap, 3fr:2fr split, less
   1.25rem box padding), so 290px is close to the practical ceiling.
   Scoped to --jeeves so the darts / arcade / slots / bingo / providers
   mascots keep their float. Specificity deliberately matches
   .mag-greeting--purple .mag-greeting__mascot (line 4065) so this wins
   on source order rather than needing !important. */
.mag-greeting--purple .mag-greeting__mascot--jeeves {
  float: none;
  display: block;
  width: 290px;
  max-width: 100%;
  margin: 0.5rem auto 0.75rem;
  shape-outside: none;
  position: static;
}

/* Mobile keeps the existing 160px (line 4227), just re-centred. */
@media (max-width: 640px) {
  .mag-greeting--purple .mag-greeting__mascot--jeeves {
    width: 160px;
    margin: 0.25rem auto 0.5rem;
  }
}

/* ── Daily Dauble label — align left like the other section snake boxes
   (.mag-more-label "FROM THE NEWS DESK" and the Pick 'n' Mix label both
   inherit the default left alignment). The wide band's left column is
   text-align:center, which is what centres the Dauble logo and tagline,
   so the label is opted out on its own rather than changing the column.
   margin-bottom is left to the rule at line 16890. */
.gz-dauble-promo__wide-left .gz-snake-wrap {
  display: block;
  width: fit-content;
  margin-left: 0;
  margin-right: auto;
}

/* ── Quiz Jeeves description line ────────────────────────────────
   The base .mag-greeting__desc sets no font-family, so it falls
   through to --font-sans on body while the __h1 above it is Lora.
   Switched to the editorial serif to match the heading, then matched
   to .mag-lotto-results__slogan (line 5268) — italic, 700, 0.3px
   tracking, 16px / 18px at 768. Colour deliberately NOT copied from
   that rule: the slogan is white because it sits on the dark lotto
   box, and white would be invisible on this box's #fafafa.
   Scoped through .mag-greeting--purple, which is used only on the
   homepage Jeeves box (index.php:667), so no other greeting box is
   affected. Two-class specificity also beats the 13px mobile rules
   at lines 2050 and 3065 (both max-width:640px, single class). */
.mag-greeting--purple .mag-greeting__desc {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.45;
}
@media (min-width: 768px) {
  .mag-greeting--purple .mag-greeting__desc { font-size: 18px; }
}

/* ── Quiz Jeeves hook line ────────────────────────────────────────
   Last element in this box still inheriting --font-sans from body
   (base rule line 1367 sets no font-family). Moved to the editorial
   serif so the whole box is one face, and sized above the desc
   below it (16/18px) so it still reads as the hook line rather than
   being out-shouted by the paragraph under it.
   Italic and colour #000 already come from the base rule — not
   repeated here. Weight and tracking match the desc.
   Scoped through .mag-greeting--purple (index.php:667 only). Two-class
   specificity beats the 14px mobile rules at lines 2047 and 3064
   (both max-width:640px, single class). */
.mag-greeting--purple .mag-greeting__sub {
  font-family: var(--font-editorial);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.35;
}
@media (min-width: 768px) {
  .mag-greeting--purple .mag-greeting__sub { font-size: 20px; }
}

/* ── Homepage section padding ─────────────────────────────────────
   Replaces an inline style="max-width:1200px;margin:0 auto;padding:1rem"
   repeated on four homepage sections. The max-width and margin were dead:
   .site-wrapper is max-width 980px, so a 1200px cap can never apply, and
   margin:0 auto does nothing without an active max-width. Only the padding
   was real — it overrides .mag-section's 2rem 1.5rem (line 597) and its
   desktop bump to 2rem 2.5rem (line 20689). Same single-class specificity
   as those, so this wins purely on being later in the file. Keep it last. */
.gz-home-section-pad { padding: 1rem; }

/* Horizontal-only variant — for blocks that want the side padding but
   set their own vertical rhythm (the sign-off section and .daub-tabs). */
.gz-home-section-pad--x { padding-left: 1rem; padding-right: 1rem; padding-top: 0; padding-bottom: 0; }

/* ── Picks / featured-brand card refinements ──────────────────────
   Lifted verbatim out of an inline <style> block in inc/editors-picks.php
   so the rules live with the rest of the stylesheet and reach every page
   that uses .mag-picks-box — not only the pages that happen to include
   that file. Used by Editor's Picks and by the Featured UK Lotto Sites
   box on lotto-results.php.

   Bumped logo circle, tighter card padding so the logo doesn't sit in a
   pool of whitespace. Tighter row gap so 5 cards stack cleanly. */
.mag-picks-box .gz-lotto-op-card__img-circle { width: 76px; height: 76px; }
.mag-picks-box .gz-lotto-op-card--featured .gz-lotto-op-card,
.mag-picks-box .gz-lotto-op-card { padding: 0.6rem 1.5rem; gap: 0.6rem; margin-bottom: 0.4rem; }
.mag-picks-box .gz-lotto-op-card:last-child { margin-bottom: 0; }

/* Keep the natural row layout but centre the logo+body unit within the
   card so the logo isn't hugging the left edge. All logo circles are the
   same 76px, so they line up vertically down the stack. */
.mag-picks-box .gz-lotto-op-card { justify-content: center; }

/* Mobile-only: stack logo above the name/rating/CTA. */
@media (max-width: 640px) {
  .mag-picks-box .gz-lotto-op-card { flex-direction: column; align-items: center; text-align: center; }
  .mag-picks-box .gz-lotto-op-card__body { align-items: center; text-align: center; }
  .mag-picks-box .gz-lotto-op-card__gs { justify-content: center; display: flex; }
}

/* Desktop-only: bigger brand names + more air between each card so the box
   reads as a proper editorial list, not a tight sidebar stack. */
@media (min-width: 641px) {
  .mag-picks-box .gz-lotto-op-card__name { font-size: 17px; }
  .mag-picks-box .gz-lotto-op-card--featured { padding: 1rem 0; }
  .mag-picks-box .gz-lotto-op-card,
  .mag-picks-box .gz-lotto-op-card--featured .gz-lotto-op-card { margin-bottom: 1.75rem; }
  .mag-picks-box .gz-lotto-op-card:last-child { margin-bottom: 0; }
  .mag-picks-box .mag-picks-box__more { padding: 1rem 1.25rem; }
  .mag-picks-box .mag-picks-box__footer { padding: 1.15rem 1rem; }
}

/* ── Lotto theme: rose → peach gradient ───────────────────────────
   Replaces the flat --lotto-peach (#E8913A) across the lotto hub and
   lotto-hot-cold. #F43F5E is the site rose already used by the party
   label and the lotto rainbow, so the section reads as part of the
   magazine rather than an orphan colour.

   Appended at the end deliberately: these carry the same single-class
   specificity as the originals (lines 6880, 7065, 7455, 7893, 7904) and
   win on source order alone, so nothing above needs editing. Keep last.

   --lotto-peach itself is untouched — anything still referencing the
   variable keeps the solid colour, which is what small UI needs. */

/* Label chip — solid fill becomes the gradient. */
.gz-lotto-label {
  background: linear-gradient(135deg, #F43F5E, #E8913A);
}

/* Section divider — already a gradient, so only the stops change. */
.mag-faded-border--peach {
  background: linear-gradient(90deg, transparent 0%, #F43F5E 20%, #E8913A 80%, transparent 100%);
}

/* Animated snake border — rose leading into peach round the loop. */
.gz-snake-wrap--peach::before {
  background: conic-gradient(from var(--gz-angle, 0deg), #fff 0deg, #F43F5E 60deg, #e8613f 120deg, var(--lotto-peach) 180deg, #f0a854 240deg, #fff 300deg, #F43F5E 360deg);
}

/* Heading spans and drop caps — gradient text needs background-clip,
   the same technique as .mag-greeting--arcade and --providers. Only
   applied to large type; small text stays solid because a gradient
   across a 14px glyph reads washed out. */
.gz-text-peach,
.drop-cap--peach {
  background: linear-gradient(135deg, #F43F5E, #E8913A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Featured UK Lotto Sites box — rose → peach gradient frame ─────
   .gz-lotto-op-card--featured falls back to `border: 3px solid
   var(--gz-game-color, #16A34A)` (line 9153). lotto-results.php never
   sets --gz-game-color, so this box was rendering with a green frame
   that belonged to no part of the page.

   Scoped to --hub so only the lotto hub's box changes; the same card
   pattern on the individual game pages is left alone.

   border-image is used rather than a solid colour so the frame carries
   the same rose → peach as the rest of the lotto theme. It ignores
   border-radius, which is fine here — the box is already radius 0. */
.gz-lotto-ops-wrap--hub .gz-lotto-op-card--featured {
  border: 3px solid transparent;
  border-top: none;
  border-image: linear-gradient(135deg, #F43F5E, #E8913A) 1;
}

/* Logo ring picks up the theme too, replacing the pink Editor's Picks
   uses. Solid rather than a gradient: it is a 76px circle, and
   border-image would square the corners off. */
.gz-lotto-ops-wrap--hub .gz-lotto-op-card__img-circle {
  border-color: #F43F5E;
}

/* ── Featured UK Lotto Sites — single rose frame, rose throughout ──
   Two corrections to the block above.

   1. Double border. Adding .mag-picks-box to this wrapper for the
      Editor's Picks card sizing also brought its `border: 1px solid
      #e5e5e5` (line 1583), which sat outside the 3px gradient frame on
      .gz-lotto-op-card--featured. The outer one is removed here — the
      gradient frame is the box's border.

   2. Leftover colours. .gz-lotto-ops-wrap--hub sets --gz-game-color and
      several hardcoded #E8913A rules (line 14692 onward), and
      .mag-picks-box forces #C71585 on the buttons (line 14716). Both
      were fighting the rose theme. Everything in this box is rose now.

   All scoped to --hub, so Editor's Picks itself and the lotto game
   pages are untouched. */

.gz-lotto-ops-wrap--hub.mag-picks-box {
  border: none;
  box-shadow: none;
}

.gz-lotto-ops-wrap--hub { --gz-game-color: #F43F5E; }

/* Label chip — beats .gz-lotto-ops-wrap--hub .mag-label on source order. */
.gz-lotto-ops-wrap--hub .mag-label {
  background: linear-gradient(135deg, #F43F5E, #E8913A);
}

/* Buttons — rose, over both the peach and the Editor's Picks pink. */
.gz-lotto-ops-wrap--hub .gz-lotto-op-card__btn--review {
  background: #F43F5E;
  color: #fff;
}
.gz-lotto-ops-wrap--hub .gz-lotto-op-card__btn--visit {
  background: #fff;
  color: #F43F5E;
  border: 2px solid #F43F5E;
}
.gz-lotto-ops-wrap--hub .gz-lotto-op-card__btn--visit:hover {
  background: #F43F5E;
  color: #fff;
}

/* ── Lotto hub — mini draw cards ──────────────────────────────────
   A compact take on the original .gz-lotto-card-* design rather than a
   different component: same gradient frame, same rounded corners, same
   white inner. What made those too big was .gz-lotto-card-row's
   min-height:160px and the stacked layout.

   The date treatment is the game pages' past-draw card — .gz-lgt-date-bar
   with .gz-lgt-date-text — a coloured bar across the top carrying the
   draw name and the date those numbers are for, balls beneath. Reusing it
   means a draw date reads identically here and on every game page. */

.gz-lotto-strips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 1.25rem;
}

/* Plain neutral card. The 2px gradient ring this used to carry read as a
   bevel — the draw gradients are six-stop flag ramps that loop back on
   themselves, which is a dated look at that size. Colour now comes from
   the date bar alone, which is plenty of identity and far cleaner. */
.gz-lotto-strip {
  display: block;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.gz-lotto-strip:hover {
  border-color: var(--gz-strip-colour, #F43F5E);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.gz-lotto-strip__inner {
  display: block;
  background: #fff;
  min-width: 0;
}

/* Date bar — .gz-lgt-date-bar supplies the padding; this adds the row
   layout so the draw name and the drawn-on date sit at either end. */
.gz-lotto-strip__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.gz-lotto-strip__name {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.01em;
}
.gz-lotto-strip__drawn {
  /* !important because .gz-lgt-date-text sets 12px and both are one class. */
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.92;
  white-space: nowrap;
}

.gz-lotto-strip__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.6rem 0.9rem;
  padding: 0.6rem 0.85rem 0.65rem;
}

/* Kill the stacked-layout margin the shared ball row carries, and let
   the balls sit left rather than centred. */
.gz-lotto-strip__balls.mag-lotto-mini__balls {
  margin-bottom: 0;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: wrap;
}

.gz-lotto-strip__pending {
  font-family: var(--font-editorial);
  font-size: 14px;
  font-style: italic;
  color: #6b6b6b;
}

.gz-lotto-strip__meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  justify-self: end;
}

/* Next draw is the thing readers scan for, so it is set in the draw's
   own colour with a quiet label above the value. */
.gz-lotto-strip__next {
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 800;
  color: var(--gz-strip-colour, #F43F5E);
  white-space: nowrap;
  line-height: 1.2;
}
.gz-lotto-strip__next-lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a828a;
}

/* Visible tap affordance. The whole card is the anchor, so this is a
   span styled as a button rather than a nested link. */
.gz-lotto-strip__btn {
  font-family: var(--font-editorial);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.38rem 0.7rem;
  border-radius: 6px;
  border: 2px solid var(--gz-strip-colour, #F43F5E);
  color: var(--gz-strip-colour, #F43F5E);
  background: #fff;
  transition: background 0.18s, color 0.18s;
}
.gz-lotto-strip:hover .gz-lotto-strip__btn {
  background: var(--gz-strip-colour, #F43F5E);
  color: #fff;
}

/* Desktop — the cards sit in a wide column, so the type can carry more
   size than the mobile baseline above. */
@media (min-width: 768px) {
  .gz-lotto-strip__name     { font-size: 18px; }
  .gz-lotto-strip__drawn    { font-size: 12.5px !important; }
  .gz-lotto-strip__pending  { font-size: 15px; }
  .gz-lotto-strip__next     { font-size: 16px; }
  .gz-lotto-strip__next-lbl { font-size: 11px; }
  .gz-lotto-strip__btn      { font-size: 12.5px; padding: 0.45rem 0.85rem; }
  .gz-lotto-strip__body     { padding: 0.7rem 1rem 0.75rem; }
}

@media (max-width: 640px) {
  /* Draw name first, drawn-date beneath — same order as the next-draw
     panel in the sidebar, so both read the same way on a phone. */
  .gz-lotto-strip__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
  }
  .gz-lotto-strip__drawn { opacity: 1; }

  .gz-lotto-strip__body {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem 0.8rem;
  }

  /* Next draw hard left, button hard right, with air above so the row
     reads as its own band rather than crowding the balls. */
  .gz-lotto-strip__meta {
    justify-self: stretch;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.15rem;
    padding-top: 0.65rem;
    border-top: 1px solid #f0f0f0;
  }
}


/* ── Lucky Dip box — lotto-themed sidebar panel ───────────────────
   Sits on .mag-promo-box (dark panel, coloured frame — the homepage
   sidebar pattern) and retints it for the lotto section. Was a green
   .mag-greeting box, which matched nothing else on the page.

   The dark panel is deliberate: the generated balls are bright and
   read far better against it than against white. */

.gz-lucky-dip-box {
  border-color: #F43F5E;
  text-align: center;
  /* Needed for the drifting balls: they position against this box and
     must clip at its edges rather than escaping across the page. */
  position: relative;
  overflow: hidden;
}

/* Balls sit behind, content in front. The shared .gz-coupon-ball sets
   z-index 0, so lifting the children is enough. */
.gz-lucky-dip-box > *:not(.gz-coupon-ball) {
  position: relative;
  z-index: 1;
}

/* Brighter than on the white coupon card — at the coupon's 0.22-0.38
   these all but vanish against the dark panel. */
.gz-lucky-dip-box .gz-coupon-ball { opacity: 0.5; }

/* Scaled up from the coupon-card sizes — this panel is wider than the
   brand-page coupon, so the originals read as specks against it. */
.gz-lucky-dip-box .gz-coupon-ball--1 { width: 70px; height: 70px; }
.gz-lucky-dip-box .gz-coupon-ball--2 { width: 42px; height: 42px; }
.gz-lucky-dip-box .gz-coupon-ball--3 { width: 30px; height: 30px; }
.gz-lucky-dip-box .gz-coupon-ball--4 { width: 56px; height: 56px; }
.gz-lucky-dip-box .gz-coupon-ball--5 { width: 24px; height: 24px; }
.gz-lucky-dip-box .gz-coupon-ball--6 { width: 48px; height: 48px; }
.gz-lucky-dip-box .gz-coupon-ball--7 { width: 34px; height: 34px; }
.gz-lucky-dip-box .gz-coupon-ball--3,
.gz-lucky-dip-box .gz-coupon-ball--5,
.gz-lucky-dip-box .gz-coupon-ball--7 { opacity: 0.38; }

@media (prefers-reduced-motion: reduce) {
  .gz-lucky-dip-box .gz-coupon-ball { animation: none; }
}

/* The panel is dark, so the shared select and note styles need
   lifting off their light-background defaults. */
/* Graphic + headline, following .gz-domchk-viz / .gz-domchk-head on the
   homepage sidebar box so the two read as the same family. */
.gz-lucky-dip-box .gz-lucky-dip-viz {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 0.2rem;
}
.gz-lucky-dip-box .gz-lucky-dip-viz svg {
  width: 62px;
  height: 62px;
  filter: drop-shadow(0 3px 6px rgba(244,63,94,0.45));
}

.gz-lucky-dip-box .gz-lucky-dip-head {
  font-family: var(--font-editorial);
  font-size: 26px;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  margin: 0.3rem 0 0.35rem;
  line-height: 1.1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.35);
}

.gz-lucky-dip-box .gz-lucky-dip-intro {
  font-family: var(--font-editorial);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
  margin: 0 auto 0.9rem;
  max-width: 300px;
}

.gz-lucky-dip-box .gz-lucky-dip-select {
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(244,63,94,0.55);
  color: #fff;
  border-radius: 0;
  /* 16px minimum — anything smaller makes iOS Safari zoom the page on
     focus, which is jarring inside a box people tap repeatedly. */
  font-size: 16px;
  padding: 0.7rem 0.75rem;
  font-family: var(--font-editorial);
  font-weight: 600;
  max-width: 320px;
  margin: 0 auto 0.6rem;
}
.gz-lucky-dip-box .gz-lucky-dip-select option { background: #1a1a1a; color: #fff; }

/* Reserve the ball row's height so the box doesn't jump when numbers
   land — it starts empty and is filled by script. */
.gz-lucky-dip-box .gz-lucky-dip-balls {
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0 0.75rem;
}

.gz-lucky-dip-box .gz-lucky-dip-btn {
  background: linear-gradient(135deg, #F43F5E, #E8913A);
  color: #fff;
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  margin-top: 0.25rem;
}
.gz-lucky-dip-box .gz-lucky-dip-btn:hover { filter: brightness(1.08); }

.gz-lucky-dip-box .gz-lucky-dip-note {
  color: rgba(255,255,255,0.55);
  margin-top: 0.7rem;
}

/* ── Next-draw countdown panel ────────────────────────────────────
   Built to the homepage sidebar house style (.mag-promo-box line 1997,
   .gz-domchk-* line 22165): dark gradient panel, 3px coloured frame,
   a faint diagonal stripe for texture, and a big italic editorial
   headline with a text shadow.

   Going dark also means .gz-tonight-timers renders in its native
   colours — that component was built for dark panels, so the earlier
   light-background overrides are gone rather than fighting it.

   --gz-nx-colour is set inline per draw from the same $draws entry the
   cards below use, so Lotto is rose, EuroMillions blue, Irish green. */

.gz-nextdraw {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1rem 1.25rem;
  margin-bottom: 1rem;
  text-align: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 3px solid var(--gz-nx-colour, #F43F5E);
  box-shadow: var(--shadow-dark);
}

/* Diagonal stripe in the draw's own colour, same trick the Scam Check
   box uses. Sits behind everything and ignores pointer events. */
.gz-nextdraw::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-135deg,
    var(--gz-nx-colour, #F43F5E) 0 10px,
    #1a1a1a 10px 20px);
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}
.gz-nextdraw > * { position: relative; z-index: 1; }

.gz-nextdraw__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0.6rem 0 0.8rem;
}

/* Calendar tile — white card against the dark panel so the date pops. */
.gz-nextdraw__cal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-height: 58px;
  background: #fff;
  border-top: 4px solid var(--gz-nx-colour, #F43F5E);
  box-shadow: 0 3px 8px rgba(0,0,0,0.45);
  line-height: 1;
  flex: 0 0 auto;
}
.gz-nextdraw__cal-day {
  font-family: var(--font-editorial);
  font-size: 26px;
  font-weight: 900;
  color: #1a1a1a;
  padding-top: 0.35rem;
}
.gz-nextdraw__cal-mon {
  font-family: var(--font-editorial);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--gz-nx-colour, #F43F5E);
  padding: 0.25rem 0 0.35rem;
}

.gz-nextdraw__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.2rem;
}
.gz-nextdraw__game {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  line-height: 1.05;
  text-shadow: 0 2px 4px rgba(0,0,0,0.35);
}
.gz-nextdraw__when {
  font-family: var(--font-editorial);
  font-size: 13.5px;
  font-weight: 600;
  color: #d8d3c8;
  line-height: 1.3;
}

.gz-nextdraw__timers { justify-content: center; }

.gz-nextdraw__lastlbl {
  font-family: var(--font-editorial);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0.95rem 0 0.4rem;
}
.gz-nextdraw__balls.mag-lotto-mini__balls {
  margin-bottom: 0;
  justify-content: center;
  flex-wrap: wrap;
  /* 4px not 5px: EuroMillions shows 7 balls (5 + 2 Lucky Stars) and at the
     38px desktop size the wider gap overflows this column by ~1px, which
     would drop the Lucky Stars onto a second line. */
  gap: 4px;
}

/* Button matches the sidebar CTA style — gradient, inset highlight,
   italic editorial, slight letterspacing. */
.gz-nextdraw__btn {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.65rem 1.1rem;
  border: 2px solid var(--gz-nx-colour, #F43F5E);
  background: linear-gradient(180deg, #ffffff26 0%, #00000026 100%), var(--gz-nx-colour, #F43F5E);
  color: #fff;
  font-family: var(--font-editorial);
  font-weight: 800;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: filter 0.15s, transform 0.15s;
}
.gz-nextdraw__btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  color: #fff;
}

/* Mobile — draw name first, calendar tile beneath it.
   The row is a flex row on desktop with the tile left and the text right;
   at narrow widths a long name like "Thunderball" cannot shrink past the
   fixed 56px tile and overflows the panel. Stacking fixes the overflow and
   puts the name first, which is what the panel is for.

   column-reverse rather than reordering the markup: the <time> element
   stays first in the DOM, so the machine-readable date still leads. */
@media (max-width: 767px) {
  .gz-nextdraw__row {
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.55rem;
  }
  .gz-nextdraw__meta {
    align-items: center;
    text-align: center;
  }
  .gz-nextdraw__game {
    font-size: 20px;
    line-height: 1.15;
    white-space: normal;
    /* break-word, not anywhere. `anywhere` also feeds into min-content
       sizing, so inside a flex item the browser treats the word as freely
       breakable and splits "Thunderball" mid-word even when there is room.
       break-word only breaks when the word genuinely cannot fit. */
    overflow-wrap: break-word;
    hyphens: none;
  }
  .gz-nextdraw__when { font-size: 13.5px; }
}

@media (max-width: 420px) {
  .gz-nextdraw__game { font-size: 18px; }
  .gz-nextdraw__when { font-size: 12.5px; }
  .gz-nextdraw .gz-tonight-timers { gap: 3px; }
}

/* ── More Lottos scroller ─────────────────────────────────────────
   18 lottos in the hub dropdown. Shows exactly 9 at a time with arrow
   buttons top and bottom.

   .gz-ml-scroll takes over the absolute positioning that
   .gz-lgt-rc-more__list--scroll used to own, so the buttons sit inside
   the same floating panel as the list rather than outside it. The list
   keeps all its own classes, so every link renders identically. */

/* Always-open variant — a self-contained sidebar box, not a bare list
   trailing the block above it. The outer panel carries the frame and the
   snake label; the scroller inside drops its own border so there is one
   frame, not two nested. */
.gz-lgt-rc-more--open {
  position: static;
  background: #fff;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #F43F5E, #E8913A) 1;
  padding: 0.9rem 0.85rem 0.85rem;
  margin-bottom: 1rem;
  text-align: center;
}
.gz-lgt-rc-more--open .gz-snake-wrap { margin-bottom: 0.5rem; }
.gz-lgt-rc-more--open .gz-ml-scroll {
  position: static;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  text-align: left;
}
.gz-lgt-rc-more--open .gz-ml-scroll__list {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, #E8913A 25%, #E8913A 75%, transparent 100%) 1;
}

.gz-ml-scroll {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border: 1.5px solid var(--gz-game-color, #F43F5E);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
}

/* Row height is pinned so "9 rows" is exact rather than approximate —
   without it the height depends on font metrics and the count drifts. */
.gz-ml-scroll .gz-lgt-rc-more__link {
  min-height: 38px;
  box-sizing: border-box;
}

.gz-ml-scroll__list {
  position: static;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* 7 rows by default — the mobile case, where the sidebar stacks below
     the main column and there is room to show more. Row height is pinned
     at 38px above so the count is exact. Desktop drops to 3 below. */
  max-height: calc(38px * 7);
  overflow-y: auto;
  scroll-behavior: smooth;
  /* Thin scrollbar — the arrows are the primary control. */
  scrollbar-width: thin;
  scrollbar-color: #F43F5E #f3f3f3;
}
.gz-ml-scroll__list::-webkit-scrollbar { width: 6px; }
.gz-ml-scroll__list::-webkit-scrollbar-track { background: #f3f3f3; }
.gz-ml-scroll__list::-webkit-scrollbar-thumb { background: #F43F5E; border-radius: 3px; }

.gz-ml-scroll__btn {
  display: block;
  width: 100%;
  padding: 0.3rem 0;
  border: none;
  background: linear-gradient(135deg, #F43F5E, #E8913A);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
}
.gz-ml-scroll__btn:hover { filter: brightness(1.1); }
/* Dimmed rather than hidden at each end, so the panel height never jumps. */
.gz-ml-scroll__btn[disabled] { opacity: 0.35; cursor: default; }
.gz-ml-scroll__btn--up   { border-bottom: 1px solid rgba(255,255,255,0.25); }
.gz-ml-scroll__btn--down { border-top: 1px solid rgba(255,255,255,0.25); }

/* Generated balls on the dark panel need separating from it. The bonus
   ball is background:#333 (line 8058), which against the #1a1a1a-#2d2d2d
   panel is roughly 1.2:1 — invisible.

   Rings are box-shadow, not border: the balls have fixed width/height, so
   a border would eat into them and shrink the number inside. box-shadow
   sits outside the box and costs no layout. */
.gz-lucky-dip-box .gz-dip-ball {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
}
.gz-lucky-dip-box .gz-dip-ball--bonus {
  box-shadow: 0 0 0 2px #fff;
}

/* Lucky Dip — larger generated balls and headline on desktop. */
@media (min-width: 768px) {
  .gz-lucky-dip-box .gz-dip-ball { width: 40px; height: 40px; font-size: 15px; }
  .gz-lucky-dip-box .gz-lucky-dip-balls { min-height: 46px; }
  .gz-lucky-dip-box .gz-lucky-dip-head { font-size: 29px; }
}



/* More Lotto Betting — condensed on desktop, where the panel sits in a
   narrow column alongside five other blocks and a long list pushes them
   well down the page. The arrows still reach all 17. */
@media (min-width: 768px) {
  .gz-ml-scroll__list { max-height: calc(38px * 6); }
}

/* ── Latest results recap ─────────────────────────────────────────
   Rides on .mag-lotto-results — same dark panel, peach frame and centred
   layout as the homepage lotto box. Only the per-draw link wrapper and
   the row spacing are new. */
.gz-lastres { margin-bottom: 1rem; }

.gz-lastres__draw {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.2rem 0 0.5rem;
  transition: background 0.15s;
}
.gz-lastres__draw:hover { background: rgba(255,255,255,0.05); }

/* Faded peach divider between draws, echoing mag-faded-border rather
   than a flat rule. Not before the first. */
.gz-lastres__draw + .gz-lastres__draw {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, #E8913A 25%, #E8913A 75%, transparent 100%) 1;
  margin-top: 0.35rem;
  padding-top: 0.6rem;
}

/* Tighter than the homepage box — five draws stacked in a sidebar
   column rather than one draw with room to breathe. */
.gz-lastres .mag-lotto-results__title { margin: 0.35rem 0 0.5rem; font-size: 16px; }
.gz-lastres .mag-lotto-mini__balls { margin-bottom: 0.4rem; justify-content: center; gap: 4px; }
.gz-lastres .gz-lotto-date { margin: 0; font-size: 12px; }

/* ── Jump back to the draws ───────────────────────────────────────
   Centring wrapper for the snake CTA that sits under Part 1 on the
   lotto hub. brand.php has an equivalent (.gz-jump-top-wrap) but it is
   defined in an inline <style> block in that file, so it isn't
   available here — hence a proper rule rather than reusing it. */
.gz-lotto-jump {
  text-align: center;
  margin: 1.5rem 0 0.75rem;
}

/* ── Lotto hub sidebar — mobile sizing ────────────────────────────
   Below 768px the sidebar drops under the main column at full width,
   so the balls and the snake labels have room to breathe. They were
   inheriting the narrow-column sizes, which read as cramped once the
   column is no longer narrow. */
@media (max-width: 767px) {
  /* Balls in the Latest Results panel — the shared --sm ramp starts at
     30px for genuinely tight spots; here there is width to spare. */
  .gz-lastres .mag-lotto-mini__balls--sm .mag-lotto-mini__ball {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  .gz-lastres .mag-lotto-mini__balls { gap: 6px; }

  /* Panel headings — the snake labels sitting above each sidebar box. */
  .gz-nextdraw .gz-lotto-label,
  .gz-lastres .gz-lotto-label,
  .gz-lgt-rc-more--open .gz-lotto-label,
  .gz-lucky-dip-box .gz-lotto-label,
  .gz-lotto-ops-wrap--hub .gz-lotto-label {
    font-size: 14px !important;
    letter-spacing: 1.6px;
  }

  /* Per-draw titles inside Latest Results — star drops onto its own line
     above the draw name. Wrapped in a span so it can go block-level; the
     markup stays a single heading, so the accessible name is still
     "Lotto" rather than being split across elements. */
  .gz-lastres .mag-lotto-results__title { font-size: 18px; }
  .gz-lastres__star {
    display: block;
    line-height: 1;
    margin-bottom: 0.2rem;
    font-size: 13px;
    opacity: 0.75;
  }
  .gz-lastres .gz-lotto-date { font-size: 13px; }
}

/* ── Game-page countdown card — matched to the hub panel ──────────
   Restyles .gz-tonight-card to the same visual language as .gz-nextdraw
   on the lotto hub: dark gradient panel, faint diagonal stripe in the
   game's own colour, italic editorial name.

   Was filled with the game's flag gradient ($timer_bg), which at panel
   size reads as a bevel — the same reason those gradients came off the
   mini draw cards. The colour still shows: .gz-tonight-snake-border
   outside animates in it, and --gz-nx-colour drives the accents here.
   No border of its own — the snake wrapper is the frame. */

.gz-tonight-card--panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 6px;
  padding: 0 0 0.85rem;
}
.gz-tonight-card--panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-135deg,
    var(--gz-nx-colour, #F43F5E) 0 10px,
    #1a1a1a 10px 20px);
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}
.gz-tonight-card--panel > * { position: relative; z-index: 1; }

/* Editorial italic, matching .gz-nextdraw__game — was --font-dauble with
   white-space:nowrap, which is what clipped long names like Thunderball. */
.gz-tonight-card--panel .gz-tonight-card__game {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: none;
  text-shadow: 0 2px 4px rgba(0,0,0,0.35);
}
.gz-tonight-card--panel .gz-tonight-card__draw-label {
  font-family: var(--font-editorial);
  font-size: 13.5px;
  font-weight: 600;
  color: #d8d3c8;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .gz-tonight-card--panel .gz-tonight-card__game { font-size: 20px; }
}
@media (max-width: 420px) {
  .gz-tonight-card--panel .gz-tonight-card__game { font-size: 18px; }
}

/* ── Game-page featured operators — matched to the hub's box ──────
   .mag-picks-box supplies the card sizing and spacing, but it also
   brings `border: 1px solid #e5e5e5` (line 1583) and forces #C71585 on
   the buttons (line 14716). Both are cancelled here and replaced with
   the page's own theme, exactly as --hub does for the lotto hub. */

.gz-lotto-ops-wrap--game.mag-picks-box {
  border: 3px solid transparent;
  border-image: linear-gradient(135deg,
    var(--gz-game-color, #F43F5E),
    var(--gz-game-color, #F43F5E)) 1;
  box-shadow: none;
}

.gz-lotto-ops-wrap--game .gz-lotto-op-card__img-circle {
  border-color: var(--gz-game-color, #F43F5E);
}

.gz-lotto-ops-wrap--game .gz-lotto-op-card__btn--review {
  background: var(--gz-game-color, #F43F5E);
  color: #fff;
}
.gz-lotto-ops-wrap--game .gz-lotto-op-card__btn--visit {
  background: #fff;
  color: var(--gz-game-color, #F43F5E);
  border: 2px solid var(--gz-game-color, #F43F5E);
}
.gz-lotto-ops-wrap--game .gz-lotto-op-card__btn--visit:hover {
  background: var(--gz-game-color, #F43F5E);
  color: #fff;
}

/* ── Themed greeting box ──────────────────────────────────────────
   Reads --gz-game-color instead of hardcoding a colour, so one class
   serves every lotto game page. Replaces .mag-greeting--green on
   inc/lotto-game-template.php, which painted every game the same
   #16A34A regardless of its own theme. */
.mag-greeting--themed {
  border-top-color: var(--gz-game-color, var(--pink));
  border-bottom-color: var(--gz-game-color, var(--pink));
}
.mag-greeting--themed .mag-greeting__h1 { color: var(--gz-game-color, var(--pink)); }
.mag-greeting--themed .mag-greeting__stars,
.mag-greeting--themed .mag-greeting__stars-bottom { color: var(--gz-game-color, var(--pink)); }

/* Banner divider on the game pages — themed from the page's own
   --gz-game-color rather than an inline gradient per instance. */
.gz-lgt-banner-rule {
  background: linear-gradient(90deg, transparent 0%,
    var(--gz-game-color, var(--pink)) 20%,
    var(--gz-game-color, var(--pink)) 80%, transparent 100%);
}

/* Draw cards are jump targets for the sidebar lottery list, so they need
   the same offset as other anchored sections — without it the card lands
   under the sticky masthead. Matches [id^="section-"] above. */
[id^="draw-"],
[id^="lotto-"],
[id="the-arcade"],
[id="contact"],
[id="gz-agd-top"],
[id="all-games"] { scroll-margin-top: 80px; }

/* ── All Lotteries — sidebar jump list ────────────────────────────
   Built to match the other sidebar panels: a 3px gradient frame around a
   dark inner, the same shape as .mag-promo-box, .gz-sister-box and
   .gz-party-box. A white box here sat oddly next to them.

   Arrow means it leaves for a page, down-caret means it jumps to that
   draw's card on this page. */

.gz-alllot {
  position: relative;
  display: block;
  padding: 3px;                       /* the frame */
  background: linear-gradient(135deg, #F43F5E, #FB923C);
  box-shadow: var(--shadow-dark);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.gz-alllot__inner {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  padding: 0.9rem 0.95rem 1rem;
  position: relative;
  overflow: hidden;
}

/* Faint diagonal stripe, same device as the other dark panels. */
.gz-alllot__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-135deg,
    #F43F5E 0 10px, #1a1a1a 10px 20px);
  opacity: 0.07;
  pointer-events: none;
}
.gz-alllot__inner > * { position: relative; z-index: 1; }

.gz-alllot__country {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-editorial);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d8d3c8;
  margin: 1.1rem 0 0.4rem;
}
.gz-alllot__country:first-of-type { margin-top: 0.2rem; }
.gz-alllot__country::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(244,63,94,0.7) 0%, rgba(255,255,255,0.12) 60%, transparent 100%);
}

.gz-alllot__list { list-style: none; margin: 0; padding: 0; }

/* The scroll area. Capped at both sizes: unbounded, a long list pushes the
   Lucky Dip and the MPU far down the column on desktop and becomes a wall
   between content and footer on mobile.

   overflow-x and touch-action are explicit because setting overflow-y makes
   the other axis compute from `visible` to `auto`, which let the panel be
   dragged sideways. */
.gz-alllot__scroll {
  /* About eight rows. Was 420px (~eleven) — with the larger type that made
     the panel taller than the draw cards it points at, and pushed the Lucky
     Dip and MPU well down the column. */
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.25rem;
  /* Fades the last row so it is clear there is more below. */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(#000 calc(100% - 28px), transparent 100%);
}
.gz-alllot__scroll::-webkit-scrollbar { width: 4px; }
.gz-alllot__scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); }
.gz-alllot__scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.28);
  border-radius: 3px;
}
.gz-alllot__scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.45); }

/* Country headings stay put while scrolling past them. Opaque, or rows
   show through underneath. */
.gz-alllot__country {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1f1f1f;
}

.gz-alllot__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.52rem 0.4rem;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.16s;
}
/* Background only — shifting padding on hover moved every row sideways,
   and on touch the hover state sticks after a tap so it stayed shifted.
   Guarded to devices that actually hover, for the same reason. */
@media (hover: hover) {
  .gz-alllot__link:hover { background: rgba(255,255,255,0.07); }
}

/* Miniature lottery ball, so the list speaks the same language as the
   results it points at. */
.gz-alllot__dot {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.8) 0 22%, transparent 45%),
    var(--lotto-rose, #F43F5E);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85), 0 1px 4px rgba(0,0,0,0.5);
}

.gz-alllot__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  line-height: 1.25;
}
@media (hover: hover) {
  .gz-alllot__link:hover .gz-alllot__name { color: #FBBF9C; }
}

.gz-alllot__go {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  transition: color 0.16s;
}
@media (hover: hover) {
  .gz-alllot__link:hover .gz-alllot__go { color: #FBBF9C; }
}

@media (max-width: 767px) {
  .gz-alllot__inner { padding: 0.9rem 0.9rem 1rem; }

  /* Everything up a step on a phone — the sidebar is full width here, so
     the sizes tuned for a narrow column read as cramped. Rows also get
     more height so they are comfortable to tap. */
  .gz-alllot__name    { font-size: 16px; }
  .gz-alllot__link    { padding: 0.62rem 0.4rem; gap: 0.7rem; }
  .gz-alllot__country { font-size: 12px; letter-spacing: 0.1em; }
  .gz-alllot__dot     { width: 15px; height: 15px; }
  .gz-alllot__go      { font-size: 14px; }

  /* Nothing inside may exceed the container width, or there is something
     to pan to even with overflow-x hidden. Long draw names wrap instead. */
  .gz-alllot__list,
  .gz-alllot__link  { max-width: 100%; }
  .gz-alllot__name  { overflow-wrap: break-word; word-break: normal; }

  /* Shorter on a phone — the sidebar is below the article here, so a tall
     box sits between the content and the footer. */
  .gz-alllot__scroll { max-height: 340px; }

  /* Snake labels are 12px, tuned for a narrow sidebar. Full width on a
     phone they read as small — up to 14px. */
  .mag-section--lotto .gz-lotto-label,
  .mag-section--lotto .gz-lotto-label.gz-snake-label { font-size: 14px !important; }

  .gz-alllot__country { margin-top: 0.9rem; padding: 0.35rem 0 0.28rem; }
}

/* ── Lotto hub — one accent colour ────────────────────────────────
   The hub carries a lot of parts in one column: section labels, draw
   cards, the jump list, the countdown and the promo boxes. Giving every
   draw its own theme colour meant a dozen accents competing with no
   hierarchy, so there is a single rose accent throughout.

   Deliberately NOT changed:
   • Snake labels keep their peach — that is the component's own colour
     and it is what makes them read as labels.
   • Ball colours in results come from the number ranges, so they carry
     meaning rather than decoration. */

/* All Lotteries — one accent for every ball. */
.mag-section--lotto .gz-alllot__country { color: #d8d3c8; }
.mag-section--lotto .gz-alllot__dot {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.75) 0 22%, transparent 45%),
    var(--lotto-rose, #F43F5E) !important;
}
@media (hover: hover) {
  .mag-section--lotto .gz-alllot__link:hover .gz-alllot__name,
  .mag-section--lotto .gz-alllot__link:hover .gz-alllot__go { color: var(--lotto-rose, #F43F5E) !important; }
}

/* Draw cards: one frame colour and one bar colour rather than per draw. */
.mag-section--lotto .gz-lotto-strip .gz-lgt-date-bar { background: #1a1a1a !important; }
.mag-section--lotto .gz-lotto-strip__next { color: var(--lotto-rose, #F43F5E) !important; }
.mag-section--lotto .gz-lotto-strip__btn {
  border-color: var(--lotto-rose, #F43F5E) !important;
  color: var(--lotto-rose, #F43F5E) !important;
}
.mag-section--lotto .gz-lotto-strip:hover {
  border-color: var(--lotto-rose, #F43F5E) !important;
}
.mag-section--lotto .gz-lotto-strip:hover .gz-lotto-strip__btn {
  background: var(--lotto-rose, #F43F5E) !important;
  color: #fff !important;
}

/* ── Arcade menu — colour tiles ───────────────────────────────────
   Category tiles in the site's own geometry: square corners, gradient
   frame, restrained shadow.

   The previous pass used 14px radii and 100px pills, which is a different
   design language entirely — this stylesheet runs 2-4px radii across 150+
   rules and never uses pills. Colour blocks stay, the bubbliness goes. */

.gz-arcmenu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin: 0.9rem 0 2rem;
}
@media (min-width: 620px)  { .gz-arcmenu { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .gz-arcmenu { grid-template-columns: repeat(6, 1fr); } }

.gz-arcmenu__inner {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: inherit;
  gap: inherit;
}

/* Uneven grid: the first two take half a row, the rest a third. */
@media (min-width: 1040px) {
  .gz-arcmenu .gz-arcbtn              { grid-column: span 2; }
  .gz-arcmenu .gz-arcbtn:nth-child(1),
  .gz-arcmenu .gz-arcbtn:nth-child(2) { grid-column: span 3; }

  /* With four tiles rather than five, span 3 throughout — otherwise the
     second row is 2+2 on a six-column grid and leaves a third of it
     empty. :has() is well supported; browsers without it fall back to
     the five-tile spans above, which is a gap rather than a break. */
  .gz-arcmenu__inner:has(.gz-arcbtn:nth-child(4):last-child) .gz-arcbtn {
    grid-column: span 3;
  }
}

.gz-arcbtn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 168px;
  padding: 1rem 1.1rem 0.95rem;
  border-radius: 2px;                 /* the house radius, not a pill */
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(145deg, var(--gz-arc, #00BCD4) 0%, var(--gz-arc2, #1A237E) 100%);
  box-shadow: var(--shadow-md);
  transition: transform 0.15s, box-shadow 0.15s;
}
/* Scoped to .gz-arcmenu — the sidebar cards and the game-list header
   share .gz-arcbtn, and an unscoped :nth-child was making the first two
   sidebar cards 196px tall while the rest stayed at 100px. */
@media (min-width: 1040px) {
  .gz-arcmenu .gz-arcbtn:nth-child(1),
  .gz-arcmenu .gz-arcbtn:nth-child(2) { min-height: 196px; }
}

/* Light from the top-left so the block is not a flat fill. */
.gz-arcbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 16% 6%, rgba(255,255,255,0.26) 0%, transparent 56%);
  pointer-events: none;
}

/* Scrim under the text. The artwork bleeds across the tile, and white
   copy over a spinning reel or a bingo ticket had nothing to sit on —
   the name survived at 29px but the description did not. This darkens
   the bottom two-thirds so the text always has contrast, whatever the
   artwork is doing behind it. */
.gz-arcbtn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 78%;
  background: linear-gradient(to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.34) 38%,
    rgba(0,0,0,0.10) 70%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

@media (hover: hover) {
  .gz-arcbtn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
}
.gz-arcbtn:active { transform: translateY(0); }

/* Square tag, set at a slight angle like the site's other category
   labels (.mag-mini__cat rotates -2deg). */
/* Snake label on the tile. The wrap handles the rotation and the little
   frame; this only sets what the tile needs — white plate, the tile's own
   colour for the text, and the auto margin that pushes the rest down. */
.gz-arcbtn__snake {
  position: relative;
  align-self: flex-start;
  margin-bottom: auto;
  z-index: 2;
}
.gz-arcbtn__cat {
  font-size: 11.5px !important;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gz-arc2, #1A237E) !important;
  padding: 0.24rem 0.6rem;
  box-shadow: var(--shadow-sm);
}

.gz-arcbtn__name {
  position: relative;
  display: block;
  font-family: var(--font-dauble);
  font-size: 31px;
  font-weight: 900;
  color: #fff;
  line-height: 1.04;
  margin: 0.7rem 0 0.28rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.26);
  z-index: 2;
}
@media (min-width: 1040px) {
  .gz-arcmenu .gz-arcbtn:nth-child(1) .gz-arcbtn__name,
  .gz-arcmenu .gz-arcbtn:nth-child(2) .gz-arcbtn__name { font-size: 38px; }
  /* Body text steps DOWN here — three tiles across a row is a narrower
     measure than one full-width tile on a phone. */
  .gz-arcbtn__desc  { font-size: 13.5px; }
  .gz-arcbtn__cat   { font-size: 10px !important; }
  .gz-arcbtn__count { font-size: 11.5px; }
}

.gz-arcbtn__desc {
  position: relative;
  display: block;
  font-family: var(--font-editorial);
  /* Mobile first: these tiles run full width on a phone, so the text is
     larger here and steps DOWN on desktop where they sit three across.
     Matching .mag-mini__teaser's 13px was wrong — that card lives in a
     380px sidebar column, not across the whole viewport. */
  font-size: 15.5px;
  font-weight: 500;
  color: #fff;
  line-height: 1.45;
  max-width: 34ch;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  z-index: 2;
}

/* Button — matched to .gz-lotto-op-card__btn, the button used in the
   sidebar right next to these tiles: 0.78rem, 6px radius, tight padding,
   0.3px tracking, opacity on hover.

   The first version copied .gz-dir-row__btn from the brands hub instead,
   which is a larger button and sat oddly beside the sidebar's. White fill
   rather than the sidebar's pink, because these sit on a colour block. */
.gz-arcbtn__go {
  position: relative;
  align-self: flex-start;
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1.05rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  background: #fff;
  color: var(--gz-arc2, #1A237E);
  white-space: nowrap;
  transition: opacity 0.15s;
  z-index: 2;
}
/* Fades on hover like the sidebar's, rather than inverting — the whole
   tile is the link, so this reacts to the tile being hovered. */
@media (hover: hover) {
  .gz-arcbtn:hover .gz-arcbtn__go { opacity: 0.85; }
}
/* The sidebar's button is sized for a 380px column; these tiles are far
   wider, so it looked lost on desktop. Up a step there only. */
@media (min-width: 768px) {
  .gz-arcbtn__go {
    font-size: 0.85rem;
    padding: 0.5rem 1.15rem;
    margin-top: 0.85rem;
  }
}

/* Count as a hard block on a rule, not a pill. */
.gz-arcbtn__count {
  position: relative;
  align-self: flex-start;
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 2px solid rgba(255,255,255,0.4);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  z-index: 2;
}
.gz-arcbtn__count--soon { color: rgba(255,255,255,0.62); border-top-color: rgba(255,255,255,0.25); }

/* ── Arcade tile artwork ──────────────────────────────────────────
   Oversized and anchored to the top-right so it bleeds off the corner —
   that crop is what makes a launcher tile read as artwork rather than an
   icon sat in a box. All pure CSS.

   Everything holds still under prefers-reduced-motion, and the block is
   aria-hidden in the markup: decoration, not information. */

.gz-arcbtn__fx {
  position: absolute;
  top: -14px;
  right: -10px;
  width: 128px;
  height: 104px;
  opacity: 0.9;
  pointer-events: none;
  transition: transform 0.18s ease;
}
@media (hover: hover) {
  .gz-arcbtn:hover .gz-arcbtn__fx { transform: scale(1.04); }
}

/* ── Bingo — a 90-ball ticket ───────────────────────────────────
   The real thing: 9 columns by 3 rows, 15 numbers and 12 blanks, one to
   five numbers per column. Tilted and bled off the corner so it reads as
   a ticket lying on the tile rather than an icon.

   Numbers come from the markup so the daub positions can be set there
   rather than faked in CSS. */
.gz-fx-ticket {
  position: absolute;
  top: 14px;
  right: -18px;
  width: 152px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1px;
  padding: 3px;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.28);
  transform: rotate(-7deg);
}
.gz-fx-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 1px;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 800;
  color: #3a3a3a;
  line-height: 1;
}
.gz-fx-cell--blank { background: rgba(255,255,255,0.35); }

/* Daubed numbers — the ink blot a dabber leaves. Three of them pulse in
   turn, as if the card is being marked off. */
.gz-fx-cell--daub {
  position: relative;
  color: #fff;
}
.gz-fx-cell--daub::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: var(--gz-arc2, #7B1FA2);
  opacity: 0.92;
  z-index: -1;
  animation: gz-fx-daub 3.2s ease-in-out infinite;
}
.gz-fx-cell--daub:nth-of-type(3n)::after   { animation-delay: 0.9s; }
.gz-fx-cell--daub:nth-of-type(3n+1)::after { animation-delay: 1.8s; }
@keyframes gz-fx-daub {
  0%, 100% { transform: scale(0.82); opacity: 0.55; }
  50%      { transform: scale(1);    opacity: 0.95; }
}

/* Loose balls drifting over the ticket. Same idea as the welcome offer
   box (.gz-coupon-ball) — slow, long, offset cycles so they never look
   like they are on a loop — but drawn rather than images, and sitting
   above the card instead of behind the panel. */
.gz-fx-loose {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,0.95) 0 22%, transparent 46%),
    var(--lb, #fff);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6), 0 3px 9px rgba(0,0,0,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 800;
  color: rgba(0,0,0,0.55);
  pointer-events: none;
}
.gz-fx-loose--1 { width: 38px; height: 38px; font-size: 14px; top: -6px;  right: 96px; --lb: #FFD166; animation: gz-loose1 19s ease-in-out infinite; }
.gz-fx-loose--2 { width: 27px; height: 27px; font-size: 11px; top: 62px;  right: 4px;  --lb: #7FDFFF; animation: gz-loose2 24s ease-in-out infinite; }
.gz-fx-loose--3 { width: 21px; height: 21px; font-size: 9px;  top: 92px;  right: 78px; --lb: #FFFFFF; animation: gz-loose3 16s ease-in-out infinite; }

@keyframes gz-loose1 {
  0%, 100% { transform: translate(0, 0)        rotate(0deg); }
  33%      { transform: translate(-11px, 13px) rotate(-14deg); }
  66%      { transform: translate(7px, 5px)    rotate(9deg); }
}
@keyframes gz-loose2 {
  0%, 100% { transform: translate(0, 0)       rotate(0deg); }
  40%      { transform: translate(9px, -14px) rotate(17deg); }
  75%      { transform: translate(-5px, -6px) rotate(-8deg); }
}
@keyframes gz-loose3 {
  0%, 100% { transform: translate(0, 0)        rotate(0deg); }
  50%      { transform: translate(-13px, -10px) rotate(22deg); }
}

/* ── Slots — three reels and coins in the air ───────────────────
   Three reels rather than one, each spinning at a different speed and
   stopping at a different point, inside a cabinet window with a payline
   across the middle. Coins arc up out of it.

   The single reel this replaces read as a scrolling list; three at
   staggered speeds is what actually looks like a slot. */

.gz-fx-slot {
  position: absolute;
  top: 20px;
  right: 18px;
  display: flex;
  gap: 3px;
  padding: 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.22);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.35);
}

.gz-fx-reel {
  position: relative;
  width: 30px;
  height: 74px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff 0%, #f1f1f4 50%, #fff 100%);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.22), inset 0 -4px 8px rgba(0,0,0,0.22);
  overflow: hidden;
}
.gz-fx-reel__strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 19px;
  line-height: 37px;
  will-change: transform;
}
/* Spin, land, pause, spin again, land — a real cycle rather than an
   endless scroll.

   Landings are multiples of the 37px line-height so symbols sit on the
   payline, and each strip repeats its sequence over 12 symbols (444px),
   so the loop back to 0 is seamless.

   The reels stop left to right, a fifth of a second apart, which is what
   a machine actually does — and it is what makes the stop feel deliberate
   rather than three things halting at once. */
.gz-fx-reel__strip { animation-iteration-count: infinite; }
.gz-fx-reel:nth-child(1) .gz-fx-reel__strip { animation-name: gz-fx-spin1; animation-duration: 6s; }
.gz-fx-reel:nth-child(2) .gz-fx-reel__strip { animation-name: gz-fx-spin2; animation-duration: 6s; }
.gz-fx-reel:nth-child(3) .gz-fx-reel__strip { animation-name: gz-fx-spin3; animation-duration: 6s; }

/* Reel 1 — stops first. cubic-bezier decelerates into each landing. */
@keyframes gz-fx-spin1 {
  0%           { transform: translateY(0); }
  26%          { transform: translateY(-222px); animation-timing-function: cubic-bezier(.15,.75,.3,1); }
  50%          { transform: translateY(-222px); }                    /* held */
  76%          { transform: translateY(-444px); animation-timing-function: cubic-bezier(.15,.75,.3,1); }
  100%         { transform: translateY(-444px); }                    /* held, wraps clean */
}
/* Reel 2 — a beat later. */
@keyframes gz-fx-spin2 {
  0%           { transform: translateY(0); }
  31%          { transform: translateY(-222px); animation-timing-function: cubic-bezier(.15,.75,.3,1); }
  52%          { transform: translateY(-222px); }
  81%          { transform: translateY(-444px); animation-timing-function: cubic-bezier(.15,.75,.3,1); }
  100%         { transform: translateY(-444px); }
}
/* Reel 3 — last to settle. */
@keyframes gz-fx-spin3 {
  0%           { transform: translateY(0); }
  36%          { transform: translateY(-222px); animation-timing-function: cubic-bezier(.15,.75,.3,1); }
  54%          { transform: translateY(-222px); }
  86%          { transform: translateY(-444px); animation-timing-function: cubic-bezier(.15,.75,.3,1); }
  100%         { transform: translateY(-444px); }
}

/* The payline flashes as the last reel settles. */
@keyframes gz-fx-payline {
  0%, 34%, 60%, 88%, 100% { opacity: 0.55; box-shadow: 0 0 6px rgba(255,209,102,0.6); }
  40%, 46%                { opacity: 1;    box-shadow: 0 0 16px rgba(255,209,102,1); }
  92%, 97%                { opacity: 1;    box-shadow: 0 0 16px rgba(255,209,102,1); }
}

/* Payline across the window. */
.gz-fx-slot::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px;
  top: 50%;
  height: 2px;
  transform: translateY(-1px);
  background: rgba(255, 209, 102, 0.95);
  border-radius: 2px;
  z-index: 2;
  animation: gz-fx-payline 6s linear infinite;
}

/* ── Coins arcing out of the machine ───────────────────────────── */
.gz-fx-coin {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff8dc 0 18%, transparent 40%),
    linear-gradient(145deg, #FFD166 0%, #E9A400 55%, #FFDF8C 100%);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.55), 0 2px 7px rgba(0,0,0,0.32);
  pointer-events: none;
}
/* An inner ring, so it reads as a coin rather than a dot. */
.gz-fx-coin::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1.5px solid rgba(180,120,0,0.45);
}
.gz-fx-coin--1 { width: 19px; height: 19px; top: 74px; right: 8px;  animation: gz-fx-coin1 2.8s ease-out infinite; }
.gz-fx-coin--2 { width: 14px; height: 14px; top: 80px; right: 52px; animation: gz-fx-coin2 3.4s ease-out infinite; }
.gz-fx-coin--3 { width: 11px; height: 11px; top: 70px; right: 96px; animation: gz-fx-coin3 2.3s ease-out infinite; }

/* Up, over and back down — a toss rather than a float. */
@keyframes gz-fx-coin1 {
  0%      { transform: translate(0, 8px) scale(0.7) rotate(0deg);      opacity: 0; }
  18%     { opacity: 1; }
  55%     { transform: translate(-9px, -46px) scale(1) rotate(200deg); opacity: 1; }
  100%    { transform: translate(-16px, 6px) scale(0.8) rotate(400deg); opacity: 0; }
}
@keyframes gz-fx-coin2 {
  0%      { transform: translate(0, 6px) scale(0.7) rotate(0deg);      opacity: 0; }
  20%     { opacity: 1; }
  58%     { transform: translate(11px, -38px) scale(1) rotate(-170deg); opacity: 1; }
  100%    { transform: translate(18px, 10px) scale(0.8) rotate(-330deg); opacity: 0; }
}
@keyframes gz-fx-coin3 {
  0%      { transform: translate(0, 4px) scale(0.7) rotate(0deg);      opacity: 0; }
  22%     { opacity: 1; }
  52%     { transform: translate(-6px, -30px) scale(1) rotate(150deg);  opacity: 1; }
  100%    { transform: translate(-11px, 8px) scale(0.75) rotate(290deg); opacity: 0; }
}

/* ── Slingo — the actual game ────────────────────────────────────
   A 5x5 number grid with a single row of five reels beneath it, which is
   what Slingo is: reel numbers mark off the column above, and five in a
   row — across, down or diagonally — is a Slingo.

   The scattered stars this replaces said nothing about the game. This is
   the mechanic, on a page whose job is explaining games.

   Centre square is the free space. A Joker sits on one reel: in Slingo it
   marks any number in its own column. */

/* The tallest of the five artworks — a 5x5 grid plus a reel row is close
   to square, so it runs about 100px even at this width and reached into
   the description below.

   Two fixes: it sits higher and narrower than the others, and the tile it
   is on gets extra height and a right inset on its text (below), so the
   words never run underneath it. */
.gz-fx-slingo {
  position: absolute;
  top: 5px;
  right: 8px;
  width: 78px;
}
/* The slingo tile is the third in the arcade grid — give its text room
   to the left of the artwork rather than letting it wrap under. Scoped,
   for the same reason as above. */
.gz-arcmenu .gz-arcbtn:nth-child(3) { min-height: 196px; }
.gz-arcmenu .gz-arcbtn:nth-child(3) .gz-arcbtn__name,
.gz-arcmenu .gz-arcbtn:nth-child(3) .gz-arcbtn__desc { max-width: calc(100% - 20px); }

.gz-fx-sgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.25);
  box-shadow: 0 3px 9px rgba(0,0,0,0.28);
}

.gz-fx-scell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 6.5px;
  font-weight: 800;
  color: #3b3b42;
  line-height: 1;
}
/* Free space in the middle, as on a real card. */
.gz-fx-scell--free { background: rgba(255,255,255,0.55); }

/* Marked off — the daub lands over the number. */
.gz-fx-scell--mark::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: var(--gz-arc2, #4C1D95);
  opacity: 0;
  animation: gz-fx-smark 6s ease-in-out infinite;
}
.gz-fx-scell--mark { color: #fff; }
.gz-fx-scell--mark:nth-of-type(1)::after  { animation-delay: 0.2s; }
.gz-fx-scell--mark:nth-of-type(7)::after  { animation-delay: 0.9s; }
.gz-fx-scell--mark:nth-of-type(13)::after { animation-delay: 1.6s; }
.gz-fx-scell--mark:nth-of-type(19)::after { animation-delay: 2.3s; }
.gz-fx-scell--mark:nth-of-type(25)::after { animation-delay: 3.0s; }
@keyframes gz-fx-smark {
  0%, 4%    { opacity: 0; transform: scale(1.5); }
  10%, 78%  { opacity: 0.95; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(1.5); }
}

/* The completed diagonal flashes — that is a Slingo. */
.gz-fx-scell--win::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px #FFD166, 0 0 8px rgba(255,209,102,0.9);
  opacity: 0;
  animation: gz-fx-slingo-win 6s ease-in-out infinite;
}
@keyframes gz-fx-slingo-win {
  0%, 52%   { opacity: 0; }
  58%, 76%  { opacity: 1; }
  84%, 100% { opacity: 0; }
}

/* The reel row under the grid — five positions, as in the real game. */
.gz-fx-sreels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-top: 3px;
  padding: 3px;
  border-radius: 2px;
  background: rgba(0,0,0,0.28);
}
.gz-fx-sreel {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1px;
  background: linear-gradient(180deg, #fff, #ececf1);
  font-family: var(--font-sans);
  font-size: 6.5px;
  font-weight: 800;
  color: #3b3b42;
  animation: gz-fx-sreel 6s ease-in-out infinite;
}
.gz-fx-sreel:nth-child(1) { animation-delay: 0s; }
.gz-fx-sreel:nth-child(2) { animation-delay: 0.7s; }
.gz-fx-sreel:nth-child(3) { animation-delay: 1.4s; }
.gz-fx-sreel:nth-child(4) { animation-delay: 2.1s; }
.gz-fx-sreel:nth-child(5) { animation-delay: 2.8s; }
/* Each reel drops its number in, one after another. */
@keyframes gz-fx-sreel {
  0%, 3%    { transform: translateY(-70%); opacity: 0; }
  9%, 80%   { transform: translateY(0);    opacity: 1; }
  92%, 100% { transform: translateY(70%);  opacity: 0; }
}
/* The Joker — marks any number in its own column. */
.gz-fx-sreel--joker { color: #B45309; font-size: 9px; }

/* ── Instant wins — a coin scratching a card ────────────────────
   A real scratch card: three prize panels under silver foil, with a coin
   dragging across and taking the foil off as it goes. The panels reveal
   in turn, then the whole thing resets.

   The foil is a clip-path that retreats — cheaper and smoother than
   animating a mask, and it means the reveal edge is hard, like foil
   actually coming away. */

/* ── Treasure hunt — the arcade tile version ─────────────────────
   Same idea as the sidebar card, sized for the tile: a 3x3 of closed
   boxes, one opening at a time. */
.gz-fx-hunt {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(3, 30px);
  grid-auto-rows: 30px;
  gap: 5px;
}
.gz-fx-box {
  position: relative;
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
  overflow: hidden;
}
.gz-fx-box__face,
.gz-fx-box__prize {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gz-fx-box__face {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
  animation: gz-hunt-face 9s ease-in-out infinite;
}
.gz-fx-box__prize {
  font-size: 17px;
  opacity: 0;
  transform: scale(0.4);
  animation: gz-hunt-prize 9s ease-in-out infinite;
}
.gz-fx-box--2 .gz-fx-box__face, .gz-fx-box--2 .gz-fx-box__prize { animation-delay: 1s; }
.gz-fx-box--3 .gz-fx-box__face, .gz-fx-box--3 .gz-fx-box__prize { animation-delay: 2s; }
.gz-fx-box--4 .gz-fx-box__face, .gz-fx-box--4 .gz-fx-box__prize { animation-delay: 3s; }
.gz-fx-box--5 .gz-fx-box__face, .gz-fx-box--5 .gz-fx-box__prize { animation-delay: 4s; }
.gz-fx-box--6 .gz-fx-box__face, .gz-fx-box--6 .gz-fx-box__prize { animation-delay: 5s; }
.gz-fx-box--7 .gz-fx-box__face, .gz-fx-box--7 .gz-fx-box__prize { animation-delay: 6s; }
.gz-fx-box--8 .gz-fx-box__face, .gz-fx-box--8 .gz-fx-box__prize { animation-delay: 7s; }
.gz-fx-box--9 .gz-fx-box__face, .gz-fx-box--9 .gz-fx-box__prize { animation-delay: 8s; }

@media (prefers-reduced-motion: reduce) {
  .gz-fx-box__face  { animation: none; opacity: 1; }
  .gz-fx-box__prize { animation: none; opacity: 0; }
}

.gz-fx-card {
  position: absolute;
  top: 22px;
  right: 20px;
  width: 96px;
  padding: 7px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.gz-fx-panel {
  position: relative;
  aspect-ratio: 1;
  border-radius: 2px;
  background: #fdf3d8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  overflow: hidden;
}

/* The foil over each panel, scratched away left to right. */
.gz-fx-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.55) 0 3px, transparent 3px 6px),
    linear-gradient(135deg, #c9ccd3 0%, #eef0f4 42%, #b6bac2 70%, #dcdfe5 100%);
  animation: gz-fx-foil 5.6s ease-in-out infinite;
}
/* Delays timed so each panel starts giving up its foil exactly as the
   coin arrives over it — the coin travels 0 -> 38px -> 76px at 8%, 30%
   and 52% of the cycle. With shorter delays the panels revealed ahead of
   the coin, which looked like the card scratching itself. */
.gz-fx-panel:nth-child(1)::after { animation-delay: 0s; }
.gz-fx-panel:nth-child(2)::after { animation-delay: 1.01s; }
.gz-fx-panel:nth-child(3)::after { animation-delay: 2.24s; }

@keyframes gz-fx-foil {
  0%, 12%   { clip-path: inset(0 0 0 0); }
  26%, 82%  { clip-path: inset(0 0 0 100%); }   /* scratched off, held */
  94%, 100% { clip-path: inset(0 0 0 0); }      /* back on for the next pass */
}

/* The third panel completes the line, so it gets a moment: the symbol
   pops and the panel lights up as it is uncovered.

   Symbols rather than cash amounts on purpose — a card showing "£500"
   would be an implied prize on a UKGC-licensed site's page, which is not
   something decoration should be doing. */
.gz-fx-panel--win {
  background: #fff6d9;
  box-shadow: inset 0 0 0 1.5px rgba(233,164,0,0.6);
  animation: gz-fx-win 5.6s ease-in-out infinite;
  animation-delay: 2.24s;
}
@keyframes gz-fx-win {
  0%, 11%   { transform: scale(1);    filter: none; }
  16%       { transform: scale(1.22); filter: drop-shadow(0 0 7px rgba(255,209,102,0.95)); }
  22%       { transform: scale(1.06); }
  30%, 82%  { transform: scale(1.1);  filter: drop-shadow(0 0 5px rgba(255,209,102,0.7)); }
  94%, 100% { transform: scale(1);    filter: none; }
}

/* The coin doing the scratching. Drags across the card, tips as it goes. */
.gz-fx-scratcher {
  position: absolute;
  top: 40px;
  right: 92px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff8dc 0 18%, transparent 40%),
    linear-gradient(145deg, #FFD166 0%, #E9A400 55%, #FFDF8C 100%);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.6), 0 3px 8px rgba(0,0,0,0.38);
  animation: gz-fx-scratcher 5.6s ease-in-out infinite;
  z-index: 3;
}
.gz-fx-scratcher::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  border: 1.5px solid rgba(180,120,0,0.45);
}

@keyframes gz-fx-scratcher {
  0%        { transform: translate(0, 0) rotate(0deg);        opacity: 0; }
  8%        { transform: translate(0, 0) rotate(0deg);        opacity: 1; }
  /* drags right across the three panels */
  30%       { transform: translate(38px, 3px) rotate(90deg);  opacity: 1; }
  52%       { transform: translate(76px, -2px) rotate(190deg); opacity: 1; }
  70%       { transform: translate(76px, -2px) rotate(190deg); opacity: 1; }
  84%       { transform: translate(76px, -2px) rotate(190deg); opacity: 0; }
  100%      { transform: translate(0, 0) rotate(0deg);        opacity: 0; }
}

/* ── Providers — stacked chips pulsing ──────────────────────────── */
.gz-fx-pip {
  position: absolute;
  border-radius: 2px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 3px 8px rgba(0,0,0,0.22);
  animation: gz-fx-pulse 2.2s ease-in-out infinite;
}
.gz-fx-pip:nth-child(1) { width: 54px; height: 16px; top: 34px; right: 20px; animation-delay: 0s; }
.gz-fx-pip:nth-child(2) { width: 42px; height: 16px; top: 56px; right: 32px; animation-delay: 0.35s; }
.gz-fx-pip:nth-child(3) { width: 30px; height: 16px; top: 78px; right: 44px; animation-delay: 0.7s; }
@keyframes gz-fx-pulse {
  0%, 100% { opacity: 0.5;  transform: translateX(0); }
  50%      { opacity: 1;    transform: translateX(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .gz-fx-cell--daub::after, .gz-fx-reel__strip, .gz-fx-loose,
  .gz-fx-scell--mark::after, .gz-fx-scell--win::before, .gz-fx-sreel,
  .gz-fx-panel::after, .gz-fx-scratcher, .gz-fx-pip, .gz-fx-coin,
  .gz-fx-slot::after { animation: none; }
  /* Card shown scratched, coin resting beside it. */
  .gz-fx-panel::after { clip-path: inset(0 0 0 100%); }
  .gz-fx-scratcher    { opacity: 1; transform: translate(76px, -2px) rotate(190deg); }
  .gz-fx-panel--win   { animation: none; transform: scale(1.08); }
  /* Reels hold on a landed line rather than mid-spin. */
  .gz-fx-reel__strip { transform: translateY(-222px); }
  .gz-fx-pip { opacity: 0.9; }
  /* Slingo shown mid-game: diagonal marked, reels landed. */
  .gz-fx-scell--mark::after { opacity: 0.95; transform: scale(1); }
  .gz-fx-scell--win::before { opacity: 1; }
  .gz-fx-sreel { opacity: 1; transform: none; }
  /* The coin keyframes start and end at opacity 0, so without this they
     would simply not be there when motion is off. */
  .gz-fx-coin { opacity: 1; transform: translate(-8px, -26px); }
  .gz-fx-coin--2 { transform: translate(9px, -22px); }
  .gz-fx-coin--3 { transform: translate(-5px, -18px); }
}

/* Picks box subtitle — sits under the snake label in .gz-picks-header.
   It was using .gz-lotto-ops-wrap__heading-title, which is white text for
   a dark panel: invisible on this white box, and its line height left a
   gap that read as broken. */
.gz-picks-header__title {
  font-family: var(--font-editorial);
  font-size: 17px;
  font-style: italic;
  font-weight: 700;
  /* .gz-picks-header is a near-black gradient (#1a0505 to #2a0a0a), so
     this has to be light. It was var(--black) — black on black. */
  color: #fff;
  line-height: 1.25;
  margin: 0.15rem 0 0.15rem;
  text-align: center;
}

/* ── Casino chip, in place of the bingo ball ──────────────────────
   Used on the slots hub's Picks box only. A bingo ball is the right
   marker beside bingo rooms; beside slot sites it belongs to a different
   game. Same size and position, so nothing else in the box moves.

   The dashes are the chip's edge notches, drawn with repeating conic
   segments rather than an image. */
.gz-picks-chip {
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,0.92) 0deg 12deg,
      transparent 12deg 33deg
    ),
    radial-gradient(circle at 50% 50%, var(--gz-chip, #E91E8C) 0 58%, transparent 58%),
    var(--gz-chip, #E91E8C);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.85),
    inset 0 0 0 4px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.35);
}
/* The number sits on a pale centre so it reads over the notches. */
.gz-picks-chip > span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68%;
  height: 68%;
  margin: auto;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--gz-chip-ink, #1a1a1a);
  font-weight: 900;
}

/* ── £ coin, in place of the bingo ball ──────────────────────────
   Used on the scratch cards hub's Picks box only. Instant wins are about
   cash prizes, so a coin reads better there than a bingo ball. Same size
   and position as the ball, so nothing else in the box moves.

   The milled edge is repeating conic segments rather than an image, and
   the number sits on a raised face so it stays legible over them. */
.gz-picks-coin {
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(0,0,0,0.16) 0deg 4deg,
      transparent 4deg 9deg
    ),
    radial-gradient(circle at 34% 26%, #FFF6D5 0 12%, transparent 42%),
    linear-gradient(145deg, #FFD974 0%, #E9A400 48%, #B87700 78%, #FFE08A 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.5),
    0 2px 6px rgba(0,0,0,0.38);
}
/* Raised face — the number and the £ sit here, clear of the milling. */
.gz-picks-coin > span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74%;
  height: 74%;
  margin: auto;
  border-radius: 50%;
  background: linear-gradient(145deg, #FFE9A8, #F0B72E);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.7), inset 0 -1px 2px rgba(120,80,0,0.35);
  color: #6B4400;
  font-weight: 900;
}
.gz-picks-coin > span::before {
  content: "\00A3";          /* £ — a CSS escape, not an HTML entity */
  font-size: 0.72em;
  margin-right: 0.5px;
  opacity: 0.75;
}

/* ── Arcade mini-cards — sidebar nav ──────────────────────────────
   The four arcade categories as sidebar cards. Same component as the
   tiles on /arcade/ (.gz-arcbtn) and the game-list header, scaled for a
   380px column: shorter, smaller type, no description, no CTA button.

   Every card is exactly 100px. That matters more than it sounds: with a
   min-height the cards grew to fit their own content, so "Bingo Games"
   and "Scratch Cards" wrapped where "Slots" did not, and the active card
   grew again for its suffix — four cards, four heights.

   Artwork is normalised to a 70px footprint across all four, so a ticket
   and a scratch card occupy the same space. */

.gz-amc { display: block; margin-bottom: 1.5rem; }

.gz-amc__card {
  /* Fixed. The sidebar is a 380px column whatever the viewport does, so
     scaling type on vw barely moved it — at 1280px the label still came
     out at its 10.5px floor. Sized for the column instead. */
  height: 104px;
  min-height: 0;              /* clears .gz-arcbtn's 168px floor */
  /* Deeper bottom padding lifts the text off the edge. .gz-arcbtn stacks
     to flex-end, so the block sits on the bottom — with 0.65rem it looked
     like it was resting on the border. */
  padding: 0.7rem 0.85rem 1.05rem;
  margin-bottom: 0.5rem;
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) {
  a.gz-amc__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

/* You are here — ringed inside the box, and not a link. An outer ring
   would add 4px top and bottom and break the uniform height. */
.gz-amc__card--here {
  box-shadow: inset 0 0 0 2px #fff,
              inset 0 0 0 4px var(--gz-arc, #00BCD4),
              var(--shadow-md);
  /* It is a link now — it jumps down to the game list rather than to the
     page you are already on, so it should read as clickable. */
  cursor: pointer;
}
/* You-are-here chip, sitting beside the name rather than under a second
   label — "BINGO ROOMS" above "Bingo Games" was the same thing twice. */
/* Pinned to the top-left corner rather than trailing the name — it is a
   state, so it belongs where you look first, and it keeps the name line
   free for longer titles. */
.gz-amc__here {
  position: absolute;
  top: 0.7rem;
  left: 0.85rem;
  z-index: 3;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  background: #fff;
  color: var(--gz-arc2, #1A237E);
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* One line each, so nothing can push the card taller. */
.gz-amc__name,
.gz-amc__count {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.gz-amc__name  { font-size: 21px !important; margin: 0.2rem 0 0.22rem !important; }
.gz-amc__count { font-size: 11.5px !important; margin-top: 0.18rem !important; padding-top: 0 !important; border-top: none !important; }
.gz-amc__count--soon { color: rgba(255,255,255,0.6) !important; }

/* Back to the parent hub — the same card as the four above it, in the
   arcade's own cyan. It was an outlined text link, which disappeared
   under four solid colour blocks. */
.gz-amc__back { margin-top: 0.35rem; }
.gz-amc__back .gz-amc__name { font-size: 19px; }
.gz-amc__back .gz-amc__count { color: rgba(255,255,255,0.85); }

/* Three drifting stars, so it has movement like the others without
   pretending to be a game category. */
.gz-amc-back-fx {
  position: absolute;
  color: rgba(255,255,255,0.55);
  font-size: 20px;
  line-height: 1;
  top: 22px;
  right: 30px;
  animation: gz-amc-backfx 6s ease-in-out infinite;
}
.gz-amc-back-fx--2 { top: 46px; right: 12px; font-size: 14px; animation-duration: 8s;  animation-delay: 1.2s; }
.gz-amc-back-fx--3 { top: 12px; right: 8px;  font-size: 11px; animation-duration: 5s;  animation-delay: 2.4s; }
@keyframes gz-amc-backfx {
  0%, 100% { transform: translate(0, 0) rotate(0deg);      opacity: 0.55; }
  50%      { transform: translate(-4px, 5px) rotate(18deg); opacity: 0.9; }
}

/* ── Artwork ──────────────────────────────────────────────────────
   All four sit in the top-right corner at 70px wide and 42-50px tall. */

.gz-amc__fx {
  position: absolute;
  top: -8px;
  right: -6px;
  width: 84px;
  height: 78px;
  opacity: 0.92;
  pointer-events: none;
}

/* Bingo — a ticket with loose balls drifting over it. */
/* Nine columns, like the arcade hub's — it is a real 90-ball ticket, and
   a 5-wide grid was a different object wearing the same name. Wider than
   the other artworks because a 9-column ticket has to be, and rotated so
   it reads as a card lying on the tile. */
.gz-amc-ticket {
  position: absolute;
  top: 16px; right: -14px;
  width: 96px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.5px;
  padding: 2px;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
  transform: rotate(-7deg);
  box-shadow: 0 3px 9px rgba(0,0,0,0.3);
}
.gz-amc-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 0.5px;
  font-family: var(--font-sans);
  font-size: 4px;
  font-weight: 800;
  color: #3a3a42;
  line-height: 1;
}
.gz-amc-cell--blank { background: rgba(255,255,255,0.35); }
/* Daub as a pulsing ink blot, the same as the arcade tile's — a flat
   background square read as a coloured cell, not a dabber mark. */
.gz-amc-cell--daub { position: relative; color: #fff; }
.gz-amc-cell--daub::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: var(--gz-arc2, #7B1FA2);
  opacity: 0.92;
  z-index: -1;
  animation: gz-fx-daub 3.2s ease-in-out infinite;
}
.gz-amc-cell--daub:nth-of-type(3n)::after   { animation-delay: 0.9s; }
.gz-amc-cell--daub:nth-of-type(3n+1)::after { animation-delay: 1.8s; }

.gz-amc-loose {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 800;
  color: rgba(0,0,0,0.55);
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,0.95) 0 22%, transparent 46%),
    var(--lb, #fff);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.65), 0 2px 6px rgba(0,0,0,0.32);
  z-index: 2;
  pointer-events: none;
}
.gz-amc-loose--1 { width: 22px; height: 22px; font-size: 8.5px; top: -2px; right: 72px; --lb: #FFD166; animation: gz-amc-loose1 17s ease-in-out infinite; }
.gz-amc-loose--2 { width: 17px; height: 17px; font-size: 7px;   top: 34px; right: -10px; --lb: #7FDFFF; animation: gz-amc-loose2 21s ease-in-out infinite; }
.gz-amc-loose--3 { width: 13px; height: 13px; font-size: 5.5px; top: 48px; right: 62px; --lb: #FFFFFF; animation: gz-amc-loose3 14s ease-in-out infinite; }

@keyframes gz-amc-loose1 {
  0%, 100% { transform: translate(0, 0)      rotate(0deg); }
  33%      { transform: translate(-7px, 9px) rotate(-14deg); }
  66%      { transform: translate(5px, 3px)  rotate(9deg); }
}
@keyframes gz-amc-loose2 {
  0%, 100% { transform: translate(0, 0)       rotate(0deg); }
  40%      { transform: translate(6px, -10px) rotate(17deg); }
  75%      { transform: translate(-4px, -4px) rotate(-8deg); }
}
@keyframes gz-amc-loose3 {
  0%, 100% { transform: translate(0, 0)       rotate(0deg); }
  50%      { transform: translate(-9px, -7px) rotate(22deg); }
}

/* Slots — three reels: 3x20 + 2 gaps + 6 padding = 70px. */
.gz-amc-slot {
  position: absolute;
  top: 15px; right: 6px;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.22);
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
.gz-amc-reel {
  width: 20px;
  height: 44px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff, #efeff2);
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.2);
  overflow: hidden;
}
.gz-amc-reel__strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  line-height: 22px;
}
.gz-amc-reel:nth-child(1) .gz-amc-reel__strip { animation: gz-amc-spin 0.7s linear infinite; }
.gz-amc-reel:nth-child(2) .gz-amc-reel__strip { animation: gz-amc-spin 0.9s linear infinite; }
.gz-amc-reel:nth-child(3) .gz-amc-reel__strip { animation: gz-amc-spin 1.1s linear infinite; }
/* 6 symbols x 22px. The strip repeats every 3, so this loops seamlessly
   and is long enough that the window never empties. */
@keyframes gz-amc-spin { to { transform: translateY(-132px); } }

/* Slingo — a 5-wide card. */
.gz-amc-sgrid {
  position: absolute;
  top: 14px; right: 6px;
  width: 70px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  padding: 2px;
  background: rgba(255,255,255,0.28);
  border-radius: 2px;
  box-shadow: 0 2px 7px rgba(0,0,0,0.26);
}
.gz-amc-scell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 1px;
  font-family: var(--font-sans);
  font-size: 5.5px;
  font-weight: 800;
  color: #3a3a42;
  line-height: 1;
}
.gz-amc-scell--mark { color: #fff; background: var(--gz-arc2, #4C1D95); }

/* Instant wins — a scratch card with a coin crossing it. Panels are
   taller than square: three square panels in a 70px card come to 24px,
   half the height of the other artworks. */
.gz-amc-card {
  position: absolute;
  top: 22px; right: 6px;
  width: 70px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 4px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
/* ── Treasure hunt — daily free games ─────────────────────────────
   A grid of closed boxes, one flipping open at a time to show the prize
   behind it. Distinct from the scratch card below, which is a coin
   dragging across foil. */
.gz-amc-hunt {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(3, 20px);
  grid-auto-rows: 20px;
  gap: 3px;
}
.gz-amc-box {
  position: relative;
  border-radius: 3px;
  background: rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
  overflow: hidden;
}
.gz-amc-box__face,
.gz-amc-box__prize {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gz-amc-box__face {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
  animation: gz-hunt-face 9s ease-in-out infinite;
}
.gz-amc-box__prize {
  font-size: 12px;
  opacity: 0;
  transform: scale(0.4);
  animation: gz-hunt-prize 9s ease-in-out infinite;
}
/* Six boxes open in turn over nine seconds. */
.gz-amc-box--2 .gz-amc-box__face, .gz-amc-box--2 .gz-amc-box__prize { animation-delay: 1.5s; }
.gz-amc-box--3 .gz-amc-box__face, .gz-amc-box--3 .gz-amc-box__prize { animation-delay: 3s; }
.gz-amc-box--4 .gz-amc-box__face, .gz-amc-box--4 .gz-amc-box__prize { animation-delay: 4.5s; }
.gz-amc-box--5 .gz-amc-box__face, .gz-amc-box--5 .gz-amc-box__prize { animation-delay: 6s; }
.gz-amc-box--6 .gz-amc-box__face, .gz-amc-box--6 .gz-amc-box__prize { animation-delay: 7.5s; }

@keyframes gz-hunt-face {
  0%, 8%    { opacity: 1; transform: rotateY(0deg); }
  12%, 22%  { opacity: 0; transform: rotateY(90deg); }
  26%, 100% { opacity: 1; transform: rotateY(0deg); }
}
@keyframes gz-hunt-prize {
  0%, 10%   { opacity: 0; transform: scale(0.4); }
  14%, 20%  { opacity: 1; transform: scale(1); }
  24%, 100% { opacity: 0; transform: scale(0.4); }
}

.gz-amc-panel {
  position: relative;
  aspect-ratio: 0.55;
  border-radius: 1px;
  background: #fdf3d8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  overflow: hidden;
}
.gz-amc-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #c9ccd3, #eef0f4 45%, #b6bac2);
  animation: gz-amc-foil 4.4s ease-in-out infinite;
}
.gz-amc-panel:nth-child(2)::after { animation-delay: 0.7s; }
.gz-amc-panel:nth-child(3)::after { animation-delay: 1.4s; }
@keyframes gz-amc-foil {
  0%, 14%   { clip-path: inset(0 0 0 0); }
  30%, 80%  { clip-path: inset(0 0 0 100%); }
  92%, 100% { clip-path: inset(0 0 0 0); }
}
.gz-amc-coin {
  position: absolute;
  top: 34px; right: 74px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff8dc 0 18%, transparent 40%),
    linear-gradient(145deg, #FFD166, #E9A400 55%, #FFDF8C);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 2px 5px rgba(0,0,0,0.35);
  animation: gz-amc-coin 4.4s ease-in-out infinite;
}
@keyframes gz-amc-coin {
  0%       { transform: translate(0,0)     rotate(0deg);   opacity: 0; }
  10%      { opacity: 1; }
  30%      { transform: translate(25px,2px) rotate(120deg); opacity: 1; }
  55%, 78% { transform: translate(50px,0)  rotate(240deg); opacity: 1; }
  90%,100% { transform: translate(50px,0)  rotate(240deg); opacity: 0; }
}

/* On a phone the sidebar runs full width, so the cards have far more
   room than the 380px column they are sized for. */
@media (max-width: 767px) {
  .gz-amc__card  { height: 112px; padding-bottom: 1.15rem; }
  .gz-amc__name  { font-size: 24px !important; }
  .gz-amc__count { font-size: 12.5px !important; }
  .gz-amc__here  { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .gz-amc-reel__strip, .gz-amc-panel::after, .gz-amc-coin,
  .gz-amc-loose, .gz-amc-cell--daub::after, .gz-amc-back-fx,
  .gz-amc-box__face, .gz-amc-box__prize { animation: none; }
  .gz-amc-panel::after { clip-path: inset(0 0 0 100%); }
  .gz-amc-coin { opacity: 1; transform: translate(50px, 0) rotate(240deg); }
}

/* ── Arcade game directory ────────────────────────────────────────
   The hubs' game listing reuses the brands directory row (.gz-dir-row,
   .gz-dir-pill, .gz-dir-row__btn) so a game reads the same way a site
   does — logo left, name and facts centre, "Take a Look" right.

   Only the pieces the brands rows do not have are defined here: the two
   filter dropdowns, the tagline line, and the empty state. */

.gz-agd-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem;
  margin: 0.5rem 0 1.1rem;
}
.gz-agd-filter__group { display: flex; align-items: center; gap: 0.45rem; }

.gz-agd-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }

/* The filter sets row.hidden, but the browser's [hidden] { display: none }
   comes from the UA stylesheet and loses to .gz-agd-row's display: flex —
   so rows were marked hidden and stayed on screen. This wins it back. */
.gz-agd-row[hidden] { display: none !important; }

/* Tagline under the game name — the brands rows have no equivalent, so
   this is sized to sit between the name and the pills without competing. */
.gz-agd-row__tag {
  font-family: var(--font-editorial);
  font-size: 14px;
  color: #4a4e55;
  line-height: 1.45;
  margin: 0.2rem 0 0.45rem;
}


/* Back-to-top after the game list. Centred like the other jump CTAs, with
   space above so it does not crowd the final row. */
.gz-agd-backtop {
  text-align: center;
  margin: 1.4rem 0 0.5rem;
}

.gz-agd-empty {
  font-family: var(--font-editorial);
  font-size: 14px;
  color: #62666d;
  text-align: center;
  padding: 1.5rem 0;
}
.gz-agd-reset {
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: 700;
  color: var(--pink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .gz-agd-filter { flex-direction: column; align-items: stretch; }
  .gz-agd-filter__group { justify-content: space-between; }

  /* Stack the row on a phone: logo and name across the top, then the
     button and its label underneath. Side by side, the 132px actions
     column left the name about 40% of a 380px screen. */
  .gz-agd-row {
    flex-wrap: wrap;
    padding: 1.35rem 1rem 1.4rem;
  }
  .gz-agd-row .gz-dir-row__main { flex: 1 1 60%; }
  .gz-agd-row .gz-dir-row__actions {
    flex: 1 1 100%;
    min-width: 0;
    margin-top: 0.7rem;
  }
  .gz-agd-row .gz-dir-row__btn { width: 100%; }
  .gz-agd-row__tag   { font-size: 14.5px; }

  /* Badges step up on a phone. At 11px they were the smallest text on the
     row and carrying the facts people actually scan for — ball count,
     ticket price, when it runs. */
  .gz-agd-row .gz-dir-pill {
    font-size: 12.5px;
    padding: 4px 11px;
    letter-spacing: 0.2px;
  }
  .gz-agd-row .gz-agd-pill--when,
  .gz-agd-row .gz-agd-pill--prize,
  .gz-agd-row .gz-agd-pill--jackpot {
    font-size: 12.5px;
    padding: 0.3rem 0.6rem;
  }

  /* Smaller circle on a phone. The row stacks here, so a 72px logo took a
     fifth of the width before the game name started. The zoom is a
     percentage, so the crop scales down with it. */
  /* Still a touch smaller than the 86px base — the row stacks here, so
     the logo shares its line with the game name. */
  .gz-agd-row .gz-dir-row__logo-wrap {
    width: 74px;
    height: 74px;
  }
  .gz-agd-row .gz-dir-row__logo-ph { font-size: 26px; }
}

/* Schedule and prize pills carry sentences rather than one or two words
   — "Every 6 minutes, 24/7" — so they get room to breathe and are allowed
   to sit on their own line rather than being clipped. */
.gz-agd-pill--when,
.gz-agd-pill--prize,
.gz-agd-pill--jackpot {
  max-width: 100%;
  white-space: normal;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 11px;
  padding: 0.24rem 0.55rem;
}
/* Light pink for the schedule — it is the "when", not a fact about the
   game, so it reads as a different kind of thing to the others. */
.gz-agd-pill--when {
  background: #FDEAF3 !important;
  color: #A3175F !important;
}
.gz-agd-pill--when::before    { content: "\1F551  "; }   /* clock face */
.gz-agd-pill--prize::before   { content: "\1F3C6  "; }   /* trophy */
.gz-agd-pill--jackpot::before { content: "\1F48E  "; }   /* gem */

/* Game rows run roomier than the brands directory rows they inherit from:
   more padding, a bigger gap and a larger logo, at both breakpoints. The
   arcade list is browsed rather than compared, so it can breathe. */
.gz-agd-row {
  gap: 0.85rem 1.15rem;
  padding: 1.5rem 1.15rem 1.5rem 1.4rem;
}
.gz-agd-row .gz-dir-row__logo-wrap {
  width: 86px;
  height: 86px;
}
.gz-agd-row .gz-dir-row__logo-ph { font-size: 30px; }

@media (min-width: 768px) {
  .gz-agd-row {
    gap: 1rem 1.4rem;
    padding: 1.75rem 1.4rem 1.75rem 1.6rem;
  }
  .gz-agd-row .gz-dir-row__logo-wrap {
    width: 104px;
    height: 104px;
  }
  .gz-agd-row .gz-dir-row__logo-ph { font-size: 36px; }
}

/* Game row logos sit slightly larger than their circle, so the artwork
   crops in rather than sitting inside a ring of dead space. 122% on a 72px
   circle overflows by about 8px each side. Arcade hubs only — the brands
   directory keeps its own framing. */
.gz-agd-row .gz-dir-row__logo {
  width: 122%;
  height: 122%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* ── Arcade game directory — stub-card header ─────────────────────
   The banner above each hub's game list is the arcade tile itself
   (.gz-arcbtn), so it matches that category's card on /arcade/ and in the
   sidebar exactly. Only the overrides a section header needs are here:
   it spans the column, and it has no CTA button because the list it
   introduces is directly beneath it. */

.gz-agd-head {
  margin: 0.5rem 0 1rem;
  cursor: default;
  /* .gz-arcbtn lifts on hover because it is a link. This is a section
     header, not something you click, so it holds still. */
  transition: none;
  /* Taller than a tile in the arcade's three-across grid, because it runs
     the full column width — at the tile's 168px it read as a squat band
     rather than the same card. */
  min-height: 200px;
  padding: 1.2rem 1.3rem 1.15rem;
}
/* Name at the size the two wide tiles use on /arcade/, not the smaller
   size the narrow ones take. This banner is wider than either. */
.gz-agd-head .gz-arcbtn__name { font-size: 30px; }
@media (min-width: 768px) {
  .gz-agd-head .gz-arcbtn__name { font-size: 38px; }
}
.gz-agd-head .gz-arcbtn__count { font-size: 12px; }
@media (hover: hover) {
  .gz-agd-head:hover { transform: none; box-shadow: var(--shadow-md); }
  .gz-agd-head:hover .gz-arcbtn__fx { transform: none; }
}
/* Wider than a tile in a three-across grid, so the artwork can be larger
   and the text has more room before it wraps. */
.gz-agd-head .gz-arcbtn__desc { max-width: 52ch; }
/* Identical to .gz-arcbtn__fx on the arcade tile — the container was
   152x142 at -10/-8 against the tile's 128x104 at -14/-10, so the same
   ticket sat in a different place and read as a different card. */
.gz-agd-head__fx { width: 128px; height: 104px; top: -14px; right: -10px; }
/* The header's artwork area is larger than the sidebar card's, so the
   ticket and its loose balls scale up to suit. */
.gz-agd-head .gz-amc-ticket { width: 152px; top: 14px; right: -18px; gap: 1px; padding: 3px; }
.gz-agd-head .gz-amc-cell   { font-size: 8px; border-radius: 1px; }
.gz-agd-head .gz-amc-loose--1 { width: 38px; height: 38px; font-size: 14px; top: -6px;  right: 96px; }
.gz-agd-head .gz-amc-loose--2 { width: 27px; height: 27px; font-size: 11px; top: 62px; right: 4px; }
.gz-agd-head .gz-amc-loose--3 { width: 21px; height: 21px; font-size: 9px;  top: 92px; right: 78px; }
.gz-agd-head .gz-amc-slot   { top: 26px; right: 20px; }
.gz-agd-head .gz-amc-reel   { width: 30px; height: 72px; }
.gz-agd-head .gz-amc-reel__strip {
  font-size: 15px;
  line-height: 31px;
  /* Its own keyframe: the sidebar one translates -138px for 23px lines.
     At 31px that would stop mid-symbol, so this moves 6 x 31 = 186px. */
  animation-name: gz-agd-spin;
}
@keyframes gz-agd-spin { to { transform: translateY(-186px); } }
.gz-agd-head .gz-amc-sgrid  { width: 106px; top: 20px; right: 14px; }
.gz-agd-head .gz-amc-scell  { font-size: 8px; }
.gz-agd-head .gz-amc-card   { width: 96px; top: 28px; right: 18px; }
.gz-agd-head .gz-amc-panel  { font-size: 12px; }
.gz-agd-head .gz-amc-coin   { width: 23px; height: 23px; top: 40px; right: 92px; }

/* Directory rows take the category's colour, so the list reads as part
   of the same block rather than a neutral table under a coloured header. */
.gz-agd-row { border-left-color: var(--gz-agd-accent, #00BCD4) !important; }
.gz-agd-row .gz-dir-row__name { color: #1f1f1f; }
@media (hover: hover) {
  .gz-agd-row:hover {
    border-color: var(--gz-agd-accent, #00BCD4);
    background: color-mix(in srgb, var(--gz-agd-accent, #00BCD4) 5%, #fff);
  }
}
.gz-agd-row .gz-dir-row__btn--review {
  border-color: var(--gz-agd-accent, #00BCD4);
  color: var(--gz-agd-accent, #00BCD4);
}
/* :focus as well as :hover — the base rule covers both, so without it a
   focused button kept the pink fill from that rule while the text took the
   accent colour from mine. !important on the colour because the base sets
   it too and specificity alone was leaving it to source order. */
.gz-agd-row .gz-dir-row__btn--review:hover,
.gz-agd-row .gz-dir-row__btn--review:focus,
.gz-agd-row .gz-dir-row__btn--review:active {
  background: var(--gz-agd-accent, #00BCD4);
  border-color: var(--gz-agd-accent, #00BCD4);
  color: #fff !important;
}
/* The filter chevrons and count pick it up too. */
.gz-agd-filter .gz-dir-filter__chevron { color: var(--gz-agd-accent, #00BCD4); }
.gz-agd-filter .gz-dir-filter__count { color: var(--gz-agd-accent, #00BCD4); font-weight: 700; }

/* ── Arcade game directory — "where to play" popup ────────────────
   The individual game pages are not built yet, so a row opens this
   instead of linking to a page that does not exist. One dialog, filled
   from the row's template on open. */

.gz-agd-modal {
  position: fixed;
  inset: 0;
  /* Above everything. .gz-dir-row:hover carries z-index 99999 !important
     for the brands directory tooltips, and the game rows share that class
     — so at 9000 the row you were hovering sat on top of the dialog. */
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.gz-agd-modal[hidden] { display: none; }

.gz-agd-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}

.gz-agd-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.4rem 1.5rem 1.5rem;
  background: #fff;
  border-radius: 3px;
  border-top: 4px solid var(--gz-agd-accent, #00BCD4);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

.gz-agd-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #9aa0a8;
  cursor: pointer;
}
.gz-agd-modal__close:hover { color: #333; }

/* The dialog's own heading, in the site's snake label rather than small
   coloured caps. */
.gz-agd-modal__eyebrow {
  display: inline-block;
  margin: 0 0 0.5rem;
}
.gz-agd-modal__eyebrow .gz-snake-label {
  font-size: 11px !important;
  letter-spacing: 0.12em;
  background: var(--gz-agd-accent, #00BCD4) !important;
}
@media (max-width: 600px) {
  .gz-agd-modal__eyebrow .gz-snake-label { font-size: 12px !important; }
}
.gz-agd-modal__title {
  font-family: var(--font-dauble);
  font-size: 24px;
  font-weight: 900;
  color: var(--black);
  line-height: 1.15;
  margin: 0 0 0.9rem;
}

.gz-agd-sub {
  display: inline-block;
  margin: 0.2rem 0 0.7rem;
}
.gz-agd-sub .gz-snake-label {
  font-size: 11px !important;
  letter-spacing: 0.12em;
  /* The category's colour rather than the default pink, so the headings
     belong to the hub the popup was opened from. */
  background: var(--gz-agd-accent, #00BCD4) !important;
}
.gz-agd-sub + .gz-agd-sitelist { margin-top: 0; }
.gz-agd-sitelist { list-style: none; margin: 0; padding: 0; }

.gz-agd-site {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid #efefef;
}
.gz-agd-site:last-child { border-bottom: none; }

/* Round logo, matching the circles used elsewhere on the site. */
.gz-agd-site__logo {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ececec;
}
.gz-agd-site__logo img {
  width: 112%;
  height: 112%;
  object-fit: cover;
  display: block;
}
.gz-agd-site__initial {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 800;
  color: var(--pink);
}

.gz-agd-site__body { flex: 1 1 auto; min-width: 0; }
.gz-agd-site__name {
  display: block;
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.3;
}
.gz-agd-site__rating { display: block; margin-top: 0.15rem; }

/* Small arrow box, right-aligned. The site name and rating sit to its
   left, so the arrow only has to say "there is a page behind this" — no
   wording needed, and "review" would have been wrong for what these are. */
.gz-agd-site__go {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--gz-agd-accent, #00BCD4);
  border-radius: 3px;
  background: #fff;
  font-size: 17px;
  line-height: 1;
  color: var(--gz-agd-accent, #00BCD4);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
/* The site-wide body-link rule underlines anything inside .gz-fw-content,
   and the popup sits in there — so the arrow box and the site names need
   it off explicitly. They are a button and a list row, not prose links. */
.gz-agd-site__go,
.gz-agd-site__go:hover,
.gz-agd-site__go:focus {
  text-decoration: none !important;
}
.gz-agd-site__go:hover {
  background: var(--gz-agd-accent, #00BCD4);
  color: #fff;
  transform: translateX(2px);
}

/* .gz-agd-site is display:flex, which beats the browser's own [hidden]
   rule — the same trap the directory rows hit. */
.gz-agd-site[hidden] { display: none !important; }

/* Shown when a game runs on more sites than the popup lists. */
.gz-agd-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-family: var(--font-editorial);
  font-size: 12px;
  font-style: italic;
  color: #8a9099;
  margin: 0.7rem 0 0;
}
.gz-agd-shuffle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid #e2e2e2;
  border-radius: 3px;
  background: #fff;
  font-family: var(--font-editorial);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: var(--gz-agd-accent, #00BCD4);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.gz-agd-shuffle:hover {
  background: #fafafa;
  border-color: var(--gz-agd-accent, #00BCD4);
}
.gz-agd-shuffle__icon {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.4s;
}
.gz-agd-shuffle:hover .gz-agd-shuffle__icon { transform: rotate(180deg); }

@media (max-width: 600px) {
  .gz-agd-more     { font-size: 13.5px; justify-content: center; }
  .gz-agd-shuffle  { font-size: 13.5px; padding: 0.5rem 0.9rem; }
}

.gz-agd-nosites {
  font-family: var(--font-editorial);
  font-size: 14px;
  color: #62666d;
  line-height: 1.5;
  margin: 0;
}

/* The snake CTA carries its own styling; this only sets the spacing for
   sitting at the foot of the dialog. */
/* Small print at the foot of the popup. Quiet, but the 18+ badge carries
   the site's pink so it is not lost in grey. */
.gz-agd-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid #eee;
  font-family: var(--font-editorial);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.5;
  /* Darker than the popup's other small print — this is the compliance
     line, so it has to be readable rather than decorative. */
  color: #5c6169;
}
.gz-agd-disclaimer__18 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--pink-dark, #C71585);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .gz-agd-disclaimer { font-size: 12.5px; }
}

.gz-agd-modal__all {
  margin: 1.2rem auto 0.2rem;
}

/* Stop the page scrolling behind the dialog. */
body.gz-agd-modal-open { overflow: hidden; }
/* No row should lift while the dialog is open — belt and braces alongside
   the z-index above. */
body.gz-agd-modal-open .gz-dir-row:hover { z-index: auto !important; }

@media (max-width: 600px) {
  .gz-agd-modal__panel { max-width: 100%; max-height: 88vh; padding: 1.2rem 1.1rem 1.3rem; }
  .gz-agd-modal__title { font-size: 23px; }

  /* Larger text on a phone, and the button drops to its own line — side by
     side it squeezed the site name into about half the width. */
  .gz-agd-site        { gap: 0.7rem; padding: 0.8rem 0; }
  /* Bigger than desktop, not smaller — the dialog is nearly full width on
     a phone, so there is more room here than in a 420px panel. */
  .gz-agd-site__logo    { width: 64px; height: 64px; }
  .gz-agd-site__initial { font-size: 26px; }
  .gz-agd-site__name  { font-size: 17px; }
  /* Arrow stays on the name's line — it is small enough not to crowd it. */
  .gz-agd-site__go    { width: 42px; height: 42px; font-size: 18px; }
  .gz-agd-sub .gz-snake-label { font-size: 12px !important; }
  .gz-agd-nosites     { font-size: 15px; }
  .gz-agd-modal__all .gz-snake-cta__text { font-size: 14px; padding: 0.7rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   PICK 'N' MIX mini-card fx — animated to match the arcade tiles.
   All sized to sit inside the 84×78 .gz-amc__fx box without clipping
   (the card is overflow:hidden).
   ═══════════════════════════════════════════════════════════════════ */

/* DAUBLE — a 3×2 block of letter tiles that flip one after another,
   like a guess resolving. Sized to fit fully inside the fx box. */
.gz-amc-dauble {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(3, 22px);
  grid-auto-rows: 22px;
  gap: 3px;
}
.gz-amc-dtile {
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  color: #fff;
  font-family: var(--font-dauble, 'Cinzel', Georgia, serif);
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  animation: gz-amc-dtile-flip 3.2s ease-in-out infinite;
  transform-origin: center;
}
.gz-amc-dtile:nth-child(1){ animation-delay:0s }
.gz-amc-dtile:nth-child(2){ animation-delay:.25s }
.gz-amc-dtile:nth-child(3){ animation-delay:.5s }
.gz-amc-dtile:nth-child(4){ animation-delay:.75s }
.gz-amc-dtile:nth-child(5){ animation-delay:1s }
.gz-amc-dtile:nth-child(6){ animation-delay:1.25s }
@keyframes gz-amc-dtile-flip {
  0%, 55%, 100% { transform: rotateX(0deg); }
  20% { transform: rotateX(-180deg); }
  40% { transform: rotateX(0deg); }
}

/* CROSSWORD — a 4×4 grid where a letter types into cells one at a time,
   then clears and starts again. Proper moving parts. */
.gz-amc-xgrid {
  position: absolute;
  top: 8px; right: 6px;
  display: grid;
  grid-template-columns: repeat(4, 15px);
  grid-auto-rows: 15px;
  gap: 2px;
  transform: rotate(4deg);
}
.gz-amc-xcell {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 1px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-dauble, 'Cinzel', Georgia, serif);
  font-weight: 800;
  font-size: 9px;
  color: #14532D;
}
.gz-amc-xcell--block { background: #1a1a1a; border-color: #1a1a1a; }
.gz-amc-xcell--fill::after {
  content: attr(data-l);
  opacity: 0;
  animation: gz-amc-xtype 4s steps(1) infinite;
}
/* Stagger the fills by their position in the grid so letters appear in
   sequence (B, I, N, G, O, !). Delays keyed to the fillable cells. */
.gz-amc-xgrid > .gz-amc-xcell:nth-child(1)::after  { animation-delay: 0s; }
.gz-amc-xgrid > .gz-amc-xcell:nth-child(4)::after  { animation-delay: .5s; }
.gz-amc-xgrid > .gz-amc-xcell:nth-child(7)::after  { animation-delay: 1s; }
.gz-amc-xgrid > .gz-amc-xcell:nth-child(9)::after  { animation-delay: 1.5s; }
.gz-amc-xgrid > .gz-amc-xcell:nth-child(12)::after { animation-delay: 2s; }
.gz-amc-xgrid > .gz-amc-xcell:nth-child(14)::after { animation-delay: 2.5s; }
@keyframes gz-amc-xtype {
  0% { opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

/* QUIZ JEEVES — a big ? that bobs, with A/B/C answer chips that light up
   one at a time as if being chosen. */
.gz-amc-quiz {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.gz-amc-quiz__q {
  font-family: var(--font-dauble, 'Cinzel', Georgia, serif);
  font-weight: 900;
  font-size: 40px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  animation: gz-amc-quiz-bob 2.6s ease-in-out infinite;
}
@keyframes gz-amc-quiz-bob {
  0%,100% { transform: rotate(-6deg) scale(1); }
  50% { transform: rotate(6deg) scale(1.08); }
}
.gz-amc-quiz__opts {
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 3px;
}
.gz-amc-quiz__opt {
  width: 15px; height: 15px;
  border-radius: 3px;
  background: rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-dauble, 'Cinzel', Georgia, serif);
  font-weight: 800;
  font-size: 9px;
  color: #fff;
  animation: gz-amc-quiz-opt 2.7s ease-in-out infinite;
}
.gz-amc-quiz__opt:nth-child(1){ animation-delay:0s }
.gz-amc-quiz__opt:nth-child(2){ animation-delay:.9s }
.gz-amc-quiz__opt:nth-child(3){ animation-delay:1.8s }
@keyframes gz-amc-quiz-opt {
  0%,70%,100% { background: rgba(255,255,255,0.35); transform: scale(1); }
  25% { background: #FDE68A; color: #0E7490; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .gz-amc-dtile, .gz-amc-xcell--fill::after, .gz-amc-quiz__q, .gz-amc-quiz__opt {
    animation: none !important;
  }
  .gz-amc-xcell--fill::after { opacity: 1; }
}

/* Dauble multi-colour scorecard title — a touch of letter-spacing so the
   coloured letters read cleanly. Letters stay inline so the spaces between
   TODAY'S / TOP / SCORES are preserved. */
.gz-dauble-scoretitle { letter-spacing: 1px; }

/* ═══════════════════════════════════════════════════════════════════
   Dauble sidebar scorecard — match the Editor's Picks box: clean single
   border, square corners, subtle shadow. Drops the "box in a box" look by
   removing the inner scorecard border. Scoped to --sidebar so the homepage
   wide promo is untouched.
   ═══════════════════════════════════════════════════════════════════ */
.gz-dauble-promo--sidebar {
  border: 3px solid transparent;
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  /* Multi-colour Dauble-tile border via a double background: white fill,
     then the rainbow gradient painted onto the border box. */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #F43F5E, #9c27b0, #2563EB, #16A34A, #F59E0B, #06B6D4) border-box;
}
.gz-dauble-promo--sidebar .gz-dauble-promo__scorecard {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.25rem 0;
  max-width: none;
  margin: 0 0 0.9rem;
}


/* Small note under the sidebar scorecard play button. */
.gz-dauble-promo__note {
  text-align: center;
  font-size: 13px;
  color: #7c6f95;
  font-style: italic;
  margin: 0.6rem 0 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Dauble scoreboard position tiles — square with rounded corners, like the
   Dauble letter tiles, in the six DAUBLE colours. Gentle staggered bounce.
   ═══════════════════════════════════════════════════════════════════ */
.gz-dauble-promo__pos.gz-dtile {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;              /* square, softly rounded — Dauble tile */
  font-family: var(--font-dauble, 'Cinzel', Georgia, serif);
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.22);
  animation: gz-dtile-bounce 2.4s ease-in-out infinite;
}
.gz-dtile--1 { background: #F43F5E; }
.gz-dtile--2 { background: #9c27b0; }
.gz-dtile--3 { background: #00BCD4; }
.gz-dtile--4 { background: #65A30D; }
.gz-dtile--5 { background: #F59E0B; }
.gz-dtile--6 { background: #0EA5E9; }
@keyframes gz-dtile-bounce {
  0%, 100% { transform: translateY(0); }
  15% { transform: translateY(-5px); }
  30% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .gz-dauble-promo__pos.gz-dtile { animation: none; }
}

/* Sidebar scorecard rows — the Dauble number tile sits inline on the left
   (tiles line up in a column down the left edge), and the score + username
   sit centred in the space to its right, score on top and name on a new line
   underneath so a long username never wraps oddly against the score. */
.gz-dauble-promo--sidebar .gz-dauble-promo__scorecard { text-align: center; }
.gz-dauble-promo--sidebar .gz-dauble-promo__row {
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0;
}
.gz-dauble-promo--sidebar .gz-dauble-promo__pos.gz-dtile {
  flex: 0 0 26px;          /* fixed left column — tiles align down the left */
  width: 26px;
  height: 26px;
  font-size: 13px;
}
.gz-dauble-promo__entry {
  flex: 1 1 auto;          /* fill the rest of the row so it can centre */
  display: flex;
  flex-direction: column;
  align-items: center;     /* centre the score + name */
  line-height: 1.15;
  min-width: 0;            /* let long names wrap instead of overflowing */
}
.gz-dauble-promo--sidebar .gz-dauble-promo__score {
  font-size: 20px;         /* bigger score, on top */
  font-weight: 800;
  order: 0;
}
.gz-dauble-promo--sidebar .gz-dauble-promo__name {
  font-size: 13px;         /* username underneath, smaller, new line */
  font-weight: 600;
  order: 1;
  text-align: center;
  word-break: break-word;
}

/* Empty scorecard rows — muted "Grab this spot!" placeholder. */
.gz-dauble-promo__row--empty .gz-dauble-promo__score { color: #c9bce0; }
.gz-dauble-promo__row--empty .gz-dauble-promo__name {
  color: #b3a3cc;
  font-style: italic;
  font-weight: 500;
}

/* Pick 'N' Mix mascot breaks out of MOST of the greeting box padding, keeping
   a mini padding (~0.5rem) rather than going fully edge-to-edge. Pulls out by
   0.75rem each side (box padding is 1.25rem). Scoped to --pnm. This comes
   after the boxed-in size rules above so it wins. */
.mag-greeting--centered .mag-greeting__mascot--pnm {
  width: calc(100% + 1.5rem);
  max-width: calc(100% + 1.5rem);
  height: auto;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  margin-top: 0.25rem;      /* not clipped at the top */
}
@media (max-width: 640px) {
  .mag-greeting--centered .mag-greeting__mascot--pnm {
    width: calc(100% + 1.5rem);
    max-width: calc(100% + 1.5rem);
  }
}

/* 18+ badge next to the Facebook icon in the sticky ticker's social block. */
.mag-ticker__age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 3px;
  padding: 3px 5px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

/* About Pick 'N' Mix Games — snake-label heading, centred, to match the
   Pick 'N' Mix page styling. */
.pnm-disclaimer__snake {
  display: block;
  width: fit-content;
  margin: 0 auto 1.1rem;
}

/* ── Dauble scoreboard: This Week's Top Scorer strip ─────────────────
   Sits at the top of the scoreboard box, above today's rows. */
.gz-weektop {
  display: block;
  padding: 0.7rem 0.85rem;
  margin: 0 0 0.75rem;
  background: linear-gradient(135deg, #f0e8ff, #faf5ff);
  border: 2px solid var(--purple);
  border-radius: 0;
  text-align: center;
}
.gz-weektop__label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.35rem;
}
.gz-weektop__crown {
  color: var(--purple);
  margin-right: 0.25rem;
}
.gz-weektop__name {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--black);
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
  margin-bottom: 0.15rem;
}
.gz-weektop__score {
  display: block;
  font-family: var(--font-dauble, inherit);
  font-size: 20px;
  font-weight: 900;
  color: var(--purple);
  line-height: 1.1;
}
.gz-weektop--empty .gz-weektop__name { font-size: 13px; font-weight: 600; color: #7c6f95; }

/* "Today's Top Scores" sub-heading inside the scoreboard box. */
.gz-weekwords__subhead {
  font-family: var(--font-editorial);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple);
  text-align: center;
  margin: 0 0 0.5rem;
}

/* Weekly Words list rows. */
.gz-weekwords__list { margin-top: 0.5rem; }

/* About Pick 'N' Mix — the divider sits flush at the very top edge of the
   purple background (marking where the section starts), with the content
   padded below it. No divider gap floating inside the purple. */
/* (About Pick 'N' Mix top divider removed — section keeps its default
   padding; no flush-top line needed.) */

/* Coming-soon popup blurb — a touch larger on desktop for readability. */
.gz-cs-blurb { font-size: 14px; }
@media (min-width: 768px) {
  .gz-cs-blurb { font-size: 16px; line-height: 1.65; }
}

/* ============================================================
   Pick 'N' Mix section — editorial layout.
   Mirrors .mag-section--arcade so the PNM hub gets the same
   heading sizes, list styling and spacing the arcade hub has.
   Headings run a PURPLE gradient (not arcade cyan). h4 + strong
   keep the shared pink accent. Purely additive — no arcade rules
   are touched.
   ============================================================ */
.mag-section--pnm { --section-accent: #9c27b0; --section-accent2: #4A148C; --s-accent: #9c27b0; }

.mag-section--pnm .mag-cover .mag-cover__h2,
.mag-section--pnm .mag-cover > h2:not(.mag-cover__title),
.mag-section--pnm .mag-cover__body .mag-cover__h2,
.mag-section--pnm .mag-cover__body h2 {
  font-family: var(--font-editorial);
  font-size: 22px; font-weight: 700; line-height: 1.25;
  margin: 1.6rem 0 1rem;
  background: linear-gradient(135deg, #9c27b0, #4A148C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 768px) {
  .mag-section--pnm .mag-cover .mag-cover__h2,
  .mag-section--pnm .mag-cover > h2:not(.mag-cover__title),
  .mag-section--pnm .mag-cover__body .mag-cover__h2,
  .mag-section--pnm .mag-cover__body h2 { font-size: 26px; }
}
.mag-section--pnm .mag-cover .mag-cover__subhead,
.mag-section--pnm .mag-cover > h3,
.mag-section--pnm .mag-cover__body .mag-cover__subhead,
.mag-section--pnm .mag-cover__body h3 {
  font-family: var(--font-editorial);
  font-size: 20px; font-weight: 800; font-style: italic;
  line-height: 1.3; margin: 1.5rem 0 0.6rem;
  background: linear-gradient(135deg, #9c27b0, #4A148C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 768px) {
  .mag-section--pnm .mag-cover .mag-cover__subhead,
  .mag-section--pnm .mag-cover > h3,
  .mag-section--pnm .mag-cover__body .mag-cover__subhead,
  .mag-section--pnm .mag-cover__body h3 { font-size: 22px; }
}
.mag-section--pnm .mag-cover > h4,
.mag-section--pnm .mag-cover__body h4,
.mag-section--pnm .mag-cover > h4.mag-cover__subhead,
.mag-section--pnm .mag-cover__body h4.mag-cover__subhead {
  font-family: var(--font-editorial);
  font-size: 16px; font-weight: 700; font-style: normal;
  line-height: 1.3; margin: 1.25rem 0 0.5rem;
  color: #C71585;
  background: none; -webkit-background-clip: unset; background-clip: unset;
}
@media (min-width: 768px) {
  .mag-section--pnm .mag-cover__body h4 { font-size: 18px; }
}
.mag-section--pnm .mag-cover > ul,
.mag-section--pnm .mag-cover > ol,
.mag-section--pnm .mag-cover__body ul,
.mag-section--pnm .mag-cover__body ol { list-style: none; padding: 0; margin: 1rem auto 1.25rem; max-width: 95%; }
.mag-section--pnm .mag-cover > ul li,
.mag-section--pnm .mag-cover > ol li,
.mag-section--pnm .mag-cover__body ul li,
.mag-section--pnm .mag-cover__body ol li {
  position: relative;
  padding: 0.65rem 0 0.65rem 2rem;
  font-family: var(--font-editorial);
  font-size: 16px;
  line-height: 1.65;
  color: #333;
  border-bottom: 1px solid #eee;
  margin-bottom: 0;
  font-weight: 500;
}
.mag-section--pnm .mag-cover > ul li:last-child,
.mag-section--pnm .mag-cover > ol li:last-child,
.mag-section--pnm .mag-cover__body ul li:last-child,
.mag-section--pnm .mag-cover__body ol li:last-child { border-bottom: none; }
.mag-section--pnm .mag-cover > ul li::before,
.mag-section--pnm .mag-cover__body ul li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  top: 0.5rem;
  font-size: 13px;
  color: #9c27b0;
}
.mag-section--pnm .mag-cover > ol,
.mag-section--pnm .mag-cover__body ol { counter-reset: gz-ol; }
.mag-section--pnm .mag-cover > ol li::before,
.mag-section--pnm .mag-cover__body ol li::before {
  counter-increment: gz-ol;
  content: counter(gz-ol);
  position: absolute;
  left: 0;
  top: 0.5rem;
  font-size: 13px;
  font-weight: 800;
  color: #9c27b0;
}
.mag-section--pnm .mag-cover > ul li strong,
.mag-section--pnm .mag-cover > ol li strong,
.mag-section--pnm .mag-cover__body ul li strong,
.mag-section--pnm .mag-cover__body ol li strong {
  color: #C71585;
  font-weight: 800;
}
.mag-section--pnm + .mag-section--pnm { padding-top: 0.5rem; }
.mag-section--pnm .gz-fw-content { margin: 0.75rem 0; }
.mag-section--pnm .mag-cover__standfirst { color: #1a1a1a; }

/* Pick 'N' Mix — Lotto tile FX: six lottery balls that pop in sequence,
   sized to sit inside the gz-amc__fx box like the other game FX. */
.gz-amc-lotto {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 54px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  place-items: center;
}
.gz-amc-lball {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-dauble, sans-serif);
  font-size: 11px; font-weight: 800;
  box-shadow: inset -2px -2px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.2);
  opacity: 0;
  animation: gz-amc-lball-pop 3s ease-in-out infinite;
}
.gz-amc-lball--1 { animation-delay: 0s; }
.gz-amc-lball--2 { animation-delay: 0.2s; }
.gz-amc-lball--3 { animation-delay: 0.4s; }
.gz-amc-lball--4 { animation-delay: 0.6s; }
.gz-amc-lball--5 { animation-delay: 0.8s; }
.gz-amc-lball--6 { animation-delay: 1s; }
@keyframes gz-amc-lball-pop {
  0%       { opacity: 0; transform: scale(0.4); }
  12%, 70% { opacity: 1; transform: scale(1); }
  85%,100% { opacity: 0; transform: scale(0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .gz-amc-lball { animation: none; opacity: 1; }
}

/* Pick 'N' Mix faded-border divider — purple, matching the arcade's format
   (used at the top of the hub and above the games section). */
.mag-faded-border--pnm {
  background: linear-gradient(90deg, transparent, #9c27b0, #4A148C, transparent);
  height: 2px;
  border: none;
  margin: 1rem 0;
}

/* Arcade-themed mini-card continue link (cyan), to match .gz-mini--arcade. */
.gz-mini-continue--arcade { color: #00BCD4; }

/* Dauble "This Week's Words" rows — day label + revealed word.
   Desktop: day on the left, word on the right (space-between).
   Mobile (≤640px): stack so the word drops onto its own line under the day,
   so long words never get cramped next to the day label. */
.gz-weekwords__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}
.gz-weekwords__row .gz-weekwords__day  { min-width: 80px; }
.gz-weekwords__row .gz-weekwords__word { text-align: right; }
@media (max-width: 640px) {
  .gz-weekwords__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .gz-weekwords__row .gz-weekwords__day  { min-width: 0; }
  .gz-weekwords__row .gz-weekwords__word { text-align: left; }
}

/* ── Navbar brand finder — "pull me" tab under the navbar + pull-out panel ── */
.gz-nav-search-tab-row { text-align: center; line-height: 0; }
.gz-nav-search-tab {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; cursor: pointer;
  background: #C71585; color: #fff;
  font-family: var(--font-editorial, 'Lora', Georgia, serif);
  font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  line-height: 1;
  padding: 8px 20px 9px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 10px rgba(199, 21, 133, 0.28);
  transition: padding .15s, background .15s;
}
.gz-nav-search-tab svg { width: 13px; height: 13px; }
.gz-nav-search-tab__arr { font-size: 11px; transition: transform .18s; }
.gz-nav-search-tab:hover, .gz-nav-search-tab:focus-visible { padding-top: 11px; background: #E91E8C; }
.gz-nav-search-tab.is-open { background: #E91E8C; }
.gz-nav-search-tab.is-open .gz-nav-search-tab__arr { transform: rotate(180deg); }
.gz-nav-search {
  overflow: hidden;
  max-height: 0;
  transition: max-height .18s ease;
  background: #fdf4f7;
  border-bottom: 1.5px solid #C71585;
}
.gz-nav-search.is-open { max-height: 480px; }
.gz-nav-search__inner { max-width: 560px; margin: 0 auto; padding: 14px 16px 16px; }
.gz-nav-search__input {
  width: 100%;
  font-family: var(--font-editorial, 'Lora', Georgia, serif);
  font-size: 16.5px; font-weight: 600; color: #1a1a1a;
  background: #fff;
  border: 1.5px solid #C71585; border-radius: 999px;
  padding: 11px 20px;
  outline: none;
}
.gz-nav-search__input:focus-visible { box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.22); }
.gz-nav-search__input::placeholder { color: #b48ba1; font-weight: 400; }
.gz-nav-search__results { list-style: none; margin: 0; padding: 0; }
.gz-nav-search__results.has-results { margin-top: 10px; }
.gz-nav-search__result {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  text-decoration: none;
}
.gz-nav-search__result:hover, .gz-nav-search__result:focus-visible { background: rgba(199, 21, 133, 0.09); }
.gz-nav-search__logo {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  background: #fff; border: 1.5px solid #C71585;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-editorial, 'Lora', Georgia, serif);
  font-size: 15px; font-weight: 800; color: #C71585;
}
.gz-nav-search__logo img { width: 100%; height: 100%; object-fit: cover; }
.gz-nav-search__name {
  font-family: var(--font-editorial, 'Lora', Georgia, serif);
  font-size: 16px; font-weight: 700; color: #1a1a1a;
}
.gz-nav-search__all {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-editorial, 'Lora', Georgia, serif);
  font-size: 14px; font-weight: 700;
  color: #C71585; text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .gz-nav-search { transition: none; }
}

/* ── Similar UK Bingo Sites — directory-flavoured mini-cards ──
   Replaces the small chips: bigger logo ring, name at article size,
   the site's pink G-rating squares, and a Take a Look cue - so the
   block carries the same visual weight as the brands directory. */
.gz-compare-heading--lg { font-size: 26px; margin-top: 0.6rem; }
.gz-similar-intro { font-size: 17.5px; }
.gz-similar-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1.4rem auto 0.6rem;
}
.gz-similar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 172px;
  padding: 1.15rem 0.9rem 1rem;
  background: #fff;
  border: 1.5px solid var(--pink-dark, #C71585);
  border-radius: 2px; /* square post-it corners - matches the magazine's squared style */
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(199, 21, 133, 0.12);
  transition: transform .18s, box-shadow .18s;
}
/* Post-it scatter: alternate slight tilts, like notes pinned to the page -
   echoes the rotated snake labels used across the site */
.gz-similar-card:nth-child(4n+1) { transform: rotate(-2deg); }
.gz-similar-card:nth-child(4n+2) { transform: rotate(1.6deg); }
.gz-similar-card:nth-child(4n+3) { transform: rotate(-1deg); }
.gz-similar-card:nth-child(4n+4) { transform: rotate(2.2deg); }
.gz-similar-card__logo {
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pink-bg, #fdf4f7);
  border: 2px solid var(--pink-dark, #C71585);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gz-similar-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.gz-similar-card__initial {
  font-family: var(--font-editorial);
  font-size: 26px; font-weight: 800; color: var(--pink-dark, #C71585);
}
.gz-similar-card__name {
  /* House card-title spec: Lora, 700 max (dir-rows are 700, minis 600) */
  font-family: var(--font-editorial);
  font-size: 17.5px; font-weight: 700; line-height: 1.25;
  color: var(--black, #1a1a1a);
  text-align: center;
}
.gz-similar-card__gs { display: inline-flex; gap: 2px; }
.gz-similar-card__go {
  /* House continue-link spec (mag-mini__continue): sans, 13px, italic, 600 */
  font-size: 13px; font-style: italic; font-weight: 600;
  color: var(--pink-dark, #C71585);
}
.gz-similar-card:hover, .gz-similar-card:focus-visible {
  /* picking the note up: straighten and lift */
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow: 0 10px 22px rgba(199, 21, 133, 0.30);
  z-index: 1;
}
.gz-similar-card:hover .gz-similar-card__go,
.gz-similar-card:focus-visible .gz-similar-card__go { text-decoration: underline; }
.gz-similar-card:focus-visible { outline: 2px solid var(--pink, #E91E8C); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .gz-similar-card { transition: none; }
  /* keep the static tilt, skip the straighten/lift animation */
  .gz-similar-card:hover, .gz-similar-card:focus-visible { transform: inherit; }
}
@media (max-width: 600px) {
  .gz-similar-cards { gap: 0.7rem; }
  .gz-similar-card { width: calc(50% - 0.7rem); max-width: 168px; padding: 0.95rem 0.6rem 0.85rem; }
  .gz-similar-card__logo { width: 56px; height: 56px; }
  .gz-similar-card__name { font-size: 16px; }
  .gz-compare-heading--lg { font-size: 22px; }
}

/* Daily Daub reel - live headline links (widget now wired to dq_daub_posts) */
.gz-brand-newsreel__item-link { color: inherit; text-decoration: none; }
.gz-brand-newsreel__item-link:hover,
.gz-brand-newsreel__item-link:focus-visible { color: #C71585; text-decoration: underline; }

/* Anchored editorial subheads (e.g. /about/#responsible-gambling) - leave
   breathing room so the jump target is not hidden under the sticky chrome */
.gz-brand-editorial h3[id] { scroll-margin-top: 110px; }

/* Write For Us application popup — the form is long, so this modal gets a
   wide, properly scrollable card (90% width, capped height, body scrolls) */
#gz-wfu-modal .gz-rev-modal__card {
  width: 90%;
  max-width: 860px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
#gz-wfu-modal .gz-rev-modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}

/* Write For Us popup — align the wfu form with the popup-family spec
   (review + contact forms): sans inputs, 6px radius, family borders,
   pink gradient submit. Scoped to the modal so the classes stay intact. */
#gz-wfu-modal .gz-wfu-field input[type=text],
#gz-wfu-modal .gz-wfu-field input[type=email],
#gz-wfu-modal .gz-wfu-field input[type=url],
#gz-wfu-modal .gz-wfu-field select,
#gz-wfu-modal .gz-wfu-field textarea {
  font-family: inherit;
  font-size: .9rem;
  padding: .5rem .75rem;
  border: 1px solid #e0d0f0;
  border-radius: 6px;
  box-sizing: border-box;
}
#gz-wfu-modal .gz-wfu-field input:focus,
#gz-wfu-modal .gz-wfu-field select:focus,
#gz-wfu-modal .gz-wfu-field textarea:focus {
  border-color: #C71585;
  box-shadow: 0 0 0 2px rgba(233,30,140,.15);
}
#gz-wfu-modal .gz-wfu-field label {
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
}
#gz-wfu-modal .gz-wfu-submit,
#gz-wfu-modal .gz-wfu-form button[type=submit] {
  width: 100%;
  padding: .75rem;
  background: linear-gradient(135deg, #C71585, #E91E8C);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
}

/* ═══ Daily Daub sidebar reel — NEWSPAPER, DAUB EDITION ═════════════════
   Square white plate in the Daily Daub's own design language
   (daily-daub.css loads sitewide): the real masthead component with its
   gradient rule plates, ink-navy type, ruled headlines, ink CTA bar. */
.gz-brand-latest-news {
  background: #fff;
  border: 1px solid var(--daub-ink, #0c2734);
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(12,39,52,.14);
  padding: 0.2rem 0.95rem 0.85rem;
}
.gz-brand-latest-news .daub-sidebar-mast { margin: 0.35rem 0 0.6rem; }
/* Dateline between ink rules */
.gz-brand-latest-news .gz-brand-newsreel__ticker {
  border-top: 1px solid var(--daub-ink, #0c2734);
  border-bottom: 1px solid var(--daub-ink, #0c2734);
  padding: 0.32rem 0;
  margin: 0 0 0.15rem;
  justify-content: center;
}
.gz-brand-latest-news .gz-brand-newsreel__live {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--daub-ink, #0c2734);
}
.gz-brand-latest-news .gz-brand-newsreel__dot { background: var(--daub-bright, #06b6d4); }
/* Ruled headlines — ink serif, sky on hover */
.gz-brand-latest-news .gz-reel-head {
  margin: 0;
  padding: 0.55rem 0.1rem;
  border-bottom: 1px dotted rgba(12,39,52,.35);
  font-family: var(--font-editorial);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.gz-brand-latest-news .gz-reel-head:last-child { border-bottom: none; }
.gz-brand-latest-news .gz-reel-head::before {
  content: "\25AA\00a0";
  color: var(--daub-bright, #06b6d4);
}
.gz-brand-latest-news .gz-reel-head,
.gz-brand-latest-news .gz-reel-head a {
  color: var(--daub-ink, #0c2734);
  text-decoration: none;
}
.gz-brand-latest-news .gz-reel-head a:hover { color: var(--daub-sky, #0284c7); }
/* CTA — square ink plate */
.gz-brand-latest-news .gz-brand-newsreel__cta {
  display: block;
  background: var(--daub-ink, #0c2734);
  color: #fff !important;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.55rem 0.6rem;
  margin-top: 0.55rem;
  border-radius: 0;
  text-decoration: none;
  transition: background .15s;
}
.gz-brand-latest-news .gz-brand-newsreel__cta:hover { background: var(--daub-sky, #0284c7); }
.gz-brand-latest-news .gz-brand-newsreel__cta span { color: #fff; }
/* No stretched void when the newsroom is quiet */
.gz-brand-latest-news .gz-brand-newsreel__feed { min-height: 0; }
.gz-brand-latest-news .gz-brand-newsreel { min-height: 0; background: transparent; box-shadow: none; border: none; }

/* ═══ Footer small-print legibility pass ════════════════════════════════
   The disclaimer, copyright and legal lines were 12-13px and some SHRANK
   on mobile. New floor: nothing under 13px anywhere, key disclosures
   13.5-14px, and mobile always >= desktop. */
.gz-footer-affiliate-disclosure__heading { font-size: 13px; }
.gz-footer-affiliate-disclosure__body    { font-size: 14px; line-height: 1.55; }
.site-footer__copyright-line             { font-size: 13.5px; line-height: 1.5; }
.site-footer__copyright-line--sub        { font-size: 13px; }
.gz-footer-link                          { font-size: 14px; }
.gz-footer-eeat-signal__label            { font-size: 13px; }

@media (max-width: 640px) {
  .gz-footer-affiliate-disclosure__body  { font-size: 14.5px; }
  .site-footer__copyright-line           { font-size: 14px; }
  .site-footer__copyright-line--sub      { font-size: 13.5px; }
  .gz-footer-link                        { font-size: 14.5px; }
  /* Undo the old mobile SHRINK on the editor creds */
  .gz-footer-eeat-signal__creds          { font-size: 14.5px !important; }
  .gz-footer-eeat-signal__updated        { font-size: 13.5px !important; }
}

/* Standard "Advertise with us" marker on live ad units */
.mag-mini-ad--live { position: relative; }
.gz-ad-marker {
  display: block;
  text-align: right;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8a8a8a;
  text-decoration: none;
  padding: 0.25rem 0.35rem 0.1rem 0;
}
.gz-ad-marker:hover { color: #C71585; }

/* Scoreboard: players who played but missed the word (MASTER-248) */
.gz-dauble-promo__missed {
  font-size: 9.5px; font-style: italic; opacity: .62; letter-spacing: .03em;
  white-space: nowrap;
}

/* ── Sister Sites gold theme (matches the nav dot) — MASTER-249 ── */
.mag-label--gold {
  background: linear-gradient(135deg, #F7B733, #E08A00);
  text-shadow: 0 1px 2px rgba(120, 70, 0, .35);
  color: #fff;
}
.gz-snake-wrap--gold::before, .gz-snake-wrap--gold::after {
  background: #F0A500;
}

/* Sister gold furniture (MASTER-250) */
.mag-cover__title--gold { color: #D78A00; }
.drop-cap--gold { color: #D78A00; }
.mag-faded-border--gold {
  background: linear-gradient(90deg, transparent, #F0A500 20%, #F0A500 80%, transparent);
}
/* duplicate .gz-dir-pill--gold removed (MASTER-254) - the original above styles all gold pills */
.gz-gold-link { color: #D78A00; font-weight: 700; }
.gz-gold-link:hover { color: #B36F00; }
.mag-mini__cat--gold { background: #D4A017; color: #fff; }
.gz-mini-continue--gold { color: #C99700; }

/* Sister sidebar greeting - honey theme (MASTER-264) */
.mag-greeting--gold { border-top: 3px solid #F0A500; border-bottom: 3px solid #E08A00; border-left: none; border-right: none; }
.mag-greeting--gold .mag-greeting__h1 { color: #D78A00; }
.mag-greeting--gold .mag-greeting__stars { color: #F0A500; }
.mag-greeting--gold .mag-greeting__stars-bottom { color: #E08A00; }
.mag-greeting--gold .text-pink { color: #D78A00; }
.mag-greeting--gold .text-cyan { color: #B36F00; }