/* =====================================================================
   JOGO DO CAMINHO ESTREITO — visual
   Usa as cores do site (_nucleo/estilo.css), com tema claro e escuro.
   Leve: nenhuma animação contínua fora do jogo. O jogo só desenha
   enquanto a partida está rodando (pausa sozinho ao sair da aba).
   ===================================================================== */
#ce-pagina [hidden], .ce-app [hidden] { display: none !important; }
.ce-selo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0 0; font-size: .85rem; font-weight: 700; color: var(--dourado); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Caixa do jogo ---------- */
.ce-app { max-width: 520px; margin: 1rem auto 1.5rem; padding: .8rem; border-radius: 24px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra); border-top: 6px solid var(--primaria); scroll-margin-top: 70px; }

/* Placar */
.ce-hud { display: flex; align-items: center; gap: .5rem; padding: 0 .2rem .4rem; font-size: .9rem; font-weight: 700; }
.ce-hud-animo { font-size: 1.05rem; letter-spacing: .05em; min-width: 4.6em; }
.ce-hud-fase { flex: 1; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-hud-passos b { font-variant-numeric: tabular-nums; color: var(--primaria); }
.ce-pausa { width: 40px; height: 36px; border: 0; border-radius: 10px; background: var(--superficie-2); color: var(--texto); font-weight: 800; cursor: pointer; }
.ce-barra { height: 6px; margin: 0 0 .5rem; border-radius: 6px; background: var(--superficie-2); overflow: hidden; }
.ce-barra i { display: block; width: 0; height: 100%; background: var(--dourado); }

/* Tela */
.ce-palco { position: relative; border-radius: 16px; overflow: hidden; background: #cfe3c0; aspect-ratio: 3 / 4; max-height: max(300px, min(68vh, calc(100vh - 300px))); max-height: max(300px, min(68svh, calc(100svh - 300px))); margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ce-palco canvas { display: block; width: 100%; height: 100%; }

/* Mensagens sobre a tela (início, fim de fase, queda, pausa) */
.ce-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: .8rem; background: rgba(14, 21, 19, .55); overflow-y: auto; }
.ce-cartao { width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto; padding: 1.1rem 1rem; border-radius: 18px; background: var(--superficie); color: var(--texto); text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ce-cartao h3 { margin: .1rem 0 .5rem; font-size: 1.25rem; }
.ce-cartao p { margin: .4rem 0; font-size: .95rem; line-height: 1.5; }
.ce-cartao-emoji { font-size: 2.4rem; line-height: 1; margin: 0 0 .3rem !important; }
.ce-cartao blockquote { margin: .6rem 0; padding: .6rem .8rem; border-radius: 12px; background: var(--dourado-suave); font-family: var(--fonte-titulo); font-size: 1rem; line-height: 1.5; text-align: left; }
.ce-cartao blockquote cite { display: block; margin-top: .3rem; font-family: var(--fonte); font-size: .82rem; font-style: normal; font-weight: 700; color: var(--dourado); }
.ce-cartao .ce-pergunta { font-weight: 650; }
.ce-cartao .ce-numeros { display: flex; justify-content: center; gap: .5rem; margin: .5rem 0; }
.ce-cartao .ce-numeros span { padding: .35rem .6rem; border-radius: 10px; background: var(--fundo); border: 1px solid var(--borda); font-size: .85rem; }
.ce-cartao .ce-numeros b { color: var(--primaria); font-variant-numeric: tabular-nums; }
.ce-cartao .ce-tropecos { margin: .3rem 0; padding: 0; list-style: none; font-size: .88rem; text-align: left; }
.ce-cartao .ce-tropecos li { margin: .3rem 0; }
.ce-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: .8rem 0 0; }
.ce-botoes .btn { min-height: 44px; }
.ce-nota { font-size: .8rem !important; color: var(--texto-2); }

/* Setas para o polegar */
.ce-controles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .6rem 0 0; }
.ce-seta { min-height: 56px; border: 0; border-radius: 16px; background: var(--superficie-2); color: var(--texto); font-size: 1.4rem; cursor: pointer; touch-action: manipulation; }
.ce-seta:active { background: var(--borda); }
.ce-ajuda, .ce-legenda, .ce-privacidade { margin: .5rem .2rem 0; font-size: .82rem; color: var(--texto-2); }
.ce-legenda { display: flex; flex-wrap: wrap; gap: .2rem .8rem; }

/* Texto da página */
.ce-fases { padding-left: 1.2rem; }
.ce-fases li { margin: 0 0 1rem; }
.ce-fases p { margin: .2rem 0; }
.ce-fases blockquote, .ce-lista dd { color: var(--texto-2); }
.ce-fases blockquote { margin: .3rem 0 0; padding-left: .8rem; border-left: 3px solid var(--dourado); }
.ce-lista dt { margin-top: .8rem; font-weight: 700; }
.ce-lista dd { margin: .2rem 0 0; }