/* Echo Arena — dados úteis do showcase de Equipamentos */
.equipment-explorer{--divino-color:#FDE047}

.equipment-tag-divino{
  border-color:color-mix(in srgb,var(--divino-color) 62%,rgba(255,255,255,.12));
  color:#fff4a5;
  background:linear-gradient(135deg,rgba(253,224,71,.13),rgba(125,87,15,.08));
  box-shadow:0 0 18px rgba(253,224,71,.08),inset 0 0 16px rgba(253,224,71,.04);
}

.equipment-attribute-cards{
  width:min(610px,100%);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:22px;
  padding:9px;
  border:1px solid color-mix(in srgb,var(--item-color) 26%,rgba(119,143,194,.16));
  border-radius:13px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--item-color) 6%,rgba(7,12,23,.86)),rgba(7,12,23,.64));
  box-shadow:inset 0 0 28px rgba(81,109,170,.055),0 10px 28px #0003;
}

.equipment-attribute-card{
  position:relative;
  min-width:0;
  min-height:78px;
  padding:12px 13px 11px;
  border:1px solid rgba(121,145,197,.12);
  border-radius:9px;
  background:linear-gradient(145deg,rgba(12,20,36,.86),rgba(8,13,24,.58));
  overflow:hidden;
}

.equipment-attribute-card::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--item-color),transparent);
  opacity:.62;
}

.equipment-attribute-card span{
  display:block;
  color:#7d8ca6;
  font-size:7px;
  font-weight:900;
  letter-spacing:.09em;
  line-height:1.35;
  text-transform:uppercase;
}

.equipment-attribute-card strong{
  display:block;
  margin-top:6px;
  color:#f7f9ff;
  font:800 25px/1 var(--ex-display);
  letter-spacing:.02em;
}

.equipment-attribute-card small{
  display:block;
  margin-top:5px;
  color:#8c7f50;
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.equipment-attribute-card.is-empty{grid-column:1/-1}
.equipment-attribute-card.is-empty strong{color:#9ba8bd;font-size:20px}
.equipment-attribute-card.is-empty small{color:#70809a;text-transform:none;letter-spacing:0;font-size:9px}

.equipment-callout-values{
  display:grid;
  gap:4px;
  margin-top:4px;
  color:#e5eaff;
  font:700 10px/1.22 Inter,sans-serif;
}

.equipment-callout-values>span{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px;
  align-items:baseline;
  color:#8b99b2;
  font-size:8px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}

.equipment-callout-values b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#9eabc0;
  font-weight:650;
}

.equipment-callout-values em{
  color:#fff2a0;
  font-style:normal;
  font-weight:900;
  white-space:nowrap;
}

.callout-class small{
  display:block;
  max-width:165px;
  margin-top:4px;
  color:#73839e;
  font-size:7px;
  line-height:1.35;
  letter-spacing:.04em;
  text-transform:none;
}

.callout-attributes{max-width:210px}
.callout-class{max-width:210px}

.equipment-explorer[data-active-id] .equipment-rarity-ring{
  border-color:color-mix(in srgb,var(--item-color) 56%,transparent);
}

@media(max-width:1180px) and (min-width:821px){
  .equipment-attribute-card{min-height:72px;padding:10px 11px}
  .equipment-attribute-card strong{font-size:22px}
  .equipment-callout-values>span{font-size:7px}
  .callout-class small{max-width:135px}
}

@media(max-width:820px){
  .equipment-attribute-cards{width:100%;max-width:650px}
}

@media(max-width:700px){
  .equipment-attribute-cards{grid-template-columns:1fr 1fr;margin-top:17px;padding:7px}
  .equipment-attribute-card{min-height:68px;padding:9px 10px}
  .equipment-attribute-card strong{font-size:20px}
  .equipment-callout-values{gap:2px}
  .equipment-callout-values>span{display:block;font-size:7px}
  .equipment-callout-values em{display:block;margin-top:1px}
  .callout-class small{display:none}
}