/*
Theme Name: Come Game
Theme URI: https://example.com/
Author: Come Game
Description: A clean responsive information/business-style WordPress theme based on the approved Come Game HTML design.
Version: 1.0.6
License: GPL-2.0-or-later
Text Domain: come-game
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg:#07100f;--surface:#0d1917;--surface2:#10211e;--text:#f4fbf8;--muted:#9db1ad;
  --accent:#55e6a5;--accent2:#21c989;--line:rgba(255,255,255,.09);--max:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(7,16,15,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:"Space Grotesk";font-weight:700;font-size:20px;letter-spacing:-.7px}.logo span{color:var(--accent)}
.nav{display:flex;align-items:center;gap:28px;font-size:14px;color:#c9d7d3}.nav a:hover{color:var(--accent)}
.nav-btn{padding:10px 17px;border:1px solid rgba(85,230,165,.35);border-radius:9px;color:var(--accent)!important}
.menu-toggle{display:none;background:none;border:0;color:white;font-size:25px}
.hero{min-height:680px;display:flex;align-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 80% 30%,rgba(47,211,146,.12),transparent 34%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;padding:85px 0}
.eyebrow,.section-tag{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--accent);margin-bottom:18px}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;line-height:1.1}
h1{font-size:clamp(46px,6vw,76px);letter-spacing:-3px;max-width:720px}h1 span{color:var(--accent)}
.hero-copy>p{color:var(--muted);font-size:17px;max-width:620px;margin:25px 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;gap:14px;align-items:center;justify-content:center;padding:13px 20px;border-radius:10px;font-weight:700;font-size:14px;transition:.2s}.btn-primary{background:var(--accent);color:#04100c}.btn-primary:hover{transform:translateY(-2px);background:#76edb8}.btn-secondary{border:1px solid var(--line);background:rgba(255,255,255,.03)}.btn-secondary:hover{border-color:rgba(85,230,165,.4)}
.trust-row{display:flex;gap:30px;margin-top:45px}.trust-row div{display:flex;flex-direction:column}.trust-row strong{font-family:"Space Grotesk";font-size:15px}.trust-row small{color:var(--muted);font-size:12px}
.hero-card{min-height:430px;display:grid;place-items:center;position:relative}.game-panel{position:relative;width:min(350px,90%);padding:32px;border:1px solid rgba(85,230,165,.22);border-radius:25px;background:linear-gradient(145deg,rgba(21,45,40,.9),rgba(10,23,21,.94));box-shadow:0 30px 90px rgba(0,0,0,.35);text-align:center}.panel-top{font-size:11px;letter-spacing:1.5px;color:#b9cbc6}.live-dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:6px;box-shadow:0 0 12px var(--accent)}.panel-icon{width:92px;height:92px;margin:45px auto 25px;border-radius:24px;display:grid;place-items:center;background:var(--accent);color:#07100f;font-family:"Space Grotesk";font-size:29px;font-weight:700}.game-panel h3{font-size:25px}.game-panel p{color:var(--muted);font-size:14px;margin:10px 0 22px}.panel-link{color:var(--accent);font-weight:700;font-size:14px}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-one{width:180px;height:180px;background:rgba(48,225,151,.1);top:15%;right:5%}.orb-two{width:100px;height:100px;background:rgba(85,230,165,.08);bottom:12%;left:8%}
.section{padding:105px 0}.section-soft{background:var(--surface)}.split{display:grid;grid-template-columns:1fr 1fr;gap:80px}.split h2,.section-heading h2,.center-heading h2{font-size:42px;letter-spacing:-1.5px}.split p{color:var(--muted);margin-bottom:18px}.muted{font-size:14px}
.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:45px}.section-heading>p{max-width:390px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.feature-card{background:var(--surface2);border:1px solid var(--line);padding:28px;border-radius:16px;transition:.2s}.feature-card:hover{transform:translateY(-4px);border-color:rgba(85,230,165,.3)}.card-icon{color:var(--accent);font-size:12px;font-weight:700;margin-bottom:45px}.feature-card h3{font-size:20px;margin-bottom:12px}.feature-card p{font-size:14px;color:var(--muted)}
.center-heading{text-align:center;max-width:650px;margin:0 auto 48px}.center-heading p{color:var(--muted);margin-top:14px}.steps{max-width:850px;margin:auto;display:grid;gap:15px}.step{display:flex;gap:25px;padding:25px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.step>span{flex:0 0 45px;height:45px;border-radius:50%;background:var(--accent);color:#06100c;display:grid;place-items:center;font-weight:800}.step h3{font-size:19px;margin:2px 0 5px}.step p{color:var(--muted);font-size:14px}
.cta-section{padding:0 0 105px}.cta{padding:55px;border-radius:22px;background:linear-gradient(120deg,#123b31,#0d2420);border:1px solid rgba(85,230,165,.2);display:flex;align-items:center;justify-content:space-between;gap:35px}.cta h2{font-size:37px;letter-spacing:-1px}.cta p{color:#abc0ba;max-width:650px;margin-top:12px}.btn-light{background:var(--text);color:#07100f;white-space:nowrap}
.faq-wrap{max-width:850px}.faq-list{display:grid;gap:10px}.faq-list details{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);padding:19px 22px}.faq-list summary{cursor:pointer;font-weight:700;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";float:right;color:var(--accent);font-size:20px}.faq-list details[open] summary:after{content:"−"}.faq-list p{color:var(--muted);font-size:14px;padding-top:13px}
.footer{border-top:1px solid var(--line);padding:60px 0 20px;background:#050c0b}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px}.footer p{color:var(--muted);max-width:320px;margin-top:15px;font-size:14px}.footer h4{font-family:"Space Grotesk";margin-bottom:14px}.footer-grid>div>a:not(.logo){display:block;color:var(--muted);font-size:14px;margin:7px 0}.footer-grid>div>a:hover{color:var(--accent)}.copyright{border-top:1px solid var(--line);margin-top:45px;padding-top:18px;color:#71817e;font-size:12px}
@media(max-width:900px){.nav{gap:15px}.hero-grid{gap:35px}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.container{width:min(var(--max),calc(100% - 28px))}.menu-toggle{display:block}.nav{display:none;position:absolute;left:14px;right:14px;top:69px;background:#0b1715;border:1px solid var(--line);border-radius:12px;padding:14px;flex-direction:column;align-items:stretch}.nav.open{display:flex}.nav a{padding:10px}.hero{min-height:auto}.hero-grid,.split{grid-template-columns:1fr}.hero-grid{padding:70px 0}.hero-card{min-height:380px}.split{gap:30px}.section{padding:75px 0}.section-heading{display:block}.section-heading>p{margin-top:15px}.split h2,.section-heading h2,.center-heading h2{font-size:34px}.cards{grid-template-columns:1fr}.cta{padding:35px 25px;display:block}.cta .btn{margin-top:25px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.trust-row{gap:18px}}


/* WordPress menu compatibility */
.nav .wp-menu { display:flex; align-items:center; gap:28px; font-size:14px; color:#c9d7d3; }
.nav .wp-menu a:hover { color:var(--accent); }
.nav .wp-menu .nav-btn { padding:10px 17px; border:1px solid rgba(85,230,165,.35); border-radius:9px; color:var(--accent)!important; }
.nav .wp-menu ul { display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav .wp-menu li { list-style:none; }
@media(max-width:720px){
  .nav .wp-menu { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .nav .wp-menu ul { display:flex; flex-direction:column; align-items:stretch; gap:0; }
}


/* Come Game content-rich homepage update */
.cg-home { overflow:hidden; }
.cg-home .hero { padding:64px 0 58px; }
.cg-home .hero-grid { align-items:center; }
.cg-image-card {
  width:100%;
  max-width:500px;
  margin-left:auto;
  border:1px solid rgba(85,230,165,.28);
  border-radius:24px;
  padding:8px;
  background:linear-gradient(145deg,rgba(85,230,165,.10),rgba(255,255,255,.025));
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.cg-image-card img {
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:18px;
}
.cg-home .section { padding:58px 0; }
.cg-home .section-soft { padding:58px 0; }
.cg-home .section-heading { margin-bottom:28px; }
.cg-home .center-heading { margin-bottom:30px; }
.cg-info-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:28px;
}
.cg-stat {
  background:linear-gradient(145deg,var(--surface),rgba(16,33,30,.72));
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
}
.cg-stat strong { display:block; color:var(--accent); font-family:"Space Grotesk"; font-size:24px; line-height:1.1; }
.cg-stat span { display:block; color:var(--muted); margin-top:6px; font-size:13px; }
.cg-highlight {
  border:1px solid rgba(85,230,165,.22);
  background:linear-gradient(135deg,rgba(85,230,165,.09),rgba(13,25,23,.96));
  border-radius:20px;
  padding:28px;
  margin-top:22px;
}
.cg-highlight h3 { font-size:22px; margin-bottom:8px; }
.cg-highlight p { color:var(--muted); }
.cg-card-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:28px;
}
.cg-content-card {
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
}
.cg-content-card .mini-icon {
  width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  background:rgba(85,230,165,.10);color:var(--accent);font-weight:700;margin-bottom:16px;
}
.cg-content-card h3 { font-size:20px; margin-bottom:7px; }
.cg-content-card p { color:var(--muted); font-size:15px; }
.cg-bonus {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  margin-top:28px;
}
.cg-bonus-box {
  padding:24px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--surface);
}
.cg-bonus-box.featured { border-color:rgba(85,230,165,.28); background:linear-gradient(145deg,rgba(85,230,165,.10),var(--surface)); }
.cg-bonus-box strong { display:block; color:var(--accent); font-family:"Space Grotesk"; font-size:30px; line-height:1.1; }
.cg-bonus-box h3 { margin:8px 0 6px; font-size:20px; }
.cg-bonus-box p { color:var(--muted); }
.cg-step-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:28px;
}
.cg-step-card {
  position:relative;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
}
.cg-step-card .step-no {
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--accent);color:#07100f;font-weight:800;margin-bottom:15px;
}
.cg-step-card h3 { font-size:18px; margin-bottom:6px; }
.cg-step-card p { color:var(--muted); font-size:14px; }
.cg-note {
  margin-top:22px;padding:16px 18px;border-left:3px solid var(--accent);
  background:rgba(85,230,165,.055);color:var(--muted);border-radius:0 12px 12px 0;
}
.cg-home .faq-list { max-width:900px; margin:0 auto; }
.cg-home .cta-section { padding:54px 0; }
.cg-home .footer { margin-top:0; }
@media (max-width: 900px){
  .cg-info-strip,.cg-step-grid { grid-template-columns:repeat(2,1fr); }
  .cg-bonus { grid-template-columns:1fr; }
  .cg-image-card { max-width:520px; margin:0 auto; }
}
@media (max-width: 600px){
  .cg-home .hero { padding:42px 0; }
  .cg-home .section,.cg-home .section-soft { padding:44px 0; }
  .cg-info-strip,.cg-card-grid,.cg-step-grid { grid-template-columns:1fr; }
  .cg-highlight,.cg-content-card,.cg-bonus-box,.cg-step-card { padding:20px; }
}


