.buffs-section {
  display: flex;

  overflow: scroll;
  overflow-x: hidden;

  flex: 1;

  flex-direction: column;
  row-gap: min(10px, calc(10 * 0.1667vh));

  border-radius: min(20px, calc(20 * 0.1667vh));

  padding: min(12px, calc(12 * 0.1667vh));
  background: linear-gradient(
    145deg,
    #022c22 0%,
    #064e3b 50%,
    #065f46 100%
  );
  border: 1px solid rgba(45, 212, 191, 0.55);
  position: relative;
}

.search-wrapper {
  position: relative;

  flex-wrap: wrap;

  row-gap: min(8px, calc(8 * 0.1667vh));
}

.buff-search {
  flex: 1.5;

  padding: min(4px, calc(4 * 0.1667vh)) min(12px, calc(12 * 0.1667vh));
  flex-shrink: 0;

  font-size: max(18px, calc(18vh/12));
}

.suggestion-box {
  position: absolute;
  
  display: flex;
  flex-direction: column;

  gap: max(8px, calc(8vh/12));

  bottom: calc(100% + 12px);
  left: -12px;
  right: 0;

  padding: max(6px, calc(6vh/12));

  width: calc(100% + 24px);

  background: #212529;
  border: min(3px, calc(3 * 0.1667vh)) solid #111;
  border-radius: min(20px, calc(20 * 0.1667vh));

  max-height: min(500px, calc(500 * 0.1667vh));
  z-index: 10;
}

.buffs-catalog {
  display: flex;
  flex-direction: column;

  gap: min(8px, calc(8 * 0.1667vh));
  
  overflow-y: auto;
}

.buffs-catalog .buff-layout {
  cursor: pointer;
}

.buffs-container {
  display: flex;

  flex-direction: column;
  row-gap: min(12px, calc(12 * 0.1667vh));
}

.buff-layout {
  display: flex;

  flex-direction: column;
  gap: min(10px, calc(10 * 0.1667vh));

  border-radius: min(20px, calc(20 * 0.1667vh));

  padding: min(12px, calc(12 * 0.1667vh));
  background-color: rgba(0, 0, 0, 0.3);

  transition: 0.2s;
}

/* Calculator page: make each buff entry a clearer inner card */
body.calculator-page .buffs-section .buff-layout {
  background-color: rgba(6, 78, 59, 0.96);
  border-radius: min(16px, calc(16 * 0.1667vh));
  border: 1px solid rgba(34, 197, 94, 0.7);
}

.buffs-catalog .buff-layout:hover {
  background-color: rgba(0, 0, 0, 0.8);

  transform: scale(0.95);
}

.buff-top {
  display: flex;

  flex-direction: row;
  gap: min(12px, calc(12 * 0.1667vh));
  
  border-radius: min(20px, calc(20 * 0.1667vh));
}

.buff-image {
  height: min(90px, calc(90 * 0.1667vh));
  width: min(90px, calc(90 * 0.1667vh));

  min-width: min(90px, calc(90 * 0.1667vh));
}

.buff-image .unit-gradient {
  padding: min(4px, calc(4 * 0.1667vh));
}

.buff-description {
  display: flex;

  flex-direction: column;
  gap: min(6px, calc(6 * 0.1667vh));
}

.familiar-passive {
  text-align: end;
}