@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --green-950:#061A0D; --green-900:#0A2E1A; --green-800:#0F3D22;
  --green-700:#155C30; --green-600:#1A7A40; --green-500:#22A055;
  --green-400:#2DC96B; --green-300:#6FE09A; --green-200:#A8F0C0;
  --green-100:#D4F4E2; --green-50:#F0FBF5;
  --white:#FFFFFF; --off-white:#F7FAF8;
  --gray-100:#EDF2EF; --gray-200:#D1DBD5; --gray-400:#8A9E92;
  --gray-600:#4A5C51; --gray-900:#111A14;
  --gold:#D4AF37; --gold-light:#F0CB5A; --gold-dark:#A8881C;
  --success:#16A34A; --danger:#DC2626; --warning:#D97706; --info:#0284C7;
  --font-display:'Poppins','Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px;
  --radius-xl:22px; --radius-full:9999px;
}

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

/* Skip navigation link — visually hidden until focused */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:-1;}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;overflow:visible;z-index:9999;padding:12px 20px;background:var(--green-600);color:var(--white);font-weight:600;font-size:14px;border-radius:var(--radius-md);text-decoration:none;outline:3px solid var(--gold);outline-offset:2px;}
body{font-family:var(--font-body);background:var(--off-white);color:var(--gray-900);line-height:1.7;font-size:16px;}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.3;color:var(--green-900);}
h1{font-size:clamp(18px,1.8vw,24px);}
h2{font-size:clamp(18px,2vw,26px);margin-bottom:20px;}
h3{font-size:clamp(16px,2.5vw,22px);}
h4{font-size:15px;font-family:var(--font-body);font-weight:600;}
p{margin-bottom:1rem;color:var(--gray-600);}
a{color:var(--green-600);text-decoration:none;}
a:hover{color:var(--green-500);}

.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.section{padding:72px 0;}
.section-green{background:var(--green-50);}
.section-dark{background:var(--green-900);padding:72px 0;}
.section-dark h2,.section-dark h3,.section-dark h4{color:var(--white);}
.section-dark p{color:var(--green-100);}

