/* Jogo da Raposinha: caixa do jogo (canvas + botões). Sem dependência externa. */
.jogo-sec { padding: 28px 0 8px; }
.jogo-caixa { position: relative; width: 100%; max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #bfe8ff; box-shadow: 0 14px 34px rgba(60, 30, 10, .16); border: 3px solid #fff; }
@media (max-width: 640px) { .jogo-caixa { aspect-ratio: 5 / 4; border-radius: 16px; } }
.jogo-caixa canvas { display: block; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; cursor: pointer; outline: none; }
.jogo-caixa canvas:focus-visible { box-shadow: inset 0 0 0 4px #2f8f5b; }
.jogo-botoes { position: absolute; top: 8px; right: 8px; display: flex; gap: 8px; z-index: 2; }
.jogo-botoes button { width: 44px; height: 44px; border-radius: 999px; border: 2px solid rgba(255,255,255,.9); background: rgba(42, 33, 64, .55); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; touch-action: manipulation; }
.jogo-botoes button:hover, .jogo-botoes button:focus-visible { background: rgba(42, 33, 64, .8); outline: none; }
.jogo-botoes svg { width: 22px; height: 22px; display: block; }
.jogo-ajuda { max-width: 980px; margin: 14px auto 0; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 15px; color: var(--muted, #665d78); text-align: center; }
.jogo-ajuda b { color: var(--text, #2a2140); }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jogo-sec noscript p { text-align: center; margin-top: 12px; }
/* atividades: desenho para colorir e passo a passo */
.colorir { background: #fff; border: 2px dashed var(--border, #f0dcc0); border-radius: 16px; padding: 16px; margin: 0 0 24px; text-align: center; }
.colorir svg { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.colorir figcaption { font-size: 14px; color: var(--muted, #665d78); margin-top: 8px; }
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0 0 24px; }
.passos figure { margin: 0; background: #fff; border: 1px solid var(--border, #f0dcc0); border-radius: 14px; padding: 10px; text-align: center; }
.passos svg { width: 100%; height: auto; display: block; }
.passos figcaption { font-size: 14px; color: var(--muted, #665d78); }
.passos figcaption b { display: block; color: var(--text, #2a2140); }
@media print { header, footer, .lateral, .toc-mobile, .jogo-sec { display: none !important; } .colorir { border: 0; } }
/* home: hero enxuto para o jogo aparecer logo na primeira tela */
.hero { padding: 34px 0 18px; }
.hero .grid-topo { grid-template-columns: 1fr; }
.hero-ilus { display: none; }
.hero .acoes { margin-top: 14px; }
.hero + .jogo-sec { padding-top: 6px; }
@media (max-width: 640px) { .hero { padding: 22px 0 10px; } .hero .lead { font-size: 16px; } .hero .acoes { display: none; } }