/* Cantinho de brincar */
body.pagina-brincar{background:#fff}
.pagina-brincar .barra{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);top:0}
.brincar{max-width:860px;margin:0 auto;padding:104px 16px 60px}
.abre h1{font:600 clamp(36px,6vw,56px)/1.05 Fredoka,sans-serif;margin:0 0 10px}
.abre em{font-style:normal;color:var(--orange)}
.abre p{font-size:18px;line-height:1.5;font-weight:500;margin:0 0 28px;max-width:52ch}
.jogo{background:color-mix(in srgb,var(--cor) 7%,#fff);border-radius:30px;padding:clamp(20px,4vw,34px);margin-bottom:22px;border-top:8px solid var(--cor)}
.jogo h2{font:600 clamp(26px,4vw,34px)/1.1 Fredoka,sans-serif;color:var(--cor);margin:0 0 6px}
.jogo>p{font-size:16px;font-weight:500;margin:0 0 18px}
.jogo .botao{margin-top:16px}
.volta{text-align:center;margin:30px 0 0}

/* memória */
.mem-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vw,14px);max-width:520px}
.carta{aspect-ratio:1;border:0;border-radius:18px;background:var(--cor);cursor:pointer;padding:14%;display:grid;place-items:center;transition:transform .2s,background .2s;box-shadow:0 6px 0 rgba(7,71,107,.18)}
.carta svg{width:100%;height:100%;opacity:0;transition:opacity .15s}
.carta.aberta,.carta.achada{background:#fff;transform:rotateY(180deg)}
.carta.aberta svg,.carta.achada svg{opacity:1;transform:rotateY(180deg)}
.carta.achada{box-shadow:0 0 0 4px var(--green)}
.placar{font-weight:800 !important;margin:16px 0 0 !important}

/* xilofone */
.xil{display:flex;align-items:flex-end;gap:clamp(5px,1.5vw,12px);height:230px;max-width:560px}
.tecla{flex:1;border:0;border-radius:14px;cursor:pointer;color:#fff;font:700 clamp(13px,2.4vw,17px) Fredoka,sans-serif;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;box-shadow:0 6px 0 rgba(0,0,0,.18);transition:transform .08s,filter .08s}
.tecla.toca{transform:translateY(5px) scale(.97);filter:brightness(1.35);box-shadow:0 1px 0 rgba(0,0,0,.18)}

/* pintar */
.paleta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.cor{width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px rgba(7,71,107,.25);cursor:pointer}
.cor[aria-pressed=true]{box-shadow:0 0 0 4px var(--navy);transform:scale(1.1)}
#desenho{display:block;width:100%;max-width:560px;height:auto;background:#fff;border-radius:20px;touch-action:manipulation}
#desenho .p{fill:#fff;stroke:var(--navy);stroke-width:4;stroke-linejoin:round;cursor:pointer}
@media (prefers-reduced-motion:reduce){.carta,.carta svg,.tecla{transition:none}}

/* ajustes da revisão de direção de arte: jogos centralizados e estrela do logo no verso das cartas */
.mem-grade,.xil,#desenho{margin-left:auto;margin-right:auto}
.mem-grade{max-width:560px}
#desenho{max-width:640px}
.paleta{justify-content:center}
.jogo{text-align:center}
.carta{background:var(--cor) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23fff' fill-opacity='.45' points='50,8 61,37 92,38 67,57 76,88 50,70 24,88 33,57 8,38 39,37'/%3E%3C/svg%3E") center/52% no-repeat}
.carta.aberta,.carta.achada{background:#fff}

/* escolha entre os cinco desenhos */
.desenhos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:16px}
.opcao-desenho{font:800 15px Nunito,sans-serif;color:var(--navy);background:#fff;border:0;border-radius:99px;padding:10px 18px;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(7,71,107,.22)}
.opcao-desenho[aria-pressed=true]{background:var(--navy);color:#fff;box-shadow:none}