.talentos { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 12px; background: #050403b8; pointer-events: auto; }
.talentos.closed { display: none; }
.talentos-quadro { --chanfro: 15px; width: min(800px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; padding: 16px; gap: 9px; color: #ded5c6; }
.talentos-quadro::before { inset: 4px; background: radial-gradient(ellipse at top left, #34240d66, transparent 65%), #10100e; }
.talentos-topo { display: flex; align-items: center; gap: 15px; padding: 2px 5px 10px; border-bottom: 1px solid #9d7527; flex: none; }
.talentos-topo .ic { width: 34px; height: 34px; color: #f4cb69; }
.talentos-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; }
.talentos .talentos-x { width: 44px; min-width: 44px; flex: none; height: 40px; font-size: 32px; padding: 0; }
.talentos-abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.talentos .plate-btn { --chanfro: 8px; min-height: 38px; cursor: var(--cur-default), pointer; justify-content: center; }
.talentos-abas .plate-btn { font: bold 20px Georgia, serif; gap: 9px; padding: 10px 7px; }
.talentos-abas small { font: 11px 'Segoe UI', sans-serif; color: #bda777; }
.talentos .plate-btn.on { color: #ffe69c; filter: drop-shadow(0 0 3px #c68d19); }
.talentos button:focus-visible, .talentos input:focus-visible, .talentos select:focus-visible { outline: 2px solid #fff0ba; outline-offset: -3px; }
.talentos-filtros { display: flex; gap: 14px; flex: none; }
.talentos-filtros label { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; color: #bfae8c; font-size: 11px; white-space: nowrap; }
.talentos-filtros input, .talentos-filtros select { width: 100%; min-width: 0; height: 29px; margin: 0; font-size: 12px; padding: 3px 7px; }
#talentos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; min-height: 100px; max-height: 430px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #98702b #17130b; padding: 3px 4px 3px 1px; flex: 1 1 330px; }
.talento-card { display: flex; border: 1px solid #86662d; padding: 7px; gap: 7px; background: linear-gradient(110deg, #231c10, #0a0b0a); min-height: 94px; border-radius: 7px 1px; }
.talento-card.selected { border: 2px solid #ffce56; padding: 6px; box-shadow: inset 0 0 9px #be850939, 0 0 4px #9e6a22; }
.talento-card.locked { border-color: #53442b; }
.talento-card.locked img { filter: grayscale(.8); opacity: .65; }
.talento-select { display: flex; align-items: center; text-align: left; gap: 10px; color: inherit; font: inherit; flex: 1; min-width: 0; padding: 0; background: none; border: 0; cursor: var(--cur-default), pointer; }
.talento-select img { width: 68px; height: 68px; object-fit: contain; border: 2px solid #ac822d; padding: 3px; background: #050604; border-radius: 7px 1px; image-rendering: auto; }
.talento-text { display: grid; flex: 1; min-width: 0; gap: 3px; }
.talento-text strong { font: bold 16px Georgia, serif; color: #f7d679; }
.talento-text b { font-size: 12px; color: #e9c975; }
.talento-text small { color: #b2aa9b; font-size: 11px; }
.talento-bar { display: flex; height: 12px; gap: 2px; background: #080807; border: 1px solid #665b3f; padding: 1px; margin-top: 2px; }
.talento-bar i { flex: 1; background: linear-gradient(#292825, #10100f); }
.talento-bar .full { background: linear-gradient(#fff394, #efb529 55%, #a8770c); }
.talento-passos { display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.talento-passos button { width: 28px; height: 28px; line-height: 21px; padding: 0; font: bold 23px Georgia, serif; border: 1px solid #d1a04a; border-radius: 4px; color: #ffd76f; background: linear-gradient(#302610, #090b0b); cursor: var(--cur-default), pointer; }
.talentos button:disabled { opacity: .36; cursor: var(--cur-default), default; filter: none; }
.talentos-detalhe { display: flex; gap: 14px; border: 1px solid #b38a36; padding: 11px; border-radius: 8px 1px; background: #0a0a09c9; flex: none; }
.talentos-detalhe > img { width: 96px; height: 96px; object-fit: contain; align-self: center; border: 3px double #c89e48; padding: 5px; background: #050605; }
.talentos-detalhe > div { min-width: 0; flex: 1; }
.talentos-detalhe header { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #796029; padding-bottom: 5px; }
.talentos-detalhe h3 { color: #ffda76; font: bold 22px Georgia, serif; text-transform: none; letter-spacing: 0; margin: 0; }
.talentos-detalhe header b { white-space: nowrap; color: #edc76b; font-size: 13px; }
.talentos-detalhe p { font-size: 12px; margin: 7px 0; line-height: 1.4; }
.talentos-detalhe dl { display: flex; flex-wrap: wrap; gap: 5px 20px; margin: 7px 0; font-size: 11px; }
.talentos-detalhe dl div { display: flex; gap: 7px; }
.talentos-detalhe dt { color: #a69b83; }.talentos-detalhe dd { margin: 0; color: #f0ddb1; }
.talento-regra { display: block; color: #ab9c7f; font-size: 10px; line-height: 1.4; }
.talentos-resumo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid #8c6827; font-size: 13px; flex: none; }
.talentos-resumo b { color: #ffda69; font-size: 20px; margin-left: 8px; }
.talentos-aviso { min-height: 16px; margin: 0; font-size: 11px; color: #cbbc9c; text-align: center; flex: none; }
.talentos-acoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: none; }
.talentos-acoes .plate-btn { font: bold 18px Georgia, serif; gap: 10px; padding: 10px 6px; }
.talentos-vazio { grid-column: 1 / -1; text-align: center; font-size: 13px; padding: 30px 10px; }
#talentos-lista { overflow-anchor: none; }
@media (max-width: 600px) {
  .talentos { padding: 5px; }.talentos-quadro { padding: 12px; gap: 7px; max-height: calc(100dvh - 10px); }
  .talentos-topo h2 { font-size: 24px; }.talentos-topo .ic { width: 26px; height: 26px; }
  .talentos-abas .plate-btn { font-size: 15px; gap: 4px; padding: 8px 3px; }.talentos-abas .ic { width: 16px; }
  .talentos-filtros { gap: 7px; }.talentos-filtros label { flex-direction: column; align-items: stretch; gap: 3px; }
  #talentos-lista { grid-template-columns: 1fr; min-height: 94px; }
  .talento-select img { width: 56px; height: 56px; }.talento-card { min-height: 85px; }
  .talentos-detalhe { gap: 7px; padding: 8px; }.talentos-detalhe > img { width: 54px; height: 54px; }
  .talentos-detalhe h3 { font-size: 17px; }.talentos-detalhe header b { font-size: 11px; }
  .talentos-resumo { padding: 7px; font-size: 11px; }.talentos-resumo b { font-size: 16px; margin-left: 2px; }
  .talentos-acoes .plate-btn { font-size: 15px; padding: 8px 3px; gap: 4px; }
}
@media (max-height: 570px) {
  .talentos-quadro { overflow-y: auto; display: block; }.talentos-quadro > * { margin-bottom: 8px; }
  #talentos-lista { max-height: 230px; }.talentos-detalhe { min-height: 100px; }
}

/* Quarta prancha: mesma familia de molduras da barra, chat e mochila. */
.talentos-quadro {
  background: linear-gradient(145deg, #ffea9e, #92641e 38%, #e8be62 70%, #79521f);
  filter: drop-shadow(0 10px 24px #000d);
  color: #ecdfc5;
}
.talentos-quadro::before {
  background: linear-gradient(150deg, #0d3744, #041923 56%, #0a2b37);
  box-shadow: inset 0 0 0 1px #327183, inset 0 0 26px #001018;
}
.talentos-quadro.ornate::after {
  inset: 5px;
  opacity: 1;
  background:
    radial-gradient(circle, #e4ffff 0 20%, #28dce9 27% 47%, #a67b32 54% 69%, transparent 74%) 0 50% / 14px 14px no-repeat,
    radial-gradient(circle, #e4ffff 0 20%, #28dce9 27% 47%, #a67b32 54% 69%, transparent 74%) 100% 50% / 14px 14px no-repeat,
    linear-gradient(#e8c572, #946a27) 12px 2px / calc(100% - 24px) 2px no-repeat,
    linear-gradient(#845d25, #d6ac55) 12px calc(100% - 2px) / calc(100% - 24px) 2px no-repeat;
}
.talentos-topo { border-bottom-color: #a98036; }
.talentos-topo h2 { color: #ffe19a; }
.talentos .plate-btn {
  background: linear-gradient(180deg, #143b46, #061b27);
  box-shadow: inset 0 0 0 1px #ad843c;
  color: #f4d693;
}
.talentos .plate-btn:hover,
.talentos .plate-btn:focus-visible { box-shadow: inset 0 0 0 1px #4cdeeb, 0 0 8px #31d6e470; color: #fff0bd; }
.talentos-abas .plate-btn.on {
  background: linear-gradient(180deg, #4a522c, #1b2b1e);
  box-shadow: inset 0 0 0 1px #ffe19b, 0 0 9px #d8aa5070;
  color: #ffe19b;
}
.talentos-filtros label { color: #e5d8ba; }
.talentos-filtros input,
.talentos-filtros select {
  border-color: #9f7b37;
  background: #082632;
  color: #f4e4c4;
}
.talentos-filtros input:focus,
.talentos-filtros select:focus { border-color: #49dce9; }
#talentos-lista { scrollbar-color: #c69c4c #082631; }
.talento-card {
  border-color: #9d7938;
  background: linear-gradient(125deg, #0d3541, #061a25 78%);
}
.talento-card:hover { border-color: #4ddde9; }
.talento-card.selected { border-color: #ffdd85; box-shadow: inset 0 0 10px #d8a44535, 0 0 6px #dfb85e70; }
.talento-card.locked { border-color: #4d6160; }
.talento-select img { border-color: #c3984b; background: #03131c; }
.talento-text strong, .talento-text b { color: #ffe09a; }
.talento-text small { color: #b8c8c9; }
.talento-bar { background: #03141d; border-color: #9e7935; }
.talento-bar i { background: linear-gradient(#183c46, #09232d); }
.talento-bar .full { background: linear-gradient(#fff3ae, #e8b53e 56%, #996817); }
.talento-passos button {
  border-color: #d4a750;
  background: linear-gradient(#163d48, #061b27);
  color: #ffdc8b;
}
.talento-passos button:hover { border-color: #4ddce9; }
.talentos-detalhe {
  border-color: #be9649;
  background: linear-gradient(130deg, #0c3440, #051a24);
}
.talentos-detalhe > img { border-color: #cba253; background: #03141d; }
.talentos-detalhe header { border-bottom-color: #957239; }
.talentos-detalhe h3, .talentos-detalhe header b { color: #ffe098; }
.talentos-detalhe dt { color: #b7c7c9; }
.talentos-resumo {
  border-color: #b18a40;
  background: linear-gradient(180deg, #0d303c, #061b27);
}
.talentos-resumo b { color: #ffe094; }
.talentos-acoes .plate-btn.on { background: linear-gradient(180deg, #454a29, #1a291b); }