














.eq-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 6px;
}
.eq-head .eq-thumb { flex: none; }
.eq-head > div { min-width: 0; }




.eq-head__name {
  font-family: var(--font-game);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-h);
}
.eq-head__rarity {
  margin-top: var(--s1);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent);          
}









@media (min-width: 561px) {
  .eq-rc-stat { grid-template-columns: 1fr 140px 7ch; }
  .eq-rc-stat__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}






.eq-slot__orsep {
  margin-top: var(--s3);
  padding-left: var(--s3);
  text-align: left;
}


















.eq-slot__note { padding-right: max(0px, calc(100% - var(--measure))); }








.eq-rc-slot__head { color: var(--text-muted); }   



.eq-rc-slot__head label {
  font-family: var(--font-game);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}


.eq-rc-stat__name { color: var(--text); }         
.eq-rc-stat__fixed,
.eq-rc-slot__fixed { color: var(--text-faint); }  





.eq-head__twin {
  display: inline-block;
  margin-top: var(--s1);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-blue);     
}
.eq-head__twin:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .eq-head { gap: var(--s3); }
}










.eq-details > .panel,
.eq-slot {
  margin-bottom: 0;
  padding: var(--s3) 0;
  background: none;
  border: 0;
  border-bottom: var(--hair) solid var(--rule);
  border-radius: var(--radius-panel);
}


.eq-slot__head {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-game);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);      
}















.eq-slot__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  background: rgba(255, 255, 255, 0.035);
  border: 0;
  border-radius: var(--radius);
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.eq-slot__stat-k {
  margin-right: auto;
  padding-right: var(--s4);
  color: var(--text);
}






.eq-slot__stat-k--block {
  white-space: pre-line;
  line-height: 1.65;
}
.eq-slot__min,
.eq-slot__max,
.eq-slot__val {
  display: inline-block;
  min-width: 6ch;
  text-align: right;
}
.eq-slot__val { font-weight: 700; color: var(--text); }




.eq-slot__val--neg { color: var(--accent-red); }
.eq-slot__pct { display: inline-block; min-width: 1.4ch; color: var(--text-muted); }







.eq-slot__note {
  flex-basis: 100%;
  margin-top: var(--s1);
  font-size: var(--t-dense);
  line-height: 1.5;
  white-space: pre-line;
  color: var(--text-muted);      
}










.eq-slot__option {
  padding: 0 0 0 var(--s3);
  background: none;
  border: 0;
  border-left: var(--hair) solid var(--rule);
  border-radius: 0;
}






.eq-slot__otag,
.eq-slot__orsep,
.eq-tags__and,
.eq-tags__or {
  font-size: var(--t-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-faint);      
}









.eq-tags:has(.eq-tags__or) {
  flex-direction: column;
  align-items: flex-start;
}
.eq-tags__g {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}











.eq-rankcalc__grade { gap: var(--s4); }
.eq-rankcalc__score {
  font-size: var(--t-lead);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.eq-rankcalc__score::after {
  content: " / 100";
  font-size: var(--t-dense);
  font-weight: 500;
  color: var(--text-muted);
}








.eq-rankcalc__bar {
  height: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  





  --tick: color-mix(in srgb, var(--text-muted) 75%, transparent);
  background:
    linear-gradient(90deg,
      transparent 0 calc(10%   - 1px), var(--tick) 0 calc(10%   + 1px),
      transparent 0 calc(20%   - 1px), var(--tick) 0 calc(20%   + 1px),
      transparent 0 calc(30%   - 1px), var(--tick) 0 calc(30%   + 1px),
      transparent 0 calc(40%   - 1px), var(--tick) 0 calc(40%   + 1px),
      transparent 0 calc(60%   - 1px), var(--tick) 0 calc(60%   + 1px),
      transparent 0 calc(80%   - 1px), rgba(255, 206, 110, 0.75) 0 calc(80%   + 1px),
      transparent 0 calc(90%   - 1px), rgba(255, 206, 110, 0.75) 0 calc(90%   + 1px),
      transparent 0 calc(94%   - 1px), rgba(255, 206, 110, 0.75) 0 calc(94%   + 1px),
      transparent 0 calc(97.5% - 1px), rgba(255, 206, 110, 0.75) 0 calc(97.5% + 1px),
      transparent 0 100%),
    





    linear-gradient(90deg, #4f6ea8, var(--accent))
      0 0 / var(--rc-fill, 0%) 100% no-repeat,
    linear-gradient(90deg, #1b2030, #2b3556);
}
.eq-rankcalc__ptr {
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-color: #0d0f14;
  

  box-shadow: 0 0 0 3px rgba(255, 206, 110, 0.16), 0 0 12px rgba(255, 206, 110, 0.45);
}












.eq-rankcalc__btns button,
.eq-rc-slot__opt,
.eq-chars__loadmore {
  height: 34px;
  padding: 0 var(--s3);
  font-family: var(--font-barlow);
  font-size: var(--t-body);
  color: var(--text);
  cursor: pointer;
  background: var(--bg-raised);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}
.eq-rankcalc__btns button:hover,
.eq-rc-slot__opt:hover,
.eq-chars__loadmore:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background-color: var(--bg-raised);
}
.eq-rankcalc__btns button:focus-visible,
.eq-rc-slot__opt:focus-visible,
.eq-chars__loadmore:focus-visible,
.eq-rc-slot__head input:focus-visible,
.eq-rc-stat input[type="range"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}



.eq-rc-slot__fixed { border-radius: var(--radius); }






.eq-rc-slot {
  gap: 0;
  padding: 10px 12px;
  background: var(--bg-row);
  border-radius: var(--radius);
}
.eq-rc-slot__head {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.eq-rc-slot__head input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-blue);
}

.eq-rc-slot__head input:disabled { opacity: 0.5; cursor: default; }
.eq-rc-stat { padding: 4px 0; }
.eq-rc-stat__val { min-width: 7ch; font-variant-numeric: tabular-nums; }





@media (prefers-reduced-motion: reduce) {
  .eq-rankcalc__btns button,
  .eq-rc-slot__opt,
  .eq-chars__loadmore,
  .eq-rankcalc__ptr { transition: none; }
}
