:root {
  --site-primary: #4c61c6; --site-secondary: #3547aa; --site-accent: #537825;
  --site-bg: #f6f2f4; --site-fg: #231419;
}
.ca-ribbon { background:#4c61c6; color:#fff; text-align:center;
  font:600 .82rem/1.5 system-ui,sans-serif; padding:8px 12px; letter-spacing:.02em; }
.ca-site-nav { display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  background:#3547aa; padding:12px 16px; }
.ca-site-nav a { color:#fff !important; text-decoration:none; font:600 .92rem system-ui,sans-serif; }
.ca-site-nav a:hover, .ca-site-nav a.is-active { color:#537825 !important; }
.ca-games-section { background:#f6f2f4; color:#231419; padding:48px 16px; }
.ca-games-section > header { text-align:center; max-width:760px; margin:0 auto 8px; }
.ca-games-section h2 { color:#231419; font:800 2rem/1.15 system-ui,sans-serif; margin:0 0 10px; }
.ca-games-section .ca-lead { color:color-mix(in srgb, #231419 82%, transparent); text-align:center;
  max-width:680px; margin:0 auto 28px; font:400 1rem/1.6 system-ui,sans-serif; }
.ca-games-grid { display:grid; gap:18px; max-width:1080px; margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
/* Card bg + text derived from the palette fg/bg so contrast holds on BOTH a
   dark palette (light text on a lightened-dark card) AND a light palette
   (dark text on a darkened-light card). Hardcoded near-white text used to go
   invisible whenever palette.bg was light (HARD contrast rule). */
.ca-game-card { background:color-mix(in srgb, #231419 6%, #f6f2f4); border:1px solid color-mix(in srgb, #231419 16%, transparent);
  border-radius:16px; padding:24px 20px; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.15); transition:transform .15s ease; }
.ca-game-card:hover { transform:translateY(-4px); border-color:#537825; }
.ca-game-card .ca-emoji { font-size:2.6rem; line-height:1; }
.ca-game-card h3 { color:#231419; font:700 1.2rem system-ui,sans-serif; margin:10px 0 8px; }
.ca-game-card p { color:color-mix(in srgb, #231419 78%, transparent); font:400 .9rem/1.55 system-ui,sans-serif; margin:0 0 16px; }
.ca-game-card a { display:inline-block; background:#4c61c6; color:#fff !important;
  text-decoration:none; font:700 .9rem system-ui,sans-serif; padding:10px 22px; border-radius:999px; }
.ca-game-card a:hover { background:#537825; color:#3547aa !important; }
.ca-help { background:#3547aa; color:#fff; padding:40px 16px; }
.ca-help__title { font:800 1.5rem system-ui,sans-serif; text-align:center; margin:0 0 10px; }
.ca-help__lead { max-width:760px; margin:0 auto 14px; text-align:center;
  color:rgba(255,255,255,.82); font:400 .96rem/1.6 system-ui,sans-serif; }
.ca-help__helpline { max-width:760px; margin:0 auto 22px; text-align:center;
  color:#537825; font:700 1rem/1.5 system-ui,sans-serif; }
.ca-help__grid { list-style:none; margin:0 auto 16px; padding:0; max-width:980px;
  display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.ca-help__card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:16px 18px; }
.ca-help__card a { display:block; color:#537825; font-weight:700; text-decoration:none; margin-bottom:4px; }
.ca-help__phone { display:block; font:700 1.1rem system-ui,sans-serif; color:#fff; }
.ca-help__note { display:block; color:rgba(255,255,255,.6); font-size:.78rem; }
.ca-disclaimer { background:#f6f2f4; color:color-mix(in srgb, #231419 72%, transparent); text-align:center;
  padding:22px 16px; border-top:1px solid color-mix(in srgb, #231419 10%, transparent); }
.ca-disclaimer__lead { font:700 .9rem system-ui,sans-serif; color:#537825; margin:0 0 6px; }
.ca-disclaimer__small { font:400 .78rem/1.55 system-ui,sans-serif; max-width:820px; margin:0 auto; }
.ca-agegate { position:fixed; inset:0; z-index:99999; background:rgba(8,6,14,.92);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.ca-agegate__box { background:#3547aa; color:#fff; max-width:440px; width:100%;
  border-radius:18px; padding:34px 28px; text-align:center; border:1px solid rgba(255,255,255,.14); }
.ca-agegate__box h2 { font:800 1.5rem system-ui,sans-serif; margin:0 0 12px; }
.ca-agegate__box p { color:rgba(255,255,255,.82); font:400 .94rem/1.55 system-ui,sans-serif; margin:0 0 22px; }
.ca-agegate__actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.ca-agegate__yes { background:#4c61c6; color:#fff; border:0; cursor:pointer;
  font:700 .95rem system-ui,sans-serif; padding:12px 26px; border-radius:999px; }
.ca-agegate__no { color:rgba(255,255,255,.7) !important; align-self:center;
  font:600 .9rem system-ui,sans-serif; text-decoration:underline; }
.ca-subpage { background:#f6f2f4; color:#231419; padding:48px 16px; min-height:50vh; }
.ca-subpage__inner { max-width:880px; margin:0 auto; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:36px 32px;
  line-height:1.7; font-family:system-ui,sans-serif; }
.ca-subpage__inner h1 { color:#231419; margin-top:0; }
.ca-subpage__inner h2 { color:#537825; margin-top:1.6em; border-bottom:2px solid #4c61c6; padding-bottom:6px; }
.ca-subpage__inner a { color:#537825; }
/* Force-visible guard — MANY pool templates (TemplateMo .reveal, AOS, WOW,
   StartBootstrap .animate…) ship JS-driven scroll-reveal that starts elements
   at opacity:0 and only reveals them on scroll. We strip the template JS, so
   without this override the hero + sections stay invisible (blank page). This
   neutralises the start-state across the whole pool; slug-agnostic. */
.reveal, .reveal.visible, .reveal.active, .reveal.in-view,
[data-aos], .aos-init, .fade-in, .fade-up, .wow, .animate, .animated,
.scroll-reveal, .sr-only-anim, .js-reveal, .has-animation, .will-animate {
  opacity: 1 !important; transform: none !important;
  visibility: visible !important; animation: none !important;
}