/* V4 layout corrections */
.cg-home .section { padding-top: 42px; padding-bottom: 42px; }
.cg-home .section-soft { padding-top: 42px; padding-bottom: 42px; }
.cg-home .center-heading { margin-bottom: 22px; }
.cg-home .section-heading { margin-bottom: 22px; }

.cg-home .cg-step-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
}
.cg-home .cg-step-card {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
}
.cg-home .cg-step-card h3 {
  font-size: 17px !important;
  line-height: 1.25 !important;
}
.cg-home .cg-step-card p {
  margin: 6px 0 0 !important;
}
.cg-home .cg-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.cg-home .cg-bonus {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.cg-home .cg-highlight {
  margin-top: 16px !important;
}
.cg-home .cg-note {
  margin-top: 16px !important;
}
.cg-home .hero {
  padding-top: 48px !important;
  padding-bottom: 42px !important;
}
.cg-home .trust-row {
  margin-top: 24px !important;
}
.cg-home .cta-section {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
.cg-home .faq-list {
  margin-top: 18px !important;
}
.cg-home .faq-list details {
  margin-bottom: 10px !important;
}

@media (max-width: 900px){
  .cg-home .cg-step-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .cg-home .cg-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 600px){
  .cg-home .section, .cg-home .section-soft { padding-top: 34px; padding-bottom: 34px; }
  .cg-home .cg-step-grid, .cg-home .cg-card-grid { grid-template-columns: 1fr !important; }
  .cg-home .cg-bonus { grid-template-columns: 1fr !important; }
}


/* V5 heading alignment and spacing corrections */
.cg-home .section-tag {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.cg-home .section-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 12px !important;
  margin: 0 auto 26px !important;
  max-width: 1100px !important;
}
.cg-home .section-heading > div,
.cg-home .section-heading > p {
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
  margin: 0 !important;
}
.cg-home .section-heading h2,
.cg-home .center-heading h2 {
  text-align: center !important;
  white-space: nowrap !important;
  width: 100% !important;
  margin: 0 !important;
}
.cg-home .section-heading p,
.cg-home .center-heading p {
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 1050px !important;
}
.cg-home .center-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.cg-home .faq-wrap .center-heading .section-tag {
  margin-bottom: 0 !important;
}
@media (max-width: 900px){
  .cg-home .section-heading h2,
  .cg-home .center-heading h2 { white-space: normal !important; }
}
@media (max-width: 600px){
  .cg-home .section-heading,
  .cg-home .center-heading { gap: 9px !important; margin-bottom: 20px !important; }
}

/* V6 FINAL: compact vertical flow + centered step groups */
.cg-home,
.cg-home * { box-sizing:border-box; }

/* Prevent fixed/min heights and accumulated section spacing from creating blank areas. */
.cg-home section,
.cg-home .hero,
.cg-home .section,
.cg-home .section-soft,
.cg-home .cta-section {
  min-height:0 !important;
  height:auto !important;
}
.cg-home .hero {
  padding-top:34px !important;
  padding-bottom:34px !important;
}
.cg-home .hero-grid { padding-top:28px !important; padding-bottom:28px !important; }
.cg-home .section,
.cg-home .section-soft { padding-top:32px !important; padding-bottom:32px !important; }
.cg-home .section + .section,
.cg-home .section-soft + .section,
.cg-home .section + .section-soft,
.cg-home .section-soft + .section-soft { margin-top:0 !important; }
.cg-home .section-tag { margin-top:0 !important; margin-bottom:10px !important; }
.cg-home .section-heading,
.cg-home .center-heading { margin-top:0 !important; margin-bottom:18px !important; }
.cg-home .cg-info-strip,
.cg-home .cg-bonus,
.cg-home .cg-card-grid,
.cg-home .cg-step-grid { margin-top:18px !important; }
.cg-home .cg-highlight,
.cg-home .cg-note { margin-top:14px !important; }
.cg-home .trust-row { margin-top:18px !important; }
.cg-home .cta-section { padding-top:28px !important; padding-bottom:28px !important; }

/* Keep all 3-step groups together in the centre instead of hugging the left. */
.cg-home .cg-step-grid {
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 300px)) !important;
  justify-content:center !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:1000px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  gap:16px !important;
}
.cg-home .cg-step-card {
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:22px !important;
  align-self:stretch !important;
}

