/* pedidos-r41-r44.css · desenho das folhas da ala, do livro de receitas, do fim "à mesa" e da escolha da dança
   (R41, R43, R44). Pele por cima do que os sistemas já desenham (alas.js, cozinha.js, danca.js): só tokens, nada muda de
   sítio, alto contraste e calmo ganham. O jogo carrega-a no index.html (cópia em prototipo/ui/). */

/* ---------------------------------------------------------------- R41 folha da ala dos relatos: fotografias como no painel */
html:not(.contraste) body .ala-fotos li { background: var(--papel); padding: 8px 8px 10px; box-shadow: var(--sombra-2); border-radius: 6px; position: relative; }
html:not(.contraste) body .ala-fotos li::before { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--erro); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }                        /* o pionés, como no painel do museu */
html:not(.contraste) body .ala-fotos li:nth-child(odd) { transform: rotate(-1.2deg); }
html:not(.contraste) body .ala-fotos li:nth-child(even) { transform: rotate(1deg); }
html:not(.contraste) body .ala-fotos img { border: 0; box-shadow: none; border-radius: 3px; }
html:not(.contraste) body .ala-temas button { border-left-width: 6px; }
/* ala de antigamente: cada objeto com etiqueta de museu */
html:not(.contraste) body .ala-objetos li { border-style: solid; box-shadow: inset 0 0 0 4px var(--papel), inset 0 0 0 5px var(--linha); }
html:not(.contraste) body .ala-objetos canvas { background: color-mix(in srgb, var(--marca) 22%, var(--papel)); }

/* ---------------------------------------------------------------- R43 livro de receitas, barra e fim "à mesa" */
html:not(.contraste) body .cz-livro { padding: 12px; border-radius: var(--r-cartao);
  background: repeating-linear-gradient(var(--papel) 0 23px, color-mix(in srgb, var(--linha) 70%, var(--papel)) 23px 24px); }
html:not(.contraste) body .cz-rec { border-top: 8px solid color-mix(in srgb, var(--erro) 70%, var(--papel)); background: var(--papel); box-shadow: var(--sombra-2); }
html:not(.contraste) body .cz-rec[aria-disabled="true"] { border-top-color: var(--linha); box-shadow: none; }
html:not(.contraste) body .cz-barra > button { border-radius: 18px; border-bottom-width: 5px; }
html:not(.contraste) body .cz-barra > button.agora { border-color: var(--acento); box-shadow: 0 0 0 3px var(--marca); }
html:not(.contraste) body .cz-fim { padding: 12px; border-radius: var(--r-cartao);
  background: repeating-conic-gradient(color-mix(in srgb, var(--erro) 18%, var(--papel)) 0 25%, var(--papel) 0 50%) 0 0 / 24px 24px; }
html:not(.contraste) body .cz-fim canvas { background: var(--papel); border-radius: 50%; box-shadow: var(--sombra-2); }

/* ---------------------------------------------------------------- R44 escolha "Com quem? / Como?" */
html body .dz-cartao [data-modo] { display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo); padding: 6px 14px 6px 8px; font-weight: 800; }
html body .dz-cartao [data-modo]::before { content: ''; width: 28px; height: 28px; flex: none; background: center / contain no-repeat; image-rendering: pixelated; }
html body .dz-cartao [data-modo="batalha"]::before { background-image: url(../arte/ui/icones-ui/danca-batalha.png); }
html body .dz-cartao [data-modo="dueto"]::before { background-image: url(../arte/ui/icones-ui/danca-dueto.png); }
html body .dz-cartao [data-modo="espelho"]::before { background-image: url(../arte/ui/icones-ui/danca-espelho.png); }
html body .dz-cartao [data-modo="roda"]::before { background-image: url(../arte/ui/icones-ui/danca-roda.png); }
html body .dz-cartao [data-modo="sozinho"]::before { background-image: url(../arte/ui/icones-ui/danca-sozinho.png); }
html:not(.contraste) body .dz-com button { border-left-width: 8px; box-shadow: var(--sombra-2); }
html:not(.contraste) body .dz-com button canvas { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--cor, var(--acento)) 25%, var(--papel)); }
html:not(.contraste) body .dz-cartao h3 { display: flex; align-items: center; gap: 8px; }

.calmo .ala-fotos li { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .ala-fotos li { transform: none !important; } }