/* Janela de configuração do automático: mesmo quadro dourado dos Talentos. */
.autoconf { position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; padding: 12px; background: #050403b8; }
.autoconf.closed { display: none; }
.autoconf-quadro { --chanfro: 15px; width: min(860px, 100%); max-height: calc(100dvh - 24px);
  display: flex; flex-direction: column; padding: 16px; gap: 9px; color: #ded5c6; }
.autoconf-quadro::before { inset: 4px; background: radial-gradient(ellipse at top left, #34240d66, transparent 65%), #10100e; }

.autoconf-topo { display: flex; align-items: center; gap: 15px; padding: 2px 5px 10px; border-bottom: 1px solid #9d7527; flex: none; }
.autoconf-topo .ic { width: 34px; height: 34px; color: #f4cb69; }
.autoconf-topo h2 { margin: 0; flex: 1; font: bold 32px Georgia, serif; text-transform: uppercase; letter-spacing: 2px; color: #ffdc79; text-shadow: 0 2px 2px #3b2200; }
.autoconf .autoconf-x { width: 44px; min-width: 44px; flex: none; height: 40px; font-size: 32px; padding: 0; }

.autoconf-abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.autoconf .plate-btn { --chanfro: 8px; min-height: 38px; cursor: var(--cur-default), pointer; justify-content: center; }
.autoconf-abas .plate-btn { font: bold 19px Georgia, serif; gap: 9px; padding: 10px 7px; }
.autoconf .plate-btn.on { color: #ffe69c; filter: drop-shadow(0 0 3px #c68d19); }
.autoconf button:focus-visible, .autoconf input:focus-visible, .autoconf select:focus-visible { outline: 2px solid #fff0ba; outline-offset: -3px; }
.autoconf button:disabled { opacity: .36; cursor: var(--cur-default), default; filter: none; }

.autoconf-corpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start;
  flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #98702b #17130b; padding: 2px 4px 2px 1px; }
.autoconf-coluna { border: 1px solid #86662d; border-radius: 7px 1px; padding: 10px 11px; background: linear-gradient(150deg, #231c10, #0a0b0a); }
.autoconf-coluna h3 { margin: 0 0 8px; font: bold 16px Georgia, serif; color: #f7d679; border-bottom: 1px dashed #6d5526; padding-bottom: 5px; }
.autoconf-coluna h3 + h3 { margin-top: 12px; }
.autoconf-ajuda { margin: 8px 0 0; font-size: 11px; color: #b2aa9b; }

.autoconf-check { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 8px; cursor: var(--cur-default), pointer; font-size: 13px; color: #ded5c6; }
.autoconf-check input { width: 19px; height: 19px; flex: none; margin: 1px 0 0; accent-color: #d8a63a; cursor: var(--cur-default), pointer; }
.autoconf-check small { display: block; font-size: 11px; color: #a79c86; }

.autoconf-modos { display: grid; gap: 6px; }
.autoconf-modos .plate-btn { font: bold 14px Georgia, serif; }

.autoconf-faixa { margin-bottom: 10px; }
.autoconf-faixa label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #cdbf9f; margin-bottom: 4px; }
.autoconf-faixa label b { color: #ffd76f; }
.autoconf-faixa input[type=range] { width: 100%; accent-color: #d8a63a; }
.autoconf-faixa select { width: 100%; height: 30px; font-size: 12px; padding: 3px 7px; }
.autoconf-faixa small { display: block; margin-top: 3px; font-size: 11px; color: #a79c86; }

.autoconf-slots { display: grid; gap: 5px; }
.autoconf-slot { display: flex; align-items: center; gap: 8px; }
.autoconf-slot b { width: 26px; height: 26px; flex: none; display: grid; place-items: center; font: bold 14px Georgia, serif;
  color: #ffd76f; border: 1px solid #ac822d; border-radius: 4px; background: linear-gradient(#302610, #090b0b); }
.autoconf-slot select { flex: 1; min-width: 0; height: 30px; font-size: 12px; padding: 3px 7px; }

.autoconf-resumo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.autoconf-resumo li { border-left: 3px solid #ac822d; padding: 3px 0 3px 8px; font-size: 12px; }
.autoconf-resumo li b { display: block; color: #f7d679; font: bold 13px Georgia, serif; }
.autoconf-resumo li span { color: #cdbf9f; }
.autoconf-resumo li small { display: block; color: #a79c86; font-size: 11px; }
.autoconf-resumo .vazio { border-left-color: #53442b; color: #a79c86; }

.autoconf-info { border: 1px solid #b38a36; border-radius: 8px 1px; padding: 9px 11px; background: #0a0a09c9; flex: none; }
.autoconf-info h3 { margin: 0 0 6px; font: bold 13px Georgia, serif; color: #e9c975; }
.autoconf-info > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.autoconf-info > div > div { display: grid; gap: 1px; }
.autoconf-info span { font-size: 11px; color: #a79c86; }
.autoconf-info b { font: bold 15px Georgia, serif; color: #ffd76f; }

.autoconf-aviso { margin: 0; min-height: 15px; font-size: 12px; color: #ffd27a; }
.autoconf-acoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.autoconf-acoes .plate-btn { font: bold 15px Georgia, serif; gap: 7px; }

@media (max-width: 760px) {
  .autoconf-quadro { padding: 11px; gap: 7px; }
  .autoconf-topo h2 { font-size: 23px; }
  .autoconf-topo .ic { width: 26px; height: 26px; }
  .autoconf-corpo { grid-template-columns: minmax(0, 1fr); }
  .autoconf-abas .plate-btn { font-size: 15px; gap: 5px; padding: 8px 4px; }
  .autoconf-acoes .plate-btn { font-size: 13px; }
}

/* Seletor de skill: slot com ícone e lista de escolha com as imagens. */
.autoconf-slot { position: relative; }
.autoconf-escolher { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 34px;
  padding: 3px 7px; text-align: left; cursor: var(--cur-default), pointer; font: inherit; font-size: 12px; color: #ded5c6;
  border: 1px solid #86662d; border-radius: 4px; background: linear-gradient(#241d11, #0b0c0b); }
.autoconf-escolher:hover, .autoconf-slot.aberto .autoconf-escolher { border-color: #d1a04a; color: #ffe69c; }
.autoconf-escolher span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autoconf-escolher img, .autoconf-opcao img { width: 26px; height: 26px; flex: none; object-fit: contain;
  border: 1px solid #8a6b2f; border-radius: 3px; background: #050604; }
.autoconf-sem { width: 26px; height: 26px; flex: none; border: 1px dashed #5a4a2c; border-radius: 3px; }
.autoconf-tirar { width: 26px; height: 26px; flex: none; padding: 0; font: bold 17px Georgia, serif; cursor: var(--cur-default), pointer;
  color: #e3b96a; border: 1px solid #86662d; border-radius: 4px; background: linear-gradient(#241d11, #0b0c0b); }
.autoconf-tirar:hover { color: #ffd76f; border-color: #d1a04a; }

.autoconf-lista { position: absolute; left: 34px; right: 0; top: 36px; z-index: 3; max-height: 260px; overflow-y: auto;
  display: grid; gap: 2px; padding: 4px; border: 1px solid #c09443; border-radius: 5px;
  background: #0c0d0be8; box-shadow: 0 6px 18px #000a; scrollbar-width: thin; scrollbar-color: #98702b #17130b; }
.autoconf-opcao { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; cursor: var(--cur-default), pointer;
  text-align: left; font: inherit; font-size: 12px; color: #ded5c6; border: 1px solid transparent;
  border-radius: 4px; background: none; }
.autoconf-opcao:hover, .autoconf-opcao:focus-visible { background: #2a2110; border-color: #a8802f; color: #ffe69c; }
.autoconf-opcao.on { border-color: #ffce56; color: #ffd76f; }
.autoconf-opcao small { display: block; font-size: 10px; color: #a79c86; }

.autoconf-resumo li { display: flex; gap: 8px; align-items: flex-start; }
.autoconf-resumo li img { width: 30px; height: 30px; flex: none; object-fit: contain;
  border: 1px solid #8a6b2f; border-radius: 3px; background: #050604; }