/* Home deslogada do Count Master no layout do Bubbles (bubbles-fun.online).
   Regras copiadas do CSS do Bubbles e presas em .cmx para nao vazar no resto do site. */
@property --cmx-card-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cmx{--primary:#9d30fc;--primary-2:#5a0498;--text:#f3edff;--border:#3c1f73;--bg:#0d0520;--panel-bg-image:url(../images/all/backgroundmb-dark-v5.jpg);--accent:#f3cf23;--text-dim:#a08cc8;--gold:#f3cf23;--roxo-face:#a44bfc;--roxo-face2:#7a1bdc;--roxo-brilho:#ddb6fe;--roxo-base:#45037a;--roxo-borda:#2c0250;--ouro-face:#f7d733;--ouro-face2:#f0a80c;--ouro-brilho:#fff6b0;--ouro-base:#b85e02;--ouro-borda:#7a3d02;--panel-bg-image:url(/images/cm/home/hero-mobile.webp);--font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;position:relative;min-height:100dvh}
.cmx *{box-sizing:border-box;margin:0;padding:0}
.cmx button{font-family:inherit}
.cmx img,.cmx video{max-width:100%}
/* esconde o topo, o rodape e a barra de baixo do site so nesta tela */
body:has(.cmx) nav.fixed.top-0{display:none!important}
body:has(.cmx) .mt-\[47px\],body:has(.cmx) .mt-\[81px\]{margin-top:0!important}
body:has(.cmx) .footer.footer-color,body:has(.cmx) .fixed.bottom-0.nav-glass{display:none!important}
/* titulo do Count Master (no Bubbles e uma imagem) */
.cmx .cmx-title{display:flex;flex-direction:column;align-items:center;width:100%;max-width:368px;margin:0 auto;filter:drop-shadow(0 10px 26px #00000073)}
.cmx.landing .lp-title .cmx-title img{width:auto;height:142px;max-width:100%;display:block;margin:0 auto -6px;filter:none}
.cmx .cmx-title span{display:block;font-family:"Luckiest Guy","Baloo 2",sans-serif;font-weight:400;font-size:clamp(2rem,10.6vw,2.5rem);line-height:1.02;letter-spacing:.01em;white-space:normal;text-transform:uppercase;color:#fff;-webkit-text-stroke:2px #2a0d5e;paint-order:stroke fill;text-shadow:0 4px 0 #2a0d5e,0 8px 18px #000a}
.cmx .cmx-title span.cmx-gold{color:#f7d733;-webkit-text-stroke:2px #7a3d02;text-shadow:0 4px 0 #7a3d02,0 8px 18px #000a}
.cmx .lp-hero-banner img{object-position:50% 40%!important}
.cmx .lp-howto-visual{background:radial-gradient(circle at 50% 40%,#9d30fc33,transparent 65%),#0a0e1a}
.cmx .lp-howto-visual .cmx-pair{display:flex;justify-content:center;align-items:center;gap:6px;height:100%}
.cmx .lp-howto-visual .cmx-pair img{width:auto;height:80%}
@media (max-height:640px){.cmx.landing .lp-title .cmx-title img{height:84px}.cmx .cmx-title span{font-size:1.9rem}}
.cmx .btn{cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; border: none; border-radius: 12px; justify-content: center; align-items: center; gap: 8px; padding: 13px 26px; font-size: 1rem; font-weight: 700; transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s; display: inline-flex;}
.cmx .btn:disabled{opacity: 0.5; cursor: not-allowed;}
.cmx .btn:not(:disabled):hover{transform: translateY(-2px);}
.cmx .btn:not(:disabled):active{transform: translateY(0px);}
.cmx .btn-primary{background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: rgb(255, 255, 255); box-shadow: rgba(124, 92, 255, 0.4) 0px 8px 24px;}
.cmx .btn-accent{color: rgb(4, 40, 24); background: linear-gradient(135deg, rgb(0, 255, 136), rgb(0, 224, 85)); box-shadow: rgba(0, 255, 120, 0.45) 0px 8px 24px;}
.cmx .btn-ghost{color: var(--text); border: 1px solid var(--border); background: 0px 0px;}
.cmx .btn-sm{padding: 9px 16px; font-size: 0.85rem;}
.cmx .btn-lg{padding: 16px 36px; font-size: 1.1rem;}
.cmx .btn-block{width: 100%;}
.cmx .app-header{z-index: 50; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); background: rgba(11, 14, 26, 0.85); justify-content: space-between; align-items: center; padding: 14px 24px; display: flex; position: sticky; top: 0px;}
.cmx .logo{color: var(--text); align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; display: flex;}
.cmx .header-actions{align-items: center; gap: 12px; display: flex;}
.cmx.landing main{flex: 1 1 0%;}
.cmx.landing .app-header{z-index: 50; backdrop-filter: none; padding: calc(12px + env(safe-area-inset-top,0px)) 16px 12px; background: linear-gradient(rgba(8, 12, 24, 0.85) 0%, rgba(0, 0, 0, 0) 100%); border-bottom: none; position: absolute; top: 0px; left: 0px; right: 0px;}
.cmx.landing .app-header .btn{padding: 8px 14px; font-size: 0.78rem;}
.cmx.landing .app-logo{width: auto; height: 44px;}
.cmx .lp-hero{padding: calc(72px + env(safe-area-inset-top,0px)) 16px 32px; position: relative; overflow: hidden;}
.cmx .lp-hero-bg{background: linear-gradient(180deg, #080c1833 0%, #080c188c 68%, var(--bg) 100%), var(--panel-bg-image) center top / cover no-repeat; pointer-events: none; position: absolute; inset: 0px;}
.cmx .lp-hero-inner{z-index: 1; text-align: center; max-width: 480px; margin: 0px auto; position: relative;}
.cmx .lp-title{text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 14px; font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 900; line-height: 1.05;}
.cmx.landing--main-showcase .lp-hero{overflow: visible;}
.cmx.landing--main-showcase .lp-title{letter-spacing: -0.04em; white-space: nowrap; font-size: clamp(1.1rem, 4.8vw, 1.5rem);}
.cmx .lp-hero-banner{border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; max-width: 320px; margin: 0px auto 24px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.45) 0px 16px 40px;}
.cmx .lp-hero-banner img, .cmx .lp-hero-banner video{width: 100%; display: block;}
.cmx .lp-hero-banner--video{isolation: isolate; border: 0px; border-radius: 24px; max-width: 280px; margin: 30px auto 24px; position: relative; overflow: visible; box-shadow: rgba(0, 0, 0, 0.55) 0px 18px 48px;}
.cmx .lp-hero-banner--video::before{content: ""; z-index: 2; pointer-events: none; background: conic-gradient(from var(--cmx-card-spin), #8b5cf6 0deg, #d84aff 70deg, #ff69dc 135deg, #ffd166 190deg, #f05bd8 245deg, #a855f7 305deg, #8b5cf6 360deg); border-radius: 29px; padding: 5px; animation: 2.2s linear 0s infinite normal none running cmx-card-border-spin, 1.1s ease-in-out 0s infinite alternate none running cmx-fire-border-flicker; position: absolute; inset: -5px; mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) 0px 0px content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) 0px 0px;}
.cmx .lp-hero-banner--video::after{content: ""; z-index: -1; pointer-events: none; border-radius: 30px; animation: 1.3s ease-in-out 0s infinite alternate none running cmx-fire-glow-pulse; position: absolute; inset: -6px; box-shadow: rgba(168, 85, 247, 0.55) 0px 0px 14px, rgba(216, 74, 255, 0.38) 0px 0px 30px, rgba(192, 132, 252, 0.15) 0px 0px 10px inset;}
.cmx .lp-hero-banner video{z-index: 1; background: rgb(18, 6, 43); border-radius: 22px; height: auto; position: relative;}
.cmx .lp-video-link{cursor: pointer; touch-action: manipulation; background: 0px 0px; border: 0px; border-radius: 22px; width: 100%; padding: 0px; display: block; overflow: hidden;}
.cmx .lp-video-link video{pointer-events: none;}
.cmx .lp-video-link:focus-visible{outline: 3px solid var(--accent); outline-offset: 5px;}
.cmx .lp-ctas{flex-direction: column; gap: 12px; margin-bottom: 22px; display: flex;}
.cmx .lp-btn-primary{letter-spacing: 0.04em; text-transform: uppercase; animation: 2.8s ease-in-out 0s infinite normal none running cmx-lp-cta-soft-pulse; box-shadow: rgba(0, 255, 120, 0.45) 0px 8px 28px; border-radius: 999px !important; padding: 16px 24px !important; font-size: 1rem !important; font-weight: 800 !important;}
.cmx .lp-btn-link{color: var(--text-dim); cursor: pointer; background: 0px 0px; border: none; padding: 8px; font-size: 0.9rem; font-weight: 600;}
.cmx .lp-btn-link:hover{color: var(--text);}
.cmx .lp-howto{background: rgba(0, 0, 0, 0.22); border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 44px 0px 48px;}
.cmx .lp-howto-head{text-align: center; margin-bottom: 28px; padding: 0px 16px;}
.cmx .lp-howto-icon{width: 36px; height: 36px; color: var(--accent); justify-content: center; align-items: center; margin-bottom: 10px; display: inline-flex;}
.cmx .lp-howto-icon svg{width: 28px; height: 28px;}
.cmx .lp-howto-title{text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.55rem; font-weight: 900;}
.cmx .lp-howto-sub{color: var(--text-dim); margin-top: 8px; font-size: 0.9rem; line-height: 1.45;}
.cmx .lp-howto-scroll{scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px; padding: 4px 16px 12px; scroll-padding-inline: 16px; display: flex; overflow-x: auto;}
.cmx .lp-howto-scroll::-webkit-scrollbar{display: none;}
.cmx .lp-howto-card{scroll-snap-align: center; background: rgba(14, 18, 34, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; flex: 0 0 min(72vw, 260px); overflow: hidden; box-shadow: rgba(0, 0, 0, 0.35) 0px 12px 32px;}
.cmx .lp-howto-visual{aspect-ratio: 3 / 1; background: rgb(10, 14, 26); position: relative; overflow: hidden;}
.cmx .lp-howto-visual img{object-fit: contain; object-position: center center; width: 100%; height: 100%; display: block;}
.cmx .lp-howto-badge{color: rgb(4, 21, 16); background: var(--accent); border-radius: 50%; place-items: center; width: 34px; height: 34px; font-size: 1rem; font-weight: 900; display: grid; position: absolute; top: 10px; right: 10px; box-shadow: rgba(0, 229, 168, 0.45) 0px 4px 14px;}
.cmx .lp-howto-card h3{padding: 14px 14px 6px; font-size: 0.95rem; font-weight: 800; line-height: 1.25;}
.cmx .lp-howto-card p{color: var(--text-dim); padding: 0px 14px 16px; font-size: 0.82rem; line-height: 1.5;}
.cmx .lp-footer{padding: 28px 16px calc(24px + env(safe-area-inset-bottom,0px)); text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.08);}
.cmx .lp-footer-logo{opacity: 0.9; width: auto; height: 56px; margin-bottom: 14px;}
.cmx .lp-footer-copy{color: var(--text-dim); font-size: 0.82rem;}
.cmx .lp-footer-note{color: rgba(154, 163, 199, 0.7); margin-top: 8px; font-size: 0.75rem; line-height: 1.4;}
.cmx .app-logo{object-fit: contain; object-position: left center; max-width: 160px; height: 40px;}
@media (width >= 768px){.cmx .lp-hero{padding: calc(88px + env(safe-area-inset-top,0px)) 24px 48px;}}
@media (width >= 768px){.cmx.landing--main-showcase .lp-title{white-space: normal; font-size: 3.4rem;}}
@media (width >= 768px){.cmx .lp-hero-inner, .cmx .lp-stats, .cmx .lp-section, .cmx .lp-final{max-width: 720px;}}
@media (width >= 768px){.cmx .lp-title{font-size: 3.4rem;}}
@media (width >= 768px){.cmx .lp-howto-scroll{grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1100px; margin: 0px auto; padding: 4px 24px 12px; display: grid; overflow: visible;}}
@media (width >= 768px){.cmx .lp-howto-card{flex: unset; max-width: none;}}
@media (width <= 900px){.cmx.landing .header-actions .btn:first-of-type{padding: 8px 12px;}}
@media (width <= 900px){.cmx.landing .header-actions .btn:last-of-type{padding: 8px 16px;}}
.cmx .btn-accent{--b-brilho: #b6ffdc; --b-face: #00ff88; --b-face2: #00c94e; --b-base: #00893a; --b-borda: #005b27; --b-halo: #00ff7873;}
.cmx .btn-primary{--b-brilho: #cfc4ff; --b-face: #7c5cff; --b-face2: #5a3df5; --b-base: #3a1fb0; --b-borda: #26146f; --b-halo: #7c5cff73;}
.cmx .btn-accent, .cmx .btn-primary, .cmx .btn-gold, .cmx .btn-danger, .cmx .panel-cta, .cmx .sheet-cta{--b-alt: 6px; border: 2px solid var(--b-borda); background: linear-gradient(180deg,var(--b-brilho) 0%,var(--b-face) 16%,var(--b-face2) 100%); color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.45) 0px 2px 0px; box-shadow: 0 var(--b-alt) 0 var(--b-base),
    0 calc(var(--b-alt) + 7px) 18px rgba(0,0,0,.5),
    inset 0 2px 0 rgba(255,255,255,.45); transition: transform 0.07s, box-shadow 0.07s, filter 0.15s;}
.cmx .btn-accent:not(:disabled):hover, .cmx .btn-primary:not(:disabled):hover, .cmx .btn-gold:not(:disabled):hover, .cmx .btn-danger:not(:disabled):hover, .cmx .panel-cta:not(:disabled):hover, .cmx .sheet-cta:not(:disabled):hover{transform: none; filter: brightness(1.06); animation: auto ease 0s 1 normal none running none;}
.cmx .btn-accent:not(:disabled):active, .cmx .btn-primary:not(:disabled):active, .cmx .btn-gold:not(:disabled):active, .cmx .btn-danger:not(:disabled):active, .cmx .panel-cta:not(:disabled):active, .cmx .sheet-cta:not(:disabled):active{transform: translateY(var(--b-alt)); box-shadow: 0 0 0 var(--b-base),0 3px 8px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.3); animation: auto ease 0s 1 normal none running none;}
.cmx .btn-accent:disabled, .cmx .btn-primary:disabled, .cmx .btn-gold:disabled, .cmx .btn-danger:disabled, .cmx .panel-cta:disabled, .cmx .sheet-cta:disabled{opacity: 0.55; cursor: not-allowed; animation: auto ease 0s 1 normal none running none; box-shadow: 0 var(--b-alt) 0 var(--b-base),inset 0 2px 0 rgba(255,255,255,.25);}
.cmx .lp-btn-primary{animation: 2.8s ease-in-out 0s infinite normal none running cmx-bub3d-pulse; box-shadow: 0 var(--b-alt) 0 var(--b-base),0 calc(var(--b-alt) + 7px) 18px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.45);}
.cmx .lp-btn-primary{--b-brilho: #fff0a8; --b-face: #fdcf1f; --b-face2: #dfaf15; --b-base: #b07e06; --b-borda: #7a5602; --b-halo: #fdcf1f66; width: min(460px, 100% - 28px); align-self: center; margin-left: auto; margin-right: auto; letter-spacing: 0.3px; font-weight: 900 !important;}
.cmx .lp-hero{min-height: 100dvh; padding: calc(74px + env(safe-area-inset-top,0px)) 16px calc(32px + env(safe-area-inset-bottom,0px)); display: flex; align-items: stretch; justify-content: center;}
.cmx .lp-hero-inner{display: flex; flex-direction: column; width: 100%; max-width: 480px; margin: 0px auto; text-align: center;}
.cmx .lp-title{margin: 0px 0px 14px;}
.cmx .lp-title img{width: 100%; max-width: 368px; height: auto; display: block; margin: 0px auto; filter: drop-shadow(rgba(0, 0, 0, 0.45) 0px 10px 26px);}
.cmx .lp-hero-banner--video{flex: 1 1 auto; max-height: 28vh; min-height: 136px; aspect-ratio: 1 / 1; width: auto; max-width: none; align-self: center; margin: 4px auto 10px; display: block;}
.cmx .lp-hero-banner--video .lp-video-link{height: 100%; width: 100%; padding: 0px; border: 0px; background: none; display: block; position: relative;}
.cmx .lp-hero-banner--video video{height: 100%; width: 100%; object-fit: cover; object-position: 50% 0px; display: block;}
.cmx .lp-tagline{max-width: 400px; margin: 0px auto 20px; display: flex; flex-direction: column; gap: 1px; line-height: 1.2;}
.cmx .lp-tagline span{color: rgb(255, 255, 255); font-size: clamp(1rem, 4.4vw, 1.18rem); font-weight: 600; text-shadow: rgba(0, 0, 0, 0.7) 0px 2px 10px;}
.cmx .lp-tagline b{color: var(--gold); font-size: clamp(0.92rem, 4.15vw, 1.14rem); font-weight: 800; letter-spacing: -0.005em; text-wrap: balance; text-shadow: rgb(122, 74, 0) 0px 2px 0px, rgba(0, 0, 0, 0.6) 0px 3px 14px;}
.cmx .lp-ctas{display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px;}
.cmx .lp-ctas .lp-btn-primary{width: 100%; max-width: 310px; --b-alt: 7px; letter-spacing: 0.04em; border-radius: 999px !important; padding: 17px 24px !important; font-size: 1.02rem !important; font-weight: 800 !important;}
.cmx .lp-ctas .lp-btn-link{width: auto; max-width: none;}
@media (max-height: 600px){.cmx .lp-title{margin: 0px 0px 8px;}}
@media (max-height: 600px){.cmx .lp-title img{max-width: 215px;}}
@media (max-height: 600px){.cmx .lp-ctas{margin-bottom: 12px;}}
@media (width >= 768px){.cmx .lp-title img{max-width: 440px;}}
.cmx.landing, .cmx .auth-shell{--bg: #0d0520; --bg-soft: #160a33; --surface: #1e0d42; --surface-2: #2a1257; --border: #3c1f73; --text: #f3edff; --text-dim: #a08cc8; --primary: #9d30fc; --primary-2: #5a0498; --accent: #f3cf23; --accent-2: #fe8500; --gold: #f3cf23; --ouro-face: #f7d733; --ouro-face2: #f0a80c; --ouro-brilho: #fff6b0; --ouro-base: #b85e02; --ouro-borda: #7a3d02; --roxo-face: #a44bfc; --roxo-face2: #7a1bdc; --roxo-brilho: #ddb6fe; --roxo-base: #45037a; --roxo-borda: #2c0250;}
.cmx.landing .app-header{background: linear-gradient(color-mix(in srgb,var(--bg) 85%,transparent) 0%, transparent 100%); backdrop-filter: none; border-bottom: none; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; position: absolute; top: 0px; left: 0px; right: 0px; z-index: 50;}
.cmx.landing .app-logo{height: 44px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; filter: drop-shadow(rgba(0, 0, 0, 0.45) 0px 4px 12px);}
.cmx.landing .app-header .btn{padding: 8px 14px; font-size: 0.78rem;}
.cmx.landing .lp-hero{min-height: 100dvh; padding: calc(74px + env(safe-area-inset-top, 0px)) 16px
           calc(32px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: stretch; justify-content: center; position: relative; overflow: hidden;}
.cmx.landing .lp-hero::after{content: none;}
.cmx.landing .lp-hero-bg, .cmx.landing .lp-hero-bg{background: linear-gradient(
      180deg,
      color-mix(in srgb,var(--bg) 90%,transparent) 0%,
      color-mix(in srgb,var(--bg) 77%,transparent) 7%,
      color-mix(in srgb,var(--bg) 58%,transparent) 17%,
      color-mix(in srgb,var(--bg) 36%,transparent) 27%,
      color-mix(in srgb,var(--bg) 17%,transparent) 36%,
      transparent 46%,
      transparent 58%,
      color-mix(in srgb,var(--bg) 25%,transparent) 70%,
      color-mix(in srgb,var(--bg) 60%,transparent) 82%,
      color-mix(in srgb,var(--bg) 88%,transparent) 93%,
      var(--bg) 100%
    ),
    linear-gradient(180deg, color-mix(in srgb,var(--bg) 55%,transparent) 0%, color-mix(in srgb,var(--bg) 52%,transparent) 34%, color-mix(in srgb,var(--bg) 62%,transparent) 62%, color-mix(in srgb,var(--bg) 82%,transparent) 100%),
    radial-gradient(120% 80% at 50% 8%, color-mix(in srgb,var(--primary) 22%,transparent) 0%, transparent 60%),
    var(--panel-bg-image) center center / cover no-repeat;}
.cmx.landing .lp-hero .lp-hero-inner{position: relative; z-index: 4; display: flex; flex-direction: column; width: 100%; justify-content: center;}
.cmx.landing .lp-title img{filter: drop-shadow(rgba(0, 0, 0, 0.45) 0px 10px 26px);}
.cmx.landing .lp-tagline span{color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.7) 0px 2px 10px;}
.cmx.landing .btn-primary, .cmx .auth-shell .btn-primary{--b-face: var(--roxo-face); --b-face2: var(--roxo-face2); --b-brilho: var(--roxo-brilho); --b-base: var(--roxo-base); --b-borda: var(--roxo-borda);}
.cmx.landing .btn-accent, .cmx .auth-shell .btn-accent, .cmx.landing .lp-btn-primary{--b-face: var(--ouro-face); --b-face2: var(--ouro-face2); --b-brilho: var(--ouro-brilho); --b-base: var(--ouro-base); --b-borda: var(--ouro-borda); --b-halo: #f7d73359;}
.cmx.landing .lp-btn-link{color: var(--text-dim);}
.cmx.landing .lp-btn-link:hover{color: var(--text);}
.cmx.landing .lp-tagline b{color: var(--gold); text-shadow: rgb(122, 74, 0) 0px 2px 0px, rgba(0, 0, 0, 0.6) 0px 3px 14px;}
.cmx.landing .lp-howto{border: 0px; background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.22) 14%, rgba(0, 0, 0, 0.22) 86%, transparent 100%);}
.cmx.landing .lp-footer, .cmx.landing .app-footer{border-top: none;}
.cmx.landing .lp-hero{padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));}
.cmx.landing .lp-hero-banner{flex: 0 1 auto; height: 28vh; max-height: 28vh; min-height: 136px; aspect-ratio: 1 / 1; width: auto; max-width: min(320px, 100%); margin: 6px auto 14px; background: transparent;}
.cmx.landing .lp-hero-banner video, .cmx.landing .lp-hero-banner img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 0px; display: block; border-radius: inherit;}
.cmx.landing .lp-ctas{margin-bottom: 10px;}
@media (max-height: 640px){.cmx.landing .lp-hero-banner{height: 23vh; max-height: 23vh; min-height: 112px;}}
@media (max-height: 640px){.cmx.landing .lp-title img{max-width: 240px;}}
@keyframes cmx-lp-cta-soft-pulse { 
  0%, 100% { filter: brightness(); transform: scale(1); box-shadow: rgba(0, 255, 120, 0.34) 0px 8px 24px; }
  50% { filter: brightness(1.06); transform: scale(1.012); box-shadow: rgba(0, 255, 120, 0.48) 0px 10px 30px; }
}
@keyframes cmx-card-border-spin { 
  100% { --cmx-card-spin: 360deg; }
}
@keyframes cmx-fire-border-flicker { 
  0% { opacity: 0.75; filter: brightness(0.95); }
  100% { opacity: 1; filter: brightness(1.15); }
}
@keyframes cmx-fire-glow-pulse { 
  0% { opacity: 0.55; transform: scale(0.995); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cmx-bub3d-pulse { 
  0%, 100% { box-shadow: 0 var(--b-alt) 0 var(--b-base),0 calc(var(--b-alt) + 7px) 18px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.45),0 0 0 0 var(--b-halo); }
  50% { box-shadow: 0 var(--b-alt) 0 var(--b-base),0 calc(var(--b-alt) + 7px) 18px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.45),0 0 0 10px transparent; }
}

.cmx .lp-footer-logo{display:block;margin:0 auto 14px}
.cmx .lp-howto-icon svg{display:block}

.cmx .lp-howto-visual .cmx-pair.cmx-full img{width:100%;height:100%;object-fit:contain}
/* contador "jogadores online" (numero real, vem de /api/online) */
.cmx .cmx-online{align-self:center;display:inline-flex;align-items:center;gap:8px;margin:0 auto 10px;padding:6px 14px;border-radius:999px;background:linear-gradient(180deg,#1b2a6b,#121c4d);border:1px solid #2c3f8f;color:#fff;font-weight:800;font-size:.9rem;line-height:1;box-shadow:0 4px 14px #0006}
.cmx .cmx-online .cmx-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 #22c55e99;animation:cmx-dot 1.6s ease-out infinite}
@keyframes cmx-dot{0%{box-shadow:0 0 0 0 #22c55e99}100%{box-shadow:0 0 0 8px #22c55e00}}


/* rodape do site nao aparece na area logada */
body:has(.cmxh) .footer.footer-color{display:none!important}

/* botoes Entrar / Criar conta do topo: mesma altura e alinhados no centro */
.cmx.landing .header-actions{align-items:center!important}
.cmx.landing .header-actions .btn{height:38px!important;min-height:38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box}
/* bolinha do numero nos cards do "Como jogar": menor e sem o brilho verde */
.cmx .lp-howto-badge{width:24px!important;height:24px!important;font-size:.78rem!important;top:8px!important;right:8px!important;box-shadow:none!important}
/* home: um pouco menos de espaco entre "Ja tenho conta" e o "Como jogar" */
.cmx.landing .lp-howto{padding-top:24px!important}
/* imagem flutuante "+10" na home */
.cmx .cmx-float{position:absolute;z-index:3;pointer-events:none;user-select:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.cmx .cmx-float-mais10{width:96px;right:6px;top:118px;transform:rotate(10deg);animation:cmxFlutua 3.2s ease-in-out infinite}
@media (width>=768px){.cmx .cmx-float-mais10{width:150px;right:calc(50% - 360px);top:170px}}
@keyframes cmxFlutua{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-12px) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.cmx .cmx-float-mais10{animation:none}}
/* imagem flutuante "x3" na home (lado esquerdo, espelhando o "+10") */
.cmx .cmx-float-x3{width:74px;left:8px;top:150px;transform:rotate(-10deg);animation:cmxFlutua2 3.6s ease-in-out .6s infinite}
@media (width>=768px){.cmx .cmx-float-x3{width:118px;left:calc(50% - 360px);top:230px}}
@keyframes cmxFlutua2{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-12px) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.cmx .cmx-float-x3{animation:none}}
/* plaquinhas maiores e por tras da logo central (a logo fica por cima, z-index 4) */
.cmx .cmx-float-mais10{width:104px!important;right:-2px!important;top:112px!important}
.cmx .cmx-float-x3{width:88px!important;left:0px!important;top:128px!important}
@media (width>=768px){
 .cmx .cmx-float-mais10{width:165px!important;right:calc(50% - 320px)!important;top:100px!important}
 .cmx .cmx-float-x3{width:142px!important;left:calc(50% - 305px)!important;top:130px!important}
}
/* plaquinhas agora ficam DENTRO do titulo: sempre atras da logo, em qualquer tela */
.cmx .lp-title{position:relative;isolation:isolate}
.cmx .lp-title .cmx-plaq{position:absolute;z-index:-1}
.cmx .lp-title .cmx-float-x3{width:24%!important;left:-4%!important;top:7%!important;right:auto!important}
.cmx .lp-title .cmx-float-mais10{width:28%!important;right:-4%!important;top:5%!important;left:auto!important}
@media (width>=768px){
 .cmx .lp-title .cmx-float-x3{width:34%!important;left:-20%!important;top:13%!important}
 .cmx .lp-title .cmx-float-mais10{width:38%!important;right:-22%!important;top:8%!important}
}
/* "Ja tenho conta" mais visivel */
.cmx.landing .lp-btn-link,.cmx .lp-ctas .lp-btn-link{color:#fff!important;font-weight:700!important;opacity:1}
/* bolinhas de pagina do "Como jogar" (so no celular, onde os cards rolam pro lado) */
.cmx .lp-howto-dots{display:flex;justify-content:center;gap:7px;margin-top:6px}
.cmx .lp-howto-dots span{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.25);transition:width .2s,background .2s}
.cmx .lp-howto-dots span.on{width:20px;background:var(--primary)}
@media (width>=768px){.cmx .lp-howto-dots{display:none}}
/* selos do rodape (iguais aos do Helix) */
.cmx .lp-footer-badges{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;margin:6px auto 14px;opacity:.85}
.cmx .lp-footer-badges svg{height:26px;width:auto;display:inline-block}