/* =========================================================================
   folha.css — a ficha no layout da ficha oficial

   A ficha impressa usa caixas de canto chanfrado, escudos para as defesas e
   uma faixa cinza atrás dos atributos. Reproduzimos isso com clip-path: a
   moldura é uma caixa chanfrada preenchida com a cor da linha, e dentro dela
   outra caixa chanfrada com a cor da superfície — a diferença de 1,5 px vira
   a borda.
   ========================================================================= */

.folha{ display:grid; gap:.7rem; grid-template-columns:minmax(0,1fr) }
/* Sem isto, um filho de grid nunca encolhe abaixo do proprio conteudo e
   estoura a caixa numa tela estreita. */
.folha > *,
.folha__pilha > *,
.caixas-folha > *,
.pericias-folha > *{ min-width:0 }

/* ---------- moldura chanfrada ---------- */
.moldura{
  --corte:9px;
  --chanfro:polygon(
    var(--corte) 0, calc(100% - var(--corte)) 0,
    100% var(--corte), 100% calc(100% - var(--corte)),
    calc(100% - var(--corte)) 100%, var(--corte) 100%,
    0 calc(100% - var(--corte)), 0 var(--corte));
  background:var(--tinta-3);
  clip-path:var(--chanfro);
  padding:1.5px;
}
.moldura > * {
  background:var(--superficie);
  clip-path:var(--chanfro);
  height:100%;
}
.moldura--pequena{ --corte:6px }

/* rótulo no topo da caixa, como na ficha impressa */
.rotulo{
  display:block; text-align:center;
  font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-2); padding:.3rem .4rem .15rem; line-height:1.25;
  /* a moldura corta com clip-path: rotulo nenhum pode passar da caixa */
  overflow-wrap:anywhere;
}
.rotulo--fraco{ color:var(--tinta-3); font-weight:600 }

/* campo sem borda dentro de uma moldura */
.folha input,
.folha textarea{
  border:none; background:none; border-radius:0; min-height:0;
  padding:.15rem .55rem .45rem; width:100%; font-size:.95rem;
}
.folha input:focus,
.folha textarea:focus{ outline:2px solid var(--luz); outline-offset:-2px; box-shadow:none }
.folha textarea{ padding:.35rem .55rem; line-height:1.55; resize:none }

/* ---------- cabeçalho ---------- */
.folha__topo{ display:grid; gap:.7rem; grid-template-columns:minmax(0,1fr) }
@media (min-width:820px){ .folha__topo{ grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) } }

.folha__marca{
  display:flex; align-items:center; gap:.75rem; justify-content:center;
  padding:.9rem 1rem;
}
.folha__marca svg{ width:38px; height:38px; flex:none; color:var(--ambar) }
.folha__marca b{
  font-family:var(--f-titulo); font-size:1.35rem; font-weight:600;
  letter-spacing:.14em; line-height:1; display:block;
}
.folha__marca span{
  display:block; font-size:.56rem; font-weight:700; letter-spacing:.24em;
  color:var(--tinta-3); margin-top:.25rem;
}
/* "Ancestralidade" e' o rotulo mais longo do cabecalho; a segunda coluna
   precisa comporta-lo mesmo num celular estreito. */
.folha__identidade{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1.3fr); gap:.7rem }
@media (min-width:620px){
  .folha__identidade{ grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) }
}
.folha__pilha{ display:grid; gap:.7rem; align-content:start }

