/* Criador de personagem no modal "Seu perfil" (public/criador.js) */
.perfil:has(#criador:not([hidden])) { width: min(680px, calc(100vw - 32px)); }
.perfil form { max-height: calc(100dvh - 48px); overflow-y: auto; }
.criador-corpo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 600px) { .criador-corpo { grid-template-columns: 1fr; } }
.criador-palco {
  position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--linha); border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 25%, var(--painel), var(--fundo)); cursor: grab; touch-action: pan-y; user-select: none;
}
@media (max-width: 600px) { .criador-palco { width: min(220px, 100%); justify-self: center; } }
.criador-palco:active { cursor: grabbing; }
.criador-palco:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.criador-palco canvas { display: block; width: 100%; height: 100%; }
.criador-palco.sem-3d::before { content: "Prévia indisponível neste navegador"; position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: var(--suave); font-size: 13px; }
.criador-sortear { position: absolute; top: 8px; right: 8px; padding: 5px 10px; font-size: 13px; }
.criador-dica { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; color: var(--suave); font-size: 12px; pointer-events: none; }
.criador-opcoes { display: grid; gap: 12px; min-width: 0; }
.criador-opcoes fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.criador-opcoes legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--tinta); }
.criador-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.amostra, .chip { position: relative; display: block; cursor: pointer; }
.amostra input, .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.amostra span { display: block; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.amostra input:checked + span { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16), 0 0 0 2px var(--painel), 0 0 0 4px var(--tinta); }
.chip span { display: block; padding: 6px 12px; border: 1px solid var(--linha); border-radius: 999px; font-size: 13.5px; background: var(--fundo); color: var(--tinta); }
.chip:hover span { border-color: var(--suave); }
.chip input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--painel); }
.amostra input:focus-visible + span, .chip input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 3px; }
.criador-nota:not([hidden]) { display: block; margin-top: 6px; color: var(--suave); font-size: 12px; }