/* Evolução visual do Criar Build.
   Camada aditiva: preserva imagens, raridade, lógica e dados reais. */
:root{
  --build-evo-positive:#42e39a;
  --build-evo-negative:#ff6f82;
  --build-evo-cyan:#4bdcf2;
  --build-evo-violet:#a978ff;
}

.workbench-zone{gap:18px}
.hero-panel,.build-plan,.synergy-stage,.impact-panel{
  border-color:rgba(145,159,199,.18)!important;
  box-shadow:0 28px 68px rgba(0,0,0,.31)!important;
}
.hero-panel,.build-plan{
  background:linear-gradient(160deg,rgba(16,24,42,.96),rgba(7,12,22,.98))!important;
}
.synergy-stage{
  overflow:hidden;
  border:1px solid rgba(75,220,242,.12)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(75,220,242,.075),transparent 36%),
    linear-gradient(180deg,rgba(6,12,23,.80),rgba(5,9,18,.95))!important;
}

/* O item continua sendo identificado pela própria imagem e pela cor real da raridade. */
.slot:not(.empty){filter:none}
.slot:not(.empty)::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;top:48%;
  width:92%;height:74%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--rc) 22%,transparent),transparent 68%);
  filter:blur(10px);
  opacity:.72;
  pointer-events:none;
}
.slot:not(.empty) .hex{
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--rc) 88%,#fff 12%),
    color-mix(in srgb,var(--rc) 44%,#132238 56%) 42%,
    color-mix(in srgb,var(--rc) 76%,#08111d 24%))!important;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.34)) drop-shadow(0 0 10px color-mix(in srgb,var(--rc) 24%,transparent))!important;
}
.slot:not(.empty) .hex::before{
  inset:3px!important;
  background:
    radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rc) 18%,transparent),transparent 58%),
    linear-gradient(145deg,rgba(8,20,34,.91),rgba(3,9,20,.97))!important;
}
.slot .hex .media{
  inset:8px 13px 16px!important;
  filter:none!important;
}
.slot .hex .media>img,.slot .hex .media>video{filter:none!important}
.slot.active .hex{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--rc) 34%,transparent) inset;
  filter:drop-shadow(0 10px 15px rgba(0,0,0,.34)) drop-shadow(0 0 17px color-mix(in srgb,var(--rc) 48%,transparent))!important;
}
.slot .in{
  min-width:112px;
  max-width:156px!important;
  padding:6px 9px 7px!important;
  border-color:color-mix(in srgb,var(--rc) 58%,#1d4561)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,rgba(8,17,29,.98),rgba(5,11,20,.98))!important;
  box-shadow:0 9px 22px rgba(0,0,0,.34),0 0 12px color-mix(in srgb,var(--rc) 8%,transparent)!important;
}
.slot .in b{color:#f5f7fb!important;font-weight:700!important}
.slot .in i{
  margin-top:2px;
  color:var(--rc)!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
}
.slot-impact{
  display:block;
  max-width:136px;
  margin:4px auto 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--build-evo-positive);
  font:800 8px/1.15 var(--ui);
  letter-spacing:.01em;
  text-transform:none;
}
.slot-impact.is-negative{color:var(--build-evo-negative)}

/* Intensidade crescente sem redefinir a cor cadastrada no banco. */
.slot[data-rarity-rank="1"]::after{opacity:.28}
.slot[data-rarity-rank="2"]::after{opacity:.42}
.slot[data-rarity-rank="3"]::after{opacity:.56}
.slot[data-rarity-rank="4"]::after{opacity:.70}
.slot[data-rarity-rank="5"]::after,.slot[data-rarity-rank="6"]::after{opacity:.88}
.slot[data-rarity-rank="5"] .hex,.slot[data-rarity-rank="6"] .hex{
  filter:drop-shadow(0 10px 15px rgba(0,0,0,.34)) drop-shadow(0 0 16px color-mix(in srgb,var(--rc) 40%,transparent))!important;
}

/* Seleção de equipamentos: a foto continua protagonista e a raridade vira moldura. */
.pick-tile-icon{
  border-color:color-mix(in srgb,var(--rc,var(--violet)) 34%,rgba(126,147,197,.22))!important;
  background:
    radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--rc,var(--violet)) 13%,transparent),transparent 64%),
    rgba(255,255,255,.022)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.18),0 0 11px color-mix(in srgb,var(--rc,var(--violet)) 8%,transparent);
}
.pick-tile.sel .pick-tile-icon{
  border-color:var(--rc,var(--violet))!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--rc,var(--violet)) 16%,transparent),0 0 20px color-mix(in srgb,var(--rc,var(--violet)) 28%,transparent)!important;
}
.pick-evolution-meta{
  display:grid;
  gap:3px;
  width:86px;
  margin-top:-3px;
}
.pick-evolution-rarity{
  color:var(--rc,var(--violet));
  font:900 7px/1 var(--ui);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pick-evolution-impact{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#7fe4b2;
  font:800 7px/1.15 var(--ui);
}

/* Plano da build: leitura de progresso sem mudar o fluxo existente. */
.build-evolution-status{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  margin:0 0 14px;
  padding:12px;
  border:1px solid rgba(66,227,154,.18);
  border-radius:13px;
  background:linear-gradient(135deg,rgba(66,227,154,.065),rgba(255,255,255,.012));
}
.build-evolution-status small{
  display:block;
  color:#7f8ca2;
  font-size:7px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.build-evolution-status strong{
  display:block;
  margin-top:3px;
  color:#f7fbff;
  font:800 20px/1 var(--display);
}
.build-evolution-status em{
  color:#83f0bd;
  font-style:normal;
  font-size:8px;
  font-weight:800;
}
.build-evolution-status .progress{
  grid-column:1/-1;
  height:5px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.05);
}
.build-evolution-status .progress i{
  display:block;
  height:100%;
  width:var(--build-progress,0%);
  border-radius:inherit;
  background:linear-gradient(90deg,var(--build-evo-violet),var(--build-evo-cyan));
  box-shadow:0 0 14px rgba(75,220,242,.30);
  transition:width .25s ease;
}
.build-plan h2{margin-bottom:16px!important}
.recommendation-card{
  border-color:rgba(245,196,81,.20)!important;
  background:linear-gradient(135deg,rgba(245,196,81,.065),rgba(255,255,255,.012))!important;
}
.recommendation-card h3{color:#f2d27e!important}

/* A área que já mostra o item escolhido passa a funcionar como impacto imediato. */
.equipment-float{
  border-color:rgba(169,120,255,.28)!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,rgba(20,17,42,.96),rgba(7,13,25,.97))!important;
  box-shadow:0 16px 38px rgba(0,0,0,.44),0 0 26px rgba(115,67,204,.12)!important;
}
.equipment-float .delta-list span{font-weight:800}

.impact-panel{
  background:linear-gradient(160deg,rgba(15,22,39,.95),rgba(7,12,22,.98))!important;
}
.impact-grid article{transition:border-color .18s,background .18s}
.impact-grid article:hover{background:rgba(255,255,255,.018)}

@media(max-width:800px){
  .workbench-zone{gap:14px}
  .synergy-stage{border-radius:16px!important}
  .build-evolution-status{margin-bottom:13px}
  .slot .in{border-radius:7px!important}
}

@media(max-width:560px){
  .slot .in{
    width:92px!important;
    max-width:92px!important;
    padding:4px 5px 5px!important;
  }
  .slot .in b{max-width:82px!important}
  .slot-impact{
    max-width:82px;
    margin-top:3px;
    font-size:6.5px;
  }
  .pick-evolution-meta{width:64px}
  .pick-evolution-rarity,.pick-evolution-impact{font-size:6px}
  .build-evolution-status strong{font-size:18px}
}

@media(max-width:370px){
  .slot .in{width:80px!important;max-width:80px!important}
  .slot-impact{max-width:70px;font-size:6px}
}