/* ---------- faixa dos atributos ---------- */
.faixa-atributos{
  display:grid; gap:.7rem; padding:.75rem;
  grid-template-columns:minmax(0,1fr); border-radius:var(--r-m);
  background:
    linear-gradient(var(--papel-2), var(--papel-2)),
    repeating-linear-gradient(112deg, transparent 0 14px, color-mix(in srgb,var(--tinta) 3%,transparent) 14px 15px);
  border:1px solid var(--borda);
}
@media (min-width:760px){ .faixa-atributos{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

.reino__nome{
  text-align:center; font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:.35rem;
}
.reino[data-reino="fisico"] .reino__nome{ color:var(--fisico) }
.reino[data-reino="cognitivo"] .reino__nome{ color:var(--cognitivo) }
.reino[data-reino="espiritual"] .reino__nome{ color:var(--espiritual) }

.reino__linha{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:.4rem; align-items:start }

.atr-caixa{ text-align:center }
.atr-caixa .rotulo{ padding-bottom:0 }
.atr-caixa__valor{
  display:block; font-family:var(--f-titulo); font-size:1.7rem; font-weight:600;
  line-height:1.1; padding-top:.1rem;
}
.reino[data-reino="fisico"] .atr-caixa__valor{ color:var(--fisico) }
.reino[data-reino="cognitivo"] .atr-caixa__valor{ color:var(--cognitivo) }
.reino[data-reino="espiritual"] .atr-caixa__valor{ color:var(--espiritual) }
.atr-caixa__passos{ display:flex; gap:2px; padding:0 .3rem .35rem }
.atr-caixa__passos button{
  flex:1; min-height:26px; font-weight:700; font-size:.85rem; line-height:1;
  border:1px solid var(--borda); background:var(--papel);
  color:var(--tinta-2); border-radius:5px; cursor:pointer; transition:var(--transicao);
}
.atr-caixa__passos button:hover:not([disabled]){ background:var(--tinta-3); border-color:var(--tinta-3); color:var(--superficie) }
.atr-caixa__passos button[disabled]{ opacity:.3; cursor:default }

/* escudo das defesas e da deflexão */
.escudo{
  --corte:7px;
  align-self:center; width:64px; padding:1.5px;
  background:var(--tinta-3);
  clip-path:polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%);
}
.escudo > div{
  background:var(--superficie); height:100%;
  clip-path:polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%);
  padding-bottom:1rem; text-align:center;
}
/* O escudo tem clip-path: o que passar da largura e' cortado de verdade,
   entao o rotulo precisa caber. "Deflexão" e' a palavra mais longa daqui. */
.escudo .rotulo{ padding:.25rem .15rem 0; font-size:.55rem; letter-spacing:.04em }
.escudo__valor{
  display:block; font-family:var(--f-titulo); font-size:1.35rem;
  font-weight:600; line-height:1.15;
}
.escudo--deflexao{ width:70px }