/* Centre the main heading + description as separate blocks. */
.cg-home .section-heading,
.cg-home .center-heading {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.cg-home .section-heading h2,
.cg-home .center-heading h2 {
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  white-space:nowrap !important;
  text-align:center !important;
  margin:0 !important;
}
.cg-home .section-heading p,
.cg-home .center-heading p {
  display:block !important;
  width:100% !important;
  max-width:900px !important;
  text-align:center !important;
  margin:0 auto !important;
}

@media (max-width:900px){
  .cg-home .cg-step-grid {
    grid-template-columns:repeat(2, minmax(0, 300px)) !important;
    max-width:650px !important;
  }
  .cg-home .section-heading h2,
  .cg-home .center-heading h2 { white-space:normal !important; }
}
@media (max-width:600px){
  .cg-home .hero { padding-top:22px !important; padding-bottom:22px !important; }
  .cg-home .hero-grid { padding-top:18px !important; padding-bottom:18px !important; }
  .cg-home .section,
  .cg-home .section-soft { padding-top:26px !important; padding-bottom:26px !important; }
  .cg-home .cg-step-grid {
    grid-template-columns:1fr !important;
    max-width:360px !important;
  }
  .cg-home .section-heading h2,
  .cg-home .center-heading h2 { white-space:normal !important; }
}


/* V7 FINAL CARD ALIGNMENT */
.cg-home .cg-step-grid {
    display: grid !important;
    width: min(100%, 1060px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    gap: 18px !important;
}

/* Exactly 3 steps: centered three-column group */
.cg-home .cg-step-grid:has(.cg-step-card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 280px)) !important;
}

