/* cm-bubbles.css — home logada do Count Master no layout da home logada do Bubbles
   (banner, ganhadores, card "Valor de entrada"). Extraido do CSS do Bubbles, escopo .cmxb */
.cmxb{--surface:#1d1240;--text-dim:#9aa3c7;--border:#3b2a70;--text:#eef1ff;--bg-soft:#150e2e;--input-font-size:17px;--accent:#00e5a8;--accent-2:#00c2ff;--primary:var(--ci-primary-color,#a855f7);--primary-2:var(--ci-secundary-color,#7e22ce);color:var(--text);font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;box-sizing:border-box}
.cmxb *,.cmxb *::before,.cmxb *::after{box-sizing:border-box}
.cmxb button{font-family:inherit}
.cmxb input[type=number]::-webkit-inner-spin-button,.cmxb input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cmxb input[type=number]{-moz-appearance:textfield}
@property --card-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cmxb .panel-page{ flex: 1 1 0%; width: 100%; max-width: 560px; margin: 0px auto; padding: 20px 16px 110px; }
.cmxb .panel-card{ isolation: isolate; background: color-mix(in srgb, var(--surface), transparent 42%); backdrop-filter: blur(16px); border: 1px solid rgba(96,165,250,.28); border-radius: 24px; padding: 22px; position: relative; box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 32px; }
.cmxb .panel-card::before{ content: ""; pointer-events: none; z-index: 0; background: conic-gradient(from var(--card-spin), transparent 0deg 230deg, rgba(37,99,235,.2) 260deg, #2563eb 295deg, #60a5fa 315deg, #ffffff 332deg, #93c5fd 348deg, #3b82f6 355deg, transparent 360deg); border-radius: 26px; padding: 2px; animation: 2.2s linear 0s infinite normal none running card-border-spin, 1.1s ease-in-out 0s infinite alternate none running fire-border-flicker; position: absolute; inset: -2px; 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; }
.cmxb .panel-card::after{ content: ""; pointer-events: none; z-index: -1; border-radius: 30px; animation: 1.3s ease-in-out 0s infinite alternate none running fire-glow-pulse; position: absolute; inset: -6px; box-shadow: rgba(59,130,246,.45) 0px 0px 14px, rgba(255,255,255,.18) 0px 0px 28px, rgba(147,197,253,.12) 0px 0px 10px inset; }
.cmxb .panel-card > *{ z-index: 1; position: relative; }
@keyframes card-border-spin { 
  100% { --card-spin: 360deg; }
}
@keyframes fire-border-flicker { 
  0% { opacity: 0.75; filter: brightness(0.95); }
  100% { opacity: 1; filter: brightness(1.15); }
}
@keyframes fire-glow-pulse { 
  0% { opacity: 0.55; transform: scale(0.995); }
  100% { opacity: 1; transform: scale(1); }
}
@property --pill-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cmxb .panel-label{ letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; font-size: 0.72rem; font-weight: 800; }
.cmxb .entry-grid{ grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; display: grid; }
.cmxb .entry-chip{ border: 1px solid var(--border); color: var(--text); cursor: pointer; text-align: center; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 14px 8px; font-size: 1rem; font-weight: 800; transition: 0.15s; }
.cmxb .entry-chip.active{ color: rgb(18, 32, 58); background: linear-gradient(135deg, rgb(207, 227, 255), rgb(141, 184, 245)); border-color: rgba(0, 0, 0, 0); }
.cmxb .money-input{ background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; align-items: center; gap: 10px; margin-bottom: 18px; padding: 0px 14px; display: flex; }
.cmxb .money-input .prefix{ color: var(--text-dim); font-weight: 700; }
.cmxb .money-input input{ color: var(--text); font-size: var(--input-font-size); background: 0px 0px; border: none; outline: none; flex: 1 1 0%; width: 100%; padding: 14px 0px; font-weight: 700; }
.cmxb .reward-box{ text-align: center; border: 1px solid color-mix(in srgb, var(--accent-2), transparent 55%); background: color-mix(in srgb, var(--accent-2), transparent 90%); border-radius: 16px; margin-bottom: 20px; padding: 16px; }
.cmxb .reward-box .label{ color: var(--text); font-size: 0.95rem; font-weight: 600; }
.cmxb .reward-box .value{ color: rgb(255, 230, 0); text-shadow: rgba(255, 230, 0, 0.55) 0px 0px 14px; margin-top: 2px; font-size: 1.7rem; font-weight: 900; }
.cmxb .panel-cta{ cursor: pointer; color: rgb(4, 40, 24); background: linear-gradient(135deg, rgb(0, 255, 136), rgb(0, 224, 85)); border: none; border-radius: 999px; width: 100%; padding: 17px; font-size: 1.05rem; font-weight: 800; transition: transform 0.12s; box-shadow: rgba(0, 255, 120, 0.45) 0px 10px 30px; }
.cmxb .panel-cta:not(:disabled){ animation: 1.6s ease-in-out 0s infinite normal none running cta-pulse; }
.cmxb .panel-cta:not(:disabled):hover{ animation: auto ease 0s 1 normal none running none; transform: translateY(-2px); }
.cmxb .panel-cta:disabled{ opacity: 0.5; cursor: not-allowed; animation: auto ease 0s 1 normal none running none; }
@keyframes cta-pulse { 
  0%, 100% { box-shadow: rgba(0, 255, 120, 0.45) 0px 10px 30px, rgba(0, 255, 120, 0.45) 0px 0px; }
  50% { box-shadow: rgba(0, 255, 120, 0.45) 0px 10px 30px, rgba(0, 255, 120, 0) 0px 0px 0px 10px; }
}
.cmxb .panel-cta{ --b-brilho: #b6ffdc; --b-face: #00ff88; --b-face2: #00c94e; --b-base: #00893a; --b-borda: #005b27; --b-halo: #00ff7873; }
.cmxb .panel-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; }
.cmxb .panel-cta:not(:disabled):hover{ transform: none; filter: brightness(1.06); animation: auto ease 0s 1 normal none running none; }
.cmxb .panel-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; }
.cmxb .panel-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); }
@keyframes 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; }
}
.cmxb .panel-cta:not(:disabled){ animation: 1.6s ease-in-out 0s infinite normal none running bub3d-pulse; }
.cmxb .panel-cta{ --b-brilho: #ffe98a; --b-face: #ffd21e; --b-face2: #f4b400; --b-base: #b47f00; --b-borda: #d69600; --b-halo: #ffb30066; --b-alt: 5px; border-width: 3px; border-radius: 14px; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px, rgba(0, 0, 0, 0.45) 0px 2px 5px; }
.cmxb .bb-carrossel{ position: relative; overflow: hidden; width: 100%; aspect-ratio: 3 / 1; border-radius: 16px; margin: 0px 0px 4px; box-shadow: rgba(0, 0, 0, 0.4) 0px 6px 18px; }
.cmxb .bb-carrossel-track{ display: flex; height: 100%; transition: transform 0.55s; }
.cmxb .bb-carrossel-slide{ flex: 0 0 100%; height: 100%; background-size: cover; background-position: center center; }
.cmxb .bb-carrossel-dots{ position: absolute; left: 0px; right: 0px; bottom: 8px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.cmxb .bb-carrossel-dot{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 3px; transition: background 0.2s; }
.cmxb .bb-carrossel-dot.on{ background: rgb(255, 255, 255); }
@media (prefers-reduced-motion: reduce){.cmxb .bb-carrossel-track{ transition: none; }}
.cmxb .bb-ganhadores{ margin: 18px 0px 16px; }
.cmxb .bb-gh{ display: flex; align-items: center; gap: 8px; margin: 0px 2px 10px; font-size: 15px; font-weight: 700; color: var(--text); }
.cmxb .bb-gwin{ overflow: hidden; mask-image: linear-gradient(90deg, transparent 0px, rgb(0, 0, 0) 7%, rgb(0, 0, 0) 93%, transparent 100%); }
.cmxb .bb-gwin-track{ display: flex; gap: 8px; width: max-content; animation: 60s linear 0s infinite normal none running bb-gmq; }
.cmxb .bb-gwin:hover .bb-gwin-track{ animation-play-state: paused; }
@keyframes bb-gmq { 
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0px); }
}
.cmxb .bb-gchip{ flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-width: 172px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); }
.cmxb .bb-gav{ flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: rgb(255, 255, 255); background: linear-gradient(135deg,var(--primary),var(--primary-2)); }
.cmxb .bb-gci{ display: flex; flex-direction: column; line-height: 1.25; }
.cmxb .bb-gci b{ font-size: 12px; font-weight: 600; color: var(--text); }
.cmxb .bb-gci small{ font-size: 11px; color: var(--text-dim); }
.cmxb .bb-gpz{ color: var(--accent); font-weight: 700; font-size: 12px; }
@media (prefers-reduced-motion: reduce){.cmxb .bb-gwin-track{ animation: auto ease 0s 1 normal none running none; }}
.cmxb .entry-chip{ background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text); box-shadow: rgba(255, 255, 255, 0.12) 0px 1px 0px inset, rgba(0, 0, 0, 0.27) 0px 2px 6px; transition: box-shadow 0.12s, filter 0.15s; }
.cmxb .entry-chip:hover{ filter: brightness(1.14); }
.cmxb .entry-chip:active{ box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 5px inset; }
.cmxb .entry-chip.active{ background: linear-gradient(135deg, rgb(207, 227, 255), rgb(141, 184, 245)); border-color: rgba(0, 0, 0, 0); color: rgb(18, 32, 58); box-shadow: rgba(255, 255, 255, 0.55) 0px 1px 0px inset, rgba(0, 0, 0, 0.27) 0px 2px 8px; }
.cmxb .entry-chip.active:active{ box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px inset; }
.cmxb .money-input{ box-shadow: rgba(0, 0, 0, 0.45) 0px 2px 6px inset; border-color: rgba(255, 255, 255, 0.15); }
.cmxb .bb-entry-aviso{ display: flex; align-items: center; gap: 0.45rem; margin: 0.55rem 0px 0px; padding: 0.55rem 0.7rem; border-radius: 10px; background: rgba(250, 204, 21, 0.1); border: 1px solid rgba(250, 204, 21, 0.32); color: rgb(251, 191, 36); font-size: 0.82rem; font-weight: 600; line-height: 1.35; }
.cmxb .bb-entry-aviso::before{ content: "!"; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentcolor; display: grid; place-items: center; font-size: 0.68rem; font-weight: 800; }
.cmxb .bb-carrossel{ box-shadow: rgba(4, 0, 22, 0.85) 0px 16px 34px -10px, rgba(4, 0, 22, 0.55) 0px 4px 14px; }
.cmxb .panel-card{ box-shadow: rgba(4, 0, 22, 0.9) 0px 20px 42px -12px, rgba(4, 0, 22, 0.6) 0px 6px 16px; }
.cmxb .panel-card .money-input input{ text-align: center; }
.cmxb .bb-gwin-track{ animation-duration: 18s; }
/* telas baixas (igual Bubbles) */
@media (height <= 810px){.cmxb .panel-page{ padding: 14px 14px 100px; }}
@media (height <= 810px){.cmxb .panel-card{ border-radius: 20px; padding: 16px; }}
@media (height <= 810px){.cmxb .panel-card::before{ border-radius: 22px; }}
@media (height <= 810px){.cmxb .panel-card::after{ border-radius: 26px; }}
@media (height <= 810px){.cmxb .panel-label{ margin-bottom: 8px; }}
@media (height <= 810px){.cmxb .entry-grid{ gap: 8px; margin-bottom: 10px; }}
@media (height <= 810px){.cmxb .entry-chip{ border-radius: 10px; padding: 11px 6px; font-size: 0.9rem; }}
@media (height <= 810px){.cmxb .money-input{ margin-bottom: 12px; }}
@media (height <= 810px){.cmxb .money-input input{ padding: 11px 0px; }}
@media (height <= 810px){.cmxb .reward-box{ margin-bottom: 14px; padding: 12px; }}
@media (height <= 810px){.cmxb .reward-box .value{ font-size: 1.5rem; }}
@media (height <= 810px){.cmxb .panel-cta{ padding: 14px; font-size: 1rem; }}
@media (height <= 700px){.cmxb .panel-page{ padding: 10px 12px 96px; }}
@media (height <= 700px){.cmxb .panel-card{ border-radius: 18px; padding: 12px; }}
@media (height <= 700px){.cmxb .panel-label{ margin-bottom: 6px; font-size: 0.65rem; }}
@media (height <= 700px){.cmxb .entry-grid{ gap: 6px; margin-bottom: 8px; }}
@media (height <= 700px){.cmxb .entry-chip{ border-radius: 8px; padding: 9px 4px; font-size: 0.82rem; }}
@media (height <= 700px){.cmxb .money-input{ margin-bottom: 10px; }}
@media (height <= 700px){.cmxb .money-input input{ padding: 9px 0px; font-size: 0.95rem; }}
@media (height <= 700px){.cmxb .reward-box{ border-radius: 12px; margin-bottom: 10px; padding: 9px 12px; }}
@media (height <= 700px){.cmxb .reward-box .label{ font-size: 0.82rem; }}
@media (height <= 700px){.cmxb .reward-box .value{ margin-top: 1px; font-size: 1.25rem; }}
@media (height <= 700px){.cmxb .panel-cta{ padding: 12px; font-size: 0.92rem; }}
/* medidas do Helix: banner e card com no maximo 380px, centralizados, 16px de margem no celular; banner 2,6:1 */
.cmxb .panel-page{max-width:412px!important;padding-left:16px!important;padding-right:16px!important}
.cmxb .bb-carrossel{aspect-ratio:2.6/1!important;max-width:380px;margin-left:auto!important;margin-right:auto!important;border-radius:16px!important}
.cmxb .bb-ganhadores,.cmxb .panel-card{max-width:380px;margin-left:auto;margin-right:auto}
/* titulo "Valor de entrada" centralizado na caixinha */
.cmxb .panel-card .panel-label{text-align:center!important}
/* linha dos dois lados do titulo, igual ao Helix */
.cmxb .panel-card .panel-label{display:flex!important;align-items:center;gap:12px}
.cmxb .panel-card .panel-label::before,.cmxb .panel-card .panel-label::after{content:"";flex:1 1 0;height:1px}
.cmxb .panel-card .panel-label::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.22))}
.cmxb .panel-card .panel-label::after{background:linear-gradient(90deg,rgba(255,255,255,.22),transparent)}

/* retorno da aposta (igual a "Recompensa" do Bubbles) */
.cmxb .cmx-retorno{display:flex;gap:8px;margin:10px 0 12px}
.cmxb .cmx-ret-l{flex:1;text-align:center;padding:9px 6px;border-radius:12px;background:rgba(12,200,253,.08);border:1px solid rgba(12,200,253,.28)}
.cmxb .cmx-ret-l small{display:block;font-size:10.5px;color:rgba(255,255,255,.6);font-weight:600;line-height:1.2}
.cmxb .cmx-ret-l b{display:block;margin-top:3px;font-size:16px;font-weight:900;color:#5ee7ff}

.cmxb .reward-box .cmx-rec-max{margin-top:4px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.62)}

/* sombra no banner e na caixa de aposta para destacar do fundo */
.cmxb .bb-carrossel{box-shadow:0 14px 30px rgba(0,0,0,.75),0 4px 10px rgba(0,0,0,.55)!important}
.cmxb .panel-card{box-shadow:0 18px 44px rgba(0,0,0,.8),0 6px 16px rgba(0,0,0,.6)!important}