/* ---------- vida, foco, investidura ---------- */
.recursos-folha{ display:grid; gap:.7rem; grid-template-columns:minmax(0,1fr) }
@media (min-width:760px){ .recursos-folha{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

.recurso-folha{ display:flex; align-items:stretch; gap:.4rem }
.recurso-folha > .moldura{ flex:1 }
.recurso-folha__par{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); height:100% }
.recurso-folha__lado{ text-align:center; padding-bottom:.35rem }
.recurso-folha__lado + .recurso-folha__lado{ border-left:1px solid var(--borda) }
.recurso-folha__valor{
  display:block; font-family:var(--f-titulo); font-size:1.5rem; font-weight:600; line-height:1.15;
}
.recurso-folha--vida .recurso-folha__valor{ color:var(--fisico) }
.recurso-folha--foco .recurso-folha__valor{ color:var(--cognitivo) }
.recurso-folha--investidura .recurso-folha__valor{ color:var(--espiritual) }
.recurso-folha__passos{ display:flex; gap:3px; justify-content:center; padding:0 .3rem .3rem }
.recurso-folha__passos button{
  width:30px; min-height:26px; font-weight:700; line-height:1;
  border:1px solid var(--borda); background:var(--papel);
  color:var(--tinta-2); border-radius:5px; cursor:pointer; transition:var(--transicao);
}
.recurso-folha__passos button:hover{ background:var(--tinta-3); border-color:var(--tinta-3); color:var(--superficie) }
.recurso-folha--desligado{ display:grid; place-items:center; padding:.9rem .5rem;
  font-size:.72rem; color:var(--tinta-3); text-align:center; line-height:1.4 }

/* ---------- perícias ---------- */
.pericias-folha{ display:grid; gap:.7rem 1.2rem; grid-template-columns:minmax(0,1fr) }
@media (min-width:700px){ .pericias-folha{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1040px){ .pericias-folha{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

.linha-pericia{ display:flex; align-items:center; gap:.5rem; padding:.12rem 0 }
.linha-pericia__mod{
  --corte:5px;
  flex:none; width:44px; padding:1.5px;
  background:var(--tinta-3);
  clip-path:var(--chanfro-p, polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px));
  cursor:pointer; border:none; font:inherit; transition:var(--transicao);
}
.linha-pericia__mod span{
  display:block; background:var(--superficie);
  clip-path:inherit; padding:.35rem 0; text-align:center;
  font-weight:700; font-size:.92rem; color:var(--tinta);
}
.linha-pericia__mod:hover{ background:var(--luz) }
.linha-pericia__mod:hover span{ background:var(--luz-fundo); color:var(--luz) }
.linha-pericia__nome{
  flex:1; min-width:0; font-size:.83rem; font-weight:600;
  letter-spacing:.02em; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.linha-pericia__nome small{ font-weight:600; color:var(--tinta-3) }
.linha-pericia__circulos{ display:flex; gap:4px; flex:none }
.linha-pericia__circulos button{
  width:15px; height:15px; padding:0; border-radius:50%;
  border:1.5px solid var(--borda-forte); background:transparent;
  cursor:pointer; transition:var(--transicao);
}
.linha-pericia__circulos button[aria-pressed="true"]{ background:var(--luz); border-color:var(--luz) }
.linha-pericia__circulos button:hover{ border-color:var(--luz) }

.linha-pericia--propria .linha-pericia__nome{ display:flex; gap:.3rem; align-items:center }
.linha-pericia--propria input{
  border-bottom:1px solid var(--borda-forte); padding:.1rem .2rem;
  font-size:.83rem; text-transform:uppercase; min-width:0;
}
.linha-pericia--propria select{
  min-height:28px; padding:.1rem 1.4rem .1rem .35rem; font-size:.72rem;
  width:auto; background-position:calc(100% - .7rem) .8rem, calc(100% - .45rem) .8rem;
}
.botao-propria{
  width:100%; margin-top:.2rem; padding:.35rem; font:inherit; font-size:.78rem;
  color:var(--tinta-3); background:none; cursor:pointer;
  border:1px dashed var(--borda-forte); border-radius:var(--r-p);
  transition:var(--transicao);
}
.botao-propria:hover{ color:var(--luz); border-color:var(--luz) }

/* ---------- derivados ---------- */
.derivados-folha{ display:grid; gap:.7rem; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:820px){ .derivados-folha{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.derivado-folha{ text-align:center; padding-bottom:.5rem }
.derivado-folha__valor{
  display:block; font-family:var(--f-titulo); font-size:1.15rem;
  font-weight:600; color:var(--ambar); line-height:1.3;
}

/* ---------- caixas grandes ---------- */
.caixas-folha{ display:grid; gap:.7rem; grid-template-columns:minmax(0,1fr) }
@media (min-width:820px){
  .caixas-folha--12{ grid-template-columns:minmax(0,1fr) minmax(0,2fr) }
  .caixas-folha--111{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
.caixa-folha__corpo{ padding:.15rem .55rem .55rem }

/* condições como etiquetas alternáveis dentro da caixa */
.condicoes-folha{ display:flex; flex-wrap:wrap; gap:.3rem; padding:.3rem .55rem .6rem }
.condicoes-folha button{
  font-size:.7rem; padding:.2rem .5rem; border-radius:999px;
  border:1px solid var(--borda-forte); background:var(--papel);
  color:var(--tinta-2); cursor:pointer; font-family:inherit; transition:var(--transicao);
}
.condicoes-folha button[aria-pressed="true"]{
  background:var(--granada); border-color:var(--granada); color:#fff;
}

/* armas */
/* A caixa de Armas fica na coluna estreita da ficha, e continua estreita numa
   tela grande — quem manda no layout aqui e' a largura da CAIXA, nao a da
   janela. Por isso container query, e nao media query.
   O padrao e' o nome da arma numa linha e o resto embaixo; so quando a caixa
   tem folga a linha vira uma so, com "Armamento Pesado" cabendo inteiro. */
.caixa-armas > div{ container-type:inline-size }
.arma-folha{ display:grid; gap:.3rem .4rem; padding:.45rem .55rem;
  grid-template-columns:minmax(0,1fr) 66px auto }
.arma-folha > :first-child{ grid-column:1 / -1 }
@container (min-width:440px){
  .arma-folha{ grid-template-columns:minmax(0,1.4fr) minmax(0,1.7fr) 66px auto }
  .arma-folha > :first-child{ grid-column:auto }
}
.arma-folha + .arma-folha{ border-top:1px solid var(--borda) }
.arma-folha input,
.arma-folha select{
  border-bottom:1px solid var(--borda); font-size:.82rem; padding:.15rem .2rem; min-height:30px;
}
/* O padding a direita reserva o lugar da setinha; sem ele o texto passa por
   baixo dela, que era o que cortava "Armamento Leve". */
.arma-folha select{
  padding-right:1.5rem; text-overflow:ellipsis;
  background-position:calc(100% - .8rem) .85rem, calc(100% - .55rem) .85rem;
}
.arma-folha__acoes{ display:flex; gap:.25rem }
.arma-folha__acoes button{
  padding:.2rem .45rem; font-size:.72rem; border-radius:5px; cursor:pointer;
  border:1px solid var(--borda-forte); background:var(--papel); color:var(--tinta-2);
  font-family:inherit; transition:var(--transicao);
}
.arma-folha__acoes button:hover{ background:var(--luz); border-color:var(--luz); color:#fff }
.arma-folha__cabecalho{
  display:none; grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) 66px auto;
  gap:.3rem; padding:.3rem .55rem 0;
  font-size:.58rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-3);
}

/* lista de etiquetas (especialidades, talentos) */
.etiquetas-folha{ display:flex; flex-wrap:wrap; gap:.3rem; padding:.3rem .55rem }
.entrada-folha{ display:flex; gap:.35rem; padding:.35rem .55rem .55rem }
.entrada-folha input{ border-bottom:1px solid var(--borda); font-size:.85rem }
.entrada-folha button{
  flex:none; padding:.2rem .6rem; font-size:.78rem; border-radius:5px; cursor:pointer;
  border:1px solid var(--borda-forte); background:var(--papel); color:var(--tinta-2);
  font-family:inherit; transition:var(--transicao);
}
.entrada-folha button:hover{ background:var(--luz); border-color:var(--luz); color:#fff }

/* ---------- objetivos, com os três círculos de progresso ---------- */
.objetivo-folha{ display:flex; align-items:center; gap:.5rem; padding:.15rem .55rem }
.objetivo-folha input{ border-bottom:1px solid var(--borda); font-size:.85rem; padding:.15rem .2rem }
.objetivo-folha__marcas{ display:flex; gap:4px; flex:none }
.objetivo-folha__marcas button{
  width:14px; height:14px; padding:0; border-radius:50%;
  border:1.5px solid var(--borda-forte); background:transparent;
  cursor:pointer; transition:var(--transicao);
}
.objetivo-folha__marcas button[aria-pressed="true"]{ background:var(--ambar); border-color:var(--ambar) }
.objetivo-folha__tirar{
  flex:none; width:20px; height:20px; padding:0; border:none; background:none;
  color:var(--tinta-3); cursor:pointer; border-radius:50%; line-height:1;
}
.objetivo-folha__tirar:hover{ background:var(--granada-fundo); color:var(--granada) }

/* ---------- separador de página, como o verso da ficha ---------- */
.folha__verso{
  display:flex; align-items:center; gap:.75rem; margin-top:.6rem;
  font-size:.62rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-3);
}
.folha__verso::before,
.folha__verso::after{ content:""; flex:1; height:1px; background:var(--borda) }

@container (min-width:440px){ .arma-folha__cabecalho{ display:grid } }

@media (max-width:520px){
  .arma-folha__acoes{ grid-column:1/-1 }
  .linha-pericia__circulos button{ width:18px; height:18px }
  .atr-caixa__passos button{ min-height:32px }
  .recurso-folha__passos button{ min-height:32px }
}

/* O círculo de graduação é pequeno de propósito — é assim na ficha impressa.
   Quem cresce é a área de toque: o ::after ocupa a folga entre os círculos
   sem invadir o vizinho, então o dedo acerta sem o desenho mudar. */
.linha-pericia__circulos button,
.objetivo-folha__marcas button{ position:relative }
.linha-pericia__circulos button::after,
.objetivo-folha__marcas button::after{
  content:""; position:absolute; inset:-8px -2px;
}

/* ---------- campos numéricos com passos ---------- */
.ajustes{ display:grid; gap:.5rem; margin-top:.6rem; grid-template-columns:minmax(0,1fr) }
@media (min-width:420px){ .ajustes{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.ajuste__controles{ display:flex; align-items:stretch; gap:.25rem; margin-top:.2rem }
.ajuste__controles input{
  flex:1; min-width:0; text-align:center; font-weight:650; font-size:.95rem;
  border:1px solid var(--borda); border-radius:var(--r-p);
  padding:.35rem .3rem; background:var(--papel);
}
.ajuste__controles button{
  flex:none; width:34px; min-height:34px; font-weight:700; font-size:1rem; line-height:1;
  border:1px solid var(--borda); border-radius:var(--r-p);
  background:var(--papel); color:var(--tinta-2); cursor:pointer;
  font-family:inherit; transition:var(--transicao);
}
.ajuste__controles button:hover:not([disabled]){
  background:var(--luz); border-color:var(--luz); color:#fff;
}
.ajuste__controles button[disabled]{ opacity:.35; cursor:default }

/* o campo de nível fica no meio da caixa, como os outros da ficha */
.folha input[inputmode="numeric"]{ font-variant-numeric:tabular-nums }

/* ---------- painel de progressão ---------- */
.medidas{ display:grid; gap:.6rem; grid-template-columns:minmax(0,1fr) }
@media (min-width:620px){ .medidas{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.medida{
  padding:.6rem .7rem; border-radius:var(--r-p);
  background:var(--superficie-2); border:1px solid var(--borda);
  border-left:3px solid var(--borda-forte);
}
.medida[data-estado="certo"]{ border-left-color:var(--verde) }
.medida[data-estado="sobrando"]{ border-left-color:var(--ambar) }
.medida[data-estado="excedido"]{ border-left-color:var(--granada) }
.medida__rotulo{
  display:block; font-size:.62rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-3);
}
.medida__conta{ display:block; font-family:var(--f-titulo); font-size:1.35rem; font-weight:600; line-height:1.2 }
.medida__conta small{ font-size:.7rem; color:var(--tinta-3); font-family:var(--f-texto) }
.medida__recado{ display:block; font-size:.75rem; font-weight:650 }
.medida[data-estado="certo"] .medida__recado{ color:var(--verde) }
.medida[data-estado="sobrando"] .medida__recado{ color:var(--ambar) }
.medida[data-estado="excedido"] .medida__recado{ color:var(--granada) }
.medida__dica{ display:block; font-size:.7rem; color:var(--tinta-3); margin-top:.15rem; line-height:1.35 }

.ganhos{ list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.4rem }
.ganhos li{
  display:flex; gap:.75rem; align-items:baseline;
  padding:.45rem .6rem; border-radius:var(--r-p);
  background:var(--superficie-2); border:1px solid var(--borda);
}
.ganhos b{
  flex:none; min-width:8.5rem; font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3);
}
.ganhos span{ font-size:.9rem }

/* nome de perícia clicável */
.linha-pericia__nome--link{
  border:none; background:none; padding:0; cursor:pointer; text-align:left;
  font:inherit; color:inherit; border-bottom:1px dashed transparent;
}
.linha-pericia__nome--link:hover{ color:var(--luz); border-bottom-color:var(--luz) }

/* ---------- catálogo de talentos ---------- */
dialog.catalogo{
  max-width:min(760px, calc(100vw - 1.5rem));
  width:100%; height:min(88vh, 900px);
  display:flex; flex-direction:column; padding:0;
}
dialog.catalogo:not([open]){ display:none }
.catalogo__topo{ padding:1rem 1.1rem .8rem; border-bottom:1px solid var(--borda); background:var(--superficie) }
.catalogo__lista{ flex:1; overflow-y:auto; padding:1rem 1.1rem 1.25rem; display:grid; gap:.7rem }

.talento{
  padding:.85rem 1rem; border-radius:var(--r-m);
  background:var(--superficie-2); border:1px solid var(--borda);
  border-left:3px solid var(--borda-forte);
}
.talento[data-situacao="atende"]{ border-left-color:var(--luz) }
.talento[data-situacao="falta"]{ border-left-color:var(--granada) }
.talento[data-situacao="indefinido"]{ border-left-color:var(--ambar) }
.talento__topo{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
.talento__topo h3{ font-size:1.02rem }
.talento__origem{ margin:.15rem 0 .4rem; font-size:.75rem; color:var(--tinta-3) }
.talento__pre{ margin:0 0 .5rem; display:flex; flex-wrap:wrap; gap:.4rem; font-size:.78rem }
.talento__pre span{
  padding:.12rem .5rem; border-radius:999px;
  background:var(--papel); border:1px solid var(--borda);
}
.talento__pre span[data-ok="true"]{ color:var(--verde); border-color:color-mix(in srgb,var(--verde) 40%,transparent) }
.talento__pre span[data-ok="false"]{ color:var(--granada); border-color:color-mix(in srgb,var(--granada) 40%,transparent) }
.talento__texto{ margin:0; font-size:.88rem; line-height:1.6; color:var(--tinta-2); white-space:pre-wrap }
.talento__acoes{ margin-top:.6rem }

/* etiqueta que abre a descrição do livro */
.etiqueta__abrir{
  border:none; background:none; padding:0; margin:0; cursor:pointer;
  font:inherit; color:inherit; border-bottom:1px dashed transparent;
}
.etiqueta__abrir:hover{ color:var(--luz); border-bottom-color:var(--luz) }

/* ---------- talentos na ficha ---------- */
.talentos-ficha{ display:grid; gap:.4rem; padding:.3rem .55rem }
.talento-ficha{
  display:flex; align-items:flex-start; gap:.3rem;
  border:1px solid var(--borda); border-radius:var(--r-p);
  background:var(--superficie-2);
}
.talento-ficha__abrir{
  flex:1; min-width:0; display:grid; gap:.15rem; text-align:left;
  border:none; background:none; cursor:pointer; font:inherit; color:inherit;
  padding:.45rem .55rem; border-radius:var(--r-p);
}
.talento-ficha__abrir:hover{ background:var(--luz-fundo) }
.talento-ficha__nome{ font-weight:650; font-size:.88rem; line-height:1.3 }
.talento-ficha__marcas{ display:flex; flex-wrap:wrap; gap:.25rem }
.selo{
  font-size:.66rem; font-weight:650; padding:.1rem .4rem; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.selo--ativacao{ background:var(--luz-fundo); color:var(--luz);
  border-color:color-mix(in srgb,var(--luz) 35%,transparent) }
.selo--custo{ background:var(--ambar-fundo); color:var(--ambar);
  border-color:color-mix(in srgb,var(--ambar) 35%,transparent) }
.talento-ficha__efeito{
  font-size:.78rem; line-height:1.45; color:var(--tinta-2);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.talento-ficha__efeito--vazio{ color:var(--tinta-3); font-style:italic }
.talento-ficha__tirar{
  flex:none; width:28px; align-self:stretch; border:none; background:none;
  color:var(--tinta-3); cursor:pointer; font-size:1rem; border-radius:0 var(--r-p) var(--r-p) 0;
}
.talento-ficha__tirar:hover{ background:var(--granada-fundo); color:var(--granada) }

/* ---------- ideais jurados ---------- */
.ideais{ display:flex; flex-wrap:wrap; gap:.3rem; padding:.3rem .55rem }
.ideais .ideal{
  flex:1 1 auto; min-width:64px; padding:.3rem .4rem; cursor:pointer;
  font:inherit; font-size:.72rem; font-weight:650;
  border:1px solid var(--borda-forte); border-radius:var(--r-p);
  background:var(--papel); color:var(--tinta-3); transition:var(--transicao);
}
.ideais .ideal[aria-pressed="true"]{
  background:var(--ambar); border-color:var(--ambar); color:#fff;
}
:root[data-tema="escuro"] .ideais .ideal[aria-pressed="true"]{ color:#2b1d06 }

/* ---------- condições com valor e explicação ---------- */
.condicoes-folha{ display:flex; flex-wrap:wrap; gap:.3rem; padding:.3rem .55rem .6rem }
.condicao{
  display:inline-flex; align-items:stretch; overflow:hidden;
  border:1px solid var(--borda-forte); border-radius:999px; background:var(--papel);
}
.condicao__marcar{
  border:none; background:none; cursor:pointer; font:inherit;
  font-size:.7rem; font-weight:600; color:var(--tinta-2); padding:.22rem .5rem;
  transition:var(--transicao);
}
.condicao__marcar:hover{ color:var(--tinta) }
.condicao--ativa{ background:var(--granada); border-color:var(--granada) }
.condicao--ativa .condicao__marcar{ color:#fff }
.condicao__passos{ display:flex; border-left:1px solid rgba(255,255,255,.35) }
.condicao__passos button{
  border:none; background:rgba(255,255,255,.15); color:#fff; cursor:pointer;
  width:20px; font:inherit; font-size:.75rem; font-weight:700; line-height:1;
}
.condicao__passos button:hover{ background:rgba(255,255,255,.32) }
.condicao__ver{
  border:none; background:none; cursor:pointer; width:20px; font:inherit;
  font-size:.7rem; font-weight:700; color:var(--tinta-3);
  border-left:1px solid var(--borda);
}
.condicao--ativa .condicao__ver{ color:#fff; border-left-color:rgba(255,255,255,.35) }
.condicao__ver:hover{ background:var(--luz-fundo); color:var(--luz) }

/* o que as condições estão fazendo agora */
.efeitos-ativos{
  margin:.2rem .55rem .5rem; padding:.45rem .6rem; border-radius:var(--r-p);
  background:var(--granada-fundo); border:1px solid color-mix(in srgb,var(--granada) 30%,transparent);
  font-size:.78rem; line-height:1.5; color:var(--tinta-2);
}
.efeitos-ativos strong{ color:var(--granada) }

/* atributo aprimorado por condição */
.atr-caixa--aprimorado .atr-caixa__valor{ color:var(--ambar) }
.atr-caixa__valor small{ font-size:.6em; vertical-align:super; margin-left:1px }
.derivado-folha__nota{ display:block; font-size:.6rem; font-weight:600; color:var(--tinta-3);
  font-family:var(--f-texto); letter-spacing:.02em }

/* ---------- ações de Radiante ---------- */
.acoes-radiante{ display:grid; gap:.4rem; padding:.3rem .55rem }
.acao-radiante{
  display:flex; align-items:center; gap:.4rem;
  border:1px solid var(--borda); border-radius:var(--r-p);
  background:var(--superficie-2); padding:.35rem .4rem .35rem .1rem;
}
.acao-radiante__ver{
  flex:1; min-width:0; display:grid; gap:.15rem; text-align:left;
  border:none; background:none; cursor:pointer; font:inherit; color:inherit;
  padding:.25rem .5rem; border-radius:var(--r-p);
}
.acao-radiante__ver:hover{ background:var(--luz-fundo) }
.acao-radiante__nome{ font-weight:650; font-size:.85rem; line-height:1.3 }