/* Four steps: balanced four-column group */
.cg-home .cg-step-grid:has(.cg-step-card:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: min(100%, 1120px) !important;
}

/* Ensure the section itself doesn't create a giant empty right/left region */
.cg-home #register .cg-step-grid,
.cg-home #download .cg-step-grid,
.cg-home #refer-and-earn .cg-step-grid,
.cg-home #how-to-play .cg-card-grid {
    margin-top: 24px !important;
}

/* Keep all 3-card groups centered */
.cg-home #register .cg-step-grid,
.cg-home #how-to-play .cg-card-grid {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Make 4 feature cards balanced */
.cg-home #features .cg-card-grid {
    width: min(100%, 1120px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Avoid excessive section height from inherited theme rules */
.cg-home #register,
.cg-home #download,
.cg-home #refer-and-earn,
.cg-home #how-to-play {
    min-height: 0 !important;
    height: auto !important;
}

@media (max-width: 1050px) {
    .cg-home .cg-step-grid:has(.cg-step-card:nth-child(4):last-child) {
        grid-template-columns: repeat(2, minmax(0, 280px)) !important;
        width: min(100%, 600px) !important;
    }
    .cg-home #features .cg-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    .cg-home .cg-step-grid,
    .cg-home .cg-step-grid:has(.cg-step-card:nth-child(3):last-child),
    .cg-home .cg-step-grid:has(.cg-step-card:nth-child(4):last-child),
    .cg-home #features .cg-card-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100%, 420px) !important;
    }
}


/* V8: Registration markup is now a real card grid, not a nested list */
.cg-home #register .cg-step-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 18px !important;
    justify-content: center !important;
    align-items: stretch !important;
}
.cg-home #register .cg-step-card {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}
@media (max-width: 1050px) {
    .cg-home #register .cg-step-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100%, 700px) !important;
    }
}
@media (max-width: 680px) {
    .cg-home #register .cg-step-grid {
        grid-template-columns: 1fr !important;
        width: min(100%, 420px) !important;
    }
}

/* V9 - Center the How to Play three-card group */
.cg-home #how-to-play .cg-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(100%, 1080px) !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    justify-items: stretch !important;
    gap: 18px !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}
.cg-home #how-to-play .cg-card {
    width: auto !important;
    margin: 0 !important;
}
@media (max-width: 1050px) {
    .cg-home #how-to-play .cg-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100%, 700px) !important;
    }
}
@media (max-width: 680px) {
    .cg-home #how-to-play .cg-card-grid {
        grid-template-columns: 1fr !important;
        width: min(100%, 420px) !important;
    }
}