/* Visual do Bubbleween no Count Master (mesmo modelo de jogo: cm-* aqui = bb-* la).
   Copiado do bloco <style> do BubbleBlast/index.html, SEM o tema de Halloween
   (abobora, morcegos, fantasma, fundo roxo). Fica fora de index.html/build porque
   o espelhar.py sobrescreve esses arquivos; o server.py injeta este CSS no HTML. */

/* ===== paleta do site: turquesa -> laranja (mesma do Bubbleween) ===== */
:root {
    --ci-primary-color: #FFA51F;
    --ci-primary-opacity-color: #3E2202;
    --ci-secundary-color: #FF7A1A;
}

/* botao principal (bgbotaop) e destaques */
.bgbotaop {
    background: linear-gradient(180deg, #FFDE8A 0%, #FFB61F 46%, #F0900F 100%) !important;
    color: #3E2202 !important;
}
.bgbotaop.text-white,
.bgbotaop .text-white { color: #3E2202 !important; }
.auth-card .corprimary { color: #F0900F !important; }

/* botoes de jogar / escolher (pagina inicial, lobby de aposta, jogo, resultados): laranja */
.cm-action.cm-play,
.cmh-btn-aqua,
.cmh-btn-blue,
.cmh-chip-on,
.cml-cta,
.cml-chip-on,
.cm-vbtn {
    background: linear-gradient(180deg, #FFDE8A 0%, #FFB61F 46%, #F0900F 100%) !important;
    border-color: #A6560A !important;
    color: #3E2202 !important;
    box-shadow: 0 6px #A6560A, 0 14px 28px rgba(255,170,30,.28), inset 0 2px 2px rgba(255,255,255,.6) !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.35) !important;
}
.cm-action.cm-play:active,
.cml-cta:active,
.cm-vbtn:active {
    box-shadow: 0 2px #A6560A, 0 6px 14px rgba(255,170,30,.24), inset 0 2px 2px rgba(255,255,255,.6) !important;
}
.cmh-chip-on,
.cml-chip-on {
    box-shadow: 0 3px #A6560A, inset 0 1px 1px rgba(255,255,255,.5) !important;
}

/* ===== pagina inicial: botao principal pulsando de leve (o bbwCtaPulse do Bubbleween) e sem "Ja tenho conta" ===== */
@keyframes cmwCtaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.cmh-btn-gold { animation: cmwCtaPulse 1.8s ease-in-out infinite; }
.cmh-btn-gold:active { animation: none; }
@media (prefers-reduced-motion: reduce) { .cmh-btn-gold { animation: none; } }
.cmh-ghost { display: none !important; }

/* ===== barra de baixo: icone do "Sacar" = saco de dinheiro do Bubbleween (branco; laranja quando ativo) ===== */
.nav-item i.fa-arrow-down-long {
    width: 22px; height: 22px; display: block;
    background: url('/clone/money-bag.png') center / contain no-repeat;
    filter: brightness(0) invert(1); opacity: .6;
}
.nav-item i.fa-arrow-down-long::before { content: none; }
.nav-item i.fa-arrow-down-long[class*="ci-primary-color"] {
    opacity: 1;
    filter: brightness(0) invert(74%) sepia(46%) saturate(1000%) hue-rotate(357deg) brightness(102%);
}
/* visitante: "Indique" vira "Registrar" do Bubbleween (icone de entrar); o texto e o clique ficam no JS */
.cmw-visitante .nav-item i.fa-user-plus::before { content: "\f090"; }

/* ===== tela do jogo para visitante (modo gratis): sem aposta, sem botao, sem "provably fair" ===== */
.cm-page.cm-guest .cm-topbar { display: none !important; }
.cm-page.cm-guest .cm-action.cm-play { display: none !important; }
.cm-page.cm-guest .cm-fairbar { display: none !important; }

/* ===== card "Bem vindo ao Count Master!" (o .bb-promo do Bubbleween, sem Halloween) ===== */
@keyframes bbPromoGlow {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 0 #A6560A, 0 12px 26px rgba(255,170,30,.28); }
    50% { transform: scale(1.035); box-shadow: 0 6px 0 #A6560A, 0 14px 40px rgba(255,170,30,.5); }
}
.cm-board { position: relative; }
.cmw-promo {
    position: absolute; inset: 0; z-index: 6; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 22px; padding: 28px 20px; text-align: center;
    background: rgba(7,12,22,.55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cmw-card {
    position: relative; width: 100%; max-width: 320px;
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 20px;
    border-radius: 24px; border: 1px solid #2A3B5E;
    background: linear-gradient(180deg, rgba(17,27,46,.95) 0%, rgba(10,16,30,.98) 100%);
    box-shadow: 0 26px 60px rgba(0,0,0,.4);
}
.cmw-banner { width: 100%; line-height: 0; overflow: hidden; border-radius: 24px 24px 0 0; }
.cmw-banner img { display: block; width: 100%; height: 140px; object-fit: cover; object-position: center 30%; }
.cmw-selo { margin-top: 4px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(52,211,153,.45); background: rgba(52,211,153,.1);
    color: #6EE7B7; font: 700 12px 'Poppins', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.cmw-card h1 { margin: 0; padding: 0 16px; font: 700 23px/1.25 'Poppins', system-ui, sans-serif; color: #fff; }
.cmw-dicas { margin: 6px 0 0; padding: 0 22px; width: 100%; box-sizing: border-box; list-style: none; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.cmw-dicas li { display: flex; align-items: center; gap: 12px; font: 600 14px/1.35 'Poppins', system-ui, sans-serif; color: #DCE5F5; }
.cmw-dica-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #172540; display: flex; align-items: center; justify-content: center; }
.cmw-card h1 span { color: #FFC024; }
.cmw-card p { margin: 0 auto; padding: 0 16px; max-width: 300px; font: 600 15px/1.5 'Poppins', system-ui, sans-serif; color: rgba(255,255,255,.8); }
.cmw-card p strong { color: #FFC024; white-space: nowrap; }
.cmw-cta {
    position: relative; width: calc(100% - 40px); max-width: 250px; margin-top: 12px;
    padding: 17px 0 19px; border: 0; border-radius: 20px; cursor: pointer; overflow: hidden;
    background: linear-gradient(180deg, #FFDE8A 0%, #FFB61F 46%, #F0900F 100%);
    box-shadow: 0 6px 0 #A6560A, 0 12px 26px rgba(255,170,30,.28);
    animation: bbPromoGlow 2.6s ease-in-out infinite;
    display: flex; align-items: center; justify-content: center; gap: 11px;
    font: 800 18px/1 'Poppins', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #3E2202;
}
.cmw-cta::before {
    content: ""; width: 0; height: 0;
    border-left: 15px solid #3E2202; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.cmw-cta:active { transform: translateY(4px); animation: none; box-shadow: 0 2px 0 #A6560A, 0 6px 16px rgba(255,170,30,.24); }
.cmw-skip {
    display: block; width: calc(100% - 40px); max-width: 250px; margin: 4px auto 0; padding: 16px 0;
    border-radius: 18px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); cursor: pointer;
    font: 700 14px/1 'Poppins', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.78);
}
.cmw-skip:active { background: rgba(255,255,255,.09); }
@media (prefers-reduced-motion: reduce) { .cmw-cta { animation: none; } }

/* pagina do jogo: sem scroll-bounce / selecao (igual ao Bubbleween) */
html:has(.cm-page), body:has(.cm-page) { overscroll-behavior: none; }
body:has(.cm-page) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* fontes de texto (secundarias) = Poppins no site inteiro, pedido do operador 05/11; titulos seguem Luckiest Guy / Baloo 2 */
:root { --font-outfit: 'Poppins'; }
.cm-page .cm-wrap { font-family: 'Poppins', system-ui, sans-serif; }