/* guild-code/otimizar/pranchas-ui.css — estilo do bloco Pranchas (pranchas-ui.js), compartilhado por /otimizar/ e /pranchas/.
   Usa --gold, --warn, --surface, --fio e --el-* da casca da página que o liga. */
#bl-pranchas .pr-controles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;align-items:center;margin:0 0 14px}

#bl-pranchas .pr-bloco{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
#bl-pranchas .pr-bloco[hidden]{display:none}
#bl-pranchas .pr-verbtn{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.2;color:var(--warn);padding:4px 12px;min-height:24px}
#bl-pranchas .pr-verbtn:hover{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,var(--surface))}
#bl-pranchas .pr-verbtn svg{flex:none;display:block}
#bl-pranchas .pr-menus{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 6px}
#bl-pranchas .pr-menus[hidden]{display:none}
#bl-pranchas .pr-bloco{justify-content:center}
#bl-pranchas .pr-alerta{text-align:center;margin:12px 0 0}
#bl-pranchas .pr-sel{display:inline-flex;align-items:center;gap:6px}
#bl-pranchas #pr-aviso-area{text-align:center;min-height:1.5em;margin:0}
#bl-pranchas .pr-quadro{display:flex;flex-direction:column;gap:8px;width:max-content;max-width:100%;margin:0 auto}
#bl-pranchas .pr-grade{display:grid;grid-template-columns:repeat(13,minmax(19px,36px));gap:2px;width:max-content;max-width:100%}
#bl-pranchas .pr-tile{aspect-ratio:1;display:grid;place-items:center;font-size:11px;border-radius:3px;background:var(--surface);border:1px solid var(--fio)}
#bl-pranchas .pr-x{background:#4a4f57}
#bl-pranchas .pr-e{background:#9aa0a8}
#bl-pranchas .pr-a{background:var(--ca,#3f9a5a)}
#bl-pranchas .pr-x.pr-a{background:color-mix(in srgb,var(--ca,#3f9a5a) 55%,#000)}
#bl-pranchas .pr-v{border:1px solid var(--gold)}
#bl-pranchas .pr-tile img{width:78%;height:78%;vertical-align:baseline}
#bl-pranchas .pr-alvo{outline:3px solid var(--gold);outline-offset:-3px}
#bl-pranchas .pr-tile[role=button]{cursor:pointer}
/* código no formato das builds (.code + code.bt1 + .btn.copiar); width:0 + min-width:100% = largura da grade, o texto longo não alarga o quadro */
#bl-pranchas .code{display:flex;gap:8px;align-items:center}
#bl-pranchas .code code{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
#bl-pranchas .code .btn{flex:none}
#bl-pranchas code.bt1{display:block;font-size:11px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-family:var(--num),monospace}
#bl-pranchas .btn.copiar{color:var(--warn);border-color:var(--warn);font-weight:600}
#bl-pranchas .btn.copiar.copiado{color:var(--pos);border-color:var(--pos)}
#bl-pranchas .pr-quadro .code{flex:none;width:0;min-width:100%;box-sizing:border-box}
@media(max-width:430px){#bl-pranchas .pr-grade{grid-template-columns:repeat(13,minmax(17px,1fr));width:100%}}