/* Header */
.site-header{background:var(--white);border-bottom:3px solid var(--green-600);position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(26,122,64,0.1);}
.main-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:1200px;margin:0 auto;}
.nav-links{display:flex;list-style:none;gap:20px;}
.nav-links>li>a{font-weight:600;font-size:13px;color:var(--green-900);padding:6px 2px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;}
.nav-links>li>a:hover{color:var(--green-600);border-bottom-color:var(--green-600);}
.dropdown{position:relative;}
.dropdown-menu{display:none;position:absolute;top:110%;left:0;background:var(--white);border:1px solid var(--gray-200);border-top:3px solid var(--green-600);border-radius:0 0 var(--radius-md) var(--radius-md);padding:8px 0;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:200;}
.dropdown:hover .dropdown-menu{display:block;}
.dropdown-menu a{display:block;padding:8px 16px;font-size:13px;color:var(--gray-600);}
.dropdown-menu a:hover{background:var(--green-50);color:var(--green-600);}
.nav-cta{display:flex;gap:8px;align-items:center;}
.logo-m88{color:var(--green-700);font-weight:700;font-size:22px;font-family:var(--font-display);}
.logo-play{color:var(--gray-900);font-weight:700;font-size:22px;font-family:var(--font-display);}
.logo-dot{color:#7A5C00;font-weight:600;font-size:16px;font-family:var(--font-display);}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px;}
.hamburger span{display:block;width:24px;height:2px;background:var(--green-900);border-radius:2px;transition:all .3s;}

/* Buttons */
.btn-gold{background:var(--gold);color:var(--gray-900);padding:10px 22px;border-radius:var(--radius-md);font-weight:700;font-size:14px;transition:background .2s,transform .1s;display:inline-block;border:none;cursor:pointer;}
.btn-gold:hover{background:var(--gold-light);color:var(--gray-900);transform:translateY(-1px);}
.btn-gold:focus-visible{outline:3px solid var(--gold-dark);outline-offset:3px;box-shadow:0 0 0 5px rgba(212,175,55,0.3);}
.btn-green{background:var(--green-600);color:var(--white);padding:10px 22px;border-radius:var(--radius-md);font-weight:600;font-size:14px;transition:background .2s;display:inline-block;}
.btn-green:hover{background:var(--green-500);color:var(--white);}
.btn-green:focus-visible{outline:3px solid var(--green-300);outline-offset:3px;box-shadow:0 0 0 5px rgba(45,201,107,0.3);}
.btn-green-outline{background:transparent;color:var(--green-600);padding:9px 20px;border-radius:var(--radius-md);font-weight:600;font-size:14px;border:2px solid var(--green-600);transition:all .2s;display:inline-block;}
.btn-green-outline:hover{background:var(--green-50);}
.btn-green-outline:focus-visible{outline:3px solid var(--green-600);outline-offset:3px;box-shadow:0 0 0 5px rgba(26,122,64,0.2);}
.btn-alt{background:var(--white);color:var(--green-700);padding:10px 18px;border-radius:var(--radius-md);font-size:13px;font-weight:600;border:1.5px solid var(--green-200);transition:all .2s;display:inline-block;}
.btn-alt:hover{border-color:var(--green-600);background:var(--green-50);color:var(--green-600);}
.btn-alt:focus-visible{outline:3px solid var(--green-600);outline-offset:3px;}

/* Hero */
.hero{position:relative;min-height:220px;display:flex;align-items:center;overflow:hidden;background:var(--green-900);}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;z-index:0;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(6,26,13,0.92) 0%,rgba(6,26,13,0.7) 50%,rgba(6,26,13,0.15) 100%);z-index:1;}
.hero-content{position:relative;z-index:2;max-width:none;width:100%;padding-top:40px;padding-bottom:40px;}
.hero-content h1{color:var(--white);font-size:36px;font-weight:700;line-height:1.2;margin-bottom:12px;}
.hero-content p{color:var(--green-100);font-size:16px;margin-bottom:0;line-height:1.6;}
.hero-inner{display:flex;align-items:center;gap:48px;width:100%;}
.hero-inner .hero-content{flex:1;min-width:0;max-width:none;}
.hero-image{flex:0 0 auto;max-width:420px;}
.hero-image img{border-radius:var(--radius-lg);width:100%;height:auto;display:block;}
.hero-cta-group{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.cta-group{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.trust-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.trust-badge{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);padding:4px 10px;border-radius:var(--radius-full);font-size:11px;color:var(--white);font-weight:500;}

/* Game category cards */
.game-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;transition:all .2s;}
.game-card:hover{border-color:var(--green-400);transform:translateY(-3px);box-shadow:0 8px 24px rgba(26,122,64,0.12);}
.game-card-img{width:100%;height:160px;object-fit:cover;display:block;}
.game-card img{width:100%;height:180px;object-fit:cover;display:block;background:linear-gradient(135deg,var(--green-800) 0%,var(--green-600) 100%);}
/* Per-card placeholder gradients — visible while lazy images load */
.game-card:nth-child(1) img{background:linear-gradient(135deg,#0A2E1A,#1A7A40);}  /* Live Casino  — deep green   */
.game-card:nth-child(2) img{background:linear-gradient(135deg,#0369A1,#38BDF8);}  /* Slots        — blue         */
.game-card:nth-child(3) img{background:linear-gradient(135deg,#14532D,#22C55E);}  /* Sports       — bright green */
.game-card:nth-child(4) img{background:linear-gradient(135deg,#4C1D95,#7C3AED);}  /* Esports      — purple       */
.game-card:nth-child(5) img{background:linear-gradient(135deg,#0C4A6E,#0EA5E9);}  /* Fishing      — ocean blue   */
.game-card:nth-child(6) img{background:linear-gradient(135deg,#78350F,#F59E0B);}  /* Lottery      — amber        */
.game-card:nth-child(7) img{background:linear-gradient(135deg,#1C1917,#57534E);}  /* Fast Games   — charcoal     */
.game-card:nth-child(8) img{background:linear-gradient(135deg,#713F12,#D4AF37);}  /* All Providers— gold         */
.game-card-img-placeholder{width:100%;height:160px;background:linear-gradient(135deg,var(--green-800),var(--green-600));display:flex;align-items:center;justify-content:center;}
.game-card-body{padding:16px;}
.game-card-title{font-weight:700;font-size:16px;color:var(--green-900);margin-bottom:6px;}
.game-card-desc{font-size:13px;color:var(--gray-600);margin-bottom:12px;}
.game-count-badge{background:var(--green-100);color:var(--green-700);padding:2px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:600;display:inline-block;margin-bottom:10px;}

/* Category section badge */
.section-badge{display:inline-block;padding:4px 14px;border-radius:var(--radius-full);font-size:12px;font-weight:600;margin-bottom:12px;}
.badge-live{background:rgba(220,38,38,0.1);color:#7F1D1D;}
.badge-slots{background:rgba(2,132,199,0.1);color:#0C4A6E;}
.badge-sports{background:rgba(22,163,74,0.1);color:#14532D;}
.badge-esports{background:rgba(124,58,237,0.1);color:#4C1D95;}
.badge-fishing{background:rgba(2,132,199,0.12);color:#0C4A6E;}
.badge-lottery{background:rgba(217,119,6,0.1);color:#78350F;}

/* Provider tags */
.provider-tags{display:flex;flex-wrap:wrap;gap:8px;}
.provider-tag{background:var(--white);border:1.5px solid var(--green-200);color:var(--green-700);padding:6px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:500;transition:all .2s;}
.provider-tag:hover{border-color:var(--green-600);background:var(--green-50);}

/* Cards */
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:24px;transition:all .2s;}
.card:hover{border-color:var(--green-400);box-shadow:0 4px 20px rgba(26,122,64,0.08);transform:translateY(-2px);}
.card-green{background:var(--green-700);border:none;border-radius:var(--radius-lg);padding:24px;}

/* Grids */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}

/* Tables */
table{width:100%;border-collapse:collapse;margin:20px 0;}
th{background:var(--green-600);color:var(--white);padding:12px 16px;text-align:left;font-weight:600;font-size:13px;}
td{padding:11px 16px;border-bottom:1px solid var(--gray-100);font-size:14px;}
tr:nth-child(even) td{background:var(--green-50);}

/* Alt links */
.alt-links{display:flex;gap:10px;flex-wrap:wrap;}

/* Stars */
.stars{color:var(--gold);font-size:20px;letter-spacing:2px;}

/* Breadcrumb */
.breadcrumb{font-size:13px;color:var(--gray-400);margin-bottom:24px;}
.breadcrumb a{color:var(--green-500);}
.breadcrumb span{margin:0 6px;}

/* Pros/cons */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0;}
.pros{background:rgba(22,163,74,0.05);border:1px solid rgba(22,163,74,0.2);border-radius:var(--radius-md);padding:20px;}
.cons{background:rgba(220,38,38,0.05);border:1px solid rgba(220,38,38,0.2);border-radius:var(--radius-md);padding:20px;}
.pros h4{color:var(--success);}
.cons h4{color:var(--danger);}
ul.pros-list li::before{content:"✓ ";color:var(--success);font-weight:700;}
ul.cons-list li::before{content:"✗ ";color:var(--danger);font-weight:700;}

/* FAQ */
.faq-item{border-bottom:1px solid var(--gray-200);padding:16px 0;}
.faq-question{font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--green-900);font-size:15px;background:none;border:none;width:100%;text-align:left;padding:0;font-family:var(--font-body);}
.faq-answer{margin-top:12px;color:var(--gray-600);display:none;font-size:14px;}
.faq-answer.open{display:block;}
.faq-icon{color:var(--green-600);font-size:18px;font-weight:400;}

/* Author bio */
.author-bio{background:var(--green-50);border:1px solid var(--green-100);border-radius:var(--radius-lg);padding:20px 24px;display:flex;gap:16px;align-items:flex-start;margin:32px 0;}
.author-avatar{width:52px;height:52px;background:var(--green-600);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:700;font-size:18px;flex-shrink:0;}

/* Age badge */
.age-badge{background:#9B1C1C;color:var(--white);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;margin-bottom:12px;}

/* Responsible gambling */
.rg-banner{background:rgba(220,38,38,0.05);border:1px solid rgba(220,38,38,0.18);padding:14px 24px;border-radius:var(--radius-md);font-size:13px;text-align:center;color:var(--gray-600);}
.rg-line{color:#F87171;font-size:12px;}

/* Footer */
.site-footer{background:var(--green-900);color:var(--green-100);padding:60px 0 32px;}
.footer-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:20px;margin-bottom:40px;}
.footer-grid h4{color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:14px;font-family:var(--font-body);}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:8px;}
.footer-grid a{color:var(--green-100);font-size:12px;}
.footer-grid a:hover{color:var(--white);}
.footer-grid p{font-size:12px;color:var(--green-200);margin-bottom:6px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:24px;font-size:12px;color:var(--gray-400);}
.footer-bottom p{margin-bottom:6px;color:var(--gray-400);}
.footer-bottom a{color:var(--green-300);}
.footer-bottom nav{margin-top:8px;}
.footer-bottom nav a{margin:0 6px;color:var(--gray-400);}

/* GREEN BACKGROUND TEXT RULE — NEVER USE GREY */
.section-dark *,
.section-dark p,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark li,
.section-dark a,
.section-dark span,
.section-dark label { color: var(--green-100); }
.section-dark h1,
.section-dark h2,
.section-dark h3 { color: var(--white); }
.section-dark a:hover { color: var(--white); }

.card-green *,
.card-green p,
.card-green h3,
.card-green h4,
.card-green li,
.card-green span { color: var(--green-100); }
.card-green h2,
.card-green h3 { color: var(--white); }

/* Hero always white text */
.hero-content *,
.hero-content p,
.hero-content h1,
.hero-content h2,
.hero-content span { color: var(--white); }
.hero-content p { color: var(--green-100); }
/* Gold button must keep dark text for contrast */
.hero-content .btn-gold,
.btn-gold { color: var(--gray-900) !important; }

/* Footer always light text */
.site-footer *,
.site-footer p,
.site-footer li,
.site-footer span { color: var(--green-100); }
.site-footer h4 { color: var(--gold); }
.site-footer a { color: var(--green-100); }
.site-footer a:hover { color: var(--white); }
.footer-bottom,
.footer-bottom p,
.footer-bottom a { color: var(--green-200); }

/* Dark green inline backgrounds — force white text (600, 700, 800, 900, 950) */
[style*="background:var(--green-6"] p,[style*="background:var(--green-7"] p,
[style*="background:var(--green-8"] p,[style*="background:var(--green-9"] p,
[style*="background:var(--green-6"] span,[style*="background:var(--green-7"] span,
[style*="background:var(--green-8"] span,[style*="background:var(--green-9"] span,
[style*="background:var(--green-6"] li,[style*="background:var(--green-7"] li,
[style*="background:var(--green-8"] li,[style*="background:var(--green-9"] li { color: var(--white) !important; }

/* Light green inline backgrounds — force dark readable text (50, 100, 200) */
[style*="background:var(--green-50)"] p,[style*="background:var(--green-100)"] p,
[style*="background:var(--green-200)"] p,[style*="background:var(--green-50)"] span,
[style*="background:var(--green-100)"] span,[style*="background:var(--green-200)"] span,
[style*="background:var(--green-50)"] li,[style*="background:var(--green-100)"] li,
[style*="background:var(--green-200)"] li,[style*="background:var(--green-50)"] strong,
[style*="background:var(--green-100)"] strong,[style*="background:var(--green-200)"] strong { color: var(--gray-900) !important; }

/* Table wrap */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;}

/* Section header */
.section-header{text-align:center;margin-bottom:56px;}
.section-header h2{margin-bottom:16px;}
.section-header p{color:var(--gray-600);max-width:600px;margin:0 auto;}

/* Step cards */
.step-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:24px;position:relative;}
.step-number{width:40px;height:40px;background:var(--green-600);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;margin-bottom:16px;}

/* Payment table */
.payment-badge{background:var(--green-100);color:var(--green-700);padding:2px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;}

/* Review rating */
.rating-box{background:var(--green-600);color:var(--white);border-radius:var(--radius-lg);padding:24px;text-align:center;}
.rating-score{font-size:56px;font-weight:700;line-height:1;color:var(--white);}
.rating-label{font-size:13px;color:var(--green-100);}

/* ================================================
   HOMEPAGE COMPONENT CLASSES
   ================================================ */

/* Section layout helpers */
.section-light { background: var(--off-white); padding: 72px 0; }
.section-title { font-size: clamp(22px,3vw,34px); font-family: var(--font-display); font-weight: 700; color: var(--green-900); margin-bottom: 20px; margin-top: 16px; }
.section-dark .section-title { color: var(--white); }
.section-intro { color: var(--gray-600); max-width: 680px; margin: 0 0 40px; font-size: 15px; }
.section-dark .section-intro { color: var(--green-100); }
.section-cta { text-align: center; margin-top: 48px; }

/* Hero fixes */
.hero-title { color: var(--white); margin-bottom: 12px; }
.hero-tagline { color: var(--green-100); font-size: 18px; margin-bottom: 0; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }

/* Game category card label */
.game-card-label { display: inline-block; background: var(--green-100); color: var(--green-700); padding: 2px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; margin-bottom: 8px; }

/* Feature cards (dark section) */
.feature-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-lg); padding: 24px; transition: all .2s; }
.feature-card:hover { background: rgba(255,255,255,0.13); border-color: var(--gold); }
.feature-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.feature-card-provider { font-size: 11px; font-weight: 600; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; }
.feature-card-category { font-size: 11px; background: rgba(255,255,255,0.1); color: var(--green-100); padding: 2px 8px; border-radius: var(--radius-full); }
.feature-card-title { color: var(--white); font-size: 17px; margin-bottom: 8px; }
.feature-card-desc { color: var(--green-100); font-size: 13px; margin: 0; }

/* Slot cards (light section) */
.slot-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; transition: all .2s; }
.slot-card:hover { border-color: var(--green-400); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(26,122,64,0.1); }
.slot-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.slot-provider { font-size: 11px; font-weight: 700; color: var(--green-600); text-transform: uppercase; letter-spacing: 0.4px; }
.slot-rtp { font-size: 11px; background: var(--green-50); color: var(--green-700); padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; }
.slot-title { color: var(--green-900); font-size: 16px; margin-bottom: 8px; }
.slot-desc { color: var(--gray-600); font-size: 13px; margin: 0; }

/* Access / alt links section */
.access-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.access-disclaimer { font-size: 13px; color: var(--green-100); margin-top: 16px; }
.access-disclaimer a.text-gold { color: var(--gold); }
.section-dark .access-disclaimer { color: var(--green-100); }

/* Providers flex (homepage showcase) */
.providers-flex { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

/* Sports/Esports cards (dark section) */
.sports-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-lg); padding: 28px; }
.sports-card-title { color: var(--white); font-size: 20px; margin-bottom: 10px; }
.sports-card-intro { color: var(--green-100); font-size: 14px; margin-bottom: 16px; }
.sports-list { list-style: none; padding: 0; margin: 0 0 20px; }
.sports-list li { color: var(--green-100); font-size: 14px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sports-list li::before { content: "› "; color: var(--gold); font-weight: 700; }

/* Guide cards */
.guide-card { display: block; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 24px; text-decoration: none; transition: all .2s; }
.guide-card:hover { border-color: var(--green-400); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(26,122,64,0.1); }
.guide-icon { font-size: 32px; margin-bottom: 14px; }
.guide-title { color: var(--green-900); font-size: 17px; margin-bottom: 8px; }
.guide-desc { color: var(--gray-600); font-size: 13px; margin-bottom: 14px; }
.guide-link { color: var(--green-600); font-size: 13px; font-weight: 600; }

/* FAQ list spacing */
.faq-list { max-width: 800px; margin: 0 auto; }
.section-dark .faq-question { color: var(--white); }
.section-dark .faq-answer p { color: var(--green-100); }
.section-dark .faq-icon { color: var(--gold); }
.section-dark .faq-item { border-bottom-color: rgba(255,255,255,0.12); }

/* ================================================
   MOBILE BREAKPOINTS
   ================================================ */
/* Mobile-safe defaults */
img { max-width: 100%; height: auto; display: block; }
/* Tables: full-width on desktop, scrollable wrapper on mobile via .table-wrap */
table { width: 100%; border-collapse: collapse; display: table; }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
  /* Tables scroll horizontally on mobile via wrapper */
  .table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
  table { min-width: 480px; }
  .container { padding: 0 16px; }
  .section { padding: 64px 0; }
  .section-dark { padding: 64px 0; }
  .section-light { padding: 64px 0; }
  .nav-links, .nav-cta { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    border-bottom: 3px solid var(--green-600);
    padding: 12px 0; z-index: 300;
  }
  .nav-links.open li { width: 100%; }
  .nav-links.open li a {
    display: block; padding: 12px 20px;
    font-size: 15px; border-bottom: none;
  }
  .nav-cta.open {
    display: flex; flex-direction: column;
    padding: 12px 20px; gap: 10px;
    background: var(--white);
  }
  .nav-cta.open a { text-align: center; }
  .hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
  .hamburger span { display: block; width: 24px; height: 2px; background: var(--green-900); border-radius: 2px; transition: all .3s; }
  .dropdown-menu { display: none !important; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .pros-cons { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .hero { min-height: 400px; }
  .hero-content { padding-top: 40px; padding-bottom: 40px; max-width: 100%; }
  .hero-content h1 { font-size: clamp(24px, 6vw, 34px); }
  .hero-content p { font-size: 15px; }
  .hero-overlay { background: linear-gradient(to bottom, rgba(6,26,13,0.88) 0%, rgba(6,26,13,0.75) 100%); }
  .cta-group, .hero-cta { flex-direction: column; align-items: flex-start; }
  .btn-gold, .btn-green, .btn-green-outline { width: 100%; text-align: center; padding: 14px 20px; }
  .alt-links, .access-buttons { flex-direction: column; }
  .btn-alt { width: 100%; text-align: center; }
  .trust-row { gap: 8px; }
  .trust-badge { font-size: 11px; padding: 4px 10px; }
  .provider-tags { gap: 6px; }
  .provider-tag { font-size: 12px; padding: 5px 10px; }
  .nav-cta { display: none; }
  .main-nav { padding: 12px 16px; }
}

@media (max-width: 480px) {
  .container { padding: 0 12px; }
  .section { padding: 48px 0; }
  .section-dark { padding: 48px 0; }
  .section-light { padding: 48px 0; }
  h1 { font-size: clamp(22px, 7vw, 30px); }
  h2 { font-size: clamp(18px, 6vw, 26px); }
  h3 { font-size: clamp(16px, 5vw, 20px); }
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: 340px; }
  .hero-content { padding-top: 32px; padding-bottom: 32px; }
  .game-card { width: 100%; }
  .game-card-img { height: 140px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
  .footer-grid { gap: 20px; }
  .site-footer { padding: 40px 0 24px; }
  .faq-question { font-size: 14px; }
  .breadcrumb { font-size: 12px; white-space: nowrap; overflow-x: auto; }
  .author-bio { flex-direction: column; }
}

@media (max-width: 375px) {
  .container { padding: 0 10px; }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  .btn-gold, .btn-green, .btn-green-outline, .btn-alt { font-size: 14px; padding: 12px 16px; }
  .trust-badge { font-size: 10px; padding: 3px 8px; }
  .game-card-body { padding: 12px; }
  .game-card-title { font-size: 14px; }
  .nav-logo .logo-m88 { font-size: 18px; }
  .nav-logo .logo-play { font-size: 18px; }
  .nav-logo .logo-dot { font-size: 14px; }
}

html, body { overflow-x: hidden; max-width: 100vw; }

/* ================================================
   ARTICLE BODY — full-width article layout wrapper
   ================================================ */
.article-body { max-width: 1200px; margin: 0 auto; padding: 48px 24px 64px; }
.article-body h1 { margin-bottom: 20px; }
.article-body h2 { margin-top: 48px; margin-bottom: 12px; }
.article-body h3 { margin-top: 28px; margin-bottom: 10px; color: var(--green-700); }
.article-body p  { color: var(--gray-600); }
.article-body ol.steps-list { padding-left: 0; list-style: none; counter-reset: step; }
.article-body ol.steps-list li { counter-increment: step; padding: 14px 16px 14px 52px; position: relative; border-left: 3px solid var(--green-400); background: var(--green-50); border-radius: 8px; margin-bottom: 10px; font-size: 14px; color: var(--gray-600); }
.article-body ol.steps-list li::before { content: counter(step); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; background: var(--green-600); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; font-family: var(--font-display); }
.article-body ol.steps-list li strong { color: var(--green-900); display: block; margin-bottom: 2px; }

/* ================================================
   INLINE ARTICLE CTA BANNER
   Use instead of plain .cta-block on all article/guide pages
   Dark green gradient — all text must be white / green-100
   ================================================ */
.article-cta {
  background: linear-gradient(135deg, var(--green-950) 0%, var(--green-900) 50%, var(--green-700) 100%);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  text-align: center;
  margin: 40px 0;
}
.article-cta-title {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--white);
  margin-bottom: 8px;
}
/* Override .article-body p colour inside CTA — must be light not dark */
.article-cta p,
.article-cta .article-cta-sub {
  color: var(--green-200);
  font-size: 14px;
  margin-bottom: 24px;
}
.article-cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.article-cta-btns .btn-gold { padding: 13px 32px; font-size: 15px; }
/* White-outline login button — high contrast on dark backgrounds */
.btn-login {
  display: inline-block;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
  transition: all .2s;
  text-decoration: none;
}
.btn-login:hover {
  background: rgba(255,255,255,0.18);
  border-color: var(--white);
  color: var(--white);
}
.btn-login:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(255,255,255,0.25);
}

/* Screen-reader-only utility */
.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;}

@media (max-width: 480px) {
  .article-cta { padding: 28px 16px; }
  .article-cta-btns { flex-direction: column; align-items: center; }
  .article-cta-btns .btn-gold,
  .article-cta-btns .btn-login { width: 100%; text-align: center; }
  .article-body { padding: 32px 16px 48px; }
}
* { min-width: 0; }

/* Blog post featured image */
.post-featured-img {
  margin: 24px 0 32px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
}
.post-featured-img img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}
@media (max-width: 768px) {
  .post-featured-img img { max-height: 260px; }
}
@media (max-width: 480px) {
  .post-featured-img img { max-height: 200px; border-radius: var(--radius-md); }
}