/* Demo = tutorial (tutorial.js): texto de cada obstaculo e o "Toque para começar". */
.cm-board { position: relative; }

/* texto do obstaculo, em cima da pista */
.cmt-msg { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); z-index: 6; width: min(92%, 380px);
           display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; pointer-events: none;
           animation: cmt-entra .25s ease-out; }
.cmt-msg b { font-family: 'Luckiest Guy', 'Baloo 2', sans-serif; font-weight: 400; font-size: 30px; line-height: 1.05; color: #fff; letter-spacing: .02em;
             -webkit-text-stroke: 1.5px #3E2202; text-shadow: 0 3px 0 #3E2202, 0 6px 16px rgba(0,0,0,.35); }
.cmt-msg span { font-family: 'Baloo 2', 'Poppins', sans-serif; font-weight: 800; font-size: 17px; color: #3E2202; line-height: 1.2;
                background: linear-gradient(180deg, #FFDE8A, #FFB61F); border-radius: 999px; padding: 6px 16px; box-shadow: 0 3px 0 #A6560A; }
.cmt-erro b { color: #FF5A3C; -webkit-text-stroke-color: #fff; text-shadow: 0 3px 0 #7A1A0A, 0 6px 16px rgba(0,0,0,.35); }
.cmt-seta { display: block; line-height: 0; filter: drop-shadow(0 3px 0 #3E2202); }
.cmt-dir svg { transform: scaleX(-1); }
.cmt-esq { animation: cmt-esq .7s ease-in-out infinite; }
.cmt-dir { animation: cmt-dir .7s ease-in-out infinite; }
@keyframes cmt-entra { from { opacity: 0; transform: translateX(-50%) scale(.85); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes cmt-esq { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }
@keyframes cmt-dir { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }

/* "Toque para começar": por cima do jogo parado, com o boneco na pista */
.cmw-promo.cmw-toque { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
                       padding: 0 0 22%; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
                       cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cmw-toque span { font-family: 'Luckiest Guy', 'Baloo 2', sans-serif; font-size: 30px; color: #fff; letter-spacing: .03em;
                  -webkit-text-stroke: 1.5px #3E2202; text-shadow: 0 3px 0 #3E2202, 0 6px 16px rgba(0,0,0,.35);
                  animation: cmt-pulsa 1.2s ease-in-out infinite; }
@keyframes cmt-pulsa { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .85; } }
.cm-page.cm-guest .cm-tip { display: none !important; }   /* "Arraste para os lados..." do jogo: o tutorial ensina */
@media (prefers-reduced-motion: reduce) { .cmt-esq, .cmt-dir, .cmw-toque span, .cmt-msg { animation: none; } }
/* gratis: o botao de baixo nao faz nada durante a corrida e, ao aparecer, encolhia o quadro do
   jogo (os bonecos "pulavam" do lugar do "Toque para começar"); escondido, o quadro nao muda */
.cm-page.cm-guest .cm-action.cm-cash { display: none !important; }

/* ===== Tela de vitoria da demo (proposta do canvas) =====
   Abre em sequencia: cartao estoura, coroa cai quicando, titulo, premio (conta de 0 ate o
   valor, em tutorial.js), caixinhas, texto e por ultimo o botao, que fica pulsando.
   Confetes: tutorial.js. */
.cm-vit { position: relative; z-index: 1; width: min(350px, 100%); padding-top: 58px; }
.cm-vit-card { padding: 2px; border-radius: 28px; background: linear-gradient(180deg, #FFDE8A 0%, #FFB61F 40%, #C86A0C 100%);
               box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 40px rgba(255,170,30,.25);
               animation: vit-estoura .6s cubic-bezier(.34,1.56,.64,1) both; }
.cm-vit-card > * { position: relative; }
.cm-vit-card { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
               background: linear-gradient(180deg, #17243D 0%, #0D1524 100%) padding-box,
                           linear-gradient(180deg, #FFDE8A 0%, #FFB61F 40%, #C86A0C 100%) border-box;
               border: 2px solid transparent; padding: 92px 20px 20px; }
.cm-vit-coroa { position: absolute; left: 50%; top: 0; width: 124px; margin-left: -62px; z-index: 2;
                filter: drop-shadow(0 8px 18px rgba(255,190,40,.45));
                animation: vit-coroa .9s .2s cubic-bezier(.34,1.56,.64,1) both, vit-flutua 2.6s 1.2s ease-in-out infinite; }
.cm-vit-t { margin: 0; font-family: 'Luckiest Guy', 'Baloo 2', sans-serif; font-weight: 400; font-size: 30px; line-height: 1.05; color: #fff;
            text-shadow: 0 3px 0 #3E2202, 0 6px 16px rgba(0,0,0,.45); animation: vit-pop .45s .45s cubic-bezier(.34,1.56,.64,1) both; }
.cm-vit-premio { position: relative; width: 100%; padding: 18px 0 14px; border-radius: 18px; background: rgba(255,182,31,.08);
                 border: 1px solid rgba(255,182,31,.3); animation: vit-pop .5s .6s cubic-bezier(.34,1.56,.64,1) both; }
.cm-vit-valor { display: block; font-family: 'Luckiest Guy', 'Baloo 2', sans-serif; font-weight: 400; font-size: 50px; line-height: 1;
                color: #FFC024; text-shadow: 0 3px 0 #7A3E00, 0 0 22px rgba(255,176,32,.4); font-variant-numeric: tabular-nums; }
.cm-vit-moedas { position: absolute; right: -14px; top: -22px; width: 74px; transform: rotate(10deg);
                 animation: vit-moedas .6s 1s cubic-bezier(.34,1.56,.64,1) both; }
.cm-vit-stats { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cm-vit-stats > div { height: 52px; border-radius: 14px; background: #111B2E; border: 1px solid #22304D; display: flex; flex-direction: column;
                      align-items: center; justify-content: center; gap: 2px; animation: vit-sobe .4s .95s ease-out both; }
.cm-vit-stats > div + div { animation-delay: 1.05s; }
.cm-vit-stats b { font-family: 'Luckiest Guy', 'Baloo 2', sans-serif; font-weight: 400; font-size: 18px; line-height: 1; color: #7DD3FC; }
.cm-vit-stats > div + div b { color: #FFC024; }
.cm-vit-stats span { font: 700 11px 'Poppins', system-ui, sans-serif; color: #9FB0CE; }
.cm-vit-txt { margin: 0; max-width: 300px; font: 600 14px/1.45 'Poppins', system-ui, sans-serif; color: #C9D4E8; animation: vit-sobe .4s 1.15s ease-out both; }
.cm-vit-txt b { color: #FFC024; }
.cm-vit-cta { width: 100%; height: 60px; border: 0; border-radius: 18px; cursor: pointer;
              background: linear-gradient(180deg, #FFDE8A 0%, #FFB61F 46%, #F0900F 100%); box-shadow: 0 6px 0 #A6560A, 0 14px 30px rgba(255,170,30,.35);
              color: #3E2202; font: 800 18px 'Baloo 2', 'Poppins', sans-serif; letter-spacing: .04em; text-transform: uppercase;
              animation: vit-sobe .45s 1.3s ease-out both, vit-pulso 1.8s 1.9s ease-in-out infinite; }
.cm-vit-cta:active { transform: scale(.98); }
@keyframes vit-estoura { 0% { opacity: 0; transform: scale(.4) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes vit-coroa { 0% { opacity: 0; transform: translateY(-220px) rotate(-30deg) scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes vit-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes vit-pop { 0% { opacity: 0; transform: scale(.5); } 100% { opacity: 1; transform: none; } }
@keyframes vit-moedas { 0% { opacity: 0; transform: translate(30px, -30px) rotate(60deg) scale(.4); } 100% { opacity: 1; transform: rotate(10deg); } }
@keyframes vit-sobe { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }
@keyframes vit-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) {
  .cm-vit-card, .cm-vit-coroa, .cm-vit-t, .cm-vit-premio, .cm-vit-moedas, .cm-vit-stats > div, .cm-vit-txt, .cm-vit-cta { animation: none; }
}
.cmt-confete { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 995; pointer-events: none; }

/* ===== Vitoria e derrota do jogo valendo: mesmo padrao da vitoria da demo (canvas P13) ===== */
.cm-vit-valor2 { display: block; font-family: 'Luckiest Guy', 'Baloo 2', sans-serif; font-weight: 400; font-size: 50px; line-height: 1;
                 color: #FFC024; text-shadow: 0 3px 0 #7A3E00, 0 0 22px rgba(255,176,32,.4); font-variant-numeric: tabular-nums; }
.cm-vit-rot { display: block; margin-bottom: 4px; font: 600 12px 'Poppins', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #9FB0CE; }
.cm-vit-sec { height: 40px; padding: 0 16px; border: 0; background: none; color: #9FB0CE; font: 600 14px 'Poppins', sans-serif; cursor: pointer;
              animation: vit-sobe .4s 1.45s ease-out both; }
.cm-vit-dica { margin: 0; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; background: rgba(255,182,31,.08);
               border: 1px solid rgba(255,182,31,.28); font: 500 13px/1.45 'Poppins', sans-serif; color: #DCE5F5; text-align: center;
               animation: vit-sobe .4s 1.15s ease-out both; }
.cm-vit-dica b { color: #FFC024; }
/* derrota: borda e valor em vermelho, multidao vermelha no lugar da coroa */
.cm-vit-perdeu .cm-vit-card { background: linear-gradient(180deg, #17243D 0%, #0D1524 100%) padding-box,
                                          linear-gradient(180deg, #FF8A7A 0%, #EF4444 45%, #9A1B1B 100%) border-box;
                              box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 40px rgba(239,68,68,.18); }
.cm-vit-perdeu .cm-vit-t { text-shadow: 0 3px 0 #7A1A0A, 0 6px 16px rgba(0,0,0,.45); }
.cm-vit-perdeu .cm-vit-premio { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.32); }
.cm-vit-perdeu .cm-vit-valor2 { font-size: 44px; color: #FF6B6B; text-shadow: 0 3px 0 #6B1010; }
.cm-vit-perdeu .cm-vit-stats > div + div b { color: #FF6B6B; }
.cm-vit-vermelha { width: 150px; margin-left: -75px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.cm-vit-perdeu .cm-vit-card { padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { .cm-vit-sec, .cm-vit-dica { animation: none; } }